ホームページ　きれいなソースの勉強法は?

Question

こんにちは。

いつも、ホームページを、「ホームページビルダー」で作っています。

さいきん、ホームページをきれいなソースにしたいと思いました。


それで、「ＨＴＭＬがわかる本」を買ってみましたが、ただ、こういうのは、こういう表示になるよ、ということが書いてあるだけで、それをどう組めば、きれいなソースになるかわかりませんでした。


お聞きしたいのですが、きれいなソースを組めるような勉強って、どうすればいいのでしょうか?

お勧めの本や、サイトがあったら教えていただければ、助かります。

よろしくお願いいたします。

buru-bon · Accepted Answer

ビルダーを使用したのはもう何年も前なので最近のはよく分かりませんが、テーブルや画像を配置した時にソースが自動生成されたと思うんですが、それを手動で直すか、初めからソースを打ち込むかしないときれいなソースにならないような気がします。 No.1の方の回答に加えて ************************************* 任意のタイトル　　　　　　　　　　　　　　　　

メニュー1

メニュー2

メインの内容 ************************************* みたいな感じではどうでしょうか？テーブルの配置はただの一例です。 ←この部分は不可視なので実際のウェブ上には何も表示されないので自分の分かりやすいように入れるといいと思います。ただ、きれいにした後にまたビルダーで何かを挿入して移動させたりなどするとソースが崩れる可能性があるかもしれません。個人的な意見ですが、ビルダーの自動生成はいらないタグがよく入るような気がします。それを削れるようなら削ってソースをすっきり綺麗にしてみてください。

wp_ · Answer

気合。 ...すみませんなんでもないです。開発者の視点での綺麗なソースと言う意味では・適切なインデント・適切な改行・見て分かるような不要なコメントは悪・「ここからここまではこういうコンテンツ」というコメントは善・無駄な空白行は悪・jsとhtmlの区切りのための空行は善・テーブルのネストは絶対悪ですね。 hpbなどのソースは独自定義が多く、見ていられないので仕事でhtml（テンプレートですが)を作る人に当方（PHPなどコード作成側）へ納品させる場合は「余計なコメント排除、インデントはキチンと整形」ということを徹底させてます。そこまでが君の仕事だから、と。当方は秀丸を使っていますが、最初は・タグの最初と最後に改行を入れる（ctrl + R で>を> に、<を <に一括置換）　　※ は正規表現で改行を示す・ctrl + A で全選択させてShift + Tab でインデントを全部消します。・空行を削除（がなくなるまでをに置換）・開始タグと終了タグの間を選択し、tabを押す（一括でインデントされます）・上記をひたすら繰り返します。ミスったらctrl + A で全選択させてShift + Tab で最初からやり直し。・不要なコメントを消す。・必要なコメントを足す。といった感じでやってみると良いです。僕の指導ではまずそうさせます。

TMEspion · Answer

何をもってして「きれい」と言うかは人次第ですが、を使うと、わかりやすいソースにはなりますね。あまり使いすぎるとコメントだらけになり、余計に見難くなってしまったりしますが。

. . ◯◯の内容色々 . .

勉強法は、色んなサイトのソースを見る事くらいしか思いつかないです。

nori_007 · Answer

ホームページビルダーを使わず、手書きで HTML ソースをかけるようになれば奇麗なソースになると思います。

まずは、ホームページビルダーで簡単なホームページを作り、その HTML ソースを理解出来るようになるのが良いと思います。

また、HTML ソースを奇麗にしたいので有れば、<font><table>タグ等は利用せずに、デザインに関しては CSS で記述するようにした方が良いと思います。

とにかく、HTML(XHTML)と、CSS を学んでください。

少し前までホームページを作る者としては、バイブルだったサイトです。

http://www.tohoho-web.com/www.htm

参考にしてみてください。

yuji_from_kyoto · Answer

奇麗なの視点が分りませんが、

HPビルダー等エディターで編集すると、見難いのは確かですねー。

他のサイトを見て、ソースを表示してみてはどうでしょう？
見やすいコーディングをしているサイトもありますよ。

私は手打ちなのですが、基本は改行・タブを使っています。
ご参考までに。

━　例　━
<HTML>
<HEAD>
<BODY>
<TABLE>
....<TR>
........<TD>
........HelloWord
........</TD>
....</TR>
</TABLE>
</BODY>
</HEAD>
</HTML>

※....はタブスペースです。

........HelloWord ........

※....はタブスペースです。

ホームページ きれいなソースの勉強法は?

気合。

何をもってして「きれい」と言うかは人次第ですが、

ホームページビルダーを使わず、手書きで HTML ソースをかけるようになれば奇麗なソースになると思います。

奇麗なの視点が分りませんが、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

ホームページ　きれいなソースの勉強法は?