【令和2年10月6日】 〜テックキャンプ2日目〜
◯HTMLのレイアウト構造
①左上の基準に情報が記載される（左上に重力のある積木）
②入れ子構造になっている。
③HTMLの要素は中身に応じて高さが変動する
例 2行のP要素 → 2行分の高さのp要素
◯ブロックレベル要素（積木要素 ※縦並びだから） H1 p div
中身に関係なく横幅いっぱいになる
高さは中身によって変わる
◯インライン要素（積木要素にならない ※横並びだから） b a
テキスト分だけの横幅になる
ブロック要素と同じ
◯親要素
ある要素の1つの上位の階層にある要素
◯子要素
親要素から見てその下位階層にある要素
◯header要素
ヘッダー専用のブロックレベル要素
◯div要素
特定の意味がない要素 classをつけることで意味を持つようになる。
◯footer要素
フッター専用のブロックレベル要素
サイズ調整と背景色のプロパティ
◯heightプロパティ
要素の高さを指定できるプロパティ 値はpxと％となる
◯widthプロパティ （ウィッズ。ウィス）
幅を指定できるプロパティ 値はpxと％となる
◯％
子要素のサイズを親要素に対して何％で設定するか
◯background-colorプロパティ
背景色を指定できるプロパティ
箇条書きリストの作成
◯ul要素（親要素）
順序のないリストを示すブロックレベル要素
◯li要素 （子要素）
リストの項目を示す要素
◯list-styleプロパティ
リストのスタイルを変更できるプロパティ
◯練習問題の間違えた場所
問題2の.contentsセレクタの部分で高さを指定したが、3つの子要素で指定しているから必要ない。
FlexBoxの使い方を学ぼう
ブロックレベル要素の横並び
◯displayプロパティ
値 ⑴block
→ブロックレベル要素になる
⑵inline
→インライン要素になる
⑶inline-block
→並びはインライン要素、中身はブロックレベル要素になる
⑷flex（フレックス）
→指定された要素の子要素が横並びになる。そして、子要素の並び順や幅を、
詳細に決めることができる（Flexbox）※必ずflexsboxを適用させたい親要素
にプロパティを指定する。
⑸none
→非表示になる
◯主軸方向と交差軸方向
主軸方向 横並びにした要素が並ぶ方法
交差軸方向 主軸に直角に交わる方向
◯Flexbox
⑴justify-contentプロパティ（ジャステファイ・コンテント）
display:flex;と併用して使用することで、主軸方向の配置の詳細を決めることができる。
値 ⑴flex-start
→左寄せ
⑵flex-end
→右寄せ
⑶center
→中央寄せ
⑷space-between
→両端が左右に寄り、等間隔
⑸space-around
→両端が左右に寄り、等間隔。両端の余白と要素間の余白が1：2
⑵align-itemsプロパティ
display:flex;と併用して使用することで、交差軸方向の配置の詳細を決めることができる。
値 ⑴flex-start
→上揃え
⑵flex-end
→下揃え
⑶center
→中央揃え
⑶flex-directionプロパティ
要素の主軸方向や並び順を変更できる。
値 ⑴row
→左寄せ
⑵row-reverse
→右寄せ
⑶column
→中央寄せ
⑷column-reverse
→両端が左右に寄り、等間隔
◯ボックスモデル
枠をつける『border』と内側の余白『padding』と外側の余白『margin』から成り立っている。
◯borderプロパティ
border: 太さ スタイル 色;とすることで、太さ・スタイル・色をまとめて指定できる。
◯paddingプロパティ
指定方法 ⑴padding: 1px;
→『上下左右』に設定できる
⑵padding: 1px 1px;
→『上下』『左右』に設定できる
⑶padding: 1px 1px 1px;
→『上』『左右』『下』
⑷padding: 1px 1px 1px 1px;
→両端が左右に寄り、等間隔
◯marginプロパティ
指定方法 ⑴margin: 1px;
→『上下左右』に設定できる
⑵margin: 1px 1px;
→『上下』『左右』に設定できる
⑶margin: 1px 1px 1px;
→『上』『左右』『下』
⑷margin: 1px 1px 1px 1px;
→両端が左右に寄り、等間隔
要素の位置を指定する方法を学ぶ
◯positionプロパティ
指定した要素の配置方法を決めることができる。また、top/right/bottom/leftプロパティとセットで使うことが多い。セットで使うことで、基準の距離を指定することができる。
値 relative
現在の位置を基準に相対的な位置を決める。absoluteを指定した要素の基準がブラウザ左上からrelativeプロパティを指定した親要素に変わる。
absolute
特定の地点を基準に絶対的な位置を決める。親要素ではなくブラウザに基準が変わる。また、top/right/bottom/leftプロパティとセットで使うことが多い。セットで使うことで、基準の距離を指定することができる。
fixed
要素を指定して位置に固定する
画像の表示について学ぶ
◯img要素
Wwbサイト上に画像を表示することができる。また、画像の場所を指定するsrc属性、画像が表示されなかった場合に代用テキストなどを表示するためのait属性も併用する。画像の大きさを変更するとき、widthプロパティ、heightプロパティを指定して変更する。
フォームの実装について学ぼう
◯form要素
フォーム関連要素の集まりを表す要素
◯input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素。また、type属性という設定があり、それを指定することで様々な種類のフォーム部品を作り出すことができる。
属性 ⑴text
→1行のテキスト入力欄を作成できる。
⑵checkbox
→チェックボックスを複数作成できる。
⑶radio
→複数の中から1つしか選択できない、ラジオボタンを作る。
⑷submit
→送信ボタンを作成できる。
◯placeholder属性（プレースホルダー）
入力フォームに仮の文字列をいれることができる。
◯textarea要素
複数行のテキスト入力欄を作成するインライン要素。
◯value属性
指定した文字が、送信ボタンに表示させる。
