初心者です。
添付「図sample-chrome1」の表示にて、「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。
また、先ほどの図はブラウザ「Chrome」での表示ですが、ブラウザ「InternetEexplorer」では添付「図sample-ie」のように「領域b-*」の表示が異なってしまいます。
この2つの問題を解決するためのお知恵をお貸しいただければと思っています。
因みに、添付「図sample-chrome2」のように、「領域a」の行数は可変となり、「領域b-*」の高さもそれに合わせて上下半分ずつで可変としたいと思っています。
また、境界線に「border:inset」を使用して図のように表示させたく、<table>タグでの境界線では思うようにいかず、使用を断念した経緯があります。
尚、ソースコードは下記の通りとなります。
<html>
<head>
<style type="text/css">
#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); }
</style>
</head>
<body>
<div id='tbl'>
<div id="a">
文章1行目 領域a<br>
文章2行目<br>
文章3行目<br>
文章4行目
</div>
<div id="b">
<div id="x">領域b-x</div>
<div id="y">領域b-y</div>
</div>
</div>
</body>
</html>
勉強不足で、間の抜けた内容もあるかも知れませんが、何卒ご協力の程を宜しくお願い致します。
No.2ベストアンサー
- 回答日時:
>下記ブラウザで表示させたところ、全て異なる表示となってしまった為、この辺の解決策も含めて、お伺いした次第です。
でお分かりのように、<DOCTYE>は必須です。!!
tabel以外でマークアップしたものを合わせるためには
⇒DOCTYPEスイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )
これは必須です。
★DOCTYEなしで、どのブラウザでもほとんど同じになるのは、tableだけです。
★tableにすると、高さ指定が不可能になりますから、
3.「領域b-x」「領域b-y」のそれぞれの枠の高さは同じにしたい。(=「領域a」の枠の高さの50%ずつ)
は実現できません。
ということは、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/th … 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% …エイコサペンタエン酸</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/th … 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% …ドコサヘキサエン酸</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>
お礼が遅くなりまして、申し訳ございませんでした。
いつもご丁寧にありがとうございます。
大変参考になりました。
なんとか、方法を探して問題は解決できました。
またいつか質問を掲載させていただいた際には、もしよろしければご協力いただければ幸いです。
No.1
- 回答日時:
最初から・・
ウェブ製作でしたら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxをお使いだと思いますが、それでもChromeと同じように表示されたと思います。fireBug使うと良くわかります。
>「InternetEexplorer」では
とのことですが、バージョンが書かれていないのですが、多くの場合互換モードで動作しています。DOCTYPE宣言とHTMLの仕様がウェブ標準でしたらブラウザ間の差はなくなるはずです。
⇒doctype スイッチ - Google 検索( https://www.google.co.jp/search?q=doctype%20%E3% … )
HTML4.01strictが良いでしょう。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
><table>タグでの境界線では思うようにいかず、使用を断念した経緯があります。
何が何でもtableがまずいのではなく、その内容がtableでしたらtableでマークアップすべきです。
<div id='tbl'>
<div id="a">
文章1行目 領域a<br>
文章2行目<br>
文章3行目<br>
文章4行目
</div>
<div id="b">
それが表じゃないのでtableでマークアップしないにしても、これじゃ「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と変わらないです。DIVは「id属性及び class属性と併用することで、文書に構造を付加するため」のもので、デザインのためじゃないです。<br>は普通登場しないし・・
>「領域b-x」「領域b-y」内の文字位置を、それぞれ縦の中心に配置したいと思っています。
そうではなく。スタイルシートを利用する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )【必読!!】」なのですから、HTMLには文書構造しか書きません。その上で、このブロックをどのようにプレゼンテーションしたいと考えましょう。
下記サンプルは、3種類のマークアップですが文書構造しか書かれていませんから、期待通りにも、全く異なるデザインにも出来るのです。
[サンプル]
※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/th … 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% …エイコサペンタエン酸</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/th … 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% …エイコサペンタエン酸</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/th … 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% …エイコサペンタエン酸</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;」と記述したものが、意図した結果になっていないのが1つの疑問です。
そして、結局のところ下記の条件が満たす事が可能であれば、<table>タグを使用した手法でもなんでもよく、方法があるか確認したかったのです。
<条件>
1.「領域a」の枠は横幅が固定となっており、その中に不特定の文章を表示させる為、高さはその文章次第で(枠固定により折り返す事で複数行になったり、改行されていたりもしている)枠の高さは変化させたい。
2.「領域a」の右隣に位置する「領域b-x」「領域b-y」の枠は縦にくっついた状態で合わせて「領域a」の高さと同じにしたい。
3.「領域b-x」「領域b-y」のそれぞれの枠の高さは同じにしたい。(=「領域a」の枠の高さの50%ずつ)
4.「領域b-x」「領域b-y」の枠に入る文字をそれぞれの枠の高さの中央に表示させたい。
5.枠線を、中が窪んでいるような表現にしたい。(=「border:inset」で記述している)
※5.について、<table>タグに対しCSSで「border:inset」で記述すると、線が盛り上がったような表現になる為、この手法は使用できないと独自の判断を行った。
もっと簡単に言うと、以前の添付「図sample-chrome1」にて、「領域b-x」「領域b-y」の文字が、現状でそれぞれの枠内の上部に表示されているのを、それぞれの枠内の中央に表示できれば、その表現がゴールになります。
それが実現できる手法はないものか、確認したかったのです。
因みに、初めに掲載させていただいたソースコードそのまま(DOCTYPE宣言もなし)を「.html」のファイルにし、下記ブラウザで表示させたところ、全て異なる表示となってしまった為、この辺の解決策も含めて、お伺いした次第です。
1)Google Chrome バージョン 33.0.1750.146 m
2)Internet Eexplorer バージョン 11.0.9600.16518
3)Mozilla Firefox バージョン 27.0.1
※1)、2)については以前の添付の通り。
3)については、2)の状態から上辺だけ揃い、右の下辺が下に飛び出した状態。
これらの現象については、ブラウザ毎の「border」の解釈の違いが原因の一つと認識しています。
以上、長々と文章を書いてしまいましたが、気が向いたらで全く構いませんので、ご協力いただければ幸いです。
当然、無視していただいても、ご面倒をお掛けする事なので、仕方のない事と思っております。
宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
html の divとtable の役割
-
htmlのolやulなどlistにtitleや...
-
ヘッダーとフッターだけ背景を...
-
inline-blockを上下中央揃えに...
-
画面を縮小するとカラムが落ち...
-
セクションをdivで囲むと見出し...
-
1時間30分を簡単に表したいで...
-
ヘッダーを左右に二分割する方...
-
<div>テキスト</div>
-
テキストの揃え方について
-
「見出し画像+小見出し」と「見...
-
リストで画像を右に表示したい
-
XHTMLでループ処理のやり方
-
カラム落ちの対処法について
-
画像の横にテキストを縦方向中...
-
<div>で改行させない方法
-
div要素が重なってします
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報