CSS（スタイルー大柴シート）質問スレ51日目
■ このスレッドは過去ログ倉庫に格納されています
CSSに関する質問はこちらへどうぞ。 ※ ブログ厨大量発生月間 ※
■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●質問の前に【FAQ】（>>5-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
解説サイト（→【関連リンク】）の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。validator（>>2）でチェックできます。
初心者の疑問は大抵ここまでで解決します。
●OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じませう。
その方が回答が早く得られます。質問は具体的に。
【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc8.2ch.net/test/read.cgi/hp/1134048018/
関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html
Q2: tableなどブロック要素をセンタリングするには？ text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかをを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html 【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
http://www.rju666.com/web/layout/imitate_frames.html
Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。
Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03
Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html 【FAQ】
Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: ＣＳＳではできません。target属性かJavaScript?でやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。
Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html
Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。
「いままでの HTML との対照」
http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html 【参考】
＊IEの position:absolute; のバグを利用した擬似フレーム
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定
以下に示すようなハックを用いることにより、全ブラウザへの対応も可。
/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}
《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
アンダーバー・ハックの方がいいか？
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html 【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
http://www.rju666.com/web/layout/imitate_frames.html
Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。
Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03
Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html
【先代の格言】
おまいらまだCSSとかやってんの
はっきり言って時代おくれ >>14
質問も回答も、激しくクドい感じでお願いしちゃうゼ？ ルー大柴とCSSでググったが…
ルー大柴はよく英語を略すのか？ IE6.0にて、フッタの【CopyRight 2006 111 All Rights Reserved.】
という文字列最後の３文字【.ed】が変な場所に現れます。
しかも、二重にです。
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>001</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">top</div>
<div id="main_wrap">
<div id="menu">menu</div><!--/#menu-->
<div id="main">main contents</div><!--/#main-->
<div id="bottom" align="right">CopyRight 2006 111 All Rights Reserved.</div>
</div>
</body>
</html> CSS部分（外部ファイル）
div#top {
width:800px;
background-color:#ff0000;
}
div#main_wrap {
clear:both;
width:800px;
background-color:#cccccc;
}
div#menu {
float:left;
border:0px dashed #ffffff;
width:130px;
background-color:#00ff00;
padding:0px 0px 0px 10px;
}
div#main{
float:left;
width:660px;
}
div#bottom {
float:left;
clear:both;
width:800px;
color:#666666;
} とりあえず、解決方法は、
１、HTML宣言の後半部分のURLを消す
２、<!--/#menu--><!--/#main-->のコメントを消す
３、CSSでdiv#menuのpaddingをすべて0pxにする。
４、CSSでdiv#bottomのfloat:leftを消す
のどれかで解決できるんですが、決定的な理由がわかりません。
ただのバグというにはあまりにも解決方法が多すぎる気がするんですが・・・。
画期的な解決方法をご存知の方、いらっしゃいますか？ >>23
Mac OS9、Netscape7.02というドマイナーな環境ではこのままで正常に表示されるな。ｗ >>24
win XPでも
Netscape4.8 Netscape6 Netscape7.1 Netscape8.0
Opera8.5 Firefox1.5
では正常です。
おかしいのはIE6.0だけ。
明らかにバグだとはわかるんですが、解決方法が多すぎるのでなんかスッキリしないんです。 <dt>DT1</dt>
<dd>DD1</dd>
<dd>DD2</dd>
<dt>DT2</dt>
<dd>DD3</dd>
<dd>DD4</dd>
<dd>DD5</dd>
というのを
DT1 DD1 DD2
DT2 DD3 DD4 DD5
と並べて表示したいのですが
dt
float: left
clear: both
dd
float: left
だとWinIEで
DT1 DD1 DD2 DD3 DD4 DD5
DT2
となってしまいます。
どうやったら解決できますか 田中彰の応援歌を考えた。
行くぞ彰ホームラン！センターオーバーホームラン！
弾丸ライナーだ！飛ばせ！運べ！彰！
俺が考えた歌詞ですよ！
弾丸ライナーだ！の後に「ヘイ！」とか「おい！」って掛け声を入れてスタンドでジャンプするの
とかいれると面白いかもしれない。
同じページでリンクの色をクラスごとに分けたいんですけど、どのように記述すればよいでしょうか。
メニュー中の日記は青、BBSは赤、といった感じにしたいのですけど。
どうぞよろしくお願いします。
もしかして不可能でしょうか・・・ 質問です。
CSSのfloatで以下のようなレイアウトは可能ですか？
「aaa…」は段落無しの連続した文章です。
aaaaaaaaa┌─┐
aaaaaaaaa│画│
aaaaaaaaa└─┘
┌─┐aaaaaaaaa
│画│aaaaaaaaa
└─┘aaaaa tdのひとつひとつの横幅のサイズを指定する
方法がありましたら教えてください。 >>45
なんでよりによってこのスレで質問する？
普通にwidthプロパティ。 >>46
ありがとうございます。
インライン要素にはwidthは使わない方がいいと書いてありました。
他には、tableにはwidthを指定できるので、
tdには比率が指定できればサイズが指定できると思ったのですが、
そのやり方は見つかりませんでした。 >>48
間違えていましたか。
ブロック、インラインの違いは、おおまかに
改行を伴うか伴わないかで覚えていました。
ただ、CSSチェッカーhttp://jigsaw.w3.org/css-validator/
でエラーが出るので、使ってはいけないのは同じだと思いました。 すいません。:ではなく、=でつないでいました・・。
CSSチェックをしても、英語の変な文章が出てくるわけですね・・。 tableのcolspan、lowspanの
CSSバージョンがありましたら教えてください。 <br>を2つ以上入れても、1回分の改行しか出来ません。
そういう症状の場合、letter-spacingが疑われますが、letter-spacingは使っていません。
ひとつひとつ検証してみたところ、 * { margin: 0, padding: 0, } で使っているmarginが原因のようです。
これは必要な要素なのでカットするわけにもいかないし、困っています…。
いままでも同じように設定しているのですが、何も問題はありませんでした。
何かアドバイスをしてくださる方がいれば、よろしくお願いします。
ちなみにmarginを1pxにしたら、若干行間があきました。
改行でできる隙間（＝マージン？）も0に、という解釈なのでしょうか。 >>55
釣りだと思うがマジレス。
・letter-spacingの意味を調べろ。
・CSSの基礎から勉強し直し。
>>55
<br>は空行を作るためのものではない。
そもそもの使い方が間違ってるからCSS勉強しなおせ。
2回以上改行する場面など無い。 ひとつのタグに二つ以上要素を設定することは可能ですか？
<ul id="content" class="center">
という感じなんですが・・・
また文法的には正しいんでしょうか？ >>58
それの中の「要素」ってulだぞ？
多分idとclassの同時設定は、という意味だと思うが、可能。
ついでにclass複数も値を半角スペースで区切って可能。 absoluteを用いたレイアウトでIE６とFFでレイアウトが違ってしまいます。
<body>
<div id="container">
<h1>sss</h1>
<div id="navigation">
<p>aaaaaaa</p>
</div>
<div id="content">
<p>ccccccc</p>
</div>
</div>
</body>
これにcssで
body{text-align:center;}
h1{psition:absolute;}
#container{text-align:left;}
#navigation{float:left;
width:100%;}
#content{float:right;
width:20%;}
とxml宣言をしたため、中央ぞろえにtext-align:center;を使いました。
この表示がＦＦなら
sssaaaa
cc
cc
cc
c
と表示されるのですが、ＩＥでは
aaaaaaa
sss cc
cc
cc
c
と開始位置がずれてしまいます。どうやって改善したらよろしいでしょうか？ >>61-62
釣り大流行らしいが、負けずにマジレス。
レイアウトと呼べる代物じゃないので、一から勉強して下さい。 >>63
webページにおいて実用性は一通りでは語れないはずですが？
そもそもあなたの予想しているものと違う場合だってあります。
問題の方は解決…ぽいことはできました。ありがとうございました。 なんというルー大柴・・・これは間違いなくルー大柴
／￣＼
| ＾o＾ |
＼＿／ 12日（土）17時ルー大柴アメスタ出演
土曜の夕方5時にクリック↓
http://studio.ameba.jp/ テーブル内の文字を全て左揃えにしたいんですが
わかる人お願いしますm(_ _)m >>73
table,td,tr {text-align:left;} >>74
>>74
>>74
>>73
table * { text-align : left; } フレームの色を全て同じにするにはどうすればいいですか？
ｈｔｍｌソフトのプレビューでは、ちゃんと表示されるのですが
某ブログでは、色が変わらないのでｃｓｓでやってみようと
思っています。 [ ] ←画像（縦方向のグラデーション）
[ テキスト ]
[ テキストテキストテキスト ]
上記のようにテキストの量によって自動で背景画像が可変するような
CSS指定をしたいのですが、これって可能でしょうか？
縦の可変はわかるのですが、横の可変がわかりません…
マージンやパッジングを指定するときに
margin-top: 0;
と書いてあるところがほとんどなのですが
margin-top: 0px;
と書いても問題ないですか？ ■HTML中身
<body>
<div id="a">あ</div>
<div id="b">い</div>
</body>
■CSS中身
body {width: 400px; position: relative; margin-left: auto; margin-right: auto;}
#a {margin-top: 100px;}
#b {position: absolute; top: 70px; right: 0;}
これだと、「い」が「あ」から70px下の位置に表示されてしまいます
（IEだけは一番上から70pxの位置に表示される）
・「い」を、一番上から70pxの位置に表示したい
・「い」を、400pxで真ん中に寄せたBODYの右端に表示させたい
二つを満たすにはどうしたらいいんでしょうか？
お願いします >>83
関係ないが、俺ボデーにいきなりwidthやらpositionって指定しない。
コンテナid作る。 ちょっとした質問なんだが
<div id="main" class="index">
があったとして
div#main.index {
といった指定は通る？
そもそも文法的に正しいのかも気になる
IDとClassを同時に指定なんて滅多に無いから実用性は無いと思うが･･･
気になってググってみたけど見つけきれなかったんだ >>89
その記述の必要性がなくない？
<div id="main">にして
各要素にclassを使うってので良いと思うが。
テーブルの<td align=left valign=bottom>
ってのを<div>で出来ませんか？
検索した結果<div align=left>では、できたのですが、
valign=bottomが出来ませんでした。
ちなみにHPとかで使うのではなくテーブルのセル内で左側表示と
右側の表示というので使うつもりです。
誰か詳細がわかりましたらよろしくおねがいします。m(_ _)m >>91
全然スタイルシートについて質問してないし
vertical-alignについて聞いてるのかと思ったら
左右とか言い出して意味不明だが、こういうことか？
<HTML>
左側表示したいセル: td class="left"
右側表示:したいセル td class="right"
<CSS>
td.left {text-align:left}
td.right {text-align:right} サイトのコンテンツ領域外背景がグラデーション状になっていて
コンテンツ領域内と外背景の間をグローのようなぼかし効果をしているサイトを見た事がありましたが
bodyタグに背景グラデーション画像を指定するとして、このグロー効果はどうやって付けているのでしょうか
グローの背景画像付ける為だけにコンテンツ領域全体を新たにdivで囲む事も考えましたが、必要の無い無駄div作るのもどうかと思って・・・
この方法以外に良い方法などあったら教えて頂けませんでしょうか
bodyやdivの背景画像はcssのbackground-imageで指定しています
書き足りていませんでした、すみません >>95,96
ここで聞くなよ。
取り合えず手本となるサイトがあるなら、ソース見れ。
あんたの説明から想像するに、div使う以外考えられないけどな。 >>97
ぐぐって色々調べ物をしていた時辿り着いたサイトなので、どういった検索で行けたのか覚えていないもので・・・
やっぱりdivが必要なら諦めようと思います、レスありがとうございました IE(Mac) において、TABLEタグのcellspacing属性の代替となるCSSプロパティはありますか？
border-spacing や border-collapse も使えないようですが、
セル間隔をなくすには、cellspacing属性を使うしかないないのでしょうか？ >>99
IE(Mac)に限らずpadding。
IE(Mac)なんて使ってる奴は希少。 ■ このスレッドは過去ログ倉庫に格納されています
