HTMLのレイアウト構造
HTMLは積み木の集合体であると表現できます。積み木（=要素）は左上から収まっていきます。
HTMLはすでに作成した要素の中に、さらに要素を追加することができ、入れ子構造といいます。
HTMLの要素は中身の高さに応じて高さが変わる箱のような物とも表現できます
最初にコードをみてみましょう。
<!DOCTYPE HTML><html><head><metacharset="UTF-8"><title>旅行準備</title><linkrel="stylesheet"href="style.css"></head><body><header>買い物リスト
</header><divclass="contents"><divclass="top-content">事前に準備する物
<ulclass="lists"><liclass="list">スーツケース</li><liclass="list">着替え</li><liclass="list important">現地通貨</li><liclass="list">歯ブラシ</li></ul></div><divclass="bottom-content">現地で準備する物
<ulclass="lists"><liclass="list">飲み物</li><liclass="list">朝食</li><liclass="list">チケット</li></ul></div></div><footer></footer></body></html>header{height:40px;width:70%;font-size:20px;background-color:lightblue;}.contents{width:400px;}.top-content{height:200px;width:400px;background-color:lightyellow;}.bottom-content{height:200px;width:400px;background-color:lightsalmon;}.list{list-style:none;}.lists{width:250px;}.important{background-color:red;}footer{height:40px;width:75%;background-color:lightgreen;}ブロックレベル要素
HTMLの積み木を構成する要素で1つのブロックレベル要素が、1つのHTMLにおける積み木として存在します。
・横幅いっぱいで表示される箱である
・箱の中にテキストなどが表示される
・高さは中身によって変わる
・初期値は縦並びで表示される
インライン要素
テキストの一部を示す要素で、主に文字の装飾などに使用します。
・中身のテキスト量の分だけの横幅
・高さは中身によって変わる
・横並びで連続的に表示される
親要素と子要素
親要素
ある要素の上の階層にある要素です。
子要素
親要素から見てその下の階層にある要素です。
header要素
Webページ最上部のヘッダー専用のブロックレベル要素です。head要素ではありません。
div要素
特定の意味が無い要素です。様々な用途で使うことができ、主にclassセレクタを付与して使用します。
最も使用する頻度が高いブロックレベル要素です。イメージとしていっぱい積み木を入れられる段ボールみたいな感じです。大きいダンボールの中に小さいダンボールも入ります。
footer要素
Webページ最下部のフッター専用のブロックレベル要素です。
ul要素
順序のないリストを示すブロックレベル要素です。li要素と組み合わせて使用します。
li要素
リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。
CSSプロパティーでサイズを調整
heightプロパティ
要素の高さを指定することができるプロパティ
widthプロパティ
要素の幅を指定することができるプロパティ
%
%（パーセント）とは、親要素のサイズを100%としたとき子要素のサイズを親要素に対して何%で設定するかを決められる指定方法です。
background-colorプロパティ
背景色を指定する際に使用します。
list-styleプロパティ
リストのスタイルを変更することができli要素のマークを変更したりすることができます。squareを指定すると黒点を■で表現でき、noneを指定すると黒点を消すことができます。
リストのうち、一箇所だけ変更したい時、CSSを追加したい部分だけに、新たにclassを追加しましょう。
半角スペースで区切ることによって、1つの要素が複数のクラスを持つことができます。
ブロックレベル要素の横並び
ブロックレベル要素は、通常は縦に積み重なるため、横並びにするために工夫が必要です。
displayプロパティ
要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティで
値に変更したい要素の種類を設定します。
| 値との組み合わせ | 説明 |
|---|---|
| display: block; | ブロックレベル要素 |
| display: inline; | インライン要素 |
| display: inline-block; | 並びはインライン要素だが、中身はブロックレベル要素 |
| display: flex; | 要素の子要素が横並びになる |
| display: none; | 指定された要素は、非表示になる |
Flexbox
親要素に、display: flex;を付与することで、子要素が横並びになります。そして、その子要素らの詳細を細かく指定して決めることができます。これをFlexboxといいます。
justify-contentプロパティ
display: flex;と併せて使用します。justify-content: 〇〇;といった形で、
主軸方向(初期値は水平方向)の配置の詳細を決めることができます。
align-itemsプロパティ
display: flex;と併せて使用しalign-items: 〇〇;といった形で、
交差軸方向(初期値は垂直方向)の配置の詳細を決めることができます
flex-directionプロパティ
要素の主軸方向や並び順を変更する時に使用します。
詳細はフレックスボックスチートシートに預けます。
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox14
ボックスモデル
ボックスは中身の「content」、枠をつける「border」と、内側の余白「padding」、外側の余白「margin」から成り立っています。それぞれ個別にCSSを適用し、幅や色などを指定できます。
borderプロパティ
要素の境界線の幅や色を変更できます。
paddingプロパティ
箱の内側に余白を作成します。余白の大きさは、pxで指定することができます。
| 組み合わせ | 説明 |
|---|---|
| padding: ○px; | [上下左右]の内側の余白をまとめて指定 |
| padding: ○px △px; | [上下][左右]の内側の余白指定 |
| padding: ○px △px □px; | 並びはインライン要素だが、中身はブロックレベル要素 |
| display: flex; | [上][左右][下]の内側の余白指定 |
| padding: ○px △px □px ☆px; | [上][右][下][左]の内側の余白指定 |
marginプロパティ
箱の外側に余白を作成します。
paddingと同様に、pxで指定でき、上下左右4方向の指定方法も同じです。
positionプロパティ
指定した要素の配置方法を決めることができるプロパティです。
配置方法としては以下のような方法があります。
| 組み合わせ | 説明 |
|---|---|
| position: relative; | 現在の位置を基準に相対的な位置を決める |
| position: absolute; | 特定の地点を基準に絶対的な位置を決める（初期値の基準はウィンドウ左上） |
| position: fixed; | 要素を指定した位置に固定する |
プロパティとセットで使うことが多いです。
top/right/bottom/leftプロパティ
positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができます。
実際のコードをみてみましょう
<!DOCTYPE HTML><html><head><metacharset="UTF-8"><title>Example</title><linkrel="stylesheet"href="style.css"></head><body><header></header><divclass="main"><divclass="parent"><divclass="child"></div></div></div><footer></footer></body></html>header{height:50px;width:100%;background-color:lightblue;}.main{color:rgb(200,200,200);}.parent{width:400px;height:300px;background-color:lightsalmon;margin:auto;position:relative;}.child{width:250px;height:200px;background-color:lightyellow;position:absolute;top:15px;left:30px;}footer{height:40px;width:100%;background-color:limegreen;}