- ベストアンサー
【WEBデザイン】CSSによるレイアウトの問題解決方法
- 初心者の方向けに、CSSを使ったレイアウトの問題解決方法を説明します。
- ブラウザの表示の違いや領域の配置に関する問題を解決するためのテクニックを紹介します。
- 可変な領域の高さや境界線の表示についても説明します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞下記ブラウザで表示させたところ、全て異なる表示となってしまった為、この辺の解決策も含めて、お伺いした次第です。 でお分かりのように、<DOCTYE>は必須です。!! tabel以外でマークアップしたものを合わせるためには ⇒DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a ) これは必須です。 ★DOCTYEなしで、どのブラウザでもほとんど同じになるのは、tableだけです。 ★tableにすると、高さ指定が不可能になりますから、 ３．「領域b-x」「領域b-y」のそれぞれの枠の高さは同じにしたい。（＝「領域a」の枠の高さの５０％ずつ） は実現できません。 ということは、DIVソースとなって汚いHTMLになりますが <div> <div> <div> <div> 領域a </div> </div> <div> <div> 領域b-x </div> <div> 領域b-x </div> </div> </div> </div> とするしかなくなります。・・・後々HTMLのメンテナンスが大変になります。 簡単なtable・・・ ※HTML4.01strict ※タブは＿に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;} /* ここから */ table.oilList{border-collapse:separate;width:100%;border-spacing:10px;margin:10px 0;} table.oilList th{font-weight:normal;text-align:left;} table.oilList th,table.oilList td{border:inset 10px silver;} table.oilList td{width:300px;} /* ココまで */ body{background-color:gray;} div.header,div.section,div.footer{background-color:white;} table.oilList{background-color:silver;} table.oilList th{background-color:rgb(255,200,200);} table.oilList td{background-color:rgb(255,222,180);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<table class="oilList" summary="不飽和脂肪酸"> ＿＿＿<tr> ＿＿＿＿<th rowspan="2"> ＿＿＿＿＿<h3><abbr title="eicosapentaenoic acid">EPA</abbr>エイコサペンタエン酸</h3> ＿＿＿＿＿<p>魚油に含まれる炭素数20のペンタ不飽和脂肪酸。必須脂肪酸の一つである。</p> ＿＿＿＿</th> ＿＿＿＿<td class="figure"> ＿＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Eicosapetaenoic_acid.svg/616px-Eicosapetaenoic_acid.svg.png" width="246" height="40" alt=""> ＿＿＿＿＿<p class="caption">エイコサペンタエン酸の構造</p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="aside"> ＿＿＿＿＿<p><a href="http://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%A4%E3%82%B3%E3%82%B5%E3%83%9A%E3%83%B3%E3%82%BF%E3%82%A8%E3%83%B3%E9%85%B8">エイコサペンタエン酸</a></p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<th rowspan="2"> ＿＿＿＿＿<h3><abbr title="docosahexaenoic acid">DHA</abbr>ドコサヘキサエン酸</h3> ＿＿＿＿＿<p>魚油に含まれる炭素数22の4,7,10,13,16,19-ヘキサ不飽和脂肪酸である。人体内ではα-リノレン酸から生成される。</p> ＿＿＿＿</th> ＿＿＿＿<td class="figure"> ＿＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Docosahexaenoic_acid.svg/680px-Docosahexaenoic_acid.svg.png" width="272" height="39" alt=""> ＿＿＿＿＿<p class="caption">ドコサヘキサエン酸の構造</p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="aside"> ＿＿＿＿＿<p><a href="http://ja.wikipedia.org/wiki/%E3%83%89%E3%82%B3%E3%82%B5%E3%83%98%E3%82%AD%E3%82%B5%E3%82%A8%E3%83%B3%E9%85%B8">ドコサヘキサエン酸</a></p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
最初から・・ ウェブ製作でしたら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、それでもChromeと同じように表示されたと思います。fireBug使うと良くわかります。 ＞「InternetEexplorer」では とのことですが、バージョンが書かれていないのですが、多くの場合互換モードで動作しています。DOCTYPE宣言とHTMLの仕様がウェブ標準でしたらブラウザ間の差はなくなるはずです。 ⇒doctype スイッチ - Google 検索( https://www.google.co.jp/search?q=doctype%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81 ) HTML4.01strictが良いでしょう。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ＞＜table＞タグでの境界線では思うようにいかず、使用を断念した経緯があります。 何が何でもtableがまずいのではなく、その内容がtableでしたらtableでマークアップすべきです。 <div id='tbl'> <div id="a"> 文章１行目 領域a<br> 文章２行目<br> 文章３行目<br> 文章４行目 </div> <div id="b"> それが表じゃないのでtableでマークアップしないにしても、これじゃ「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」と変わらないです。DIVは「id属性及び class属性と併用することで、文書に構造を付加するため」のもので、デザインのためじゃないです。<br>は普通登場しないし・・ ＞「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。 そうではなく。スタイルシートを利用する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )【必読!!】」なのですから、HTMLには文書構造しか書きません。その上で、このブロックをどのようにプレゼンテーションしたいと考えましょう。 下記サンプルは、３種類のマークアップですが文書構造しか書かれていませんから、期待通りにも、全く異なるデザインにも出来るのです。 [サンプル] ※HTML4.01strict ※タブは＿に置換してあるので戻す。 ※head部は後日 <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h3><abbr title="eicosapentaenoic acid">EPA</abbr>エイコサペンタエン酸</h3> ＿＿＿<p>魚油に含まれる炭素数20のペンタ不飽和脂肪酸。必須脂肪酸の一つである。</p> ＿＿＿<div class="data"> ＿＿＿＿<div class="figure"> ＿＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Eicosapetaenoic_acid.svg/616px-Eicosapetaenoic_acid.svg.png" width="246" height="40" alt=""> ＿＿＿＿＿<div class="figcaption"> ＿＿＿＿＿＿<p>エイコサペンタエン酸の構造</p> ＿＿＿＿＿</div> ＿＿＿＿</div> ＿＿＿＿<div class="aside"> ＿＿＿＿＿<p><a href="http://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%A4%E3%82%B3%E3%82%B5%E3%83%9A%E3%83%B3%E3%82%BF%E3%82%A8%E3%83%B3%E9%85%B8">エイコサペンタエン酸</a></p> ＿＿＿＿</div> ＿＿＿</div> ＿＿＿ ＿＿</div> ＿＿<table class="oilList" summary="不飽和脂肪酸"> ＿＿＿<tr> ＿＿＿＿<th rowspan="2"> ＿＿＿＿＿<h3><abbr title="eicosapentaenoic acid">EPA</abbr>エイコサペンタエン酸</h3> ＿＿＿＿＿<p>魚油に含まれる炭素数20のペンタ不飽和脂肪酸。必須脂肪酸の一つである。</p> ＿＿＿＿</th> ＿＿＿＿<td class="figure"> ＿＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Eicosapetaenoic_acid.svg/616px-Eicosapetaenoic_acid.svg.png" width="246" height="40" alt=""> ＿＿＿＿＿<p class="caption">エイコサペンタエン酸の構造</p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td class="aside"> ＿＿＿＿＿<p><a href="http://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%A4%E3%82%B3%E3%82%B5%E3%83%9A%E3%83%B3%E3%82%BF%E3%82%A8%E3%83%B3%E9%85%B8">エイコサペンタエン酸</a></p> ＿＿＿＿</td> ＿＿＿</tr> ＿＿</table> ＿＿<ol> ＿＿＿<li><h3><abbr title="eicosapentaenoic acid">EPA</abbr>エイコサペンタエン酸</h3> ＿＿＿＿<p>魚油に含まれる炭素数20のペンタ不飽和脂肪酸。必須脂肪酸の一つである。</p> ＿＿＿＿<ul> ＿＿＿＿＿<li class="figure"> ＿＿＿＿＿＿<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Eicosapetaenoic_acid.svg/616px-Eicosapetaenoic_acid.svg.png" width="246" height="40" alt=""> ＿＿＿＿＿＿<p class="figcaption">エイコサペンタエン酸の構造</p> ＿＿＿＿＿</li> ＿＿＿＿＿<li class="aside"> ＿＿＿＿＿＿<a href="http://ja.wikipedia.org/wiki/%E3%82%A8%E3%82%A4%E3%82%B3%E3%82%B5%E3%83%9A%E3%83%B3%E3%82%BF%E3%82%A8%E3%83%B3%E9%85%B8">エイコサペンタエン酸</a></p> ＿＿＿＿＿</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ol> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
事細かく、大変ご丁寧でかつ早速のご回答をいただきまして、ありがとうございます。 何分、当方の理解力が乏しく、苛立ちを感じさせてしまうかも知れませんが、少々確認したい事があり返信させていただきました。 「構造とプレゼンテーションの分離」という考え方を基にするという事を理解させていただきました。 理解したつもりなだけかも知れませんが、「領域b-x」「領域b-y」という文字が、現時点でそれぞれの枠内の上部に表示されているのを、枠内の縦中央に表示させるように「プレゼンテーション」したいという事を、「CSS」で表現できないものかと思っている次第です。 私のソースコード内で「vertical-align:middle;」と記述したものが、意図した結果になっていないのが１つの疑問です。 そして、結局のところ下記の条件が満たす事が可能であれば、<table>タグを使用した手法でもなんでもよく、方法があるか確認したかったのです。 ＜条件＞ １．「領域a」の枠は横幅が固定となっており、その中に不特定の文章を表示させる為、高さはその文章次第で（枠固定により折り返す事で複数行になったり、改行されていたりもしている）枠の高さは変化させたい。 ２．「領域a」の右隣に位置する「領域b-x」「領域b-y」の枠は縦にくっついた状態で合わせて「領域a」の高さと同じにしたい。 ３．「領域b-x」「領域b-y」のそれぞれの枠の高さは同じにしたい。（＝「領域a」の枠の高さの５０％ずつ） ４．「領域b-x」「領域b-y」の枠に入る文字をそれぞれの枠の高さの中央に表示させたい。 ５．枠線を、中が窪んでいるような表現にしたい。（＝「border:inset」で記述している） ※５．について、<table>タグに対しCSSで「border:inset」で記述すると、線が盛り上がったような表現になる為、この手法は使用できないと独自の判断を行った。 もっと簡単に言うと、以前の添付「図sample-chrome1」にて、「領域b-x」「領域b-y」の文字が、現状でそれぞれの枠内の上部に表示されているのを、それぞれの枠内の中央に表示できれば、その表現がゴールになります。 それが実現できる手法はないものか、確認したかったのです。 因みに、初めに掲載させていただいたソースコードそのまま（DOCTYPE宣言もなし）を「.html」のファイルにし、下記ブラウザで表示させたところ、全て異なる表示となってしまった為、この辺の解決策も含めて、お伺いした次第です。 １）Google Chrome バージョン 33.0.1750.146 m ２）Internet Eexplorer バージョン 11.0.9600.16518 ３）Mozilla Firefox バージョン 27.0.1 ※１）、２）については以前の添付の通り。 ３）については、２）の状態から上辺だけ揃い、右の下辺が下に飛び出した状態。 これらの現象については、ブラウザ毎の「border」の解釈の違いが原因の一つと認識しています。 以上、長々と文章を書いてしまいましたが、気が向いたらで全く構いませんので、ご協力いただければ幸いです。 当然、無視していただいても、ご面倒をお掛けする事なので、仕方のない事と思っております。 宜しくお願い致します。
お礼
お礼が遅くなりまして、申し訳ございませんでした。 いつもご丁寧にありがとうございます。 大変参考になりました。 なんとか、方法を探して問題は解決できました。 またいつか質問を掲載させていただいた際には、もしよろしければご協力いただければ幸いです。