footer東京都を拠点にしたWebサイト制作。CSSプロパティまとめボーダーと背景を決めるCSS次は枠線を引くプロパティと背景の色や画像などを決めるプロパティの紹介です。ボーダーからいきましょう。border要素の枠線を引くプロパティ。罫線や点線、破線など数種類有り。#f00;}適用例:グレーのエリア要素に枠線を設定します。枠線は1pxの罫線とし色は赤くします。サンプル文字borderプロパティはこのように要素の全方向(上下左右)とすることもできますが、marginやpaddingのように上だけ、右だけといったように個別に設定することができます。今回はborderプロパティを使って3種類(線の太さ、線の種類、線の色)を設定しましたがそれぞれ個別に設定することもできます。#f00;}このborderプロパティ、borderを境目に内側がpaddingエリア、外側がmarginエリアとなっています。このborderプロパティを利用して「こっから先が内側、逆が外側」と理解するのに役立ちます。marginとpaddingで困ったら試しにborderをかけてみるというのはお勧めです。background要素の背景に関する情報を定義するプロパティ。no-repeat;}適用例:要素の背景にりんごの画像を表示させます。サンプル文字backgroundプロパティは複数の値を設定できます。今回サンプルでは「画像」と「設定した画像のリピート」を指定しました。これは個別にプロパティが存在もしているし、今回のようにbackgroundプロパティをつかって複数指定も可能です。他に設定できる値としては以下。center;}backgroundプロパティも使用頻度が高いプロパティです。まとめて指定すると行の節約にもなるので是非覚えておきましょう。要素の回り込みと解除を定義するCSS次に続く要素を回りこませて横並びにしたり、回りこませた要素を解除する方法があります。最初の内は理解するのが大変ですが重要なプロパティなので頑張って覚えましょう。float要素を浮かせ、次に続く要素を空いた部分に回りこませるプロパティ。left;}適用例:最初の要素を左に浮かせ、次に続く要素を空いた右側に回りこませるサンプル文字(ここにfloatをかけている)次に続く要素(空いている右側に勝手に回り込む)適用例では、「サンプル文字」というのにfloatがかかっていて、この要素を「浮かせて→左に寄せる」という作業をしています。その後、floatに依って空いた「右側」に次に続く要素であるテキストが回りこんできているのがわかるかとおもいます。floatプロパティの値はleftの他に右に寄せる「right」、floatを元に戻す「none」等があります。none;}floatプロパティは次に出てくるclearプロパティと一緒にセットで覚えておきましょう。clearfloatして回りこんできている状態を解除するプロパティ。both;}適用例:floatしている状態を解除するサンプル文字(ここにfloatをかけている)次に続く要素(空いている右側に勝手に回り込む)ここにclearをかけてfloatしていた状態を解除しています先ほどのfloatの適用例と同じ状態にclearの一行を追加しました。わかりやすくするためにボックスを大きくしました。floatしている状態を解除しているので最後の一行がグレーのボックスの下に表示されていますね。bothという値の他に「left」「right」などがありました、これは「どっちの方向を解除するか?」と聞かれているので右や左と限定して解除することはほぼなく、「both」を指定し両方解除するのが間違いがなく便利です。liといったリストに対するCSSを定義します。list-styleリストに対する様々な定義をするプロパティ。inside;}適用例:liを四角いリストにしてリストの位置を内側に入れるサンプル文字サンプル文字サンプル文字squareの他にcircleで白丸、noneで無し、decimalで数字など、他にもいろいろと設定できます。insideは内側でしたが、outsideで外側に設定することも可能。通常はoutside。list-styleを使うとまとめてリストのスタイルを設定できますが細かいプロパティも存在します。backgroundプロパティのように。url(images/soda.jpg);}このように個別に指定することはできますが、一つでも複数でも基本的に「list-style」で設定してしまうことが多いです。個別に設定できるよ、というくらいでOKでしょう。高さ、横幅を定義するCSS最後に要素の高さや横幅を設定するCSS。height要素の高さを定義するプロパティ。ヘイトと読みたくなりますが正しい発音は「ハイト」です。高さを変えたいときに使うプロパティですが、要素の中の文字がはみ出しても高さを指定している場合は文字がはみ出したままです。heightプロパティはどうしても高さを指定したいときにとどめ基本的には指定しないほうが崩れの少ないウェブページが作成できます。width要素の横幅を定義するプロパティ。読み方はウィドゥスというのが一般的ですがウィドスやウィズと言う方もいるようです。300px;}適用例:pの横幅を300pxに設定する(わかりやすいよう背景色を適用)サンプル文字heightプロパティと同じで指定しないと100%表示となり、そのブロック内において最大値まで伸びます。「この要素の横幅はどのくらいなんだろう?」と思ったらbackground-color等のプロパティをかけてみて目で確認してもいいでしょう。高さや横幅というのはブロックレベル要素に適用が出来、インライン要素には適用ができません。「ブロック?インライン?」聞きなれない言葉ですが、CSSを理解する上で大事な概念になるので次回移行学んでいきましょう。CSSプロパティまとめお疲れ様でした。感じることは様々でしょうが、CSSは書いていると規則性が自分なりにわかってきて、「このプロパティにはこういう値が入るんじゃないか?」といったことが感覚でわかるようになってきます。何より、CSSの書き方がわかるようになるとHTMLやCSSではできなかったプログラミング言語のフレームワーク、jQueryの理解が早まります。jQueryはCSSの書き方で書いていくのでいきなり知識がない状態で挑むよりか遥かにラクに覚えることができます。次回はプロパティを定義する際に知っておくべきブロックレベル要素とインライン要素について学びましょう。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。