CSSの基礎を学ぼう②〜文字・寸法の装飾〜
①エリアを作る要素
②一般的な装飾の設定(背景色・テキスト・グラデーション・透明度)
③余白の設定(外側・内側の余白・枠線の設定)
④要素のサイズ変更(高さ・幅)
⑤セレクタの複数指定
CSSの基礎を学ぼう③〜エリア配置の装飾〜
今回の学習では、要素の配置について学習。
前回学習したpadding、marginとは違い、一定間隔で要素を配置できるように学習を進める。
ブロック要素とインライン要素の理解度によって学習の進み具合が変わってくるので、心配な方はブロック要素とインライン要素について再度見直し!
学習の内容
①ブロック要素の性質
②要素の配置
③displayの使い方
特に③displayプロパティの使い方は整理が必要かな
ブロック要素、インライン要素を変更できるプロパティ
『flex:横並び』display: flex ;
・水平方向の配置調整にはプロパティ
・垂直方向の配置調整にはプロパティ
を使用しますので、とセットで覚える!!
・flex-start 行頭寄せ、通常は左揃え(初期値)
・flex-end 行末寄せ、通常は右揃え
・center センター揃え
・space-between アイテムの両端にスペースを均等に割り付け
・space-around アイテムの間にスペースを均等に割り付け
垂直方向の配置調整も同様!
align-items: center センター揃えなど
一発でブラウザに反映されないし、自分で何がダメなのか見つけることがまだまだできていない。ただ、完成させていること自体は評価して継続して精度を高めていくことを意識してやっていく。