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

この節について

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

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

この節では最終的に以下のディレクトリ構造とファイルを作成します。
拡張子がないものはディレクトリです。

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
           ├── layouts
           └── modules

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

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

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

コマンドで作成する場合

WindowsのコマンドプロンプトもMacのターミナルも任意の場所で以下のコマンドを実行するとtutorialディレクトリが作成されます。

1
mkdir tutorial

tutorialディレクトリに移動する

WindowsのコマンドプロンプトもMacのターミナルも以下のコマンドでtutorialディレクトリに移動できます。

1
cd tutorial

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

さきほど「この節で最終的に作成するディレクトリ構造とファイル」で示したディレクトリ構造になるように、空のディレクトリを作成していきます。
コマンドで作成しても良いですし、右クリックなどで開くコンテキストメニューなどからでも良いです。

Windowsのコマンドプロンプトで作成する場合

tutorialディレクトリ内で以下のコマンドを実行するとディレクトリが作成できます。
以下のコマンドをコピー＆ペーストすると楽だと思います。
\(バックスラッシュ)のキーを押すと¥が入力されるかもしれませんが問題ありません。

1
mkdir public\html public\stylesheets src\scss\base\global-variables\media-queries src\scss\layouts src\scss\modules

Macのターミナルで作成する場合

tutorialディレクトリ内で以下のコマンドを実行するとディレクトリが作成できます。
以下のコマンドをコピー＆ペーストすると楽だと思います。

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

空ファイルを作成する

さきほど「この節で最終的に作成するディレクトリ構造とファイル」で示したファイル構成になるように、空のファイルを作成していきます。
コマンドで作成しても良いですし、右クリックなどで開くコンテキストメニューなどからでも良いです。

Windowsのコマンドプロンプトで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。
以下のコマンドをコピー＆ペーストすると楽だと思います。
\(バックスラッシュ)のキーを押すと¥が入力されるかもしれませんが問題ありません。

1
2
3
4
copy nul public\html\module-list.html
copy nul src\scss\module-list.scss
copy nul src\scss\base\_default.scss
copy nul src\scss\base\global-variables\media-queries\_media-queries.scss

Macのターミナルで作成する場合

tutorialディレクトリ内で以下のコマンドを実行すると空ファイルが作成できます。
以下のコマンドをコピー＆ペーストすると楽だと思います。

1
touch public/html/module-list.html src/scss/module-list.scss src/scss/base/_default.scss src/scss/base/global-variables/media-queries/_media-queries.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
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

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";

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を生成してください。

これで準備は完了です。

続きはこちら

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