テーブルからdivへの変換がデザインに与える影響とは？

2011/09/11 20:17

このQ&Aのポイント

テーブルでのデザインは適切ではないと指摘を受けたため、divに置き換えることを検討しています。okwaveやyahooなどのサイトでもほとんどがdivを使用していることが分かりました。テーブルをdivに変えてCSSを使えば、デザインに大きな影響を与えずに済むかどうか確認したいです。
テーブルでのデザインは問題があると指摘を受けたため、divに置き換えることを考えています。ちゃんと変換し、デザインに影響を与えずに済むか確かめたいです。
テーブルでのデザインに問題があるという指摘を受けたため、divに変換してデザインに適用することを考えています。divを使用することで、デザインに与える影響を確認したいです。

flyingbee
お礼率88% (354/399)

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

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/12 11:22 回答No.4

とても簡単な見本です。下記のようなイメージで作成してあります。・表示サイズは、ウィンドウの80%、　(IE6以降) 　　ただしi-pad用に450pxより小さくはならない　　最大でも900px以上広がらない・ウィンドウの中心に配置(IE6以降) ・画像サイズはウィンドウ幅に合わせて可変とする。 ★常に画像縦サイズより説明文の高さが短いことを想定する。・screen以外の端末に対してはスタイルシートを適用しない。 ★＿はタブに戻すこと。 ★HTML5の場合、DOCTYPE、および<div class="article"></div>を<article></article>のように変える。 [検証]※No.2のHTMLから少し変更しています。　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) [ブラウザ] 　Lynx 　IE5～10--IEtesterによる。　Opera,firefox,safari <!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" media="screen">  ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>パソコン(BIBLO NE12A)の分解</h1> ＿＿＿<div class="abstract" id="abstract"> ＿＿＿＿<h2>愛用のパソコンを分解したみた。</h2> ＿＿＿＿<p> ＿＿＿＿＿私の愛用のノートパソコンの中古機をインターネットオークションで手に入れたので、部品取りと修理のために分解してみました。その経過を記録したものです。＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="section"> ＿＿＿<ol id="step" class="processChart"> ＿＿＿＿<li id="KeyBord"><img src="./images/topBis.png" width="400" height="310" alt="スイッチパネル固定ビスを外す。"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>ゴムキャップをめくってビスを緩める。</li> ＿＿＿＿＿＿<li>スイッチパネルの左にあるゴムのキャップをめくるとビスがありますので、２番のプラスドライバーで緩めます。</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/SwCover.png" width="400" height="310" alt="スイッチパネルを左にずらして外す"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>スイッチパネルを左方向へスライドさせるとカバーが外れます。</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/RemoveKeyBoard.png" width="400" height="299" alt="ゆっくり持ち上げて粘着テープをはがす。"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿めくったゴムキャップと、スイッチパネルの右端を持って左にずらすとスイッチパネルが外れます。図の下の赤丸で示したビスはキーボードとヒンジカバーを固定するビスです。＿＿＿＿＿＿</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>

質問者

お礼 2011/09/12 17:06

何度もご丁寧に感謝いたします。 listの件も承知しました。本件基に修正したいと思います。 tableでもきれいにデザインできていたので凄いと思ってたのですが、こちらで質問して、より専門的な見方に触れることができました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/12 08:46 回答No.3

＞それでもlistの方が適切なんでしょうか？　そうです。判断基準は、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから序列のあるリストは、OL要素で生成される。レシピのように、順番が重要である情報を含むべきである。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Lists in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.1 )］より　大事なことは、それがその文書の中でどのような構成要素であるかです。No.2のサンプルのようにOLでマークアップされていれば、検索エンジンにも添付図(Lynxの画面)のように理解されるでしょう。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/11 23:34 回答No.2

＞イメージ的には図解入り解説といった感じです。例えばパソコンの組立て方とかそんな感じです。　だとしたら最も良いマークアップは番号つきのリスト(Ordered List)ですね。　簡単なテンプレートを作っておきますので、実際にデーターを入れてみてください。以前に私が作成した分解工程のHTMLを書き直したものです。　なにを書いているかは、解ると思います。　 ★タブは、＿に置換してあります。タブに戻してください。CSSは明日にでも・・・　スタイルシートなしでも、画像なしでも意味が通じるかを確認して置いてください。 <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>パソコン(BIBLO NE12A)の分解</h1> ＿＿＿<div class="abstract" id="abstract"> ＿＿＿<h2>愛用のパソコンを分解したみた。</h2> ＿＿＿<p> ＿＿＿＿私の愛用のノートパソコンの中古機をインターネットオークションで手に入れたので、部品取りと修理のために分解してみました。その経過を記録したものです。＿＿＿</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<ol> ＿＿＿＿<li id="KeyBord"><img src="./images/topBis.png" width="400" height="310" alt="スイッチパネル固定ビスを外す。"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>ゴムキャップをめくってビスを緩める。</li> ＿＿＿＿＿＿<li>スイッチパネルの左にあるゴムのキャップをめくるとビスがありますので、２番のプラスドライバーで緩めます。</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/SwCover.png" width="400" height="310" alt="スイッチパネルを左にずらして外す"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>スイッチパネルを左方向へスライドさせるとカバーが外れます。</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><img src="./images/RemoveKeyBoard.png" width="400" height="299" alt="ゆっくり持ち上げて粘着テープをはがす。"> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li> ＿＿＿＿＿＿＿めくったゴムキャップと、スイッチパネルの右端を持って左にずらすとスイッチパネルが外れます。図の下の赤丸で示したビスはキーボードとヒンジカバーを固定するビスです。＿＿＿＿＿＿</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿</div> </body>

質問者

お礼 2011/09/11 23:57

何か色々と考えて下さって有り難うございます。説明文は１つの図に対して１０行前後の予定です。それでもlistの方が適切なんでしょうか？長くなると２０行、行くかもしれません。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/11 22:15 回答No.1

　もしtableを使わないでデザインするのでしたら、まず考えないとならないのは、それは文書構造上、何であるかです。　たとえば、何かの工程や行程でしたら(笑) <ol> 　<li><img> 　　<ul> 　　　<li></li> 　　　<li></li> 　　</ul> 　</li> 　<li><img> 　　<ul> 　　　<li></li> 　　　<li></li> 　　</ul> 　</li> </ol> でしょうし、写真集でしたら <dl> 　<dt><img></dt> 　<dd>説明</dd> 　<dd>説明</dd> </dl> <dl> 　<dt><img></dt> 　<dd>説明</dd> 　<dd>説明</dd> </dl> が、良いかもしれませんし、結構文章が長いアルバムなら <div class="album"> 　<div class="article"> 　　<h2>見出し</h2> 　　<p>説明</p> 　　<p>説明</p> 　</div> 　<div class="article"> 　　<h2>見出し</h2> 　　<p>説明</p> 　　<p>説明</p> 　</div> </div> 　が良いかも知れません。　このいずれであっても、期待されるプレゼンテーションは可能です。あなたが挑戦されている文書がどのような構成要素で成り立っているかは、あなたにしかわかりません。それを率直にマークアップされれば、あとはいかようにもデザインできます。　ただし下記の情報はあったほうがよいかも ★画像のサイズは統一されているのか、統一されていないならどのくらいのサイズか？ ★将来、画像だけ配置して詳しい説明はポインターを載せたら説明が表示されるようにするとか・・凝ったデザインの可能性もあるのか？ ★画像やタイトルから他のページないし画像にリンクさせるのか？　など。

質問者

お礼 2011/09/11 22:25

どうもご指摘有り難うございます。画像サイズは比較的統一されています。 500×400ドットほどの大きさです。　凝った説明は今のところ考えていません。画像へのリンクも、画像からのリンクの予定も今のところありません。ただ、これは保証できません。イメージ的には図解入り解説といった感じです。例えばパソコンの組立て方とかそんな感じです。

テーブルからdivへの変換がデザインに与える影響とは？

divでレイアウト構成