前回は、HTMLとCSSの役割、バリデータツールのご紹介、CSS装飾の仕組み、
CSSの基本の形、CSSに大事な基本のセレクタを記載いたしました。
予想はしておりましたが、やはり一からご説明となりますと、
メチャクチャ長くなりそうですがッ、基本をしっかり押さえれば、
多くの皆様に見て頂けるホームページを
作成することが出来るようになるかと思いますので、
ここはじっくりと記載していきます…。
それでは今回はッ、
・良く利用されるセレクタ名
・セレクタの組み合わせ
上記についてご説明を記載していきたいと思います。
前回も多少ふれましたがッ、IDとcalssセレクタは、どちらもHTMLを作成する際に
idまたはclass属性値として付けた名前を使用します。
idとclassの違いは、id名は特定の要素に付けられる固有の名前なのに対して、
class名は複数の要素に付けることが許されている、という点になります。
なので、ひとつのHTML文章の中で同じclass名が重複するとこはありますが、
id名が重複することがあってはイケません…。
たとえば、共通のスタイルを指定したいブロックがページ内に複数あれば、
それぞれのブロックにclass名を付け、ヘッダーやフッターなど
ページ内に一度しか登場しないブロックには、id名を付けます。
また、以前どこかで、
「面倒だから、すべてclassで指定しています！」
と記載されていることを見たことがありますが、
コレはページ作成に好ましくありません。
id名を付ける利点としては、コンピューターがidとの関連するCSSを
class名に比べ早く処理することが可能です。
一方、class名はid名に比べ処理速度が劣りますが、
複数回目のclass名の処理は、id名より早く処理を行うことになります。
結論といたしましては、適材適所にid名とclass名を記載するのが
もっとも記載方法としては良いとされています。
id名とclass名のマークアップを行う際は、
上記の事を踏まえ、記載するようおすすめいたします。
それでは一覧にてid名とclass名でよく使われる単語をご紹介。
| 名前のサンプル | 使うところの例 |
|---|---|
| 全体 | |
| container、page | 全体を囲む |
| wrapper、wrap | 全体または特定の範囲を囲む |
| 大まかな範囲 | |
| head | ヘッダー |
| foot | フッター |
| navigation | ナビゲーション |
| globalNav、gNav | グローバルナビゲーション |
| headerNav、headNav | ヘッダーナビゲーション |
| footerNav、footNav | フッターナビゲーション |
| content、contents | コンテンツ |
| main | メインコンテンツ |
| sub | サブコンテンツ |
| extra | 臨時のコンテンツ |
| 範囲 | |
| field、fields | 分野 |
| division | 区分 |
| inner | 内側 |
| 具体的な範囲 | |
| entry、entries | エントリー |
| comment、comments | コメント |
| lead | 案内 |
| outline | 概要 |
| summary、abstract | 要約 |
| description | 説明 |
| topic、topics | 話題 |
| spotlight | 注目情報 |
| pickup | 選び出す |
| search | 検索ボックス |
| profile | プロフィール |
| 区切り線 | |
| separator | 区切り線 |
| メニュー | |
| menu | メニュー |
| nl、navLink | ナビゲーションリンク |
| topicPath | トピックパス（階層リンク） |
| tabs | タブメニュー |
| paging | ページ切り替えメニュー |
| siteInfo | サイト情報に関連するメニュー |
| guide | サイト案内に関連するメニュー |
| assist | 補助的なメニュー |
| option、options | オプションメニュー |
| リンク・ボタン | |
| next | 次へ |
| prev、previous | 前へ |
| return | 戻る |
| pageTop | ページトップへ |
| more | もっと見る |
| skip | 飛ばす |
| upload | アップロード |
| choice | 選ぶ |
| ヘッダ周辺 | |
| title | タイトル |
| siteTitle | サイトタイトル |
| logo | ロゴ |
| category | カテゴリー |
| catch | キャッチフレーズ |
| slogan | スローガン |
| フッタ周辺 | |
| copyright | コピーライト |
| お知らせ・メッセージ | |
| info、information | お知らせ |
| pastInfo | 過去のお知らせ |
| news | ニュース |
| pastNews | 過去のニュース |
| newsFlash | ニュース速報 |
| spotNews | 短いニュース |
| date | 日付 |
| update | 更新情報、更新日 |
| history | 更新履歴、沿革 |
| msg、message | メッセージ |
| リスト | |
| list | リスト |
| item、items | 項目 |
| photoList | 写真のリスト |
| goodsList | 商品のリスト |
| 注意書き | |
| attention | 注意 |
| warning | 警告 |
| instructions | 操作方法 |
| 特定の項目 | |
| first（最初）、last（最後） | 最初の項目、最後の項目 |
| odd（奇数）、even（偶数） | 奇数列、偶数列 |
| 隠す | |
| invisible、hidden、hide、none | 非表示 |
| 広告 | |
| pr、ad、ads | 広告 |
| クリア | |
| clear、clearFix | フロートのクリア |
スタイルを指定する要素のすべてにid名やclass名を付けようとすると、
上記の一覧表を参考にして、名前を考えるだけでも大変です。
そこで基本のセレクタで紹介したセレクタを組み合わせることで、
すべてに名前を付けなくとも、任意の要素を細かく指定することが出来ます。
言葉で説明するよりも、実際のソースコードを見て頂いた方が、
ご理解いただけるかと思います。
下記ソースコードを私の大好きな「ExcelVBAの神様」より…。
/*------ セレクタの組み合わせサンプルスースコード --------*/
<h1>ExcelVBAの神様</h1>
<h2>真二、変数に腰を抜かす</h2>
<p>ふと顔を上げると、水岡遥香と目があった。</p>
<p>彼女は、軽く笑ってくれた。</p>
<p>ささやかではあるが幸福感に包まれたそのとき、<br>
<em>ボクを呼ぶ声がした。</em></p>
<h2>真二、条件分岐と繰り返しVBAのすごさを知る</h2>
/*------ 以下スタイルシートの説明 --------*/
/*-- ①CSS「子孫セレクタ」 --*/
p em {
color: red;
}
/*-- ②CSS「子セレクタ」 --*/
p>em {
color: green;
}
/*-- ③CSS「隣接セレクタ」 --*/
h2+p {
color: blue;
}
/*-- ④CSS「複数セレクタ」 --*/
h1,h2 {
color; orange;
}
| セレクタの組み合わせ | 働き | 記述例 |
|---|---|---|
| ①CSS「子孫セレクタ」 | 親要素ｐに含まれるemを指す | p em {color: red;} |
| ②CSS「子セレクタ」 | 親要素ｐの直接の子要素emを指す | p>em {color: green;} |
| ③CSS「隣接セレクタ」 | 兄要素h2に対し、その直後の弟要素ｐを指す | h2+p {color: blue;} |
| ④CSS「複数セレクタ」 | 同一のスタイルを複数の要素に適用 | h1,h2 {color; orange;} |
セレクタの組み合わせ、一覧で見てみますと簡単ですねッ…。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
