【CSS】HTMLに適用させる方法

CSS

CSSをHTMLに適用させるには3種類の方法があります。今回はCSSをHTMLに適用させる方法を記載します。

３種類のCSSの適用方法

CSSファイルを作って外部ファイルとして読み込ませる
HTMLページ内に記述する
HTMLタグに記述する

上記の方法でCSSをHTMLへ適用することができます。

外部ファイルとして読み込ませる

CSSのファイルを作ってHTMLに読み込ませます。これが一般的な適用方法です。

CSSファイルを作成

CSSファイルはテキストエディタで保存する際に拡張子を「.css」にすることで作ることができます。作ったCSSファイルは複数読み込ませることができますが、メインとなるCSSファイルは「style.css」と命名することが多いです。

HTMLページに読み込ませる

HTMLは外部ファイルを読み込むことが可能です。そのうちの一つがCSSファイルで、HTML内に下記の記述をするとCSSのファイルを読み込んでCSSを適用できます。

<link rel="stylesheet"  href="CSSファイルのURL" type="text/css" media="all" />

記述箇所はHTMLの<head>〜</head>か、<body>〜</body>の中の好きな場所へ記載します。<head>に書けばページが開いた瞬間に読み込まれ、<body>内の最下部に書けばページ内容が一旦読み込まれた後にCSSが読み込まれます。一般的には<head>内に記述しますが、とにかくCSSは後でも良いのでページの読み込みを優先させたい場合は<body>の下の方に記述しましょう。

とりあえずCSSをHTMLへ読み込みたいだけの方は上記タグをコピペしてURLだけ変更すればOKです。これ以降を読む必要はありません。

読み込ませる順番

複数のCSSファイルを読み込む場合は記述する順番に気をつけましょう。CSSの読み込みは先に書かれているものほど先に読み込まれます。後に読み込まれるCSSファイルは上書きをしていきます。

例えば始めに読み込むCSSファイル（A）にa.{color:red}と書いているとします。その後にCSSファイル（B）を読み込んで、同じく<a>タグに対してa.{color:blue}と書いていると後に読まれたCSSファイル（B）のCSSが上書きされて適用されます。

ちなみにCSSファイル（A）にa#nav{color:red}と書いていて、CSSファイル（B）にa{color:blue}と書いて読み込ませるとCSSファイル（A）が適用されます。これはCSSファイル（A）の方はID名を指定してより厳密に書いているからです。

linkタグの属性

大事なのはrelとhrefだけです。それ以外は普段はあまり意識する機会はありません。

rel=”stylesheet”	読み込むファイルがCSSであることを示す
href=”URL”	CSSファイルが置いてあるURLを記載する
type=””	【省略可能】書く場合は`type="text/css"`とする
media=””	【省略可能】読み込んだCSSを適用する媒体を指定する。記述がない場合は`all`
disabled	タグ内に`disabled`と書くとCSSを一時的に無効にできる

media 属性について

基本的にmedia="all"で大丈夫です。media属性を書かない場合は自動的にallの設定になります。このmedia属性はCSSが反映される媒体を限定することができます。allならページを開いている全ての媒体が同じCSSを適用します。

media="print"とすればプリンターでのみCSSが読み込まれ、media="screen"と書けばデバイスのモニターでのみCSSが読み込まれます。
媒体によってCSSを切り替えたい場合に利用します。領収書など印刷がメインのページなどで media="print"指定のCSSを別途読み込んで適用させたりします。

このようにandで繋げることで複数の属性を指定することもできます。

media属性にはメディアクエリの指定方法が利用できます。メディアクエリはPC／スマホのCSS切り替えに重要な要素ですが、メディアクエリ自体が複雑なのでこのページには記載しません。今のmedia属性のキーワードは「all」「screen」「print」の3種のみが推奨されています。

もしもっと厳密にデバイス単位で切り分けたい場合はプログラムやJavaScriptでユーザーエージェントを指定して切り分けます。

HTMLページ内に記述する

style.cssファイルを読み込まずにHTMLページに直書きでCSSを適用させることができます。

<style type="text/css">
    セレクタ{ プロパティ:値  }
</style>

このように<style>タグで囲まれた中にCSSの記述をするだけでHTMLページにCSSを適用できます。記述箇所は<head>〜</head>と<body>〜</body>の中ならどこでも大丈夫です。

メリット

開いているページのみに反映させたいCSSがある場合に非常に有効です。また外部ファイルを触ることができない場合にも有効です。

コーディング中にちょっとしたパーツを作る場合にHTMLファイル内に書きながら組むことも良くあります。

デメリット

記述されたページにしかCSSが適用されないので全ページで共通するCSSを記述するのには向いていません。そしてHTML内部に書くことは後のメンテナンス性の低下にも繋がります。２〜３箇所なら良いですが数が増えるにつれ管理できなくなっていきます。

また、SEOにも関わる問題ですがHTML内に記述された<style>〜</style>はブラウザにキャッシュされないためページのレンダリング速度が低下します。多少のCSSだけであれば問題はありません。

HTMLタグに記述する

CSSがまだない頃やフィーチャーフォン（ガラケー）が全盛期だった頃に活躍した記述方法です。（多少違ったと思いますが今更重要では無いので割愛）

<p>などのHTMLタグ内部にCSSを直書きすることができます。

<p style="font-size:1.6rem;color:red;">テキスト</p>

このようにstyle=""の中にCSSプロパティと値を記述します。擬似クラスなどいくつかの指定方法が利用できませんがCSSプロパティは全て利用可能です。

メリット

CSSファイルを修正できない場合に有効です。また、JavaScriptやPHPでHTMLタグを書き出す際にCSSをつけることができるので実現できることが増えます。例えばJavaScriptの制御でCLASS名とつければデザインを動的に変えることができますが、あくまでもCSSファイルに登録された値しか使えません。<タグ style="プロパティ:値">ならJavaScriptでユーザーの操作を監視しながら動的にCSSプロパティの値を変更できます。