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

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

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

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

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

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

過去スレや関聯リンクは>>2-10
【過去ログ】>>2-3
【関連スレ】【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-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:04/09/29 01:30:58 ID:tWyN4ylZ
【過去ログ】
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
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/

3 :Name_Not_Found:04/09/29 01:35:27 ID:tWyN4ylZ
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/
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第4版
  http://pc5.2ch.net/test/read.cgi/hp/1078463560/
代替スタイルシートに萌え〜
  http://pc5.2ch.net/test/read.cgi/hp/991400015/
独自拡張、草案段階のCSSについて語れ
  http://pc5.2ch.net/test/read.cgi/hp/1019912046/
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
  http://pc5.2ch.net/test/read.cgi/hp/1038678267/
CSSでイケてるデザインサイト 23
  http://pc5.2ch.net/test/read.cgi/hp/1087905861/
【仕様書】
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/

4 :Name_Not_Found:04/09/29 01:36:03 ID:tWyN4ylZ
【解説など】
・ごく簡単な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/

5 :Name_Not_Found:04/09/29 01:36:38 ID:tWyN4ylZ
【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

6 :Name_Not_Found:04/09/29 01:37:17 ID:tWyN4ylZ
【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

Q4: なんかフロートの表示が崩れるみたいなんですけど? †
A4: 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

7 :Name_Not_Found:04/09/29 01:38:02 ID:tWyN4ylZ
【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

8 :Name_Not_Found:04/09/29 01:46:25 ID:???
完了。
ローカルルールリンク先の変更申請済み。

9 :Name_Not_Found:04/09/29 01:48:06 ID:???
>>1
乙。

10 :Name_Not_Found:04/09/29 02:29:22 ID:???
>1
おっつー!
待ってたぜ。

11 :Name_Not_Found:04/09/29 02:33:49 ID:???
カレー

12 :Name_Not_Found:04/09/29 03:31:27 ID:r5kQOGwB
IE(win):5,0以上
IE(mac):5,2以上
Netscape:6,0以上
Opera:1,0以上
Safari:1,0以上
Mozilla:1,0以上

親戚に会社(学習塾)のサイトを作ってくれと頼まれ、HTML+CSS(+PHP/SQL)で作ろうと考えてます。
とりあえず上記のブラウザに対応させたCSSで組もうと考えてるんですけど、
やっぱり企業サイトとかだとネスケ4系もちゃんとやらなくちゃNGでしょうか?

13 :Name_Not_Found:04/09/29 03:35:33 ID:???
>>12 時間に余裕がなければ無視して無問題。

14 :12:04/09/29 03:44:40 ID:???
>>13さん

即レスありがとうございます。

実は先ほど簡単にCSSを書いてみたてDW(MX2004)でエラーチェックをしたところ、
設定でNetscapeを6,0〜にすると、ブラウザエラーは17箇所。
それをNetscapeを4,0〜までに下げてやると、ブラウザエラーは100以上・・・・呆然でした。

年度内に作ってくれとのことなので、(微妙に時間に余裕はありますが)
まずは6,0以上をターゲットに作ろうかと思います。


15 :高幡不動:04/09/29 09:18:11 ID:8W5mkzPB
すんません、いままでテーブルレイアウトでサイト制作してたんですが、
徐々にレイヤーを使用したレイアウトにしていこうとしている、
CSS初心者です。

Dream Weaver MXで制作してるんですが、テキストサイズを
ユーザーに拡大されたときなどに柔軟に対応できるよう、
テキスト量の多いところは、テーブルに入れています。
で、そのテーブル(縦長)をDIVレイヤーに入れて配置してました。
IEでは無事に閲覧できるんですが、NetScape7(MAC)で閲覧すると、
レイヤー内のテーブル(横幅400px程)の中のテキストが、<br>のあるところ以外、
すべて折り返さないようになっており、テキストがレイヤー・テーブルを
はみ出して画面外右まで出てしまってるんです。

この、レイヤー内にテーブル入れて、テキスト入れてって
やり方が、邪道なのかなぁ?どうにか、レイヤー内の、テーブル内部の
テキストが、TD内に納まるよう、折り返される方法はないもんでしょうか?

16 :Name_Not_Found:04/09/29 09:25:27 ID:???
>>15
widthの指定はどんなんでしょう?

17 :高幡不動 :04/09/29 09:32:46 ID:8W5mkzPB
>>16
レイヤーは、幅が500pxほど、縦は指定せず(auto)。
中に入れているテーブルは、幅500ほど。縦指定せず。
テーブルの一番上のTDには、内容が頻繁に更新されるテキストは
入っていて、CSSでサイズ指定しています。
二段目以降のTDには、他コンテンツへのリンク画像など。
列は1列のみです。必要ないだろうけど、一応テキストが入っている
一段目のTDにも、横幅500px指定。

WINでもMACでも、Netscape7で見ると、同じ結果になりますね…

18 :Name_Not_Found:04/09/29 10:40:30 ID:???
レイヤーレイヤー言うのに抵抗を感じる

19 :高幡不動:04/09/29 10:48:31 ID:8W5mkzPB
確かに、レイヤーというと、フォトショみたいな
雰囲気でちゃいますかね >>18

自力で解決できました!どうもお騒がせ致しました。

20 :12です。:04/09/29 15:26:05 ID:???
勝手ながらまた質問させていただきます。

書いたCSSを見てみると行数が軽く400を超えているのですが
これって長すぎでしょうか?(ちょっと気になって・・・・汗)

paddingやborder等は

padding-top-style : solid;
padding-right-style : solid;
padding-bottom-style : solid;
padding-left-style : solid;

のようにいちいち1つ1つ細かく指定して書いています。
(padding : solid; ではアクセシビリティを考えるとNGだと聞いたので)

これで正しいのでしょうか?ご教授お願いします。



21 :12です。すいません訂正しまくりです:04/09/29 15:28:15 ID:???

border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;

のようにいちいち1つ1つ細かく指定して書いています。
(border : solid 1px #000000 ; 等ではアクセシビリティを考えるとNGだと聞いたので)


22 :Name_Not_Found:04/09/29 15:34:50 ID:???
何を曲解してるのかは知らんが好きにやってろよって感じだな

23 :Name_Not_Found:04/09/29 15:37:41 ID:???
>>21
可能な限りシンプルにする方がいいです。

>(padding : solid; ではアクセシビリティを考えるとNGだと聞いたので)
どこで聞きましたか?
たぶん他の何かと勘違いしているような気がします。

24 :Name_Not_Found:04/09/29 16:15:58 ID:???
>>21
まずはアクセシビリティの意味から勉強しなおそうな。
ついでにページごとあるいは文書群のChapter毎にファイルを分割するとかな。
もちろん基本部分は1枚作成しておいてだ。

後はbodyにidを振ったりしてなるべくCSSで使いやすいHTMLに仕上げとくのが賢いかもね。
strictをほんとに厳格に守るメリットはないから、strictの旨みだけを利用しれ。

読みやすい、再編しやすいってのは重要だな。

25 :Name_Not_Found:04/09/29 19:47:32 ID:???
ユーザースタイルシートでフォント関係の指定をしたいのですが、
特定の言語のページにのみそのスタイルシートを効かせるような
記述ってありますか?

26 :Name_Not_Found:04/09/29 20:31:55 ID:???
>>25
クラスかアイディーでも付けれ。

27 :Name_Not_Found:04/09/29 20:36:13 ID:???
>>25
http://hp.vector.co.jp/authors/VA022006/css/selector.html#lang-pseudo-class

28 :Name_Not_Found:04/09/29 21:26:50 ID:???
>>26
おまえはしばらく回答するな。 混乱の元だ。

29 :Name_Not_Found:04/09/29 21:38:25 ID:???
>>26
どうやってつけるの?w

30 :Name_Not_Found:04/09/29 22:06:36 ID:???
>>29
ボディーにキーボードかアイエムイーパッドで

31 :Name_Not_Found:04/09/29 22:09:08 ID:???
>>30
試しにこのページのソース開いてやってみたけど、何も起こらないけどなんで?w

32 :Name_Not_Found:04/09/29 22:13:11 ID:???
>>31
スタイルシートを初期設定化するタグを使ってないから

33 :Name_Not_Found:04/09/29 22:18:11 ID:???
>>29-32

34 :Name_Not_Found:04/09/29 22:19:24 ID:???
>>32

で、結局どうすればいいの?

35 :Name_Not_Found:04/09/29 22:31:20 ID:???
本屋へ行って入門書を買ってくる

36 :Name_Not_Found:04/09/29 22:57:00 ID:???
>>35
馬鹿じゃんw
とりあえずユーザスタイルシートの意味を勉強してからこいよ。


37 :Name_Not_Found:04/09/29 22:58:16 ID:???
26 :Name_Not_Found :04/09/29 20:31:55 ID:???
>>25
クラスかアイディーでも付けれ。

28 :Name_Not_Found :04/09/29 21:26:50 ID:???
>>26
おまえはしばらく回答するな。 混乱の元だ。



どういうこと?28は26が誰か知ってる手ってこと?
簡単に言うと28=26だよな。ほんときもいやつが増えたな。

38 :Name_Not_Found:04/09/29 23:27:46 ID:???
重なっているのをちょこいとズラすのってどうやるんだっけ?

39 :Name_Not_Found:04/09/29 23:28:16 ID:???
間違えた、重なりのしたになっているのを全面に持ってくるやつ

40 :Name_Not_Found:04/09/29 23:29:21 ID:???
いや、前面…

41 :Name_Not_Found:04/09/29 23:29:58 ID:???
z-index で値を指定すればよろしいかと。

42 :28:04/09/29 23:39:15 ID:???
>>37
釣りにマジレスすると、
>26は>25がユーザスタイルシートの話をしているにもかかわらず、
クラスやアイディーといったユーザスタイルシートからはどうすることもできないものを
付けろと等と、とんちんかんな発言してるから、混乱の元になるから発言するなといっただけだ。


43 :Name_Not_Found:04/09/29 23:45:12 ID:???
>>41
おおそうなのか、さんくそったれ!!

44 :Name_Not_Found:04/09/30 01:08:25 ID:???
<div>
<h2>あああ</h2>
<p>いいい</p>
</div>

こういう部分を2ちゃんのindexの緑のテーブル部分みたいに表現するにはどうしたらいいでしょうか?
不可能でしょうか?

45 :Name_Not_Found:04/09/30 01:10:33 ID:???
>44
可能だから勉強しなさい。
やってみて分からないことがあれば質問せい。

46 :Name_Not_Found:04/09/30 01:21:42 ID:???
>>42
本当かよ!もう少し文法考えろよ!

47 :Name_Not_Found:04/09/30 05:09:57 ID:???
html[lang="en"]とか?

板違いかもしれないけれど、Proxomitronを使えば
特定サイトのみにユーザーCSSを使うことが可能。
あとは詳しくないけど、Mozillaの独自拡張かな。

48 :Name_Not_Found:04/09/30 09:51:56 ID:???
>>46
知らないのはオマイだけ
 
     遅レスごみんね。

49 :46:04/09/30 11:51:14 ID:???
>>48
何の話?今お前が26=28かどうかを話してるんだよ。
それを知ってるのは本人であるお前だけだろ?だから

>知らないのはオマイだけ

知らないのはお前以外ってことだ。意味わかるか?なんか最近日本語すらできないやつが多いよな。

50 :Name_Not_Found:04/09/30 12:14:49 ID:???
>何の話?今お前が26=28かどうかを話してるんだよ。

  どこで?

51 :Name_Not_Found:04/09/30 12:20:43 ID:???
>>46
>>37を読むと、おまえが2chにはまったく向いていないことが解る。

>>48は「スタイルシートを」を頭につければアホアホのお前でも理解できるだろ?

52 :Name_Not_Found:04/09/30 13:27:15 ID:???
いつから「馬鹿でも書き込んで良いルール」に変わったんだ?

53 :46:04/09/30 13:53:34 ID:???
>>50
>>37で。というか俺は初めからその話しかしていない。ユーザスタイルの話などどうでもいい。

>>51
わかったよ。
>>48>>28は脳内日本語の使い手なんだな。

>>48は「スタイルシートを」を頭につければアホアホのお前でも理解できるだろ?
あのな、つけなきゃわからんのよ。お前の脳内会話では通じてるかも知れんが、現実ではお前にとって
冗長でも、他人に何かを確実に伝えるにははしょっちゃいけない部分もあるのよ。

54 :Name_Not_Found:04/09/30 14:00:05 ID:???
あ〜あ
又馬鹿の言い争いが始まったよ
ほんと馬鹿に限ってくだらない見栄を張るよな

自分は馬鹿じゃない!
とか
このまま終ったらまるでまけたみたいだ!
とか意味不明なことを延々と繰り返すよな

とりあえずお前ら二人とも言い争いは専用スレ立ててやったからこっちでやれ
http://pc5.2ch.net/test/read.cgi/hp/1092941001/l50

55 :Name_Not_Found:04/09/30 14:35:19 ID:???
>>12
> やっぱり企業サイトとかだとネスケ4系もちゃんとやらなくちゃNGでしょうか?
cssに限らず迷うよな、
うちは今時4.X使ってる方に問題有りと割り切って
外部css読み込ませないようにしてる、よってテキスト表示。
(jsと<noscript>で「新しいブラウザ使えやゴラァ!って」アラートも出してるよ)

56 :Name_Not_Found:04/09/30 15:35:02 ID:???
>>55
どうせお前のは日記サイトかエロサイトだろ?
そうゆうゴミサイトと企業サイトを同じにするなよ。

例えばyahooやgoogleが旧ブラウザで見ようとすると、お前の言うよな説明文だけが出て
使えなかったら、日にいくつのアクセスを否定することになるかわかるか?

だいたいレガシの需要は1/10位だから、10万/日なら1万アクセスをはじくことになるんだぞ。
1万って言うとお前のサイトの生涯アクセスと同じくらいだな。
お前のサイトには一生誰も来ないってことだ。それでもはじくのか?


ところで実際どんくらいのアクセスがあんのかね。y君とか。
10万ってマジなのかな。まあレガシが1/10ってのも適当だから何でも行けど。

57 :Name_Not_Found:04/09/30 15:35:59 ID:???
>>53の勝ちみたいね。

58 :Name_Not_Found:04/09/30 16:12:21 ID:???
>>56
素人全開だな藻前(プ
コンテンツ内容はテキストで表示されてんだよ、
もちろんクローラは拾ってくしな。













やべ〜、鮮人の相手しちゃった(プププ

59 :Name_Not_Found:04/09/30 16:43:05 ID:???
メ欄でムキになる香具師を久しぶりに見た

60 :Name_Not_Found:04/09/30 17:22:29 ID:???
>>58
>やべ〜、鮮人の相手しちゃった(プププ

中学生くらいかな。デザインが崩れる=商品として成り立たないってことくらい勉強しような。


61 :Name_Not_Found:04/09/30 17:48:30 ID:HrmShFnV
はい次どぞ〜

62 :Name_Not_Found:04/09/30 17:57:03 ID:???
自演ばっか。
強制IDになったらこうゆうアフォも集まらないかもな。
どこへいけばこうゆう要望は聞いてもらえるの?

63 :Name_Not_Found:04/09/30 18:11:28 ID:???
>62
2ch

64 :64:04/09/30 18:53:12 ID:???
はじめまして。各ブラウザ感のレンダリング?
の違いで苦しんでいるのですが、大箱の中に小箱を入れる場合
小箱の周りにスキマをつけたいのですがこの場合、

■1 「大箱の余白」でスキマをつける
■2 「小箱のマージン」でスキマをつける

どっちがいいのでしょうか?経験上○○の方が
ずれがおきにくいよ等あれば、教えて頂きたいと思います。
また、w3cとかの推奨とかで○○の方がいいよ等あれば
教えてください。

よろしくお願いします。

65 :Name_Not_Found:04/09/30 19:23:08 ID:???
>>64
テーブルがオススメ。

66 :Name_Not_Found:04/09/30 20:31:28 ID:???
>>64
http://www.fromdfj.net/html/border2.html
よってテーブルがオススメ

67 :Name_Not_Found:04/09/30 22:18:59 ID:???
>>60

> 中学生くらいかな。デザインが崩れる=商品として成り立たないってことくらい勉強しような。

デザインが崩れるってどこに書いてあるんだ?あ?
藻前の脳内補完&妄想でイチャモンつけてんじゃねーぞダボが!


68 :Name_Not_Found:04/09/30 22:25:42 ID:???
>>67
お前馬鹿?
自分でテキストで表示って書いてるだろ。

厨房はママのメシでも食って寝ろよ。

69 :67:04/09/30 22:36:40 ID:???
ママ ごはん

70 :57:04/09/30 22:37:30 ID:???
パパ ごはん

71 :Name_Not_Found:04/09/30 22:52:43 ID:???
できました。ありがとうございました!

72 :Name_Not_Found:04/09/30 23:14:55 ID:???
ごはんが出来たのかな?

73 :Name_Not_Found:04/10/01 02:19:42 ID:???
>>60
>デザインが崩れる=商品として成り立たない
     ↑
の等符号の意味を解説したまえ。


74 :名無し募集中。。。:04/10/01 03:37:23 ID:???
>>73
m9(^Д^)プギャーーーッ

頭悪すぎだから解説しても理解できないと思われ

75 :Name_Not_Found:04/10/01 06:48:32 ID:nfc9p9x5
ばかばっかり

76 :Name_Not_Found:04/10/01 07:23:51 ID:???
いつものことだ。

77 :Name_Not_Found:04/10/01 08:02:23 ID:???
(´-`).。oO( 強制IDにならないかな・・・・ )

78 :Name_Not_Found:04/10/01 10:01:47 ID:uuCjZLZ0
例えば

 .fb {font-weight:bold; }
 .fs {font-size:small; }

ってクラス設定して、

 <span class="fb fs"></span>

とした場合の
“class="fb fs"”って指定の仕方は、どれくらいのブラウザで実装されてるの?
IEとNNでは実装されてるって聞いたけど、他のブラウザじゃどう?

あんまりお奨めできない指定方法?

79 :Name_Not_Found:04/10/01 11:01:28 ID:???
>>78
なぜ対応表を見ない?
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#class-selectors
>Win版 MSIE 3〜4,Netscape 4 は,空白類文字で区切られたクラス属性値を解析できない。

そもそも「他のブラウザ」とは何?

80 :Name_Not_Found:04/10/01 11:03:29 ID:???
>>79
IEとNN以外だろ。モジラとかオペラとか。
「IEとNNでは実装〜」ときて「他のブラウザ〜」て言ってるし。

81 :64:04/10/01 11:16:29 ID:???
>>65
>>66

ありがとうございます。
やっぱり段組はテーブルの方が、いいみたいですね。

すべてcssでやろうとかっこつけずに、テーブルも併用してみます。

82 :25:04/10/01 11:18:43 ID:???
>>27
ありがとうございます。
しかしそれだと文書中に言語の指定が無い場合は無効になりますね。

83 :Name_Not_Found:04/10/01 11:26:45 ID:18A2itrB
dlの整形について質問です。
<dl>
<dt>あいうえお:</dt>
<dd>aiueo</dd>
<dt>かきくけこ:</dt>
<dd>kakikukeko</dd>
</dl>

dt{ width:200px ; float:left ; clear:left ; font-size:100% ; }
dd{ margin-left:200px ; font-size:150% ; color:red ;}

うまくいえませんが、dtとddは横並びになりますよね。それでその時に
ベースラインでdtとddが揃ってほしいのです。↑のやつはそのままでやるとtopでそろってしまいます。
それをベースライン揃えする方法はありませんか?

文字の大きさを変えられても対応できるような方法でお願いします。


84 :Name_Not_Found:04/10/01 11:27:27 ID:???
>>80
NNはNN4でもない限り、Mozillaと一緒だろが。
で、結局他ってのはOperaだけかよ。MacIEとかSafariとか無視なのね。

>>81
>やっぱり段組はテーブルの方が、いいみたいですね。
んなワケないだろ。騙されんなよ。

85 :Name_Not_Found:04/10/01 11:30:22 ID:???
>>83 floatのままでは、divで入れ子にでもしない限り無理。

86 :78:04/10/01 11:37:26 ID:???
>>79
テンプレにあったんですな、スマソ
IE3/4、Netscape4は他の部分もダメダメと聞いて
切り捨てる方向だったんで(しがない個人サイトをやるつもり)一応は問題ナシ、と。

「その他のブラウザ」ってのは>>80氏の言うとおりオペラ他な訳ですが
>Win版 MSIE 3〜4,Netscape 4 は,空白類文字で区切られたクラス属性値を解析できない。
ってことは逆に、オペラとかは問題なく表示できるって解釈でいいンかな?

とりあえずテンプレ見てきます(`・ω・´)

87 :78:04/10/01 11:43:50 ID:???
ごはっ書いてる間にレスが

>>84(=80?)
MacIEやsafariについても知ってたらお教え願います。

つーかその二つについてはテンプレに載ってるんだろうか?

88 :Name_Not_Found:04/10/01 11:45:36 ID:???
fontプロパテの値って書く順番が決まってるのですが?
効いたり効かなかったりするのですが・・・

正確な順番があるのでしたらいい覚え方とか教えてください。ごろみたいな。

89 :Name_Not_Found:04/10/01 11:46:55 ID:???
http://www.zspc.com/documents/css2/selector/class.html
Macintosh版 IE 4.5:[○]
複数のクラス指定(Multiple classes)には対応していない。


90 :83:04/10/01 11:47:24 ID:18A2itrB
>>85
divですか...ということは行の分だけdl要素を追加しろということになるのですか。
なんかCSSって実用性ないですね。

91 :Name_Not_Found:04/10/01 11:50:40 ID:???
>>88 なぜ>>4を見ないのかねえ。
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font
fontの簡略化プロパティは、 font-familyに代替フォントを指定できないので止めておけ。

92 :Name_Not_Found:04/10/01 11:52:45 ID:???
>>84
>>やっぱり段組はテーブルの方が、いいみたいですね。
>んなワケないだろ。騙されんなよ。

だまされてるのはお前だろ。段組に限らず実装がバラバラの部分は素直にテーブル
使うのが間違いなく賢いって。

93 :Name_Not_Found:04/10/01 11:53:19 ID:???
>>90
>ということは行の分だけdl要素を追加しろ
ハア?
<dd><div>文字</div></dd>でいいだろ。
そもそも表ならtableでいいんだぜ。それ、本当に定義リストなんだろな。

94 :88:04/10/01 11:55:03 ID:???
>>91
どうも。簡略化は便利なようで不便なんですね。
もう少し頭を使って作ればいいのにね。チム訓も。

95 :83:04/10/01 11:57:09 ID:18A2itrB
>>93
><dd><div>文字</div></dd>でいいだろ。
これで何をするのですか?ごめんなさいわかりません。
簡単な定義リストです。ddの方が文字が大きい時や、とにかくベースラインあわせを
したいときはどうすればいいのかなと思いまして。

96 :Name_Not_Found:04/10/01 12:00:32 ID:???
>>92
>実装がバラバラの部分
そんな>>66が出した程度の実装差は、box-sizeingで処理する方法があるのに。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
知らないからって初心者を瞞してはいけない。
そもそも>>64の質問に対して>>66は的外れ。
paddingでなくmarginでやっておけば実装差は出ない。


97 :Name_Not_Found:04/10/01 12:04:45 ID:???
>>95 vertical-alignやline-heightはいぢってみたの? 工夫してごらん。

98 :Name_Not_Found:04/10/01 12:09:10 ID:???
>>96
ばらばらどころか実装されてもないものだされても困るけどな;

99 :Name_Not_Found:04/10/01 12:11:47 ID:???
>>98
隠しプロパティであれ、現に実装されてるから効くわけだが。
それに>>64の質問に対しては、子要素のmarginでやれ、で済む話。

100 :83:04/10/01 12:11:53 ID:18A2itrB
>>97
vertical-alignはテーブルのセルにしか通用しないですよね?
displayでの置換も実装が追いついてない記憶があります。

ところでdivを使って何をするのですか?

101 :98:04/10/01 12:13:39 ID:???
>>99
すまん。効くのか?
実は試したことないのだ。CSS3のやつだろ?
IE4以上NN6以上程度で効くのであれば、俺としてもかなりの発見でCSSに対する見方も変わるかもしれない。
で、実際どれくらいの対応状況なの?

102 :Name_Not_Found:04/10/01 12:14:29 ID:v3OoOFFG
Q6にページの縦横中央配置ってあるけど、どの記述方法がベターかな。
漏れはこれが調整できて良いと思ったんだが、
縦横中央配置してる猛者共はどんな記述してるの?

<style type="text/css"><!--
body {
    margin:0;
    padding:0;
}
div {
    position:absolute;
    top:45%;    /* 内容に応じて調整 */
    right:auto;
    bottom:auto;
    left:27%;    /* 内容に応じて調整 */
}
--></style>
</head>
<body>
<div>

</div>
</body>
</html>

103 :Name_Not_Found:04/10/01 12:15:00 ID:???
>Mac版 MSIE 5,Netscape 6以降/Mozilla,Opera 7 は,box-sizing を先行実装しています。


つまりWinIE4以上では使えないってことだ。はしゃぐな。


104 :Name_Not_Found:04/10/01 12:18:20 ID:???
>>100
>vertical-alignはテーブルのセルにしか通用しないですよね?

インライン要素に適用できます。
いい加減、>>4のレファレンスで確かめてから発言して下さいね。

dt,ddそのものはfloatによりtopで揃っても、その中を別のボックスで囲めば、
そのボックス内で色々調節できるでしょ?

105 :Name_Not_Found:04/10/01 12:19:10 ID:???
>>102
CSSだけでは無理とかいう話なかったっけ?中身の大きさが決まってることなんて
滅多にないだろ?まあお前が文字サイズ固定をしてNNの中以外では見れないサイトにしてるならいいけどおいおいおいおいおいおいおいおいおいおおい

106 :Name_Not_Found:04/10/01 12:21:01 ID:???
>>103
だからWinIE5〜5.5やWinIE6互換モードに合せた指定をすればいいだけだろに。
html * {
box-sizing:border-box; /* CSS3の記述。MacIE5で有効。*/
-moz-box-sizing:border-box; /* Mozilla用の記述。N6で有効。*/
-khtml-box-sizing:border-box;
}

107 :83:04/10/01 12:21:29 ID:18A2itrB
>>104
そういうことですか。なるほどです。
でもやはり実用性はないですね。92さんの言うとおりテーブルレイアウトも混ぜたほうが賢いみたいですね。

それではありがとうございました。

108 :Name_Not_Found:04/10/01 12:22:31 ID:???
>>105
FAQの6のリンク先を最後まで読めよ。CSSだけでも出来るよ。

109 :Name_Not_Found:04/10/01 12:23:27 ID:???
>>106
は?
HTML4.01strictで記述してる漏れのサイトはIE6はいつも標準準拠モードになるよ。
当然DTDを変えるなんてアホなことはしないぞ漏れは!

というか間違ってるほうにあわせられるほど俺はあまたのいいやつ、柔軟な男ではない!


110 :Name_Not_Found:04/10/01 12:27:32 ID:???
お前らアホだな
いまどきCSSなんて使えたもんじゃないよ
黙ってテーブルでやるのが男らしい

CSSは後10年待て

111 :Name_Not_Found:04/10/01 12:36:03 ID:???
さらに一歩を進めてXHTMLにしたら、box-sizingの必要性がわかるよ。>>109
XML宣言をするとIE6はQuirksモードになるからね。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/09b.html#day20num01

112 :109:04/10/01 12:58:00 ID:???
>>111
必要性に文句を言ってるのではなくて、どんなに便利なものでも原条の実装の
しかたでは使いようもないよ。

HTML4.01strictでかいテル俺はこんなもの合ってもどうにもならない。
結局間違ったboxの計算するブラウザを廃止にする以外に手はないね。
まあ俺がXHTML1.1辺りで書き直すのが早そうだが、やったことないし面倒すぎる。


113 :Name_Not_Found:04/10/01 13:02:32 ID:???
>>112
こちらへどうぞ。

独自拡張、草案段階のCSSについて語れ
 http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50

114 :Name_Not_Found:04/10/01 13:05:56 ID:???
CSS3を作るよりまずは実装の統一を図ることの方が重要なのに、w3cって頭悪いのかね?
それともわかってるけど、どうにもならずに悔しい思いをかみ締めてるのかね?

115 :Name_Not_Found:04/10/01 13:17:51 ID:???
頭悪いのかね……? 仮にIE7が完全に仕様通りに実装して登場した所で、
依然としてIE5.5やIE6を使用する人口がある以上、問題は解決しないでしょ。

116 :Name_Not_Found:04/10/01 13:31:02 ID:v3OoOFFG
>>105
>中身の大きさが決まってることなんて 滅多にないだろ?
そんなことねぇだろ。

こういうサイトはどうなんだ?
ttp://www.nwp.co.jp

117 :Name_Not_Found:04/10/01 13:40:45 ID:???
ここは「CSS・スタイルシート質問スレッド」

 議論はよそでやれ、アホども!!

118 :Name_Not_Found:04/10/01 13:43:17 ID:???
昨日覚えた知ったか厨が騒いでいるのはここかい?

119 :Name_Not_Found:04/10/01 13:50:33 ID:???
>>114
CSS2まで勧告されてますが

120 :Name_Not_Found:04/10/01 13:52:56 ID:???
>>115
だからそれを解決しろよアフォ。

121 :Name_Not_Found:04/10/01 13:54:21 ID:???
>>116
だから滅多にないだろ。

122 :Name_Not_Found:04/10/01 13:56:22 ID:???
ボックスのwidthの計算方法の違いの問題で、解決するにはどうすればいいですか?
paddingとborderを使わないとかですか?

123 :Name_Not_Found:04/10/01 14:01:11 ID:v3OoOFFG
>>121
お前の言う使用頻度なんかどうでもよくて、現に使用してるサイトがあるだろ?
それらがどうやって配置してるか知りたい訳だ。

124 :Name_Not_Found:04/10/01 14:05:06 ID:???
>>116
FLASHプレイヤーが無いと何も見られない糞サイト
見る価値無し

125 :Name_Not_Found:04/10/01 14:06:31 ID:???
>>123
お前の使用頻度などどうでもよくて、現に滅多にないわけだろ?
実際ページ内にフラッシュしかないサイトなんて全体の何%かを考えろ。
滅多にないから。

126 :Name_Not_Found:04/10/01 14:08:17 ID:???
>>123
おまえヴァカ?
自分でソース見たらいいだろ。それともソースも読めない君か?w

127 :Name_Not_Found:04/10/01 14:10:02 ID:???
>>122
とりあえずwidthは壊されると危ない機がするからpaddingの左右は0にしておく。
それだけで結構いける。

128 :64:04/10/01 14:13:57 ID:???
とりあえず、ブラウザ感の差異が無くなるまでは
テーブル併用が良さそうですねってことで、
いわゆる逃げですが、テーブル併用案にしました。


width
\width
w\idth
等の方法も使ってみましたが、小手先でどうこうするよりも
作業性を優先って事で。

今後css3などで、この辺が本当に使える仕様になると
いいですね。


129 :Name_Not_Found:04/10/01 14:18:57 ID:???
>>128
分かてるだろうけど、期待されるは仕様でなく実装な。
まあテーブルより使える実装になるには10年以上かかるな。

130 :Name_Not_Found:04/10/01 14:23:29 ID:v3OoOFFG
>>125
いつからFLASHの話になったんだよ。

131 :Name_Not_Found:04/10/01 14:26:25 ID:???
アホは論旨が佐田まらんのだ。

132 :Name_Not_Found:04/10/01 14:35:57 ID:???
>>130
そうだよな。もろ勘違いしたよ。
しかしまぁ自分でサイトを探して見に行くってことで終わりにしろよ。
粘着はうざいから。

133 :Name_Not_Found:04/10/01 15:09:19 ID:???
>>122>>106を見てないのかね。どうせStrictではないんだろ?

134 :Name_Not_Found:04/10/01 15:11:38 ID:LPa76QxB
・XHTML 1.0 Transitional
・IE6、WinMe

<style type="text/css">
DT {display:list-item; list-style-type:decimal;margin-left:2em;}
</style>
<dl>
<dt>はじめに</dt>
<dd>初めに言っておきたい事</dd>
<dt>第二に</dt>
<dd>その次に言っておきたい事</dd>
<dt>第三に</dt>
<dd>その次(以下略)</dd>
</dl>

これを表示すると、

 1.はじめに
  〜
 3.第二に
  〜
 (以下略)
となってしまいます。
以下のようにしたいんですが、IE6、NN7.1でも対応できるようにするには、
どうやったらよいのでしょう。

 1.はじめに
  〜
 2.第二に
  〜
(以下略)
よろしくお願いします。

135 :Name_Not_Found:04/10/01 15:12:08 ID:???
>>120みたいな文句は、W3CにではなくMicrosoft社に述べるべきだよな。
そもそもこのスレッドで質問することではないし。

136 :Name_Not_Found:04/10/01 15:15:50 ID:???
>>134
>>4のバグ辞典を見て下さい。
リストマーカーの番号が途中から振られる(5.x/6.0)
 http://cssbug.at.infoseek.co.jp/detail/winie/b154.html

137 :Name_Not_Found:04/10/01 15:20:54 ID:???
>>134 わざわざ定義リストにする必然性がわからない。<ol><li>でやれば済むものでは?

138 :134:04/10/01 16:03:44 ID:LPa76QxB
>>136
これが不具合なのは解りましたが、「DT,DD」の繰り返しなのでそれぞれをブロック要素で括っても、「1、2、2、〜」となってしまいます。
>>137
ここでは定義するのに使ってるんですから、整列リストでは意味がありません。
それに、整列リストは飽くまでリストなんですから、その下にダラダラと文章を書き連ねては、それは最早リストではありません。
ここはやはり、定義リストでなければならないのです。
そして、可読性とデザインの為、視覚的なわかりやすさの為にDTの頭に数字をつけるのです。


あと一言。
上で議論されてましたが、W3Cが発表するのは勧告書で、仕様書ではありませんよ。
馬鹿なお前らは「勧告書」の意味が分かっていなかったようですから、一応注意しておきます。

ウェブブラウザが「仕様書通りに」描画するのは当然で、そうならないのは只の不具合です。
プログラムなんだから、複雑になればなるほど不具合も多くなるもんでしょ。
勧告書通りに描画するのが当然だと思ってるのは、それは只の馬鹿ですよ。

アプリケーションを作成するときに、無理やり言語で定義された全ての関数を使う必要は無いでしょ。
それと似たようなもんなんですよ、W3Cの勧告書は。
ただし、ウェブブラウザはかなり公益性・公共性があるので、それと同列に扱うのは無理がありますが。

高度な知能を持ってるんだから、今を嘆くより未来を見ようよ。
嘆いても何も始まらないんだから、不具合の解決方法を考えよう。
という訳で、解決方法をお待ちしてます。

139 :Name_Not_Found:04/10/01 16:07:06 ID:???
>>138
> 議論はよそで
失せろ

140 :134:04/10/01 16:08:03 ID:LPa76QxB
どうもすいません。消えます。皆様、ありがとうございました。

141 :Name_Not_Found:04/10/01 16:14:52 ID:v3OoOFFG
私も消えます。ここは本当に馬鹿なゴミが多いようなので。ありがとうございます。

142 :122:04/10/01 16:35:46 ID:???
>>133
strictです。>>106さんのは見ましたが、どうやらサイトに使ってはいけない技術だそうで。
テーブルレイアウトと同じレベルの非推奨行為と受け止めました。

HTML4.01strictで書いている時に、IE6〜IE4までで同じように表示させることは
不可能ですか?

143 :134:04/10/01 16:36:15 ID:LPa76QxB
>>141
お前はクズ以下ですがね。

144 :Name_Not_Found:04/10/01 16:39:41 ID:???
>>142
頭固いなあ。

145 :Name_Not_Found:04/10/01 16:43:34 ID:???
>>138
くだらないstrict志向にがんじがらめみたいだけど、素直に
<dt>1.はじめに</dt>
とすることが現状の最善だ。

CSSが不完全な実装であるかぎりStrictの存在も不完全になってしまうの仕方ないこと。
そこらへんは柔軟に代替方法を使い多少strictを崩したほうが解決が早い。
なによりお前のこだわってる部分はくだらなすぎる。

146 :Name_Not_Found:04/10/01 16:44:32 ID:???
>>142
>どうやらサイトに使ってはいけない技術だそうで。
いけなくはない。独自拡張による先行実装と承知の上でならば、よい。
それで別に支障も起きないのだから。
それよりstrictの癖にtableレイアウトをする方が、問題がある。

147 :122:04/10/01 16:45:21 ID:???
>>144
すみませんorz
しかし妥協はしません。なにせただの趣味ですから。

方法があったら教えてください。なければないと教えてくださるとうれしいです。
ありそうだけどわからんから自分で知られべれとかでもうれしいです。
でもショボいスレですねここ。まだ回答を出せないなんてw

148 :Name_Not_Found:04/10/01 16:46:21 ID:???
じゃあ無いよ

149 :Name_Not_Found:04/10/01 16:46:22 ID:???
今のところない、ってのが答えかなぁ
いろいろやってみたら意外と解決策見つかるよ?

150 :Name_Not_Found:04/10/01 16:48:32 ID:???
>>138
<ol>
<li><!-- --><dl>
<dt>見出し</dt>
<dd>説明</dd>
</dl></li>
</ol>
後は工夫しな。
http://cssbug.at.infoseek.co.jp/detail/winie/b028.html


151 :Name_Not_Found:04/10/01 17:02:47 ID:???
>>138
>馬鹿なお前らは「勧告書」の意味が分かっていなかったようですから、一応注意しておきます。
馬鹿なお前らに助けを求めに来たお前って池沼?脳内解釈は痛いよぼくちゃんw


152 :Name_Not_Found:04/10/01 17:07:03 ID:???
それを書くなら「馬鹿な俺らに助けを・・」だな。 日本語ムズカシネ。

153 :Name_Not_Found:04/10/01 17:53:55 ID:???
>>152
自分は馬鹿じゃないからお前らってことじゃね?日本語ムズカシネ。


154 :Name_Not_Found:04/10/01 17:59:38 ID:???
俺は馬鹿だが、>>151は自ら馬鹿ではないと・・・ シネシネ。

155 :Name_Not_Found:04/10/01 18:50:46 ID:???
>>154
ゴキブリ野郎は汚いからクルナ
コックローチかけるぞ

156 :Name_Not_Found:04/10/01 18:58:36 ID:???
おれはただのゴキブリではない! 立派なチャバネだ。
コックローチなんぞ屁でもねー。
おれの唯一の脅威はスリッパだ。

157 :134:04/10/01 19:02:58 ID:LPa76QxB
やっぱり馬鹿ばっかですね。

158 :Name_Not_Found:04/10/01 19:31:47 ID:???
うむ

159 :Name_Not_Found:04/10/01 20:29:27 ID:???
     \     /
       \ /
       氏ね氏
     氏 ね 氏 ね     シネヤシネヤシネヤ
     氏 ね 氏 ね 氏
 __氏ね 氏 ね 氏 ね__
/  氏ね 氏 ね 氏 ね 氏  \
 __氏 ね 氏 ね 氏 氏ね__
/  氏ね 氏 ね 氏 ね 氏    \
 __氏 ね 氏 ね 氏 ね __
/    氏 ね 氏 ね 氏     \
      氏 ね 氏 ね
       氏ね氏
        ね

160 :Name_Not_Found:04/10/01 20:33:07 ID:???
まぁ各ブラウザのCSS実装に対して
制作側の愚痴に関しては激しく同意する
とりあえず罵り合いはスルーで

>134
そーゆーのにはcontentとかcounter-incrementを使いたいとこだね
Operaぐらいしか対応してないけど

>136でIEでのバグへのリンクが示されてるが、Netscape7でもダメね
http://cssbug.at.infoseek.co.jp/detail/mozilla/b078.html

161 :Name_Not_Found:04/10/01 22:14:29 ID:???
>>159
それってゴギブリ?
まさにお前そのものだよね。
汚くて、気持ち悪くて、本当お前って絶滅してほしいよ。

162 :Name_Not_Found:04/10/01 22:17:58 ID:???
CSSなんて視覚ブラウザユーザには、全くどうでもいい技術だからね。
その視覚ブラウザ筆頭のIEが、どうでもいい技術を適当に実装してもなんら不思議はない。

実は問題はHTMLが視覚から聴覚〜その他まで幅広くフォローしようとするからいけないんだよ。
初めから視覚のみへのものであったならこんな問題は起こらなかった。
ここらでHTMLの位置づけを変えるべき。


163 :Name_Not_Found:04/10/01 22:33:55 ID:8GvcRIhe
ボックスをfloatさせて、上部で合わせるのでなく、下図のように
底でそろえることはできますか?

┌──────┐
│         │
│         │
│         │┌───┐
│         ││     │
│         ││     │
└──────┘└───┘  

164 :Name_Not_Found:04/10/01 22:36:02 ID:???
>>163
ピクセルで管理すれば出来るよ。

165 :163:04/10/01 22:39:03 ID:???
>>164
具体的にどうすればいいのでしょうか?

166 :Name_Not_Found:04/10/01 22:46:07 ID:???
>>163
floatではできません。仕様書見てね。
「続く内容は、('clear'プロパティの指定に従いつつ)そのボックスの右側に上から流し込まれる。」
「8.浮動ボックスはできる限り上に位置しなければならない。」
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visuren.html#float-position

167 :163:04/10/01 22:50:38 ID:???
>>166
サンクス。
見てきます。

168 :Name_Not_Found:04/10/01 22:52:51 ID:???
>>163
floatでなくdisplay:inline;で横並びにして、vertical-align:top;とすればぁ?

169 :163:04/10/01 23:39:56 ID:???
>>168
ボックス内にもボックスが入っているのでinlineにはできないです。

170 :Name_Not_Found:04/10/02 00:05:17 ID:???
>>169
ならばそのボックス内ボックスにdisplay:inline;をかけてvertical-align:top;を有効にしたら。

171 :Name_Not_Found:04/10/02 01:06:40 ID:???
>>170
そのボックス内のボックスは数個あって、inlineにするとレイアウトできないです。

172 :Name_Not_Found:04/10/02 01:11:12 ID:???
なんだ、div中毒かよ。>>171

173 :Name_Not_Found:04/10/02 01:14:48 ID:???
>>171
その数個有る子ブロックを括る親divを、floatさせるブロック内の直下に作れ。
そしてそれにdisplay:inline;でvertical-align:top;を効かせろ。
てか、後出しで条件つけるな。ソース出せよな、最初から。

174 :Name_Not_Found:04/10/02 02:15:58 ID:???
ボケどもがああああああああああああああああああああああああああ亜!!!!!!!

175 :163:04/10/02 02:24:50 ID:???
>>174
偽るのはやめてください。

176 :Name_Not_Found:04/10/02 03:47:54 ID:???
もう寝てるだろうけど、こんな感じ?
ttp://zxcv.sakura.ne.jp/text/test/test.html

後は適当に弄繰り回すがいいと思います。

177 :163:04/10/02 10:41:40 ID:???
あれから寝てしまいました。

>>173
すみません。
まさかブロック構造を解体するという回答がくるとは思わなかったので。。。

>>176
サンクスです。
そのまま使かわさせてもらいます。

178 :Name_Not_Found:04/10/02 11:00:42 ID:???
>>176-177
それ、positionでやるならfloatは無用だよ。
<div class="a">
<div class="b"><p>こんな感じでよろしいか?</p></div>
<div class="c"><a href="./test.css">cssソース</a></div>
</div>
div.a{width:80%;
margin-left:10%;
margin-right:10%;
position:absolute;
border:#F00 solid 1px;}

div.b{width:70%;
float:left; /* これを削っても、表示は同じ! */
height:10em;
border:#00F solid 1px;}

div.c{width:30%;
position:absolute;
bottom:0;
right:0;
height:5em;
border:#0F0 solid 1px;}

179 :Name_Not_Found:04/10/02 12:45:58 ID:???
解りやすい●●●だな

180 :Name_Not_Found:04/10/02 15:37:24 ID:???
テーブルの代わりにCSSでレイアウトしているのですが
真ん中揃えができません。。

例えば
<div class"title">
タイトルです。
</div>

というhtmlがあったとして、classにしているtitleは↓です。

.title{
height: 100px;
width: 345px;
position: absolute;
left: 10px;
top: 100px;
}

leftに10pxと絶対指定しているので動かないのもわかるのですが
左に10px開けてブラウザで全体表示させた時は
センター揃えの左10px空きにしたいのです。

説明が下手ですみません。。テーブルで言うと↓の感じです。
<table width="345" height="100" align="center">
<tr><td>タイトルです。</tr></td>
</table>

181 :Name_Not_Found:04/10/02 16:04:43 ID:???
>>180
とりあえず、こうやってみれ

シート
div.title { width: 345px; margin: auto; }

html
<div class="title">タイトル</div>

182 :180:04/10/02 16:17:00 ID:xqw/f1sq
>>181
ありがとうございます。マージンで間をあけるのですね。
これって別にIE以外でも表示は変わりませんよね?
とりあえず、これでやってみます。ありがとうございました。

183 :176:04/10/02 16:19:56 ID:???
>>178
さんくす

184 :180:04/10/02 16:20:50 ID:???
勘違いしてました。。マージンをleftの代わりに使うと思っていたのですが
違うみたいですね。指定の場所のレイアウト固定ができない。。

185 :Name_Not_Found:04/10/02 16:31:57 ID:???
スマ。おれもカンチしてた

186 :Name_Not_Found:04/10/02 16:33:13 ID:???
>>180
「左に10px開けて〜にしたいのです。」の日本語がよくわからないんですが。

l ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
|10px                                    |
|←→|←──  345px ────→|←── auto .──→|
|   ____________              |
|    |                      |                 |
|    |      タイトルです      |                 |
|    |                      |                 |
|    ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄              |

こうか?

187 :180:04/10/02 16:34:05 ID:???
>>185
そうでしたか・・。やっぱり、CSSの場合は位置を固定した上で、
ブラウザによってセンタリングにしたりはできないのかな。。


188 :180:04/10/02 16:40:02 ID:???
>>186
そうです。それでブラウザで表示させた場合は
真ん中に表示されているんだけど、左は10px空いているような。

ヤフーで例えると「ピンクリボン」の画像が”国内の都市”の上に
来ていますよね?この画像を絶対指定で配置を決めてある場合
ブラウザの大きさを変えたり、お気に入りのサイドバーを
追加しても、絶対指定だからその場から動きませんが
center指定の場合は必ず真ん中に表示されます。そう言う感じです。


189 :Name_Not_Found:04/10/02 17:02:23 ID:???
うーん、全然言ってる内容が伝わってこないです。

「ブラウザで表示した場合は〜」
逆にいうと、それ以外の場合(186の状態で表示)っていうのはどういう場合なわけ?

「絶対指定だから〜 必ず真ん中に〜」
絶対指定なのかセンタリングなのかどっちなのか。どっちもといわれても困るんですが。
ブラウザの状態(?)によって適宜切り替えるってこと?

とりあえず >>186 ならこれで。

div.title {
width:345px;
height:100px;
margin-left:10px;
text-align:center;
}

190 :Name_Not_Found:04/10/02 17:06:13 ID:???
俺も>>180が何をしたいかさっぱりわからん

191 :180:04/10/02 17:08:25 ID:???
>>189-190
すみません、、テストで作成したページをまとめてzipでうpしました。
http://up.isp.2ch.net/up/b36462a59707.zip

見ていただくと左に揃えでページが作成されていますが
これをセンタリングしたいだけです。

192 :Name_Not_Found:04/10/02 17:12:48 ID:???
俺なら全体をdivで囲って
margin-left:auto;
margin-right:auto;
ってやるかな。div厨っていわれそうだけど

193 :Name_Not_Found:04/10/02 17:18:44 ID:???
>>180
>説明が下手ですみません。。テーブルで言うと↓の感じです。
><table width="345" height="100" align="center">
><tr><td>タイトルです。</tr></td>
></table>

つまりただのセンタリングだろ。
IEの後方互換なら
全体をdivってtext-align:center;
標準ならmargin-left:auto; margin-right:auto;

しかしなテンプレに詳しく載ってるから>>1->>10くらいから探してみて来い。
簡単にできるようになるさ。

194 :180:04/10/02 17:26:02 ID:???
>>193
全体をdivるのは何度かやっているのですが
やっぱり、出来ません。。教えていただいたのもしているのですが。。

ググって参考サイトを探してみてはいますが
どうにも解決出来ず、ここに来たのですが
それでも解決しません。。もう少し悩みます。

195 :Name_Not_Found:04/10/02 17:32:52 ID:???
>>194
おい!!!!
>>193が読めないのか?CSSでのセンタリングはこのスレの>>1-10に書いてあるサイトに
かなり詳しく載っている。だからそれを見に行くのが一番早い。

196 :Name_Not_Found:04/10/02 17:33:45 ID:???
>>194
>>5これを見ろ。熟読しろ。

197 :180:04/10/02 17:34:16 ID:???
>>195
もちろん「見に行った」上で質問していますが・・。

とりあえず、もう一度見直します。

198 :Name_Not_Found:04/10/02 17:51:41 ID:???
まずはhtmlのほうを見直すがいいよ
</div>が重複してる場所が結構あるから、指定どおりに動かないわ

あー、あとpositionを絶対指定してるからセンタリングできないのかも


199 :Name_Not_Found:04/10/02 17:52:43 ID:???
>>197
お前どうせstrictなんかできてないんだろうから、
全体をdivの後にそのdivに対してtext-align:centerしれば?

まあ>>5を読んでわからないならここで何を言われてもわからないよ。

200 :Name_Not_Found:04/10/03 03:44:00 ID:???
<ul>
<li>りんご
<li>みかん
<li>バナナ
<li>パイナップル
</ul>

これを2行にしたいのですが
どう指定すると良いですか?

201 :Name_Not_Found:04/10/03 05:06:24 ID:???
>>200
width float
パーツを教えてやるよ。あとは自分で考えな。

202 :Name_Not_Found:04/10/03 09:02:00 ID:???
>>199
>全体をdivの後にそのdivに対してtext-align:centerしれば?

これってstrictに反してるの?

203 :Name_Not_Found:04/10/03 09:04:47 ID:2TM1ZoMM
ボックスに影ってできますでしょうか?

204 :Name_Not_Found:04/10/03 09:57:23 ID:???
No

205 :203:04/10/03 11:00:30 ID:???
>>204
サンクス

206 :Name_Not_Found:04/10/03 11:17:59 ID:???
>>204
↓こんなん邪道ですかね?

http://grecks.s54.xrea.com/shadow.html

207 :Name_Not_Found:04/10/03 11:28:45 ID:???
シャドウだけにジャドウ。>>206
スタイル・オフにしても支障無いものにするならいいけどね。

208 :Name_Not_Found:04/10/03 11:44:39 ID:???
<div class="shadow">
<div class="light">ボックス</div>
</div>
.shadow {background:#999; margin:8px;}
.light {
background:#fff;
position:relative; left:-7px; top:-7px;
}
で、どう? これならCSS無しでもちゃんと見える。

209 :Name_Not_Found:04/10/03 12:29:55 ID:???
>>208
グラデーションの無いのは影とは呼べない。

210 :Name_Not_Found:04/10/03 12:53:56 ID:???
はあ?

211 :Name_Not_Found:04/10/03 13:05:32 ID:???
ひぃ?

212 :Name_Not_Found:04/10/03 13:21:06 ID:???
>>206
それセオリー。

213 :203:04/10/03 14:59:28 ID:???
>>208
ありがとう。
↓早速、使わせてもらいました。

アン化粧品
http://grecks.s54.xrea.com/

214 :Name_Not_Found:04/10/03 15:01:49 ID:???
なんだdiv厨か・・・

215 :Name_Not_Found:04/10/03 15:02:34 ID:???
宣伝かよ!!

216 :Name_Not_Found:04/10/03 15:11:31 ID:???

 あぁ かよ様〜〜

217 :Name_Not_Found:04/10/03 15:16:02 ID:???
>>213
厨房がサイトを作ってる会社って・・・・・・

218 :Name_Not_Found:04/10/03 15:38:08 ID:???
cssでリンクのスタイルを設定してるんですが、ある部分のリンクだけ色を変更したいのですがどうしたらいいでしょうか?

219 :Name_Not_Found:04/10/03 16:10:50 ID:???
>>218
テンプレ嫁よボケ。
そんなこともわからないってお前は池沼か?

220 :Name_Not_Found:04/10/03 16:47:52 ID:???
>>218
<font color="">で我慢してください。

221 :Name_Not_Found:04/10/03 16:48:04 ID:???
>>219
分からないから聞いてるんです。

222 :Name_Not_Found:04/10/03 16:50:44 ID:???
>>219
そういう糞レスする暇があったら、教えた方が早いと思うが・・・。

>>218
navi#a link{color: #FF9999;}

というようにid属性を使ったらいいよ。

223 :Name_Not_Found:04/10/03 16:56:29 ID:???
>>221
お前は誰?

224 :218:04/10/03 16:56:44 ID:???
>>222
ありがとうございます。

225 :Name_Not_Found:04/10/03 16:56:54 ID:???
>>213
会社なのかネタサイトなのかは知らないが、せめて広告免除ぐらいしろよ…

226 :Name_Not_Found:04/10/03 17:22:15 ID:???
>>222
こいつ...ものすげえ回答しやがるな....

227 :203:04/10/03 17:45:40 ID:???
>>225
社長がお金を出してくれないのです。(;_;)

228 :Name_Not_Found:04/10/03 17:51:36 ID:???
>>218
どうぞ

link.span{
   color:#fff;
}

<span class="link"><a href="http://#####">site</a></span>

229 :Name_Not_Found:04/10/03 18:59:57 ID:???
>>228
こいつ真性か?

230 :Name_Not_Found:04/10/03 19:16:22 ID:???
釣りだろ

231 :Name_Not_Found:04/10/03 19:41:52 ID:???
>>228
いぢめっ子ですね。

232 :Name_Not_Found:04/10/03 20:36:06 ID:???
>>228
できました!ありがとうございました!!

233 :Name_Not_Found:04/10/03 20:41:10 ID:???
やっぱりCSSよりテーブルの方が自由度高いよね。。

234 :Name_Not_Found:04/10/03 20:54:27 ID:???
>>232
できるわけねえだろボケ

235 :Name_Not_Found:04/10/03 20:55:41 ID:???
>>233
アホか最新ブラウザだけでいいなら完全CSSの方がずっといい!
旧ブラウザ考慮ならテーブル+CSSのいわゆるテーブルレイアウトがいい!



236 :Name_Not_Found:04/10/03 20:58:03 ID:???
自由度の点から言うとtable+CSSだろ

237 :228:04/10/03 20:58:30 ID:???
あっ、間違ってた。。。
ごめん。

238 :Name_Not_Found:04/10/03 22:23:55 ID:???
>>236
だから>>235だって。テーブルは安定してるけど、自由度はCSSには勝てない。
自由度のみを考えればCSSだよ。

239 :Name_Not_Found:04/10/03 22:43:10 ID:???
ギロンハヨソデ

240 :Name_Not_Found:04/10/03 22:57:53 ID:???
うん。議論はやめとこう。
じゃあ、引き続きスタイルシートについて質問がある方は、
テンプレを読んだ上で気軽にどうぞ

W3Cフリークから、テーブルマニアまで幅広いスタイルシート使いの皆さんが答えます

241 :Name_Not_Found:04/10/03 23:07:02 ID:???
>>240
仕切るのは半角英数を使えるようになってからな。

242 :Name_Not_Found:04/10/03 23:09:08 ID:???
インライン要素のpaddingの値を大きくすると、ボックス(青腺)がはみでるんですけど、
はみ出ないようにすることはできますか?

http://grecks.s54.xrea.com/div-test.html

243 :Name_Not_Found:04/10/03 23:54:42 ID:???
>>242 ヘンなことやるね。親ブロックにもpadding指定したら?

244 :Name_Not_Found:04/10/04 01:13:55 ID:???
>>241
突っ込むのは大人になってからな。

245 :Name_Not_Found:04/10/04 01:15:38 ID:???
>>242
そもそもinlineにpaddingの上下を与えるのが間違い。
line-heightとかでやったらどうよ。

246 :242:04/10/04 08:18:41 ID:???
>>243
>>245
サンクス。
勉強になりました。

247 :242:04/10/04 08:28:26 ID:???
↓こんな感じにしたかったんです。
もっといい方法があればレスください。

http://grecks.s54.xrea.com/div-test.html

248 :Name_Not_Found:04/10/04 09:48:54 ID:???
あ、アン化粧品の人だ。

249 :Name_Not_Found:04/10/04 09:57:15 ID:???
>245
>そもそもinlineにpaddingの上下を与えるのが間違い
そうなの?

250 :Name_Not_Found:04/10/04 12:46:54 ID:???
そうよ。

251 :Name_Not_Found:04/10/04 18:39:32 ID:???
自由度は高いかもしれないけど、それは絶対指定を使う場合だろ?
絶対指定を使ってブロックをテーブル化しても
使い勝手は悪いと思うがいかが?

252 :Name_Not_Found:04/10/04 19:06:13 ID:???
>>251
どれかに対するレス?
それとも一般論?

253 :Name_Not_Found:04/10/04 19:38:02 ID:???
>>251
おまいのスキルの低さは知らんが、一般的にブラウザが完全にCSS2を標準準拠で実装してたら
完全CSSレイアウトの方が自由だな。まあはげめよ。

254 :Name_Not_Found:04/10/04 20:32:10 ID:???
結局IEか…

255 :Name_Not_Found:04/10/04 20:56:16 ID:???
はげいうなー

256 :Name_Not_Found:04/10/04 21:19:25 ID:???
>>251
>絶対指定を使ってブロックをテーブル化しても
アホだなこいつ
なんでテーブル化しなあかんねん

257 :Name_Not_Found:04/10/05 08:54:24 ID:???
オーサリングでしか出来ない奴だろ。

258 :163:04/10/05 11:53:40 ID:tiJSu1u1
>>176さん提案の下辺でボックスをそろえるCSSを使わせてもらってるのですが、
その後、字を書くと、左上に飛んじゃいます。

ボックスの下にいくようにするにはどうすればいいのでしょうか?

http://grecks.s54.xrea.com/bottom-line.htm

259 :Name_Not_Found:04/10/05 12:03:31 ID:???
>>258
position:absolute; による配置をやめるか、
または div.d も position:absolute;で配置する。

260 :163:04/10/05 12:12:02 ID:???
>>259
そうなのか。
即レス、サンクス。

261 : ◆RAGFmb7Css :04/10/05 13:55:56 ID:???
トリップにCSSキター

262 :Name_Not_Found:04/10/05 15:22:05 ID:1JhkKHU/
サイトの内の余白(上下左右)を無くして画面いっぱいにページを表示することはできますか?

263 :Name_Not_Found:04/10/05 15:23:11 ID:???
>>262
余裕で出来ます

264 :Name_Not_Found:04/10/05 16:48:21 ID:1JhkKHU/
>>263
教えてください。

265 :Name_Not_Found:04/10/05 16:48:26 ID:???
>>262
無理です。JAVAとか付かばできるかもしれないが。
>>263は頭が悪い子なのでほっといてあげてください。じきに親御さんが迎えに来るでしょう。

266 :Name_Not_Found:04/10/05 17:10:00 ID:???
--CSS --
html,body{
padding:0;
margin:0;
}

--JavaScript--
window.open("url","_blank","fullscreen=yes");

どちらの事を意図しているのだろう

267 :Name_Not_Found:04/10/05 17:27:48 ID:???
>>266
多分上の方だろうな

268 :Name_Not_Found:04/10/05 17:35:12 ID:1JhkKHU/
>>266
ありがとうございます。
--CSS --
html,body{
padding:0;
margin:0;
}
の記述で表示したのですが、
ウィンドウのサイズを変更(大きく)しても余白ができないようにはどうしたら良いのでしょうか?

269 :Name_Not_Found:04/10/05 18:12:46 ID:???
>>268
質問の意味がよくわからないが、テキストを一杯一杯書けばいいよ、たぶん。

270 :Name_Not_Found:04/10/05 18:48:17 ID:1JhkKHU/
>>269
例えばテーブルを作成して、ブラウザのウィンドウを縦横に広げても、
そのテーブルが一緒に動くようにしたいのです。
説明が下手なのでわかりにくいと思いますが、以下の
ttp://www.teiken.com
サイトように、ウィンドウを広げても余白ができないようにしたいです。

271 :Name_Not_Found:04/10/05 18:57:35 ID:???
>>270
お前誰?

272 :Name_Not_Found:04/10/05 19:02:37 ID:???
>>270
最初に質問した時の番号を名前欄にいれろアホ
テーブルのwidthを100%にしとけ

とりあえずお前は基礎から勉強してこいよ。


273 :Name_Not_Found:04/10/05 22:49:41 ID:???
このサイトみたいに、サイドに好きな背景、中央にページ
ページ上部にタイトル画像を乗せたいのですが
似たようなテンプレートみたいな物はないでしょうか?

274 :Name_Not_Found:04/10/05 22:51:31 ID:???
>>273 いきなり「このサイト」って……どのサイトですか。

275 :Name_Not_Found:04/10/05 22:55:21 ID:???
>>274
ごめんなさい、ここですorz
http://aom-tt.info/


276 :昔の人:04/10/05 22:59:23 ID:???
>>275
まづはそこのソース(HTML & CSS)を保存して、自分でやってみたのでせうか。
まだなら、質問するのはそれからにしたまへ。

277 :Name_Not_Found:04/10/05 23:01:06 ID:???
>275
テンプレートっつわれてもなぁ…。
そのサイトをテンプレートにすればええやん。

278 :Name_Not_Found:04/10/05 23:03:09 ID:???
>>275
そこは640×480のウィンドウで見ると横スクロールが出るので感心しないナ。
widthをpx単位でなく%かem単位で設計すべきでは。

279 :Name_Not_Found:04/10/05 23:07:03 ID:???
はいはい
クマー

280 :Name_Not_Found:04/10/05 23:11:20 ID:???
>>276-277
CSSを保存できることを今知りました、それだけでかなり有益な情報を得ました
ソースのCSSを片っ端から落としてみます

281 :274:04/10/05 23:19:11 ID:???
>>277
だめです、どうやればテンプレとして保存できるか分かりません

282 :Name_Not_Found:04/10/05 23:40:55 ID:???
その都度画像や文章を自分のものと入れ換える

283 :Name_Not_Found:04/10/05 23:53:47 ID:???
>>281
上でも言われてるけどもお前はCSS云々以前にHTMLの基礎から勉強してこい

284 :Name_Not_Found:04/10/06 00:25:00 ID:???
関係無い、か。

外部スタイルシートを用いる文書を保存できない(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b066.html

285 :Name_Not_Found:04/10/06 00:45:46 ID:???
>>280
外国人みたい

286 :Name_Not_Found:04/10/06 02:47:38 ID:1Okoo8/e
charset=none"で100点満点
でした。おかしいですよね。
なにかだまされ照る感じ・・

287 :Name_Not_Found:04/10/06 02:58:31 ID:???


288 :Name_Not_Found:04/10/06 09:24:30 ID:fn4NZynr
>>283
はは調子乗るなゴミ〜。

289 :Name_Not_Found:04/10/06 10:28:20 ID:???
CSSで文字にアンチエイリアスをかけることってできますかね?

290 :Name_Not_Found:04/10/06 10:33:24 ID:???
リファリンス見れば出来るかどうか解るでしょ?

アプリ任せじゃだめよ。

291 :Name_Not_Found:04/10/06 10:36:25 ID:???
ここの人ってどうして「答え」を教えてくれないんですか?
ヒントを教えるだけですね。米国式ですか?

292 :Name_Not_Found:04/10/06 10:46:55 ID:???
CSS使いの技術向上をめざしているからであります。
たまに、答えてくれる人いるから、気長に待って流れを読めばいいよ

293 :Name_Not_Found:04/10/06 10:48:16 ID:???
>>291
処理方法は教えるが
その処理方法を使って導き出される結果までは許容外
という事

294 :Name_Not_Found:04/10/06 12:09:41 ID:???
いわゆる駆け引きですね。

295 :Name_Not_Found:04/10/06 13:03:59 ID:???
質問

3カラム構成を考えたのでテンプレ周って見たのですが
結局今の段階では、どのブラウザでも同じように表示させるのは不可能ということですか?

ウィンドウサイズを変えてくるユーザがいるとしての話です。

296 :Name_Not_Found:04/10/06 13:07:09 ID:???
どのブラウザでもってことになると不可能だなぁ
見た目が大事なのか、汎用性が大事なのかで決めるよろし

297 :Name_Not_Found:04/10/06 13:08:53 ID:???
>>296
やっぱりそうですか。うーん困った。
そういう場合って、みなさんはどう対処されてるんですか?

298 :Name_Not_Found:04/10/06 13:25:36 ID:???
>>297
不特定多数への情報を生命線としているなら、誰でも読めるを第一にデザインします。
多少やぼったくても、おおむね読みやすいだろうというくらいで。

どうしてもデザインを優先したいなら、いくつかのブラウザは切る。
たとえば俺のサイトは、IE6 とNN7以上以外は捨ててる。
その代わりスタイルシート切っても意味がとおるようにはしてるけどな

299 :Name_Not_Found:04/10/06 13:31:06 ID:???
>>298
今回デザイン優先で考えているので、特定ブラウザ以外は排除することにします。
どうもありがとうございました。

>css切っても意味が通るように
うーん凄い。見てみたいっす。

300 :Name_Not_Found:04/10/06 13:59:03 ID:???
凄いのか?

301 :Name_Not_Found:04/10/06 14:04:18 ID:???
うん。 潮も吹くしな・・・

302 :Name_Not_Found:04/10/06 14:16:06 ID:???
鯨みたいだな。

303 :Name_Not_Found:04/10/06 14:57:36 ID:6UBVweGp
>>302は童貞

304 :Name_Not_Found:04/10/06 15:07:13 ID:lUGPzvmN
Netscapeの6.0をダウンロードできるところってもうないですよね?
他の旧バージョンでも構わないんですけど・・・・・。

305 :Name_Not_Found:04/10/06 15:12:42 ID:???
>>303
甘いな。 >302は女だ。

306 :Name_Not_Found:04/10/06 17:01:30 ID:???
>>303
http://channels.netscape.com/ns/browsers/archive.jsp

307 :Name_Not_Found:04/10/06 17:09:22 ID:???
>>306
童貞はNetscapeなのか?

308 :Name_Not_Found:04/10/06 17:27:59 ID:???
2カラムのレイアウトについて質問させて下さい。

左カラム <div style="float:left; width:100px;">
右カラム <div style="float:left;">

上記の指定で<div>を横に二つ並べています。

IE6.0で表示(互換モード)する際は、右カラム内の文章はウインドウサイズに合わせて自動改行されるのですが、
モジラで表示しますと、右カラム内の文章は自動改行されません(右カラムはブラウザ幅を超えて左カラムの下に回りこまれる)。

右カラム <div style="float:left;">の横幅は、ブラウザ任せには出来ず、明確な指定が必要なのでしょうか。

309 :Name_Not_Found:04/10/06 17:30:52 ID:???
必要です。

つーか<やってみればすぐ解るでしょう?

310 :Name_Not_Found:04/10/06 18:45:39 ID:???
>>308
右カラムは margin-left: 100px; だけでいい。

311 :Name_Not_Found:04/10/06 19:40:48 ID:???
308です。
貴重なアドバイスをありがとうございました。

310さんの方法を試し、上手く表示されるようになりました。こういう方法を自分は知らず、フロートの働きについてもっと勉強が必要だと感じました。
また質問の仕方が至らずに309さんに不快な思いをさせていたらすみません。

今後精進して参ります。

312 :Name_Not_Found:04/10/06 19:44:02 ID:???
不快ではないよ。

    がんがれ

313 :Name_Not_Found:04/10/07 09:37:19 ID:03MIyb+v
たかがCSS如きで偉そうにしてる勘違いが多い。

314 :Name_Not_Found:04/10/07 10:14:10 ID:???
と、偉くもないのに偉そうに申しております。

315 :Name_Not_Found:04/10/07 11:22:46 ID:???
>>308みたいな質問も、FAQ(>>6)を見れば済む話なんだよね。

316 :Name_Not_Found:04/10/07 15:59:09 ID:???
ちょっと長めですが、アドバイスお願いします。
【使用OS】winIE6
【質問】
CSSで角丸テーブル(色付き)を作っています。
以下のような状態でテーブル内の最下行にリンクを張ると、
マウスオーバー時に、底辺であるはずの角丸画像の下に
余分な領域がはみ出てしまいます。

------スタイルシート----------
A {
text-decoration: none;
border-bottom: solid 1px #背景色;}
A:link { と
A:visited {
border-bottom: solid 1px #背景色;}
A:hover {
color: #目立つ色;
border-bottom: solid 1px #背景色と違う色;}

.bottomcorner{
background: #背景色 url(../角丸画像右.gif) no-repeat top right;}
.corner{
heighth: 角丸画像の高さpx;
width: 角丸画像の幅px;
border: none;
display: block;}


317 :(つづき):04/10/07 16:00:01 ID:???
(つづき)
-----本文----------------------
<div>
<P><A href="***.htm">文章</A></P>
<div class="bottomcorner">
<img src ="角丸画像左.gif" alt="*" width="角丸画像の幅" height="角丸画像の高さ" class="corner"></div>
</div>
-------------------------------
ただ、A:hoverの「#背景色と違う色」を
他のAたちと同じ「#背景色」にすると余分な領域は生じません。
これは一体何が原因なのでしょうか。

318 :Name_Not_Found:04/10/07 16:26:38 ID:???
>>316
何処にテーブルが(´・ω・`)?

<div class="bottomcorner">
<img src ="角丸画像左.gif" alt="*" width="角丸画像の幅" height="角丸画像の高さ" class="corner"></div>

そもそもpの方がいいような気がするけどさておく。
div開始タグの後ろの改行が気になる。もしこれが原因でなければ、
img の vertical-align をbottomにするとどうだろうか。

デフォがbaselineになっているため、下に空白があるように見える事が
あります。

319 :Name_Not_Found:04/10/07 17:02:18 ID:???
>>315
でも質問があるとうれしいんだろ?

320 :316:04/10/07 17:30:01 ID:???
>>318
レスありがとうございます。
テーブル、というか<div>の枠?囲い?
<table>を使っているわけではないです。
分かりづらい表現で
(´・ω・`)ショボンヌさせてすみません。

>div開始タグの後ろの改行
>img の vertical-align をbottom
試してみたのですが、改善されないようでした。

>そもそもpの方がいいような気がするけどさておく。
<p>でも症状は同じでした。

初心者のくせにアレコレ凝ろうとするのがいけないんでしょうな、きっと・・・

321 :Name_Not_Found:04/10/07 18:25:41 ID:Xos6fV60
質問なんですが
小さい画像をクリックすると新しいページが開いてその画像が大きくなる。
新しく開いたページは画像の大きさと同じくらい。

これをやりたいのですがどなたか教えてくれませんか?
お願いします。

322 :Name_Not_Found:04/10/07 18:42:43 ID:???
ちっとうざいけどJavaScriptで出来きます。
そちらのスレへどうぞ

323 :Name_Not_Found:04/10/07 19:03:26 ID:Xos6fV60
すみませんスレ違いでしたか、そちらに行ってみます。

324 :318:04/10/08 01:38:32 ID:???
>>320
今ちゃんと読んだんだけど、

<img 中略 class="corner">
.corner{ 中略 display: block;}

これがすごく怪しいんだけど、何故にブロックに?
下記は漏れがやるときにとる方法なんだけど、もっといい方法も
あるだろうから、自分で試したり、エロイ人に聞いたりしてください。

<div>
<hn>見出し</hn>
<p><img src="画像.jpg"></p>
</div>

上記の様なコードに対して、
鍋フタの様な画像を見出しの背景(上寄せ)に、
鍋の底の様な画像をブロックの背景(下寄せ)にすると、
それっぽくなります。
見出しは必要なくても適当に書いておいて、
text-indent をマイナスにして枠の外にすっ飛ばす、などしたりとか。

325 :Name_Not_Found:04/10/08 15:53:13 ID:???
<tr>
  <td><img src="画像1"></td>
  <td>画像1の説明1</td>
  <td>画像1の説明2</td>
  <td>画像1の説明3</td>
</tr>
<tr>
  <td><img src="画像2"></td>
  <td>画像2の説明1</td>
  <td>画像2の説明2</td>
  <td>画像2の説明3</td>
</tr>

以下続く


326 :325:04/10/08 15:56:16 ID:???
これをIEで以下のように表示させるにはどうすればいいのでしょうか。firefoxではなんとかできました。

┏━━━━┳━━━━┓ ┏━━━━┳━━━━┓
┃      ┃ 説明1 ┃ ┃      ┃ 説明1 ┃
┃ 画    ┣━━━━┫ ┃ 画    ┣━━━━┫
┃ 像    ┃ 説明2 ┃ ┃ 像    ┃ 説明2 ┃
┃ 1    ┣━━━━┫ ┃ 2    ┣━━━━┫
┃      ┃ 説明3 ┃ ┃      ┃ 説明3 ┃
┗━━━━┻━━━━┛ ┗━━━━┻━━━━┛

また、リストのレイアウトサンプルのページみたいに、
テーブルのレイアウトサンプルのページがあればおしえてください。
(いわゆる「テーブルレイアウト」ではなく、表としてのテーブルのレイアウト)

327 :Name_Not_Found:04/10/08 16:09:08 ID:???
こーゆー時はマジレスするべきなの?

328 :Name_Not_Found:04/10/08 16:31:24 ID:???
死ね、あたりが適切かと

329 :Name_Not_Found:04/10/08 17:11:18 ID:???
>>326
もっとテーブルレイアウトしちゃうぞ。
<table>
  <tr valign=top>
  <td>
 
  <table border=1>
    <tr>
    <td rowspan=3><img src="画像1"></td>
    <td>画像1の説明1</td>
    <td>画像1の説明2</td>
    <td>画像1の説明3</td>
    </tr>
    </td>
    </tr>
  </table>

  <td>
 
  <table border=1>
    <tr>
    <td rowspan=3><img src="画像2"></td>
    <td>画像2の説明1</td>
    <td>画像2の説明2</td>
    <td>画像2の説明3</td>
    </tr>
  </table>
  </td>
  </tr>
</table>


330 :Name_Not_Found:04/10/08 17:19:15 ID:???
>>329
綺麗やなーソースみるの大好き
CSS勉強しはじめたばかりなんですけど、そのソースの左の余白は
TABで入れるんですよね?そのスペースの使い方が難しいのですが
こつとかありますか?綺麗に見せると言うのかな
レスだるかったらスルーしてください

331 :Name_Not_Found:04/10/08 17:21:35 ID:???
>>330
いや、めちゃくちゃでしょ。インデントしてるだけじゃん
  <table border=1>
    <tr>
    <td rowspan=3><img src="画像1"></td>
    <td>画像1の説明1</td>
    <td>画像1の説明2</td>
    <td>画像1の説明3</td>
    </tr>
    </td>
    </tr>
  </table>
何これ?それにrowspanは違うっしょ?

332 :Name_Not_Found:04/10/08 17:33:25 ID:Lv6fanFc
メニューの文字の先頭に小さいアイコンを配置したいのですが
それをcssで管理できればと思い挑戦しました。
しかし、まったく表示されません。これは可能なのでしょうか?
もし可能であればアドバイスお願いいたします。


外部cssに下記の記述をしました。
div.a {img src:image/a.gif;}

333 :Name_Not_Found:04/10/08 17:39:57 ID:???
勘だけが頼りですか…?

334 :Name_Not_Found:04/10/08 17:40:27 ID:???
>>332
a { background: url(image/a.gif) no-repeat left center; }

335 :Name_Not_Found:04/10/08 17:41:42 ID:???
>>332
というかそんな書き方はじめて見たかも

336 :Name_Not_Found:04/10/08 17:45:48 ID:???
>>325
IEに期待するのが間違い

337 :332:04/10/08 17:46:49 ID:Lv6fanFc
>>333-335
>>334の記述を試して見ましたが、何も表示されませんでした。

失礼かもしれませんがbackgroundで合っていますでしょうか?
メニューの先頭に小さいアイコンを配置したく、背景に画像を表示したいわけではありません。

10*10の小さいアイコンです。具体的には
◆メニュー1
◆メニュー2
のように◆をcssで配置できればと思っています。
html部分にも<div id=a>メニュー1</div>指定済みです。



338 :Name_Not_Found:04/10/08 17:52:20 ID:???
失礼だ。よく調べもせず、本当に失礼だ。
div.a {} と、自分のソースに合わせればいいじゃないか。
それに、なぜDIV?そのメニューならリストを使え。
そして list-styleで簡単にできる。

…っても調べないんだろうな。

339 :Name_Not_Found:04/10/08 17:53:50 ID:???
content でもいいがね。

340 :332:04/10/08 17:54:42 ID:???
>>338
ええと・・もちろんdiv.a{}は私のソースに合わせて書きました。
しかし何も表示されなかったので、質問したのですが怒らせてしまったなら申し訳ありません。

341 :Name_Not_Found:04/10/08 17:56:17 ID:???
とりあえず>>332は「>>1を読め」だな。

342 :325:04/10/08 18:00:55 ID:???
すみません、せめて、

「<TR>一個め<TD>一個め」
「<TR>一個め<TD>二個め」
「<TR>一個め<TD>三個め」
「<TR>一個め<TD>四個め」

「<TR>二個め<TD>一個め」
「<TR>二個め<TD>二個め」
「<TR>二個め<TD>三個め」
「<TR>一個め<TD>四個め」



と表示させる方法はないのでしょうか?できればテーブルの入れ子とかしないで、ストリクトな方法で。。


343 :325:04/10/08 18:02:50 ID:???
>>342の最後の「<TR>一個め<TD>四個め」は「<TR>二個め<TD>四個め」です。訂正。

つまりその、<TR>内の<TD>を縦に並べたいです。


344 :Name_Not_Found:04/10/08 18:06:34 ID:???
だからIEに期待するなとあれほど

345 :332:04/10/08 18:07:22 ID:???
>>338
list-styleがあることを忘れてました!

あと、素朴な疑問なのですがアイコンを普通に配置しても
テキストよりラインが微妙に上にいってしまいます。

UL { align : middle; list-style-image: url(../image/a.gif); }
と記述してもアイコンがピクリとも動きません。
もしかして、こういう場合は最初から下よりに画像を作る必要があるのでしょうか?
それともcssで制御可能ですか?


346 :Name_Not_Found:04/10/08 18:09:19 ID:???
>>345
>>UL { align : middle; list-style-image: url(../image/a.gif); }
>>align : middle;
>>align
??

347 :Name_Not_Found:04/10/08 18:10:31 ID:???
>>332はやはり>>4を全部ちゃんと読んだほうがいいな

348 :Name_Not_Found:04/10/08 18:10:47 ID:???
…というか、
遊ばれてるんじゃないか俺ら。

       ∧_∧
  ∧__∧ (´<_` ) なんと。
  ( ´_ゝ`)/  ⌒i
_(__つ/ ̄ ̄ ̄/i |_
  \/___/ ヽ⊃

349 :Name_Not_Found:04/10/08 18:11:07 ID:???
うわなんと。

350 :Name_Not_Found:04/10/08 18:11:52 ID:???
>>332のソースといい>>345のソースといい、適当すぎ


351 :Name_Not_Found:04/10/08 18:14:09 ID:ONaAfzYk
表のカラーを半透明にしたくて、下記の記述を他のcssの記述と一緒に
外部にスタイル情報をまとめたファイルに入れたのですが、
この記述だけが適用されませんでした・・・。
透明化する記述は外部cssで読み込めないのでしょうか?
もしおかしな記述があったらご指摘ください。

■外部cssの内容
.S1 {
filter:alpha(opacity=41);
background-color:#ffffff;
color:#000000;
width:180px;
height="240"
}

■適用させたいHTMLの記述
<tr>
<td align="center">
<span id="S1">本文</span>
</td>
</tr>


352 :Name_Not_Found:04/10/08 18:15:02 ID:???
>>351
セレクタ間違い。#S1

353 :332:04/10/08 18:17:54 ID:???
もしよろしければリファレンスのどの部分を読めば良いかだけ
教えていただけませんでしょうか?

頭に描いているものを専門用語でどう言うのかわからないので
リファレンスを見ても、どこを読めば解決するのかがわかりません。

後学のために、よろしくお願いいたします。

354 :Name_Not_Found:04/10/08 18:20:58 ID:???
>>353
後学のためなら>>4を全部読む。
そこには用語の解説も載っている。
あと>>1を熟読すること。

355 :332:04/10/08 18:27:35 ID:???
>>354
あの・・何といえば良いのか・・。

誘導として、おっしゃりたいこともわかりますが
とりあえず今回の処理の解決方法の箇所を教えていただくことで
次回から不明な点が出ても、それを参考に探すことができると思うので
リファレンスの具体的なところを教えていただけませんでしょうか?

確かに>>4を全部読むことが最終的には大事になってくることは理解できますが
今すぐに全部読む時間もなく、その膨大な量を頭に全部入れることも出来ません。

今回の部分を解決して、その箇所から「cssで何をしたいか」を辿っていきますので
どうぞよろしくお願いいたします。

356 :325:04/10/08 18:28:45 ID:???
IEに期待するな、でFAなんでしょうか?バグ辞典にも載ってなかったのですが

357 :Name_Not_Found:04/10/08 18:30:37 ID:???
>>355
みんなそうだよ。解説もFAQも過去ログも読みたくない。
手っ取り早く自分の疑問に答えて欲しい。

358 :Name_Not_Found:04/10/08 18:36:38 ID:???
>>356
うーん、わからんわ。

359 :Name_Not_Found:04/10/08 18:37:59 ID:???
>>355
思いつきとか勘でcss記述してもうまくいくわけないと思うので
基礎からやり直してください。

>>332とか>>345とか、なんかギャグのつもりですか?

360 :332:04/10/08 18:43:17 ID:???
え〜と、どう伝えたらわかっていただけるのでしょうか・・。

早く答えが知りたいというよりも「どこを調べればよいか」を教えていただきたいんです。
ただ「はい、あそこにリンクがあるから調べてね。じゃあさよなら」だと自分がどの位置に
いるかもわからないので、漠然とし過ぎて困ってます。

答えを教えて欲しいというわけではないことを、わかって欲しいです。

361 :Name_Not_Found:04/10/08 18:46:09 ID:???
しつこいよ?一通り見て、自分が理解できそうなところをよく見ればいいじゃん
>>4のリンクにはタイトルも書いてあるから、それを見るだけでも自分がどのページを見ればよいのかわかる

もう言い訳しないほうがいいと思うよ

362 :Name_Not_Found:04/10/08 18:47:30 ID:???
ゆとり教育のしわ寄せか・・・

363 :Name_Not_Found:04/10/08 18:48:25 ID:???
>>360
だから>>4のサイトを全部読めと言ってるだろ

364 :Name_Not_Found:04/10/08 18:48:46 ID:???
これがいい大人とかだったらかなり痛いね。リアル厨房であってほしい

365 :Name_Not_Found:04/10/08 18:49:24 ID:???
ここ最近でも最低レベルの質問者だな。
内容じゃなく姿勢が。

366 :Name_Not_Found:04/10/08 18:50:55 ID:???
ぐぐれ
「ぐぐれって何ですか?」
グーグルで検索しろってこと
「グーグルって何ですか?」
検索サイトだ
「アドレスおしえてください」

「…使い方を教えてください」

367 :Name_Not_Found:04/10/08 18:52:37 ID:???
全部ネタでした!










って言ってくれ・・うそでもいいから。今回だけは、ネタだと言ってくれたほうが救われる・・

368 :Name_Not_Found:04/10/08 18:52:49 ID:???
>360
cssの記述方法をきちんと調べろと言われてるのだ
HTML上で要素内の属性としての書き方とは違う

369 :Name_Not_Found:04/10/08 18:56:37 ID:???
わりと良い食いつき

370 :325:04/10/08 19:00:33 ID:???
>>332のかげに隠れてしまってるのですが、誰か分かる人いますか?

>>343の、<TR>内の<TD>を縦に並べる方法が知りたいです。
Mozilla系じゃなくてIEで。

371 :Name_Not_Found:04/10/08 19:02:58 ID:???
>>365
内容もかなり最低だよ

372 :Name_Not_Found:04/10/08 19:12:06 ID:???
>>370
しつこいな。
>>625>>326のテーブルにならないのはあたりまえだろ。
それはこのスレの話題じゃない。
初心者スレで>>326の書き方を聞け。

373 :325:04/10/08 19:15:41 ID:???
>>372
いや、それはもういいんです。(できれば知りたいですが)
>>343の、<TD>を縦に並べる方法です。
表としてテーブルを使いたいので、初心者スレ向きのテーブルレイアウトの話ではないです。


374 :Name_Not_Found:04/10/08 19:16:54 ID:???
>>372
>>326はMozillaではなりますよ。もちろんCSSで。


375 :Name_Not_Found:04/10/08 19:18:50 ID:???
>>370
┏━┳━┳━┓
┃あ┃い┃う┃
┣━╋━╋━┫
┃か┃き┃く┃
┗━┻━┻━┛



┏━┓
┃あ┃
┣━┫
┃い┃
┣━┫
┃う┃
┣━┫
┃か┃
┣━┫
┃き┃
┣━┫
┃く┃
┗━┛

てこと?

376 :Name_Not_Found:04/10/08 19:21:18 ID:???
>>373
なんで誰にも相手にされないかまだわかんないの?
>>342-343も負けず劣らず初心者質問だからだろ。
いいから初心者スレに行って作りたいテーブルの図を書いて聞け。

377 :Name_Not_Found:04/10/08 19:23:48 ID:???
なんか今日は当たりの日だな。

378 :Name_Not_Found:04/10/08 19:24:42 ID:???
>>374
なんでhtmlの記述でできることをCSS使ってまで
そんなひねくれたことせにゃならんのだ?

379 :375:04/10/08 19:30:20 ID:???
表の「構造」が変わるのだから、スタイルの問題じゃないと思う、漏れも。
見出し行or列との関係も変わっちゃうし。

JavaScriptでDOMいじりしていろいろ入れ替える、とするのが >>370
意図するところにもっとも近いのでは、と思うけど、どう?

380 :325:04/10/08 19:35:40 ID:???
ストリクトなHTMLを記述したいからです。
colspanやrowspanを使うと表の内容が変わってしまうので。
元データは、たとえば
  1-a,1-b,1-c,1-d
  2-a,2-b,2-c,2-d
  3-a,3-b,3-c,3-d
これを素直に表にすると
<table>
  <tr><th>a</th><th>b</th><th>c</th><th>d</th></tr>
  <tr><td>1-a</td><td>1-b</td><td>1-c</td><td>1-d</td></tr>
  <tr><td>2-a</td><td>2-b</td><td>2-c</td><td>2-d</td></tr>
  <tr><td>3-a</td><td>3-b</td><td>3-c</td><td>3-d</td></tr>
</table>
となると思います。そのうえで、表示をCSSで変更したいのです。デザインはCSSの役割なので。

381 :Name_Not_Found:04/10/08 19:36:24 ID:???
>>375

そんな感じです。

┏━━━━━━━┓<table>
┃┏━┳━┳━┓┃
┃┃あ┃ い┃ う┃┃
┃┗━┻━┻━┛┃
┃┏━┳━┳━┓┃
┃┃か┃ き┃ く ┃┃
┃┗━┻━┻━┛┃
┗━━━━━━━┛

を、

382 :325:04/10/08 19:37:04 ID:???
┏━━━┓<table>
┃┏━┓┃
┃┃あ┃┃
┃┣━┫┃
┃┃い┃┃
┃┣━┫┃
┃┃う ┃┃
┃┗━┛┃
┃┏━┓┃
┃┃か┃┃
┃┣━┫┃
┃┃き┃┃
┃┣━┫┃
┃┃く ┃┃
┃┗━┛┃
┗━━━┛
か、

383 :325:04/10/08 19:37:31 ID:???
できれば

┏━━━━━━┓<table>
┃┏━┓┏━┓┃
┃┃あ┃┃か┃┃
┃┣━┫┣━┫┃
┃┃い┃┃き┃┃
┃┣━┫┣━┫┃
┃┃う ┃┃く ┃┃
┃┗━┛┗━┛┃
┗━━━━━━┛

としたいのです。

384 :Name_Not_Found:04/10/08 19:42:42 ID:???
テーブルレイアウターには理解してもらえんと思うよ

385 :375:04/10/08 19:45:20 ID:???
>>380-383
すこし勘違いしていると思う。
表は多くの場合、構造がダイレクトに見た目に反映してしまうのです。
たとえ項目の内容が同じでも、
┏━┳━┳━┓
┃あ┃い┃う┃
┗━┻━┻━┛

┏━┓
┃あ┃
┣━┫
┃い┃
┣━┫
┃う┃
┗━┛
は全く異なる表の構造な訳です、見た目の問題じゃなく。同値じゃない。
だから、>>383の様にしたければ、3行2列の表を書いても十分strictですよ。
がんがれ。

386 :Name_Not_Found:04/10/08 19:47:06 ID:???
ユーザーのIE離れに頭を抱えるブラウザシェル開発者
ttp://japan.cnet.com/news/ent/story/0,2000047623,20075052,00.htm

イイヨ、イイヨー

387 :375:04/10/08 19:47:09 ID:???
>>385
追記。
1行3列や、3行1列になるコンテンツを表としてマークアップするのは
おかしいかもしれません。

388 :325:04/10/08 20:12:23 ID:???
簡単なソースとFireFoxでのスクリーンショットをアップしました。
よかったらダウンロードしてみてください。
FireFoxでは実現可能なんですが、IE5.0では通常のセル表示になります。

ttp://v.isp.2ch.net/up/7c0e8c96e407.zip

389 :325:04/10/08 20:16:22 ID:???
ウィンドウの横幅にあわせてアイテムの並びが変動するようになっているので、
適当に横幅を変えてください。(FireFoxの場合)


390 :Name_Not_Found:04/10/08 20:23:31 ID:???
>>388
さすがMozilla・・なのか?なんか次元が違うね。

391 :325:04/10/08 20:44:33 ID:???
すみません、OPERA7でもちゃんと表示できるように修正しました。

ttp://up.isp.2ch.net/up/a121b011e5f0.zip

392 :Name_Not_Found:04/10/08 20:48:56 ID:???
>>325
<TH>のことを考えると、そのマークアップのほうがいいかもしれんね。てかそうすべきか。


393 :Name_Not_Found:04/10/08 20:49:59 ID:???
>>391
とりあえず、、、馬鹿にしてスマンカッタ

394 :Name_Not_Found:04/10/08 20:54:43 ID:???
漏れもゴメソ
>>332と一緒だと思ってた
解決法はわからん

395 :Name_Not_Found:04/10/08 21:01:47 ID:???
>>391
それIE5だからじゃない?6だと意図どおりになってるかもよ?
だれか確認してやってくれ。ちなみに漏れも5だorz

396 :Name_Not_Found:04/10/08 21:13:42 ID:???
サイズ変えたら、テーブルのセルも変わった。
画像−aaaa-bbbb-ccccのままで。IE60

397 :Name_Not_Found:04/10/08 23:12:09 ID:???
ラピュタは本当にあったんだ!

398 :Name_Not_Found:04/10/08 23:39:53 ID:???
ここに質問に来るのは>>1すら読まない初心者か
回答者が理解できんくらいのレベルのやつの二極化か

というか回答者のレベルが落ちたのか

399 :Name_Not_Found:04/10/08 23:52:44 ID:???
>>398
ええ、その通りです。

ですので回答者のレベル向上の為に
貴方様に於かれましては
「自ら回答+他の回答者批判」 
といった論法でお願いいたします。

400 :Name_Not_Found:04/10/08 23:55:28 ID:???
>>398
ラ ベ ル だ!

401 :398:04/10/08 23:59:19 ID:???
>>399
漏れも理解していないor2

402 :Name_Not_Found:04/10/09 00:01:23 ID:???
ずいぶんケツが高いな。

403 :Name_Not_Found:04/10/09 00:02:47 ID:???
頭が低いと言ってやりなよ。

404 :Name_Not_Found:04/10/09 00:56:44 ID:???
結局>>325の質問に何かいい案とか出てないの?
>>391のをダウソしてみてちょっと興味があったんだが

405 :Name_Not_Found:04/10/09 01:19:46 ID:???
>325
1. IE(6) ではムリっぽい
 tr や td に display を指定してもまったく反応してないように見える
 (none は適用できるらしいが)
2. tr に display: inline; と float を両方指定するのは矛盾してると思う
 この場合 table-row(デフォルトスタイル)→ inline(指定) → 自動的に block
 になるのかな
3. 少なくともCSS2の段階では
 ttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x26
 「オススメしない」と書いてある
ttp://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#s-17-2
 「UAによっては無視するかもよ」とも書いてある
4. 3. にも関連するが,tableってのはある程度「縦横の関係がわかりやすいという
 見栄えも込みで表」だと思うので,その表示を変えられなくても仕方ないと思う
 表というのはデータの「表現方法」であって「構造」を表してるわけじゃないはず
 XMLなら
 <photo>..</photo>
 <date>..</date>
 <size>..</size><width>..</width><height>..</height>
 とでもなっていて,それを「tableとしてマークアップする」でも
 「hn + dd-dtでマークアップする」でもいいはず
 tableとしてマークアップするなら「(視覚表現可能なUAでは)縦横のデータを
 一覧したい」という作者または閲覧者の思惑が働いているだろうし,その思惑を
 崩さないように,というのが3. だと思う

マークアップに関して,もし議論が続くようなら「正しい記述」スレッドか
「標準仕様」スレッドあたりで.僕がずっと付き合うとは限らないけど.


406 :Name_Not_Found:04/10/09 01:25:03 ID:???
ほうほう。勉強になります
リンク先は見てないけど
見出し+リストかあ
そういえばリストにキャプション要素をつけるべきとか何とかストリクトスレであったような


407 :Name_Not_Found:04/10/09 02:25:40 ID:???
クリトリススレだろ

408 :Name_Not_Found:04/10/09 10:08:40 ID:???

 イヤン

409 :Name_Not_Found:04/10/09 10:36:56 ID:???
ツマンネ

410 :Name_Not_Found:04/10/09 11:16:45 ID:DqV7p9My
三つの画像を隙間無く横に並べたいのですがどうしても横に隙間が出来てしまいます。
なぜですか?
OS:XP ブラウザ:IE6

.k{width:20px;
height:20px;
border:0px;
padding:0px;
margin:0px;
clear:left;
float:left;}
.kc{width:20px;
height:20px;
border:0px;
padding:0px;
margin:0px;
float:left;}
.z{width:450px;
height:20px;
border:0px;
padding:0px;
margin:0px;
float:left;}

<img src="i1.gif" alt="" class="k"><img src="i2.gif" alt="" class="z"><img src="i3.gif" alt="" class="kc">

どなたか教えてください。

411 :Name_Not_Found:04/10/09 11:56:18 ID:???
>>410

<img><img><img>

img { margin:0; padding:0;border:0; }

これじゃだめなの?
高さとハバは<img>内で指定。
<img src="" width="" height="" alt="">

412 :Name_Not_Found:04/10/09 12:50:43 ID:???
>>410
見づらくてワラタ
元の画像に白い枠があるとかいうオチとか。

413 :332:04/10/09 13:34:47 ID:???
>>368
なるほど!そういう原因があったんですね。

読解力がある人がいて良かったです。
答えが知りたいのではなく「何について調べる必要があるか」を知りたかったので。

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

414 :Name_Not_Found:04/10/09 14:44:04 ID:6Oe/89uG
div.xxx{
position:absolute;
bottom:2%;
text-align:center;
}

やりたいことは画面の一番下の真ん中に文章を置きたいのですけれども
text-alignが無視されてしまいます。ボックスを絶対指定しておきながらcenterってのがおかしい気がしますが
どうしたらいいのでしょうか?

415 :Name_Not_Found:04/10/09 15:04:37 ID:???
ボックス内に、ボックスのサイズよりも大きい画像を表示させると
ボックスのサイズも大きくなってしまいます。
ボックスのサイズが変わることなく、
ボックス内に自動的に収まるようにすることはできますか?

416 :Name_Not_Found:04/10/09 15:07:43 ID:???
>>410
HTMLを理解せずになにをやってるんだよ。
>332といいオマイと言いアホ以外の何者でもない。

417 :Name_Not_Found:04/10/09 15:10:30 ID:???
>>415
自分で矛盾したことを書いてるのは自覚してるか?

画像とボックスのサイズを合わせることがそんなに難しいか?

418 :Name_Not_Found:04/10/09 15:11:40 ID:???
画像のwidth・heightをボックスのそれに合せる、とか。>>415

419 :Name_Not_Found:04/10/09 15:14:45 ID:???
>>415
IEのバグは知ってるか?

ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b052.html

420 :Name_Not_Found:04/10/09 15:16:04 ID:???
>>413
あーイタタタタ
自分の向上心のなさを棚に上げておいて
回答者は全員読解力がない人ばかりですか

>答えが知りたいのではなく「何について調べる必要があるか」を知りたかったので。
まだ言い訳するですか!

421 :Name_Not_Found:04/10/09 15:16:50 ID:???
>>419
対処方法を聞いてるんだよ。

422 :Name_Not_Found:04/10/09 15:18:41 ID:???
>>414 leftかrightは指定してみた?

423 :Name_Not_Found:04/10/09 15:20:48 ID:???
>>419 そんなのすぐわかるだろ。overflow:hidden;か>>418

424 :Name_Not_Found:04/10/09 15:21:26 ID:???
>>421 そんなのすぐわかるだろ。overflow:hidden;か>>418

425 :Name_Not_Found:04/10/09 15:21:26 ID:6Oe/89uG
>>422
leftやrightで50%みたいな指定をすると”大体”中心なんですがちょっとずれてて綺麗じゃないのです。
なのでcenterにしたいんですけど・・・(´・ω・`)

426 :Name_Not_Found:04/10/09 15:22:59 ID:???
>>325 all
そもそもお前ら表ってもんをわかってないんだよ。まあいいけどね。とりあえずa-b-cの正確なヘッダを教えなさい。
多分
<tr>
<th rowspan="3">画像
<td>a
</tr>
<tr>
<td>b
</tr>
<tr>
<td>c
</tr>

でも問題ないだろ。
dl
dt
dd
dd
dd
でも問題ないだろ。

とりあえずrowspan colspanがなんでstrictで廃止されてないかも一考あれ。


427 :昔の人:04/10/09 15:25:21 ID:???
>>414 left:0; width:100%; を追加してみたまへ。

428 :Name_Not_Found:04/10/09 15:25:44 ID:???
a,b,c
が画像についてのコメントであったらdlだな。

429 :Name_Not_Found:04/10/09 15:26:33 ID:???
>>426

>>391のファイルにヘッダが書いてあった。

430 :Name_Not_Found:04/10/09 15:31:23 ID:6Oe/89uG
>>427
できました!ありがとうございます。
んでもどうしてそうなるか仕組みがわかんない・・・
divにwidthを指定することでこうなるんですか?

431 :Name_Not_Found:04/10/09 15:35:17 ID:???
>>430 
仕様書読んでね。

10.3.7 絶対配置される非置換要素の場合
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/visudet.html#abs-non-replaced-width

432 :Name_Not_Found:04/10/09 15:59:25 ID:???
週末はこのスレに手を出すな

433 :Name_Not_Found:04/10/09 16:03:57 ID:???
>>429
だからa b cとしか書いてないって。


434 :Name_Not_Found:04/10/09 16:40:14 ID:???
>>432
はげどう

435 :Name_Not_Found:04/10/09 19:00:39 ID:???
標準モード、互換モードによる box幅の解釈の違いを
図説で解説してるサイトないですか?

436 :410:04/10/09 19:03:23 ID:???
>>411
ありがとうございます、出来ました。

画像にfloat使うと余白が出来るんですか?

437 :Name_Not_Found:04/10/09 19:30:45 ID:???
>>436
画像にかかわらず、MSIEはフロートすると、できることがある。

438 :Name_Not_Found:04/10/09 19:44:50 ID:???
>>435 >>4にある。
>>436 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html

439 :410:04/10/09 19:45:04 ID:???
>>437
そうでしたか。ありがとうございます。

440 :Name_Not_Found:04/10/09 20:02:30 ID:???
>>410
それよっかさ、正しいHTML書こうぜ。

441 :410:04/10/09 21:23:49 ID:???
すみません。
どこが正しくないのかすらわかりません。

442 :Name_Not_Found:04/10/09 21:47:55 ID:???
>>441

>>411が指摘している通り

443 :Name_Not_Found:04/10/09 22:22:06 ID:n1802CFt
DTD記述なしで試してます。
記述なし、またはTransitionalでURLを省くと大体のブラウザで互換モードになると思うのですが、
Safari1.2.3だと標準モードで表示されてしまいます。
Safariで互換モード表示させる方法って無いのでしょうか?

例えばCSSで
{ width: 200px; padding: 15px; border-style: dotted; border-width: 1px; }
と指定したとすると、Safariだと内容領域での200px表示になってしまいます。
Mac IE5だと互換モード表示のボックスでの200px表示になります。

スレ違いだったらすみません。

444 :Name_Not_Found:04/10/09 22:23:57 ID:???
>>442
嘘教えるな!imgにwidth,height属性は必須でない

445 :Name_Not_Found:04/10/09 22:25:56 ID:LNMBFlay
テキストフィールドの背景色を透明にして透かすことはできますか?

446 :Name_Not_Found:04/10/09 22:48:51 ID:???
>>443 >>106のkhtml用独自拡張プロパティが効くのでは?
>>445 moz-opacityで検索。

447 :443:04/10/09 23:53:13 ID:???
>>446
レスありがとうございました。
過去ログ色々読んでみましたが、全てのブラウザでの表示を考えると
標準モードでDTDして計算しないとダメそうですね。
テーブルと組み合わせてpaddingだけcss制御って手も
Mac IE/Win IE/NN以外のOpera/Safariを考慮すると無理ってことですよね。
実に面倒だ・・


448 :800:04/10/09 23:56:30 ID:???
<h1>に<a>をつけるときに、ほかの<a>とは違うhover visited link activをつけたいのですが
どう記述すればいいですか?外部スタイルシートです。

449 :Name_Not_Found:04/10/09 23:57:58 ID:???
>>447
>標準モードでDTDして計算しないとダメそうですね。
なんか誤解してない? むしろ互換モードの方が統一しやすい。
>Mac IE/Win IE/NN以外のOpera/Safariを考慮すると無理ってことですよね。
Operaはさておき、Safariはbox-sizingが有効なはずでしょ?

450 :Name_Not_Found:04/10/09 23:59:45 ID:???
>>448
質問の前に>>4で基礎を学習しませう。
h1 a:hover {...}など、子孫セレクタがおすすめ。

451 :800:04/10/10 00:04:29 ID:???
とてもありがとう

452 :Name_Not_Found:04/10/10 00:06:47 ID:???
まったくどういたします

453 :Name_Not_Found:04/10/10 00:14:15 ID:???
いえいえこちらこそこそ

454 :443:04/10/10 00:16:38 ID:???
>>449
最初に質問したのがSafariでの表示について書いてしまったんですが、
一応いろんなブラウザで同じように見えるように考えてるんです。

Safariは互換モードで指定しても内容領域でwidthを判定するから
標準モードで指定しないとIEと同じ表示にならないかと。

box-sizingで指定しても今度はIEでは実装してないから
Safariで表示できてもIEじゃ表示出来ないのでは。

結局いまのCSSの現状からすると標準モードでのwidthの値で計算するしかないかと。
間違ってますか?

455 :Name_Not_Found:04/10/10 00:21:45 ID:???
>>454
>box-sizingで指定しても今度はIEでは実装してないから
だから互換モードにしておけばいいわけでしょ。
で、それに合せて>>106みたいにbox-sizing:border-box;と指定する。
safariでも-khtml-box-sizing:border-box;で互換モード同様の解釈になるはずだよ。

456 :443:04/10/10 00:28:22 ID:???
>>455
なるほど!!
互換モードでIEはbox単位でwidth指定をして
Safari用に-khtml-box-sizing:border-boxで指定すればいいんですね。
ありがとうございました!早速試してみます。

457 :Name_Not_Found:04/10/10 00:32:26 ID:???
初めからそれを言ってるのに。>>106見てわからなかったのか……。 >>456

458 :Name_Not_Found:04/10/10 00:36:03 ID:???
>-khtml-box-sizing

これのソース知りたい。少なくともうちのsafariじゃ効かないが。
というか、Webcoreの公開ソースコードでも見た覚えが無い。

459 :Name_Not_Found:04/10/10 00:36:38 ID:???
ちなみにOperaでもver.7からbox-sizingが有効。
但しバグもあるが。
http://cssbug.at.infoseek.co.jp/detail/opera/b080.html
http://cssbug.at.infoseek.co.jp/detail/opera/b040.html
http://cssbug.at.infoseek.co.jp/detail/mozilla/b072.html

460 :Name_Not_Found:04/10/10 00:47:34 ID:???
>>458
Safariでは、box-sizingも、-moz-box-sizingも、無効なの?

461 :458:04/10/10 00:51:18 ID:???
>>460
無効。

あと、KHTMLのソースコードのプロパティ名一覧にも
(-khtml-)box-sizing無かった。
どこの誰があると言ってるの?

462 :443:04/10/10 00:54:22 ID:???
試してみたけどやはりbox-sizing、-moz-box-sizingも無効でした。
やっぱ内容領域でwidthを決めなきゃダメか。

463 :Name_Not_Found:04/10/10 00:55:36 ID:???
-khtml-opacityと-moz-box-sizingとからの類推ぢゃないのかな。>>461
どっちにしろ、Safariは(Doctypeスイッチも含めて)互換性が無いわけだ。

464 :Name_Not_Found:04/10/10 01:04:29 ID:???
ちなみに、標準モードを使うというごくありふれた解決法は?

465 :Name_Not_Found:04/10/10 01:06:26 ID:???
>>464 それ、互換モードしかないIE5.5以前がまだ結構利用者あるから解決にならない。

466 :Name_Not_Found:04/10/10 01:26:27 ID:???
結局"Safariを取って標準モードでDTD宣言する"か
"IEの古いバージョンを取って互換モードでDTD宣言する"
のどちらかになってしまうのだろうか?

467 :Name_Not_Found:04/10/10 01:37:37 ID:???
既出だが、WinIE6でも、XHTMLでXML宣言すると、互換モードになってしまふ。

468 :Name_Not_Found:04/10/10 02:01:40 ID:???
なんとも頭の痛い話…

469 :Name_Not_Found:04/10/10 02:05:04 ID:???
お前ら馬鹿だな
いまどきstrict+cssレイアウトなんて、ヲタクかマニュアル人間だけだぞ。
賢いやつはレイアウト目的のテーブル使用だって、ためらわない。

というかお前らに質問。

たまに
「うちのHTMLはvalidですよ」
とかのバナーみたいな紋張ってるとこあるけど、あれはアホなの?
正直一般人にはどうでもいいことだろ。

一般人には視覚的デザインが重要なのであって、コーディングなどどうでもいい。
それなのにstrictにこだわるのは馬鹿。まあstrictDTD宣言でvalidに。程度が最良かな。


470 :Name_Not_Found:04/10/10 02:14:00 ID:???
あいあい

471 :Name_Not_Found:04/10/10 02:43:30 ID:???
センター問い合わせが、



長引く

472 :Name_Not_Found:04/10/10 02:59:41 ID:???
おい賢とた「と正一そ

473 :Name_Not_Found:04/10/10 09:25:50 ID:iP1tgKhC
クリックすると隠れてるメニュー部分がdisplay:noneからblockになるという
ありふれた折りたたみメニューを使っているのですが、メニューを開くと
下にある文章が下にずりさがってしまいます。
display:relativeにした上でz-indexを、メニュー部に1、下地に0付けてみましたが
どうしてもずりさがってしまいます。下にずれずにメニューが文に重なるように
できないでしょうか?

<p><a href="javascript:void(0)" onclick="openmenu('hoge')">メニュー</a></p>
<div class="hoge" style="display:none;">(メニュー部)</div>
<p class="text">あいうえおあいうえおあいうえお</p>
こんな感じで、div.hogeがp.textの上に重なって欲しいのです。

474 :Name_Not_Found:04/10/10 09:26:26 ID:???
すみません↑position:relativeのtypoでした

475 :Name_Not_Found:04/10/10 12:17:30 ID:???
>>473
まづはdiv.hogeがdisplay:block;の状態でp.textと重なるスタイルを書きなさい。
DHTMLで折り畳むのはそれからだ。


476 :473:04/10/10 13:03:27 ID:???
>>475
すみません、基本を忘れていました。
親のdivをposition:relativeにして
メニュー部をposition:absoluteにする事で
p.textと重なるようにできました。
本当にどうもありがとうございました。

477 :Name_Not_Found:04/10/10 17:20:32 ID:RGgO8MwO
左にナビ、右はoverflow:autoにしてます。
右のボックスに<a id="hoge">と飛び先を書いてます。
左のナビに<a href="#hoge">としてるのですが、これを
クリックしてもOperaでは飛び先に飛んでくれません。
どうしたら直るのかご教授お願いします。?

 ┌────────────┐
 │ ┌─┐ ┌─────┐ │
 │ │  │ │        │ │
 │ │  │ │        │ │
 │ │  │ │        │ │
 │ └─┘ │        │ │
 │       │        │ │
 │       │        │ │
 │       │        │ │
 │       └─────┘ │
 └────────────┘

http://grecks.s54.xrea.com/test/whats-an.html

478 :Name_Not_Found:04/10/10 17:50:58 ID:???
>>477 
多分、直らない。
overflowによる疑似フレームについてのFAQ(>>6)は、見たの?
Mozilla/N7ではマウス・スクロールが効かないし、MacIEのバグもあるし、
止めた方がいい。

479 :477:04/10/10 17:55:12 ID:???
>>478
擬似フレーム自体よく知らなかったので、FAQのサイトを見ながら作りました。
回答ありがとうございました。

480 :Name_Not_Found:04/10/10 18:12:14 ID:???
http://wdt.pekori.jp/
ここのサイト、スタイルシート使わずにフレーム使ってみるみたいにしてますが
どうやってるのでしょうか??自分は以下のようにやりたいのですが可能でしょうか?
┌─────────┐
├┬────────┤
││            │
││            │
││            │
││            │
└┴────────┘

481 :Name_Not_Found:04/10/10 19:15:32 ID:???
全ページの上部に同じメニュー付けてるだけじゃないか?

482 :Name_Not_Found:04/10/10 20:19:12 ID:???
<link rel="stylesheet" ...>ってのがあるが...
あなたの言ってるスタイルシートはstyle要素かstyle属性のことか?


483 :Name_Not_Found:04/10/10 21:37:24 ID:???
FireFox1.0PR使ってみたらoverflow擬似フレームでもホイールスクロールできたよ(゚∀゚)

484 :Name_Not_Found:04/10/10 21:48:00 ID:???
>>480 そこ、font-sizeを固定してるね。お手本としてはよろしくない。

485 :Name_Not_Found:04/10/10 22:57:19 ID:???
--------------------
あいう : あいうえお
かきくけ : かきくけこ
さし : さしすせそたちつてと
--------------------

上記のようなものをtableを使わずに

--------------------
あ い う : あいうえお
かきくけ .: かきくけこ
 さ し  : さしすせそたちつてと
--------------------

左側だけ幅を揃えて表示させたいのですが
何か良い方法があればご教授ください。


486 :Name_Not_Found:04/10/10 23:08:51 ID:???
>>485
FAQのA8は見ましたか。>>7です。
あとは
dt {
width:4.5em;
text-align:justify; text-justify:distribute-all-lines;
}
としますが、justifyによる両端揃が和文にが有効なのはIEだけで、
N7やOperaでは無効です。
http://hp.vector.co.jp/authors/VA022006/css/text.html#text-align

487 :480:04/10/10 23:16:56 ID:???
>>481
上の部分のメニューを貼り付けてるスタイルシートはわかったのですが
下にもメニューみたいなのが出てきてしまいます。
どうすればいいのでしょうか??
それと左側につけたいメニューは、どうすればいいのかわかりません;;

488 :Name_Not_Found:04/10/10 23:22:27 ID:???
>>487
「どうすればいいのかわかりません」では、こちらもどう回答してよいやらわかりません。
いまどんな風にスタイル指定してるのかHTMLともどもソースを出して、
また、真似したソースのどの部分がどう理解できないのか指して下さい。

489 :Name_Not_Found:04/10/10 23:25:11 ID:???
>>480 
overflowによる疑似フレームについてのFAQ(>>6)は、見たの? 

490 :480:04/10/11 01:58:18 ID:???
見たけど理解できませんでした

491 :Name_Not_Found:04/10/11 02:01:13 ID:???
>>490
では、今のあなたの実力では無理ってことです。>>4でお勉強しませう。

492 :Name_Not_Found:04/10/11 02:04:48 ID:???
>>490
あきらめるなよ。すぐに理解できなくてもいいから、とにかくコピペして
値をいろいろいじくってみれ。気楽にやらんと、身につくものもつかんからなぁ。

もうやってるかもしれないけど、参考にしてるさいとのソースなり、リファレンスの
ソースなりをこぴぺして、いろいろ値をいじくっていくしかないよ。

機械と人間関係は壊して覚えていくもんだ。がんがれ

493 :Name_Not_Found:04/10/11 02:21:59 ID:???
本当に理解する気があるなら、どこそこがこれこれで理解できないのですが……、
とここで具體的に質問する筈だ。わかりません、理解できません、だけでは進歩しない。

494 :Name_Not_Found:04/10/11 03:52:18 ID:???
textarea の横幅を安定的に100%に指定する方法はありますか?
ページ更新などでウィンドウからはみ出したりしてしまいます。

今までに試してみた事は
javascript で onLoad で form.textarea.value="" とすると IE6 ではなんとなくうまく行ったような感じ。
だが、 Firefox では textarea が二つ以上存在するページで NG。一つだけなら大丈夫そう。

495 :Name_Not_Found:04/10/11 04:19:52 ID:???
そういう目的にtextareaを使うな。

496 :Name_Not_Found:04/10/11 08:53:43 ID:???
>>492 >機械と人間関係は壊して覚えていくもんだ。がんがれ

 オマイ 良いこというなぁ。 
                 朝礼で使わしてもらうぞ。

497 :480:04/10/11 09:14:27 ID:???
>>490
俺じゃない。


朝からいろいろ試しててなんとかできた。
ひとつだけわからない部分がでてきた。
http://www.fromdfj.net/html/sample/overflowsample05.html
ヘッダーと書いてる部分だけど、いろいろ字などを追加してて
気がつくとサンプルより字が右下にずれてきてしまった・・・
上に余白があるので、上に寄せたいのだがどうすればいい?
margin で指定したほうがいいのかな??

498 :Name_Not_Found:04/10/11 09:47:38 ID:???
何で昨日とそんなに口調が違うの?

499 :Name_Not_Found:04/10/11 10:44:22 ID:???
昨日は睡眠不足でイライラしてたから・・・

500 :Name_Not_Found:04/10/11 12:36:03 ID:???
485です

>>486
ありがとうございます
思い通りの表示にさせることができました。

501 :Name_Not_Found:04/10/11 13:26:31 ID:???
ブログなんですが、横のメニュー(#link)と本体(content)が縦に並んじゃいます。
これを不通のブログのように左側に本体、右側にメニューとしておきたいのですが原因は
なんでしょうか。CSSを既存のテンプレートに変えても起きる現象なので、index.html
側の指定が間違っていることも考えましたが、どの部分に問題があるのかわかりません。
知恵を貸して頂ける方、よろしくお願いします。

502 :Name_Not_Found:04/10/11 13:28:52 ID:???
>>501
ソース

503 :501:04/10/11 13:48:20 ID:???
ちょ…ちょいとソースは…。
配置を考える上で注意しなければ行けない要点などはありますか。

504 :Name_Not_Found:04/10/11 13:58:20 ID:???
>>503
URLは不要だから、HTMLとCSSのソースを摘要して下さい。
回答者はテレパシストではないので。

505 :Name_Not_Found:04/10/11 14:00:38 ID:???
あと、段組のFAQは見たのか。>>6のリンク先だよ。そこに注意点も出てる。

506 :Name_Not_Found:04/10/11 14:03:12 ID:???
>>497
あなたの記述では今の状態がわからないので、現状のソースを出して。

507 :Name_Not_Found:04/10/11 14:08:00 ID:???
なんでそんな態度デカイの?

508 :Name_Not_Found:04/10/11 14:13:28 ID:???
>>1読め。

509 :501:04/10/11 14:27:55 ID:???
>>1
読んできます

510 :Name_Not_Found:04/10/11 14:43:33 ID:???
読んでなかったのかよ!

511 :Name_Not_Found:04/10/11 14:57:45 ID:???
どんなウインドウのサイズでも、横いっぱいに表示したいときは
大きさを100%としたら横いっぱいに表示される。
でも、以下のような感じでメニューをつけたとして、メニューの横幅は100px
┌┬──────┐    残りの横幅は何%にすればいいの??
││         │    100%にしたら横方向に、スクロールされるように
││         │    なる。うちの環境なら90%ぐらいでちょうどだけど
││         │    ウインドウのサイズが違ったらデザインが
││         │    崩れまくり。どうすればいいんだー??
└┴──────┘    誰か(・∀・)イイ!!方法教えて( ゚Д゚)ホスィ

512 :501:04/10/11 15:01:53 ID:???
読みました。
でもブログのスタイルシートをひと月以上他の人のCSSと見比べています。
どのようなことが原因でメニューと本体が上下になってしまうのかがわからないのであります。

513 :Name_Not_Found:04/10/11 15:10:25 ID:???
>>512 だから、ソースを引用してくれないと、こちらもわからないのであります。

514 :Name_Not_Found:04/10/11 15:13:15 ID:???
>>511
このスレッドで既出だし、段組のFAQにも出てる基礎なんだが。
.menu{float:left;width:100px;} と .main{margin-left:100px;} とを組み合せる。

515 :Name_Not_Found:04/10/11 15:24:50 ID:???
頭悪い奴はCCS使うなよ!

516 :Name_Not_Found:04/10/11 15:26:57 ID:???
頭いいやつでもCCSは使わないかとw

517 :Name_Not_Found:04/10/11 15:29:56 ID:???
どうせ>>501は、左右のボックスの幅の合計が100%を超えてしまってるだけだろ。

518 :501:04/10/11 16:07:36 ID:???
>>517
テスト用に他人のCSSや公開されているテンプレにしても同じ現象がおきます。
なのでそのようなことは無いと思うのです。
なんせ検索しても私と似たような状態は無いようで、何が間違っているのかわからんな
状態です。予想されるエラーを教えて頂いただけでも感謝します>>517

519 :501:04/10/11 16:10:44 ID:???
CSSを変えてもエラーが起きるということはMain Indexの指定ミスと予想しますが
見当がつきませんのです。(MT)

 □
 □←メニュー
□□←以下本体
□□
□□

このような並びになってしまいます。

520 :Name_Not_Found:04/10/11 16:13:14 ID:???
>518
Pre要素等で、はみ出ちゃってるとかオチじゃーないよね?

521 :501:04/10/11 17:05:50 ID:???
>>520
もしやと思い、エントリを未公開にしてみましたが、構成は変わらないとです。
Main Indexの<div class="aaa">の</div>の数をもう一回調べてみます。

522 :Name_Not_Found:04/10/11 17:31:03 ID:???
なんでさっさとソースを出さないんだ?
URLとか文章とか特定できない引用をすればいいだろ。

523 :501:04/10/11 18:14:17 ID:???
はい、すみませんでした…。
Body {
margin : 0 15px 5px;
background : #fff;
}
A {
color : #336666;
text-decoration : none;
}
A:link {
color : #6699cc;
text-decoration : none;
}
A:visited {
color : #cccccc;
text-decoration : none;
}
A:active {
color : #669999;
}
A:hover {
color : #33ff33;
}
h1 , h2 , h3 {
margin : 0;
padding : 0;
}
#banner {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #cc9933;
font-size : x-large;

524 :501:04/10/11 18:14:45 ID:???
font-weight : bold;
background : #fff;
padding-left : 0;
}
#content {
z-index : 1;
float : left;
width : 590px;
background : #fff;
margin-top : 0;
margin-right : 10px;
margin-bottom : 20px;
}
.blog {
padding-left : 0;
padding-top : 0;
padding-right : 0;
margin-bottom : 10px;
}
.blogbody {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #666;
font-size : 12px;
font-weight : normal;
background : #fff;
line-height : 140%;
margin-bottom : 5px;
letter-spacing : 0.05em;
border-top : 1px solid #cccccc;
border-left : 1px solid #cccccc;
border-right : 1px solid #cccccc;

525 :501:04/10/11 18:15:06 ID:???
border-bottom : 1px solid #cccccc;
padding : 10px;
}
.title {
font-family : palatino, georgia, verdana, arial, sans-serif;
font-size : 14px;
font-weight : bold;
color : #999;
text-transform : none;
}
.menu {
font-family : palatino, georgia, verdana, arial, sans-serif;
text-align : center;
font-size : 12px;
font-weight : bold;
color : #ccc;
line-height : 150%;
}

526 :501:04/10/11 18:15:32 ID:???

#links {
z-index : 2;
background : #fff;
width : 200px;
color : #ccc;
margin-top : 15px;
margin-left : 600px;
}
.side {
font-family : palatino, georgia, verdana, arial, sans-serif;
color : #999;
font-size : 10px;
font-weight : normal;
background : #fff;
line-height : 140%;
}

以上です。不要そうな部分は削除しました。

527 :Name_Not_Found:04/10/11 18:18:53 ID:???
それを適用するhtmlは?

528 :501:04/10/11 18:24:08 ID:???
<body>
<div id="inbox">
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>
<div id="links">
<div class="sidetitle">
Search
</div>

<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />

<input id="search" name="search" size="17" tabindex="1" value="" />
<input type="submit" value="Search" tabindex="2" accesskey="0" />
</form>
</div>

529 :501:04/10/11 18:24:32 ID:???
<div class="sidetitle">
Calendar
</div>

<div class="side">
<div align="center" class="calendar">
<table width="200" border="0" cellspacing="2"

cellpadding="0" summary="Monthly calendar with links to each day's
posts">
<caption class="calendarhead" ><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Su</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mo</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tu</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">We</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Th</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fr</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sa</span></th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader>
<tr>
</MTCalendarWeekHeader>
<td align="center"><span class="calendar">

<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="Last entry is[<$MTEntryTitle$>]">
<$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>

530 :501:04/10/11 18:25:02 ID:???


<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></span>
</td>
<MTCalendarWeekFooter>
</tr>
</MTCalendarWeekFooter>
</MTCalendar>

</table>
</div>
</div>

<div class="sidetitle">
Archives
</div>

<div class="side">
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>">
<$MTArchiveTitle$></a>
[<$MTArchiveCount$>]</li>
</MTArchiveList>
</div>

<div class="sidetitle">
Categories
</div>

531 :501:04/10/11 18:25:38 ID:???


<div class="side">

<MTCategories>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> </a>[<$MTCategoryCount$>]</li>
</MTCategories>

</div>

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries></li>
</div>

<div class="sidetitle">
Recent Comments
</div>

532 :501:04/10/11 18:26:11 ID:???
<div class="side">
<MTEntries recently_commented_on="15" sort_order="ascend">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="10">
└ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br />
</MTComments>
</MTEntries>
</div>

<div class="sidetitle">
Recent TrackBack
</div>
<div class="side">
<MTPings lastn="15">
<div class="trackback-body">
<a name="<$MTPingID$>"></a>
<span class="trackback-post">
<b>Title:</b> <a href="<$MTPingURL$>" target="new"><$MTPingTitle$></a><br />
<b>From:</b> <$MTPingBlogName$><br />
<b>Date:</b> <$MTPingDate format="%Y.%m.%d"$>
</span>
</div>
</MTPings>
</div>
</div>
<div id="content">
<!--MainMenu-->
<div class="blog">

<MTEntries lastn="5">

533 :501:04/10/11 18:26:49 ID:???
<$MTEntryTrackbackData$>

<MTDateHeader>
<h2 class="date">
<$MTEntryDate format="%x"$>
</h2>
</MTDateHeader>
</MTEntries>
</div>
</div>
<br clear="all" />
</body>
</html>

以上です。よろしくお願いします。

534 :Name_Not_Found:04/10/11 18:39:06 ID:???
>>533
どっかにアップしろよ。何レス使う気だ

535 :Name_Not_Found:04/10/11 19:03:06 ID:???
>>528-533
どこのブログだか知らんが、そんなMTとかわけわからん変数出されても、困る。
必要な箇所だけ、普通のhtmlとして、抄出すればよいだろ。
それすらようやらん程、知識が無いとか?

536 :Name_Not_Found:04/10/11 19:12:46 ID:???
MTってことはMovableTypeとか言うやつかな?
俺もアドバイスできる立場じゃないけど、positionとかいじれば出来るんじゃない?

537 :Name_Not_Found:04/10/11 19:51:37 ID:???
>533
おい、どんな環境で見てるんだ?
そもそも、幅を固定しているようだけど、
それが原因でないの?

538 :501:04/10/11 19:57:40 ID:???
全てのCSSで起こりますので、indexの記述ミスを徹底追及します。
試しにindexのlinkを消したら正常に表示されました。CSSとは関係ない
記述もあり、スレを汚してしまいましたが、正常に表示されるようになったら
原因をお伝えします。
迷惑をかけてしまった方々、すみませんでした。
協力してくれた方々、ありがとうございました。
レスを大量に消費して申し訳ないと反省しております。

539 :Name_Not_Found:04/10/11 20:08:24 ID:???
ソースが長くて、しかも自サイトのURL出すのが嫌ならアップローダを使えばいいじゃないか
http://web2ch.s31.xrea.com:8080/?Uploader


540 :Name_Not_Found:04/10/11 21:51:09 ID:???
ちゃんと見てないけど
idやclassがCSSとHTMLで食い違ってないか?

541 :511:04/10/11 22:25:48 ID:???
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=aaa.txt&refer=Uploader
ちょっとデザイン変えたら横幅の指定する方法が適応されなくなってしまいました。
/* ---- ここ ---- */ って書いてるところはどういう風なのに変えればいいのでしょうか?
何方か再度お助けください。

542 :Name_Not_Found:04/10/12 01:49:32 ID:???
FAQも読みこなせない人たちにどうやって説明したらよいのやら。

543 :Name_Not_Found:04/10/12 05:37:46 ID:???
俺も素人なんで口出すのはどうかと思ったが、
その手のblogは難しいよ。やたらファイル数が多いし。
別なの探した方が早いと思う。もっと言えばblogは止めた方が・・

544 :Name_Not_Found:04/10/12 06:26:22 ID:???
>>541
>>537

545 :Name_Not_Found:04/10/12 16:52:34 ID:???
color:expression('red');とかやるCSS関数(と、呼ぶのかな?)って、
たしかWinIE5以降の独自拡張ですよね?
このexpressionは、MacIE(ver5以降)やWinIE4以前では、無効なのですか。

546 :Name_Not_Found:04/10/12 19:30:01 ID:???
WinIE5以降の独自拡張って自分で書いてるやん

547 :Name_Not_Found:04/10/12 20:29:10 ID:???
macでは無効。ie4は知らん。

548 :Name_Not_Found:04/10/12 20:36:43 ID:???
WinIE4.0〜5.0〜5.5での表示確認は、ここで出来る。
 ieCapture
 http://www.danvine.com/iecapture/

549 :Name_Not_Found:04/10/12 22:10:51 ID:???
>>548
それどれくらい時間かかるの?
5分立っても見れないんだけど。

550 :Name_Not_Found:04/10/12 23:10:37 ID:???
テキストの左右に空白つくル場合marginで指定したんですがどうもうまくいきません。
この場合CSSで他のも定義しないとうまくいかないんでしょうか?
ちなみにyahooのサイトのような両サイドの空白にしたいのですが・・。

551 :Name_Not_Found:04/10/12 23:12:49 ID:???
>>550
どれにmarginを指定したのか謎。


552 :Name_Not_Found:04/10/12 23:15:02 ID:???
>>549
1〜2分で見れた。

553 :550:04/10/12 23:17:02 ID:???
最初にtextつくって頭の方にCSSでmarginのみ定義したんですがなにもかわらなかったので頭をかかえました。


554 :Name_Not_Found:04/10/12 23:18:37 ID:???
>>553
これはもう>>4を読むしか方法が無さそうだ。


555 :Name_Not_Found:04/10/12 23:18:49 ID:???
>>553
>>551

556 :Name_Not_Found:04/10/12 23:40:00 ID:???
IECapture というテも確かにあるが
IE3, IE4, IE5.01, IE5.5 SP2 が単独で動くようにされたものがある。
こっちの方が自分で確認できて何より早くていいよ。
IE6 が入っててもちゃんと動かせる。

Multiple Explorers
http://www.quirksmode.org/browsers/multipleie.html
IE3 なんてまだ使うやついるのかな

557 :Name_Not_Found:04/10/13 00:41:22 ID:???
browsercamはマイナーですか?
登録と制限がきついがIEから何からかなりの量に対応してる。

558 :Name_Not_Found:04/10/13 01:45:06 ID:???
すいません。質問させて下さい。
floatを使い左右を入れ替えて、
ブラウザの見た目の表示とHTMLの記述順を変えるという方法を知りました。
これを何とか上下の順序でもできないかとposition:absoiute;で上下二段を入れ替えてみました。

入れ替える事自体はできたのですが、
ウィンドウの幅が狭くなった時に視覚的に上の要素が流れ込んでしまい
視覚的に下の要素の上に重なってしまいました。

123456789… (上に配置した要素)

ABCDEFGHIJK…(下に配置した要素)

ウィンドウの幅を狭めると

1234
56789…
EFGHIJ…


こんな感じです。

下へとずらした要素の配置位置をどのように指定すれば
ウィンドウを狭めた時にも対応できるレイアウトになるでしょうか?

上に配置した要素には項目一覧がズラッと並んでいるので
構造的には重要であるh1や本文をできるだけ始めに持ってくるようにしたいと考えているのですが…。


559 :Name_Not_Found:04/10/13 01:47:45 ID:???
>>548 >>556
IE6が入ってる環境でMultiple ExplorersのIE5.01/IE5.5をインストールして
サイトを表示させると、IEのバージョン指定コメント(「<!--[if IE 5]>」とか)
を無視する。ので、コメント使ってクロスブラウザ狙ってる人は要注意。

詳細は省くが、メインのIEのバージョンをコメント解釈に使っちゃう模様。
ieCaptureも同じPCに複数のIEを入れてるようなので上記のバグが発生。
スレ違い失礼。

560 :Name_Not_Found:04/10/13 01:55:08 ID:???
>>558
ロクな事にならないからそんなのやめて普通に書け。

561 :Name_Not_Found:04/10/13 01:58:10 ID:???
>>560
しかし>>558みたいなことをやるためにこそCSSがあるような気がするぞ。

>>558
CSSの使い方を知らずにレスしてみる。heightでbox要素の高さを指定したら
ダメなんかね?


562 :Name_Not_Found:04/10/13 02:10:56 ID:???
>>561
絶対指定なのでheight指定しても無意味

563 :Name_Not_Found:04/10/13 02:30:23 ID:???
>>562
無意味を指摘するだけじゃなくて、意味のあることを書いてやれよ。


564 :Name_Not_Found:04/10/13 03:18:26 ID:???
このレスまでが無意味。

565 :Name_Not_Found:04/10/13 03:50:48 ID:???
/* ループここまで */


566 :Name_Not_Found:04/10/13 11:06:53 ID:???
>>558は勉強のためにやってみたのか、
ソースのカッペーを知らなくてやっているのか
 さて、どっちでしょう?

567 :Name_Not_Found:04/10/13 11:53:08 ID:???
かっぺでごめんね。

568 :887:04/10/13 12:38:24 ID:???
560様,561様,562様,他皆様ありがとうございます。

>>560
やっぱり諦めるしかないんですかね…?
最初はa nameで一覧をスキップさせることで
閲覧者に対処してもらおうと思っていたんですが
だらだらと続く一覧がbody直下ってのは
どうなんだろう?と思いまして…。

絶対指定を用いていますが
色々試行錯誤している過程で現在試しに使っているだけなので
特にこだわっている訳ではなく、何か上手い知恵をお貸しいただけたらと…。

<div class=main>ABCDE…</div>
<div class=top>12345…</div>

こんな感じのHTMLのときに
div.mainをdiv.top直下に配置する指定や技があればいいのですが…

>>566
カッペーってなんですか?
かっぺ者なのは確かなのですが。

そうですね、まだシコシコ作っている段階なので
勉強中になります。

>>567
やっぱり判りますか…orz

569 :Name_Not_Found:04/10/13 13:12:15 ID:???
>>568 >勉強中になります。

仕上げるためにやっているなら、
ソースのカット&ペーストで入れ替えれば良いと思って書いたんだよ。

勉強中なら安易な解決を求めるのではなく
自分で苦しめ。解決まで時間がかかるが
その分、得るものが多い。


570 :Name_Not_Found:04/10/13 13:34:52 ID:???
>>569
×カッペ
○コピペ


571 :Name_Not_Found:04/10/13 14:23:25 ID:???
アホ?

572 :Name_Not_Found:04/10/13 18:40:55 ID:???
>>558 position:relative;とかfloat:rightの応用では駄目なのか?

573 :Name_Not_Found:04/10/13 18:54:02 ID:???
>>568
<div class="main">ABCDE…</div>
<div class="top">12345…</div>
.main {height:2em; position:relative;top:2em;}
.top {height:2em; position:relative;top:-2em;}


574 :Name_Not_Found:04/10/13 20:26:41 ID:???
ポップアップをHPに組み込むにはどのあたりに記述すればだいじょうぶなんですか?

575 :Name_Not_Found:04/10/13 20:29:52 ID:???
HEADかBODYのどちらか、ポップアップのスクリプトの記述方法に合ったのを選べば大丈夫。

っつーか、スレ違い。

576 :Name_Not_Found:04/10/13 21:39:27 ID:???
少なくともカッペは初めて見た。
コピペする、で時々カット&ペーストの意味でも使うしなー。

577 :541:04/10/13 22:10:54 ID:???
未だにうまいこといきません。
FAQも一通り読んだつもりなのですが、ちゃんとできません。
どこか見過ごしてるかも知れないので今からもう一度見てきます。

578 :Name_Not_Found:04/10/14 10:57:53 ID:???
>>577
私もCSS習い始めたばかりですが、↓こういうことでしょうか?
的外れな答え?

http://grecks.s54.xrea.com/test/col2.html

579 :Name_Not_Found:04/10/14 11:27:30 ID:???
>577
>544

580 :Name_Not_Found:04/10/14 18:15:22 ID:/CIc4NPR
ブラウザごとにcssを指定することはできますか?
やりたいのは、文字の大きさを「IEではx-small」、「Netscapeではsmall」に
したいのです。

581 :558:04/10/14 18:18:31 ID:???
前回887と書いたのは558です。すみません。
さて、回答ありがとうございます。
とりあえず返信できる分だけ先にさせていただきます。

>>572
いえ、絶対指定にこだわっているわけではないんですが
relativeでは表示が崩れてしまい、absoluteで指定すると崩れなかったので、
現状ではabsoluteで一時停止のアイドリング状態なだけです。
>float:rightの応用
というと、上下ではなく左右で構成しろ、という意味ですよね?
やっぱりソース晒した方がいいのでしょうか、後だしでごめんなさい。
すでに(例でいうと)mainの中でfolat:leftで左右の入れ替えをしているので
スペース的に厳しいと感じているんです。

>>569
コピペで表示が意図通りになるようhtml内での位置を変えるという意味でしょうか?
そういう意味でしたら、まだもうちょっと望ましい順序&望ましい表示位置の両立を目指して
頑張ってみたいんです。

582 :558:04/10/14 18:19:38 ID:???
>勉強中なら安易な解決を求めるのではなく
>自分で苦しめ。解決まで時間がかかるが
>その分、得るものが多い。

おっしゃる通りですね…。
自分なりに調べて試行錯誤してきたつもりですが人様から見れば言い訳ですよね。
ただ、出口があるのかどうかだけは知りた…い…や、何でもないです。
頑張ります。

>> 568
ありがとうございます。
でもheight指定をするということは
小さいウィンドウにした時に折り返される高さを想定して指定しなくてはならないんですよね。
そこが悩み所でして、例では2emで済むので、
折り返しが出ない想定標準サイズのときに見た目もさほど気にならないのですが
実際のhtmlでの高さを指定するとtopとmainの間があまりにも
冗長になってしまい、もう少しなんとかならないだろうか、と苦しんでいます。

572さんに悪かったので今さらながらアップしました。
ttp://web2ch.s31.xrea.com:8080/?Uploader
のlayout_test2.zip というのが件のものです。
現状ではabsoluteで取りあえず指定したところで一時停止状態のものです。
見ていただけたら幸いです。
自分が見やすいようにしている上で色々不必要なものを間引いたので汚いでしょうが…。

583 :Name_Not_Found:04/10/14 18:40:06 ID:???
>>580>>4を読んでないな?
・ブラウザによる振り分け (JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua

584 :580:04/10/14 19:08:30 ID:???
うおっ、こんなところにあったのか。
どうもありがとうございました。

585 :Name_Not_Found:04/10/15 01:41:43 ID:???
質問はテンプレ10回精読してから書けや(゚д゚)

586 :Name_Not_Found:04/10/15 05:48:29 ID:???
>582
見てみた。とりあえずWinIE6だと以下略。

これは俺ならもうHTMLから書き直すね。むしろ
div.head_word_area div{ display:inline; }
程度でお茶を濁しつつフレーム使うかもしらん。
用語集かなんかの匂いがするし。

僕はもうだめだが出口は多分ある。君はがんばれ。超頑張れ。

587 :Name_Not_Found:04/10/15 16:57:14 ID:???
例えばテキストも画像もたくさん入ってる divがあって、
それに padding-left:10pxしてあるとして、
だけど全ての imgだけはそれを適用させたくないって場合、どう対処します?
その img全部に padding-left:0pxってクラスを付けて回りますか?


588 :587:04/10/15 17:00:12 ID:???
あ、ごめんなさい、ブラウザ書かなかったけど、あんまりブラウザや OSを
選ばないような気がしました。一応 WinIE6で。


589 :Name_Not_Found:04/10/15 17:06:34 ID:???
>>587
一つのDIV要素の中に複数のIMG要素が含まれている状態を想像したが違うようだ

590 :Name_Not_Found:04/10/15 17:08:18 ID:???
>>587
仮にその画像もテキストもたくさん入っているdivをclass="section"とすると

div.section {padding-left:10px;}
div.section img {padding-left:0;}

俺ならこうするね。

591 :587:04/10/15 17:22:41 ID:???
速い解答ありがとう。

>>590
私もパッとそれを思いついたのですが、書いてみて、うわ出来ないじゃんと
驚いて質問してみました。そう思いますよねぇ。

>>589
そんな感じです。imgの他に spanも liも objectもいろいろとありますが。


592 :Name_Not_Found:04/10/15 17:25:16 ID:???
>>587
そもそもそんなくくり方が間違いだよ。

593 :Name_Not_Found:04/10/15 17:34:44 ID:???
>>591
なにがしたいのかよく解らん。IMG(インラインレベル)のパディングと、
その親であるDIV(ブロックレベル)のパディングとの間に何の関係が?

594 :Name_Not_Found:04/10/15 17:36:05 ID:???
>>591
img要素にはwinIEの5と6の互換モードでのバグ有り。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b013.html

やりたいことがイマイチわからないから、
これじゃ解決しないかもしれないが。

595 :587=591:04/10/15 17:51:30 ID:???
>>593
いや、関係があるか無いかと言えば、無いです。
というか大きく間違っててゴメン。今気付きました。

ええと、言い直すというか、答えと言うか、>>587で私が実現したかった事は
大元の divに padding-left: 10px;、その中の imgに margin-left: -10px;で
divと imgの左端が揃うって事でした。

>>594
ちょっと違ったけど、情報ありがとう。



596 :Name_Not_Found:04/10/15 17:54:24 ID:???
>>595
ちょっと待て。
インライン要素であるimgではなくて、imgを入れるブロック要素に
marginを指定すべきじゃないのか?


597 :昔の人:04/10/15 17:55:22 ID:???
>>587
593に同感。>>587>>590も何か勘違ひしてますね。
多分こんな風にやりたいのでせう?
div.section {padding-left:10px;}
div.section img {margin-left:-10px; display:block;}

598 :Name_Not_Found:04/10/15 17:59:42 ID:???
昔の人だけに、テンポ遅れだったな。

599 :Name_Not_Found:04/10/15 18:05:56 ID:???
タイピングが遅いんだろ

600 :Name_Not_Found:04/10/15 19:13:33 ID:???
むしろ
div.section * {margin-left:10px;}
div.section img {margin-left:0;}
の方がエレガントな解法ではあるまいか。
>>596の疑問は残るが、マアたぶん<br><img><br>とかやってやがるんだろ。


601 :Name_Not_Found:04/10/15 19:16:32 ID:???
あ、>>600は駄目だ。spanなどインライン要素にもmarginがつくわな。

602 :Name_Not_Found:04/10/15 19:19:58 ID:???
imgはborder0でもヤットケ

603 :Name_Not_Found:04/10/15 19:28:33 ID:???
↑ ハ? ナニ言ってるの。

604 :Name_Not_Found:04/10/15 19:36:32 ID:???
いや、なんとなく言ってみた。

605 :Name_Not_Found:04/10/15 20:45:58 ID:fuNVQPDT
div#head{
background : #a8b888;
width : 230px;
height : 100%;
}
<body>
<div id="head">
text or images
</div>
</body>

ブラウザの画面に対してheightを100%で表示したいのですが
上記の記述の場合、必ず親要素であるbodyに対してもheight100%を
指定しなければならないのでしょうか?

606 :Name_Not_Found:04/10/15 20:55:53 ID:???
>>605
仕様通りの動作
body要素へのheightプロパティ%値指定が無視される(N7.0/M1.4RC2)
http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html

607 :Name_Not_Found:04/10/15 21:53:48 ID:???
>>606
その仕様は、NN7ではbody要素のheight100%が無効になる、という
ことだとおもうのですが
IE6でもbody要素にheigth100%を指定しないと、その子要素が
ブラウザの画面に対してheight100%にならない場合があるので
質問させてもらいました。

608 :Name_Not_Found:04/10/15 22:02:40 ID:???
>>605はブラウザを明記しないで質問したよな?
それにIEについても>>606のリンク先に説明がある。
IEでもMozillaでも意図通りに表示したいなら、必須知識だし。

609 :Name_Not_Found:04/10/15 22:09:33 ID:???
>>607
Doctypeスイッチはどうなってんの? 標準モード?
http://cssbug.at.infoseek.co.jp/detail/mozilla/b061.html
>なお、WinIE6, Mozilla, Opera7ともに互換モードではheightプロパティ
>の%値指定についてCSS2の規定と異なる解釈を行っています。body要素の
>子要素のheightプロパティを%値で指定した場合、親要素のheightプロパティ
>の高さを明示していないときは閲覧領域の高さに対する%値を算出します。

610 :Name_Not_Found:04/10/15 22:10:44 ID:???
>>607
じゃあ、最初からIEだと書け。


611 :558:04/10/15 22:37:25 ID:???
>>586
ありがとうございます。
もしかして、WinIE6だと
absoluteでの指定でもうまく上下
入れ替わっていなかったのでしょうか?

ぶっちゃけ、上に配置した要素が下にかぶるような
ウィンドウ幅なんて特殊な状況(横のタブを広げている時とか)
だと思うのでこのままabsoluteで一段落つけようかなという
考えも別にあったりもしていたのですが…。

>出口は多分ある。君はがんばれ。超頑張れ。
あ、ありがとうございます。
何か泣けてきた…。
頑張って知恵巡らせます。

でも
一体いつになったら公開できるんだろう…。
上下入れ替えのCSSが将来できればいいなぁ。

612 :Name_Not_Found:04/10/15 22:55:29 ID:???
>>611
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=layout_test2.zip&refer=Uploader
を見てみた。
>ぶっちゃけ、上に配置した要素が下にかぶるような
>ウィンドウ幅なんて特殊な状況(横のタブを広げている時とか)

そんなことはない。うちでもかぶった。
誰もがウィンドウを最大化して見てると思ってはいかんよ。
最近はブログなんかでその辺りに配慮の無いスタイルが多くて、困ったもんだ。
 横幅800固定やめろ。ブラウザ最大化するのウザイ。
 http://pc5.2ch.net/test/read.cgi/hp/1031302476/l50

613 :Name_Not_Found:04/10/15 23:42:50 ID:???
>>611
div.head_word_area {...}に
width: 50em;
とでも追加指定しておけば、折り返されなくなるよ。
ウィンドウ幅が50em以下の時は横スクロールが出るけど。
あと、セレクタはいちいち“div.クラス名”とせずとも“.クラス名”でよい。
またセレクタにはアンダースコア(_)を使用しない方が無難。
http://hp.vector.co.jp/authors/VA022006/css/syntax.html
http://www.keynavi.net/ja/bugh/css_ns4.html#_title_3_9

それから、div.middleにfloat:rightをかけてるけれど、
後の方でposition:absolute;も指定してるからfloatは無効になってるぞ。

614 :Name_Not_Found:04/10/16 01:14:48 ID:???
段組なのですが
1{float:;left;}
2{float:;left;}
3{float:;left;}
IE6sp1、オペラ7.23では
ちゃんと123と表示されるのですが、
モジラだと
12
3
となってしまいます
これはモジラ特有のバグなのでしょうか?
・ネスケはこちらの事情で使えず確認できません。すみません。

615 :Name_Not_Found:04/10/16 01:19:39 ID:???
:;

616 :Name_Not_Found:04/10/16 01:21:03 ID:???
訂正
float:;left→float;left

>>615
すいません。

617 :614、616:04/10/16 01:22:09 ID:???
_| ̄|○
float;left→float:left
ほんとすいません

618 :Name_Not_Found:04/10/16 01:27:11 ID:???
>>614 それだけではわからない。HTMLも含めてソース出して。 幅の問題かも。

619 :Name_Not_Found:04/10/16 01:31:56 ID:???
むしろIEとOperaのバグである可能性の方が高い。>>614
こんなのもあるし。
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

620 :614:04/10/16 03:54:36 ID:???
>>614で3列目にもfloat:leftと書いたのですが確認したら実際には抜けていました・・・。
ちゃんと入れたところ、モジラでも正常に表示されました。
>>618-619さんそしてみなさんスレ汚し申し訳ありませんでした。

621 :Name_Not_Found:04/10/16 04:36:27 ID:???
へなへな〜〜

622 :Name_Not_Found:04/10/16 05:01:46 ID:???




↓次ドゾー


623 :Name_Not_Found:04/10/16 05:03:35 ID:???
ぁ あぁー

624 :Name_Not_Found:04/10/16 21:10:04 ID:???
>>621-623
最近多いなこういうクソレス
リアクションなんていちいちかくなよ

625 :Name_Not_Found:04/10/16 21:12:20 ID:???
>>624
それにレスするあんたも同罪

626 :Name_Not_Found:04/10/16 21:13:24 ID:???
オマエモナー

627 :Name_Not_Found:04/10/16 21:48:17 ID:???
すみません、質問なのですが
ttp://www9.plala.or.jp/jabro2nd/html/opmenu.htmlで、
メニューアイコンの上にポイントを置くと文字が流れるのですが、
この文字を二行目だけフォントの大きさを変えたりしたいのです。
スタイルシートのどの部分を変えれば変更できますか?

628 :Name_Not_Found:04/10/16 22:12:29 ID:???
first-line

629 :Name_Not_Found:04/10/16 22:25:40 ID:vvM//L1f
>>628
どうもありがとうございます。あと、もう一つ質問なのですが、
文章ごとに●行目のフォントサイズを設定するにはどうしたらよいのでしょうか?
たとえば、イラストの時の“絵置き場”の部分を大きくしたり、
日記のところの“メインみたいですよ”を縮小したりしたいのですが。

630 :Name_Not_Found:04/10/16 22:42:43 ID:???
>>629
任意の箇所をグルーピングする要素→div,span
それぞれボックス、インラインなので適宜使いわけるように

それでは私はこの辺で

631 :Name_Not_Found:04/10/16 22:47:09 ID:???
>>630親切にどうもありがとうございますー

632 :Name_Not_Found:04/10/17 06:44:15 ID:???
今、メニュー部分を作っているのですが、IE6とFirefox 1.0PRで表示が違っていて困ってます。
ボタンの部分はul・liを使って背景に画像を使用。
疑似クラスを使用してマウスオーバー実現させてます。
XHTML 1.0 Strictですが、IEのバグ対応のため文字コードをUTF-8にしてxml宣言は省略しています。



【Firefox・Opera】

+--------+--------+--------+--------+--------+--------+
| | | | | | |
+--------+--------+--------+--------+--------+--------+

【IE】

+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+--------+
| |
+--------+


横一列に並ばせたいのですが、IEの場合のみ階段状になってしまいます。

633 :Name_Not_Found:04/10/17 06:52:33 ID:3jCUf/tH
崩れた…。
今、メニュー部分を作っているのですが、IE6とFirefox 1.0PRで表示が違っていて困ってます。ボタンの部分はul・liを使って背景に画像を使用。
疑似クラスを使用してマウスオーバー実現させてます。
XHTML 1.0 Strictですが、IEのバグ対応のため文字コードをUTF-8にしてxml宣言は省略しています。

【Firefox・Opera】
┌───┬───┬───┬───┬───┬───┐
│     │    │    │    │    │    │
└───┴───┴───┴───┴───┴───┘
【IE】
┌───┐
│    │
└───┘
    ┌───┐
    │     │
    └───┘
        ┌───┐
        │    │
        └───┘
            ┌───┐
            │    │
            └───┘
                ┌───┐
                │    │
                └───┘
                    ┌───┐
                    │    │
                    └───┘

横一列に並ばせたいのですが、IEの場合のみ階段状になってしまいます。

634 :633:04/10/17 06:53:20 ID:???
<div id="navi">
<ul>
<li class="nav1"><a href="/1.html">menu1</a></li>
<li class="nav2"><a href="/2.html">menu2</a></li>
<li class="nav3"><a href="/3.html">menu3</a></li>
<li class="nav4"><a href="/4.html">menu4</a></li>
<li class="nav5"><a href="/5.html">menu5</a></li>
<li class="nav6"><a href="/6.html">menu6</a></li>
</ul>
</div>

635 :633:04/10/17 06:56:36 ID:???
div#navi { width:704px; height:30px; }
div#navi ul { list-style-type : none; }
div#navi li a { float:left; display:block; height:30px; text-indent:-9999px; }
div#navi li.nav1 a { width:120px; background: transparent url("/img/img_nav1a.jpg") top left no-repeat; }
div#navi li.nav2 a { width:116px; background: transparent url("/img/img_nav2a.jpg") top left no-repeat; }
div#navi li.nav3 a { width:116px; background: transparent url("/img/img_nav3a.jpg") top left no-repeat; }
div#navi li.nav4 a { width:116px; background: transparent url("/img/img_nav4a.jpg") top left no-repeat; }
div#navi li.nav5 a { width:116px; background: transparent url("/img/img_nav5a.jpg") top left no-repeat; }
div#navi li.nav6 a { width:120px; background: transparent url("/img/img_nav6a.jpg") top left no-repeat; }
div#navi li.nav1 a:hover { width:120px; background: transparent url("/img/img_nav1b.jpg") top left no-repeat; }
以下略…。

ずっとこの調子で先に進めず、泣きそうです。
どなたか解決策が解りましたらご指導お願いします。

636 :Name_Not_Found:04/10/17 07:03:59 ID:???
>>633
li{display:inline;}


637 :Name_Not_Found:04/10/17 07:29:15 ID:???
>>635
まづ>>4のバグ辞典スレッドをみること。
 ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0)
 http://cssbug.at.infoseek.co.jp/detail/winie/b071.html
で、なんでa要素に対してfloat:left; display:block; なのさ。
#navi li {float:left;width:120px;}でいいだろ。
横並びにさせるべきはインラインであるa要素でなくブロックレベルであるli要素なんだから。
また、floatかけた要素は自働的にブロックレベルになるからdisplay:block;は無用。
とにかくFAQをよく読んで、基礎から学ぶこと。

638 :Name_Not_Found:04/10/17 07:32:12 ID:???
>>635
>text-indent:-9999px;
は。ナニこれ?


639 :Name_Not_Found:04/10/17 07:34:40 ID:???
>>632
基本を知らないで、小手先の裏技だけを切り貼りするから、そうなるのだ。


640 :633:04/10/17 09:30:27 ID:???
>> 636,637

早朝からありがとうございます。
無事解決しました。

今までテーブルデザインだったので、少しずつCSSデザインに切り替えるために勉強中でした。
まだよく解ってないのでお恥ずかしい限りです。
少しずつ理解出来るよう頑張ってみます。

641 :Name_Not_Found:04/10/17 13:15:14 ID:???
うむ、生暖かく見守っているぞ

642 :Name_Not_Found:04/10/17 14:26:20 ID:???
>638
menu1とかの文字を表示させないで
背景画像に文字を入れてるんだろう
これの問題はブラウザで画像表示させない設定にしてると
何もなくなっちゃうんだが

643 :Name_Not_Found:04/10/17 16:33:11 ID:???
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<STYLE>
<!--
BODY{
width : 100%;
margin : 0px;
overflow : hidden;
padding : 0px;
background-color : #e0fef8;
}
.menu{
width : 100px;
height : 100%;
left : 0px;
top : 0px;
position : absolute;
overflow: auto;
background-color : #ffd2ff;
}
.main{
width : 80%; ←ココ
height : 100%;
top : 0px;
left : 20%;
position : absolute;
overflow: auto;
background-color : #e0fef8;
}
-->
</STYLE>

644 :Name_Not_Found:04/10/17 16:33:46 ID:???
</HEAD>
<BODY>
<DIV class="menu">
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
</DIV>

<DIV class="main">
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
</DIV>
</BODY>
</HTML>


←ココ って書いてるところですがどうすれば横幅いっぱいに表示することができるのでしょうか?

645 :Name_Not_Found:04/10/17 16:42:31 ID:???
>>644
body{
margin:0px;
}
div.menu{
width:100px;
float:left;
}
div.main{
width:100%;
margin-left:100px;
}

でよいかと。

646 :Name_Not_Found:04/10/17 16:42:49 ID:???
複数セレクタについて質問させて下さい。

HTML
<div class="a1"><h1>a</h1>.....</div>
<div class="a2"><h1>a</h1>.....</div>
<div class="a4"><h1>a</h1>.....</div>
<div class="a5"><h1>a</h1>.....</div>
<div class="a6"><h1>a</h1>.....</div>
<div class="a7"><h1>a</h1>.....</div>
<div class="a8"><h1>a</h1>.....</div>
CSS
div.a1 , div.a2 , div.a3 h1{color:red;}
div.a4 , div.a5 , div.a6 h1{color:green;}
div.a7 , div.a8 h1{color:blue;}

と指定したのですが、最初に表示される要素にしか適応されてなく(a1とa4とa8)
それ以降はデフォルトの設定で表示されてしまいます。
全てに表示させたいのですが、どこが設定が間違っているんでしょうか?

クラスの部分はスクリプトで出力させているので、全部同じにするという訳にはならなくて・・。
クラスの数もかなり多いので1個ずつ別に・・・という訳にもいかないんです。

どこのサイトも、コンマで区切れば複数指定できるよ〜程度までしか書いてなくて悩んでます。・゚・(ノД`)・゚・。

647 :Name_Not_Found:04/10/17 16:45:20 ID:???
>>645
<STYLE>
<!--
body{
margin:0px;
}
div.menu{
width:100px;
float:left;
}
div.main{
width:100%;
margin-left:100px;
}
-->
</STYLE>
でいいんでしょうか??
これだと、フレームみたいに全くならないのですが・・・

648 :Name_Not_Found:04/10/17 16:47:57 ID:???
>>646
俺のところでは、お望みのとおりに表示されてます。

649 :Name_Not_Found:04/10/17 16:50:42 ID:???
>>647
俺のところではフレームみたいになってます。

つーか、おまいら他にいらんことしてるんと違うのか?



650 :Name_Not_Found:04/10/17 16:53:22 ID:???
>>647
.mainのwidthが100%だと、margin-left:100pxの分だけ右に100pxスクロールバーが
出るから widthはautoで良いかと思われ。

651 :646:04/10/17 16:59:09 ID:???
>>648
まっさらなhtml css作ってみた所思ってた通りに表示されました。
他にh1で色々指定してたのでそれがいらななかったみたいで・・・。
すいません、ありがとうございました。

652 :Name_Not_Found:04/10/17 17:07:27 ID:???
>>649
main の方がスクロールしないんだけど??

653 :Name_Not_Found:04/10/17 17:12:45 ID:???
>>652
言ってることが意味不明。言葉足らず。
お前さんのやりたいことが、こっちに伝わってない。
相互に認識の違いが発生している。


654 :Name_Not_Found:04/10/17 17:20:11 ID:???
>>653
menu と main の両方をスクロールさせたい。
でも>>649さんのやり方だと、menuはスクロールするが
mainの方がスクロールしない。だからmainにウインドウより縦長になると
下の方に書いてる字がみえなくなってしまう。

655 :Name_Not_Found:04/10/17 17:26:21 ID:???
>>654
絶対指定とかheightの指定とかやめてみ。
>>651みたいな例もある。

656 :646:04/10/17 18:34:47 ID:???
再度再度すいません。
上で解決したかに思ったのですが、やはり意図通りに表示されないみたいです…。

htmlとcssを詳細に書くと

<div class="a01"> <h1>a01</h1> <p>a01-a02</p> </div>
<div class="a02"> <h1>a02</h1> <p>a01-a02</p> </div>
<div class="a03"> <h1>a03</h1> <p>a03-a05</p> </div>
<div class="a04"> <h1>a06</h1> <p>a03-a05</p> </div>
<div class="a05"> <h1>a05</h1> <p>a03-a05</p> </div>

div.a01,div.a02 { background:black; }
div.a01,div.a02 h1 { color:red; }
div.a01,div.a02 h1:first-letter { color:white; }
div.a01,div.a02 p { background:black url(a0102.png) repeat; }
div.a03,div.a04,div.a05 { background:gray; }
div.a03,div.a04,div.a05 h1 { color:green; }
div.a03,div.a04,div.a05 h1:first-letter { color:blue; }
div.a03,div.a04,div.a05 p { color:pink; background:black url(a030405.png) repeat; }

このような感じなのですが、
first-letterが適応される部分とされない場所が出来たり、
first-で指定した色が後ろまで及んでしまったり、pの部分が反映されなかったりと散々になってしまいます…。

記述方法が拙いのでしょうか?
宜しければアドバイスお願いします。

657 :Name_Not_Found:04/10/17 18:44:30 ID:???
気になるんだが

div.a01, div.a02 h1

ってのは、 div.a01そのものと、 div.a02の子孫のh1に適用されるセレクタであって
div.a01の子孫のh1 と div.a02の子孫のh1 に適用されるわけじゃないぞ

後者のようなことをやりたいなら
div.a01 h1, div.a02 h1

658 :Name_Not_Found:04/10/17 18:45:08 ID:???
>>656
classは12345と順番なのにh1は12365と順番じゃないのはなぜ?
素朴な疑問。


659 :Name_Not_Found:04/10/17 18:46:53 ID:???
>>656
コメントとcssを見た限りでは何がやりたいのか伝わってこない。
法則性無いの?


660 :Name_Not_Found:04/10/17 18:54:00 ID:???
>656
指定方法がややこしすぎなんじゃないか
クラスの使い方やスタイルの指定の仕方をもう少し簡潔にするべき
あと確認に使ってるブラウザは何よ?

661 :646:04/10/17 18:57:31 ID:???
>>657
後者のdiv.a01 h1, div.a02 h1で巧くいきました。
まとめて全てに適応されるのかと勘違いしてました…。
ありがとうございます。精進します。

>>658
書き込む際に手書きした為ミスです。・゚・(ノД`)・゚・。

>>659
コメントとCSSはかなり削って、適当にa01 02,,と書いてます。
法則は1 2 3,,,,11 12と順番にカレンダーどおりになるようにしていました。が、658さんのレスの通り書くときにミスりました・・・。
これでカレンダーのスクリプトの表示部が出来そうです。

662 :Name_Not_Found:04/10/17 18:58:20 ID:???
>>656
もしかして、こうやりたいんじゃないのか?
CSSの記述そのものを間違えてる気がする。

.a01,.a02 { background:#000; }
.a01 h1,.a02 h1 { color:#f00; }
.a01 h1:first-letter,.a02 h1:first-letter { color:#fff; }
.a01 p,.a02 p { background:#000 url(a0102.png) repeat; }
.a03,.a04,.a05 { background:#999; }
.a03 h1,.a04 h1,.a05 h1 { color:#0f0; }
.a03 h1:first-letter,.a04 h1:first-letter,.a05 h1:first-letter { color:#00f; }
.a03 p,.a04 p,.a05 p { color:#f99; background:black url(a030405.png) repeat; }




663 :Name_Not_Found:04/10/17 19:06:52 ID:???
>>661
ちょっと待て。
カレンダーなら表じゃないのか?
表のセルに背景色と文字色を指定して、数字だけをscriptで流し込むような。
h1とかpは全く使わないぞ。レス付ける上での便宜上のものかもしれんが。


664 :Name_Not_Found:04/10/17 19:53:08 ID:???
div{
width:200px;
height:200px;
border:solid #ccc 1px;
}

この中にp要素を入れる。
「愛ウ愛うあいうあいうあいうあいうあいう言うあいうあいうあいうあいういうあいう」
この文字列をdivの底辺あわせで入れることは無理でしょうか?

文字の大きさが変わっても底辺があっていて、上辺がわの変動というのが理想です。

665 :Name_Not_Found:04/10/17 19:56:27 ID:???
padding-top 値は%で調整

666 :664:04/10/17 20:30:54 ID:???
>>665
padding-top:auto;
padding-bottom:0;
とかでしょうか?全然機能しません。
winXP
ie6
の最新環境でダメなようです。

667 :Name_Not_Found:04/10/17 20:34:05 ID:???
div{position:relative}
p{position:absolute;bottom:0;}
辺りで出来ないかね?
や、試して無いからわからんが。

668 :Name_Not_Found:04/10/17 20:36:33 ID:???
>>666
>>665

669 :Name_Not_Found:04/10/17 20:48:53 ID:???
>666はどこで仕入れてきたのだろう?
padding-top:auto;padding-bottom:0;


670 :664:04/10/17 21:21:38 ID:???
>>667
文字列は複数行になる時もあるのでダメです。
>>668
%では無理です。文字列は複数行に渡り、topからのpaddingは文字の大きさによって左右されるべき
ことなので、%では無理です。何も言わずいきなりautoやってすみません。

何か方法はありませんか?

671 :Name_Not_Found:04/10/17 21:30:28 ID:???
やってみてから書いてんだよな?

672 :664:04/10/17 21:31:14 ID:???
>>671
そうです。

673 :Name_Not_Found:04/10/17 21:36:58 ID:???
複数行でテストしても、ちゃんとなるけど・・・
>672 ほかにおかしな設定してんじゃないの?
新ファイルで書いて余分な設定無しでやってごらんよ。

674 :Name_Not_Found:04/10/17 21:40:01 ID:???
%がダメ?だというならemでやれば済む話じゃないか?

  >664少しは調べろよな。

675 :664:04/10/17 22:02:20 ID:???
<div>
<p>あいあいあいあいあいあいあいあいあいああ試合ファイdgはd;じゃbんlがjg;ぁjbgぁjgb</p>
</div>

div{
width:200px;
height:200px;
border:1px solid #ccc;
}
p{
padding-top:30%;
}

でやってみました。全然ダメでした。
>topからのpaddingは文字の大きさによって左右されるべき
>ことなので、%では無理です。
この意味を理解されてないような気がします。
ユーザが文字サイズを変更した時にpadding-topは縮小しないとだめなのです。
逆は逆で。

そもそも
padding-top:hoge%
などで何をするつもりですか?




676 :Name_Not_Found:04/10/17 22:20:10 ID:???
理解されて無いのは、わかるように説明してないからだ。

複数行の場合ってのは、1行目の底辺を底辺を合わせたいのか、
最終行の底辺を合わせたいのか?

あとpaddingにautoなんて値は無いので効くわけ無い。

677 :Name_Not_Found:04/10/17 22:25:13 ID:???
WinME + IE6.0 だが、試してみた限りでは >>667で希望通りだと思うんだが?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>てすと</title>
<style type="text/css">
<!--
div{
position:relative;
width:200px;
height:200px;
border:1px solid #ccc;
}
p{
position:absolute;
bottom:0;
margin:0; padding:0; /* ああ、この観点が>>664には抜けてるのかな( ´,_ゝ`) */
}
//-->
</style>
</head>
<body>
<h1>てすと</h1>

<div>
<p>あいあいあいあいあいあいあいあいあいああ試合ファイdgはd;じゃbんlがjg;ぁjbgぁjgb</p>
</div>
</body>
</html>


678 :664:04/10/17 22:36:25 ID:???
>>667
bottomなんてプロパティ初めて使いました。
いつもtopとleftしかやってませんでしたので。

NN7でも試してokだったのでモジでもいいぽいです。
さすがにすごいですね。ありがとうごさいました。


679 :Name_Not_Found:04/10/17 22:37:58 ID:BRYnSb4/
<p>あいうえお</p>
このHTMLをいじらずにCSSだけで文字の大きさを左から順に小さくするようなことはできますでしょうか?


680 :Name_Not_Found:04/10/17 22:38:30 ID:BRYnSb4/
おっと改行ですv^^

681 :Name_Not_Found:04/10/17 22:44:28 ID:???
OS:Windows XP (Service Pack 2)
ブラウザ:Netscape 7.1
質問させて頂きます。
サイトを製作中ですが、CSS入れても自分で確認できないなら、CSS入れない方がいいでしょうか…?
できれば入れた方がいいのだろうけど、確認できないとミスもわからないし…。
因みに、ネスケのコンポーサー(たぶん)である程度作って、手直しやらCSSを入れようと思ってたんですがね。

質問が初心者スレ向きかと思いましたが、CSSはこちらの方が良いと思ったのでこちらで。

682 :Name_Not_Found:04/10/17 22:47:14 ID:CptRODb9
丸角テーブル作ったのですが、Geckoではうまく表示してくれません。
アドバイスお願いします。

http://grecks.s54.xrea.com/test/table/maru-table.html

683 :Name_Not_Found:04/10/17 22:50:41 ID:???
>679
無理

>680
は?

>681
( ・ω・) HPの動作・表示環境確認スッドレ
http://pc5.2ch.net/test/read.cgi/hp/1089046899/

>682
素直にテーブル使えよ

684 :Name_Not_Found:04/10/17 22:54:26 ID:???
>>683
きも

685 :Name_Not_Found:04/10/17 23:10:34 ID:???
>>682
.topと.bottomにoverflow:hidden;つけてみて。
ただ、今のソースに合わせたその場しのぎの対策方法だから、
また違った場合ではうまくいかない可能性が高いよ。

686 :682:04/10/17 23:19:52 ID:???
>>685
あっ、できた。
サンクス。

やっぱりテーブルにしといた方がいいのかな〜。。。

687 :Name_Not_Found:04/10/17 23:28:36 ID:???
>>682
.top と .bottom に border か padding をいれると
消えてた線(背景画像)が出るようにはなるけどなあ。

.bottom のほうは border-bottom:1px solid #fff; とでもやればうまくいく(ように見える)んだが、
.top のほうが、左右の辺とうまく繋げられる方法が思いつかん。

688 :Name_Not_Found:04/10/17 23:28:49 ID:???
>>686
やり方が下手なんだよね。
ブロックを三つに分けて縦に並べる。
画像は上部、中央、下部の三点にする。
んで、横幅をそろえて上下の隙間をなくせば丸角テーブル風になるよ。

689 :682:04/10/17 23:48:54 ID:???
>>687
>>685さんのもそうだけど、他のタグの入れればいいってことなのかな〜

>>688
すんません、やり方が分からないっす。

690 :682:04/10/17 23:55:15 ID:???
タグじゃなくて属性でした。

691 :Name_Not_Found:04/10/17 23:57:49 ID:???
>>683
dクス。
答えて貰っといて悪いのだが、理由があって2ちゃんには晒せないんだ…
ログとしても残るし。
スマソ。

やっぱCSS入れない方がいいのかな…。

692 :681:04/10/17 23:58:50 ID:???
スマソ、681=691です

693 :Name_Not_Found:04/10/18 00:11:20 ID:???
これは?画像にして晒すことにはなるが(w
http://www.danvine.com/iecapture/

やらないほうが良いのかな
みたいなレス要らんから。
じゃ、やるなよ。って答えたくなる。やる気が感じられない。

そんなの書く前に、どんな環境で確認したいのかとか書けば?

694 :679:04/10/18 00:17:22 ID:???
できないんですね。CSSショボ・・・・

695 :Name_Not_Found:04/10/18 00:21:37 ID:???
>>693
禿同

>>694
マジレス
画像にすれ

696 :681:04/10/18 01:03:46 ID:???
>>693
ホントにスマソ。
確認してログ流せば平気…だろうか。
見たところ過去ログなさそうだし。

一応確認したい環境は
IE5.0〜6.0(Service Pack 1)+Windows 98,2000,Me,XP/mac
本当に極端なことを言えば、一番多いであろうWin+IEでの確認がしたい。
しかし、マックを使っている人ってどのくらいの割合なのだろうか。

697 :Name_Not_Found:04/10/18 07:14:14 ID:???
>>696
5.7%だってさ。
http://japan.cnet.com/column/trend/story/0,2000051181,20070264,00.htm

698 :Name_Not_Found:04/10/18 08:35:21 ID:???
質問です。
<div class="left">left</div>
<div class="right">right</div>
div.left{
float : left;
width : 20%;
margin-left : 10%;}
div.right{
width : 55%;
margin-left :35%;}
ネットスケープでは
 余白 left  余白 right 余白
│10%│20%│5%│ 55%│10%│

と、思った通りの形になるのですが
なんでかIEでは
 余白 left  余白 right 余白
│20%?│20%│1%?│ 30%│10%│

と、妙な形になってしまいます。
ネットスケープでもIEでも同じ形にしたいのですが
なにか上手い方法はないでしょうか?

699 :Name_Not_Found:04/10/18 08:35:49 ID:3wveolSh
age忘れました

700 :Name_Not_Found:04/10/18 09:11:13 ID:???
>>698
IE6の後方互換モードでのボックスのwidthの算出方法を勉強してみれ

701 :Name_Not_Found:04/10/18 11:04:12 ID:SM57FLs2
URLなどを表示したとき、文字列が長いとwidthを指定してもIE6だと
自動折り返しされずに表示されてしまうのですがなにか良い案はないでしょうか?
overflow:auto;以外で。
Operaだと自動で折り返されていました。

702 :682:04/10/18 11:22:44 ID:???
直線はボーダーラインを使えばいいという単純な発想に気付き、↓修正しました。

http://grecks.s54.xrea.com/test/table/maru-table-touka.html

703 :Name_Not_Found:04/10/18 13:18:25 ID:0eln5x7D
a:hover {background:#6F6F6F;color:#FFF; padding:1px 0; }

のようにしてあります。文字列のリンクの時はいいのですが、画像でリンク
してある時はマウスが画像の上にのっても枠を出さないように試行錯誤している
のですがどうしてもうまくいかないので教えてください。

いろいろ調べたりやってみて、
a:hover img {margin 1px; border: 0px; background:#FFFFFF;}
とやればいい気がしているのですがこれでもやはりマウスを画像の
上にもっていくと枠が表示されてしまいます。(背景は #FFFFFF なので
上記のように background を指定してみました)

しょぼい内容ですみませんがよろしくお願いします。

704 :Name_Not_Found:04/10/18 13:33:33 ID:???
>1嫁で済ませられる気もするが・・・
a:hover img {margin 1px; border: 0px; background:#FFFFFF;} は全くもって出鱈目な記載なので消すとして
<img>を含む<a>にクラス振ってpadding:0;で終わり

705 :Name_Not_Found:04/10/18 13:39:44 ID:???
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}
a:link img, a:visited img, a:hover img{border:none;}


706 :Name_Not_Found:04/10/18 13:41:36 ID:???
>7
>7
>7
>7
>7

707 :703:04/10/18 16:15:35 ID:???
>> 704
ありがとうございました。できました。

>>705 >> 706
a:link img, a:visited img, a:hover img{border:none;}
では消えてくれませんでした…。

なぜかわかりませんが、704 の方法で解決できたからこの方法でいきます。
ありがとうございました。



708 :Name_Not_Found:04/10/18 17:57:28 ID:???
>>707
消えないわけないんだがな。
消えないということは、ここに晒してる以外にいらんことやってるってことだ。
論理的思考ができずに、裏技みたいなテクを切り貼りしてやり繰りするのは
いくらCSSを使っていても、やってることは物理タグ厨と大差ない。


709 :Name_Not_Found:04/10/18 17:58:08 ID:???
>>707
俺は消えた。あんたが間違ってる。


710 :Name_Not_Found:04/10/18 19:49:37 ID:???
今までテーブルでデザインしてきて、CSSに変えようと思っているのですが
CSSの何を利用してレイアウトするかわかりません。
どんなタグを利用してレイアウトするのでしょうか?
一通り紹介されてるHPを見たのですが、レイアウトに使うタグがわかりません。
参考になるHPのURLも教えてくれたらうれしいです。

711 :Name_Not_Found:04/10/18 19:52:59 ID:???
>>710
その前にHTMLを勉強することをオススメします。

712 :Name_Not_Found:04/10/18 20:19:26 ID:???
CSSにはタグなど有りません。

1に勉強2に勉強。3.4が無くて5にパクリ

713 :Name_Not_Found:04/10/18 20:31:12 ID:???
>712
アホか

714 :707:04/10/18 20:35:43 ID:???
いろいろすみません。707です。
やっぱり消えません。何がいけないのかわかりません。
大変申しわけないのですが、
css と html を貼るので何が間違っているか見て頂けませんか?

[test.css の中身は下記で全てです]
a:hover {
background:#6F6F6F;
text-decoration:none;
color:#FFF;
padding:1px 0; }

a:link img, a:visited img, a:hover img{border:none;}

[html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="./test.css" />
</head>
<body>
<a href="../"><img src="/img/test.gif"></a>
</body>
</html>

画像の上にマウスを持っていくと画像の上下にグレーの枠が表示されて
しまうのですが…。

715 :Name_Not_Found:04/10/18 20:49:39 ID:???
padding:1px

716 :Name_Not_Found:04/10/18 20:50:49 ID:???
>>714
それは枠ではなくて、aの背景色では?
透過GIFでためしてみ。

717 :Name_Not_Found:04/10/18 23:24:36 ID:???
>>714
もしかして画像が透過gifなんじゃない?
画像の上下のグレーの枠は、borderやtext-decorationで表示されているんじゃなくて
background#6f6f6fの色だと思われ。


718 :教えて下さい。:04/10/19 07:32:04 ID:???
<p>以外のcssが適用されません。何故なんでしょうか?

-----cssファイル------
body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;
}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
--------------

次にhtmlを書きます。

719 :教えて下さい。:04/10/19 07:33:02 ID:???
----htmlファイル-----

<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>
<!--<span id="top">0913追記。</span>-->
</div>

<div class="owaku"><span class="tw"><span class="t">
■潜在意識?
</span><div class="hi">
20041009
</div></span><div class="h">
本文<BR>
</div></div>

<div id="center">
<p><a href="zakkiindexmenu.html">雑記目次へ</a></p>
</div>

</body>
</html>
---------

よろしくお願いします。

720 :教えて下さい。:04/10/19 07:39:18 ID:???
書き込み切れなかったので、環境等を書きます。

私が見ているのは、macOS9、IE5.5で、これだと正常に表示されます。
が、ネットカフェで見た時には、<p>以外のCSSが、全く適用されていませんでした。
タグは手打ちで作成しています。


721 :Name_Not_Found:04/10/19 08:07:38 ID:???
そもそも見る限りPにCSSが指定されて無いのだが

722 :教えて下さい。:04/10/19 08:23:05 ID:???
あっ、ごめんなさい。ここ以外のファイルで、P指定があるのです。
その<p>指定のあるCSSは、このhtmlじゃないので書きませんでした…

723 :Name_Not_Found:04/10/19 08:43:54 ID:???
なんか絵に描いたようなdiv厨span厨だなあ。
突っ込みどころはいろいろあるが、とりあえず、

<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen.print">
  ↓
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">

かと。
>>722の言ってる内容がよくわからん。結局>>718以外のスタイルシートを>>719
適用しているんだかしてないんだか。情報の小出しは困りますが?

724 :教えて下さい。:04/10/19 09:05:57 ID:???
すいません、情報の小出しではないのです。
>>721に指摘され、気付いたのです。

公表した『zakkimenu.html』に適用される『zakki.css1』にはp{}がなく、
公表していない『a.html』に適用される『a.css1』には、p{}が記述されていた。
両方うpしてあるのですが、ネットカフェから見た所、そのp{}だけしか
適用されてなかったので、よく考えずに、『zakki』の方を公表してしまった
のでした。

とりあえずコンマ直してきます

725 :Name_Not_Found:04/10/19 09:50:49 ID:???
何言ってるかわかんねぇよ

726 :Name_Not_Found:04/10/19 12:27:31 ID:???
>>720
>私が見ているのは、macOS9、IE5.5で、
そもそもMacIEのヴァージョンは5.2位までで、5.5まで行ってないはずだけど?

727 :Name_Not_Found:04/10/19 12:29:13 ID:2btUWTuC
通常のリンクでは hover させて、画像のリンクの場合は hover させたくない
場合の CSS はどのように記述すればよいのでしょうか?


728 :Name_Not_Found:04/10/19 12:36:23 ID:???
>>727
「hover させて」とは「hover すると変化させて」の意味ですか?
基礎なので>>4を読めばわかるはずですが、読んでないのかな。
画像(img要素)を括るa要素にclassを附し、
a.class名:hover {...} と、
a:hoverへのスタイル指定を打ち消すスタイルを適宜指定する。

729 :Name_Not_Found:04/10/19 15:40:40 ID:bUrDR4z3
>>724
問題となるページを出して質問しろよ
お前だって何でもないソースを出して困ってますって言われても答えるのに困るだろ?

730 :教えて下さい。:04/10/19 15:48:35 ID:???
たびたびすみません(´・ω・`)
自分でも訳わからんので、改めて整理して聞き直します。

作成環境はメモに手書きです。
mac OS9 IE5.1で見ると、ちゃんとcssが適用されているのですが、
ネットカフェ等に行き、windowsのIEで見ると、<p>以外のcssが、全く適用されていないのです。
以下にhtmlファイルと、読み込むcssを記述します。

731 :教えて下さい。--htmlファイルです:04/10/19 15:49:23 ID:???
<html>
<head>
<title>雑記</title>
<link rel="stylesheet" type="text/css" href="zakki1.css" media="screen,print">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">

</head>
<body>
<div id="center">
∞雑記∞<br>
<span id="sub">取り留めもない事をつらつらと。</span><br>
<!--<span id="top">0913追記。</span>-->
</div>

<div class="owaku"><span class="tw"><span class="t">
■タイトル
</span><div class="hi">
20041009
</div></span><div class="h">
本文本文<BR>
本文本文<BR>
</div></div>

<div id="center">
<p><a href="kakoindexmenu.html">過去目次へ</a></p>
</div>
</body>
</html>


732 :教えて下さい。--cssファイルです:04/10/19 15:51:54 ID:???

body{font-size:small;color:#454545;background-color:transparent;
background-image:url("http://********.gif") no-repeat bottom right;
background-attachment:fixed;}

a:link{color:#FA8072;text-decoration:none;}
a:visited{color:#B0C4DE;text-decoration:none;}
a:hover{color:#CD5C5C;}
a:active{color:#BDB76B;}

#center{text-align:center}
div.center{text-align:center}
#sub{color:#336699;font-size:x-small;}

.owaku{width:80%;margin-left:auto;margin-right:auto;margin-top:50;}
.tw{width:98%;border:1px dotted #808080;}
.t{color:#345a76;font-weight:bold;float: left;}
.h{margin:5 0 0 10;line-height:150%;}/*hoverカラー*/
div.hi { color:#a9a9a9;font-size:xx-small;float: right; }
p{text-align:center;color:#000000;}

-----------

以上です。どうか御指導よろしく お願いいたします。

733 :Name_Not_Found:04/10/19 16:07:57 ID:???
適用されていますが何か?

734 :Name_Not_Found:04/10/19 16:36:46 ID:???
つーかネットカフェで使っているIEのバージョンはなんなんだよ?
ほんと小出しちゃんだな

735 :教えて下さい。:04/10/19 16:52:51 ID:???
>>733
うそっ
ちゃんとタイトルに枠とかついてますか!?

>>734
知らんのです。なので書きませんでした。

736 :Name_Not_Found:04/10/19 17:33:30 ID:???
Win版IEのバージョンの確認方法も知らないのに他人を嘘つき呼ばわりか

737 :Name_Not_Found:04/10/19 17:39:17 ID:RQSvQubf
CSSでレイアウトする場合 position と float どちらを
利用した方が良いでしょうか?
その理由も教えてくれたら嬉しいです

738 :Name_Not_Found:04/10/19 18:01:02 ID:???
CSSの段組みレイアウトで質問です。

#navと#contentを左右に並べたレイアウトを作ってるんですが、
どちらかの天地に併せてもう一方も同じだけの天地にさせるには
どの様に組めば良いのでしょうか。

バックグラウンドの色を左右で変えているのですが、
#nav側の内容量に対して#content側の内容が多い場合、下図の様に
なってしまいます。
┌┬───┐
││   │
└┤   │
 │   │
 └───┘
これを左右均等に
┌┬───┐
││   │
││   │
││   │
└┴───┘
としたいのですが…。


739 :Name_Not_Found:04/10/19 18:01:07 ID:???
>737
Position Float
それぞれどんな動きをするか理解しての発言か?

740 :Name_Not_Found:04/10/19 18:57:14 ID:???
>>737
適材適所

741 :Name_Not_Found:04/10/19 18:59:53 ID:???
>>739
お前も理解してるのか問い詰めたい

742 :Name_Not_Found:04/10/19 19:03:21 ID:???
>>738
背景を画像化するのが簡単、と教えられた。

ttp://www.stopdesign.com/
あとここ。

743 :Name_Not_Found:04/10/19 20:55:33 ID:???
>>738
ソース出してね。
画像なんか使用せんでも、#navと#contentの親要素(bodyとか)の背景色を
うまく透かして見た目#navが#contentと同じ高さになる風に仕組めばいい。
body {background-color:yellow;}
#nav {background-color:transparent; float:left;width:10em;}
#content {backgtound-color:red; margin-left:10em;}

744 :Name_Not_Found:04/10/19 20:57:35 ID:???
>>731
なんでid="center"が二つもあるんだよっ。classとidの差がわかってないだろ。
基礎からやり直しなさい。

745 :Name_Not_Found:04/10/19 21:02:34 ID:???
>>732
>margin-top:50
単位を省略してはいけない。
>.t{color:#345a76;font-weight:bold;float: left;}
floatさせる要素にはwidth指定が必須。

WinIEの表示確認はここで出来る。
 http://www.danvine.com/iecapture/

746 :長文スマソ:04/10/20 00:31:23 ID:???
<html>
<head>
<style type="text/css">
body{background-color:#cccccc;}
#parent {width:600px;background-color:#cc0000;border:1px solid #666666;}
#c1 {background-color:#00cc00;width:400px;float:left;}
#c2 {background-color:#0000cc;width:200px;float:right;}
</style>
</head>
<body bgcolor="#ff0000">
<div id="parent">
<div id="c1">bbb<br>bbb<br>bbb<br>bbb</div>
<div id="c2">ccc<br>ccc</div>
</div>
</body>
</html>

これをIE6で見るとc1とc2はparentの中に入るんですが、firefox1.0だとc1とc2がparentの外に出てしまいます。
firefoxでfloatを用いてIE6のように見せるためにはどうしたらよいのでしょうか?

747 :Name_Not_Found:04/10/20 00:58:27 ID:???
>>746
そのCSSを見る限り、FireFoxが正しくて、IEが間違った表示をしているように
思える。つまるところ、何がしたいわけ?

幅600ピクセルの枠内に2ペインで400ピクセルと200ピクセルの枠を並べたいの?


748 :Name_Not_Found:04/10/20 01:01:38 ID:???
>>746 FAQを見てないね? たぶんA4(>>6)に解決法があるよ。

749 :746:04/10/20 01:04:16 ID:???
>>747>>748
ありがとうございます。firefoxの解釈が正しいんですね
すみません>>6逝ってきます

750 :Name_Not_Found:04/10/20 03:44:10 ID:???
質問したいのですが
■あいうえお■
■→青
あいうえお→赤

CSS 
.c1 {color:#0000ff}
.c2 {color:#ff0000}

html
<p class="c1">■</p><p class="c2">あいうえお</p><p class="c1">■</p>

だと改行されてずれてしまいます。
このような場合はどのようにすればよいのでしょうか?
よろしくお願いします。

751 :Name_Not_Found:04/10/20 03:47:06 ID:???
<p class="c1">■<span class="c2">あいうえお</span>■</p>


752 :750:04/10/20 04:02:20 ID:???
>751
できました。
ありがとうございました。


753 :Name_Not_Found:04/10/20 04:04:37 ID:???
うむ

754 :Name_Not_Found:04/10/20 07:13:13 ID:???
素直に<FONT>〜</FONT>使った方がいいよ。
地の文自体がCSSを使うようなHTMLになってない。(■とか)

755 :754:04/10/20 07:18:46 ID:???
×HTMLに
○体裁に

756 :Name_Not_Found:04/10/20 07:46:25 ID:???
>754は、例えというものを知らないらしい。

757 :Name_Not_Found:04/10/20 07:50:53 ID:???
くだらん例えを教えんな。


758 :Name_Not_Found:04/10/20 07:54:22 ID:???
「CSSを使うような地の文」

   説明してもらおうか?

759 :Name_Not_Found:04/10/20 08:00:13 ID:???
どんな例えをしたのか説明してもらおうか?

760 :Name_Not_Found:04/10/20 08:01:42 ID:???
おまえ面白い香具師だな。

761 :Name_Not_Found:04/10/20 08:06:49 ID:???
くだらん言葉遊びでスレ埋めるな。
次の質問ドゾー↓


762 :Name_Not_Found:04/10/20 08:10:23 ID:???

 ふんにゃか ふんにゃか

763 :Name_Not_Found:04/10/20 09:15:04 ID:???
ソースと環境と質問内容を書いてくれないと答えられません

764 :Name_Not_Found:04/10/20 09:53:29 ID:T9V7lHsv
うんちっちいいいい

765 :教えて下さい。:04/10/20 09:57:06 ID:???
>>744,745
基礎…わかってるつもりだったのですが、とんだ勘違いのようですね。
やっぱり本だけじゃダメか_| ̄|○
それから、確認できるURLありがとうございました。
負荷大杉?で確認できなかったので、今度また試してみます。

勉強しに逝ってきます。ちゃんと答えてもらえるようにがんばります(`・ω・´)

766 :Name_Not_Found:04/10/20 11:12:47 ID:???
CSSは何を使ってレイアウトするんだ…
一応HPとか過去スレを呼んだけどposition,floatしか分からんかった.
やっぱページのレイアウトはposition,floatしかないの?

767 :Name_Not_Found:04/10/20 11:19:42 ID:???
>766
何が言いたいんだ?
レイアウトの意味が分からんのか?

768 :Name_Not_Found:04/10/20 11:26:10 ID:???
HTMLはCSSを使ってレイアウトするんです

769 :Name_Not_Found:04/10/20 12:07:24 ID:???
簡単に言うと CCSでページをレイアウトする場合
どのタグを使うか聞いてるんだろ?

まあ俺はテーブルレイアウト派だがな

770 :Name_Not_Found:04/10/20 12:15:50 ID:???
absoluteとかrelativeを使うレイアウトは?
と聞いているのでは?

771 :Name_Not_Found:04/10/20 12:21:53 ID:???
>>766 は初心者スレあたりで、
「CSSはどのタグをつかってレイアウトするんだ…」と書いて
邪険に扱われてここにきた模様。優しくしてあげてください。

で、>>766
css を使う場合、おそらく >>766 が今まで覚えてきたhtmlの使い方
があまり役に立たなくなるから、今一度カンザキあたりで、
htmlについて学んでみることをオススメしたい。

772 :Name_Not_Found:04/10/20 14:04:04 ID:???
カンザキとか初めて聞いた

773 :Name_Not_Found:04/10/20 14:53:08 ID:???
>>772
>>4の一番上のサイト。
神崎と内田を知らずにして質問するなかれ。


774 :Name_Not_Found:04/10/20 18:10:54 ID:???
>>742,743
ありがとうございます。返事が遅くなってすみません。

>>743さんの方法でなんとか形になりました。
あとソースを出さなくてごめんなさい。
基本的な事はWEBや書籍で勉強しているのですが、
実践でどの様にして行けば良いのか勉強の為、
DWMX2004の雛形にある「右ナビゲーション2列横…」をベースに
色々変更しながらやってます。

>>742さんから紹介していただいたリンク先も大変参考になりました。


775 :Name_Not_Found:04/10/20 19:03:58 ID:???
擬似フレームなんだけど、画面を二分割しようと思ったら
最低限どんなけソースに書けばいいの?

776 :Name_Not_Found:04/10/20 19:11:28 ID:???
.menu { position : absolute ; top : 0px ; left : 0px ; width : 20% ; }
.main { position: absolute ; top 0px ; left : 20% ; width : 80% ; }
不完全だけど、二列に沸けられる。……かな?

777 :Name_Not_Found:04/10/20 19:12:19 ID:???
>>775
>>7

778 :774:04/10/20 22:17:47 ID:???
#navbarにbodyの背景色が透ける様にして上手く行ったのですが、
#siteInfo以降にbodyの背景色が出てしまうので、#contentと#navbarの親要素
として#mainを作りました。bodyの背景色の指定を無し、#mainにグリーンを
指定して、#navBarにグリーンが透ける事を狙ったのですが上手く行きません。
どの様にしたら良いのでしょうか…。どなたかアドバイスください。

┌─────────┐ #masthead
├───────┬─┤ ------------------------
│       │ │ #main
│       │ │ #content , #navBar
├───────┴─┤ ------------------------
└─────────┘ #siteInfo

body{color: #333333; line-height: 1.166; margin: 0px;
padding: 0px; overflow: auto;}

#masthead{padding: 5px 0px; border-bottom: 1px solid #cccccc;
width: 100%;background-color: #FFFFCC; clear: both;}

#main {background-color: #669900;}

#content{float:left;margin: 0;padding: 1%;background-color: #FFFFFF;
border-right: thin solid #999999;text-align: center;width: 70%;}

#navBar{float: right; overflow: visible; background-color: transparent;
padding: 5px; width: 26%;}

#siteInfo{border: 1px solid #cccccc;font-size: small;color: #333333;
text-align: center;background-color: #FFFFCC; width: 100%;}


779 :774:04/10/20 22:22:00 ID:???
HTMLのソースは以下の構成しています。

<body>
<div id="masthead">
</div>

<div id="main">

<div id="content">
</div>

<div id="navBar">
</div>

</div>

<div id="siteInfo">
</div>

</body>

780 :Name_Not_Found:04/10/21 00:50:57 ID:???
>>774
またFAQをよく読んでないね? >>6だ。
>これに当て嵌まらなかったら「浮動要素の高さも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

781 :Name_Not_Found:04/10/21 09:12:13 ID:83JorcEz
strictHTML+CSSレイアウトのための?質問。

http://www.kanefuku.co.jp/shopmall/mentaitsu/list_item.php?cateid=4

このページにあるような
商品画像
商品名
価格

のレイアウトって通販とかでは結構良くあるものだけど、strictHTMLからすると
<table summary="商品一覧表">
<tr>
<th>商品画像
<th>商品名
<th>価格
</tr>
<tr>...

のようにするのが理想だと思われる。しかし上記マークアップでは現実的には
当初のレイアウトをCSSで実現することは不可能。(シェア8割のIEではorz)

で、現実的にstrictHTMLでありつつ、できれば見やすいソースでありつつ、CSSで
目的のレイアウトを達成する方法を考えているんだけど、煮詰まったので助けを求めにきた。

782 :Name_Not_Found:04/10/21 10:08:18 ID:???
>>781
<td>
<dl>
<dt>商品画像</dt>
<dd>商品名</dd>
<dd>価格</dd>
</dl>
</td>

ではどう?

783 :Name_Not_Found:04/10/21 10:13:03 ID:???
<ul>
<li>
<dl>
<dt>商品画像</dt>
<dd>商品名</dd>
<dd>価格</dd>
</dl>
</li>
</ul>
これは?

784 :Name_Not_Found:04/10/21 10:47:02 ID:???
でも普通は
<dl>
<dt>商品名</dt>
<dd>商品画像</dd>
<dd>価格</dd>
</dl>

じゃないか?画像非表示でも意味が通るし

785 :Name_Not_Found:04/10/21 11:30:58 ID:???
成り行きでサイトを引き継ぐことになり、四苦八苦してるんで、
質問させてもらいます。

欧文フォントと邦文フォントをそれぞれ指定するって方法ありますか?

「This is a pen (これはペンです)」

みたいな文の場合、「This〜」の部分は、Times New Romanで、
「これは〜」の部分はMS 明朝でみたいな指定方法です。

ページ全体に指定したいんで、

<span class="font-family: 'Times New Roman'">
This is a pen
</span>
<span class="font-family: 'MS 明朝'">
(これはペンです)
</span>

みたいなことを延々していくのは、ちょっと汚すぎるなぁと思ったもので。

言葉足らずかつ無知ですいませんが、なにか解決策とかありましたら、
お願いします。

786 :Name_Not_Found:04/10/21 12:01:50 ID:???
閉鎖すりゃええやん

787 :Name_Not_Found:04/10/21 12:06:57 ID:???
>>785
まづはインライン・スタイルシートでなく、class分けして外部シートにしませう。
次に下記を讀んでおきませう。
http://cssbug.at.infoseek.co.jp/detail/winie/b033.html

788 :Name_Not_Found:04/10/21 12:56:13 ID:???
lang属性使うのはどうなん?

789 :Name_Not_Found:04/10/21 13:10:21 ID:???
>788
今のところ、対応してるブラウザって何?

790 :Name_Not_Found:04/10/21 14:08:50 ID:???
>>788-789 >>4の対応表を見よ。
属性セレクタ
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#attribute-selectors

791 :Name_Not_Found:04/10/21 14:36:23 ID:???
法律書なんかで、ページの左側に本文、右余白に注意書きというページを
作りたいんだけど、簡単にやるには表組みにするしかないのかな?

dl.s {
}
dl.s dt {
clear: both;
font-weight: bold;
}
dl.s dd.h {
float: left;
width: 420px;
margin: 0 0 1em 5px;
padding: 0 10px 0 0;
border-right: 1px solid #8fbc8f;
}
dl.s dd.m {
float: right;
width: 250px;
margin: 0 0 1em 0;
padding: 0;
}

こういうのを作ってみたんだけど、項目数が数千あるから、
いちいちddにクラスつけなきゃいけないのはダルいんだよね。
見出し(dt)、説明(dd)、注意書き(dd)だからいけない。

おいらは疲れた。ナイスアイデアちょうだいな。

792 :Name_Not_Found:04/10/21 14:38:13 ID:???
追記。dd.hはひとつだけど、dd.mは複数(2〜5つ)あるんだな。
そのひとつひとつに class="h" class="m" と振ってると発狂しそうよ。

793 :Name_Not_Found:04/10/21 14:50:41 ID:???
発狂してください。

794 :Name_Not_Found:04/10/21 14:58:19 ID:???
隣接セレクタ使えば楽っぽいんだけどね。
IEで効かないのはやっぱりダメですかね?

dl { }
dl dt { clear: both; font-weight: bold; }

/*ddは基本的にdd.mのスタイルで*/
dl dd { float: right; width: 250px; margin: 0 0 1em 0; padding: 0; }

/*dt直後のddにのみdd.hがマッチ*/
dt + dd {width: 420px; margin: 0 0 1em 5px; padding: 0 10px 0 0; border-right: 1px solid #8fbc8f; }



795 :発狂しました:04/10/21 14:59:17 ID:???
   ∩___∩
   | ノ      ヽ/⌒)  あばばば
  /⌒) (゚)   (゚) | .|
 / /   ( _●_)  ミ/   ∩―−、
.(  ヽ  |∪|  /    / (゚) 、_ `ヽ
 \    ヽノ /      /  ( ●  (゚) |つ
  /      /      |  (入__,,ノ   ミ   あばばばば
 |       /       、 (_/    ノ
 |  /\ \       \___ ノ゙ ─――、
 | /    )  )       /\       _  ヽ
 ∪    (  \    (⌒0 /\     ヽ (_ノ
       \,,_)    `ヽノ   /  、   )O


796 :Name_Not_Found:04/10/21 15:53:47 ID:???
イマイチだな。

797 :Name_Not_Found:04/10/21 15:55:24 ID:???
ふんにゃか ふんにゃか

798 :781:04/10/21 16:19:45 ID:83JorcEz
>>782
td内にdlとかってあきらかにおかしいと思う・・・
だってthが増えればいいわけで。現実的にはしょうがないっていう意味かな?
>>783
そもそもdlでリストなのでわざわざul内にないほうさせる必要性が?かも。
>>784
これ例えば「一言PR」とか、グラム・価格が絡んでくるとしんどいんだよね。
画像
商品名
コメント
グラム  価格
グラム2 価格2
こうなってくると普通に表が使いたくてしょうがない。ソースの綺麗さから言っても。
まあ>>783の変形で
<ul><li><dl>
<dt>画像<dd>img
<dt>商品名<dd>肉
<dt>一言PR<td>買ってね^^
<dt>グラム1<dt>1kg
<dt>価格1<dd>100000円
<dt>グラム2<dd>10kg
<dt>価格2<dd>1000000円
</dl></li>
<li><dl>.......

のような感じならCSSでどうにでもできるけど、汚い・・・・・
テーブルレイアウト並にソースが汚くていやだorz

799 :Name_Not_Found:04/10/21 16:44:58 ID:???
定義リストはリストとして情報をまとめるときに使う要素。
なので、同値の情報でも表としてまとめるのであれば素直に表にして
┏━━━┳━━━━━┳━━━━━┳━━━━━┓
┃写真 ┃  図  ┃  図  ┃  図  ┃
┣━━━╋━━━━━╋━━━━━╋━━━━━┫
┃商品名┃ふんにゃか┃ふんにゃか┃ふんにゃか┃
┣━━━╋━━━━━╋━━━━━╋━━━━━┫
┃価格 ┃  \1,000┃  \1,000┃  \1,000┃
┗━━━┻━━━━━┻━━━━━┻━━━━━┛
邪魔ならばth要素だけcssで消せば良いだろうかと。
現状のhtmlの仕様を遵守して表示をクラに任せるか、
クラの実装を鑑みて仕様に背く書き方をするかは、著者の自由だし。

800 :781:04/10/21 17:37:21 ID:???
>>799
それデータが増えていくと横スクロール地獄だよ。
結局tableでやりたいことだけど、IEのCSSが弱いから現実的にはHTML自体をゆがめるしかない。
一番マシな代替案ってなんだろ。

<ul><li><dl>
<dt>画像<dd>img
<dt>商品名<dd>肉
<dt>一言PR<td>買ってね^^
<dt>グラム1<dt>1kg
<dt>価格1<dd>100000円
<dt>グラム2<dd>10kg
<dt>価格2<dd>1000000円
</dl></li>
<li><dl>.......
やっぱこれでCSS整形しかないか・・・・ソースが汚すぎるんだよなorzもういや!

801 :Name_Not_Found:04/10/21 17:43:39 ID:???
そんなにtable使いたくないの?

802 :Name_Not_Found:04/10/21 17:53:37 ID:???
>それデータが増えていくと横スクロール地獄だよ。
 デザインも能力のうち。 ただのコーダーかい?

803 :Name_Not_Found:04/10/21 17:55:35 ID:???
(´-`).。oO(なんで素直にテーブル使わないんだろう・・・?)

804 :Name_Not_Found:04/10/21 17:58:18 ID:???
表になってるものはテーブルを使うのが正当なHTMLだろ。


805 :Name_Not_Found:04/10/21 17:59:05 ID:???
ていうかテーブルのカラムじゃなくてレコードを伸ばす書き方があるだろう……。
素直に縦方向にデータが増える表で書いた方がいい

806 :Name_Not_Found:04/10/21 18:07:07 ID:???
>>781よ、さんざんだな。

807 :Name_Not_Found:04/10/21 18:09:28 ID:9tj30CqU
CSSで表示の幅を固定できますか?

808 :Name_Not_Found:04/10/21 18:11:27 ID:???
出来る。 以上、終わり!

809 :Name_Not_Found:04/10/21 18:15:01 ID:9lY75yLJ
等幅フォントで文章を表示するにはどう指定すればいいのでしょうか?

810 :Name_Not_Found:04/10/21 18:16:47 ID:???
monospace を指定する。 あとは自分でググってね。

811 :781:04/10/21 18:27:55 ID:83JorcEz
>>801-806
レイアウトが↓のような

http://www.kanefuku.co.jp/shopmall/mentaitsu/list_item.php?cateid=4


商品画像
商品名
コメント
グラム 価格
グラム 価格

なのよね。だからtableでやりたいけど、tableでやるとCSSでの整形がIEでは不可能だから
代替案を考えてて、ここに知恵を借りにきたの。

> デザインも能力のうち。 ただのコーダーかい?
コーディング段階でレイアウトを変更するのはさすがにありえないかな。
レイアウト変えてもいいけど、そうなるとstrictHTML+CSSレイアウトの限界を
認めるわけで、それってなんか気分悪いしね。

812 :Name_Not_Found:04/10/21 18:31:30 ID:???
>strictHTML+CSSレイアウトの限界
ではなくて、己の能力の限界が先に来るわけだろ?

813 :Name_Not_Found:04/10/21 18:33:58 ID:???
tableでやるとCSSでの整形がIEでは ???

814 :276:04/10/21 18:38:22 ID:???
>>812-813
まだ理解してもらえてないぽ

ちょと例を画像化してうpするから待ってて。

815 :Name_Not_Found:04/10/21 18:40:39 ID:???
漏れも思ってたんだが「tableでやるとCSSでの整形がIEでは不可能」って何なの?

816 :Name_Not_Found:04/10/21 18:40:43 ID:???
>>811
そこ、きったねーソースだなー

817 :Name_Not_Found:04/10/21 18:45:45 ID:???
276 :昔の人 :04/10/05 22:59:23 ID:???

    ? ? ?

818 :781:04/10/21 18:55:56 ID:???
http://www.aki7.com/cgi/up/c-board.cgi
ここに「通販のよくあるレイアウト例」ていうのであげておいた。
でね。そのデザイン案をstrict+CSSでやるなら
<h1>商品一覧</h1>
<table summary="商品一覧表">
<tr>
<th>商品画像
<th>商品名
<th>コメント
<th>グラム1
<th>価格1
<th>グラム2
<th>価格2
</tr>
<tr>
<td><img>
<td>松坂牛
<td>マジでうまいんだけどw
<td>1kg
<td>1000円
<td>2kg
<td>2000円
</tr>
<tr>
<td><img>......

のようにマークアップして、これをCSSで画像にあるようなレイアウトにするのが
一番strictだと思うのね。でもIEでは実現不可能なのよね。っていうこと。

819 :Name_Not_Found:04/10/21 18:56:01 ID:???
>>814
別にオマイを理解する気もなくて、tableを勧めているわけだが・・・

820 :Name_Not_Found:04/10/21 18:57:26 ID:???
>>818
>>812

821 :Name_Not_Found:04/10/21 19:01:35 ID:???
>>818
午前9時過ぎから今までごにょごにょやってる間に素直にtableでやれば、
もう完成して、おねーちゃんのところにいられるわけだが・・・

822 :781:04/10/21 19:07:17 ID:???
>>819
つまりstrictをあきらめてってこと?
>>820
おまいならどうやってコーディングするの?

823 :Name_Not_Found:04/10/21 19:08:25 ID:???
table

824 :781:04/10/21 19:12:17 ID:???
>>821
実際にそういうコーディングをしてるんじゃなくて、なんかサイトを見回りながら
コーディング方法を浮かべてたらこれだけできないなぁって思ったのさ。

>>823
テーブルレイアウトってこと?
だから結局strict+CSSの限界ってことになるんでしょ?



825 :Name_Not_Found:04/10/21 19:14:00 ID:???

 議論はよそで。

826 :Name_Not_Found:04/10/21 19:16:36 ID:???
>実際にそういうコーディングをしてるんじゃなくて

  俺の時間を返してくれ。

827 :Name_Not_Found:04/10/21 19:25:34 ID:???
「表」にテーブルレイアウトも何も、無いだろ。

828 :Name_Not_Found:04/10/21 19:28:04 ID:???
>>824
なんでストリクトにこだわってるの?
あんなの現状じゃ使いものならないのなんてのは誰でも知ってることだろ?
もしかしてお前アフォ?

黙ってテーブルレイアウトしろボケ。

829 :781:04/10/21 19:29:56 ID:???
結局誰もコーディング例を出してくれないのか・・・orz
スレ違いなのかな。でもCSSの問題だしな・・・

830 :Name_Not_Found:04/10/21 19:31:07 ID:???
>>827
同意
表とテーブルレイアウトを混同していると思う。

831 :Name_Not_Found:04/10/21 19:31:37 ID:???
ストリクトにはこだわるな。クリトリスにこだわれ。

  と書く馬鹿が出ると思ったので、先に書いておいた。

832 :781:04/10/21 19:36:18 ID:???
>>827>>830
だからどうやって画像にあるようなレイアウトをtable要素+CSSで実現するのよ?
IEではセルごとにposition:absoluteとかできないよ。

お願いだから実際のコーディング例を出してみてよ。

833 :Name_Not_Found:04/10/21 19:46:06 ID:???
こりゃ完全なアホだ。

834 :Name_Not_Found:04/10/21 19:52:08 ID:???
要素内容に対してどのようにコーディングし、レイアウトを意図したモノにする。
という時点で違うと思う。
<table>は複数要素で構成された一つの書式なんだから
書式に対して要素内容を充てていくモンだと思う。

835 :Name_Not_Found:04/10/21 19:53:47 ID:???
もう相手にするな。
他の質問者に迷惑だよ。

836 :781:04/10/21 19:58:26 ID:???
>>834
言いたいことがイマイチ理解できないけど、つまりどうやってあのレイアウトを
strictHTML+CSSレイアウトで実現するの?

837 :Name_Not_Found:04/10/21 20:03:20 ID:???
「はじめにレイアウトありき」でHTMLのほうをそれにフィットさせようとしてる時点で
Strictもくそもないような。

838 :781:04/10/21 20:05:51 ID:???
>>837
デザイン案が先にできるのは普通だと思うけど?
もちろんHTMLをレイアウト毎に変えていてはstrictではないけど。

とりあえずあのレイアウトをどうやってstrictHTML+CSSで実現するの?

839 :Name_Not_Found:04/10/21 20:12:04 ID:???

  邪魔だ! 脳内野郎は消えろ!!

840 :Name_Not_Found:04/10/21 20:13:57 ID:???
通報しとこうか?

841 :Name_Not_Found:04/10/21 20:28:28 ID:???
とりあえず以後スルー

842 :Name_Not_Found:04/10/21 20:30:38 ID:???
strictならレイアウトより構造優先

843 :Name_Not_Found:04/10/21 20:31:01 ID:???
もまえら落ち着いてください。多分 >>781 はstrictを誤解しているだけだよ。
>>818 で彼が例に挙げたのからもわかるように、表で書くにしても、
dlを使うみたいに書いて、cssで整形しなければならない、と思っているみたい。

で、実際にはそうじゃなくて、表であるならば >>799 のように書いて、
例えばカラムは三つまでって決めているのならば、そうなるようにtrとtdを
書いていけばいいだけ。

一見、いわゆる“テーブルレイアウト”のように感じてしまうのは
>>781 だけではないとおもうけど、それがtable要素の本来の使い方なので
問題ないですよ。

844 :Name_Not_Found:04/10/21 20:37:48 ID:???
とりあえず以後スルーで

845 :Name_Not_Found:04/10/21 20:38:54 ID:???
実用するわけでもないものに答えた人らは災難だったねw
表作りはスレ違いだしねぇ・・・

846 :781:04/10/21 21:01:52 ID:83JorcEz
>>840-841

>>842
ハ?コーディング段階でレイアウト変わるわけないだろ。
>>843
>多分 >>781 はstrictを誤解しているだけだよ。
してないんだけど。

とにかくお前ら誰か実際にあのデザイン案を渡されてstrictHTML+CSSで仕上げろと
いう仕事は来た時にどういうコーディングするのよ?やってみ?無理だから。
IE4以上NN6以上であのレイアウトを実現。

847 :781:04/10/21 21:02:49 ID:83JorcEz
>>845
>表作りはスレ違いだしねぇ・・・
どこに表作りってあるんだ?もしかしてお前アフォ?

848 :Name_Not_Found:04/10/21 21:09:00 ID:???
>>846-847
普通にテーブルで表として作ればいいじゃない。

出来る出来ないやってみ?無理だ。で「質問」スレを埋めないでくれ。

849 :Name_Not_Found:04/10/21 21:09:17 ID:???
>>846
しつこいストリクトなんてスレ違いだボケ
せめて
http://pc5.2ch.net/test/read.cgi/hp/1096723178/l50
こっちでやれ

850 :781:04/10/21 21:13:17 ID:???
>>848
そういうことが言いたかったのね。
でも見た目的には表ではなくしたいのよ。
構造としては思いっきり>>818のようなのが理想なんだけどね。

>>849
そうなん?まあ煽りばかりでうんざりしてるからスレ移動してもいいけどさ。
それじゃさようなら。

851 :Name_Not_Found:04/10/21 21:15:58 ID:???
ageたりsageたり忙しくうざい奴だったね

次ドゾー

852 :Name_Not_Found:04/10/21 21:17:13 ID:???
真性は楽しいな。

853 :Name_Not_Found:04/10/21 21:29:53 ID:???
ところで実際はどうやるの?
あれが表なら、なんでも表になっちゃうじゃないのか?

と、最近テーブルレイアウトからの脱却を図る素人が口を出してみるテスト

854 :Name_Not_Found:04/10/21 21:31:58 ID:???
>>853
表≠テーブルレイアウト
今回の厨の質問だと表でよかろう。

855 :Name_Not_Found:04/10/21 21:48:49 ID:???
>>854
あれって本当に表なの?
まあ作者しだいの肝するがな。



856 :Name_Not_Found:04/10/21 22:04:39 ID:???
表だろ? 商品を一覧にする=表 でいいと思うけど?

857 :Name_Not_Found:04/10/21 22:08:53 ID:???
まぁまぁ よく釣れたじゃないか。

858 :Name_Not_Found:04/10/21 22:11:13 ID:???
ソースも見られないやつがstrictとはね。あきれたぜ

859 :Name_Not_Found:04/10/21 22:12:40 ID:???
このお話、ストリクトスレの方に移動した模様なので、この辺で。





次、ドゾー

860 :Name_Not_Found:04/10/21 22:14:43 ID:???
ふんにゃか。ふんにゃか。

861 :Name_Not_Found:04/10/21 22:15:42 ID:???
display:none と、 visibility: hidden って、どう使い分ければいいんですか?
同じような気もするけど、同じじゃないですよね?

862 :Name_Not_Found:04/10/21 22:16:29 ID:???
なんかCSSスレ住人の回答が思いっきり馬鹿にされてるんだけど・・・

863 :Name_Not_Found:04/10/21 22:18:50 ID:???
こっちは、strict気取りじゃないからね。気楽にいこうや。

864 :Name_Not_Found:04/10/21 22:22:19 ID:???
>>861
大雑把に言うと、

display:none; は存在そのものが消える、
visibility:hidden; は見えなくなるだけで存在は残る、

という感じ。

<p>ふんにゃか</p>
<p id="a">ふんにゃか</p>
<p>ふんにゃか</p>

として、

p#a { visibility: hidden; } と
p#a { display: none; } を

比べてみるといいかも。

865 :Name_Not_Found:04/10/21 22:22:52 ID:???
<table border=0 bgcolor="#999999" cellspacing=0 cellpadding=0>
<tr>
<td>
<table border=0 cellspacing=1 cellpadding=2>
<tr bgcolor="#ffffff"><td>001</td><td>002</td></tr>
</table>
</td>
</tr>
</table>

このような裏技を、IE/NN4で完全に再現できる
正規スタイルシート表現はありますか、教えてください。

866 :Name_Not_Found:04/10/21 22:26:39 ID:???
>>864
やってみた……ら、ほんとだっ!!!確かに動作が違う。
ありがとう。勉強になった。なるほどなるほど

867 :Name_Not_Found:04/10/21 22:29:32 ID:???
>>865
ボーダーとコラプスをごにょごにょできないから、無理でしょう。
5以降でもMacIEはコラプスが効かないのでだめぽ。

868 :Name_Not_Found:04/10/21 23:15:27 ID:???
ふんにゃか。ふんにゃか。

869 :Name_Not_Found:04/10/21 23:22:03 ID:???
ここではそれは要らん。

870 :865:04/10/22 00:27:27 ID:???
>>867
ありがとうございます。
mac以外ならコプラスOKでできるんでしょうか?
いろいろ探したんですが、具体的にテーブルの裏技
を再現してるサイトがみつからなくて、質問
させてもらいます。

871 :Name_Not_Found:04/10/22 06:58:45 ID:???
CSS
ul{
display: block;
padding-left: 0;
margin-left: 0;
}

li{
display: inline;
color: #000;
padding: 2px;
margin-right: 1px;
background-color: #fff;
list-style-type: none;
}

HTML
<ul><li>001</li><li>002</li></ul>

NN/NC4は多分無理。Mac IEは多分大丈夫。

872 :871:04/10/22 07:00:27 ID:???
list-style-type: none;
はいらなかった。

873 :871:04/10/22 07:05:36 ID:???
ごめん、完全に勘違い……

874 :Name_Not_Found:04/10/22 09:23:50 ID:RLZy7WLc
リストマークとしてバックグランドで青丸の画像を使ってます。
でもOPERAとGeckoだと表示されません。
アドバイスお願いします。

新幹線価格表
http://xxxx.s56.xrea.com/auction_nozomi/order_form.shtml

875 :Name_Not_Found:04/10/22 10:37:19 ID:???
>>874は、>>3を見れば済むのでは。
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

876 :Name_Not_Found:04/10/22 11:21:37 ID:???
>>874
ここが問題だ。
ul.setsumei li {
margin-bottom: 0.5em;
padding-left: 1.5em;
background: url('http://xxxx.s56.xrea.com/img/bottun.gif') no-repeat 0.1em left;
}

各キーワード(「left」,「center」など)を,長さやパーセント値と組み合わせてはなりません。
http://hp.vector.co.jp/authors/VA022006/css/colors.html#background-position

877 :867:04/10/22 11:40:06 ID:???
>>870
どの辺が裏技(謎)なのかわかんないけど、
table要素の属性の、border、cellpadding、cellspacing、
またtdにもあるbackgroundやbgcolorは
スタイルシートでできます。


あと、コプラスではなくコラプス。

878 :Name_Not_Found:04/10/22 13:49:29 ID:???
>876
ttp://pc5.2ch.net/test/read.cgi/hp/1093998766/906-909

879 :Name_Not_Found:04/10/22 15:33:46 ID:P6WXt9Sj
質問させてください。
IEなどは問題ないのですが、safariで

<div style="width:100px; height:100px; float:left; margin:10px;">
123456789012345678901234567890
</div>
<div style="width:100px; height:100px; float:left; margin:10px;">
123456789012345678901234567890
</div>

とやると、文章が改行されず、困っています。(数値でなければ改行されます)

半角英数字をスペース無しでおいても同じ現象が起こるのですが、これを200pxの位置で
強制的に改行させる方法があれば、教えてください。m(_ _)mペコリ

880 :Name_Not_Found:04/10/22 16:01:24 ID:HkmR+596
width:300;
padding:30;
margin:0;

width:240;
padding0:;
margin:30;
の違いは何ですか?
IEの表示は同じなのですが
どちらかは誤った文法なのでしょうか?

要は300の幅の中心に
240幅ぐらいで文字を並べたいのですが。

881 :Name_Not_Found:04/10/22 16:02:50 ID:HkmR+596
上の訂正

width:300;
padding:0 0 30 30;
margin:0;

width:240;
padding0:;
margin:0 0 30 30;

882 :Name_Not_Found:04/10/22 16:17:28 ID:???
>>881
えっと、どちらも間違っちゃいません。
基本中の基本なので、marginとpaddingの違いをぐぐってでも調べてください。

たとえばdiv要素で囲まれた正方形を作ったとき、
paddingはその□の内側を指定しますが、、marginは□の外側を指定します。

わかりましたか?

883 :Name_Not_Found:04/10/22 16:25:34 ID:HkmR+596
>>882
たすかりました。

Goliveで制作しているのですが
paddingで表現すると
レイアウトモードで狂って見えるので
困っていました。

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

884 :Name_Not_Found:04/10/22 16:41:04 ID:???
>>882
どちらも質問の意図とは違う点が間違ってる(unitless number)

885 :Name_Not_Found:04/10/22 17:11:48 ID:HkmR+596
ガ━━(゚□゚*川━━━━ン!
そ・・・そりは・・・?

886 :Name_Not_Found:04/10/22 17:23:04 ID:???
>>882
とりあえず、相対的に記述できるプロパティ以外は、
単位つけんといかんよ。
あと、ブロックのマージンとパディングがわかりづらいなら、
とりあえず1pxのボーダーを表示してみるか、薄目の色で背景色
を塗ってみるとわかりやすいかもしれん。

いずれにせよ、DWやGLなどの便利なツールも、WYSWYG画面では
正確(謎)にスタイルシートを解釈できないようなので、
ブラウザでリロードしながらやることをオススメします。

887 :874:04/10/22 18:13:38 ID:QTos4rEw
>>875
>>876
回答ありがとうございます。
多謝です。

888 :Name_Not_Found:04/10/22 18:37:11 ID:???
W3C CSS 検証サービス で、下記の警告がでたのですが、何が間違っているのかがわかりません。

Line : 0 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します

ちなみに、font-familyは
font-family: "MS Pゴシック",Osaka; 

にしています。

889 :Name_Not_Found:04/10/22 18:41:05 ID:???
一般フォントファミリー名を追加すればよし。

890 :Name_Not_Found:04/10/22 18:46:00 ID:???
>>878 倉庫入りで読めません。

891 :Name_Not_Found:04/10/22 18:48:14 ID:???
>>890
いろんな意味で2chブラウザ導入した方がいいかも。
●も高いものじゃないし。

892 :Name_Not_Found:04/10/22 18:51:37 ID:???
>>882
とりあえずpaddingの左右は使わないこと。これCSS知ってる人間の常識ね。
標準準拠モードと後方互換での差がでちゃうからね。
面倒でも
左右はマージン
上下はパディング
ってやっておくと何かといいよ。上下マージンはフロート絡みでIEが変な挙動しるときがあるからね。

893 :891:04/10/22 18:51:39 ID:???
とりあえず今回はひろってきたげたよ。
--
906 :Name_Not_Found :sage :04/09/26 20:16:41 ID:???
>>893
そのとおり。
background-position は、
[[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]] | inherit
の形をとるから、
キーワードと数値の組み合わせは不可。
それは、
left bottom か、bottom left か、 0% 100% と書く必要がある。
880は、…だが。
907 :Name_Not_Found :sage :04/09/26 22:56:54 ID:???
最近のUAは2.1仕様で実装してるので
0% bottomも正当な値として解釈する。
mozillaなんか昔は厳格に2.0仕様だったのに、わざわざ2.1(=IE仕様)に
合わせて修正するハメに・・・
908 :Name_Not_Found :sage :04/09/26 23:47:42 ID:???
(p)http://www.w3.org/TR/CSS21/changes.html#q16
これか。
微妙な変更は調べてもすぐ忘れちゃうよ。
909 :Name_Not_Found :sage :04/09/27 00:27:20 ID:???
>> 907
>> 908
サンクス。

894 :Name_Not_Found:04/10/22 18:53:50 ID:???
最近は仕様と勧告の差も知らんアフォが増えたな


895 :Name_Not_Found:04/10/22 19:02:58 ID:???
>>892
言いたいことはすごくよくわかるけど、
せめてwidthがauto以外の時は、と付け加えるべきでは。

よくわからず何となくそうするべきだ、と刷り込みする(される)のは
初心者には必ずしも良いことではないかと。

896 :Name_Not_Found:04/10/22 19:46:26 ID:???
ただの知ったかだろ。

897 :892:04/10/22 20:43:51 ID:???
>>895
>せめてwidthがauto以外の時は、と付け加えるべきでは。
何で?widthが何であれ>>892の方法で問題はないでしょ?
もちろんwidthがautoなら別に左右についてはマージンでもパディングでもいいけどさ。

それとも何か問題あったっけ?

898 :Name_Not_Found:04/10/22 20:46:02 ID:???
オマイのカオに問題がある

899 :Name_Not_Found:04/10/22 21:03:13 ID:???
ふんにゃか。ふんにゃか。

900 :892:04/10/22 22:12:20 ID:???
結局問題もないのにケチ付けてただけなのか?
よくわからんな。898=895なのか?

901 :Name_Not_Found:04/10/22 22:13:10 ID:???
>>899
お前うざい
2ちゃんばっかやってねぇで働けよ

902 :Name_Not_Found:04/10/22 22:49:05 ID:???
>>901
黙れ!お前に何の関係があるんだこのクソボケが!

903 :Name_Not_Found:04/10/22 23:03:59 ID:???
ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。ふんにゃか。

904 :Name_Not_Found:04/10/22 23:05:07 ID:???
h1{ border-bottom:1ps solid #000000; }
とかやると、殆どのブラウザでwidthが100%になってしまいますが、
h1{ width:50%; }
とかいちいち設定しなくても文字列の幅と同じくはできないのでしょうか。

905 :Name_Not_Found:04/10/22 23:13:23 ID:???
width:を入れるのがメンドクサイというのかい?


906 :Name_Not_Found:04/10/22 23:15:35 ID:???
>>905
その通りです。
100個も200個も設定してられませぬ。
一応今は50exとしてますが……はみ出したり丁度良かったりで微妙です。

907 :Name_Not_Found:04/10/22 23:17:01 ID:???
display:inline; とか(ひー

<h1><span>ふんにゃか。ふんにゃか。</span></h1>
とかして h1 span { ... } で見た目をコントロールするとか…。

908 :Name_Not_Found:04/10/22 23:19:10 ID:???
>>906
この↓1行だけで、全h1タグが幅50%になるんじゃなかったっけ?
違ってたらスマソ。

h1{ width:50%; }

909 :908:04/10/22 23:20:17 ID:???
あっ失礼、文字列に合わせるってことか

910 :Name_Not_Found:04/10/22 23:21:34 ID:???
>>906
なら、HTML を書くこともメンドクサイだろ?

 作るの止めたら?

911 :Name_Not_Found:04/10/22 23:31:29 ID:???
>>906は一括置換を知らないらしい。

912 :Name_Not_Found:04/10/22 23:33:12 ID:???
border無しに汁。

913 :Name_Not_Found:04/10/22 23:34:12 ID:???
入れ食いですね

914 :904,906:04/10/22 23:35:45 ID:???
一応補足しておくと、外部ファイルで一括設定したいってことです。

915 :Name_Not_Found:04/10/22 23:40:39 ID:???
>とかいちいち設定しなくても文字列の幅と同じくはできないのでしょうか。
>一応補足しておくと、外部ファイルで一括設定したいってことです。

   同じ意味とは思えんが・・・

916 :Name_Not_Found:04/10/22 23:45:40 ID:???
border-bottomの幅を、ファイル毎にいちいち設定しなくても、文字列と同じ幅にできませんか。

917 :Name_Not_Found:04/10/22 23:58:29 ID:???
THML.CSSでは出来ません。

918 :Name_Not_Found:04/10/23 00:03:12 ID:???
落ち着け。

919 :Name_Not_Found:04/10/23 00:04:35 ID:???
>>916
JavaScript の出番だな。ちと面倒くさそうだ

920 :Name_Not_Found:04/10/23 00:07:51 ID:???
>ちと面倒くさそうだ
 めんどっちーのはやなんだってば!

921 :Name_Not_Found:04/10/23 00:09:06 ID:???
う〜〜ん 日本語とは思えん。

922 :Name_Not_Found:04/10/23 00:13:43 ID:???
ふんにゃか。ふんにゃか。

923 :Name_Not_Found:04/10/23 00:22:13 ID:???
↑これって何か意味あるの?

924 :Name_Not_Found:04/10/23 00:22:13 ID:???
それはいらんよ。

925 :778:04/10/23 00:22:58 ID:???
>>780
遅くなりましたが、ありがとうございました。
なんとか思い通りの状態に近づける事が出来ました。

FAQの意味を理解するのに時間かかっちゃった。
でもおかげで勉強になりました。

926 :Name_Not_Found:04/10/23 00:26:57 ID:???
うむ よくがんがった。

927 :Name_Not_Found:04/10/23 00:38:45 ID:???
>>925 778
これからも勉強続けて、一緒にがんがろうな。

928 :778:04/10/23 01:22:52 ID:???
>>927
そっちのケはないので勘弁してくださいorz

929 :Name_Not_Found:04/10/23 02:07:50 ID:???
ふんにゃか。ふんにゃか。

930 :Name_Not_Found:04/10/23 02:20:31 ID:???
質問させてください。
CSSで
div.boxbox h1,h2,h3 {
color: #FF0000 ;
}

HTMLで
<div class="DekaBox">
<div class="boxbox">
<h2>たいとーる</h2>
</div>
<div class="boxbox2">
<h3>2ちゃんねるについて</h3>
<p>あひゃひゃひゃひゃひゃひゃ<br />あひゃひゃひゃ</p>
</div>
</div>

と記述すると、"boxbox2"の部分のh3も赤くなってしまいます。

div.boxbox h1 {
color: #FF0000 ;
}
div.boxbox h2 {
color: #FF0000 ;
}
div.boxbox h3 {
color: #FF0000 ;
}
と記述すると正常("boxbox"内のh1〜3だけ赤)になります。

これはSafari 1.2で発生していて、Netscape、Firefoxなどでは発生しませんでした。
これはSafariのバグでしょうか?

931 :Name_Not_Found:04/10/23 02:41:09 ID:???
div.boxbox h1,h2,h3 {
color: #FF0000 ;
}



div.boxbox h1 { color:#FF0000; }
h2 { color:#FF0000; }
h3 { color:#FF0000; }

と等価。
だが Netscape、Firefoxなどでは発生しないというのは……。
他のところで何か指定してあるのが効いてるというのでなければ
嘘くさいな。

932 :Name_Not_Found:04/10/23 03:09:04 ID:???
>>930
MozillaでもNetscapeでもFireFoxでも発生したよ。


933 :930:04/10/23 03:34:35 ID:???
え、マック版だとならないんですが、、、。

>>931
なるほど、
(div.boxbox h1)、(h2)、(h3)と解釈されてしまうわけですね。

div.appleboxtop h1,div.appleboxtop h2,div.appleboxtop h3 {ごにょごにょ;}
と記述したら治りました。

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

934 :Name_Not_Found:04/10/23 03:47:45 ID:???
>>933
>え、マック版だとならないんですが、、、。
そんなはずはないんですが……。
大事なことだから、最小限のソースで実験して、報告してくれませんか。
http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50

935 :Name_Not_Found:04/10/23 10:50:55 ID:???
>>916
見出しに使うならdisplay:inlineにすればいいんじゃね?
複数行にならなければblockと同じに見える。

936 :Name_Not_Found:04/10/23 13:24:39 ID:K3Wlf5eM
>>904
<h1></h1>内に下線を入れたいと言うことならば、
h1{text-decoration:underline;}
でいいんでない?
borderでなければというのならば、
h1{display:inline;border-bottom:1px solid #000}
だけれど。

937 :930=933:04/10/23 13:59:23 ID:???
>>934
何度やっても同じ結果だったのですが、再起動したら
すべてのブラウザで同じ動作をしました。どうやら
何度もリロードしたにもかかわらずキャッシュが残っていたようです。
お騒がせしました。

938 :Name_Not_Found:04/10/23 14:13:26 ID:???
ふんにゃか。ふんにゃか。

939 :Name_Not_Found:04/10/23 15:23:30 ID:???
>>936
無事できました。有り難う。

940 :Name_Not_Found:04/10/23 16:03:10 ID:???
ふんにゃか。ふんにゃか。

941 :Name_Not_Found:04/10/23 16:34:10 ID:???
ぬるぽ ぬるぽ。

942 :Name_Not_Found:04/10/23 18:05:13 ID:???
ふんにゃか。ふんにゃか。


943 :Name_Not_Found:04/10/23 19:23:56 ID:???
ここではそれは要らんよ

944 :Name_Not_Found:04/10/23 20:23:09 ID:???
左側は画像、右側はテキストの様にボックス2つ並べてるんですが、
ウインドウサイズの幅を縮めると、右側のボックスが左のボックスの下に
潜っちゃいます。

潜らない様に、固定させるにはどーすりゃいいんですか?

945 :Name_Not_Found:04/10/23 20:26:00 ID:???
ソース出しなさいよ。

946 :Name_Not_Found:04/10/23 21:40:02 ID:???
URL出せ

947 :Name_Not_Found:04/10/23 23:15:12 ID:???
>>944
スタイルシートではないけれど
<IMG SRC="1.jpg" ALIGN="left" HEIGHT="50%" WIDTH="50%" HSPACE="10">


948 :Name_Not_Found:04/10/23 23:21:16 ID:???
HSPACEって何?

949 :Name_Not_Found:04/10/23 23:30:22 ID:???
知らんのか。とほほでも見てきな。

950 :Name_Not_Found:04/10/23 23:33:11 ID:???
普通にimg border:0px;でやってるし。

951 :Name_Not_Found:04/10/24 00:17:14 ID:???
日本語変だぞ。

952 :Name_Not_Found:04/10/24 00:27:17 ID:???
>>944
画像にfloat:leftで右にテキストを流し込むようにする。
画像はwidthで幅固定。テキストは画像の幅の分だけ左マージンを空ける。
てか>>6

953 :Name_Not_Found:04/10/24 09:00:38 ID:???
えーっと、結局ボックスを使っちゃ俺の思ってる通りにはならんよ、
って事なんでしょうか。

DWのサンプルの場合、左ボックスに75%の幅を設定、
右のボックスには幅を指定せず、左マージンに79%のマージン設定して
二つが並ぶ様にしてあるんだけど、あれは一体どういう意味の工夫なんでしょうか?

アフォな俺の頭では、左75%なら右も25%のボックスをフロートで並べて終わり
なんだけど…。

954 :944:04/10/24 09:01:06 ID:???
あ、953はあっしの書き込みでやんす。

955 :Name_Not_Found:04/10/24 09:05:33 ID:???
>>953
左右ボックスを含む親ボックスの幅を指定する。

956 :944:04/10/24 09:17:03 ID:???
>>955
親ボックスに幅100%、
オーバーフローは非表示にしてるんですけど…。
それとも幅は%指定じゃ駄目なんでしょうか。

右側のボックスが、スルリと左のボックスの下に逃げ込んじゃうの。
なんとかしてー。

ところでソース出せって、どこまで出したら良いんでしょ?

957 :Name_Not_Found:04/10/24 09:38:02 ID:???
>>956
幅100%だとビミョウにはみ出すよ。
マージンとかパディングとかボーダーとか、スクロールバーの幅とかあるから。
幅95%あたりにしてみたら?

>スルリと左のボックスの下に逃げ込んじゃうの。
改行って言え。

958 :Name_Not_Found:04/10/24 09:41:22 ID:???
>>953
> アフォな俺の頭では、左75%なら右も25%のボックスをフロートで並べて終わり
> なんだけど…。

それが、まさしく「右側のボックスが、スルリと左のボックスの下に逃げ込んじゃう」
ようにするやり方。自らその方法を積極的に取り入れておいて何がご不満か?
floatでフワフワ浮いてる状態なんだから、ウィンドウサイズが変わると移動するに
決まっておるだろ。

DWのサンプルは、>>952の説明と同じ。

てか>>6

952も6もちゃんと読んだ上での再質問か?


959 :944:04/10/24 10:43:14 ID:???
わかりました。わかりました。これですね。
正直FAQ読んでもアフォだからピンと来ませんでした。すんません。
---------------------------------------------------------------------------------------------
ブロック自体を横並びにするには、後続要素にも“float:left;”なり
“margin-left:(浮動要素のwidth);”なりを指定する必要があります。
WinIEの間違った実装で誤解が多いので注意。
---------------------------------------------------------------------------------------------
親ボックスに幅95%
左コンテンツは550ピクセル幅指定、flolat;left
右ボックスはmargin-left:560ピクセル
safari では"改行" しない様になりましたが、
右ボックス内の内容が表示されません。

右ボックスはmargin-left:を指定しないと割と思った通りなんだけど、
おかしいですよね??


960 :Name_Not_Found:04/10/24 11:13:47 ID:???
自分のサイトデザイン変え様かと思うけど(・∀・)イイ!!デザイン思い浮かばない・・・
カッコ(・∀・)イイ!!サイトオシエレ。

961 :Name_Not_Found:04/10/24 11:38:41 ID:???
>>959 情報小出し、よくない。HTMLとCSSのソースを出せ。でないと修正してやれないぞ。

962 :Name_Not_Found:04/10/24 12:18:16 ID:???
すいません。自己解決しました。

963 :Name_Not_Found:04/10/24 12:50:18 ID:???
ん、>>962>>960か?

964 :944:04/10/24 13:49:30 ID:???
>>961
度々すんません。HTMLは以下の様な感じです。
先日教えてもらった情報を参考にほぼいい感じなんですが…。
<body>
<div id="container">
<div id="topnav">
</div>
<div id="content">
<p><img src="img/***1.jpg" width="120" height="200"><img src="img***2.jpg" width="400" height="360"></p>
</div>
<div id="links">
<div class="newLinks">
<h3>トピックス</h3>
<ul>
<li><a href="http://*******" title="内容" target="_self">内容の説明分</a></li>
</ul>
</div>
</div>
<br style="clear:both;">
<div id="footer">
<img src="img/*******.gif" width="125" height="20"> ©2001-2004 ******** co.ltd.</div>
</div>
</body>
</html>

965 :944:04/10/24 13:53:11 ID:???
CSSは抜粋しました。

body{font-family: Arial,sans-serif;
color: #333333;line-height: 1.166;margin: 0px;
padding: 0px;overflow: auto;
}

#container {background-color: #669900;white-space: nowrap;
width: 95%;overflow: hidden;
border: medium solid #000000;margin: 10px 2%;
}

#topnav{border-bottom: medium solid #000000;
background-color: #FFFFCC;
white-space: nowrap;padding-bottom: 5px;
}



966 :944:04/10/24 13:55:30 ID:???
#content{background-color: #FFFFFF;
border-right: medium solid #333333;
width: 550px;overflow: hidden;white-space: nowrap;
height: auto;padding: 20px 10px;text-align: center; float: left;
}

#links{background-color: transparent;
padding-top: 5px;padding-bottom: 5px;white-space: nowrap;
overflow: hidden;height: auto;width: auto;
padding-left: 10px;margin-left: 560px;
}


#footer{font-size: small;
color: #333333;text-align: center;background-color: #FFFFCC;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
padding-top: 5px;padding-bottom: 5px;
vertical-align: bottom;white-space: nowrap;
border-top: medium solid #333333;
}

967 :Name_Not_Found:04/10/24 15:11:45 ID:???
すみません、教えてください。
下記のようなページを作成したのですが、ネスケ6でみると青(#0000FF)の部分が表示されません。
ネスケ7やIE6、Opera6では正常に表示されました。
ネスケ6でも青(#0000FF)の部分を表示させるにはどうすればよろしいでしょうか?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
#1 {width:500px; background-color: #0000FF;float: left;}
#2 {width:200px; background-color: #FF0000;float: left;}
#3 {width:300px; background-color: #00FF00;float: right;}
-->
</style>
</head>
<body>
<div id="1">
<div id="2"> id "2" の内容がここに入ります</div>
<div id="3"> id "3" の内容がここに入ります<br><br><br><br><br></div>
</div>
</body>
</html>

968 :Name_Not_Found:04/10/24 15:38:19 ID:???
>>967
1.内容が全てフロートしたら高さ0になるので、表示されないのが正常。
 :afterでdisplay:block;clear:bothすれ。
2.idは数字から始めることはできない。



969 :Name_Not_Found:04/10/24 16:20:32 ID:???
このスレでカッコ(・∀・)イイ!!っていうデザインオシエレ。

970 :Name_Not_Found:04/10/24 17:52:43 ID:???
>>967
ネスケ6のことは忘れろ。


971 :Name_Not_Found:04/10/24 21:04:33 ID:???
文章が左上に寄りすぎてるので、右下にずらしたいのだが
どうすればいいんだ?

972 :Name_Not_Found:04/10/24 21:31:36 ID:???
marginかpadding使え。

 って もっと詳しく書けぃ

973 :Name_Not_Found:04/10/24 21:38:53 ID:???
てぃてぃ(・∀・)ノ てぃ〜

974 :Name_Not_Found:04/10/24 22:00:29 ID:???
padding って上左下右の位置指定できるが右と下って指定しても意味ないよな??

975 :944:04/10/24 22:03:25 ID:???
今日一日、あーたらこーたらやってましたが
結局思う様にならず…つД`)・゚・。・゚゚・*:.。

976 :Name_Not_Found:04/10/24 22:33:47 ID:???
>>974
borderで囲ったときなんかは、右も下も隙間開けないと読みにくくなるよ。

977 :Name_Not_Found:04/10/24 22:38:11 ID:???
>>974
表とかの時は、右と下は指定しないと読みにくい。

それと、指定した位置で改行するにはどうすればいいんだっけ?
デザイン変えてたら横にスクロールするようになって、デザインガタガタだよ(泣

978 :Name_Not_Found:04/10/25 00:41:44 ID:???
>>965-966
なんか、要らん指定が多い感じ。もっとスッキリしようや。
#linksへのoverflow: hidden; ってなんのために指定してるのさ?
それを削ればSafariでも正常に表示される。

979 :WindowsXP・IE6:04/10/25 12:08:15 ID:???
body{
background:url(***.gif);
background-attachment:scroll;
background-position:center top;
}
#aaa{
margin:auto;
width:100px;
}

***.gif、#aaaともに幅を100pxにそろえているのですが、このCSSだとブラウザの幅によって、
両方とも中央にそろう場合と、#aaaが***.gifより左に1pxずれる場合があります。
ブラウザの幅を変えても常に両方そろうようにしたいのですが、方法はありますか?

980 :Name_Not_Found:04/10/25 12:46:12 ID:aVNchFzG
1つのtdセルの中で文字列を2つ書き、
片方は左寄せ、もう片方は右寄せ
としたいのですが、できる方法はあるでしょうか?

<td>文字列1 <span sytle="text-align:right;">文字列2</span></td>

では無理でした。
当方IE6(win)です。


981 :Name_Not_Found:04/10/25 14:55:48 ID:???
横に
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
とされてたら横にスクロールされてしまう。
横にスクロールするようにならないように、途中で改行したいんだが
どうすればいい?

982 :Name_Not_Found:04/10/25 15:49:41 ID:???
TABLEタグの中にでも放り込め。

983 :Name_Not_Found:04/10/25 16:14:19 ID:???
↓次スレよろ↓

984 :944:04/10/25 18:12:33 ID:???
>>978
>なんか、要らん指定が多い感じ。もっとスッキリしようや。

いらん指定は俺が分かってなかったからです...........(´・ω・`)
教えていただいた#linksの件含めていくつか無駄な指定を省いた所
上手くいきましタ━━━━(゚∀゚)━━━━ッ!!
おまけにちょっとかしこくなった(と思うぞ)。

ありがとうございました。次スレもよろ。


985 :Name_Not_Found:04/10/25 18:51:57 ID:???
>>981
JavaScript で文字列分割処理を行うか
CSS で IE 独自拡張の word-break:break-all;

986 :Name_Not_Found:04/10/25 20:44:20 ID:???
CSSで疑似フレーム?を使用しています、左にメニュー右にページという感じに
こういう場合、CGI等を右のページだけに設置したり出来ますか?

987 :986:04/10/25 20:55:29 ID:vE8PigGR
ごめんなさい、詳細書くの忘れてました
例えば左にメニューがあって項目のBBSをクリックしたら右にBBSを表示したりできますか?

988 :Name_Not_Found:04/10/25 21:01:26 ID:???
>>986
「使用しています」って本当?

989 :Name_Not_Found:04/10/25 21:02:53 ID:???
>例えば左にメニューがあって項目のBBSをクリックしたら右にBBSを表示したりできますか?
はい
>CGI等を右のページだけに設置したり出来ますか?
おまえにはムリ

990 :Name_Not_Found:04/10/25 21:40:38 ID:???
CGIの方を改造して左にメニューつける方が手っ取り早いと思う。

991 :Name_Not_Found:04/10/25 22:46:28 ID:???
そろそろ次スレの予感が・・

992 :Name_Not_Found:04/10/25 23:51:37 ID:???
すみません、助けてください。
↓こんなかんじのページを作りたいとき、どうしたらテーブルレイアウトでなくCSSで実現できますか。
ttp://49uper.com:8080/html/img-s/18562.jpg
ベタ塗り部分も基本的に画像ということにしてください。
全体を中央揃えにしてコンテンツ部分の幅は固定で、おまけにシャドウの画像付きで…と
今まで、簡単なレイアウトしたことが無かったのでもうお手上げです。
神様タスケテ…。


993 :Name_Not_Found:04/10/26 00:11:09 ID:???
>>992
神様はここに書き込まなくても助けてくれますよ。

994 :Name_Not_Found:04/10/26 00:11:36 ID:???
>>992
とりあえずQ3で段組して、Q2でセンタリングして…。
全体が幅固定ならその幅に合わせて作った影と横縞だけの
背景画像を真ん中にrepeat-yするとか

995 :div class="NullPo":04/10/26 00:26:12 ID:???
classをつけようとするたび命名に参るね。
ガンダムの登場人物シリーズも使い尽くしたし
娘では20個くらいしかできないし。悩みの種。

996 :992:04/10/26 00:43:24 ID:???
>>994
あう。・゚・(ノД`)・゚・。ありがとうございます。
やっぱり、テーブルを使用せずにレイアウトってのはムリなんですかねぇ。

大きく分けて以下のようにして見たんですが、キレイにいかなくて
body…縞模様BG
 div#all…シャドウBGとコンテンツ
  div#header
  div#menu
  div#main
  div#footer

997 :Name_Not_Found:04/10/26 00:45:53 ID:???
>>996
普通に出来たよ?
widthで絶対単位にて
がんじがらめだけど

998 :Name_Not_Found:04/10/26 00:56:29 ID:???
>>995
> ガンダムの登場人物シリーズも使い尽くした

ワロタ
マネしてもいいですか?

999 :992:04/10/26 00:57:52 ID:???
>>997
どうかHTMLとCSSをめぐんでください…

1000 :Name_Not_Found:04/10/26 00:58:20 ID:???
>>996
テーブルを使わなくても可能。
分け方が大雑把すぎる。>>6を見て頑張ってみ。




1001 :1001:Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。

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

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