Chapter 06

foundationのコーディング

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

この章からは、Scssのコーディングを解説していきます。

まずはランディングページの基礎部分をコーディングしていきます。
ある程度HTML/CSSでコーディングしたことがある方は実装したことがあるであろう、box-sizing:border-boxとかの初期設定的なやつを実装していきますね。

この基礎部分は、Scssのフォルダでいうと、foundation部分に当たります。

ファイルを準備する

では、早速ファイルを準備していきましょう。

foundation内に、_base.scssファイルを作成します。
あと、今回は色を一括で管理したいので、_color.scssファイルも作成します。

scss
 style.scss
└─foundation
   _base.scss
   _variable.scss

ちなみに、foundation内のScssファイルに_を入れるのはCSSにコンパイルされないようにするためです。
もしbase.scssにすると、コンパイルと同時にCSSファイル内にstyle.cssだけでなくbase.cssというファイルも出力されてしまいます。

style.scssのコーディング

それではScssのコーディングをしていきます。

ただ、このままScssのコーディングをしてもCSSファイルに変換されません。(_を付けているため)
なので、style.scssを使って_base.scssや_color.scssを呼び出しましょう。(importしましょう。)

scssファイル直下のstyle.scssをコーディングしていきます。

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

これで_base.scssや_variable.scssがCSSファイルに変換されるようになります。(.scssなどの拡張子は省略できます。)

試しに、_base.scssをいじってみましょう。

_base.scss
body{
  color:#f00;
  h1{
    font-size:20px;
  }
}

とコーディングして、VisualStudioCodeのWatch Sassをクリックします。
そうすると、asset/css/ファイル内にstyle.cssファイルなどが出力されるかと思います。

asset/css/style.css
body{
  color:#f00;
}
body h1{
  font-size:20px;
}

となっていれば無事にScssファイルがCSSに変換されているので大丈夫です!
このコードは今回使わないので、消しておきましょう。(_base.scssのコードだけ消せばCSSファイルもコードが消えます。)

base.scssのコーディング

それでは、_base.scssをコーディングしていきます!

よく使う便利な初期設定

まずは、設定しておくと何かと便利な初期設定のスタイリングを当てていきます。

flexboxをする際に使う定番のbox-sizingを取り敢えず当てましょう。

_base.scss
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

次に、font-sizeやline-heightも設定していきます。

font-size:62.5%;で、1rem = 10pxとして計算できるのでこちらを設定しておきます。
line-heightは1.6か1.7くらいが余白としてちょうどいいので設定しておきます。
height: 100%;は正直、今回はあってもなくてもいいです。
scroll-behavior: smooth;でページ内のスクロールをスムーズにするよう設定します。

_base.scss
html {
	font-size: 62.5%;
	line-height: 1.6;
	height: 100%;
	scroll-behavior: smooth;
}

続いてbody部分。
クラス名で直接スタイリングしない文章などの設定を書くことが多いです。テキストのカラーリングや初期設定のfont-sizeやfont-familyなどを設定していきます。

_base.scss
body {
	color: #333333;
	font-size: 1.6rem;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", Meiryo, sans-serif;
	min-width: 350px;
	width: 100%;
	overflow-x: hidden;
}

続いてimgなどの設定。
画像サイズをやたら大きくしていた場合、はみ出したときにいちいちスタイリングするのも面倒なので、max-width:100%を設定しておきます。横幅が変動して縦横比がズレるのもいやなのでheight:auto;も設定しておきましょう。

_base.scss
img,
video,
object {
	max-width: 100%;
	height: auto;
	border: none;
	display: block;
}

aタグ周りの設定

次はリンクなどで必須のaタグの初期設定スタイリングをします。

テキスト系のaタグの基本設定です。
テキストのカラーやホバー時の動きなどを設定していきます。

_base.scss
a {
	color: #0066c0;
	text-decoration: underline;
	transition: 0.4s;
	&:hover {
		text-decoration: none;
	}
}

imgタグを囲むaタグのホバー時の動きは、別でわかりやすくしておきたいので、こちらも設定しておきます。

_base.scss
a:hover img {
	text-decoration: none;
	opacity: 0.8;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

_variable.scssのコーディング

次に、_variable.scssファイルのコーディングをしていきます。

カラーシステムの設定

LPで使うカラーリングを変数で一括管理したいので、_variable.scssとして以下のように定義しておきましょう。

_variable.scss
$color-base: #fff;
$color-main: #1b7c26;
$color-main-100: #f6fff7;
$color-main-200: #a0daa8;
$color-main-300: #6ebe79;
$color-accent: #f99f48;

$color-gray: #efefef;
$color-black: #333;

このように書けば、以下のようにカラーリングを使い回すことができて便利です。よくアクセントカラーを変える際には必須の設定ですね。

.text-black{
  // color:#333;
  color:$color-black;
}

ブレークポイントの設定

最後に、これは_base.scssで書くか迷いましたがブレークポイントの設定もスタイリングしていきます。

Sassを使うと、関数やif文を用いることができるので、一括でブレークポイントの管理ができます。定番なので自分は以下のコードをよくコピペして使いまわしています。

_base.scss
@mixin breakpoint($point) {
	@if $point == tablet {
		@media (min-width: 640px) {
			@content;
		}
	}
	@if $point == pc {
		@media (min-width: 750px) {
			@content;
		}
	}
}

これをスタイリングすれば、以下のようにメディアクエリを書くことができて便利です。

// min-width:640px
@include breakpoint(tablet) {
}

// min-width:750px
@include breakpoint(pc) {
}

最終的なfoundation部分のScssコード

最後にこの章でスタイリングしたコードを掲載しておきます。

style.scssファイル

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

_base.scssファイル

_base.scss
/* base
--------------------------- */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
	line-height: 1.6;
	height: 100%;
	scroll-behavior: smooth;
}
body {
	color: #333333;
	font-size: 1.6rem;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		"Hiragino Sans", Meiryo, sans-serif;
	min-width: 350px;
	width: 100%;
	overflow-x: hidden;
}

img,
video,
object {
	max-width: 100%;
	height: auto;
	border: none;
	display: block;
}
a {
	color: #0066c0;
	text-decoration: underline;
	transition: 0.4s;
}
a:hover {
	opacity: 0.8;
}
a:hover img {
	text-decoration: none;
	opacity: 0.8;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

_variable.scssファイル

_variable.scss
// color
// ──────────────────────────────
$color-base: #fff;
$color-main: #1b7c26;
$color-main-100: #f6fff7;
$color-main-200: #a0daa8;
$color-main-300: #6ebe79;
$color-accent: #f99f48;

$color-gray: #efefef;
$color-black: #333;

// breakpoint
// ──────────────────────────────
@mixin breakpoint($point) {
	@if $point == tablet {
		@media (min-width: 640px) {
			@content;
		}
	}
	@if $point == pc {
		@media (min-width: 750px) {
			@content;
		}
	}
}
@include breakpoint(tablet) {
}
@include breakpoint(pc) {
}

この章で基盤となるスタイリングができたので、次からは具体的なレイアウトをスタイリングしていきましょうー!