MB-Support

パソコン初心者のサポートページ

ソースを閲覧しやすくする

 メモ帳でのソースの書き方を整えましょう


ホームページ制作に慣れてくると、ソースもコチャゴチャになりがちです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>題名</title>
</head>
<body>
<h1>タイトル</h1>
<div align="center">
<table><tr><td>
<h2>見出し1<h2>
<p>見出し1の<font color="#ff0000">内容</font><p>
</td><td>
<h2>見出し2<h2>
<p>見出し2の<u>内容</u>です。<p>
</td></tr></table>
<hr><p>制作者 ○○</p>
</div>
</body>
</html>

↑これだと、後で修正を加える場合、目的の場所を見つけるのが大変ですし、 タグの閉じ忘れも連発する可能性があります。そんな時は、キーボードの「Tab」キーや、半角スペースを挿入して、自分なりにソースを整えましょう。 ちなみに全角スペースは、ブラウザでプレビューした時に反映されてしまうので使えません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>題名</title>
 </head>
 <body>
  <h1>タイトル</h1>
  <div align="center">
   <table>
    |<tr valign="top">
    | <td>
    |  <h2>見出し1</h2>
    |  <p>見出し1の<font color="#ff0000">内容</font></p>
    | </td>
    | <td>
    |  <h2>見出し2</h2>
    |  <p>見出し2の<u>内容</u>です。<p>
    | </td>
    |</tr>
   </table>
   <hr>
   <p>制作者 ○○</p>
  </div>
 </body>
</html>

開始タグと終了タグを同じ位置にすることで、閉じ忘れを防げます。 例えば、上の例では、<tr> の開始タグと、</tr> 終了タグが、左から同じ位置にある事が分かりますね? HTMLの一番上の要素はルート要素とも呼ばれる <html> なので、<html> (開始)と、</html> (終了)が、一番左にある事も分かりますね。

整頓されたソースは、変更するユーザーの使い勝ってを考慮するもので、それが正しい書き方なわけではありません。 プログラムで生成される動的サイトでは、逆に無駄な改行やスペースを排除する場合もあります。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項