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

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

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

・OSやブラウザの種類とヴァージョンについては必ず明記してください。
　特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは？」と求められたら応じませう。
　回答が早く得られます。説明不足な質問文で解決を期待されても困ります。
・間違った用語は混乱を招きます、用語の確認をしてから質問してください。

過去スレや関連リンクは>>2-10
【過去ログ】>>2
【関連スレ】【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7
cf. http://web2ch.s31.xrea.com:8080/index.php?CSSFAQ
　　http://nira.s25.xrea.com/FAQCSS/ls_00.html

【過去ログ】
　http://mentai.2ch.net/hp/kako/974/974934062.html
　http://natto.2ch.net/hp/kako/984/984113434.html
　http://natto.2ch.net/hp/kako/992/992992981.html
　http://pc.2ch.net/hp/kako/996/996828258.html
　http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
　http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
　http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
　http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
　http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
　http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
　http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
　http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
　http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
　http://pc2.2ch.net/hp/kako/1041/10416/1041641395.html
　http://pc2.2ch.net/hp/kako/1045/10451/1045124732.html
　http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
　http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
　http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
　http://pc2.2ch.net/test/read.cgi/hp/1053619342/l50
　http://pc2.2ch.net/test/read.cgi/hp/1055536413/l50
【前スレッド】
　http://pc2.2ch.net/test/read.cgi/hp/1057860130/l50

【関連スレッド】
・CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え〜
　http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
　http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
・CSSでイケてるデザインサイト　15
　http://pc2.2ch.net/test/read.cgi/hp/1056190919/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.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.csce.kyushu-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/
・K@tsukun's PAGE! > CSS Reference
　http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
　http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
　http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
　http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
　http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・ZSPC - CSS2対応状況ガイド
　http://www.zspc.com/documents/css2/
・CSS対応状況表
　http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート　http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
　http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
　http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
　http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト　（特に「HTML/CSSのよくある誤解・ミス」）
　http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け　（JavaScriptを使用しない方法）
　http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
　http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

【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: text-align:center;を指定しても Netscape6(or7)ではtableなどブロック要素がセンタリングできません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に4.）をご覧ください。

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.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html

【FAQ】
Q3: CSSで擬似フレームってどうやるの？
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://alt.s31.xrea.com/overflow.html
　http://alt.s31.xrea.com/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html

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

【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど？
A5: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
　　http://cssbug.tripod.co.jp/detail/winie/b079.html
　　　http://pc2.2ch.net/test/read.cgi/hp/991666454/683n

Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングはA2に既出。垂直には色々な方法があります。
　「スタイルシート 縦中央(垂直中央)」参照のこと。
　http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm

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

Q8．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A8．下記に書いてあります。テーブル・レイアウトは段組のFAQ（A4・>>6）をご覧あれ。
「いままでの 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

>>1
乙華麗

【hegth】

456 名前：Name_Not_Found sage 投稿日：03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

hegthって、なんですかぁ〜〜〜〜〜〜？

ﾍｸﾞｽっ

>>9-12
面白いか？

もう秋田

もう強制IDにしてくれ

hegthとか書いている奴は、アホですね。

>>16　まったくだ。>>9-10のことだろ？

違います。

456 名前：Name_Not_Found sage 投稿日：03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

この456のことです。

粘着うざっ。前スレのネタいつまでも引きずるなよ。

18は、アホですね。

>>13>-15>>17>>19-20
いちいちレスしてるお前らも同罪。

それはさておき・・・

自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

つまらん。

質問をどうぞ。

　　　 (⌒V⌒)
　　　│ ＾ ＾ │＜これからも僕を応援して下さいね（＾＾）。
　　⊂|　　　　|つ
　　　（＿）（＿）　　　　　　　　　　　　　　　　　　　　　　山崎パン

くだらん。

ハイ次の方、ご質問は？

質問も来ないし・・・

自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

馬鹿はおまへだ。>>26

hegthだもんな　がははははははははははははははははははは

つまらんよ。一人で笑って、楽しいか？

>>29
楽しいからやってるんだろ。ほっといてあげなさい。

誤字以外にﾂｯｺﾐたくてもﾂｯｺﾒないんだろ

質問なのですが、今XHTMLとCSSでHPを作ってるんですね、そして
W3CのエラーチェックするとXHTMLの方はValid(正式な）XHTMLで書かれている
と出るのですが、cssの方のチェックがどうしても引っかかります。
原因が、外部cssファイルなんです。
どうも<link rel="stylesheet"type="text/css"href="top.css"/>らしい
のですが、最初<省略〜top.css">で閉じていたらどうも<link>に対する
</>が無いみたいなエラーが出て、色々サイトを見ているとどうも
<〜"top.css"/>で皆さん閉じているようなのでやってみてらXHTMLは通る
ようになりましたがcssではずっとエラーが出ます。
どうすればエラーが出なくなるかお解りの方いらっしゃいましたら教えて
いただけませんか？

あぼーん

cssで<img src="hogehoge.gif">などした時他様のサイトを見ていると
<img src="img/hogehoge.gif">などとなっていることが多いのですが、
私がやるとその画像が表示されません。
どうなっているのしょうか？

２ちゃんねらーなどの間で、人気のある御尊像が有ります。
これらの御尊像を手に入れて、金運向上等を祈願しましょう。(爆)
http://www.butsuzou.com/jiten/sanmen.html
http://www.butsuzou.com/list1/sanmen2.html
http://www.butsuzou.com/list1/sanmen3.html
http://www.butsuzou.com/keitai/sanmen-kz.html

>>32
cssでエラーが出てるのに「<〜"top.css"/>で皆さん閉じているようなのでやってみてら」とxhtmlファイルを修正しようとしてるのがおかしいと思うんだけど。
cssのエラーはなんて出てる？

>>34
質問のご趣旨がわかりません。

>>34
37と同じく趣旨がわかりません

（以下仮説）
34はcssのあるディレクトリに画像を入れているから
<img src="hogehoge.gif">としている。
そして他サイトで<img src="img/hogehoge.gif">という表記を見たので、
自分も同じようにcssを書き換えたら、表示されなくなった？

他サイトはcssのあるディレクトリの中にimgという名前のディレクトリを作って
そこに画像を置いて呼び出しているんだと思うんですが。
34はimgというディレクトリを、要素かなんかと勘違いしているのではないかと。

>>34は説明下手の初心者って事で暖かく見守っててやれ

一番下と一番上のboxのサイズを固定して残りの領域は
真ん中のBOXが占めるスクロールバーなしのレイアウトを作りたいのですが
macNN7だと正しく表示されるけどIE5だと表示されなかったり
スクロールバーのバグが出てしまったりします。

またwindowsではposition:fixedが使えないこともあるので
いっそのことテーブルにしてしまうほうがいいでしょうか？
macOS9で作業してます。何か他にいい方法はありますか？

>>40
サイズを固定しても縦横がある。
意味がまったくわかんない

質問です
スクロールバーの色の変更なんですが
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #808080;
↑のように記述するとアローだけグレーになると思うんですが
全て真っ白になってしまいます。
アローのみ別の色にしようとするとダメみたいなんですが
原因の方を教えて下さいませ。よろしくお願いしまつ

>>42
しまつでつか。スクロールバーの色を変えるのは厨房でつよ

>>42
画面がスクロールするほど内容あるの？

このスレの人達には答えられない質問をしてしまった
みたいですね。もうちょっとレベルの高い人達に聞く事にします
難しい質問してしまってすみませんでした

>>45
ばい。バイバイ。

>>45
質問する時間帯間違ってるから、みんな答えないんだよ
ホラこの時間帯の奴らは（ry

すいません原因が分かりました
どりきゃすで見てました

>>41
やりたいことはこれの応用型のようなもので、
できるだけスクロールバーの出ないようにしたいと思っています。

<!--
body{ margin: 0 }
div{font-weight: bold;position: fixed}
#slider{ top: 0;right: auto;bottom:100px;left: 0;width: 200px;height: auto;background-color: #ff99ff}
#main{top: 0;right: 0;bottom: 100px;left: 200px;width: auto;height: auto;background-color: #ff9933}
#footer{top: auto;right: 0;bottom: 0;left: 0;width:100%;height:100px;background-color: #ffff00}
-->

これはCSS辞典という本にのってた配置なのですがIEでは全然表示されず
他の方法を試してみたりしたのですが
macNN、macIE、winいずれかの状況で崩れてしまうので
テーブルにするしかないのか？という疑問だったのです。
意味不明の説明ですいません。。

>>49
＞意味不明の説明ですいません。。
適当に説明したのかよ！

きちんと説明しておくれ。

すいません。簡潔にわかりやすく説明するようにがんばってるんですけど
全然通じてないですねすいません(;´Д`)説明不足を追加します。
>>49のcssに以下のhtmlがつきます。

<body>
<div id="slider">slider</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>

これってwinでもmacIEでも表示できないですよね？
他の方法でこういうのはどう実現すればいいでしょうか？
やっぱりテーブルなのでしょうか？

あぼーん

（　´Д｀）/＜ 先生！！こんなのを見つけました。
http://www.hokekyoji.com/
http://www.yakuyoke.or.jp/
http://members.tripod.co.jp/hossyoji/index/
http://www.maap.com/tanjoh-ji/
http://www.honmonji.or.jp/
http://www.maap.com/tanjoh-ji/
http://www.kuonji.jp/
http://www.butsuzou.com/jiten/sanmen.html
http://www.butsuzou.com/list1/sanmen2.html
http://www.butsuzou.com/list1/sanmen3.html
http://www.butsuzou.com/keitai/sanmen-kz.html

IEはposition: fixed使えない。

IEってホント糞だよね

あくまでIEは「普通」であり「標準」。
IEに無い機能を持っているブラウザの方が異端。

太公望がやってきました

>>56
対義語じゃない。

>>56
「普通」だとは思うが「標準」じゃないと思う

>>59
ディファクトスタンダードだよ。

CSSに関する質問はこちらへどうぞ。　※　議論はよそで　※

>>36 レスありがとうございまいた。すいません遅れましたが、
Target: http://www.○○○.com/index.html
Please, validate your XML document first!

Line 7

Column 23

Element type "link" must be followed by either attribute specifications, ">" or "/>".

ってゆうエラーがずっと出ます。これってようは<link>に対して</link>
が無いですよみたいなエラーですよね~?
でもこの場合<link>に閉じる</>は必要ないですよね〜
どうすればよいのでしょうか？

上の追記ですが、
一応　<link rel="stylesheet"type="text/css"href="top.css"title="top" />
　こうゆう記述をしております。

私のHPのエラーの出る7行目です。

>>49　>>54
position:fixed;に對應してないWinIEのために
overflowプロパティーを應用した疑似フレームが編み出されてるんですよ。
ＦＡＱのＡ３（>>6）を見たまへ。

>>63
誤＞="stylesheet"type
正＞="stylesheet" type

以下同様。

昔の IE って、TD/TH が親要素のスタイル (font-size とか) を
継承しなかったよね。
どのバージョンから変わったの？

>>66　バグ辞典を引け。
http://members.tripod.co.jp/cssbug/detail/winie/b023.html
今でも互換モードでは継承しない。Mozilla5.0系互換モードやOperaでも。
あと、px単位でなければ大丈夫。サイズ固定やめろ。

ほへー

>>65 解決いたしました。ありがとうございました。
記述にスペースが入って無いだけでエラーってでるんですね〜。
大変勉強になりました。ありがとうございました。

ところで思ったのですが、みなさんどこまでW3Cのチェックって行っていますか？
以外に厳しいですよね〜？これって完璧になるまでやるべきなのでしょうか？

あげます

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

あぼーん

すいません質問です。

http://cgi.2chan.net/up/src/f15654.jpg
のように赤い部分が二つの左上と右下にあらわれるには
どんなソースをくめばいいでしょうか。

右下は

<!--
BODY{
background-image:url(*****.jpeg);
background-repeat : no-repeat;
background-attachment : fixed;background-position : 100% 100%;
}
--!>

でまず一つ現れますが、
二つ目の左上もふたつ、表示させるCSSはないでしょうか。

教えてください

div.hoge{
width: 620px;
margin-left: auto;
margin-right: auto;
}

こんな感じで書くと、NN7.1、Opera7.11では
ウィンドウの真ん中に表示されますが
IE6だと左詰めになります
IEでも常に真ん中に表示させるようにするには
どうすればいいでしょうか？

>>73
>>7
＞background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

>>74
標準準拠モードにする。詳しくは>>5

>>74　ＦＡＱなので>>5-7を読め。

>>75
はげしくがいしゅつだったのですね
ありがとうございました。

>>75-76
申し訳ない
FAQ見て勉強します
ありがとうございました

http://www.muji.co.jp/
↑のように、左側にメニューをウインドウの上から下まで並べたいと思っています。
同様のデザインのサイトをいくつか見たのですが、全てTABLEを使っていました。
TABLEを使うと描画速度が遅くなると聞いたので画像やリンクつきの画像を<BR>
で改行して縦に並べ、下詰にしたい画像はスタイルシートのpositionで配置して
上詰と下詰の画像の間は、画像全てをDIVで1まとまりにしてそのbackground-color
を設定してやることで解決しようと思ったのですが、ウインドウの縦方向のサイズを
小さくした場合、下詰の画像が、上詰の画像に重なって表示されてしまうことがあります。
いい解決方法はないでしょうか？
下記のようなHTML・cssを書きました。
▼HTML
<DIV CLASS="menu">
<IMG SRC="img/logo.gif" ALT="LOGO" WIDTH="160" HEIGHT="160" BORDER="0"><BR>
<A HREF="index.html"><IMG SRC="img/home.gif" ALT="ホーム" WIDTH="160" HEIGHT="24" BORDER="0"></A><BR>
（中略：上のようなリンクがいくつか）
<IMG style="position:absolute;bottom:48px" SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">
</DIV>

▼css
DIV.menu{
color:#FFFFFF;background-color:#000000;float: left;WIDTH:160px;HEIGHT:100%
}
とりあえずまだ、IE6でしかチェックはしていません。

男優さんのチンチンにまたがりガンガンと腰を振る少女。
挿入部のアップは見応え十分ですよ。
締まりのよさそうなオマンコが男性自身をくわえ込み,
ギュウギュウ締め付けている感じが映像からも伝わってきます。
セーラー服美少女のお宝映像を無料でどうぞ。
http://www.pinkschool.com/

プルダウンメニューの
┌─────┬─┐
｜ h.ogehoge 　| ▼. |
└─────┴─┘
　　　　　　　　　　　↑ここの部分を画像にする、
　　　　　　　　　　　　 あるいは色を変えるというのは
　　　　　　　　　　　　 CSSではできないのでしょうか。

あぼーん

display: none;とvisibility: hidden;の違いがわかりません。
IE5ではどちらも指定した部分が非表示になるのですが。

>>83
仕様書見て。

>>79
http://www.muji.co.jp/ は「上から下まで並べ」てなんかないぞ。
単に上から下に列べてるだけ。当然、ウィンドウ・サイズを大きくすれば下は空く。
世の中には樣々な窓サイズで見る閲覧者がある。height:100%;の実数値もも樣々だ。
その辺、考慮してね。
メニューの一番下にだけ画像を配置するのは、background-positionでもできる。

>>81
できません。
　cf. http://cssbug.tripod.co.jp/detail/winie/b112.html

>>83
　高さと幅のある要素に対して指定して試してごらん。差が出るよ。

>>85
「見えない」と「ない」の違いですね。

html 要素の style 属性は無意味と言うか、そんなものは無いから外せ。

バグ辞典スレにも "html 要素の高さ" なんて言ってる馬鹿がいるけど、
実際に CSS が適用されるのは body 要素とそれに含まれるものだけ。

(　´,_ゝ`)

>>87
ハア？

>>49
そもそも、ブロック要素自体の基本的な概念を理解する。
position: fixed は固定することだが、この例では通常の配置関係と
同じようなこと、又、使用の仕方が間違い。

html 要素に高さって無かったんだぁ。。。勉強になるなぁ

>>90　阿呆を相手にしてはいけません。

<DIV CLASS="*"><H2>
<P>あああああ</P>
</H2></DIV>

こういうのって文法的におかしいですか？

html要素に高さって無かっｔ（ｒｙ

>>92
下手なネタですね。
なんで見出しの中に段落があるんですか。

どう考えてもhn下にpはおかしいだろ

>>92　そもそもＨＴＭＬのことはスレ違ひ。

>>85
>height:100%;の実数値
意味不明。実数値とは少数点を含む数値のこと。
算出値(Computed values)だったら意味が通る。
もしくは、算出値の近似値である実効値(Actual values)。

↑レス番号リセットするの忘れた。鬱だ氏のう…

79>>85
「上から下まで」と書いたのはメニューのボタンがという意味ではなくて
メニューがウインドウの上下を途中で途切れたりすること無くという意味です。
で、ご指摘の通り、窓のサイズを小さく表示される方もいるので、上手く表示
する方法が知りたかったのです。
>>79にも書きましたが、>>79だと窓の上下のサイズを小さくした場合、
下詰にした画像が、上から順に並べた画像にかぶることがあります。
それではもちろんよくないのでいい方法を教えて欲しいのです。
background-position試してみましたが上手くいかないようでした。

>>98
>background-position試してみましたが上手くいかないようでした。
それではわかりません。どう試してどう駄目だったのか、書くこと。

>メニューがウインドウの上下を途中で途切れたりすること無く
左メニュー部はbodyの地色を生かせば？　そして右のメインはdivをかぶせる、と。

>>79
body {background-color:#e6c691;}
div.contents { float:left; width:30%; margin-top:0; background-color:transparent;}
div.honbun { margin-left: 31%; background-color:#fff;} /*↑の横幅が30%ゆえに */
div.footer { clear: left; }
<body>
<div class="content">
メニュー
</div>
<div class="honbun">
<p>本文</p><p>本文</p><p>本文</p><p>本文</p>……
</div>
<div class="footer">footer</div>

>>99
>>79の
<IMG style="position:absolute;bottom:48px" SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">
の部分を
<IMG style="background-position;bottom" SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">
にしても上手くいきませんでした。（アキの大きさは画像で調整するつもりでした。）
また、背景としてこの部分の画像を入れてしまうと、窓の上下巾が小さくなったとき
メニューボタンなどの画像が上にかぶってくることになると思います。（たぶん）

>メニューがウインドウの上下を途中で途切れたりすること無く
については>>85さんによく伝わってなかったようなので補足したのですが
>>79でも書いてるように、
＞画像全てをDIVで1まとまりにしてそのbackground-colorを設定してやることで解決しようと思ったのですが
＞DIV.menu{background-color:#000000;}
で上手くいってるつもりです。（メインとメニューが逆ですが）

79>>100
その場合だと、メニュー・本文部分がともに小さい場合、footer部分が下詰に
ならないと思うのですが、間違ってたらすみません。

それと、無印のサイトを参考に出したので、申し訳ないのですが、
レオアウトとしては↓のようにしたいと思っています。（本文の長さにもよりますが）

メニュー｜本文
メニュー｜本文
メニュー｜本文
メニュー｜本文
ア　　キ｜本文
ア　　キ｜本文
下詰画像｜本文

>>101
><IMG style="background-position;bottom" SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">

……思った以上にひどい。初心者とは思ったがここまでとは。
background-position;について勉強してから出直してらっしゃい。
　http://msugai.fc2web.com/web/CSS/back.html

>>102
いいから試してごらん。もちろん、本文は充分な高さになるだけの量でね。

>>103
>>102はもちろん試しました。
本文部分が十分な高さにならないこともありますし、
またその十分な高さも閲覧者の窓や文字の大きさに依存するものだと思うのですが。

ソースを既に上書きした後だったので、間違ってた部分もあるとは思うのですが
<IMG style="background-position:left bottom" SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">
あるいは
<DIV style="background-position:0% 100%">
<IMG SRC="img/mailto.gif" ALT="mail" WIDTH="160" HEIGHT="39" BORDER="0">
</DIV>
にしてもダメでした。
なんだか根本的に間違ってるようなきもするのですが、
>>103のページを見てもわかりませんでした。

正直、いろいろやってもわからないので聞いてるんだけどな。
じらされてばっかり。

background とはその要素の背景を指定するもの，というのは理解していらっしゃいますか？
それをわからずに「いろいろ」やっても無意味です．

<img ... は img 要素の背景を指定しているのだからやりたいことではない
<div ... は（以下同様）

で >100 の何が不満なんでしょう？
メニューと本文が短いときに footer が「ブラウザの一番下」に来ないこと？
だとしたら >6 の擬似フレームあたりを参考にすればよいかと

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

もしかして、>>79＝>>105だと思われてるのかな？
まあ、トリップつけてなかったし、仕方がないか。

>>104
>本文部分が十分な高さにならないこともありますし、
>またその十分な高さも閲覧者の窓や文字の大きさに依存するものだと思うのですが。

それはそもそも>>79が手本にした http://www.muji.co.jp/ でも同じことのはず。
改行しなさい。<br>多用でなく<p>とか<div>で括ってね。

まあ、根本的に間違ってますよ、いまのところ。>>4で勉強しませう。

http://www.muji.co.jp/job/index.html

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

今Topのページのcssを
div.colorname {background-color: gray}
body {background-color: orange;
color: gray}
a {text-decoration: none}
a:link {color: #f4a460}
a:visited {color: #f4a460}
a:active {color: #f4a460}
a:hover {color: #f4a460}
li {color: #f4a460;
margin-left: 10px;
margin-right: 20px;
font-size: 20px;
font-family: cliQue;
word-spacing: 80px;
display:inline}
div {color: gray}
こうしているのですが、liの所のword-spacing がうまく動作しておらず
80pxも間隔があきません。
以前はうまくいっていたのですが、この書き方では間違っているのでしょうか？

↑は外部cssファイルで　top.cssとしております。
コピペした関係で文字と文字の間の間隔が空いていないように見えますが
実際のファイルではもうちょっと整列しております。
すいません　訂正しないままUPして

すいません質問ですが、W3Cによると
Line : 1 Level : 1 指定された背景色(background-color)に対応する前面色(color)が指定されていません : div.colorname
Line : 5 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : a:link
Line : 6 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : a:visited
Line : 7 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : a:active
Line : 8 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : a:hover
Line : 9 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : li
Line : 13 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します
Line : 16 Level : 1 指定された全面色(color)に対応する背景色(background-color)が指定されていません : div
これだけの警告がでるのですが、スタイルシートとしては認められているようなのですが、
これって全部訂正しないとだめですか？

>>112
そのcssを
<body>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
に適用したら、hello と world の間ちゃんと開いてるけど
一体どんなHTML書いてるの？
ちなみにWinXP IE6、Opera7、Mozilla1.3で確認

通常より間隔は空いてるけど80pxまではいかないってことか。
em単位で指定が個人的にはいいと思うけどそれはともかく。
とりあえずどのブラウザで見たのか教えて欲すぃ

>>115　>>116　すいません。IE6で確認しております。

>>114
div.colorname{
color : transparent;
}
a:link, a:visited, a:active, a:hover, li, div {
background-color : transparent;
}

当方の環境はWinXPでIE6です。以前は50PXにしていてそれが本当は
ちょうどデザインや見やすさ的にも気に入っておりまして、本当は
50pxぐらいで設定したいのですが、分かりやすくするため80pxに
しても変化がありませんでした。
別にpxにはこだわっておりませんが、ｃｍよりわかりやすかと思い
ｐｘをえらびました。

>>115様　ってことは特に間違ってはいないとゆうことなのでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body {
width: 400px;
}
-->
</style>
</head>
<body>
あああああああああああああああああああああああああああああああああああああああああああああ
</body>
</html>

bodyに対して横幅を定義したんですがIEでは反映されないみたいです
バグなのでしょうか

>>121
マルチは止めろ。

>>118 せっかく教えていただいてあれなのですが・・・
教えていただいたことを記載してUPすると
行番号: 2 コンテキスト : div.colorname
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 10 コンテキスト : a:link
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 13 コンテキスト : a:visited
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 16 コンテキスト : a:active
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 19 コンテキスト : a:hover
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 28 コンテキスト : li
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent
行番号: 31 コンテキスト : div
次のプロパティが正しくありません : colortransparent は color で利用できる値ではありません : transparent

こんなエラーがでるのですが・・・

あぼーん

>>123
:がなくなってないか？

>>123
すまん。colorには適応できないな。
div.colorname だけcolorしてやってくれ。
あとのはそれで行けるはず。

>>123
div.colorname {
color : inherit;
}
a:link , a:visited , a:active , a:hover , li , div {
background-color : transparent;
}

これでいける。

リンクテキストの表示色をclassで変えたり、個別に変える方法ってありますか？

>>128
リンクテキストの表示色をclassで変えたりすればええやん

background-color : transparent;
と
background-color : inherit;
の違いが判りません。
transparentでも親要素の色を敬称するんじゃないんですか？

transparent 透過色　
inherit 継承 （親要素を明示的に継承する

対応
transparent　IE4 IE5 IE5.5 IE6 N6 N7 O6 O7
inherit　N6 N7 O6 O7

>>131
いや、意味は分かってるんだけど、結果は同じじゃないか？と訊いたんです。

あとはしらん

div.colorname {
color : inherit;
}
a:link , a:visited , a:active , a:hover , li , div {
background-color : inherit;
}
でいいということになるな。

transparent は必ず指定しなきゃいけないんじゃなかったっけ？

>>135
？

inheritはIEで無効だけどね。

>>132
div{
background-image : url(hoge.png);
background-color : #ff0000;
}
p{
background-color : inherit;/*これのあるなしを比べろ。*/
}

<div><p>hogehoge</p></div>

>>138
なるほど。試してないけど意味わかったす。

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

背景画像を一部だけ（左上に1個だけ）表示
したいのですが、どのようにしたらそう
表示できるでしょうか？

繰り返しをたて座標、横座標ともに一回だけ

>>141
左上に表示したい画像のある幅100000pixel高さ100000pixelの画像を作る

>>143
hagedou!!!!!!!!!!!!

overflowで考えてみました。（64さんアドバイスありがとうございました）
しかしfloat:bottomというものは実在しないので、
スクロールしても常に画面下の配置方法をどうすればいいのか考え付きません。
希望する配置はこういうものですが、テーブルを使わずに実現するにはどうすればいいでしょうか？

<style type="text/css">
<!--
body{ margin: 0 }
table{margin-left:auto; margin-right:auto}
-->
</style>

<body>
　<table cellpadding="0" cellspacing="0" border="1" width="400px" height="100%">
<tbody>
<tr><td height="20px"><br></td></tr>
<tr><td>test</td></tr>
<tr><td height="50px">test</td></tr>
</tbody>
　</table>
</body>

age

<div style="height:100%;">
テキスト
<img src="gazou.jpg">
</div>

で、テキストは上揃え、画像を下揃えにするにはどうしたらいいでしょうか？
今はこう↓しているんですが、もっといいやりかたがあれば教えてください。
<div style="height:100%;">
<div style="height:80%;">テキスト</div>
<img src=gazou.jpg>
</div>

>>147
それでええやん

あ、そうですか？
ではこのままにしておきます。
ありがとうございました。

>>147
もっといいやり方と言うより、正しいやり方を勉強することだな
出直しておいで

>>145
ＦＡＱのリンク先は見たのですか。
疑似フレームのフッターを作る要領です。
http://www.fromdfj.net/html/sample/overflowsample03.html

>>145
そもそも正式にはtableタグにheight属性なぞあり得ないんだがね。
http://www.ne.jp/asahi/minazuki/bakera/html/reference/table#table

>>150
具体的にどんなやり方が適切なのか示してあげないとわかるまいよ。

>>152
「tableタグ」って、、、、お前も勉強して来い。

tableタグにheight属性とは、<table height="〜">のこと。
なんかヘンか？　>>154

>>151
それ見ました。高さを%で区切るのなら簡単なのですが
ヘッダーとフッター部分はピクセルで高さを決めて、
表示されている画面のheightからヘッダーとフッター部分を引いた高さをコンテンツ部分に指定したいのです。

>>156
http://pc2.2ch.net/hp/kako/1055/10555/1055536413.htmlの35に既出。

高さ100%からヘッダ・フッダをピクセル値で引くなんて、できません。
単位が異なるんですから引算になりません。換算してどちらかの単位に統一しませう。
まあＩＥ独自拡張のダイナミック プロパティことexpression()関数を応用するんならともかく。
http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm

あと、>>152は了解したかい？

>>156
上下をの縦幅を固定してコンテンツのheightをautoにするとコンテンツ部分が少ない時にフッター部分が上に上がっちゃうてこと？

px単位は画像関係だけにしてくれ。なるべくem単位を使ってほしい。

>>156
http://homepage.mac.com/mikihiro/md/web/model/index.html
↑ここの製作中のモデルでどうよ

>>155はこれ以上恥を晒す前に勉強しなおせ

> 高さ100%からヘッダ・フッダをピクセル値で引くなんて、できません。
出来たらイイナァとか稀に思う。

>>161
こういっちゃ悪いが「この程度のこと」でそこまで反応している君も

hegth、 hegthってうるせーヨ！

table「タグ」にheight属性って…確かにあり得ないんだがねw

このスレの連中は総じてくどいな

>>161
ごめん、僕もどこが間違ってるのかわからん。こっそりご教示くだされ。
ソース中の<table></table>をtableタグと呼ぶのはいいんだよね？

同じことだろ。
TABLE 要素には height という属性はありません。
TABLE タグには height 属性は書き込めません。

>>168
最近table「要素」を覚えたばっかりのお子様だ。放置しる。

お子様＝>>154・>>161・>>165 で、いいか？

次の方、質問をどうぞ。

>>160
フッタを「スクロールしても常に画面下」に配置したいって>>145で言ってるから、それだとダメ。

うん、WinIE6だとfixed効かんからね

タグと属性と要素がごっちゃになっちゃったんだね。

タグに属性などありませんが。

ﾊｧ？

それはもういいから解ってない奴は放置しる！

HTMLの話はスレ違い

>>152が第二のhegthにならないことを祈るばかりだ。

画像にリンクしたときに、画像の周りに出るボーダーをCSSを使って消すことは出来ないでしょうか？
教えてください。

>>179
>>4

>>152
む。heightも指定するものと勘違いしてました。
ますますテーブル使いたくない。。。。

>>157
上のリンクに
>WinIEならダイナミック プロパティことexpression()関数を利用して、できる。
>document.body.clientHeightを弄って。
>http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm
とありました。この下のリンクはなくなっていて見ることができないので
ググってみたのですが例文のようなものも出てきませんでした。
これってjavascriptを使うということですか？
だとしたら広告うざい→javascriptOFFにしてる人は見れなくなるという諸刃の剣？
（こういう設定にしてるwinIEユーザーって多いのでしょうか？）

position:fixedが使えれば済む話なのにexpression()とやらを使わなければいけないとはトホホ。。。
>>145の例のあり得ない属性で指定してるけどなぜか表示できてしまうテーブルレイアウトで妥協するか
javascript？expression()のお勉強をするかなのですね。。。
アドバイスをくださった皆様ありがとうございました。

>>181
<body style="overflow:hidden;margin:0px;">
<div style="height:100%;overflow-y:scroll;">
<div style="height:1000px;">
本文
</div>
</div>
<div>
<div style="position:absolute;bottom:0px;height:40px;">
menu
</div>
</body>

できたぞ。ただしIE限定

7行目のdivはミス
消してくれ

>>182
惜しい。
menuを含むdiv要素に、background-color:#ccf;width:100%;を追加したらわかるけど
（ていうか、追加しなくても本文を増やしたらわかるか）、本文がフッターと被る。
本文を直接含むdiv要素にmargin-bottom:40px;を追加したらいい感じ。
あとoverflowはautoの方がいいかも。

Opera7用。
<div id="header">
<p>へっだー</p>
</div>
<div id="content">
ほんぶん。
</div>
<div id="footer">
<p>ふったー</p>
</div>
body{margin: 0; padding: 0; background: #ccf}
#content{position: fixed; top: 20px; bottom: 50px; width: 100%; overflow: auto; background: #fff;}
#footer{position: absolute; bottom: 0; width: 100%; height: 50px; overflow: auto;}

あ〜、opera用のは、本文のpositionはabsoluteでもいいっぽい。
あとieのは、margin-bottomだけじゃなくてやっぱり背景色も指定しないとだめだわ。
でも背景色指定するとスクロールバーが隠れるんだよな……。

http://screenshot030720.easter.ne.jp/faketextarea.html
MacIE5で擬似フレームを中央に寄せたいのです。Mozillaでは思い通りの配置に
なっています。どのような記述を行えばよいでしょうか。

>>185
fixedを指定する意図がわからんし　margin:0　てなんだよw

>>185
<div style="position:absolute;bottom:0;right:16px;height:40px;background:#ccf;width:100%;padding-left:16px;">
menu
</div>
とするとスクロールバーが隠れなくてよい。

>>187
一応IEで見てもmarginが入らないように。
まあopera用だけど完全に切り捨てるのはおかしいさ？

>>189
padding:0てなによ

ﾂﾏﾝﾈ

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

>>190
ｵﾍﾟｰﾗだとpaddingが入るんだよ。いちいち訊くな。自分で確認しる。

>>193
paddingに整数値って指定できるのかー
（　´_ゝ`）つ〃∩　ﾌｰﾝﾌｰﾝﾌｰﾝ

普通、0は単位付けないんじゃないか？

>>194
値が0の時は単位が省略できますが？

(´-`).。oO（>>152=>>194かな…？)

>>187で頓珍漢な突っ込みやってる段階で気づいてやれよ

むしろ>>154＝>>194かと。

1ﾌｰﾝ=10ﾍｪを知らない香具師らﾊｹｰﾝ

<dl>
<dt>てへてへ</dt><dd>ほげほげ</dd><dd>ほにゃらら</dd>
<dt>てへてへ２</dt><dd>ほげほげ２</dd>
<dt>てへてへてへてへてへてへ３</dt><dd>ほげほげ３</dd>
---↑これを----------------------------------


てへてへ 　 ほげほげ
　　　　　　　　　　　ほにゃらら
てへてへ２　　　　ほげほげ２
てへてへてへてへてへてへ３
　　　　　　　　　　　ほげほげ３

---↑こんな風に------------------------------
昔の<dl compact>のように並べる方法はありますか？
<li>を使うのは、なんか違う気がしたので
dt{
　　float:left;
　　width:45%;}
dd{
　　float:right;
　　width50%; }
とやってみましたがどうも上手くいきません
誰か助けて

訂正 で、</dl>を付けといてください、あとイメージは

てへてへ 　　　　 ほげほげ
　　　　　　　　　　　ほにゃらら
てへてへ２　　　　ほげほげ２
てへてへてへてへてへてへ３
　　　　　　　　　　　ほげほげ３

です。<dd>要素の頭をそろえてやりたいんです

>>202
三番目の dt の長さは dd に食い込むってこと？
っつかもうちょっと別の文章とか入れてくれ、わかりづらいｗ

>>200
（　´_ゝ`）つ〃∩　ﾌｰﾝﾌｰﾝﾌｰﾝ

>>203
わかりにくくてすいません
そうです、そういう感じなんです。

http://tohoho.wakusei.ne.jp/html/dl.htm
↑とほほさんのコンパクト表示のところです
これがやりたいんですけど廃止されたみたいで

例えば、dtの長さが6em以下ならddはdtと同じ行に
dtが6emを超えたらddは一行下に表示され
なおかつ ddが連続した場合は ddの文頭はすべて6emのmarginがとられているような状態です
>>201のようにfloatを使ったら連続したddの文頭がずれるんです

>>203
compact属性は定義語が短い場合、自動的に定義説明が
定義語と同じ行に表示されるようにするもの。
要するにdt要素の文字列長がdd要素の左マージンより
短かったら改行しないで表示すると。

>>205
>>201のままならddのwidthを50%より大きくすればずれない。
ただこのままだと、compact属性をエミュレートできないから、
dtのwidth指定を外して、ddのwidthを90%ぐらいにすれば……。

それからddの左マージンは0にした方がいい。
あとdtにclear:bothを加えれば、IE以外、operaとかでなら
ほぼ期待通りに動作するはず。
IEだと2番目以降のdtがdd1つ分上にずれるのと、dtにwidthが
指定されてないと勝手に縮小されるからだめだな。

>>201
何で、3行目の<dd>を右寄せにしたいのかな？
dt {
float:left;
width: 30%;
clear: both;
}
dd {
margin-left: 30%;
}
単純にこれでいいんじゃないの

>>208
>201のやりたいのはそういうのじゃないんだよ。
IEで<dl compact="compact">ってやって表示してみれ。

>>206
そうなんです

>>207
ありがとうございます、やってみました
もじらでも見てみました上手くいってました
しかし閲覧者の大半がIEなんでIEで表示がずれてしまうのは正直キツイです
10%の80%でやったら長いdtが折り返されちゃって

>>208
右寄せと言うか>>209の言ってる通りなんです
今まで dl compactで幸せだったんですけど
今回ソースの整形するのに外部スタイルシートに display: compactとしてみたら
廃止されてるみたいでIEもNNも対応していないそうなんです
それで、どうにかしてまったく同じように再現できないものかと昨日から悩んでるんです

>>210
display:compact;は廃止されたのではなくて、Operaしか対応していないだけ。

>>186です。
http://screenshot030720.easter.ne.jp/faketextarea.html
一部更新しました。ただ単に擬似フレームを中央寄せにすることは
左右にmarginを取ることでできそうなのですが、そうすると横幅指定が
効かなくなります。MacIE5でdivにoverflow:visible;以外を指定すると
margin:auto;が無効になるようなのです。横幅を保ったまま
中央揃えになるような記述はないでしょうか。

>>212
Macじゃないから確認できん。
このスレに186以外のﾏｶｰいるのか？

漏れはマカーだが、今は別の板で祭りが開催されているのでこの板まで手が回らない。スマソ

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

name属性が含まれているもの、とか
name属性へのリンク、とかをセレクタにできますか？
クラス指定しないと無理ですかね。

補足
ページ内リンクをわかるようにしたいんです。

>>216
属性セレクタがあるじゃないか。対応状況は別として…

>>218
属性セレクタですか。
調べるキーワードがわからなかったので困ってました。
仕様書見てきます。有難う御座いました。

>>218
おっしゃるとおり、対応状況が芳しくないようですね。
他の案を考えることにします。
有難う御座いました。

>>182,184
margin-bottom:40px;を追加してみたのですが
本文とかぶる状況は打破できません。
winIEは大丈夫なのでしょうか？macIEではダメぽです。

っていうかふたつめの<div>がなくても本文は同じように表示できるのに
なぜ<div>を入れ子にするのか、なぜheight:1000px;なのか理解できないでいます。

ここ最近この一連の問題に悩み過ぎて頭はあまり働かない状況なのですが
この意味を教えていただけないでしょうか？

>>220
未対応ブラウザなんか窓から投げ捨てろ！

って訳にも行かないよな・・・

>>221
> なぜ<div>を入れ子にするのか、なぜheight:1000px;なのか理解できないでいます。
スクロールバーを表示させるため。<div>のかわりに好きなものいれたらよろし。

> 本文とかぶる状況は打破できません。
当たり前。背景でも指定しとけ。

CSSでこのような下図のような段組をしたいのですが、
┌────┬────┐
│　 　 　 　 │　 　 　 　 │
│　.box1.　 │　.box2.　 │
│　 　 　 　 │　 　 　 　 │
├────┼────┤
│　 　 　 　 │　 　 　 　 │
│　.box3.　 │　.box4.　 │
│　 　 　 　 │　 　 　 　 │
└────┴────┘
どうにも解説サイトを渡り歩いてもレイアウトできません。
floatプロパティとclearプロパティを使っているのですが・・・

<div style="width:20%; float:left; height:150px">1</div>
<div style="width:20%; float:left; height:150px">2</div>
<div style="clear:left; margin:0px;">
<div style="width:20%; float:left; height:150px">3</div>
<div style="width:20%; float:left; height:150px">4</div>
</div>

（途中送信してしまったので続き）
なんだか目茶苦茶div使いまくりな上に、上側と下側にIEだと隙間ができます・・・。
何かいい方法ありましたらご教授ください。

>>224
<div style="width:20%; float:left; height:150px">1</div>
<div style="width:20%; float:right; height:150px">2</div>
<div style="width:20%; clear:left; height:150px">3</div>
<div style="width:20%; float:right; height:150px">4</div>
</div>

じゃだめなの？
<div style="clear:left; margin:0px;"> はなに？

>>226
それだとboxが左右にわかれますよね。
boxをみんな隣接した状態にしたいもので・・・。
widthを50%にすれば隣接するにはするんですが、都合上それじゃ厳しいので。

＞<div style="clear:left; margin:0px;"> はなに？
box1とbox2をfloatプロパティを使用して段組に。
box3とbox4も同様にして段組に。
その後box3とbox4をさらに回り込ませてみたんです。
あとはマージンをとって隙間をなくそうと踏んだのですが、無意味でした。

どうもやり方が下手糞です・・・。

margin-left使ったら？

>>227
<div style="width:20%; float:left; height:150px">1</div>
<div style="width:20%; margin-left:20%; height:150px">2</div>
<div style="clear:left; width:20%; float:left; height:150px">3</div>
<div style="width:20%; margin-left:20%; height:150px">4</div>
で、いいはずだが。
cf. http://cssbug.tripod.co.jp/detail/winie/b093.html
　　http://cssbug.tripod.co.jp/detail/opera/b044.html

●●●●●●●●●●●●●●●●●●●●●
●　　　　　　　　　　　　 　●　　　　　　　　　　　　　 ●
●　　　　　　　　　　　　　 ●　　　　　　　　　　　　　 ●
●　　　　　　　　　　　　 　●　　　　　　　　　　　　　 ●
　　●　　　　　　　　　　 　●　　　　　　　　　　　 ●
　　　　●　　　　　　　　　●　　 　　　　　　　 ●
　　　　　　●　　　　　　 ●　 　　　　　　 ● 　　　　　＿＿（ "''''''::::.
　　　　　 　　●　　　　● ●　　 　　 ● ____,,,,,,---'''''''"""" ヽ 　　゛゛:ヽ
　　　　　　　　　●　 ●　　 　●　 ●:""""　　・　　　　・　　. ＼::.　　 丿エ〜デルワ〜イス　エ〜デルワ〜イス
　　　　　　　　　　● ●　　　　● ●::: 　　　　　　 ・......::::::::::::彡''ﾍ::::....ノ
　　　　　　　　　　　●　　　　　　 ● ::::::::::;;;;;,,---"""
　　　　　　　　　　　　●●●●●

>>229
IEやOperaにそんなバグがあったんですね。

そのソースだとIEじゃ左右でboxの幅が違うけど・・・。
これが一番妥当でしょうか。

<html><head><title>質問</title><style>
body { background:#9cf; }
pre { background:#ccc; color:#000;}
</style></head><body>
<pre>
あるスレを見て気になったんだが、このHTMLをIE,Moz,Operaで横幅を狭くして
見てみたところ、IEとMoz/Operaで表示のされ方が違うのが気になりました。
■質問 IEとMoz/Operaではどちらが仕様に正しいんですか？

#もしもbodyのbackgroundがpreのcolorと同じだったら、
#同じでなくても、見た目が悪いですよね。
</pre>
</body></html>

>>232
次からは、どう違うのか具体的に書いてから質問してくれ。
いちいち相違点を探すのに手間がかかる。

仕様に忠実なのはOpera/Mozの方。
MSIEはoverflow:visibleの実装がおかしい。
http://www.mozilla.gr.jp/standards/webtips0020.html

>>233
thax 下手に説明するよりHTMLはったほうが良いかと思ったので、ｽﾏｿ

>>186>>212です。
212,213両氏、ご返答ありがとうございます。ひとつ方法を見つけました。
http://screenshot030720.easter.ne.jp/faketextarea.html
一部更新しました。overflow:auto;を指定したdivを更にdivで囲い、
外側のdivに指定することでwidthを保ったまま中央揃えできました。
この方法は正直恥ずかしいです。もっとスマートな方法をご存じの方、お教えください。
あとOpera7.xの方にお聞きしたいのですが、
http://screenshot030720.easter.ne.jp/macopera603.html
7.xではこんな酷い表示にはならないですよね？　8/20に発表されたばかりの
Mac版6.0.3ではこの有様だったのです。

>>235
確認しておきたいのだけど、Mac IEのみを対象とした実験？
Win IE 6.0だと入れ子divもセンタリングできてないんだけど。

>>236
ご意見ありがとうございます。WinIEだと無理なのですか。
入れ子div「も」、ということは1番目も3番目もセンタリングされないと
いうことでしょうか。
http://screenshot030720.easter.ne.jp/index.html
上記からIE5.1.7とMozilla1.3.1とOpera6.0.3（すべてMac）の
スクリーンショットにリンクしていますが、どの表示に近いのでしょうか。
私が方法を誤っているということであれば、正しい記述を教えていただけると嬉しいです。

>>237
WinIE6.0 では、MacMoz に一番近いと思う。

>>238
ご返答ありがとうございます。今一度確認します。
WinIE6.0では1番目から3番目まですべて中央寄せされているということで
正しいでしょうか。4番目はスクリーンショットに写っていませんが右寄せに
しているつもりです。

>>239
真ん中・真ん中・真ん中・右端になってるよ。
幅固定・幅可変・幅固定・幅固定。

>>239
ごめん。proxomitoronが変な動作してた。
Winだと、NC7.1、IE6.0、Opera7.11で4つとも正常表示。
3つがセンタリング・4つ目が右寄せとして。

>>240>>241
ご返答ありがとうございます。ではMacIE特有の問題なのですね。
とするとそのためだけにマークアップを曲げるのがますます心苦しくなりました。
デザインを最優先させるときのみ入れ子にして、それ以外の時は表示が食い違っても
やむなし、と考えています。MacのOperaは7になるまで考慮しないことにします。
ご協力に感謝します。

中央寄せならこれの所為でないの？

Internet Explorer (MacOS) CSSバグリスト
http://cssbug.tripod.co.jp/detail/macie.html
　marginプロパティで値を一括指定すると無視される(4.1/5.0)
　http://cssbug.tripod.co.jp/detail/macie/b022.html

>>243
ご指摘ありがとうございます。
http://screenshot030720.easter.ne.jp/faketextarea.html
こちらに示したcss記述の通り、margin-left:auto;margin-right:auto;と
別々に記述しております。ちなみにご指摘のバグはMacIE5.1.xで解消されています。

>>244
是非こちらに報告して！

CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

これとも違ってるな。

overflowプロパティにvisible以外の値が指定された要素が表示されない(5.x)
http://cssbug.tripod.co.jp/detail/macie/b013.html

>>245
ご紹介ありがとうございます。要点を整理してから伺います。
>>246
ご指摘ありがとうございます。このバグがあるためpre要素で擬似フレームが
出来ないのです。ユーザースタイルシートにhtml,h1,h2,h3,h4,h5,h6,p,pre,center,dl,blockquote,form,address,noscript,noframes{overflow:visible!important;}
と記述して回避しています。

ユニバーサルセレクタ(＊)は、使わないほうがいいのでしょうか？

>>248
そんなことないと思うよ。

>>248
全ての要素に適用させるのは、良くない。
なぜならば、img要素にも、fontプロパティが
当てられることになるでしょ。
適切じゃない。

>>250
全ての要素に適用できるプロパティしか使わなければ問題ないじゃん

>>250
適用できないプロパティは無視されるんだし。

>>251
それだと、そもそもユニバーサルスタイルを使わないんじゃないのかな。
>>248は、ブラウザのデフォルトのスタイルを無効にしたいんだろう。

＞ブラウザのデフォルトのスタイルを無効に

そんなことしちゃったら大変じゃないか？
CSS2ではformまわりのスタイルを再現しきれないじゃん

見出し（hX）に自動でナンバリングを入れたいのですができますか？

できますが、あの素晴らしい人類最高の成果物と言わざるを得ないIEは
対応できていないのでやめましょう

>>255
http://tohoho.wakusei.ne.jp/css/reference.htm#counter-reset

divでくくった要素をfloatで左に寄せてheight:100%とするとウィンドウの上端から下端までの長さになってしまいます。
ドキュメントの上端から下端まで指定するにはなにを使えばいいんでしょうか。

>>258
どういうこと？

>>259
height:100%とするとスクロールする前はウィンドウの上端から下端まで表示されるんですが、
少しでも下にスクロールすると隙間ができるんです。
このスレで言えば1から1001まで帯状に表示したいんです。

bodyとhtmlの差異を理解しなさい。仕様書読むべし。>>258

>>261
何言ってるのか、チンプンカンプン。

>>262　そんなあなたに。
閲覧領域と包含ブロック
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#q2
高さの算出法
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#q17

あと
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#floats
>浮動体は通常フローに属していないので、その前後に生成される位置指定されて
>いないブロックボックスは、浮動体が存在しないかのように流し込まれる。

>>263
何言ってるのか、チンプンカンプン。

>>256-257
遅ればせながらありがとうございました。

>>265
失礼。
×254
○255

隙間ができるって？

http://pc2.2ch.net/test/read.cgi/hp/1055536413/456
456 名前：Name_Not_Found sage 03/06/25 (水) 18:20 ID:???
自分の馬鹿さを晒し上げているスレはここですか？
hegth:100px; → これを実数値（正確には実数値+単位）という
hegth:100%; → これを割合値という

>>268
何言ってるのか、チンプンカンプン。

>>271
何言ってるのか、チンプンカンプン。

今、俺は、女の子とメッセで話している夢を見たような気がしてならないのだが…。
その時隣の部屋から「誰か今夜、カラオケＯＦＦやろうぜ！！」という
楽しげな声が聞こえてきたが、自分には電話すらかかってこない訳で…。
「お母さん、俺、大学辞めて代アニ通うことにするよ」
なんてことをいう決断力があるわけもなく、結局家の中でいつものように、
しこしこといつ終わるともわからないおなにーをしながら自分の運命を呪い、
スレに何か新しい書き込みが無いかと今日も今日とてチェックをかかさなかった。
そんな自分が嫌になったが練炭を買おうにも金がなく、炭火で焼こうと思い買った鰻だけが残った。
その鰻は微笑み、こう言った。「お前もめぽ、俺を食べたら、もっともめぽ」
ところで何が変わるでもなく、絶望した私は回線を切って首を吊って逝った。

よし、すべからくわかったべし

<INPUT>でradioやtext、buttonごとに別の設定をCSSファイルに
記述したいのですが、出来るのでしょうか？
出来るとしたらどう書くのですか？
今は例えばこんな風に書いているのですが、

input {
hoge: xxx;
}

ほんとはこんな風に分けたいんです。

text{
hoge: xxx;
}

button{
hoge: yyy;
}

radio{
hoge: zzz;
}

どなたか教えてください。宜しくお願いします。

>>273
属性セレクタを使えばできる。
input[type="text"] {
hoge: xxx;
}
という感じで。
けど残念ながらIEが対応していないので、クラス分けするかid振るしかないです。

ＩＥが対応してないなら非標準も同然

>>275
何が？

css3の縦書きは世界標準

>274
属性セレクタっていうものがあるんですね。
知らなかったです。
ありがとうございました。

それにしてもM$め…

>>278のレベルが1あがった。

CSSの利便性がわかってくるとM$が憎くなってくるんだよね

>>275
同然ではなくて真に非標準。
IEが対応してるのはW3C製でなくても絶対的な標準。

その程度のブラウザを標準としてしまう世界もどうかと

>>282
じゃお前が何とかしたれや

>>283
なぜそんなに必死なんだ？（ぴゅあ

http://that.2ch.net/test/read.cgi/gline/1039358238/120

お知恵をお貸し下さい。

table-td内に<ul><li>で箇条書きしたテキストの行間を空けたいと思い、
td.text{line-height : 150%;}と書きました。
NetscapeとOperaでは意図通りに表示されますが、IEではいくつかの行間のみ
意図通りに空きません。

<li>の先頭を画像で表したいのですが、Netscapeではその画像とそれに続く文章の
水平中心線（？）が合うのですが、IEとOperaでは画像が上にずれてしまいます。
（青○黄色△三角☆の、文字の高さより少し低い高さの画像です。）

table-td内の<ul>と<li>の位置というか、tdの枠線に対しての余白（？）が、
IE・Netscape・Operaで、あまりにも違いすぎます。
<ul>と<li>のそれぞれの、paddingやmarginをいろいろいじってみましたが、どのブラウザでも
ちょうどよい余白になる設定が見つけ出せません。（あちらを建てればこちらが建たず状態）

>>286
> table-td内に<ul><li>で箇条書きしたテキストの行間を空けたいと思い、
> td.text{line-height : 150%;}と書きました。
ここはliに行間指定するべきではないの？

>>287
ご忠告の通り直してみましたが、うまくいきませんでした。
例えば、
<li>１１１１１２２２２２３３３３</li>
となっていて、五文字でtd幅いっぱいになって３行に渡る場合、
２２２２２と３３３３３の行間は意図通りに150%になってるんですが、
１１１１１と２２２２２の行間が詰まってる（100%？）になってるんですよ。

NetscapeとOperaではどれも同じ行間になってるのに・・・

>>288
ああ、いや、こうすれば直るよ、じゃなくって
マークアップの意義的にはこうするべきなんじゃないの？って意味で。
私もリストでのIEの挙動に悩んでる。
＃正しい記述で入れ子にすると変な余白ができる

なんか思いっきりテーブルレイアウトだしなァ･･･

IEってのは、テーブルレイアウトを蔓延させるために作られてると思うほどだ

>>290
>286さんのことなのかな？
表の中にリスト入れる必要性はよくあると思うけど。
それとも>289さんが言うような意味でなのかな。

>>291
mozillaもテーブルレイアウトの普及活動は忘れてないですよ。
がんばります！
http://www.mozilla.org/

>>288
フォントによって誤差がでやすいんのではないか？
頭をひねって、<li>に padding でいいだろうね

operaはcssレイアウトなんだな
http://www.opera.com/

ブロックの真ん中寄せで、

body { text-align:center }
div { margin-left:auto; margin-right:auto; text-align:left; width:500px; }

と書いてみました。
これを NN7.01 で表示した場合、ウィンドウ幅を500px 以上にした場合には
普通に真ん中寄せになるのですが、ウィンドウ幅を縮めて横スクロールバーが
出た状態になったとき、スクロールバーを動かしても、ブロック（この場合は
div）の左端に到達できませんでした。

バグ辞典には特に書いてなかったですが、これって、周知のバグでしょうか？

>>295
右端にも到達できなくない？
marginは負の値もとる。

>>296
当方、右端には行けました。
ソースは次にて。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="ja-JP">
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>centering</title>
<style type="text/css">
body { margin: 0px; text-align: center; background-color: #999999; }
div,td { text-align: left; width: 500px; margin-left: auto; margin-right: auto; background-color: #ffffff; }
</style>
</head>
<body>
<!--/header-->
<h1>Netscape7.01 と横スクロール</h1>
<hr>
<div>div要素です。左にずぶずぶめり込んで（？）いきます。div要素です。左にずぶずぶめり込んで（？）いきます。div要素です。左にずぶずぶめり込んで（？）いきます。div要素です。左にずぶずぶめり込んで（？）いきます。</div>
<hr>
<table cellspacing="0" cellpadding="0" border="0" align="center"><tr><td>table要素（とその仲間たち）です。左端で止まります。</td></tr></table>
<hr>
<p>何故に？</p>
</body>
</html>

うｐしました。
http://up.isp.2ch.net/up/5463c570586b.html

div,tdをdiv,tableに書き換えると右端を突き抜けるようになるけど、左端で止まるのはそのままだ。
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5b) Gecko/20030824 Mozilla Firebird/0.6.1+

>>300
当方
Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:1.0.2) Gecko/20021120 Netscape/7.01
です。table が左に突き抜けないのは、table がブロックじゃないから、かな？
右も左も突き抜けるのは、margin が負になったと解釈すれば、正しい挙動だと思います。

でも、スクロールバーを動かして左端に到達できないのは、ブラウザ固有のバグと
判断してよいものですかね。

どうやらそういうものみたい。
バグ辞典スレに逝ってきます。

ふとした疑問なんですけど、
line-heightプロパティなどを使って行間を取ると、マーカーに画像を使った場合ずれますよね。
Mozilaだとそれなりにあってくれるんですけど、Operaなんかだと酷いことになります。IEは微妙。

そこで、マーカーの位置を文章に合わせるにはどのような工夫をすればいいんでしょう。

>>303
li {
　margin:0;
　padding:画像に合わせて適当に;
　background-image:url("marker.png");
　background-position:left center;
　background-repeat:no-repeat;
　list-style-type:none;
}

画像表示についての質問です。

* {
　　　　 -moz-box-sizing : border-box;
}

img{
　　　　padding: 5px;
　　　　border: 1px;
}

とした時に、表示させる画像サイズが100px 100pxだとして
<img src="/hoge/hoge.jpg" alt="〜" width="100" height="100">
とすると、IEではそのまま表示されますがMozillaだと画像がpaddingの分だけ縮んでしまいます。
paddingを諦める、width/heightの記入をしない以外に上手い解決法はありますでしょうか？

>>305
まーじんじゃあかんの？

>>306
paddingとborderを使って写真のフチみたいにしてるんです。
imgの背景に白を入れてborderで影をつけてます。
元画像にフチ付けろというのは無しでどうにかならないでしょうか。

>>307
自転車で150km/h出せるようにしたいです。原動機付けるとかはなしで。

できました!!

imgに
-moz-box-sizing : content-box;
追加で行けました!!
お騒がせしました。

>>305
お喜びのところすまないが、
-moz-プロパティはﾌﾞﾗｳｻﾞ開発者がWebサイトでは使うなっと言っていることをご存知か?

そのくらいは知ってて当然だよな・・・

マルチカラムデザインについてなんですが
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
ここで
</div>
<div id="critical">
〜
</div>
<div class="status">
〜
</div>

このidとclassを使い分ける理由ってなんですか？
もう一つ、clearを使わないでfloatだけ作るっていうのはOKなんですか？

>>312
その作成者に聞いたらいかがですか？

＞clearを使わないでfloatだけ作るっていうのはOKなんですか？
意味不明

>>313
そのサイトは例えで出しただけで
ほとんどのサイトでidとclassを使ってました
だから、何か決まりがあるんじゃないんですか？

>>314
idとclassの違いを学ぶとよいよ>>1
まあ、「idは一回だけ。classは何度使ってもいい」と覚えておいても取り敢えず問題はないけど。

で、ほとんどがそうしている理由、として考えられるものね
メニュー枠とかは一回しか出てこないけど、本文枠はなんどか出てくるから、とかかな。

>>312
id属性とclass属性は根本から違います。
id属性は、その要素を識別するもの。
class属性は、その要素のより細かな分類を示すもの。
なおid属性は「一つのページで複数回同じ型での使用はしてはいけない事になっています。

Googleで検索すれば腐るほど解説サイトがあるので詳細はそちらでどうぞ。

>>315
>>316
レスどうもです
idとclassの違いを勉強してきます。

>>317
おいおいclearはもういいのか？

外部スタイルシートで
h1,
h2,
{
color:red;
}
って複数の要素に同じ内容入れる事ってできないの？

いま、作成中のサイト用にNNをDLしたらstyleが全く適用されないで、愕然としたんだけど・・・
NN7.1ってこういうの認識しないの？

>>319
なんでお前は質問者の分際でタメ口やねん。身の程をわきまえろ下郎が。

御免・・・
複数要素で次が無いのに「,」入れると駄目なのか・・・・
面倒だなぁ・・・

ってかオレのミスか・・・

>>320
御免御免。

>>321
h1, h2, {
〜
}

セレクタに改行があるからじゃないの？

なんか香ばしいのがいるな。

>>319
俺も最初ﾋﾞｯｸﾘしたよ。
IE標準に考えると駄目だねぇ。

>>323
h1, h2,でも駄目だったのです。
で
h1,h2だと大丈夫みたいっす。
お騒がせごめんなさい。

h1, h2,{color:red}
でも駄目だったのです。
に訂正です。

*,
{
display:none;
}

これでIEには見えないサイトが出来るわけか

現実でﾍｺﾍｺばかりの劣等感満載の人って、こういう場所でしかストレス発散できないんだろうね。
悲しい現実が見えない人って可哀想。

つーか CSSのリファレンス読めよ

■レンタルサーバーの新躍動■
http://arigato3.net/

>>328
自己紹介おつ

>>328
( ﾟдﾟ)

しかし、大暴れだな徳

正常な流れに戻ってくだっさいです。

>>324
＞IE標準に考えると駄目だねぇ。
思いしったです。

失礼しました。

質問です。

＿|￣￣|＿|￣￣|＿|￣￣|＿

このようなタブっぽいデザインを作るにはどうすればいいでしょうか？
<div style="border-style:solid; border-width:0px 0px 1px 0px">
　<span style="border-style:solid; border-width:1px 0px 0px 0px">A</span>
　<span style="border-style:solid; border-width:1px 0px 0px 0px">B</span>
　<span style="border-style:solid; border-width:1px 0px 0px 0px">C</span>
</div>
だと下がずーっと続いてしまうのでなんとか解決したいのですが…。
ていうかspanにborderって使ってよかったですっけ？(汗

>>334
http://unraveled.com/projects/css_tabs/
参考になるかもね

>>318
floatだけでもなんとかなるんで・・・
まあいっかっと。

>>335
ありがとうございます解決できました。
border-bottom-colorを背景色に指定すればよかったんですね。

宜しくお願いします。

<body>
<h1>●○●○●○●</h1>
<div　class=box>
・・・・・・・・・
・・・・・・・・
・・・・・・・・・

</div>
</body>

の場合に、boxを600px指定でセンターに配置したいのですが、
ネスケだとうまく表示できません。
どのようにbodyで指定したら良いかご教授下さい。

宜しくお願いします。

既出じゃねーの？

>>338
YABOを承知で言わせてもらうが、600px固定はあまり好ましくない。
好ましくないことやるんだったらテーブルでもええやん。どうせ好ましくナインだし。

>>338
ボックスのセンタリングならFAQだけど自分はどう書いたの？

>>340
CSSでやるのとテーブルでやるのは全然違うだろ

>>341
いや、cssで見栄えを、って意味が分かってるなら
左右のインデントええやん、ってのも判ってくれるかな、っておもて

既出でしたか。すみません。
faq勉強して出直します。

サイトが趣味の物の製造工程を説明するような感じなので、
それほど文字数がなく、写真とか文字とかいろいろありまして、
boxで幅を固定しておいた方が楽かなと思ってです。

600pxじゃなくって、60%なら出来るのですが・・・・
明日にでもじっくり考えます。

>>343
60%なら、左右に20%ずつのマージンでええやん。
解像度が高いpcで若干左によっててもなんらおかしくないしね。

344>>
そのとおり、%なら解るんです。
pxだとよくわからないんです。

div.box{
width : 600px;
text-align:left;
margin-left : auto;
margin-right : auto;
}

<body>
<h1>test</h1>
<div style="text-align:center;">
<div class="box">
ブロックレベル要素
</div>
</div>
</body>

これで一応IEでもNNでもセンタリングになるよ。

>>344
このひと凄い役立たず。
文句言いたいだけなんでしょうね。
だからろくに書き込み読んでない。

>>347
読んだ結果のコメントだよ。
よく読めばそれもわかる。
まあ、ｳﾞｧｶには深遠な思想等汲み取れるはずもないが。

>>347
一丁前のことは回答してから言え。
煽り書き込みしかしないならお前も役立たず同然だ。

>>347
このひと凄い役立たず。
文句言いたいだけなんでしょうね。
だからろくに書き込み読んでない。

（´-`）.｡oO（>>347はテーブルレイアウトを勧められてお冠です。

結局ご丁寧にソースを載せてくれた>>346はスルーですかお前

寝る前の質問なのでレスは明け方になりますが・・・

position:absolute; を使ってBox（Divとか）を指定すると、そのBoxの底辺がブラウザの下にぴったり付くような感じになりますよね。
その場合marginが効かず、間隔を空けたくても空けられないんですが、どうしたら良いんでしょうか？

>>353
position:absolute;bottom:1em; とかじゃダメなの？

寝過ぎだろ

>>355
ｽﾝﾏｿ、今おきますた(´・ω・｀)

>>354
やってみましたが、IE、Mozilla、Operaともに無意味でした。

ホントに寝てたのかよ！

height: 98%;は？

と言うか、俺にはどうも状況が解らんのだが、俺が馬鹿だからかな

なんかの閉じタグ忘れてるとか、
. , : ; あたりの記述間違いな気がしないでもない。

このスレが壊れてたので

広告削除スクリプト誤爆対応スレッド 1＠2ch運用情報
http://qb.2ch.net/test/read.cgi/operate/1061887706/l50

ここで復旧頼んできたよ

復旧ｱｹﾞ

>>361
お疲れ。
ありがとう。
かちゅ〜しゃだと、ログを再取得しないとダメなようですね。

よいですか？私のビジネスには、インターネットの利点を
最大限使い！最大限利用し！最大限使います！
クーポン屋はクーポンを発行する会社！
そこでビジネスパートナーを募集している！誰でも出来るビジネス。
http://www.c-gmf.com/farewell/box09.htm

ふとどうでも良いことかもしれませんが疑問に思いました。

埋め込みと外部スタイルシート両方を使用していて
外部スタイルシートを指定するのは埋め込みでimportを使うべきでしょうか。
<LINK>を使うべきでしょうか。

どうでも良い事かもしれませんがお答えいただけますか？

>>365
どうでも良い事です

>>365
カスケード処理の仕様でも読んで何か見出せ。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#cascade

MacOS9.2 IE5.1.7 NN7.0です。

セル内にテキストと画像を入れたいのですが、
テキストはパディング10px・画像はパディング0pxでボーダーにきっちり付けたいのです。

┌─────────┐
│　　　　　　　　　│　
│　あああ　　　　　│
│　　　　　┌───┤
│　　　　　│(画像) │　　　　　
└─────┴───┘

スタイルシートで　td {padding: 10px 0px 0px 10px;}　と指定したのですが、
右がどうも10px程開いてしまいます。ちなみに左側の指定を0pxに変えると右は引っ付くんですが、
左の隙間もなくなってしまいます。
NNで確認したところ、td {padding: 10px 0px 0px 10px;}　で理想通りになっていました。
IE5で見るとやはり隙間が・・・。
何かミスがあるんでしょうか？　すみません、アドバイスお願いします(´･ω･｀)

>>368
http://aa2.2ch.net/test/read.cgi/aasaloon/1062067026/

>>368
td{
padding: 10px 0px 0px 10px;
}

<table>
<tbody>
<tr>
<td>あいうえおかきくけこ<br><br><img src="abcd.jpg" border="0"></td>
</tr>
</tbody>
</table>

IE6.0だが、これでなんら問題なく表示できたぞ。
そんなことはないとおもうが、ソースに半角スペースとか混じってないだろうな。

>370
<style type="text/css">
<!--
table {
table-layout: auto; width: 500px;
}
td {
padding: 10px 0px 0px 10px; border: solid 5px #000000;
}
-->
</style>

<table>
<tbody>
<tr>
<td>あいうえおかきくけこさしすけそたちつてと<br><br><div align="right"><img src="abcd.gif"></div></td>
</tr>
</tbody>
</table>

半角スペースが入ってる、っていうのは「余分に」ってことでしょうか・・・。ソースはこんな感じなのですが。
私のブラウザではやはり>368の>右がどうも10px程開いて
・・・という表示でした。
ブラウザに問題があるということも考えられるんでしょうか？(´･ω･)もう少し勉強してみます、ありがとうございます。


>369
ｽﾐﾏｾﾝ(´ρ｀)次からは練習してから来ます。

>>371
画像をセルの背景にするのはだめなの？

直ったようなので・・・>353です。
元々考えてたのは
ttp://bbsac.s28.xrea.com/test_2ch/
こんな感じだったんですが、よく考えたらabsoluteじゃなくrelativeでも大丈夫（むしろ無くて良い）事に気付きました。
・・・て事で解決です。
一応ブラウザの下にぴったり付く・・・が分かるようにサンプル貼っときます。

>>368
div とか img に margin 指定したりしてない？

>372
　 ■□　
┌─┐ 　　　　　
└─┘

背景じゃなくて出来れば右下固定にしたいのです(´･ω･)
↑みたいにセルがみっつあって、そのうちの"□"の中に入れたいと思ってます。
提案ありがとうございます、もう少し徘徊してきます。

>375
このページにはmargin使ってないです。ﾅﾝﾃﾞﾀﾞﾛ〜(つД｀;)

ごめん。スレ違いだけど、書かせて。

http://www.a103.net/komabasai/53/index.html
東大の学園祭のサイトなんだけど、
一番下にあるW3Cのcssのロゴがあるのに、style=""で修飾してるし、text-align:centerでセンタリングするし、
なんか東大生もバカになったなとか思ってしまったよ。
とりあえずCSS使えてないんだからロゴ外せと。

スレ違いsage

<FONT>で装飾して、<CENTER>でセンタリング
の間違いじゃないの？（一番下の方）

＞style=""で修飾してるし、text-align:centerで・・・・
普通っしょ？

>>377
言いたいことはわかるけど、的外れな指摘だな。
それを言うならh要素とか他に突っ込むところは盛りだくさんだ。
チェックさえ通ればOK的な発想だな、とは思うが、いちいちここでとやかく言うほどのことでもない。

参考までにお尋ねしたいのですが、
皆様がCSSを製作される際にかかる時間はどのくらいですか？
この質問の「製作」は構想からテストまでを指します。
よろしくお願いします

＞このホームページは、Internet Explorer 6.0を基に作成しています。
こんなこと書く時点でお察しくださいだろ。

>>380
一気に作り上げるわけでもないからなあ。
基礎的なものをちょこちょこっと作って、必要に応じて追加したり、気分で変更してみたり。

>>346
大変ありがとうございました。
ちゃんとセンターリングできました。
お礼が遅れてしまい申し訳ないです。
347とかは僕ではありません。あしからず・・

NN4ってまだ落とせる所あるかい？

>>384
その質問ってあちこちで定期的に見かけるな・・・
日本語版なら
↓
ftp://ftp.netscape.com/pub/communicator/japanese/4.78/windows/windows95_or_nt/complete_install/
から。

ｻﾝｸｽｺ

ちょっとお聞きしたいのですが、

IE6.0の修正プログラムをインストールしたら、それまで表示されていた『スクロールバーの色替』が
表示されず普通のスクロールバーになってしまった

という方はいらっしゃいませんか？
つい最近までは表示されていたので書き方が間違っているとは思えないのですが、
もし違っている所があればご指摘お願いします。ちゃんと<head></head>の中に入れてます。
body {scrollbar-3dlight-color:#6666ff;
scrollbar-arrow-color:#6666ff;
scrollbar-base-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#000000;
background-color:#000000;}

>>387
セレクタを body から html に変えてみるとか、これ基本。

>>387
他のサイトのはどうなのかなぁと。
自分が作成してるhtmlだけの症状なら構文を疑うとか。
とりあえず、IE6で全パッチあたってるけど、普通に色変わるよ。
<style type="text/css">
<!--
body {scrollbar-3dlight-color:#6666ff;
scrollbar-arrow-color:#6666ff;
scrollbar-base-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#000000;
}
-->
</style>

!DOCTYPEの宣言でTransitionalが抜けたとか。

>>388
セレクタをhtmlにしてみたらあっさり色替え出来ました。ありがとうございます。
いつも市販のcss辞典を見ながら構文打っているのですが、htmlにする事は知りませんでした。
基本…なんですか(汗)勉強不足で申し訳ありませんでした。
>>389
レスありがとうございます。他のサイトは今まで通り表示されてました。
自サイトは最近ちょっと放置してたのですが、気が付いたら表示されなくなっておりました。
当然ソースも触れてないので構文ミスも考えにくく、ひょっとしてブラウザのせいかなと…
こちらで紹介されている参考サイトでじっくり勉強してきます。

２ちゃんに書き込みするのは初めてで緊張しましたが、助かりました。
本当にありがとうございました。

（ぉ

>>390
こんな事をいうのもなんなんだが、それなりにわかってきているなら市販のリファレンスより仕様書みたほうがいいぞ。

hrに画像を適応させるのっていいの？

<!-- ここから -->

http://www.plone.org/ みたいに
アクティブなタブと横棒が繋がるようにするには
どうすればいいですか？

ちょっと考えたら単純な事だった

漏れは罠にはめられたのか

<!-- 2ch評価中 -->

すみません質問です。
emなどで大きさを指定するとき、親要素に基準となるフォントサイズの指定がなされていない場合は、
閲覧してるブラウザが設定した標準フォントサイズが基準になるという事でしょうか？

>>399
親要素のﾌｫﾝﾄｻｲｽﾞが基準。
親要素のﾌｫﾝﾄｻｲｽﾞは親要素の親要素のﾌｫﾝﾄｻｲｽﾞが基準。
親要素の親要素のﾌｫﾝﾄｻｲｽﾞは（略

>399
基本はとにかく親要素を継承。
最も上位の要素（HTML要素とか）にはブラウザが適当にフォントサイズを決めてるはず。
まあ要するに、それであってるよ。

>最も上位の要素（HTML要素とか）にはブラウザが適当にフォントサイズを決めてるはず。
基本フォントサイズはユーザが観易い大きさに設定するのが普通。
一般に UA は、そのフォントサイズ設定に基いて初期値を決定するのが普通。

>>402
なに頓珍漢なこと言ってんの？
今言ってんのは、「継承するかどうか」だｳﾞｧｰｶ

>>403
>木構造のルート部は親要素を持たないので継承値を用いることができない。
>その様な場合は必要ならば初期値を用いる。
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cascade.html#specified-value
ということを 401-402 は言っているのだ。ｳﾞｧｰｶ。

まぁ、フォントサイズに関してはスレ違いのようだけど・・・・
一般的なブラウザでの観覧を見据えた上ではよほどの上限がないかぎりフォントサイズは
問題ない。それを勘違いしている人達がかなりいるみたいだ

主要なブラウザ（WinならIE、ネスケ、オペラあたり）を自分で入手して
それぞれで確認してみる、という発想は生まれてこないものだろうか。

>>405
>一般的なブラウザでの観覧を見据えた
ブラウザ云々より画面解像度とモニタの大きさの違いが重要だろう。
ユーザの視力も絡んでくる。画面から少し離れて閲覧するこもあるだろう。
目が疲れてるときは、通常より文字を大きくしたいときもあるだろう。

>よほどの上限がないかぎり
>フォントサイズは問題ない
「何の上限」なのかわからん。「何が問題ない」のかわからん。
自分だけがわかってるだけで、他人が読んでもまったく理解できん。

すみません。事情で返事遅れてしまって。

質問意図としては、全部のフォントサイズを相対値で指定したときに、
css内において絶対値でのフォントサイズ指定がない場合、
どういう作動になるのかが知りたかったという事です。
来た人がある程度自分に都合の良い文字サイズ（ブラウザでの文字サイズ変更）で
使ってもらえるような事がしたかったのです。
IE6、NN7で確認してたのですが、両ブラウザでフォントサイズがマチマチになるので、
バグなのか、仕様なのかがわからなかったので質問させていただきました。
（作動の違いは結局、自分の構文ミスでした）

>>401-403さん。
他、皆様ありがとうございました。

最近CSSの外部参照をはじめようとしています。
●●.cssのファイルを作り、アップしようとしたら、infoseekの無料HPではアップできないのでしょうか？
どうしても外部参照にしたいので、代替案か、解決法をおながいします。

何をしてどうなったのかさっぱり読み取れませんが?

.cssがUPできない有名サーバーなんてきいたことねーな

>409
まず最初に、状況を正確に説明できるように
日本語とインターネット関連の用語について勉強してください。

<link rel="stylesheet" href=" cssファイルのURIか相対パス " type="text/css">
これ入れてるんだろうな？

cssだけをinfoのｻｰﾊﾞに置いた場合は多分読み込めない。

>>413
>>409は「アップできないのでしょうか？」から分かるように、
『アップロードが出来ないから質問している』んだ。

>>415
いいことを教えてやろう。
http://cssbug.at.infoseek.co.jp/

>>416
そこは知ってるが、それがどうかしたのか？

>ALL　メタタグにキチンと記述してから、相対URIを記述しました。
それでダメで、アップロードしてない事実にきづいて、
アップロードさせようとしたらinfoseekのアップロード認識完了マークみたいなものが、
？マーク（不明なファイル扱い）になってしまって、、、ギブアップ。
というわけです。

>>418
infoseekで聞け。

拡張子をつけないファイルにしてみろ。
誤解してる奴が多いが、HTMLもCSSも拡張子はこれでなければならないという既定はない。

そう言えば昔、

「MS Wordで書いた文章を MS Excel で読み込もうと思って
.docを.xlsに変えたけどダメだった。なんで？」って言ってる上司がいた

と聞いたことがある。

>>420
それで果たしてサーバは「text/css」として送信するのかな（藁

>>422
ぷぷぷ。.htaccessを知らないの？

>>423
infoseekのサービスで .htaccess なんて使えねぇだろｳﾞｧｰｶ（藁

>>424
ぷぷぷ、移転したらいいんだろ。バカが。

初めっから拡張子云々じゃなく移転しろと言っときゃいいのにな

解り易い本末転倒です

Link要素でtext/cssを定義してるから平気だろ。














たぶん。

>>428
あのね本来は HTTPヘッダの情報が最優先されるの。
HTML での指定はあくまで補助的な指定に過ぎないなわけよ。
適当にファイル内容から推測する糞ブラウザもあるけどな。

http://www.mozilla.gr.jp/standards/webtips0016.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/conform.html#text-css

infoseek iswebの無料HPなら大丈夫のはずなんだけど…
ブラウザから送信するのでだめだったら、
FTP送信ができるソフトでやってみたらどう？＞418

FTPじゃないのか・・・

あ、今日本屋で調べたら、idで指定するの忘れてました。。。
しかもinfoseekの表示で、"不明なファイル"じゃなくて、"その他のファイル"扱いでした。
すんません。今からidを記述します。。。m(_ _)m

度々すみません。やっぱり行き詰まりました。やってみた手順を公開します。何かミスがあったら修正おながいします
メモ帳で、名前を付けて保存→全ての文書→define.css→define.cssのソースはh1 {
background-color: #cfc;
color: rgb(0,128,0)
}

p { color: blue }
です。そして●●.shtmlというファイルに、以下を記述。
<html lang="ja"><head>
<title>スタイルシートってさ....</title><meta http-equiv="content-style-type" content="text/css"><link rel="stylesheet" href="http://●●.hp.infoseek.co.jp/define.css" type="text/css">
</head><body>
<h1>ここに内容</h1><p>を書きます</p><body></html>
以上。
なにかミスがありましたでしょうか？

激しくスレ違いだけど、
cssファイルをバイナリでうぷしているに37.2ｽｰﾊﾟｰ仁君。

以前、infoに上げたファイルが削除できなくなった。
ﾉｰﾄﾝのせいかと思い切ったがﾀﾞﾒだった。
ｱｶごと捨てた。

>>433
ローカルで作動してるなら揚げミスっしょ。
自分の揚げたcssは見られるの？

>>436サマ　infoseekのとこに、ファイルのアップロードってボタンがあって、そこからdefine.cssをうpしました。
そのうp完了画面からはその他のファイル扱いで、define.cssのソースが見られませんです。

>>437
そうじゃなく、ブラウザのアドレス欄にcssのアドレス（http://●●.hp.infoseek.co.jp/define.css）を入れて移動すると揚げたcssは見られる？
って事。
見られなきゃ揚げミスだから構文とかは関係ないっしょ？。
とりあえず、自分が直面してる問題を整理しれ。

で、ｆｆｆｔｐでも使ってFTPでUPしれ。

>>437
Webサイト制作初心者用スレ vol.66
http://pc2.2ch.net/test/read.cgi/hp/1061898335/

こっちのほうが良いと思うよん。

やったところ、ファイルのダウンロードが勝手に始まり、<!--
P.red { color: red; }
P.green { color: green; }
-->が出現。。。↓↓
見事にコメントアウトしてました。。。
コメントやっちゃいけないんですよね？外部ファイルは。
コメントを消して、簡単なスタイルシートを記述し、うpしてみてら出来ました！！
ホント、ご迷惑をおかけしましたm(_ _)m

どうでもいいけど、
rgb(0,128,0)
この記述使ってる人、初めて見た気がする。

何でcssファイルへのリンクにhttp://〜なのかわからん

さらにどうでもいいけど、CSSのコメントは/* 〜 */なんじゃ。
<!-- -->も使えるもんなのかね。

>>441 rgb(0,128,0)は、参考書をマネしたからっす

>>443 その通りっす。まったく全然別物なんっすよね。。。

>>442
なんで？普通じゃないか？

>>443
<style><!-- hogehoge --></style>とやっていたので
<!---->も含めちゃったんだろうね。JavaScriptとかで経験済みだけど（藁

>>442
それはhttpがhyper-text-transfer-protcolなのに
ハイパーテキストではないCSSを転送している事に対する疑問か?

むしろftp

Fuck'in Transfer Protocol

Hentai Transfer Tissue Paper

　　_,,..i'"':,
　 |＼`､:　i'､
　 ＼ ＼`_',..-i
　　　＼|_,...-┘

>>434
＞cssファイルをバイナリでうぷしているに37.2ｽｰﾊﾟｰ仁君。
は？勘違い君？
ブラウザは復帰コード・改行コードをホワイトスペースとして扱います。

>>443
CSSのコメントは/*〜*/
<!-- 〜 -->はSGMLのコメント。
<style><!-- 〜 --></style>はCSSとしてコメントアウトしてるのではなくて、SGMLとしてコメントアウトしてるだけ。
CSSをコメントアウトしたければ<style><!-- /*〜*/ --></style>

>>451
type属性を付け忘れるなよ、必須だぞ。

/*〜*/

ちょっと可愛い

/*^_^*/

/*^^*/これからも僕を応援してくださいね

>>452 DOCTYPEが何か分からないのに？
>>453-454 ｶﾜ（・∀・）ｲｲ
>>455 ｶﾜ（・Ａ・）ｲｸﾅｲ

すみません。質問させてください。
幅300pxのブロック要素ごと右寄せをmargin-right:0px;で実現させる場合、

HTMLソース↓
<div class="box1">
<div class="box2">
ここを右寄せにしたいです。
</div>
</div>

外部スタイルシート↓
.box1{margin-right:0px;}
.box2{width: 300px;}

という記述をしてみたのですが、右寄せになりません。
どうしたらよいのでしょうか？（色々やってみましたが、お手上げです・・・）
※周りの部分との兼ね合いで他の右寄せ方法でなくmarginを使って右寄せしたいと思ってます。

よろしくお願いします。

>>457
まぁあれだ、>>1からのリンクは全部読んだのかと。

全部は読んでないですが、段組のリンクなどは一通り目を通したのですが、どうも理解できないんです。
ｌｅｆｔをａｕｔｏにしてみたり、一つのｃｌａｓｓにまとめてdivを１つにしたり色々試したのですが、どうも希望の配置にならないのです。

.box1{
margin-right:0px;
}

.box2{
width: 300px;
}

>>460
すみません。そのままコピペしても右寄せにはならないです。

>>5の中央寄せの記事読んでくればわかると思われ。

div.box1{text-align:right}
div.box2{width:300px;margin-left:auto;margin-right:0px;}

<div class="box1"><div class="box2">ここ</div></div>
NC4.78/NN6.1/IE6.0/Opera6.06で右寄せになった

多分もう少し綺麗な方法があるとは思うけど
それはわかる人に答えてもらえるとありがたいなぁ。。

>>463
それtext-alignやん。
>>457
＞他の右寄せ方法でなくmarginを使って右寄せしたい

>445-446
相対パスで指定できないのか? と思ったので。

>>465
かならずしもcssが同じサーバーにあるとは限らないからねえ

ご存知のかたおられましたら教えてください。
Mac（OS9）Netscape7
　#一応OS9の最新一般環境だとおもいます。
では、指定なし、フォントサイズ100％、あるいはmediumと指定した場合、
表示フォントが汚くなってしまいます。（少なくとも私のテストマシンでは、カスいけリンク集のサイトもおかしく表示されます。）
フォントファミリーを指定しても効果がなく、困っております。
どこに問題があるのでしょうか？あるいは、どのようにしたら回避できますでしょうか？
IEが5でストップしてる関係上、無視しづらいのです。

すみません。font-sizeの話です。
また、OSXではこの点どうなのでしょう？

>>468
osの問題はosの板で

>>468
ブラウザの設定で、お好みのフォントサイズを設定して下さい
つか、氏ねや
漏れもﾏｶｰ

最近スタイルシートの勉強を始めてフレームを使っているっぽいサイトを作ろうと思ったのですが

body{margin:0;height:100%;width:100%;overflow:hidden;}
div.menu{width:18%;height:100%;overflow:auto;}
div.content{position:absolute;top:0px;left:18.1%;width:81.9%;height:100%;overflow:auto;}

<body>
<div class="menu">
メニュー
</div>
<div class="content">
内容
</div>
</body>

とすると、何故か右にスクロールバーが2本出てしまいます
内容が少ない場合は大丈夫っぽいんですが。
ブラウザはIE6で、OSはwin98seです。
IEのみのタグ<body scroll="no">を使うことも考えたんですが、
それ以外の解決方法はないものでしょうか？
テンプレのサイトも見たんですが、解決しませんでした。

>>471
body{ over-flow:auto}

テンプレの
ttp://www.fromdfj.net/html/overflow.html
最後まで読んでねえな

>>472
いや、ちゃんと試しました。
でもダメなんです。一応ネスケ7.1だと出ないみたいなので、
もう<body scroll="no">しかないのかも・・・。

>>471 >>473
俺もそれになったよ。IE6.0だけど。
どーしようもなかったんで結局Framsetにした。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>質問</TITLE>
<STYLE type="text/css">
<!--
a{
color:#0733ff;
font-weight : normal;
text-decoration:none;}
a:hover{
color: blue;
background-color: #c1d8ea;
font-weight : normal;}
div{
background-image : url(list.gif);
background-repeat : no-repeat;
padding: 6px;
margin: 7px;}
--></STYLE>
</HEAD>
<BODY background="aaa.gif">
<P><IMG src="situmon.gif" width="246" height="78" border="0" alt="質問 "></P><br>
<p style="border-width: 5px; border-color: green; border-style: solid; background-color: #ccffcc; color: #0000cc; padding: 0.5em;">
<div>　<A href="a.htm" target="_self">あ</A></div>
<div>　<A href="i.htm" target="_self">い</A></div>
<div>　<A href="u.htm" target="_self">う</A></div>
<div>　<A href="e.htm" target="_self">え</A></div>
</p></BODY></HTML>

このようなhtmlで
<div>を枠で括ろうとしたのですが、
どうしても上手くいきません（囲めません）
何故でしょうか？
ちなみに使用ソフトはHPB7です、分る方ご教授ください。

何でP要素の中にDIV要素がきているのか小一時間問い詰めたい。

はっ！
そうか、基本がなってなかった。
ありがとうございました。

body{
background-image: url(aaa.gif);}
a{
color:#0733ff;
font-weight : normal;
text-decoration:none;}
a:hover{
color: blue;
background-color: #c1d8ea;
font-weight : normal;}
div{
background-image : url(list.gif);
background-repeat : no-repeat;
padding: 6px;
margin: 7px;}

<body>
<p><img src="situmon.gif" width="246" height="78" border="0" alt="質問 "></p><br>
<div style="border-width: 5px; border-color: green; border-style: solid; background-color: #ccffcc; color: #0000cc; padding: 0.5em;">
<p>　<a href="a.htm" target="_self">あ</a></p>
<p>　<a href="i.htm" target="_self">い</a></p>
<p>　<a href="u.htm" target="_self">う</a></p>
<p>　<a href="e.htm" target="_self">え</a></p>
</div>
</body>

これでお望みどおりにいくかと。
どうでもいいがbackground属性は非推奨なんだから、せっかくCSSの知識があるならCSSでやれ。

わざわざ、htmlまで・・。
ありがとうございました！御手数おかけしました。　

>>471-474
あのなぁ……
IE6には互換モードと標準準拠モードがある（ＦＡＱ）。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4
標準モードではbodyではなくhtmlに指定しないと、
scrollbar関係のプロパティーは効きません。
過去スレッドも検索してごらん。

みなさんフォントはピクセルで指定しますか？相対で指定しますか？

>>481
できました！ありがとうございます。
調べ方が甘かったようで申し訳ありません・・・。

ネスケでマウススクロールが効かないけどまあこれでいいや。

>>482
あのな。
ピクセルは相対単位やど。

他の単位な
mm（ミリメートル）、cm（センチメートル）、in（インチ）、pt（ポイント）、pc（パイカ）は絶対単位
em（大文字「M」のサイズ）、ex（小文字「x」のサイズ）、%（パーセント）は相対単位

まあ、それはおいといてやな、
相対単位にしとくとええんちゃうやろか

>>484
すいません。説明不足でしたね
おっしゃられてるのは
http://members.at.infoseek.co.jp/dhtml_s/web_css/css_unit.htm
だと思うのですが、

聞きたいのは
http://www.kintapc.jp/css/font-size.html
のように、x-smallとかを使ってサイズ指定するのか、10pxのような
感じで指定するのかを聞きたかったので。

WINのIEだとPX指定でもサイズ変更が聞かなくなるので、そのへん
ミナサンどうしてるのか聞きたかったんです。

でもピクセルは非推奨

単位ではなく、サイズでの絶対か相対かという意味です。

ワタシ サイズシテイ シナイネー

フォントサイズについて考えよう
http://pc2.2ch.net/test/read.cgi/hp/1042293757/381-

うちはパーセント

個人的には0.8em、1.5emのようにする。
閲覧者がサイズ変えれるように。

あまりにくだらなくて涙が・・・

>>492　むしろ「父ちゃん情けなくて涙出てくらぁ！」（東野英心）

はっちゃけた！

スレあったんですか…失礼しました（恥

>>491
%でも変わるべ？

ptでも変わるよ

>>497
IEだとかわらねえよ

>>496
ように、に%も含むつもりだった。
押し付けなけりゃいいんじゃねーの？ってくらいの意。

>>498
つまるところ、emと%がいい、ってことかな。

どこがつまったの？

早い話、指定すんなってことだ

>>501
日本語の勉強をしなおしてください。

>>503
つまんない

俺の肛門はつまってるぞ

>>505
それか！

相対的指定なら、IEでだってなんだって閲覧者側がサイズを変えれるだろう
相対的ってことで、pxは除いておく

ul{
display: inline;
margin:0px;
}

<ul>
<li>
hogehoge
<li>
hagehage
</ul>

↑で、IE6だとulが勝手に付けるインデントが消せるのですが、
NN7ではインデントが消せません。
NN7でインデント消すにはどうしたらよいでしょうか？

>>508
padding

>>509さん
ありがとうございました。
ul{
display: inline;
margin:0px;
padding0px;
}
でIE6、NN7の双方で望みの結果に出来ました。
（気づかなかった自分に嫌悪・・・）

訂正
ul{
display: inline;
margin: 0px;
padding: 0px;
}

質問させてください。

<h1>タイトル</h1>
<p>なかみ…</p>

こんな感じの書き方をしてるのですが、
h1要素を<p>〜</p>よりも下に(出来れば画面の下の端)表示させる方法は無いでしょうか？

>>512
いみがわからん。
何のための見出しだ？

>>513
h1 {
border-bottom: solid 1px;
font-style: italic;
text-ailgn: right;
}
↑こんな風にすればありえそうじゃない？

>>512
position: absolute;
bottom: 0;
right: 0;
とか。

>>512
ようするに、下部にタイトルを入れたいと。
下部にも書け、としか言えんな。

>>514
恐らく見当違い

>>516は一番わかっていない香具師
見栄えのためにHTMLを書き換えるのは違うでしょ

>>517
お前の理想論は立派だと思います

>>517
そもそも見栄えのタメにもクソも、見出しのh1要素を最下部にもっていくって事自体がｷ○ｶﾞｲじみた発想なんだけどな。

>>516
＞下部にも書け、
こんな発想ありえない。勉強し直し。

>>519
＞見出しのh1要素を最下部にもっていくって事自体がｷ○ｶﾞｲじみた発想
当たり前。

H1要素を最下部へ持って行くのではなく、H1要素の「表示」を最下部にしたいってことだろ。
>>512をもう一回ちゃんと嫁。

>>520
H1要素の「表示」を最下部にしたい事自体がｷ○ｶﾞｲじみた発想

最近strictに目覚めたのか？

>>520
> H1要素を最下部へ持って行くのではなく、H1要素の「表示」を最下部にしたいってことだろ。
仕様書ではh1が下部に来ても問題ないんだよ。受け売りで調子付くな

>>522
んなもん知っとるわアホ

>>521
そうかも知れないです。

>>520で
＞＞下部にも書け、
＞こんな発想ありえない。勉強し直し。
と書いたが誤解されるといけないので補足。
異なるh1要素がHTMLの最上部と最下部に現れるのは問題ない。

＞下部にも書け、
と書いたが誤解されるといけないので補足。
下部にh1要素を置け、という意味ではなくて、下部にアドレス要素などでタイトルを記述するとどうか、という意味。

>>523
>>522=>>521なわけだが

>>525
それならありかもしれんが、元の質問と意味が変わってくるのでは？
>>512がそれでいいならそれでいいんだが。
俺の勝手な妄想では、ﾌﾟﾚｾﾞﾝでたまに見かける
「最上部に節、最下部に章」にしたいのかと思ってるんだが。

>>526
それがどうかしたの？

どうも。レスがついたのに放置しててすみません。

>>527
そんな感じです。
ようするに、h1要素はbody要素の中で使われる他の要素よりも先に(少なくても最初の方に)
書くべきだけど、レイアウトとしては出来れば一番下に表示させたい訳です。
キチガイじみた発想なんでしょうか？

>>527
>>525=>>526なわけだが

元々、俺の誤読が原因だよ。ごめんな。
「章を下部に『も』表示したい」だと思ったんだよ。

というか俺と君しかいないのかな。
最初に質問者もいないみたいだし。

>>528
んー、いたんだね。
悪いとは言い切らないけど、優しくないとは思う。
そうするなら、上にも表示したほうがいいんじゃない？

理想論ってなに？はぁ？って思った（w
質問者とは関係ないところで盛り上がってるわけだが

昔、何かのTV番組で、番組冒頭に出てくるはずの
サブタイトルがなかなか出てこなくて、「今日は第何話だっけか？」
と思っていたところ、番組中盤のCMに入る直前、突然
サブタイトルが出てきたことがあった。



ま、そういうこった。

あ、降臨してた。別に気違いじみてもないと思うが？で、>>515はどうよ？

二箇所に表示する場合、ページ下部に表示させる方はどの要素を使えばいいんでしょうか？
h1で同じことを二回書くのは明らかに変ですし。
adress要素って見出しを書くために使って良いモンなんでしょうか？
私はadress要素にメールアドレスと作成日時を書いてるんですが。

h1が2つ存在するならともかくtitleがあればｲｲﾝｼﾞｬﾈｰﾉ
視覚的にね

なんだか二つとも同じ事を表示させるのが変な気もするんですが、
それで逝きます。ありがとうございました。

>>531
> 理想論ってなに？はぁ？って思った（w
＞見栄えのためにHTMLを書き換えるのは違うでしょ
は、現行では理想論。
divにぶっこんだりしてるのは肯定されてる現状だからな。

>>534
アドレス要素は著者の情報を書くところだから、
ページタイトルを含めてもおかしくない。

>>537
divを使い適当なid属性値を与えることはHTML的にも有意義だと思うが？

>>528（>>530と>>532も同じこと言ってるな）
俺は（さっきから言ってるけども）アリだと思う。
ただ俺がそうするなら常にページ下部に見えるように表示させとくだろうな。
スクロールさせないと見えないなら見出しの意味が薄れると思うから。これなら優しい（？）よな？

>>529
ところで「章を下部に『も』表示したい」時はどうするのがいいんだろう。

>>539 >>537
まあアレだな。グレーゾーンってやつだな。
人によっては滅茶苦茶なDIVを使ったりもするからな。諸刃の剣ってとこだろうか。

>>538
アドレス要素はちょっと曖昧というか範囲が広いよなあ。結構悩む。

>>540
文庫の巻末みたいな感じに、
「何年何月何日」に「誰」が「何という著作物（ページタイトル）」を作ったか、ってことを書けばいいと思うので、
・制作日
・名前（メールアドレスとかも）
・タイトル（入れなくてもよいと思う）
を含んでいいんじゃないかな。アドレス要素は。

てか、cssのレンダリングを語る上ではhtmlの理解が絶対出てくるよなあ。

結論としては、質問者が土日に質問したのが悪かったということだ。

うん　そうだね　キミみたいな低能くんが出てくるからね

■CYBER@GARDEN　http://www.cybergarden.net/

￥HTML辞典　　　　　　一覧表示で見やすいHTML辞典。　　　　　HTML1〜HTML4.01 を完全カバー。　　　http://www.cybergarden.net/dichtml/index.html
￥スタイルシート辞典　一覧表示で見やすいスタイルシート辞典。　CSS 1〜CSS 2 を完全カバー。　　　　　　http://www.cybergarden.net/diccss/index.html

h1{
position : fixed ;
bottom : 0 ;
right : 0 ;
}

コレで良いんじゃないか？　IE以外は。

position:fixedは（ｒｙ

css:
body{margin:0px;height:100%;}
.base{
border-left: thin solid #000000;
border-right: thin solid #000000;
margin: 0% 10%;
height: 100%;
}
.head{
border-top: thin solid #000000;
border-bottom: thin solid #000000;
-->
</style>
html:
<body>
<div class="base">
<div class="head">head</div>
<div class="main">mainmainmainmainmainmainmainmain</div>
</div>
</body>
こんな感じの縦に伸びたデザインにしたいんですが、
IE6でmainがbaseからはみ出すとheadのボーダーが途中で切れてしまいます。
切れないようにするにはどうすればいいでしょうか？

>>547
（　´,_ゝ｀）自己流か？

html:

なんだこれ

氏ね

>>536
h1.first{display:none;}
h1.end{ 〜}
は？




>>547
mainにwidthを指定する。

>549
欲嫁

>547
最後に"}"が足りてないぞ。

ガイシュツかもしれませんが
スタイルシートでhrの太さを一括で設定するには
どうすればいいんですか？

ガイシュツかもしれません

>>553
ヒントをやろう。hrは罫線の扱いだ。罫線を操作するプロパティは・・・そう、あれだったよな。

>>548
hr{
border:10px;
}

こうですか？

便乗質問。
hr{
display:none;
}
としてあるときに、
hr.hoge{
/*ここに何を指定すれば復活しますか？ display:block;やってもN7では復活しませんでした。*/
}

>>556
borderプロパティの使い方をもう一回みなおしてこい。

>>557
display:block !important;でやってみ。

>>551
すみません。
border-size？
border-widthですか？

>>558
ｻﾝｸｽ

>>559
「hr スタイルシート　太さ」
知恵の宝庫。ググルへGO!!

すまそ
.linkstyl01{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
line-height: 15px;
font-weight: bold;
color: #FFFFFF;
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF3300;text-decoration: underline; }
a:active{text-decoration:underline;}
}
って、上のようなことやりたいんだけど、どう書けばいいの？
linkstyl01ってやつにだけ、リンクの色とか別のやつを適用したいんだよ。
上の構文は間違ってるのはわかってるんだけど、やりたいことはわかってもらえるよね？
linkstyl01ってclassにだけ
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF3300;text-decoration: underline; }
a:active{text-decoration:underline;}
を適用したいのねん。
ページ全体には、a:には別のスタイルを適用してあるのね。

> やりたいことはわかってもらえるよね？

わからん。






a.linkstyl01:link{text-decoration:none;}
a.linkstyl01:visited{text-decoration:none;}
a.linkstyl01:hover {color:#FF3300;text-decoration: underline; }
a.linkstyl01:active{text-decoration:underline;}

すんまそ、わかりにくくて・・。
.linkstyl01{ }
のlinkstyl01ってヤツの{　}の中に、以下のリンクのスタイルを埋め込みたいのね。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF3300;text-decoration: underline; }
a:active{text-decoration:underline;}
つまり、linkstyl01のスタイルにだけ、リンクの上にマウスを持っていくと
色が変わって、アンダーラインがでてきたりしたいの。
わかります？うーん、まだSCCやり始めて2日だから
うまく説明でき〜ん！(w

>>564
レスの仕方がふざけ過ぎたか…
>>563の最後の4行がやりたいことじゃないの？

>>564
適用したいところに
<a class="linkstyle01"></a>

CSSは
a:link.linkstyle01{text-decoration:none;}
a:visited.linkstyle01{text-decoration:none;}
a:hover.linkstyle01 {color:#FF3300;text-decoration: underline; }
a:active.linkstyle01{text-decoration:underline;}

じゃだめ？

.linkstyle a:link{ hogehoge... }

ではいかんの？

ええと、ページ全体には、
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF0000;text-decoration: underline; }
a:active{text-decoration:underline;}
ってやつを適用してるんですよ。

だけど、そのページの上段のメニューの部分のテキスト(class="linkstyl01")にだけ
また違う色の、hoverの色を着けたいのです。
a:link{color:#FFFFFF;text-decoration:none;}
a:visited{color:#FFFFFF;text-decoration:none;}
a:hover {color:#FF3300;text-decoration: underline; }
a:active{text-decoration:underline;}
って感じで。その場合は、初心者の発想だと
.linkstyl01{
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF3300;text-decoration: underline; }
a:active{text-decoration:underline;}
}
になるじゃないですか。だけどこれは間違ってるのはわかるんです。
そこで、ホントはどう記述すればいいのかご質問したんですが・・。
う〜ん、まだわかりにくいですね。すいません・・。

やり始めて二日だから多くは望まんが、SCCか。

>568
って言うかおめぇ、人の話聞いてるか？

>>570
ええ、>>566,567では駄目ですね。
それだと、ページ全体へのスタイルとぶつかってしまいますよね？

>>568
>>563と>>566に答えが書いてあるでしょ　自分のと見比べてみ

ていうか
>.>4のリンク先を読んで勉強してこい。

>>571
つか、HTMLを晒した方がよさげ

てゆーか、>>563と>>566に答えが書いてあるでしょ

今CSSで挑戦しているページの外部CSSの記述です。

a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover {color:#FF0000;text-decoration: underline; }
a:active{text-decoration:underline;}

.linkstyl01
a.link{text-decoration:none;}
a.visited{text-decoration:none;}
a.hover {color:#FF3300;text-decoration: underline; }
a.active{text-decoration:underline;}

と書けば、class="linkstyl01"で指定したリンクのテキストだけ
hoverは#FF3300になると言うことですね？
もしこれでうまくいかない場合は、こちらの環境が
問題であって、CSSはこれであってると言うことですね？
やってるのですが、うまくいかないのは、なんか
こちらの環境の問題のような気がしてきました。

人の話を聞けと･･･

>>576
一度氏ね　ちゃんとレス見てないだろ？

>>576
適　 用　：　<a href="http://www.2ch.net" class="linkstyl01">2ch</a>
不適用　：　<a href="http://www.2ch.net">
にしたかったら >>563 の
a.linkstyl01:link{text-decoration:none;}
a.linkstyl01:visited{text-decoration:none;}
a.linkstyl01:hover {color:#FF3300;text-decoration: underline; }
a.linkstyl01:active{text-decoration:underline;}

適　 用　：　<p class="linkstyl01"><a href="http://www.2ch.net">2ch</a></p>
不適用　：　<p><a href="http://www.2ch.net">2ch</a></p>
にしたければ >>567
.linkstyl01 a:link{text-decoration:none;}
.linkstyl01 a:visited{text-decoration:none;}
.linkstyl01 a:hover {color:#FF3300;text-decoration: underline; }
.linkstyl01 a:active{text-decoration:underline;}

まずclassがどの要素につくのかはっきりさせて
文章で説明するより、HTMLソースもはっつけてくれたほうがマシ
自分の環境のせいだと思うなら、OSやブラウザ書いて

>>577
いえ、すいません。コピペがさっきから古いテキストをコピペして間違ってただけで(w
ちゃんと
a:link.linkstyle01になってるんですよ(w
ブラウザのCSSのキャッシュがしつこく残ってるだけかもしれません。
起動し直してもう一度確認してみます。みなさんありがとうございました。
ちなみに作ってるのは、友人のMac向けのページで、
iBook借りてきて、マック版のネスケとオペラと
IEで確認しているのです。ムキー！マックわからん！！
うう、こんな馬鹿相手に、みなさん気長にありがとうございました・・(w。

（´-`）.｡oO（自分の厨っぷりをMacのせいにするなんて、Macもかわいそうだな。）

漏れマカーなんだよなぁ
ｼｮﾎﾞｰﾝ

いかにもリンクの下線消すのとフォントサイズの絶対指定の為だけにCSSを使うタイプだな

>>579
すいません、丁寧に説明してもらって。
それで書き方はわかりました。ありがとうございました。
>>579をコピペして、保存しておきます。
丁寧にありがとうございました。

私が厨でした。<font>と<a>で別々でスタイルを適用してやれば
いいということなんですね。
>>562ではそれをまとめて一緒にスタイルを適用できる方法だと思ってて、勘違いしてました・・。

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

　　(⌒⌒⌒⌒⌒⌒)
　 (_ _ _ _ _ _ _ _ _ _ _)
　　/　　　∧　 ∧ ＼
　　|　　　<・>　<・>　|
　　|　　　　 ）●（　　|　　／￣￣￣￣￣￣￣￣￣￣
　　＼　　 ┣━┫　ﾉ　＜　次いってみよう！！！
　　　 ＼＿＿＿_／　　　＼＿＿＿＿＿＿＿＿＿＿
　　　　ﾉ二ニ.'ｰ､`ゞ
　　　Ｙ´⌒` r‐-‐-‐/｀ヽ、≡＝─
　　　|; ⌒ :; |_,|_,|_,hに丿ヽ ≡＝─
　　　 | : ; : : : .| ｀~`".｀´ ´"⌒⌒)≡＝ -
　　　　| ; ; ; ; 人　　入＿ノ´~￣ ≡＝ -
　　　　 l ; ;／　　 //　／''　　≡＝─

>>580
＞ a:link.linkstyle01

じゃなくて a.linkstyle01:link だね
誰だ、間違いを教えたの

＞<font>と<a>で別々でスタイルを適用してやれば

まぁ、このセリフに全てが集約されているわけだが

>>584
> 私が厨でした。<font>と<a>で別々でスタイルを適用してやれば

あんたのことだからきっと勘違いしてる

a.linkstyl01 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;
font-weight: bold;
color: #FFFFFF;
}
a.linkstyl01:link { text-decoration: none; }
a.linkstyl01:visited{ text-decoration: none; }
a.linkstyl01:hover { color: #FF3300; text-decoration: underline; }
a.linkstyl01:active{ text-decoration: underline; }

こんな感じで

>>588
すんません、その通りだす。
最初に>>562で質問したのは、まさにそんなやり方があると思って
その書き方を質問してました(W
丁寧な>>579さんの書き方で>>563,567の言ってたことが
わかりました。
申し訳ないっす！(w
うまくいけました、すいませんでした。
次の方、終わりましたので、質問してくださ〜い！

>>562は人のソースをパクってばっかなんだろうな
まずは構文から勉強しろよ

>>579
質問者じゃないけど、参考になりました。
分かりやすかったです。
これで一部ナビゲートだけリンク色変えられます。

>>590
逆だろ。なまじっかCSSかじっていきなり先に進みたいタイプなんだろ。
そんなに何でもかんでも便利にひとくくりで定義できんよ。
スタイルシートはまだそこまで便利なものじゃ無いね。

なにをそんなに焦っているのやら

他スレで質問させていただいたのですが回答いただけなかったので、
こちらに質問させていただきます。CSSかもわからないのですが・・・；

(1)ページ内に、一つだけアイフレーム（main）を置いたページを作りました。
アイフレームを置いたメインページ（menu）に、画像を背景として固定しました。
その背景をmainで透過して表示させたいのですが、どうすれば良いのでしょうか？
色んなHTML関連のサイトさんを回ったところ、
100％表示のテーブルを置いてそれぞれにアイフレームを置き、
<BODY〜内にstyle="background-color:transparent;"を置くと透過される、
というのは試してみてわかったのですが、ページいっぱいに表示されるテーブルも、
アイフレームも2つなるべく使いたくないんです。
↑以外の方法で、最初に書いたように背景をアイフレーム内に反映させる方法ありましたら、
教えてくださいm(__)m

(2)またテーブル内にアイフレーム2つを並べても良いのですが、
周りに隙間が開いてしまうのが嫌で…
それと、メニューとメインページを分けたいので、上下2つのアイフレーム、ということになりますが、横幅は100％で良いのですが、縦幅の指定のし方がどうにもわかりません。
縦幅も％指定にしてみても、上手く表示されません。
あるHTMLサイトさんからのソース（以下）を利用して、
（横幅100％テーブル内にアイフレーム2つ）のページを作りました。↓↓↓

<HTML>
<head>
<style type="text/css">
<!--
body { background-attachment: fixed;
background-image: url(画像.gif);
background-repeat: no-repeat;
background-position: right bottom;
overflow: hidden;}
span.1 {font-size: 9px; }
A:HOVER{background-color : #98F5FF;}--></STYLE>
<title>　『　タ　イ　ト　ル　』　</title>
</head>
<BODY style="background-color:transparent;">
<TABLE width="100%" height="100%">
<TBODY>
<TR>
<TD><IFRAME src="1（main）.html" border="0px" style="border:none;" frameborder="0" width="100%" height="90%" scrolling="AUTO" name="main" allowTransparency="true"></IFRAME></TD>
</TR>
<TR>
<TD><IFRAME src="2（menu）.html" border="0px" style="border:none;" frameborder="0" width="100%" height="10%" scrolling="AUTO" name="menu" allowTransparency="true"></IFRAME></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>


これを、テーブルの横幅は画面いっぱいに（余白が出ないように）、
縦幅は↑のソースのようなかんじに1:9の割合で表示させたいのですが…
混乱した文章でわかりづらいかと思いますが、宜しくお願いします。

>>593
もうすぐ殺されるんだろ。
厨っぷりが災いして。

今日は大漁だな

>>594-595
ＣＳＳでは無理です。
あと、よそのソースをコピーするのはいいけれど、理解してから使ってください。
インライン・スタイルシートで指定するのは感心しません。
allowTransparencyなんて属性は独自拡張です。他のブラウザには通用しません。

>>594
まず、アイフレームとかいう脳内用語を使うのはやめろよ

>>598
有難う御座います。
もう一つ宜しかったでしょうか？；
では、フレームで上下2つに分けたページに、同じ背景
（固定したもの）で、例えば右下に画像を固定して、上下のフレームで
それぞれの続きの画像を表示させるには、どうすれば良いのでしょうか？
お願いしますm(__)m

>>594
マルチするなら他スレの質問を取り消してからにしろよ
最低限のマナーだろ

>>599
失礼致しました、インラインフレームですね。
HTML配布サイト様にてアイフレームとおっしゃっていたので、
知りませんでした。申し訳御座いません。一つ勉強になりました。

>>601
失礼致しました、取り消して参りました。

>>600
background-position

>>593
2ch見てる奴らはもうちょっと、人生焦った方がいいと思うけどな。

>>600
フレームで分けたら別のHTML文書だろ。
上下でつながるわけがない。
つながってるみたいに見せかけるトリックならあるかもしれんが。

ところで「宜しかったでしょうか」ってファミレス流の妙なタ形は止しておくれ。

>>594
<iframe>だけじゃ、NNなどのブラウザで内容がまったく読めなくなるけど
そういうのは気にしないの？

NNって一口に言ふな。
NN4は糞だけど、NN6〜7なら大丈夫。

>>606
すみません、ファーストフード勤務なもので・・・
では、そのトリックというのを教えていただけませんでしょうか？

>>606
>宜しかったでしょうか

北海道弁だベ。それ。


>>609
>>606じゃないけど。
まず、続けたい画像を適当なところで２つにわける。
上のフレームのバックグラウンドをabove.gif、下の画像のバックグラウンドをbottom.gifとすると、

上のHTMLファイルに
body {
background: fixed bottom url('above.gif');
}

下のHTMLファイルに
body {
background: fixed top url('bottom.gif');
}





というか、自分で調べ、考える癖をつけないと、その内、
sudo rm -rf /
とか教わる羽目になるぞ。

>>610
有難うございます。
でもそうすると、見る人のブラウザの解像度によって左右されてしまうのではないでしょうか？

>>611

>というか、自分で調べ、考える癖をつけないと、その内、
>sudo rm -rf /
>とか教わる羽目になるぞ。

せっかく教わったんだから、いろいろためしてみろ。

ああ、何がやりたいのか今わかった。

CSSでは無理だ。


Javascriptと組み合わせたらできるけど、フレームをどういう公正にする蚊にも因るので、自力でJavascriptを勉強してから出直すんだな。

HTML配布サイト様に聞けよ(藁

>>614
HTML配布サイトってなんだよ

>>615
>>602

いいじゃないか>>594は厨なんだから。

>>617
お前、「厨なんだから」ってレスしか書き込まないよな。
なんでこのスレに常駐してるんだ？

やってないからわからんけど、擬似フレームなら可能なんじゃないの？
ま、擬似フレームじゃ意味ないのかもしんないけど。

勘違いだった。

解像度にはこだわるくせにブラウザの種類にはこだわらんのな

英数字のみ英語のフォントにしたい。
その場合、日本語のフォントを指定せずに（ユーザーが使用しているフォントにまかせる）
body{font-family:Verdana,sans-serif;}
と記述することで何か不具合はあるでしょうか？
htmlファイルには
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
〜と日本語のファイルであることを記述しています。

>>622
問題ない。

そしてｶﾞｲｼｭﾂ。
FAQいき希望。

細かい事だが
><meta http-equiv="content-type" content="text/html;charset=shift_jis">
は日本語のファイルである事を記述しているのではなく、shift_jisでエンコードされた文書である事を示しているだけ。

>>622
body[en]{font-family:Verdana,sans-serif;}

<p lang="en">本文</p>

この構文にミスはあるでしょうか？　物事についての説明文をブルーの箱囲みの中にいれたいのですが。。。
span { width: 90%; padding: 20px; border: 5px rgb(0%,0%,100%) border-style: solid; }
そして、html文書に<span>●●についての説明文〜〜〜〜</span>としたいのでつ。

>>625
> この構文にミスはあるでしょうか？

あります

border-style: を削ればok

span {
　　width: 90%;
　　padding: 20px;
　　border: 5px rgb(0%,0%,100%) solid;
}

インライン要素（一部例外除く）にwidthは指定できません
（指定しても無効というべきか）

>627
何がokですって？

箱の中に入れたいって言ってたからdisplay:blockしてると思ったら書いてないし
>>628ｽﾏｿ

DIVだろ

>インライン要素（一部例外除く）にwidthは指定できません
そんなのはショボイ方言。
IEで指定できれば、すなわち標準語である。

>>631
洗脳信者か？（w
もっと頭使えよ

ん？
かちゅ〜しゃでこの板見れないんだが、
どうなってんの？

>IEで指定できれば、すなわち標準語である。
馬鹿丸出し

hnのリンクの色を変える方法はhにクラスを指定するしかありませんか？

>>635
なんで見出しにリンクをはらないといけないんですかぁ？

見出しで説明しているところに飛ばすために。。

h1 a { color:#aabbcc; }

ではいかんの？

■■■　お勧めレンタルサーバー　■■■

【ホームページを作るならここをあたれ！】

Ａ：無難なサーバー。 お勧め!!　　
　http://www.webspeed.ne.jp/　　
　http://www.wadax.ne.jp/
　http://www.ktplan.ne.jp/
　http://www.wakwak.net/
　http://www.cpi.ad.jp/ 　
　http://solid.ad.jp/ 　

Ｂ：ある程度の障害は大目に。 　
　http://www.binboserver.com/
　http://s55.net/
　http://www.j-navi.com/
　http://domainya.net/
　http://www.j-speed.net/main/
　http://www.cyberjellyfish.com/

>>638
揚げ足とるみたいで悪いが、#aabbccは、#abcと書いた方が軽くなる。
ホント細かい事でスマン・・・

>>638
a:linkとか指定してあると負けそう。

>>641
h1 a:link { color:#abc; }
ではいかんのけ？

h1 a:link { color:#abc; }
は
h1 a:link{color:#abc}
と書いたほうが軽くなる。

さめざめ

>>643
「擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない(6.0)」
http://cssbug.at.infoseek.co.jp/detail/winie/b055.html
>擬似要素を使う使わないに限らず、セレクタと左括弧の間には
>常に空白類文字を置くように心がけてください。

>640
軽くなるって、パース早くなるの？

ま、ましゃか、3byte軽くなるってオチじゃ‥

--

>>641
それは詳細度の問題だから、
書き方注意すれば大丈夫ですよん。

聞かれる前にはっときます
ttp://anslasax.net/css-make/cascade.html

ぐぐったら先頭だった奴。

http://www.shitamachi.net/ranking/cgi05/ranklink/ranklink.cgi?id=05mercur

moperaで細々やるしかない漏れにはありがたいこってす。

dtをfloat:leftし、
ddの中のulの中のliをdisplay:inlineにしました。
こうすると、
定義リストのddの中身がdtの右に移動します。
例えば、
姓名　小林よしりん
という風に。
しかし、ddの中が多くなると、
趣味　サッカー、野球、テニス、将棋、囲碁、パソコン、ウェブサイト
作成、ビデオ鑑賞、読書、散歩
というふうになります。
これを、
趣味　サッカー、野球、テニス、将棋、囲碁、パソコン、ウェブサイト
      作成、ビデオ鑑賞、読書、散歩
とするにはどうすればいいでしょうか？

とりあえず、なんで定義リストの中にul入れ子にしてるのか意義が見出せんな

>>652
すみません。そのことについて説明をしていませんでした。
例えば趣味の説明で<dd>の中のそれぞれをリストとして記述して、
横に並べたいときのためにです。

>>651
margin指定する
最初のほうに書いてあるFAQとか過去ログ読めば丁寧な解説にぶちあたるかと

aをdisplay:blockとすると、
Netscape7の場合、aが効かなくなってしまうのだけど、
これってバグですか？
あるいは回避方法ありますか？

わざわざブロックにする理由もあるんだろうけど、

<p><a>hoge</a></p>

とかにはできんの？

>>654
marginをしてしたら、一行目も移動しますよね。
<dt>趣味</dt>
<dd>
<ul>
<li>サッカー</li><li>野球</li><li>テニス</li><li>将棋</li><li>囲碁</li>
<li>パソコン</li><li>ウェブサイト</li><li>作成</li><li>ビデオ鑑賞</li><li>読書</li><li>散歩</li>
</ul>
</dd>
というふうに、一行目と二行目は繋がっているのです。
それに、ウィンドウサイズを小さくした場合は、3行4行になりますよね。

すみません。勘違いでした。

>>657
dtのwidthと同量だけddにmargin-leftを設定するんだよ？
cf.「<dl> の整形」
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

あるお絵かき掲示板のスタイルシートを加工して
「URLを指定して壁紙を表示」「壁紙を固定」
という項目を追加したいのですが、cgi、スタイルシートにうといため、どうしたら
よいか分からなくて困っています。

<STYLE type="text/css">
<!--
A{text-decoration:none}
HR{border-top:1px;border-left:1px;border-right:1px;border-
bottom:1px;border-style:dotted;border-color:$Mesg_MainWaku}
a:hover {color: #00FF00; position: relative; top: 1px; left: 1px; }
.button{color:#FFFFFF;background-color:#111111;border-top:1px;border-
left:1px;border-right:1px;border-bottom:1px;border-
color:#7788BB;border-style:solid;}
body{
margin-top:10px; margin-left:5px;
scrollbar-base-color:#000000;
scrollbar-face-color:#000000;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#CCCCFF;
scrollbar-shadow-color:#555555;
scrollbar-highlight-color:#999999;
}
-->
</STYLE>

というソースなのですが具体的にどこを変えたらいいのでしょうか？
一通り調べてみて分からなかったので質問させていただきました。
宜しくお願いします。

と思ったら分かりそうなのでもうちょっと調べます。

お邪魔しました

こんなふうに出来ませんか？
出来ればポジションは使いたくないです。

■■■■　　　■■■■■■■■　　
コンテンツ
■■■■　　　■■■■■■■■
　　　　　　　　■■■■■■■■
■■■■　　　■■■■■■■■
説明　　　　　表示される場所
■■■■　　　■■■■■■■■
　　　　　　　　■■■■■■■■

すみません、タブ式のトップメニューを作成中どうしてもcssが反映されません（鬱）
一応 ttp://www.seo-web.com/ のトップが出来たら理想です。

div{ text-align: left;
padding; 10px;
boder: solid medium #339900;
background-color: #ff6666 }

#sample1 { margin-top: 20px;
margin-bottom: 50px }
ここまでで反映を確認しようとしたら、変化ナシでした。
もうこれ以上ソースが作れません....（大泣
どういうソースを作ればいいのでしょうか？

HTMLも晒そうね

>>663
どんなHTMLに書いてんの？

とりあえず663でへんなのは　padding; 10px;

？

>>663
このスレに超能力者はいないので（鬱）、該当のHTMLとどのOSのどのブラウザで
反映されないのか書いてください（大泣

俺は超能力者なので、さっき663に対策をテレパシーしといた

>>646-647
ごめん。
そんなｵﾁです。

すまねー。まじで意味が分からないんだけど、
>>663のいう「タブ式のトップメニュー」ってなに？
サンプルURL見ても、ふつーにメニューが横に並んでるだけに見えるんだけど？？
本気で分からないので、誰か教えて！

>>670
タブブラウザとか使えばタブの意味が分かると思うんだけど。

いや、タブの意味は分かるんだけど、あれってタブ？

>>672
タブと同様の使い方が、って意味だろ。
そこまで厳密に突っ込まなければならない要素とも思えないんだけど。

例えば、これとかもタブ式メニュー？
ttp://www.style221.net/

要は横並びメニュー＝タブ式メニュー

ごめん、ほんとに突っ込んでるとかではなくて、
認識の確認なんだ。

>>674
えーと、タブ「みたいに」横並びになってて、タブ「みたいに」ページ移動してもメニューが存在してるようなヤツの事が言いたいんだろ。

>>675
なるほど。
しかし、htmlでタブを模倣するとなるとインクルードかフレームかあとは、全ページに同じ物を用意するかってことになるわけだけど、
どの方法をとっても「リストを横並びに」ってのは変わらんわけだからな。

了解。ありがとう。

一応WinHome,IE6.0 Opera7.11で確認作業っす。>>665サマのアドバイスで反映されますたーｖ　でもタブ式はムズイ....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head><title>●●ここにタイトルを記述</title><meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><link rel="contents" href="index.html">
<link rel="next" href="index2.html"><meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="tag.css"></head>
<body>ここにバナーがはいるっぽい
<div class="sample1">リンク１</div><br><br>●●本文スタート</body></html>

PS:赤色（？）で表示されたのはいいのでつが、
ttp://www.seo-web.com/みたいなメニューはテーブルも使うのでしょうか？それともcssだけで？

>>679
ここまで汚いソースを書いてるんだったらテーブルにぶち込んで背景指定した方が手っ取り早い気がする。

というか、君の質問すべき場所はこっちだ
http://pc2.2ch.net/test/read.cgi/hp/1062715546/l50

>>679
> ttp://www.seo-web.com/みたいなメニューはテーブルも使うのでしょうか？それともcssだけで？
ソース見ろよ

>>681サマ　いいのでつか？私達厨房はまぢでソースから全てパクリまつよ？
もちろん色を少し変えて（笑）

>>682
もっと基礎から勉強する

自分でできん事をやるなよ。

物事にはすべて理論と過程が存在する。
仮にスポーツなどで「あんなようにしたい！」と思っても
まずはルールを理解して、どのように行うのか？それを学習した上で
次は練習してはじめて「できた！」ってことになる。
それでもできない人もいるんだけど・・・

>>682
ソース見るのはよくないこと、とか吹き込まれたのかな。
テーブルかcssかの判断はソース見りゃわかる。
お前が見なくてもここのスレ住人が覗いて答える。
おんなじことじゃねえか。

CSSで背景色を指定したページを印刷する時に、ユーザーに
「背景の色とイメージを印刷する」をチエックさせる以外に、背景色を
印刷させる方法はありますでしょうか？

win Me
IE6.0　　です。

よろしくお願いします。

>>687
ユーザーの自由を奪ってどうする

>>687
@media print

>>688　どうしてもとのご要望がありまして・・・

>>689　ありがとうございます、調べてみます。

どうにもうまく行きませんでした・・・
screenに指定はできるのですがprintを指定しても印刷プレビューに反映されません。

@media print{
#zentai{
background-color: #FFFFFF;
font: normal 10px "ＭＳ Ｐゴシック", "Osaka";

}
｝
body{
font: normal 10px "ＭＳ Ｐゴシック", "Osaka";
background-color: #FFFFCC;
margin: 0px;
padding: 0px;

}
と言う感じでよいのでしょうか?
また、

@media print,screen{
body{〜}
#zentai{〜｝
｝
など、内部に複数の規則を記述してもいいのでしょうか？
どなたかお答えいただけるとありがたいです。

「背景の色とイメージを印刷する」のチェックは最優先されるので
ここにチェックが入っていない限り何をやっても無駄。

>>522

_|￣|○

ありがとうございます・・・・ﾄﾎﾎ

>>693は
>>692宛です

リンクまで間違えた・・・・

吊ってきます

ページに枠をつける場合は、
<STYLE TYPE="text/css">
<!--
BODY { border-width:15pt;border-color:#8080FF;border-style:solid;}
-->
</STYLE>
上記の様に記入しますが、ページの上下に枠の色をつけたくない(横側だけに色をつけたい)
場合はどうすればいいのでしょうか？

>>695
>>4

何も調べずに訊くな・・・ヘタクソな調べ方でも、10分あれば見つかるぞ。

すいません、確かに４を見落としてました。
border-withをborder-right(left)-widthにすれば良いことがわかりました。
ただ、うろ覚えなんですがborder-style:solidのsolidの部分を変えるだけで、
上下だけに枠色をつけたり、左右だけに色をつけたりできた気がしたもので･･････。
すいませんでした。

>>698
上、右、下、左、という指定の仕方も可能。


{border-width : 0 15pt;
border-color : #8080FF;
border-style : solid;}
上と下を0に、右と左を15ptにした。

border-right:5px solid #88f;
border-left:10px dotted #8080ff;

こんな指定もできるよ。
topとbottomはボーダーナシね。

すべてのボーダーを同じにしたいなら、
border:1px solid #8080ff;
のような感じでまとめてしまう事もできる。

>>699,700さん
レスしてくださってありがとうございます。
そういうやり方もあるんですね。
勉強になりました。

★　LintChecker 　Anothor HTML-Lintを使って、HTMLの文法チェックを行う 　http://www.vector.co.jp/soft/winnt/net/se299156.html
--------------------------------------------------------------------------------
動作OS：WindowsXP　
動作機種：汎用　
ソフトの種類：フリーソフト
作者：たかみちえ　

有名なAnothor HTML-Lintを使って、文法チェックを行うソフトです。
HTMLを文法に沿ったつくりにするためには、文法チェックが不可欠です。
が、いちいちAnothor HTML-Lintでチェックをかけるのは、かなり時間がかかりますし、アナログ回線だったら接続料もばかになりません。
一つのページを修正するたびにチェックするなど、相当大変です。

このソフトは、Anothor HTML-Lintを呼び出し、結果をソフトのウィンドウに表示します。
あらかじめAnothor HTML-Lintと、それが動作する環境を作っておけば、HTMLを気軽にチェックし、すぐに修正することができます。

また、おまけで点数によって音を鳴らしたり、�Wファイルが変更されるたびにチェック�Wする機能や、一部の対応したエディタの場合、文法エラーの該当箇所へ、
ジャンプする機能もついています。

STYLENOTEの場合、以下のボタンスクリプトを作成すれば、すぐに文法チェックをすることができます。
//HTML Lintチェック
event Main.ScriptToolBar.onClick()
{
$exe = "(LintCheckerのフォルダパス)\LintCheck.exe"
$cmd = Main.FileBar.GetFilePath()
OpenFile($exe,""$cmd"")
};

★STYLE NOTE　ダウンロードページ　　http://www.wht.mmtr.or.jp/~riki/style/?page=dl
★Another HTML-lint Download　　　　http://openlab.ring.gr.jp/k16/htmllint/download.html

そんなマルチ宣伝しまくってどーすんだよカス。そんなに作者の評判下げたいのか?
まあ作者という可能性も無きにしも非ずだが

body {
background:#fff url("back.jpg") no-repeat 0% 100% fixed;
width:100%;
height:100%;
overflow:visible;
}
.frame {
background:url("back2.jpg") no-repeat 50% 0% fixed;
width:75%;
height:87%;
position:absolute;
top:0%;
right:0%;
overflow:auto;
}

こんな感じでBODYと擬似フレームの両方に背景画像を指定しているのですが、
NN7で見ると擬似フレームの方でno-repeatがきいていないようで背景画像が
連続して表示されてしまいます。IE6とOperaの最新Ver.では擬似フレームの
背景画像は意図通り1枚だけで位置が固定されています。CSSバグリストを
見ましたが掲載されていなかったようなので書きこませていただきました。
HTMLはXHTML1.1で記述しています。

.frame {
background: transparent url("back2.jpg") no-repeat 50% 0% fixed;

にしてみるとか

>>705

背景色指定したらきちんと表示されました。
BODYと同じ色だからってものぐさになっちゃだめなんですね。
ありがとうございます。

XSLを書くのが面倒なのでrdfに直接CSSを適用したいんだが
「rdf\:RDF」では認識してないっぽい。
多分エスケープの実装の問題だと思うんだけども
\によるエスケープを実装してるブラウザってあります？

position:aboslute;right:0px;
などと指定するとスクロールバーの幅分右に隠れてしまったりしますが、
これは初めから大きめに値を指定しておく以外に回避方法

あげ

>>708
最後書き忘れ「はありますか？」

>>707
タイプセレクタの話？
だったら、IEがrdf\:RDFで認識すると思うが。
あと、一応W3CにこんなWDがあって、Mozが実装している。
http://www.w3.org/TR/css3-namespace/
※もちろんこれはWDなので今後の変更もありうるが。

外部ＣＳＳに説明の為のコメントを入れたいのですが
コメントを入れる方法は無いですか？
ぐぐってみたけど見付かりませんでした。

/* */

http://www.w3.org/TR/REC-CSS2/syndata.html#comments

検索の仕方がまずかったようです。。
見付かりました。すいません。

お礼の言葉が「すいません」ワショーイ

>>713-714
>>712さんではないのですが、参考になりました。
ありがとうございます。

/*^_^*/

/*´ω`*/

>>713-714
作業しながらだったので、自分が書き込んだ後見てませんでした
ありがとっす！
何処でどう「ない」と判断したのか自分が謎・・

<---->と//でのコメントが頭の中にこびりついてました。

>>708
おそらくIEだと思うけどBug
position: absolute;
right:0px;
margin-right: 15px;
margin-right: -15px;
これで正常になると思うよ

aboslute X
absolute ○

>720
スレ違いになるが、HTMLのコメントは <!-- --> だぞ
　　　　　　　　　　　　　　　　　　　　　　　　 ~

ずれた

俺はズレてないぞ

>>711
多謝。CSS3か。まだ先になりそうだな。
・・・IEはCSSの実装自体が・・・。
とりあえずCSS3の方向で頑張ってみまふ。

わああああああきんぐどりふとぉおおおおおおおおお！ｷﾞｬｷﾞｬｷﾞｬｷﾞｬｷﾞｬ

知らん間にcss2.1更新してるじゃないか

大変だ! CSS2.1にスゲエ追加がある!
color:orange;
が指定できるようになりました

>>728
さんざん既出。むしろ、CSS2.0では許されない background-position: top 25%;
のような記述ができるようになったのが大きい。
まだ、Last Call だからどうなるかわからんが。

>>728
ワーイワーイ。

…他ないんすか？

初心者スレにも書いたのですが、こちらの方が適切かなと思いましたので。

テーブルを使って
<table>
<tr>
<td align=left>A</td>
<td align=right>B</td>
</tr>
</table>
といったように、同じ行の中でAを左寄せ＆Bを右寄せとするのは、CSSで可能でしょうか？
positionなどの絶対or相対位置指定の他に方法があれば教えて下さい。

>731
死ね、クソマルチ

マルチに教える気にはならんな。

初心者スレよりこちら向きと思って移動してきたのですが…
初心者スレの方にも書いておくべきでしたね。
ご迷惑掛けてしまったようで、すみませんでした。

>731
向こうで回答貰えてるかも知らんが向こうは見てないんで、さわりだけ。

1.tableを使う
2.floatを使う
3.paddingを使う

>>735
table使わなくても
float指定して
width入れたらいいじゃん

>>731
>positionなどの絶対or相対位置指定の他に方法があれば教えて下さい。
まったく意味不明
解らないのならそのままでいいんだよ、別に間違いではないので・・・
問題はtable をどのように使用しているのか？の方が先だ

>>735-736
float！（ﾟ∀ﾟ）
その手がありました。早速試してみます。

>>737
今現在、tableのtdを二個並べて
左のセルのAは左寄せ、右のセルのBは右寄せにしています。
これを、tableやposition:〜を使わずに
Aを左寄せ・Bを右寄せにしたいということです。
説明下手で申し訳ない…



回答どうもありがとうございました。
floatで解決しそうです。
今後質問の仕方については気を付けます。

本当にこのまま消えてくれるんだろうか

右寄せ左寄せって普通にtext-align:left, text-align:rightでいいんじゃないの？

>>738
要するに、中身を左寄せしたブロックレベル要素と中身を右寄せにしたブロックレベル要素をfloatで横に並べりゃいいんでないの？
それで解決するはずなんだけど。

>>740
同じ行でってことだろ？

寄せて、上げる。

背中のお肉もよせてくる

>736
いや、いくつか選択肢を提示してみたんだけどね。
まあどうやら解決したようで何より。

おい、オマイらいい加減なこと教えるなよ（w

>>746
じゃあ、お前が正しい答えを出せ。

人に頼るな

>>748
右寄せ左寄せって普通にtext-align:left, text-align:rightでいいんじゃないの？

祭です。また一人犯罪予告でﾀｲｰﾎか！？
http://sports.2ch.net/test/read.cgi/f1/1060648091/365

From: [365] 音速の名無しさん <>
Date: 03/09/19 11:36 ID:2Ggup9LE

>>361
17位以下なんですがお給料でないんですか？
軽急便を見習ってＶオプ編集部に突入だ！
とりあえずガソリン１４４リッターほど買ってきます。

>>749
だぁよね。
tdそれぞれにclass振っといて、それぞれで指定すりゃいいと思うんだが。なんか間違ってんのかね。

>>751
レイアウトのために表じゃないものにムリヤリTABLE使うなら
divにして並べた方が無難じゃないの？

ん？
tableレイアウトを通常表記にしたいって事だったの？

いやテーブルを使わずにそれを再現したいってことだろ。
ブロック要素を二個横に並べたい、と

チョット違うなぁ
訂正
tableレイアウトやめて、スタイルシートでレイアウトしなおす
っていう作業だったとか？

>>754
そゆことっすか。納得しやした。

ヽ◎ﾉ＜ｷｬｷｬｷｬｷｬｷｬ
　人

.menu { font-family : 'Arial','Helvetica',sans-serif; }

<p class="menu" lang="en">
<a href="link.html" title="リンクページへ">Link</a>
</p>

と書く場合、titleで指定した日本語が文字化けすることは
あるのでしょうか。

>>758
title属性をポップアップさせたりとかはUAによるし、
そこにCSSは適用されるわけないから問題ないと思う。

>759
有難うございました。
確かにポップアップはUA如何ですよね。

■css
DIV#left {
background-color:#ffffcc;
float:left;
height:500px;
width:200px;
}
div#menu {
background-color:#efefef;
margin:1em 1em 1em 15em;
}
div#main {
background-color:#efefef;
margin:1em 1em 3em 15em;
}
■body内
<DIV id="left">画像等</DIV>
<DIV id="menu">メニュー</DIV>
<DIV id="main">複数行の文<br>複数行の文</DIV>

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

これでＩＥでは自分の思うように表示されるのですが、文法的な間違いとかありますか？
このようなレイアウトは変ですか?
ホームページビルダーを卒業しようと頑張っていまふ。

>761
文法的な間違いを聞きたいならlint逝け
レイアウトの事聞くならデザイン云々のスレ逝け

ああ、あと個人的にどうしても気になるのだが、
要素名は大文字か小文字かに（出来れば小文字に）統一して。

>>762
お前質問に対して細か過ぎ。

>>761
div要素の子要素として、直でテキスト（インライン）が来るのは好ましくないです。
divの子にはpなどのブロックが来るべき、ですホントは。

>>762
まあ、そんな意地悪せんでも（ｗ
でも要素名は小文字にするべきだと漏れも思う

よくある右下に画像を表示する
<STYLE type="text/css"><!--BODY {
background-image : url("pit.gif");
background-attachment : fixed;
background-position :right bottom;
background-repeat: no-repeat;}--></STYLE>
を使うと、<BODY>タグのbgcolorは指定できますが
backgroundに絵を指定しても上塗りされてしまいます。
背景画像を２枚指定するわけですから無理があるかもしれませんが
コレを解決する方法はないでしょうか？

細かいこと言えばもっと有るよな
h1の前に画像とか来るのは気持ち悪いし、ナビ→メインじゃなくてメイン→ナビじゃないのかとか
brの使い方間違えてないかとか

まぁ外形だけ書いて中身はホントはもっとちゃんとしてるんです、とか言う事なんだったら
それで良いんだけど見てる限りじゃ764の言うとおりdivの中にそのまんま放り込んでそうだし

<style type="text/css"><!--
.pos { position:absolute; bottom:0%; right:0%;}
--></style>を追加して

<body background="bg.bmp">
<img src="pic.bmp" class="pos">
<body>
でいけました。調べてくれていた方ありがとうございます

言いたい事は色々有るが、あえて765には何もつっこまずに居ようと思った土曜の朝

body直下にもインラインを置いちゃいかんと何度逝っｔ（ｒｙ

>>767
.bmp　(´ι _` 　)

もの凄いアホじゃないのかと言いたい土曜日の朝。

まあまあ。
がんばってるタコは大事にせないかんよ。

まぁ最初は皆ヘボいわけだからな。

>>761と似たような質問で申し訳ありません。
家のWinXPのIE、NN、operaではうまく表示されるのですが、
Macの方から表示が重なると指摘されました。

css
.menu {position:absolute;left:30px;top:5px}
.text {position:absolute;left:300px;top:80px}
a.menu {display:block;margin-top:5px;margin-bottom:5px;
border:solid 1px #色;background-color:#色;
left:20px;padding:2px;width:200px}

text
<div class="menu">
<a class="menu" href="リンクするurl">リンク</a>
</div>
<div class="text">
<h1>タイトル</h1>
<p>なんたらかんたら・・・</p>
</div>
という感じです。Macがないためどう重なるのか、確認できません。
「position:absolute;」で位置指定をやめてfloatにしたほうが
いいでしょうか？

なんでabsoluteはダメでfloatなら良いのかが解らんけど
divの中にインライン要素が直接かよとか、順序的に本文→メニューだろうとかは思うな

macと言われても、macの何よとか、お前のDOCTYPE宣言はどうなってるんだとかなんせ情報が少ないな

>>774
Macどころか、どういう全体的なレイアウトか解らないので詳しくは
助言できないけどね、ざっと見て、
※　a.menu {...} → .manu a {...}
※　<a class="menu" href... → <a href...
※　left:20px → margin-left:20px
これは不自然

ん？
A {nanncyara
}

．menu {
kanncyara
}

って事じゃないの？
>>776

>774ではありませんが、
divの中に直接インライン要素を書くのはやっぱり拙いのですか？

>>774
macで見てみたけどNN7、IE5どっちも重なってないけどね。
safariは知らん。

>>778
俺も775ではないけど、
DIVだけだったらさ、それが何なのかわからないじゃん？
文章ならPで、見出しならHnできちんとマークアップしないと、適切なマークアップとは言えないと思うよ。

まぁ俺もそんなに巧い人じゃないから俺の言ってることは間違ってるかもしれんけどさ。

>>777
漏れの言いたいのは a.manu で a に class 付けしてもいいんだけど
>>774の例では <div class="manu"> と <a class="manu" ...>では
不自然なので、.manu a {..}とした方がいいんじゃないか？ってこと
例えば、<div class="manu"> と <a class="manu-anchor" ...>なら
何も違和感ないんだけど（w
強いて言えば他の記述自体が妙なんだが

DIV をすべて取り払っても Valid にすべきという意見と
既存の要素に当てはまらないと思えば DIV 直下でよいとする意見があるみたい
詳しくは Strict スレへ

>>782
後者はあり得ない。明らかに間違っている。

>>781
なるほろ。
納得しやした。

>>782
間違った誘導しないでね

>780
ありがとうございます。
pを使わずｄｉｖでインライン要素を囲うのは不思議マークアップ系なんですね。
「中身がブロックレヴェル要素である事を定義する要素ですが、
特に決つたスタイルや意味は持ちません。 」という文をネットで見て勘違いしてました。

p{ line-height:**; }とか指定するとimgを含めたときに
NN4.X等で崩れると聞いたので、imgだけdivで囲っていたのですが、
こういう場合はちゃんとpで囲って、p{ line-height:**; }だけ
@import url(**.css);にした方がいいのでしょうか。
Macでの動作確認ができないので、何処でも動作できそうなソースにしたいのですが…。

スレ違いだけど基本的にはこうだろうな
<ul class="manu">
<li><a>リンク</a></li>
</ul>
<div class="text">
<h1>タイトル</h1>
<p>なんたらかんたら・・・</p>
</div>

>>787
そうだろうね。

>>768
駄レスすんな

>>789は>>788へのレス　間違えますた　吊ってきます

客観的には、俺も含めて>>788-791が駄レスだと思う。

>>791
>>789-790も自覚してるようですよ

manu

まぬちゃん！

>>793
やあ、スペルチェッカー君、毎度

いちいちそんなツッコミを入れる低脳さん・・・

いちいちそんな煽りを入れる低能さん・・・

>>793の日常
朝から晩迄、日夜2ちゃん三昧
いつもモニタに顔を20センチぐらいまで近付け、間違いを探している。
時折ズレ落ちてくる眼鏡の真ん中を人さし指で「クイッ、」と上げながら。
外食で飲食店にいくと必ずテーブルの隅を人さし指で "ザッ.."と撫でて
その指をじっと見つめている。店員と目が合えば薄ら笑いを浮かべる
しかし何一言もしゃべらない。。。。
またその人さし指で「クイッ、」とズレ落ちてくる眼鏡の真ん中を上げる以外は。。。

まれに外出することもあるが
やはりスペルの間違い探し
そんな彼を人はこう呼ぶ
人間VOW

800

>>786
NN4はその程度のことに気をつけたってｄ（以下略

>>786
心配しなくてもMac用のブラウザの方が優秀だよ

>>774です。
情報が少なくてすいませんでした。
レスを参考に手直ししてみます。

>>775始め、レスしてくださったみなさんありがとうございました。

>>803
position:absolute にしたとき、
Mac版IEって場合によってはleftとtopの基点がずれることが
あるような気が。その他のブラウザでも違いがあるかも。

Macで見てる人は多分NN4.７。

MacでもNN4は少ないんじゃないか？
7の普及率はどの位だろう。

スレ違いなのでsage

9割方IE5.0か5.1だとおもうぞ。

>>804
そうなんですか・・・。
参考意見ありがとうございます。
>>805-806
Macで指摘してくれた方はIE5でした。

今時、NN4.xの表示を配慮するよりは、ページ内にその後の
Versionもしくは他のブラウザに移行するように
書く方が世のためじゃないか？
そう思うがどうかな？