Wikibooks

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

履歴の双方向閲覧
← 古い編集
削除された内容 追加された内容
ビジュアルウィキテキスト
Ef3 (トーク | 投稿記録)
7,135 回編集
→‎HTMLに直接CSSを書き込む方法とその利用例: HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。 <h1 style="color: red; font-weight: bold;">Hello World!</h1> このように、要素の開始タグにstyle属性を追加し、値としてスタイルを指定します。複数のスタイルを指定する場合は、セミコロン（;）で区切って指定します。 また、複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。 <!DOCTYPE html> <html> <head> <title>Example</title> <style> h1 { color: red; font-weight: bold; } </style> </hea
タグ: 2017年版ソースエディター
Ef3 (トーク | 投稿記録)
7,135 回編集
→‎外部スタイルシート: 外部スタイルシートを使う場合は、HTMLファイルとは別にCSSファイルを作成し、それをHTMLファイルから呼び出します。これにより、同じCSSスタイルを複数のHTMLファイルで使い回すことができるため、メンテナンス性やスタイルの統一性が向上します。 まず、CSSファイルを作成します。拡張子は.cssです。以下の例では、style.cssという名前で保存しています。 style.css body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } 次に、HTMLファイルからCSSファイルを呼び出します。以下の例では、index.htmlという名前で保存しています。 index.html <!DOCTYPE html> <html> <head> <title>外部スタイルシートを使う例</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
タグ: 2017年版ソースエディター
 
1 行
== HTMLに直接CSSを書き込む方法とその利用例 ==
 
=== style属性 ===
HTMLに直接CSSを書き込む場合、style属性を使用して要素ごとにスタイルを指定することができます。以下は、例としてh1要素に赤い文字色と太字を指定する場合のコードです。
 
:<syntaxhighlight lang=html5>
<h1 style="color: red; font-weight: bold;">Hello World!</h1>
</syntaxhighlight>
 
このように、要素の開始タグにstyle属性を追加し、値としてスタイルを指定します。複数のスタイルを指定する場合は、セミコロン（;）で区切って指定します。
また、複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。
 
=== style要素 ===
<syntaxhighlight lang=html5>
複数の要素に同じスタイルを適用する場合は、style要素を使用してCSSを記述することもできます。以下は、全てのh1要素に赤い文字色と太字を指定する場合のコードです。
 
:<syntaxhighlight lang=html5>
<!DOCTYPE html>
<html>
30 ⟶ 34行目:
このように、head要素内にstyle要素を記述し、その中にセレクタとスタイルを記述します。
この例では、h1セレクタに対してcolorプロパティとfont-weightプロパティを指定しています。このCSSは、全てのh1要素に適用されます。
 
== 基礎 ==
=== style属性 ===
style属性を使うと、それぞれのhtmlタグに個別にスタイルを指定することもできます。
 
<SyntaxHighlight lang="html4strict">
<p style="color:red">文字色：赤</p>
</SyntaxHighlight>
 
;結果
<p style="color:red">文字色：赤</p>
 
;解説
ほとんどの要素に style 属性を指定できますが、既存の要素で丁度囲まれていない部分を指定したい場合は、span要素 や div要素 で囲んでそれに属性を指定します。
 
=== style要素 ===
特定の HTML要素すべてにスタイルを指定したい場合は、style要素 で まとめて行うことができます。次の例は、すべての <code><nowiki><p></nowiki></code> タグに style="color:red" を指定した事になります。
 
<SyntaxHighlight lang="html4strict">
<head>
：
途中略
：
<style type="text/css">
<!--
p { color: red; }
-->
</style>
</head>
<body>
<p>文字色その1</p>
　 ：
途中略
　 ：
<p>文字色その2</p>
</body>
</SyntaxHighlight>
 
;表示例
<p style="color:red">文字色その1</p>
:：<br />
途中略<br />
:：
<p style="color:red">文字色その2</p>
 
;解説
style要素に対応していないユーザーエージェントのために、style要素の中をコメントアウトすることもあります。
 
ここで、CSSの<code>p { color:red }</code>となっていますが、このうち、最初の<code>p</code>を'''セレクタ'''、<code>color</code>を
'''プロパティ'''、<code>red</code>を'''値'''といいます。
 
つまり、
セレクタ{プロパティ : 値}
です。
 
セレクタ{
プロパティ : 値
}
のように改行する場合も、よくあります。
 
たとえば
p {
color: red;
}
のように書く場合もあります。
 
 
プロパティと値は波カッコ { } でククられます。
 
プロパティと値のあいだにコロン「:」で区切られます
 
値のあとにセミコロン「;」を使い、そのプロパティと値の宣言が終わったことになります。
 
プロパティと値が1つだけなら、セミコロンが無くても動作しますが、しかし後から再利用する場合などを考えて、IT業界の慣習としては1つの場合でもセミコロンを加えておくのが一般的です<ref> 服部雄樹『HTML&CSSとWebデザインが 1冊できちんと身につく本』、2019年5月7日 初版 第5刷発行、89ページ </ref>。
 
 
個別のHTML要素にスタイルを指定することもできますが、「意味と見た目の分離」、「全体でスタイルを統一する」、「再利用性を高める」などの観点から、CSSはまとめて書くことが推奨されています。
 
=== 外部スタイルシート ===
外部スタイルシートを使う場合は、HTMLファイルとは別にCSSファイルを作成し、それをHTMLファイルから呼び出します。これにより、同じCSSスタイルを複数のHTMLファイルで使い回すことができるため、メンテナンス性やスタイルの統一性が向上します。
さらに、CSSだけを別のファイルに書くこともできます。例えば、<code>foo.css</code>に、
 
まず、CSSファイルを作成します。拡張子は<code>.css</code>です。以下の例では、<code>style.css</code>という名前で保存しています。
<SyntaxHighlight lang="css">
p { color:red }
</SyntaxHighlight>
 
;style.css:<syntaxhighlight lang=css>
とだけ書いておいて、HTML側でこのファイルを、<code>&lt;link&gt;</code>要素を使って、
body {
background-color: lightblue;
}
 
h1 {
<SyntaxHighlight lang="html4strict">
color: navy;
<head>
margin-left: 20px;
：
}
途中略
</syntaxhighlight>
：
<link rel="stylesheet" href="foo.css" type="text/css" />
</head>
<body>
<p>文字色その1</p>
　：
途中略
　：
<p>文字色その2</p>
</body>
</SyntaxHighlight>
 
次に、HTMLファイルからCSSファイルを呼び出します。以下の例では、<code>index.html</code>という名前で保存しています。
のように読み込む指定をしても、
;index.html:<syntaxhighlight lang=html5>
<!DOCTYPE html>
<html>
<head>
<title>外部スタイルシートを使う例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>本文のテキストです。</p>
</body>
</html>
</syntaxhighlight>
<code>link</code>要素に<code>rel="stylesheet"</code>と<code>type="text/css"</code>を指定し、<code>href</code>属性にCSSファイルのパスを指定します。上記の例では、CSSファイルのパスが同じディレクトリ内にあるので、<code>style.css</code>というファイル名のみを指定しています。もしCSSファイルが別のディレクトリにある場合は、そのパスを正確に指定する必要があります。
 
このように外部スタイルシートを使うことで、HTMLファイルとCSSファイルを分離することができ、メンテナンス性やスタイルの統一性が向上するとともに、HTMLファイルの読み込み速度も向上します。
 
== セレクター ==
<p style="color:red">文字色その1</p>
CSSでは、どの要素にスタイルを適用するかを指定するために、セレクターと呼ばれるものを使用します。セレクターは、HTML要素の要素名、クラス、ID、属性などを指定して、スタイルを適用する要素を指定します。以下に、セレクターについての詳細を説明します。
:：<br />
途中略<br />
:：
<p style="color:red">文字色その2</p>
 
=== 要素名セレクター ===
のようにスタイルが適用されます。<br>または、CSS本文中に
要素名セレクターは、HTML要素の要素名を指定してスタイルを適用するものです。例えば、以下のようにP要素にスタイルを適用する場合、pを要素名セレクターとして指定します。
<SyntaxHighlight lang="CSS">@import url(foo.css);</SyntaxHighlight>のように記述することでも、同じ効果が得られます。<br>こうすれば、サイト全体で見た目の統一をはかり、さらにそれをまとめて変更することができます。
 
:<syntaxhighlight lang=css>
== 書式 ==
p {
直接<code>style</code>属性で書く場合を除いて、CSSは以下のような書式です（角カッコ内は省略できるものです）。
color: blue;
}
</syntaxhighlight>
 
:<syntaxhighlight lang=html>
/* コメント */
<p>This text will be blue.</p>
セレクタ[, セレクタ…] {プロパティ: 値 [; プロパティ: 値…]}
</syntaxhighlight>
[セレクタ {プロパティ: 値}…]
 
=== クラスセレクター ===
さっきの例では、<code>p</code>が'''セレクタ'''、<code>color</code>が'''プロパティ'''、<code>red</code>が'''値'''です。1つのセレクタについて、プロパティと値の組を複数指定することが可能で、その間はセミコロンで区切ります（C言語など違って、最後の値の後にセミコロンを必ず付ける必要はありません）。また、コンマで区切って、複数のセレクタに対して同じスタイルを適用することもできます。
クラスセレクターは、CSSでクラスを定義し、HTML要素にクラス属性を設定して、スタイルを適用するものです。クラスセレクターは、.で始まるクラス名を指定します。例えば、以下のように.red-textクラスを定義して、P要素にスタイルを適用する場合、.red-textをクラスセレクターとして指定します。
 
:<syntaxhighlight lang=css>
<code>/*</code> と <code>*/</code>ではさまれた部分はコメントとして無視されます。また、コメントや空白、改行は、単語の途中でなければどこに入れてもかまいません。
.red-text {
color: red;
}
</syntaxhighlight>
 
:<syntaxhighlight lang=html>
== セレクタ ==
<p class="red-text">This text will be red.</p>
ここでは、どんなセレクタがあるかを紹介していきます。指定方法を工夫することで、特定の部分にだけ特定のスタイルを適用できます。
</syntaxhighlight>
 
=== タイプIDセレクター ===
IDセレクタとして要素名を書くとーは、文書に登場するそのHTML要素全てにID属性を設定して、スタイルを適用します。先ほどの<code>p { color:red }</code>でるも、<code>p</code>がこのタイプです。IDセレクターは、#で始まるID名を指定します。例えば、文書中以下の<code>p</code>ように#header IDを指定して、H1要素すべてにスタイルを適用されする場合、#headerをIDセレクターとして指定します。
 
:<syntaxhighlight lang=css>
=== クラスセレクタ ===
#header {
htmlのclass属性をセレクタにすることもできます。class属性をセレクタにすることをクラスセレクタ( classセレクタ )といいます。クラスセレクタの指定方法は <code>.クラス名</code>という書式です。ピリオド(.)のあとにクラス名をつけて、セレクタを記述します。
background-color: blue;
}
</syntaxhighlight>
 
:<syntaxhighlight lang=html>
<h1 id="header">This is a header.</h1>
</syntaxhighlight>
 
=== 子孫セレクター ===
これは、ある'''クラス'''が指定された要素にだけスタイルを適用します。HTML側ではクラスはなんらかのタグ内で<code>class="クラス名"</code>のように、<code>class</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>class</code>属性を付けてください。
子孫セレクターは、セレクターを階層的に指定して、スタイルを適用するものです。例えば、以下のようにdiv要素の中のp要素にスタイルを適用する場合、div pを子孫セレクターとして指定します。
 
:<syntaxhighlight lang=css>
また、同じクラスの要素は文書中にいくつあってもかまいません。特定の要素に付いたクラスにだけ適用させる場合には、<code>要素名.クラス名</code>とすれば、両方一致するものにだけ適用されます。
div p {
color: green;
}
</syntaxhighlight>
 
:<SyntaxHighlightsyntaxhighlight lang="html4strict"html>
<headdiv>
<p>This text will be green.</p>
：
</div>
途中略
</syntaxhighlight>
：
<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>
</SyntaxHighlight>
 
=== 直接子セレクター ===
と入力すると、
直接子セレクターは、「>」を用いて親要素と直接的に子要素を指定する方法です。このセレクターは、指定した親要素の直下にある子要素のみを選択します。
 
例えば、以下のようにHTMLがあったとします。
 
:<syntaxhighlight lang=html>
<p style="color:blue">クラスのテスト</p>
<div class="parent">
　：<br>
<h2>タイトル</h2>
途中略<br>
<ul>
　：
<li>項目1</li>
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
<li>項目2</li>
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
</ul>
</div>
</syntaxhighlight>
この場合、直接子セレクターを使用して、DIV要素の直下にあるH2要素を選択する場合は、以下のように記述します。
 
:<syntaxhighlight lang=css>
.parent > h2 {
color: red;
}
</syntaxhighlight>
 
=== 相対セレクター ===
のような表示になります。
相対セレクターは、他の要素を基準にして指定する方法です。一つの要素が別の要素に関連している場合に有効なセレクターです。
 
例えば、以下のようにHTMLがあったとします。
=== IDセレクタ ===
このセレクタは<code>#ID</code>という形です。これは、ある'''ID'''が指定された要素にだけスタイルを適用します。HTMLの場合、クラスは<code>id="ID"</code>と、<code>id</code>属性として与えます。なお、指定したい部分にぴったりな要素がない場合は、<code>div</code>や<code>span</code>要素で囲んで、それらに<code>id</code>属性を付けてください。
 
:<syntaxhighlight lang=html>
さっきのクラスセレクタと重複するように見えますが、最大の違いは'''同じ文書で重複するIDを付けてはいけない'''ということです。そういうわけで、ふつうは<code>#ID</code>で足りますが、<code>要素名#ID</code>としても問題はありません（別の要素がそのIDを持つ場合、スタイルは適用されません）。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li class="active">項目4</li>
<li>項目5</li>
</ul>
</syntaxhighlight>
この場合、相対セレクターを使用して、LI要素の4つ目の要素を選択し、背景色を変える場合は、以下のように記述します。
 
:<syntaxhighlight lang=css>
=== 子孫セレクタ ===
.active ~ li {
XMLやHTMLでは、<code>&lt;a&gt;&lt;b&gt;&lt;c&gt;&lt;/c&gt;&lt;/b&gt;&lt;/a&gt;</code>のように要素が入れ子ですが、これを親子関係になぞらえて、「<code>a</code>は<code>b</code>の親要素」とか、「cはaの孫要素」というようにいいます。CSSのセレクタにもこの親子関係を使えます。
background-color: gray;
 
}
「<code>セレクタ1 セレクタ2</code>」というように、2つのセレクタを空白で区切って書くと、「<code>セレクタ1</code>の子孫に当たる<code>セレクタ2</code>」という意味になります。<code>セレクタ1</code>や<code>セレクタ2</code>にはタイプセレクタに限らず、どんなセレクタを使ってもかまいません。「<code>id="main"</code>の<code>div</code>要素の中にある、<code>class="hoge"</code>の要素」という場合、「<code>div#main .hoge</code>」というように指定できます。また、「<code>セレクタ1 セレクタ2 セレクタ3</code>」のように、多段階で指定することも可能です。
</syntaxhighlight>
 
さらに、「<code>セレクタ1 &gt; セレクタ2</code>」のように、2つのセレクタの間に<code>&gt;</code>を入れると、「<code>セレクタ1</code>の直接の子要素である<code>セレクタ2</code>」という意味になって、孫要素以下には一致しなくなります。
=== 擬似クラス ===
 
擬似クラスは、要素の状態を指定するためのセレクターです。例えば、リンクが訪問済みかどうか、マウスが要素の上にあるかどうかなどの状態を指定することができます。
例えば、
 
<SyntaxHighlight lang="html4strict">
<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>
</SyntaxHighlight>
 
と入力すると、
 
 
<p class="example1">ここは装飾なし。<span style="color:blue">ここは子要素。</span><em>子供は別の要素だけど、<span style="color:blue">孫要素には適用される。</span></em></p>
　：<br>
途中略<br>
　：
<p id="id2">ここは装飾なし。<em style="color:red">子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
 
 
のような表示になります。
 
例えば、以下のようにHTMLがあったとします。
=== 兄弟セレクタ ===
先ほどは親子でしたが、<code>&lt;a&gt;&lt;b&gt;&lt;/b&gt;&lt;c&gt;&lt;/c&gt;&lt;/a&gt;</code>での<code>b</code>と<code>c</code>のように、親が共通な要素は「兄弟要素」と呼ばれます。この兄弟関係を使ってセレクタで指定することもできます。
 
:<syntaxhighlight lang=html>
;<code>セレクタ1 ~ セレクタ2</code>:<code>セレクタ1</code>以降の兄弟要素である<code>セレクタ2</code>。<code>セレクタ1</code>'''自身は一致しません'''。
<a href="#">リンク</a>
;<code>セレクタ1 + セレクタ2</code>:<code>セレクタ1</code>の直後にある兄弟要素である<code>セレクタ2</code>。
</syntaxhighlight>
この場合、リンクを訪問済みの状態で表示する場合は、以下のように記述します。
 
:<syntaxhighlight lang=css>
もちろん、<code>セレクタ1</code>や<code>セレクタ2</code>には何を指定してもかまわないので、<code>h1 ~ *</code>とすれば、<code>h1</code>要素以降の兄弟要素がすべて選択されます。
a:visited {
color: gray;
}
</syntaxhighlight>
 
=== 属性CSSのセレクターの一覧表 ===
要素だけでなく以下は、そCSSの属性をセレクターの選択種類を名前、書式、説明に使うこ分けてまとも可能めた表です。
:{| class="wikitable"
|+ 属性CSSのセレクターの指定法一覧
!名前
! 指定方法 !! 選択されるもの !! 利用例
!書式
!説明
|-
|要素セレクター
| <code>セレクタ[属性名]</code> || <code>セレクタ</code>に一致するものの中で<code>属性名</code>という属性を持ったもの ||
|<code>要素名</code>
|指定した要素名に一致する要素を選択する。
|-
|IDセレクター
| <code>セレクタ[属性名="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が<code>値</code>であるもの || &lt;input&gt;の、特定の種類に一致させる
|<code>#id名</code>
|指定したid属性値に一致する要素を選択する。
|-
|クラスセレクター
| <code>セレクタ[属性名~="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が空白区切りで<code>値</code>を含むもの ||
|<code>.クラス名</code>
|指定したclass属性値に一致する要素を選択する。
|-
|属性セレクター
| <code>セレクタ[属性名&#124;="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が<code>値-</code>で始まるもの || 主に<code>lang</code>属性に適用される
|<code>[属性名=属性値]</code>
|指定した属性名と属性値に一致する要素を選択する。
|-
|複合セレクター
|<code>要素名.クラス名</code><hr><code>要素名#id名</code>
|要素名、クラス名、id属性値を組み合わせて要素を選択する。
|-
|子孫セレクター
|<code>祖先要素 子要素</code>
|指定した祖先要素内にある子孫要素を選択する。
|-
|直接子セレクター
|<code>親要素 > 子要素</code>
|指定した親要素の直接子となる子要素を選択する。
|-
|隣接兄弟セレクター
|<code>要素1 + 要素2</code>
|指定した要素1の直後にある要素2を選択する。
|-
|汎兄弟セレクター
|<code>要素1 ~ 要素2</code>
|指定した要素1の後にある要素2をすべて選択する。
|-
|疑似クラス
|<code>:クラス名</code>
|要素が特定の状態にある場合にスタイルを適用する。
|}
注意：上記表には、全てのセレクター種類が含まれているわけではありません。また、複数のセレクターを組み合わせることで、より複雑な選択を行うことができます。
 
 
=== 全称セレクタ ===
セレクタとして<code>*</code>を使うと、その文書中にあるすべての要素にスタイルを適用します。なお、CSSには[[CSS/継承|継承]]というシステムがあるので、属性によっては<code>body</code>に適用するだけでいい場合もあります。
 
[[Category:CSS|きしゆつ]]
"https://ja.wikibooks.org/wiki/CSS/記述" より作成