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

そこで、質問です。

・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか?

・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか?

・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか?

ご意見・ご回答いただきたく、どうぞよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

 この問題は多分人によって全然意見が違うと思います。

テーブルを嫌っている人と同時にCSSを嫌っている人も存在しますし、拘らない人もいます。
 また、サイトの見た目をサイズ固定のきめ打ちで作るのはいけない、と思う人もいれば固定しないと上手く出来ないじゃないか、と思う人もいます。
 私はどちらかといえばCSSで流動デザインを推奨しているので参考にはならないかもしれませんが…。

・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか?
 margin:autoで中央に寄せています。でもデザインそのものがウィンドウにあわせての%指定なので左基準でも余り変わりません。

・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか?
 私も<div>の入れ子はします。もっと簡単な方法もあるのでしょうが…。配置についてはfloatで割と対応できませんかね…?absoluteよりは融通が利く感じじゃないかと思うのですが。(あくまで私見)

・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか?
 個人的にはそう思います。テーブルは何重もの入れ子にしているとアナログ回線で弱いパソコンだった場合やブラウザなどの相性が良くない場合に(マックとネスケの組み合わせだと危険らしいです)OSを道連れにしてコケる事があるそうです。
 あと単純にサイトの模様替えが楽になりますし。外部CSSファイルを弄るだけでサイト内の全てのページを変更出来るというのは利点の一つじゃないでしょうか。

 勿論、ブラウザによっては正しくレンダリングされないなどの問題があるようですが、其れはブラウザのバグであってCSSの責任でない以上責められないんじゃないかと。(例えばあるブラウザは1バイトの文字列が一定以上続くとテーブルやborderのwidth属性など無視してどんどん横スクロールのばしてくれるんですが、だから1バイト文字が悪いとは誰も言いません)

 取りあえず個人的にはこんな感じです。ある意味哲学の問題(笑)ですね。誰にも迷惑をかけなければテーブルでレイアウトでも構わないのでは。
    • good
    • 0

ご自分のお作りになるウェブページに最も見合った作り方を、ご自分の判断でお探しになるのがベストかと思います。



というのも、この手の分野では、自分の考えに固執するあまり、判断の偏ってしまった意見が、あらゆるメディアで氾濫しているからです。それこそマガジンからリファレンスまで。

KKatohさんのご回答を読む限り、学習の方向性が最終的な目的から逸れてしまっているような気がしてしまうのですが…。余計な心配でした( ̄- ̄;)
※個人的には、一番シンプルな方法が一番だと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
お礼が大変遅くなり申し訳ございません。
かなりCSSについて勉強しまして、CSSの良さがわかってきたところです。
最終的な方向からそれてしまったようですが、学んでよかったと思っています。
これからは基本的にCSSでデザインしていくつもりです。

お礼日時:2004/12/05 11:24

4番です。



「じゃあ、divを使わずどうやるの?」という
質問が予想されますが、それに対する回答はこうなります。

【回答】何のためにCSSをやろうとしているのですか?
「まずデザインありき」ならCSSにする意味はありませんので
テーブルレイアウトのままでいいのではないでしょうか?

この回答への補足

皆様、ご回答ありがとうございます。
本来なら1件、1件に対してお礼を書かねばならないところを、補足欄により、皆様にご連絡することを、深くお詫び申し上げます。
皆様の回答を読みながら、あわせて、CSSに関する書籍で、色々と勉強いたしました。おぼろげながら、CSSについて理解できてきたような気がします。
読んだ書籍に中には、XHTMLとCSSおよびホームページの構造に関する書籍もありました。そのため、4番の方のおっしゃっていることも、なんとなく、ほんとになんとなくですが、わかるような気がします。(参考URLも必ず読破いたします)
これから、皆様に教えていただいたこと、書籍から得た知識をいかしながら、Webサイトのつくりなおしに着手いたします。
今後も、皆様の教えを請うことがあると存じます。その際は、是非よろしくお願いいたします。
本当にありがとうございました。

補足日時:2004/11/19 23:00
    • good
    • 0

ひとつアドバイスさせてください。



> 全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが

それをやるならテーブルレイアウトと同じことで
めちゃくちゃダサいです。
CSSを使う意味はまったくありません。

なぜCSSが推奨されているのかという
本質・目的の部分をもっと勉強してみてください。
HTMLとデザインを切り離し、HTMLの
文章構造の論理性・汎用性を確保するためです。
<div>を多用しては、文章構造が何にも論理的になりません。

<div>を使うなとは言いませんし、私も使っていますが
<div>を入れ子状に多用しているページは
「CSSを何も分かっていない人間がつくったページ」と
心ある人からは笑われます。
まともなCSS使いは<div>を使うこと自体を恥と考え
できうるなら<div>をまったく使わずに作ろうとします。

「div病」という言葉もあります。
http://www.fromdfj.net/html/divsyndrome.html
「div病」で検索すれば、ほかにも情報が得られると思います。

なお、ここは読むに値するページです。
http://kanzaki.com/docs/htminfo.html
ひととおり読むことをお勧めします。

参考URL:http://www.fromdfj.net/html/divsyndrome.html,http://kanzaki.com/docs/htminfo.html
    • good
    • 0

・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか?



これは、好みの問題だと思います。個人・企業のサイトを見ても左寄せだったり中央だったり色々ですよね。

・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか?

私もそのような方法をとっています。#2の方と同じです。例えば全体を中央に配置して、更に2段組のレイアウトを作る場合、
<body style="text-align:center">
<div style="margin-right:auto;margin-left:auto;text-align:left;width:500px">
<div style="float:left;width:200px">左側</div>
<div style="float:left;width:300px">右側</div>
</div>
このような感じで。下のURLも参考にしてみてください。

・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか?

議論があるようです。価値観の問題だと思います。古いバージョンのブラウザを考慮するならば、テーブルだと思います。できるだけどの環境でも見えるように配慮する場合など…。逆に流行りのblogなどはCSSでのレイアウトが主になると思います。テンプレートの差し替えが容易ですからね。

ただ、全体を<table>で囲ってalign=centerとする場合、何が問題かというと重くなってしまうからなんです。<table>内の情報をすべて読み込んで初めて表示…となるので、テキスト量の少ないページなら問題ないと思いますが。画像が多いと考えものですね。スマートじゃないな…という感じも確かにあります。プロのデザイナーがテーブルでレイアウトを組むにしても、いくつものブロックを組み合わせてできるだけ軽い表示になるように、気を遣っていると思います。

参考URL:http://www.mozilla.gr.jp/standards/webtips0004.h …
    • good
    • 0

> ・CSSでレイアウトを組むとき、左上を基点にされていますか?全体を中央に配置するようにされていますか?



どちらも使いますが、中央にすることが多いです。

> ・CSSで、全体を中央に配置するとき、全体を<div>で囲って、その中に<div>を入れ子にして、配置していくと思いますが、なかなか思い通りの配置になりません。このやり方であっていますか?簡単なやり方がありますか?

私も中央にする場合は、まずDIVで全体を囲いますが、position="absolute"は使いません。
(IEで文字が選択できなくなる不具合があるみたいなので・・・。)
私の場合は、DIVのwidthを決めて、左右のmarginをautoにしてます。(margin: 0 auto;みたいな)
あとは念のため、bodyのtext-alignをcenterに。

・やはり、レイアウトにはテーブルよりも、CSSを使ったほうがいいですか?

その方が後々のメンテナンスがしやすいですし、閲覧者のいろいろな環境にあわせやすいと思います。
が、その辺りは考え方次第で、テーブルでのレイアウトが一概に悪いというわけではないと私は思います。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QDIYテーブルの折りたたみ脚について

天版を蝶番で付けて真ん中を繰り抜き、七輪テーブルを作成しました。
現状は、余っているキャンプ用テーブルの脚をガムテープで固定しています。
ユニフレームの焚き火テーブルと同じ高さの折りたたみ脚を付けたいと思ってますが良いアイデアもしくは脚の販売先はありますでしょうか?
焚き火テーブルの高さは37cm、七輪テーブルの天版の厚さは約1.5cmなので、最低でも35cmの脚が必要になるかと思います。30cmの脚は結構見かけるのですが・・・。

Aベストアンサー

市販品にこだわらず、木などで作れば高さ自由ですよ。

1)別板を2枚クロスさせて天板を置く
2)蝶番つけて折りたたみ足にする
3)ナット埋めてねじ込みにする
4)テーブルを箱型にして、七輪+火種のケースとしてもそのまま使う

↑これらは高さの微調整にはアジャスタフットなりが必要ですが、
こういうの↓はアジャスタ機能もってますね

5)パイプの入れ子構造にして、内パイプは外パイプとねじ止めする。
 または外側の先端に割りをいれておいてクランプやホースバンドなどで締めて内パイプを固定する
6)天板の下にハの字形に広がるように左右脚をつけて、間をロープでつないで開き具合を調節する


ま、私なら4か6にしますね。
6のみ、簡単に絵にしておきます。

QCSSレイアウトの中にテーブルのような使い方でCSSを入れ子にする方法で質問です。

テーブルを一切つかわないでサイトを作成したいと思っていて、
現在CSSで2カラムのレイアウトをしています。

困っているのが、
ページの下部に”前のページ HOME 後ろのページ”
という風に横に3つならべたいと思っています。
テーブルであれば簡単にできることなのですが、
それをCSSでできないかと思っております。

そこで外部CSSに
.table{
width: 10px ;
background-color: #ffffff;
margin: 5px;
border: solid 0px ;
padding: 0.5em;
}

と記述し、HTML部分に
<p><span class="table">前のページ</span>
<span class="table">HOME</span>
<span class="table">後ろのページ</span></p>

という風に記述してみたのですが、
文字を打っていくとどんどんよこに伸びて、横幅を指定している意味がないような感じです。

私のようなCSSの使い方をしたい場合はどのように記述すればよろしいのでしょうか?

テーブルを一切つかわないでサイトを作成したいと思っていて、
現在CSSで2カラムのレイアウトをしています。

困っているのが、
ページの下部に”前のページ HOME 後ろのページ”
という風に横に3つならべたいと思っています。
テーブルであれば簡単にできることなのですが、
それをCSSでできないかと思っております。

そこで外部CSSに
.table{
width: 10px ;
background-color: #ffffff;
margin: 5px;
border: solid 0px ;
padding: 0.5em;
}

と記述し、HTML部分に
<p><sp...続きを読む

Aベストアンサー

ANo.2/4/5です。

> たしかにフッターがなんだか長いです(^^;)

やはりそうでしたか。

> 740pxにすればおっしゃるとおり完璧になりました!

お役に立てた様で良かったです。

> paddingの分長くなっちゃうんですね。勉強になりました。

このあたりのボックスモデルの計算方法については、下記のサイトなどがとてもわかりやすい解説をされていますので、一度お読みになってみる事をお奨めします。このサイトはコラム組に関しても大変よくまとまっていますので、その点でも参考になるかと思います。
【参考】http://www.geocities.jp/multi_column/
第1章から順番にじっくり読んでいかれると今後のCSSによるコラムレイアウトに関して役立つかと思いますが、特に第2章「ボックスモデルと DOCTYPE スイッチ」をご覧になれば、上記のwidhtとpaddingに関する問題や、もう一つのご質問である:

> DOCTYPEについてなのですが、どのブラウザでみても問題のおきにくいものってあるのでしょうか?

についても、ヒントが得られると思います。後者については諸条件(制作者のポリシーも含む)により、どの方法を採用するかはケースバイケースですのでご自身のニーズ(現状のスキル的なものも含めでですね)に最も相応しいと思われたものを採用されるのがよいのでは。

ANo.2/4/5です。

> たしかにフッターがなんだか長いです(^^;)

やはりそうでしたか。

> 740pxにすればおっしゃるとおり完璧になりました!

お役に立てた様で良かったです。

> paddingの分長くなっちゃうんですね。勉強になりました。

このあたりのボックスモデルの計算方法については、下記のサイトなどがとてもわかりやすい解説をされていますので、一度お読みになってみる事をお奨めします。このサイトはコラム組に関しても大変よくまとまっていますので、その点でも参考になるかと...続きを読む

Q【DIY】テーブル脚の長さを上手く合わせたい

机の横に、同じ高さのテーブルを置いてスペースを拡張したいと考えています。
設置場所の大きさの関係で、天板を690(D)×550(W) t=30mm(厚さは検討中ですが…)で用意しようと思っています。

で、高さなのですが、机の高さが750mmあるので、脚の長さは720mm必要となります。

ところが、この高さにちょうど良い脚がなかなか見つかりません。

http://item.rakuten.co.jp/mokuzaiya/23526/
このあたりはお手軽でちょうど良いのですが、ちょっと長さが足りません。20mmはゴムなどを咬ませるにも微妙な高さですし… アジャスター用の穴をあける道具も無いですし。

もちろん、そこまで完全自作(幕板組んで……までや、もしくは座金の取り付けなど)すれば問題無い話ではあるのですが、まだまだ初心者なのと、あまり道具も揃っているわけではないので、何かお手軽な方法や商品が無いかなぁ…と思いまして。
もし何かご存じなもの、もしくは良い方法があればご案内いただければ幸いです。

ちなみに、添付図では、とりあえずφ60mmの脚が4本、それと天板を貫通する照明スタンド用の穴φ40mm(スタンド脚φ230mm)を書き入れてあります。スタンドの位置はあまり動かせませんが、脚の形は特にはこだわりはありません。(ものを置く関係でなるべくこれ以上太くしたくないですが…)

アドバイスの程、よろしくお願いいたします。

机の横に、同じ高さのテーブルを置いてスペースを拡張したいと考えています。
設置場所の大きさの関係で、天板を690(D)×550(W) t=30mm(厚さは検討中ですが…)で用意しようと思っています。

で、高さなのですが、机の高さが750mmあるので、脚の長さは720mm必要となります。

ところが、この高さにちょうど良い脚がなかなか見つかりません。

http://item.rakuten.co.jp/mokuzaiya/23526/
このあたりはお手軽でちょうど良いのですが、ちょっと長さが足りません。20mmはゴムなどを咬ませるにも微妙な高さですし… ...続きを読む

Aベストアンサー

#2です。

木工ボンドは強力ですよ。
URLの脚の太さより少し小さめの同じように円形に
ホームセンターの糸ノコを借りてカットすれば、
実際 厚みは同じに仕上がるのでガタは無い筈です。

念のためにべニア板と脚はコーススレットで止めてしまえば
何ら問題ないと思います。

コーススレットのネジ頭はべニア板より 深く打ち込む必要はあります
床と接触しないためにも・・・

たかが2cmほどのものを継ぎ足すのですから
不細工な切り方になっても 覗き込まない限り普段が見えませんし、
もし気になるのでしたら ベルトサンダーで真円にも出来ますし
脚の太さと揃えることも可能です。




脚にこだわらないのでしたら
角材をそのまま利用する方法も有ります。

天板に鬼目ナットをねじ込み
http://www.google.co.jp/imglanding?imgurl=http://blog-imgs-27-origin.fc2.com/c/h/i/chitei/spmk00435.jpg&imgrefurl=http://chitei.blog108.fc2.com/blog-entry-163.html&h=293&w=400&sz=31&tbnid=_1fe8ogwlmc-8M:&tbnh=91&tbnw=124&prev=/search%3Fq%3D%25E9%25AC%25BC%25E7%259B%25AE%25E3%2583%258A%25E3%2583%2583%25E3%2583%2588%26tbm%3Disch%26tbo%3Du&zoom=1&q=%E9%AC%BC%E7%9B%AE%E3%83%8A%E3%83%83%E3%83%88&hl=ja&usg=__BA4yAh03XOWl69o-SRpFh-OQOy4%3D&sa=X&ei=tNTRTY_lN4i2sAO_-r2uCQ&ved=0CFgQ9QEwAw

板付きナットを用意して
http://www.yht.co.jp/yds/product.asp?pf_id=17011902300

その後
両切りボルト(ボルトのネジを切っただけの物)を上手に組み合わせれば
金ノコで好みの長さに切れます。

お好みの太さの角材を
ホームセンターで同じ寸法にカットしてもらうだけで良い訳ですから、
こちらの方が化粧された脚を買うことから比べれば
比較にならないくらいお安く出来あがります。

もちろん角(かど)はペーパーなり 鉋がけで少し丸みを持たせます。

すべてホームセンターで揃います。

#2です。

木工ボンドは強力ですよ。
URLの脚の太さより少し小さめの同じように円形に
ホームセンターの糸ノコを借りてカットすれば、
実際 厚みは同じに仕上がるのでガタは無い筈です。

念のためにべニア板と脚はコーススレットで止めてしまえば
何ら問題ないと思います。

コーススレットのネジ頭はべニア板より 深く打ち込む必要はあります
床と接触しないためにも・・・

たかが2cmほどのものを継ぎ足すのですから
不細工な切り方になっても 覗き込まない限り普段が見えませんし、
もし気になるの...続きを読む

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

Q折りたたみ脚と天板を組み合わせたテーブルについて。

木製の折りたたみ脚の上に天板を乗せたようなデザインのテーブルが欲しいのですが、このようなデザインのテーブルの名称をご存知の方おられましたら教えてください。テーブルというよりはデスクとして使いたいので、奥行きも60cm程のものを探しています。ただ、脚は華奢なものがいいので、DIY等で販売している太めの脚ではないものを希望します。(安定性が少し心配ですが…。)

Aベストアンサー

こんなイメージですか?奥行きが50cmですが・・・?脚はもう少し華奢がいいのかな?

参考URL:http://www.rakuten.co.jp/unidy/500799/500728/511720/511741/#460129

Q3カラムのレイアウト、及びdivの入れ子等

初めまして。
とても基本的なことでお恥ずかしいのですが、
3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。
どうぞ宜しくお願い致します。


下記のように、3カラムの段組みレイアウトを行いました。

左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、
中心部分(#contents)は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。
HTMLでは、可変?させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。


<CSS>
#contents {
margin-left:155px;
margin-right:155px;
}
#left {
float:left;
width:150px;
}
#right {
float:right;
width:150px;
}

<HTML>
<div id="left>あああああああ</div>
<div id="right">いいいいいいい</div>

<div id="contents">ううううううう</div>



ここまでは、問題なく配置させられたのですが、

【#contents】の中に、<div>や<ul>などを使用すると、画像(http://blog.goo.ne.jp/ray-chimin)のような現象が起きます。
ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。
と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;)


そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…?

可能な限りシンプルに、
正しいCSSの使い方でレイアウトしたいと考えております…!(>_<)

divの不必要な多用?
(ひとつひとつの画像をdivの中に入れたり、
横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造)
は避けたいと思っておりましたが、
もしかして、それがいちばん正しいのでしょうか…?

ご存じの方、どうぞご指南の程宜しくお願い致します!
散文、失礼いたしました!

初めまして。
とても基本的なことでお恥ずかしいのですが、
3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。
どうぞ宜しくお願い致します。


下記のように、3カラムの段組みレイアウトを行いました。

左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、
中心部分(#contents)は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。
HTMLでは、可変?させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたの...続きを読む

Aベストアンサー

これでどうでしょう?

* {
margin:0;
padding:0;
}

body{
text-align:center;
}

img {
border:0px;
}

/* 全体の幅 */
#detail {
width:1024px;
margin:auto;
text-align:left;
}


/* header・main・footerをまとめる */
#container {
}

#contents {
float:left;
width:664px;
}

#left {
float:left;
width:180px;
}

#right {
float:right;
width:180px;
}

#footer {
clear:both;
}

div.bnr190 {
text-align:center;
}
div.bnr190 ul {
width:590px;
margin:atuo;
text-align:left;
}

div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}

これでどうでしょう?

* {
margin:0;
padding:0;
}

body{
text-align:center;
}

img {
border:0px;
}

/* 全体の幅 */
#detail {
width:1024px;
margin:auto;
text-align:left;
}


/* header・main・footerをまとめる */
#container {
}

#contents {
float:left;
width:664px;
}

#left {
float:left;
width:180px;
}

#right {
float:right;
width:180px;
}

#footer {
clear:both;
}

div.bnr190 {
text-align:center;
}
div.bnr190 ul {
width:590px;
margin:atuo;
text-align:left;
}

div.bnr190 ul li ...続きを読む

Qテーブルの脚の付け方について・・・

木材でダイニングテーブルを作ろうと思っています。
幕板をつけて脚をつけようと思うのですが、どうやってつけていいのかわかりません。
DIY初心者なので、出来るだけ簡単な方法で教えてください!よろしくお願いします。

Aベストアンサー

大きなホームセンターや家具内装系の金物屋に行けば、足だけ売ってます。
一般にはベース金物を設置し、そこにねじ込んで付けるのが多いでしょう。折りたたみ式や、猫足などもあります。

QTableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは?

Tableレイアウトでは寸分の狂い無くできていた配置ですが、
久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて
いるので今回はそれでやろうとして手法を調べていますが、
Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。
IE7ではOKでもFirefoxやIE6では配置がずれるなど。

やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、

・「お問い合わせ」は左から536px、上から15px
・「サイトマップ」は左から639px、上から15px

の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。
position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。
abloluteでなくピシッと配置させる方法はないものでしょうか。

Tableレイアウトでは寸分の狂い無くできていた配置ですが、
久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて
いるので今回はそれでやろうとして手法を調べていますが、
Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。
IE7ではOKでもFirefoxやIE6では配置がずれるなど。

やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボ...続きを読む

Aベストアンサー

ブラウザのバグや、表示差など把握出来てない内は難しいかもしれませんね。
慣れればtableより楽だと思うのですが。

場所が決まってるならやっぱりpositionが早いと思いますよ。
これが面倒ってことはXHTMLのコーディングそのものに問題があるのかも。
positionは親要素にrelativeを指定すると、子要素でabsoluteしたときの数値が
親要素を基準としたものになります。
メニューだとulとかに入れてabsoluteつけたり。

absolute以外だとpaddingとかmargin駆使する方法になるでしょうか。
ソースがどんなものか分からないので具体的なことは書けないですが
位置に関係するプロパティってmargin、padding、position、floteくらいしかないですから。

Q電動のこぎりでテーブル・椅子の脚を切って短くする

ダイニングセットのテーブル・椅子(無垢チーク)ともに高さが高く使いにくいので
(帰国するアメリカ人から譲ってもらいました。靴を履いて生活する前提の高さのようです)
思い切ってダイニングテーブルを座卓にしようと思います。
椅子も我が家にあるテーブルにあるサイズにしたいと思っています。


ホームセンターへ持ち込む、という手もありますが、今回は自分で切ってみたいので
そのアドバイスをよろしくお願いします。

DIY経験はあれども、今まで木材はすべて購入時にカットしてもらっており電動のこぎりを使ったことはありません。丸のこなどは本格的過ぎて危険という声もあり、
BLACK&DECKER 電動式ノコギリ/ジグソー Z-KS900G
BOSCH 電気のこぎり PFZ500E
RYOBI 電気ノコギリ ASK-1000
などが使いやすいのではないかと思っておりますが、どれがより初心者に使いやすいのかわかりません。

テーブルと椅子4脚の脚を切る以外は、粗大ゴミにだすものをカットしたいとも考えております。

上記3点以外のお勧めの電動のこぎり、あるいは 脚をカットする方法などご存知でしたら教えてください。よろしくお願いいたします。

ダイニングセットのテーブル・椅子(無垢チーク)ともに高さが高く使いにくいので
(帰国するアメリカ人から譲ってもらいました。靴を履いて生活する前提の高さのようです)
思い切ってダイニングテーブルを座卓にしようと思います。
椅子も我が家にあるテーブルにあるサイズにしたいと思っています。


ホームセンターへ持ち込む、という手もありますが、今回は自分で切ってみたいので
そのアドバイスをよろしくお願いします。

DIY経験はあれども、今まで木材はすべて購入時にカットしてもらっており電動の...続きを読む

Aベストアンサー

小中学生の夏休みの工作室で今年も20日ほどお世話しました。
椅子を作るにしても 全く同じサイズに切った脚になる角材ですが、作って行くうちにいつの間にか狂いが来るのでしょうね。

脚の長さがぴったり収まったことはありません。

ま、この場合 組み立て途中で何度も「脚の座り」を確認しながら天板などを貼って行けば正確に出来あがります。


さて、
今あるテーブル・椅子の脚が 垂直に下りているのならば直角に切断すればいいことですが、
ハの字型に付いている脚は それなりに注意しないと地面への接点が先ず揃いません。

垂直に下りている場合で 付け根と脚先の太さが同じ場合は マスキングテープ(今はほとんど養生テープを使います)を巻きつければ 必ず直角に切ることが出来ます。

ハの字型の場合は 内側になる個所に印をまず入れますが テープは巻くことが出来ません。
したがって 常に垂直に保持しながら切り落とす長さと同じ長さの棒切れを床に当てて 正確に印を入れていきます。
一度作ったこの棒切れがあなたの物差しです。
決して巻尺などで一回一回測って寸法を出さないでください。

さて、
ここで使ったことも無い電動機具の登場・・・?
それはあまりにも無茶な話です。

特に、丸のこなど切り口に歯が当たっても その先の目標が既に見えませんので絶対に無理なわけです。


精巧に仕上げるためには
お勧めする鋸があります 本来 木材のカット用に作られたものではありませんが
パイプソーをお勧めします。
http://www.google.co.jp/products/catalog?hl=ja&rlz=1T4TRDJ_jaJP451JP451&q=%E3%83%91%E3%82%A4%E3%83%97%E3%82%BD%E3%83%BC240&um=1&ie=UTF-8&tbm=shop&cid=15896247198488288741&sa=X&ei=F_PSTuzgHIWJmQXHtNDYDQ&ved=0CEkQ8wIwAw#

先ず値段が手頃 替刃の交換が出来る よく切れる。

必ず印の上で切るように心掛ければ 先ず切断の失敗はありません。




すべて切り落としました。
平らな床の上で 向きを変えて置いてみましょう。
長いと感じる2本の脚を削る必要が先ず出てきます、その切り口に印を入れます。
当然狂い(ガタ)がある訳です。

そこでほしい道具がベルトサンダーです。
ホームセンターの夏休みの工房では、これですべての脚の長さの調整をしました。
http://store.shopping.yahoo.co.jp/wins/tr-46eb.html

しかしあまり用途が無いのであれば
普通のディスクグラインダー

http://www.rakuten.co.jp/kentikuboy/657814/654488/654490/
ホームセンター 貸し出しあり

ただし角が欠ける心配がありますので 先に角部分の面取りを忘れないように・・・

電動工具でのカットは簡単ですが 後の始末が大変なことがお分かりかと思います。
0.1mmの狂いの補修と0.5mmの狂いの補修
これだけで小一時間違ってきます。


参考までに 金ノコで出来たこのヤスリは重宝します
これでも十分すぎるくらい削れます。
http://hands.net/goods/35575

72歳になるイチローの靴型を作った職人さんが言っていました
「指先の間隔で覚える」

頑張ってください

小中学生の夏休みの工作室で今年も20日ほどお世話しました。
椅子を作るにしても 全く同じサイズに切った脚になる角材ですが、作って行くうちにいつの間にか狂いが来るのでしょうね。

脚の長さがぴったり収まったことはありません。

ま、この場合 組み立て途中で何度も「脚の座り」を確認しながら天板などを貼って行けば正確に出来あがります。


さて、
今あるテーブル・椅子の脚が 垂直に下りているのならば直角に切断すればいいことですが、
ハの字型に付いている脚は それなりに注意しないと地面への接...続きを読む

Qcss divの入れ子の背景画像

3重の入れ子になった<div>、それぞれに背景画像を指定したいのですが、
IE6(win)では一番内側の、firefox1.0.7(win)では内側の2つが、背景画像として表示されません。。
色々検索などして調べましたが、バグとして報告されていないようで、お教え頂きたいです。

上記のようなことは表示不可能なのでしょうか?

Aベストアンサー

関係ないけどFirefox 1.0.7はサポートが終了してるから2.0.0.1にアップデートしたほうがいいし、Webデザインという視点から古いGeckoエンジンのブラウザに対応させたい場合はNetscape 7.1のほうがもっと古くてステキなバグもあるし、いずれにしろその環境で確認するのはイマイチです。
IEとFx 2.0.0.1とNS 7.1とあとOperaなんかで動作確認して正常に表示できれば、ゴーサインみたいのがベストだと思います。
しかしこれじゃぁ問題を解決するには至ってないわけで、解決するにはやはりソースを提示したほうがいいです。ソース見ればバグなのかどうかも分かる人いるし。


人気Q&Aランキング

おすすめ情報