HTML/CSS入門 2021: CSS 3の基本を知ろう

CSS(Cascading Style Sheet)は、ウェブ制作で HTMLとセットで利用され、ページの色やレイアウトを調整できる「スタイルシート言語」と呼ばれる言語です。

例えば、次のような HTMLがあったとしましょう。

<h1>ともすた</h1>

この文字を、赤色で表示したい場合は次のように「style」属性の値として CSSを指定します。

<h1 style="color: red;">ともすた</h1>

これで、文字が赤色に変わります。

CSSは、次のように「プロパティ」と「値」のセットで指定されます。

このように、HTMLタグの中に直接記述する方法を「インライン指定」などと言いますが、これには次のようなデメリットがあります。

  • 共通したスタイルを使いたい場合に、タグごとに指定しなければならない
  • 1行にすべて書かないといけないので見にくい
  • HTMLと CSSが混ざってしまって見にくい

そのため、CSSを利用する時はインラインよりも、次の「内部参照」や「外部参照」がよく利用されます。

内部参照

内部参照は、HTMLの <head>タグの中にスタイルシートを記述する事で、そのページ内の要素に共通したスタイルを定義できる方法です。次のように記述します。

<head>
  ...
  <style>
    h1 {
      color: blue;
    }
    p {
      font-size: 30px;
    }
  </style>
</head>

そして、インラインで指定していたスタイルシートは外しましょう。

<h1>ともすた</h1>
<p>学ぶ。をちゃんと</p>

これで表示すると、きちんと色や大きさが変わっています。

このように、内部参照を使えば HTMLタグの中に書き込まなくてもスタイルを指定できます。ただし、内部参照では複数のページがあるようなウェブサイトの場合は、やはり各ページごとに指定しなければなりません。そこで利用されるのが「外部参照」です。

外部参照

外部参照は、CSS専用のファイルを作成して、HTMLから参照する方法です。まずは、新しいファイルを作成して「style.css」などのファイル名で保存しましょう。ここでは、「css」というフォルダーを作成して、この中に作成します。拡張子は「.css」とします。

そしたら、このファイルの中に同じように、次のようなスタイルを記述しましょう。

h1 {
  color: blue;
}
p {
  font-size: 30px;
}

そしたら、このファイルを HTMLから参照します。<head>タグの中に <link>タグを記述します。

<head>
  ...
  <link rel="stylesheet" href="css/style.css">
</head>

なお、内部参照で記述した <style>タグは削除しておきます。これでページを表示すると、正しくスタイルが適用されています。

このように、CSSの指定には外部参照・内部参照・インラインと複数の指定方法があります。これは、次のような使い分けをします。

  • 複数のページで統一したスタイルを利用したい場合 → 外部参照
  • そのページでのみ統一したスタイルを利用したい場合 → 内部参照
  • その要素でのみスタイルを利用したい場合 → インライン指定

ただし、実際には内部参照やインラインはあまり利用される機会はありません。基本的には、外部参照ですべて指定をし、どうしても例外的に CSSをその場で利用したい場合のみ、内部参照やインラインを使うようにするとよいでしょう。

セレクターと class属性

内部参照や外部参照で CSSを定義する場合、どの範囲にそのスタイルを適用するかを指定する必要があります。例えば、次の場合は <h1>タグにそのスタイルを適用しています。

h1 {
  color: red;
}

これを「セレクター」といいます。一番基本的なのはタグ名をそのまま記述する「要素セレクター」というものですが、要素セレクターだけでは細かい指定ができません。例えば、次のように <p>要素が 2つあった場合に、それぞれに別々の色を指定したい場合はどうしたらよいでしょう?

<p>赤にしたい</p>
<p>青にしたい</p>

この場合、「class属性」というものを利用すると便利です。次のように、属性を指定します。

<p class="alert">赤にしたい</p>
<p class="info">青にしたい</p>

そして、CSSには次のように記述します。

p.alert {
  color: red;
}
p.info {
  color: blue;
}

このように、ドットで区切ってクラス名を指定します。これを「クラスセレクター」といい、class属性のついた要素にのみ適用されるようになります。

セレクターにはこの他にもさまざまな種類があり、CSSをきめ細かく指定することができます。

例えば、次のような指定は「class」属性がある要素だけが対象となります。

p[class] {
  font-size: 60px;
}

結合子

結合子を利用した CSSの指定も良くされます。例えば、次のような HTMLを考えてみましょう。

<header>
  <h1>ともすた</h1>
  <p>学ぶ。をちゃんと</p>
</header>
<p>ご注意</p>

この場合、最初の <p>タグにだけスタイルを適用したいとしましょう。ここで、先と同じように class属性を指定することもできますが、「最初の <p>タグは <header>要素の中に含まれている」ということを利用すると、HTMLを編集せずに利用できます。

次のような CSSを記述しましょう。

header p {
  font-size: 10px;
}

半角空白で区切ってセレクターを記述する事で、階層を指定できます。つまりこの場合、<header>タグの中の <p>タグのみが対象となります。

リセットCSS

ウェブページでは、CSSを利用しなくても <h1>タグの要素は大きく表示され、要素と画面端などには余白が確保されます。これは、ウェブブラウザーが標準で準備している「デフォルトCSS」と呼ばれるもので、これによって HTMLを記述しただけでも、それなりに読みやすい文書になります。

ただし、CSSを利用して独自のスタイルを適用したい場合、このデフォルトCSSが邪魔になる事があります。ブラウザーの種類によって少しずつスタイルが違うため、調整が非常にしにくくなってしまうのです。

そこで、通常 CSSを利用する場合は、このデフォルトCSSを打ち消しておいてから、オリジナルの CSSを利用することが多いです。これを「リセットCSS」と言います。

リセットCSSは自分で作成することもできますが、無償で公開されているものも多くあるため、これらを利用するとよいでしょう。ここでは、destyle.cssというリセットCSSを利用します。

右下の「Download」ボタンをクリックすると、ブラウザーに CSSの内容が表示されるので、「ファイル→保存」をクリックして、先ほど作成した cssフォルダー内に保存しましょう。

そしたら、HTMLから参照します。この時、先と同様に <link>タグを使って参照することもできます。

...
<link rel="stylehseet" href="css/destyle.css">

しかし今回の場合、「style.css」を使うときは、この「destyle.css」をかなり利用するなどの場合には、CSSファイルから参照する方が確実です。次のように記述します。

@import url(destyle.css);

これで、destyle.cssが読み込まれます。これで画面を表示すると、次のようにデフォルトCSSがリセットされています。

なお、ここでは一旦 style.cssの内容をすべて削除しています。ここから、スタイルの調整をしていきます。

ブラウザー感の差異だけをなくす「サニタイズCSS」

リセットCSSに似たものに、「サニタイズCSS」という種類もあります。

リセットCSSは「すべてを自分でデザインしたい」という場合には便利ですが、リセットCSSを使ってしまうと見出しの大きさや箇条書き(リスト)、要素間の隙間などあらゆるものがリセットされてしまい、すべて1から自分でスタイルを整えなければなりません。

しかし、箇条書きは次のように行頭に印をつけて表示したいとか、見出しはある程度の大きさで表示したいなど「普通にできる事は普通にしたい」という場合は、サニタイズCSSが便利です。サニタイズCSSの場合、標準のスタイルはそのままにして、ブラウザー間に生まれる差異だけを吸収してくれます。そのため、ここから少しスタイルを整えれば、見栄えのするページに仕上げることができるというわけです。

好みや、作りたいページのイメージにあったものを選ぶとよいでしょう。

CSSで使う単位

それでは、見出しの大きさを実際に調整しましょう。ここでは、次のように「4rem」に設定します。

h1 {
  font-size: 4rem;
  font-weight: bolder;
}

ここで、「rem」という単位は「4文字分」という大きさの単位です。CSSには、remの他、pxや emなど、多くの単位を利用して大きさを指定できます。

それぞれについて紹介しましょう。

px(ピクセル)

コンピューターで利用されるグラフィックの単位です。コンピューターのディスプレイは、光の粒(画素)が集まって画面を構成しています。この粒1つの事を「1ピクセル(1px)」という単位で表します。

例えば、「10px」の場合は縦・横がそれぞれ 10px分の大きさを表します。ただし、光の粒自体の大きさはディスプレイの性能によって異なるため、実際にどのくらいの大きさになるかは画面の性能によって変わります。また、近年のディスプレイは「高精細ディスプレイ」と呼ばれ、実際の画素数よりも多くの画素が利用できるため、ユーザーが設定した「拡大率」によっても実際の大きさが変化します。

文字のサイズを指定する場合は、14px〜16pxくらいが見やすくなり、12px以下になってしまうとかなり小さくて見にくくなる恐れがあります。

em / rem / ex

em(エム)とは、「1文字分」という意味で基準となる文字の大きさとの割合で指定します。例えば、「4em」というのは、基準となる大きさの「4文字分」の大きさという意味です。

基準となる大きさというのは、その要素の「親」の要素の大きさになります。例えば、次の例を見てみましょう。

<header>
  <h1>ともすた</h1>
</header>

この場合、基準となるのは <header>要素に指定された文字の大きさで、これを「1em」とした場合の割合の大きさになります。

ただ、親の要素を基準としてしまうと、文字の大きさが不用意に変化してしまうことがあります。そこで、基準を「その文書自体の文字の大きさ」にしたのが「rem」という単位です。remの rは「Root(根)」という意味で、この場合親の要素が変化しても、文書自体のサイズが変わらない場合は影響されなくなります。

どちらを基準とするかで、remと emを使い分けるとよいでしょう。exは「x」の文字の大きさを基準とするものですが、日本語文字についてはあまり利用する機会はありません。

vw / vh / vmin / vmax

「ビューポート」と呼ばれる、画面の幅や高さを基準としたサイズの指定です。文字サイズの指定では利用されることはありませんが、領域のサイズを指定する場合や画像のサイズを指定する場合に利用されます。これについては別の機会に詳しく紹介します。

その他の単位

その他、次のような単位が利用できますが、実際の政策で利用される機会は余り多くありません。主に、印刷の時などに利用されます。

  • cm / mm – 「センチ」と「ミリ」。画面上では正しい長さにならないので注意が必要です
  • in / pt /pc – 「インチ」と「ポイント」および「パイカ」。印刷で利用される単位
  • Q – 級数のことで、印刷で利用される単位
  • ch – 0 という文字の横幅

CSSでの色の指定

例えば、背景の色(background-color)を赤にしたい場合、これまで次のように指定してきました。

background-color: red;

この「red」という指定は、色名による色の指定ですが、このような色名が準備されて色には限りがあり、微妙な色合いを表現することができません。そこで、例えば次のような色の指定がよく使われます。

background-color: #1abc9c;

これは、「カラーコードの16進数」という方式で色を指定したものです。これを理解するには、まずは RGB法という色の表現方法を知る必要があります。

RGB法とは

光の三原色である赤(Red)、緑(Green)、青(Blue)の頭文字を取ったものです。この3色を混ぜ合わせることで、さまざまな色を表現できます。例えば、黄色を表現するには赤と緑を同じバランスで混ぜ合わせます。

どちらかの色を微妙に調整すると、緑がかった黄色など、微妙な色を表現できます。

この時、色のバランスを細かくすれば、より微妙な色を表現できます。現状、ウェブでは各色を 256段階で調整できます。つまり、256×256×256で約 1600万色を表現できます。これを、CSSで表現するには次の10進法を使った方式があります。

10進法を使った表現方法

10進法とは、普段私達が利用している数の数え方で、0から 9の 10種類の記号で数字を表現し、9の次の数字を「10(じゅう)」とすると言う数の数え方です。

10進法を使って色を表現するには、次のように「rgb」という命令を使います。

color: rgb(150, 255, 0);

順番に、赤、緑、青の値を 0から 255の間で指定します。ただ、実はコンピューターの世界では 10進法はあまり使われません。というのは、コンピューター自身は「2進法」という数字の数え方をしていて、先の色の段階が「256段階」という中途半端に感じる数字なのも、2進法で数えているためです。

2進法と10進法は非常に相性が悪いため、プログラミングなどでは 2進法と相性の良い 16進法が使われます。

16進法とは

16進法とは、0から 9の数字に加えて、A, B, C, D, E, Fの 6種類のアルファベットを数字として利用する数の数え方です。つまり、10進法で 15が 16進法では「F」という 1文字で表すことができます。

16進法は、2進法と「桁数が合う」というメリットがあります。例えば、先の「256」というのは、2進法で数えると「00000000 〜 11111111」という8桁で表されます。16進数ではこれが「00 〜 FF」という 2桁で表すことができます。常に桁数が同じように増えていくのです。そのため、相性が良いとされています。

16進法でカラーコードを指定しよう

前置きが長くなりましたが、CSSではこうして 16進法を使った RGB法で色を表現するのが主流です。例えば、先の黄色を表現するには、10進法では次のように表現しました。

color: rgb(255, 255, 0);

これを、16進法で表すと「255」は「FF」になるため、これを並べていきます。

color: #ffff00;

最初の 2桁が赤、次の 2桁が緑、最後の 2桁が青を表しています。これで、微妙な色も短く表現できます。例えば先の例では、次のようなカラーコードでした。

background-color: #1abc9c;

これは、赤が 1a(26)、緑が bc(188)、青 9c(156)を指定して、微妙な色を表現しています。実際にはこの数字を手作業で指定することは難しいため、エディターのカラーピッカー機能などを利用して生成します。

メディアクエリーでスマホ対応しよう

近年のウェブサイトは、1つの HTMLを CSSだけでデスクトップサイトとスマホサイトで切り分ける方法が主流です。例えば、文字サイズを PCとスマホで切り替えたりして、広い画面と狭い画面で快適に見られるように変更します。

このように、画面のサイズが狭い場合に CSSを変更したい場合は「メディアクエリー」を利用します。まずは、次の CSSを確認しましょう。

header h1 {
  font-size: 4rem;
}

これを、画面幅が 600px以下の時だけ文字サイズを変更します。この場合、次のような記述をします。

@media (max-width: 600px) {

この中に CSSを記述すると、条件に合致した場合のみの CSSを記述できます。ここでは、文字サイズを変更しましょう。

@media(max-width: 600px) {
  header h1 {
    font-size: 1.5rem;
  }
}

これで、画面幅が 600px以下になると文字サイズが小さくなります。

こうして、色々な条件を加えて CSSを切り替えることができます。このように、CSSを切り替えることで見た目を変化させる技術を「レスポンシブ・ウェブデザイン」などと呼びます。

ともすたチャンネルに
チャンネル登録する