- ベストアンサー
テーブルを使わずにコーディングをしたい
- テーブルを使用せずに、添付の画像のようなページを作成する方法について教えてください。
- 青や黄色の四角を一枚の画像として背景に指定し、プルダウンのタブを四角の下に配置したいが、位置の問題があります。
- position: absolute; や position: relative; を使用しても、CSSの複雑さにより位置がブラウザによって変わってしまいます。他にどのような方法があるでしょうか？
- eri0055896
- お礼率90% (46/51)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
色が背景色の場合。もっと簡単かな <!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"> <!-- div.section{position:relative;width:80%;min-width:600px;max-width:900px;margin:0 auto;} div div{width:26%;} div div div{width:100%;} div.column{position:absolute;left:0;top:0} div.column div{padding:0.5em 1em;} div.n2{left:33%;} div.n3{left:66%;} div.column div p{padding:0 1em;} div.column div.product p{background-image:url(./images/blue.gif);} div.column div.books p{background-image:url(./images/green.gif);} div.column div.note p{background-image:url(./images/orenge.gif);} div div div p{width:100%;line-height:30px;margin:0;text-indent:1em;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<form action="./"> ＿＿<div class="column n1"> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m1" tabindex="1"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m2" tabindex="2"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n2"> ＿＿＿<div class="books"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m3" tabindex="3"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m4" tabindex="4"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n3"> ＿＿＿<div class="note"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<select name="m5" tabindex="5"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div class="product"> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、なんたらかんたら、なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら、 ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<p> ＿＿＿＿＿なんたらかんたら ＿＿＿＿</p> ＿＿＿＿<select name="m6" tabindex="6"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿</form> ＿</div> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞テーブルを使わずdivだけで作成することは、可能でしょうか？ tableを使ってもdivを使っても出来ますが、tableにしろdivにしろ、元々レイアウトのためのものじゅないです。単に仕様に合わせるためだけにtableを止めて、divにしたって意味が無いですよ。ここはとても多くの人が間違っている。<font color="red">じゃまずいから<span style="color:red">とするのと同じです。divやspanは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 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 )］より 本題ですが、縦方向の流し込み、枠(カラム)流し込みは、CSS3の普及を待たないと難しいですね。CSS3のcolumn-countを使います。 <div class="article"> <div class="section"> <p></p> <input> </div> ・・・【中略】・・・ <div class="section"> <p></p> <input> </div> </div> だと、 div.article{ column-count:3; } div.article div.section{ dispaly:inline-block; } 位で済む・ CSS2.1の範囲内で行おうとすると、適当な範囲でDIV(div class="column") でくくって、absoluteさせるほうが良いでしょう。 ＞サイトのCSSが複雑でどこかでposition：relative；を使っているようで ＞位置がブラウザによって変わってしまったり全画面表示の時の位置と ＞縮小した画面の時では場所が全然違います。 これは、absoluteとは関係ありません。HTMLもCSSもtableを使ってレイアウトするよりはるかに簡単になるはずです。 単に間違っているだけです。このレベルで、そんな複雑なスタイルシートになるはずが無いです。 マナーとして、 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み 注意】画像はそれぞれを、それぞれのサイズで用意してください。 注意】タブはインデントに置換してあります。 ウィンドウ巾は、450px以上なら崩れないはず・・ <!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"> <!-- div.section{position:relative;width:80%;min-width:450px;max-width:900px;margin:0 auto;} div div{width:26%;} div div div{width:100%;} div.column{position:absolute;left:0;top:0} div.column div{position:relative;} div.n2{left:33%;} div.n3{left:66%;} div div div p{text-align:center;width:100%;} div div div p img{width:100%;height:auto;} --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="section"> ＿＿<form action="./"> ＿＿<div class="column n1"> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/blue180.gif" width="200" height="180" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m1" tabindex="1"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/blue500.gif" width="200" height="500" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m2" tabindex="2"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n2"> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/green400.gif" width="200" height="400" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m3" tabindex="3"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/blue180.gif" width="200" height="180" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m4" tabindex="4"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿<div class="column n3"> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/orenge100.gif" width="200" height="100" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m5" tabindex="5"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿＿<div> ＿＿＿＿<p> ＿＿＿＿＿<img src="../images/blue480.gif" width="200" height="480" alt=""> ＿＿＿＿</p> ＿＿＿＿<select name="m6" tabindex="6"><option selected>選択してください。<option>テスト</select> ＿＿＿</div> ＿＿</div> ＿＿</form> ＿</div> </body> </html>
お礼
回答ありがとうございます。 非常に勉強になりました。
- k0021
- ベストアンサー率26% (32/120)
1段の内容を記述 2段の内容を記述 3段の内容を記述 <div style="float:left;width:10.58em;">１左側表示<br> ２左側表示<br> ３左側表示</div> <div style="float:left;width:21.19em;">１中央表示<br> ２中央表示<br> ３中央表示</div> <div style="float:left;width:10.58em;">１右側表示<br> ２右側表示<br> ３右側表示</div> width:10.58em;等の指定を％すると画像をリサイズすると比率で変わります。
お礼
回答ありがとうございます。 非常に勉強になりました。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
縦のふたつずつを一つのボックスに入れて全部float:leftとか。 四角の部分やプルダウンが実際は何なのか分からないからこれ以上はなんとも。
お礼
回答ありがとうございます。
お礼
回答ありがとうございます。 非常に勉強になりました。