.container {
  background-image: url(https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/00631d80-ad96-4d18-b98d-1896a8732a66.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */
  position: relative;
}

.logo {
  width: 200px;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */
  position: absolute;
  /* 問題2 ロゴマークを中央に指定しよう */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


position

left

transform

.container {
  background-image: url(https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/00631d80-ad96-4d18-b98d-1896a8732a66.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */
}

.logo {
  width: 200px;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */

  /* 問題2 ロゴマークを中央に指定しよう */
}


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

margin: 0 auto

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

max-width

wrapper

padding

wrapperを実装してみよう

display: inline-block

text-align

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

display: flex

justify-content

align-items

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

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

grid

place-content

place-items

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

position: relative

position: absolute

inset

margin

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

background

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

height

width

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

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

positionやflexなどを使った中央寄せの仕方について学びましょう。中央寄せで悩まないようになれます。


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

中央揃えのやり方について学ぼうの総復習クイズ

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

padding: 10px 20px 30px;

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

margin: 10px 20px 30px 40px;

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

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

まずは必要なスキルを確認しましょう！