20日目(HTML5・CSS2)
昨日の振り返り
文字に関するプロパティ
背景に関するプロパティ
境界線
内容領域(Content Area)
文字や画像を表示できる領域
特に幅や高さの指定をしない場合、親要素いっぱいに広がる。
幅のデフォルト値:100%
高さはとくに指定しない場合コンテンツ(内容物)の量に応じて可変
デフォルト:height: auto;が適用
幅や高さの設定ができないもの
・strong,em
・small
・span
・a
内側の余白:padding
ボックスの間隔:margin
マージンの相殺
上下のマージンが重なると、大きい方の値が優先される
ボックスのサイズ
レイアウトを行う上で非常に重要
- ボックスサイズを計算する
- box-sizingを使う
最大値・最小値:max-/min-
overflowプロパティ
displayプロパティ
レイアウト
- 中央に配置
- 横に並べる
これが根幹
コーポレートサイトなど特に
★ボックスを中央配置する
- width(幅)を決めてから
- margin: 0 auto;
文字、画像を中央配置に配置する
- text-aline: center;
ボックスを横に並べる:floatプロパティ
★横に並べる方法
- 横に並べたいボックス「すべて」の幅を決める
- 横に並べたいボックス「すべて」にfloatを設定する
★floatとセットで覚えてね
回り込みの解除
clear: both;
今日はここまで。
HTMLタグの記述はほとんどEmmetに頼りきりです(笑)
レイアウトのお話が出たことで、サイトのデザイン的なところがちょっとだけ見えてきたかな?
CSSの学習ももう少しで終わって、次はJavaScript。
Javaを詰め込んで、それを落っことさないようにしつつJavaScriptが混じったりしないかが不安。
今日も行き帰りの電車、訓練の休み時間に黒本。
正規表現とか知らない子が出てきたな、と思ったそばから、ラムダ式とかいうさらに知らない子が現れた。
9章で難易度上がり過ぎじゃないか?
FGOの6章かよ…
とにかくラムダ式の構文を無心で6回くらい読んでたら、形はぼんやりつかめてはきた。
アプリの開発とかで使われるみたいだから、ぜひ覚えたい。