お客様の声のセクション【ポートフォリオ作成】

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#27  お客様の声のセクション【ポートフォリオ作成】

web兄さん

＼SHARE／

１｜HTMLのコーディングをしよう

動画内で書いたコード

<!-- お客様の声 -->
<div class="review">
    <div class="review__inner">
        <h2 class="review__headline">
            <span class="review__headline-en">Works</span>
            <span class="review__headline-jp">実績のご紹介</span>
        </h2>
        <div class="review__wrap">
            <div class="review__each">
                <p class="review__comment">はじめてのWEBサイト制作の依頼でしたが、わからないことがいくつあっても、嫌な顔ひとつせず対応してくださいました。
                <br>まるで自分のWEBサイトを作るような熱量を持って作成していただき、とても満足のいくものができたと思います。
                <br>はじめてで不安が多い方にこそオススメしたいです。</p>
                <div class="review__author">
                    <img class="review__icon" src="img/review__icon01.png" alt="山田 花子様">
                    <p class="review__name"><span>飲食店経営</span>山田 花子様</p>
                </div>
            </div>
            <div class="review__each">
                <p class="review__comment">私がデザインしかできないため、コーディング業務を定期的に行っていただけるパートナーとしてお仕事をお願いしています。
                <br>いつも私が作成したデザインを綺麗にページに再現してくれるので、お客様から修正がほとんど発生せず気持ちよく仕事ができています。
                <br>これからも末長くお付き合いしていきたいです。</p>
                <div class="review__author">
                    <img class="review__icon" src="img/review__icon02.png" alt="山田 花子様">
                    <p class="review__name"><span>WEBデザイナー</span>山田 太郎様</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /お客様の声 -->

２｜CSSのコーディングをしよう

動画解説のポイントまとめ

03:14〜｜flex-basisとcalc使ってブロックを均等に並べる

両端を揃えたいかつ中央にのみ余白が存在しているような場合のテクニックです。

両端を揃えた上で中央に余白を取りたい

margin-rightやmargin-leftでは余分な余白がついてしまいます。

また、どちらか片方にだけmarginをつけるというのもなんだかスマートではありませんよね。

margin-rightやleftでは余分な余白がついてしまう

均等にブロックを並べつつ、余白を取るテクニックの一つとして、calcを使って余白を除いた横幅を指定する方法があります。

  1. ブロックに対しての中央の余白は80px空いている
  2. 1140pxが全体の横幅なのでそれの半分 = 50%をflex-basisとして指定
  3. 50%では余白が含まれていないので、calc(50% – 40px)←2つの合計が余白の80pxになるように
  4. 最終的にflex-basis: calc(50% - 40px) = つまり530pxの横幅と同じになる
  5. 1140px – 530px * 2 = 80px（ちょうど余白と同じ数値）
  6. 530pxのブロックをjustify-contentで両端に配置することで、中央に80px分の余白ができる
余白を除いたブロック幅を指定し両端に配置する

動画内で書いたコード

/* ===========================

お客様の声

=========================== */

.review{
  padding: 130px;
  background-color: #F9F9FF;
}

.review__inner{
  max-width: 1140px;
  margin:0 auto;
}

.review__headline{
  margin-bottom: 60px;
}

.review__headline-en{
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 20px;
  color: #7768ED;
  display: block;
  margin-bottom: 10px;
}

.review__headline-jp{
  font-weight: 700;
  font-size: 32px;
}

.review__wrap{
  display: flex;
  justify-content: space-between;
}

.review__each{
  flex-basis: calc(50% - 40px);
}

.review__comment{
  padding-left: 20px;
  border-left: solid 10px #DDD9FF;
  line-height: 200%;
  margin-bottom: 20px;
}

.review__author{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.review__icon{
  margin-right: 10px;
}

.review__name span{
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}