全国5万人が受講している「サイタ」

ホームページ作成・作り方講座

ホームページ作成・作り方講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールホームページ作成講座東京 初心者歓迎ホームページ作成講座 スクールブログ ツリー構造が大...

ツリー構造が大事!CSSの子孫セレクタの話と一気にセレクトする複数セレクタの話

今日は、CSSの子孫セレクタと複数セレクタに関してです。
特に子孫セレクタは、HTMLのツリー構造をしっかり理解していないと、
使いこなす事が出来ないので、しっかり練習しましょう。


■-□-■-□-■-□-■-□-■-□-■
HTMLのツリー構造とは?
■-□-■-□-■-□-■-□-■-□-■
HTMLのタグは、入れ子の構造になる事が多いです。
この入れ子構造を、俗にツリー構造と言います。
例でみてみます。

<div>
<p>テキストテキスト</p>
</div>

この状態は、「divの中にpタグがある」と考えます。
このように、タグは入れ子になっていきます。
また、上記の例の場合、「pタグは、divタグの子要素である」と考えます。
逆に、「divタグは、pタグの親要素である」とも考えます。

このサンプルの場合は、とてもシンプルですが、実際にホームページを作っていくと、
もっと複雑なツリー構造が出来ていきます。


■-□-■-□-■-□-■-□-■-□-■
子孫セレクタとは?
■-□-■-□-■-□-■-□-■-□-■
子孫セレクタは、上記のツリー構造を元にセレクタを書いていきます。
ツリー構造は、タグやid名等を半角スペースで区切って書いていきます。
例えば「divの中のpタグ」だったら、
div p
となります。
「id属性sampleが付加されたタグの中のspanタグ」だったら
#sample span
となります。

例}
HTML
<div>
<p>ここは赤くなる</p>
</div>
<p>ここは赤くならない</p>

CSS
div p{
color:red;
}

上記の様に書いていきます。


■-□-■-□-■-□-■-□-■-□-■
複数セレクタとは?
■-□-■-□-■-□-■-□-■-□-■
同じスタイルを適用したい時に、いちいち1つずつ書いていくのが大変なので、
一気にまとめて記述出来るのが、複数セレクタです。
1つ1つのセレクタを「,」(半角のカンマ)で区切って書いていきます。
例えば、pタグとaタグだったら
p,a
この様に記述します。
三つ以上のセレクタも、一気にセレクト出来ます。それぞれを、半角のカンマで区切ります。
最後の1つは、半角カンマがいらないので注意です。

p,
a,
#sample,
.test,
#hoge p{
color:red;
}

上記の場合は、
pタグとaタグとid属性がsample物と、class属性がtestの物と、id属性がhogeの中のpタグがセレクトされ、
文字が赤となります。

長くなってくると複雑に感じてしまうので、半角カンマの後に改行をいれるとみやすくなります。


■-□-■-□-■-□-■-□-■-□-■
まとめ
■-□-■-□-■-□-■-□-■-□-■
子孫セレクタとは、HTMLのツリー構造を利用したセレクト方法です。
HTMLは、場合によっては何重にもツリー構造が出来ていくので、間違えない様に注意しなくてはなりません。

複数セレクタは、同じデザインを、複数の物に適用したい時に使います。


■-□-■-□-■-□-■-□-■-□-■
今日の出来事
■-□-■-□-■-□-■-□-■-□-■
どうやら週明けに台風が来そうです。。。。
最近自然災害が多いですね。
東京に住んでいると、自然災害の怖さを忘れてしまいがちですが、
注意しないとなぁと思ったりします。。

それではまた☆


■-□-■-□-■-□-■-□-■-□-■
石川健太(イシカワケンタ)
無料体験はこちら

記事の一覧ページはこちら

こちらでも、webサイト制作に関しての情報を書いています。
webサイト作成方法の紹介ページ
■-□-■-□-■-□-■-□-■-□-■

 

(2014年10月4日(土) 16:16)

前の記事

次の記事

この記事を書いたコーチ

250名以上の生徒を指導!テキスト通りにいかないケースも論理的に説明

初心者歓迎ホームページ作成講座
石川健太 (ホームページ作成)

新宿・新大久保・高田馬場・目白・池袋・初台・幡ヶ谷・笹塚・明大前・下高井戸・桜上水・...

ブログ記事 ページ先頭へ