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

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

関聯リンクは>>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でイケてるデザインサイト 32
　http://pc8.2ch.net/test/read.cgi/hp/1143863245/

【仕様書】
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/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

【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/1138720239/l50

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

ふぅ・・・何とか間に合った。
テンプレ間違えてたらごめん・・・

>>1
GJ！

連続投稿でかなりてこずったぜ･･･。

さて前スレの続きからですが。

>>1
お疲れです

すまん、そんなに行ってたことに気づかなかった。乙。

空タグとサイズの指定は別問題

>>前スレのやつ
取り敢えずサイズ指定はしなくていいから、
h2の中身だけ適切に入れてみ。

>>17
中身にテキストを入れると表示されました。
これは見出しタグなのに何も入れないと言う事が原因であり、文法的にもおかしいって事でいいんでしょうか？

ちなみに中身のテキストは表示させてたくないのですが、良い方法はありませんか？

<title>タイトル</title>でも駄目でした。

>>18
text-indent: -9999px;
とかにして飛ばせばいいんじゃない？

>>18
そもそも「中にテキストのない見出し」なんてのがおかしいのに早く気づいて。
画像はあくまで「中に見出しテキストの書かれている箱の背景(装飾)」であって、
見出しがなけりゃ背景もなくなるのは当然。

>>19
cssでやるには、そういう方法しかないのですね；


なぜ表示されないのか気になり
質問させてもらったんですが、使い方が間違ってるみたいですね

>>20

そのとろりですね；普通に考えればおかしいですよね
見出しの為のタグなのに中身のテキストがないなんて

>そのとろりですね；普通に考えればおかしいですよね

　とおり

ｈ２のサイズ指定

そのとろり
なんかやらしいｗ

ていうか
＞<title>タイトル</title>でも駄目でした
・・・・・・・・・・・・根本的にまずHTMLから勉強した方がよくないか・・・？

HTMLの基本から勉強しよう

>>24
いらんから消えなさい。

ん・・・俺、ずっとサイズしてたんだがいらないのか
サイズ決まってないのに背景画像っておかしくならない？

>>25,26

ですね、HTMLもCSSも見た目と言うか、形がとりあえず作れる程度で
文法や使い方など基本は正直分かっていません；

出直してきます。

みなさんいろいろありがとうございました！

>>28
サイズ決まってる背景画像とサイズ決まってない背景画像がある件。
そして今回それは全く本質に関係ない件。

あの質問（h2）からすると、
表示させたい背景画像はロゴやサイトIDのような物だと予想する。
そうすると、画像が切れずに表示されるにはheight指定は必要、と連想されたのだと思うが。

文字があればline-height分は確保されなければならないから
それはその後の微調整の話だろ

どっちにしてもheight,widthは必要か。

>>33
本当に理解力の足りない香具師だなおまえｗｗｗ

>>33
世の中には文字サイズ固定という悪しき風習もあることをたまには思い出してあげてください。

>>34
本当に理解力の足りない香具師だなおまえｗｗｗ

つーか、質問者がいなくなったので、
どうでもいい話なのだけどな。

論理で返せなくなるとすぐさま終了させる厨の法則。

このパターンは何度か見た気が…

ξ*ﾟ�听)ξ「何か？」

すみません、至急教えてください。
外部cssファイルを、特に変更点も無く上書きしたところ、
旧に反映されなくなってしまいました。
バックアップしてあったファイルを転送して上書きしても上手くいきません。
転送方法に問題があるのでしょうか。素人のため、解らないままやってしまっています。
申し訳ないのですが、どなたか宜しくお願いいたします。

おまえらおちつけ１おつ

>>41
バイナリで転送したとかじゃネーノ

>>41
読み込むHTMLの方を変更したとか。

HPビルダーのFTPソフト使ってるんですが、テキストモードで転送しました。
アクセス権とか関係あるのでしょうか。

文字コードや改行って関係ありますか？

>>41
文字コードが変わってどこか腐ったとか

>>45
パーミッションを間違えてたら駄目。
文字コードを間違えてても使い方によっては駄目。

その問題なく表示されてたときもビルダー使用？

SJIS、CR+LFになっているんですが、合ってますか？

>>50
それは手元での話だろうが、Unix系サーバじゃないの？
改行コードは正しくやってればそれでいいが、
ちゃんとShift-JISで書いてShift-JISで指定してるんだろうな。

最初に転送した時は、別の人間（プログラマー）だったので
別の専用ソフトをつかったのかもしれません

パーミッションは644ですが、大丈夫でしょうか。

>>53
合ってる。
HTMLのほうの呼び出し方を再確認。

>>54
htmlというかcgiのパスも合ってるんです。（変更していないので）

その別の人間に聞けよ。

>>56
それが行方不明のため･･･

>>57
呼出元のページと同じ文字コード、改行コードで保存して、バイナリモードでアップロードしろ。
この意味や方法がわからないのなら、わかる奴にたのめ。
ここで聞いててもきっとらちがあかん。

>>55
パスが合ってる合ってないの問題じゃない。
書き方が合っているのかどうかだ。

URL晒して見てもらうとか

>>57
まず前提として、ローカルでは正しく表示されてるのかい？

ボーダーの質問です
ボーダーの長さを要素よりも大きくしたいのです
普通にボーダーを指定すると→□
これを→#　にしたいのです
つまり
+-
|
どうすればいいのか教えてください

>>60
画像にする。

アンカー間違えた。
>>63は、>>62宛ね。

>>62
ttp://www.akatsukinishisu.net/itazuragaki/
ここを参考にしなされ。

皆様ありがとうございます

＜前スレ980 「空タグ」って何だよ。
<h2></h2> は「内容が無い」と表現するのが正しい。
CSSに手を出す前にHTMLの基礎用語ぐらい覚えろよ。

ちなみに本当の「空タグ」はこんな感じ：

<h2>見出し</>
<p><em>強調。</em>そして<>また引用句</em></p>

こんなの大抵のブラウザは理解しないけどね。

HTML の <br> も当然、「空タグ」じゃない。
XHTML の <br /> は、「空要素タグ」と呼ぶ。

http://adp.daa.jp/archives/000250.html
テンプレにあるこのサイトのページに、
＞横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。これを覚えておくとトラブルに巻き込まれることがグッと減る。
とあるんですが、理由を教えてください。

WebCreatorｓ　今月号　必見！

>>68
このテンプレは、IEが互換、他が標準モードでしょ。
IEには↓なんかのバグがあるからね。
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

次の様なメニュー一覧をCSSで組む事はできるでしょうか？
[MENU1]　[MENU4]　[MENU3]
　Sub1-1　　Sub2-1　 Sub3-1
　Sub1-2　　Sub2-2
　　　　　　 　Sub2-3
[MENU4]　[MENU5]
　Sub4-1　 Sub5-1
　Sub4-2

--html--
<ul>
<li>MENU1　<ul>　<li>Sub1-1　<li>Sub1-2　...　</ul>
<li>MENU2　<ul> <li>Sub2-1　...　　</ul>
<li>MENU3　...　</ul>

--仕様--
表示はドロップダウンではなく、全て表示されたままです。
MENUの表示幅はWindowサイズに従います。もし幅が上記例から更に
小さくなった場合、MENU3 は折り返され、2段目のMENU4 の位置へずれ込みます。

もし Sub2-3が無い場合、2段目の表示位置は上へ1行分詰められます。

>>71
それ以前にHTMLが間違ってる。
メニューとサブメニューが同階層はあり得ないだろ。

>>72
間違ってました？
改行数の制限で、少々インデントが分かりずらくなっていますが
例では <li> の中に <ul> という形になっています。

>>73
ulを入れ子にしたいのかも知れないが、>>72氏の言う通り、間違ってる。
あと最初の質問だけど、float:left;で出来る。

<p style="border:solid 1px blue;padding:10;">
<input type="text" name="" value="" style="width:100%;">
</p>

日本語で文字を入力すると、テキストボックスが横に伸びてしまいます。
バグ？？

>>72 >>74
無事floatで出来ました。 ありがとうございました！
しかし このhtml間違ってるのかぁ。うむむ…なんだろぅ
ま、また調べてみます。　ひとまずCSS解決しました

>>75
padding の単位が抜けてます。

>>76
pxを入れましたが、同じです。

>>75
自分のとこでは、おかしな表示にはならないな。
環境なに？

そもそも横に伸びるって？

>>75
なぜバグ辞典も見ないで質問するのか。

テキスト入力フォームの幅が文字入力時に変化する(5.5/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b085.html

>>76
間違ってないが、</li> が省略されて、>>72 と >>74 の頭がバグったんだろうな。

/* MENU4 が 2個あるのは間違ってるがｗ */

間違ってるじゃんｗｗ

正しいだろ。
間違いだというその勘違いを具体的に晒してみろよ。
一番最後の </ul> を書いてないという指摘は無しだぞ。

> 一番最後の </ul> を書いてないという指摘は無しだぞ。
これをいちおう説明しておくと、一番最後だけ
<li>MENU3　...　</ul>
 というふうに <ul> も含めた省略になっているから、
この </ul> は全体の終了タグだとみなせる、ということだから。

>>83
>/* MENU4 が 2個あるのは間違ってるがｗ */

>>85
それをHTMLが間違ってるとは言わない也

質問者ほうっておいてまた議論かい？

　　低レベルの糞共が！！

自分で言ったつもりのギャグを他人に奪われて理解もできなくて逆ギレか>>86

ラベルだけじゃなくて年齢も低そうだな。

うんこちんちん！！

>>88 の言ってる意味が分からない件について

81が
＞間違ってないが（中略）間違ってるがｗ
と言う。それを見て82が後者を取りあげて矛盾を揚げ足取りでからかう。
83がからかわれたともわからずマジレスしてきたので、85が丁寧に説明。
ところが86がまたトンチンカンなレスをしてきたので、
88が説明を兼ねて86をからかった。
まあ真面目な81=83=86っぽい香具師をからかってる俺達がいるだけだ、気にするな。
ていうか、これくらいわからないと掲示板で遊ぶのは辛くないか？

始めまして。豚切りすみません。
テーブルを
.alpha {filter:alpha(opacity=50);background-color:#FFFFFF;}
で半透明にして、その中の画像だけを
透化させないようにしたいのですが
.imgback {background:#FFFFFF;}
を設定して、画像の入ったセルに指定しても
透化されてしまいます。

どこが間違えているのでしょうか？

>>93
無理。
それ以前にfilterはCSSじゃない。

■HTML■
<div id="menu">
　　<h2>メニュー</h2>
　　<ul>
　　　　<li><a href="a.html">MENU1</a></li>
　　　　<li><a href="a.html">MENU２</a></li>
　　　　<li><a href="a.html">MENU３</a></li>
　　</ul>
</div>
<div id="contents">
　　<h2>コンテンツ</h2>
　　<dl>
　　　　<dt>2006/04/29</dt>
　　　　<dd>うはｗｗｗｗ</dd>
　　　　<dd>ちょｗｗｗｗ</dd>
　　</dl>
</div>

* {
margin:0;
padding:0;
}
#menu ul {
padding:1em;
}
#menu ul li {
display:inline;
}
#menu a {
padding:1em;
border-top:black 1px solid;
border-right:black 1px solid;
border-left:black 1px solid;
}

#contents {
border:black 1px solid;
border-right:black 1px solid;
border-bottom:black 1px solid;
}

html(抜粋)は>>95
ｃｓｓ（抜粋）は>>96

表示させるとIE6.0では隙間ができずに問題がないのに、
FF1.5ではメニューリストとコンテンツの間に縦1pxの隙間ができてしまいます。
これを解決する方法を教えてください。

宣言は
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
です。

よろしくお願いします。

>>97
ここ参考にすれば。
http://css.maxdesign.com.au/listamatic/horizontal05.htm

>>98
解決しますた。ｻﾝｸｽｺ

ブロック要素に適用するwidthについてお聞きします。

絶対配置やフロートさせたボックスのように子要素の幅を見て最小限の幅を取るような
ボックスと作りたいのですが通常は位置のボックスでこのような幅の指定をするにはどうすればいいのでしょうか？

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

>>94さん
そうでしたか…
てっきりfilterもCSSかと思っていました。
ごめんなさい。

>>101
それは違うだろ。

まあ、おまえの勘違いのおかげで、その中途半端なサイトをやたら薦めてる馬鹿が本人じゃないことが判った。

>>103
中途半端じゃないサイト&回答を教えて下さい。

>>103
完璧なサイト&回答を教えてください

最近は他人の回答にケチつけて喜んでるヤツばっかだな。

>>103
何が違う？
みんなが納得できるように説明してくださいよ〜〜
上・級・者・さん！

>>103の人気に嫉妬

お前らあまり>>103をいじめるなよ。
泣いたらどうするんだ

え〜〜〜〜ん

http://css.maxdesign.com.au/
↑ここみたいに
CSSの表示例というか
パーツとしてのテンプレートがたくさんあるサイトを教えてください。
国内でも海外でも構いません。

>>104-105
本人か？
本人なら、とりあえず、仕様書を一度くらい通読しろ。

>>107
"shrink-to-fit" と min-widthプロパティは全然違うだろ。
どんな馬鹿でも目で見て直感的に分かっていることだと思うぞ。

>>107

"shrink-to-fit"

  |a b c|

min-width

  |a b c                |

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

この宣言はIE6.0とFF1.5で比べた場合、
同じ寸法になりますか？
幅計算の処理は同じですか？

>>114
それCSSの問題じゃなくてHTMLの問題だからスレ違い。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

>>115
このスレで合ってるよ。
CSSのために文書型宣言を利用しているわけで、主役はCSSだろ。

つうか、ベンダがわざわざ詳述してくれているのに、個人の妄言サイト出すの好きだなｗ
極論すれば、二次情報以下は全て嘘だろ。なんで嘘かもしれないものを薦めるんだ？

＞CSSのために文書型宣言を利用しているわけで
宣言を勉強し直してきなさい、いつもの知ったかの人。

正確にはユーザエージェントのためだよな。
文書型宣言が無いと、そのHTMLの文法に基づいた解釈が出来なくなってしまう（かもしれない）。

>>99はニセモノです。解決していません。改めて書き直します。

■html■
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
--------中略--------
<div id="menu">
　　<h2>MENU</h2>
　　<ul>
　　　　<li><a href="a.html">メニュー１</a></li>
　　　　<li><a href="a.html">メニュー２</a></li>
　　　　<li><a href="a.html">メニュー３</a></li>
　　</ul>
</div><!-- menu -->
<div id="main">
--------中略--------
</div><!-- main -->

■css■
* {
　　margin:0;
　　padding:0;
}
#menu ul {
　　padding:0.5em;
｝
#menu ul li ｛
　　display:inline;
}
#menu ul li a {
　　padding:0.5em;
　　border-top:black 1px solid;
　　border-right:black 1px solid;
　　border-left:black 1px solid;
｝
#main {
　　border:black 1px solid;
}

このように記した場合、
IE(6.0)では綺麗に表示されるのに
FireFox(1.5)ではメニューと次のメインコンテンツの間にわずかな隙間が生じてます。
この隙間を埋める方法を教えてください。
メニューとメインコンテンツがピッタリとくっつくようにしたいのです。

ID表示してないのでスルー

>>120
li要素で、改行しなければいいのよ。

>>121
すみません。これでいいですか？

>>122
改行せずに
<ul><li><a href="a.html">メニュー１</a></li><li><a href="a.html">メニュー２</a></li><li><a href="a.html">メニュー３</a></li></ul>
と入れましたが、やはりメニューの下に隙間が開いてしまいます。

なんだ、「メニューの下」のマージンかよ！
もうちょっと詳しいソースうｐきぼん。

<div style="border-bottom:1px solid #111">
<p style="float:left">ああああああああ</p><br style="clear:left">
</div>

このソースでdiv要素の下部境界線はp要素の下に来るはずなのですが
IE6ではp要素とかなさって表示されてしまいます。何か対策はありませんでしょうか？

>>126
ＦＡＱに既出です。>>6のリンク先を見なさい。
http://cssbug.at.infoseek.co.jp/detail/winie/b079.html

>>125
■中略（上）■
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="HOGEHOGE">
<meta name="description" content="ほげほげ hogehoge">
<title>タイトル</title>
<link rel="stylesheet" href="simple.css" type="text/css" title="simple">
</head>

■中略（下）■
<h2>更新履歴</h2>
　　<dl>
　　　　<dt>2006/04/29</dt>
　　　　<dd>更新しました。</dd>
　　　　<dd>更新しました。</dd>
　　</dl>

CSSは>>120が全てです。

>>128の訂正

■中略（上）■
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="HOGEHOGE">
<meta name="description" content="ほげほげ hogehoge">
<title>タイトル</title>
<link rel="stylesheet" href="simple.css" type="text/css" title="simple">
</head>
<body>
<div id="index" class="container">
<div id="header">
<h1>ページタイトル</h1>
<p>ここには説明文があります。</p>
</div>

divのボックス内の底下に画像を置くにはどうすればいいの？

>>130
俺も悩みちう。divのright/bottomに内接するdivを置きたい。
が、どうも探した限りなさそうな雰囲気。

>>107
勝手な同定はやめていただきたい。
shrink-to-fitはCSS2.1、実装状況も判らない。
お前さんがブラウザ全般の実装を確認の上言ってるのなら、お前さんが正しい。
結局のところ、お前さんに言わせると、仕様書こそ完全なサイトという事になりそうだな。
スレ間違ってると思うけどな。

>>130
背景画像なら、位置をright bottomでいけるでしょ。

>>131
positionでいけないのか？

ＣＳＳで<img src="hoge">の画像って指定できますか？

>>134
マルチ乙。出来ねーよ。。

>>132
はアンカーミス？

.float { float: left }
.clear { clear: both } で

<div class="float">hoge</div>
<div class="clear"></div>

とやってもfloatが消えません。
どなたかご教授願います。

>>137
floatが…消える？？？

消すには.float{display:none;}

>>133
できた、できたよﾏﾏﾝ　ありがとう。
div relative に div abolute つっこみゃよかったのか。

誰か140を説明してくれ

あ、すいません。
floatで左詰めになっているのを解除したいということです。
<div class="clear">hoge</div>だと解除できるのですが、
<div class="clear"></div>だとできません。

>>147
ハイパーテキスト「マークアップ」ランゲージの意味を考えろ。
テキストのないマークアップに意味はない。

じゃあ
<div class="clear">hoge</div>
でいいんじゃないの？
文字はcssで非表示にできるんだし

>>147に期待！

>>144
変な解釈だな…

>>145
最近未来アンカー多いよ。

<div class="clear">&nbsp;</div>

>>142,137
クリア後も左寄せなのは普通だと思うが。
ソースが削り過ぎで、やりたい事がわかんないよ。

>>148
>>148
>>148

>>149
>>149
>>149



幸せか？

>>148 = >>150
＞クリア後も左寄せなのは普通だと思うが。

floatプロパティもclearプロパティも、初期値は"none"とされているが・・・？

各丸テーブルのようなものを再現したいのです。
<div class="corner1"></div>　←float: left
<div class="top"></div>　　　←float: left
<div class="corner2"></div>　←float: left
<div class="main">　　　　　 ←clear: both
</div>
<div class="corner3"></div>　←float: left
<div class="bottom"></div>　 ←float: left
<div class="corner4"></div>　←float: left
<div class="clear"></div>　　←clear: both
とやっているのですが最後でfloatが解除されません。
空DIVはやはりダメなのでしょうか？

>>152
ttp://www.openspc2.org/reibun/css/page/011/index.html
ttp://www.akatsukinishisu.net/itazuragaki/css/nifty_corners_behavior.html
ttp://deztec.jp/lecture/folio/07/index.html

>>151
いやそーゆー事じゃなくって、上手く説明出来ないんだが、
クリア後、中央寄せになったりしないだろ？

>>154
おまえ理解してないだろ。
float:leftの効果が維持される、と質問者は言ってるんだよ。

>>155
理解してないよ。
それをあのソースで確認出来るの？

この板も終りだな

今こそこれを使う時！

>>156
>>156
>>156

>>155
ごめん、君には謝らなくてはならん。
>>152でソース出してたの気が付かなかったんだ。
ごめんなさい。

>>158
君には謝らないよ。

それ以前の問題だな・・・

>>161
結局角丸だったんじゃん。どうしてそう絡むのさ。
君なんかキライだよ。

馬鹿だな154

>>162
キライにならないでよぅ＞＜；

> 君なんかキライだよ。

そんな154に萌え (´Д｀;)ﾊｧﾊｧ

馬鹿な子ほど可愛・・・・・
くねーｗｗｗｗ

>>166
のりツッコミｷﾀ━━━(ﾟ∀ﾟ)━━━!!!!

つまり>>166以外全て自作自演なんでつね。

もうGW厨が沸き始めたのか？
一斉帰省中の大学生（黄金厨）？

大学生ってこんな馬鹿なんだ・・・

信じられないと思うけど年々質は落ちているんです

これ、真面目に答えた俺まで一緒こたにされてるのか・・・？

そうだす

一緒こた、なんて言ってるようじゃあ。。

一緒くたの方言だよ＞一緒こた

＾＾；とりあえず、
<div class="clear"></div>はIEやFireFoxではfloatは解除できましたが
ネスケだと出来ませんでした。
空DIVはやっぱりダメですか？

>>176
>>>153

FireFoxでlistの下のmarginを外す方法を教えてください。

>>178
もしかして子要素のマージンが影響していないか？

>>179
ul に対しても、ul li に対しても、ul li aに対しても margin:0，padding:0にしたのに
FireFoxでわずかな空白ができてしまうのです。
これ以外に考えられる子要素はどこにあるのでしょうか？

ソース出せ

【html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title><link rel="stylesheet" type="text/css" href="index.css"></head><body><center>
<div id="a1"><div id="a2"></div><div id="a3"></div></div>
</center></body></html>

【css】
html,body{ margin:0px; background:white; }
#a1{ width:750px; height:93px; background:silver; }
#a2{ width:250px; height:93px; background:hotpink; float:left; }
#a3{ width:400px; height:17px; background:skyblue; float:right; }

id="a3"のボックスを、id="a1"のボックスの中の底下に持ってくるには、どうすればいいのでしょうか？

>>182
高さが決まってるならマージンかポジション。

CSSで文字の所にカーソル持ってきたら文字の部分の後ろの背景（色）
が浮かぶやり方教えて下さい。

>>184
:hover

>>181
■html■
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
--------中略--------
<div id="menu">
　　<h2>MENU</h2>
　　<ul>
　　　　<li><a href="a.html">メニュー１</a></li>
　　　　<li><a href="a.html">メニュー２</a></li>
　　　　<li><a href="a.html">メニュー３</a></li>
　　</ul>
</div><!-- menu -->
<div id="main">
--------中略--------
</div><!-- main -->

■css■
* {margin:0; padding:0;}
#menu ul {padding:0.5em;｝
#menu ul li ｛display:inline;}
#menu ul li a {padding:0.5em; border-top:black 1px solid; border-right:black 1px solid; border-left:black 1px solid;｝
#main {border:black 1px solid;}

このように記した場合、IE(6.0)では綺麗に表示されるのに
FireFox(1.5)ではメニューと次のメインコンテンツの間にわずかな隙間が生じてます。
この隙間を埋める方法を教えてください。
メニューとメインコンテンツがピッタリとくっつくようにしたいのです。

>>186
em→pxにした方が判りやすいと思う。
そんでFXは#menu ul {padding:0;}、
macのFX以外は#menu ul {padding:/*li aのpadding値-1px*/px;}で
なぜかピッタリくっつく。

>>186
まともなソースだしてくれよ・・・
それ以前の問題でIEでもFxでも崩れてて話にならない。

>>188
{が大文字(?)になってる所があるからじゃないかな。

>>185
ありがとう

説明がうまくまとめられなくてすみません。
↓を参考にしてみたのですが
http://css.maxdesign.com.au/listamatic/horizontal05.htm では
IE6.0およびFF1.5共に問題なく表示されるのですが、
CSSの#navlistの中にある
「　　font: bold 12px Verdana, sans-serif;　　」
この指定を取り除きました。

するとFF1.5では問題が発生するのです。(IE6.0は変わらず正常です。)
Item ****と書かれたul li a要素の下にわずかな隙間ができてしまうのです。
下線とピッタリくっつきません。
これをピッタリとくっつける方法を教えてください。

>>191
どうしてそう明後日なの？それはずーっと前にした回答へのレスですか？
そんで解決しませんって言って、今日はソース変えて来たんですよね。
だから>>187のレスしたのに、スルーですか。へえ。

相手するなよ、スルー汁・・・

>>192
それだとIE6.0で見ると1pxずれてしまうのですが…

すみませんこれが最後です。
http://puka-world.com/php/upload/large/img-box/1146402975982.txt
もうソースは変えませんのでどうかお願いします。

>>194
IEは直さなくていいじゃん。

ありがとうございました。解決しました。
でもこれって何なんですかね。
FireFoxの計算処理バグ？

>>196
> 計算処理バグ

おいおい、仕様書読んだことないのかよ。

Aはdisplay:inline;だから、フォントの下端からpadding-bottomが始まる。

ULはdisplay:block;だから、ラインボックス下端から、padding-bottomが始まる。
ラインボックスはline-heightで高さが決まる。

padding-bottomの開始位置をそろえるためには、
UL要素に適用されるline-heightをフォントの高さに合わせればよい。

>>197
仕様書の人ですか。
実装は仕様書通りとは限らないですよ。

仕様書どおりでないのならバグ。っていうか実装ミス。
仕様が明確でないのなら実装依存。
ただそれだけのことだ。

>>133と>>140の話って
<div id="hoge1">
<div id="hoge2">
</div>
</div>

#hoge1 {position : relative;}
#hoge2 {position : absolute; bottom : 0; right : 0;}

ってすればhoge1の左上を基準にしてhoge2を絶対配置してくれるってことですか？

#hoge1
の横幅と縦幅を指定しないと無理

>>201
自分も疑問だったんだけど、幅指定以外はこれでの？
hoge1の位置指定がなくてもできるのかな？

ここ、ID表示になればいいのになぁ・・・

ＣＳＳの仕様書を完全に日本語に翻訳したものっていずこ？

>>204
テンプレ

>>200-202
<p style="position:relative; border:1px solid black;">
あ<br>あ<br>あ<br>あ<br>
<span style="position:absolute; right:0px; bottom:0px; border:1px
solid red">■</span>
</p>
<table style="width:50%"><tbody><tr><td>
<p style="position:relative; border:1px solid black;">
あ<br>あ<br>あ<br>あ<br>
<span style="position:absolute; right:0px; bottom:0px; border:1px
solid red">■</span>
</p>
</td></tr></tbody></table>

少なくともfxでは望む結果になるよ。

>>203
ageれば表示されるよ

>>207
sageでもって事だろ

マジレスされても・・・

タグについて分からないことがあるのですが、板違いでしたらすみません。

YouTubeという動画サイトなんですが、下の方にコメントを送るスペースがあり
通常は文字のみのコメントが多い中、時々このページ
http://www.youtube.com/watch?v=G_7n34fiB1Q
のように動画のリンクを貼ったコメントを見かけるのですが、
このようにコメントする方法をご存知の方はいらっしゃらないでしょうか...？
もしいらしたら教えていただきたいのですが、どうぞよろしくお願いします！

>>210
スレ違いすぎる。ここはCSSについての質問スレだ。

Webサイト制作初心者用質問スレ Part 161
http://pc8.2ch.net/test/read.cgi/hp/1145354205/l10（誘導）

場合によっては（サーバサイド技術を扱うなら）板違いかも。

誘導ありがとうございます！
申し訳ございませんでした。

ページ全体を、<center></center>でなく、cssで、中央揃えにするには、どうすれば出来ますか？

>>213
左右のマージンを「auto」にする。

ただしWin IEには実装上のバグを持っているのでちょっとしたテクニックで配慮させる
必要がある（かもしれない）ので、次を参照。
http://www.mozilla.gr.jp/standards/webtips0004.html

>>213
文書型宣言を標準モードにしてmargin:auto。

お前ら詳しいな
お前らくらい詳しくなるには何年かかるんだ？

>>216
経験だよ

>>214
>>215
ありがとう＾＾
できました！

それと、リストタグで、右にズレ寄るのを無くすには、どうすればいいでしょうか？

リストタグを使って、文字や、画像を入れて表示させると、

←空白→・あいうえお
←空白→・かきくけこ
←空白→・[画像１]
←空白→・[画像２]

と、なります。

これの、空白をなくしたいのですが、どうすれば、このズレを無くせますか？

>>218
padding, margin

>>218
li要素にmargin-left:0が利くように適用させてやれ。

>>204
CSS2勧告の和訳は存在するが、これは現在の仕様ではない。

>>197
Firefoxのバグだよ。
これだからFirefoxは使えない。

>>222
>>222
>>222

[ hogehoge ]
[hoge] |------------------|
[hoge1] | ﾌﾚｰﾑ |
[hoge2] |__________________|

↑みたいにテーブル([hoge]〜[hoge2])作った横にｲﾝﾗｲﾝﾌﾚｰﾑ作るのってどうやるのー

>>224
CSSは正しいHTMLから。

>>224
全部テーブルで書けば？

>>224
CSSは正しい日本語から。

>>223
火狐信者乙！

>>228
>>228
>>228

>>229
そんなことしか書けないの？

IE厨もFF厨もよそでやってください。

>>230
>>230
>>230

　　　　 　　／⌒ヽ
⊂二二二（　＾ω＾）二⊃
　　　　　|　　　 / 　　　　　　ﾌﾞｰﾝ
　 　　　 （　ヽノ
　　　　　 ﾉ>ノ
　 三　　レﾚ

>>232
これだからFF厨は…
┐(´-｀)┌

質問です。
liタグを使ってメニューを作成しようとしたときに、
<li><a href="#"><img src="〜"></a></li>
<li><a href="#"><img src="〜"></a></li>
とHTMLをコーティングして、CSSのほうで
li{
display:block;
margine: 0px;
padding: 0px;
}
を指定し、画像と画像の隙間をなくした状態で表示させようとしています。
ただ、この方法だとWin IE6で表示させると画像と画像の間の縦の隙間ができてしまうのですが・・

[画像]
隙間
[画像]
のような感じです。

>>235
img { vertical-align : bottom; }

>>236
思ったとおりに表示できました。ありがとうございます。

>>236 間違った対処法教えないように

>>238
じゃ・・・教えてやれよ。
何で投げっぱなしなのかねぇ。

238じゃないが、
margine: 0px; 　←これか？

質問させてください。
たとえばaddress内で多重<br>を使わずに

---
株式会社●●
所在地：●●県●●市……

TEL：xxx-xxx-xxx
FAX：xxx-xxx-xxx

E-mail：[email protected]
---

のように、所在地とTELの間、FAXとメールアドレスの間を空けるようにしたい時
お勧めの方法は何かありませんでしょうか？

それはCSSじゃなくてHTML。
個人的意見だが<dl>とか定義型リスト使ったらどうかな？
行間をあけるのはCSSだが。

>>242
address内はインラインのみ。

>>241
連絡先部分のみaddressにする。
定義リストでもなんでもいいけど、
会社名、所在地、電話、FAX、メールアドレスの「その部分」だけをaddressでマーク。
dd内だったらブロック要素も可だから。

>>241
あ、spanで囲ってdisplay:blockしてしまう手もある。

つーか、それくらいだったら、素直に<br>でいいｷｶﾞｽ

>>241
<pre>〜</pre>でいいんじゃねーの？

>>246
おまえな・・・もうちょっとまともに勉強してから答えろよ。
preもaddressも、自身はブロック要素で、中にはインラインしか入れられない要素。

またしても質問者不在の低レベル議論かえ？

>>242-247
回答ありがとうございます。

見た目の操作だと思ったので、こちらで質問させていただきました。
やはり、そのようなタグ使いをしないと実現出来ないみたいです。

重ねて感謝いたします。ありがとうございました。

画像を数個用意して、リスト文字の代わりに使うと、ＩＥの時だけ、上に、数ｐｘ分位、上がります。
NN○,FF○,Opera○,IE×
("・"は、ul{ list-style:none; margin:0px; padding:0px; }で、無くしてます。)

↓リストはこんな感じ↓
──────────←NN,FF,Operaの場合（上にズレない）
　 ・[画像150px*30px]
　 ・[画像150px*30px]
　 ・[画像150px*30px]
　　　　　　　↓
─・[画像150px*30px]─←IEの場合(上にズレる)
　 ・[画像150px*30px]
　 ・[画像150px*30px]↑

どうすれば、下に下げることが出来るのでしょうか？

>>250
全てのmargin・padding殺してないなら、上の要素の影響かも知れんし、
もっとソースないとわからんよ。

>>250
上の線の要素が何であるのか
まずはそこから教えれ

空箱にしてbackgroundにその代わりの画像とやらをつっこんでて
フォントの高さのとりかたの違いで箱の大きさが変わってるとみた。

Operaで、width:100%;にしたら、余白が残るんですが・・・

>>254
html, body { width: 100%; }

>>255
右側は、くっ付いたけど、左側がまだ、空いてる・・・

Operaはpaddingを持つ

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

html,body　{　height:100%;　}

コレって、Operaで効く？

何質問変えてやがんだコノヤロー

スルーで。

>>259
あほぉ・・・
試してみてから質問しろや。

あと全角スペースやめろや。あほお・・

WindowsでSafariの表示を確認したいのですが
どうすればいいですか？

>>263
中古でいいからMacを買ってOS Xにすれば桶。

>>263
Mac持ちの友達を作る

もしくはMac板で鑑定してもらう

メニューボタンの設計で悩んでいます。

--------------------HTML--------------------
<ul>
　<li><a href="hogea.html">ほげA</a></li>
　<li><a href="hogeb.html">ほげB</a></li>
　<li><a href="hogec.html">ほげB</a></li>
　<li><a href="hoged.html">ほげD</a></li>
</ul>

---------------------CSS---------------------
ul {
　list-style:none;
}
li {
　float:left;
}
li a {
　display:block;
　border:1px solid black;
　text-decoration:none;
　padding:10px;
}

このように指定したら
Firefoxでは黒枠内のスペースもしっかりとアンカー要素に含んでいるのに
InternetExplorerでは文字の部分しか含まれません。
InternetExplorerでも黒枠内のスペースをアンカー要素に含ませるためには
どのように修正すればよろしいでしょうか。

すみませんage忘れました。

メニューボタンの設計で悩んでいます。

--------------------HTML--------------------
<ul>
　<li><a href="hogea.html">ほげA</a></li>
　<li><a href="hogeb.html">ほげB</a></li>
　<li><a href="hogec.html">ほげB</a></li>
　<li><a href="hoged.html">ほげD</a></li>
</ul>

---------------------CSS---------------------
ul {
　list-style:none;
}
li {
　float:left;
}
li a {
　display:block;
　border:1px solid black;
　text-decoration:none;
　padding:10px;
}

このように指定したら
Firefoxでは黒枠内のスペースもしっかりとアンカー要素に含んでいるのに
InternetExplorerでは文字の部分しか含まれません。
InternetExplorerでも黒枠内のスペースをアンカー要素に含ませるためには
どのように修正すればよろしいでしょうか。

>>266
OS・ブラウザのバージョンは？

ふと、疑問に思ったのですが、代替テキストの、alt=""で、半角スペースを入れる際、 を使わなくてもいいのでしょうか？

>>268　WindowsXPです。
InternetExplorerは6.0でFirefoxは1.0で確認しました。

>>269
どうでもいいけど、厳密にしたいなら実体参照。

>>270
width、heightが入ってないからだと思う。
しかしFX1.0って古い。。

>>271
ありがとう。うまくイッたよ。

イッちゃったのか？

厳密ｗｗｗ

Webサイト制作初心者用質問スレから誘導されました。
質問です。

あるboxを position:relative で位置指定した時、
そのboxは指定した位置に動くのですが、同時に
そのboxが position:static で位置指定するときの位置に、見えないboxのようなものができてしまいます。

どうしてなのでしょうか？

>>275
むこうでされてたのと同じ答えしか言えない。
そういうものだから。

>>276
そうなんですか…ありがとうございました！

>>275
マルチポストは氏ね！

>>278
マルチじゃないよ。
ちゃん誘導されていたもん。

<p><a href="index.html"><img src="img1"></a><font>あいうえお<br>か<a href="index.html">きくけこ</a><font></p>
<p><a href="index.html"><img src="img2"></a><font>あいうえお<br>かきくけこ<br>さ<a href="index.html">しすせそ</a><font></p>
　　　　　　　　　　　　　　　　　　　　┏━━━━━┓あいうえお
　　　　　　　　　　　　　　　　　　　　┃　　img1　　 ┃かきくけこ
　　　　　　　　　　　　　　　　　　　　┗━━━━━┛
　　　　　　　　　　　　　　　　　　　　┏━━━━━┓あいうえお
　　　　　　　　　　　　　　　　　　　　┃　　img2　　 ┃かきくけこ
　　　　　　　　　　　　　　　　　　　　┗━━━━━┛さしすせそ
　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　┏━━━━━┓あいうえお
　　　　　　　　　　　　　　　　　　　　┃　　img1　　 ┃かきくけこ
　　　　　　　　　　　　　　　　　　 ┌┗━━━━━┛
(空間が無いものとして下さい) ┤【1行分の空間が空かない】
　　　　　　　　　　　　　　　　　　 └┏━━━━━┓あいうえお
　　　　　　　　　　　　　　　　　　　　┃　　img2　　 ┃かきくけこ
　　　　　　　　　　　　　　　　　　　　┗━━━━━┛さしすせそ
こうすると、NN、FF、Operaだと、下のimg1とimg2の間が、1行分空かなくなって、キレイにピッタシくっ付きます。
IEだと、ちゃんと1行分空くのです。
どのようにすれば、1行分あけることが出来るのでしょうか?

>>280 ここはCSS質問スレなんだが。。

CSSで、対処するのかな？と思いました。。。

>>280
fontタグ閉じろよ。。。っと

じゃあどういうCSSソース書いてみたのか書け。
一から人にやって貰おうってか？少しは自分で努力しろ。

*{
width:562px;
height:186px;
position:absolute;
top:0px;
right:0px;
border-bottom:1px solid silver;
border-left:8px solid gray;
padding:0px 15px;
text-align:left;
overflow:auto;
}img{
float:left;
clear:both;
}

>>285
そんであのhtml？
釣り決定！

>>285
マジレスすると、ちゃんと基礎から勉強した方がいいよ。

<a href="http://www.google.com/"><img
   src="./nullpo.gif"
   alt="Nullpo" /></a>

a:hover { background-color: #336699 }
img     { margin-top: 30px }

こうすると、:hover疑似クラスが適用された際、背景色がIMG要素の位置から
ズレて表示されるんだけど、これは仕様？

IEは大丈夫で、Mozilla（Gecko）系がダメだったのでGecko系のバグかなぁ…と、思ってたのだが
Konqueror, Safari（KHTML）やOperaでも同様の動作なので、むしろこれはIEのバグで、他は仕様通りの動作なんでしょうか？

よろしくおねがいします。

もしかしたらalt属性が影響しているのかも…
文字サイズを拡大してみたら背景色が大きく表示された。

しかし:
a img { background-color: #336699}

ではちゃんと背景色が表示される。動的疑似クラスだけ例外なのか？

質問です。
<dl>
<dt>test</dt>
<dd>1</dd>
<dd>2</dd>
</dl>

* {
margin: 0;
padding: 0;
}

dt {
width: 100px;
float: left;
}
dd {
margin-left: 100px;
}

としたときに

IEだと、ddの2番目以降がずれてしまうというバグがあるとおもうのですが
htmlには無駄なIDとCLASSとかくわえず
CSSだけでなおすというのはむりですかね。

ハック技を使っていろいろためしてみたのですが、できなかったので
何かいい方法がありましたら
おねがいします。

文字サイズの指定単位は結局どれがええの？
色んな環境で閲覧することを考慮すると、
相対指定の方が良さそうだから俺は%で指定してるんだが。
emはIE6ブラウザ側で標準文字サイズを変更した場合に表示が変になるそうだ。

おなじく％つかってる。

px指定したいのだが、IEではフォントサイズの 拡大/縮小 が出来ないので
結局はフォントサイズ固定になってしまうので使えない。

糞IEなんとか汁

同意
293

http://www.geocities.jp/test_sample2006/

こんなん作ったんですが右コンテンツがフロートしてくんないっす。
初めてcssだけで作ってみたんだけど、かなり難しい。

もう、疲れました。根本的な間違い等があったら指摘をお願いします。
ほんとお願いします。

>>295
初めてでこんなの作っちゃうの？
凄いっす兄貴

>>288
> a:hover { background-color: #336699 }
背景色はa要素に適用される。
> a img { background-color: #336699}
背景色はimg要素に適用される。

背景色の適用される要素が違うだろ。
img要素に背景色をつけたいならa:hover img {...}としろ。

>>297
thx!!
勉強になりますた。

>>296
テーブル使ったのはけっこう作ってたんですが、今回は脱テーブルを目指してcssのみで
作ってみたんです。
イラレで完成品を作ってファイアーワークスでスライスを切って、テンプレートを
参考にしながら組んだんですが、力及ばず、壁につきあたっている次第です。

>>299
cssのみでやるなら、「標準モード」で

div id=contentsだよな？
一応右側にはなってるぞ？
つうかどうしたいのか今いち分からないから
簡単なイメージでもいいからあげてくれ。

失礼しました。こちらが完成予想図です
http://www.geocities.jp/test_sample2006/zentai.gif

で、ちなみに私のブラウザ(osx,camino)からはこんなふうに見えてます。
http://www.geocities.jp/test_sample2006/grab_camino_site.jpg

よろしくおねがいします

イメージは直接見られない様になってるみたいです。urlをコピペしてアドレスフィールドに
直接ペーストしたら見られました。

>>302
margin、border、paddingというものを勉強すると幸せになれると思われ。
あとは表示位置の指定とか。
ttp://www.kanzaki.com/docs/html/htminfo17-2.html#box

>>303
そんな特殊なブラウザ使うなってw
Safariだとほぼ予想図通りだよ。MenuとTpicsは同じように下半分切れてるけど。

ヽ(`Д´)ﾉ caminoをばかにするなｳﾜｰﾝ！

>>306
ばかにしてないし、そんな事言っても、何かしらバグがあるから、
予想通りにならないんでしょ。

>>299
正しいcssは正しいhtmlから

<dl>の中身が不正

>>302
ごめんっ！Safariでもヘンだった。スマン。
改めてソース見ると、#contents{position:right;}って何？

いやおまい、そんなネタにマジレスされても……

HTML4.01 Transitional としてチェックしました。
126個のエラーがありました。このHTMLは -250点です。タグが 10種類 74組使われています。


XHTML1.0 Transitional としてチェックしました。
170個のエラーがありました。このHTMLは -664点です。タグが 10種類 74組使われています。

>>309
間違いです。いりませんね、こんなのは。
消してみましたが、表示は改善されず、、、、

>290
どなたか案あるかたいましたら

>>312
いやいりませんじゃなくて、じゃあどうやって位置決めするんだ？

>>313
ここ参考になるかも。
http://www.stylish-style.com/csstec/basic/p-dl.html

なるほどー。

やっぱりddにクラスつけないとこの問題はむりなのかな。

>>315
他に影響ないならdd{hoge}でいいんじゃまいか。

なんやhogeって。

>>306
おまえのかーちゃん ca mi no 〜

これからは、"Gecko"を"月光仮面"と呼ぶことにしないか？

あきらめようIEは。

>>314
左メニューと左下トピックを含んだコンテナが
float:left
なのでそれに押し出される様にコンテンツが右に配置されて、
その後に続く予定のfooterでfloatを解除してやればと思ったのですが、、、、
もしかして自分はなんか勘違いしてるのか？ちょっと調べてみます。

とりあえず、dlをちゃんとつかったほうがいいかも。
>321

フローとでやってもいいけど、あのデザインなら
ポジションでやってあげてもいいかも。

>>319
面白いけど やっぱり「ヤモリ猿人」にしない？

できたーーー！
たぶんこれでかなり当初目指した形に近づきました。これも皆様のおかげです。

おめでと

>>321
つぎは>>311を直そうな

すみません・・・もう一度質問させてください。
>>297を読んで思ったのですが、そもそもbackground-colorプロパティって
値を子要素に継承しませんよね？

それがimg要素に継承されている（IE6）ってことは、これはIEのバグなのでしょうか？

ヒント：transparent

>>328
そうなんですけど、Firefoxなどでは「 a img {...} 」としないと a要素の子であるimg要素に
スタイルが適用できませんが、IEでは「 a {...} 」だけでimg要素にスタイルが適用できてしまいます。

これはいったい・・・？

答えがもう分かってるんだろ？
ここは質問スレッドなんだが。

>>300
つまり、答えは「バグ」でよろしいと？

htmlをきれいにしようと思って、w3cにかけてみたのですが、
<や>が無いですよ、というエラーがたくさん出ます。ソースを見る限りではいたって
普通らしいのですが、これはいったいなんなんでしょうか？

うむ。
初期値の「transparent」を上書きしてるんじゃない？

>>332
普通の文字列中に「<」やら「>」が入ってるのでは？

w3c
よりlintでやってみたら？

リスト(li)をinlineで横に並べた時、下に微妙な隙間ができてしまうのはFirefoxのバグ？
ul li のpaddingやmarginに対して0を指定しても隙間が埋まらないんですけど(ﾉ∀`)

この前から全く同じ質問を繰り返している>>336
消えろ。

>>336
出来ないよ。ソース出せば？

>>338
相手スンナ、いつもの香具師だ

>>336
ulのline-height

あ、悪い答えるべきじゃなかった？きをつける

>>339
ああそうか。俺前に回答してやったのにな・・・。

Firefox擁護厨必死だなｗ
ぎゃははははははは!!

??????擁護と捕らえるべきなのかこれは??????

Firefoxのバグじゃなくて、置換インラインの場合半角スペースをレンダリングする仕様じゃなかったか？
嫌ならfloatしろ。

もう何度この話題を繰り返せば気が済むんだよ・・・
いいかげんスルーしてくれ。

>>345
置換とか関係なしに上下に空く仕様になってると思う。
pに枠線付けて、中に何でもいいから書いてみそ

Firefoxってバグ多いな

IEには負けるけどね

>>348
CSSの実装については大丈夫だと思うよ。
Web技術の標準にはかなり準拠しているし。

問題があるとすれば安全性だな。ついさっきも1.5.0.2から1.5.0.3にバージョンアップした。

>>350
いつもの厨を相手にしないでください…

Firefox擁護房って何でこんなに多いの？
実際８割の人はＩＥ使ってるだろ

Firefox使ってる奴なんてマニアか暇人だろ
俺も一応入れてるけど

>>352
別に擁護なんかしてないって。IEが嫌いなだけ。

>>345
floatはwidth指定をしないとダメだろ？
width指定なしに横に並べたいんだ！

だから相手すんなって。

Firefox厨はすぐに噛みつくから困るｗ
必死すぎだろｗｗ

>>356
おまいも面白がって煽るな

はいはい

>>352
マニアか暇人⇒ネット利用時間が長い、情報収集におけるネットへの依存度が大きい
という意味ではサイトにとって重要な客だったり閲覧者となりえる

嫌Fx厨も構いたがり厨も失せろ。

>>345
現在の仕様でも実装でも、floatにwidthは必要無い。
1%も残っていない、widthを必要とする古いブラウザを相手にするなら、話は別だが。

>>361
345じゃなくて354に訂正。

>>361
CSS2.0基準のN7.1はもうちょっとシェアあるぞ。

Firefox擁護厨は負け犬。

↓質問どうぞ

擬似要素と擬似クラスの違いを教えてくんろ。

>>366
擬似要素（＃、ｉｄ）…あなた
擬似クラス（．、ｃｌａｓｓ）…みんな

(ﾟдﾟ)ﾈﾀ?

>>366
http://www.y-adagio.com/public/standards/tr_css2/selector.html#pseudo-elements
らへんを読むといいよ

>>369
ありが10。
だけどそのページは読んだ上で理解できないバカなので、
もうちょっと意味を具体的に教えてくれると・・・
あ、どれが擬似要素でどれが擬似クラスかってのはわかってるんだけど、
使い方を解ってるだけで意味がわからないとゆー・・・

>>370
グループとしてならclassを指定する。
単体としてならidを指定する。

要素が一つだけならid、同じ要素が二つ以上あるならclassってこった。

>>371
>>>369

>>370
ホントにどれが擬似要素か知ってんのか？

>>370
擬似クラスはある要素自身の(HTML文書で規定されてない)特徴を分類する
最初の子である(:first-child)とかリンクなら未訪問である(:link)とか

擬似要素はある要素内の一定の内容を要素のように見立てる
ある要素の一行目(:first-line)とかある要素の一文字目(:first-letter)とか

って感じかなあ。あんまり上手く説明できない

スレ違いかもしれませんが教えてください。
自作小説のサイトを運営しているのですが
color:#55504b;
background:#ddd8d3;
の組み合わせは長文を読んでもらうにはキツイ色合いでしょうか。

俺は同系色は長文読むには余り好きじゃないです。白と黒が一番だとは思いますが
モニタのコントラスト上げてる環境だと長時間は疲れますよね。
個人的にはこんなのが一番読みやすいかなあとおもいます。ださいけど。

>>375
はい。また、webセーフカラー内の配色で十分だと思われます。

color:212424;
background-color:d6ffc2;

書くの忘れたw

>>378
厨房カラーじゃんｗｗ

黄金厨を笑って許す器量を持ちたまえ。

>>374
ああ・・・見立てか、なるほど・・・
何となく理解は進んだような、どうもありがとう。

>>375
一般的には暖色、無彩色、あるいは緑系の色の同系色でwebセーフカラー内、
十分な明度差をもていることが望ましいとされる。
しかし究極的には各人の好みなので、
無指定のうえ読者にまかせるという手法が最強とも。

>>381

疑似クラスは、ある文書構成要素(HTMLで言えばタグで囲まれたモノ)の、
文書構造では表せない特徴を表現するもの。
<A>要素で、visitedかそうでないかとか。
効果はその要素全体。

疑似要素は、要素っぽいが文書構造には表現しづらいモノ。
もしくは、要素っぽく扱えた方が便利なモノ。
<P>の最初の1行とか。<LI>のマーカーみたいなものとか。
効果は指定された属性にマッチする部分。

>>367
笑って吹いて目玉が落ちたｗｗ

>>384
付けた？

>>385
もう大丈夫 (^_^)ｖ

比喩って大切だよね。

color:ffffff;
background-color:000033か000080か000099
て組み合わせは長文キツイでしょうか。
青系ブラックのバックに白文字って配色は
個人的に好きなんですが。
ネット上のサイトでやってるテストにかけた
限りではコントラストは十分みたいなんですが、
見やすさは主観の問題ですしね。
ちなみにフォントサイズは１２ptを想定。

>>388
系統色が決まってる場合は、コントラストを圧縮すれば気持ちやさしくなる。
背景#229/文字色#ddfとか。

てかスレ違いすぎ。デザイン論の本でも一冊よめ。

ひとそれぞれ。
以上。

>>388
色よりもフォントサイズ固定がウザすぎ

ひとそれぞれ。
以上。

人それぞれ*だから*固定しちゃいけない。以上。

フォントサイズに関わりなく一行30文字までという設定をしたいのですが
どうすればできますか？
width:○○pxだとフォントサイズによって一行に入れられる文字数が変化しますよね？
横の長さは伸び縮みしてもOKなので一行30文字までと設定する方法を教えてください。

width:30em

width:30em;

>>395
結婚‥‥しよっか？

ｹｺｰﾝしちまったYO! orz

秒数まで揃ってるから二重レスかと思ったら…さっさと幸せになりやがれこのﾊﾞｶｯﾌﾟﾙが

おめでとう

>>394
emであっても、フォントの高さでしかないので
きっちり30文字にはならないことがある。
幻覚に30文字にしたいのなら、pre要素を使うしかない。

>>395-396 の間には、width:2em の元気な男の子が誕生しました。

各種のブラウザで、文字サイズを全体的に「大きく」「小さく」する機能はあるのですが
スタイルシートでこれ(もしくはほぼ同等)をデフォルトにすることはできるでしょうか。
詳しく言ってしまうと、Firefoxで、一段階大きい状態をデフォルトにしたいと思っています。

試しにスタイルシートに加筆してみたのですが、ヘッダ本文関係なく [全体的に] 大きくは
なってくれませんでした。
(全部同じサイズになってしまったり)

body{ font-size:120% }　等で全体サイズを変えるとして、
本文内のsize指定を全て px/em/% 等で指定すればいかなくない？

>>402
日本語がイマイチわからんのだが、largeのことを言ってる？
ttp://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-size
しかし巨字も豆字と変わらないぞ・・・
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2003/11a.html#d05n01

ページのフッター部分、著作権情報とか書いてある部分を
常に画面の一番下に配置させたいのですが、どのようにすればいいのでしょうか？
例えば、ページ内容が極端に少ないときに、フッター部分が上にきてしまうことを防ぎたいのです。

>>405
位置指定でbottomから適当な指定。
それで満足できなかったら自分で色々工夫しろ。

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

多段組の下にフッタというページレイアウトをposition:absoluteで組む場合、
フッタの配置はどのような指定で多段組の次に持ってくるのですか？

>>405
役に立ちませんでした。本当にありがとうございました。
>>406
サンクス！

>>408
回り込み指定、回り込み解除を利用した方が早くない？

>>410
floatを使う方法しか自分は思いつかなかったので質問しました。

>>411
普通にdiv#footer。

>>411
IE以外ならpositionにfixedで固定しちゃえば

>>413
IE6サポートでフッタ付きの多段組レイアウトを組む場合
position:absoluteを使って簡単に組むことはできないと考えてよろしいのでしょうか？

>>414
いいかげんウザい。やってみりゃいいじゃん。
こっちはお前さんがどんな複雑な段組みだかわかんないんだぜ？
勝手に自己完結すんな。

つうかさ、自助努力をサポートしてやることはできるが、
はじめから全部頼られても困るぜ？

ul { position:relative;}
li {width: 50%;position:absolute;top:0;left:0;}
li.col2 {right: 0;}
address {???;}

<h1>ページヘッダ</h1>
<ul>
<li >段1</li>
<li class="col2">段2</li>
</ul>
<address>ページフッタ</address>

ごく簡単な二段組です。
liを絶対配置で配置したときにaddressをulの下に配置できますか？

やってみればいいさ☆

>>417
ul { position:relative; width:100%; float:left;}
li {width: 50%;position:absolute;top:0;left:0;}
li.col2 {right: 0;}
address {???;}

<div1></div>
<div2></div>
<div3></div>

1には単体画像をバックグラウンドで、
2には1ピクセルの画像をy軸に並べます
3も単体画像です

2と3の間に1ピクセル程の隙間が出来るのはどうしてですか？
あと、一応検索はしてみたのですが、これは既出でしょうか？

vertical-align: top;
では効果無かった様子

2も3もbackground-imageです

>>420
それだけの情報では再現出来ない。
とりあえず:

  * {
      margin:  0;
      padding: 0;
  }

>>422

アップしてみました。よろしくお願いします。
http://www.geocities.jp/test_sample2006/finder_osx/finder_osx.html

・・・・

>>422
問題ないと思うが

>>420
423でアップしたページの内容がオマイの言っている内容と違う気がするんだが。
そんでもって分かりにくいから質問も書き直してくれ

>>423
別にスキマなんかないが。

すいません、なんかsafariとcaminoだけで見られる現象だったみたいです。

>>428
俺のSafariでは何ともないが。

<IMG SRC="image/friend.gif" ALT="" WIDTH="170" HEIGHT="140" STYLE="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=140);">

フィルタのグラデーションなんですがこれIEでしか認識できないのですが
foxでも認識するようにするにはどうすればいいですか？

>>430
-moz-

>>419
やってみましたけど、liの内容とaddressの内容が重なって表示されませんか？

>>430
できません。絵を加工してください。

>>428
とりあえずDOCTYPEの宣言でもやってみたら？

>>430
無理です。Firefoxを恨みなさい。

>>430
無理です。てぃむぽ舐めなさい

>>431
mozって何ですか？

>>433
>>435
そうですか〜できないっすか〜
ありがとうです。

>>430, >>437
それはIEの独自拡張で、Webで扱われる技術の標準化を勧めている団体 'W3C'が勧告
する仕様に沿っていない。

だからFirefoxを恨む必要は無い。独自拡張は使うのを避けるべきです。

>>438
するってーとIE、Gecko共通で使えるフィルタってあるのでしょうか？

>>439
人の話を聞かないお嬢さんだな。

>>439
CSS2にはそのような（filter）プロパティは存在しない。
将来的にはどうなるかは知らないけれど、IEはCSSの実装が糞なくせに、独自性を強調して独自仕様を実装しているからムカツク。

とりあえず仕様に従わない、IEだけしか適用できないのを承知なら使って味噌。

なんだよだったら438ﾁｬﾁｬ入れるなよ

でも半透明が使えないクソIEには、代わりにfilter使うこともある俺・・・

CSS2の仕様書には "各ソース文書について、対応している媒体型に適用可能な関連スタイルシートをすべて探索しなければならない。
ネットワーク・エラーなどの理由で取得不可能なスタイルシートがあった場合でも、とりあえず取得できたスタイルシートだけを適用して
文書を表現しなければならない。"とあるが、もし変に解釈されたら困らない？

例えば全称セレクタでマージンを殺して、そこで何かの拍子でスタイルシートが読み込めなくなると大変だよな？

別にCSSが適用されない程度なら大した問題ではない。

>>444
仮に * {display: none}が適用され、その後のCSSが読み込み不能になっても
多くのユーザエージェントは無効にさせるような機能があるので問題ない。

仕様書にも「"本仕様では、UAがユーザに対して、個人のスタイルシートの選択手段を提供するよう推奨する。"」とあるのに
それを実装しない一部のUAがお馬鹿なんです。

500x500のbodyの中に、
400x400のdiv
300x300のdl
100x100のdt
100x100のddが順に内包されています。

divから順に100.100のrelativeを適用します。
ddは500pxの枠の外に出ないとおかしいと思うのですが、結果はdtの真下に配置されます。
どなたか理由を教えて下さい。

>>447
HTMLとCSSのソースをさらせ。
つうかそもそも単位は何さ？

偉そうに

ここ超初心者の質問にしか対応できないんですね。
困ったなぁ。

>>450
スレタイが初心者質問スレなんだから当たり前だろ

おい早く答えろや！！
ホント、使えない人達ばかりで困ったなぁ・・。

いやお前、わりと本気で情報が足りなすぎるぞ。
それで答えられるのはエスパーぐらいだと思われ。
そういやWeb板にはエスパースレないよなw

なんとなくいわんとしてることはわかる気がする。
でも礼儀を知らない人に教える気はない。

あー、ヒントだけ。dtにddを内包ってなに？

>>455
知るかよボケ。
初心者のクセに回答者になってるのか？可哀想に…

ああー、神降臨しなかなーー

まあ全部divに置き換えても、枠の外になんか出ないがな。

>>454
君、何でそんなに偉そうな態度なの？
質問者の立場を考えたことあるの？…ないよな（プ

うるせーな、本人だか知らんが。
>>1
＞●質問者が返信する際は、名前欄に「最初に質問したレス番号」を入れましょう。

これでいい？

底辺の底上げにしかならないな。
もう少し人の役に立つようになればいいのに。

>>460
>>457見たか？それからpositionは内包要素には無効。
これで理解出来ないならもう知らん。

ったく、GW最後の日まで黄金厨が来やがった…。

447以降、一度も書き込んでないのであしからず。

何があしからずだボケ。
ニセモノと程度は同じだわ、礼儀知らずめ。
解決したんならそう言え、このクソ厨が。

こんなレベルの質問もわかんないアホが多いってこった。
答えを知りたくてしょうがない連中が煽ってるだけだろ。

>>465
すいません、礼儀知らずだったかもしれません。
解決してないんですが、一応理解したっぽいので書いてみます。

＊dtの中にddは内包されません。伝え忘れました。

本来ならdtとddは同じ場所に表示されるはずだけれど、relativeされた位置に
dtがいるので、結果的にdtの下に押し出される、というのが現在の結論です。
試しにddのrelativeを外してみると、dtの左に表示されました。
もう一つ、すべて（body除く）に対して同じ様にabsoluteを適用してみると、
左上から右下に一列にボックスが並びました。
absoluteとrelativeの違いを明確に説明するページを作成していたのでこんな
ことをしてみた訳ですが、質問のしかたが分かりにくかったかもしれないですね。
すいませんでした

回答しようとしてる奴らがクズだから礼儀をつくそうとしないんじゃないのか？

すみません、質問させてください・・
ここで聞くのは恥ずかしいレベルのはなしかもしれませんが・・

<html><head><title>tableの中が小さくなりません！</title>
<style type="text/css"><!--
body { font-size: x-small; }
--></style></head>
<body>
ここの文字は小さくなります！
<table>
<tr><td>ここは</td><td>Table</td></tr>
<tr><td>の</td><td>なか。</td></tr>
</table>
</body></html>

ページの文字すべてを１サイズ小さいものにしようとおもって、
スタイルシートでbodyのFontSizeをx-smallにしてみたんですが、Tableの外の文字は小さくなるけど、
Tableの中の字がちいさくなりません。

bodyのかわりにdivやｐやspanなどでやってみたけどダメでした・・・
<font size="-1"></font>で全部をはさんでみたけどやっぱりダメで。

どうかお願いします。ブラウザはIEの6.0です。

>>467
その現在の結論はちがうなあ。

>>467
＞absoluteとrelativeの違いを明確に説明するページを作成していたので
ここで質問してるようなヤツが解説サイト作るのかー。すごいでちゅねー。

>>469
<style type="text/css"><!--
* { font-size: x-small; }
--></style>

>>471
公開するのが目的ではありません。昔から自分のわからないことはメモ書きを残しておく
習慣があるのです。むしろ私の場合、解説ページを作る目的は自分が理解していると
勘違いしている事でもいざ作ってみると補完してない知識が沢山ある事をしっている
からです。

opacityならIEでもGeckoでもOperaでも使えるよな。
ちょっと書き方が違うけどそこはCSSハックでもなんでもしてがんばればいい。

>>472さん、ほんとうに小さくなりました。
どうもありがとうございます！

>>447
で、最初の質問で枠の外に出るってのは勘違いって事でよろしいか？

１つのタグに複数個のclassセレクタを適応するにはどうすればよろしいんで
ございましょ？
<table class="a" class="b">
だめじゃん･･･

class="a b"

半角スペースで区切って複数指定できる、と仕様書に定義されていたが。
しかし気持悪いな。カンマがいいなぁー

>>479
ﾃﾗﾜﾛｽｗ

>>477
2個程度ならclassとid併用すれば？

>481
idとclassは使い方ちがうでしょ。

>>482
同じだよ。

>>480
そこ笑うところ？ｗ

もう'カンマ'とか'コンマ'とかどっちでもいいだろ。
やっぱりこうじゃないと気持悪い。

class="hoge,hage,nullpo"

>>483
>>483
>>483

ダメだ、みんなここは俺がとめるからさ、釣られるなよ？
絶対、、、釣られるなよ？

このスレの回答者は、回答してやるんだから絶対権力がある　的な
人を人とも思わない勘違い君が多いね。　PCばっかイジってっから、人間が腐ってんだーよ。

ふーん>>486はそーゆー人なんだ。
君にはがっかりだ。

>>486
そのクセ、政治権力使ってる人を見ては批判しまくってるんだろなｗ

人を人と思わない。
たいした知識もない。

>>483
違う。勉強し直してこい。

>490
釣られるなと（ｒｙ

GWおわっちゃうのが悲しいのはわかるけどさ。

リンク位置をロールオーバーで文字が発光しているように見せたいのですが、
<style type="text/css"><!--
a:hover{filter:progid:DXImageTransform.Microsoft.Glow(color=#FFFF00,
strength=10);}
--></style>
では発動してくれないのです。他にどういった方法がありますでしょうか。

>>493
filter は width を指定しないと有効にならないのはご存知？

a {
display: block;
width: 10em;
padding: 0.5em;
}

a:hover {
filter: Glow(color=#ffff00,strength=10);
}

width より、display: inline-block; の方が使い易い。

filterはCSSじゃないからスレ違いと何度（ｒｙ

IDの活用方法っぽい質問なんですが、
複数のページのID属性部分だけ抜き出して、
ひとつのファイルにまとめる事って出来るでしょうか?

例えば、音楽事務所の所属アーティストのリストのページがあります。
一人を選んでクリックすると、概要とアーティストサイトへのリンクが書いてあります。
ソースにはID="link"とあるので、ここだけ抜き出せるでしょうか？

CSSって情報を解析しやすくする側面もあると思うので、
実例とかサービスとかあるのかな？と思うのですが。よろしくお願いします。

>>497
できると思うけど、CGIとJSを組み合わせることになると思われ。

ttp://www.sleipnir-wiki.jp/?%A5%B9%A5%AD%A5%F3%A4%CE%BA%EE%C0%AE#Directory
↑Wikiのテーブルレイアウトを真似したい
生ソースとCSSをそのまま適用させてみてから弄ってみたけど上手くいきません…(´･ω･｀)
抽象的でスマソです

ソウデスカ。
としか言えない。

>>497
そんなんするんだったら
DB に突っ込んで必要な分だけ切り出した方が早い

>>497
ID="link"はCSSじゃなくてHTMLの分野。

そもそもID="link"って物凄い下手な使い方じゃねえ？

<html><head><title>TEST</title><style type="text/css">
<!--
.gra{
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFFFFFF,
endcolorstr=#00000000,gradienttype=0);
}
-->
</style></head><body>
<div class="gra">TEST</div></body></html>
なぜかグラデーションが発動しないんですけど、なんででしょうか。

ページ内のある要素を一意に名前付けしてるんなら別にふつう。
名前がださいとかわかりにくいとかは別の話。

>>497
「複数のページを取ってくる」のは誰がやるの？
「あるページからある要素を抜き出す」ってのは誰がやるの？
「抜き出した情報を整理して見せる」ってのは誰がやるの？
そのへんを考えれば、何をつかわなきゃいけないかわかる。

>>504
filterはCSSじゃないよ。しかもIE独自。
グラデ使いたいんなら、画像にする事をお勧めする。

スレ違いで終わらせろよ、どう見ても釣りだろ・・・

ここの人達はみんな暖かいですね。

filterを使わないでテーブルを半透明にすることはできますか

半透明に見える画像を使う

できないのか･･･。ありがとうございました。

>>504
>>495

> #00000000
> #FFFFFFFF
8個並んでるぞ。

>>512
Webセーフカラーは考慮していません。
フルカラーなので8桁になります。

ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

いままで外部CSSのクラスの中に
.hdskahgklsda {
left; PADDING-BOTTOM: 0px;
}
っていうの使ってたんですが、
left; PADDING-BOTTOM: 0px;
これって正しい記述ですか？

leftの意味がさっぱりわからない。
そもそもな逃がしたいのかわからない。

何もかもがネタに見えて来た・・・

やはりleftの意味はないんですね。
今まで
.h1 {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 9pt; FLOAT:
left; PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
}
いつの間にか何故か使ってたこういうので
h1の次に書いた文章をh1の右横に表示させれてたんですが、
「left;」を削除するとh1の下に文章が回りこんでしまいます。
h1の横に表示させたい場合どういう風に記述するのが
正しいのでしょうか？よろしくお願いしますｍ（＿＿）ｍ

float:
left;
↓
float:left;

ようはどっかからかパクッてきたけどわからなかったわけだ

h1 {
margin: 0;
padding: 0 10px;
font-size: 2em;
float: left;
}

さようなら

ありがとうございます。さようなら

面白れぇやつがいるな。

ごめん、全部ネタにしか見えない…。

テーブルの中にあるリンクをオンマウスで、テーブルの背景色をかえるには
どういった方法がありますか。

>>525
JavaScript

>497
CSSをつかった文章から情報を取り出す作業ってのは、
これ用の方法があるわけでなくて、
単純にテキストデータから情報を取り出す作業なんですね。
PHPにつっこんでやってみます。ありがとうございました。

cssって以外とできないこと多いのね

いろいろ期待するほうが間違ってる。

できるはずのことが(UAのせいで)できないのが困る

つーか期待を求める方向が間違ってるんでね。

乗用車って空を飛べないんですね、って文句いわれても困るしな。

そんなみんなしてかばうことないだろ。例えもくそだし

CSSっていう名前が悪い

>>534
和訳して「なだれ落ち様式敷布」でいいんでね？

すみません。教えてください。
まずは、ソースを貼ります。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>テスト</title>
<link rel="stylesheet" href="test.css" type="text/css" media="screen,tv" />
</head>
<body>
<div id="container">
<div id="header"><p>ヘッダ</p></div>
<div id="main"><p>メイン</p><p>ほげほげほげほげほげほげほげほげほげほげほげほげ</p></div>
<div id="l_navi"><p>ローカルのナビ</p></div>
<div id="g_navi"><p>サイト全体のナビ</p></div>
<div id="footer"><p>フッタ</p></div>
</div>
</body>
</html>

続きます。

■CSS
*{margin:0;padding:0;}
body{color:#000;background:#fff;}
div#container{width:700px;background:#f99;}
div#header{margin-left:110px;width:590px;height:30px;background:#396;}
div#main{margin-top:100px;width:590px;background:#963;float:right;}
div#l_navi{margin-top:100px;width:105px;background:#936;float:left;}
div#g_navi{position:absolute;top:40px;left:110px;z-index:1;width:590px;height:60px;background:#dcdcdc;}
div#footer{margin-left:110px;width:590px;background:#369;clear:both;}

ソースの最後の方に記述したdiv id="g_navi"をabsoluteでページの上方に表示しようとしています。
WinのFirefox・ネスケやOpera、MacIEやSafariで見ると表示されるのですが、
WinIE6（5.5や5.0も）だとdivそのものがどこかに消えてしまいます。

どなたか原因のわかる方はいらっしゃいますか。
よろしくお願いいたします。

>>537
あいにくマカーなんで現象を確認出来ないんだけど、
div#containerの背景色を無くしても見えないの？
IEの数多いバグなのかもなあ。

floatじゃねーかな

質問です。
cssでopera6.0にCSSを適用させない方法、または詳しいことが乗ってるサイトなどありましたら
おねがいします。

>>540
バージョン指定まであるとJSになる

>>540
html>#hoge{ c\olor: red; }
しかし何故に6.0・・・

css opera6.0では　link の　media属性に複数いれると、適応されないというのがあったのですがこれは？

CSSいらないんなら、それでいいんじゃないの。

>>543
それNN4じゃなかったっけ？

たとえばこれ使った場合、ほかのブラウザの反応はどうなんでしょう？

>545
でしたっけ？さっき探してたらあったきがしたのですがっ

とおもったら
微妙に違ってました。
media属性値を複数指定したlink要素（例：media="screen, tv"）でリンクされたCSSファイルにて、@media screen{}内に記述されたCSSルールを、Opera6は無視します。
とのことでした・・。

opera6ってなにげにバグおおいんだよねっ。

しかしまだ6.0なんて使ってる人は、無視していいんじゃないんですかっ

>>538
はい。背景色を消しても、やはり表示されませんでした。

>>539
floatのclearの関係なんでしょうかね…。

>536
どっかのうしろにいっちゃってるとかでは？

absoluteいがいのdivにrelativeかけてz-indexしてみるとか

無視するにしても、ｃｓｓ適用させないぐらいにはしておきたいなとおもいまして。
>550

何かほかにいい方法ありましたらよろしくおねがいします。

>>553
Opera6はCSS対応そんなにヒドくなかった記憶があるけど。
背景画像でえらいバグはあった気がするが。

>>551
mainとl_naviを抜かすと出てくるという不思議。
取り敢えずグローバルナビはh1外に追い出すのが普通だし
<div id="g_navi"><p>サイト全体のナビ</p></div>
<div id="container">
<div id="header"><p>ヘッダ</p></div>
<div id="main"><p>メイン</p><p>ほげほげほげほげほげほげほげほげほげほげほげほげ</p></div>
<div id="l_navi"><p>ローカルのナビ</p></div>
<div id="footer"><p>フッタ</p></div>
</div>
にしとけば。

>>553
JSスレ池よ。

>556
JSはあまりつかいたくないので、cssできないかなとおもいまして。

>>552
やってみましたがダメでした。背景色も消してみたんですけど、どこにもいません。

>>555
確かにmainとl_naviのdivを消すとg_naviのdivが出てくるんですよね。不思議です。

>取り敢えずグローバルナビはh1外に追い出すのが普通だし

わわー、そうなんですか！知りませんでした。勉強になります。

あと先ほど、試しにCSSでl_naviのfloat:left;を消してみたらg_naviが表示されました。
表示上はl_naviが左、mainが右にfloatされているのですが、横に並べたいdivの片方のみへの
floatって文法上というか決まりとしてOKなものなんでしょうか。
何度もすみません。

>>558
OKだよ。

>536
OKですよ。

>>558
問題ない。ただ動作が異なるだけ。
両float
aaa bbb
aaa bbb
aaa bbb
aaa
aaa
aaa
片float
aaa bbb
aaa bbb
aaa bbb
aaaaaa

元々floatの動作としては、imgのalignのような「小さなものを組み込む」ためのものだから、
本来は両floatってfloatの正しい使い方ではない。カラム全般に言えることだが。
aaa

aaaが妙なところに入っちゃった・・・

>>559-561
OKですか。ありがとうございます。

>>555さんのソースを参考にしつつ、片floatも考慮しながらやってみます！
これまでご回答いただいた皆さん、本当にありがとうございました。
とても勉強になりました。

olをネストして階層が深くなった時に
親階層の数字（decimal）を継承したいのですが
どうしたらよいでしょうか？
以下に例を記します。

[HTML]
--------------
<ol>
<li>aaa</li>
<ol>
<li>bbb</li>
<ol>
<li>ccc</li>
</ol>
<li>ddd</li>
</ol>
<li>eee</li>
</ol>
--------------
[出力]
--------------
1. aaa
1.1 bbb
1.1.1 ccc
1.2 ddd
2. eee
--------------

>>564
ttp://www.y-adagio.com/public/standards/tr_css2/generate.html#counters
対応してるブラウザ少ないけどな。
というかIE。

その場合だと数字にも意味があってのことだろうから、
olで番号出さずに、liの中に自分で数字入れちゃうのもありな気がする。

>>566
「並び順に意味がある」ことと「番号に意味がある」ことは別物。

>>567
?

ブレースの中の最後の宣言の末尾に
セミコロンを付けるのはCSS1で合法ですか?

p {
color: red; /* このセミコロンは必要 */
width: 300px; /* このセミコロンは不正? */
}

<meta http-equiv="Content-Style-Type" content="text/css">
このmeta情報はCSSを使用する場合必ず記述しなくてはいけないのですか？
ある解説サイトには必ず記述と書かれていて、ある解説サイトには<p style="">と
style要素を使用する場合には記述と書いてありました。
どちらが正しいのでしょうか？

後者でおｋ

>>567
> 「並び順に意味がある」ことと「番号に意味がある」ことは別物

上記には同意だけど、だからこそ>>564の場合>>566でFAなんじゃないの？

実態参照で©と打ちたいとき、xhtmlでは＆を記述してはいけませんよね。
みなさん、こんな時はどうしてますか？

そんなこと言ったら、&もダメって事になりますが。

>>564
そのHTMLはおかしい。ol直下にol書けないだろ。

©

ぐはっ専ブラ恐るべし。>>574は＆ａｍｐ；。。

>>573
つーか、それCSS関係ないし。

相変わらず低ラベルの品評会かここは・・・

ハイレベルな回答を見せてください。

品評会だとよw

相変わらず低ラベルの博覧会かここは・・・

今度は博覧会ww
段々スケールアップしてるなwww

相変わらず低ラベルのオリンピックかここは・・・

とりあえず、一番上に貼っておきました。

相変わらず低ラベルの天下一武道会かここは・・・

クリリンのことか〜！！

お、お父さんは世界一強い人間だよ〜

<head>
a:hover{background-image : url("information２.gif")}
</head>
<body>
<a href="http://***"><img src="information.gif"></a>
</body>

リンクにマウスが乗ったらinformation2.gifに変更したいのですが、この
方法では無理でした。どういった方法がございますでしょうか。

>>589
頼む、テンプレで基礎の基礎から勉強してきてくれ・・・

リンクができてしまいました。ごめんなさい･･･

ファイル名は半角なのに全角で指定してるからだろwwwwww

&©

２は間違えただけです。

>592
おまいは答えなくていいから！！

569です。もし、最後の宣言にセミコロンを付けることができるなら、
{}の中に宣言を追加するのが楽になるのでうれしいのですが、ダメでしょうか。
例えば、次の規則

selector {
　property1: value;
　property2: value
}

に新しい宣言を追加するときに、

selector {
　property1: value;
　property2: value　　/* セミコロン忘れ */
　newly-added-property: value;
}

こういうミスをよくしてしまうんです。宣言の後ろに
いつでもセミコロンを付ける癖をつけておけば、このような
ミスはしなくなります。

selector {
　property1: value;
　property2: value;　/* 宣言の追加を見越したセミコロン */
}

>>596
そうですね。

本当にありがとうございました。

598は偽者です。なんか反応が冷たいですが、CSS1の勧告文書の付録の文法は
こうなってます。

ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'

この文法によると、セミコロンは宣言を区切るセパレータであり、
最後の宣言の後ろには付けられないようです。でも、勧告書の
本文の中では、最後の宣言の末尾にセミコロンを付けた例がいくつか
出てきます。これはどういうことかと思って質問したのですが、
僕は聞く相手を間違えているんでしょうか。

>>599
反応が冷たい理由は、わかってて聞く子が嫌われるためです。

>>599
こっち行って議論して下さい。
http://pc8.2ch.net/test/read.cgi/hp/1144575540/150

>>601
冷たい反応をした人間だが、あっちはStrict-HTMLスレであって
CSSはScrictじゃなくてもValidじゃなくてもスルーだぞ・・・

新しい宣言を先頭に書けばいいんだよもん

selector {
　newly-added-property: value;
　property2: value;
　property1: value
}

最後のセミコロンの後に、0文字の宣言があるんだ、と自分に言い聞かせるのもアリかと

orz

>>600
わかってて聞いているわけじゃないのに。スタイルシートの勉強を一週間前
からはじめた初心者ですよ。CSS1の勧告書以外はまだ読んでないのでなんか
ズレてるのかもしれませんが。

>>603
宣言は前に追加したいこともあれば後ろに追加したいこともあるので。。。

CSS対応状況を大幅に改善した改造品IE6を配布したら
マイクロソフトに怒られますか？

>>606
この手の質問はヘタに答えると荒れるからね。

>>607
実際に作ってから心配しろ。

>>589
a:hover内でbackgroun-imageは使えない
覚えておけ

>>610
> backgroun

もちつけ

>>610
kwsk

>>612
backgroun-imageだから

backgroun-imageの使い方もしらねーのか。
おまえらまるで腸炎ビブリオ（塩好き)だな。

参考URL
http://idsc.nih.go.jp/idwr/kansen/k00-g45/k00_49/49oic3b.jpg

>>610
いや　使えるだろ
a{background-image: url(image_url1);}
a:hover{background-image: url(image_url2);}
でいけるよ

>>615
ありがとう神様

>>615
よく嫁

CSSと直接の関係があるかどうかは分かりませんが質問します。
Win2000 + IE5.5(SP4) という環境で、<body>子孫の最上位にある要素の背景画像が表示されません。
簡単に書くと以下のような構造です。
<body>
<div id="bg"> ← ここで指定したbackground-imageが表示されません
<div class="〜">〜</div>
<div class="〜">〜</div> ← "bg"の子孫では正常に表示されます
...(以下ブロックや要素が続く）...
<p>〜</p>
</div>
</body>

ちなみに、上記環境以外のOS、ブラウザでは正常に表示されます。
この現象にはどういった原因が考えられるでしょうか？
よろしくお願いします。

すみません、追記です。

なぜか、新しいウインドウを開く（ctrl+n)と、正常に表示されます。
でも、リロードすると表示されなくなります・・・。

>>619
css晒さなきゃ検証出来ないでしょ。

FAQサイトに書いてあるとおり、

html, body { height: 100%; }
div { height: 100%; background-color: #FF0000;}

<html>
<body>
<div>aabcde...</div>
</body>
</html>

としたのですが、Firefoxだと開いたときの高さ分しか背景が白くなりません
スクロール部分があると、そこから下には背景色がつきません

IEだとスクロール部分の背景までしっかり色が付いているのですが、両方できちんと表示させる方法はありますか？

>>621
IEを標準モードにしてみろ。
それが正しい動作。

>>622
ということは

|　|　　　　　　|　|
|　|　　　　　　|　|
|　|　　　　　　|　|

こういう両脇に下までずっと色をつけるようなデザインは、背景にイメージを使って実現するしかないわけですね

min-height: 100%でいかないんだっけ？

>>623
ttp://www.stylish-style.com/csstec/ultimate/height100.html

>>624-625
ありがとうございます、これで書き換えてみます。

>>620
そうですよね、失礼しました。
■CSS
#bg {
width: 772px;
background-image: url(../main_bg.jpg);
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
}
#mainContainer {
width: 760px;
margin-left: 6px;
}
#left {
width: 160px;
float: left;
margin-right: 1px;
}
#right {
width: 599px;
float: right;
}
.clm1 {
padding: 10px 7px 0px 7px;
width: 569px;
background-image: url(../images/back.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

続く

続き

■HTML (おおまかな構造のみピックアップ）
<body>
<div id="bg">
<div id="mainContainer">
<h1>タイトル</h1>
<div id="left"><ul><li>〜〜〜</li></ul></div>
<div id="right">
<p>〜〜</p>
<div class="clm1"><p>〜〜〜</p></div>
</div>
</div>
</body>

このようなHTML、CSSで、"bg"で指定している背景画像が表示されません。
"clm1"で指定している背景画像は表示されます。

よろしくお願いします。

2段組にしたいのですが、どのようにすればよいのでしょうか？

>>628
div#bgのボーダーを見てみると何が起きているのかがわかるよ。

>>629
二つのブロックを横に並べてください。

　　　　　　　　　　　　　　　 ､.., _,＿
　　　　　　　　　　　　　ｯ‐'"　　 　 　 ｰ､
　　　　　　　　　　　,r'゛　　　　　　　　 　 ヾ ,
　　　　　　　　 　 r' 　 　 　 　 　 　 　 　 　 ヾ
　　　　　　　　 ./　　　　　　　　　　　　　　 　 ヽ
　　　　　　　　 !　　　‐-　　　　　　　　　　　 　 i
　　　　　　　　,!´　　　　　　　、　　　　　 ' 　 　 l
　　　　　　　 〈illliiiii;,　　.,,,,,,._　　　　　　 ;'　　　 ;!
　　　　　　　　lゞﾌ`ｯ:'　 .:"r-;､llii;,　、　　､,_,.､ -.､
　　　　　　　 .l　 ,:::::'　　　 `ミﾆ`‐　　　　　 .i'　:::;!
　　　　 　 　 .l'´ :r'　　　､　　､｀　　　　　　 !::;: :/
　　　　　　　,ｨ　 ヽ _,. -ノ:::..　　ヽ　　　　;r　-ノヽ_ヽ、
　　　　　／　l　 、　　　　　::.　　　　 　 /､r'/ 　 　 ヽ. ヽ、
　　　 ／　..::::ヽ '´`ー‐-ヽ、　 　 　 　 ／　!　　　　　lト-､ ヽ!
　　./　 ,.- '.::::::i:.　 ‐-　　　ヽ　　　 ／ 　 /　 　 　 　.i!
　 く　r'　.:::::/::::〉､　　　　 _ 　　.:r '´　　　i　　 .:'　　　l
　ｒ:'　　 ::::r::::::/　_ :::T:i￣　 .::l´　　ヽ　 /　　　　　　 .!

　　　　　　　　　　　サゲロ＝アゲンナ [Sagero=Agenna]

画像をクリックするとリンクを開く、というリンクのさせ方で
borderをnoneや0px、背景と同色にしてもクリックしたあとに
画像の周りに黒の点線のボーダーラインが出来てしまいますが
出ないようするにはどうすればよいですか？

画像の周りに黒の点線のボーダーライン出ないようするにすればいいですよ

>>632
ヒント：それはボーダーじゃない。

TABキーおしてみそ

消せないということでしょうか…？

そうですね。

テキストでリンクさせる場合には消せるので同様の事ができるのかと思ってました…
レスありがとうございました。

テキストで、できてた？

ごめんなさい勘違いでした(^_^;)
確認したらできてなかった…

img , a:link , a:visited , a:hover{
border: none;
text-decoration: none;
}

>>641　(´･ω･`)？

>>640
IEにはmetaかなんかに書くとその枠線が出なくなる変な仕様があったはず。
リンク フォーカス 枠線、あたりでググればあるかな？

width:50%;ずつで、2に分けたdivボックスを横に並べるとき、どうしても、右のボックスが下に行くのですけど、どうすれば治りますか？
html,body{
    margin:0px;
    padding:0px;
    width:100%;
}#a{
    width:50%;
    height:100px;
    background:#FF0000;
    clear:both;
    float:left;
}#b{
    width:50%;
    height:100px;
    background:#0000FF;
    float:left;
}

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

>>644
環境は？IE以外でもなるのか？

>>645
いえ、他ブラウザで確認したら、大丈夫なんですけど、IEのみ、こうなります。
<(_ _)>

>>646
49% 49% にしなされ

>>644
基本的にdivでは完全には抑えることはできないからね。

ちなみに、#bの、float:left;を、float:right;にしても無理でした；；

>>647
49% 49%・・・
どうﾞもﾞ（ノд`）・；：・；

49．9999999999999999999999%とかは・・・・・・(；ー；)

>>646
それIEの有名なバグ。100%にはできない。

50%、49%とかじゃだめだったっけ？

59+49=99

>>653
飲んでたコーラを吹き出して本がびしょびしょになってしまった。
保証と弁償を求むニダ <｀∀´>

>>654
何でPCじゃなくて本が濡れるんだ？

本にPCが付いてんだろ

うう〜ん。。
センタリングで考えてみたのですが、無理でした。
えっと、width:100%;のdivの中に、margin:0px auto;のdivを入れて、その中に、width:50%;のdivを2つ入れてみたのですが、無理だと分かりました。
んっと、>>647のwidth:49%;のdivを2つ用意して、cssでセンタリングして見たいと思ったのですが、ググっても、div１つのセンタリングのやり方しか載ってないので、色々(適当に)試してみたのですが、今一うまくいきません。
50%のdivを２つではなくて、49%のdivを２つを、cssでセンタリングして配置することは出来るのでしょうか？（*ﾟーﾟ）

1＋49＋49＋1

これで解るだろ？

>>658
（*ﾟーﾟ）<1＋49＋49＋1=100です。

違うんだよ、買ったばかりのキーボードだけは死守せなあかん！って手で押さえたら
作業しながら読んでた本の上にどばーーっとだな、、、、

>>659
ホントにアホだな。少しは頭使え。

1＋49＋49

>>644
#b{
width:50%;
_padding 適当px 0 0 0;
height:100px;
background:#0000FF;
float:left;
}
とかじゃ駄目かな？

>>663
バグ辞典見てこい。な？

>>664
おまえ口だけならレスするな死ね

>>664
_paddingだぞ

>666
具体的に、それだとどういう理由で成功するのですか？非常に興味があるのでお聞かせください。

IEだけ読む

いや、それは知ってますが、、、理屈がよく理解できなかったので、そのへん、
おねがいします。

IEだけ他のブラウザにあわせるように上書きしたら良いんじゃないの？

あ、そういう理屈か
_つけると本来は読んではいけないんだけど
IEだけはバグで読むんだってさ

カラム落ちの判定は外辺に依存しますよね？
元のソースではパディングは設定されていませんでした。
_paddingをつけるとieだけにpaddingを設定可能ですが、そもそもieはwidthの中に
paddingが内包されて算出されるのでwidthの幅自体は変わっていませんよね？

んじゃ、margin:-5px;とかで良いんじゃない？

それだと言ってる事は
1＋49＋49＋1
とほぼ同じなのですが、、、、、

>>661
#a{
width:49%;
height:100px;
margin:0 0 0 1%;
float:left;
}#b{
width:49%;
height:100px;
margin:0 1% 0 0;
float:left;
}
こんな感じでしょうか？(*ﾟーﾟ)

相も変わらず低ラベルな漫才やってるなぁ・・・

dremweaverってスタイルシートのスタイルの名前ってどこでかえるのでしょうか？
divをつかってレイアウトしようとおもってるのですが、名前をかえれずに困ってます。

またどこからスタイル適用できるのでしょうか？初めて使うのでわかりません・・・

どうしてわからないのかわかりません

>>677
スレ違い、DWスレへどぞ。
http://pc8.2ch.net/test/read.cgi/hp/1143369405/l50

Dreamweaverスレに行け。dremweaverってのは知らん。

dreawmeaver

どれぁぅみゃぁばぁ？

名古屋人？

>>675
とりあえず晒しなさい。

divの四角の領域にぴったりimgを表示したいのですが、
imgの上下に空間が出来てしまいます(これによりdivのheightで指定したサイズより、高さが大きくなっています)。
vertical-alignを使ってみましたが、変化なしでした

ソースはこんな感じです。
<div>
<p>
<a>
<img></a>
</p>
</div>

>>675
おまえのその汚いモノを私にお見せ！

pは
text-align:left;
padding:0px;
margin:0px;
としています

divは
text-align:left;
width:300px; height:300px; margin-left:auto; margin-right:auto;
border-style:solid; border-width:1px; border-color:#000000;

imgのサイズは280です

あ、解決しました

>>688
>>687かな？　何がどう解決したのか分からんのだが。

>>689
そうイジメんなよ。

┏━━━━━━━━━━━━━━┳━━━━━━━━━┓
┗━━┯━━━━━━━━━━━╋━━━━━━━━━┫
　　　　.└───┬───────┼─────────┤
　　　　　　　　　　├───────┼─────────┤
　　　　.┌───┴───────┼─────────┤
　　　　.├───────────┼─────────┤
　　　　.└───────────┴─────────┘

こういうのをテーブルではなくSSで作るとしたらどうなりますか？

>>691
テーブルでつくったものをSS(Screen Shot)で画像にする

誰がうまいこと言えとｗｗｗ

すいません、スタイルシートをSSというのは一般的ではないんですね

上級者が現れた

ギャグのセンスが上級だな。

マジレスするとdisplayプロパティ。IEは多分できないけど。

リンクを貼ってない文字で
マウスが上に来たとき下線を表示
マウスがでたとき下線を非表示にする方法って
なにかありますか？

>>697
IE以外なら:hover。

>>697

<p>リンクを張っていない文字</p>

p:hover { border-bottom:solid 1px black; }

>>698
IEなら？

js

>>691は　float: right;　でできるんじゃないか？

>>700
スレ違いの話題になる。

>>697
>>699のタグでやってみたら
FIREFOXでは下線が確かに表示されて
IEだと下線表示されませんでした
スレ違いになってしまってすいませんでした
ありがとうございます
js板にいってみます＾＾；

IEではできないんですか・・・(；´Д｀)
float: rightとか探してみます
ありがとうでした

>>705
どうでもいいけど読解力をみにつけれ

いくつかの場所で使われるHTMLのテンプレートを作成しているのですが、
ちょっとトラブルに行き当たったので助言をお願いします。

トラブルは、簡単に言えば標準モードと互換モードによるborderの扱いの違いです。
そのどちらでも同じHTML、CSSを利用して同じ外見を提供したいのですが、
どうしても1ドットの差が出てきてしまい、解決に苦労をしています。

HTMLとCSSは以下のような形です。
<div id="template" style="position:absolute;">
  <div style="position:relative;border-color:#6967d4 #202040 #202040 #6967d4;border-width:1px;border-style:solid;">
    <div style="position:relative;border-color:#8080ff #404080 #404080 #8080ff;border-width:1px;border-style:solid;background-color:#6967d4;">
      <div id="client" style="width:100px;height:100px"></div>
    </div>
  </div>
</div>

この構造だと、id="client"のサイズを指定することによって全体のサイズが決まりますが、
これをid="template"のサイズを指定してやるようにしてやりたいのですが、どうしても上手く行きません。
どうすればよいでしょうか。

IEって、いつになったらまともにcssの解釈が出来るようになるんだろ。。
IE8あたりか？

>>707
>そのどちらでも同じHTML、CSSを利用して同じ外見を提供したい
かなり無茶やってるな。本格的にやるならCSSハックを駆使するしか方法がないと思うが。

例だけの解決方法ならばid="template"にwidthとheightを指定して
overflowをscrollかhiddenにしてやればいいんじゃないか？

>>709
完全に同じ外見である必要は無くて、
せめて指定したサイズぴったりに表示できたらとりあえず問題ないのですが、
やはり無茶な方法なのでしょうか。

id="template"にwidthとheightを指定しても、内部のdiv達は影響してくれません。

<a href="#" onclick="alert(document.getElementById('client').offsetHeight)">test</a>

<div id="template" style="position:absolute;width:100px;height:100px;overflow:hidden">
  <div style="position:relative;border-color:#6967d4 #202040 #202040 #6967d4;border-width:1px;border-style:solid;">
    <div style="position:relative;border-color:#8080ff #404080 #404080 #8080ff;border-width:1px;border-style:solid;background-color:#6967d4;">
      <div id="client" style=""></div>
    </div>
  </div>
</div>

なぜかwidthだけはきちんと表示されるけれど、heightは無視されて、
id="client"のheightはゼロになってしまいます。

IEだけの事考えてるだろ？
だったら、ハックしかないとおも。

>>710
>heightは無視されて
それはつまりtemplateを100pxにしたらclientの中身に関係なく100pxにしたいってこと？
親要素のheightを絶対数で明示した上で、子要素のheightを100%にしてみ？。

>>711
CSSの仕様をハックしてでも、正確に表示できればそれでいいのですが…

>>712
こういうことですよね？

<a href="#" onclick="alert(document.getElementById('client').offsetHeight)">test</a>

<div id="template" style="position:absolute;width:100px;height:100px;overflow:hidden">
  <div style="position:relative;border-color:#6967d4 #202040 #202040 #6967d4;border-width:1px;border-style:solid;height:100%">
    <div style="position:relative;border-color:#8080ff #404080 #404080 #8080ff;border-width:1px;border-style:solid;background-color:#6967d4;height:100%">
      <div id="client" style="height:100%"></div>
    </div>
  </div>
</div>

これは一見上手く表示できているように見え、IEやOperaではしっかりと表示されますが、
FirefoxとMozillaでは、下の部分が突き抜けてしまいます。
本来、この状態ならばid="client"のheightは96pxでないといけないのに、
FirefoxとMozillaでは100pxとなります。

だ〜か〜ら〜(ry
大体何でこんなヒトが
＞いくつかの場所で使われるHTMLのテンプレートを作成しているのですが
なんだろね。

>>714
ごめん、俺はお前が何をいいたいのかわからない。何略してんの？

もうどうでもいいんだよ。

>>713
その辺りが単純な記述で標準モードと互換モードを両立させる限界じゃない？

>>714
俺にも何を言いたいのか全く分からん。

質問です。
alpha()で、背景画像を透過させたくてヘッダ部分に下のような感じで記述したのですが、
うまくいきませんでした。

body{
margin:10%;
background-image:url(wall.jpg);
filter: alpha(style=0, opacity=30);
}
.back{
background-color:#ffffff;
}

bodyで設定した背景画像を<div class=back>〜</div>内でうっすらと表示させたいのです。
上の記述のどこが問題なのか教えて頂けるとありがたいです。

すみません、上のヘッダ部の記述は違ってました。
訂正します。

body{
margin:10%;
background-image:url(wall.jpg);
}
.back{
background-color:#ffffff;
filter: alpha(style=0, opacity=30);
}

>>717
そうかもしれませんね。ここらへんがborderを使った限界なのかもしれない。
borderを使わず、幅1pxのdivを作って、CSSのrightやbottomプロパティを使って
divを重ねることによって実現できないかちょっと考えてみます。

>>718
それCSSじゃないからスレ違い。

>>720
おまえ人の話聞けよ。

>>721
さっきから無視されて哀れだな
とりあえず俺達にもわかるように会話してくれ

>>719
.back{
background-color:#ffffff;
width:100%;
filter: alpha(style=0, opacity=30);
}

スレ違いを教えたがる教えたがり厨がふえたなあ・・・

>>713
height:100%は、描画できる領域に対するパーセンテージ。
height:100pxに対して100%とすると100px。

標準のボックスモデルのheightはボーダーを含めない領域の大きさなので、
100pxにするとはみだすことになる。
ボーダーを含めた高さが100pxになるのは標準外。

とりあえず手元では、
#template { width:100px; height:100px; }
#relbox1 { border:10px solid blue; margin-bottom:0 }
#relbox2 { border:10px solid red; margin-bottom:0 }
#client { border:10px solid yellow; margin-bottom:0 }

<div id="template"><div id="relbox1"><div id="relbox2><div id="client">
</div></div></div></div>

で望みの結果が出てそうな気がするんだがどうか。

互換モードと標準で同じにしたいならborder-box使えや。

>>725
情報ありがとう。その方法だと、border:1pxにするとわかりやすいと思うけれど、
横幅は期待通りの結果になるのだけれど、縦が期待通りにならなくて困っています。

IEは、heightがうまく機能しない場合があるでしょう。

>>728
IEだけではないようで、私の環境ではFirefoxでもOperaでも駄目でした。
margin-bottomはいい案だと思ったのですが…。

heightの動作の仕様を調べて恋。

調べてきた。

>>729
色々試してみたけど、多分出来ないんじゃないかな？
expressionを使ってIEだけ逃げる方法がベストかも。

それにしても、こんな簡単なことが出来ないもんなんだね。

スタイルシートって手書きで書くしかないんですか？
セル(テーブル)だと機能でさっさと作れるんですが

CSS自動生成のサービスサイトならあるようだが。

そうですか

>>733
Dreamweaver 4.02 J（多分以降も）ではできるよ。
ただ、凝ったものはできないかも。

テーブルをウィンドウの中央に表示させたくて、次のソースを書きました。
でもうまくいきません。正しい方法を教えてください。

<style>
table {
margin-left: auto;
margin-right: auto;
}
</style>

<table border="1">
<tr><td>x<td>y
<tr><td>1<td>2
</table>

>>737
それで合ってるけど、IEだろ？標準モードにしなきゃ駄目。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html

>>738
回答ありがとうございます。大喜びで「DOCTYPE スイッチ」を試して
みましたがダメでした。なぜだろうと思って上のリンクのページの表
をよく見てみたらIE5.5(僕のブラウザ)には「DOCTYPE スイッチ」
はないみたいです。あきらめるしかないでしょうか。

>>739
IE5.5にはないね。
だったら仕方ないから、テーブルの上位要素（body？）にtext-align:center;とする。
で、テーブル自体はtext-align-left;に戻してやる。

ちなみに余計なお世話だけど、5.5は結構バグがあるままサポート終了しちゃったから、
支障ないんだったらバージョン上げといた方がセキュリティ的にいいよ。
じゃなかったらFirefoxに変えるとか。

>>740
下のソースで成功しました。text-align はテキストの
位置しか指定できないと思ってました。

バージョンアップ検討します。ありがとうございました。

<style>
div { text-align: center; }
table { text-align: left; }
</style>

<DIV>
<TABLE border="1">
<tr><td>x<td>y
<tr><td>1<td>2
</TABLE>
</DIV>

>>741
>text-align はテキストの位置しか指定できない
その通り。
だけどIE互換モードはバグでブロック要素までセンタリングしてしまう。
それを利用した裏技みたいなものだから。

>>742
バ、バグを利用。。。それならCSS使わずに、
<table align="center"> でやるかもしれません。

>>738
>MacIE5 は「HTML/CSS をその仕様どおりにかなり正しく解釈することのできる高度なブラウザ
ちょっwwwwwwwおまっwwwwwwwwwww

>>723
おそくなりましたが、レスありがとうございます。
うまくできました。

CSSのクラス名に「-」や「_」を使ってもよいでしょうか？

>>744
書かれた当時はMacIEが最先端だったのは事実

>>746
いい。ただし先頭は駄目

>>746
いい。先頭でも。

よくねーだよ。

>>746
HTMLのclass属性値には「-」と「_」を使ってもよいし、先頭にも置ける。

CSS2のクラスセレクタには「-」と「_」を使ってもよいが、「-」は先頭に置けない。「_」は先頭でも問題ない。

>>751
実対応の問題として_も駄目。

cssで段組しています。
左の枠を200pxと指定、右の枠は空きスペース一杯（残り全部）と指定したいと思います。

フレームで枠組みを作るときなどは100,*と指定する事で「残り全部」を指定できたと思いますが
cssの場合どうすれば「残り全部」と指定できるのでしょうか。

auto

>>753
左の枠分マージンとって右は指定しない

>>750
嘘を言って楽しいか。

>>751
CSS2は企業団体レベルだと4年前から、W3Cだと2年前から、仕様じゃあないだろ。
何百回言わせるんだ？
よって、- も _ も先頭に書ける。

現在メインの仕様であるCSS2.1のクラス名チェックブックマークレット。言うまでもなく改行消して使え。

javascript:alert(/^-?([A-Z_a-z]|[\u0080-\u00ff]|(\\[0-9A-Fa-f]{1,6}
(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9A-Fa-f]))([-0-9A-Z_a-z]|[\u0080-\u00ff]|
(\\[0-9A-Fa-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9A-Fa-f]))*$/
.test(prompt("Type CSS2.1 className (class selector without the leading dot).") || "") ? "O.K." : "N.G.");


IEが仕様にしているというCSS1用もいちおう。言うまでもなく改行ｒｙ

javascript:alert(/^([A-Za-z]|[\u00a1-\u00ff]|(\\[0-9A-Fa-f]{1,4}|
\\[ -~\u00a1-\u00ff]))([-0-9A-Za-z]|[\u00a1-\u00ff]|(\\[0-9A-Fa-f]{1,4}|
\\[ -~\u00a1-\u00ff]))*$/
.test(prompt("Type CSS1 className (class selector without the leading dot).") || "") ? "O.K." : "N.G.");

cssのフーバーでマウスオーバーの画像を切り替えているんですが、
その画像がキャッシュされていなく再読み込みをしてしまいます。

cssのbackgroundで指定した画像はキャッシュされないのでしょうか。

ちなみにssl接続です。

ホバーと言って欲しいお年頃です

一枚画像にしてしまえば？
作る手間も簡単だし、ソースもきれいになるし、

>>758
ちなみにOpera?

私も760のように1つの画像にしています。
上下に並べてbackground-positionでずらす。

>>761
FireFoxです。

四隅の角が丸い表を作ろうとしているのですが、
横幅を固定して上辺と底辺に丸角の背景画像を設定すれば表現できるかな、と考え実行しました。

<table>
<caption>見出し</caption>
<tr><th>A</th><td>A'<td></tr>
<tr><th>B</th><td>B'<td></tr>
〜中略〜
</table>

というごく単純な表で、
captionに上辺の画像をbackground-position:top left、
tableには底辺の丸角画像をbackground-position:bottom leftで指定しました。
（もちろん、no-repeatは指定してあります）

ところが、Firefoxではきちんと表示されるのですが、IE6では底辺の画像が表示されません。
指定の仕方自体は間違っていないと思うのですが……どうやったらIEでも表示できるでしょうか？

FireFoxやIE7はキャッシュされるけど
IE6はされないみたいお
Operaはしらん

>>762
そんな糞ブラウザは窓から投げ捨てろ

なあ、携帯サイトってcss使うのは一般的じゃないのかな？さっき
http://pc8.2ch.net/test/read.cgi/hp/1140109696/
をのぞいてみたらあまりのレベルの低さに愕然としてきた所なんだけど、
それとも、制約がおおすぎてデザインどころの話じゃないとか、、、

>>766
http://pc8.2ch.net/test/read.cgi/hp/1141064508/
の>>1

>>766
CSSの対応状況を考えよう。

ぐるっと見てきた。結論は、めんどくさい。まだもちっとさきっぽい

すいません、どなたかご指摘いただけませんか？
もう少し詳細に書いたほうがよかったでしょうか……・

>>763
その問題はさておき、角丸なら次のサイトを参照するよろし。
http://garage.mods.jp/ex/css-circle/

「W3C CSS 検証サービス」で、「テキストエリアに直接入力して検証」をする際、GETで送信しているのは何故？
データ量も多くなるし、POSTがいいと思うんだが・・・。

>>771
どっちかっつうと邪道の部類にはいるんじゃねえの？それ、、、

>>772
スレ違いだろ。Webプログラム板かUNIX板いけ。
それから一応いっておくが、一般的にGETはPOSTとくらべてほんの少しだけ軽いぞ。

>>774
でもあまりにデータ量が多いとサーバ側（つまりスクリプトじゃなくて）でエラーを返して来るよ

>>775
それは環境変数に直接値を渡すことでUNIXの設定がもろに響くから。
サーバの設定を自分で握っているであろうW3Cにしてみればあまり問題じゃないとおもわれ。
厳密な設計思想は実際に書いたプログラマしか知らんだろうけどな。

外部から利用しやすくするためにgetというのはよくある話だ

>>777
まあな。

http：//jigsaw.w3.org/css-validator/validator?text=%2F*%0D%0A%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3
%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3
%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3%81%82%E3
%81%82%E3%81%82%0D%0A%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81
%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81
%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%E3%81%84%0D%0A%E3%81%86%E3%81%86
%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86
%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86
%E3%81%86%E3%81%86%E3%81%86%E3%81%86%E3%81%86%0D%0A%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3
%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3
%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3%81%88%E3
%81%88%0D%0A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81
%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81
%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%E3%81%8A%0D%0A*%2F%0D%0A%0D%0A*+%7B+displ
ay%3A+none%3B+%7D&warning=2&profile=css2&usermedium=all

cssを使って文字に縁取りとかってできないのでしょか？
wikiを探してみたり、「縁取り 文字 CSS」とかでぐぐってみたりしましたが、見当たりませんでした。

どなたか知っていたら教えてください。

>>779
今の仕様では無理。
出来たとしてもフォントの関係でごく一部の閲覧者にしか出来なそう。

>>779
ガチガチに固めて出来ないことはない。
が、対象環境は非常に狭まるし、表現力も低い。
どうしてもやりたきゃ全部画像にするかPDFかだな。

あれー
俺はてっきり、同じ文字を9回1ドットずつのずれ（縦3ドット×横3ドット）で書いて、
真ん中だけ色を変えるとか、そういう解決策を提示するもんだと思い込んでいたのに。

時々見るよな。そういう間違った方向に気合いの入ったサイト。
●を二つ重ねて月を表現したりテキストを倍用意して全ページ影付き文字にしてみたり。

すいません
CSSでinputのファームタグでreadonlyが付いた物だけ色を変える方法て
無いのでしょうが？

例：）
<input name="test" type="text" size="5" value="test" maxlength="5" readonly >


試しに
input :readonly{
background-color: #CCCCCC;
border: 1px solid #999999;
margin: 1px;
}
て書いてみたんですが駄目なんですよね・・・・・
宜しくお願いします

>>771
そんなぐちゃぐちゃなページつくりたくないよ……。

テーブルにCSS指定するする時にIEだと変になるんでしたっけ？
どなたかアドバイスください……

>>785
お前が正しいと思っていても実際はどうだか分からない。
ちゃんとソースさらせ。

>>785
テーブルでそういう事するには入れ子にして、画像ももっと細かく分割しておくんだよ。
素材屋のサンプルソース探して見た方が早い。

>>782-783
あるな、CSSを切って見ると笑えるサイト。
そんな使い方するなら画像で入れたほうがよっぽど親切だ。

やっぱりできないですかー
1ドットずつずらしてってのはやったことあるんですが、CSSだとすっきり出来る方法があるのかなー
って夢見たりしてました。

デザインを考え直すことにします。ありがとうございました。

とあるCSSのHowTo本に載ってたTipsで、
a:hoverで表示させる背景画像はdisplay:none;で画像を配置して
先読みさせておきましょうとか真面目に書いててﾜﾗﾀ。
参考本って本当に使えね−よな。

>>790
display:noneだと駄目なんだ
visibility:hiddenだと読み込まれそうな気がする。

>>791
そういう問題じゃないだろ

>>792
あれ、じゃどういう問題だったの？

先読みしたい画像は見えないところで背景画像にすればいいよ。

>>793
HTMLだけ見たときに、意味不明な画像がポツンと置かれてることになるわけだろ？
そんなおかしなマークアップを推奨するようなことを参考本がするなってことじゃないのか？
CSSのHowTo本とはいえさ
俺はそう思ったが

それしか方法がないならまだしも
画像を一枚にしてbackground-positionをずらすってやりかたがあるわけだし

第一CSS切ったときにどうなるんだと

>784
ファーム→フォーム

で ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#attribute-selectors
ただし WinIEは対応してない（はず） FxやOperaは大丈夫なのかな

>>795
あ、このスレあまり詳しくないんだけど、
スレの流れ的にHTMLに対して論理的な意味も結構問うんだね。
JavaScriptスレによくいるから、CSSを切るとかそういう発想はなかった。
今後気をつける。

ちゃちゃをいれてスマンが、
HTMLの論理的、つーか文章としての構造とか言われても、
AjaxのHTMLの具なんか、
<BODY></BODY>
だったりするからなぁww

>>797
つうかCSSの神髄はそこだろ。

>>798
もはやAJaxはHTMLとかCSS関係ないからな。便宜的に利用してるだけで。
てか、文章じゃないし。

>>799
http://w3j.org/articles/MTstructuraldesign/MTstructuraldesign01.html

こういうの見るとたかがタグ、されどタグとか思う。俺もいじってるけど、
普通きづかねえよ、こんなこと。

なんで、IDなりclassなりで指定して、javascriptで膨らませろって教えてあげないの？

CSSで<a href="xxx.xxxx" target="xxx">みたいにすることって出来るんですか？

CSS3まで待て
http://www.d-toybox.com/spec/CSS3/hyperlinks/

我が流派に不可能なし

>>805
本当？

IE6を使っています。
ページを開いたときに
<input type="submit" value="次へ">
があったら、そこにフォーカスがある状態にしたいのですが
スタイルシートでできますか？

>>807
つ javascript

>>807
不可能です。

>>808-809
即レスありがとうございます。
無理ですか。四苦八苦する前に教えていただけて助かりました。
javascriptスレをROMりに行ってきます。

>>807
ぐぐったほうが早いキガス

>>812
消えろ馬鹿野朗

ttp://www.geocities.jp/multi_column/practice/2column1.html#fixed-liquid

の説明は非常にすばらしいと思ったのだが、
Cの高さがBのそれより小さい場合にDがfooterの位置にくるのかちょと疑問。

>>814
それぐらい試せば一発で分かるだろ。
実際につくるときはそういうのを考えつつ調整していくがな。

IEとOperaは気を利かせて?おｋだったけどmozは上にずれた。
815氏はどうやって調整してるの?

>>816
むかしサイドバーにこったテンプレートをつくったんだけど、
そのときは万能型になるよに

□□□■■■■■
□□□■■■■■
□C□■■B■■
□□□■■■■■
□□□■■■■■
を
□□□■■■■■
□□□■■B１■
□□□■■■■■
□C□★★★★★
□□□★★B２★
□□□★★★★★
とした。

スタイルシートを解除すればこうなる。
■■■■■
■■B１■
■■■■■
□□□□□
□□C□□
□□□□□
★★★★★
★★B２★
★★★★★

AとDは>>814と同じ。

>>814
あ、そのサイト俺も利用してる。というか穴が開くほど見つめましたよ、いままでに。
で、下の方にちっちゃくソース元がagpって書いてあんの。あそこのソースが元の記事って
多いよね、何故か。

2ちゃんねる先生よろしくおねがいします。
table {
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: #666699; /* 枠の色 */
border-width: 1px; /* 枠の幅 */
}
こうするとtableが綺麗なんですが、
今のを
.hoge table {
font-family:tahoma;
font-size:11px
border-collapse: collapse;
border-style: solid; /* 枠の種類 */
border-color: #666699; /* 枠の色 */
border-width: 1px; /* 枠の幅 */
}
と修正して、
<table class="hoge">
とすると最初のと表示具合が違ってしまうんですが、
なにか根本的に間違えてますでしょうか？
特定のtableだけ上記のようにしたいのですが。

>>819
CSSを１から勉強しなおせ
>.hoge table

>>819
>.hoge table {}
正しくは
table.hoge {
もしくは単に
.hoge {

>>818
マジで？！　たまに穴開いてるけどおめーの仕業だな

皆様お手数お掛けしてもうしわけありませんでした。
ありがとうございました。

-------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
-------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
-------------

上のeuc-jpだと文字化けしないのですが下のShift_JISにすると文字化けしちゃいます。
Shift_JISにして文字化けしない方法教えて下さい。

>>824
EUCで文書を保存してんじゃないのか？
Shift-JISで保存汁。
保存の方法はソフトによって違うから自分で調べれ。

ていうかスレ違いじゃん・・・orz

>>825
ありがとうございます。
ソフトはメモ帳なんですが

>>827
メモ帳の時点で化けてない? 1から自分で書いたやつ?

>>817
ｋｗｓｋ

質問者がShift_JIS、回答者がShift-JIS。愉快なスレだ。

アップロードをテキストでやっててコード変換かかってるんでは。

>>829
前者はIANA、後者は一般名で別に問題なかろう。
Windows-31J 使っとけとは思うがな。

文のまとまりはできるだけpでマークアップするように
心抱けているのですが、

↓のことをした場合、divではいいのですがpだと入れ子表示ができません。
この場合はdivを使うしかないのでしょうか？

<html>
<head>
<style type="text/css">
p{background-color:#FF0000;margin:10px;}
div{background-color:#FF0000;margin:10px;}
blockquote{background-color:#0000FF;margin:10px;}
</style>
</head>
<body>
1
<p>1-1<blockquote>1-2</blockquote>1-3</p>
2
<div>2-1<blockquote>2-2</blockquote>2-3</div>
</body>
</html>

>>830
>後者は一般名で別に問題なかろう。

屁理屈言うなボンクラ。
この板で一般事務の話を誰がしてんだ？
どうせ、最終的には、@charset も書いとけというまとまり方になるだろう。
その時、Shift-JIS じゃあだめだな。

>>828
>>830
解決しましたありがとうございます。

>>832
どっちが屁理屈だかw
「エディタで文書の保存」をシフトJISでやれって話だろw
charsetも@charsetも関係ねぇよw

うわ。。解決したと思ったらfirefoxの時にJavaScriptがバグっちゃいました。

>>834
苦しいなぁ

>>832
回答者のラベルも斟酌してやろうよ、な？

>>836
まじわかんねぇの？

正確な物言いをするなら、Shift_JISだろうがShift-JISだろうがおかしいだろう。
EUCでだめ、Shift_JISにしたいってんのなら、どうせ機種依存文字がでなくて
どうのってことだろ。

仮にエディタにcharsetの正確な判断があるとすれば、
そもそもShift_JISと書いた時点で「シフトJIS」保存されるわけだから、
そもそも質問は出てこない。

エディタにそんな機能がないとすれば、
回答者はエディタの文字コード指定保存機能を使えって言ってるわけだ。
実際にそのコードは正確にはCP932だとかMS932だとかWindows-31Jだとか
そういうお話だが、エディタの「文字コード」として一般的に使われている
名称は「シフトJIS」だろう。

「シフトJIS」の一般的な表記として「Shift-JIS」を使うのはふつうでしょ。
むしろ「Shift_JISで保存」なんて表記するエディタのほうが稀有だろ。
そんなのあったら、コードページ932で保存だのWindows-31Jで保存だのも欲しいぐらいだ。

てかまぁメモ帳らしいからなんも関係ないけどな。

>>831
blockquote はブロック要素で、
p はインライン要素しか包容できない

>>839
なるほど、ありがとうございます。

ということは文章の途中に引用を含める場合には、
<p>あいうえお</p>
<blockquote>引用</blockquote >
<p>とうことで、かきくけこ</p>
という形になるわけですね。

さらに言うなら
<blockquote><p>引用</p></blockquote>

使う人は使ってるんだろうけど、俺はどうしてもblockquoteタグが美しくないと思う。
そもそもblockquoteという文章の意味づけがかんがえられない。というか、ないよな。
汎用的blockquoteとしてdivをつかうのも、それも同じ理由であまり美しいと思えない。
だけど、どうしても使わないとならないのだとしたら、俺だったらこうする。

span {display: block;
}

<p>aaaa<span>aaa</span>aaa</p>
もしくは、
dd,dt{display: inline;}
#hoge .blockyouso{
disolay:block;}

<dl id=hoge>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

こうすれば一つの段落でありながらクラスずけした部分だけblockになるので意味的に
問題ないかなあ、、、

いまぱっと考えたのでまちがえてるかもしれんけど

>>842
せめてq要素を勉強してきなさい。
そしてスレ違いなので出て行きなさい。

>>843
間違ってたんならあやまるけど、どの辺がすれちがいなんですか？

クラス「ずけ」

>>843
>>842は、>>831がbqつかってんのがよーわからんと言ってるんでは？
違う気がしないでもないが。

>>844
>>843は、>>831が「HTML要素としてbqの意味がよーわからん」と言ってると
思ってるのでは？

>>840
文の中に短い文を埋め込む引用は<q>、
文章の中に長い文章を別段落のように引用するのが<blockquote>。
そしてCSSでなくHTMLな話題なのでスレ違い。

>>846
この場合、元がCSSでの入れ子なんだからこのスレでもいいんでない？
そんな糞お役所的なたらい回しせんでもさwww
つーか引用の短い・長いとは、どんな区切りよ。

>>847
http://pc8.2ch.net/test/read.cgi/hp/1147429842/
ここ行って訊いてこい。

コンニャク語ってるスレで何を聞けというんだい？www

コンニャクについて

ゆず味噌で美味しく頂きましょう。

おう　相も変わらず(ry

すみません、background-positionプロパティで
右から何pxの位置って指定、できますか？

追加質問すみません。
IE7が入れられない環境なのですが、
IE7においてbox-sizingはサポートされていますでしょうか？

>>853 yes

>>855
ありがとうございます。すみませんが書き方がわからないので、教えてください。

>>856
http://66.102.7.99/

>>857
検索ならばしたあとです。
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/colors.html#background-properties
右端は100%で可能でしょうし、左から何%という指定はできるでしょうが、
右から何pxという指定は見たことがないので、できるのならばお訊きしたいのですが。
もし検索で出てくるのならば、検索キーワードをお教え下さい。

http://www.google.com/search?hl=ja&lr=&ie=UTF-8&oe=UTF-8&num=50&q=background-position+W3C+%E3%81%BE%E3%82%93%E3%81%93

>>859
だいたいこのスレばっかじゃねーか…。
酷すぎる。

>>847
これがかのゆとり教育ってやつなんだろうか…。
きみはもうすこし本を読んだ方がいい。
おっちゃんちょっと心配になってきたよ。

おっちゃん　心配せんでもええがな
所詮厨やろ　気もむと禿げるでぇ

>>858
現在のCSS仕様では無理。JavaScriptを使えばできる。

例えば、キャンバスの幅を document.innerWidth とか
document.documentElement.clientWidth とかで取得して、
その幅から画像幅と右辺からのオフセット値を差し引く。
後は document.body.backgroundPosition 等で位置を指定。

WinIE6の互換モード、もしくはWinIE5.5以前の場合、
キャンバスがhtml要素ではなく、body要素なので注意。
document.compatMode で判別して、振り分ければ良い。

JavaScriptが無効の場合はどうすのか問題だが……
後は自分でJavaScriptを書くなり、諦めるなりしてくれ。

>>863
ありがとうございます。理解しました。
結果としてスレ違いの話題になりましたこと、お詫びいたします。

IE6の互換モード時、
htmlへの背景画像指定が効かないのは仕様ですか？
バグ辞典にも載ってなかったんだけど。

ｽﾏｿ訂正。
htmlとbody両方に背景画像指定がある場合の互換モード、でした。
htmlに指定したほうの背景画像があぼんされる。

>>865
バグ辞典をよく見ろ。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b142.html

>>867
ｽﾏｿIE5系は見てなかったorz

ブラウザを縮小・拡大しても文字が改行せずスクロールバーが出てくるようには
どのようにしたらいいのでしょうか？
以下のページソースとCSSファイルを見てもわかりませんでした。
ttp://homepage1.nifty.com/~yoshi-s/home/

なんちゅー迷惑な・・・

>>869
「横スクロール　迷惑」でぐぐってからもう一度聞きにこい

?
特に普通の質問だと思うが、何が迷惑なん？

>>869
widthで幅を固定しとく。

>>872
800*600でネットを巡回してる人か。

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

>>873
何で貧乏人に合わせなきゃいけないんだよ馬鹿が

度々すみません。
div を連続して使うとくっついてしまうので
いちいち <div><br /></div>を入れているのですが
スマートな方法はないものでしょうか？

高解像度のモニターを使ってる奴程窓全開にしないものだよ。

>>876
xhtmlで書いてる人がmarginも知らないのかい？

俺も前回にはしないけど800*600まで小さくはしないな

>>875
もうちょっと優しく言ってね♥

Macだとフォトショップなどを除いて全画面表示自体が馴染みない文化。
つうか最近のばかでかい液晶と高解像度の組み合わせで画面一杯に広げると
見づらくて仕方がない罠。

>>878
ごっつぁんです

IEでカラー名のlightgrayが使えないのはバグですか？
他のグレー系の名前はgrayでもgreyでも通るようですが
lightgrayだけはlightgreyでしか読み込んでくれません。
firfoxでは両方可能ですが、他のブラウザではどうなのでしょうか？

１６進で書けば問題なかろうて

>>880
フォトショやイラレでもフルスクリーンにはしないだろう。
クリッピング使えなかったら不便じゃん。

<small>とか相対で文字サイズを指定するタグあるけど
これらのタグまでcssで置き換える必要はあるのだろうか？

それはstrictスレじゃない？

物理タグつかっちゃいやん

ins要素がブロックレベル要素のときとインライン要素のときで
表示を変えることはできますか？

どうしたいんだ？

ins要素がブロックレベル要素のときは枠線を付け、
インライン要素のときは下線を引く、といった感じです。

例え親要素が同じでも
<li><ins>なんとか</ins></li> ならins要素はインラインで、
<li><ins><p>なんとか</p></ins></li> ならブロックレベルなので
子孫セレクタを使うことができなくて、どうすればいいか考えてます。

spanでclass付けとかさ。

こんばんは
今リストで画像のメニュー（ロールオーバーなし）を作ってるとこなんですが
cssでliに対しdisplay:inline;を指定してそれぞれのliの中に
画像を４つ組み込み横並びで作成しプレビューしてみたら
全てのブラウザで画像と画像の間に隙間で出来てしまいます。
隙間のなくす為にはどうすればいいかすみませんがアドバイス
よろしくお願いします。
ちなみにulとliに対してmargin&paddingを0にしても駄目でした・・・

li要素間の改行コードが半角スペースとなっているようです。
li要素を連続して記述するようにしてみてください。

>>893
すげー　それを見て初めて892が何を言っているのかわかったよｗｗｗｗ

>>893

返答ありがとうございます。
言われた通りに修正してみたらうまくいきました！
本当にありがとうございました。

>>894
説明がへたくそでマジすいません・・・

893
神返答だなｗ
なんでそれでわかるんだとｗ
しかも断言してるしｗ

昔それでハマったんｼﾞｬﾏｲｶ？

隙間が出来る
-> タブ・スペース・改行が原因
-> vertical-alignがbaselineになってる

ってのはFAQな希ガス

俺たちは今、エスパー誕生の瞬間を見た！

サイドメニューにbackground-colorで背景色を表示させたいんですけど
背景色が最下部まで表示してくれません。
heightに絶対値をいれる以外に方法はありますか？

>>899
>背景色が最下部まで表示してくれません。
サイドメニューそのものが最下部まで到達してないと思われるがどうか。
つうかこのスレッドは>>893みたいなエスパーだけで構成されている訳じゃねー！

>>900
そのとおりです！
右側のコンテンツのボックスには色々と文章が入っていて
最下部まで到達してるんですけど
左側のサイドメニューのボックスには入れる項目が少なく
最下部に届いてない状態なんです・・・
こういった場合はmarginなどでバランスをとるべきなんですかね？

>>899
サイドメニューのdivとメインのdivにdiv。
外のdivに背景色指定してサイドメニューかメインのどちらかに背景色指定。

>>902

言われた通りに作ってみたんですけど
ie6は背景の赤が表示されたんですがfirefox1.5とネスケ7.1が
背景色の赤が表示されず白になってしまいます。
何回もすいません・・・

ちなみにソースです。
#aa{
width:450px;
background-color:red;
}

#bb{
float:left;
width:50px;
}
#cc{
float:left;
width:400px;
background-color:white;
}


<div id="aa">
<div id="bb">aa</div>
<div id="cc">aa</div>
</div>

すいません#aaにheight:100%指定したら出来ました！
アドバイスしていただき本当にありがとうございました！

>>903
御免なさい。不完全な助言で申し訳ありません。
>>893 の神を待ちましょう。

>>905
貴方がアドバイスしてくれたおかげで解決しましたよ。
本当にありがとうございました！

>>903

#aaがページ全体ならbodyに背景画像の方がすっきりしていいかも。
#aaの上や下にヘッダー、フッターなどは居るなら#aaに背景画像入れるとか。

height関係をいじるとブラウザによって表示が変わることなかったかな？

frameやframesetに適用できるCSSってあるんでしたっけ？

>>908
frameはそれぞれ独立したページでしょう。
JavaScript を使えば若干の操作はできるかもしれないけれど
基本的には無理でしょう。
CSSを外部ファイルにして両方のページで共有するのが一番近い答えかな。