reset.cssを自作してみた - Nukindex 開発ブログ

リセットCSSを導入した。

作成したもの

reset.css（自作）

期待する動き

デフォルトのマージンやパディングなどの無駄なスタイリングを削除し、ブラウザ間の差異を吸収する。

結果

不明

手順など

styles ディレクトリに reset.css を作成する。

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + renderer/
  |   |   + components/
  |   |   |   + app/
  |   |   |   |   + view.js
  |   |   |   |   + style.css
  |   |   |   |
  |   |   |   + header/
  |   |   |       + view.js
  |   |   |       + style.css
  |   |   |
  |   |   + renderer.js
  |   |
  |   + styles/
  |   |   + reset.css
  |   |
  |   + index.html
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

source/index.html

reset.css を読み込めるようにする。

<!DOCTYPE html>
<html>
<head>
  <title>Nukindex</title>
  <link rel="stylesheet" href="./styles/reset.css">
  <link rel="stylesheet" href="./styles/bundle.css">
</head>
<body>
  <div id="app"></div>

  <script src="./renderer/bundle.js"></script>
</body>
</html>

source/styles/reset.css

とりあえずよく気になる部分をリセットしてみた。

html, body {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-family:
      -apple-system, BlinkMacSystemFont,
      "Helvetica Neue",
      "Segoe UI",
      "Noto Sans Japanese",
      "ヒラギノ角ゴ ProN W3",
      Meiryo,
      sans-serif;
}

p {
  line-height: 1.5;
  font-size: 16px;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 32px;
}

h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: 16px;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

input,
textarea {
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  outline: none;
}

[hidden="true"] {
  display: none;
}

gulpfile.babel.js

CSSをビルドする関数を追加する。 React 用のCSSはビルドしたくないので gulp.src から renderer 以下を除外する。

import gulp from "gulp";
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";
import transform from "vinyl-transform";
import cssModulesify from "css-modulesify";

gulp.task("build", () => {
  buildHTML();
  buildCSS();
  buildRenderer();
});

function buildHTML() {
  gulp.src(["source/**/*.html", "!source/renderer/**/*"])
      .pipe(gulp.dest("build"));
}

function buildCSS() {
  gulp.src(["source/**/*.css", "!source/renderer/**/*"])
      .pipe(gulp.dest("build"));
}

function buildRenderer() {
  browserify({
    "entries": ["source/renderer/renderer.js"],
    "extensions": ["", ".js", ".jsx", ".css"]
  }).plugin(cssModulesify, {
    "output": "./build/styles/bundle.css"
  }).transform(babelify).bundle()
      .pipe(source("bundle.js"))
      .pipe(gulp.dest("build/renderer"));
}

nukindex.com