Chapter 10

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

ゆるけー
ゆるけー
2022.04.19に更新

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

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;
		}
	}
}