解説⑤カウンター(スコア)セクションの作成 | SkillhubAI(スキルハブエーアイ)

解説⑤カウンター(スコア)セクションの作成

SERVICESの下にある、スコアのようなものが書かれているデザインをコーディングします。

file

1.大まかなBOXを組む

カウンターのエリアでは4つのボックスが横並びになっています。 それに合わせてグリッドを組んでいきましょう。 file

 

こちらもヒーローエリアと同じように背景画像が固定なので、cssで設定します。 file

 

 

2.アイコンやテキストを配置

col-sm-3を適応したdivの中にアイコンとテキストを入れていきます。 アイコンを円で囲ったデザインは「SERVICES」エリアで使用した.ico-circleクラスのcssを一部変更(アレンジ)して使用します。 file

 

オリジナルcssを設定するのはcounter-boxico-circlecounterクラス の3つ。

file

セレクタを.counter-box .ico-circleとすることで「counter-boxクラスの要素の中にあるico-circleクラスは」と限定した形のスタイル指定になります。

 

ブラウザで表示を確認してみましょう。 設定したスタイルが効いていればOKです。 file

 

 

3.コピーして他3つも作成

一つのカウンターアイテムが出来たら、それをコピーして他3つを仕上げていきます。 ブラウザで確認してきれいに4つ並んでいれば完成です。

file