前回の記事で、
「HTML文書は大きく４つのタグでできていて、タグに役割を与えるための指示書がCSSである。」
「HTMLのタグはほとんど何らかの形でCSSから指示をするので、”タグ＝CSS”くらいに覚えておけば良い。」
ということを書いた。
それくらい、HTML文書にとって大事な役割を果たすのが、スタイルシート（Cascading Style Sheets）。
だが、個々のスタイルシートの意味や用途を覚える必要はない。すでに述べた通り、ネットはHTML+CSSの「教科書」なので、検索すればいくらでも教えてもらえる。
以下に紹介する３通り＆３つの役割をおさえておけば、あとは用途に応じてネットで検索するだけだ。
スタイルシートの優先順位
「スタイルシート」は、
- さまざまな指示を書くスタイルシートのファイル
- 指示を出す内容そのもの
の２通りを指し、ネットで説明している記事などを見ても、ファイルのことなのか、それとも指示そのものの名前なのか混同しやすいが、どちらも「スタイルシート」である。
この記事でも、上記２通りを「スタイルシート」と表示していく。
いずれもHTMLの４つのタグ、doctype、html、head、bodyのうち、ウェブページに直接反映される範囲、bodyタグ内の指示書のことである。
スタイルシートでは、同じ箇所を指定をする場合、以下の通り反映される優先順位がある。
- ファイル内で最も下に書かれたスタイルシートが優先される。
- セレクタでは、idがclassよりも優先される。
- 全称セレクタ「＊」をつけたものは、全てにおいて優先される。
- インラインスタイルシート（最強）、内部スタイルシート、外部スタイルシート（最も弱い）の順に優先される。
この順位を間違えると、指定した通りにWebページに反映されないので、ご注意を。
スタイルシートを書く場所
スタイルシートというくらいだから、HTMLファイル同様、一般的にはファイルを別に用意して書くものだろうという認識だろう。
それ自体は正しいのだが、他にもスタイルシートを書く場所はある。
タグ内に直接書く｜インラインスタイルシート
例えば、段落（pタグ：paragraph）ごとに直接何らかの装飾をしたい場合、
<p style=”color: red;”>吾輩は猫である。</p>というように、タグの中で直接指示をする。
また、文章の一部だけを装飾する場合は、span（範囲を示す）タグを使って、
<p>吾輩は<span style=”color: red;”>猫</span>である。</p>のように書く。HTML全体に指示するものではなく、「特にここだけ」という強調のときに使われることが多い。
インラインスタイルシートは局所的なもので、あまり多用するとHTML文書がぐちゃぐちゃになり美しくないので、よっぽどの時だけにしておく。
インラインスタイルシートは、pタグやspanタグ内に「style=“”」と指定して書く。
HTMLのheadタグ内に書く｜内部スタイルシート
ひとつのHTML文書だけに共通して指示する場合は、HTMLのheadタグ内、metaタグより下に、
<style>
.chara-color {color: red;}
</style>のように書く。
インラインスタイルシートと違い、内部スタイルシートでは、スタイルシートの指示が反映される場所を指定しなければならない。
そのため、クラス名やid名（セレクタ）を決めて内部スタイルシート内に指示内容を書き、HTML内では指定する文章または範囲をdivタグ、pタグ、spanタグで囲んで、そこにクラス名を書いていく。
スタイルシート内にクラス名を記載するときは、クラス名の前に「ドット」をつける。
上記の場合、body内で、
<p class=“chara-color”>吾輩は猫である。</p>とすれば、内部スタイルシート内でクラス名「chara-color」で指定したスタイルシート「color: red;（文字を赤色に）」が反映されるということだ。
スタイルシートのファイルに書く｜外部スタイルシート
この方法がもっとも一般的で、専用のファイルを用意してさまざまな指示を書いていき、HTML文書とリンクさせることによって、指示を反映させるもの。
ファイルの拡張子は「.css」で保存し、ディレクトリもCSS専用ディレクトリを用意する。
HTMLのような宣言（DOCTYPE宣言）はないが、必ず文頭に
@charset "utf-8";と、文字エンコーディングを決めておく。上記は「utf-8」の文字エンコーティングで、日本語のような非ASCII文字でスタイルシートを書くことはできない。
内部スタイルシート同様、クラス名をつけながらスタイルシートを書いていく。
スタイルシートの役割
スタイルシートの役割は、大きく分けて
- ウェブページのレイアウトを設定する
- 装飾やデザインを決める
- 閲覧するデバイスごとの表示を設定する
の３タイプがある。
ウェブページのレイアウトを設定する
主にdivタグを使用して、HTMLのレイアウトを設定する。
divタグは「要素を一括りにする」役割があり、特にタグ自体に意味はなく、自由に使える便利なタグ。
例えば、ウェブページにボックスを横並びにするレイアウトを作りたい時は、以下のように大ボックスのdivタグ（box-container）の中に、小ボックスのdivタグ（inner-box）を入れていく。
たまたまボックス横並びの例をとったが、このようにdivタグはある意味「箱」を作って、その箱の中にさまざまな要素を入れていく感覚だ。
See the Pen
Untitled by Kazy (@uraflt)
on CodePen.
装飾やデザインを決める
前章のインラインスタイルシートや内部スタイルシートでとった例が、これにあたる。
文章内の装飾はpタグやspanタグにて、図形などを作成するときはdivタグで囲んで使用する。
デバイスサイズごとの表示を設定する
今では、ウェブ閲覧はスマートフォンやタブレットが主流のため、見るデバイスにより表示を指定する、いわゆる「レスポンシブ」対応が必須である。
そして、一つのHTMLをスマートフォン、タブレット、パソコンそれぞれで読みやすいように、画面環境によって表示を変えていくスタイルシートを「メディアクエリ」という。
以下にメディアクエリの簡単な例を記載する。
@charset "utf-8";
@media screen and (max-width: 799px) {
h1 {font-size: 22px;}
}
@media screen and (min-width: 800px) and (max-width: 1024px) {
h1 {font-size: 20px;}
}
@media screen and (min-width: 1025px) {
h1 {font-size: 18px;}
}上記はデバイスの横幅（width）によって、h1（大見出し：タイトル）タグのフォントサイズを指定したもの。上記をひとつのスタイルシートファイルとした場合、その中に３つのデバイスサイズに対応できるよう記載している。
最初は、デバイスの横幅が799ピクセル以下（max-width：最大横幅）、スマートフォンの場合だ。h1のフォントサイズを22ピクセルに指定してある。
その次は800（min-width：最小横幅）〜1024ピクセル（max-width：最大横幅）の範囲、いわゆるタブレットサイズで、h1は20ピクセルとしてある。
最後が1025ピクセル（min-width：最小横幅）以上、パソコンサイズでは18ピクセルだ。
単にフォントサイズの指定だけではなく、パソコンサイズでは横並びのものをスマートフォンサイズでは縦並びに指定したり、デザイン的な面もデバイスサイズによって変えていくことができる。
各デバイスサイズの区切り（799と800ピクセル、1024と1025ピクセル）を「ブレイクポイント」と言い、デバイスサイズの切り替えポイントといったところ。これについては毎年新しいデバイスが発売されるため、正解という数値がない。
なお、メディアクエリはGoogleが推奨する「モバイルファースト」に倣い、スマートフォンサイズから記載していく。
スタイルシートの概略まとめ
ここでは、
- スタイルシートは書き方によって優先順位がある
- スタイルシートを書く場所は、インライン・内部・外部スタイルシートの３通りがある
- スタイルシートはレイアウトの設定、文字の装飾やデザイン指定、デバイスサイズによる表示設定の３つの役割がある
について紹介した。
専門職でもない限り、スタイルシートについては全てを覚える必要はない。用途に応じてネットで検索し、自身が制作しようとするウェブサイトに最も適切な書き方を借りてくればいいのだ。
また、フレームワークというデザイン集も各種揃ってきた。困った時にはこういうものを利用するのも良い。
コメント