- ベストアンサー
ホームページ きれいなソースの勉強法は?
こんにちは。 いつも、ホームページを、「ホームページビルダー」で作っています。 さいきん、ホームページをきれいなソースにしたいと思いました。 それで、「ＨＴＭＬがわかる本」を買ってみましたが、ただ、こういうのは、こういう表示になるよ、ということが書いてあるだけで、それをどう組めば、きれいなソースになるかわかりませんでした。 お聞きしたいのですが、きれいなソースを組めるような勉強って、どうすればいいのでしょうか? お勧めの本や、サイトがあったら教えていただければ、助かります。 よろしくお願いいたします。
- wbn12
- お礼率100% (39/39)
- インターネットビジネス
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ビルダーを使用したのはもう何年も前なので最近のはよく分かりませんが、テーブルや画像を配置した時にソースが自動生成されたと思うんですが、それを手動で直すか、初めからソースを打ち込むかしないときれいなソースにならないような気がします。 No.1の方の回答に加えて ************************************* <HTML> <HEAD> <title>任意のタイトル</title> </HEAD> <BODY> <!--▽メニュー部分ここから▽--> <TABLE> <TR> <TD>メニュー1</TD> <TD>メニュー2</TD> </TR> </TABLE> <!--△メニュー部分ここまで△--> <!--▼メインコンテンツここから▼--> メインの内容 <!--▲メインコンテンツここまで▲--> </BODY> </HTML> ************************************* みたいな感じではどうでしょうか？ テーブルの配置はただの一例です。 <!--○○-->←この部分は不可視なので実際のウェブ上には何も表示されないので自分の分かりやすいように入れるといいと思います。 ただ、きれいにした後にまたビルダーで何かを挿入して移動させたりなどするとソースが崩れる可能性があるかもしれません。 個人的な意見ですが、ビルダーの自動生成はいらないタグがよく入るような気がします。 それを削れるようなら削ってソースをすっきり綺麗にしてみてください。
その他の回答 (4)
- wp_
- ベストアンサー率54% (132/242)
気合。 ...すみませんなんでもないです。 開発者の視点での綺麗なソースと言う意味では ・適切なインデント ・適切な改行 ・見て分かるような不要なコメントは悪 ・「ここからここまではこういうコンテンツ」というコメントは善 ・無駄な空白行は悪 ・jsとhtmlの区切りのための空行は善 ・テーブルのネストは絶対悪 ですね。 hpbなどのソースは独自定義が多く、見ていられないので 仕事でhtml（テンプレートですが)を作る人に当方（PHPなどコード作成側）へ納品させる場合は 「余計なコメント排除、インデントはキチンと整形」 ということを徹底させてます。そこまでが君の仕事だから、と。 当方は秀丸を使っていますが、最初は ・タグの最初と最後に改行を入れる（ctrl + R で>を>\nに、<を\n<に一括置換） ※\nは正規表現で改行を示す ・ctrl + A で全選択させてShift + Tab でインデントを全部消します。 ・空行を削除（\n\nがなくなるまで\n\nを\nに置換） ・開始タグと終了タグの間を選択し、tabを押す（一括でインデントされます） ・上記をひたすら繰り返します。ミスったらctrl + A で全選択させてShift + Tab で最初からやり直し。 ・不要なコメントを消す。 ・必要なコメントを足す。 といった感じでやってみると良いです。僕の指導ではまずそうさせます。
お礼
気合っすよね（笑）。 タグの意味が、なんとなくしかわからないワタクシには、難しかったですが、将来、このお答えをすらすら!と理解し、そーよねー、それぐらいはね、なんて言ってみたいです。 どうもありがとうございました。
- TMEspion
- ベストアンサー率27% (5/18)
何をもってして「きれい」と言うかは人次第ですが、 <!-- コメントタグ -->を使うと、わかりやすいソースにはなりますね。 あまり使いすぎるとコメントだらけになり、 余計に見難くなってしまったりしますが。 <!-- ◯◯の項目 --> <div> . . ◯◯の内容色々 . . </div> 勉強法は、色んなサイトのソースを見る事くらいしか 思いつかないです。
お礼
素敵なサイトを見つけて、研究してみます。 どうもありがとうございました。
- nori_007
- ベストアンサー率35% (369/1048)
ホームページビルダーを使わず、手書きで HTML ソースをかけるようになれば奇麗なソースになると思います。 まずは、ホームページビルダーで簡単なホームページを作り、その HTML ソースを理解出来るようになるのが良いと思います。 また、HTML ソースを奇麗にしたいので有れば、<font><table>タグ等は利用せずに、デザインに関しては CSS で記述するようにした方が良いと思います。 とにかく、HTML(XHTML)と、CSS を学んでください。 少し前までホームページを作る者としては、バイブルだったサイトです。 http://www.tohoho-web.com/www.htm 参考にしてみてください。
お礼
おー、とほほのＷＷＷ入門ですね! ずっと前、１度見たら???だったので、そのまますっかり忘れていました（笑） 勉強してみようと思います。 ありがとうございました。
- yuji_from_kyoto
- ベストアンサー率34% (44/127)
奇麗なの視点が分りませんが、 HPビルダー等エディターで編集すると、見難いのは確かですねー。 他のサイトを見て、ソースを表示してみてはどうでしょう？ 見やすいコーディングをしているサイトもありますよ。 私は手打ちなのですが、基本は改行・タブを使っています。 ご参考までに。 ━ 例 ━ <HTML> <HEAD> <BODY> <TABLE> ....<TR> ........<TD> ........HelloWord ........</TD> ....</TR> </TABLE> </BODY> </HEAD> </HTML> ※....はタブスペースです。
お礼
手打ち…。ものすごく憧れます。 私も将来的には、手打ちできるようになりたいなぁ! どうもありがとうございました。
お礼
ご返答ありがとうございます。 なるほど、これがベースになるのかー、と。 タグ初心者なので、これから勉強して、ビルダーなし!を目指そうと思います。 まず、何が余計なタグなのか、わかるようにならないとなぁ…。