シェアする
CSS Syntax Basics - Japanese Only
帰りの電車でモンハンやってたら千葉に着きました。
とうわけでみなさまいかがお過ごしでしょうか。
では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では『*』で指定されたセレクタを『ユニバーサルセレクタ』と呼びます。
最後にちょっとインデントしちゃいます。
※CSSのインデントマナーについては先の記事で紹介します。
p {
font-size: 18px;
font-weight: bold;
}
これで完成です。
以上となりますがいかがでしょうか？少し難しくても段々慣れてきますのでガンガン先に進んじゃってください。
続いてはCSSの記述場所について解説していきます。
ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
