サイタ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)

前の記事

次の記事

目的・種類別にホームページ作成・作り方講座を探す

新着記事

今日はCMSに関して書いていきます。 一般的に、ブログの更新の様に、HTMLタグを知らなくても、 ホームページを更新していく事が出来る仕組みを、CMS(コンテンツマネジメントシステム)と呼びます。 企業が独自で開発したもの、有料の物、無料の物、色々あります。 現状一番人気で、世界的...

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

今日は、よく使うCSSのセレクタに関してです。 CSS3の登場で、非常に多くの、有用なセレクタが出てきて、とっても便利になりました。 とはいえ、一気に覚えるのは大変なので、まずは基本的な物を覚えていきましょう。 基本的なセレクト方法だけでも、工夫する事で大体のホームページは作れます。 ...

今日は、CSSの文法に関してです。 ルールをきちんと覚えてしまえば、さほど難しく無いので、是非覚えましょう ■-□-■-□-■-□-■-□-■-□-■ 「何に」、「何を」、「どうするか」 ■-□-■-□-■-□-■-□-■-□-■ CSSは、無理矢理日本語に翻訳するなら、 ...

今日は、HTMLの初心者が一番最初につまずきやすい、パスに関して書いていきます。パスにも、いくつかの種類がありますが、今回は、基本となる相対パスに関して書いていきます。 HTMLで画像等の外部ファイルを読み込むときは、「パス」という考え方をしていきます。 この「パス」の考え方は、HTM...

レッスン無料相談窓口のご案内

サイタでは、ホームページ作成レッスンに関する疑問に
専門カウンセラーがお電話にてご案内しております。
お気軽にご利用ください。

お電話相談窓口はコチラ

ブログ記事 ページ先頭へ