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

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

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

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド【第５版】
　http://pc8.2ch.net/test/read.cgi/hp/1144494359/
代替スタイルシートに萌え〜
　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でイケてるデザインサイト 37
　http://pc8.2ch.net/test/read.cgi/hp/1162545373/

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

【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

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は一要素に一つだけ。要素を重ねるなど工夫しませう。

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

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乙。
しかし63ndって・・・・・・

プログラムコードをHTMLで公開したいのですが、
マックでうまいこと表示できるフォントが見つかりません。
今のところ、Osaka−等幅とCourier Newを試しました。
前者は等幅にならないようです。フォント名の表記が間違ってるかも知れません。
後者は等幅になったのですが、あまり気に入りません。

他にどんな等幅フォントがあるでしょうか？

ネットでMonacoってのを見つけて、なかなか良さげでした。
他にもあったらお願いします。ちなみにfont-sizeは12pxです

>>11,12
今はOsaka-等幅なんてわざわざ入れてる人は少ない。
Monacoでもいいけど、総称ファミリだけ指定しとけば済む。

なるほど、そういう指定があるのを初めて知りました。
monospaceとすればよいということですね。
ただ、マックはよくなったのですが、winで第一候補を
ＭＳ ゴシックにしていたのが、返っておかしくなってしまいました。
という訳で、ＭＳ ゴシック, monospaceとすることにしました。
どうもありがとうございました。

フォント指定すんなカス

確かに自分で指定してるし指定されなくても問題ない。

自分で指定してる人は少ないと思うけど

別に指定されても構わないが、Comic Sans指定してるサイトには殺意を覚えた

>>15
そのプロパティはフォントを指定するために存在しているんだろｗ

ふぉんとに何やってんだか

>>19
押しちゃいけないボタンみたいなもんだ

というかそれ何＞押しちゃいけないボタン

火災警報器
列車非常停止装置
核発射スイッチ

ちょｗｗｗ

WYSIWYGなCSSエディタが欲しいよ〜

position:absolute;
で延々場所を指定していってたらわけがわからなくなりました

>>25
おまえのやってるそれはCSSデザインじゃない。
ど　こ　で　も　配　置　モ　ー　ド　だ　。

>>26
ではどうすれバインダー


今までずっとフレーム&勧告無視のHTMLソースこりこり書いてたのだがこのたび今月中にCSS化しなければならなくなりまして、
でもCSSレイアウト実験なんてやったことねーよ間に合う訳ねーだろボケwwwwwwwwwうぇうぇうぇうぇえっうぇorz

>>27
あえて言う

死　ね

>>27
金払って、別の業者に丸投げする。

>>28
やなこった

>>29
m9(`･ω･´)ｿﾚﾀﾞ！！

金さえあればな
予算一万円じゃ無理だwwwwwwwww

まあ、一言で言うと　　　自　業　自　得　　　だな。

>>25
仕事でやっててTopStyleも知らんとは・・・　　馬鹿め

>>25
freeで日本のなら　Visual Box Styler　とか
海外のもあったなぁ

WEBデザイナーって25みたいな阿呆でもなれるものなの？

デザイン能力とCSS知識は別っこだからね。
>>25 は、紙に描くと、もの凄いデザイン能力を
発揮するんだよ。　　水中のズゴックなのだよ。

初歩的な質問で申し訳ありません
フォントファミリーについてですが、サイト全てのフォントが同じならば
bodyだけにフォントファミリーを宣言すればよいのでしょうか？
それとも各主要divごとにフォントファミリーを宣言するのでしょうか？

よろしくお願いします。

なんだかんだ言いつつ答えてくれた>>32,33さんくすだ。

あと俺Webデザイナーじゃないんで安心しれ。
半分勝手にHP作ってたら上司が
「最近SEOとやらが流行ってるようだからうちも全部CSSにして訪問者倍増でうっはうは」
等とわけのわからないことを口走っており上司の常識と俺の進退が危ぶまれる今日この頃。

＞「最近SEOとやらが流行ってるようだからうちも全部CSSにして訪問者倍増でうっはうは」
うわぁ…

>>36
統一したいんだったらbodyに設定しとけば一括だよ。
変えたい所のdivだけフォント設定変えればいいんだよ。

初心者なのですがcssで改行の幅を指定することって可能でしょうか？
可能ならやりかたを教えて頂けないでしょうか＞＜

初心者じゃなくてただの馬鹿でしょう？
ちゃんと勉強してください＞＜

>>41
やり方見ても出来ないとか言ってるなら分かるが
ただ知らないって言ってるだけなんだからめんどくさがりな初心者だろ。
そんなレスしてるお前が馬鹿でしょう？ｗｗｗ

>>42　( ﾟдﾟ) ・・・

すいません一応初心者用の本は買ったのですが載ってなかったのです。
line-heightっていうのが近いかと思ったのですが折り返した時の幅みたいだしorz

ん？「改行の幅」っていうのはてっきり何文字で折り返すとか
そういうことかと思っていたが、そうじゃなくてたとえば
段落と段落の間の隙間の高さのことを言ってるのか？

>>45
そうです。縦に並べた画像の幅を変えたいのですが、
<br>で改行すると幅が大きすぎて見栄えが上手くいかなかったので
そういうことが出来ないかと聞いてみました。

説明がへたくそなんだから、ソース出すとか具体例を上げたらどうよ。
＞縦に並べた画像の幅を変えたい
歪んだ画像が好みなのか？

はば 【幅】(1)物の横の長さ。縦長なものの短い方の端か端まで。

>>46
まず、<br>で、どうこうしようと言う発想を捨てる事だ。むしろ<br>を使うのは特殊な場合で、普通は必要ない物だと思った方が良い。

"間隔"を調整したいなら、margin や、padding を使いなさい。

>>46
画像を並べるなら普通リストだと思うが、
それにマージンを取れ。

>>47-48
すいません。こういうことが言いたかったのです。
http://www.uploda.org/uporg671252.jpg
間隔って言ったら良かったのですねorz

>>49,>>50
そうだったのですか＞＜
ヒドい勘違いしてとにかく全部<br>で今まで調整してましたorz
そのmarginなどについてググッてみます。ありがとうございます＞＜

CSS言いたかっただけちゃうんかと

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

>>40
ナビゲーションボタンを縦にダーっと並べたいのかな？
ナビゲーションボタンだったら、リスト化したらいいんじゃないかな。
その画像を配置したdiv内のリスト<li>に対してmargin設定すればいいと思うよ。

>>54ほど話の読めない香具師も珍しい・・・

border-width の値をパーセントで指定すると、
IE7で border-colorが変わらなくなるのはIE7のバグですか？

>>56
仕様書読め。可能な値に、<percentage> と書いてないだろ。

それにしても幅を無視するならともかく
色を無視するのはバグ臭いなｗｗｗ

cssで、文章中の一文字だけ色を変えたい場合の記述の仕方を教えてください。
FONTタグですと

あい<FONT color="#ff0000">う</FONT>えおかきくこ

っで「う」を赤くなるのを、cssではどう記述すればよいのでしょうか?

>>59
テンプレ嫁

>>59
spanにクラス付けるか
あい<span style="color:#ff0000">う</span>えおかきくこ
とか

html側でwidthとheightが指定されているimg要素（↓下のような）
<img src="" width="200" height="400" alt="">
を
cssで縦横それぞれ元の指定のたとえば1/2などにするにはどうすればいいんでしょうか。
Firefoxでのみ対応している方法でもかまいません。
img {
　width: 50% !important;
　height: 50% !important;
}
とするとブラウザのwindowサイズの50%になって。

画像ごとに縦横比がまちまちで、pxで指定すると比率が崩れてしまうので
倍率で指定したいと思ったしだいです。
自サイトのレイアウトではなくfirefoxのuserContent.cssについてなんですが・・・。

>>61
ありがとうございました。
出来ました。

>>61
spanは嫌いなので、<strong class="hage">にしてください

>>62
画像を全部CSSでオリジナルサイズの1/2にしたいということかな？
そりゃ無理じゃないかな。

>>62
そういうプロパティは無いよ。
JavaScriptなら出来るのかも知れないけどわからん。

>>65-66
レスどうもありがとうございます。cssでは無理なんですね。
夜遅くに質問してすみませんでした。回答してくれて感謝です。
おやすみなさい。

インラインSSの質問です。

ある段落の文字色とバックグラウンドを設定することはできますか？
<p style="color:red">で文字色はできたんですが、バックができません。

<p style="color:red" "background-color:white">
こんなことやってみましたが駄目で・・・。

あ、>>68自己レスです。
できました^^;

<p style="color:red;background-color:white">

こうですね。すみませんでした;

こういう質問者が一番腹立つな。

style=""つかわないでCSSに記述しようぜ。

っはい！わかりました。

素朴な疑問なんだが、68のインラインSSってなに？
たんに脱字？

多分style=""を使った埋め込み型のスタイルシートと言いたいんだと思う

>>74
それはインラインCSS

ﾊﾞﾛｽｗ

>>75
インラインスタイル(シート)だよ。
http://www.w3.org/TR/css-style-attr#grammar
http://www.w3.org/TR/html401/present/styles.html#h-14.2.2
だから、>>68のインラインSSの方がより正しい。

HTMLのstyle属性値は、``default style sheet language" 依存。
つまり、建前上、CSS限定ではない。
このことからも、>>75は間違いであると分かる。

>>77
それはインラインマジレス

>>77
ひとつ勉強になった。

インラインSSは「インラインスタイルシート」のつもりで使いました。

が今考えたら「間違ってたかな？」と。
<span>を使ったなら「インラインスタイルシート」と呼んでいいと思えますが、
<p>というブロックに「style=""」を設定した場合は
果たしてインラインと呼べるのか？と。

とにかくお騒がせして申し訳ありませんでした。

それはインラン妻

淫乱スタイルショーツ

style属性なんて使うのはどんな場合？

DOM

DQN

DOA

DQM

表自体を中央に持ってきたいんだけど、どうすればよいのですか、先生。

テンプレくらい読もう

<center>表</center>

>>90
ありがとうございました。助かりました。

助かるなよｗ

思い通りに表示されればHTMLだろうとCSSだろうとなんでもオケ
ってことでFA？

お前は何を言っているんだ。

クラスがfooのh2子要素を持った親のh1要素にルールを適用する、
といったことはCSSだけで可能でしょうか？

カスケーディングの思想に反するだろ

<h1>
　<h2>なんたらかんたら</h2>
</h1>

って形か？
これ、HTMLの文法違反じゃないのか？

>>97 おもいっきり文法違反。
っていうか　普通に考えておかしいやろ。

<h1>このスレ良スレ</h1>
<h2 class="foo">１から１００まで</h2>

ってこと。

基本的に遡って適用はありえない。
それに親のh1にclassを指定すれば良いだけの事。

>>98
それだと子じゃなくてブロック要素が2つ並んでるだけだな。
section指定されてたらわからんけど。

>>97-99
すみません、正しくはh2.fooを子に持つすべてのdiv要素、でした。

yahooのジオでCSS作ってるんだけど所々わけわからん。
もしかしてジオってCSSにはきちんと対応してないの？

divを縦横中央に配置しているのですが、ブラウザのwindowサイズを横スクロールバーが出るほど小さくすると表示がおかしくなります。
具体的には、上側と左側が一番端から表示されず、スクロールバーを動かしても端が表示されません。

これを改善する方法はありませんでしょうか？
ソースは以下のようになっています。

div#main{
background-image:url(img.jpg);
overflow:auto;
height:500px;
width:900px;
position:absolute;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-450px;
}

>>102
ない。
そもそも物凄く不自然なやり方をしてるから。

>>103
回答有難う御座います。
もし、縦横中央に配置しなければならないとしたらどのような方法を採られますか？

>>100
h2.fooを子に持つ全てのdivにclass指定してあげれ。

>>101
ジオで何をしてるか知らないが、CSSの動作はブラウザ依存だから鯖は関係なし。

>>104
テンプレ嫁。

>>104
そういう意味じゃなくて、そもそも縦中央というのが
CSSの仕様からしたらとても不自然なんだから、ということ。
イレギュラーな手とならざるを得ないから、ちょっとしたことで崩れる。

tableのcaptionあるじゃないですか
captionに囲まれたクラスセレクタが無視されてしまうんですが、
同じ症状の人はいますか？

ちなみにie6です

>>107
＞captionに囲まれたクラスセレクタ
は？

>>107
<!ELEMENT CAPTION - - (%inline;)* -- table caption -->

>>108
ごめんなさいちょっと説明へたで。

<table>
<caption>
<ul class=inline>
<li><a href=?year=2007&month=1>1月</a></li>
<li>>></li>
<li>2月</li>
<li><<</li>
<li><a href=?year=2007&month=3>3月</a></li>
</ul>
</caption>

こんな感じにcaptionのなかにulがあるんです。
ulにはクラスinlineを設定しているんですが、
cssがどうも適用されないようなんです。

>>110
>>109

109のエスパーっぷりに感動

ttp://dev.opera.com/tools/
質問と関係ないが、Operaユーザは使ってみるといいかも。

>>109
確かに前さんすごいなｗ

>>109
ありがとうございます
いま調べて初めてDTDという存在を知ったので、
苦戦している最中です。

質問ばかりで大変申し訳ないんですが、
<!ELEMENT CAPTIONはhtml中のどこに記述すれば
良いんでしょうか？

調べてもよくわからないものでして・・・

サイトを今から、作り始めるんですが
サイト名がまだ決まってません。
ＣＳＳで一括デザイン変更が出来るのはわかったのですが
ｃｓｓを使って、
後から文字も一括で変更することって可能でしょうか？

>>115
それはたぶんhtmlを書き換えなければいけないので、
phpのようなプログラムでないと無理だと思います

>>114
そういう意味じゃないよ。
入れても無理。captionの中にはinline要素しか不可ということ。
だからCSSの問題じゃなく、HTMLレベルで間違ってるから
CSSがそれを補正できるはずもない。

>>115
無理。
一括置き換えができるフリーエディタはたくさんあるので、
そういうソフトを探してください。
ttp://www.vector.co.jp/

>>117
ありがとうございます。勉強になりました。

スレ違いかもしれないですけど、
最近いろんなサイトで「Tag」って書いてあって、
いろんな単語がいろんな大きさで表示されてるのを見かけるのですが、
あれってどういう意味、メリットがあるのでしょうか。

>>119
あれは、どんなジャンルが人気があるかを示すもので、HTMLのタグとは全然関係ないよ。
だから本当にスレ違いだよ。

>>119-120
スレ違いすまんが、一体何のことだ？

>>121
例を挙げると、http://vision.ameba.jp/の「人気タグ」とか。

>>121
ttp://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%AE%E3%83%B3%E3%82%B0_%28%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%29

>>116､117
ありがとうございます！
てことは、ブログみたいに
サイトのデザインを一括変更は無理ってことですか？
今から作ろうとしているＨＰはページ数が多くなりそうなので
しかも、自身が飽き性なので、すぐにデザインかえるかもなので､､､

>>122-123
ありがとう・・・初めて見た。

>>124
何百あろうが>>117の言うように全ページ一括変換できるソフトはある。
ていうかデザインはCSSで一括で変えられるが、おまいさんの言ってるのはデザインじゃない。

>>124
ホームページ製作王には一括置換機能があるので、サイト名やデザインをまとめて変えることができるからオススメ

>>124
文書のデザインというか、体裁を決めるのはまさにスタイルシートの役割だけど、
文書の記述内容をスタイルシートにゆだねるべきではないよってこと。

>>124
君は文字の変更を聞いてたんだろ。
然るべきhtmlを書いて、cssで装飾したサイトだったら、
cssを変更するだけでいい。
君が初心者なら、まずhtmlをちゃんと勉強する、これが重要。

えっと、分かりにくくなってすみません。
実際、私がやりたいのは
ＨＰの上部にメニューバーや、
両サイドにサイドバーを設けた場合、
ブログだとテンプレート編集のページで変更すると、
全ページに反映されるのと同じようなことを
ホームページでも出来たらと思ってました。
ブログだとＣＧＩが使えなかったりするので、
ＨＰを始めようと思ったのですが､､､
出来れば、最初なので
フリーソフトで何か無いでしょうか？m(__)m

>>129
スレ違いだっつーのに。
SSI使え。

>>126
ホームページ製作王ってｗ

>>129
CSS関係ないでしょ。
スレ違い。

質問はコロコロ変わるし、自分が何やりたいかもわかってないんだろ。
初心者向けほーむぺーじの作り方なら、サイト上にいくらでもある。勉強汁。

>>129
おまえは用語さえ理解できてないど素人
文字列もデザインの一部だと思ってる馬鹿
懐かしい言葉を使うとこういうことだ。
3年ROMってろ

何かネットで見聞きしたワードだけで、
理解したと思っちゃってる感じだなぁ…
でもまだ1行も書いたことない、みたいな。

だな

>>129
実に簡単なことだ。
そう、フレームを使えば良いのだよ。

じゃあ俺はJavascriptちゃん！

私はオール1枚画像ちゃん！

PDFファイル最強説

filterなんて使わないよな？

それなんてCSS？

filter: alpha(opacity=50);
だとか

143は142の意図を多分分かってない。

>>144
わからないよ
jsなの？

いろんなのが増えたなあ・・・

CSSじゃないのかよ
わからないよ

技術的にはactiveXの部類

>>148
ありがとう
filterをいちいち使うことってあるのかな？
あらかじめ加工した画像を作ったほうがいい気がするんだよ

>>149
CSSの話じゃないのでスレ違い

>>150
だってCSS filterとかでぐぐると出てくるし
書籍にも載ってるよ

沼に池

ひどいこと言うなよ
かわいそうじゃないか

壷と池・沼とどれだけの違いがあるというのかな

最近ネットを始めた同僚が、匿名掲示板で自分の苗字を当てられてびびってた。
彼の名は「池沼」。

確かに解説サイトを名乗ってるトコで、CSS filterとして説明してるアホサイトがある。
他の内容もいい加減だし糞。

まぁ>>153のレスは自演なんだ

どうでもいいけど>>142は"それなんて〜"の使い方間違えてるよな。

間違えてはない、ローカルでちょっとずつ違う。

このスレには "filter:"キーワードに過剰なアレルギー反応を
示す人が何人か居ますのでご注意下さい。

<div id="container">
<h1 id="header><a>nurupo</a></h1>
<div id="sidebar"></div>
<div id="content"></div>
</div>

#container { margin:0; position:relative; }
#header { position:absolute; top:0; left:0; height:100px; width:100px; }
#header a { position:absolute; left:0; overflow:hidden; text-indent:-5000px; }
#sidebar { position:absolute; top:100px; left:0; width:100px; }
#content { margin: 0 0 0 120px; }

こんな感じなんだけど、#header aの部分が上手く機能してくれません。リンクとしてクリック出来ないようになってしまいます。
やりたいことは大体分かると思いますが、#header aにimageを埋め込んでタイトル画像＋リンクとして表示したいわけです。
ちなみにFirefoxで確認したところ駄目でした。IE6ではどうもtext-indentが適用されていない感じです。
なにか上手い回避方法は無いか、ご教授お願いします。

<h1 id="header><a>nurupo</a></h1>
　　　　↓
<h1 id="header"><a>nurupo</a></h1>

単に閉じ　"　忘れてるからじゃね？

>>162
ああ、すみません。実際のものではそういったミスは無いです。

リンクって。。。<a href="hoge.htm">のhrefはあるんだよね？
#headerにイメージを埋め込むということは、#headerにbackgroundで画像の指定もしてあるのかな？

それで、#header aにもwidthとheightは指定したのかな？display: block;もつけてやってさ。
aにposition使わなくてもいいと思うんだけど。marginとpaddingを0にしてやれば、
h1に入れ子状態でおさまってるでしょ。

まあ、aがボックスになってないので、そのままリンク範囲が-5000pxのかたなにあるからじゃない？

>>161
それだけじゃわかりようもない。
自分で設定したCSSをひとつずつ増やしていって
どこの次点でクリックできなくなるか検証してごらん。

>>163
text-indent:-5000px;なんだから、imgも飛んじゃうよ。

>filter
単に、W3C仕様に存在しないというだけで、特に問題は無い。

寧ろ問題があるとすれば、
WinIE5.5以降がこのプロパティを整理したのに、古い書式を使い続けたり、
そもそも、この程度の微々たる拡張を消化吸収できないといった、不勉強であろう。
（何かとんでもない勘違いをしているど素人がこのスレに常駐しているが、
　仕様とする何か(W3C勧告など)に何かを付加してベンダが特色を出す事は普通である。）

ただし、過去(初期のIE6以前)においては、決定的な問題があった。
ActiveXコントロールを無効、に設定していたら、黄色い三角の警告がブラウザ左下に出た。
製作者側が出来ることは、スクリプトの例外処理などで回避することに限定されるから、
この回避までを考慮する場合、とてもCSSスレに相応しい内容ではなかった。
しかし、この問題は既に過去の物とみなしても良いから、CSSスレの範囲で回答可能である。
見方を変えれば、回答可能なのに、他のプログラミング関連のスレに誘導するのは嫌がらせでしかない。

>>167
使っても問題ないが、問題は
ス　レ　違　い
だということだ。

>>168
スレ違いじゃないと懇々と説明したのだが、さすがだな、うぇぶでざいなあ、地の底を這うほどの低脳だ。

>>168
＞W3C仕様に存在しないというだけで、特に問題は無い。
どうして問題無いと言い切る？
IEだけの馬鹿仕様なんて語らなくても問題無い、の間違いだろ。
IE7では反省して半透明.pngに対応したのだし。

↑間違えた>>169へのレス。ごめんね>>168。

>>167>>169はCSSイケスレでファビョってた例のプログラマだろ、ほっとけよ。

そうなの？じゃあ野次馬してくる。さんきゅー。

ページ内の要素をCSSの周り込みで配置した場合、
フルブラウザ等のケータイでCSSが
適用されないようにする方法はあるのでしょうか？
ケータイも同じように周り込み適用されてしまうと
レイアウトが崩れるのでどうしたものかと悩んでいます。
どなたか良い方法があれば教えて頂きたいです。

>>174
media属性値で設定。

以下の記述で1番目のdd要素にアクセスする場合、class-nameやidをふらずに参照するにはどうすればよいでしょうか?

<dl>
<dt>W3C</dt>
<dd>技術標準化を勧める団体</dd>
<dd>MIT/LCS,INRIA, Keio-SFCによって共同運営</dd>
</dl>

>>176
CSS3のセレクタをサポートしてるブラウザなら:first-of-type擬似クラス使って
dd:first-of-type { /*何かスタイル指定*/ }
ってすればいいけどサポートしてないブラウザに向けても必要なスタイル指定なら
諦めてidやclassを振るべき

>>177
first-of-typeってそういう役目なんですね…Firefox 3.0でも未実装ぽいのは悲しいですが。
なんらかのjavascriptライブラリで使えればいいですが、現実的には仰るとおりクラス名をふった方が楽ではありますね。
ありがとうございました。

dt+ddでよくね？
これもIEはサポートしてな（ｒｙ

first-child擬似クラスでもよくね？
これもIEはサポートしてな（ｒｙ

frame要素の幅などをcssで指定するにはどうすればいいんでしょうか
試しに
frame,
frameset {
border: 1px solid #ff0000 !important;
}
などとやってみても効果がありません。
frame要素の属性はsrcとnameのみです

firefoxのユーザスタイルシートについてです

>>181
frame構造をcssでどうにかしようとするのは間違い。

>>181
基礎の前に概念から勉強してきてください・・・

>>179
あ、そうか。それでいいな…
dtとddの組が2つ以上ある場合:first-of-typeだと最初の組のddにしかマッチしないけど
dt+ddだと2つ目以降の組の最初のddでもマッチする
多分>>176はdt+ddの方が満足するんじゃないかな

>>178
>>176のHTMLの場合dlのfirst-childはdtだからdd:first-childってやってもマッチしないよ

filterだのframeだの
それなんてCSSだぜ？

>>184
ですね。隣接セレクタならモダンブラウザがサポートしてますし。
IE6は判別後、ie7.js（でしたっけ?）で何とかしたいと思います。
179さん、ありがとうございました。

>>186
>ie7.js
できればｋｗｓｋ

CSSデザインのすばらしい書籍を教えてくれよ

サルのやつとかかなぁ？

サル？
わからないよう
Zen Gardenの本とかあったね

>>187
ご存じだと思いますがこれです。
http://dean.edwards.name/IE7/
いちいちUA判別して、標準準拠モードにするのがめんどい人はいいんじゃないでしょうか。

<div class ="content">
<div class =content>

こんな風にクラス名を""で囲む理由はなんでしょうか？
ie6では問題ないようなんですが、
ほかのブラウザでは認識されなかったりするんでしょうか？

>>192
それはCSSじゃなくてHTMLレベルの問題。
数字だけならHTMLだとなくても問題ないが、
数字以外がある場合とXHTMLだとダブルクォーテーション必須。

因みにクラス名だけじゃなくて属性値全般そうだからな。

CSSを使っているとどうしても

<div>
　<div>
　　<div >
　　　<h1></h1>
　　　<p>
　　　</p>
　　</div>
　</div>
<div>

という風にDivが多段重ねになってしまうのですが、これは正しい使い方ですか？
それぞれのDivは別のClassまたはIDで使ってます。
あとh1はDivの中に入れていいのでしょうか？

>あとh1はDivの中に入れていいのでしょうか？
いい。
>という風にDivが多段重ねになってしまうのですが、これは正しい使い方ですか？
原理主義的には「正しくない」。
仕様的には「正しい」。
結論から言うと「好ましくない」。
デザインのためにdivを使いまくるならテーブルレイアウトから何も変わってないということ。

>>193
ありがとうございます

質問ですが、

Aの名前　　　→　Aの説明Aの説明Aの説明Aの説明
　　　　　　　　　Aの説明Aの説明Aの説明Aの説明
　　　　　　　　　Aの説明Aの説明Aの説明。
Bの長い名前　→　Bの説明Bの説明Bの説明Bの説明
　　　　　　　　　Bの説明Bの説明Bの説明Bの説明
　　　　　　　　　Bの説明Bの説明Bの説明Bの説明

という様なA、B、長さの違う名前があって、
その右にそれぞれ頭揃えで「→」があり、
さらにその右にそれぞれの名前の説明をインデントで
頭を揃えて表示させたい時、
みなさんならどの様にCSSでレイアウトしますか？

思いつきでfirstletter

>>196
ありがとうございます。
tableとbrタグからの脱却、中途半端になりそう・・・

>>175
遅レスですんません。
回答ありがとうございマス。
まだ良く分かって無いですが(ぉ
media属性値で調べて試してみます。

>198

dtにwidth指定してfloat。ddはpaddingとtext-indent。

>>198
dl-dt-ddで
dtをfloat、ddに左マージン、
dd::beforeでcontent:"→"か背景画像で→。

>>195
複数のclass指定とかできるから、もっとシンプルに出来るんじゃない？

CSSのためにclassを山ほど付けるのも結局テーブルから（ｒｙ

>>191
知らなかった、どうもどうもありがとう
IEは見捨ててたけどちょっと希望がわいてきた

>>195
間違いなくDIV病です

DIV病ってのは、ふさわしい要素型を無視して何でもかんでもdiv（とspan）
でマーク付けする病気じゃないの？

>>208
それはもうお亡くなりになる直前の病。
レベルはいろいろあるが、統一感なくデザインのためにdivdivするのもdiv病ではある。

CSSテンプレ設定方法が分からないです・・

人生諦めも肝心。

>>210
ttp://hp.vector.co.jp/authors/VA022006/css/adding-style.html
がんがれ・・

>>212
ありがとうございます（＾＾）

>>212
日本語が微妙におかしくて読み難いで砂('A`)

確かに日本語が痛いけど、一応内容はしっかりしてるからガンガレ。

>>214
おかしくはない。難しいだけで。

ゐない　とか違和感バリバリなんですけど

ゐない の検索結果 約 127,000 件中 1 - 10 件目 (0.12 秒)

>>198, >>203
ご回答ありがとうございました。
やっぱり、dl内でのfloatが妥当なんでしょうかね。

:beforeは使えたら便利そうなんですけど、
ブラウザの対応がちょっと悪くないですか？

大変参考になりました。
ありがとうございます。

あっ、まちがえた。
>>202, >>203　でした。

>>219
absoluteを使うやりかたもある。

>ブラウザの対応がちょっと悪くないですか？
モダンブラウザで対応してんいのはIEだけだから
数から言えば対応状況はいいはずなのにM$のバカ。

DIV病って言葉は知ってたから注意してるんですが、どうしても。
しかしモジラのトップページとか見てもDIVは三段までは使ってますね。
私は三段までを許容しようかと思いました。
今日はそんな感じです。

>>223
段組みしようと思ったら、div三重入れ子になる事もあるさ。
君がサンプルとして出したのはhnとpにdiv3個だ。
いくら例えでもそれはおかしい。

どこ見てんのよw

ぶっちゃければ、HTMLなんてどうでもいい
HTMLなんて見る奴は極少数の人間だけ。
ただしそれなりに正しく書かないとデザインしにくいのは確かだがな

SEOとか言うが、要は内容。
googleでメジャーキーワードトップに来てる奴のHTMLを見ればわかる。
音声ブラウザだのアクセビリティだの言う奴もいるが
そのまえに、そうゆう奴が来て楽しめるようなサイトを作るのが先決

だいたいHTML・CSSに拘ってる奴のサイトは糞内容が多い
それでアクセビリティだの言ってると笑えてくる

ttp://www2.tky.3web.ne.jp/~shio/gta/gtavc/missions2.html
このサイトの題名部分のように、文字の下に長い線をつけたいのですが、どうすればいいでしょうか？

ID出すの忘れてた

>>229
<hn>ほげほげ</hn>

hn {border-bottom:solid 1px #333;}

GTAか。一応微グロって書いといたほうがよかったんじゃね？
見たくない人もいるだろうし

表を作っているが、テキスト通りしたつもりなのに１行増やすごとに表の上の余白が1行増える。
(表が1行のとき余白が1行、表が2行のとき余白が2行、表が3行のとき余白が3行という具合に・・・。)
どうすれば余白が増えないようにできますか。

>>233
ソースは？

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

>>232
スミマセン、そこまで気がまわりませんでした。。。

>234
233です。ありがとうございます。ソースは次の通りです。

<html>
<head><title>下呂温泉ツアーのスケジュール</title>
<style type="text/css">
body { background-color: #bbffff; }
</style>
</head>
<body>
<table border align="center">
<tr><!--１行目、見出し-->
<th>日程</th>
　　<th>スケジュール</th>
</tr>
<tr><!--２行目-->
<td>1日目</td>
　　<td>新宿発→東名道→香嵐渓→下呂温泉</td>
</tr>
　 <tr><!--3行目-->
<td>2日目</td>
　　<td>【午前】下呂温泉→飛騨高山</td>
</tr>
<tr><!--4行目-->
　　<td></td>
<td>【午後】飛騨高山美術館→白川郷→中央道→新宿着</td>
</tr>
</table>
</body>
</html>

>>236
tr td thの前の余計なスペースを消す

>>236
追伸：全角だからＮＧ
半角もしくは、ＴＡＢならＯＫ

ていうかどこがCSSの質問？

>>239
まぁ気にスンナ

>>236
そのマークアップはどうだか。

<dl>
<dt>1日目</dt>
<dd>新宿発→東名道→香嵐渓→下呂温泉</dd>
<dt>2日目</dt>
<dd>【午前】下呂温泉→飛騨高山 </dd>
<dd>【午後】飛騨高山美術館→白川郷→中央道→新宿着</dd>
</dl>

ここは何スレだ。

>>241
別にtableでも変では無いけどな

あとは、矢印とかに実体参照使うとか？

HTML・CSSに拘ってるサイトの8割は糞。
一方、HTML・CSSに拘ってないサイトは9割が糞。

245が一番の糞

ちと配置について知恵をお借りしたいです。

メインコンテンツの幅はウィンドウサイズに合わせて可変。
サイドメニューは170px固定。
で、周り込みやサイズ指定のcssファイルを別に用意して
サイドメニューの右側or左側を切り替えたい。

ソースの並びは
・ヘッダー
・メイン［divで括った複数の項目を含む］
・サイドメニュー［divやらリストやらで括った複数の項目を含む］
・フッター

けどメインをウィンドウサイズにあわせて可変にしようとすると
どうしてもうまくいかないのです。
メインに
width／auto
float／right
margin-left／190px
でやってみたら
何故かサイドの中の項目が途中で千切れた…。
サイドの残りはメインの内容が終わってから表示されてる。

どなたか助けて下さい。長文スマソです。

>>247
これけ？
ttp://www.fsiki.com/archive/css-doc/float.html

>>247
ttp://www.geocities.jp/multi_column/practice/2column1.html#fixed-liquid
ここら辺参考

>>248
>>249
トンクス、それっぽいですな。
なぜかサンプルは正しく見えるのに俺のソースは上手くイカンが…。
なんか余計なソースが悪さしてるのか。
とりあえずがんがってみます。即レス感謝。

>>236のソースはｶﾞﾁに見えますが・・・

>234=237=238
ありがとうございました。解決できました。

<ul>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
</ul>

ul{
width:200px;
}
ul li{
height:20px;
padding-left:10px;
display:block;
float:left;
}

と、した場合Firefoxだと↓の様になるのですが

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

IEで表示させてみると↓の様になってしまいます。

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

liにwidthを指定せずにIEでもFirefoxと同様に表示させる事は出来ないのでしょうか？

それFxだって文字のサイズ変えれば・・・・。

HTML・CSSに拘る人々はHTMLの知識を先に身に付けてしまう為、
デザイン能力が大幅に欠けている場合が多いのは確か
それに加え無駄にアクセビリティを優先する為に子供の絵本のようなサイトを作る。

職場でデザイン力のない奴はゴミ同然

紙媒体でデザイン能力とやらを身に付けた人間が
Webデザインでどれだけ意識が違っててバカにされてるか知らないというのは
幸せなことだと釣られてみるテスト。

>>255はstricterを煽ってるのではないだろうか？
スレ違いなのに。

使いやすいサイトなら子供の絵本っぽくてもよいよ。

ある意味ひとつの完成系でもあるよな＞子供の絵本

簡単に言えば知識は後からでもどうにでもなるが
デザインする力はそうはいかないってことだな

ブログのテンプレート作ってるんだけど
HTML・アクセビリティに拘ると一般うけしないよな・・・orz

>>261
http://mb.blog7.fc2.com/

こことかそこそこアクセビリティに気使ってるけど、カッコよいと思うよ。
頑張れば両立できると思う。

別に、デザインとか、CSSなんて、どうでも良いよ。有益な情報を公開しさえすれば、後は自分でユーザーCSSかまして見るから。
あぁ、HTMLもどうでも良いや、有益な情報さえ公開してくれれば、自分でHTML書いて、ローカルで使うから。

いっそ、txt文で良いぞ。

宣伝のための壮大な前ふりとは思わんかった

>>261
はぁ？典型的な子供の絵本デザイン

アンカミス　>>262

質問スレで何やってんだ。
お前らまとめてどっかいけ。

まあ、HTMLマニア系サイトは役に立たないという事は無いと思うよ。

>>255とか>>260はデザイン＝設計がわかってないのかな。
設計には知識が不可欠なのに。

イコールではないにせよ
切り離せない関係ではあると思う。
感性はともかくWebデザインも知識ですよ、と。

設計＝構造
デザイン＝センス

<body id="test">
<div class="test2">
<p class="test3">ほげほげ</p>
</div>
</body>
という形のときに、#test > .test3　と書いたんだが使えなかった。

#test > .test3　や body > .test3　という指定は出来ないの？
.test2 > .test3　なら使えたんだが。ブラウザにもよるのかな、IE7で確認してます。
IE6対策で子供セレクタを使い始めたのだが、よくわからない…
検索しても「これ使えばIE6ハックできるよー」としか書いてないページばかりで。

HTML知識はあるがクールデザインがまったく思いつかない俺様が来ましたよっと

>>272
よく分からないなら止めとけ

>>269
デザイン事務所大手になるとデザインと設計は分業なんだぜ
要するに初めにラフデザインを考え、それをHTMLで再現する
HTML再現工程をデザインするとは言わない

HTMLを書きながらデザインして行くという素人的な方法をする人ならば
それをデザインするというかも知れない

>>275
design 辞書で引けよ…。

>>275
本気でそんな事言ってんのか？
服飾でいえば、大手はデザイナーとパタンナーが完全分業化してる。
小規模ならデザイナー兼パタンナーなんて普通。縫製まで1人でやってる洋品店だってある。
さて、どこのデザインが一番優れているでしょう？

>>277
プロフェッショナルなデザイナーと
プロフェッショナルなバタンナーがいる方

1.デザインに秀でているがHTMLが適当なWebデザイナー
2.デザインもそこそこ、HTMLそこそこのWebデザイナー
3.HTMLは完璧だがデザイン性に欠けるWebデザイナー
一般的に需要があるのはどれでしょう？

答え
1＞2＞＞＞＞＞＞3

悲しいけどこれが現実。

つか、普通、デザイナーって、HTML、CSSまで作るよなぁ…。
で、そこにアプリケーションを組み込む（サーバサイドプログラム）のが、プログラマで…。

>>279
そんなのミスリードじゃんw

>>253

<ul>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
</ul>


ul {
width:190px;
}

ul li {
height:20px;
padding-left:10px;
display:block;
float:left;
white-space: nowrap;
}

これでは駄目か？

>>272
IE7はもうそのセレクタに対応してるはずだが・・・
とりあえずFxで確認してみ、それでおＫなのにIEでは駄目だったら
またバグってると思われ。

>>272
それはpがbodyの子供要素じゃなくて孫要素だから子供セレクタにマッチしないってオチかもしれん。

今日からwebデザイナーになろうと思います。
でも難しいことや面倒な事は嫌いです。
どうしたら上手になりますか？
どんなことでもいいので教えてください！

google検索で、yahooという検索ワードで1番上に表示するようなサイトを作りたいです！

逝ってよし

>>286
また古い時代のレスだなｗ

とりあえず、何か1冊だったら、
Webディレクション標準ガイド　が割と良いかも。

>>272
子供じゃないじゃん

中央に横650pxで内容を置いてプラウザを小さくしても動くのは余白だけと言うようなCSSを
外部において一括指定出来るような代物を作りたく思い、数ある講習サイトを巡りながら四苦八苦してたのですがどうしても中央に寄せる方法が見つからず
検索をかけたらここのまとめサイトが見つかり大変助かりました。
その際、まとめサイトと其のリンク先を眺めていたのですが、ひとつのリンク先にTABLE要素の弊害と銘打って、レイアウトとしてボックス等を使うのは良くないとあったのですが
其のページの更新履歴が2003年1月となっており、現状でも出来るだけ使わない方がいいのか、或いは推奨されないならどのような代替要素があるのか教えていただけないでしょうか？

因みに使っているのは
body { margin-left: auto ; margin-right : auto ; width: ???px }
です

body {
color : #ffffff;
background-color : #000000;
font-family : 'MS PGothic',sans-serif;
text-align : center;
margin : 0;
padding : 20px;
}
.body {
font-size : 15px;
text-align : left;
width : 700px;
margin : auto;
padding : 0;
border-width : 1px;
border-style : solid;
border-color : #666666;
}
.text {
font-size : 15px;
line-height : 30px;
letter-spacing : 2px;
margin : 30px;
padding : 0;
}

上記のCSSを適用し、.bodyの中に.textを配置した場合、<br>を２つ挿入しないと空行ができないのですが、
これは何が原因なんでしょうか？

>>291
あああああああああ<br>
<br>
あああああああああ

改行で空行作るんなら普通に二つじゃね？
CSS関係なく

わからないので教えを乞いたいのですがっ

portfolioの背景がIEで表示がずれます。
absoluteを使っているので、左側リンクが悪さをしてバグを起こしているのはわかるのですが、そこから進みません
他にフッターの高さが異なるのも調べましたがわからないままです

理想はfirefoxで見たものなのですが、同じくIEで見せるための改善方法を教えてはいただけないでしょうか

http://sund1.sakura.ne.jp/uploader/source/up1997.rar
portfolio.htmlです

>>292
説明不足ですみません。

あああああああああ<br>
<br><br>　←こういうことです。
あああああああああ

>>290
ここはCSSスレだから、テーブルレイアウトは卒業しなさいと言いたい。
もちろんそれぞれ長所短所がある。
しかし個人サイトで骨董品ブラウザの事まで考える必要はないし、
tableってのはあくまで表を作る為の要素。

>>294
brなんか使ってるからおかしな事になる。
何の為にmargin入れてるんだか。

情報だけほしいのならば、テキストですよ。
http://www.ietf.org/rfc/rfc2396.txt

2年以上前に上書きされた文書なんて持ち出してくるなよ。
ってかテキストだと見出しに飛べねーじゃないか。
http://tools.ietf.org/html/rfc3986

>>295
わかりました。ありがとう御座います
取り合えずテンプレにまだ読んだことの無い資料も随分あったので全部読み直してから出直してきます。

>>298　参考に、お暇でしたら、[rfc3986]は、W3Cのどの仕様書のRefereceか教えてください。
一応、xhtml2.0のRefereceをあたってみたものの、[RFC3987]しか見当たりませんでした。
あっ、CSSと関係なくてすみません。

>>300
rfc3986でググったら一発で出てきた件・・・
http://www.ietf.org/rfc/rfc3986.txt

たとえばCSS2.1はRFC 3986を参照している。
http://www.w3.org/TR/CSS21/refs.html#ref-RFC3986
ついでに言うとすべてのURIはIRIとして扱うことができ、
すべてのIRIはURIに変換可能だ。

Working Draftの話だったんだですね。ありがとうございます。
>>298 >>301 With vest Regards.

>>303
別に草案に限らずともXML 1.0勧告（第4版）だってRFC 3986を参照してるぞ。
http://www.w3.org/TR/2006/REC-xml-20060816/#rfc3986
それからRFC 3986はRFC 1738を更新、RFC 1808、2396、2732を廃止してるんだから、
たとえ直接RFC 3986を参照していなくとも、これらのRFCを参照していれば
間接的にRFC 3986を参照してることになるだろが。

スタイルシートで背景をGrayにするとカーソルが文字と重なると
「｜」みたいにならずに文字の後にカーソルがうつるんだがどうすればいい？

>>305
本当のgray(#808080)じゃなく少し変えたり、若しくはcursor: default;。
しかし環境次第かと。

<div class="A">文文文文<div>
<div class="B">文文文文<div>
としたときにAの高さを固定してしまうと
firefoxで文字を大きくした時にAの文がBの文にかかってしまいます。
背景画像を見せたいのでAに高さを持たせたいのですが
（高さがないと逆に文字を小さくしたときに画像が隠れてしまうので）
IEと同じような挙動（Aの文字に合わせてBが下がっていく）
になってほしいのですがどうしたらよいのでしょうか？

>>307
文なんだったらdivじゃなくてpでやりなさい・・・。
min-height。

>>308
あ、いえ一応<div class="A"><h1>〜</h1><p>〜</p><div>とかには…。
じゃなくて、ありがとうございました！バッチリ解決です。
本当にありがとうございました！

>>306
やっぱり背景の色を変えてみて駄目ならカーソルいじるしかないようですね
ありがとう、頑張ってみます

リストマーカーに画像を使っています。

<div class="list">
<ul>
<li><a href="http://〜">AAA</a></li>
<li><a href="http://〜">BBB</a></li>
<li><a href="http://〜">CCC</a></li>
</ul>

.list li {
margin: 0;
padding: 0;
list-style-image:url(http://〜.gif);
}

これで問題なく表示されたのですが、CCCだけ違う画像を使いたいです。
classで指定するのはわかるのですが、スタイルシートの書き方がわかりません。
CCCのliにabcというクラスを指定して、

.abc li {
margin: 0;
padding: 0;
list-style-image:url(http:/〜.gif);
}

これだと表示されないようです。どこかおかしいでしょうか。

>>311
根本的にセレクタの書き方をわかってない。
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#class-selectors

うわ読みにく

>>313
>>215

最近のゆとり教育では正かな遣いも学ばないのか？

無駄な顕示欲だな。

最近CSSを意識してきたんだけど、
firefoxの事を考えると、CSSで段組するよりも、table使った方がいいのかしら？

世の中のブログはfirefoxで正しくみれる確率ってどれくらい？
IEが85％以上のことを考えると、firefoxの事は考えずにcss段組したほうがいい？

macのブラウザでは基本的にIEに近い？（見え方）

>>319
1. ×
2. ×
3. ×

↑>>319 ×　>>317 ○
もう寝る。。

>>317
FirefoxのほうがずっとCSS解釈は正しい。
むしろIEにも見せられるように作るととても大変。
基本Fxで作るとMac、Opera、Safariその他にも対応できる。
IEはハックで。

>>317
それはFirefoxでなくIEに対して言うべき
CSS解釈はIEが一番ダメ

>>311

<div class="list">
<ul>
<li><a href="http://〜">AAA</a></li>
<li><a href="http://〜">BBB</a></li>
<li class="abc"><a href="http://〜">CCC</a></li>
</ul>

.list li.abc {
margin: 0;
padding: 0;
list-style-image:url(http://〜.gif);
}

で出るかな？

リストの一番下って事ならulの背景画像にしてはどうか

俺のサイト(弱小）のアクセス解析では
IE6が近日中に70％を切りそうな物凄い勢いで減少してる

何が増えてるの？

そりゃもちろんIE7だろ。

ウチではIE6が50%を割って、携帯が30%超した。

text-indentを-9999pxにしてタイトルを飛ばしたりするのは問題ないの？

うちのサイトだと訪問者のブラウザの割合（％）はこんなもんだった。
ただし英語サイト。

2006年5月　IE 60.7　FF 28.0　Op 6.5　Safari 3.0　他 1.8
2006年9月　IE 58.9　FF 30.8　Op 5.3　Safari 3.1　他 1.0
2007年1月　IE 56.0　FF 33.7　Op 3.6　Safari 4.1　他 2.6

全体的には、IEとOperaが減って Firefoxが徐々に増えて
いる感じ。IEの中で見れば、当然IE6が減ってIE7が増えて
いる。

てか、Netscapeって絶滅危惧種だったのね、知らなかった。

>>328
一部で問題視されているけど、実際に問題があるかどうかはわからん。
SEO的に微妙ってうわさも。

まあ画像オフのCSSオンだと問題出る罠。

問題のあるない以前にキモい

は？

日本語でおｋ

は？

明朝で見せたい、という場合、
font-family: "ＭＳ Ｐ明朝",serif
としてしまうと、より美しいフォントを入れてそれを使っている人に対しても、ＭＳ Ｐ明朝を使うことを強要してしまうんですよね?
ということは、見る人の環境でより美しい明朝で見てもらいたいという場合は、そのフォント名がわからないので
font-family: serif
とするほうがいいんですかね?

>>336
というか、指定しなければいいんじゃね？

>>336
明朝体で見てください。とお願いを書いておく。w

と言う話は置いといて、serif で良いんじゃない。

OSXで明朝見てうはー綺麗じゃんと思って
XPで見ると orz

bodyの背景画像で、
画像1をヘッダ
画像2をメインでrepeat
画像3を固定でウインドウ下固定

を、CSSでできる？
body の background は 1つだけの画像しかさわれない？

○○○○○○○
■□□□□□■
■□□□□□■
△△△△△△△

みたいな上下数十ピクセルぐらいのヘッダ、フッタ画像がbodyのスタイルシートではれればいいんだけど。
frame使えって言わないでｗ

>>340
1つの要素に1つしか指定出来ないよ。
divで適当にわけりゃいいじゃん。

>>341

れすありがとうございます。
d, divですか・・・、ちょっと電子の海を調べてきます。

htmlメインだった世代なもので、
divといえば、<div align="center">ぐらいしか使った事ないです。

これはひどい

>>342
>>3-4に解説サイトあるよ。

>>336です。続きです。



一方、大多数の人は特にフォントも追加されていないWindowsの、特に設定も変更してい
ないIEでみるわけです。
font-family: serif
と総称名だけとしたとき、欧字は serifになるのですが日本語文字はゴシックになってしまいます。
これはIEのバグですか?

euc-jp で保存して表示させると欧字は serif で、日本語文字も期待どおり明朝になります。
Firefoxだとeucでもutfでも期待どおりになります。

>>345
IEに限らず、ブラウザの設定でserifは○○とか指定してるだろ。
総称ファミリのみ指定の時は、それが表示されるはずだが。

>>346
ええ、ふつうそう思いますよね。eucならそうなります。
でもutfにすると日本語だけゴシックになるんです。

CMS使ってて、utf以外にするのは別のところで問題が出てくるので非常に難しいんです。

>>347
じゃあバグなんでしょ。バグ報告でもしたらいい。
別に明朝だろうがゴシックだろうが、見る側はどうでもいい。
どうしても明朝でなければ表現出来ないというなら、
汚いwindowsのフォントなんかに頼らず、画像にすればいい。

>>345
それはIEのバグなんだか仕様なんだかｗｗｗ
とにかくなるよ、Shift-JISでも。EUCだとできるってのは初めて聞いたが。
諦めれ。

>>347
>じゃあバグなんでしょ。バグ報告でもしたらいい。
はあ。
私は普段IEどころかWindowsも使っていないもので、まったく詳しくなくて検索の要領もよくないのか、情報を見つけることができなかったんです。 >>345で書いたのは既知のバグではないのですか?

>>347
そういうものだから無理だろうな。
lang属性付きの<span>などを丁寧に配置して、レスポンスする前に、class="ascii" みたいな、IE6以前のCSS実装にも判ってもらえる何かを加えるしかないだろうな。
1日1万リクエスト程度の動的なページで、IEを名乗るUAに対して、これをやった事があるが、何の問題もなくサクサク表示されたから、まあ、大丈夫だろ。

>>351
おまえ1日1万リクエスト程度って言いたかっただけだろ

結局質問者はバグor仕様かって確認したかっただけ？
ふざけたヤツだぜ。

>>353
ふざけていませんが。
回避する方法があれば知りたいと思っています。
でも「諦めれ」という声もあり…

いままでのレスが気に入らないと？

>>355
いえ、レスはありがたく思っています。現実を知ることができました。
353を除く皆さんありがとうございました。

立つ鳥後を濁さず。昔の人はいい事言うよ。

http://fov120.net/
このサイトのように上に画像を表示して、その横サイズ分、下に線を引くにはどうすればいいのでしょうか？

>>358
ソース見れ。

>>358　見えないよ

しっかし、みんな意地悪レスしてんな。
だからCSSが難しいとか言われちゃうんだよ。
確かに勉強してないと難しいかもしれないが、
それよりも、教える側がもったいぶっているからダメなんだと思う。

後継者育てたいのか、自分よりも良いものを作る人間が嫌いなのか。
いい加減、正しいレスしなよ。

>>360
ソースが見えないとレスした時点でもうネタ以外のなんでもないことを（ｒｙ

このスレはそういうネタとウォッチャーによって正しい運営を為されております

馬鹿だな。cssなんて簡単。このスレの存在意義だって疑わしい。
まあテクニックとか小技とかそういうモンが必要になる事はあるだろうがな。
例えば358の質問の場合、お手本があるわけだ。ソース見るなんて勉強の基本。
わざわざ人に見てもらって解説が必要なようじゃ、基礎的知識が足らんという事だ。
基礎的知識補完についてはテンプレが用意されてる。

>>360
（´,_ゝ｀）ﾌﾟｯ

>>362　だろ。
自分もそう思う。簡単か・・といったら、テーブルに慣れてきた奴にとっては難しいらしい。
ただ、基本ってのがあるもんだ。Firefoxでソースを見る、ググる。いろいろ打開策はある訳だ。

ただ、このスレそのものはみんな意地悪だと思う。
自分が後輩に教える時、そんな言い方はしないぜ。
ここ見てみな、なんか勉強になるから。とか、このサイトのソース見て勉強しろとか、いろいろある訳だ。

>>364
そんな事を毎回一々ネットで説いて回っているお前の方が余程荒らしに近い。

>>364
お前ググレカスとかよく言われない？

>>363、>>365、>>366
俺、死ぬわ。
お前ら、頑張ってね。

うぜえ

>>367
一々ウザイレスしてんじゃないよ。いいからあと30年ROMれ。

そんな事言ってるけど、このスレ優しくなったぜ。
4,5年前オレはこのスレで質問した。テーブルレイアウトからcssに移行しようと足掻いてた時だ。
返って来た答えは、基礎を勉強しろと本を買え、だけだ。
当時はテンプレも他サイトもあんまり充実してなかったんだろうけど、
でもネット上の質問に対して、本買えは無いだろと思ったもんだ。
しかしハッキリ基礎不足を指摘された事に感謝している。

最初にIDを出していなかった私が悪いのですが、>>360は私ではありません。
ソースも一応見たのですが、勉強不足なせいか、どこがそうなっているのか分かりませんでした。

それから、私が原因で荒れてしまったみたいなんで、今回はとりあえず去ります。
ご迷惑をおかけして申し訳ありませんでした。

大体>>1に基礎は解説サイトとかで勉強しろって書いてあんでしょうが。
自分はテンプレもろくに読まないくせに、回答者を意地悪だのもったいぶっているだの。
挙句に「正しいレスをしなよ」だとさ。

>>371
そんなのみんな知ってるし、残念ながらあんたが原因じゃないから。

みんな、汚い書き込みしてごめんね。
でも、いい教訓になったろう。
たった一言で、どれだけ、人を傷つけるかっていう。
Ｗｅｂ制作担当だったら、そういうの感じないとね。顔知らないから何でも言っていいじゃないだろ。
創造する仕事だってこと、気づかないと。
たぶんこの後叩かれるんだろうけど。

>>374
お　前　は　何　を　言　っ　て　い　る　ん　だ

矛盾だらけの話をしつつ、あくまで自分は正義と主張するレスですかw しゅごいでしゅね〜☆

教訓にするようなことがどっかにあったか？

別に。

お前らホント性格悪いな。

>>371
http://css.uka-p.com/index_3column.shtml
これが参考になるんじゃない？

>>379
そんなレベルの質問じゃないと思うんだけど

>>379
君も相当な性格だよ。余計な事言わなきゃいいのに。
classやidの見方がわからないようでは、明らかに勉強不足。
出直して来るのが、本人の為だよ。
そんな回答してるって事は君も同じレベルなんじゃないか？
基礎を勉強しないと損するのは本人。いじわるではなく、本当にそうだから言ってるんだよ。

>>379
ありがとうございます！
パラパラッと見た感じでは私にも理解できそうな内容だったので、是非参考にさせていただきます。

>>381
一応一通りは勉強したので、classやidは分かります。
が、確かに勉強不足です。
ご指摘ありがとうございます。

＞classやidは分かります
だったらソース見てわかるだろうに。。

ここの住人は優しい
なぜなら、CSSを知らない奴に勉強の仕方を教えてあげてるじゃないか
いきなり答えを教えても、そいつの為には一切ならない。

CSSを数学として考えればわかりやすい。
1+1＝2と言うように足し算を知っている奴からすれば答えを出すのは簡単だ
しかし答えよりも何故そうなるかが重要なんだよ

Web製作板に沸く変な奴にはどうも似たような奴が多い気がする。

まぁ良い、次の質問を待つとしようじゃないか。

少し前までは、答えを考えるのも勉強になるような質問ばかりだった。
最近は悪いけど超初心者の質問がほとんどだし、スルーされるような質問にも
我慢強く答えてるなって感心するよ。
blog使う人が多くなったし、CSSの解説サイトも本当にたくさんあるから、
人に聞く迄もないのかも知れないけどね。

ここまで飛ばし読み

ここまで俺のターン

ここで一旦CM

いちばん簡単な解決法は
何でも答える初心者用のCSSスレを立てることだ。
そうすればここも需要がなくなり過疎糞スレになる。

次でボケて！

俺、このスレに足りないのは糞コテだと思うんだ！
だから俺がそれをやるよ！ばんばん質問するから皆ヨロシクな！

>>390
望み通り糞スレになったぞ。

左にメニューをリストで作ったのですがずれてしまいます。
なんか右側が大きくとられてしまって
回り込みができません。
リストで作らないほうがいいのでしょうか？

>>394
んなバカな。
なんか間違えてるだけだろ。

<body style="text-align : center;">
<div id="container" align="left">
<div id="manu"><img src="img/image08.gif" width="160" height="28" border="0"><br>
<img src="img/image13.gif" width="160" height="30" border="0"><br>
<ul style="list-style-type : none">
<li class="li-1">ああああとは</li>
<li class="li-1">いいいい</li>
<li class="li-1">うううううう</li>
</ul>
</div>
<div id="main">
えええええええ
おおおおおおお
</div>
</div>
</body>
</html>

#container{
font-size : 95%;
line-height : 150%;
width : 800px;
}

#main{
width : 600px;
float : right;
}

#menu{
width : 160px;
float : left;
font-size : 90%;
font-weight : bold;
color : navy;
background-color : #ffcee7;
line-height : 150%;
white-space : nowrap;
}
こんなかんじなんですけど・・・。
余白は設定していません。
メニュー右側が空白でおおきくとられていて
その下にメインがきてしまっています。
もう20時間ぐらい悩んでいるので誰か教えてください。

>>397
あたりのえだのくらっかー・・・・・
ちょっとあまりに根本の基礎からわかってないから、
本当に基礎の基礎から勉強してきたほうがいい。
ttp://hp.vector.co.jp/authors/VA022006/css/

あ、ﾇｹﾞｰショックで誤字を。はずかし。
ttp://hp.vector.co.jp/authors/VA022006/css/

あれ？
http://hp.vector.co.jp/authors/VA022006/css/

すまん、↑は気にしないでくれ。

>>397
<div id="manu">になってるぞ。
上手く行かない時は、各ボックスに色違いでborder付けてみると分りやすい。

>>402
うわああああ！！！！！
ハずかしいであう！！！
ﾏﾇｰを"menu"に直したらできました！！！
本当にありがとううございます（泣

>>398
ほんともっと勉強します。
わざわざすみません。
ところで教えてもらったサイト
漢字がすごい読めないです。

>>403
一番上の一番右に「略字に置換」ってあるお（ ＾ω＾）

<body style="text-align : center;">
↑一番のツッコミどころはここじゃないのか・・・？

<br>
↑一応これもつっこんどく

ツッコミ所満載なんだから、そっとしておいた方がいいんだよ。