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

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/1150984440/

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

【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第5版
　http://pc8.2ch.net/test/read.cgi/hp/1144494359/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でイケてるデザインサイト 33
　http://pc8.2ch.net/test/read.cgi/hp/1149858258/

【仕様書】
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

【解説など】
・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/

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

Q2: tableなどブロック要素をセンタリングするには？　text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に5.）をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

>>1 おつ

スレッド移行済んだら、こちらへも宜しくね。

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

【まとめサイト】
http://web2ch.s31.xrea.com/?CSS （現行スレッドを変更）
http://web2ch.s31.xrea.com/?CSSLog （過去スレに追加）

>>11
ローカルルール等リンク先更新総合スレッド には報告済み。
つか重複させちゃったごめんね。

>>12
http://qb5.2ch.net/test/read.cgi/operate/1151690537/144
リンク先ＵＲＬだけでなく、リンクの文字列も挙げないといけません。
ここでは「CSS・スタイルシート質問用スレッド」って奴ね。
次からはよろしく。

知るかそんなもん・・・

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1136858
の人と同じことがやりたいのですが、
どなたかご存知の方いらっしゃいませんでしょうか？
よろしくお願いいたします。

http://pc8.2ch.net/test/read.cgi/hp/1153839182/
からの誘導です

>>15
ttp://www.stylish-style.com/csstec/ultimate/fix-foot.html

>>16
教えていただいたやり方で出来そうです。
ありがとうございました。

<TABLE width=100% CELLSPACING=0 cellpadding=0 border=0>
<TD>
<IMG src=images/title-1.gif>
</TD>
</TABLE>
<TABLE width=100% CELLSPACING=0 cellpadding=0 border=0>
<TD>
<IMG src=images/title-2.gif>
</TD>
</TABLE>
簡略化してますがこういうソースでtitle-1.gifとtitle-2.gifの間に余白が出来てしまいます。
スタイルシートでどうにかなりますか？

とくに余白は出来ないが、はて？
</table>と<table>の間に変な空白とか入ってね？
つーかこのスレでそんなこと聞くと…。

そうなんですよね。余白できないはずなんですよね。
一応スタイルシートでどうにかなりませんか？と付け加えておきましたが。

table{margin:0px;}
でどうよ。
それか、
<TABLE width=100% CELLSPACING=0 cellpadding=0 border=0>
<TD>
<IMG src=images/title-1.gif>
</TD>
</TABLE><TABLE width=100% CELLSPACING=0 cellpadding=0 border=0>
<TD>
<IMG src=images/title-2.gif>
</TD>
</TABLE>
にするとどう？

>>18
そのマーク付けだと、上の表と下の表は別々の物とみなされるから、
離れるのは当然のような。やるなら

<table 〜>
<tr>
<td><img 〜></td>
</tr>

<tr>
<td><img 〜></td>
</tr>

</table>

でしょ。

ご親切にどうも。両方試して見ましたが修正できません。
画像と画像の間に2,3pxほどの余白ができてしまいます。
しかも、最初正常に表示されていたのですが、突然隙間ができるようになりました。

だとしたら、htmlじゃなくて画像じゃね？
わからん。

だんだん上手く動作しないことに腹が立ってきました（笑）
今チェックしたところでは画像も正常です。
がんばってみます。

Firefoxだとくっつくね〜
不思議だね〜
IEのバグの一種みたいなもんなのかなぁ

<td>と<img>の間の改行のせいとか、なんか余計なスペースがはいってるとか

まあとりあえずテンプレでも読んでみたら。
>>3の一番上のURLの「table内に画像を隙間無く敷き詰めるには注意が必要です」とか。

tableで囲む理由が分からない。

全部改行とっぱらって、1行にしたらくっついたよ〜

>>18
img { display: block; }

なんだ、一連のこのﾗﾍﾞﾙの低さは！！

ラベルよりも11:51の発言数の多さにびっくらこいた。

ハックでIE5.ｘにだけ読み込ませるCSS作ってるんですけど

background: url(img/hoge.jpg);

の部分だけ読み込んでくれません。
何か別の書き方などをしなければならないんでしょうか？

そうです

>>34
Win2k IE5.0/5.5の共にOK。
単にパス指定間違えてるとかじゃないの。

>>36
そうですか。。。
よく確認してみます。
わざわざ有難うございました！

夏だねぇ。

んだんだ

質問です。お願いします。

width:200px;
にborder:1px solid #000;
をつけるとIE7では202pxになります。合計で。

他のブラウザでもそうですか？ちょっと自分のパソコンではないので
インストールして確認ができませんのでお願いします。

正しいのがどちらかというのも重要ですが、実際のfirefox,nn6,opera辺りの動作が知りたいです。
お願いいたします。

>>40
テンプレぐらい読めよｸｽﾞ

>>41
うざいです。
関係無いレスはしないでください。

>>42
うざいです。
関係無いレスはしないでください。

自己解決しました

>>44
氏ねよゴミ

質問です。お願いします。

width:200px;
にborder:1px solid #000;
をつけるとIE7では202pxになります。合計で。

他のブラウザでもそうですか？ちょっと自分のパソコンではないので
インストールして確認ができませんのでお願いします。

正しいのがどちらかというのも重要ですが、実際のfirefox,nn6,opera辺りの動作が知りたいです。
お願いいたします。

>>46
>>4

許可とってインストールしなさい

>>47
さすがです。ありがとうございました。

ulを使っているのですが、borderを使い全体を囲いたいのですが

・項目１
・項目２

の項目１と項目２の部分しか囲ってくれません（・を囲ってくれない）
divを使って、無理やり囲うしか方法はないのでしょうか？

>>3のWeb標準化Tipsのul要素とol要素のブラウザごとの違いを参照のこと。

>>51
サンクス
>>3に書いているこれ書いとけば全部ちゃんと表示される設定を書いたけど、IEでは変化が見られなかったので、自分で解決しました

ul{
margin-left:0px;
padding-left:40px;
}

li{
margin-left:-15px;
}

をしたらIE、FF、OPで同じように表示されました

ぷ

ぷ ...._｡　　　　　　　iiii

>>53-54
屁こくなよ

>>53-54
通報しといた

屁くらいこかせてくれよ

トイレでな

>>57
sine

ぷ

よーく見てごらん！
>>54はボウリングして居るのだよ。

pu

pukiwiki

こんにちは。
ttp://www.tohoho-web.com/css/index.htm
ここを参考に、テキストに影をつけるべく text-shadow や　filter: Shadow()
をやってみたんですが、うまくきません。
このサイトの例がまちがってるんでしょうか？

できました。
上記サイトには何の説明もないのですが、
width: 100%;
というの追加したとたん成功しました。
このwidthをとると効果がなくなります。もはや意味不明でウｓ。

widthかheightを指定してやらないといけない。
それにそもそもIE以外はだめ。

くそ！　3秒遅れた。

>>66
ありがとうございました。

ぶ

IEでフロートしたリストのマーカーが消えてしまうバグなんですけど、
ttp://cssbug.at.infoseek.co.jp/detail/winie/b106.html
対処法を見つけてらっしゃる方いたら教えてください。

フロートした要素は強制的にブロック要素になります。
子要素としてリスト要素をマークアップしてください。

HTMLをいじらなきゃならないんですね・・・どうもorz

CSS用語のブロック（レベル）要素とは:
http://www.w3.org/TR/CSS21/visuren.html#q5

display: list-item; → display: block;
（つまり、CSS用語のブロック要素 → CSS用語のブロック要素）
なのに、>>71はおかしな事を言っている。

属性セレクタ
hage[hoge="moge"]などは
mogeの部分が完全一致じゃないとだめなんですか？
*とか使えますか？

値にかかわらず属性hogeがあるものを選択したいときは、
hage[hoge]

> hage[hoge="moge"]などは
> mogeの部分が完全一致じゃないとだめなんですか？
そうです。

仕様書もよく読みましょう。
http://www.y-adagio.com/public/standards/tr_css2/selector.html

>>75
レスどうもありがとうございます。ちょうどそこを見てました。
img要素のsrc属性に.jpgが含まれる場合、や
a要素のhrefにhttp://が含まれる場合、といった指定をする方法は
用意されていないということでしょうか。

>>76
あるけど、CSS3だ。

そうなんですか。。どうもありがとうございました。

>>76
JPEG画像や外部リンクを選択したい場合は
classを振るのがよいかと。

http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/index.html
「既存のCSSに埋めるだけでデバッグが楽になりそうな画期的なテクニック」

これためしにcssファイルの頭に追加してみたけど何もおこらない
Win IE6だけど、なんでなんでしょうか

>>80
IEは確かoutlineに対応してなかった希ガス

>>79
レスどうもです。やっぱりそれしかないんですね。
classを振るのが面倒くさいやら何やらで
なんとか別の方法がないかと探していたんですが
classにします。

>>82
そが嫌なんだったらJSとDOMを使う方法もあるけどな。

@import "constructor.css";
@import "index.css";

こんな感じで全部のページに適用部分と個別の部分と分けています。
とりあえずデフォの設定がブラウザごとに違うので初めに全ての要素のデフォを設定しようとしてます。
*{
margin:0;
padding:0;
line-height:100%;
list-style:none;
border:0;
}
でもこれだとIE7がtable関連要素にline-heightをおかしな感じで適用して、
文字の上部がちょん切れてしまいます。NNでは問題なしです。

line-height:100%;だけtable関連以外の要素にだけあてたいのです。
全ての要素をカンマ区切りで書くしかありませんか？それとも
!table,!td,!th,!tr,!col,!colgroup,!caption{}
とかできますか？さすがにtable関連以外全てを書くのは面倒ですよね。

なんかいい方法ありませんか？よろしくお願いします。

<body>
<div id="wrap">
<div id="main">hoge</div>
<div id="menu">hoge</div>
</div>
</body>
として、
#main{float:left;}　#menu{float:right;}
（※各divのwidthは指定してます）
で横2段組のレイアウトにしたいんですが、
menuのdivに<p>hoge</p>を入れたとき、
N7だとmenuのdivが数ピクセル下にずれてしまいます。
IE6だと大丈夫。
<p>じゃなく、<div>、<img>とかテキストなら問題なく表示されます。
これは仕様なんでしょうか？
あちこち検索したんですが、これに当たる記述を見つけられませんでした。
どうぞお力を･･･。

>>85
float:leftとmargin-leftの組み合わせではどう？

>>84
table関連だけline-heightを別に指定するんじゃダメなの？
td, th { line-height: 120% } とか

>>87
そもそもIEがイマイチな気がするんです。
table関連にline-heightを当てたときの処理が。
なのでtableには何も当てず。がいいのです。

しようじょう無理なら主要な
p,dt,dd,liだけに当てて解決ってことであきらめますけども。

IE7は入れられないからシラネ

float:leftとmargin-leftの組み合わせでもダメみたいです。
IEでも激しく崩れちゃいました･･･。
2カラムテンプレートを配布してるサイトを見ても、
左右のボックスをfloat:left/right;で振り分けてあるし。
シンプルに書いてもどうしてもダメなんですよね。
どこが悪いんだろ･･･。

名前とアンカー忘れた。
>>90は>>86へのレスです。

>>84
line-height:1.0にしてみ。

>>85
* {margin:0;padding:0;}

>>92
やってみましたが変わりなしなようです。
まああきらめます。

もう一つ気になることがあるのでお願いします。
*{font-size:20px;}
としておくと後から読み込む個別のcssで#main p{font-size:12px}
とかしても20pxサイズで表示されてしまうんですよね。

IE7,NC7ともに同じ動作なので正常なのかもしれませんが。
当然inportant使えばどうにでもなりますがね。

なんか不便ですよね。*{}なんでこっちが強いのか。
他のmarginとかpaddingとかだと*{}の方が強いなんて現象は起こらないのに。

どう思われますか？

>>93
あー、出来ました！
ありがとうございます。
<p>のマージンが親divに影響してたんですね。
<p>のマージンを使った位置制御は出来ないってことか。
なんか変な仕様･･･。

・・・・・なんか違うHTMLにしてたようだが、できたならよかった。

>>94
ならない。
おまえPCおかしくしてね？

>>96
あれ？なんか食い違ってたんでしょうか？
だったら、なんかスミマセン･･･。

>>94
ならない。
おまえ頭おかしくしてね？

>>97>>99
PCレベルの問題ですか？
*{}を書いてるのはconstrutor.cssです。
#main p{}を書いてるのはindex.cssです。
index.htmlから読むのはbt-index.cssです。
bt-index.cssの中身は
@import "constructor.css";
@import "index.css";
です。

仕様から考えるに、同じレベルの優先度。つまり*{}が両方に書いてあった場合は
後から読んでるindex.cssが強いはず。
しかしどちらを先に読もうとも
#main pの方が局所的な指示なので強いはずです。よね？

実際font-size以外は上記の理屈で動きます。
でもfont-sizeだけダメなのです。

winXP IE7 NC6 dell inspiron700mノーパソです。
特に解決せずとも困りはしないので私としては別にいいですが、
よかったら皆さんで何かの足しにでもしてもらえれば。
ありがとうごあいます。した。

・・・・いるよな、こういう「自分の書き方や自分のマシンは正しいはず！」って奴・・・・

擬似フレームでページを上下に三分割して、上部にメニューを配したいと思います。
画像を使ったメニューにしたいので、フレームのサイズをピクセルで指定したいと
考えているのですが、テンプレにあるサイトによると、%でしか指定できないとありました。
ピクセル指定できる何か良い方法はないでしょうか？

ありません

>>101
いやお前だろそれは。ごちゃごちゃ言わずにやってみれば解決するって。
100の手順通りにファイルを準備してfont-sizeとlist-styleでやってみろって。
IE7,NC6ともに*{}を覆せないから。
list-style:outside decimal !important;
あの後試したら結局何をやっても*{}に勝てなかった。
IE7がベータ版ってこともあるけど、NC6はベータ版じゃないしね。

いや、せっかくレスくれてるのにごめんけど。
イライラするわ。

夏だなあ

＞IE7,NC7ともに同じ動作なので正常なのかもしれませんが。
＞IE7,NC6ともに*{}を覆せないから。
いつのまにバージョンダウンしたんだろう。

さっき

>>104
俺IE7使ってるけど、上書きできるんだが、
何が違うんだろ。

20pxサイズで表示されるのは
#main p　の"さらに子要素"ってことはないよね？
そのpの中にあるaだとかstrongだとか。
それが20pxになるのは当たり前なんだが。

>>106
ごめんね。誤記。NC6が正しい方。
>>108
いや、本当に俺のPCがおかしいのかもしれないよ。
さらに子要素ってことではないの。
list-styleもおかしいしね。

ちなみにHTML4.01strictDTD。確かstrictに限らずDTDをまともに宣言するとしないとでは・・
あ、NC6でも同じ減少だからそんなの関係ないか。

>>104
実際試したけどならないよ

あんたの書き方かPCか頭に問題あるんだろ

可哀想な人がいるな・・・

夏だなあ・・・

>>110
ありがとう。
今物凄く簡単なの作ってやってみた。
普通に上書きできた。

ちょっと調べてみる。

>>113
もう来ないでね。

俺の頭に問題があったよ。解決した。
どうやら俺の頭がブラウザを超えちまったのが原因だった。
ごめん。

節々で癇に障るエラソーな物言いがあったが、
最後に素直に自分の間違いを認めて謝ったのには、好感が持てる。
真の夏厨はここでファビョるか、最後まで間違いに気付かない。

>>103
ありがとう。

やはり頭のせいだったか
暑いからな

<p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>

これではソースの編集時に見づらいので

<p>ああああああああああああああああああああ
ああああああああああああああああああああ
あああああああああああああああああ</p>

としたいです。でもそうすると微妙な空白が生まれます。
white-space:nowrap;を使えば空白はなくなりますが、自動改行までなくなります。
なにかいい手はありませんでしょうか？

エディタで右端で折り返す設定にしたらいいんでね

説明が足りませんでした。
それだとあれです。
<dt>hogehoge</dt>
　　　　　　　　<dd>ああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああ
</dd>

になりますよね。でも

<dt>hogehoghoge</dt>
　　　　　　<dd>あああああああああああああああああ
　　　　　　　　ああああああああああああああああああ
　　　　　　　　あああああああああああああああああああ</dt>

としたいのです。

>>121
無理

ありがとうございました。あきらす。

<dt>hogehoghoge</dt>
　　　　　　<dd>あああああああああああああああああ<!--
　　　　　　-->ああああああああああああああああああ<!--
　　　　　　-->あああああああああああああああああああ</dt>

sine

>>124
確かに実現はしてるけど、すごく無駄な事してるよな。

ええ、とても

>>124naruhodo!

納得したのかよ！

がっかりだよ！

すいません。おかしな現象がおきて困っています。
<body id="page-name">
<div id="main">
</div>
<div id="side">
</div>

外部のcssファイルに
#page-name #main
{height:900px;}
#page-name #side
{height:600px;}
としてます。

#sideか#mainのheightに1000以上を与えると、全てのcssが無効化されて、
まるで
<lin rel....のhrefに存在しないcssを指定したかのような状態になってしまいます。

他のページではないのです。そのcssファイルにだけで起こる現象です。
どこかでおかしな記述をしてるはずなのですが、見つかりません。
そもそも桁が増えるとエラーになってスッピン表示なんて変ですよね。

アドバイスお願いします。

書いた質問よ〜〜く読み直してごらん。

もの凄いおかしいですこれ。
どこが問題なのかともう一つファイルを用意して、
ある単位ごとにコピペカットで減らしながら探してました。

すると凄いおかしいんです。25行目に改行があるかないか。
というか25行目が改行のみかどうかでスッピンになったり、
適用されたり。

なんですかね。これは。おかしな文字がまぎれてるんですかね。
改行コードって指定ないですよね。cssは。
\nのみじゃなくてはいけないなんてないですよね？

わかりません・・・orz

タ・・・ス・・・・・ケ・・・・・・・・・テ

>すると凄いおかしいんです。25行目に改行があるかないか。

こう言われてもな、俺たちには２５行目が解らないんだよ。
エスパー降臨まで待っていて頂戴な。

直った！

#side
{/* ここにメッセージ */
height:120px;
}

メッセージが原因だったようです。
cssに２バイトダメだなんて知りませんでした。
多分入れ方がいけなかったのでしょうね。

/* あいうえお */
ではなくて、
/*
あいうえお
*/
だとエラーになりませんでしたし。

　なんだい　ただの馬鹿かよ。

>>134
なんか魅力的・・・・好きかも
>>136
orz

オーッホッホッホ　女王様とお呼び　ﾋﾟｼｯ

>>138
(*‘ω‘ )

擬似フレームとIEセンタリング対策の混同は可能でしょうか？
対策のためにセンタリング用のdivを挿入すると擬似フレームが解除されてしまいます
IE対策さえ考えなければ現状で問題ないのですが･･･

現状
<body>
<div class="menu">
</div>
<div class="content">
</div>
</body>

body{margin-top:10px; margin-right:auto; margin-bottom:20px; margin-left:auto; padding:0px; width:760px;}
.menu{height:14%;overflow:auto;}
.content{height:85%;overflow:auto;}

表とかはいってたんじゃねーかな

menuとcontentの両方にmargin-right:auto; margin-left:auto; width:760px;を加え、
bodyにtext-align:center;を入れることでなんとかなりました

ただ重複分が多くて何だか醜いソースに･･･
divで指定するわけにはいかないしなぁ

div高さをautoに設定し、その中に入っているリストulの高さを
divの高さに連動(divの高さ100%に)させたいんだけどどうすればいいのですか？

<DIV><UL></UL></DIV>

>>143
他に何もなくて浮動してなければdivの高さ＝ulの高さになるはずだが。

cssを見てみると、

body{
***:***;
}

のようになっているんだけど、
属性の記述が見やすいという理由だけで"}"の位置がずれてるの?

>>146
？？？
body{***:***;}
じゃないのはなんで？って事？

#main p strong{}
これだと
<div main>
<div chaptar1>
<p>
</div>

のpにも効果が出てしまいますよね。
できれば
#mainの直下のpにのみ効果を出したいのです。
strictにあこがれてるので、css側で解決をしたいです。

賢者様宜しくお願いいたしますm(__)m

一行目
#main p strong{}
ではなくて
#main p{}
でした。

お詫びして訂正いたします。

ｵｽ!

>>148
ｵｽ!

ｵｽ!
お願いします！

>>148
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#child-selectors
IEは対応してないけど

>>147
そういうこと。日本語下手でｽﾏｿ
スペースは無視されるんだよね?

>>154
まあスペースのせいでバグるUAもあるがな。
しかし一般的な書き方は{と}を改行する方だと思うがな。
プロパティの多い人は特に。

スペースよりはタブを使わね？

ヒント：区別されない

タブってｗｗｗ
お前アホ？
スペースとタブに何の違いがあるんだ？ｗｗｗ

こいつスペースの意味すらわかってねえだろｗ
マジでウッケルｗｗｗ

>>158
別に普通に同じだからこそ部を選択することもあるが、
それより志村、名前欄

>>158
初心者スレで煽ってそのまま書込んだな、このお馬鹿さん。

>>160
初心者スレで煽られてそのままこっちに書き込んだな、このお馬鹿さん。
そんなかわいこぶっても付きやってやんねえぞ。

>>161
早く死ねよゴミ

>>162
生きろ
そなたは美しい

名前がゴミ

質問です
ul,liでメニュー用の画像を1枚の画像でロールオーバーさせて
a:hover時の色を変えてますが、リンク後の表示されているページの
メニュー画像をhover時の画像のままにしたいのですが、
2枚分の画像が潰れて表示されたりで、うまくいきません。

HTMLソースは
<ul class="globalnavi">
<li class="gn01"><a href="index.html">HOME</a></li>
<li class="gn02"><a href="aaa.html">あああ</a></li>
<li class="gn03"><a href="iii.html">いいい</a></li>
<!--　以下8まで同じ　-->
</ul>

css外部リンクで
.globalmenu {width:760px; list-style-type:none; margin-left:0;
padding-left:0; position:absolute; top:65px;}
ul.glmenu li { width:95px; float:left; border:0;}
ul.globalmenu li a { display:block; width:95px; height:25px;
padding:0; text-decoration: none; color:#888; font-size:10px;}
ul li.gn01 a { background: url("../image/gn_01.gif")
left top no-repeat; text-indent: -9999px;}
ul li.gn02 a { background: url("../image/gn_02.gif")
left top no-repeat; text-indent: -9999px;}
ul li.gn03 a { background: url("../image/gn_03.gif")
left top no-repeat; text-indent: -9999px;}
ul.glmenu li a:hover { background-position:0 -25px;}

>>165
それはリンク後のページのbodyにでもclassを設定しておいて、
そのbody.classのliだけhover時の画像を指定しておかないとならない。

>>166どうもです
<li class="gn01">はそのままで、bodyのliにということですよね
ちょっとやって見ます。

>>165
あるいは <a href="index.html" class="active">などとするか。

つーかそのソースclass指定がバラバラなんだけど。

>>167
bodyのli？
いや、俺が言ったのはbodyのclass。
body.class ul.class li.class { }
こんな感じ。

どちらもダメでした。
指定が違うのかな？
ロールオーバー用の画像は2枚別々で用意したほうがやりやすいですか？
>>168
よく分かってないのにサンプルからコピペして作ったので
あってるかどうかも、どこが間違っているのかもわかりません...
いろいろやっているうちに覚えるかなと思っていますが。

>>170
質問する前に>>1を読んでください。

このソースそのまま使ってるんだったら、
とりあえずcssの　.globalmenu　と　.glmenu　の部分を
.globalnaviに変えろ。

いや、そのまま使ってるんだとしたら、そのテンプレがそもそもおかしいって可能性も・・・
どっちにしろCSSを知らなきゃ改造も修正も難しいから、
>>170は勉強してきた方がいいよ。

>>171
>>1は全て読みました。
ご指摘のclassは質問時に書き間違えたので「ソースをそのまま」と言うのは
間違いでした。元は全て整合性が取れているclass名になっています。

>>172
有難うございます。もう一度解説サイト読んできます。

>>173
とりあえずお奨め
ttp://hp.vector.co.jp/authors/VA022006/

143ですがulが浮動ボックスの場合はどうすれば良いんでしょうか？

>>175
中がulだけなんだったら、普通は上位ボックスの方をfloatさせる。

>>176
サンクスです。中にはもう一つボックスが入っていて、右側にulが入っている感じです。
よろしくお願いします。

>>177
IEにのみul { height:1px; }（ハック方法は自分で調べて）
その他には
ul:after {
content:"";
display:block;
clear:left;
height:1px;
}

>>168
指定が違ってたみたいです
html
<a href="xxx.html" class="active">
css
ul.globalmenu a.active {
background-position:0 -25px;
}
で成功しました。
アドバイスいただいた方有難うございました。
あとは、class指定をもっと勉強してみます。
お騒がせしました。

>>177
御免、IE7にも対応させるんならulにmin-height:1px;を足しといて。

>>179
ううん、あんまりclassに頼るのはよくないから、
頼らないで済むために勉強してくれるとウレスィ。

別に良くなくはないんじゃないの？
所詮ただの分類でしかないんだし。

分類だとわかっているならclassは多くならない。
わかっていないからただの過剰な装飾になってトラヒック増加。

無理なようですね。
なんでIEは>に対応しなかったのか・・・

というか独自かな？
セレクタがもっといけてたらなぁ。
strictももっと広まるだろうに。

>>183
調べてから書こうね。独自じゃないよ。

>>184
そうでしたか。

ところで、<p></p><table></table>とある時に
p要素をfloat:leftさせたらtable要素がmargin-leftしなくても回り込むのは何故ですか？
tableがblockレベルとは違うんだと思いますが、正規のもしくは仮想blockレベル以外は
回り込んじゃう性なのですか？

NC6,IE7の実動作です。
IE5とか他のブラウザでもちゃんとtable回り込んでくれますかね？marginとかしないでも。

>>185
仕様をもう一度読んできた方がいいと思う。
IE5はインストールしてみたら。バグが多いから確実とは言えない。

>>186
いや、読むのが面倒なんで知ってる人に聞こうと・・ここってそういうスレでは・・・なさそうですね。
すいません。不快にさせてたかもしれません。以後注意します。

今IE7なんです。IE6でなんかおかしなことになって再インストール手順が不明だったので
ベータ版にも関わらずIE7にしました。おかげで直りましたが。

IE5を入れるにはI・・・・・いや、こんなこといっても・・・まあOSを入れなおさないと無理そうな感じです今のこのPCは。

完璧にテーブルを回り込ませる方法とかって・・あぁ。まとまってないですよね。そんなもの。
多すぎますもんね異なる実装が。

とりあえず、まあdisplay:blockで仮想ブロック状態にしておいたほうが安全そうですね。
それで無理なら、まあいいですね。

＞多すぎますもんね異なる実装が
あのさ、本当にそんなこと言ってる前に読んでこいって・・・

いや、読むのが面倒なんで知ってる人に聞こうと・・

>>188
こういう奴に何を言っても無駄

遠まわしに「お前らじゃわかんねえか」って言ってるように思えるのは俺だけ？

そもそも正しい仕様を理解していないんだったら
実装以前の問題だよな・・・

>>191
俺は「お前らが読んでこいよ。それで俺に教えろ。俺は必要な所だけ分かればいい。」に聞こえる

>>192
なんかオタクっぽい理屈だな。

liタグをdisplay:inline;にして、ulもliもマージン・パディングを0に指定しているのに、
IEだと先頭のli要素の左側に余白ができてしまうのですが、
これって対処法はないのでしょうか？
（先頭のliのマージンをマイナスにする以外に）

Firefoxでは問題ないです。

気象庁（大手町）の１Ｆにある本屋「津村書店」についての裏事情

ここにいる７０歳くらいの、頭の完全に禿げた眼鏡をかけたジジイは、とにかく短気かつ凶暴である。
以下にこのジジイの悪行を、一部であるが記す。

・まず、本屋で５分以上うろついていると、「何か買いたい物があるか」と突慳貪に言い、
黙っているか、「いいえ」とか言うと、「買う気がないなら、出て行け」と言う。
・次に、立ち読みでもしていようなら、腕をつかんだ上で、奥に連れて行き、殴る蹴るの暴行を
加える。過去に顔にあざができたり、鼻血が出たりしたケースもあったらしい。また、女性の場合
胸を揉むなどの、セクハラをしたこともあったとか。
・一見ひ弱そうに見えるが、実は、柔道黒帯，合気道二段の腕前。そして、足も速い（笑）
・そして、納品作業をしていると、客がいようがお構いなしに「そこ邪魔だ、どかんかい」
と怒り、睨み付ける。（場合によっては足で蹴る）ちなみに店内は非常に狭い。そして本の陳列も非常に雑。
・極め付けは、清算をする時。例えば３２０円の雑誌を買って、１０２０円を出そうものなら
「何故１０００円札一枚で出さない？計算しにくいんだよ、アホンダラ」と言って、２０円分を投げる。また、お釣りは投げるようにして、渡される。

ここの本屋は、マニアックな本は多いが、品揃えは悪い。そして、何と言っても、上記のように主人の
接客態度が最悪。
こんな本屋で買い物をするのは、極力避けた方が良いとアドバイスしておく。

>>195
これは有名なバグです。
<ul>〜</ul>間の改行（brのことじゃなく、ソースの）を全て除くと直ります。
見にくくなりますが、一番てっとりばやい方法です。

通報しました。

できました。
上記サイトには何の説明もないのですが、
width: 100%;
というの追加したとたん成功しました。
このwidthをとると効果がなくなります。もはや意味不明でウｓ。

↑誰だよ

↑お前こそ誰だよ

↑そこは>>65だよと答えるべきではないのか?!

>>197
それで、liとliの間の余白は取り除くことが出来るのですが、
<ul><li></li>
と書いても、何故か最初の余白だけは取り除けないんですよ……

>>203
Win2000IE6
互換モード/標準モード
共に再現せず。

>>203
(´-`).｡oO( なんでソースが秘密なんだろう・・・)

>>204-205
失礼しました。
どうも、liよりもその前にフロート要素があることが問題のようです。
ulの左マージンを十分にとっても、ulの背景ぴったりにliが寄らないのです。

すいません、pcで書き込める環境に戻ったらソース貼ります。

#main p{ 一杯 }
この後で色々追加していくときに
#main #grous p{all-propery:default;}
こんな感じにして#main p{}で何をやっているかなど気にせずに
#main #grous p{}を使いたいのですが、できませんか？

質問する前にやってみたらどうだったんだい？

>>208
all-propery:default
なんてありませんよ？

？？？

p#grous　じゃだめなのかね？

>>211
どういうことですか？
#grousはdivです。

うまく伝わってませんかね。
要は
p{ font-size:40px; }
これを消したいのです。それぞれのブラウザの初期値に戻したいのです。
全てのプロパティを消したいのです。
#main p{
このセレクタだけ全てを初めに初期化する
margin-top:1em;
}

これで#main pがfont-size:40pxじゃなく何も指定ナシ状態で表示されるのが希望です。

>>212
初期化は無理だな

IEを考慮に入れるなら方法はないが
入れないなら上の指定を子孫セレクタから子供セレクタにすれば
#main直下のp以外にはスタイルは適用されないから
#main #grous pはデフォルトのままになる

#main > p{}
#main #grous p{}

>>213
やっぱり無理ですか。
なんかCSSって残念ですね。

あとだしジャンケンでなに言ってんだか・・・

<span><input type="checkbox"></span><span>AAA</span><span>BBB</span>

とするとinputがあるspanだけ、1px(?)だけ下にずれてしまいます
いろいろ試したんですがどうやっても直らず・・お助けくださいoz

以下コピペhtml用です
<html>
<style TYPE="text/css">
<!--
SPAN {
height: 20px;
background-color:#FF0000;
}
-->
</style>
<body>
<span><input type="checkbox"></span><span>AAA</span><span>BBB</span>
</body>
</html>

　　夏だなぁ・・・

>>215
お前意味わかって言ってんの？


＞#main #grous p{}を使いたいのですが、できませんか？
に対して
＞p#grous　じゃだめなのかね？

だとかHTMLの仕様すら理解できてないアホだろ？お前。

いるんだよなぁ　自分は凄いと勘違いしてんのが・・・

>>219
貴方、大事なことを忘れていませんか？

>>207
#main p{ 一杯 }
こっちのpにclassをつけるのが一番現実的じゃないかな。

もういいです。
挑発に乗った私がバカでした。
すみませんでした。

operaだと、iframe要素にz-indexで下部に指定しても、最前面に表示されちゃうんだけど、
何か対策はないでしょうか？
キーワードだけでも教えていただければありがたいのですが。
よろしくお願いいたします。

そこは確かappに関係する部分でいじれなかったような・・・

>>223
キーワード：01

>>224-225
ありがとうございます。
すいませんが、もう少しヒントをいただければありがたいのですが。
勝手を言ってすみません。
もちろん、私自身も良く調べてみます。
ありがとうございました。

>>223です。
operaアップデートしたらバグ修正してました。
ということで、気にしないことにします。
ありがとうございました。

>>225
オタクっぽいやつだなコイツ
素直に言えばいいのに、素直になれないキャラ
それなのにやけにおせっかい

01って9.01のことだったのかな？

>>229
素直になれ

>>230
素直に疑問に思ったのですが。
>>225さんですか？

ん？>>228=230かと思った。

昨日の金スペ「所さんの“クイズ･アウトORセーフ”」のラストで
大沢あかねが 「お尻の穴に冷たいのが入った」て叫んでた。

いきなりだったのでちょっと興奮した。

>>233＝山本

>>214
遅レスで申し訳ないけど、ちょっと疑問が。
どんな時にデフォルトに戻したいんだろうか。

大抵は、なるべくデフォルトスタイルは殺さない？
そうすればpのスタイルは決まってるわけだから
#main #grous pのスタイルもそれに合わせればいいだけだし問題ない気が。

それ以前に単に使い方がへたくそなだけな気がする。
まあ、あんな反応してる時点で、釣りもしくはレスする価値のない相手だろうし、
放置で良いかと。

>>235
どうもです。
デフォルトスタイルに戻したいのは、デフォルトスタイルで表示したいのではなくて、
デフォルトスタイルを出発点にしたいだけです。
#main pの内容の変更によって#main #grous pまで気にするのは得策ではありません。
かといって、クラスだらけにするのは我慢なりません。
なんのための外部CSSファイルなのかと小一時間問いただしたくなりませんか？

HTMLレベルではいらないclassをCSSレイアウトの為に使ってるサイトは多いです。
現状を考えればとても賢い判断なのですが、頭の固い私は毎度そういう細かいことに引っかかって。

まあ正直「class使えば？」とか言ってるやつを見ると「バカじゃねえの！？」って
思うのです。バカなのは明らかに私ですがね。

>>236
05:35:38
そんな時間にそんなレスですか。
あんまり嫌味なレスはやめてください。

本当に何もわかってないんだということはわかった。

人生苦労するんだろうなぁ・・・

ﾎﾞｯｸｽを二つ重ねたいのですがどうしたらいいですか？

もうちょいと詳しく

ピアノのけんばんを作りたいんですが、白いベースのけんばんに、黒いけんばん(ﾎﾞｯｸｽ)を重ねなければうまくピアノにならないんです…
説明ﾍﾀですいません。

z-index でググりましょう

ありがとうございます！

外部CSSを始めたばかりなんですが。。。
↓をもう少し簡素化（まとめたり）できそうな気がするんですがやり方が解りません。

BODY { background-color: #FFEADF }

A:link { color: #004080; }
A:visited { color: #824297; }
A:hover {color:#0099ff; position:relative; top:1; left:1}

BODY,P,TD,DIV { font-size: 10pt }

BODY { color: #4D4D4D }

body,P,TD,DIV { line-height: 140%; }

body,P,TD,DIV { text-align: center; }

p.left {text-align: left; }

p.left2 {text-align: left; margin-left: 3%; }

>>245

body {
　background-color: #FFEADF;
　color: #4D4D4D;
}

って感じで。
あと小文字で統一した方がいいよ。

ありがとうございます！

色んな説明サイトからコピペして数値だけ変えてたんで大文字小文字が統一されてませんでした。。。

完全に初心者質問スレになってる…

>>238>>239
悔しかったのか？
独り言レベルの捨て台詞吐かないといられなかったか？

>>249
君の方が悔しそうに見えるが

>>250
我慢しろ

釣りだから放置で。

>>252
言ってることとやってることが・・・

　　 　∩＿＿__∩
　　 ／　　　 　 　＼
　 ./ 　 ●　　 ● 　.',
　 l 　 　 ( _●_) 　　 l
　彡､ 　 　|∪|　　　 ミ
　i"./　　　ヽノ 　 　',ヽ
　ヽi　　　　　　　 　 iﾉ
　　',　　 　∩　　　 /
　　 ヽ　　(.　 ) 　／
　　　 ', 　　i!　　/
　　　（___／ ＼___）

　　 　∩＿＿__∩
　　 ／　　　 　 　＼
　 ./ 　 ●　　 ● 　.',
　 l 　 　 ( _●_) 　　 l
　彡､ 　 　|∪|　　　 ミ
　i"./　　　ヽノ 　 　',ヽ
　ヽi　　　　　　　 　 iﾉ
　　',　　 　　　 　　 /
　　 ヽ　　(. l )　／
　　　 ', 　　i!　　/
　　　（___／ ＼___）

元気ないな

いやオンコだろ

●↓HTML↓●
<ul id="menu">
　<li>おでん</li>
　　<ul id="menu_oden">
　　　<li>チクワ</li>
　　　<li>コンニャク</li>
　　　<li>タマゴ</li>
　　</ul>
　<li>うどん</li>
　<li>うでん</li>
</ul>

これを↓のように表示させたいです。
＞　おでん　うどん　おにぎり
＞　チクワ　コンニャク　タマゴ

liに対してfloat:leftやdisplay:inlineを使ってみましたが思うとおりの配列になりませんでした。
＞　おでん
＞　チクワ　コンニャク　タマゴ
＞　うどん　おにぎり
というような感じになってしまうのです。

HTMLテキストに書かれているidやclassなどの属性やタグはいくら変更できますが
本文テキストの順番は（メニューを縦並びにすることもあるため）変えないようにしたいのです。
よろしくお願い致します。

258の訂正です。

●↓HTML↓●
<ul id="menu">
　<li>おでん</li>
　　<ul id="menu_oden">
　　　<li>チクワ</li>
　　　<li>コンニャク</li>
　　　<li>タマゴ</li>
　　</ul>
　<li>うどん</li>
　<li>おにぎり</li>
</ul>

これを↓のように表示させたいです。
＞　おでん　うどん　おにぎり
＞　チクワ　コンニャク　タマゴ

liに対してfloat:leftやdisplay:inlineを使ってみましたが思うとおりの配列になりませんでした。
＞　おでん
＞　チクワ　コンニャク　タマゴ
＞　うどん　おにぎり
というような感じになってしまうのです。

HTMLテキストに書かれているidやclassなどの属性やタグはいくら変更できますが
本文テキストの順番は（メニューを縦並びにすることもあるため）変えないようにしたいのです。
よろしくお願い致します。

259>>
釣りじゃないよな？

>>260
すみません。
釣りじゃないです。

言ってるそのままは現実的なやり方じゃ無理だと思う。
css pulldownでググってみたような感じのもので代用は出来そうだけど。

259>>
htmlのほう変えないとだめでないかな？

<ul id="menu">
　 <li>おでん</li>
　 <li>うどん</li>
　 <li>おにぎり</li>
</ul>
<ul id="menu_oden">　
<li>タマゴ</li>
<li>チクワ</li>
　 <li>コンニャク</li>
</ul>

あとそれぞれのliにfloat: left;記述すればオーケーじゃないかな。

ごめん、ごめん縦並びにするときもあるのか。
じゃあ並び順変わるからだめでした。

>>264
そうなんです。
説明が悪かったかもしれません。
もう少しシンプルにすると…

＞　MENU1　MENU2　MENU3
＞　MENU1-1　MENU1-2　MENU1-3
と
＞　MENU1
＞　・MENU1-1　
＞　・MENU1-2
＞　・MENU1-3
＞　MENU2
＞　MENU3
を
cssの切り替えだけで表示が切り替わるようにしたいのです。

#menu li {
position:relative;
float:left;
}
#menu_oden {
position:absolute;
}
#menu_oden {
float:left;
}

てきとーだけど

最後、

#menu_oden li {
float:left;
}

だった

XHTML1.0-Strictで書いてます。
やりたいことは仕切りに使うborder（縦線）の長さを揃えることです。
アドバイスをお願いします。

現状→　| 短文A l 短文B l 短文C l
（ulに指定したborderだけ長い）

ソース
<ul>
<li>短文A</li>
<li>短文B</li>
<li>短文C</li>
</ul>

* {
margin:0;
padding:0;
line-height:1.5;
}
ul {
border-left:solid 1px black;
padding:0.5em;
}
li {
padding:0.5em;
list-style:none;
border-right:solid 1px black;
display:inline;
}

画像使えば

ulのpaddingのせいじゃね？

li:first-child{
border-left:solid 1px black;
}
だとIE対応してないんだよなぁ。
最初のliにidかclass振って、border-left:solid 1px black;が一番早いかな。

>>270
それ外すと短くなる気がする。

* {
margin:0;
padding:0;
line-height:1.5;
}
ul {
border-left:solid 1px black;
padding:0 0.5em;
}
li {
padding:1em 0.5em;
list-style:none;
border-right:solid 1px black;
display:inline;
}

でいんじゃね？

>>195 >>203で質問したものです。プロパイダ規制でしばらく書き込めませんでした。


ソースは
h1{width;135px;float:left;}

ul{list-style-type:none;margin:0 0 0 165px;padding:4px 0 15px 0;border:solid #ccc 1px;}

li{display:inline;margin:0;padding:0;border:solid #ccc 1px;}

<body>
<h1>ホゲハゲ</h1>
<ul><li>あいう</li><li>abc</li></ul>
</body>
・・・という感じです。
フロートした要素と次にくる要素に隙間が開いてしまうバグは知っていたのですが、
ul要素ないでliが左端によらない現象は、なんとかならないでしょうか？

なりません！

dt:before{content:counter(lst)'. '; counter-increment:lst;}

上記のようなカウンタ使って以下で表示される様に番号右揃えにする方法ってありあす？

dt{display:list-item; list-style:decimal;}

>>275
仕様では
display: marker;
とすればいいだけ。実装はまた別の問題。

>>272
上下左右のmarginが設定できません。
どのように設定したらよいのでしょうか？

>>277
>>268なんだとしたら>>270が正解だぞ。

>>278
上下に間を取りたい場合、
marginをどのように設定したらよろしいのでしょうか？
>>270の場合、marginが0になります。

色々やってみたら自己解決しますた。

イマイチ的を得ないレスばかりで、大して参考になりませんでしたが
とりあえずありがとうございました

>>281
的は射るもの、当は得るもの。煽るのにも日本語を勉強しましょう。

>>281は私ではありませんのでお間違いなく

>>282
言語が流動的であるということを勉強しましょう。

まあこの場合のあなたの突込みにはまるで落ち度はありませんが。
>日本語を勉強しましょう。
この言葉につい反応してしまう自分がいる。

でも憎まれっ子が世に蔓延るのはさすがに流動的であってほしくない。

>>284
誤用の言い訳、みっともないっす。

　　夏　だ　な　あ

セルにそれぞれリンク貼れない？
出来たらやり方教えて。

>>288
スレ違い。

手とり足とり教えるスレで聞け

初歩的なことで申し訳ないのですが、質問させてください。
例えば下記のようなCSSがあったとして

.soto{width:200px}
.naka1{width:190px;background-color:#f00;}
.naka2{width:190px;background-color:#0f0;}
.naka3{width:190px;background-color:#00f;}

下記の様なHTMLを書いた場合

<div class="soto">
<div class="naka1">hogehoge</div>
<div class="naka2">hogehoge</div>
<div class="naka3">hogehoge</div>
</div>

sotoと各nakaの間に左右5pxの余白を作ろうと思った時、
どのような方法がありますか？
自分が思い付くのは、.soto2{margin:0 5px;}を追sotoの内側に配置する方法、
各nakaにmargin:0 5px;を追記する方法なのですが、
これ以外にスマートなやり方があれば教えてほしいです。

>>291
.soto{width:200px;padding:0 5px}

>>292
実際のレイアウトではsotoにfloat:left;が付いてて
右側にメインコンテンツが来るのですが、
>>292の方法だとsotoがメインコンテンツの下に回り込んでしまいます。
>>291の方法なら問題ないんですが…

>>293
じゃあ>>291でいいじゃん。

>>293　互換モードか標準モードか。

>>295
バリッドなストリクトです

>>293
なんでそうやって後出しするの？

>>293
このスレに出てるから100回読んで。

>>273ですが、よろしくお願いします。

>>299
答えもらってるじゃないか。
M$にバグを直してもらえ。

ここで答え出ない奴は手とり足とりスレ行け

過疎ってるのに細分化するなボケ

テーブルで、ある特定のセルのみ一部分の枠線を消す方法はありますか？

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

すみません、やっぱり解決していませんでした。
colspanやrowspan属性で複雑にくっつけてありまして、
基本は　TABLE{border:thin inherit black;}　と指定しています（外部ファイル）。
そして特定のセルに　.line1{border-top-style:none;}　と指定してセルの上の枠線を消そうとしてるのですが、うまく消えません。
何か方法はありませんか？

やっぱり自己解決しました。

すみません、やっぱりうまくいってませんでした。

すみません、やっぱり自己解決しました。

すみません、やっぱりうまくいってませんでした。

すみません、やっぱり自己解決しました。

すみません、やっぱりうまくいってませんでした。

ワロタけどもうやめれ〜

>>306-311
彼らは偽者です…

仕事で作ってるんですが勤務時間以外では仕事をしないようにしてますんで。
で、今度こそ自己解決しました。
自己満足の世界ですがいいんです。

すみません、やっぱりうまくいってませんでした。

というか、満足できませんでした。

マネすんなよ

もうおもろない

すみません、やっぱりおもしろかったです。

すみません、やっぱりおもしろくありませんでした。

スクロールバーの大きさをCSSで指定してやることってできますか？

無理

>>321
ありがとうございました。

IEのユーザースタイルシートを使って
googleなどのテキストボックスの入力文字の大きさを
指定する事はできますか？

できるならば、お手数ですがキーワードなんぞを
教えていただけたら幸いです。

>>323
IEだとinputすべてにwidthプロパティを当てるしかできないと思う。
Fxその他だとinput type="text"のみに幅を指定できるけど。

あ、すまん文字の大きさね。だったらfont-size。

>>324
>>325
ありがとうございました。無事解決しました。

すみません、やっぱりうまくいってませんでした。

しつこい

特にクライアントから指定なかったらブラウザでの確認って最低ラインはどこまでやってます？
人に聞いたら

Win:IE6、モジラ系一つ（FireFox）、ネスケ7.1
Mac:safari

が最低ラインって言ってたんでそんなもんなのかなと
マックに関してはクラシック環境はバッサリ切るとこもあるんだな、と

>>329
スレ違い。デザイナースレ池。

基本的に古いブラウザでもコンテンツの確認ができるように。
と言うか、携帯でも見られるぐらいにかな。

そこまでやってるとこあんまない

そか？
単純に非対応ブラウザのcss切ってるレベルだが

>>329
最低限、クラの使用してるブラウザに対応してればOKだ。

ひでぇ

ie5以上 FF NN6以上 opera7以上
safari Macie5位ではちゃんと表示されるようにはするけどな。。。

それより古いブラウザはcss切りでちゃんと読めればOk

IE が CSS2 に対応してないらしいけど, みんなどうしてる ?
(僕は開き直って...)

>>337
未来へようこそ！

>>337
巣に帰りなよ

>>339
宿なすになりますた.

>>340
手とり足とり教えるスレ part3
http://pc8.2ch.net/test/read.cgi/hp/1155395444/

>>341
唐揚げしてるやしがいるしぃ〜.
とんでもない質問が来てるしぃ〜.

"JavaScript 工房" ってタイトルでスレ建てしようとしたら弾かれた.
OCN ってダメポ.

とんでもない質問にも答えるから、手とり足とりなんじゃ。
看板に偽りありか。

>>342
おまいはその程度のヘタレ野郎だったのか？
　　行ってこい　教祖！

>>342-343
僕は物作りを楽しみたいだけなんだ.
web なんたらと 一緒にされてたまるか !

乗り込んで「web なんたら」を駆逐してこそ男じゃないのか？

　　胸張って行ってこい！

IEのバグなのか、スタイルシートの表示でうまくいかないところがあるので、
質問をさせてください。

外部スタイルシートで以下のようなものを書いたところ、フレーム内ではIE6.0だとうまく表示されていないことがわかりました。

body{margin:10%;}
.back{margin:10%}

フレーム内で表示したときのみ、<div class=back></div>内のある行から勝手に１字下げされてしまいます。
下記アドレスに起こった現象のサンプルページをアップしてみました。
http://a.sample.atukan.com/

ローカルで試したときは、最初に表示させたときから１字下げの状態になったのですが、
ネット上にアップすると、ページを再更新させるとこの現象がおこりました。

外部スタイルシートを使用しないか、フレームを使わなければ、正常に表示できるのですが、
どうしても、この両方を使って表示させたいです。
なにかよい方法はないでしょうか。

XPsp2 IE6でならないけど

>>347
<div class="back">でしょ。
あとさ、その現象って、windowの大きさ変えて確認したわけ？
「ぬ」がブラウザの下辺に来てるとそうなるんでわ？
body{margin:10%;}なんでしょ？

Win2kSP4IE6でも再現せず。

>>349
関係なくならない。

寝ちまったか？

確かにウィンドウ幅を変えたら、１字下げになるのは「ぬ」以外になりました。
が、それでもおかしいことには変わりがないわけですが。
あと<div class="back">にしてみましたがダメでした。

自分は、WinMeです。
言い忘れましたが、ネットにアップした状態だと下部だけ更新させると、
ある行以下が１字下げになってます。

>>353
だからさ、body{margin〜}ってヤツ消してみ。

>>354
確かに、それで現象は消えましたが。
body{margin:10%;}を使いたいから書いたんですけど、
これはおかしな使用方法だったんですか？

だから言ってんだろボケ
さっさといね

>>356
うどんの国の王子様ですか？

東京人でも使います＞去ね

別の所で質問を受けた奴。

IEでナンバリングがずれる件。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b154.html
しかしこの対処法は646の構造じゃ無理なんではないかと思われる。
そして何よりこの方法だとFxでカウントされない。
ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b078.html
ここの対処方法では、現在のFxでは直らなくなっている。

よってCSSならば、FxとOperaにはカウンタ一連プロパティでカウントさせ、
ttp://www.lucky-bag.com/archives/2005/11/content_counter.html
IEはどうせCSS書きのおまけなんだからと諦めるか、JSでうにゃうにゃする。
もしどうしても表示させたい！という程の重要な番号で番号に意味があるんだったら
FxもIEもなく直書きが正しい。

>>359
もともとはスレ違いの質問に丁寧に答えていただき、ありがとうございました。
>FxもIEもなく直書きが正しい。
Strictスレの人的には、番号の直書きってありなんですかね。
ol要素で番号振るのが正道だと思ってました。

>>360
olは番号に意味がある場合じゃなくて順番に意味がある場合で
ちょっと違うとオモ

>ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b078.html
>ここの対処方法では、現在のFxでは直らなくなっている。

とのことですが、別の対処法を知ってる人いらっしゃいましたら教えてください。

>>362
散々回答もらってるのに。

>>363
上の人とは別の人間です。
counterの利用方法は知っていますが、
そちらではなくlist-itemを使う場合に関してです。

>>364
●質問者が返信する際は、名前欄に「最初に質問したレス番号」を入れましょう。

>>363
散々回答出てるのに。

Firefox の WebDeveloper みたいに、マウスオーバーしているブロックを
枠表示してくれるようなIE用のツールはありますか？

IE Developer Toolbar が有る

>>368
thank you, sir!!

ハイフンとアンダーバーって両方id,class名に使えますか？

#test_test{}
とかokですか？

http://www.k3.dion.ne.jp/~outside/kisotisiki/taisyou/class-id.html

ここには量オフおokとかいてありまうｓ。
でも確かアンダーバーは変な動作がありえるときうました。

まちがいます？

日本（ｒｙ

ハ＞ああいうあいう「？
ｋんふぁｓｇふぉいあｆあｄｇふぁｄがｆんｂｌｆｂｌｑｔｈｖｂじぇン；後ｂ＠会うｈｘｆｖ：青ｈ『＠ｇｂ：ｖｓｖｘｚｃｊｒ４「＠ｖｙ


この程度もｗからないあなんてアホだろオアえら。


css2.0ではアｂンダーじゃダメなんじゃボケ！！！

これはひどいｗ

floatについて教えてください。
左詰はfloat:leftで右詰はfloat:rightですよね。
下詰めにしたい場合はどうすればよいのですか？
ちなみにfloat:bottomではだめでした。

頼むから質問する前にちょっとは勉強してくれ。

回答者も全然勉強してなくて答えられないみたいだがな。

↑真性があらわれた！

>>377
は？>>375の質問に？
まさかお前答えられないの？

>>379
は？>>375の質問に？
まさかお前答えられないの？

>>380
は？>>375の質問に？
まさかお前答えられないの？

>>381
は？>>375の質問に？
まさかお前答えられないの？

もういいよ、ウゼエ

>>375
floatで下詰めはできない。
position: absoluteを使う手があるから過去ログ読んでください。

>>383
過去ログは読みました。

<div id="a"></div>
<div id="b"></div>
とあってbを上にaを下にしたいのです。
中身は変動するので高さなどは決められないんです。
absoluteだとそれぞれが独立した形になるのでdivの領域が被る可能性がありますよね。
その可能性をなくしたいのです。

<div id="b"></div>
<div id="a"></div>

は！

>>384
最初からそういう風に書いてくれ。
bが高さ可変なら、まず無理だ。

>>385
ここはCSSのスレですよ。
HTMLをいじってどうする。

分からないのなら書くな。

>>388
バカはきえろ。

>>384
fontを固定すればいいよ。

ひとり何役なんだろ？

お前だろ？

　 　　　 　　 　＿＿＿_　　　
　　　　　　 ／ ＼　　／＼　ｷﾘｯ
.　　　　　／　（ー） 　（ー）＼　　　　　　
　　　　／　　 ⌒（__人__）⌒ ＼　　　　＜ 分からないのなら書くな。
　　　　|　　 　　　|r┬-|　　　　|　　　　
　　　　 ＼　　　　 `ー'´　　 ／
　　　　ノ　　　　　　　　　　 　＼
　 ／´　　　　　　　　　　　　 　　ヽ 　 　 　 　 　 　 　
　|　　　　ｌ　　　　　　　　　　　　　　＼
　ヽ　　　 -一''''''"~~｀`'ー--､　　　-一'''''''ー-､. 　 　
　　ヽ ＿＿＿＿(⌒)(⌒)⌒)　)　　(⌒＿(⌒)⌒)⌒))



　 　　　　 　　　＿＿＿_
　　　　　　　 ／_ノ 　ヽ､_＼
　ﾐ　ﾐ　ﾐ　　oﾟ(（●）) (（●）)ﾟo　　　　　　ﾐ　ﾐ　ﾐ
/⌒)⌒)⌒. ::::::⌒（__人__）⌒:::＼　　　/⌒)⌒)⌒)
|　/　/　/　　　　　|r┬-|　　　　|　(⌒)/　/ / /／　　　　だっておｗｗｗｗｗｗｗｗｗｗｗｗ
|　:::::::::::(⌒)　　　　|　|　 |　　 ／ 　ゝ　　:::::::::::/　　　　　
|　　　　　ノ　　 　　|　|　 |　 　＼　　/　　）　　/ 　　
ヽ　　　　/　　　　　`ー'´ 　 　 　ヽ /　　　　／　
　|　　　　|　　 l||l　从人 l||l 　　　　 l||l 从人 l||l　　バ　　　ン
　ヽ　　　 -一''''''"~~｀`'ー--､　　　-一'''''''ー-､　　　　ン
　　ヽ ＿＿＿＿(⌒)(⌒)⌒)　)　　(⌒＿(⌒)⌒)⌒))

>>390
それはギャグで(ry

>>389も>>393も全然勉強してなくて答えられないみたいだがな。

>>384
overflow設定していいならできるだろ？

>>396
その手がありましたか。
ありがとうございます。
これでやっと解決です。

>>376-382>>385-395
氏ね！じゃなくて死ね！

やっぱりただの夏厨だったか。

ちょっと説明がわかりにくいかもわかりませんが、
例えば項目が3つあるメニューで、

１のボタンにマウスオーバーすると
他の項目も含めたメニュー全体の背景を青く、
２のボタンにマウスオーバーすると
メニュー全体の背景を赤くする、
３にマウスオーバーでメニュー全体の背景を黄色くする

といったようなことがやりたいのですが
CSSでできるでしょうか？
可能でしたらやり方をおしえてくださると助かります。
よろしくおねがいします。

>>399
メニューの全てを1枚の画像にしてhoverとか。

↑やっぱ無理だね。スマソ。

↑やっぱ無理だね。スマソ。

等幅フォント(MS ゴシック)を使用しています。
機能追加で簡体字、繁体字にも対応しなければなったのですがひとつ問題が。
IEだとこれらの文字が正しく表示されず、 ・ で表示され、Firefoxだと正しく表示されます。
CSSバグ辞典でIEのfont-familyはひとつめしか有効にならない(?)、みたいなことが書いてあったのですが
何か対処法はないでしょうか。

いまのところ
フォントの指定をやめる->インストールされているデフォルトのフォントで表示される
しか解決策が見つかっていません。これだと等幅フォントが使えないのでできたら避けたいのですが。。。

>>399
可能。
z-indexでググれ

>>403
日本語のfont-family指定は、sansかsans-serifかだけ指定しとけばいいと思うよ。
MS ゴシックだけ指定したってMacで見たら全然意味無し。
それとも中国向けサイトってことなん？

等幅っつってんだからmonospaceだろバカ

へーMSゴシってmonospaceなのか

>>407
総称ファミリの何たるかを勉強してこないとヤバいぞ・・・

>>407
"ＭＳ Ｐゴシック" →プロポーショナル
"ＭＳ ゴシック" → 等幅

そうかthx.

IEは総称ファミリだけを指定した場合もバグなかった？

>>409
それも違う。それはたまたま、そのフォントが入ってた場合。

>>409は、フォントの種類を言ってるだけに見えるんだが。

>>411
これか。質問者の現象もこれ？
http://cssbug.at.infoseek.co.jp/detail/winie/b033.html

>>413
だから変だと思うんだが。

>>414
質問者はそれだろうが、>>411は違うだろう。

？

スレ違いかもしれませんが教えてください。

OsakaというフォントはWindowsにプリインストールされていますか？
それによってCSSで指定しようかやめようか判断します。

フォント収集マニアなんで分からなくなってしまいました。
どこかにプリインストールされているフォント名の一覧みたいなものがあると便利なのですが…

されてません。

>>417
ttp://rinrin.saiin.net/~aor/fonts/allfonts

マウスがリンク文字上に乗ったら背景色を変える
http://www.openspc2.org/reibun/css/link/002/index.html

これを参考にしてみたんですが、横並べにして更に場所を指定するにはどうすればいいですか？
書き方が悪いのかposition:absoluteでは、うまくいきません。
よろしくお願いします。

>>420
やりたいことも意味もわからん。
もっと詳しく書いてソース出して。

>>420
親(や祖先)をrelative(など)にしてないんだろ、どうせ。

>>421
すいません。
http://www.bumpofchicken.com/
こんな感じに横並べにリンク？を作りたいと思っています。

自分のＨＰはここです。
http://sound.jp/stripout/
この右上に作りたいです。

>>423
まずそこからわからないのかよ！
普通はliをdosplay:inlineとする。

dosplay・・・・・orz

>>424
ＣＳＳ勉強してから3日目くらいなんで・・・
よくわかりません・・・
liをdisplay:inline ですか？
検索してきます。

http://www6.plala.or.jp/go_west/nextcss/tip/tech/use_inline.htm
ここ参考にしたけどよくわからんです。なんで出来ないんだ。

#x{
margin: 0;
padding: 0 0 1px 5px;
list-style-type: none;
}
#x li{
display: inline;
margin: 0 -3px 0 0;
padding: 0;
}

<ul id="x">
<li><a href="">ファイル</a></li>
<li><a href="">編集</a></li>
<li><a href="">表示</a></li>
<li><a href="">ヘルプ</a></li>
</ul>

これじゃあうまくいかんですか？

>>427
おまいのソースコピってできたが、
根本的なところで間違えてないか・・・？

>>428
えぇ？もう一度やってみます。
ありがとです。

>>428
根本的なところでおもいっきり間違ってましたｗ

自分がFirefoxを使っているので、IEでPNGの透過ができない
という事を今更知りました・・

ということで単刀直入に
IEでのPNG透過はどのようにすれば可能なのでしょうか？
ttp://edo-freiheit.sakura.ne.jp/eblog/2006/06/win_iepng.html#more
に一応の説明が書いてあるのですが、中ほどにあるソースがどういう意味で
それをどうすればIEで透過可能にできるのかさっぱりわかりません・・

よろしければご教示お願いします。

スレ違いよん

あら・・すみません。
CSSとは関係なかったですかね？・・

スレ汚し失礼しました。

CSSのクラス名で、複数の文書間で共有されるようないわばグローバルなクラスと、
１つの文書内でのみで用いられるローカルなクラス、
また1つ文書内でも局所的に使われるクラス名を、区別できるような仕組みはありませんか？
クラス名にシンプルな名前を付けたいのですが、それだとどうしても重複してしまう懸念があるんで。
やっぱ自分で識別子を作って、命名法を決めるしかないんですかね。
できればCSSの仕組みを使ってできればいいのですが。

自分で識別子を作って
→自分で接頭辞を作って
の間違いでs

>>434
カスケードの概念を理解して恋。

そういう当ててしまうと困る部分は別ファイルにして個別に読み込めばいいんじゃない。
当てるつもりの無いものを読み込んだって無駄だし。

どうしてもまとめたいんなら、bodyにidでも振るか。

bodyにidなんかつけるなよ、css signatureの予約しとけ。

属性セレクタでしょうな。

>>438
ページごとにテーマカラーを変えたい場合とかどうするの？

ページ毎のcss作ればいいんでね？

>>440
classも知らないのか？
つーかそれってCSSを共通に揺する意味ねえーーーー

PNG透過って俺も聞こうと思ってたのですけど
スレ違いなのですか・・・・・・・・・・
http://www.csszengarden.com/?cssfile=/028/028.css
ここのようにメインボックス内を透過画像にして
背景を透けさしたいと思ったのですが。

>>436
カスケードって2つの宣言群が優先順位にしたがってマージされますよね。
それがまずいんですよ。つまりカスケードを意図した場合は、それで構わないのですが、
例えば、まったく別の意図で用いた二つのセレクタが偶然一致してしまった場合、
その宣言群がマージされると、めちゃくちゃなことになってしまいます。
特に一語での指定なんかだと、こういうことが起こりがちです。
二つのセレクタに同じプロパティを設定しているなら
すべてがどちらか一方の値で上書きされるので構わないのですけど、
偶然の事故ならばそうはいきません。

>>438
グローバルなクラス名とcss signatureをつかったローカルなクラス名が偶然重なった場合は、
それだと困ります。

>>443
そもそもIEがいまだに半透明PNGに対応してない糞だから。
代わりにIEにはfilterというhtml独自拡張がある。←cssではない。

>>444
だからカスケードの意味を理解してねえーーーー

>>444
だから違うclass名使えばいいじゃん。
そんな整理も出来ない程classが多いのなら、それはそれで問題有り。

＞まったく別の意図で用いた二つのセレクタ
そもそも同じclass名にするということは、同じ性質を持っているということだ。
だから別の意図になるということはあり得ない。あるとしたら、根本的に間違い。

最近、2カラムでサイト製作する際、
横幅全固定が一番デザイン楽で
相手に与える影響もすくないと思ったのですが
どうなんですかね？
躍起になってメニュー部固定、メイン部可変サイトに
こだわってたんですが特に利点がないような。

>>445
filterってactivX使用してないと
表示が適用されないやつですよね。
とりあえずどこまで運子なんだよIE。

<body>の直下に全てを囲む<div id="containar">を作ればよい

>>449
横幅固定が一番いいよ。

綺麗ごとをいえば可変なんだろうけれど
それだとレイアウトが崩れやすくなる。

やっぱり固定が一番ですよね・・・・・・・・・・・
がんばって可変にしたのにデザインが、難しくなるだけだという・・・・・・・・・

>>449
利点はあるだろ。人によっ見やすい幅は違うんだから、閲覧者の自由で見てもらえる。
というか、自分が色々な環境を使ってると、マジで固定幅ウザくなってくるよ。

ページ全体の固定幅を800pxという小さめサイズで合わせて
作成して行くのが製作者、閲覧者にとっても一番いい妥協点
のような気がしたんですが。

というか幅固定でも可変でもwidth指定してる限りは
border、padding指定はご法度でしたっけ？
IEの昔のバージョンとその他ブラウザでデザイン崩れるから。

>>447
サイトやページの規模によっては、可能性としてclass名は無限に増え得るので、
こういうのを整理する仕組みはCSSには用意されてないのかという議論です。

>>448
例えば多義語ってありますよね。
まぁ多義語を持ち出さなくとも、二つのクラス名が一致することはありえます。
シンプルでよい例が思いつきませんが
ある場所で画像に映っている人の名前にnameというクラス名をつけ
別の場所で掲示板の投稿者にnameというクラス名つけたものをつけ表示をCSSで設定した場合。
最初からこの二つを用いると分かっていればよいですが、
サイトに掲示板を後に設置したときのように、
誤ってこの２つを用いてしまった場合、カスケーディングによって
二つの宣言がマージされて意図しない表示になります。
そこで名前空間を区別する仕組みはないかなと思ったわけです。

>>454
デザインの崩れはどうでもいいが、800は古いマシンでは大きすぎるし、新しいマシンでは小さすぎる。
そういうことだ。

>>455
グダグダ言ってないで基礎から勉強してこい。

>>456
では、調べてまいりますので、
どこの理解が間違っているのか宜しければ具体的にご教示願います。

>>457
今まで散々答えが提示されていることにすら気付けないんだろう？
だから勉強してこい。わかっている奴はおまえのような質問はしない。

>>457
＞ある場所で画像に映っている人の名前にnameというクラス名をつけ
＞別の場所で掲示板の投稿者にnameというクラス名つけたものをつけ
だから何で同じnameってclass名にしなきゃいけないのよ。
もしかしてガチガチのstricter?

>>458
提示された答えに対して疑問があるから、より詳細な答えを求めて質問しているわけです。
分かっていれば質問しないのは当たり前のことです。

>>459
おまえの考え方も変だよ。
同じnameという性質を持ってるなら同じclass名までは合ってる。

>>460
詳細以前の概念もわかってないから無理。
色という概念を知らない生き物に赤色を教えようとするのは無理のようなもの。

>>462
「詳細な答え」の「詳細」とは別に「CSSの詳細」ではありませんよ。
「疑問の詳細な答え」です。それを求めているわけです。

分からないなら分からないって言って下さいね。

ここで質問した自分が馬鹿でした。
ありがとうございました。

すみません、やっぱり教えてくだしあ＞＜

>>466
偽者は消えて下さい。

それ以外は本人です＞＜
すげえな。

>>467
(˘θ˘ )

そんな事より、野球しませんか？

>>461
変なのはお前さんだと思う。>>434なの？
画像とcgi等のパラメータが同じ性質とはね。

>>461
その先のどこから間違ったのかを是非教えていただきたいのですが。
思いついた選択肢としては、
1. 同じnameというクラス名を与えられた以上、見た目も同じものであるべき。分けるのがおかしい。
2. その二つの要素の区別はclassセレクタの仕事ではない。
2-1. 子(孫)セレクタや兄弟セレクタを駆使して分ける。
2-2. 外部スタイルシートファイルを使い分ける。二つの要素が同じHTML上に現れるとしたら、クラス名が適切ではない。

>>472
ここは議論の場ではない。　他でやってくれ。
質問者には邪魔な存在だと気づいてくれ。

>>473
ご迷惑おかけしてすみません。
私がわかってない。でもここには分かっている人たちがいる。
という構図がある以上、これは議論でなくて質問です。

455 434 sage 2006/08/20(日) 19:27:28 ID:???
>>447
サイトやページの規模によっては、可能性としてclass名は無限に増え得るので、
こういうのを整理する仕組みはCSSには用意されてないのかという議論です。

　　これはなんだね？

>>475
それは正しくありませんでした。
論点とでもするべきだったでしょうか。

>>471
違うよ。
けど本人が同じ性質と思って同じclass名を付けたのなら同じ性質だ。
他人にどうこう言えるものじゃない。

434

↑こういう奴って何なんだろ。
勉強すれば分かるのにしつこくグチグチグチグチ・・・・

そんなお年頃なのさ

>>477
つまりクラス名をグローバルやローカルなど、
適用範囲に応じて整理する仕組みはCSSには用意されてないので、
スタイルシートを複数HTMLで共有する場合には、
CSSのクラス名命名の枠組みの中でバッティングしないように厳密に管理しなければならない。
でFAですか。
ご迷惑をおかけしました。

ﾀﾞﾒﾀﾞｺﾘｬ

むしろ
クラス名をグローバルやローカルなど、
適用範囲に応じて整理する仕組み
があると勘違いしたことが、そもそも概念理解ができてないということですね。
これでFAですね。
ありがとうございました。

今までの答えを丸無視だな

ﾀﾞﾒﾀﾞｺﾘｬ

\.や\:のように、CSSでエンコードしなきゃならない文字の
一覧が載っているページがありましたら教えてください。

なぜわざわざ小難しく考えるのかわからない・・・・・・

>CSSでエンコード
　　　?????

エンコード→エスケープ
失礼しました。

>>485
仕様書の最後の方にある文法のページ。

>>489
ページ出せよボケ

＞ある場所で画像に映っている人の名前にnameというクラス名をつけ
＞別の場所で掲示板の投稿者にnameというクラス名つけたものをつけ

ある場所 .name {}
別の場所 .name {}

dl{margin:0;padding:0;}
dl dt{float:left;width:32px;height:32px;clear:both;}
dl dd{margin-left:33px;}
dl dt.a{background:url("a.gif") center center no-repeat;}
dl dt.b{background:url("b.gif") center center no-repeat;}
span.hide{display:none;}
<dl>
<dt class="a"><span class="hide">A</span></dt>
<dd>あああああああああああああああ</dd>
<dt class="b"><span class="hide">B</span></dt>
<dd>あああああああああああああああ</dd>
<dt class="b"><span class="hide">A</span></dt>
<dd>あああああああああああああああ</dd>
</dl>

上のとおり、dtに画像、ddに文で横並びにしたいんですが、
IE以外では崩れてしまいます。何かいい方法はありますか？

>>492
dd にも height:32px; 書かなきゃ

>>493
レスどうも。試してみましたが、
文が32pxの中を超えると次のddの文と重なってしまいます・・・。

>>492
ddにfloat:left;

じゃあ min-height:32px; でどう？

>>495
試してみましたが今度はIEだけが崩れるようになりました。
もっと弄って試してみます。
>>496
min-heightはIEで使えませんよね確か・・

あとは自分でやってみたいと思います。
ありがとうございました。

>>496
すみません。後で意味が分かりました。ありがとうございます・・。

>>491
結局、クラス名のつけ方とCSSの指定の割り振りの仕方がダメなだけだよな。

三年と生徒会役員という2つのclassを持っててもいい訳だし、
三年のclassに生徒会役員の仕事おしつけるのがおかしいだけだから。

訳わからん喩えをするな。

>>499
終わったことをｸﾞｽﾞｸﾞｽ引っ張るなよ。

Firefoxの、できれば全バージョンのみにCSSを適用させたいときは
どのようなCSSハックを使えば良いのでしょうか？

FXのみのハックはないと思う。
:rootでハックしてSafariなどを更にハックすれば出来るかも知れない。
最初からバグの少ないブラウザを基準にして作った方が楽だよ。
IEは後からハックすれば。IE7のおかげでそれも面倒になりつつあるけど。

htmlの<font size="+1">に相当するサイズのfont-size:を教えてください。

>>504
ブラウザ依存じゃないの？
てか="+1"ってはじめてみた。言いたいことは分かるけど。

font-size:80%と 100%がそれぞれ2と3 じゃね

AAなどを使うとき用にCSSで行間0、文字間隔0にしたいのですが、
どういった設定にすればいいでしょうか？

ボックスから文字がはみ出るのはどうしてでしょうか？
ボックスはfloatを使っており、3カラムです。

原因がわかりますた。ご迷惑おかけしますた。

CSSで行間0、文字間隔0にすればいいよ

>>506
普通何も指定してなきゃ、デフォルト値はぴったりだと思うけど。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#line-height
ttp://hp.vector.co.jp/authors/VA022006/css/text.html#letter-spacing

>>506
line-height: 1.0;
letter-spacing: 0;

>>504
http://www008.upp.so-net.ne.jp/mo--/html/textmarkup/font_e.htm
http://www008.upp.so-net.ne.jp/mo--/css2/prop/font.htm#size
http://www008.upp.so-net.ne.jp/mo--/css2/app/note.htm#sec14

あとは、自身でブラウザにおけるサイズを比較してください。

ふと思ったのですが
ＣＳＳのプロパティは書く順番の基準や推奨があるのでしょうか？
例えばｈ１をセレクタにした場合
背景やら文字色やら文字サイズなんかの複数のプロパティを
一度に指定した時に書いたほうがいい順番などがあるのでしょうか？

あとＨＴＭＬのことになりますが属性にも書いたほうがいい順番があったりするのでしょうか？

http://blog7.fc2.com/m/mb/file/safari-background-image.html

この、Safariでbackground-imageの位置を指定するとバグるって方法は
回避できないんでしょうか？
うまい回避方法を思いついたかた、よければご教授ねがいます。

>>513
擬似クラスには順序がある。
後から書いた方が優先されるから、そこさえ気をつければ。

>>514
ボックスから背景がはみ出してるってこと？
overflow:hiddenしてみ駄目なのか？

リンクしていない通常の文字の背景色を一括して設定したいんですけど
どうすればいいですか？

>>517
bodyの背景色とは違うのか？

リンクしていない通常の文字の背景色を一括して設定すればいい

自己解決しました、

やっぱり解決してませんでした、
教えてください

やっぱり自己解決しました、

もうそういうのやめようぜ

2つのカラムの間に縦に線を引く場合、
どちらかの左右ボーダーを指定する以外に、もっときれいにできるコツ
（どちらが長くなってもちょうどいい長さになる方法）ってないでしょうか？

ちょうどいい長さの意味がわからないけど、
どっちかの背景画像にするのがよろしいかと。

親ボックスの背景にすればいいじゃないか。

>>525
どっちのカラムが長くなっても、長いほうに合わせられるというような、都合の良い長さにできないものかな、と。

>>526
なるほど、幅固定すればそれでいけそうですね。
可変にするとbackground-position指定が徐々に狂っていったりしないかな……

>>527
可変でもイケるだろうが。
background-positionってパーセントでもイケるぞ。
つーか徐々に狂うって何だ。

>>524
両方のボックスにボーダー指定して、ネガティブマージンで重ねる。

２点質問させてください。（環境：WinXP IE6）

�@z-index での表示順序
position:absolute で表示させているブロックがあるのですが、
z-index:10000としても、<SELECT>のプルダウンが前面に出てしまいます。
他の要素は背面に出ているのですが、プルダウンより前面には設定できないのでしょうか？

�A要素内で上下中央ぞろえをしたい
<div style="height:500px; vertical-align:middle;">文字</div>
上のようにDIVで書いてもうまくいきませんでした。
TABLEで同様の書き方をした場合うまく動いたのですが、DIVではだめなのでしょうか？

よろしくお願いします。

>>530
丸文字は機種依存文字なのでネットじゃ使わんほうがいい。
１．無理。
２．テンプレ嫁。

>>531
レスありがとうございます。
色々失礼しました。注意します。

ちょっとフィルターに関して聞くのはスレ違いだとは思うのですが
いろんな要素が複合してるのでこちらでお聞きしますね。
2カラムメニュー固定、メイン可変でサイトを作成してるのですが
メイン可変部にfilterで透過pngを指定したいんですが、
どうやらfilterの特性としてWidthかabsoluteを指定しないと
このfilterは適用されないみたいなんですね。
ですがメイン可変部にはブラウザごとのデザイン崩れを防ぐために
width指定せずpaddingやborderを指定してます。
このデザインを崩さずにIEで背景を透過にするにはどういう抜け道が
ありますかね？

すいません、heightのみ指定するのが一番よさそうです、
ありがとうございました。

度々すいません。
firefox、opera、netscape、IEすべてでの透過png対応を
目指してるのですが背景に透過pngを指定し、
その後IE専用のfilterを指定した場合、
IEでは最初に指定した透過pngが正常に起動せず
灰色の背景になってしまいます。
なので背景への透過pngをハックで指定しようと、
IE以外で適用できるハックを調べたところ
どうも対応ハックが足りないようなのですが
何かいい方法はないでしょうか？
子供セクタを利用する方法を探したほうが速いですかね？

自己解決しました、子供要素を使いました。

やっぱり解決してませんでした、
教えてください

もうそのネタ飽きたよ

今、サイトを作っているんですが、
ボーダーを指定すると、ＩＥ５で見たとき、ズレが生じてしまうことが
あるので、できればデザイン内にボーダーは入れないほうがいいのでしょうか？
また、一般的にデザインに組み込まれるボーダーはバックグラウンド画像で設置
するのが普通でしょうか？

よろしくお願いします。

>>539
ボーダーを背景画像で実現するために何重入れ子が必要だと思ってるんだ。
ということで普通じゃない。ずれるのはやり方が悪いか、ハックで何とか汁。

>>530
重ねたい物の下にiframeを入れてやればいいよ

ハックテクニックについて質問です。
ＤＩＶでボーダーを入れた場合ＩＥ５とモダブラでは
widthの幅が変わってしまうという問題がありますが
そのＤＩＶの中にwidth分の透明画像等をいれて、
中身のwidthを一定数値
（たとえば、２００のwidthのＤＩＶに２００の幅の画像を入れる）
の画像を入れるさせるというのは実用的な方法でしょうか？

width幅変わるって互換モード？
divにborderじゃなくて、imgにborderつければいいと思うけど。

そんな問題はないよ

>>542
実用的なのは、IE5を見捨てるって所だな。

>>542
全然実用的じゃないし、そもそもそれはハックじゃない。

>>542
問題なのはお前の頭だよ

>>546
ハックでいいだろ。* html や _width と同じくらい痛いじゃん。

>>548
>>548
>>548

リスト<ul><li>で、ありがち？な縦並びメニューを作ってるのですが、
macIEのみ、背景画像もフォント指定も読み込んでくれません。
特別にmacIEハックする必要はありますか？
それとも、他の要素が絡んでいるのでしょうか？

>>548
それはギャグで(ry

>>550
一切CSSファイルを読み込まないってことだったら
根本的にMacIEが対応してないインポートの仕方をしているとしか。

>>552
ﾍﾟｰｼﾞ自体(他の部分)はCSS適用されてます。
普通なら問題が起きるような場所じゃない、ということですよね？
書き方でも間違ってるのかな･･･
もう一度冷静に見直してみます。

>>553
問題の起こるケースのサンプルをどっかに挙げてもらえば、
ソースを読むよ

#t-1
{
width:100%;
}
#t-1 table
{
width:100%;
}
#t-1 td
{
background:#f4f4f4;
}

#t-2 td
{
background:#000000;
}
<div id="t-1">
<table>
<tr>
<td>test</td>
<td id="t-2">テストテスト</td>
</tr>
</table>
</div>
td id="t-2の背景が変わらないのですが
背景を変えるためにはどうすればよいでしょうか？
なにかよいアドバイスお願いします。

何度もﾚｽありがとう。
全部は公開できないのだけど、こんな感じの作りです。
特に凝ったことをしてるつもりはないのだけど・・・
今日はもう寝て、明日さわやかな頭で考えようと思います。

HTML
---------
<div id="contentsNavArea">
<ul>
<li class="navGenre">GENRE</li>
<li class="navCategory">CATEGORY-A</li>
<li class="navCategory">CATEGORY-B</li>
　：
　：
----------

つづき


CSS
----------
#contentsNavArea{
　width:190px;
　float:left;
}
#contentsNavArea li{
　text-align:left;
　font-weight:bold;
　font-family:Helvetica,Arial;
}
#contentsNavArea li.navGenre{
　padding:4px 0px 4px 10px;
　background-image:url(../../images/genre.gif);
　color:#FFF;
　font-size:12px;
}
#contentsNavArea li.navCategory{
　padding:4px 0px 4px 26px;
　background-image:url(../../images/category.gif);
　color:#FFF;
　font-size:11px;
}
----------

>>557
MacIEでも問題ないけど。OS9は知らん。

どっかにダメ文字コメントしてないか？

>>541
できました。ありがとうございます。

>>555
<td id="td-2">テストテスト</td>なら、CSSセレクタは
#td-2 td
じゃなくて
#td-2
だけだろう。

<ul><li>で画像を使った横並びメニューをしようとしているのですが、
ttp://202.133.126.132/dwstd/rollover/css_rollover06.html
の用な感じで、
画像の両端(上のサンプルですと「製品情報」と「会社情報」)に
画像(例え：left.gif、right.gifのような左右に付ける飾り)を持ってくるようにしたいのですが
<ul>とCSSで見せかけているメニューなのでどのようにしたらよいでしょうか？

>>562
一番正しい方法は、ulのbefore/after擬似要素で前後にイメージを書き出す。
次に正しい方法は、自身の背景を右に、ulのfirst-child擬似クラスの背景を左にする。
しかしこれらの方法はIEで7でも非対応。
でもなあ・・・・これ、文字置き換えじゃないじゃないか・・・・・・。
liの最初と最後に別々のid（製品情報と会社情報に合った奴）を付けて横幅伸ばして背景つければいい。
つーかこれJSでロールオーバーやってるが、全部CSSだけでできるぞ。

これ、NN4でも出来ているし、NN3でも出来ているよね。
要するに、こんな単純なことでも、同じことはCSSだけでは出来ない。
将来的に見ても、CSSだけでやるよりも、
JSできめ細かく制御できる可能性を残しておく方がベターな方法だろうねー。

JS信者するのは勝手だが、少なくともここはCSSスレ。

>>564
ロールオーバーだけできても、その他がNN4じゃできてないから意味ない罠。

>>563
早速の回答ありがとうございます。
なんかすべてのブラウザに対応させるのが面倒ですねー

ロールオーバー効果で
ttp://www.apple.com/education/hed/students/
↑K-12,Higher Edu~Shopのアイコンの部分
のようなやり方もあるようですが
こういう方法のほうがいいのでしょうか？

>>567
少なくとも*CSSスレで*聞くんだったら、当然画像をJSで入れ替えるよりいいと言われるに決まってるだろ。
すべてのブラウザって言うんだったら、はっきり言って>>566にもあるようにNN4で壊滅しとるから
レガシーマークアップでやるしかない。それでも今度はテキストブラウザや音声ブラウザで崩れるがな。
つまりページを振り分けるつもりがないんだったら、どれかを切り捨てる覚悟をしなきゃならない。
そして切り捨てるんだったら、最新の「正しい」技術で行ったほうが将来的には（後方互換的にも実は）ベターだ。

>>567
お前さんの質問は全てのブラウザに対応する方法じゃないだろ。
回答者のフリした工作員は放っとけ。
メーカーのサイトは全てのパソコンユーザーを対象にしているから、
テーブルレイアウトやJSを使って対応したりしてる。良い悪いは別の話。
普通の個人サイトでCSS使うなら、NN4なんてどうでもいい。

NN4使ってる人なんてまだいるのかな

>>570
少なくともN6よりは多い。

NN4使ってる人達はワザと使ってるのだからケアの必要などない。

Javascriptじゃ携帯対応できないけどな。

JavaScriptとか無しでOperaだけに適用させる方法ってまだある？

何を？

>>575
プロパティ単位でも、規則単位でも。

あるよ

教えてください。

Opera以外の人は見ないで下さいと書く。

でもそれを見ないことにはその意思は伝わらない。

縦並びの画像を使ったリストメニューでIEで見ると隙間ができてしまいます。
色々と調べてみたところvertical-align: topを指定すればいいと分かったんですが、
画像の高さが12pxだとうまくいきません。(20pxだと隙間がなくなります)
どうすれば隙間をなくすことができるでしょうか？
詳しい方是非ご教授ください。
ちなみに下記だと隙間ができてしまいます。

<style type="text/css">
<!--
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px;
}
img {
border: none;
vertical-align: top;
}
-->
</style>

<ul>
<li><a href="#"><img src="menu01.gif" width="150" height="12" /></a></li>
<li><a href="#"><img src="menu02.gif" width="150" height="12" /></a></li>
<li><a href="#"><img src="menu03.gif" width="150" height="12" /></a></li>
</ul>

それはIEの有名バグで、</li><li>間に改行があるとなる。

嘘を教えるな

<ul>から</ul>まで改行をなくして一行にしてみましたが
状況は変わりませんでした。
他に何か方法はありますでしょうか？

img {margin:0; padding:0;}

>>584
li　に　display: inline
img　に　display: block;

>>586

おお！うまく表示されました。
どうもありがとうございました。

JavascriptではなくCSSを使ってスクロールバーを消す方法を教えてください。

>>588
5W1H

環境によっては絶対にスクロールバーが必要になる環境も出るんだが、
どうするつもりだろうね。

>>590
後出し条件みたいで悪いのですが、
画面全体を使ってoverflow:autoを使う予定なので
元からあるスクロールバーがあると２重になって邪魔になりますよね。
なので元からあるスクロールバーをなんとか消したいのです。

非常に意味不明。
それをするためには画面全体とかいう方が100%にならなきゃならないが
100%を超えないのにスクロールバーが出るのはIEのクソ仕様だけだろう。

>>591
使い勝手の悪いものになるね

メニューだけは浮遊で固定させて
あとの要素はスクロールするという
擬似インラインフレームをやりたいんですよ。

>>592
FFｦﾀ乙

早い話がttp://fanta.10gallon.jp/のkenken，大正，decoy，hayashiyaようにしたいんだお(＾ω＾ )

>>558
遅ﾚｽだけど検証してくれてありがとう。
原因はキャッシュみたいでした・・・俺のﾊﾞｶ。

>>588
ありません。

ソースみりゃいいじゃん

>>599
見てもどこの部分なのか分かりません、

話にならんな

祖霊場教える事は無い

>>595
真剣にゲーム板の誤爆かと思ってしまった・・・

メニューをposition:fixed;してろ

右クリック不可にしたりスクロールバー消したり
カーソルをおかしな形にしたり意味がわからない
ゲストにとって迷惑この上ないのだけど

＞右クリック不可
CSSじゃこんなことできないｗｗｗ

リンクに対してボーダーで下線を再現しています。
この場合、<a>タグに囲まれたimgにも下線が出てきてしまうのですが、
どうやって解除すればいいんでしょうか？

下線を出したくてわざわざボーダーを*自分で*設定したんだろ？

>>606
いやまーそうだがｗ

a img {border: 0;}
とかであかんのかな

>>609
すいません。
その方法だと、なぜか下線が消えないようなんです・・・

text-decoration:none

>>610
なぜか、じゃなくて、だってaの方にborder設定したんだろ？
だったらimgを入れてるaの方のborderを解除してやらなきゃ。
ていうかだから*自分で*設定したんだろ？

一つ一つclass指定してborder:none;にするしかない

>>588
ttp://72.14.235.104/search?q=cache:JuZvL81QUhEJ:daikin.ddo.jp/kikaku/2004css_frame.html
ttp://www.k5.dion.ne.jp/~i-araki/css/tuki.html
ttp://desperadoes.biz/style/p_frame.php

table要素の上マージンを指定すると、
IEやOperaではきちんとcaptionの上にマージンが空けられるのですが、
FirefoxなどのGecko系ブラウザではcaptionとの間にマージンが空いてしまいます。

ttp://www.w3.org/TR/CSS21/tables#q5
によると、
この場合ではIEやOperaでの表示の方が正しいようなのですが、
Firefoxなどにおいても正しく表示させる方法はありますか？
もしあったら、それを教えて下さい。

caption使わない。

>>615
Gecko の振る舞いが CSS2 では正解
CSS2.1 はまだ WD だし、正しい/間違いのレベルの問題ではない

hnで代用

>>615
正解は>>617なんで、まあハックで頑張ってください。

＃IEは何でそんなところ*だけ*2.1準拠なの・・・

俺仕様だから

>>607
a:link, a:visited { border-bottom : thin solid ; }
a:link img, a:visited img { border-bottom : thin hidden ; }

多分これでおｋ
imgのvertical-alignも調整する必要があるかもしれない。

ていうか普通にunderlineにすればimgに線つかないのに、何でborderにしたの？

あーごめん、hiddenはtableじゃないとだめだった。
背景と同じ色を指定すれば良いかな。

>>621
それ以前の問題として、おまえは子孫セレクタの何たるかを勉強し直した方がいいと思う。

フィルタが、私の環境でだけ見れないんですが、何故でしょうか？
http://www.tohoho-web.com/css/filter.htm

このページの画像が全て同じに見えます。

>>624
フィルタはごく一部のブラウザしか対応してない。
使ってるブラウザ何よ

ブラウザも環境も秘密では答えられません

私の環境とやらを書け

>>625-627
そうなんですか。すみません。
IE6.0 SP2
WindowsXP Professional SP2

です。

>>628
そうか。なら表示は可能だな。

インターネットオプションのセキュリティレベル弄った記憶はあるかい？
ActiveXの設定で表示されないことがある。

OSは、Windows xp
ブラウザは、IEです。

質問があります。
CSS＋クリッカブルマップで教えて下さい

<STYLE type="text/css">
<!--
table {
background-image: url("./404.jpg"); /* 全体の背景画像 */
background-repeat: no-repeat; /* 背景を繰り返さない */
background-position: right bottom /* 背景画像の位置は右下 */
}
-->
</STYLE>
このようにしてテーブル内で背景画像を固定しております。
この固定してる背景画像にクリッカブルマップをしたいのですがどう記述すればいいでしょうか？

クリッカブルマップのソースです。
<img src='./404.jpg' usemap='#404' alt='fuck' border='0'>
<map name='404'>
<area href=○○○' alt='ホームページへ' shape='rect' coords='37,207,195,230'>
</map>
夜中にすいませんが誰か教えて下さい m(_ _"m)ﾍﾟｺﾘ
全然わかりません。

>>623
aのborderをimgのborderで隠そうってことじゃね？

>>630
クリッカブルマップはimg要素に使うものだが。

>>629
いじった覚えはないんですが・・・
今試しに、セキュリティレベルを中でリセットしてみました。

そしたら・・・・いけました！どうもありがとうございます！
知らずにいじってたんですね！

>>632
レスありがとうございます。
やっぱり不可能なんでしょうか？。。。

背景にクリッカブルマップ　なんてどこで覚えたんだい？

>>633
フィルタはDirectXで動いてるので、セキュリティ設定が何らかの原因で
レベルが変動するとActiveX関連、およびDirectX関連の作動がしなくなる。

>>636
ウィルスソフトいれたのが影響したんですかね？よく分からないけど、
直ってよかったです。ありがとうございました！助かりました！！

>>621のを検証してみた。ちゃんと消えて見える模様。

body{ background-color:#fff; }
a{ color:#00f; border-bottom:1px solid; }
a img{ border-bottom:1px solid #fff; margin-bottom:-1px; vertical-align:text-bottom; }

>>617
WDであるとか、RECであるとか、それらはW3C内部の作業過程の名称に過ぎない。
どれを「仕様」とするかは、ベンダーが都合好く選択する。

そもそも、W3Cにおいても、2年半も前からCSS2.0は「仕様」とみなされていない。
http://www.w3.org/Style/CSS/
> Specs, 1, 2.1, 3

>>639
フォローさんきゅ

>どれを「仕様」とするかは、ベンダーが都合好く選択する。

「正しい/間違いのレベルの問題ではない」って書いたのは同じ趣旨。選択の問題。

>そもそも、W3Cにおいても、2年半も前からCSS2.0は「仕様」とみなされていない

内部事情の詳しいところは知らないが、
2004年当時からCSS2.1はCRで、
すぐRecになると見込んでいたんじゃまいか。
今のCSS2.1では現存のUAで実装がほとんどなされていないものを
削除するかもって注意が書かれたのは、
そのせいもあるんだろうし。

こんにちはＨＰビルダー９でＨＰを作ってます。そこで質問があります。
３行の表を作り黒線で囲み３行の１行目と３行目の右線は白線にし
て１行目と３行目の表の高さをできるだけ低くしたいので文字の大
きさを１ピクセルにして点にしました。点にしないで方法などで下
のURLのような形で１行目と３行目の表の高さを２重線のようにでき
るだけ小さくしたいんですけどどうすればいいでしょうか？よろし
くお願いします。
　　　　　　URL　　http://work777.jog.buttobi.net/

点にしないで方法などで

<table>
<tr><td style="border-top : 3px double #333 ; border-bottom : 3px double #333">おいおいテーブルレイアウトかよ</td></tr>
</table>

ありがとうございます。
枠の色を黄色にするにはどうすればいいのでしょうか?

マルチじゃねーかボケ

#333を#ffff00にしろ

ps.広告のっけて質問とはいい度胸ですね

枠を黄色にするのは解決しましたが真ん中に一本の線を引きたいんですけどどうすればいいでしょうか?
２重線の短い距離で作りたいです。よろしくお願いします。

>>647
鉛筆でかけ

>>647
自分では何一つ努力せずに、わからない事は聞けばいいという厚顔無恥な態度には虫酸が走ります。
そんなクソサイトは白黒で十分。サーバー資源の無駄遣いにしか過ぎませんがね。

どのサイトがへぼサイト?

<table>
<tr>
<td style="border-top : 3px double #ffff00 ; border-bottom : 3px double #ffff00 ; width : 300px ; height : 1em ;">
<hr style="border-bottom : 3px double #333 ; width : 50px ; height : 3px">
</td>
</tr>
</table>

ID:2EJrsDHgが中国人に思えてきた

横じゃあなくて縦に黄色で引きたいんですけどよろしくお願いします

違いました
斜めでした

斜めに黄色い線を引きたいのです

氏ね

斜めの線を画像で作って<td>ここに入れろ</td>

URL　　http://work777.jog.buttobi.net/
くそサイト?

宣伝乙。

>>656
画像は使いたくありません
どなたかわかる方お願いします

<td>／</td>

もしくは

<td>＼</td>

おいおい縦線だよジャマしないでくださいね

>>661
>>654は見えてるか？

>>660
ＣＳＳではどう書けばいいですか？
あと角度も変えたいのですが

>>663
それはムリ
知ってる者はこの世にいないからあきらめろ
方法は画像作って<img>要素を中に入れるか<td>要素の背景にbackgroundプロパティ
を使ってイメージを背景として指定する以外ない。

そうですか
ありがとうございました

ギコナビ用のCSSファイルを作ってみたので
評価をお願いします
http://www.dotup.org/uploda/www.dotup.org7597.lzh

>>641
>>647
縦に黄色の線を引きたいんですけどお願いします。

650=657=661=667
641とはIDが別

本とに６４１ですよ

<table style="border-top : 3px double #ffff00 ; border-bottom : 3px double #ffff00 ; border-collapse : collapse">
<tr><td style="border-right : 3px double #ffff00 ; border-collapse : separate ;">abcdefg</td><td>hijklmn</td></tr>
</table>

こういうドアホを相手するとつけあがるだけっていい見本。

>>670の訂正

<table style="border-top : 3px double #ffff00 ; border-bottom : 3px double #ffff00 ; border-collapse : collapse">
<tr><td style="border-right : 3px double #ffff00">abcdefg</td><td>hijklmn</td></tr>
</table>

そしてマジメな真の馬鹿が答えるって図式

６７０さんありがとうございます。
真ん中の線を１本線にできますか?

<table style="border-top : 3px double #ffff00 ; border-bottom : 3px double #ffff00 ; border-collapse : collapse">
<tr><td style="border-right : 1px solid #ffff00">abcdefg</td><td>hijklmn</td></tr>
</table>

なんで試してみるなり、自分の頭で考えられんのだ

>>676
ビルダーユーザーだからしょうがない。
きっとHTMLがコリン星語に見えてることだろう

どうもありがとうございました。助かりました。これからは自分の頭を使って考えてみるようにしてみます。

ウソばっか

こういうときは仕様書に誘導するべきだと思うんだ

回答する事がオナニーになってる馬鹿につける薬はない

んだんだ

昨日回答した者です。気まぐれに気軽に、そして半分暇つぶしで回答してますた。
以後バーターでしか回答しないようにします。反省。。。

>>683
おにいちゃん　もうオナニーしないん？

CSSでタグを再定義した場合
定義した属性以外はタグのデフォルト値が適用されるという認識で
いいんでしょうか？

・・・・そもそもCSSでタグを定義することはできません。

<table>
<tr>
<td width="50%">hogehoge</td>
<td width="50%">hogehoge</td>
</tr>
</table>

これってCSSで可能ですか？

td {
width:50%;
}

IE、firefoxとopera
でcssで背景画像を指定した際に1pxずれがでます。
具体的には全く同じことを
ttp://digibot.jp/blog/archives/2004/08/post_27.html
こちらのサイトで指摘されていたのですが、
これに対する対処法はあるのでしょうか？

<>←タグ
a img div ←要素

http://wemolog.blog61.fc2.com/

ここで解説してる擬似フレーム、フレームの幅をpxで指定できるのがいいと思うんだけど。

あるよ

>>692さん
689へのレスでしょうか？
そうであれば教えていただけないでしょうか？

色々ブラウザのサイズを変えたり試してみたのですが、
どうしてもoperaで1pxほど背景画像がずれてしまいます。
またsafariでもブラウザのサイズによっては同様になります。
operaやsafariの背景画像の中央位置の算出方法とIEやFirefoxの
算出方法が微妙に違うのでしょうか？

>>688
これってテーブルタグ使わないでは無理ですかね？
ウィンドウを小さくしても大きくしても、
真ん中で伸縮したいんですけど。
無理かな

>>693
参考までに聞かせて欲しいんだが<body>へのcss指定は
どんな感じ

>>695さん

レスありがとうございます。
下記のような感じでbodyに背景を指定し、
<div id="main">も中央揃えにしてあります。

body {
margin: 0px;
padding: 0px;
background-image: url(../img/bg.gif);
background-repeat: repeat-y;
background-position: center top;
}
#main {
width: 730px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
background-color: #FFFFFF;
}

>>696
これって、センター揃えなんだよね？
<body>にtext-align:center;を加えてみても駄目？

>>697さん

text-align:centerでもだめでした・・・。
でさっき気がついたのですが、operaでもブラウザのサイズによっては
ずれない場合があります。
どうもブラウザサイズが奇数の場合はずれて、偶数の場合はずれない
みたいです。(反対かも)
ブラウザのサイズによってbodyの背景画像の中央とdivの中央の位置が
ずれることってありえるのでしょうか？
実現したいのは760pxぐらいの背景画像をbodyに指定して、
divを730pxにし、左右15pxずつぐらい背景画像をはみ出させたいのです。
divを760にしてそれに背景画像を設定すればずれはなくなるのですが、
できればbodyに背景画像を指定したいと思います。
IE,Firefoxは問題なくopera、safariがこの問題が起こります。

>>698
ああ、それはずれるよ。
単にラウンドの違い。VBの例の問題も絡んでるとかいう噂だがそこまでは知らん。
ハックで何とか汁。

すみません、物凄く初心者なんですが。
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}

↑みたいな感じでオンマウスで文字を凹ませたい場合、そのページのリンク全部に適応されてしまうのですが
ページの中で一つだけ凹ませたい場合はどうすればいいのでしょうか？

>>700は釣り

id か class 振ったらいかがでしょうか？

リンクを1つだけにする。

あいかわらずieはどうにもなんないね

http://f37.aaa.livedoor.jp/~xena/test.html

こういうことでしょ？

<input type="checkbox"> のチェック[レ]の色を任意の色に変更する方法は無いでしょうか？

>>705
チェック[レ] ってなに？

>>705
color で変わるブラウザもあるし変わらないブラウザもある

☑こういう事だろ？＞[レ]

<font color="#FF0000">チェック[レ]</font>

ﾜﾛｽw

>>709
スタイル使えよ

<font style="color:#FF0000">チェック[レ]</font>

おれなら<span>使うな

ホームページ制作王は、世界の権威として名高いCOMDEXが
21世紀のワールドスタンダードに認定したWebパブリッシングアプリケーションである。

ホームページ制作王に不可能はない。
不可能があるとすれば、そこが人類の英知の限界点である。

21世紀、世界のWebはホームページ制作王を中心に回っていくのである。
にもかかわらず、ここ日本では、心ない風評のため、まだまだ普及に
遅れがみられる。

ホームページ制作王を普及させないかぎり、我が国のWebは、
世界の趨勢の後塵を拝するばかりである。

世界が認めた高性能！ホームページ制作王
http://pc8.2ch.net/test/read.cgi/hp/1106508682/

>>706
チェックマークを指したつもりです。背景色と混同されないように書きました。
某サラ金業者に倣って書いてみたのですが。

>>707
WinXP IE6 SP2 なのですが、>>709,711,713 いずれもうまくいきませんでした。
IEでは無理なのでしょうか。

IEのせいにするなよ。
お前の知能のせいと知れ。

>>716
ではIE6でも色を変えることはできるのですね？

そういう問題じゃなくて
ネタのレスをネタとも判断できないようじゃ
あんたにゃ無理だってえの。

うちもXPIE6だけど、>>709>>712でチェック[レ]の色変わったよ

ほんとieはあれだよな・・・
あまり迷惑かけないでほしい

すいません、どなたか教えてほしいのですが、現在DREAMWEABER８でHP作ってるのですが
stylesheetをリンクすることができないんです。
どなたか助けていただけませんか？

＜７２１＞追記：すいませんコードはこうなんですが
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Team Telazio</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />

そのhtmlがおいてあるのと同じ階層にcssってフォルダを作って、
その中にindex.cssをおいてれば問題無い筈。

ああ、割れだとリンクできないよ。

>>721
1行目と2行目が閉じられていない。
それが原因では？

>>725
文書型宣言は(ry

割れ…とは？
その状態(?)でなければリンク可能？

これはひどい

>>727
そうですね。
正規品を買いなおしてください。

https://istore.adobe.com/b2c_adobe/b2c/init.do?shop=JP&language=JA&areaID=STFP
これです、これを購入する必要あります。

>>722
title晒してるように見えるがいいのか？

>>730
宣伝です(≧▽≦)

宣伝したけりゃvipでも行ってろ

ローカルで動くcssの文法チェッカってないでしょうか？

<div>
　<div class="top"></div>
　<div class="body">
　　本文
　　：
　</div>
　<div class="bottom"></div>
</div>

のように、空のdivを用いて、画像で以下のような角丸コーナーを実現しようとしています。
下記のようになるのを期待しています。
┏━━━━━━┓
│　　　　　　　 　│

しかしIEで、文字の大きさが「大」や「最大」になると、

┏━━━━━━┓

│　　　　　　　 　│

のように隙間があいてしまいます。
Firefoxだと隙間がなく、期待通り表示されます。
これはどのような問題が考えられますでしょうか？

ちなみに、
cssは、
.top {
　height: 16px;
}
というように、heightを指定しているのですが、
IEでは、無視されているようです。
例えば1pxにしても、何故かつぶれずに表示されてしまいます。

Firefoxでは、1pxにすると、ちゃんと1pxになるのですが・・・

どうやら、IEでは、たとえ1pxでも、height指定をすると、問答無用でdivの大きさが、
文字の大きさぐらいの高さになってしまうようです。
困った・・・

>>736
.bodyじゃなくて、最初のdivに背景色指定したらいいんでは。

いや、隙間が空くのを解消したいので・・・

divが、文字サイズに影響する？ようなので、
.topの font-size: 0; にしたら、何故か、隙間なく表示されました。
こんなんでいいのかなー。

このバグなのかなあ

ボックスの高さを特定の値より小さくできない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b158.html

>>735
line-height:0px;

>>739
IEが中身にあわせてボックスサイズを広げてしまってるだけ。
.topに font-size: 0;　でもいいけど、
.top　に overflow: hidden;　のほうがいいと思う。
両方やっときゃ確実。

ただ、角丸のために空のdivを入れるってのがそもそもどうかと思う。

>>740
だめぽ。

>>741
overflow: hidden;　
でも、いけますね。どちらも指定しておくことにします。

>ただ、角丸のために空のdivを入れるってのがそもそもどうかと思う。
空divは確かに疑問点は、あります。

それ以外だと、

<div class="body"><div class="top"><div class="bottom">
</div></div></div>

みたいにして、body に適当な背景を設定、
top に no-repeat top、 bottom に no-repeat bottom
する方法がありますね。
これもこれで、無駄にdiv重ねているので、どうかな？とは思います。

他にいい方法ないのかな？

>>742
まずアンタがちゃんとCSSを晒すことだな。
何が出来ないんだか理解出来ない。

できるんですけど、レイアウトのためにHTMLを書く必要があるのが疑問にと思うだけで、
出来ないとは言っていません。

勿体ぶるほどのものかよw

stricterかよ。スレ違いだ。

>>733
CSS Validator

JavaScriptとかで空divを生成するようにすればちょっとはマシなような気分にはなれないこともない。
というか、メンテナンス性という意味ではマシ。

そうやって丸角してる例
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2002/06c2.html#d26n02
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2002/07a.html#d10n01

質問です。
「全てをセンタリング」する意味で下の様な感じにすると、IEでは大丈夫なんですが、Fox　Netscape　opera（全て最新版）だと、
表が左よせになってしまいます。解決方法はありませんか？

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<style type="text/css">
<!--
body,table,tr,td,div { text-align: center; }
-->
</style>
</head>
<body><div align="center"><table border="1">
<tr>
<td>あああ</td>
<td>いいい</td>
</tr>
</table></div></body></html>

>>749
text-align: center; は
ブロック要素を中寄せするためのものではないから

>>750
回答ありがとうございます。
＞ブロック要素を中寄せするためのものではない
あたりから↓を見つけたのでちょっと調べてみます。
ttp://dhr.at.infos eek.co.jp/stylebug27.htm#7f

URL訂正：
http://dhr.at.infoseek.co.jp/stylebug27.htm#7f

margin-right:auto; margin-left:auto
↑を追加すればIE以外のブラウザにも対応できるとあったので試してみたところ上手くいきました。
お騒がせしました。

質問です
<a href="a.html" class="hoge">ここの色だけだけ黒色にしたい</a>
cssのhogeはどのように設定したらいいでしょうか？
color:#000000;にしても変わりません・・・
どうかよろしくお願いします。

>>754
a:link.hoge{
color:#000;
}

とか

ここの色だけだけ

ありがとう。たすかりました。
てか、なんでこんな時間に起きてるの？

なんじゃこりゃ

>>757
なんだ？この子供は？
じゃなんでコンビニは24時間営業なの？
なんで道路工事は深夜やってるの？
なんで吉野家は24時間営業なの？
朝起きて学校行って帰って夜寝るのが全ての人間ではない。

ごめんなさい
ただこんな時間に起きてて、ニートかなあ？と思って。
そうだったらボクと同じだから友達になって一緒にあそびたいな。と思って。

世の中には4時間睡眠とかの人もいるのだよ。

自問にしか見えない

>>755
違うよ。
a.hoge:link {color:#000}
http://www008.upp.so-net.ne.jp/mo--/css2/sum/selector.htm#sec8

大学生でまだ夏休みの人もいるかな

>>760
ニートヽ( ･∀･)人(･∀･ )ノﾅｶｰﾏ

はじめまして。

初歩的な質問です。既出でしたらお詫びします。

CSSのブロックレイアウトでIE6.0では正常に表示されているのですが
firefoxではブロックが縦に並んでしまいます。

この様な場合はどうしたらよいのでしょうか？？

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

float使ってる？

どんな風に作ってるか分からなければ回答しようがない。
ソースどぞ。

お前が縦に並ぶようなCSSを書いたから縦に並んだのであって
IEの表示は正常ではなく異常だと敢えて突っ込む

>>766
最初からIEで確認しながら作るとそうなる。
FXなどCSSを素直に解釈するブラウザで作るのが基本。

Another HTML-lint gateway で下のメッセージが出るんだけど、実際30種類くらいセルの状況に応じてサイズ使いわけてるんで、
スタイルシートに移管するとどれがどれだかわけわからなくなりそう。

<TD> の属性 `WIDTH` はあまり薦められない属性です。スタイルシートを使いましょう。
<TD> の属性 `HEIGHT` はあまり薦められない属性です。スタイルシートを使いましょう。

どうよ？
（テーブルじゃなく全部CSSでやれ、ってのは今回はなしで）

>>770
cssでやりたくないならその点数付けを無視するしかないでしょ
第一このスレstrictのスレじゃないし。


<td style="width:*px; height:*px;">に変えるとかすれば？

>>771
ありがとう。
検討してみるよ。

author styleをオフにしたときに半端なテーブルレイアウトだけ却って残ってうざいような気がするけどな。

>>769
実際、IE以外無視ってスタンスでない限り、それが一番早いような気がする。

>>770
セルに意味あるんだろうから、id振ればいい話なんじゃないの？

p {
　　background-image: url(./img/back.gif);
　　background-repeat: repeat-y;
　　background-color: #333333;
　　color: #ffffff;
}

p a {
　　background-color: inherit;
　　color: #ff0000;
}

<p><a href="./hoge/">あばばばば</a></p>

上記のような場合、p aでinheritを指定すると、
IEではa要素内の文字列の背景は、pで指定した背景画像がそのまま見えますが、
IE以外ではa要素内の文字列の背景は、pで指定した背景色になってしまいます。

だからといってa要素の背景色にtransparentを指定すると、Validatorで警告されます。
解決策は何かないものでしょうか？

>>775
IEはinheritを解釈しないだけ。他のブラウザの挙動が正しい。
最初からaに背景色指定しなければいいのでは。

>>776
ありがとうございます。
aに文字色は指定したいので、背景色を指定しない場合もtransparentと同じ警告が出てしまいます。

>>777
そんな警告無視すりゃいい。
満点取りたいヤツはそういう余計な装飾はしない。

>>777
文字ごと画像にすれば警告は出ないがな。

これはaだけでなく全てのインライン要素に言えることです。
親のブロック要素に背景画像をしていて、
その中のインライン要素の文字色を変えようと思うと、
背景色も指定しなければならず、見た目がみっともなくなります。

そもそもブロック要素に背景色を指定しているのですから、
インライン要素の背景色に透明を指定すると「背景色がない」
という警告が出ること自体がおかしいと思うのです。

皆さんはこの問題にどう立ち向かっているのですか？

>>778
ありがとうございます。
そうですね。

>>779
それはちょっとアレですね。

>>780
「警告」が出るといっても減点対象にはならないから、気にしない。

>>782
あ、そういえばLevel1の警告程度が出ても、
ValidなCSSということになってますね。
本当にありがとうございました。

>>783
警告をあまり鵜呑みにしないほうがいい。

>>784
そうですね。
ありがとうございました。

ホームページ上にサイズの大きい画像を貼りたいんですが
1枚べたで貼ると読み込みに時間がかかってしまうので
縦２横２に分割して貼りたいのですがこういった場合
XHTML＋CSSで表示したい時どうすればいいでしょう？
table以外でも出来ますか？
アドバイスよろしくお願いいたします。

<div><img src="./1.jpg" width="100" height="100" /></div>
<div class="float"><img src="./2.jpg" width="100" height="100" /></div>
<div class="clear"><img src="./3.jpg" width="100" height="100" /></div>
<div class="float"><img src="./4.jpg" width="100" height="100" /></div>

div { width: 100px; height: 100px; }
.float{ float: left; }
.clear { clear: left; }

>>787
今から試してみますね。
丁寧な回答本当にありがとうございました!

>>786

ただし、XHTML + CSSで実現したいという心がW3Cを意識するものなら
そもそも大きな画像を4枚に切り分けるといった行為自体が間違っている。

>>789
えっ！そうなんですか？
W3Cに順じて作成する場合は一枚使用するのが仕様なんですかね？

>>790

ちゃんと意味が通ってなくてはならんという点で。
CSS切ったら分割された画像が意味不明になるし。

>>787
それダメじゃん。

うっひょバレたか

初めまして。Web制作ページスレからきました。
CSSでロールオーバーをするにはどうすれば良いのでしょうか？

>>794
CSS ロールオーバー
で具グレ

>>795
有難うございます。
画像をロールオーバーするのは無理なのですね。
改めてJavaScriptで考えてみます。

ＣＳＳでできると何度いったら(ry

アホは放っとけ

うちの知り合いにもいるわぁ。　中間の内容すっ飛ばして、
最後の一文だけで理解した、と思いこんでる奴。
こいつマジアホなんやな、とずっと思ってるｗ

うちの知り合いにもいるわぁ。　普通に会話してると
文字なのに、自分だけ関西弁で書く奴。
こいつマジアホなんやな、とずっと思ってるｗ

.waku {
border: 6px solid #39f;
margin: 2em; padding: 1em;
width:400px;
overflow:auto;
}

このスタイルシートを使ってできた枠の中に文章を入れました。
文章は左揃えで、文章が表示される配置も左なんですが、
これを文章は左揃えで、文章が表示される配置を中央におくには何を追加したらいいのでしょうか？

ためしてみたものを書きます。

新たにbodyというクラスを作って、text-alignでcenterを指定しました。
が、ieだと意図した結果に表示なるのですが、operaとfirefoxとnetscapeは
何の変化もありませんでした。

>>796とは関係ないが

#btn1 a span{
display:none;
}

#btn1 a{
display:none;
width:200px;
height:25px;
background-image:url(./img/menu/menu1_r1_c1.gif);
background-repeat:no-repeat;
}

#btn1 a:hover{
display:none;
width:200px;
height:25px;
background-image:url(./img/menu/menu2_r1_c1.gif);
background-repeat:no-repeat;
}

<div id="btn1"><a href="#"><span>メニュー</span></a></div>

で、ロールオーバーどころか画像すら表示されないのはなんでなんだぜ？

>>802
いろんなことを推測して答えると
.waku　に　margin-left: auto; margin-right: auto;

２つの画像を横に並べようと思い
左側の画像にfloat:leftを指定し回り込ませ
表示させたところIEだと二つの画像の間に
小さな隙間ができてしまいます。
隙間を消すにはどうしたらよいですか？

>>803
display:none;

>>806
ありがとうございます
blockで解決しました

>>804さんの記述をプラスして、
margin: 2em; padding: 1em; を削除したら解決しました。
ありがとうございます。

もし同じことで悩む方がおられたときのために検索で見つけてきました
http://www.seo-equation.com/html/css/margin.html

>>803,807
釣りじゃなかったのか…

>>808
テンプレも読んでないのかよ・・

>>806
4枚じゃなくて2枚なんだな？
floatなんて使わなくても、<img src="./hoge1.gif"><img src="./hoge2.gif">でいいじゃん。

>>810
返事ありがとうございます。
質問の内容は左側に参考画像を置き右上に見出しの画像
右下に説明文みたいなレイアウトにしたいんですが
無理ですかね？
わかりにくくてすいません・・・

今度こそ釣りだな。

>>805
毎回質問が違うんでは、何コイツって思われて当然。
質問内容を整理して、なるべくならソースも出せばレスも付くかもね。

>>811
イマイチ良くわからんが、
多分vertical-alignを使えばいい感じがする。

>>813
確かにその通りだと思います・・・
もう少し自分で調べて出来る限り頑張ってみますね。
本当にありがとうございました！

質問です
TABLEでもHRでもいいので、点線はどうやって表示できますでしょうか？
自分はHRで点線作ってましたが、ファイアフォックスで表示されなかったりと大変苦労しています。
FireFOXでもIEでも表示できる点線をおしえてください。
どうかよろしくお願いします。

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

>>816
とりあえずソースを出そう。

border:dotted;でいいじゃん。

単なる点線がFirefoxで表示できないのにIEで表示できるっていったいどういう書き方をしたんだ。

これ見てください。
ttp://www.amazon.co.jp/s/ref=nb_ss_gw/249-7601267-6731500?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=css
商品と商品の間に点線が入ってますよね。
これとまったく同じことをやりたいのです。
どうかよろしくお願いします。

>>821
見本があるならソース見ればいいじゃん。

ソース見てわかりますですか？
自分はわからなかったです。。(だから質問しました）

もしよかったら教えてください。>>822さん。

border-bottom: 1px dashed #999999;

ソース見て分からないってどうよ？

わからないからわからないと言ってる。
>>825よ。おまえはバカか？理解できないか？
たとえばおまえはＣ言語のソース見て分かるのか？（たとえばの話だからな突っ込むなよ）

そもそもソースあるのに、見て分かったら質問してない。

>>826
そこまで初心者なら、初心者質問スレに行くだろ？
あっちのスレの方が上にあるしな。
それにCSSで指定されてるとわかったから、このスレで質問してるワケだ。
従って貴公の主張には無理がある。

>>826
ﾜﾗﾀ

つttp://www.w3.org/TR/REC-CSS2/

>>816
大人げない突っ込みをいれると点線など入ってない
点線と破線は違う

点線 ・・・・・・・・・・・・・・・・・・・・・・・・・・
破線 --------------------------

すでに824で出ているがサルベージしてきた結果↓
.n2 .searchitem
{
padding-top: 10px;
border-bottom: 1px dashed #CCCCCC; //ここ
padding-bottom: 10px;
vertical-align: top;
padding-left: 5px;
}

>>822,825,827は質問に答えるつもりがないならROMってればいいんじゃね
CSS程度ではお前さん（等）の頭脳を活かすような高レベルな質問は来ないよ

>>12

http://www.kjs.co.jp/

これはいけると思うが・・・

>>830
既に回答まで出てる質問に今頃なに？
アホ丸だし。

もらったhtmlファイルに
mso-
てCSSがあるんだけど何これ？

>>833
スレ違い。

マジれす頼む
CSS辞典に載ってないんだけど

>>821
表つくって下に点線指定したらOk

だからスレ違いがマジレスだってば。

mso-indentとか使ってあるのって作り直した方が良いかな？

・・・・・スレ違いの意味を知りたかったらググりなさい。

どこのスレが正しい？

ここか？
独自拡張、草案段階のCSSについて語れ
http://pc8.2ch.net/test/read.cgi/hp/1019912046/

google

質問です。
●html（標準準拠モード)
<div id="main">
<div id="sidenav">
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>
<div id="contents">
<h1>タイトル</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキス<br />
トテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
●css
#main { background : pink ; border : 5px solid red ; width : 80% ; margin : 10px auto ;}
#sidenav { float : left ; width : 15% ; border : 5px solid blue ; background : aqua ;}
#contents { float : right ; width : 82% ; border : 5px solid green ; background : lime ; margin-left : -100px ;}

floatされたボックスが浮動化してるのは分かるのですが、IE以外のモダブラで#mainのボックスの高さを中のボックス(#sidenav,#contens)の高さに伴わせるには、やっぱ#mainに任意の高さを指定しなきゃ駄目ですかね？

margin-left:100px; の意図は何？

>>843
floatをclearする。

>>844
ブラウザを伸縮した時に起こるカラム落ちを防ぐ為に指定したのですが、他に何かいい手ありますかね
>>845
どの要素に対してclearを指定したら改善しますでしょうか

>>843
テンプレ読め。

解決しました。ありがとうございました。

やっぱり解決してませんでした。

つまんないからそれ。

既に解決してます。本当にありがとうございました。

嘘です！解決してません！

うざっ、つまんねーネタをひっぱるなよ。

すみません自営業で悪戦苦闘してホームページを
作っている者です。現在SEO対策をするために見出しタグを作っているのですが、

単に

<h1>見出し</h1>

で作ると文字が大きくなってしまって
見た目がすごく悪いです。

重要度はそのままにして
色と大きさだけを変えるにはどうすれば良いでしょうか？？
どうかよろしくお願い致します

はあ困った・・・・

スタイルシートってもんをつかうといいよ

>>854
CSSの基礎の基礎です。テンプレにも参考サイトが紹介されてるので読んで下さい。
また、初心者向けCSS解説ページもググれば山ほどあります。
SEO対策に関しては他にスレがあるので、そちらを参考にして下さい。
困ったと言うばかりで調べる事もしないようでは、何も進歩しません。

>>854
とりあえずCSSの基礎知識くらいは勉強してから質問しようね、坊や。

解答ありがとうございます。
CSSというのを学ぶのですね。
がんばります！

スレタイも読まずに質問したとでも？
白々しいんだよ。ムカつく。

フォントとフォントサイズの指定を

font-family:verdana, arial, helvetica, Sans-Serif;
font-size:100%;

こうしてるんですが、
ブラウザが代わるとフォントのサイズがかなり代わってしまいます…
フォントサイズの指定は、small medium largeなどで指定した方がいいのでしょうか？

>>860
どんな指定をしたって、絶対指定だって、環境によって大きさなんか簡単に変わる。
だから何も指定しないのが一番。

>>860
相対指定だから一緒。
個人の環境のフォントサイズをベースに表示されるからそれがベスト。
どんな解像度やモニタサイズかがわからないからね。

>>861-862
ありがとうございます。
ある程度の誤差は仕方ないですかね…

いや、或る程度でもない。とても変わると思っておいて、
冗長を持たせたデザインにしないとつらいぞ。
人によって10px〜40pxくらい平気で違うから。

>>860
pxが一番いいよ

>>865
24pxで指定してくれ。

ブロックボックスの幅が、その親要素内いっぱいに広がるんじゃなくて、
内部に含む要素の幅に自動でぴったり一致するようにするプロパティ指定ってないですか？

display:inline

>>868
簡潔な回答どうもありがとうございます。
どうも思い違いをしていたようです。

と思ったら確かインライン要素ってブロック要素を含められませんよね。
幅指定のブロック要素を包含したい場合はどうすればいいんでしょう。
div{display:inline}
div *{display:inline}
というのは気が引けますが。

親ブロックの幅指定してfloatとかじゃだめなのかい？

>>871
float使うと親ブロックが縦にぺしゃんこになってしまうのが、どうも気に食わなくて。
内容物の高さに一致させたいんですが。

つ potision

>>872
親要素が div なら overflow: hidden
http://www.quirksmode.org/css/clearing.html

ただし、特定の要素で内容が消えるバグが MacIE5 にある
http://members.at.infoseek.co.jp/cssbug/detail/macie/b013.html

補足。要するに、親要素が pre とかならダメってことね。
>>870 を見る限り、親が div みたいだから、その場合は OK

>>874
FoxとOperaでは上手くいってますが、
手持ちのIE6では、ぺしゃんこみたいです。
http://www.geocities.jp/multi_column/float/05.html
にも、874さんの方法が書いてあったのですが、
IE6でもできるみたいなこと書いてありますね。

ちなみにレンダリングは標準モードですが、
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
では「WinIE6.0では標準・互換モードともに不具合の発生が確認されました。」
とありますね。

明日早いのでとりあえず寝ます。ここまでありがとうございました。

>>865-866
固定ウザイって言われるから止めとけ。

>>867
display: table;

pxは固定じゃねえええ

どう考えても固定じゃないの

pxは"ほぼ"固定に等しい

モニターの解像度により表示が変化するから絶対単位ではないのれす
たしかそうだとオモタ

固定かどうかと絶対相対はまた別の話。

サイズは固定だろw

固定か可変かってのは、ブラウザで可変操作できるかどうかだから
ブラウザの実装依存じゃないのか

絶対単位・相対単位と混同してないか
http://www.w3.org/TR/REC-CSS2/syndata.html#absrel-units

すまん、かぶっちまったよ

アクセス解析research artisanのランキングにCSSを使いたいのですが上手くいきません
cssにdl dt li　を書いたらできるのですが、ランキング以外の所も変わってしまいます
research artisanを使っている方がいましたら教えてください＞＜

ごめんなさいなんとなくわかりましたm(_ _)m

ごめんなさいなんとなくわかりましたm(_ _)m

widthで横幅の固定とか嫌われるかもしれないけど
固定してあった方がデザインもやりやすいし
文章とか470pxぐらいが一番読みやすいと感じる…でも指定すべきでないかな？
教えてエロい人

>>890
> 文章とか470pxぐらいが一番読みやすいと感じる

そう思う人はブラウザをその幅に縮めるし、そう思わない人はもっと広くしたり狭くしたりするのよ、可変なら。

ごめんなさいやっぱり教えてください＞＜

お願いします。

画像の境界線を表示しないように記述をしたのですが、
一部の画像には境界線を付けて表示させたいので
クラスで書きました。

img{
border:0px;
}

img.sen{
border : 1px;
text-align : center;
float : none;
}

HTMLの方へは
<IMG src="../gazou.gif" width="360" height="400" class="sen">
という記述をしましたが、IEで見たところ境界線が表示されません。
他のブラウザを入れていない＆携帯を持っていないため
他の環境でどのように見えるかの確認は出来ていません。
どうしたら特定画像のみ境界線を表示させることが出来るのでしょうか。
参考になるサイトなどありましたら教えてください。

img{
border:0px;
}

img.sen{
border : 1px !important ;
text-align : center;
float : none;
}

こんなんでました。

>>894
ありがとうございます。
さっそくCSSの記述を変更して確認してみたのですが（相変わらずIEのみですが）
変化なく、境界線は出ません。
イメージタグの中にクラスを書く位置が悪いのかと、
<IMG src="../gazou.gif" width="360" height="400" class="sen">
とか
<IMG src="../gazou.gif" class="sen" width="360" height="400">
とか変えてもみたのですがやはりだめのようです。

せっかくレスいただいたのに。すみません。

>>895
線の種類を書かなきゃだめよ。

　　ぐぐってね。

border:1px solid #000;

>>896
senの種類を書いたらできました！
直線も点線も思いのままでした。ありがとうございます！
お世話になりました。

>>896以外の役立たずな皆さんも一応ありがとうね

>>899
せめて口調を似せろよ、つまらん。

>>896=>900
必死だなｗ

同じネタをいつまでも楽しめるのはvipperの特徴だけど。

亀レスですが、
>>874
The width is necessary to trigger "hasLayout" in Explorer Windows (except for 7).
を読み逃していました。
大変失礼しました。ありがとうございました。

>>870
> インライン要素ってブロック要素を含められませんよね。

それはHTML用語での話だろ。
CSS用語では定義が違う。
http://www.w3.org/TR/CSS21/visuren.html#q5
http://www.w3.org/TR/CSS21/visuren.html#q7

pdfファイルは何のmediaに相当しますか？
ページをpdfに変換した時、cssが全く反映されないのですが。

釣りだと思いたい。

いや、マジです。

とりあえずCSSやHTMLの仕様書でも読んでみたら？

htmlからstyle.cssを読み込んでます。

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

・style.cssの内容は以下の通りです。
@import "common.css" ;　/*共通スタイル*/
@import "print.css" ;　/*印刷スタイル*/

・print.cssの内容は以下の通りです
@media print {
　* {
　color : #000 !important ;
　background : #fff !important ;
　border-color : #000 !important ;
　}
}

ブラウザと印刷プレビューはCSSが効いてますが、ページをpdfに変換すると、プレーンテキストの状態で変換されてしまいます。
これは仕様書を読めば解決しますか？

>ページをpdfに変換すると
どうやって変換したのかを言え。そこが一番肝腎なところだ。

PDFの何たるかを理解してなさそげ・・・

Adobe Acrobat 7.0 Proをインストールしてます。
IEのメニューバーに、Acrobatのボタンがあり、閲覧中のWebページをPDFに変換するのですが、自分で作ったhtml文書をpdfに変換すると、スタイルが無効になっており、
プレーンテキストの状態でpdf化されます。ちなみに２ちゃんをpdf化したら、ちゃんとレイアウトもスタイルも効いた状態でpdf化します。何が問題でしょうか。

それはソフトウェア板のほうじゃなかんべ

>>913
そうですか。。。
ありがとうございました。

list-styleでdisc(●)の部分を画像に置換したいのですが、
list-style-imageとbackground-imageのどちらでも置換できるのですが
どちらを使う方が正しい、というかよいのでしょうか？

断然background-imageだよ。
ブライザによる表示の違いが出ない。