スタイリングの準備をする
objectフォルダ内のprojectフォルダ内に_solution.scssファイルを作成します。
そして、style.scssに_solution.scssを呼び出すよう文面を追加します。
style.scss
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
@use "./object/component/button";
@use "./object/component/inner";
/*-------------------
* project
-------------------*/
@use "./object/project/fv";
@use "./object/project/theme";
+ @use "./object/project/solution";
/*-------------------
* object
-------------------*/
@use "./object/utility/display";
HTMLを振り返る
まずHTMLの構造を振り返っておきます。index.htmlのp-solution部分をスタイリングしていきます。
index.html
<!-- .p-solution -->
<section class="p-solution c-section">
<div class="c-inner">
<h2 class="c-section__title">
書籍『LPをつくって学ぶSass×FLOCSS』なら
</h2>
<ul class="p-solution__lists">
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
<p>Sass×FLOCSSを<br />実際に書きながら学べる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt=""
/>
<p>現場レベルのHTML/CSSの<br />技術を体感できる</p>
</li>
<li class="p-solution__list">
<img
src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1052&q=80"
alt=""
/>
<p>つくったLPは<br />ポートフォリオに掲載OK！</p>
</li>
</ul>
</div>
</section>
<!-- /.p-solution -->
p-solution__lists部分のスタイリング
c-sectionやc-inner部分で大枠はほとんどスタイリングができているので、早速、p-solution__lists部分をスタイリングしていきましょう。
3カラムを横並びにしていくので、flexboxを使ってスタイリングします。
object/project/_solution.scss
@use "./../../foundation/variable" as *;
.p-solution {
&__lists {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
gap: 10px;
}
}
検証ツールで調整していくと便利です。
画面としてはこのようになりますね。
p-solution__list部分のスタイリング
続いて、p-solution__lists内の1つずつのp-solution__list部分をスタイリングしていきます。
Figma通りのデザインになるように余白や幅などCSSを書いていきます。
object/project/_solution.scss
@use "./../../foundation/variable" as *;
.p-solution {
// 中略
&__list {
text-align: center;
font-weight: bold;
background-color: $color-gray;
border-radius: 4px;
img {
width: 320px;
height: 320px;
object-fit: cover;
}
p {
padding: 10px 16px;
}
}
}
p-solution部分が以下のように表示されていればOKです。
最終的なコード
最終的に_solution.scssは以下のようなコードになります。
次はアコーディオンメニューのあるp-faqセクションのスタイリングですね。引き続き頑張っていきましょう！
object/project/_solution.scss
@use "./../../foundation/variable" as *;
.p-solution {
&__lists {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: stretch;
gap: 10px;
}
&__list {
text-align: center;
font-weight: bold;
background-color: $color-gray;
border-radius: 4px;
img {
width: 320px;
height: 320px;
object-fit: cover;
}
p {
padding: 10px 16px;
}
}
}