CSSの基本step.2
 

CSS実践編:CSSの基本step.2

 

前回は、HTMLとCSSの役割、バリデータツールのご紹介、CSS装飾の仕組み、
CSSの基本の形、CSSに大事な基本のセレクタを記載いたしました。
 

予想はしておりましたが、やはり一からご説明となりますと、
メチャクチャ長くなりそうですがッ、基本をしっかり押さえれば、
多くの皆様に見て頂けるホームページを
作成することが出来るようになるかと思いますので、
ここはじっくりと記載していきます…。
 
それでは今回はッ、
 

・ID、Class:セレクタの違い
・良く利用されるセレクタ名
・セレクタの組み合わせ

 
上記についてご説明を記載していきたいと思います。
 

ID、Class:セレクタの違い

 

前回も多少ふれましたがッ、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「子孫セレクタ」 親要素pに含まれるemを指す p em {color: red;}
②CSS「子セレクタ」 親要素pの直接の子要素emを指す p>em {color: green;}
③CSS「隣接セレクタ」 兄要素h2に対し、その直後の弟要素pを指す h2+p {color: blue;}
④CSS「複数セレクタ」 同一のスタイルを複数の要素に適用 h1,h2 {color; orange;}

 
セレクタの組み合わせ、一覧で見てみますと簡単ですねッ…。

 

とりあえず、今回はここまで…。

 

お仕事のご依頼は↓コチラより…、それではまた次回…。