grid

place-content

place-items

<div class="grid">
  <img
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8ae8531-b8d9-42be-9b33-d78a285b5dae.png"
  />
</div>
<div class="grid2">
  <img
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c8ae8531-b8d9-42be-9b33-d78a285b5dae.png"
  />
  <p>ナポリタン ¥800</p>
</div>


.grid {
  background-color: #ffffef;
  height: 400px;
  /*  問題1. Gridを使って要素を中央寄せにしよう */
  display: grid;
  place-content: center;
}

.grid2 {
  background-color: #ffffcf;
  height: 400px;
  /*  問題2. Gridを使って複数の要素を中央寄せにしよう */
  display: grid;
  place-content: center;
  place-items: center;
}

img {
  height: 300px;
}
p {
  font-size: 24px;
}


.grid {
  background-color: #ffffef;
  height: 400px;
  /*  問題1. Gridを使って要素を中央寄せにしよう */
}

.grid2 {
  background-color: #ffffcf;
  height: 400px;
  /*  問題2. Gridを使って複数の要素を中央寄せにしよう */
}

img {
  height: 300px;
}
p {
  font-size: 24px;
}


Gridを使って、コンテンツを中央に並べよう

margin: 0 auto

コンテンツを中央揃えにしよう

max-width

wrapper

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

wrapperを実装してみよう

display: inline-block

text-align

ボタンを中央寄せにしてみよう

display: flex

justify-content

align-items

Flexを使って、コンテンツを中央に並べよう

position

left

transform

transformを使用して画像の中央にロゴを揃えよう

【演習】中央揃えを使用してTOPページのコンテンツを整えよう

position: relative

position: absolute

inset

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

画像の中央にタイトルを配置しよう

background

.bg-test {
  background-image: url('./img/test.jpg');
  $(1): $(2);
}

背景画像の中央にテキストを配置しよう

height

width

画面いっぱいの背景画像の中央にテキストを配置しよう

【演習】中央揃えを使用してTOPページのコンテンツを整えよう2

中央揃えはウェブデザインの重要な要素です。
positionやflexプロパティの活用で、任意の要素を中央に配置するテクニックを身につけます。


「中央揃えのやり方について学ぼう」レッスンの総復習クイズです。