第1章 - 0002 基本的なディレクトリとファイルについて学ぼう

この節について

この節では、前の節で作成した基本的なディレクトリとファイルの役割や記述内容のポイントについて学んでいきましょう。

各ディレクトリの役割

publicディレクトリ

このpublicディレクトリをWebサイトを公開するときのrootディレクトリに見立てて、チュートリアルを進めていきます。

src/scssディレクトリ

このディレクトリは、SCSSファイルを格納するディレクトリです。

src/scss/baseディレクトリ

SCSS全体に影響があるファイルをこのbaseディレクトリに格納します。
SCSS全体に影響があるファイルを格納するという特徴から、設定ディレクトリとも言えます。

src/scss/base/global-variablesディレクトリ

SCSS全体で使用する変数を定義するファイルをこの配下のディレクトリに格納します。

src/scss/modulesディレクトリ

モジュールのSCSSファイルをここに格納します。

各ファイルの役割とポイント

public/html/module-list.html

モジュールの一覧を作成するためのHTMLファイルです。

src/scss/base/_default.scssについて

html5reset-1.6.1.cssでブラウザごとの差異を無くして、要素が持っているデフォルトのスタイルをリセットしていますが、それだけでは足りないので、この_default.scssで少し設定を追加します。

初期設定のファイルに多くの設定を書きすぎて失敗しているプロジェクトをこれまで多く見てきました。
あくまでも最低限のルールを記述することが、この_default.scssを作成するうえでの非常に重要なポイントです。

特に説明が必要なポイントとしては、aタグに関連する記述になると思いますので、aタグに関連する記述に焦点をあてて振り返っていきましょう。

まず以下の部分について説明します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
color: #0000E9;
&:not([class^="mod-button"]) {
&:link {

}
&:visited {
// color: #420278;
}
&:hover {
opacity: 0.7;
}
&:active {
// color: #FB0007;
}
}
}

これはボタンモジュール以外のaタグの設定です。
ボタンモジュールには :link :visited :active のスタイルを適用しないため、ボタンモジュールのクラスをnotで除外しています。

[class^="mod-button"] のような文字列の部分一致を利用する属性セレクタについてまだ知らないという方は、「css 属性セレクタ」などで検索して学習しておくと良いと思います。

話が少し逸れてしまいましたので話を戻します。

上記したソースコードのaタグ自体のcolorプロパティ color: #0000E9; は、ボタンクラス作成時に邪魔になりませんが、 :link :visited :active の設定は除外しておかないと詳細度が少し高い分、ボタンクラス作成時に邪魔になり、上書きの手間が増えるため除外しています。

このチュートリアルでは、ボタン以外のaタグのhoverに opacity: 0.7; を設定していますが、デザインのルールによっては設定しない方が良いので、ご自身でサイトを構築する際はそのままコピーしないように気をつけてください。

以下の :focus については、tabキーでブラウザを操作する人がどこの要素にフォーカスしているのかわかりやすいように、ボタンモジュールを除外せず、aタグ、buttonタグ、input[type=”submit”]にスタイルが適用されるようにしています。

1
2
3
4
5
6
7
8
a,
button,
input[type="submit"] {
&:focus {
box-shadow: 0 0 0 2px rgba(7, 71, 192, 0.5);
outline: none;
}
}

繰り返しになりますが、あくまでも最低限のルールを記述することが、この_default.scssを作成するうえでの非常に重要なポイントです。
ご自身でCSS設計をする際は心にとめておいてください。

src/scss/base/global-variables/media-queries/_media-queries.scssについて

media-queryのブレークポイントの変数を定義するファイルです。

制作時の要件によって数値は異なってくると思いますが、このチュートリアルではBootstrap5と同じ数値で設定しています。

また、BootstrapでのX-Largeに相当するブレイクポイントは省略しています。

Window幅の広いデバイスを基準としてスタイルを書いていく場合は、このチュートリアルのようにmax-widthでブレークポイントを設定しますが、Window幅の狭いデバイスを基準としてスタイルを書いていく場合はmin-widthでブレークポイントを設定することになると思います。

src/scss/modules/_mod-example-0001.scssについて

第2章で、最初のモジュールを作成するときに使用します。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る