cssについてcssを使ってみるカラムリファレンスカラムの色々ポイント!特集

cssの記述方法と基本操作

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

記述方法

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

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

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

ソース
html
<p>フォントを赤に変える</p>
css
p { color: #ff0000 ; }
結果
フォントを赤に変える

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

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

ソース
html
<div id="box">赤枠をつけて、テキストを中央寄せ</div>
css
#box {
width:400px;
heigt:32px;
border:1px #ff0000 solid;
text-align:center;
}
結果
赤枠をつけて、テキストを中央寄せ

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

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

ソース
html
<div class="box">
The Roots
<p>バンドスタイルのHIPHOP。</p>
<p>楽曲も素晴らしいが、パフォーマンス・ライブアレンジ・プロデュースなど…</p>
</div>
css
.box {
width:400px;
heigt:100px;
font-size:16px;
color:#ffffff;
background-color:#000000;
}
.box p {
color:#666666;
font-size:11px;
}
結果
The Roots
バンドスタイルのHIPHOP。
楽曲も素晴らしいが、パフォーマンス・ライブアレンジ・プロデュースなど…

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

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