【備忘録】HTMLのテンプレート

HTML

Last updated at 2024-11-05Posted at 2020-05-23

単独のHTMLのテンプレートです。
時々バージョンアップしたり追加したりします。

ソースコード

汎用版

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>

<script src="./script/basic.js"></script>
</body>
</html>

basic.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

basic.js

"use strict";

JavaScriptの名前空間

((global)=>{
    // 名前空間環境
    const jp      = global.jp || {};
    const module  = jp.hoge   || {};

    /** 公開関数 */
    const publicMethod = function() {
    };
    module.publicMethod = publicMethod;

    /** 非公開関数 */
    const privateMethod = function() {
    };
})(this);

jp.publicMethod(); // 呼出可
jp.privateMethod(); // 呼出不可

過去のバックアップ

...

Vue.js（CDN）版

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>
<div id='app' style="display:none">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="./script/basic.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: () => ({
  }),
  methods: {
  },
  mounted() {
    document.getElementById('app').style.display = "block";
  },
});
</script>
</body>
</html>

Vue.js ＋ ElementUI（CDN）版

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>
<div id='app' style="display:none">
  <el-container>
    <el-header>
    </el-header>
    <el-main>
    </el-main>
    <el-footer>
    </el-footer>
  </el-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/umd/locale/ja.js"></script>
<script src="./script/basic.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.ja);

const vm = new Vue({
  el: '#app',
  data: () => ({
  }),
  methods: {
  },
  mounted() {
    document.getElementById('app').style.display = "block";
  },
});
</script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up