以前の記事でHTMLファイルの記述に初挑戦してみました。
自分が書いた文章がホームページとしてウェブブラウザーに表示されるのはとてもワクワクするものですね。
そして、これまた以前に解説しましたが、ホームページには『HTML』と『CSS』が必要でした。
今回は『CSS』ファイルを作成して、HTMLファイルの内容を『装飾』してみましょう。
CSSの記述からプレビュー（画面での確認）まで
実際の作業に入る前に、今回行う作業の流れを書いておきます。
- CSSによって装飾するHTMLを作成
- テキストエディターを起動し、CSSファイルを新規作成
- CSSファイルとして保存
- HTMLファイル内にCSSファイルとの『リンク（連動して動く仕組み）』を設定
- CSSファイル内に装飾内容を記述
- CSSファイルを上書き保存
- 作成したHTMLファイルをブラウザー（閲覧用アプリ）でプレビュー
CSSによって装飾するHTMLを作成
解説ページ『 HTMLを記述してホームページを組み立てる（基礎知識編4） 』で作成したファイル『test.html』と、およびそれを格納するフォルダ『homepage』をお持ちの方はそれを使ってください。
前回記事を元に自分で別の名前のファイル／フォルダを作ってみたよ、という方はもちろんそちらを使ってくださっても構いません。
ここからお読みいただいている方は該当記事から今回の解説に必要なHTMLファイルを作成しておいてください。
テキストエディターを起動し、CSSファイルを新規作成
用意したHTMLファイルとは別にファイルを新規作成しておきましょう
CSSファイルとして保存
まだ何も記述していませんが、いったんCSSファイルとして保存しておきます。
- 保存場所はHTMLファイルと同じ場所（フォルダ『homepage』内）に指定
- ファイル名は半角英数であれば任意で構いません。例は『style.css』とします
- HTMLと同じくエンコード（文字コード）は『UTF-8』を選択してください
ファイルを『CSSファイル』として保存する（.cssという拡張子をつける）、という作業は必ずエディターの『保存操作』の中で行ってください。
適当なファイルの種類で『とりあえずなんとなく』作ったものを、後から『名前の変更』で拡張子ごと書き換えてもファイルが開かなくなるトラブルが起こるだけで種類の変更が行えるわけではありません。
HTMLファイル内にCSSファイルとの『リンク（連動して動く仕組み）』を設定
そもそもCSSファイルは『HTMLを装飾するために存在する脇役』という扱いのものです。
それ自体が単体では動作せず、常に何らかのHTMLファイルが開くタイミングで同時に読み込まれます。
ホームページの主役はあくまでHTMLなのです。
『HTMLを表示確認（ブラウザで表示）する→同時にCSSファイルも使用される』
という流れです。
ですので『CSSを同時に使用したいHTML』内にその旨を記述しておかなければなりません。
「自分（HTML）が動作する（ブラウザで表示される）際にCSSファイルも使用する」
という一文ですね。
ではHTMLファイル『test.html』を開いて以下の一文を追記してください。
（赤字の部分が追記箇所）
新規作成後、いったん閉じてしまったHTMLファイルをブラウザーではなくテキストエディターで開く場合も、以前解説した『作成したHTMLファイルをブラウザー（閲覧用アプリ）で開いて表示を確認する』方法と同じ手段（ただし今回はテキストエディターで）で開いてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLを書いてみるテスト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>このページの内容である文章</p>
</body>
</html>
今回はCSSを体験してみることが目的ですので、この一行の意味については理解する必要はありません。
今のところは、このHTMLファイルとCSSファイル『style.css』を連動させるためにこの一行が必要らしい、という認識だけで充分です。
追記部分の『href=”style.css”』の箇所の『style.css』は今回作成したCSSファイルの名前を指定します。独自の名前をつけられた方はその名前を記述してください。
ではいよいよCSSの記述に取りかかっていきましょう！！
と、その前に、このHTMLファイルも上書き保存をお忘れなく。
HTMLもCSSも、とにかく何かを追記するたびに『上書き保存』しましょう。
CSSファイル内に装飾内容を記述
ではエディターを開いて『style.css』の編集画面に切り替え、以下のように一行目から記述してください。
今回はコピー＆ペーストでも構いません。
『style.css』を閉じてしまっている方は『作成したHTMLファイルをブラウザー（閲覧用アプリ）で開いて表示を確認する』方法と同じ手段（ただし今回はブラウザーではなくテキストエディターで）で開いてください。
・HTMLと同様に、以下の三行についても全て半角で入力してください
・『：』コロン、『；』セミコロンの違いに注意してください
p{
color:red;
}
記述できたら上書きしておきましょう。
表示確認
ごくわずかではありますが、CSSを編集できましたのでそれが正しく表示に反映されるか確認してみましょう。
作成したHTMLファイルをブラウザー（閲覧用アプリ）でプレビュー
文章の内容を変更（HTMLファイルの編集）したり、文章の装飾を変更（CSSファイルの編集）したらその結果をブラウザーで確認しますが、その作業のことを『プレビュー』と言います。
先ほどCSSファイルに追記していただいた三行ですが、『<p>と</p>で挟まれた文字列の色を赤色にする』という意味があります。
CSSにそのように書いたわけですから、該当箇所が赤色に変化するはずなんですね。
ではそもそも、その『<p>と</p>で挟まれた文字列』とはどこのことを指すのでしょうか。
『test.html』をエディターで開いて確認してみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLを書いてみるテスト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>このページの内容である文章</p>
</body>
</html>
赤く塗られている箇所を見てください。
その両側の『<p>』と『</p>』に挟まれているのが見えますね。
この『<p>このページの内容である文章</p>』という一行は『p要素』と呼ばれるブロックで、『このページの内容である文章』という文字列は、このp要素の『内容』という言い方をします。
HTMLに記述した『<head>』『<body>』『<p>』などは、それぞれ『head要素』『body要素』『p要素』と呼ばれ、それぞれ別々の役割を果たしています。
例えば、『body要素』とはブラウザーで表示するときの『ウィンドウ枠』そのものを表し、『p要素』とは『段落』を意味します。
つまり、下記の3行だけを見て、この状況を言葉にするとしたら・・・
<body> <p>このページの内容である文章</p> </body>
『ウィンドウ枠の中に段落が一つだけある状態』ということになります。
さあ、前置きが長くなりましたが、記述した CSSがHTMLに反映されているか確認してみましょう。
以下の方法を参考にHTMLファイルをブラウザーでプレビューしてみましょう。
『作成したHTMLファイルをブラウザー（閲覧用アプリ）で開いて表示を確認する』
画像のように文字列が赤色で表示されれば成功です！
いかがですか？
うまく色が変わったでしょうか？
色が変わらない、という方は次の三点について確認してみてください。
- HTMLに追記した一行
<link rel=”stylesheet” href=”style.css”>
に過不足がある - CSSファイルのファイル名が
<link rel=”stylesheet” href=”style.css“>
の黄マーカー部分の表記と同一でない - CSSに記述した三行
p{
color:red;
}
の中に全角文字（空白も含む）が含まれていたり、コロン『:』とセミコロン『;』を正しく入力できていない
修正のうえ、色が変わったことが確認できましたら、CSSの『color:red;』の『red』を『blue』や『yellow』に書き換えて赤色以外の色も試しておきましょう。
- CSSファイルはHTMLファイルとは別に作成し、そこに装飾の指定を記述する
- CSSファイルはあくまでも脇役
主役であるHTMLファイルからCSSファイルに対して『連動する仕組み』を設定する必要がある - 『HTMLに記述した要素』の装飾（文字の色を任意の色に変更する、など）指定をCSSに記述する
- ブラウザーで確認することを『プレビューする』と言う
さてさて、ごく簡単ではありますが、CSSの記述とその後のブラウザでの表示確認ができたところで今回はここまでにしましょう。
基礎知識編はここまで。
次回からは今回学習した『要素』の細かいお話について解説していきます。
ファイルの開き方やアプリの起動、保存操作、ブラウザーでの確認などの手順につきましては今後は簡潔に進めていきますので、不安がある方は当記事まで（基礎知識編1～5）の手順を繰り返して慣れておいてくださいね。
最後までお読みくださりありがとうございました。
おつかれさまでした。
