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

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

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

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

【前スレッド】http://pc11.2ch.net/test/read.cgi/hp/1175155838/
関聯リンクは>>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でイケてるデザインサイト 39
　http://pc11.2ch.net/test/read.cgi/hp/1175152900/

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

>1
乙です

徹底したsage進行をしないと大半のスレが見えなくなるな。

>>5-7
fromdfj閉鎖してる

とりあえずサルベージしておいた。次スレ立てる人は修正して。
>>5
Q1
参考「IEとNNのBOXの計測方法の違いについて」
http://web.archive.org/web/20060528002639/http://www.fromdfj.net/html/border2.html
>>6
Q3
CSSを用いた段組の作成のコツ
http://web.archive.org/web/20060601072059/http://www.fromdfj.net/html/column.html
>>7
overflowを用いた擬似フレーム
http://web.archive.org/web/20060530012715/http://www.fromdfj.net/html/overflow.html

>>15
無駄だ。次スレ立てる人はスレを読まない。

>>126
おまえが立てろよボケ

IEでテーブルの空セルのボーダーを表示するやり方ってありませんでしょうか？

>>15
ところでfromdfjって閉鎖したの？

>>18
border-collapseをcollapseにする。
separateでできた例は聞いたことがない。

>>20
separateでやりたいんですよね。
やっぱり空白を入れて擬似的な空セルにするしか無いのかな・・・
ありがとうございました。

ttp://www.jtb.co.jp/e/wedding/option/album.asp
↑をIEで見ると地域選択の下の部分がおかしくなってるの、なんでだろう?

質問です。
<〇〇 id="" class="">
このようにした方がいい場合を教えて下さい。

私は
<〇〇 id="">
<〇〇 class="">
しか使ったことしかありません。
なので上記で指定する場合とはどんな場合なのかな？と思いました。

変な質問でごめんなさい。

>>23
idとclassの使い分けをお勉強しましょう
そうすればおのずと答えは見つかります

スタイルはクラスで指定したいけど
スクリプトとかでgetElementByIdしたい時とか

>>24 >>25
ありがとうございます。
こういうことでしょうか？
一つのHTML内で同じidは使えないので、
<div id="header">
<div id="wrapper">
などで使う。

classは同じスタイルにしたい複数のタグにたいして使う。

例)
テーブルで偶数段だけ色を変えたいとき。
<td class="line_a">

さらに、偶数段の内一段だけ特殊な効果にしたいときは、
<td id="" class="">
とする。

でよろしいでしょうか？

>>26
> テーブルで偶数段だけ色を変えたいとき
<td>じゃなく<tr>にclassだろ。

> 一段だけ特殊な効果にしたいとき
そういう場合って大概は一番上か一番下だろうから<thead>や<tfoot>でマークアップする。

あとここ ttp://deztec.jp/x/01/tips/web/w0045.html

>>27が>>26の答になってない件ww
質問をちゃんと読んでみれ

ちょっと無理やりな感じもするけど...

<table id="question" class="layout">
<tr class="name"><th>名前</th><td>○○</td></tr>
<tr class="date"><th>質問日付</th><td>yyyy/mm/dd</td></tr>
<tr class="value"><th>質問内容</th><td>yyyyy</td></tr>
</table>
<table id="answer" class="layout">
<tr class="name"><th>名前</th><td>○○</td></tr>
<tr class="date"><th>回答日付</th><td>yyyy/mm/dd</td></tr>
<tr class="value"><th>回答内容</th><td>yyyyy</td></tr>
</table>

で、質問と回答でほっとんど同じレイアウトなんだけど
色だけかえたいんだよねーって時にclassで幅とかマージンとか決めといて
#question.nameとか#answer.nameとかで色変えるとか...

>>29
それ<table>でやる内容じゃない
<dl><dt><dd>使え

>>29
それ典型的なテーブルレイアウトだろ。表としての用法じゃない。

<div class="lv2">
<h2>質問: どうしてなんだぜ？</h2>
<dl><dt class="from">お名前</dt><dd>名無し</dd><dt class="date">日付</dt><dd>yyyy年mm月dd日</dd></dl>
<p>本文</p>
<div class="lv3">
<h3>回答</h3>
<dl><dt class="from">お名前</dt><dd>名無し</dd><dt class="date">日付</dt><dd>yyyy年mm月dd日</dd></dl>
<p>本文</p>
</div>
</div>

すみません>>23です。
説明がヘタでご迷惑おかけします。

あたしが言いたいのは、
<div class="a">が複数あったとして、そのうち一つに特別な効果を与えたいときに、
<div id ="b" class="a">
にすればいいのですか？ってことなんです。
分かりにくくてごめんなさい。

わしはそれでええと思っちょる。

>>32
元々スタイル中心にidとclassを考えるからわけわからなくなるんよ。

>>32
考え方が間違ってる。何もかも忘れて一から勉強汁。

>>35
もしかして変なふうに覚えちゃってますか？？

>>32
IDは「太郎」「花子」といった固有のものの「名前」。
CLASSは「男」「学生」といったそのものが持つ「性質」。
だからidは一つしか使えないしスタイルも異ならせられるが、
classは同じ性質だから結果的にスタイルも同じになるというだけ。
スタイルありきじゃなくて逆なんだよ。

スタイル先に決めてdiv+class+id…DTP脳だな。これが普通かもしれんが。

普通じゃねーよ。

いや、見た目が先なのは普通だよ。素人にWiki使わせてみると分かるよ。
文字を大きくするために見出しを使うなんて当たり前、整形済みテキストは
当然枠をつけるために使う etc.
そういう人が中途半端にHTMLとCSSをかじったら、divにclassやidを振って
見た目を整えようとするのは自然だと思うな。確実に間違った方法だが。

>>40
最初に意味づけを教えないせいだろ。
見た目を変える方を先に教えたらそうなるし、
意味をつける方を先に教えたら逆になるんだよ。
おまえの狭い常識を敷衍させるな。

>>41
「素人」って書いてる人に「教えないせい」ってお前バカだろ。
よく読んでレスしろよ。
>>40は明らかに「素人＝独学者」の事を話してんだろうに。
それとな、「敷衍」の使い方間違ってるよ。
CSSじゃないが、間違った使い方なのに
正しいと思いこんで使ってしまう事例を自ら示してるじゃないか。
お前が間違って使ってるのは誰も「教えないせい」だろうが、
間違ってるってことを誰も「教えないせい」でもあるだろう。
>>40が言ってる「間違った方法」もそれと変わらん。

あたしは独学です。
まずhtml=テキスト、css=デザインということで覚えました。
なのでデザイン部分をid,classで指定していました。
どうやら間違えだったようです…
では、正しいｃｓｓの使い方を教えていただきたいのですが…
ｃｓｓに詳しい方教えてください。

勉強しろよ。ここは初心者向けスレじゃない。
テメエで努力出来ないヤツは去れ。

css
　body {
background-color:gray;
margin:auto;
width:100px;
}
　#menu {
float:left;
background-color:yellow;
width:50px;
}
　#main {
float:right;
background-color:red;
height:150px;
width:50px;
}

html
　<body>
　<div id="menu">abc</div>
　<div id="main">abc</div>
　</body>



この場合、#menuの黄色の背景色が途中で終わってしまい、とても不細工に見えてしまうのですが、この背景色を#mainと同じ長さまで引っ張ってくることって可能ですか？

>>42
独学者だって最初に学んだと言えば同じだろうが。
だいたい敷衍も合ってる、おまえが使い方知らないだけだろ。

>>45
「float 背景」でググれ。

>>47
ﾃﾞｷﾀｰ(ﾟ∀ﾟ)！！
ありがとうございました。

>>44
ここが質問スレという件について

>>46
スレ違いだからこれで止めるけど、
「独学者だって最初に学んだと言えば同じ」なんて詭弁だね。
「教えない」なんて言葉は独学者に対する言葉として不自然なのは明らか。
あと、本気で「敷衍」の使い方が合ってると思ってるならマジでヤバイよ。
「常識を敷衍させる」なんて使い方はしない。
嘘だと思うならググってみ。正しい使い方なら必ずヒットするから。

>>50
言い逃げで恥さらし乙

ﾂﾏﾝﾈ。

なんで皆こんなに馬鹿なん ?

おまえがバカだから感染したんだ。

>>53てnullだよな？

w3cのバリデータの使い方が分かりません。


検証したい文書(CSSと組み合わせたHTML文書の中に、
<link rel="stylesheet" href="test.css" charset="shift_jis">
の様に書いていますが、
それを
http://jigsaw.w3.org/css-validator/validator?uri=＜検証したい文書(CSSと組み合わせたHTML文書＞
のように検証してもらおうとすると、
「スタイルシートが見つかりませんでした。」
と帰ってきます。
直接cssファイルを検証すると「おめでとうございます！ この文書は正当なCSSとして検証できました！」となるのですが、


http://・・・・html

バカってすごいよな

>>56
今日はゆっくりと休んで、明日もう一回考えてみ？

お薬出しておきますね、三日分。

全部飲んでいい ?

>>56
普通にいけるんだが。
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.w3.org%2F&warning=1&profile=css21&usermedium=all

XHTML 1.0 Transitionalでサイトを作っているのですが、
項目の前後に■を付けようと考え
span.class名:before { content: "■" }
span.class名:after { content: "■" }
とスタイルを指定すると、
FireFoxだとキチンと表示されるのですがIE6だと前後共に表示されません。
最初から項目の文章に■を含める以外に方法はありませんでしょうか？

>>62
IEはcontent未対応だからJSで。

なるほど、java scriptを使えば出来るんですね。
しかしまだ勉強して無くてサッパリなんでとりあえずは最初から■をくっつけてごまかすことにします。
ありがとうございました。

>>64
だったら背景画像とか

>>65
どういう事かよく分からないのですが、■を画像として表示するという事でしょうか？
そうすると見る人が文字の表示サイズを変えた場合に■の大きさが変わらない事になりませんでしょうか？
全然違うことを指してるのでしたらすみません。

>>66
そのとおり
でも他人はそこまでおまけの文字の大きさが違うことなんか気にしてない

floatの回り込みについての質問です。

<div style="width:300px;float=left;">内容1</div>
<div style="width:300px;float=left;">内容2</div>　という書式だと
IE6.0では回り込みで表示されるのですが、
Firefox(2.0.0.3)では回り込みで表示されません(縦に表示される)。

どこが問題なのでしょうか？

>>68
float=left

>>67
確かにそうかもしれませんね。
■以外の要素にも応用出来るようにって意味もあるし、いずれはjava scriptで出来るようにしたいと思います。

java script切ってる奴はどうなるのかね ?

となると、目一杯互換性を持たせる為には文章内に■を文字として入れておくのがベターという事に落ち着くんでしょうか
webデザイナーさんの苦労が偲ばれる・・・

>>69
IE6だとそれで回り込むのか…。

>>72
意味のない文章を入れるなんて不条理ところに落ち着くんじゃない。
表示されなければされないでいいと割り切るか画像にしろ。

確かにレイアウトのために意味のない文章を入れるなというのは痛いところですね…
結局一番最初の:before :after + contentを入れることにします。

ボーダー使う頭も無いのか ?

>>75
四角でいいなら。
span.hoge {
border-right: 1em solid #000000;
border-left: 1em solid #000000;
}
ってツンデレな>>76が言ってる。

>>77
文字に対して四角もうちょっと小さめにしたい場合は？

>>78
1emを0.8emにでも0.05emにでもしたらいい。
というか元のレスにはfont-size指定がないからそんな意図はないととらえたんだが。

>>79
それだと縦長になっちゃうね。正方形のままで死体

見苦しい初心者的質問ですみません。基本的な所からおかしいのかもしれません。
.hoge{
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
text-align: left;
text-indent: 3em;
font-size: 14px;
line-height: 120%;
}
というスタイルシートでボーダーの中のテキストを数行表示させたくて

<div align="center">
<p class="hoge">
あいうえお、かきくけこ、さしすせそ。<br>
たちつてと、なにぬねの、はひふへほ。
</p>
</div>

こういう風にしたのですが、たちつてとからは
text-indentとかが適用されなくて左端にいってしまいます。
今は、たちつてとの前に空白スペースを入れていますが、みっともないので
何か良い方法はないでしょうか？
たちつてとの前に3em分の空白を入れたいです。spanを使ってもダメでした…。
<div>でボーダーを囲ってるのは、ボーダー自体を中心にもっていきたいためです。

>>81
text-indentの意味わかってる?
text-indentをpadding-leftに変更

それと
<div align=center>
ってorz
cssを1から勉強しなおしたほうが良いよ

>>81
<div align="center">
<p class="hoge">あいうえお、かきくけこ、さしすせそ。</p>
<p class="hoge">たちつてと、なにぬねの、はひふへほ。</p>
</div>
で.hogeのpaddingの代わりにdivのpaddingを使うようにして.hogeはpadding: 0;でよくね？
divの開始直後と終了直前に余白がほしいんならこれでもいいはず。
というかどうせならセンタリングもCSSで……なんて言うまでもないよな？

>>81
pxやめろ。特にfont-size。
line-heightは単位なしで。
改段落以外で改行を行うべきかもう一度よく考えること。

.hoge{
padding: 0.7em 3em;
border: solid 1px #000;
line-height: 1.2;
}

>>83
そうすると文字とborderがピッタリくっ付いちゃう感じ。
81をそのまま見てみると枠線と文字の間には空間があるので、そのようなデザインを意図していると考えられる。
そうじゃなくて<div>にborder？

>>81
複数行で余白つくりたいなら>>82、text-indentが一行目にしか効かないの知っててあ〜の行とた〜の行にインデントを加えたい(つまり、実際は二つの行が十分長い)なら>>83だな。
どちらにせよHTMLかCSSの基礎を理解してない恐れが……。
ま、ガンガレ。

>>76-77
まさにその発想は無かったって感じです。
ありがとうございました。

仰るとおり基礎がわかってないです…。
このスレデビューは早すぎました。
色々基礎を勉強してみます、そしてまた質問があれば次からは初心者質問スレいってみます。
こんな親切にアドバイスとご指摘ありがとうございますた！！

>>80
<strong class="hoge"><span>foo bar</span></strong>

strong.hoge {
font-size: 0.8em
border-right: 1em solid #000000;
border-left: 1em solid #000000;
}
strong.hoge span {font-size: 1.25em}

うまくいくと思うけど試してないし、成功してもバッドノウハウ的な雰囲気がする……。
少なくとも俺ならこんなわけの分からんコードを保守したくはない。

ちなみに何となく強調だけどli.hoge aだろうがa.hoge spanだろうが基本的にはOKのはず。

>>88
ミスった。li.hoge aだったらそのままだとliがdisplay: blockだから正方形にならないかも。なげやり過ぎてすまん。

つ【チラシの裏】

というか、そこらへんはサーバーサイドで文字コード挿入が一番まともな発想だとおもうが

>>91
あくまでborderでやるなら、って話。
それに■は見栄えかな、と思ったり。
それに普通の文字より小さくするなら、
<a href="#" class="hoge"><span>■</span>foo bar<span>■</span></a>

.hoge span {font-size: 0.8em}
とかしないといけなくなりそうだし。

なによりここは C S S ス レ だから。

つ【チラシの裏】
しつこいよおまえ。

チラシの裏へ誘導されるような内容なんでしょうか？
スレの内容からも出てる質問からも外れてないと思うんですけど

span厨って確認種？
新種？

>>94
半　年　R　O　M　れ

<select></select>の中に<option>要素が大量にある場合、
プルダウンが異常に長くなり、画面内に収まりきらなくなった場合は、
プルダウンの中にスクロールバーが発生しますが、

画面内に収まりきらなくなる前にスクロールバーを発生させて、
プルダウンの長さを一定に抑える事って出来るのでしょうか？
動作環境は　WindowsXP SP2　の　IE6 SP2 です。
よろしくお願い致します。

>>97は前に初心者スレで答えもらってたんで放置で。

>>98
初心者スレ見たら同じ質問があった、ちゃんと調べて無くて申し訳ない。

（連載）第５回：PNG（ぴんぐ）——敢えて言おう、カスであると。
http://koujinz.cocolog-nifty.com/blog/2006/10/png_5be9.html

ブロック要素として、左右に小さい画像を配置して、その間に文章を置くレイアウトを考えてます。
全体の幅は固定、高さは不定で
中央のテキストの幅も固定、高さは文章量と文字サイズにより可変に
左右の画像はその変わる高さに合わせて常に垂直位置を真ん中に持って行きたいんですけど、

左右の画像をそれぞれdivで括ってフロートで左右に配置、高さを100%にしてimg要素の垂直位置をmiddleに、
中央のテキストもdivで括って幅を左右の画像の間に収まるように設定して左右のマージン自動で中央揃えにする事で
左から画像、テキスト、画像と等間隔に並ばせる事は出来たのですが、画像の垂直位置が上揃えから動いてくれません。

レイアウトの問題で表として意味があるわけではないのでテーブル要素を使うのは避けたいと思ってるんですけど
最初に書いたようなレイアウトにするにはどうしたらいいでしょうか、ヒントだけでもいいんでよろしくお願いします。

っと、sage解除忘れてました。

縦中央になんか持ってくのだけは避けてくれ。以上。

>>101
>7

>>101
左右の画像は一枚に結合。
文章のブロックに背景画像で配置。
その際にbackground-positionをcenter centerに。
文章のブロックにpaddingで画像が見えるようにする。

試してないがどうだろうか？

なんか色々勉強不足みたいなんでもう少し試行錯誤して出直してきます・・・

>>105
後出し情報で申し訳ないんですけど、その画像はアンカー貼るつもりなんです。
背景にする事自体考えつかなかったので書き忘れてました、すみません。

ググったら前スレにあったらしいのですが、dat落ちして読めません（ToT）(前スレ>>799)

<object>でhtmlを埋め込みした時、IE7だけ影付きのボーダーが出てしまいます。
border: 0;　にしてあります。カッコ悪いので消したいです。どうか教えてください。

>>107
読み込まれる側のhtmlのborder消してないというオチと見た。

>>108さま　ありがとうございます。こんな風にしてあるのですがダメなのです(ToT)

●読み込まれる側（osirase.html）
html{ border: 0; }
body{ border: 0; }
.box{ border: 0; }

●読み込む側（index.html）
object {
border: 0;
scrolling: auto;
padding: 0px;
}

　★htmlは
　<object data="osirase.html" type="text/html" width="90%" height="95%"></object>

>>109
それで普通は消える。
それ以外のところを間違ってるんじゃないのか。

あ、ちなみにそれだとIE以外で悲惨だからな、高さ。
IEはバグってる。

この前から同じ事ばっか聞いてるアホだろ。放置汁。

>>110 >>111　ありがとうございます。
他のところのチェックをしてみます。

>>112 え？　今回初めてです。
でも前スレにあったようで、失礼しました。

やっぱりFAQがいる。

スレ内検索でわかるでしょ。調べりゃわかる事だしね。

bodyにborderを指定するとスクロールバーの外にborderされるんですが
スクロールバーの内側にborderさせる方法はないでしょうか？

書き忘れましたが、WinIE6です。

>>118
標準モード。超基本。
最低テンプレ読んで勉強して来い。

>>100
痛々しい

センタリングについて質問です。
テンプレのサイトを読んだんですがわからない部分があり、例えばここの例で
ttp://www.koikikukan.com/archives/2006/10/24-003838.php
<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>
とあるのを、
<div id="wrap">
<div id="test"><p class="test2">[Example]</p></div>
</div>
としたく、
#wrap {
text-align: center;
}
#test {
text-align: center;
border: solid 1px red;
width:80%;
}
.test2 {
margin-left: auto;
margin-right: auto;
width:50%;
text-align: left;
border: solid 1px blue;
}

こうしました。というのもtest2だけではなくtestもセンタリングしたいんです。しかし
>誤って
>#test {
> text-align: center;
>}
>というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。
とあるので、text-align: center;を2つ重ねても大丈夫なのか不安になってしまいました。
自分のサイトはFireFox使用者も多く他のブラウザの表示も気になるので。
これはやはり間違ってるでしょうか。

>>122
text-alignの仕様くらい理解してろ。
ttp://www.mozilla.gr.jp/standards/webtips0004.html

酢まんこの問題は
mimeタイプ指定が原因だった。
サーバーの設定が変わって、cssのmimeタイプをサーバーが示してくれなくなっていた。

<link rel="stylesheet"・・・に、
type="text/css"を加えることで、今まで通り検証してもらえるようになった。

質問です。スタイルシートでマルチカラムをつくり、
枠線で全体を囲みたいのですが意図通りに表示されません。

・スタイルシート
#container { width: 800px; border: 1px solid #000000; }
#header { width: 800px; }
#box { width: 800px; }
#contents { float: left; width: 600px; }
#sidebar { float: right; width: 200px; }

・BODY
<body>
<div id="container">
<div id="header">header</div>
<div id="box">
<div id="contents">contents</div>
<div id="sidebar">sidebar</div>
</div></div>
</body>

上記をブラウザで表示すると、IE6だとbox以下も含む全体を枠線で囲ってくれるのですが、
Firefox2.0だと header 部しか囲ってくれません。原因は何でしょうか？
段組はここのテンプレート通りに作成しました。
http://css.rakugan.com/css5.html

>>125
全　然　テ　ン　プ　レ　ー　ト　の　通　り　じ　ゃ　な　い　。
そのせい。

全然でもないだろ。

>>126
追加したのはwidthとborderだけなんですが…　widthとborder外しても駄目でした

>>128
コピペしろよ。
追加じゃなくて足りない。

>>129
おお、ありがとうございます。フッター部も必要なんですね。失礼しました

そこむずすぎるｗｗｗ

まちがえた

MacのIE5で変な横スクロールバーが出来てしまいます！
これってどうしたら良いですか？

MacIE5は切り捨て。

>>133
まともに作れば出ない。
おまえがまともに作ってないだけだろう。

<body style="width: 400px">
<h1 style="background-color: #ecca8f; color: #000000">奈良公園の鹿</h1>
<p><img src="gazou-1.JPG" style="float: left">…</p>
</body>

幅が40opxにならないのはなぜ?

ﾎﾟｶｰﾝ（ＡＡ略

これ↓やってもファイル選択(<input type="file">)だけ
適応されないんだけど、どうすれば出来できる？

input {
border:1px solid #6A6A6A;
width:250px;
}

>>136
無知を知れ

>>138
fileは物凄く機能に依存してる部分だから
効かない指定が多い。

>>136
ﾜﾛﾀ

136ｶｺ(・∀・)ｲｲ!

奈良公園の鹿といえば、吉永小百合の名曲のフレーズ

floatに関しての質問。

<float1><float2>
<clear>
<float3><float4>　(タグとは違います)

という配置にしていますが、
<float3>内のリンクをクリックすると、<float3><float4>が中身ごと少しだけ上に移動するんですが、
これって解決方法ありますか？

説明べたですいません。

>>144
単に作り方が悪いだけじゃ。
普通はならない。

>>145
つまんねえミスしてるだけ。

レス番間違えるぞ。

>>145-146
すいません。どこが間違っているのでしょうか？

ソース貼ってもらわないと何とも。
バグ辞典とか調べてみたらどうだ

>>148
エスパーじゃないのにそれだけでわかるかよ。
CSS全部消した状態で一行ずつ増やして、
その都度確認してけばどこが悪さしてるのかわかるだろ。
自分でそこまでは切り分けろ。

>>148
float3のheight

lineheightが%とピクセル混合の時もずれたりしないっけ

フロートをクリアする場合どのようにすれば良いでしょうか？
<br class="clear" />
<div class="clear"></div>
など試したのですが、IE6だと反映のされ方が変わります。


<div id="header">・・・下10pxの余白
<div id="title"></div>・・・左寄せ
<h1></h1>・・・右寄せ
<フロートをクリアする>
</div>

<br>の場合は下10pxの余白がなくなり
<div>の場合は下10pxの余白＋1行スペースが空きます。

FireFoxの場合は問題ありません。

>>153
まずmargin、paddingリセットしてからおいで

自己解決しました。
headerの横幅を指定した所うまくいきました

>>154
お騒がせしました

class="clear"とかよ、id="title"とかよぉ。やりきれねぇんだよ俺ぁ。
だれか一杯おごってくれ。

ほれ　旦

飲みすぎるなよ。

ttp://www.cssplay.co.uk/menu/lightbox.html#flower3

このページのギャラリーがジャバスクリプトを使わずにCSSのみで制作されていると
紹介されていたのですが、本当でしょうか？

>>158
疑う前にJS切って表示してみろ。

質問させてください。
IE6にて透過PNGを使用するのに
filter（AlphaImageLoader）で表示させたいのですが、
この設定を同一html内、もしくは同階層の外部CSSファイルに設定・実行した場合には
うまく表示されるのですが、
同一階層に作ったフォルダ内に外部CSSファイルを入れてしまうと、
表示されなくなってしまいます。
（このとき当然ですが、PNGへのパスは変更しています。）
これは仕様なのでしょうか。
どなたかご存知の方、ご返答ください。

宜しくお願い致します。

>>160
htmlからのパスが必要。

でもそんなもの使ってると　マ　ジ　で　I　E　落　ち　る　ぞ　。

>>161
とても早いご回答ありがとうございます。

> htmlからのパスが必要。
という事は、どの階層に外部CSSを置いても
PNGへのパスは変わらないという事なのですか？


> でもそんなもの使ってると　マ　ジ　で　I　E　落　ち　る　ぞ　。
そ、そうなんですか？？
でもIE6で透過させようと思ったら
それしか方法がないですよね・・・？

>>162
違う。
呼びされる側のhtmlファイルからのパスが必要になる。
だからそれを使うcssファイルは外部にして共通にしても何の意味もない。

それしかってこともないけど、どれにしてもIEでやろうとすると
酷い手段で経由するしかないからリソース食いまくり。
でもたいていの場合透過っぽく見せた透過じゃない画像を用意すれば事足りる。
本当に冗談でなくリソース食うから、プラスhoverなんかやると弱いマシンだと一発で死亡。
一度構成自体を考え直した方がいいよ。
ちなみに1色の透過pngならそのまま表示できるよ。

>>159
なるほど。
ありがとうございました。

>>163

そうですか・・・。残念です。
特定の画像の上に、複数ページでそれぞれ違った透過画像を乗せたかったので、
ジャギーが出なく楽に作れるこれはうってつけかと思ったのですが。
透過っぽく作ろうと思ったら、その背景を含めた作り方をしないといけないですよね。。。
（要するにその手間を省きたかったワケですが・・・）

ちなみに、このfilterを含むものを（IE6では_background:none;としておいて）
他のブラウザで表示させた場合でもやはりリソース食うんでしょうか。
一旦読み込むので同じなのでしょうかね。

>>165
透過なのか半透明なのかはっきり汁。

filterの対応状況くらい自分で調べろ。

>>166
えっ、透過と半透明って違うんですか？
すみません、特定の色だけを抜いたものではなく、
アルファチャンネルを持ったPNG（半透明）についてです。

>>166
ですから、IE6での対応についてです。

>>165
IE6以外は半透明PNGは単に画像として表示されるから問題茄子。

>>168
透過と半透明は違うと>>163も書いてるじゃろ。
256色の8bitPNGで1色透過ならIE6でも対応してるが
PNG24/32の半透明PNGは非対応。

あ、ちなみにIE以外だったらAlphaImageLoaderも何も使わず
他の画像と同じように扱えるぞ。

>>168
＞ですから、IE6での対応についてです。
『ですから』、調べればわかる事だろ。ヤル気ないんだな。
大体filterなんてCSSじゃなかったんだ。
CSS3で一部導入されるそうだが何を今更だし、更にUA次第になっただけ。

>>169
>>170, 171
同じ方でしょうか？
そうですね、IE以外では半透明を使えるけど、
IE6の為だけに、
background:url(aaa.png);
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='aaa.png', sizingMethod=scale);
としてカバーしたかったんです。
（シェア的にはIE6無視出来ないなって。。。）
一色透過だとなんだかガビガビになっちゃうし。

>>172
いや・・・、やる気はあるんですけど。。。
元々、このAlphaImageLoaderを設定した外部CSSを
他階層に置くと表示されなくなるのは仕様でしょうか、
というのが一番最初の質問だったワケですが、
「透過」か「半透明」かという解釈違いのあたりから論点が変わってしまいました。
（階層の問題についてはいくらか調べたつもりだったのですが、
答えに行き当たりませんでした）
しかし、いずれにしても皆さんあまり推奨されておられないようですね。

色々とご助言いただき、ありがとうございました。

>>173
手間を省きたいだけなんだったら
AlphaImageLoaderを使って閲覧できないIE者のシェアは無視しない方がいい、
結局透過っぽい画像を別に用意したほうがシェア的には当然いい。

>>174
そうですねぇ。
手間を省きたいのと、その方がキレイだろうと思っての事でしたが、
安全策を取ります。
どうもありがとう。

h1 { color: #000; text-decoration: underline; }
h1 span { color: #888; text-decoration: none; }

<h1>タイトル<span>備考</span></h1>

spanにも#000の下線が付いてしまうんですがこれを表示させない方法ってありませんか？
また、それが無理でしたらspanの下線の色だけでも変えたいんですが可能でしょうか？
ブラウザはIE6.0で表示させます

>>176
<h1><span class="hoge01">タイトル</span><span class="hoge02">備考</span></h1>

WinIE
親要素のtext-decorationの効果を子要素で解除できる(5.x/6.0)
ttp://cssbug.at.infoseek.co.jp/detail/winie/b040.html

>>177
うわぁー親要素じゃなくてそれぞれにtext-decorationを指定すればよかったんですね。
恥ずかしながら思い付きませんでした。ありがとうございます。
>>178
これはa要素の下線を解除できるという事でしょうか？
下線はspanよりemの方が良さそうですね！emで装飾させることにします。
教えていただきありがとうございました。

意味ない方法だけどspanのアンダーラインを白にするｗ

つか、備考はh1じゃねーだろ。

といっても、適切なブロック要素がみあたらないと思うよ。
div使わないとした場合、pじゃないし。

備考を「サブタイトル」と考えればheadingのなかにspan/emあたりでいいし、
タイトルに対するコメントだからタイトルに含まれないと考えた場合
<h1 class='my-nobreak-heading'>foo</h1>< (block element) class='annex-comment'>bar</(block element)>
として、h1のbreakを外すってぐらいか

>>182
馬鹿だろｗ

>>182
こだわり過ぎてとらわれ過ぎてわけわかんなくなった典型。
今まで覚えたことを一回全部忘れたほうがいいよ。

まだCSS囓りたての者です。
ページのグラデーション背景の両端に影をつけたいのですが
（例）ttp://advanced-gear.net/
↑こんな感じで。

が、下のページなどを参考にしてはみたのですが
グラデーション場合の末端からの背景のy軸へのリピートの仕方がわかりません。
CSSでは一つのボックスで2つの背景は選択できないのですよね。
さんざん外出かと思いますがご教授願えますでしょうか。

■背景の影のつけ方について
ttp://www.kazu-style.net/archives/2005/12/post_40.html

みてないけど適当に答える。
グラデの時は画像をabsoluteで強制的において表示させてる

ん？備考がh1じゃないというのに返答しただけだが？
なにがおかしいんだ？

>>185
半透明PNGを使ってるだけ。

>>187
おかしくないよ。
そいつ（ら）は相手にしないほうがいい。

>>186
>>188

ありがとうございます。
半透明のPNGでいけそうです。
それと「absolute」とはどんな手法なのですか
すいません。。勉強不足なもので。

>>189
キーワードくれたんだからググれよ。
でも>>185で使ってるのは
background-attachment: fixed;
だけどな。

あのなぁ、こんなのって具体例があるならそのサイトの通りやればいいじゃんか。
何でわざわざ聞くんだよ。

>>189
普通にその背景がグラデーションと一緒に動かないようにするだけ。
で、半透明PNGの是非についてはちゃんと上を読めよ。
はっきり言ってそんなデザインするほうがアホらしい。

皆さま、ご教授ありがとうございました。
へたれながら頑張っていきますです。
感謝感謝...

IE6の標準モードで画像を背景左下に固定させたいのですが
何故かスクロールしてしまいます
body {
background-image: url('hoge.jpg');
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
background-color: #FFFFFF;
}
と記述してます
Firefox1.5.09、ネスケ7.01、opera8.53では意図した通りに表示されます
何が原因か解る方いたらご教示ください

>>193
他にもoverflowとか余計な指定してんじゃないの。
関係ないけど、urlのカッコ内にクォーテーションは不要。

overflowはどこにも指定してないです
もう何が何やら

>>195
自分で>>193に書いたソースで確認するのが当然だろ。
何が何やらはこっちのセリフだ。

>>193
そのソースコピってfixedになることは確認できたから、
問題はそこじゃない部分。htmlにでも何か指定してね？
あとurl('hoge.jpg')は対応してないブラウザもあるようだから
クォーテーションは外してurl(hoge.jpg)のほうがいいかもしんない。

htmlに個別指定はしてないですが
* {
font-family: "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000000;
line-height: 1em;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
}
と書いてます
自分でも更の状態で193のbodyタグだけ指定したら固定されました
問題のhtmlは'　"　何もなしも試してみましたが、どれも駄目でした
何かの指定が間違ってるとは思うのですが、どれが悪いのか見当がつきません

>>198
だからどこかで何か間違ってんだ。
部分的にソース出されてもわかるわけないし、全ソース出されても迷惑。
1つ1つ指定消して、自分でやるしかないんだよ。
＞問題のhtmlは'　"　何もなしも試してみましたが
関係ないって言ってるだろ。間違いを訂正してやっただけ。試すじゃなくて直せ。

>>198
クォーテーションは>>199の言うとおりIEには関係ない。別のブラウザ用。
とりあえず全部外して>>193だけのCSSにしてから、一つずつ追加して
その都度調べれば切り分けができるだろ。

CSS勉強始めて4日目でどう直していっていいのかも
わからなかったので、助言助かりました。
ありがとうございました。やってみます。

すいません、質問させてください。
今、フレームサイトのnoframes内のコンテンツに関して作成しているのですが、
ブラウザ上で、noforamesの内容を確認するには、どうすれば良いのでしょうか。
「フレーム　オフ設定」とか色々調べても、noframesの解説ばかりで、
フレームをオフにする設定がブラウザにあるのか、フレーム未対応のブラウザも
見つからず、とても困っています。

noframesのﾀｸﾞ内に、コンテンツを作成することは、どこまで可能なのでしょうか？
簡易的な文章で、リンクを使用していたり、フレームサイトの説明だったりが多いのですが、
[hx]を利用したり、フォームを設置したり、CSSを使用したりするのは、
問題ないものなのでしょうか？

すいません、htmlの質問がメインとなってしまいますが、
書き込み場所が、わからずに、こちらに書き込ましてもらいました。

どなたかわかりませんでしょうか？

>>202
私も<noframes>を表示するしないの設定があるブラウザを知らない。
故にフレーム不可のブラウザでの確認だけで十分かと(Lynx等)。

知ってるとは思うが今日フレームを扱うのは難しい。

>>202
frameの使用できないブラウザでは現行CSSにも対応してない。
hxが何だかわからないがhnの見出しのことなら可能。
というかnoframe内のbodyには
呼び出し先ファイルのhtml（メニュー）をそのまんまコピるのが普通。

で、スレを間違えてないか。

>>203
さっそくのご返事ありがとうございます。

Lynxですね、ありがとうございます！！
はい、フレームは、私のサイトなら使ってないです^^;
既存サイトの改善みたいな感じの内容でして。

本当、ありがとうございました。
助かりました！！

>>203
あ、忘れてた。
OperaでShift+F11を押せ。

>>204
ご返事ありがとうございます。

なるほど、CSSは不可だけど、htmlのソースを使用するぶんには良いのですね。
スレ違いとわかっていながら、ご返事ありがとうございます。

スレ違いの書き込みに回答をくださった方、
本当たすかりました。ありがとうございました。

203じゃねえ、202宛・・・

>>204
>frameの使用できないブラウザでは現行CSSにも対応してない。
携帯は、どうなんだろうか。

>>206
スモールスクリーンはフレーム内を繋げて表示するだけで
noframesを表示はしないかと。

>>209
横フレームを縦に表示する。

FirefoxとOperaはabout:config(opera:config)で
フレーム無効にできる

おまえらスレ間違えてね？

みなさん、ありがとう。
about：configの機能、はじめて知りました。
すごい設定項目で、Frame無効の場所探すの大変そうｗ
でも、ありがとう。すごい勉強になりました。

>>212
すいません、もともと私の質問からです。
ほんと、スレ違いな内容の質問で申し訳ありませんでした。
回答を下さった、優しい方の気持ちをくんで、ここは、私の責任ということで
お願いします。

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

ｷﾓ

大した知識もないくせいにいちいちケチつける方がどうかと思う。

最近でケチつけてる風のレスは>>215くらいしか見当たらない件。

ケチケチすんあよ

打った文章で噛むなよ。

そんなケイケチすんあお

質問です。

<DIV style="position:absolute;left:00px;top:00px"><IMG src="xxx.gif" /></DIV>
<DIV style="position:absolute;left:10px;top:10px"><IMG src="xxx.gif" /></DIV>

のように２つの画像間を結ぶ線を表示したいのですが、
スタイルシートで２点の座標を指定して直線を描画することは可能でしょうか？

もしくは他に実現方法はありますでしょうか？

2つの画像も線も、一つの画像にまとめてしまえ

>>220
画像間ったって、画像のどの点を線で結びたいのかわからん。
その変なソースでは画像間が縦横10px離れてるだけだし、画像自体がかなり小さいとしか思えず、
だったらまとめて1個の画像にすれば済む話。

かぶったスマソ。。

>>221,222
結ぶ２点の座標がデータによって変わります。
そのため線と画像をまとめた画像にすると可変データへの対応ができません。

画像と線をまとめた画像にする案も考えましたが、
前提として直線表示が可能か不可能をお聞きしたかったのです。

自由直線（垂直／平行線以外）の表示は不可能と考えた方がいいのでしょうか？

すいません
解決しました。

スタイルシートでは垂直・平行線のみと考えていいようです。
他手法での見当がついたのでそちらで実装しようとおもいます。
失礼しました。

今度はデータだって。アホだな。

<div class="**">
〜〜〜
<h1>title</h1>
<span class="**">*****</span>
〜〜〜
</div>

この様な感じでベースレイアウトを記述したclass内に全文章を入れているのですが、印刷時、複数ページになる場合に1ページ目しか印刷されません
大外枠のclassを外せば前ページ印刷可能なのですが、他cssを全て治さなくてはいけないのでできれば他の方法で解決できないでしょうか

>>227
全く以て日本語がおかしくて理解不能だが、
要するにprintメディア用CSSを別に書けよということでFA。

MacのIEでCSSのオーバーフロー（Dreamweaverから適用したもの）
が表示されないのですが何か対処方などありますか？
なるべくインラインフレームは使いたくないのですが。
ご教授願えませんでしょうか。

>>229
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2001/10c.html#d25n04

ここの奴ら使えないの多いな

ﾌﾟｯ

>>230
感謝でございます。

>>231,232
無知ですんません。

一つのCSSファイルの中に書かれた複数の定義を個別に反映させるのってどうやるの？
例えば一つのCSSファイルの中の記述範囲でA、B、Cとあるとすると
範囲Aの記述はa.htmlに反映、範囲Bの記述はb.htmlに指定みたいなイメージなんだが

>>234
a.htmlにはaというid、b.htmlにはbというidをルートに付ければよかろう。
ただしそれを共通外部CSSに持って行く意味は何もないが。
複数ページで性質として使うんだったら別ページでも意味的にclassでな。

>>235
thxたすかりました

onmouseoverでテーブル内の背景色のチェンジをしてonClickでテーブル内の背景色を固定にしたいのですが、
試行錯誤したんですができませんでした。

下記のソースでは、onClickした時に、背景色は白に一瞬変わりますが固定にならずに黒に戻ります。
これをonClickした時に白で固定するのはどうすればいいでしょうか？

ブラウザは、IE6.0で動作確認をしております。
アドバイスお願いします。

<table width="100" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000">
<tr>
<td width="100" height="100" align="center" onmouseover="this.style.backgroundColor='#666666'" onmouseout="this.style.backgroundColor='#000000'" onClick="this.style.background='ffffff'">
<a href="#">hogehoge</a>
</td>
</tr>
</table>

>>237
>onmouseout="this.style.backgroundColor='#000000'"
って自分で指定してるだろうがw

>>238さんレスありがとうございます。
onmouseout="this.style.backgroundColor='#000000'"を削って動作確認した所

クリックしたあとの固定は白ではなくて
onmouseover="this.style.backgroundColor='#666666'"
#666666になります；；

何かわかりましたアドバイスお願いします。

ゆっくり考えてみ。#666666になるのは、どんな時？
その時に白なら色を変えないようにすれば良い。

っていうかスレ違いだよ。

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

どういた！しまして！

今更だけど
IEの独自解釈をなくすことができないのかな？

独自解釈のないIEを作ってくれ、是非とも。

せめてこっち晒せ

http://alevirita.com/
http://spky.org/
http://awa.opal.ne.jp/

なんかパクリかってくらい似てるけど
WPでこういうテンプレあるの？

誤爆

h2やh3等のブロック要素のテキストを右寄せにしたとします。
この時テキストの直前に背景画像としてアイコンを置きたいのですが、
位置調整が上手く行きません。

内部をspan要素で囲んでspanに背景画像を置くしかないのでしょうか？

float : right;してpadding-leftに画像がくるようにすればいけるんじゃないかな。

>>248
なるほど。そう言う手がありましたか。
おかげさまで上手く行きました。
ありがとうございます。

h2 {
text-align:right;
display: list-item;
list-style: none url();
}

>>250
これこれ…。

高さが短い枠線などを作る時に
<div class="frameBottom"></div>

っとすることがあるのですが、HTMLチェックツールなどを見ると、
<div></div>の間が空欄だと指摘されます。
 などの空白を入れるのも考えましたが、妙に間が空きます。
こういう場合、どうするのが正しい書き方なのでしょうか？

高さは短いと言うのか・・・　ふ〜〜ん

>>252
div要素として明示されるべきは､ 本文中にあって一連と見なせる一群の思想であります｡
あなたの例は明かにそれに反するので不正であります｡

枠線を描きたいのであれば､ その枠線の前と後では､ 思想が異なるのでありましょうから､
それぞれをdivで明示して､ 前のdivの下辺､ あるいは後のdivの上辺に枠線を付けましょう｡

あるいは､ 区切りをhr要素として明示し､ それに枠線を引いてもよいと思います｡

>>254
ありがとうございます。つまり、
<div class="frameBottom"><hr /></div>

こうするということですかね？それとも
<hr class="frameBottom" />
とするのが正しいのでしょうか？

こいつ、間違いなくDIV病だな。

>>256
・・・・・・・・・・・・・・・・・・・・・・・・・・・・。
その線の前後にはブロックが存在するだろう？
そのブロックの、線を引きたい位置のどっちでもいいから
上か下かだけにボーダーを引きなさい。

ごめん、256じゃなくて255宛。

馬鹿ほどxhtmlを使いたがるってのもわかった。

区切り線の変わりに枠線のみの中抜き長方形を作りたいという意味じゃないの？

<hr style="color:#FFFFFF; height:5px; width:300px; border:#000000 solid 1px;" />

>>260
死ねよつるっぱげ

違うよ２３２３だよ。

html {
background: #68a;
border-width: 3px;
border-style: dotted;
border-color: #fcfcfc;
}

body {
background: #fcfcfc;
color: #333;
border-width: 3px;
border-style: dotted;
border-color: #68a;
}

こんな感じのを書いてみたんですけど、IE7で見ると点線になってくれません。
firefoxでは点線になります。
これは、『CSSバグ辞典スレッド』の要約サイトに書かれてある
「幅や高さを指定した要素でdoubleボーダー領域に背景が描画されない(5.x/6.0)」
というバグと同一のものでしょうか？

>>263
＞というバグと同一のものでしょうか？
どう読んだら同一になるんだか。

>>263
htmlはないわけ？

>>263
それとは別。
html→body
body→コンテナブロック
に置き換えな。

IEでみると
dottedもdashedモ同じに見えるけどそのこととは違うの？

>>264
破線の間、点線の間、二重線の間、ってことで同じなのかな、と思っただけです。

>>265
表示されないなあおかしいなあ、と思ってhtmlとbodyで試したんです。

>>266
置き換えてみたけどやはり表示されずでした。

>>267
IEだと丸点で、他のブラウザは角点ですよね。それが線の背景が反映されないのでおかしいな、と。

上記の三種類の線の下地色は、そのborderをしている要素の背景色になる…んですよね？
なんか単純な記述ミスかも知れないんで、もう少しいじってみます。
すみませんでした。

border-styleってそもそもいいかげんだよ

>>268
htmlといわれたら素直にソース出せよ。
cssだけ出されたって反映するhtmlに問題があったら意味がない。
特に君みたいに思い込みが激しいタイプはね。

まて、268は素で勘違いしてるだけだろ　ｈｔｍｌの意味を
なぜ270は噛みついてるんだ？？
思いこみ激しいっていったって自分で「記述ミスか？」と振り返ってるじゃないか
みんな落ち着け

どう見てもアホだろ。放っときゃいい。

確認はこのままのCSSでやったわけ？
background-colorもborder-colorも同じ色(#68a)にしたら見えないじゃない。

bodyのbackground-colorは#fcfcfcだからいいんじゃないの。
IE6は確認する環境がないんだけど、
bodyに要素があっても表示されないのかな。

>>268
置き換えて確認してみたよ、何か間違えてるんだろ。

質問です。
ネスケ７．１で

position: relative;
のボックスの中でposition: absolute;をつかえば
position: relative;内からの絶対値ではじまるはずが

ネスケの場合relativeとfloatを一緒に使っていると
そのrelativeはむしられその外側のrelativeからの絶対値になってしまうのですが

対処法を知ってる方がいましたらお願いします。

positionとfloatを一緒に指定すんな

position:relativeとfloatは同時に指定可能だよ。absoluteは駄目だけど。
ただN7は・・・

>>276
ソース出せ、外側とかむしられとかよくわからん

css
*{
margin: 0;
padding: 0;
}
div#box1 {
padding: 50px;
width: 500px;
height: 500px;
position: relative;
}

div#box2 {
width: 300px;
height: 300px;
position: relative;
float: left;
}
p {
position: absolute;
top: 0;
left: 0;
}
html
<div id="box1">
<div id="box2">
<p>テスト</p>
</div>
</div>
こんな感じになっている場合普通はbox2からの絶対位置になるはずがbox1からの絶対位置にになってしまうということです。

あちゃ〜・・・

画面に表示されるカーソルをずっと十字のままにしたいんだけど、
リンクに重ねると指に戻っちゃうときはどこいじればいいの？

>>282
ググレカス

>>282
全てをいじればいいのです｡

ヒント: 全称セレクタ

>>280
ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b018.html

>>280
relativeをbox1にも指定する意味はわからないが、relativeを外しても同じであり、
それでもbox2のrelativeにabsoluteするハズなのに、と言いたいのだろう。
ネスケ以外はそうなるからな。
しかしながら、box2には同時にfloat:left;が指定してある。floatを外せば問題ない。
floatした要素は通常フローから除外される、という意味ではネスケの解釈が正しいのかもな。
実際にはbox2の位置はfloatしてないので、他ブラウザでは最初から無視と。

解決法はなしっすか。

>実際にはbox2の位置はfloatしてないので、他ブラウザでは最初から無視と。
floatしてるよ。
relativeで動かされる前の位置でちゃんとfloatの動作を見せる。
原因は>>285。

>>287
今のところそのままだと見付かっていないと思われ。
別の方法でも似たようなことできると思うけど。

>>288
え？floatしてないんじゃない。
float消しても変化しないし、floatしてるなら高さが無視されるだろ。

だからfloat消せば解決するんでわ。

>>290
floatを外すとF7（2.0）にしろFx（2.1）にしろ動作変わってるけど。
またfloatした要素にheight指定もできる。

>>292
俺のFX2.0、NN7.1では変化しない。

>>292
＞またfloatした要素にheight指定もできる。
珍説です。本当にありがとうございました。

>>293
後続テキスト入れてごらん。

floatけせばいうけど、floatしたい場合とrelativeもつか痛い場合はどうすりゃいいのか。

まーｈｔｍｌソース足せば解決するけど、そのためだけにタグ追加したくないし。

>>296
relateveは大概margin代用で解決すると思うけど。

回避ほうあればとおもったんですが。
マイナスマージンで解決するしかないですかね。

こういう風に議論が盛り上がる時って、回答者がアホな時なんだよな。

>>295
後続テキストがあるってどこにかいてあんのー？
エスパー？

>>300
書いてないよ。
floatがわかりやすいように入れて確認してごらん、という意味。
でもただの煽りだったようだね。

＞確認してごらん
エラそうでちゅねー

よし、あきらめよう。
これからは、このこと頭に入れながらつくるようにしよ。

最近の質問者って礼も無しかよ

ソースから馬鹿が滲み出てるような奴だぜ？

table内のリンクだけcssでnofollowさせる事は出来ますか？

>>306
死ね

スタイルシートと検索エンジンは全くの無関係

>>306
できない。CSSができることは見た目を決定することだけ。

idとclassまたは別のclassとclassをひとつの要素に指定することって間違ってる？
一応正常に表示される

>>306-309
ありがとう御座います。

306は要りませんでしたｗ

>>306
できるか分からないけどtableをインラインフレームにしてnofollowさせたら？

画像の下に説明文をつけるときに、説明文が短い場合はセンタリング、
長い場合は画像幅で折り返して左寄せしたいのですが、下のように
tableを使う方法でやっています。
table使わない方法はありますでしょうか？

<html><body>
<div style="text-align:center;float:left;width:200px">
<img src="画像Ａ.jpg" width=200 height=200><br>
<table style="margin-left:auto;margin-right:auto;"><tr><td>
○○画像Ａの説明文○○
</td></tr></table>
</div>
</body></html>

>>310
たとえば<p id="hoge1" class="foo">と<p id="hoge2" class="foo">みたいに？
なら無問題。つうかそうした方が適切に意味付けできるなら推奨。

>>314
table要素をまんまp要素にかえてtrとtdをとっぱらってみ？

>>315
ありがとう。もっと早く質問すればよかったよ
今から組み直してくる

>>316
×もっと早く質問
○もっとちゃんと勉強

>>315
table要素をp要素に変えると画像の説明文が長い場合に

画像の説
　明文

のように２行目がセンタリングされてしまい醜くなります。
table要素使うと説明文が短い場合にはセンタリング、長い場合には

画像の説
明文

のように左寄せになるのですが。

そんなことして喜ぶのはアンタだけだから

興味アリ

>>318
tableの事は完全に忘れろ。話はそれからだ。

>>318
無理じゃないかな。
っていうか、>>314も本当は出来てないんだけど。

分かってて後方互換モードで書いてるなら何も言わないけど、
何だか分からず書いてるなら、まずHTMLをちゃんと勉強した方がいいんじゃない？

<style type="text/css">
* {
margin: 0;
padding: 0;
}
dl.images {
width: 200px;
float: left;
border: solid thin red;
}
dl.images dd {
display: table;
margin-right: auto;
margin-left: auto;
border: solid thin blue;
}
</style>

<dl class="images">
<dt><img src="画像A.jpg" alt="画像A.jpg" width="200" height="200"></dt>
<dd>画像Aの説明文</dd>
</dl>

厳密にやりたいならPHPかなんかで文字数カウントするしかなくね？

カウントしたって無理だよ。

だからテーブルレイアウトはダメなんだよ。

>>323
ありがとうございます。display:table; がミソということですね。
だけどIEは非対応orz

ブラウザ側で文字を大きくされたときに、センタリングされている文字が
２行になると醜くなるので、なんかいい方法ないかと思ったんだけど。。。

>>327
そんなにテーブルレイアウトが好きなら、無理してCSSなんか使う必要ない。

>>327
class付けりゃいいだけじゃん。

>>327
テーブルをやめたいんですがどうしたらよろしいでしょうかとお尋ねしている
のであって、「テーブル最高！CSSでやれるもんならやってみな」と言っている
わけではありません。誤解を与えるような質問であったのであればごめんなさい。

質問のきっかけは、>>327にも書きましたが、ブラウザ側での文字サイズ変更です。
具体的には、例えば
http://allabout.co.jp/internet/hpcreate/closeup/CU20070502A/index3.htm
のサイトですが、ブラウザで文字のサイズを大きくすると真ん中付近の海の絵の
「キャプションですよ」が２段で表示され、センタリングされてるので不自然に
なります。（IEだと「よ」だけ、Firefoxだと「すよ」が次の行に行きます）
２行以上の場合は左寄せのほうが見やすいと思い、いろいろ試したのですがテー
ブル使うのしか思いつきませんでした。

>>329
もう少し詳しく教えてください。おねがいします。

まちがえました。
× >>327
○ >>328

>>330
tableやめてcssにしたいって言ってるくせに、全然勉強してないじゃん。
classなんてcssの基礎の基礎だろ。
キーワード貰ってからも全く調べてないんじゃどうしようもない。

classを知ってても>>329のヒントじゃわけわかめ｡

自分も>>329が何を言いたいのか分からない。

私も>>329のがワカメ

バカばっか。

>>330
たぶんあんたのやりたいことはどの技術使っても�_

「折り返す」ってことは、その行は端々まで達してるってことだから、text-alignが如何なる値であってもほとんど変わらない。
それに対し、端に着いてない（折り返さない）行はtext-alignで影響を受ける。
だから一行目だけをcenterにしてそれ以外はleftなら出来るかな？

って考えて実験してみたんだけど出来なかったね。
dd{text-align:left}
dd:first-line{text-align:center}

http://www.y-adagio.com/public/standards/tr_css2/selector.html#first-line-pseudo
> :first-line擬似要素は行内レベル要素に類似しているが， 一定の制限がある。
> :first-line 擬似要素:に適用されるのは フォント特性, 色特性, 背景特性,
> 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform',
> 'line-height', 'text-shadow', 及び 'clear'に限られる。

ですって｡ 残念｡

条件によって指定変えるなんてcssの範疇超えてる。

DTP上がりの馬鹿でこういうやついるよな

text-indent

すみません。お力をお貸しください。
WinIE6・標準準拠モードの環境で外部スタイルシートを使用し、
tableの中の文字サイズを変更したいと考えていますが、
どうもうまくいきません。
tableの指定は以下で。

<table border="1" id="ccstable"><tr><th class="ccs1">aaaaaa</th><th class="ccs2">bbbbbbb</th></tr>
<tr><td class="ccs1"><p class="ccs3">aaaaa11111</p><p>aaaaaa2222</p></td><td class="cccs2"><p>cccccc</p></td></tr>
<tr><td class="ccs1"><p style="font-size:3em;">11111aaaaa11111</p></td><td class="cccs2"><p>cccccc</p></td></tr>
</table>

外部スタイルシートは以下のように記載しています。
.ccs1{ width:100px; }
.ccs1{ width:90px; }
th.ccs1{ background-color:#000000;
color:#ffffff; }
th.ccs2{ background-color:#000000;
color:#ccfffff; }
.ccs2{ font-size:3em; }
.ccs3{ font-size:3em;
color:#cc0000; }


色の指定は反映されるため、
リンクが間違っているという事はないようです。
直接指定すれば反映されますが…。
何か指定方法で間違えがあれば指摘を頂ければと思います。

すみません。
>343に記載ミスがあります。
.ccs1{ width:100px; }
は
#ccstable{ width:100px; }
です。

寝ぼけながら

th .ccs1

スペースが開いてない、とか

>345
タグとクラス名の間にスペースを空けると
今度は色指定も無効になってしまいます。

また、記載間違えがありました。
<td class="cccs2">
ではなく
<td class="ccs2">
です。たびたびすみません　orz

じゃあ逆

.ccs1 th

スペースはあけてね

後出しになって申し訳ないんですが、順番は質問前に色々試したのでそこでは無いのではと思います。
あと、ccs1ではなく、例にある ccs2のようなTD属性の中のものの文字サイズを変えたいのですが、
ccs1の指定が原因ですか？
答えてくださってるのにすみません。

眠いのでテキトーに答えてゴメン
単純ミスかと思ったのでccs1を例に出しただけで
そこは関係無いです

ちょっと真面目に見ようと>>343をコピペしてみたんですが
cccs2となってるところは間違いですか？
後どの部分の文字を変えたいのに反映されてないんでしょうか
当方で試してみた所一応サイズ変わってるみたいなので

th.ccs2のcolorが一桁多いね。
そこを直せば概ね、指定通りに表示されてる気がするんだけど、
どこがどううまく行かないのかな。

p自体にフォントサイズ指定してないおね？

><td class="cccs2">
cが多くね？

>>346

おー寝惚け過ぎ

だが何が反映されないのか本当に謎だなー

自分で試したとき、ccs2のTD自体に指定する場合と
ccs3のようなTDの中のPに指定する場合、どちらもが反映されなかったです。
色指定だけ反映されました。これが謎で。
Pに文字サイズ指定してはいけないと言う事はないですよね？
ここの例では記載してませんが別の指定が絡んでるのかと
TABLEにID名つけ親となる文字サイズ指定し、#ID名　.CLASSとし新たに文字サイズ指定した場合も駄目でした。
今タグが触れる環境にいないので夜にまた再チャレンジしてみます。

こういうことか？

.ccs1{ width:90px; }
.ccs2,.ccs3{ font-size:3em; }
.ccs3{color:#cc0000;}
#ccstable th{background:#000;}
#ccstable th.ccs1{color:#fff;}
#ccstable th.ccs2{color:#cff;}

<table border="1" id="ccstable"><tr><th class="ccs1">aaaaaa</th><th class="ccs2">bbbbbbb</th></tr>
<tr><td class="ccs1"><p class="ccs3">aaaaa11111</p><p>aaaaaa2222</p></td><td class="ccs2"><p>cccccc</p></td></tr>
<tr><td class="ccs1"><p style="font-size:3em;">11111aaaaa11111</p></td><td class="ccs2"><p>cccccc</p></td></tr>
</table>

ボックスつくって、べた色塗ってその中に、テキストや画像を配置。
ボックスのＣＳＳで
filter : Alpha(opacity=60);
を使用。
テキスト、画像は透けさせたくないのだがボックス内容全てが透ける。
どしたらいいの？

>>357
> filter : Alpha(opacity=60);
をかけてる中の要素は問答無用ですべて透過
つかｽﾚﾁｶﾞｲ

レスサンクス。スレチガウ？

ソース出すなら再現するソースを出してくれないとな。
何が問題なのかさっぱり分からない。

こんばんは。もう一度落ち着いて見直したところ、原因がわかりました。
外部スタイルシートを二つリンクしており、そのうちの一つで
p { font-size: 1em;}
となっていました。ずいぶん前に書いていたので忘れてました…。
さらにその設定があったとしても別のCLASS名で個別に文字サイズをしていすれば、
それを変更できるかと思っていた事によります。
外部ではなく直接<p style="font-size:3em;">と書いたものが有効なのは
反映の順位（？）によるものだったんですね。
こっちは反映するのにあっちは反映しないのは何故か悩みまくっていて…。

大変お騒がせしました。
CLASS名などをもう少し勉強します　orz

ｷﾞｬﾌﾝ（＞＿＜）

<table>
<tr>
<td valign="top">★</td>
<td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>

このようなタグをCSSで書きたいのですが、うまくいきません。

<div style="float:left; width:1em; height:3em;">★</div>テキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト

このように強引に高さを指定して書くと、ページ幅を縮めたときに、任意の高さ（ここでは３行目）以降で回り込んでしまいます。
tableで書いたように、ずっと回り込ませないようにするにはどうすれば良いでしょうか？
ご教授お願いいたします。

>>363
<dl>
<dt>★</dt>
<dd>テキスト〜テキスト</dd>
</dl>

dt { float:left; width:1.5em; }
dd { margin-left:1.5em; }

>>364様
おおおお〜！
ktkr!!!!
５時間掛かって分からなかったのが、瞬殺で解決しました！
やったー！
感謝の意を込めてお母さんと呼ばせてください！
ありがとうございました！

>>364
なんで、それをCSSで書きたいんだろう。
テーブルレイアウトをやめてCSSで書くって事は、CSSでないと実現しにくい事だったり
メンテナンスのしやすさであったり、対応ブラウザを増やしたかったり、
何かしらの理由があるんだよね。

その二つの例を見る限り、変えたい理由がよくわからないな。

>>364
emて

こっちのほうがCOOLだぜ

<div style="float:left; width:1em;">★</div>
<p style="margin-left:1em;">
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト</p>

お前らアフォか

これだろ普通

<p style="text-indent:-1em; padding-left:1em; margin:0;">
※テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキスト</p>

★を直接書くのは、いかがなものか。

.notes {padding-left: 1em; text-indent: -1em;}
.notes:before {content: "★";}
<p class="notes">テキスト！テキスト！テキスト！テキスト！</p>

まぁ、IEのことを考えると★は画像にして背景かな。

凄いっ！凄いぞ>>364

なにこの低ラベル

お尋ねします。htmlは標準モード、ＩＥ6とFirefox1.5ですが
↓の指定だと、指定していないのにfont-weightがボールドになるんですが
h1{font-family: "Times New Roman", Times, serif;font-size:500%;}
一括指定だとノーマルのままです。
h1{font:500% "Times New Roman", Times, serif;}
何故なのか分かる方お願いします。

>>373
http://www.y-adagio.com/public/standards/tr_css2/fonts.html#propdef-font

>>374
一括指定は初期値をリセット（個別指定だと初期値を継承）するんですね。
どうもありがとうございました。

<div style="width:600px;">
<div style="width:200px; FLOAT: left;">
<ul><li><a href=".html">aaa</a></li></ul>
<ul><li><a href=".html">aaa</a></li></ul>
<ul><li><a href=".html">aaa</a></li></ul>
</div>
<div style="width:200px; FLOAT: right;">
<ul><li><a href=".html">bbb</a></li></ul>
<ul><li><a href=".html">bbb</a></li></ul>
<ul><li><a href=".html">bbb</a></li></ul>
</div>
</div>

現在上のようなレイアウトなのですが、aリストとbリストでそれぞれにdivを使わずに、
一つのdivの中でaリストとbリストで2列にすることは可能でしょうか？

ulにfloatを指定したりして試行錯誤した結果、IEでは思い通りに表示されたものの、
firefox等ではレイアウトが崩れてしまいました。
何か良い方法は御座いませんでしょうか？宜しくお願い致します。

※実際には勿論外部スタイルシートを使っており、各リストも一つではありません。

>>376
・・・・・・・・・・・・・CSSの前に
HTMLでリストの勉強をしてきてください・・・・・・・・・・・・

どこでどう覚えると>376のようなソースになるんだろ ?

<div style="width:600px;">
<ul style="width:200px; FLOAT: left;">
<li><a href=".html">aaa</a></li>
<li><a href=".html">aaa</a></li>
<li><a href=".html">aaa</a></li>
</ul>
<ul style="width:200px; FLOAT: right;">
<li><a href=".html">bbb</a></li>
<li><a href=".html">bbb</a></li>
</ul>
</div>

次の要素でfloat:clear

×float:clear
○clear:both

* {
margin: 0; padding: 0;
}
ul.column {
list-style: none; width: 400px;
}
ul.column li {
display: block; width: 200px; float: left;
}
ul.column li ul {
margin-left: 2em; list-style: disc;
}
ul.column li ul li {
display: list-item; float: none; width: auto;
}

<ul class="column">
<li>
<ul>
<li><a href=".html">aaa</a></li>
<li><a href=".html">aaa</a></li>
<li><a href=".html">aaa</a></li>
</ul>
</li>
<li>
<ul>
<li><a href=".html">bbb</a></li>
<li><a href=".html">bbb</a></li>
<li><a href=".html">bbb</a></li>
</ul>
</li>
</ul>

幅足りないやん

>>382
君、関西人じゃないでそ

そうんなことないんやでぇ
バリバリの関西人なんやで

日本中で関西弁使うのは大阪人だけだ

olではできないかな？

1. aaa 　　 4. bbb 　　 7. ccc
2. aaa 　　 5. bbb 　　 8. ccc
3. aaa 　　 6. bbb 　　 9. ccc 　　 こんな感じに。

>>386
できない。
よくそういうのWikipediaで見かけるけどtableで組んでる

>>386
非推奨のstart属性使えば？
XSLT使えば可能なんだろうけど、あまり詳しくないから他の人お願い。

表は表で。

そうだ表は表でいいんだぞ

そうだそうだ

>>385
それどんな思い込みやねんｗ

MdNのプロとして恥ずかしくないＣＳＳの大原則読んでるんやけど
難しすぎて気が狂いそうになる…
ここにいる人達はほとんどこれくらいのレベル？

>>392
むしろMDNは間違いだらけなんでやめとけ・・・

>>393
マジかよ…
なんか良い書籍あります？

2ch系列のスレとか派生スレとか、結構勉強になると思う。
WEBにはわんさか良い情報があるぞ。

>>394
どういうレベルのものを欲してるんだかわからないんだが
ttp://hp.vector.co.jp/authors/VA022006/css/
ttp://mynotes.jp/lecture/css21/
書籍だと神崎たんが出してたような。

>>392
ちょっと古いなw
あの本は俺も持ってるけど上辺のデザイン優先だからやめといたほうがいいぞ。
まあ専門が専門だから仕方ないかもしれないがな。
それにしてもあの程度で難しすぎるってw

Webで勉強したいなら神崎さんのところを紹介しておくのが無難か。
ttp://www.kanzaki.com/

書籍だと「Web標準の教科書」とか。ただ初心者には難しいかもしれないから
一通り学べる入門書を読んでからの方がいいかもしれん。

みなさんレスありがとうございます。
みなさん優しくてちょっと感動したｗ

うーん、一応パソコンスクール（笑）通ってＣＳＳの勉強してたんですけど
正直基本以下でした…
要素などはけっこう覚えたんですけど
ここでコレ使ったらもっとデザイン性がよくなるっていうアイディア
みたいなモノが全く出てこないんですよね…

だから作るサイトも質素で
初心者丸出しのサイトばっかしです…
もしかして向いてないのかな…ｗ
みなさんのを参考にもっと勉強します。

要素があってデザインがあるんじゃなくて、
デザインがあってからそれをCSSで実現するのが基本。
そりゃ要素覚えてデザインがどうこうなる訳ないのは当たり前だｗ
根本的なところから勘違いしてるぞ。

>>398
逆じゃね？
こんな表現がしたいけど、CSSではどうするのか。
で、調べないか？

デザインなんてユーザースタイルシート使ってる人にとっては迷惑

そうなんですか、勉強になります。
いろんなサイト研究してデザインの視野を拡げたいと思います。
親切にありがとうございます。
初歩的な質問でスレ汚してしまってすいませんでしたｗ

作りたいデザインが出てこないなら向いてないよ

デザインの勉強をしたいのならそれこそMdNでも読んだ方がいいな。
同じシリーズに「プロとして恥ずかしくないWEBデザインの大原則」ってのがあるから、
それでも買って読めばいいと思われる。
ただしそれとは別にhtmlとCSSの正確な知識を勉強した方がいいのは勿論だけど。

レスどうもです。
「プロとして〜」は読みました。
htmlとcssの基礎はもう余裕だと思ってたのでけっこう衝撃でした…ｗ
あの雑誌に載ってたサイトはどれもデザイン性高くて
凝ったサイトですよね。プロの方はあのようなサイト作ってるんやと
思ったらちょっと腰が引けました…
向いてない…キツイ言葉ですｗ

みなさんはＣＳＳの要素は全部頭に入ってるのですか？？
それともデザインを先に考えてから
要素を調べたりしますか？？

もう十分だろ・・

>>406
そうくると思ってましたｗ
もう質問やめときます。失礼しました。

>>407,>>392
じゃあ聞くな。性格悪っ。

＞性格悪っ。
＞性格悪っ。
＞性格悪っ。

>>405
俺の個人的な話だけど大体の要素は頭に入ってるけど、
ごくたまにしか使わないようなものはそのつど調べたりもしてる。
まあこんな要素がある程度ならほぼ全部頭に入ってるけど。
初心者の家は一覧表とにらめっこしながらつくってもいいと思うぞ。
あと、上達する秘訣は試行錯誤と他のサイトからいい意味で盗む事だ。
がんばれ。

そしてパクリサイトとして紹介されるんですね！

何がパクリになるのかよくワカラン

「ＣＳＳの要素」って言ってる時点で何か違う

Element of CSS

上昇志向があるのは（･∀･）ｲｲことだうんうん

htmlに
A→B→C→D→Eの順で記述しています

http://www.uploda.org/uporg858054.jpg
このように並べたいのですが、Dの部分どのようにすればいいのでしょうか？

グロ貼んなボケ

b ,c {float:left;}
d {position:absolute;top:0;left:Aの幅;}

>>418
できました！
ありがとうございました
>>417
画像での説明すみませんでした

>>418
それはないわ

absolute指定はあんまりオススメできないような…

まあ、どうせIEでしか見てないんだし、意味もわからずfloatなんだから。

float 使うなら、width も一緒に指定してね

最近、回答するほうのレペルが低くすぎやしねぇかぁ ?

テンプレも読んでいないバカ質問者に真面目な回答しても質問者は理解出来ない
その場しのぎの回答を期待してる奴に基礎を勉強しろと言っても疲れるだけ

h2:first-letter {
color: red;
}
これで
IEだと一文字目が赤くならないのですが、なぜでしょうか？

>>426です、じこかいけつしました

>>426
3分で解決することをいちいち聞いたのか?お前は

<div style="background-color:#999;">
　<div style="height:100px;">ヘッダー</div>
　<div style="height:500px;">内容</div>
</div>

この時、背景色がブラウザの下部分まで続かずに、heightの600pxの所で切れるんですけど
ブラウザの下方まで背景色を続かせる方法はないでしょうか？
heightを伸ばす手も有るけどそれだとスクロールバーが出てしまうので・・・

100%を使え。
但し親要素との関係に気を付けて調べろよ。

>>430
ありがとうございます！親要素を100%にすればよかったんですね

CSS:
ul{list-style-type:none; width:250px; border:solid #f00 1px;}
li{font-size:80%; width:100px; float:left; margin:3px;}
li.last{float:none;}

HTML:
<ul>
<li>リスト</li><li>リスト</li><li>リスト</li><li>リスト</li>
<li class="last">リスト</li>
</ul>
<p>下の段</p>

リストを二〜三列ずつ並べたくて、liにfloatを使ったのですが、
下の段の要素が回り込まないように最後のliにfloat解除の指定をすると、
そのli要素のスタイルが変になってしまいます。
特に、Firefoxで見ると、ulの幅を超えて右側に置かれてしまいます。

事情により（二段カラムに内包されているので）下の段にclear:leftを使うことができない、
という前提で、うまく複数の列になるリストを作るにはどうしたらよいでしょうか？

ulをclearすりゃいいんじゃね

IE6のスタイルシートの事で質問させてださい

yahoo検索のページだけ文字のサイズが変ってしまうのです
例えば
http://search.yahoo.co.jp/search?p=%B8%A1%BA%F7&fr=top_v2&tid=top_v2&ei=euc-jp&search.x=1
こういうyahoo検索アドレスのページだけサイズを変えるというCSSの記述を教えてくれませんでしょうか？

現在

#yschweb .ttl,
#yschweb .yschabstr
{
font-size: small !important;
}

この記述をしてるのですが本文のみで、それ以外のフォントサイズは元のままになっています
ページ全てのフォントサイズを変える記述をよろしくお願いします

ユーザースタイルシートでってこと？
こういうのは他サイトとかぶらない名前のidかclassが振られていないとどうしようもないから、
オミトロン等と併用するのがいいんだけど。
でもまあ、こんな感じか
div#ygunav, div#ygma, div#yschinfo, div#yschres, div#yschpg, div#yschssbxl, div#yschft {
font-size: small!important;
}

>>435
おお！　全て元に戻りました！
どうもありがとうございました！

フォントサイズを10ptで太字にしたいのですが
<P STYLE="font-weight: bold font-size: 10pt;">って書くと太字になりません。
bold以降を消すと太字になるんですがどうすれば良いのでしょうか？

1. CSSを基礎から勉強しなおす
2. CSS Validatorを使う

<style type="text/css">
<!--
.style1 {
font-size: 10px;
font-weight: bold;
}
-->
</style>


<span class="style1">10ptだっちゃ</span>

これでいいじゃん

アホだ

>>440
なにがどう駄目なのかを提示しない奴ほど、
仕事が出来ない
って言うか、誰からも必要とされてない

>>441
いやいくらなんでも>>439はアホだ

<P STYLE="font-weight: bold font-size: 10pt;">って書くと太字になりません。
<P STYLE="font-weight: bold【 】font-size: 10pt;">って書くと太字になりません。

<P STYLE="font-weight: bold font-size: 10pt;">って書くと太字になりません。</p>

<P STYLE="font-weight: bold; font-size: 10pt;">って書くと太字になります。</p>

>>442
初心者だからか、何故駄目なのか分からん
教えてください

>>445
釣られてみますが、
>>444を見てもわかりませんか？ もっと地道に勉強してから回答して下さい。

>>446
いやいや
;の区切りは分かるよ
>>439の何が駄目なのかが分からん
何度も10ptで太字にするなら、>>439の方がいいと思うんだけど

ﾀﾞﾒﾀﾞｺﾘｬ

いやだから、なにがどう駄目なんよ？
>>441じゃないが、それを指摘してよ

　必　死　だ　な

だって質問スレでしょ？
教えてくださいよ

>>447
無駄に煽ってる人とは別人だけど、こんなところでしょう。

・>>437の誤りを放置して、何故か全く違う回答。
・例とは言えstyle1ってどうなんだ。
・そもそも>>437はpのスタイルを指定しているのに何でspanなのか。

＞何度も10ptで太字にするなら、>>439の方がいいと思うんだけど
見た目をクラス化するのは、あまり良くない。
HTML的に駄目なのは勿論のこと、
見た目を変えたい時にHTMLを片っ端から直さなければならないんじゃ、
CSSを分離する意味があまりない。
多分、>>439も見た目を割り振るって考え方からspanにしたんだろうけど。

つか10pxは10ptじゃない

styleに<!-- -->っているのけ？
javascript非対応の携帯ではコメント扱いにして表示されないようにするけど、
head部分でしかもstyleだからな。
そんな事したことないけどなんか意味があるん？

>>454
＞javascript非対応の携帯
なんの話しをしてるんだ？
javascriptのなにが関係あるんだ？

この事いってるのかはわからんが、script部分がそのまま表示されるUAがあった気がする

>>437

ｂ　ｏ　ｌ　ｄ　；　ｆ　ｏ　ｎ　ｔ　−　ｓ　ｉ　ｚ　ｅ　：
　　　　　　　↑
　　　　　抜けてるよ

>>454
古いブラウザ対策。HTML限定。

>>457
笑えもしない。

なんだ？このバカどもは？！

424 Name_Not_Found [sage] Date:2007/06/16(土) 20:05:53  ID:??? Be:
    最近、回答するほうのレペルが低くすぎやしねぇかぁ ?

スレが間違ってますよ。
http://pc11.2ch.net/test/read.cgi/hp/1178336922/へ行ってください。

<script type="text/javascript"><!--
var so = new SWFObject("flvplayer.swf?ts=1182119825", "flvplayer", "952", "540", 7, "#ffffff");
so.addVariable("v", "sm456010");
so.addVariable("ad", "web_pc_player_marquee");
so.addParam("allowScriptAccess", "sameDomain");
so.write("flvplayer_container");
--></script>


このフラッシュ消したいんですがユーザースタイルシートで何とかなりませんか？

>>462
#flvplayer_container {display:none;}

はぁぁああああ？？？？！！！！？？？？？

>>463
すみません、他のフラッシュも全部消えてしまいました。
>>462の部分のフラッシュだけ消すという事はできませんでしょうか？

ひぃぃいいいい？？？？！！！！？？？？？

ﾜﾛｽ

間違いなくサイトがvalidでないと考えられる。

そういうのはオミトロンでやった方が楽

そういうのはお富さんに頼んだ方が楽

>>468
validという形式でないと無理なんですか？

>>469
オミトロンを使うと激重になってしまうんです

PC板じゃねーぞ。

そういうのはオロナミンＣを飲む

#473 {display:none;}

>>474
死ねよ

なにこの流れ

>>474
どうなるの？

#475 {position:absolute;left:9999;top:9999;}

隠しテキストはスパムです

>>478
ほらやっぱり低レベル。
どうしようもないね。

ID名の先頭に数字使っちゃだめ

そういう問題なのか

html {maziresu:kakoii;}

そもそもオミトロンで弄って重くなるわけねぇｗ

>>432ですが、どなたか見ていただけないでしょうか。
<li class="last">リスト</li>が、フロートを解除するだけなのになぜそのような配置になるのかが
わからないのです。

>>433の方法は結局h3にclearを指定するのと同じで、使えない解法です。
どなたかよろしくお願いします。

>フロートを解除するだけ
フロートの解除を間違って覚えてる。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#clear

>>485
ulでlastとはこれいかにｗ

>>486
そこのサイトキモいから貼らないでくれ

ヤダ

アキコ

>>488
自國の傳統・文化・歴史を貶めて嘸愉しからう。
無智でゐれば勉強しないで濟んで嘸幸せだらう。
眞鍋かをりの名をみるたび蔑んでゐれば好いさ。

>>491
きめぇ

また現れたのかこいつ

>>485
h3という話題はいったいどこから出てきたんだ？

MacIE5でCSSレイアウトしてる初心者です。
納期にあまり時間がないのである程度一気にいじって確認を繰り返してたら
いきなりレイアウトが崩れてしまいますた。
2カラムのレイアウトで最初は綺麗に表示されてたんだけど
いきなり左右に800pxくらいの空白ができてしまった（センター寄せっぽく等幅に）
本体のレイアウト自体は崩れて無くて、左右のスペースだけが空いてる状態。
Win火狐では普通に見えてます。
どなたかこの症状に心当たりある方いれば助言頂きたいです。
部分削除で確認していった結果、メインのカラム組みに原因があるっぽいんですが、そこは弄った覚えないし…。
他の部分は貼付けるには長過ぎる…。

しかしほんとお絵描き配信増えたよねぇ
絵描くの好きば自分にはうれしい限り

激しく誤爆

>>495
まずバグ辞典を調べてあたりをつけたら。
MacIE5なんか絶滅寸前だし、それをメインに組むのはどうかと思うが。

>>498
レスども。
仕事場の端末がMacなんでふ。もとはデザイナーなので。
一応仕事で作るショップサイトなので、MacIEくらいは対応しておいた方がよかろうと思ってMacでやってます。流石にMacNC4.X系は見殺しですがw
でも確かにMacも限界。フリーズが日常動作って…。
ともかくバグ辞典みてみます。

＞ショップサイトなので、MacIEくらいは対応しておいた方がよかろうと思って
それならSafari対応しろ

<div style="background-color:#EFEFEF;">
あああああ
<div style="float:right; margin-top:-1.2em;">いいいいい</div>
</div>

この強引なダメダメなソースをスマートに書きたいのですが
どうすればいいでしょうか？
先輩方、ご教授のほど、よろしくお願いします

>>501
取り合えずテンプレで基礎を学ぼう。

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

WinXP SP2にIE7日本語版のスタンドアローンにて

html
<body>
<p><a href="#">link</a></p>
</body>

css
* {
margin: 0;
padding: 0;
}
p {
margin-bottom: 1em;
}
a:hover {
position: relative;
top: 1px;
left: 1px;
}

リンク部分に触れると横スクロールが出る。
全称セレクタの指定を消すと出なかった。
これバグですか？原因と回避法解る方いますか？

>>504
以下を指定する理由をお答えください

a:hover {
position: relative;
top: 1px;
left: 1px;
}

onmouseでボタンがピコって沈んだように見せてんだろ

>>504
そっちと同じ環境だけどこっちでは再現しないな

印刷時の画像と背景画像の違いについてお伺いしたいのですが
同じ画像でimgタグで指定、背景画像として指定、という風にした場合
SafariやOperaなどでは印刷プレビューで確認すると
両者のサイズは変わらないのですが
FirefoxやNNでは両者のサイズは同じものの、背景画像はブラウザでの
表示と同じ拡大率（？）のままなので、文字などが拡大されて見えます
これを避ける手段などはあるのでしょうか？

<!--
DIV{
background-image:url("haikei.jpg");
width:100;
height:100;
background-repeat:no-repeat;
}
-->

<IMG SRC = "haikei.jpg" width="100" height="100">
<DIV></DIV>

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

上ミスりました、すみません；

<div id="body">
<div id="a">
　<div id="b"></div><div id="c"></div>
</div>
<div id="d">
</div>
</div>

#body{

>>508
widthとheightに単位がないけど・・・

Firefoxってプリンタがインストールされてないとプレビューさえできないんだな。
確認できなかったよ。

pをいくつかフロートさせてその中にdl入れて表を作ろうと思ってるんだけど
pの中にdlってどう思いますか？

へたな釣りだと思う

>>512
へたくそな釣りだな

またPの話か

釣りがへたなんだよ

釣りじゃないですよ＾＾

>>517
釣りなのはIPでばれてる

h1 {border-top:1px #000 solid;}
<h1>hoge</h1>
横スクロールバーが出た時に、画面を移動させるとボーダーが切れてしまうんですが、ボーダーを切れないようにする方法を教えてください。

>>508
質問の意味がまったくわからん。
フォントサイズの固定を完全にしたいという意味だったら無理。

>>519
横スクロールバーを出さない。ex.リキッドレイアウト

>>520
すみません、わかりやすく例えようとしてわかりにくくなったようですね…
html
<h2>○○○○</h2>
css
h2{
text-indent:-1000px;
width:200px;
height:50px;
background-image:url("images/subtitle.gif");
background-repeat:no-repeat;
}
こんな感じで見出しを画像で作って背景画像扱いで表示させた時に
ブラウザの表示では問題ないけど印刷しようとするとFirefoxやNNでは
普通にimgタグで表示させた画像に比べると、相対的に拡大されて見える
現象についてです（大きさそのものは指定通りで中身が拡大した感じ）
SafariやOperaではそういう現象は起きなかったのでなにか策があれば…
と思い伺いました

>>522
印刷プレビューだけじゃなくて実際にプリントしてみた？

>>523
あ、してませんね…ちょっとやってみます
プレビューって当てにならないんですか？

ダメでした…プレビューの通りに印刷されました＿|￣|〇

>>522
ttps://bugzilla.mozilla.org/show_bug.cgi?id=161179

>>526
英文なんでちゃんと理解できているのか不安もありますが
Comment #35にあるように、FirefoxやNetscapeのもつバグだ
ということですよね？
じゃあプリント用CSSで背景画像を不可視にしてテキストを戻す
などして対処するしかなさそうですね…

見つけていただきありがとうございました

画像をサムネイルみたいに並べたときに、枠線にはぴったりくっ付けて
画像と画像の間だけ隙間をあけたいと思います。
下のは赤い線の枠の中に100x100pxの画像を10pxの間隔をあけて横4×縦2枚
並べる時の例ですがもっといい方法があれば教えてください。

.box1 {
width: 430px;
height: 210px;
overflow: hidden;
border: 2px solid red;}
.box2 {width: 440px;}
.box3 {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;}


<div class="box1">
<div class="box2">
<div class="box3"><img src="画像1.jpg" width=100 height=100></div>
（中略）
<div class="box3"><img src="画像8.jpg" width=100 height=100></div>
</div>
</div>

>>528
HTMLの勉強からしてきてください。
ものを並べる何を使うんだゴルァ

えーとえーと、、テーブル！

>>528
スレ違いです。超初心者スレに行ってください。

こんな感じでよろしいでしょうか？

* {border:0;padding:0;}
table {border-collapse:collapse;}
img {
margin-right:10px;
margin-bottom:10px;}
.box {
width:430px;
height:210px;
overflow: hidden;
border: 2px solid red;
}

<div class="box">
<table><tr>
<td><img src="画像1.jpg" width=100 height=100></td>
(中略)
<td><img src="画像8.jpg" width=100 height=100></td>
</tr></table>
</div>

（´・ω・｀）・・・

いわゆる「div厨」くらいは大目に見てやってもいいんじゃねーの？
さすがに>>532はないけど

画像を一番上からどんどん追加することを考えると、画像のところの
スタイルを揃えるようにしたほうが楽チンかと思ったんだよ。
左端画像にmargin-left:0; 右端画像にmargin-right:0;を
指定すると画像追加時にそこも全部いじらないといけないから。

テーブルはネタだって気付いてくれよ・・・

むしろ気付けないくらいだからHTMLの勉強から・・・

要素の中身に入ってるテキストによってマッチするか
どうか決めるというセレクタを書く方法はありますか？
例えば、<h1>....abc....</h1>にはマッチするけど、
<h1>......</h1>にはマッチしないという感じです。
訳あってh1の属性の方はいじれないんです。

JavaScript

>>538
手動でやれば？

div{
padding:20px;
overflow:auto;
position:absolute;
border-style:solid;
border-width:thin;
border-color:#000000
}

.menu{
width:852px;
height:200px
}

#position1{top:150px; left:10%; right:10%; }

これで、
<div class="menu" id="position1">
としても、左は10%になるのですが、右が10%になりません。
widthを852にしているからかと思い、
変えてみてもウインドウサイズを変えると隠れてしまいます。

あと、marginとpositionはどう関連しますか。
marginの基準はどこにあるのでしょうか。

>>541

>>542
いじわる！

.menu{
width:80%;
height:200px
}

#position1{top:150px; left:10% }

としたらなんとかできました。
できれば正当法で覚えたいんですが、
これでも問題ないでしょうか。

頭にシャープつけるクセは問題

>>541
IE6ではleftを指定しているとrightを無視するというバグがある。
両方指定しないように作るしかないな。

>>544
問題ないと思ってることが問題。
基礎をすっ飛ばし小手先のテクばかり追った成れの果て。

>>547
ですよね・・・
そうならないようにと思って作ってるのですが、
どうしても結果だけを見てしまい、小手先だけになってしまいます。

>>541
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=680
マルチな。どうせならもっとわかりにくくやれよ。
向こうの別スレじゃあ仕事だとか堂々と言っちゃうし。

おそらくこの人に基礎とか言っても無駄。

まちがえた、>>528ね

バレたかｗ
どんだけ見てんだよチンカスどもｗ

>>551
ネタならもうちょつとレスを嫁や

あんなサイト参考にしてる時点で駄目だろ。

どこの誤爆？

>>536
ネタだったのかorz

>>549-550
俺ではないぞ。つうか>>549のとはdivの中にimg入れたってのが同じだけで
質問の本質は全然違うじゃん。

buttonタグに以下のクラスを書いてbuttonの背景画像が表示されるようにしました。
IE6やFirefoxやSafariでは問題ないのですが、IE7だと画像が表示されません。
IE7も考慮しなくてはいけないのですが、こういう場合どうしたらいいでしょうか？

.btnImage{
width: 150px;
background-image: url(.button_back.jpg);
text-align: center;
height: 30px;
background-repeat: no-repeat;
}

けど無料スペースって広告ウザいよね
そんなあなたに無広告スペース
無料レンタルサイト
sameha
宜しく！
http://sameha.net/

.button_back.jpg
↑これの先頭のゴミ

iモードのブラウザに外部cssは使えるのでしょうか？
教えてくだされ。

自分で試せよスレ違い

>>560
氏ねよカスブタ

>>561 お前が氏ね。ネットで検索もしないクズゴミが。
http://www.google.co.jp/search?hl=ja&q=i+mode+%E5%A4%96%E9%83%A8css&lr=

おぉサンクス
優しい奴だなｗ

回答者の質低下は目に余る
スレチに親切ぶっても無意味
2人で超初心者スレがお似合い

Gilder Levin Methodを使ったcssのテキスト非表示＆ロールオーバーできる画像の方法をネットで見て知ったのですが
この表示された画像自体をマージンor余白で位置調整する事はできないのでしょうか？
下の<div id="move">のように全体をdivでくくってそれにマージンor余白指定すれば動かせましたが
今作っているhtmlでやろうとすると結構な数のdivタグ作る事にもなるので・・・

<div id="move"><a href="./" id="method">テスト<span></span></a></div>
a#method,a#method span{
display:block;
background:#FFFFFF url(botton1.gif) no-repeat 0px 0px;
width: 176px;
height: 40px;}
a#method{
position:relative;
/* \*/
overflow: hidden;
line-height:40px;
/* */
text-align:center;
/* \*//*/
font-size:10px;
/* */ }
a#method span{
position:absolute;
top:0;
left:0;
z-index:1;
cursor: pointer;}
a:hover#method,a:hover#method span{
background-position: 0 -40px;}

久しぶりにやらせじゃないツンデレを見たよ

>>565
余計なspanならいいのかよ・・・

>>567
空spanは気にしないという方向で・・・
以前はテキストインデントで文字を飛ばす方法をやっていましたが
非推奨だしやめろとの声で調べてこの方法を知ったのですが・・・

＞非推奨

空SPANはもっと非推奨だっての

色々調べた結果今一番標準的なのがGilder Levin Methodとあったのですが、違うのでしょうか
どなたかこのリンク文字非表示＆画像ボタンの方法で得策があれば教えて下さい・・・

SEO厨はスレ違い

text-indentって非推奨だったのか

>>573
誰がそんなことを言ったのですか｡

>>574
>>568

>>575
ありがとうございます｡
よく読めば､ >>573は､
｢text-indent (で文字を飛ばす方法) って非推奨だったのか｣
と補って解釈すべきだと分かりますね｡

text-indentで文字を飛ばすテクニック (いわゆるオフ ･ レフト) も､ 要は使いようです｡
正しい使い方と間違った使い方が次の文書によくまとまっていますので､ 参考にするといいと思います｡
http://www.marguerite.jp/Nihongo/HowToMakeYourWeb/Columns/forHomepageReader.html
http://www.marguerite.jp/Nihongo/HowToMakeYourWeb/Columns/ViewableWithoutImage.html#Off-left

>正しい使い方と間違った使い方
実際には「現実に即した使い方」と「理想の使い方」だから・・・

「２つのブロック要素があって一方のブロック要素内の見出し要素（背景に画像を指定）の手前にもう一方のブロック要素（内の画像）を重ねたい」
のですが、上手く行きません。
両方のブロックにz-indexで前後をつけるなどして
Firefox、safariなどでは簡単にできるのですが、IE7だとどうしても見出し要素の下に隠れてしまいます。
どなたかご存知の方教えてください。お願い致します。

>>578
質問者ならソース出せ

初心者が使いたがる要素、position、overflow、z-index。
cssは魔法の杖だとでも思ってるからタチ悪い。

ここの回答者達もタチ悪いよ。

当然でしょ。

レベル低いしな。

自分でちょっとしごいてから使うといいよ

CSS使うなら、IEだけでチェックするのはやめて欲しい
ってなサイトがアホみたいにある

IE依存なとこはさっさと潰れて欲しいな

IE7がIE6までの描画を一切排除して標準準拠しててくれたら楽しかったのに

http://yahoo.co.jp/みたいにブラウザで文字の大きさを変更すると
テーブルみたいなものもいっしょに大きくなるんですけど、
IE・Firefox・Operaともに同じ結果でした。
自分で書いてみたんですけどうまくできません。
どこをなおしたらよろしいのでしょうか

.body {
width:600px;　/*ここを80％とかにしてもできませんでした*/
margin-left:auto;
margin-right:auto;
border:1px #000000 solid;

}

何が同じ結果だったのか、何ができなかったのかが分からない。

>>587
お手本があるならソース見れ

見てもわからねえからきいてんだよｗ

>>578
スレ違い。CSS関係ない。

ごめん、>>578じゃなくて>>587。

どこが関係ないのかわかっていってるの？

最近、>>590みたいな逆ギレをよく見かけるな。
逆ギレすれば誰か教えてくれるってんで、味しめてんだろ。
見てわからない事を恥ずかしいと思わんか。地道に勉強するのが一番だ。

>>592=>>594
CSSと関係ないところを説明ヨロ

>>595
591は594じゃないよ。
それとスレ違いだから初心者スレのほうがいいと思うよ。

CSSとかんけいあるだろ。
説明できないのか？

関係あるならおまえが説明しろよボケ

CSSで設定してあるんだから関係あんだろ！
クズ回答者はくるな！

関係あると思うんなら答えろよクズｗｗｗ

CSSに関係あるか否か以前の問題だろ
初心者は去れということだ

いやCSSに関係あるなら初心者でもいいよ・・・

むしろ誰もこたえられないのに俺は悲しい

関係ないことに答えてたらスレ違い

この時間はレベル低いから夜まで回答まってたほうがいいよ

ワンモアセッ！

高レベルの>>605が答えてくださるそうです。

〜〜〜〜〜〜ここまで俺の自演〜〜〜〜〜〜〜

>>587
font-size height width top lefの値をemで設定してやればいいと思う。

(；ﾟдﾟ)・・・・・・・・・・・・・・・。

高レベル者が来たぞ

<li>の後の<dl>がIEだと改行されるんだけど、対処法ありますか

liのあとにdlってどういうソースだよ

dlで定義したものをリスト化って考えだけど、意味的におかしいですかね

dlって「定義リスト」なので初めからリストですが何か。

ていうかそれのどこがCSSなんだｙｐ

こうも低レベルな質問が続くと生きる気力が失われていきます

1. *******
2. *******
3. *******
・画像
説明文
・画像
説明文
4. ******

的なことを表現しとうと思ってました。

>>615
CSSで対処できるかなと思いまして。質問に至ったわけですが。

意味的におかしいみたいなので考えなおします

>>617
いや、それならいいけど
>改行
あたりまえじゃん。その図でも改行入ってるけど
何がしたいんだ。

>>617
論理構造でマークアップしようとしているあなたは方向として間違っていない。
仕様書を読めばすぐ解決するだろう。
CSSはバグだらけだから期待しない方がいい。

3. ******　
の ******** が改行されて、

3.
********
となるんですよね。IEのみ

ソースで言うと、

<ol>
<li>text</li>
<li>text</li>
<li>text
<dl>
<dt>image</dt>
<dd>text</dd>
</dl>
</li>
<li>text</li>
</ol>

ol li dl dt dd にはmargin,padding ともに 0です。

ttp://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
ここにそれらのことが書かれていたのですが、5年前の件ですので、
現在なら対処法が存在するかなと思いました。

>>620
XP SP2 IE6で再現せず。
出るソース出してみ。

閲覧者のユーザーCSSを無効にする方法教えてください

すみません、ソース間違えてました。

<ol>
<li>text</li>
<li>text</li>
<li>
<dl>
<dt>image</dt>
<dd>text</dd>
</dl>
</li>
<li>text</li>
</ol>

dl前のliにはtextは記述しません。

Fx2 Opera9.02 NN7.1 Safari2.0.4 では改行されず、
IEのみ改行されました。

>>622
この言葉を使うときがこようとは・・・
逝ってよし。

>>623
やっぱ再現しねーよ？

>>623
すまん、したわ。
dl {display:inline;}

>>625

無事同じ高さになりました。
お手数おかけしました。本当にありがとう。

>>623
ttp://members.at.infoseek.co.jp/cssbug/detail/winie/b028.html

ﾜﾛｽ

外部スタイルシートと直書きを併用するときは
head要素内に２つ分指定しないといけないのですか？

>>629
併用ってか上書きするだけ

全体的な幅760pxにしてまして、ヘッダーのナビゲーション部分を
1つ95pxのボタンを計8つ横に並べています。
サイト上では
■■■■■■■■

っと表示されるのですが、印刷画面では
■■■■■■■■
■

というような表示になってしまいます。最後ボタンの幅を
94pxにすると1列に表示されます。

こういう現象は単に印刷設定（各環境）の問題でしょうか？
それともスタイルの設定が悪いのでしょうか？

>>631
ソース

CSSでfloatを使った段組みをする時に

|ヘッダー|
|ﾒﾆｭ|メイン|
|フッター|

というのはよくある配置の仕方だと思うんだけど

|ヘッダー　　　|
|ﾒﾆｭ|メイン　　|
|ｻﾌﾞ1|ｻﾌﾞ2|ｻﾌﾞ3|
|フッター　　　|

としたい場合どういう風にHTMLとCSS書くといいでしょうか？

>>633
上のcssが書けるなら、当然下も書ける。
出来ないのは勉強してないから。
まさか代わりにソース書いてくれとでも？

>>637
いや書けることは書けるんだけど


<div id="上の段">
<div id="メニュ">
<br />
</div>
<div id="メイン">
<br />
</div>
</div>

<div id="下の段">
<div id="サブ1">
<br />
</div>
<div id="サブ2">
<br />
</div>
<div id="サブ3">
<br />
</div>
</div>

こんな感じで組んでいった時にclear: both;の入れ方とかどうしたらいいのか・・・

そんなんでわかるわけないだろ。
clearしたい所に入れりゃいいだけ。

＞<br />
(　ﾟдﾟ)

基礎からやり直してこいや

<div id="all">
<div class="box">
ごにょごにょ</div>
<div class="box">
ごにょごにょ</div>
　:
　:
<div class="box">
ごにょごにょ</div>
<div class="box">
ごにょごにょ</div>
</div>

.box {float;left;}
って感じので、プリントアウトしたときに数ページに渡るような場合
<div class="box">
ごにょごにょ</div>
が部分的にプリントアウトされなかったりってことがしょっちゅうなんだけど
何か対策ってある?

pre {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
人の文章を載せる時に、改行の部分や文章によっては横長になりそうなものを
こちらで<br>や<p>で改行するのが大変なので
preにしてかつ、上のように横スクロールバーが出ないように自動改行するようにしました。
これでほとんどのブラウザでは大丈夫なのですが
safariではそのまま改行されず横長になってしまいます。
どうすればsafariでも改行できるようになるでしょうか？

すげー迷惑

>>640
大変じゃねーよ。エディタの置き換え機能使えよ。
\n→</p>\n<p>で簡単だろうが。

>>642
どうも。
エディッタは以前使っていましたが、HTMLのソース内でやっているので
文章とは関係のない所で<p>等が入ってしまって
他に何か方法がないかと思ってpreを使ってみました。
で、ここのスレはCSSに関する質問スレなので聞いてみたわけです。

>>643
おまえに必要なのはソフトの知識のほうだ。
選択範囲り変換もできないような素人はPC初心者板行け。

INPUT要素
<input type="text" value="TEST">
のテキスト縦位置を指定（上揃え、中央、下揃え）する事は可能でしょうか？

意味わからん

>white-space: -moz-pre-wrap; /* Mozilla */
>white-space: -pre-wrap; /* Opera 4-6 */
>white-space: -o-pre-wrap; /* Opera 7 */
>white-space: pre-wrap; /* CSS3 */
>word-wrap: break-word; /* IE 5.5+ */


640 のこれって何？ white-spaceにそんな値あるの？
おねがい、だれかおしえて。

ググレカス

いや、ぐぐってわかんなかったから聞いてる。
どういうキーワードでぐぐったらいいか教えてくれ。

>>649
white-space: -moz-pre-wrap; の検索結果 約 17,100,000 件中 1 - 10 件目 (0.28 秒)
PC初心者スレへ

>>650
それじゃどうやっても-moz-pre-wrapの情報には
たどりつけないぞ！

>>650
ぐぐりかた自分で調べた。>>651のいう通りそれじゃ駄目だ。

moz-pre-wrap の検索結果 約 999 件中 1 - 100 件目

ぐっと減るな

結局、これでぐぐった
white-space "moz-pre-wrap"

お騒がせ。スマソ

>>645
普通その部分のテキストってフォームにぴったりくっついてるから
上下も何もないんだが・・・
例えば下に置きたいんならpadding-topだけ設定、とかそういうのじゃ駄目なのか？

>>655
やっぱり無理ですか。
フォントの種類や大きさも変わる場合があるので、フォントの大きさに合わせてpadding-topの
サイズを変えるのは面倒だと思いまして。

やりたい事は、

・position:absoluteなSPAN上に置いたINPUT要素の位置、大きさをマウス操作で変更。
・そのINPUT属性の縦位置を変更

だったんですが、見た目だけそう見えればいいので、

・position:absoluteなtableに、入力要素を示す背景色をつける
・tdタグ内にINPUTタグを用意し、背景色を透明にする（height属性は指定しない）
・文字の縦位置を変えるときは、tdタグのvertical-align属性を変更する

で逃げれそうです。
有難うございました。

タグタグ大変だな。

>>655
人の話全然聞いてないだろ・・・

まちがえた、>>656宛だ・・・
たぶんやりたいことはできるが質問の仕方が果てしなく駄目。

>>659
いや申し訳ない。。。おっしゃる通り

>>488
サトイモにみえた
そんだｋ

CSSでfloatで4段組みのマルチカラムにする時に
|１右端|２右中|３左中|４左端|　とするときに

そのまま
<div id="マルチ">
<div id="１左端">　略　</div>
<div id="２左中">　略　</div>
<div id="３右中">　略　</div>
<div id="４右端">　略　</div>
</div>
と、そのまま続けた方がいいのか

<div id="マルチ">
<div id="左マルチ">
<div id="１左端">　略　</div>
<div id="２右中">　略　</div>
</div>
<div id="右マルチ">
<div id="３左中">　略　</div>
<div id="４右端">　略　</div>
</div>
</div>
のように左と右でわけて、
そのなかでまた左と右にわけてマルチカラムにするののどちらがよいでしょうか？

お好きにどうぞ

なぜわける必要があるのだろう

たぶん、CSSでレイアウトするときにどちらの方が
やりやすいかとか考えているんだと思うけど
HTMLは文書の構造のそって書くのが基本だから
構造上2つにわける必要がないのなら
わけない方がいい。

つまり、レイアウト優先でHTMLを書くのよくない
と言うこと。

まあ、程度問題だけどね。

>>663-665
ありがとうございます。
分ける理由ですがCSSでfloatさせたときにブラウザの違いによる見え方が気になっています
複数の環境（とくに古いブラウザ）がないので

>>666
言い訳にすんなよ、古いブラウザ入れりゃいいだろ。
ttp://browsers.evolt.org/

>>667
ぶっw
そんなサイトあったのか

古いブラウザにこだわってたら何もできないぜ

問題は新しいくせに駄目なブラウザだ。
しかもシェアのデカい。

もうIEネタはいいよ。

そんなことよりIE7は見た目と”使い勝手”が大きく変わっているから
ここを狙ってFirefoxなりOperaなりを使わさせるような
キャンペーンでもしない限り一生IEのネタが続くんだろうな

そんな俺はSafariにほんの少し期待していたりする

>>671
日本語でおＫ

おまいらフォントの設定どうしてる？
これ埋めて栗
{
color: #;
font-family: ;
font-size: ;
line-height: ;
letter-spacing: ;
}

だが断る。

少なくともfont-sizeだけは消しとけ。

欽ちゃんファミリーとかしかおもいつかなかった

{
color: #333;
font-size: 78%;
line-height: 160%;
}

>>676
>>676
>>676

もし初歩的な知識だったらすみません。
３カラム形式のブログ（geeklog）のデザインテンプレートを修正しているのですが、
Netscape7.1だけ表示がおかしくなってしまいます。

具体的には左カラムの長さに合わせて、全体の長さが固定されてしまい、
中央カラム、右カラム部分はスクロールバーも出ず、中身が切られてしまいます。
IE、Opera、FireFoxなどでは全く問題ないので、ネスケ依存の何かでしょうか。

該当しそうなCSSのバグがあればヒントを教えてください。

Netscapeは無視でよろしい。

>>678
最後にフロート解除してないんじゃないのか

リストマークを画像にしたくて、li属性にbackground-imageを以下の様に使っているのですが、

.li {
list-style-position: outside;
background-image: url(xxxx.gif);
background-repeat: no-repeat;
}

そうすると2行目が字下げされずに、リストマークの位置から始まってしまいます。
どの様に回避すればよろしいでしょうか。教えて下さい。

>>681
・liの前のゴミ。
・background-imageではなくlist-image。

>>681
別にbackgroundでも構わないけど、その場合画像分をpaddingしないとね。
それ以前にソース間違えてるし、list-style消してないしね。

list-imageはブラウザ互換を取ろうとしたとき使い物にならんよね。

そうなん？
list-style-image使いまくりなんだがマズいのか？

>>685
気にするな、そんなことを気にしてる奴ほど
もっと気にしなきゃならないところを気にしてないから。
ていうかそんな古いブラウザにCSS読み込ませるほうがおかしい。

>>685
俺はそんな事は気にしてないし、古いブラウザは捨ててるんだけど、
画像の大きさによっては、list-style-imageでは上手く行かない事もあるしね。

>>687
つまりおまえのやりかたは
複数行に跨ったり文字の大きさを変えられたり
そういうのを全然想定してない限定的な使い方ってだけじゃないか。
使えねー。

>>688
そんな事ないでしょ。想像力ないよね。
大体なんでそうlist-style-imageでなくてはいけないって姿勢なのよ。
どっちだっていいじゃない。

リストが複数行に跨がるって、それリスト？

>>690
>>690
>>690

>>689
どっちだっていいよ。
ただどっちだってずれる可能性は同じなのに
自分の知識不足で片方を貶めるのは間違ってる。

>>689
最初からそう言ってるよ。
backgroundはダメだと決めつけてる人に言ってよ。

background使ってる人にはアメちゃんあげます

>>693
おまえ本当に自分は棚上げだな。
発端は>>684でlist-imgを完全否定。
突っ掛かった>>688はbgじゃ限定的な使い方になるとだけ言ってて
>>684のbg>>>listの完全優位を否定してるだけじゃん。

一時期MBNか何かにリストはずれるからbackgroundで
なんて記事が載ったのを鵜呑みにした奴がけっこう多いんだよ。
DTPと間違えてるったりゃありゃしない

>>695
あのさあ、>>693は俺じゃないよ。何カリカリしてるんだよ皆さん。

>>697
おまえじゃないんならおまえがカリカリしないでちゃんと流れ嫁よｗ

なんだ、誰でもいいから叩きたいのね。どうぞご自由に。

( ﾟдﾟ)流れ読めって叩きだったのか・・

俺含めて餓鬼ばっかだな

ガキなんて言って叩かないでください＞＜

昨日、ブログの表示でNetscapeが切れるという書き込みをしたものです。
フロート解除も試してみたのですが、うまくいきませんでした。

geeklogのデフォルトのデザインテンプレートを使っても、表示の不具合が出てしまいます。
スクリーンショットをとってみました。

▼IEの場合 … 中央の中身の分、左右のバーも伸びてページスクロールが出る
ttp://www-2ch.net:8080/up/download/1183161282637883.eR6UlD

▼Netscape7.1の場合 … 中央の長さが左バーと同じ長さで切れる。
左バーの中身を増やしたり減らしたりすると、その長さに応じて伸縮する。
ttp://www-2ch.net:8080/up/download/1183161408969116.s7grjF

表示がおかしいのはネスケだけで他は全く正常です。
geeklogのデフォルト自体が抱えている不具合なので、テンプレートが悪いのか
CSSが悪いのかサッパリわからなくなってしまいました。

▼geeklogのページ構成表
ttp://wiki.geeklog.jp/index.php/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%A8%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88

ネスケを無視したいのですが、偉い人がネスケユーザーだったのでそうもいきません…orz
ネスケだけが表示が途切れるようなバグがありましたら教えてください。

ソースも出さないでエスパー待ちしたいならご自由に

>>703
＞geeklogのデフォルトのデザインテンプレートを使っても、表示の不具合が出てしまいます。
つまりgeeklogの問題なんだろ。制作者に聞け。
それよりブログはブログ板池。

こんなスレッド立ててるんじゃ

「 キ モ オ タ 」

とか

「 肛 門 」

とか呼ばれるのも当然だね♪

IE5系のサポートは打ち切るべきでしょうか？
あと、Windows2000SP4でデフォルト（というより導入出来る）のIEのバージョンはいくつでしょうか？

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

IE5のサポートをしてるのはMSであってあんたじゃない。
Win2000の最新IE6は多分6.0.2900.2180、これからもまだ上がると思うよ。

2900.2180ってIE6SP2だよね。
SP2ってWin2kにインストールできたっけ？
http://support.microsoft.com/kb/164539/ja

win2KSP4の俺が答えよう
6.0.2800.1160
SP1だ

>>709
SP4でうぃんあぷでたまでしますた

>>681
backgroundだと、paddingしても画像ごとpaddingされちゃいませんか？

>>696
小●空間とかその他テンプレートサイトにも良く同じことが書いてありますね。
liにbackground指定じゃなくて、li aに指定せよ、というのも見たことがあります。

>>712
おまえはpadingの仕様を勘違いしている。

>>712
li aじゃなくてliに普通にlist-imageでしなさいよ・・・・
ていうかあんたは基礎のは祖から勉強してきなさい・・・

>>713
>>714
おまえらも勉強しろよ。
なんだこの微妙な釣りは。

スゴいレベル低下現象が起きている
なぜだっ

どこからか、お子様たちが大量に流れ込んでるんじゃないかな。
でも、夏休みとかじゃないよね？ なぞだね。

もうすぐ厨達の夏が来る。
その前哨戦だ。

>>715のほうが釣りに見える件

>>712
とりあえずこれでもどうぞ
ttp://zyco.abz.jp/design/index4.shtml

外部CSSでフォントについても設定しているんですが、
ページの中にある一部の文字列だけCSSが効いていない状態で表示させるには、
何かよい方法はないのでしょうか。
Wikipediaですと<nowiki></nowiki>というタグがあったりしますが、
CSSでは何かそういったタグはないのでしょうか。
ご存知でしたら教えてください。
お願いします。

字体設定されると迷惑

>>721
cssを全く勉強してないんですね。

>>723
いけませんか？

いけません。テンプレ嫁。

質問です。

input type="text"
input type="button"

にそれぞれ適用するスタイルを変えたいのですが、
InternetExplorer6にて、属性セレクタ的な事は不可能なのでしょうか？

input[type="button"] {
background-color: #ccc;
color:#f00;
}

input[type="text"]{
background-color: #000;
color:#fff;
}

こんなCSSを共通で設定して、一気に適用したいのです。
やっぱりclassで分類して設定するしかないですかね？

宜しくお願いします。

IEはアホなので[type="button"]みたいなセレクタはもれなくスルーしてくれる。

IEってのは俺みたいだな

>>728
じゃあいますぐ芯で欲しい

>>726
classでやりゃーええのんちゃう？

list-imageとか属性セレクタとか
特定ブラウザ限定の機能使ってる香具師多いのな。
おまいらはどのブラウザに表示対応させてる？
漏れはWinのIEと火狐くらいは最低限…て感じだが。

Win IE6.0
Firefox

特定ブラウザ固有のは使わない

＞list-imageとか属性セレクタとか
＞特定ブラウザ限定の機能使ってる香具師多いのな。
多くない。超初心者が大発生してるだけ。

list-image って特定ブラウザ限定というほど限定されてる？

>>732
やっぱユーザの多いWinIEと厳密なCSSの火狐外せないよね。

>>733
漏れも仕事で商用サイト作る事おおいから、特定ブラウザ依存のCSSは避けてる。
だけどそれでもブラウザによってレイアウトががっつり崩れるのが泣ける。
どうみても初心者です。ほんt(ry

>>735
web標準はそういう言い方じゃないね

input:hoverのような擬似要素はIEだと機能しないのはなぜですか

>>734
初心者という括りなら、ここにもidを使うメリットが
今だ理解出来て無いほどの初心者が一人…w
まぁ古いブラウザや汎用性を切り捨てるのも効率を考えればアリなわけだし。

>>735
限定と言うには微妙かもしんないけど、旧式寝助使ってる人もちらほら居るし。
backgroundとpaddingでやるのも大して面倒ではないし、どっちみち位置の調整しなきゃいけない。
だったら汎用性高い方がいいんじゃね？って程度かな。
後々はそっちに移っていくんだろうけど。

>>738
そういう仕様だから

>>739
ネスケはむしろ別ページ作るかCSS切ってやった方が親切

ていうか崩れて読めないとかなるわけでもなく
リストが画像でなく丸点になるだけで何が問題なんだか。

>>742
まったくそうなんだけど、ここはそういうスレなんだから…。

いや、ここはそういうことを語り合うスレでも何でもなく
単に質問が来たら答えるスレだ

正直経営者は古いブラウザのサポートを積極的に打ち切るべき

Win98meユーザーとかFirefoxもOperaも使えるのに
Mac使いならOSX使えるのに
面倒だからとか今のままで十分とか使い勝手がとか言う始末

いつまでも古い環境にしがみついてる頑固者に対応するだけ無駄無駄無駄むだぁあああ

>>745
だから語り合うスレではないらしいぞ。

>>745
それは是非IEユーザに言って消えてくれたまえ

逆に言えば、IEさえ対応してればいいってことか？
text-overflowとか、ime-modeとか、text-justifyとか、scrollbarなんちゃらとか
実は結構使えるのもあったり

属性セレクタの場合は、同じ事を実現する機能がIEには無いってのは致命的なんだよな。
classでやればいいじゃないかと言うが、既にあるサイトをメンテナンスする場合は、
何百とあるページ全てに手を入れなければならなくなる。

>>748
すくろーるばーなんちゃらが最低な件。
それはさておきCSS3先行実装と色々とはき違えてるぞおまえ。

CSS3だろうが何だろうが、今書けばどれもinvalidで同じことだ品

>>751
うはっｗきたｗ

>>751
全然そんなこと話してないからゲラウトヒア

>>749
php

PHPがどうかしたのか？

input type="hogehoge"に直接プロパティを与える方法の回答ではないな。

phpで書き換えろってことじゃないの？
あるいは、ラップ

どっちにしろ解決策ではないような気がするが

ああ、なんだか馬鹿ばっか。

#bottom {
　　　　　　　background-image: url(../imges/footer.png);
width: 286px;
clear: both;
margin-top: 0px;
margin-right: 0px;
margin-bottom: -116px;
margin-left: 514px;
padding: 0px;
height: 216px;
}

上記のようにCSSで背景画像を表示しているのですが、
IE（6〜）だと問題ないのですが、Firefox(v.2)の場合
margin-bottom: -116px;
が反映されずに画像を下半分切ってくれません。
Firefoxだとマイナスは指定できないのですか？

>>748
CSSの問題で、PHPで対応しろってのがおかしいだろう。
直接指定できるようになるわけでもないし、かといって
具体的にPHPでどうするのか一切触れないで煽るばかりだし。

>>759
意味不明。マイナスマージンは画像を切るものじゃないんだが。
下マージンをマイナスにしたのなら、その下のブロックが正規に置かれる場所から
マイナスマージン分だけ上に迫り上がる感じになるんだぞ？
ちゃんとIEでもFxでもそういう動作になったが。

>>759
最初にIEに合わせて作るから、マイナスmarginなんてワケ分からん事やりだすんだ。

ていうかあのソースだとIEでもFxでも変わらない件

いつも思うんだが、CSSに詳しくない人がやたら抽象的な回答をして混乱させてるように思うのは俺だけ？
知らないなら無理に答えなくていいのに。

無駄レスしてるアンタが手本を示せよw

>764
逆。知ってるから色んな状況を想定してしまって、具体的に答えられない。
だからといって、根掘り葉掘り状況を聞くのは面倒くさいから、
方向性や周辺の事しか示せなくなるわけよ。何がしたいの？って話。

いいんだよ
どの質問スレでも答えてるやつは中級者が多い
出された問題を解いて正解した場合は感謝されるし
不正解でも匿名だから責任は問われない

そういうもんだと思って見てればいい

IEに合わせるからこうなるんだとかPHPでやれとか回答になってないのは確かだな

IEに合わせて作るなってのは基本

最初にモジラ系に合わせて作れば
他ブラウザで見た時に崩れるって事がかなり減るもんな

Safariの方がいいって噂を聞いたが、実際どうなんだ？
日本語表示や動作不安定といった要素は抜きにして

何にしてもIEよりはマシだろうな

IEはIEでしか使えないサービス以外は使わない


IEでしか使えないサービスって大抵使いがてが悪かったりする

>>773
DMM

段組のサムネールを左揃えにして画面の中央に表示したいのですが、どのようなCSSを書けばよいのでしょうか？

つ【テンプレ】

>>773
ノータッチ・デプロイメント、ClickOnce、ActiveX。
続けざまに開発させられたぜ。

IMGタグに関しての質問です。

srcで指定した画像が表示できなかった場合に、赤色のバツマークが表示されますが、
そのバツマークに変わるものをこちらでデフォとして設定できる方法はないでしょうか？

スレ違いでしたらスイマセン。

ない。

それ以前に表示されないような事態を作るな

どうですか。。
予め、httpでgetをかけて見ておくぐらいしかなさそうですね。
どもでした。

altを知らん奴が回答するなよ。

>>782
×馬鹿

IEで見たときだけ文字が少し大きいです。
これは私の環境の問題でしょうか？

>>784
ブラウザのデフォルト文字サイズの違いじやねーの

>>784
IEの互換モードの問題なら、フォントサイズは「small」とかではなく、
全部％で指定するようにすればいい。

>>785-786
サンクス。

ttp://sakuratan.ddo.jp/imgboard/img-box/img20070708131751.gif

こんなかんじでWikiを真似してるんだけど画面を縮めたときに目次が
縦にのびちゃう・・・。CSSではマージンを設定しているけどこれが
駄目なの？
分かる方、お願いします。

駄目とかではなくそうしてるんだから当然。

>>788
width min-width whitespace とかを指定する。

289さん、290さんアドバイスありがとうございます。

min-widthですか、、、
やってみます

widthでいけました！
ありがとうございました＾＾；

なんだこのアホな質問

http://sakuratan.ddo.jp/imgboard/img-box/img20070708141457.gif
私はまだ、習ったばかりでして・・・今もこうやってwikiを真似しながら
cssを勉強している次第です；

ここまでできたのですが、後一つだけわからないことがあります。
inputタグのボタンについてですが、文字を太字にするにはどうすれば
いいのでしょうか?

何度もすいません。

>>794
プロパティ一個でできるだろうがよ！

inputのプロパティですか、、、?
調べてみます

あ、CSSの方にありました。
input, select, textarea　これですよね？

文字のサイズの変え方は説明されていましたが、太字については説明
されていませんでした・・・。
どなたかお願いします

>>796-797
・・・・・・・・・・・・・・・・・・・
基礎の基礎から勉強して恋

>>798以外の方、ヒントだけでもお願いします

プロパティが何なのか調べてこい。

>>800以外の方でお願いします

だが断る。

初心者を名乗っても何のメリットもありません。
テンプレを読み、基礎を勉強してから質問して下さい。

最低限も理解してないでこんなとこ来るなマジで

>>802-804以外の方お願い

>>794
wikiのcssはこうなってるが、これでもできんってこと？
#searchGoButton {
padding-left: .5em;
padding-right: .5em;
font-weight: bold;
}

↓例の画像

童貞の方お願い

>806
799,801,805は私ではありません・・・。

font-weight: bold;ですか。こんなプロパティがあったんですねぇ。
どうも親切にありがとうございました。

二度と来んな馬鹿

@media all and (min-width : 0)

CSS3 だと @media でこんな指定が通るらしいのですが（>2の validator で通った）、
これについての文法が日本語訳で書かれている場所がありましたら教えてください。

text-indent:-999pxを使わずにa:hoverでのリンクのロールオーバーなんだけど
下記でやるとIE6のみうまく動かない（a:hoverで背景が切り替わらない)んだよね
何か対処法無いか知恵を貸してくれないか

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>test</title>
<style type="text/css">
#navi {position:relative;height:50px;}
#navi li a {overflow:hidden;display:block;width:100px;height:50px;position:absolute;top:0;zoom:100%;}
#navi li a#a {left:0;}
#navi li a#b {left:100px;}
#navi li a#c {left:200px;}
#navi li a#d {left:300px;}
#navi li a span {position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
#navi li a#a span {background:#ffa;}
#navi li a#b span {background:#faf;}
#navi li a#c span {background:#aff;}
#navi li a#d span {background:#aaa;}
#navi li a:hover span {background:#666 !important;}
</style></head>
<body>
<ul id="navi">
<li><a id="a" href="01.asp">aaaaaaaaaaaaaaaaaaaaaa<span></span></a></li>
<li><a id="b" href="02.asp">bbbbbbbbbbbbbbbbbbbbbb<span></span></a></li>
<li><a id="c" href="03.asp">cccccccccccccccccccccc<span></span></a></li>
<li><a id="d" href="04.asp">dddddddddddddddddddddd<span></span></a></li>
</ul>
</body></html>

>>812
君がちゃんとcssを勉強した結果のソースとはとても思えない。
ヤル気があるならもう一度マトモなソース書いて貼ってくれよ。
コピって来たソースなら、元ソースのプロパティをちゃんと理解した上で改変すべき。

>>813
オリジナルですよ
どこがまともじゃない?
空spanは、ナンセンスかもしれんが、一応validなんだが

>>812
原因は分からんが、
#navi li a:hover {background:#666} なり
#navi li a:hover {border-style:none} なり
適当なものをhoverに適用するとちゃんと認識する。

>>815
サンクス
そう、a:hoverに対しての指定ではいけるんだが、spanをはさむと駄目なんだ
IE6以外はいけるんでIE6固有の解釈によるんだろうけれど、あと一歩攻めきれない
ちなみに、onmouseしている状態でリロードすると、ちゃんと解釈されたりするんだけれど

>>816
ん？ こういうことだぞ？ hoverでの指定で背景色を指定してるわけではない。
#navi li a:hover {border-style:none}
#navi li a:hover span {background:#666 !important;}

>>817
ををををっ
感謝！
ありがとう、とりあえず希望の動作になったよ
使わせてもらいます
多謝

>>813
ちゃんと勉強して理解して自分で綺麗なソース掛けるなら質問スレで質問なんてしないだろうが。

ここ最近、煽りたい盛りの厨房が台頭してきてるな。
夏休みか。

質問者は馬鹿が前提
理屈は要らない
答えだけ欲しい

*{margin:0px;padding:0px;border:0px;}
#menu{float:left;}
#menu li{list-style-type:none;}
#menu a{display:block;width:170px;height:25px;border-bottom:#FFFFFF solid 1px;}
#submenu{width:629px;height:129px;float:left;background:#FFFFFF url(images/menuback.jpg) no-repeat top left;border-bottom:#FFFFFF solid 1px;}

<ul id="menu">
<li><a href="#"><img src="images/menuA.jpg" alt="A"></a></li>
<li><a href="#"><img src="images/menuB.jpg" alt="B"></a></li>
<li><a href="#"><img src="images/menuC.jpg" alt="C"></a></li>
<li><a href="#"><img src="images/menuD.jpg" alt="D"></a></li>
<li><a href="#"><img src="images/menuE.jpg" alt="E"></a></li>
</ul>
<div id="submenu">
<img src="images/menuF.gif" alt="F">
<img src="images/menuG.gif" alt="G">
</div>

munuAからEのリスト間がIE6だとなぜか大きく開いてしまうのですがなぜでしょうか。

>>821
#menu li{list-style-type:none;display:inline;}
　　　　　　　　　　　　　　　　　　^^^^^^^^^^^

>>822
ありがとうございます。インライン指定で綺麗に揃いました。

NN7.1のみ、除外ってCSSハックありますか？

>>824
無いっぽいね
ttp://centricle.com/ref/css/filters/

つかNN7のみハックする必要性ってある?
コーディングを見直したほうがいいと思う

N7はCSS2.0だから微妙に違うんで除外したいときは確かにあるな。

<a href="top.htm" style="color:red">TOP</a>

上記の例で、埋め込みスタイルシートや外部スタイルシートを使わないで
hover したときに color:blue で表示したいのですがどうすればよいでしょうか？

>>827
>埋め込みスタイルシートや外部スタイルシートを使わないで
この時点でスレ違いって気付け・・・

>>827
CSSを使わないならJavaScriptとDHTMLあたりでどうにかなるから、該当スレに行くよろし

>>827
PHPを全て憶える必要がある

>>827
JavaScriptからCSSをいじることになるけど、
それならハナから埋め込みスタイルシートで書けばいいと思うけどな。
どうしてインラインじゃないとだめなの？

一時しのぎしたいからだろ

打ち消し線を太くすることってできる？
text-decoration: line-throughで打ち消し線は引けるんだけど、太くする方法がどこにも載ってない。
borderじゃ違うし･･･無理かな？

>>833
無理。背景画像で何とかしたら？

インラインスタイルで:hoverが使えないかってことじゃないのか？

使えないじゃん

携帯でCSSを使いたいのですが、何か参考になるサイトなどありませんでしょうか？
各キャリアごとのDOCUMENTTYPE宣言や、CSS対応機種などが載っているサイトを探しています。

>>835
新しい仕様なら使える、とか見た事あった気がする

>>837
ttp://www.marguerite.jp/Nihongo/HowToMakeYourWeb/Mobile/CSS.html

>>839
ありがとうございます。
DoCoMoではCSSはまだ未対応と言っていいくらい使えるのが少ないのですね。
CSSは使わずに携帯サイトを作ろうと思います。
ありがとうございました。

<object>でスクロールバーを非表示にするにはどうすればいいのでしょうか？
scrollingが使えなくて困っております。
<iflame>ではjsとの併用で画面がちらつくので<object>を使用したいのですが。

overflowで解決しました。

テンプレの次のサイトが無くなってるので報告

・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml

IEは@importが3階層までっていうけど

style1 -> style2 -> style3 -> style4 -> style5

日本語でおＫ

pにfont-sizeを指定しても、子要素（aやdel）に継承されないんだがなんでだろう？
IEとFireFoxで表示が変わらなかったから、多分こっちの記述に問題があると思うんだが…
ちゃんとIEは標準モードになるよう指定してる。

.small { font-size: 10px; }　（外部ファイル）
<p class="small">小さくなる<a href="http://〜">大きいまま</a></p>

こんな感じ。誰か助けてくれー

>>846
全称セレクタのスタイル指定とかを見直してみれば？

IE7では希望通りになるのですがFirefox2で見たら左側が見えません。
なぜ？

<html>
<head>
</head>
<body>
<div style="width:200px; height:200px; float:left;">
左側に配置する
</div>
<div style="width:400px; height:200px; overflow:scroll;
position:absolute; float:left">
右側にスクロール可能なのを配置する
<div style="width:800px; height:100px;">
<div style="width:400px; height:20px;
background-color:blue;
position:absolute; left:100px; top:20px;" />
</div>
</div>
</body>
</html>

ちなみに右側（２つめ）のdivのposition:absoluteをはずすと段組は希望通りなのだけど
青い四角が外側へはみ出ちゃう（ＩＥははみ出ない）。

>>848
まずIEを基準に作るのは今すぐやめましょう。何度も言われてる基本中の基本です。
＞divのposition:absoluteをはずすと段組は希望通り
それはそうでしょう。無意味な指定です。
全体に何がやりたいのか不明なソースです。出直して来ましょう。

width固定height固定position固定。そしてそれを連発。
そういうのはテーブルレイアウトと大差ないな。

それにpositionは扱いが難しいから、初心者にはなかなか理解できないものだ。

>850
そういうサイトに限って文字サイズがえらい小さくて読めない
IEオプションで文字だけCSSはずして大きくすると
レイアウトが糞崩れるどころが、文字が重なって読めない

IEが悪いのかデザイナのオナニーCSSなのか

文字だけは相対指定でもイヤか？

<div>

<table>.........</table>

</div>

というような場合、IEではtableのmargin-bottomが有効にならないのですが
何とか有効にする方法はありませんでしょうか？

>>853
相殺のこと？

>>853
一応IEでも有効にはなっている。
但しdivの下に取られてるという状態。当然おかしい。
divのpadding-bottomのほうに設定しろ。

>>853
http://cssbug.at.infoseek.co.jp/detail/winie/b134.html

divとfloatを使って左端、中央、右端にテキストを配置したいのですが
AAA
　　　　　　　　BBB
　　　　　　　　　　　　　　　　CCC
やら
AAABBB
　　　　　　　　　　　　　　　　CCC
の様になってしまいます

<div class="underarea" style="float:left;">AAA</div>
<div class="underarea" style="margin-left:auto;margin-right:auto;">BBB</div>
<div class="underarea" style="float:right;">CCC</div>
やら
<div class="underarea" style="float:left;">AAA</div>
<div class="underarea" style="float:left;margin-left:auto;margin-right:auto;">BBB</div>
<div class="underarea" style="float:right;">CCC</div>
の様にしているのですが、サッパリです

AAA　　　　　BBB　　　　　CCC
の様に表示させたいのですが、如何すればよいのでしょうか？

>>857訂正
#添削した underarea はfont-sizeを管理している物です

divとfloatを使って左端、中央、右端にテキストを配置したいのですが 
AAA 
　　　　　　　　BBB 
　　　　　　　　　　　　　　　　CCC 
やら 
AAABBB 
　　　　　　　　　　　　　　　　CCC 
の様になってしまいます 

<div style="float:left;">AAA</div> 
<div style="margin-left:auto;margin-right:auto;">BBB</div> 
<div style="float:right;">CCC</div> 
やら 
<div style="float:left;">AAA</div> 
<div style="float:left;margin-left:auto;margin-right:auto;">BBB</div> 
<div style="float:right;">CCC</div> 
の様にしているのですが、サッパリです 

AAA　　　　　BBB　　　　　CCC 
の様に表示させたいのですが、如何すればよいのでしょうか？ 

>>858
<div style="float:left;">AAA</div>
<div style="float:right;">CCC</div>
<div style="text-align: center;">BBB</div>
3番目のtext-align: centerはとりあえずこうしたけどお好みで

>>859
出来ました！
有難う御座います！

<div style="float:left;">AAA</div>
<div style="text-align:center;">BBB</div>
<div style="float:right;">CCC</div>
なら試したのですが
>>859の物は試していませんでした・・・
まさか順番を変えただけで上手くいくだなんて・・・

基本だよワトソン君

見た目的にはなるんだろうがABCの並び順に意味はないのかね？

テーブルを使わずCSSで段組みにすると
デザインが崩れて見られなくなるブラウザがどれなのか知りたいです。
一覧にしてまとめてあるサイトってないでしょうか？

>>863
NN4

つかブラウザ差異より、コーディング技術の差異

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

コーディング技術の差異ということは、
NN4でもCSSでうまくやれば見られるということですか？

>>863はマルチ

>>864
おまいはテンプレ見てろ

*{margin:0px; padding:0px; border:0px;}
を入れるとwinXPIE6でformの見た目が変わってしまいます。
ボタンをwinXPIE6のデフォルトと同じ表示にするには、
form inputにどのようなcssを書けばいいんでしょうか。

>>867
だったら全称セレクタじゃなくてブロック要素なんて少ししかないんだから個別に書けよ

>>867
margin,padding,borderをwinXPIE6のデフォルトの値で記述

フロートで段組みしたい香具師はこのコード始めに入れてから作れ
* {
margin : 0;
padding : 0;
border : 0;
background-color : transparent;
color : #000000;
font-size : 100%;
font-weight : normal;
font-style : normal;
text-decoration : none;
}

>>870
marginとpaddingだけならまだしもcolorとかfont-sizeとか
継承するプロパティまで入れるのが意味わからん。

<a href="..."><abbr title="HyperText Markup Language">HTML</abbr> 4</a>
とかやったらリンクの色が変わらないじゃん。

>>866
マルチじゃないですよ。
前のスレで他スレで聞くって書いてきたし。

>>872
CSSはレイアウト崩れて当然。
でだしの発想が嫌いです。

>>870
その発想はちょっと前に流行してたけど、
今やいらぬバグを引き起こす可能性があるからあまりよろしくないということで
必要なものだけを指定するスタイルが流行してるよ

>>874
> 必要なものだけを指定するスタイル

とはどういうものですか｡

>>874
ﾏｼﾞか！ｵﾚも知りたい。つかそんな最新情報どこで手に入れてるんだ！！

本当に低レベルなスレなんだな

margin、paddingだけで十分だろ。
borderは場合によるし、オールドブラウザなんて捨ててるし、
その下はやりたいならどうぞってくらいだな。

>>877
一応質問スレだから初心者が多くて当然だろ

質問者＞＞＞＞＞＞＞＞＞＞＞＞＞＞＞越えられない壁＞＞＞＞＞＞＞＞上級者

>877のような香具師は少しこのスレに居過ぎ
他所の板・スレいってこい。どこのスレも同じような質問ばっかりだ

<style type="text/css">
<!--
//-->

//-->の//はどういう意味ですか？

>>880
越えられない
とか
香具師
とか
いつまでやるの？