position: relative

position: absolute

inset

margin

margin: 10px 20px 30px 40px;

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

<div class="container">
  <img
    class="first-view"
    src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ffb59e07-6054-46f9-b420-484156773148.jpg"
    alt="ファーストビュー"
  />
  <div class="fv_box">
    <h1 class="fv_title">TravelSnap</h1>
    <p class="fv_text">Share and discover travel adventures in a click</p>
  </div>
</div>


.container {
  height: 100vh;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */
  position: relative;
}

.first-view {
  height: 100vh;
  object-fit: cover;
}

.fv_box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 240px;
  height: 200px;
  border: solid 1px #000;
  text-align: center;
  /* 問題1 要素を動かすためのプロパティを指定しよう */
  position: absolute;
  /* 問題2 要素の位置を画像の中央に指定しよう */
  inset: 0;
  margin: auto;
}

.fv_title {
  font-size: 32px;
  font-weight: bold;
}


.container {
  height: 100vh;
  /* 問題1. 要素を動かすためのプロパティを指定しよう */
}

.first-view {
  height: 100vh;
  object-fit: cover;
}

.fv_box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 240px;
  height: 200px;
  border: solid 1px #000;
  text-align: center;
  /* 問題1 要素を動かすためのプロパティを指定しよう */

  /* 問題2 要素の位置を画像の中央に指定しよう */
}

.fv_title {
  font-size: 32px;
  font-weight: bold;
}


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

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ページのコンテンツを整えよう

grid

place-content

place-items

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

background

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

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

height

width

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

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

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


0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

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