flex-direction

align-items

margin

margin: 10px 20px 30px 40px;

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

<h1 class="title">Works</h1>
<ul class="works-list">
  <li class="works-item">
    <img
      class="works-img"
      src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/2c7b51ec-7ead-4b06-92c9-21f143958990.jpg"
      alt="ふわふわのパンケーキ"
    />
    <p class="works-text">
      ふわふわが売りのパンケーキ店のWebサイトを制作。メニューには写真をふんだんに使用し、視覚的に魅力的なデザインを展開しています。
    </p>
  </li>
  <li class="works-item">
    <img
      class="works-img"
      src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/5b914025-cbc3-4df5-8782-4fe482fb5f53.jpg"
      alt="イラストを描く子供"
    />
    <p class="works-text">
      子供たちが楽しみながら学べるイラスト教室のWebサイトを制作。教室のスケジュール確認や参加申し込みが簡単に行える設計を行いました。
    </p>
  </li>

  <li class="works-item">
    <img
      class="works-img"
      src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/9cf79031-c995-466c-afdc-de44e9077bb1.jpg"
      alt="保護猫カフェの猫"
    />
    <p class="works-text">
      保護猫と触れ合えるカフェのWebサイトを制作。猫たちの紹介や譲渡情報を掲載し、来店の事前受付機能を実装しました。
    </p>
  </li>
</ul>


*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

li {
  list-style: none;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

.title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.title::after {
  content: '';
  width: 70px;
  height: 3px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: calc(50% - 35px);
}

.works-list {
  max-width: 560px;
  margin: 0 auto;
}

.works-item {
  /* 問題1 要素をフレックスボックスに指定 */
  /* この下に解答してください */
  display: flex;
  /* 問題2 要素の配置方向変更 */
  /* この下に解答してください */
  flex-direction: column;
  /* 問題3 要素の揃え方を指定 */
  /* この下に解答してください */
  align-items: center;
  /* 問題4 要素の余白指定 */
  /* この下に解答してください */
  margin-bottom: 40px;
}

/* 問題5 最終要素の余白指定 */
/* この下に解答してください */
.works-item:last-child {
  margin-bottom: 0;
}

.works-text {
  width: 50%;
}

.works-img {
  width: 50%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 16px;
}


*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

li {
  list-style: none;
}

html {
  font-size: 14px;
  box-sizing: border-box;
  color: #333333;
}

.title {
  font-size: 24px;
  color: #495b65;
  text-align: center;
  position: relative;
  margin: 40px 0 40px 0;
}

.title::after {
  content: '';
  width: 70px;
  height: 3px;
  display: inline-block;
  background-color: #4273d3;
  position: absolute;
  bottom: -2px;
  left: calc(50% - 35px);
}

.works-list {
  max-width: 560px;
  margin: 0 auto;
}

.works-item {
  /* 問題1 要素をフレックスボックスに指定 */
  /* この下に解答してください */

  /* 問題2 要素の配置方向変更 */
  /* この下に解答してください */

  /* 問題3 要素の揃え方を指定 */
  /* この下に解答してください */

  /* 問題4 要素の余白指定 */
  /* この下に解答してください */
}

/* 問題5 最終要素の余白指定 */
/* この下に解答してください */

.works-text {
  width: 50%;
}

.works-img {
  width: 50%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 16px;
}


要素の垂直配置①（marginによる余白指定）

display: flex;

要素内の余白指定

flex-wrap

要素の折り返し

要素の配置方向①(左右相互レイアウト)

要素の垂直配置②（gapによる余白指定）

flex: 1; (ショートハンド)

要素の伸縮

演習問題（聖杯レイアウト）

Flexboxを使用したさまざまなレイアウトパターンを実践的に学びます。
レスポンシブデザインにも対応した現代的なWebページ制作を目指します。

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

Web制作コース

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

「Flexboxでさまざまなレイアウトを作ってみよう」レッスンの総復習クイズです。

Flexboxでさまざまなレイアウトを作ってみようの総復習クイズ

「さまざまなレイアウトをFlexboxで作ってみよう」レッスンの総復習クイズです。