Flexboxという仕組みを使って、ブロックレベル要素を横並びに変えることができる。
CSSで、親要素のdisplayプロパティにflexという値を入れると、その下の子要素が横並びになる。
noneだと非表示、他にはblock、inline、inline-block（並びはインライン、中身はブロックレベル）などがある。
justify-contentプロパティで、主軸方向（初期値は水平方向）の配置を調整できる。
値がcenterなら中央揃え、space-aroundなら両端が左右に寄り両端の余白と要素間の間隔が１：２になるようになる。
flex-start 左寄せ
flex-end 右寄せ
space-between 両端が左右にくっついて等間隔になる。
align-itemsプロパティで交差軸方向（初期値は垂直方向）の配置を調整できる。
値がcenterなら中央揃え。
flex-start 上揃え
flex-end 下揃え。
flex-directionプロパティで子要素の並び方を変えられる。
値がrowなら左から右（初期値）。
row-reverse 右から左（並び順が変わる）
column 上から下（軸の方向が変わる）
column-reverse 下から上（軸の方向と並び順が変わる）
ボックスモデルという仕組みで、２つの要素の間に幅を作ることができる。
borderプロパティでボーダーの太さ、スタイル、色を指定。
border: 太さ スタイル 色;
paddingプロパティで要素の内側に余白を作る。
marginプロパティで要素の外側に余白を作る。
positionプロパティで要素の配置方法を決められる。
値
relative 現在の位置を基準にして相対的に
absolute 特定の位置（デフォルトはブラウザの左上）を基準にして絶対的に
親要素がrelativeで子要素がabsoluteなら、親要素の位置を基準にする。
fixed 指定した位置に固定
imgタグで画像を表示させる。
<img src=”画像のURL” alt=”画像が表示されない場合の代替テキスト” class=”CSS適用のためのセレクタ”>
CSSでheight、widthなど決められる。
form要素はフォーム関連要素の集まりを表す。
<form>〜</form>の中に入力フォームや送信フォームなどを入れる。
input要素でフォームの入力欄や実行ボタンなどを作る。（インライン要素）
type属性を指定してフォーム部品を作る。
text 1行のテキスト入力欄
checkbox チェックボックス（複数作れる）
radio ラジオボタン（複数の中から1つ選択するもの）
submit 送信ボタン（value属性で指定した文字列がボタンに表示される）
placeholder属性で入力フォームに仮の文字列を入れられる。
例）<input type=”text” placeholder=”NAME”>
textarea要素で複数行のテキスト入力欄を作る。（これだけinput要素とは別）（インライン要素）
いずれもインライン要素なので、そのままだと横並びになる。
display: block;でブロック要素にすると縦に並ぶ。
CSSでは
.aaa .bbb{
} のように複数セレクタを指定できる。
子要素を中央に配置したければ
margin: 0 auto ; で上下のマージンが0、左右のマージンが均等になる。
margin: 0 auto 30px; で下に30px空いて、左右のマージンが均等になる。
各ブラウザは固有のCSSがデフォルトで使用されているので、本来意図していたものではない表示にならないようにリセットCSSを使う。
view portはブラウザで表示されている領域のこと。
縦が100vh、横が100vwと表す。
widthプロパティに対してcalc()という値を使うと数値を計算できる。（異なる単位でも可）
.◯◯{
width: calc(100vw – 300px);
} だと、画面横幅全体から常に300px分狭く表示される。
昨日学習した内容はこんなもん！
一つずつしっかり理解しながら進めていこうとするとなかなかに大変。
なんとなくで理解はしてても、いざ自分で書こうとすると難しい。
英文をなんとなく読めても、書けないっていうのと同じかもしれん。
ってか英語の勉強大事！
background-colorで背景色を指定するっていうのは見れば分かるんだけど、
relativeは「相対的」とか、alignは「揃える」とか
意味知らんやつも多いから、面倒でも一つずつ調べていくと理解がしやすくなる。
あとFlexboxとかボックスモデルとかは自分で絵を描いてみるとすごく理解が深まるのでとてもよいです。
iPadとApple Pencil大活躍です。
漫画（プログラミング日記）は…描く余裕無いかもｗｗ
