第1章 - 0001 基本的なディレクトリとファイルの準備をしよう

この章について

この章では、説明をしていくにあたって今後必要となるディレクトリやファイルなどの必要最低限の準備を行っていきます。

この章で最終的に作成するディレクトリ構造とファイル

この章では最終的に以下のディレクトリ構造とファイルを作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
└── tutorial
├── public
│ ├── html
│ │ └── module-list.html
│ └── stylesheets
│ ├── module-list.css
│ └── html5reset-1.6.1.css
└── src
└── scss
├── module-list.scss
├── base
│ ├── _default.scss
│ └── global-variables
│ └── media-queries
│ └──_media-queries.scss
└── modules
└── _mod-example-0001.scss

ディレクトリ構造とファイルを作成する

ダウンロードする場合

まず「 https://github.com/nakano-pixy/css_architecture_chapter_1_1 」から以下のスクリーンショットの「Clone」「Download ZIP」の順にクリックして、zipファイルをダウンロードします。

ダウンロード手順

zipファイルを展開して、中にあるtutorialディレクトリを任意の場所に移動させたら、このページ下部の「scssをコンパイルするための環境構築」から続けてください。

自分でディレクトリ構造とファイルを作成する場合

tutorialディレクトリを作成する

任意の場所にtutorialディレクトリを作成します。
コマンドで作成しても良いですし、右クリックなどで開くコンテキストメニューなどからでも良いです。

コマンドで作成する場合(Mac)

まず任意の場所で以下のコマンドを実行するとtutorialディレクトリが作成されます。

1
mkdir tutorial

以下のコマンドでtutorialディレクトリに移動できます。

1
cd tutorial

tutorialディレクトリ内に下層のディレクトリを作成する

tutorialディレクトリ内に下層のディレクトリを作成していきます。

コマンドで作成する場合(Mac)

tutorialディレクトリ内で以下のコマンドを実行していくとディレクトリが作成できます。
4行まとめてペーストしても大丈夫です。

1
2
3
4
mkdir -p public/html
mkdir -p public/stylesheets
mkdir -p src/scss/base/global-variables/media-queries
mkdir -p src/scss/modules

空ファイルを作成する

コマンドで作成する場合(Mac)

tutorialディレクトリ内で以下のコマンドを実行していくと空ファイルが作成できます。
5行まとめてペーストしても大丈夫です。

1
2
3
4
5
touch public/html/module-list.html
touch src/scss/module-list.scss
touch src/scss/base/_default.scss
touch src/scss/base/global-variables/media-queries/_media-queries.scss
touch src/scss/modules/_mod-example-0001.scss

html5reset-1.6.1.cssをダウンロードする

reset.cssはダウンロードしたものを使うことにします。

Google Code Archiveの「 https://code.google.com/archive/p/html5resetcss/downloads 」からhtml5reset-1.6.1.cssをダウンロードします。

ダウンロードしたcssファイルは以下のパスに格納します。
public/stylesheets/html5reset-1.6.1.css

public/html/module-list.htmlの編集

以下の内容を記述します。
html5reset-1.6.1.cssを読み込んでからmodule-list.cssを読み込むようにしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>中野ピク氏流CSS設計</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../stylesheets/html5reset-1.6.1.css">
<link rel="stylesheet" href="../stylesheets/module-list.css">
</head>
<body>

</body>
</html>

src/scss/module-list.scssの編集

以下の内容を記述します。

1
2
3
4
5
6
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// modules
@import "./modules/*";

@import "./modules/*"; のようにglobパターン * を使用していますが、環境によっては使用できないかもしれないので、その場合は一つずつファイルパスを指定してください。

src/scss/base/_default.scssの編集

以下の内容を記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
html {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
color: #222222;
}

body {
color: #222222;
line-height: 1.6;
}

a {
color: #0000E9;
&:not([class^="mod-button"]) {
&:link {

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

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

ul {
list-style: none;
}

textarea,
input[type="text"],
input[type="tel"],
input[type="password"] {
// iOSのフィールド内側のシャドウを無くす
appearance: none;
}

input::-ms-clear,
input::-ms-reveal {
// IE11のフィールドの×ボタンを非表示にする
visibility:hidden
}

src/scss/base/global-variables/media-queries/_media-queries.scssの編集

以下の内容を記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//
// media-queries変数について
//
// $g__はグローバル変数であることを表しています。
//

// 1200px未満
$g__is-lg: "only screen and (max-width:1199.98px)";

// 992px未満
$g__is-md: "only screen and (max-width:991.98px)";

// 768px未満
$g__is-sm: "only screen and (max-width:767.98px)";

// 576px未満
$g__is-xs: "only screen and (max-width:575.98px)";

// landscapeとportrait
$g__is-landscape: "only screen and (orientation:landscape)";
$g__is-portrait: "only screen and (orientation:portrait)";

// 印刷用
$g__is-print: "print";

src/scss/modules/_mod-example-0001.scssの編集

この章では編集しませんが空ファイルだけ作成しておきました。
第2章で編集します。

scssをコンパイルするための環境構築

「sass 環境構築 mac」「sass 環境構築 windows」などで検索すると良いと思います。

以下のことを行ってください。

  • sassのインストール
  • src/scss/module-list.scssをコンパイルして、public/stylesheets/module-list.cssが生成されるように設定

public/stylesheets/module-list.cssの生成

src/scss/module-list.scssをコンパイルして、public/stylesheets/module-list.cssを生成してください。

これで準備は完了です。

この章で作成したディレクトリの役割について

  • baseディレクトリにはスタイルを書いていく全体の土台となるファイルを格納していきます。
  • modulesディレクトリにはモジュールを格納していきます。

続きはこちら

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