全体を囲う枠の調整
セクション全体を囲う枠部分を調整します。
スマホのときには白い余白がありましたが、PCでは無くなっていますね。 ボーダーの太さも変わっています。
.users {
margin-top: 0;
border: solid 18px #008cdc;
}
見出しの調整
横並びに変更
吹き出しデザインの「ユーザーの声」が横並びになるように変更します。
HTMLでは横並びにするためのd-tb-flexとflex-wrapクラス、配置のために「users-h2img」と「users-h2」クラスを作成しました。
.users-h2img{
flex: 0 0 100%;
}
.users-h2{
flex: 0 0 90px;
}
.users-item-wrpper{
flex: 1;
}
考えていた形に、flexレイアウトは出来ました。 各要素の配置を合わせていきましょう。
見出し（画像・吹き出し）を修正
まずは、見出し画像「User's Voices」の位置を整えましょう。
画像は左揃えに変更、containerの左右paddingを0にするクラスを加えます。
.users-h2imgの上に余白を足して、位置を合わせます。 画像の大きさも調整します。
次にH2見出しの吹き出しを縦書き、左寄せに変更。 フォントサイズもPC幅のカンプに合わせます。
<div class="text-center text-tb-left users-h2">
<h2 class="text-white">
ユーザーの声
</h2>
</div>
.users-h2 h2{
font-size: 40px;
writing-mode: vertical-rl;
}
width,margin,等をカンプと重なるように調整します。 ::beforeで作っている三角形の向きと位置も変えましょう。
ユーザーのコメント部分を調整
見出しまわりが整ったので、次はユーザーの写真とコメントが横並びになる部分（.users-item）を整えます。
1.幅を合わせる
今の段階では.users-itemの幅が広すぎますね。 カンプの方で測ってみると幅は770pxくらいのようです。
まずは最大幅を設定して、配置を作りましょう。
<div class="users-item-wrpper">
<div class="users-item mx-auto">
<div class="users-item_img mx-auto">
...
.users-item{
max-width: 770px;
}
うーん。重ねたカンプとズレていますね。
完全な中央配置ではないようです。
.users-item-wrpperにpaddingを付けて、中央の位置をちょっとずらしましょう。
.users-item-wrpper{
flex: 1;
padding-right: 30px;
}
※.users-item{margin-left: 145px;}等でも配置は出来ます。
2.写真とコメントを横並びにする
「d-tb-flex」クラスを使って、写真とコメントを横並びにします。
<div class="users-item mx-auto d-tb-flex">
borderを付ける部分、吹き出しの形を変更します。
.users-item_comment{
flex: 1;
border: solid #008cdc;
border-width: 0 2px;
}
.users-item_comment::after,
.users-item_comment::before {
bottom: calc(50% - 15px);
left: 0%;
width: 0;
height: 0;
}
.users-item_comment::before {
border-style: solid;
border-width: 16px 23px 16px 0;
border-color: transparent #008cdc transparent transparent;
margin-left: -23px;
margin-bottom: 10px;
}
.users-item_comment::after {
border-style: solid;
border-width: 15px 22px 15px 0;
border-color: transparent #FFF transparent transparent;
margin-left: -20px;
margin-bottom: 11px;
}
見た目がカンプに近づいてきました。
写真を囲っているdiv.users-item_imgにつけている、mx-autoクラスが邪魔ですね。
「mx-tb-0」という共通クラスを作って、左右マージンをゼロにする＝中央配置を打ち消すと配置しやすくなりそうです。
flexコンテナにしたdiv.users-itemには「justify-content-between」クラスを追加します。
<div class="users-item mx-auto d-tb-flex justify-content-between">
<div class="users-item_img mx-auto mx-tb-0">
<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 class="py-0">
山路やまみちを登りながら、こう考えた。智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。山路やまみちを登りながら、こう考えた。智ちに働けば角かどが立つ。情じょうに棹さおさせば流される。意地を通とおせば窮屈きゅうくつだ。とかくに人の世は住みにくい。
</p>
</div>
</div>
.mx-tb-0{
margin-left: 0;
margin-right: 0;
}
左右ボックスの位置が合いました。
あとはフォントサイズや各要素の上下余白を調整し、概ねカンプに重なる位置に持ってくればOKです。
タブレット幅の調整
タブレット幅でも見やすいように、CSSを調整していきます。
今回のセクションは、そこまで大きな崩れはありませんね。 青いボーダーの内側（左）、横並びにしたdivの間に余白を入れると、見られる形になりそうです。
今使用している「px-tb-0」クラスではなく、PC幅の時に左右paddingがゼロになるクラスを作ります。
左右均等に余白がつくよう、.users-item-wrpperにつけているpadding-rightもPC幅のみの設定に移動しましょう。
.users-item_commentにmargin-leftを付ければ、タブレットでもPC幅を縮小したような表示になるはずです。
タブレットとのCSS振り分けまでを終えたデモコードは、素材からダウンロードして確認いただけます。