CamaradeCamarade
2015/04/20

divって何?ホームページのレイアウトタグ基本

この記事は約3分で読めます。

divって何?ホームページのレイアウトタグ基本

初級カスタマイズ

ホームページを制作する上でよく使われるタグの一つ、div要素。
初心者の方はdivではなく、table要素を使ってレイアウトを作る方もいます。
何を隠そう、独学で勉強していた私はtableばかり使っていました。
divとは何?という気持ちはよーく分かりますので、今回ご説明させて頂きます。

ホームページレイアウトにdivを使う

たとえばこのようなレイアウトの場合。

右側に寄せる文章

一番基本となるパターンです。
この場合は、

 1

とHTMLで記述します。
これにCSSで

2

と記述します。

左右にdivというボックスを作り、左に寄せる(フロート)「photo」ボックス・その右側に「text」ボックスという風に名前を付けてCSSでレイアウトしています。

 4  積み木の様に。

 

隙間のレイアウト

でもこのままじゃボックスがピッタリくっついている。
ボックス同士に隙間を作りたい時はmarginを使います。
先ほどのCSSに、
3
marginプロパティを加えてみますと、

右側に寄せる文章

隙間ができました。
この「margin」では、4つの数字の設定をしていますが、始めの数字が上、次が右、下、左、と時計回りに対応しています。
つまり、上記のCSSでは「photo」ボックスの右側が20px空くようにしています。

隙間のレイアウトその2

隙間のレイアウトで使うもう一つのプロパティ、padding
これは、

右側に寄せる文章

こんな時に使います。

 7

右側に寄せる文章

こんな感じでボックスにはボーダーや背景色も設定する事ができます。
でもテキストがボックスの隅にビターっとしていたらカッコ悪いですよね。
そんなとき、ボックスの内側に隙間を作るのがこのpaddingプロパティです。
ちなみにこのcssは、2つの数字を設定していますが、
2つだけ設定すると、「上下」「左右」の数字を設定していることになります。

floatを使った時の注意

そして最後に忘れてはいけないのが、
floatを使用した時にありがちなのが、

右側に寄せる文章
下に表示させる文章

最後のテキストは下に表示させたいのに…
という時。
この解決方法は、
6
「clear:both」を設定して、回り込みを解除する事です。
レイアウトが崩れた時の原因としてよくclearがされていない事がありますので気を付けて下さい。

右側に寄せる文章
下に表示させる文章

いかがでしたでしょうか。
今回はdiv要素の基本をご説明しました。
本当によく使うので、私が仕事を始めた頃はマージンだのパディングだの、夢にでてきた程でした。
まだ説明の足りない所もあるので、また次回に続きます!

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。