この記事を読むのに必要な時間は約 4 分です。
本日の学習内容：ウェブカツHTML,CSS部入門１１,１２
目次
１．各Lessonの概要
Lesson 11
セレクタ
Lesson 12
ブロックレベル要素とインライン要素
２．実際の作業内容
Lesson 11
セレクタ{ プロパティ : 値 ; }
先日の疑問が解消されるようだ。さっさと進めときゃよかった。。。
・主に使うセレクタ
| 指定 | 適用範囲 | 記述例 |
| * | 全要素 | *{ color : red; } |
| 要素X | 指定要素X | p{ color : red; } |
| #id属性値 | 指定id属性が付与された要素 | #title{ color : red; } |
| .class名 | 指定class属性が付与された要素 | .class{ color : red; } |
| 要素X 要素Y | 要素Xのなかの要素Y | p a{ color : red; } |
| 要素X>要素Y | 要素Xの直下にある要素Y | p>a{ color : red; } |
| 要素X#id属性 | 指定のid属性が付与された要素X | p#title{ color : red; } |
| 要素X.class名 | 指定のclass属性が付与された要素X | p.button{ color : red; } |
| 要素X:hover | 要素Xにマウスオーバーしたとき | a:hover{ color : red; } |
・スタイルの優先順位(昇順)：「特定する」ほど優先順位高い
|
1 2 3 4 5 6 7 8 9 |
p{ color : red !important; } /*'! important'と記述する*/ <p style = "color : red;">段落</p> /*HTMLのタブ内に直接記述する*/ p#title{ color : red; } /*id属性で指定する*/ p.button{ color : red; } /*class属性で指定する*/ p{ color : red; } /*普通の記述*/ |
Lesson 12
・ブロックレベル要素
一行すべてのボックスになるので、その後の要素を横並びにすることは基本的に不可能。ブロックレベル要素の中にブロックレベル要素を入れることができる。
例：<p>, <h1>~<h6>, <ul>, <table>, <form>, <div>
・インライン要素
文字幅分のボックスになるので、その後の要素を横並びにすることができる。インライン要素の中にブロックレベル要素は入れられない。文字の装飾などに使用される。
例：<a>, <img>, <br>, <span>
３．感想、反省、疑問など
前回の私の疑問はLesson 11ですぐに解消された。わからないことがあってもそれが瑣末なことならば、さっさと進めるが吉。
ブロックレベル要素は横並びにできないとのことだが、実際にネットサーフィンをしてて幅いっぱいの表や段落なんて、お目にかかるほうが稀である。例外的な使い方を覚える必要がありそうだ。
ブロックレベル要素とインライン要素に分かれているからには、それぞれ何かしら長所短所があるのだろう。でなければ２つ類型がある意義がないよね。いまのところの情報では全部インライン要素でいいのでは？と思ってしまう。ブロックレベル要素の長所とは何なのだろう。