CSS（スタイルー大柴シート）質問スレ51日目

CSS（スタイルー大柴シート）質問スレ51日目 at HP

1:Name_Not_Found
06/01/13 00:43:59 0j/prymY
CSSに関する質問はこちらへどうぞ。 ※　ブログ厨大量発生月間　※

■■■■■　質問のしかた　■■■■■

●基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
●質問の前に【FAQ】（>>5-9）を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
　WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
　解説サイト（→【関連リンク】）の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
　正当(valid)なHTMLを心がけて下さい。validator（>>2）でチェックできます。

初心者の疑問は大抵ここまでで解決します。

●OSやブラウザの種類とヴァージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは？」と求められたら応じませう。
　その方が回答が早く得られます。質問は具体的に。

【まとめサイト】　URLﾘﾝｸ(web2ch.s31.xrea.com)
【FAQ】　URLﾘﾝｸ(web2ch.s31.xrea.com)
【過去ログ】　URLﾘﾝｸ(web2ch.s31.xrea.com)
【関連リンク】　URLﾘﾝｸ(web2ch.s31.xrea.com)
【前スレッド】　ｽﾚﾘﾝｸ(hp板)

関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9

2:Name_Not_Found
06/01/13 00:45:47
【関連スレッド】
CSS/DHTMLバグ辞典スレッド第４版
　ｽﾚﾘﾝｸ(hp板)l50
代替スタイルシートに萌え～
　ｽﾚﾘﾝｸ(hp板)l50
独自拡張、草案段階のCSSについて語れ
　ｽﾚﾘﾝｸ(hp板)l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　ｽﾚﾘﾝｸ(hp板)l50
CSSでイケてるデザインサイト 26
ｽﾚﾘﾝｸ(hp板)l50

【仕様書】
CSS1の仕様書の原文(英語)
　URLﾘﾝｸ(www.w3.org)
CSS2の仕様書の原文(英語)
　URLﾘﾝｸ(www.w3.org)
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　URLﾘﾝｸ(www.y-adagio.com)
　URLﾘﾝｸ(www.swlab.it.okayama-u.ac.jp)
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　URLﾘﾝｸ(www.y-adagio.com)
　URLﾘﾝｸ(www.swlab.it.okayama-u.ac.jp)

【CSS検証】
W3C CSS 検証サービス
　URLﾘﾝｸ(jigsaw.w3.org)

3:Name_Not_Found
06/01/13 00:48:32
【解説など】
・ごく簡単なHTMLの説明
　URLﾘﾝｸ(www.kanzaki.com)
・ZSPC - Style Sheets Reference
　URLﾘﾝｸ(www.zspc.com)
・ZSPC - CSS2対応状況ガイド
　URLﾘﾝｸ(www.zspc.com)
・CSS1テストスイート
　URLﾘﾝｸ(www.doraneko.org)
・ばけらの CSS リファレンス
　URLﾘﾝｸ(www.ne.jp)
・K@tsukun's PAGE! > CSS Reference
　URLﾘﾝｸ(hp.vector.co.jp)
・K@tsukun's PAGE! > 付録：CSS対応状況表
　URLﾘﾝｸ(hp.vector.co.jp)
・CSS Laboratory対応表・一覧
　URLﾘﾝｸ(is.vis.ne.jp)
・ブラウザのHTML4/CSS対応度テスト
　URLﾘﾝｸ(homepage1.nifty.com)
・CSSバグリスト＠CSSバグ辞典スレッド
　URLﾘﾝｸ(cssbug.at.infoseek.co.jp)

4:Name_Not_Found
06/01/13 00:49:15
【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　URLﾘﾝｸ(www.mozilla.gr.jp)
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　URLﾘﾝｸ(east.portland.ne.jp)
・Web Site 作成支援 - What is CSS?
　URLﾘﾝｸ(www.nextindex.net)
・Academic HTML::CSS2
　URLﾘﾝｸ(www.tg.rim.or.jp)
・『スタイルシートWebデザイン』ボランティアHTML化版。
　URLﾘﾝｸ(www.asahi-net.or.jp)
・スタイルシート用語集
　URLﾘﾝｸ(www.mitsue.co.jp)
・IE で min-width を指定する方
　URLﾘﾝｸ(www.lucky-bag.com)
・CSSでイケてるデザインサイトリンク集
　URLﾘﾝｸ(ike.s33.xrea.com)
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　URLﾘﾝｸ(www.geocities.jp)
・* CSS { イケてるスタイルを："作れ";} 発表所
　URLﾘﾝｸ(web.archive.org)

5:Name_Not_Found
06/01/13 00:56:30
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
　URLﾘﾝｸ(hp.vector.co.jp)
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
　URLﾘﾝｸ(www.microsoft.com)
参考「IEとNNのBOXの計測方法の違いについて」
　URLﾘﾝｸ(www.fromdfj.net)

Q2: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
　URLﾘﾝｸ(anslasax.net)
2.IE5.5とNetscape6のCSS - 中央寄せ
　URLﾘﾝｸ(tancro.stp-1.com)
3.Internet Explorer 6におけるCSSの拡張
　URLﾘﾝｸ(www.microsoft.com)
4.Tableのセンタリング
　URLﾘﾝｸ(members.jcom.home.ne.jp)
5.ブロックレベル要素をセンタリングする方法
　URLﾘﾝｸ(www.mozilla.gr.jp)

6:Name_Not_Found
06/01/13 01:06:27
【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　URLﾘﾝｸ(www.fromdfj.net)
CSS段組レイアウトデザ委員会
　URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラムデザインの実現
　URLﾘﾝｸ(web.archive.org)
スタイルシートでマルチカラム・デザインを実現する方法
　URLﾘﾝｸ(www.motchie.com)
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　URLﾘﾝｸ(members.jcom.home.ne.jp)
試驗場 - 段組(position版)
　URLﾘﾝｸ(members.jcom.home.ne.jp)
段組れいあうとてすと (floatによる段組の例)
　URLﾘﾝｸ(www.remus.dti.ne.jp)
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
　URLﾘﾝｸ(web.archive.org)
リストを用いたレイアウト
　URLﾘﾝｸ(css.maxdesign.com.au)

7:Name_Not_Found
06/01/13 01:35:09
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど？
A4: まずclear忘れがないかをを確認してください。
floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
　URLﾘﾝｸ(www.remus.dti.ne.jp)
またfloat:left;で回り込むのはテキスト（imgを含む）だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:（浮動要素のwidth）;”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
　URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　URLﾘﾝｸ(www.mozilla.gr.jp)
　URLﾘﾝｸ(cssbug.at.infoseek.co.jp)
　URLﾘﾝｸ(cssbug.at.infoseek.co.jp)

8:Name_Not_Found
06/01/13 01:36:22
【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　URLﾘﾝｸ(web.archive.org)
　URLﾘﾝｸ(web.archive.org)
overflowを用いた擬似フレーム
　URLﾘﾝｸ(www.fromdfj.net)
レイアウトサンプル擬似フレーム
　URLﾘﾝｸ(www.rju666.com)

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート縦中央(垂直中央)」参照のこと。
　URLﾘﾝｸ(chaichan.hp.infoseek.co.jp)
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　URLﾘﾝｸ(www.remus.dti.ne.jp)

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？　
a:link img, a:visited img, a:hover img {border:none;}
NN4は URLﾘﾝｸ(cssbug.at.infoseek.co.jp) 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. URLﾘﾝｸ(cssbug.at.infoseek.co.jp)

9:Name_Not_Found
06/01/13 01:38:38
【FAQ】
Q10: リンクを新しいウィンドウで開かせるにはどうしたら？
A10: ＣＳＳではできません。target属性かJavaScript?でやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がＷ３Ｃの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
　URLﾘﾝｸ(www.mozilla.gr.jp)

Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。
「いままでの HTML との対照」
　URLﾘﾝｸ(www.tg.rim.or.jp)
　URLﾘﾝｸ(www.tg.rim.or.jp)
　URLﾘﾝｸ(www.tg.rim.or.jp)
HTML でのレイアウト指定の、 CSS での指定との対応表
　URLﾘﾝｸ(deztec.sakura.ne.jp)

10:Name_Not_Found
06/01/13 01:39:21
ばかもんが

11:Name_Not_Found
06/01/13 01:40:08
【参考】
＊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
URLﾘﾝｸ(www.stunicholls.myby.co.uk)

アンダーバー・ハックの方がいいか？
URLﾘﾝｸ(cssbug.at.infoseek.co.jp)

12:Name_Not_Found
06/01/13 02:12:52
【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　URLﾘﾝｸ(web.archive.org)
　URLﾘﾝｸ(web.archive.org)
overflowを用いた擬似フレーム
　URLﾘﾝｸ(www.fromdfj.net)
レイアウトサンプル擬似フレーム
　URLﾘﾝｸ(www.rju666.com)

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート縦中央(垂直中央)」参照のこと。
　URLﾘﾝｸ(chaichan.hp.infoseek.co.jp)
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　URLﾘﾝｸ(www.remus.dti.ne.jp)

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか？　
a:link img, a:visited img, a:hover img {border:none;}
NN4は URLﾘﾝｸ(cssbug.at.infoseek.co.jp) 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. URLﾘﾝｸ(cssbug.at.infoseek.co.jp)

13:Name_Not_Found
06/01/13 02:16:05
【先代の格言】

おまいらまだCSSとかやってんの

はっきり言って時代おくれ

14:Name_Not_Found
06/01/13 19:26:17 C6gM4fZT
スレタイ痛すぎ

15:Name_Not_Found
06/01/14 01:25:55
>>14
質問も回答も、激しくクドい感じでお願いしちゃうゼ？

16:Name_Not_Found
06/01/14 23:29:03
ルー大柴が居るって聞いたんですけど・・・・・

17:Name_Not_Found
06/01/15 21:09:32
/* CSS・スタイルシート質問スレッド【51th】 */
ｽﾚﾘﾝｸ(hp板)l50

18:Name_Not_Found
06/01/16 05:49:25
何このルー大柴って何か元ネタあるの？

19:Name_Not_Found
06/01/16 09:32:46
ぐぐれ

20:Name_Not_Found
06/01/16 10:37:35
ルー大柴とCSSでググったが…
ルー大柴はよく英語を略すのか？

21:Name_Not_Found
06/01/16 14:08:06
IE6.0にて、フッタの【CopyRight 2006 111 All Rights Reserved.】
という文字列最後の３文字【.ed】が変な場所に現れます。
しかも、二重にです。

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"URLﾘﾝｸ(www.w3.org)">
<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>
<div id="main">main contents</div>
<div id="bottom" align="right">CopyRight 2006 111 All Rights Reserved.</div>
</div>
</body>
</html>

22:Name_Not_Found
06/01/16 14:09:04
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;
}

23:21
06/01/16 14:10:10
とりあえず、解決方法は、
１、HTML宣言の後半部分のURLを消す
２、のコメントを消す
３、CSSでdiv#menuのpaddingをすべて0pxにする。
４、CSSでdiv#bottomのfloat:leftを消す
のどれかで解決できるんですが、決定的な理由がわかりません。
ただのバグというにはあまりにも解決方法が多すぎる気がするんですが・・・。
画期的な解決方法をご存知の方、いらっしゃいますか？

24:Name_Not_Found
06/01/16 15:59:06 Qhe1jz4x
>>23
Mac OS9、Netscape7.02というドマイナーな環境ではこのままで正常に表示されるな。ｗ

25:Name_Not_Found
06/01/16 17:51:06
>>24
win XPでも
Netscape4.8 Netscape6 Netscape7.1 Netscape8.0
Opera8.5 Firefox1.5
では正常です。

おかしいのはIE6.0だけ。
明らかにバグだとはわかるんですが、解決方法が多すぎるのでなんかスッキリしないんです。

26:Name_Not_Found
06/01/16 18:53:23
ていうか本スレここじゃないよ。

27:Name_Not_Found
06/01/16 21:36:14
>>25
またIEの不具合報告ですか

28:Name_Not_Found
06/01/16 21:36:44
ﾜﾛｽ

29:Name_Not_Found
06/01/18 12:57:40
<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
となってしまいます。
どうやったら解決できますか

30:Name_Not_Found
06/01/18 13:42:16
内緒です

31:Name_Not_Found
06/01/18 13:44:38
そこをなんとかお代官

32:Name_Not_Found
06/01/18 13:49:30
下記に移行せよ。

/* CSS・スタイルシート質問スレッド【51th】 */
ｽﾚﾘﾝｸ(hp板)l50

33:Name_Not_Found
06/02/04 17:44:59
田中彰の応援歌を考えた。

行くぞ彰ホームラン！センターオーバーホームラン！
弾丸ライナーだ！飛ばせ！運べ！彰！

俺が考えた歌詞ですよ！
弾丸ライナーだ！の後に「ヘイ！」とか「おい！」って掛け声を入れてスタンドでジャンプするの
とかいれると面白いかもしれない。

34:Name_Not_Found
06/02/22 20:48:57 mL83/VvT
頑張ってますよ

35:Name_Not_Found
06/02/22 22:30:57
/* CSS・スタイルシート質問スレッド【52nd】
ｽﾚﾘﾝｸ(hp板)l50

36:Name_Not_Found
06/03/15 19:48:37
同じページでリンクの色をクラスごとに分けたいんですけど、どのように記述すればよいでしょうか。
メニュー中の日記は青、BBSは赤、といった感じにしたいのですけど。
どうぞよろしくお願いします。

もしかして不可能でしょうか・・・

37:Name_Not_Found
06/03/15 21:35:01
自己解決しました

38:Name_Not_Found
06/03/22 09:17:03
クラスセレクタに続けて要素名を書けばよろしい

39:Name_Not_Found
06/03/23 02:20:09
なんだよこのスレｗｗ

40:Name_Not_Found
06/07/26 13:10:05
>>1
スレタイわらた

41:Name_Not_Found
06/11/08 17:20:38 xMeRUYZn
まん

42:Name_Not_Found
06/11/12 20:51:42 s6+6DegB
こ

43:Name_Not_Found
06/12/14 01:20:03 EaJjM8Lc
質問です。
CSSのfloatで以下のようなレイアウトは可能ですか？
「aaa…」は段落無しの連続した文章です。

aaaaaaaaa┌─┐
aaaaaaaaa│画│
aaaaaaaaa└─┘
┌─┐aaaaaaaaa
│画│aaaaaaaaa
└─┘aaaaa

44:Name_Not_Found
06/12/14 07:23:36
可能。
クリアを忘れずに。

45:Name_Not_Found
07/02/10 13:49:19 cwVXvG/f
tdのひとつひとつの横幅のサイズを指定する
方法がありましたら教えてください。

46:Name_Not_Found
07/02/10 14:37:34
>>45
なんでよりによってこのスレで質問する？
普通にwidthプロパティ。

47:45
07/02/10 16:21:37 cwVXvG/f
>>46
ありがとうございます。
インライン要素にはwidthは使わない方がいいと書いてありました。

他には、tableにはwidthを指定できるので、
tdには比率が指定できればサイズが指定できると思ったのですが、
そのやり方は見つかりませんでした。

48:Name_Not_Found
07/02/10 16:24:26
>>47
td要素はブロック要素ですが何か。

49:45
07/02/10 16:55:21 cwVXvG/f
>>48
間違えていましたか。
ブロック、インラインの違いは、おおまかに
改行を伴うか伴わないかで覚えていました。

ただ、CSSチェッカーURLﾘﾝｸ(jigsaw.w3.org)
でエラーが出るので、使ってはいけないのは同じだと思いました。

50:45
07/02/10 17:18:51 cwVXvG/f
すいません。:ではなく、=でつないでいました・・。
CSSチェックをしても、英語の変な文章が出てくるわけですね・・。

51:Name_Not_Found
07/02/11 14:03:15 hu/1JMam
tableのcolspan、lowspanの
CSSバージョンがありましたら教えてください。

52:Name_Not_Found
07/02/11 14:09:23
ない。
つーかこのスレで質問すんな。

53:51
07/02/11 16:25:11
ありがとうございました。

54:Name_Not_Found
07/02/14 23:51:38
初心者向けの質問スレはこちらです
ｽﾚﾘﾝｸ(hp板)

55:Name_Not_Found
07/03/29 06:13:51 Vw1XKpXy
<br>を2つ以上入れても、1回分の改行しか出来ません。
そういう症状の場合、letter-spacingが疑われますが、letter-spacingは使っていません。
ひとつひとつ検証してみたところ、　* { margin: 0, padding: 0, }　で使っているmarginが原因のようです。
これは必要な要素なのでカットするわけにもいかないし、困っています…。
いままでも同じように設定しているのですが、何も問題はありませんでした。
何かアドバイスをしてくださる方がいれば、よろしくお願いします。

ちなみにmarginを1pxにしたら、若干行間があきました。
改行でできる隙間（＝マージン？）も0に、という解釈なのでしょうか。

56:Name_Not_Found
07/03/29 08:42:40
>>55
釣りだと思うがマジレス。
・letter-spacingの意味を調べろ。
・CSSの基礎から勉強し直し。

57:Name_Not_Found
07/03/29 10:27:08
>>55
<br>は空行を作るためのものではない。
そもそもの使い方が間違ってるからCSS勉強しなおせ。
2回以上改行する場面など無い。

58:Name_Not_Found
07/03/29 12:21:07
ひとつのタグに二つ以上要素を設定することは可能ですか？

<ul id="content" class="center">

という感じなんですが・・・
また文法的には正しいんでしょうか？

59:Name_Not_Found
07/03/29 12:33:55
>>58
それの中の「要素」ってulだぞ？
多分idとclassの同時設定は、という意味だと思うが、可能。
ついでにclass複数も値を半角スペースで区切って可能。

60:Name_Not_Found
07/03/29 13:02:40
>>59
ありがとうございます

61:Name_Not_Found
07/03/29 16:07:04 A4Tu737G
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;を使いました。

62:Name_Not_Found
07/03/29 16:07:49 A4Tu737G
この表示がＦＦなら
sssaaaa
cc
cc
cc
c
と表示されるのですが、ＩＥでは
aaaaaaa
sss cc
cc
cc
c
と開始位置がずれてしまいます。どうやって改善したらよろしいでしょうか？

63:Name_Not_Found
07/03/29 17:18:45
>>61-62
釣り大流行らしいが、負けずにマジレス。
レイアウトと呼べる代物じゃないので、一から勉強して下さい。

64:Name_Not_Found
07/03/29 17:28:31
>>63
webページにおいて実用性は一通りでは語れないはずですが？
そもそもあなたの予想しているものと違う場合だってあります。

問題の方は解決…ぽいことはできました。ありがとうございました。

65:Name_Not_Found
07/03/29 17:39:50
釣れました？

66:Name_Not_Found
07/03/29 17:46:22
>>65
あーざすｗｗｗｗｗ

67:Name_Not_Found
07/03/29 22:01:13
このスレ一体何人が張りついてるんだ

68:Name_Not_Found
07/03/29 22:22:48
>>67
すべて67の自演です。

69:Name_Not_Found
07/04/02 19:02:42 YnkH6gsN
URLﾘﾝｸ(news.ameba.jp)

70:Name_Not_Found
07/04/04 23:25:28
なんというルー大柴・・・これは間違いなくルー大柴
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　／￣＼
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　|　＾o＾　|　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　＼＿／

71:Name_Not_Found
07/05/11 00:03:01 Xz++WjQ7
12日（土）17時ルー大柴アメスタ出演
土曜の夕方5時にクリック↓　　　
　　　URLﾘﾝｸ(studio.ameba.jp)

72:Name_Not_Found
07/05/11 00:20:06
これは見逃せない

73:Name_Not_Found
07/05/14 00:02:37
テーブル内の文字を全て左揃えにしたいんですが
わかる人お願いしますm(_ _)m

74:Name_Not_Found
07/05/14 00:12:55
>>73
table,td,tr {text-align:left;}

75:Name_Not_Found
07/05/14 00:18:57
>>74
>>74
>>74

>>73
table * { text-align : left; }

76:Name_Not_Found
07/05/18 15:08:40 4i99yRls
アメスタ
URLﾘﾝｸ(vision.ameba.jp)

77:Name_Not_Found
07/05/24 00:42:01
フレームの色を全て同じにするにはどうすればいいですか？
ｈｔｍｌソフトのプレビューでは、ちゃんと表示されるのですが
某ブログでは、色が変わらないのでｃｓｓでやってみようと
思っています。

78:Name_Not_Found
07/05/24 01:06:32
事故解決しました　汗汗；；；；；

79:Name_Not_Found
07/06/09 21:12:40 d51ozyPH
ここは笑いの絶えないほのぼのスレッドですね

80:qa
07/07/07 20:43:24 h5myQA9f
[ ]　←画像（縦方向のグラデーション）

[ テキスト ]
[ テキストテキストテキスト ]

上記のようにテキストの量によって自動で背景画像が可変するような
CSS指定をしたいのですが、これって可能でしょうか？
縦の可変はわかるのですが、横の可変がわかりません…

81:Name_Not_Found
07/07/07 20:46:44 9ivsDHRw
マージンやパッジングを指定するときに
margin-top: 0;
と書いてあるところがほとんどなのですが
margin-top: 0px;
と書いても問題ないですか？

82:Name_Not_Found
07/07/07 22:13:51 BHKm+gY3
>>81
問題ないです

83:Name_Not_Found
07/07/07 23:19:42 OT0y3ZG6
■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の右端に表示させたい

二つを満たすにはどうしたらいいんでしょうか？
お願いします

84:Name_Not_Found
07/07/08 01:43:54
自分でどうにかしようって気はないのか…

85:Name_Not_Found
07/07/10 17:31:28
>>83
関係ないが、俺ボデーにいきなりwidthやらpositionって指定しない。
コンテナid作る。

86:Name_Not_Found
07/07/10 19:44:43
そうですか。

87:Name_Not_Found
07/07/11 01:27:22
うん

88:Name_Not_Found
07/07/27 22:27:40 eb2UaVpt
あげときましょうか

89:Name_Not_Found
07/07/31 10:19:14
ちょっとした質問なんだが
<div id="main" class="index">
があったとして
div#main.index {
といった指定は通る？
そもそも文法的に正しいのかも気になる
IDとClassを同時に指定なんて滅多に無いから実用性は無いと思うが･･･
気になってググってみたけど見つけきれなかったんだ

90:Name_Not_Found
07/07/31 12:25:48
>>89
その記述の必要性がなくない？
<div id="main">にして
各要素にclassを使うってので良いと思うが。

91:Name_Not_Found
07/08/01 02:59:37
テーブルの<td align=left valign=bottom>
ってのを<div>で出来ませんか？

検索した結果<div align=left>では、できたのですが、
valign=bottomが出来ませんでした。

ちなみにHPとかで使うのではなくテーブルのセル内で左側表示と
右側の表示というので使うつもりです。

誰か詳細がわかりましたらよろしくおねがいします。m(_ _)m

92:Name_Not_Found
07/08/04 14:44:13
速報!!!!
URLﾘﾝｸ(hiro.pya.jp)
URLﾘﾝｸ(hiro.pya.jp)
URLﾘﾝｸ(hiro.pya.jp)

93:Name_Not_Found
07/09/10 17:05:04
>>91
全然スタイルシートについて質問してないし
vertical-alignについて聞いてるのかと思ったら
左右とか言い出して意味不明だが、こういうことか？

<HTML>
左側表示したいセル: td class="left"
右側表示:したいセル td class="right"

<CSS>
td.left {text-align:left}
td.right {text-align:right}

94:Name_Not_Found
07/09/10 17:22:01
スレチに回答するドアホ

95:Name_Not_Found
07/10/14 17:15:11 FB+vrREU
サイトのコンテンツ領域外背景がグラデーション状になっていて
コンテンツ領域内と外背景の間をグローのようなぼかし効果をしているサイトを見た事がありましたが
bodyタグに背景グラデーション画像を指定するとして、このグロー効果はどうやって付けているのでしょうか
グローの背景画像付ける為だけにコンテンツ領域全体を新たにdivで囲む事も考えましたが、必要の無い無駄div作るのもどうかと思って・・・
この方法以外に良い方法などあったら教えて頂けませんでしょうか

96:Name_Not_Found
07/10/14 17:18:38
bodyやdivの背景画像はcssのbackground-imageで指定しています
書き足りていませんでした、すみません

97:Name_Not_Found
07/10/14 19:45:43
>>95,96
ここで聞くなよ。
取り合えず手本となるサイトがあるなら、ソース見れ。
あんたの説明から想像するに、div使う以外考えられないけどな。

98:Name_Not_Found
07/10/14 22:34:25
>>97
ぐぐって色々調べ物をしていた時辿り着いたサイトなので、どういった検索で行けたのか覚えていないもので・・・
やっぱりdivが必要なら諦めようと思います、レスありがとうございました

99:Name_Not_Found
07/10/14 22:35:41
IE(Mac) において、TABLEタグのcellspacing属性の代替となるCSSプロパティはありますか？
border-spacing や border-collapse も使えないようですが、
セル間隔をなくすには、cellspacing属性を使うしかないないのでしょうか？

100:Name_Not_Found
07/10/14 22:47:57
>>99
IE(Mac)に限らずpadding。
IE(Mac)なんて使ってる奴は希少。

101:Name_Not_Found
07/10/15 00:15:02
ルー大柴流行再来の前に建てられたこのスレは本格予言的スレ

102:99
07/10/15 01:07:33
>100
うーん、paddingプロパティはcellpadding属性の代用にはなりますが
cellspacingとは異なりますよね？
それともMacIEではpaddingでセル間隔を調整できるのでしょうか？
当方ボックスモデルの理解はできているつもりですが
試す環境がないのでMacIEの仕様の詳細がわからないのです・・・。

103:Name_Not_Found
07/10/15 01:17:22
>>99
border-spacingがその代用。
border-collapseがseparateのときのみ。

104:Name_Not_Found
07/10/15 01:25:04
Mac用IEなんてどうでもいいよ。。

105:Name_Not_Found
07/10/15 01:29:11
>>99
テンプレのQ12にあるだろが。

106:Name_Not_Found
07/10/19 20:37:37 b7HNLlS3
携帯から見てリンク下線を見えなくする方法ってありますか？

107:Name_Not_Found
07/10/19 20:59:03
>>106
CSSの効く携帯ブラウザなら普通と一緒

108:Name_Not_Found
07/10/19 21:22:35 b7HNLlS3
>>107
DoCoMoから確認したところ反映されていなかったので困っています
やはり携帯対応タグはないんでしょうか？

109:Name_Not_Found
07/10/19 21:40:25
携帯関連の質問者ってどうしてこうバカばかりなんだろ

110:Name_Not_Found
07/10/19 23:17:16
>>108
CSS未対応の機種ではおそらく無理かと。

111:Name_Not_Found
07/10/20 09:36:02
>>110
そうですか…
やはり携帯からみて下線を消したり見えなくする方法はなさそうですね
ありがとうございました

112:Name_Not_Found
07/10/20 13:14:38
(ﾟдﾟ)ﾀﾞｶﾗCSS対応ｹｰﾀｲﾅﾗ可能ｯﾃ言ｯﾃﾙﾉﾆ自分ﾉｹｰﾀｲｶﾞｽﾍﾞﾃｶﾖ

113:Name_Not_Found
07/10/20 13:32:44
そもそも下線のないリンクなんてユーザビリティの観点から（以下略）

114:Name_Not_Found
07/11/08 13:03:31
たまにでいいから読み上げブラウザのことも思い出してあげてください

115:Name_Not_Found
07/11/08 13:20:43
包括ブロックとfloatが俺をいじめる

116:Name_Not_Found
07/11/14 20:33:19
大手テンプレートサイトで配布されているCSSに次のような記述がありました。

font: 70%/1.5em sans-serif;

この、"70%/1.5em" というのはどういう意味なんでしょうか？

教えて下さい。

117:Name_Not_Found
07/11/14 20:45:38
font propertyを調べろ

118:Name_Not_Found
07/11/20 17:43:19
hu

119:Name_Not_Found
07/11/29 15:11:48
ぬ

120:Name_Not_Found
07/12/01 05:26:51 3bqLvzKw
すいません、初歩的な質問ですがよろしくお願いします。

１つのページにリストを表示して、複数のリストグループがあるとき、
１つは横並びのリスト、もう一つはたて並びのリストにしたいのですが、
float:leftで設定すると、<li>全部横並びになってしまうんですけど
どうすればいいでしょうか？

以上よろしくお願いします。

121:Name_Not_Found
07/12/01 06:47:02
>>120
何の為にclassやidがあるのか考えよう。

122:Name_Not_Found
07/12/01 23:50:46
>>120
何のためにCSS質問スレがあるのか考えよう。

123:Name_Not_Found
07/12/03 11:31:33 BKcjh546
ルー大柴が紅白の目玉説　あの大物も一緒に出るか
URLﾘﾝｸ(news.ameba.jp)

124:Name_Not_Found
07/12/10 12:22:55
ho

125:Name_Not_Found
07/12/11 16:44:40
スタイルシートで不等号("<", ">")って使うっけ？

126:Name_Not_Found
07/12/11 18:28:28
>>125
ちょwww

127:125
07/12/12 23:26:59
あ、自己解決、
qq 'xxx';
でやればいいと気付いた。

128:Name_Not_Found
07/12/12 23:42:38
・・・なんかすっごく解決してない気がする。
子供セレクタって知ってるか？

129:125
07/12/13 01:24:44
>>128
いあ、ダブルクォーテーションのエスケープだけが問題だから。
ｿﾚさえクリアできれば、まぁって感じで。

130:Name_Not_Found
07/12/13 13:12:57
しかしスレ違いという根本的な問題は解決してない罠

131:Name_Not_Found
07/12/20 11:48:45
nürüpo守

132:Name_Not_Found
07/12/26 19:43:45
>>131
gä

133:Name_Not_Found
07/12/31 16:41:54 BsoPA2II
ルー大柴のカルタ
URLﾘﾝｸ(vision.ameba.jp)

134:Name_Not_Found
07/12/31 21:18:14
下のアホアホなソフトで勉強してみろ
どうにも、ならんくなるぞ。
URLﾘﾝｸ(www.siteup-system.com)

135:Name_Not_Found
08/01/23 15:11:00 xqvM1sDp
保守

136:Name_Not_Found
08/01/25 17:39:22
floatを指定する要素にはwidth属性が必須、
ただし画像などもともとwidth属性を持つ要素の場合は無くても可。
…ってことらしいんですが、

<div style="float:left;">
<img src="img.jpg">
</div>
<div style="float:left;">
<img src="img.jpg">
</div>

のように、フロート要素内に画像のみ、という場合でもやはり
（上記例の場合はdivに対して）width指定は必須？

137:Name_Not_Found
08/01/25 19:25:02
>>136
CSS2.0はwidth必要、CSS2.1はCSS不必要。

138:Name_Not_Found
08/01/26 01:20:24
必要ないかと
divの最小幅は画像で引っかかって決まるだろうし。

139:Name_Not_Found
08/01/26 19:43:53
>>138
おまえ・・・・

140:136
08/01/28 02:39:26
レスありがとう。

結局、CSS2.0では本来は必要だけど、ブラウザが
なんちゃって表示してくれる、って感じですね。

で、CSS2.1ならOK（autoで適宜解釈してくれる）ってことですね。

141:Name_Not_Found
08/01/29 17:10:44
毎回手書きで文字の前に画像を持ってきていたのですが
<p class="icon">ここに文字</p>と書いて
外部cssで画像を指定することは可能でしょうか？

「css 画像」でググったのですが、解決できなかったのでアドバイスいただけると嬉しいです。

142:Name_Not_Found
08/01/29 18:16:09
cssというよりはxmlなきがしなくもない

143:Name_Not_Found
08/01/29 19:20:56
contentsもな、IE対応してないし

144:Name_Not_Found
08/01/29 19:59:21
画像というのがどういう画像なのかわからんけど
もしアイコンみたいな小さい画像だとしたら、
背景画像で左上に表示して、あとは画像の大きさに合わせて
paddingとかtext-indentとかで中身をずらせばそれっぽくできる。

145:Name_Not_Found
08/01/29 20:01:39
あ、class="icon"って書いてるからアイコンぽいのでいいのか。

146:Name_Not_Found
08/01/29 20:10:09
<p><img src="kuso" />ここに文字</p>

これに尽きるだろ、わざわざ CSS でするもんでもない
てか、手書きって、<p class="icon">も手書きじゃねぇか

方法はいくらだってある、あんたの言う手書きってのはメモ帳でって事かい
ならテキストエディタ使え
画像のファイル名を変えたら修正が大変だってかい
なら置換使え
他にも定型のコピー＆ペーストなり、扱いやすいファイル名に設定するだの、いろいろ出来ることがあるだろうに
この手間さえも省きたいんであれば”手書き”ってやつはやめときな、向いてないわキミには

147:Name_Not_Found
08/01/29 21:44:43
146はこのスレで相談に乗ることに向いてないと思うのは私だけか。

148:Name_Not_Found
08/01/30 02:24:16
んー、146の応え方、好きだけどな。頑固親父が居るﾗｰﾒﾝ屋ぽいじゃんｗ

149:Name_Not_Found
08/01/30 18:47:23
kusoが入ったラーメンなんていやです＞＜

150:Name_Not_Found
08/01/31 19:32:17
特定の要素のみを指定する場合の書き方が混乱してきました。
例えばclassを使ってtableのth要素だけを指定したい場合どうすれば良いのでしょうか？

<html>
<body>
<table class="test">
<tr><th>あいうえお</th></tr>
<tr><td>かきくけこ</td></tr>
</body>
</hmlt>

151:Name_Not_Found
08/01/31 19:53:05
table.test th {
color: pink;
}

152:Name_Not_Found
08/01/31 19:53:16
table.test th {...}

153:Name_Not_Found
08/01/31 19:54:20
ごめん

154:Name_Not_Found
08/01/31 19:54:58
table[class="test"] th {
color: red;
}

155:Name_Not_Found
08/01/31 20:00:08
test[class~="test"] th {
color: yellow;
}

156:Name_Not_Found
08/01/31 20:26:14
URLﾘﾝｸ(art5.photozou.jp)
「au、…」はHTMLの文字例です。背景はCSSで指定しています。
文字例をCSSでピクセル単位で動かすにはどうすればいいでしょうか?

157:Name_Not_Found
08/01/31 20:58:59
later-spacing プロパティ

158:Name_Not_Found
08/02/01 12:08:30
paddingすりゃいいだけだろ

159:Name_Not_Found
08/02/11 02:20:11 xgyjrVKt
HTML 文書には、 link 要素で import.css を読み込ませるようにしてあり、
その import.css には、

@import'style1.css';
@import'style2.css';

と、二つのスタイルシートファイルが更にインポートされるようにしてあります。

この style1.css と style2.css 両方に、

style1.css ：文字の太さは通常の太さで、文字色は青にする。
style2.css ：太文字にし、文字色は赤にする。

というような、異なる a 要素のスタイルが書いてある場合、
どちらの表示が優先されるのでしょうか？
また、 style2.css での記述を必ず優先させるためには、
!important を書くだけで平気でしょうか？

よろしくお願いします。

160:Name_Not_Found
08/02/11 05:26:06
何で試したり、cssの仕様を読もうとしないの？

161:158
08/02/11 17:04:19
試してみたのですが、
どちらが優先されているかがイマイチ分かりません…。
後からインポートした方(style2)の方が優先されるのでしょうか…？

162:Name_Not_Found
08/02/11 17:14:39
色盲なんだな。

163:Name_Not_Found
08/02/11 17:27:34
上から下へ読んでいくんだろうが、ボケ
PCは昔のことなんか振替んねぇんだよ

164:Name_Not_Found
08/02/12 09:21:37
お前らなんでcssの話してんだよカスが

大柴の話をちゃんとしろよ

165:Name_Not_Found
08/02/12 12:45:50
ルー語でおｋ

166:Name_Not_Found
08/02/12 15:25:47
ユーはホワイcssのトークオンリーな訳？
しっかり大柴のトークをトゥギャザーしようぜ

167:Name_Not_Found
08/02/12 16:40:19
ミーの脳がメルトダウン

168:Name_Not_Found
08/02/12 22:21:27
>>166
もはやそなたはルー語をマスターしてるな

169:Name_Not_Found
08/02/18 10:21:33
幅指定ありのテーブルにボーダーを付けた時、ボーダーを含めて
幅が設定されるみたいなんだけど、これって仕様通り？
例えば

<table style="width:500px;border:3px solid #000;">

とかってした場合に、ボーダーを含めた幅が500pxになるみたいなんだけど。
（標準モードでも互換モードでも同じ）
仮に仕様通りの解釈だとして、どういう理屈になるのかな？

170:Name_Not_Found
08/02/18 16:25:06
strictスレへどーぞ

171:Name_Not_Found
08/02/18 20:01:26
　　ｼｭｯ
　　　　　　ｼｭｯ
　ｼｭｯ　　ﾊ,,ﾊ　　ｼｭｯ
　ﾊ,,ﾊ彡（ﾟωﾟ ),ﾊ
（ﾟωﾟ )彡ミ（ﾟωﾟ )　お断りします
＿(__つ/￣￣￣/＿
　　＼/　　　 /

172:Name_Not_Found
08/03/04 10:29:28 jxKPUKng
<div style="width:300px;height:300px;background-color:red;overflow:hidden;">
<img src="hoge.png" width="100" height="100" style="position:absolute;top:250px;left:250px;">
</div>

画像の赤いエリアからはみ出しているところが隠れるようにしたいと思っています。
IE7だと上の書き方でできましたが、
Opera9だとはみ出している部分が表示されてしまいます。
Operaでも可能な方法を教えてください。

173:172
08/03/04 10:39:52
すみません解決しました。
divのほうにも絶対座標を指定すればいいんですね。

174:Name_Not_Found
08/03/04 15:28:12 58HvQhEk
<ol>
<li>あああ</li>
<li>いいい</li>
</ol>

としたとき、数字と文字（あああ）の隙間が空くのですが、
これを詰める方法はないでしょうか？

175:Name_Not_Found
08/03/04 15:51:59
マーカー表示をやめて、content プロパティで表示するようにすれば？

IE対応？そんなゴミブラウザｼﾗﾈｰﾖ

176:Name_Not_Found
08/03/04 17:18:11
スレ違い

ここはルー大柴スレだ

177:Name_Not_Found
08/03/04 21:31:22
オールマイティーオッケーさ　ブラザー

178:Name_Not_Found
08/03/05 20:20:26 3TVPhP6o
「#***がclassで、.***がidだ」って書いてある本があるんだが、これは一体なんなのでしょうか？
返品して貰えますかね？

179:Name_Not_Found
08/03/06 00:22:31
なんていう本ですか？

180:Name_Not_Found
08/03/06 11:21:45
div.newpage{ page-break-before: always;}

で印刷時の改行位置をやってるんだが、
印刷プレビューしてみると、divで指定しているブロックの区切りの間がものすごい開いて、
改行ポイントまで一つのdivブロックを押し下げるって状態になってる。

ようするに、ある区間、真白な部分ができている状態。
これってどうすればいい？

181:Name_Not_Found
08/03/06 14:50:39
どの UA で発生する現象なのかも書かないで質問とは片腹痛い

182:178
08/03/08 01:52:28
>>179
『3日で作るPHPアプリケーション』秦崇・遠藤諭　アスキー
という薄っぺらい本です。
PHPについての本ですが、なぜかCSSについても数頁ふれていて、そこでこの間違いが。
単なる誤植ではなく、著者が根本的に勘違いしてるんだと思われまする。

次ページ