divタグを使ったレイアウト(2)

今回は前回例として挙げたhtmlのタグをご覧いただきながら、CSSでどのような設定を施していたのかを解説していきます。

その前に人気ブログランキングをご覧下さい。

(1)
<div class="my_box">
<div class="my_header">ヘッダ</div>
<div class="my_left">左側</div>
<div class="my_right">右側</div>
<div class="my_footer">フッタ</div>
</div>

この段階ではCSSが未定義状態ですので、このタグをブラウザで閲覧すると

(2)
ヘッダ
左側
右側
フッタ

という状態にしか見えません。また仮にCSSが定義されていたとしても、検索ロボットの目には(2)の状態で見えています。

しかし、このままでは人間が見る時に見づらいので、CSSを使ってレイアウトしていく必要があります。そのCSSが次のようなものです。

(3)
.my_box {
width: 100px;
border:solid 1px;
}
.my_header {
text-align:center;
border-bottom:solid 1px;
margin:0;
}

.my_left {
float:left;
margin-left:0;
text-align:center;
width:49px;
}

.my_right {
border-left:solid 1px;
float:left;
margin-right:0;
text-align:center;
width:49px;
}

.my_footer {
text-align:center;
clear:left;
margin:0;
border-top:solid 1px;
}

ここからはhtmlタグとCSSを見比べながら読み進めて下さい。まず今回のレイアウトを収めるための段落として(1)の1行目の<div class="my_box">と最終行の</div>(便宜上、親段落と表記します)でそれを定義しています。2行目から5行目までは、親段落の入れ子状態の段落として、それぞれ定義されています。

またそれぞれのdivタグ内にはclass="***"と記述されています。この***の部分がそれぞれ定義されたCSSを示す名札のようなものです。(3)のCSSを見ると、***の冒頭に.(ドット)が付いていますが、現時点ではあまり気にしなくても大丈夫です。

まずはこの構造をしっかり把握して下さい。次回はそれぞれの行で働いているCSSについて解説します。

posted by ひっそり | Comment(0) | TrackBack(0) | div
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/15444188
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。