【CSS】の基本的な書き方【ちょっと実用的な書き方も紹介します】
「CSSってどうやって書けばいいんだっけ？」
この記事ではこのような質問に答えます。
基本的な書き方から、ちょっと実用的な書き方までを紹介していきます。超シンプルに解説していくので、知りたい情報をパッと理解することができますよ。
ではさっそく見ていきましょう。
CSSの書き方（構文）
CSSの基本的な書き方は下記のとおり
セレクタ{プロパティ: 値;}たとえば、p要素の文字色を赤色にしたい！ってときは
p{color: red;}と書いてあげればOKです。
セレクタの書き方
| 指定先 | 書き方 | |
| htmlタグで指定 | p{〜} | そのまま書けばOK |
| id名で指定 | #id名{〜} | id名の前に#（シャープ）をつける |
| class名で指定 | .class名{〜} | class名の前に.（ドット）をつける |
| セレクタを複数指定する | ○○,○○{〜} | ,（コンマ）で区切る |
プロパティの書き方
p{color: red;}colorの部分を変えてあげればOKです。
| p{color: red;} | p要素の文字色を赤 |
| p{font-size: 20px;} | p要素のフォントサイズを20px |
| p{font-weight: bold;} | p要素のフォントを太字 |
| p{line-height: 20px;} | p要素の行高を20px |
上記のとおり
プロパティと値は常にセットで書かれます。
プロパティの種類によって設定できる値も変わります。
たとえば、プロパティがcolorなのに、値に20pxと書いても何も変更されません。colorプロパティには、redやrgb(255,0,0)などの色の値しか書くことはできないのです。
値の書き方
p{color: red;}この場合、redが値になります。
colorプロパティの場合にはほかにも、rgb(255,0,0)や#ffffffやwhiteといった具合にいろいろ値を入れることができます。
プロパティによって入れることができる値は異なるので、だんだん覚えていけばOKです。（というよりも、使っていくうちに自然と覚えていくので、たくさん使った方が早く覚えられる）
ちなみに…
{~]で囲んだ全体を宣言ブロック
プロパティと値を:（コロン）でセットにしたものをスタイル宣言を呼びます。
CSSのもうちょっと実用的な書き方
コードを読みやすくする
プロパティをいくつも書いていくと、だんだん「あのプロパティはどこに書いたんだっけかな？」となることもあります。
そんな時は下記のように書くと読みやすくなりますよ。
p{
color: #000000; /*文字の色：黒*/
font-size: 1.5em;
font-weight: 600;
margin: 10px 20px;/*上下10px、左右20px*/
}あくまで僕が読みやすいという基準ですが、下記のような自分ルールを決めて書いています。
- 改行する
- 半角スペースorタブで字下げする
- コメントを残しておく
- アルファベット順に書いていく
- コロンの後に半角スペースを入れる
上記のとおり
細かいことを書くともっといろいろあるのですが、とりあえず最初はこんなもんです。
あるていど規則性をもってCSSを書いていくことにより、ケアレスミスを減らし、修正もしやすくなる、というメリットがあります。
CSSに慣れてきたら、試してみてくださいね。
まとめ：CSSの書き方
さっくりとこの記事をまとめると下記のとおり
- CSSの基本構文→セレクタ{プロパティ: 値;}
- htmlダグで指定→タグ名{〜}
- id名で指定→#id名{〜}
- class名で指定→.class名{〜}
- 複数指定→○○,○○{〜}
- プロパティと値は常にセット
最初っておぼえたはずなのに、「あれってどうだっけ？」となりますよね。
でもこれって慣れてきてもなるものなんですよ。そのたびにググって理解できればOKです。
全部おぼえようとしなくても、息を吸ってはくぐらいCSSを書いていけば、手が自然と動くようになってくるので大丈夫ですね。
ペット保険ペット保険の資料一括請求サービス
キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』