「CSS/記述」の版間の差分
M cat sort |
ソースコードのインデント。インデント無しでは可読性が悪い。ついでに冒頭のhtml4時代の記述をhtml5時代の記述に更新。あと SyntaxHighlight 化。 |
||
1 行 | 1 行 | ||
== 準備 == |
== 準備 == |
||
まずスタイルシートを入力する前に、 |
まずスタイルシートを入力する前に、 |
||
⚫ | |||
⚫ | |||
⚫ | |||
</SyntaxHighlight> |
|||
と入力します。 |
|||
このタグはスタイルシート(CSS) に絶対に必要です。もし、これが無いと、スタイルシートとしては動作しないです。 |
|||
なぜならwebブラウザは <code><nowiki><style></nowiki></code> から <code><nowiki></style></nowiki></code> までの間に書いた内容を、 CSS 形式のスタイルシートとして扱うからです。 |
|||
これでスタイルシートを入力する準備ができました。 |
|||
さて、スタイルシート(CSS)のファイルと HTMLファイルとは 別ファイルにしても動作は可能です(「外部スタイルシート」といい、拡張子は「.css」になります。後述)。いっぽうHTMLファイル中にCSSを含めることも可能です。 |
|||
もしHTML 文書中にスタイルシートを書く場合は、慣習的に |
|||
<SyntaxHighlight lang="html5"> |
|||
<head> |
|||
<style type="text/css"> |
|||
</style> |
|||
</head> |
|||
</SyntaxHighlight> |
|||
という構成にするのが望ましいとされており、つまり、head 要素の中<small>(<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間)</small>にstyle要素を置くのが望ましいとされています。 |
|||
⚫ | |||
この構成が望ましい理由としては、互換性などの理由で万が一スタイルシートを認識しない場合でも、HTMLの仕様としてhead内は非表示なので、よって、スタイルシート内の文字列を誤って文字表示してしまうエラーが防げるからです。 |
|||
外部スタイルシートをHTMLから呼び出す場合でも、CSSを呼び出すためのタグを同様にhead要素の中に入れるのが望ましいとされています。 |
|||
もしHTML4を使う場合でも、この構成にするのが望ましいとされています。(というか、もともとHTML4時代から、この構成が望ましいとされている認識が、HTML5時代でも引き続き、受け継がれている。) |
|||
;HTML4の場合 |
|||
HTML4では |
|||
⚫ | |||
<meta http-equiv="Content-Style-Type" content="text/css"> |
<meta http-equiv="Content-Style-Type" content="text/css"> |
||
8 行 | 49 行 | ||
</style> |
</style> |
||
</SyntaxHighlight> |
|||
</source> |
|||
の2つを入力します。 |
|||
の2つを入力します。 HTML 文書中にスタイルシートを書く場合は、通常、 head 要素の中<small>(<code><nowiki><head></nowiki></code> から <code><nowiki></head></nowiki></code> までの間)</small>にこれを置きます。<code><nowiki><style></nowiki></code> から <code><nowiki></style></nowiki></code> までの間に書いた内容を、ブラウザは CSS 形式のスタイルシートとして扱います。これでスタイルシートを入力する準備ができました。 |
|||
ただし、この記述はHTML5では、以下のように省略することができます。 |
|||
⚫ | |||
⚫ | |||
⚫ | |||
</source> |
|||
== 基礎 == |
== 基礎 == |
||
=== style属性 === |
=== style属性 === |
||
とても簡単な記述方法として、HTML要素に以下のように指定する方法が簡単です。 |
|||
< |
<SyntaxHighlight lang="html4strict"> |
||
<p style="color:red">文字色:赤</p> |
<p style="color:red">文字色:赤</p> |
||
</SyntaxHighlight> |
|||
</source> |
|||
<p style="color:red">文字色:赤</p> |
<p style="color:red">文字色:赤</p> |
||
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。 |
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。 |
||
=== style要素 === |
=== style要素 === |
||
特定の HTML要素 |
特定の HTML要素すべてにスタイルを指定したい場合は、style要素 で まとめて行うことができます。次の例は、すべての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。 |
||
< |
<SyntaxHighlight lang="html4strict"> |
||
<head> |
<head> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<style type="text/css"> |
<style type="text/css"> |
||
<!-- |
<!-- |
||
p { color:red } |
p { color: red; } |
||
--> |
--> |
||
</style> |
</style> |
||
</head> |
</head> |
||
<body> |
<body> |
||
<p>文字色その1</p> |
<p>文字色その1</p> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<p>文字色その2</p> |
<p>文字色その2</p> |
||
</body> |
</body> |
||
</SyntaxHighlight> |
|||
</source> |
|||
;表示例 |
|||
<p style="color:red">文字色その1</p> |
<p style="color:red">文字色その1</p> |
||
::<br /> |
::<br /> |
||
66 行 | 104 行 | ||
さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、 |
さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、 |
||
< |
<SyntaxHighlight lang="css"> |
||
p { color:red } |
p { color:red } |
||
</SyntaxHighlight> |
|||
</source> |
|||
とだけ書いておいて、HTML側でこのファイルを、<code><link></code>要素を使って、 |
とだけ書いておいて、HTML側でこのファイルを、<code><link></code>要素を使って、 |
||
< |
<SyntaxHighlight lang="html4strict"> |
||
<head> |
<head> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<link rel="stylesheet" href="foo.css" type="text/css" /> |
<link rel="stylesheet" href="foo.css" type="text/css" /> |
||
</head> |
</head> |
||
<body> |
<body> |
||
<p>文字色その1</p> |
<p>文字色その1</p> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<p>文字色その2</p> |
<p>文字色その2</p> |
||
</body> |
</body> |
||
</SyntaxHighlight> |
|||
</source> |
|||
のように読み込む指定をしても、 |
のように読み込む指定をしても、 |
||
<p style="color:red">文字色その1</p> |
<p style="color:red">文字色その1</p> |
||
97 行 | 136 行 | ||
のようにスタイルが適用されます。<br>または、CSS本文中に |
のようにスタイルが適用されます。<br>または、CSS本文中に |
||
< |
<SyntaxHighlight lang="CSS">@import url(foo.css);</SyntaxHighlight>のように記述することでも、同じ効果が得られます。<br>こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。 |
||
== 書式 == |
== 書式 == |
||
124 行 | 163 行 | ||
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。 |
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。 |
||
< |
<SyntaxHighlight lang="html4strict"> |
||
<head> |
<head> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<style type="text/css"> |
<style type="text/css"> |
||
<!-- |
<!-- |
||
.example1 { color:blue } |
.example1 { color:blue } |
||
em.example2 { color:red } |
em.example2 { color:red } |
||
--> |
--> |
||
</style> |
</style> |
||
</head> |
</head> |
||
<body> |
<body> |
||
<p class="example1">クラスのテスト</p> |
<p class="example1">クラスのテスト</p> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。 |
<p>クラスのない部分。<span class="example1">ここだけクラスあり。</span>ここは元通り。 |
||
<em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p> |
<em class="example2">emにクラスを適用。</em><span class="example2">同じクラスでも、spanには適用外。</span></p> |
||
</body> |
</body> |
||
</SyntaxHighlight> |
|||
</source> |
|||
と入力すると、 |
と入力すると、 |
||
171 行 | 210 行 | ||
例えば、 |
例えば、 |
||
< |
<SyntaxHighlight lang="html4strict"> |
||
<head> |
<head> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<style type="text/css"> |
<style type="text/css"> |
||
<!-- |
<!-- |
||
.example1 span { color:blue } |
.example1 span { color:blue } |
||
#id2 > em { color:red } |
#id2 > em { color:red } |
||
--> |
--> |
||
</style> |
</style> |
||
</head> |
</head> |
||
<body> |
<body> |
||
<p class="example1">ここは装飾なし。<span>ここは子要素。</span> |
<p class="example1">ここは装飾なし。<span>ここは子要素。</span> |
||
<em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p> |
<em>子供は別の要素だけど、<span>孫要素には適用される。</span></em></p> |
||
: |
: |
||
途中略 |
途中略 |
||
: |
: |
||
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em> |
<p id="id2">ここは装飾なし。<em>子要素には適用される。</em> |
||
<span>別の子要素。<em>孫要素には適用されない。</em></span></p> |
<span>別の子要素。<em>孫要素には適用されない。</em></span></p> |
||
</body> |
</body> |
||
</SyntaxHighlight> |
|||
</source> |
|||
と入力すると、 |
と入力すると、 |
2020年5月5日 (火) 00:35時点における版
準備
まずスタイルシートを入力する前に、
<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属性
とても簡単な記述方法として、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
を値といいます。
個別の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
要素すべてに適用されます。
全称セレクタ
セレクタとして*
を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには継承というシステムがあるので、属性によってはbody
に適用するだけでいい場合もあります。
クラスセレクタ
このセレクタは.クラス名
という形になっています。これは、あるクラスが指定された要素にだけスタイルを適用します。HTMLの場合、クラスはclass="クラス名"
と、class
属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、div
やspan
要素で囲んで、それらに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
属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、div
やspan
要素で囲んで、それらにid
属性を付けてください。
さっきのクラスセレクタと重複するように見えますが、最大の違いは同じ文書で重複するIDを付けてはいけないということです。そういうわけで、ふつうは#ID
で足りますが、要素名#ID
としても問題はありません(別の要素がそのIDを持つ場合、スタイルは適用されません)。
子孫セレクタ
XMLやHTMLでは、<a><b><c></c></b></a>
のように要素が入れ子になっていますが、これを親子関係になぞらえて、「a
はb
の親要素」とか、「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>
でのb
とc
のように、親が共通な要素は「兄弟要素」と呼ばれます。この兄弟関係を使ってセレクタで指定することもできます。
セレクタ1 ~ セレクタ2
セレクタ1
以降の兄弟要素であるセレクタ2
。セレクタ1
自身は一致しません。セレクタ1 + セレクタ2
セレクタ1
の直後にある兄弟要素であるセレクタ2
。
もちろん、セレクタ1
やセレクタ2
には何を指定してもかまわないので、h1 ~ *
とすれば、h1
要素以降の兄弟要素がすべて選択されます。
属性セレクタ
要素だけでなく、その属性をセレクタの選択に使うことも可能です。
指定方法 | 選択されるもの | 利用例 |
---|---|---|
セレクタ[属性名] |
セレクタ に一致するものの中で属性名 という属性を持ったもの |
|
セレクタ[属性名="値"] |
セレクタ に一致するものの中で、属性名 が値 であるもの |
<input>の、特定の種類に一致させる |
セレクタ[属性名~="値"] |
セレクタ に一致するものの中で、属性名 が空白区切りで値 を含むもの |
|
セレクタ[属性名|="値"] |
セレクタ に一致するものの中で、属性名 が値- で始まるもの |
主にlang 属性に適用される
|