Chapter 07

headerのコーディング

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

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

layoutフォルダ内に_header.scssファイルを作成します。

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

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

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

そうすると、_header.scssの内容がstyle.cssやstyle.min.cssに反映されるようになるので、早速_header.scssでスタイリングをしていきましょう。

HTMLを振り返る

まず、HTMLの構造を忘れているかと思うので振り返っておきます。

index.html
<!-- .l-header -->
<header class="l-header">
	<div class="c-inner">
		<div class="l-header__content">
			<a href="" class="l-header__logo"
				><img src="./asset/img/header-logo.svg" alt=""
			/></a>
			<a href="https://zenn.dev/yurukei20/books/10e7322a762178" class="c-button">Zennを読む</a>
		</div>
	</div>
</header>
<!-- /.l-header -->

構造としては、l-header__contentの中で横並びさせるというシンプルな構造になっています。

l-header部分のスタイリング

まず、l-header部分。
ここは固定させておきたいので、position:sticky; top:0;でスクロールしても追従させるようにさせます。
背景色はベースカラーを設定して、z-index:1;を設定しましょう。

layout/_header.scss
.l-header {
	position: sticky;
	top: 0;
	background-color: $color-base;
	z-index: 1;
}

c-innerのスタイリング

l-header内のコンテンツ部分をスタイリングする前に、それらを囲んでいるc-innerクラスをスタイリングしていきましょう。

c-innerは、ヘッダーだけでなく他のセクションなどにも使われる共通の要素なので、objectのなかのComponentにあたります。

では早速c-innerをスタイリングする準備としてobject/component内に_inner.scssを作成します。

作成した_inner.scssをstyle.scssで呼び出していきましょう。

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

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

+ /*--------------------------------------*
+  * object
+  *--------------------------------------*/
+ /*-------------------
+  * component
+  -------------------*/
+ @use "./object/component/inner";

準備が整ったところで、_inner.scssのスタイリングをおこなっていきます。

スタイリングする内容としては、大画面で表示したときの最大幅やコンテンツの余白などです。

object/component/_inner.scss
.c-inner {
	max-width: 1220px;
	margin: 0 auto;
	padding: 10px 30px;
}

l-header__content/l-header__logoのスタイリング

続いて、l-header内のコンテント部分やロゴ部分のスタイリングをしていきます。

まずl-header__contentは、ヘッダーのロゴとボタンを横並べ中央揃えにする必要があるので、flexboxを使って横並べしていきます。

layout/_header.scss
@use "./../foundation/variable" as *;

.l-header {
	// 中略

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

flexboxは書き方が混合しがちでよく間違えそうになりますが、Chromeの検証ツールを使えば視覚的に設定できるのでぜひ使ってみてください!

検証ツールの画面

では、続いてl-header__logo部分のスタイリングです。
スマホ時にロゴ画像が大きくなりすぎないようにmax-widthを当てておきます。

layout/_header.scss
@use "./../foundation/variable" as *;

.l-header {
	// 中略
	&__content {
		// 中略
	}

	&__logo {
		display: inline-block;
		max-width: 40%;
	}
}

c-buttonのスタイリング

ヘッダーのボタン部分のスタイリングを行っていきます。
ボタンもinnerと同様に他のセクションでも使うのでobject/component内で扱います。

object/componentフォルダ内に、_button.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";

では、c-buttonのスタイリングをしていきます。
インライン要素であるaタグに直接クラスを付けているので、インラインブロック要素としてpaddingやborderを設定していきます。

object/component/_button.scss
@use "./../../foundation/variable" as *;

.c-button {
	display: inline-block;
	padding: 3px 20px;
	color: $color-base;
	background-color: $color-accent;
	border: solid 2px $color-accent;
	border-radius: 50px;
	font-weight: bold;
	text-decoration: none;
	&:hover {
		color: $color-accent;
		background-color: $color-base;
	}
}

こうすると、以下のようなデザインのボタンになるかと思います。

最終的な_header.scssのコード

最終的に、_header.scssは以下のようなコードになります。

layout/_header.scss
@use "./../foundation/variable" as *;

.l-header {
	position: sticky;
	top: 0;
	background-color: $color-base;
	z-index: 1;

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&__logo {
		display: inline-block;
		max-width: 40%;
	}
}

では、続いてp-fv部分のスタイリングに移っていきます!