「Web起業を成功させる学習フロー」のセクションを作っていきます。
ブロックの横に区切りの縦線が入っていたり、いなかったり。最後だけ矢印ではなくなっていたりと、場所によって細かい部分が違います。ぞれぞれ別のクラスを命名するのではなく、擬似クラスを使ってスタイル指定する方法を使ってみましょう。
1.大まかなレイアウトを作る
1-1.セクション背景と見出し
セクションの背景色と見出し部分を作ってしまいましょう。
以下のCSSクラスを新たに作成します。
.bg-lgray：薄いグレーの背景色を設定するためのクラス.pt-5rem：背景色内で、上部に余白をつくるためのクラス
lp.html
<!-- ============================
/ 学習フロー
/============================= -->
<section class="bg-lgray">
<div class="container pt-5rem">
<h2 class="col-10 mx-auto mt-0 text-center">
Web起業を成功させる学習フロー
</h2>
</div><!-- /.container -->
</section>
style.css
/* 共通クラス - わかりやすい場所に追加してください */
.bg-lgray{
background-color: #F4F4F2;
}
.pt-5rem{
padding-top: 5rem;
}
1-2.フロー部分の枠組み
STEP1～キャラクター+吹き出し部分までを作ります。
ol要素を使います。
3ブロックずつ横並びに出来るようにolタグには.row、liタグには.col-4を設定します。
lp.html
<!-- ============================
/ 学習フロー
/============================= -->
<section class="bg-lgray">
<div class="container pt-5rem">
<h2 class="col-10 mx-auto mt-0 text-center">
Web起業を成功させる学習フロー
</h2>
<ol class="row mt-5rem">
<li class="col-4"></li>
<li class="col-4"></li>
<li class="col-4"></li>
<li class="col-4"></li>
<li class="col-4"></li>
<li class="col-4"></li>
</ol>
</div><!-- /.container -->
</section>
ブラウザで見てみると、3ブロック横並び配置になっていることがわかります。
それぞれスタイル指定を行うために、ol要素には「flow」クラス、li要素には「flow-item」クラスを加えます。
ただし、6つ目のli要素はデザインが違うため、クラス名も「flow-comment」と別にしておきます。
lp.html
<ol class="flow row mt-5rem">
<li class="col-4 flow-item"></li>
<li class="col-4 flow-item"></li>
<li class="col-4 flow-item"></li>
<li class="col-4 flow-item"></li>
<li class="col-4 flow-item"></li>
<li class="col-4 flow-comment"></li>
</ol>
とりあえず.flowに、ブラウザスタイルの打ち消しだけ書いておきましょう。
style.css
.flow{
list-style: none;
padding-left: 0;
}
2.STEP1～5の作成
2-1.STEP1を作ってみる
STEP1を作りながら、必要なスタイル指定も書いていきます。
今回の範囲で難しいのは、それぞれのカラムを囲う枠（のように見せかけている）部分です。
上部のSTEP●と矢印は、下図のイメージで作っています。
コードにするとこうなります。
lp.html
<li class="col-4 flow-item position-relative">
<span class="flow-item-step bg-yellow">STEP1</span>
<div class="flow-item-arrow position-absolute"></div>
</li>
style.css
.flow-item-step{
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 40px;
font-size: 21px;
}
.flow-item-arrow{
top: 20px;
left: 115px;
right: 5px;
border-top: 1px solid #4D4D4D;
}
.flow-item-arrow::after{
content: "";
position: absolute;
top: -5px;
right: -5px;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #4D4D4D;
}
次に、縦の区切り線。
.flow-itemで疑似要素を作り、border-rightを指定します。
.flow-itemに直接borderをつけないのは、線の高さ（長さ）と位置を調整するためです。
style.css
.flow-item::after{
content: "";
position: absolute;
top: 15%;
bottom: 5%;
right: 0;
height: 80%;
border-right: 1px solid #4D4D4D;
}
空divだと分かりにくいので、画像とテキストもいれてみましょう。
lp.html
<li class="col-4 flow-item position-relative">
<span class="flow-item-step bg-yellow">STEP1</span>
<div class="flow-item-arrow position-absolute"></div>
<div class="text-center">
<h3>目標の決定</h3>
<img src="images/flow1@2x-8.png" alt="目標の決定" class="w-max100">
</div>
<p>
「何を目標」にするのか、それは「いつまでに達成するのか」を決定します。例えば「6月までにサービスをローンチする」や「今年中にユーザーを1000人獲得する」などなんでも構いません。
</p>
</li>
装飾部分はイメージした形になりました。
コンテンツ部分（テキスト、画像）の余白やサイズを調整しましょう。
style.css
.flow-item,
.flow-comment{
margin-top: 2.5rem;
}
.flow-item h3{
font-size: 21px;
margin-bottom: 1.5em;
}
.flow-item p{
padding: 0 0.5em;
}
.flow-item img{
width: 150px;
height: auto;
}
STEP1部分完成です。
2-2.STEP5まで増やす
STEP1部分を複製して、STEP5まで作っていきましょう。
下図のような表示になるはずです。
下記の3箇所を直して、デザインに準じた表示を作ります。
- li要素の上下に余白を増やす
- STEP3とSTEP5のborder-rightを無くす
- STEP5の矢印を、縦線に変更する
まず、余白の追加だけしておきましょう。
style.css
.flow-item,
.flow-comment{
margin-top: 2.5rem;
}
2-3.特定箇所のborder-rightを無くす（擬似クラス使用）
STEP3とSTEP5だけborder-rightの表示を無くすために、疑似クラスを使ってみましょう。
擬似クラスは、指定した条件を満たした要素だけに指示が出来る仕組みです。
クラスを作った時と同じように扱うことができます。
擬似クラスは「:」を使って記述します。
マウスカーソルが重なったときのスタイルを指定する「:hover」も擬似クラスの一種。
今回の場合は、下記コードの:nth-child(●)部分が擬似クラスです。
style.css
.flow-item:nth-child(3)::after,
.flow-item:nth-child(5)::after{
border-right: none;
}
今回使っている:nth-child()は、カッコ内で「どの（何番目の）子要素を指定するか」を決めることが出来ます。
書き方はたくさんありますが、よく使うものを紹介します。
【よく使うnth-childの書き方】
| 反応箇所 | 記述 |
|---|---|
| ◯番目の子要素だけに反応 | :nth-child(◯) |
| 偶数番目の子要素に反応 | :nth-child(2n)もしくは:nth-child(even) |
| 奇数番目の子要素に反応 | :nth-child(2n-1)もしくは:nth-child(odd) |
| ◯の倍数の子要素に反応 | :nth-child(◯n) |
| ◯番目以降の子要素に反応 | :nth-child(n+◯） |
今回の場合は3番目と5番目、規則性を作りにくい数です。
シンプルに数字を入れて「何番目か」で指定しています。
擬似クラスと疑似要素が連なっているので分かりにくいですが、上のstyle.css記述で支持している内容はこのようなイメージです。
2-4.STEP5の矢印を、縦線に変更する
こちらも新しくクラスを作らず、上と同じように擬似クラスで対応してみましょう。
CSSの「読み込んだ順に上書きされる」という性質を使って、borderを一度クリアしたあとに指定し直します。
style.css
.flow-item:nth-child(5) .flow-item-arrow::after{
content: "";
position: absolute;
top: -8px;
right: 0px;
height: 16px;
width: 1px;
border: none; /* 三角の設定をリセット */
border-right: 1px solid #4D4D4D;
}
3.右下カラムの作成
最後のli要素を使って、キャラクターと吹き出し部分を作ります。
3-1.吹き出し部分
吹き出しはこれまでと同じく、疑似要素( ::after )で作りましょう。
lp.html
<li class="col-4 flow-comment">
<p class="flow-comment-baloon text-white position-relative">
コーチングの最後には「次回までにやっておくこと」の指示がでますので、ちょっとしたプレッシャーがかかり、学習ペースを作ることができます。
</p>
</li>
style.css
.flow-comment-baloon{
padding: 0.5em;
background-color: #4D4D4D;
border-radius: 12px;
}
.flow-comment-baloon::after{
content: "";
position: absolute;
left: 45%;
bottom: -25px;
border-style: solid;
border-width: 28px 28px 0 0;
border-color: #4D4D4D transparent transparent transparent;
}
STEP5のカラムと間隔が出来るよう、余白を加えます。
style.css
.flow-comment{
padding-top: 2.5rem;
padding-left: 2rem;
}
3-2.キャラクターの配置
下部に配置されたキャラクターは、flexボックスとネガティブマージンを使って配置します。
まず、li要素をflexbox化して「align-items: flex-end;」でコンテンツが下寄せに置かれるようにします。
lp.html
<li class="col-4 flow-comment d-flex align-items-end">
<p class="flow-comment-baloon text-white position-relative">
コーチングの最後には「次回までにやっておくこと」の指示がでますので、ちょっとしたプレッシャーがかかり、学習ペースを作ることができます。
</p>
<img src="images/flow-comment@2x.png" alt="" class="w-max100">
</li>
ブラウザで確認してみると、画像が大きいですね。
また、画像の下に隙間があり、デザインのように次セクションの背景と重なりません。
CSSで調整しましょう。
style.css
.flow-comment img{
width: 152px;
margin-bottom: -20px;
}
学習フロー部分、完成です。