なじめばきまま Written by Fukutaro Sugiyama

【CSS】の基本的な書き方【ちょっと実用的な書き方も紹介します】

HTML/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)#ffffffwhiteといった具合にいろいろ値を入れることができます。

プロパティによって入れることができる値は異なるので、だんだん覚えていけば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を書いていけば、手が自然と動くようになってくるので大丈夫ですね。

ペット保険ペット保険の資料一括請求サービス

キャットフード愛猫にスッキリ快適な毎日を過ごしてほしいあなたへ『モグニャン』