スタイルシートの基本

HTMLでは文書の構造だけを記述し、見た目に関することはスタイルシートを使って記述することが推奨されています。ここではなぜスタイルシートが使われるようになったのかや、スタイルシートをどこに記述すればいいのかについて確認して行きます。

１．スタイルシートをHTML文書で記述する
２．スタイルシートで見た目を記述する
３．ＣＳＳを記述する場所
４．まとめ

１．スタイルシートをＨＴＭＬ文書で記述する

１－１．HTMLに直接スタイル記述を追加する

新規ＨＴＭＬページで、下記コードを<body>～</body>間に貼り付ける
ページタイトルを「HTMLに直接スタイルを記述」とし、ファイル名を「css00.html」とし、textフォルダに保存する。

    <p>
    <span style="color:#0000cd; font-size:large;">以前は文書の見た目についても
    <span style="font-size:x-large; color:#ff0000;">HTMLを使って</span>記述していまし
    た。</span>
    </p>

    <p>
    <span style="color:#0000cd; font-size:large;">HTML文書として見た時に
    <span style="font-size:x-large; color:#ff0000;">分かりにくい</span>ことに加えて
    <span style="font-size:x-large; color:#ff0000;">修正が大変</span>です。</span>
    </p>

１－２．HTMLに見た目（スタイル）を記述した場合の問題点

1つ目はHTML文書に見た目に関する記述（すなわちスタイル記述）が増えてくると、文書が何について書かれているか分かりにくくなります。

見た目を取り除いた本来の文書は次の通りです。

    <p>
    以前は文書の見た目についてもHTMLを使って記述していました。
    </p>

    <p>
    HTML文書として見た時に分かりにくいことに加えて修正が大変です。
    </p>

2つ目はメンテナンス上の問題です。例えば数百ページのWebページが含まれるWebサイトを例に考えてみます。同じWebサイトですから各ページで使われている文字色やレイアウトなどは統一しています。属性を使って見た目を決める場合は全てのページで1つ1つ色などを指定しなければなりません。

ここでデザインを少し変えようと色を変更する必要が出たとしたら、設定は全てのページに直接書き込んでありますので全てのページを1つ1つ書き換えていくしかありません。何度か色を変更して各ページでどのように表示されるのかを確認しようとしたら大変な手間がかかってしまいます。

このようにHTMLを使って直接見た目を記述していくのは様々な問題がありました。そこでHTMLでは文書の構造に関しての記述を行い、見た目に関してはスタイルシートを使うという方式が現在では主流となっています。
　

見た目のスタイルを指定するための言語がCSSです。CSSとは Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、カスケーディングとは「階段状の滝のような」という意味です。文書の上方で定義されたスタイルを下方へ引き継ぐ（継承）という特徴を持っているため、それが流れる滝に見立てられたとされています。
　

では次のページでスタイルシートを使うとどのように便利なのかについてみていきましょう。

２．スタイルシートで見た目を記述する

スタイルシートを使って見た目に関する設定をした場合にどのようになるのかを確認してみます。ここではスタイルシートは外部ファイルに記述しておいてHTML文書から参照（リンク）する方法を執ります。

２－１．ＨＴＭＬ文書を作成する

新規ＨＴＭＬページで、下記コードを<body>～</body>間に貼り付ける
ページタイトルを「CSSを使って見た目を定義」とし、ファイル名を「css01.html」とし、textフォルダに保存する。

    <p>
    以前は文書の見た目についてもHTMLを使って記述していました。
    </p>

    <p>
    HTML文書として見た時に分かりにくいことに加えて修正が大変です。
    </p>

２－２．スタイル設定箇所を指定する

span要素とclass名を使ってスタイル指定箇所を指定する

     <title>ＣＳＳを使って見た目を定義</title>

     <p>
    以前は文書の見た目についても<span class="red">HTMLを使って</span>
    記述していました。
    </p>

    <p>
    HTML文書として見た時に<span class="red">分かりにくい</span>ことに
    加えて<span class="red">修正が大変</span>です。
    </p>

２－３．外部ファイルにスタイルを記述する

スタイルの指定は、外部ファイルに記述します。

新規ドキュメント＞ CSS を選択し、「無題_1.css」を開く
以下のスタイル記述を入力する


@charset "UTF-8";

p {
  color:#0000cd;
  font-size:large;
}

span.red {
  color:#ff0000;
  font-size:x-large;
}

CSSファイルの一行目には文字コードを書くというルールがあるため、@charset "UTF-8";と入力されています。外部スタイルシートで使用している文字コードを宣言しています。

続いて、p要素及びクラス名"red"のspan要素に対するスタイルシートを使った設定を記述しています。

２－４．外部CSSファイルを保存する

ファイル名を「style01.css」とし、cssフォルダに保存する

２－５．HTML文書から外部CSSファイルを読み込む

ファイル「css01.html」を開く
HTML文書からその外部CSSファイル"style01.css"を読み込むlink命令を記述します。

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>CSSを使って見た目を定義</title>
  <link rel="stylesheet" href="../css/style01.css" type="text/css">
</head>

head要素内にlink要素を使いスタイルシートが記述された外部ファイルを読み込みます。

hrefでＣＳＳファイルの保存されているフォルダー名とＣＳＳファイル名を指定します。
relとtypeの値は記述されている通りにします。

このようにスタイルシートは外部ファイルとして分けることができます。複数のHTML文書で同じスタイルシートが記述されたファイルを読み込めば同じ設定を共有することができます。

外部ファイルに記述したスタイルシートで見た目に関して管理することで、もし変更をする場合も1箇所だけ変更すればそのスタイルシートを使っている全てのWebページに反映させることができます。

このようにスタイルシートを使うことで、前のページで問題とした文書の可読性も解決しメンテナンス面でも格段に効率が上がります。

３．ＣＳＳを記述する場所

CSSの記述方法は３つあります。

３－１．タグのstyle属性に直接記述する

ＨＴＭＬタグに直接記述する方法は、スタイルを指定したい要素にstyle属性を追加し記述する方法です。特定の要素をピンポイントで指定できるので便利です。

新規ファイル「css02.html」を作成する
下記コードを入力する
タイトルは「タグのstyle属性に直接記述」とする

<p style="color: red;">この文字の色を赤にしたい。</p>

３－２．style要素内に記述する

ＨＴＭＬ文書のhead要素内にstyle要素を作成し、その中にＣＳＳを記述する方法です。一つのページのみに適用するスタイル記述です。

ページごとに記述する必要があるため、ページ数の多いサイトでは管理しづらい欠点がありますが、手軽にＣＳＳを利用できます。

新規ファイル「css03.html」を作成する
下記コードを入力する
タイトルは「style要素に記述」とする

<!DOCTYPE html>
<html>
<head>
<title>style要素内に記述</title>
<style type="text/css">
p {
  color: red;
}
</style>
</head>

<body>
<p>この文字の色を赤にしたい。</p>
</body>

</html>

３－３．外部ファイルに記述する

ＣＳＳファイルを別に用意し、link要素でＨＴＭＬファイルから参照させる方法です。

複数のページに適用できるので、デザインの統一やメンテナンスが容易となります。

ＨＴＭＬファイルの記述

新規ファイル「css04.html」を作成する
下記link記述を入力する
タイトルは「外部ファイルに記述」とする

ＨＴＭＬファイルには外部ＣＳＳファイルを読み込むためのlink記述をhead要素内に入力します。

<!DOCTYPE html>
<html>
<head>
<title>外部ファイルに記述する</title>
<link href="../css/style04.css" rel="stylesheet" type="text/css">
</head>

<body>
<p>この文字の色を赤にしたい。</p>
</body>

</html>

link記述では、href属性（外部ファイルの場所）、rel属性（リンク先のものはスタイルシートであることを示す）、type属性（メディアタイプがテキストで記述されたCSSであること）を指定します。

ＣＳＳファイル style04.css の記述

@charset "UTF-8";

p {
   color: red;
}

４．まとめ

トップページindex.htmlを開く新規ページを作成し、ファイル名style_css_index.htmlでtextフォルダに保存する（訂正後→ style_index.html ✕、css_index.html 〇）
ページタイトルを「スタイルシートの基本」とする
下記コードを"<body>～</body>の該当の箇所に入力する

<h2>スタイル シートの基本 － 何故スタイルシートが使われるのか</h2>
<h4 class="migi">2018.01/13</h4>
<h3>スタイル シートを使わないHTML文書</h3>
<div class="items">
<p>タグにstyle属性を記述</p>
<p>⇒作成ページ：HTMLに直接スタイルを記述（css00.html）</p>
<p>文書が何について書かれているかわかりずらい</p>
<p>メンテナンスが困難となる</p>
</div>
<h3>スタイルシートで見た目を記述した場合</h3>
<div class="items">
<p>スタイル設定箇所を、span要素あるいはid要素で指定する</p>
<p>外部ファイルにスタイルを記述する</p>
<p>HTML文書から外部CSSファイルを読み込む</p>
<p>⇒作成ページ：CSSを使って見た目を定義（css01.html）</p>
</div>
<h2>スタイルを記述する場所</h2>
<h3>タグにstyle属性で直接記述</h3>
<div class="items">
<p>特定の要素（タグ）にピンポイントでスタイルを設定できる</p>
<p>⇒作成ページ：タグにstyle属性で直接記述（css02.html）</p>
</div>
<h3>style要素内に記述する</h3>
<div class="items">
<p>ページのhead要素内にstyle要素でスタイルを記述する</p>
<p>特定ページにだけスタイルが反映する</p>
<p>ページ毎にスタイルを記述する必要があるため、ページ数の多いサイトでは管理しづらい</p>
<p>⇒作成ページ：style要素に記述（css03.html）</p>
</div>
<h3>外部ファイルに記述する</h3>
<div class="items">
<p>外部ファイルにスタイルを記述し、保存する</p>
<p>HTMLファイルから外部ファイルを読み込む</p>
<p>サイト全体にスタイルが反映する</p>
<p>効率よくページを修正、管理できる</p>
<p>⇒作成ページ：外部ファイルに記述（css04.html）</p>
</div>

作成ページへのリンクを貼る
style_css_index.htmlを上書き保存する（訂正後→ style_index.html ✕、css_index.html 〇）

５．スタイル指定が競合した場合の優先順について

ＣＳＳは１つのセレクタに対してスタイルを重ねて指定することができるため、同じセレクタに別々の指定がされた場合にどちらを優先するのか、細かくルールが決められています。

ルール１：記述場所による優先順位

①タグのstyle属性に直接記述＞ ② style要素内に記述＞ ③ 外部ファイルに記述の順に優先される。

ルール２：記述の順番による優先順位

優先順位のレベルが同じであれば、あとから書いたものが優先される。

ルール３：セレクタの種類による優先順位

セレクタの種類によって点数が割り当てられており、どのセレクタを指定するかで優先順位が変わります。点数は足し算でカウントされ、合計点数が高いものが優先されます。

指定方法	記述例	点数
タグの style 属性	style=""	1000点
id	#sample	100点
class	.sample	10点
属性セレクタ	a {target="_blank"}	10点
疑似クラス	:hover	10点
要素名	a	1点
疑似要素	:first-child	1点
全称セレクタ	*	0点

2017年 ウェブサイト作成講習会