• 締切済み

掲載画像のレイアウトはテーブルレイアウトで実現?

掲載した画像のようなホームページのレイアウトはテーブルを何重にも組み合わせて (テーブルを何重にも入れ子にして)実現するのが最近の一般的な手法なのでしょうか このようなホームページのレイアウトのコーディング方法の概略を教えてください。 webデザイン素人のためなるべく詳しく丁寧に教えていただけると助かります。

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

みんなの回答

回答No.3

いろんな会社で業務システムの制作に携わったことがありますが、 DreamWeaverというソフトを使ってちまちまテーブルで組んでました。 簡単に見えるけど時間かけるものだと思います。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>その場合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)
回答No.1

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 )

tkwavek
質問者

お礼

ご回答ありがとうございます。ご指摘にある様にこのレイアウトは表データなのでテーブルで作成 してもよいが1つのtableで可能というのはcssをつかってレイアウトを作るということなのかな と思ったのですが。その場合cssがかなり複雑になるような気がしました。 また、私はwebシステムは初心者のためどのようにCSSをコーディングすればよいかわかりません コーディング方法の具体例を大雑把でいいので教えていただけませんでしょうか。

関連するQ&A

  • 掲載画像の様なページを作成する手順

    掲載画像のようなレイアウトのホームページを作りたいのですが 何から手をつけていいのかわかりません。 テーブルもしくはliで後はスタイルシートで作っていくという 漠然とした方法しか思いつきません。 スタイルシートはこの様なテーブルレイアウトのページは 何を設定すればいいのでしょうか 全部作ってくださいとは言いません。 作り方の大まかな概要と手順とスタイルシートに何を設定して レイアウトを実現していくかという筋道を教えてください 独学で学んでいるのですがテーブルをいくつも入れ子(組み合わせて) にすればこのようなレイアウトはできるのですが。 プロの方が作るともっとスマートなプログラミング(スタイルシートに デザイン情報を記述しHTMLはシンプルになると以前このサイトで回答を 頂いたのですが実際のスタイルシートのプログラミング方法がわかりません) 皆さんのお知恵を借りて解決できればと思います。

    • 締切済み
    • CSS
  • レイアウトはテーブルよりCSSですか?

    今まで、Webサイトのレイアウトは、テーブルを何重にも入れ子にして、行ってきました。 最近、「レイアウトにテーブルを使うのはよくない」「テーブルで全体を囲っているレイアウトはダサい」などの意見を聞くようになってきました。 奮起して、テーブルでつくったページをCSSに書き換えようと思いましたが、なかなか困難です。 位置を左上基点に、それぞれの<div>をabsoluteで設定すれば、比較的容易にレイアウトを組めるのですが、やはり全体を画面の中心に持っていきたい、そうなると、全体をテーブルで囲って、align="center"が簡単です。 そこで、質問です。 ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか? ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか? ・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか? ご意見・ご回答いただきたく、どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • レイアウトの実現が出来ずにこまっています。

    レイアウトの実現が出来ずにこまっています。 実現させたいレイアウトは添付の画像の通りで、 Firefoxでは各要素をposition:absolute;で指定して、うまくいきました。 しかしIEでは、添付画像でいうところの白いtableに指定したposition(高さ)が反映されません。 幅はwidth:100%;でFF,IEともに問題なしです。 各要素にheight:100%;としてしまうと、 当然FFでもIEでもhtml,bodyのheight:100%;を継承してしまい tableがピンクの部分からはみ出てしまいます。 なんとかこのピンクの要素の中でテーブルの高さをめいっぱいに表示させたいのですがむりなのでしょうか。

  • ホームページレイアウト

    いつもお世話になっております。 ホームページ制作をしています。(が、未熟者です。) Illustrator8でデザイン・レイアウト作成→ある程度OKが出たらイラレデータを分解・画像化→Dreamweaver8でコーディングという流れです。 自分でイラレ上レイアウトをする場合はコーディングのことを考えて行うのですが、今回別の方がイラレデータをつくり、コーディングのみを行うことになりました。 あまりHPやDreamweaverに詳しくなく、イラレのプロな方なので、重なった画像を多用したりと、Dreamweaverでのレイアウトが難しいものを出されてしまいました。 具体的には複数の写真が重なり、その写真から吹き出し(イラスト)が出ているというものです。 それだけなら画像として扱えばいいのですが、吹き出しの中の文字はDreamweaverで打たないと読めないのです。 こういう場合は、まず吹き出し中の文字を消した画像データを用意→Dreamweaverでテーブルを作り背景画像にする→テーブルをうまく吹き出し部分に合わせ文字を打つ という方法しか思いつかないのですが、間違っているでしょうか? テーブルレイアウトはよくないと言われますが、この場合もCSSなどででいけるものでしょうか?(CSSレイアウトは勉強中で詳しくありません。) 恐れ入りますがご回答お待ちしております。 長文失礼致しました。

  • DreamweaverMXのレイアウトテーブルについて

    お世話になります。 Dreamweaverのレイアウトテーブルについて質問がございます。 最近ホームページビルダーからDreamweaverへ移行いたしまして、苦戦しながらもなんとか形になってきました。 何時間かやっているうちに2点ほど疑問があがりましたので、質問させていただきます。 1.レイアウトを決めてからそこに画像を入れていくという方式をとっているのですが、なぜかレイアウトテーブル(緑)の中のレイアウトセル(青)に画像を入れるとレイアウトセルがちょっと大きくなってしまいます。画像はセルと全く同サイズです。原因はなんでしょうか? 2.レイアウトテーブルなんですが、枠を表示することはできないのでしょうか?プレビューを見てみると、画像だけが浮き上がって見えるような感じになっています。 お手数をおかけいたしますが、ご見識のあるかたがいらっしゃいましたら何卒ご指導お願いいたします。

  • tableによるレイアウトorCSSによるレイアウト

    現在HPをリニューアルしようとしております。 現状はホームページビルダーでテーブルを多用してレイアウトしておりました。 洋服関係のネットショップなのでかなり見た目ごちゃごちゃした感じで作っています。 また、「生きているサイト」を意識して頻繁に少々のレイアウトや内容の更新をしております。 *商品はコンスタントに更新してます。 このたび、dreamweaverでhtml+CSSでブロック要素のまわり込みでレイアウトして作りかけています。 がしかし、参考に他のサイトのソースを多数見ていくとレイアウト自体はテーブル(html)で行っているサイトが多く現在、レイアウト自体をテーブル( html)orCSSでコントロールする方法が良いか迷っております。 html+CSSでブロックコントロールしていく方法を多方面推奨しているようなのですがブラウザやブラウザバージョンにより崩れたり・・・とういう事は理解できております。 そこでお教え頂きたいのですが・・・ ●今後CSSがスタンダードになるとは思いますが現状、web製作の現場ではTABLEによるレイアウトとCSSによるレイアウトどちらがスタンダードでしょうか? ●また、CSSの場合、<div>のまわり込みでレイアウトを決めて<div>内のレイアウトはどのようにすればフレキシブルに内容や画像を取り扱えるでしょうか? ●その他、お気づきの点があればご意見ヨロシクお願い致します。

    • ベストアンサー
    • HTML
  • レイアウトテーブルとレイヤーの使い分け

    独学でDREAMWEAVER MX 2004を使っています。効率的なホームページ作りを知りたくて質問しました。 今、一冊DWMXの教本に目を通し、いざページを組み始めようとしているのですが、A、「レイアウトテーブル、レイアウトセル」VS B、「レイヤー、テーブル」の二つの機能に混乱しています。 友人からは、Aはどのブラウザー?からも見られて、ずれにくいのだと聞きかじったりもしました。ますますハテナです??? それぞれの使い分け方法を教えてください。 また、プロの方はどのような手順で作製されるのですか? 友人からは、始めに1:ページをイラストレーターで作ってから、2:フォトショップでスライスし、3:ドリでテーブルにはめ込んでいく。という制作の流れを聞きました。この手法が主流なのでしょうか? 素人の私が、まねっこしたものの・・・、テーブルをデザインに合わせて結合、削除していき、パズルのようにピースをはめ込んでいくと、プレビューの際にずれてしまいます。  質問が二つになってしまい申し訳ありません。質問の動機でもあるので合わせて書かせていただきました。  どなたかご回答よろしくお願いいたします。

  • テーブルのレイアウトがうまくいきません

    DreamweaverMXで簡単なホームページを作っています。 テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか? まず大枠で1行3列のテーブルを作り、幅だけ800pに指定。(高さ指定はしていません) 両端の列はそれぞれ幅だけ180pに指定。 で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが 一番左の列の中にテーブルが3つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。 方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。 一番上をツライチに合わせるにはどうすればいいのでしょうか? というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。

  • このテーブルセットの入手先を教えてください。(画像掲載)

    このテーブルセットのメーカーか、入手先を教えていただけますでしょうか? 知り合いのところで気に入ったデザインのもので写真を撮らせてもらったのですが、 その知り合いも購入元を覚えておらず、どなたがご存じないでしょうか? もしなければ似たようなデザインのものでも検討したいなと思っています。 実は、社長に探すのを頼まれていて、入手先がわからず困っております。。 前回画像の掲載をし損なっていたので再掲載します。

  • 入れ子テーブルの親テーブルの行高を動的に変化させる

    入れ子テーブルの親テーブルの行高を動的に変化させるには JSPで開発を行っているのですが掲載画像の青く塗りつぶした 入れ子になっている明細行を表示するテーブルの行数は動的に 変化します。そのため、動的に高さがかわると思うのですが 明細が増えるごとに入れ子の親テーブルの行高を変化させるに はどのようにプログラミングすればいいでしょうか なるべくソースコードでのご回答をお願いいたします。

専門家に質問してみよう