● スタイルシートの記述補助法あれこれ
前述のスタイルシートの基本３記述には、幾つかの補助的な記述があります。ここではこれらを紹介しておきましょう。
- 特定の範囲内でスタイルを設定する
- このリストは青 ･･･④
- このリストは赤 ･･･⑤
- このリストは規定色 ･･･⑥
- ＩＤでスタイルを細分設定する
- クラスでスタイルを細分設定する
- 状況に応じてスタイルを設定
- スタイルを最優先に設定する
- 複数のスタイルシートを読み込む
- タグの相関関係でスタイルを設定
- 具体的なスタイル記述タグ
スタイルにclass{□.★}やid{□#◆}という識別子を付けて 特定の範囲にスタイルを設定することが出来ます
classは要素が異なれば同じ名前でも使えますが、IDは複数の要素で同じ名前を持つことが出来ません
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html><head> <title>特定の範囲内でスタイルを設定</title> <style type="text/css"> <!-- .back-ki {background-color:yellow;} ･･･① #back-momo {background-color:pink;} ･･･② li.ao {color:blue} ･･･④ li#aka {color:red;} ･･･⑤ --> </style> </head> <body> <h3 class="back-ki">背景黄色</h3> ･･･① <ul><li class="ao">このリストは青 ･･･④ <li id="aka">このリストは赤 ･･･⑤ <li>このリストは規定色</ul> ･･･⑥ <h3 id="back-momo">背景桃色</h3> ･･･② <h3>背景規定色</h3> ･･･③ </body></html> |
|
特定の範囲内でスタイルを設定 - Microsoft････同じタグ要素にＩＤを付けてスタイルに細分設定することが出来ます
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html><head> <title>ＩＤでスタイルを細分設定</title> <style type="text/css"> <!-- #s1{color:aqua;background-color:yellow;} ･･･② p#s2{padding:1em 3em;border:2px dotted red;} ･･･③ --> </style> </head> <body> <p id="s1">スタイル１</p> ･･･② <p id="s2">style２</p> ･･･③ </body> </html> |
|
クラス名を付けてスタイルを定義したり、同じタグ要素を細分設定することが出来ます
[ .** ] のように記述すれば全てのタグに、[ タグ要素 .** ] のように記述すれば、 そのタグ要素に対してスタイルを適用できます。また、クラスを合わせて書くと重複した指定(①+②)ができます。
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html><head> <title>クラスでスタイルを細分設定</title> <style type="text/css"><!-- .s1{font-style:italic;padding-left:2em;} ･･･① p.s2{color:aqua;background-color:yellow;} ･･･② --></style> </head> <body> <div class="s1">スタイルＤ</div> ･･･① <p class="s2">スタイル１</p> ･･･② <p class="s1 s2">スタイルＤ+１</p> ･･･①+② </body></html> |
|
擬似クラス、擬似要素の状況に応じてスタイルを設定することが出来ます。 また⑦のように細分クラスを付けることも出来ます
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html><head> <title>状況に応じてスタイルを設定</title> <style type="text/css"> <!-- h3:first-letter{padding-left:20pt;font-size:18pt;} ･･･① div:first-line {background-color:yellow;} ･･･② a:link {background-color:yellow;color:blue;} ･･･③ a:visited {background-color:lime;color:maroon;} ･･･④ a:active {color:red;} ･･･⑤ a:hover {background-color:aqua;color:fuchsia;} ･･･⑥ a.a7:hover {background-color:silver;} ･･･⑦ --> </style> </head> <body> <h3>擬似クラス・要素に適用</h3> ･･･① <div>擬似クラスや擬似要素については状況に応じて<br> ･･･② スタイルが適用されるようになります</div><br> リンクの例です<br> <a href=s11-inline.html>タグ要素</a>の例<br> ･･･③ <a href=s12-tag.html>スタイルタグ</a>の例<br> ･･･④ <a href=s13-sheet.html>スタイルファイル</a>の例<br>･･･⑥ <a class=a7 href=s23-hani.html>スタイル範囲</a><br>･･･⑦ </body></html> |
サンプルページ |
|||
| ＊擬似(定義済み)クラス/ :link :visited :active :hover 擬似要素/ :first-letter :first-line | ||||
最優先させたいスタイルに !important をつけてインラインスタイルより優先させることが出来ます 優先変更前
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html> <head> <title>スタイルを最優先に設定</title> <style type="text/css"> <!-- p{color:#eeccff;background-color:#33bb99 !important;} ･･･① --> </style> </head> <body> <p style="color:aqua;background-color:yellow;">スタイル１</p> ･･･② <p style="padding:1em 3em;border:2px dotted red;">style２</p> ･･･③ </body> </html> |
|
複数のスタイルシートを@import で読み込んだファイルを使って利用出来ます (@importは他のスタイルより前に置きます)
| HTMLファイル | スタイルシートファイル |
|---|---|
|
<html><head> <title>スタイルファイルで設定</title> <link rel="stylesheet" href="sheet.css" type="text/css"> ･･･① </head> <body> <div>スタイルＷ</div> <span>複数のスタイルシートを読み込む</span> </body></html> |
【ファイル: [sheet.css] 】
･･･①=②+③+α @import url("file01.css"); @import "file02.css"; body {background-color:lightgreen;}
【ファイル: [file01.css] 】
･･･②
【ファイル: [file02.css] 】
･･･③ |
タグの該当関係にあるものに対してだけスタイルを設定することが出来ます
要素の間にカンマ「 , 」があると両要素にスタイルを定義したことになり、意味が異なってきます
| HTMLソース | ブラウザ画面表示 | |||
|---|---|---|---|---|
|
<html><head> <title>タグの相関関係でスタイルを設定</title> <style type="text/css"> <!-- /* 特定の親子関係のある要素タグにスタイルを設定 */ p b {background-color:purple;color:lime;} ･･･① --> </style> </head> <body> <p>この<b>太字は p b の関係</b>から適用され、</p> ･･･① <div>この<b>太字は div b の関係</b>のため不適用</div> </body></html> |
|
タグの具体的な記述はそれ専門のサイトを参考にして下さい。
１．とほほのスタイルシート入門 他のタグ等も含めて、簡潔に紹介されています。
２．スタイルシートリファレンス スタイルシートをリファレンス一覧で紹介されています。
３．スタイルシート例文辞典 多くのスタイルシート例文をタグ記述例と実行例で紹介されています。
４．TAG StyleSheet スタイルシートタグを一覧で紹介されています。