CSSとは?初心者のための基本解説!

CSSとは?~初心者のための基本解説~

CSSは、HTMLで作られたページを装飾するための重要なプログラム言語。ホームページを読みやすくする、重要な役割を果たしています。 ここではCSSを書く際の基本的なルール・CSSを形成する要素・CSSの実際の書き方について説明しています。

ホームページ制作.jpってどんなサービス?

  1. 審査済のホームページ制作会社に見積もり依頼ができる
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

ホームページ制作.jpでお手間なく一括で制作会社を探すことが可能。

ホームページ制作.jpに一括見積もりを依頼する

このページの目次

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のことを思い出してみてください。読みやすさの理由がわかるかもしれません。


ホームページ制作のことでお困りのことはありませんか?

優良制作会社を一括比較することで適正な【価格】がわかります!

ホームページ制作会社の一括見積もりサービス

  1. 審査済のホームページ制作会社に見積もり
  2. お客様に適切な制作会社を探すことができる
  3. 無料でお断り代行サービスもしてもらえる
  4. 何度でも無料相談ができる

お急ぎの方はお電話ください。0120-900-587

ご担当者名

未入力です。

ご連絡先電話番号

無効な電話番号です。

メールアドレス

無効なメールアドレスです。