CSS文法の基礎

帰りの電車でモンハンやってたら千葉に着きました。

とうわけでみなさまいかがお過ごしでしょうか。

ではCSSの文法について確認していきましょう。

まずは完成形からみてみます。以下の記述はp要素の文字の大きさを18pxにし、さらに太文字に指定する記述です。

p {
    font-size: 18px;
    font-weight: bold;
}

具体的に文法を確認していきましょう。

まず装飾を適用させたい要素を指定します。この場合はp要素になりますね。その横に『{}』(波括弧)を添えてあげます。

p {}

続いてp要素に加えたい装飾の内容を波括弧の中に記述していきます。装飾を適用させる対象となる要素が『セレクタ』になります。波括弧の部分が『宣言ブロック』と呼ばれます。

続いて『プロパティ』と『値』(あたい)を記述します。プロパティと値は必ずセットになります。font-sizeと記述し、そこに『:』(コロン)をはさみ、さらに18pxと記述し最後に『;』(セミコロン)をいれましょう。

p { font-size: 18px;}

これで完成です。

『:』と『;』は忘れがちなので注意してください。

上記の場合、font-sizeが『プロパティ』です。18pxが『値』になります。そしてプロパティと値がセットになった部分は『宣言』と呼ばれます。

宣言は複数記述することができます。

p { font-size: 18px; font-weight: bold;} 

文字の太さを指定するプロパティ、font-weightにboldという値を設定して太字にしました。セミコロンを忘れてしまうとCSSが反映されないので忘れないように注意してください。

p { font-size: 18px}
span { font-size: 18px; font-wight: bold}

ここでCSS文法の構造を図で再確認しましょう。上記のCSS記述の場合はpが『セレクタ』、波括弧の部分が『宣言ブロック』、font-sizeとfont-weightが『プロパティ』、18pxとboldが『値』、プロパティと値がセットになったものが『宣言』です。

同じ宣言ブロックを複数のセレクタに適応させたい場合は『,』を使って記述をまとめることができます。以下の例はp要素とdiv要素に同じ宣言ブロックを適応させた場合です。

p { font-size: 18px; font-weight: bold;}
div { font-size: 18px; font-weight: bold;}

↓

p, div { font-size: 18px; font-weight: bold;}

そしてセレクタに『*』(アスタリスク)を使うと全ての要素を対象にすることができます。

* { font-size: 18px; font-weight: bold;} 

こうするとHTMLファイル全ての要素のフォントサイズが18pxになり、太字になります。

最後にちょっとインデントしちゃいます。
※CSSのインデントマナーについては先の記事で紹介します。

p {
    font-size: 18px;
    font-weight: bold;
}

これで完成です。

以上となりますがいかがでしょうか？少し難しくても段々慣れてきますのでガンガン先に進んじゃってください。

続いてはCSSの記述場所について解説していきます。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア