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
ルー大柴と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)なんて使ってる奴は希少。 ルー大柴流行再来の前に建てられたこのスレは本格予言的スレ >100
うーん、paddingプロパティはcellpadding属性の代用にはなりますが
cellspacingとは異なりますよね？
それともMacIEではpaddingでセル間隔を調整できるのでしょうか？
当方ボックスモデルの理解はできているつもりですが
試す環境がないのでMacIEの仕様の詳細がわからないのです・・・。 >>99
border-spacingがその代用。
border-collapseがseparateのときのみ。 携帯から見てリンク下線を見えなくする方法ってありますか？
>>106
CSSの効く携帯ブラウザなら普通と一緒 >>107
DoCoMoから確認したところ反映されていなかったので困っています
やはり携帯対応タグはないんでしょうか？ 携帯関連の質問者ってどうしてこうバカばかりなんだろ >>108
CSS未対応の機種ではおそらく無理かと。 >>110
そうですか…
やはり携帯からみて下線を消したり見えなくする方法はなさそうですね
ありがとうございました (ﾟдﾟ)ﾀﾞｶﾗCSS対応ｹｰﾀｲﾅﾗ可能ｯﾃ言ｯﾃﾙﾉﾆ自分ﾉｹｰﾀｲｶﾞｽﾍﾞﾃｶﾖ そもそも下線のないリンクなんてユーザビリティの観点から（以下略） たまにでいいから読み上げブラウザのことも思い出してあげてください ■ このスレッドは過去ログ倉庫に格納されています
