Webページ作成用のファイルテンプレート
私がとりあえず書くやつをおいておきます
参考になるなら最初のテンプレとして使ってください
cf.
code:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>page-title</title>
<!-- ==== favicon設定 ==== -->
<!-- ==== OGP設定 ==== -->
<meta property="og:type" content="article">
<meta property="og:title" content="page-title">
<meta property="og:description" content="page-title">
<meta name="twitter:card" content="summary">
<!-- ==== PWA設定 ==== -->
<link rel="manifest" href="./manifest.webmanifest">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- ファイル読み込み -->
<link rel="stylesheet" href="style.css">
<script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>
code:script.js
//@ts-check
/** ================================================================================================
* テンプレート
================================================================================================= */
// --------------------------------------------------------------------------------
// ページのロード完了を待つ
// --------------------------------------------------------------------------------
await /** @type {Promise<void>} */ (new Promise(resolve => {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", () =>
resolve());
} else {
resolve();
}
}));
/**
* document.querySelectorのエイリアス
* @param {String} selector - CSSセレクタ
* @returns {Element | null}
*/
const $ = selector => document.querySelector(selector);
/**
* document.querySelectorAllのエイリアス
* @param {String} selector - CSSセレクタ
* @returns {Element[]}
*/
const $$ = selector => Array.from(document.querySelectorAll(selector));
/**
* Service Workerの登録
*/
if ('serviceWorker' in navigator) {
const registration = navigator.serviceWorker.register('_service-worker.js')
}
/** ================================================================================================
* 以下、本体
================================================================================================= */
code:style.css
/* =================================================================================
フォントの読み込み
================================================================================== */
/* ==== 'M PLUS 1p' - 通常フォント ==== */
/* ==== 'Ubuntu' - 英字デザインフォント ==== */
/* ==== 'M PLUS 1 Code' - 等幅フォント ==== */
/* ==== 'Zen Kurenaido' - 手書きフォント ==== */
/* ==== 'Font Awesome 6 Free' - アイコンフォント ==== */
/* =================================================================================
色変数
================================================================================== */
:root {
/* ==== Hue - 基準ブランドカラー ==== */
/* ==== Lightness - 明度 ==== */
--l0b: 20%;
--l1b: 25%;
--l2b: 30%;
--l3b: 35%;
--l4b: 40%;
--l0c: 80%;
--l1c: 85%;
--l2c: 90%;
--l3c: 95%;
--l4c: 100%;
--l0s: 0%;
--l1s: 5%;
--l2s: 10%;
--l3s: 15%;
--l4s: 20%;
/* ==== Chroma - 彩度 ==== */
--c0: 0;
--c1: 0.025;
--c2: 0.050;
--c3: 0.075;
--c4: 0.100;
}
@media (prefers-color-scheme: light) {
:root {
/* ==== Lightness - 明度 ==== */
--l0b: 82%;
--l1b: 86%;
--l2b: 90%;
--l3b: 94%;
--l4b: 98%;
--l0c: 30%;
--l1c: 25%;
--l2c: 20%;
--l3c: 15%;
--l4c: 10%;
--l0s: 25%;
--l1s: 20%;
--l2s: 15%;
--l3s: 10%;
--l4s: 5%;
}
}
/* =================================================================================
CSSのNormalize
================================================================================== */
* {
margin: 0;
border: 0;
outline: 0;
padding: 0;
box-sizing: border-box;
font: 1rem/1.125 'M PLUS 1p';
word-break: auto-phrase;
color: oklch(from var(--hue) var(--l0c) var(--c1) h);
}
:where(ul, ol, li) {
padding-left: revert;
}
/* =================================================================================
全体
================================================================================== */
body {
padding: 0.5rem 1rem;
width: 100%;
min-height: 100vh;
background-color: oklch(from var(--hue) var(--l0b) var(--c1) h);
&>*+* {
margin-top: 1rem;
}
}
code:service-worker.js
'use strict';
self.addEventListener('fetch', (event) => { // ファイルの受信が必要になったら
event.respondWith( // 受信結果は以下の通り返すものとする
fetch(event.request) // 必要なファイルをそのまま要求して
.then((response) => { // ファイルを受信したら
return response; // それをそのまま返す
})
);
});
code:manifest.webmanifest
{
"name": "page-title",
"short_name": "title",
"start_url": "./",
"display": "fullscreen",
"icons": [
{
"src": "./../img/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"background_color": "#224",
"orientation": "landscape",
"description": "Description"
}