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

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

A 回答 (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ソースのクリーンアップ」をかけてみるのが比較的有効です(完全ではないです。間に半角スペースなどが入ってると消してくれないし)。

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

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

お礼日時:2002/02/05 10:03

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



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

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

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

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

お礼日時:2002/02/05 10:14

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


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

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

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


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

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

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

お礼日時:2002/02/05 10:09

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

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

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

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

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

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

</dd>
<dl>
 <dt>111111</dt>
  <dd>22222222222222222</dd>
  <dd>33333333333</dd>
 <dt>444444</dt>
  <dd>5555555</dd>
   <dl>
    <dt>66666666</dt>
     <dd>777777777</dd>
   </dl>
 </dd>
</dl>

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

それで、cssで

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

とすると、ddタグの文字が白くなります。それはわかるのですが、上の入れ子の例の777777のように入れ子になった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>444444</dt>
  <dd>5555555</dd>
   <dl>
    <dt>66666666</dt>
     <dd>777777777</dd>
   </dl>
 </dd>
</dl>

のようにddの中にまた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
タグでつくる四角形について:webページ作成

恐れ入ります。
WEBページ作成についての質問なのですが
初心者ですのでこちらのカテゴリではないのかもしれません・・。申し訳ございません。

先日からタグを直接入力する方法で
Webページの作成を勉強しております。
<HR>タグで色などの属性を入れて四角形をつくって
Topページに使用して見たのですが
Internet Explorerでは綺麗にみえていても
ネットスケープではずいぶんと違う雰囲気になってしまいました。
(また表の枠なども思ったように表示できないようでした。)

この場合はやはり四角の画像を探して
画像として挿入していくものなのでしょうか。

他の方のWEBページを拝見してみると
IEであれ、Netscapeであれ、変わりなく表示されるのは
やはり技術なのすね・・。
道のりは遠いです。

あまりに素人の質問ですので
恐縮なのですが・・。どうかよろしくお願い致します。

Aベストアンサー

<div style="background:#0000ff;"></div>
を使え、ということでしょう。
四角ならstyleにwidth:50;height:50;とかposition:absolute;top:50;left:0;を足してやればいいんです。
<div style="background:#0000ff;"><a href="menu.html">menu</a></div>
のように何でも入れられますし。

Qどこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)などの関係のものが、以下に複数続いたりする場合、
どう考えてもテーブルのほうがよくない?って思うんですよね。
その場合でも無理やりdivタグでテーブル構造を作るもんなんですかね?

divタグだとコード量が少なくなるからSEO対策的に良いっていうのは理解できますが、
divタグはここまで作る、テーブルタグの使い分けが微妙です。
このときはテーブルにしないといけない。とかないんでしょうから
ある意味センスなんでしょうが。。。。
製作の効率と、コンテンツの管理の仕方を考えると
divタグとテーブルの使い方の境目が分からなくなってしまいます。

そのへんの考え方ノウハウを教えてください。

どこをテーブルで作るべきか、divタグで作るべきかの境目というか、考え方が
微妙で困っています。

サイトレイアウト大まかな段組は<div>でできるだけ行うように、みたいにCSSデザインの勉強をしていると書いてあり、その意味は分かりますが、<div>タグで概観をレイアウトしても、結局は、divで定義したコンテンツBOXの中身だったりメニューの中身だったりは
テーブルで配置したほうが更新作業的にやりやすいし、テーブルほうがよいのでは?
みたいに、なってしまいます。

左に画像、右にコメント(文字列)など...続きを読む

Aベストアンサー

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfloatさせれば良く、メモ帳などのテキストエディタで狙い通りのレイアウトがtableを使うより数倍速く作成できます。floatされる側のmargin指定しだいで表的なレイアウトにもワープロ的なレイアウトにも異なる回り込みを表現できます。初心者はfloat解除を忘れてレイアウトを崩すので、最初にfloat解除をマスターするのがコツと言えばコツです。
tableのtdタグ内のフォントが、親レイアウト構成要素の<div id="">やCSSで全体指定したものを引き継がないので、別途tableに同じフォント指定しなければ統一感のあるページにならないのもマイナス要因です。
ホームページビルダー(これは表でレイアウトする為に作られたようなソフトです)などのWYSWYGに頼って作成していると、この感覚は解らないと思います。これはEXCELをワープロ代わりに使う人が多いのと同じなのではないでしょうか。

No.1補足に対し
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
 画像  | テキスト
-----------------------
これで画像の大きさが同じならtableタグを使ってもいいですが

No.1補足のレイアウトなら、1.も2.もtableを使わないほうがずっと楽です。
画像は、ブロックの性質を持つインライン要素なので、画像もテキストもそれぞれブロック要素である<p></p>タグに入れ、適時左右にfl...続きを読む

QHTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをお気に入

HTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをお気に入りブックマークボタンで取得出来るボタンを付けたいと思います。
どうやれば、いまWebブラウザで見ているURLをお気に入りやブックマークに追加できますか?javascriptを使わないと無理ですか?

やり方を教えてください。

Aベストアンサー

基本的にできないと思った方がよいです。

Webブラウザによって出来たり出来なかったり
出来たとしても方法がバラバラだったり
そもそもブックマーク以外の手段が増えたり

ボタンを設ける代わりに、以下の様な文章を入れてはいかがでしょうか。
「お気に入りいただけましたら、このページをブックマークしましょう。Android のスマートフォンをお使いの方は...」

QHTMLタグの読み方辞典

HTMLタグの読み方辞典と言うのはあるのでしょうか。
もしご存知なら、本のタイトル(発行所等)を教えて頂けないでしょうか。宜しくお願い致します。

Aベストアンサー

技術評論社の「スタンダードHTMLタグ講座 超入門編」という本があるのですが、
最低限のタグを、一から覚えるのに適していると思います。
改訂版も出ています。
書き方はもちろんですが、たしか読み方も載っていたはずです。

ただこれは辞典というより参考書にあたると思いますが…。

ちなみに、HTMLタグの読み方辞典というホームページを見つけました…。ご参考までに。

参考URL:http://www.coolwebwindow.com/cssref/html-tag-ref.html

QHTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをボタンで

HTML,CSSで自分のブログ、ホームページのWebページに今見ているWebページのURLをボタンで取得出来るボタンを付けたいと思います。

どうやれば、いまWebブラウザで見ているURLを取得できますか?javascriptを使わないと無理ですか?

やり方を教えてください。

Aベストアンサー

<script type="text/javascript" language="javascript">
var urlInfo = location.href;
</script>

urlInfoの中にurlが格納されている。これを表示したいなら、

<script type="text/javascript" language="javascript">
document.write("<p>今日は" + urlInfo + "です。</p>");
</script>

と書いた位置に、<p>今日は○○○です。</p>が生成される。
○○○は取得したurlになる。

Qタグに複数のstyle属性

現在ホームページビルダーでサイトを作っています。

まず、背景の画像を<BODY background="画像" style="background-repeat:no-repeat">
で繰り返しを制限しています。

さらに、マウスカーソルの形を十字にしたいので、
<BODY>タグに<style="cursor:crosshair">を追加しました。

ですが、こうすると「複数の属性値(style)が指定されています」
という構文エラーが出てしまい、上手くいきません。


<BODY>タグに複数のstyle属性を入れることはできないのでしょうか?

HP作り初心者なのでよくわかりません。
ご回答宜しくお願いします。

Aベストアンサー

<BODY background="画像" style="background-repeat:no-repeat; cursor:crosshair">

でうまくいきませんか?;で区切ります。
ひとつのページにBODYタグが2度出てる方がおかしいので。

Q

先ほど私は
----------------------------------------------------------
何かしら画像と
「保存」名前のついたボタンを表示するwebページを作成したとします。

そのとき表示されているwebページの内容全体を
「保存」ボタンを押すことによって
ローカルに画像ファイルとして保存する方法は何かないでしょうか?

尚、画像のファイル形式に特にこだわりはありません。
-------------------------------------------------------------
という質問を「教えてgoo」で質問させていただきましたところ

「それは無理。
基本的にブラウザからローカルのHDDにアクセスできない。」

との回答をいただきました。

そこでその原因について調べてみたのですが
どうもそれらしきことについてあるURLを発見できませんでした。

できましたらHTML、JavaScript、
その両方について何故できないかの
回答をいただきたいです。
どなたか詳しい方がいらっしゃったら
関連URLを教えていただけないでしょうか。

先ほど私は
----------------------------------------------------------
何かしら画像と
「保存」名前のついたボタンを表示するwebページを作成したとします。

そのとき表示されているwebページの内容全体を
「保存」ボタンを押すことによって
ローカルに画像ファイルとして保存する方法は何かないでしょうか?

尚、画像のファイル形式に特にこだわりはありません。
-------------------------------------------------------------
という質問を「教えてgoo」で質問させていただきましたと...続きを読む

Aベストアンサー

セキュリティの問題です。

ボタンを押すとHDDにファイルが送れるならば、それはボタンを押すとHDDにウィルスやスパイソフトを転送できるのと同義になります。
JAVA ScriptでローカルのHDDにアクセスする手段は「クッキー」以外には無いです。

ActiveXコンポーネントとかを作れば、また話は変わってきますが。

Qhタグのスタイルシート指定が適応されない原因

hタグをスタイルシートで指定しています。
h1=12PX
色々なPC(IE)で確認してきたのですが、今まではどのPCもちゃんとスタイルシートが適応されておりましたが、たまたまお店のPC(FMV CE60RW)(IE)で見たらhタグのみスタイルシートが適応されておらず、大きな文字になっていたのでレイアウトも崩れてしまっていました。原因がわからず困っています。教えてください。

Aベストアンサー

ブラウザ側でその様に(無効になる様に)設定していればそうなるだけですが・・・。
たぶん「hタグのみ」というよりフォントサイズ指定が無効になっていると思われ・・・。

まぁ他にも OS の事もブラウザのバージョンも提示していないので、呼び出し方法や記述の仕方で無視されていたり、付近の記述に文字化け要因があって合わせて無効になっているとか(たまたま「hタグのみ」表面化しただけとか)無数に可能性あり・・・。


一番簡単なのは、ユーザスタイルシートが指定されていたというオチ・・・。

Qホームページ作成のタグに関してです。

ある文字の上にカーソルを乗っけると文字が変わるように設定しています。
通常はフォント、サイズともに指定しています。
カーソルが乗った時は何も指定していません。
カーソルを離した時に通常のフォント、サイズともに指定されている状態に戻したいのですが、何も指定されていない状態になってしまいます。
mouseout innertext=''の部分にフォントとサイズ指定をする方法があれば教えて下さい。
分かりにくい質問ですが、分かる方よろしくお願いします。

Aベストアンサー

基本的なことですが、タグはデザインするために書くものではありません。
HTMLは、文章をそれを構成する要素(部品)に分解して、その部品がどのような要素(element)であるかをタグを使ってマークアップするものです。--HTMLを作成する上で最も重要な、というか本質です
 特定の文字が略語や頭文字でしたら<abbr>というタグを使ってそれが略語であることを示します。適当なタグがないときは<span>とclass名を使ってマークアップします。
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )]より

 たとえば、次のように書きます。
<blockquote><!-- 引用のブロックであることを示す -->
<p><!-- 段落 -->
<abbr title="Hyper Text Markup Language">HTML</abbr>は、どんな環境からも<span class="memo">Web</span>の情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つ<abbr title="Parsonal Computer">PC</abbr>や、<span class="devices">携帯電話</span>、<span class="devices">モバイル機器</span>、<span class="devices">音声入出力機器</span>、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
</p>
</blockquote>

というふうに、誰が読んでも、あなたが数年後に読んでも、機械が読んでも、この部分が引用であり、ひとつの段落があり、その中に略語があり、デバイス名を示す単語があるとわかりますね。これがHTMLの目的です。

 それをどのように表現するかはスタイルシートと言う別の仕組みです。<h1>で括ると</h1>大きな文字で前後にすこし間隔が取られるのは、ブラウザが持っているスタイルシートによるもので、読み上げソフトは大きな声で読むでしょうし、検索エンジンはそこが見出しだと理解できます。
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』
 このあたりを読んでおくと良いでしょう。

>mouseout innertext=''の部分にフォントとサイズ指定をする方法があれば教えて下さい。
 javascriptを想定されているのだと思いますが、javascriptは無効になっていたり、使えないブラウザもあのでスタイルシートで指定すほうが楽です。

 下記に、サンプルを上げておきます。一部あまり知られていない指定もしてありますが、それはあとで勉強するとして、HTMLとスタイルシートの関係を知ってください。

★HTML4.01strictです。
 Another HTML-lint 5 ( http://www.htmllint.net/ )
 The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
 で検証済みです。
★スタイルシートはCSS2.1です。
 W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
 で検証済み
★文字コードはShift_JISです。タブは_に置換してあるので戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
/* 段落の指定 */
p{margin:0;text-indent:1em;line-height:1.5em;}
/* 引用ブロックのデザイン */
blockquote{border:dotted 1px blue;padding:0.5em 1em;}
/* 引用中のabbrの指定 */
abbr{font-style:italic;}
/* abbrやspanのデザイン */
abbr{color:blue;font-weight:bold;}
span.devices{color:green;font-weight:bold;}
/* マウスオーバーしたときの指定 */
abbr:hover,span.devices:hover{color:red;position:relative;}
abbr:hover:after{
content:attr(title);
position:absolute;bottom:1.6em;left:0;
border:solid red 1px;
white-space:pre;
background-color:white;
padding-right:0.5em;
}
-->
_</style>
</head>
<body>
_<h1>タイトル</h1>
_<p>下記はサンプルです。</p>
_<h2>仕様書を読んでおきましょう。</h2>
_<p>下記は<a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1">2.2.1 HTMLの略歴</a>からの引用文です。</p>
_<blockquote>
__<p>
___<abbr title="Hyper Text Markup Language">HTML</abbr>は、どんな環境からも<span class="memo">Web</span>の情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つ<abbr title="Parsonal Computer">PC</abbr>や、<span class="devices">携帯電話</span>、<span class="devices">モバイル機器</span>、<span class="devices">音声入出力機器</span>、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
__</p>
_</blockquote>
</body>
</html>

基本的なことですが、タグはデザインするために書くものではありません。
HTMLは、文章をそれを構成する要素(部品)に分解して、その部品がどのような要素(element)であるかをタグを使ってマークアップするものです。--HTMLを作成する上で最も重要な、というか本質です
 特定の文字が略語や頭文字でしたら<abbr>というタグを使ってそれが略語であることを示します。適当なタグがないときは<span>とclass名を使ってマークアップします。
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び...続きを読む


人気Q&Aランキング