この記事では、かんたんな HTML コードに CSS を適用させ、その過程でこの言語についての実用的なことを学びます。
| 前提条件: | 基本的なコンピューターリテラシー、ソフトウェアのインストール、ファイルの働き方についての基本的な知識、HTML の基本 (HTML序論を学んでいること。) |
|---|---|
| 目的: | CSS 文書と HTML ファイルのリンクのさせかたを理解し、簡単なテキストをスタイリングできるようになる。 |
HTML 文書から始めましょう。あなたのコンピューターのフォルダーに index.html として以下のコードを保存してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS 入門</title>
</head>
<body>
<h1>見出し１です</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 ルールを HTML 文書に適用させることです。これには一般的に３つの方法がありますが、いまは最も一般的で便利な方法— CSS を {{htmlelement("head")}} 要素の中にリンクする方法を見てみましょう。
HTML ドキュメントとおなじフォルダーにファイルをつくり、styles.css として保存してください。拡張子 .css となっているのが CSS ファイルです。
styles.css を index.html にリンクさせるには、HTML 文書にある {{htmlelement("head")}} 要素の中につぎのコードを追記してください:
<link rel="stylesheet" href="styles.css">
{{htmlelement("link")}} 要素はブラウザーに、スタイルシートがあること、rel 属性を使うこと、href 属性の値でスタイルシートのある場所を伝えます。styles.css に以下のルールを記述すれば、CSS が働くかテストできます。使っているコードエディターでつぎのコードを CSS ファイルに追記してください:
h1 {
color: red;
}
HTML ファイルと CSS ファイルを保存し、ブラウザーでこのページを再読み込みしてみましょう。文書の先頭にある見出し 1 が赤くなるはずです。もしそうなったら、おめでとうございます。CSS の HTML への適用に成功しました！ もしそうならなかったら、すべてを正しく入力しているか慎重に確認してください。
あなたのコンピューターに保存した styles.css を使い続けても良いですし、このチュートリアルの下の方にあるインタラクティブエディターを使い続けることもできます。もし最初のパネルにある CSS が 上にある HTML 文書とリンクされているなら、インタラクティブエディターは動作します。
見出しを赤くすることで、HTML 要素に焦点をあてたスタイリングを試しました。要素セレクタ（HTML の要素名を直接あてはめるセレクタ）に焦点をあてたのです。文書内のすべての段落に焦点をあてるなら、セレクタとして p を使うことができます。すべての段落を緑色にするために次を使います:
p {
color: green;
}
セレクタをカンマで区切ることによって、同時に複数のセレクタへ焦点をあてることができます。もしすべての段落とリストすべてを緑にしたければ、CSS のルールセットは次のようになります:
p, li {
color: green;
}
下にあるインタラクティブエディターのコードボックスを編集するか、コンピューターに保存された CSS ファイルを編集してこのルールセットを試してみてください。
{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
よくマークアップされた 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> だけを選びたいとき、ディセンダント・コンビネーター と呼ばれるセレクタを使うことができます。これは２つの異なるセレクタのあいだにスペースを設けることで設置できます。
CSS につぎのルールセットを追加してください。
li em {
color: rebeccapurple;
}
このセレクタは <li> 要素の中にある <em> 要素を選択します。よって HTML 文書の中で、3番目のリストアイテム内にある <em> 要素はパープルに変わっていますが、段落内にある <em> 要素は変更されていません。
HTML ドキュメント内で、見出しの直後に来る段落を見出しとおなじ階層レベルにしたいと思うことがあるかもしれません。このときはセレクタ同士の間に + を入れます（adjacent sibling combinator：アジェイセント・シブリング・コンビネーター）。
いま扱っている CSS につぎのルールセットを追加してみてください:
h1 + p {
font-size: 200%;
}
下のライブ例では、上に挙げた２つのルールセットが含まれています。ここに、段落内にある span 要素を赤くするルールセットを追加してください。正しくできれば第一段落の span 要素は赤くなり、最初のリストアイテムは色が変わらないはずです。
{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
注: ごらんの通り、CSS には要素に焦点をあてるための方法がいくつかあります。ここに挙げたのと、もっとたくさんのセレクタをこのコースの後にあるセレクタの記事で見ていきます。
最後にこのチュートリアルで取り上げるのは、状態に基づいてスタイルを設定する方法です。かんたんな例はリンクのスタイリングです。リンクをスタイリングするとき、<a> (anchor) 要素に焦点をあてる必要があります。リンクされたページを開いていなかったり、開いた後だったり、マウスの矢印を置いたり（ホバー）、キーボードで選択したり、クリックしたりといったように状態が変わります。こうしたさまざまな状態を CSS で選ぶことができます。— 以下だと、リンクされたページを開く前はピンクに、開いた後は緑になります。
a:link {
color: pink;
}
a:visited {
color: green;
}
ユーザーがリンクの上にマウスの矢印を持っていく（ホバー）とリンクの見た目を変えるようにできます。たとえばつぎのルールセットだと、リンクの下線が消えます:
a:hover {
text-decoration: none;
}
下のライブ例では、プロパティ値をいろいろ変えることでさまざまなリンクの状態を試せます。すでに加えられているルールセットをみると、ピンクがとても明るくて読みづらいことがわかります。もっといい色に変えてみましょう。太字に変えられますか？
{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}}
リンクをホバーすると下線が消えるようにしていますが、どんな状態でも下線が消えているようにできます。ただし実際のサイトでは、ページを見ている人に、リンクはリンクであることを知らせるのを忘れないようにしてください。下線を残すのは、ユーザーが慣れているように、テキスト内にリンクがあることを伝える重要な手掛かりになります。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 の構造を見ていきます。
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}