CSS 入門

この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。

前提条件: ソフトウェアのインストール、 ファイルの扱いについての基本的な知識、 HTML の基本（ HTML 入門を学んでいること）。
目的: CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイル設定できるようになること。

HTML からはじめよう

HTML 文書から始めましょう。あなたのコンピューターのフォルダーに index.html として以下のコードを保存してください。

html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>CSS 入門</title>
  </head>

  <body>
    <h1>見出し１です</h1>

    <p>
      これは第一段落の文です。この文には<span
      >span 要素</span>と<a
      href="https://example.com">リンク</a
      >が含まれます。
    </p>

    <p>
      これは第二段落の文です。この文には <em>em 要素</em>が含まれます。
    </p>

    <ul>
      <li>一つ目のアイテム</li>
      <li>二つ目のアイテム</li>
      <li><em>三つ目</em>のアイテム</li>
    </ul>
  </body>
</html>

メモ: もし簡単にファイルの作れないデバイスや環境でこの記事を読んでいても心配しないでください。このページにあるコードを書くためにライブコードエディターが用意されています。

文書に CSS を追加

一番最初にしなければならないことは、 HTML 文書に使用したい CSS ルールがあることを指示することです。 HTML 文書に CSS を適用するためによく使われる方法は 3 つがありますが、ここでは最も一般的で便利な方法である、文書の head から CSS を使用する方法について見ていきます。

HTML 文書と同じフォルダーにファイルをつくり、 styles.css として保存してください。拡張子 .css となっているのが CSS ファイルです。

styles.css を index.html にリンクさせるには、HTML 文書にある <head> 要素の中に次のコードを追記してください。

html
<link rel="stylesheet" href="styles.css" />

<link> 要素はブラウザーに、スタイルシートがあることを rel 属性で伝え、 href 属性の値でスタイルシートのある場所を伝えます。 styles.css に以下のルールを記述すれば、CSS が動作するかテストできます。使っているコードエディターで次ののコードを CSS ファイルに追記してください。

css
h1 {
  color: red;
}

HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。 CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。

自分ののコンピューターに保存した styles.css を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。

HTML 要素のスタイル設定

見出しを赤くすることで、 HTML 要素を対象としたスタイル設定を試しました。要素セレクター（HTML の要素名を直接あてはめるセレクター）を対象としたのです。文書内のすべての段落に焦点をあてるなら、セレクターとして p を使うことができます。すべての段落を緑色にするために次を使います。

css
p {
  color: green;
}

セレクターをカンマで区切ることによって、同時に複数のセレクターを対象にすることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります。

css
p,
li {
  color: green;
}

下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。

要素の基本的なふるまいを変える

よくマークアップされた HTML 文書をみると、かんたんな例でさえ、基本的なスタイル設定を加えることでブラウザーが HTML を読みやすくしているかがわかります。見出しは大きく太線になっているし、リストは箇条書きになっています。これはブラウザーがすべてのページにデフォルトで適用されるスタイルシートを含んでいるために起きます。それらがなければ、すべてのテキストがまとまって一緒に実行され、すべてを一からスタイル設定しなければなりません。最新のブラウザーはすべて、ほぼ同じ方法をもちいて、デフォルトで HTML コンテンツを表示します。

ブラウザーが選んだのとは別のスタイル設定にしたい事もあるでしょう。これには単純に変更したい HTML 要素をえらび、 CSS ルールを変更したい外観に変えるだけで可能です。よい例が <ul> 要素、つまり順番なしリストです。箇条書きの点がついていますが、もしこれが要らないと思ったら次のようにして削除することができます。

css
li {
  list-style-type: none;
}

これを CSS に加えて試してみてください。

list-style-type プロパティはどんな値がサポートされているか MDN 上で調べるのに適したプロパティです。list-style-type のページをみるとページの上部に違うプロパティ値を試せる対話型の例があります。そしてページの下部には使えるプロパティ値が詳細に説明されています。

このページをみると、どのようなものに変えられるか見つけられます。プロパティ値 square に変えてみてください。

クラスの追加

これまで、HTML 要素名をもとにしたスタイル設定をしてきました。これは、文書内にあるその要素すべてをおなじ見ばえにしたいときには有効です。しかしそんな場合はほとんどないので、ほかを変えずに一部の要素だけを選ぶ方法を知っておく必要があります。もっとも一般的なのが、HTML 要素にクラスを追加し、それに焦点をあてる方法です。

  1. HTML 文書の 2 番目のリストアイテムへ、こんな風に class 属性を加えてください。

    html
    <ul>
  <li>Item one</li>
  <li class="special">二つ目のアイテム</li>
  <li><em>三つ目</em>のアイテム</li>
</ul>

  2. ピリオドから始まるセレクターを作ることで、special クラスを対象にすることができます。以下を CSS に加えてください。

    css
    .special {
  color: orange;
  font-weight: bold;
}

保存してからブラウザーを更新し結果を見てみましょう。

ページ上でおなじ見た目にしたいリストアイテムに対して special クラスを適用できます。たとえば、段落内にある<span> 要素にも同じく、オレンジの太字にしたいかもしれません。これにも class 属性の値として special を加えてみてください。上書き保存後にページを再読み込みして結果を確認してみましょう。

HTML 要素セレクターに続けてクラスセレクターが記述されているのを時々見るかもしれません:

css
li.special {
  color: orange;
  font-weight: bold;
}

この構文は、「special クラスを持っている li 要素を対象にしろ」という意味です。もしそうなっていたらもう、<span> 要素やほかに special クラスにした要素には適用できません。セレクターのリストに次を付け加える必要があります。

css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}

ご想像の通り、クラスによっては多数の要素に適用され、何か新しい要素にスタイル設定することが必要になるたびに CSS を編集し続けたくないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。

文書内の場所に基づくスタイル設定

文書のどこにあるかで見栄えを変えたい時があります。それを助けるセレクターはいくつかありますが、いまは 2 種類だけ見てみましょう。HTML 文書には 2 つの <em> 要素があります。ひとつは段落の中に、もうひとつはリストアイテムの中に、です。<li> 要素の中にある <em> だけを選びたいとき、子孫結合子と呼ばれるセレクターを使うことができます。これは２つの異なるセレクターの間に空白を設けることで設置できます。

CSS に次ののルールセットを追加してください。

css
li em {
  color: rebeccapurple;
}

このセレクターは <li> 要素の中にある <em> 要素を選択します。よって HTML 文書の中で、3 番目のリストアイテム内にある <em> 要素は紫に変わっていますが、段落内にある <em> 要素は変更されていません。

HTML 文書内で、見出しの直後に来る段落を見出しと同じ階層レベルにしたいと思うことがあるかもしれません。このときはセレクター同士の間に + を入れます（次兄弟結合子）。

いま扱っている CSS に次ののルールセットを追加してみてください。

css
h1 + p {
  font-size: 200%;
}

下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある span 要素を赤くするルールセットを追加してください。正しくできれば第一段落の span 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。

メモ: ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクターをこのコースの後にあるセレクターの記事で見ていきます。

状態に基づくスタイル設定

最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイル設定です。リンクをスタイル設定するとき、<a> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印をかざしたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。

css
a:link {
  color: pink;
}

a:visited {
  color: green;
}

ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえば次ののルールセットだと、リンクの下線が消えます:

css
a:hover {
  text-decoration: none;
}

下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？

リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。CSS に含まれるあらゆるものには、変更によって文章を使いづらくするおそれがあることを強調しておきます。

メモ: MDN の記事で、アクセシビリティについての注意をたびたび目にするでしょう。これについて語る時は、ウェブページがどんな人にも理解でき、使えるものである必要性に言及しています。

訪問者はマウス付きコンピューターやタッチスクリーン付き電話で見ているかもしれません。あるいはスクリーンリーダーで文章を読んでいることや、大きな文字をつかう必要があることや、キーボードだけを使っていることもあるでしょう。

プレーンな HTML 文書は一般的にあらゆる人に対してアクセシブルですので、スタイル設定するときはアクセシビリティを下げないようにするのが大切です。

セレクターと結合子を組み合わせる

複数のセレクターと結合子を組み合わせることができます。

css
/* <article> 要素の内側にある <p> 要素の <span> 要素に焦点を当てるとき */
article p span {
}

/* <h1> 要素の直後に来る <ul> 要素の、そのまた直後に来る <p> 要素に焦点を当てるとき */
h1 + ul + p {
}

複数の形のセレクターも組み合わせられます。以下のコードを CSS に追加してみてください:

css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

これは <body> 要素の中にある <h1> 要素の直後に来た <p> 要素の中にある special クラスの要素をスタイル設定します。

HTML のうち、スタイルが適用されるのは <span class="special"> のみです。

現時点では複雑に思えても心配しなくて大丈夫です。CSS を書いていくうちにすぐに理解できるようになります。

まとめ

この記事では、CSS によるドキュメントのスタイル設定の仕方をいくつか見てきました。残りのレッスンでさらに深堀りしていきます。あたなはもうすでに、テキストのスタイル設定や要素のさまざまな指定の仕方、さらには MDN ドキュメント内でのプロパティと値の調べ方といったことも理解したはずです。

次のレッスンでは、 CSS の構造について見ていきます。