WEB ページ作成基準

統一感のある WEB サイトは，読み手が内容を理解しやすくなります．同じ構成，同じ見出し，同じ図表の形式を使うと，ページごとの違いに気を取られず，本文に集中できます．

作成基準は，書き手にとっても役立ちます．ファイルの先頭，ページの先頭，本文，ページ作成情報，フッターの順に書くと，必要な要素の抜けを減らせます．また，あとから修正するときも，どこを直せばよいか分かりやすくなります．

このページでは，このサイトで使っている PHP，CSS，HTML の書き方をまとめます．CSS はこのサイト独自のものを使っています．したがって，ここで述べる「WEB ページ作成基準」は，一般的な標準ではなく，このサイトのための作成ルールです．

この基準は，このサイト内の解説ページを対象にします．特に，HTML 4.01 Transitional，EUC-JP，PHP の共通部品，およびこのサイト用 CSS を使うページを想定しています．

新しく一般公開用の WEB サイトを作る場合は，HTML5 と UTF-8 を使うのが現在の一般的な方法です．一方，このサイトには既存ページが多くあります．そのため，この基準では既存ページとの互換性と保守のしやすさを優先します．

ページ作成では，次の方針を重視します．

• 1 ページの主題を明確にし，関係の薄い内容を混ぜない．
• 見出しを使って文章を階層化し，目次から本文へ自然に進める．
• 段落は短めにし，長い説明は箇条書き，表，図に分ける．
• 図表やソースコードには説明を付け，本文だけを読んでも意味が通じるようにする．
• ページ末尾に参考資料と更新履歴を置き，作成経緯を追えるようにする．

文章は，できるだけ短く平易に書きます．専門用語を使う場合は，初出で意味が分かるようにします．また，見出し，本文，図表，ソースコードの役割を分け，読み手が必要な情報を探しやすいページにします．

標準的なページは，次の順序で作成します．先にページの骨格を決め，その後に本文を入れると，話の流れを整理しやすくなります．

WEB ページ作成の流れ．共通部品と本文を分けると，修正しやすいページになります．

本文は，ページ先頭の概要と目次に対応させます．目次にある項目は本文に必ず置き，本文にある大きな見出しは目次にも入れます．この対応が崩れると，読み手が目的の場所へ移動しにくくなります．

個別の書き方は，次のページに分けて整理します．必要な項目だけを確認できるように，基準を機能ごとに分けています．

項目	内容
ファイルの先頭	文字コード，文書型宣言，HTML ヘッダーの書き方を決めます．
ヘッド・サイド	共通ヘッダー，サイドメニュー，本文領域を読み込む方法を決めます．
ページの先頭	パンくずリスト，ページタイトル，概要，目次の書き方を決めます．
見出し	h1 から h4 までの使い分けと，セクション番号の付け方を決めます．
パラグラフ	本文，強調，注意書きなど，段落内の表現方法を決めます．
リスト・表・図	箇条書き，表，図を使って，長い説明を読みやすく整理します．
ファイル内容・コマンド・ソース	プログラムやコマンドを本文と区別して表示します．
ページ作成情報・フッター	参考資料，更新履歴，ページ末尾の処理を統一します．

公開前には，次の点を確認します．これは，誤字やリンク切れだけでなく，ページ全体の読みやすさを確認するためです．

• タイトル，概要，目次，本文の内容が一致している．
• 見出しの階層が自然で，h2，h3，h4 の順序が逆転していない．
• 本文中のリンク先，図のファイル，ソースファイルへのパスが正しい．
• 図には説明文と代替文字列を付けている．
• 表や図が本文の理解を助けており，飾りだけになっていない．
• 参考資料と更新履歴がページ末尾にある．
• PC とスマートフォンの両方で，文字や図表が読みにくくなっていない．

特に，目次と本文の対応は重要です．目次にだけ項目がある場合は本文を追加し，本文にだけ大きな見出しがある場合は目次にも追加します．

参考資料

更新履歴