cssを使ってみる

cssの記述方法と基本操作

cssの記述方法はHTMLとは異なり、『セレクタ』『プロパティ』『値』を使います
セレクタには『タグ・クラス・ID名』が入ります。
プロパティには『スタイル』が入ります。
値には『数値・色』などが入ります。

記述方法

タグ名 { プロパティ : 値 ; }　⇒タグにプロパティと値を適応する
.クラス名 { プロパティ : 値 ; }　⇒クラスにプロパティと値を適応する
#ID名 { プロパティ : 値 ; }　⇒IDにプロパティと値を適応する

タグにプロパティと値を適応する

cssでは、HTMLタグに色やサイズなどを外部ファイルから適応することが可能です。

<p>フォントを赤に変える</p>

p { color: #ff0000 ; }

フォントを赤に変える

IDにプロパティと値を適応する

IDとは、１つのセレクタだけにスタイルを反映させるものです。
また、クラスと違い１つのページ内で１度しか使えないセレクタです。

<div id="box">赤枠をつけて、テキストを中央寄せ</div>

#box {
width:400px;
heigt:32px;
border:1px #ff0000 solid;
text-align:center;
}

赤枠をつけて、テキストを中央寄せ

クラスにプロパティと値を適応する

クラスとは、任意クラス名のグループにスタイルを反映させるものです。
また、IDと違い１つのページ内で何度でも使えるセレクタです。

<div class="box">
The Roots
<p>バンドスタイルのHIPHOP。</p>
<p>楽曲も素晴らしいが、パフォーマンス・ライブアレンジ・プロデュースなど…</p>
</div>

.box {
width:400px;
heigt:100px;
font-size:16px;
color:#ffffff;
background-color:#000000;
}
.box p {
color:#666666;
font-size:11px;
}

その他、cssの一覧は⇒cssタグ一覧へ。また、応用編は⇒ポイント！特集へ。

事項はcssを使って段組を整える⇒カラムリファレンス