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

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

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

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

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

【解説など】
・Web標準化Tips（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/webtips/
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
　http://www.nextindex.net/web/CSS/
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
　http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方法
　http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
　http://ike.s33.xrea.com/
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを："作れ";} 発表所
　http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

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

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

【FAQ】
Q3: CSSで段組するには？
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
　ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（Netscape4でも崩れない段組みの実例）
　ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
スタイルシートスタイルブック
　http://stylesheet-stylebook.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Hack集
http://www.jaist.ac.jp/~m-tamura/article/web/css/csshack
"通"御用達、CSSハック
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

WinIEのfloatのバグを回避する
http://www5e.biglobe.ne.jp/~bill/the/css/holly.html

>>1
スレ立て乙。
連投規制かかってるっぽかったので、続き投下しといた。

>>7-9
thx!!　連投で困ってたんだ、ホントありがと！

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

>>1,10
乙。俺は立てられなかったし。

またスレタイが……。
次ぎ立てる人は「【55th】」でおねがいしますよ〜。

CSSなら日立

すみません前スレの985なんですが、色々やってみたのですが、
まだ解決してません。分かる方いらっしゃいましたら教えて下さい。
前スレでアドバイス頂いた方々ありがとうございました。

http://pc8.2ch.net/test/read.cgi/hp/1141783690/985-988

画像を30px固定にしたいのか、
それとも文字を30px固定にしたいのか。

30pxの枠に収まりきらないそのどちらかを無理やり収めたいのか。
30pxの枠に収まりきる筈だけど、高さがそれ以上に伸びてしまうのか。

状況が全然わからないのでなんとも。

>>16
画像は高さ30pxで作ってあってそのセルにはその画像（ロゴ）しか
入っていません。（h1タグでくくってあるのはスパイダーが読みに
来たときimgのalt属性を読むとページで全体で筋が通るようにという
ことです。）
MacのFirefox1.04、Safari2.03で確認すると問題無く（セルの高さ
が下のセルの内容によって変化することなく）表示されるのですが、
WinのIE6で見ると下のセルの内容によって30pxくらいから最大100px
くらいの間で高さが変わります。（下のセルの内容が少ないほど上の
セルの高さが大きくなります。）
しつこくて申し訳ないですがよろしお願いします。

やっぱり流れ追ってない（なぜか今日はやたら眠い）んだけど
こういうことがしたいんじゃないの？＞前スレ985

998 名前：Name_Not_Found[sage] 投稿日：2006/03/26(日) 15:48:49 ID:???
ソースも流れもきちんと見てないけど
「本当に高さを指定したいのは tr なんです（＞＜）」っていうお話？

>>15
tableを入れ子にでもしないと無理だって。
この際テーブルレイアウトやめた方がいいよ。

>>18
となりのセルがrowspan="2"なんで<tr>にはheightの指定が出来ないと
思うんですが・・・

ソースそのままupした方が早いと思うよ。
それ以外の部分の影響かもしれないし。

前スレ999だったかなを見た？
画像でupしたけど、IE6もOperaもGeckoも同じように表示されてたよ。
今試してみたけど、h1の中に
<img src="test.jpg" height="30px" alt="サンプル">
って画像を放り込んでみたけどきっちり30px固定だった。

>>19
<div>でやってみたんですがid="navi"とid="content"とbodyの背景色
がそれぞれ違う色なんでこの二つのボックスの高さが一緒にならない
と何というか不揃いになっちゃいました。

>>21
ソースそのままupはﾏｽﾞｲですPHP絡んでてDBにもアクセスしてるんで
前スレの画像わざわざありがとうございます。たぶんですが、id=navi
に入ってるテキストの行数が40行とかそれくらいになる（テーブル全体
の高さが大きくなると）同じような症状が出るのではと・・・

デザイン変更も入れて考えてみますが、もしお分かりになる方がいらっ
しゃったら教えて下さい。

>>22
IEの場合、rowspanに対して均等に配置されてしまうのは避けられないんで
>>19の回答をしたんだが。。
つか大体のサイトがdivでそういうデザインをしてる。
そっちのソースを出した方がいいよ。ここのスレ的にもそっちの方が得意だろうし。

>>22
もちろん>>21は、ちゃんとコンテンツを20〜30行にしてもやったけど問題なかったよ。
ちなみにMacOS9のIE5でも表示確認済み。

ttp://zetubou.mine.nu/itoshiki/nozomu/zetubou21844.zip
こっちが表示確認に使ったソースだから、
このままで同じ状況が起きるか確認してみ。
これで変わるなら個々の環境の問題って気がする。

あと、phpは表示した後にブラウザで保存すればhtmlだけ保存できる。
phpの方のソースupされても読める人が限られて逆に困るw

>>24
何ですかこの画像はｗ
40行入れるセルが違います。id="navi"（左側）の方です。
頂いたソースで試しましたが同様の結果でした。

デザイン変更で逃げることにしました。
見た目的に微妙な感じ（意図と違う）んですが、ロゴの
背景画像に変化を付けたらどうにかなりそうだと自分に
言い聞かせてます。一応どうなったかだけ↓

<body>
<table id="layout" align="center">
<tr>
<td id="logo">
<h1>ロゴが入っています（画像）</h1>
</td>
</tr>
<tr>
<td id="navi" rowspan="2">
メニューが入っています
</td>
<td id="content">
コンテンツが入っています
</td>
</tr>
<tr>
<td id="footer" colspan="2">
フッターが入っています
</td>
</tr>
</table>
</body>

>>25
改めてソースを見てみると何の変哲もないって感じですね。。。

>>24
>phpは表示した後にブラウザで保存すればhtmlだけ保存できる
個人を特定できそうな情報を削除するのにとっても手間がかかります（＞＜）

それじゃcontentの量じゃなくてnaviの量じゃん･･･

>>25
ああ、naviの方で変わるってことか。たしかに広がっちゃうね。
tableデザインはしないので、この辺の解決方法はわからないや。

解決したみたいだけど、やっぱtable使わないでレイアウトするのが一番いいと思うよ。

>>16
スミマセン
前スレの985で書き間違えてました（988で訂正してました）

>>29は>>27へのレスです・・・頭の中が混乱気味

どんまいｗ
自己解決したようだしとりあえずよかったじゃん。

line-hightが単位なしがよいのはわかりましたが、marginやpaddingの指定値はどうすれば良いのでしょうか？
具体的には、見やすくしたいだけなので、0.5emまたはせいぜい5pxまたは2〜3%程度の指定なのですが。(ごくごく少ない値という意味です。)
また、現在文字サイズはh1〜h6をmediumに指定しているのみですが、文字サイズを揃えるのはそれで良いのでしょうか？
body{font-size:medium}は要らないですよね。

俺はmarginとかはem指定してる。
hnのフォントサイズは%指定かな。

質問なのですが、IE5.01以下をすっぴんにするCSSハックはありますか？

またはIE4以下をすっぴんにする方法はありますか？

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

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

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

>>34-35
既出>>3を見よ。
・ブラウザによる振り分け（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

>>37
ありがとうございます。
いろいろとわかりました。

しかしIE5.01以下を除く方法はないでしょうかね？

javascriptで振り分けるしかないかと。

<!--[if gte IE 5.5000 ]>
だから、リンク先に書いてあるだろが。
<![endif]-->

writing-mode:tb-rl;
の文字を180度回転させたいのですが、どうすればいいでしょうか？

幅600pxの表みたいなものを中央に表示させるにはどうしたらよいんですかね。
上から下まで全部表示される状態でです。
{
position:absolute;
width:600pt;
height:100%;
top:0pt;
bottom:0pt;
left:auto;
right:auto;
}
LeftとrightをAutoで設定すればいけるって本にあったんですけど、いけません。
何か良い方法ってありますか？

マージンのleft rightをauto

margin-rightとmargin-leftにしてやってみたけど駄目なんです。
position:absoluteをはずすと上手くいくのですが、すると逆に
TOPとBottomが端までちゃんと届かないのです。

54ndって何ですか？

<div> と<span>の違いがわかりません５箇所ぐらいサイト回ったけど
詳しく説明しているところがなくて謎なんです
当たり前のように使っていて説明すらされないなんてヒドイｗ

divとspanの違いは、ブロックレベルとインラインって違い。

Divはページのレイアウトとかに使うのが主かな？
spanは文字の装飾とかに使うんじゃないかな？
ごめん適当

Divはもともとレイアウトに使うためのものじゃありません＞＜

そもそも、何の略？

division

spanは？

smallpants

http://dictionary.goo.ne.jp/search.php?MT=span&search_history=&kind=&kwassist=0&mode=0&ej.x=41&ej.y=14

http://search.goo.ne.jp/web.jsp?MT=smallpants&OCR=0&QGR=1&PT=dict&QGA=1&DC=10&CK=1&IME=1&NKW=1&JP=1&from=jpsw

>>52
素敵だ

これテストに出るよ

いつからこんなスレになったんだ
簡単にいえば>>47でFA

いや、だからレイアウトに使うのが主ではない。本来は。

グループ

>>58さん
じゃあ何でレイアウトするんですか？

どんだけスクロールしてもページの右下の位置にボックスがくるようにしたいのですが
どうすれば良いのでしょうか・

とりあえず
ttp://www.google.com/

誰もお前にきいてねぇよ。教えれないならすっこんでろ

キレてる？
JavaScriptでも使ってろハゲ

き、きてれていっすよ

き、きれてないっすよ・・・・

>>62-66
消防乙

>>67
厨房乙

>>68
工房乙

>>68
どうみても消防です。
本当にありがとうございました

>>60
css

なんだか楽しそうだな

まあスレ違いだけど、言っておくと
高校生だからって工房になるってことはない。
高校生でも精神年齢が小学生ぐらいなら消防。

ぶっちゃけ、divってほぼレイアウト専用タグと言っても過言じゃないよな。

>74
寝なさい。

74ではないが、
ぶっちゃけそうだろ。
Divでレイアウトしなかったら何でするんだよ。

strict-HTMLスレで質問しろ

>>75
間違ってるか？
レイアウト用途じゃない場合でも、大きなまとまりをくくるのに使ったりするけど、
それって内容の把握を楽にするためのマークアップで、
どう使ってもstrictの思想とはかけ離れてくじゃん。

てんでお話になりませんわ。桜満開厨全開の春。

似非ストリクタなので具体的な突っ込みが出来ないんですね

具体的？
まずCSSありき、で考えるからだよ。

>>78
ぜんぜんかけ離れませんが？

ん？なんでCSSありきなんだ？
>レイアウト用途じゃない場合でも、大きなまとまりをくくるのに使ったりするけど、

>それって内容の把握を楽にするためのマークアップで

UAのためにそうしているのなら良いことだと思うけど。

製作管理の為のマークアップに近い気がする

>>83

それのことではなくて「ぶっちゃけ」とか言ってる人達のことだろ。

それだとなおさら意味不明。

レイアウトにDivは使ったらダメ。ってことだったら
使ってないサイト晒してくれ

永遠に意味不明だろうなｗ
スレ違いだから、移動しなさい。
議論は他所で。
ここではスルーぢゃ鼻たれ。

<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
ぐらいどこのサイトでも使ってるだろうに・・・・

だめだよ、そんなマークアップしちゃ
topがかならずtopになるとは限らないんだから

topに「なる」んじゃなくて、topに「する」んじゃないの？ｗ

ここで一発反論のしようが無い答えを聞きたい

TOPにする？
命令ですね？
命令なんですね？
だから議論は他所で！！！！！！！！

で、レイアウト変えたらidも変える訳か

レイアウトとか変えたくてもかえれないサイトなんだよ！

俺のサイトも頻繁にレイアウトとか変更できん。
レイアウトの変更は２年に１回ぐらいか？

お前らレイアウト変えれないとか雑魚いな！
俺なんて１日１回変更したって問題ないぜ！



だって・・・俺のHPにくる人0人なんだもん・・・・

body{scrollbar-face-color:#957C55;
scrollbar-highlight-color:#AC9878;
scrollbar-shadow-color:#79674B;
scrollbar-3dlight-color:#D1C5B1;
scrollbar-arrow-color:black;
scrollbar-track-color:white;
scrollbar-darkshadow-color:#262026;}

と入れてもスクロールバーの色が変わらないんですけど、どうしてでしょうか？
標準モードだったらダメなんですか？

クラシックスタイルでも変わらないなら、もう過去の遺物。

dlにposition:absoluteを指定してしまうと、dt,ddもなぜかdlの親要素にposition:absoluteしてしまう
というのは仕様ですか？　dt,ddにposition:staticを指定してもdlと一緒に上の方に衝突した状態になってしまう。

あたりまえじゃないの？

むしろ、そうじゃないとだめな気が。

>>99
IE専用だけどそれはわかっててやってる？

それと標準モードなら HTML 要素に指定しないと駄目。
互換モードでは body 部分がスクロールしてるのに対して、標準モードでは
document （マークアップ上は html タグの範囲） 部分がスクロールしてるから。

html { border:10px solid red; scrollbar-base-color:blue; }
body { border:10px solid lime; scrollbar-base-color:yellow; }

↑ってして互換モードと標準モードでそれぞれ見てみるとどうなってるか分かるよ。

scrollbar-*-color は継承されるから、どっちの場合でも html に指定しておいて大丈夫。
もし将来 IE のデフォルト動作 (DOCTYPE 未宣言時) が標準モードになってもそのままでいいし。

ちょっと訂正。

> 互換モードでは body 部分がスクロールしてるのに対して、標準モードでは
> document （マークアップ上は html タグの範囲） 部分がスクロールしてるから。

互換モードでは body 内部がスクロールしてるのに対して、
標準モードでは window 内部がスクロールしてるから。

うがあああああああああああああああああああ

>>104さん
親切にありがとうございます！
html{　}に入れたら無事できました

ＣＳＳで横に割って、上と下のボックスでレイアウトしてるんですが
上を50pxとし、下を残りの縦幅
にしたいんですが、できないのでしょうか？

横に割ったら右と左だろう

横から切ったら、上と下にわかれませんか？
こんなことはどうでもいいんです。
上ボックスの縦幅をpx固定
下ボックスの縦幅を残りの縦幅にしたいんですが、どうすればできますか？

Aというボックスを親ボックスの右下にもってきたいのですが、どうすれば良いのでしょうか？
よろしくお願いします

>>110
こういう事がやりたいのか？
テンプレ>>7

>>111
ソースよろ

>>109
横に割ったら上下だべ？
縦割組織っつーのは横の繋がりがないことだしよ。

>>113

<div id="main">
<p calss="ro">これが右下に・・・・</p>
</div>


#main {
height: 30%;
width: 100%;
background: #eeeeee;
}
p.ro {
font-size:95%;
background: #ffffff;
}

p..roを右下にもっていきたいのです。
ソースです。おねがいします

>>112さん、ありがとうございます。
>>7のどれですか？

>>115
ボックスじゃないし、右下ってグレーのdiv内の右下？
#mainが何行もあんの？

>>116
リンク先が何百もあるわけじゃなし、全部読んだらいい。

>>117
はい、グレーのDiv内の右下にpをもっていきたいのです。
Mainの中身はp,ro　だけです

まずcalssじゃ駄目だと思うの。

http://www.vipper.net/vip24670.png.html
↑の画像みたいにしたいのです。pは諦めました・・・
#mainの高さは30%、横幅100%
#rightの縦幅と横幅は中身によって変わっていきます・・・・

>>120
まあ最初のままだとこんな感じで出来なくもないが。
#main {height: 3em; width: 100%; background: #eeeeee; text-align:right;}
p.ro {font-size:95%; background: #eeeeee; padding:2em 0 0; }
span {background: #fff; }
*{margin:0; padding:0;}

高さを30%だとできないですかね・・・・？

上のソースはちと間違っちゃったが、#mainのheightはいらんのよ。
pのpaddingで調整するってパターン。

>>7のどのサイトにいってもないんですけど・・・・

リストタグとかpタグとか、最初から定義されているタグに
デフォルトでmarginとかpaddingが設定されてますよね
これらのデフォルトがどのように定義されているか
書いてあるサイトとかありませんでしょうか？

h1:first-letter { color: red; }
h1{display: inline; font-size:180%; color: #FFFFFF;}

ってやっても文頭が赤色にならないのは仕様ですか？

正しいかは知らないがこれじゃダメ？

#main {
height: 30%;
width: 100%;
background: #eeeeee;
position: absolute;
}
p.ro {
font-size:95%;
background: #ffffff;
width: 50%;
position: absolute;
bottom:-1em;
right:0em;
}

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

>>124
やりたい事がイマイチ判らんのだよね。
じゃあ↓に入れ子するって事か？
http://www.stylish-style.com/csstec/ultimate/height100.html

>>127
ポジションは左上から図らないとダメ。

http://www.vipper.net/vip24681.gif.html
このようにCSSでしたいのです。
よろしくお願いします

>>126
display: inline;を外せば適用される

>>131
だから>>129のボックスに入れ子

画像を 縦横の真ん中と 左右の真ん中に一枚だけドンっと表示させたいのですが
いまいちうまこいと行きません。

#ebox{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:auto;
hight:100%;
background-color:white;
text-align: center;
vertical-align: middle;
}
<div id="ebox">
<img src="./404.gif" width="300" height="100" alt="404">
</div>

上下の真ん中は高さが画像の高さと同じになってしまうせいだと思うのですが・・・

hight:100%;

>>135
hight:200%;
hight:auto;
でも高さ変わらないのですが・・・

>>134
>>7
Q6

>>136
height

>>133
すみません・・・
標準準拠でheight100%のボックスの中に
#top
#center
#bottom
3つのDivボックスを入れたんですが、上手いことなりません。
topとbottomには縦50px入れてます。

>>137
高さは調節できないって意味？？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
↑のどちらの方がお勧めでしょうか？

つーかスレ違い　ｶｴﾚ

>>139
ソース。

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

誰か
http://www.vipper.net/vip24681.gif.html
上のような骨組みだけ作って貰えないでしょうか・・・もう頭がヤバイです
お願いします。

>>145
業者に頼め。

ほんと、無理なんです。

>>145
今頃レス番付けるとはどういう事？
そういう姑息なヤツには何を教えても無駄なんだよ。
稚拙でも自分の努力の結果を見せるなら、少しは手助けしようと思ったが、
他人任せもいい加減にしてくれ。
ブログ借りてろ。

レス番号つけましょう。って言われたので、付けただけですが・・・
気に障ったのなら謝ります。
かなり頑張ったんですが・・・・

>>148
はいはい、ここでガス抜きはやめて下さいね。
気に入らないならスルーしといてね。こういうレスする奴に限って大したスキルもない。

>>145
因みに俺にはわからない＾＾

だからソース

>>150
答えられもしないのにムダレスしてるのはアンタ

＆ｵﾚﾓﾅｰ

*{margin:0;padding:0;}
html{height:100%;}
body{height:100%;　width:80%;　color: #FFFFFF;　margin:0px auto; background: #e4e4e4;}
#main{
background: #FFFFFF;
border:solid 1px #760014;
border-width:0px 1px;
height:100%;
min-height: 100%;
}
body > #main {height: auto;}

#top{height:50px; background: #123456;}
#center{background: #000000;}
#bottom{height:50px; background: #123456;}

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

<div id="main">
<div id="top">上部</div>
<div id="center">中部</div>
<div id="bottom">下部</div>
</div>

↑のがソースです。
height:100%;のボックスに
top center bottom　3つDivボックスを入れてます。
topとbottomのheightは50pxにしていて、
centerのDivボックスのheightを　100%-(50px+50px)　にしたいんです

>>151ではないけど、ちょっと考えてみた。
わからんわ。こんなレイアウト考えたこともなかったからな

>>145
しょーがねえな、ほれ。まあマークアップ的に#centerはおかしいが原作通りって事で。
#top {background-color:#123456; height:50px;}
#center {background-color:#996600; height:100%; min-height: 100%;}
#bottom {position:absolute; bottom:0px; height:50px; background-color:#123456; width:80%;}
#main {padding-bottom:50px;}
*{margin:0; padding:0;}
html {height:100%;}
body {background-color:#fff; height:100%; width:80%; margin:0 auto;}
body > #main {height: auto;}

<body>
<div id="center">
<div id="main">
<div id="top"></div>
<div id="bottom"></div>
</div>
</div>

>>156さん
ありがとうございます。
見事にできてました。
centerのスクロールバーを出したらbottomのボックスと被るんですが、ここは自分で頑張ろうと思います。
本当にありがとうございました

>>156
>>155だけど、それ無理なんじゃない？
#top {background-color:#123456; height:50px;}
#center {background-color:#996600; height:100%; min-height: 100%; overflow:hidden;}
#page {background-color:#996600; height:100%; min-height: 100%; overflow:auto;}
#bottom {position:absolute; bottom:0px; height:50px; background-color:#123456; width:100%;}
#main {padding-bottom:50px;}
*{margin:0; padding:0;}
html {height:100%;overflow:hidden;}
body {background-color:#fff; height:100%; width:100%; margin:0 auto; overflow:hidden;}
body > #main {height: auto;}

<div id="center">
<div id="main">
<div id="top"></div>
<div id="page">
ああああああ<br><br><br><br>ああああああ<br><br><br><br>あああああ<br><br><br><br>あああああ1<br><br><br><br>
ああああああ<br><br><br><br>ああああああ<br><br><br><br>あああああ<br><br><br><br>あああああ1<br><br><br><br>
ああああああ<br><br><br><br>ああああああ<br><br><br><br>あああああ<br><br><br><br>あああああ1<br><br><br><br>
</div>
<div id="bottom"></div>
</div>
</div>

な感じでcenterにスクロールバー出してみたけど>>157さんの言う通り、
スクロールバーがbottomと被ってしまう。対処法ないんかいな

俺なら素直にフレーム使ってるけどな





次元が違いますかそうですか・・・・

>>158
スクロールバー出すなんてのは後付けの条件。
これは内容が少ない時に100％のdivを実現するためのソース。
こういうタイプに教えるとホント後悔するんだよ。
後から後から条件を出して来る。

さすがにこれは後付け以前の問題で、
わかってる人なら容易に想像つくことじゃないのか？ｗ
>>156だって判っててやっただろ、これ。

>>160
そうか。
きちんとスクロールバーを出す方法知りたかったぜ・・・

結構勉強になった。ありがとう

↑の名前間違えた。156じゃなくて158だ。

>>161
いや、まじﾜｶﾒ。
最近CSSレイアウトに移ったばっかりだから、ここ２週間ぐらいこのスレをROMってたんだ。

156は俺だぜw
スクロールバー出すのはどっか海外のページにころがってたよ。
大体>>145は疑似フレームのページ紹介したら違うって言ったんだぜ？
もう知らんよ。

>>145
おまいはまおか？

おい、回答者ども、ラベルが低いぜ。

んじゃラベルの高い貴方様がご回答下さい。

>>166
ラベルの高い回答ぷりーず

#label {
top: -99999999999999999px;
}

>>166
じゃあ、お前が回答してみろょ

ラベルの低いマークアップですね。

>>166
よかったですね、ラベルの高い至高のお方様。レスが沢山付きましたよw

おい、回答者ども、レスが少ないぜ。

>>173
えー何か質問してよー。

　ｳﾜｧｰﾝ!!ヽ(`Д´)ﾉﾓｳｺﾈｪﾖ!!

やってみてるが、なかなか面倒っぽいな。
#pageにheight:100%;を仕込むと上下50ｐｘ分下に伸びちゃうし、
position:relative;を#pageに指定したり、
position:absolute;を#topに指定して#pageにmargin-top:50px;を指定しても、
#bottomの分だけ下に伸びちゃうし。

素直にフレームか擬似フレーム使っとくのがお勧めっぽいな。

リンクボタンのロールオーバー処理で
JavaScriptの変わりに下記のようにするのは邪道でしょうか？

a.mainbtn{
background-image:url(img.jpg);
display: block;
width: 200px;
height:50px;
text-indent:-1000em;
}
a:hover.mainbtn{
background-image:url(img2.jpg);
}


<a href="#" class="mainbtn">リンク</a>

↓こなかじでどうだ？
邪道だけどな


* { margin: 0; padding: 0; }
html { position: relative; height: 100%; }
body { height: 100%; }
#top { background-color:#690; position: absolute; top: 0; height: 50px; width: 100%; }
#center { background-color:#960; position: absolute; top: 50px; bottom: 50px; width: 100%; height:
expression(document.body.clientHeight - 100);
overflow: auto;
}
#bottom { background-color:#069; position: absolute; bottom: 0; height: 50px; width: 100%; }

<div id="top">hoge</div>
<div id="center">hoge</div>
<div id="bottom">hoge</div>

top

の absolute は必要ないな

ちょいと改悪
Javascript は必須じゃないが、互換モード限定

* { margin: 0; padding: 0; }
html { position: relative; height: 100%; }
body { height: 100%; }
#top { background-color:#690; position: absolute; top: 0; height: 50px; width: 100%; z-index: 2; }
#center { border-style: solid; border-width: 50px 0;
-moz-box-sizing: border-box;
box-sizine: border-box;
position: absolute; top: 0; background-color:#960; width: 100%; height: 100%; overflow: auto; z-index: 1; }
#bottom { background-color:#069; position: absolute; bottom: 0; height: 50px; width: 100%; z-index: 3; }

<div id="top">hoge</div>
<div id="center">hoge</div>
<div id="bottom">hoge</div>

つか、俺ならレイアウトの構想から考え直すけどな

おまいたちの力はこの程度のものか ﾌﾊﾊﾊﾊ

>>181
お、それだといけるな。
ただGeckoとIEは大丈夫だが、Operaは流石に駄目だ。

確かに手間が割に合わないというか、普通に違うレイアウトを探した方がはやそう。

>>182
まあ、ラベルの違いよ。

>>178
別に。

>>179
やっぱり、こういうのはフレームだよね。
一見簡単そうな質問だったけど、実際試してみたらかなり難しい。


ってかフレームってなんで使おうとしないの？

最低でも
IE、Opera、Firefox　３つのブラウザで同じレイアウトにならないと、できた。
とは言えない。

ってかCSSだけでは不可能なんじゃないか？

http://nub.iichan.net/b/src/1143346377174.gif
ｶﾜｲｲﾈｺちゃん

>>188
わざわざグロ貼りご苦労さん。

テーブルを使うと魔女狩り的に責められるのですが、
そんなにCSSは偉いのでしょうか(つД`)

別にいいんじゃない。
見る人から言えば、読みやすかったらいい。
何をつかってようと関係ない

>>190
別にレイアウトに使うのはよろしくないってだけでしょ。
何が偉いとか決めつける必要はないし、議論したいなら別スレへ。

まあそんなこといったら
CSSもレイアウトに使うものじゃないんだけどね。

リンクのターゲットをcssで設定できますか？

いいえ

ありがとうございました。
JSでやることにします

>>193
>CSSもレイアウトに使うものじゃないんだけどね。
>CSSもレイアウトに使うものじゃないんだけどね。
>CSSもレイアウトに使うものじゃないんだけどね。

>>183
>box-sizine: border-box;
コピペミスってた、適切なDOCTYPE宣言して box-sizing; border-box ならOPERAでもいけんか？

>確かに手間が割に合わないというか、普通に違うレイアウトを探した方がはやそう。
まぁ捨てるにしろ、何かの役にたつときがくるかも知れないから、
色々試してみるのは無駄ではないがな

暇つぶしになるしw

>>198
お、いけたいけた。
お疲れさん。

このタイプのレイアウトなら需要有りそうだし、確かに覚えておいてもいいかもな。
あと、エディタの入力補完マクロに
> -moz-box-sizing: border-box;
> box-sizine: border-box;
この辺登録してなかったから登録しておこっとｗ

box-sizing; border-box は>>18１のどこにいれるんですか？

box-sizine:
これのつづり間違えなだけだよ。

これなんか、IEで開いたときbottomの下に黒いのが見える

すま。
なおった

>>179さんのレイアウトでHPを更新したくなってきた
でも#topの高さを100px #bottomの高さを30px　にしたいんだけど、誰か教えてくれないか・・・？

-moz-box-sizing: border-box;
box-sizine: border-box;

こんなの見たことないよ

198　ｽｺﾞｽ感動した

CSSの夢ひろがりんぐ

>>204
自分も丁度それを知りたかった

suge///

box-sizingってOperaでもう使えるのかぁ。
知らなかったよ。
いい勉強になった。

ただ結構力技だなとｗ

ってか>>179の方がいいんじゃないの？
ダメな理由教えて

-moz-box-sizing: border-box;
box-sizing: border-box;
に直しても、IEで開いたときbottomの下に黒いのがでるんだが…
でも何故か更新したら直る。
でもまた開いたら黒いのが・・・・
意味ワカメ。教えてちょ

うちは出ないな。
環境晒してみると再現する人が出てくるかもしれない。

環境ってどんなのいえば良いかわからないけど。
cssはファイルはそのままコピ。
htmlがこれ。でIEは最新の奴使ってる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Your Site Name</title>
<META http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">hoge</div>
<div id="center">
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge
</div>
<div id="bottom">hoge</div>
</body>
</html>

>>213
DOCTYPEだな。
"http://www.w3.org/TR/html4/loose.dtd">
これを削ってみ。

ダメだった。こうなるわ。
http://www.borujoa.org/upload/source/upload5452.png

topの高さ80px　bottomの高さ20pxに改造してるけど、許して

* { margin: 0; padding: 0; }
html { position: relative; height: 100%; }
body { height: 100%; }
#top { background-color:#690; position: absolute; top: 0; height: 80px; width: 100%; z-index: 2; }
#center { border-style: solid; border-width: 80px 0 20px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute; top: 0; background-color:#960; width: 100%; height: 100%; overflow: auto; z-index: 1; }
#bottom { background-color:#069; position: absolute; bottom: 0; height: 20px; width: 100%; z-index: 3; }

↑の状態で更新ボタンを押せば正常になるんだけど

DOCTYPE弄ったか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ソースはこれ以外はそのままで問題ないぞ。

>>217
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
にしたけど、無理だった。


<!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>Your Site Name</title>
<META http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">hoge</div>
<div id="center">
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge<br><br><br><br><br><br>
hoge
</div>
<div id="bottom">hoge</div>
</body>
</html>

* { margin: 0; padding: 0; }
html { position: relative; height: 100%; }
body { height: 100%; }
#top { background-color:#690; position: absolute; top: 0; height: 80px; width: 100%; z-index: 2; }
#center { border-style: solid; border-width: 80px 0 20px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute; top: 0; background-color:#960; width: 100%; height: 100%; overflow: auto; z-index: 1; }
#bottom { background-color:#069; position: absolute; bottom: 0; height: 20px; width: 100%; z-index: 3; }

なぜだ・・・・・・

>>216
peekaboo bug か

今どき互換モードを勧めるのはやめにしないか……

んだんだ

別にそこまで気にするほどじゃ。
表示を考えると確かに手間はかかるけど。

ありがとう。
諦めて>>179の方でやってみるわ。
>>179ってやっぱどこか悪いの？

expression(〜)ってDHTMLってやつ？

なかなかやるな　ｺﾝﾆｬﾛｰ

>>225
そうです。
それをやめた理由ってどんなんかな。。。？

あ、前言撤回。

>>227
スクリプトとして動かす事が好ましくないって感じとか？
DHTMLはやった事無いのでちょっとわからないや。

でもなんとなく>>181の方が変化球とはいえ比較的正攻法って気がする。
>>179はソフトボールって感じで。

>>229さん。
ありがとうございます。
でも>>181はできなかったんで>>179でいこうと思います。
この場合の宣言は<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
が良いのでしょうか？

今までにやった事無いし俺にはちょっと答えられないや。
多分それで良さそうだとは思うけど。

わかる人待った方がいいかも。
力になれなくてスマンね。

いえいえ。夜遅いのに本当にありがとうございます。
皆さん本当にありがとうございました

ちょ、自分がいない時に限ってこんな良い質問と回答が・・・・
リアルタイムで自分もこのスレ読みたかったorz

いつもこれぐらいのlvだと良いがな

今回は179がGJだったな。
初心者向けではなかったけどｗ

このスレに骨のある奴がいて安心したぜ。
おまぃら、なかなかやるな

floatを使用したレイアウトをやってみたのだが、右のコンテンツ部分が左側の部分にきてしまいます。
HTMLソースは
<div id="mainbase">
<div id="header"><img src="../images/title.gif" width="275" height="78"></div>
<div id="left">
<!--　左メニュー　-->
<div id="left_navi">
<ul>
<li><a href="index.html">ホーム</a></li>
</ul>
</div>
<div id="clear"></div>
<div id="banner">
<ul>
<li><img src="#" width="120" height="60" border="0"></li>
</ul>
</div>
</div>
<!--　左メニュー　-->
<!--　コンテンツ -->
<div id="contents">
<div id="top_photo"><img src="#" width="320" height="240" border="0"></div>
<div id="top_topics">
<ul>
更新履歴
<li>ここに更新履歴が入ります。<br>
ここに更新履歴の本文が入ります。 </li>
</ul>
</div>
</div>
<!--　コンテンツ -->
</div></body>

続けてスタイルシートはこのようになっています
body {
margin: 0px; padding: 0px;
background-color: #D9530A;
}
#mainbase {
width:800px; height:600px; margin:auto; padding:auto;
}
#tab_navi { }
#tab_navi ul { }
#tab_navi li { }
#left { width:200px; float:none; background-color: #F4AA00; height: 100%;
padding-top: 15px; padding-right: 2px; padding-left: 2px; padding-bottom: 10px;
}
#left_navi { float:left; font-size: 14px; line-height: 26px; }
#left_navi li { list-style-type: none; }
#clear { float:none; }
#banner { float:left; line-height:28px; }
#banner li { list-style-type: none; }
#contents { float: none; width: 400PX; }
#top_photo { float:none; }
#top_topics { }
body,td,th { color: #003F71; }

なんかスレ伸びてるし

>>210 >>224-226

ダメっつぅか、JavaScript Off 時でも問題ない場合を思いついた
んで、>>181
つか、絶対このレイアウトじゃなきゃ駄目だって事なら俺も>>179
でやるよ

>>221
最初から変な知識入れちゃいかんよな。
俺も技術的検証ってのが先に来て、その辺の配慮足りなかった。
スマンカッタ

まぁ、これを機に標準準拠モードと後方互換モードとは何かと調べ
てくれれば幸いで

>>224-227

だったな。・・・どうでもいいか

んじゃ、名無し＆仕事に戻るわ

>>238
テンプレFAQ。

教えてくださいまし。

DIV要素内のみ背景を固定するにはどうしたらよいでしょうか？
background-attachment:fixed;
ではうまくいかないみたいなんですが、IEでは無理なんでしょうか？
IE以外は問題なくいけるのですが。。

>>242
IEはBODY以外への、fixed は利かないようだ

やっぱりIEでは無理なんすね･･･
ありがとうございました〜

下のような場合sotoの背景色はnaka2の高さまでしか反映されませんが、
これをnaka1の高さまで反映させることは可能でしょうか。

div.soto{background-color: #000;width: 800px;padding:2px;}
div.naka1{background-color: #0ff;width: 350px;float:left;}
div.naka2{background-color: #ff0;width: 350px;}

<div class="soto">
<div class="naka1">あいうえお<br>
あいうえお<br>
あいうえお</div>
<div class="naka2">かきくけこ</div>
</div>

>>245
再現されませんが。

>>245
float overflow: auto で検索すると何か出てくると思う＜投げやり

#heading h1 {
margin:10px 0px 0px 10px;
padding:0;
}

WinIEでは、ちゃんといくんだけど、Netscape7では、レイアウトが崩れてしまう。
親のheadingが10pxあがります。何ででしょう？

どうしてもです。

教えて下さい！お願いします。

>>250
*{margin:0; padding:0;}ってしてる？
まず↑で、ブラウザ毎に違うコイツらを消すのが基本。

テーブルを使わず、blogや掲示板などで使えるような、画像をしようした枠を作りたいと思い
いろいろと調べてみましたが
ttp://blog.info-rich.jp/archives/2005/09/css_1.html
のような方法しか考え付きませんでした。
この方法だと、空divになってしまったりして、あまりスマートでないと感じました。
やはり、テーブルを使用するのが一番でしょうか？

>テーブルを使わず、blogや掲示板などで使えるような、画像をしようした枠を作りたいと思い
画像を使用した、サイズが可変の枠を作りたいと思い

にして読んでください。

IE7が :before, :after に対応してくれる事を祈るとか

>>252
img { position:absolute; }

>>253
そういう方法しかないのが現状。
空divが嫌なら、hnの背景画像にするとかあるけどね。

Divの中に何も文字（h1など）をかかず
Divボックスを入れるのはダメなのでしょうか？

>>257
空divって事？
lintでは怒られるけど、気にするかどうかは人それぞれ。

むしろ入れちゃえばいいんじゃない？
画像とかのタイトルとかの文字を書いておいてdisplay:none;しておけば
CSS非対応ブラウザでもOKになるし。

入れるのは空divの中にさらにって意味ね。

hrじゃだめ？

floatなんですけど、その後の要素で必ずclearしなくてはならないのでしょうか？
仕様書上の、という意味で。

>>262
仕様上じゃないさ。使用上必要ならする。

>>263
レスありがとー

>>251
この*はどの範囲を表してるのでしょうか？

全部.

>>248-250
まず最初に、質問がなってない。
・・・ついでに態度もだが

cssだけ提示されてもなにがちゃんとだかお前以外にはわかんないし……
なにがお願いしますだ！顔あらって出直してこい！








とりあえず、HTMLも晒してみ

>>265
表示範囲

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

重ねてですが、全域であるのであれば、
*{margin:0; padding:0;}　と
body{margin:0; padding:0;}　の違いは
あるのでしょうか？　

bodyだとbody要素にしか適用されないけど、
*だとbodyだろうがhtmlだろうがpだろうがhnだろうがol,ul,liだろうが
とにかくhtmlの要素全てに適用されるの。

上の説明だとあまりに乱暴だから
全称セレクタ
でググってごらん。

簡単にいうとな
*{margin:0; padding:0;}はこれから使う全てのタグのmarginと paddingを0にします。ってことだ。
同じタグでもブラウザによっては初期marginが0だったり10pxだったり異なるからな。

/***************
↓top
***************/

こういうのってやめた方がいいのでしょうか？
何か良くて分かりやすいやりかたってないでしょうか？

>>270-271
ありがとうございます。

すみません。ここの住人さん達にお聞きしたいのですが、
CSS特化(?)且つ無料で良いエディターは無いでしょうか？
今はStyle Note というのを使っています。
お勧めのものがあれば教えてください

>>274
CSS特化というと「CSS Editor」しか思い浮かばないなぁ
単品じゃなくて「Eclips」のプラグインだけどさ

>>274
htmlエディタと同じの使った方が楽だよ。
欲しい機能って考えても、
色分けとかは要らないから入力補完機能ぐらいだし。
それなら色分けと入力補完機能(もしくはマクロ)つきhtmlエディタで十分。
うちは秀丸使ってるが、無料ならez-html辺りとかでいいんでない？
色もクリックステータスバーに表示されるし。

クリックで

>>275-277さん
返信ありがとうございます。
言い方が悪かったです。
HTML+CSSのエディタでCSSにも重点を置いてるエディタが欲しいのです。
ワンクリックでカラーコード自動入力みたいな機能も欲しいです。

Style Noteを使ったがある人とかいれば、その人の意見も聞きたいです。

ez-HTMLは？

慣れてきたらez-HTMLよりStyle Note４が良いと思うよ。

ez-HTML使ってみました。
htmlのほうは満足なんですが、cssが一発入力ができないのでイマイチ・・・って感じです。

つまり道具を与えても使いこなせない、と。

一発入力できないって補完機能を使いこなせてないって事？

はい　そうです

CSS程度に何考えてるんだろう。
全然意図がわからんち。

CSSの一発入力って何よ・・・

右クリ押したらタグ一覧みたいなのがでてきて、その中から選べばそれを入力してくれる奴じゃね？

"3column" と打てば瞬時に3カラムレイアウトで使いがちなものが
ずらずら〜っと勝手に補完入力されちゃう（補完の域をこえてる）とか。＜一発入力

俺は、普通のエディタと違って「補完機能がある」ってだけで満足してるよ…。

>>284
あのさ、CSSにしろ何にしろ、覚える気がなければ何も出来ないよ。

俺はメモ帳使ってコピーペーストで頑張ってる・・・
綴り覚えろ？無理だよあんなの

一覧から選ぶくらいならささっと手打ちした方がよさそうだな

一覧から選ぶ機能欲しいかもしれん。
思い出せない時が時々あるorz

入力補完から名前ぐらいなら見れるぞ。

一覧から選ぶ機能は選択項目が多すぎて
かえって使い難い

ez-htmlと「とほほ」
思い出せない時のために入れてる

VS2005でいいじゃん。

綴りを覚えてる、覚えてないとかは関係ない。
どこで何を使うかが問題なんだ！

>>297
そりゃそうだろ。
しかし要素にどういう意味があり、どういう挙動をするものかは覚えなくちゃならない。
例え一覧表示されても、分からなけりゃ選べない。

>>298
そりゃそうだろ。
まあ俺は一般の人間より勘が良いからどうにかなるがな。

へえw

古畑任三郎のロゴをスタイルシートで表現するにはどうすればいいでしょうか？
http://img.7andy.jp/bks/images/i6/D0041076.jpg

明日一日限りのネタに使いたいのです。
画像でロゴ作るほどのガッツはありませんが…。

>>301
これ切り抜けばいいじゃん。
もちろん違法だが。

いや、古畑風ロゴを作りたいだけで、古畑任三郎のロゴをそのまま貼りたいわけではありません。

spanで囲んでボーダーひいてpositionで調整したら？

>>301
ほらよ。標準モードな。
table{boeder:0; border-collapse:collapse; emptycells:none;}
td{width:1.2em; height:1.2em; text-align:center; vertical-align:middle; padding:0;}
td.bb{background-color: #000; border:3px solid #fff; color:#fff; }
td.rb{background-color: #990000; border:3px solid #990000; color:#fff;}
*{font-size:54px; font-weight:bold; font-family:sans-serif; margin:0; padding:0;}
body{background-color:#000;}

<table>
<tr>
<td class="bb">古</td>
<td class="rb">畑</td>
</tr>
<tr>
<td></td>
<td class="bb">任</td>
</tr>
<tr>
<td></td>
<td class="bb">三</td>
</tr>
<tr>
<td></td>
<td class="bb">郎</td>
</tr>
</table>

>>305
ありがとうございます！
テーブルデザインを使わないようにするクセがついていたせいでtableを忘れてました。
どうせ1日限りのネタだしこれでいきます。
本当にありがとうございました！

http://orchestra.musicinfo.co.jp/~usp-orch/info.html
netscapeで見ると全くページが表示されません。
酷いページを作ってしまいました・・色々調べてみましたが解決できませんでした。
原因はどこにあるんでしょうか？

http://orchestra.musicinfo.co.jp/~usp-orch/
こっちは正しく表示されるんですが

スタイルシートを殺せば、レイアウトはともかく表示はされるようになる＠Fx1.5
なんでz-indexを負数だけで指定してるのかな、と思った。

>>307
Safariで見るとズレてる。
potisionの値が疑問。あと色とかどうなのとか。。
styleはあちこちに書かず、まとめた方がミスも減るよ。

>>304
floatのがスマートじゃね？幅2emのボックスの中で「古」だけleft, 他はright

widthとmarginやpadding、borderは一緒に指定するとIE以外で横幅広がっちゃうよ。
divにdivを入れ子にして別々に設定するといいかも。

CSSの要素の行末が　;　で閉じられてないとか、
LEFT: 120px;っていうのがあったりとか、ケアレスミスが多いね。
あと、個人的にステータスバーの文字列が動くのはちょっとうざったいかも。

ってLEFTはposition指定が最後にあったのか。
よく見えてなかった。
スマン。

>widthとmarginやpadding、borderは一緒に指定するとIE以外で横幅広がっちゃうよ。
のあたりの意味がわからな

>>4のQ1参照

>>308
z-indexを取ると表示されるようになりました。ありがとうございます！
ビルダーで編集作業をしているので勝手についてきたようです。

>>309
ご指摘ありがとうございます。position:absolute;はなくてもよさそうですね・・

>>311
なるほど、div divにすればいいのですか。参考にさせてもらいます。

ビルダーってz-indexに負の値指定すんの？負の値についての挙動は指定されてないんじゃなかったっけ

負の値の挙動については全く書かれてないみたいですね。ビルダーはなんてことしてくれるんだ・・

htmlはプロが効率を追求するとか出ない限り、手打ちが一番。

そもそも「どこでも・・・」で作った時点で>307はど(ry

今日はエイプリルフールってことですか、この日付。

　　またかよ！

WindousXP/Windous Server 2003に新たな脆弱性が発見される
ttp://internet.watch.impress.co.jp/static/uocchi/2004/04/01/ms.htm

URI見た瞬間にそれと分かるくだらなさよ

今度他のところと共同開発するハメになって、仕様書作らなくちゃいけないんだけど、
CSSの順番ってどうしてる？（CSS を書くときの margin とか border の並び順）
参考になるサイトやプロジェクトがあれば、教えてください。
（例えば PHP だと PEAR のコーティング規約みたいなやつ）

>>323
Fxの内部CSS

>>324
どうやって見るんですか？

・・・プロのラベルってorz
インストールしたFx配下フォルダを全部漁ってみなさい。

>>326
サンスコ。プロじゃないよ…。
CSSファイル見てみた。コーティングは確かに見やすいけど、
marginとpaddingの位置が逆になってたりしてて、ちゃんと統一されてる？

あと、こんな感じで
margin 2px;
margin 0;
値が0の場合は単位を付けないって、何か意味あるのか？（サイズが小さくなる以外に）
margin 0px 2px 2px 2px;
みたいに単位が付いてるのもあって、なんか気持ち悪い。

と、ここまで書いたが Strict厨みたいでウザいな…。すまん。

>>327
0の場合はpxだろうがemだろうが同じになるから
つけようとつけまいと同じ

0px　って書いてるところは
直前まで1pxか0px　どちらにするか悩んでたんじゃないのか？

>>329
そうでもない。
単位はつける癖をつけといたほうがいざってときにいい。

>>330
それこそ癖ってやつだよ。
どっちでもいい。

>>330
同意

windows2000SP4,IE6です。
サイトの選択ボックスの幅を変更したいのですが、
選択ボックスを一つ一つ自分の好きな幅に変更することは可能でしょうか？

可能でしたら、その方法を教えてください。

＞サイトの選択ボックス
これ何よ？

>>334
春なんだよ　な？

>>334
タグで言うところのselectです。

>>336
JavaScriptスレに行きたまえ。

「サイトの選択」ボックスかとオモタ・・・恥。

ていうかclassで済む話じゃなくて、まさか選択した内容によって幅を変えるということか？

選択ボックスをひとつひとつ自分の好きな幅に設定できればと思っているんですが…

無理でしたら、一律に選択ボックスの幅を設定する方法を教えてください。
どうぞよろしくお願いします。

>>339
だからselectを一つ一つの意味が>>338のどっち？

>>340
すいません、classの意味がわかりませんが、
「選択した内容によって幅を変える」と言うことではありません。

>>341
何を言ってるのか分からんよ。
ソース出してみ。
つかJavaScriptの話なんだったら、マジでJSスレに行った方がいいぞ。

inputじゃねぇの？
俺も言ってること理解できないが

>>341
だとしたら、同じ要素でもclassやidによって設定を変えられる、
という基礎の基礎を、まず勉強しておいで。

いろいろとアドバイスありがとうございました。
解決いたしました。

・・・結局333のやりたかったことは何だったんだろう、気になる。

ボックスの枠を２重線にしたいのですが
どうすればいいですか？

>>347
double

できないのですが・・・・・・

質問です。
Aというボックス（横幅300px　縦幅250px)をbodyの左から2%のところ且、縦中央(垂直中央)のところに
CSS（もしくはDHTMLも有り）で配置したいのですが、どうすれば良いのでしょうか？
IE6 Opera　foxでも表示が同じになる方が良いです。

テンプレに載っているサイトにいきましたが、どうもそれらしい答えがありませんでした。
誰かヨロシクお願いします

一応、ソースです
高さ100%のボックスにコレを入れています
#main{
overflow:auto;
height:250px;
width:300px;
position:absolute;
top:50%;
left:2%;
margin-top:-125px;
}

しかしコレだと、このページを開いてからウィンドウを縮めたりすると
縦中央になりません。（更新押せば直りますが）

開いた後に画面を縮めても縦中央にくる方法はありませんでしょうか？

ありません

わかりました。
やっぱりテーブルでやるしかないんですね
ありがとうございました

ｶﾜｲｿｽ

<div id="aaa"><div id="bbb"><div id="ccc"></div></div></div>
ってやったら怒られますか？

え？オカンに？

オカンのチェックは完璧

<div id="okan"><div id="oton"></div></div>
オカンの中にオトンは怒られますか？

IEのタブ　ブラウザってありますよね？
あれってIE6と同じなんですか？
IE6でレイアウト崩れなかったらタブの方でも崩れません？

>>359
スレ違い

Microsoft、そんなの作ってるのか・・・
知ってるなら試せばいいじゃない

ブログのheader部分に背景画像を使いたく
css部分で指定したのですが反映されません。

DIV#TOP {
background-image: url("http://www.xxx/~xxxx/image/header.jpg")
BORDER-BOTTOM : 5PX SOLID #F0DDA8;
WIDTH : 800PX;
}

haeder部分がDIV#TOPだったので画像先のURLを追加しました。
そこのURLは個人で使っているサイトです。
投稿記事以外の画像アップロードの方法が無いExicteブログだったので
直接のURL指定したのですが、これでは駄目なのでしょうか？

DIV#TOP {
background-image: url("http://www.xxx/~xxxx/image/header.jpg");
BORDER-BOTTOM : 5PX SOLID #F0DDA8;
WIDTH : 800PX;
}
でやってみろ。
後これは偏見だが大文字は嫌い

>>363
最後に「:」を付けるということでしょうか。
やってみたのですが結果は同じで何も表示されませんでした。

成功しました。どうやら個人的に使っているサイト（URL先）は
こういう使い方をする場合「倉庫代わりに使っている」と認識して
上手く表示できないような仕様になっているようでした。

試しに他のサイトへうｐして試してみたら成功しました。ありがとうございました。

何度もスミマセン・・1つだけどうしてもわからないことが・・。

成功を喜んでいたのですが、どうやらFirefoxでは表示されないようなんです。
ググってみると上手くいってない人が多く、同じ悩みを抱えているようでした。
しかし、具体的な解決方法を見つけることが出来きません。

Firefoxでは諦めるしかないのでしょうか？

>>366
FXだけ表示されないという事は、貴方がミスをしてるのです。
ソースを見ると、大文字と小文字が混在してるので、どこかからコピーしたんですよね。
解説サイトからコピーしたのなら、ちゃんと前後もお読みになって理解して下さい。

＞「倉庫代わりに使っている」
これはサイトのurlと、画像のurlが違うという事でしょうか。
まさかとは思いますが、配布されてる画像はDLしてからご自分のサイトに置くものです。

ぶっちゃけソースは小文字で固めたほうが良いよ
理由は聞かないでくれ

http://v.isp.2ch.net/up/14abb06d316e.gif
このような角丸をCSSで再現する場合、上下スライスを切って以下の
ソースのように作成していました。

<div class="top"></div>
<p>本文</p>
<div class="bottom"></div>

<style>
.top{background-image: url(img/top.gif);height: 15px;width: 550px;}
.bottom{background-image: url(img/bottom.gif);height: 15px;width: 550px;}
</style>

しかし、円の傾斜を少なくして高さ5pxぐらいのところでスライスを切って
上記のheightを5px;にすると、変な余白が出来たり、リピートされたりします。

これはよくある事なのでしょうか？うまく説明出来ずにすみませんが、
画像自体の高さが足りなくてエラー？のようになった事が無くて・・。

言ってることがいまいち理解できないんだが、
壁紙がリピートして困るってことか？

なら　background-repeat: no-repeat;　を入れれば良いんじゃないか？

>>369
このソースだと、上下にだけ角丸が被さってる状態だと思うが。

>>370
例えば上記のURLから円の上から5pxをスライス取って画像にしたとします。
そして
.top{background-image: url(img/top.gif);height: 5px;width: 550px;}

にしたとします。当然高さが5pxになっているはずなのですが、それがなりません。
no-repeatを入れてもです。IE6.0とFirefoxともに同じ現象です。
なので十分に高さを取った画像でないといけないのかな？っと思ったのですが
論理的にそれはおかしいし・・・（とはいえ、出来ませんが。。

具体的にどうなるのかよくわからん、スクショうｐ

んー・・・文字だけだとイマイチつかめんな・・・

あとちゃんとしたソースもな。

>>372
もとのソースに
<div class="top"> </div>
↑みたいに半角スペースとかまぎれてないよね？

俺は、それをよくやってしまうorz

てっかpのcssをupしなさい

ざっと作成したので、うｐしました。
http://read.kir.jp/file/read42505.zip

解凍していただいて中にあるtest.htmlを見ていただければと思います。
また、縦に二つ並べていますが、余計な余白が空きます。

>>378
特に問題無いように見えるんだけど

>>378
http://f38.aaa.livedoor.jp/~tanesure/imgboardphp/src/1144033357069.gif
こう見えるんだけどダメなのか？

>>380
うちはずれてる。

>>380
おかしいですね・・・。私のIE6.0では上がずれて、ボックスの間に余白が出来ます・・。
さっきFirefoxで見てみたらOKでした。

body内を

<div>
<img class="top"></div>
<p>･ﾆ･ｭ･ｹ･ﾈ･ﾆ･ｭ･ｹ･ﾈ･ﾆ･ｭ･ｹ･ﾈ･ﾆ･ｭ･ｹ･ﾈ</p>
<img class="bottom"></div>
</div>

にやってみ。Divじゃなくimgをつかってみた

クラスに色つけてみたけど明らかに幅が違うんだよね・・・なんだろ。

どう考えてもわからんかったからimg使ったんだが、
どうしてもdiv使いたいなら俺は知らん・・・

ごめん・・・幅同じ

<img class="top"></div>
↑どう考えても間違いです、本当にどうもあｒｙ

無理ならimgを使ってそのまま設置しますが、
できればCSSで何とかしたいと思いまして・・。

午前中はずっと悩んでいるのですが、全くわかりません・・。。

>>383
div閉じすぎな件

>>378
Fxでは問題なかった
IEでは
<div class="top"></div>
<div class="bottom"></div>
という二つのボックスの高さが、それぞれ5pxではなく18pxになっているようだ、なんだろコレ

>>383
ﾜﾛﾀ
まあ確かにできたが、なんか間違えてるぞｗ

img使うとCSSオフにしたとき間抜けなことになるしな

すまん。正直いまは反省している

>>369
そんな線程度ならもっと簡単なの使えや。
ttp://home.graffiti.net/deux/border-radius.html
Fxには当然、border-radiusで。

これが何でずれるかがわからん

>>383
*{margin:0; padding:0;}入れてみるとか。
でmacで見るとpのborder-colorが反映されない件。

>>395
それ俺も試したけど効果なかったんだよなー

>>395
意味なかった。

>>396-397
そか、ｽﾏｿ。

飯食いに行きたいけど・・・気になっていけない。

これあれでしょ
sp2を入れたパソコンで起こり得るバグじゃない？

えーい！IEだけみたいだからもうIE限定でマイナスマージン使ってしまえ
*{
margin:0px;padding:0px;
}
.top{
height: 5px;
width: 550px;
background:url(top.gif) no-repeat ;
position:relative;
margin-bottom:0px !important;
margin-bottom:-13px;
}
.bottom{
height: 5px;
width: 550px;
background:url(bottom.gif) no-repeat;
margin-bottom: 0px !important;
margin-bottom: -13px;
}

…なんかしっくりこないけど表示は問題ないよな？

height:5px;、有っても無くても同じなのだが。。

もしかして私の作成したソフト（Fireworks8）が悪いんですかね？
さっきも画像を書き出したら変になりました。（なぜか思い切りきれる）

って、あんまりかんけいなさそうですしね・・。

>>402
確かに、どういうわけかheightの値が18px以下だと常に18pxになっているようだ

とりあえず、
.top{
background-image: url(top.gif);
height: 5px;
width: 550px;
background-repeat: no-repeat;
}
.bottom{
background-image: url(bottom.gif);
height: 5px;
width: 550px;
background-repeat: no-repeat;
}
.main{
padding:5px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-left-color: #666666;
margin: 3px 0 0 0px;
width: 538px;
}

<div>
<div class="top">
<div class="main"><p>ああああああああああああああああああああああ</p></div></div>
<div class="bottom">
</div>
</div>

これでできない？

どうみてもFoxなら崩れます。本当にありがとうございました。

角を丸くすることなんてないからな・・・・・

>>407
これは酷い（ｗ
でもIEだとできそうだな、widthの値変えなきゃダメだけど

つかpに背景画像を指定すればいいんでは。
それでもずれるならdivの入れ子にするとか。
これならmacでもwinでも同じ表示になる。

サンプル見てから言ってくれ

ごめん、なんでもない

これはかなじ偏見なんだが、
角を丸めてるサイトみるとかなり安っぽい感じがする。

うん、それは偏見だな。

それより「かなじ」が気になる

はまじの親戚じゃね？

>>412
それはサンプルの画像が汚いからだろ。

サンプルってなんのことだい。
はまじ

永沢君〜
sample[名]
1 サンプル, 見本, 標本；実例；試供品(free sample) get samples of the soil of the moon 月面土壌の標本を入手する buy
［sell］ by sample(s) 見本で買う［売る］ come up to sample 見本どおりになる.
2 《統》サンプル, （摘出）標本 a random sample 無作為標本 a representative sample 代表標本. .. [さらに]

.top {
height: 5px;
background-color: #ffccff;
font-size: 1px;
text-indent: -9999px;
}



<div class="top">角丸始まるよ</div>

これで・・・なんとか・・・ダメ？

ダサッｗ

>>420
解決方ヨロ

いやごめん、「丸角始まるよ」ってテキストが面白かったもんで
っていうか>>401でよくね？

>>419
同じく、.topと.bottomに
font-size:5px;
を入れたらうまく表示されたっぽい。

空にしててもベースのフォントの大きさの高さ分、
何か影響してるっぽい。

最低でもopera fox でも正常に表示されないと話になんない。

俺はいくら頑張っても無理だった

俺の環境でははじめからOpera, Fx で正常に表示された
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 8.51

.top {
height: 5px;
width: 550px;
font-size: 1px;
text-indent: -9999px;
background-image: url(top.gif);
background-repeat: no-repeat;
}

.bottom{
height: 5px;
width: 550px;
font-size: 1px;
text-indent: -9999px;
background-image: url(bottom.gif);
background-repeat: no-repeat;
}

>>426
font-size:1pxさえ指定してやれば、text-indent指定するまでも無くdivの中空っぽでよさそうな気が

>>427
あぁ・・・すまん。
divの中空っぽっていうのが気持ち悪かったからdivの中に何か文字入れる前提でやってました。

たしかにdivの中が空だとlintに怒られるが、CSSが有効でない環境の事を考えるとやはり空のほうがいいのだろうか

369はもういないのか・・・？

>>429
そんな空div使うより
素直に>>393の方法でよくね？

無理してlintで満点狙う必要はない。

満点でなくてもいいが、
そのCSSをあとで変更するときのことを考えると
HTMLに無駄なものが入ってるのは避けたい。

みなさん、色々と考察していただいてありがとうございます。
font-size: 1px;
を書き足すので良いかと思います。上手くできました。

>>434
その１行ですむならそれが良さそうだね。

>>431
IEでJS切ってると表示できない
互換モードでしか動作しないので、IEでは逆に制約が出る(margin:auto;が使えないとか)

結局一長一短…かな？

あと、widthとpaddingは一緒に使わない方がいい。

使うならCSSハックでIE対策だな

>>436
JS切ってると困る実害のあるものならともかく
たかが装飾が出なくて何が困るんだ？
互換モードはともかく。

>>436
標準モード版も出てる。探してみ。

どこどこ？

所詮CSSだってOFFにされてりゃ表示されない装飾だ罠
なんでJSだと忌避されるのか

>>369
いまさらだが、関連情報みつけたのでメモ
ttp://fumika.jp/nikki/2005/07/ie-div-height-1px

一長一短、って言っただけなんだけどな

>>440
そうなのか、ありが�d

>>442
ここはcssスレだからだよ。
それぐらい気づけ

JSよりCSSの方が全体的に使いやすいしな

まぁ・・・解決したんだし落ち着け。

初心者のためのインターネット講座　みたいなものでも(ieの)JSは切れって書いてあったりするし

そういえばパソコン始めた頃は俺も知り合いに言われてJS切ってた記憶が・・・

>>443
なるほどー

むしろCSSも切ってユーザCSSで全部見た方が自分のためだよな・・・

>>446
今回の場合、それは的外れ。
htaはCSSの書き方だけ知ってればいい。

ユーザCSSで見られたら何か腹が立ってくる。
試行錯誤して考えたソースなのに台無しにしやがって！

>>367
＞ソースを見ると、大文字と小文字が混在してるので、どこかからコピーしたんですよね。
＞解説サイトからコピーしたのなら、ちゃんと前後もお読みになって理解して下さい。
確かにコピペしたのですがbackground-image: url("http://www.xxx/~xxxx/image/header.jpg");
の意味理解したので、この1行だけでも成功するか試してみたのですがFXでは表示されませんでした。

＞まさかとは思いますが、配布されてる画像はDLしてからご自分のサイトに置くものです。
画像は自分で作り自分のサイトにうｐしています。他人のサイトは一切関係ありません。


1行を何度見直してもスペルは間違って無いのでFXだけで
表示されない原因がさっぱりわかりません。
FX特有のバグで無いとしたら、いったい何が原因なのかわかる方いたら
ご教授お願いいたします。

>>453
ユーザーCSSを被せられるよなクソデザインを考えた自分を恨めよ。

background-image: url("http://www.xxx/~xxxx/image/header.jpg"); の"っているの？

firefoxでdivタグにoverflowを設定し、
その中に<li>〜</li>を配置すると、firefoxでのみ横スクロールバーが出ちゃいます。
横スクロールバーは消せないんですかね？

div { width:400px ; height:100px ; overflow:auto ; border:solid 1px #000 ; }

<div>
<ul>
<li>あ</li>
<li>い</li>
<li>う</li>
<li>え</li>
〜略〜
<li>け</li>
<li>こ</li>
</ul>
</div>

>>455
どういう意味？

>>456
あっても無くても良い。　と思いたい

>>457
overflow-x: hidden;

>>460
おまえアホだろ

>>456
あってもなくてもいいが、古い一部のブラウザで"ありだと認識してくれないことがある。

>>457
ボックスに適切な余白を取ってないせい。
paddingだったかな、スクロールバー15pxだか16pxだかが必要。

>>456
ありがとうございました！
「"」を取り除いたら出来ました〜！･ﾟ･(ﾉД`)･ﾟ･｡

＞古い一部のブラウザ
・・・362がまずやるべきことはアップデートなんじゃないかと

何使ってたのか興味あるな

ふむ。化石ブラウザか？

>>461
文句だけ言うのなら答えを教えてやれ

いやそもそもfirefoxでoverflow-xは…という突っ込みじゃないのか？

>>466
460はそれ以前の問題だろ・・・
質問者はFxの話をしてるのにocerflow-xはIE独自拡張

>>462
(ﾟ∀ﾟ)　できたー！

divタグに左右 8px ずつ padding をいれたらオッケーだった。
ありがとうございました。;

>>460は間違って覚えてるからそれを正して上げれば良かったんじゃないの？

今日はなんか荒れてるな。
>>460は釣りかマジレスかどっちだ

ブラウザですがFXのVerは「1.5.0.1」です。
多分最新Verだと思います。

>>472
それは絶対その他の部分で間違えてるから
CSS全部見直したほうがいいぞ。
""が入っててもその他が正常なら問題ない。

荒れてるか？

この程度で荒れてると感じてるようじゃまだまだ甘いね。

見下してる様な良い方するんじゃねーよksg

>>473
うーん・・ブログのcssにあの1行を足しただけなので
スペルが間違ってない以上、私には皆目見当もつきません。
""以外に何か原因になりそうなところってあるのでしょうか？

とりあえず、当初の問題は解決しているのでこれ以上の質問は止めておきます。
みなさんどうもありがとうございました。

>>476
荒れの素追加ですか？

ブログだとダブルクォーテーションが\が必要とかかもな。ものによるが。

>>477
あの一行だけ？
やっぱ間違ってるよ。面倒でもちゃんと調べた方がいいって。

そのブログの素の作りが駄目ってだけじゃね？
とりあえず直ったんだから気にする事ないんじゃ。

また改造したくなったら悩めばいいさ。

すみません。質問です
position: absolute; top: 75px; bottom: 30px;
ってどういう意味なのでしょうか？
そのボックスの上辺が上から75pxのところにあり、
下辺が下から30pxのところあるボックスと考えればよいのでしょうか？

ってことはこのボックスの高さは100%-75px-30px　になるのですか？

>>482
意味はない。間違った書き方。

>>468
>質問者はFxの話をしてるのにocerflow-xはIE独自拡張
CSS3 に盛り込まれる予定じゃなかったかいな？

ついでにいうと、Fx 1.5 では対応してたはずだが

CSS2さえ草案段階だってのにCSS3の話してどーすんだ

>>485
>CSS2さえ草案段階だってのにCSS3の話してどーすんだ
まぁ、そりゃそうなんだが

IE独自拡張って認識も間違ってるぞとつっこみたかっただけでな

＞IE独自拡張って認識も間違ってる
間違ってない。
IEが勝手に独自拡張してしまったので仕方なく盛り込まれたプロパティなんざ
ほかにもたくさんある。

質問です。
画像のパレットはいぢれませんか？
赤いフィルターとかかけたいのです。

>>488
画像を変更してください。

>>489
やっぱり無理ですか。
半透明のテーブルを上にのっけたりするしかないですかね。

てーぶーる・・・

>>490
何をやりたいかは知らんが、
>>489の言うように素直に画像加工のほうがいいと思う。

半透明ってIE対応できてないんじゃ。

画像の手前に
■□
□■
って感じで、■が赤、□が透明なgifを敷き詰めると
大きな画像ならIEでも赤いフィルターがかかったふうに見えなくもない
ただしスムーズスクロールを使うとチカチカするので注意

モノトーンはFilter:Grayですよね？
そんな感じで色調を統一できないかなと思いました。
半透明とはAlpha+Opacityのつもりで言っていました。

>>495
それCSSじゃないから。

一行の高さを、調節したい時にmarginやpadding以外で調節することって出来ますか？


---border---
一行
---border---

ではなく

---border---


一行
---border---

という具合に、数px分、下に行を下げて表示したいのです。
marginやpaddingは使わずにできる方法ありますか？

補足：行の高さといっても
line-heightではありません

>>497
なぜmargin/paddingを使わないのだね？

marginとpadding使えばいいのに･･･
何故ﾀﾞﾒ？

cssの擬似フレームって標準準拠で出来ないの？
標準準拠で擬似フレームやってるところあったら教えて

>>501
もっとよく探せ

>>497
背景と同色の画像を設置したり？
ダメだな。

>>502
んなこと言わずに知ってるなら教えてよ

>>497
position使うとか。
marginやpaddingの方がいいと思うが。

>>504
ヒント：知ったか

　　なんでこんなにラベルが低いの？　　all

507がいるからだよ。

いや、脊髄反射の508が居るからだと思います。

507のラベルが低いに1票

うんじゃ507の俺がラベルの高いやつを・・・

>>501
これじゃいけんの？
ttp://www.cssplay.co.uk/menu/background2.html

507のラベルが上がった

<div id="page"><div id="top"><h1>Site Name</h1></div></div>

* { margin: 0; padding: 0; }
html{height:100%;}
body{height:100%; width:660px; margin:0px auto 0 auto; background-image:#000000;}
body > #main {height: auto;}

#page {
position: relative;
border:solid 1px #aaaaaa;
border-width:0px 1px;
height:100%;
min-height: 100%;
background: #ffffff;
}

#top {
width: 643px;
background: #e4e4e4;
background-repeat: no-repeat;
background-position: bottom;
margin: 0 auto 20px auto;
position: relative;
}
h1{
color: #444444;
font-size:200%;
margin: 13px 0 35px 3%;
letter-spacing: 1px;
width: 500px;
font-family: Arial,sans-serif;
}

↑がソースなんですが、operaで見ると、#topの↑に隙間できてしまいます。
ﾅﾆｶﾞ原因なのでしょうか？

とりあえずDIV病ということは分かった。

すみません。#page　の↑に隙間ができる　と言ったほうが正しいかもしれません。

>>514
つーかそれでスペースできないのはIEだけ

>>514
>>517の通り。
h1にmargin取ってるから。

>>517-518さん。ありがとうございます。
これは、#topにpaddingを入れて調整したほうが良いのでしょうか？

>>519
IEでの表示が望み通りなら、
そっちのpaddingも必要ないんじゃ？
というか正直#topの存在意義がわからん

>>519は空白を作りたいんだか作りたくないんだか。

>>520-521さん。
ありがとうございます。ポジションで設定することにしました。

#pageの中には#topだけではなくて、#menuとか#mainや#bottomなどが入ってるんです。
空白は消したかったのです

本当恐縮なんですが、idとclassの違いって具体的にはどういった部分で
使い分けるものなんでしょうか。
idはユニークなところだけとよく聞きますけれど、ユニークなのか
ユニークでないのかなんて、作ってみてからでないとわからないし
使い分けする意図がわかりません。
とりあえず、そのページの骨格にあたる部分をidにするのだと
解釈していますが、そんな感じで良いのでしょうか？

>>523
CSS主体でユニーク/非ユニークを考えるとわからないと思う。HTMLの意味で考えてくれ。

890 Name_Not_Found 2006/01/30(月) 23:00:36 ??? mailto:sage
>>886
IDは太郎さん、花子さんといった「名前」。
CLASSは男、学生といった「属性」。
だからIDは1要素に1つしか設定できないし、（1つのファイルで）被っちゃならないけど、
CLASSは1要素に幾つでも設定できるし、ファイル内で難解使ってもいい。

904 Name_Not_Found 2006/01/30(月) 23:15:33 Ljl+v/R7
>>890
それならIDなんて使わずに
全部クラスで良いんじゃないの？

905 Name_Not_Found 2006/01/30(月) 23:18:15 ??? mailto:sage
>>904
classは主にCSSのためにしか使われない。むしろこっちはなくても何とかなる。
だがidは違う。まさに「名前」だ。
そこにアクセスするための名前だから、見出しなんかには確実に付けといたほうがいい。
廃止されるname属性の代わりにid属性が使われる理由もそこ。

>>523
もうちょっと付け加えると、
そもそもそれぞれの要素自体がclassの役割を持ってるのね。
だからclassはなくても意味的には何とかなるの。
でも同じリストでもちょっと違う意味を付与したいなんて場合、
例えばdlなんて物凄く汎用性があるから、
会話文して使われるdlと日記のリストとして使われるdlとで
classを変えるなんてことは考えられる。

idは524にある通り「名前」なので、要素的な意味合いとはまた別。
何故固有の名前が必要か、ということを考えると、
見出しに必要だったり、日記の日付を記したdtに必要だったり。

SOME-ID というIDをもった要素があれば
　　〜〜.html#SOME-ID
みたいにしてアクセスできるってのは知ってるか？

こういう風にしてアクセスして違和感がなければID、という感じでだいたいOKかと思われ
絶対OKとは言わないけど

-みたいな記号って使っていいんだっけ？

>>527
どこに？

５２６のようなことできるなんて、今まで知りませんでした。

id="SOME-ID"　これかな

使えない記号もあるからなるべく使わない方が良いって感じだったかと。

ブラウザによっては認識しないから使わない方がいいな。
あと＿とか

idでは"-"使うとうまくいかないことがあったが
classでは経験したことないから使ってるなぁ

属性定義では id = name [CS] となっている。

そして name トークンはこうだ。
『IDトークンとNAMEトークンは、アルファベット([A-Za-z])で開始し、
任意の数のアルファベット、数字、([0-9])、
ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある』
( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-name )

というわけで使っていいしブラウザの実装も普通はそれに適合するはずなのだがな。

昔（win2000が出たばかりの頃）バイト先でPGさんに、
ディレクトリやファイル名にアンダースコアは使っていいが、
ハイフンはダメだと言われた。
何かのコマンドとダブってたんじゃないだろうか。

>>535
ttp://linux2ch.bbzone.net/index.php?OperatingSystemGeneralFAQs#x36c1975
こういう事情もあって、アタマに使うのは昔から御法度なんだけど
途中に使ってどーのこーのという話は聞いたことがないな…。

本題の id="sec10-3" みたいな名前の id は、個人的によく使ってる。
CSSで #sec10-3 を設定してるわけじゃなくて使い道は>>526だけどね。

俺は使うならアンダースコアだな。

ハイフンについて
HTMLの仕様の方ではIDの文字列としていろいろ使えることになってるんだが、
CSS2の仕様だと、IDセレクタにアンダースコアは（エスケープしないと）使えないということに
なってたせいでハイフンを使うくせがついてしまってた

ただ、CSS2の正誤表でアンダースコアが使えない制約が取り払われているから
今どきはもう使ってもほとんど問題ないだろうな

ここの人たちってきちんとセーフカラーだけで配色してますか？
セーフカラーだけじゃ無理です・・・・・

しましまの画像用意すればいいじゃん。

自分はもうどんな色でも使ってる。
セーフカラーとか気にしてたらやってられない

ってかセーフカラーじゃない色ってそんなに環境によっては変化が激しいの？
少し薄くなるか濃いなるぐらいのlv?

>>539
例えば、だけど 写真画像が主役のホームページなら 気にしなくても
いいと、個人的には思う。
ブログみたいなシンプルなのは、考慮しないといけないんじゃないかな。
色数落とすと、画面パフォーマンスが上がるんで、無視できないモード。

セーフカラーでも巧く使えば大抵おＫなわけだが。
そんな細かい色の違いよりももっと根本的に気にしなきゃならないところがあるんじゃ。

セーフカラーの話が出たからその話をしただけであって他の事はしらねー

もう最近はセーフカラーとか気にしなくていいよ。

544は545の何かコンプレックスを刺激してしまったようだ。

>>547
コンプレックス？意味がわからん

だな。セーフカラーとか気にしてる奴はいつの時代の奴だ。
最近では255色しか使えないディスプレイを使ってる人なんか見たことも聞いたこともないぞ。

>>537
俺はハイフン使うとグーグルで別単語だと認識するクセを利用して未だにハイフンだな。
具体例：mac-apple.com ってなドメインの場合、mac apple　という複合語検索にヒットするが
　　　　　mac_apple.comってなドメインの場合、 mac apple って検索してもヒットしない。　ヒットするには mac_appleと検索しなければならない

まあアンダースコアをドメイン名に使えるかどうかは知りませんが。

今までセーフからしか使ってなかったけど…>>549のレスを読んだこれから使うことにした

>>549
256だろ。
色数の問題ではなくて、ガンマ値その他の問題で機種によって
セーフティ以外だとずれるって話だよ。

それは気にするほどでもない。

お前ら、ほんの少し色が変わるぐらいで大きくしすぎ

>>552
ずれる　ならまだマシだろ。

化石PCでセーフカラー以外の色にに対応してなかったら終わってる

気にしない香具師は使えばいいが、
気にする香具師は使わなきゃいい。
555は使わないでいいし、549は使えばいい。

何をいまさら

俺は何でも使っていいことにするとどんな色にするか迷うから
セーフカラーだけ使ってる。
色弱だからあまり細かい色の違いは分からんしな。orz

>>558
俺も最初はそうだった。
でも慣れているにつれて、色への要求が強くなってくるよ

そういえば前に評価スレでマカーがほぼ白のピンクとか言ってた背景色が
ウィン人にはとてもピンクに見えてた事があったな。アレか。

>>559
それを「慣れてる」「慣れてない」で勝手に決めつけなよ

CRTモニタであまり小さい色の違いに拘っても
液晶で全部同じ色に見えてたことがあった・・・

もうどんな色使ってもいいよ。そんな現象おきるのは数えるほどしかいないんだから、
その人を切り捨てれば良いだけ。

もうスレ違い

スレ違いと言いながら最後ッ屁で言いたいことを言って後を濁す鳥の法則。

だな。そんなこといちいち気にしてたらcssなんてやってられねーよ。

もうスレ違い

>>563
さすがに液晶とＣＲＴは「数えるほど」の問題じゃないと思うが。

>>566
つーか、そろこそセーフカラーですらどうしようもない問題。
気にしても生姜ない。

もうスレ違い

もうスレ違い
ﾜﾛﾀ

本当に立つ鳥ってのは後をにごすんだということをよく分からせてくれるスレだ

>>569
チラシの裏にでも書いてろ

>>570
つ【チラシの裏】

>>567
「気にしてもしょうがない」ではなく、
だからこそ「地と文のコントラストは上げたほうがいい」という
ユーザビリティに繋がるんでしょ。

発端は>>539だっけ。
参考になったかい？

そんな丁寧に説明せんでも

>>572
はぁ？いつユーザビリティの話題になったんだ。
地と文のことなんか触れられてないのだが？

セーフカラーしか使わない様な奴は、Webだけではなくて
人生でも損してる。

>>575
おまえは「スレ違い」と閉じた人間じゃないのか？ｗｗｗ

なんでここはIDでないんだよ。

ってかセーフカラーだけだったら、薄いグレーとか無理だよ。

ﾊｧ?

セーフカラー以外の色も使えばいいと思う。
しかしその時は背景色と文字色に注意した方が良い。

セーフカラー以外も使うが、さすがら#ccccccは薄いグレーだとオモ

*/

白と灰色交互の画像を用意すればいい

/*

>>560
いや、あれは微妙な色の違いを読み取るセンスの違い。
Macで見てもピンクだった。

*/

216色内でも、winだとマゼンダが強い。

>>585
MacでもWinにガンマ値合わせてる奴も多いしな。

#typeA {
age:21 ;
Height:162cm ;
Weight:46kg ;
Bust:83cm ;
Waist:62cm ;
Hip:84cm ;
}

>>589
ageの価は数値よりもyounger で設定したほうがいいよ。

#blogcontainer{
width:758px;
text-align:center;
}

#content{
float:left;
width:534px;
text-align:center;
margin:0 auto;
padding-top:20px;
}

　　　　　　　　　　　　　　　ここを増やした
#blog{　　　　　　　　↓
width:800px;
text-align:left;
margin-left:13px;

http://blog.livedoor.jp/hima_2ch/
本来右横にあるべきサイドバー？が下に行ってしまったので
ご指南いただきたく思い書き込ませて頂きます

ヘッダー：サイトタイトル画像
左側：メニュー
右側：コンテンツ内容
のcssサイトでブラウザ機能使ってcss無効状態で見ると

上から
ヘッダー部分
コンテンツ部分
メニュー部分

という順番になってるのが多いけど
この順番にしているメリットって何かあるのでしょうか？
自分の所では

ヘッダー部分
メニュー部分（float:light）
コンテンツ部分
この順番でやっているですが・・・

（float:left）
でした、ｽﾏｿ・・・

>>592
CSSじゃなくてHTMLの話になるような気もするけど、

CSS未対応(もしくは media タイプの設定によって反映されない)かつ
ウインドウが小さく必然的にスクロール回数が増える携帯端末や
読み上げブラウザなどでは、メニューを挟む事によって
ページトップからメインコンテンツまでが遠くなってしまうと閲覧に手間と時間がかかる

通常、Index ページを除けば、閲覧者はそのページのメインコンテンツを読むために
そのページにアクセスしてくるのだから、メインコンテンツへの到達が容易なほうが
環境によっては圧倒的にユーザビリティが高い。

というのがひとつの考え方かと。

>>592
posiitionを使ったり、float:right;を指定して、
htmlにはコンテンツを部分を先に書くという方法がある。
理由は>>594の通り。

>>594
なるほど！携帯では確かにそうですね、目からウロコでした・・・
この方式も考えてみます

>>596
書き込み中にアドバイスどうもです

携帯からのチェックが面倒なら、せめてCSSをオフにしつつ
ブラウザのウインドウサイズを携帯並みに小さくして見る事をオススメするよ
製作中のhtmlのユーザビリティが実感として分かりやすい

>>596
他にも音声ブラウザを考慮して、ナビを飛ばしてh1のidに移動する
リンクを先頭に置いとくというのも手。

画像を半透明にする指定はIEしかできないのでしょうか？

>>600
逆。IEのみ半透明PNGに対応してない。

>>599
ちょうど今 Strict スレがそれに似た手法の是非で大荒れだな

>>602
全く以て別問題。
「ページ先頭」リンクは正規のキーボード機能がある。
「ナビゲーションを飛ばす」機能は存在しない。
だから前者は付けなくても問題ないが、後者は付けざるを得ない。
ま、ナビゲーション自体UAの機能とすべきって意見もあるが。

Strictにこだわる人の半分くらいは、
内容の是非を熟知した上じゃなくて、
単にそう規則されてるからってだけの公務員っぽいよな。

>>604
規則を破りまくりんぐだZE！
っていう人よりは好ましいんだけどね。

>>604
別に規則じゃないでしょ。
規則以上のStrictな精神は確かに存在するよ。
ゴミを捨てても条例にひっかからない地域もあるけど
ゴミを捨てない精神でいよう、みたいなもん。

>>604
単に規則されてるだけならul直下のdelとかも許容されるべき。
だが連中はそうじゃない。
ul直下delはDTD上も仕様書上も違反ではないがStrict的に好ましくない
という理由から使わない。
内容の是非を理解した上で規則以上に変態なスレだ、あそこは。
だがそれがいい。

＞だがそれがいい。
ﾜﾗﾀ

だから向こうでやってろよ。
こっちに持ち込むな。

質問がそういう内容なのに無視しろというのか

質問への回答はとっくに終わってる。

終わってるのに続ける>>611

*/

*\/

*←ケチュアナ

リストの表示で質問です

<li>テキスト〜〜</li>

っとli間でテキストが多く入っている場合、

・ああああ
ああ

というような表示になりますが、これを、

・あああ
　あああ

というように揃える事はできますでしょうか？スペースを入れるのではなくて。

>>616
list-style-position:outside;

少しは調べれ

>>617
ありがとうございます。情報不足で済みません。
liを以下のようにしているのですが、その時に自動的に折り返しされると
前の数字が表示されなくなります。なので、list-style-position:outside; では
ないのかな？って思いまして・・。

li{width:200px;
list-style-position:outside;
}

ちょっと急いでるんで誰か大至急教えてください！

このぐらいの質問で偽物が出るとは・・・

自分で何とかします。。

だから質問者はメール欄を空白にしてIDを出せと
テンプレに書いてあるって何度言ったら（りゃ

これぐらい　って言うのなら最初から自分でやって下さい。
テンプレを読まない自分が悪いんじゃないんですか？

ごめんなさい。

結局は
*{
padding:0px;
margin:0px;
}
を指定していたのが原因でした。お騒がせしました。

いや、それは原因じゃないだろう。
paddingとmarginを新たにその要素に設定してあげなかったのが原因だ。

>>601
600が言ってんのはpngの話じゃなくてアルファブレンドフィルタの話じゃない？

>>600
スタイルシートで

　　filter:alpha(opacity=50);

とか指定するやつのことだったらIE限定。

>>625
わかっててスカしてんだろ、それってCSSじゃないし。

opasityはCSSにもあるな。
javascriptでもCSSでもIE、Gecko、Safari、Operaで表示可能。

ちなみに、CSSでgecko系は-mozがつく隠し機能みたいなやつな。

>>627
opasityはCSS3だから隠し機能。filterはまた別。

ちょっとレベルの高いCSSはどこで調べられるんだ？

>>630
CSSのレベルの高さとは、優先度の違いのことか？

opacity

<body>
<div id="botton">
<ul>
<li><a href="#">final</a></li>
<li><a href="#">back</a></li>
　　<li><a href="#">dash</a></li>
</ul>
</div>
</body>

#botton a {background-image: url(botton-a.gif);display: block;
width: 100px;text-align: left;
height: 100px;background-repeat: no-repeat;
text-decoration: none;padding-top: 45px;
padding-left: 45px;}
#botton a:hover {
background-repeat: no-repeat;background-image: url(botton-b.gif);}
#botton li {list-style-type: none;}

cssのロールオーバーボタンを作っているのですが
aでタグ指定してあるボタンタイトルをボックス領域の中央辺りに表示したいので
#botton a の上左にpaddingを指定したのですが、そうするとボックスの領域自体がpadding指定した数値分伸びてしまいます
aのボックス領域は100*100そのままにボタンタイトルだけを移動させるにはどうすればいいのでしょうか？
因みに背景画像のbotton.gifは100*100の色違い画像です

すまん、状況がわからないのでもうちょっと詳しく。
ていうか中央はmargin:autoなわけだが。

>>634
ん、でもインライン要素は text-decoration: center じゃダメなん？

>>635
もちつけ

text-decoration: center？ｗｗｗ

どこにtetx-align:centerがあるのだろう。

俺ももちついたほうがいいな。＞tetx
吊ってくる。

関係ないと思うけどwidthとpaddingを同時に使うのはやめよう。

ちょっとAAにしてみますた
#botton a の上左paddinを指定しない状態でこうなります
＿＿＿＿＿＿
|back　　　　　　| 　width: 100px
|　　　　　　　　　|　height: 100px
|　　　　　　　　　|
|　　　　　　　　　|
|　　　　　　　　　|
￣￣￣￣￣￣
このbackの文字を↓のように中央にもってきたいのですが
＿＿＿＿＿＿
|　　　　　　　　　| 　
|　　　　　　　　　|
|　　　back　　　.|
|　　　　　　　　　|
|　　　　　　　　　|
￣￣￣￣￣￣
#botton a に上左paddingを指定調整すると文字は中央に来るのですが
aのボックス領域がpaddingで指定した数値分伸びてしまいます
＿＿＿＿＿＿
|　　　　　　　　　|@@@@@
|　　　　　　　　　|@@@@@　　　　　@=#botton a のボックス領域
|　　　back　　　.|@@@@@
|　　　　　　　　　|@@@@@
|　　　　　　　　　|@@@@@
￣￣￣￣￣￣@@@@@@
@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@

なのでブラウザでは@の所は何も表示されてないのに、マウスカーソルもっていくとロールオーバーしていまいます
この領域を伸ばさずにbackの文字を中央に移動させるにはどうすればいいでしょうか。。それとも方法がおかしいのでしょうか

>>636
すまん、text-alignだた。

(･∀･)ﾊﾟｯﾃﾞｨﾝ♪

>>640
finalとかの文字を最初から背景画像に入れとくのが、一番簡単だと思うが。

>>640
中央寄せはtext-align:center;、上下はline-height:ボックスの高さ;。
paddingはなしで。

>>643
横レスだけど、それだとくっついてしまうんじゃない？

横レスだが、くっつくをｋｗｓｋ

>>645
何と言うか、背景画像が縦に繋がってしまうんじゃないかなと思って・・

> ｋｗｓｋ
最近VIP語使うの流行ってるの？
VIPPER以外でも…

元々つながってるのでは?

>>648
なるほど、thx!

>>647
VIPPERには行ったことがないが、他板でも見るぞ

なぜwidthとpaddingを同時に指定してはだめなんですか？

IEの実装が変だから。>>4を参照。炊きあがったご飯が残っていたという。

別にダメじゃないさ、CSSハック使って違う値を指定してやればいいだけ

まぁ・・・最初から指定しとけばつまんないミス減るしね。

っていうか炊き上がったご飯ってなんだ

朝飯かな？

ことわざ？

口癖？

「炊きあがったご飯が残っていた」って何なのだ？
低学歴の僕達には分からないよぉ〜＞＜

floatをつかって、左メニューと右コンテンツの2カラムのページを作る場合、
htmlでのメニューとコンテンツの順序は、
どちらを前にするのが一般的なのでしょうか？

>>660
このスレよく読め、節穴か

>>660
自分が使いやすいほうにすればいいんじゃないの？

>>660
レイアウトを元にHTMLを書くというのが間違い。
自分が文書として正しいと思う方を選べや。

>>660
まずはHTMLを書け。
そしたら必然的にどっちが先にくるかわかるだろ

>>664
必然性はないと思うよ。

「個人の統一性という意味の必然性」は文書構造には存在するぞ。

なんでそんなに漢字が多いのだ？

667 名前： Name_Not_Found [sage] 投稿日： 2006/04/06(木) 14:32:21 ID:???
なんでそんなに漢字が多いのだ？

668 Name_Not_Found 2006/04/06(木) 14:57:59 ??? mailto:sage
667 名前： Name_Not_Found [sage] 投稿日： 2006/04/06(木) 14:32:21 ID:???
なんでそんなに漢字が多いのだ？

669 名前：Name_Not_Found[sage] 投稿日：2006/04/06(木) 15:10:00 ID:???
668 Name_Not_Found 2006/04/06(木) 14:57:59 ??? mailto:sage
667 名前： Name_Not_Found [sage] 投稿日： 2006/04/06(木) 14:32:21 ID:???
なんでそんなに漢字が多いのだ？。炊きあがったご飯が残っていたという。

そろそろ止めとけ。

昨日から勉強し始めた者ですが
IDとclassの使い分け方がさっぱりわかりません。

.hoge{
プロパティ:値;
}
で定義し
<p class="hoge">test</p>
とするのと
#hoge{
プロパティ:値;
}
で定義し
<p id="hoge">test</P.
とするのと、どう違うのでしょうか？
全く違いがわかりません・・・。

>>673
>>523-526
CSS的にはIDとclassでは優先度が異なる。
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html
ttp://hp.vector.co.jp/authors/VA022006/css/cascade.html#calculating-specificity

classは何年何組みたいな何人もの人が所属するもの。同じclassをいくつも使える。
IDは山田太郎みたいな個々の名前で、同じ名前は使えない。

>>675
その例えって、よく使われるけど、
>>524みないな補足まで含めないと、
概念を理解できない段階で聞いても余計混乱する。

質問です。
#page　という高さ100%のDivボックスの中に、
#leftと#rightというDivボックスをフロート:leftと設定していれたんですが、

#rightの中にある文章が多すぎて、#pageの高さ100%を超えたら
#rightが#pageを貫通してしまいます。
貫通せず、#rightの高さが100%を超えたら#pageの高さもそれに応じて増えるようにしたいのですが
どうすればよいでしょうか？

>>677
#page内の#leftと#rightの後にclearを入れる。

>>673
class属性は要素の分類を表す。
例えば、同じa要素でも「サイト内のリソースに結びつくa要素」と「サイト外のリソースに結びつくa要素」という
分類があるとすれば、それは次のようにclass属性で表される。

<a href="./document1.html" class="naibu">文書1</a>
<a href="./document2.html" class="naibu">文書2</a>
<a href="http://www.yahoo.co.jp/" class="gaibu">Yahoo! JAPAN</a>

都合のいいことに、CSSではこのclass属性をセレクタとして利用できるので、
「サイト内のリソースに結びつくa要素」は青で表示、「サイト外のリソースに結びつくa要素」は赤で表示、
といったように分類によって表示を区別することができる。

一方、id属性は要素が固有に持つ名前を表す。
例えば、あるh2要素が固有の名前を持つとすれば、それは次のようにid属性で表される。

<h2 id="GAIYOU">概要</h2>

id属性は文書中のただ一つの要素を特定できるので終点アンカーとしても利用できる。
さらに都合のいいことに、CSSではこのid属性をセレクタとして利用できるので、
文書中のこの要素だけは背景を黄色にするといった使い方もできる。

>>678さん。
ありがとうございます。
#leftと#right　にclear:left;を入れることでしょうか？
それとも、#rightの下にあるDivボックスにclear:left;を入れることでしょうか？

両方試したのですが、無理でした。

質問なんですが、ネットスケープ7.1でのみ
背景画像が2重になっている時、列数によって1ドット隙間が出来ます。

<div class="a">←これに背景画像あり
<ul>←これにも背景画像あり
<li></li>
<li></li>
</ul>

上記の場合、li要素の数によって
ul要素の背景画像に1ドットの隙間が出来たり出来なかったりします。

こういうバグはありますか？
また、対処法はありますか？

画像でナビゲーションをつくろうと思ってるんですが
リンクをクリックすると
http://www15.big.or.jp/~kaini/gazou/img/15392.jpg
のようにまわりに細い線が入るんですが
リンク先のページから戻ったときに
この線が表示されないようにできませんか？

追伸です。

2重になっている時と書きましたが
試してませんが2重でなくても起こるかもしれません。

またネットスケープは7.1のみと書きましたが
試してませんが他のバージョンでも起こるかもしれません。

また背景画像の並べ方はrepeat-yです。

バグ技使ったら事故解決しました。
ありがとうございました

>>681
そのソースのどこに「列」が存在するのだ？

>>682
できるけど、それって自分がどこにいたかわかって非常に便利な者なので消さないでホスィ・・

>>677
min-height:100%;

列数というのは<li>の数です。

ちなみにmargin-bottom: -1pxとすると隙間は消えます。
しかし気持ち悪くて仕方ありません。
バグ辞典にはなかったので追加を検討したほうがいいかもしれません。

>>684
どうやって解決したか教えて欲しい。
それ俺も前悩んでたんだけど、諦めた。良かったら教えてください

>>686さん。
それはもうソースに書いています。

>>689さん。
えーと。
body > #page {height: auto;}
これを追加したらできました。

>>687
それは「行」数。

>>690
ありがとう。
body > #page　っていうの初めて見たよ・・・
勉強になった

いろいろと検証しましたが、
どうやらli要素のfont-sizeを90%以下にしたら隙間が出る場合があります。

body > #page　って、そんな書き方できるんですか？？
解説してるサイトあったらアドレスを教えてください

さらにいろいろやってみましたが
どうやら縦方向のサイズあたりが深く関係しているようです。
周りの要素のfont-sizeやmargin、または要素自体の有無など
縦方向のサイズによって、隙間が出来たり出来なかったりします。

>>685
なるほど
そういう見方もあるんですね。

>>694
http://www.y-adagio.com/public/standards/tr_css2/selector.html

事象が出る状態で削っていって一番ミニマムなソースにしました。

<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #ffffff;
color: #ffffff;
}
p {
font-size: 90%;
}
li {
font-size: 90%;
}
.part {
background: url(./bottom.gif) bottom no-repeat;
padding-bottom: 30px;
width: 580px;
}
.part p {
background: url(./back.gif) repeat-y;
}
.part ul {
background-image: url(./back.gif);
background-repeat: repeat-y;
}
</style>

要するに高さを指定しないでギッチリレイアウトをしようとした結果だろうが・・・

<div class="part">
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<ul>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
</ul>
</div>
</body>
</html>

bottom.gifは580×30の黒一色、
back.gifは580×1の黒一色です。

ネスケでは1ドット隙間が空きます。
モジラ、IEでは空きません。

また、p要素内の文字数を減らした場合や、
li要素の行数を変えた場合には、事象が起こらない場合があります。

また、いずれかのfont-sizeを91%以上にしても事象は起こらなくなります。
しかし、事象が起こる場合もあるので気持ちが悪いのです。

要するにコレ、Web先生なわけだろ？

>>681
Geckoのバグだ。そのうち直るだろ、待て。

>>699
高さを指定しなくてもrepeat-yでは縦方向に敷き詰めてくれることぐらい期待します。
ネスケのrepeat-yにのみバグがあるということでしょうか？
ブラウザ機能の文字のサイズを100%以外にすると隙間は消えます。

>>704
了解いたしました。
ネスケのみに適用するようなCSSハックがない現状では
仕方なくこの部分のみ無視することにします。

703の否定がないぞオイ・・

Web先生とは何でしょうか？

時間がな。

>>706
ちなみにFxの最新版でも出る
小数点の丸め誤差に関係するらしいので、
margin-bottom:-0.5px;とかしておくとどの環境でもうまくできたような気がするけど、ちょっと記憶が曖昧

>>710
ネスケはまだしも、Fxの最新版で出るのは無視できないので
margin-bottom: -0.5pxで対処することにします。

でもそれをすると今度はIE6がわけのわからない挙動を示すようになったので
アンダースコアハックを織り交ぜて強引に解決させました。

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

あ、IE6がわけのわからない挙動を示していたのはミスでした。
>>710の方法でどの環境でもokです。

>>676
ちゃうちゃう、順番が逆。
概念を理解する為の足場としてのイメージ理解って感じだ。
イメージが湧かないと概念を理解しづらいからな。

一応言っとくけど、ネスケもFirefoxも同じGeckoエンジン積んでるから表示は同じになるぞ。
違うとしたらGeckoのバージョン。

もう俺はネスケとか無視。
IEとOperaで確認してれば万事おｋ

普通は逆。
MozillaとOperaでおＫなんIEなんていらない。

もじらでＯＫでＩＥでぐちゃぐちゃになったことあり。

まあ、ネスケは無視だわなー。
ネスケユーザーを見つけたら、火狐に変えなさいというもいう。

NN4.xとかは論外だが、Netscape7とFxとで大きな差異を感じた事はないな
Netscape8に至ってはほとんど現行のFxと比べて遜色ないのでは

>>716
IEじゃ崩れまくっているけど、読めないほどでもないので
ハック使わずに放置している。

>>717
そりゃあたりまえ。IEのCSS解釈酷いから。

>>718
N7はCSS2.0対応、現行FxはCSS2.1対応。
だから若干違いはあるにはある。バグとかも違うし。

IE放置とか言ってる奴は自己満足。
ただしこれは自己満足を否定するわけではない。

そもそも個人サイトの大半は自己満足

CSS程度でIE放置しても問題じゃないな。切りゃいいだけだし。

切る = 個人サイト = 自己満足

企業サイトでは無理

企業サイトでもIEとNetscpe以外だとFxでさえ弾かれるところも多い件。

>>724 そりゃそうだろ。
個人サイトみたいに趣味でやっているような人はIEを無視して楽しいCSSライフを。

どうしても…という人や、ハックすることが趣味な人は
別に構わないけどな。

企業はNetscapeとFxの使用状況を知らないとしか思えない。

企業は99%の閲覧者に等しく利便性を与えるよりも
80%くらいの大衆だけに、より上を行く利便性を与えたほうが云々、みたいな

20%も逃してる時点で経営戦略としてどうかとも思うけど。

古い経営陣の考え方としてはいまだに主流なんじゃない？
緻密なマーケティングができず消費者間の口コミにたいした力がなかった時代ではそんなもんだったろう

団塊の世代が退いていけば変わる罠

>bottom.gifは580×30の黒一色、
>back.gifは580×1の黒一色です。

　　なんで画像なんだ？

>>729
ちゃんと読んだか？
逃してねーだろ。

クライアントは主要ブラウザ全てに対応しろと言ってくるのが当たり前。

確定申告で、税務署のサイトで情報打ち込んだんだ。
印刷ボタンを押したんだ。
・・・・Fxじゃできなかったよコンチクショーーー
IEとねすけ限定ですかそうですか。

経営者がホームページごときに首を突っ込んだりしないよ。
総務とかに任せてるし、見てないし、存在自体忘れてる。

確かに企業はIE、ネスケ、オペラ、ファイアフォックス全てで
ちゃんと見れてちゃんと機能してくるように注文してくるのが圧倒的に多いな。

ここで言ってる奴らは企業サイト作ったことないのね。

特に>>727-729あたり

まあIEを無視することは大いに歓迎する。
サイト制作者が団結してそれをすることによって
ファイアフォックスを普及させる足がかりになると考えるからだ。

実際に俺はWeb制作会社勤務だけどかなりIEに足引っ張られてるからな。

>>732
使えなかったら逃してるのと同義。
実際、重要な情報を取り扱うからログインを必要とする物とかは、
殆どがIE以外に殆ど対応してない場合が多い。

「逃してる=htmlが崩れる」って思ってる人が多いって事？
その程度で逃すに繋がる訳ないじゃんｗ

ログイン出来ず購入とかが出来なかったり、
javascriptが動かず不便な操作を強いられたりとかの場合だよ。

マジデ周囲の理解を得られるのが羨ましい。
全員IEだけだと思ってるから。

>>739-740
おいおい>>735を読めよ。

でもまあ、俺は普段IEを使ってるから気づかなかったが
ログイン機能とかショッピング機能系のサイトはIE以外で使えないクソサイト多いの？
そうだとしたら最悪だな。制作会社の連中。ちゃんと仕事しろよといいたい。

実際やってみると使える事は有るが、対応に明記してない場合って結構多いよ。

>>742
いろいろな環境で完全に動くようにするって結構労力が必要だから、
そうやすやすと対応できるようなものでもないんだが。
特に信用や金が絡む時はな。

>733
Safari出来たよ？確定申告の書類。

おいおいIEのないインターネッツを築くのは俺たちだぜ？

異環境対策についてまず上司の理解を得るにはどのような説明をしたらいいですか？
firefoxを使ってもらうとかマウスなしでブラウジングしてもらうとか？

>>745
うらまやしいーーー
マジでできなかった、印刷の手前までは完璧だったのに。

いちいちブラウザ立ち上げなおすのもだるいんだよな。

国税局のサイト行ってみた。

>２　推奨ブラウザソフト
>以下のブラウザによる、動作確認をしております。
>いずれでもない場合は下のバナーからどちらかをダウンロードしてください。
>なお、Mac OSの場合、Internet Explorer には当コーナーが対応できておりません。
>恐れ入りますが、Netscape Navigator 6.2以上を使用してください。
>Internet Explorer 5.5 SP2以上
>Netscape Navigator 6.2以上

なるほど。
Safariは運が良かったっぽいな。

>>747
firefoxを使ってもらう
→なんかいつものインターネットと違うぞ、どうなってんだ
→違うソフト？そんな聞いた事もないもん使ってるやついないだろ、無視していい

ﾊｧ…

>>747
Mac系のコミュニティでも見せてみたら？
対応の不満とかを見せたり、賑わってるのを見れば心が動くかもしれん。

FxやOperaの便利さに気付けば、後は早いんだろうけどな

IE7でバグが一掃されてればいいんだけどなぁ。

逆にIE7でバグが一掃されてたとして

IE6のバグに合わせて作られたサイトを見たら崩れてる
↓
一般人「なんだこれ？IE7なんてバグだらけで使いもんにならん！」

ってなことにはならないかな？

>>754
application/xhtml+xmlに対応しません。
contentプロパティに対応しません。

え？なんで？

MSはわざといじわるしてるの？
馬鹿ってことはないよね？

標準モードと互換モードでIE7/6とレンダリングを切り替えてくれたら結構いけたりして

一行目がdoctypeかどうかでのモード切り替えはやめてくれ。

>>760
それは直ってる。XML宣言入れても大丈夫。

あひー

IE排除…　　　できるわけねーだろｗ

間違ってようがなんだろうが、シェアは正義なのだよ。
VHSとβ、明らかに後者が高性能だったがシェアは最悪だった。

目的による。

IEはいいから最先端で行ってくれなんて案件はあるのか？

VHSはその後高性能になったからいいが、
IEはそのまま放置されて早何年、
やっと出る希望の新作が>>756…

たくさんの人に見てもらう(買ってもらう)ことが目的
サイトを公開することが目的であって見てもらう必要はない

主にこのどちらかでIEの扱いが決まるな。

サイトの想定閲覧対象者に一般人が入っているかによるな。
一般人に見てもらいたいならIEも考慮せざるを得ない。人数は関係ない。

とりあえずあれだ。

人に見せたい→IEも必要
自分専用→IEは不要

しかしそこには矛盾がある。

Webに公開する = 人に見せたい

というのが根本的にあるからだ。

まず、どういう層がFxを使っているかというのを分析する必要がある。

そしてその層だけに見てもらいたい内容のサイトであれば、IEは不要である。

わざとIEで崩れるように作ってあるサイトとかあるしな

例えば「アンチIE」という趣旨のサイト等がそれに該当する。

FirefoxまとめサイトはFxだけで90%とか言ってたし、IE切っても問題ない希ガス。

でもみんな、ぶっちゃけなんだかんだ言って
しぶしぶだけどIE対応させちゃったりするんでしょ？

FirefoxでOKならOperaでもOKだから多い日でも安心。

>>737
そうだな、同意。
ちょっと危険を感じればIE開発チームも動き出すかもしれんしな。

Firefoxでokで、Operaでもokだったら、ネスケでもokな場合が多いけど
ネスケのみダメポな場合も結構あったりする。

IE5や6の大幅修正アップデートパッチを大々的に配布希望

FirefoxとOperaでwidthの値が違うことがあったような…どういうとき再現するのか忘れたけど

Opera8.5とかだと、入力ボックスとかの幅とか、重なりがおかしくなる場合があったかも。
どっかで検証した記憶あり。
だが、俺はOpera9使ってるから全然問題なし。

>>774
それ、変わり者サイトだろ？　んなトコのどうでもいいよ

>>780
パッチでるとよー、当ててるのとそうでないのを考慮せにゃならんからなぁ

下手にパッチ当ててる人は、逆にCSSハックの影響で変な事になったりな。

>>783
CSS使いでアンチIEじゃない程度しか使ってないとは羨ましい

一切意味不明

>>785　変わり者発見


しかし現実は、一見さんを見込んだ一般サイトでは
FireFoxの方が無視できる程度の数なんだよ。

見る側は、CSSがどうとか知ったこっちゃないんだよ。

どっちも対応しておきゃ良い事じゃん。
はい終わり。

IEに対応していること＝非アンチIE者
ではないな。

IEに対応せざるを得ないから、その手間に疲れてアンチIEという罠

ソレダ。

自演多いね。
乙

IEだって最初に作った時は、これがベスト！と思ってたんだ。
だから許してやれ。
なんだかんだ言ってもIEとFx、opera、ﾈｽｹに対応してやっと一人前だろ。

不甲斐ないブラウザなんぞ害虫以外の何者でもないんだから、切り捨ててしまえ。
みんなが必死で合わせるから、いつまでたっても開発側の我侭と甘えで統一が取れないんだよ。
これは開発側のオナニーを許容し続けている人間の責任だ。

と、まあ
>>793派
>>794派
に別れる訳だが、

日記サイトとかならIE以外いらないんじゃないの？

>>794
お祝い事のために村人みんなからぶどう酒を集めたら、
みんな「自分ひとりくらいバレないだろう」と水を持ち寄っていたという話を思い出した

@charset "Shift_Jis";
ってどういう意味ですか？

>>798
Shift_Jisでよろって事。

どもです。
CSSファイルにもこれは書いた方が良いのでしょうか？
なくても問題ないですか＿？

meta要素やらでContent-Typeを指定しているならいらんとおもー

>800
http://www6.plala.or.jp/go_west/nextcss/ref/slctr/at_rule.htm#charset

いろいろ調べながらCSSで角丸ボックスを作成しています。
以下のようにしただけが揃わず、行き詰まってしまいました・・。
http://zetubou.mine.nu/itoshiki/nozomu/zetubou22541.gif

ソースは下記になります。
http://zetubou.mine.nu/itoshiki/nozomu/zetubou22540.htm

アドバイスいただければ助かります。。

>>803
それ以前にFxで見てみろ。

>>803
四隅に角丸画像を使う方法は、tableじゃないと上手くいかない。
エロサイトなんだから、外注すればいいと思う。

>tableじゃないと上手くいかない
ハァ？

>>805
エロサイトじゃなくて、ここのアップローダーを使っているだけです。

tableだと、逆にXHTMLの時は上手くいきません・・。
ボックス全体を背景色で塗りつぶした角丸を作成するのは簡単なのですが、
このように枠を使う場合は、うまくいきません・・。

ちなみにFirefoxでも同じです。

>>807
＞Firefoxでも同じ
・・・ならないぞ。

もう簡単なJSのにしとけ。
http://pc8.2ch.net/test/read.cgi/hp/1070625061/

セレクトボックスの背景でなくボタン（？）自体のカラーを
変更するにはどうしたらいいのでしょうか？

>>809
そのボタン（unputかbutton）の背景色を変えればいいだけ。

>>807
xtmlなら一応見本がある。
ttp://www.cssplay.co.uk/boxes/snazzy.html

それから>>803のhtml（スクショじゃない方）に画像はうpされてないんだな？
状況が再現出来てないのでは意味無い。

>>810
タグで書くとどんな感じでしょうか？
すいません、ド素人なもので。

>>812
タグじゃない。
ここらへん↓読んで勉強しておいで。

脱初心者をめざす人のためのホームページ作成講座
http://www.k2.dion.ne.jp/~spag/
簡単で、より適切なウェブサイト作成講座
http://pasokon-yugi.cool.ne.jp/website_kouza/
HTML版『スタイルシートWebデザイン』
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
Cascading Style Sheets Reference
http://hp.vector.co.jp/authors/VA022006/
ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo
Personnel
http://members.jcom.home.ne.jp/jintrick/Personal/

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

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

>>811
bで実現してるぞ、オイ。

>>816
なに言ってるのかわからんよ・・

>>816
それについてはどこかのサイトが突っ込みいれてたな
インラインなら何でもいいので最も文字数の少ないものを使っているそうだが何考えてんだ、と

>>817
ソース見てみろ。

せめてこっちを紹介してやればよかったものを
ttp://deztec.jp/lecture/folio/07/index.html

805 名前： Name_Not_Found [sage] 投稿日： 2006/04/07(金) 12:42:39 ID:???
>>803
四隅に角丸画像を使う方法は、tableじゃないと上手くいかない。
エロサイトなんだから、外注すればいいと思う。

>>821
お前も知らなかったろ？

805=822

>>369からの流れが繰り返す予感

>>822
このスレに角丸については書いてあるんだが・・・

>>821
アホですか？元のソースみたのか？
角丸画像が4つしかない時の話だろうが。CSSでやってみろや。

>>826
821じゃないが、幅固定なんだからそんな挑発するまでもなく簡単な罠。

>>826
はいｗ

<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="e">
<div id="f">
<div id="g">
<div id="main">
本文
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS
#a
{background:#cff url(a.png) repeat-x left top;}
#b
{background:#cff url(b.png) repeat-y right top;}
（中略）
#g
{background:#cff url(g.png) no-repeat right bottom;}
#main
{background:#cff url(main.png) no-repeat left bottom; padding:30px;}

>>827
上下スライスは別の話。

丸コピしてうれしい？
第一そんな形の話もしてねー。

楽しい？ならわかるがうれしい？ってきかれてもなぁ

ＩＥでページをスクロールしたら背景画像がチカチカするんだけど、どうして？

IEがクソだから。

* {
     background-attachment: scroll ! important;
}

>>832
うちもそれなるよ。
なんかイヤだよね

Firefoxに切り替えるのだ！快適スクロール、快適CSS解釈、ストレスも溜まらない。

Ｆｘってタブブラウザとか良いながら新しいウィンドウでひらきまくりじゃん。

つ[Opera]

>>834
それやっても直らないんですけど

TEST

えーと、スタイルシートで以下のように宣言した上で、

a:link { color:#aaa; }
a:visited { color:#aaa; }
a:hover { color:#ff7f00; }

状況依存セレクタで

.main table tr td a:hover{ color:#000 }

みたいな指定がしたいのですが、上手くいかないです
こういう部分的にリンクの色指定をするときは一々 a style="..."
みたいにしないと駄目なの？

>>841
ソースがないのでどこが間違ってるかは指摘できないけど、
やろうとしていることはできる。

<html><head><style>
a:hover { color:#ff7f00; }
.main table tr td a:hover{ color:#000 }
</style></head><body>
<a href="about:blank">TEST1</a>
<div class="main"><table><tr><td><a href="about:blank">TEST2</a></td></tr></table></div>
</body></html>

IEでもFxでもOperaでもちゃんと違う色になる。
途中になんか余計なものでも入ってないかい？

>>832-836
Fxでもスムーズスクロールをオンにするとなることがあるけどね

レスありがとうございます
あれ？確かにローカルでテストすると動作しますね・・・
デフォルトの a タグの色は site.css に保存して
ファイルから読み出させていて、その他の
特殊な部分はCGI で動的に style 出力させてhtml に直接展開している
のですが・・・以下がソースの抜粋です

<link rel="stylesheet" type="text/css" href="/css/site.css">
<style type=text/css>
.main a{ font-size:14px; color: #000; }
.main a:link{ color:#000; }
.main a:visit{ color:#000; }
.main a:hover{ color:#000; }

で、site.css では

a{ font-size: 12px; color : #aaa; }
a:link{ color:#aaa; }
a:visited{ color:#aaa;}
a:hover{ color:#ff7f00;}


このときに、.main a の色が #aaa になってしまうのですが、
この色は、.main における背景色に指定しているため、リンク部分が
背景色と同色で見えなくなってしまうという状態です
ちなみに環境は、ＩＥ７．０βです

<style type=text/css>と.cssに記述した場合とではどっちが優先されるんだっけ？

すみません！

.main a:visit → .main a:visited

でした。修正したら、動作しました。
一時間違えるだけでエライことになるんですね、ＣＳＳ・・・
ちなみに、a:visit でＩＥで保存してページ見ると
a:unknown とか変換されるんですね、この機能がなかったら
ずっと気が付かなかったかもしれない・・・

>>847
テンプレのHTML/CSSチェック使えよ・・

floatさせたマルチカラムの中で、さらに画像をfloatさせて文章を横並びにしているとき、一度でも
clearを使うと以前のfloat全てが解除されてしまいます。
一つ手前のfloatだけを解除する方法はないですか？

例えば：

左カラム
　↓
____ ____
|　　||　　|
|　　||　　|
|　　||　　|←右カラムのこの辺でclearすると・・・
|　　||　　|
|____||　　|←左カラム底辺まで空白になってしまう・・・
　 　|　　|　（以前に使用したfloatが一度に全て解除されてしまう？）
　　 |____|

　　　　↑
　　　右カラム

>>849
そもそもそういう大きい左カラムみたいなのをfloatで何とかしようってのが間違ってるから。
どうやってるんだか知らないが、左カラムをfloat:left、右カラムの右marginを取ってるんだとしたら、
右カラムのfloatは絶対にrightしか使わないようにして、
clear:rightのみにしてやればおＫ。

>>850
ありがとございますニダ

根本的な解決は不可能なんですかorz
右も左もfloat使いまくりだから大改造しないと・・・

＞そもそもそういう大きい左カラムみたいなのをfloatで何とかしようってのが間違ってるから。

float以外でどうやってマルチカラムにしたらいいんですか？
テーブルは使いたくないんです。

floatの使い方を工夫してみるとかしかないんじゃない？
個人的にはだけど、実現したいデザインによってはテーブル使うのもやむ無しだと思ってる。

>>851
画像ナビみたいなのならマイナスマージンで何とかなる。
高さが固定じゃないんならabsoluteという手もある。

>>851
2カラムはpositionにして、中でfloat使うとか。
しかしfloat使いまくりのデザインとは、どんなモノなのか興味あるね。

なるほど！
positionのことすっかり忘れてた。。。

＞しかしfloat使いまくりのデザインとは、どんなモノなのか興味あるね。

色や配置が新聞みたいなスタイルのホムペです。

>>855
一度解像度変えて自分のサイト見ることをお薦めする。
Web文書ってのは新聞みたいに一度に一面が見られる構造じゃないから、
細かく段が組まれていると非常に見辛いことがほとんど。

勿論左上に4コマ漫画付きだよな？

>>855
新聞かあ。がんがれ。

>>857
それは確かに譲れない所だな

いいんです
解像度1280x1024以下、ＩＥ６以外は平家じゃないと思って諦めてもらってますから。
今はまだ普通の新聞風ですが、今後はスポーツ新聞風にする予定なので見辛いと
かそういう次元を超越した自己満足の世界なんで。

では
ノシ

お礼を忘れていた・・・
ありまとうございますニダ

ちょwww
IE6とか言っててどうしてテーブルレイアウトしないんだよ、なんのギャグだｗｗｗ

だから自己満足なんだろ、きっと

「CSSを多用していますからIEでごらんください」ってサイトを見た。
なんの冗談かと。最近はこういうギャグが流行ってるのか？

IEのCSS仕様を基準に作ったページはIEでしか見れない。

つまり独自拡張多用ですな。

CSSじゃないのかｗｗ

NN4時代から更新してない？

CSS3を待ってるんだろ？ＩＥ

なあ、そうといってくれよゲイツ！
origamiなんかで遊んでないでＭＳ…ms…

フロートで左右にボックスを並べた場合、
ウィンドウの横幅を極端に縮めると、どっちかのボックスがもう一つのボックスの下に潜り込みますよね？
それを回避する方法はありませんか？
ウィンドウを縮めても横スクロールバーを出すようにしてレイアウトを崩したくないのです。

親ボックスを作ってその中に２つを入れるしかないのでしょうか？

中に入れたくないなら、並んでるボックスと同じ幅の不可視要素を並べて
スクロールボックスが出るようにすればいいんじゃね？

>>871さん
ありがとうございます。
結局、ボックスは作らないといけないんですね。

>>870
それって幅狭いブラウザの場合、横スクロール出せって言ってるんだが。
物凄く迷惑だと分かってくれ。

>>872
余白が足りなくなったら流れてくれなくちゃフローティングボックスとはいえないじゃん。
レイアウトを固定したいのならフロートさせるんじゃなくて場所と横幅固定したほうがいいよ。

一応、左右のボックス合計のの横幅は500pxです。
これでも横スクロールバーがでる人はきてほしくないので。

＞横スクロールバーがでる人はきてほしくないので
そりゃワガママ過ぎだよ。

＞きてほしくないので
＞きてほしくないので
＞きてほしくないので
だったらテーブルレイアウトしてろクソが。

わかりました・・・・
テーブルでレイアウトすることにします・・・

ちょ、何このスレ。
自分のWebSiteなんだから好き勝手にやらしたら良いんじゃないの？

まあ批判だけならアホでもできるがな。

500pxで横スクロールが出るような人は
それなりの覚悟があってやってるんだから
ほっといても大丈夫だよ。

横幅550pxぐらいで横スクロールバーでる奴ははっきり言って邪魔。
せめて700pxまで耐えろと言いたくなるな

すま。sage忘れた

881が理解できない・・・
なんで550pxで邪魔なのに700pxまで耐えろなんだ？

横幅500pxで横スクロールでる奴いるのか？
１画面で２つのサイトみてる奴もいそうだが・・・
そういう奴は横スクロールバーに慣れてるだろ

>>883
550pxで横スクロールバーでる奴は邪魔だから、
最低でも700pxで横スクロールバーがない状況を頑張って作ってくれ。

ってことだ。700pxはかなり自分の趣味

884も理解できないよママン・・・
＞横幅500pxで横スクロールでる奴いるのか？
ってことは、500pxで横スクロールバーが出ない作りにしてる作成者が多いって事を暗示してるのに
＞そういう奴は横スクロールバーに慣れてるだろ
ってことは、500pxで横スクロールバーが出る作りにしてる作成者が多いって事を暗示してるよ・・・
何が言いたいんだろう。

>>885
・・・すまん、マジで意味がわからん。
なんで550pxより700pxが最低になるんだ？

>>885に
700pxはかなり自分の趣味　って書いてるじゃん。

だから自分のサイトの横幅が700pxだから周りが俺に合わせろ。ってことじゃね？

？？？
それってホントは550pxは許容できるぞ、って意味？＞最低700

550pxは邪魔って言ってるから許容できない。　ってことじゃ？
本人がでてこないとわからん。

>>886
あんた重症じゃね？

他の奴のレスみてて思ったが、
色々と略しすぎ。主語とか述語とか全て書け！

550pxウザなら700pxはもっとウザのような気がするんだが、
最低700pxってのは本当に訳分からないな。

>>891=>>884

-->

>>892
春だから許して・・・！！

*/

なんか読解力に欠ける人なんだか、わざと誤読して煽ってるのか判らないが、
変な人が居ますね。

blogで記事とかの、文字のサイズと、色を変更したいのですが、どこら変弄ればいいのでしょうか？
初期のテンプレートを眺めてるのですが、どれがどれだか・・・。

>>897
普通に意味不明の文章が増えてるだけだとオモ。

>>898
ブログによっても違うし一概に言えない。

ん？俺は普通に意味分かるが。
生まれた環境の違いか

かな。
極端だけど、教科書ばっかり読んでるおぼっちゃんには解りそうにもないな

誤読されたからってそんなに必死になるか普通

この程度を誤読する相手を何でかばうのやら

>>885
ん？じゃあ>>885を解釈してくれないか？

しつこい。

>>904
春だよ。
という時候の挨拶。

XHTML 1.0 Strictにおいて、navigationはclass か id　かについての質問です。
殆どのサイトで id　が使われていて、自分もそうしていたけれど、
class　でデザイン指定すべきなのかと悩みだしました。

classだと何か不都合が起こるのかと調べてみても「どちらでも良い」という記述しか
見当たりません。

判断基準について質問させてください。

>>904
>>885は確かに言葉の使い方を間違えてる。添削したくなる気持ちはわかるよ。
でも自分じゃ気が付いてないんだから、彼が謝ったりする事もないってわかってやれや。

>>907
このスレ内にも何度か出て来る質問だから探してみて。

>>907
確かXML的にIDが好ましいって感じだったから、その程度で考えておいていいと思うよ。
あくまで好ましいだから無理にIDを使う必要はないけど、
classを使う必要がないならなるべくIDでって感じで。

>>907
本来デザイン主体で考えてはならないもの。
>>523-526

>>910
ソースキボン

>>525辺りで言ってる事と同じ事じゃない？
navigationだからIDが好ましいでOKだと思う。

>>913
525だけど、悪いが普通に意味不明。
>navigationだからIDが好ましい
こんなこと書いたつもりないけど。

>>523-526　は読んだのですが、nav.がほぼ全てのページに表示されるケースで、
各ページのnav.に変化が生じる場合は　class 。同一のデザインならid 。と言う
理解なのかな?　と思えてきました。

>デザイン主体で考えてはならないもの。
そうすると　id　か適切だと判断すべきなのかも。
ナビゲーションという一つの存在。という意味で捉えればidだと思いますが、
その解釈では言語的にclassが特殊な存在に感じてしまい（title logoもclass?）更に混乱気味です。

そういう観点から判断付きがたいので、「どちらでも良い」という結論になる。という理解で
良いでしょうか?

すみません；；　何度も同じようなことを聞いてしまって・・・

>>914
適当言ってスマン

>>915
それはデザインに関係ない。
bodyにもclassを付けることがほとんどだから、
body.class .naviで変える。
因みにbodyのidには、523-526の理由で一意のURLをIDとするのが好ましい。

>ナビゲーションという一つの存在。という意味
「一つの存在」だからIDになるんじゃない、
一つだけであってもリスト項目が存在するように、実際の数は問題じゃない。
問題は「それが性質か固有名か」ということ。
そのナビゲーションが、固有名として何か意味があるのならともかく、
俺には「ナビゲーション」という性質にしか見えないんだが。
因みにtitle logoは単にh1でいい気がするけど。

ねちゃってました。すみません。

だいぶ、スッキリしてきました。ありがとうございます♪

>俺には「ナビゲーション」という性質にしか見えないんだが。
はい。だからこそカスイケ集でidが多いのを見て悩み始めました。
idじゃないと、面倒になるような問題があるのかな･･・?と思って
勉強を始めて、分からなくなりました。

>因みにtitle logoは単にh1でいい気がするけど。
飽きてきたので、title logoの下にh1を置いて、テーマに
デザイン的なアクセントってつもりで使っています。
（titile logo→エンブレム的な画像、h1→それを言葉にした画像）

両方作って眺めてみると、何か感じるのかな?と思い、作成中です。

次スレ【55th】立てる人、要注意！

>>1
>【CSS検証】>>2
……って、落ちてるけど？

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

質問していいですか？

>>920
ﾊﾞｯﾁｺｰｲ

やっぱやめときます。

ﾊﾞｯﾁｺｰｲ...

質問のしかた、に
ageて質問すること書かないの？

あまりにも初心者の質問なんで恥ずかしいから
下げたい場合もあるぞ

↑お前みたいな奴がいるから下げたくなる。

くまー

IE6.0で document.body.style.zoom=1.2; などで拡大表示をした場合
<select> の中の文字の大きさが変化してくれません。
また、プルダウン式にしているとプルダウンしなくなってしまいます。
何か書き方がまずいんでしょうか？

>>2
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50

↓
CSS/DHTMLバグ辞典スレッド【第５版】
　http://pc8.2ch.net/test/read.cgi/hp/1144494359/l50

>>928
JSスレ向きとオモ。

>>928　WinIEでselect要素に効くスタイル指定は少ない。
http://cssbug.at.infoseek.co.jp/detail/winie/b112.html

レンタル掲示板のデザインをスタイルシートが使えるので
変更しているのですが、スクロールバーは
scrollbar-base-color:Black;
scrollbar-3dlight-color: Black;
scrollbar-highlight-color: White;
とかで変えたんですが、
セレクトボックスって変えれませんか？
この水色っぽいのが嫌なのですが。

>>932
変えられる。デフォは水色じゃないんだから、どっかで変えてる項目があるんだろ。探しい。
あとスクロールバーはCSSじゃないから。

すいません。
現在はデフォルトのセレクトボックスです。
スタイルシートの記述で変更できるのか？
ということです。

>>934
だからデフォルトは水色じゃないから、どっかで水色にしてるんだろ？

>>935
水色じゃないですか？
WindowsXPなんですが。

セレクトボックスはスタイルが効きません

すぐ上のレス>>931も読めないのかねえ。
まあ背景色位ならスタイル指定効くけど。