更新のしやすいコーディング法
前回の記事で、ホームページの更新のしやすさが集客に結び付くお話をいたしました。
今回は、具体的に更新のしやすいコーディング方法についてお話します。
またご参考いただければ幸いです。
秘訣その1：法則性を統一する
無作為なコーディングはソースも見づらいものですが、整理整頓すると見やすくなります。
例えば以下のようなコーディングを
<html>
<head>
</head>
<body>
<header></header><article></article>
<footer></footer>
</body>
</html>
以下のようにするだけで見やすさが一新されます。
<html>
<head>
</head>
<body><header>
</header><article>
</article><footer>
</footer></body>
</html>
中身は同じですが、法則性を統一して整理整頓すると、見やすさが大きくかわります。
コツは、ホームページのレイアウト同様余白を上手に使うことです。
例えば、大きなグループの境目には改行余白をいれるなど、何かしらの区切りに余白を入れることで見やすさが格段に向上します。
秘訣その２：コメントを活用する
余白を入れると見やすくなりますが、それにコメントを加えるとさらに見やすくなります。
<html>
<head>
</head>
<body><header>
</header>
<!– HEADER 終了 –><article>
<div class=”box”>
<p>テキストテキストテキスト</p>
</div>
<!– 本文終了 –><div class=”subbox”>
<p>補足情報テキスト</p>
</div>
<!– 補足記事終了 –></article>
<!– ベース部分終了 –><footer>
</footer>
<!– FOOTER 終了 –></body>
</html>
特にdivタグは汎用的に使うことが多く、</div>（閉じタグ）がどのクラスに対応しているかがわかりにくいものです。
コメントを入れることで、入れ子になっていても、迷うことなく更新することが可能になります。
秘訣その3：ドキュメント形式を心掛ける
ビジュアルを実現するために、以下のようなコーディングになる場合があります。
<html>
<head>
</head>
<body><header>
</header>
<!– HEADER 終了 –><article>
<div class=”box”>
<p>テキストテキストテキスト</p>
</div>
<!– 本文終了 –><h1>本文タイトル</h1>
<div class=”subbox”>
<p>補足情報テキスト</p>
</div>
<!– 補足記事終了 –><h2>補足記事タイトル</h2>
</article>
<!– ベース部分終了 –><footer>
</footer>
<!– FOOTER 終了 –></body>
</html>
わかりますでしょうか?
タイトルと、本文の上下が逆になっています。
スタイルシートでデザインを実現するために、しばしばこういった逆順コーディングになるケースがありますが、これは以下のようにすると、意味合いの上でもわかりやすくなります。
<html>
<head>
</head>
<body><header>
</header>
<!– HEADER 終了 –><article>
<h1>本文タイトル</h1>
<div class=”box”>
<p>テキストテキストテキスト</p>
</div>
<!– 本文終了 –><h2>補足記事タイトル</h2>
<div class=”subbox”>
<p>補足情報テキスト</p>
</div>
<!– 補足記事終了 –></article>
<!– ベース部分終了 –><footer>
</footer>
<!– FOOTER 終了 –></body>
</html>
HTMLといえど、文章を記載するドキュメントです。
文章は、タイトルの後に文章がくると読みやすいです。
スタイルシートでカバーしているからといって、この順番を変えると、本文を更新したいのに補足記事を更新してしまったりするものです。
HTMLはソースのタグを全部外して文字だけにすると、文書ファイルの形式になっていることが肝要です。
逆を言えば、WORDで文章を作り、各文字にHTMLタグを付加してゆくとホームページになるのが理想です。
ホームページのレイアウトを意識しつつ、文章のレイアウトも意識することも大事なのです。
HTMLを編集できる方ならば、このような方法で更新のしやすさを向上できますが、HTMLが編集できない場合はどのようにすればよいのでしょうか?
続きはまた次回。
本日のまとめ
- HTMLコーディングに適度に余白を入れると見やすくなる
- わかりにくい箇所にはコメントを入れるとわかりやすくなる
- 文章としておかしい順番にならないように記述すると更新しやすくなる
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
