- 締切済み
掲載画像のレイアウトはテーブルレイアウトで実現？
掲載した画像のようなホームページのレイアウトはテーブルを何重にも組み合わせて （テーブルを何重にも入れ子にして）実現するのが最近の一般的な手法なのでしょうか このようなホームページのレイアウトのコーディング方法の概略を教えてください。 webデザイン素人のためなるべく詳しく丁寧に教えていただけると助かります。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 110110110110
- ベストアンサー率23% (3/13)
いろんな会社で業務システムの制作に携わったことがありますが、 DreamWeaverというソフトを使ってちまちまテーブルで組んでました。 簡単に見えるけど時間かけるものだと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞その場合cssがかなり複雑になるような気がしました。 逆にずっと楽になります。 HTM5で書くと、(タブは＿に置換してある) <!doctype html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<table> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th>・・・・・・ ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>名前</td><td class="form"><input type="text" size="20" name="name" value=""></td> ＿＿＿＿＿<td>住所</td><td class="form"><input type="text" size="20" name="address" value=""></td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</section> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLはレイアウトのために記述するものではありません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ これが本当の意味での基本中の基本です。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 『非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』あたりを読むこと。 この場合は、明らかに表データですから表でマークアップしても問題ありません。ただし、（テーブルを何重にも入れ子にし）なくても、ひとつのtableで可能です。 テキストエディタで作成するなら、エクセルなどの表計算ソフトで表を作成し、一旦tsvなりcsvで出力して、置換機能を使ってtableに直すのが早いでしょう。 ・文書構造とプレゼンテーションの分離がもっとも大事なところです。このようにプレゼンテーションしたいからこのようにHTMLを書くという発想は誤りです。 表なら表で、リストならリストでマークアップして、それをスタイルシートでどのように表現するか(プレゼンテーションするか)を分けて考えましょう。 →2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
お礼
ご回答ありがとうございます。ご指摘にある様にこのレイアウトは表データなのでテーブルで作成 してもよいが１つのtableで可能というのはcssをつかってレイアウトを作るということなのかな と思ったのですが。その場合cssがかなり複雑になるような気がしました。 また、私はwebシステムは初心者のためどのようにCSSをコーディングすればよいかわかりません コーディング方法の具体例を大雑把でいいので教えていただけませんでしょうか。