初心者向け講座早見表
前回のコラムでは、人気のあるWebページのレイアウトにマジカルナンバーが使われているというお話をしました。今回は、コーディングの基本に立ち返りまして、HTMLで作られたWebページにCSSでデザインを加える3つの方法を見てまいりたいと思います。
1番目の方法は、外部にCSSファイルを作り、それをHTMLファイルから読み込むパターンです。2番目と3番目は、HTMLファイルに直接書き込むパターンです。では具体的に見ていきましょう。
1番目の方法は、headタグの中でlinkタグを使用して、外部CSSファイルを読み込む方法です。
この方法が一般的には最も使用頻度が高いものとなります。コーディングを行う際は、外部CSSファイルを配置する場所に合わせてhrefの中身を適宜書き換えましょう。今回の例では、index.htmlのあるディレクトリにcssフォルダがあり、そのcssフォルダの中にあるstyles.cssを読み込んでいます。
2番目の方法は、headタグの中にstyleタグを置き、CSSのプロパティを直接書く方法です。
この方法では、CSSはstyleタグを記述したWebページにのみ適用されます。従って、例えばあるCSSを特定の1ページにだけ適用させたい場合の記述として適しています。もし複数のWebページに同じデザインやレイアウトを適用したいのであれば、この方法ではなく、前述の1番目の方法をお薦めします。
3番目の方法は、タグに直接CSSを書く方法です。
CSSを記述したタグにのみ、そのCSSが適用されますので、かなり限定的な書き方になります。1ページの中でもごく一部の場所にだけ特定のデザインを使用したいという場合にこの方法を活用することが個人的にはよいと考えています。
1番目はメンテナンス性に優れた方法なので、複数のWebページを持つWebサイトに向いています。2番目、3番目はそれぞれに適する場面を使い分ける判断が必要になります。
また、外部のCSSを読み込む別の方法として、styleタグの中に@importを置くことで、外部のCSSファイルを読み込むことも可能です。しかしこの方法は一部のブラウザで読み込み速度が少し遅いとの計測結果もあるようですので、使用する際は少し注意が必要かもしれません。CSSでデザインを加える3つの方法を適宜使い分けて、効率良くCSSを活用する際の参考としていただければ幸いです。
（担当：斉藤 万幾子）
