init

.browserslistrc

@@ -0,0 +1,2 @@
+last 2 versions
+not dead

package.json

@@ -0,0 +1,35 @@
+{
+  "scripts": {
+    "dev": "webpack --mode development",
+    "watch": "npm-run-all -p watch:serve watch:pug",
+    "build": "npm-run-all -p build:webpack build:pug",
+    "build:webpack": "webpack --mode production",
+    "watch:serve": "webpack serve --mode development",
+    "build:pug": "pug src/pug/ --hierarchy -o dist/ -P",
+    "watch:pug": "pug src/pug/ --hierarchy -o dist/ -P -w"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "chokidar-cli": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-loader": "^7.0.0",
+    "pug": "^3.0.2",
+    "pug-cli": "^1.0.0-alpha6",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
+    "webpack-remove-empty-scripts": "^0.8.1"
+  },
+  "private": true
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')({grid: true})
+    ]
+};

src/js/index.js

@@ -0,0 +1,7 @@
+// import 文を使って sub.js ファイルを読み込む。
+import { hello } from "./sub.js";
+import { hello3 } from "./sub3.js";
+
+// sub.jsに定義されたJavaScriptを実行する。
+hello();
+//hello3();

src/js/sub.js

@@ -0,0 +1,8 @@
+// export文を使ってhello関数を定義する。
+export function hello() {
+    const test = {
+        "test": "../img/common/bg_gradation.jpg"
+    }
+    // alert("helloメソッドが実行された。");
+    alert(test);
+}

src/js/sub3.js

@@ -0,0 +1,4 @@
+// export文を使ってhello関数を定義する。
+export function hello3() {
+    alert("hello3メソッドが実行された。");
+}

src/pug/index.pug

@@ -0,0 +1,13 @@
+doctype html
+html(lang="ja")
+  head
+    meta(charset="UTF-8")
+    title Page Title
+    script(src="./js/index.js")
+    link(rel="stylesheet" href="./css/style.css")
+  body
+    header.l-header
+      h1.l-header__logo Logo
+    main.l-main
+      h2 main
+      p pug

src/scss/_foundation.scss

@@ -0,0 +1,2 @@
+@forward "foundation/variables";
+@forward "foundation/mixins";

src/scss/foundation/_animations.scss

@@ -0,0 +1,8 @@
+@keyframes fadeIn{
+  0%{
+    opacity:0
+  }
+  to{
+    opacity:1
+  }
+}

src/scss/foundation/_default.scss

@@ -0,0 +1,66 @@
+@use "../foundation" as *;
+
+html,
+body {
+  -webkit-text-size-adjust:100%;
+  background: $color-back;
+
+  color: $color-text;
+  font-size: $fs-default;
+  font-family: $ff-default;
+  text-rendering: optimizeLegibility;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  display: block;
+  min-width: 375px; // viewport-extra検証用のため、仮追加
+  height: 200vh; // スクロールするため、仮追加
+}
+
+[data-whatinput='mouse'] *:focus,
+[data-whatinput='touch'] *:focus {
+  outline: none;
+}
+
+
+img{
+  height:auto;
+  max-width:100%;
+  vertical-align:bottom
+}
+table{
+  border-collapse:collapse;
+  margin:0 auto;
+  width:100%
+}
+td,th{
+  border:1px solid #ccc;
+  vertical-align:top
+}
+input,textarea{
+  background-color:#fff;
+  border:1px solid #a7a6aa;
+  border-radius:2px;
+  margin:0;
+  padding:5px 7px
+}
+input[type=text],textarea{
+  border:1px solid #aaa;
+  outline:none;
+  -webkit-transition:all .3s ease;
+  transition:all .3s ease
+}
+input[type=text]:focus,textarea:focus{
+  border:1px solid #52a8ec;
+  -webkit-box-shadow:0 0 7px #52a8ec;
+  box-shadow:0 0 7px #52a8ec
+}