日本語用の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;
}
#######誤りやもっといい方法など、ご指摘ください。