CSSの使い方2

前項ではCSSの各場所を具体的に紹介しました。本項では記述の仕方の紹介です。

書き方のルール

CSSの記述ルールはそれほど難しくないので安心してください。コロン:とセミコロン;が使いこなせればおkです。書く場所はheadのstyleタグで記述している{}内か、タグ内でstyle属性でしている""内かのどちらかですが、書き方は同じです。

サンプルコード

color: #fff; /* 文字色 */
background: black; /* 背景色 */

colorやbackgroundはCSSで用いるプロパティと呼ばれるものです。HTMLタグ内に記述する属性とほぼ同じと考えて構わないです。プロパティ名:値;の様に記述します。コロン、セミコロンを間違えずに書いてください。

上の例では色の指定をしました。CSSでは#ffffffを短縮して#fffの様に書くことができます。色の3元色がそれぞれ1桁ずつになってしまったと考えれば良いです。もちろん6桁で書くことも可能です。また、英名色もHTML同様に使えます。

コメントアウトは/**/を使います。JavaScriptと違いダブルスラッシュ//は使えません。

代表的なプロパティ

プロパティはHTMLの属性で指定できるものをほぼ網羅しています。しかし、名前が変わっているものが多少あるので注意です。

サンプルコード

color: /* 文字色 */
background: /* 背景に関する指定 */
font: /* フォントに関する指定 */
width:;height: /* 幅と高さの指定 */
margin:;padding; /* マージンとパディングの指定*/
border: /* ボーダーに関する指定 */

上記はほんの一部分にしか過ぎません。テーブルやリスト関連のプロパティやテキスト関連のプロパティ、ボックスの表示方法に関する指定など、用途に合わせて調べて使用ください。