スタイルシート

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第20話:スタイルシート

目次



マンガ












マンガ台詞

【1Page】
先生:さて これまでの勉強で インタラクティブな Webページを 作れるようになった
    今回は 一歩進んで 『スタイルシート』を 操作する
遊:『スタイルシート』?
    なんなの それは?
先生:『スタイルシート』は Webページの見た目を 設定する方法だ
遊:Webページって タグで見た目を 決めるんじゃ なかったの?
先生:まあそうなんだが
    実は『スタイルシート』 というもので 細かく設定できるんだ
遊:ふーん
【2Page】
先生:それじゃあ 実例を示すぞ
    例えばこう書く
        <div style="font-size:1000%;">どでかフォント</div>
            フォントサイズ1000%
遊:でかっ!
先生:例えばこう書く
        <div style="background-color: red; border: solid 3px blue;">枠と背景</div>
        背景色:赤
        枠:実線、3ピクセル、青
遊:あっ 枠と背景がついた!
【3Page】
先生:この表示の指定は タグに直接書く以外に
    ヘッダー内にまとめて 書いておける
        <html>
            <head>
                <style type="text/css">
                <!--
                div {
                    color:red;
                }
                div.b {
                    color:blue;
                }
                #p {
                    color:purple;
                }
                -->
                </style>
            </head>
            <body>
                <div>赤文字</div>
                <div>赤文字</div>
                <div class="b">青文字</div>
                <div class="b">青文字</div>
                <div class="b" id="p">紫文字</div>
            </body>
        </html>
先生:『div』は 『div』タグ全て という意味だ
    『div.b』は 『div』タグで クラスが『b』 の要素だ
    『#p』は 『id』が『s』 の要素になる
    より細かく そして後で指定した 方が優先される
【4Page】
先生:また 要素のスタイルを 操作すれば 見た目を 動的に変えられる
先生:また 要素の『style』を プログラムで操作すれば 見た目を動的に変えられる
        <html>
            <head>
                <script type="text/javascript">
                <!--
                var size = 0;    // フォントサイズの数値
                function tokei() {
                    // 『id』が『special』の要素を取得
                    var ele = document.getElementById("special");

                    // スタイルのフォントサイズの値を変更
                    ele.style.fontSize = size + "%";
                    size += 10;    // サイズを10%増やす
                    size %= 500;    // 500%以上ならサイズを0に戻す

                    // 20ミリ秒後に『tokei()』関数を再実行
                    window.setTimeout("tokei()", 20);
                }
                // -->
                </script>
            </head>
            <body onLoad="tokei();">
                <div id="special">文字列 ズーム</div>
            </body>
        </html>
        『文字列 ズーム』と表示
        ビュイーン
先生:最近のWebページの プログラムでは
    『スタイルシート』は 避けて通れない
    見た目は 重要だからな
【5Page】
遊:じー
先生:うん どうした?
遊:先生って 独身よね?
先生:そうだが?
遊:先生も スタイルを変えた方が いいわね
先生:いらんお世話じゃ!



説明

この章では、『スタイルシート』について学びます。『スタイルシート』は、Webページの見た目を指定する方法です。

WebページのHTMLタグには、『<font>』(フォント)や『<b>』(太文字)、『<i>』(斜め文字)など、見た目を決めるためのタグが多く用意されています。しかし、現在では、そういったタグを利用して見た目を指定する方法は主流ではなくなっています。

現在の一般的な方法は、以下の通りです。

  • HTMLタグでは、文書の構造だけを定義する。
    • 『<h1>』(見出し1)や『<h2>』(見出し2)といった、元々文書の構造を定義するためのタグを使う。
    • 『<div>』や『<span>』といった領域を指定するタグを使う。
  • 『スタイルシート』で、別途見た目を設定する。

なぜそういったことをするのでしょうか? いくつかの理由がありますが、そのうちの1つに『文書の再利用性を高める』といった目的があります。

HTMLタグでは見た目を設定せず、文書の構造だけを決めるようにしておけば、携帯ブラウザやスマートフォン、音声ブラウザといった、異なる見た目(伝達手段)の環境でも、文書の内容をそのまま伝えることができます。また、検索エンジンなどが文書を解析する際に、迷うことなく文書の内容を読み取れます。

『スタイルシート』を使用する利点はそれだけではありません。たとえば、サイトのリニューアルを行う際に、全てのページの見た目を変更したいとします。『スタイルシート』は、外部JavaScriptのように、その内容を外部ファイルとして切り離しておくことができます。そのため、簡単にサイト全体の見た目を変えることが可能です。

このように、『スタイルシート』には様々な利点があります。それでは以下、この『スタイルシート』について学んでいきましょう。



『スタイルシート』の基本

タグに直接記入

『スタイルシート』は、タグの『style』属性に直接書くことで見た目を設定できます。

<div style="font-size:1000%;">どでかフォント</div>

『<div>』タグの『style』属性に、見た目の設定を書き込んでいます。上記は、フォントサイズを1000%(10倍)に拡大するスタイルシートの設定です。

『<head>』タグ内の『style』領域に記入

『スタイルシート』は、タグの『style』属性に直接書くだけでなく、『<head>〜</head>』内の『<style type="text/css">〜</style>』内に書くこともできます。

以下は、『<head>』タグ内の『style』領域に設定を書き込んだ例です。

<head>
    <style type="text/css">
    <!--
    div {
        font-size:80%;
    }
    -->
    </style>
</head>

上記は、「全ての『<div>』タグ内の文字のフォントサイズを『80%』にする」という設定です。

『スタイルシート』の外部ファイル化

『スタイルシート』は、外部ファイル化することもできます。外部ファイルにする際は、以下のように書きます。

<link rel="stylesheet" type="text/css" href="out.css">

この時、『out.css』のファイル内には、『<style>』タグは書きません。

以下のファイルは、先ほどと同じように、「全ての『<div>』タグ内の文字のフォントサイズを『80%』にする」という設定です。

div {
    font-size:80%;
}

コメントアウト

『スタイルシート』では、『/*〜*/』の部分はコメントアウトと見なされます。

<head>
    <style type="text/css">
    <!--
    /* (無視1)
    span {
        font-size:80%;
    }
    */
    div {
        font-size:80%;
        /*(無視2)color: red;*/
    }
    -->
    </style>
</head>

コメントアウトは、タグを指定している領域全体(『無視1』の部分)でも、括弧の中の一部(『無視2』の部分)でも行えます。



『スタイルシート』の『セレクタ』

『スタイルシート』では、どの要素を対象にするのか、複雑に指定することができます。この指定方法を『セレクタ』と呼びます。

『セレクタ』の代表的な書き方

以下、『セレクタ』の代表的な書き方を紹介します。

書き方対象の要素
*全ての要素
div『div』タグの要素
div.target『div』タグの中で、『class』が『target』の要素
.target『class』が『target』の要素
div#target『div』タグの中で、『id』が『target』の要素
#target『id』が『target』の要素
h1, h2, h3『h1』タグか『h2』タグか『h3』タグの要素
div b『div』タグの中で使われる『b』タグの要素
div span b『div』タグの中で使われる『span』タグの中で使われる『b』タグの要素
『セレクタ』の書き方2

また、タグによっては、以下のような指定も行えます。

書き方対象の要素
a:link『a』タグ(リンク)の通常の表示
a:visited『a』タグ(リンク)の訪問時の表示
a:active『a』タグ(リンク)のクリックした瞬間の表示
a:hover『a』タグ(リンク)のマウスオーバー時の表示
a.target:visited『a』タグ(リンク)中で、『class』が『target』の訪問時の表示

『セレクタ』の優先順位1 順番

1つの要素に対して、複数の指定がある場合、基本的には後で書かれたものが優先されます。

<html>
    <head>
        <style type="text/css">
        <!--
        /* 文字の色を赤に */
        div {
            color:red;
        }

        /* 文字の色を青に */
        div {
            color:blue;
        }
        -->
        </style>
    </head>
    <body>
        <div>青文字</div>
        <div>青文字</div>
    </body>
</html>

上記のように、同じタグに対して2つの指定があった場合は、後で書かれた『文字を青色にする設定』が採用されます。

『セレクタ』の優先順位2 対象の絞込み

順番だけでなく、対象の絞込みも重要です。複数の指定がある場合には、より詳細に対象を狭めた方が優先されます。

<html>
    <head>
        <style type="text/css">
        <!--
        /* 文字の色を青に */
        div.b {
            color:blue;
        }

        /* 文字の色を赤に */
        div {
            color:red;
        }
        -->
        </style>
    </head>
    <body>
        <div>赤文字</div>
        <div class="b">青文字</div>
        <div>赤文字</div>
    </body>
</html>

上記の場合、『div』よりも『div.b』の方が優先されます。この設定では『<div>』タグの要素の文字の色は赤色になります。しかし、たとえ『<div>』タグであっても、クラスが『b』の要素は、文字が青色になります。

『セレクタ』の優先順位3 『style』属性

『<head>〜</head>』内で『スタイル』を設定するよりも、本文中のタグの『style』属性に直接書いたものの方が優先されます。

<html>
    <head>
        <style type="text/css">
        <!--
        div {
            color:red;
        }
        -->
        </style>
    </head>
    <body>
        <div>赤文字</div>
        <div style="color: blue;">青文字</div>
        <div>赤文字</div>
    </body>
</html>

上記の場合『<head>』内で、全ての『<div>』タグの文字は赤色と定義しています。しかし、『<div style="color: blue;">』のようにして、タグ内の『style』属性で直接『スタイル』を設定しているために、こちらが優先されて青色の文字で表示されます。

『セレクタ』の強制的な優先

『セレクタ』の優先順位を変更するための手段はこれだけではありません。ある設定を強制的に優先させる方法として、『! important』という記述もあります。この方法は、複数の『スタイルシート』を読み込む際などに使用します。

<head>
    <style type="text/css">
    <!--
    div {
        font-size:80%;    ! important
    }
    -->
    </style>
</head>



マンガ中の『スタイルシート』の解説

以下、マンガ中で登場した例の解説を行います。

<html>
    <head>
        <style type="text/css">
        <!--
        div {
            color:red;
        }
        div.b {
            color:blue;
        }
        #p {
            color:purple;
        }
        -->
        </style>
    </head>
    <body>
        <div>赤文字</div>
        <div>赤文字</div>
        <div class="b">青文字</div>
        <div class="b">青文字</div>
        <div class="b" id="p">紫文字</div>
    </body>
</html>

このHTMLファイルには、3種類の『スタイルシート』の設定が書き込まれています。

最初の『div {〜}』は、全ての『<div>』タグを対象にした設定です。ここでは『color:red;』と、文字を赤色にする設定を書き込んでいます。そのため、このHTMLファイルでは、『<div>』タグ内の文字は全て赤色になります。

しかし、2番目、3番目に、『<div>』タグについてさらに詳しい設定があるために、そちらが優先されます。

2番目の『div.b {〜}』は、『<div>』タグのうち、クラスが『b』のものを対象にした設定です。ここでは『color:blue;』と、文字を青色にする設定を書き込んでいます。そのため、『<div>』タグであっても、クラスが『b』のものは、赤色ではなく、青色の文字で表示されるようになります。

これだけではなく、このHTMLファイルには、3番目により詳しい設定があります。

3番目の『#p』は、属性『id』の値が『p』の要素を指します。『id』は、HTMLファイルでユニークになるように(他に同じ内容がないように)設定します。対して『クラス』は、複数のタグに設定することができます。そのため、『id』による指定は『クラス』による指定よりも、さらに詳しい設定になります。

ここでは、『color:purple;』と、文字を紫色にする設定を書き込んでいます。そのために、赤文字よりも青文字よりも優先して、属性『id』の値が『p』の要素は紫色の文字で表示されます。



『スタイルシート』で使える『スタイル』

『スタイルシート』で使える『スタイル』は大量にあります。その全てを掲載すると煩雑になるので、インターネットや専門の本などを調べて、個別に確認してください。

『スタイルシート』の『スタイル』の書き方は、以下のようになります。

// タグに直接書く場合
<タグ名 style="プロパティ名:値; プロパティ名:値; ……">〜</タグ名>

// 『<style>』タグ内や外部ファイルに書く場合
セレクタ {
    プロパティ名:値;
    プロパティ名:値;

}

各プロパティは『;』(セミコロン)で区切ります。この『;』を忘れると、正しく動作しないので気を付けてください。

『スタイル』をJavaScriptから操作する際の注意

この『スタイル』ですが、『スタイルシート』で指定する際と、JavaScriptから操作する際では、名前が少し異なります。

『スタイルシート』で『font-size』という名前のスタイルは、JavaScriptでは『fontSize』という名前になっています。『-』(ハイフン)がなくなり、その後の文字が『大文字』になっています。

間違いやすいので、注意してください。

<html>
    <head>
        <style type="text/css">
        <!--
        div {
            font-size:80%;
        }
        -->
        </style>
        <script type="text/javascript">
        <!--
        function changeStyle(element) {
            element.style.fontSize = "200%";
        }
        // -->
        </script>
    </head>
    <body>
        <div id="target" style="font-size: 150%;" onClick="changeStyle(this)">
            クリックしてね!
        </div>
    </body>
</html>

ブラウザ依存

『スタイルシート』は、ブラウザ依存が多く存在します。

『スタイルシート』を利用する際は、Internet ExplorerやFirefox、Google Chromeなど、複数のブラウザで見た目を確認してください。また、問題が発生した際は、ネットの情報を活用して、解決方法を入手してください。

以下、『スタイルシート』の詳細がまとめられているサイトです。


参考:とほほのスタイルシート入門
参考:スタイルシートリファレンス(目的別)
参考:スタイルシートサンプル



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(どでかフォント、枠と背景)を表示

sample2.html』(タグ、クラス、ID)を表示

sample3.html』(文字ズーム アニメーション)を表示

sample4.html』(JavaScriptでの『スタイル』の変更)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。