第4章 1節 ブログサービスのトップページを作る準備をしよう

この節について

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

blog-service-top.scssの作成

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

blog-service-top.scssの編集

blog-service-top.scssでは、module-list.scssで使用していた*を使用せず、以下の通り必要なファイルだけを一つずつimportします。

1
2
3
4
5
6
7
8
9
10
11
12
// base
@import "./base/global-variables/media-queries/media-queries.scss";
@import "./base/default.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";

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の作成

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

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

blog-service-top.htmlの編集

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

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

となっている箇所を

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

に変更します。

次に、bodyの中を全て削除して以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="stylesheet" href="../stylesheets/blog-service-top.css">
</head>
<body>

</body>
</html>

この節のおわりに

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

次の節では、今回準備したコードを読み返しながら、新しいポイントについて解説していきます。

続きはこちら

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