ページで見えてる方のタイトル
更新日：
Webサイト用のベース。
このページがそのまま下記のWebサイト用ベースで作ってある。
CSSも。
サーバーにシンプルなHTMLとCSSをUPして確認するためのもの。これを叩き台として手を加えて行くもよし。
本文の内容をここにつらつらと書いて下さい。
一行は<P></P>タグでくくること。
改行は<br>タグ
ザッと書きたいなら改行をすべて<br>だけで書くもよし。
もっと手を抜きたいなら全体を<pre><pre/>でくくってしまってもいい。
日本語を書きながらタグを英字で入れるのは面倒臭いので、日本語変換辞書に「ぶらんく」と「ぴー」でタグが変換で出てくるようにしているよ。そうしておくと簡単だからね。
「ぎゃくぴー」で「</p><p>」これが出るようにも登録してある。
「改行せずに書いてみたけど、読み直してみたら別の行に分けた方がよさそうだ」と思うこともあるので、そういう時に便利。
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.0">
<meta name="author" content="このサイトの著作権者の名前">
<meta name="description" content="検索結果一覧に表示されるこのサイトの説明をここに書く">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico">
<title>ブラウザのタブやお気に入りブックマークに表示される部分</title>
</head>
<body>
<!-- サイト全体ここから container -->
<div class="container">
<!-- directory -->
<div id="directory">
<span><a href="/index.html">top</a></span>>
<span><a href="/useful.html">useful</a></span>>
<span><a href="/base/index.html"></a>base</span>
</div>
<!-- /directory -->
<!-- content -->
<div class="content">
<!-- wroteday -->
<!-- 作成日でも更新日でもかまわない。書いた日を記述しておくのは重要。 -->
<h2>ページで見えてる方のタイトル</h2>
<p class="migi wroteday">作成日：
<time>2018-XX-XX</time>
</p>
<!-- /wroteday -->
<!-- entrytext -->
<div class="entrytext">
<p>Webサイト用のベース。</p>
<br>
<p>サーバーにシンプルなHTMLとCSSをUPして確認するためのもの。これを叩き台として手を加えて行くもよし。</p>
<br>
<p>本文の内容をここにつらつらと書いて下さい。</p>
<br>
<p>一行は<P></P>タグでくくること。</p>
<br>
<p>改行は<br>タグ</p>
<br>
<p>ザッと書きたいなら改行をすべて<br>だけで書くもよし。</p>
<br>
<p>もっと手を抜きたいなら全体を<pre><pre/>でくくってしまってもいい。</p>
<br>
<p>日本語を書きながらタグを英字で入れるのは面倒臭いので、日本語変換辞書に「ぶらんく」と「ぴー」でタグが変換で出てくるようにしているよ。そうしておくと簡単だからね。</p>
<br>
<p>「ぎゃくぴー」で「</p><p>」これが出るようにも登録してある。</p>
<p>「改行せずに書いてみたけど、読み直してみたら別の行に分けた方がよさそうだ」と思うこともあるので、そういう時に便利。</p>
<br>
</div>
<!-- /entrytext -->
</div>
<!-- /content -->
<!-- コピーライトここから -->
<div class="footer copyright">Copyright (c) 2018 "<a href="https://twitter.com/denkikaiden" title="ツイッターページを開く" target="_blank">でんきかいでん</a>" All Rights Reserved.</div>
<!-- コピーライトここまで -->
</div>
<!-- サイト全体ここまで /container -->
</body>
</html>
ピンク文字部分を書き換えて使う。
HTMLはコピーして、メモ帳などに貼り付けて（最新のメモ帳はUTF-8などの文字コードにも対応していて優秀）拡張子を「.html」にすればいい。
CSSも同じようにコピーしてメモ帳などのテキストエディタに貼り付けて、「.css」という拡張子で保存する。
「<」これは「<」これの特殊文字。
「>」これは「>」これの特殊文字。
私の場合はこれを「かっこひだり」と「かっこみぎ」でIMEに辞書登録してある。
この特殊文字を使って書かれたWebページ上のコードは、コピペしてそのまま.htmlのファイル形式にすれば使える。
たまに大文字で書く人も居るが、あれだとコピペしたそのままでは使えない。
で、更に
Webページ上で上記2つの特殊文字を見られるようにするためには、特殊文字中の1字「&」を更に特殊文字で書くことによって見えるようにしている。
「&」の特殊文字は「&」これ。
で、更に
この「&」（アンパサンドと読む）の特殊文字をWebサイト上に見えるようにするためには、上記と同じようにアンパサンドの特殊文字「&」の一部のアンパサンドを特殊文字に置き換えて書くことで、Webサイト上でも見られるようにしている。
CSS
@charset "utf-8";
@charset "utf-8";
/* reset */
body,
h2,
p,
img,
time {
padding: 0;
margin: 0;
border: none;
}
/* main */
body {
max-width: 720px;
margin: 0 auto;
background: #222;
word-break: break-all;
color: #ccc;
font-family: meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
}
h2 {
padding: 10px 15px 6px;
border-top: 1px solid #09f;
border-right: 1px solid #09f;
border-bottom: 1px solid #09f;
border-left: 15px solid #09f;
background: #222;
color: #ddd;
font-weight: bolder;
font-size: 110%;
}
h3 {
margin: 1rem 0;
padding: 10px 15px 6px;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 15px solid #aaa;
background: #222;
color: #ddd;
font-size: 100%;
vertical-align: bottom;
}
h4 {
margin: 5px 0 1em;
padding: 5px 15px;
border-bottom: 1px solid #ccc;
border-left: 15px solid #ccc;
color: #ddd;
font-size: 100%;
}
.wroteday {
padding: 5px;
color: #ddd;
font-size: 0.8rem;
}
#directory {
padding: 3px;
font-size: 0.9rem;
color: #ccc;
}
#directory a {
text-decoration: none;
}
/* frame */
.container {
margin: 10px;
padding: 0 1rem 1rem;
background-color: #333;
border: 1px solid #ddd;
}
.content {
margin: 0;
padding: 1rem 1.4rem;
background-color: #222;
border: 1px solid #ddd;
}
.entrytext {
margin: 0;
padding: 1rem;
word-break: normal;
word-wrap: normal;
}
/* aside */
.nakayose {
margin: 0 auto;
}
.mannaka {
margin: 0 auto;
text-align: center;
}
.migi {
text-align: right;
}
/* box */
.box250px {
width: 250px;
}
.box270px {
width: 270px;
}
.dddbox {
background: #ddd;
padding: 18px;
width: 270px;
border: 1px solid #aaa;
border-radius: 10px/10px;
}
/* code */
pre {
margin: 0;
padding: 0;
white-space: pre-wrap;
font-family: inherit;
}
code {
word-break: break-all;
word-wrap: break-word;
font-family: 'consolas', 'courier new', 'courier', 'monaco', monospace;
}
.codebox {
margin: 5px 0;
padding: 1em;
border: 6px solid #666;
border-radius: 10px/10px;
color: #ddd;
font-size: 80%;
line-height: 1.2em;
background: #111;
}
/* font */
.pink {
color: #f6c;
}
.deeppink {
color: deeppink;
}
.usuji {
color: #666;
}
.futoji {
font-weight: bold;
}
/* copyright */
.footer {
padding-top: 18px;
text-align: center;
}
.copyright {
font-size: small;
}
/* link */
a {
color: #09f;
text-decoration: none;
}
文字サイズ指定（の単位）には「px」「ex」「em」「%」「small,middle,large」「rem」などがあるが、各親要素から影響を受け続ける相対的な単位よりも、常に最上位要素からの相対サイズである「rem」を使う方がどういうサイズになるかわかりやすいのでオススメ。
bodyで62.5％を設定しておくことでわかりやすい10pxに固定し、そこから1.6rem(16px)などという風に使うのが流行ってるらしい。