前回は、属性セレクタ、疑似クラスなどの、その他のセレクタについて
記載いたしました。
個人的にお仕事で、スタイルシートのコードを記載する際、
属性セレクタは、ほぼ記載して記憶がございません…。
それでは今回はッ、
・CSSを外部ファイルとして読み込む
・HTMLのhead要素にスタイルを記述する
・Style属性でHTMLにスタイルを記述する
上記について、記載していきます…。
CSSによるスタイル指定をHTMLに適用する方法は3種類ございます。
基本的には外部ファイルで読み込む方法が、
もっとも一般的で推奨されています。
お仕事の現場では、実は他の方法を使用することも
多々ございますので、しっかりと理解しておきましょう。
HTMLの<head>～</head>に記述したlink要素でCSSファイルを読み込むことで、
そのCSSファイルに記述されているスタイルを適用できます。
link要素を並べて記述すれば複数のCSSファイルを適用することも可能です。
しかしながら、「沢山のCSSファイルを読み込む」ということは、
それだけWebサーバーへのリクエストが増えることになります。
Webサーバーへの負担を減らしたり、ページが表示されるまでの時間を
少しでも短縮したいのであれば、読み込むCSSファイルは、
出来るだけ減らしたほうが良いと考えられます。
しかしながら実際には、スタイルをいちから記載したCSS以外にも、
jQueryのプラグインで使用しているCSSなども、
link要素で読み込むことになる事が多々あります。
なので、私がCSSを記載してHTMLにlink要素で読み込む際は、
reset.css/common.css/layout.cssなど、複数に分けることなく、
極力1枚のCSSに、まとめて記載することが一部の場合を除き
多くなります。
「HTML：外部ファイル読み込み」
<head> ... <link rel="stylesheet" type="text/css" href="css/style1.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="screen"> <link rel="stylesheet" type="text/css" href="css/style3.css" media="screen"> ... </head>
「media=”〇〇〇”を下記一覧にてご紹介」
| 名前 | 適用対象 |
|---|---|
| all | 全てのデバイス |
| aural | 音声合成装置 |
| braille | 点字出力デバイス |
| handheld | 携帯電話など、画面が小さいデバイス |
| プリンタでの印刷、あるいは印刷のプレビュー画面 | |
| projection | プロジェクタ。Opera のフルスクリーンモード時もこれに該当します |
| screen | コンピュータスクリーン。パソコン、スマートフォンで動作するブラウザ |
| tty | テレタイプなど、表示文字幅が固定されたデバイス |
| tv | テレビなど、解像度や色数に制限があるデバイス |
media属性が省略されている場合は「all」として取り扱われます。
特に対象デバイスを指定する必要がない場合は指定する必要はありません。
HTMLの<head>～</head>に、style要素の内容としてスタイルを記述する方法。
一般的には、あまり推奨されておりません。
内部スタイルとして記載されたスタイルは、記載されたそのページにしか
適用されない為、メンテナンス性の低下する恐れが一番の要因です。
本来は情報そのものだけが記述されるはずのHTMLに余分なスタイルを記述することで、
HTMLとCSSの役割が、あいまいになってしまう為といわれております。
しかしながら、ページの表示速度を上げるために、
クリティカルCSSの記載を行う際は、この記述方法を用います。
「HTML：head要素内に記述例」
<head>
<style>
body {
background-color: #fff;
color: #4c5482;
}
</style>
</head>
すべての要素に追加可能な「style」という属性を使用し、
styleを指定する方法になります。
任意の要素の開始タグにstyle属性を追加して、属性値のCSSを記述します。
styleどうしをセミコロンで区切る事で、複数のスタイルを記述することも可能です。
お仕事の現場では、急な直しや、一時的なスタイルの変更など
インラインスタイルを記述する場合があります。
インラインスタイルでの記述は、外部シートよりも
優先されて適用されますので、一時的なスタイルの変更などには有効です。
「HTML：インラインスタイル使用例」
<body style="background-color:#fff;color:#4c5482;"> ... </body>
今回は、CSSをHTMLに適用させる方法を記載いたしました。
実際のお仕事の際は、ほぼ外部ファイルとして記載するCSSですが、
やはり、重要になってくるSEOを踏まえ、ページの表示速度を考えますと、
クリティカルCSSとして、HTMLのhead要素にスタイルを圧縮して記述することも多々あります。
また、出来る限り1枚のCSSにと記載いたしましたが、
レスポンシブデザインのスタイルを1枚のCSSに記述となると、
メンテナンスが難しくなりますので/*— コメントアウト —*/の機能を使い、
ページのブロックごと、メディアクリエごとなどに分かり易く工夫が必要になります。
まッコレも慣れてくれば、何ら問題ないことだと思います。
それよりも、ページの上位表示を目指すことが、
ホームページ作成者にとっては、大きな意味合いを持つことと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
