【完全入門ガイド】cssの書き方をイラストを使って解説

cssの書き方のルール

それではcssの基本的な書き方を覚えていきましょう。htmlよりは少しだけ覚えることが多いので、細かく区切って丁寧に解説していきます。記事の後半に実際に記事上で書いて練習できるのでそのステップにいくまでに基本を押さえましょう!

どこのなにをどのように変えるか

cssを書くときは「セレクタ = どこの?」「プロパティ = 何を?」「値 = どのように?」変えるかの3つの要素をそれぞれ記述します。

  • セレクタの後ろの{ }波かっこ
  • プロパティの後ろに:コロン
  • 値の後ろに;セミコロン

という記号の種類と書く位置もイラストのルールで決まっているので間違えないよう覚えましょう。

pタグの中の文字の色を赤色にする

左が実際のcssの記述例です。

  • セレクタの部分がpタグ
  • プロパティはcolor(文字の色)
  • 値はred(赤色)

となっているので「pタグの中の文字の色を赤色にする」という意味の記述になります。

続いて3つの要素を詳しく解説していきます。

セレクタの説明

セククタ(selector)とは「どの要素を?」の部分でしたね。ではhtmlの要素というものがどこを指しているのか一度復習します。下のイラストを見てみましょう。

タグで囲まれた中身全てがその要素になる

このように特定のタグで囲まれた範囲のことをひとまとめにして〇〇要素と呼びます。たとえばbodyタグの中に書かれている「h1」「div」「img」「p」はすべてbody要素です。

さらにいえば、divの入れ子である「img」「p」は「body要素でもあり、div要素でもある」と言えます。

cssのセレクタにはこの「要素」を指定することで「どの範囲までそのスタイルを適用させたいか?」を書きます。

body{
  color : red;
}

 

見出し

テキスト

例えば、イラストの例のコードの中でh1pの文字の色を赤色に変えたいとします。

h1pどちらもbody要素に該当するのでbodyをセレクタに指定してあげればどちらの文字も赤色に変わります。

idとclassをセレクタに指定する

特定の要素にだけスタイルを適用したいときはどうすればいいのでしょうか?そんな時にはid属性やclass属性を使用します。次の例をみて確認してみましょう。

特定の要素だけに適用したい

左のイラストのコードのように上から1番目と2番目のpだけ文字を赤色にしたいとします。

その時セレクタは何を指定すればいいのでしょう?

「div」でしょうか?「p」でしょうか?…どちらも不正解です。なぜならどちらも3番目のpも含む指定になってしまっているからです。

それではすべての文字が赤色に変わってしまいます。

id属性class属性を活用する

そこでid/class属性を使います。今回はスタイルを適用させたいp要素にだけclass=“red”とつけてみます。

id属性とclass属性のおさらい

  • 同じid名はwebページに1つだけ(別名ならOK)
  • classは同じclass名がいくつあってもOK

class名をつけたら実際どのようにセレクタに書くのかを見てみましょう。

<div>
  <p class="red">赤色にしたい</p>
  <p class="red">赤色にしたい</p>
  <p>黒色のまま</p>
</div>
.red{
  color : red;
}

 

赤色にしたい

赤色にしたい

黒色のまま

cssのコードに注目してください。セレクタの部分に「.red」と書かれていますよね。

idとclassのセレクタの書き方

  • class : .(ドット) + class名
  • id名 : #(シャープ) + id名

というようにそれぞれ書きます。

ブラウザの表示結果も無事class名を指定した要素だけ文字色が赤に変わっていますよね。

idとclassに関する疑問を整理

ここまでで初心者のみなさんがつまずきやすいidとclassについての疑問を解消します。

id名/class名はどうやってつける?

id名とclass名は半角英数字で自由につけることができます。「class=”main-column”」や「class=”list_nav”」のように「-(ハイフン)」や「_(アンダースコア)」といった記号も含むことができます。ただし「class=”20-box”」など数字から始まる名前はルール違反になります。

idとclassどっちを使えばいいの?

使い分けを理解するのは最初はとても難しく感じるでしょう。基本的にはclassを使っておけば問題ありません。現に、一般的なwebサイトのhtmlソースの中のid属性とclass属性の使用割合は「1:9」くらいでid属性はここぞという時しか使用しません。

idとclassについてさらに詳しく理解したい方はこちらの記事も参考にしてください。

関連記事

【イラスト解説】divに付いているidとclassの意味と使い方

プロパティの説明

続いて「何を?」の部分であるプロパティについて解説します。

どこのなにをどのように変えるか

プロパティ(意味:性質)には要素のどの部分を変更するかを指定します。例えば

  • 文字の色なら:color
  • 文字の大きさなら:font-size
  • 背景画像をなら:background-image
  • 枠線なら:border
  • 配置なら:position

と、どの部分を変えたいならどのプロパティを使うのかがあらかじめ決まっています。

こちらのサイトでプロパティ一覧が確認できるので興味があればみてみるといいでしょう。

スタイルシート[CSS]/CSSプロパティ一覧 – TAG index

ただ、事前にプロパティを暗記するのではなく、背景色を変えたかったら「css 背景色」で検索、文字の種類を変えたかったら「css 文字の種類」で検索する、などして都度使えるプロパティを調べていくほうが学習効率が高いです。

このあと実際にいくつかプロパティを書いて練習できます!

値の説明

続いて「どのように?」の部分である値について解説します。

どこのなにをどのように変えるか

cssの書き方では「プロパティ 」というように一行のセットになっていますよね。

これはなぜかというと値はプロパティによって何を書くことができるか決まっているからです。

例を使って具体的に解説していきますね。

プロパティごとに使える値が決まっている

実際のtext-align(文字揃え)の表示結果

 

text-align : leftの文章

text-align : centerの文章

text-align : rightの文章

左のコードは「p要素の文字揃え(text-align)をどうするか」を指定するcssです。

text-alignプロパティでは指定できる値が

  1. left(左揃え)
  2. center(真ん中揃え)
  3. right(右揃え)

のどれかと決まっています。

例が1つだけではわかりにくい方もいるかもしれないのでもう1つ例をだしてみます。

background-colorの値

background-colorの値

背景色を変更する「background-color」で指定することのできる値は

  1. Crimson skyblue などのカラーネーム
  2. #efd760 #2e8b57などのカラーコード

のどちらかです。

プロパティと値の関係についてなんとなく理解できたでしょうか?このあと実際にcssを書いていく中でプロパティと値について理解を深めることができるはずなので現時点では「プロパティによって指定できる値が決まっている」とだけしっかり覚えましょう!

続き:書いて覚えるcssのスタイリング

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • リンクタグのCSSまとめ!リンクの色の変更やオシャレな装飾方法を紹介

  • マークアップの意味とマークアップ言語の種類について

  • 【完全初心者】HTMLとは何か?をイラストを使って解説

  • HTMLの見出しタグ|h1〜h6の使い方をイラストを使って解説

  • CSSのコメントアウトの書き方と制作現場での使用サンプルを紹介

  • 【基本のき】ホームページの仕組みをイラスト付きでまるっと解説!

  • HTMLの<head> - どんなことを書くの?【テンプレコード付き...

記事をもっと見る +

目次を開く