0120-900-587
CSSとは？～初心者のための基本解説～
CSSは、HTMLで作られたページを装飾するための重要なプログラム言語。ホームページを読みやすくする、重要な役割を果たしています。 ここではCSSを書く際の基本的なルール・CSSを形成する要素・CSSの実際の書き方について説明しています。
ホームページ制作.jpってどんなサービス？
- 運営10年！老舗のホームページ制作無料一括見積サービス。
- 審査済の優良ホームページ制作会社のみに見積もり依頼ができる。
- お見積もり無料。何度でもご相談無料。お断り代行も無料。
- 訪問無しのオンライン相談可能！
- しつこい営業は一切致しません！
全国通話無料
受付：年中無休/24時間電話受付0120-900-587
私たちが全力でサポート致します！
宇野（うの）
田丸（たまる）
真中（まなか）
1.CSSとは？
ホームページはHTMLとCSSというプログラム言語がメインで作られていますが、ホームページの骨組みを作っているのがHTMLだとしたら、そこに肉付けしていくのがCSSの役目になります。
肉付けといっても、ただの飾りではありません。例えば、HTMLのみで作られたホームページがあったらどう見えるでしょうか？
タグの種類によってはテキストに多少の装飾（太字・フォントサイズの大小程度）がされる場合もありますが、ほぼ文字が並ぶだけのページです。
見出しにアイコンがつくことも、重要なテキストに下線が引かれていることもありません。想像しただけで読みづらそうですね。
CSSはホームページの視認性・可読性などにとても重要な役割を果たしています。
2.CSSの基本文法を理解しよう
CSSには基本的な文法があり、決まったルールに沿って書かれていないと、せっかくのスタイルも適用されません。
ここではCSSを構成している要素の意味・CSSの書き方を説明していきます。
1.セレクタ
「どの要素にCSSを適用させるか」を指定する部分を「セレクタ」と呼びます。
セレクタにはスタイルを適用させるタグを指定することが基本ですが、タグのほかにクラス名・id名を指定する場合もありますし、タグの子要素や隣接する要素などを指定する場合もあります。少し複雑になると、その要素のある部分だけ（一文字目のみ、同じ要素が複数ある場合は最後の要素のみ、など）を指定することも。
また、カンマ（,）で区切ることで、複数の要素を設定することも可能です。
2.プロパティ
「指定した要素のどんな部分にCSSを適用させるか」を指定する部分を「プロパティ」と呼びます。
プロパティには非常に多くの種類があります。例えば「h1」は見出しを設定する要素のため、
・テキストの装飾に関するプロパティ（フォントのサイズ・種類・色・太さ、行の高さなど）
・見出しの領域に関するプロパティ（幅・高さの設定、余白の設定、背景の設定、枠線の設定など）
などを設定することができます。
3.値
「指定した要素のどんな部分にCSSを適用させるか」を「プロパティ」で指定しましたが、「どのような装飾にするか」はこの「値」で指定します。
どんな値を設定できるかはプロパティによって決まっており、自分で勝手に設定することはできません。
例えば「font-size」はその名の通り、フォントサイズを指定するためのプロパティ。値として設定できるのは
・数値（30px、110%、2.0emなど）
・キーワード（small、medium、largeなど）
に限られます。これ以外の値を設定しても無効になり、スタイルは適用されません。
3.CSSを実際に書いて見てみよう
先に書いた通り、CSSの書き方にはルールがあります。
上記の画像の例にあるCSSの場合、「h1」がセレクタ、「font-size」がプロパティ、「30px」が値。
プロパティと値を{}（波かっこ）で囲み、プロパティの後ろには:（コロン）、値の後ろには;（セミコロン）を付ける決まりがあります。
プロパティと値のセットを「スタイル宣言」と呼びますが、これはひとつのセレクタに対し複数書くことができます。
また、CSSを見やすくするためにタブ・スペース・改行を挿入しても、CSSに影響はありません。
4.まとめ
電車での移動中など、ついついスマホを見てしまう…という方は多いと思いますが、「一度開いたページは、最初から最後まで一文字残らず読む」という方は少数派でしょう。「なんとなく流し読みをする」「見出しを見て、興味のある記事だけ読む」という方がほとんどかもしれません。
「限られた時間の中でも、最後まで読みたくなるページ」を作るために、CSSはとても重要な働きをしています。パッと目に入る見出し、本文の読みやすさなど、CSSによって左右されます。
もし「この記事は要点がわかりやすく、スラスラと読み進められるな」というホームページを見ることがあったら、ぜひCSSのことを思い出してみてください。読みやすさの理由がわかるかもしれません。
