- ベストアンサー
ホームページ きれいなソースの勉強法は?
こんにちは。 いつも、ホームページを、「ホームページビルダー」で作っています。 さいきん、ホームページをきれいなソースにしたいと思いました。 それで、「ＨＴＭＬがわかる本」を買ってみましたが、ただ、こういうのは、こういう表示になるよ、ということが書いてあるだけで、それをどう組めば、きれいなソースになるかわかりませんでした。 お聞きしたいのですが、きれいなソースを組めるような勉強って、どうすればいいのでしょうか? お勧めの本や、サイトがあったら教えていただければ、助かります。 よろしくお願いいたします。
- 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> ※....はタブスペースです。
お礼
手打ち…。ものすごく憧れます。 私も将来的には、手打ちできるようになりたいなぁ! どうもありがとうございました。
関連するQ&A
- ソースを見られないようにしたいのですが
初心者ですが、ホームページビルダー８でボチボチと作ってます。 殆ど出来上がったのでそろそろアップしたいと思っています。 恥ずかしいので「ソースと見られないようにしたい」のですが、 どうすればいいのでしょうか？ ホームページビルダーの本を読んでも載っていないので ｈｔｍｌで直接書かなくてはいけないと思うのですが、 具体的に教えていただけると助かります。 （ｈｔｍｌの知識はそんなに詳しくありません） 宜しくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダーでCSSをアップできないので困ってます。
ホームページビルダー６．５にてホームページをつくっております。今までは、ページ編集の部分に文字を打ち込んで使っていたのと、HTMLをコピー＆ペーストしてつくっていました。 今回、友人にCSSを使ったソースにてサイトをきれいにしてもらったのですが、ホームページビルダー６．５にて更新することができません。初心者でソースの表示からHTMLソースのところにコピー＆ペーストしたのですが、たぶんCSSの部分がうまく更新できずにプレビューがおかしく出ます。ちなみに友人はホームページビルダーを使ったことがないとのことで判らず、困っています。 どのようにすればホームページビルダーのHTMLソースからアップデートできるか、もしくは参照すればできそうなサイトなどありましたら教えて下さい。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー１０について
前に、ホームページビルダー８を使っていましたが 作成時、ページー編集、ＨＴＭＬソース、ページ／ソース、プレビュー といった表示が出ていたのですが、ホームページビルダー１０を買ってから初めて使っているのですが、ＨＴＭＬソース、ページソースが出てこない（表示されない）のですがどうすれば出るのでしょうか。 よろしくお願いします
- ベストアンサー
- ホームページ作成ソフト
- ホームページビルダー13 ソースの表示について教えてください。
ホームページビルダー13 ソースの表示について教えてください。 ホームページ作成の初心者です。 ホームページビルダー13の「どこでも配置モード」でサイトを作成しアップしました。 ブラウザで確認するとページ自体は問題なく表示されています。 ソースを確認しようと思い、メニューバーから表示→ソースとやってみたところビルダーで確認できたソース（タイトル名やキーワード）がほとんど表示されません。（抜けている状態？） ページ上で右クリック→ソースの表示で確認するとビルダーと同じソースが表示されます。 何でこのような現象が起こるのでしょうか？ 普通であれば同じソースが表示されますよね？ （色々と他のホームページでソースを見ました） タイトルバーにもタイトルが表示されず、アドレスのままになってます。 ビルダーで確認したソースには<title>○○○</title>間には入ってます。 （他のページでココを確認すると書いてあったので） 何日たっても検索にかからないのは、これが原因なのでしょうか？ 詳しい方、助けてください。 初心者なので、専門用語とかよくわかりません。わかり易く教えて頂ければ幸いです。
- ベストアンサー
- ホームページ作成ソフト
- ＤｒｅａｍＷｅａｖｅｒのＨＴＭＬソースは？
素人の質問で恐縮ですが、よろしくお願いします。 今までホームページビルダーを使用しておりましたが、 ＤｒｅａｍＷｅａｖｅｒに乗り換えをすることになりました。 ホームページビルダーですとＨＴＭＬソースを表示させてることができますが、 ＤｒｅａｍＷｅａｖｅｒでソースを表示させるにはどうすればよろしいですか？
- ベストアンサー
- その他(ソフトウェア)
- ホームページ作成を一から勉強するなら
ホームページビルダーなどの作成ソフトの使い方を勉強するのが先ですか？ それともHTMLやCSSの文法を覚えるのが先ですか？ 効率のよい学習の仕方があればおすすめお願いします。
- ベストアンサー
- CSS
- ホームページビルダーのソース
ホームページビルダーを使ってホームページを作ると、ソースの中にHPBと名前が書かれています。 私はC言語を勉強しておらず、なんとなく恥ずかしいのでいつも下のプログラムだけは消すようにしています。 <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.1.0 for Windows"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=Shift_JIS"> これ以外でもソースを見られると、ホームページビルダーを使っているのがわかるようなプログラムはあるのでしょうか。
- 締切済み
- ホームページ作成ソフト
- ホームページビルダーについて
ホームページビルダー１５でホームページを作成しかけていますが、前は ページ編集、ＨＴＭＬソース、ページソース、プレビューと表示が出ていたのですが、なぜか、ページ編集、プレビューだけ出て、ＨＴＭLソース、ページソースが出なくなりました。 どうすれば、ページ編集、ＨＴＭＬソース、ページソース、プレビューが出るようになるでしょうか？ 困っております。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページのソースの表示について
ホームページのソースの表示について 拙いホームページを作っていますが、最近、ソース画面を表示させようと思うと、デスクトップのアイコンの並んだフォルダが表示され、修正、更新が出来ずに困っています。 ＨＴＭＬを使い、メモ帳で花の紹介を作成する、素人シニアです。 最近、サムネイルの表示にcssを導入（コピペ）した経緯があります。それが原因なのか、何が原因なのか分かりません。ＩＥ・firefox・Ｏｐｅｌａで開いてみても。デスクトップのフォルダが出てきます。修正・更新の出来るソース画面を表示させるにはどうしたらいいのでしょう。Windowsｘｐ使用です。
- ベストアンサー
- ネットトラブル
- ホームページ作成について
ホームページビルダーで作成するホームページを作成・編集するのに 初心者の僕はまず何から勉強すればいいでしょうか？ いきなりホームページビルダーの本などから勉強してもいいのでしょうか？ ホームページ作成には本やインターネットのサイトなど色々とありますが どのような順序で勉強すればよいか教えてください。 あとオススメの本やサイトがあればお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
ご返答ありがとうございます。 なるほど、これがベースになるのかー、と。 タグ初心者なので、これから勉強して、ビルダーなし!を目指そうと思います。 まず、何が余計なタグなのか、わかるようにならないとなぁ…。