120 行
5.7 KiB
HTML
120 行
5.7 KiB
HTML
<title>HTMLのパターン集 - 美々蝶々</title>
|
|
|
|
<h1>HTMLのパターン集</h1>
|
|
|
|
<ul>
|
|
<li>2023-08-13 (陰暦06月27日) たかし</li>
|
|
<li>最終更新日 2023-11-10 (陰暦09月27日)</li>
|
|
</ul>
|
|
|
|
<h2>序</h2>
|
|
|
|
<p>HTML の要素の遣ひ方、特に本文以外の細々とした部分のパターンを紹介します。</p>
|
|
|
|
<p>以前、<a href="./noclass.html">HTML から CLASS を無くすこと</a>を説明しました。ところが、CLASS が無い場合、HTML だけで見た目を整へようとして色々な要素タイプを場當たり的に使用してしまふことがあります。</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 で表現すると DT・DD の繋がりが曖昧になります。「メダカ」「カナヘビ」の2者が「ヘビではなく……」と繋がつて見えます。</p>
|
|
|
|
<dl>
|
|
<dt>メダカ</dt>
|
|
<dt>カナヘビ</dt><dd>ヘビではなくトカゲの仲間</dd>
|
|
<dt>クサガメ</dt>
|
|
<dt>ヌマチチブ</dt><dd>ハゼの1種</dd>
|
|
</dl>
|
|
|
|
<h2>3. ターミナルのマーク附け</h2>
|
|
|
|
<p>SAMP (サンプル出力) で全體を圍み、ターミナルアプリの畫面であることを表現します。次に、コマンドの部分を KBD (ユーザーの操作) で表現します。ユーザー名など、環境により異なる部分は STRONG などで強調するか、「ユーザー名」などの説明的な單語にして VAR (變數) で表現します。</p>
|
|
|
|
<p>このサイトの CSS では、見易さのために SAMP と KBD とで微妙に異なる文字色を設定しました。</p>
|
|
|
|
<pre><samp>$ <kbd><b>cd ; pwd</b></kbd>
|
|
/home/<var><i>ユーザー名</i></var>
|
|
$ <kbd><b>echo 'echo hello world' > 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.gif" alt="ゲーム中のドット繪:白い魚"></dt>
|
|
<dd>海のステージで登場する魚。プレイヤーが近附くと海から飛び出して來るぞ!</dd>
|
|
</dl>
|
|
|
|
<p>畫像を DD に置く場合:</p>
|
|
|
|
<dl>
|
|
<dt>その時の繪</dt>
|
|
<dd><img src="./images/fish.gif" alt="ドット繪で描いた白い魚"></dd>
|
|
</dl>
|
|
|
|
<h2>5. SNS投稿のマーク附け</h2>
|
|
|
|
<p>SNSの投稿を「埋め込む」方法は色々ありますが、筆者は簡潔な方法を考案しました。</p>
|
|
|
|
<p>まづ P 要素を置き、投稿者・日附・投稿の URL などを記述します。投稿の URL は CITE 要素で圍みます。次に BLOCKQUOTE 要素を置き、その中に投稿の本文を書きます。本文中のマーク附けはなるべく元の投稿のままにしておくべきだと考へますが、HTML 文書全體を通して正しいマーク附けにするための變更は仕方がありません。</p>
|
|
|
|
<p>例です:</p>
|
|
|
|
<p>2023-11-09 の「たかし (@tak4@social.076.moe)」の投稿 (<cite><a href="https://social.076.moe/notice/1073717">https://social.076.moe/notice/1073717</a></cite>):</p>
|
|
|
|
<blockquote>
|
|
<p>オフラインで動くWordPressみたいな物があればな。(あるかも?) 記事を書いて静的HTMLに出力して無料サーバーに配置できると良い。闇雲に「HTML手打ち」をすると記事が増えた時にメンテナンス性が下がるし「静的サイトジェネレーター」はマニアックだ。GUIで記事を作れる事が重要かと。</p>
|
|
</blockquote>
|
|
|
|
<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>
|