サイズ
幅を決める
使うプロパティ: width
高さを決める
使うプロパティ: height
装飾
線を引く
使うプロパティ: border
余白を取る
ブロックの外側に余白を取る
使うプロパティ: margin
ブロックの内側に余白を取る
使うプロパティ: padding
左右配置
幅の決まったブロック要素自体の左右位置はmarginで設定、ブロック要素内のコンテンツはtext-alignで設定します。
ブロックの横方向決め
使うプロパティ: margin
margin:autoでの配置指定は、指定したブロックタグそのものの位置を決めます。
テキストの横方向決め
使うプロパティ: text-align
text-align配置指定は、指定したブロックタグの中身のテキスト配置を決めます。
それぞれの中央揃えの違い
- <header>
- 幅が指定されたブロック要素を中央揃えしたいのでmargin-left,right
- Aboutセクションの<h2>
- h2の中のテキストを中央揃えしたいのでtext-align
並び方向
子要素(中身)を横並びにする
使うプロパティ: display: flex
子要素を横並び + 上下の配置を決める
使うプロパティ: display:flex と align-items
子要素を横並び + 左右の配置を決める
使うプロパティ: display:flex と justify-content
横並びコンテンツ間の隙間を空ける
使うプロパティ: column-gap
子要素を横並び + 幅の決まっていない子要素の幅を自動で決める
使うプロパティ: flex: 1
画像
トリミング
使うプロパティ: object-fit: cover
円でくり抜く(角丸も)
使うプロパティ: border-radius
その他
画像の下に勝手に余白ができてしまう問題
使うプロパティ: display: block
画像はインライン要素のため、行間とbaselineの関係で下部に余白ができれてしまいます。
display: blockを指定することでブロック要素に変わるため余白を無くすことができます。
dlタグでdtとddを横並びにする方法
dtとddをセットで横並びにするために、1セットずつdivで囲ってdisplay: flexを指定します。
幅を揃えるには下記のようにwidthで幅指定を工夫します。
