トップページ>>ホームページ>>その1>>その2

ボディタグその2

bodyタグの上部は作れましたか?
この章ではこの記事が書かれている部分について説明をして行きたいと思います。
<div id="body">
 bodyと言う名前のdivを作りました。
ややこしいですが本文と言う意味のbodyです。これが解りやすいかなと思ったので名前をbodyにしました。
#body{
width:800px;
float:left;
}
<div body>のCSSはこちらです。
float:left;によって、右側のリンクをその場所に表示する事が出来ます。
<h1 class="midasi" id="body_kaisetu2">ボディタグその2</h1>
その中に見出しを作っています。
class="midasi"はCSSを適用するために設定しています。
id="body_kaisetu2"はリンクをここに飛ばすために設定しています。
いくつかの見出しに同じCSSプロパティを指定するためにclassにしています。
classとidの説明は→こちら

 リンクを指定した場所に飛ばすためには、idが必要になります。
ページにリンクを張る事は出来ますね?リンクについては→こちら
idを使った飛ばす場所の指定は簡単です。
 #id名で指定出来ます。#をつけ忘れないようにしましょう。
CSSの指定と同じなので覚えやすいですね。

 class「midasi」のCSSはこちら
#body h1.midasi{
font-size:250%;
border-left:solid 10px #f00;
border-bottom:solid 3px #000;
padding-left:10px;
}
 id「body」内のh1タグclass「midasi」への指定をしています。
その説明は前ページでしました。
単に.midasiでも問題ないのですが、こちらの方がどこで使っているのか解りやすいかと思ったのでこのように記述しました。

 そして
<div class="nakami">
この文章が書かれている枠を作りました。
CSSはこちら↓
.nakami{
border-top:inset 3px #000;
border-bottom:inset 3px #000;
border-left:inset 3px #000;
border-right:inset 1px #000;
margin:0px;
padding:10px;
letter-spacing:10px;
line-height:200%;
text-indent:1em;
}
letter-spacingは文字と文字の間隔を指定するプロパティです。
line-heightは行の間隔を指定するプロパティです。
text-indentは文章の最初を字下げするプロパティです。
出来るだけ読みやすいようにしたいので指定しました。
 その他のプロパティは解りますね?
borderが解らない方は→こちら
margin・paddingが解らない方は→こちら

 このclass「nakami」にこの文章を書いています。
</div>
ここでclass「nakami」が終わります。
 class「nakami」の下に「ページの上へ」と言うリンクがあります。
これはこのページの上へ移動するリンクです。
ブラウザ横のスクロールバーを動かす必要なく上まで戻れるので、少しは便利になる気がします。
<span class="upper"><a href="#top">ページの上へ</a><span>
 リンクを飛ばす場所を指定する方法は先ほど記述しました。→こちら
ページ内ならば#id名で飛ばす事が出来ます。便利ですね。
.upper{
float:right;
}
float:right;で右側に寄せています。
spanはインライン要素なので、これだけで隅に寄ってくれます。
ページの一番下だけは少し記述が違います。
前ページと次ページへのリンクを張っています。
<p class="next_page">
<a href="kaisetu.html"><<前へ</a>
<a href="omake2.html">次へ>></a>
<span class="upper"><a href="#top">ページの上へ</a></span>
</p>
.next_page{
text-align:center;
margin:0px;
}
.next_page a{
text-decoration:none;
}
 文字を真ん中に寄せています。
そしてリンクの下線を消しています。

 これでbodyの中身は解りましたね?
ちなみにhtmlコードの例を書いている場所はこの様に記述しています。
<div class="code">
コードの中身
</div>
.code{
letter-spacing:0px;
line-height:130%;
padding:20px;
background:#0dd;
text-indent:0px;
border:outset 3px #f6c;
}
 色分けは背景色とclass名を変えれば良いだけです。
最後にこれを記述します。
</div>
これでid「body」が終わりました。
次は右側のメニューの作り方を学びましょう。

<<前へ 次へ>> ページの上へ