9.CSSで使う主要なプロパティと値を知ろう(2)

ボーダーと背景を決めるCSS

次は枠線を引くプロパティと背景の色や画像などを決めるプロパティの紹介です。まずはボーダーからいきましょう。

border

要素の枠線を引くプロパティ。罫線や点線、破線など数種類有り。

例：

div {
 border: 1px solid #f00;
}

適用例：

borderプロパティはこのように要素の全方向（上下左右）とすることもできますが、marginやpaddingのように上だけ、右だけといったように個別に設定することができます。また今回はborderプロパティを使って3種類（線の太さ、線の種類、線の色）を設定しましたがそれぞれ個別に設定することもできます。（こちらはあまり使う機会はないかもしれません）

一例：

/*上方向だけボーダー 例：*/
div {
 border-top: 1px solid #f00;
}

このborderプロパティ、borderを境目に内側がpaddingエリア、外側がmarginエリアとなっています。このborderプロパティを利用して「こっから先が内側、逆が外側」と理解するのに役立ちます。marginとpaddingで困ったら試しにborderをかけてみるというのはお勧めです。

background

要素の背景に関する情報を定義するプロパティ。

例：

p {
 background: url(apple.jpg) no-repeat;
}

適用例：

backgroundプロパティは複数の値を設定できます。今回サンプルでは「画像」と「設定した画像のリピート」を指定しました。これは個別にプロパティが存在もしているし、今回のようにbackgroundプロパティをつかって複数指定も可能です。
他に設定できる値としては以下。

/*背景色を黒に変更 例：*/
div {
 background-color: black;
}
/*背景に指定した画像を表示 例：*/
div {
 background-image: url(../images/coffee.png);
}
/*背景画像のリピートを横方向だけに指定 例：*/
div {
 background-repeat: repeat-x;
}
/*背景画像の位置を左から100px, 縦方向中央に指定 例：*/
div {
 background-position: 100px center;
}
/*まとめて指定する （背景色グレー、sample.gif画像を縦方向にリピート表示、位置は横方向中央　例：*/
div {
 background: #ccc url(../../sample.gif) repeat-y center;
}

backgroundプロパティも使用頻度が高いプロパティです。まとめて指定すると行の節約にもなるので是非覚えておきましょう。

要素の回り込みと解除を定義するCSS

次に続く要素を回りこませて横並びにしたり、回りこませた要素を解除する方法があります。最初の内は理解するのが大変ですが重要なプロパティなので頑張って覚えましょう。

float

要素を浮かせ、次に続く要素を空いた部分に回りこませるプロパティ。

例：

div {
 float: left;
}

適用例：

適用例では、「サンプル文字」というのにfloatがかかっていて、この要素を「浮かせて→左に寄せる」という作業をしています。その後、floatに依って空いた「右側」に次に続く要素であるテキストが回りこんできているのがわかるかとおもいます。
floatプロパティの値はleftの他に右に寄せる「right」、floatを元に戻す「none」等があります。

/*右にfloat 例：*/
div {
 float: right;
}
/*floatしたものを元に戻す 例：*/
div {
 float: none;
}

floatプロパティは次に出てくるclearプロパティと一緒にセットで覚えておきましょう。

clear

floatして回りこんできている状態を解除するプロパティ。

例：

h3 {
 clear: both;
}

適用例：

先ほどのfloatの適用例と同じ状態にclearの一行を追加しました。わかりやすくするためにボックスを大きくしました。floatしている状態を解除しているので最後の一行がグレーのボックスの下に表示されていますね。
bothという値の他に「left」「right」などがありました、これは「どっちの方向を解除するか？」と聞かれているので右や左と限定して解除することはほぼなく、「both」を指定し両方解除するのが間違いがなく便利です。

リストに対するCSS

次はHTMLのul, ol, liといったリストに対するCSSを定義します。

list-style

リストに対する様々な定義をするプロパティ。

例：

ul li {
 list-style: square inside;
}

適用例：

squareの他にcircleで白丸、noneで無し、decimalで数字など、他にもいろいろと設定できます。
insideは内側でしたが、outsideで外側に設定することも可能。通常はoutside。

list-styleを使うとまとめてリストのスタイルを設定できますが細かいプロパティも存在します。backgroundプロパティのように。

/*listの種類を定義する 例：*/
ul li {
 list-style-type: circle;
}
/*listのマークの位置を指定する 例：*/
ul li {
 list-style-position: inside;
}
/*listに画像を設定する 例：*/
ul li {
 list-style-image: url(images/soda.jpg);
}

このように個別に指定することはできますが、一つでも複数でも基本的に「list-style」で設定してしまうことが多いです。個別に設定できるよ、というくらいでOKでしょう。

高さ、横幅を定義するCSS

最後に要素の高さや横幅を設定するCSS。これもよく使います。

height

要素の高さを定義するプロパティ。ヘイトと読みたくなりますが正しい発音は「ハイト」です。

例：

p {
 height: 100px;
}

適用例：

高さを変えたいときに使うプロパティですが、要素の中の文字がはみ出しても高さを指定している場合は文字がはみ出したままです。heightプロパティはどうしても高さを指定したいときにとどめ基本的には指定しないほうが崩れの少ないウェブページが作成できます。

width

要素の横幅を定義するプロパティ。読み方はウィドゥスというのが一般的ですがウィドスやウィズと言う方もいるようです。あまり気にしなくてOK。

例：

p {
 width: 300px;
}

適用例：

heightプロパティと同じで指定しないと100%表示となり、そのブロック内において最大値まで伸びます。
「この要素の横幅はどのくらいなんだろう？」と思ったらbackground-color等のプロパティをかけてみて目で確認してもいいでしょう。

高さや横幅というのはブロックレベル要素に適用が出来、インライン要素には適用ができません。
「ブロック？インライン？」聞きなれない言葉ですが、CSSを理解する上で大事な概念になるので次回移行学んでいきましょう。

CSSプロパティまとめ

お疲れ様でした。主要なCSSプロパティの説明でしたがいかがでしたか？
「たくさん覚えて大変…」
「そこまで難しくなかった」
感じることは様々でしょうが、CSSは書いていると規則性が自分なりにわかってきて、「このプロパティにはこういう値が入るんじゃないか？」といったことが感覚でわかるようになってきます。
そして何より、CSSの書き方がわかるようになるとHTMLやCSSではできなかったプログラミング言語のフレームワーク、jQueryの理解が早まります。jQueryはCSSの書き方で書いていくのでいきなり知識がない状態で挑むよりか遥かにラクに覚えることができます。

次回はプロパティを定義する際に知っておくべきブロックレベル要素とインライン要素について学びましょう。