Chapter 09

themeセクションのコーディング

とらべらー
とらべらー
2022.04.20に更新

スタイリングの準備をする

objectフォルダ内のprojectフォルダ内に_theme.scssファイルを作成します。

そして、style.scssに_theme.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";

/*-------------------
 * object
 -------------------*/
@use "./object/utility/display";

HTMLを振り返る

まずHTMLの構造を振り返っておきます。index.htmlのp-theme部分をスタイリングしていきます。

index.html
<!-- .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にも反映させます。

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になるよう設定していきます。

object/component/_section.scss
@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、余白を設定します。

object/component/_section.scss
@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を変えなくても大丈夫です。

object/project/_theme.scss
@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のチェックマーク(✔)にしたスタイリングをしていきます。

object/project/_theme.scss
@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行目以降を下げる方法については以下の記事で紹介しています。

https://zenn.dev/yurukei20/articles/075ef2d53d589b

最終的なコード

_theme.scssは最終的に、以下のようのコードになります。
続いて、3カラムのp-solutionセクションのスタイリングをしていきましょう!

object/project/_theme.scss
@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;
			}
		}
	}
}