Chapter 13

footerのコーディング

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

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

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

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

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

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

/*--------------------------------------*
 * 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のl-footer部分をスタイリングしていきます。

index.html
<!-- .l-footer -->
<footer class="l-footer">
	<div class="c-inner">
		<div class="l-footer__content">
			<ul class="l-footer__lists">
				<li><a href="https://yurukei-career.com/">運営会社</a></li>
				<li>
					<a href="https://yurukei-career.com/toiawase-form/"
						>お問い合わせ</a
					>
				</li>
			</ul>
			<small>&copy;yurukei20</small>
		</div>
	</div>
</footer>
<!-- /.l-footer -->

.l-footer/.l-footer__content部分のスタイリング

まずは、l-footer部分とl-footer__contentのスタイリングからしていきます。

l-footer部分で、背景色とテキストカラーを設定します。
次に、l-footer__content部分を横並びにスタイリングしていきましょう。

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

.l-footer {
	background-color: $color-black;
	color: $color-base;

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 30px 0;
	}
}

flexboxを検証ツールで見るとこのようになります。

.l-footer__list部分のスタイリング

続いて、l-footer__list部分のスタイリングです。

index.html
<ul class="l-footer__list">
	<li><a href="https://yurukei-career.com/">運営会社</a></li>
	<li><a href="https://yurukei-career.com/toiawase-form/">お問い合わせ</a></li>
</ul>

ここも横並びにしたいので、flexboxで設定していきます。gapも10px設定しましょう。aタグはデフォルトのカラーだと違和感あるのでベースカラーに設定します。

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

.l-footer {
	// 中略
	
	&__lists {
		display: flex;
		gap: 10px;
		padding: 0 0 30px;
		a {
			color: $color-base;
		}
	}
}

最終的なコード

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

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

.l-footer {
	background-color: $color-black;
	color: $color-base;

	&__content {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 30px 0;
	}
	&__lists {
		display: flex;
		gap: 10px;
		padding: 0 0 30px;
		a {
			color: $color-base;
		}
	}
}