border-[上下左右]

<div class="wrapper">
  <p class="balloon_title">お客様の声</p>
  
  <div class="balloon">
    <p class="balloon_text">料金が明確で分かりやすかったです。</p>
  </div>
  <div class="img">
    <img
      src="https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/imageForChallenges/55ad0b06-0e07-4376-a541-3f7904abff16/face.png"
      alt=""
    />
  </div>
</div>

.wrapper {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto 40px;
}
.img {
  text-align: center;
}
p {
  margin: 0;
  padding: 0;
}
.balloon_title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 16px;
}
.balloon_text {
  font-size: 24px;
  text-align: center;
}

.balloon {
  position: relative;
  display: inline-block;
  padding: 40px;
  color: #000;
  font-size: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 24px;
  /* 問題1. 下向きのふきだしを作ってみよう */
  border-radius: 20px;
  background-color: #e7f6ff;
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin-left: -17px;
  z-index: 1;
  /* 問題2. ふきだしの下向きの三角形を作ってみよう */
  border: 14px solid transparent;
  border-top: 14px solid #e7f6ff;
}

@media screen and (max-width: 600px) {
  .balloon_text {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .balloon_title {
    font-size: 16px;
  }
}


.wrapper {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto 40px;
}
.img {
  text-align: center;
}
p {
  margin: 0;
  padding: 0;
}
.balloon_title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 16px;
}
.balloon_text {
  font-size: 24px;
  text-align: center;
}

.balloon {
  position: relative;
  display: inline-block;
  padding: 40px;
  color: #000;
  font-size: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 24px;
  /* 問題1. 下向きのふきだしを作ってみよう */
}
.balloon::after {
  content: '';
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin-left: -17px;
  z-index: 1;
  /* 問題2. ふきだしの下向きの三角形を作ってみよう */
}

@media screen and (max-width: 600px) {
  .balloon_text {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  .balloon_title {
    font-size: 16px;
  }
}



    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'ふきだしを作ってみよう',
            tests: [
                {
                    title: '`.balloon`に、ふきだしに丸みを付けるためのプロパティを*20px*指定してください。',
                    hint: '`.balloon`に、`*border-radius*`を`*20px*`指定してください。<button data-skill="c0688dd6-8cfb-4776-8a24-6294a5afa765">border-radiusを確認する</button>',
                    test: () => isContainTextInEditor('border-radius: 20px;', 'style.css', '.balloon {', '}')
                },
                {
                    title: '`.balloon`にて、ふきだしの背景色を`*#e7f6ff*`に指定してください。',
                    hint: '`.balloon`に、`*background-color*`を`*#e7f6ff*`で指定してください。<button data-skill="dbd975aa-f6b1-457a-b064-340a36c5a0a3">background-colorを確認する</button>',
                    test: () => isContainTextInEditor('background-color: #e7f6ff;', 'style.css', '.balloon {', '}')
                }
            ]
        },
        {
            title: 'ふきだしの下向きの三角形を作ってみよう',
            tests: [
                {
                    title: '`.balloon::after`に透明の四角形を作るためのプロパティを、太さ*14px*、種類*solid*、色は*transparent*で指定してください。',
                    hint: '`.balloon::after`に、`*border*`を`*14px solid transparent*`で指定してください。',
                    test: () => isContainTextInEditor('border: 14px solid transparent;', 'style.css', '.balloon::after {', '}')
                },
                {
                    title: '`.balloon::after`の透明の四角形の上側に色を付けるためのプロパティを、太さ*14px*、種類*solid*、色は *#e7f6ff* で指定してください。',
                    hint: '`.balloon::after`に、`*border-top*`を`*14px solid #e7f6ff*`で指定してください。',
                    test: () => isContainTextInEditor('border-top: 14px solid #e7f6ff;', 'style.css', '.balloon::after {', '}')
                }
            ]
        }
    ];


ふきだしを作って文章を会話風にしよう

::before, ::after

content

transform

タイトルをスラッシュで囲んで強調しよう

タイトルを装飾して目立たせよう

list-style

border

border-[各種]

箇条書きのマーカーを▶︎に変えよう

箇条書きのマーカーを＞に変えよう

見出しに斜めデザインを表示させよう

画像に台形デザインを表示させよう

CSSの擬似要素を用いた装飾とコンテンツ生成の方法を学ぶコースです。
タイトルやリストにユニークなデザインを加え、ユーザー体験を向上させます。

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

Web制作コース

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

「擬似要素を使ってコンテンツを作ろう」レッスンの総復習クイズです。