【最大10000ポイント】当たる!!質問投稿キャンペーン!

こんにちは。

いつも、ホームページを、「ホームページビルダー」で作っています。

さいきん、ホームページをきれいなソースにしたいと思いました。


それで、「HTMLがわかる本」を買ってみましたが、ただ、こういうのは、こういう表示になるよ、ということが書いてあるだけで、それをどう組めば、きれいなソースになるかわかりませんでした。


お聞きしたいのですが、きれいなソースを組めるような勉強って、どうすればいいのでしょうか?

お勧めの本や、サイトがあったら教えていただければ、助かります。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

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



No.1の方の回答に加えて
*************************************
<HTML>
<HEAD>
<title>任意のタイトル</title>
</HEAD>
<BODY>
<!--▽メニュー部分ここから▽-->
 <TABLE>
   <TR>
    <TD>メニュー1</TD>
    <TD>メニュー2</TD>
   </TR>
 </TABLE>
<!--△メニュー部分ここまで△-->
<!--▼メインコンテンツここから▼-->
メインの内容
<!--▲メインコンテンツここまで▲-->
</BODY>
</HTML>
*************************************

みたいな感じではどうでしょうか?
テーブルの配置はただの一例です。
<!--○○-->←この部分は不可視なので実際のウェブ上には何も表示されないので自分の分かりやすいように入れるといいと思います。

ただ、きれいにした後にまたビルダーで何かを挿入して移動させたりなどするとソースが崩れる可能性があるかもしれません。

個人的な意見ですが、ビルダーの自動生成はいらないタグがよく入るような気がします。
それを削れるようなら削ってソースをすっきり綺麗にしてみてください。
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます。

なるほど、これがベースになるのかー、と。

タグ初心者なので、これから勉強して、ビルダーなし!を目指そうと思います。

まず、何が余計なタグなのか、わかるようにならないとなぁ…。

お礼日時:2007/11/11 11:53

気合。




...すみませんなんでもないです。
開発者の視点での綺麗なソースと言う意味では
・適切なインデント
・適切な改行
・見て分かるような不要なコメントは悪
・「ここからここまではこういうコンテンツ」というコメントは善
・無駄な空白行は悪
・jsとhtmlの区切りのための空行は善
・テーブルのネストは絶対悪
ですね。

hpbなどのソースは独自定義が多く、見ていられないので
仕事でhtml(テンプレートですが)を作る人に当方(PHPなどコード作成側)へ納品させる場合は
「余計なコメント排除、インデントはキチンと整形」
ということを徹底させてます。そこまでが君の仕事だから、と。

当方は秀丸を使っていますが、最初は
・タグの最初と最後に改行を入れる(ctrl + R で>を>\nに、<を\n<に一括置換)
  ※\nは正規表現で改行を示す
・ctrl + A で全選択させてShift + Tab でインデントを全部消します。
・空行を削除(\n\nがなくなるまで\n\nを\nに置換)
・開始タグと終了タグの間を選択し、tabを押す(一括でインデントされます)
・上記をひたすら繰り返します。ミスったらctrl + A で全選択させてShift + Tab で最初からやり直し。
・不要なコメントを消す。
・必要なコメントを足す。
といった感じでやってみると良いです。僕の指導ではまずそうさせます。
    • good
    • 0
この回答へのお礼

気合っすよね(笑)。

タグの意味が、なんとなくしかわからないワタクシには、難しかったですが、将来、このお答えをすらすら!と理解し、そーよねー、それぐらいはね、なんて言ってみたいです。

どうもありがとうございました。

お礼日時:2007/11/11 11:51

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


<!-- コメントタグ -->を使うと、わかりやすいソースにはなりますね。
あまり使いすぎるとコメントだらけになり、
余計に見難くなってしまったりしますが。

<!-- ◯◯の項目 -->
<div>
.
.
◯◯の内容色々
.
.
</div>

勉強法は、色んなサイトのソースを見る事くらいしか
思いつかないです。
    • good
    • 0
この回答へのお礼

素敵なサイトを見つけて、研究してみます。

どうもありがとうございました。

お礼日時:2007/11/11 11:55

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



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

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

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

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

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

参考にしてみてください。
    • good
    • 0
この回答へのお礼

おー、とほほのWWW入門ですね!

ずっと前、1度見たら???だったので、そのまますっかり忘れていました(笑)

勉強してみようと思います。

ありがとうございました。

お礼日時:2007/11/11 11:56

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


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

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

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

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


※....はタブスペースです。
    • good
    • 0
この回答へのお礼

手打ち…。ものすごく憧れます。

私も将来的には、手打ちできるようになりたいなぁ!

どうもありがとうございました。

お礼日時:2007/11/11 11:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング