日本語用のhtmlの雛形を提示する。以前は、ブラウザの対応状況もあって細かいテクニックも必要だった。現在のブラウザでは、HTML5/jquery/utf8だけの対応で十分でろう。shift jisを振り回さないといけなかった頃が懐かしい。なお、この雛形は文法的な側面が強く、デザインがされていない点に留意してほしい。

2018/07/19 cssとjquery部分を加えた。
2018/07/20 webサイトからhtml(jquery CDN)ダウンロードできるようにした。

webサイトからダウンロード

githubも考えたが、ファイルが細かすぎ管理が煩雑になるので、今回は専用のWebサイトを用意した。

概要	url
html(jquery CDN)	https://00index.com/basefile/html.html
stylesheet	https://00index.com/basefile/style.css

curlを使う場合の例

curl https://00index.com/basefile/html.html > html.html
curl https://00index.com/basefile/style.css > style.css

HTMLの例

jquery CDNを使う

html.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"  href="style.css">
<title>タイトル</title>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>
<body>
<main>
<p>Hello World</p>
</main>
<script>
$(function(){
});
</script>
</body>
</html>

jquery CDNを使わない

html.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"  href="style.css">
<title>タイトル</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<main>
<p>Hello World</p>
</main>
<script>
$(function(){
});

</script>
</body>
</html>

jqueryの入手方法

curl  https://code.jquery.com/jquery-3.3.1.min.js

stylesheet(css)の例

上記HTMLの例ではスタイルシートを参照している。

stylesheet.css

@charset "utf-8";
p { /* 段落の一文字目を字下げする */
       text-indent: 1em;
}

htmlの雛形