pattern

src/index.html

@@ -53,6 +53,8 @@
 	<dd>2023-06-22 (陰暦05月05日)</dd>
 <dt><a href="./bibis.html">BIBISの紹介</a></dt>
 	<dd>2023-07-17 (陰暦05月30日)</dd>
+<dt><a href="./pattern.html">HTMLのパターン集</a></dt>
+	<dd>2023-08-13 (陰暦06月27日)</dd>
 </dl>
 
 <h3>2.2. GNU/Linux・BSD</h3>
@@ -76,7 +78,7 @@
 	<dd>2023-03-29 (陰暦閏02月08日)</dd>
 <dt><a href="./w3m.html">w3mの紹介</a></dt>
 	<dd>2023-07-02 (陰暦05月15日)</dd>
-<dt><a href="./obsdupgrade.html">OpenBSD7.0から7.3にアップグレード方法</a></dt>
+<dt><a href="./obsdupgrade.html">OpenBSD 7.0から7.3にアップグレード方法</a></dt>
 	<dd>2023-08-24 (陰暦07月24日)</dd>
 </dl>
 

src/noclass.html

@@ -50,4 +50,5 @@
 <ol>
 	<li><a href="./webdesign.html">ウェブサイトの設計方針</a></li>
 	<li>CLASSの無いCSS</li>
+	<li><a href="./pattern.html">HTMLのパターン集</a></li>
 </ol>

src/pattern.html

@@ -0,0 +1,105 @@
+<title>HTMLのパターン集 - 美々蝶々</title>
+
+<h1>HTMLのパターン集</h1>
+
+<ul>
+	<li>2023-08-13 (陰暦06月27日) たかし</li>
+</ul>
+
+<h2>序</h2>
+
+<p>HTML の要素の遣ひ方、特に本文以外の細々とした部分のパターンを紹介します。</p>
+
+<p>以前、<a href="./noclass.html">HTML から CLASS を無くす事</a>を説明しました。ところが、CLASS が無ければ、なんとか見た目を整へようとして色々な要素タイプを場當たり的に使用してしまひがちです。</p>
+
+<p>一貫性のある見易いサイトにしたいなら、一貫性のある HTML を書き、見易い CSS を適用する事が有效だと考へます。これでサイトに規則性・反復性が生れます。</p>
+
+<p>筆者は今まで書いた HTML から共通のパターンを探して、それらを流用する事にしました。</p>
+
+<ul>
+	<li>サンプルでは、CSSが無效でも要素を區別できる樣に B や I を使用しますが、本來は不要です。</li>
+</ul>
+
+<h2>1.「ひとこと」パターン</h2>
+
+<p>UL の中に LI を 1つだけ置き、本文から分離された短文を表現します。</p>
+
+<ul>
+	<li><strong>ひとこと:</strong>これはサンプルです。</li>
+</ul>
+
+<h2>2.「補足附きリスト」パターン</h2>
+
+<p>LI 要素内で項目名の後に「--」「:」を置き、續けて補足を書きます。項目名を A・B・Code・Q などの要素で圍むのも良いでせう。</p>
+
+<p>次の例では、一般的でない生き物の名前に補足を添へてゐます。</p>
+
+<ul>
+	<li><b>メダカ</b></li>
+	<li><b>カナヘビ</b> -- ヘビではなくトカゲの仲間</li>
+	<li><b>クサガメ</b></li>
+	<li><b>ヌマチチブ</b> -- ハゼの1種</li>
+</ul>
+
+<p>この樣に一部の項目のみに補足が附く場合、DL・DT・DD で表現すると意味が曖昧になります。</p>
+
+<dl>
+<dt>メダカ</dt>
+<dt>カナヘビ</dt><dd>ハゼの1種</dd>
+<dt>クサガメ</dt>
+<dt>ヌマチチブ</dt><dd>ヘビではなくトカゲの仲間</dd>
+</dl>
+
+<h2>3. ターミナルのマーク附け</h2>
+
+<p>SAMP (サンプル出力) で全體を圍み、ターミナルアプリの畫面である事を表現します。次に、コマンドの部分を KBD (ユーザーの操作) で表現します。ユーザー名など、環境により異なる部分は VAR (變數) で表現します。</p>
+
+<p>このサイトの CSS では、見易さのためにSAMP と KBD とで微妙に異なる文字色を設定しました。</p>
+
+<pre><samp>$ <kbd><b>cd ; pwd</b></kbd>
+/home/<var><i>takashi</i></var>
+$ <kbd><b>echo 'echo hello world' &gt; hello</b></kbd>
+$ <kbd><b>./hello</b></kbd>
+ksh: ./hello: cannot execute - Permission denied
+$ <kbd><b>chmod +x hello</b></kbd>
+$ <kbd><b>./hello</b></kbd>
+hello world</samp></pre>
+
+<h2>4. 畫像のマーク附け</h2>
+
+<p>文書中の畫像には、説明文が附いたり「圖1」の樣なラベルが附いたりします。ALT 文字列には、畫像の代替となる、かつ、文章として自然な文言を指定します。</p>
+
+<p>畫像を DT に置く場合:</p>
+
+<dl>
+<dt><img src="./images/fish.png" alt="ゲーム中のドット繪:白い魚"></dt>
+        <dd>海のステージで登場する魚。プレイヤーが近附くと海から飛び出して來るぞ!</dd>
+</dl>
+
+<p>畫像を DD に置く場合:</p>
+
+<dl>
+<dt>その時の繪</dt>
+        <dd><img src="./images/fish.png" alt="ドット繪で描いた白い魚"></dd>
+</dl>
+
+<h2>A. 反復を重視</h2>
+
+<p>HTML 文書は大抵、複數の章を持ちます。1つの HTML 文書の中で各章の形を合せて同じパターンを繰り返せば、讀み心地がよくなります。そして、大事な箇處をパターンから逸脱させれば強調になります。</p>
+
+<p>この文書の各章には、次のパターンを持たせました。</p>
+
+<ol>
+	<li>見出し</li>
+	<li>説明の段落(1つか2つ、1段落の文字數をなるべく揃へる)</li>
+	<li>HTML のサンプル</li>
+
+</ol>
+
+<h2>關聯</h2>
+
+<ol>
+        <li><a href="./webdesign.html">ウェブサイトの設計方針</a></li>
+        <li><a href="./noclass.html">CLASSの無いCSS</a></li>
+        <li>HTMLのパターン集</li>
+</ol>

src/style.css

@@ -1,4 +1,10 @@
-*
+html, body,
+h1, h2, h3, h4, h5, h6,
+address, blockquote, p, pre,
+br, cite, code, em, kbd, q, samp, strong, var,
+a,
+dl, dt, dd, ol, ul, li,
+img
 	{
 	font-size: 100%;
 	font-style: normal;
@@ -46,7 +52,6 @@ h2
 h3
 	{
 	border-width: thin 0 0;
-	margin: 0 0 0.8em;
 	}
 
 dl, ol, p, pre, ul
@@ -64,12 +69,12 @@ ul
 	list-style: disc;
 	}
 
-cite, q, blockquote
+blockquote, cite, q
 	{
 	color: #9d9;
 	}
 
-b, cite, dt, kbd, strong
+cite, dt, kbd, strong
 	{
 	font-weight: 600;
 	}

src/webdesign.html

@@ -50,4 +50,5 @@
 <ol>
 	<li>ウェブサイトの設計方針</li>
 	<li><a href="./noclass.html">CLASS無しのCSS</a></li>
+	<li><a href="./pattern.html">HTMLのパターン集</a></li>
 </ol>