flex-direction

align-items

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>レスポンシブ対応するためのスキルを身につけよう</title>
  </head>
  <body>
    <header class="header">
      <div class="header-wrapper wrapper">
        <div class="header-logo">Code Lesson</div>
        <nav class="header-nav">
          <ul class="header-menu menu">
            <li class="menu-item">TOP</li>
            <li class="menu-item">Gallery</li>
            <li class="menu-item">Items</li>
            <li class="menu-item">Contact</li>
          </ul>
          <ul class="hamburger">
            <li class="line-top"></li>
            <li class="line-center"></li>
            <li class="line-bottom"></li>
          </ul>
        </nav>
      </div>
    </header>
    <main class="wrapper">
      <div class="fv">
        <div class="fv-card">
          <div class="text-area">
            <h1 class="title">Code lessonホテル</h1>
            <p class="text">
              圧倒的なオーシャンビューのロケーションが自慢のリゾートホテルです。清潔で開放感のあるエントランスからはホテル専用のプールへアクセス可能です。客室は全室オーシャンビューバルコニー付き。雄大な海のパノラマ風景を独り占めして、ゲストが思い描く理想のリゾートステイを満喫できます。
            </p>
          </div>
          <div class="fv-img">
            <img
              src="/images/lessons/253/fv-image.jpg"
              alt="ロビー"
              class="img-item"
            />
          </div>
        </div>
      </div>
    </main>
  </body>
</html>


/* 共通パーツ */
body {
  color: #333;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* ヘッダー */
.header {
  border-bottom: 1px solid #ebeaeb;
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.header-logo {
  padding-top: 8px;
  color: #26a69a;
}
.header-nav {
  padding: 8px;
  color: #26a69a;
}
.menu {
  display: flex;
}
.menu-item {
  margin-right: 24px;
}
.hamburger {
  display: none;
  position: relative;
  width: 30px;
  height: 30px;
}
.line-top,
.line-center,
.line-bottom {
  width: 30px;
  height: 2px;
  background-color: #26a69a;
  position: absolute;
}
.line-top {
  top: 0;
}
.line-center {
  top: 14px;
}
.line-bottom {
  top: 29px;
}

@media screen and (max-width: 600px) {
  .header-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

/* ファーストビュー */
.fv {
  max-width: 1100px;
  margin: 32px auto 0;
}
.fv-card {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
}
.fv-img {
  max-width: 600px;
  position: relative;
}
.img-item {
  width: 100%;
}
.text-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-right: 16px;
  text-align: left;
}
.title {
  font-weight: bold;
  font-size: 24px;
  margin: 16px 0;
  color: #26a69a;
}

/* 問題1. レスポンシブでメディアのレイアウトを縦方向に切り替えよう */
@media screen and (max-width: 1100px) {
  .fv-card {
    flex-direction: column-reverse;
    align-items: center;
  }
  .text-area {
    text-align: center;
    padding-right: 0;
  }
}


/* 共通パーツ */
body {
  color: #333;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* ヘッダー */
.header {
  border-bottom: 1px solid #ebeaeb;
}
.header-wrapper {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.header-logo {
  padding-top: 8px;
  color: #26a69a;
}
.header-nav {
  padding: 8px;
  color: #26a69a;
}
.menu {
  display: flex;
}
.menu-item {
  margin-right: 24px;
}
.hamburger {
  display: none;
  position: relative;
  width: 30px;
  height: 30px;
}
.line-top,
.line-center,
.line-bottom {
  width: 30px;
  height: 2px;
  background-color: #26a69a;
  position: absolute;
}
.line-top {
  top: 0;
}
.line-center {
  top: 14px;
}
.line-bottom {
  top: 29px;
}

@media screen and (max-width: 600px) {
  .header-menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

/* ファーストビュー */
.fv {
  max-width: 1100px;
  margin: 32px auto 0;
}
.fv-card {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
}
.fv-img {
  max-width: 600px;
  position: relative;
}
.img-item {
  width: 100%;
}
.text-area {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-right: 16px;
  text-align: left;
}
.title {
  font-weight: bold;
  font-size: 24px;
  margin: 16px 0;
  color: #26a69a;
}

/* 問題1. レスポンシブでメディアのレイアウトを縦方向に切り替えよう */


ファーストビューのレイアウトを縦方向に変化させよう

<meta>

<meta name="viewport">

メディアクエリ

display: block

display: none

ヘッダーメニューをハンバーガーメニューに切り替えよう

overflow-x: scroll

横並びのカードを横スクロールできるようにしよう

ボタンのサイズを変化させよう

レスポンシブデザインに必要なCSSのテクニックを学び、さまざまなデバイスに対応するウェブページ設計ができるようになります。
実践的なメディアクエリにも触れます。

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

Web制作コース

【中級編💼】レイアウトとレスポンシブ対応を学ぼう

「レスポンシブ対応するためのスキルを身につけよう」レッスンの総復習クイズです。