外出自粛中でも楽しく過ごす!QAまとめ>>

現在、スタイルシートにてサイトを制作中です。

トップページとその他のページでposition: absolute; で配置を変えたいDIV要素があり、
以下のようなCSSを記述してテスト中です。
(※トップページにはbodyに#topというIDを割り振ったとします。)

<style>
 div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;}
 body#top div#test {bottom: 80px; right: 15px;}
</style>

<div id="test"></div>

上記のように、トップページのみに body#top div#test として上の要素のサイズなどを
継承していますが、
position の値のみを top → bottom に、left → right に変更して設定にしようとしております。
通常ページでは position を left と top からの位置で適用しておりますが、
トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。

しかし上記のように継承して記述しても、
トップページではどうしても left と top からの指定となってしまい、
bottom: 80px; right: 15px; という新たなposition値は無視されてしまうようなのです。

横幅などは通常下にあるものが上書きされるのですが、この場合には駄目な様です・・・。

ここで難しいのは、top → bottom に、left → right に変更したいという点にあると思います。
つまり上書きは出来ないため、上の要素のtop 、 left はそのまま継承されてしまうようです。
top 、 left 、bottom 、 right のすべてを body#top div#test に記述しても駄目なので、
どうにかして継承元の top と left の設定を下位で継承させない
(無効にする?)ような方法はありませんか?

参考本やネット上の情報でも、このあたりの記述は無く、
今まであまりこのように position をページごとに別の方向から指定するように
スタイルシートを書いたことが無いため、完全にわからない状態です。

お分かりになられる方がいらっしゃいましたら、アドバイスいただければ幸いです。

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

A 回答 (2件)

No.1です。


 せっかく仕様書の存在をお知らせしたので、御自身で調べてください。(^^)絶対にそのほうが身につきます。
【引用】____________ここから
6.2.1 'inherit'値
 各プロパティは、カスケードされた値'inherit'を持ってもよい。この値は、与えられた要素に対して、プロパティが要素の親の算出値を指定値として取ることを意味する。'inherit'値は、値の継承を強制するために使用でき、正常に継承されないプロパティにも使用できる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Assigning property values, Cascading, and Inheritance - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )]より

 直近の親コンテナブロックで、指定された本来は継承しないプロパティを強制的に継承させるのがinheritですよ。もし親要素で他の値が指定されていると、left:プロパティの初期値(auto)に戻りません。

 継承やカスケードを大きく誤解されているようです。復習しましょう。
div#test {}

body#top div#test {}
は継承ではありません!!!

<div style="border:solid 2px red">
 <p style="border:inherit">なんたらかんたら</p>
 <p style="border:inherit;border-color:green">なんたらかんたら</p>
</div>
が継承です。
    • good
    • 0
この回答へのお礼

この度は大変的確、且つご親切にアドバイスをいただきましてありがとうございました。古い参考書で数年前から独学で進めてきましたが、そちらにはまだinheritなどは記述がなく、仕様書でも今まで確認をしておりませんでしたが、これを機会に一度目を通し、さらに研鑽を深めていきたいと思います。本当にありがとうございました。今後ともどうぞよろしくお願いいたします。

お礼日時:2014/02/16 10:28

>参考本やネット上の情報でも、このあたりの記述は無く、


 そんなことはありません。調べる場所が悪いだけです。公開されている仕様書には正確に書かれています。ですから、書籍やサイトで説明する必要はない。逆に言うと仕様書の存在を知らないか、知らないから説明が書ける。
 まず、仕様書だけは読みきってしまうこと。

>上記のように、トップページのみに body#top div#test として上の要素のサイズなどを
継承していますが、
 継承してません。
 継承とは、
colorプロパティは、継承されますが、positionやtop,leftなどは継承されません。
'color' http://momdo.s35.xrea.com/web-html-test/spec/CSS …
  継承: yes
'position' http://momdo.s35.xrea.com/web-html-test/spec/CSS …
  継承: no

 継承されるとは、親要素に対する指定が子孫要素に継承されるかと言う意味です。
6.2 継承( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

>上の要素のtop 、 left はそのまま継承されてしまうようです。
 これらも継承されないプロパティです。
'left'( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 ⇒'top' ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

>(※トップページにはbodyに#topというIDを割り振ったとします。)
 その必要すらありません。

 共通したスタイルを外部スタイルシートで指定する場合であっても、スタイル指定は、
優先度、詳細度が同じ場合は
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄登場した順番に上書きされます。
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

>通常ページでは position を left と top からの位置で適用しておりますが、
トップのみ bottom と right から適用する必要がある場所に配置したいと考えています。

★ここでは、同じ要素に対して異なる詳細度で指定していますね。(継承ではありません!!)
★left,topは指定されたままで取り消しされていません。

<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css">
<style type="text/css">
<!--
div#test{left:auto;top:auto;bottom: 80px; right: 15px;}/* 詳細度0,1,0,1 */
-->
</style>
と、すればよいだけです。
(注)standard.cssにdiv#test{left: 10px; top: -20px;}/* 詳細度0,1,0,1 */と指定されている場合
・重要度は著者指定のスタイルに該当するので同じ
・詳細度はいずれも同じ
・登場順番が異なる。
6.4.1 カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )


><style>
> div#test {position: absolute; left: 10px; top: -20px; width: 980px; height:160px;}
> body#top div#test {bottom: 80px; right: 15px;}
></style>
の書き方はHTML5だと思われます。そうでなければ<style type="text/css">とtype指定が必要です。
 HTML5では、div要素は原則使いません。!!
【引用】____________ここから
Note: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )]より
 それ以前のHTML/XHTMLなら、『 ⇒id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』に使用しましょう。header,section,footer,nav,articleのようなclass名をつけたほうが良いです。

★本やろくでもないサイトではなく、まず仕様書をしっかり読みましょう。すべて説明されている内容です。
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
 ⇒HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

この回答への補足

早速ご回答いただきまして、本当にありがとうございます。詳しくお知らせいただき、大変参考になりました。

left: auto; top: auto; bottom: 80px; right: 15px;と言う設定により、無事動作させることが出来ました。

ちなみに、auto 部分を inherit でも動作させることが出来ましたが、inherit よりも auto の方がこの場合適していると言う認識でよろしいでしょうか?またご連絡いただければ幸いです。

補足日時:2014/02/15 13:52
    • good
    • 0

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

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

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

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Q背景画像を反転させる方法

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこの反転させた画像を背景に使いたい場合、どうすればいいのでしょう?
そもそもそのようなことが可能なのでしょうか?

もし可能でしたら具体的にどのような記述をすればいいのか教えて頂きたいのです。

それとfilterはIE独特の要素と聞いていますが、filter: fliphもそうなのでしょうか?
しかしながらfilter: alphaに関しては

filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;

と記述すればFirefoxなどでも透明効果が出るようです。

filter: fliphもIE独特の要素ならばfilter: alphaのように他のブラウザでも対応させる方法があるのでしょうか?


長々と書いてしまいましたが、知りたいことを要約すると

1.cssで画像を反転させ、それを背景画像に使うことは可能か否か
  可能ならばどう記述すればよいのか

2.filter: fliphで画像を反転させた場合、IE以外でのブラウザで反映されるか否か
  また反映されないのなら、対応させる方法はあるのかどうか

と言うことです。

1と2、分かる方だけでも結構ですのでよろしくお願いします。

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこ...続きを読む

Aベストアンサー

1.否
2.否

対応策は予め反転させた画像を別途作っておく事です。

Qスタイルシートで colspan=3と定義することは可能でしょうか?

<style>
x {

}
</style>

<table>
<tr>
<td colspan=3 class="x">タイトル</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>

また、有名なブラウザで対応している最新のCSSバージョンは何でしょうか?

よろしくお願いいたします。

Aベストアンサー

できないと思います。

colspan は、セルを連結する指定ですが、
もともと
<td></td><td></td><td></td>
であったものが
<td colspan=3></td>
のように連結するには、他の"<td></td><td></td>"を削除する必要があります。
それは、スタイルだけの話ではなくてセルの実体を操作する必要があるということですから。

Qsyntax error, unexpected '}' というエラーの対処法

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" maxlength="3" />
<input type="sbumit" value=回答" />
</form>
<hr />
<?php
session_start();
if(is_null($_SESSION['answer'])){
mt_stand(microtime()*1000000);
$_SESSION['answer']=mt_rand(1,100);
$_SESSION['game_cnt']=0;
}
if($_POST['answer']!=""){
$_SESSION['game_cnt']++;
if($_session['answer']==$_POST['answer']){
print("おめでとうございます".
$_SESSION['game_cnt']."回で正解しました!");
session_destroy();
}else{
if($_SESSION['answer']>$_POST['answer']){
print("もう少し大きいです。");
}else
print("もう少し小さいです。");
}
}
}
?>
</body>
</html>
それとこの間違えたところをなおしたあとはいつもコンピュータを再起動しないと修正したところが適用されないのですがほかに方法はないですか?基本的な質問ですいません。

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" max...続きを読む

Aベストアンサー

print("もう少し大きいです。");
}else
print("もう少し小さいです。");
のelseの後に{がないようですが、大丈夫でしょうか?

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Q横並びdivで一部の初期高さがずれる理由について

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100px; height:33px;}
#test3{ width:100px; height:33px;}
#test4{ width:100px; height:33px;}
#test5{ width:250px; height:33px;}
#Form input{
margin:auto 0px;
font-size: 70%;
width: 150px;
}
#Form button{ font-size: 70%; width: 50px; }

[html]
<div id="hoge">
<div id = "head">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5">
<form id = "Form">
<input name="list"/>
<button>テスト</button>
</form>
</div>
</div>
</div>

この場合、表示は画像のように、test5のdivだけ初期の高さが沈み込んでしまいます。
また、divとdivの間に余計な隙間が作られてしまいます。
ここで分からないことは、
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?

等が知りたいです。お手数ですが、どなたかご教示いただけませんでしょうか。m(_)m

いつもお世話になっております。
きわめて初歩的な質問とは思うのですが・・・どうしても上手くいかず分からない事なので教えて欲しいです。
divブロックを横並びにして、divブロック4つ、検索formを含んだdivフォームを1つ配置したいのですが、

[css]
#hoge{ overflow: hidden;}

#head{ width: 750px; height: 35px; margin: 0px auto; position: relative; border: 1px solid;}
#head div { display: inline-block; margin: 0px; border: 1px solid;}

#test1{ width:100px; height:33px;}
#test2{ width:100...続きを読む

Aベストアンサー

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lint

 lintの良いところは、理由と対策も示してくれる。それを読まなきゃダメです。芋づる式に色々な知識が見につきます。
 欠点は、文法上の誤りは指摘してくれるが、根本的なマークアップ自体はチェックしてくれない。例えば、
 <div><a href="/">トップ</a></div>
 <div><a href="/product">製品</a></div> 
 <div><a href="/manual">マニュアル</a></div>
はエラーにならない。「これはナビゲーションですし、並列な情報が並んでいるので順不同リストでマークアップするほうがよい」・・・なんては言ってくれないです。

>その分時間もかかるのでなんとかしてこういう誤りの法則のようなもの、をあらかじめ分かるようになっておきたい
 もっとも早いのは、仕様書を徹底的に読んでおくこと。すくなくとも全体の流れとどこを調べればよいか位は・・・。急がば回れ、変な「付け焼刃」で積み上げていくより、根本を理解してからのほうが圧倒的に上達は早いです。

>DIVで並べる想定の箇所がOL/LIに変わっておりますが、inline-block化してDIVを並べることそのものに問題があるということでしょうか?

★HTMLでこれが最も大事な--最重要なポイントなのです。
 1) 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
 2)『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 DIVは、「文書の構造を補完するため」であって、「デザインのため」じゃありません。
 ところが、あなたが参考にされた多くのサイトのように実際には「デザインのため」に使用されている例がとても多い。理解されてこなかった!!。そのために
 3)『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
  そして、「Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」(--著者は他により適切な要素がないときの最後の最後の手段としてDIV要素を使用することを強く推奨する。)
  となります。

 よって
>DIVで並べる想定の箇所が
 はHTMLを作成する上で最も犯してはならない誤りなのです。
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 どのようにプレゼンテーションするかはスタイルシートに任せて、ここはナビゲーションリストだから、そのようにマークアップするべき。
 誤解されないように!!断じてきれいに横に並べるというデザインのために「<div>ではなく<li>を使っている」わけではありません。・・・結果はそうであっても・・・DIVでも可能です。

 デザインを考えずにとにかく徹底的に文書構造を示すようHTMLを記述するというのは、HTMLをワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のひとつだと思って歩んでこられた方には、とてつもなく大きな壁だと思います。登山するのに道を誤って沢に下りてしまった---、元の道に戻るのは苦労します。
 しかし、私も含めて皆ここを乗り越えてきました。

 面白い例を紹介しておきましょう。Chrome以外のブラウザで!!(Chromeは代替スタイル扱えない)
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
 このページを表示させてブラウザの[表示]→[スタイル(シート)]へ進み、色々なスタイルを選択してみてください。HTMLにプレゼンテーション的な要素はまったくないために、自在にデザインできるのです。印刷プレビューやウィンドウ幅を伸縮させたり、フォントサイズをCtrl + +/-で変更しても良いでしょう。

★まず仕様書を通しで読んでみましょう。
 HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html )
 CSS 2.1仕様(日本語訳)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html )


(解説)
1.たぶん折り返しをするような必要がないはずなのになぜdiv test5だけが一つ沈み込んでいるのか?
 本来あるべきブロックがないために匿名ブロックが作られる。(HTMLの文法誤り)

2.div test1-5の間で横に奇妙な隙間がでてきている根本的な原因は?
 ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )
 改行やタブは空白文字ですから、ここに空白文字がひとつあるように整形される。
 よって、
 div.header div.nav{position:absolute;top:0;width:100%;font-size:0;}/* li間の空白文字を0 */
  このフォントサイズを2pxにすれば2px空く

3.cssのinline-block等の属性を変えずに隙間を詰めることはできるか?
  上記が回答

>確認にはchromeでF12を押して出てくるウィンドウを使っていますが
 これはfirefox+firebugが圧倒的に有利です。
 firefoxは開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )を初めとしてアドオンが豊富なことですかね。

>これはまず基本的にDIV内にFORMを敷くということが誤りだということなのでしょうか?
 そうです。formの内部に直接行内要素は置けません。formが登場した時点でその前後に匿名ボックスが出来てしまいます。

>ただ分からないまま書いて、その度lin...続きを読む


人気Q&Aランキング