【解説05】ユーザーの声部分の作成 | SkillhubAI（スキルハブエーアイ）

Flexレイアウトの構造を考える

スマホ・PCデザインを見比べてみると「ユーザーの声」部分は、見出しから作りが違います。PC幅では上ではなく横に来ていますね。

レイアウトを切り替えるためには黒い太線に該当する、Flexコンテナが必要です。

file

主要ブロックを考えながら、HTMLに起こしてみましょう。赤の点線部分は空白なので書きません。

    <!-- ======================
    /  user's voice
    ======================== -->
    <section class="users">
        <div class="users-inner">
            <div class="text-center">
                <img src="images/h2-users.svg" class="h2-img" alt="user's voice">
            </div>
            <div class="text-center">
                <h2 class="text-white">
                    ユーザーの声
                </h2>
            </div>
            <div class="users-item-wrpper">
                <div class="users-item">
                    <div class="users-item_img"></div>
                    <div class="users-item_comment"></div>
                </div>
            </div>

        </div>
    </section>

セクション全体のCSSも書いておきます。

/* ---------------------- */
/* user's voice
/* ---------------------- */
.users{
  margin-top: 40px;
  border: solid 9px #008cdc;
}

.users-inner{
  padding-top: 30px;
}

見出し部分を作る

青色の吹き出しになっている「ユーザーの声」を作ります。

吹き出しは疑似要素を使って、三角形を付け加える形で作るのがオーソドックス。

file

まずは、ベースになるCSSを書いてみます。

.users h2 {
  display: inline-block;
  position: relative;
  width: 220px;
  background: #008cdc;
}

.users h2::before {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 100%;
  left: 50%;
  border: solid transparent;
  border-width: 0 20px 20px 0;
  border-color: transparent #008cdc transparent transparent;
}

この状態で、ブラウザで確認すると下図（左）のように見えます。 PerfectPixelでカンプを重ねるとデザインとの差分がわかるので、重なるようにCSSを調整していきます。

file

::beforeで作った三角形は、 topとleftで位置 border-widthでサイズを決めています。

このあたりは考え込まず、検証ツールを使ってプロパティ値を動かし、ベストな値をを決めると良いです。

コメント部分

ユーザーからのコメント部分を作っていきましょう。

まずは、users-itemクラスのdivの中に、画像とテキストを入れます。必要な共通クラスも入れておきます。

<div class="users-item">
    <div class="users-item_img mx-auto">
        <img src="images/user1@2x-80.jpg" class="img-fluid" alt="田中祐美さん">
    </div>
    <div class="users-item_comment">
        <h3>
            <span class="users-item_comment_name text-bold">
                田中祐美
            </span>
            さん
        </h3>
        <p>
            山路やまみちを登りながら、こう考えた。智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。山路やまみちを登りながら、こう考えた。智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。
        </p>
    </div>
</div>

「田中祐美」の部分だけ大きいデザインなので、spanタグで囲います。

吹き出し風のデザインは一旦置いておいて、CSSを書きます。

.users-item_img {
  width: 170px;
  height: 170px;
}

.users-item_comment {
  width: 100%;
}

.users-item_comment h3{
  font-size: 16px;
}

.users-item_comment_name{
  font-size: 21px;
  margin-right: 3px;
}

.users-item_comment p{
  line-height: 1.75;
}

コメントの吹き出し風デザインを作る

コメントの上下にある、吹き出し風の線を作ります。

borderを使って三角形を作っている場合、その三角に更にborderを付けることはできません。このため、２つの三角形を重ねて「線のようにみせる」という方法を採ります。

file

.users-item_comment {
  position: relative;
  width: 100%;
  border: solid #008cdc;
  border-width: 2px 0;
}

.users-item_comment::after,
.users-item_comment::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  border-style: solid;
  bottom: 100%;
  left: 50%;
}

.users-item_comment::before {
  border-style: solid;
  border-width: 0 12px 22px 12px;
  border-color: transparent transparent #008cdc transparent;
  margin-left: -13px;
}

.users-item_comment::after {
  border-width: 0 10px 18px 10px;
  border-color: transparent transparent #FFF transparent;
  margin-left: -11px;
  margin-bottom: -1px;
}

ブラウザで見てみましょう。上手く重なると、中抜きの吹き出しのように見えます。

file

カンプに合わせて余白を調整すれば完成です。

2つめ以降のコメントも作り、全体を調整

1つめのコメントが出来たら、コピー&ペーストしてコメントを３つに増やします。画像を差し替え、.users-item間やセクション全体の余白を調整したら完成です。

完成したコードは素材にアップロードしています。

レッスン一覧へ