• 締切済み

不要なタグって・・・。

webページをDreamWeaverで作成しているのですが。。。 よく不要なタグが入ると言われますが、どのようなものでしょうか? 半角のスペースが入ったり、改行が反映されていたりするものは気がつけるのですが。。。 また、DreamWeaverだと<colspan>や<rowspan>を簡単に設定できてしまい、 設定したあとでソースを見るとこれは不要なのでは? と気がつける方法がありましたら教えて下さい。。。 (コーディングレベルですかね。。。。) 普通、初めから構造みたいなものを作ってから、<table>でレイアウト組むのでしょうか? Webデザイナー目指しているレベルです。。。よろしくお願いします。

  • CSS
  • 回答数3
  • ありがとう数4

みんなの回答

noname#5841
noname#5841
回答No.3

こんにちは。 DreamWeaverをお使いでしたら、テーブルの幅・高さ指定が一番不要なタグが入りやすいかと思います。 例えば、 <table> <tr bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF" width="100">..</td> <td bgcolor="#FFFFFF" width="80">..</td> <td bgcolor="#FFFFFF" width="80">..</td> </tr> <tr bgcolor="#CCCCCC"> <td bgcolor="#CCCCCC" width="100">..</td> <td bgcolor="#CCCCCC" width="80">..</td> <td bgcolor="#CCCCCC" width="80">..</td> </tr> </table> みたいな感じで、本来なら行に背景色をつける時、1行がすべて同じ色で構わないなら、<tr>のみに背景色指定があればいいのに、なぜか、<td>タグ内にも一つ一つ指定されてしまう、とか、二行目に幅指定はいらないのに、入ってしまう、とかです。 高さなんかも、一番左のセルだけでいいはずなんですけど、全部しっかり入ってしまうので、気をつけてます(というか、高さ指定は画像のレイアウト目的のテーブル以外にはしないほうが良いです)。 なので、私はtableを組む時は、DreamWeaverでテーブル幅の自動設定しないで、1行目のみ手動で計算機片手に入れていってます。 これだけでも、そうとうソースは軽くなりますよ。 あとは、フォントタグが不要に入ってしまった場合には、DreamWeaverの「HTMLソースのクリーンアップ」をかけてみるのが比較的有効です(完全ではないです。間に半角スペースなどが入ってると消してくれないし)。 ページ全体で同じような不要タグを見つけた場合には一つ一つ直していくと大変なのと、見落としてしまうので、「検索・置換」で、「ソース」か、「特定のタグ」で一括置換(消去)させる、など。

popo-shi
質問者

お礼

ありがとうございました。今まさに<tr>にbgcolorを入れておるところです。。。 web制作は、DreamWeaverの悪いところも熟知せねば。。。ですね。 皆さんのお声を聞かせていただいて、ほんと勉強になりました。

  • kazukun75
  • ベストアンサー率20% (7/34)
回答No.2

私は真っ先にテーブルを組んだ時に出来る<tbody>を削除しています。 あと、テキストの色や大きさなどを何回かいじっていると、 <font>タグが重複してたりしますので、それも注意しています。 ドリームウェバーは他のものと比べると、まだまだいいソースを書くように思います。 私が製作する時は、まずフォトショップでページ全体を構成してから、 それから切り出していって構成しています。 いろんなやり方があると思います。 やはり、たくさん作って慣れることだと思いますよ。 頑張ってくださいね。

popo-shi
質問者

お礼

すいません。以前お礼を送信したと思ったのですが。。。 改めまして、ありがとうございました。 やはり、たくさん作って慣れることですね。まったくです。 そしてこんなことやってみたいとか、あんなことできるのかな と考えたり。。。時間が許す限り?!そうやって頑張っていきます。 ありがとうございました。

noname#5179
noname#5179
回答No.1

TABLEを複雑に組んでいるときに高さや幅の属性が必要のないところに つくのが一番困ってます。良く見てみると、ちょっと矛盾した指定に なっていることもあったりします。 逆に幅や高さの属性を削りすぎてもブラウザが変に解釈しかねないので、 気をつかいます。 それいがいにも、Fireworksで作った画像を流し込むときとかにも やはり煩雑なタグが入っていて、書き直すことがあります。 また、CSSと、普通のHTMLで同場所の色指定を重複してしている事が あったりします。 このあたりの不要なタグってきっちりしておかないと、時々 特定のバージョンのブラウザで変になったりする事があります。 私が気を付けているのは、幅などを最初に決めておいて、 最後になってずらしたりしない事を気を付けています。 本格的に不必要なタグを排除するならDreamWeaverなど使わずに 自分でHTMLを書いていくのもいい方法だと思います。

popo-shi
質問者

お礼

すいません。以前お礼を送信させていただいたと思っていたのですが。。。 改めまして。。。ありがとうございました。 うーんそうなんですよ「ブラウザ」ですよね。。。 その辺もどういう風になったらレイアウトがくずれてしまうか 今、勉強中です。また、何かありましたらよろしくお願いします。。。。 ありがとうございました。

関連するQ&A

  • Dreamweaverでタグを編集中、ウィンドウサイズに合わせてタグを改行したい

    Dreamweaverでタグを編集中、タグがどんどん右に加わってしまい、いちいちスクロールしないと見られません。 ウィンドウサイズに合わせてタグが改行するように環境設定を行いたいのですが、どこで設定すれば良いのでしょうか…。

  • tableタグ最後の改行をなくすには?

    IE6用にshowModalDialogで開くWebページを作ろうとしています。 ダイアログの大きさがちょうどWebページの大きさになるようにしています。 tableタグを使って、画面右下にボタンを配置したいのですが、 <html><body><table> ・・・ </table></body></html> とすると、tableの後に必ず改行が入ってしまい、 スクロールバーが表示されてしまいます。 tableタグ最後の改行がなければ、 スクロールバーは表示されないと思うのですが、 この改行をなくす方法はあるのでしょうか? ご存知の方、教えてくださいm(_ _)m

    • ベストアンサー
    • HTML
  • tableタグ内のテキストについて

    編集しているWebページのソースを見て最近気になったことがあります。現在レイアウトの主流になっているテーブルですが、table,tdタグ内に記述するテキストはなぜpやh1~h6などのタグで囲んで記述しないのでしょうか? タグ辞典やリファレンスを見てもタグを使わずに記述されていますがこれはなぜなのでしょうか?

    • ベストアンサー
    • HTML
  • <table>タグについて

    ホームページ作成初心者です。 <table>タグで表を作成したのですが、タグ内に幅と高さを設定してるにもかかわらず文字数によって幅が変更されてしまいます。 文字は改行されてもかまわないので、どうすれば幅を固定することができるんでしょうか? 宜しくお願いします。m(__)m

    • ベストアンサー
    • HTML
  • WEB制作について質問させてください。

    WEB制作について質問させてください。 はじめまして。 紙媒体のデザインの仕事をしています、フリーのグラフィックデザイナーです。 キャリアは10年程度です。 現在はインデザイン、イラストレータ、フォトショップをメインに使用しています。 今までもWEBデザインのインターフェイスデザインの仕事(コーディングなし)は していましたが、ニーズが増えてきたので、紙:8/WEB:2くらいの現状から 紙:6/WEB:4くらいにシフトしようかと考えており、それにはもっと知識をつけないと いけないと思っています。 コーディングやプログラムのプロの方レベルの知識までを得るのは現実的ではないとは思いつつ ある程度の知識はないといけないと思っています。 そこで、まず何から手をつけていったら良いかをアドバイスいただければ、と思っています。 FireworksやFlash、Dreamweaverは何年か前に使ったことがあって、かろうじて分かる、といったレベルです。 ほぼWEB関係のソフトは素人レベルの知識しかありません。 Dreamweaverなどを使うにしてもhtmlやCSSの知識がないと難しいのでしょうか。 htmlやcssの勉強を個人でやるとしたらおすすめの書籍等ありますか? また実際のところ、現在WEB制作の会社などでは、コーダーとデザイナーは別なのでしょうか。 デザイナーがdreamweaverなどでざっくり組んでコーダーなりプログラマーが 手直し+プログラミング等をするのでしょうか。 経験者の方や、プログラマーの方などで、デザイナーにはこれを知っていてもらいたい、 こんなレベルのデザイナーがいれば助かる、などアドバイスいただけますと助かります。 よろしくお願いします。

  • Dreamweaver 4について

    こんにちわ。 先日、会社で使ってるパソコンをWindows2000→Windows XPに変えました。 そして、Dreamweaver 4のレイアウトスペースで作業したらテキストスペースのタグの改行がおかしくなってしまったのです。 Windows2000の時はちゃんと綺麗なままで作業ができていたのですが・・・。 例えば、 <table> <tr> <td align="right"><a href="~"> </td> </tr> </table> と、ソースフォーマットの適用で綺麗になっていたタグの並び方がレイアウトスペースで作業をすると↓ <table><tr> <td align="right"><a href="~"> </td></tr> </table> という風に変な半角スペースがあいたり、改行が詰まったりしてしまうのです。 これはほんの一部分ですが、これが連続で改行もばらばらでずらーーっと並んでいるのでとっても見にくく、作業がしにくいです。 あと、テキストスペースでしか作業ができないのでとても不便です。 ソースフォーマットの適用をしても直ってくれません。 見にくいのは我慢してこのまま作業を続ければいいのではないか、とも思われるかもしれませんが、 PHPが含まれているページもあり、このまま同期などしてしまうとPHP部分を触ってないのになぜかエラーが出てしまうそうです。 この現象は私だけでなく、私の前にXPに変えた子も同じような事が起きていました。 作業がしにくく、本当に困っています。 他の人に聞いても分からないそうで、お手上げ状態です。 何か直す方法などありましたらお願いします。 あと補足ですが、容量を減らすという意味で前から「環境設定」→「コードフォーマット」のインデントの使用欄はチェックをはずしてあります。 これは決められた事なので変えられないのですが・・・。 また、会社のパソコンなのであまり初期化もできないのです・・・。

  • 見出し用(?)タグ、両方で反映するタイプは?

    見出し用(?)タグ、両方で反映するタイプは? 最近、FC2でホームページを作りました その時のレイアウトとして 文章を分り易くする為に 一応、箇条書きで、文章にもサブタイトルの様に 見出しの様な感じで付けました しかし、反映したものを見るとブラウザで反映が違います それで、結論から言うと 今回使用したタグに、こだわってる訳じゃないんで 出来れば、どんな(?)ブラウザ…又は メインのブラウザで反映するタグを知りたいという質問です 尚、私は現在Firefoxを使用してますが 一応、FirefoxとIEで反映してくれれば… と思います それと、私は現在FC2ブログを複数運営してますが HPは初心者で、HPもFC2で作成しました ただ、タグに関しては、ブログでも 主にテーブルタグを使用してましたが それ以外のタグは、あまり知りません それで、私が探したタグとしては 最初はテーブルタグで、枠の色を使用して…だったんですが まず、ブログとHPでFirefoxと IEの両方で試験的に作ってみました すると、この解説では http://www.tagindex.com/html_tag/table/table_bordercolor.html 表示が違いますし、実際に使用すると 反映しませんでした 更に、この両者も試したんですが ここは、一番下のテスト用タグを使用した所 全く反映せず http://plaza.rakuten.co.jp/ochie240/8020 ここの解説に関しては、一応反映しました しかし、ブログとHPで試した所 両者でレイアウト等、かなり違いが出ました http://kodawari-affiliate.wablog.com/55.html 正確に言うと、ブログでは一応Firefox、IE共に 正常に反映しますが HPでは、相当レイアウトが崩れてました 本当は、どう崩れたかを画像で御紹介出来れば 分り易いんだと思いますが 上記内容では、画像が4つ以上必要な感じで そうすると、配置等、どう考えて載せれば良いかが分らず 今回は文章での説明のみで書かせて頂きました

  • スクロール付きのテーブルで、内側に線を付ける方法

    添付画像のようにテーブル内に枠を周りに付けて二重の枠にして、 内側のテーブルとテーブルの間に破線をいれたいです。 しかし、CSSで設定しても破線も枠も表示されません。 こういう場合はどうすればいいのでしょうか? <table id="j"> <tbody> <tr> <td> <DIV style="height:300px; overflow:auto;"> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> <table class="t"> <tr> <td rowspan="3">ああああああああああああ</td> <td colspan="2">いいいいいいいいいいいいいい</td> </tr> <tr> <td colspan="2">ううううううううううううう</td> </tr> <tr> <td>えええええ</td> <td>おおおおお</td> </tr> </table> </div> </td> </tr> </tbody> </table> -----css------ #j{ cellpadding: 2; width: 520; background-color : #ffe3c8; border:1px solid #333; border-spacing:0; } } .t{ width: 500; height: 100; border:1px solid #333; } td{ cellspacing: 0; border-collapse: collapse; border-spacing:0; }

    • ベストアンサー
    • HTML
  • タグ[table]の自動改行について

    現在タグうちでHTMLを作成しています。 [table]タグで枠を作って、その中に文章を入力、枠の最後の方にいくと、枠の横幅が広がっていくのですが、これを枠の最後の方に言ったら自動改行するように設定するにはどうしたらいいのでしょうか? ちなみにHTML内での入力例は <table width="700" border="0"> などのように、幅を指定、枠を見えないように設定しています。

  • 表の幅・高さ100%表示が、ブラウザによっては見え方が違う事ついて

    初めまして。お世話になります。 現在、ホームページを作成していますが、 分からない事がありますので、質問させて頂きました。 ホームページビルダーで、表(tableタグ)を使ったレイアウトを作成中です。 表の幅(width)と高さ(height)を共に100%で指定し、 表の中をセル(td)で細かく仕切り、その中に画像やテキストを配置し、 レイアウトしたいと思っています。 表のサンプルソースはこんな感じです。細かくてすみません…。 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD height="20" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD height="30" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD colspan="5" height="5"></TD> </TR> <TR> <TD rowspan="3"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD rowspan="3"></TD> </TR> <TR> <TD width="700"></TD> </TR> <TR> <TD width="700" height="1" bgcolor="#0000ff"></TD> </TR> </TABLE> 上記のソースでは表の中に、幅700pxの青色の四角いスペースを作っています。 しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。 高さは大丈夫なのですが、 <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD width="700"></TD> <TD width="700" height="1" bgcolor="#0000ff"></TD>等の、 width="700"が無視され、青色の四角いスペースまでもが、100%表示になってしまいます。 どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか? また、Firefox、Lunascapeのバージョンが古いのですが、 これらの影響もあるのでしょうか? Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML