質問: 【webデザイン】cssによるレイアウトについて 初心者です。 添付「図sample-chrome1」の表示にて、「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。 また、先ほどの図はブラウザ「chrome」での表示ですが、ブラウザ「interneteexplorer」では添付「図sample-ie」のように「領域b-*」の表示が異なってしまいます。 この2つの問題を解決するためのお知恵をお貸しいただければと思っています。 因みに、添付「図sample-chrome2」のように、「領域a」の行数は可変となり、「領域b-*」の高さもそれに合わせて上下半分ずつで可変としたいと思っています。 また、境界線に「border:inset」を使用して図のように表示させたく、<table>タグでの境界線では思うようにいかず、使用を断念した経緯があります。 尚、ソースコードは下記の通りとなります。 #tbl{ display:table; width:300px; font-size:small; } #a { display:table-cell; vertical-align:middle; padding:0px; width:196px; border:inset 2px rgb(230,230,230); background-color:rgb(255,200,200); } ¥#b { display:table-cell; vertical-align:middle; padding:0px; width:100px; height:0px; background-color:rgb(255,255,200); } #x { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%; text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); } #y { display:inline-block; vertical-align:middle; padding:0px; width:100%; height:50%; text-align:center; background-color:rgb(255,200,255); border:inset 2px rgb(230,230,230); } 文章1行目 領域a 文章2行目 文章3行目 文章4行目 領域b-x 領域b-y 勉強不足で、間の抜けた内容もあるかも知れませんが、何卒ご協力の程を宜しくお願い致します。
回答: >下記ブラウザで表示させたところ、全て異なる表示となってしまった為、この辺の解決策も含めて、お伺いした次第です。 でお分かりのように、は必須です。!! 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にすると、高さ指定が不可能になりますから、 3.「領域b-x」「領域b-y」のそれぞれの枠の高さは同じにしたい。(=「領域a」の枠の高さの50%ずつ) は実現できません。 ということは、divソースとなって汚いhtmlになりますが 領域a 領域b-x 領域b-x とするしかなくなります。・・・後々htmlのメンテナンスが大変になります。 簡単なtable・・・ ※html4.01strict ※タブは_に置換してあるので戻す。 _ _サンプル _ _ _ _ _ _ _ __タイトル ==== __このページでは・・・・ _ _ __ ___| ____ _____epaエイコサペンタエン酸 _____魚油に含まれる炭素数20のペンタ不飽和脂肪酸。必須脂肪酸の一つである。 ____ | ____ _____ _____エイコサペンタエン酸の構造 ____ | ___ ___| ____ _____エイコサペンタエン酸 ____ | ___ ___| ____ _____dhaドコサヘキサエン酸 _____魚油に含まれる炭素数22の4,7,10,13,16,19-ヘキサ不飽和脂肪酸である。人体内ではα-リノレン酸から生成される。 ____ | ____ _____ _____ドコサヘキサエン酸の構造 ____ | ___ ___| ____ _____ドコサヘキサエン酸 ____ | ___ __ _ _ __文書情報 __ ___first published ___2013-03-03 __ _