不要なタグって・・・。

締切済

  • 質問者：popo-shi
  • 質問日時：2002/01/22 20:32
  • 回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「フォント タグ」に関するQ&A： フォントタグを消すには

A 回答 (3件)

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>
みたいな感じで、本来なら行に背景色をつける時、１行がすべて同じ色で構わないなら、<tr>のみに背景色指定があればいいのに、なぜか、<td>タグ内にも一つ一つ指定されてしまう、とか、二行目に幅指定はいらないのに、入ってしまう、とかです。
高さなんかも、一番左のセルだけでいいはずなんですけど、全部しっかり入ってしまうので、気をつけてます（というか、高さ指定は画像のレイアウト目的のテーブル以外にはしないほうが良いです）。

なので、私はtableを組む時は、DreamWeaverでテーブル幅の自動設定しないで、１行目のみ手動で計算機片手に入れていってます。
これだけでも、そうとうソースは軽くなりますよ。

あとは、フォントタグが不要に入ってしまった場合には、DreamWeaverの「HTMLソースのクリーンアップ」をかけてみるのが比較的有効です（完全ではないです。間に半角スペースなどが入ってると消してくれないし）。

ページ全体で同じような不要タグを見つけた場合には一つ一つ直していくと大変なのと、見落としてしまうので、「検索・置換」で、「ソース」か、「特定のタグ」で一括置換（消去）させる、など。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2002/02/05 10:03

No.2

  • 回答者： kazukun75
  • 回答日時：2002/01/26 09:49

私は真っ先にテーブルを組んだ時に出来る<tbody>を削除しています。



あと、テキストの色や大きさなどを何回かいじっていると、
<font>タグが重複してたりしますので、それも注意しています。

ドリームウェバーは他のものと比べると、まだまだいいソースを書くように思います。

私が製作する時は、まずフォトショップでページ全体を構成してから、
それから切り出していって構成しています。
いろんなやり方があると思います。
やはり、たくさん作って慣れることだと思いますよ。
頑張ってくださいね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2002/02/05 10:14

No.1

TABLEを複雑に組んでいるときに高さや幅の属性が必要のないところに


つくのが一番困ってます。良く見てみると、ちょっと矛盾した指定に
なっていることもあったりします。
逆に幅や高さの属性を削りすぎてもブラウザが変に解釈しかねないので、
気をつかいます。
それいがいにも、Fireworksで作った画像を流し込むときとかにも
やはり煩雑なタグが入っていて、書き直すことがあります。

また、CSSと、普通のHTMLで同場所の色指定を重複してしている事が
あったりします。

このあたりの不要なタグってきっちりしておかないと、時々
特定のバージョンのブラウザで変になったりする事があります。


私が気を付けているのは、幅などを最初に決めておいて、
最後になってずらしたりしない事を気を付けています。

本格的に不必要なタグを排除するならDreamWeaverなど使わずに
自分でHTMLを書いていくのもいい方法だと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2002/02/05 10:09

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

「フォント タグ」に関するQ&A： ワードで発音記号を表すにはどうやるのですか？

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

Q質問する（無料）

関連するQ&A

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

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q入れ子にしたddタグをcssで制御できません。

入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。

</dd>
<dl>
　<dt>111111</dt>
　　<dd>22222222222222222</dd>
　　<dd>33333333333</dd>
　<dt>４４４４４４</dt>
　　<dd>５５５５５５５</dd>
　　　<dl>
　　　　<dt>６６６６６６６６</dt>
　　　　　<dd>７７７７７７７７７</dd>
　　　</dl>
　</dd>
</dl>

のようにｄｄの中にまたdlから始まるのを入れ子にしました。

それで、cssで

.hoge dd{
color:#FFFFFF;
margin:10px;
}

とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の７７７７７７のように入れ子になったddだけにスタイルシートを掛けたいのです。
試しに

.hoge dl dt dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
や、
.hoge dd dl dt dd{
color:#FFFFFF;
margin:10px;
}
を試してみましたが、うまくいきませんでした。

どうしたら、入れ子の中のddだけにスタイルシートを適用できるようになりますでしょうか。もしくは、このようなddを入れ子にする方法は使わないのでしょうか。

入れ子にしたddタグのマージンをcssで指定してみましたが、うまくいきません。

</dd>
<dl>
　<dt>111111</dt>
　　<dd>22222222222222222</dd>
　　<dd>33333333333</dd>
　<dt>４４４４４４</dt>
　　<dd>５５５５５５５</dd>
　　　<dl>
　　　　<dt>６６６６６６６６</dt>
　　　　　<dd>７７７７７７７７７</dd>
　　　</dl>
　</dd>
</dl>

のようにｄｄの中にまたdlから始まるのを入れ子にしました。

それで、cssで

.hoge dd{
color:#FFFFFF;
margin:10px;
}

とすると、ddタグ...続きを読む

Aベストアンサー

次のようにすれば内側のddにだけスタイルが有効になります。

.hoge dd dd {
color:#FFFFFF;
margin:10px;
}

「.hoge dd dd」の代わりに「.hoge dl dd dl dd」でも有効になります。

試された方法でうまくいかなかった理由は、入れ子の指定の中にdtを入れているためだと思います。もし <dt><dd></dd></dt> となっているなら指定された方法で有効になりますが、実際には <dt></dt><dd></dd> のようにdtとddは同じ階層にありますから、入れ子の指定に入れてはいけないのです。

他の回答も見る

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか？
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか？

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

他の回答も見る

Qdl,dt,ddタグでdtに対して、rowspan

お世話になっております。
表題の通り、
dl,dt,ddタグでdtに対して、rowspanってできませんか？
cssは記述しておりませんが、
現在、テーブルのように２列並んだ状態です
イメージ（http://www.geocities.jp/eijispace/2011/0810.html）

<dl>
<dt>天気</dt>
<dd>晴れ</dd>
<dt>天気</dt>
<dd>曇り</dd>
<dt>天気</dt>
<dd>雨</dd>
</dl>

これを天気の部分は縦に一つに纏めて表示したいのです。

tableタグでも良いのですが、
レスポンシブ化を計っており、
ウインドウサイズが小さくなると、
一列に表示ということがしたく、

ウインドウサイズが小さくなると
jsか何かで、rowspanを0にする

という方法でも良いのですが、
jsは余り使わず、mediaクエリで何とかならないものか考えております。

ご教授お願いします

Aベストアンサー

ということは、端(ハナ)からデータ構造は
<dl>
　<dt>天気</dt>
　<dd>晴れ</dd>
　<dd>曇り</dd>
　<dd>雨</dd>
</dl>
ですよ。
<ul>
　<li>天気
　　<ol>
　　　<li>晴れ</li>
　　　<li>曇り</li>
　　　<li>雨</li>
　　</ol>
　</li>
</ol>
かもしれない。
　そもそも、最初に示された
<dl>
<dt>天気</dt>
<dd>晴れ</dd>
<dt>天気</dt>
<dd>曇り</dd>
<dt>天気</dt>
<dd>雨</dd>
</dl>
だと、３行目<dt>天気</dt>の以降の内容は、最初の<dt>の子供じゃないですから、そのようなデザインと整合性が取れません。

　まあ、方法はなくはありません。
以下は、本来の手法ではありません。
★タブは＿に置換してある。

<div class="section">
＿<h2>見出し</h2>
＿<p>・・・</p>
＿<dl>
＿＿<dt>天気</dt>
＿＿<dd>晴れ</dd>
＿＿<dt>天気</dt>
＿＿<dd>曇り</dd>
＿＿<dt>天気</dt>
＿＿<dd>雨</dd>
＿</dl>
</div>


div.section dl,div.section dl dt,div.section dl dd{
display:block;
margin:0;padding:0;
}
div.section dl{width:60%;margin:0 auto;position:relative;border:solid 1px black;
}
div.section dl dd{margin-left:61px;border-left:1px solid black;padding:0.5em 5px;}
div.section dl dt+dd+dt+dd{border-top:1px gray solid;line-height:1.6em;text-indent:1em;}
div.section dl dt{
position:absolute;
top:0;left:0;
width:40px;
height:100%;
border:none;
padding:0.5em 10px;
}
/* mediaquery以下を有効にする。 */
/*
div.section dl{padding-top:30px;}
div.section dl dd{margin-left:0;border-left-width:0;}
div.section dl dt{width:90%;height:14px;}
div.section dl dd{border-top:1px gray solid;}

リキッドなので、mediaqueryは必要ないかと・・・

ということは、端(ハナ)からデータ構造は
<dl>
　<dt>天気</dt>
　<dd>晴れ</dd>
　<dd>曇り</dd>
　<dd>雨</dd>
</dl>
ですよ。
<ul>
　<li>天気
　　<ol>
　　　<li>晴れ</li>
　　　<li>曇り</li>
　　　<li>雨</li>
　　</ol>
　</li>
</ol>
かもしれない。
　そもそも、最初に示された
<dl>
<dt>天気</dt>
<dd>晴れ</dd>
<dt>天気</dt>
<dd>曇り</dd>
<dt>天気</dt>
<dd>雨</dd>
</dl>
だと、３行目<dt>天気</dt>の以降の内容は、最初の<dt>の子供じゃないですから、そのようなデザインと整合性が取れません...続きを読む

他の回答も見る

Q
  • とタグについて

    初心者です。

    <li>と<table>タグについて、どのような基準で使い分けるのでしょうか？

    何かのページで表として認識できる場合は<table>とありましたが、実際には<li>で記述されているケースが多いように感じます。それぞれのメリット・デメリットを教えていただけるとありがたいです。

    Aベストアンサー

    リストと表の違いで区別するのが良いでしょう。
    　ul li は、デフォルトで、頭に " ・ " が付きますから、
    HTML（マークアップ）的に考えれば、箇条書きです。

    表は、エクセルで作る様な「表」と考えれば良く、
    セルの枠線（border）が表示されても表現的に問題ない場合が「表」です。

    マークアップを無視して、レタリングだけなら、
    CSSで、どちらでも（それ以外の方法でも）同じに表示出来ます。

    また、tableの場合、クローラーのセルの読み込み順が変わる場合がありますので注意が必要ですし、旧IEでの差異もあります。
    後から、セルの追加で列計算がある場合に修正がちょっと面倒です。
    CSSが利用出来る昨今は、tableが嫌われる方向です。
    大きなtableは読み込みが遅くなるので、表示が遅くなります。

    初心者は、簡単にtableレイアウトで全体を作る事が出来るので、
    利用しがちだったり、某簡易ソフトもtableレイアウトが多いですね・・・

    良く見掛けるのは、ナビ（グローバル）メニューの部分ですが、
    table でも ul でも作れますが、項目リストと考えれば、
    ul li が正解でしょう。簡単なのはtableで固定する方法ですが・・・

    リストと表の違いで区別するのが良いでしょう。
    　ul li は、デフォルトで、頭に " ・ " が付きますから、
    HTML（マークアップ）的に考えれば、箇条書きです。

    表は、エクセルで作る様な「表」と考えれば良く、
    セルの枠線（border）が表示されても表現的に問題ない場合が「表」です。

    マークアップを無視して、レタリングだけなら、
    CSSで、どちらでも（それ以外の方法でも）同じに表示出来ます。

    また、tableの場合、クローラーのセルの読み込み順が変わる場合がありますので注意が必要ですし、旧IEでの差異...続きを読む

    他の回答も見る

    QHTMLタグのDL DT DDを使ってliやulの代わり

    HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、
    liの
    list-style-image: url("test.gif");
    がDL DT DDで表現できません。

    違った方法で表示できるのでしょうか？

    それとも不可能なのでしょうか？

    Aベストアンサー

    できると思いますよ。
    その場合、line-heightを消して画像の高さを一緒にしてやる方が良いかも知れません。

    他の回答も見る

    Qここの色

    <HEAD>
    <STYLE type=text/css>
    b{color:#166464}
    </STYLE>
    </HEAD>
    <BODY>
    <B>あ<B>
    <A><B>い<B></A>
    <B>う<B>
    </BODY>

    「い」は普通のリンクの色のままにさせたいんですが、スタイルシートだけでできませんか？
    <BODY>内の変更はしませんが、インラインでスタイルを書くのならその追記だけはよしとします。

    Aベストアンサー

    CSS の文法に従って書くなら

    a>b {color:inherit}

    となります。
    a の直下にある b は a の色を引き継ぐという意味です。
    ただし、某有名ブラウザはこの書き方を認識しないので、それにも対応したいと言うのなら、a の色を自分で指定して、

    a, a b {color:blue}

    のようにすることになります。(a と a 内の b を青くするという意味)

    ところで、細かいことですが、
    誤 <STYLE type=text/css>
    正 <STYLE type="text/css">

    他の回答も見る

    QDL,DT,DDタグについて

    HTMLのタグで"DL"（定義リスト）、"DT"（定義される用語）、"DD"(定義の内容)というのがあるのですが、実際どういう使い方をするのでしょうか。
    表示をみると単なる見出しと箇条書きって感じなんですが、特別な意味があるのでしょうか？
    ご存知の方、教えていただけますか<m(__)m>

    Aベストアンサー

    そんな感じの意味合いでいいと思いますよ。
    詳しい説明は「とほほのＷＷＷ入門」の中に
    ありますのでそちらをご覧ください。

    http://tohoho.wakusei.ne.jp/html/dl.htm

    参考URL：http://tohoho.wakusei.ne.jp/html/dl.htm

    他の回答も見る

    Q
    内の
    をそのまま表示するには？
    
								
    
					あ<h1>テスト</h1>あ
    

    
上記テキストをそのまま表示したいのですが、<pre></pre>を使うと、<h1>タグが認識されて
    
あ
    
テスト（←見出し文字になる）
    
あ
    
となってしまいます。
    

    
<h1>タグ自体をそのまま表示するにはどのようにすればよろしいでしょうか？				
    
							
    
			
    
								
    Aベストアンサー
    
												
    
					「<」「>」「&」等は実体参照で記述する必要があります。
    

    
< = &lt;
    
> = &gt;
    
& = &amp;
    

    
<h1>ならば「&lt;h1&gt;」のように。				
    
							
    

			
    他の回答も見る
    
		
    
			
    
				
    QWinIE(5以降)で、ddタグをCSSで制御すると、ずれてしまいます。
    
								
    
					WinIE(5以降)で、ddを下記のCSSで制御すると、「取締役/」と書かれた文字から先が、
    
前に3pxほどずれてしまいます。
    
----------------------------------------------------
    
<html><head><title>dl組</title>
    
<style type="text/css">
    
<!--
    
#works dl, dt, dd {font-size: 12px; line-height: 1.5em; margin: 0px; padding: 0px;}
    
#works dt {padding: 0 0 5px 0; float: left;}
    
#works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;}
    
-->
    
</style>
    
</head>
    

    
<body>
    
<div id="works">
    
<dl>
    
<dt>会社創業</dt>
    
<dd>昭和63年2月1日</dd>
    
<dt>改組設立</dt>
    
<dd>平成15年3月1日</dd>
    
<dt>役員</dt>
    
<dd>代表取締役社長/あいうえお<br>
    
常務取締役/かきくけこ<br>
    
<!-- ここから -->
    
取締役/さしすせそ<br>
    
取締役/たちつてと<br>
    
取締役/なにぬねの<br>
    
取締役/はひふへほ</dd>
    
<!-- ここまで -->
    
</dl>
    
</div>
    
</body></html>
    
----------------------------------------------------
    

    
そこで下記のCSSを追加して、いちよう解決したのですが、何かすっきりしません。
    

    
----------------------------------------------------
    
#works dd .sage {padding: 0 0 0 3px;} /* WinIE用 */
    
html>body #works dd .sage {padding: 0;} /* WinIE以外用 */
    

    
<!-- ここから -->
    
<div class="sage">取締役/さしすせそ<br>
    
取締役/たちつてと<br>
    
取締役/なにぬねの<br>
    
取締役/はひふへほ</div></dd>
    
<!-- ここまで -->
    
----------------------------------------------------
    

    
これ以外の方法で、もうちょっとシンプルに解決する方法はないでしょうか。
    
よろしくお願いします。				
    
				
    
					WinIE(5以降)で、ddを下記のCSSで制御すると、「取締役/」と書かれた文字から先が、
    
前に3pxほどずれてしまいます。
    
----------------------------------------------------
    
<html><head><title>dl組</title>
    
<style type="text/css">
    
<!--
    
#works dl, dt, dd {font-size: 12px; line-height: 1.5em; margin: 0px; padding: 0px;}
    
#works dt {padding: 0 0 5px 0; float: left;}
    
#works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;}
    
-->
    
</style>
    
</head>
    

    
<body>
    
<div id="works">
    
<dl>
    
<dt>...続きを読む
				
    
							
    
			
    
								
    Aベストアンサー
    
												
    
					・前回の回答ですが、長さが指定できるなら長さの方がシンプルになります。（高さの指定はなくても大丈夫）
    

    
・dl の compactって対応してないブラウザが結構あります。
    
NN6以降(他gecko使用ブラウザ)とか、Operaとか。safariとかMac系はよく知らないけど。
    
HTML4.01ではDeprecatedに指定されてるし、compact属性の将来は暗いかも。
    
（でも、スタイルシートのdisplay:compactに対応するようになったらちゃっかりcompact属性にも対応するかも。）
    

    
・見ようによっちゃ、表にもみえるしtableでもいいのかも。				
    
							
    

			
    他の回答も見る
    
		
    
			
    
				
    Q～ の中に