スタイリングの準備をする
objectフォルダ内のprojectフォルダ内に_theme.scss
ファイルを作成します。
そして、style.scssに_theme.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";
/*-------------------
* object
-------------------*/
@use "./object/utility/display";
HTMLを振り返る
まずHTMLの構造を振り返っておきます。index.htmlのp-theme部分をスタイリングしていきます。
<!-- .p-theme -->
<section class="p-theme c-section">
<div class="c-inner">
<h2 class="c-section__title">
<span class="u-inline-block">コーディング学習で</span
><span class="u-inline-block">よくある相談</span>
</h2>
<figure class="p-theme__content">
<img
src="https://images.unsplash.com/photo-1575089976121-8ed7b2a54265?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
alt=""
/>
<figcaption>
<ul class="p-theme__lists">
<li>HTML・CSSは勉強したけど、現場のスキルに合うか不安…。</li>
<li>現場でSassを使ってるみたいだけど全然わからない…。</li>
<li>CSSのクラス名が整理できずCSSの修正案件に時間がかかる…。</li>
<li>もっと整理されたCSSを書きたい!</li>
<li>FLOCSSの具体的な書き方を知りたい!</li>
</ul>
</figcaption>
</figure>
</div>
</section>
<!-- /.p-theme -->
c-sectionのスタイリング
まず、各セクションで共通の余白や背景色のスタイリング、各セクションのタイトルのスタイリングをしていきましょう。
各セクションで共通の要素なので、object/component
にあたります。object/component/_section.scss
を作成しましょう。
ファイルを作成したら忘れずstyle.scssにも反映させます。
/*--------------------------------------*
* foundation
*--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";
/*--------------------------------------*
* layout
*--------------------------------------*/
@use "./layout/header";
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
@use "./object/component/button";
@use "./object/component/inner";
+ @use "./object/component/section";
/*-------------------
* project
-------------------*/
@use "./object/project/fv";
@use "./object/project/theme";
/*-------------------
* object
-------------------*/
@use "./object/utility/display";
style.scssに反映させたら、早速c-section部分をスタイリングしていきます。
paddingを設定しつつ、背景色を設定しましょう。
背景色は奇数のときは$color-main-100
、偶数のときは$color-base
になるよう設定していきます。
@use "./../../foundation/variable" as *;
.c-section {
padding: 50px 0 90px;
background-color: $color-main-100;
&:nth-of-type(odd) {
background-color: $color-base;
}
}
ついでに、c-section__title部分のスタイリングもしておきましょう。
センター寄せにしつつ、font-sizeやfont-weight、余白を設定します。
@use "./../../foundation/variable" as *;
.c-section {
// 中略
&__title {
text-align: center;
font-size: 2.8rem;
font-weight: bold;
margin-bottom: 38px;
}
}
p-theme__contentのスタイリング
では、p-theme部分のスタイリングです。
p-theme自体はほぼc-sectionでまかなえてしまっているので、p-theme__contentからスタイリングしていきましょう。
p-theme__contentは横並びになっているので、flexboxで設定していきます。
flex-wrapで折返してくれるので、今回はスマホ版とPC版でflex-directionを変えなくても大丈夫です。
@use "./../../foundation/variable" as *;
.p-theme {
&__content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
gap: 32px;
img {
width: 420px;
height: 320px;
object-fit: cover;
}
}
}
flexboxは以下の画像のように検証ツールを使って実装すると便利なのでおすすめです。
p-theme__listsのスタイリング
続いて、p-theme__content内の、チェックリストであるp-theme__lists部分のスタイリングを行っていきます。
リストのbefore属性に、fontawesomeのチェックマーク(✔)にしたスタイリングをしていきます。
@use "./../../foundation/variable" as *;
.p-theme {
// 中略
&__lists {
font-size: 2rem;
li {
position: relative;
padding-left: 24px;
margin: 10px;
&:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
left: 0;
position: absolute;
}
}
}
}
ちなみに、リストで改行時の空白をつくって2行目以降を下げる方法については以下の記事で紹介しています。
最終的なコード
_theme.scssは最終的に、以下のようのコードになります。
続いて、3カラムのp-solutionセクションのスタイリングをしていきましょう!
@use "./../../foundation/variable" as *;
.p-theme {
&__content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
gap: 32px;
img {
width: 420px;
height: 320px;
object-fit: cover;
}
}
&__lists {
font-size: 2rem;
li {
position: relative;
padding-left: 24px;
margin: 10px;
&:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
left: 0;
position: absolute;
}
}
}
}