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

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

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

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 26
　http://pc8.2ch.net/test/read.cgi/hp/1120837682/

【仕様書】
CSS1の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
　http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/css1/toc.htm
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

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

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

【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/index.html
・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段組レイアウトデザ委員会
　ttp://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://css.maxdesign.com.au/index.htm

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

【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: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

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

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい？
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ（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; のバグを利用した擬似フレーム

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

＊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

ふぅ

乙！

>>1
【前スレッド】が***のままだorz

【前スレッド】http://pc8.2ch.net/test/read.cgi/hp/1154599765/

最近みんなどの程度までブラウザのサポートしてる？
Firefox、IE、Opera、Safariぐらいに対応してあったらいいと思うんだけど
ブラウザの各バージョンでも違ってくるし
ケータイとかフルブラウザにも対応させないかんし…

旧バージョンとかのブラウザを揃えるのも一苦労するし
同じブラウザなら複数インストールできないから確認するのも辛い

>>13

Firefox、Operaは最新版で確認
IEは6.0
Safariはどうやって確認しよう？

Netscape4.〜とIE4にはスタイルシート読み込ませない。

前スレ>>991,>>993,>>996辺り

負の text-indent や Off-Left 法が利用されるケースは、
SEO 対策というより、スクリーンリーダ対策の場合もある。
読み上げブラウザではなく表示を単に読み上げるだけのスクリーンリーダは、
media=aural 指定も意味をなさない。
display: none も読み上げない。

英文だけど
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
を参考にしてみて

現在パソコン2台持っています。
現在スタイルシートで
h1の見出しタグの大きさを変える作業をしています
うまく行ったと思ったのですが、問題が発生しました。


っているパソコンが2台あるのですが、
片方では希望どおりに表記され、
もう片方ではサイズの変更がうまく表示されていませんでした


<html>
<style type = "text/css">
h3　{ font-size : 5px }
　　h3 { color : blue}
</style>
<body>
　　
<h3>こんにちは</h3>
お元気ですか？
　　
</body>
</html>


具体的には上記の文法になります
文法に問題があるのでしょうか？パソコンに問題があるのでしょうか？

レベルの低い質問で申し訳ない

＞h1の見出しタグの大きさを変える作業をしています
＞h3　{ font-size : 5px }

h1は変わっていません。
h1の文字の大きさを5pxに変えたいのなら

h1{
font-size:5px
}

としましょう。そしてhtmlのほうも

<h1>こんにちは</h1>

としましょう。

>>前スレの話
fontの相対サイズ指定をするなら、%とかを使わないで
100%なら1にしとく方がいいよ。
バグがあるからそれに陥らないようにする為に。

ul内のaにdisplay: block;を指定すると
Netscapeで見ると何故かページの端まで線が伸びるのですがこれは仕様ですか？

>>18
このスレ最近こういうバカが多すぎる

>>18
line-heightの間違いじゃね？

>>18
>>21
line-height　バグ　でぐぐった

■Eric's Archived Thoughts: Unitless line-heights（英文）
ttp://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

■Lucky bag::blog: line-height の値には単位なしが良いとされる理由（和文）
ttp://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html

>>22
一応言っておくが、パーセント指定時の継承問題はバグじゃなくて仕様だぞ。
だから使用目的によって変えるのが正解。
むしろバグがあるのは実数値のほうで、IE3やNN4がおかしなことになる。

>>23
おっと失礼。誤解を招くような発言でした・・・
むしろ23に指摘されなかったら自分も「バグ」と誤解したままだったかも。
ありがとう

>>13
俺もみんなどんなブラウザ使ってるか知りたい
ちなみにFirefox最新、Opera最新、IEは6,7ぐらい
モバイルは無いので未検証

>>25
ブラウザシェア
で具グレ。

>>26
シェアじゃなくて、制作者がどのブラウザを入れてて
確認に使ってるか知りたいんだろ。

Firefox最新＞Opera最新＞IE6＞NN4＞N7.1＞Linx＞影鷹

>>28とほぼ同じ。
それにIE5.5が入る。

FireFox最新
opera最新
nn6 7
ie5.1 5.5 6
Safari最新
MacIe 5

IE6、FireFox、Safariでちゃんと見れりゃいいよもう・・・

ところでどうやってSafariなんてどうやってチェックするの？

Safariで確認すればいいだけじゃないか。

>>30 -nn6 +IE7beta だな

IE7なんてXP以上じゃないか・・・・・・・・
はいらねえ

>>33
工エｴｪ(ﾟ〇ﾟ;) ｪｴエ工
　　　 　ﾟし Ｊﾟ
Mac環境なんてみんな持ってんの？

>>32-33
ウケタ

>>36
確認のために買った。

いまどきマック環境なんて普通でしょ？
フォントのバリエーション増えるしwinでけるし

penMのノートとmacproあれば腕によるが稼げるぜ

Macってシェア少ないしSafariのシェア減少してるんだろ
MacユーザーはFirefox使ってるんだろ？
Firefoxで動作確認できたらそれでええじゃないか

>>39
流石に普通とまではｗ　IntelMacとなると、ヨーロッパ旅行
行けちゃうすぃ。旅行では稼げないとかはさて置き。

＞MacユーザーはFirefox使ってるんだろ？

大半のMacユーザは普通にSafariだよ
画面綺麗でええよ

他の環境で問題なければSafariも大丈夫だろう、と思うことにしてる。

Firefoxで大丈夫ならSafariでも大丈夫な感じ。
両者で差が出ちゃったことはないｷｶﾞｽ

Safariはulがなんだか他と違うと思う。
何がどうってちゃんと説明出来ないんだけど。。
FireFoxはwinもmacも差が無くていいんだよな。

説明できないなら言うなよ…。
JSの対応がいまいち＞Safari

確認するとしたら以下の環境なら十分か
いい情報だと思うから次スレからテンプレ入れない？

Windows環境の人
・Firefox最新
・Opera最新
・NN最新
・IE6

Mac環境の人
・Safari
・Firefox最新
・Opera最新
・IE5 Mac

SafariはKonquererって同じ解釈するの?
するならMacの代わりにKNOPPIXで確認する。

誤: SafariはKonquererって同じ解釈するの?
正: SafariとKonquerorって同じ解釈するの?

orz

>>47
全く必要な情報でもないし、しょっちゅう変わるだろ。
質問者が環境を書く今のテンプレだけで十分。

>>47
winIEの5とかまだ結構いるよ。
テンプレに入れるような内容じゃない

NNとFF同じじゃね？

またまたご冗談を

>>52
NN4はメタクソ、N7はCSS2.0準拠、FxはCSS2.1準拠。

いまNN4ってどんな人が使ってんの？
Macだと数年前のOS9時代には多かったけど…

>>55
企業だとWin95のN4が義務づけられてるところはあった。

今でもあるんだね
正直そんな場からの閲覧率は無視してぇ

IE7の重さに耐えられず、N4を起動してみたらその軽さにハマったというブログなら読んだ

でもNN4に関してはがんばって対応というよりは
CSS適応外ねハイハイって扱いが多いでしょ

どこがどうなって「でも」という接続詞が来るのか。
ついでに上の確認ブラウザを見てないのか。
そこまでや奴はNN4用は別のCSS割り当ててるだろ。

むしろCSSを適用してくれないから軽くていいという意見もありそうだな

正直IE4とか5とかで見られるより、ネスケ4で見てくれたほうがありがたい。
し、見やすいと思う。微妙に崩れるのが一番見にくい。

NN使うくらいならDonut使う

へたにNN4なんかに対応するから未だに使ってんだ。無視無視。

>>21-23
ググってみたらフォントサイズでも継承は起きるみたいだよ。
ttp://fb.skr.jp/bowz/archives/000414.html

>>65
当たり前だろう。
全然会話の内容理解してないようだから、勉強しておいで。

継承の問題が起きないようにする為の、単位無し指定の話なんじゃないの？
会話の内容を理解できてないのはどっちだろう

>>65
>>21 が言っているのは、単位なし実数値が使えるかどうかって話。

line-height では value に <number> が認められているから、使える
http://www.w3.org/TR/CSS21/visudet.html#line-height

font-size では使えない
http://www.w3.org/TR/CSS21/fonts.html#font-size-props

>>68
ああ、そういうことね。
把握した。

>>67
ﾌﾟｷﾞｬｰ

あーﾁｸｼｮ
フロートでマルチカラムにしたら
IE6ではズレて（text-align:center;で解決）
IE7ではまともに表示できて…
Mac版IEでは果てしない横スクロールがでる（解決できねーw

>>71
floatedな非置換要素にはwidthの明示が必要。

>>72
それは2.0。2.1では必要ない。

>>73
MacIEでの話だろ。まあMacIEでどうなのかは俺は知らないが。

IE6やら7やらの話をしてるのに、どうしてMacIE？

>>71の最後。
マクIEは2.0でいいと思う。
でももうサポート終了したし無視していいと思う。

MacIE5なんてすでにAppleサイトすらズレてたりするしな

アポーサイトは元々酷いからな

クラシックは過去の遺物だからな。

>>79
OS X 版もある>MacIE

まあ、無視するかどうかは方針の問題。
業務案件だとクライアントが初代 iMac を持っていたりして、
無視できなかったりすることもある。

adobeさんはいち早くmacieを見捨てました

position:absoluteってIEじゃサポートされてない？
opera9だと理想通りなんだがIE6で見るとかなりひどいことに･･･

はあ？

>>82
それは君が間違ってる

>>82
position:fixed

質問です。
画像に対して文字を回り込みさせたいのですが、
floatを使って左や右に回り込ませる方法はわかりますが、
画像を中央に配置して文字をまわりに回り込ませる方法ってあるのでしょうか？

例えば、
<div style="position:relative; width:200px; height:200px;">
文字文字文字文字文字文字…（後略・回り込みが必要な程度の文字）
<img src="image.jpg" style="position:absolute; left:50px; top:50px; width:50px; height:100px" />
</div>
とあった場合、この書き方だと画像の裏側に文字が隠れてしまいますが、
これを上手く左右に回り込ませる方法を考えています。

ある程度DOM構造が変わっても問題ありません。何かアイデアがあれば是非教えてください。
よろしくお願いします。

みなさん。質問です。

スタイルシートをかじったことのある上司に
社内のスタイルシートがまともに使ってないサイトを
スタイルシートを使いまくりのサイトに再編するよう言われたのですが、
1px単位の位置まで正確に復元しないとだめですか？
上司が無茶いうとです。

何て言うか、例えると
ヤムチャがクリリンにフリーザの倒し方を教えるようなもんです。

誰か助けてください。
重複してたり、スレ違いならごめんなさい。

>>86
思い付かないな。たぶん無理。

>>87
上司のブラウザを基準にすべての単位系をpxでつっこめば可能じゃないかね。
スタイルシート構成にする意味があるかは微妙だが。

…全てのボックスの位置をjavascriptで取ってposition:absoluteなdivで
置き換えるなんていうバカ荒技とか…ちょっと面白そう…

>>87
＞1px単位の位置まで正確に復元しないとだめですか？
上司がそう言ったのか？それをはいはい受けたのか？
業者に頼め。

>>88
やはり無理ですかね。
何とか実現しようと色々な方法を考えてみたんですが、
解決のきっかけとなるアイデアさえ浮かばない状態です。

>>90
技術的には、Eric Meyer の Boxpunch を応用すれば
何とかなりそうな希ガス
http://meyerweb.com/eric/css/edge/boxpunch/demo.html

ただ、HTML としての妥当性が維持されるかどうかは別

>>91
面白いサイトありがとうございます。
そのサイトは基本的にfloatを使って実装されているようで、
やはり左右同時の回りこみは無理みたいですね。
しかしなかなか面白いコンテンツ満載でしたので、もう少し見てみます。

実現できるならばHTMLとしての妥当性に関してはある程度諦めるつもりではいます。

レスありがとうございます。

>>88
>>すべての単位系をpxで
元サイトの単位がpxです。
でも、目の悪い社員もいるから、フォント変換のできるemを基準単位にしろって聞きません。
だからpx単位のズレがでるんです。

>>87
>>上司がそう言ったのか？
｢みろ！ズレてる！画像が動く！｣
こんなことしかいいません。

>>それをはいはい受けたのか？
いいえいいえ言いました。
でも、｢これは、お前への課題だ！｣と言い続けてます。
borderの定義を知らなかったのに、講義もします。

もういや

>>93
目の悪い奴はOperaみたいに拡大できるブラウザ使わせりゃいいんじゃないかと

>>87
お前さんの力量がわからないし、グチ言うだけのスレは他にある。
文字の大きさを可変にして、それに対応するなら、PX単位で同じってのは既に無理。
取り合えず、作れるだけ作ればいいじゃん。
上司の方がホントにお詳しいなら、添削してくれるでしょ。

>>87
横幅をpx指定でフォントサイズをemでおｋだろ

>>93
リキッドデザインのサイトを見せて、
さまざまな環境に合わせてより美しく見やすく見えるのが
いいｈｔｍｌなんですって教えたら？
ちょっと嘘だけど目的の為にはしょうがないｗ

みんなやさしいな。
同業者同士分かりあえるのか。

<style type="text/css">
<!--
body{
background-color:#ffffff;
}
a:hover img{
background-color:#ffffff;
}
a:hover{
background-color:#ff0000;
}
img{
margin:5px;
border:none;
}
-->
</style>
<div style="text-align:center;margin:-5px;">
<a href="***.html"><img src="***.gif" width="150" height="150"></a><a
href="***.html"><img src="***.jpg" width="150" height="150"></a><a
　　　　　（中略）
href="***.html"><img src="***.jpg" width="150" height="150"></a>
</div>
↑
リンクテキストにマウスを重ねたときは背景色が赤に変わって、
リンクイメージの場合は背景色が変更しないようにしたいのですが、
operaやfirefoxで確認すると画像下部の背景色が変わってしまいます。
アドバイス・ヒント、よろしくお願いいたします。

>>99
imgのあるaにclassを割り当てる。

ところで
<div style="text-align:center;margin:-5px;">
これもインラインスタイルはやめれ・・・

初歩的なことで申し訳ないのだけれど、なぜインラインスタイルはよくないのでしょうか。
私はJavaScripterなので、つい多用してしまうのですが…

>>100
ありがとうございました。
うまくいきました。

>>87
普通に作っといて、上司が席を離れた隙を見てpxでガチガチに固めたユーザスタイルを仕込めばおｋ

>>99
a img { line-height : 0 ; } でいけたような気がする。うろ覚えだから違ったらごめん。

>>101
スタイルを変えるのにHTMLを編集しないといけないから。
スタイルシートやスクリプトは全部別ファイルに分離しとくほうが(本来は)圧倒的に楽。

>>103
なるほど、言われてみればスタイルシートを切り替えられるのは重要ですね。
私はHTMLをマークアップ言語ではなくUI記述言語と捉えているからインラインが楽だと思っていることに気付きました。

画像とテキストを組み合わせるときに、必ずしも回り込みをさせるわけではないのですが
もし回り込みを指定（align="left"）した時には、画像と文字の距離を「〜px分空ける」という風にする
方法があれば教えていただけないでしょうか？

>>94
>>拡大できるブラウザ
fxだからpxは使えないとか言います。

>>95
>>上司の方がホントにお詳しいなら、添削してくれるでしょ。
添削してくれましたが、表の開始点がそろったら黙りました。(´･ω･)

>>96
>>横幅をpx指定でフォントサイズをemでおｋだろ
横幅がpxだと回り込みが発生しました。

>>97
>>リキッドデザインのサイトを見せて、
そんなことしたら、全サイトの改訂を命令されます。
恐ろしい事言わないで下さい。

>>103
>>上司が席を離れた隙を見てpxでガチガチに固めたユーザスタイルを仕込めばおｋ
ちょwww
毎週上司が使うから無理です。


というわけで95さんのレスから、
pxからemへの完全変換は無理と伝え、
一番左の線をpxで合わせたら、
｢こういうのでいいんだよ。｣と言って黙りました。

皆様本当にありがとうございました。
では名無しに戻ります。

転職するか部署変えて貰いなさい…

>>105
そのclearを指定したブロック要素にmarginを取る。

>>106
上司よりもおまえが逝ってヨシ。

>>108
<img class="hidari" src=xxxxx.jpg width="xx" height"xx">

外部cssに
.hidari {
float: left;
margin-right: 10px;
margin-bottom: 8px;
}

上記のように書いたのですが、何の変化もありません。
どの変が間違えているのでしょうか？

>>106
もうちょっと日本語を勉強してきてくれ

>>109
clearした要素に、と言っただろう。
floatした要素に、ではない。

clearしたやつだとやってることがちがうような。
ていうかfloatしたやつでもいいような。

>>109
それで動かないはずは無いんだが・・？

>>111
お前勉強し直せ

>>109
念のため、ブラウザのキャッシュをクリアしてみそ
あと、height 属性と値の間、イコールが抜け

>>114
キャッシュクリアで出来ました！う〜んCSSって難しいですね。
みなさん、どうもありがとうございました。

マウスカーソルを合わせるとフォントの装飾(主に bold 化)を変えられてチラチラしてウザイ
→ユーザースタイルシート a:hover { font-weight: normal !important; }
→元からリンクを bold にしてある所だと逆にまたウザくなる

('A`)どうすればいいですか・・？

いままでTABLEやインラインでのスタイルを当たり前のように使っていましたが
脱旧世代を目指してCSSに挑戦しました。
TABLEをCSSに置き換えるのは大変ですね
DIVの入れ子とfloatでグリグリしたけど何とかできました　やっと理解出来た。
ただNNやFXとIEの表示の違いを直すのに2日も悩んでしまいました。

ここのスレを読んで助かりました。

>>116
display: none;

>>117
おめでと。
ついでに論理マークアップも覚えるといいよ。

>>118
論理マークアップですね　ちょっとググッてみたのですが
fontタグやbタグを使用せずにstrongやemを使用することですね
今回はdtやddをスタイルシートで色指定しただけでしたので、そこまで気にしていませんでした。
早速、スタールシートや標準化？の書籍を購入してきます。

(´･ω･｀)

>>116
a { font-weight: normal !important; }

>>117
「脱初心者をめざす人のためのホームページ作成講座」
　http://elastic965.80code.com/

文章中の画像の位置を真ん中に指定するとか左よりにするというのは
HTMLとCSSのどちらでやるべきなのでしょうか？

htmlのalignって非推奨じゃなかったっけ

>>123
ということはCSSで指定するべきなのでしょうか？
構造はHTML、デザインはCSSと聞いたのですがどちらにも当てはまりそうなので悩んでました。
ちなみに<img src="---.jpg" align="center">では真ん中に表示されませんでした。

つ<p>

http://www.w3.org/TR/html401/sgml/loosedtd.html#IAlign
  <!ENTITY % IAlign "(top|middle|bottom|left|right)" -- center? -->

質問をさせてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title></head><body>
<div style="position:relative;width:100px;height:100px;overflow:auto">
<span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span><!--
--><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span><span>あ</span>
</div></body></html>

上記のように、CSSにwidthを指定してあるdivに対して<span>で囲んだ「あ」を12個配置するHTMLを、
Safariで表示した場合にどうしても上手く表示することが出来ません。
IEやFirefoxの表示のされ方とはちがい、100pxで折り返さずに同じ行に表示され、
そしてなぜか最後の1個だけ次の行に出ます。イメージとしては下のような感じです。

あああああああああああ
あ

各文字を<span>で囲むのは、今書いているscriptの特性上どうしても避けられないのですが、
それ以外に関しては比較的自由に調整出来ます。なんとかこの問題を回避する方法は無いでしょうか？
皆さんのアイデアをお貸しください。よろしくお願いします。

>>127
Safariがおかしいわけじゃないよ。
overflow:autoに従ってスクロール表示されてるだけ。
文字の大きさによっても違うし、フォントにもよる。
それに少なくともサンプルでは、デフォのmargin・paddingも殺して無い。
X文字数分を横一列にしたいなら、width:Xem;とでもすれば。

＞X文字数分を横一列にしたいなら、width:Xem;とでもすれば。

いやいやいや

>>128
overflow:hiddenやoverflow:visibleでも折り返さないのですが、
仮にoverflow:autoで折り返さないとしても、IEやFirefoxの実装の方が正しいんじゃないですか？

それに、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(p)http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title></head><body>
<div style="position:relative;width:100px;height:100px;overflow:auto">
<span>ああああああああああああ</span>
</div></body></html>

この書き方だと折り返されますけれど、正直違いがわかりません。

ならSafariがおかしいでいいよ。バグ報告したらいいじゃない。

>>130
補足。>>127のソースのように、ソースを改行せずに書くとスクロールバーが出る。
改行を入れると折り返されるが半角扱いになる。IEのulみたいな感じ。
>>128で言った幅をem指定する件、emは文字の高さってのはわかってる。
だがほとんどの場合で有効なのも事実。
それから>>130の情報があるなら、先に出しておくもの。それとも釣られた？

>>131
質問者はSafariで動かないからどう回避すればいいかと聞いているんだとおもったが

>>130
132は日本語が読めない奴のただの逆切れだから気にしないほうがいい。

Safariでやってみたけど、終了タグと開始タグが重なると改行されないみたいだね。
聞いたことの無いバグだから、既に見つかっている対処法はないと思うよ。

>>134
いえ私の日本語も変でした。

>>132
130の情報は128を見てから自分で試してみた情報です

>>118
工工エｴェｪ(´д｀)ｪェｴエ工工

>>121
できるだけ元のサイトのデザインを崩さないように
とか考えてたけどやっぱ元から固定してやるしかないですか

ありがとうございました(´∀｀)

>>135
面白そうだからやってみたけど、そのバグは<span></span>間に2バイト1文字+1文字以上、
つまり2文字以上入ってると発生しなかった。
1文字ずつspanってあんまないと思うんで、そのscriptにも問題あるのかも。

>>137
2文字以上はいっている場合でも、</span><span>の間で改行されることは絶対にないようですね。
1文字ずつ装飾を変えるスクリプトで、1文字ずつspanで囲うことによって実装しています。

>>138
＞</span><span>の間で改行されることは絶対にないようですね。
そんな事ないけど。

>>139
本当ですか！？
そこに解決のきっかけがあるかもしれません、どういうときに改行されたか教えてもらえません？

>>140
<span>あ</span>を例えば<span>あa</span>に置き換えただけだけど。。

グラデーションでもやってるんかな。
2文字以上にするのは現実的に不可能そうだねぇ。

画像にするべき。

>>141
ざんねんながら私の環境では、あとaの間で必ず改行が入ってしまいました。

>>142
designMode=onの時の小細工のため、一時的に全文字の座標を計算するためにspanで囲っています
残念ながら不可能そうですね。困ったな。

もうNN4はCSS外しでいいですか…
(´・ω・`)

NN専用のCSSを割り当てとけ

JSSSがあるじゃないか

多い気がする【謎】

リンクテキストを画像に置き換えたい場合、
font-size:0;とやってしまうのはSEO上スパム扱いになってしまうのでしょうか？
text-indentでマイナスの値を指定するのが無難なんでしょうか？
他に良い方法があれば教えてください。

何でマイナスじゃダメなん？

俺はいつも
text-indent: -50in;
を使ってる。
これくらいにしかインチなんて使えんしなぁ。

スキルの無い奴はみんなそうするな。

>>150

全体を中央ぞろえにしてから

<h1><a href="hogehoge">サイトのタイトル</a></h1>

h1 {
text-indent:1000%;
}
h1 a {
display:block;
width:700px;
height:50px;
background:url("title.jpg");
}

タイトルバナー(h1aの背景)700×50pxをクリックした時、
アンカー枠の点線が出ますよね。
InternetExplorer6.0ではサイズどおりで問題ないのですが、
Firefox1.5では画面の左端から画像の右端までアンカー枠の点線が表示されてしまうのです。
なんだかカッコ悪かったので良い方法はないかなと思ったわけであります。

>>153
overflow:hidden

>>154
ありがとう ｡･ﾟ･(ﾉД｀)･ﾟ･｡ 完璧です!!

h1 a { outline-style: none; }
でもいけんじゃね

outlineないと困る
戻ったときにそれで自分がどこにいったか確かめるから

>>149

visibility: hidden;

を追加すればいいだけだとおもうよ？

ﾊﾞﾛｽ

>>157
そりゃ本来は :vlink なんじゃない？
たまたま今の Gecko はバックボタンで戻ったときに、
outline が残っているけど、そういう取り決めは仕様になかったんじゃない？

>>160
vlinkとは別物。Fxだからどうこうでもない。

:vlink じゃなくて、:visited

vlinkは属性にあるけど:vlink疑似クラスはないな

ttp://www.apple.com/jp/education/
このサイトの右上にある「小中高・大学・Students・製品の購入」をクリックして
各ページに飛ぶと、そのページの部分だけ色が変わるのは
ttp://images.apple.com/jp/education/images/nav_k12.gif
の画像をpositionで指定しているってのまでは解ったのだけど

ttp://www.apple.com/jp/education/k12/　←小中高が青に変わっている
ように、そのページにいたら対象の部分が置き換わるってのはどういう風に再現してるの？

自分で解析するのがめんどうだからって
人に頼むなよ

>>164

質問の意味がわかんね。日本語でおｋ

>>164
そのサイトでどうやってるかは置いといて、
普通はliに該当ページだけ別のidやclass振る。

ああ、すまん。適当に書くと間違えるな。

まず、デフォルトスタイルシートの例が CSS 仕様にあって、
http://www.w3.org/TR/CSS21/sample.html

　:focus { outline: thin dotted invert }

とある。Gecko で実装されてるのもほとんどこれと同じなわけでしょ。
そこで、>>157 は「戻ったときに」と言ってるわけだけど、
バックボタンで戻ってもフォーカスが有効のまま保持されるかどうかは、
ブラウザ依存じゃないかってこと。
戻って、再描画した際に、フォーカスが無効になっていても仕様違反ではないわけで、
その様なブラウザが同じデフォルトスタイルを持っているなら、outline は消えるはず。
そうすると、一度辿ったリンクを CSS で装飾するには、
:visited という正にそのためのセレクタがあるんだから、
:focus よりそっちをアテにする方が正解なんじゃないのかって話。

言いたかったのはそういうこと。

>>168
outlineの最初の目的を調べてみよう。

marginとpaddingの違いと、
テーブルのボーダーの内側に余白を入れる場合は
どちらを使用した方がいいか
よければ教えてください

おまえこれで何度目だよ
人に効いてばっかりしてんじゃねぇよ
ここはお前の悩み相談室じゃねぇんだぞ
ちょっとは自分で調べろや

>>170
padingはborderの内側で背景がつく、marginはborderの外側。
セルの内側はpadding。

>>172
ありがとうございます！

メニューのリンクでマウスが載ったら画像が変わるようにしたいのですが

#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="">ｗｈｔ’ｓ　new</a></li>
<li><a href="">profile</a></li>
<li><a href="">blog</a></li>
<li><a href="">link</a></li>
</ul>


http://p.pita.st/?fbdvkokm
↑左の画像をマウスが乗ったら右の画像にするにはどうすれば良いですか？
profileなどの画像も作ってあります。ｗｈｔ’ｓnewとprofileとの間を調節するにはどうすれば良いですか？
上の文までは自分で調べたのですが、その後わからなくなりました。
よろしくお願いします。

>>174
ttp://www.stylish-style.com/csstec/basic/l-rollover6.html

>>174
どうでもいいけどさ、ｗｈｔ’ｓ　newはあんまりだと思うべさ。　

質問です
htmlのソースに

<img src="以下略>
<img src="以下略>
<img src="以下略>

と改行して<imgタグを入れると、ブラウザ上ではイメージとイメージの間にスペースができますよね？
CSSで改行文字をスペースに変換しないような設定ってできますか？
全部<div></div>で囲まないとだめでしょうか？

>>175
うお、ありがとうございます！

>>176
たしかにｗ

>>177
1.改行しない。
2.ちゃんと勉強すればCSSでも出来るが、
改行文字をスペースに変換しないような設定が出来ると思うな。

>>177
<img src="以下略><!--
--><img src="以下略><!--
--><img src="以下略>
は反則ですか？

>>177
img { float: left }

>>179-181
とりあえずfloat使うことにしました。
ありがとうございます。

floatされたボックスの高さが、親要素のボックスの高さを継承するようにするにはどのように
すればよいですか？

<div id="A">
<div id="B"></div>
<ul id="C"></ul>
</div>

A#div { width: 800px; height: auto;}
B#div { width; 600px; height: auto; float:left; }
C#ul { width: 200px; height: 100%; float: right;}

という場合でBのボックスの高さと連動して、Cの高さも可変するようにしたいのですが。

>>183
背景画像でそれっぽくごまかす

184>>
背景に地色を敷いているのでそれじゃダメなんですよ。

>>183
Cに背景色なり背景画像なり指定してて、それがBの高さと同じになるようにしたい
ってことか？

186>>
そういうことです。
Bの高さがページによってまちまちなので、いちいちCの高さを設定するのが
めんどくさいので。

中々うまいかないっす…。

無理。

>>183
そんな単純セレクタくらい正しく書けよ。

IEを無視すればものすごく簡単にできるけどな。

#Cの背景を#Aに指定するんじゃだめなの？

>>189
・・・質問者じゃないが、見ても気づいてなかったｗｗｗ

>>187
#Aに背景色とかないんだったら>>190でおｋ。
そうじゃなければ、
div足してもいいなら、
<div id="A">
<div id="D">　←追加
<div id="B"></div>
<ul id="C"></ul>
</div>　←追加
</div>
で、#Cじゃなくて#Dに背景色なり背景画像なり指定する。
#Cが#Bより高くなるとダメだが。

どっちの場合も#Bには別の背景を被せる。

無意味なdivは(ry

もしbodyの中身が丸々div#Aになってるならbodyやhtmlが使えることを忘れずに。
まあそういう状態ならdiv#A自体(ry

text-indent: -9999px;でテキスト吹っ飛ばしていると、
ネットスケープで見るとブラウザの横までラインが出るのは仕様ですか？

divを多用してはいけないというのをよく見かけますが
変わりに何を使えば良いのでしょうか？

身動き取れない状態で困ってます。

このスレ内でも既に何度か出た話。FXでも出る。

不必要に多用しなければいいよ。
目的の実現に必要なdivならしょうがない。
それさえも認めない一部の強硬派ストリクタは放置しといていい。

>>175
これって一つずつの画像の横幅違うと使えないのでしょうか？

どうなるかやってみりゃいいじゃん。

恥ずかしながらこんなんなりました・・・。
http://www.geocities.jp/yama6313/

>>200
なんか少し前にアップルのサイトを解析しとるのがおったけど

>>200
横幅違いじゃないじゃん。
で、ここはCSS質問スレだけど。

>>202
どうなおしたらまともに表示されますか？

>>203
親切な人が解説サイト貼ってくれたでしょ。
何がわからないわけよ？

>>195
場当たり的に使うのは良くないくて、どっちかというとXHTML 2.0のsection代わりのように使うべきだとは
言われるが、別に「多用」すること自体は構わない。

だがそもそも、ちゃんとしたHTMLを書けばdivは必要不可欠ではないことが多いし、
いわゆる段組スタイルも、ちょっと工夫すればdivが要らなくなることも少なくない。
将来IEの実装がまともになったり(いつのことだろう…)、CSSのセレクタが今より強力になったりすればなおさら。

逆に、divというかclassに依存しないスタイルシートは単独でも(HTMLと組み合わせなくても)「作品」として成立するから、
「素材」として配布してる人もいる。今のところはしょぼいがほとんどだけど。
この板にも昔スタイルシートを書くスレがあって、力作も結構多かった。

>>203
お前さんのCSSでは:hover{background-position:0px -23px;}。
これがどういう意味かわかるか？
お前さんの用意した画像はw93×h60なんだけどな。

最初は丸ｺﾋﾟでもいいんだよ。
でもプロパティや数値の意味を理解しないと、アレンジなんか出来ないじゃん。

>>204
>>206
丸コピですね。画像の大きさを例のサイトと同じに作ってみます。

---CSSここから---------------------
UL{
list-style-image:url(img.gif);
list-style-position:outside;
}
---CSSここまで---------------------

---HTMLここから---------------------
<div>
<ul>
<li>＊＊＊
<li>＊＊＊
<li>＊＊＊
</ul>
</div>
---HTMLここまで---------------------

（img.gif）テキスト
（img.gif）テキスト
（img.gif）テキスト

上記のような感じにすると、IEでは、（img.gif）がテキストと合わず、上にずれて表示されてしまいます。
火狐だといい感じなんですが、これは仕様ですか？
どうにかする方法はないでしょうか。

>>208
何がしたいのかわからない

すみません、自己解決しました。
208は華麗にスルーしてください。

質問です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><title>test</title></head>
<body><!-- インラインスタイルですみません -->
<div style="position:relative;border:1px solid red;width:400px">
<div style="float:left;clear:left;width:1px;height:100px;border:1px solid blue"></div>
<div style="float:left;clear:left;width:100px;height:100px;border:1px solid blue"></div>
President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.
President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.
</div><!-- 英文は特に意味がありません -->
</body></html>

上のHTMLを表示したところ、Operaでは私の考えている通り青いDIVには文字が入ってこないのですが、
IE、Firefoxにて青いDIV内に文字が入ってしまいます。
文字を重ねないようにするにはどのようにすればよいか、教えていただけませんでしょうか？
よろしくお願いします。

DIV内に文字を入れなきゃいいんだよ

>>212
すみません、ちょっと日本語が変でした。申し訳ない。
このDIV領域には実際は画像を入れる予定なのです

>>213
そのソース出さなきゃ意味無い

>>214
レスありがとうございます。
211のDIV領域の領域をJavaScriptで測定して、そこに画像を入れるんです。
アニメーションもあるのでソースを全部貼るのはさすがに厳しいですが、
基本的に position:absolute な画像がDIVの領域に入ると想定してください。

現在のソースで既にDIV領域に字が被ってしまっているので、
その上に画像を貼ると字が隠れてしまいます。

これはどうよ？

<style type="text/css">
p {
margin:0;
}
</style>
</head>
<body><!-- インラインスタイルですみません -->
<div style="position:relative;width:400px;border:1px solid red;">
<p>President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.</p>
<div style="float:left;clear:left;width:100px;height:100px;border:1px solid blue"></div>
<p>President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.</p>
</div><!-- 英文は特に意味がありません -->

>>216
ありがとうございます、参考になります。
しかし、それだと上の<p>タグの文字の量によって青いDIVの位置が移動しまいますが、
青いDIVの位置は赤いDIVの上から100pxの場所にしておきたいのです。

>>217
青divをabsoluteすればいいじゃん。
それから文章じゃなくて画像って言ってなかった？＜<p>タグの文字の量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><title>test</title></head>
<body><!-- インラインスタイルですみません -->
<div style="position:relative;border:1px solid red;width:400px;">
<div style="float:left;width:1px;height:80px;border:1px solid blue"></div>
<div style="position:relative;float:left;clear:left;width:100px;height:100px;border:1px solid blue;margin-top:20px"></div>
President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.
President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.
</div><!-- 英文は特に意味がありません -->
</body></html>

ちょっとかっこわるいねー

これでどんなもん？

<style type="text/css">
p {
margin:0;
}
</style>
</head>
<body><!-- インラインスタイルですみません -->
<div style="position:relative;width:400px;border:1px solid red;">
<p style="height:100px">President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.</p>
<div style="float:left;clear:left;width:100px;height:100px;border:1px solid blue"></div>
<p>President Bush and Iranian President Mahmoud Ahmadinejad will both attend the United Nations
General Assembly meeting today, but a top U.N. official says the two men likely will steer clear
of each other. Ahmadinejad is an acerbic critic of U.S. foreign policy. The United States suspects
Iran is trying to develop nuclear weapons.</p>
</div><!-- 英文は特に意味がありません -->

>>220はミスでしたすんまそん

>>218の回答が正解なのでは？

>>221
absoluteにしたら回り込まなくね？

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

>>219
なるほど、もう諦めて最初からmarginを取るという方法ですね。
確かに美しくはないですが、実用上これは使えそうなので検討してみます。

>>221
ありがとうございました。
222さんのおっしゃるとおり、absoluteにしたら回り込んでくれません。

なんだかイヤなタイプの質問者なんで俺はパス。

>>224
質問するのも大変だなｗ

css validatorに関して質問です。

character "●" not allowed in prolog
ってエラーが至る所に出るのですが、コレは「●って文字を一文字目にするんじゃねぇよ」って事ですよね？

でもそのエラー箇所の内容って
width:100px の"w"だったり、display:noneの"d"だったり、果ては閉じの"}"だったりコメント開始の"/"だったりするんですが…
これが10行〜20行ごとにエラーとして現れます。

で、たとえば
div#xxx {
width : 100px;
height : 100px;
}
のwidthの"w"に character "w" not allowed in prologとエラーが出た時にwidthとheightを入れ替えて
div#xxx {
height : 100px;
width : 100px;
}
とすると今度は"h" not allowed in prologと言われる状況。

cssファイルの1文字目の
@charset "Shift-JIS";
でエラーが出る（character "@" not allowed in prolog）のでコレが原因かと思って削ると今度はその下の
* {
（略）
}
*が"*" not allowed in prologとエラーが出るのですが。

何が問題なのか分かる方いませんか？

>>226
プロパティの基本的な書き方を何か間違えてるとしか思えない。

>>226
先頭にBOMが付いてる可能性あり
何使ってCSS書いてるのかねぇ〜

レス遅れて申し訳ない。
BOMについて調べてたので。

Validate by URL ではなく Validate by Direct Inputでチェックしてたんですが
鯖にうｐしてチェックしたら、>>226のようなエラーはでませんでした。

cssエディタにはDW8を使ってるんですが、やっぱりBOMが原因だったんですかね…？
（イマイチまだ理解しきってないです）

とりあえずうｐしてからURLのチェックなら問題ないようなので
今は気にしない事にします。

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

>>229
それ、css validatorじゃなくてmarkup validation使ってたんじゃまいか？

すれ立てるまでもない質問はここで で先にお尋ねしましたが
回答が得られませんでしたのでこちらでもお聞きいたします。

xsl(t) について質問があります。
<hoge>http://www.hoge.com/foo/var.jpg</hoge>
のようなタグで、最後の var.jpg のみを取ってくるような
記述はできますでしょうか？
文字列の検索、置換や、指定文字の後ろを取ってくるような
ことはできそうなのですが…
substring-after() などを再帰してうまく使えばできますでしょうか？
記述方法をご教授いただければ幸いです。
宜しくお願いいたします。

>>231
つられてやるが思いっきりスレチガイ
xml板逝け

誘導希望ｗ

xml板があったのか。どこだろうか。

　ほれ
http://sakura02.bbspink.com/test/read.cgi/mature/1154368748/

bbspink.com

質問なんですが、文字や画像が入った小さいボックス（パネルボタン風）を、
↓こう横並びさせる場合、やはり float:left で並べるのがベストでしょうか？
別の組み方ってありますか？
| □□□□ |
| □□□□ |
| □□　 |

何のためにfloatしてるワケ？
意味も無く使ってるなら、pなんかで並べときゃいいだけ。

>>237
テーブル

まあ画像のリストが普通のマークアップだ罠。
floatかdisplay:inline。

レスどうもです。
並べるものがDIVのボックスなのでfloatかなと…
>>239　以前はテーブルで小テーブルを並べてました。
>>240　display: inline やってみます。

xslについて質問をしたものですが、
結局回答が得られなかったので、仕様を変更し
ruby でxmlを加工することにいたしました。
ありがとうございました。

スレ違いだって言われてるでしょ

>>241
div並べるのは変。
ul-liでやれや・・・

>>242>>231
できるよ。再帰だよ。schemeかlispあたりを勉強すると、すぐかけるようになるよ。

IE7/6/5xとか全部表示確認してる人って、その為だけにいくつもOS入れてんの？
仮想マシン？

スタンドアローン版があるんだよ。PC複数台の人ももちろん居る。

>>247
なるほど。
検索したらいろいろ出てきた。サンクス

質問させてください。
<html><head><title>test</title><style type="text/css">
div#main { position:relative; border:1px solid green; width:400px;}
div#left1 { float:left; clear:left; width:1px; height:100px; }
div#left2 { float:left; clear:left; width:100px; height:120px; border:1px solid blue; }
div#right1 { float:right; clear:right; width:1px; height:50px; }
div#right2 { float:right; clear:right; width:100px; height:120px; border:1px solid red; }
p { font-size: 20px; }
</style></head><body><div id="main">
<div id="left1"></div> <div id="left2"></div> <div id="right1"></div> <div id="right2"></div>
<p>Army chief General Sonthi Boonyaratglin has appeared on Thailand TV to explain the military
coup which has ousted prime minister Thaksin Shinawatra and his government. Speaking Wednesday
morning, Sonthi said the coup was necessary to end intense conflicts in Thailand's society that
Thaksin had created. In his brief television address, Sonthi said the coup makers had no
intention to hold on to power and asked people to stay calm and render them support</p></div></body></html>

上のHTMLのレンダリングをIE6とFirefox1.0とですると、
IEでは左側の上から100pxの位置に青色borderのDIVが、右側の上から50pxの位置に赤色DIVが表示され、
Fxでは左側の上から100pxの位置に青色borderのDIVが、右側の上から150pxの位置に赤色DIVが表示されます。
Firefoxのfloatは、right:leftを問わずに最後に指定したfloatのtop座標からの相対距離になるようですが、
IEではfloat:leftとfloat:rightをそれぞれ別に相対座標を計算しているようです。
1つのCSSでブラウザの判別をせずに同じ結果を得たいのですが、どうすればよいでしょうか。
よろしくお願いします。

>>249
まだやってんのか。
right1のheightで調節すればいいと思うが。
IEはハックすりゃいいし。あとFXは最新で確認した方がいい。

>>250
ええ、floatを使うのは初めてなのでクロスブラウザによる挙動の違いに四苦八苦しています。
IEのハック方法を調べてみます。キーワードありがとうございます。

>>251
CSSハックは出来れば使わないほうがいい
249をどうやって実装すんのかは知らんけど

>>252
ハックを使わずに書けるならそれにこしたことはないのですが…。

<html><head><title>test</title><style type="text/css">
div#main { position:relative; border:1px solid green; width:400px;}
div#left1 { float:left; clear:left; width:1px; height:50px; }
div#left2 { float:left; clear:left; width:100px; height:120px; border:1px solid blue; }
div#right1 { float:right; clear:right; width:1px; height:50px; }
div#right2 { float:right; clear:right; width:100px; height:120px; border:1px solid red; }
p { font-size: 20px; }
</style></head><body><div id="main">
<div id="left1"></div>
<div id="right1"></div>
<div id="left1"></div>
<div id="right2"></div>
<div id="left2"></div>
<p>Army chief General Sonthi Boonyaratglin has appeared on Thailand TV to explain the military
coup which has ousted prime minister Thaksin Shinawatra and his government. Speaking Wednesday
morning, Sonthi said the coup was necessary to end intense conflicts in Thailand's society that
Thaksin had created. In his brief television address, Sonthi said the coup makers had no
intention to hold on to power and asked people to stay calm and render them support</p></div></body></html>


なんだかなあ

IEがまともな実装してくれない限り、ハックなしは難しい。
ハックのいらないデザインにという意見は尊重するけどね。

>>254
素晴らしい方法ですね。早速使わせてもらいます、ありがとうございます。

>>253
コンディショナルコメント使えよ。ハックなんて他のブラウザにしてみれば、文法エラーなのが多いんだから、行儀悪すぎだ。

>>254 やるなぁ。
赤divと青divの緑div上線からの距離が100pxと50pxという割り切りのいい数値だったのが（特に２で割り切れるとこが）不幸中の幸いというところか。
それにしてもdivばっかでホントに"なんだかなあ"だよ

sixapartのテンプレ見ると吐き気がする

>>259　あれハック多いよね

>>258
２で割り切れるとか、全然関係ないんだけど。

Script使って読み込むスタイルシート変えることって
できないかな。
C

できるしある

どうやんお？

できたお

<html><head>
<link id="orz" rel="stylesheet" href="t1.css" type="text/css"/>
<script type="text/javascript">
function f(fn){document.getElementById("orz").setAttribute("href",fn);}
</script>
<body>
hoge
<button onclick="f('t1.css')">1</button>
<button onclick="f('t2.css')">2</button>
</body>
</html>

スレ違い承知で失礼します。

http://www.geocities.jp/yama6313/
ロールオーバーリンクに挑戦しましたが、お手上げでした。
どなたかテンプレ作って頂けませんか？
ちなみに　what's new　のつづりは後で直しますので・・。
画像の一つのサイズは　ｗ97　ｈ21　です。
時間がある方、こんなの余裕じゃんって方よろしくお願いします。
全部つなげてありますが分割したほうがいいのであればこちらでそうしますのでお願いします。

>どなたかテンプレ作って頂けませんか？

有料だから、100ﾏｿばかり振り込んでくれ。

テーブルの背景画像をテーブルの大きさに合わせて伸縮表示させることは可能？
タイル状に並べたりは調べてわかったけど、伸縮が出来るのかはわからなかった。
imgタグのwidthやheightみたいな指定がbackgroundでは出来なさそうなので他にいい方法がないものかと。

>>266

【HTML】
<ul id="MENU">
<li><a href="#" id="WHATS-NEW">What's New</a></li>
<li><a href="#" id="PROFILE">Profile</a></li>
<li><a href="#" id="DISCOGRAPHY">Discography</a></li>
<li><a href="#" id="BBS">BBS</a></li>
<li><a href="#" id="BLOG">Blog</a></li>
<li><a href="#" id="LINK">Link</a></li>
</ul>

>>266

【CSSその1】
ul#MENU{
margin:0;
padding:0;
list-style-type:none
}

#MENU li{
margin:0;
padding:0;
float:left
}

#MENU a{
display:block;
width:97px;
height:21px;
border-width:0px;
margin:0 1px 0 0;
padding:0;
text-indent:-9999px;
overflow:auto;
}

>>266

【CSSその2】
#MENU a#WHATS-NEW:link,
#MENU a#WHATS-NEW:visited{
background:url(menu.gif) 0 0 no-repeat
}

#MENU a#WHATS-NEW:hover,
#MENU a#WHATS-NEW:active{
background:url(menu.gif) 0 -21px no-repeat
}

#MENU a#PROFILE:link,
#MENU a#PROFILE:visited{
background:url(menu.gif) -126px 0 no-repeat
}

#MENU a#PROFILE:hover,
#MENU a#PROFILE:active{
background:url(menu.gif) -126px -21px no-repeat
}

#MENU a#DISCOGRAPHY:link,
#MENU a#DISCOGRAPHY:visited{
background:url(menu.gif) -252px 0 no-repeat
}

#MENU a#DISCOGRAPHY:hover,
#MENU a#DISCOGRAPHY:active{
background:url(menu.gif) -252px -21px no-repeat
}

>>266

【CSSその3】
#MENU a#BBS:link,
#MENU a#BBS:visited{
background:url(menu.gif) -378px 0 no-repeat
}

#MENU a#BBS:hover,
#MENU a#BBS:active{
background:url(menu.gif) -378px -21px no-repeat
}

#MENU a#BLOG:link,
#MENU a#BLOG:visited{
background:url(menu.gif) -505px 0 no-repeat
}

#MENU a#BLOG:hover,
#MENU a#BLOG:active{
background:url(menu.gif) -505px -21px no-repeat
}

#MENU a#LINK:link,
#MENU a#LINK:visited{
background:url(menu.gif) -631px 0 no-repeat
}

#MENU a#LINK:hover,
#MENU a#LINK:active{
background:url(menu.gif) -631px -21px no-repeat
}

■訂正

誤
#MENU a{
・・・
略
・・・
overflow:auto;
}

正#MENU a{
・・・
略
・・・
overflow:auto
}

セミコロン抜いてください。

■追加
画像の間を開けたい場合は「#MENU a」のmarginで調節してください。

■蛇足
画像（menu.gif）の間隔はあける必要なしだけど、
画像を調整すると「background-position」も変える必要が出てくるから、
分かるなら画像を調整するのもよしです。

>>273
さらに訂正・・・
誤：overflow:auto
正：overflow:hidden

見てるだけで恥ずかしいな・・・

>>268
無理。

>>268
imgとposition、z-index、あと大きさをjavascriptでごにょごにょすれば同じ見た目には出来る。

もはやCSSじゃない

JSSSと似たユーザースクリプトがこれほど普及している現状を見ると、
仕様の貧相さはともかく、JSSSが生き残った方が良かったのかもしれんな。
何年もブラウザの対応を待つといった無力感を味わう事はなかっただろう。

＞これほど普及している現状
してないしてないｗｗｗ

まあCSSの中にJavaScriptを埋め込みたいと思うことはある。

>>281
IEならできる

IEは他にやるべき事があるだろうに。

まったくだ。

無知な>>280が笑ってる件

セレクタ { プロパティ : バリュー ; }
だけだからな。
ちょっと待ってくれよW3C、なんだよ。
うぇぶでざいなーはIQが低い、それは事実だ、
でも、条件分岐やループくらいで拒絶反応を示すほどの低脳でもない。
もうちょっと難しくしてくれても良かったんじゃないかな。

>>286
無限ループ埋め込んだりセキュリティホールが山ほどできそうじゃん？

>>285
いやしてないだろ。

>>286
してないよな

まあ>>279はJCSSっていいたかっただけだろ

JavaScript Style SheetsのどこにCが入るのかと小一時間。

どうでもいいが普通JSSと略すよな。
JSSSとも言うのか？最近それを使ってる馬鹿は一人なのか？

JavaScript使えばいいじゃないか

といえば

JavaScriptをoffにしている人がきちんと見られないページになるだろ

と言われたが

君のサイトはIE6できちんと見られないのだが

>>269-274
どうもありがとうございました！
ちょっと今すぐ作業できないんですが、後でやってみます！

>>290
JavasCript Style Sheets

じゃまいか？

>>269
ありがとうございます。無事に出来ました！！
自分には無理でしたね・・・これは。もっと勉強します。
一つ質問ですが、リンク先に飛んだ時、点線が画像のまわりにでます。
これを消すには、どうすれば良いですか？

>>294
>>156あたりかな？

>>295
既出でしたか、すいません。
ありがとうございました！

>>294
なんつーか、同じ時期にオレもロールオーバーのリンクをせっせと作ってたんだが。
丸一日かかってどうにか完成したさ。自力で。

ぐぐればすぐ出てくるんだからもちょっと自分でなんとかしようぜ！
（つかほんの少し前のレスに詳しいサイトリンクを載せてくれた人がいるし）
でないといつまでたっても上達しねーぞ。

んだんだ

>>295
うーん。点線消えませんでした。
検索したら　outline-style: none;　が初期値と書いてありました。
初期値って事は特に指定しなければ、noneになるということですよね？

>>297
その通りでした。ＣＳＳ入門書みたいなのも持ってるんですが、書いてませんでした。
今回は友達のＨＰ作成ですぐに作って欲しいと言われたので時間ありませんでした。
あっても出来なかったかもしれないけど。

IEで-moz-user-select:noneみたいに、対象を選択状態にさせないことってで
きるのでしょうか？

>>299
今改めてキミのサイトの仮メニュ−見てみたけど、
点線は表示されないかわりにMacIEじゃ全く何も表示されないぞ
ちなみに自分の奴できちんと表示されてるものを書きなぐっておく
オレも初心者だから変な所があっても知らんMacだからWindowsのことは良く分からん

<チラシの裏>
HTML記述を
<li><a href="#" id="WHATS-NEW"><span>What's NewHome</span></a></li>
の記述に代えて、

CSSを
#menu ul{
list-style:none;
width:100%;
}
#menu ul li{
list-style:none;
float:right;
width:97px;

}
#menu li a{
display:block;
width:97px;
height:21px;
background-image:url(img/menu.gif);
}

<!--次レスに続く-->

<!--前レスからの続き-->

#menu a span{
display:none;
}

a.home {
width: 97px;
background: transparent url(img/menu.gif) no-repeat 0 0;
}
a:hover.home {
width: 97px;
background: transparent url(img/menu.gif) no-repeat 0 -21px;
}
a:active.home {
width: 97px;
background: transparent url(img/menu.gif) no-repeat 0 -21px;
}

以下略
</チラシの裏>

>>299
まず、>>156の前後にデフォルトスタイルの話があったからそれも読んでみて。
仮に、デフォルトスタイルシートのセレクタが :focus だった場合、
制作者スタイルにおいても
#menu a:focus { outline-style:none }
とか指定しないと上書きしないんじゃない。

どうでもいいけど、どっちのソースも使えない。
なぜ妙なアレンジしちゃうんだか。。IE以外どうでもいいんだろうね。

どうでもいいけど、俺はマカ。
なぜIE決め打ちしちゃうんだか。。Winユーザ以外どうでもいいんだろうね。

どうでもいいけど、俺もmac。
macIE用ソース？ダメじゃん。。macIEなんてどうでもいいんだけどね。

　　なんかどんどんラベルが下がっていく

Mac環境…既に計測誤差の様なシェア、正直どうでもいいね…。
対応してほしいなら、Win上でのテスト環境を提供すべきですね。

そもそも、Macユーザー自身Win機も併用してる人が大半じゃない？
スレでMacも持ってる〜って人はそういう人でしょ。
その逆は悲しいかなないよね。

5%だからどうでもいいどころか、結構馬鹿にならないぞ。
1/20だからな。

その5%の大半がWindowsも使ってるってのは真だろな。

制作側に Mac対応するつもりがあるかどうかとは別に、
実際に Safari や MacIE で表示が崩れると、
スキルがないんだなと閲覧側は勝手に解釈する。
WinIE と同様のそういうまんどくさい問題はある。

SafariはともかくMacIE使ってる香具師は見捨てられてるお

スキルじゃなくてMacがない

>>311
スキルがないんだな、なんて自分中心な解釈するのは
その5%の中の更に数%でしょう。

一般的には、「Mac対応も減りつつあるな」と解釈する方が
自然だと思いますけども。

>>314
「自分中心な解釈」ってのはどっちもどっちだろな。

MacIE はおいとくとしても、Safari は、バグもあるけど、
仕様に沿って解釈してくれる場合がほとんど。
実際は、制作者スタイルシートが間違っているために、
Safari で崩れる方が多い。
正しく書いとけば、WinIE みたいにどつぼにはまるケースは滅多にないよ。

Mac中心で使ってるけど、Safiriで崩れるのはあきらめもつく。
そういうサイトは>>315氏も言う通り間違いが多い上、内容的にもどうでもいいサイトだ。
でもFXはwinもmacもほとんど差がないブラウザなんだし、winにもユーザーは少なくない。
表示確認は必須にしてほしいもんだ。

あれだ、5%って数字に罠があるんだろ。いかにも少ないって感じだからな。
1日50人しか来ないサイトならたった2.5人だ。無視する人もいるだろ。
1000人来るなら50人だ。毎日50人も無視するのかいな。

親切なみなさん、教えて頂けませんか。
headerの下のバーナーの画像表示領域を変更したいのですが、
どうしたらいいでしょうか？
表示領域ではなく、表示位置の変更は、
#content{position:absolute; top:300px; center; }
で、できたのですが、表示領域の変更の仕方が分かりません。
分かる方、いらっしゃいましたら教えて頂きたいです。
http://blog.so-net.ne.jp/mario-tkc/でブログやってます。

ちなみに、画像自体のサイズではないです。

>>318
＞headerの下のバーナーの画像表示領域を変更
headerの下のバーナーとは何か。#bannerなのか？風景写真の事か？
画像表示領域とは何か。サイズじゃないなら何の事か？
全体に意味不明。

5%というシェアも時とともに変化する。
今後増えるか減るかそれとも5%維持かは誰にもわからん。
一時的な数字に固執すると、IE6にハックで対応した結果、
IE7で困ったことになるのと、似た様なことに陥るかもしれない。

Intel MacでWindowsも起動できる様になったから、
仕事以外はMac OS Xというスタイルも増えそうな気が
しなくもないんだけどね。

世の中には、IE用にしかサイトを作れない奴と、そうで無い奴の２種類しかいない。

#banner{ width:300px; height:80px; }
で自己解決しました。

よかったね（ぼうよみ

>>323
火が点くと危ないから、バーナーは外しておきな

>>321
基本的にw3c準拠で独自要素作ったりはしないだろうから、
流石にIE7の例みたいにはならない気がする。
Javascriptはちょっと差があるみたいだけど。
何気にJavascriptはブラウザごとに違いが出てきて厄介そうだよなぁ。

NN4とかMacIEはもういいよ
テキスト見られるだけマシと思いな

<img src="hoge1.jpg" />
<img src="hoge2.jpg" />
としたとき、1と2の間の隙間を無くす方法はないでしょうか？

>>301-303
ありがとうございます！
macieじゃ、見れないんですか・・・。書き直してみます。
デフォルトスタイルシートなんてあるんですか・・。了解です。やってみます。

どこかのサイトにMAC用とＩＥ用とその他用とそれぞれ分けて作るしかない
みたいな事を書いてあったのを思い出しました。
いくら友達でもそれでは更新がめんどくさすぎる・・・。

フラッシュのボタンって万能なんですかね。

>>329
君はまずFireFoxをDLした方がいい。
それで確認すると、親切ぶった人がいかに適当なソースを提示していたかがわかる。
MacIEに合わせるかどうかは、もう少しマトモなスキルを身に付けてから。

×FireFox
○Firefox

>>328
<img src="hoge1.jpg" /><img src="hoge2.jpg" />

へー、266は友達のサイト作ってるのか。ソース1つ書けないのにな。
世も末だよね。

>>333
本人が勉強したほうが早いかもなｗ

>266

MacIE見捨てていいの？
ほんとにいいの！？

もう俺はIE自体を見捨てた、というより放置している。
もうちょっとバグが少なくなるまで放置。

body要素にスタイルを適用すると発生するバグで、XML宣言を外すか
body要素以外に適用すれば回避できるんだけど、IEのためにXML宣言を外すのは本末転倒というものだし
IEのためにDiv厨というか余分な要素があるとアレだし……

たしかにちょっと痛いけど、もう少しの我慢だ。
あと１０年、いや修正版がある程度普及するまで３０かかるから、４０年まてばCSSライフもさらに楽しく……なる（はず）。

めちゃくちゃ基本的なことですけど
何でこうもブラウザごとの表示に差があるんですかね。
OS違いでフォントなどによる差異は分かりますが、
なぜ指定通り同じ表示をするように出来ないのでしょうか？

使えないCSSサポートのままリリースするからね。
ちゃんとサポートしていないならリリースしないで欲しい。

とくにIEはバグが多いことを分かっててリリースするからたちがわるい。

IEがものすごくおかしな実装をしてるって事。

そうだな。Microsoftはずっと昔にW3Cのメンバーからぬけてるし
バグなのか仕様なのかはブラウザの開発者にしか分からないよな。

>>337
IEて?　MacIEはどうでもいいけど、WinIE 捨てるのはただの変わり者だが。
あのシェアじゃ、極端に言えばそのバグ自体が標準、Firefoxの方が規格外となる。
世の中、正しいものが常に正解って訳じゃないのだ。

>>342
そういう事言ってるから、いつまでもおかしいまんまなんじゃん。
IE大好きweb制作者の質を疑わざるを得ないよ。

>>343
web制作者の質 って？

IEシェアはどんどん減って来てるからな。

＞あのシェアじゃ、極端に言えばそのバグ自体が標準、Firefoxの方が規格外となる。

これ一番気分悪いですよね。
バグなのに、デカいシェアの為にハックして対応しなきゃとか
何だその状況は (; ´Д`) ｱﾎｸｻ　って感じ。

>>345
ブラウザのバリエーションが増えてきてるからね。

>>343
IE大好きって…　○○ブラウザが好き、とか訳分からん理由で
ページ作ってる所なんてたかがしれてるよ。
目的は、利用者が普通に見られるページを提供する事であって
ブラウザなんてその手段でしかないよ。
そこから、ブラウザの90%以上程度はカバーするべきだと思うが
それ以上は対応限界もある。100%なんてほぼ不可能だしな。

>>347
念のため俺は343だが、IE対応してない人ではない。あまり力入れてないけどな。
IEのシェアは昨年末で85%に下がった。今年はもう少し下がるだろう。
それでも、ほとんどの人が疑問も持たずIEを使ってるのが現状なのはわかってる。
しかし趣味や仕事でweb制作してるなら、IEがおかしい事は知ってるだろ？
それをまんま受け入れて更に良しとしてるようでは、何も変わらないと言ってるわけ。
気が付いてる側の人間がまず変わらなきゃ、良くなるはずもない。

IEでもそれ以外でも問題なく閲覧できるようにするのが当たり前。
本当だったらIEなんか見捨てたいが、こんだけシェアが高いとそうもいかない。
MSはそういう制作者の弱みにつけこんで対応をおざなりにしてんじゃないかと、邪推してしまうよ。

IE をラップするタブブラウザとかあるじゃん。
ああいうのに「CSS 無効」ボタンを付けとけば良いんだよな。
IE で表示が崩れても CSS を切れば、情報は正しく伝わるはずなんだから。

>>348
人間が変わるってどう変わったらIEが仕様に準拠するわけ？
もしも中途半端な正義感だったら、それはただのグチだよ？
仮面ライダーが、喫茶で「ったくショッカーってよー」って言いながら
１話完結しないっしょ。（どんな例えだ）

まず>>342のような発言はしないことだろうね。

次にIEをメインにしない事だろ。
MSオフィシャルにはFXで行くと。

ＩＥを独自仕様にするのはマイクロソフトにとっては当然でしょ
すでに独占といえるほどシェアあるし
独自仕様で囲いこむのはどこの企業でもやること
まぁ、こっちは迷惑するわけだが

IE対応で1番困るのはCSSよりもJavaScriptかも…

スキルの無い奴は大変だなおいwwww

>>353
ふーん、それでIEが仕様忠実に変化していくわけですか。　そうですか。

で、利用者の大半を占めるエンドユーザーは、仕様云々に
不満も興味も持ってないわけですがどうしましょうかね。

ちょっと知識をつけるとFirefoxとか使い出すから、
そうなった時にいいじゃないか。
今後もユーザは増えるだろうし。

活動とは、IEでまともに表示できないサイトを作って、
MSオフィシャルへはFXで行き、そのうち周りもFX使い出す。

やった事はFXをインストールしただけじゃんｗ

そもそもIEを使ってるような人は他のブラウザを使うって概念がない。
いくら他のブラウザを使わせた所で、そのブラウザで表示できなかったり使えなかったりする
サイトを一度でも見れば結局IEに戻るぞ。

で、ここ何のスレだっけ。

それ知識ついてない人ですから。

出た裸の王様理論。　本当に性能を知ってればVHSよりβですか。

>>360
一般的にはそうでしょうね。　　IEそのものはポップアップ許容するわ、
タスク増えまくりんぐだわで 問題は多いが、でも普通に使えてるし
乗り換える動機にはほど遠いよね。一般の人は。
個人情報漏れまくり ぐらいの危機感ないと。

性能の話なんかしてないんですが･･･

>>296
遅くてすまんが、それブラウザのエフェクトじゃないか？　どこクリックしたかわかるように残る跡。制作側ではどうしようもない。

>>363
じゃ何の話しですか…

個人サイトでIEをあえて無視するのは勝手だけど、
普通は巨大シェアのIEを無視なんて有り得ないし。
何しろIEにまともなCSSの実装を望むしかないですね。
ふざけんな氏ねIE。

対応が遅れたってこんだけシェアがありゃ制作者の方で何とかしてくれるだろ
って本気で思ってそうで嫌だ。MS。

５回中１回は同じURLをたたいてるのにIE6で画面が真っ白になってソース表示
するとちゃんと書き込まれてる現象に悩まされてます。同じURLでブラウザー
を立ち上げ直すとちゃんと表示されます。FOX、Opera,NNではまったく問題
なく何回同じURLをたたいても表示されます・・・。IE6固有のCSS読み込み
バグなんでしょうか？

>>368
日本語で尾ｋ

>>369
おまえもな。

>>370
韓国語でおｋ

>>371
안녕하세요

まだIE叩きを口にする馬鹿がいるのか。
IE6が出たり、Mozillaが普及し始めたりしてもう4年だぞ。
いいかげん慣れろって。どんだけレベル低いんだおまえらｗ

慣れる慣れないの話じゃないだろ・・・

>>374 しかし残念なことに現実IEユーザーが１番多いんだよな〜。
昔に比べたらネット利用者全体の６〜７割程度になったらしいが・・・。

そんだけダメダメなIE使い続けてるって、レベル以前の問題だがな。
世間一般ユーザーじゃないよ。>>373と>>375ね。

煽る時に的外れなレスすると格好悪いぞ。
レスのどこにもIE使ってるなんて書いてないのに、エスパーさんですかｗｗｗ

見える！慌ててOpreaにお気に入りをインポートしてる姿が！

>>377
あほ。ログ掘ってるから一目瞭然なんだよｗ

おまいら、くだらんケンカやめ

えー、ヒマだしぃ

なら仕事をしろよ。

お前らスレタイ百万回読んで来い。

ブラウザ戦争スレは無いのかな…

あ、ヘッダーの文字コード指定を正しいのにしたら直ったわ。

>>384
ソフ板にあった気がする

Firefoxは見捨てていいよ

シェアを持つIEこそが正義。
他はおかしな理屈をただ叫ぶだけの口だけ君だしな。

これでIEのバグが直ったらどういう理屈言うんだろう。

バグってのはIEの独自仕様も含む。

aplication/xhtml+xmlを使えるようにする気がない時点でｵﾜｯﾄﾙ

FirefoxとOperaが頑張って宣伝しとるけど
ライトユーザーは相変わらずIEだな〜
タブブラウザの優位性があるうちにライトユーザーの囲い込みしないとな
おまいらもFirefoxやOperaのサイトに誘導するだけじゃなくて
自分のサイトで画像つきで紹介しないと！

正直難しい気がする。
タブブラウザならプニルがあるし
Firefoxとか良くも悪くも拡張性が高いから
その分ライトユーザーには敷居が高い
やっぱり買ったPCつないですぐ使えるのになるでしょ

サイトで紹介するだけで普及するのならとっくの昔に普及してるって。

WindowsUpdateはライトユーザーにも定着してきているから
FirefoxやOpera等もWindowsUpdateで導入更新出来る様になれば
飛躍的に普及すると思うんだけどねぇ。。。

>>388
ﾜﾗﾀｗ

超一般的には
インターネッツ、ホームページ＝IE
Eメール＝アウトルック
だよね。

スレイプニルってGeckoエンジン使えなかったっけ？

使えるよ

IEが最初から入ってるのは独占だ！
ユーザーが選べるようにするべきwwwwwwwww

いくつかのサイトを見たのですが結局分からなかったので、
初歩的なことになりますが質問させていただきます。
┌┬┬┐
├┼┼┤
└┴┴┘
スタイルシートでこのような形に表示させたいのですが、
どのようにすれば出来るでしょうか？
条件はCSSに対応しているブラウザ一通りすべてでちゃんと表示させたいです

>>399
えー。
「インストールするブラウザを選んでください」
1.Firefox
2.Sleipnir
3.Lunascape
4.Internet Explorer
5.Netscape Navigator
6.Opera
…
マニアしか理解できんわｗ

しかも、ブラウザのみならず他の競合ソフトもこの調子で
選択するわけでしょ？　マニアですら閉口するわｗ

>>400
tableがオヌヌメ

>>400
float指定して回り込み、場合によってはdisplay:inline;かな。

最近はＣＳＳが主流になってきたが
必要ならテーブルでも何も問題ない
てか本当にユーザビリティ考えたら
構造はテーブルでやって装飾ＣＳＳが一番良いような気がするよ
w3c次のverに構造用のタグいれてくれないかな
でもまたＩＥ対応しなくて荒れるんだろうな・・・

＞構造はテーブルでやって装飾ＣＳＳ

仕事でまだこういう折半状態のを作るけど
お手軽な反面やっぱり中途半端だよね…

「構造」の意味を勘違いしてる奴が多そうだ・・

まあお手軽というか、tableはtableでメリットもあるからな。
目的や用途次第なんだろう。

今後sectionだらけで、div乱発と似たような感じになっていきそうでげんなりだけど。
最小限のdiv+sectionで、今のdiv病状態の見易さに･･･

>>403
何とかやってみました。　ありがとうございました

<div style="border: 1px solid black; width:700px; margin:0px auto 0px auto;">
<div style="border: 1px solid red; float:left; width:100px; height:40px;">red</div>
<div style="border: 1px solid green; float:left; width:100px; height:40px;">green</div>
<div style="border: 1px solid purple; float:left; width:100px; height:40px;">purple</div>
<div style="border: 1px solid lime; clear:both; float:left; width:100px; height:40px;">lime</div>
</div>

ちょっとこんな風に作ってみました。
IEでは外枠が表示されてるのですけど、Firefoxでは表示されていません、
Firefoxで外枠表示させれないですかね？

>>409
ら抜き言葉使う奴には教えない

>>407
>今後sectionだらけで、div乱発と似たような感じになっていきそうでげんなりだけど。
同意。オーサリングツール必須は嫌だ。何となく。XML的には正しい方向なんだけど。


CSSでDOMがいじれるようにすれば、テーブルレイアウトは一発でなくせると思う。
テキストを繰り返して擬似text-shadowなんてこともできるだろうし、要素の順番を変えたりもできる。

JavaScriptは余計なことができすぎる。

>>410
なんらとー

>>411
それだけじゃなくて、この世に存在するブラウザにCSS解釈の差異が存在する限り、
テーブルレイアウトなサイトは無くならないと思うよ。

安倍内閣がCSSをまともに解釈出来ないブラウザを作った会社は何が何でも倒産させるとか、
既存の物を含めてそんなブラウザを使ったタコなユーザーは漏れなく死刑にしてくれるとかしてくれれば面白いんだけどねぇｗ

個人サイトなら殆ど関係ない話ですけど、
実際の所だと法人サイトだと未だにテーブルレイアウトが多数だったりします。タコのせいで。

結局、そーいう実装のブラウザが登場しても、タコなユーザーがタコなブラウザを使い続ける限り、
タコなテーブルレイアウトを使い続けないといけない訳なんですよ。

>>407, >>411
わけわかってねえだろ馬鹿2名ｗｗｗｗｗ

>>409

floatがclearされていないから外枠が表示されないんじゃないでしょうか。

ttp://www.geocities.jp/multi_column/

の基礎編 5.フロートの性質　の
例3 フロートを含むブロックボックス
を参照してください。

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

<li>要素を横に並べたい時、
floatを使うのとdisplay:inlineを使うのとではどちらが正しいですか？

>>413

> 安倍内閣がCSSをまともに解釈出来ないブラウザを作った会社は何が何でも倒産させるとか、
> 既存の物を含めてそんなブラウザを使ったタコなユーザーは漏れなく死刑にしてくれるとかしてくれれば面白いんだけどねぇｗ

キモい。面白いと思って書いているのがさらにキモい。

ＩＥが持っている全てのCSS実装のバグに対して、ハックを使用するということは出来るのでしょうか？
それともまだ、全てのバグに対応したハックは見つかっていないのでしょうか。

バグの対処法とハックを混同すんなよ。

>>413
>この世に存在するブラウザにCSS解釈の差異が存在する限り、
「IE」と「その他(≒仕様)」の間以外には無茶苦茶な違いは無いだろ。

IE以外を使ってる奴が「崩れてるぞ直せ」と言ってくることはまずあり得ないというか言うけど方向が違う。
そもそもIE以外なら仕様通りで致命的に崩れることはそんなに無い。
このへんをちゃんと話せばクライアントも (思ったよりは) 納得してくれる。
特に「苦情はそっちじゃなくあっちに行く」というのが効いてる感触がある。

>>420
> 致命的に崩れることはそんなに無い。
致命的に崩れる事は無くても微妙に崩れる事は多々あるでしょ。
それが嫌われるんですよ。

それ以前に古いバージョンのIEやNetscape4への配慮とか諸々あるでしょ。
最新の各ブラウザ間での差異だけじゃなくて、過去の古いブラウザへの配慮もあるんですよ。

何故YahooやIBMなどのサイトが未だにテーブルレイアウトのままなのかを考えれば
自ずと答えが見える話だと思う事なんだけどねぇ。。。

>>421
このスレの人間はそれが分かった上で、敢えてCSSに拘るスレなんで
他宗教の方はお引取り願えますか

>>422がいいことを言ったな

>>423
なにｗｗｗｗｗｗｗこのあからさますぎる自演ｗｗｗｗｗｗｗｗｗｗ

>>422
いっとくけど、俺もテーブルなんて糞喰らえと思っているCSS信者だよ。
ただ、あまりに稚拙で議論にもならない荒唐無稽な話をしていたからちょっと弄っただけです。

流石にスレ違いも甚だしいからこの辺でこのネタはクローズしましょう。

うはｗｗｗｗｗやっぱこのスレ住人最悪ｗｗｗｗｗｗｗｗｗｗｗｗｗ
wwww自分で煽っといてこのネタはクローズとかｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

1から1000まで自演でいいよもう
このスレ駄目だ、終わり

ここはID出ないからねぇ。。。
強制IDにしないとスレが腐りまくるな。

>>426
おまえの書き込み以外はみんなスクリプトによる書き込みなんだよ〜。

>>425
要するに、

俺みたいな高度な技術持ったCSS信者から見たらコイツラ超馬鹿杉ｗ
ちょっと弄ってからかってやれｗ

という事ですね

>>430
いや、今日はちょっとお酒の量が多かっただけ。

あ　　＋　　い　　＝　　う
ほげほげ　　　　　＝　　あ

ちょっとずれてますが、等号揃えしたいようなときってどうするのがイパーン的でしょうか？
テーブルを使わない方向で、CSSに拘った場合の話でお願いします。

>>431みたいなやつが飲酒運転すんだろうな
氏ねよ

>>432
俺なら dl ｄｔ ｄｄ で構成して
dd要素をdt要素にfloatで回り込ませるなぁ。

>>433
いい加減スレ違いな書き込みを続けていないで質問に答えろってば。
質問に答えられないのなら一生寝てろ。

>>432
そういうのはそもそもpre要素だと思う。

>>434
何がdtで何がdd？ 飲みすぎだろ。




>>421
>致命的に崩れる事は無くても微妙に崩れる事は多々あるでしょ。
>それが嫌われるんですよ。
そこで「苦情や不快感は貴社じゃなくブラウザのほうへ向くから大丈夫ですよ」
と言えば解決したりすることも結構多いと言ったわけだけど。
古いブラウザ云々は冗談だよね。この世界じゃもはやFAQですらない。

>>435
その突っ込みを待っていたんだよ。
おまいさんみたいなちゃんとした回答を出せる奴がいれば大丈夫だ。
んじゃ、おやすみ。

>>434
スレ違いはお互い様

>>436
うわぁ…痛い人だ…

>>416
正しいとかはないが、俺ならリスト程度の量ならdisplay:inline;の方を選ぶな。
floatは便利だけど、ちょっと面倒な部分もあるし。

>>432
結構面倒だねぇ。
spanで囲ってwidth:?em;display:block;float:left;とかだとちょっと美しくないし。
けど、記号の扱いを考えるとそれが無難なのかね。
ちょっとなんとも言えないや。

>>435
普通に、うの説明があ+い、あの説明がほげほげって事じゃね？
+とか=の扱いをどうするかとかの問題とか、ちょっとだけ違和感は有るけど、
方向性的には間違ってると断言できる程ではない気が。
preもなんか見栄えの為のマークアップしてる気分になりそうだし、
これといった正解がない感じだな。

>>436
>その突っ込みを待っていたんだよ。
どの？


数式を一種の図とみなして、図をテキストで表現すると考えればpreでまあ良いと思う。XHTMLなら勿論MathMLだが。
CSS2.0の text-align : <string> ; はtableじゃないと使えないから、
どうしてもそういう見た目にしたいならpreか大量のspanかしか無い。

説明ならdlで、dt:after { content : "=" ; } 。IEはもうJavaScriptで生成しとけば良いよ。

>>439
>>432 は恐らくこれと言った正解が無いのは百も承知だと思うんで、
本人の希望の通りにCSSに拘るのならpreは無しかと。
まぁ、いずれにしても本人が言うところのイパーン的じゃないけどね。

>>440
>>その突っ込みを待っていたんだよ。
>どの？

あの辺とかこの辺の。

>数式を一種の図とみなして、図をテキストで表現すると考えればpreでまあ良いと思う。XHTMLなら勿論MathMLだが。
>CSS2.0の text-align : <string> ; はtableじゃないと使えないから、
>どうしてもそういう見た目にしたいならpreか大量のspanかしか無い。
>
>説明ならdlで、dt:after { content : "=" ; } 。IEはもうJavaScriptで生成しとけば良いよ。

完全に同意。

なにをぐだぐだやってんだ？

腕が無い奴は大変ということなんかい？

また痛い同意ktkr。

<dl>
<dt>左辺</dt><dd><samp>1 + 1</samp></dd>
<dt>右辺</dt><dd><samp>2</samp></dd>
</dl>
くらいの正規化はやろうな。HTML仕様で会話文に触れている理由を考えろ。

しかし、HTMLらしさというか、有効にHTMLを利用したいなら、TABLEだよ、これ。
<table ...><caption>...</caption>
<thead><tr>
<th ... scope="col">左辺</th>
<th ... scope="col">左辺と右辺の関係</th>
<th ... scope="col">右辺</th>
</tr></thead>
<tbody>
<tr><td><samp>1 + 1</samp></td><td><samp>=</samp></td><td><samp>2</samp></td></tr>
...
</tbody></table>

>>443
おまい、正解言うのが早杉です。
table厨の癖にｗ

けっ

お前このスレで一度も誰かの役に立ったことないだろ

>>445
一応このスレの初期に回答者やってたんだけどね。これでも。

みなさん、どうもありがとう。
めんどうなんですね。

んー、preだと、間にイメージとか、小文字とか上下付き文字とか入ったら駄目だよねえ。

やっぱりテーブルになるのかなあ。

でも番号付けが必要だから、<ol></ol>の中で使いたいんだよなあ。

>>447
確かに >>432 でサンプルとして提示した様な算数レベルの数式ならpreでも十分だけど、
まっとうな数学の数式だとpreは使えない感じだよね。
その観点から言っても数式にpreってちょっと苦しいよね。

>>443
その左辺とか右辺がdtなのはどうなんだ？
左辺と右辺の関連性が希薄になるんだが。
右辺とか左辺はtitleで十分だろ。

あと、それはsamp使う意味あるのか？
出力結果だって前提ならそうだけど、そんな前提条件なんか無いんだし。

番号付けが必要なら表の必要があるとも言えるし、tableでもいいんじゃないかね

>>444
>>443乙

>>447
そう、今回はpreはなしでおねがいします。

>>450
自分で番号ふるのマンドクセ。

今は
<ol>
<li><span style="width:20%">hoge</span><span style="width:10%">=</span><span width="20%">boke</span></li>
...
</ol>
ってかんじなんだけど、これってIE専になっちゃうんですよね。
まあ、IEでしかみないからいいのかもしれないけど・・・

ワードとかで、タブ揃えあるけど、杏奈感じのことが簡単に出来たらいいのにね。

>>451
>>439を参考にしてspanにdisplay:block;float:left;もつけてみ。
IE以外でも幅そろうと思うから。

>>452
みるも無残な姿に・・・

<html><head><style>
span.s0{width:20%;float:left;display:block;}
span.s1{width:10%;float:left;display:block;}
</style></head><body>
<ol>
<li><span class="s0">hoge</span><span class="s1">=</span><span class="s0">boke</span></li>
<li><span class="s0">h</span><span class="s1">=</span><span class="s0">b</span></li>
</ol>
</body></html>

IEの場合、float:leftでliのナンバリングに対しても回り込んじゃうんだな。
FFとどっちが正しいのかわかんないけど、ダメだこりゃ。

連投スマソ

<html><head><style>
li{position:relative;}
span.s0{position:absolute;left:0%;}
span.s1{position:absolute;left:20%;}
span.s2{position:absolute;left:30%;}
</style></head><body>
<ol>
<li><span class="s0">hoge</span><span class="s1">=</span><span class="s2">boke</span><br/></li>
<li><span class="s0">h</span><span class="s1">=</span><span class="s2">b</span><br/></li>
</ol>
</body></html>

これでどうだろう？問題ってありますか？
オペラだとなぜかナンバリングが表示されないけど、それはもう捨てる。

>IEの場合、float:leftでliのナンバリングに対しても回り込んじゃうんだな。

スマン、この発想はなかったｗ

>>455
うー。Operaで駄目か。それで。

ちなみに使ってるOperaのバージョンは？
Operaでも8.5Xと9.0Xだと結構挙動違うから試しに最新の9.0X使ってみ。
8.5Xと別ディレクトリにインストールすると動作比較が出来て良いよ。
ちなみに8.5Xに上書きインストールするとアレなんで、それはしない様に。

>>456
IEなんてそんなもん。

>>457
9.02だお

ちなみに
<li> <span class="s0">hoge</span><span class="s1">=</span><span class="s2">boke</span><br/></li>
<li> <span class="s0">h</span><span class="s1">=</span><span class="s2">b</span><br/></li>

みたく、liの直下になんかテキストノードがあると、番号付けされる。
リスト周りの実装は、三者三様って感じだな。

>>458
なるほどねー。
Operaもまた変な仕様だよねぇ。。。

ブロック要素だから、中身が空って判断されてるのかもな。

ちょっとちがうか、floatとかpositionだからか。

>>432
preに等幅フォント指定で・・・てのは駄目か？

全部読んでなかった
>>462
は忘れる方向で

俺天才じゃね？

ol { display : table ; _display : block ; _background-image : url("shiki.gif") ; height : **px; width : **px ; }
li { display : table-row ; _display : none ; }
span { display : table-cell ; }

ボックスをセンタリングするにはどうしたらよいのでしょうか？

テンプレくらい嫁

display:table;なんて使ってる人初めて見たｗ

俺は標準スタイルシートではdisplay:table;使うよ。IE用のほうでは開き直って幅固定。

<div id="Main">
<div id="Content">
<div id="ContentMain"><h3>TITLE</h3></div>
</div>
</div>

/* CSS Document */
*{ margin:0px; padding:0px; border:0px; }
body{ background-color:#222222; }
#Main{ width:750px; margin:0px auto; background-color:#333333;
border:#666666; border-style:solid; border-width:1px; }
#Content{ width:650px; height:450px; margin:0px auto; background-color:#CCCCCC;
border:#666666; border-style:solid; border-width:0px 1px 1px 1px; }
#ContentMain{ width:385px; height:430px; margin:10px 10px 10px 255px;
border:#666666; border-style:solid; border-width:0px 1px 1px 1px; }

OSXでSafari、Firefoxで確認したのですが、
上記のようにContentMainのマージン（トップ）に指定すると
Contentもマージン0にも関わらず開いてしまいます。
何が問題なのでしょうか。

>>469
margin-topの10pxが外の要素まで影響しちゃってるって事だね。
#Contentにpaddingも指定してあげればOK。

フラッシュでロゴマークを作ったんですが、スタイルシートで
場所の位置指定するには、どうすれば良いですか？

>>470
ありがとうございます。
Contentにpaddin-top:10px;で解消できました。

htmlタグのxmpをスタイルシートで実現したいんですけど、
どうするのがスマートですか？
＆ｌｔに置換か、perlで自動変換とかしないと無理でしょうか？

CSS関係ないじゃん。

XSLT?

透明度ってさ、なんか、上位ボックスの指定を、下位ボックスでは
塗り替えることができないっぽいんだけど、
おれの誤解？

とりあえず、Firefoxで、
<div opacity=0.5>
<img src="foo.gif">
<div opacity=1>
<img src="bar.gif">
</div>
</div>
とかしてみると、
fooだけじゃなく、
bar も半透明になってるんだよな・・・。

値を継承しても、下位はそれを書き換えられるはずなんだけど、
なんでうまくいかないんだろう。

スレタイからすればXSLTを質問してもよいと曲解できなくもないか

質問です。

今、とあるページのURLが

http://1111111111111111.ne.jp/index.html

だとします。
しかし今後、サイトの置き場となるサーバを変更する可能性を視野に入れた場合、
上のURLの冒頭の部分、「　http://1111111111111111.ne.jp/　」を
いちいち修正しなくてもいいように、変数のようにしたいのです。
こんな事って、CSSで出来るものなんでしょーか？
可能であれば、CSS一枚を修正するだけで、自分のサイトの中にある全てのHTMLファイルの、
その中に書いてある「　http://1111111111111111.ne.jp/　」の部分を一気に変換する事が出来ます。

あるいはjavaなのでしょうか？

CSSでは基本的に無理。

>>478
相対パスで書けよ

>>478
http://www.example.com 使えよ

XSLT?

>>480
この書き方を適用したいのは画像ファイルを読み込むときで、
画像はHTMLファイルとは別のサーバに置きたいから、必ず絶対パスで書く必要があるのだ。

479が書いてる通り無理なのかね・・・。oTZ

テキストの一括置換を知らない奴が居るんだ、へーーー。
便利なんだけどなぁ・・・

CSSでもやろうと思えば出来る。

↑
嘘ついた御免

>>483
CSSをCGIで書き出せばできると思うが、
そんなのより確かにエディタの一括置き換えの方がラク。

>483逃亡

つか独ドメ取れば済む話

そもそも画像を別サーバーから引っ張ってこなければいけない理由がわからない

画像に限定するならやっぱりCSSで出来る

>>490
素材サイト直リンとか

>>490
鯖の仕様だしょ。

>>493
すげぇ特殊仕様じゃね？

仕様なら今時珍しいショボ鯖だな。

ttp://www3.atwiki.jp/itunes/?cmd=upload&act=open&pageid=17&file=v3-logo.jpg
↑のロゴに使われているフォントってなにが使われているのでしょうか＿
よろしくおねがいします…

フォントスレがあるだろ

…っつっつ
誤爆スマソ

TABLEの各セルを均等幅にしたいのですが、
どのようにすればよろしいでしょうか？
TDの数が動的に変わるため、都度widthを調整しないようにしたいのです。

以下のような構成では、左端のセルだけが極端に広がってしまいます。

<html><head>
<style>
table, tr, td {border:solid 1 black;}
table {width:400px;}
</style>
</head><body>
<table>
<tr><td>あいうえお</td><td> </td><td> </td><td> </td></tr>
</table>
</body></html>

自己解決しました。
失礼しました。

絵をのせてるサイトなのですが、限界まで圧縮しても
１ページの重さが80〜100前後で少々重いようなのです

そこで、普通に画像をUpするより、
CSSの背景画像で絵を指定した方が１ページの重さが
格段に軽くなるようなのですが、フレームページのサイト以外
あまりこの方法を使われてるサイトを見かけないのは
何かデメリットがあるのでしょうか？

一応、ファイヤーフォックス、IE、ネスケ、オペラで見てみたのですが
自分の環境では表示jに何も問題ありませんでした。(WinX)

CSSって背景画像の圧縮なんてしてくれたんだ
俺、いままで知らなかったからナメック星で修行してくる

初耳だ…

>>501
背景だろうがなんだろうが、鯖から閲覧PCに流れる量は変わらん。

どこにツッコミ入れればいいんだろう

>>501
1ページ100kならなんとか許容範囲内かと。
ただ、サムネイルを載せてクリックで新しい画を表示みたいにした方がいいとは思うけど。

>>501
CSSで軽くなるのは絵以外の部分。
装飾を全ページ共通にしてHTMLは最低限にできるから
装飾のタグの分ずっとページは軽くなるという意味。
でも使ってる人が少ないのは、そのメリットがあんたのようにわかってない人が多いのと
ビルダーのようなGUIソフトではそういうフルCSSのページは作りにくいから。

スレ違いだけど

絵描きさんとかはこういうCMS使った方がいいんじゃないかな？
ttp://www.sgal.org/
ttp://coppermine-gallery.net/index.php

CMS自体が重い件

重さといっても、処理と転送速度の違いじゃね？
まあ、CMS使っても転送速度は変わらないんだけど。

>>501
あなたが軽くなったと思っているのはhtmlファイルであって
実際はhtmlファイルとcssファイルが同時に読み込まれるから
画像をどっちで表示させても実際の転送量はかわりません

>>511
CSSファイルを外部にすればサイト全体の転送量は減る罠

ほんのちょっとだけじゃね？

そのほんのちょっとが効かないなんて、どれだけ弱小なんだよｗ

むしろ、そのほんのちょっとに頼らないといけないぐらいの転送量があるって、
何万アクセスあるんだろうって思うｗ

はいはい、ばかばっか。

htmlのソース分で速度差を感じるって事は、かなり回線が細いんだろうって思う

tableで段組みした少々大きめページだと、けっこう違うお

tableの場合は転送量じゃなくて、
ブラウザのtable構造の描画動作の違いじゃね？

描画処理はテーブルレイアウトより複雑なCSSのほうがずっと重い

よくわからんが複雑なCSSという時点で問題あるんじゃないだろうか。

だからposition:relativeのような処理が多く必要なプロパティは使うなって言われてるんだろう。

position:relative って複雑かな？

PCの処理が複雑になるものと書き手が複雑に書いたものは違う。

構造を変に冗長にしてるってことか？

冗長（笑）。用語をもう少しまともに使ってくれよ。

>501です。皆様ありがとうございました。
画像ページは画像・解説文・サイト内リンク(CSS)しか無く
テーブルはせいぜい１つ位、CSSもリンクと背景画像にしか使ってない装飾の無いページです。
サムネイルは作らず、TOP→画像タイトル→画像構成です。
CMSは初耳でしたがこれも転送量変わらないんですか…。

速さについてお聞きしたのは、自分の画像ページを見た時と、
他サイトの画像(別フレームで背景画像での表示）では
表示速度が違うように感じたのです。あと、
ページの重さを量る「ダウンロードTIMER」で計ったところ、

●通常の画像Up
28.8k モデム 32.4 秒
56k モデム 17.5 秒
128k DSL/ISDN 7.5 秒
T-1 ライン 0.8 秒

●背景画像で表示
28.8k モデム 2.7 秒
56k モデム 1.1 秒
128k DSL/ISDN 0.5 秒
T-1 ライン 0.6 秒

と、格段に早かったのです。でも転送量が同じという事なら、これは
CSSやテーブルを使わない事を前提に時間を計ってるのかな。

100Kｂまでは許容範囲とは聞いてたのですが、うちADSLなのに「じわっじわ」と
表示されるので、背景画像の時みたいに、もう少し早くサッと表示させたかったんです。
ただ、画像に解説文も入れてる為、画像と文が混ざらないように大きいテーブル作って
その中に背景画像を固定して入れたりしなければならず、皆この表示が変になり易いから
使ってないのかなと思ってました。

「画像を分割してテーブルで表示」というのも試したのですが
テーブル自体も重いって話を聞いたので、背景画像と迷っていたのです。
転送量が同じってだけで、別段表示に問題ないなら、自己満足かも知れませんが
自分のパソでは早く感じる背景画像表示をしばらく試して見ます。
背景画像のデメリットとか軽くなるかどうかとか、検索して見ても引っかからず、
数日悩んでいたのがスッキリしました。どうもありがとうございました。
長文すみませんでした

>>527
その「ダウンロードTIMER」というのを試してみた。
どうやらCSSファイル(およびCSS経由で読み込まれる画像)は計測の対象外みたいだな。
実際にブラウザで読み込むときはちゃんとCSSファイルもCSSで指定した画像も読み込まれるから安心しろ。

<dl>
<dt>hogehoge</dt>
<dd><a href="htt〜〜〜">htt~~~~~</a></dd>
</dl>

とリンク集みたいなものを作っているのですが、
<dd>の<a>でURLが長いのになるとFirefoxで横スクロールが出てしまうのですが、どうしたらいいでしょうか？

CSSじゃないじゃん。

うんうん。

>>530
糞ブラウザの糞仕様は放置でよろしい。

>>530
横スクロールバーでスクロールすればいいじゃん。

>529
た、対象外でしたか…という事は、
CSS画像＋CSSファイル、合計するとサイズが結局通常画像Up分と同じになるんですね
早く表示される気がしたのは気のせいだったのか…
ダウンロードTIMERの表示の違いについて調べて頂けて納得できました、
画像サイズが出る「買いパラ」でも試していたのですが、
今見ると、あちらも「CSSで呼び出される画像」は無視られてました。
お蔭様で謎が解けました、ありがとうございました

>>528
画像をスライスして表示は、部分ごとでも確実に表示されるので、
見てるほうの動作レスポンス的にもちょっとだけストレスが緩和されるよ。
tableはソース量がちょっとだけ増えるのと、レンダリングに負荷がかかるだけだから、
はっきり言ってそれ程気にしなくていいレベル。

<dl id="menu">
　　<dt>MENU</dt>
　　<dd><a href="a.html">メニュー１</a></dd>
　　<dd><a href="b.html">メニュー２</a></dd>
　　<dd><a href="c.html">メニュー３</a></dd>
</dl>
* {
　　margin:0;　padding:0;
}
#menul {
　　background:black;　font-size:14px;
}
#menul dt {
　　height:0;　width:0;　overflow:hidden;
}
#menul dd {
　　display:inline;
}
#menul a {　text-decoration:none;　color:skyblue;
}
#menul a:hover {
　　color:white;　border-bottom:solid 2px white;
}

マウスでメニュー１〜３をhoverした時、
InternetExplorer6.0ではきちんと表示されるのに、Firefox1.5では1pxの隙間ができてしまいます。
この隙間を埋める方法を教えてください。
ちなみに<dl>の外要素の背景は白(color:white)です。
宣言は<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">です。

よろしくお願いします。

とりあえずIEを標準モードにしてみろ。
あとそれだったらdlじゃなくてhn＋ulだろ。

うおーファイアーフォックスで見たら自分のサイトがめちゃめちゃだ・・・・。
どうすりゃいいんですか。
全て対応するように作り直せるのでしょうか？
画像の位置まで違う。

標準モードのような。

>>539
初めからFxを目的として作れば、OperaやMacのブラウザでもOK。
IEを対象として作ると、IE以外のブラウザで崩れることがほとんど。
IEのCSS解釈はひどいから、そっちに併せてないほうがいいよ。

>>538
この宣言は標準モードじゃないんですか？
標準モードのつもりなんですが…

>>541
再現しないな。少しソース間違ってるけど。

>>542
ソースのどこが間違っているんですか？
極論から言うとFirefoxでもIEのように表示させたいのです。
↓
http://puka-world.com/php/upload/puka/img-box/1159612419119.jpg

すみません>>543は私ですm(_ _)m

>>544
スマン背景黒でみてたから気が付かなかった。
取り合えず別の人も言ってたけど、ulでやるべきでしょ。
で黒背景のpaddingとborderの数値を調整。

<div id="menul">
<h2>MENU</h2>
　　<ul>
　　　　<li><a href="a.html">メニュー１</a></li>
　　　　<li><a href="b.html">メニュー２</a></li>
　　　　<li><a href="c.html">メニュー３</a></li>
　　</ul>
</div>
* {
　　margin:0;　padding:0;
}
#menul {
　　background:black;　font-size:14px;
}
#menul h2 {
　　height:0;　width:0;　overflow:hidden;
}
#menul li {
　　display:inline;
}
#menul a {　text-decoration:none;　color:skyblue;
}
#menul a:hover {
　　color:white;　border-bottom:solid 2px white;
}

<dl>から<ul>にしましたが結果は同じでした(http://puka-world.com/php/upload/puka/img-box/1159612419119.jpg)

>>545
* {　margin:0;　padding:0;　}で全ての空白を除いているのですが、ダメみたいですorz

>>546
そういう事じゃないんだけどね・・。違う方法だけど参考まで。
http://css.maxdesign.com.au/listamatic/horizontal06.htm

>>526
君は日本語をまともに使うとこから始めようか

http://www.stylish-style.com/csstec/basic/l-rollover1.html
このページの「使いこなすための＋α」
をやってるんですが、まったく同じものをコピペしてもどうにもなりません。
なぜでしょう・・・。

あなたの頭が悪いから

なぜでしょうね。
どうにもなりませんといわれても、どうにもできません。

>>546
それ、どうやってもFxとIEでずれる。

で、解法としては、まずFxで正常になる様にCSSを調節する。
さらに、そのCSSを読み込んだ後で、

<!--[if IE]>


ここに<style>や、<link>でCSSを書く。
<![endif]-->

って風にして、IE用の修正CSSを書く。
上のへんてこなコメントは、IEだけが中の記述をHTMLとして解釈するコメント。他のブラウザではただのコメントになる。

これであってますか？

ul.sample3{
list-style:none;
width:100%;
padding-left:0;
margin-left:0;}
li.sample3{
list-style:none;
float:left;
border-width:2px;
border-color:#FFEEDB;
border-style:ridge;
text-align:center;}
a.sample3{
display:block;
background-color:#FFFFB0;
padding:0.5em 1em;
width:90px;
height:15px;}
a:hover.sample3{
background-color:#FFCC99;}
ｈｔｍｌ
<ul class="sample3">
<li><A href="#">トップページ</A></li>
<li><A href="#">初心者の館</A></li>
<li><A href="#">私的デザイン論</A></li>
<li><A href="#">CSSテクニック</A></li>
<li><A href="#">ギャラリー</A></li>
</ul>

合ってるもなにも、コピーしたんでしょ。
もっと基本的なこと、cssをhtmlに適用させる方法をちゃんと理解してるの？

困ったもんだなぁ・・・

というか、仕様嫁。あてずっぽうのアホ回答者ども。
paddingがfont-sizeからなのか、line-heightからなのか。
displayプロパティの値によって場合わけされるよな。
当然、知ってるよな、こんな基本事項は。
知ってれば、対策はいとも簡単にたてられるよな。

とあてずっぽうのアホ回答者が言っておりますｗ

回答もせず他人への批判ばかり。またキテレツ君が戻って来たよ。

>>537はどうしてFxで下に隙間が空くんだろう。
>>556にほめてもらおうと思って一生懸命仕様書読んだんだが、どうもIEのほうが正しそうな気がする。
是非>>556に解説して欲しい。

>>556さ〜ん、同伴指名入りました。

>>539
そもそもieなんぞで確認しながらページを作るのが間違い。
ieは最後に確認する程度。
まともにdivも理解できないieなんて・・・

いや、みんな一度は通る道だよ。

IEだけ見れりゃいんだよ

IEが基準だよな。
ユーザビリティから考えてもIEを優先させるべきだろ。

Firefoxを使っているのは、ある程度インターネットの知識がついている人。
ブラウザの長所短所を一通り理解している。

しかし初心者は"必ず"と言っていいほどIEを使っている。
WindowsにプリインストールされているのはIE。
IEを優先させるのはWebデザイナーとしての最低基準！

IEは最優先だが基準にしたくない

IEに対応した時点で、自動的に利用者の
7割をカバーしたことになる現実。

自分ハゲてない！ とは言っても鏡見るとやっぱ
育毛剤を使わない現実がそこにあるのだ。
使わないのが理想であっても、使っていかなければ
毛はどんどん抜けていく。　戦わなきゃ現実と。

>>566
毎日三割の人に笑われてる現実か。俺はヤダけどね。

「IEに対応する」と「IEを基準にする」の区別ができてない奴はいないと俺は信じてる。

俺も信じてる

IEのみで正常に表示できるサイトを他のブラウザで正常に表示できるようにする
→面倒
Fxなどで正常に表示できるサイトをIEで正常に表示できるようにする
→比較的楽
って話だろ？

IEが標準とか言ってるやつらはまさかIEでしかちゃんと表示できないサイト作ってんのか？

> IEでしかちゃんと表示できないサイト作ってんのか？

悲しいかなテーブルの時代から既に沢山あるんだよね
そういうサイト…

そういう人はIEが独自実装満載だって事を、
ろくに知らずに作り始めたんじゃないかねぇ

独自も何も、IE＝ホームページ、インターネット、ブラウザ でしょ。
「それ以外？」っていう。いやマジで。

画像の位置指定してあげたいのですが
#gazou{
top:200px;
　 left:100px;
position:absolute;
background-image:url(gazou.jpg);
background-repeat:no-repeat;
}

これにするとＩＥでしかうまく表示できませんが、他のブラウザでも表示できるようにするにはどうすればいいですか？

IEのabsoluteの扱いはかなり異質

IE額王と言うサイトに見る価値のあるサイトって無いよな

ｼﾗﾈｰﾖ

IE未対応サイトは、ナルシストだったり少しひねくれたサイト多いよね。

非対応じゃなく、対応出来ないだけなんだろうけどな、技術不足で

逆もそうでしょ、技術不足で。

一番の「技術が無くて非対応」なのはIEそのもの。

技術はあるに違いないのにやらないのが嫌われる所以。

IE以外のブラウザ使ってるやつは

・上級者

・俺ってIE以外のブラウザ使ってるクールだぜぇぇぇ！！！

のどっちか。

技術はあるがどうしても独自仕様にしたいと思いながらも
雰囲気的に標準化しないとやばいな〜と思いつつ
中途半端な実装をするのがＩＥ

ＭＳに技術がないと言えてしまう
スーパープログラマーの作ったブラウザーが欲しいです

>>584
馬鹿だな。・Macだから　っての忘れてるよ。

ていうかWindows自体微妙にやる気が無いような気がする。
やっつけ仕事というか、良いものを作ろうとする気が無いような。

>>575
あてずっぽうだが、widthとheightを指定すれば良いような気がする。

>>575
もしかして>>501？

*{
font-family:'ＭＳ Ｐゴシック','ヒラギノ〜〜・・・;
}
とやっても、IEで反映されないのですが、これはバグでしょうか？
（marginとか他のプロパティも設定しています）

スペルミスなのかと思って、*{〜}の中に書いたfont-familyをそのままh1{〜}とかに貼り付けると、ちゃんとフォントが変わるんです。
が、全称セレクタに指定したときだけ、無視されてしまいます。
IEのデフォルトフォントをＭＳ ゴシックにして、適用されるかどうか実験していました。
何か、無視されてしまうような条件とかありますか？

>>589
全称セレクタでもさすがにIEでも効く。
ちゃんとCSSファイル内で文字コード指定してるか？

>>590
ぐあ……ビンゴ。
ファイル流用したときのcharset指定ミスでした。

凡ミスで長レスｽﾏｿ

>ファイル流用したときの・・・

　　正直になれよ。

>>576
IE4のabsolute実装を参考にしつつ、
そのIEが異質になってしまうように後から作られた仕様が、CSS2.0。
企業として後方互換を保ちながら、徐々に、W3C勧告に合わせてきた
マイクロソフトに非があるとはとても思えない。
むしろ、政治的かけひきだけで、自分が教祖になろうと常にもくろむW3Cは異常。

ここまで来たかwww

>>587
ありがとうございます。やってみます。
みなさんabsoluteってあまり使わないんでしょうか。

>>588
違います。
トップページのロゴの位置が気にくわなくて・・・。

>>595
俺は普通に使うけど、そういうロゴを見せるのに背景指定して使ったりはしないな

>>595
前にそういう事してたけど、問題なんかなかった。
上手く表示出来ないってどういう事？

>>596
左上にサイトロゴ　その下にメニュー　その下真ん中あたりに大きい画像を表示させて
一番下にcopyrightの文章の画像を表示させたいのですができません。
こういう時は、なにを使いえば良いのでしょうか。
>>597
ＩＥでは普通に表示されるけど、ＮＮとかFirefoxなどでは左に表示されたりメニューが一番したに来たりとか
めちゃめちゃでした。
また調べて
#top{
background-image:url(gazou.jpg);
background-repeat:no-repeat;
background-position:center;
}
にしてみたんですが（真ん中あたりの大きい画像）画像が２重に表示されてしまいます・・・。IEでも。
一番左に画像ちょっとずれて右にも同じ画像みたいな感じで。
サイトのロゴだけはこれで2重には表示されませんでした。
#rogo {
margin:10px;
　background-image:url("img/sitelogo.png");
　background-repeat:no-repeat;
background-position:left top;
}
↓こちらは2重になりました。大きい画像と同じ症状です。
#copy{
　background-image:url("img/copyright.png");
　background-repeat:no-repeat;
background-position:center bottom;
}

htmlも書けよ・・

#rogoって書くなら#toppuとか#kopiとか使わなきゃだめだろ

>>598
背景画像なんだから、見せたい中身が別にあるって意味で使ってる
ロゴだのコピーライトなんてのは、それ自体を見せるものなんだから背景なんかにしない
素直にhtmlに書く

<html lang="ja">
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="">
<meta name="author" content="">
<link REL="stylesheet" type="text/css" HREF="top2.css">
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV id="rogo">
<A href="index.html"><IMG src="img/sitelogo.png" alt=""></A>
</DIV>
<ul id="menu2">
<li><A href="#" class="what"><span>what's new</span></A></li>
<li><A href="#" class="pro"><span>profile</span></A></li>
<li><A href="#" class="dis"><span>discography</span></A></li>
<li><A href="http://ppp.atbbs.jp/stripout/" class="bbs"><span>bbs</span></A></li>
<li><A href="http://stripout.exblog.jp/" class="blog"><span>blog</span></A></li>
<li><A href="#" class="link"><span>link</span></A></li>
</ul>
<DIV id="top">
<IMG SRC="gazou.jpg" ALT="">
</DIV>
<DIV id="copy">
<IMG src="img/copyright.png" alt="">
</DIV>
</BODY>
</html>
こんなんです。

>>600
え、そうなんですか？クラスで書いたほうが良かったんでしょうか。
まだその辺、よくわからんです。

>>601
自分も最初はそう思いました。
ｈｔｍｌだと画像の位置の微調整とか出来な（出来る？）そうなので。
ｈｔｍｌで書くとすれば<br>で上下調整して<center>で真ん中とかですかね。
それは違う所で勉強ですね。
表示できればなんでもいいからそうしてみようかな。

うわ・・・・
アドレスは無視してくださいorz

>>602
・・えーと、imgとbackgroundと両方に画像を指定してらっしゃるようですが？

>>601は無視した方がいい

>>605
えっと・・・ちょっと勉強してきます・・・

>>603
だからその位置調整のためのCSSだろ
<br>で調整とか何を言ってるんだ

っていうか、すでにそのhtmlソースでimgが入ってるじゃん
その上背景で画像指定してるとか、意味ワカンネ

background: url(hoge.jpg) no-repeat center;
とまとめないのか？

>>608
ですよね。。
ソースでimg指定しないと画像表示されません。
もう自分でも訳わかりません。

>>609
それは慣れたらで。。

今日は参考書読んでまた１から勉強しなおして寝ます。
ついでにアドバイスしてくれるかた募集します。よろしくお願いします。
メッセでもおｋです。
みなさんありがとうございました。

>>610
つかもう<img>だけでいいじゃん・・

結局width heightを無視してるあたりがツワモノ

初心者用質問ｽﾚ設置希望w

初心者スレあるだろ。

質問スレなんだから初心者でもいいだろ
回答するのが面倒ならしなければいいじゃん

現在、ＣＳＳでページを作成しています。
そこで質問なのですが、縦線を可変するタグは、
どのような記述をすればいいのでしょうか。

現在、ＣＳＳで縦線を５００ｐｘのように
記述しているのですが、ページ毎に違うＣＳＳを
用意しないといけなく、効率化が図れません。

>>1に　＞基礎は解説サイト（→【解説など】>>3-4）で勉強してください。
とあるんだがな。

>>617は>>615へのレスね。

>>618
少々焦ってしまいました（汗。一通りテンプレを
見たのですが、解決策が分からない状況です。
※自分の読み間違いがあるかもしれません。

>>617
まぁ、基礎がどの変までか分からんのも初心者なんだけどな

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

すみません、<table height="100%"><tr><td height="100%">・・・ としているのですが、
<td>の中身に文字が入ると safari では高さが縮小されてしまいます。
<table>自体の高さは縮小されず、<td>の高さのみ縮小されてしまいます。
何か解決方法はありますでしょうか。

>>622
スレ違い

どう違うのですか？

CSSじゃない

なぜCSSじゃないのですか？

秘密です。

なぜ秘密なのですか？

アメリカにとって都合が悪いからです。

どうして都合が悪いのですか？

国家秘密です。

どうして国家秘密なんですか？

>>626-632
自演乙

　　　　　　　　 　 　 　 /:.:.:.:.:.:/:.:.:.:.l:.:､:.:|:.:.:.:.:.:.:.､:.:.:.:.:.:.:.:ヽ:.:.ヽ
　　　　　　　　　　　　//:.:.:.:./:.:./:/ |:.:.|:.､:.:.:.:.:.:.:.:＼:.:.:.:.:.:.ｌ|:.:.:.:ﾄ!
　　　　　　　 　 　 　 |:|!:.:.:.:.:!:.:.|:/　 !:.:|:.:l:.:.:.＿l:.:.:.:.l:.:.:.:.:.:.||:.:.:ﾉ|
　　　　　　　 　 　 　 |ﾊ:.:.:.:.:|:.:.|'|￣ !:.:ト､＼:.:.:.|l｀ヽ|:.:.:|:.:/l:／ハ
　　　　　　　 　 　 　 l! ヽ:.:.:.l:.:.l:|　　ヽl　 ヽ=≠-､:.l|:.:.:|//彡/:|＼
　　　　　　　　　　　　　　＼:|:.:.|＝-‐　　　　トしrﾊ|:.:ノ|/! |´|:.:|:.:.:ヽ
　　　　　　　　　　　　　　 　 i｀:.l 　 　 , 　 　 ー‐' ,':.:.:.:トノ:!:.:l:.:|:.|:.l!|
　 禁則事項ですっ★ 　 　 |:ﾉ:.＼iヽ ー‐　　　 /:.:.:.:/:|:.:.:.|:.:|:.:lソﾚ'
　　　　　　　　　　　　　　 ／/:.:.:.ｌ｢| ト､＿_,.. ィ/:.:.:.:斗-!:.:.:|:.:.:.:.ヽ
　　　　　　　　 　 　 　 ／:.:/:.:.:./ｌ/ ﾉ,へ　! ／:.:.／　　　＼l:.:.:.:.:.:.',
　　　　　　　　 　 　 ／:.:.:/:.:.:./|/　'ｰ-ri　/:.:.:.:/　 ,　　　　|ヽ:.:.:.:.:.:',
　　　　　　　　 　 ／:.:.:.:.ﾉ!:.:./　!　 二j´ /:.:.:.:/ ／ 　 　 　 l:.:.＼:.:.:.:.',
　　　　　　　 　 /:.:.:.:.:.:/　∨ノ/　　,rﾉｰ|:.:/ノ´＿,,. -‐　　/!:.:.:.:.:ヽ:.:.:l
　　　　　　　 　 !:.:.:.:／_, -‐'　.〉　,ィ´￣l:/ '´　　　　　　 /:.|:.:.:.:.:.:.:|:.:.:|

あんたかわいいね。年いくつ？

秘密です。

IEの糞仕様はIE7で緩和されていますか？

6に比べりゃ格段に良くなってる。
しかし所詮IEはIE。

IE5使いとかなんで6にうpデートしないんでつか？
ﾏｼﾞで…

ネスケ4.7信者はなんでうpデートしないんでつか？

>>640
4.8にはうpデートしてるってそういう問題じゃないか

N4にはスッピンでよいし、俺がN4を使わざるを得ないときも、
JavaScript をオフにしてるから、結局CSSを読み込まない様にしてる
その分、制作側には妥当なマークアップを期待したいのだけど、
現実はかなりorz

CSSで背景画像として画像を使用してページ全体に影をつけたいのですが、
どのように記述すればページ全体に影をつけることができますか？

マッシュルームレコードってなに？

>>637
aplication/xhtml+xmlに対応しないって時点でｵﾜｯﾄﾙ

>>642
背景画像。

ulとliでリストで作って
リストの間に画像いれたいんだけどうまくいきません

こんなかんじにしたいのです
よろしくおながいします
ttp://www.kaikaikiki.co.jp/

>>646
意味不明。
マネたいサイトがあるなら、ソース見ればいい事。

divで囲んだ中にテーブルを下記の配列のように並べたいのですが、
どのようにすれば一番スマートに並べられるでしょうか？
今後横2列でずっと下に行数が増えて行く予定です。

┌――┐
｜□　□｜
｜□　□｜
｜□　□｜
└――┘
↑div枠

□はテーブル

ずれた…orz

┌――┐
｜□ □｜
｜□ □｜
｜□ □｜
└――┘
↑div枠

□はテーブル

こんな感じです
これでずれたらもう書きません…。

中身がテーブルなら、全部テーブルにすりゃいいやん。

テーブルのなかにはセル何個入れるつもり？

>>650
違うものについての情報なので
テーブルは一緒にしたくないのですよ。

>>651
縦最大10、横最大3です。全部で18個セルがあります。

テーブル入れ子

俺ならfloatでやる。

>>652
まず、複雑過ぎて自分で作れないのなら、業者に頼んだ方が良い

そうでないなら、作りたいものをきちんと説明してくれ
そっちがうまく伝えられない以上、こっちも作り方を説明できっこない

┌――┐
｜□□｜ﾐ ζﾟ 　　＜ I can fly !!!
｜□□｜
｜□□｜
└――┘

>>654 じゃあ教えてやれよ、といいつつ俺もこんな変なレイアウトについて
語りたくない・・・。

業者に頼めるものならそうしたいのですが、
そうもいかない事情があるので…

フロートでうまくいかなかったので質問したのです。
結局テーブル入れ子にしました。
お騒がせしました。

画像ではなくDIVの背景色を透過させたいのですがどうやってら良いでしょうか？

>>659
ワケワカラン
翻訳希望

>>659
半透明PNGを背景にする

>>659
IEだけならfilterってのがある。
ちなみにCSS Filterって説明してるけしからん解説ｻｲﾄも存在するが、CSSじゃないから。

>>661
「画像ではなく…背景色を透過」って言ってるから
　background-color: transparent;
なんじゃねーの？　違うんなら俺も翻訳キボンヌ

>>633
せっかく乗ったのに。

>>639
IE5ではCSSが効かないようにすりゃ良いじゃん。

ttp://www.excite.co.jp/world/

How is it .... good though it wants to penetrate the background color of not the
image but DIV?

英語でOK

IMPOSSIBLE!

I am a pen

IE7でもアンダーバーハックは有効ですか？

訊く前に試せよ！！！

効かん

だってマカーなんだもん。

アンダーバーハックはSeaMonkeyのJavaScript Consoleにエラーを
ジャンジャン吐き出すからやめれ。

Win機拾ってこいよ！

つーか８割シェアのブラウザが何でこんな糞なんだよ！
そっち用にハック使わなきゃってそれオカシイだろ！
メガネどっかに隠しちゃうぞ！ゲイツ！

SeaMonkeyってなに？

>>677
これのこと
ttp://virgojen.typepad.com/virgo_jen/images/seamonkey.jpg

Macだけでホームページ作ってるなんてあるえるのかい。
それで訪れる人の率。消費税の方がまだ高いぜ？！

>>674
嫌ならGecko系を使わなければ良かろうに。
つうか、じゃんじゃんダンプしてくれるから、全部気付けて楽だろう。

>>679
スゴい勘違いをしてる悪寒。もしくは真性。

>>679
日本語も変だし
言ってることも変だよ。

マカーが釣れ始めてる。 だがその数もやはり少ないｗ

釣っても意味ないじゃん

クズは放っとけ。

ごめん、ちょっとワロタ

どっちかといえば、釣られてるのは Mozilla 信者だろうに

初心者スレに誤爆してしまいましたが気を取り直して･･･。

あるリストをfloatで綺麗に（width:30%）横並びにさせて、そのすぐ下の見出しでclearする際に、
リスト表示とその下の見出しの間に3emの空間を入れたくて、以下のように記述しました。

html:
〜略〜
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
<li>たちつてと</li>
<li>なにぬねの</li>
<li>はひふへほ</li>
</ul>
<h2>次の見出し</h2>
〜略〜

css:
ul {margin-bottom:3em;}
li {float:left; width:30%;}
h2 {clear:left;}

IE6.0とOpera8.54では上手く空間が反映されるのですが、
firefox1.5.0.7では、ulの上部から計算している様で、
かなり大きい値を入れないと、リストと見出しの間に隙間ができません。
見出しの方から距離を取る（padding等）以外では解決できないのでしょうか？

ttp://www.geocities.jp/multi_column/float/06.html
↑を見ると、ulにmargin-bottomを指定する事で解決できそうな気もしたのですが･･･。

>>688
h2でclearしないで、brを間に入れてclearってのはダメなの？
どのﾌﾞﾗｳｻﾞでも同じ挙動になると思う。
strictにやりたい人は嫌がるだろうけど。

>>689に追記。
念のため、この場合marginはh2で取ってね。

そうですか

そうですね

そうなんです

そうなのか

そうなんだよな

そうなのは

そうなのなの

そうろうなの

そうなのか

そうなの

綺麗にリストをセンタリングする方法を伺いたいのですが、

具体的には
・全てのli要素のリストマーカーは縦にそろう。
・li要素はインライン要素のみを含む。
・ul要素は、li要素に含まれるインライン要素のうち最大のものに丁度合わせた幅になる。
・ul要素がコンテナブロックの幅に達してしまったら、インライン要素は改行される。
以上の前提・条件を満たすようにul要素をセンタリングすることは可能でしょうか。
可能ならばどうやってやればいいのでしょう。

>>688
>firefox1.5.0.7では、ulの上部から計算している様で、
この場合ulの高さは0。ulにborderとpaddingを与えるとよくわかる。
だからFxの挙動が正しいと思う。

>↑を見ると、ulにmargin-bottomを指定する事で解決できそうな気もしたのですが･･･。
liとh2が兄弟の場合はそれで合ってる。

この場合はliにmarginを指定すれば良い。

ul { padding-top : 3em ; }
li { float : left ; width : 30% ; margin : -3em 0 3em ; }
h2 { clear : left ; }

FxとOpera 9.02で確認。IE6ではうまくいかないみたいだから、あとはハックで調整してください。

そうですか

>>702
ありがとうございます。
なるほど、そういう理由でfirefoxの挙動の方が正しい訳ですね。

たしかに、ご指摘の通りにやってみるとfirefoxで上手く空間ができました。
やはりIEだと処理がだいぶ違いますね･･･。
もう少し弄ってみます。

web制作をはじめたばかりなんですが、スタイルシートでつまずいています。
ずばりDreamWeaver8を使ってCSSを解説しているサイトはありませんか？
テンプレ含めいろいろリンクを回ったんですが、直接手打ちだったり下位バージョンを使用していたりして、
なかなか見つかりません。。
よろしくお願いします。

割れ厨は氏ね世

こんにちは。

another html lintで採点したら以下のように出ました

(<td> の属性 `height` はあまり薦められない属性です。スタイルシートを使いましょう。) → 解説 82


スタイルシートでは具体的にどのように記述すればよいのでしょうか。
諸先生方よろしくお願いいたします。

>>705
CSS使うなら手打ち(?)使えねーと意味ねーよ。

td{
height:(ここに数字);
}

単位はpxなりemなり好きなの使え

<td style="height:520px;">

DW8使っても、テーブルレイアウトするのと比べると
CSSだと便利なタグ打ち補助アプリって感じだよね。

>>708>>711
そうだったんですか。急ぎ過ぎていました。
とりあえずはテーブルをじっくり学んでいこうと思います。

そもそも、DWは手打ちで出来るような人が
作業効率あっぷする為に使うソフトだからな。

>>713
(∩ ﾟдﾟ)アーアーきこえなーい

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

なぜか茶化されたようにしか思えない

ボタン作ろうと思ってaタグに背景画像指定したんですけど
<a class="menu1" href="http://www.example.com">Example</a>とすると、
画像だけにしたいが Example がでてしまいます。（当たり前なんですけど）
これの文字を消す方法ってありますでしょうか。

クラスでマージンとパディング一緒に使いたいんですけど
どこが間違ってますか？

.class1{margin:10px 40px 60px padding:30px;}

>>717
text-indentなど
>>718
書き方間違えてる

.class1{margin:10px 40px 60px ; padding:30px;}

>>718
FxのJavaScript ConsoleにそのCSSエラーは出るから自分でチェックできるだろ。

>>1 ●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
上記を読んだ上での質問です。
下記で24ptにならない部分も24ptにしたいです。
IE限定でもいいので何かいい方法ありませんか？
(HTMLの構造を変えることは出来ません)

<style>p{font-size: 24pt;}</style>
<p>24ptになる
<pre>pre</pre>
24ptにならない</p>

>>722
ブラウザにはHTMLの文法違反を訂正する仕組みが盛込まれているから、

<p>24ptになる
<pre>pre</pre>
24ptにならない</p>

は以下と等価に判断されてるはず

<p>24ptになる</p>
<pre>pre</pre>
24ptにならない

で、このエラー訂正機能は仕様化されていないから、ブラウザごとに異なるはず
サイト制作側がオレオレHTMLを押し付けようとしても、ブラウザ側が勝手に訂正する上、
どのような訂正がなされるかもブラウザ任せってことになる
結局、HTMLを文法に合う様に変更するのが一番無難

基本的にdiv以外でブロックの中にブロックいれちゃ駄目でしょ

横からスマンが、この場合

<p>24ptになる</p>
<pre>pre</pre>
<p>24ptにならない</p>

これが正解ってこと？

開始タグは勝手に補完しなかったような・・・

>>719
ありがとうございます。
最初よくわからなかったですが、
いろいろいじってtext-indent値で範囲から出して、
オーバーフローした分を隠してできました。

>>724
メジャーなとこでは、blockquote

>>725
それで文法的には valid であるけど、
「24ptにならない」の箇所をp要素とするかどうかは原文を見ないと判断不能
もしかしたらリストの方が適当かもしれんし

>>726
俺の知る限りではそうだったと記憶している
でも、新種のブラウザが独自の訂正アルゴリズムを搭載してもおかしくないし
決め打ちは危険だと思われ

blockquoteをブロックの中で使っちゃいかんだろ
使うならquoteでしょ

>>729
ｸﾏｰ

>>717
自分で解ってるなら素直にimg使ったら？

>>717
aをvisibility:hiddenにして、a:beforeに画像を指定。
IEにはJavaScriptでinnerHTMLでも使っとけ。

質問です。お願いします…
下記のように見出しと本文を組み、
本文中に画像を入れ、左右に寄せた際、
文章量（行）が画像の高さより低いと
<h2> や <p> に margin を指定していても、
画像と次の見出しがぴったりくっついてしまいます。
どうすれば常に段落のアキを確保できるでしょうか？

___ CSS ____________
h2 {clear: both;
height: 25px;
line-height: 25px;
margin: 10px 0;
background: url(img/h3bg.jpg) left center no-repeat;}

p { margin-bottom: 20px; }

img.left { float: left;}

___ HTML ____________
<h2>　見出し　</h2>
<p><img src="img/photo.jpg" alt="PHOTO" width="100" height="100" class="left" />
本文てきすと本文てきすと本文てきすと本文てきすと。</p>

<h2>　次の見出し　</h2>

>>732
間違いにそろそろ気付きましたか？
気付いたら自分で訂正しましょう。

imgにもmarginを設定してあげればおｋ

CSSでレイアウトに挑戦しているところなんですが、
コンテンツの幅を800pxにしていて、その中にサイトタイトル画像を
h1のW800pxでmargin・paddingを0pxで配置しています。
コンテンツ幅と画像の幅がピッタリになってくれるはず！と思って作っているのですが
IEで見ていると右横に広がっているんです。
どこが原因なのかさっぱりわからず、ご指摘いただけないでしょうか？

HTMLファイルとCSSファイルとJPEGファイルです。
ttp://kasamatusan.sakura.ne.jp/cgi-bin2/src/ichi55544.zip.html
真ん中あたりのダウンロードという文字のリンクから落としてください。

>>731
いや、マウスオーバーで背景画像にあるボタン画像を切り替えたいとおもったんで
何か方法ないかと思いました
>>719で一応解決しました。

>>736
なんだこの糞アプロダは。そんなに広告収入欲しいのかよ糞管理豚。
>>6でも読め。

>>736
右のスクロールバーの表示領域とか計算してる？
800ぴったりだと収まりきらないよ。
うろ覚えだが幅は780だか760ぐらいだかぐらいが良かった気がする。

>>735
レスサンクスです。
自分も画像自体に margin-bottom とは思ったんですが、
やはりその方法しか無いのでしょうか…

>>740
その方法が気に入らない理由を書け。

Firefoxで見ると、リンクにカーソルを当てた時に
そのリンクの周りのブロック要素の位置が動く事があるんですが、
原因と解決法がわかる方いらっしゃいますか。

>>742
動くソースを貼ってね。

hoverのpaddingとかじゃね？ (曖昧)

>>741
いや、h2やpの方で処理出来た方がキレイかなぁと。

floatしてるんだからimgにやらないといけないのは当たり前。

>>745
常にh2やpが来るとは限らないし。

参考：
ttp://www.w3.org/TR/CSS2/images/float2p.gif

>>734
>>732は間違ってないよ。言葉足らずだけど。

>>737
マウスオーバー？
hover？
ロールオーバーの間違いなのでは？
だったら素直にjavascript使うのが普通だと思うが。

>>748
CSSスレでその発言は有り得ない。

>>743-744
ソースがでかすぎるので、怪しい部分だけを抜き出して再現しようと
今やってたんですが、何故か再現しませんorz
>>744さんの言う通り、hoverのposition:relative;とかdivのpaddingに加え、全体の入れ子状態や
文字数、改行も関係しているかと思ってそのあたりまでやってみたんですが。

最初から作り直してみます。ありがとうございました。

>>723-730
ありがとうございました。どうにもなりそうにないことがわかりました。
頑張ってどうにかします。

aには　background:url("menu-back.jpg") 0 -5px;　とし、
a:hoverには　background-position-y:-60px;　としています。

InternetExplorer6.0ではカーソルON時に背景が-5pxから-60pxの位置へ表示が変わるのですが、
Firefox1.5では表示が変わりません。なぜでしょうか。
Firefoxはbackground-position-yに対応していないのでしょうか。

謹んで宜しくお願い申し上げます。

>>752
お願いの前に仕様書読めよ。
background-position-yなんてプロパティは存在しない。

>>753
そうなんですか。IE独自の仕様なんですね。
では、Firefoxでhover時に背景の位置を縦方向だけ変えたい場合、どのようにすれば良いですか。

（・・・脳みそ使えよ）

>>755
aには　background:url("menu-back.jpg") 0 -5px;　だけでなく
background:url("menu-back.jpg") 100px -5px;
background:url("menu-back.jpg") 200px -5px;
background:url("menu-back.jpg") 300px -5px;
background:url("menu-back.jpg") 400px -5px;
background:url("menu-back.jpg") 500px -5px;
background:url("menu-back.jpg") 600px -5px;
background:url("menu-back.jpg") 700px -5px;

>>755
aには　background:url("menu-back.jpg") 0 -5px;　だけでなく
background:url("menu-back.jpg") 100px -5px;　も
background:url("menu-back.jpg") 200px -5px;　も
background:url("menu-back.jpg") 300px -5px;　も
background:url("menu-back.jpg") 400px -5px;　も
background:url("menu-back.jpg") 500px -5px;　も
background:url("menu-back.jpg") 600px -5px;　も
background:url("menu-back.jpg") 700px -5px;　もあるんです。

hover時に縦(y)の値だけ全て-60pxにしたいのです。
１つだけなら　background:url("menu-back.jpg") 0 -60px;　にすればいいことは分かっています。
これらをまとめてhover時に縦(y)方向に移動させたいのです。　
どうか宜しくお願い致します。

はじめまして。
□□▼▼▼▼
□□■■■■
□□■■■■
□□■■■■
□□▲▲▲▲
□の部分とそれ以外の部分はフレーム分けしています。
▼と▲はスタイルシートで固定し、■部分だけ縦スクロールさせたいと思っています。
▼と▲はposition:abusoluteで画面上下に接着させることができるのですが、
■部分を■部分の中だけで縦スクロール可能とすることができません。
(▲部分を突き抜けてページ全体がスクロールしてしまいます…)

試しに■部分のheightをpx単位で指定すると思っていた通りの動きになるのですが、
ユーザのブラウザの大きさを限定するわけにいかないので使えません。。
何か良い知恵をお持ちの方がいらっしゃいましたら、教えて頂けませんでしょうか？

>>758
frame使ってるなら、全部frameでいいと思う。

>>746,747
レスどうもです。
確かにfloatしてるんだから画像の方にmarginを、ですね。
よくよく考えれば当然ですた…

>>759
全部フレームにしたいのですが、以前スタイルシートで実現している
Webシステムを見たことがあるので同じようにしてみたいのです。
(当時のシステムに今でもアクセスできれば…)

>>761
システム？まあいいけど参考に。
ttp://www.cssplay.co.uk/layouts/body2.html

アンカーに対して下記の背景スタイルを設定しました。

#a {background:url("simple-menug.jpg") 0 -5px;}
#a:hover {background:url("simple-menug.jpg") 0 -10px;}
#b {background:url("simple-menug.jpg") -100px -5px;}
#b:hover {background:url("simple-menug.jpg") -100px -10px;}
（中略）
#g {background:url("simple-menug.jpg") -600px -5px;}
#g:hover {background:url("simple-menug.jpg") -600px -10px;}
#h {background:url("simple-menug.jpg") -700px -5px;}
#h:hover {background:url("simple-menug.jpg") -700px -10px;}
（以下略）

これを省略する方法を教えてください。

IE6.0では
#a {background:url("simple-menug.jpg") 0 -5px;}
#b {background:url("simple-menug.jpg") -100px -5px;}
（中略）
#c {background:url("simple-menug.jpg") -600px -5px;}
#d {background:url("simple-menug.jpg") -700px -5px;}
a:hover {background-position-y:-10px}
とy(縦)の位置を一括で指定できます。

しかしFirefox1.5では background-position-y が使えないため、この省略方法が使えません。
Firefox1.5にも対応する省略方法を教えてください。

>>747
おいおい、どこまでレベル下がってんだこのスレ。
擬似要素は<a><a-before/>aaa</a>みたいなかんじだろ。
>>732みたいに、a {visibility:hidden;} したらどうなるんだよｗ

>>764
スマン、何を言ってるのかわからない。

>>763
ちっとも調べてないんだ、ガッカリだよ。
background-position-yなんてプロバティはCSS仕様書にないって言われたでしょ。
background-positionなの。

>>763
縮められるところといったら……
background-imageを毎回指定する必要はないってところくらいかな。

これ画像うまく作れば、#a:hover,#b:hover,… {background-position: -100px -10px;}
とかでいけそうな気もする

aタグでdisplay:block、text-indent:-9999pxでテキストを飛ばし
背景画像を表示、さらにhoverでズラすといったことを
メニュー等で使っているのですが、Firefoxでクリックすると
リンク範囲がブラウザの左端まで延びてしまいます。
これを防ぐための方法があれば教えてください。
そもそもこういうやり方は好ましくないんでしょうか？

>>762
サンプルページを参考にして修正したところ、思い通りのものになりました。
ありがとうございました。

>>769
overflow: hidden

>>769
Mac IEで全部消える
/*\*/
overflow:hidden
/**/

<a href="#" style="display:block; background-image:url(banner.gif);"><span style="visibility:hidden;">バナー</span></a>

じゃだめ？

>>771>>772
ありがとうございます。これってaタグ全部に指定しても問題ないでしょうか？
つまりこういうテキスト飛ばしのリンクだけではなく、普通のテキストリンクや
イメージへのリンクに対しても指定しても特に問題がないようだったら
一括で指定しちゃおうと思うのですが。

あと、>769の最後にも書きましたがこういうのってSEOスパムにはならないですよね？
CSSレイアウトのサイトのメニューは大抵この手法っぽいですし。

>>773
なるほど。そういうやり方もあるんですね。
でもHTMLファイルを大量に作ってしまったので、CSS側の追加だけで済みそうな
771-772のやり方で問題がなければ進めたいです。

問題は伸びる点線よりも画像OFFで何も表示されないことだよ

画像offにするくらいなら、CSS offにしてくれたらいいのにな。

>>777
細い回線（AirH"等）経由でアクセスする時は、画像offってよくやる

>>778
なるほどねー。悪いが俺はそこまで対応しないけどな。

>>779
いまだに spacer.gif とか使ってるサイトは実際わけわかんなくなるし
対応しなくてもそれはそれでかまわんのだけど
一々ソースチェックしたりはしないから
その手の時代遅れのサイトと混同されるおそれはあるかも

それを言い出したら画像使ったメニューなんて出来ない。
テキストで十分って考え方も尊重するが、CSS3以降に期待って事かね。

普通にimgタグを使ってalt使えばCSS切ったときに醜い
だからといって背景にしたら画像だけ表示させないようにさせたとき醜い

他に何か方法ってあったっけ？

背景にして空span入れてテキスト隠す方法があったと思うけど
そこまでするなら割り切った方がいい

>>782
>だからといって背景にしたら画像だけ表示させないようにさせたとき醜い

この場合は、>>777に指摘がある様に、美醜ではなく何も表示されないのが問題

>>764
>>732そのままで良いなんて言ってないじゃん。
>>732の発想で問題のスタイルを実現しようと思ったらまだ指定が足りないし、条件付きでしか実現しないけど、
その発想で「できないわけじゃない」という意味で「間違ってない」と言っただけで。
まあ、そういう意味では俺も言葉足らずだったけど。

相手しなくていいよ。
定期的に現れてはケチだけつけてく奴なんだからさ。

<tr>
<!--======メイン左====== -->
<td id="main-left">
<H1>News</H1>
<HR CLASS="sen">
<DIV CLASS="title">ライブ情報！</DIV><DIV CLASS="data">2006/10/04</DIV>
ライブが決定しました！

--------------ＣＳＳ----------------
td#main-left{
width:500px;
}
.sen{
width:450px;
height:2px;
margin-left:55px;
color:#000000;
}
.data{
text-align:right;
font-size:xx-small;
color:#000000;
}
ライブ情報！の右端に2006/10/04と表示させたいのですが
２行くらい下の右端に表示されてしまいます。
どこを直せば右端に表示されますか？

>>787
全部直さないとな。
htmlからしてひど過ぎる。まず正しいhtmlがあって、それからcssで見栄えを調整するもんだ。
半端な知識でcss使うくらいなら、テーブルレイアウトの方が100倍マシ。

</td>
</tr>
つけ忘れましたがそれとは違ってですか？
ほぼサイトのままやってるんですけどね。。

サイトとは、参考にしてるサイトですorz

つまり自分では一切勉強しても、調べてもいないということですね。
そんな人には多分誰も答えてくれませんよ。

>>789
どちらにせよ間違ってる。どこにtableがある？
そりゃ間違ってたってサイトは表示されるよ。カッコ悪いがな。
君はそれでは満足出来なくなったんだろ？カッコ良くしたいと。
その向上心は買う。いい事だ。だがさっきも言った、CSSを使うなら、だよ。
バンドだって何かしら努力しなきゃ上手くなんないだろ？htmlも同じだよ。

>>791
>>792
うーむ。そうですね。
どこをどう勉強すれば良いかわからない状態で。
内容を理解しないとだめですよね・・・ありがとうございました。

>>793
web初心者質問スレのテンプレに参考サイトがあるし、
ググれば初心者向け解説サイトは沢山あるよ。

>>787
.titleの中にfloatは？
というよりcssはレイアウトのためなのにテーブルでレイアウトを使っているが矛盾を感じないか。
cssで組む意味がないと思う。

dateジャマイカ？

>>795
テーブルでマーク付けした方が良いのだろうよ。
むしろ、そのマーク付けを否定する根拠を提示してもらおうか。

>>795 別にCSSとテーブル組み合わせても何の問題もない。
分かるところはCSSで、CSSでうまくいかないところはテーブルでやればいい。
それこそ「テーブルは表」というW3C信者そのものだな。

>>795 自分も昔はcssでうまくいかなくて苦労した。
そういう知識の差を考慮しない物言いは良くないよ。

>>795
とりあえず｢CSS初めの一歩｣にはちょうどいいレベルだと思うよ。
初めからフルCSSだと慣れていないと難しいからね
俺も今でこそそれなりにフルCSSでデザインできるけど、初めはテーブル+CSSからだったよ

>>795に嫉妬

<div id="container">
<div id="header">ヘッダー</div>
<div id="main">
<div id="contents">メインコンテンツ<br />メインコンテンツ</div>
<div id="side">サイドコンテンツ</div>
</div>
<div id="footer">フッター</div>
</div>

body{margin:0px;text-align:center;}
#container{margin:0px auto;text-align:left;width:770px;background-color:#cc0000;}
#header{width:770px;background-color:#00cc00;}
#main{margin:10px;background-color:#000000;}
#side{float:right;width:230px;background-color:#cccc00;}
#contents{float:right;width:510px;margin-left:10px;background-color:#cc00cc;}
#footer{clear:both;background-color:#00cccc;}

mainの背景色が全く見えません。
mainのmargin:10pxがあるはずなのにフッターがくっついて見えます。
さらにIEだと、footerの背景がside直下になり、contentsとの差分が重なってしまいます。
>>6も目を通したのですが、main＞contents、main＞sideという構成がなく
floatがまずいのかmarginがまずいのか、そもそもHTMLがダメなのかさっぱりわからなくなりました。
助けてください。お願いします。

>>802
#mainにoverflow:auto;。floatした要素は無視されちゃうから。
IEの問題は>>6読んだなら判ると思うけど、標準モードにする。
それでもダメなら、中の要素のwidthを10と10ではなく、10と9.9にする。

>>803
ありがとうございます。早速、overflow:autoを追加してみました。
すみません、標準モードって
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
を頭に書いたらいいんですよね？
一応、いままでこの形で書いていたので、widthをピッタリではなく小さくしてみました。
widthを調整したら、contentsに重なっていた部分が解決しました。

Operaではmain、contents、sideが見えなくなってしまいました。
IEでは相変わらずmainの背景色が見当たりません。orz
あと、「IEの問題は>>6読んだなら判ると思うけど、標準モードにする」が
なぜ>>6を読めば標準モードにするという結論になるのかお教え願えないでしょうか。
Q4のフロート関連が影響しているのかと思ったのですが、今回の状態に当てはまるものが分からなくて…

>>804
mainをfloatさせるか
<div id="side">サイドコンテンツ</div>
<br style="clear: both;">
</div>

>>6じゃない>>5だ。
テンプレには最低知っておくべき情報が書いてある。
全部読んどけ。

>>804
ああゴメン。width:100%;も同時に入れないとダメだった。
詳しくは↓。
ttp://www.quirksmode.org/css/clearing.html
普通に#mainにheight指定した方が簡単かも。

某ＣＳＳサイトで載ってたんですが

h4 hr{color:#ff0000;}

というスタイルは<h4><hr>〜<hr><h4>って言う範囲に適用するんですよね？
h4とhrってブロックレベル要素なので文法的におかしいと思うんですが、どうなんですかね？

<hr>〜<hr>

フハハハハハハ

間違った。これでいいのか。<h4><hr></h4>

，で区切ったスタイルだった。自己解決。スレ汚しスマンな。精進する

文法以前に、見出しの中にhr入れることなんてあるのか？

<hr> を　<h4>〜</h4> 内に書くことはできません。

>>807
やっと当てはまってる記事が分かった。ありがとうございます。
<br style="clear: both;">だと、mainの高さがcontentsに
mainにoverflow:auto;width:100%を適用してみました。
mainも見えるようになって、footerもcontentsに重なってないのでヤッターと思っていたら
右側にはみ出てしまいました…orz
width:100%を770px-10px*2の750pxにしたら何とか解決したんですが、
width:100%って親要素に子が入る幅（770px）になるのでしょうか？marginは入らない？

>>806
テンプレを全部読んでおくべきなのは分かりますが、リンク先までとなると
直接開いたページまでしか読んでいませんでした。すみません。
ただ、>>5のQ2はセンタリングなので今は問題ないと思ってます。
Q1はボックスのサイズ算出方法が違うというやつですけど、widthとmarginしか使用していないので
borderやpaddingを含む含まないは関係ないと思っているのですが違うのでしょうか？

>>814
いろんな人が別々のやり方を提示してるんだよ。
好きな方法でやればいい。
ちなみに俺は>>803,807、貼ったurlはテンプレにはないよ。

書き忘れ。計算方法は合ってる。

>>815
何度もありがとうございました。
テンプレに教えてくださったURLがないのはわかってますよ。
まさにコレという内容だったので参考になりました。英語が危ういですけどorz

>>794-795
レスありがとうございます。
http://www.stylish-style.com/beginer/trial2/l2-first.html
ここのテンプレ使ってます。

試行錯誤して今日も作ってみます。

>>795
今の心境をお聞かせ下さい。

>>787 お前は>>795に馬鹿にされているんだぞ！！
>>795は「テーブルとCSS使ってお前馬鹿じゃないのか？」と言っているんだぞ！！

>>795 は上司にしたくないな
ミスしたらズバリと指摘しないで「なんでこんなミスしてんの？ ねえ何で？」
みたいにネチネチいやみを言われそう。

わかったから遊ぶなｗ

先生きたぞ >>795

　　 ／ ： 》：､∩
　　（===○=）/ 　せんせー。>>795君が教科書忘れたみたいです
＿_ /　　⇔ /
＼⊂ノ￣￣￣＼
||ヽ||￣￣￣￣||
　...||￣￣￣￣||

marginに負の符号使うのっておｋですか？

>>825
知らねーよ。自分で仕様書嫁。

>>826
知らないそうなので、自分で調べてみます。

無知な回答者が多いな。

うん

2chの質問スレは初級者が初心者に教えることによって
自分が勉強するためにあるんだよ

IE6ですが、忍などのレンタルカウンタで、
カウンタに触れてポップアップが表示されると
フィルタを使ったラインが表示されなくなってしまいます。
何か対策はありますでしょうか？

>>831
CSS関連の質問をして下さい。

>>832
嫌です。

float:leftなどとしたあとのクリアを空の<div>とか<p>でやるのは、あまりよくないんでしょうか？
純粋に次の<div>要素でクリアさせると、macIEとかでそのdivの中身がおかしくなることが
多いような気がするんですが。どのようにするのがベストなんでしょうか？

divのwidthが、親のwidthの100%になってしまうんですが、内容物に合わせるには
どうすればいいのでしょうか。内容物は可変なのでpx指定はしたくないのです。

<dd><a href="http://aaaaaaaaaaaaafo">http://aaaaaaaaaaaaafo</a></dd>
というようにURL書くとスクロールが表示されてレイアウト崩れまくる(´･ω･`)
なんとかうまいこと折り返す方法無いやろか？

HTML
<p><a id="HOGE" href="https://hogehoge.co.jp">HogeHoge.co.jp</a></p>

CSS
a#HOGE{
display:block;
width:70px;
height:20px;
text-indent:-9999px;
overflow:hidden
}
a#HOGE:link,
a#HOGE:visited{
background:url(logo_001.png) 略
}
a#HOGE:hover,
a#HOGE:active{
background:url(logo_002.png) 略
}

とやると、FF最新・Opera最新・IE6で表示には問題はありません。


しかしOpera最新の場合、リンクの上にマウスを持ってくるとWindowsでいう「砂時計」が出てくるのですがこれはなぜでしょう・・・

>>836
width指定して

overflow:hidden;

か、

white-space:normal;

>>835
質問がイマイチわかりにくいけど、divのwidthを可変にしたいなら、
相対単位でwidth指定したら？

>>836
俺なら、link先の表示 or レイアウトを再考。

>>837
再現しない

>>840
なんだかわかりませんが直りました。
何にも直してないのにな・・・

>>838,840
ありがとうございます。
overflowでなんとかやってみます

ところでlink先の表示というのは<a href="http://hage">(´･ω･`)</a>
というように書くということで良かったですか？

つユーザビリティ

WinIEです。
背景画像を上一列に固定で表示したいのですが
下一列に表示されたりまったく表示されなかったりします。
原因は何でしょうか？

WinIEが喋った！

ﾃﾗﾜﾛｽｗｗｗ

なんとか解決しました

WinIEは賢いな

マジでそんぐらいWinIEが賢ければいいんだけどな。

WinIEは賢くなっても自己中じゃないかな。
「仕様では○○となってますが、私はこう表示したいので無視します」とかw

>>848 自分で処理できなくて2chに助けを求めてきて結局自己解決
してるのが賢いのか？

賢いじゃねぇか。

自己解決できる完全なるＡＩだぜ
賢すぎるだろ

851　はそれがわからんのだからヴァカですな。

OSじゃなくてIEがAIというのがWinらしいがな。

完全にエージェントと指向となってIEが独立するのか。
利用者毎に完全体ライクIEとアホIEに分かれそう…。

やったー、コーディング終わったよおぅ！
　↓
Win IE で確認
　↓
(´･ω･`;) ｴｴｪｪ

Win IE ＜　marginの指定がおかしいです　ご主人様

IE対策していたらdiv厨になってますたw
でもfloatでレイアウトするとどうでもdiv多用してしまうんだよな〜('A`)

楽観的になれよ。divをちょこちょこと書くだけで対策できちゃうんだろ。

Macで作ってるけど、
SafariやMacIE（OS9含）でよしオケと思っても
やっぱりWinIEでがっくし… てことが多い。
勘弁しちくり (; ´Д`)

WinIEの文句を言っているだけの初心者諸君、無駄レスをやめてください。