マージン・パディング・ボーダーのカテゴリ
ボックスモデルとは何だろう？
ブロックレベルやインライン要素は、Webページのなかで長方形の領域を作ります。
このような領域を「ボックス」と呼びます。
スタイルシートでマージンを設定する。
Webページのデザイン上、段落間の間を空ける際にbrタグなどを使うと、思うようなデザインが出来ないことがあります。 このようなときに、スタイルシートのマージンを使ってうまく設定しましょう。
マージンをまとめて設定する。
スタイルシートを使ってマージンを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。
スタイルシートでパディングを設定する
ボックスモデルの三要素の一つパディングをスタイルシートを使って設定してみましょう。パディングって何？って人は、 ” ボックスモデルとは何だろう？”を確認してください。マージンが段落間のスペース幅を設定しているのに対し、 パディングはボーダーから内容までのスペース幅を設定します。
パディングをまとめて設定する。
スタイルシートでパディングを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。
スタイルシートでボーダーを引く
HTMLを使って枠線を引くには、tableタグを重ねて設定するなど非常に長くHTML文を書く必要があります。 スタイルシートを使って要素のパディングの外側に境界線を引けば、HTMLをスリム化することが出来ます。
ボーダーの種類・色・幅をスタイルシートで指定する。
『スタイルシートでボーダーをひく』では、 border-topなどのプロパティを使って、上下左右のボーダーに対してそれぞれ境界線の種類や色、幅を指定していました。ここでは、 線の種類/色/幅の別に各方向の設定をまとめる方法を紹介します。
スタイルシートでボーダーを個別に指定する
スタイルシートを使ってボーダーを指定する際に、ボーダーの方向と書式をピンポイントで指定することもできます。
スタイルシートですべての方向に同じボーダーを引く。
一般的に境界線を引く場合、上下左右すべてにバラバラな設定をすることは稀です。 そんなことをするとかえって見にくくなってしまうからです。 スタイルシートで上下左右の四方向に同じボーダーを引くにはborderプロパティを使います。
