ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、HTMLの構造とタグについてご紹介しました。今回はウェブページ作成に欠かせないCSSについてご説明します。
CSSとは
CSSとは簡単に言うと、HTMLで作成した文書の見た目（文字の色や大きさなど）を指定するために使用するファイルです。
CSSとは、“Cascating Style Sheets” の頭文字をとったものであり、スタイルシートとも呼ばれることがあります。
CSSを使用する理由
HTMLファイル内に文字の大きさなどを各々指定することもできるのですが、この方法はHTMLのそもそもの構想に反するだけでなく、効率的でもありません。
例えば「見出し」が同じページの中で何度も出てくるかもしれませんが、もしCSSを使用しないとするなら、そのすべてにスタイル（文字の大きさや種類や色）をひとつづつ指定していかなければなりません。 そして、今後「見出し」の文字の大きさや色を変更したいと思う時には、そのすべてを調整していかなければなりません。
一方、CSSを用いるなら、一か所でまとめてスタイルを記入できますので、HTMLを作成するときと、その後の更新を非常に効率的に行うことができます。
加えて、HTMLはそもそもスタイリングを行なうCSSとセットで用いることを前提に構築されているものなので、ホームページを作成するときにはCSSを活用するようにしましょう。
CSSで出来ること
以下の2つの画像を比較していただければ一目瞭然かと思います。 下の画像はCSSでスタイルを指定しているものです。
スタイルシート（CSS）を読み込まないと以下のようになります。
逆にいうと、スタイルシート（CSS)により、文字の大きさや色だけでなく、写真を読み込んだり、段組みをしたりなど見た目にかかわる部分全てを制御できるということです。
CSSの仕組み
先に述べたように、CSSはHTMLとは別のファイルとして作成しておきます。HTMLファイルの場合拡張子（ファイル名の後に付くファイルの種類を指定するもの）が「.html」であったのに対して、CSSの場合は「.css」となります。
このCSSファイルをHTMLファイルで呼び出すことによって、HTML内の指定した文書に対してスタイルを適用することができます。
CSSを作ってみよう！
ではさっそく、先回作成したHTMLを活用してCSSファイルを作成の仕方を見てみましょう。
手順１ テキストエディタで「新規ファイル」を作成し、名前を付けて保存する
この場合のファイル名は何でも良いのですが、一般的に「style.css」という名前を付けます。
ファイルの保存場所はいったん、HTMLファイルと同じフォルダ内の同じ階層に保存しておきましょう。
手順２ HTMLファイルのスタイルを指定したい部分に名前を付ける（「セレクタ」を記入する。）
この「セレクタ」とは、スタイルを適用する対象のことです。 HTMLの特定の一文に「名前」を付け、CSS側でその「名前」の部分のスタイルを指定するというわけです。この「名前」のことをセレクタと呼びます。
セレクタには「body」や「p」「h1」などデフォルトで決まっているものと、自分で自由に名前を付けることのできるもの（「class」や「id」など） があります。
デフォルトのセレクタの場合CSS側ではそのままの名前を記入すれば大丈夫です。
一方、自分で自由に名前を付けることができるものに関しては、「class」にはセレクタ名の前に「.」を付け、「id」の場合にはセレクタ名の前に「＃」を付けます。（この「class」と「id」については、次の記事で詳しく解説しますのでご安心ください。）
以下の画像のように、「class=” “」の部分に「セレクタ（名前）」を付けてみましょう。この場合は何でも良いのですが、一旦「title」という「名前」を付けてみます。 そして、CSS側に同じ「名前」を付けることによって、その部分のスタイルを調整することができるようになります。
下の画像の左がHTMLファイル、右側がCSSファイルです。CSSファイルに「body」と「.title」を記入します。
手順３ CSS側でスタイルを指定する
いま「body」と「.title」を指定しましたので、その部分のスタイルを記入してみましょう。 雰囲気を理解していただくため、今回は以下のように記入してみます。
body{
background-color: lightyellow; ←背景色を「lightyellow」にする
}
これは「body」の範囲の背景を「lightyellow」にするという意味です。慣れてくると勝手がわかってきますので、まずはその通りに書いてみましょう。「：」と「；」を間違わないようにも注意してください。次に「title」の部分のスタイルも指定します。
.title{
font-weight: bold; ←文字の太さを太く
text-align: center; ←文字列を中央揃いに
color: blue; ←文字の色を青に
}
これで、スタイルの作成ができました。これで上書き保存しましょう。※Ctrl＋Sで保存できますのでご活用ください。
手順４ HTMLファイル側でCSSファイルを読み込む
このCSSファイルの読み込みには決まった表現が用いられ以下のようになります。
<link rel=”stylesheet” href=”style.css”>
この上のコードを日本語訳すると、「スタイルシートを読み込む、読み込むスタイルシートのファイル名は style.css 」ということになります。Atomの場合には「L」と押すだけで候補が表示されると思います。
※ これは前回のHTMLの説明でも行いましたが、このスタイルシートの読み込みを記述する場所は、ホームページの本文「body」内ではなく、必ずHTMLの情報を記す部分「head」部分に記入します。
ここまで出来たら上書き保存しましょう。
手順５ ブラウザーで表示を確認
ブラウザーで確認してみましょう。背景が薄い黄色に、文字が太字で真ん中揃い、文字の色が青に変化していると思います。このようになっていれば問題なく記入ができたことになります。
まとめ
いかがでしたか。うまくできましたでしょうか？
ここまでできれば基本的なHTMLとCSSの作成方法が理解できたということになります。
もちろん、セレクタの種類やスタイルの指定方法など今後覚える必要のあることはまだありますが、基本的にはこのHTMLファイルと、そのスタイリングを行なうCSSというファイルを編集することによってホームページを作っていくのだということをご理解いただければ、今の段階では大丈夫です。
では次回は、今回少し出てきた「class」と「id」についてみていきましょう。