HTMLを実装する際に、意識すべきポイント3つ。
- HTMLとは左上に重力のある積み木である
- 入れ子構造になっている
- HTMLの要素は中身に応じて高さが変動する
ブロックレベル要素とインライン要素
HTML要素は積み木に似ているが、積み木とならない要素も存在する。
HTMLの構造をつくらない要素がある。
ブロックレベル要素
HTMLの積み木を構成する要素。
特徴
- 横幅いっぱいで表示される四角い箱である
- 箱の中にテキストなどが表示される
- 中身に関係なく横幅いっぱいになる
- 高さは中身によって変わる
- 縦並びで表示される
インライン要素
テキストの一部として扱われる要素。
「テキストの一部を太文字にする」など、主に文字の装飾などに使用。
特徴
- 中身のテキスト量の分だけ横幅が広がる
- 高さは中身によって変わる
- 連続すると横並びで表示される
親要素と子要素
要素が入れ子構造になると、「親要素」と「子要素」という言葉で要素間の関係性を表す。
親要素
- 親要素：ある要素の１つの上位の階層にある要素。
- 子要素：親要素から見てその下位階層にある要素。
親子構造を含んだHTML
親子構造を作る際によく使われる要素
- header要素：Webページ最上部のヘッダー専用のブロックレベル要素
- div要素：divはDivisionの略で「特定の意味が無い」要素で最頻出のブロックレベル要素
- footer要素：はWebページ最下部のフッター専用のブロックレベル要素
HTML要素の大きさを設定する方法
大きさを指定するプロパティとして、ここではheightプロパティとwidthプロパティを使用
- heightプロパティ：要素の高さを指定する
- widthプロパティ：要素の幅を指定することができる
- %：親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる
背景色を指定
background-colorプロパティ
background-colorプロパティは、背景色を指定する。値で自由に色を指定することができる。
箇条書きリストのHTML
- ul要素：ulはUnordered Listの略で、順序のないリストを示すブロックレベル要素で、li要素と組み合わせて使用する。
- li要素：li要素はList Itemの略で、リストの項目を示すブロックレベル要素で、ul要素の子要素として記述する。
- list-styleプロパティ：li要素の箇条書きのマークを変更したりできる。
squareなら黒点を■で、noneなら箇条書きの黒点を消すことができる。
リスト構造の背景色の一部を変更
追加でCSSを追加したい部分だけに、新たにclassを追加する。半角スペースで区切ることによって、1つの要素が複数のクラスを持つことができる。
<li class=”list”>本</li>
<li class=”list sweet”>おかし</li>
<li class=”list”>ご飯</li>
listとsweetのclassを持つので、
.sweet{
color: red;
}
結果、「おかし」となる。
コメント