height

width

display: flex;

justify-content

align-items

<div class="head-img">
  <h1>Tech Solutions</h1>
  <p>Innovate. Transform. Succeed.</p>
</div>


.head-img {
  background-image: url(https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/88e0bcea-e193-422f-bc85-40d97c768f81.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 問題1. 背景画像を画面全体に指定 */
  width: 100%;
  height: 100vh;
  /* 問題2. タイトルを背景の中央に指定 */
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: #fff;
  margin-right: 20px;
  text-shadow:
    -1px -1px 0px black,
    1px -1px 0px black,
    -1px 1px 0px black,
    1px 1px 0px black;
}

p {
  color: #fff;
  font-weight: bold;
  text-shadow:
    -1px -1px 0px black,
    1px -1px 0px black,
    -1px 1px 0px black,
    1px 1px 0px black;
}


.head-img {
  background-image: url(https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/88e0bcea-e193-422f-bc85-40d97c768f81.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 問題1. 背景画像を画面全体に指定 */

  /* 問題2. タイトルを背景の中央に指定 */
}

h1 {
  color: #fff;
  margin-right: 20px;
  text-shadow:
    -1px -1px 0px black,
    1px -1px 0px black,
    -1px 1px 0px black,
    1px 1px 0px black;
}

p {
  color: #fff;
  font-weight: bold;
  text-shadow:
    -1px -1px 0px black,
    1px -1px 0px black,
    -1px 1px 0px black,
    1px 1px 0px black;
}


画像中央へのテキストの配置

margin: 0 auto

marginを使用した中央揃え

max-width

wrapper

padding

padding: 10px 20px 30px;

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

ラッパーの実装

display: inline-block

text-align

ボタンの中央寄せ

flexを使用した中央揃え

position

top, bottom

left

transform

transformを使用した中央揃え

【演習】TOPページコンテンツの中央揃え

grid

place-content

place-items

gridを使用した中央揃え

position: relative

position: absolute

inset

margin

margin: 10px 20px 30px 40px;

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

insetを使用した中央揃え

background

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

paddingを使用した中央揃え

【演習】TOPページコンテンツの中央揃え2

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


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

Web制作コース

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

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