CSS 入門

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

前提条件: 基本的なコンピューターリテラシー、ソフトウェアのインストールファイルの働き方についての基本的な知識、 HTML の基本 (HTML序論を学んでいること。)
目的: CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。

HTML からはじめよう

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

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

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

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

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

    <ul>
        <li>一つ目の項目</li>
        <li>二つ目の項目</li>
        <li><em>三つ目</em>の項目</li>
    </ul>

</body>

</html>

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

CSS を加える

まず必要なのは、使いたいCSSルールをHTML 文書に適用させることです。これには一般的に3つの方法がありますが、いまは最も一般的で便利な方法— CSS を <head> 要素の中にリンクする方法を見てみましょう。

HTML ドキュメントとおなじフォルダにファイルをつくり、 styles.css として保存してください。拡張子 .css となっているのが CSS ファイルです。

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

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

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

h1 {
  color: red;
}

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

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

HTML 要素をスタイリングする

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

p {
  color: green;
}

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

p, li {
    color: green;
}

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

 

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

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

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

li {
  list-style-type: none;
}

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

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

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

クラスを加える

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

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

<ul>
  <li>Item one</li>
  <li class="special">二つ目の項目</li>
  <li><em>三つ目</em>の項目</li>
</ul>

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

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

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

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

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

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

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

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

いくつかのクラスがたくさんの要素に適用され、スタイリングが必要になる度にCSSを編集し続けることを望まないかもしれません。したがって、ある要素だけに特別なルールを作成し、他の要素に適用されないようにする場合を除き、要素をバイパスしてクラスを参照することが最善の場合があります。

文書内の場所に基づいてスタイリングする

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

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

li em {
  color: rebeccapurple;
}

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

HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に +  を入れます(adjacent sibling combinator:アジェイセント・シブリング・コンビネーター)。

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

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

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

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

状態に基づいてスタイリングする

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

a:link {
  color: pink;
}

a:visited {
  color: green;
}

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

a:hover {
  text-decoration: none;
}

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

 

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

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

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

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

セレクタとコンビネーターを組み合わせる

複数のセレクタとコンビネーターを組み合わせることができます:

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

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

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

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

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

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

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

囲む

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

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

このモジュールの記事

  1. CSS とは何か?
  2. CSS 入門
  3. CSS の構造化
  4. CSS はどう働くか?
  5. 新しい知識を使う