Visual Basic 中学校 HTML講座
 

Visual Basic 中学校 > HTML講座 >

第３回　CSS

この記事が対象とする仕様

  HTML5 HTML構文 ◎ 対象です。
  HTML5 XHTML構文 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.1 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.0 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  HTML 4.01 ○ 対象ですが、HTML5に対する補足としてふれています。

 

概要

・CSSを使ってHTMLの表現方法を指定する方法

・CSSをHTML内に埋め込む方法と外部ファイルで管理する方法

・CSSの基本的なセレクター

 

１．CSSの概要

CSSは、HTMLの要素をどのように修飾・表示するかを記述する言語です。HTMLが意味を記述するのに対し、CSSはそれをどのように表示するかを表します。このHTMLとCSSの役割分担によって次のメリットが得られます。

２．CSSの表記法

まず、CSSを含むHTMLの例を紹介します。

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <style>
        body {background-color:aqua;}
        p {color:red; margin-bottom:100px;}
    </style>
</head>
<body>
    <p>aaaaaa</p>
    <p>bbbbbb</p>
    <p>cccccc</p>
</table>
</body>

この中でCSSはstyle要素の中に記述されている部分です。

body {background-color:aqua;}
p {color:red; margin-bottom:100px;}

このCSSはbody要素の背景を水色にして、p要素の文字の色を赤、下の余白を100pxで表示することを指定しています。

※pxは画素の単位で「ピクセル」と読みます。ドットと同じような意味です。

このようにCSSは対象の要素を指定するセレクターと呼ばれる部分と、 { } の中に書く実際のデザインを指定する部分から成り立ちます。この実際のデザインのことをスタイルと呼びます。

デザインの指定で使っているbackground-colorやmargin-bottomなどはCSSのプロパティと呼ばれあらかじめ定義されています。プロパティの名前と指定する値は : で区切り、複数のプロパティを指定する場合は ; で区切ります。

セレクター {CSSプロパティ名 : CSSプロパティの値; CSSプロパティの名 : CSSプロパティの値; …}

このように解釈すると上記の例では次のようにデザインが指定されていることがわかります。

セレクター プロパティ 値 意味
body background-color aqua 背景色を水色で表示
p color red 文字の色を赤で表示
  margin-bottom 100px 要素の下側に100pxの余白を表示

３．CSSを書ける場所

３−１．CSSを書ける３つの場所

CSSはHTML内にまとめて直接記述する方法と、HTML内に要素ごとに記述する方法と、別のファイルに分けて記述する方法があります。

 

３−２．HTML内にまとめて記述する方法

HTMLのstyle要素は表示形式を記述するための特別な要素であり、この中にCSSを記述することができます。

例

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <style>
        body {background-color:aqua;}
    </style>
</head>
<body>
    <h1>背景色は薄い青</h1>
</body>
</html>

style要素にはCSSが適用される範囲を限定する機能もありますが、この例のように何の属性もないstyle要素はそのHTML文書全体を対象にします。

CSSではセレクターによって適用対象の要素を指定する機能もありますから、CSSをstyle要素の中に書いた場合、実際にCSSが提供される対象は以下の両方に合致するものになります。

※style要素でCSSの適用対象範囲を限定する機能はHTML5から導入されました。これはstyle要素の位置とscope属性によって実現されます。

 

３−３．HTML内に要素ごとに記述する方法

HTMLの各要素はstyle属性を持っており、ここにCSSを記述することができます。

以下の例はbody要素のstyle属性にCSSを記述しています。

例

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
</head>
<body style="background-color:aqua;">
    <h1>背景色は薄い青</h1>
</body>
</html>

この場合、body { } は意味がなくなり記述することはできません。style属性には { } の中だけを書きます。

style属性の記述はその属性を持つ要素だけに適用されます。

次の例では最初のp要素は赤、次のp要素は青、最後のp要素は通常の色で表示されます。

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
</head>
<body>
    <p style="color:red;">これは赤い色の段落です。</p>
    <p style="color:blue;">これは青い色の段落です。</p>
    <p>これは通常の色の段落です。</p>
</body>
</html>

要素のstyle属性によるCSSの指定は、style要素によるCSSの指定より優先的に適用されます。

 

３−４．別のファイルに分けて記述する方法

外部のファイルのCSSを記述してHTMLからはそのファイルを参照するようにすることでCSSとHTMLを完全に分けることができます。

たくさんのHTMLファイルからなるWebサイトは、デザインに統一性を持たせるためにCSSファイルは１つ程度だけ作っておき、それぞれのHTMLが同じ１つ程度のCSSファイルを参照するようにするのが一般的です。

外部のCSSファイルの例(test.cssとする)

body {background-color:blue;}
h1 {border:thin solid black;background-color:aqua;}

borderプロパティは要素を囲む枠線の描画方法を指定します。ここではthin(細い線で)、solid(単色で)、black(黒い色)で描画するように指定しています。

 

CSSファイルを参照するHTMLファイルの例

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h1>外部のCSSファイルのテスト</h1>
</body>
</html>

CSSファイルを参照するためにlink要素を使っています。link要素はHTMLと他の外部文書との関係を表す要素で、CSSファイル以外にも関係を持つことができますが、CSSのために使われることが一番多いです。rel属性をstylesheetにすることで、関係がデザインを表現するものであることを示し、href属性で実際のファイル名を指定します。

４．セレクター

４−１．基本的なセレクターの書き方

 

CSSのセレクターにHTMLの要素名が指定できることは既に説明しました。

たとえば、以下の例はh1要素にスタイルを適用します。

h1 {border:thin solid black;background-color:aqua;}

セレクターにはこのほかにもさまざまな書き方があります。

 

４−２．複数の要素を指定

 

たとえば、複数の要素に同じスタイルを適用する場合、セレクターにはそれらの要素をカンマで区切って指定することができます。

例

h1,h2,h3,h4,h5,h6 {border:thin solid black;background-color:aqua;}

 

４−３．文脈セレクター - 特定の親子関係のある要素を指定

 

また、p要素の中に含まれるb要素を対象にするというように特定の親子関係を持つものを対象にすることもできます。

例

p b {color:red;}

このセレクターを使うと同じb要素でも適用するスタイルを分けることができます。

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <style>
        p b{color:red;}
    </style>
</head>
<body>
    <p>Appleは<b>りんご</b>です。</p>
    <ul>
        <li>Bananaは<b>バナナ</b>
        <li>Catは<b>猫</b>
    </ul>
</body>

メモ：ul要素は一覧を意味します。li要素は一覧の中の項目を意味します。

 

４−４．クラス - 自由に指定

 

HTMLの各要素にはclass属性を使って「クラス」というものを指定することができます。CSSのセレクターは特定のクラスを持つ要素だけを対象にすることができます。

クラスは要素の種類やクラスをHTMLの制作者が自由に指定するためにあり、どのような値を指定することもできますし、その指定によって動作や表示が変わることはありません。

たとえば、以下のHTMLには３つのp要素がありますが、はじめの２つにはclass属性で「important」と指定されています。CSSのセレクターには「.important」と記載してあり、これはclass属性が「important」のものを対象にするという意味です。

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <style>
        .important {color:red; font-weight: bold;}
    </style>
</head>
<body>
    <p class="important">来週土曜日は運動会です。</p>
    <p class="important">雨天の場合、学校のWebサイトに開催・非開催の通知を載せます。</p>
    <p>ふるってご参加ください。</p>
</body>
</html>

このHTMLでは最初の２つの段落は赤い太字で表示されます。

セレクターは p.importantのように要素名とクラスの両方を指定することもできます。またclass属性ではスペースで区切って複数のクラスを指定することもできます。

メモ メモ  -  クラス名は意味を表すようにする

クラス名は何でも指定できるのでたとえば「red」というクラス名を指定することは可能です。赤く表示する部分がわかりやすいように「red」という名前を付けたいと考えることがひょっとするとあるかもしれませんがHTMLは表示ではなく意味を指定するものだということを考えてみてください。この場合、クラス名には「red」よりもなぜ赤く表示したいのかその意味を指定するほうが適しています。たとえば、「important」、「notice」などです。

 

４−５．id - ピンポイントで指定

 

HTMLの各要素には一意のIDを割り当てることができます。IDを割り当てるにはid属性を使用します。CSSのセレクターでは「#」を使うことでこのIDを指定できるので、この方法を使うと要素にピンポイントでスタイルを適用することができます。

例

<!DOCTYPE html>
<html>
<head>
    <title>CSSのテスト</title>
    <style>
        p#main {color:red; font-weight: bold;}
    </style>
</head>
<body>
    <p id="main">来週土曜日は運動会です。</p>
    <p id="notice">雨天の場合、学校のWebサイトに開催・非開催の通知を載せます。</p>
    <p id="polite">ふるってご参加ください。</p>
</body>
</html>

 

４−６．さらなるセレクター

 

セレクターではさらに、特定の属性と値を持つものや、子孫関係、特定の順番で出現する要素、特定の状態にある要素などさまざまな指定方法が可能で、CSS3の仕様ではほとんどの場合セレクターの機能不足は感じないで済むほど充実しています。

必要に応じて、CSSのリファレンス等を参照してください。