/* CSS・スタイルシート質問スレッド【51th】 */

1 ：Name_Not_Found：2006/01/15(日) 16:35:03 ID:QIG8pGVn

CSSに関する質問はこちらへどうぞ。 ※　議論はよそで　※

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

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

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

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

【まとめサイト】　http://web2ch.s31.xrea.com/?CSS
【FAQ】　http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】　http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】　http://pc8.2ch.net/test/read.cgi/hp/1134048018/

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

2 ：Name_Not_Found：2006/01/15(日) 16:35:36 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でイケてるデザインサイト 30
http://pc8.2ch.net/test/read.cgi/hp/1136660907/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

3 ：Name_Not_Found：2006/01/15(日) 16:36:16 ID:QIG8pGVn

【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/
【解説など】
・ごく簡単なHTMLの説明
　http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
　http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS1テストスイート
　http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/
・K@tsukun's PAGE! > 付録：CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.at.infoseek.co.jp/

4 ：Name_Not_Found：2006/01/15(日) 16:36:25 ID:fqn64Xfs

３ゲトー

5 ：Name_Not_Found：2006/01/15(日) 16:36:44 ID:???

【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
　http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方法
　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
　http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

6 ：Name_Not_Found：2006/01/15(日) 16:37:10 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：2006/01/15(日) 16:37:25 ID:???

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
　ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
スタイルシートスタイルブック
　http://stylesheet-stylebook.com/

8 ：Name_Not_Found：2006/01/15(日) 16:42:48 ID:???

>>4
ジャマするなー

9 ：Name_Not_Found：2006/01/15(日) 17:39:56 ID:h3pQaZQw

windows98のウィンドウの上部の青いグラデーションをかけるにはどうすれば
いいでしょうか?
テーブルを使わないと無理でしょうか?

10 ：Name_Not_Found：2006/01/15(日) 19:12:23 ID:???

>>9
グラデーションは画像でやれ。

11 ：Name_Not_Found：2006/01/15(日) 20:58:54 ID:???

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

12 ：Name_Not_Found：2006/01/15(日) 20:59:31 ID:???

【FAQ】
Q5: CSSで擬似フレームってどうやるの？
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
　http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html
レイアウトサンプル擬似フレーム
　http://www.rju666.com/web/layout/imitate_frames.html

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

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

Q8.dt・ddを横並びにしたいのですが。（会話文など）
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

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

13 ：Name_Not_Found：2006/01/15(日) 21:00:12 ID:???

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

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

Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。
「いままでの HTML との対照」
　http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

14 ：Name_Not_Found：2006/01/15(日) 21:00:43 ID:???

【参考】
＊IEの position:absolute; のバグを利用した擬似フレーム
１．標準モードにする
２．body {height:100%; overflow:auto;}
３．fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

アンダーバー・ハックの方がいいか？
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html

15 ：Name_Not_Found：2006/01/15(日) 21:04:28 ID:???

>>8-10　お前らも、邪魔するな。待て、もできんのかワンワンども。

>>1　スレッド移行済んだら、これも宜しくね。

■ ローカルルール等リンク先更新総合スレッド 15
http://qb5.2ch.net/test/read.cgi/operate/1126794875/l50

【まとめサイト】
http://web2ch.s31.xrea.com/?CSS
http://web2ch.s31.xrea.com/?CSSLog

16 ：Name_Not_Found：2006/01/16(月) 19:06:47 ID:???

ルー大柴に書いてしまいました・・・改めて。

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

HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>001</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="top">top</div>

<div id="main_wrap">
<div id="menu">menu</div>
<div id="main">main contents</div>
<div id="bottom" align="right">CopyRight 2006 111 All Rights Reserved.</div>
</div>
</body>
</html>

17 ：16：2006/01/16(月) 19:07:23 ID:???

CSS部分（外部ファイル）

div#top {
width:800px;
background-color:#ff0000;
}
div#main_wrap {
clear:both;
width:800px;
background-color:#cccccc;
}
div#menu {
float:left;
border:0px dashed #ffffff;
width:130px;
background-color:#00ff00;
padding:0px 0px 0px 10px;
}
div#main{
float:left;
width:660px;
}
div#bottom {
float:left;
clear:both;
width:800px;
color:#666666;
}

18 ：Name_Not_Found：2006/01/16(月) 19:08:17 ID:???

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

ちなみに、
win XPでも
Netscape4.8 Netscape6 Netscape7.1 Netscape8.0
Opera8.5 Firefox1.5
では正常です。

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

19 ：Name_Not_Found：2006/01/16(月) 21:22:06 ID:???

ﾊｯｸすれば済むことじゃないのか？

20 ：Name_Not_Found：2006/01/17(火) 04:21:52 ID:???

これか？
　コメントがフロートの位置をずらす(6.0)
　http://cssbug.at.infoseek.co.jp/detail/winie/b166.html

21 ：Name_Not_Found：2006/01/17(火) 05:31:56 ID:ZjpwrPUA

Floatで左寄せにしたブロックの中身を中央よせにするには
divを入れ子にするしかないのでしょうか？
<div style="float:left; width:300; border:1px solid black;">これをセンターに</div>
よろしくおねがいします！

22 ：Name_Not_Found：2006/01/17(火) 06:02:23 ID:JFWi6GiY

optgroupのlabelで指定した見出しがイタリック体になるんですが（IEの場合）
これを普通の文字にするにはどうしたらいいでしょうか？

23 ：Name_Not_Found：2006/01/17(火) 13:12:40 ID:???

>>21　
その中身ってのがインラインならtext-alignで。
あと、単位を抜かすのは不可、ＩＥでしか通用しない。＞width:300;

>>22
labelをセレクターとして、font-styleを指定しな。初歩すぎ。

24 ：Name_Not_Found：2006/01/18(水) 01:49:27 ID:???

□□□□□
□□
■□□□□
□□

↑こんな風に段組みする場合
（□がひとつのDIVとして見てください）、
■の部分はfloatをどういう風に指定したらいいのでしょうか
（直前のdivのfloatは切りたい、でも直後のdivはfloatさせたいという場合）。

これまでは2行めが終わった段階で、
<div class="cboth"></div>
というようなタグを加えた後に
3行目を新たに書き込んでいったのですが、
another html lintを使うと、
『空のdivを使用するのはいけない』と出てしまいます。

もの凄く分かりにくい説明かもしれませんが、
分かる方がいましたらよろしくお願いします。

25 ：Name_Not_Found：2006/01/18(水) 01:59:42 ID:???

□はdivじゃないとまずいの？
インライン要素を横に並べて
横一列をひとかたまりのブロック要素で囲って
縦に4つ並べた方が楽な気がするけど

26 ：Name_Not_Found：2006/01/18(水) 02:05:53 ID:???

タグを加える・・・

27 ：Name_Not_Found：2006/01/18(水) 02:18:14 ID:???

>>25
あ、その手がありましたか。
ありがとうございました。

28 ：Name_Not_Found：2006/01/18(水) 06:48:18 ID:???

なんだかなぁ・・・

29 ：Name_Not_Found：2006/01/18(水) 14:11:56 ID:???

こっちでもう質問してる奴いたのか・・・
とりあえずまだこっち↓だから。

CSS {スタイルシート質問スレッド:50%;}
http://pc8.2ch.net/test/read.cgi/hp/1134048018/

30 ：Name_Not_Found：2006/01/18(水) 15:37:30 ID:???

>>28
分かってるなら答えてやれよ。
なに偉そうに書き込んでんだよ。

31 ：Name_Not_Found：2006/01/19(木) 00:08:59 ID:???

時刻みるよろし。　　　おいらもなぁ・・・

32 ：Name_Not_Found：2006/01/19(木) 18:04:21 ID:AK/OYl/3

IE6でsubmitボタンの文字の左右の余白を減らすことはできませんか？
ボタンの文字列の長さに比例して余白が増えるようなので、
文字が長い場合は余計にボタンが長くなってしまいます。
INPUT {padding: 0px;}
としても効果ないみたいです。

33 ：Name_Not_Found：2006/01/19(木) 18:22:04 ID:???

widthを指定してみれば。

34 ：Name_Not_Found：2006/01/19(木) 18:23:04 ID:???

>>32
普通にできたよ？

35 ：Name_Not_Found：2006/01/19(木) 18:23:56 ID:???

>>33
あのなぁ…

36 ：Name_Not_Found：2006/01/19(木) 18:34:41 ID:AK/OYl/3

>>34
「普通に」とは？
具体的に書いてもらえませんか？

37 ：Name_Not_Found：2006/01/19(木) 20:03:56 ID:???

>>36
input {
padding: 0;
}

38 ：37：2006/01/19(木) 20:07:40 ID:???

input {padding: 0;}

39 ：Name_Not_Found：2006/01/19(木) 22:03:10 ID:???

CSSでメニューを横並びに表示させようとしています。
表示されるメニューがなぜかどんどん下にずれ、ななめになってしまうのです。
(winIE6で確認)

.menu a{
float: left;
background: url("sozai/header_button.gif") repeat;
border: 0px;
height: 34px;
width: 125px;
text-align: center;
font-size: 14px;
padding: 9px;
margin: 3px;
}

aはhoverを使うために使用したいのですが、
aを入れると斜めになってしまうのです。
どなたかご教授願います。

40 ：Name_Not_Found：2006/01/19(木) 22:34:40 ID:???

>>39
斜めに、とは？　状況が解らない。下記のバグみたいなものか？
　http://cssbug.at.infoseek.co.jp/detail/winie/b009.html
それに、a要素ならインライン要素であるからfloatかけなくても横並びになる筈。
text-align: center;も意味不明。
スタイルを適用させるＨＴＭＬのソースも出してくれないと、解答できない。

41 ：Name_Not_Found：2006/01/19(木) 22:48:59 ID:???

42 ：Name_Not_Found：2006/01/19(木) 23:00:44 ID:???

逃亡？

43 ：39：2006/01/20(金) 09:03:41 ID:???

質問しておいて大変失礼しました・・
別対応でＰＣ前を離れていましたもので

症状としては>>41と同様の物となります。
menuそれぞれのheightは34。
ズレがheight16位ずつ発生しています。
（この値はpaddingやfont-sizeを変更しても変化ありませんでした）
またcssファイル内の記述は上記のみで発生しています。

44 ：Name_Not_Found：2006/01/20(金) 09:26:19 ID:???

>>43
>>40

45 ：39：2006/01/20(金) 09:54:16 ID:???

失礼しました。こちらが適用させるHTMLソース
<html lang="ja"><head><link rel="stylesheet" href="default.css" type="text/css" media="all"></head><body>
<ul id="navbar">
<li class="menu"><a href="index.html" title="ホーム">ホーム</a></li>
<li class="menu"><a href="abount.html" title="会社概要">会社概要</a></li>
<li class="menu"><a href="service.html" title="サービス">サービス</a></li>
</ul>
</body></html>
こちらがCSSのファイルになります。
@charset "Shift_JIS";
#navbar{
width: 700px;
height: 34px;
margin: 0px;
padding: 0px;
list-style: none;
}
.menu a{
float: left;
background: url("sozai/header_button.gif") repeat;
border: 0px;
height: 34px;
width: 125px;
text-align: center;
font-size: 14px;
padding: 9px;
margin: 3px;
}
ここにmenu a:hover{}を追加し、画像表示位置を変えることでマウスオーバー
処理を実現しようとしています。この現在のCSS記述から a　を抜くと症状が発生しない、、という状況です。

46 ：Name_Not_Found：2006/01/20(金) 10:24:43 ID:???

>>45
>この現在のCSS記述から a　を抜くと症状が発生しない
それでいいんじゃないの？
縦並びにさせているのはliだからliをfloatで横並びにさせればいいんじゃない？

47 ：Name_Not_Found：2006/01/20(金) 10:28:23 ID:???

li { display:inline;} をお勧めする

　　後はよしなに

48 ：39：2006/01/20(金) 10:36:26 ID:???

>>46
aを抜くとhoverを使えない・・？と思うのでそれは出来ないのです。

>>47
出来ました！

なるほど。。ブロックレベルからインラインレベルへ変換ですか。
皆さんありがとうございました。

49 ：Name_Not_Found：2006/01/21(土) 00:22:45 ID:???

毎度思うんだけど
なんでli要素にclass当ててるんだろう？

div付けてnavbar
ulにmenu
つまり
<div id="navbar">
<ul id="menu">
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
</ul>
</div>

これでよくね？と。

50 ：Name_Not_Found：2006/01/21(土) 00:36:29 ID:???

ｶﾜｳｿ

51 ：Name_Not_Found：2006/01/21(土) 00:51:22 ID:???

>>49
一個ずつ背景画像を変えるときにはliに付けるな。
これも何番目の子というCSS3のセレクタが実用になれば使わなくなるだろうが。

52 ：Name_Not_Found：2006/01/21(土) 12:48:35 ID:fmCcpZr7

<HTML>
<HEAD>
<title>test</title>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>

<div class="midasi">見出し</div>

</BODY>
</HTML>

これの.midasiがなぜか反映されないのだが。

53 ：Name_Not_Found：2006/01/21(土) 12:51:30 ID:OtNeHL87

<input type="text">でテキストボックスを作成すると、少しくぼんだ
テキストボックスが作成されますが、スタイルシートなどでそのくぼみを
なくすことはできますか？

54 ：Name_Not_Found：2006/01/21(土) 13:05:52 ID:???

>>52
線種を指定汁！

見出しは　hn を使うように

55 ：Name_Not_Found：2006/01/21(土) 13:06:29 ID:???

>>53
できます。

56 ：Name_Not_Found：2006/01/21(土) 13:09:46 ID:fmCcpZr7

>>54
出来た。ｻﾝｸｽ。
ちなみにhを使ってこんな感じにできる？

57 ：Name_Not_Found：2006/01/21(土) 13:14:09 ID:???

やってから訊け

ロボットに拾われたければhnに汁

58 ：Name_Not_Found：2006/01/21(土) 13:15:07 ID:fmCcpZr7

>>57
<div class="midasi"><h2>見出し</h2></div>
でいいのか？

59 ：Name_Not_Found：2006/01/21(土) 13:22:59 ID:???

h1 {
border: 0 0 3px 10px solid #6ab7b9;
}

<h1>はげはげほげほげ</h1>

　　こりでやってみぃ

#マージン・パディング・文字サイズはcssでよしなに

60 ：Name_Not_Found：2006/01/21(土) 13:30:59 ID:???

>>55
どうすればいいんですか？

61 ：Name_Not_Found：2006/01/21(土) 14:23:25 ID:???

>>60
ヒント：borderプロパティ

62 ：Name_Not_Found：2006/01/21(土) 14:26:52 ID:???

>>61
widthを0にしたらいけた。
神様、ありがとうございます。

63 ：Name_Not_Found：2006/01/21(土) 16:36:47 ID:???

すみません。
チソコがfloat:left;してしまい困っているのですがどうにかしてclear:both;する方法はないでしょうか？
huckでも結構ですのでご存知の方いましたらよろしくお願いいたします。

64 ：Name_Not_Found：2006/01/21(土) 16:46:14 ID:???

>>63
キソタマ { clear: both; }

65 ：Name_Not_Found：2006/01/21(土) 16:49:35 ID:???

パンツ { display : table }

66 ：Name_Not_Found：2006/01/21(土) 16:51:14 ID:???

widthとheightにfloatしないくらいの数値を指定

67 ：Name_Not_Found：2006/01/21(土) 17:05:43 ID:J99+zjKm

ありがとうございます。
#chisoko{
width:4cm;
height:14cm;
にサイズ変更したら解決しました。

68 ：Name_Not_Found：2006/01/21(土) 18:39:01 ID:???

ageてまで書くことじゃないな

69 ：Name_Not_Found：2006/01/21(土) 20:11:41 ID:???

初歩的な質問でしません。ググっても初歩的すぎて？出てこなくて・・。
<p>で段落を作る際に、

<p>あいうえお</p>
↑↓この幅
<p>あいうえお</p>

を変えるにはどういう記述をすればいいですか？

70 ：Name_Not_Found：2006/01/21(土) 20:31:13 ID:???

p{margin: 10px;}

71 ：Name_Not_Found：2006/01/21(土) 20:31:24 ID:???

p{line-height:x;}

72 ：Name_Not_Found：2006/01/21(土) 20:39:53 ID:???

>>69　新規質問は、上げなさい。
p {
line-height:1.5;
margin:0.5em 0;
}

73 ：69：2006/01/21(土) 20:50:49 ID:OZ7tYkgJ

>>70-72
ありがとうございます！たすかりますた！

74 ：Name_Not_Found：2006/01/22(日) 01:06:24 ID:D5vMm3KX

body {
background-color: #000;
color: #fff;
}

こうすると、下に余白が出来る場合余った部分の背景が
白になってしまいます（Firefox）。
これはどうすれば直せますか？

75 ：Name_Not_Found：2006/01/22(日) 01:10:24 ID:???

>>74
html { background-color : #000; }

76 ：Name_Not_Found：2006/01/22(日) 01:18:27 ID:D5vMm3KX

>>75
htmlセレクタにも適用できるんだぁ！
初めて知りました。どうもありがとーっ！

77 ：Name_Not_Found：2006/01/22(日) 01:19:14 ID:D5vMm3KX

あ、まとめサイトのWikiに書いておきますね(^_^;)

78 ：Name_Not_Found：2006/01/22(日) 01:30:59 ID:bf3Erm1i

CSSでできること、できない事がイマイチわかっていないのですが、
複数のページ内にあるセル中の共通内容を一つ修正したら、
他のページにも反映させることって、CSSで可能ですしょうか？
（共通内容のセルの位置は各ページ変わります）
どうぞよろしくお願いします。

79 ：Name_Not_Found：2006/01/22(日) 01:33:07 ID:???

>>78
つPHP

CSSって何するものか調べな

80 ：Name_Not_Found：2006/01/22(日) 01:41:34 ID:???

>>78
共通項目である「装飾」に関することなら1ファイルで済む、という類のものがCSS。

81 ：Name_Not_Found：2006/01/22(日) 04:25:17 ID:5e8mHz1o

blockquoteの中のAタグだけリンク色を変えるにはどうすればいいでしょう。
blockquote　a { color:red; }
ではダメなようでした。

82 ：Name_Not_Found：2006/01/22(日) 05:00:35 ID:???

>>77　初心者すぎる質問を書き込んで汚すな、この。消しておくぞ。

83 ：Name_Not_Found：2006/01/22(日) 05:05:02 ID:???

>>81
blockquote a:link, blockquote a:visited, blockquotea:hover {
color:red;
}
cf. http://www.mozilla.gr.jp/standards/webtips0012.html

84 ：Name_Not_Found：2006/01/22(日) 05:06:11 ID:???

>>81
訪問済みで変色してるんでないの？
blockquote a:link, blockquote a:visited, blockquote a:hover {
color:red;
}
cf. http://www.mozilla.gr.jp/standards/webtips0012.html

85 ：81 ：2006/01/22(日) 05:19:52 ID:???

>>83-84
㌧！記憶がおかしかったです

86 ：Name_Not_Found：2006/01/22(日) 05:34:22 ID:???

へ？　記憶……？

87 ：Name_Not_Found：2006/01/22(日) 06:18:45 ID:???

CSSとは直接関係なんだけどさ、
MdNの「プロとして恥ずかしくないスタイルシートの大原則」のP49-51で
ソシムの「XHTMLマークアップ＆スタイルシートリフォームデザインガイドブック」の画像を大量に使ってる。
どういうことだろう。

88 ：Name_Not_Found：2006/01/22(日) 07:04:50 ID:IeNp5mdo

あの本の画像は境うんちゃらいう人の会社のイラスト描きのストックでしょ。
意味ぜんぜんない画像はノイズだっていうのにな。

89 ：Name_Not_Found：2006/01/22(日) 09:38:24 ID:???

CSS ファイルをブラウザで閲覧したら、文字化けして「ｷﾓｲ｡ｼﾈ」に
なってました。
ちょっとショック……

90 ：Name_Not_Found：2006/01/22(日) 12:47:04 ID:???

91 ：Name_Not_Found：2006/01/22(日) 12:47:11 ID:???

なんで文字化けすんのよ？
コメント部分か？

92 ：Name_Not_Found：2006/01/22(日) 14:09:06 ID:???

>>91
/* ･ｷﾓ･ｲ｡ｼﾈ･ */

＿|￣|◯

93 ：1203：2006/01/22(日) 16:40:27 ID:GdKTK/zh

力をお貸しください。
hrに背景イメージを指定したとき、
ボーダーがそのまま出るので、
border: none;を追加して
消そうと思ったのですが
IEだけ消えてくれません。
また、上下に余白orマージンが入ります。
全称セレクタでmargin: 0px;とpadding: 0px;は
指定しているのですが…。
皆さんは水平線をCSSで装飾する際、
どうされているのでしょうか？
hrに背景イメージはタブーなのでしょうか？

94 ：Name_Not_Found：2006/01/22(日) 17:32:42 ID:29LQa6u9

ヤフーの日経２２５チャートをホームページに貼りたいのですが、
なかなかうまくいきません。
自動的に更新されるチャートの貼り方をどなたか教えてもらえないでしょうか？

95 ：Name_Not_Found：2006/01/22(日) 17:56:17 ID:???

>>93
hr要素へのスタイル指定
http://cssbug.at.infoseek.co.jp/misc/hr.html

96 ：Name_Not_Found：2006/01/22(日) 18:05:32 ID:kTnNYf/Q

ライブドアのブログ製作してるのですが
トップの画像を自分のデザインした画像のＵＲＬをＣＳＳに貼ってＴＯＰ画像にしてます。
そこで質問ですが、自分で用意したＴＯＰ画像をランダムで表示させる方法を教えてください。
わかりづらくてすいません。

ttp://kamibakusho.com/
↑のサイトのようにＴＯＰ画像をランダムで表示させたいのです…。

97 ：Name_Not_Found：2006/01/22(日) 18:07:27 ID:???

JavaScriptスレッドゆけ。それと説明文はもっと明瞭に。>>96

98 ：Name_Not_Found：2006/01/22(日) 18:18:09 ID:???

>>93
hrにbgimageがタブーというより、装飾目的での水平線の使用自体御薦めできない。

99 ：Name_Not_Found：2006/01/22(日) 18:34:16 ID:kTnNYf/Q

javaスレの質問だったんですね。そんなこともわかりませんでした…。orz
ご迷惑かけました。行ってきます。

100 ：Name_Not_Found：2006/01/22(日) 19:18:51 ID:???

>>99
JavaとJavaScriptも別物・・・

101 ：Name_Not_Found：2006/01/22(日) 19:23:19 ID:???

実は、スタイルシートとＣＳＳも別物なんです。ＪＳＳって、あったな……。

102 ：Name_Not_Found：2006/01/22(日) 19:32:17 ID:???

>>101
もちろん、だからCSS・スタイルシート質問スレッドって名前だと思ってたが。

103 ：96：2006/01/22(日) 19:34:47 ID:kTnNYf/Q

ライブドアのブログでＴＯＰ画像のＵＲＬはＣＳＳってところに入力してたので
ここでＯＫだと思っておりました。
ｊａｖａスレでも怒られてしまいました。
もう少し勉強してきます。

104 ：Name_Not_Found：2006/01/22(日) 19:35:47 ID:???

スレッドの題は検索に引っかかるためでしょ。
現に、いままでにJavaScript Style Sheetの質問なんか出た試しが無い。

105 ：Name_Not_Found：2006/01/22(日) 19:46:15 ID:???

JSSってNN4.xだけ対応してるの？だとしたらNN4.x専用スタイルシートとして使えるかも

106 ：Name_Not_Found：2006/01/22(日) 19:55:18 ID:???

>>104
出た試しがないのは、質問者もCSS以外のスタイルシートなんて知らないためｗｗｗ

107 ：Name_Not_Found：2006/01/22(日) 20:21:32 ID:???

>>92
ﾜﾛﾀ

108 ：Name_Not_Found：2006/01/22(日) 20:47:58 ID:???

学校の宿題で、ウェブページの仕組とデザインについての説明を以下のキーワード
を使って200字程度で書かなければならないんですが、いまいちよくわかりません。
誰か教えてください。

キーワード：HTML，タグ，スタイルシート(CSS)

ポイント：
HTMLの使い途。HTMLでできることとできないこと
HTMLとCSSの役割分担
役割分担させる意義

109 ：Name_Not_Found：2006/01/22(日) 20:50:38 ID:???

>>108
ttp://www.kanzaki.com/docs/htminfo.html
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/CSS_descript_first.html
ここらへん見て勉強なさい。

110 ：Name_Not_Found：2006/01/22(日) 20:51:54 ID:???

>>109は>>108の将来を想う優しい子

111 ：Name_Not_Found：2006/01/22(日) 20:52:37 ID:???

>>108
　HTML　は文書構造を　タグ　によって明確にし、論理的に伝えるためのマークアップ言語で、
通常デザイン等の装飾は　スタイルシート(CSS)　によって記述されることがW3Cによって定義されている。
このHTMLとCSSの分担・分離によって、サーバの転送量軽減、ブラウザへの表示速度向上等のメリットがある。

あとは教科書とかを参考に制限字数以内にまとめてくれ

112 ：Name_Not_Found：2006/01/22(日) 20:55:16 ID:???

>>111は>>108を駄目にする悪い子

113 ：Name_Not_Found：2006/01/22(日) 21:15:36 ID:???

>>108はマルチ

114 ：Name_Not_Found：2006/01/22(日) 21:40:07 ID:???

>>94
202 ：クリックで救われる名無しさんがいる：2005/10/12(水) 12:27:30 ID:53vZGqTo0
ヤフーの日経２２５チャートをホームページに貼りたいのですが、
なかなかうまくいきません。
自動的に更新されるチャートの貼り方をどなたか教えてもらえないでしょうか？

115 ：Name_Not_Found：2006/01/22(日) 21:42:06 ID:???

マルチ祭り、開催！

116 ：1203：2006/01/23(月) 00:02:59 ID:GdKTK/zh

>>95
ありがとうございます。
無理みたいですね。
divを使って背景イメージを指定してやるしかないのでしょうか。
それでもIEの場合は下側に余白ができてしまいます。
皆さんは水平線をCSSで装飾する際、
どうされているのでしょうか？
テーブル？

117 ：Name_Not_Found：2006/01/23(月) 00:39:30 ID:???

>>1203番か・・・凄いな。

マジレスだがhrは物理要素なので使用しない。

118 ：Name_Not_Found：2006/01/23(月) 02:21:17 ID:1y79WlMH

リンクの張ってある画像の周りに、マウスを乗せた時だけボーダーを表示するようにするには
どうすれば良いのでしょうか。

img{border:none}
a:hover img{border:solid}
とするとFirefoxでは上手くいくのですが、
IEではマウスを乗せてもボーダーが表示されません。

img{border:none}
a:hover{border:solid}
とするとIEでは上手くいくのですが、
Firefoxでは画像を囲むはずのボーダーの上枠が画像の中心に来てしまいます。
padding-topで上枠を上にずらすとIEで見た時の上枠の位置が上過ぎてしまいます。

宜しくお願い致します。

119 ：Name_Not_Found：2006/01/23(月) 02:47:38 ID:???

>>118
a img {border: none;}
a img:hover {border:solid;}

私も少々悩みましたが…。一応Firefoxでもできました。

120 ：118：2006/01/23(月) 09:49:19 ID:pcoCMpnG

>>119
レスありがとうございます。
教えて頂いた方法ではFirefoxでは上手くいくのですが、
IE6ではボーダーが表示されないみたいです…？

121 ：Name_Not_Found：2006/01/23(月) 10:03:50 ID:???

新たに作るクラスにeradonly属性を設定することってできるのでしょうか？？

122 ：Name_Not_Found：2006/01/23(月) 10:04:31 ID:???

↑　失礼しました。readonlyです。

123 ：Name_Not_Found：2006/01/23(月) 10:26:41 ID:???

TABLE内のデータをセンタリングするために、TABLE要素に　text-align:center;　を記述しています。
このとき、TD要素にwidthを指定しなければ、IEでもFireFoxでも意図したように表示できるのですが、
widthを指定してしまうと、IEではセンタリングされません。

これはブラウザの仕様ということなんでしょうか。

124 ：Name_Not_Found：2006/01/23(月) 10:35:20 ID:???

>>123
ただのバグと思われ。
td に text-align:center 指定すれば済む事なのでたいした問題じゃない

125 ：Name_Not_Found：2006/01/23(月) 10:42:16 ID:JzzPC+yH

h2タグにbackground-imageを指定して、repeatをno-repeatにしているんですが、
IE6だと表示されますが、Netscape7.1では表示されません。
どのサイトを見てもno-repeatが未対応とは書いてないのですが、仕様ですか？

126 ：123：2006/01/23(月) 10:45:01 ID:???

>>124
TD要素にtext-alignを指定しましたが、やっぱり真ん中にこない・・・

┌─────┬─────┐
│　　あ　あ　　│　　い　い　　│
├──┬──┼──┬──┤
│ああ│いい│う　う│ええ│
└──┴──┴──┴──┘

こんな感じに表示したいんですが、
上段の二つが左揃えになってしまうのです・・・。

127 ：Name_Not_Found：2006/01/23(月) 11:10:30 ID:???

colspan="2" やったか？

128 ：Name_Not_Found：2006/01/23(月) 11:14:46 ID:???

body{margin-left:100px;}
h1{width:100%; position:absolute; top:0; left:0;}
このように指定した時、IE6だとh1がウィンドウの左に、bodyのマージン分100pxが空いた幅で、
他のブラウザだとマージンが無い状態の、ウィンドウに対して100%の幅で表示されたのですが
どちらが正しい表示なのでしょうか？

129 ：Name_Not_Found：2006/01/23(月) 11:31:28 ID:???

>>125
ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b040.html

130 ：Name_Not_Found：2006/01/23(月) 11:44:34 ID:???

>>129
うっひょ。
N7捨てます。

131 ：Name_Not_Found：2006/01/23(月) 12:18:41 ID:???

簡略で書けないだけじゃんｗ

132 ：125：2006/01/23(月) 12:40:37 ID:JzzPC+yH

>>129
その症状とは違いますね。
簡略じゃなくてもなりますし、Windowsですし、repeatとかは正常でno-repeatだけがダメですし。
でもバグである可能性は高いかもしれませんね。

133 ：Name_Not_Found：2006/01/23(月) 12:42:01 ID:JzzPC+yH

あと、backgroundで色を指定して、positionでcenterを指定したら色が無効になるというバグも発見しました。
Netscape7.1です。

134 ：Name_Not_Found：2006/01/23(月) 12:45:42 ID:???

h1 { background: #666666 url(./image/back.gif) no-repeat fixed 8px 50%; }

IE⇒普通に表示される。
N7.1⇒何も表示されない。

h1 { background: #666666 url(./image/back.gif) repeat fixed 8px 50%; }

IE⇒普通に表示される。
N7.1⇒普通に表示される。

h1 { background: #666666 url(./image/back.gif) repeat fixed 8px center; }

IE⇒普通に表示される。
N7.1⇒h1の背景色がbodyの背景色になる(無効になる)。

135 ：Name_Not_Found：2006/01/23(月) 14:02:31 ID:???

スレ違ひ。下記へどうぞ。

CSS/DHTMLバグ辞典スレッド第４版
http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50

136 ：Name_Not_Found：2006/01/23(月) 14:08:16 ID:UB92WQWk

>>134
backgroundとcenterを分けて設定してもそうなるかな？

137 ：Name_Not_Found：2006/01/23(月) 14:16:47 ID:???

>>134
結構がいしゅつのような気もするけど。

多分最初の例がN7.1で表示されないっていうのは仕様どおり。
background-attachment: fixedのとき画像は「閲覧領域」に対して固定されるから
ウィンドウの「8px 50%」の位置にそのh1要素が入ってなかったんだと思う。
かといってIEが間違ってるというわけでもないはず。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b065.html

3番目の例がN7.1で表示されないっていうのも仕様どおりといえば仕様どおり。
CSS2ではbackground-positionに長さ（px, %, ...）とキーワード（left, center, ...）を同時に指定できないから。
ただCSS2.1では同時に指定できるようになったのでN7.1の気の利かないところといった感じ。

# それにしてもN7.1ってGeckoのバージョンから言えばもう2世代も前のブラウザになるんだなー

138 ：Name_Not_Found：2006/01/23(月) 14:55:15 ID:???

スクロールバーと背景色を同じにしてる奴居るけど、スクロールバーがどこにあるのか分かりにくくない？

139 ：123：2006/01/23(月) 16:08:42 ID:???

>>127
書いてます。

/*-- ソース --*/
<table>
　<tr>
　　<td colspan="2">ああ</td>
　　<td colspan="2">いい</td>
　</tr>
　<tr>
　　<td>ああ</td>
　　<td>いい</td>
　　<td>うう</td>
　　<td>ええ</td>
　</tr>
</table>

/*-- CSS --*/
table , td { text-align: center; }
td { width: 50px; }

こんな感じなのですが・・・。

140 ：Name_Not_Found：2006/01/23(月) 17:22:04 ID:???

>>139
tdの指定が2重じゃん

141 ：Name_Not_Found：2006/01/23(月) 17:27:39 ID:???

何と初歩的な…

142 ：Name_Not_Found：2006/01/23(月) 17:58:56 ID:???

大変初歩的で申し訳ないのですが、
bodyのカラーを(文字、バックカラー)外部ファイルのスタイルシートを読み込ませて設定したいのですが、どうやれば良いのか解りません。

一応現在は下記のような指定をしているのですが、HTMLのBodyではどう書けばよろしいのでしょうか。

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

body{
color : white;
background-color : black;
}

A:link { color: #3255ff; }
A:visited { color: #828282; }
A:active { color: #3255ff; }

143 ：Name_Not_Found：2006/01/23(月) 18:13:41 ID:???

>>142

大変初歩的過ぎます
>>1-15

144 ：125：2006/01/23(月) 18:24:29 ID:???

>>137
fixedを取ると表示されました。
よく考えるとfixedは必要ありませんでしたね。
答えてくれた方々ありがとうございました。

145 ：Name_Not_Found：2006/01/23(月) 18:29:31 ID:???

>>143
やっぱりダメですか・・・。
すみません、自分でまた調べます。
ありがとうございました。

146 ：Name_Not_Found：2006/01/23(月) 18:35:45 ID:???

>>145
駄目って言うかさ、言うのは簡単だけど自分のためにも調べたほうがいいよ。
「CSS」でググって一番上に出てくるのを読むとかさ…

147 ：Name_Not_Found：2006/01/23(月) 19:17:55 ID:???

>145
.cssの拡張子ついたファイル作ってソースぶっこむ
これで外部ファイルのスタイルシート（ｒｙ

.cssのファイルはHTML同様にメモ帳でも作れる
今後、HP作り続けるなら入門サイトを読んだほうがいいね

148 ：142：2006/01/23(月) 22:51:19 ID:???

すみません。
CSSでBODYカラーとか設定した場合、HTMLでは
BODYに何も書かなくて良いのか不安で聞いてみました。

外部ファイルの読み込み方とかは、解っているので
現在は何とか自己解決しました。

149 ：Name_Not_Found：2006/01/23(月) 23:03:53 ID:???

何のための外部CSSなのか・・・

150 ：Name_Not_Found：2006/01/23(月) 23:50:17 ID:OZPe+pmH

わからなくても、一度やってみると良いじゃん。
何故こうなったのかを考えて、自分で解決できるとうれしいし、
それを繰り返していくと自ずと力も付いてくる。

151 ：Name_Not_Found：2006/01/24(火) 01:45:46 ID:BobUwZAR

img {
display: block;
border: 1px solid #b1b1b1;
margin: 0;
padding: 8px;
background-color: #fff;
color: #000;
}

このようにスタイルを指定したのですが、IEでは
ボーダーが適応されないのは何故でしょうか？

152 ：Name_Not_Found：2006/01/24(火) 03:34:55 ID:???

>>151　あなたがミスをしてゐるからでせう。

153 ：Name_Not_Found：2006/01/24(火) 03:47:34 ID:BobUwZAR

>>152
どこが間違っているのでしょうか？
見事にIEだけダメダメです……orz

154 ：Name_Not_Found：2006/01/24(火) 04:15:03 ID:???

●OSやブラウザの種類とヴァージョンについては必ず明記してください。
●「環境を書け」とか「ソースは？」と求められたら応じませう。

155 ：1203：2006/01/24(火) 07:50:34 ID:EC47dxar

>>95
>>98
>>117
～hrをCSSで装飾の件～
--html--
<div class="line">
<hr />
</div>
--CSS--
hr{
display: none;
}
div.line{
background-image: url(img/line.gif);
background-repeat: no-repeat;
height: 10px;
}
で解決しました。
ありがとうございました。

156 ：151：2006/01/24(火) 07:57:04 ID:BobUwZAR

>>154
MSIE6.0 でダメです。

157 ：Name_Not_Found：2006/01/24(火) 08:39:32 ID:???

>>155
終㍗るな。

158 ：Name_Not_Found：2006/01/24(火) 11:10:41 ID:???

>>151
DOCTYPE

159 ：Name_Not_Found：2006/01/24(火) 11:27:59 ID:9ZJkhwMM

CSSで幅固定レイアウトを使用と思っています。

ブラウザの幅が800pxなどと広ければ正常に表示されるのですが、
ブラウザの幅が500pxの場合には、コンテンツ部分がメニューの下へ回り込んでしまいます。

コンテンツを回り込ませずに、横スクロールバーを表示させて、コンテンツを常に
メニューの右へ配置するにはどうしたら良いでしょうか？

お願い致します。（IE6で表示できる方式）

<div style="width:100px; float: left;">
メニュー
</div>

<div style="width:500px; float: left;">
コンテンツ
</div>

160 ：Name_Not_Found：2006/01/24(火) 13:44:05 ID:???

>>159
> CSSで幅固定レイアウトを使用と思っています。

やめてくれ…

161 ：Name_Not_Found：2006/01/24(火) 14:22:11 ID:???

フロートでIE限定ですか

>159
>7をよく見るべし
んで、emか%にしたら・・・？

162 ：Name_Not_Found：2006/01/24(火) 14:23:20 ID:???

em固定はpx固定よりタチ悪くないか？

163 ：Name_Not_Found：2006/01/24(火) 14:27:41 ID:???

>>162
kwsk

164 ：Name_Not_Found：2006/01/24(火) 14:36:42 ID:???

つーか当たり前だろ。
幅を%で指定したらウィンドウに対する何パーセントかになる。
ピクセルで固定したら、そのピクセル以上には少なくともならない。
だがemで幅を指定したとする。
作成した人はIE最小を基準に800pxの幅に収まる！と思って50emにしたとする。
ところが目が悪くてフォントサイズを最大にしてる人は、
50emの幅だと横幅が作成者の意図よりもずっと大きくなって横スクロールバーが出るかもしれない。
em指定は「最低この幅に収めたい」ということすらできないだろ。
そこで「字を小さく汁」というのは論外、最小じゃ見られない人だって多いのにさ。

165 ：Name_Not_Found：2006/01/24(火) 15:09:32 ID:???

>>159は回り込ませるという言葉を逆の意味で使っているが、
それを脳内変換して読むと、横スクロールさせてでも回り込ませたい、となる。
質問を読まずに明後日の方を向いて熱く語るのは基地外だろう。

166 ：Name_Not_Found：2006/01/24(火) 15:17:24 ID:???

>>159
float をどう使おうが、それはそれで勝手だが、一応、W3C関係者は、
"大きな" ボックスを配置したり、負のマージンで妙な細工をしたりするような使い方を
想定していないそうだ。画像とパラグラフ、みたいな "小さい" 使い方を想定しているそうだ。

まあ、ゴタクはともかく、要するに、position 使えということだな。

167 ：Name_Not_Found：2006/01/24(火) 16:11:30 ID:???

position ??

168 ：159：2006/01/24(火) 16:42:32 ID:???

>>166
ご指摘ありがとうございます。
positionを使って解決しました。

幅固定レイアウトはW3Cメンバーのアクセシビリティを重視した
Web標準準拠サービスなどでも使われています。

http://www.mitsue.co.jp/service/produce/standards.html

W3Cのサイトのような % 指定でも、現実問題として解像度が低い環境では
多くのブラウザでボックスが重なったり、情報が極端に折り返されて読みにくくなったりと、
横スクロールした方が「まし」なこともあります。

私の環境ではW3Cのサイトよりも、http://www.mitsue.co.jp/service/produce/standards.html　のようなページの方が
現実に読みやすいですし、企業サイトなら消費者に安心感を与える配色だと思うんですね。

CSSは見栄えを表現するためにあるのだから多数のユーザにとって使いやすければそれでいいと思います。
もし、低解像度や携帯端末、音声ブラウザなどの特殊な環境であれば、CSSを無効にするだけで
等価な情報を得ることができるのですから。

169 ：Name_Not_Found：2006/01/24(火) 16:48:14 ID:???

俺は個人的に横スクロールほど見る人にとってウザい動作は無いと思うんだけどなぁ。

170 ：Name_Not_Found：2006/01/24(火) 16:48:41 ID:???

>>168
ご高説ありがとう。

でも、もちっと勉強しようぜ。

171 ：Name_Not_Found：2006/01/24(火) 16:52:20 ID:???

なんか聞いといてそこまで言うなら
positionくらい考えつけよと思ってしまった

172 ：Name_Not_Found：2006/01/24(火) 16:53:14 ID:???

>>168
おまえさんは、自分の御託をならべに来たのか？
謙虚に質問に来たのか？

おまえさんが素晴らしいと褒め称えるサイトのデザインは、
”使いづらい”し、”見づらい”んだが、そういわれて、きちんと謙虚に受け止められるか？

173 ：Name_Not_Found：2006/01/24(火) 16:54:48 ID:???

>>172
じゃあお前の見やすいサイトって何？
W3Cのあのごちゃごちゃで何処にどの情報があるかもわからないようなサイトか？

174 ：Name_Not_Found：2006/01/24(火) 16:58:08 ID:???

>>173
レス先間違えてるぞ！

175 ：Name_Not_Found：2006/01/24(火) 17:01:11 ID:???

>>173
随分、えらそうだな。

その褒め称えるサイトを、widthじゃなく、min-width（IE用はテンプレでも見るんだな）使って
バックを白じゃ無く、グレーにでも変えれば、

高解像度モニタ（今じゃ当たり前だな）を使うおっさん（企業サイトならターゲットにして当然だな）
にもずいぶん使いやすく見やすいサイトになるだろうさ。

176 ：Name_Not_Found：2006/01/24(火) 17:07:13 ID:???

>>159　ＦＡＱにある、floatとmargin-leftの組み合せにすればよかったのに。
>>168推薦のサイトはfont-sizeを小さくしてる。そこでもう失格かと。

177 ：Name_Not_Found：2006/01/24(火) 17:17:26 ID:???

>>175
> IE用はテンプレでも見るんだな
あの小手先のハックはCSSだけじゃなくてHTMLソースまで汚す。
見た目のためにHTMLを汚くしていいのか？

あと、情報はある程度まとまりがあったほうがみやすい
ブラウザのサイズを変えるのは最大化している人にとっては面倒

あのままが大勢の人にとって見やすい人なんだよ

178 ：Name_Not_Found：2006/01/24(火) 17:19:35 ID:???

>>177
あっそ。

179 ：Name_Not_Found：2006/01/24(火) 17:19:43 ID:???

フォントサイズ小さくしちゃ何が悪いんだろう。
Windowsのデフォルトのスタートメニューやら多くのアプリケーション、２ｃｈブラウザの入力欄などのフォントサイズ見てみ。
殆どが12px前後だから。

例えばブラウザのフォントサイズだけ変えても「ファイル」メニューの文字などはそのままでしょ。

12pxがWinのデフォ
dpiを変えれば目の悪い人は全てがおおきくなっていいんじゃないか？

画像もメニューも全部平等に大きくなるから

180 ：Name_Not_Found：2006/01/24(火) 17:23:29 ID:???

議論は止めべーよ、な？

181 ：Name_Not_Found：2006/01/24(火) 17:36:53 ID:???

>>168推薦サイトこそ
javascriptでソースあんなに汚してまでロールオーバー使う必要は？
それこそおまいさんのいう「見栄えを表現するためにあるCSS」でどうにでもなるのにな。

182 ：Name_Not_Found：2006/01/24(火) 17:42:42 ID:???

ほっとけって…

183 ：Name_Not_Found：2006/01/24(火) 17:53:47 ID:???

>>181
ロールオーバーはアクセシビリティ上必要
ポイントしているかどうかが視覚的に分かって押しやすいぞ

現実に見栄えなんてどうでもいいような業務用の機械やATMにも
ロールオーバーは採用されている

184 ：Name_Not_Found：2006/01/24(火) 17:58:14 ID:???

>>181はそんなもんCSSで出来るって言ってるのでは？

185 ：Name_Not_Found：2006/01/24(火) 17:58:31 ID:???

>>183
馬鹿な奴、自分が何を言われてるかも理解できて無いのね。

186 ：Name_Not_Found：2006/01/24(火) 19:15:07 ID:???

>>183
もちっと勉強しようぜ。

187 ：Name_Not_Found：2006/01/24(火) 20:31:21 ID:???

>>183
自分の言ってることを今一度確認した方が良いよ

188 ：151：2006/01/24(火) 21:24:37 ID:BobUwZAR

>>158

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

なのですが…

189 ：Name_Not_Found：2006/01/24(火) 22:53:27 ID:???

どういうワードでぐぐるかもちょっと忘れてしまったのですが、
Firefox（mozilla系）だけ読み込ませる方法ってどうするんでしたっけ？
@importじゃないしな・・・。

190 ：Name_Not_Found：2006/01/24(火) 23:09:22 ID:???

>>188
xml宣言をはずす。

あと、表示されないのはborderじゃなくて、padding部分の背景(#fff)では？

191 ：151：2006/01/24(火) 23:19:44 ID:BobUwZAR

>>190
xml宣言を外すのですか…orz
やっぱり互換モードが作動していた？

>表示されないのはborderじゃなくて、padding部分の背景(#fff)では？
いいえ、IEだと、画像のまわりを囲んでいるborderが表示されませんでした。
諦め肝心、、ということですね。
ありがとうございました。

192 ：Name_Not_Found：2006/01/24(火) 23:26:53 ID:???

IE6はdoctypeの上に文字があると互換モードになる困ったさん

193 ：Name_Not_Found：2006/01/24(火) 23:32:25 ID:???

ホームページリーダーのお試し版を使ってみたが…
ダメじゃん＿|￣|◯
display: none を読み上げないぞ！

どうなっているんだよ…orz

194 ：Name_Not_Found：2006/01/24(火) 23:40:50 ID:gsyI64Sa

どうもこうも……

195 ：Name_Not_Found：2006/01/24(火) 23:42:40 ID:???

ﾜﾛﾀ

196 ：Name_Not_Found：2006/01/24(火) 23:47:52 ID:???

>>194-195
勉強が足りませんぞ！？

197 ：Name_Not_Found：2006/01/25(水) 00:00:42 ID:???

HPRは音声ブラウザとして機能していないな。
本来なら speak:none で読み飛ばす筈なのに display:none を読み上げない。

198 ：Name_Not_Found：2006/01/25(水) 00:36:18 ID:???

メディアタイプでauralも含まれてたら
display:none;はspeak:none;と同様に扱われるって記事を読んだんだが。

199 ：Name_Not_Found：2006/01/25(水) 00:45:15 ID:???

そーすｷﾎﾞﾝ

200 ：Name_Not_Found：2006/01/25(水) 00:46:26 ID:???

バージョン3.01までは display:none も読み上げていたとさ。

201 ：Name_Not_Found：2006/01/25(水) 01:30:54 ID:???

display:noneを読み上げる必要ってないと思う

202 ：Name_Not_Found：2006/01/25(水) 02:06:59 ID:???

>>201
そんなことはない。

例:
<p class="jump"><a href="#h-2_1">アスキーアートを読み飛ばす</a></p>
<pre> ……… 内容 ……… </pre>

p.jump {display: none;}

203 ：1203：2006/01/25(水) 06:43:01 ID:rvFhtSf0

>>159
<body style="width:600px;">
じゃぁだめですか？

204 ：Name_Not_Found：2006/01/25(水) 11:50:21 ID:37rH2rnE

初歩的な質問です。宜しくお願いします。

ID=hogeに外部cssを指定してあり、別の一部のページではhogeの見栄えを変更したいのですが、方法がわかりません。
id="hoge hoge2"と、二つIDをふり、後者が前者を上書してくれると嬉しいのですが、文法で2つふれないことになってます。
次に「id="hoge" class="hoge2"」は文法で正しいですが、idへのスタイルが優先されることになっているようです。
あと、当該タグに個別にstyle指定すると上書ができましたが、できればやりたくないです。
あとは、タグを増やすか、今までidだったのをclassに変えるか、しか思いつきません。

他にidで指定したスタイルを一部のページだけ上書する方法はないでしょうか。
または、HTML自体の書き方に問題がありましたらご指摘お願いします。

205 ：Name_Not_Found：2006/01/25(水) 11:52:54 ID:???

ID=hoge1
ID=hoge2
ID=hoge3

って作れば医院ｼﾞｬﾏｲｶ

206 ：Name_Not_Found：2006/01/25(水) 11:57:46 ID:???

あ、なるほど。それってアリですか。
早速、やってみます。ありがとうございます！

207 ：204：2006/01/25(水) 12:11:16 ID:???

すみません、勘違いしました。一つのタグにIDを複数書くという意味だと思いました。
そんな訳ないですよね。

hoge1,hoge2,hoge3と完全に別にすると、変更のないところまで全部hogeの個数分指定しないと
ならなくなる状況です。これは設計がまずいでしょうかね。ちょっと抜本的に考えて見ます。

208 ：Name_Not_Found：2006/01/25(水) 12:16:26 ID:???

>変更のないところまで全部hogeの個数分指定しないとならなくなる状況です。

勘違いしてないか？

209 ：Name_Not_Found：2006/01/25(水) 12:24:21 ID:???

ID属性値は一度しか出現できないってのを勘違いしてる気がする

210 ：Name_Not_Found：2006/01/25(水) 12:33:57 ID:???

>>207
ソースみしてみ

211 ：Name_Not_Found：2006/01/25(水) 12:42:42 ID:???

>>204
たとえばbodyなんかの親要素にclassを振っといて、
.class #hogeという方法じゃダメ？

212 ：Name_Not_Found：2006/01/25(水) 13:01:20 ID:???

こういうこと？

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

このようにスペースで区切って2つ以上のID属性を指定できるよ。

Web標準で認められているし、殆どのブラウザはサポートしている。

213 ：Name_Not_Found：2006/01/25(水) 13:04:53 ID:???

>>212
お前はclassとidをごっちゃにしている

214 ：204：2006/01/25(水) 13:13:48 ID:???

みなさん、どうもありがとうございます。

>> <div id="hoge hoge2">
これありでしたか？

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2

ここを見て、classはスペース区切りで複数指定可となってて、IDにはそれがなかったので、
てっきりだめだと思ってました。
質問前に実際やってみて上書できなかったのですが、ケアレスミスしたかもしれません。
みなさん、可能とおっしゃってるようなので、再度やってみます。

だめでしたら夜にソースをお見せするかも知れません。そのときは宜しくお願いします。

215 ：Name_Not_Found：2006/01/25(水) 13:15:31 ID:???

>>214
いやIDはそれやっちゃ駄目だよ。
IDってのは一意の名前だから、
たとえば214さんという名前の人が204さんという名前も持ってちゃおかしいｗｗようにさ。

216 ：212：2006/01/25(水) 13:19:15 ID:???

ID2つ指定しちゃ駄目でしたか。
classと誤解していたようです
申し訳ない

217 ：Name_Not_Found：2006/01/25(水) 13:22:45 ID:???

ぅわっ　ﾗﾍﾞﾙがﾗﾍﾞﾙが・・・・

218 ：Name_Not_Found：2006/01/25(水) 13:32:37 ID:???

ぶっちゃけ>>217のラベルは存在しない

219 ：Name_Not_Found：2006/01/25(水) 15:04:09 ID:???

h4 {border-style: solid;border-color: #606060;}
h4.right#title {border-width: 0px 0px 1px 3px;}

スタイルシートで↑と指定して、htmlソースで

<h4 class="right" id="title">Topics</h4>

と書いた場合、FireFoxではborder-widthが正しく適用されるのですが、IE6.0では四辺とも同じ太さのborderが表示されてしまいます。
IEでborder-widthを正しく表示させたいのですが、どうすればいいのでしょうか？お助けを・・・。

ちなみに

h4.left#title {border-width: 1px 0px 1px 1px;}
<h4 class="left" id="title">Topics</h4>

はFireFox、IEとも同じようにborder-widthが適用されて正しく表示されます。

220 ：Name_Not_Found：2006/01/25(水) 15:07:29 ID:???

h4.right#title
って、classセレクタは無意味。
h4#title
でよし。idは一意で一箇所しかあり得ないんだからさ。
君、もしかしてclassとidを取り違ってないか。

221 ：219：2006/01/25(水) 15:10:44 ID:???

>>220
ありがとうございます。

クラス：Ａ┬ＩＤ：１
　　　　　　├ＩＤ：２
　　　　　　└ＩＤ：３

クラス：Ｂ┬ＩＤ：１
　　　　　　├ＩＤ：２
　　　　　　└ＩＤ：３

この場合、「Ａ－１」と「Ｂ－１」は別物として扱われるものだと思ってました。

一から出直します。

222 ：Name_Not_Found：2006/01/25(水) 15:14:38 ID:???

ちゃんと本でも買ってセレクタを理解したほうが良いと思われ。

223 ：Name_Not_Found：2006/01/25(水) 15:29:48 ID:???

本なんか要らないだろ・・・
ttp://hp.vector.co.jp/authors/VA022006/
ここらへんが正しくて詳しい。

224 ：Name_Not_Found：2006/01/25(水) 15:31:18 ID:???

>>221
因みにA-1とB-1は別物で合ってるぞ。
ただ書き方が間違ってるだけで。

225 ：Name_Not_Found：2006/01/25(水) 15:41:16 ID:???

h4 {border: 0px 0px 1px 3px; solid: #606060;}

<h4>Topics</h4>

　　これだけでいい。

226 ：Name_Not_Found：2006/01/25(水) 15:42:43 ID:???

ｱﾁｬｰ

h4 {border: 0px 0px 1px 3px solid #606060;}

227 ：Name_Not_Found：2006/01/25(水) 15:45:53 ID:???

>>225　ばかもん。
h4 {border:1px solid #606060;}
#title {border-width:0px 0px 1px 3px;}
だろっ。

228 ：Name_Not_Found：2006/01/25(水) 15:47:10 ID:???

#title　なんか要らんよ

229 ：Name_Not_Found：2006/01/25(水) 15:48:36 ID:???

>>228　h4が二箇所に出てくるなら、要るって。

230 ：Name_Not_Found：2006/01/25(水) 15:55:52 ID:???

ｱﾎ?

231 ：Name_Not_Found：2006/01/25(水) 16:01:26 ID:???

うむ、228は阿呆だ。

232 ：Name_Not_Found：2006/01/25(水) 16:03:42 ID:???

>>223
本要らないかな？
トイレに行ったり寝る前とかにベッドで読めるから便利だと思うんだけどなぁ。

233 ：Name_Not_Found：2006/01/25(水) 16:07:15 ID:???

>二箇所に出てくるなら

質問の何処に書いてあるんだろ？

234 ：Name_Not_Found：2006/01/25(水) 16:10:25 ID:???

>>233　>>219にh4.rightとh4.leftが出てくる。idを一箇所にしか使用できないことを理解してなかった。

235 ：219：2006/01/25(水) 16:23:46 ID:???

みなさんすみません、私の愚問のために・・・
現在「idは一箇所にしか使えない！」を肝に銘じてソースを書き直してます。
classとidの違いについても調べなおし、一から出直している最中です。

書籍は(`･ω･)σｲｲ!!ですよね。PCに依存しないで勉強できますから。

ゆくゆくは私も答える側にまわれるくらいの経験をつみたいものですﾉｼ

236 ：Name_Not_Found：2006/01/25(水) 16:26:05 ID:???

>>232
ノートPCに落としてベッドで見るのが趣味ｗｗ

237 ：Name_Not_Found：2006/01/25(水) 16:26:41 ID:???

>>235
とはいえ書籍は「正しい」のが少ないから気を付けてね。

238 ：Name_Not_Found：2006/01/25(水) 16:28:51 ID:???

>>235
そもそも、idなんて使いにくい属性必要ないとおもうよ。

全部 class で十分。
その方がシンプルになりコーディングもやりやすい。

239 ：Name_Not_Found：2006/01/25(水) 16:28:54 ID:???

テーブルのcellspacingをCSSで設定する方法って無いですかね？

240 ：Name_Not_Found：2006/01/25(水) 16:29:02 ID:???

228と233もアホだったな。

241 ：Name_Not_Found：2006/01/25(水) 16:30:08 ID:???

238もアホだと思う

242 ：Name_Not_Found：2006/01/25(水) 16:30:43 ID:???

>>239
ＦＡＱも見ずに質問する人を減らす方法って無いんですかね？
http://web2ch.s31.xrea.com/?CSSFAQ#content_1_11

243 ：Name_Not_Found：2006/01/25(水) 16:34:01 ID:???

>>242
FAQを見ても書いていないので、質問したわけですが、、、

244 ：Name_Not_Found：2006/01/25(水) 16:35:30 ID:???

>>243　どこに目をつけてるんですかね？　リンク先も開いてないんですかね？

Q12: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（A3）を見なさい。
「いままでの HTML との対照」
　http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
　http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
　http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

245 ：Name_Not_Found：2006/01/25(水) 16:37:23 ID:???

>>243　アホの子は、ここまで書いてやらないとわからんかな。
http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html#table

246 ：Name_Not_Found：2006/01/25(水) 16:39:45 ID:???

見るんじゃなくて熟読しようよ。

247 ：Name_Not_Found：2006/01/25(水) 16:41:08 ID:???

ほれ。
http://hp.vector.co.jp/authors/VA022006/css/tables.html#border-spacing
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/tables.html#border-spacing

248 ：Name_Not_Found：2006/01/25(水) 16:45:04 ID:???

>>238
IDはCSSには使わなくても、見出しごとには付けるべきだろう。

249 ：Name_Not_Found：2006/01/25(水) 17:16:30 ID:???

>>247　
そこをNetscape7.1で開くと、フッターしか表示されない。
IEやOperaなら大丈夫なのに。……なぜ？

250 ：Name_Not_Found：2006/01/25(水) 17:39:36 ID:???

おぅ、漫才やってるのか！
はよう続き見せてくれぃ…

251 ：Name_Not_Found：2006/01/25(水) 17:52:34 ID:ASkES1AE

教えてください。
<style type="text/css">

</style>
<body background="bg.gif">
ってゆー風にして画像を背景に置いてみたんですけど、
オペラってゆーブラウザで見たらちゃんと表示されないんです。
なんか左上にめり込んでるみたいな感じで・・・。

252 ：Name_Not_Found：2006/01/25(水) 18:03:46 ID:???

>>251
なんで画像のほうもCSSで指定しないの？

253 ：Name_Not_Found：2006/01/25(水) 18:09:58 ID:???

%じゃなくキーワードで指定してみたらどうよ(left top)

254 ：Name_Not_Found：2006/01/25(水) 18:15:35 ID:???

>>253まちがえた。bottom leftか。

255 ：Name_Not_Found：2006/01/25(水) 18:27:12 ID:???

>>251
<style type="text/css">

</style>
<body>

256 ：Name_Not_Found：2006/01/25(水) 19:09:37 ID:ASkES1AE

ちゃんとできました！
＞＞252から＞＞255の皆さんありがとうございました。

257 ：Name_Not_Found：2006/01/25(水) 21:06:52 ID:???

firefoxの拡張機能　editcss　のように
CSSの編集と同時に、IEの表示内容を確認できるような
CSSエディタやツールはないでしょうか？

258 ：Name_Not_Found：2006/01/25(水) 21:21:58 ID:???

あるよ

TopStyle

259 ：Name_Not_Found：2006/01/25(水) 22:13:21 ID:???

>258
早速のご回答、ありがとうございます。
TopStyleを
http://ringonoki.net/tool/html/topstyle.html

にて確認してみました。
FireFoxのeditcssのようにはいかないようですが
リアルタイム編集が可能のようですね。

早速試してみます。

ほんとにありがとうございました。

260 ：204：2006/01/25(水) 22:50:27 ID:???

ttp://pc8.2ch.net/test/read.cgi/hp/1137310503/204-216
あら、やっぱりだめでしたか。やはり根本的に設計を見直してみます。
みなさん、どうもありがとうございました！

261 ：Name_Not_Found：2006/01/25(水) 23:12:17 ID:lwejFw1M

3カラムのデザインをしているのですが、
日本語だと指定された幅で勝手に改行してくれるのですが、
半角英数字を混ぜると、半角英数字が改行されて筒抜けてしまいます。

たとえば、ああaaaaaaaaaaaaaaaaaaaああああああああああああaaaaaaaだとすると

ああ
aaaaaaaaaaaaaaaaaaa
あああああああああ
あああaaaaaaa

と勝手になってしまいます

また、CSSは

float:left;
width:100px;
height:100%;
background-color:#FFFFFF;
margin:0px 10px 0px 0px;
text-align: left;

です

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

262 ：Name_Not_Found：2006/01/25(水) 23:16:12 ID:???

>>261
それは言語の仕様に沿った正しい動作です。
英語の教科書とかでも習っただろうが、一つの英単語は行を跨いで書いちゃいけない。
スペースの入らない長い半角英数の並びがあって、その幅に収まらないと判断したら
ブラウザは*その一単語*の一行たることを求めて、その前で改行を入れる。
自然な動作です。

263 ：Name_Not_Found：2006/01/25(水) 23:25:41 ID:???

>>262
そうだったんですか・・・
中にテーブルをおいても無理だったんで聞いてみたのですが・・・
普通のサイトだと改行されているんだけどなぁ・・・どうしたものか

264 ：Name_Not_Found：2006/01/25(水) 23:30:11 ID:???

>>263
transitionalなら長い単語（URL？）の間にwbrを入れるって手もあるが、
そもそも半角スペースとか入れられないん？

265 ：Name_Not_Found：2006/01/25(水) 23:32:38 ID:???

>>263
普通のサイトでも改行されない。
改行されるのは英単語に区切りがあるとき。

266 ：Name_Not_Found：2006/01/25(水) 23:41:28 ID:???

>>264
URLではないです。
半角スペースを入れなかったの原因でした。

>>265
半角スペースを入れることで無事に解決できました。
リニューアルして現在テスト中だったので文を羅列していました。

皆様方どうもありがとうございました。

267 ：Name_Not_Found：2006/01/26(木) 11:42:53 ID:???

全く

268 ：Name_Not_Found：2006/01/26(木) 12:08:36 ID:eG7OwKDl

リスト化したテキストが折り返しになったとき

■てきすとてきすと
てきすと

となってしまうのを、

■てきすとてきすと
□てきすとてきすと
↑空白インデント

という風にしたいのですがどうしたらいいでしょうか？

269 ：Name_Not_Found：2006/01/26(木) 12:14:28 ID:???

list-style-position:outside;

270 ：Name_Not_Found：2006/01/26(木) 13:36:14 ID:???

できましたー！
ありがとうございました！

271 ：Name_Not_Found：2006/01/26(木) 16:29:35 ID:ug0ZTHYn

リストの画像が縦に長いと、リストの文字が下詰めになって
バランスが変になるのですが
文字の上下の位置を真ん中にするにはどうすればいいでしょうか？

272 ：Name_Not_Found：2006/01/26(木) 16:38:46 ID:???

>>271
padding

273 ：Name_Not_Found：2006/01/26(木) 16:46:02 ID:ug0ZTHYn

>>272
返答ありがとうございます。
li にpaddingを指定すると、
文字だけでなくて、画像の周りも空いちゃいました。
文字だけ指定するにはどうすればいいでしょうか？

274 ：Name_Not_Found：2006/01/26(木) 17:25:14 ID:???

>>273
1から10まで聞くの？
テンプレにあるがttp://css.maxdesign.com.au/index.htmなど見て勉強した方がいい。

275 ：Name_Not_Found：2006/01/26(木) 18:38:20 ID:???

li img { vertical-align: middle; }
ってことかな

276 ：Name_Not_Found：2006/01/26(木) 20:26:28 ID:vOCnjKWp

floatの3段組みで中央のみ可変で、文字数が足りなくてもビッチリ詰める方法はありますか？

<div style="width: 200px; float: left;">左</div>
<div>中央</div>
<div style="width: 200px; float: right;">右</div>

上記のようにした場合、中央の可変領域は「中央」という文字の大きさ分だけになります。
これを左右200pxを除いた残り全てを、(文字数が足りなくても)中央の可変領域にする方法はありますか？

277 ：Name_Not_Found：2006/01/26(木) 21:01:10 ID:???

>>276
<div style="width: 200px; float: left;">左</div>
<div style=" margin-left:200px; margin-right:200px">中央</div>
<div style="width: 200px; float: right;">右</div>
で、どうだろか？

278 ：Name_Not_Found：2006/01/26(木) 21:50:06 ID:???

>>277
それは結構いい線だと思ったのですが、そうした場合右が下にずれ込みます。

<div style="width: 200px; float: left;">左</div>
<div style="width: 200px; float: right;">右</div>
<div style=" margin-left:200px; margin-right:200px">中央</div>

上記のように並び替えるとなぜか右が下にずれ込むことはないのですが、中央の左右に3か4ドットほどの空白が空きます。
可変は諦めたほうがいいのでしょうか？

279 ：Name_Not_Found：2006/01/26(木) 22:28:01 ID:???

というかマルチカラムで横のwidthの合計が100%だと右端のカラムが下にずれる(改行される)のはなぜですか？

280 ：Name_Not_Found：2006/01/26(木) 22:55:01 ID:???

>>278
数pxの空白ってのはIEの挙動だと思うが、
中央divの背景色をbodyと同色にすれば大した問題じゃないだろ。
>>1～カラムについてのサイトは見た？

281 ：Name_Not_Found：2006/01/26(木) 23:23:34 ID:7XxB6VBg

初歩的な質問で申し訳ありません。
これまでborderにフィルタをかけてグラデーションの線にしていたのですが、
IE以外のブラウザでも見れるように画像を使うことにしました。
{width:100%;
height: 2px;
background-color: #000000;
background-image: url(img/line.gif);
background-repeat: repeat-y;
background-position:100% 0%;}
としてdiv要素に対して適用したところ、Firefoxでは2pxのグラデーション線が見れたのに、
IE6.0では5pxくらいの太い線になってしまいます。（グラデーションの画像は表示できています）
どうしたらIEでも2pxに細く表示できるでしょうか？

282 ：Name_Not_Found：2006/01/26(木) 23:33:43 ID:???

空divは、よくない。

283 ：Name_Not_Found：2006/01/26(木) 23:48:22 ID:???

>>281
img要素でサイズ指定すればいいんでないかい

284 ：Name_Not_Found：2006/01/27(金) 00:00:56 ID:???

>>283
確かに単なる線を一本引きたいだけなら、img要素への指定で充分できますね。
初歩的な質問ですのに、ご教示ありがとうございました。

>>282
borderでやっていた頃を引きずりすぎていたようです。283さんのレスに従ってやり直してみます。
ご指摘ありがとうございました。

285 ：Name_Not_Found：2006/01/27(金) 00:01:52 ID:???

widthを%で指定したボックスのmarginをautoにしても中の要素が中央に寄らないんですが仕様ですか？

286 ：Name_Not_Found：2006/01/27(金) 00:05:49 ID:???

>>385
標準モードにしてますか？

287 ：Name_Not_Found：2006/01/27(金) 00:07:16 ID:???

>>286
標準モードとは？

288 ：Name_Not_Found：2006/01/27(金) 00:20:15 ID:???

>>287
DOCTYPEでググれ

289 ：Name_Not_Found：2006/01/27(金) 00:23:52 ID:???

>>288
DOCTYPEはHTML4.01のstrictです。

290 ：Name_Not_Found：2006/01/27(金) 01:14:32 ID:???

>>285
「中の要素が中央に寄らない」のは当り前。
中央寄せになるのはそのボックスであって、中の要素ではない。
中の人も大変だな。

291 ：Name_Not_Found：2006/01/27(金) 04:30:10 ID:???

>>278
positionを使え。

292 ：Name_Not_Found：2006/01/27(金) 05:42:58 ID:???

Konquerorというブラウザはacronym要素やabbr要素を
斜体にしてくれるけど、これはデフォルトスタイルなの？
ﾏﾝﾄﾞｸｾ…

293 ：Name_Not_Found：2006/01/27(金) 05:55:29 ID:???

>>292
スレ違い

294 ：Name_Not_Found：2006/01/27(金) 06:01:29 ID:???

>>293
どこがスレ違いなんだｗ？
292はいちいちfont-style:normal するのが面倒なんじゃないの？

295 ：Name_Not_Found：2006/01/27(金) 06:49:02 ID:???

どうやって変えるんですか？はともかく
Aブラウザだとemがボールドなんですか？
というような確認はやっぱりスレ違いとという板違いでソフ板のような希ガス。

まぁそれはさておき
>>292
全称セレクタでマージンやらと一緒にフォントスタイルも殺しておくのが常套手段だ。

296 ：257：2006/01/27(金) 07:36:26 ID:uDiNbvzm

>258さんに、TopStyleをご紹介いただきました。

しかしやはり、firefoxのeditcssのようにはいかないようですね。
フリー版のためかもわかりませんが、htmlの内容は表示されず
CSSのみの反映結果が表示されないんですね。

重ね重ねの質問で恐縮ですが、firefoxのeditcssのように
CSSの編集結果がIEそのものにリアルタイムに反映されているのを
確認できるようなツールはございませんでしょうか？

297 ：Name_Not_Found：2006/01/27(金) 07:49:03 ID:???

ＩＥ開いて再読込すればぁ？

298 ：Name_Not_Found：2006/01/27(金) 08:18:55 ID:???

番号付きリストのリストアイテムの行頭にある番号を
ゼロから始まるリストにしたいのですがどうすればいいのでしょうか？

decimal-leading-zeroでできる01、02、03、…という意味ではなく、
0、1、2、…というふうにしたいのですが

299 ：Name_Not_Found：2006/01/27(金) 08:26:32 ID:???

>>298
UAの対応状況を考えると
CSSよりもstart属性でやるがよろし。

300 ：Name_Not_Found：2006/01/27(金) 08:32:15 ID:???

>>299
レスどうもありがとうございます。調べてみます。

301 ：Name_Not_Found：2006/01/27(金) 13:30:29 ID:???

bodyタグの直下にdivで全体を囲んで、800pxに固定するような使い方は推奨されてないですか？

302 ：Name_Not_Found：2006/01/27(金) 13:34:16 ID:???

>>301
別に公式に推奨されているわけでもないけど
また公式に禁止されていたり非推奨だったりされているわけでもない

303 ：Name_Not_Found：2006/01/27(金) 13:37:42 ID:???

でも>>166は、

＞一応、W3C関係者は、
＞"大きな" ボックスを配置したり、するような使い方を
＞想定していないそうだ。画像とパラグラフ、みたいな "小さい" 使い方を想定しているそうだ。

って言ってるのですが、これいかに？

304 ：Name_Not_Found：2006/01/27(金) 13:40:23 ID:???

Win版のFireFox1.5についてです。
<input type="submit"～にtext-decorationが反映されないのですが
どうすればいいのでしょうか？
<input type="text"～にはtext-decorationは反映されています。
またIE5では
<input type="submit"～にもtext-decorationは反映されています。

305 ：Name_Not_Found：2006/01/27(金) 13:53:10 ID:???

>>303
その最初の『でも』ってのはどこからつながるわけ？

306 ：Name_Not_Found：2006/01/27(金) 13:59:25 ID:???

想定していないってことは非推奨ってことじゃないのかな？と。

307 ：Name_Not_Found：2006/01/27(金) 14:21:38 ID:???

ずばり
<table border=1 cellpaing=0 cellpadding=0>
</table>
のテーブルスタイルをスタイルシートで記述したい場合は
どのように書けばよろしいのでしょうか？
いろいろやってるんですがなかなかうまくいきません・・

308 ：Name_Not_Found：2006/01/27(金) 14:22:44 ID:???

>>307
http://www.tohoho-web.com/css/reference.htm#table

309 ：Name_Not_Found：2006/01/27(金) 14:25:05 ID:???

>>301
つーか完全にスレ違いだろ

310 ：Name_Not_Found：2006/01/27(金) 14:25:25 ID:???

>>303が例としてあげている>>166の文中に「W3C関係者」という記述があるが
引用元が示されていないので>>166のレス内容の信憑性はあくまで
>>166個人の発言と同等のものであって2ch内の他のレスと何ら変わらない。
もし>>303がその引用元を把握しているのなら
>>303にとっては>>166の発言には信憑性があるのかもしれないけど、
しかし仮に「W3C関係者」が>>166のような発言をしていたとしても
それはfloatに関してであり>>301に関してはあてはまらない。
その点にに触れられている「W3C関係者」などの別のソースが必要となる。
そしてそのような発言などが「存在する」「存在しない」という主張をする場合、
「存在する」と主張する側がそれを証明しないといけない。
現時点ではそのようなものが提示されていないので
「推奨・非推奨といった公式なものは存在しない」と仮定することができる。

・・・などと事を大げさにしてみたけど、
実際個人レベルでは意味のないdivは使うなとか横幅をpxで指定するなとか言っている人はいるよ。
でもそれは一個人の意見であってその意見を採用するかしないかはまた各自に任されていると思うし。
公式なものでなくても各自が信ずるに足ると判断した情報を採用すれば委員でない？
>303が>166の発言を信用できると思うのならfloatに関しては従えばいいし。
そういう漏れも>166の発言の
>>"大きな" ボックスを配置したり、負のマージンで妙な細工をしたりするような使い方
をしようとしたらいろいろと無理があるから、
経験上そういうfloat使い方は避けたほうがいいなーって思ってる。

311 ：304：2006/01/27(金) 14:26:44 ID:???

>>304、>>304、>>304をよろしくお願いします！あなたの清き回答を！

312 ：Name_Not_Found：2006/01/27(金) 14:31:15 ID:???

>>301=>>303は上のほうで叩かれていた>>159の粘着なのでスルーするように。

313 ：Name_Not_Found：2006/01/27(金) 14:32:19 ID:???

>>310
長文乙

>>312
違うよ

314 ：Name_Not_Found：2006/01/27(金) 14:39:05 ID:???

>>301=>>303=>>313が>>159だと思う根拠。

・スレ違いなのにあえてこのスレで質問をしている点（粘着）
・px指定による固定幅という質問の内容が似通っている点（粘着）
・スレタイも読んでいないような質問内容なのにずいぶん前のレス>>166を持ち出してくる点（粘着）

315 ：159：2006/01/27(金) 14:43:11 ID:???

ケッ、バレたかギヘヘヘヘ

316 ：Name_Not_Found：2006/01/27(金) 14:45:46 ID:???

とは言ってみたものの、横幅固定レイアウトは出来るし、漏れはそれをしたくない派だからやっぱ同一人物を演じるのはやめる。

317 ：Name_Not_Found：2006/01/27(金) 14:46:38 ID:???

なんか痛いな

318 ：Name_Not_Found：2006/01/27(金) 14:47:09 ID:???

痛いの？

319 ：Name_Not_Found：2006/01/27(金) 14:56:40 ID:???

>>316
>>316
>>316
>>316
>>316

320 ：Name_Not_Found：2006/01/27(金) 14:58:04 ID:???

痛いの痛いの、飛んでけ。

321 ：Name_Not_Found：2006/01/27(金) 14:59:58 ID:???

>>314
あまり追い詰めるべきではないと思う

322 ：Name_Not_Found：2006/01/27(金) 15:01:18 ID:???

どうでもいいよ

323 ：Name_Not_Found：2006/01/27(金) 15:18:48 ID:???

リストアイテムのリストマーカーとボーダーの関係は
以下のようになっていますよね？

　　┌──────┐
● │アイテム　　　　│
　　└──────┘

これを

┌──────┐
│● アイテム　　│
└──────┘

としたいのですがどうすればいいのでしょうか？
リストマーカーを消して背景画像を使ったりcontent生成を使ったりしないで
リストマーカーそのものを移動させたいのですがうまくいかなくて・・・・

IEだとliにtext-indentを指定したらリストマーカーも一緒にインデントされて
ボーダー内に入ったのですがFirefoxの1.5だとリストマーカーは動かなくて。
たぶんIEが変なんだと思うのですが・・

324 ：Name_Not_Found：2006/01/27(金) 15:25:03 ID:???

>>323　君、>>268-275は見たんだよね？

325 ：Name_Not_Found：2006/01/27(金) 15:34:06 ID:???

>>324
それ>>323の質問とは違わない？

326 ：323：2006/01/27(金) 15:53:23 ID:???

>324
提示された一連の流れを見てみましたが「リスト」という点が共通なだけで
>268さんの質問は私のものとは異なるようです。
また>274のサイトの各ページを見てみましたが、ほとんどがリストマーカーを消していたり
リストマーカーを消したあとbackground-imageを指定しているものばかりで
リストマーカーをリストアイテムのボーダー内に入れるサンプルは見当たらなかったのですが、
見落としている可能性もあるので、もし>274のサイト内に該当するものがあれば
できればそのページを教えていただけないでしょうか？
ページが多すぎて見落としている確率が高いですが・・・・

327 ：307：2006/01/27(金) 15:55:53 ID:???

>>308
ありがとうございます。
でもpaddingとかやってみてもやはり変わりません。
もしかしてIEは対応していないのでしょうか？

328 ：323：2006/01/27(金) 15:57:15 ID:???

>>326で失礼なことを書いていたらごめんなさい。文章力がないだけで悪気はありません。

329 ：323：2006/01/27(金) 16:03:34 ID:???

>>326のレスを取り消します。大変失礼しました

330 ：Name_Not_Found：2006/01/27(金) 16:06:33 ID:???

うむ

331 ：Name_Not_Found：2006/01/27(金) 16:14:09 ID:???

どなたか>>304をお願いします。。

332 ：Name_Not_Found：2006/01/27(金) 17:02:37 ID:???

>>331
そんなマニアックなこと誰もやってないのでわからないと思われ

333 ：Name_Not_Found：2006/01/27(金) 17:07:09 ID:???

CSSを一から勉強するのに良いサイトはありますか？

334 ：Name_Not_Found：2006/01/27(金) 17:13:27 ID:???

ググるといいよ。

335 ：Name_Not_Found：2006/01/27(金) 17:13:52 ID:???

>>331
試してみたよ
wixXP firefox1.5

underline
overline
line-through
blink

問題なく適用されます。
スペルミス…にしてはIEで問題ないってのが気になるよね。何かのバグかな？
構造をシンプルにして色々試してみたらどうだろ。

336 ：335：2006/01/27(金) 17:24:38 ID:???

ごめん、互換モードで試してた。
標準モードだとtext-decoration反映しません。

337 ：304：2006/01/27(金) 17:28:36 ID:???

>>335
指摘していただいたようにシンプルなhtmlとcssで確認してみたところ
正常に表示されました。
どこかにタイプミス等がないか確認してみます

338 ：304：2006/01/27(金) 17:34:09 ID:???

リロードする前に書き込んでしまいました。
>>336での指摘どおり、こちらも
元のhtmlファイルはDOCTYPE宣言ありで
シンプルにしたほうのhtmlファイルは
<html>
<head>
<link cssを読み込む～ />
<head>
<body>
<input type="submit" />
</body>
</html>
というものでした。

339 ：Name_Not_Found：2006/01/27(金) 17:45:07 ID:???

どなたが>>327・・・

340 ：Name_Not_Found：2006/01/27(金) 17:48:05 ID:rTaOFcCI

質問させてください。
floatを使って３段組にして
左右を固定に中央を可変にしてます。
このとき中央のカラムのサイズを
例えば500pxより小さくならないようには
できないでしょうか？

341 ：304：2006/01/27(金) 17:50:20 ID:???

元のhtmlファイルのほうも
DOCTYPEを消したらサブミットボタンにtext-decorationを反映させることができました！
が、このためにDOCTYPEを消すのはちょっと、って感じです。
このサブミットボタンにtext-decorationが反映されないのは仕様どおりの動作なのでしょうか？

「CSSバグリスト＠CSSバグ辞典スレッド」にはバグとも仕様通りとも書かれていませんでした。
「CSS/DHTMLバグ辞典スレッド第４版」でもこの話題はありませんでした。
仕様書（日本語訳）には
> 要素に内容又はHTMLのIMG要素などのテキスト内容がない場合，
> 利用者エージェントはこの特性を無視しなければならない。
とありましたがサブミットボタンも「テキスト内容がない場合」に含まれるのでしょうか？
（>>304にあるようにtype="text"には反映されます）

342 ：Name_Not_Found：2006/01/27(金) 17:51:14 ID:???

>>340
中央のカラム　に　min-width:500px;　を指定

343 ：Name_Not_Found：2006/01/27(金) 18:26:58 ID:???

>>342
IE未対応

344 ：Name_Not_Found：2006/01/27(金) 18:29:38 ID:???

>>340
http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html

345 ：281：2006/01/27(金) 22:47:25 ID:???

281です。原因はこれだったようですので
似た状況になった方の為に添えておきます。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b158.html

346 ：340：2006/01/27(金) 23:45:01 ID:???

>>344
すごいねこれ
ありがとうーー

347 ：Name_Not_Found：2006/01/28(土) 00:07:43 ID:???

そんなん>>14既出やし。アンダースコア・ハックでもええやん。
http://kazu1107.ameblo.jp/day-20050530.html

348 ：Name_Not_Found：2006/01/28(土) 00:14:13 ID:???

347が痛い・・・

349 ：Name_Not_Found：2006/01/28(土) 15:58:49 ID:???

リストの記号の指定を、某解説サイトで
●はlist-style-type:disc;
○はlist-style-type:circle;
■はlist-style-type:square;
って書いてあったのですが
□はどうすればいいのでしょうか？

350 ：Name_Not_Found：2006/01/28(土) 16:02:07 ID:???

>>349
存在しない

351 ：Name_Not_Found：2006/01/28(土) 16:09:31 ID:???

ｗｗ

352 ：Name_Not_Found：2006/01/28(土) 17:52:59 ID:???

>>349
list-style-typeが最初に実装された有名ブラウザは、NN4とIE4である。
IE3は、値がnoneである時に限って適用していた。
NN4もIE4も、CSS2仕様勧告後のブラウザだから、CSS2仕様を知っている。

HTML4.01仕様では、type属性の値squareに対して□が割振られている。
CSS1仕様には、詳しい説明が存在しない。
CSS2仕様とCSS2.1仕様には、UA依存と書かれている。

list-style-typeを実装しているブラウザは、CSS2以降の仕様にあるこの文言に従っているのだろうと思われる。
記憶が曖昧で申し訳ないが、Opera6は□だったような気がする。
要するに、具体的な値が決められているわけではないから、CSSスタイルシート作成者が関知できる問題ではない。

353 ：Name_Not_Found：2006/01/28(土) 18:15:21 ID:???

達人乙
久々にまともな回答だね。

354 ：Name_Not_Found：2006/01/28(土) 18:30:34 ID:Ykq27MKk

firefoxを最新にしたら、divで囲った文字が上にズレるように
なってしまいました。

.button {
width:50px;
margin:2px;
border:1px solid #000000;
font-size:xx-small;
text-align:center;
}

<div class="button">TOP</div>

これを文字を囲いの真ん中に配置する場合にはどうしたら
良いのでしょうか。
『vertical-align:bottom;』
を.buttonに書いてみてもだめでした…。

355 ：Name_Not_Found：2006/01/28(土) 18:44:07 ID:???

>>354
line-height

356 ：Name_Not_Found：2006/01/28(土) 18:53:20 ID:Ykq27MKk

>>355
それもやってみたのですが、
文字の下の空きは減りますが、同時に文字の上の空きも小さくなって、
結局下の空きだけ大きくなってしまうのです。
どうしたものやら…。

ーーー　　　ーーー
　　　　　　ボタン　　　
ボタン　→　
　　　　　　ーーー

ーーー

という感じで。

357 ：349：2006/01/28(土) 19:42:03 ID:???

>>350
>>352
レスどうもありがとうございます。

358 ：Name_Not_Found：2006/01/28(土) 19:59:30 ID:???

>>353
むしろ長文乙じゃい。

359 ：Name_Not_Found：2006/01/28(土) 20:03:21 ID:???

min-widthやmax-widthを「～em”または”～px」といった指定がしたいのですが
どうすればいいのでしょうか？
min-width:1em 10px;とか
min-width:1em,10px;といった指定はだめなんですよね

360 ：Name_Not_Found：2006/01/28(土) 20:26:45 ID:???

<pre> の左右に margin や padding を適用させている場合

overflow : auto ;
width : 100% ;

とすると IE では親要素内でちゃんとスクロールが表示されるのですが
FireFox ではスクロールは出るのですが親要素からはみ出してしまいます。

overflow : auto ;
width : auto ;

とすると FireFox では親要素内でちゃんとスクロールバーが表示されるのですが
IE では親要素からはみ出してしまう上にスクロールバーも出ません。

IE でも FireFox でも親要素内でちゃんとスクロールが表示させるにはどうすればいいのでしょうか？

overflow : auto ;
width : 80% ;

などとするとなんとかなるのですが <pre> を親要素の内側にぴったりとくっつけたいんです。

361 ：Name_Not_Found：2006/01/28(土) 20:36:51 ID:???

>>359
無理。

>>360
それはfirefoxの動作が正常。
preの中だけ余白を消すかborder-boxを適用。

362 ：Name_Not_Found：2006/01/28(土) 21:14:38 ID:???

ここにある、フロートに後続するボックスの幅がフロートに合わせて短縮されるというバグは、どうしようもないんでしょうか
もし解決法があるのなら教えてほしいです

http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

363 ：Name_Not_Found：2006/01/28(土) 21:17:49 ID:???

対策は、何をやりたいかによる。質問文が説明不足です。>>362

364 ：360：2006/01/28(土) 21:28:20 ID:???

>>361
どうもありがとうございます。 IE ってだめなんですね。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b168.html
の IE のバグを利用して

width : auto !important ;
width : 100% ;
overflow : auto ;

とやったら思い通りになりました。

365 ：Name_Not_Found：2006/01/28(土) 21:34:48 ID:???

なるほど

366 ：Name_Not_Found：2006/01/28(土) 21:38:52 ID:???

マルチカラムなんですか？
マルチコラムなんですか？

367 ：Name_Not_Found：2006/01/28(土) 21:44:33 ID:???

> カラム【column】
> 表形式のデータで，縦の列のこと。

> コラム【column】
> (１)新聞や雑誌で，短い評論などを載せる欄。囲み記事。
> (２)古代ギリシャ・ローマ建築の石の円柱。
> (３)⇒カラム

368 ：Name_Not_Found：2006/01/28(土) 21:54:08 ID:???

何このスレ違い

369 ：Name_Not_Found：2006/01/28(土) 22:13:33 ID:???

olにlist-style: inside;またはlist-style: outside;と指定したら
（list-style-type、list-style-image、list-style-positionは指定しない）
FireFox1.5でマークが数字じゃなくて黒丸になったのですが
これはほかの人にも見られる現象ですか？仕様どおりの動作ですか？
IEでは数字のままでした。
また当然ながらlist-style: decimal inside;またはlist-style: decimal outside;とすれば
数字になります。

370 ：Name_Not_Found：2006/01/28(土) 22:17:30 ID:???

>>362のような、フロートに後続するボックスの幅がフロートに合わせて短縮されるという現象は起こらなかったんですが、その後続するボックス内の文字が後ろに2pxほどずれてしまうという現象が起こってしまいました

ちなみにＩＥとネットスケープで確認したんですが、ＩＥでのみ起こる現象でした
これはどういった理由から起こるんでしょうか

371 ：Name_Not_Found：2006/01/28(土) 22:48:08 ID:???

>>369
こちらへどうぞ。↓

CSS/DHTMLバグ辞典スレッド第４版
http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50

>>370
これですか。
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html

372 ：370：2006/01/28(土) 22:51:59 ID:???

>>371
ありがとうございます
助かります

373 ：Name_Not_Found：2006/01/28(土) 22:57:51 ID:???

>>372　次からは、変だなと思ったらバグ辞典を見てから質問すること。

374 ：370：2006/01/28(土) 22:59:56 ID:???

>>373
わかりました
気をつけます

375 ：Name_Not_Found：2006/01/28(土) 23:04:39 ID:???

>>369
list-style-typeのデフォルト値はdiscだねえ

376 ：354：2006/01/28(土) 23:09:13 ID:Ykq27MKk

誰かわかりませんか…。

377 ：Name_Not_Found：2006/01/28(土) 23:14:39 ID:???

パデンクじゃだめかい？

378 ：Name_Not_Found：2006/01/28(土) 23:16:37 ID:???

>>354
横レスで悪いが、対処方法があるなら俺も知りたい。
mac版だと前からそうだし、そういうものだと諦めてるけど・・

379 ：Name_Not_Found：2006/01/28(土) 23:18:04 ID:???

多分、表示するフォントによって異なるとか。>>354
cf. http://cssbug.at.infoseek.co.jp/detail/mozilla/b017.html

380 ：Name_Not_Found：2006/01/28(土) 23:29:53 ID:???

>>304,335-338,341
未解決事件

381 ：354：2006/01/28(土) 23:31:49 ID:Ykq27MKk

皆さんご返答ありがとうございます。

>>379
osakaフォントにしたらもとに戻りました。
今日OSを再インストールしたので、
それでfirefoxも入れ替えたのですが、
そのせいだったのですね…。

でもデフォルトでちゃんと表示されないのはまずいですね。
なんとか自分で探してみることにします。

>>377
パデンクってなんですか？
ググったけどひっかからないのですが…。

382 ：Name_Not_Found：2006/01/28(土) 23:37:28 ID:???

>>381
padding

383 ：Name_Not_Found：2006/01/28(土) 23:38:50 ID:???

>>381
どのフォントで表示させると不具合が起るの？
後学のために、報告していただきたい。
↓
CSS/DHTMLバグ辞典スレッド第４版
http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50

384 ：Name_Not_Found：2006/01/28(土) 23:44:09 ID:???

>>375
仕様どおりってこと？

385 ：Name_Not_Found：2006/01/28(土) 23:47:13 ID:???

>>375
Ol要素のデフォルト・スタイルシートは
list-style-type:decimal;
ではないのか？

386 ：Name_Not_Found：2006/01/29(日) 00:02:28 ID:???

list-style: outside;ってつまり

list-style-type: disc;(初期値)
list-style-image: none;(初期値)
list-style-position: outside;(指定値)

ってことじゃ(「簡略記述フォームから値を省略すると， "欠"特性はいずれもその初期値を割り当てられる。」
http://www.y-adagio.com/public/standards/tr_css2/about.html#shorthand)

387 ：Name_Not_Found：2006/01/29(日) 00:04:44 ID:???

>>386
list-styleそのものは簡略化プロパティだから既定値はないんじゃないの？
だからol要素の規定値が使われるんじゃないの？

388 ：Name_Not_Found：2006/01/29(日) 00:11:02 ID:???

FireFox1.5の気になる挙動、>>380と>>369に関して

CSS/DHTMLバグ辞典スレッド第４版
ttp://pc8.2ch.net/test/read.cgi/hp/1078463560/

に書き込んできます。

389 ：Name_Not_Found：2006/01/29(日) 00:21:24 ID:???

>>387
それならわざわざ「"欠"特性はいずれもその初期値を割り当てられる」
なんて記述されないと思うんだけどなあ
あとol要素の規定値っていうのはブラウザが処理してるんであって
CSSでol要素のdisc-style-typeの規定値はdecimalですよって記述はないだろ？

390 ：Name_Not_Found：2006/01/29(日) 10:40:36 ID:???

disk

391 ：Name_Not_Found：2006/01/30(月) 00:26:15 ID:???

winXPホームエディッション
firefox1.5

opera、IE6.0ではmargin-topに指定したサイズ分間隔が空くのですが、
firefoxで表示した時だけmargin-topが適用されていないのか間隔が空かずにくっついた感じで表示されます。
解決方法はありますか？

margin-topを指定しているのはdiv要素にだけです。
80pxというような感じでpxで指定しています。

392 ：Name_Not_Found：2006/01/30(月) 00:27:04 ID:???

あ、operaは8.5です

393 ：Name_Not_Found：2006/01/30(月) 00:27:14 ID:???

>>391
普通は空く。
何か間違えてると思われ。

394 ：Name_Not_Found：2006/01/30(月) 00:31:24 ID:???

あうう、そうですか。
ちょっと見直してみます。

395 ：Name_Not_Found：2006/01/30(月) 00:41:22 ID:???

どうもcssファイルのが原因だったようです。
解決しました。

396 ：Name_Not_Found：2006/01/30(月) 01:06:32 ID:???

>>359
CSSのコメントアウトは/**/だぞ…

397 ：Name_Not_Found：2006/01/30(月) 14:38:17 ID:???

<table>
<caption></caption>
</table>
って感じでhtmlファイル内ではcaptionはtableの中に入っていますよね？
でもtableにmarginとかpaddingとかborderを指定すると
captionがtableのボックスの外になってしまいますよね？

captionをtableのボックスの中に表示させるにはどうすればいいのでしょうか？

398 ：Name_Not_Found：2006/01/30(月) 14:43:59 ID:???

>>397
captionってのはそういう仕様です。
擬似的にcaptionにborderを設定してそれっぽく見せかけることはできるけど。

399 ：Name_Not_Found：2006/01/30(月) 14:49:55 ID:???

htmlで改行すると空白が出来てしまいますが、CSSで空白が出来ないようにすることは可能でしょうか？

【ソース】
<body>
あいうえおあいうえお
</body>

【表示結果】
あいうえおあいうえお

【ソース】
<body>
あいうえお
あいうえお
</body>

【表示結果】
あいうえおあいうえお

IEだと改行しても空白は出来ませんが、Opera等では出来ます。
また、IEでもTabを入れると空白が出来てしまいます。

400 ：Name_Not_Found：2006/01/30(月) 14:52:02 ID:???

>>399

<body>
あいうえおあいうえお
</body>

ってやると空白が入らなかった気がする

401 ：Name_Not_Found：2006/01/30(月) 14:55:02 ID:???

>>399
改行が半角スペースとして扱われるのはHTMLの仕様。

402 ：Name_Not_Found：2006/01/30(月) 15:51:43 ID:???

ありがとうございます。

403 ：Name_Not_Found：2006/01/30(月) 16:36:08 ID:PUdfuSK+

<div id="d1">
hoge
<div id="d2">d2</div>
<div id="d3">d3</div>
</div>

として、CSSで

#d1, #d2, #d3 {　border: solid 1px; }
#d2, #d3 { float: left; }

とするとd1のボックスがd2,d3を囲ってくれず、hogeだけを囲います

d3のあとに
<div style="clear:all;"></div>
とすれば囲ってくれますが、
できれば空のdivは使いたくないです。
これ以外の方法はないでしょうか？

404 ：Name_Not_Found：2006/01/30(月) 16:43:50 ID:???

>>403
なんらかの要素でクリアする以外の方法があるか？という意味ならば、ない。
div意外に、brやhrなどの空要素を使う派の人もいるね。

405 ：Name_Not_Found：2006/01/30(月) 18:09:51 ID:???

>>403
floatをやめて
#d2, #d3 {display: inline;}にして
hogeをブロックレベル要素に変更するのはダメ？

406 ：Name_Not_Found：2006/01/30(月) 18:56:26 ID:???

>>403
俺は空のdivを使っている。
lint厨は嫌うが、全く問題が無い行為だと思っている。
CSSの適用のために、div要素を使うというのは筋が通ったことだからね。

構造に関係のないものをいれるなっていうのなら、当然 style属性も駄目だし、
script要素もbody要素内に入れちゃ駄目、onclickなどの要素も許されないことになるね。
DTD的に XHTML 1.0 Strict でも可能なんだから、それ以上Strictを追求する必要なんて全く無い。
自分をしばって苦しむあｄけだ。

そして、>>404 みたいに br要素や hr要素をそのために使うのは論外だと言える。
lintでは減点されなくなるけどね。

div要素は単体では意味を持たない、HTMLの構造上意味を持たないCSS適用のために意味のないdiv要素を使うのは筋が通っているが、
CSS適用のために、もしCSS適用が不要ならいれなかった br要素をいれると言う事は、構造上意味を持たない行為のために、
意味のある要素を他の目的に利用していることに他ならないからね。

ついでに、<br style="clear: both;" /> は間違いだよ。br要素はインライン要素だから、clearは適用できない。

407 ：Name_Not_Found：2006/01/30(月) 19:26:10 ID:???

なんか凄い論法だな

408 ：Name_Not_Found：2006/01/30(月) 19:33:48 ID:???

まともなブラウザならこれ追加すればいける
#d1:after {
display : block;
clear : both;
content : "";
}

409 ：Name_Not_Found：2006/01/30(月) 20:11:02 ID:???

>>408
IEではつかえないがな

410 ：Name_Not_Found：2006/01/30(月) 20:27:00 ID:???

お～～い　ｶｲﾄｳｼｬｰｰ　勉強しろよ～～～

411 ：Name_Not_Found：2006/01/30(月) 20:30:06 ID:???

>>410
質問者の立場で偉そうなこというな

そもそも質問者のお前が勉強していれば質問する必要ないだろ

412 ：Name_Not_Found：2006/01/30(月) 20:30:21 ID:???

> <br style="clear: both;" /> は間違いだよ。
文法に則していれば、書くのは許される。
CSSは細かい知識を作者に要求しない。

> br要素はインライン要素だから、clearは適用できない。
CSS21, CSS2 準拠を謳う UA は、適用しない。
CSS1 準拠を謳う UA は、適用する。
誰でも知っていることだが、最大シェアのIEはCSS1準拠を謳っている。

413 ：Name_Not_Found：2006/01/30(月) 21:03:26 ID:???

>>406
>CSSの適用のために、div要素を使うというのは筋が通ったことだからね。
釣りですか？
CSSのためにHTMLを変更するなんて本末転倒。
ついでにstyle属性は廃止方向（ものによっては廃止）

414 ：Name_Not_Found：2006/01/30(月) 21:16:41 ID:???

※　議論はよそで　※

415 ：Name_Not_Found：2006/01/30(月) 21:33:53 ID:???

>>414
それ、馬鹿には効かないよ。

416 ：Name_Not_Found：2006/01/30(月) 22:02:57 ID:???

※　馬鹿はよそへ　※

417 ：Name_Not_Found：2006/01/30(月) 22:05:17 ID:???

>>416
自分のこと、馬鹿だと自覚していないから無駄。

418 ：Name_Not_Found：2006/01/30(月) 22:07:17 ID:???

/* うぜぇ消えろ馬鹿 */
baka {
display: none;
speak: none;
}

419 ：Name_Not_Found：2006/01/30(月) 22:08:05 ID:???

>>413
お前本当にWebデザインやったことあるのだろうか。
CSSのためにdiv要素を追加する必要があることも多い。

なくてできる、っていうなら商用サイトのような複雑な段組、デザインをやったことないんだろうな。

W3CのソースだってCSSのために追加したようなクラス、div要素もいっぱいある。

<hr class="hide" />　とかな。

420 ：Name_Not_Found：2006/01/30(月) 22:14:00 ID:???

>>419
はいはいわろすわろす。
消えろ。

421 ：Name_Not_Found：2006/01/30(月) 22:21:42 ID:???

>>491
つ【おまえはDIV厨】

422 ：Name_Not_Found：2006/01/30(月) 22:21:58 ID:???

確かに、完全には「文書とスタイル情報を分離する」…は実現できて
いないよね。あのclass属性はなんだろう…。
しかし空DIVはちょっとなぁ。

423 ：Name_Not_Found：2006/01/30(月) 22:23:19 ID:???

腕がない言い訳ばっかり

424 ：Name_Not_Found：2006/01/30(月) 22:27:39 ID:???

だったら、文章とスタイル情報が分離できていて、
かつ、デザインが商用サイト並なサイトを１つ挙げてみろ。

W3Cのサイトはデザインもシンプルなくせに、
文章とスタイル情報が分離できていていない。

ソースを見れば分かるが、CSSがなかったら本来しないようなdiv要素も山ほどあるし、
クラス名も構造化を意識していないものが山ほど使われている。

425 ：Name_Not_Found：2006/01/30(月) 22:29:10 ID:???

あーあ、居座っちゃった。

426 ：Name_Not_Found：2006/01/30(月) 22:29:18 ID:???

そういうのはカスイケスレとかでやってよ

427 ：Name_Not_Found：2006/01/30(月) 22:34:45 ID:???

>>424
カスイケの中にはそういうのもいっぱいあるからさ行っておいで。
まぁカスイケ自体少ないという噂（ｒｙ

428 ：Name_Not_Found：2006/01/30(月) 22:37:14 ID:???

すみません、border-style:double;についてなんですが、
border-width:4px;としたところ、
firefox1.5とopera8.5では4pxの内訳が「1pxの塗り2pxの空き1pxの塗り」だったのですが
IEでは「2pxの塗り1pxの空き1pxの塗り」でした。
doubleのときにwidthの数値をどうやって割り振るかは決められていなくて
各ブラウザに任せられているんですか？

429 ：Name_Not_Found：2006/01/30(月) 22:37:39 ID:???

　　　　　　 _ ,,, . .,,, _
　　　　,.､;',,;;;;;;;;;;;;;;;;;;;;;,.｀丶.
　　 /,;;;;;;;;;;;;;:､- ‐ ' ''= ､;;,.ヽ
. 　 ,',;;;;;;;;;;;i'"　　　　　ヽ;,.'､
　　{,;;;;;;;;;;;;{　 _,,;;;;,､　　　 ,,;,､;,.',
　 _l,;;;;;;;;;厂〃 .__､｀　,ｒ' ﾞﾞ`'};;,.j
. { トヽ;;;;;!　　 '´￣ `　{ '＝ｯ{;<　　　　　 ! 　 .　 , ,　　　．
. ヽ.ゞさ;;}　　　 ,.r'_ ,..)､　　!;,.!　　ヽ､_,人_,ノ､_,从,人.ｨj､ﾉv1
　　ヽﾆY　　 ,.r' ＿｀;＾´!　 ,';/　　　）
　　　ヾ:､　　　ヾ= 三;〉　/'′ ‐=､´　　　　　VIPでやってよ☆
　　　ﾉ,;:::＼　　｀ー" , '　　　　　）
　,.､-',;;;{　ヾ:ヽ､＿_ ,∠､　　　　, '⌒r‐v'ヽｨ'⌒Ｙｿ､ﾄ､!ｙﾍ!
',,;;;{ {;;;;;;ヽ　　　 }::〈;;;;;;;;l iヽ､　　　　 ´　i 　 ' 　 ´　 `
,;;;;;ヽ､ヽ;;;;＼　 ,r'::::ﾉ;;;;;;j j;;;;,.｀ヽ､

430 ：Name_Not_Found：2006/01/30(月) 22:38:04 ID:???

>>428
その通り。
各ブラウザに任せられている。

431 ：428：2006/01/30(月) 22:42:48 ID:???

>>430
レスどうもありがとうございます。サイト作成者がコントロールすることはできないんですね。

432 ：Name_Not_Found：2006/01/30(月) 22:46:38 ID:???

>>403
ＦＡＱは読んだんだよね？　親ブロックにoverflow指定で対処って裏技もあるぞ。

433 ：Name_Not_Found：2006/01/30(月) 23:58:30 ID:???

>>431
今はがまんだ。

434 ：Name_Not_Found：2006/01/31(火) 00:11:21 ID:???

>>431
自分の好みのダブルの線を画像に変換して背景画像として左側に配置という手もある。

435 ：Name_Not_Found：2006/01/31(火) 03:01:38 ID:???

そんならdiv重ねでいいじゃん・・・

436 ：Name_Not_Found：2006/01/31(火) 03:03:20 ID:???

よくねーよ、全然意味が違うｗｗ

437 ：Name_Not_Found：2006/01/31(火) 03:10:01 ID:???

たかが二重線を画像にするよりはマシだと思うな。

438 ：Name_Not_Found：2006/01/31(火) 03:11:45 ID:???

マシじゃないマシじゃない

439 ：Name_Not_Found：2006/01/31(火) 03:12:41 ID:???

>>437
構造を変化させることと、
背景画像を変化させることには天と地ほどの違いがある。

440 ：Name_Not_Found：2006/01/31(火) 03:33:45 ID:???

あー・・・
異教徒の方々でしたか。
失礼しました。
議論はスレ汚しになるので今日は去ります。

441 ：Name_Not_Found：2006/01/31(火) 07:43:31 ID:???

目的と手段を取り違えてる奴が多いな。

442 ：Name_Not_Found：2006/01/31(火) 08:00:12 ID:???

どっちの話だよ。たこ

443 ：Name_Not_Found：2006/01/31(火) 08:06:20 ID:???

たいした神でもないのに従順な信者だな。

444 ：Name_Not_Found：2006/01/31(火) 09:09:45 ID:???

ボックスに合わせて全部背景画像作るんやｗ

445 ：Name_Not_Found：2006/01/31(火) 09:30:10 ID:???

そりゃあまぁ二重線の一つ一つの線幅と間隔まできっちり指定したかったらそうだろ？
てかボックスに合わせて全部余分なボックス作るのが正解だとでも思ってるんか？ｗ

446 ：Name_Not_Found：2006/01/31(火) 09:51:10 ID:???

※　議論はよそで　※
※　馬鹿はよそへ　※

447 ：Name_Not_Found：2006/01/31(火) 10:38:33 ID:???

正解は"あきらめろ"だ!!
なにが背景画像だ。馬鹿。馬鹿はよそだ。
おまえのことだよ、馬鹿。
てぃむに抱かれてこい。

448 ：Name_Not_Found：2006/01/31(火) 10:59:05 ID:???

子供の言うことは全然わかんね。

449 ：Name_Not_Found：2006/01/31(火) 14:00:38 ID:???

WindowsIEとNetscapeやOperaでのposition: absolute; bottom: 0;の解釈が違ってて困り果てています。

positionを用いた2段組みでフッタにCopyrightを表示したいのですが、右側の内容部のほうが長い場合は問題ないのですが、
左側のメニュー部のほうが長い場合に、内容部の最後尾でCopyrightフッタが(左側メニューを貫いて)表示されてしまいます。

そこでposition: absolute; bottom: 0;をフッタに記述したところ、IEでは解決するのですが、Opera等では画面の一番下に表示されます。
IEでは内容の一番下、Opera等では画面の一番下です。

条件としては左側メニュー部と右側内容部をぶち抜きで、どっちが長い場合でも一番下にフッタを表示したいのです。
floatで組み直さずに実現する方法はありますか？

450 ：Name_Not_Found：2006/01/31(火) 14:05:01 ID:???

補足

IEでは解決すると書きましたが、それを行った場合IEでは逆に右側内容部が長い場合、画面の一番下に表示されました。
position: absolute; bottom: 0;では何も解決されないということになりました。

451 ：Name_Not_Found：2006/01/31(火) 14:17:53 ID:???

わかりにくいねえ。なぜソースも出さないで質問するのかねえ。

cf. http://cssbug.at.infoseek.co.jp/detail/opera/b077.html

452 ：Name_Not_Found：2006/01/31(火) 17:07:18 ID:kLwKGme1

2カラムにして１つ目を固定幅、２つ目を可変幅にしたいのですが
floatでやると、可変のdivの中身が長くなると回り込んでしまいます

固定幅はあきらめて％にするしかないのでしょうか？

453 ：Name_Not_Found：2006/01/31(火) 17:17:04 ID:???

>>452
エスパー的能力を発揮して答えると
可変幅の方に margin-left(right) が設定されていない

454 ：452：2006/01/31(火) 17:31:43 ID:???

<div id="kahen">
<div id="inner">可変</div>
</div>
<div id="kotei">固定</div>

#kahen {
width: 100%;
float: left;
margin-right: -200px;
}
#inner {
margin-right: 200px;
}
#kotei {
float: right;
width: 200px;
}

すみません。
これで実現できたっぽいです
でもなんでこれで動くのか理解できない・・・orz

455 ：Name_Not_Found：2006/01/31(火) 18:36:52 ID:BhPIS1j1

bodyに指定した背景を中央表示したいのですが
background-position-x:center;
ではIEだけでFirefox等では中央表示されません・・・
どうすれば良いのでしょうか？

456 ：Name_Not_Found：2006/01/31(火) 18:49:45 ID:???

>>455
ttp://www.htmq.com/style/background-position-x.shtml

457 ：Name_Not_Found：2006/01/31(火) 18:50:21 ID:???

>>455
background-position: center center;

background-position-xとbackground-position-yはIE独自だったと思う

458 ：Name_Not_Found：2006/01/31(火) 19:00:56 ID:BhPIS1j1

>>456-457
ありがとうございました、-x-yはIE独自だったんですね・・・

459 ：Name_Not_Found：2006/01/31(火) 20:33:27 ID:???

質問させていただきます。
単純ルビにfirst-letterを適用させるにはどうしたらいいんでしょう？
たとえばh2:first-letter, h2 *:first-letter { color:#f00; }なんかで
h2のテキストとabbrなんかは意図通り先頭文字の色が変わりました。
しかしh2の先頭文字にルビを振っていると適用されません。
例：<h2><ruby><rb>試し</rb><rp>（</rp><rt>テスト</rt><rp>）</rp></ruby>表題</h2>
無論h2 ruby rb:first-letter { color:#f00; }でも駄目でした。
動作確認はWin2000 Firefox1.5です。宜しくお願いいたします。

460 ：Name_Not_Found：2006/01/31(火) 21:00:13 ID:???

WinXP、Firefox1.5で「試」の字が赤くなった。

461 ：Name_Not_Found：2006/01/31(火) 22:07:13 ID:???

偉そうにホザくわりには全員低能だなｗｗｗ

462 ：Name_Not_Found：2006/01/31(火) 22:09:14 ID:???

全部画像にして貼付けろ。
構造が一番大切だ。ｗｗｗ

463 ：Name_Not_Found：2006/01/31(火) 22:56:52 ID:???

vipperは巣から出てくんなよ

464 ：Name_Not_Found：2006/01/31(火) 23:23:41 ID:???

<p>日本語日本語日本語English日本語日本語・・・</p>
といった日本語文章中に英単語が含まれる場合、
英単語の前後に余白を取りたいのですが
htmlファイルに直接空白を書き込んだり<span>などのタグを追加したりしないで
実現できるようなcssのプロパティはありませんか？

465 ：Name_Not_Found：2006/01/31(火) 23:31:36 ID:???

word-spacing: 8ex;

466 ：Name_Not_Found：2006/01/31(火) 23:36:28 ID:???

word-spacingは文中にスペースがないと使えない

467 ：Name_Not_Found：2006/01/31(火) 23:42:56 ID:???

>>464
あらかじめ
<p>日本語日本語日本語 English 日本語日本語・・・</p>
とするしかないね

468 ：Name_Not_Found：2006/02/01(水) 00:04:55 ID:???

>>460
ありがとうございます。
申し訳ありませんがXPは所持してませんので確認ができませんので、
XPの人が多いでしょうし、このままで良しとします。

469 ：Name_Not_Found：2006/02/01(水) 02:16:20 ID:???

馬鹿ばかりなり。

470 ：Name_Not_Found：2006/02/01(水) 07:51:46 ID:???

するしかないね。

だってｗ

471 ：Name_Not_Found：2006/02/01(水) 10:46:11 ID:???

1
<ul>
<li>ほげほげ</li>
<li>ふげふげ</li>
</ul>

2
<ul>
<li><p>ほげほげ</p></li>
<li><p>ふげふげ</p></li>
</ul>

1と2どちらのほうがXHTML1.0 Strict的に正しいと言えますか？

472 ：Name_Not_Found：2006/02/01(水) 11:11:09 ID:???

473 ：Name_Not_Found：2006/02/01(水) 11:13:50 ID:???

2は間違っているということですか？

474 ：Name_Not_Found：2006/02/01(水) 11:20:14 ID:???

というかスレ違い。
Strictスレにおいきなさい。

475 ：Name_Not_Found：2006/02/01(水) 11:22:17 ID:???

すみませんでした。

476 ：Name_Not_Found：2006/02/01(水) 12:01:42 ID:???

>>470は批判しかせず代替案も提示できないプロ市民

477 ：Name_Not_Found：2006/02/01(水) 15:57:21 ID:???

すごく単純なことで申し訳ないのですが
300x300のdivをつくって
そのボックスに下揃えでテキストを書くことって
できますか？
フォントを固定サイズにしたときはできたのですが
指定しない場合はどうやってやるのでしょう？

478 ：Name_Not_Found：2006/02/01(水) 16:19:51 ID:???

idとclassの実際的な使い分けについて教えて下さい。

・idはclassより優先順位が高い。
・同じ名前のidは同一ページ内では指定できない
・classは同一ページ内で複数指定できる
ここまではわかったんですが、
実際は名前さえかぶらなければどっちで指定しても表示できてしまうので
どう使い分けたらいいのかわからなくて悩んでいます。

479 ：Name_Not_Found：2006/02/01(水) 16:20:01 ID:???

例えばこんなページを作るとして、

┌──────────────┐
│ 　　　　　　　MENU 　　　　　　 │
├──────────────┤
│┌─────┐┌─────┐│
││ content A .││ content B .││
│└─────┘└─────┘│
│┌────────────┐│
││　　　　　content C　　　　　　.││
│└────────────┘│
├──────────────┤
│　　　　　　　　Futter 　　　　　　　　│
└──────────────┘

メニュー、コンテンツA・B・C、フッターに対する値の指定は全て違い、
ボックス単位に全て違う名前を付けてあれこれ指定するとします。

この場合、全部をidで指定しようが、classで指定しようが、
問題なく表示されてしまうと思うんですが、
idとclassの実際的な使い分けについて暗黙のルールとか、
CSS自体の思想上の理由による使い分けとかはありませんでしょうか？

どなたかご教授下さい。よろしくお願いします。

480 ：Name_Not_Found：2006/02/01(水) 16:21:51 ID:???

>>479
> Futter
これは間違っていると思う。

481 ：478-479：2006/02/01(水) 16:24:02 ID:O+6zcbIr

footer　でした。
お恥ずかしい。orz

482 ：Name_Not_Found：2006/02/01(水) 16:25:05 ID:???

>>479
たとえばcontent Aとcontent Bとcontent Cが同列なら
<hoge class="content" id="content-a">content A</hoge>
<hoge class="content" id="content-b">content B</hoge>
<hoge class="content" id="content-c">content C</hoge>

483 ：478-479：2006/02/01(水) 16:31:42 ID:O+6zcbIr

>>482
ご回答ありがとうございます。
コンテンツ間の重みに優劣がある場合は、
優＝id、劣＝class　になりますか？

484 ：Name_Not_Found：2006/02/01(水) 16:44:44 ID:???

>>483
> コンテンツ間の重みに優劣がある場合
ってのはつまり>>479で言うと
content Aと content Bはサブコンテンツでcontent Cはメインコンテンツって場合とか？
その場合は>>482のようなclass名でもいいし

<hoge class="sub-content" id="content-a">content A</hoge>
<hoge class="sub-content" id="content-b">content B</hoge>
<hoge class="main-content" id="content-c">content C</hoge>

のようなclass名でもいいし。
制作者にとって、グループだ、と思うものに同じclass名を割り当てればいいと思う。
それから、
> 優＝id、劣＝class　になりますか？
というのは優先順位のこと？それなら
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity
を見て。
classよりもidのほうが優先度が高いから
共通する部分をclassで指定してその後個別にidで指定して上書きすればいいと思う。

485 ：478-479：2006/02/01(水) 16:58:28 ID:O+6zcbIr

>>484
丁寧な解説ありがとうございます。

なるほど。グルーピングにも使うんですね。
本を何冊か買って読んでみた物の、
その辺はさっぱり解説されていなくて気になっていました。

リンク先も参考にさせていただきます。

ありがとうございました。（深謝

486 ：Name_Not_Found：2006/02/01(水) 19:31:28 ID:???

日本人ってすぐ「すみませんでした」っていう癖があるみたいだけど
これ外国人はなんて思うだろうね…

487 ：487：2006/02/01(水) 19:52:31 ID:3MNoHTgP

Tomcat5.0+struts+Velocityで開発しています。
外部スタイルシートを読み込んだり読み込まなかったりするんですが、どんな原因が考えられますか？

488 ：Name_Not_Found：2006/02/01(水) 19:54:38 ID:LwTSteXU

既出ならごめんなさい。詳しい方いらっしゃいますでしょうか？

IE5.5～6 で、

<select disabled="disabled">
　<option />
</select>

とか

<input type="text" value="***" readonly="readonly" />

のような、使用不可にされているタグに対して CSS を適用させる方法ってあるんでしょうか？

>>486
謝るときの「すみません」って、Sorry と Please be patient の意味が両方あるから
それを理解してる外国人なら問題ないと思うけど。

489 ：Name_Not_Found：2006/02/01(水) 21:18:47 ID:???

>>487
スレ違い。

>>488
普通にselectに指定できるが。

490 ：Name_Not_Found：2006/02/01(水) 21:25:14 ID:???

>>485

890 Name_Not_Found 2006/01/30(月) 23:00:36 ??? mailto:sage
>>886
IDは太郎さん、花子さんといった「名前」。
CLASSは男、学生といった「属性」。
だからIDは1要素に1つしか設定できないし、（1つのファイルで）被っちゃならないけど、
CLASSは1要素に幾つでも設定できるし、ファイル内で難解使ってもいい。

904 Name_Not_Found 2006/01/30(月) 23:15:33 Ljl+v/R7
>>890
それならIDなんて使わずに
全部クラスで良いんじゃないの？

905 Name_Not_Found 2006/01/30(月) 23:18:15 ??? mailto:sage
>>904
classは主にCSSのためにしか使われない。むしろこっちはなくても何とかなる。
だがidは違う。まさに「名前」だ。
そこにアクセスするための名前だから、見出しなんかには確実に付けといたほうがいい。
廃止されるname属性の代わりにid属性が使われる理由もそこ。

491 ：Name_Not_Found：2006/02/01(水) 21:38:21 ID:TKXt+h8c

日記+過去ログを表示させるサイトをブログではなく自分で作ろうと思い
HTML+CSS Handbook等の書籍を買ってCSSを勉強してるのですが
自分が作り出そうとしている物に活かせられません；；

http://www.goodtheater.jp/documentary_2003.htm
ここのサイトの構築日記みたいな構成にしたいのですが
どのようにすればよろしいのでしょうか？

492 ：Name_Not_Found：2006/02/01(水) 21:46:51 ID:???

>>491
そこのソース参考にすればよろしいんじゃないでしょうか。

493 ：Name_Not_Found：2006/02/01(水) 21:49:15 ID:???

IE7ハックまだですか

494 ：Name_Not_Found：2006/02/01(水) 21:56:23 ID:???

DOCTYPEの前に<?xml ～ ?>があったら互換モード発動？

495 ：Name_Not_Found：2006/02/01(水) 21:56:42 ID:???

>>493
出てるよ。
ttp://www.lucky-bag.com/archives/2006/02/ie7-css-hack.html

496 ：Name_Not_Found：2006/02/01(水) 21:58:38 ID:???

>>494
それはIEのバグ。

497 ：Name_Not_Found：2006/02/01(水) 22:03:03 ID:???

何でもかんでもバグ言うな

498 ：Name_Not_Found：2006/02/01(水) 22:03:38 ID:???

>>497
バグじゃなかったらナンナンデスカ？＾＾

499 ：Name_Not_Found：2006/02/01(水) 22:06:41 ID:???

仕様です！！

500 ：Name_Not_Found：2006/02/01(水) 22:08:39 ID:???

>>495
ぬはー。素晴らしい。
確かにできた。

あとは「IE7のみ」ハックがあれば完璧！？
ってまだβだからはしゃぐのも早すぎかもだが。

501 ：Name_Not_Found：2006/02/01(水) 23:22:10 ID:leiaq+tR

３カラムで真ん中部分が有る程度可変（真ん中部分に画像とかがあるとウインド幅縮めた時にちゃんと右部分が重ならずにマージンがちゃんと空いて止まる）
左部分は固定ってのできますかね？

502 ：Name_Not_Found：2006/02/02(木) 00:30:06 ID:p/uQzXwJ

できる。
つか、それが何故疑問、質問になるのかがわからない。

503 ：Name_Not_Found：2006/02/02(木) 00:35:35 ID:tWQntuLV

CSSを作成中は、コメント付けたりしているんですが、
実際に使うときは、転送料を減らすために、
コメントや改行やタブを消去したいです。

自動で消去してくれるエディタとかってありませんか？

504 ：Name_Not_Found：2006/02/02(木) 01:06:32 ID:???

>>503
そんなの正規表現検索（置き換え）できるエディタなら何でもOKだろ。

505 ：Name_Not_Found：2006/02/02(木) 01:07:02 ID:???

置換
　検索する文字列[ ]←半角スペース
　置換後の文字列[]←何も記入しない

置換
　検索する文字列[\n]←改行
　置換後の文字列[]←何も記入しない

置換
　検索する文字列[\t]←タブ
　置換後の文字列[]←何も記入しない

506 ：Name_Not_Found：2006/02/02(木) 10:25:45 ID:???

>>477
vertical-align

507 ：Name_Not_Found：2006/02/02(木) 10:52:49 ID:???

>>506
嘘つき

508 ：Name_Not_Found：2006/02/02(木) 11:29:24 ID:???

>>505だとフォント名とかに不具合が出ない?
ttp://flumpcakes.co.uk/css/optimiser/も日本語通るかしらないけど

509 ：Name_Not_Found：2006/02/02(木) 12:51:53 ID:???

というか半角スペースは置き換える必要がない

510 ：Name_Not_Found：2006/02/02(木) 13:23:48 ID:???

>>507は緒川たまき

511 ：Name_Not_Found：2006/02/02(木) 13:29:36 ID:???

すみません。教えてください。

「123<h1>456</h1>789」
を改行なしで表示したいのですが
h1 { display: inline 」
としても

123
456789

としかなってくれません
なにか方法はありますでしょうか

512 ：Name_Not_Found：2006/02/02(木) 13:51:17 ID:???

表で例えば、Excelでいうウインドウ枠の固定みたいにして
列見出しは常にだしたままで下だけスクロールさせたいのですが
<div style="overflow:auto～">でスクロールバー出す方法だと2行目からって
できないみたいで何かいい方法ありませんでしょうか？
あぁ、ちなみに各列幅はデータ内容によって変わるので固定できません。

513 ：Name_Not_Found：2006/02/02(木) 13:57:05 ID:KuSXpHff

ちょっと質問です
imgのにボーダーをつけたいんですが、上手くいきません
どのようにスタイルを指定していしたらいいのでしょうか？

514 ：Name_Not_Found：2006/02/02(木) 13:57:58 ID:???

>>511
普通にできるぞ。
123に対してブロックレベルでマークアップしてないか？
<div>123<h1>456</h1>789</div>とかだったらOK。

>>512
見出しのthはtheadに纏めて
tbodyに対してoverflow。

515 ：Name_Not_Found：2006/02/02(木) 13:58:29 ID:???

>>513
普通に
img { border : solid 1px #f00; }
とか。

516 ：Name_Not_Found：2006/02/02(木) 14:10:31 ID:???

あ、>>514はIEが対応してないや。

517 ：477：2006/02/02(木) 14:20:51 ID:???

>>506
試してみましたがだめでした

どなたかヒントだけでもお願いします

518 ：Name_Not_Found：2006/02/02(木) 14:22:40 ID:aDoSnjVA

質問なんですが

html{ width: 100%; height: 800px; margin:0px; padding:0px; }
body{ background-color:#CCCCCC; width: 100%; height: 100%; margin:0px; padding:0px; }
#block{ background-color:#FFFFFF; width:80%; height:98%; margin:0px auto auto; padding:0px; }
#header{ background-color:#FF0000; width:100%; height:10%; margin:0px; padding:10px; }

<div id="block">
<div id="header">title</div>
</div>

とするとblockの幅をheaderが超えてしまうのですがなぜでしょうか。
widthの範囲内でpaddingは内側に空きを作るんですよね？

519 ：Name_Not_Found：2006/02/02(木) 14:29:10 ID:???

>>517-518
テンプレ読んでから恋。

520 ：Name_Not_Found：2006/02/02(木) 14:49:54 ID:???

どんなことでも普通にやればできるさ。

521 ：477：2006/02/02(木) 15:41:57 ID:???

できましたー
失礼しましたー

522 ：Name_Not_Found：2006/02/02(木) 15:47:58 ID:???

質問なんですが、左側ナビゲーションでdivを使用せずにposition: absolute;で1ブロックごとにtopからの座標を指定するより、
めんどくさい悪あがきはやめてナビゲーションぐらい素直にdivで囲んでおいたほうが賢明だと思うのですが、どう思いますか？

523 ：Name_Not_Found：2006/02/02(木) 16:30:31 ID:???

>>522
バカっぽい質問だなあ、と思います。

524 ：Name_Not_Found：2006/02/02(木) 16:38:33 ID:???

IE7Beta2Preview
http://www.microsoft.com/windows/ie/ie7/

IEBlog
http://blogs.msdn.com/ie/

自分の書いたCSSのチェックはしておこう。

Cascading Style Sheet Compatibility in Internet Explorer 7
http://msdn.microsoft.com/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

525 ：Name_Not_Found：2006/02/02(木) 16:44:07 ID:???

>>515
枠線の形式も指定しないといけないのか・・・
めんどい

526 ：Name_Not_Found：2006/02/02(木) 17:32:18 ID:???

idとclassの違いって何かありますか？
よくわからないので短いidの方を使っているのですが・・

527 ：Name_Not_Found：2006/02/02(木) 17:53:42 ID:???

>>526
>>478-490という一連の流れを

528 ：518：2006/02/02(木) 18:09:39 ID:aDoSnjVA

>>518の問題は解決したのですがまた質問がありまして

高さを指定しておくとオーバーフローしたときの処理で、
overflowで隠すとかスクロールバーつけるとかは分かったのですが、
テーブルのようにオーバーフロー分だけ
高さを変更するみたいなことはできないのでしょうか。

529 ：Name_Not_Found：2006/02/02(木) 18:39:14 ID:7KKidQxt

<div id="titel">
<h1>title of this page</h1>
</div>

<div id="content">
<h2>titel of the content</h2>
<p>body of the content</p>
</div>

<div id="navi">
<ul>
<li>home</li>
<li>blog</li>
<li>wiki</li>
</ul>
</div>

<div id="sidebar">
<h2>serach</h2>
<h2>links</h2>
</div>

のようなページがあり、ＣＳＳで段組をする際、
xhtml文書内での<div>の出現順とは関係なく、　navi を　contettより上に段組するにはどのようにすればよいでしょうか？

530 ：529：2006/02/02(木) 18:46:23 ID:7KKidQxt

すいません。　＞529の質問にて、ブラウザへの言及がありませんでした。
ブラウザは特に問いません。　ただそのようなことがＣＳＳとして可能かどうか、可能であればどのようにして
実現するかをご教示願えれば幸いです。

531 ：Name_Not_Found：2006/02/02(木) 18:52:00 ID:???

>>529　絶対配置。positionって知ってる？　自分で調べてね。

532 ：Name_Not_Found：2006/02/02(木) 18:55:20 ID:???

>>529
> <div id="titel">
> <h2>titel of the content</h2>
> <h2>serach</h2>
これは間違っていると思う。

533 ：Name_Not_Found：2006/02/02(木) 18:57:19 ID:???

>>529
こざかしい事しないで、順番通り書くと楽だいね。

534 ：529：2006/02/02(木) 20:02:03 ID:7KKidQxt

>531
すいません。言及わすれてましたが、絶対配置　position absoluteとか使わない方法を
模索しておりました。

＞532
ですかね。。。　search部分、h3にさげるなり、h使わない方がいいですかね。

>533
そうなんですよね。　そのとおりなんです。　ただ、意味的に重要でないものを
できれば文書の下部に設置したいものでしてね。　

535 ：Name_Not_Found：2006/02/02(木) 20:04:50 ID:???

>>534
逆に質問して申し訳ないのですが、あなたはなぜposition: absolute;を使わない方法を模索しているのでしょうか？
いや、私はfloat以外の段組みを模索しているところで、どうしてかなと思ったのであります。

536 ：Name_Not_Found：2006/02/02(木) 20:12:50 ID:7KKidQxt

>535

純然なリキッドデザインを模索しているからです。

537 ：Name_Not_Found：2006/02/02(木) 20:32:17 ID:???

>>536
なるほど。そうでしたか。
ありがとうございます。

538 ：Name_Not_Found：2006/02/02(木) 21:01:35 ID:???

>>534
532はスペルが間違っていると言っている

539 ：Name_Not_Found：2006/02/03(金) 11:06:39 ID:???

スペルに関して便乗させてください。

2columns, 3columnsに対して1columnまたはno columnどちらが正しいですか？

540 ：Name_Not_Found：2006/02/03(金) 11:09:07 ID:???

自己解決しました。

no column
two column
three column

が正しかったです。

541 ：Name_Not_Found：2006/02/03(金) 11:10:16 ID:???

あ、でも

one column
no column

どちらが正しいかわかりません。

542 ：478-479：2006/02/03(金) 13:27:17 ID:jkFazFxY

>>490
超亀ですみません。
なるほど…nameの変わりと考えれば話は早いですね。
ありがとうございました！

543 ：Name_Not_Found：2006/02/03(金) 14:47:47 ID:8SBM5jIg

FireFoxのバージョンアップでCSSの解釈がかわったという噂はガセ？

544 ：Name_Not_Found：2006/02/03(金) 16:05:32 ID:???

変わった部分もある。
ttp://deegg.main.jp/ref/mozilla/naro/2005gecko_innovation.html

545 ：Name_Not_Found：2006/02/03(金) 16:59:54 ID:???

:first-letterと::first-letterでは何が違うのでしょうか（´・ω・`）
ttp://f57.aaa.livedoor.jp/~motohiko/CSS/NewInFx1.5.html#pseudoelement-first-letter

546 ：Name_Not_Found：2006/02/03(金) 18:48:33 ID:???

>>545
::first-love

547 ：Name_Not_Found：2006/02/03(金) 19:49:25 ID:???

ブロックAとブロックBをfloatで横に並べているのですが、
ブロックAの縦幅をブロックBの縦幅に自動的に合わせるようにすることはできますか？

色々調べたんですがわかりませんでした（´・ω・`）
お願いします。

548 ：Name_Not_Found：2006/02/03(金) 19:57:28 ID:???

>>547
いいえ。

549 ：547：2006/02/03(金) 22:00:04 ID:???

>>548
できないですか･･･。
今はbody要素とブロックBにheight:100%;を追加しているんですが、
これだとブラウザの大きさに対しての縦幅になるんですよね･･･。

何にせよありがとうございました。他の手を考えてみます。

550 ：Name_Not_Found：2006/02/03(金) 22:19:40 ID:???

textareaにcolsとrows設定した後、cssでheightを設定したんですけど問題ないでしょうか?

551 ：Name_Not_Found：2006/02/03(金) 22:46:15 ID:???

>>550
無いです

552 ：Name_Not_Found：2006/02/04(土) 11:40:21 ID:???

>>545
　　　　疑似クラス　疑似要素
CSS 2　elm:p-cls　elm:p-elm
CSS 3　elm:p-cls　elm::p-elm

553 ：Name_Not_Found：2006/02/04(土) 11:43:21 ID:???

>>549
うまくいったらやりかた教えてね

554 ：Name_Not_Found：2006/02/04(土) 16:50:29 ID:???

http://intensivstation.ch/files/templates/2/template-2.html
このテンプレートの右側の広い部分を日記(ニュース)に使い毎日更新していき
一ヶ月分たまったら左ページにログとして参照出来るようにしたいのですが
自分が今までやっていた方法は一ヶ月分たまったら手動でログページを作って
内容をコピペ＆ペーストで一個一個作ってたのですが、効率の悪さから他の方法があるのあかな？
と思い始めたのですがどうなのでしょうか

もう一つは、左ページといっても従来はフレームで分割していた左側をどうやれば
ページとして使えるのでしょうか
ログをクリックした後も同じように表示出来るように追加する毎に全てのページをそっくり作って
擬似的にﾒﾆｭｰがあるようにみせていました

555 ：Name_Not_Found：2006/02/04(土) 16:58:25 ID:???

>>554
CSSに関係ない。
Movable Typeでも調べてみたら？

556 ：Name_Not_Found：2006/02/04(土) 18:20:04 ID:???

http://tff.blog43.fc2.com/を見ていただいたら分かると思いますが、
paddingとmarginを0にしても右の各メニューのメニュー名の下に余白ができてしまっています。
どうすればいいんでしょうか？

557 ：Name_Not_Found：2006/02/04(土) 18:22:32 ID:???

>>556
そのメニュー名とメニュー項目にもmargin:0;padding:0;入れたらいいんでない？
<h3>と<ul>に

558 ：Name_Not_Found：2006/02/04(土) 18:28:06 ID:???

解決したクポ！

559 ：547：2006/02/04(土) 19:30:48 ID:???

>>553
結局body要素にbackground-colorを指定して誤魔化しました。
いつか必ず

560 ：Name_Not_Found：2006/02/04(土) 19:42:26 ID:???

おう　　がんがれ

561 ：556：2006/02/04(土) 23:01:47 ID:???

>>557
入れましたが、今度はメニューとメニューの間隔まで詰まってしまいました。
http://tff.blog43.fc2.com/

562 ：Name_Not_Found：2006/02/04(土) 23:16:04 ID:???

>>561
<DIV class=rmenu-body>にマージン入れろ

563 ：Name_Not_Found：2006/02/04(土) 23:17:24 ID:???

>>561
そのかわいい画像は何の奴？
ぬいぐるみ？

564 ：Name_Not_Found：2006/02/04(土) 23:18:55 ID:???

モーグリだクポ

565 ：556：2006/02/05(日) 00:05:23 ID:???

>>562
誠にありがとうございました。

566 ：Name_Not_Found：2006/02/05(日) 00:21:09 ID:Q9qTBzT8

良くある左右のマージンをオートにして700pxぐらいの横幅のページを
常に真ん中に寄せるサイトを作っています。

全てページを一括して同じ外部シートから引いているのですが
マージンオートが利かないページがあるのです。
最初はそのペ－ジがわの打ち間違いやミスかと思いましたが違うようです。
なぜならマージンオートを指定しているセレクタの
ほかの要素は利いてるからです。
考えられる原因がわかる方いますか。シート側も打ち間違いはないです。

567 ：Name_Not_Found：2006/02/05(日) 00:27:43 ID:???

>>566
CSSの打ち間違い

568 ：Name_Not_Found：2006/02/05(日) 00:28:27 ID:???

>>565
該当ページで何かしらミスしてる。以上。

569 ：Name_Not_Found：2006/02/05(日) 00:54:49 ID:Q9qTBzT8

たびたび　すいません。説明不足だったでしょうか。
マージンオートを指定しているセレクタにはそれ以外にも要素があり
その要素は利いてるのです。（該当ページでのこと）
打ち間違いなら全て利かないはず。
そして正常にマージンオートが機能するページもあるのでシートが
ミスしているとは思えないのです。　
　

　

570 ：Name_Not_Found：2006/02/05(日) 01:01:55 ID:???

>>569
そうなるとソース見なきゃわかんないっス

571 ：Name_Not_Found：2006/02/05(日) 01:53:06 ID:???

マージンオート利かないのはＩＥじゃないか？
モジラでも利かないのならあんたの書き間違え。
ＩＥだけなら、入れ子があるだろ。
ＩＥは入れ子があるとマージンオートが利かなくなる。

572 ：Name_Not_Found：2006/02/05(日) 02:51:27 ID:Q9qTBzT8

>>570
該当ペ－ジと利くページのタグ
<body>
<div class="base">　ペ－ジの枠
以下内容＿
＿＿＿＿＿＿＿＿＿＿＿＿＿
外部スタイルシート.base {width:765px;
padding:0px 0px 0px 0px;margin:0px auto 0px auto;
background-color:#ffffff;border-right:1px solid gray;
border-left:1px solid gray;}こんな感じです。
>>571
IEです。入れ子のことは知りませんでした。
ただ問題は利いているページと利いてないペ－ジはテキスト以外同じ型で
宣誓からクラスbaseまでの流れはまったく同じです。
穴が開くほど描き間違えを探しましたが
見当たりませんでした。

573 ：Name_Not_Found：2006/02/05(日) 03:43:23 ID:???

>>572
だから何か間違ってるんだよ、センタリングしないページのどこかが。
ここで騒ぐより、確認してみれ。
宣言～<div class="base">までが全ページ共通してるんなら、効いてるページからコピーしてみる。
閉じタグが足りないとか多いとかをチェックしてみる。
他のブラウザで確認してみる。

574 ：Name_Not_Found：2006/02/05(日) 04:54:20 ID:???

ＩＥならマージンオートが利かないのが通常だと考えるといいよ。
利くほうが挙動不審。いま修正が利いたとしても、いずれ破綻する。
ＩＥがマージンオート利かないから text-align: center で
中央によせて、入れ子要素を text-align: right で元に戻す。
まあ火狐かなんかで中央揃えになるか調べてよ。
火狐でマージンオートが利くなら、ＩＥでは手の打ちようがない。
text-align で回避するしかないね。

575 ：Name_Not_Found：2006/02/05(日) 06:01:39 ID:???

>>572
DOCTYPEが違ってるんじゃないか？
一度すべてテンプレートででも書き換えてみたら？

576 ：Name_Not_Found：2006/02/05(日) 08:01:49 ID:???

>>569
うｐ

577 ：Name_Not_Found：2006/02/05(日) 12:38:02 ID:???

たとえば
<img />
<p>ほげほげほげほげほげほげほげほげほげほげ</p>
img {float:left;}
でimgのwidthが不定の場合、
pのmargin-leftを毎回imgのwidth分だけあけるにはどうすればいいのでしょうか？

578 ：Name_Not_Found：2006/02/05(日) 13:21:35 ID:???

>>577
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#float-position
置き換え要素のfloatの仕様をよく嫁。

579 ：572：2006/02/05(日) 13:32:33 ID:vO/0sROq

>>573さん >>574さん >>572さん
お騒がせしました。コピーしたら出来ました。
皆さん本当にありがとうございました。

IEで　入れ子中央よせが聞かないのが普通だということ肝に銘じときます。
コピーする前にもう1度　宣誓をチェックしましたがスペルミス等は
見当たりませんでした。何だったんでしょう？バグ？

580 ：572：2006/02/05(日) 13:35:20 ID:vO/0sROq

上3番目ミスです>>575さんです。

581 ：Name_Not_Found：2006/02/05(日) 13:39:00 ID:???

>IEで　入れ子中央よせが聞かないのが普通
いや、これは標準モードならそんなことないから
覚えておかなくてもいいとオモ・・・

582 ：Name_Not_Found：2006/02/05(日) 14:09:23 ID:???

>>579
おい、自分で自分にお礼言ってどうする

583 ：Name_Not_Found：2006/02/05(日) 16:26:06 ID:???

IEの後方互換モードで、
bodyに設定したbackgroung-imageを*内容の量で*途切れさせるためには
どうしたらいいんでしょうか。
つまり内容物の縦幅が閲覧領域よりも小さかった場合に
標準モードのような動作をさせたいのですが。

584 ：Name_Not_Found：2006/02/05(日) 17:23:52 ID:???

標準モードで作る。

585 ：Name_Not_Found：2006/02/05(日) 18:42:46 ID:???

>579>572
いや、君がどこかで何かを間違えていたんだよ。
十分に落ち着いた頃に自分が間違えていたという前提で見直せばきっと間違いが見つかるよ。

586 ：572：2006/02/05(日) 19:09:22 ID:vO/0sROq

>>585
…そうですね。コピーしてできた以上　よくよく考えれば
おっしゃるとおり　わたしにミスがあったのでしょう。
これからはひとつの考えに凝り固まらずなるべく柔軟に考えるように
努力します。ありがとうございました。

587 ：Name_Not_Found：2006/02/06(月) 01:46:38 ID:0eBJgi/f

みんなは全部スタイルシートでなにもかも制作してる？
フレームのサイズからなにやらまで。

588 ：Name_Not_Found：2006/02/06(月) 02:33:18 ID:???

フレーム、ですか・・('A`)

589 ：Name_Not_Found：2006/02/06(月) 02:44:01 ID:???

あえてフレームと言うあたりが釣りっぽい

590 ：Name_Not_Found：2006/02/06(月) 09:12:44 ID:???

標準モードでもマージンオートは利かないよ。
あっ・・・と、
<?xml version="1.0" ・・・
があると標準モードにならないんだっけ、ＩＥ６は。
まあ、ＩＥ５のこともあるし、互換モードでビシッと
モジラでもＩＥでも同じにするのが一番だよ。

591 ：Name_Not_Found：2006/02/06(月) 09:16:47 ID:???

>>590
>>590
>>590

592 ：Name_Not_Found：2006/02/06(月) 12:53:25 ID:???

スタイルにkeyup等のJSの動作を記述することは可能ですか？

593 ：Name_Not_Found：2006/02/06(月) 12:55:49 ID:???

不可能

594 ：Name_Not_Found：2006/02/06(月) 13:16:15 ID:???

dekiruwakeneeee

595 ：Name_Not_Found：2006/02/06(月) 13:21:12 ID:4GrKEZ/O

リストでブロックを縦に並べたようなナビを作っているんですけど
ブロック大きさ1つ　横150ｐｘ　縦60ｐｘくらい
よくあるマウスオーバーすると色が変わるです。

問題はテキスト。　フォントが18ｐｘの大きさとして　
例えば「お問い合わせ」とブロックの中に入れると左上から文字が始まり
ますよね。
自分としてはテキストをブロックのど真ん中に表示したいんです。
横のセンタリングはテキストアラインでいけますが、
縦のラインのはリストなのでもちろんヴァーティカルアラインは
使えません。
パディングで強引にテキストの縦ラインをコントロールしようとしましたが
今度はパディングを作った部分だけマウスオーバー時に色が
変わらない事態が発生しました。
画像を使わず解決する方法はあるでしょうか。

596 ：Name_Not_Found：2006/02/06(月) 13:23:20 ID:???

>>595
もうちょっと日本語を何とかしてくれ・・・。

縦方向はline-heightで調節。
:hoverは何か書き方を間違えてるんだろう、普通はならない。

597 ：Name_Not_Found：2006/02/06(月) 13:25:22 ID:???

>>592
IEならHTCファイルを読み込んでビヘイビアとしてCSSからJavascriptが使えるけど
keyupは動作するのかわからない。

598 ：Name_Not_Found：2006/02/06(月) 14:30:42 ID:???

＞CSSからJavascriptが使えるけど
ビヘイビアってCSSからと言えるのか・・・？

599 ：Name_Not_Found：2006/02/06(月) 15:03:55 ID:???

ビヘイビアってなんだ？

600 ：Name_Not_Found：2006/02/06(月) 15:10:10 ID:???

>>599
これ（ビヘイビア）↓
http://msdn.microsoft.com/workshop/author/behaviors/behaviors_node_entry.asp
しかし597の言いたいのはexpressionじゃないのかという気がしないでもない。

601 ：Name_Not_Found：2006/02/06(月) 16:33:30 ID:Lz4BW1LM

borderをdottedに指定していて
画面をスクロールすると点線がまばらになったり
一部普通の線になってしまったりするんですが防止する方法はありますか？

602 ：Name_Not_Found：2006/02/06(月) 16:38:20 ID:???

>>601
IEだろ。
それはアプリケーションの描画能力の問題なんでCSS側では無理。
特に背景指定してると酷くなることが多いんで、
まぁ対処としては背景はなしにするとかposition指定と絡めないとか、
とにかく無理をさせないこと。
IE7で直ってるかどうかはシラネ。

603 ：Name_Not_Found：2006/02/06(月) 18:20:08 ID:z17Z42qf

失礼します。普通、回り込みは

<img src=" " align=right> なんたらかんたらなんたらかんたらなんたらかんたら

と記述すると思いますが（cssだとfloatで）、IMGタグではなくテクストを先に書く方法はありますか。思いついた方いましたら、おしえて下さい。

604 ：Name_Not_Found：2006/02/06(月) 18:22:26 ID:???

urlを指定する時のパスの書き方ですが、./を省略したほうがいいのか、しないほうがいいのか、どちらですか？

url(images/back.gif)

url(./images/back.gif)

省略しない場合、ブラウザによって認識しないとかありますか？

605 ：Name_Not_Found：2006/02/06(月) 18:27:52 ID:???

>>604
どっちでもいいから、どっちかに統一しろ。マジで。

606 ：Name_Not_Found：2006/02/06(月) 18:30:28 ID:???

>>603
イメージじゃなくてテキストのほうをfloatすればいいじゃまいか。

>>604
http://pc8.2ch.net/test/read.cgi/hp/1136304961/#574-604

607 ：603：2006/02/06(月) 18:38:12 ID:z17Z42qf

>>606

できればもう少しくわしく
・・やってみます！

608 ：Name_Not_Found：2006/02/06(月) 18:48:07 ID:???

>>607
p{width:70%;float:left;}

<div>
<p>　嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼。</p>
<p>　嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼。</p>
<p>　嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼嗚呼
嗚呼嗚呼嗚呼。</p>
<img src="f-b.jpg" width="200" height="200" alt="テスト">
</div>

まぁ実際のimgのfloat時とは動作が違うけどな。
imgの高さが終わったら下に流し込みたいんだったら、imgを先にするしかないとオモ。

609 ：Name_Not_Found：2006/02/06(月) 18:53:07 ID:???

>>608

610 ：603：2006/02/06(月) 18:56:34 ID:z17Z42qf

> imgの高さが終わったら下に流し込みたいんだったら、imgを先にするしかないとオモ。

むう　そうですか・・・、ありがとうございます！！

611 ：Name_Not_Found：2006/02/07(火) 00:50:16 ID:???

IE7のベータ2、一般提供されてるけど、誰か試した？
今回のはCSS標準に対応って言われてるけどどうかな。

612 ：Name_Not_Found：2006/02/07(火) 01:03:19 ID:???

>>611
試した。結構酷い。
もちろん良くなってる部分もあるが、この分だとまだまだIEには苦しめられそうだ。

613 ：Name_Not_Found：2006/02/07(火) 01:04:56 ID:???

どうでもいいけど「HTMLのコメント中に分岐書いて使うCSSを変化させろ」っていうのはIEらしさが出てるな、って思った。

614 ：Name_Not_Found：2006/02/07(火) 01:24:11 ID:pby2nBtR

http://www.css.mohei.info/ ←イケてるスタイルシートのまとめサイトなんですが、
このサイトでリンク張られてるところにhover状態にすると吹き出しのようなものが
現れます。これもCSSで実現可能なんでしょうか？

他にもこういうのを使ってるサイトがあるんですが、未熟な私には解析不能で・・
でもやってみたいのです。お願いします。

615 ：Name_Not_Found：2006/02/07(火) 01:30:46 ID:???

>>614
cssだけじゃ無理ですよ

ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html
こちらを参考にどうぞ

616 ：Name_Not_Found：2006/02/07(火) 01:34:53 ID:???

>>612
レポ乙
やっぱり、というか案の定ダメダメみたいだね。
IEの俺様仕様なんとかならんかねぇー。

617 ：Name_Not_Found：2006/02/07(火) 01:39:46 ID:pby2nBtR

>>615
ワオ！すんばらすぃ！
ありがとうございます！！ここのところ悩んでたことが解消しそうです。

618 ：Name_Not_Found：2006/02/07(火) 08:26:07 ID:???

>>612
以前のIEと共存できるのですか？

619 ：Name_Not_Found：2006/02/07(火) 08:42:36 ID:???

>>618
いや無理
ゲイツさんちのβは怖いから
何かあっても被害のないマシンでどうぞ

620 ：Name_Not_Found：2006/02/07(火) 08:53:44 ID:???

印刷時のページサイズ指定を行おうと思ったのですが
@page { size:landscape; } な@pageってIE6ではまだ対応してないんですかね？？
設定しても駄目でした・・

621 ：Name_Not_Found：2006/02/07(火) 09:13:12 ID:???

>>620
対応してないよ

622 ：Name_Not_Found：2006/02/07(火) 11:18:25 ID:???

>>618
簡単に出来る。
ただ、Web作成板でそんな質問を投げるようなWin初心者には難しいだろうし、教えられない。

623 ：Name_Not_Found：2006/02/07(火) 14:26:47 ID:???

わからないって素直に言えよ

624 ：Name_Not_Found：2006/02/07(火) 15:45:11 ID:???

>>623
煽って聞き出すつもりだろ。

625 ：Name_Not_Found：2006/02/07(火) 15:52:14 ID:???

そんな大仰なことしなくても既に併用で動くスタンドアロン版が出てる件。

626 ：Name_Not_Found：2006/02/07(火) 16:12:15 ID:rHyW1FxN

>>611
cf. http://pc8.2ch.net/test/read.cgi/hp/1078463560/898-
フィードバックよろしく。
Cascading Style Sheet Compatibility in Internet Explorer 7
http://msdn.microsoft.com/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp

627 ：Name_Not_Found：2006/02/07(火) 16:14:26 ID:???

スタンドアロン版のIE、IE6以降はXP以上じゃないと動かない。

628 ：Name_Not_Found：2006/02/07(火) 16:21:17 ID:???

IE7はそもそもXP以上です。

629 ：Name_Not_Found：2006/02/07(火) 16:25:40 ID:???

divの扱いについてなんですが、たとえばwebページ下端のフッタ部分を
divでくくってCSSで装飾しつつテキストメッセージを入れる場合、W3C的には

・<div class="footer">フッタだよ</div>
・<div class="footer"><p>フッタだよ</p></div>

のどちらがマークアップとして好ましいのでしょう？　それとも

・<p class="footer">フッタだよ</p>

としてしまうのがいいのかな。div厨と言われないようにするには、
他の明示的要素で代替できるときは極力そちらに寄せるべき、ということ
なのでしょうか。どうもそのへんまだわかってなくて…。

630 ：Name_Not_Found：2006/02/07(火) 16:33:07 ID:???

フッタの中身にもよるけど

<div id="footer">
<hn>フッタ（または「サイト情報」とか）</hn>
<p>なんとかかんとか</p>
</div>

<div id="footer">
<hn>フッタ（または「サイト情報」とか）</hn>
<ul>
　<li>なんとかかんとか</li>
</ul>
</div>

div使いたくないのなら上記マークアップからdiv抜いてhnやpとかulとかにid振ってやって

631 ：Name_Not_Found：2006/02/07(火) 16:34:55 ID:???

>>629
フッタの内容ってaddressじゃまずい類のもの？
俺は全部addressにしちゃってるけど。
ページ情報やメールアドレスや作成者や、全部addressでOKだからなぁ。

632 ：Name_Not_Found：2006/02/07(火) 16:38:28 ID:???

address要素内はインラインしかダメなので複数行にわたる場合はbrを使うしかないとか、
brは論理的じゃないとか、いろいろこだわる人はこだわるみたい。
またaddress要素はbody直下に置いたらどうのこうのとか、こだわる人は・・・・

633 ：Name_Not_Found：2006/02/07(火) 17:20:25 ID:???

スレ違いだっつーの

634 ：Name_Not_Found：2006/02/07(火) 17:22:24 ID:???

>>632
spanで区切ってbrもCSSで。
これならスレ違いでもあるまい。

635 ：Name_Not_Found：2006/02/07(火) 17:28:39 ID:???

つながりのない文章（？）を無理やり一行にまとめてspan+cssで改行させるのは
やっぱりこだわる人から見れば論理的ではないとか・・・・
と再びスレ違いの流れに

>>629
Strict-HTMLスレで聞けばいいんじゃない？まあ要するにスレ違いかと

636 ：Name_Not_Found：2006/02/07(火) 17:32:54 ID:???

>>635
Strictスレだと575の俳句や短歌もspan区切りという結論が出たばっかだぞ。
ていうか「繋がりのある文章」だと思う香具師は
<li><address>運営者名</address></li>
<li><address>メールアドレス</address></li>
<li><address>ページURI</address></li>
とか。区切りなくて単語の繋がりと考えるなら、全部一つのaddressでいいし。
まあどっちにしろスレ違いか。

637 ：Name_Not_Found：2006/02/07(火) 17:39:55 ID:???

>>636
俳句や短歌は本来区切りのない一つの流れだけど
それを表記上改行したいならspanで、というものじゃなかった？
本来区切りのあるものをマークアップでは区切りなしにして
それをさらにspanとcssで改行を入れるというのはまた別問題な気がする。

>>629のフッタの内容がつながりのあるものなのか単語の羅列なのか、
どういうものなのかわからないので>>629に関してはどうマークアップすべきなのか何とも言えないけど

638 ：Name_Not_Found：2006/02/07(火) 17:41:30 ID:???

なんでこのスレなんだよう。せめて初心者質問スレにしろよう。

639 ：Name_Not_Found：2006/02/07(火) 17:47:16 ID:???

>>629
どうでもいい事で悩むな。時間の無駄だ。

HTMLもCSSも、自分が表現したいサイトを作るための手段にすぎん。

640 ：Name_Not_Found：2006/02/07(火) 17:49:14 ID:???

ハードＭなので縛られるほうが好きなんです。

641 ：Name_Not_Found：2006/02/07(火) 17:51:02 ID:???

なるほどそうか

642 ：Name_Not_Found：2006/02/07(火) 17:55:04 ID:???

>>637
575に*意味的な区切りなんかない*ぞ。
たまたま575に収まる*一つの文章*を作るだけだ。
それと同様、ページ情報や制作者情報は*本当に区切りがあるのか*？
すべて*そのページの情報*という一つの意味区切りではないか？
そう考えられる人間だっている、というだけの話だ。

643 ：Name_Not_Found：2006/02/07(火) 18:01:05 ID:???

どうでもいい。
どうでもいい。
どうでもいい。
どうでもいい。
どうでもいい。

↓ここにいけ

【Web制作】 Strict-HTML スレッド 32
http://pc8.2ch.net/test/read.cgi/hp/1136304961/

644 ：Name_Not_Found：2006/02/07(火) 18:04:15 ID:???

>>643
どうでもいいスレ

645 ：Name_Not_Found：2006/02/07(火) 18:48:51 ID:???

はじめに、スレ違いカキコをしてしまい、すみませんでした。次からは
strict-htmlのほうに書くことにします。お答え下さったみなさん
ありがとうございました。

>>631,637
"xxxx 200x copyright reserved"な類の一文を入れてました。ですから
視覚表示の位置的にフッタにあるだけで、意味的にこれをフッタとすることが
いいのかどうかは自分でもよくわかりません。頼んできた人のレイアウト上の
要望をそのまま視覚化するときに、これは各ページ共通の部分なのでfooterに
してみた、という感じです。ともあれ、アドバイスありがとうございました。

646 ：Name_Not_Found：2006/02/07(火) 18:51:28 ID:???

完全にaddressでいいですな・・・

647 ：Name_Not_Found：2006/02/07(火) 19:10:25 ID:???

うん・・・・>>629が>>629で>>629な書き込みをするから！もう！

648 ：Name_Not_Found：2006/02/07(火) 21:37:09 ID:???

自分は>>630と同じに、
<div id="footer">
<hn>フッタ（または「サイト情報」とか）</hn>
<p>なんとかかんとか</p>
</div>
とか
<div id="footer">
<address>フッタ（または「サイト情報」とか）</address>
</div>
ってやっちゃう。

649 ：Name_Not_Found：2006/02/07(火) 21:39:17 ID:???

>>648
前者はともかく後者は酷い。div厨と言われても文句は言えない作りだぞ。

650 ：Name_Not_Found：2006/02/07(火) 21:47:51 ID:???

デザイン上の都合でどうしてもdivをレイヤー代わりに使わなきゃならんとか
そういう状況でもなければブロック要素に適宜プロパティ詰めちゃえ

651 ：Name_Not_Found：2006/02/07(火) 21:51:26 ID:???

>デザイン上の都合でどうしてもdivをレイヤー代わりに使わなきゃならん
これも正しくはないな・・・

652 ：Name_Not_Found：2006/02/07(火) 21:51:39 ID:???

まぁとにかく囲って詰めちゃえ！ってのは確かに楽だけどねぇ、、、

653 ：Name_Not_Found：2006/02/07(火) 21:59:03 ID:???

意味構造的な整理ならいいけど、
デザイン構造の整理にdivを使うのは
好ましくないってことかなあ。
基本的にdivベースで構造化されてると
ソースの可読性もあがって引き継ぎとか
ラクなんだけどねー。

654 ：Name_Not_Found：2006/02/07(火) 22:00:57 ID:???

>>653
おまいはコメントがなんのために存在すると思ってるんだ。

655 ：Name_Not_Found：2006/02/07(火) 22:02:19 ID:90s+WYtW

外部ファイルでＣＳＳを書いてるんですが、ファイアフォックスだとしっかり読み込んで、
ＩＥだと半分以上読み込んでくれないのは仕様ですか？

656 ：Name_Not_Found：2006/02/07(火) 22:03:29 ID:???

>>655
その現象は聞いたことがないな・・・
単にIE未対応のパタンマッチングを使ってるとかの話じゃないか？

657 ：Name_Not_Found：2006/02/07(火) 22:04:45 ID:???

外部スタイルシートの呼び出し方やスタイルシートファイルの中身を提示せずに
そんなことを言う人は
記述間違いをブラウザの仕様にしないでください！って言われればいいお！

658 ：Name_Not_Found：2006/02/07(火) 22:05:59 ID:???

>>655
当スレ上部のブラウザ別対応表をご覧ください。

659 ：Name_Not_Found：2006/02/07(火) 22:06:57 ID:???

IE7って単体のダウンロード配布しないんだろ？
ということはまだまだIE6の天下が続くのか・・

660 ：Name_Not_Found：2006/02/07(火) 22:15:41 ID:???

今ってIE5.5と6とどちらが多いの？

661 ：Name_Not_Found：2006/02/07(火) 22:17:26 ID:???

バグの多さの話か？

662 ：Name_Not_Found：2006/02/07(火) 22:27:54 ID:???

ｺﾞﾒﾝ、シェアのことです。

663 ：Name_Not_Found：2006/02/07(火) 23:28:02 ID:???

まぁ無駄のない論理構造の範囲内でどれだけできるか試行錯誤するのも楽しいし
div厨の謗りを甘んじて受けつつデザインにこだわるのも楽しいやね
大多数の閲覧者は見た目だけで判断してくれるから報われないのは同じだけど

シェアは圧倒的に6でしょ多分
IE5.5ってもう配布終了してから3年近く経つんじゃない？

664 ：Name_Not_Found：2006/02/08(水) 00:47:07 ID:???

div厨なんて謗ってるの、馬鹿だけだから、気にするな。

665 ：Name_Not_Found：2006/02/08(水) 09:55:57 ID:???

>>664
おまいはいつもそうやって遅れてくるのか？

666 ：Name_Not_Found：2006/02/08(水) 10:07:20 ID:???

CSSはここで聞けばいいのでしょうか。
ＩＥ7でa:hoverが効かないんだけど、この症状について分かる方いらっしゃいますか？

667 ：Name_Not_Found：2006/02/08(水) 10:29:58 ID:???

> おまいはいつもそうやって遅れてくるのか？

意味不明…

668 ：Name_Not_Found：2006/02/08(水) 10:31:33 ID:???

IE7ってもうでてんの？

669 ：Name_Not_Found：2006/02/08(水) 10:45:11 ID:???

>>668
βな。MS基準でβなんで出来は推して知るべし。

つか、自分で検証できないなら、βなんて使わなきゃ良いのに…

670 ：Name_Not_Found：2006/02/08(水) 11:37:31 ID:???

>>666
俺は入れられる環境じゃないけど
ttp://diary.sakura.ne.jp/
βでもちゃんと動いてるみたいだぞ。

671 ：Name_Not_Found：2006/02/08(水) 13:43:28 ID:???

β使いの教えて君

672 ：Name_Not_Found：2006/02/08(水) 14:02:05 ID:???

ul要素の左余白についてですが、これを全てのブラウザで0にしたいのです。
marginもpaddingも0にしているのですが、IEのみ左余白が残ってしまいます。
解決策はありますでしょうか？

673 ：672：2006/02/08(水) 14:05:57 ID:???

勘違いでした。

674 ：672：2006/02/08(水) 14:10:05 ID:???

IEのtext-align: centerでブロック要素までセンタリングされてしまうバグと、
他のブラウザ用のmargin: 0 autoでのセンタリングを併用してセンタリングしているのですが、
IEで見たときmargin: 0 autoの影響でul要素のみ意味不明な左余白が出来てしまうのです。
なにか良い解決策はないでしょうか？

675 ：672：2006/02/08(水) 14:14:12 ID:???

ul要素をdivで囲むことにより自己解決しました。
これでdiv厨への道へと進むことになってしまいました orz

676 ：Name_Not_Found：2006/02/08(水) 14:23:36 ID:???

思い通りのデザインにならないとき
デザインのためにhtml側を修正（div等の要素の追加）をするか
そのデザインを諦めるか
どういった妥協をするかによってあなたの将来が決まる

677 ：Name_Not_Found：2006/02/08(水) 14:27:18 ID:???

div要素やspan要素の追加程度であれば明るい未来。
空要素やbr要素、hr要素、table要素等を追加してしまうとお先真っ暗。
そのデザインを諦めることをきっかけに、さらに良いデザインが出来れば人生薔薇色。

678 ：Name_Not_Found：2006/02/08(水) 14:38:41 ID:???

漏れの将来が決まりました

679 ：672：2006/02/08(水) 14:38:59 ID:???

大して意味のあるセンタリングでもないのでやめました。

680 ：Name_Not_Found：2006/02/08(水) 14:40:39 ID:???

意味のあるセンタリングなんて皆無

681 ：Name_Not_Found：2006/02/08(水) 14:41:54 ID:???

CSS3のカラム要素が普及してきたら
俺らの今の努力やノウハウの大半は吹っ飛んでしまって
今までテーブルレイアウト専業だった人もホイホイ
CSSレイアウトに移行してくるんだろうなあ。
ま、web世界全体から見ればそれはそれでいいこと
なんだけども、どうにかこうにかfloatで培ってきた
自分の技術が数年で陳腐化するのは結構悲しくもある。

682 ：Name_Not_Found：2006/02/08(水) 14:47:56 ID:???

>>681
CSS2にしか対応していないブラウザのシェアが1%を切らない限り大丈夫。
数年でCSS3にシェアが完全に移行することはあり得ない。

683 ：Name_Not_Found：2006/02/08(水) 14:49:39 ID:???

そりゃ今あるブラウザにバグのないCSS3が自動的にｲﾝｽｺされるような仕組みがあれば移行できるがそんなことはあり得ない。

684 ：Name_Not_Found：2006/02/08(水) 15:06:05 ID:???

「CSS3ならテーブルレイアウトと同じノリで行けまっせ」て情報が広まったら
逆にテーブルレイアウターのCSS2レイアウト移行のインセンティブが下がる気はする。
じゃ、それまではテーブルでやろっと、みたいな。

685 ：Name_Not_Found：2006/02/08(水) 15:09:51 ID:???

「css3のカラム要素」ってxmlの拡張とかなんとか、よくわからないけど、
何らかの方法で今からでも使えたりしますか？
アホですけど怒鳴らないで優しく教えてください

686 ：Name_Not_Found：2006/02/08(水) 15:11:49 ID:???

自分のサイトをAjaxで作り直してるんだけどさぁ、
もう、Div厨とか言ってるのが馬鹿馬鹿しくなってきた。

HTMLをテキストをマークアップするとかじゃなく、
ただアプリケーションの一部を形作るコンピュータ言語として考えるしかなくなると、
判りやすさ、扱いやすさの為に、無駄（無駄じゃないんだけどさ）なdivを入れるのは、
”当然”だと思えてくる。

ここでいろいろ質問してる人への解答になれば良いけどな。

687 ：Name_Not_Found：2006/02/08(水) 15:13:10 ID:???

>>681
大げさだなあ。そんな風に書くほどのことでもないと思うけどなあ。

688 ：Name_Not_Found：2006/02/08(水) 15:22:17 ID:???

>>686
このスレに書くとまた荒れる気が。せめてcss・スタイルシートとからませて

689 ：Name_Not_Found：2006/02/08(水) 15:31:02 ID:???

>>684
そうなったらそうなったでtable厨が多い中、早くからStrict + CSSでデザインしてる漏れたちは重宝がられる。

690 ：Name_Not_Found：2006/02/08(水) 16:32:19 ID:???

まぁぶっちゃけある程度以上の技術を持っていれば
本人のポリシーと状況によって使い分けるだけなんだよな
普段tableでレイアウトしてる人でも
論理コーディングしろって言われればパッと作れるし

table厨とかdiv厨とか言って自尊心を満足させてるようじゃ
まだまだ中級者の域を抜け出せない子供って事よ
もちろん俺もなorz

691 ：Name_Not_Found：2006/02/08(水) 16:55:22 ID:???

そりゃ上級者になればそうだけど、tableレイアウトまたはdivレイアウトしか出来ない奴のことを『厨』と、
お前含めみんな言ってるんだろう。

692 ：Name_Not_Found：2006/02/08(水) 16:56:08 ID:???

俺は段組なんてしません！！！！

693 ：Name_Not_Found：2006/02/08(水) 16:56:24 ID:???

感動した

694 ：Name_Not_Found：2006/02/08(水) 16:58:33 ID:???

確かにやらないのがいいな、
段組レイアウトはフレームと同じで幅取られて嫌いだ・・・
自分が本文を見やすい幅に設定してあるのになあ。

695 ：Name_Not_Found：2006/02/08(水) 17:13:43 ID:???

>>691
そういうもんなのか
divがちょっとでも重なってたら即div厨呼ばわり
レイアウトにtable使ってたら脊髄反射でtable厨呼ばわり
――みたいな場面にばかり出会うから辟易してたわ

俺が回ってるスレの程度が低いだけなんだろうか

696 ：Name_Not_Found：2006/02/08(水) 17:14:46 ID:???

もういいからお前らどっか他のスレ逝けよ

697 ：Name_Not_Found：2006/02/08(水) 17:16:09 ID:???

>>695
人によっては本来の目的以外の使われ方をしていたら「厨」って呼ぶ人もいる。

698 ：Name_Not_Found：2006/02/08(水) 17:28:53 ID:???

つーか発注する側としてはそんなことどうでもいいから。
きちんと表示されれば何でもいい。

699 ：Name_Not_Found：2006/02/08(水) 17:31:23 ID:???

>>698
それだったらtableレイアウトで（ｒｙ

700 ：Name_Not_Found：2006/02/08(水) 17:32:37 ID:???

>>695
俺はむしろ、テーブルレイアウトだけ、divレイアウトだけしかできない香具師よりも、
それがいけないってわかってて敢えてそのレイアウトにする香具師のほうが
ずっと厨度は高いと思うがな。

701 ：Name_Not_Found：2006/02/08(水) 18:01:17 ID:???

クライアント次第ってこと。
それが答えであって、これ以上論じる必要はない。
クライアントがどうしてもtableレイアウトでって言うなら従うか断るしかない。

702 ：Name_Not_Found：2006/02/08(水) 18:02:24 ID:???

いつからプロがクダまくスレになったんだ？

703 ：Name_Not_Found：2006/02/08(水) 18:03:27 ID:???

・・・ちょっと待て、プロが来てて、なのに普段の回答レベルがアレなのか・・・？

704 ：Name_Not_Found：2006/02/08(水) 18:06:55 ID:???

ここにプロがいるわけねーだろ。

705 ：Name_Not_Found：2006/02/08(水) 18:08:41 ID:???

プロと言ってもピンキリな事を忘れるな

706 ：Name_Not_Found：2006/02/08(水) 22:44:40 ID:???

なんだ、　俺のことか？

707 ：Name_Not_Found：2006/02/09(木) 10:58:09 ID:k95Gdha0

>>1を読んだ上で、質問させていただきます。

body {
background:#000000;
}

.text{
background:#transparent;
}

にしても、記事の部分が白です。
考えられる原因を教えてください。

708 ：Name_Not_Found：2006/02/09(木) 11:09:19 ID:???

　　　！？

709 ：Name_Not_Found：2006/02/09(木) 11:24:40 ID:???

#！

710 ：Name_Not_Found：2006/02/09(木) 11:25:05 ID:???

微妙にやさしいな

711 ：Name_Not_Found：2006/02/09(木) 11:30:48 ID:zLPDzp2t

質問なんですけど
バグ回避？なのか知らないですが
co\lorというソースを使ってるサイトを見ました。

例えば
te\xt-indent:-10000px;
co\lor:#fff;
}

の様に使われてるんですが
どういう意味で使われてるんですか？
教えてください。

712 ：Name_Not_Found：2006/02/09(木) 11:36:45 ID:k95Gdha0

713 ：Name_Not_Found：2006/02/09(木) 12:09:09 ID:???

>>707
原因なんていくらでも考えられるが、
取り敢えず>>3のW3C CSS 検証サービスをやってみ。
>>709さんがやさしく指摘してくれてるんだけどな。

714 ：Name_Not_Found：2006/02/09(木) 12:57:08 ID:???

>>711
ttp://www.dithered.com/css_filters/css_only/escaped_selector.html
主に WinIE6 と WinIE5.x の解釈の誤差に適用。
しかし CSS ハックはバッドノウハウなので覚えても使わない方が良い

715 ：Name_Not_Found：2006/02/09(木) 13:16:07 ID:???

table要素に

table {
margin: 0.8em 3%;
}

のようにCSSでマージンを設定すると、Firefoxでのみ以下のように解釈されます。

・caption要素との間にマージンが空く。
・table要素と、その後に置かれている要素との間のマージンが通常よりも広くなる。
　（例えばtable要素の後にp要素を置いた場合、tableとpとの間にはそれぞれのマージンの合計分の間が空く）

確認したところ、IE及びOperaではこのようにはなりませんでした。
もし解決する方法や、Firefoxのみ別のCSSで読み込ませる方法がありましたら教えて下さい。

716 ：Name_Not_Found：2006/02/09(木) 13:21:15 ID:???

>>715
captionに関しては規定はなかったはずだからどっちが間違いとは言えない。
マージン合計は当然。
よって直すとしたらcaption側だけ。
CSS 振り分け Javascriptあたりでググれ。

717 ：Name_Not_Found：2006/02/09(木) 13:29:20 ID:???

>>715
すまん、captionの動作もFxが正しいみたいだ。
captionとその上の要素のマージンはcaptionに対して行う。
但しそれだとcaptionにマージンが当てられないブラウザが結構あるから
まあ振り分けた方が無難かも。

718 ：Name_Not_Found：2006/02/09(木) 14:16:01 ID:???

>>716,717
有り難うございます。

振り分けるのが無難との事ですが、なにやら面倒そうなのでやめておきます。
そこまで深刻な問題でもありませんし。

ただ、IEでは意図したように表示してくれる事を踏まえて、以下のようにCSSに書き加えてみました。

*>table {
margin-top: 0;
}

table>caption {
margin-top: 0.8em;
}

これで（captionを書いてある限りは）Operaでの表示は変わらず、Firefoxでもtableの上にマージンを空ける事が出来ました。
また、Firefox上で他の要素に比べて上下のマージンが広くなってしまうのは"当然"との事ですので諦めます。

719 ：Name_Not_Found：2006/02/09(木) 15:38:02 ID:zLPDzp2t

>>714
有難うございました。
邪道という事ですね。勉強になりました。

720 ：Name_Not_Found：2006/02/09(木) 16:19:51 ID:yjNcxMDU

すみませんが、文字の回り込みについて教えて下さい。

div#hoge { width:500px }
.hogehoge { float:right }

<div id="hoge">
　<img src="hogehoge.jpg" class="hogehoge">
　あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ
</div>

と記述すると、IE6ではちゃんと文字が画像に回り込むのですが、Ntescape7.1では上手く行きません。
どこが悪いのでしょうか…。

721 ：Name_Not_Found：2006/02/09(木) 16:32:14 ID:???

>>720
その部分だけのファイルだとIE6とN7.1で同じ表示になった。
その他のところで間違えてないか？

722 ：Name_Not_Found：2006/02/09(木) 16:32:41 ID:???

Ntescape7.1でもちゃんと回り込みましたよ。

723 ：Name_Not_Found：2006/02/09(木) 16:34:22 ID:???

┃⌒彡
┃冫､)…稲助?
┃` /
┃⊂
┃

724 ：Name_Not_Found：2006/02/09(木) 16:36:41 ID:???

>>720
<p>　あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</p>
これにしたほうが君のイメージなんじゃないかとも思うのだが。

725 ：Name_Not_Found：2006/02/09(木) 16:40:55 ID:yjNcxMDU

>>721さん
実際はdivの入れ子になっている中の方なので、そうかもしれません。
切り出して試してみます。
ありがとうございました。

>>722さん
確認ありがとうございます。
そうすると前後がぁゃιぃんですね…どこだろう。
回り込みはおろか、box内で改行さえせずに、
画像の下に１行でだーっとブラウザの無視して表示されてしまうんです。orz
地道に探してみます。

>724さん
験しに入れてみます。
ありがとうございます。

726 ：Name_Not_Found：2006/02/09(木) 17:14:16 ID:???

・・・「あやしい」で変換して「ぁゃιぃ」にならない・・・！（；；）

727 ：Name_Not_Found：2006/02/09(木) 20:20:09 ID:???

質問ですがCSSを月～日曜日まで７種類作って日毎に
切り替えて見栄えを変えたいのですが
どのようにやればよいでしょうか

728 ：Name_Not_Found：2006/02/09(木) 20:28:10 ID:???

jsでどうぞ

729 ：Name_Not_Found：2006/02/09(木) 20:33:52 ID:???

>>727
JavaScriptで曜日を取得して、曜日ごとに読み込むCSSファイルを変えればいいんですよ～。

730 ：Name_Not_Found：2006/02/09(木) 20:36:07 ID:???

毎日0時にCSSファイルを更新するという方法もあるｗ

731 ：Name_Not_Found：2006/02/09(木) 20:46:31 ID:???

>>730
それはjsでは無理だろ

732 ：Name_Not_Found：2006/02/09(木) 20:52:42 ID:???

スタイルシートをPHPにする手も。

733 ：Name_Not_Found：2006/02/09(木) 20:52:48 ID:???

手動で、という笑い処じゃないのか？ｗｗ

734 ：Name_Not_Found：2006/02/09(木) 20:52:58 ID:???

手動だよ

735 ：730：2006/02/09(木) 21:22:45 ID:???

>>733
もち手動。JavaScriptじゃ無理。
7個のCSSファイルを予めアップロードしておいて、毎日0時にcronでシンボリックリンクを更新する、
というのも考えたけど。

>>732
あー、面白いね。<link…href="../days_css.php"> とか指定して、text/cssで出力すればいけるね。
JavaScript使わない分、クライアントに左右されないし。サーバには左右されるけど。

736 ：Name_Not_Found：2006/02/09(木) 22:27:14 ID:0uMBSvPF

CSS　初心者ですが宜しくお願いします。
AAAAAAA
BCCCCCD
BCCCCCD
BCCCCCD
EEEEEEEE
↑のような形にしたいのですが
実際は↓のようになってしまっています。
AAAAAAA
BCCCCCE
BCCCCCE
BCCCCCE
BEEEEEEE　といたレイアウトになってしまって
います。
B{float:left;
margin-left: 0px;
width: 148px;
　padding: 0px;
　text-align: left;
　border: solid 1px #ff9900;
}

E{width: 440px;
hight: 50px;
　border-top:solid 1px #663300;
　padding-top:5px;
　clear:both;
}
どなたか御教授お願い致します。

737 ：Name_Not_Found：2006/02/09(木) 22:41:25 ID:???

CとDは秘密かい？

738 ：Name_Not_Found：2006/02/09(木) 23:25:27 ID:???

そーいえば、js使う事に異常に反対反応してた奴はどこ言った？

739 ：Name_Not_Found：2006/02/09(木) 23:26:24 ID:???

C{margin-top: 20px;
width: 440px;
hight: aut;
padding: 5px;
border: solid 1px #006600;
margin-bottom: 15px;
}
D{margin-left: 625px;
margin-top:0px;
width: 148px;
padding: 0px;
text-align: left;
border: solid 1px #ff9900;
}
です｡　すいません　で2番目の
縦のEはDの間違いです。
よろしくお願い致します。

740 ：Name_Not_Found：2006/02/09(木) 23:31:20 ID:???

>>739
ポジポジにするかマジマジにすればOK

741 ：Name_Not_Found：2006/02/09(木) 23:44:43 ID:8YpQxUjr

■■■　お勧めレンタルサーバー　■■■

格安で落ちまくるサーバーはストレス満載！
サーバーダウンしない安定サーバーを探せ！

Ａ：超安定サーバー。お勧め!!　　
　http://www.webspeed.ne.jp/　　
　http://www.wadax.ne.jp/
　http://www.ktplan.ne.jp/
　http://domainya.net/
　http://per.cssv.jp/
　http://poke1.jp/

Ｂ：ある程度の障害は大目に。　
　http://www.binboserver.com/
　http://s55.net/
　http://www.j-navi.com/
　http://web.arena.ne.jp/suite2/
　http://www.sakura.ne.jp/
　http://cpi.ad.jp/

742 ：Name_Not_Found：2006/02/10(金) 00:32:35 ID:7kLR5HEg

ttp://nothing.but.jp/sb/

↑ここで使われている、リンクされたimgの上にポインタを
置くとimgに1pxの枠が表示されるようにするには
どう記述すればいいですか？

743 ：Name_Not_Found：2006/02/10(金) 00:36:02 ID:???

img a:hover

744 ：Name_Not_Found：2006/02/10(金) 01:47:35 ID:???

>>743
逆だろ

745 ：Name_Not_Found：2006/02/10(金) 02:04:40 ID:???

firefoxだと正しく表示されるのにIEだとおかしい。
誰か助言頼む。
.menu-box {
float:none;
width:180px;
}
.menu-end {
float:none;
width:180px;
background-color:#00309C;
margin: 1px;
}
.menu-title {
float:none;
width:180px;
background-color:#BDCBF7;
margin: 1px;
}
.menu-subtitle {
float:none;
width:180px;
background-color:#999999;
margin: 1px;
}
.menu-item {
float:left;
width:90px;
margin: 1px;
}
.menu-margin {
margin:10px;
}

746 ：Name_Not_Found：2006/02/10(金) 02:05:46 ID:???

<div class="menu-margin">
<div class="menu-box">
<div class="menu-end">
<img src="img/spacer.gif" width="1" height="3" /></div>

<div class="menu-title">
<img src="img/pochi.gif" width="9" height="10" />hogehoge
</div>
<div class="menu-item"><img src="img/pochi.gif" width="9" height="10" />hogehoge</div>

<div class="menu-item"><img src="img/pochi.gif" width="9" height="10" />hogehoge</div>

<br class="c-left">
<div class="menu-item"><img src="img/pochi.gif" width="9" height="10" />hogehoge</div>

<div class="menu-item"><img src="img/pochi.gif" width="9" height="10" />hogehoge</div>

<br class="c-left">
<div class="menu-item"><img src="img/pochi.gif" width="9" height="10" />hogehoge</div>

<br class="c-left">
</div>

</div>

747 ：Name_Not_Found：2006/02/10(金) 02:06:26 ID:???

これでコンテンツ部分の表示を
hogehoge hogehoge
hogehoge hogehoge
hogehoge
にしたいんだけど、IEだと
hogehoge
hogehoge
hogehoge
hogehoge
hogehoge
になってしまう。orz

748 ：Name_Not_Found：2006/02/10(金) 03:51:09 ID:???

なんだその div 厨丸出しの HTML は。
ul と li に直して float させた方が楽だろ。

749 ：Name_Not_Found：2006/02/10(金) 03:57:18 ID:???

div厨っていうか……それ以前のような気もするが……。

750 ：Name_Not_Found：2006/02/10(金) 07:59:18 ID:???

目が痛い。

751 ：Name_Not_Found：2006/02/10(金) 08:48:12 ID:???

これならテーブルで組んだ方がマシ

752 ：Name_Not_Found：2006/02/10(金) 09:00:58 ID:???

740 有り難うございます
m(__)m

家に帰ったらやってみます

753 ：Name_Not_Found：2006/02/10(金) 09:20:33 ID:???

>>748
その方法を教えてくれ。

754 ：Name_Not_Found：2006/02/10(金) 09:28:21 ID:???

hogehogeはimgの説明なの？だったらdl,dt,ddのほうがいいんでない？

755 ：Name_Not_Found：2006/02/10(金) 09:31:16 ID:???

imgのファイル名がすべて同じであることとファイルの大きさからするとマーカーっぽい。
だとしたらやっぱりulとliを使って画像はスタイルシートで

756 ：Name_Not_Found：2006/02/10(金) 09:32:35 ID:???

あの、、ul, li と dt, dd って
どう使い分ければいいんでしょう？
いつもul, li ばかり使ってます…

757 ：Name_Not_Found：2006/02/10(金) 09:34:17 ID:???

>>756
Webサイト制作初心者用質問スレ Part 153
http://pc8.2ch.net/test/read.cgi/hp/1138784251/

758 ：Name_Not_Found：2006/02/10(金) 09:37:37 ID:???

>>754
hogehogeはテキストです。
ul使ったら

・hogehoge
・hogehoge
・hogehoge
・hogehoge
・hogehoge

ってキレイになるだけで

・hogehoge ・hogehoge
・hogehoge ・hogehoge
・hogehoge

って並べるようにはならなくないか？
もしかして俺のulの認識間違ってる？
<li style="float:left">とかしたらもしかして左詰になるのか？
ちょっとT&Eしてくる。

759 ：Name_Not_Found：2006/02/10(金) 10:53:17 ID:???

>>758
・・・・俺にはどう見ても754がul使えなんて書いてないように見えるのは目の錯覚か。

760 ：Name_Not_Found：2006/02/10(金) 12:04:17 ID:???

錯覚だな疲れてるんだろ
風呂入って寝ろ

761 ：Name_Not_Found：2006/02/10(金) 12:08:52 ID:???

添い寝が欲しい・・・

762 ：Name_Not_Found：2006/02/10(金) 12:37:33 ID:eeTGZpa8

スタイルシートで

img { border:none }

を指定してあるのですが、画像を貼ると周辺に3px程度の空白が出来てしまい位置合わせに苦労しています。
この隙間を０にする方法をどなたか教えて下さい。
よろしくおねがいします。

763 ：Name_Not_Found：2006/02/10(金) 12:39:02 ID:???

>>762
marginとpaddingを殺すんだ！

764 ：Name_Not_Found：2006/02/10(金) 12:45:34 ID:???

img { margin: kill; padding: kill }

765 ：Name_Not_Found：2006/02/10(金) 12:46:30 ID:???

* { margin:0px; padding:0px; }
とかはじめに書いておくといいと聞いたよ

766 ：Name_Not_Found：2006/02/10(金) 12:57:42 ID:eeTGZpa8

>>763-764さん
やってみます！

　　　　　＼　　　∧ ∧　　／￣￣￣￣￣￣￣￣￣￣
　　　　　　＼　（・Д・）＜　margin padding ぶっ殺す・・・・・・・・・！！
　　　　　　　　/ 二二 ]」　＼＿＿＿＿＿＿＿＿＿＿
　　　　　　 ┌||￣彡￣ ┬＝二＿_
　　　　　　　|　|＋２ch　o||　（（＿_（(二⊇〓〓〓〓〓〓（￣ｏ)
　　┌――┴┴―――=＝┬―┴――‐ヽ　　　　　　　　　￣
　　||　　⌒~~~⌒⌒~~°　　 |＿(∈∋__（＠」＿
　　/―――――――――＞‐―┬――――┬＞
　　 /○ ￣￣￣￣￣￣￣ ((*))}===）冊冊冊冊〕==）
　　λ (◎) (◎) (◎) (◎) ）ー／==ﾉ――――< ==ﾉ

>>765さん
それも書いてあるんです。
なのに画像の周囲に空白が…。orz
地道に1px、2pxとずらして対応しているんですがソースが汚くて…。

767 ：Name_Not_Found：2006/02/10(金) 12:59:40 ID:???

だったらimgに隣接する方のセレクタに世聞く取ってんじゃネーノ。

768 ：Name_Not_Found：2006/02/10(金) 13:00:29 ID:???

世聞く＞余白

769 ：Name_Not_Found：2006/02/10(金) 13:07:02 ID:eeTGZpa8

>>767-768さん
table禁止でdivの入れ子が深いからどこかでやらかしてるかも…。（；；）
もう少し調べてで直してきます。

ありがとうございました。m(__)m

770 ：Name_Not_Found：2006/02/10(金) 13:10:09 ID:???

>>769
CSSを書くときの基本。
ソースは思想的にできるだけStrictにすると*自分で理解しやすい*。
CSSは*まず全要素のスタイルのみ*を作る。
次に子孫セレクタ、隣接セレクタなどを作る。
最後に*別ファイルで*class/id毎の特殊スタイルを作る。
こうしていけばどこで間違いが出たか理解しやすい。

771 ：Name_Not_Found：2006/02/10(金) 13:21:46 ID:eeTGZpa8

>>770さん
ご教授ありがとうございます。
闇雲に上から作ってました。orz
一度バラして整理整頓してみます。

772 ：Name_Not_Found：2006/02/10(金) 13:30:37 ID:???

>>771
CSS直す前に一度div入れ子なんてない構造的な全要素の見本HTMLファイル作ってみ。
それに適用させてけばわかりやすい。
ttp://deztec.jp/x/etc/img/
こういうの。

773 ：Name_Not_Found：2006/02/10(金) 13:33:13 ID:???

>>771
Firefox 使えよ。
Domインスペクタで覗けば、すぐ判る。
さらにEditCSSプラグインとか使えば、

今まで俺は何をやっていたのだろう？？？

と思えるくらい、楽ちんだ。

774 ：Name_Not_Found：2006/02/10(金) 13:42:19 ID:eeTGZpa8

>>772さん　>>773さん
やっています。
ありがとうございます。m(__)m

775 ：Name_Not_Found：2006/02/10(金) 13:42:47 ID:eeTGZpa8

やっています　×
やってみます　○

でした。失礼しました。（；；）

776 ：Name_Not_Found：2006/02/10(金) 13:42:54 ID:???

や、やって「い」ます？

777 ：Name_Not_Found：2006/02/10(金) 13:44:00 ID:???

よ～く考えよう～♪リロードは大事だよ～♪ｸﾞｧｯ

778 ：Name_Not_Found：2006/02/10(金) 17:20:49 ID:???

背景画像の印刷の事で質問させていただきます
CSSにて背景画像を指定した＜TD＞タグがあるのですが
ブラウザ、印刷プレビューでは正常でもレーザープリンターで
印刷すると縮小されたり一部しか印刷されなかったり、というような
状況がでてるようなのです（NS7やIE6、Firefox1.5など）
自分ではインクジェットしかもっていないため確認できないのですが
どなたか同様な症状を経験された方はいらっしゃるでしょうか？

.komidashi {
width: 340px;
height: 24px;
padding: 0 10px;
background: url(images/komiback.gif) repeat-y;
border-left: 4px solid #0066ff;
}

<TD class="komidashi">あいうえお</TD>

779 ：Name_Not_Found：2006/02/10(金) 17:24:17 ID:???

>>778
プリントメディアはプリンタに依存する部分が大きいからなあ。
むしろ背景を完全になくしてやったほうが親切と言えば親切。
ttp://linkage.xrea.jp/article/2004/07/css2print.php

780 ：Name_Not_Found：2006/02/10(金) 17:32:31 ID:???

質問なんですが、display: blockは検索エンジンスパムにはならないでしょうか？

781 ：Name_Not_Found：2006/02/10(金) 17:43:42 ID:???

ならない

782 ：778：2006/02/10(金) 17:44:47 ID:???

>>779
レスありがとうございます
やっぱりプリント時は別ものと割り切る方がよいのでしょうか…
初めからそういう対処をして「意図的です」と説明しておけば
クレームにならないのかもしれませんね

783 ：Name_Not_Found：2006/02/10(金) 17:51:25 ID:???

フォントのサイズを設定をするには、「font-size」プロパティにより行います。
CSSのfont-sizeにサイズ指定（em/ex以外）を設定すると、Internet Explorerにてフォントサイズの変更が出来なくなってしまいます。
レイアウトを崩したくない時にはサイズ指定は有効となりますが、個々のユーザのことを考えると
フォントサイズは相対値として「em」 or 「%」等により指定するほうが良いでしょう。

smallやや小さいサイズ（絶対指定）
medium普通サイズ（絶対指定）
largeやや大きいサイズ（絶対指定）
smaller親要素に対して小さくサイズ（相対指定）
larger親要素に対して大きいサイズ（相対指定）
mm、cm、in、pt、pc、em、ex、pxサイズ指定

ある解説サイトに↑のようなことが書いてあったんですが、
試してみると、絶対指定とされている「small」でもIEや火狐でユーザー側の「ctrl＋や－」が効きました。

よくわからないんですが、
上記サイトに書いてあることが間違いということなんでしょうか・・・？

784 ：Name_Not_Found：2006/02/10(金) 17:57:53 ID:???

>>783
smallが絶対指定なのは合っているが、
絶対指定／相対指定というのは「ブラウザで変えられるかどうか」が問題ではない。
相対指定でも（IEでは）変えられないpxなんかもある。
ttp://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-size
まぁ指定しないのが一番だっつーことだ。

785 ：Name_Not_Found：2006/02/10(金) 18:00:04 ID:???

質問です。
どうしてもCSSで文字を表示したい場合はどうすればいいですか？

786 ：Name_Not_Found：2006/02/10(金) 18:01:09 ID:???

>>785
contentプロパティのことか？

787 ：Name_Not_Found：2006/02/10(金) 18:04:23 ID:???

>>784
素早く丁寧なレス、どうもありがとうございました！

788 ：Name_Not_Found：2006/02/10(金) 18:05:07 ID:???

contentプロパティかぁ・・・う～ん・・・びっみょ～ん・・・

789 ：Name_Not_Found：2006/02/10(金) 18:08:25 ID:???

今のところ、CSS単体で文字列を生成するのは
content、quoteしかなかろ。

790 ：Name_Not_Found：2006/02/10(金) 18:40:41 ID:???

はい。

791 ：Name_Not_Found：2006/02/10(金) 19:30:37 ID:RXRR4AO6

質問です。
positionを使うと、要素を別の要素に重ねるように配置できますわね。
これを使って、
flashコンテンツ（<object>タグの領域）に、文字を重ねてやろうと思ったのですが、
文字がflashに隠れてしまいました。

↑のような配置を実現することは可能なんでしょうか。

792 ：Name_Not_Found：2006/02/10(金) 19:34:37 ID:???

flashは扱ったことがないから自信ないけど、
z-indexで重ね順を指定しても駄目なら無理。
しかしflashだったら直接そのファイルに字を重ねりゃいいじゃんという気が・・・

793 ：Name_Not_Found：2006/02/10(金) 19:43:41 ID:eeTGZpa8

div で作ったボックスのボーダーの外側にCSSで影を付けて浮き上がったような視覚効果を出せ
と言われたんですが、そんな事って出来ますか？？？

794 ：Name_Not_Found：2006/02/10(金) 19:46:19 ID:???

外？
div重ねして外のdivに背景画像とか？
じゃなかったら発想を変えてボーダーまで画像化させて内側に背景画像として入れる。

795 ：791：2006/02/10(金) 19:46:56 ID:???

>>792
即レスありがとうございます。
今 z-index を試してみましたが、うまく行かないです……。(winIE6)

おっしゃる通り、flashに文字列を渡す方向性で考えてみます。

他の手法を思いつく方がいらっしゃいましたら、アドバイスください。
ありがとうございました。

796 ：Name_Not_Found：2006/02/10(金) 20:05:51 ID:eeTGZpa8

>>794さん
CSSの本をいくらひっくり返しても影なんか出てなくて途方に暮れていました。
入れ子にして画像を貼り込んでみます。
ありがとうございます。m(__)m

797 ：Name_Not_Found：2006/02/10(金) 20:41:21 ID:???

>>793
枠の色を工夫して陰影を付けるだけの話でしょ

798 ：Name_Not_Found：2006/02/10(金) 20:42:59 ID:???

>>791
無理

799 ：Name_Not_Found：2006/02/10(金) 21:14:45 ID:eeTGZpa8

>>797
いえ…それがわがままなおぢさんが
CSSでテキストに影がつけられるんだから画像や枠線にも影がつけられるはずだ！
コンテンツが持ち上がったようなイメージにしたいんだ！
っていうんです。（；；）

仕方がないのでボックスの両端に影が出るように色づけした
高さ1pxの超横長背景画像を作って盛り上げて見せたら何か納得したみたいです。（；；）

お騒がせしてすみませんでした。m(__)m

800 ：Name_Not_Found：2006/02/10(金) 21:15:28 ID:eeTGZpa8

あ、敬称が抜けました。
>>797さん　失礼しました。m(__)m

801 ：791：2006/02/10(金) 21:44:15 ID:???

>>798
thxです。完全にあきらめつきました。
flashに渡す、で行きまーす。

802 ：Name_Not_Found：2006/02/10(金) 22:05:05 ID:???

>>799
おまえ、それだったらボーダーはやっぱり影と一緒に画像化した方が
入れ子もなくなっていいぞ。

803 ：Name_Not_Found：2006/02/10(金) 22:13:44 ID:???

>>799
そんなおぢさんには、３Dメガネでもかけさせとけ。

804 ：Name_Not_Found：2006/02/10(金) 22:16:09 ID:???

そうします。

805 ：Name_Not_Found：2006/02/10(金) 22:18:47 ID:???

>>803
ワロタ。

806 ：Name_Not_Found：2006/02/10(金) 22:26:17 ID:???

>>799
こういうのでも見たんじゃね？

IE　ドロップシャドウフィルタ・シャドウフィルタ
http://www.openspc2.org/reibun/css/filter/007/index.html
http://www.openspc2.org/reibun/css/filter/008/index.html

Safari　text-shadow
http://www.openspc2.org/reibun/css/filter/005/index.html

807 ：Name_Not_Found：2006/02/10(金) 22:34:03 ID:???

別にsafariに限らずtext-shadowは一般CSS2だがな。実装はともかく。

808 ：Name_Not_Found：2006/02/11(土) 09:37:13 ID:twJLpWKo

>>802さん
一番外側の枠なんです、幅固定の。
なので、背景画像だけベターっと貼って他はいじらずに逃げて来ちゃいました。

>>803さん
３Ｄメガネってどこで売ってるかしら？
眼鏡を頭の上に置き忘れた隙にかけてやりたいです。（＞＜）

>>806さん
どうなんでしょう？（；；）
おぢさん「IEでしか表示できないサイトは糞」とかのたまってましたけど、
filterはIEだけしか効かないですよね。
何か影をつけられるはずだと思った根拠が、一部のテキストにつけてあった影らしいので
わがままを言っているだけでtext-shadowもfilterも存在は知らないのかもしれません。（；；）

アホな質問でスレ汚しすみませんでした。m(__)m

809 ：Name_Not_Found：2006/02/11(土) 10:47:58 ID:???

Flashだったりしてな

810 ：Name_Not_Found：2006/02/11(土) 12:40:12 ID:???

影付きロゴ画像だったりしたらおっさんワロス。

811 ：Name_Not_Found：2006/02/11(土) 13:06:04 ID:???

.＿_＿＿＿＿
|A |　B　| C　|
|　 |　　　| 　　|
|＿|　　　| 　　|
　　
こんな３段組をFloatで指定して
全体はmybodyで800pxで囲む

AとCは100px、left、right指定、
Bはleft, rightのmargin100を指定して幅600px

そして、Bに幅600pxの画像やTableをおくとBが一番下に落ちて中落ちした
状態になる。これはFloatの仕様上どうしようもない？

absoluteは使いたくないんだけど

812 ：Name_Not_Found：2006/02/11(土) 13:12:17 ID:???

absoluteを使いたくない理由を書かないことにはどうしようもない。

813 ：Name_Not_Found：2006/02/11(土) 13:13:51 ID:???

Aブロックを上に、BとCブロックを下にfloatで配置、margin、padding両方0にしてるのに、AとBCの間に微妙な隙間が・・・
2日間格闘して、
<div id="header>
<img src="...>
</div>
を
<div id="header><img src="...></div>
にしたらアッサリ直った･･･

初心者だもんでアレですが、divでブロック要素を囲む時は改行入れない方がよかですか？

814 ：Name_Not_Found：2006/02/11(土) 13:15:18 ID:???

ヘッダー、フッターが入ってきたとき、絶対値指定だと
ものすごく手間になるからです。

floatだと無理ってことですか？

815 ：Name_Not_Found：2006/02/11(土) 13:17:39 ID:???

>>811
それってIEだけの現象じゃないか？

816 ：Name_Not_Found：2006/02/11(土) 13:18:55 ID:???

>>813
それはfloatだとかdivだとか関係なく、
HTMLは改行が半角スペースとして認識される仕様なのだよ・・・

817 ：Name_Not_Found：2006/02/11(土) 13:27:53 ID:???

>>815

そうですね。FireFoxだと中落ちしません。
普通に使われるレイアウトだと思うのですがIEで
対応したい場合、Bにいれてやる画像やTableの幅を
小さくするしかないのでしょうか

818 ：Name_Not_Found：2006/02/11(土) 13:35:19 ID:???

>>816
http://www.w3.org/TR/html401/appendix/notes.html#notes-line-breaks

819 ：813：2006/02/11(土) 13:35:57 ID:???

>>816
そ、そうだったのですか･･･
じゃあ本当は一切改行しないで書くって言うのが一番なんでしょか？
後から見直しできなそう、

820 ：Name_Not_Found：2006/02/11(土) 13:36:15 ID:???

>>817
ttp://www.lucky-bag.com/archives/2005/08/re_css_no_nazo.html

821 ：Name_Not_Found：2006/02/11(土) 13:36:58 ID:???

Bのoverflowでなにかそれっぽいの指定すればいいんでないの?

822 ：Name_Not_Found：2006/02/11(土) 13:40:47 ID:???

>>819
>>818

823 ：Name_Not_Found：2006/02/11(土) 14:00:32 ID:???

>>811
リキッドで作れよ。
なんで、800pxなんてのに固定するのか理解に苦しむ。

824 ：Name_Not_Found：2006/02/11(土) 14:01:37 ID:???

主観で話すな

825 ：811：2006/02/11(土) 14:06:24 ID:???

見てもらったほうが速いかな
http://empire.sakura.ne.jp/index2.shtml

CSSはこんな感じで、幅910px、左右メニューが142px、中央が626となります
中央のmainmenuに626pxの画像やTableを置くとリンク先のようにIEだと下にストンと落ちます。
>>820とも違いますし（Clearもいれてみましたが×）、overflowもすべて試したがだめでした。
IEだと中落ち、FireFoxだときちんとおさまってくれます

div.Mybody {　　←全体をくくるコンテナ
width:910px;
margin:0 auto;
padding:0;
}
div.blocka {　←ヘッダー１
float: left; width: 910px; margin: 0px; padding: 0px 0.0em;
}
div.navi {　←ヘッダー２
clear: both; width: 910px; background-color: #312725; padding: 0px; font-size: 80%; margin: 0;
}
div.menu_l { ←左段
float: left; clear: left; width: 142px; padding: 0px 0.0em;
}
div.menu_r {　←右段
float: right; clear: right; width: 142px; padding: 0px 0.0em;
}
div.mainmenu {　←中央
margin-left: 142px; overflow: hidden;
}
div.blockf {　←フッター
clear: both;
}

826 ：Name_Not_Found：2006/02/11(土) 14:06:26 ID:???

リキッドにして何かデメリットあるか？

827 ：825：2006/02/11(土) 14:10:21 ID:???

リキッド知りませんでした。
調べて出直してきます。

828 ：Name_Not_Found：2006/02/11(土) 14:15:48 ID:???

文字サイズ大きくすると、レイアウトめちゃくちゃになるなぁ…
逆にIEじゃ、文字サイズ変えられないし。

829 ：825：2006/02/11(土) 14:16:29 ID:???

リキッドって可変タイプのことですか。
うーむ、width固定だとダメなのですかね？

830 ：Name_Not_Found：2006/02/11(土) 14:23:04 ID:???

>>829
別にダメじゃないけど、あまりお勧めはしないな。

環境や、個人差（目が悪いとか）で、ブラウザのサイズ、ディスプレイの解像度、
読みやすい文字サイズとか、バラバラだからさぁ。

私の環境だと、ちと文字が小さいんで、拡大するとレイアウト崩れる。
文字サイズ大きくしたときに右側に余白があるのはもったいないと言うか可読性が落ちる。

画像で文字表示されると、拡大すらままならなくて、しんどい事も多い。

それでも、そこしか無いってサイトなら使うけど、別の所があるなら、そっち行くかもね。

まぁ、CSSには直接関係無いけど、そんな感じ。
具体的にどうするか？ってのがここの本質なんで、これくらいで。

831 ：Name_Not_Found：2006/02/11(土) 14:26:25 ID:???

リキッドのデメリットってのはアレだろ、
タブレットPCとかの幅が狭いブラウザで見たとき、
その狭い幅をパーセントで区切ったりすると一つ一つのカラムの幅がとんでもなく狭くなったりとか。
min-width指定しとけばいいんだけど、IEが未対応で対処するとごちゃごちゃする。

832 ：Name_Not_Found：2006/02/11(土) 15:24:36 ID:???

3カラムも段がある場合だと、リキッドよりソリッドにして
必要ない部分は右端に追いやって消えたとしても問題ないつくりのほうがいいかもしれない。
できればリキッドで1カラムが最高だけどね。

833 ：Name_Not_Found：2006/02/11(土) 15:34:54 ID:???

>>825
おま・・・なんつーソースだ。
CSS以外のアレな部分でどう転ぶかわからんぞ・・・

834 ：813：2006/02/11(土) 15:37:05 ID:???

>>822
見てみたけどよくわからん･･･

誰かラムちゃんの様に訳してくれさい。

835 ：Name_Not_Found：2006/02/11(土) 15:58:57 ID:???

>>834
だっちゃ？
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#h-B.3.1
邦訳版。
しかし実際に実装してるかどうかはまた別の問題。

836 ：Name_Not_Found：2006/02/11(土) 16:03:33 ID:???

ということは仕様というよりバグというべきだな。

837 ：Name_Not_Found：2006/02/11(土) 16:11:51 ID:???

しかしこっちの規則のが優先される。
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#h-6.2
＞個々の改行文字CRあるいはタブ文字は、1つの空白文字で置き換える。

838 ：Name_Not_Found：2006/02/11(土) 16:20:43 ID:???

なんだそりゃ。

839 ：Name_Not_Found：2006/02/11(土) 16:47:21 ID:???

>>835
ありがとー。
改行は何もないのと一緒っていう扱いになればいいのにねえ。
ていうかブラウザによって解釈が変わるんだね･･･知らなかった。

みんなは色んなブラウザを入れてるの？

840 ：Name_Not_Found：2006/02/11(土) 16:52:30 ID:???

趣味も入ってるが色々と入れてる。
IE5.0～6.0、Firefox最新、Mozilla最新、Opera7～8.5、
NN4.75、N7.1、影鷹最新、ほぼテキストブラウザ最新。

841 ：Name_Not_Found：2006/02/11(土) 17:09:44 ID:???

>>840
システム不安定になったりしない？
IE4の頃の痛い思いを思い出した。

俺も色々入れようかなぁ？
入れる度に「標準のブラウザに･･･」が出るのかと思うとちょっとげんなり。

842 ：Name_Not_Found：2006/02/11(土) 17:15:56 ID:???

>>841
Win2kだがすこぶる快調。
Firefox標準で作っとくと物凄く楽だぞ。
標準．．．は設定で二度と出さないようにできる。

843 ：841：2006/02/11(土) 17:19:37 ID:???

>>841
そうか～。Firefoxは一応入れてあって、それで見てみたらfloatがぐちゃぐちゃだったorz
IEだと問題ないのになぁ。

ネスケとオペラ辺り入れようかな。

844 ：841：2006/02/11(土) 17:20:13 ID:???

ああ、自分にアンカー出してもうた。
>>842
です。

じゃ、ちょっとダウンロードがてら逝ってきます。

845 ：Name_Not_Found：2006/02/11(土) 17:30:30 ID:???

>>843
IE基準で作ると解釈メタメタだからあとで修正に苦労するぞ・・・いってら。
>>770-773

846 ：Name_Not_Found：2006/02/11(土) 18:24:57 ID:???

w3c謹製のAmayaを使え
文字化けしても気にするな

847 ：Name_Not_Found：2006/02/11(土) 18:37:11 ID:???

K-Meleon マジお薦め
ttp://f35.aaa.livedoor.jp/~mokeke/kmeleon.html

848 ：Name_Not_Found：2006/02/11(土) 19:11:37 ID:???

MSIE6.0互換モード／標準モードにて

<h1>h1</h1>
<div>
中身
</div>

このときの
h1 { margin-top : 50px; }
は余白が正しく50px取られるのに、

<div>
<h1>h1</h1>
中身
</div>

全く同じCSSで上マージンが47pxになってしまいます。
これの対処方法はありますでしょうか。

849 ：Name_Not_Found：2006/02/11(土) 19:20:27 ID:???

padding-top

850 ：Name_Not_Found：2006/02/11(土) 19:30:51 ID:???

たとえば
　（１）　h1, h2, /* h3, */ h4 { color: #000000;}
とか
　（２）　h1 { color: #000000; /* background-color: #ffffff; */ }
とか
　（３）　h2 { color: #ff0000; background-color: #ffffff; /* color setting */ }
とか
こういうコメントの使い方は何か不具合が出たりしますか？
上記はあくまで例なので
（３）は
h2 { ～ } /* ～ */
ってしたほうがいいよとかそういうのはなしでおねがいしますすみません

851 ：848：2006/02/11(土) 19:36:46 ID:???

>>849
paddingでも変わりません。

852 ：Name_Not_Found：2006/02/11(土) 20:21:32 ID:???

table内のfont-sizeがCSSで記述した値の影響を受けないので悩んでいたんですが、それは仕様だと分かりました。
みなさんはどうやってtable内のfont-sizeを指定しているんでしょうか・・・？

853 ：Name_Not_Found：2006/02/11(土) 20:25:19 ID:???

要素に片っ端から入れてから聞いてんのか？

854 ：Name_Not_Found：2006/02/11(土) 20:37:41 ID:???

>>852
font-sizeは指定しない。
それが一番。

855 ：Name_Not_Found：2006/02/11(土) 20:37:46 ID:???

>>852
td {font-size:;}

856 ：Name_Not_Found：2006/02/11(土) 20:49:33 ID:???

指定しないほうがいいとよく効きますが、
全部同じ大きさのfontだとメリハリがつけにく、つい使ってしまいます。
指定していない方はどうしているんでしょうか・・・？

td{ ←でできました！みなさん親切にどうもありがとうございます。

857 ：856：2006/02/11(土) 20:57:26 ID:???

ちなみに絶対指定はダメだと言われることが多いらしいので
一応相対指定にしておきましたが・・・。

858 ：Name_Not_Found：2006/02/11(土) 21:00:08 ID:???

>>856
本当にメリハリを付けたいのなら、見出しにのみ。
本文やテーブルの「中身」は、そんなコロコロメリハリを付けられたら却って見難い。

859 ：Name_Not_Found：2006/02/11(土) 21:34:11 ID:???

>>848
IEにてCSSを語らないで下さい。

860 ：848：2006/02/11(土) 21:38:06 ID:???

>>859
他のブラウザでずれないのは知ってますが、
IEでずれるのを直す方法をお訊きしています。

861 ：Name_Not_Found：2006/02/11(土) 21:47:11 ID:Ki/6dI90

ＩＥはね、＞　が使えないんだよ。だからね、

html table {}
とIEを想定してスタイルつけて、次に

html > table {}
と標準準拠のスタイルつけるといいんだよ。

862 ：Name_Not_Found：2006/02/11(土) 21:48:49 ID:???

position:relative;top:-50px;

863 ：848：2006/02/11(土) 21:57:08 ID:???

>>861
それは当然知っていますが、
逆に言えば振り分けをしないとならないバグという意味ですか。

864 ：Name_Not_Found：2006/02/11(土) 21:59:34 ID:???

そうだよ。振り分け必須。

865 ：848：2006/02/11(土) 22:04:00 ID:???

どういう条件のときに3pxずれるのでしょう。
ググるとそのほかにもIEで3pxずれる事例が出ているのですが。

866 ：Name_Not_Found：2006/02/11(土) 22:10:29 ID:???

ググって出てきたのなら張ってよ。
少なくともおいらの試した結果ではズレない。
ほかの要素が絡んでいるはず。

867 ：848：2006/02/11(土) 22:12:19 ID:???

ttp://www.google.co.jp/search?q=IE+3px+%E3%81%9A%E3%82%8C%E3%82%8B&start=0&hl=ja&lr=lang_ja&ie=utf-8&oe=utf-8&client=firefox&rls=org.mozilla:ja:official

868 ：Name_Not_Found：2006/02/11(土) 22:23:38 ID:GXLvzax0

そう

869 ：Name_Not_Found：2006/02/11(土) 22:25:17 ID:???

それじゃぜんぜん状況が分からないね。
余計な隙間が空く理由の一つに改行コードというのもあるよ。

870 ：848：2006/02/11(土) 22:32:39 ID:???

CR-LFでもLFでも同様です。

871 ：Name_Not_Found：2006/02/11(土) 22:35:36 ID:???

いや、種別じゃなくてあるかないか。
ソースを1行で全部書いてごらん。それで違うなら改行コードの問題ではない。

872 ：848：2006/02/11(土) 22:41:28 ID:???

変わりません。

諦めてIEにのみ3px足すことにします。
どうもありがとうございました。

873 ：Name_Not_Found：2006/02/11(土) 23:26:25 ID:???

質問じゃないんだけど、CSSを使ったテキストの画像置換技術について。
2003年頃から

FIR（Fahrer Image Replacementi）
　→本要素内に入れたspanでテキストをhidden＋本要素に背景画像とサイズを指定

LIR（Leahy/Langridge Image Replacement）
　→本要素で高さ0指定＋背景画像を指定＋上paddingを画像の高さに指定＋IE5用ボックスモデルハック

PIR（Phark Image Replacement）
　→本要素でtext-indent : -1000pxなどでテキストを画面外に追い出し＋背景画像とサイズを指定

と進化してきて、最近ではPIR後継ハックのNAFIRってのが登場しているらしい。
http://www.cssplay.co.uk/menu/naf_ir.html#nogo

PIRはこれまで非常によく使われていたのだけど、クリックしたときに
FireFox1.5で当該要素から画面外に隠したテキストまで繋がるかたちで
点線が出るようになったので、PIRにemをかぶせる形でこの問題を解消。
みんなどれか使ってる？　俺は一番古いFIRしか使ってなかったよ。

874 ：Name_Not_Found：2006/02/11(土) 23:38:36 ID:???

>クリックしたときにFireFox1.5で当該要素から画面外に隠したテキストまで繋がるかたちで点線が出る
つ【overflow:hidden;】

875 ：Name_Not_Found：2006/02/12(日) 00:31:49 ID:???

>>874
それだと読み上げブラウザの大半もテキスト部分をパスしちゃうのが問題で…。
FIRの2大問題点（無駄spanが増える、読み上げブラウザに対応できない）を
Fixする手法としてLIRとPIRが出てきたので、同じところに戻ってしまうのは
ちょっと避けたいところ。

876 ：Name_Not_Found：2006/02/12(日) 00:50:42 ID:???

>>875
そもそも音声メディアは別に指定汁。

877 ：Name_Not_Found：2006/02/12(日) 00:59:41 ID:???

さすがに点字はわからないからCSSも書けないが
screenとprintとauralは普通に分けろよ・・・

878 ：Name_Not_Found：2006/02/12(日) 01:13:27 ID:???

「メディアで分けろ」は筋論としては正しいと思うけど、よりエレガントな
ハック、ユニヴァーサルな(x)html+cssを求めたいってのも人情ではないかと。

Zen of CSSのDave Sheaは画像置換ハックについて情報集約してるんだけど、
彼がとりあえずの理想的ハックとする

・スクリーンリーダ対応
・画像オフ/CSSオン環境対応
・空タグ・無駄タグなし

の全てを満たせるようなコードはまだない、という状況みたい。
http://www.mezzoblue.com/tests/revised-image-replacement/
Dave Sheaのページ見て知ったけど、近年ではPIRだけでなくGLIR（Gilder/
Levin Method）というのもメジャーみたいだね。

879 ：Name_Not_Found：2006/02/12(日) 01:25:00 ID:???

MacOS9.1、IE5.1、ドリームウィーバー4を使用しているのですが、
スタイルシートで背景画像を表示する事が上手くできません。
講座サイトさんの記述をまるごとコピーして、ファイル名などを自分の
画像のものに書き換えて貼ってみたのですが…。

<html>
<head>
<title>背景画像を指定する</title>
<style type="text/css">

</style>
</head>
<body>
<div>
repeat-x はＸ方向、つまり横方向にだけ繰り返します。
</div>
</body>
</html>

↑ソースはこれです。
何が原因なのでしょうか。

880 ：Name_Not_Found：2006/02/12(日) 01:34:25 ID:???

>>878
おまえの「エレガント」という言葉は「手抜き」と混同されてるように見える。
メディア分けがエレガントに見えないということこそ技術の退行じゃないのか。

>>876
画像が全く表示されないんだとしたら、パスが間違ってるとしか思えない。
もしそれは見本で実際のCSSは別ファイルに分けてるんだとしたら、
*CSSファイルからの*相対パスじゃないとダメだ、確認してくれ。

881 ：Name_Not_Found：2006/02/12(日) 01:35:42 ID:???

>>879
ん？
ていうかもし本当にそれだけなら、
divのbackground-colorで背景を消してないか？

882 ：879：2006/02/12(日) 01:42:32 ID:???

>>881
すいません。
どういう事なのでしょうか…？

883 ：Name_Not_Found：2006/02/12(日) 01:51:12 ID:???

>>880
あとoverflow: hidden＋メディア分けした場合、確かにspeech/aural対応の
スクリーンリーダの問題は解決できるけど、画像オフ/CSSオンに設定した
視覚ブラウザ環境ではテキストと画像が両方消えるので、晴眼者の環境に
とってもまずいです（そういう制約の中で一番好ましいテクニックを探る、
一種の知的パズルの側面もIRハックにはあるのだろうと、色々なページを
読んでて思ったりしました）。

ま、「そもそも画像置換テクニックなんか使うな」というのが本当の筋論
なのかもしれませんね。上のどれかのテクニックを使ってるというコメントも
ここまでなかったし、俺がたまたま興味があって色々掘ってただけで、
現実にはメジャーな手法ではないのかも…。

884 ：Name_Not_Found：2006/02/12(日) 01:54:33 ID:???

>>882
bodyの上にdivが来てるから、divの背景色が背景画像を上書きしてるんじゃ
ないか、という指摘だと思うよ。ただ普通のブラウザだとdivの周囲にデフォルト
マージンが設定されるし、このソースだとdivは1行だけになるから画像が一定の
大きさなら紫色のdivブロックの周囲にはちゃんと画像が見えるはずだけどね。

885 ：Name_Not_Found：2006/02/12(日) 02:19:19 ID:???

>上手くできません。

これをきちんと書け。

886 ：879：2006/02/12(日) 02:32:01 ID:???

>>884
背景の画像は一行程の紫色で隠れるほど小さくなく、
解像度が72で15cm四方あるので見えると思います。
>>885
自分がやったのは書いてあることで全てなのですが…

887 ：Name_Not_Found：2006/02/12(日) 02:41:12 ID:???

　"　" を消したらどうなる？

888 ：879：2006/02/12(日) 03:00:24 ID:???

>>887
ありがとうございます！
それをやってみて上手くいかなかったのですが、
試しにファイル名だけでなく絶対パスを入れてみたら
ちゃんと表示されたようです。

889 ：Name_Not_Found：2006/02/12(日) 03:03:50 ID:???

質問です。
h1{
position:absolute;
left:10%;
right:10%;
margin:0px;
padding:0px;
}
これだとh1は自ずと横幅80%になる筈ですよね。
で、私はこれに念のためwidth:80%;を加えていたのですが、
そうすると、このh1で他に指定していた背景色、枠線が予想していた領域を右にだけ少しはみ出した形になりました。
h1の他にdivでも試しましたが同様でした。
そしてこのwidth:80%;を取り除くとうまくいきました。わざわざ横幅を指定する意味はないのですが、なぜこの横幅指定でおかしくなるのでしょう?

890 ：Name_Not_Found：2006/02/12(日) 03:16:15 ID:???

環境を書かずして・・・
>>1嫁

891 ：Name_Not_Found：2006/02/12(日) 03:33:07 ID:???

>>889
再現性がないな。
人に尋ねる前にHTMLとCSSをすっぴんに戻して試してくれないか。

すっぴんで問題があるのなら改めてどういう状況なのか
具体的にソースを書いて尋ねること。すっぴんなら簡単に書けるはず。
問題がないのなら、少しずつ余計なモノを加えていって、
問題が生じたところが問題なんだからそこを集中的に調べること。

892 ：889：2006/02/12(日) 09:38:57 ID:???

いや、すっぴんでとっくに試しての結果。
環境はうっかりしてました。win2k FIreFox。

893 ：Name_Not_Found：2006/02/12(日) 10:03:18 ID:???

position: absolute をパーセントで指定するやつ初めて見たよ。
激しく萎え。

894 ：Name_Not_Found：2006/02/12(日) 10:07:27 ID:???

>>893
何か問題でも？

895 ：Name_Not_Found：2006/02/12(日) 10:43:53 ID:???

すみませんdisplayの
run-inとinline-blockってどういう表示になるのでしょうか？
適用してみても反映されているのかよくわからなくて。
あと同じくdisplayの
tableとinline-tableはどう違うのでしょうか？

896 ：895：2006/02/12(日) 11:05:43 ID:???

run-inとtableとinline-tableは仕様書を見てなんとなく理解できました。すみませんでした。

897 ：889：2006/02/12(日) 11:56:10 ID:???

>893
894に同じく、なぜ?

898 ：Name_Not_Found：2006/02/12(日) 12:02:00 ID:???

× 適用してみても反映されているのか
○ 指定してみても適用されているのか

ただし、指定ではなく、宣言と言った方が直訳っぽいので、
仕様を英文だけで読んでいる人にも分かりやすい。

899 ：Name_Not_Found：2006/02/12(日) 12:28:32 ID:HZ22iMBu

http://www.sbcr.jp/vwalker/review/art.asp?newsid=6636

windowsのフォントサイズを大きくして(229%)、IEで↑のサイトを見ると、
CSSでいくら行間を広くしても、文字が重なってしまいます。

文字が重ならないようにするには、どうすればいいでしょうか。

900 ：Name_Not_Found：2006/02/12(日) 13:27:43 ID:???

>>899
line-heightを殆どpx指定にしてる。
実数値指定にしてみ。

901 ：Name_Not_Found：2006/02/12(日) 14:22:57 ID:???

>>889
試してみた。
再現しなかった。

902 ：Name_Not_Found：2006/02/12(日) 14:39:44 ID:HZ22iMBu

>>900
ありがとうございます。

a:link, a:visited, a:hover, a:active, body, dd, div, dl, font, h1, h2, h3, h4, h5, h6, hr, img, input, li, ol, p, select, span, table, td, textarea, th, tr, ul {
line-height : 30mm;
}

という風にしてみたのですが、やはり説明の部分
（安価で高機能なマザーの決定版～にとってはかなり魅力的な1枚だ。）
等が重なります。

上記の設定で何か間違ってる部分はありますでしょうか？

903 ：Name_Not_Found：2006/02/12(日) 14:41:00 ID:???

>>902
実数値指定の意味を全然わかってないんならまずテンプレを・・・。
line-height : 1.5;
とかの話だ。

904 ：Name_Not_Found：2006/02/12(日) 14:42:30 ID:???

>>902
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#line-height
読んで恋。

905 ：Name_Not_Found：2006/02/12(日) 14:44:40 ID:HZ22iMBu

>>901
ありがとうございます。

windows2000で、画面のプロパティ→設定→詳細からフォントサイズを229％にしています。
IEの文字サイズは最小で、cssを使用しない状態だと、
こちらの環境では重なってしまいます。

906 ：Name_Not_Found：2006/02/12(日) 14:48:37 ID:HZ22iMBu

すいません、実数値についてよくわかってませんでした。
勉強します。

907 ：899：2006/02/12(日) 15:04:22 ID:HZ22iMBu

実数値でやってみたのですが、いくら実数値を変えてみても

安価で高機能なマザーの決定版～にとってはかなり魅力的な1枚だ。

などの部分の文章全体の高さが変わりません。
スペックの部分などの高さは変わるのですが…

908 ：Name_Not_Found：2006/02/12(日) 15:14:09 ID:???

>>907
あとに書いたプロパティで上書きされるから、
またどっかで書き換えちゃってんじゃないの？
一旦line-heightを*全部*削ってみなよ。

909 ：Name_Not_Found：2006/02/12(日) 15:15:44 ID:???

あー、しかし
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0">
<TR><TD ALIGN="LEFT" VALIGN="MIDDLE">
<FONT CLASS="B"><b>安価で高機能なマザーの決定版</b><BR>
ひでーな・・・
td * { line-height : 1.0; }
を試してダメだったら>>908

910 ：Name_Not_Found：2006/02/12(日) 15:16:48 ID:???

間違えた。
td * { line-height : 1.0 !important; }
或いは
.B { line-height : 1.0; }

911 ：899：2006/02/12(日) 15:34:09 ID:HZ22iMBu

>>910
ありがとうございます！
td * { line-height : 1.0 !important; }
と
.B { line-height : 1.0; }
の両方で重ならず表示できました。

912 ：Name_Not_Found：2006/02/12(日) 16:26:36 ID:???

スタイルシートで背景画像を表示させるときにも、
その画像自体の重さ自体が
表示速度にかなり影響をあたえるのでしょうか。

913 ：Name_Not_Found：2006/02/12(日) 17:12:00 ID:Zkh5Ryny

text-indent: -9999px; で文字を画面外に飛ばします。
画像をOffにしてる人はCSSを切らないと閲覧できません。

これは仕様ですか？

914 ：Name_Not_Found：2006/02/12(日) 17:26:18 ID:???

>>912
当然。

>>913
それが嫌なら文字置き換えを止めるか別の置き換え方法に汁。

915 ：Name_Not_Found：2006/02/12(日) 17:48:01 ID:???

>>913
このスレのちょっと上のほうで出てるいくつかの画像置換テクニックを参照。

916 ：Name_Not_Found：2006/02/12(日) 18:06:22 ID:???

ある人から「閉じタグにもIDやクラス名を入れた方がいい」と
聞いたんですが、例えば

<div class="contents">ほげほげほげ</div class="contents">

みたいにしておくべきでしょうか？

917 ：Name_Not_Found：2006/02/12(日) 18:11:32 ID:???

＞閉じタグにもIDやクラス名を入れた方がいい
入れないで入れないで入れないで入れないで入れないで

918 ：Name_Not_Found：2006/02/12(日) 18:13:19 ID:???

>>916
その「ある人」に、情報源はどこか聞いてみたら？

919 ：Name_Not_Found：2006/02/12(日) 18:13:40 ID:???

>>916
こうしておけ…


<div id="header">
………
</div>

920 ：889：2006/02/12(日) 18:24:58 ID:???

すみません、協力してくださった方もいて嬉しい限りです。
ちょっと質問が悪かったので変えようと思います。
position:absolute;
left:10%;
right:10%;
なんてとき、width:80%;は加えたほうが良いのでしょうか?
また、893氏はなぜそう仰るのか。
質問ばかりですみません…

921 ：Name_Not_Found：2006/02/12(日) 18:28:02 ID:???

>>920
マジレスなんだが、absoluteにする必然性はあるのか？
ないんだとしたら、
margin-left : 10%;
margin-right : 10%;
こっちのがいい。

922 ：Name_Not_Found：2006/02/12(日) 18:31:33 ID:???

ああ、あと893な。俺は893じゃないけど、なんとなく言いたいことはわかる。
absoluteを設定した要素ってのは、通常フローから完全に取り残されてしまう。
つまり下手をすると通常フローに簡単に被ってしまう。
これをパーセントで指定するということは、環境によってそのabsolute要素が動くことを意味しており、
つまりpx指定なんかよりもずっと制作者が意図しないように
他の要素に被ってしまう確立が高くなる、ということだと思う。
特にleftとrightしか指定してない場合はabsoluteに意味があるのか？と疑ってしまう。
あとブラウザによっては（IEだったかな？）leftとrightを両方書いてると
rightを認識しないバグがあったと思う。

923 ：Name_Not_Found：2006/02/12(日) 19:05:29 ID:???

CSSを使ってメニューを全ページいっせいに変更することってできるのでしょうか？

例えば、
http://www.amazon.co.jp/
の上の方のメニューはどこのページに行っても同じのが表示されているんですけど
一番右の「スポーツ」という欄の右に何かを加えたいといったような場合です。

今日3時間くらい上の方に書いてある
ホームページ見てたんですけど全く分かりませんでした。

924 ：Name_Not_Found：2006/02/12(日) 19:29:33 ID:???

>>923
簡単なものならcontentプロパティでできるが
メニューみたいな大規模なものはPHPかSSI。

925 ：Name_Not_Found：2006/02/12(日) 19:29:59 ID:s+UUI3oT

DOCTYPE宣言の事ですが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
↑のように宣言すると標準モード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
↑のように宣言すると後方互換モード
でいいのでしょうか？
私が参考にしていた宣言表がＷＥＢで調べたら逆だったみたいで・・・

それとＷＥＢ製作の仕事で扱う場合などは標準モードが基本だったでしょうか・・・
作り貯めしてた作品を全部下の後方互換？宣言していて
これから全部手直ししなきゃと思うとｶﾞｸﾌﾞﾙ中です・・・（lllﾟДﾟ)血の気が・・・

926 ：Name_Not_Found：2006/02/12(日) 19:35:23 ID:???

>>925
うん、そう。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html
仕事はクライアント次第としか言い様がないだろうが、
この夏IE7で互換モードのバグがどれだけ潰されるかわからんし
標準モードにしといたほうがいいとは個人的には思う、ブラウザ間で合わせるの楽だし。
ついでにTransitional自体が後方互換のようなものだから、できるならStrictで。
尤も今StricttHTML4.01に直すくらいなら、XHTML1.1のほうがいいと思うが。

927 ：Name_Not_Found：2006/02/12(日) 19:51:31 ID:s+UUI3oT

>>926
レスありがとうございます

925の後方互換宣言をXHTML宣言に変えるだけで大丈夫なのでしょうか？
作った方式はHTML+cssですが・・・
あとできましたら各ブラウザ標準モード対応のXHTMLの実際のDOCTYPE宣言文も教えて欲しいです・・・

928 ：889：2006/02/12(日) 20:23:43 ID:???

>921-922
よくわかりました。ありがとうございます。

929 ：Name_Not_Found：2006/02/12(日) 20:27:04 ID:hSrPLAN2

質問です。
2カラム、3カラムのレイアウト手法はfloat, positionなどで実現することがわかったのですが、

田

↑このようなレイアウトを実現するのにfloatを使ってもうまく行きません。コツなどはあるでしょうか。あるいは、position:absoluteが無難でしょうか。

930 ：Name_Not_Found：2006/02/12(日) 20:34:10 ID:???

>>929
テーブルが無難だと思います

931 ：Name_Not_Found：2006/02/12(日) 20:35:20 ID:???

>>929
float: right でいけるだろ？
ブラウザの幅を狭くすると崩れるというのなら、
固定幅の div に入れ子しとけ。

932 ：Name_Not_Found：2006/02/12(日) 20:35:54 ID:???

ふろーとふろーと
くりあ
ふろーとふろーと

933 ：Name_Not_Found：2006/02/12(日) 20:46:10 ID:???

>>930-932
ありがとうございます、最初は>>932氏の方法で始めたのですが、もう一度試してうまく行けば報告に帰ってきます。

934 ：Name_Not_Found：2006/02/12(日) 20:51:35 ID:???

>>927
926のリンク先に宣言方法は書いてありまする・・・
そしてDOCTYPEを変えるだけじゃダメ。
ttp://www.nextindex.net/
あとIEバグ対策とか色々あるから、自信ないならやめといたほうがいいかも、
ただ勉強はしといて損はない。

935 ：Name_Not_Found：2006/02/12(日) 21:06:39 ID:s+UUI3oT

>>934
解説ありがとうございます
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ちょっと勉強する時間も無いのでURL付き↑に置き換えてcss調整して標準モードにしていこうと思います

936 ：933：2006/02/12(日) 21:23:12 ID:???

頭を冷やしたら無事できました。>>931氏ありがとうございました。
* {
margin: 0;
padding: 0;
}
#container {
width: 770px;
}
#top-left {
float: left;
width: 600px;
height: 200px;
}
#top-right {
float: right;
width: 170px;
height: 200px;
}
#bottom-left {
width: 600px;
float: left;
clear: both;
}
#bottom-right: {
width: 170px;
float: right;
clear: both;
}
/* さっきの3時間はなんだったのか… */

937 ：Name_Not_Found：2006/02/12(日) 22:09:03 ID:???

質問させて下さい。

<ol style="margin-left:0;">
<li>string</li>
</ol>

の様な表記をした時（実際にはCSSは外部ファイルにしています）、
IEではブロックの左側にくっつくように表示されるのですが、
Firefoxですとブロックとの間にマージンが取られてしまいます。
これをどのブラウザでも正しく表示させるためにはどのような表記にすれば良いのでしょうか？
ご教授お願い致します。

938 ：Name_Not_Found：2006/02/12(日) 22:14:06 ID:???

>>937
そういうときは
親要素とolとliにボーダーや背景色をつけて何が原因か探るといいよ。
とりあえずolにpadding-left:0;とかliにmargin-left:0;とかpadding-left:0;とか
親要素にpadding-left:0;とか

ってか
> Firefoxですとブロックとの間にマージンが取られてしまいます。
というのは親要素とolの間にマージンが、ってこと？

939 ：Name_Not_Found：2006/02/12(日) 22:14:29 ID:???

liにマージン設定

940 ：Name_Not_Found：2006/02/12(日) 22:21:21 ID:???

>>936
上下四つのハコにそれぞれ個別指定が必要か？
右と左の幅が違うというのなら、右と左の二つでよいはず。
そんな拡張性のないスタイルシートはお勧めできない。
幅一杯で勝手に下に落ちるんだからクリアなんて不要。

941 ：937：2006/02/12(日) 22:27:47 ID:???

<ol style="padding-left:0; margin-left:0;">
<li>string</li>
</ol>

とすることで一応の解決を見ました。
しかし、
<ol style="margin-left:0;">
<li>string</li>
</ol>
とするとIEでは正しく表示されるのにFirefoxでエラーが起き、
<ol style="padding-left:0;">
<li>string</li>
</ol>
とするとFirefoxでは正しく表示されるのにIEでエラーが発生します。
中々難しいようですね。

>>938さん>>939さんありがとうございました。

942 ：Name_Not_Found：2006/02/12(日) 22:28:28 ID:???

エラーが発生！？

943 ：Name_Not_Found：2006/02/12(日) 22:36:38 ID:???

>>941
* { margin : 0; padding : 0; }
これがCSSデザインの基本。

944 ：937：2006/02/12(日) 22:40:21 ID:???

>>942
エラーと言うか、左側に空欄が生まれてしまう状況です。

>>943
そうなんですか。
今までもテーブル使ってサイト作りはしていたのですが、
XHTML化が必要になり、CSSをほぼ一から勉強している真っ最中です。
勉強になりました。
ありがとうございます。

945 ：Name_Not_Found：2006/02/12(日) 22:42:27 ID:???

>>944
だったらここの記事が役に立つやも。
ttp://deztec.jp/lecture/rn/index.html

946 ：Name_Not_Found：2006/02/13(月) 10:53:01 ID:???

head要素とtitle要素にdisplay:block;を指定した場合
画面内にtitle要素が表示されるのと表示されないのと、どっちが正しい動作ですか？

947 ：Name_Not_Found：2006/02/13(月) 11:05:47 ID:???

えっ？

948 ：Name_Not_Found：2006/02/13(月) 13:24:11 ID:???

ええっ？！

949 ：Name_Not_Found：2006/02/13(月) 13:59:15 ID:???

マジすか！

950 ：Name_Not_Found：2006/02/13(月) 14:07:25 ID:???

>>946
その質問をしているあなたが、根本的に間違っていると思いますよ

951 ：946：2006/02/13(月) 14:56:34 ID:???

>>947-950
レスどうもありがとうございます。
どういった点が根本的に間違っているのでしょうか・・

Windowsしか持っていませんが
IE5.0とIE5.5ではtitle要素が表示されず
FireFox1.5とOpera8.5ではtitle要素が画面内（body内？）に表示されたのですが・・

って、レスを返すのが遅くなってすみません。もういないかな・・

952 ：Name_Not_Found：2006/02/13(月) 15:13:46 ID:???

>951
firefoxは<html>にborderなどを適用してもレンダリングされるのに対し、
ieでは<html>では効かず<body>に適用するとレンダリングされるのと根っこは同じか。
firefoxは<html>以下をレンダリングする仕様で、
ieは<body>以下をレンダリングする仕様ってことかな。
www.w3.org/TR/CSS21/のDefault style sheet for HTML 4.0を見たら、
> html, 中略, body, 中略, { display: block }
と
> head { display: none }
があってhtmlやheadにもスタイルの適用・上書きが可能っぽいから
firefoxの動作が正しいのかも試練。
と思ったらieだと<html>にスタイルが適用されないのはバグ辞典にあった。
> Internet Explorer (Windows) CSSバグリスト
> ttp://cssbug.at.infoseek.co.jp/detail/winie/b142.html

適当な思い込みなので詳しい人よろ↓

953 ：Name_Not_Found：2006/02/13(月) 15:16:24 ID:???

<div>あいうえお</div>
<div>おえういあ</div>
ってやって
===========
あいうえお
おえういあ
===========
ってなるのをdivのまま
===========
あいうえおおえういあ
===========
って表示する方法があれば教えていただけないでしょうか？

954 ：Name_Not_Found：2006/02/13(月) 15:17:09 ID:???

>firefoxは<html>にborderなどを適用してもレンダリングされるのに対し、
>ieでは<html>では効かず<body>に適用するとレンダリングされるのと根っこは同じか。
IEでも普通にHTMLにborder出ますが、何か。

955 ：Name_Not_Found：2006/02/13(月) 15:17:40 ID:???

>>953
テンプレ読んだ？

956 ：Name_Not_Found：2006/02/13(月) 15:18:15 ID:???

>>954

>>952
> Internet Explorer (Windows) CSSバグリスト
> ttp://cssbug.at.infoseek.co.jp/detail/winie/b142.html
IE5.x限定らしい

957 ：952：2006/02/13(月) 15:29:02 ID:???

>954
ごめん956が言ってくれてるけどie6未満の話っす

952は適当な思い込みなので詳しい人よろ↓

958 ：Name_Not_Found：2006/02/13(月) 15:31:55 ID:???

お前らそこに辿り着いてて何でこれを出さないんだ
http://cssbug.at.infoseek.co.jp/detail/winie/b090.html

959 ：Name_Not_Found：2006/02/13(月) 15:32:53 ID:???

>>958
詳しい人乙

960 ：Name_Not_Found：2006/02/13(月) 15:37:14 ID:???

>>951
コンテンツとしてタイトル文字を出したいのなら、
<body>の内側に、<h1>とか、<title>とは違う要素で入れてスタイル定義すべき。

961 ：Name_Not_Found：2006/02/13(月) 15:38:18 ID:???

>>960
h1要素には～を書くべきだ、title要素には～を書くべきだ、といった方面の人だと思う。

962 ：Name_Not_Found：2006/02/13(月) 15:38:55 ID:???

ふむ

963 ：946：2006/02/13(月) 16:07:35 ID:???

>>952-961
レスどうもありがとうございます。
CSSバグリストに載っていたんですね。
根本的に間違っていました。本当にすみませんでした。

964 ：Name_Not_Found：2006/02/13(月) 16:10:43 ID:???

根本的に許す

965 ：Name_Not_Found：2006/02/13(月) 16:17:04 ID:???

「根本的に」は流行らない

966 ：Name_Not_Found：2006/02/13(月) 17:59:43 ID:???

本当に許す

967 ：Name_Not_Found：2006/02/13(月) 22:16:51 ID:TUTfUHe8

なんか作ったリストが指定の位置からずれて表示
（マウスオーバーすると指定した位置に収まる）されるバグが
あったんスけど

本に載ってたheight;1％を指定する技で解消出来ました。
ホリーハックって言うんですね。
考えた奴すげえ。

968 ：Name_Not_Found：2006/02/13(月) 22:19:04 ID:???

>>967
きみはすばらしいよ！きみのレスはぜひテンプレにいれよう！

969 ：Name_Not_Found：2006/02/13(月) 22:57:04 ID:???

CSS Hack集
http://www.jaist.ac.jp/~m-tamura/article/web/css/csshack
"通"御用達、CSSハック
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

WinIEのfloatのバグを回避する
http://www5e.biglobe.ne.jp/~bill/the/css/holly.html

970 ：Name_Not_Found：2006/02/13(月) 23:33:35 ID:???

>>967
そういうのは枝葉。これが幹。
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
例えば、
display: inline-block;
みたいな、ちょっと訳分からんようなスタイル宣言でも良い。
上記MSサイトにあるように、スクリプトで
....currentStyle.hasLayout
を読んでみて、true であるかどうかが重要。

971 ：Name_Not_Found：2006/02/13(月) 23:48:31 ID:TUTfUHe8

ハズッ。未熟でした。

972 ：Name_Not_Found：2006/02/14(火) 00:05:59 ID:dRx0Keny

CSSのプロパティで、background-attachment , position の
値を fixed にするとスクロールが滅茶苦茶重くなるのは何故ですか？

973 ：Name_Not_Found：2006/02/14(火) 00:07:54 ID:???

>>972
IE以外でも？

974 ：Name_Not_Found：2006/02/14(火) 00:08:42 ID:???

>>972
内容は動かす、でも背景は動かさない、
という動作のためにCPUがいっぱい計算が必要になるから。
普通にWindowsでもアニメーション機能ONにすると重くなるでしょ。

975 ：Name_Not_Found：2006/02/14(火) 00:23:08 ID:dRx0Keny

>>973
当然。Firefoxも重い。

>>974
まさか、スクロールするたびにレンダリングしてるとか？

976 ：Name_Not_Found：2006/02/14(火) 00:29:47 ID:muUp+BHf

外人のオッサンが書いているｃｓｓの本は使えるのでしょうか？
おススメがあったら教えてください。
自分は初心者に毛が生えたような生えないような感じです。

977 ：Name_Not_Found：2006/02/14(火) 00:30:47 ID:???

ブラウザによっても違いが出るよな。

IEだとtableがやたら多い場合にスクロールがガクガクするし。
gecko系とOperaだと問題なかったり。

978 ：Name_Not_Found：2006/02/14(火) 00:39:27 ID:dRx0Keny

まぁ、原因は良く分からないですね。
とりあえずユーザスタイルシートで対処します。

979 ：Name_Not_Found：2006/02/14(火) 01:04:39 ID:???

＞まさか、スクロールするたびにレンダリングしてるとか？
？(´д｀)

>>976
本なんか買う必要ないよ。
ttp://www.k2.dion.ne.jp/~spag/
ttp://pasokon-yugi.cool.ne.jp/website_kouza/
ttp://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
ttp://hp.vector.co.jp/authors/VA022006/

980 ：Name_Not_Found：2006/02/14(火) 01:15:40 ID:???

>>976
出版物だと『web標準デザインテクニック即戦ワークブック』は
結構いいと思う。Dan Cederholm著で監修はミツエーリンクス。

981 ：Name_Not_Found：2006/02/14(火) 02:35:09 ID:???

次スレッド誰か立てて。私はホスト制限で立てられない。
新スレッドに移行するまでのつなぎの間に合せには、下記も再利用できる。
http://pc8.2ch.net/test/read.cgi/hp/1137080639/l50

982 ：Name_Not_Found：2006/02/14(火) 10:54:15 ID:???

あ～～あ　俺も駄目だった。

　　↓次の人　ヨロ

983 ：Name_Not_Found：2006/02/14(火) 12:07:50 ID:???

/* CSS・スタイルシート質問スレッド【52nd】
http://pc8.2ch.net/test/read.cgi/hp/1139885961/

間違ってたら悪い。

984 ：Name_Not_Found：2006/02/14(火) 12:14:21 ID:???

>983
乙ｶﾚｰ

985 ：Name_Not_Found：2006/02/14(火) 12:26:26 ID:???

あ、スレタイトルからしてコメント閉じ忘れてるや・・・orz

986 ：Name_Not_Found：2006/02/14(火) 12:32:33 ID:???

1000とったやつが*/書けばいい

987 ：Name_Not_Found：2006/02/14(火) 12:40:26 ID:8SJ7hGng

>>983さん　乙華麗様です

988 ：Name_Not_Found：2006/02/14(火) 12:42:37 ID:8SJ7hGng

基本的な質問ですみません。

１つの外部cssの中に　body { hogehoge }　が多数書かれていて
値がそれぞれ違う場合、HTMLの中ではどのbodyが優先して使われますか？

989 ：Name_Not_Found：2006/02/14(火) 12:44:44 ID:8SJ7hGng

例えば、

body { text-size:10px }

～中略～

body { text-size:20px }

～中略～

body { text-size:30px }

が　hogehoge.css　に記入されていた場合、
この　hogehoge.css　をリンクしたhtmlの文字サイズは何ポイントになるでしょうか？

990 ：Name_Not_Found：2006/02/14(火) 12:54:04 ID:???

自分でちょっと試してみ？
3分で出来るから。

991 ：Name_Not_Found：2006/02/14(火) 12:56:24 ID:???

>>989
px と pt という単位について調べてみろ.

>>990
試しちゃ駄目。
IEはCSSの実装がバグだらけでIEで動いたからといって正しい挙動とは限らないから。

適当に書いてブラウザで見て動いた、それで満足するのが一番悪いやりかた。
となりの人が使ってるブラウザだとデザインが崩れたり文字が極端に小さくなってるかもしれないからね。

992 ：Name_Not_Found：2006/02/14(火) 13:01:19 ID:???

text-sizeって何？

993 ：Name_Not_Found：2006/02/14(火) 13:01:53 ID:???

>>989
最後の値で上書きされる。
これはインポートされた場合でも同じ。

994 ：Name_Not_Found：2006/02/14(火) 13:04:58 ID:8SJ7hGng

>>910さん
実験では一番下に書かれた物が採用されてました。

>>991さん
ひーん。どうしたらいいんでしょう。（；；）

995 ：Name_Not_Found：2006/02/14(火) 13:07:18 ID:8SJ7hGng

>>991さん
pt　と　px　は書き間違いでした。orz
何pxになるか知りたかったんです。（；；）

>>992さん
font-size:　ですorz

>>993さん
ありがとうございます。
複数のファイルをリンクした場合でも一番下が有効ですか？

996 ：991：2006/02/14(火) 13:11:00 ID:???

>>995
そりゃ、一番下に書いたのが適用されるだろ。。。

997 ：Name_Not_Found：2006/02/14(火) 13:15:36 ID:???

「カスケーディング」スタイルシートだからね

998 ：Name_Not_Found：2006/02/14(火) 13:19:03 ID:8SJ7hGng

適用されました！
ありがとうございますー。｡･ﾟ･(ﾉД`)･ﾟ･｡

999 ：Name_Not_Found：2006/02/14(火) 13:31:16 ID:???

/* CSS・スタイルシート質問スレッド【52nd】
http://pc8.2ch.net/test/read.cgi/hp/1139885961/l50　*/

1000 ：Name_Not_Found：2006/02/14(火) 13:33:11 ID:???

次スレの>>1乙

1001 ：１００１：Over 1000 Thread

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。