/* CSS･スタイルシート質問スレッド【42】 */

1 ：Name_Not_Found：2005/04/10(日) 13:20:00 ID:???

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

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

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

過去スレや関聯リンクは>>2-10
【過去ログ】>>2-3
【関連スレ】【仕様書】【CSS検証】>>4
【解説など】>>5
【FAQ】>>6-9

【まとめサイト】http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】　　　　http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去スレ】　　http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com:8080/?CSSRelated

2 ：Name_Not_Found：2005/04/10(日) 13:22:06 ID:???

【過去ログ】（すべて消滅か？）
1 ttp://mentai.2ch.net/hp/kako/974/974934062.html
2 ttp://natto.2ch.net/hp/kako/984/984113434.html
3 ttp://natto.2ch.net/hp/kako/992/992992981.html
4 ttp://pc.2ch.net/hp/kako/996/996828258.html
5 ttp://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6 ttp://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7 ttp://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8 ttp://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9 ttp://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10 ttp://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11 ttp://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12 ttp://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13 ttp://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14 ttp://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 ttp://pc5.2ch.net/hp/kako/1045/10451/1045124732.html
16 ttp://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17 ttp://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18 ttp://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19 ttp://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20 ttp://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21 ttp://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22 ttp://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23 ttp://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24 ttp://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25 ttp://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26 ttp://pc5.2ch.net/test/read.cgi/hp/1072018825/
27 ttp://pc5.2ch.net/test/read.cgi/hp/1074845459/
28 ttp://pc5.2ch.net/test/read.cgi/hp/1076968824/
29 ttp://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 ttp://pc5.2ch.net/test/read.cgi/hp/1082785026/

3 ：Name_Not_Found：2005/04/10(日) 13:22:59 ID:???

4 ：Name_Not_Found：2005/04/10(日) 13:26:28 ID:???

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド第４版
　http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え～
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
　http://pc8.2ch.net/test/read.cgi/hp/1097724119/l50
【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

5 ：Name_Not_Found：2005/04/10(日) 13:28:39 ID:???

【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/index.html
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/

6 ：Name_Not_Found：2005/04/10(日) 13:29:43 ID:???

【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

7 ：Name_Not_Found：2005/04/10(日) 13:30:24 ID:???

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
　http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと　(floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
リストを用いたレイアウト
　http://css.maxdesign.com.au/index.htm

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

8 ：Name_Not_Found：2005/04/10(日) 13:31:06 ID:???

【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://kobit.info/tips/overflow.html
　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

9 ：Name_Not_Found：2005/04/10(日) 13:31:38 ID:???

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

Q11: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A11: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（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.jp/site/tips/page/p0037.html

10 ：Name_Not_Found：2005/04/10(日) 13:41:58 ID:???

>>1
乙カレー

11 ：Name_Not_Found：2005/04/10(日) 13:46:54 ID:???

ローカル・ルールのリンク先変更はどこに申請するんだっけ？

12 ：Name_Not_Found：2005/04/10(日) 19:10:59 ID:???

【テンプレ追加提案】
以前、>>10の方法で擬似フレームを作ったのですが、実用性に乏しい
ため諦めました。

しかし、前スレに出てたIEの position:absolute; のバグを利用した
擬似フレームはほぼ完璧で、すごく秀逸だと思います。

擬似フレームに関して、以下のテンプレートを追加すればいいのではと、
思います。

----------------------------------------------------------------

＊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

13 ：12：2005/04/10(日) 19:12:33 ID:???

ごめん、>>10じゃなくて>>8でした。。。

14 ：Name_Not_Found：2005/04/10(日) 20:57:46 ID:Y7msd+6y

質問させてください。

<ul id=navi>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>

<div id=main>
・
・
・
</div>

としたとき、
body { margin: 0 5%; }
ul#navi { float: left; margin-right: 20px; width: 10em; }
div#main をwidthを指定せず、ulとbodyのマージンの残り、という風にすることは
可能でしょうか？
やはりwidthを指定しなければならないのでしょうか？
すみません、よろしくお願いします。

15 ：14：2005/04/10(日) 20:58:54 ID:???

idのところ""が抜けてました。すみません。

16 ：Name_Not_Found：2005/04/10(日) 21:10:00 ID:???

やってみたらどうなりましたか？

17 ：14：2005/04/10(日) 21:17:19 ID:???

>15
div内の内容によって幅が変わるのですが・・・。

18 ：Name_Not_Found：2005/04/10(日) 21:39:29 ID:???

自分で答えを出してるじゃないか。

19 ：14：2005/04/10(日) 21:56:43 ID:???

無理そうですね・・・。レスくださった方、どうもありがとうございました。

20 ：Name_Not_Found：2005/04/10(日) 22:07:42 ID:BtuZK4WG

divやspanの表示領域に横スクロールバーを付ける方法はないでしょうか？
divやspanの表示領域の横幅は固定で
画面からはみ出る部分はスクロールで横移動したいのです。
スタイルシートで下記設定をしたのですが
縦スクロールバーしか表示できませんでした。。。

width: 100px; /* ボックスの横幅 */
overflow:auto

21 ：Name_Not_Found：2005/04/10(日) 22:20:10 ID:???

>>19
もう遅いかもしれませんが、一応。

CSSでいうfloatとは、和訳すると浮動体です。
従って、floatプロパティを指定されているul#naviは、div#mainの「幅」に干渉しません。

これは勝手な予想ですが・・・
もしも貴方が、div#main側でBoxを用いたデザインをしたいのであれば、容易な方法の一つとして

ul.navi {
float : left;
width : 10em;
margin : 0;
padding-left : 1.5em;
}
div.main {
margin-left : 13em;
}

<ul class="navi">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
<div class="main">
<div class="section">
～～～本文～～～
</div>
</div>

このようにすれば、div.sectionによってレイアウトをとる事ができます。

22 ：Name_Not_Found：2005/04/10(日) 22:29:33 ID:???

>>20
とりあえずHTMLのソースも記述しましょう

23 ：Name_Not_Found：2005/04/10(日) 22:37:36 ID:???

>>12　
それって「position:absolute; のバグ」なのか？
それに、アンダーバー・ハックでやれば済むことでは。
#menu {
position:fixed;
display:block; top:100px; left:10px; width:130px; height:200px;
_position:absolute;
}
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b157.html

24 ：２０：2005/04/10(日) 22:38:32 ID:???

>>22
widthの値を極端に狭くしても縦スクロールバーしか表示されません・・・

<html>
<head>

<STYLE TYPE="text/css">

</STYLE>

</head>
<body>
<SPAN CLASS="box1">テストテストテストテストテストテスト</SPAN>
</body>
</html>

25 ：Name_Not_Found：2005/04/10(日) 22:56:14 ID:???

前スレの最後のほうで盛り上がってたな
display: blockを追加するかSPANじゃなくてDIVとかPとかでやったら
ttp://www.mozilla.gr.jp/standards/webtips0015.html#c1_4

26 ：２０：2005/04/10(日) 22:58:01 ID:???

overflow:scroll;
overflow-y:hidden;
とすると横スクロールバーは表示されるようになりましたが
表領域に文字が収まると解釈されてるのか
スクロールできないスクロールバーとなってしまいました。。

=================================
<html>
<head>

<STYLE TYPE="text/css">

</STYLE>

</head>
<body>
<SPAN CLASS="box1">テストテストテストテストテストテスト</SPAN>
</body>
</html>

27 ：２０：2005/04/10(日) 23:07:38 ID:???

>>25
レスおよび参考資料ありがとうございます。
divでやってみたのですがspanと結果は同じでした。

「ああああああああああああああああ」というのを表示領域を固定して
横スクロールバーを表示させて横スクロールですべて見せるようにしたいだけなのに・・・。

28 ：12：2005/04/10(日) 23:14:17 ID:???

>>23
そうだね。
アンダーバーハックなら一行ですむね。
ただ、後で見たときや素人にはわかりやすいかなと。

/* CSS･スタイルシート質問スレッド【41】 */
http://pc8.2ch.net/test/read.cgi/hp/1110236393/274-275n

下記サイトにバグと書いてある。

CSS position:fixed; for IE6
http://www.stunicholls.myby.co.uk/layouts/fixed.html

＞ This is all done using standard CSS with a little help from another IE6 BUG
＞ that makes it believe that 'ABSOLUTE' is 'FIXED'.

29 ：Name_Not_Found：2005/04/11(月) 01:05:45 ID:???

>>12
私が質問に出したURLですね。
そんなに革命的なことだったんだ@@;

30 ：Name_Not_Found：2005/04/11(月) 02:44:42 ID:???

>>28
セレクタのバグであって、「position:absolute; の」バグではないのでは？

31 ：Name_Not_Found：2005/04/11(月) 03:35:41 ID:???

閲覧領域のサイズを初期コンテナブロックのサイズとして扱う
http://cssbug.at.infoseek.co.jp/detail/winie/b130.html

32 ：12：2005/04/11(月) 09:55:26 ID:???

>>29
革命的かは分からないけど、この方法なら簡単に実用性のある擬似フレーム
ができるので個人的には使わせてもらってます。
紹介してくださり、サンクスです。

>>30
すみません、そんなにCSSには詳しくないので、ご教授お願いします。
英文を見ると、IEの position:absolute; のバグのように見受けられます。

＞ 'ABSOLUTE' が 'FIXED' になるIE6のバグを利用して、標準的なCSSの記述
＞のみで全てを実現できます。

33 ：Name_Not_Found：2005/04/11(月) 10:52:59 ID:???

CSSでサイトを構築すると
いろんなブラウザに対応させないと
いけないとですけれども、
最低限、どのブラウザに対応させれば良いとですか？

また、皆さんはどのようにしてCSSの振り分けを行っているとですか？

34 ：Name_Not_Found：2005/04/11(月) 11:53:46 ID:???

>>33
適切にマークアップされていれば
割と古いブラウザでも最低限見られるようになってるんじゃない？
そうでないのならcssでやる意味ないし

35 ：Name_Not_Found：2005/04/11(月) 14:15:48 ID:???

>>33
自分は基本的にGeckoベースで作成。
その後、ハックでIEやopera（気が向いたらMacIEにも）に対応させる。

"通"御用達、CSSハック - CSS Dencitie
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

面倒ならIEだけでいいと思う。（ここの人達に怒られそうだけど）

36 ：35：2005/04/11(月) 14:21:40 ID:???

ようわからんって人は、ここ↓を見た方が分かりやすいね。

CSS filtering test
http://su.que.jp/tmp/css_test.html

37 ：Name_Not_Found：2005/04/11(月) 15:00:36 ID:???

そもそも
ＣＳＳはﾌﾞﾗｳｻﾞによってバグるというけれども
もっとも多い事例は何？
>>34の言うとおり一般的なＣＳＳでバグって起きる？
問題ないのじゃないの？

38 ：Name_Not_Found：2005/04/11(月) 15:32:54 ID:???

IEボックス計測バグ

39 ：25：2005/04/11(月) 17:48:35 ID:???

>>27
ああ、そういうことか。ごめんごめん。
それだったら white-space: pre で折り返しをオフにしてみたら。

40 ：25：2005/04/11(月) 17:49:47 ID:???

訂正：div使ってwhite-space: nowrapで折り返しをオフにしてみたら。

41 ：Name_Not_Found：2005/04/11(月) 17:54:49 ID:???

ナビゲーションをul li aで、
display: blockとかtext-indentとか使う例のやつで
ロールオーバーにすると、
IE5で表示されないのですが、
これってバグですか？

ちなみにこの部分は
左にロゴがあるヘッダーの右側に
横並びにしている都合上、
ulにfloat: right;
liにfloat: left;
を指定しています。
その辺りも関係あるのかな…

とりあえず、IE5でもできてるよって人いらっしゃいますか？

42 ：Name_Not_Found：2005/04/11(月) 18:20:14 ID:???

>>32
バグかどうかの検証はバグ辞典スレでやればいいとして
文書構造は変わるが↓のようにすればIE互換/Firefoxでも固定されてるように見えた

html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
overflow: hidden;
}
#main {
width: 100%; height: 100%;
position: absolute;
left: 0; top: 0;
overflow: auto;
}
#fixed {
background-color: #6ff;
position: absolute;
left: 300px; top: 200px;
z-index: 100;
}

<body>
<div id="fixed">Hello, fixed world!!</div>
<div id="main">
...
</div>
</body>

43 ：Name_Not_Found：2005/04/12(火) 11:02:06 ID:???

<div class="a">
<dl>
<dt><h2><img src=""></h2></dt>
<dd><p>文句あんのか？このやろう！</p></dd>
</dl>
</div>

この記述ってやばい？

44 ：Name_Not_Found：2005/04/12(火) 11:31:15 ID:nczcRCBK

>>43
やばい。
http://www.parkcity.ne.jp/~chaichan/src/el_def.htm

45 ：Name_Not_Found：2005/04/12(火) 11:32:35 ID:???

ヤクイな。って言うかスレ違いだな。

46 ：Name_Not_Found：2005/04/12(火) 12:34:27 ID:ijtnHDgc

質問です
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<style>
div{background-color:#666; width:50%; padding:1em;}
</style>

<body>
<div>
<img src="tesuto.gif" width="400" height="300">
<p>文字文字</p>
</div>
</body>
</html>

以上のような記載のときに、ブラウザの画面を狭くしても、
divの中に画像を納めておくことができません。
（画像だけがはみ出してしまいます。
　IEは、バグでdivが画像に合わせてに広がるのですが）
それをtableタグを使わずに表示させたいのですが、
できるのでしょうか？

47 ：Name_Not_Found：2005/04/12(火) 14:04:41 ID:???

>>46
min-width

48 ：Name_Not_Found：2005/04/12(火) 15:10:02 ID:???

文字の一つを画像にして、他の文字と同様に表示したいと思っています。
(文字の一部がデザインされている特殊なものです)
文章中にその画像を挟むと、文字サイズ（12pxで固定）と同じサイズを指定してあるにもかかわらず、
高さが大きく取られて文字より少し上に表示されてしまうのですが、
どうやって位置を合わせたらいいのでしょうか？

49 ：Name_Not_Found：2005/04/12(火) 15:23:56 ID:???

その画像のサイズは？

50 ：Name_Not_Found：2005/04/12(火) 15:32:02 ID:???

12pxX12pxです。

51 ：Name_Not_Found：2005/04/12(火) 15:40:21 ID:???

cssではないが、imgに align="absbottom" かな？

52 ：Name_Not_Found：2005/04/12(火) 15:44:25 ID:???

img {vertical-align: bottom;}

53 ：Name_Not_Found：2005/04/12(火) 15:48:20 ID:???

あ、それだけのことでしたか。
変なところにはまってしまってました。
positionでtopから間を取ってみたり…orz
ありがとうございます。

54 ：46：2005/04/12(火) 15:53:48 ID:???

>>47
ありがとうございます！
Win+（Opera,NN,FireFox）で確認できました。

55 ：Name_Not_Found：2005/04/13(水) 03:00:15 ID:???

>>41
IE5のバグだそうな。
ttp://adp.daa.jp/archives/000378.htmlによるとpaddingを使うことで回避できるらしい。
試しに背景色だけでやってみたらIE5でもできた。

ul { float:right; border: 1px solid; margin: 0; padding: 0; }
li { display: block; width: 5em; float: left; overflow: hidden; margin: 0; padding: 0; }
a { display: block; padding-left: 100%; background-color: #ff6; text-decoration: none; border: 1px solid #f00 /* 確認のため */; }
a:hover { background-color: #6ff; }

<ul>
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
<li><a href="#3">Three</a></li>
</ul>

56 ：Name_Not_Found：2005/04/13(水) 03:26:37 ID:???

Mac SafariはCSSをどの程度正しい解釈でレンダリングしてくれるんでしょうか？

オーサリング時確認にSafariでやっているもので…

57 ：Name_Not_Found：2005/04/13(水) 19:06:30 ID:Jy3XNdyq

<div1>
<div2>
<div3>
<div4>
<div5>
<div6>

という六つの項目を、flortを使って

<div1><div2><div3>
<div4><div5><div6>

という並びにして、コンテンツ全体にdiv.contentsをさらに被せて、背景を変える場合、一番下までdiv.contents
が伸びてきません。div6の続きで、clear：leftさせた内容を書き込むとボックスが伸びてくるんですが、内容的に
div6で終わりなので、何とかしたいんですが、どうしたらよいでしょうか？？？ｈｒとかｂｒだとfirefoxやネスケ
なんかだと、clearが効きません。

58 ：Name_Not_Found：2005/04/13(水) 19:54:22 ID:???

>>57
div.contentsの後に<div7>(仮)を作って
div7{clear:left;display:none;}
でOK！

59 ：Name_Not_Found：2005/04/13(水) 20:58:32 ID:???

>>57
div.contents:after{
content:"";
display:block;
clear:left;
}

>>58
display:noneでclearされるなら、それはバグ

60 ：Name_Not_Found：2005/04/13(水) 21:28:21 ID:???

ブロック要素を中央に配置したい時にはどうすればいいんでしょう？

61 ：Name_Not_Found：2005/04/13(水) 21:29:32 ID:???

>>60
>>6

62 ：Name_Not_Found：2005/04/14(木) 02:00:06 ID:???

>>57
div.contents { width: 100%; overflow: hidden; }
とかも。

63 ：Name_Not_Found：2005/04/14(木) 11:42:37 ID:???

.boxl265 { margin: 0 0 0 0; padding: 0 10px 0 0; width: 265px; float: left }
.boxr265 { margin: 0; padding: 0 0 0 10px; width: 265px; float: right }

<div class="boxl265">あ</div>
<div class="boxr265">う</div>
<table width="550">
ああああああああああああああああああああ
</table>

これをするとboxlの右にboxrだけでなく、
テーブルまでが回り込んでしまいます。
回り込まないようにする方法はありませんか？

64 ：Name_Not_Found：2005/04/14(木) 11:54:33 ID:???

clear

65 ：Name_Not_Found：2005/04/14(木) 12:06:42 ID:wUtoprO8

とあるレンタル鯖で、index.htmlの<body>内に
<iframe>で広告が上部の真ん中につくのですが、
cssで右に寄せるにはどうしたらよいでしょうか

66 ：Name_Not_Found：2005/04/14(木) 12:18:12 ID:Tm9Hg4E/

http://cssbug.at.infoseek.co.jp/detail/winie/b043.html
ここに記載されている、WinIE6で「left,top,right,bottomを指定しても無視される」バグ
なんですが、これを回避する方法はないでしょうか？

ボックスをリキッドにしたく、leftとrightを指定しているのですが、やはりwidthを指定して
あげる方法しか現状はないのかな。

67 ：Help：2005/04/14(木) 13:19:09 ID:i+HgS6FL

divをすごく小さな高さで使いたいんです。

div要素に対してheight: 10px
こんなふうに指定しても10pxの高さになってくれません。
たぶん15pxくらいが高さの限界になってるんですが
これって解除する方法ありませんか？

68 ：Name_Not_Found：2005/04/14(木) 13:27:42 ID:???

ブラウザのデフォのパディングが有るんじゃないの？

69 ：Name_Not_Found：2005/04/14(木) 13:28:15 ID:???

どういう用途に使うのかが分からん

70 ：Name_Not_Found：2005/04/14(木) 13:30:16 ID:???

>>67 >divをすごく小さな高さで使いたいんです。

それが最適な方法かどうか疑問を感じるのはわしだけだろうか？

71 ：Name_Not_Found：2005/04/14(木) 13:33:50 ID:???

line-heightだろ、多分。>>67

72 ：Name_Not_Found：2005/04/14(木) 13:59:08 ID:???

<hr>を左に寄せたいのですが、text-align:left;だと、IEでは反応してくれるのですが、
Firefoxでは反応してくれません。

他に寄せる方法ってありませんか？

73 ：67：2005/04/14(木) 14:00:51 ID:???

line-heightでも無理でした。
Macとか他の環境だとheight: 10pxでいけたんだけど
肝心のWinIEが・・・。

デザインの一部として色付きの小さな正方形として使いたかったのです。

74 ：Name_Not_Found：2005/04/14(木) 14:08:07 ID:???

>>72
>>6

75 ：Name_Not_Found：2005/04/14(木) 14:14:11 ID:???

デザインの為の空divかー？画像でやれよ

76 ：67：2005/04/14(木) 14:25:59 ID:???

がーん。やっぱり無理があるのかぁ・・・

77 ：Name_Not_Found：2005/04/14(木) 15:06:51 ID:???

dl{ margin: 0; padding: 0 }
dt{ margin: 0; padding: 0; width: 60px; float: left }
dd{ margin: 0 0 0 60px; padding: 0 }

<dl>
<dt>※1</dt>
<dd>あああああああああああああああああああああああああああ</dd>
</dl>

cssで疑似テーブルをつくってみたのですが
IE６だと「ああああ...」が2段になった時
なぜか先頭が揃いません。
FFだと問題はありません。
解決策を教えろおまえら。
お願いします。

78 ：Name_Not_Found：2005/04/14(木) 15:55:09 ID:???

>>76
無理があるって訳でも無いだろうが、それは画像の方が良いような。

で、ウチのFirefoxではコレで動いたよ。
div.m {
background-color:#f00;
width:10px;
height:10px;
}

ちなみにIE6だったら勝手に文字の大きさ分拡張しやがるから
font-size:0 にしたら行けると思うよ。

79 ：67：2005/04/14(木) 16:28:13 ID:???

>>78
うわー！font-size:0にしたらできました！！！！
すごいうれしい。ありがとうございます！

80 ：Name_Not_Found：2005/04/14(木) 16:36:15 ID:???

>>77
これか？
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html

81 ：Name_Not_Found：2005/04/14(木) 16:37:41 ID:???

>>79　そんな無法なＨＴＭＬソース書いて、喜んでるんぢゃないっ！

82 ：Name_Not_Found：2005/04/14(木) 16:52:56 ID:???

>>81
横やりで申し訳ないけど、
HTMLソースじゃなくてスタイルシートだし、
マメ文字書いているわけでもないので、そんなに無法でも無いと思った。

83 ：Name_Not_Found：2005/04/14(木) 17:26:51 ID:???

空のdivを書くのが無法なHTMLソースでないのかね。

84 ：Name_Not_Found：2005/04/14(木) 17:49:46 ID:???

HTML的にイクナイのは皆すでに言ってるんだし
ここはHTMLスレじゃないんだからさ。

俺は、>>79 の無邪気さと、>>81 のツッコミが妙にほほえましく見えた。
そこで終わっとけｗ

85 ：Name_Not_Found：2005/04/14(木) 18:02:39 ID:PGbQGu+H

ttp://www.kabu-sanko.jp/
こんな感じにサイトに影を表示させるにはどうしたらいいんでしょうか？

86 ：Name_Not_Found：2005/04/14(木) 18:13:26 ID:???

横並び三段組のボックス要素があります。真ん中の内容は、更新とともに増えていくので、
overflowでスクロールさせて、適度な高さに抑えたいのですが、ブラウザで文字の大きさを変えるとき、
左右のボックスが伸縮するので、真ん中の要素の高さをピクセル固定することはできません。
これを、左右のボックスの高さが高いほうに追従させる方法はないでしょうか？？？

87 ：Name_Not_Found：2005/04/14(木) 18:14:40 ID:???

>>85
ただの背景画像だと思うが？

88 ：Name_Not_Found：2005/04/14(木) 18:29:21 ID:???

>>85

CSS
http://www.kabu-sanko.jp/sauce/main.css

背景画像
http://www.kabu-sanko.jp/images/bg.gif

89 ：Name_Not_Found：2005/04/14(木) 21:15:41 ID:???

誰が見てもあれは影です。写真じゃありません！
バカにしてるんですか？！もういいです

90 ：Name_Not_Found：2005/04/14(木) 21:21:04 ID:???

　　　　∩＿＿＿∩
　　　　| ノ　　　　　ヽ-'''''';、その、なんだ、クマもイチイチ餌に食いついてる程暇じゃない訳よ
　 ,,.....-|　　●　　　● |　　）
”” ;　　|　　　　( _●_)　ミ　　　　　§
　 ;;　　彡､　　　|∪|　　､｀＼＿_===・
　;　　/　＿＿　ヽノ　/´　――┴;;
　;　　(＿＿＿）　　　 |　　―――'"
　￣￣￣￣￣）　,,..-'''⌒;,　　　/
　￣￣￣￣／　　　 ,,..-.';;-'　｜
　　　　　　　（　　,,...-''";;.,　";,..-'"
　　　　　　　|"””　　 _,.-|;　 ;|
　　　　　　　|_,,...--''" 　"'-''"

91 ：Name_Not_Found：2005/04/15(金) 00:56:53 ID:???

>>89
でもそんな貴方が好きです

92 ：Name_Not_Found：2005/04/15(金) 02:29:01 ID:rr7N62oe

h3{
height : 50px;
}
とかって指定してあるH3を、50pxの高さの中心にテキストを持ってきたいのですが
なにか良い方法はないでしょうか？
paddingを合わせて指定すると、高さがずれてしまいます。

93 ：86：2005/04/15(金) 02:33:21 ID:zczmi9hy

>>86にレスお願いします

94 ：Name_Not_Found：2005/04/15(金) 07:52:28 ID:???

>>92
h3 { height: 50px; line-height: 50px; }
1行に収める必要があるけど、見出しだしおｋだよね。

>>93
あなたの考えが理解できないのだけれど、質問に答えるなら
CSS だけじゃ無理だろうね。

<div />
<div class="container">
　<div class="main" />
　<div class="sub" />
</div>

例えば上のようにマークアップして .container の背景等を工夫すれば
.main と .sub の見た目の高さをそろえることは簡単だけど。

95 ：Name_Not_Found：2005/04/15(金) 09:05:02 ID:???

>>86　「ピクセル固定」はよくない。emか%の相対指定にしておけ。

96 ：85：2005/04/15(金) 14:10:05 ID:???

画像以外の方法は無いのでしょうか？
なんとなく背景画像を使いたくないだけの理由なんですけど・・・

97 ：Name_Not_Found：2005/04/15(金) 17:03:57 ID:???

>>94
<div /> の最後の”/”は何ですか？

98 ：Name_Not_Found：2005/04/15(金) 17:09:50 ID:???

>>97
<div /> = <div></div>
例だから要素の中身を省略しただけだろ。

99 ：Name_Not_Found：2005/04/15(金) 17:14:35 ID:???

>>96
IEオンリーで良ければ、
filter: shadow()
ってのもあるにはあるが‥‥。

100 ：Name_Not_Found：2005/04/15(金) 17:21:05 ID:???

100

101 ：Name_Not_Found：2005/04/15(金) 18:20:02 ID:???

>>96 >85
　このへんで勉強すれば出来るよ。

http://www.stunicholls.myby.co.uk/menu/shadow.html

102 ：Name_Not_Found：2005/04/15(金) 18:44:51 ID:???

>>101
これはすごいな。
参考にしたらまずいんじゃないの？ｗ

103 ：Name_Not_Found：2005/04/15(金) 20:12:22 ID:???

参考≠パクリ

104 ：Name_Not_Found：2005/04/15(金) 20:47:38 ID:???

スタイルシートをWEB上でユーザーに好きに編集させたいと考えております。
この場合にセキリティーホールとなる文字などはあるのでしょうか？。
編集させるスタイルシートはCSSファイルとしSRCで読み込む予定です。

105 ：94：2005/04/15(金) 22:51:12 ID:???

>>98
サンクス。

106 ：92：2005/04/15(金) 23:23:54 ID:???

>>94
す、すげぇ。こんな方法考えつかなかった。
ありがとです！すごい助かりました。
display:table-cell;とか、そんなんしか思いつかなかった。

107 ：Name_Not_Found：2005/04/16(土) 17:08:28 ID:LGVlVviM

cssファイルを作ってサイト全体に適用させているのですが･･･

a:link{
font-size:12px;
color:#ff0033;
}

a:visited{
font-size:12px;
color:#ff6633;
}

a:hover{
font-size:12px;
color:#cc3366;
}

a:active{
font-size:12px;
color:#cc3366;
}

と
table {
color:#9696FF;
font-size:16px;
text-align:center;
}

のように指定しているのですが･･･
テーブル内でのリンクだけ、フォントサイズなどを変更するにはどうすればいいですか？

108 ：Name_Not_Found：2005/04/16(土) 17:24:07 ID:JcSSXZAr

table a {
font-size:16px;
}

109 ：Name_Not_Found：2005/04/16(土) 17:28:55 ID:JcSSXZAr

ついでにaの部分は以下の記述にすれば短くなる。
a {
font-size:12px;
}

a:link {
color:#F03;
}
a:visited {
color:#F63;
}
a:hover, a:active {
color:#C36;
}

110 ：Name_Not_Found：2005/04/16(土) 17:31:55 ID:7L74FId6

>107
table a:link
{font-size:@px;}
これでいいのでは？

質問させてください。
XHTML 1.0 Strictを使用です。

<ol>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
・・・
</ol>

でli要素が20個あります。floatを使って縦に5、横に4としたいのですが
番号は連番のまま表示させたいです。
divで囲みstartで番号指定の方法しか思いつかないのですが
Strictでは非推奨となっています。
最悪、Transitionalでいこうと思っているのですが・・・

何かいい方法はありませんでしょうか？

111 ：Name_Not_Found：2005/04/16(土) 17:36:47 ID:???

そういうのを「表」という。　ﾃｰﾌﾞﾙ使いなされ。

112 ：110：2005/04/16(土) 17:42:39 ID:7L74FId6

>111
そうします。ありがとうございました。

113 ：Name_Not_Found：2005/04/16(土) 18:05:52 ID:???

>>11
■ ローカルルール等リンク先更新総合スレッド 13
http://qb5.2ch.net/test/read.cgi/operate/1106260567/729-

114 ：107：2005/04/16(土) 18:08:23 ID:LGVlVviM

レスありがとうございます。
cssファイルに
table a {
font-size:16px;
}
を追加したのですが、やはりフォントサイズが変わりません･･･
htmlの方のタグもこのように記述しているのですが、どこに原因があるのでしょうか？

<html>
<head>
<title>Menu</title>
<link rel=stylesheet type=text/css href=style01.css>
</head>
<body>
<table border=3 bordercolor="black">
<tr>
<td width=90><a href="top.html" target="bottom">TOP</a></td>
</tr>
</table>
</body>
</html>

115 ：Name_Not_Found：2005/04/16(土) 18:35:12 ID:???

ブログのサイドバーを、カテゴリやエントリのブロック別に
リストのアイコンを変えたいと思っています。
HTML
<div class="linktitle">RECENT ENTRIES</div>
<div class="linktext">
<ul>
　　　　　　　<li>aaa</li>
</ul></div>
CSS
.linktext ul{ list-style-type: none;}
.linktext li { list-style-type: none;}

いろいろ調べて、
#icon{ list-style-image:url("bbbb");}

<ul id="icon">

という感じで指定しようとしたのですが、反映されません。
どこかまちがっている気もして、あれこれやってみたのですが、
うまくいきません。url()の部分、記述がまちがっているのでしょうか。
よろしくお願いいたします。

116 ：Name_Not_Found：2005/04/16(土) 19:25:31 ID:???

>url()の部分、記述がまちがっているのでしょうか。

つったって省略で書かれてたら解らんがな。

li .linktext{ list-style-image:url(*******);}

117 ：Name_Not_Found：2005/04/16(土) 19:50:41 ID:???

>>116
あ、urlを”http://.........gif”
と括っているんですが、'.......'なのか、
どちらもいらなくて（）だけでいいのか、わからなかったんです。

すみませんでした。

118 ：115：2005/04/16(土) 19:53:45 ID:???

あと、リストのアイコンを変えたいというのは、
たとえばカテゴリ部分はアイコン無し、
エントリ部分はアイコン（画像）有り、としたいのです。

119 ：107：2005/04/16(土) 20:08:08 ID:???

table a:link, a:visited, a:hover, a:active{
font-size:16px;
}

と記述することで解決しました。
レス下さった方どうもありがとうございました。

120 ：Name_Not_Found：2005/04/16(土) 20:35:52 ID:???

table a:link, table a:visited, table a:hover, table a:active{

121 ：115：2005/04/16(土) 23:03:07 ID:cQpeMIM+

どうしてもできないです。うう。
－－－－－－－－－－－－－－－－
HTML
<div class="linktitle">RECENT ENTRIES</div>
<div class="linktext">
<ul>
　　　　　　　<li>aaa</li> ★1
</ul>
</div>
</div>

CSS
.linktext ul{ list-style-type: none;}
.linktext li { list-style-type: none;}
★2
－－－－－－－－－－－－－－－－－
↑以上がテンプレートの記述です。こちらで手を加えて、

★1を、<li class="***">
★2に、li.*** {list-style-image:url(ファイルのurl);}

としても、全然反映されません・・・。
あきらめたほうがいいのでしょうか。

122 ：Name_Not_Found：2005/04/16(土) 23:18:07 ID:???

>>121
div要素の閉じタグがひとつ多いとかいちいちli要素にclass振るより
ul要素にlist-style-image指定したほうが楽とかいう事はおいといて、
それでうまくいきそうなものだけどな……

class名は具体的に何にしてる？ファイルのURLはあってるよね？
ほかに何かスタイルを指定している？

123 ：Name_Not_Found：2005/04/16(土) 23:19:32 ID:???

>>121
list-style-type に none (マーカーなし) 以外を指定する。
ul で指定すると上書きされない限り子孫の li にも継承する。

その状態で list-style-image に none (画像を使わない) 以外が
指定されていれば、マーカーとしてその画像が使用される。

124 ：115：2005/04/16(土) 23:42:28 ID:cQpeMIM+

レスをありがとうございます。
>>122
ul要素で指定したけど、反映されなかったんです...。
div要素の閉じタグ、テンプレートにはなかったのが、ついていました。
わたしのミスでしたorz
テンプレートでは、ほかにもスタイルをしていますが、
長くなるので関係あるところだけ、引用しました。すみません！
－－－－－－－－－－－－－－－－－
.linktext ul{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type: none;
}

.linktext li {
border-left: 5px solid #fff;
padding: 0px 0px 0px 5px;
margin: 0px 0px 5px 5px;
list-style-type: none;
}
－－－－－－－－－－－－－－－－－

ファイルのurlは合っているはず。
http://blog8.fc2.com/s/****/***.gif←こんな感じです。
管理画面で見ると、ちゃんとアップロードされていました。
class名は、iconにしてみたり、>>116を見てlinktextにしてみたり。
どれもだめだったのですが。

>>123
いちおう、121で合っているということでしょうか。
やっぱりなんかケアレスミスをしているかもしれないので、
もう一度試してみます。ありがとうございます。

125 ：Name_Not_Found：2005/04/16(土) 23:43:17 ID:???

スタイルをしています→スタイルを指定しています　訂正

126 ：Name_Not_Found：2005/04/16(土) 23:47:56 ID:???

>>123
えっと。勘違いをしていたような。

ul要素のlist-style-typeにnone以外を指定しなくてはならないということでしょうか。
その上で、li要素に、list-style-image を指定すればOKという理解でいいのでしょうか。

127 ：122：2005/04/17(日) 00:00:28 ID:???

>>115
ひょっとしてそのリストって左側の白いボーダーが
ブラウザ画面の左端ぎりぎりに来てる？
もしそうだとしたら
.linktext ul{
padding: 0px 0px 0px 0px;
を
.linktext ul{
padding: 0px 0px 0px 50px;
(左側に適当なパディングを取る)
ってするとどうなる？

128 ：Name_Not_Found：2005/04/17(日) 01:29:13 ID:???

>>127
あっ。たびたびありがとうございます！
３カラムで、全体が画面中央にあります。ブラウザの端ぎりぎりってことはないです。
全体の幅は固定で、左右auteで余白をとっているって感じのようです。

もうひとがんばりして、明日また報告にまいります。

129 ：Name_Not_Found：2005/04/17(日) 01:29:33 ID:???

>>128
115です。

130 ：Name_Not_Found：2005/04/17(日) 02:05:52 ID:???

メニュー画像をリストにする場合は、どちらのほうが良いのでしょうか？

<ul>
<li><a href=""><img src="menu1.gif" alt="aa"></a></li>
<li><a href=""><img src="menu2.gif" alt="bb"></a></li>
</ul>
************
#menu .span { display : none; }
#menu li {marign:0; padding:0; display:inline;}
#menu1 a {background: #fff url(menu1.gif) no-repeat width:105px;
height:18px;margin:0; padding:0; display:block;}

<div id="menu">
<ul>
<li id="menu1"><a href=""><span>MENU 1</span></a></li>
<li id="menu2"><a href=""><span>MENU 2</span></a></li>
</ul>

上の方が普通の方法で、画像が表示されなくてもaltが
表示されるから良いのでしょうか？
でも、スタイルシート外した時は下の方が違和感なくきれいに表示されるのですが
どちらが良いのでしょうか？

131 ：Name_Not_Found：2005/04/17(日) 08:55:01 ID:???

　なんで<span>が入るのか理解に苦しむが・・・

どちらがよいか自分で判断しなさいよ。

132 ：Name_Not_Found：2005/04/17(日) 18:13:34 ID:7M1Pda4T

すみませんちょっと聞かせてください
横に3列の３カラムのページを作ってます

左｜真ん中｜右

右のところに背景画像を使用してるのですが、高さを真ん中や左の最大値に合わせるには
どうCSSで設定すればよいのでしょうか？
blogのシステムなので真ん中は記事によって高さが変わります

よろしくお願いします

133 ：Name_Not_Found：2005/04/17(日) 18:17:55 ID:???

>>132
これ↓とかダメかい？

http://www.stunicholls.myby.co.uk/layouts/3cols.html

134 ：132：2005/04/17(日) 18:37:44 ID:???

>>133
カーソルを合わせると伸びるということですか？
せっかく答えてくれたのに希望とは違います、すみません。
真ん中の高さが右より長いときも、その高さに合わせて背景画像が表示されてほしいのです

135 ：Name_Not_Found：2005/04/17(日) 18:43:49 ID:???

本質を理解してないな。　
っと、だから質問か？　ｽﾏｿ

136 ：Name_Not_Found：2005/04/17(日) 18:53:36 ID:???

>>135
すみません
意図した答えに全然気がつきませんorz

137 ：Name_Not_Found：2005/04/17(日) 19:34:11 ID:???

横レスだけど、どこにカーソル当てても左・真中・右の一番長いやつに全体の長さが揃えられてるだろう？カーソルを合わせると伸びる部分は無視したらいいのさ。

138 ：Name_Not_Found：2005/04/17(日) 19:39:17 ID:???

>>133の紹介してくれたやつはやり方としては面白いが
ボーダーの色を使って左右のボックスの背景色を表現しているため
>>132の「高さに合わせて背景画像が」というのはちょっと厳しいかな。

139 ：Name_Not_Found：2005/04/17(日) 19:43:28 ID:4RT54/rP

>>133
俺は132ではないですが、まったく同じことで悩んでいたのですが、ソースを見るとcontainerのborderを200ｐｘにして、innerのマージンを-200
にしている意味が分かりませんあと、posissionをrelativeにしている意味も。意味を分かってつかいたいので、ソースまるパクリはしたくないのです。教えていただけないでしょうか？？
あと、display：blockにしていますが、もともとblockじゃないのですか？？？？

140 ：132：2005/04/17(日) 19:47:28 ID:???

>>137
すみせん、やってみて希望には近かったんですが>>138で言われてることが
やりたいためできませんでした。

テーブルを使ってしまえば簡単に解決できるんですが、javascriptで右カラムの表示、非表示を選べるようにしてるので
CSSでなんとかならないものかと思い質問した次第です

141 ：132：2005/04/17(日) 20:18:19 ID:???

かなり強引に解決できました
ご教授してくださった方ありがとう

方法としては右だけでなく全体に背景画像を指定
真ん中のカラムを右の想定済みの高さに指定したのですが
これだと真ん中の記事が長くなったときIE以外で表示がおかしくなるため
基本のCSSにはmin-heightで想定済みの高さ指定
IE用には
<!--[if IE 6]> これを使用してIE用のCSS（こちらはただ単にheightで指定）を読ませるようにしました

142 ：132：2005/04/17(日) 20:20:54 ID:???

書き忘れです
真ん中のカラムには背景色を指定しました

143 ：Name_Not_Found：2005/04/17(日) 21:01:06 ID:???

あ、遅かったかな?
http://www6.plala.or.jp/go_west/nextcss/tip/htm2css/atmarkit.htm
の段組が応用できる、かも。

144 ：132：2005/04/17(日) 22:14:37 ID:???

>>143
これも参考になりそうです
私がやった解決策よりスマートな方法を考えてみます

145 ：115：2005/04/18(月) 02:35:29 ID:OSw7jVr7

昨夜リストのことでご相談したものです。
>>115で合っていました。ファイルのurlがまちがっていました・・・。

で、正確なurlを記述しても、アイコン画像が切れていて全部表示されませんでした。
>>124の指定がそのまま引き継がれていたので、
li.icon　のところでマージンとパディングを調整して、きちんと表示されるようになりました。

助言をくださった方々、ありがとうございました！

146 ：115：2005/04/18(月) 02:37:17 ID:OSw7jVr7

あ。訂正です！
>>115じゃないです、>>121で合っていました。

147 ：kk：2005/04/18(月) 17:56:47 ID:B7rnCixY

質問なんですが、
IE6.0でborderが正しくレンダリングされない時あるのですが、
これはよくある事例なのでしょうか？また、対処法がありましたら宜しくお願いします。
画面をスクロールすると正しく表示されるのですが。。。

また、<li>要素内に<ul>要素を記述するとIEでおかしな動作をすることが
あるのですが、皆さんも同じようなバグ起こりますか？

148 ：kk：2005/04/18(月) 19:18:22 ID:B7rnCixY

>質問なんですが、
>IE6.0でborderが正しくレンダリングされない時あるのですが、
>これはよくある事例なのでしょうか？また、対処法がありましたら宜しくお願いします。
>画面をスクロールすると正しく表示されるのですが。。。
-----------------------------------------------------------------------
親要素にposition:relativeを指定したら、何故か解決しました。
お騒がせいたしました。

149 ：Name_Not_Found：2005/04/18(月) 23:37:02 ID:???

<hn>タグの強制改行を排除することって不可能ですか？
サイトメニューの段組に入れようかと思ってるのだけどレイアウト的に改行されると困って…無理そうならテーブルにしちゃいますが。

150 ：Name_Not_Found：2005/04/18(月) 23:48:09 ID:???

>>149
普通に style="display:inline;" でいけるでしょ。
見てわからないようなら「ブロック要素」でググること。

151 ：149：2005/04/19(火) 00:01:50 ID:???

>>150
ありがとう、やってみます。
CSS項目多くて知らないこと多いなぁ。。。

152 ：Name_Not_Found：2005/04/19(火) 00:09:14 ID:???

スレ違いかもしれませんが
expression()や:before,:afterのスタイル設定について
詳しく述べられている解説サイトを教えてください。
ググッても触りくらいしか見れませんでしたので…

153 ：Name_Not_Found：2005/04/19(火) 00:16:31 ID:???

expression
ttp://useyan.x0.com/s/html/expression/

before after は自分で探してください。山のようにあるはず。
ていうかexpressionも検索してすぐ見つかったし。

154 ：Name_Not_Found：2005/04/19(火) 00:29:54 ID:???

>>153
詳しく述べられているサイトです。
このコマンドでこうなるよみたいなところです。
サンプルというか実演みたいなものがあるサイトです。

155 ：Name_Not_Found：2005/04/19(火) 01:02:44 ID:???

>>154
>>153 のところに、事細かにサンプルや実演付けて書いてあるがな(´･ω･`)

156 ：155：2005/04/19(火) 01:03:39 ID:???

あ、あとMSDNにもきっとあるはず。確かめてないけど。

157 ：Name_Not_Found：2005/04/19(火) 14:31:08 ID:???

リンクのhover時にのみ下線を出すようにCSSを指定したのですが、sfari、Mac版IEだと
下線を表してくれません。Netscape6では下線を表示するので、書き方自体間違ってるわけでないと
思うのですが…。Mac版のsafari、IEの固有の癖のような物なのでしょうか?

a:link {
color: 003399;
text-decoration: none;
}
a:visited {
color: 333333;
text-decoration: none;
}
a:hover {
color: 660000;
text-decoration: underline;
}
a:active {
color: 336633;
text-decoration: none;
}

158 ：Name_Not_Found：2005/04/19(火) 15:05:08 ID:???

>>157
そうっぽい。バグ辞典みてみ。

159 ：Name_Not_Found：2005/04/19(火) 16:10:48 ID:???

IEって何でBOXの下にすきまとかできるわけ？
FFではできないのに。

160 ：157：2005/04/19(火) 16:17:00 ID:???

>>158
どうもそうみたいっぽいですね。hoverした時に下線ってのもなんか変な感じなんで、
この方法自体ボツろうと思います。

161 ：Name_Not_Found：2005/04/19(火) 20:31:36 ID:bs6N0KcC

expression()てXHTMLでないと効かないものなんでしょうか？

162 ：Name_Not_Found：2005/04/19(火) 21:46:59 ID:???

>>159
IEはバグだらけだから。間違ってるから。

163 ：Name_Not_Found：2005/04/19(火) 22:28:38 ID:???

>>159
具体的にどんな風に書いたら、どんなすきまができたのかを書いてくれると、
対処法がわかもしれないし、ガイシュツかどうかもわかると思った。

164 ：Name_Not_Found：2005/04/20(水) 07:11:27 ID:???

cssを勉強しても結局トップページをフラッシュで作るという罠

165 ：Name_Not_Found：2005/04/20(水) 15:16:39 ID:???

疑問なんですが、ＩＥって、行間の幅が
指定より狭く表示されてしまうのでしょうか？

あと、同じく、他のブラウザでは指定通り「ＭＳゴシック」で表示されるのに、
ＩＥでは「ＭＳ　Ｐゴシック」で表示されるのは、なぜなんでしょう？

なんとかがんがれば、ＩＥでもちゃんと表示されるのでしょうか。

166 ：Name_Not_Found：2005/04/20(水) 15:22:41 ID:???

いま、他のサイトを調べてみたら、
ＩＥでも他のブラウザでも変わらず表示されるサイトと、
微妙にちがって表示されるサイトとある。
ってことは、ちゃんと表示できるってことですな。

うー、むずい。

167 ：Name_Not_Found：2005/04/20(水) 15:27:59 ID:???

取りあえず、ソース出せ。

168 ：Name_Not_Found：2005/04/20(水) 19:22:51 ID:???

>>157
そういうときは
hoverもtext-decoration: none; に指定して
border-bottomで改めて指定するのが普通じゃない？

っつーか、何でそうするのが普通なのか
いま初めて理由を知った…。

169 ：165：2005/04/20(水) 19:42:44 ID:???

>>167
.entry_body {
font-size: 12px;
line-height: 150%;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", Osaka‐等幅;
margin: 8px 10px 5px 10px;
}

こんな感じです。
じつはこれテンプレのままで、Ｖｅｒとかヒラギノとか、？です。
削るべき？

170 ：165：2005/04/20(水) 19:48:36 ID:???

>>169
> Verdana, "ヒラギノ角ゴ Pro W3"
ぐぐったら、どんなものかわかりました。

171 ：Name_Not_Found：2005/04/20(水) 19:51:58 ID:???

MSGothic じゃねーの？

172 ：Name_Not_Found：2005/04/20(水) 23:23:52 ID:???

firefox質問スレからの誘導されてきました。
昨日firefox導入して、スタイルシートに興味を持ちました。
全くの素人なので、まずはこちらでフォント指定をするところから始めようと思うのですが
どのような書式を書けばよいのでしょうか?

173 ：Name_Not_Found：2005/04/21(木) 00:01:49 ID:???

ったく、ｵﾏｲって奴は・・・

174 ：Name_Not_Found：2005/04/21(木) 00:19:12 ID:???

>>172
自分で勉強が基本。　↓ここで勉強をして解らなかったらまたおいで。

　http://kanzaki.com/docs/html/htminfo17.html

175 ：Name_Not_Found：2005/04/21(木) 00:55:26 ID:???

classとidってどんな風に使い分けるんですか？
classしか使ってないんですけど・・・

176 ：Name_Not_Found：2005/04/21(木) 02:16:35 ID:???

>>175
idは要素の識別子として。
classは要素のグループ化みたいな感じで。

スタイルシートのためだけにあるものではないので、好きに使っていいです。

177 ：Name_Not_Found：2005/04/21(木) 04:27:34 ID:md31mkJp

IEは閲覧側で最大、大、中、小、最小の
５段階にフォントサイズを変更することができます。

そこで質問があります。
最大と最小に切り替えた時の表示サイズの差が
最も小さい単位を教えてください。

例> {font-size:1em;}(単位em)にすると
最大と最小で数十倍の差が生まれます。
この差をできる限り減らしたいのです。
かと言ってpxなどの固定にはしたくないんです。
ワガママな話しだとは思いますが教えてください。

178 ：Name_Not_Found：2005/04/21(木) 04:29:26 ID:???

わがままだなあ。

179 ：Name_Not_Found：2005/04/21(木) 04:31:58 ID:???

全部試してみりゃいーじゃん？

180 ：Name_Not_Found：2005/04/21(木) 04:42:20 ID:piBCzWHa

>>177
文字サイズ変更インタフェイスを自前で用意しる。

181 ：Name_Not_Found：2005/04/21(木) 06:06:27 ID:mfzufkzG

このスレのおかげでやっとＴＡＢＬＥを卒業できそうです

182 ：Name_Not_Found：2005/04/21(木) 06:42:54 ID:???

スタイルシートなんてタグ使いこなせない奴が使うだけだろ（ ´,_ゝ｀）

183 ：Name_Not_Found：2005/04/21(木) 06:54:11 ID:???

>>182
お前も俺も、早起きで偉いな。
次の質問、ドゾー

184 ：Name_Not_Found：2005/04/21(木) 07:04:12 ID:???

divは幾つ入れ子してもおｋですか？

185 ：Name_Not_Found：2005/04/21(木) 07:08:05 ID:???

>>184
tableと同じでたくさん使えば使うほど括弧(･∀･)ｲｲぞ

186 ：Name_Not_Found：2005/04/21(木) 07:11:34 ID:???

サイト作りはエレベーターだと思え、乗る人が少なければ少ないほど重量は軽く快適になる
ソース評価で100点取るようなサイトが完璧だと思うな
あれは作り手のエゴだ、見るほうの立場になっていない
見るほうの立場にたてば、点数なんかよりサイトの軽さ見やすさのほうが重要だ

187 ：Name_Not_Found：2005/04/21(木) 07:22:05 ID:???

floatってimgに使うものですか？
divに使ってもおｋですか？

188 ：Name_Not_Found：2005/04/21(木) 07:25:01 ID:???

188です・・・

スタイルシート188

ウェブデザイナーになった気がするとです・・・

188です・・・

189 ：Name_Not_Found：2005/04/21(木) 09:01:18 ID:???

>>187
おｋ。widthを明示してから使うと吉かも。

190 ：187：2005/04/21(木) 09:07:23 ID:???

>>189さん
さんくすであります。

191 ：Name_Not_Found：2005/04/21(木) 11:06:47 ID:2X6eLl4b

テキストリンクのロールオーバーをCSSでやってるのですが、PADDING-TOPがIE6.0では効いてくれないみたいです。
#nav A {
TEXT-DECORATION: none;
PADDING: 4px 10px;
}
.nav01 {
display: inline;
font-size: 12px;
font-weight: bold;
}
.nav01 A {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
margin: 1px;
}
.nav01 A:link {
COLOR: white;
BACKGROUND-COLOR: #003366;
}
.nav01 A:visited {
COLOR: white;
BACKGROUND-COLOR: #003366;
}
.nav01 A:hover {
COLOR: #003366;
BACKGROUND-COLOR: #6699FF;
}

192 ：Name_Not_Found：2005/04/21(木) 11:07:17 ID:2X6eLl4b

HTMLはこれ

<div id="nav">
<div class="nav01"><a href="#">メニュー1</a></div>
<div class="nav01"><a href="#">メニュー2</a></div>
<div class="nav01"><a href="#">メニュー3</a></div>
<div class="nav01"><a href="#">メニュー4</a></div>
</div>

アドバイスください。

193 ：Name_Not_Found：2005/04/21(木) 12:04:03 ID:2X6eLl4b

自己解決
liで書きなおしました

194 ：Name_Not_Found：2005/04/21(木) 19:12:46 ID:???

Firefox や Opera では、左サイドバーの位置がうまく表示されますが、
IE では、右に寄りすぎてしまいます。
また、IE で重ならないように表示させると、
Firefox や Opera では、きれいになりません。
解決法があれば、教えていただけるとうれしいです。
http://blog.livedoor.jp/tanahata/

195 ：Name_Not_Found：2005/04/21(木) 19:22:04 ID:???

>>194
MSIEはfloatにnone以外の値を入れると、marginの値が倍付けになるバグ。

196 ：Name_Not_Found：2005/04/21(木) 20:19:38 ID:???

>>194
子セレクタや属性セレクタを使って上書きしてやるとか。
例えば、
body>div.classname とか
div[class~="classname"]
みたいな感じにすれば Win IE はブロックごと無視する。
演算子の間にスペースを入れるとうまく動作しないので注意。

197 ：Name_Not_Found：2005/04/21(木) 22:00:35 ID:???

>>195
>>196
ありがとうございます。
参考にして書き換えてみました。
ただ、id 属性を class に書き換えてしまったのが残念です。
もう少しスマートな方法があれば探してみます。

198 ：Name_Not_Found：2005/04/21(木) 22:42:15 ID:???

idで書けばいいじゃないか。
body>div#hoge
div[id="hoge"]
2番目のはIDセレクタではないので!importantわすれずに

199 ：Name_Not_Found：2005/04/21(木) 23:03:40 ID:???

改行を使わずにテキストエリアの禁則処理を無効にするにはどうすればいいんでしょうか

200 ：Name_Not_Found：2005/04/21(木) 23:10:47 ID:???

>>198
丁寧にありがとう。
id では上書きされない、と思っていたけれど、
!important を使えばよかったのですね。
うっかりしていました。

201 ：昔の人：2005/04/21(木) 23:21:55 ID:???

>>194-195
これですね。
http://cssbug.at.infoseek.co.jp/detail/winie/b107.html

ＩＥ對策にはアンダーバー・ハックで如何でせう。
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
>この不具合を使用すると、WinIEだけに特定のスタイル指定を適用させることができます。

202 ：Name_Not_Found：2005/04/21(木) 23:29:54 ID:???

>>201
その方法もシンプルでいいですね。
参考にします。

203 ：Name_Not_Found：2005/04/21(木) 23:45:43 ID:???

a:link {
color: #fff;
font-size:small;
display: block;
background-image:url("");
background-repeat:no-repeat;
width: 90px;
height: 90px;
margin-left:10px;
text-align:center;
float:left;
}

このような書き方をした際に、
文字をボックスの縦方向の中心に表示させる場合どうしたらいいでしょうか。
vertical-alignなどを試してみましたが、駄目でした・・・。
どうすればいいか、またはどこが問題かだけでもご指摘お願いします。
ごちゃごちゃしてしまっていますが、そのままの状態で載せました。
よろしくお願いします。

204 ：Name_Not_Found：2005/04/21(木) 23:47:29 ID:???

>>203
>>8

205 ：Name_Not_Found：2005/04/22(金) 00:43:50 ID:YiRpvI2g

206 ：Name_Not_Found：2005/04/22(金) 00:56:04 ID:fRs7eXSq

そのHTML書類と同じ階層

207 ：Name_Not_Found：2005/04/22(金) 01:25:54 ID:YiRpvI2g

ありが㌧。
できました。

208 ：Name_Not_Found：2005/04/22(金) 02:03:38 ID:???

<table style="border:1px;">
<tr><td>あ</td></tr>
<tr><td>あ</td></tr>
<tr><td>あ</td></tr>
</table>

こうしても外枠しかBORDERがつかないのですが
これを

<table border="1">
<tr><td>あ</td></tr>
<tr><td>あ</td></tr>
<tr><td>あ</td></tr>
</table>

のように行、列全部に表示させるにはどうしたらいいですか？

209 ：208：2005/04/22(金) 02:30:40 ID:???

できました。失礼しました。

210 ：Name_Not_Found：2005/04/22(金) 12:49:38 ID:1vFiLaMX

画像に回り込みを指定する場合に、

img { float:left; clear:left; }
解除はbr clear="left"で。

と、imgにfloatとclear両方を書いている記事があったのですが
clearをfloatと一緒に指定するのは何故でしょうか？
後続の要素でclearする場合、floatだけでいいんじゃないかと思ったんですが
一緒に指定することで何かメリットがあるのでしょうか。

211 ：Name_Not_Found：2005/04/22(金) 12:56:07 ID:???

後続の要素がimgなんだろ、若しくは馬鹿の書いた記事を信用するな馬鹿

212 ：Name_Not_Found：2005/04/22(金) 13:43:28 ID:???

>>210
┏━━┓文字文字文字文字文字文字
┃画像┃文字文字文字
┗━━┛
┏━━┓文字文字文字文字文字文字
┃画像┃文字文字文字
┗━━┛
の様な連続でのレイアウトをするときの定石デス。
┏━┓┏━┓
┃dt┃┃dd┃
┗━┛┗━┛
┏━┓┏━┓
┃dt┃┃dd┃
┗━┛┗━┛
とかも。

213 ：Name_Not_Found：2005/04/23(土) 00:37:24 ID:???

．．．ええと、、、
全然意味がわかりません。brはそのレイアウトでも絶対必要なのだからbrで必要十分な気が？？？？？？

214 ：Name_Not_Found：2005/04/23(土) 00:44:44 ID:???

絶対必要なのか?

215 ：Name_Not_Found：2005/04/23(土) 02:33:22 ID:nz6SMuve

<span>タグを2回使い
ボックスの領域を左右に並べたですが
ブラウザを小さくすると、右のボックス領域が左のボックスの下に移動してしまいます。

divタグをdisplay:inlineとして並べた時も、同じく下に移動してしまいました。

ブラウザを小さくしたときでも、ボックス領域が移動しないように固定とする
(ブラウザに横クロールバーが表示される)方法はないでしょうか？

216 ：Name_Not_Found：2005/04/23(土) 02:40:14 ID:???

自己解決しました。すみません。

217 ：215：2005/04/23(土) 02:40:39 ID:???

>>216は215です。。

218 ：Name_Not_Found：2005/04/23(土) 03:18:43 ID:???

>>217
何言ってるかわかんねぇぞ！！
どうやって解決したか書いてみろ。

219 ：Name_Not_Found：2005/04/23(土) 05:55:33 ID:???

おっきいボックスの中にメインの2つのボックスを置くとかじゃね。

220 ：Name_Not_Found：2005/04/23(土) 13:51:18 ID:???

<head>

<style>

body {background-image:url("

<script language="JavaScript">

</script>

");}
</style>

</head>

これ動くようにしてください。

221 ：Name_Not_Found：2005/04/23(土) 14:13:36 ID:???

やだよ。

222 ：Name_Not_Found：2005/04/23(土) 17:48:06 ID:???

そこをなんとかお願いしますだ

223 ：Name_Not_Found：2005/04/23(土) 18:31:50 ID:???

娘差し出すか？

224 ：Name_Not_Found：2005/04/23(土) 20:54:12 ID:???

む、むすめだけはどうかー

225 ：Name_Not_Found：2005/04/23(土) 22:51:52 ID:???

もしかして、もしかして、インラインフレーム「iframe」って、インラインなの？！

226 ：Name_Not_Found：2005/04/23(土) 22:58:32 ID:???

違うよ　アイフレーム「iframe」だからアイラインだよ　ｷﾗﾝ

227 ：Name_Not_Found：2005/04/23(土) 23:11:10 ID:???

>>225-226
良い関係フレーム「iframe」だから、両方正解

228 ：Name_Not_Found：2005/04/24(日) 10:56:10 ID:6NkjqKBA

floatについて質問です。

.left{
width: 620px; float: left;
padding: 10px 10px 0px 10px;
border-left:1px solid #000000;
border-right:1px solid #000000;
}

.right{
width: 170px; float: left;
margin: 10px 0px 0px 10px;
padding: 5px 5px 5px 5px;
border: 0px;
}

今こんな感じでfloatを使っているのですが、
これだとウィンドウのサイズを変えると
.rightがleftに回り込み出来ずに.leftの下に潜ってしまいます。
これを必ず回り込みさせたいと思っています。

親を作って、それで全てを囲もうかとも思ったのですが、
それを使うとなんとなく読み込みが遅くなるような気がして敬遠してます。
他に何か方法はないでしょうか？
よろしくお願いします。

229 ：Name_Not_Found：2005/04/24(日) 10:59:33 ID:???

なんとなく方法は無いと思います。

230 ：228：2005/04/24(日) 11:00:55 ID:6NkjqKBA

(￣□￣;)!!

231 ：Name_Not_Found：2005/04/24(日) 11:07:01 ID:???

>>228
ＦＡＱも読まずに質問するな。margin-leftでやれ。

>>229
いい加減なこと言って初心者を困らすな。知らないなら黙っとれ。

232 ：228：2005/04/24(日) 11:16:32 ID:6NkjqKBA

>>231
ありが㌧
やってみるです。

233 ：229：2005/04/24(日) 11:36:53 ID:???

ごめんちゃい

234 ：228：2005/04/24(日) 11:38:22 ID:???

margin-leftで解決しました。
お騒がせしました<(_ _)>

235 ：Name_Not_Found：2005/04/24(日) 13:36:08 ID:???

いえいえこちらこそ.com

236 ：Name_Not_Found：2005/04/24(日) 16:45:30 ID:fOmIMZKQ

フォント色が一定時間たつごとにランダムに変わるタグ教えてください

237 ：Name_Not_Found：2005/04/24(日) 16:52:02 ID:???

そんなのない。

238 ：Name_Not_Found：2005/04/24(日) 17:03:09 ID:???

>>236
なんでもタグタグ言うなぁー

239 ：Name_Not_Found：2005/04/24(日) 17:04:13 ID:???

>>238
HTMLを書くために……『タグを手打ちする』の…
『手打ちする』……ってよォ～～。

『手打ち』ってのは、わかる……スゲーよくわかる。
キーボードを指で打っているからな…。

だが、「タグを」って部分はどういう事だああ～～～っ！？
画面の中のタグが打てるかっつーのよーーーーーッ！
ナメやがってこの言葉ァ、超イラつくぜェ～～～ッ！！
タグ打ったら、画面がぶっ壊れちまうじゃあねーか！
打てるもんなら打ってみやがれってんだ！チクショーーッ。

どういう事だ！どういう事だよッ！クソッ！
タグを打つって、どういう事だッ！ナメやがってクソッ！クソッ！

240 ：Name_Not_Found：2005/04/24(日) 17:27:54 ID:kZU5PL7U

なぜ下記でエラーが出るのだろう(- -；)
img { filter: chroma(color=#ffffff); }

241 ：Name_Not_Found：2005/04/24(日) 17:31:20 ID:???

お前は、終止符を打ったり電報を打ったり手付け金を打ったりするたびに
いちいち怒ってるのか？　言語学板へ逝け。

242 ：Name_Not_Found：2005/04/24(日) 17:33:10 ID:???

>>240　
独り言はよそでやれ。質問なら、環境と、何でチェックしてエラーが出たのか述べよ。
この独自拡張が。

243 ：Name_Not_Found：2005/04/24(日) 17:48:02 ID:???

タグタグ言うなﾊﾞｶ

244 ：Name_Not_Found：2005/04/24(日) 17:49:21 ID:???

>>243
HTMLを書くた（ry

245 ：Name_Not_Found：2005/04/24(日) 20:15:31 ID:???

ギアッチョ、「クソッ」なんて言葉は使うんじゃねえっ！
俺たちが「クソッ」って言う時は、既にクソは（ry

246 ：Name_Not_Found：2005/04/24(日) 20:53:12 ID:???

>>240
フィルタは型にうるさい。colorはString型。

247 ：240：2005/04/24(日) 22:12:03 ID:kZU5PL7U

>>246
ありがとうございます。型…調べてみます。

あと一つだけ質問させてください。
p:first-line{border-bottom:1px solid red;}
上記のように記述してもボーダーが表示されない
のですがなぜでしょうか。ブラウザはIE6.0です。

248 ：Name_Not_Found：2005/04/24(日) 22:19:21 ID:???

>>247は、>>1も読めないのか？
●ブラウザによって対応していないプロパティーやバグがありますので、
　【解説など】（>>5）の対応表や「CSSバグリスト」に目を通しておきましょう。

249 ：Name_Not_Found：2005/04/25(月) 00:46:46 ID:???

cssの醍醐味はセレクタであることは感じるが、正直、全部クラス化（および子孫）でよくねぇ？

250 ：Name_Not_Found：2005/04/25(月) 01:07:06 ID:???

WinXPSP2 / Firefox1 / HTML,CSS共にUTF-8で記述

font-family;monospace;

で文字が一回り小さくなるのは仕様ですか？
IEでは100%のフォントサイズで表示されるんですが・・・。

251 ：Name_Not_Found：2005/04/25(月) 01:56:52 ID:???

IEとFirefoxとで、異なるフォントで表示されてるんでないかい。

252 ：Name_Not_Found：2005/04/25(月) 08:08:06 ID:???

>>250
フォントの設定見てみ

253 ：Name_Not_Found：2005/04/25(月) 09:30:33 ID:???

IEって

<div>...</div>
こう記述するか

<div>
...
</div>
こう記述するかで表示が変わるので困る。
本来はどうするべき？

254 ：Name_Not_Found：2005/04/25(月) 09:40:52 ID:???

body内すべて改行無しで書けばいいやん。　な？

255 ：Name_Not_Found：2005/04/25(月) 11:32:38 ID:???

やだ

256 ：Name_Not_Found：2005/04/25(月) 12:01:19 ID:???

<div
><anytag>…</anytag
><div>

ってすることはままあるな。

257 ：Name_Not_Found：2005/04/25(月) 12:54:53 ID:???

<table><tr>
<td bgcolor="#000000" onmouseover="this.style.backgroundColor='#ffffff';this.color='#000000'" onmouseout="this.style.backgroundColor='#000000';this.color='#ffffff'">
aaaa</td></tr></table>
現在こんな感じなのですが
テーブルにカーソルを合わせた時背景だけでなく同時に文字色も変えたいのですが
どの様にすれば良いのでしょうか?
スレ違い等であれば該当スレを言ってくれれば幸いです(´・ω・｀)

258 ：Name_Not_Found：2005/04/25(月) 13:16:51 ID:???

this.color

259 ：Name_Not_Found：2005/04/25(月) 13:23:00 ID:??? BE:97772494-

IFRAMEを中央にするにはどうしたらいいですか

260 ：Name_Not_Found：2005/04/25(月) 13:45:15 ID:???

FONT-FAMILY:を使用した時に、一般的なブラウザで表示される書体はなにがあるんでしょうか？
個人的に「HGP創英角ﾎﾟｯﾌﾟ体」が好きなので使いたいのですが、見れなくなるようでは意味が無いので・・・

261 ：Name_Not_Found：2005/04/25(月) 14:23:22 ID:???

MAC IE5において
表示がとまってフリーズしてしまう事態に陥りました。
フリーズするようなバグって報告されていますか？

262 ：Name_Not_Found：2005/04/25(月) 14:34:23 ID:???

>>261
いろいろ。
JavaScriptで無限ループ書いたくらいでも落ちることもあるし。
OS9は良くも悪くもシングルタスクだから、
アプリが逝くとシステムごとあぼーんしちゃうよ。

あ、input要素をポコスコ生成しても落ちた気がする。

263 ：Name_Not_Found：2005/04/25(月) 14:47:28 ID:???

>>262
ジャバスクリプトは使用していません。
インプットも使用していません。
IE5でみてフリーズ、電源切断で再起動です･･･。

ttp://weathernews.com/jp/c/
ここのようにオールCSSで作ったのです。
コーポレートサイトなので
MACで見れないとヤヴァイ･･･。
納期も近い･･･。

264 ：Name_Not_Found：2005/04/25(月) 15:42:52 ID:???

>>263
俺が見る限り、CSSの適用の時点でjavascriptを使っているように見えるのは気のせいか？

265 ：Name_Not_Found：2005/04/25(月) 15:46:35 ID:???

>納期も近い･･･。

　　土下座だな。　な？

266 ：Name_Not_Found：2005/04/25(月) 15:50:38 ID:???

>>264
ウェザーニュースはジャバスクリプト使っていますが
私は使っていません。
IEであろうとフォントサイズはピクセル指定･･･。

>>265
首つろうかな

267 ：Name_Not_Found：2005/04/25(月) 15:52:00 ID:???

>>263
問題有りそうなところ（検討つかなければ全体）をとりあえずコメントして
みて、徐々に範囲を狭めていって、問題が発生したところさぐる

という古典的デバッグ法があるので試してみれば。

268 ：Name_Not_Found：2005/04/25(月) 16:46:36 ID:???

>>263
ttp://www.macedition.com/cb/ie5macbugs/index.html

英文だけど、一通りまとまってはいる。

269 ：Name_Not_Found：2005/04/25(月) 20:32:04 ID:95xQ+qPK

>>263
MacのIE5で見たが、普通に見れたぞ。

270 ：Name_Not_Found：2005/04/25(月) 20:45:21 ID:???

ttp://www.i-mezzo.net/menu.html
の「日付別過去ログ」みたいにマウスが触れると色が変化する(リンク部分とは別に)
ってのはスタイルシートですか？
ソース見たけどjava scriptぽかったので。

分かりづらかったらすみません。

271 ：Name_Not_Found：2005/04/25(月) 21:02:24 ID:???

JSだね
CSSでもまったく同じようにできる
昔はJS使ってるサイトが多かったけど対応してないブラウザ対策だったのかな

272 ：Name_Not_Found：2005/04/25(月) 21:23:01 ID:???

java scriptですか。
CSSでのやり方を調べて、対応ブラウザの多い方使います。

273 ：Name_Not_Found：2005/04/25(月) 21:28:14 ID:???

ありがとうございました

274 ：Name_Not_Found：2005/04/25(月) 22:11:03 ID:???

IEのバグが減ればサイト作りも少し楽になるね。

Internet Explorer 7 beta 1の片鱗が明らかに～公式ブログで公表
http://internet.watch.impress.co.jp/cda/news/2005/04/25/7418.html

275 ：Name_Not_Found：2005/04/26(火) 00:29:23 ID:???

透過pngｷﾀﾜｧ*･゜ﾟ･*:.｡..｡.:*･゜（η‘∀‘)ηﾟ･*:.｡..｡.:*･゜ﾟ･*
けど、「peekaboo」バグと「guillotine」バグってなんぞ？

276 ：Name_Not_Found：2005/04/26(火) 01:14:07 ID:???

>>275
各ブラウザの寸法の取り方が統一されるということですよ。
これによりデザイナーはレイアウトがしやすくなる。

277 ：Name_Not_Found：2005/04/26(火) 01:47:40 ID:???

おおう、マージン・パディングのアレですかね。
あとは旧バージョンが死滅するのを祈るばかりか。

278 ：Name_Not_Found：2005/04/26(火) 02:04:34 ID:???

>>276-277　違ふよ。あれではない。リンク先を讀み給へ。

279 ：Name_Not_Found：2005/04/26(火) 02:17:44 ID:???

キモ…

280 ：Name_Not_Found：2005/04/26(火) 07:17:46 ID:???

IFRAMEを中央にするにはどうしたらいいですか

281 ：Name_Not_Found：2005/04/26(火) 08:15:13 ID:???

>>266
や、やっぱりjavascript使ってるよ、ブラウザごとにCSSを選別するところで。
document.writeが関係あるかわからないけどね。

>>269で普通に見れているんだから問題ないんじゃね？
個人的に気になるのは、サービスというメニューで、
テキストがかぶっているところぐらいだし。

282 ：Name_Not_Found：2005/04/26(火) 09:12:46 ID:???

>>280
>>6-9

283 ：267：2005/04/26(火) 09:16:45 ID:???

(´･ω･`)

>>266
>>263で挙げたのは「全部CSSでやった」というところが似ているサイトなんでしょ？
困っている問題のサイトは別物なんでしょ？

284 ：Name_Not_Found：2005/04/26(火) 09:40:50 ID:???

これはコントですね？

285 ：Name_Not_Found：2005/04/26(火) 09:50:42 ID:kaL+tWJs

透過PNGでどんなことができまつか

286 ：Name_Not_Found：2005/04/26(火) 09:56:42 ID:???

パンツが透けます。

287 ：Name_Not_Found：2005/04/26(火) 11:01:28 ID:???

皮膚が透けます

288 ：Name_Not_Found：2005/04/26(火) 13:04:43 ID:PxXfZPbY

http://www.geocities.jp/kihikos/
CSSで始めて書いてみたのですが、わからない点があります。

よくBlogなどでよく見かけるように左にメニュー、右にコンテンツ類を掲載する場合のスタイルの定義です。
例で言えばhttp://www.iwaki-ism.com/blog/のような感じにしたいのですが・・・

289 ：Name_Not_Found：2005/04/26(火) 13:12:12 ID:???

>>288
<div id="AAA">
右ブロック
</div>
<div id="BBB">
左ブロック
</div>

div#AAA{
width: 適宜;
float: right;
}
div#BBB{
margin-right: 適宜;
}

290 ：Name_Not_Found：2005/04/26(火) 13:33:05 ID:???

今頃必死な266ｗ

291 ：Name_Not_Found：2005/04/26(火) 13:35:37 ID:???

cssごときで質問することがあるんだ

292 ：Name_Not_Found：2005/04/26(火) 14:30:47 ID:???

くまー

293 ：Name_Not_Found：2005/04/26(火) 15:29:48 ID:???

>>266
良い案を教えてあげよう。
1面全て画像で作成し、bodyの背景に指定。
他の要素は全部　display:none;　これ最強。
糞クラにはマジでおすすめ。

294 ：Name_Not_Found：2005/04/26(火) 16:53:44 ID:???

align="absbottom"を使わずに、cssにて画像をボックスの下端に設置するのって可能ですか？

ヘッダ画像
画像
画像
画像
フッダ画像

左メニューが上記のような感じなのですが、absbottomを使わないと全てに隙間が空いてしまう状態です。

295 ：294：2005/04/26(火) 16:59:14 ID:???

自己解決しました。

img.tekitou{vertical-align:bottom;}

でしたね。すれ汚し失礼しました。

296 ：270：2005/04/26(火) 18:15:35 ID:???

>>270のＣＳＳでのやり方を探しているんですが分かりません。
オンマウスで特定のセルの背景を変えたいんです。
おそらくhoverだと思って色々試してるんですが・・・

297 ：Name_Not_Found：2005/04/26(火) 18:55:39 ID:???

何をどう試したのかソースを書かないと、こちらもどう助言していいやらわかりません。

298 ：Name_Not_Found：2005/04/26(火) 18:56:42 ID:???

>>270
セルの中にハイパーリンク無し？
ありなら　

div a:hover

とかで出来るでしょう？

299 ：Name_Not_Found：2005/04/26(火) 19:31:47 ID:???

http://css.maxdesign.com.au/listamatic/vertical08.htm

>>297
こういうことじゃないの？

300 ：288：2005/04/26(火) 19:51:43 ID:???

>> 289

早速修正してみましたが、少し違和感があるような感じが感じるのは気のせいでしょうか？
どうすれば先のHPのようなデザインになるのでしょうか？

301 ：Name_Not_Found：2005/04/26(火) 20:18:47 ID:???

CSSでDIVボックスの背景にイラストを設定しているのですが
imgに対するalt=""や文章に対するtitle=""みたいにオンマウスしたとき
説明コメントを表示させたいのですがどうすればいいですか？

302 ：Name_Not_Found：2005/04/26(火) 20:39:41 ID:???

303 ：301：2005/04/26(火) 21:14:53 ID:???

>>302
天才ですね。あなたというお方は…
感謝致します。誠にありがとうございました。

304 ：Name_Not_Found：2005/04/26(火) 21:52:53 ID:???

　　　　　ヽ(・ω・)/　　ｽﾞｺｰ
　　　　　＼(.＼ノ

305 ：270：2005/04/26(火) 21:55:11 ID:???

http://www.openspc2.org/reibun/javascript/mouse/023/index.html
すいません。要は↑をＣＳＳで出来るのか？って事を聞きたかったんです。
ＪＳでやればいいんですが、どうもＪＳは理解しづらくて。。。

306 ：Name_Not_Found：2005/04/26(火) 22:06:18 ID:???

できるよ

307 ：Name_Not_Found：2005/04/26(火) 22:12:25 ID:???

308 ：307：2005/04/26(火) 22:15:55 ID:???

ごめんデタラメ書いてしまった

309 ：270：2005/04/26(火) 22:18:30 ID:???

.table1{background-color:#ffffff}
.table1:hover{BACKGROUD-color:#000000}
↓
<TD class="table1">あああああ</TD>
という状態です。何がいけないんでしょうか？

310 ：Name_Not_Found：2005/04/26(火) 22:23:14 ID:???

>>309
標準規格でも出来る事になっているし、
Firefoxでもoperaでもsafariでも出来るんだ。

IEはCSS対応が糞なので出来ないけど。
IE7が出たら出来るようになってるかもね

311 ：270：2005/04/26(火) 22:29:23 ID:???

な、何だってー！？(AA略

あ、ありがとうございます。IEはCSSが糞だったんですか・・・
素直にＪＳ使って頑張ります・・・

312 ：Name_Not_Found：2005/04/26(火) 22:31:25 ID:???

>>270
出来ない事も無いけどハイパーリンク無しのセルをCSSでJSのONMOUSEみたいにするにはセルの外側から<a ・・をかけるというかなり無理がある。
リンクが無いセルの中だけの色を変えたいなら素直にJS使う方が良いかも。

313 ：Name_Not_Found：2005/04/26(火) 22:31:30 ID:???

onmouseover="this.style.background='#000000'" onmouseout="this.style.background='#666666'"

314 ：Name_Not_Found：2005/04/26(火) 22:32:48 ID:???

そんなかんじ

315 ：Name_Not_Found：2005/04/27(水) 00:00:54 ID:???

>>270のリンク先のようにリンクを含んだセルならスタイルシートで簡単だべ

316 ：Name_Not_Found：2005/04/27(水) 00:19:33 ID:???

>>270
a {display: block; background-color: red;}
a:hover {background-color:blue;}
つー感じでできないか？

317 ：Name_Not_Found：2005/04/27(水) 11:26:50 ID:???

CSSのFAQサイトとか誰か作らないのかな～
サイトを作りたいけどネタがないってのをどっかで見たんだけど、その人に頼んでみたい。

318 ：Name_Not_Found：2005/04/27(水) 11:58:39 ID:???

>CSSのFAQサイト
糞も含めてゴマンとあるだろ？

319 ：Name_Not_Found：2005/04/27(水) 12:47:43 ID:???

>>318
このサイトのテンプレって意味です。

320 ：Name_Not_Found：2005/04/27(水) 13:03:39 ID:???

>>319
>>6-9

321 ：Name_Not_Found：2005/04/27(水) 15:56:03 ID:6wTrNTzf

フロートで横一列に四つのボックス(div）を並べたんだけど、
WinIEで見ると、表示サイズによって正常になったり、最後のボックスが
２段目に改行されたりする。

widthをかっちり４分割（２５％）ずつとったのが悪いのかな。

322 ：Name_Not_Found：2005/04/27(水) 16:01:52 ID:???

悪い

323 ：Name_Not_Found：2005/04/27(水) 16:21:36 ID:6wTrNTzf

フロート難しいね

324 ：Name_Not_Found：2005/04/27(水) 18:03:30 ID:???

>>323
フロートってレイアウト用じゃないからね。
どの方法を使っても一長一短。
用途によって使い分けると。

テーブルならほぼ完璧だけどね。

325 ：Name_Not_Found：2005/04/27(水) 18:18:15 ID:???

一言多い。

326 ：Name_Not_Found：2005/04/27(水) 18:50:33 ID:???

ﾋﾟｺﾜﾛﾀ

テーブル使うことにしたよ
スキルが上がるか、ブラウザの表示が改善されたら
そんときこそCSSで実現してみようとおもう

327 ：Name_Not_Found：2005/04/27(水) 18:52:19 ID:???

テーブル最強だよね

かっこいいサイト見つけてソース見たらtable tr tdの羅列だったときのがっかり感といったら他に例えられないほどだけど

328 ：Name_Not_Found：2005/04/27(水) 20:34:50 ID:???

ブロックを重ねる方法を教えてください。
テーブルで。

329 ：Name_Not_Found：2005/04/27(水) 20:40:03 ID:???

ブロックをテーブル内に配置し、さらにブロックで囲んでレイアウトする。
テーブルに不可能はない。

330 ：Name_Not_Found：2005/04/27(水) 20:50:42 ID:???

軽く表示することが不可能

331 ：Name_Not_Found：2005/04/27(水) 21:48:06 ID:???

>>329
あ、いや、内包じゃなくて部分的にです。

332 ：Name_Not_Found：2005/04/27(水) 23:28:41 ID:???

ぽじしょん：りれいちぶ；で動かせばいいよ

333 ：Name_Not_Found：2005/04/27(水) 23:33:37 ID:???

なんかさぁ、いろんなWebサイトでCSSレイアウトｖｓテーブルレイアウト、
Strict vs Transitionalの話を見てきたけどさぁ、
結局、利点なんてほとんどなくて（めちゃくちゃな入れ子しまくりとか、
font乱射とかは論外だけど)、
流行とか、実情を無視した正しいHTML信仰のような気がしてきた・・・。

334 ：Name_Not_Found：2005/04/27(水) 23:37:39 ID:???

>>333
広告の裏へ

335 ：Name_Not_Found：2005/04/28(木) 00:26:53 ID:r4cCB5x6

<div>
<p><img src="" width="200" height="150">あいうえおかきくけこ</p>
<ul>
<li>abc</li>
<li>def</li>
</ul>
</div>

といったDIVブロックで、

div p img{
float:left;
}

として、画像の右側にテキストとリストを持ってきているのですが、
画像の高さより、テキスト量が少ない場合、DIVの高さがテキスト
までになってしまい、

div{
border:1px solid #000000;
}

としたとき、画像がはみ出てしまいます。これを解消するにはどう
すればいいのでしょうか？

336 ：Name_Not_Found：2005/04/28(木) 00:47:38 ID:???

テーブルの中に入れる

337 ：Name_Not_Found：2005/04/28(木) 00:57:10 ID:???

>>335
ulの後ろ（divが終了する前）で何かしらでclear:leftする。

>>332
結局スタイルシートつかうんじゃん。
だせえ。

338 ：Name_Not_Found：2005/04/28(木) 01:02:01 ID:???

>>332
なんとなくりらてぃぶな気が

339 ：Name_Not_Found：2005/04/28(木) 09:11:57 ID:???

テーブルを使うっていうのは、テーブルオンリーってことなのか
ｃｓｓだけに頼らないで、テーブル＋ｃｓｓじゃダメなのかよ

340 ：Name_Not_Found：2005/04/28(木) 09:34:51 ID:???

>>339
なに言ってるか全く意味がわからない

341 ：Name_Not_Found：2005/04/28(木) 11:14:45 ID:???

表を書くときにはテーブル使うよ

342 ：Name_Not_Found：2005/04/28(木) 11:22:36 ID:???

>>339
俺は基本（3カラムとか）レイアウトはテーブル。
その他はstrictで書いている。

343 ：Name_Not_Found：2005/04/28(木) 12:23:43 ID:???

テーブルレイアウト＋ｃｓｓ　だな
ケータイの人はごめんね

344 ：Name_Not_Found：2005/04/28(木) 13:38:50 ID:???

いつか携帯もCSSに対応する日が来るのかな

345 ：Name_Not_Found：2005/04/28(木) 13:44:54 ID:???

>>344
京ポン

346 ：Name_Not_Found：2005/04/28(木) 13:56:47 ID:???

>>344
お前が知らないだけで既に対応してるだろ。（もちろん完全じゃないが）

347 ：Name_Not_Found：2005/04/28(木) 14:33:19 ID:???

cssの名称に数字をつけたらいけないってことはある？

たとえば
fs12 {・・・}
みたいな

348 ：Name_Not_Found：2005/04/28(木) 14:35:54 ID:???

はあああああああああああああああ？

349 ：Name_Not_Found：2005/04/28(木) 14:46:38 ID:???

＞ fs12 {・・・}
そんな要素見たことありません。

”#”とか”.”とか頭に付かないのでしょうか？

350 ：Name_Not_Found：2005/04/28(木) 15:41:58 ID:???

ちょっとまちがえてるだけじゃん
クラス名とかそんなこと云々じゃないことぐらいわかれ
日本語の流れがわからないばかめ

.fs12 {・・・}

351 ：Name_Not_Found：2005/04/28(木) 16:07:46 ID:???

CSSでマンガの吹き出しみたいなのを作りたいのですが、参考になるサイトとかありますか？
↓こんな感じのやつです。TABLEは使いたくありませんが。
ttp://kirby.age.jp/G-Light_F/glight.cgi

352 ：Name_Not_Found：2005/04/28(木) 16:26:22 ID:???

＞クラス名とかそんなこと云々じゃないことぐらいわかれ
クラス名やID名を指していらっしゃるのではないとするとHTMLでは無理です。

XMLのことを話していらっしゃるのでしょうか？

353 ：Name_Not_Found：2005/04/28(木) 16:27:58 ID:???

>>351
http://www.mozilla-japan.org/
の角丸の部分。

354 ：Name_Not_Found：2005/04/28(木) 17:51:59 ID:???

しつもんです。
ttp://hotwired.goo.ne.jp/webmonkey/98/24/index2.html
これをみると、
position:absolute;絶対指定して
レイアウトするのがなんとなくいいかなぁなんて思えてくるのですが、
テーブルデザインがやたら多い現状を見ると、これを使った
位置固定にも欠点があるのでしょうか？

355 ：Name_Not_Found：2005/04/28(木) 19:00:14 ID:???

質問です。
同じ要素内にclassとidは併記できないのですか？

<table class="xxx" id="yyy">～～～</table>
このように書くと、Firefoxではyyyに指定したcssが表示されませんでした。
これは文法違反なのでしょうか。それとも、CSSのブラウザごとのバグなんでしょうか。

356 ：Name_Not_Found：2005/04/28(木) 19:07:27 ID:???

kimikimi

357 ：Name_Not_Found：2005/04/28(木) 19:09:25 ID:uTmwZWtK

バグかどうか知らんが、そういったケースが出現するのかな・・・

classの内容をidの中に含めて書いては不都合が有るのかね？

358 ：Name_Not_Found：2005/04/28(木) 19:18:44 ID:???

>>354
IEで、文字選択とかがおかしくなることはあるけど
基本的に欠点はない。

359 ：Name_Not_Found：2005/04/28(木) 19:23:06 ID:???

>>358
thx！
FrontPage2003のレイヤー機能で簡単に配置ができるようなので、
特に欠点がないのならこれでデザインをしようとおもいます。

360 ：Name_Not_Found：2005/04/28(木) 19:27:32 ID:???

>>358
文字サイズをもりもり大きくしていくと…

361 ：Name_Not_Found：2005/04/28(木) 21:53:18 ID:???

>355
できる
何か間違っている可能性大

>357
class="section" id="topics1" とか class と id を併用して
それぞれにスタイル指定なんてよくある話かと

362 ：Name_Not_Found：2005/04/28(木) 22:16:11 ID:???

>よくある話かと

それを無駄と言わずして何というのだ。

363 ：Name_Not_Found：2005/04/28(木) 22:35:04 ID:???

クラスは全部にIDはそこだけ　なにが無駄だ？

364 ：Name_Not_Found：2005/04/28(木) 22:38:50 ID:???

私、15ﾊﾞｲﾄの無駄だと思います。

365 ：355：2005/04/28(木) 22:47:56 ID:???

>>361
回答ありがとうございます。
しかし、何が間違っているのかわかりません。

http://www.geocities.jp/sayashigumi/order/1996bluewave.html
http://www.geocities.jp/sayashigumi/order/order2.css

Firefoxではborderがうまく表示されません。ご教授ください。

366 ：Name_Not_Found：2005/04/28(木) 22:50:53 ID:???

うちのクラスにはｴﾛがいます。

367 ：Name_Not_Found：2005/04/28(木) 22:52:26 ID:???

idを数字から始めるなよ

368 ：355：2005/04/28(木) 23:03:37 ID:???

>>367
両方classにしてもダメでした。

369 ：Name_Not_Found：2005/04/28(木) 23:11:47 ID:???

>>368
だから、数字で始まっているを id="19??????" を id="a19??????" に置き換えたらできるって。

370 ：355：2005/04/28(木) 23:15:22 ID:???

>>369
いや、それもダメやったんよ。

371 ：Name_Not_Found：2005/04/28(木) 23:17:36 ID:???

>>370
俺はできたぞ。
cssの#19????を全部#a19????に置き換えるんだぞ。全部。一カ所だけ置き換えても意味ないぞ。

372 ：Name_Not_Found：2005/04/28(木) 23:18:28 ID:0IBxpyIG

疑似クラスとクラスを組み合わせるには
どうすればよいか分かりません。

具体的には、テーブルごとにリンクの色を分けたいんですが、
外部CSSで
.menu a:link, .menu a:active, .menu a:active{
color:#003300;
text-decoration:none;
text-weight:bold
}
.menu a:hover{
color:#99cc00;
text-decoration:underline
text-weight:bold
}
と打って、htmlで
<p class="menu"><a href～　～</a></p>
とやっても全く反応しません。どなたかご教授ください。

373 ：355：2005/04/28(木) 23:19:22 ID:???

全部やらないとダメなんですか？
やってみます。ありがとうございます。

374 ：355：2005/04/28(木) 23:24:50 ID:???

解決しました。どうもありがとうございました。

375 ：Name_Not_Found：2005/04/29(金) 00:10:08 ID:???

>362
.section h2 { font-size: 120%; }
#topics1 h2 { color: blue; }
#topics2 h2 { color: red; }

<div id="topics1" class="section"><h2>foo</h2></div>
<div id="topics2" class="section"><h2>bar</h2></div>

こういうことしないんだったら確かに無駄かもしれんけど

376 ：Name_Not_Found：2005/04/29(金) 00:48:04 ID:???

#menu{
float:left;
width:150px;
}
#content{
margin-left:152px;
}
と指定して、2段組を作っているのですが、
#contentの中に表を入れているせいか、
IE（6.0/win）だけで、左マージンを保ったまま、
#menuの高さ分だけ下に下がって表示され、
#menuの右側がだだっ広く空白になってしまいます。

http://cssbug.at.infoseek.co.jp/detail/winie/b164.html
このバグかな？と思っているのですが、
何か対策はないでしょうか。

377 ：Name_Not_Found：2005/04/29(金) 00:50:40 ID:???

>>362はもう一度１から勉強するべきだとおもふ

378 ：Name_Not_Found：2005/04/29(金) 07:57:19 ID:???

ねんちゃ君がいるのかな？

379 ：Name_Not_Found：2005/04/29(金) 08:29:16 ID:???

>>335
ttp://www.lucky-bag.com/archives/2005/03/float_overflow.html

380 ：Name_Not_Found：2005/04/29(金) 08:35:50 ID:???

>>362=>>378

381 ：Name_Not_Found：2005/04/29(金) 08:47:13 ID:???

ねんちゃ君がいるのかな？

382 ：Name_Not_Found：2005/04/29(金) 10:29:51 ID:???

>>376
ＨＴＭＬソースも出してくれないと。
もしそのバグなら親ブロックが関係するんだし。

383 ：Name_Not_Found：2005/04/29(金) 14:22:15 ID:Bw7Rvjit

800*600は無視して良いですか？

384 ：Name_Not_Found：2005/04/29(金) 17:03:55 ID:???

>>383
うちのじーちゃんが生きて使ってるうちは無視しないでください。

385 ：Name_Not_Found：2005/04/29(金) 18:05:12 ID:???

じゃあTABLEにしようかな・・・

386 ：Name_Not_Found：2005/04/29(金) 19:00:58 ID:???

テーブルタグにbgcolorを指定したら
bodyタグで指定してる壁紙が見えない。
テーブルタグのbgcolorを半透明にする方法ありませんか？

387 ：Name_Not_Found：2005/04/29(金) 19:05:08 ID:???

>>386
http://www.tohoho-web.com/css/reference.htm#Filter

388 ：Name_Not_Found：2005/04/29(金) 20:12:22 ID:???

半透明にしたpngファイルを、tableタグの背景画像として扱う。

UAがαチャンネルに対応してないとダメだけどなー。

389 ：Name_Not_Found：2005/04/29(金) 20:42:08 ID:???

1ドットごとに透明・不透明を繰り返した
透過GIFファイルを背景に貼る。など

390 ：Name_Not_Found：2005/04/29(金) 21:18:56 ID:???

フィルター使えよｗ

391 ：376：2005/04/30(土) 02:43:55 ID:???

>>382
あ、そうですね。ごめんなさい。
あのバグかというのも私の間違いかもしれません…。
<body>
<div id="header">ヘッダ</div>
<div id="menu">メニューの中身</div>
<div id="content">
　　　<table>大きな表</table>
</content>
<div id="fotter">フッタ</div>
</body>

CSSは>>376に加えて、
#header{
width:100%;
}

#fotter{
clear:both;
width:100%;
}
です。

392 ：Name_Not_Found：2005/04/30(土) 09:45:32 ID:???

</content>……？
fotter……つ、釣られないぞ！

393 ：Name_Not_Found：2005/04/30(土) 10:07:43 ID:???

<div id="content">
　　　<table>大きな表</table>
</content>
~~~~~~~~~~~~
うん。やりたいこととか、伝えたいことはわかる。

394 ：Name_Not_Found：2005/04/30(土) 10:19:15 ID:???

<p style="word-spacing:2em">the word is good</p>
欧文の間隔あけができません。letterならできるのですが
どこか不具合がありますか？

395 ：Name_Not_Found：2005/04/30(土) 13:17:50 ID:???

>>394
ブラウザのバージョン書かないと。

396 ：Name_Not_Found：2005/04/30(土) 14:39:05 ID:1AXKwrFB

WinXP firefox1.0.2+IE6使用です。質問させてください。

html { background: #000 url(○○.jpg) fixed; }
body { background: #fff url(××.jpg) no-repeat fixed right top;
width: 500px; margin: 0 auto; }

としたときIEではhtmlとwidthが反映されないのですがバグでしょうか？
それともなにか記述ミスでしょうか？　すみませんがレスお願いします。

397 ：Name_Not_Found：2005/04/30(土) 14:53:56 ID:???

>>396
ttp://cssbug.at.infoseek.co.jp/detail/winie/b142.html
body要素にwidthが指定できないのも根源はこのバグと同じ

398 ：396：2005/04/30(土) 15:02:28 ID:???

>397
ありがとうございます、ソース書き直します(´･ω･`)

399 ：372：2005/05/01(日) 00:51:38 ID:YqK3Bw+M

どなたかご教授ください。>>372

400 ：Name_Not_Found：2005/05/01(日) 01:04:24 ID:???

>>372
text-weightというプロパティが謎だし
セミコロンが抜けてる箇所があったりするが
.menu a:visited がないからという落ちじゃないよな？

401 ：372：2005/05/01(日) 01:24:18 ID:YqK3Bw+M

>>400
ありがとうございます

セミコロンがないのとか、font-weightだろ
とかはここに書き写す時に間違えただけです。

visitedは今確かめましたが、やはりactiveが2回になってました。
書き直したらうまくいきました。
すごい初歩的ミスでしたが、即ﾚｽ感謝します。

402 ：Name_Not_Found：2005/05/01(日) 01:50:25 ID:???

というかコピペ知らんのか？

403 ：Name_Not_Found：2005/05/01(日) 10:48:54 ID:3dX71JH1

.demo { border: 1px #0000ff solid; }
.demo2 {border: 1px #0000ff solid; border-collapse: separate;}
<table width="140" class="demo2">
<tr><td class="demo">あ</td></tr>
<tr><td class="demo">い</td></tr>
<tr><td class="demo">う</td></tr>
</table>

<table width="140" border="1" cellpadding="0" cellspacing="1" bordercolor="#0000ff">
<tr><td>か</td></tr>
<tr><td>き</td></tr>
<tr><td>く</td></tr>
</table>

上と下では枠の太さがどうしても違ってきてしまうのですが(上の方が太くなる)、
上のを下の太さにあわせるにはどうすれば良かとですか？

404 ：376：2005/05/01(日) 11:17:08 ID:???

>>392
>>393
あ･･･orz。
眠いときに書き込みすべきじゃないな…。

</content>じゃなくて</div>です。
fotterじゃなくてfooterです。

405 ：Name_Not_Found：2005/05/01(日) 11:25:35 ID:???

>>403
GeckoやOperaなら、border-spacing: 1px;を入れれば同じになると思うけど、
IEは対応してなかったはず・・・

406 ：Name_Not_Found：2005/05/01(日) 11:36:32 ID:iohD0jK6

http://z.la/x45zbこういうｻｲﾄはDOCOMOからも正常に表示されるのか？

407 ：Name_Not_Found：2005/05/01(日) 11:44:34 ID:???

>>405
border-spacing:の後に１pxですか
ありがとうございます

しかし、IEが対応してないのは厳しいなぁ…
IEをたてればFireFoxがたたず
FireFoxのこと考えてｽﾀｲﾙｼｰﾄを書き始めたらIEがたたず

うざさ爆裂…

408 ：Name_Not_Found：2005/05/01(日) 14:18:38 ID:???

input.submit{}というformのsubmitボタンのみのスタイル適応は出来ないのでしょうか？
firefoxで試しているのですが反映されません

409 ：Name_Not_Found：2005/05/01(日) 14:54:55 ID:???

<input class="submit">ってことだよな？

410 ：403：2005/05/01(日) 15:17:15 ID:???

内枠にも色つけるために
<td class="demo">なんてやっていますが、
まとめてﾄﾞｶﾝって出来ないものですかね？
table,td,tr { border: 1px #0000ff solid; }
なんてやってしまうと、他のやつにまで影響が出てしまいますし

個別にやるしかないのでしょうか？

411 ：Name_Not_Found：2005/05/01(日) 15:30:30 ID:???

>>410
内枠ってどこさ？他のやつっていうのは？
>>403でいうtable.demo2の中のセルにのみボーダーつけたいんだったら
table.demo2 td, table.demo2 th { ... } だが。

412 ：Name_Not_Found：2005/05/01(日) 15:46:00 ID:???

>410
もうちっとべん(ry

413 ：403：2005/05/01(日) 15:55:48 ID:???

>>411
多謝！！
出口が見えてきたかもしれません

>>412
もじら組がもっとしっかりしてくれれば…
しかし、いい勉強になっておりまする

テーブルで重ねてごまかすよりも、
ｽﾀｲﾙｼｰﾄ勉強した方が軽くなりますし

いろいろ教えて下さってありがとうございます

414 ：Name_Not_Found：2005/05/01(日) 16:05:14 ID:???

>>409
<input type='submit' value='ぼたん'>

この状態のsubmitボタンにスタイルをclassなど定義せずに適応したいのです。

415 ：Name_Not_Found：2005/05/01(日) 16:07:42 ID:???

input[type="submit"] {
...
}

416 ：Name_Not_Found：2005/05/01(日) 16:20:09 ID:???

それもIEは対応してないんだよね・・・
IE7で初めてCSSに（まともに）対応するらしいけど

417 ：Name_Not_Found：2005/05/01(日) 16:26:58 ID:???

>>415
ありがとうございますm(_)m
検索していて[type="submit"] というのを見てたのに、そういう定義の仕方は
無いものと勝手に思い込んでいました・・・

418 ：Name_Not_Found：2005/05/01(日) 17:33:26 ID:???

フレームは使用するべきでは無いとききましたが、
フレームとはなんでしょうか？CSSのフレームのことだと思うのですが、
なぜ使用はさけならないのでしょうか？

419 ：Name_Not_Found：2005/05/01(日) 17:39:16 ID:???

CSSにフレームなどないっ

420 ：403：2005/05/01(日) 18:40:49 ID:???

>>411
と思ったら、教えていただいたのをかますと
テーブル内テーブルも全部同じ色になっちゃいますよね

ってことは結局、
<td>にも１つ１つ関連付けしていかなくてはならないってことなんですね…

421 ：Name_Not_Found：2005/05/01(日) 19:26:37 ID:???

>>420
大丈夫か？

422 ：411：2005/05/01(日) 19:43:14 ID:???

>>420
なぜもじら組が出てくるのかさっぱりわからないんだけど
もうちょっと文脈セレクタについて勉強したほうがいいよ。
table要素の中のtable要素は table table { ... } ね。

423 ：Name_Not_Found：2005/05/01(日) 20:12:02 ID:xQIesvlC

tableの子要素ではtext-alignは指定できないのでしょうか？

424 ：Name_Not_Found：2005/05/01(日) 20:13:07 ID:???

なぜそう思う？
もし何かやろうと思ったけど駄目だったのなら
どうやってどううまくいかなかったのか書け。

425 ：423：2005/05/01(日) 20:22:20 ID:???

>424
即レスありがとうございます。
すみません、質問自体が間違っていました。

<table>
<colgroup class="a"></colgroup>
<colgroup class="b"></colgroup>
<tr>
<td>ccc</td><td>ddddddd</td>
</tr>
<tr>
<td>eee</td><td>ddddddd</td>
</tr>
</table>

colgroup.a {width: 5em;}
colgroup.b {width: 30em;}

このときのcolgroup.aを text-align:center; にしたいのですが・・・

426 ：Name_Not_Found：2005/05/01(日) 21:21:54 ID:???

>>425
　嫁
http://www.ne.jp/asahi/minazuki/bakera/html/reference/table#colgroup

427 ：423：2005/05/01(日) 22:15:24 ID:???

>426
レスありがとうございます。
何度か読ませていただいたんですが結局意味がわからず・・・
widthにて代用しました。
理想の形とは違いますが妥協します。
せっかくレスつけてくださったのにすみません。ありがとうございました。

428 ：神頼み：2005/05/01(日) 22:24:23 ID:tjngxttQ

iモード専用サイトを作っていますが参考にしたいサイト
⇒girlswalker.comというのがありましてこのサイトと同じような構成で
作りたいのですが普通のHTMLではできないような背景
（途中から背景色が切り替わる）になっているので
このサイトはCSSを使っているんでしょうか？分かる方教えてください！
ちなみにXHTMLに対応していないドコモ以外の携帯から上記サイトを見ても
普通に表示されてしまうので最近の携帯から見れるかたお願いします。

429 ：Name_Not_Found：2005/05/02(月) 20:58:55 ID:6tnWjAKB

ttp://www.timedesign.ws/

このソースがっかりしていいですか？

430 ：Name_Not_Found：2005/05/02(月) 21:41:18 ID:???

>>429
始めは普通だったけどだんだんフェードインするかのように…。
最後は吹いた。

431 ：Name_Not_Found：2005/05/02(月) 21:52:55 ID:+zeBvL6a

質問させてください。

<div class="left">
　サイドメニュー
</div>
<div class="main">
　メイン
</div>
<div class="right">
　その他
</div>

とした時

div.left{
float:left;
width:200px;
height:100%;
background:#000000;
color:#ffffff;}
div.right{
float:right;
width:200px;
height:100%;
background:#000000;
color:#ffffff;}

としています。
しかしメイン部分が長くなった場合サイドメニューとその他部分の背景色が短くなってしまいます。
どうしたらよいのでしょうか。
メイン部分に合わせて毎回heightを指定するほかないのでしょうか。

432 ：Name_Not_Found：2005/05/02(月) 22:03:50 ID:yWJKpTy+

ttp://55.139.148.210.dy.bbexcite.jp/
うはっｗｗｗｗｗｗおｋうぇおｋｗｗｗｗｗｗｗｗｗｗｗｗ
ｗうはっっっうはっｗｗｗｗｗｗうはっｗｗｗうぇ
ｗｗｗｗｗｗｗｗうはっｗｗｗｗｗｗｗｗｗｗｗｗ
ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗおｋｗうはっうぇうはっ
ｗｗｗｗｗｗ

433 ：Name_Not_Found：2005/05/02(月) 22:05:34 ID:???

↑
山田感染者か？

434 ：Name_Not_Found：2005/05/02(月) 22:20:38 ID:???

>>431
これじゃいやかい？
<html>
<head>
<style>
*{margin:0;padding:0;}
body{background:#000000;}
.left{position:absolute;width:200px;top:0;left:0;color:#ffffff;}
.right{position:absolute;width:200px;top:0;right:0;color:#ffffff;}
.main{margin:0 200;background:#ffffff;height:100%;}
</style>
</head>
<body>
<div class="left">
　サイドメニュー
</div>
<div class="main">
　メイン
</div>
<div class="right">
　その他
</div>
</body>
</html>

435 ：Name_Not_Found：2005/05/02(月) 22:30:48 ID:+zeBvL6a

>>434
ありがとうございます
float使わなきゃいけないような妄念に駆られてました

436 ：Name_Not_Found：2005/05/02(月) 23:10:32 ID:???

.main{
font-size: 13px;
width: 95%;
margin: 0em 0em 5em 0em;
}

<div class="main">
ああああああああああああああああああああ・・・（続く）くBR>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa・・・（続）くBR>
</div>

こんな感じにしてたら、横幅が95％を超えたとき
全角の方は改行されるが
半角の方は改行されずに横に続くのですが
これが普通なのでしょうか？
IE6使ってます。

437 ：Name_Not_Found：2005/05/02(月) 23:15:10 ID:???

>>436
普通です

438 ：Name_Not_Found：2005/05/02(月) 23:17:33 ID:???

<p class="box">段落<br>
testtesttesttesttesttesttest<BR>
testtesttesttesttesttesttest<BR>
testtesttesttesttesttesttest</p>

p.dan{
background-color: #EAEAEC;
filter: alpha(style=0, opacity=30);
margin: 1em 2em 1em 2em;
padding: 0.4em;
border-style: solid;
border-width: 1px;
border-color: #EDEDEF #BABABC #BABABC #EDEDEF;
}

こんな感じにして、背景色を半透明にしようとしたのですが
半透明になってくれません。
どこか間違ってますか？

439 ：Name_Not_Found：2005/05/02(月) 23:17:59 ID:???

>>437
半角の字も強制改行したいのですが
無理なのでしょうか？

440 ：Name_Not_Found：2005/05/02(月) 23:30:48 ID:???

>>439
これじゃいやかい？
word-break:break-all;
（IE独自拡張）
overflow:hiddenも入れればmoz系の場合はみ出し部が表示されない。

441 ：Name_Not_Found：2005/05/02(月) 23:32:58 ID:???

>>436・>>439
何度も何度も既出の質問だ。過去ログ見たら？
ラテン・アルファベットで記す言語は、語ごとに分かち書きして
語の途中では改行しないのが大原則なんだよ。
どうしても改行させたければ、IEのみ先行実装したword-break:break-all;でもやれ。
無論、他のブラウザでは効かない。

CSSにおける国際的レイアウト
　http://www.doraneko.org/misc/i18n-format/WD990127.html
Internatinal Layout in CSS
　http://east.portland.ne.jp/~sigekazu/css/international.htm

442 ：Name_Not_Found：2005/05/02(月) 23:36:14 ID:???

>>440-441様
ﾟ･:,｡☆Uo･ｪ･oU/~♪了└|力"├♪~＼Uo･ｪ･oU ☆,｡･:･ﾟ

443 ：Name_Not_Found：2005/05/02(月) 23:37:39 ID:???

過去ログ見てから質問しろよな。

444 ：Name_Not_Found：2005/05/02(月) 23:39:48 ID:???

>>442
それじゃいやだ。
なめとんのかっ！むかついたんでもうこたえるのやめる。
おやすみ。

445 ：438：2005/05/02(月) 23:49:59 ID:???

おいらを忘れないでね・・・

446 ：Name_Not_Found：2005/05/03(火) 00:02:21 ID:???

>>441
それはいくらなんでも古すぎだろ。せめてこっちを。
ttp://www.d-toybox.com/spec/CSS3/i18n-format/index.html

447 ：Name_Not_Found：2005/05/03(火) 00:19:23 ID:???

>438
p.dan → p.box

448 ：Name_Not_Found：2005/05/03(火) 00:25:08 ID:???

>>446
ありがと。でも部分訳だね。
肝腎のword-breakのところが英文のままだから今の場合は役に立たない。

449 ：Name_Not_Found：2005/05/03(火) 09:43:06 ID:???

>>447
それ直しましたが背景色が半透明になりません・・・

450 ：Name_Not_Found：2005/05/03(火) 09:46:12 ID:???

body {
font-size:85%;
}

ってやると、NNとかMozillaではtableのセル内も85%が適応されるんですが、
IEでは適応されません。
かといって、tdにfont-size:85%;を入れるとNNとかでは
セル内が更に小さいフォントになります。
これ、どうやって回避したらいいでしょうか？
絶対指定はやりたくないので。

451 ：438：2005/05/03(火) 10:03:41 ID:???

p.box{
background-color: #EAEAEC;/*背景色*/
width: 600px;
filter: alpha(style=0, opacity=30);
margin: 1em 2em 1em 2em;
padding: 0.4em;
border-style: solid;
border-width: 1px;
border-color: #EDEDEF #BABABC #BABABC #EDEDEF;
}

横幅指定したら半透明になりました。
でも、文字まで半透明・・・orz

452 ：Name_Not_Found：2005/05/03(火) 10:09:09 ID:Nzj7y2th

>>450
td {
font-size:100%;
font-size: 85%;
}

453 ：Name_Not_Found：2005/05/03(火) 10:17:16 ID:???

>>452
試してみましたが、NN7.1、Firefox共にセル内はセル外より小さくなってしまいました。

454 ：Name_Not_Found：2005/05/03(火) 10:27:41 ID:???

>>429が分かりません・・

455 ：Name_Not_Found：2005/05/03(火) 10:32:34 ID:???

>>429
すれ違い
http://pc8.2ch.net/test/read.cgi/hp/1065719058/l50

456 ：Name_Not_Found：2005/05/03(火) 12:34:50 ID:???

>>452
ﾜﾛﾀ

>>450
td { _font-size: 85%; }

とか。他にもハックの方法はあるから試してみて。

457 ：Name_Not_Found：2005/05/03(火) 14:02:05 ID:???

<div class="cel1">text1</div>
<div class="cel2">
<p>text2</p>
</div>
.cel1 { background: #cc0000; }
.cel2 { background: #cccc00; }
(<p>は<h1>等上下にマージンを含むブロック要素の場合・・)

とすると、Firefox、Operaでは<p>のマージンが<divclass="cel2">の上についてしまうのですが
（<div class="cel1">と<div class="cel2">の間に一行空く感じ）
これを回避するには、<p>text2</p>のtopのマージンを0にするしかないでしょうか？
良い解決法があれば教えてください。

458 ：Name_Not_Found：2005/05/03(火) 14:08:42 ID:???

>>449
widthを設定してみたら

459 ：452：2005/05/03(火) 15:35:52 ID:???

>>456
おぉ、ばっちりでした！
さんくすです。

まったくこれだけ解釈が違うなんて困ったもんですね。

460 ：Name_Not_Found：2005/05/03(火) 15:58:51 ID:???

>452

table {font-size: 1em;}
こんなやり方もあるぞ

461 ：昔の人：2005/05/03(火) 15:59:38 ID:???

>>450
まづバグ辞典を見ませう。
　フォントサイズの指定が表要素に継承されない(5.x)
　http://cssbug.at.infoseek.co.jp/detail/winie/b023.html

>ページ全体に共通するスタイルの指定はbody, th, tdの3要素に一括して行うこと
>で、この不具合を回避することができます。

body, th, td {
font-size: ...
}

462 ：Name_Not_Found：2005/05/03(火) 16:03:08 ID:???

>457
ちょっと違うかもしれないが

p{display: inline;}

とか

463 ：Name_Not_Found：2005/05/03(火) 16:10:13 ID:???

>>457
もしかして、まだIE5.0とか使ってるのか？
　親要素を持つp要素のマージンが無視される(IE5)
　http://cssbug.at.infoseek.co.jp/detail/winie/b083.html

464 ：Name_Not_Found：2005/05/03(火) 16:24:12 ID:???

>>457
borderをつけるとなぜかdiv.cel2の子要素の上下マージンが有効になるね。
.cel2 { background: #cccc00; border:1px solid #f00;}
NS7.1とIE6.0とで確認。
これは仕様書からはどう説明されるんだろ。

465 ：Name_Not_Found：2005/05/03(火) 16:26:57 ID:???

これか。

8.3.1 マージンの相殺（Collapsing margins）
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#collapsing-margins
相互に隣り合っているか入れ子関係にある複数のボックス間において、間にパディングもしくはボーダー領域を挟まずに隣接するマージン同士が、結合して1つのマージンになる

466 ：Name_Not_Found：2005/05/03(火) 16:41:01 ID:???

>>458
>451で既に試しています。

467 ：Name_Not_Found：2005/05/03(火) 18:55:54 ID:???

>>465
これって仕様なんだろうか。
だとしたら、余計なお世話だよ・・・orz

468 ：452：2005/05/03(火) 19:00:17 ID:???

>>460
こっちのほうがスマートでいい感じですね。
挙動は_font-size: ;と同じでした。

>>461
それをやっちゃうとIEとNNで表示が変わってしまうんですよ。

469 ：Name_Not_Found：2005/05/03(火) 19:27:30 ID:???

あの、「これじゃいやかい？」って
言葉に興奮するんです。

470 ：Name_Not_Found：2005/05/03(火) 19:32:59 ID:???

>>468
>それをやっちゃうとIEとNNで表示が変わってしまうんですよ。
うそつけ。同じだよ。

<table border="2"><tr><td>AAA</td><td>BBB</td></tr></table>
<p>BBB</p>
body, th, td {font-size:85%;}
NN7.1、IE6.0、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
で、確認済み。

471 ：Name_Not_Found：2005/05/03(火) 19:37:46 ID:???

>>468
そもそも>>461のＩＥバグは互換モードだけ、標準モードはバグらない。
それ、わかってますか？

472 ：452：2005/05/03(火) 20:03:29 ID:???

>>470
あ、すいません、こっちはxhtml1.0のtransitionalです。
これでxml宣言ありなんで、IEは互換モードですよね。
以下のソースで表示がNNとIEで変わりました。
（CDDATAとか細かいのは省略で。）
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body, th, td {font-size:85%;} </style>
</head>
<body>
<table border="2"><tr><td>AAA</td><td>BBB</td></tr></table>
<p>BBB</p>
</body>
</html>

473 ：452：2005/05/03(火) 20:04:04 ID:???

>>472
あ、<html>がおかしくなってるけど、そこは削除でお願いします。

474 ：452：2005/05/03(火) 20:05:56 ID:???

ついでにcharasetもおかしいですね。
こっちでおねがいします。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<style type="text/css">body, th, td {font-size:85%;} </style>
<title></title>
</head>
<body>
<table border="2"><tr><td>AAA</td><td>BBB</td></tr></table>
<p>BBB</p>
</body>
</html>

475 ：452：2005/05/03(火) 20:23:52 ID:???

結局、html4.01で互換モードだったらバグは回避できますが、
xhtml1.0、xhtml1.1だと互換モードでも駄目みたいです。

476 ：Name_Not_Found：2005/05/03(火) 20:28:20 ID:???

解りきったことを・・・

477 ：Name_Not_Found：2005/05/03(火) 22:40:07 ID:???

>>474
body { font-size: 85%; }
table, caption, thead, tfoot, tbody, tr, th, td { font-size: 100%; }

478 ：Name_Not_Found：2005/05/03(火) 22:47:05 ID:???

>>474
*{font-size:small}

479 ：Name_Not_Found：2005/05/03(火) 23:29:25 ID:???

個人的には、本文のテキストの大きさを変えるのはやめて欲しい……

480 ：Name_Not_Found：2005/05/03(火) 23:35:21 ID:cJ9cKjkY

a {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #ff00cc;
}
a:hover, div#main a:active {
color: #ff0000;
}

と

a:link {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #ff00cc;
text-decoration: none;
}
a:hover, div#main a:active {
color: #ff0000;
text-decoration: underline;
}

は同じですか？
ブラウザによってNGとかありますか？

481 ：Name_Not_Found：2005/05/03(火) 23:36:20 ID:cJ9cKjkY

>>480訂正

a {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #ff00cc;
}
a:hover, div#main a:active {
color: #ff0000;
}

と

a:link {
color: #0000ff;
text-decoration: none;
}
a:visited {
color: #ff00cc;
text-decoration: none;
}
a:hover, div#main a:active {
color: #ff0000;
text-decoration: none;
}

482 ：Name_Not_Found：2005/05/03(火) 23:47:13 ID:???

概ね同じだけれど
こういうのだとちょっと違う

<a name="top">top</a>

483 ：Name_Not_Found：2005/05/03(火) 23:54:19 ID:EZsyGZDe

過去ログや検索サイトを読み漁ること半日です。
初歩的な質問過ぎて、スレ違いかとも思いますが、
お手空きな方が居ればと思い書き込みさせていただきます。

今回初めてCSSを使用したサイト作りに挑戦していて、
転送の時点で行き詰ってしまいました。
試行錯誤して様々に転送してみたのですが、表示されません。
サーバーはぷららなのですが、ここはHTMLとCGIのサーバーが
別々で、CSSファイルをどちらに置くのかが解りません。
両方試してみても駄目で困っています。
どうかよろしくご指南くださいませ；
CSS自体はフリーで配布されているもので、問題ないと思うのですが・・。

484 ：Name_Not_Found：2005/05/04(水) 00:03:21 ID:???

話がよく飲み込めないが、cssはHTML側に置けばいいんじゃないかな
それから、HTML文書の中に、CSSへのリンクは記述した？

“CSS自体はフリーで配布”というのが気になるけど、
話を最初から順に箇条書きにして書くか、URLを晒すとか

485 ：Name_Not_Found：2005/05/04(水) 00:07:35 ID:???

どこかでCSSの外部ファイル名の例を挙げるスレッドがあった気がしたのですが、
どこでしたっけ？
またはお勧めのファイル名はありますか？

486 ：Name_Not_Found：2005/05/04(水) 00:09:18 ID:???

>>485
好きな名前でよろしい
default style-1　とかそんなのでいいよ

487 ：483：2005/05/04(水) 00:12:51 ID:ib6qJda+

484様、天のお助けが来た気分です；；有難うございます；；

CSSは今、改めてHTML側へ転送しましたが、表示されませんでした。

使用しているCSSは、初心者向けとして配布されているもので、
書き換えはページタイトルや、コンテンツ名の書き換えのみの
ものです。
配布サイトのFAQにも、書き換えは簡単なので、説明は省きます、と
記載されているほどのものです。
また反映されない場合についても、
アップロードし忘れてませんか？CSSのアドレスがローカルアドレスになっていませんか？
との記載のみです･･･。
ローカルアドレスについても検索かけて色々調べましたが、いまいち
理解に及ばず･･･これが原因なのかとも思いますが、
書き換えの必要な色分けされた箇所に、絶対パス指定とか
ないもので、いじっていいやら、困っています。

488 ：466：2005/05/04(水) 00:17:59 ID:???

完全に放置の模様・・・（´・ω・`）ｼｮﾎﾞｰﾝ

489 ：Name_Not_Found：2005/05/04(水) 00:18:51 ID:???

>>487
・htmlファイルの中、<head> ～ </head>間に
　<link rel="stylesheet" type="text/css" href="CSSのファイル名.css">
　を挿入

・ｈｔｍｌとｃCSSを同じ場所にアップロード

ってのはやった？

490 ：Name_Not_Found：2005/05/04(水) 00:21:43 ID:???

>>487が素人過ぎてかわいい件について

491 ：Name_Not_Found：2005/05/04(水) 00:24:08 ID:???

>>490
あ、そういうことか。
なんてまとまりのない話をするやつだ、としか思わなかった

>>488
すまないね。でも俺、半透明とか意味分からないんだ
え、それってｃｓｓなのか？ってレベル…

492 ：Name_Not_Found：2005/05/04(水) 00:25:13 ID:???

>>489
style.cssと保存して
<link rel="stylesheet" type="text/css" href="CSSのファイル名.css">
を挿入しましたができません。
CSSのファイル名.cssってところも変えるのでしょうか？

493 ：483：2005/05/04(水) 00:32:03 ID:ib6qJda+

492さんはどなたでしょうか、、。

>489様、
・htmlファイルの中、<head> ～ </head>間に
　<link rel="stylesheet" type="text/css" href="CSSのファイル名.css">
　を挿入

をしてみましたが、駄目でした；；
参考までに、一応、いじらなくてもいいとされている部分を。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css.css" type="text/css">
<title>お好きなタイトル</title>
</head>

と記載されています。
同じ場所にアップは出来ています。
重ねがさねすみません；；

494 ：Name_Not_Found：2005/05/04(水) 00:32:24 ID:???

こ、これは壮大な釣りか……？

>>492
style.cssって名前にしたんだな？　じゃ、CSSのファイル名.cssってところをその名前に変えてね

495 ：483：2005/05/04(水) 00:34:07 ID:ib6qJda+

はっ･･･。

<link rel="stylesheet" href="css.css" type="text/css">
と
<link rel="stylesheet" type="text/css" href="CSSのファイル名.css">
は微妙に違えど同じ物なんですかね。。
試してきます；；
無駄なレス消費ごめんなさい。

496 ：Name_Not_Found：2005/05/04(水) 00:34:39 ID:???

>>492
こんなにドキドキしたのは生まれて初めてだ。ちょっとした娯楽をありがとう。

497 ：Name_Not_Found：2005/05/04(水) 00:44:35 ID:???

>>488
451で解決してるじゃん
指定した要素内全てが半透明になるのは仕様です

498 ：Name_Not_Found：2005/05/04(水) 00:56:57 ID:???

箇条書きのliタグにpaddingを最小(0)に設定しても、
"・"と文字との間が結構空いてしまうのですが、それ以外に間隔を狭める方法はありますか？

もしliタグを使わないならどのタグがお勧めですか？

499 ：498：2005/05/04(水) 01:12:32 ID:???

下のような方法で自己解決しました。
position:relative;left:-4px;

500 ：Name_Not_Found：2005/05/04(水) 01:27:00 ID:???

liタグのlist-style-imageで画像指定したときに、
リストの行が長くて折り返してしまう場合に、画像が中央にきてしまうのですが、
画像が複数行にわたっても上の最初の位置にする方法はないのでしょうか？

501 ：Name_Not_Found：2005/05/04(水) 01:38:37 ID:???

おいおい、画像が複数行にわたるのか？ >>500

502 ：Name_Not_Found：2005/05/04(水) 01:41:46 ID:???

>>499
それは心なしか良くなさげ。
「・」の位置やサイズは各UAが...

503 ：Name_Not_Found：2005/05/04(水) 02:01:59 ID:VZDFfkbt

>>498
私も同じように思ったことがありますが、私の場合は
ul{
　　padding-left : 0;
}
li{
　　list-style : none;
　　margin-left : 0;
}
li:before{
　　content:" - ";
}
こんな感じで無理やり解決しました。
IEだと " - "を表示してくれないけど、そこは我慢。
ちなみに、contentの文字列にマルチバイト文字(日本語とか)を使うと
Safariとかで正しく表示されないので注意です。

504 ：Name_Not_Found：2005/05/04(水) 10:25:10 ID:???

過去ログへのショートカットをつくりますた
http://perape.sakura.ne.jp/archive/hpb/css.htm

505 ：Name_Not_Found：2005/05/04(水) 17:51:14 ID:???

おつかれ。
しかしここの住人にとっては
ケンカ売ってるようにしかみえないのではまいか

506 ：Name_Not_Found：2005/05/04(水) 20:03:08 ID:VZDFfkbt

超ど真ん中なテーブルレイアウトにﾜﾛﾀ
私だったら定義リストで表現するかな。

<h1>Web制作板「CSS」関連スレッド過去ログ倉庫</h1>
<h2>現行スレッド</h2>
<dl>
　　<dt>スレタイ</dt>
　　<dd><a href="～">URL</a></dd>
</dl>

<h2>過去ログ</h2>
<dl>
　　<dt>スレタイ</dt>
　　<dd><a href="～">URL</a></dd>
　　<dt>スレタイ</dt>
　　　：
　　　：
</dl>

507 ：Name_Not_Found：2005/05/04(水) 20:37:39 ID:???

多分ネタだろ・・・。

508 ：Name_Not_Found：2005/05/04(水) 20:38:41 ID:???

別にこのサイトはこのスレだけに絞っているサイトな訳でもにないんだし、
他と同じようにやっているだけだろ。

509 ：Name_Not_Found：2005/05/04(水) 21:19:40 ID:???

http://keizai.xrea.jp/markup/css0a.html

レイアウトに何を使えばいいのかわからなくなってきたorz
ひょっとして、真の意味での見る側にやさしいデザインって、テーブル
じゃないとできないってオチ？

510 ：Name_Not_Found：2005/05/04(水) 21:20:56 ID:???

スタイルシートを切っても、流れと意味を残せれば、それが優しいデザイン（に近い）

511 ：Name_Not_Found：2005/05/04(水) 21:22:24 ID:???

>>509
レイアウトは兎も角背景画像が見る側に優しくない。

512 ：Name_Not_Found：2005/05/04(水) 22:41:11 ID:???

＞スタイルシートを切っても
って表現が気になるんだよなぁ。
「切れた」わけじゃなくて、UAのデフォルトに切り替わっただけなんで。
そもそもHTMLをどう表現するかが「スタイルシート」だからね。

513 ：Name_Not_Found：2005/05/04(水) 23:26:37 ID:???

>>512
切っても、ってのは確認するっていう意味だ
スタイルシートの通用しない携帯端末なんかで閲覧しても、って言い換えてもいい。

とはいえ、あくまでも俺が勝手に思っている指針だからね
当てはまらないこともあるし、そもそもスタイルシート非対応をターゲット層に入れていないなら
はじめから関係ないし。

あんまり気にしないで、ってことで頼みますわ

514 ：Name_Not_Found：2005/05/04(水) 23:45:06 ID:gxrUuVfm

http://cssbug.at.infoseek.co.jp/detail/winie/b075.html

このバグの対策はありますか？

515 ：Name_Not_Found：2005/05/04(水) 23:52:13 ID:???

ｵﾏｲ　アホちゃうか？

516 ：514：2005/05/05(木) 00:01:26 ID:???

すみません。言葉が足りなかったようで・・・。

たとえばテーブルを使うとか、何か方法はないかと思ったのですが
あまり無意味にテーブルを使いたくないので他にいい案はないかと・・・。

517 ：Name_Not_Found：2005/05/05(木) 00:08:09 ID:8IPuflVi

body {
background-color: #cccc00;
}
と指定してあります。

そんでh1をbodyと同じ背景色にしたいのですが、
h1 {
background: url("unko.gif") repeat-x 0% 100%;
}
と
h1 {
background: #cccc00 url("unko.gif") repeat-x 0% 100%;
}
では同じ結果なんですが、どちらが正しいですか？

518 ：Name_Not_Found：2005/05/05(木) 00:10:59 ID:???

>>517
ただしいというか、前者はｈ１の背景が透明になっているという感じ。
それだけ

519 ：Name_Not_Found：2005/05/05(木) 09:48:49 ID:???

>>505
削除しました。スマソ

520 ：Name_Not_Found：2005/05/05(木) 12:25:46 ID:???

もったいない

521 ：Name_Not_Found：2005/05/05(木) 15:39:13 ID:???

HTML批判でサイト潰し
まだ懲りないようで

522 ：Name_Not_Found：2005/05/05(木) 16:09:06 ID:???

ボックスの中にある画像を真ん中の高さにする方法を教えてください。
<td valign="middle">みたいなのをやりたいんですが、
vertical-alignはちょっと違う感じがしたので。

523 ：Name_Not_Found：2005/05/05(木) 16:28:21 ID:???

line-height

524 ：Name_Not_Found：2005/05/05(木) 19:27:19 ID:k2JsmCMV

ちょっと教えて欲しいのですが。
小さなサイズの画像ファイルを拡大して背景画像にする事は可能でしょうか？

background-imageに関する記述を調べても
同じサイズのままの配置のアレンジはあっても
サイズを拡大して表示する方法が見つからないのです。

レンタルのブログを利用しており、アップできる画像のサイズに制限があり
望むサイズの画像がアップできないため
何とか制限一杯のサイズの画像を引き伸ばして表示させたいのです。

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

525 ：Name_Not_Found：2005/05/05(木) 19:50:33 ID:???

>>524
汚くなるだけだと思うが…

526 ：Name_Not_Found：2005/05/05(木) 20:27:14 ID:???

多分、>524には意味が解らない。

527 ：Name_Not_Found：2005/05/05(木) 20:54:56 ID:???

背景のサイズ指定がないのはソフトで背景ファイルそのものサイズを自由に変更できるから
>>524　わかる？　ファイルサイズを大きくせずに表示のピクセル大きくすればいい　汚くなるけど。

528 ：Name_Not_Found：2005/05/05(木) 21:01:07 ID:???

画像にも依るけれど
(もしできたとして)拡大するよりは
減色した方が見るに堪えるような気もする

529 ：524：2005/05/05(木) 21:08:20 ID:k2JsmCMV

>>525-528
返事ありがとうございます。
多少汚くなっても構いません。
(実際にやってそういう問題がでるならやめます)
それはbackground-imageの指定で出来るものですか？

530 ：524：2005/05/05(木) 21:21:57 ID:k2JsmCMV

テンプレにあるサイトをいくつか見ましたが、そういうのないんですよ・・・
http://www.ne.jp/asahi/minazuki/bakera/html/css/colors
http://www.zspc.com/stylesheets/css/ref/desc4.html#itembgimage
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-properties

531 ：Name_Not_Found：2005/05/05(木) 21:36:40 ID:???

>>524
お気づきの通り、そんなプロパティは無いのです。
というか、PNGとかで圧縮してもうｐできないほど厳しい制限があるのか？ｗ

532 ：524：2005/05/05(木) 21:49:10 ID:k2JsmCMV

＞お気づきの通り、そんなプロパティは無いのです
そうですか・・・わかりました。

＞PNGとかで圧縮してもうｐできないほど厳しい制限があるのか？
というか、背景一杯の大きな画像をうｐしても1/4ぐらいの大きさにされてしまうのです。

まあ、背景色と組み合わせて現状でなんとかカバーする事にしました。
ありがとうございました。

533 ：Name_Not_Found：2005/05/05(木) 21:51:21 ID:???

>>524
どこのブログだよ、それ。

534 ：Name_Not_Found：2005/05/05(木) 21:54:00 ID:???

>>532
>というか、背景一杯の大きな画像をうｐしても1/4ぐらいの大きさにされてしまうのです。

ﾊｧ?エラーとかじゃなくて、アップは出来るんかい！？
それって、お前がアップしている画像の解像度が300dpiとかなんじゃネェの？

535 ：Name_Not_Found：2005/05/05(木) 21:54:10 ID:???

質問です。

外部cssの使い回しで、外部cssでdivの文字サイズを指定してあります。
あるhtmlファイルでは、<link rel="stylesheet" ..... > でリンクした後に、
そのhtml内のdivは、文字サイズを指定せずに、ブラウザに任せるデフォルトに戻したいのですが
どのように記述したらよいでしょうか。

<style type=text/css>
div { font-size: normal; }
</style>

これでは文字サイズが固定されたままでした。

536 ：Name_Not_Found：2005/05/05(木) 21:58:47 ID:???

簡単なのは、文字を固定したいdivとしたくないdivをクラスをつけるとかね
pxとかptで固定したのか？　それとも％やsmallとかx-large？

537 ：Name_Not_Found：2005/05/05(木) 22:03:05 ID:???

>>536
ptで固定してあります。
最初からクラス分けしないと、一旦固定してしまったサイズを固定なしに戻すのは不可能でしょうか？

538 ：Name_Not_Found：2005/05/05(木) 22:05:47 ID:???

>>537
そのhtml内のdivだけにクラスつけるとかして、
div．変えたいdivのくらす　｛　font-size：　medium；｝でいけると思う

539 ：Name_Not_Found：2005/05/05(木) 22:08:10 ID:???

>>538
いけました！助かりました。ありがとうございました！

540 ：Name_Not_Found：2005/05/05(木) 22:08:55 ID:???

あー、そいつぁよかった

541 ：Name_Not_Found：2005/05/05(木) 22:12:24 ID:???

すみません、もう一つ関連した質問です。
そのdivは、paddingもpxで固定してありました。
paddingも固定なしに戻すことはできますか？

542 ：Name_Not_Found：2005/05/05(木) 22:14:11 ID:???

>>541
あらためて、変えたいdivにpadding:を指定すればよろし

543 ：Name_Not_Found：2005/05/05(木) 22:14:53 ID:???

書き忘れ。
divはデフォルトで、マージン、ぱぢんぐは０だったと思うから

544 ：Name_Not_Found：2005/05/05(木) 22:17:59 ID:???

>541
頼むから少しは頭使ってくれ。　な？

545 ：Name_Not_Found：2005/05/05(木) 22:28:13 ID:6o2ZAfh4

お聞きします。

<span style="width:3em; border-width:1px; border-style:solid;">giko mona 2ch</span>
<span style="width:3em; border-width:1px; border-style:solid;">giko mona 2ch</span>
<span style="width:3em; border-width:1px; border-style:solid;">giko mona 2ch</span>

と書くとIE6.0（テーブルセルのように内側で改行しつつブロック表示）と
Firefox1.03（改行せず全部横並び）で表示が異なりますが、
どっちのブラウザのほうがCSS的に正しい解釈なのでしょうか。
できればIE的解釈の表示をFirefoxでもできるようにしたいのですが。

546 ：Name_Not_Found：2005/05/05(木) 22:30:39 ID:???

>>543
em再指定で上手くいきました。ありがとうございました！

547 ：Name_Not_Found：2005/05/05(木) 22:31:54 ID:???

Firefox

ブラウザ作れ

548 ：Name_Not_Found：2005/05/05(木) 22:33:05 ID:???

>>545
インラインとブロックの勉強すべし。

549 ：Name_Not_Found：2005/05/05(木) 22:43:10 ID:???

>>545
span span span とくると、ｽﾊﾟﾝｷﾝｸﾞをイメージしてゾクッと来るのだが・・・

550 ：Name_Not_Found：2005/05/05(木) 23:08:52 ID:???

スタイルシートを使ったページに、表を表示させようかと思ってるのだが
普通にテーブルタグで、表を表示させると全然合わない。
スタイルシートを使ったテーブルデザインが
置いてるサイトあれば教えて(　ﾟДﾟ)ﾎｽｨ

551 ：Name_Not_Found：2005/05/05(木) 23:14:35 ID:???

>>549
そういうAAがあったような・・・

552 ：Name_Not_Found：2005/05/05(木) 23:15:10 ID:???

目次も表のうちだよな。table of contentsって言葉もあるし。
ttp://www.ne.jp/asahi/anarchy/saluton/bnlist.htm

553 ：Name_Not_Found：2005/05/05(木) 23:16:36 ID:???

>550 >全然合わない。
これじゃ解らん。きちんと説明しろ。

554 ：Name_Not_Found：2005/05/05(木) 23:28:23 ID:???

Googleの検索結果画面にある"Gooooooooogle"みたいなリンク、
ああいうのは、厳密にはリストにすべきだと思うんだが、
そういうの全部、最適と思われる要素でHTMLを書いていくと、
ものすごーくタグのネストが深くなったり、CSS切る(あるいはCSS非対応ブラ)と
ゲッソリしたりするじゃん?
できるだけStrictに書きたい気持ちはヤマヤマだが…ってな悩み、
藻前らはどの辺で妥協しますか?

…とか、ここに書くのはスレ違い?

555 ：Name_Not_Found：2005/05/05(木) 23:44:26 ID:???

MSゴシックで表示させたら、見た目が詰まってるように感じたので、
letter-spacing で指定して字間を空けてみました。

そうすると、空行(brタグのみ)が詰められて表示されてしまったのですが、
これは回避できるのでしょうか？

試していたブラウザはIE6です。

556 ：Name_Not_Found：2005/05/05(木) 23:47:43 ID:???

※１のテーブルをcssになおしたくて※２に変えたのですが、
同じように表示されません。これは何故でしょうか？どこか間違えていますか。

※１
<table border="1" cellspacing="1" cellpadding="10">
<tr><td>あああああ</td></tr>
<tr><td>いいい<br>ううう<br>えええ<br>おおお</td></tr>
</table>

※２
<style type="text/css"></style>

<table class="css">
<tr><td>あああああ</td></tr>
<tr><td>いいい<br>ううう<br>えええ<br>おおお</td></tr>
</table>

557 ：Name_Not_Found：2005/05/05(木) 23:53:53 ID:???

<table border="1" cellspacing="1" cellpadding="10"> でやりたくない理由を述べよ。

558 ：Name_Not_Found：2005/05/05(木) 23:56:39 ID:???

Webサイト制作初心者質問スレ Part 132にて、
IEとネットスケープで見るとテーブルの縦の長さが違うことについて
質問しました。そうしたらcssで書いたら長さが同じになるかもということで。
cssにしたいと思いました。

559 ：Name_Not_Found：2005/05/06(金) 00:58:01 ID:???

>>55
ＣＳＳ使ってるのにbr連打ですかあ？　恥を知れ。marginで工夫しようね。

>>556
なぜ>>5を見ずに質問する？
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html#border-spacing

560 ：Name_Not_Found：2005/05/06(金) 00:59:09 ID:???

>>555

/* Win IE バグ対策 */
br {
letter-spacing: 0px;
}

561 ：Name_Not_Found：2005/05/06(金) 01:01:29 ID:???

letter-spacingを指定した要素内で連続したbr要素が無視される(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

562 ：Name_Not_Found：2005/05/06(金) 01:28:55 ID:???

>>556
表全体をつかさどるtable要素にパディングは意味なし。
パディングは各セルについてるんだろ。

.css td { padding: 10px; border: 1px; }

563 ：Name_Not_Found：2005/05/06(金) 02:20:11 ID:???

>>556
.css {
border: 1px outset;
border-collapse: separate;
border-spacing: 1px;
line-height: 1em;
}
.css td {
border: 1px inset;
padding: 10px;
}

564 ：Name_Not_Found：2005/05/06(金) 03:11:45 ID:???

ttp://homepage2.nifty.com/m-sato/

・・・。

565 ：Name_Not_Found：2005/05/06(金) 04:00:05 ID:???

566 ：Name_Not_Found：2005/05/06(金) 06:44:57 ID:???

>>553
お前国語0点だろ？
デザインが合わないって意味だと思う。
普通に理解できる。

567 ：Name_Not_Found：2005/05/06(金) 09:08:38 ID:mM/juuSA

<div>で、classとidを同時に併用できるんでしょうか？（実際のブラウザでできるのか？
というよりは、CSSの設計に照らし合わせて、どう書くべきかみたいなところが疑問）
つまり <div class="mybox" id="box1"> みたいな。

.mybox{
　　background: #CCC;
　　border: none;
}
としたmyboxクラスを作る。HTML中には<div class="mybox">という部分が
何回も出てくるわけです。

そしてそのうちの、特定の<div>だけ、.myboxクラスなんだけれども、例えば
borderを表示させたい。そういうときに
div#box{
　　border: 1px;
}
みたく用意しておいて、その<div>だけ、<div class="mybox" id="box1">
とすることは、できるんでしょうか？

また、良し　とされることなんでしょうか？

よろしくお願いします。

568 ：Name_Not_Found：2005/05/06(金) 09:18:43 ID:???

>>567
できる。

569 ：Name_Not_Found：2005/05/06(金) 09:20:48 ID:???

>>567
はいできます。そしてそれは正しい記述です。

適用するスタイルが複数あって同じプロパティが重複する場合、
id で選択されたスタイルは class で選択されたスタイルよりも
優先されます。

570 ：Name_Not_Found：2005/05/06(金) 09:35:21 ID:???

idってnameの代わりですか？

571 ：Name_Not_Found：2005/05/06(金) 09:56:01 ID:mM/juuSA

>>568-569
ありが㌧ございました！

572 ：Name_Not_Found：2005/05/06(金) 10:11:40 ID:???

>>570
違います。HTML の場合、id 属性はほとんどの要素で指定することが
できますが、name 属性が指定できる要素は限られています。

HTML 4.01 や XHTML 1.0 では id 属性と name 属性に同じ値を指定
しなければならない要素がありますが、これは互換性のための措置で、
CSS からは両者を別の属性とみなします。

# セレクタは DTD で ID 型が指定されている属性 (HTML では id 属性)
の値を選択しますが、name 属性は ID 型ではないので選択することは
できません。

573 ：Name_Not_Found：2005/05/06(金) 14:47:31 ID:???

>>572
サンクス。
そうすると、ｉｄの存在意味が分かんないね。
全部、classでいいじゃんって思うんだけど。

574 ：Name_Not_Found：2005/05/06(金) 15:04:00 ID:???

idはリンクで飛べる。

まあ、マークアップする上で使い分ければイイだけだしね。
nameよりも便利なのは確かだ。

575 ：Name_Not_Found：2005/05/06(金) 16:53:17 ID:???

DOMでいろいろしたい時とかにもidは使う。

idはスタイルシートのためだけのもんじゃないからね
文書中で一意な識別子として使いましょう

576 ：Name_Not_Found：2005/05/06(金) 17:01:45 ID:???

>>574
>>575
なるへそ。
スタイルシート以外での使い道があるんだな。
そのためか。納得。

577 ：Name_Not_Found：2005/05/06(金) 18:29:48 ID:???

フォームの値を枠内でセンタリングしたいって言われたんですが

input,textarea{
text-align:center;
}

<input type="text" value="12345" size="10">←「12345」をセンタリングしたい

だと、MacIEでセンタリングされませんでした。。
根本的にtext-alignで実現するのが間違いなんでしょうか。。

何かよい方法をご指南くださいませ。。

578 ：Name_Not_Found：2005/05/06(金) 18:36:21 ID:???

魔神

579 ：Name_Not_Found：2005/05/06(金) 23:37:50 ID:???

>>559 を見てふと思ったのですが、
節・章を表すようなタグってありましたか？

brタグを使わない場合、
空行はどうやって表現するのでしょうか？

580 ：Name_Not_Found：2005/05/06(金) 23:52:47 ID:???

Hxタグでは駄目か？＞節・章を表す

別に<br />使っちゃいけないということではないよ。
ただ、マークアップ言語として適切な使い方をしなさいということ。
隙間を空けたいならマージン、段落として区切りたいなら</p>とかさ。
「段落の区切りではないけど、読みやすさを考慮して1行空けたい」
なんて場合は<br />でいいと思うけどな。
連打はどうかと思うが。

581 ：Name_Not_Found：2005/05/07(土) 00:35:24 ID:???

>>577
フォームコントロールに対するスタイルの指定は
必ずしも対応させる必要がないからね。
MacIEでは対応していないんじゃないかな。

↓にスクリーンショットを含むページへのリンクがあるけど
なぜか今行こうとしてもつなげないよ。(昨日は見れたのに)
ttp://hail2u.net/blog/webdesign/about_form_controls.html

582 ：Name_Not_Found：2005/05/07(土) 01:03:36 ID:dSmlWnPA

>>579
えーと、ちょっとお聞きしたいのですが、
その「空行」は、どのような意味を持っているんですか？

583 ：Name_Not_Found：2005/05/07(土) 03:02:23 ID:???

質問です。
現在イラストのサイトを作っています。
メニューページに各作品へのリンクをリスト表示しているのですが、
ページの下部にバナーを貼りたいです。
そこで、

<ul><li>～</li></ul>
<div style="position:relative;bottom:8px;width:85%;margin:20px auto;">
<p>
<img src="banner.gif">
</p></div>

このようにしてみたのですが、
これだとウィンドウが小さかったり今後リストが増えたりした場合に
リストとかぶってしまい作品へのリンクが使えません。

「スクロールバーが出ていなければ表示領域の下部に表示」
「スクロールバーが出ていたらリストとかぶらない位置に移動」
なんてのは無理でしょうか。
ULタグに下マージンを設定しても駄目でした。
positionの使い方がまだよく分かってないのでアホなこと言ってたらすみません。

584 ：Name_Not_Found：2005/05/07(土) 08:54:35 ID:dSmlWnPA

>>583
例えば、
ul{
　　min-height : 90%;
}
とすると、ul以降の要素が強制的に下部10パーセント以降に追いやられるので
同じ意図の結果になると思う。
ただし、IEはmin-height対応してないかも。

あるいは、
img{
　　float : right;
}
とやれば、横幅に十分な余裕がある限り、かぶることはないだろうと思います。
バナーを絶対に左側に表示させたいっていうデザイン上の意図があれば
また別ですが。

585 ：Name_Not_Found：2005/05/07(土) 12:47:05 ID:TQL1W34p

将来のcssでターゲットできますかね。

文中で
<div id="kono_basyo"></div>

文末に
<div id="adv">長たらしい広告タグ</div>

これを上のkono_basyoに表示させるわけです。

表示位置に書きゃいいわけですけど、
本文に余計なモノを挟みたくないし、
CSSが効いていない状態では見苦しいったらありゃしない。
下に書いてposition:absoluteも試したけど、
フォントサイズ変えると場所がずれるから使い物にならない。

586 ：Name_Not_Found：2005/05/07(土) 12:53:06 ID:???

>585
ちっとは勉強しろや!
使い物にならないのはおまいの頭だ。

587 ：Name_Not_Found：2005/05/07(土) 13:10:21 ID:???

なにをどう勉強したらいいのかくらい教えれ。
ののしるだけなら、おまいの頭のたかが知れている。

588 ：Name_Not_Found：2005/05/07(土) 13:11:37 ID:???

頭「も」たかが知れてる、な。

589 ：583：2005/05/07(土) 13:42:56 ID:???

>584
ありがとうございます。
min-heightとは思いつきもしませんでした。
フロート使う方は、リストの幅が220pxしかないので難しいかも(´･ω･｀)

ところで、（後出しになってしまってすみません）
作品へのリストは入れ子にして、上の階層のリストをクリックすることで
下の階層を表示するということをしたいのですが
（これはJavaScriptでできました）
そうすると、下のリストを表示するたびにページの高さが
どんどん変わっていってしまいますよね。
この場合、やはりページ下部のバナーにかぶってしまうんです。
こういう構成はあきらめたほうがいいでしょうか。

590 ：Name_Not_Found：2005/05/07(土) 13:43:35 ID:???

>なにをどう勉強したらいいのかくらい教えれ。

　　ゆとり教育のなれの果てだな。

591 ：Name_Not_Found：2005/05/07(土) 14:04:26 ID:???

結局は軽口たたくだけかい。
能無しなら能無しらしく黙ってヲチだけしてろ。

592 ：Name_Not_Found：2005/05/07(土) 14:04:42 ID:???

＞ののしるだけなら、おまいの頭のたかが知れている。

593 ：Name_Not_Found：2005/05/07(土) 14:56:23 ID:???

>>585
とりあえず、>>2-10 のリンク先のサイト全部読む。
で、そのリンク先に書いてある事が理解出来たら、
自分が穴掘って隠れたくなる様なアホな質問をしたって事が分かると思うよ。

594 ：Name_Not_Found：2005/05/07(土) 16:38:00 ID:???

>586
>フォントサイズ変えると場所がずれるから
この辺が、もう、どうにもあきまへんな。スタイルシートを何だと思とるんや。

595 ：Name_Not_Found：2005/05/07(土) 17:01:15 ID:???

ようするに、おまえら全員誰も適切に説明できないわけだ。
わからないなら黙ってればいいのに。必死になって恥ずかしーw

596 ：Name_Not_Found：2005/05/07(土) 17:09:55 ID:TQL1W34p

やれやれ。能無し君向きの簡単な質問じゃなかったから癪に障ったのかい。
まず、おまいが>>2-10まで読んで出直してこい。
>フォントサイズ変えると場所がずれるから
はあ？　フレキシブルレイアウトで絶対指定すればズレるだろうが。
フォントサイズを変更してもブラウザのサイズを変更してもズレる。
まさか固めろとでも？　固めたってモジラではフォントサイズは変更できる。

597 ：Name_Not_Found：2005/05/07(土) 17:22:40 ID:???

質問です。
<div id=screen>の幅と高さを、ブラウザ画面一杯にしたいのですが、どのように指定すれば良いでしょうか？

#screen{
position: absolute;
top:0; left:0;
width: 100%;
height:100%;
}

これでも画面一杯になりませんでした。

598 ：Name_Not_Found：2005/05/07(土) 17:28:20 ID:???

>>597
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html
次スレ以降FAQに入れたいから誰かうまい文章考えてくれない？
俺も考えるけど。もしくは入れる必要がないならそういってくれ。

599 ：Name_Not_Found：2005/05/07(土) 17:40:09 ID:???

親子共々１００％

600 ：Name_Not_Found：2005/05/07(土) 17:41:47 ID:???

>>598
なるほど！わかりました、ありがとうございます。
FAQにあるといいですね。

601 ：Name_Not_Found：2005/05/07(土) 18:27:08 ID:???

>>596
>はあ？　フレキシブルレイアウトで絶対指定すればズレるだろうが。
要するに、君が％指定で満足に組めないだけだろ。
ズレるのズレないのって、縦横自在のウェブ・デザインで固めたがるのがそもそも笑止。

602 ：Name_Not_Found：2005/05/07(土) 18:57:39 ID:???

能無しは藪睨みしかできないもんらしいな。おまえﾘｱﾙでｳﾞｧｶだろ。

メインフローの中に無関係要素を書き込みたくないから、余計物をソースの下にまとめ書きして、
それをdivで指定した位置にターゲットではめ込めたら便利だろうな、
余計なモノを挟み込むとCSSが無効で素のHTMLが表示されたときに見苦しいから、
という話をしたんだろうが。分かってんのか、能無し君。
position:absoluteじゃ崩れるからできないとはじめから断ってんだよ。
CSSでレイアウトしてキレイなのは当然、
素のHTMLもキレイなほうがいいだろ。

603 ：名無し募集中。。。：2005/05/07(土) 19:05:20 ID:???

onfocus="this.blur()"←これをリンククリック時に点線を出さないため使っていますが、CSSで設定できないでしょうか？

http://64.233.179.104/search?q=cache:9jOSIf8lS0IJ:beta.b.hatena.ne.jp/1059110803+onfocus%3D%22this.blur()%22%E3%80%80%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88&hl=ja&lr=lang_ja

↑で見た限り無理そうなのですが、ご存知の方いましたら教えてください。

604 ：Name_Not_Found：2005/05/07(土) 19:06:06 ID:???

>>585
空のdivが「きれいなHTML」だとはとても思えないけど。
それはおいといてどういうことを試したんだ？

605 ：Name_Not_Found：2005/05/07(土) 19:09:32 ID:???

質問です。

#layer{
position:absolute;
top:0;
width:635px;
height:100%;
}

このレイヤーを横方向の中央に持ってくるにはどうしたらいいですか？
text-align:center; とすると、レイヤー内の文字だけセンタリングされました。

606 ：Name_Not_Found：2005/05/07(土) 19:09:38 ID:???

>>603
outline。ただしWinIEは対応していない。
個人的にはリンクを確認しづらくなるのでやめたほうがいいと思うが。

607 ：Name_Not_Found：2005/05/07(土) 19:11:43 ID:???

>>605
F・A・Q！ F・A・Q！ >>6

608 ：603：2005/05/07(土) 19:50:32 ID:???

>>606　レスありがとうございます。
あの点線に色をつけるとかで色々試行錯誤してみたいと思います。

609 ：Name_Not_Found：2005/05/07(土) 19:51:42 ID:???

>>607
ありがとうございます。FAQ>>6で大分参考になりましたが、どうしてもセンターに寄りません。
absoluteにしてしまうと、横方向だけセンタリングというのは無理なのでしょうか？

<div align=center style="
background-color:red;
position:absolute;top:0;
margin-left:auto;
margin-right:auto;
width:400px;
height:100%;
">SCREEN</div>

610 ：Name_Not_Found：2005/05/07(土) 19:55:01 ID:???

>>609
left: 50%;
margin-left: -318px;

611 ：Name_Not_Found：2005/05/07(土) 19:56:35 ID:???

>>604
話をごく簡単にして、二列組のHTMLの構造が下のようだとするだろ。

<div id="左">本文</div>
<div id="右">
（邪魔者要素）
端書</div>

邪魔者を最初に右に出して、左、右とフロートさせれば文章のあいだに
邪魔者が入らないとは言わないでくれ。実際はもっと錯綜しているのだ。

CSSでレイアウトする分は問題ない。きれいに処理するよ。
しかしCSSが効かない環境では文章のド真中に邪魔者が居座るわけだ。
これはあまりに見苦しい。そこで、

<div id="左">本文</div>
<div id="右">
<div id="邪魔者"></div> ←空div
端書</div>

として、</body>の直前あたりに書いた余計なタグをdiv targetでid=邪魔者に
埋め込めれば、CSSが効かずに素のHTMLが表示されたときにも
本文のド真中に邪魔者が居座るような見苦しいレイアウトは避けられる。
素のHTMLが表示されてキレイ、ソースの見た目もキレイだぞ。
フロー別にソースをまとめられるわけだから。
そんなCSSはいまは無理でも次の時代はできますか、と事情通に尋ねたのよ。

612 ：Name_Not_Found：2005/05/07(土) 20:00:24 ID:???

>>602　罵倒に語を費やす前に、舌足らずな説明能力を反省しなさいね。

613 ：Name_Not_Found：2005/05/07(土) 20:04:58 ID:???

みんな色々工夫してるんだねぇ

614 ：Name_Not_Found：2005/05/07(土) 20:08:09 ID:???

だから、空divのどこがキレイなんだか。>>611
内容生成ならcontentプロパティーか、さもなきゃJavaScriptとかの仕事だしな。

615 ：Name_Not_Found：2005/05/07(土) 20:17:16 ID:???

>>611
要するに、ソース上では

本文
端書
邪魔者

という順に現れるのを、

本文｜邪魔者
　　　├───
　　　｜端書

というふうに表示させたいのか？
邪魔者と端書の高さは可変で。

616 ：Name_Not_Found：2005/05/07(土) 20:22:48 ID:???

>>610
すごい！できました。多謝。

617 ：Name_Not_Found：2005/05/07(土) 20:48:03 ID:???

俺の説明は完璧なので、言いがかりを付けられるいわれなど無い。
お前らの日本語読解能力が異常なだけ。

あ、ここに日本人はいなかったのか！
どうりで納得。
度を超えたレベルの超絶バカばっかりだから、日本の将来は大丈夫なのだろうかと心配しちまったよ。ははは

618 ：Name_Not_Found：2005/05/07(土) 21:02:29 ID:???

↑
納得、解決済み

次の質問どうぞ
↓

619 ：Name_Not_Found：2005/05/07(土) 21:27:01 ID:???

>>615
そう。そういうやつが1ページ内に数箇所あるんだね。だから、
下に邪魔物を一まとめにすれば、メインフローはまさに「コンテンツ」だけになって
とってもいい感じだろ。特に、こっちで用意したCSSが効かない状況では。
>>614
空divが超キレイとは言わないが、コンテンツの合間合間に数十行に及ぶ
本文とは関連しないタグ、スクリプトが入ると見苦しいし、
読みにくいだろ。ソースも、素のHTMLも。キレイなのはCSSで整形した後だけだよ。
こういう場合、スクリプトのお出ましというのはよく分かるよ。でもねえ、
レイアウトの問題なんだから将来はCSSでできるようになればいいなあ、と。
position:absoluteがオッケーなら div target もあっていいでしょ。

620 ：Name_Not_Found：2005/05/07(土) 22:22:24 ID:???

text-align は横方向ですが、縦方向のtext-alignを指定するプロパティーは何ですか？

621 ：Name_Not_Found：2005/05/07(土) 22:25:15 ID:???

＞text-align は横方向ですが

m9（^Д^）ﾌﾟｷﾞｬー

622 ：Name_Not_Found：2005/05/07(土) 22:48:46 ID:???

<div align=center style="
background-color:red;
position:absolute;top:0;
margin-left:auto;
margin-right:auto;
width:400px;
height:100%;
vertical-align:50%;
">SCREEN</div>

vertical-align:50%;を入れても、SCREENの文字が中央に来ません。どうしたら中央に来ますか？

623 ：Name_Not_Found：2005/05/07(土) 22:50:55 ID:???

<div align=center style="
background-color:red;
position:absolute;top:0;
left:50%;
margin-left:200px;
width:400px;
height:100%;
vertical-align:50%;
">SCREEN</div>

一部　古いプロパティのままだったので書き直しました。
SCREEN文字を縦方向にも中央に置きたいです。

624 ：Name_Not_Found：2005/05/07(土) 22:55:47 ID:???

>>619
何だか知らんが、本文と関係ない邪魔者をそんなにも差し挟むのがレイアウトの問題か？
サイト設計とhtmlからやり直せ。
スクリプトなんてsrcで参照すれば一行で済むだろ。あほか。

625 ：Name_Not_Found：2005/05/07(土) 22:56:52 ID:???

>>623　坊や、ＦＡＱも見ないで質問してはいけませんよ。

626 ：Name_Not_Found：2005/05/08(日) 00:10:08 ID:???

ところでＦＡＱって何て読むの？

627 ：Name_Not_Found：2005/05/08(日) 00:12:12 ID:???

言葉責めですか。

628 ：Name_Not_Found：2005/05/08(日) 00:14:06 ID:???

ファッキュー

629 ：Name_Not_Found：2005/05/08(日) 00:15:49 ID:???

>>619
慶応大学行って来い。　　　　　意味解るよな？

630 ：Name_Not_Found：2005/05/08(日) 01:31:19 ID:???

I FAQ

631 ：Name_Not_Found：2005/05/08(日) 01:35:09 ID:???

>>626
http://ja.wikipedia.org/wiki/FAQ

632 ：545：2005/05/08(日) 16:20:40 ID:???

<table>に display:inline を使ってなんとかFirefoxでも同じようにできそうです。
㌧クス。

633 ：Name_Not_Found：2005/05/09(月) 14:53:13 ID:Lexgv517

　|---------------|
　|　　　　　　　　　 * |
　|---------------|
　| ああああああ |
　| ああああああ |
　| ああああああ |

中央寄りに作られたボックスの
*の位置に「CONTACT」という文字を持ってきたいとします。
しかしHTML上では「ああああ」よりも後に
<div class="header">
<a href="contact.html">CONTACT</a>
</div>を書きたいので、
絶対位置指定で

.header{
positon:absolute;
top:20px;
}

この様に書きました。
こうするとうまく*の位置にCONTACTが入ったのですが、
ウィンドウを横に広げた時に、縦の位置はいいのですが
横の位置は固定されたまま動きません。

中央寄りになったボックスで、絶対位置指定で*の部分に
CONTACTを持ってくるにはどうすればいいでしょうか？

634 ：633：2005/05/09(月) 14:54:34 ID:Lexgv517

ずれました。こうです
　|------------|
　|　　　　　　　 * |
　|------------|
　| ああああああ |
　| ああああああ |
　| ああああああ |

635 ：Name_Not_Found：2005/05/09(月) 15:09:13 ID:???

>>633
絶対位置指定など使うまでもなくtext-align: rightじゃいかんのか？

636 ：633：2005/05/09(月) 15:35:28 ID:/SX6/Gfm

>>635
そうすると*の位置にCONTACTが上がって来ないんですよ。
CONTACTは「ああああああ」よりも下に記述されているので、
そのまま「ああああああ」の下に書き込まれます。

637 ：Name_Not_Found：2005/05/09(月) 15:55:14 ID:???

>>636
何でそういう構造になってるのかがわからんが
絶対位置指定とtext-align: rightを同時に指定すればいいのでは。

638 ：633：2005/05/09(月) 15:57:56 ID:/SX6/Gfm

>>637
絶対位置指定もtext-align:rightも指定してるんですけど
ウィンドウ横幅を広げた時に、CONTACTが
ボックスの外にハミ出してしまうんですよ。width無視されるし・・。

スタイルシートを切った時に、CONTACTが一番上に来られると困るので
下に書きたくこういう構造になってます。

639 ：Name_Not_Found：2005/05/09(月) 16:21:07 ID:???

今はどういう風に書いてるんだよ

640 ：Name_Not_Found：2005/05/09(月) 16:47:28 ID:rEMzinR3

ttp://EAOcf-526p83.ppp15.odn.ne.jp/
ｗｗｗｗｗｗｗｗｗｗｗｗおｋうはっｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
うぇｗｗｗうぇうはっｗｗｗｗｗｗｗｗｗｗｗｗ
うはっっおｋｗｗｗｗｗｗうぇｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

641 ：633：2005/05/09(月) 17:04:07 ID:???

>>639
#contact{
float:right;
width:760px;
text-align:right;
position:absolute;
top:25px;
}

642 ：Name_Not_Found：2005/05/09(月) 17:32:35 ID:CD31O23I

OSX IE5.2 safari1.2.3を使用しています。
hタグで囲んでスタイルシートで行間調整しているのですが、
safariで見ると行間がものすごく開いてしまいます。
これはどうしようもない現象なんでしょうか？

<h1 class="css">文字</h1>

cssには{line-height: 14px;font-weight: normal}とスタイルシートで調整しています

643 ：Name_Not_Found：2005/05/09(月) 18:02:07 ID:???

>>642
多分line-heightの問題。
ボーダーなり背景色なりを変更して確かめてみれ。

644 ：Name_Not_Found：2005/05/09(月) 20:44:27 ID:???

WinXP IE6です。
li要素に「display:inline;」と指定して、リストを横並びにさせたいのですが、
マージン・パディングを0にしても、「list-style:inside;」にしても、
要素と要素の間が開いてしまいます。どうにか出来ないでしょうか？

645 ：Name_Not_Found：2005/05/09(月) 20:45:17 ID:???

>>644
vertical-align: bottom;

646 ：Name_Not_Found：2005/05/09(月) 20:55:05 ID:???

>>645
オマイって奴は・・・

647 ：Name_Not_Found：2005/05/09(月) 21:28:24 ID:???

>>644
<li>hoge</li><li>hage</li>...

648 ：Name_Not_Found：2005/05/09(月) 21:32:32 ID:???

>>641　floatとpositionの同時指定は無意味だから止めい。

649 ：Name_Not_Found：2005/05/09(月) 22:01:26 ID:???

>>641
>>633を見る限りid="contact"なんて見当たらないが？
とりあえず
>中央寄りに作られたボックス
にposition:relative;
.headerにposition:absolute:top:0;right:0;で右上に来ないか？

650 ：Name_Not_Found：2005/05/09(月) 22:48:00 ID:???

contact（笑）

651 ：633：2005/05/09(月) 22:58:09 ID:???

>>649
全然駄目です・・　ちょっと整理しました

HTMLソース-------
<div id="header">
</div>

ああああああ

<div id="contact">
CONTACT
</div>

CSS---------------
#header{
margin: 30px 0px 0px 0px;
width:700px;
height:30px;
}

#contact{
position:absolute;
top:0px;
right:0px;
}

こうするとheaderのボックス内に入らず、
ページの右上隅にCONTACTが来てしまいます。
positionをrelativeにすると、「ああああああ」の下にCONTACTが来てしまいます。

652 ：Name_Not_Found：2005/05/09(月) 23:13:17 ID:???

>>651
ああああああはどんなタグで囲まれてるの？

653 ：633：2005/05/09(月) 23:14:32 ID:???

>>652こんな感じです

<div id="aaa">
ああああ
</div>

#aaa {
text-align:center;
width:760px;
margin-right:auto;
margin-left:auto;
}

654 ：Name_Not_Found：2005/05/09(月) 23:37:27 ID:???

>>651
#headerって内容はないの？だとしたら存在意義がわからないんだけど。
ま、それはともかく、#contactの幅が760pxと決まっているのなら
(>>633から察するに#aaaと同じ幅なんだよね？)

#contact {
position: absolute;
width: 760px;
left: 50%;
top: 0px;
margin-left: -380px;
text-align: right;
}

でいいんじゃない？

655 ：Name_Not_Found：2005/05/09(月) 23:38:04 ID:???

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

</style>
<title>test</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="aaa"><p>あああああああああああ</p></div>
<div id="contact"><a href="contact.html">CONTACT</a></div>
</div>
</body>
</html>

656 ：633：2005/05/09(月) 23:48:25 ID:???

>>654-655
おおおＯＫです！！！バッチリボックス内に来ました！
どうもありがとうございました！！

657 ：Name_Not_Found：2005/05/10(火) 01:14:39 ID:3aXiN0hZ

質問です。

似非フレームを使ってページ全体を縦に3分割しています。
Opera使って閲覧すると、ページ自体のスクロールバーが出てこなくなりますが、
何故か一部のページだけ下にスクロール出来るようになり、真っ白なページが永遠と表示されます。

HTMLの構造は全く一緒で内容が違うだけです。強いて違いを上げるならば、縦に長いページだという事くらい。
OSはWINXPです。

658 ：Name_Not_Found：2005/05/10(火) 01:21:46 ID:???

>>657
あんたがどうやって擬似フレームを作ったのか言わなきゃ誰もわからないわさ。
あと関係ないが「永遠と」→「延々と」

659 ：Name_Not_Found：2005/05/10(火) 01:36:08 ID:???

>>657
エセ・フレームだからじゃねーの？

ぎじ【疑似/擬似】

本物と区別のつけにくいほどよく似ていること。

えせ【〈似非〉/〈似而非〉】

似てはいるが本物ではない、見せ掛けだけの、の意を表す。
劣っている、価値のない、の意を表す。

の差では？

つか、その説明で、どーゲイイン（←何故か変換出来ない）を言い当てろと？

660 ：Name_Not_Found：2005/05/10(火) 01:53:49 ID:3aXiN0hZ

>>658
body{margin: 0;height : 100%; color:
左#header{
color: white;
width:19%;height:100%;
position: absolute; left: 0px; top:0px;overflow: hidden;
background: black ;}
まんなか#index{width:62%;height:100%;
position:absolute;left:19%; top:0px ;overflow:auto;
background-color:white;}
みぎ#footer{color: white;
width:19%;height:100%;
position: absolute; left: 81%; top: 0px; overflow:hidden;
background: black;}
です。

661 ：Name_Not_Found：2005/05/10(火) 02:14:51 ID:???

>>660
えーと、一行目？

662 ：660：2005/05/10(火) 02:18:20 ID:???

ｽﾏｿ、ﾐｽ
body{margin: 0;height : 100%; color: black;}

663 ：Name_Not_Found：2005/05/10(火) 02:42:12 ID:???

>>660
全てposition:absolute;（ついでにoverflow:hidden;）でどーしろと？

664 ：Name_Not_Found：2005/05/10(火) 09:27:52 ID:???

>>655-656　空divは感心しないナ。それでいいのか？

665 ：Name_Not_Found：2005/05/10(火) 09:41:00 ID:???

現状のCSSでは、IE対応状況なんかも考えるとある程度の空タグや（nbsp;を入れても良いけど）入れ子
は仕方が無いジャン？

666 ：Name_Not_Found：2005/05/10(火) 09:44:42 ID:???

まあそれはそうだが>>655の場合は別に使う必要ないやろ。

667 ：Name_Not_Found：2005/05/10(火) 09:46:20 ID:???

入れ子は（或る程度まで）仕方無いが、空divは不要だ。
中身のない<div></div>と とは到底一緒にできん。

668 ：Name_Not_Found：2005/05/10(火) 10:03:48 ID:???

じゃあどうやって実現する？

669 ：Name_Not_Found：2005/05/10(火) 10:04:56 ID:???

ああ・・・ごめん、枠画像とかやってるわけじゃないのね。
めんどくさくてソース良く見てなかった(^ω^； )ゝ

670 ：655：2005/05/10(火) 10:43:54 ID:???

>>664
書かれていないだけで空じゃないのかも、と思ったので>>655のように書きました。
僕も空divは不要だと思っています。
#containerの上部にpadding取るだけで解決する内容ですし…。

671 ：642：2005/05/10(火) 10:44:38 ID:ATXTk4ir

>>643
行間が広がっているのはわかるのですがline-heightの値を小さい値に変えても変化がないので
そういう仕様かと思ったんです。
これ以上狭くするのは無理なのかな・・・

672 ：642：2005/05/10(火) 10:54:39 ID:ATXTk4ir

すいません。行間って言い方は違うかもしれません。
<h1 class="css">文字1</h1>
<h1 class="css">文字2</h1>
と書いた時文字1と文字2の間が広がってしまうということが言いたかったんです。

673 ：Name_Not_Found：2005/05/10(火) 11:00:22 ID:mZp0YCVs

ＣＳＳはＩＴ業者の延命のための陰謀である。

ＷＥＢ制作はソフトの進化により素人でも間単になった。
ＩＴ業者は価格低下に苦しんだ。
そこでＨＴＭＬより敷居の高いＣＳＳを普及させることにより、
ＷＥＢ制作を専門業者の独占事業にしようとしたのである。
これはインターネットの思想とまっこうから対立する。
我々はＣＳＳに断固反対し、一切使うのをやめることで、
ＣＳＳの普及をくい止めなければならない！

674 ：Name_Not_Found：2005/05/10(火) 11:06:51 ID:???

>>672
それはマージンを調整

675 ：642=671=672：2005/05/10(火) 11:15:53 ID:???

ありがとうございます。
h1{margin:0px 0px 0px 0px;}と書いて狭くできました。
この方法↑が正しいかは分かりませんが、とりあえず解決できました。

676 ：Name_Not_Found：2005/05/10(火) 11:44:06 ID:???

>>675
margin: 0;　で十分かと。

677 ：Name_Not_Found：2005/05/10(火) 12:23:11 ID:???

>>673
>そこでＨＴＭＬより敷居の高いＣＳＳを普及させることにより、
>ＷＥＢ制作を専門業者の独占事業にしようとしたのである。

敷居高いか…？ｗ

678 ：Name_Not_Found：2005/05/10(火) 14:32:47 ID:???

フロートによる段組をする場合
クリアをしないといけないとありますが

<div class="wrapper">
<div class="floatleft">
...
</div>
<div class="floatright">
...
</div>
<div class="clear"></div>　　←ココ
</div>
こうするのと

<div class="wrapper">
<div class="floatleft">
...
</div>
<div class="floatright">
...
</div>
</div>
<div class="clear"></div>　　←ココ

こうするので、何か違いはありますか？
イメージ的には2列のboxができるものとしてください。
どちらかが正しい文法とかありますか？
よろしくな、おまえら。

679 ：Name_Not_Found：2005/05/10(火) 14:57:58 ID:???

>よろしくな

　　やだ

680 ：Name_Not_Found：2005/05/10(火) 15:35:48 ID:???

>>679
全然違う。試してみればわかると思う。
あと、どうせ空要素つかうなら<hr>とかにしておいた方がまだましかと。

今のままでは両社とも文法的にはダウト。

681 ：Name_Not_Found：2005/05/10(火) 15:36:37 ID:???

>>679
あと、最後の一行は

おまえら、よろしくお願いします。

とすると感じよかった。

682 ：Name_Not_Found：2005/05/10(火) 16:03:00 ID:???

>>680
解決策をご教授下さい。
テメエよ、よろしくおねがいします。

683 ：Name_Not_Found：2005/05/10(火) 16:19:25 ID:???

>>682
解決すべき問題がないじゃん。

684 ：Name_Not_Found：2005/05/10(火) 16:28:17 ID:???

>>683
どちらの記述がよくて
どういうクリアー方法がありますか？
教えてください、(´･ω･`)ﾃﾒｴ！

685 ：Name_Not_Found：2005/05/10(火) 18:01:58 ID:???

>>684
m9(＾Д＾)ﾌﾟｷﾞｬｰ

686 ：Name_Not_Found：2005/05/10(火) 18:25:48 ID:???

そんなにテメェが言いたいか

687 ：Name_Not_Found：2005/05/10(火) 18:28:01 ID:???

どいつもこいつも質問の仕方が下手なので、丁寧で、なおかつ確実に回答をもらえる質問の仕方を教えてやるよ。

　どちらの記述がよくて
　どういうクリアー方法がありますか？
　14歳の女子中学生ですが、どうぞよろしくお願いします。

覚えとけ。

688 ：Name_Not_Found：2005/05/10(火) 18:39:13 ID:???

>>687
うｐ！うｐ！

689 ：678：2005/05/10(火) 18:56:35 ID:???

14才ではありませんが
一応女でつ･･･

まあまあ若い方･･･？

690 ：Name_Not_Found：2005/05/10(火) 19:32:48 ID:???

ネタ質問乙

次の質問ﾄﾞｿﾞｰ↓

691 ：Name_Not_Found：2005/05/10(火) 20:02:00 ID:???

>>684
>>680 にも書いてある（ように読める）けど、
文法（謎）に気を配るなら、<div>は空要素になりえないから、
<br />とか<hr />とか<img src="" />とかその辺を使うのがいいんじゃないかとおもった。

692 ：Name_Not_Found：2005/05/10(火) 23:32:21 ID:???

>>691
そもそも <div></div> は文法上、何も間違ってないのでは?
ISO-HTML では禁止しているけど、XHTML では XML の仕様上、
可能な内容に #PCDATA を含むなら、0 文字の #PCDATA として
空になりうる。

ただし XHTML 1.0 では空要素でない要素に対して、たとえ内容が
空であっても <div /> のような書き方はすべきでないとしている。

<img src="" /> は自分自身の URI を画像として参照することになる。
src="" と書くこと自体は文法違反ではないが、実用上ありえない。
それに alt は必須なので省略できない。

693 ：Name_Not_Found：2005/05/10(火) 23:41:37 ID:ntf443K7

ブログやってます。
テンプレートの中のCSSをいじってるのですが下記の点が分かりません。
引用する時に指定するブロックで

blockquote {
margin: 3px;
padding: 20px;
background-color: #fafoe6;
border: 1px dashed #FFA500;
}

というのがあって枠線やその破線の指定などは分かったのですが、
背景色が WIN XP&IE 6、MacOS9&NS6/NS7、では反映されません。
MacOS9&IE5.17では指定通り背景色がちゃんと付きます。
上記では破線しか反映されず見にくいので、
ネスケはともかく（すみません）WIN&IE6の人がほとんどなので
そちらにはきちんと見せたいのですがどうしたらいいでしょうか。

背景色は薄いオレンジにしていて（地の文章のバックは灰色）
「引用」とはっきりわかるようにしたいのです......。

694 ：Name_Not_Found：2005/05/10(火) 23:48:13 ID:???

>>693
background-color: #faf "o" e6;

695 ：Name_Not_Found：2005/05/10(火) 23:48:47 ID:???

background-color: #fafoe6;　←　ｏオーじゃなくて０ゼロだろ？

696 ：693：2005/05/11(水) 00:00:12 ID:???

>>694,>>695
即レスどもです。

もう、穴があったら入りたいっす.......orz
御指摘通りでした......。
今ゼロに修正してみたら、ネスケ6&7ではOKでした。
WINは今手許にないので明日確認します。（大丈夫だとは思いますが）

ちなみにあと一点いいですか？
このケースで（僕はMacOS9&IE5.17）なのですが、
ゼロではなくオーで背景色が付いていたというのは
何故なのですか？ﾏｸのブラウザが勝手に（この場合は良い方に）
解釈（これはオーじゃなくてゼロだろヴォケ）して
付けてくれたということなのですか？
もしそうなら痛し痒しですね。
エラーならエラーで反映しない方が「あれ？」と思って
も一度HTMLやCSSを見直すのですが。
（ﾏｸじゃなくてｳｨｿで確認しろ、は勘弁して下さいね...）

697 ：Name_Not_Found：2005/05/11(水) 00:28:11 ID:???

> 何故なのですか？ﾏｸのブラウザが勝手に（この場合は良い方に）
> 解釈（これはオーじゃなくてゼロだろヴォケ）して
> 付けてくれたということなのですか？

そういうこと

698 ：693：2005/05/11(水) 00:33:04 ID:???

>>697
そうですか。やっぱそうですよね。
重ね重ねありがとうございました。

699 ：Name_Not_Found：2005/05/11(水) 01:05:36 ID:???

>>696
墓穴に入ってください

700 ：Name_Not_Found：2005/05/11(水) 09:27:45 ID:???

font-size: 8pt; までは font-weight: bold; が効きますが、7ptにするとboldになりません。
7ptでもnoramlとboldで差を付ける方法はありますか？

701 ：Name_Not_Found：2005/05/11(水) 09:37:12 ID:???

noraml

702 ：Name_Not_Found：2005/05/11(水) 12:33:51 ID:???

>>700
ただたんにフォントが小さくなって画面上で区別がつかないだけじゃね？

703 ：Name_Not_Found：2005/05/11(水) 13:21:53 ID:???

>>700
その書体にそのサイズでのboldがないんでしょ。

704 ：Name_Not_Found：2005/05/11(水) 13:56:11 ID:???

クラスセレクタではなくIDセレクタを使うメリットって何なんですか？
「ページ内の唯一の内容にスタイルを指定するために使う」と言う記述を
よく見ますが、その唯一の内容にだってクラスセレクタ使えますよね？

705 ：Name_Not_Found：2005/05/11(水) 13:59:18 ID:???

記述する人の分類とかね。
リンクで飛べるし。

うちのサイトも、ヘッダ、メイン、フッタ、とかそういうのはidつかって、
そのなかのパーツはclassでやってるよ。

俺流マークアップだ

全部クラスで問題ないなら、クラスでやっちゃえばいいじゃない

706 ：Name_Not_Found：2005/05/11(水) 14:05:36 ID:???

>>705
そう言う事ですか。ってことはIDセレクタでなければできない事なんて
無いんですね。ようやくスッキリしました。レス感謝します。

707 ：Name_Not_Found：2005/05/11(水) 14:31:26 ID:???

>>706
>>575

708 ：Name_Not_Found：2005/05/11(水) 15:15:37 ID:???

>>706
精細度をガツッと上げたいときに使うことが、たまーにある。

709 ：Name_Not_Found：2005/05/11(水) 15:24:12 ID:???

>>707
教えていただいたレス付近を眺めてみました。
内容が難しすぎて半分も理解できていませんが
更にスッキリしたような気がします。

まりがとう。

710 ：Name_Not_Found：2005/05/11(水) 15:27:17 ID:???

>>708
精細度ですか・・。勉強させていただきます。

皆さんご親切にありがとうございました。
ここは良いインターネットでした。

711 ：Name_Not_Found：2005/05/11(水) 15:47:23 ID:???

>>710
「精細度」はレスのなかで最も問いとの関係が薄いような…

「精細度＝同じスタイルを複数の場所に適用せず、すべて別の設定をする」
という意味なら、classをそれぞれ一回ずつ使っても同じなんだし

712 ：Name_Not_Found：2005/05/11(水) 15:57:04 ID:???

「精細度」　使ってみたかっただけと違うのか？　なあ弥七！！

713 ：Name_Not_Found：2005/05/11(水) 16:25:22 ID:???

「精細度」も悪よのう　くひひひ

714 ：Name_Not_Found：2005/05/11(水) 17:22:52 ID:???

弥七は「越後屋」とちがうんでねーの？

715 ：Name_Not_Found：2005/05/11(水) 17:31:23 ID:???

じ～んせいらくありゃく～もあるさ～～

716 ：Name_Not_Found：2005/05/11(水) 17:31:56 ID:vGTJ8xds

以下の二つのファイル(file1,file2)によって構成されたHPは、
段組が中央に表示されています。
これを左に寄せて表示するには、どの部分を修正すればよいですか。
だいぶ長いですがお許しを。

file1-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2 columns, fixed size, centered</title>
<link rel="stylesheet" href="base.css" type="text/css" media="screen" />
<style type="text/css">
body { text-align:center; }
div#outerContainer { width:50em; margin-left:auto; margin-right:auto; text-align:left; }
div#left { float:left; width:35em;}
div#right { float:right; width:14em;}
div#footer { clear:both;}
</style>
</head>

717 ：Name_Not_Found：2005/05/11(水) 17:33:08 ID:vGTJ8xds

file1-2
<body>
<div id="outerContainer">

<div id="header"><h1>2 columns, fixed size, centered</h1>
<code>div#header {<br />}<br /></code><br />
<p><a href="http://www.mentalized.net/cssdepot" title="CSS Depot">«Back to the CSS

Depot project</a></p></div> 

<div id="left">
<h2>Left</h2><code>div#left {<br />float:left;<br />width:35em;<br />}<br /></code>
<code>body {<br />text-align:center;<br />}<br /></code>
<code>div#outerContainer {<br />width:50em;<br />margin-left:auto;<br/>marginright:auto;<br

/>text-align:left;<br />}<br /></code>
<div class="filler"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p></div>

</div>

718 ：Name_Not_Found：2005/05/11(水) 17:34:10 ID:vGTJ8xds

file1-3
<div id="right">
<h2>Right</h2><code>div#right {<br />float:right;<br />width: 22em;<br />}<br /></code>
<div class="filler"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p></div>

</div> 

<div id="footer">
<h2>Footer</h2><code>div#footer {<br />clear:both;<br />}<br /></code>
<p>This file is part of the <a href="http://www.mentalized.net/cssdepot" title="CSS

Depot">CSS Depot project</a>, and is licensed under a <a

href="http://creativecommons.org/licenses/by/1.0/">Creative Commons License,

"Attribution"</a>.</p></div> 

</div> </body></html>

719 ：Name_Not_Found：2005/05/11(水) 17:35:19 ID:vGTJ8xds

file2-1
/* This style sheet sets up colors and font face and the like.
NO box layout is done here, see the invidual files for that.*/
/* Setup block colors */
div#header { background-color:#FFAAAA; }
div#left { background-color:#FFFFAA; }
div#middle { background-color:#AAFFFF; }
div#right { background-color:#AAFFAA; }
div#footer { background-color:#FFAAFF; }
div#innerContainer { background-color:#F0F0F0; }
div.filler { color:#808080; }

720 ：Name_Not_Found：2005/05/11(水) 17:36:41 ID:vGTJ8xds

file2-2
/* General look'n'feel styles */
body {background-color:white; font-size:80%; margin:1em; font-

family:'Georgia','Times','serif';line-height:1.5em;}
h1 { font-family:'Trebuchet MS','arial','sans-serif'; font-size:1.6em; margin-top:0;}
h2 { font-family:'Trebuchet MS','arial', 'sans-serif'; font-size:1.2em;margin-top:0;}
h3 { font-family:'Trebuchet MS', 'arial', 'sans-serif'; font-size:1em; margin-top:0;}
table { margin-bottom: 1em; }
table tr td {background-color:#F0F0F0; padding:0 1em;}
p { margin-top:0; margin-bottom: 1.5em;}
/* Let's make sure code is readable in other browsers than IE too */
* > code { font-size: 1.25em; }
img#license { float: right; }

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

721 ：Name_Not_Found：2005/05/11(水) 17:37:29 ID:???

div#outerContainer { width:50em; margin-left:auto; margin-right:auto; text-align:left; }

722 ：Name_Not_Found：2005/05/11(水) 17:42:01 ID:???

>>716
「勉強するのは嫌だから、おまえら教えろ。」　ってか。

パクるつもりだろうが、解るように勉強する気はないのか？　なあ弥七！！

723 ：Name_Not_Found：2005/05/11(水) 17:42:56 ID:vGTJ8xds

ここをどう修正すればいいのでしょうか。

724 ：Name_Not_Found：2005/05/11(水) 17:44:07 ID:???

パクパク、パックン、ゴックンチョ、ってかw

725 ：Name_Not_Found：2005/05/11(水) 17:44:54 ID:???

>>723
>>722

726 ：Name_Not_Found：2005/05/11(水) 17:47:03 ID:???

>716もワルよのう。

727 ：Name_Not_Found：2005/05/11(水) 17:56:38 ID:fin/WiJ2

body { text-align:center; }
ここを変えてみたのですが、うまくいきません。

728 ：Name_Not_Found：2005/05/11(水) 17:56:38 ID:???

>>723
>>721見てわかんなかったら黄門様に頼むしかないな

729 ：Name_Not_Found：2005/05/11(水) 17:57:41 ID:???

>>727
ああそこも要るね

730 ：Name_Not_Found：2005/05/11(水) 18:00:23 ID:fin/WiJ2

>>729
この二つを直せばいいのですね。
意地悪しないでお願いします。

731 ：Name_Not_Found：2005/05/11(水) 18:01:26 ID:???

いやむしろ
img#license { float: right; }

732 ：Name_Not_Found：2005/05/11(水) 18:07:12 ID:???

>>730
「魚を与えるより釣り方を教えろ」っていうじゃないですか？

733 ：肛門様：2005/05/11(水) 18:11:03 ID:???

パクリ屋　お前には無理だ。背伸びをしてはいけません。　なぁ弥七！

734 ：Name_Not_Found：2005/05/11(水) 18:24:19 ID:???

CSSのダウンロード出来るマニュアルというのは何処にあるのでしょうか？
英語版でもそれらしいものが見つからないのですが-;

735 ：Name_Not_Found：2005/05/11(水) 18:29:52 ID:???

http://www.w3.org/Style/CSS/

736 ：Name_Not_Found：2005/05/11(水) 19:49:33 ID:7YXEbi9q

>>730
自己解決しました。
body { text-align:left; }
div#outerContainer { width:50em; text-align:left; }
でOKでした。
参考になったサイト
http://www.keynavi.net/ja/bugh/css_misc.html
■ブロックがうまく表示されない

737 ：Name_Not_Found：2005/05/11(水) 20:29:20 ID:???

これでまた一人の人間が成長した
ふう、憎まれ役も大変だ

738 ：Name_Not_Found：2005/05/11(水) 20:58:50 ID:yoDm/8qQ

質問。
Amaya started as an HTML + CSS style sheets editor.
(Amaya公式サイトから抜粋)

"CSS style sheets" って何のつもり？
カスケーディングスタイルシートスタイルシートだって。

739 ：Name_Not_Found：2005/05/11(水) 22:12:38 ID:???

ｽﾀｲﾙｼｰﾄってそんなに必要か？

740 ：Name_Not_Found：2005/05/11(水) 22:19:21 ID:???

けっこう便利

741 ：Name_Not_Found：2005/05/11(水) 22:20:03 ID:???

>>739
解らない馬鹿は黙ってて下さい

742 ：Name_Not_Found：2005/05/11(水) 22:46:37 ID:???

>>741
いやまぁ、そう脊髄反射されても困るんだがw

ウェブ製作はDWを利用してしまっている事から、
いまいち恩恵部分を実感していないと言うか・・・

皆、手打ちなの？

743 ：Name_Not_Found：2005/05/11(水) 22:54:26 ID:???

ちなみに、
ソーテック社の
HTML & スタイルシートレイアウトブック
ってのを立ち読みした

意外に分かりやすく、
ちょいと買ってみようかとも思ったけれど、
手持ち金がなく帰宅

744 ：Name_Not_Found：2005/05/11(水) 22:59:05 ID:???

>>738
スタイルシートの1種類としてのCSSを強調してるんじゃないか、と無理やり弁護してみる。
いや、俺もおかしいとは思うけどね。

745 ：Name_Not_Found：2005/05/11(水) 23:15:27 ID:???

>>742
DWで物理タグを使ってか・・・　　おめでてーな。

746 ：Name_Not_Found：2005/05/11(水) 23:22:28 ID:???

だって初期設定がそうなんだから、しょうがないじゃん。
「インデント」ポチッと押すとblockquoteですよ。いまだに。

747 ：Name_Not_Found：2005/05/11(水) 23:29:01 ID:???

しょうがなくない

748 ：Name_Not_Found：2005/05/11(水) 23:38:02 ID:???

手打ちにこだわる奴は初心者

749 ：Name_Not_Found：2005/05/11(水) 23:47:27 ID:???

誰も手打ちとは言っていないが・・・

750 ：Name_Not_Found：2005/05/11(水) 23:50:21 ID:???

>>742
古いＤＷ？

751 ：Name_Not_Found：2005/05/11(水) 23:53:40 ID:???

マカロニウエスタンじゃあるまいし

752 ：Name_Not_Found：2005/05/11(水) 23:55:15 ID:???

>751
あのー　むこうのｽﾚ　寂れてるんですけど・・・

753 ：Name_Not_Found：2005/05/12(木) 03:35:19 ID:???

お前ら詳細度

754 ：Name_Not_Found：2005/05/12(木) 04:21:37 ID:???

>>750
違うっしょ
新しいDWゆえに、cssを実感出来てないんじゃない？

だから、手打ちなのか？と聞いていると思われ

755 ：Name_Not_Found：2005/05/12(木) 05:45:45 ID:???

リンクで#つけてページのある部分に飛ぶためのIDは、
別にCSSファイルにそのIDのことを書いてある必要はないですよね？

756 ：Name_Not_Found：2005/05/12(木) 06:54:06 ID:???

なに言ってんだ喪前は

757 ：Name_Not_Found：2005/05/12(木) 08:38:54 ID:???

>>755
自動翻訳みたいな文だな

758 ：Name_Not_Found：2005/05/12(木) 08:49:45 ID:???

>>755
必要ない

759 ：Name_Not_Found：2005/05/12(木) 11:16:03 ID:???

DWの話題が出ましたね。漏れもここ2、3日MX2004触らせてもらって
いるんだけど操作が複雑でくじけかけています。
CSSスレの住人さんってプロ、もしくはプロはだしが多い気がしますが
そんな皆さんはどんなエディタ使ってますか？

760 ：Name_Not_Found：2005/05/12(木) 11:51:59 ID:???

スレ違い

761 ：Name_Not_Found：2005/05/12(木) 15:15:12 ID:???

>>759
まぁ、あの複雑な画面構成と、ワケのわからん操作用語は
慣れないとピンとこないだろうね。
まぁ半年くらい使えば慣れるよ。

762 ：Name_Not_Found：2005/05/12(木) 16:21:08 ID:???

>>761
半年かぁ。慣れる前に心が折れて夜な夜な飲みに行っちゃいそう・・
もうちょっとがんばってみます。

763 ：Name_Not_Found：2005/05/12(木) 18:09:25 ID:???

そんなにめんどいかぁ？
１週間も遊んでれば覚えると思うんだけんどねぇ・・・

764 ：759：2005/05/12(木) 19:43:40 ID:???

きっと>>761は漏れの文章から滲み出るアフォさを
感じ取ったんだと思います。オーズ

765 ：Name_Not_Found：2005/05/13(金) 03:27:51 ID:???

質問です。

<style>
div.left {
width:20px;
height:100%;
background-color: red;
}
</style>

<div class=left></div>

ページ右の縦方向の帯です。。
ページが長くなると、下にスクロールしたときに帯が消えてしいまいます。
不特定な長さのページの一番下まで帯を伸ばすには、どうしたらいいですか？

766 ：Name_Not_Found：2005/05/13(金) 03:28:28 ID:???

×　ページ右
○　ページ左

767 ：Name_Not_Found：2005/05/13(金) 10:10:34 ID:???

body { border-left:20px red solid; } じゃだめかいな？

768 ：Name_Not_Found：2005/05/13(金) 10:12:56 ID:???

>>767
パーフェクトです。ありが㌧

769 ：Name_Not_Found：2005/05/13(金) 14:16:21 ID:???

<dt><dd>を使って整形しているのですが
<dd>の文章が二行目に入った時、一行目文章だけが若干右にずれます。
これを修正する方法はありませんか？

770 ：765：2005/05/13(金) 14:27:58 ID:???

767の方法で、色帯だけならいけたのですが、帯に画像を使おうとするとborderだけではだめでした。
<div>でページの下まで縦に伸ばす方法があれば教えてください。

771 ：Name_Not_Found：2005/05/13(金) 14:32:40 ID:???

border;1px solid blue;
とかでdivのブロックを見ればわかると思うが

772 ：Name_Not_Found：2005/05/13(金) 15:20:21 ID:???

>>769
ある。
ソースを見ないと詳しくはわからないが一行目だけってのがポイント。

>>770
html,body {height:100%;}
div#のばしたいやつ　{height:100%;}

773 ：Name_Not_Found：2005/05/13(金) 15:35:24 ID:???

>>772
あっ、text-indentか！
どうもです！

774 ：765：2005/05/13(金) 15:43:57 ID:???

>>772
それにすると、最初の表示画面一杯にはなるのですが、下にスクロールすると途切れています。
スクロールしても一番下まで伸びるようにしたいのですが、適当な長さを決めて指定するしかないでしょうか？

775 ：Name_Not_Found：2005/05/13(金) 16:01:42 ID:???

>>774
それ、bodyでやればいいじゃん。

776 ：Name_Not_Found：2005/05/13(金) 16:17:22 ID:JfzeFZtN

<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
こんな感じで入れ子にしてるんだけど、IE6とNN7,Mozillaで表示が異なる。
"container"のマージン、パディングは０にしてるのに、NN7,Mozillaで"div1"
の上部に不明な領域が発生する。"div1"はspanタグ内を不可視にして背景画像を
挿入してる。こちらもマージン、パディングは０に設定してる。

"div1"を不可視にすると、下の領域が繰り上げられるけど、その時には
不明な領域は現れない。そのことから"div1"が原因だと思うんだけど
解決策がわからない。どうしたらいいでしょうか。

777 ：Name_Not_Found：2005/05/13(金) 16:44:39 ID:???

floatを使った場合　NN4.7は切り捨てないといけませんか

778 ：Name_Not_Found：2005/05/13(金) 16:47:23 ID:???

ＮＮ4ｘなんぞみんなとっくに視野に無い　

779 ：Name_Not_Found：2005/05/13(金) 16:48:30 ID:???

まじっすか　1日800万PVなんですが切り捨ておK??

780 ：Name_Not_Found：2005/05/13(金) 16:50:34 ID:???

>>779
NN4系はテキストブラウザとして扱う、と考えれば、
切り捨てていることにはなるまいて。

781 ：Name_Not_Found：2005/05/13(金) 16:52:19 ID:???

なるほど勉強になります
　内部で1%ルールがどうとかい言う人がいるので困ってました

782 ：765：2005/05/13(金) 16:53:55 ID:???

>>775
767とは違う方法ですか？

783 ：Name_Not_Found：2005/05/13(金) 17:41:51 ID:???

>>765
親要素の背景と右側に来る要素の背景をうまく組み合わせて
左側の背景がずっと続いているよう見せかけろ。

784 ：Now_loading..774KB：2005/05/13(金) 19:15:21 ID:F5CJTS7M

ttp://hl.fpsjp.org/index.php
このサイトのように上に画像、ページの真ん中に文字を表示というようにしたいのですが
どのように設定すれば良いのでしょうか？

785 ：Name_Not_Found：2005/05/13(金) 19:15:47 ID:???

ageてしまった・・・。すみません。

786 ：Name_Not_Found：2005/05/13(金) 19:24:25 ID:???

>>785
別にageてはいけないなどという決まりはありませんが。
そのように分別なく謝るとことは、普通にageて書いている>>776さんのような人に失礼だとは思いませんか？

787 ：Name_Not_Found：2005/05/13(金) 19:26:55 ID:???

>>786
ageても良いのですか。
申し訳ありません。>>776には申し訳ないことをしてしまいました。

788 ：Name_Not_Found：2005/05/13(金) 19:32:18 ID:???

>>784 の上げているサイトのレイアウトを表現する言葉が、
＞上に画像、ページの真ん中に文字を表示
だというのがとても納得がいかない件について。

789 ：Name_Not_Found：2005/05/13(金) 19:54:53 ID:???

自分語は他人に理解できんということだな。

790 ：784：2005/05/13(金) 19:56:05 ID:???

不適切でしたか。申し訳ありません。

791 ：Name_Not_Found：2005/05/13(金) 20:03:31 ID:???

>>784
簡単にやる方法は無いな。
DIVを使いまくって、いろんなところを設定しないと。

792 ：Name_Not_Found：2005/05/13(金) 20:08:47 ID:NlSJ+sxM

>>784
文書上部に、idがheaderであるdiv要素（ここでは便宜上#headerと表す）がありまして、
その中にはサイト名と思われるものがh2要素としてマーク付けされております。

サイト名を画像で表示させるために、まず画像を表示させる領域を#headerに確保しています。
（高さは指定していますが、幅は指定していません。それは、#frameに指定しているためです。）
そして、#headerの背景として、サイト名の画像を指定しています。
最後に、テキストのサイト名（h2要素）が表示されたままでは格好が悪いので、それを消しています。

#header {
height:80px;
background: url(topimg.jpg) no-repeat; }
#header h2 { display: none; }

本文は、idがframeである大きなdiv要素（便宜上#frame）に全て収まっています。
その#frameの幅を指定して、左右の空白をauto（自動）にしているので、本文全体がセンタリングされます。

#frame {
margin: 0px auto 0px auto;
padding: 0px;
border: 1px solid #333;
width: 750px;
background-color: #E6E6E6; }

上下に無駄な空白が表示されないように、body要素周りの空白（marginとpadding）を0にしています。

body {
margin: 0;
padding: 0;
background: #939393; }

ページの真ん中というのを、センタリングと解釈しましたが、いかがでしょうか？

793 ：Name_Not_Found：2005/05/13(金) 20:25:43 ID:???

>784には理解不能と思われ

794 ：Name_Not_Found：2005/05/13(金) 20:55:21 ID:???

font-size:x-smallより大きくてsmallより小さいフォントサイズ指定はありませんか？（数値指定以外）

795 ：784：2005/05/13(金) 20:56:10 ID:???

>>792
親切かつ丁寧に御指摘ありがとうございます。
現段階では少し理解し難いので>>5のサイトをもう一度おさらいしてわからなければ
また質問させていただきます。お世話になりました。

796 ：Name_Not_Found：2005/05/13(金) 21:01:39 ID:???

>784は真面目な人だな。
こういう人はすぐに出来るようになるよな。

797 ：Name_Not_Found：2005/05/13(金) 21:07:13 ID:???

784＝796
釣り師

798 ：　↑　：2005/05/13(金) 21:09:54 ID:???

ただのアホ

799 ：Name_Not_Found：2005/05/13(金) 21:12:19 ID:???

真面目な釣り師
だが必死ｗ

800 ：Name_Not_Found：2005/05/13(金) 21:28:10 ID:RoLpt6Kx

質問させてください。よろしくお願いします。

テキストを画像に置き換える方法として
text-indent : -9999px ;
があると思うのですが、これにページ内リンクを張ったとき、
firefoxではテキストが見えず画像だけの時でもジャンプできるのですが
IEでは選択はできますがクリックしても飛ぶことができません。

そういう仕様なのでしょうか？　それとも他にやり方がありますか？

801 ：Name_Not_Found：2005/05/13(金) 21:47:52 ID:???

>>800

こういうのは？

<div id="link1"><span>LINK1</span></div>
---
div#link1 span { display:none; }
div#link1 {
width:80px; height:31px; bakcground-image : url(link1.gif);
background-repeat: no-repeat; backgournd-position: top left;
}

802 ：800：2005/05/13(金) 22:03:55 ID:???

>>801
ありがとうございます。仕様っぽいのでそうすることにします。

803 ：Name_Not_Found：2005/05/14(土) 00:29:07 ID:???

>>794
ない。
smallやx-smallをmediumに対してどれくらい小さくするかは、
UserAgentの勝手だから。
(仕様書上な推奨値はある。知りたきゃ仕様書嫁)

804 ：Name_Not_Found：2005/05/14(土) 08:41:13 ID:???

body{
font-family: ＭＳＰゴシック,Osaka;
font-size: 10pt;
color: #FFFFFF;
line-height: normal;
background-color: #00CCFF;
background-image: url('./bg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
}

a:link div.list{
background-image: url('aaa.gif');
background-repeat: no-repeat;

}

a:hover div.list{
background-image: url('aaa-1.gif');
background-repeat: no-repeat;
}

<div>
<div class="list"><a href="あああ">あああ</a></div>
<div class="list"><a href="いいい">いいい</a></div>
</div>

リンクにマウスを乗せたらリンクの背景画像が変わるようにしたいのですが
画像すら表示されません。
どうしてでしょうか？

805 ：Name_Not_Found：2005/05/14(土) 08:45:31 ID:???

a要素の子要素にdiv要素など存在しとらんだろが

806 ：Name_Not_Found：2005/05/14(土) 10:19:50 ID:???

>>804
なぜ基礎を知らないまま試し、基礎を確認せずに質問するのでしょうか

807 ：Name_Not_Found：2005/05/14(土) 10:25:11 ID:???

ｱﾎｱﾎﾏﾝだからで～～し

808 ：Name_Not_Found：2005/05/14(土) 11:15:48 ID:???

試すのはいいんでないか。

809 ：Name_Not_Found：2005/05/14(土) 11:30:48 ID:???

試すのは勝手だが基礎知識は必要だろ。

810 ：Name_Not_Found：2005/05/14(土) 11:32:48 ID:???

>>804
div.list　a:hover {
background-image: url('aaa-1.gif');
background-repeat: no-repeat;
}

これでやってみて

811 ：Name_Not_Found：2005/05/14(土) 13:05:45 ID:K2sx2k/F

誰かたすけて～。内部スタイルシートから外部スタイルシートに書き出してみると、バグります（レイアウトが崩れる）。内部ではうまく表示されているのを確認済ですが。
ドリウェバで外部に書き出しました。また、他の方法で新規ｃｓｓでコピペすると、こんどはｃｓｓに組んだ画像が読み込めていません。
なにが原因でバグっているのかさっぱりです。

812 ：Name_Not_Found：2005/05/14(土) 13:07:31 ID:???

ウェバなんてのは知らないな。

813 ：Name_Not_Found：2005/05/14(土) 13:07:35 ID:???

>>811
url晒すかソースを書いてみるか、とにかく情報を出せ。今すぐすべてを出せ。
でないと、わからん

814 ：Name_Not_Found：2005/05/14(土) 13:08:49 ID:???

ｻﾛﾝ　パス

815 ：Name_Not_Found：2005/05/14(土) 13:09:36 ID:???

>>813
脱がなくてはいけないの？

816 ：Name_Not_Found：2005/05/14(土) 13:12:58 ID:0WrQJQU4

パンツは許す…

817 ：Name_Not_Found：2005/05/14(土) 13:34:18 ID:???

質問を書いて安心をするスレはここですか？

818 ：Name_Not_Found：2005/05/14(土) 13:36:49 ID:K2sx2k/F

＞＞８１３
すみませんでした。
url=http://cyber-bridge.com/chugokuseira
とりあえずみてください

819 ：Name_Not_Found：2005/05/14(土) 13:40:03 ID:???

ウイルス及びブラクラについて

820 ：Name_Not_Found：2005/05/14(土) 13:47:09 ID:???

>>818
cssファイルは、css/に入ってるわけでしょ？
画像の指定で、（img/ファイル）になってるけど,（．．／ｉｍｇ／ファイル）にするとか？

821 ：Name_Not_Found：2005/05/14(土) 14:23:32 ID:K2sx2k/F

>>820
ありがとうございます。やってみたところ
無事表示されました。ひと安心です(^_^)

822 ：Name_Not_Found：2005/05/14(土) 14:25:24 ID:???

画像はクリア
あとは、レイアウトが崩れる原因かね？

823 ：Name_Not_Found：2005/05/14(土) 15:24:17 ID:???

３分後にパスと書かれても気が付かないとは・・・

824 ：Name_Not_Found：2005/05/14(土) 16:13:48 ID:???

ワロﾝﾊﾟス

825 ：Name_Not_Found：2005/05/14(土) 19:39:10 ID:???

>>821
まず HTML を直した方がいい。
<div> に <li> は入れられない。<a> に <div> は入れられない。

関係ないと思うけど、外部 CSS には @charset を入れないと駄目。
url 関数は url( ) ではなく url(" ") と書いた方が安全。
フォントファミリ (キーワード以外) はすべて " " で囲んだ方が安全。

826 ：Name_Not_Found：2005/05/14(土) 20:08:49 ID:???

>>825
@charsetないと駄目なんて決まりは無い。
レスポンスヘッダでcharset指定できない場合に代替として使えるだけ。

827 ：Name_Not_Found：2005/05/14(土) 20:34:23 ID:???

>>805-809
確かにしっかり確認せずに質問した漏れが悪かったと思う　スマソ

>>810
ありがとう、でもマウス乗せてない段階でも画像が表示されてないorz

もうすこし勉強してみまつ

828 ：Name_Not_Found：2005/05/14(土) 22:45:17 ID:???

応用ってものを知らんのかいな・・・

829 ：Name_Not_Found：2005/05/14(土) 23:08:26 ID:???

まぁまぁ　助さんや、教えてあげなさい。

830 ：Name_Not_Found：2005/05/14(土) 23:11:16 ID:???

叩き斬れぇ！

831 ：Name_Not_Found：2005/05/14(土) 23:21:21 ID:???

ご隠居ー・・・？　　

　ご隠居鬼になっちまいましたよ　格さん。

832 ：Name_Not_Found：2005/05/15(日) 12:16:51 ID:cVdOShal

cssでレイアウトしていると、印刷時に崩れることについて教えてください。

現在、ブログっぽい2列のレイアウトにしています。
body幅が700pxくらいで、一番上にヘッダーがあって
メインが550px、サイドバーが150pxみたいなよくあるやつ。

で、これを印刷用CSSでそのままだしたいのですが、
縦に長いページで、A４で一枚半くらいになります。
そうすると、一枚目はいいのですが2枚目が紙の途中くらいから始まってしまいます。
これを、2枚目も一枚目の続きとしてきちんと紙の上部から印刷したいのですが
どうすればいいんでしょうか？

レンダリング上、左上から順番だろうからしかたないのでしょうか？
それとも、印刷時の改ページをいちいち指定する方がいいのでしょうか？

ブログだと普通に全部つながった状態で印刷されますよね？
どうやっているのでしょう？宜しくお願いいたします。

833 ：Name_Not_Found：2005/05/15(日) 12:22:25 ID:???

以下のように記述すると、Firefoxでは幅がちゃんとピッタリになるんですが
IE6だと十数px広くなっちゃうんです。
どうすれば同じ記述で表示も同じになりますか？

<div class="main">
<div class="index">
<h2>Contents</h2>
<ul>
<li>****</li>
<li>****</li>
</ul>
</div>
**中略**
</div>
----------------------------
div.main div.index ul {
width:148px;
margin:0px;
padding:0px;
border:none;
text-align:left;
list-style:none;
color:#333; }
div.main div.index ul li {
width:138px;
margin:0px;
padding:0px 5px;
border:none;
text-align:left; }

834 ：Name_Not_Found：2005/05/15(日) 13:24:06 ID:???

>>932
ヒント：media="print"

835 ：Name_Not_Found：2005/05/15(日) 13:39:18 ID:???

>>932 がんばれ。

836 ：Name_Not_Found：2005/05/15(日) 13:55:37 ID:???

>>932 がんばれ。

837 ：932：2005/05/15(日) 16:15:14 ID:???

がんばるっす

838 ：Name_Not_Found：2005/05/15(日) 18:12:04 ID:???

質問です。

<div style="border: solid 1px green;text-align:center;">
<img src="a.jpg">
<img src="b.jpg">
</div>

高さの違う2枚の画像をdivの中で横に並べています。
高さの低い画像は、divのbottomに合っていますが、縦方向にdivの中央に持ってくるにはどうしたらいいですか？

839 ：Name_Not_Found：2005/05/15(日) 18:21:29 ID:???

ヒント：垂直英訳

840 ：Name_Not_Found：2005/05/15(日) 18:21:58 ID:???

そんなときのためのvertical-align

841 ：840：2005/05/15(日) 18:23:14 ID:???

>>839 ごめんなさいごめんなさい ○|￣|＿

842 ：Name_Not_Found：2005/05/15(日) 18:30:18 ID:???

>>839-840
レスありがとうございます。

そう思って
<div style="border: solid 1px green;text-align:center;vertical-align:middle;">
にしてみたのですが、やっぱり中央に来ないんです。どこか書き方が間違っていますか？

843 ：ローゼンバッハ ◆Zaebos.OcA ：2005/05/15(日) 18:38:27 ID:???

sinekuzudomo

844 ：Name_Not_Found：2005/05/15(日) 19:12:16 ID:???

>>842
vertical-alignがどんなプロパティでどういう要素に適用可能なのかよく調べよう。
「こうすればできそう」という自分の思い込みだけで終わるな。

845 ：838：2005/05/15(日) 19:29:11 ID:???

vertical-alignは画像にも入れてみたりしたのですが、中央に来ない画像だけに入れていたのでだめだったようです。
両方の画像に入れたら中央に来ました。
ありがとうございました。

846 ：Name_Not_Found：2005/05/16(月) 01:31:20 ID:???

テキストを画像に置き換える方法として、text-indentを使って画面外に飛ばす方法がありますよね。
h2{
text-indent: -9999px;
margin: 0 0 10px 0;
width: 580px;
height: 41px;
}

847 ：Name_Not_Found：2005/05/16(月) 01:36:03 ID:???

うぁ、間違えた…

h2{
text-indent: -9999px;
width: 500px;
height: 30px;
　　　　　　　background: url(img/h2.jpg) no-repeat 0 0;
}
例えばこういう方法がありますが、この方法だとWinIE5.0だと背景まで画面外に飛んでしまうんですが、良い解決法は無いでしょうか？

やはりtext-indentを使わずに、
padding: 30px 0 0 0;
height: 0（IEは30px）;

にするのがベストかなぁ。

848 ：Name_Not_Found：2005/05/16(月) 01:58:32 ID:???

h2のテキストに全角スペースを使う

849 ：Name_Not_Found：2005/05/16(月) 03:27:59 ID:???

font-size:0;

850 ：Name_Not_Found：2005/05/16(月) 09:33:02 ID:???

回答者のラベルが低すぎるぜ！

851 ：847：2005/05/16(月) 16:17:14 ID:???

>>849
他のブラウザだとそれでも良いんですが、IE5.0だと豆みたいな文字が見えてしまいます。
colorにtransparentがあれば簡単に解決できるのになぁｗ
やっぱりpaddingとoverflowを使ったやつで解決します。

852 ：Name_Not_Found：2005/05/16(月) 16:23:53 ID:???

　　display:hidden;

853 ：847：2005/05/16(月) 17:22:19 ID:???

>>852
display:none;の事でしょうか？
それともvisibility:hidden;？
後者はまるごと消えてしまうのでダメとして、前者も音声ブラウザから読み上げられないらしいのでその方法は取らない様にしています。

854 ：Name_Not_Found：2005/05/16(月) 18:07:38 ID:???

>>853
> 前者も音声ブラウザから読み上げられないらしい

横やりなんだけど。
その情報は半分間違っていて、本来ならば@media auralでdisplay: none; であれば
読み上げ系は読まない、ってなるはずなので@media screenでdisplay:none;としても
問題はないんです。

ただ、読み上げUAで有名なIBMのHomePageReaderは、ただのスクリーンリーダーで
MSIEコンポーネントがレンダリングした結果を読んでいる＋α程度なんで、
display:none;の部分が（IBM HPRでは）読み上げられない、っつーことなんです。
ちなみにIBM HPRはVer.3で開発停止してるっぽいんだけど、MSIE7以降にまた動きが
あるやもしれません。

855 ：Name_Not_Found：2005/05/16(月) 19:11:20 ID:???

>>853
音声ブラウザを考慮に入れていて、なぜにそんな姑息な方法を取るんだ？

856 ：847：2005/05/16(月) 19:56:23 ID:???

>>854
スクリーンリーダー全部が読まないと言うわけではないんですね。なるほど。

>>855
音声ブラウザ考慮はあくまでオマケ程度なので。
やれるんだったら、やっとこうぐらいの気持ちです。
一応ナビゲーションのスキップ程度はやってますけどね。

857 ：Name_Not_Found：2005/05/16(月) 20:07:07 ID:???

>>856
あ、いや、スクリーンリーダーは“スクリーン”を読むわけで、それで正しいんだけど。
単なるスクリーンリーダーとは違う「読み上げ系webブラウザ」に望まれるのは、
要素（タグ）を正しく理解して、かつ、スタイルシートによる演出を加えて、
音声と効果音によって正しくそれをユーザに伝える、ことで。

あー、なにスレ違いなこといっぱい書いてんだろう。
すまそすまそ。

858 ：Name_Not_Found：2005/05/16(月) 21:41:39 ID:CFQ04KiB

body{
font-size: 100%;
}

上のように、font-sizeの値を親要素の文字サイズに対して%で指定しました。
bobyの親要素はhtmlですが、この文字サイズをpt、mediumなどで表すとどうなりますか。
また、font-sizeの値を指定しなかったときには、100%で表示されているのでしょうか。

859 ：Name_Not_Found：2005/05/16(月) 21:47:40 ID:???

質問です。
position: absolute;で位置を指定した画像を、その位置固定することは可能でしょうか｡
コンテンツを右上寄りにしていて、ブラウザのサイズを変更すると画像が移動してしまうので。

860 ：Name_Not_Found：2005/05/16(月) 21:57:44 ID:???

>>858
font-size: 100%; とは観覧者のブラウザの設定した値で表示される
>>859
それは position: fixed;

861 ：Name_Not_Found：2005/05/16(月) 21:59:24 ID:???

画像をimgタグで、テキストはalt属性にすればいいじゃん

862 ：Name_Not_Found：2005/05/16(月) 22:04:31 ID:???

>>858
font-size の % は親要素の計算値に対する割合になる。
具体的なサイズで示す pt や medium で置き換えられるものではない。

最上位要素のフォントサイズはブラウザ依存。(通常はユーザーの設定値)
medium の実際のフォントサイズはブラウザ依存。

特に指定しなければフォントサイズは親要素の計算値を継承する。
従って、親要素の計算値の 100% と同じ結果になるはず。
ただし、ブラウザのデフォルトスタイルシートやユーザースタイルシートで
何か値が指定されていればこの限りではない。

863 ：Name_Not_Found：2005/05/16(月) 22:30:31 ID:QwQ0sSXN

>>860
>>862
的確な解説、感謝します。理解が深まりました。

864 ：Name_Not_Found：2005/05/16(月) 22:51:42 ID:???

>>860
fixedにした所、absoluteで指定した絶対位置が適用されませんでした｡
何とか絶対位置を保持しつつ固定できれば良いのですが...

865 ：Name_Not_Found：2005/05/16(月) 23:03:32 ID:???

>>864
>>860の言うとおりposition:fixed;が正しい。ただし、Win+IEでは未実装。
どうしてもWin IWでも位置を固定したいなら背景に敷くくらいしかないのでは。
あとはMozilla,Operaで見て自己満足するとか。

866 ：865：2005/05/16(月) 23:04:21 ID:???

あぁゴメン。打ち間違えた。IWってなんだろね。

867 ：Name_Not_Found：2005/05/16(月) 23:29:52 ID:???

>>864
position: fixed の指定は IE では正しく動作しません。
Mozilla では動作しますが、ほかの要素と重なるとちらつくので
できるだけ避けた方がいいと思います。

868 ：Name_Not_Found：2005/05/17(火) 03:00:35 ID:73+dvhZk

質問させてください。

<div id="nav"><ul></ul>・・・</div>
<div id="main"><h1></h1>・・・</div>
<div id="sub"><h2></h2>・・・</div>

floatを用いてレイアウトしたいのですが
div#nav　を左に　width:100px;
div#main　を右に　margin-left:5em;
*div#subを　width:100px;　で　div#navの直下に配置する*ことは
可能でしょうか？

ソース書き直したほうがいいですか？　うまくいきません・・・。

869 ：868：2005/05/17(火) 03:02:17 ID:???

ちなみに
div#nav,div#main {float:left;}
です。

870 ：Name_Not_Found：2005/05/17(火) 03:10:21 ID:???

#subでclear:leftじゃ?

871 ：Name_Not_Found：2005/05/17(火) 03:13:18 ID:???

subをclear : left ;
でいいんじゃないか。

872 ：Name_Not_Found：2005/05/17(火) 03:19:11 ID:???

#sub { clear: left } こうだろ。

873 ：Name_Not_Found：2005/05/17(火) 08:22:14 ID:???

>>865 >>866
どうも有り難う御座いました｡
fixedはまだブラウザによっては様々な症状が出るみたいなので、配置を変えて対処しました｡
その内、きちんと実装されるまで待ちます...

874 ：868：2005/05/17(火) 09:34:39 ID:???

>870,871,872
レスありがとうございます。
clear:left;　はしてみたんですが　div#main　の左下になりました。
後だしですみませんなのですが、div#main　が一番長くて
div#nav, div#sub　は短い（量が少ない）です。
div#nav　の下にdiv#sub、右に　div#main　のみとしたいのですが・・・
またレス遅くなると思うんですが、助言頂けると助かります。
よろしくおねがいします。

875 ：Name_Not_Found：2005/05/17(火) 15:10:59 ID:q3GoV523

助けてください。list要素で画像ボタンが作りたいのですが。a要素でpadding-top
をするとボタン同士に隙間ができます。
ソースは以下です。
<ul><li><a href="***">ＨＯＭＥ</a></li><li><a href="***">ＨＯＭＥ</a></li><li><a href="***">ＨＯＭＥ</a></li></ul>
ｃｓｓです。
#nav ul{
width:150px;
list-style:none;
margin-top:0px;
}
#nav li{
text-align:center;
}
#nav a{
height:40px;
font-size:14px;
color:#cccccc;
background-image:url(img/bottun_off.gif);
background-repeat:no-repeat;
text-decoration:none;
/*padding-left:20px;
padding-top:10px;*/
display:block;
}
#nav a:hover{
background-image:url(img/bottun_on.gif);
display:block;
}
どうしたらくっつきますか？

876 ：Name_Not_Found：2005/05/17(火) 16:19:47 ID:???

>>874
試してないが#mainにフロートがかかってなければうまくいくんじゃないか

>>875
ひょっとしてFAQの1>>6に関わる問題か？

877 ：Name_Not_Found：2005/05/17(火) 16:34:59 ID:tMyQ897S

やはり>>875ではpositionを使うしかないっすかね？
>>6の意味がわかんないっす。

878 ：Name_Not_Found：2005/05/17(火) 16:44:14 ID:???

>>877
line-heightが継承されて無い？

879 ：Name_Not_Found：2005/05/17(火) 16:52:28 ID:???

>>877
互換モードなら#nav aのheightを50pxにしてないからかも。

880 ：Name_Not_Found：2005/05/17(火) 17:18:26 ID:tMyQ897S

>>879
互換モードてなに？
heightを50pxにしたらもっと広がった。
こりゃpositionかな？
position使うとレイアウト崩れそう。floatで組んでるんで。

881 ：879：2005/05/17(火) 17:21:18 ID:???

>>880
文書型（最初のDOCTYPEなんたらってやつ）と使ってるブラウザは？

882 ：879：2005/05/17(火) 17:22:07 ID:???

>>880
あと、ボタンの画像の高さはいくつ？

883 ：Name_Not_Found：2005/05/17(火) 18:17:52 ID:B7tmkoOC

2段組にしたときに、短いほう（メニュー）の高さをもう一方にあわせて見せるため、
全体を包んだdivにメニューと同じ色を入れています。

#layout{width:700px; background-color:#888888;}
#menu{float:left; width: 170px; background-color:#333333;}
#main{float:right; width: 630px; background-color:#888888;}

<div id="layout">
　<div id="menu">
　　<ul>
　　　<li>あ</li>
　　　<li>い</li>
　　</ul>
　</div>
　<div id="main">
　　<p>ああああああ</p>
　　……
　　<p>ああああああ</p>
　</div>
　<br class="clear-both">
</div>
↑こんな感じです。
IE6では#layoutの背景色が#menuの下にちゃんとでるんですが、
Firefoxだと#layoutの背景は表示されません。
#menuの背景をなしにしたりtransparentにしたりしてみてもやっぱり表示されません。
#menu側の背景を一番下まで続けさせる方法はないでしょうか。

884 ：883：2005/05/17(火) 18:20:17 ID:???

widthの値が合わないのは無視してください。
書きながら計算間違えちゃいました。
さらに#mainと#menuの背景色が逆です。

慌ててました…orz

885 ：Name_Not_Found：2005/05/17(火) 18:22:43 ID:???

>>883
div#layout:after{
height: 0;
clear: both;
display: block;
visibility: hidden;
content: ".";
}
多分これを付ければ良いかと。

886 ：Name_Not_Found：2005/05/17(火) 19:22:57 ID:???

質問です

body { width: 400px; }

NN7では効きますが、IEで効きません。IEでbodyの幅を設定する方法を教えてください。

887 ：Name_Not_Found：2005/05/17(火) 20:07:12 ID:xwSkeBi3

>>881
レス遅くなってすみません～やっと自宅に帰れた～
ブラウザはWInIEです。
>>875のソースのように改行してないつもり。
>>882
画像の高さは40だったはず。（いまの時点では確認不可）

888 ：Name_Not_Found：2005/05/17(火) 20:14:01 ID:???

>>887
画像の高さが40って事は、padding-top:10px;を付けた時にはheight:30px;にしなければいけないかも…。
最初のDOCTYPE次第ですが…。

889 ：883：2005/05/17(火) 20:21:22 ID:???

>>885
バッチリでした！
これまで3ヶ月間見てみぬフリをしてた問題解決です！

でもなんでこうなるのかよく分かってないので、もう少し考えてみます。

ひとまずありがとうございました！

890 ：Name_Not_Found：2005/05/17(火) 21:20:57 ID:sYeuU5xP

>>888
やってみます！
レスが明日の１１：００ごろになると思いますが。。。
すまんm(__)m

891 ：868：2005/05/17(火) 22:46:39 ID:???

>>876
遅くなってすみません。レスありがとうございます。
> #mainにフロートがかかってなければ
試してみましたが無理でした。

htmlのソースを
<div id="main"><h1></h1>・・・</div>
<div id="nav"><ul></ul>・・・</div>
<div id="sub"><h2></h2>・・・</div>
とすれば楽なのかもしれないんですがナビは上に置いておきたいのです・・・

cssでは無理なのでしょうか・・・？

892 ：Name_Not_Found：2005/05/17(火) 23:50:01 ID:???

>>886
IE6なら標準準拠モードで。それ以外は無理だったかと

893 ：Name_Not_Found：2005/05/18(水) 03:06:31 ID:???

>>891
幅が25%、70%とかでいいんだったら
#navi, #sub { width: 25%; float: left; }
#main { width: 70%; float: right; }
でいけるんだけど#navi、#subは100px固定でいきたいんだよね？

#mainを絶対配置にするという手もあるけど幅がな……

894 ：890：2005/05/18(水) 10:39:42 ID:fXsxqDbl

やった！！画像ボタンがくっつきました！heightを30にしてみました。
けど、なぜに30ｐｘ？40ｐｘにすると大幅に隙間ができるんだけど？

895 ：Name_Not_Found：2005/05/18(水) 11:29:28 ID:???

>>894
いや、だから>>6に書かれているように
本来heightにはpaddingは含まれないんだって。
(見かけ上height + paddingの高さがあるように見える)

896 ：Name_Not_Found：2005/05/18(水) 17:24:03 ID:PBoust0G

とても初歩的な質問で本当にすみませんが、どうしてもわからないので
教えて下さい。

テーブル内に背景固定をしたいのですが、MacではIE、サファリともにきちんと表示されているのに
ウィンドウズIEでは固定されずにスクロールと同じく背景も動いていきます。
ウィンドウズIEでも背景固定できるようにしたいのですが、どこを弄ればいいのかさっぱりわかりません。

.table{
text-align:left;
margin:0;
background-color:#fff;
background-attachment:fixed;
background-image:url(◎.jpg);
background-repeat:no-repeat;
background-position:100% 40%;
}

として、tableタグにクラス指定しています。

本当にすみませんが、どなたか教えてください。
お願いします。

897 ：Name_Not_Found：2005/05/18(水) 17:26:40 ID:4q1M5ZKc

Mac IE5.XでのCSSの確認方法どうしてます？
Macを持っていないので友人のもので確認してたのですが、変更が確認できません。

→レンタルサーバーのツールでアップロードしたCSSの値を変更。
→ブラウザで確認

と言う流れで作業してたのですが、「更新」を押しても変更が反映されず。
IEのキャッシュの設定を変えてみても効果なし。
変更したCSSを再度読み込ませるにはどうしたらいいでしょうか。

898 ：Name_Not_Found：2005/05/18(水) 17:31:22 ID:???

>>897
環境設定でキャッシュをクリアするボタンを押す

899 ：Name_Not_Found：2005/05/18(水) 17:39:21 ID:???

>>897
Alt+F5

900 ：Name_Not_Found：2005/05/18(水) 18:33:08 ID:4q1M5ZKc

>>898
>>899
ありがとうございます。
すぐに試すことはできませんが、早速参考にしたいと思います。

901 ：Name_Not_Found：2005/05/18(水) 19:28:33 ID:???

>>896
これか。一応使用の範囲内だな。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b065.html

902 ：Name_Not_Found：2005/05/18(水) 19:41:51 ID:???

font-familyの指定がマックで反映されません。
.fontclass { font-family: "平成明朝", "ＭＳ明朝" ; }
を<div class="fontclass">テキスト</div>で指定してます。
ウィンドウズでは反映されます。
マックに入っている他のどの書体でも反映されません。
ブラウザは5.1で、CSSのリファレンスサイトには
反映されると書いてあるのですが、何がいけないんでしょうか。
よろしくおねがいします。

903 ：Name_Not_Found：2005/05/18(水) 19:42:49 ID:???

↑
＞ブラウザは5.1
IE5.1です。

904 ：Name_Not_Found：2005/05/18(水) 19:58:32 ID:???

>>902
要は明朝系にしたいんでしょう？
.fontclass { font-family: serif; }

指定したいフォントがあるならserifの前に正しく書いてください。

905 ：Name_Not_Found：2005/05/18(水) 20:25:58 ID:???

>>902
日本語のフォント名は閲覧者の OS のロケール (地域設定) に
依存するので、英語のフォント名と併記した方がいいと思います。

日本語以外のロケールでは (あるいはソフトウェアによっては)
英語のフォント名が使用されます。

"ＭＳ" と "明朝" の間には半角スペースが入ります。
"ＭＳ明朝" に対応する英語のフォント名は "MS Mincho" です。

マック固有のフォント名はわかりませんが、それも日本語と英語で
正確に記述してください。

906 ：Name_Not_Found：2005/05/18(水) 20:39:45 ID:???

>>904-905
ご丁寧にありがとうございます。
フォントの指定部分のみ別ファイルを用意してテストしてみたところ
反映されました・・・！
反映されないのは、ブログのCSSとHTMLに指定した時
だけだったようです。
同じclass内のfont-size, font-weightなどは
反映されているので記述の問題ではないと思うのです
ブログの何が邪魔しているのかまだわかりません・・・
こんな例あるでしょうか？

907 ：Name_Not_Found：2005/05/18(水) 20:43:40 ID:???

>906
そのblogのドキュメントタイプを確認汁

908 ：Name_Not_Found：2005/05/18(水) 20:45:41 ID:???

>>906
文字コードとか

909 ：902 ：2005/05/18(水) 20:52:07 ID:???

>>907
HEAD内はこんな感じでDOCTYPEの指定はないようなのですが。。
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<meta http-equiv="content-style-type" content="style/css">
<meta http-equiv="content-script-type" content="text/javascript">
<link href="<%css_link>" type="text/css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">
<title><%blog_name></title>
</head>

910 ：Name_Not_Found：2005/05/18(水) 20:55:27 ID:???

CSSファイルの文字コード指定して、その通りにしてんですか？
@charset "EUC-JP";

911 ：902 ：2005/05/18(水) 21:12:25 ID:???

>>910
すいませんちょっと意味がわからないのですが・・・
このヘッドはデフォルト値です。
CSSも元々のものをコピペでテキストエディタに写し、それをコピペで戻して
ブラウザ上から更新しています
あと
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
この行を削除しても表示は同じでした。

ひょっとしてブログのほうに聞くのが正しいかもしれませんね…

912 ：902 ：2005/05/18(水) 21:26:40 ID:???

何を消してもうまくいかないので
やはりブログの掲示板で聞いてみます。
どうもありがとうございましたm(__)m

913 ：hina：2005/05/18(水) 22:15:46 ID:2s0DgV+X

MacのIEで同じに見える文字のCSSを教えてください。

WinのIEで文字に12pxのCSSを当てているのですが
MacのIEで見ると、文章の横幅が大きくなってしまいます。
javascriptでWinとMacを振り分けてCSSを当てているんですが
同じに見えるMac用のCSSを教えてください。

※Macの12pxとWinの80%は同じでした。
　Winの12pxはMacの何に当たるのでしょうか？
よろしくお願いします。

914 ：Name_Not_Found：2005/05/18(水) 22:17:18 ID:???

フォントが違う以上、サイズを合わせようとしても無理

915 ：Name_Not_Found：2005/05/18(水) 22:48:49 ID:???

>>868
これじゃいやかい？
<html>
<head>
<style>
*{margin:0;padding:0;}
body{background:#ffffff;}
#nav{width:100px;border:solid 1px #ff0000;height:200px;}
#main{position:absolute;margin-left:5em;border:solid 1px #0000ff;top:0;width:700px;height:400px;}
#sub{width:100px;border:solid 1px #00ff00;height:200px;}
</style>
</head>
<body>
<div id="nav">nav</div>
<div id="main">とりあえず幅固定700pxにしてみた。100pxと5emが重なるのはいいのかどうか不明</div>
<div id="sub">sub</div>
</body>
</html>

916 ：Name_Not_Found：2005/05/18(水) 23:04:00 ID:???

>>913
MSゴシック（等幅）でletter-spacingを1pxくらいとるとだいぶ近づくけど、
全く同じにはできない。そもそもOsakaでもアンチエイリアスのON/OFFで
一文字あたりの幅がかなり違う。
そもそも文字サイズはユーザ側で適宜変更できてしまうので、文字網の量の
多少の変動は許容できるようなレイアウトをするのがいいです。

917 ：Name_Not_Found：2005/05/18(水) 23:10:59 ID:???

馬鹿みたいに肥大化してしまったCSSファイルから
既に使われていないclassを抽出して整理する方法は
あるでしょうか…orz

918 ：Name_Not_Found：2005/05/18(水) 23:23:26 ID:???

MSoffice入れてなかったら、MSゴシックなんてmacに入っとらん。
IEももうOSのインストールディスクには入ってないし。

919 ：Name_Not_Found：2005/05/18(水) 23:27:29 ID:???

>>918
逆。ウィンドーズでの表示の場合に、MSゴにして（Pでもいいけど）文字間1pxくらいとると、
OsakaでアンチをOFFにしたのと、そこそこ近づくよって話です。
わかりづらくてスマソ。

920 ：Name_Not_Found：2005/05/19(木) 02:11:44 ID:???

>>917
devasを使って全HTMLファイルのクラスを一括検索。
該当なしは削除。

921 ：868：2005/05/19(木) 02:13:45 ID:???

>893,915
レスありがとうございます。遅くなってしまって本当にすみません。

できれば幅は％でいきたいですが　893,915　のやり方でしたい形には
だいぶ近づいてきました。
今帰宅したばかりでパッとやってみただけなのですが
これをヒントにもう少しがんばってみます。
またお手上げになったら聞きにこさせてもらうかもしれませんが・・・

本当にありがとうございました。がんばります。

922 ：917：2005/05/19(木) 03:22:09 ID:???

>>920
やっぱそれくらいしかないんですよね…(･ω･`)
レスどもです。

923 ：Name_Not_Found：2005/05/19(木) 03:46:57 ID:???

クラス削除で思い出すのは、クラスはいちいちつけたほうがいいってことだな。
クラスなんてダサイ、構造依存でCSSをつけるが通だと最初は思っていたが、
手を加えるときに思わぬしわ寄せが来てたいへんだった。
気づかずに他のページがぐちゃぐちゃになったこともある。
以来、別段クラスをつける必要がなくても、
HTMLの一まとまりごとにクラスやIDを振るようにしている。

924 ：Name_Not_Found：2005/05/19(木) 09:01:57 ID:???

うちの父ちゃんも物を整理するときは
なんでも箱にしまって名札をつけているよ

925 ：Name_Not_Found：2005/05/19(木) 11:22:10 ID:???

スタイルシートからスタイルシートを呼び出すのがあったような気がするのだけど、
どうやったらいいか教えてー

926 ：Name_Not_Found：2005/05/19(木) 11:49:29 ID:???

>>925
@import

927 ：925：2005/05/19(木) 12:36:55 ID:???

>>926
ありが㌧

928 ：Name_Not_Found：2005/05/19(木) 13:45:02 ID:QS7lVvuY

質問です。
<p style="clear:right">
<span style="float:right ; width :200px">コメント</span>
<img src="test.jpg">
</p>

画像を左に、テキストを右に配置しようとしてます。
ところが、なぜかMac　IE5,2では画像がテキストの左に配置されません。
また、なぜかテキストの行間が不規則になります。どうしたらいいでしょうか。

929 ：Name_Not_Found：2005/05/19(木) 13:52:57 ID:???

インラインに・・・・

930 ：Name_Not_Found：2005/05/19(木) 14:05:05 ID:???

(´-`).｡oO( 何処でそんなの覚えてくるんだろうなぁ・・・)

931 ：928：2005/05/19(木) 14:09:21 ID:???

え・・・全くわかりません。
もう少しヒント下さい。

932 ：Name_Not_Found：2005/05/19(木) 14:20:24 ID:???

画像を左に寄せたら？

933 ：Name_Not_Found：2005/05/19(木) 15:04:42 ID:???

windowsのかた、IEではborder-style:dottedって表示されてます？
macのsafari,IEではきちんと表示されるのですがwindowsのIE6.0では
なぜかdashed(破線)
- - - - - - -
のように表示されます
.............
こういう点線にしたいんですが・・・

>>928
行間は<タグ style="line-height: Xpt;">テキスト</タグ>
でどうでしょう？

934 ：Name_Not_Found：2005/05/19(木) 15:23:55 ID:???

<タグ>
ってのはなかなか新しい書き方だな……

935 ：Name_Not_Found：2005/05/19(木) 15:34:49 ID:T2H9ZLIo

h1のHEIGHTをIE６とモジラであわせるのってどうやるんでしたっけ

936 ：Name_Not_Found：2005/05/19(木) 15:45:53 ID:???

>>933
IEだとddottedでも破線になるよ。
background-image使うのが楽チンかな。

>>935
>>6のQ1かな。

937 ：Name_Not_Found：2005/05/19(木) 15:46:36 ID:???

少々スレ違いですがどなたかお知恵を！
お客様の依頼で、あるテキストをCHRISTINAで表示させて
欲しいとのこと。
Windowsフォントらしく、手持ちのPC、WindowsXP、HomeEditionも
Professionalも見てみましたが入っておりませんでした。
このCHRISTINAフォント、どこかでDLできる場所はありませんでしょうか？

938 ：Name_Not_Found：2005/05/19(木) 15:50:56 ID:???

>>936
ありがとうでございまするううう。

939 ：Name_Not_Found：2005/05/19(木) 15:59:16 ID:???

>>937
そのフォントがどんなのかわからないと探しようがないけど…。
ttp://www.fonts.com/findfonts/detail.asp?pid=319995
これじゃなければ僕にはわからないっす。

スレ違いだとわかってるなら次は他でお願いしますね。
…って、フォントスレ無くなったの？

>>936
ddotted→dottedね。

940 ：933：2005/05/19(木) 16:00:07 ID:???

>>936
親切なかたありがとうございます!

941 ：Name_Not_Found：2005/05/19(木) 16:20:20 ID:???

>>939
ありがとうございます。
フォントスレ、フィルタで探してみたのですが
見当たらずCSSで表示と思って書いてしまいました。

先に貼れよって感じですが、フォントは下記です。
ttp://www.sun-inet.or.jp/~seven-ss/font2/font.htm
どうも筆ぐるめとやらに入っているようなので
購入を検討してみます。

感謝でした。

942 ：902 ：2005/05/19(木) 16:46:41 ID:+Y7mJtGJ

902,906ですが、やはりブログの問題でなくマック×外部CSSの問題のよーなんです...
すいませんがアドバイスいただけたらと思います

【環境】MacIE5.1.7, OS 9.0.4
【やりたいこと】外部CSSからclassでfont-family指定。

【font-family指定が成功する場合】
・htmlのhead内cssに書いたclassで指定した場合
・htmlのbody＞タグ内styleで直接指定した場合
つまり、これは成功
■HTML
<div style="font-family:'平成明朝'; font-size:20px;">テキスト</div>

これは失敗
■外部CSSファイル
.test {font-family:'平成明朝'; font-size:20px;}
■HTML
<div class="test">テキスト</div>
※ただし、同じclass内のfont-sizeやその他の属性は反映される

【既にやってあること】
・HTMLは lang="ja"、charset=euc-jp
・CSSファイルの文字コードはeuc-jpに変換済み
・CSSファイルでcharset宣言（@charset "EUC-JP"; ）

こんな感じです。
なぜ反映されないんでしょう…

943 ：Name_Not_Found：2005/05/19(木) 18:44:01 ID:???

>>942
てゆーか平成明朝って指定したことないからわかんないけど
Macに入っていたっけ？平成明朝
入っていないなら代替指定がいるよね。

で、ヒラギノだと"ヒラギノ角ゴ Pro W3"という具合に太さ付きで指定したと思うんだけど
平成明朝も太さ指定は要らないのかな？

944 ：943：2005/05/19(木) 18:44:58 ID:???

あ
>>942よく読んでなかったスマソ>>943無視してね

945 ：Name_Not_Found：2005/05/19(木) 18:52:12 ID:???

俺のpcに"平成明朝" なんて無いからどうでもいいや。

946 ：Name_Not_Found：2005/05/19(木) 19:10:28 ID:???

フォント指定なしでいいよ

947 ：Name_Not_Found：2005/05/19(木) 19:41:02 ID:???

>>942
文字コードが何であろうとlink要素でインクルードした次点でunicodeとかに
なってんじゃないの？予想だけど。
あと、デフォのOS9だったら明朝の書体って平成明朝（と細明朝体も？）くらいだよね？
だったらserifでいけそうな希ガス。

948 ：Name_Not_Found：2005/05/19(木) 20:32:47 ID:???

>>942
残念ながらMacIEの外部CSSは
Shift_JISかUTF-8にしないと日本語を読んでくれない。

949 ：Name_Not_Found：2005/05/19(木) 22:19:33 ID:???

おお・・・！

950 ：942 ：2005/05/19(木) 22:23:59 ID:???

>>948
確かにShift_JIS、UTF-8にすると大丈夫でした！ローカルで。

が、肝心のブログに写したらどっちも化け化けでした・・・。
EUCのみのようで。
これで諦めがつきました。
本当にありがとうございました。

951 ：943：2005/05/19(木) 22:28:19 ID:???

>>950
font-family:'平成明朝' , serif;

でもだめ？

952 ：942 ：2005/05/19(木) 23:50:32 ID:???

>>951
euc-jpではダメっす

953 ：Name_Not_Found：2005/05/19(木) 23:51:39 ID:???

喪前ら全問正解してから質問汁
ttp://allabout.co.jp/computer/hpcreate/closeup/CU20050517A/index.htm?FM=rss

954 ：Name_Not_Found：2005/05/20(金) 00:23:57 ID:???

>>953
簡単過ぎじゃね？

955 ：Name_Not_Found：2005/05/20(金) 00:30:22 ID:???

>953
やってみたけど、正直言うとscriptの方に興味持っちゃった。
（ちと重いけど、flaに応用出来そう）

956 ：Name_Not_Found：2005/05/20(金) 00:50:42 ID:???

>>952
あらかじめ数値参照みたいな形式に置き換えておくとかは？
何だっけ、これ。BASE変換でもないし…ともかく、そんな技があったようなきがする。

957 ：Name_Not_Found：2005/05/20(金) 17:06:06 ID:???

>948
『日本語を読んでくれない』だけで、
@charset EUC-JP;
の外部CSSは読み込んでくれるよね？
mac持ってないから調べられない。。。

958 ：Name_Not_Found：2005/05/20(金) 17:40:42 ID:???

http://www.mitsue.co.jp/case/design/c_index.html
次、テンプレにこれ入れてくれないか？

959 ：Name_Not_Found：2005/05/20(金) 17:52:59 ID:???

お前が建てて入れたら宜しい。

960 ：Name_Not_Found：2005/05/20(金) 18:15:39 ID:???

じゃあそろそろ建てますよ　と
テンプレは良くわからないのでよろしく。

961 ：Name_Not_Found：2005/05/20(金) 18:19:59 ID:???

つttp://pc8.2ch.net/test/read.cgi/hp/1116580729/

962 ：Name_Not_Found：2005/05/20(金) 19:05:44 ID:???

連続投稿で規制されたが>7のヘルプで出来たぞ。

　/* CSS･スタイルシート質問スレッド【43】 */
http://pc8.2ch.net/test/read.cgi/hp/1116580729/

963 ：Name_Not_Found：2005/05/20(金) 20:52:50 ID:???

<html>
<head>
<title></title>
<style type="text/css">

div.logo {
width: 166px;
height: 60px;
margin: 0 auto;
border: 1px solid #000000
}

</style>
</head>

<body>

<div class="logo">
<img src="./logo.gif" width="166" height="60" border="0">
</div>

</body>
</html>

ボックスのサイズと画像のサイズを同じにしているのに何故かボーダーと画像
とが同じ大きさになりません（画像の下に隙間ができます）。
NN7.1なら隙間ができないんですが、IE6だとできちゃいます。
これもIEのバグなんですか？

964 ：Name_Not_Found：2005/05/20(金) 20:58:21 ID:???

965 ：Name_Not_Found：2005/05/20(金) 21:16:26 ID:???

おーっ、同じ大きさになりました。ありがとうございます。
タグの改行は表示に影響しないとばかり思っていましたが
（どこかでそう読んだ気がします）私が常識知らず
だったのでしょうか。

何しろ>>963さん、感謝します。

966 ：Name_Not_Found：2005/05/20(金) 21:20:31 ID:???

常識知らずでし

967 ：Name_Not_Found：2005/05/20(金) 21:23:06 ID:???

だな

968 ：Name_Not_Found：2005/05/20(金) 21:26:12 ID:???

>>957
css自体は読み込むよ
ただ日本語で指定したフォントファミリーは無視される

969 ：965：2005/05/20(金) 21:27:25 ID:???

失礼しました。これで一歩常識人に近づきました。

970 ：Name_Not_Found：2005/05/20(金) 21:32:55 ID:???

だがな、常識人ってつまらんのよ。

971 ：Name_Not_Found：2005/05/20(金) 21:53:06 ID:???

>>957
日本語がへんなバイト列として解釈されると、日本語以降が無視されたりもする。

972 ：Name_Not_Found：2005/05/20(金) 22:31:00 ID:i/hzzQgY

body > h1 と書いてある「>」というのはどういう意味なのでしょうか。
記号なのでどう検索ワードを入れていいかわからず途方に暮れてます。

973 ：Name_Not_Found：2005/05/20(金) 22:36:24 ID:???

>>972
子供セレクタ

974 ：Name_Not_Found：2005/05/20(金) 22:54:10 ID:???

>>956
横文字で指定する方法あるんですよね。
でも、指定したいフォントの横文字表記が全て調べられないので断念

つか和文フォント大辞典、便利なサイトだけど
フォント指定する時の正式名称も載せてくれたら神なのに・・・
と思った。

975 ：Name_Not_Found：2005/05/20(金) 22:55:09 ID:???

↑ごめん何言ってるかわかんないね。
各社フォントのサンプルが見れるサイトの話です

976 ：Name_Not_Found：2005/05/20(金) 22:56:18 ID:???

したら、ｱﾄﾞ書く！

977 ：Name_Not_Found：2005/05/20(金) 22:57:24 ID:???

>>973
ありがとうございました。たどり着けました。

978 ：Name_Not_Found：2005/05/20(金) 23:15:06 ID:???

>>976
大辞典じゃなくて大図鑑だった
ttp://ohkadesign.cool.ne.jp/wabunfont/category/category.html
この文字種別検索が便利。
でもfamilyは載ってない・・・
CSSに関係ないのでここらで

979 ：Name_Not_Found：2005/05/21(土) 00:31:43 ID:???

そろそろ次スレッドの準備。
FAQのA5（>>8）の下記はリンク切れ？
　http://kobit.info/tips/overflow.html
　http://kobit.info/files/frame.html

新スレッドへ移行したら下記で申請もよろしく。
　http://qb5.2ch.net/test/read.cgi/operate/1106260567/l50

980 ：Name_Not_Found：2005/05/21(土) 00:34:52 ID:???

>>979
次スレ立ってます

/* CSS･スタイルシート質問スレッド【43】 */
http://pc8.2ch.net/test/read.cgi/hp/1116580729/

981 ：ぼるじょあ ◆yBEncckFOU ：2005/05/21(土) 03:15:20 ID:???

　ﾂｲー　 -＝　∧_∧
　　　 -＝≡　（　・３・）　うＭＥ
　　　　　　-＝（　つ┯つ
　　　　 -＝≡/　 / //
　　　 -＝≡（_＿）/ ）
　　　　 -＝ (◎)￣））

982 ：ぼるじょあ ◆yBEncckFOU ：2005/05/21(土) 03:16:16 ID:???

　| _∧
　|・３・）・・・うＭＥ
　|⊂ﾉ

983 ：ぼるじょあ ◆yBEncckFOU ：2005/05/21(土) 03:18:23 ID:???

　　　　　　　/つ_∧
　　/つ_,∧ 〈（・３・）　うＭＥ
　　|（・３・）ヽ ⊂ニ)
　　ヽ__と/￣￣￣/ |
　￣＼/＿＿＿/￣￣

984 ：Name_Not_Found：2005/05/21(土) 13:10:24 ID:???

ｳﾒ━━━━ヽ(＾▽＾ )ﾉ━━━━!!!

985 ：Name_Not_Found：2005/05/21(土) 13:59:27 ID:???

>>951
serifは、HTMLに直接書いても駄目みたいですね。macIE5.1。