第5章 - 0001 ページを作る準備をしよう

この節について

この節では、第5章を進めていくにあたって必要となるファイルの準備を行っていきます。

blog-service-top.scssの作成

第4章までに作成してきた src/scss/module-list.scss を同じディレクトリ内にコピー&ペーストして、そのファイル名を blog-service-top.scss にします。

blog-service-top.scssの編集

blog-service-top.scssでは、ワイルドカードのglobパターンを使用せず、以下の通り必要なファイルだけを一つずつimportします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.scss";

// layouts
@import "./layouts/l-body-inner-0001.scss";

// modules
@import "./modules/mod-button-0001.scss";
@import "./modules/mod-container-0001.scss";
@import "./modules/mod-footer-0001.scss";
@import "./modules/mod-header-0001.scss";
@import "./modules/mod-heading-0001.scss";
@import "./modules/mod-media-0001.scss";
@import "./modules/mod-media-0002.scss";

サイト全体のページ数やモジュール数が少なく、それ以上増えないことがわかっているサイトの場合は、module-list.cssを全てのページで共通して使用し続けても問題はありませんが、このチュートリアルでは、運用に伴ってページ数やモジュールが増えていく場合を想定して、ページごとにcssファイルを分ける方法を選択し、上記したように必要なモジュールだけをimportします。

public/stylesheets/blog-service-top.cssの生成

src/scss/blog-service-top.scss をコンパイルして、public/stylesheets/blog-service-top.css が生成されるようにSassの設定をして、 blog-service-top.css を生成してください。

blog-service-top.htmlの作成

第4章で作成した public/html/template.html を同じディレクトリ内にコピー&ペーストして、そのファイル名を blog-service-top.html にします。

第5章では、この public/html/blog-service-top.html にHTMLを記述していきます。

blog-service-top.htmlの編集

先ほど生成したblog-service-top.cssを読み込みますので、

1
<link rel="stylesheet" href="../stylesheets/module-list.css">

となっている箇所を

1
<link rel="stylesheet" href="../stylesheets/blog-service-top.css">

に変更します。

表示確認

public/html/blog-service-top.html をブラウザで開いて確認してみてください。

この節の終わりに

SCSSファイルとHTMLファイルの作成をして、準備が完了しました。

次の節では、コンテンツ領域内のレイアウトのクラスを作成していきます。

続きはこちら

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