5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

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

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

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

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

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

【まとめサイト】http://web2ch.s31.xrea.com:8080/?CSS
【FAQ】     http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去スレ】  http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com:8080/?CSSRelated

2 :Name_Not_Found:05/03/08 08:01:39 ID:???
【過去ログ】
1 http://mentai.2ch.net/hp/kako/974/974934062.html
2 http://natto.2ch.net/hp/kako/984/984113434.html
3 http://natto.2ch.net/hp/kako/992/992992981.html
4 http://pc.2ch.net/hp/kako/996/996828258.html
5 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9 http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10 http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11 http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12 http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13 http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14 http://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html

3 :Name_Not_Found:05/03/08 08:02:24 ID:???
【過去ログ】
16 http://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17 http://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18 http://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19 http://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20 http://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21 http://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22 http://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23 http://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24 http://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25 http://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26 http://pc5.2ch.net/test/read.cgi/hp/1072018825/
27 http://pc5.2ch.net/test/read.cgi/hp/1074845459/
28 http://pc5.2ch.net/test/read.cgi/hp/1076968824/
29 http://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 http://pc5.2ch.net/test/read.cgi/hp/1082785026/

4 :Name_Not_Found:05/03/08 08:03:24 ID:???
【過去ログ】
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/
36 http://pc5.2ch.net/test/read.cgi/hp/1098720757/
38 http://pc5.2ch.net/test/read.cgi/hp/1101827958/
39 http://pc5.2ch.net/test/read.cgi/hp/1104596224/
【前スレッド】
40 http://pc5.2ch.net/test/read.cgi/hp/1107809092/

5 :Name_Not_Found:05/03/08 08:06:49 ID:???
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第4版
 http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
 http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
 http://pc5.2ch.net/test/read.cgi/hp/1097724119/l50

6 :Name_Not_Found:05/03/08 08:07:52 ID:???
【仕様書】
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(消滅につき↓で)
 http://web.archive.org/web/20011005012937/http://www.fan.gr.jp/~kaz/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(消滅につき↓で)
 http://web.archive.org/web/20011202074642/http://www.fan.gr.jp/~kaz/rec-css2/cover.html
CSS2の仕様書の邦訳アーカイブ(個人訳)
http://web.archive.org/web/20011021231417/http://www.fan.gr.jp/~kaz/rec-css2.zip
【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

7 :Name_Not_Found:05/03/08 08:36:14 ID:???
【解説など】
・ごく簡単な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
・ばけらの 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.at.infoseek.co.jp/index.html
・Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

8 :Name_Not_Found:05/03/08 08:36:28 ID:???
【解説など】
・ごく簡単な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
・ばけらの 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.at.infoseek.co.jp/index.html
・Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

9 :Name_Not_Found:05/03/08 08:37:27 ID:???
【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

10 :Name_Not_Found:05/03/08 08:37:57 ID:???
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://kobit.info/tips/overflow.html
 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

11 :Name_Not_Found:05/03/08 08:39:51 ID:???
【FAQ】
Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScript?でやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A11: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.jp/site/tips/page/p0037.html

12 :Name_Not_Found:05/03/08 08:45:18 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
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://css.maxdesign.com.au/index.htm

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


13 :Name_Not_Found:05/03/08 08:48:54 ID:???
前々スレからの持ち越し。 (^^;

テンプレ中の
CSS1の仕様書の邦訳(日本規格協会訳/個人訳)は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html

CSS2の仕様書の邦訳(日本規格協会訳/個人訳)は
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
↓に移転。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

14 :Name_Not_Found:05/03/08 08:53:24 ID:???
>>1
>過去スレや関聯リンクは>>2-10
>>2-13」になってるね。
分割しすぎ、前みたいに纏めようよ。

15 :1:05/03/08 08:53:28 ID:???
連投規制でテンプレを書き込めずにいたところ
親切な人が続きを書いてくれたようで
こんな風になってしまいました。
見苦しくて済まん。

あと
「httpの数が多い」ってエラーが出たので
一記事中の過去ログリストの数を減らしました。
てことで>>1のアンカーと合わなくなってしまいました。
ttpにすればよかったかしら。

次スレで直してください。

16 :Name_Not_Found:05/03/08 09:30:08 ID:???
.box { display: block; margin: 0; padding: 0; width: 500px; float: none; clear: both }
.boxR { display: block; margin: 0; padding: 0 0 0 10px; width: auto; float: right; clear: both }

<div class="box">
 <div class="picBoxL">
  <img src="Image.jpg" height="200" width="200"><br>
 </div>
 <h3><img src="Imagea.gif" height="20" width="100"></h3>
 <p>あああああああああ</p>
</div>
このHTMLの記述を二回以上繰り返すとする。

これをIEで表示させると、なぜか上のboxと下のboxの間に一文字分、
空白があいてしまいます。
firefoxだと行間は空きませんが
<div class="box">...</div>のあとの記述が回り込んでしまいます。

<div class="box">...</div>と<div class="box">...</div>の間に
行間が空かないようにして、かつ、そのあとの記述が回り込まないようにするにはどうすればいいですか?

17 :Name_Not_Found:05/03/08 09:50:30 ID:???
>>16
とりあえず全角スペース止めれ。

18 :Name_Not_Found:05/03/08 09:52:00 ID:???
>>17
すんません
これ2ちゃん用にスペース入れ直しました・・・

19 :Name_Not_Found:05/03/08 09:53:10 ID:???
>>16 class="boxR"がHTMLソースの中に見当らない。

20 :Name_Not_Found:05/03/08 09:54:28 ID:???
>>16
float: none; ってなに?

21 :Name_Not_Found:05/03/08 09:56:17 ID:???
>>20
よく知らんのなら口はさまんといて、ややこしくなるから。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#float-position

22 :Name_Not_Found:05/03/08 09:57:02 ID:???
>>18
検証すんのに邪魔なんだよ。

<p> ってのは解ってるよな?

23 :Name_Not_Found:05/03/08 10:02:17 ID:???
>>16
元からマージンの無いdivに対してmargin: 0;だの
浮動要素に対してwidth: auto;だのと、
無意味で無駄な指定が多いよ。シェイプ・アップしなさい。

24 :Name_Not_Found:05/03/08 10:06:10 ID:???
俺のfirefoxは回り込まないけど

25 :Name_Not_Found:05/03/08 10:12:03 ID:???
>>19
すんません
LとRをまちがえました
どちらかに統一してみてください

>>22
すんません
パラグラフです
文章が短いので今回は画像の下に文章が回り込むと言うことはありません。

>>23
すんません
margin:0ってのは癖で入れてしまいました

>>24
あれー?
私は回り込んでしまいます・・・

26 :Name_Not_Found:05/03/08 10:12:06 ID:???
>>24
そらぁ、だって>>16のソースには、フロートさせた要素がないもんな。当り前。
"picBoxL"ってクラス名が"boxR"のつもりなら話は別だが。

27 :Name_Not_Found:05/03/08 10:14:38 ID:???
>>25
>LとRをまちがえました
どころではないぞ。
大文字と小文字も違ってるし、そもそもpicとか要らぬ文字がついてるし。

>margin:0ってのは癖で入れてしまいました
ならwidth: auto;ってのは何のつもりだ?

28 :Name_Not_Found:05/03/08 10:19:05 ID:???
>>16
ところで、何処で習ってきたんだい?

29 :書き直しました(´・ω・`):05/03/08 10:20:42 ID:???
<html>
<head>
<style type=text/css>
.box { display: block; padding: 0; width: 500px; float: none; clear: both}
.boxR { display: block; padding: 0 0 0 10px; width: auto; float: left; clear: both }
</style>
</head>
<body>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああ</p>
</div>
<div class="box">
<div class="BoxR">
<img src="Image.jpg" height="200" width="200"><br>
</div>
<h3><img src="Imagea.gif" height="20" width="100"></h3>
<p>あああああああああ</p>
</div>
あああああああああああああああああああああああああああああああああああああああああああああああああ
</body>
</html>

30 :(´・ω・`):05/03/08 10:22:44 ID:???
>>28
いろんな人の作り方を見よう見まねで・・・(´・ω・`)

31 :(´・ω・`):05/03/08 10:26:35 ID:???
あれ>>29だと
IEに隙間あきませんね・・・


32 :Name_Not_Found:05/03/08 10:52:10 ID:???
>>29
.box {
height: 200px;
}
h3 {
margin-top: 0;
}

33 :Name_Not_Found:05/03/08 11:14:24 ID:???
やっばり春なんだねぇ

34 :Name_Not_Found:05/03/08 11:48:25 ID:+nYYLyvm
* {
margin: 0;
padding: 0;
}
#menu {
float: left;
width: 10em;
}
#contents {
margin-left: 11em;
margin-top: 1em; /*これを加えるとmenuにもmargin-topがとられてしまう*/
}

<div id="menu">
<ul><li>menu</li></ul>
</div>
<div id="contents">
<h1>contents</h1>
</div>

floatdで左右に配置したのですが右contentsにmargin-topを与えると
operaとmozillaでは左のmenuの上にもマージンが取られてしまうのですが
これはIEの方のバグなんでしょうか?
bodyなどにmaginを取らずに三つのブラウザで両方を同じ高さに表示したいのですが
なにか対策とかわかる方いたらお願いします


35 :Name_Not_Found:05/03/08 11:51:56 ID:???
>>33
そういうことを言う奴に限って房

36 :Name_Not_Found:05/03/08 11:54:47 ID:???
ハゲドウ

37 :Name_Not_Found:05/03/08 11:57:43 ID:???
何故解った?

38 :Name_Not_Found:05/03/08 13:40:09 ID:???
前スレで
http://www.filemaker.com/
ここのメニュー部分にJS使ってないといい張っていらっしゃる
勘違いさんはどうしたらいいんでしょう…

39 :Name_Not_Found:05/03/08 14:29:24 ID:???
>>38
おまえはどうしたいんだよ。

40 :Name_Not_Found:05/03/08 15:15:29 ID:???
そこまで考えてなかった

41 :Name_Not_Found:05/03/08 15:53:02 ID:???
やっばり春なんだねぇ

42 :Name_Not_Found:05/03/08 16:06:20 ID:???
他人の勘違いなぞ放っておくがよい

43 :Name_Not_Found:05/03/08 16:22:51 ID:???
>>41
そういうことを言う奴に限って房

44 :Name_Not_Found:05/03/08 16:26:35 ID:???
ハゲドウ

45 :Name_Not_Found:05/03/08 16:28:56 ID:???
何故解った?


46 :Name_Not_Found:05/03/08 17:00:31 ID:???
前スレで
http://www.filemaker.com/
ここのメニュー部分にJS使ってないといい張っていらっしゃる
勘違いさんはどうしたらいいんでしょう…

47 :Name_Not_Found:05/03/08 17:01:26 ID:???
>>46
おまえはどうしたいんだよ。

48 :Name_Not_Found:05/03/08 17:38:19 ID:???
しつこいな。ほっとけっつの

49 :Name_Not_Found:05/03/08 19:02:26 ID:???
h2 {
text-align: right;
float: right;
}
h2:before {
content: "●";
}

 これで自動生成された"●"を拡大・z-indexを負にしてh2の下にもぐらせたいのですが、出来ますか。
 それからh2のwidthはどのように書くべきですか。

50 :Name_Not_Found:05/03/08 19:30:39 ID:LkqcSvzs
<html>
<head>
<title>てすと</title>
<style type="text/css">
<!--
div {
border: 1px solid red;
margin: 5px; }
body {
margin: 5px;
padding: 0; }
.left {
float: left;
width: 48%;
height: 300px; }
}
-->
</style>
</head>
<body>
<div class="left">a</div>
<div class="left">b</div>
</body>
</html>

こういう風に書いたところ、だんだん画面の幅を狭くしていくと、
二つ目のブロックが、回り込みじゃなくて、次の行に表示されてしまいます。
これは、何が起きてるんでしょうか??

51 :Name_Not_Found:05/03/08 19:34:21 ID:???
>>46
JavaScript使って無いって言ってんのこっちだろ。
ttp://www.kxen.com/

52 :Name_Not_Found:05/03/08 20:07:37 ID:???
ボックスの縦が b < a になるから

53 :50:05/03/08 20:34:20 ID:LkqcSvzs
>>52
もうちょっと詳しく教えてください。
お願いします。

54 :Name_Not_Found:05/03/08 20:39:36 ID:???
最近.left等の奇抜なclass名を付ける方が増えてきましたね

55 :Name_Not_Found:05/03/08 21:13:25 ID:???
春だからね。

56 :Name_Not_Found:05/03/08 21:50:25 ID:???
>>53
回り込む余地が無ければ回り込みは起きない、ってコトだよ。
イヤならその親要素の幅を固定するなり、min-widthを使うなりするがいいです。

>>54
いや、leftってクラス名の要素の中には必ずサヨに関することが書いてあるのかもしれんぞ。

57 :Name_Not_Found:05/03/08 22:07:31 ID:???
class名になぜleftはダメなんだ?

58 :Name_Not_Found:05/03/08 22:08:22 ID:???
min-widthはIEで無視されるでしょ。

59 :Name_Not_Found:05/03/08 22:13:22 ID:???
>57
htmlはレイアウトする物じゃなく〜って話だろ

60 :Name_Not_Found:05/03/08 22:17:44 ID:???
>>50
classじゃなくてidの方を使えよ

61 :Name_Not_Found:05/03/09 00:10:47 ID:???
>>57
べつに駄目じゃないよ。

例)左側に持ってくるためのスタイルシートの為のクラス名だからleft、は駄目。

ってーのは、left = 左 っていう英語を理解できる人間もしくは処理系だけの話だから。
同様の考え方を持った英語圏の人も、<div class="hidari">ってのには文句言わんだろう。

62 :Name_Not_Found:05/03/09 00:40:47 ID:???
じゃあ 日本人は hidari を使えってことか?

63 :50:05/03/09 00:44:23 ID:0idPPeH0
みなさんありがとうございます。

あと、もう一つ疑問がでてきました。
なんか、全然うまくいかなくなってきた。
いろいろやってて
<div class="left">a</div>
のところを
<div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
ってしたら、borderの線からはみ出してしまう。。なんででしょう??

スタイルシートの理解が間違ってるみたいです。
私の理解では、
aaaaaaaaaaaaaaaaaaaaaaaaaaaの周りに、paddingがあって、borderがあって、marginのスペースがある
と思っていたので、
aaaaaaaaaaaaaaaaaaaaaaaaaaaが、borderと重なることはないと思っていたのですが。。
この理解はおかしいのでしょうか?

64 :Name_Not_Found:05/03/09 01:04:28 ID:???
>>61
そんなこたぁ関係ない。
>>50自身は左側に表示したいからleftってつけてる訳で、
それを見る側がどうかは関係なく、>>50のhtmlのあり様に対する考え方がなってないわけだ。

65 :Name_Not_Found:05/03/09 01:14:17 ID:???
>>63
内容によってブロックボックスのサイズが決まることもあるんだけど
今回のように幅や高さをしっかり指定されているときには
あくまでもブロックボックスのサイズはそれに従い、内容であるインラインボックスが
外側のブロックボックスを飛び出して配置されることもあるのよ。

まあとりあえずFAQに載ってるサイトとかで(できればHTMLから)勉強してきたほうがいいと思うよ。

66 :50:05/03/09 01:32:13 ID:0idPPeH0
なるほど、ありがとうございます。

ブロックボックスのサイズを指定しているから
ブロックボックスはそれに従い、
内容は飛び出してしまってるんですか。。

1から勉強しなおしてみます。

67 :Name_Not_Found:05/03/09 01:50:41 ID:???
>>51
使ってんじゃん

68 :Name_Not_Found:05/03/09 02:07:07 ID:???
>>67
使ってないってのはHomeとかAbout KXENとかのポップアップするメニューのことでしょ。

69 :68:05/03/09 02:17:18 ID:???
ああそうか。IE向けには使ってたよ…。

70 :Name_Not_Found:05/03/09 03:10:09 ID:GabryLxk
質問なのですけど、マウスがリンクにのった時にキラキラさせるカーソルの
タグを教えて下さい。
例)www.neopets.com/randomfriend.phtml?randomfriend=mbifのページのキラキラです

71 :Name_Not_Found:05/03/09 03:20:32 ID:???
>>70
左側の黄色いとこのメニューのアイコンのことならJavaScriptだよ。

72 :Name_Not_Found:05/03/09 06:03:55 ID:???
ただ単に左や右に配置するためにつけるclass名は
どういう名前をつけるのがいいんでしょうか?
boxとかmenu,contentsとつけてる人もいるみたいですがそういうのなら大丈夫なんでしょうか?

73 :Name_Not_Found:05/03/09 06:23:19 ID:???
そのボックスがメニューを含むのならmenuでいいだろうし本文ならcontentとかでもいいでしょ。
boxというのは何のボックスかわからないから避けたほうがいいと思うけど。

74 :Name_Not_Found:05/03/09 10:32:49 ID:???
質問です。
float:leftでこのように二段組にしてるんですけど、

 A                 B
項目1             長い文章
項目2             長い文章
項目3             長い文章
項目4             長い文章

IEでは問題ないんですが、
firefoxやNSだと、文章が長いとBがAの下にいってしまって段組になりません。
Bの方をwidthで指定してしまえば大丈夫なんですが、
そうするとブラウザの大きさを変えたときの柔軟性が無くなってしまいます。
どなたか回避方法おしえてください。

75 :Name_Not_Found:05/03/09 10:48:12 ID:???
>下にいってしまって段組になりません。
>ブラウザの大きさを変えたときの柔軟性が無くなってしまいます。

  全て伸縮は無理です。全体で650px位になるようにしてみたらいかがでしょうか?

76 :Name_Not_Found:05/03/09 11:04:53 ID:???
>>74
Bのmargin-leftにAの
あるていどの横幅で下に回りこむのはfloatを使う限りしょうがない
positionでも使ってみれば

77 :74:05/03/09 11:23:02 ID:???
>>75さん
>>76さん
そうですか。
IEだとうまくいくのはIEの解釈がまちがってるんでしょうね。
ありがとうございあmした。

78 :Name_Not_Found:05/03/09 11:33:21 ID:???
>>77
AにもBにもfloat:left;を指定してるのか?
Bにはmargin-left:(Aのwidth+α);にしてみな。

79 :76:05/03/09 11:44:48 ID:???
う、すまん。なんか文字が途中ぶっ途切れてた
言いたい事は>>78と同じ

80 :74:05/03/09 12:04:19 ID:???
>78さん
>79さん
言われたとおりのやり方でうまくいきました。
今まで両方にfloat:leftが一般的だと思ってました・・・
ありがとうございました。

81 :Name_Not_Found:05/03/09 14:30:35 ID:???
>>74
%ではいかんの?

block-A{
width: 30%;
float: left;
}
block-B{
margin-left: 30%;
}

では。

82 :Name_Not_Found:05/03/09 15:17:06 ID:???
この人がマイミク0だよ、友達になってあげて!
http://mixi.jp/show_friend.pl?id=363049

83 :Name_Not_Found:05/03/09 18:00:14 ID:???
>>80
フロートのFAQを読んでから質問してほしかったな。>>12だ。

84 :Name_Not_Found:05/03/09 22:51:11 ID:???
<div id="containerA">
 <div id="header"></div>
 <div id="containerB">
  <div id="sidebar"></div>
  <div id="main"></div>
 </div>
</div>

よくある固定ボックス内にサイドバーとメインという形なのですが、
Firefox1.0で見るとsidebarとmainの部分がcontainer部を貫通します。
ちなみに他のブラウザ(IE6/Opera/NN8BETA)ではちゃんと中に収まって表示されました。
原因が分かる方、どうかご教授お願いします。

85 :Name_Not_Found:05/03/09 22:55:52 ID:???
>>84
CSSの中身は秘密かい?

86 :Name_Not_Found:05/03/09 22:58:49 ID:???
>>84
そりゃ誰も解らんだろうな(w

87 :Name_Not_Found:05/03/09 23:13:05 ID:???
ワロタw

88 :Name_Not_Found:05/03/09 23:25:12 ID:???
ギガワロス

89 :Name_Not_Found:05/03/09 23:30:52 ID:???
テラワロスw

90 :Name_Not_Found:05/03/09 23:52:20 ID:???
グランドワロス

91 :Name_Not_Found:05/03/10 00:03:11 ID:???
ナイツオブグラウンドワロス

92 :Name_Not_Found:05/03/10 00:11:03 ID:???
84だが、正直すまんかった。
それとどうやらfloatが絡んでるみたいで、いじってたら修正出来たよ。
それにしても、本当に申し訳なかった。

93 :Name_Not_Found:05/03/10 00:20:57 ID:???
気にすな

94 :Name_Not_Found:05/03/10 00:27:25 ID:???
>>92
次から気をつければよろし

95 :Name_Not_Found:05/03/10 00:39:12 ID:???
おまえらいいヤツだな。

96 :Name_Not_Found:05/03/10 03:16:16 ID:E1uzjIEZ
<html>
<head>
<title>てすと</title>
<style type="text/css">
<!--
.menu {
float: left;
border: 1px solid red;
width: 30%;}
.main {
margin-left: 31%;
border: 1px solid blue;
width: 65%;}
-->
</style>
</head>

<body>
<div class="menu"><p>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="main"><p>あいうえおかきくけこさしすせそたちつてと</p></div>
</body>
</html>

アルファベットを並べて書くと、改行されないんですが、なにか良い方法ってありますか?
どうも、ブラウザが、どこで改行すればいいか、わからないみたいで、ボックスからはみだしているようです。
適当にスペースを入れるいい感じになるんですが、
それだと、文章の方にスペースをいれないといけなくなるので、嫌なんですが。

Firefoxでテストしています。
ちなみに、IEの場合、内容の大きさからボックスの大きさを決めてるようで、論外な表示になりますが。。

97 :Name_Not_Found:05/03/10 03:31:25 ID:???
break-all

98 :Name_Not_Found:05/03/10 03:37:45 ID:???
文字列のどこでも改行できる言語は
世界的に見れば少数派なのですよ

99 :Name_Not_Found:05/03/10 05:45:40 ID:???
>>96
そういうとき(長い単語を途中で折りたいとき)のために
<br>があるんだけど、どう?

100 :Name_Not_Found:05/03/10 07:12:04 ID:???
ラテン・アルファベット(ローマ字)は、分かち書きで記すものなんです。

101 :Name_Not_Found:05/03/10 08:30:32 ID:???
>>96
んなもん 禿禿しくガイシツ 

102 :Name_Not_Found:05/03/10 11:04:46 ID:E1uzjIEZ
どうもありがとうございます。

プログラム書いてて、
ちょっとマニュアルを自動生成しようと思って、
ついでにCSSも使ってみようと思ったんですけど、
"."ピリオドでも、改行されないのに、困ってました。
word-break: break-all;を使うとIEの方がうまく表示するようになりました(笑)

文字サイズから<br>入れるのもありかもしれないんですが、
プロポーショナルフォントだと、ちょっと大きさわからないし。。

Firefoxではあきらめます。

CSS使うとレイアウトはtableと同じことできるっていうけど、
微妙に違うんですね。

103 :Name_Not_Found:05/03/10 11:11:53 ID:4LDiRwyb
<html>
<head>
<style type="text/css">
<!--
#hoge a {
display: block;
height: 30px;
width: 100px;
background-image: url(hoge_200-30.png);
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#hoge a:link { background-position: 0 0; }
#hoge a:visited { background-position: 0 0; }
#hoge a:hover { background-position: -100px 0; }
#hoge a:active { background-position: -100px 0; }
-->
</style>
<title>hoge</title>
</head>
<body>
<ul>
<li id="hoge"><a href="hoge.html" title="hoge">hogehogehogehogehogehogehogehoge</a></li>
</ul>
</body>
</html>

上記で、ロールオーバーと同等の効果を出してみたんだけど、
text-indent: -9999px;
の部分の力技を、もう少しクールにするにはどうしたらいい?
<span>hogehogehogehogehogehogehogehoge</span>とかにするのは無しでw

104 :Name_Not_Found:05/03/10 11:40:32 ID:???
>>103
何がしたいのかいまいちわからないけど
リンク部分は画像だけでやろうとしてんの?
それとも文字の背景として画像を使いたいの

105 :103:05/03/10 11:51:15 ID:???
>>104
リンク部分は背景画像だけにして、テキストを表示させたくないのです。
背景画像はマウスアウト時とホバー時の画像を横に並べただけの1枚の画像です。

106 :Name_Not_Found:05/03/10 11:54:30 ID:???
htmlはシンプルに、cssはクールにって気持ちはわかるけど、画像非表示下だとまったく無力

107 :Name_Not_Found:05/03/10 11:59:47 ID:???
text-indent: -9999px;もなにかに認定とか・・・

108 :Name_Not_Found:05/03/10 11:59:52 ID:???
全角スペースでも入れれば

109 :103:05/03/10 12:01:24 ID:???
>>106
> 画像非表示下だとまったく無力
確かにそうですねw
画像だけは表示、または表示できる方向では、何とかならんもんでしょうか?


110 :Name_Not_Found:05/03/10 12:09:11 ID:???
span display:none

111 :Name_Not_Found:05/03/10 13:52:13 ID:E1uzjIEZ
ボックスの角を丸めたり、ボックスのボーダーに画像を使ったりするのを
解説してくれたページで、おすすめのページあったら教えてください。

112 :Name_Not_Found:05/03/10 16:06:14 ID:???
>>111
CSS2 では「ボックスの角を丸めたり、ボーダーに画像を使ったり」できないんだけど。
CSS3 のことか? CSS3 の草案だったら ttp://www.d-toybox.com/spec/CSS3/background/

113 :49:05/03/10 19:39:12 ID:???
スルーされちゃったので、もう一度……
<h2>ごあんない</h2>
h2:before {content: "●";}
これで、"●"を"ごあんない"の下に置きたいのですが、どうしたらよいでしょう。

114 :Name_Not_Found:05/03/10 19:57:08 ID:???
>>113
藻前はどうしたらいいと思うんだよ。

115 :Name_Not_Found:05/03/10 20:17:44 ID:???
>>113
css2ではcontentで生成した内容はposition指定できない。
よってz-indexは無効。

マージンをうまくいじればできる。がんがれ。

116 :Name_Not_Found:05/03/10 20:22:43 ID:???
↑誤爆?

117 :Name_Not_Found:05/03/10 20:38:21 ID:4LDiRwyb
Safari 1.2.4(v125.12) 標準/互換両方
colorに不正なtransparentを指定すると透明になってしまう。

<html>
<head>
<style type="text/css">
<!--
p { background-color: #aaa; }
p#hoge { color: transparent; }
-->
<title>hoge</title>
</head>
<body>
<p>hogehogehogehogehogehogehogehoge</p>
<p id="hoge">Safariでは透明になります。</p>
</ul>
</body>
</html>

118 :117:05/03/10 20:39:33 ID:???
</style>が抜けた。

119 :117:05/03/10 20:48:11 ID:???
しかも誤爆した。スンマソ

120 :49:05/03/11 09:36:55 ID:???
>>115
ありがとうございました。画像が無難でしょうか。

121 :Name_Not_Found:05/03/11 19:55:34 ID:FYayM1ZE
初心者板から来ました。
画像のレイアウトについて質問です。
<center>や<div align=center>
じゃなくて中央に表示させるにはどのようにすればよいでしょうか?
cssでやりたいのですが。
どなたか宜しくお願いいたします。


122 :Name_Not_Found:05/03/11 20:11:32 ID:???
>>121
釣りでしょ

123 :Name_Not_Found:05/03/11 20:11:37 ID:???
margin: auto;

124 :Name_Not_Found:05/03/11 21:45:08 ID:Mx2XwREW
http://nvu.cc/
のサイトを見て、cssとnvuにひかれました。OSXを使ってるんですが、昔はホームページミル(?)とかいうソフトを使っててcssと全く縁がありませんでした。
そこのサイトの左側のメニュー(?)みたいなところのborderはどのように作ればいいのでしょうか?
そこのスタイルシートをコピペしてみてもうまくborderがでない・・。なんか、時代に取り残された・・・。

125 :Name_Not_Found:05/03/11 21:55:36 ID:???
ちょっと見ただけじゃ何するソフトかぜんぜんわからん

126 :121:05/03/11 22:08:03 ID:FYayM1ZE
>>123
ありがとうございます。
autoがききません。
Mac&IEだからですかね?

127 :Name_Not_Found:05/03/11 22:14:41 ID:???
>>124
lists { border-style: solid;
border-color: rgb(216, 208, 166);
border-width: 1px 1px 1px 10px;
margin-left: 10px;
display: block;
margin-top: 5px;
margin-bottom: 0px;
padding-left: 5px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 11px;
font-family: 'MS ゴシック','osaka','verdana';
}
これだけだろうけど...
マークアップは滅茶苦茶なので 真似しない方がいいyo

128 :Name_Not_Found:05/03/11 22:34:30 ID:???
>>126
たぶん藻前の書き方が間違ってるから

129 :Name_Not_Found:05/03/11 22:51:51 ID:???
>>126
標準モードでやってね。

130 :Name_Not_Found:05/03/11 22:55:45 ID:???
>>126
FAQぐらい嫁 >>9

131 :Name_Not_Found:05/03/12 13:17:00 ID:???
>>124
ものすごく見る人を混乱させるつくりのサイトだね。
ナビゲーションとかひどい。
HTMLソースがひどいのはNvuのせいにしておけばいいけどさ。

132 :124:05/03/12 13:47:30 ID:???
>>ものすごく見る人を混乱させるつくりのサイトだね。
えっ、そうなんですか?
なんか、全体的にブログっぽいのがとてもいいと思ったんですが。

メニューを左側の囲い(div?)と内容を右の囲いにいれてフレームのかわりみたいにしたいんですが、そういう場合はどうすればいいのでしょうか?
フレームしか左右を分ける手段をしらなかった・・・。10代で時代遅れ・・。

133 :Name_Not_Found:05/03/12 13:49:50 ID:???
すまん、何言ってるかわからん

134 :Name_Not_Found:05/03/12 15:00:09 ID:???
確かにナビがわかりづらいな
>>132
floatかposition

135 :Name_Not_Found:05/03/12 17:15:34 ID:???
質問です。




↑のようにdivボックスで作ったとします
■はheight: 100px;にして
□はheight: を残りの縦幅にしたいのですが、フレームやテーブルを使わず
cssでできるんでしょうか?
できるとしたらやり方を教えてください。

136 :Name_Not_Found:05/03/12 17:17:06 ID:???
> 残りの縦幅
ブラウザから見て?

137 :Name_Not_Found:05/03/12 19:30:06 ID:???
ただいま>135は んこをしておりますので、少々お時間を頂きます。

138 :Name_Not_Found:05/03/12 20:56:46 ID:???
なげーな 肛門切れて気を失ってるんじゃねーかー?

139 :Name_Not_Found:05/03/12 21:31:10 ID:???
マルチ市ね

140 :Name_Not_Found:05/03/12 21:34:44 ID:???
よーしチンカス共質問の時間だ


外部ファイルでcssを読み込むのだが
例えば
div.menu{
color:#cc0000;
width:200px;
float:left;
font-size:8pt;
padding:0px;
margin:0px;
}
といった様に。Divのクラス名「menu」で背景色や文字サイズなどを
指定できるまでは解った

この同じdiv.menu内でA属性も指定できないの?

Blogでデザインを変えたいんだけど
Div単位でA属性が指定できれば随分とスッキリするので
方法が知りたい

そこでおまえらチンカスの出番ときたわけだ。
答えろや

141 :Name_Not_Found:05/03/12 21:39:26 ID:???
>>140
よく聞け、ハナクソ野郎。

div.menu a {
display:none;
}

だ。わかったか。

142 :Name_Not_Found:05/03/12 21:41:57 ID:???
ところで、

http://pc5.2ch.net/test/read.cgi/hp/1110478221/492
> a:text.xxx{decoration:none;}

:text擬似クラス(それとも擬似要素?)なんてあったっけ?

143 :チンカス:05/03/12 21:43:35 ID:???
マルチ氏ねとか言わないように・・ だな。

オマイの方法では、色の変化がいろいろ付けられて、それはそれでよい。

より省力化したかったら、子孫だの子供だのつーのがあるから勉強しろ。

 http://msugai.fc2web.com/web/CSS/selector.html

なお、外には子供を作らないように・・・   嫁に泣かれる。

144 :Name_Not_Found:05/03/12 21:54:58 ID:???
泣かれるだけならまだいいほうだ。

145 :Name_Not_Found:05/03/12 21:55:54 ID:???
フェラティオされる

146 :135:05/03/12 21:56:29 ID:???
>>136
はい ブラウザから見てです。


147 :Name_Not_Found:05/03/12 21:56:37 ID:???
>>144
オタッキ-がなにいってんの??

148 :144:05/03/12 22:00:29 ID:???
>>147
ホームレスはオタッキ-では無いぞ

149 :Name_Not_Found:05/03/12 22:01:20 ID:???
>>146
肛門 切れてないのか?

150 :Name_Not_Found:05/03/12 22:08:44 ID:???
>>135さんの質問の答えは僕も知りたいです。

151 :Name_Not_Found:05/03/12 22:12:56 ID:???
>>135
Mozilla系ならできる。
IEはIEの独自拡張を使えばできる。
IE7なら独自拡張を使わなくてもできるようになっているかもしれない。
Opera、Safari系は知らね。

152 :472:05/03/12 22:15:28 ID:9p92oKfK
Webサイト製作初心者質問スレで誘導されたのですが...
既に代わりに質問して頂いてるようですので

>>141
div.menu a{

}
とありますが具体的に言うとどういう記述方をとれば
良いのでしょうか?
例えば
div.menu a{
color:#000000;   div内の文字色指定
font-weight:bold; div内の文字フォント指定
padding:2px;    div内の領域内指定
}
この記述ではdivに対しての指定ですよね?
この形式でどういう記述をすればa要素を指定出来るのでしょうか?

>>142
一応私の環境下(XP IE6.0では私の意図した動作をしていますが
文法的におかしいのでしょうか?

>>143
マルチ氏ねとか言わ「れ」ないように
脱字でした。誤解を招く文章申し訳ないです。
紹介して頂いたサイトで勉強します。

重ね重ね板汚し申し訳ないです。。

153 :135:05/03/12 22:23:16 ID:???
>>151
ありがとうございます。
テーブルやフレームを使えってことでいいのでしょうか?

154 :Name_Not_Found:05/03/12 22:28:46 ID:???
はぁ?

155 :Name_Not_Found:05/03/12 22:29:26 ID:???
>>152
> 例えば
> div.menu a{
> color:#000000;   div内の文字色指定
> font-weight:bold; div内の文字フォント指定
> padding:2px;    div内の領域内指定
> }
> この記述ではdivに対しての指定ですよね?

違う。div.menuの中のa要素に対しての指定。

で、

http://pc5.2ch.net/test/read.cgi/hp/1110478221/492
> a:text.xxx{decoration:none;}

どこにa:textという風に書けって書いてあったの?

156 :Name_Not_Found:05/03/12 22:40:05 ID:???
>>155
しつこい

157 :472:05/03/12 22:49:37 ID:9p92oKfK
>>155
>違う。div.menuの中のa要素に対しての指定。
なるほど、これで解りました。有難うございます。
div.menu a{
 link{color: #000000; background:#e7dfce;}
 visited{color: #000000; background:#e7dfce;}
 active{color: #FF69B4;}
 hover{color: #ffe42a; background:#5a4dbd;}
}
と言う記述方でよいのですか?

> a:text.xxx{decoration:none;}
えっと、、どこで見つけたまでは覚えてませんが
基本的に情報元は検索して調べてるので
検索した結果としか。。
私の脳内解釈が間違っていたのかもしれません。


158 :Name_Not_Found:05/03/12 22:56:46 ID:???
なんとまぁ、ユニークだこと・・・  ホホホ

159 :Name_Not_Found:05/03/12 22:58:50 ID:???
>>157
div.menu a:link {
color: #000000; background:#e7dfce;
}

visited、active、hoverも同じように。

160 :472:05/03/12 23:03:12 ID:9p92oKfK
>>159
あれ?
div.menu a{
 link{color: #000000; background:#e7dfce;}
 visited{color: #000000; background:#e7dfce;}
 active{color: #FF69B4;}
 hover{color: #ffe42a; background:#5a4dbd;}
}
で早速自分のBlogで試したところ
意図する動作したので満足していたのですが

div.menu a:link {
color: #000000; background:#e7dfce;
}
div.menu a:visited{
color: #000000; background:#e7dfce;
}

っと一つ一つ括弧閉じていくほうが文法的に良いですか?


161 :Name_Not_Found:05/03/12 23:10:30 ID:???
>>160
今後のこともあるから、IE以外でも試しなよ。

162 :472:05/03/12 23:17:08 ID:9p92oKfK
>>161
了解しました。
すべての環境で意図した表示するというのが理想なので
どういう文法が正しいのか等その辺の因果関係の
解説サイトを探して見ます。

長々と失礼しました。では、これにて失礼します。

163 :Name_Not_Found:05/03/12 23:19:53 ID:???
うむ

164 :Name_Not_Found:05/03/12 23:25:30 ID:???
いや、おろしてくれ。

165 :Name_Not_Found:05/03/12 23:56:32 ID:???
例えばこうして下記のようなCSSとHTMLソースがあって、
後から指定したはずの p.aaa の指定がカスケードできない部分があるのは何故?
漏れなんか勘違いしてる?

p {
margin: 4em;
}
.section .section p {
margin: 2em;
}
p.aaa {
margin: 0em;
}

<div class="section">
<h1>h1</h1>
<p>ppppppppppppppppppppp</p>
<p class="aaa">ppppppppppppppppppppp</p>
<div class="section">
<h2>h2</h2>
<p>ppppppppppppppppppppp</p>
<p class="aaa">ppppppppppppppppppppp</p>
</div>
</div>


166 :Name_Not_Found:05/03/13 00:15:55 ID:???
>>165
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity

.section .section p → 詳細度21
p.aaa → 詳細度11

167 :Name_Not_Found:05/03/13 00:28:02 ID:???
p.aaaじゃなく、.section p.aaaじゃなきゃだめなんじゃない?

168 :165:05/03/13 00:48:22 ID:???
>>166
ありがとう。さっそく解説サイト読みました。
詳細度。そんな仕様になってたのね。理解しました。

となると例えば、div.section div.section として指定するのと
.section .section とするのでは、他への影響が変わってくる可能性もあるわけか。

実際のソースでは div.section 連打指定も多く
p.aaa は特殊な存在で、文脈とかあまり関係なしに !important 指定な感じなんだが、
ユーザスタイルのこと考えてあまりしたくないなあとか思ったり。
そうなると、>>167 さんの言うように、つらつら書き連ねるのがいいのかなあ。

169 :Name_Not_Found:05/03/13 09:03:03 ID:???
>>168
基本はカスケードです。

170 :Name_Not_Found:05/03/13 10:39:01 ID:???
>さっそく解説サイト読みました。
「解説」ではなくて「仕様書の邦訳」なわけだが。
提示された資料の文責ぐらい読みませんか、普通。
何でもかんでも鵜呑みにしてしまう気風を感じる。

カスケードするから Cascading Style Sheets なわけで。
本来、こんなことは CSS を学ぶものとして基礎中の基礎。

171 :Name_Not_Found:05/03/13 12:10:11 ID:rL1Q3lMH
リンク部分を四角で囲んだ範囲全体を反応させて、ロールオーバー効果を持たせるようにするには
どうしたらいいのでしょうか?

メニュー部分に使いたいのですが、言葉の長さが違うので困っています。

172 :Name_Not_Found:05/03/13 13:32:55 ID:bzpF8cmy
<h1>や<h2>って絶対に改行入ってしまうんですが、
改行されないようにする方法ってありますか?
nowrapとか使ったのですがうまくいきませんでした。

<h1>のタイトルの両脇に画像を配置したいのですが・・・。

173 :Name_Not_Found:05/03/13 13:49:19 ID:???
>>172
<h1><img *> タイトル <img *></h1> で良いんじゃないの

174 :Name_Not_Found:05/03/13 14:00:06 ID:???
>>172 ><h1>や<h2>って絶対に改行入ってしまうんですが、

ブロック要素 インライン要素っつーのを勉強しようぜ。


175 :Name_Not_Found:05/03/13 14:03:17 ID:???
>>171
aじゃなくてその一個上の要素にwidthを指定してみれば
ソースがないからなんともいえないけど

>>172
display: inline
無駄に行があくのが嫌ならmargin: 0

176 :Name_Not_Found:05/03/13 14:03:47 ID:???
>>171
幅を指定したいのか、したくないのか?
前者なら

a {
display: block;
width: 任意;
paddinng: 任意;
}

後者ならpaddinngのみでとか。

177 :Name_Not_Found:05/03/13 14:13:10 ID:???
>>176
widthを指定しないとIEで手のマークになってくれない

178 :Name_Not_Found:05/03/13 14:18:45 ID:???
質問です。
<h1>にアンカー付きのテキストが入っています。
背景画像としてタイトルロゴを入れて、テキストは
text-indentをつかって表示しないようにしたのですが、
<h1>のボックスをクリックするとアンカーに飛ぶように
うまくできないでしょうか?

179 :Name_Not_Found:05/03/13 14:22:38 ID:???
>>171
ul {
margin: 0;
padding: 0;
list-style: none;
width: お好きな長ざ;
}
li {
margin: 1em;
padding: 0;
}
a {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
border: solid #000000 1px;
text-decoration: none;
display: block;
}
a:link {
color: #000000;
background: #ffffff;
}
a:hover {
color: #ffffff;
background: #000000;
}

とか

180 :Name_Not_Found:05/03/13 14:38:16 ID:???
>>178
>>103の方ですか?
a {
width: 100%;
display: block;
}
画像使ったほうがいい気がするけど

181 :124:05/03/13 17:47:51 ID:???
cssがんばるぞーとか思った矢先に、携帯からも見れるいい掲示板作れ命令がでた・・・・。俺わかんないよ・・、掲示板は。

182 :Name_Not_Found:05/03/13 18:07:36 ID:???
>>181
とりあえずレンタルにすれば? てか、命令ってなんだ

183 :172:05/03/13 18:21:12 ID:???
>>173
なるほど!失念してました。そう言えばその手がありましたね。
>>174
いや、そこは承知の上で聞いておりま。
>>175
ありがとうございます。助かりました!


184 :Name_Not_Found:05/03/13 18:37:50 ID:???
お願いですからhtmlを最低限覚えてから質問してください
htmlなんて難しいものじゃないんで

185 :124:05/03/13 19:21:59 ID:???
クラスのお偉いさんの命令。今度の体育祭に向けて。
携帯で掲示板みてみたんだけど、意味わからなかった。
誰か、お勧めない?

186 :Name_Not_Found:05/03/13 19:29:52 ID:???
まずスレ違い
次に自分で検索してダメだったものを言え
そして、勉強し直してこい

187 :Name_Not_Found:05/03/13 19:37:12 ID:???
ダメだった物を言えなんて優しすぎるだろ
スレ違いだから他でやれ

188 :Name_Not_Found:05/03/13 20:25:26 ID:???
普段学校生活でパソヲタ臭全開で自慢話でも
してるから妙な仕事任されるんだろ( `,_ゝ`)

189 :124:05/03/13 20:31:58 ID:???
やつがやるよりましなんだよ!

190 :Name_Not_Found:05/03/13 20:33:20 ID:???
>>189
とりあえず、おすすめの携帯用レンタル掲示板とやらは別のスレで聞いてくれい。
でなきゃ、リンク集でも検索すればよかろう。

191 :171:05/03/13 21:10:03 ID:rL1Q3lMH
>>176
ありがとうございました

>>179
おー、ほぼ期待通りです!ありがとうございます。

それでこの場合、リストのマージンを0にしてボックスを近づけると、上下の線が二重になってしまいますよね。
右、左、下にボーダーを入れると一番上だけ、ボーダーが付かなくなっちゃうし…。

どうすればいいのでしょうか、よろしくお願いします。

192 :Name_Not_Found:05/03/13 22:25:09 ID:D/LM2Q6/
>>191
> 右、左、下にボーダーを入れると一番上だけ、ボーダーが付かなくなっちゃうし…。

ならul要素の上辺にボーダー描けばいい。

193 :Name_Not_Found:05/03/13 22:30:43 ID:???
ul {
list-style: none;
width: **px;
}
li {
border: solid;
border-width: 1px 1px 1px 1px;
}
li + li {
border-width: 0px 1px 1px 1px
}
テストしてない上IE無視でスマソ

194 :171:05/03/13 23:00:44 ID:rL1Q3lMH
>>192
それでバッチリでした!thx



195 :Name_Not_Found:05/03/14 05:56:46 ID:YyTZ8Uuk
すまそん
スタイルシートでちょっとおせーて欲しいことがあるのだが
この画像を背景全体に↓
http://www.wa.commufa.jp/~x68000/1.gif
そしてこの画像を画面 左5% 上50%↓
http://www.wa.commufa.jp/~x68000/600_450.jpg
で表示させるにはどの様なふうにすればいいのですか?
タグを教えてください。
すいませんド素人でm( __ __ )m

196 :Name_Not_Found:05/03/14 09:26:58 ID:???
素人は言い訳にならんし、スタイルシートにタグなど無い!

197 :Name_Not_Found:05/03/14 11:48:48 ID:???
>>195
background-position
%でうまくいかないUAには、ブロックを一つ追加して対応するのもいいんじゃないかな、と。

198 :Name_Not_Found:05/03/14 13:39:24 ID:QYfadxPt
HTML 4.01doctype宣言するとpaddingも内包されたボックスになってしまうんだけど、paddingを内包しないように回避する方法ある?

199 :Name_Not_Found:05/03/14 13:41:25 ID:???
(・д・)

200 :Name_Not_Found:05/03/14 14:14:17 ID:???
まずHTMLから勉強されてはいかがでしょうか

201 :Name_Not_Found:05/03/14 14:19:58 ID:???
たぶん標準か互換かのことを言ってるんだろうな

202 :Name_Not_Found:05/03/14 15:25:44 ID:???
>>198
>184

203 :Name_Not_Found:05/03/14 19:32:13 ID:???
>>195
<html><head><title>195</title></head><style type="text/css">html {height: 100%;background: url("http://www.wa.commufa.jp/~x68000/1.gif");}
body {height: 100%;margin: 0;background: url("http://www.wa.commufa.jp/~x68000/600_450.jpg") no-repeat 5% 50%;}</style>
<body></body></html>


204 :Name_Not_Found:05/03/14 19:48:40 ID:???
オマイって奴は・・・

205 :Name_Not_Found:05/03/14 20:14:27 ID:???
>>203
回答にしては恥ずかしいぞ。

206 :Name_Not_Found:05/03/14 21:21:26 ID:???
html>body {}
の『>』はどういった意味でしょうか?
説明が載ってるサイトがありましたら教えてください

207 :Name_Not_Found:05/03/14 21:26:34 ID:???
>>206
タグを表します。
あるいは不等号。

208 :203:05/03/14 21:35:16 ID:???
>>205
頭から糞ブラウザは眼中に無い
論理的には十分

209 :Name_Not_Found:05/03/14 22:15:40 ID:???
>>206
IE5.xで凄い事になるので使っちゃダメ☆

210 :フラッシュマン:05/03/14 23:06:50 ID:???
Flashで不完全なCSSを使えるらしいんで、勉強するぞ!!!

オマイラよろしくな!!!

211 :昔の人:05/03/14 23:36:40 ID:???
>>206
なぜ解説サイト一覽(>>7)も見ないのでせうか。檢索すらできないのでせうか。

212 :Name_Not_Found:05/03/14 23:49:48 ID:???
>>203
これ↓入れるの忘れてないかい?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

213 :Name_Not_Found:05/03/15 00:14:29 ID:???
おまえ頭悪いなw

214 :Name_Not_Found:05/03/15 00:27:27 ID:???
れもそう思った

215 :Name_Not_Found:05/03/15 00:30:56 ID:???
れもれも

216 :Name_Not_Found:05/03/15 00:45:05 ID:???
れもタンハァハァ

217 :Name_Not_Found:05/03/15 00:54:56 ID:???
郡山にれもというお菓子があってとてもうまい。
檸檬と書いてれも。

218 :Name_Not_Found:05/03/15 01:04:06 ID:???
れも萌え!!

219 :Name_Not_Found:05/03/15 01:22:53 ID:???
れもがぁみんなの質問にいっしょうけんめい答えるぉ

220 :Name_Not_Found:05/03/15 01:23:56 ID:???
れも

221 :Name_Not_Found:05/03/15 02:09:12 ID:???
おまいら勘違いしすぎだ。よく読め。

214 名前:Name_Not_Found[sage] 投稿日:05/03/15 00:27:27 ID:???
れもそう思った


正式名称は「れ」だったんだよ!!!!!!

222 :Name_Not_Found:05/03/15 04:06:38 ID:eRjbE5id
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
で書いています。

<table width="800">
<tr>
<td align="right"><a href="hoge">menu1</a><a href="hoge">menu2</a><a href="hoge">menu3</a></td>
</tr>
</table>

以上のhtmlをULのfloatで表現しようとしたのですが、まるで駄目でした。
どうすればよろしいでしょうか。

223 :Name_Not_Found:05/03/15 05:48:43 ID:???
cssによって、htmlの<b>タグを無効化することができないでしょうか。
例えば<hr color="#ff0000">とやってても。
cssでhrの色を設定していれば、cssの方が優先されるみたいなやり方で。

224 :Name_Not_Found:05/03/15 07:50:14 ID:???
なんでそれがしたいの?
b {font-weight:normal;}

他のことは知らん

225 :Name_Not_Found:05/03/15 07:58:03 ID:???
>>222
なにをどうして何がダメだったの?
何を教えれば良いかわからん。

226 :Name_Not_Found:05/03/15 08:02:49 ID:???
>>224さん
助かりました、ありがとうございます。
レンタルし一行掲示板のコメントが勝手にすべて<b>が付けられてて、読みにくくて。
設定でも変えられないようなので、cssで可能ならばと思って。

227 :Name_Not_Found:05/03/15 08:03:51 ID:???
>>222
ul {
width:800px;
}
li {
float: right;
width: auto;
display: inline;
}

脳内だから多分間違ってる

228 :Name_Not_Found:05/03/15 13:21:40 ID:???
このまえfloatはブロックだからinlineはイラネとつっこまれた

229 :Name_Not_Found:05/03/15 15:27:36 ID:???
>>227
floatはいらんね。
あと、inlineにした場合
<li>hoge</li>
<li>hoge</li>
とするとスキマができるので
<li>hoge</li
><li>hoge</li>
みたいにするといいかも。

230 :Name_Not_Found:05/03/15 15:54:14 ID:???
お前らハイエナか

231 :Name_Not_Found:05/03/15 17:05:52 ID:???
li > ul {
top: auto;
left: auto;
}

li > ul って初めて見たんだけど、どういうこと。
こんなんあったっけ。

232 :Name_Not_Found:05/03/15 17:55:36 ID:???
IEが対応してないので知らなくていい

233 :Name_Not_Found:05/03/15 18:00:56 ID:???
>>231
li の子の ul の意味。
<ul>
<li>
    <ul>←このul限定
    <li></li>
    </ul>
</li>
</ul>

li ul って書くと、li の子孫の ul って意味。
<ul>
<li>
    <ul>←これも
    <li>
        <ul>←これも含む
        <li></li>
        </ul>
    </li>
    </ul>
</li>
</ul>


234 :Name_Not_Found:05/03/15 19:16:45 ID:???
>>232-233
へぇぇ。ありがとう。li>ul と li ul は違うというこったね。

http://www.alistapart.com/articles/dropdowns/
を参考にこだわりのCSSドロップダウンメニューを作ってて、初めて見たんだよ。
そんなもの入れなくてもモジラとIEでは表示されるし、
いったいなんだろうなと不思議だった。

235 :Name_Not_Found:05/03/15 20:11:34 ID:???
div#top a でcssを適応させるのと
クラスで分けるってどっちがいいの?

236 :Name_Not_Found:05/03/15 20:49:40 ID:???
>>234
>>232の言うとおり、MSIEは今のところ対応していないセレクタの書き方なので、
実際には、li ul と li ul li ul を別指定することで対応するしかないね。

>>235
おこのみで。

237 :Name_Not_Found:05/03/15 21:26:20 ID:???
li ulもli ul li ulも、li直下、liの子ulにはかわり無いんじゃね?

238 :Name_Not_Found:05/03/15 22:00:37 ID:???
liとulが逆なんだと思われ

239 :Name_Not_Found:05/03/15 22:21:10 ID:???
>>237
あ。
li > ul とするのって、
li直下のulに“のみ”指定をしたい場合につかうじゃん、その子孫のulには影響してほしくない場合。
そういうことかと。

240 :239:05/03/15 22:21:41 ID:???
あ、激しく勘違いした。
すまそ。

241 :Name_Not_Found:05/03/16 00:32:26 ID:???
http://www.stunicholls.myby.co.uk/menu/background2.html

ここ、IEでも左側のメニューが動かないんだけど、
どういう仕組み?ソースみてもいまいちよくわからない。
教えてください。

242 :Name_Not_Found:05/03/16 00:44:28 ID:???
>>241
擬似フレームとかいうのじゃ?

243 :Name_Not_Found:05/03/16 00:46:15 ID:???
>>242
どうやら違うみたいなんです。

244 :Name_Not_Found:05/03/16 00:48:46 ID:???
擬似フレームじゃないな
position:fixedてIE対応してたっけ?

245 :Name_Not_Found:05/03/16 00:49:20 ID:???
>>244
してないです

246 :Name_Not_Found:05/03/16 01:17:02 ID:???
やり方はよくある擬似フレームと似たようなもんだけど
mozillaでもスクロールできるしこっちの方がスマートだな

247 :Name_Not_Found:05/03/16 07:50:37 ID:65N0WvmC
ローカルでは効いているのに、サーバにアップすると効きません。
今までと同じ方法で作っていて、同じようにアップしています。
こんな症状になったのは初めてです。Macで作成しています。
変わったことは、今までWinでEmEditerで書いてたのを、Macのmiにしたことくらいです。

CSSファイルは文字コードはShift Jis、改行コードはCR+LFで保存しました。
何か関係がありますか?

リンクのタグ
<link rel=stylesheet href="css/main.css" type="text/css">


試したブラウザ
Mac :Safari1.2 IE5 Firefox
Win:IE6 Firefox


248 :Name_Not_Found:05/03/16 07:59:30 ID:???
>>247
改行コードLFで保存する。
あるいは、アップロード時にFTPソフトでLFに変換する。

とか、してみれば?

249 :247:05/03/16 08:07:38 ID:???
>>248
あっ!Macでは表示できるようになりました。
でもWinではまだダメです。何故でしょう…。

CSSはLFで保存しないといけないんですか?

250 :Name_Not_Found:05/03/16 09:13:10 ID:???
>>241
height: 100%;

251 :Name_Not_Found:05/03/16 09:52:18 ID:???
>>249
CSSつーか、サーバがユニックス系なら、サーバ側のテキストファイルの改行コードがLFだからって話。
テキストファイルは全部、LFでアップロードしなおさなきゃならんかもね。

252 :Name_Not_Found:05/03/16 13:48:58 ID:???
そうだ、タイトルに自動的にナンバーを振ってみよう!と思い、以下のように書いてみました。

<style type="text/css"><!--
body{
padding:2em;
}
.list{
display:list-item;
list-style-type:decimal;
border:1px red solid;}
p{
disply:inline;
}
--></style>
<html>
<body>
<h1 class="list">hogehoge</h1>
<p>fugafuga</p>
<h2 class="list">hogehoge</h2>
<p>fugafuga</p>
<h3 class="list">hogehoge</h3>
<p>fugafuga</p>
<h2 class="list">hogehoge</h2>
<p>fugafuga</p>
</body>
</html>

すると、タイトルに 1 3 5 7 とナンバーが振られていきます。
間にある段落をとり省くと、 1 2 3 4 と振られます。
pをaとかに変えてみても、 1 3 5 7 と…。
順番通り 1 2 3 4 と番号を振るにはどうすればいいのでしょうか…?

253 :Name_Not_Found:05/03/16 13:49:58 ID:???
>>250
わかりません

254 :Name_Not_Found:05/03/16 13:58:38 ID:???
JSこーい

255 :Name_Not_Found:05/03/16 14:22:37 ID:uDBRApbS
>>252
Mac の Safari , Opera7.54 は、1,2,3,4 と表示
Mac の Firefox1.0.1 は 0,0,0,0 と表示
どちらも、間のpは関係なし。あっても無くても同じ表示

256 :Name_Not_Found:05/03/16 14:23:43 ID:???
>>250
( ゚д゚)ポカーン

257 :Name_Not_Found:05/03/16 15:46:10 ID:EAp6hnS2
>>252
ttp://kur0nek0.web.infoseek.co.jp/obon/04/index.html

258 :Name_Not_Found:05/03/16 15:56:04 ID:???
↑なんかびっくりさせるページ。精神的ブラクラみたいな。

259 :Name_Not_Found:05/03/16 16:03:32 ID:???
ワロタw

258 被害妄想激しすぎ

260 :Name_Not_Found:05/03/16 16:13:15 ID:???
そうか? 音量でかいとびびらん?

261 :Name_Not_Found:05/03/16 16:16:44 ID:???
慣れていないだけかと思われ。
で259は毎日こんなのに引っ掛かって慣れている。

262 :Name_Not_Found:05/03/16 16:19:43 ID:???
なんだ音出るページなのか

263 :Name_Not_Found:05/03/16 16:24:08 ID:???
普通のサイトだと思って開いちまったじゃねええかああああああ
クソッ、久しぶりだ。

264 :Name_Not_Found:05/03/16 16:26:45 ID:???
大漁のようで

265 :Name_Not_Found:05/03/16 16:43:50 ID:???
俺見たけど「プラグインが必要です」ってブラウザに怒られた

266 :Name_Not_Found:05/03/16 16:52:42 ID:???
>>252
以下CSS
body {padding:2em;}
.ol {list-style-type:decimal; -moz-counter-reset: -html-counter 0;}
.list {display:list-item;}
.list h1, .list h2, .list h3 {border:1px red solid;}
p {disply:inline;}


以下body内
<div class="ol">
<div class="list">
<h1>hogehoge</h1>
<p>fugafuga</p>
</div>
<div class="list">
<h2>hogehoge</h2>
<p>fugafuga</p>
</div>
<div class="list">
<h3>hogehoge</h3>
<p>fugafuga</p>
</div>
<div class="list">
<h2>hogehoge</h2>
<p>fugafuga</p>
</div>
</div>

267 :Name_Not_Found:05/03/16 16:56:18 ID:???
>>257
イイ!( ^ω^)

268 :Name_Not_Found:05/03/16 17:05:36 ID:???
>>253
body {height:100%; overflow:auto;}
を入れると、position:absolute 指定がfixed指定と同じになる。
もちろん、fixedでも同じ。

269 :268:05/03/16 17:30:48 ID:???
あっ、失礼。
IE6には fixed がないから absolute だけだね。
後、標準モードにせないかんのかな。

270 :Name_Not_Found:05/03/16 18:09:09 ID:EtNnT8VH
http://deztec.sakura.ne.jp/x/03/02/design/index.html
このサイトの右上のメニューのように、
スクロールしても位置が動かないボックスを作りたいのですが、
ソースを見ても全然分かりません。
どういうスタイルがそういう動きにしているのか、分かる人は教えてください。

271 :Name_Not_Found:05/03/16 18:33:47 ID:???
>270
position: fixed;

272 :Name_Not_Found:05/03/16 18:39:09 ID:???
>>270
>>241と同じような方法っぽい。

273 :Name_Not_Found:05/03/16 18:44:08 ID:???
じゃばすくりぷと

274 :268:05/03/16 18:56:17 ID:???
もしかして俺が答えたばっかりじゃないの?

>>270
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

おそらくIE6のバグなんだろう(ラッキーなバグだ)。
他のブラウザーは position: fixed; にしないとダメみたいだね。

>>241を見ると↓でハックさせてるみたい。

/* 全ブラウザー */
#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;}

275 :268:05/03/16 19:07:24 ID:???
もしかしてアンダーラインHack を使えば1行ですみそうな。。。

#menu {position:fixed; _position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

276 :Name_Not_Found:05/03/16 20:02:38 ID:???
* html
WinIEだとこんなものが通用するのか。

277 :Name_Not_Found:05/03/16 20:20:48 ID:???
>>275
スコアじゃない?

278 :Name_Not_Found:05/03/16 20:41:48 ID:???
IEは*を知らないのでhtml要素に対する指定だと勘違い
*を知ってるブラウザは、なにかの子孫のhtml要素なんかネーヨと無視する
ってことか?

279 :Name_Not_Found:05/03/16 21:21:35 ID:???
fixedって全ブラウザ(最新)対応しているの?

280 :Name_Not_Found:05/03/16 21:26:21 ID:???
糞なIEの為にみんな苦労してるんだな
すべてM$の怠慢の為に...
M$の会長は左手にうちわ

馬鹿は所詮馬鹿

281 :Name_Not_Found:05/03/16 21:28:12 ID:???
>>275
それだと、多分Operaも認識しちゃうんじゃ?

282 :Name_Not_Found:05/03/16 21:29:08 ID:???
糞なIEのために苦労しているんではない。
お客,金のために苦労している。


283 :Name_Not_Found:05/03/16 21:43:09 ID:???
<!--[if IE]>
<style>

</style>
<![endif]-->

とか、使ってるけど。

284 :Name_Not_Found:05/03/16 21:44:16 ID:???
なにそれなにそれ

285 :Name_Not_Found:05/03/16 22:04:52 ID:???
別ファイルじゃなくて
htmlファイルにcssを書いてるってことか?

286 :283:05/03/16 22:08:55 ID:???
IEは
<!--[if IE]><![endif]-->
これの中身をコメントとして呼び飛ばさない。versionとかも指定できたはず。(IE5とかIE6とか)

で、”まとも”なcssは別ファイルで書いといて、IEのバグに対処する部分をHTMLの方に
このコメントもどき(IE以外じゃコメント)で上書きしてる。

287 :Name_Not_Found:05/03/16 22:09:55 ID:???
×呼び飛ばす
○読み飛ばす

失礼。

288 :Name_Not_Found:05/03/16 22:39:41 ID:???
p {float:left;}

<div style="background:#ddd;">
<p>ほげほげ</p>
<p>ほげほげ</p>
<p>ほげほげ</p>
<br style="clear:both;" />
</div>

こう言うbrの使い方ってあんまり良くない?

289 :Name_Not_Found:05/03/16 22:49:13 ID:???
よくないけどしょうがない

290 :Name_Not_Found:05/03/16 22:49:40 ID:???
理由があってきちんと表示されるなら良いと思うけど

291 :Name_Not_Found:05/03/16 22:50:28 ID:???
>>286
ここはIEのスレはありません。
>>288
論外

292 :Name_Not_Found:05/03/16 23:06:20 ID:???
すごく初歩的なことなんだろうと思うんですけど
一応cssなのでここで質問させてください。

画像にリンクを設定して、枠線(1px)を表示して
オンマウスでその枠線の色が変わるようにしたいだけなのですが、
うちの環境(Mac + IE or NN)では↓のソースで表示できるのに
Windowsでは枠線の色が変わらないのです。
どちらでも同じように、オンマウスで枠線の色が変わるようにする
方法はないでしょうか?教えてください。

<html>
<head>
<title></title>
<style type="text/css">
<!--
img { border-style : solid ;
border-width : 1px ;}
a:link { color : #000000 ;}
a:visited { color : #000000 ;}
a:hover { color : #FF0000 ;}
a:active { color : #000000 ;}
-->
</style>
</head>

<body>
<a href="#"><img src="01.jpg" width="80" height="80" alt=""></a>
</body>
</html>

293 :Name_Not_Found:05/03/16 23:40:30 ID:???
>>292
aにボーダーをつけて、その色をborder-colorで変えればいいのでは?

294 :Name_Not_Found:05/03/16 23:42:37 ID:???
colorでなくborder-colorでやればできると思うぞ

295 :292:05/03/17 00:20:42 ID:???
>>293
a:link { border : 1px solid : #000000 ;}
a:hover { border : 1px solid : #FF0000 ;}
にしてみました。Win、Macともにダメでした〜。

>>294
img { border-style : solid ;
border-width : 1px ;}
a:link { border-color : #000000 ;}
a:hover { border-color : #FF0000 ;}
にしてみました。やっぱりWin、Macともにダメでした〜。

>>293-294 ありがとう。指定の仕方が間違ってたら教えてください。
うち一応Mac・Win両方あるのですぐに試せます。
ただ私の中にアイデアとか知識とか選択肢がないのです。

Macでは、単にa { color }でカラーを指定しておけば
枠線にも適用されるんですけど、Windowsは適用されないんです。
すごい単純なことのように思うんですけど……。

296 :Name_Not_Found:05/03/17 00:30:42 ID:???
セレクタが違うな
a img:hover {}とかでやんなきゃダメだよ

297 :Name_Not_Found:05/03/17 00:31:19 ID:???
ごめん間違った

a:hover img {}

…でできるのか?

298 :Name_Not_Found:05/03/17 00:34:17 ID:???
>>295
とりあえずこれで Win + IE6 でできたよ。

img{border:0px;}
a:link{border:1px solid #000000;}
a:visited{border:1px solid #000000;}
a:active{border:1px solid #000000;}
a:hover{border:1px solid #ff0000;}


あと、これ↓はおかしいからね。
> a:link { border : 1px solid : #000000 ;}
> a:hover { border : 1px solid : #FF0000 ;}

299 :292:05/03/17 00:48:44 ID:???
>>296
ありがとう。
a:link img{ border-color : #000000 ;}
a:visited img{ border-color : #000000 ;}
a:hover img{ border-color : #FF0000 ;}
a:active img{ border-color : #000000 ;}
にしたらMacでは枠線の色変わりましたがWinは変化なしでした。

>>298
うちのWin + IE5ではなぜかうんともすんとも言わず枠線も表示されずじまいです……。
ありがとう。おかしいってのはスペースが要らないってことですか?

300 :Name_Not_Found:05/03/17 00:51:58 ID:???
>>299
a:link { border : 1px solid : #000000 ;}
a:hover { border : 1px solid : #FF0000 ;}

こう↑じゃなくて、こう↓

a:link { border : 1px solid #000000 ;}
a:hover { border : 1px solid #FF0000 ;}


私はブラウザとかOSによる互換性があまりわからないんだよね。ごめん。
わかる人には一発でわかりそうだから、ちょっと待てば教えてもらえるかも……。

301 :292:05/03/17 00:56:19 ID:???
>>300
ハァッ!ありがとう。わかりました。恥ずかしいなあ。
今夜中に解決しなければいけない問題でもないので
いろいろ試しながら気長に待つことにします。どうもありがとう。

302 :Name_Not_Found:05/03/17 02:57:13 ID:???
え >>300のやり方でもできなかったの?

303 :Name_Not_Found:05/03/17 03:59:02 ID:???
多分、クラス付けとかしないとできないよ。
a:hover imgとかのセレクタはIEじゃ対応してないからね。

304 :Name_Not_Found:05/03/17 07:38:07 ID:LdHXf7H/
日本電子専門学校のサイトを参考にしているんだけど、
ttp://www.jec.ac.jp/
どうして、MacIEだけハックしているのか分からない。

305 :Name_Not_Found:05/03/17 12:27:23 ID:???
>>303
うそは駄目。
だいたい何で>>292はFAQのA9(>>10)も読まずに質問してるのかな。
IE5なんて古いのは試せないが、IE6でも
A:hover IMG {border:1px solid #f00;}
で出来てるよ。

306 :292:05/03/17 14:14:31 ID:???
>>305
>>10読みましたよ。
あと事実うちのWinにはIE5が入ってるし、全員がIE6使ってるわけではないから
出来る限り多くのバージョンに対応したいと思うことがそんなにいけないことですか。
あなたの出してくださった例に関しては>>299で実践済みです。

307 :292:05/03/17 14:24:03 ID:???
↑間違いました。>>299「のあと」で実践済みです。
IE5ではオンマウスでも色が変わらないです。Macでは変わるんですが。

JavaScriptで解決する方法があるらしいので
ttp://www.gac.jp/article/index.php?stats=question&command=msg&category=3&id=3542
そっちを使うことにします。どうもありがとうございました。

308 :Name_Not_Found:05/03/17 14:24:48 ID:???
>>>10読みましたよ。
それなのに、なんでcolorなんかで指定して、borderを使ってなかったわけ?
読んでも理解できなかったのかな。

309 :Name_Not_Found:05/03/17 14:26:50 ID:???
>>306
セキュリティーの問題があるからIE5なんてヴァージョン・アップしなくちゃダメ。
インライン要素へのborder指定などが有効なのはIE5.5からだし。

310 :Name_Not_Found:05/03/17 14:27:45 ID:???
あと事実うちのWinにはIE5が入ってるし、全員がIE6使ってるわけではないから
出来る限り多くのバージョンに対応したいと思うことがそんなにいけないことですか。

311 :292:05/03/17 14:28:26 ID:???
>>309
ハァッ!ありがとう。わかりました。恥ずかしいなあ。

312 :Name_Not_Found:05/03/17 14:30:50 ID:???
CSS対応表(>>7)も見てないのかい。

313 :Name_Not_Found:05/03/17 14:54:43 ID:???
できたら、教えてね
オレも解らなかったから

314 :Name_Not_Found:05/03/17 15:01:38 ID:???
何を? >>313

315 :Name_Not_Found:05/03/17 15:12:00 ID:???
オンマウスで線の色が変わる方法

316 :Name_Not_Found:05/03/17 15:17:18 ID:???
>>315
とっくに既出だが?
a:hover img {border:1px solid #f00;}

317 :Name_Not_Found:05/03/17 15:20:48 ID:???
>>292
IE6だと両方出てしまうけど、両方書けばIE5でもできたよ。

img {
border : 1px solid #000 ;
}
a {
border : 1px solid #000 ;
}
a:hover {
border : 1px solid #f00 ;
}
a:hover img {
border : 1px solid #f00 ;
}

318 :Name_Not_Found:05/03/17 15:23:51 ID:???
「両方出てしまう」とは、何が?

319 :Name_Not_Found:05/03/17 15:37:35 ID:???
すまそ、IE6だとimgとaのボーダーが両方でているので、
ボーダーが2pxに見えませんか?IE5だとOKです。

320 :Name_Not_Found:05/03/17 15:46:40 ID:???
>>319
うん、IE6だとそうなる。で、2pxのうち内側のaのボーダーだけ色が変わる。
で、imgのボーダーを0pxにするとIE6以外ではボーダーが全く見えなくなる、のかな?

321 :320:05/03/17 15:47:27 ID:???
まちがえた

× 内側のaのボーダー
○ 外側のaのボーダー

322 :Name_Not_Found:05/03/17 15:49:38 ID:???
>>317
a {
border : 1px solid #000 ;
}
ではなく
a img {border:1px solid #000;}

a:link img, a:visited img {border:1px solid #000;}
にすべきなんだよ。

323 :Name_Not_Found:05/03/17 15:53:52 ID:???
>>320
>で、imgのボーダーを0pxにするとIE6以外ではボーダーが全く見えなくなる、のかな?
は? 何でIE6が? 「NN4以外では」の誤りでは。

324 :Name_Not_Found:05/03/17 15:58:52 ID:???
簡単そうでなかなか難問だったんだな。

325 :Name_Not_Found:05/03/17 15:59:54 ID:???
>>317
a:link img, a:visited img {border:1px solid #000;}
a:hover img, a:active img {border:1px solid #f00;}
で、沢山だよ。
それでうまくゆかなかったら、他に変な指定をしてるから。

326 :Name_Not_Found:05/03/17 16:00:47 ID:???
>>324 回答者の程度が下がっただけでしょ。

327 :Name_Not_Found:05/03/17 16:04:48 ID:???
>>323
ごめんまちがえた。
でも、少なくともIE6で>>298の方法で見れるのは確か。

328 :Name_Not_Found:05/03/17 16:08:49 ID:???
>>326
お前が言うなよ

329 :Name_Not_Found:05/03/17 16:17:06 ID:???
>>327
だからさ、>>298のやり方が駄目なのは、
アンカーの中のimgではなくアンカーに対してborderを設定してるから。

330 :Name_Not_Found:05/03/17 16:19:33 ID:???
>>329
じゃあ>>325のやつで全ブラウザ対応&解決ってこと?

331 :Name_Not_Found:05/03/17 16:21:36 ID:???
NN4以外は。

332 :Name_Not_Found:05/03/17 16:26:54 ID:???
>>320-322
a img {border:1px solid #000;} の方がいいですね。IE5でもOKです。

>>325
サンx。なぜかIE6とIE5両方ともhoverが効かないです。バグですかね?

333 :Name_Not_Found:05/03/17 16:30:39 ID:???
×a img {border:1px solid #000;}
○a img {border:1px solid #000;} とボーダーを0pxにする

334 :Name_Not_Found:05/03/17 17:03:05 ID:???
>>332
擬似クラスにスタイル指定がないと擬似クラスの子孫要素への指定が効かない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b077.html
だから、下記の通りすれば、効く。
a:hover {background: transparent;}
a:link img, a:visited img {border:1px solid #000;}
a:hover img, a:active img {border:1px solid #f00;}

335 :Name_Not_Found:05/03/17 18:14:45 ID:???
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/syntax.html
このページのテーブルは、マウスが乗ると色が変わるのですが、
こういうのはどうやるんですか?

336 :Name_Not_Found:05/03/17 18:25:17 ID:???
>>335
tdやtrのhoverがつかえるUAならそれで。
駄目ならJavaScriptで。

337 :Name_Not_Found:05/03/17 18:36:01 ID:???
>>335 なぜソースも見ずに訊くのですか。

338 :Name_Not_Found:05/03/17 18:44:08 ID:???
>>334

効いたです。BLAVO!

339 :Name_Not_Found:05/03/17 18:56:20 ID:???
>>335


カーソルが乗ると  色が変わるよ


って組んであるから

340 :Name_Not_Found:05/03/17 20:10:11 ID:???
>>339
「どうやるのか」を聞いてるのに、
「どうしてそうなるのか」に答えてる。

それは違うだろ。

341 :Name_Not_Found:05/03/17 20:13:25 ID:???
うん、違うね。つぎぃ。

342 :Name_Not_Found:05/03/17 20:25:09 ID:???
□□□
□□□■
□□□■
  ■■■

上の図がずれていないといいんですが。

すみません。上記のようにboxに影をつけることはCSSでは可能でしょうか。
boxと同サイズで背景が黒のboxを用意して、positionをずらして配置すればいいというのは
分かるのですが、それだと、boxの大きさに合わせて毎回指定しなければなりません。

私がこのデザインを見たことのあるサイト様では、tableタグを使用していましたが、
表でもないものにtableタグを使用することに違和感を感じてしまいます。

自動的に上のboxのサイズを読み取って、下の影のboxのサイズも決定できるような
方法と言うのはありますでしょうか?

343 :Name_Not_Found:05/03/17 20:31:41 ID:???
>>342
背景画像を使ってみたらどうか。
ボックス自体の右にパディングを入れて、そこに背景画像として、右側の影を入れる。
その下にヘッダーとかなんとか言ってボックスを設けて、
そいつの背景画像を、下の影にすればいいのでは。

□□□
□□□■
□□□■
□□□■
<!--ここまでがボックス-->
  ■■■
□□□ <!--ここがヘッダー-->

344 :Name_Not_Found:05/03/17 20:43:26 ID:???
脳内だが、この方法はどうだ?
影になるボックスの中に本文のボックスを入れる
そして、右上や左下の影がないところは違うボックスを入れて、影ボックスの背景を隠す。
paddingを使えばいけそうだが、ムリああるか・・・・

345 :Name_Not_Found:05/03/17 20:56:22 ID:???
divで囲んでそのdivにborder-rightとborder-bottomをつけるやり方じゃダメなん?

346 :292:05/03/17 21:00:06 ID:???
>>334
神様!ありがとう!感謝します。出来ました。

みなさん考えてくれてどうもありがとう。途中キレてごめんなさい。
あと>>311は騙りです。わかると思うけど一応書いておきます。

>>308
>なんでcolorなんかで
うちのMacではその指定で思い通り表示できるからですよ。
292で書き込む前にborderもテストしてたんですが、
説明するのに一番手間取らなくて済みそうな書き方が292だったので。
クラス分けしてでもcolorで指定できればそれが一番ややこしくないと思ったので。
>>306
うちのWinは今は常時オフラインなのでIE5は動作確認用に取っておきます。
最新版をインストールしてるとは限らない人をターゲットにした
ページを作っているので。心配してくれてありがとう。

結局>>334の方法以外は全部Win、Macのどちらか、あるいは両方がダメでした。
>>325さんごめんなさい。他に変な指定はしていませんがやっぱりそれではダメでした。
ありがとうございました。

347 :342:05/03/17 21:16:46 ID:???
皆様アドバイスありがとうございます。

>>343
boxを上下に分割して、影を画像として扱うのですね。
画像で処理をするというのは考えていませんでした。参考になります。

>>344
私も最初はそう考えました。
が、生半可にしか勉強していない頭からいい書き方が生まれてくるはずもなく。
floatをうまく使えばいけるのかなぁと思ったのですが。。。

>>345
その方法だとboxの右と下の端から端までborderが描かれることになってしまいます。
borderの幅が小さければいいのですが、大きくすると不自然になってしまうのです。


343様が提案してくださったように、画像を使って一度創ってみたいと思います。
皆さん色々な意見ありがとうございました。

348 :Name_Not_Found:05/03/17 21:46:25 ID:???
>>347
昔、こんな↓案があったね。
まぁ、参考程度に。

<html>
<head>
<style type="text/css">
.shadow
{
background:#999;
width: 100px;
}

.light
{
padding: 5px;
background:#fff;
border: 1px solid black;
position:relative; left:-7px; top:-7px;
}
</style>
</head>

<body>
<div class="shadow">
<div class="light">ボックス</div>
</div>
</body>
</html>


349 :Name_Not_Found:05/03/17 22:06:32 ID:???
>>346
線(border)なのにcolorで何とかしようって、その発想がどうかしてるのよ。


350 :Name_Not_Found:05/03/17 22:15:45 ID:???
border-colorの初期値はcolorの指定値だがね

351 :Name_Not_Found:05/03/17 22:32:00 ID:???
>>349
結局わからなかったオカマが偉そうに何を言うか

352 :Name_Not_Found:05/03/17 22:41:55 ID:???
325=334=349

353 :342=347:05/03/17 22:43:58 ID:???
おおお! まさにイメージしたとおりのレイアウトです。
ありがとうございます。

先に影となるboxを書いてから、相対位置を左上にとって本命のboxを書くのですね。
負の値で位置を指定することは、全然思いつきませんでした。
目から鱗が落ちた思いです。勉強になりました。

348様、本当にありがとうございました。

354 :Name_Not_Found:05/03/18 10:29:31 ID:???
質問でーす。
bodyにリンクの色を定義して、 あるクラスの中で例として<b>タグを使うとする。
<b>以外のリンクはbodyのリンク色になる。<b>にbodyとは違うリンクの色を定義したんだけど。
反映されなかった。でもリンクの色じゃなくてcolor指定なら変わった。
bとかstrongにリンク色定義するのは無駄無駄無駄仕様?
***.css
a:link{
color: #------
}
(visitedとhoverも書いて)
.class b a:link{
color: #------
}
(visitedとhoverも書いて)
これだとb文字のリンクした色がbodyになったので.class b{ color: #------ }に変えたら
色は変わったので一応間違ってないと思う。 誰か教えてえろい人

355 :Name_Not_Found:05/03/18 10:54:01 ID:???
何いってるかわからんよ。

356 :354:05/03/18 11:31:27 ID:???
>>355
…(´Д`;) 多分これで解ると思う。

<table border="0" cellpadding="0" cellspacing="0" width="300" class="abc">
<tr>
<td><a href="1">テスト</a><p><a href="2"><b>テスト2</b></a></p>
</td>
</tr>
</table>
ちょっと略したけど…これで表に通常文字と太文字が入ってる状態。
↓***.ccs↓
a:link{
color: #0000ff ←青
}
a:hover{
color: #ff0000 ←赤
}

.abc b a:link{
color: #008000 ←緑
}
.abc b a:hover{
color: #ff8000 ←オレンジ
}

こうしたら表の中の「テスト」のリンクの色は青、onで赤。
<b>タグで定義されてる「テスト2」のリンクの色は緑、onでオレンジじゃない?
でも色は青と赤のリンクだった。
「.abc b a:link」ってのが間違ってるのかな?って思って「.abc b」にしてみたら
色が変わったから多分間違ってる書き方ではないよね?
だから<b>や<strong>タグ等に合わせてリンク色指定しても色が変わらない仕様なのかな?って聞いてる質問だった。。(最初からこう書けばよかったな…orz
あと仮に仕様だとして どういう回避法で同じ見方に出来るかな? 出来るだけバイトは食いたくないんで一個一個リンク色決める方法はちょっと…(´;ω;`)

357 :Name_Not_Found:05/03/18 11:38:29 ID:???
>>356
.abc b a:link は class="abc"の中の<b>の中の<a>なんだから、
提示されたHTMLソースにそんな場所無いじゃん。
テスト2の部分は .abc a:link b だろ。


358 :354:05/03/18 11:47:46 ID:???
>>357
ぉ。 ホントだ… .abc a:link b でやったら出来た。。
ちゃんと順番があったのか…orz 知らなかったorz
ホント ありがとぉ。

359 :Name_Not_Found:05/03/18 11:48:35 ID:???
>>354でbody bodyと連呼しているがbodyの指定なんかどこにも無いのな。

360 :354:05/03/18 11:57:06 ID:???
>>359
クラス定義の中に入ってるのがクラスごとのソースって思ってて
それ以外の いきなり「a:〜」とか「strong:〜」から始まるのは全部bodyの部分だと解釈してるんだけど…
違うかな?(´・ω・`)

361 :Name_Not_Found:05/03/18 11:59:54 ID:???
body body bodyに清き一票を・・・

362 :Name_Not_Found:05/03/18 12:24:39 ID:???
>>360
確かにHTMLのスタイル指定なら、普通の場合はbodyの子孫ではあるなぁ。
でも、CSSにおいてはすべての要素は平等だから、bodyだけ特別扱いされるのも困る。

a{...} は <a> に。strong{...} は <strong> に指定しているのであって、
aのスタイルを指定するのにbodyは関係ないし、bodyにはリンク色など無い。
というか仕様書とか読んでCSSの書き方勉強した方がいいかも。


363 :354:05/03/18 12:49:37 ID:???
>>362
なるほど。 前者に言ってた全部bodyってのは まぁ当たってるけど(?)。
もっとよく掘り下げて考えてみると362さんが言ってるのが深くて正しいね。

仕様書は…色々言語とかやってるけど全部独学だから多分コマコマしたところは読まない主義なのかも…orz(駄目
でもまぁこの議題に措いては362さん(357さん)の観点から見れるようになれました。

あぁ…あと最後にいいかな…orz
ナローバンドじゃないから解らないんだけど。cssインクルードするのとHTMLに直接埋め込んでおくのとじゃ 前者の方がちょっとは早く読めたりするのかな?(´・ω・`)

364 :Name_Not_Found:05/03/18 13:04:44 ID:???
>>363
ファイル分けると、キャッシュに期待できるから。
その分だけ。

365 :Name_Not_Found:05/03/18 15:05:50 ID:cl2Xdpqc
スタイルシートの設定のところ
.mozinoookisa150{font-size:150px}


本文
<div class="mozinoookisa150"><br></div>
でたくさんの空白行を作っているのですが、

下みたいなやり方とどっちが文法的にはよいのでしょうか?
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

366 :Name_Not_Found:05/03/18 15:17:12 ID:???
>>365
おもしろいね君

367 :Name_Not_Found:05/03/18 15:27:28 ID:cl2Xdpqc
かなり真面目に作ってるんですが、こういうスタイルシートの使い方はヤバイとかあるのでしょうか。
他のブラウザで見ると表示がくずれるとか。
もしそうならばすぐにでもやめたいと思いますが、
ちょっと文法的にまずいぐらいなら使っていきたいと思うので。

368 :Name_Not_Found:05/03/18 15:30:49 ID:???
どうでもいい質問なんだけど
<STYLE type="text/css"><!-- 〜 --></STYLE>
みたいにstyleの内側をコメントでくくるのって厳密には文法違反だったりしない?

369 :Name_Not_Found:05/03/18 15:33:34 ID:???
適当な文字列 : ほげほげ
適当な文字列2 : たらたら

こんなのをコロンの水平位置をそろえたい(table使うみたいに)

適当な文字列の長さはまちまち。
字の大きさを変えても表示は崩れない。
各々1行で表示。
縦をまとめてdiv辺りで括れば良いんだろうが、文書構造的に…なので。

こんな条件で、どうすれば良いか教えてくださいな。

370 :Name_Not_Found:05/03/18 15:35:52 ID:???
>>367
空白を空ける前後のブロック要素にmargin-bottomなり、margin-topなりを指定すれば済む。

371 :365:05/03/18 15:48:45 ID:???
そのブロック要素がどこにも無くて困ってます。

スタイルシートの設定のところ
.mozinoookisa150{margin-top:150px}

<div class="mozinoookisa150"></div>
こっちの方がいいのかな。

372 :Name_Not_Found:05/03/18 16:11:36 ID:???
>>371
何でブロック要素がどこにも無いんだ?
インラインの途中なら前後の文章をdivで囲ってmarginが一般的かと。

インライン要素の途中で空間開ける必要性があまりわからんけど。


373 :Name_Not_Found:05/03/18 16:13:36 ID:???
>>369
dlとdtとddで。

374 :Name_Not_Found:05/03/18 16:28:02 ID:???
>>373
いや、それだけじゃ無理だろ。

>>369
これは、漏れもやりたくて悩んだが結局出来なかった。
マージンを固定するしかないような希ガス。

dt { width:8em; float: left }
dd { margin-left: 8em }
<dl><dt>適当な文字列</dt><dd>: ほげほげ</dd></dl>
<dl><dt>適当な文字列2</dt><dd>: たらたら</dd></dl>

それでもブラウザ縮めたら↓こうなる罠。
適当な文字列2 : たらた |
          ら      |

誰か出来た人いたら例をplz.

375 :Name_Not_Found:05/03/18 16:50:21 ID:???
dl { white-space :nowrap }
じゃダメ?


376 :Name_Not_Found:05/03/18 16:58:59 ID:???
>>374-375
width:8em の段階で、>適当な文字列の長さはまちまち。 に対応できないような。
長いの来たらどうする?

377 :373:05/03/18 16:59:58 ID:???
>>374
スマソ。
普段は、dlなりその親の幅を固定して、
dtの右端か、ddの左端に、background-imageでコロンを置く。

このコロンは性格的にリストのマーカーと同じものなので、
contentを使うのは無理、という判断からです。

378 :Name_Not_Found:05/03/18 17:30:26 ID:???
>>374
dt { margin: 0; padding: 0; display: block; float: left; clear: left; width: 25%; }
dd { margin: 0; padding: 0; display: list-item; float: right; clear: right; width: 50%; list-style-image: url("colon.png"); }

とか。
colon.pngは:を画像にしたもの。

IEなどをシカトするなら素直に
dd:before { display: marker; content: ":"; }
とか。

またはdisplay: tabell-cell;を駆使するというのでも良さげ。

379 :Name_Not_Found:05/03/18 17:32:42 ID:???
tebellってなんだおい

380 :Name_Not_Found:05/03/18 17:40:21 ID:???
>>369
tableでやれ、それは”表”だ。

381 :Name_Not_Found:05/03/18 17:48:43 ID:???
ハゲドウ

382 :Name_Not_Found:05/03/18 18:18:29 ID:???
もう、表すらもテーブルで作りたくないとこまで
行っちゃってるんだね

383 :Name_Not_Found:05/03/18 18:26:10 ID:???
いや、たんなるアホかと・・・

384 :Name_Not_Found:05/03/18 18:37:04 ID:???
スレによって同じことをしてもアホと呼ばれたり呼ばれなかったりするのがこの板の困ったところです。

385 :Name_Not_Found:05/03/18 18:54:19 ID:revYUrWO
先生!教えてください。

画面中央に高さ100%のボックスを置きたいのです。
以下のようなソースで、一見成功なのですが、
内容テキストの量が増えて、ブラウザの高さをはみ出すと(スクロールすると)、
Mac Safariでは背景のグレーが初期表示されている箇所以降表示されません。
内容テキストが増えたら、ボックス"main"の高さも一緒に増えて欲しいんです。

何か良い方法ご存知ありませんか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html4/loose.dtd">
<html>
<head>
<style type="text/css">
HTML,BODY { height:100%; }
.main { height:100%; width:500px;background-color:#cccccc;
    margin-left:auto; margin-right:auto;}
</style>
</head>

<body>
<div class="main">
<p>内容テキスト</p>
<p>内容テキスト</p>
<p>内容テキスト</p>
</div>
</body>
</html>

386 :Name_Not_Found:05/03/18 19:12:56 ID:revYUrWO
>オレへ

これじゃないかな
http://www.mozilla.gr.jp/standards/webtips0020.html

387 :Name_Not_Found:05/03/18 19:30:00 ID:???
告知
developer.kde.org
> KHTML: Complete CSS 2.1 support
キタ━━━━(゚∀゚)━━━━ッ!!

388 :Name_Not_Found:05/03/18 22:32:40 ID:???
>>371
とりあえず、空白入れたい所の前後を<div>でくくる。

.mozinoookisa150{margin-top:150px}

<div>
 ・
 ・
 ・
</div>
<div class="mozinoookisa150">
 ・
 ・
 ・
</div>

389 :Name_Not_Found:05/03/18 23:41:00 ID:???
>>368
HTMLでは全然文法違反じゃない。
ただしXHTMLでは「<!--」「-->」でくくられた部分が無視されてもおかしくはない。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#comments

390 :Name_Not_Found:05/03/19 05:31:28 ID:???
W3Cマンセーな人が作るサイトって>>389の参照先みたいなのが多いよなぁ…。
デザインセンスの欠片もない…。

391 :Name_Not_Found:05/03/19 06:31:21 ID:???
リファレンスサイトのデザインが凝りまくってたほうがいい
という超絶センスの持ち主がいるスレはここですか。

392 :Name_Not_Found:05/03/19 07:20:47 ID:???
自称「デザインセンスのあるサイト」は大概字が小さかったり幅固定だったりして読みづらい
(もちろん全部がそうだと言ってる訳じゃない)

見た目だけじゃなく、ユーザビリティとか色々なことに気を遣った総合的な「デザイン」をやってもらいたい

393 :Name_Not_Found:05/03/19 09:07:07 ID:???
でも実際よくあるよな、事象HTML講座やってるくせにJavascript切ってるだけでびくとも動かないサイトとか

394 :Name_Not_Found:05/03/19 14:05:15 ID:???
>>391
どうせなら凝ればいいのにと思う。
正直>>389のサイトは見づらいと思うし。

395 :Name_Not_Found:05/03/19 15:26:41 ID:???
>>394
凝りに凝ってあっさりと・・・

あんたの言う凝ったのは厨予備軍になりそう

396 :Name_Not_Found:05/03/19 15:38:47 ID:???
>>389のサイトに何か違和感を感じる、見やすいけど見にくい、みたいな。

397 :Name_Not_Found:05/03/19 16:41:01 ID:???
>>396
hrとかh2やh3にborderを使ったサイトを見慣れてると
パッと見みづらく感じるのだと思う。

398 :Name_Not_Found:05/03/19 17:19:58 ID:???
デザインセンスがあればデザイナーになっとるわい

399 :Name_Not_Found:05/03/19 18:51:01 ID:???
俺、自称デザイナー  ハジカシハジカシ

400 :Name_Not_Found:05/03/19 22:06:45 ID:???
390-399
オマエらスレ違い

401 :Name_Not_Found:05/03/19 22:35:58 ID:???
>>392
自称WEBデザイナーは、「デザイン」の勉強なんか
したことない奴が大多数なので
「デザイン=見た目がすべて」だと信じて疑わない連中。

402 :Name_Not_Found:05/03/19 22:56:35 ID:???
自称じゃなくても、見た目しか考えないデザイナー多いような・・

403 :Name_Not_Found:05/03/19 23:17:11 ID:???
デザイナーって名刺作っちゃった。
でも、恥ずかしくて使えない。

404 :Name_Not_Found:05/03/19 23:54:00 ID:???
見た目しか気にしないお客もいる。

405 :Name_Not_Found:05/03/20 00:14:53 ID:???
最近、自作スクリプトでHTMLを吐くようになったら、
CSSの便利さが今まで以上に分かるようになった。
しかし、IEの糞さが今まで以上に響く。。。
(見た目だけのために、スクリプトを書き換えるの万度ry)

406 :Name_Not_Found:05/03/20 01:44:01 ID:uiP3qfBG
IE6で、HTMLファイルに
<div id="topframe">
<img src="img/topframe.png" width="800" height="100">
</div>
というタグを入れて、cssファイルに
#topframe{
background-color:#FF0000;
width:800;
height:100;
margin:0px;
padding:0px;
}
という、命令をいれました。
うまく、画像だけ表示すればいいのですが、なぜか画像に下に赤い余白がでてしまいます。
これを防ぐ方法はないでしょうか?

407 :Name_Not_Found:05/03/20 03:35:17 ID:???
>>406

<div id="topframe">
<img src="img/topframe.png" width="800" height="100">
</div>

この部分の改行をなくして詰めてみてはいかがか

408 :Name_Not_Found:05/03/20 10:07:42 ID:JDKULTH5
>>407
div使うと自動的に改行はいりますが、spanなどのタグに変えるということですか?

409 :Name_Not_Found:05/03/20 10:15:34 ID:???
>>408
#topframe {
background-color: #FF0000;
width: 800px;
height: 100px;
margin: 0;
padding: 0;
}

410 :Name_Not_Found:05/03/20 11:41:40 ID:???
>>408
<div id="topframe"><img src="img/topframe.png" width="800" height="100"></div>

411 :Name_Not_Found:05/03/20 13:19:03 ID:???
position: relative;で位置を調整しているブロック要素にz-indexを指定しても前後が変わりません。
これはこうゆう仕様なのですか?
それとも私の記述におかしなところがあるのでしょうか??

412 :Name_Not_Found:05/03/20 13:47:11 ID:???
class と id を指定する時に
名 前 に 悩 む 
のは織れだけ?

413 :Name_Not_Found:05/03/20 13:50:53 ID:???
>>411の便乗質問ですが、下記サイトは何故、position: relative; を使ってるのですか?

http://www.stunicholls.myby.co.uk/layouts/3cols.html

414 :Name_Not_Found:05/03/20 14:42:40 ID:???
>>413
ソース見てないからわかんないけど、その下位にpodition:absolute;でもあるんじゃねーの?

>>411
そのブロック要素にテキストフォームとか入ってんじゃねーの?

415 :Name_Not_Found:05/03/20 19:47:14 ID:???
>>401
WEBデザイナーに限らないよ。
パッと見だけはカッコイイけど、
使ってみると激しく使いづらい、なんて物は巷にあふれてる。
artistとdesignerの違いが「デザイナー」にはわかってないんだよ。

最近近所の駅前ロータリーがどっかの有名デザイナのデザインで新しくなったが、
使いづらいなんてものじゃない。自分で歩いたり、車とか自転車に乗って
使ってみろバカ!と言いたい。おかげで毎朝渋滞だボケ!

416 :Name_Not_Found:05/03/20 20:24:24 ID:???
しみません。

417 :Name_Not_Found:05/03/20 20:33:53 ID:???
>>10
http://kobit.info/
閉鎖してるよ。

418 :Name_Not_Found:05/03/20 20:43:34 ID:???
ブロック要素を横に3つ並べて左から、200px,残り全部,200pxとしたいのですが、
真ん中を%指定するとバランスが崩れてしまいます。
どんな横幅でもwidth: 100%;で表示したいので、絶対値で指定はしたくありません。
どのように指定すれば、うまく表示されますか?

http://slashdot.jp
(テーブルで実装されています。)

419 :Name_Not_Found:05/03/20 20:46:00 ID:???
宣伝かい!

420 :Name_Not_Found:05/03/20 21:38:49 ID:c6fxaSfO
質問。

CSSの勉強をしてるんですけど、実際あるサイトのソースを
見ようと思ったら、CSSは別ファイルになってることがほとんどですよね。
みなさんはそのCSSファイルをどうやって閲覧・ダウンロードしているんですか?

私は他に方法を知らないので、わざわざローカルで
そのCSSファイルにリンクするHTMLを打って、右クリックで保存しているのですが……。

421 :Name_Not_Found:05/03/20 21:42:26 ID:???
>>420
自動巡回ソフト使えば全部ローカルに保存されるじゃん。
ファイル_名前をつけて保存 でもいいし。

422 :Name_Not_Found:05/03/20 21:51:21 ID:???
おれは普通にサイトのソースを見て、cssのアドレスをコピペしてるけど

423 :420:05/03/20 21:52:20 ID:???
……すいませんでした。
普通にブラウザでCSSファイルって見れるんですね。
今の今まで知らなかった。何となく見れないと思い込んでました。
ごめんなさい。>>420は忘れてください。

424 :Name_Not_Found:05/03/20 23:06:49 ID:???
>>407
>>410
キタ━━━━━━(゚∀゚)━━━━━━ !!!!!
ありがとうございます。
>>409
px抜かすとなにか違うのですか?(´・ω・`)

425 :Name_Not_Found:05/03/20 23:11:28 ID:???
>>424
CSSをちゃんと書くなら単位は必須だよ。

426 :Name_Not_Found:05/03/20 23:22:42 ID:???
0に単位はいらん

427 :Name_Not_Found:05/03/20 23:27:34 ID:???
>>423
このサイト↓にあるソフトであなたに役立つものがあるかもね。

CSS Peeper
http://pasokon-yugi.cool.ne.jp/freeware/

428 :413:05/03/20 23:28:48 ID:???
>>414
それが podition:absolute; ないんですよ。

429 :Name_Not_Found:05/03/20 23:38:02 ID:???
>>420
FireFoxでも入れるとよろし。
インストール時にカスタムインストールでDOMインスペクタってのを入れると、非常に勉強になる。

さらに、ttp://www.infoaxia.com/tools/webdeveloper/index.html こいつも入れると
これも勉強に役立つだろう。

430 :Name_Not_Found:05/03/21 00:04:49 ID:???
<style type="text/css">
<!--
li {
color: #FFFFFF;
background-color: #333333;
}
-->
</style>

<ul>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ul>

と書くと、winXP firefox1.0で、文字サイズによっては以下のように
http://luckystarnewton.hp.infoseek.co.jp/firefox.gif
変なマージンが1pxはいってしまいます。

どなたか解決方法ご存知の方がいらっしゃったら教えてください。

431 :Name_Not_Found:05/03/21 00:17:42 ID:???
原因はわからんがulに背景色設定すればいい

432 :430:05/03/21 00:39:40 ID:???
>>431
返信ありがとうございます。
liが単色のときはそれでもいいんですが、liを色々いじくって
メニューとして使ったりするとどうも気になってしまうんですよー

table使えばいいんですが<ul><li>のほうがスマートな気がしますし。
それともそういう使い方はあんまり推奨されないもんなんでしょうか?
引き続き回答を希望-

433 :Name_Not_Found:05/03/21 00:48:09 ID:???
いや、メニューやナビゲーションパネル等に使うのであれば本来それが正しいです。

434 :Name_Not_Found:05/03/21 01:31:52 ID:pzaTeRcF


<div id="1">
<p>aaaaaaaaaaa</p>
</div>

<div id="2">
<p>aaaaaaaaaaa</p>
</div>

とした時の横幅について質問させてください。

<div id="1">を width: 100px; float: right; で右に、<body>の marginを各 30px; 、
<div id="1">と<div id="2">の間を10px; 、
残りを<div id="2">で%で左に指定したいのですが、
重なったり、間が開きすぎたりでうまくいきません。

形的には
ttp://www.igorboog.com/
こんな風にしたいのですが・・・

435 :Name_Not_Found:05/03/21 01:55:14 ID:???
>>434
おそらくだが、そこのページは
BODYの左右マージンが%で指定されているんじゃないか?
そうすれば

body {
margin: 30px ○○%;
}

#1 {
width: 100px;
float: right;
}

#2 {
margin-right: 110px;
}

こんな感じで如何

436 :Name_Not_Found:05/03/21 02:06:22 ID:???
>>434
関係ないけどID属性値は数字で始められないぜ。

437 :430:05/03/21 02:11:36 ID:???
>433
ではそのfirefoxのバグ?には目をつむるべきでしょうかね〜?
作った本人でなければ、言われないとワカランと言われそうですがどうも気になってしまう。

438 :434:05/03/21 02:19:27 ID:???
>435
ありがとうございます、ずいぶん長い間悩んでいたんですがあっという間に解決しました。
margin-right: 110px;  だとなぜか重なったのですが少し数値を増やすと理想の形になりました。
どうもありがとうございました!

>436
忘れてました(w
自分のソースのほうではちゃんと文字で始めてます。

439 :Name_Not_Found:2005/03/21(月) 07:24:32 ID:???
>>428
それなら今後のことを考えて、自分なりの基準を設けているだけだろ。
以後絶対指定が必要になったときのために。
あんまり深く考えることも無いと思うよ。

440 :413:2005/03/21(月) 09:51:52 ID:???
>>439
そうですか。
サンクス。

441 :Name_Not_Found:2005/03/21(月) 13:16:15 ID:???
font size を完全に使わずCSSで指定しようと思うのですが、
文字サイズは前のままを継承したいのです。
font size="-2"であれば、font-size:〜%;みたいな対応表ってないでしょうか…

442 :Name_Not_Found:2005/03/21(月) 13:23:17 ID:???
>441
font-size:xx-small, x-small, small, medium, large, x-large, xx-large
じゃダメなのか?

443 :Name_Not_Found:2005/03/21(月) 14:08:53 ID:???
%は小さい文字を容赦なく潰す。

444 :441:2005/03/21(月) 14:35:41 ID:???
>>442
あ、そういうのあったんですね。ありがとう!
%だと、まったく同じにはならないっぽいですね。
ブラウザの文字サイズ変更で同一に拡大縮小しないです。
font size="-1"と同じにしようとしたら、84%と85%の間くらいみたい。

445 :Name_Not_Found:2005/03/21(月) 18:23:47 ID:???
そんな糞小さい字はやめてくれ

446 :Name_Not_Found:2005/03/21(月) 19:46:22 ID:???
>>445
-1が「糞小さい字」か?
ブラウザの設定「最小」とかにしてんの?

447 :Name_Not_Found:2005/03/21(月) 20:26:09 ID:???
解像度1600x1200じゃなきゃ仕事にならんもんでね

フォントサイズは無指定で頼む

448 :Name_Not_Found:2005/03/21(月) 20:27:56 ID:???
オマイの仕事などどうでもいい、

449 :441:2005/03/21(月) 20:37:14 ID:???
通常使うフォントは無指定にしてます。
注釈的なものや、付加的なものを-1にしてますです。
また、サイズ指定するにしても固定のものは避けてます。
ま、このへんは議論しだすとキリがありませんが。

450 :Name_Not_Found:2005/03/21(月) 20:38:41 ID:???
>>441
ttp://www.webreference.com/html/tutorial22/7.html
末尾付近の日付に注意。当時は、WinIE5が4を追い抜いた頃。MacはIE4が多かった。
とりあえず、CSSブラウザ=IEの時代。Geckoを知る人は、この年の秋まで殆どいなかった。
日本でdocument.getElementByIdとか使うと「何それ?」の時代。
また、当時も今も、この手の記事はトンデモだから、目を通すだけにしとけ。

451 :Name_Not_Found:2005/03/21(月) 22:07:38 ID:???
>>441
ttp://www.ichiro.to/note/fsize

126 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)