HTMLで区画のレイアウトをするとき、通常基本的なものから複雑なものまで、<table>や<div>を使うのが一般的なんでしょうか?
下の図は、■が境界線で、□が画像や文章を配置する区画です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■□□□□■□□□□□□□□□□□□□□□□□□□■□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□□□■□□□□□□□□□□□□□■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
回答よろしくお願いします。
No.1ベストアンサー
- 回答日時:
こんにちは
<table>は表内を読み込んでから表示されるのであまりレイアウト用には使わないほうがいいと思います
<style type="text/css"><!--
.float { float:left; }
#main { width:806px; }
#head { width:804px; height:50px; }
#midleft { width:200px; height:200px; }
#midcenter { width:400px; height:200px; }
#midright { width:200px; height:200px; }
#btmleft { width:502px; height: 100px; }
#btmright { width:300px; height:100px; }
div { border:1px solid; }
--></style>
<div id="main">
<div id="head">上部</div>
<div id="midleft" class="float">中部左</div>
<div id="midcenter" class="float">中部中</div>
<div id="midright" class="float">中部右</div>
<div style="clear:both;"></div>
<div id="btmleft" class="float">下部左</div>
<div id="btmright" class="float">下部右</div>
<div style="clear:both;"></div>
</div>
※width
必要です。全体、上部、中部、下部のwidth合計は一致させてください
『全体』
#main 806px
『上部』
#head 804px
#head border 1px*2
合計 806px
『中部』
#midleft 200px
#midcenter 400px
#midright 200px
それぞれのborder (1px*2) *3
合計 806px
『下部』
#btmleft 502px
#btmright 300px
それぞれのborder (1px*2) *2
合計 806px
という風に(それぞれのdiv内でそのdivのwidthを超えるwidthを設定すると幅が広がりレイアウトが崩れますので注意して下さい)
※height
便宜上つけてます。必要なければ省略してください
※div { border:1px solid; }
コンテンツ内に別に<div>があるときにはそちらにもborderがつくので
#***それぞれのCSSに付け加える
もしくは
<div id="head">にもclass="float"をつけて .float{ }内に付け加えてください
この際には上部と中部左の間に<div style="clear:both"></div>も付け加えるか
<div style="clear:both"></div>(中部右と下部左の間)を削除して#midleft、#btmleftを class="float2" などのようにして
.float2 { clear:both; float:left; border:1px solid; }
にする手もあります
なるほど。<div>がいいんですね。<table>は、読み込むのに時間がかかるということでしょうか。
スタイルシートの例を書いていただきありがとうございます。
参考にさせていただきます。
ありがとうございました。
No.2
- 回答日時:
tableは表作成用のタグなので、レイアウトはdivを用います。
参考URLを参考にしてみてください。
参考URL:http://desperadoes.biz/style/dan/index.php
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- ホームページ作成・プログラミング アニメ公式サイト風なWebページを作りたいです。 無料のテンプレートはありますか? 2 2022/04/02 11:33
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- WordPress(ワードプレス) ワードプレスの403エラーについて 2 2023/03/06 14:38
- プラモデル・鉄道模型・模型製作 Nゲージについてです 1 2022/09/23 05:19
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- Word(ワード) ワード。オブジェクトの一部分にグラデーションを塗るには 2 1 2022/10/04 16:25
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- Windows 10 ネットからファイルをデスクトップにダウンロードする際、既存のファイルの並びが崩れてしまう 4 2022/04/19 08:20
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
heaerとfooterに背景画像が難し...
-
CSSのposition値の上書き(打消...
-
CSSで「overflow:scroll」をしてい
-
初心者html・CSS ウィンドウを...
-
CSS、width100%でもできる余白
-
リスト表示がうまくいきません...
-
W3Cのソースコードの検証サービ...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
スクロールボックスを中央に配...
-
テーブル内の画像をマウスオー...
-
li 黒丸含んで移動する方法
-
CSSで縦三段レイアウトにして、...
-
CSS検証サービス
-
CSSの「position:absolute;」属...
-
CSSを使い、ページの一番下に文...
-
【CSS】IE6で印刷時にレイアウ...
-
IE6以下でメニューリストの下に...
-
HP初心者です。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報