60 行
2.8 KiB
HTML
60 行
2.8 KiB
HTML
<title>ウェブサイトの設計方針 - 美々蝶々</title>
|
|
|
|
<h1>ウェブサイトの設計方針</h1>
|
|
|
|
<ul>
|
|
<li>2022-12-27 たかし</li>
|
|
<li>最終更新日: 2023-10-12 (陰暦08月28日)</li>
|
|
</ul>
|
|
|
|
<p>このサイトの設計方針です。筆者は w3m を愛用するから、テキストブラウザーを贔屓します。方針が変化したら、この記事の内容も更新します。</p>
|
|
|
|
<h2>1. 文章を優先</h2>
|
|
|
|
<p>筆者は、ウェブサイトの本質は文章であり、その次に HTML や CSS が来ると信じます。サイトを改善する一番の方法は文章を工夫する事です。</p>
|
|
|
|
<p>例をあげると、読み辛いなら文節の並びを調節する、見た目のバランスが悪いなら段落の区切りを調節する、などです。</p>
|
|
|
|
<h2>2. 見出しを活用</h2>
|
|
|
|
<p>筆者は、段落のまとまりを見出しで区切る事が好きです。見出しは文章に適度な余白を生み、文章を読みやすくします。</p>
|
|
|
|
<p>見出しに番号を振ると、紙の本のページ数と同じく、どこまで読んだか分かり易くなります。「1」「2」の様な番号だけの見出しも有用です。</p>
|
|
|
|
<h2>3. ナビゲーションは最小</h2>
|
|
|
|
<p>このサイトにはヘッダーが無く、フッターも最小限です。各文書に共通のヘッダー・フッターを付けると、HTML が大きくなるからです。</p>
|
|
|
|
<p>また、ヘッダーが無ければ本文が最初に来るから「本文へ」のリンクが不要になります。</p>
|
|
|
|
<h2>4. CSS について</h2>
|
|
|
|
<p>このサイトの CSS の特徴です。</p>
|
|
|
|
<ul>
|
|
<li>省スペース、少ない色数を目指した</li>
|
|
<li>見出しのフォントや前後の余白を小さ目にした -- 見出しを沢山置くため</li>
|
|
<li>暗めの背景色、白い文字色を採用した -- 眼に優しくするため</li>
|
|
<li>水色を見出し、コンピューター関連の色にした</li>
|
|
<li>黄色をリンク文字専用の色にした</li>
|
|
<li>緑色を引用の色にした</li>
|
|
<li>BODY の横幅は可変にした -- 様々な画面幅に対応するため</li>
|
|
<li>フォント名・フォントサイズはデフォルトのままにした -- ブラウザーの設定で変更可能にするため</li>
|
|
</ul>
|
|
|
|
<ul>
|
|
<li>ブラウザーやフォント次第では太字が普通の文字と区別しづらいため、太字はなるべく「太字+別の色」にしたい</li>
|
|
</ul>
|
|
|
|
<h2>以上</h2>
|
|
|
|
<p>たまに自分のサイトの設計方針を書く人が居ます。筆者はそれらを読む事が好きで、この記事を書きました。</p>
|
|
|
|
<h2>関連</h2>
|
|
|
|
<ol>
|
|
<li>ウェブサイトの設計方針</li>
|
|
<li><a href="./noclass.html">CLASS無しのCSS</a></li>
|
|
<li><a href="./pattern.html">HTMLのパターン集</a></li>
|
|
</ol>
|