Chapter 08

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

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

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

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

そして、style.scssに_fv.scssを呼び出すよう文面を追加します。

style.scss
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";

/*--------------------------------------*
 * layout
 *--------------------------------------*/
@use "./layout/header";

/*--------------------------------------*
 * object
 *--------------------------------------*/
/*-------------------
 * component
 -------------------*/

+ /*-------------------
+  * project
+  -------------------*/
+ @use "./object/project/fv";

HTMLを振り返る

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

index.html
<!-- .p-fv -->
<section class="p-fv">
	<div class="c-inner">
		<figure class="p-fv__content">
			<figcaption>
				<h1>
					<span class="u-inline-block"
						><span class="text-100">LP</span>をつくって学ぶ</span
					><span class="u-inline-block"
						><span class="text-96">Sass</span
						><span class="text-80">×</span
						><span class="text-96">FLOCSS</span></span
					>
				</h1>
				<p>
					現場で頻出のSassの使い方からFLOCSSの記法までを<br />LPをつくりながら学ぶ電子書籍!
				</p>
			</figcaption>
			<img src="./asset/img/fv-book.webp" alt="" />
		</figure>
	</div>
</section>
<!-- /.p-fv -->

p-fv/p-fv__contentのスタイリング

まず、p-fv部分のスタイリングからはじめます。背景色とテキストカラーを設定しておきましょう。

object/project/_fv.scss
@use "./../../foundation/variable" as *;

.p-fv {
	background-color: $color-main;
	color: $color-base;
}

続いて、p-fv__content部分のスタイリングです。PCではキャッチコピーと本の画像の横並びになっているので、flexboxを使っていきましょう。

object/project/_fv.scss
@use "./../../foundation/variable" as *;

.p-fv {
	// 中略

	&__content {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		align-items: center;
		gap: 18px;
		padding: 40px 0;
		max-width: 100%;
		font-weight: bold;
	}
}

続いて、p-fv__content内の各要素のスタイリングです。font-sizeやwidthなどを設定していきましょう。

object/project/_fv.scss
@use "./../../foundation/variable" as *;

.p-fv {
	// 中略

	&__content {
		// 中略
		
		figcaption {
			flex: 2;
		}
		h1 {
			font-size: 2.8rem;
			line-height: 1.2;
			margin-bottom: 40px;
			.text-100 {
				font-size: 5rem;
			}
			.text-96 {
				font-size: 4.8rem;
			}
			.text-80 {
				font-size: 4rem;
			}
		}
		p {
			font-size: 2.2rem;
		}
		img {
			flex: 1;
			width: 250px;
			box-shadow: -6px 6px 10px -2px #555, 0 0 3px #555;
			border-radius: 3px;
		}
	}
}

PCレイアウト時のスタイリング

続いてPCレイアウト時のスタイリングをしていきます。flexboxの並び方を変えつつ、font-sizeをPC仕様に変更していきます。

object/project/_fv.scss
@use "./../../foundation/variable" as *;

.p-fv {
	// 中略
	@include breakpoint(tablet) {
	}
	@include breakpoint(pc) {
		&__content {
			flex-direction: row;
			padding: 60px 0;
			figcaption {
				flex: 2;
			}
			h1 {
				font-size: 5.6rem;
				.text-100 {
					font-size: 10rem;
				}
				.text-96 {
					font-size: 9.6rem;
				}
				.text-80 {
					font-size: 8rem;
				}
			}
			p {
				font-size: 2.4rem;
			}
		}
	}
}

_display.scssのスタイリング

ここで、u-inline-blockが登場したので、object/utilityフォルダ内に_display.scssファイルを作成します。

作成した_display.scssファイルをstyle.scssにも反映させておきましょう。

style.scss
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
@use "./foundation/base";
@use "./foundation/variable";

/*--------------------------------------*
 * layout
 *--------------------------------------*/
@use "./layout/header";

/*--------------------------------------*
 * object
 *--------------------------------------*/
/*-------------------
 * component
 -------------------*/

/*-------------------
 * project
 -------------------*/
@use "./object/project/fv";

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

では、_display.scssにdisplay:inline-block;を設定します。

object/utility/_display.scss
.u-inline-block {
	display: inline-block;
}

こうすると、レスポンシブ対応する際にちょうどいい感じに改行がききます。

最終的なコード

最終的に_fv.scssのコードとしては以下のようになります。次からは各sectionのスタイリングをしていきます!

object/project/_fv.scss
@use "./../../foundation/variable" as *;

.p-fv {
	background-color: $color-main;
	color: $color-base;

	&__content {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		align-items: center;
		gap: 18px;
		padding: 40px 0;
		max-width: 100%;
		font-weight: bold;

		figcaption {
			flex: 2;
		}
		h1 {
			font-size: 2.8rem;
			line-height: 1.2;
			margin-bottom: 40px;
			.text-100 {
				font-size: 5rem;
			}
			.text-96 {
				font-size: 4.8rem;
			}
			.text-80 {
				font-size: 4rem;
			}
		}
		p {
			font-size: 2.2rem;
		}
		img {
			flex: 1;
			width: 250px;
			box-shadow: -6px 6px 10px -2px #555, 0 0 3px #555;
			border-radius: 3px;
		}
	}
	@include breakpoint(tablet) {
	}
	@include breakpoint(pc) {
		&__content {
			flex-direction: row;
			padding: 60px 0;
			figcaption {
				flex: 2;
			}
			h1 {
				font-size: 5.6rem;
				.text-100 {
					font-size: 10rem;
				}
				.text-96 {
					font-size: 9.6rem;
				}
				.text-80 {
					font-size: 8rem;
				}
			}
			p {
				font-size: 2.4rem;
			}
		}
	}
}