Chapter 12

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

ゆるけー

2022.04.19に更新

このチャプターの目次

スタイリングの準備をする
HTMLを振り返る
p-cv__content部分のスタイリング
最終的なコード

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

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

そして、style.scssに_cv.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";
+ @use "./object/project/cv";

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

HTMLを振り返る

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

index.html

<!-- .p-cv -->
<section class="p-cv c-section">
	<div class="c-inner">
		<h2 class="c-section__title">まずは試し読みから！</h2>
		<div class="p-cv__content">
			<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
		</div>
	</div>
</section>
<!-- /.p-cv -->

p-cv__content部分のスタイリング

p-cv__contentの最大幅や中央寄せのスタイリングをします。

object/project/_cv.scss

@use "./../../foundation/variable" as *;

.p-cv {
	&__content {
		max-width: 700px;
		margin: 0 auto;
		text-align: center;
	}
}

次に、p-cv内のc-buttonのスタイリングをしていきます。
cv部分なので少し大きめにデザインを調整していきましょう。

object/project/_cv.scss

@use "./../../foundation/variable" as *;

.p-cv {
	// 中略

	.c-button {
		display: block;
		margin: 10px auto;

		font-size: 2rem;
		border: 5px solid $color-accent;
	}
}

PCレイアウト時はより大きく強調するために、font-sizeをもう少し大きく設定します。

object/project/_cv.scss

@use "./../../foundation/variable" as *;

.p-cv {
	// 中略
	@include breakpoint(tablet) {
	}
	@include breakpoint(pc) {
		.c-button {
			font-size: 3.2rem;
		}
	}
}

最終的なコード

最終的に_cv.scssのコードは以下のようになります。
次はfooter部分のスタイリングをしていきます！長かったSassのスタイリングもラストスパートです。最後まで頑張っていきましょう！

object/project/_cv.scss

@use "./../../foundation/variable" as *;

.p-cv {
	&__content {
		max-width: 700px;
		margin: 0 auto;
		text-align: center;
	}

	.c-button {
		display: block;
		margin: 10px auto;

		font-size: 2rem;
		border: 5px solid $color-accent;
	}
	@include breakpoint(tablet) {
	}
	@include breakpoint(pc) {
		.c-button {
			font-size: 3.2rem;
		}
	}
}