「CSS/記述」の版間の差分

出典: フリー教科書『ウィキブックス(Wikibooks)』
< CSS
削除された内容 追加された内容
56 行 56 行
== 基礎 ==
== 基礎 ==
=== style属性 ===
=== style属性 ===
ても簡単な記述方法としてHTML要素に以下ように指定する方法が簡単です。
style属性を使うと、それぞれhtmlタグ個別にスタイルを指定することもきます。


<SyntaxHighlight lang="html4strict">
<SyntaxHighlight lang="html4strict">

2020年5月5日 (火) 05:10時点における版

準備

まずスタイルシートを入力する前に、

<style type="text/css">

</style>

と入力します。

このタグはスタイルシート(CSS) に絶対に必要です。もし、これが無いと、スタイルシートとしては動作しないです。


なぜならwebブラウザは <style> から </style> までの間に書いた内容を、 CSS 形式のスタイルシートとして扱うからです。

これでスタイルシートを入力する準備ができました。


さて、スタイルシート(CSS)のファイルと HTMLファイルとは 別ファイルにしても動作は可能です(「外部スタイルシート」といい、拡張子は「.css」になります。後述)。いっぽうHTMLファイル中にCSSを含めることも可能です。


もしHTML 文書中にスタイルシートを書く場合は、慣習的に

<head>
    <style type="text/css">

    </style>
</head>

という構成にするのが望ましいとされており、つまり、head 要素の中<head> から </head> までの間)にstyle要素を置くのが望ましいとされています。


この構成が望ましい理由としては、互換性などの理由で万が一スタイルシートを認識しない場合でも、HTMLの仕様としてhead内は非表示なので、よって、スタイルシート内の文字列を誤って文字表示してしまうエラーが防げるからです。

外部スタイルシートをHTMLから呼び出す場合でも、CSSを呼び出すためのタグを同様にhead要素の中に入れるのが望ましいとされています。


もしHTML4を使う場合でも、この構成にするのが望ましいとされています。(というか、もともとHTML4時代から、この構成が望ましいとされている認識が、HTML5時代でも引き続き、受け継がれている。)


HTML4の場合

HTML4では

<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">

</style>

の2つを入力します。


基礎

style属性

style属性を使うと、それぞれのhtmlタグに個別にスタイルを指定することもできます。

<p style="color:red">文字色:赤</p>
結果

文字色:赤

解説

ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。

style要素

特定の HTML要素すべてにスタイルを指定したい場合は、style要素 で まとめて行うことができます。次の例は、すべての <p> タグに style="color:red" を指定した事になります。

<head>
:
途中略
:
    <style type="text/css">
        <!--
        p { color: red; }
        -->
    </style>
</head>
<body>
    <p>文字色その1</p>
     :
    途中略
     :
    <p>文字色その2</p>
</body>
表示例

文字色その1


途中略

文字色その2

解説

style要素に対応していないユーザーエージェントのために、style要素の中をコメントアウトすることもあります。

ここで、CSSのp { color:red }となっていますが、このうち、最初のpセレクタcolorプロパティredといいます。

つまり、

セレクタ{プロパティ : 値}

です。

セレクタ{
    プロパティ : 値
}

のように改行する場合も、よくあります。

たとえば

p { 
    color: red; 
}

のように書く場合もあります。


プロパティと値は波カッコ { } でククられます。

プロパティと値のあいだにコロン「:」で区切られます

値のあとにセミコロン「;」を使い、そのプロパティと値の宣言が終わったことになります。

プロパティと値が1つだけなら、セミコロンが無くても動作しますが、しかし後から再利用する場合などを考えて、IT業界の慣習としては1つの場合でもセミコロンを加えておくのが一般的です[1]


個別のHTML要素にスタイルを指定することもできますが、「意味と見た目の分離」、「全体でスタイルを統一する」、「再利用性を高める」などの観点から、CSSはまとめて書くことが推奨されています。

外部スタイルシート

さらに、CSSだけを別のファイルに書くこともできます。例えば、foo.cssに、

p { color:red }

とだけ書いておいて、HTML側でこのファイルを、<link>要素を使って、

<head>
      :
    途中略
      :
<link rel="stylesheet" href="foo.css" type="text/css" />
</head>
<body>
    <p>文字色その1</p>
     :
    途中略
     :
    <p>文字色その2</p>
</body>

のように読み込む指定をしても、


文字色その1


途中略

文字色その2

のようにスタイルが適用されます。
または、CSS本文中に

@import url(foo.css);

のように記述することでも、同じ効果が得られます。
こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。

書式

直接style属性で書く場合を除いて、CSSは以下のような書式になっています(角カッコ内は省略できるものです)。

/* コメント */
セレクタ[, セレクタ…] {プロパティ: 値 [; プロパティ: 値…]}
[セレクタ {プロパティ: 値}…]

さっきの例では、pセレクタcolorプロパティredです。1つのセレクタについて、プロパティと値の組を複数指定することが可能で、その間はセミコロンで区切ります(C言語など違って、最後の値の後にセミコロンを必ず付ける必要はありません)。また、コンマで区切って、複数のセレクタに対して同じスタイルを適用することもできます。

/**/ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。

セレクタ

ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。

タイプセレクタ

セレクタとして要素名を書くと、文書に登場するその要素全てにスタイルを適用します。先ほどのp { color:red }でも、pがこのタイプセレクタで、文書中のp要素すべてに適用されます。

クラスセレクタ

htmlのclass属性をセレクタにすることもできます。class属性をセレクタにすることをクラスセレクタ( classセレクタ )といいます。クラスセレクタの指定方法は .クラス名という書式になっています。ピリオド(.)のあとにクラス名をつけて、セレクタを記述します。


これは、あるクラスが指定された要素にだけスタイルを適用します。HTML側ではクラスはなんらかのタグ内でclass="クラス名"のように、class属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、divspan要素で囲んで、それらにclass属性を付けてください。

また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、要素名.クラス名とすれば、両方一致するものにだけ適用されます。

<head>
      :
    途中略
      :
    <style type="text/css">
        <!--
        .example1 { color:blue }
        em.example2 { color:red }
        -->
    </style>
</head>
<body>
    <p class="example1">クラスのテスト</p>
     :
    途中略
     :
    <p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。
    <em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p>
</body>

と入力すると、


クラスのテスト

 :
途中略
 :

クラスのない部分。ここだけクラスあり。ここは元通り。 emにクラスを適用。同じクラスでも、spanには適用外。


のような表示になります。

IDセレクタ

このセレクタは#IDという形になっています。これは、あるIDが指定された要素にだけスタイルを適用します。HTMLの場合、クラスはid="ID"と、id属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、divspan要素で囲んで、それらにid属性を付けてください。

さっきのクラスセレクタと重複するように見えますが、最大の違いは同じ文書で重複するIDを付けてはいけないということです。そういうわけで、ふつうは#IDで足りますが、要素名#IDとしても問題はありません(別の要素がそのIDを持つ場合、スタイルは適用されません)。

子孫セレクタ

XMLやHTMLでは、<a><b><c></c></b></a>のように要素が入れ子になっていますが、これを親子関係になぞらえて、「abの親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。

セレクタ1 セレクタ2」というように、2つのセレクタを空白で区切って書くと、「セレクタ1の子孫に当たるセレクタ2」という意味になります。セレクタ1セレクタ2にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「id="main"div要素の中にある、class="hoge"の要素」という場合、「div#main .hoge」というように指定できます。また、「セレクタ1 セレクタ2 セレクタ3」のように、多段階で指定することも可能です。

さらに、「セレクタ1 > セレクタ2」のように、2つのセレクタの間に>を入れると、「セレクタ1の直接の子要素であるセレクタ2」という意味になって、孫要素以下には一致しなくなります。

例えば、

<head>
      :
    途中略
      :
    <style type="text/css">
        <!--
        .example1 span { color:blue }
        #id2 > em { color:red }
        -->
    </style>
</head>
<body>
    <p class="example1">ここは装飾なし。<span>ここは子要素。</span>
    <em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p>
     :
    途中略
     :
    <p id="id2">ここは装飾なし。<em>子要素には適用される。</em>
    <span>別の子要素。<em>孫要素には適用されない。</em></span></p>
</body>

と入力すると、


ここは装飾なし。ここは子要素。子供は別の要素だけど、孫要素には適用される。

 :
途中略
 :

ここは装飾なし。子要素には適用される。別の子要素。孫要素には適用されない。


のような表示になります。

兄弟セレクタ

先ほどは親子でしたが、<a><b></b><c></c></a>でのbcのように、親が共通な要素は「兄弟要素」と呼ばれます。この兄弟関係を使ってセレクタで指定することもできます。

セレクタ1 ~ セレクタ2
セレクタ1以降の兄弟要素であるセレクタ2セレクタ1自身は一致しません
セレクタ1 + セレクタ2
セレクタ1の直後にある兄弟要素であるセレクタ2

もちろん、セレクタ1セレクタ2には何を指定してもかまわないので、h1 ~ *とすれば、h1要素以降の兄弟要素がすべて選択されます。

属性セレクタ

要素だけでなく、その属性をセレクタの選択に使うことも可能です。

属性セレクタの指定法
指定方法 選択されるもの 利用例
セレクタ[属性名] セレクタに一致するものの中で属性名という属性を持ったもの
セレクタ[属性名="値"] セレクタに一致するものの中で、属性名であるもの <input>の、特定の種類に一致させる
セレクタ[属性名~="値"] セレクタに一致するものの中で、属性名が空白区切りでを含むもの
セレクタ[属性名|="値"] セレクタに一致するものの中で、属性名値-で始まるもの 主にlang属性に適用される


全称セレクタ

セレクタとして*を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには継承というシステムがあるので、属性によってはbodyに適用するだけでいい場合もあります。

  1. ^ 服部雄樹『HTML&CSSとWebデザインが 1冊できちんと身につく本』、2019年5月7日 初版 第5刷発行、89ページ