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

この節について

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

各ディレクトリの役割

publicディレクトリ

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

src/scssディレクトリ

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

src/scss/baseディレクトリ

SCSS全体に影響があるファイルをこのbaseディレクトリに格納します。
設定ディレクトリの役割も兼ねています。

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

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

src/scss/modulesディレクトリ

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

モジュールとは、header、footer、buttonなどのひとかたまりの部品のことです。
詳細は後の章で解説していきます。

src/scss/layoutsディレクトリ

レイアウトの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で除外しています。
また、:hoverに関してもテキストリンクとボタンでは全く違うスタイルを適用したいという意図から、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でブレークポイントを設定することになると思います。

また、ソースコードのコメントとしても記述していますが、$g__ は私がSCSSのグローバル変数に使用している命名規則です。

変数については、別の機会に詳しく説明したいと思います。

続きはこちら

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