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

このエントリーをはてなブックマークに追加
1Name_Not_Found
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
2Name_Not_Found:04/10/26 01:13:29 ID:pPwGeof2
【過去ログ】
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/
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
3Name_Not_Found:04/10/26 01:14:31 ID:pPwGeof2
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
【前スレッド】
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/l50
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第4版
 http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
 http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
 http://pc5.2ch.net/test/read.cgi/hp/1097724119/l50
【仕様書】
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/
4Name_Not_Found:04/10/26 01:14:58 ID:pPwGeof2
【解説など】
・ごく簡単な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/
5Name_Not_Found:04/10/26 01:15:21 ID:pPwGeof2
【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
6Name_Not_Found:04/10/26 01:15:51 ID:pPwGeof2
【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
7Name_Not_Found:04/10/26 01:27:28 ID:pPwGeof2
【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
8Name_Not_Found:04/10/26 01:29:53 ID:???
以上です。リンクの変更とか行ってきます。
9Name_Not_Found:04/10/26 01:32:07 ID:???
ごくろう様です。
10Name_Not_Found:04/10/26 05:09:04 ID:???
おつかれさまです。
11誰か助けて下さい:04/10/26 05:54:13 ID:ow3IQg3w
floatで左右にレイアウトを分けたんですが、FireFox(v.3)で背景の白い部分がきえてしまいます。
IE6とOPERA(v.7.54)では問題ないようなのですが。
↓にupしました。
http://www15.ocn.ne.jp/~butter/
どうすれば背景が下まで行くんでしょうか。
12Name_Not_Found:04/10/26 05:56:31 ID:???
>>11
右側のグリーンのカレンダみたいなのがあるブロックの後で、
何かしらの要素でclearしてあげればOK。
1312:04/10/26 05:58:07 ID:???
あ、場当たり的な対処だけだとアレなんで、テンプレの
浮動要素の高さも含める方法の所を読んでおくといいです。
14Name_Not_Found:04/10/26 08:42:53 ID:???
>>1
今更だけど乙。
15Name_Not_Found:04/10/26 09:59:32 ID:???
おなじく 乙
16Name_Not_Found:04/10/26 10:16:50 ID:???
お疲れ、ってだけでは能がないので……。
>>6
>Q4: なんかフロートの表示が崩れるみたいなんですけど? †

矢印がよけい。まとめサイトからのコピー&ペーストの際に紛れ込んだか。
次スレッドから削るべし。
17Name_Not_Found:04/10/26 10:42:10 ID:bSdL/mIv
ブラウザ振り分けについて質問です。
CSSによるサイト構築を考えているのですが
企業サイトにおいて対応させるべきブラウザとOSは何があげられますか?

IE5
IE6
NN6

ぐらいでいい?
18Name_Not_Found:04/10/26 11:45:24 ID:???
>>17
企業サイトなら、すべてのUAに対応すべきです。
CSSオフでも閲読に支障の無いHTMLを書いて下さい。
(だいたいいまどきNN6って……7.1が出てFireFoxその他もあるのに)
19Name_Not_Found:04/10/26 11:54:43 ID:???
>>18
HTMLでも問題なくという話だけれども
CSSのメリットはソースの軽量化もあるよね。

たとえば
<font size="3" color="red">
とかをスタイルシートで
<div class="f1">
こうやって簡素化する。

でもHTMLのみで表示に問題ないようにするということは
<font size="3" color="red" class="f1">
と余計に書かないといけないということですか?
またはHTML専用のページに飛ばすとか?うへー
20Name_Not_Found:04/10/26 12:02:02 ID:???
>>19
スタイルが全くないスッピンの表示になったときに、
表示されているものが何の要素なのか(UAが)わかるように書きなさいよ、つーこと。
見た目の話じゃないよ。
21Name_Not_Found:04/10/26 12:48:12 ID:HxavIiQd
<h2 id="menu">メニュー</h2>
↑のテキストを文字列からバナー画像にしたい場合
#menu{
display:none;
background:url("menulogo.gif");
} とすると非表示になってしまいます。
これをなおすにはどうすれば良いですか?
22Name_Not_Found:04/10/26 12:53:47 ID:???
>>21
display:none ってのは要素がないような状態にするもんだから、
画像とか指定しても見えなくなるのは当然です。

<h2 id="menu"><img src="menulogo.gif" alt="メニュー"></h2>
じゃダメなのかな。
23Name_Not_Found:04/10/26 12:59:45 ID:HxavIiQd
>>22
文字を消してその領域に背景画像を表示させたいのです。
24Name_Not_Found:04/10/26 13:11:04 ID:???
>21
・span で囲んで h2 span { display: none; }
・h2 { text-indent: -1000px; }
どちらも好きではないので自分ではやらないが
25Name_Not_Found:04/10/26 13:26:00 ID:???
>>21
h2{
text-indent: -000px;
background-image: url(/foo/var/etc.gif);
}

000には文字を隠すのに十分な数値を。
26Name_Not_Found:04/10/26 13:49:49 ID:???
>>24
この場合は h2 span { visibility:hidden; } だな。
27& ◆yb.t2ihChY :04/10/26 14:40:13 ID:ow3IQg3w
>>12
遅くなりましたが、ありがとうございました。
ちゃんと表示されました。感謝!!
28Name_Not_Found:04/10/26 14:45:50 ID:???
>>21
#menu{
color:white; /* background-colorと同色にする */
background-image:url("menulogo.gif");
}
29Name_Not_Found:04/10/26 14:48:32 ID:???
>>28 きまってますね
30Name_Not_Found:04/10/26 14:50:19 ID:???
>>28
晒しあげ
31Name_Not_Found:04/10/26 15:12:25 ID:???
あ、そっか。白ヌキになるわな。ゴメン。
32Name_Not_Found:04/10/26 15:51:28 ID:???
画像が表示されない環境は?
33Name_Not_Found:04/10/26 16:53:14 ID:ljNoBuaU
BLOGのデザインカスタマイズで、スタイルシートに手を加えています。

body{
background-color :#FFFFFF;
background-image :url("http://******");
background-repeat:no-repeat;
background-attachment:fixed;
}

で背景を固定したところ、今まで画面中央だったBLOG本体まで
左上固定になってしまいました。
スタイルシート全文は↓のようになってます。
http://www.uploda.org/file/uporg13580.txt
どうしたら背景だけ左上にできますか?
34Name_Not_Found:04/10/26 17:43:17 ID:???
>>33
CSSだけ見せられてもなんとも。
bodyに「text-align:center;」って入れたらどうなん。
3533:04/10/26 17:48:48 ID:???
>>34
URL晒すのはちょっと怖くて…
でも、その方法でできました!流石!
ありがとうございましたヽ(´ー`)ノ
36Name_Not_Found:04/10/26 18:01:11 ID:???
>>34
>>5も読まずに回答するな、ヴォケ
37Name_Not_Found:04/10/26 18:11:09 ID:???
>>36
私が>>5をよく理解できなかったせいですので…済みませんでした。
38Name_Not_Found:04/10/27 01:27:30 ID:???
サイトを作っていて、サイトの文の行間を空けたいと思って、
ホームページビルダーで以下のように設定したんですが、
プレビューやネット上では行間が0%で表示されてしまいます。
どうすればいいのでしょうか?
よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<style type="text/css">
<!--
BODY { line-height: 150% }
-->
</style>
</HEAD>
39Name_Not_Found:04/10/27 01:36:50 ID:???
>38 </head>のあとは?
それから、プレビューを使うのはやめた方がよい。あてにならないから。
4038:04/10/27 02:54:33 ID:???
>>39

レスありがとうございます。
</head>のあとはこんな感じです。
実際にFC2にアップロードして見ても、行間が0になってしまいます。
他のサイトを見ると、行間がちゃんと開いてますし、
他のサイトをホームページビルダーのプレビューで見ると行間が開いてます。
前に、スタイルシートを使おうとした時も、
行間だけ設定通りに表示されずに、0になってしまいました。。

<BODY bgcolor="#ffffe1"><!--shinobi1-->
<script src="http://j5.shinobi.jp/ufo/0429"></script>
<noscript><a href="http://x5.shinobi.jp/bin/gg?0429" target="_blank">
<img src="http://x5.shinobi.jp/bin/ll?0429" border=0></a><br>
<a style="font-size:80%" href="http://www.shinobi.jp/" target="_blank">無料ホームページ</a></noscript>
<!--shinobi2-->
<CENTER><TABLE border="0" cellpadding="10" width="760"><TBODY><TR> <TD align="left">
<P><FONT size="7"></FONT></P></P></TD></TR></TBODY></TABLE></CENTER>
<P><BR></P><CENTER><TABLE border="1" width="760" cellpadding="10"><TBODY>
<TR></TR></TBODY></TABLE></CENTER><P></P></BODY></HTML>
41Name_Not_Found:04/10/27 03:02:39 ID:???
>>40
それで見れたけどねぇ・・・
なんでだろね?

微妙に</p>とか多いのはコピペミス?
42Name_Not_Found:04/10/27 03:21:57 ID:???
鯖のせい?同じ人だったらゴメソw

レンタルサーバーFC2WEB系について語ろう5
http://pc5.2ch.net/test/read.cgi/hosting/1088365679/332

332 名前:名無しさん@お腹いっぱい。[] 投稿日:04/10/05(火) 02:06:12
何でか知らんがUPしたhtmlファイルの、
<P style="LINE-HEIGHT : 160%">
この記述が無視されて行間が詰まって表示されてる。
同じファイルを別の鯖にUPしたら行間は広がって表示されるのに…

もしかして同じ<HEAD>内のロボット避けのタグも無効化されてるのかな?
同じような人いないかな?
43Name_Not_Found:04/10/27 09:38:30 ID:???
td { line-height: 150% } にしたらどうだい。
44Name_Not_Found:04/10/27 11:27:46 ID:p2mzDNbn
ボックスを2列にしました。
ボックス左には背景に色を。
ボックス右には背景無し。
んで左のボックスの内容はちょっぴり。
右のボックスの内容は長文。
こうなると右のボックスが縦長になるので
左側も(内容が少なくても)それにあわせて縦長になってもらうために
heightを100%にしました。

これでmozilaなどで見ると問題は無いのですが
IEでは内容のところでボックスが切れてしまいます。

IEでも左側のボックスを縦長にしたいのですがどうすればよいですか?
45Name_Not_Found:04/10/27 12:05:46 ID:???
height: 100% っておかしくないか?
4645:04/10/27 12:13:36 ID:???
<div class=te>
<div class=te1></div>
<div class=te2></div>
</div>
これでいいんじゃない?説明よくわからんが

.te
{
width: 400;
background: #ffffff
}
.te1
{
width: 200;
float: right;
}
.te2
{
width: 200;
float: left;
background: #eeeeee
}
47Name_Not_Found:04/10/27 12:17:36 ID:???
>>45
わかんねえならわかんねえっていっちまいなw
48Name_Not_Found:04/10/27 12:19:53 ID:???
>>46
こいつ馬鹿www
左右のボックスを同じ高さにしたいっていう質問なのに見当違いもいいとこだな。

アフォはおとなしく昼飯食いに行って来い。そして午後の仕事をガンガルんだ!
4945:04/10/27 12:24:33 ID:???
>>48
>>44の質問に対して
てーめーならどーすんだ?
5044:04/10/27 12:26:32 ID:p2mzDNbn
ε≡Ξ≡Ξ≡Ξ≡Ξ≡ヽ(;゚〇゚)ノ あわあわ
51Name_Not_Found:04/10/27 13:00:12 ID:???
>>49
テーブル。
これ以外に左右を常に自動的に同じ高さにする方法はない。
52Name_Not_Found:04/10/27 13:18:32 ID:???
>>46
おしい。
div.te の background-image にそれっぽく見える背景画像をつくって
repeat-y とかにして置く、ってのがよくある手の一つです。
53Name_Not_Found:04/10/27 13:42:51 ID:???
>>51
やっぱテーブルレイアウトが最強なのかね・・・
まぁ満足な実装もされてないCSSをむりくり薦めてもしょうがないか。

54Name_Not_Found:04/10/27 13:55:12 ID:jvjNS+K5
試してないけど、

<html><head><style type="tsxt/css">
HTML , BODY {margin:none;padding:none;}
BODY {background-color:black;100%;}
DIV#circumference {width:100%; background-color:red;}/*背景色を、左側で表示させる物にする*/
DIV#menu {width:25%; background-color:transparent; float:left;}/*左側に表示する。とりあえずメニューにしとく*/
DIV#main {width:75%; background-color:white; clear:left;}/*右側に表示する。とりあえずメインにしとく*/
</style><body>
<div id="circumference">
<div id="menu">・メニュー〜</div>
<div id="main">内容</div>
</div>
</body></html>

これでどうよ。
55Name_Not_Found:04/10/27 13:55:52 ID:???
新スレだからsage忘れた。スマソ
56Name_Not_Found:04/10/27 14:04:26 ID:???
>>44
これって、俺が前スレで質問して解決した問題じゃん。
"ボックス左" と "ボックス右" の親要素になる"ボックス親"を作って、
"ボックス親" の背景色を "ボックス左" と同じにすると
左右のボックスが同じ高さに見える。

エッヘン(・∀・)


あと以下も参考にしました。
>>6 のFAQの
>これに当て嵌まらなかったら「浮動要素の高さも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

57Name_Not_Found:04/10/27 14:17:32 ID:???
>>54
アホ?
適当な事を書くなよ。
58Name_Not_Found:04/10/27 14:20:29 ID:???
しつこいなお前ら。
テーブルでやれば見栄えではなく、本当に左右同じ高さにできるっての。
逆にCSSはショボイから(UAのせいだけど)、その程度のこともできないわけ。

そんなしょぼいCSSにこだわってるお前らって滑稽。
柔軟にいけよ。リアルでは成果主義だから、左右の高さを同じにするのに5分以上かけてたら
役立たず扱いされるぞ。
59Name_Not_Found:04/10/27 14:36:12 ID:???
>>57
池沼? 無能?
適当だというなら、どこが間違ってるかぐらい指摘しろよ。
6044:04/10/27 14:45:13 ID:???
皆様のご意見、大変参考になりますた。

>>56
ううう
左のボックスにはボーダーの色が塗ってあるのですよ・・・
だから親ボックスにいろ塗るだけではだめなんですよ・・・
このままだと「テーブル」か「親ボックスに背景の絵」しかないですね・・・
でもテーブルだと長さを指定しなければだめですよね・・・
しかもブラウザごとに合ったり合わなかったりするようだし・・・
61Name_Not_Found:04/10/27 14:48:05 ID:???
>>60
背景画像ではなんでいかんの?
62Name_Not_Found:04/10/27 14:55:28 ID:???
>>60
ごめんごめん、ちょっと間違えてました。

"ボックス親" の背景色を "ボックス左" と同じにすると

"ボックス左" の背景色を "transparent" にすると、
ボックス親のボーダーが透けて見えるハズ〜。
6356:04/10/27 15:02:06 ID:???
あ、>>62は56っす。

ところで今でも800×600の解像度をサポートするべきでしょうか?
中小企業な自社サイト作ってます。
64Name_Not_Found:04/10/27 15:34:51 ID:???
>>63
Y
理想は600〜
65Name_Not_Found:04/10/27 15:39:16 ID:???
>>63
解像度に頼らないサイトを作ってください。

横幅800固定やめろ。ブラウザ最大化するのウザイ。
http://pc5.2ch.net/test/read.cgi/hp/1031302476/
6656:04/10/27 16:00:34 ID:???
>>65
>解像度に頼らないサイトを作ってください。

そう思って色々がんばってるんですが、なかなか難しくて…。
幅をピクセル指定すると楽な様な気がして来たんです。
67Name_Not_Found:04/10/27 16:05:42 ID:???
>>66
色々がんばりすぎ。原点に戻ることも大切。
6844:04/10/27 16:16:15 ID:???
>>61
親ボックスが増えてしまうから。
気分的なものです・・・。

親ボックス(左ボックスの絵を背景に)
左ボックス(透明)右ボックス(縦長)

としたらmozilaじゃ背景がでてこなあ〜い
うわああん!

もうダメポ・・・
6945:04/10/27 17:11:55 ID:???
時に妥協も必要である
            by45
70Name_Not_Found:04/10/27 17:34:24 ID:???
>>59
黙って試せよアフォ

もう一度いう。
お前アホ?
適当な事書くなよ。
71Name_Not_Found:04/10/27 17:37:36 ID:???
>>60
>でもテーブルだと長さを指定しなければだめですよね・・・
そんなことないよ。高さについては指定なしで多いほうの内容量になるから問題ない。
幅は普通に相対指定すればよい。

っていうか、大枠はテーブル、細かいとこはCSSってのは基本だよ。
7244:04/10/27 17:41:05 ID:???
mozilaはどうやらボックスの階層が何重にもなると
下層のボックスの背景が写らなくなるようです。
よって一番上のボックスに背景画像を設定したところ
mozilaでも表示されるようになりました。

最上層のボックス(ここに画像を設定)
間にいろいろ
親ボックス(ここに画像を設定してもだめだった)
左ボックス(透明)右ボックス(縦長)

ご協力ありがとうございました。
73Name_Not_Found:04/10/27 17:45:50 ID:???
>>65
>解像度に頼らないサイトを作ってください。

ハァ?webの根本を否定するつもりですか?

ところでさぁ。なんで横幅固定を嫌ってるのお前。まぁ頭悪いお前のことだから
どうせしょうもない理由なんだろうけど。一応言ってみ。

横スクロールが嫌だとか言っちゃうわけ?
アプリのインターフェース問題を作者の問題とすりかえるなよ。
CSSの問題と一緒。文句を言う相手が違う。
74Name_Not_Found:04/10/27 17:50:46 ID:???
( ゚д゚)ポカーン
7544:04/10/27 17:52:58 ID:???
>>71
あ、左ボックス内にテーブルを入れることだと勘違いしていました。

大枠はテーブル・・・
やはりそういうふうに作ったほうが苦労は少なそうです・・・

ついウェブデザイニング11月号を読んで
作ってみたくなってしまったのです・・・
76Name_Not_Found:04/10/27 18:04:45 ID:???
<style type="text/css">
<!--
.menu dl{/*メニュー一つの枠の設定*/
margin: 0.7em 0.7em 0 0.7em;
border: solid 1px #CACACD;/*枠色*/
float: left;
width: 9.4em;/*幅。全体の幅に対応して設定してください*/
overflow: hidden;
}
.menu dt a{/*メニュー内リンク部分の設定*/
font-size: 8pt;/*文字サイズ*/
font-weight: bold;
font-family: Arial,sans-serif;
letter-spacing: 0.1em;
padding: 0.1em 0.4em 0.1em 0.4em;
margin: 0.2em 0.2em 0.3em 0.2em;
border-bottom: solid 2px #BABAD0;/*下線の太さ・色*/
display: block;
width: 100%;
}
.menu dt a:hover{/*マウスを乗せたときの設定*/
background-color: #F2F2F9;
border-bottom: solid 2px #7A7ADE;
}
.menu dd{/*メニュー紹介文部分の設定*/
font-size: 9pt;/*文字サイズ*/
background-color: #F8F8F9;/*背景色*/
padding: 0.3em;
margin: 0.2em 0.25em;
}
-->
</style>
77Name_Not_Found:04/10/27 18:07:28 ID:???
<div class="menu">
<dl>
<dt><a href="#">Links</a></dt>
<dd>Sample Text Sample Text Sample Text Sample TextSample Text Sample Text Sample Text Sample TextSample Text Sample Text Sample Text Sample TextSample Text Sample Text Sample Text Sample Text </dd>
</dl>
</div>


これだとLinksってところにマウスを置けば色を変わります
Sample Text ってところに置いたら、Linksのバックの色を変えるようにするにはどうすればいいのでしょうか?
7838:04/10/27 18:10:48 ID:???
みなさんレスありがとうございます。
そして、レスが遅れてすいません。

>>41さん
</p>が多いのは、長くならないように文章を省略して書き込んだからです。

>>42さん
別人です。
同じ症状で悩んでる人がいるんですね。。

>>43さん
さっそく試してみたんですが、行間が空きました!
でも、表の中の行間が空かずに0になったまんまです。。

スタイルシートのことがまだ全然分からないので、
ちょっと勉強してきます!

表の中も、全部行間を150%にする方法が分かる方がいたら教えてください。
よろしくお願いします。

79Name_Not_Found:04/10/27 18:46:40 ID:???
>78 tableは「表」だけれど、
中身が表でないのであれば全部<p>にして、
p { line-height: 1.5 }
にすればあっさり解決すると思うよ。

CSSがどうとかを抜きにしても、
tableにするとソースが煩雑になって、どうしても見にくくなるから。
80Name_Not_Found:04/10/27 19:06:21 ID:???
>>79
>.p { line-height: 1.5 }
このプロパティは単位いらないんですか?
8138:04/10/27 19:24:03 ID:???
>>79
レスありがとうございます〜。
pにしてみたのですが解決しませんでした。。

FC2に問題があるような気が・・・

表のなかの項目に「▲」を右に向けた画像をつけずに、
「・」をつけると、行間が150%になりました。
なぜ画像をつけると行間が空かなくなるのでしょうか?

<IMG src="file:///C:/My Documents/v5_lis048.gif" width="10" height="10" border="0" align="middle"> あああああ<BR>
<IMG src="file:///C:/My Documents/v5_lis048.gif" width="10" height="10" border="0" align="middle"> いいいいい<BR>

だと行間が空かなくて、

・あああああ<BR>
・いいいいい<BR>

だと行間が開くようになりました。
82こわいおじさん:04/10/27 19:56:12 ID:???
なんでローカルなんよ?
83Name_Not_Found:04/10/27 19:56:27 ID:???
ほんとこのスレの回答者って馬鹿ばっか

「CSSのことなら俺に任せろ!」とかツレにも言ってるのかね
アホくさ

まあ暇だし、こいつらがいかにしょっぱいかを実証しよう

質問
84Name_Not_Found:04/10/27 19:59:15 ID:???
質問者が回答者を兼ねているからだよ。
85Name_Not_Found:04/10/27 20:10:06 ID:???
>>80
それ、相対値で書いてるので、大丈夫。
当然%とかemとか単位付けて書くのも、仕様上は大丈夫。
font-weight とか、z-index とかも単位なしじゃん。
そういうプロパティもあるってことで。

で、line-height は相対値以外の書き方をするとバグっちゃうクラがあるので
ので、相対値で書くのがオススメされています。
86Name_Not_Found:04/10/27 20:13:29 ID:???
>>85
バグら無いように省略すると em と同じになるときちんと説明しろ。
87Name_Not_Found:04/10/28 04:12:57 ID:???
>>86
お前がすればいいだろ
仕事でもないのに突っ込んでくるなアホ
88Name_Not_Found:04/10/28 06:20:55 ID:???

|
-----------------------------------
| ○月○日○曜日
-----------------------------------
|

border要素を使って↑のような事って出来ますか?
8988:04/10/28 06:22:18 ID:???
ズレた・・・逝ってくる

  |
-----------------------------------
  | ○月○日○曜日
-----------------------------------
  |

こーゆー事です。
90Name_Not_Found:04/10/28 09:06:13 ID:???
>>88-89
どれがボーダーのつもりだかわかりません。
自分で試したならそのソースを出したまへ。
だいたいborderは「要素」ではないし。
9188:04/10/28 11:59:30 ID:???
>90
線全てボーダーでって意味です・・・。
要するにボーダーをクロスさせれますか?って事です。
自分で試しようがないんで・・・。
92Name_Not_Found:04/10/28 13:29:43 ID:???
>>91
なんで試せないのかわからんけど。

今CSS勉強中なので綺麗なソースじゃないけど
できたよ。

<html>
<STYLE TYPE="text/css">
<!--
.left {
position:absolute;
left:1em;
border-right:2px solid #666666;
width:5em;
background-color:silver;
top:0%;
height:600px;
}
93Name_Not_Found:04/10/28 13:30:09 ID:???
.date {
position:absolute;
top:10em;
left:1em;
border-top:2px dotted #000000;
border-bottom:2px dotted #000000;
padding-left:6em;
width:800px;
}
-->
</STYLE>
<body>

<div CLASS="left">
</div>

<div CLASS="date">
2004年10月28日
</div>

</body>
</html>
94Name_Not_Found:04/10/28 18:07:46 ID:???
FAQ@CSSには載ってなかったので質問させていただきます
HTMLではmargin-left: auto;margin-right: auto;で中央寄せができたんですが、
XHTMLにしたところ、これでは中央寄せされなくなりました
これを解決する方法はあるのでしょうか?それともCSS2では不可能なんでしょうか?
9594:04/10/28 18:10:17 ID:???
すみません、書きそびれたことが・・・
XHTML1.1です
96Name_Not_Found:04/10/28 18:45:23 ID:???
下のコードですが、Opera7のみ認識せず、デフォルト位置に表示されます。
どうすれば解決できますか?
よろしくお願いします。

<div id = "hoge">
中身
<div>

#hoge {position:relative;top:-30px;}

9796:04/10/28 18:48:05 ID:???
元コードは終了タグ間違ってません。スマソ
98Name_Not_Found:04/10/28 19:01:46 ID:???
>94
与えられている情報が全く足りないので当てずっぽうだが

XML宣言を入れているため、IEが互換モードでレンダリングしているに一票
9994:04/10/28 19:36:36 ID:???
>>98
回答ありがとうございます
確かにXML宣言は入れてました
XML宣言はいれないといけないものと思ってましたが、もしかしていれない方がいいですか?

え〜と、実際のCSSの内容は
body{
background-color: #fff;
font-size: 1em;
line-height: 1.2;
margin-left: auto;
margin-right: auto;
}
です。
100Name_Not_Found:04/10/28 20:28:12 ID:???
>>99
MSIEはxml宣言を考慮せずに、
一行目にあるドキュメントタイプ宣言を標準/互換モードのスイッチとする
という仕様にしてしまったため、xml宣言をすると互換モードになってしまう
わけです。

ユニコードで記述してxml宣言は省略する、というのが回避法のようです。
and that sucks!
101100:04/10/28 20:29:32 ID:???
もしくは。
真ん中寄せくらいなら、

親{
text-align: center;
}

子{
width: 適宜;
margin-right: auto;
margin-left: auto;
text-align: left;
}

とする方法もあります。
102Name_Not_Found:04/10/28 21:03:10 ID:???
optgroupで表示されるテキストはlabel属性の中のものなので
CSSからフォントスタイルを変更することは無理?

IE6でテストしてみたが、
IE6で対応している範囲のCSSでは無理なのかな?
10394:04/10/28 21:15:31 ID:???
>>99
ありがとうございました
MSIEの仕様だったんですね
詳しいやり方まで説明してもらって・・・
おかげで解決することができました
104Name_Not_Found:04/10/28 22:49:22 ID:OpgtEuN2
Firefoxのサイトのトップページって
なんで角丸になるんでしょう?

ソースを見てもさっぱりわかりません。
105Name_Not_Found:04/10/28 23:06:31 ID:???
>>96-97 情報不足。
10651:04/10/28 23:39:15 ID:???
>>104
ttp://www.mozilla-japan.org/css/cavendish/template.css
background(-image)の指定を全部見れ。
#headerで左下、h1で左上、formで右上、ulで左下の角をと分担してるわけだ。
107104:04/10/28 23:41:49 ID:???
>>106
うっほー、なるほどっ!!
ものすごく良くわかりました。勉強になりました、サンクスです。
108106:04/10/28 23:44:52 ID:???
おっと、名前欄はこのスレのじゃないぜ
109Name_Not_Found:04/10/29 04:42:06 ID:???
複数のフレームに対して
同じひとつの背景を使用って出来るのでしょうか。
110Name_Not_Found:04/10/29 04:49:36 ID:???
background-position
111Name_Not_Found:04/10/29 13:00:04 ID:???
>>109
普通に外部CSSを使って、両方のフレームに適用すればいいんじゃない?
112Name_Not_Found:04/10/29 15:17:34 ID:???
お知恵を貸してください。

┏━━━━━━━━━┯━━━━━━━┓
┃  XXXXXX    └───────┨
┠─────────────────┨
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
こういうレイアウトにしたいのですが、
私の知識では右上の要素を右端一杯にできません。
。・゚・(ノД`)・゚・。
どなたかご存知ありませんか・・・?

ちなみに、現段階では
左のXXXXの部分に被らないように
右上はposition:absoluteでtopとleftを固定しています。
ソースはこんな感じです↓

.top /** ―より上全体の部分 **/
{ position:absolute;
top:0;
left:0;
width:100%; }

.left /** XXの部分 **/
{ font-weight:bold;
text-align:center;
line-height:2em;
width:20em; }
113Name_Not_Found:04/10/29 15:23:46 ID:???
.right /** 問題の右上の□の部分 **/
{ line-height:1.5em;
position:absolute;
top:0;
left:30em; }

<div CLASS="top">
<div CLASS="left">
XXXXXX
</div>
<div CLASS="right">
右上の□
</div>
</div>
114Name_Not_Found:04/10/29 15:25:49 ID:???
>>112
ごめんなさいずれてますな・・・

┏━━━━━━━┯━━━━━━┓
┃           └──────┨
┠──────────────┨

修正版。
115Name_Not_Found:04/10/29 15:42:26 ID:???
left:30em→right:0px
classが大文字だったり、DIV病だったり、引っかかるクラス名とか修正の余地は他にも色々有るけどね
116112:04/10/29 15:51:43 ID:???
>>115
できました、ありがとうございます!!!
rightを指定すれば解像度によっては横スクロールが出てしまうかと思っていました。
(左上が基点だと思っていました)

class名はここで分かり易いかな、と思って
実際のソースとは違いますが
ご指摘dクスです。
<div>使いすぎですかね?
精進します(`・ω・´) シャキーン
117Name_Not_Found:04/10/29 16:42:25 ID:???
俺ならfloatとmargin-leftでやるな。position、特にrightはバグもあるし。>>116
118109:04/10/29 17:48:24 ID:???
>>111
回答ありがとうございます。
でも、それだとフレーム同士の間で、背景がずれるんです。
例えば、一枚絵の上にフレームを展開してるように見せたいんですが。
なにか方法はないでしょうか。
最初の質問が説明不足ですみませんでした。
119Name_Not_Found:04/10/29 18:50:02 ID:???
背景画像を指定した大きなdivをCSSによる疑似フレームで分割する。 >>118
120Name_Not_Found:04/10/29 21:10:21 ID:???
.a{
margin:0;
padding:0;
border:0;
}

<table class="a">
<tr>
<td class="a">あ</td>
<td class="a">い</td>
</tr>
</table>

とやってみたのですが、セルとセルの間にスペースが出来てしまいます。
cssを使わず
<TABLE HEIGHT=150 BORDER=0 CELLPADDING=0 CELLSPACING=0>
ならスペースが出来ないのですが、解決策を教えてください。
お願いします。
121Name_Not_Found:04/10/29 21:32:50 ID:???
(゚Д゚)ハァ?
122Name_Not_Found:04/10/29 21:39:54 ID:???
解決策は >>4 あたりをどぞ。
123Name_Not_Found:04/10/29 21:44:51 ID:???
コラ!ぷすぅ=3
124112:04/10/29 22:10:59 ID:???
>>117
dクス。
leftとrightがIEでは共存できないらすぃので
floatでも試してみました。
同じく出来ましたです!

以前floatでひどく崩れたことがあったので
同じ事になったら嫌だなぁと思ってたんですが、
これでも大丈夫そうです。
ありがとうございました。
125120:04/10/29 22:12:09 ID:???
わからねえから聞いてんだろがヴォケ!!
答えられないなら黙ってろやカス共が!!
126Name_Not_Found:04/10/29 22:17:04 ID:???
偽者乙
127123:04/10/29 22:17:23 ID:???
>>125
答えたじゃーん(´・ω・`)
128120:04/10/29 22:42:50 ID:???
>>123
ありがとうございます。
コラプスで修正できました。
129120:04/10/29 22:50:12 ID:???
まぎらわしい書き方すんなヴォケ!!
答えがわかれば用はないんじゃカス共が!!
130Name_Not_Found:04/10/29 23:05:17 ID:HtkbG3gR
>>120
th,td{border:none:}でやってみ。
131Name_Not_Found:04/10/29 23:08:37 ID:???
これほど悲しい偽者を見た事が無い。
132120:04/10/29 23:43:34 ID:???
うん、悲しいの。お友達になつて!
133Name_Not_Found:04/10/29 23:58:15 ID:???
134Name_Not_Found:04/10/30 03:46:15 ID:???
っていうかコラプスは実装悪いから使えないよ。
マジでcellspacing="0"ってやりな。パディンはCSSでいけるで。
135Name_Not_Found:04/10/30 05:59:36 ID:???
>>3
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

下の個人訳の方、また無くなってない? Forbiddenになる。
その前は http://www.fan.gr.jp/~kaz/rec-css2/ にあったのが、なぜか消されたし。
136Name_Not_Found:04/10/30 17:31:56 ID:???
教えて欲しいのですが
ttp://cgi.2chan.net/k/src/1099124915377.png
写真の横に文字をつらつらと書くように
スタイルシートでデザインしたいんです。

写真の下に続くように書くことは出来たのですが
写真のところで折り返して表示させる事が出来ません。
なんとかなりませんか?
137名無し募集中。。。:04/10/30 18:03:04 ID:???
とりあえず>>6
138Name_Not_Found:04/10/30 18:27:37 ID:???
>>136
写真に{float:left}じゃダメですか?
139Name_Not_Found:04/10/30 18:51:22 ID:???
ダメでしょうね(・∀・)
よーく考えよー
140Name_Not_Found:04/10/30 20:00:29 ID:???
ダメっつーんなら、どうダメかわかるよう具体的に書いてくれないことには
137とか138みたいなことしか言えんですよ。
141Name_Not_Found:04/10/30 22:42:44 ID:???
ここで聞く内容なのかどうかわからないけれど、
floatや絶対配置などでのマルチカラムがどうも挙動が不安定です。
安定したマルチカラムデザインは、テーブルレイアウトしかないんでしょうか?

色々と中身もいじったり調整してみましたが、ちょっとブラウザのウィンドウを触ると
簡単に下に回りこんでしまいます。
防ぐ手ってありますか?
142Name_Not_Found:04/10/30 22:56:11 ID:???
>安定したマルチカラムデザインは、テーブルレイアウトしかないんでしょうか?

んなこたーない。

>色々と中身もいじったり調整してみましたが、ちょっとブラウザのウィンドウを触ると
>簡単に下に回りこんでしまいます。
>防ぐ手ってありますか?

float使わなけば問題なし。
float使わなくてもマルチカラムなレイアウトは出来る。
143Name_Not_Found:04/10/30 23:19:49 ID:agIMYrjV
<table border="2" cellpadding="8">
<tr>
<td>日付</td>
<td>2004.10.30</td>
</tr>
</table>

をCSSで記述するにはどうすればよいのでしょうか?
たぶん下記に値を入れれば良いと思うのですが・・・

table {border: ? ? ?;
border-collapse: separate;
border-spacing: ?;
}
th, td {padding: 8px;
border: ? ? ?;
}
144Name_Not_Found:04/10/31 00:06:19 ID:???
よく分からんけどこーゆーことがしたいの?

table {
border:2px solid #000;
border-collapse: separate;
}
th, td {
padding: 8px;
border:2px solid #000;
}

それとも

table { background-color:#000; padding-2px; }
th, td { background-color:#fff; padding: 8px;; }
145Name_Not_Found:04/10/31 00:42:18 ID:???
>>144
ありがとうございます。
要するに<table border="2" cellpadding="8">と
"全く同じ見栄え"になるようにCSSに記述したいのですが・・・
(少し影付きになる感じです)
テーブルが多い場合<table border="2" cellpadding="8">
のように記述すると、記述や修正が大変なのでCSSに
書きたいのです。不可能でしょうか?

146Name_Not_Found:04/10/31 00:43:08 ID:???
<H3>●●</H3> の●●の中のフォントを
太字にしない方法教えてください。
147Name_Not_Found:04/10/31 00:52:35 ID:???
>>145
ブラウザによって違うと思うけど、IEで見た感じに近い。
table { border: 2px outset; border-collapse: separate }
th, td { padding: 8px; border:1px inset }

>>146
font-weight: normal
148Name_Not_Found:04/10/31 01:10:56 ID:???
>>147
ありがとうございます。出来ました。
ブラウザによって見え方が違うとのことですが、
このような記述の仕方は好ましくないのでしょうか?
ともあれ、解決できて良かったです。
149Name_Not_Found:04/10/31 01:42:06 ID:???
>>147
146で質問したものですが、出来ました。
ありがとうございます。
150Name_Not_Found:04/10/31 03:40:26 ID:???
FAQを見た限りでは同種の質問がのっていないようなので質問させていただきます。
p { width:40%; float:left; clear:left; }
.migi { width:15%; float:right; }

<p>text</p> <p>text</p> <p>text</p> <p>text</p>
<ul class="migi">text</ul>

以上のような条件下でfire fox0.8とIE6.0の見え方が異なるのですが
IEでの見え方に統一する方法がありましたら教えてもらえませんか
151Name_Not_Found:04/10/31 04:50:47 ID:???
ソースのコピー防止のため、右クリでソース表示の時に、
文字バケのように設定する方法分かりますか?
最近、まるまるパクられてへこみました。


152Name_Not_Found:04/10/31 05:35:18 ID:???
>>151
スレ違い しかも不可能
153Name_Not_Found:04/10/31 07:58:15 ID:???
>>151
文字コードのことかなあ。
エディタで文字コードをシフトJISでなくEUCとかにして保存する。
ソース表示をメモ帳でする場合日本語が文字化けするから、厨房避けにはなるかも。
「文字コードを変える」ということを相手が知っていたら無意味だけど。
154Name_Not_Found:04/10/31 08:57:38 ID:???
>>150
> <ul class="migi">text</ul>
これはないだろ。<ul class="migi"><li>text</li></ul>のつもりか?

155Name_Not_Found:04/10/31 09:07:38 ID:???
>>150
FAQに無ければ、>>4を見て下さい。

『CSSバグ辞典スレッド』の要約
 先行するフロートの上方に後続のフロートが置かれる
 http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
 http://cssbug.at.infoseek.co.jp/detail/opera/b044.html
156Name_Not_Found:04/10/31 10:41:26 ID:???
>>151
ソースのコピーなんて、極論すればあなたの自意識過剰な場合がほとんど
こんな所でそんな質問している人のソースを盗みたいと考える人がどれだけいると思う?
157Name_Not_Found:04/10/31 11:20:31 ID:???
んだんだ。
158Name_Not_Found:04/10/31 12:21:04 ID:NMjnoG7F
作成環境:手書き
動作確認:windows IE6.0

cssを、htmlに
<style type="text/css"> 〜</style>
と書けば読み込んでくれるのですが、
<link rel="stylesheet" type="text/css" href="***.css" media="screen,print">
とすると、どういうわけか読み込んでくれません。
cssを読み込ませるには、すべてのhtmlファイルに、読み込むべきcssを
<style type="text/css"> 〜</style>として書かなければならないのでしょうか?

そしてもう一つ。
htmlに<style type="text/css"> 〜</style>と書いたとしても、どういうわけか
 background-image:url("http://*****.gif") no-repeat bottom right;
これを読み込んでくれないのです。(背景がない=白になる)
どうすれば背景を表示させることができるのでしょう?
教えて下さい。
159Name_Not_Found:04/10/31 12:34:57 ID:???
>>158
IEが外部シートを読み込まないはずがない。
URLか文字コードをミスってるんでしょ。よく確認しましたか?
160158:04/10/31 12:49:00 ID:???
>>159
何度も確認ましました_| ̄|○
オフラインで表示確認すると、ちゃんと背景出るのに…
背景も当然アップロードしてあります。
なーんーでーだー
161Name_Not_Found:04/10/31 12:50:03 ID:???
IE6で
url(none)ってやったら
/noneって言うリク出すからログに404出てしまう。。
文法間違ってないよね。
162Name_Not_Found:04/10/31 13:35:29 ID:???
>>160
指定したURLは相対アドレス?
それともhttp://ではじまるもの
file://だったりはしないね?
163Name_Not_Found:04/10/31 13:44:47 ID:???
localでは問題ないというのは、ファイル名の大文字小文字の問題かもしれんね。
って「オフライン」て書いてるけど、そういう意味じゃないのか?
164158:04/10/31 13:58:50 ID:???
>>160
相対アドレスですね。全て一つの階層から呼び出しています。

htmlファイルには…
 <link rel="stylesheet" type="text/css" href="test.css" media="screen,print">
test.cssには…
 @import "test1.css";
test1.cssには、読み込むcss(p{color:#ffffff}等)を書いています。

ファイル名は全て半角小文字で打ってます。
165Name_Not_Found:04/10/31 14:37:26 ID:???
>>164
@import "test1.css";



@import url("test1.css") print, screen;

に替えてみるといいかもしれない。

# それ以前に、サーバは拡張子「css」を許可してるよね?
166Name_Not_Found:04/10/31 17:36:27 ID:???
リンクを管理する際に、target="_blank"などというのを個別に指定するのではなく
CSSで一括で指定したいのですが、どのようにすればよろしいのでしょうか?
ぐぐっても関連の情報が出ないので・・・
167Name_Not_Found:04/10/31 17:37:23 ID:???
>>151
CSSを読ませない方法なら。
CSSを外部にして、それをhtaccessすればもしかしたら出来る?
HTML自体CSS読み込めなくなる事はないと思うんだけど、未確認。

最近厨太のサイトのCSSが読めないんだが、
もしかしてhtaccess弾きしてるのか、と思う今日この頃。
もしくはブラウザの調子が悪いのか。
168Name_Not_Found:04/10/31 17:44:15 ID:???
>>167
俺もダメだ<ボダ
多分弾いてるな。
169Name_Not_Found:04/10/31 18:07:28 ID:???
>>166
そんな迷惑なことするのはやめてほしいのだが…
結論からいうと無理。
170Name_Not_Found:04/11/01 03:45:45 ID:???
>>166
DTD的には class 名割り当てて JS で自動処理するようにするのが良い
Strict 的にはその class 名が論理的であるとベスト
171Name_Not_Found:04/11/01 11:03:38 ID:???
target属性が非推奨なのは、CSSであれJSであれそんな設定はすべきでないってことなんだが。
以前は、FAQに入ってなかったっけ?
172Name_Not_Found:04/11/01 12:16:07 ID:???
ユーザーが要望していて仕方なく付けているそういうJSを付けた俺がいる……
173Name_Not_Found:04/11/01 12:21:31 ID:???
>>172
す、凄いユーザだな……
174Name_Not_Found:04/11/01 15:33:12 ID:???
ウールー、トーラのヒキガエル
175Name_Not_Found:04/11/01 16:29:42 ID:2uuN6tQ5
すいません最近のHP制作ってCSSで作るのが当たり前なんでしょうか?
HTMLはなくなるんでしょうか?
176Name_Not_Found:04/11/01 16:30:36 ID:2uuN6tQ5
とりあえず、HTMLとCSSの両方入門書は買ったのですが
177Name_Not_Found:04/11/01 16:42:55 ID:???
HTMLとCSSは全く別物なんだがなぁ・・・
178Name_Not_Found:04/11/01 17:38:35 ID:???
>175
HTMLは構造を表すためのもの。
HTMLで色や背景などのデザインまでカバーするようになってきたので、それをCSSとして独立させHTMLと分離させるようになった。
つまり、HTMLがあってこそのCSSで、CSSだけでは意味がない。
179Name_Not_Found:04/11/01 17:41:18 ID:2uuN6tQ5
>>178
サンクスです。ホームページビルターはCSS入っているんですかね?
180Name_Not_Found:04/11/01 17:53:08 ID:???
>>179
ちょこっとだけ。
完全じゃない。
181Name_Not_Found:04/11/01 18:35:22 ID:???
>>175 下手な入門書を買ふより、無料の>>4を讀みたまへ。
182Name_Not_Found:04/11/01 20:27:02 ID:???
CSSは、まず何ができるか理解して、サンプルを見ながら使い方を覚えるといい鴨。
183Name_Not_Found:04/11/01 20:28:39 ID:???
CSSのテンプレートみたいなのが置いてあるサイトってありますか?
184Name_Not_Found:04/11/01 20:31:21 ID:???
>>183 腐るほど。
185Name_Not_Found:04/11/01 21:15:01 ID:???
ttp://voix.s16.xrea.com/

このサイトの右側の画像の境界線のような影は
どのように醸し出せば良いのでしょうか。
もしよろしければ教えてください。
186185:04/11/01 21:22:17 ID:JwTrRYhD
>185 左側の画像でした。失礼しました。
187Name_Not_Found:04/11/01 21:30:06 ID:???
醸し出すのはCSSじゃきついかもな〜w

ttp://voix.s16.xrea.com/img/green/shadow.png
188Name_Not_Found:04/11/01 21:34:51 ID:JwTrRYhD
>187

なるほどー ではcssで画像を縦に連続で並べるとよいですか。
ありがとうございました。
189Name_Not_Found:04/11/02 00:52:52 ID:jdc1egFI
作成環境:手書き、XHTML1.0 Transitional
動作確認:WinIE6.0、WinNN7.1、MacIE5.1&5.2、MacNN7.2

サイトの左メニュー用に以下のようなリストを作ったのですが、
WinIE6.0とWinNN7.1、MacNN7.2で確認した際に
「test1.gif」と「test2.gif」の上下に僅かな隙間が空いてしまいます_| ̄|○
div使えば解決はするんですが何とかul&liで再現したい…

<div id="menu">
<ul id="2ch">
<li><a href="test1.html"><img src="test1.gif" border="0" width="80" height="29" alt="to top" /></a></li>
<li><a href="test2.html"><img src="test2.gif" border="0" width="80" height="37" alt="to next" /></a></li>
</ul>
</div>

#2ch
{
width: 80px;
margin: 0px 6px 0px 7px;
padding: 0px;
list-style: none;
}

#2ch li
{
margin: 0px;
padding: 0px;
}

どなたか解決方法がわかる方いたらおながいします_| ̄|○
190189:04/11/02 01:13:54 ID:jdc1egFI
ちょっと説明がわかりにくいので修正_| ̄|○
リストは上から下へ縦に並ぶようになっていて、
「test1.gif」と「test2.gif」の間に微妙な隙間が空くのを
なんとかピッタリくっつけたい、といった感じです。
imgの後にbrを入れて行間ゼロを指定すれば、
Win&MacのNNではピッタリくっつくんですが、
なんか無理やりっぽい…
191Name_Not_Found:04/11/02 01:29:55 ID:D2glRFQq
顔の画像を背景にして
その目や口とかにinputのフォームを表示させようと思っています。

方法として考えついたのfが
テーブルの背景に画像を指定してセルをピクセル単位で分割して
セルに収まるように口や目を持ってきているのですが
セルのピクセルを変化させながら調整すると他のセルがずれたりしてうまくできません。

いい方法ありますでしょうか。
192Name_Not_Found:04/11/02 03:18:17 ID:???
>191 あなたはそれをCSSで解決できるものだと思っているのか?

スレ違いなので、初心者スレで。
あと、どちらにしてもつまらないからやめたほうがいい。
193Name_Not_Found:04/11/02 05:16:52 ID:???
読みやすさを考えた結果、それが 760px という「新基準」
ttp://www.minutedesign.com/archives/2003/12/13/new_standard_760px/

高解像度の現代、リキッドレイアウトは新たな問題点が出てきた模様。
皆さんはどうお考えでしょうか。

上記の文章は、さも世間一般ではUAを最大化させているのが前提のようなお話ですが。
194Name_Not_Found:04/11/02 06:49:22 ID:???
>>189
div#menu ul li img{
vertical-align: bottom;
}
デフォだとベースラインに揃っちゃうので、gとかyとかの文字の下に
飛び出す分だけあいちゃいます。

>>191
position を absolute や relative にして、みるといいかもしれない。
人の顔のパーツの位置にinputがある絵を想像したらかなりシュールなので
ワロタ
195Name_Not_Found:04/11/02 07:11:59 ID:???
<div class="" ></div>
IDを使わないで全部classにしちゃったんんだけど
問題ないかな?
196195:04/11/02 07:14:25 ID:???
表示は問題ないです
197189:04/11/02 07:55:41 ID:jdc1egFI
>>194
オオオォォォ、本当〜〜〜にありがd…
こんな方法があったのか…
198Name_Not_Found:04/11/02 08:46:48 ID:???
>>193
読んでみた
下らない主張だから無視していいよ
自分の都合のいいことにしか触れていない
199Name_Not_Found:04/11/02 08:48:55 ID:???
>>195
確かに表示は問題ないはず
おかしい部分があるとしたら、
明らかに一か所限定の要素がある場合か

まあ、こだわりたい人は使い分ければいいと思うが、
行き過ぎてなければそれでもかまわないと考える。
200Name_Not_Found:04/11/02 09:07:03 ID:???
なぜ? 誰も突っ込まないのね。#2ch
201Name_Not_Found:04/11/02 09:10:55 ID:???
>193
読みやすさを考慮して一行の文字数にこだわるのはわかるけど
全体の幅を固定するのがよいかどうかは別の問題だと思う
202Name_Not_Found:04/11/02 09:20:52 ID:???
>>193
読みやすさなんて主観。
新聞にしたって、ラッシュの電車内で4つ折にして読んだことのある奴は
わかると思うが、変なところで折り目がついて読みづらい。
203Name_Not_Found:04/11/02 10:16:04 ID:???
※ 議論はよそで ※
横幅800固定やめろ。ブラウザ最大化するのウザイ。
http://pc5.2ch.net/test/read.cgi/hp/1031302476/l50
204Name_Not_Found:04/11/02 11:11:32 ID:???
みんなVGA表示くらい余裕だよね?
まさかこのスレで出来てない人はいないよね〜
205Name_Not_Found:04/11/02 11:29:12 ID:???
>>204
いくら可能だからってやりたいわけじゃないんだが
206Name_Not_Found:04/11/02 11:47:47 ID:Jp4WjsG0
http://moegi.exblog.jp/

こんな感じで、背景からテーブル部分が浮いてるように見せるには
どの辺りをいじったらいいですか?
207Name_Not_Found:04/11/02 11:59:34 ID:???
>>206
どこがテーブル?
意地悪はさておき、背景画像で。
208Name_Not_Found:04/11/02 12:57:25 ID:???
ボックス2つ作って
よこにならべたのだけれども
左側のボックス内の文字が左側に侵食してしまいます。
テーブルのように回り込まないのは何が原因と考えられますか?
よろしくオマイラ。ノシ
209Name_Not_Found:04/11/02 13:14:23 ID:???
1バイト文字なら諦めれ。
210Name_Not_Found:04/11/02 13:16:52 ID:???
ズギャーン
たしかにaを仮テキストとしてひたすら並べているだけれした・・・
そういうバグなのれすか?
211Name_Not_Found:04/11/02 13:17:39 ID:???
れす
212Name_Not_Found:04/11/02 14:12:18 ID:???
>>210
バグというか、半角文字の羅列は一単語とされていて、
折れません。
英文では単語の途中で折る場合にはハイフンを挟んで強制改行、
っていうルールなので。<br>でも書こう。
213Name_Not_Found:04/11/02 14:46:43 ID:???
仮テキストは Text Text Text Text Text Text Text Text って書くね
214Name_Not_Found:04/11/02 15:15:00 ID:???
全角英字もスペースないとダメじゃない?
あと、ひらがなでもぁぃぅぇぉゃゅょなんかも折れないから
行頭禁制文字も同様なのか
215Name_Not_Found:04/11/02 15:26:43 ID:???
テーブル使うのはやむをえないとして
・テーブルでレイアウトして
その中をスタイルシートで整えるべきか
・スタイルシートでレイアウトして
その中をテーブルで整えるべきか
どっち?
216Name_Not_Found:04/11/02 15:31:17 ID:???
>>215
後者の場合、テーブルを使うのはやむを得ない、が成り立たないのではないか
という疑問。
217Name_Not_Found:04/11/02 15:31:40 ID:???
>テーブル使うのはやむをえないとして
やむをえなくない。表でない限りは。
218Name_Not_Found:04/11/02 15:48:36 ID:???
>>216
バグとかあるじゃん
めんどいじゃん
テーブルだと簡単じゃん
219Name_Not_Found:04/11/02 15:59:21 ID:???
>>218 なら、訊ねるスレッドを間違っとるな。シッシッ。>>4読んで出直せ。
220Name_Not_Found:04/11/02 17:46:24 ID:???
複数の<table>を縦に並べているんですが、
セル内のテキストの量がマチマチなので、
幅が揃いません。
<div>で括っているのですが、CSSで幅を揃えることはできますか?

ただし、絶対的?な単位(pxとかemとか)を使ってしまうと、
ブラウザによっては横スクロールが現れる恐れがあるので
できれば使いたくありません。

<div>のwidth:auto;でブラウザに対して
適切な幅が取れているので、
もしこのwidthに<table>の幅を一致させることが出来れば
最高なのですが・・・

宜しくご教授ください。
221Name_Not_Found:04/11/02 17:57:40 ID:???
絶対的単位が駄目なら相対的にすれば? div table {width:**%;}とか
222Name_Not_Found:04/11/02 18:04:02 ID:???
>>221
あ、そうですよね・・・。
すいません何か烈しい勘違いをしていました・・・
ありがとうございました。
223Name_Not_Found:04/11/02 21:44:23 ID:Os7vi9p9
div { background-color: #cccccc; }
img { float: left; }

<div>
<img>
<p>xxxxxxxx</p>
</div>

という構造で画像の高さに比べてテキスト(xxxxxxxx)の量が少ないと
画像が div の#cccccc色のボックスからはみ出してしまいます。
これを避けて、画像の下の部分までボックスの下端をのばすことは
できないものでしょうか。

Mac OS 10.3.5 / Safari 1.2.3
224Name_Not_Found:04/11/02 21:49:59 ID:???
>>223
伸ばす事は出来ないが、伸びた様に見せる事は出来る。
方法はこのスレでガイシュツのはず。
225Name_Not_Found:04/11/02 23:21:03 ID:???
>>223
FAQ読めや。A4(>>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
226Name_Not_Found:04/11/03 22:25:14 ID:???
>>225
なんていいヤシなんだ!!!
227Name_Not_Found:04/11/03 22:40:26 ID:???
ヴァリッドCSSもらえたら、NN4.x系でもまともに表示されるんですか?
228Name_Not_Found:04/11/03 23:09:33 ID:???
NN4は駄目ブラウザだから、CSSをまともに表示できません。
229Name_Not_Found:04/11/04 01:39:01 ID:???
質問です
例えば↓こんな感じ↓で画像(nullpo.gif)を右下に表示させるシートありますよね

<body style ="background-image:url(img/nullpo.gif);
background-position:bottom right;
>

これをランダムでmona.gifとgiko.gifを表示させたりするのはどうすればいいでしょうか。
複数の命令を並べて
<body style ="background-image:url(img/nullpo.gif);
background-image:url(img/mona.gif);
background-image:url(img/giko.gif);
background-position:bottom right;
>
とやると最後にある画像の上書き表示するみたいでこの場合はgiko.gifが表示されてしまいます(;´Д`)
訪れる度に画像が変わるというのは無理でしょうか?ご教授ください
230Name_Not_Found:04/11/04 01:42:56 ID:???
>>229
そういうのはJavaScriptで。
231Name_Not_Found:04/11/04 04:30:04 ID:a2lRsxJo
http://makimo.to/cgi-bin/dat2html/index.html
このサイトからスレッドを見たときに、
リンクのそばに、リンク先や、画像が表示されたりするのは、
スタイルシートで実現しているのでしょうか??
232Name_Not_Found:04/11/04 04:34:09 ID:???
>>231
JavaScript/DHTMLだ。
233Name_Not_Found:04/11/04 12:37:50 ID:S876/vMy
携帯電話用に本文の幅を制限したいのですが、
body { weight: 100px; }
とやってもうまくいきません。
どうやればよいのですか?
ちなみに
<div style="width: 100px" >
</div>
とすればうまくいくのですが、メディアごとに
スタイルシートを使い分けたいので・・・

234Name_Not_Found:04/11/04 15:08:20 ID:???
weight?
235Name_Not_Found:04/11/04 15:54:39 ID:???
携帯用に幅固定する必要ってあるのかなぁ
236Name_Not_Found:04/11/04 16:49:15 ID:???
部外者だが、長文は気にならないが、
「BBS」「リンク」とかの短い単語を左やら右やら真ん中やらに並べてあるとウザい。
ただ、100は短すぎだろ。FOMAで250だから、それくらいの方がいい。
237Name_Not_Found:04/11/04 18:26:38 ID:???
<font style="font-familiy:sans-serif;"> 私はあほ</font><br>
<font style="font-familiy:'MS P明朝','MS 明朝',serif;"> 私はあほ</font><br>
<font style="font-familiy:'MS Pゴシック';"> 私はあほ</font><br>


以下のように指定してもフォントがどれも同じように表示されます。
原因はわかりますでしょうか?
238Name_Not_Found:04/11/04 19:08:31 ID:???
>>237
× familiy
○ family
239Name_Not_Found:04/11/04 19:25:24 ID:???
いーご勉強な。
240Name_Not_Found:04/11/04 19:30:09 ID:???
自虐ネタかと思った。
241Name_Not_Found:04/11/04 20:15:23 ID:???
>>234
失礼しました。
widthの間違いです。

>>235-236
linkにhandheldを指定することで、携帯用に幅を指定しなくても
自動的に改行することが出来ました。
ちなみに初めは<div>を使って218pxで固定していました。

ありがとうございました。
242Name_Not_Found:04/11/04 21:15:41 ID:???
Safari,OPELA,IEそれぞれ最新版では float left した画像に
ちゃんとテキストが回り込むんだけど、FireFoxだけ駄目。
なんでだろ?
243Name_Not_Found:04/11/04 21:19:28 ID:???
なんでだろね。
244Name_Not_Found:04/11/04 22:31:48 ID:???
background-color : red;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=1);
color : #ffffff;
border : solid 1px white;

これですと、左から右にグラデーションがかかるのですが、
上から下にグラデーションをかけたい場合どのようにしたらよいのでしょうか。
宜しくお願いします。
245Name_Not_Found:04/11/05 00:11:40 ID:???
>>242
そんな事もわからんのか!!
FAQを隅から隅まで読め!アフォか。死ね!
246Name_Not_Found:04/11/05 00:55:46 ID:3Ztz33T7
age
247Name_Not_Found:04/11/05 01:32:49 ID:CixkDgLt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>テスト</title><style type="text/css"><!--
p{ float:left; width:200px; border:1px solid #ccc; }
table{ width:200px; border:1px solid #000; }
--></style></head><body><h1>テスト</h1><p>test paragraph</p>
<table><tr><th>name</th><th>sex</th></tr><tr><td>tetu</td><td>men</td></tr></table>
</body></html>


p要素に与えられたfloat:left;で後続のtable要素が回り込むのはバグですよね?
NN7/IE6の標準準拠モード・後方互換モード共に回り込みます。

確かブロックレベルの要素は自身もfloat:leftするかmargin-left:nnするかだったはずですが
私の勘違いでしょうか?

バグなのか正統なレンダリングなのかを知りたいですm(_ _)m
248Name_Not_Found:04/11/05 02:03:39 ID:???
質問お願いします。
body {
background-color: #ffffff;
font-family: "MS Pゴシック";
}
のfont-familyプロパティを"MS ゴシック"やMS 明朝"に変更しても
IE6での表示は全然変わりません。キャッシュを空にしても結果は同じです。
どうしてでしょうか?
249Name_Not_Found:04/11/05 02:08:25 ID:???
>>247
回り込むのが正統だ。仕様書邦訳の float でも読んだら?
250Name_Not_Found:04/11/05 02:51:13 ID:???
>>249
アフォかぼけ!ブロックレベルまで回り込むのはバグだっつうの。
一体どのサイトのどの文章を読んでそんな勘違いしてるんだか
251Name_Not_Found:04/11/05 02:58:42 ID:???
ネタ?
252Name_Not_Found:04/11/05 03:16:08 ID:???
お前らテンプレくらい嫁

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


253Name_Not_Found:04/11/05 03:20:08 ID:???
display: block だと回り込まない。
display: table だと回り込む。
ようだ手元のFirefox0.8およびOpera7.2
254Name_Not_Found:04/11/05 05:08:02 ID:???
>>253
table要素はブロックレベルじゃなかったか?
テーブルレベルなんて存在しないだろ。
やはり実装が間違いでしょ。
255Name_Not_Found:04/11/05 06:31:51 ID:g1kibXd4
CSSの翻訳サイトが閉鎖しているようですが、
どこか翻訳ファイルをアーカイブしてるとこないですか?
256Name_Not_Found:04/11/05 06:48:08 ID:???
テーブルを扱う場合(作表の為)
列ごとの文字の行揃えとかはCSSでは設定出来ませんね。
例えば左列は右行揃え、右列は左業揃えとか…。

HTML側でやるしかないのかな。
257Name_Not_Found:04/11/05 07:31:05 ID:???
>>256
colgroupとか
まあclassが普通だな
258Name_Not_Found:04/11/05 09:11:35 ID:???
>>257
col および colgroup に適用可能なプロパティは
border、background、visibility、width のみ。
テキストは列の子孫にならないので操作不能。

CSS3のnth-elementがあればもうちょっとましになるんだけどな……
259Name_Not_Found:04/11/05 09:13:23 ID:???
>>249
藻前はアフォか。仕様書じゃなくて勧告書。
260Name_Not_Found:04/11/05 10:54:54 ID:???
261Name_Not_Found:04/11/05 14:29:24 ID:???
>>259
なんだこいつ?
まだいたんだなこういう馬鹿が。
262247:04/11/05 14:32:12 ID:???
結局どちらが正しいのですか?
色々見て回りましたがブロックレベル自体は回り込むべきではないと書いてあるところばかりでした。
ただテーブルはどうのっていう記述が見つからないのでいまいち自身が持てないです。
263Name_Not_Found:04/11/05 15:22:44 ID:???
264247:04/11/05 16:07:35 ID:???
>>263
どなたか知りませんがバグスレに投稿してくれたのですね。
ということはやはりブラウザのバグであると考えてよろしいんですね。

でも現在の実装で後続のテーブルが回り込まないようになってるブラウザなんてあるんですかね?
なんかほんとにCSSって破綻してますね。

仕様を勉強するよりも回避策を勉強する時間の方が長いなんてorz
265Name_Not_Found:04/11/05 16:11:22 ID:???
語尾が 「ですよね」 ってのもどうかと
266Name_Not_Found:04/11/05 16:12:48 ID:???
>>261
Recommendationの何処を如何読み違えたら仕様書になるんだよ。小学校からやり直せ。
267Name_Not_Found:04/11/05 16:13:57 ID:???
>>264
floatがそれだけデリケートとも言える
変に凝らなければ、それこそ問題は起こらない訳で
268Name_Not_Found:04/11/05 16:18:10 ID:???
>>266
ttp://www.w3.org/TR/1998/REC-CSS2-19980512/
Cascading Style Sheets, level 2 CSS2 "Specification"
269Name_Not_Found:04/11/05 16:38:06 ID:???
>>264
> 仕様を勉強するよりも回避策を勉強する時間の方が長いなんてorz

何秒勉強して長いと感じてるんだ、ヴォケ。
バグじゃない。CSS2.1-9を普通に1分読んでみろ。答えが書いてある。
270Name_Not_Found:04/11/05 17:06:23 ID:???
>>269
たぶん色んな講釈サイトを巡ってみたのだと思われ
271Name_Not_Found:04/11/05 17:13:49 ID:???
そして知ったかをしたかったと・・・
272Name_Not_Found:04/11/05 17:52:59 ID:???
>>266
釣りか?
マジレスしとくと日本語を勉強しろ
273Name_Not_Found:04/11/05 17:58:38 ID:???
>>267
>変に凝らなければ、それこそ問題は起こらない訳で
CSSって何のためにあるか知ってる?
お前の理屈だとCSSを使わないという答えに行き着きそうだな。
極端なはなしだけどな。
274247:04/11/05 18:04:08 ID:???
>>269
1-9ですか?そんなとこありますか?CSS2の邦訳は何故かForbiddenになってたので
英語のままの方で探してますが1-9なんてないですよ。もしかして1〜9全部を読めってことですか?

該当部分を抜き出してもらえないですか?
275Name_Not_Found:04/11/05 18:07:56 ID:???
>>274
CSS2.1の9
276Name_Not_Found:04/11/05 18:14:31 ID:???
>>273
なんでそこまでムキになって噛み付くかがわからんな。

>なんかほんとにCSSって破綻してますね。
と言う嘆きに対し、そんなこともないですよと言っただけだろうに。

現状の実装で、CSSが"変に凝ったデザイン"を実現出来ると言うのは初耳だが。
277247:04/11/05 18:14:54 ID:???
>>275
ありがとうございます。でも凄く縦長ページなので翻訳ができませんでした。
9のいくつあたりに確信に迫ることが書かれてるのですか?
そこだけテキスト翻訳当てますのでお願いします。

とりあえず9.1から順にやってます。
278Name_Not_Found:04/11/05 18:16:38 ID:???
>>276
>"変に凝ったデザイン"
この言葉にイラついただけ。実装の不備をデザインの不備とすりかえるような発言は嫌い。

279247:04/11/05 18:23:58 ID:???
ダメですね・・・
疲れました。該当部分の抜き出し待ってます。
280Name_Not_Found:04/11/05 19:31:51 ID:???
Forbidden ? 普通に見れるじゃないか。
http://www.y-adagio.com/public/standards/tr_css2/toc.html
281247:04/11/05 20:31:27 ID:???
>>280
ありがとうございます。古いURLだったのかミラーサイトだったのかな。
ところで、テーブル要素がインラインと同じ扱いをされてよいというような
解釈はどの文章からなのですか?

>CSS2.1-9を普通に1分読んでみろ。答えが書いてある。
見つかりそうにありません。そろそろ教えていただけませんか?
282Name_Not_Found:04/11/05 20:50:09 ID:???
     \     /
       \ /
       氏ね氏
     氏 ね 氏 ね     シネヤシネヤシネヤ
     氏 ね 氏 ね 氏
 __氏ね 氏 ね 氏 ね__
/  氏ね 氏 ね 氏 ね 氏  \
 __氏 ね 氏 ね 氏 氏ね__
/  氏ね 氏 ね 氏 ね 氏    \
 __氏 ね 氏 ね 氏 ね __
/    氏 ね 氏 ね 氏     \
      氏 ね 氏 ね
       氏ね氏
        ね
283Name_Not_Found:04/11/05 20:52:32 ID:???
>>282
マジでキモイ
市ね
コピペしてニヤニヤしてんなボケ
284Name_Not_Found:04/11/05 23:26:57 ID:???
>>281
CTRL+F
285Name_Not_Found:04/11/06 00:36:15 ID:Rpd7bHf/
font-sizeはpxで指定するよりptを使うほうがベター?
286Name_Not_Found:04/11/06 00:45:02 ID:???
em or % is goooood
287247:04/11/06 03:04:30 ID:???
>>284
???
何を検索するんですか?
テーブルはその他ブロックレベルとは一線を画しているなんていうのはあなたの勘違いですよ。
そう解釈できる文章はありませんでした。
288Name_Not_Found:04/11/06 03:08:11 ID:???
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/

岡橋一輝氏によるCSS勧告邦訳の転載がいつの間にか 403 Forbidden になった。
これは結構困る。自分はアーカイブを持ってるから問題ないけど、
ウェブ上の資料として学習者に参照してもらうことができないのが困る。
日本規格協会訳の方は、拙い直訳で分けわからんし、間違いが多くて奨められん。

このまま 403 の状態であれば、次スレではリンクを外さないとね。
289Name_Not_Found:04/11/06 03:18:50 ID:???
Internet Archive に岡橋氏によるCSS2勧告邦訳のアーカイブが残っているから欲しい人はゲット。
http://web.archive.org/web/20011204173550/http://www.fan.gr.jp/~kaz/rec-css2.zip
http://web.archive.org/web/20011204173550/http://www.fan.gr.jp/~kaz/rec-css2.tar.gz

CSS1勧告邦訳のキャッシュ。
http://web.archive.org/web/20010804050135/www.fan.gr.jp/~kaz/rec-css1/rec-css1.html
290Name_Not_Found:04/11/06 03:27:12 ID:???
>>289
d
これを機会にちゃんと読んでみまふ
291初心者:04/11/06 04:08:58 ID:???
今、文字スタイルとスクロールバーだけのライトなSS使い始めますた。
さっき某サイトで外部にCSSファイル置くっての知ってやってみて悦に浸っています
ところが。
テーブルの中の文字はSSが適用されずにデフォルトのままなんですね、
テーブル外のテキストには適用されているんですが。

外部リンクを外して普通にページに埋め込んでも全く変わらずでした。
テーブル内にも適用するにはどうしたらよいのでしょうか?
ちなみにチェックしたのはIE6です。ソースは <続く>
292初心者:04/11/06 04:10:56 ID:???
<style type="text/css">
<!--
a:link { color:#32cd32; }
a:visited { color:#6B8E23; }
a:hover { color:#00ff00; }
a:active { color:#00ff00; }
a:hover{ text-decoration:underline; }
a { text-decoration:none; }
body {
scrollbar-3dlight-color:#006600;
scrollbar-arrow-color:#ffff00;
scrollbar-base-color:#006600;
scrollbar-darkshadow-color:#ffff00;
scrollbar-face-color:#006600;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#006600;}
P { color: #006600;
font-size: 80%;
line-height: 120%;
font-family: "MS Pゴシック", Osaka, "MS ゴシック", Gothic, sans-serif
}
-->
</style>

です。
いくつかサイト見て試行錯誤してみたんですがどうもうまく行きません。
これからガシガシ勉強していきますが
今回は時間が無いので、指摘のほど宜しくお願いしますm(_ _)m
293Name_Not_Found:04/11/06 04:28:49 ID:???
table に対して何も指定してないじゃないの
294Name_Not_Found:04/11/06 04:54:26 ID:???
body table 継承

とかでググるといいのかもしれん。
295初心者:04/11/06 07:40:05 ID:???
>>293-294 ありがとうございます
table内の文字指定ってどうやるんですか?
>>294でググっていくつか見たんですけどどうも理解できません('A`)

申し訳ないんですがどなたかビシっと教えてくれませんでしょうか
296Name_Not_Found:04/11/06 08:41:17 ID:???
ビッシビシいきたいなら勘太郎呼んでくるかい?
297Name_Not_Found:04/11/06 10:47:26 ID:???
>>287 CSS2ではなくCSS2.1だって。
http://www.w3.org/TR/CSS21/visuren.html
298Name_Not_Found:04/11/06 11:00:33 ID:V7D5sPvB
メニューのリンクをliにしてdisplay:inlineにして横並びにしたのはいいのですが
こいつをセンタリングするにはどうしたら良いでしょうか?
上のulとリスト全体をくくったdivにtext-align: center;ってやってみましたが
IEだと、メニューが重なっておかしなことになってしまいます。
299Name_Not_Found:04/11/06 11:22:34 ID:???
>>295
初心者以前にアフォかお前は。CSS構文の基礎も知らんのか。
body, th, td { /* rule set を書く */ }

http://cssbug.at.infoseek.co.jp/detail/winie/b023.html
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp
http://hp.vector.co.jp/authors/VA022006/links.html#doctype-switch

P { /*何タラかんたら*/ ] とかソースを提示しておいて、
その意味もわからずにスタイルシートを書いているわけか。
一昨日来やがれ。
300Name_Not_Found:04/11/06 11:25:14 ID:???
>>298 
当然、FAQのA2(>>5)は読んだ上での質問ですよね?
ならIEのヴァージョン、互換モードか標準モードかを、記して下さい。
まさかMacIEではないよね?
301Name_Not_Found:04/11/06 11:35:52 ID:???
>>298 
WinIE6互換/標準モードで実験しましたが、重なるなんてことにはなりません。
<div style="text-align:center;">
<ul>
<li style="display:inline;">あいうえお</li>
<li style="display:inline;">かきくけこ</li>
</ul>
</div>
君、何か間違ってるだろ?
302Name_Not_Found:04/11/06 11:47:13 ID:???
ゴニョゴニョした秘密の訳があるんだろ
303298:04/11/06 12:19:01 ID:V7D5sPvB
すんません。マックIE5.16です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と宣言してます。
よくよく調べたところ、重なってるのではなく、background-colorとborderで表示がおかしくなってるだけでした。
ちょっとボタンっぽくしたかったもで。
普通にテーブルにした方が無難ですかね?
メニューの横並びを、liのインラインでなんて初めてやったもので・・・
304Name_Not_Found:04/11/06 12:45:56 ID:???
>>303
http://css.maxdesign.com.au/
ここを参考にしる。
305298:04/11/06 12:55:31 ID:V7D5sPvB
補足
http://cssbug.at.infoseek.co.jp/detail/macie/b035.html
この現象ですね。
親ブロックのalignの中のaがへんな挙動することが多いですね。mac ieは。
306Name_Not_Found:04/11/06 14:15:50 ID:???
>>297
いい加減お前の発言の根拠を示せよ。
テーブルがインラインのような挙動を示すべきなんて言ってるのはお前だけ。
仕様書の該当部分を抜き出してきて解説しろ。面倒なら黙っておけ。
そうすればみんな忘れてくれるだろ。
307298:04/11/06 15:16:31 ID:V7D5sPvB
>>304
これは参考になります。ありがとうございます。
>>306
テーブルがインラインどうたらなんて話、してないよ。
いいかげん、って、あんたと会話も議論もしてませんがなにか?
>>303で、自分の勘違いを認めてますが?
>>305の現象はバグ辞典のサイトにも出てる。
(alignで移動しても本来ある位置でaが作用してしまう。)

つーわけで、みんなに忘れてもらうんじゃなくて、
お 前 を 忘 れ て ー よ !

308Name_Not_Found:04/11/06 15:34:18 ID:???
>>307
喪前は自ら>>298と名乗り
>>297へ向けたレスにゴニョゴニョしてるのか?w
309Name_Not_Found:04/11/06 16:23:54 ID:???
もうアレだ、みんな1回全部忘れちゃおうよw
310Name_Not_Found:04/11/06 17:03:29 ID:???
>>307
なんだこいつ?
311Name_Not_Found:04/11/06 18:30:47 ID:???
>>298よ。
WinIEとMacIEでは別物だよ。
Macなんて少数派なんだから、IEとだけ言っても駄目。
少数派であることを自覚して、必ずMacIEと書きなさい。

あと、レス番号よく見ろ。
312Name_Not_Found:04/11/06 18:36:22 ID:???
>>306 
おいおい、>>297>>269ではないぞ。
「CSS2.1の9」とあるのにみんな2.1でなくCSS2ばかり参照してるから、書いただけ。
313Name_Not_Found:04/11/06 18:45:41 ID:???
 わかんなくなっちゃった
>>309に1票
314Name_Not_Found:04/11/06 20:19:50 ID:???
テーブルの装飾についてはAppleの製品スペック欄のとか参考になりました。

リストの表示で、Safariだと
.contents li{
で指定した内容を反映してくれない。

OPELAだときちんと反映されるんだけど。
これってガイシュツ?
315Name_Not_Found:04/11/06 21:04:41 ID:???
>>312
本当かよ?どうせ自分の発言の根拠をしっかり説明できないから
中途半端な事言ってばっくれようとしてるだけだろ?

本当に別人ならそれでいいが、おまいはどっち派なのよ?
316Name_Not_Found:04/11/06 22:05:27 ID:???
CSSでヴァリッド取ってればNN4.x系とかIE5.0系とか無視してもいいですか?
317Name_Not_Found:04/11/06 23:03:16 ID:???
>>316
どうぞお好きに
318Name_Not_Found:04/11/06 23:44:21 ID:???
正直なところレイアウトはテーブルでその他の装飾がCSSっていうのが
いいかなと思うのですが。
どうでしょうか?
319Name_Not_Found:04/11/07 00:04:30 ID:???
320Name_Not_Found:04/11/07 01:16:25 ID:???
カーソルを勝手に変えるサイトがありますが、
あれにユーザースタイルシートで対抗できないのでしょうか。
321Name_Not_Found:04/11/07 01:17:35 ID:???
>>320
対抗できる。ちゃんと !important つければ。
322Name_Not_Found:04/11/07 01:24:54 ID:???
俺はこうしてる
/* Fix Cursor on default */
html,body,table{
cursor:auto !important;
}
a:link{
cursor:pointer !important;
}
acronym,abbr{
cursor:help !important;
}
323Name_Not_Found:04/11/07 01:27:35 ID:???
>>314 ナニ言ってるのかわかりません。ちゃんと説明してくれる? ソースも略しすぎ。
324Name_Not_Found:04/11/07 01:39:30 ID:???
>>321 , >>322
ありがとうございます。
とりあえず「 * {cursor:auto ! important;} 」って
やったらできました。どうも。
325Name_Not_Found:04/11/07 06:10:42 ID:???
>>323
お!聞いてくれますか!!!
以下の様にした場合、Safariだと反映されんのよ。

<div class="contents">
 <h3>*************</h3>
 <h4>*************</h4>
  <ul>
   <li>AAAAAAAAAAAAAAA</li>
   <li>BBBBBBBBBBBBBBB</li>
  </ul>
</div>

.contents li{
 line-height: 1.2em;
 color: #000000;
 list-style: disc inside;
 font-size: 70%;
}
326325:04/11/07 06:11:49 ID:???
>>325
>以下の様にした場合、Safariだと反映されんのよ。

Safariだと反映されないのよ。
OPELAだとちゃんと反映されるのに。
327Name_Not_Found:04/11/07 09:19:27 ID:???
>326
何がどう反映されないのかも教えてくれんと

>325のソースで
MacのN7.1とSafari、Opera7.53では同じように表示されたが
328325:04/11/07 10:04:01 ID:???
>>327
何度もごめんよ。

テキストサイズとかテキストカラーなんかの設定全部なんですわ。
全く無視されちゃってる感じ。

もいっぺん、コード見直してみる。ケアレスミスかもしれん。
スマソ。
329Name_Not_Found:04/11/07 11:35:28 ID:???
初めからそうしろよ・・・
330325:04/11/07 12:11:05 ID:???
>>329
そう言うなよ。
ちょっとループしてしまって、疲れてたんだから。
331Name_Not_Found:04/11/07 12:42:40 ID:???
>>330
そんな自己フォローより、結局コード見直してみてどうだったのかと。
332img{}は使えるのか?:04/11/07 14:51:27 ID:BxP/9apZ
同じページに複数あるオリジナルイラストを
一括してサイズをそろえたいんですがうまくいきません。
どうしたら良いでしょうか?

img{width:600px; height:450px;}
と書きました。
333Name_Not_Found:04/11/07 15:15:26 ID:???
>>332
それで出来るけど?

●OSやブラウザの種類とバージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは?」と求められたら応じましょう。
 その方が回答が早く得られます。質問は具体的に。
334Name_Not_Found:04/11/07 15:24:20 ID:???
出来ても、画像の表示がきた(ry
335img{}は使えるのか?:04/11/07 15:31:48 ID:BxP/9apZ
OSはWin98です。
ブラウザは、Firefox1.0PR、IE5.0、Mozilla 1.8a4です。

コメントを<styleの外に置いていたのを中に入れたら
自己解決したっぽいです。

<style type="text/css">
<!--
img{width:614px; height:461px;}
-->
</style>
(ノД\)ハズカシー
336Name_Not_Found:04/11/07 17:12:40 ID:iT3gdvTt
このサイトのフォントってどうなってるの?まるでflashみたいですよね?
アンチエイリアスになってるのが不思議。環境によるのですか?
css覗いたんですが、目新しいものは発見できず。。
どなたか教えてください。

ttp://www.shauninman.com/poser/
337Name_Not_Found:04/11/07 17:49:25 ID:???
.test1 {
margin: 5px 0px;
padding: 0px;
border: 1px solid #000;
}
.test2 {
margin: 5px 0px;
padding: 0px;
}
と各要素ごとに指定したい全てのプロパティを書いていくべきか

/* margin,padding */
.test1, .test2 {
margin: 5px 0px;
padding: 0px;
}
/* border */
.test1 {
border: 1px solid #000;
}
とプロパティごとに要素を書いていくべきかで迷っています。
普通、要素ごとに書くものなのでしょうか?
338Name_Not_Found:04/11/07 18:16:14 ID:???
>>336
そのサイトから何を得ようとしているのか知らないけど
css自体は単純に書いてあるからfontの部分を見れば分かるかと・・・


てか、HTMLのソースが気に入らないYO!
339Name_Not_Found:04/11/07 18:19:19 ID:???
>>337
お好きなように


俺の場合は
よく使うものは後者(まとめて書く) あまり使わないものは前者(1つずつ書く)かな・・・
340Name_Not_Found:04/11/07 18:45:08 ID:???
>>338
見栄えで画像を使ってるタイトル文字なんかを
あのサイトのようにきれいにアンチエイリアスをかけられるならテキスト表示にしたいです。
CSSは左のメニュー部分のH3が

font: 10px/12px "Din-Regular",Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-style: normal;

この部分だと思うんですけどboldもかけてないし、
Din-Regularは持ってませんが、表示されてるフォントはArialじゃないし
なによりアンチエイリアスが・・・

>>338さんにも画像のようなテキストが表示されてますか?
341Name_Not_Found:04/11/07 19:21:18 ID:???
まるで Flash っていうか Flash だし。JavaScript で置換処理をしてるんだな。
342Name_Not_Found:04/11/07 21:32:25 ID:???
>>325
通りかかったのでレスしてみる。

hogehoge ul li {
hogehoge
}

で駄目なのか?


>>336
こりゃあ手が込んでるね。
見出しの文字列flashに送って、表示か。余程、このフォント萌えなんだな。
しかし、こういうのも日本語不利だよな・・・・・orz
全部ぶっこむと何Mなるんだかねw
343Name_Not_Found:04/11/07 22:27:42 ID:???
DIV id Aの中でulのクラスを2種類使いたく、CSSに
#A{〜}

#A dl,ul{〜}
#A dt,li{〜}
#A dd{〜}

.B dl,ul{〜}
.B dt,li{〜}
.B dd{〜}

HTMLに
<DIV id="A">
<ul><li></li></ul>
<ul class="B"><li></li></ul>
</DiV>

と記述したのですが、ulのクラスがすべて.Bになってしまいます。
どこがまずいのでしょうか、ご指摘ください。
344Name_Not_Found:04/11/07 22:51:57 ID:???
>>343
それだと
#A dl,とul、.B dl,とulに指定していることになる。
上の指定を下で上書きしている状態。

#A dl,#A ul{〜} と.B dl,.B ul{〜} にしてみて。
345Name_Not_Found:04/11/08 01:34:55 ID:???
>>344
お返事有り難うございます。
指摘通りCSSを編集し、ブラウザで確認しましたが、
今度は#Aのクラスになってしまいました。

.Bで、PADDINGとMARGINの指定をし、リンクのリストを表示させています。
.Bを#Bにし、HTMLも<ul id="B">にしたらリンクの間のPADDINGとMARGINが適用されました。

うーん、これで我慢するかな…。
346Name_Not_Found:04/11/08 02:16:09 ID:???
>>345
.B dl,.B ul{〜} じゃなくて.B dl,ul.B{〜} だな。
つか、何故そうなるかを考えろよ。
347Name_Not_Found:04/11/08 09:41:12 ID:???
ボックスに文字を
縦方向配置に中央揃えで表示させるにはどうすればいいですか?

#box { background-image: url("../Images/title_top.gif"); margin: 0; padding: 0; width: 200px; height: 200px }
<div id=box>コピーライト○○○</div>

marginだと環境に依存するので困っています。
tableぐらいしか方法はありませんか?
348Name_Not_Found:04/11/08 09:46:52 ID:yYWhrtpZ
左のナビゲーターを大見出し、小見出しの2層に分けているのですが、
IEで見ると、2つ目の小見出しで改行(U?)が入ってしまいます。

具体的には早朝のぞみ、最終のぞみの間です。

激安新幹線販売所
http://xxxx.s56.xrea.com/nozomi/
349Name_Not_Found:04/11/08 09:58:11 ID:???
>>348
自分でliにmargin:1pxを指定してるやん。

350Name_Not_Found:04/11/08 09:59:12 ID:???
ごめん。全然見当違いのこと言ってた(;´Д`)
IEの話か・・・。
351Name_Not_Found:04/11/08 10:03:11 ID:???
>>348
解決になってないけど、大見出し、小見出しってわかってるなら、ulじゃなくて
hnで見出し作ったらいいと思うよ。リストのネストはソースが複雑になるし。
352348:04/11/08 10:13:29 ID:???
>>351
そっか。
そうしてみます。
353Name_Not_Found:04/11/08 10:42:04 ID:TeE/3p/k
ulにwidthって指定できない仕様なのかな…。
以下のソースで、liがlist-style-position:insideになってしまいます。
(Win IE5.0で再現)
<html lang="la">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>listテスト</title>
</head>
<body>
<ul style="width:100px;">
<li>なにも指定なしなにも指定なしなにも指定なしなにも指定なしなにも指定なし</li>
<li style="list-style-position:outside;">リストスタイルポジション:アウトサイド</li>
</ul>
</body>
</html>
354Name_Not_Found:04/11/08 11:28:31 ID:???
>>347
>marginだと環境に依存するので困っています。
px単位を止めて、emか%にしなさい。

>>353
IE6だと、リストマーカーが消える。
list-style-position:inside;を指定すればマーカーは現れた。
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/generate.html#list-style-position
355Name_Not_Found:04/11/08 12:00:09 ID:???
356Name_Not_Found:04/11/08 17:06:41 ID:???
質問です。

<p>テキスト</p>
<div class="hoge"></div>
<p>テキスト</p>

div.hoge {
 background-image(hoge.gif);
 height: 5px;
}

こんな感じで、ある背景画像をコンテンツの途中に敷きたいのですが、
WinIEだと、このdivのボックスが高さ5pxになってくれません(15pxくらいに表示される)。
文書型宣言はXHTML1.1にしています。

この私のdivの例ように、「要素の中身を空」にして、
CSSで背景+そのサイズに応じたボックスの高さを指定するというのは、
用法としてはイレギュラーなものなのでしょうか?
適切な方法があればアドバイスいただけますと助かります。
357Name_Not_Found:04/11/08 17:14:29 ID:mYwRrjOu
このスレが適当かどうかアレだけど。
tableの代わりにこれをしたいとか、tableで我慢するしかないという
投稿がけっこうありますね。tableって避けるものなんですか?
これから消えていくことが決まっているから?
ほかに致命的な欠陥があるから?
358Name_Not_Found:04/11/08 19:08:10 ID:???
position:absoluteを使って子要素を親要素からはみ出させたら
消えてしまうようなブラウザはありますか?

overflowを触らずともIE6では大丈夫なのですが一応やっておいたほうがいいでしょうか?
359Name_Not_Found:04/11/08 22:47:51 ID:???
>>346
ありがとうございます。
相変わらず出来ないのでIDで指定してしまってます^^;

もうちょい勉強して出直してきたいと思います
360Name_Not_Found:04/11/08 23:01:25 ID:yYWhrtpZ
メインコンテンツにあるカレンダーが入っているボックスがGeckoだと飛び出てしまいます。
アドバイスお願いします。

【京都⇒東京】格安新幹線指定席券
http://xxxx.s56.xrea.com/nozomi/tokyo.shtml
361Name_Not_Found:04/11/09 00:05:00 ID:???
>>360
KTMLでもなる。
問題は、カレンダの表が入っているブロックの幅が、その親を超えてしまうから。
362361:04/11/09 00:05:38 ID:???
>>361
誤:KTML
正:KHTML
363360:04/11/09 00:27:39 ID:???
>>361
分かりやすいようにボーダーを入れてみました。
とりあえず青枠のボックスの幅を95%にしてみました。
364Name_Not_Found:04/11/09 03:10:09 ID:???
>>356 もしやline-heightを設定してないか?
365Name_Not_Found:04/11/09 05:19:03 ID:hMc/hxdK
ガイシュツだったらごめんなさい。
WinIE5/5.5/6
Gecko
KHTML
MacIE5
Firefox

仕様どおりなのかもしれませんが、上記ブラウザでは全部
チェックしました。
<li>や<ol>になどのリストに
どうしてもmarginを0にすることは
不可能なのでしょうか?

というのも、リスト内の項目を全て画像化して
マージンがなくきっちり表みたいにしたいのですが
テーブルをつかうしかないのでしょうか・・・

できればHTMLの構造はいじりたくない・・・
366356:04/11/09 06:24:52 ID:???
>>364
line-height継承されてました。

line-heightだけいじってもダメだったので、font-sizeと併せて、
試しに1px/1.0emとか無茶な数字を指定してみたところ、
例のdivのサイズも小さくなりました。

WinIE6.0は、要素の中身が空のボックスでも、
指定されている文字サイズの高さを最低サイズとし、
その場合そのサイズより小さいheight指定は無効となる、ということですかね。

そもそも要素の中を空にしてる用法が変なんでしょうか。(´Д`;)ヾ
367Name_Not_Found:04/11/09 08:18:05 ID:???
>366
変。
368356:04/11/09 08:54:04 ID:???
>>367
やはり変ですか。
ただ、addressやらpが空なのはともかく、
汎用ボックスのdivを空にするのは、必ずしも文法違反ではないように思うのですが。

まあ、変という前提で話すすめると、
では、>>356みたいに、コンテンツ途中に背景を敷きたい場合ってのは、
どういう組み方をするのがよいのでしょう?

純粋にcssの質問かというと、ちょっとズレてしまってますが。
369Name_Not_Found:04/11/09 09:03:45 ID:???
>>368
ヒントはhrとimg
370Name_Not_Found:04/11/09 10:02:43 ID:???
>368
文法違反ではないが、好ましくない。
371Name_Not_Found:04/11/09 10:31:19 ID:???
>>365
ソース内で改行してない?一列に並べてみて
372Name_Not_Found:04/11/09 11:04:18 ID:???
>>368
現実の箱のような物があって、中に品物を入れる様に考えてはいかんだろ。
"コンテンツ"を"マークアップ"するんだから、中身がなければ箱を被せる事も出来ないぢゃん?
373Name_Not_Found:04/11/09 11:54:43 ID:???
>>372
アフォに何をいっても無駄だろ
ほっといてやれ
374Name_Not_Found:04/11/09 12:22:21 ID:???
>368

コンテンツ途中に背景?
単に途中に画像を入れたいだけでは??

<div 文章ほげほげ1> <p>うががが</p></div>
<div 画像ほげほげ> <img>うががが< /></div>
<div 文章ほげほげ2> <p>うががが</p></div>


・・・こんな感じで、マージンとかを調整すればいいのでは??

文法違反うんぬんかんぬんより、下記をおすすめします。

ttp://pc5.2ch.net/test/read.cgi/hp/1099037636/
375Name_Not_Found:04/11/09 12:36:36 ID:???
斬新なimgの使い方だ
376Name_Not_Found:04/11/09 13:30:04 ID:???
>>374
おまえは文法から勉強しなおしてこい

ほんとどいつもこいつも馬鹿ばっかりだよ
377356:04/11/09 13:31:03 ID:???
>>369
どうもありがとうございます、ずっとHTML4.0Tの適当なtableレイアウトしてきてたんで、
hrに考えが及んでませんでした。

>>372
言わてみれればまったくその通りですね、非常にわかりやすい説明です。
というより一番基本の部分ですよね、お恥ずかしい。

>>373
品性のない煽りどうもありがとうございます。

>>374
単に画像入れたいというより、もうちょっと文書構造の概念的な意味での疑問だったので。
意図通りに表示されればどんなコードでもいいとは思っていなくて、
どうマークアップして、どうスタイル指定するのが構造上自然なのか、という部分が焦点でした。

とりあえずもっと精進します、皆さんどうもありがとうございました。
378Name_Not_Found:04/11/09 13:56:41 ID:???
>>377
頭悪いやつってしつこく恥の上塗りを繰り返すよな
379Name_Not_Found:04/11/09 14:03:51 ID:???
>>378
むしろお前みたいにすぐ茶々入れたがる奴が小馬鹿にされている、
端から見るとそんな図式じゃないのかと。
380Name_Not_Found:04/11/09 14:12:10 ID:MrPUOtxy
HTMLのフレームを使っているページで、
フレームをまたがって(越えて)レイヤーを表示させることって可能でしょうか?
無茶だとは思うのですが、もし裏技的なものがあればよろしくお願いいたします。
381Name_Not_Found:04/11/09 14:14:01 ID:???
フレームセットでは無理っぽいけど同じやり方はある
382Name_Not_Found:04/11/09 14:23:12 ID:???
>>381
CSSによる疑似フレームを使うってことでしょうか
383Name_Not_Found:04/11/09 14:33:41 ID:???
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| >>382 そうだと思うよ    |
|____________|
∧∧ ||
(゚Д゚)||
/ づΦ
384Name_Not_Found:04/11/09 14:35:07 ID:???
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| >>383 ズレてますよ          |
|____________|
∧∧ ||
(゚Д゚)||
/ づΦ
385Name_Not_Found:04/11/09 14:39:38 ID:???
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
| そこでずれて            .|
|____________|
∧∧ ||
(゚Д゚)||
/ づΦ


386Name_Not_Found:04/11/09 14:40:26 ID:IBdBaWi4
>378が正論に5千ぺリカ
387Name_Not_Found:04/11/09 14:56:49 ID:???
>>385
やっぱそれしかないですね、むぅ残念
388Name_Not_Found:04/11/09 14:59:29 ID:???
>>387
そのレス番号はなんだか微妙だなw
389Name_Not_Found:04/11/09 15:13:56 ID:9vXAY/cM
擬似フレームを使っているのですが、ページ内リンクがOperaでは効きません
ttp://cssbug.at.infoseek.co.jp/detail/mozilla/b011.html
これが原因でしょうか?
390Name_Not_Found:04/11/09 15:20:30 ID:???
>>379
>>377の言ってることはアフォ確定なんだがおまいもしかして・・・・・
まあ昼間からこんなことしてる俺たちはいわゆる社会の底辺のゴミってやつだから気にするのは
よそうや
391Name_Not_Found:04/11/09 15:34:51 ID:???
>390

お前や >377 と一緒のグループではありたくない
392Name_Not_Found:04/11/09 15:38:21 ID:???
>>391
心意気は立派だが。
中でいくらグループ分けしたところで、一般には底辺は底辺としてしか認識されない悲しさ。
393Name_Not_Found:04/11/09 16:05:25 ID:???
>>391
お前は底辺の中の底辺だから大丈夫だろ
394Name_Not_Found:04/11/09 16:19:14 ID:???
>>392
なに? すると俺もか?
395Name_Not_Found:04/11/09 17:07:02 ID:???
だれか>>358>>360にアドバイスしてやれや。
でなきゃ、質問どうぞ。
396Name_Not_Found:04/11/09 17:31:32 ID:???
>>395
質問を促すわりに、自分で指摘してる>>358>>360には答えないあたりが、深いな。
397Name_Not_Found:04/11/09 17:33:54 ID:???
>>396
つまり能無しのゴミってことだろ?
398Name_Not_Found:04/11/09 18:05:30 ID:???
399Name_Not_Found:04/11/09 19:07:00 ID:???
<h2>などの見出しに引く下線を、<h2>の文字列と
重ねるにはどうしたら良いですか?
400Name_Not_Found:04/11/09 19:32:06 ID:???
>>399
ディスプレイを窓から放り投げる
401Name_Not_Found:04/11/09 19:35:49 ID:???
>400

乙。
別に面白くはなかった。
402Name_Not_Found:04/11/09 19:52:36 ID:???
>>401
殴ってやろうか?
403Name_Not_Found:04/11/09 20:01:55 ID:???
殴れるものならどうぞご自由に〜
404325:04/11/09 20:19:26 ID:???
>>342
>通りかかったのでレスしてみる。
>
>hogehoge ul li {
>hogehoge
>}
>
>で駄目なのか?
>>342

遅くなってしまって申し訳ないけど、
アドバイス通りに記述したら上手く行きました。
ありがとー(゚∀゚)

でもなんで以前の記述だと駄目なんでしょ?
405Name_Not_Found:04/11/09 20:26:40 ID:???
>>400-402
血の気の多い無能どもだ。

>>399
<h2 style="line-height: 0.1; border-top: 1px solid black; padding: 0px">ぬるぽぬるぽぬるぽー!!</h2>

WinIEでは試してないけど、よいこは真似しちゃいけないと思うw
406Name_Not_Found:04/11/09 20:40:29 ID:???
動作確認って、IE6とNN7.0でしかやってないんですけど、
他にも何か検証範囲に入れるべきブラウザってありますか?
407Name_Not_Found:04/11/09 20:58:53 ID:???

>405

WinIE(ver6)でも特に問題ないようです。

ありがとうございました〜!!
408399:04/11/09 21:28:41 ID:???
下線とは書いてるが、枠線とは書いていないわけで……

>>406
Operaとモジラとファイアー
409本物の399:04/11/09 21:30:55 ID:???
>408

そんなの応用すればどうとでもなる。
方法論を知りたかっただけ。

あと、人の名前騙らないでくれないか。
410いやいや俺が本物の399:04/11/09 21:53:36 ID:???
いちいちうぜー
411Name_Not_Found:04/11/09 21:53:53 ID:???
>>399
Gecko エンジン系はエンジン自体のバージョンが上がらない限りレンダリングはかわらん。
・ 仕様に最も忠実なFirefox
・ 中途半端なOpera
・ バカIE
・ テキストブラウザlynx
これだけ確認すれば大丈夫でしょ。
412Name_Not_Found:04/11/09 23:07:00 ID:???
>399

Gecko は、position:absolute; の表示がヘン
413412:04/11/09 23:07:45 ID:???
>411

間違えた。上は411タンへのレスです。
414414:04/11/09 23:29:29 ID:mQVSt2gW
http://trafix.kdn.jp/のサイトですが

試行錯誤を繰り返して何とか自分の思い描いたデザインに近づけてみたのですが
WinのIEまたはIE互換のブラウザ(sleipnirなど)で、
エントリーの最新記事の部分でのみ、日付とタイトル、本文の途中あたりまで
background-colorが反映されていないコトに気付きました。
(Mac使いなので会社のPCでこっそりチェックするまで気付きませんでした(汗))
2番目の記事以降は正しく反映されているんです。。。

MacのIEやSafari、WinのFireFoxなどでは反映されているので原因がさっぱりわかりません。
スタイル、ベースそれぞれのCSSやHTMLもいじってしまっているので
原因が特定しずらいかもしれませんが、何か気付いた点などあればご享受頂けませんでしょうか?
よろしくお願いします。

背景色が消えている部分をドラッグしたり、スクロールバーで下の記事を見る
(最新記事を画面外に一度出す)と表示されるようになったりするようなので謎は深まるばかりです。

ちなみにスタイルシートは
http://trafix.kdn.jp/blog/styles-site.cssです
415Name_Not_Found:04/11/09 23:35:00 ID:???
>>414
見てみた。
確かに白く切れる時があるね。
でも一回スクロールしなおすとちゃんと切れずに表示された。

ソース自体には問題が無いのではないかと思う。
多分IEのバグ?

力になれずにスマン。
416414:04/11/09 23:54:52 ID:mQVSt2gW
すいません。
アドレス→ttp://trafix.kdn.jp/
スタイルシート→ttp://trafix.kdn.jp/blog/styles-site.css
です。
417Name_Not_Found:04/11/10 00:02:09 ID:???
で・・・・なんなんだ>>415は?
関係ないけどサイトロゴのバッグの顔は誰だ?
418Name_Not_Found:04/11/10 00:14:08 ID:???
>>414
MSIEはマージンやパディングに負の値を与えたりすると、
ブロックが二重になったり消えたりすることがあったりなかったりしやすいです。
あやふやな情報で申し訳ない。
419Name_Not_Found:04/11/10 00:31:18 ID:???
サイトも見ずにピーカブーだろうと言ってみる(有名)
widthを明示したら直らない?
420Name_Not_Found:04/11/10 00:40:32 ID:???
>>414
試していないけど、div.dayかdiv.entry-body、もしくは両方にwidth指定してみたらどう?

トップページより、カレンダーから移動できるページ(1日分のページ)の方が
FireFox1.0とIE6.0とで表示が大きく異なっているよ。
修正中だったらスマン。
421Name_Not_Found:04/11/10 00:41:50 ID:???
orz
422406:04/11/10 00:58:52 ID:???
>>411
をを。わかりやすい。
さんきゅう
423365:04/11/10 04:31:42 ID:BFqRDyUx
>>371
遅レスごめんなさい。
改行をせずにやってみたけどだめでした・・・
(涙)
424365:04/11/10 04:44:42 ID:BFqRDyUx
もうひとつ、見識ある先輩方、助けて頂けると有り難いです。
CSSバグリストなどいろいろなところを 参照しても、解決できなくて悩んでいます。
「WinIE6.0/5.5/5」のみ、どうしても左フロートさせた隣の回り込みコンテンツが下の方に落ちてしまいます。

ちなみに
・Win firefox/Gecko/Opera
・Mac IE/Opera/Safari/firefox/Gecko
では、問題なく右に回り込むのに・・・

それでもシェアが高いIEなので悪戦苦闘しています。
425365:04/11/10 04:45:10 ID:BFqRDyUx
↓↓↓ソース↓↓↓

/*これより上は省略*/
/*コンテナボックス*/
div#container {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 760px;
position: relative;/*ヘッダーに対してrelative*/
top: 0;
left:0;
bottom:auto;
right:0;
text-align: left;
}

/*左フロートサイドバー */
div.sidebar {
float: left;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/*右側にコンテンツ。回り込んでほしいのに*/
div#content {
margin: 0px 0px 0px 160px;
padding: 0px 4px 0px 4px;
}
426365:04/11/10 04:45:59 ID:BFqRDyUx
↓↓↓ソース↓↓↓

/*これより上は省略*/
/*コンテナボックス*/
div#container {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 760px;
position: relative;/*ヘッダーに対してrelative*/
top: 0;
left:0;
bottom:auto;
right:0;
text-align: left;
}

/*左フロートサイドバー */
div.sidebar {
float: left;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/*右側にコンテンツ。回り込んでほしいのに*/
div#content {
margin: 0px 0px 0px 160px;
padding: 0px 4px 0px 4px;
}
427365:04/11/10 04:46:49 ID:???
ごめんなさい。連続で書いてしまいました。
428Name_Not_Found:04/11/10 07:47:36 ID:???
>>365の方だけど
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ではだめなんですか?どういうことやりたいのか
いまいちわからないけれども……
429Name_Not_Found:04/11/10 08:38:13 ID:???
誰かテーブルをCSSで装飾するのに参考になる
サイト知りませんか?

例えば、共通項目は連結して罫線を省いたり…。
ブラウザによって表示が崩れる。
430Name_Not_Found:04/11/10 10:03:47 ID:???
反吐が出るな
431365:04/11/10 11:35:59 ID:???
>>428
ソースはまったくその通りなのですが、微妙に2pxくらいの空白が
できてしまいます。

よく、サイドバーに隙間なくメニューが並んでいるサイトとか
↓実例
ttp://www.itmedia.co.jp/
こういうのを、実現したいのですが・・・
432Name_Not_Found:04/11/10 11:41:25 ID:???
>>431
ソース見れば
433Name_Not_Found:04/11/10 15:09:25 ID:???
>>365
なんか、何度も書いている気がするけど。
ul li img{
vertical-align: bottom;
}
を試してみてください。
デフォルトの状態だと、vertical-align が baseline なため、gやyの下に飛び出す分だけ
スキマができます。
434433:04/11/10 15:13:49 ID:???
>>365
もしくはMSIEの場合。li の width を定義している場合、理解しがたいマージンが縦方向
に発生することがあります。ブロック要素にフロートしたときにできるあのスキマに似た。

で、詳しくは検証していないので対処療法かつ糞療法で申し訳ないが、
li要素を先祖に持つliにはこの現象は起きないようなので、よしなにしてください。
435Name_Not_Found:04/11/10 16:35:12 ID:???
>>433
vertical-alignプロパティはテーブル要素系統に対してしか効かないよ。
んで、IEは置換テーブル要素系統になってくれないバグを持ってるのだよ。
436Name_Not_Found:04/11/10 16:57:32 ID:???
>433はどっかの糞リファで覚えちまったんだろう。
437Name_Not_Found:04/11/10 17:32:07 ID:???
ffが親要素の兄弟のfloatにもclearが効くようになってる?
どゆこと?
438Name_Not_Found:04/11/10 18:15:23 ID:???
>437
ハァ?
439Name_Not_Found:04/11/10 19:24:16 ID:???
>435
vertical-alignってインライン要素にも効くんじゃない?
440Name_Not_Found:04/11/10 19:27:32 ID:???
>>439
自分で試してから結論をもってこいボケ
何が
「vertical-alignってインライン要素にも効くんじゃない?」
だよ。アフォかっつうの。
441365:04/11/10 19:38:26 ID:???
>>432
ソースはすでに見ています。テーブルレイアウトではなくCSSのみのレイアウトで実現できないかな、と模索しています。

>>433
それでも上下左右の隙間はかわりません。

>>434
MSIEのバグは承知しています。MSIEでなくても出る隙間をなんとか解決したいのですが・・・
自分の経験上では、vertical-alignプロパティはブロック要素では挙動不審な気がしますが・・・
442439:04/11/10 19:48:50 ID:???
>440
以下のソースで試したよ、macN7.1とwinIE6だけ

ul {list-style:none;}
ul li {margin:0px;padding:0px;}
ul li img {padding:0px;vertical-align:top;}

<ul>
<li><img src="a.gif"></li>
<li><img src="b.gif"></li>
<li><img src="c.gif"></li>
</ul>

vertical-alignは>433が言うようにデフォはbaselineだから
bottomだけでなくtopやmiddleでも隙間は消えた
443433:04/11/10 21:17:20 ID:???
>>442
補足ありがとう。
なんかさんざん罵倒されたので自分だけ不思議なことしてしまっているのかと思った。
444Name_Not_Found:04/11/10 23:19:54 ID:???
結論としては>440が池沼ってことですか?
445Name_Not_Found:04/11/10 23:27:50 ID:???
>>440
アフォ
446Name_Not_Found:04/11/11 00:08:28 ID:???
みんなともだち♪
447Name_Not_Found:04/11/11 00:16:37 ID:???
┌─────┐
├───┬─┤
│ 左 │右│
│ │ │
├───┴─┤
└─────┘

<div id="container">

<div>__TITLE__</div>

<div style="float:left;">
__DOCUMENT__
__DOCUMENT__
__DOCUMENT__
</div>

<div style="float:left;">
__MENU__
__MENU__
__MENU__
</div>

<div style="clear:both;">__FOOTER__</div>

</div>

左と右に別々のbackground-colorを指定した時、
内容の少ない方は背景の描画が途中で終わってしまいます。
左右の中身は動的に変化するので高さを固定できません。

この場合、双方の帳尻を合わす上手な手法とは??
448Name_Not_Found:04/11/11 00:20:48 ID:???
>>447
div#container の背景画像を上手に使う。
449447:04/11/11 00:41:09 ID:???
>>448
閃きました。
どうもありがとう。
450Name_Not_Found:04/11/11 07:44:20 ID:???
閃いたのか
451448:04/11/11 08:04:53 ID:???
>>449
おそらくその閃きはあっていると思うけど、
div#container の小要素のfloatをclearするのを忘れずに。
452Name_Not_Found:04/11/11 08:06:25 ID:???
imgってpなどに入れることが推奨されていますか?
453Name_Not_Found:04/11/11 08:43:22 ID:???
>>452
はい。
imgなどのインラインレベルの要素は、body直下にはおけませんな。
また、div直下におくのもオススメされてはいません。
454Name_Not_Found:04/11/11 09:46:20 ID:???
自分>>452ではないけど、ちょっと便乗で質問です。

pって段落だから、本文中に挿絵っぽく入る画像ならそれで納得いくんですが、
例えば丸角の枠を持ったボックスを作りたい場合とか、
そういう文書構造と関係ない装飾画像の場合ってのは、
どうマークアップするのが望ましいんですかね?

そういう場合でも頑なにpに入れるよりはdivのがいいかと思うんですけど。

背景にするにしても、その画像を背景として置くことだけを目的にしたボックスを作るとか、
それはそれで構造的には本末転倒ですよね。
455Name_Not_Found:04/11/11 09:51:45 ID:???
>>453
スレ違い気味でしたのにどうもありがとうございました
456Name_Not_Found:04/11/11 12:09:46 ID:???
floatについて質問です。

.float1 { float: left; }
.float2 { float: right; }

<div class="hoge">
<div class="float1">左側</div>
<div class="float2">右側</div>
</div>
<p>テキストテキストテキスト</p>
<p>テキストテキストテキスト</p>

こんな感じに、あるボックス(この場合hoge)に含まれるコンテンツ全てをfloatさせた場合、
clearはどこかに必要なのでしょうか?

┌──┐   ┌──┐
|左側|   |右側|
└──┘   └──┘
テキストテキストテキスト。
テキストテキストテキスト。

ブラウザでは、clearなしでも上の図のように表示されるので、
hogeのボックスが閉じた時点で、floatの継承が切れてるのかなと思いながらも、
直すところがあれば直しておきたいのですが、clearはどこかに必要でしょうか?
457Name_Not_Found:04/11/11 12:32:45 ID:???
>>456
┌──┐                ┌──┐
|左側|テキストテキストテキスト。|右側|
└──┘                └──┘
テキストテキストテキスト。

IE6とNN7.1ではこうなったよ
458Name_Not_Found:04/11/11 12:48:37 ID:???
>>457
実際に私がいじってるコードは、もっと多重に組んである構造で、
説明の際に全部書くのもアレかとおもって端折って>>456みたいに書いたんで、
今私も>>456の通りのコードで試してみましたが、仰る通りでした。

ボックス内の要素全部をfloatした場合、そのボックス閉じた後にもfloatの影響が残ってて、
閉じたあと最初に出てくる要素にclearを指定してあげないといけないと、
そういうことですね。

ちなみに、端折ってない元のごちゃごちゃしたコードだと、
Win IE6.0 NN7.1 Opera7.5 Firefix1.0
Mac IE5.2 NN7.1 Opera7.5 Safari 1.2
以上で確認して、どれもclearなしで大丈夫なようだったので、
おや?と思ってつい質問してしまった次第です。

とりあえずclear入れておきます、お騒がせしました。(´Д`;)ヾ
459Name_Not_Found:04/11/11 14:35:49 ID:???
MacのSafari、Operaで、フォームのinput要素(text)に付与したborder系スタイルが適用されません。
submitボタンも、スタイルを無視してAquaっぽいデフォルトの見た目を堅持してしまいます。
これはブラウザ側の問題で、どうしようもないのでしょうか?

それとも、何かうまく指定する方法があるようでしたら教えてください。
460Name_Not_Found:04/11/11 14:55:29 ID:???
.sidetitle {/* 左右の各種コンテンツのタイトル */
padding-right: 3px;
padding-left : 20px;
padding-bottom: 3px;
font-weight : bold;
background-image : url(http://i-------/fc.gif);
background-repeat : no-repeat;
background-attachment : fixed;
background-position : left center;
}
IEでは、background-imageは表示されるのですが、Firefox,Operaでは表示されません。
imgタグで直接記述するしか方法は無いのでしょうか?
461Name_Not_Found:04/11/11 16:51:27 ID:???
NetScape4.7と、IE6.0でスタイルシートを切り替える方法を教えてください。

462Name_Not_Found:04/11/11 18:32:36 ID:NiyCOEX1
>>459
MacOpera/Safariにはimputのスタイルは反映されないと思います。
たしかバグ事典にもあったような・・・

私の場合、しょうがないのでボタンだけ画像にしています。
463Name_Not_Found:04/11/11 18:36:03 ID:NiyCOEX1
>>461
1.@importを使う
NN4は@importを無視するのでNN4用のをデフォルトで読み込ませて
importするものをIE6用のものにする
2.javascriptでブラウザ判定して分岐させる
464Name_Not_Found:04/11/11 19:32:40 ID:???
>>460
なんでfixedなのよ
465Name_Not_Found:04/11/11 20:14:37 ID:???
普通のテキストにカーソルを乗っけた時に色や背景色を変えることは出来ますか?
a:hoverじゃなくて
466Name_Not_Found:04/11/11 20:25:40 ID:???
>>465
仕様的にはどの要素でもhoverできることになってるんだけど、
MSIEはaだけなので、block化してみたりとか、いろいろ手を焼かされます。
467Name_Not_Found:04/11/11 23:04:18 ID:ivvQKbBF
<X>または<Y>の中の<Z>にスタイルを適用したい場合
(<X><Z></X>と<Y><Z></Y>の<Z>に適用したい)

X,Y Z {}
とすると、いずれのZにもスタイルが適用されないばかりか
それより前に設定していたXおよびYのスタイルも無効になって(というか上書きされてる?)しまいます。
まとめて指定するには、どのように指定すればいいのでしょうか。
468Name_Not_Found:04/11/12 00:36:17 ID:???
>>467

X Z,
Y Z{
// よしなに。
}
469467:04/11/12 00:43:46 ID:???
>>468
全力で感謝します。
470Name_Not_Found:04/11/12 02:01:37 ID:ERM9DB8m
改行について質問です。
スタイルシートを使って「テーブルのセル内でどんな文字が出てきても改行しない」
という指定は可能でしょうか?

.company {
width:20px;
height:15px;
overflow:hidden;
white-space:nowrap;
order:0px solid black;
}

<TABLE><TBODY><TR>
<TD class="company">(株)会社名</TD>
</TR></TBODY></TABLE>

としたとき、
_____
|(株|
 ̄ ̄
のようにwidthやheightからはみ出す分は改行せずに隠れて欲しいのですが、IE6の場合は無視されて改行されてしまいます。
word-break:keep-all や line-break:strict をいっしょに使用しても
"(" や ")"を含め、各種記号が出てきた時に自動改行されてしまいます。
現状で分かっている方法は
1.displayでinlineやblockなどを指定しておけばOperaはOK
2.IE6でも、DIVタグやSPANタグで囲んでSPANに対して上記のcompanyを指定すればOK
3.NOBRタグでセルの内容を囲む(←タグが廃止になっているためあまり使用したありません)
現状では2が一番の候補なのですが、適用箇所が非常に多いため躊躇しています。
この表示方法はスタイルシートのみで実現出るのでしょうか。よろしくお願いします。
471Name_Not_Found:04/11/12 08:30:29 ID:???
fixed入れたらそりゃダメだわな…。IE基準で考えるとこうなる。
472Name_Not_Found:04/11/12 10:31:23 ID:Tfc5nIHN
table {
margin-left: auto;
magin-right:auto;
max-width:85%;
}
とやると、IE6の場合、テーブル全体がセンタリングしてくれないのですが
どうすれば良いのでしょうか?
473Name_Not_Found:04/11/12 11:01:02 ID:???
>>472
MSIEがmax-widthを理解してくれないから。
474Name_Not_Found:04/11/12 12:25:09 ID:D/qm+0DS
趣味サイトでブログのCSSテンプレート配布してるんだけど、NNとIE4.x系のみ無視してます。みたいな事公言しても平気だよね?ファイアーフォックスも出たことだし
475Name_Not_Found:04/11/12 12:37:32 ID:???
なにが平気なんだ?
切り捨てようが、それ用に作ろうが喪前の勝手だろ。
いっそのことNN4専用ですとか書けよw
476Name_Not_Found:04/11/12 15:51:26 ID:???
title要素表示についての質問です。

*{
display:block;
font-size:1em;
margin:0;
padding:0;}
title{
text-align:center;
background-color:gray;}
body *{ /* 全要素 */
display:inline;}
address, .blockcode, blockquote, .h, p, pre, .section, .separator, dl, ul, .nl, ol, dl, dd{
display:block;}
link, meta{
display:none;}

Mozilla 1.7とOpera 7.60pr2ではtitle要素が表示できましたが、IE 6では出来ません。
IE 6でtitle要素をCSSで表示する方法があれば教えてください。
477Name_Not_Found:04/11/12 16:23:48 ID:???
┏━━━━━━━━━
┃inbox
┃┏━━━━━━━┓
┃┃ banner     ..┃
┃┗━━━━━━━┛
┃┏━┓┏━━━━━
┃┃ ..┃┃A
┃┃ ..┃┃┏━┓┏━┓
┃┃左┃┃┃中┃┃右┃
┃┗━┛┃┃ ..┃┃ ..┃
┗━━━━━━━━━

全部Float:leftにしたところまではよかったのですが・・・
このレイアウト全体を画面中央にもっていくにはどうしたらよろしいでしょうか。
よろしければ護教授お願いします。
Firefox・IEに対応させているのですが、ここで詰まってしまいました (;ω;)
478Name_Not_Found:04/11/12 16:34:36 ID:???
>>473
ありがとうございます。
MSIEでもテーブルをセンタリングさせる場合、
<div style="text-align:center">
</div>
で、テーブルを囲むしかないのでしょうか?
479Name_Not_Found:04/11/12 18:22:58 ID:???
>>477
inboxを
margin-left:auto;
margin-right:auto;
では無理なの?
480Name_Not_Found:04/11/12 18:31:59 ID:???
>>479さんのがスマートですけどauto未対応なのが多い系
481Name_Not_Found:04/11/12 19:28:15 ID:???
>>476
ホントは無理だってわかってるくせにw。
あとどうせなら

  * { display: inline; }
  html, title, body, div... { display: block;

とした方がスマートでは。

>>480
そこで text-align: center; ですよ。
あと質問者はレス番号を名前欄に入れたほうがいいよ。
482Name_Not_Found:04/11/12 22:24:15 ID:???
{text-align : ceter;}でブロック要素囲ってるアホがいるスレはここなのか……
483Name_Not_Found:04/11/12 22:31:20 ID:???
俺もceterはまずいと思う
484Name_Not_Found:04/11/12 22:32:15 ID:???
>>482-483
MSIE5対策ではなかろうか。
485472,478:04/11/12 22:57:13 ID:???
結局、どうやるのが一番スマートなのですか?
486Name_Not_Found:04/11/12 23:20:50 ID:???
ceterって何?
487Name_Not_Found:04/11/12 23:22:17 ID:???
>>485
事情が許せばstrictにしてmargin:auto
488Name_Not_Found:04/11/12 23:28:25 ID:???
>>484
ceterで?
489Name_Not_Found:04/11/12 23:28:23 ID:???
>>485
結局、とか言いつつ他人にまとめてもらおうという心意気も結構なんだが、
とりあえず「css ブロック センタリング」とかでググるとよかろう。
490Name_Not_Found:04/11/12 23:28:58 ID:???
>>485

親ブロック{
text-align: center;
}
子ブロック{
text-align: left;
width: 適宜;
margin-left: auto;
margin-right: auto;
}

ただし、text-align は MSIE5系に配慮したハックなので、よしなに。
491Name_Not_Found:04/11/12 23:29:09 ID:???
>>485
ceterが響き的にもスマートでいいんじゃないか?
492485:04/11/13 00:14:12 ID:???
>>487-491
ありがとうございます。
strict以外の場合、>>490さんのようにするしか
なさそうですね。
よくみてみるとFAQに入っていていました(^^;
とにかくありがとうございました。

493476:04/11/13 00:47:52 ID:???
>>481
無理かなとは思っていたのですが…。
もしかしたら邪道に近い裏技(?)があるか、とも思い書き込んだ次第です。
htmlを書き換えるのが非常にめどいので…。

# title要素を個別に指定していけたのか…試してみます。
494Name_Not_Found:04/11/13 00:50:49 ID:???
>>493
そもそもタイトル要素はメタなので本文に表示させようとする行為自体おかしい。
495476:04/11/13 01:03:48 ID:???
>>481
普通に出来ました。ありがとうございます。

>>494
確かに、メタ情報を本文に表示させる行為自体の是非は仕様書をそれほど読んでいないので良く知りません。
ただ、メタ情報と言えどtitleに関しては文書の中でも重要な要素と思って表示させようと思っているだけです。
いや、ほんとはtitle要素を表示させると便利だからと思って。
だめですか。
496Name_Not_Found:04/11/13 02:18:03 ID:???
>>495
別にいいですよ
4971:04/11/13 08:39:28 ID:???
テンプレ読まない人増えると哀しい
498158:04/11/13 08:54:49 ID:DM4B4hvf
今更になってすいません。
外部に書いたCSS、読み込まれるようになりました!
理由はわかりません…_| ̄|○
>>165 のも試したのですが、その時はダメでした)
とりあえずとにかくありがとうございます!!!

それなのに、未だに背景画像が表示されません。
作成環境:手書き
確認:windows IE6.0
 cssソース→background-image:url("http://***.gif") no-repeat bottom right;
背景がない=白になってしまいます。

macIE5.1ではちゃんと表示されるのですが、どうすればwindowsのIEで、
背景を表示させることができるのでしょう?
教えて下さい。
499Name_Not_Found:04/11/13 09:16:56 ID:???
>>498
抜粋されても分からんのでCSSファイルをうpするかアドレス見せてくれ。その方が早い。
多分君が気付いていない場所に問題があって、気付いていないから抜粋していないわけで。
500498:04/11/13 09:23:03 ID:DM4B4hvf
了解しましたッ

body{font-size:small;color:#404040;background-color:transparent;
background-image:url('http://xxxxxxxxxx.jp/topbg.gif') no-repeat;background-attachment:fixed;
}

a:link{color:#662011;text-decoration:none;}
a:visited{color:#999888;text-decoration:none;}
a:hover{color:#da8a38;}
a:active{color:#da8a38;}


.right{float: right;}
.menu{float: right;margin-top:25px;}
table{font-size:small;line-height:100%;}
501Name_Not_Found:04/11/13 09:42:38 ID:???
とりあえずfixedが邪魔。

body {
font-size : small;
color : #404040;
background : url('http://xxxxxxxxxx.jp/topbg.gif') no-repeat
}

502498:04/11/13 09:59:32 ID:???
キタ──────(゚∀゚)──────!!!!!!!!!!!
>>501
ありがとうございます!!!!
とりあえずレス参考に『-image』のみ外してみたら、背景表示されました!
早朝なのにありがとうございます!!!!(泣
この御恩は忘れません。・゚・(ノД`)・゚・。
503501:04/11/13 12:04:43 ID:???
乙。こうやって少しずつ慣れていくと面白くなるのがCSS。
504Name_Not_Found:04/11/13 12:25:36 ID:???
HTMLでの見栄え定義からCSSに移行した時、
ちょっとCSS変えただけでまったく違うレイアウトになるんで本気で驚いた。
初めて正しく書くという事の大切さを知った時だったな。
505Name_Not_Found:04/11/13 13:18:18 ID:???
>>504
働けよ
506Name_Not_Found:04/11/13 13:20:06 ID:???
>>504-505
なんかワロタ。
507Name_Not_Found:04/11/13 16:26:49 ID:???
センタリングで以下のようにしたい場合はどうするんですか?

        その一 あああ
        その二 いいいいい
        その三 うううううううううう
        その四 ええええ
508507:04/11/13 16:30:50 ID:???
ちなみに言うと

左揃えのままセンタリングしたいということです。
509Name_Not_Found:04/11/13 16:51:09 ID:???
-CSS-
dl { margin:auto; }
dt { clear:left; float:left; width:任意; }

-HTML/標準準拠モード-
<dl>
<dt>なにか</dt>
<dd>あーだこーだ</dd>
<dt>なぜ</dt>
<dd>かくかくしかじか</dd>
</dl>
510Name_Not_Found:04/11/13 17:29:57 ID:???
それがどうした?
511Name_Not_Found:04/11/13 17:36:51 ID:???
>>510
お前がどうしたよ
512Name_Not_Found:04/11/13 17:56:10 ID:???
いや、ちょっとね。
513Name_Not_Found:04/11/13 18:11:19 ID:???
ちょっとなんだ?
514Name_Not_Found:04/11/13 18:12:55 ID:???
>509 は >508 への返信なのでは? 違ったらゴメン
515Name_Not_Found:04/11/13 18:21:17 ID:???
違うとおもう
516Name_Not_Found:04/11/13 22:56:35 ID:???
一度colorで色を指定した要素を、デフォルト状態に戻す
(文字色を可変(?)にする)ということは可能でしょうか?
例えば、<strong>に{color:red;}を指定すると、strongで囲んだ
文字色は基本的に赤となりますが、この指定を打ち消すということは
出来るのでしょうか?

宜しくお願いいたします。

517Name_Not_Found:04/11/13 23:01:28 ID:???
出来るのでしょうか?と訊かれれば、出来ると答える。
518Name_Not_Found:04/11/13 23:01:50 ID:???
文字色を変えたい<strong>部分にインラインでカラー指定やり直すとか
519Name_Not_Found:04/11/13 23:21:53 ID:???
迅速なレスありがとうございます。

>>518様のような方法では無く、<strong>に{color:red;}を指定する
前の状態(色指定無しの状態)に戻すことは出来るのかということです。

例えば色指定無しの場合で、<p>の文字色を緑にした場合、中に含まれる
<strong>も当然緑色になりますが、一度<strong>に対して文字色を指定して
しまった場合、色指定無しの状態に戻すことは可能なのでしょうか?

ご教授宜しくお願いいたします。
520Name_Not_Found:04/11/13 23:32:07 ID:???
>>519
例えば、デフォルトの指定が、strongは赤、pは緑だとして、
pの中に入ってるstrongだけは、赤にしないでpの緑を適用させたい、
その際に、新しくclassを指定したりはしないで、
あくまでstrongとして、緑にしたい、つまり赤指定を無効にしたい、そういうことかね。

なんか、「戻す」って単語が話をわかりにくくしてるような。
521Name_Not_Found:04/11/13 23:33:34 ID:???
<strong>にしなけりゃ済む話じゃないか?
522Name_Not_Found:04/11/13 23:48:58 ID:???
p {color:red;}
strong {color:green;}
p strong {color:red;}
でいいのか
inheritはIEじゃ使えない
523Name_Not_Found:04/11/13 23:52:06 ID:???
なに?
524Name_Not_Found:04/11/13 23:52:58 ID:???
>>552
オマイって奴は・・・
525Name_Not_Found:04/11/13 23:53:45 ID:???
>>552 がんばれ
526Name_Not_Found:04/11/13 23:59:47 ID:???
filterの書き方はIE4用とIE5+DirectX用がありますが、解説書がIE5+DirectX用の書き方ばっかりなんです(IE4用は端にちょびっと)。何か理由があるんですか?
527Name_Not_Found:04/11/14 00:03:40 ID:???
著者に訊いてください。
528Name_Not_Found:04/11/14 00:10:20 ID:???
>>520
日本語が不器用で申し訳ございません。そんな感じです。
簡単に言ってしまうと、『外部CSSでstrongを赤に指定したけど、
その指定を"後から"無かったものにしたい』ということです。
変な例を上げたのがまずかったですね。すいません。

最初、{color:none;}とかでイケるとか思ってたんですけど(笑)

>>522
いえ、『色指定し直す』では無く、『色指定を無効』にしたいのです。
inheritとは初めて聞きました(汗)。調べてみます。
529Name_Not_Found:04/11/14 00:38:02 ID:iDTcfwSS
普通は、HTMLの中でcssファイルの位置を指定して呼び出しますよね。
HTML -----(参照)-----> css

逆は出来ないでしょうか?
特定のディレクトリ内のHTMLファイル全部にcssを適用する。っていう感じで。
530Name_Not_Found:04/11/14 00:42:07 ID:EwXUBDWf
プリントする際に見出しが最後の行に来る、いわゆる「首吊」を防ぐ事は、CSSによって実現可能ですか?
可能ならば、どのようにすれば良いのでしょうか。
531Name_Not_Found:04/11/14 00:44:17 ID:???
>528 どういう目的で打ち消したいのかを書いたほうが、
解決しやすくなるかも。できればソースものせて。

>529 おそらく不可。
どのCSSを読み込むのか、それを記述するのがHTMLの役目。
532528:04/11/14 01:31:45 ID:???
>>531
自分が運営しているWebサイトは管理の都合上、各フォルダごとに別のCSSを
読み込みます。しかし主な設定は全く同じなので、各CSSごと
『@import』を使い、『default.css(固定スタイルシート?)』を
読み込むのです。この『default.css』内で、先ほど何度も例にしましたが、
<strong>を{color:red;}にしているんです。

それで、あるフォルダ(コンテンツ)だけ文章構成の都合上、
<strong>の色指定を無しにしたいという状況が発生しました。
『default.css』は読み込みたいんですが、『strong{color:red;}』だけが
邪魔ということです。以下に簡易的なソースを書かせて頂きます。
533528:04/11/14 01:34:04 ID:???
ttp:abc.net/index.html
(略)
<link rel="stylesheet" href="abc.css" type="text/css" />

ttp:abc.net/2ch/index.html
(略)
<link rel="stylesheet" href="2ch.css" type="text/css" />

【abc.css】
@import url(./default.css);

.text{背景色:青;}
.header(以下略)

【2ch.css】
@import url(./default.css);

.text{背景色:緑;}
.header(以下略)

【default.css】
body{なんとか:かんとか}
p{なんとか:かんとか}
(中略)
strong
{color:#ff0000;}


こんな感じです。ご教授よろしくお願いいたします。
534Name_Not_Found:04/11/14 01:57:38 ID:???
>>532
テンプレサイトくらい読んで来い。市ね
535Name_Not_Found:04/11/14 02:20:19 ID:???
>>530
h1, h2, h3, h4, h5, h6 {page-break-after:avoid}
536507:04/11/14 04:01:30 ID:???
スルーされたので誰かお願いしマッスル
537Name_Not_Found:04/11/14 04:32:25 ID:???
>>536

テーブル使う
538Name_Not_Found:04/11/14 04:37:13 ID:???
>>528
長々と書いた割にはくだらない質問。丁寧に書けばいいってもんじゃない。
@import がわかってるなら色を上書きすればいいだけ。打ち消しなどない。

>>507
それが何をあらわすのか知らないけど、dl か table をセンタリングすれば?
dl ならば >>509 が回答だと思ったけど。もうすこし手を加えるべきだが。

眠いせいか言い方キツイがこれは愛なのです。超頑張れ。
539507:04/11/14 04:50:47 ID:???
>>537>>538
とりあえずテーブルの項を勉強してみマッスル。
540Name_Not_Found:04/11/14 08:55:50 ID:???
すいません質問させてください。

a:link {color:#0000ff}
a:visited {color:#800080}
a:hover {color:#ff0000}
a:active {color:#ff0000}
{text-decoration:none}

これをHTML上で<h3>あいうえお</h3>という感じで書きたいのですが、
CSSではどのようにすればよろしいのでしょうか?
541Name_Not_Found:04/11/14 08:58:32 ID:???
>>540
ちょっと意味がわかりません。。
542540:04/11/14 09:09:47 ID:???
えっとCSSで
a:link {color:#0000ff}
a:visited {color:#800080}
a:hover {color:#ff0000}
a:active {color:#ff0000}
{text-decoration:none}
を 下の{}内に入れることは出来ますか?

h3 { }

543Name_Not_Found:04/11/14 09:19:39 ID:???
>>542
h3 { }の中にそれは入らんよ。
が、そのaへの指定を、h3だけに適用させたいってことか?
テンプレに乗ってるサイトで勉強して来いといいたいところだけど、

h3 a:link{〜
544540:04/11/14 09:32:01 ID:???
>>543
あ!なるほど。

ありがとうございました。
545Name_Not_Found:04/11/14 09:49:05 ID:???
初心者はテンプレ読んだところで、
ピンと来ないわけですよ。
546Name_Not_Found:04/11/14 09:52:38 ID:???
だからこそ回答者が必要なわけで。
頑張ってね>>540
547Name_Not_Found:04/11/14 11:50:00 ID:???
根本的なところから勉強しなおしたほうがいいと思う。
548528:04/11/14 12:15:16 ID:???
>>538
ありがとうございます。打ち消しは存在しないんですか。
やはりその方法しか無いんですね。了解いたしました。
549Name_Not_Found:04/11/14 18:05:33 ID:???
あるサイトのCSSで、こんなの見たんですけど。

.hidari { float: left; }
.migi { float: right; clear: right; }

<div class="hidari">左側</div>
<div class="migi">右側</div>

┌──┐  ┌──┐
|左側|  |右側|
└──┘  └──┘

floatさせて段組させた要素のうち、順番的に最後にあたるfloat適用要素に対して、
併せてclearを指定するってのはアリなんでしょうか?
ブラウザ上では、一応、floatもclearもできているようだったのですが。
550Name_Not_Found:04/11/14 18:20:58 ID:???
>>549
ハァ?
551Name_Not_Found:04/11/14 18:27:05 ID:???
>>550
チンピラぽくてワロタ。
552Name_Not_Found:04/11/14 18:42:46 ID:???
>>551
何を見てもとりあえず逆ギレがデフォルトになってるような奴なw
553Name_Not_Found:04/11/14 20:52:46 ID:???
>>551-552
お前は>>549の質問の意味わかるのか?答えてやれよ。
俺は「ハァ?」しか言えないわ。
554Name_Not_Found:04/11/14 21:44:20 ID:???
>>553
俺は>>550で、>>551ではないが、
>>449の質問の意味って言われても、書いてある通りじゃないのか?

floatを指定した要素は、普通、その直後の要素に対してclearを指定してボックスの回り込みを解除するよな。
でも>>449の例は、直後の要素じゃなくて、最後のfloat要素にclearも同時に入れちゃってるんだけど、
その用法はOKなのかNGなのかってことを聞いてるんだろ。

で、ブラウザ表示では、floatによる回り込みも、clearによる回り込み解除もできていたと。
どのブラウザかなのかは知らんが。

で、肝心の答えなんだが、俺はやったことないから知らん。
というか、そんな方法考えたこともなかったんだが、OKなの?むしろ俺も聞きたいわ。
とりあえず今自分で試してみたら、確かに回り込みも解除もできてるみたいだけど。

てかまんどくせ。(´Д`)

555まだ初心者ですが:04/11/14 21:52:29 ID:???
>>554
この方法が全てのブラウザで有効なら使いたい気もするが、文法上
は×でしょうか?

自分は<div style="clear:both"></div>って空要素を入れてるのですが、
実際、クリアするのに適当と思われる方法どうのような処置でしょうか?
556550=554:04/11/14 21:56:46 ID:???
>>555
自分の場合も、clearが必要な状況で、かつ直後に適切なボックス要素が無い場合、
空のdivで、要するに>>555と同じ方法で対処してきたから、
だから>>554で書いた通り、ちゃんと文法の規則として知ってる人がいれば聞きたいんだけど。

いま引き続きWinとMacのブラウザでテスト中。
557Name_Not_Found:04/11/14 22:00:31 ID:???
>>554
いつどこでどうやってclearプロパティを使うかなんて勝手にしろよ。
1 2
3 4
5
というレンダリングを期待する時に
「4でclear:left、5でclear:right」しようが「5でclear:both」しようが
どちらが正しいもくそもあるかよ。自演粘着してないで池沼は消えろよ。
558Name_Not_Found:04/11/14 22:03:21 ID:???
CSSで文法上???
規則????

一体何言ってんだ?
559Name_Not_Found:04/11/14 22:03:49 ID:???
>>557
>>449は4でclear:rightしちゃってるから問題なんじゃないのかと。
560Name_Not_Found:04/11/14 22:05:52 ID:???
>>556
>自分の場合も、clearが必要な状況で、かつ直後に適切なボックス要素が無い場合、

どういう状況なのそれ?直後の要素でclearできない状況ってこと?直後の要素がないのに
意味不明にclearしておきたいのか?

よくあるのは<br style="clear:both">とかだけどそれは実装のバグを回避するためのものだから
結果が全て。正しいとかはないから大丈夫だよ。
561557:04/11/14 22:08:52 ID:???
>>559
ん?というか
「4でclear:right、5でclear:left」しようが「5でclear:both」しようが
の間違いだったな。

で、何が問題なの?clear:rightするのは自分より前でfloat:rightしてる要素の
となりに回りこまないためだろ?
562Name_Not_Found:04/11/14 22:09:52 ID:???
基本的には、>>449は理屈としてはあり得ない形でしょ。

ただ、例えば。

┌─────────┐
     parent
|┌──┐  ┌──┐|
||左側|  |右側||
|└──┘  └──┘|
└─────────┘
┌─────────┐
       text
└─────────┘

左側のボックスにfloat:left



つーかお前らみんなガラ悪すぎ
563Name_Not_Found:04/11/14 22:13:34 ID:???
ちょう途中で書き込んだ俺が一番ガラ悪いかもしれない罠。
正直すまなかった。

要するに、理屈としては>>449はおかしい。
ただ、ボックスの横幅次第では、見た目上clearがなくてもレイアウトが保たれる場合もある。

>>561
たぶん、>>449は「4でclear:right」して、かつ、「5でclear:both」しない場合に、
何故か5が回り込まない状況があるんだけど、っていう主旨でしょ。
それはきっと横幅の指定の問題。

とりあえず、>>562については真剣にすまなかった。
じゃあ逝ってくる。
564Name_Not_Found:04/11/14 22:14:30 ID:???
>>563
>>449>>549

あg;おいらがうぇあえwがいwがえwgwれあふじこlp;
565昔の人:04/11/14 22:16:28 ID:???
>>549
別に問題ありません。よく考へたまへ。
clearは、そのセレクタの前までの先行するfloatを解除するものであり、
floatはそのセレクタから後続するボックス(のテクスト)の回り込みをさせるもの。
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#flow-control
例へばFAQのA8「<dl> の整形」(>>7)を見ませう。
そこではdtに対し、clear:left;とfloat:left;を同時に指定してゐます。
なほ、floatさせる要素にはwidth指定が必須です。
566Name_Not_Found:04/11/14 22:19:25 ID:???
>>565
>>549が一人で暴れてるだけだろうからほっておいてやれ。
567Name_Not_Found:04/11/14 22:29:18 ID:???
>>565
昔の人ってしんしょうだからそういう名前にしてるの?
568Name_Not_Found:04/11/14 22:32:29 ID:???
俺がまとめてやる。
floatさせたら、回り込み最後尾の要素の直後でclearしろ、必ずだ。

シンプルな話じゃないか。
569まだ初心者ですが:04/11/14 22:36:38 ID:???
>>568
それは>>549が正解ということですか?
570まだ初心者ですが:04/11/14 22:37:24 ID:???
あっ、違うか
失礼。
571Name_Not_Found:04/11/14 22:37:36 ID:???
また馬鹿が来たよ。とりあえず仕様書くらい読めよ。
572Name_Not_Found:04/11/14 23:52:30 ID:???
>>567
/* CSS・スタイルシート質問スレッド【18】 */
http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
522 名前: Name_Not_Found 投稿日: 03/05/03 15:43 ID:???
なんか旧仮名遣いな感じのヤシがいるな。

523 名前: Name_Not_Found 投稿日: 03/05/03 15:59 ID:???
きっと昔の人なんだよ。

524 名前: Name_Not_Found 投稿日: 03/05/03 16:09 ID:???
昔の人にしては最近の文化に詳しそうだな。
中の人も大変ですね。
573Name_Not_Found:04/11/15 00:32:14 ID:???
>>572
つまり2ちゃん中毒のおっさんってことだな?
574Name_Not_Found:04/11/15 11:07:51 ID:???
呼んだ?
575Name_Not_Found:04/11/15 15:35:02 ID:???
>>574
ハァ?
576Name_Not_Found:04/11/15 15:57:25 ID:???
オレ?
577Name_Not_Found:04/11/15 16:56:38 ID:bAOKF0m9
ほぼ全てのテキストにマージンを作りたいので、
スタイルシートで、
P{
margin: 2% 5% 2% 5%;
}
としています。

しかし、ごくたまにマージンを作らずに、そのままおきたいテキストもあるのですが、このような場合、

・Pを使わずに記述する
・上のをP.fooにして、ほぼ全部のP属性(そのままおきたいテキスト以外)にfooというクラスを設定する
つまり
P.foo{
margin: 2% 5% 2% 5%;
}
に変更する

が有効だと思いますが、前者はちょっと嫌な感じがして、
後者は非常に面倒くさいです。
もっとスマートな方法ってないでしょうか?
よろしくお願いします。
578Name_Not_Found:04/11/15 17:02:24 ID:???
>>577
マージンが必要ないpにクラス(仮にhogeとする)振ればいいんでないのかな。

p {margin:2% 5% 2% 5%;}
p.hoge {margin:0;}
579Name_Not_Found:04/11/15 17:05:54 ID:???
hogehoge
580Name_Not_Found:04/11/15 17:06:29 ID:???
>>578
どうもありがとうございます。
その方法で無事出来ました。
なんだか単純なことなのに機転が回らなくてすいません。
581Name_Not_Found:04/11/15 21:17:47 ID:???
tableにおいて
IEのみCSSが反映されないのですが
そういうバグは既出ですか?
字送りを1.5倍にしているにもかかわらず
ベタになってしまいます。
ちなみにIE以外は問題なし。


.text { font-size: 12px; line-height: 1.5em }

<td class="text">お前なんか嫌いだお前なんか嫌いだ</td>
582Name_Not_Found:04/11/15 21:37:20 ID:???
>>581
なぜ line-height:1.5; ではないのかについて。
583Name_Not_Found:04/11/15 22:04:21 ID:4VDwhfmq
position:absolute;
right:10px;
bottom:10px;

このbottomの起算点がNN7.1でおかしいのですが、バグですか?
今テスト用のソースあげます。
584Name_Not_Found:04/11/15 22:23:09 ID:???
>>581
IE のみという時点で判断していただければよいかと。とっくにガイシュツです。
あと line-height には単位をつけない方が良いですね。

>>583
スクロールしたらずれる、とかじゃないよね?
585583:04/11/15 22:34:17 ID:4VDwhfmq
バグリストを見てたら
>[2-212]フロート配置要素の子要素を絶対配置にすると親要素を無視した配置になる(N6.1)
というのがありました。floatがカラムと駄目なようです。でもnn7なのに何故?
586583:04/11/15 22:39:40 ID:4VDwhfmq
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>CSSテスト</title><style type="text/css"><!--
div{
width:200px;
height:200px;
border:1px solid #000;
position:relative;
top:0;
left:0;
float:left;
}
span{
display:block;
width:50px;
height:50px;
border:1px solid #a00;
position:absolute;
left:0;
bottom:0;
}
--></style></head><body>
<h1>テスト</h1>
<div>大人<span>子供</span></div>
<div>大人<span>子供</span></div>
</body></html>
587583:04/11/15 22:53:17 ID:4VDwhfmq
とりあえずfloatでなくて親要素もabsoluteにすることで解決しました。
しかしそのせいで文字固定になるのが痛いです;
モジラもまだまだ駄目なんですね。
失礼しました。
588Name_Not_Found:04/11/16 01:11:21 ID:tZdjKHEl
http://www.geocities.jp/fewqfewqfewq/chess.html

これをチェスボードみたいにチェック柄にしたいんですが、
どうすれば出来るんですか?
589Name_Not_Found:04/11/16 01:22:40 ID:???
>>588
塗る・塗らないを交互に繰り返す。
手間を省きたいなら、JSなり鯖プログラムにGO
590Name_Not_Found:04/11/16 01:26:17 ID:FNwOGXPH
>>589
「塗る」方法がわかりません・・
591Name_Not_Found:04/11/16 01:33:49 ID:???
>>590
市ね
592Name_Not_Found:04/11/16 01:34:20 ID:???
>>590
テンプレの>>4あたりを見て適当な解説サイトでCSSの勉強してきましょう。

てか、>>588のページ見る限り、
そこまで出来ていて、でも塗れないってのが非常に不思議なんだが。
background-colorも使ってるみたいだし。

全然違う人が作ったページだったりするのかね、まあ何でもいいけど。
593Name_Not_Found:04/11/16 02:01:08 ID:FNwOGXPH
自分で作りました。
でも出来ません。

ソースをここに書いてくれるだけでもいいんですが・・・
594Name_Not_Found:04/11/16 02:15:32 ID:FNwOGXPH
枠の中に文字をいれて、それに色をつけることなら出来ますが、
枠の中全体を色で潰すのはわからないんです。
■を使っても枠内を全て色付けすることは出来ませんし。
595Name_Not_Found:04/11/16 02:24:21 ID:???
>>594
だから>>4みろや。background-color:#a00;だよボケ。もうくんな。
596Name_Not_Found:04/11/16 04:39:29 ID:???
なにもそこまでいわんでも。
597Name_Not_Found:04/11/16 05:44:41 ID:???
サクッと教えて、さっさと出て行ってもらいましょう。
598Name_Not_Found:04/11/16 11:23:29 ID:???
ここにも手取り足取りスレが必要?
599Name_Not_Found:04/11/16 12:40:52 ID:???
女なら俺に任せろ!
600Name_Not_Found:04/11/16 12:43:33 ID:???
腰までは取らんでいいです。
601Name_Not_Found:04/11/16 12:46:24 ID:???
じゃぁ 尻ならいいか?
602Name_Not_Found:04/11/16 13:49:49 ID:AQTH68CR
floatをかけたボックス要素(divとか)の中の要素(spanとかp)にfloat
かけると、おもいっきりバグるんですが、何か良い対処法は無いもん
ですか?

IEみたいなユルイブラウザーならきちんと表示されるんですが、Firefox
やOperaだと、floatをかけたボックス要素(親要素)の高さとかpaddingとか
が無視されてイヤ〜ン
603Name_Not_Found:04/11/16 14:10:06 ID:???
基本を学ぶのが最も良い対処法だろうね
604Name_Not_Found:04/11/16 14:51:16 ID:???
>>602
漏れも自分のサイトで、おなじみのメニューと本文のブロックを並べて、
本文ブロックのなかでもfloat使ってるけど、ffでもopでもmsieでもmacieでもsafariでも
表示確認できているから大丈夫かと。
がんがれ。
605Name_Not_Found:04/11/16 15:03:38 ID:???
>>602
>>4を見る。それが一番の対処法だ。消えろ。
606Name_Not_Found:04/11/16 15:26:33 ID:???
CSSで、サイドメニューとメインの部分の二つに分ける所までは
>>4を参考にして、なんとか自力で出来たのですが、サイドメニューの
リンクを押すと、メインの方に反映させるにはどうすればいいんでしょうか?

<a href="リンク先" target="メインのID">←こんな感じでやってみたんですが、無理でした。

一週間くらい前からコツコツとHTMLとCSSを
やり始めたんですが、壁にぶつかってしまいました。
素直にFrameを使った方がいいんでしょうか?

どうぞご教授願いますー。
607Name_Not_Found:04/11/16 15:34:44 ID:???
>>606
DHTMLの問題です。JavaScriptスレッドへどうぞ。
608Name_Not_Found:04/11/16 15:39:28 ID:???
>>607
ありがとうございます。
JavaScriptスレッドを覗いて頑張ってみます
609Name_Not_Found:04/11/16 19:29:32 ID:???
あらかた完成して、WINで確認してみたら
レイアウトの崩れは無いものの、フォントのあまりの醜さに鬱。
WINで綺麗に見せるコツってありますか?
610Name_Not_Found:04/11/16 19:59:12 ID:???
>>609
質問なら、何をどうしたいのか具体的に言わないと、変な煽りだけ来るぞ。

要するに、君は何をもって「醜い」と認識していて、君にとって「綺麗」ってのは何なのかと。
その質問だと答えようがない。
611Name_Not_Found:04/11/16 20:11:19 ID:???
>>610
フォントってかいてあるじゃん。お前馬鹿?

もしかしてこのスレって馬鹿しかいないのか?
612Name_Not_Found:04/11/16 20:13:32 ID:???
>>611
いや、だからどんなフォント表示が>>609にとって綺麗で、
どんなフォント表示は>>609にとって醜いのか、
それが>>609の文章でわかるとでもいうのか。。。

馬鹿ほど人を馬鹿にするとはよく言うが。
613Name_Not_Found:04/11/16 20:25:37 ID:???
>>609
全部画像にする
614Name_Not_Found:04/11/16 20:34:09 ID:???
まぁたぶん>>609の話の流れからしてMacユーザーで、
Winブラウザでのテキストのアンチエイリアスの有無を言ってると勝手に予測して答えるぞ。

OSレベルの問題なんで、CSSでそれをどうこうしようってのは無理だわな。
Macのテキストのアンチエイリアスだって、OSのアピアランス環境設定で設定されてるわけだし。
CSS関係ない。

俺個人としては、12pxとかのサイズの文字にまでアンチエイリアスかかるのは、むしろ嫌だけどな。
だから、綺麗だの醜いだの言われても、人によって規準が違う以上、こんな感じで予測でしか答えられん。
615Name_Not_Found:04/11/16 20:42:17 ID:???
>>609
画像が面倒なら、英文フォントを駆使してみそ。
616Name_Not_Found:04/11/16 20:43:05 ID:???
<p>
<img src="a.gif" alt="あ" />
<img src="i.gif" alt="い" />
<img src="u.gif" alt="う" />
<img src="e.gif" alt="え" />
<img src="o.gif" alt="お" />
</p>
617Name_Not_Found:04/11/16 20:58:18 ID:???
618Name_Not_Found:04/11/17 06:23:57 ID:???
floatにはwidthを指定しなければならないと聞きましたが、
それは一体、どこからどこまでの幅を指定するものなのでしょうか。

憶測)
 float:left; width:10px;
  |←10px→;あああ
 float:right; width:10px;
  あああ←10px→|
619Name_Not_Found:04/11/17 06:32:21 ID:???
>>618
float:left と一緒に border: 1px solid #ff000; とでも書いてみるとわかりやすいかもしれない。
float が適用される要素の幅です。
620Name_Not_Found:04/11/17 07:11:36 ID:???
>>618
>>5のQ1
621Name_Not_Found:04/11/17 11:05:39 ID:???
validになったー(・∀・)ウレシイ!
622Name_Not_Found:04/11/17 11:31:27 ID:???
>>621
(・∀・)おめ!!
623Name_Not_Found:04/11/17 11:47:10 ID:???
d!
早速アイコンはっつけました(`・ω・´) シャキーン
624Name_Not_Found:04/11/17 15:39:07 ID:???
………
625Name_Not_Found:04/11/17 15:41:39 ID:???
>>623
ヲタ確定のシールの何がうれしいの?
626Name_Not_Found:04/11/17 15:49:14 ID:???
<p class="ota-mark"><a href="http://validator.w3.org/check?uri=referer"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a></p>
p.ota-mark { display: none; }

としてにやにやするのは、人間としておわっていますか。
627Name_Not_Found:04/11/17 16:34:05 ID:???
とっくにな。
628Name_Not_Found:04/11/17 16:41:17 ID:???
自演荒らし乙。IDは運営側の問題だから他のスレ荒らすのやめれ
629Name_Not_Found:04/11/17 17:51:19 ID:???
>>625
えー、やっぱヲタなの?
私も狙ってたのに・・・。
630Name_Not_Found:04/11/17 17:54:24 ID:???
validにしてバナーはっつけようとする直前に恥ずかしさに気づいた。
631Name_Not_Found:04/11/17 18:05:39 ID:???
バナーをオタクと結び付けている時点で池沼。普通はそんなこと考えない。
632Name_Not_Found:04/11/17 20:32:14 ID:???
<font color="" face="" size="">などの要素を
IEのユーザースタイルシートで無効化する事って
出来ますか?
あと、<br><br><br>などを無効化する事って出来ますか?
633Name_Not_Found:04/11/17 20:52:58 ID:???
自分で試してから訊こうな。 すぐ判るから。
634632:04/11/17 21:02:26 ID:???
>>633
試してみたら出来ませんでした。

font {
color : inherit !important;
font-family: inherit !important;
font-size : inherit !important;
}

↑IEではこれは効かないって事でいいですか?
635Name_Not_Found:04/11/17 21:07:05 ID:???
>>634
効かないって事でいいです。
自分で調べていたら、もっとよかったです。
636Name_Not_Found:04/11/17 22:16:43 ID:KdANDgya
safariで
a.classname {
border-style : solid;
border-width 0 2px;
width : 100px;
}
とwidth設定できないんですが、他のブラウザでも無理ですか?

それと、Mac OS X用のIEでCSSの表示が無茶苦茶なんですけど
OS X用のIEってダメなんですか?
それとも書き方が悪いんですかねぇ?
637Name_Not_Found:04/11/17 22:18:41 ID:???
頭が悪いんだと思う。何をしたいかによるけど、aはinline要素
638Name_Not_Found:04/11/17 22:27:46 ID:???
ハハ・・・
639Name_Not_Found:04/11/17 22:30:59 ID:KdANDgya
ああ、解った
display : blockだったよ。

つーか、それぐらいのレスつけれないで無駄なレスつけてくんなって。
640Name_Not_Found:04/11/17 22:32:16 ID:???
訊くなって。
641Name_Not_Found:04/11/17 22:38:18 ID:???
>>639
池沼は帰ってね。
642Name_Not_Found:04/11/17 23:29:42 ID:???
floatをclearするのを忘れて質問してる人がなんか多いよね。
あと変なところでclearしてる人とか。
 
はい。自分でした
643Name_Not_Found:04/11/18 00:10:53 ID:???
うむ。
644Name_Not_Found:04/11/18 07:35:45 ID:???
まぁ厨過ぎる質問だと叩かれますわな……。テンプレ以前の問題だし。
「<p>〜</p>は改行+一行空白を意味する」っていうお粗末な知識しかなかったんだろ。
645Name_Not_Found:04/11/18 07:36:22 ID:???
>>644
例えがイマイチ分かりませんが
646Name_Not_Found:04/11/18 08:54:11 ID:???
>>645
まぁ厨過ぎる回答だからかな?
647Name_Not_Found:04/11/18 09:02:29 ID:???
厨が厨を呼ぶ。そして一網打尽にすれば日本はもっとよくなる。
目指せ、人口2000万人。
648Name_Not_Found:04/11/18 09:14:09 ID:???
ちゅうよーー   夕厨のラストシーンで見た。
649Name_Not_Found:04/11/18 09:37:04 ID:???
XHTML1.1に外部スタイルシートを適用しています。
外部スタイルシートにはbodyのwidthを70%にしたうえで外枠を付けているのですが、IEで表示してみると70%の指定を無視してウィンドウ幅まで内容の表示がされてしまいます。
Geckoブラウザでは問題がなかったのですが、この場合はbodyではなdivなどにスタイルを適用して囲むのがいいのでしょうか?
650Name_Not_Found:04/11/18 12:30:45 ID:???
>>649
「キャンバスを表示する要素の違い」
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4

WinIEはXHTML文書でxml宣言をするとDOCTYPEスイッチが互換モードになります。
651Name_Not_Found:04/11/18 13:21:56 ID:???
>>603-605
dクス。しかし、相変わらずだめポ。
<div id="wrapper">
<div id="left">
<div class="contents">
<div class="hoge">
<span class="hoge-left">hoge</span>
<span class="hoge-right">hogehoge</span>
</div>
</div>
</div>
/*--- 略 ---*/
</div>
みたいなソースで、
#left{float: left;}
.contents{clear: both;}
.hoge{clear: both;}
.hoge-left{float: left;}
.hoge-right{float: right;}
というような感じにしているんですが、「#left」や「.contents」なんかの
width、height、margin、padding、background、border属性が利かないっす。
いちおう、>>4のは熟読したんですが解決しないんで、アドヴァイスお願いします
652Name_Not_Found:04/11/18 13:34:19 ID:???
みたいな、とか、というような感じ、とか言われてもな・・・とりあえずタグの閉じ忘れだな
653Name_Not_Found:04/11/18 14:08:49 ID:???
>>651
ひでーな。 オマイはcss使わなくて良いから・・・
654Name_Not_Found:04/11/18 16:56:46 ID:V31FOkfG
ぶっちゃけたソースでいうと
http://www.google.com/url?sa=D&q=http://sevenstarz.hp.infoseek.co.jp/cgi-bin/blosxom.cgi
なんですが・・・。
655Name_Not_Found:04/11/18 17:01:46 ID:???
>>651
ちょっとアプロダとかでソースを上げてみれば?

656Name_Not_Found:04/11/18 17:37:52 ID:???
禿ヤフーが米ヤフーに追従したとして。
ヤフーに納品するコンテンツをあの調子で書けと言われたら、
テーブルレイアウト以上に萎えるなあ。
657Name_Not_Found:04/11/18 17:46:20 ID:???
おじさん。場所違うよ。
658Name_Not_Found:04/11/18 18:01:21 ID:AA8rDXT2
すみませんが、これをコピペしてhtmlで見てください。
<html><head><style>
div {border:1px solid;}
.column1{border:1px solid;width:25%;position:absolute}
.column2{border:1px solid;margin:0.5em 25%}
#column1{left:0px}
#column2{right:0px}
</style></head><body>
<p>これをCSSでやりたいんですが、</p>
<table border=1>
<tr>
<td rowspan=1 width=50>ああああああああああああああああああああああああ</td>
<td>いい</td>
<td rowspan=1 width=50>うう</td>
</tr>
<tr><td colspan=3>ええ</td></tr>
</table>
<hr>
<p>ああの部分が長いと重なってしまいます。どうすればできますか?</p>
<div class="column1" id="column1">ああああああああああああああああああああああああ</div>
<div class="column1" id="column2">いい</div>
<div class="column2" id="column3">うう</div>
<div>ええ</div></body></html>
659Name_Not_Found:04/11/18 18:51:31 ID:???
id="column3が無いな。
660658:04/11/18 19:55:26 ID:???
すみません。これです。
<html><head><style>
div {border:1px solid;}
.column1{border:1px solid;width:25%;position:absolute}
.column2{border:1px solid;margin:0.5em 25%}
#column1{left:0px}
#column2{right:0px}
</style></head><body>
<p>これをCSSでやりたいんですが、</p>
<table border=1>
<tr>
<td rowspan=1 width=50>ああああああああああああああああああああああああ</td>
<td>いい</td>
<td rowspan=1 width=50>うう</td>
</tr>
<tr><td colspan=3>ええ</td></tr>
</table>
<hr>
<p>ああの部分が長いと重なってしまいます。どうすればできますか?</p>
<div class="column1" id="column1">ああああああああああああああああああああああああ</div>
<div class="column1" id="column2">うう</div>
<div class="column2" >いい</div>
<div>ええ</div></body></html>
661Name_Not_Found:04/11/18 21:51:59 ID:???
絶対配置をもう一度勉強してみそ
662Name_Not_Found:04/11/18 22:03:12 ID:wPld7BOQ
aタグのスタイルシートの設定について質問です.私はスタイルシートで
a:link,visited,active,hover
とも全て#000000;で指定しています.文字からリンクさせる時は
これで設定が正常に反映されていたのですが,画像からリンクさせると
うまくいきません.
(つまり,枠が青色になっていたり,飛んだ後紫色になったりします)
画像からリンクさせる場合他に何か設定が必要なのでしょうか?
回答よろしくお願いしますm(_ _)m

当方は,Donut2.52もしくはIE SP2を使用しています.
663Name_Not_Found:04/11/18 22:19:20 ID:???
imgのborderを消せばいいじゃん。
664まだ初心者ですが:04/11/18 22:37:00 ID:???
img
{
border-color:#000;
}

でいいような。。
665Name_Not_Found:04/11/18 22:40:46 ID:???
>>664
ダメに決まってるだろ、考えもしないで回答すんなよおめーはよ。
666Name_Not_Found:04/11/18 22:49:18 ID:wPld7BOQ
解決しました.ちょっと難しく考えすぎちゃってた
みたいですね^^;ありがとうございました^^
667660:04/11/18 23:03:39 ID:???
>>661
そうですね絶対配置使ってました。。
floatで解決しました。
668まだ初心者ですが:04/11/19 08:13:08 ID:???
>>665
あっ、ごめん。
↓こうだったかな。

img
{
border-width:0;
}
669Name_Not_Found:04/11/19 08:20:48 ID:???
>>668
俺ならnone入れるかな。
width : 0; は「0という線がある」という無の肯定になるが、noneなら有の否定になる。
線を無くしたいなら肯定(ある)ではなく否定(ない)を使うべきではないか?
670Name_Not_Found:04/11/19 10:59:44 ID:???
border-style: none にすると、自動的に
border-width: 0 になったりする。
671Name_Not_Found:04/11/19 12:33:08 ID:yIEu4C0e
質問させていただきます
制作板から誘導でここへこさせていただいて
テンプレートを読ましていただいたのですが
私のしているものと少し意図が違ったので もう一度質問しなおさせていただきます
私は
┏━━━━━━━━━┓
┃ A       ┃
┣━┳━━━━━━━┫
┃ ┃       ┃
┃B┃ C     ┃
┃ ┃       ┃
┗━┻━━━━━━━┛
という形でフレームをくんでいて Bが目次になっているため長くなっていて
スクロールさせなければ見れないのですが デザイン上Bの位置にスクロールバーがでるのは
望ましくないので
body {overflow : hidden;}
とBに書いています。
ですが これだとFireFoxではスクロールバーが見えないだけでスクロールできるのですが
IEだとスクロールができません
これは どのようにすればスクロールできるようになるのでしょうか?
すいませんがよろしくお願いします
672Name_Not_Found:04/11/19 13:27:50 ID:???
>>671
スクロールバーを出せばスクロールできます。要するに、
> デザイン上Bの位置にスクロールバーがでるのは
> 望ましくないので
は不可避なコトなので、べつのアイディアをひねり出してください。
673Name_Not_Found:04/11/19 13:33:24 ID:???
>>671
Bをfloatじゃ駄目ですか?
PHPとかじゃないとメンテがアレですけど・・・
674671:04/11/19 14:03:38 ID:???
>>672
私はスタイルシートを全然しらないので 上記に記した方法も
ネット上で調べて見つけたものです
どうか方法を考えていただけないでしょうか?

>>673
floatを調べて見たのですが それでは多分実現できないと思います
CにはBとAからのターゲットを指定したリンクがあります
そのような環境でもできる方法などあるのでしょうか?
675Name_Not_Found:04/11/19 14:14:04 ID:???
>>674
えーと。
・あなたの望んでいる仕様は、frameでしか実現できません、それはあってます。
・多くのUAではスクロールバーがないとスクロールすることはできません。

上記二つが必要条件みたいなもの。この枠内でできることを考えようよ。
676Name_Not_Found:04/11/19 18:44:49 ID:+/+Uknpl
>>669

cssを英語ネイティブの奴らが作っているなら、無の肯定が自然。
There is not ... よりも There is no ...
俺はcssならどっちでもいいが。
677Name_Not_Found:04/11/19 18:45:44 ID:f96E55Gn
dl dt, dd で compact に相当する表示を考えています。
>>7 の Q7: を参考にして実行してみたのですが、以下のソースのように dt の内容の背が高いとうまくいきません。(dt に dt が回り込んでしまう。
これを表で無理矢理組むみたいに dt の横に dd が来て、次の dt は前の dt の下に来るようにするにはどうすればよいですか?
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=compact.png&refer=Uploader
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>dl compact と同等の表示をさせたい</title>
<style type="text/css">
dl dt {
float: left;
width: 10em;
border: 2px dotted red;
background-color: gray;
}
dl dd {
border: 2px dotted blue;
background-color: lightgray;
}
</style>
</head>
<body>
<dl>
<dt>寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路ぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助</dt>
<dd>寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝るところに住むところやぶら小路ぶら小路パイポパイポパイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナーの長久命の長助</dd>
<dt>太郎</dt>
<dd>寿限無ウザ</dd>
</dl>
</body>
</html>
678Name_Not_Found:04/11/19 18:58:26 ID:???
clear:left;
679Name_Not_Found:04/11/19 19:00:04 ID:???
>>677
dl dt{
float: left;
clear: left;
width: 10em;
border: 2px dotted red;
background-color: gray;
}
じゃないかなー。
680679:04/11/19 19:00:36 ID:???
だからあれほどリロードしろと…orz
681677:04/11/19 19:09:43 ID:???
すいません、書き漏らしというかでした。
clear: left で確かに dt は並びますけど、 dd が上に詰まっちゃうんですよね。
dt と dd がふたつセットでひとつのブロックに格納されていればうまくいくんでしょうけど……
こんな感じにしたいのです。
http://web2ch.s31.xrea.com:8080/?plugin=attach&pcmd=open&file=compact2.png&refer=Uploader
682Name_Not_Found:04/11/19 19:20:07 ID:???
>>681
ddの最低高さを決めてみるとか。
683Name_Not_Found:04/11/19 19:29:11 ID:???
やっぱフロート使うなら
メニュー関係は左側にまとめた方がいいみたいね。
684Name_Not_Found:04/11/19 19:43:17 ID:???
なんで?
685Name_Not_Found:04/11/19 21:43:00 ID:???
Another HTML-lint ではほぼ満点もらえるが、
w3cだと、下記のエラーみたいのがでます。
翻訳してもさっぱり意味わかりませんが、どなたかわかる方いますか??

Sorry, I am unable to validate this document because
on lines 9, 26, 30, 37-38, 46, 55, 59, 62 it contained
one or more bytes that I cannot interpret as us-ascii
(in other words, the bytes found are not valid values
in the specified Character Encoding). Please check both
the content of the file and the character encoding indication.

686Name_Not_Found:04/11/19 22:01:11 ID:???
残念、9行、26、30、37-38、46、55、59、62においては、
それが私たち-ascii(言いかえれば、
バイトは見つけました、
指定された文字符号づけの中の有効な値でない)として
私が解釈することができない1バイト以上を含んでいたので、
私はこのドキュメントを有効にすることができません。
ファイルの内容および文字符号づけ表示の両方をチェックしてください。

http://www.excite.co.jp/world/english/
687686:04/11/19 22:07:06 ID:???
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>


8 <meta name="author" content="abc" />
9<meta name="description" content="全角" />
<meta name="keyword" content="abc" />
<link rel="home" title="abc.to" href="./" />

こんな感じです。桁番号、8と9のみつけてみました。
688 ↑:04/11/19 22:09:37 ID:???
オレじゃない。686
689Name_Not_Found:04/11/19 22:11:49 ID:???
>>685

  ハイ。すれ違い。    消えろ!
690Name_Not_Found:04/11/19 22:12:46 ID:???
>>689
お前にわからない話題だからってムキになるなよ。
別にお前が消えてもいいんだぜ?
691Name_Not_Found:04/11/19 22:17:47 ID:???
>>690
スレタイ読め。  ごめん。字読めなかったな。
692Name_Not_Found:04/11/19 22:19:44 ID:???
>>690
自分が解らないからって、八つ当たりするなよ。
693Name_Not_Found:04/11/19 22:25:47 ID:???
>>685
エンコーディングがおかしいと書いているだけジャン
URL直接入力で正しい文字コードで…

ってここはCSSスレだろ?あぁ、お前の日記だったか、すまん。
694Name_Not_Found:04/11/19 22:26:08 ID:???
ごめん、自分にはこの文書の検証はできないっぽいんだよね。
だって、9,、26、30、37〜38、46、55、59、62行目にさ、
us-asciiに置き換えて解釈することができない文字が含まれてるんだもん。
(違う言い方するなら、指定されてる文字コードに対して不正な文字が見つかったってことね。)
ちょっとさ、文字コード指定と、実際のファイルの中身(文字)と、両方確かめてみてくれる?

----------

だいたいこんな意味だと思うぞ。
695Name_Not_Found:04/11/19 22:27:42 ID:???
要するにスレ違いだよな。
696685:04/11/19 22:32:43 ID:???
>693  >694

ありがとう。

>690

とりあえずありがとう。

たしかにスレ違いだったようですが、スレ違いと言った人も
ちょっと得意気な気分になったであろうし、その辺はご容赦を。
697Name_Not_Found:04/11/19 22:35:12 ID:???
>>685
>694の解説の後に 「このブォケがー」っていうのが hidden になってるのを見逃しちゃ駄目だよ。
698689:04/11/19 22:37:48 ID:???
686=689 なんだけど・・・
699Name_Not_Found:04/11/19 22:41:17 ID:???
>697

だって何も言わないで「ヴォケー」よりは、何
か言ってくれた上で言われる方がいいだろうと思うか
ら、全然OKかな

700Name_Not_Found:04/11/19 22:43:17 ID:???
>698

雑魚みたいな発言しかしてないんだから
黙ってろよ。いちいちシャシャリでてくるなよ、この雑魚が。
701689:04/11/19 22:45:04 ID:???
ざこで〜〜す
702Name_Not_Found:04/11/19 22:45:41 ID:???
>>700
消防は寝る時間
703Name_Not_Found:04/11/19 23:29:01 ID:???
     \     /
       \ /
       氏ね氏
     氏 ね 氏 ね     シネヤシネヤシネヤ
     氏 ね 氏 ね 氏
 __氏ね 氏 ね 氏 ね__
/  氏ね 氏 ね 氏 ね 氏  \
 __氏 ね 氏 ね 氏 氏ね__
/  氏ね 氏 ね 氏 ね 氏    \
 __氏 ね 氏 ね 氏 ね __
/    氏 ね 氏 ね 氏     \
      氏 ね 氏 ね
       氏ね氏
        ね
704Name_Not_Found:04/11/19 23:36:37 ID:???
>>677
その呪文って『霊幻道士』の?

キョンシーヽ(´ー`)ノマンセー
705671:04/11/19 23:37:31 ID:???
どなたか これを実現するようなことをできる方法を
教えていただけないでしょうか?
よろしくお願いします
706Name_Not_Found:04/11/19 23:43:37 ID:???
>デザイン上Bの位置にスクロールバーがでるのは望ましくないので
>body {overflow : hidden;}

この二つがある限り不可能です。
>>675を読んでね。
707677:04/11/19 23:55:27 ID:???
>>704
霊幻道士って映画は観たこと無いはず。寿限無ってのは以下でも見て下さい。
ttp://d.hatena.ne.jp/keyword/%BC%F7%B8%C2%CC%B5

私の案件は厄介なのでしょうか?
708Name_Not_Found:04/11/20 00:01:32 ID:???
709671:04/11/20 00:21:03 ID:???
>>706
すいません ありがとうございます
これに似たような動作はできないのでしょうか?
710Name_Not_Found:04/11/20 00:26:35 ID:???
>>709
どのように似せたらよいのかね。
スクロールバー意外に、ユーザにスクロールの概念を持ってもらえる機構を考えろと?
711Name_Not_Found:04/11/20 00:30:32 ID:???
>>709
1・Bの部分 body {overflow : hidden;}にしない。スクロールバーは出す。
   貴方の描いているデザインではなくなるが、現状ではこれしかない。

2・シェアTOPのIEを切り捨てる。

3・IEに変わるブラウザを作って普及させる。

      以上
712Name_Not_Found:04/11/20 00:34:34 ID:???
a:link
a:visited
a:hover

をクラスで指定できませんか?
どう指定していいのかさっぱりわかりません。よろしくお願いします。
713Name_Not_Found:04/11/20 00:39:30 ID:???
a.hoge:hover
714Name_Not_Found:04/11/20 00:39:44 ID:???
>>712
a.class_name:link

以下同じ。
715Name_Not_Found:04/11/20 00:39:54 ID:???
>>712
質問の意味がよくわかんないけど
a に class づけして
a.foo:link とかするってこと?
716Name_Not_Found:04/11/20 00:40:11 ID:???
>>712
基本から勉強してください。

.hoge a:link〜
717714:04/11/20 00:41:24 ID:???
10秒おきくらいにすごい重婚。
718Name_Not_Found:04/11/20 00:42:24 ID:???
ありがたいことで。
719Name_Not_Found:04/11/20 00:43:26 ID:???
>>716  コラコラ
720Name_Not_Found:04/11/20 00:49:05 ID:???
>713-719

ありがとうございました← >716以外
721671:04/11/20 01:14:04 ID:???
お前ら全然役に立たないじゃん
なにが質問スレッドだよ
答えれねぇーんだったらこんなスレッドたてんなや
ヘ(゚∀゚ヘ)アヒャ
しんでしまえ
722Name_Not_Found:04/11/20 01:19:14 ID:???
まぁまぁ ご苦労さんだねぇ
723Name_Not_Found:04/11/20 01:19:15 ID:???
>>721
おもんない。





次、ドゾー
724Name_Not_Found:04/11/20 01:36:19 ID:???
同一の divに入っている、特定の画像のみ
a:hover の background-color を変更するには
どうしたら良いでしょう??
725Name_Not_Found:04/11/20 01:38:05 ID:???
class
726Name_Not_Found:04/11/20 01:42:11 ID:???
>725
ウホッ!ありがとうございました。
727Name_Not_Found:04/11/20 10:28:55 ID:???
1つのページで読み込ませる外部CSSって数は少ない方がいいんでしょうか?
今まで全ページのCSSをひとつにまとめていたんですが、
余計なものまで読み込む訳ですし、どうなのかなぁ、と。

細かく分けて複数を読み込ませた方がいいんでしょうか・・・?
728Name_Not_Found:04/11/20 11:11:05 ID:???
>>727
ttp://www.yoursite.com/css/css.cssの中に
@importかなんかで page1only.css また違うページではpage2only.cssみたいな。
共通のCSSはshare.cssにしておくとか
729Name_Not_Found:04/11/20 11:59:03 ID:???
>>728
ありがとうございます。
@importはブラウザによるバグが多いようで
避けていたんですが、
linkをいくつも羅列するのとどちらが確実なのでしょうか・・・
730Name_Not_Found:04/11/20 12:00:10 ID:RIV7U0O0
お騒がせしてすいません。
例のfloat要素にさらにfloat要素をネストすると、FirefoxやOperaで
親要素がおかしくなるって問題は解決しました。
というか、『<br style="clear:both" />』を入れて、強引に解決しました。
って、また怒られちゃうかな?
731677:04/11/20 13:44:22 ID:???
>>708(>>682)
これはつまり dt が縦長になる dd にたいして dt より大きい (min-)height を指定するのですよね?
全部に指定すると無駄に縦長になっちゃうし。
こういう無理矢理な回避方法を取るのが妥当なのですかね?
dl compact では出来てるし、どういう環境でも崩れない方法があるかと思ったのですが……
(dl compact も dt の文字数が多いと出来なかったかな?

贅沢かつわがままで申し訳ないです。
732Name_Not_Found:04/11/20 15:30:50 ID:???
初心者質問です。恐縮です。
blockquoteで2chのスレッドを引用したいのです。AAがくずれないようにしたいのですが、検索していくと

.content blockquote {
   line-heightとか  font-familyとか}
.content blockquote p {
   line-heightとか  font-familyとか }

.aa { font-family: "MS Pゴシック"; line-height: 1.05; }
を組み合わせればよいとか
blockquote.aa{ }と使えばよいとか出てくるのですが、結局これらでどういうスタイルシートのテキストを書けばよいのか
わからないのです。何か、サンプルがあるところかヒントをいただけないでしょうか?

733Name_Not_Found:04/11/20 16:16:10 ID:???
>>732
>>4
まず基本から知ろうと汁
734Name_Not_Found:04/11/20 16:42:33 ID:???
>>729
無駄な転送量を避けたいって意味で?
とりあえずブラウザのバグを利用して@importを使い、各種ブラウザを選別した後に
ie-page1.css nn-page1.css ex-page1.cssに辿り着くように設定しては?
735Name_Not_Found:04/11/20 16:45:14 ID:???
あ、いや、これは好みで
ieはie用のCSSに飛ばして、NNはnn用CSSって手もあるし、ページ毎に複数のCSSをブラウザに対応させるってことも。。

なんていうか、XHTMLに移行してからCSSのレイアウトを複数作れば簡単で効率的だとは、思ったけどね。個人的に。
俺はXHTMLでブラウザのバグとかそういうのは突破してるからさ。。ごめん。
736Name_Not_Found:04/11/20 18:46:00 ID:???
>>730
そのclearに関する、IEとFirefoxの質問は結構出てきてる。
特に問題は無いと思います。
アプローチの仕方は往く様にもあるわけだから、自分の納得する形にすればいいと思うよ。

737Name_Not_Found:04/11/20 19:10:14 ID:???
>>727
メインCSSと代替CSSでいいじゃん
738Name_Not_Found:04/11/20 21:09:01 ID:???
a のclassで、link と hover と visit を同時に 指定するには
どうしたら良いのでしょうか?
739738:04/11/20 22:24:19 ID:???
w3cマーク入れてみたのですが、hoverはclassで背景と同色に
したのですが、他で使ってるlinkかvisitの色が残って
しまっているもので。。。
740Name_Not_Found:04/11/20 22:41:34 ID:???
そんな恥ずかしい物入れるなよ…
741Name_Not_Found:04/11/20 23:01:54 ID:???
>740

いや、他に画像がないので、華があって
良いかなぁと思いまして・・・
742Name_Not_Found:04/11/20 23:42:30 ID:???
気持ちよかったか?
743738:04/11/21 00:40:13 ID:???
>742
ええ、キモチいいです。ハァハァ・・

なんでやねん。ところで、同じページ内で
link visit hover をそれぞれ使い分けるって
どうやるのが良いのでしょう????
class でhoverのみとかは想像できますが・・・・

744Name_Not_Found:04/11/21 00:50:06 ID:???
>なんでやねん
>なんでやねん
>なんでやねん
>なんでやねん
>なんでやねん
745Name_Not_Found:04/11/21 01:08:38 ID:???
http://up.isp.2ch.net/up/3d6a81ada2cc.PNG

この右側の線はいったいなんなのかと。(hoverで背景色に)
消せないのかと、思っている次第ですが。
746Name_Not_Found:04/11/21 01:47:29 ID:???
<a href="#"><img src="./hoge">
</a>
とかなってる場合の改行とか空白文字が線になってるんじゃない?
747Name_Not_Found:04/11/21 08:02:24 ID:???
>>734-735
レスありがとうございます。

> 無駄な転送量を避けたいって意味で?
まさしく。
CSSをパーツ毎に小分けにしてlinkでつらつら並べるのと
全ページ分1つにまとめるのと
どちらが望ましいのかな、と。

@importは>4の【ZSPC:資料集:CSS2対応状況ガイド】を見る限り
△が多く対応具合が微妙そうなので
使うのが怖いかな、というのが正直なところです。
(まったく×なら対処のしようもありますが)

IE3とNN4、それ以外程度の分け方しか考えていません。
一応不十分ながらもXHTMLには対応させているので
UAごとに細かく作ればいいのでしょうが・・・
マンド(ry
748Name_Not_Found:04/11/21 08:15:25 ID:???
>>743
それでイイと思うよ。あと同じ入れるなら既存のバナーより格好イイバナーのほうが良いかもね。俺は自作。
749Name_Not_Found:04/11/21 10:33:38 ID:???
>>747
自己レス。

@importのバグはメディアタイプのみを気にすれば
無問題みたいなので
@importでやってみます。

ただ、後学の為
>CSSをパーツ毎に小分けにしてlinkでつらつら並べるのと
>全ページ分1つにまとめるのと
>どちらが望ましいのかな、と。
の答(あるのか?)をご存知の方いらっしゃいましたら
教えてくださればありがたいです。
750Name_Not_Found:04/11/21 11:16:27 ID:???
>>749
一度ユーザのPCにCSSファイルをキャッシュさせれば、次からはアクセスしないで済む
ってSEOのサイトで見た事はある。さらにそのサイトでは
<link href="css/public.css" rel="stylesheet" type="text/css">
<link href="css/firsttop.css" rel="stylesheet" type="text/css">
<!--[if IE 6 ]><link href="css/winie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 5.5000 ]><link href="css/winie6.css" rel="stylesheet" type="text/css"><![endif]-->
こんなカタチでCSSを制御してる。
public.cssには
@charset "Shift_JIS";

/* Windows版 Internet Explorer 5.5-6以外は非表示 */
.vertical {
visibility: hidden;
}
.menu-tpl {
display : none;
}
のみでfirsttopには
@charset "Shift_JIS";

@import url(hyper.css);
@import url(top.css);
のみ。後は自分でやってくれ。
751Name_Not_Found:04/11/21 13:26:31 ID:???
>>750
おおお!禿しくありがとうございます!
めちゃめちゃ参考になります!
752743:04/11/21 19:58:57 ID:???
>746

ご名答です!!!!! <a class 〜 </a> までを改行なしにしたら直りました。
ありがとうございました!!

>748

なるほどーそんなものなのですか!
擬似要素の装飾は自分的にはと難しいです。(ユーザがUAで設定している
かもしれないことを考えればデフォが一番なのかもしれませんが)

自作ですか・・よかったら参考にうpきぼんぬしてみます。
753Name_Not_Found:04/11/22 00:47:32 ID:ZuQId0th
NN4は無視でいいですか?
754Name_Not_Found:04/11/22 01:02:05 ID:???
いいです。
755Name_Not_Found:04/11/22 01:05:54 ID:???
NN4の為にテーブル使ってる奴はアホ
756Name_Not_Found:04/11/22 10:36:56 ID:juXz6nPY
画面の上下の余白はどうやってなくしたらよいですか?
757Name_Not_Found:04/11/22 11:09:23 ID:???
画面?
758Name_Not_Found:04/11/22 11:14:22 ID:???
モニターを削り取ればいいんじゃないかな。
759Name_Not_Found:04/11/22 11:26:17 ID:juXz6nPY
>>757
いえページの上下の余白です。
760Name_Not_Found:04/11/22 11:38:11 ID:???
body {
margin-top:0;
margin-bottom:0;
}
761Name_Not_Found:04/11/22 11:42:27 ID:???
答えるヴァカ発見。
何のためのテンプレだ
762Name_Not_Found:04/11/22 12:09:49 ID:???
>>761
あなたの心もmargin:0;ですね
763Name_Not_Found:04/11/22 12:22:31 ID:???
>762
GJ
764Name_Not_Found:04/11/22 12:57:21 ID:juXz6nPY
>>760
>>762
ありがとうございます!
765Name_Not_Found:04/11/22 13:40:31 ID:ZuQId0th
<table width=500>
<tr><td>
 <table width=100%>
  <tr><td>あああ</td></tr>
 </table>
</td></tr>
</table>

外側のtable内で<table width=100%>とすると
外側tableの枠内100%になりますが、
これをcssでできますか?
766Name_Not_Found:04/11/22 13:44:21 ID:???
Yes
767Name_Not_Found:04/11/22 15:14:47 ID:ZuQId0th
<div style="width:500px;">
 <div style="width:100%;">
 </div>
</div>

こうすると、中のdivが500pxに収まらないのです

768Name_Not_Found:04/11/22 15:17:15 ID:m9aVaSoL
フレームを組んだサイトの、メニューフレームについて質問です。

<HEAD>〜<HEAD>内に
http://up.isp.2ch.net/up/4415b5716cd4.txt
のようなCSSを入れました。
これは素材配布サイトさんのサンプルから流用したものです。

しかしこれを入れた結果、リンクの
<A HREF="***.html TARGET="body">でのターゲット指定が効かなくなってしまいました。
どう直したらbodyフレームで開けるようになるでしょう?
769766:04/11/22 15:21:07 ID:???
>>767
widthの%の基準点はブラウザによってまちまち。まず>>1あたりから読んでみてください。
770Name_Not_Found:04/11/22 15:53:24 ID:???
僕どこから突っ込めばいいのかわかんなくなっちゃった☆
771Name_Not_Found:04/11/22 16:05:28 ID:???
>>768
<style media="screen" type="text/css">
<!--

-->
</style>

これ要らない
772Name_Not_Found:04/11/22 17:06:10 ID:???
>>768
というかスレ違い。
CSSにはフレーム周りの動作をコントロールする能力はない、気の毒だが。
773768:04/11/22 17:12:49 ID:m9aVaSoL
>>771
そこを削るとbody〜以降をそのまま書くことに…?
774768:04/11/22 17:24:37 ID:m7GlPE8r
すみません、激しく勘違いしてましたorz
自己解決しました、お騒がせしました。
775Name_Not_Found:04/11/22 22:25:45 ID:???
すいません
スタイルシートで実現できることなのか実現できないことなのかが分からなかったのですが
ここで質問させていただきます
ある一定の文字数で改行させることはスタイルシートで実現できるのでしょうか?
スタイルシートで実現できない場合なにで実現できるのかも教えていただけるとありがたいです
776Name_Not_Found:04/11/22 22:40:08 ID:bNdVBksE
>>775
だいたいでいいのなら、
width:Xem;
777775:04/11/22 22:49:16 ID:???
>>776
ありがとうございます
やっぱりそれでいいんですよね?
max-widthでもやってみたのですがFireFoxでは思うような動作をするのですが
IEでは変化がありません
これはIEが対応していないということなのでしょうか?
778Name_Not_Found:04/11/22 22:54:06 ID:???
779775:04/11/22 23:02:33 ID:???
>>778
リンクまでありがとうございます!!
ですが widthでも動作しないんですよ
IEはちゃんとVer.6です
780775:04/11/22 23:07:10 ID:???
すいません 途中で飛ばしてしまいました
ちなみに 指定部分は
body{
width: 600px;
}
としているだけです
他に試して見たらいい方法などがあれば教えていただけると幸いです
781Name_Not_Found:04/11/22 23:10:31 ID:???
すまん、君が何をしたいのかよくわからん。
「box 要素を任意の文字数で改行させる」ってことで
>>776 の width: Xem; を採用した、って事だと思っていたんだが、
なぜ >>780 で px 指定をしているの?
782775:04/11/22 23:22:25 ID:???
>>781
すいません・・
打ちミスです
日ごろはemを使わないため ついくせでpxを書いてしまいました
それにあわせて数値も大きく・・・  すいません
実際に書いたのは
body{width: 6em;}
です すいません
783Name_Not_Found:04/11/22 23:40:43 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>width テスト</title>
<style type="text/css">
.width-test {
width:10em;
border:solid 1px red; /* box の範囲を視覚化させただけ。必要なし。 */
}
</style>
<body class="width-test">
<p>あいうえおかきくけこさしすせそ。</p>
</body>

とりあえず width のテスト。
Windows IE/Firefox で希望通りの結果は得られる
784Name_Not_Found:04/11/22 23:47:26 ID:???
(続き)
ただし、Windows IE は連続する英数字に切れ目 (半角スペースとか記号とか) がないと
width の範囲を *広げてしまう* から、実際はあまり使えないともいえる。

先の書き込みの <p>〜</p> の箇所を
<p>http://foo.bar.baz/foo/bar/baz/foo/bar/baz/foo/bar/baz/foo/bar/baz/ </p>
とか
<p>12345678901234567890123456789012345678901234567890</p>
に変更してみるとわかりやすい

同様に Firefox の場合は、連続する英数字に切れ目がないと
width の範囲を *突き抜けてしまう*。上のサンプルを Firefox で見ればわかる。
785Name_Not_Found:04/11/22 23:48:41 ID:ckpZgAuR
質問です。
スクロールバーなのですが、
普通に色の設定はできるんですけど
例えば背景画像をスクロールバーでも用いたりはできるんでしょうか。
可能であれば方法を教えて下さい。
786775:04/11/22 23:51:22 ID:???
>>783
それはきたいどおりに行くんですけど・・
その内容をうまくいかないやつにコピペしてもだめです
他の部分が邪魔してるのかな・・
787Name_Not_Found:04/11/22 23:55:30 ID:???
>>786
自称標準準拠モードかい?
788775:04/11/23 00:07:57 ID:???
だめですね・・
他のスタイルを全て消してもだめみたいです・・
内容は<table>と<a>と<font>だけのシンプルなページなんですけどねぇ・・

>>787
まぁ 自称ですけど標準準拠です・・
789Name_Not_Found:04/11/23 00:12:27 ID:???
>>788
いやM$自称と……、つーかDOCTYPEスイッチ
790Name_Not_Found:04/11/23 01:06:14 ID:???
えっ??
お前らって
ttp://www.w3.org/TR/html4/strict.dtd
つかってる?

他にどんなのあるかプリーズ
791Name_Not_Found:04/11/23 06:51:33 ID:???
スレ違い

HTMLの仕様書嫁
792Name_Not_Found:04/11/23 07:13:09 ID:???
>>775
厳密には1em≠一文字分。「CSS 単位」でぐぐれ。
793Name_Not_Found:04/11/23 09:31:30 ID:???
<a href="./aaaa.jpg" target="_blank"><img class="image" src="./aaa.jpg" align="top"></A>texttexttext
上記のようなタグだと

┏━━┓texttexttext
┃   ┃
┗━━┛
と表示されますが

┏━━┓  texttexttext
┃   ┃
┗━━┛
という感じに、画像から少し離れた位置から字をはじめたいのですがどうすればいいのでしょうか?
それと、画像の周りにできる枠はborder=0にしたいです。
794Name_Not_Found:04/11/23 09:40:08 ID:???
>>793
このスレに来てるからCSSで出来ることは判ってるんだろうから
関係する要素を確認してみるべし。
795793:04/11/23 09:54:34 ID:???
img{
padding: 0px 30px 0px 0px;
border: 0px;
}

img{
margin: 0px 30px 0px 0px;
border: 0px;
}

とかやってみたんだけどなんかうまいこといかないんだよね・・・
796Name_Not_Found:04/11/23 10:19:12 ID:???
>>795
一旦
borderでどうなってるか確認してみたら?
797793:04/11/23 10:29:54 ID:???
>>796

>>795のやつを.cssに追加したらborderが0になるけど
border: 100px; としても太くならないんだよね・・・
798Name_Not_Found:04/11/23 11:25:02 ID:???
border: 5px solid #000;
799Name_Not_Found:04/11/23 11:46:31 ID:???
マルチカラムについての質問です

position:absoluteを使わずにfloatだけで整形したいのですが
┌─┬──────┐
│2 │1           │<html><body>
│  │            │<div id="main">1</div>
│  │            │<div id="menu">2</div>
│  │            │</body></html>
└─┴──────┘
2の横幅を固定して1の横幅はブラウザに任せて
可変にしたいのですが何か良い方法は無いでしょうか?
800Name_Not_Found:04/11/23 12:00:04 ID:???
>>799
menu {float : left; width : 200px;}
main {margin : 0 0 0 200px;}

ホントはこれだけじゃ足りないんで、とりあえず>>6あたりを熟読してみそ
801Name_Not_Found:04/11/23 12:00:31 ID:???
#

が抜けてますよ
802Name_Not_Found:04/11/23 12:12:36 ID:???
>>800
┌─┬──────┐
│  │1           │
│2 │            │
│  │            │
│  │            │
└─┴──────┘
1の左下に2が始まる状態になってしまうので何とかしたいのですが・・・
803793:04/11/23 14:49:11 ID:???
>>798
THX。
でも右のテキストの文字が横に寄らない・・・。・゚・(ノД`)・゚・。 ウワーン
804Name_Not_Found:04/11/23 14:51:10 ID:???
あ、marginにしたらできた。THX
805Name_Not_Found:04/11/23 15:06:25 ID:???
>>802
2を先に記述したらダメなの?
806Name_Not_Found:04/11/23 15:29:25 ID:???
外部CSSを使ってリンクの下線や背景色等を設定していますが、
こいつだけはCSSの影響を受けないリンクにしたいってな時には
どのようにしたらいいですか?

classとかで無効とかにできるものがあるのでしょうか?

よろしくお願いします。
807Name_Not_Found:04/11/23 15:50:07 ID:???
>>805
現状では2を先に記述する方法を用いていますが
メニュー部分の中身が多くなってきたので後から記述する方法で
何とかならないかなと・・・と思いまして
808Name_Not_Found:04/11/23 16:01:53 ID:AZ32t5pZ
CSSでBOXを横位置のセンタリングしたいんですけど、なにかヒントください
809Name_Not_Found:04/11/23 16:05:25 ID:???
>>808
>>5 をちゃんと読む。
810Name_Not_Found:04/11/23 18:17:10 ID:???
>>808
float,position
>>806
ないよ。普通はCSSを適用したいものにだけclassなどを振る。だから逆に
その元に戻したいやつにclassを振って、自分で元に戻るような記述をする。
元に戻すというプロパティ自体はない。

>>802
main{
float:right;
width:80%;
}
menu{
float:left;
width:20%;
}
html,body{
width:100%;
}
とかでやってみて
811806:04/11/23 18:35:49 ID:???
>>810
ありがとうございます。
やはりそうでしたか。とことん調べての結果だったので
藁をもすがる思いでした。
…といっても記述で戻せばいいんだし。

ありがとうございました(^-^)ノシ
812Name_Not_Found:04/11/23 18:56:01 ID:???
>>811
制作側のスタイル設定を無効にするよなプロパティあるといいんだけどね。
p{
text-indent:1em;
}
p.a{
style:none;
}
みたいなね。でもそういうのが仕様に追加されたとしても、
CSS2さえまともに実装しないベンダに期待しても無駄だけどね。
813Name_Not_Found:04/11/23 19:16:03 ID:???
>>812
それも制作側が書いているわけだが・・・
814Name_Not_Found:04/11/23 19:19:02 ID:oGgdLjJm
質問です。

カーソルを、自分で作った画像に変えたいのですが、
検索してその方法を調べてみましたら、

<p style="cursor: url(images/xxx.cur), crosshair">

これをbody内に記述すればいいようなことが書かれていたのですが、
僕はCSSをCSSファイルにひとまとめにしているので、
CSSファイル内に記述する時の書き方を教えて下さい。
815Name_Not_Found:04/11/23 20:03:08 ID:???
>>813
sytle:none;だけ特別なプロパティであればいいだけだろ。
頭固いなおまい。
>>814
・・・・・・何だこいつ?
816Name_Not_Found:04/11/23 20:22:10 ID:???
>>815
突っ込みどころが違うよ。
817Name_Not_Found:04/11/23 20:29:48 ID:???
>>816
兄さんたのんますわ
818Name_Not_Found:04/11/23 22:36:37 ID:ucSF0DY/
cssでドットのラインってひけますか?
819Name_Not_Found:04/11/23 22:45:44 ID:???
>>818
border : dotted 2px #FF0000;

こんな寛治で
820Name_Not_Found:04/11/23 22:48:56 ID:???
>>819
ありがとう!いろいろしてたらできちゃったんですがそっちの描き方のほうが
理想なのができました!
821Name_Not_Found:04/11/23 23:18:00 ID:GDfIwb9t
初心者スレからやってきました。
<td><select name=icon>\n";
このセレクトタグのまわりの色を変えたいのですが、やり方がわかりません。
他のinputタグとかは、 <input type=submit value="投稿する" class=t style="background-color:#ff0000;border:1px solid #006666">
のように変えました、セレクトタグは変えられないのでしょうか。
もし変えられるなら教えてください。
822Name_Not_Found:04/11/24 00:07:16 ID:???
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-dark-shadow-color:#000000;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#000000
ちょっとスクロールバーの色変えたくて色々やってみたのですが。
この色の指定にすると、スクロールバー上下にある三角がちょっとくぼみます。
上下に移動できる範囲になると、三角形がもとに戻るんですが、なぜでしょうか?
823Name_Not_Found:04/11/24 00:09:23 ID:???
>>821
何のソースを張ってるんだい?

tdを装飾すればいいだろ
824Name_Not_Found:04/11/24 00:15:05 ID:K0hJacg/
>>823
ご意見感謝。
色々な場所に下のをつけたしてるのですが、
style="background-color:#000000;border:1px solid #FFFFFF
すべてスクリプトエラーとでて、色を変えられないのです。
セレクトタグというのかオプションタグというのか、
これの背景の色は変えられるんですが、
まわりの色だけ変えられないんです、

<td><select name=icon>\n";
foreach(0 .. $#ico1) {
if ($ico eq $ico1[$_]) {
print "<option value=\"$_\" selected>$ico2[$_]\n";
} else {
print "<option value=\"$_\">$ico2[$_]\n";}}
print "</select>  \n";
825Name_Not_Found:04/11/24 00:24:55 ID:???
826Name_Not_Found:04/11/24 00:33:47 ID:K0hJacg/
うお、ありがとうございます。ようやくできました。
それでラストの質問なんですが、そのURL先を見てみると。
へんなスクリーンショットありますが、違うブラウザで見ると。
そんなへんな表示になってしまうということなんでしょうか。
もし、そうならデフォルトでいこうかと思います。
ただこのことは忘れずに、心にしまっておきます。
827Name_Not_Found:04/11/24 00:44:04 ID:jaamCgTB
カーソルの設定について教えて下さい。
ページ全体のカーソルを自分で作ったcur画像に設定した場合、
カーソルが文字の上に行ってもその画像のままになってしまいます。
文字の上に行った時だけ、文字用のカーソル(アルファベット大文字の『I』みたいな形の物)
にしたい場合はどのように記述すれば良いでしょうか。
828Name_Not_Found:04/11/24 00:57:35 ID:???
> 色々な場所に下のをつけたしてるのですが、
> style="background-color:#000000;border:1px solid #FFFFFF
> すべてスクリプトエラーとでて、色を変えられないのです。
> セレクトタグというのかオプションタグというのか、
> これの背景の色は変えられるんですが、
> まわりの色だけ変えられないんです、

Scriptエラーって・・・・
cgiの勉強して来い
829Name_Not_Found:04/11/24 03:04:21 ID:???
>>824
"を\でエスケプしてる?
830Name_Not_Found:04/11/24 05:18:35 ID:???
>>827
hover疑似クラスを使って。
831Name_Not_Found:04/11/24 08:37:03 ID:???
>>830
hoverいらんくね?
普通にpとかに指定するだけで。

つか、逆に、通常のポインタをCSSでその画像に指定、って方法じゃ無理なんか?
あんまし好ましくないから調べないで回答。
832Name_Not_Found:04/11/24 09:22:14 ID:???
>>831
好ましくなくても調べない奴は帰れ
833Name_Not_Found:04/11/24 09:44:33 ID:/vKdrH0Q
>>832
答えない奴もな
834Name_Not_Found:04/11/24 09:46:13 ID:???
>>833
ageる奴もな
835Name_Not_Found:04/11/24 17:00:23 ID:la7cp0SP
textareaにbackground-imageで背景画像を指定した場合、
repeat-xやfixedを一緒に指定すると画像そのものが消えてしまいます。
背景画像の固定のように、横にだけ連続し、下へスクロールしても画像が
動かないよう設定するにはどうやればいいでしょうか。
836835:04/11/24 17:11:07 ID:la7cp0SP
すみません、解決しました
837Name_Not_Found:04/11/24 17:38:41 ID:???
>>836
お前よー。11分で解決したってことは、ここで質問してから調べ始めたろ。
ある程度自分で調べてわからなかった時だけ質問しろよ。
な、ぼうず。
838Name_Not_Found:04/11/24 19:18:11 ID:???
やっとサイトが完成しました。
こちらでちょこちょこ助けていただいたおかげです。
ありがとうございました。

今日は、細かなミスをちょこちょこ修正して、
"This Page Is Valid HTML 4.01 Transitional!" になりました!

ところで一つ質問なんですが、
今回はサイトの幅を上下限設定して可変する様にしたのですが、
大手のメーカーオフィシャルサイトなんかは750px前後での
固定幅が多いみたいです。どちらも一長一短あるかと思います
が、一般的に見る側からして好まれるのはどちらなんでしょう。
839Name_Not_Found:04/11/24 21:00:19 ID:???
固定しない方が、様々な解像度・ウィンドウサイズに対応できて良い
840Name_Not_Found:04/11/24 22:16:29 ID:???
企業としてはできるだけどのブラウザでも同じように見せたい。
でも一枚画像はあほなのでがちがちに固定しています。そんだけ。
841Name_Not_Found:04/11/24 22:18:36 ID:???
>>838
暇なら可変で。そうじゃないなら固定でよし。
文字固定も別に問題はない。ただ固定するならある程度万人が読める大きさで。
解像度は標準考慮だけで問題なし。

まあ素人が作る誰にも見られないであろうサイトを作る上でのユーザビリテイに
ついてはこんなので十分だろ。
842Name_Not_Found:04/11/24 22:21:08 ID:???
>>840
企業というかデザイナとしてじゃないの?
デザインを売ってるのに環境によってスッピンやデタラメじゃあな。

ビデオのデッキによって女優の顔が変わるAVみたいなもんだ。
843Name_Not_Found:04/11/24 22:24:06 ID:???
>>842
そんなAVが欲しい。
844Name_Not_Found:04/11/24 22:24:41 ID:???
デザイナーの思い通りに作ったら没になるよ。企業のトップ関係はHTMLやらなんやら知らんから。
どんなに言っても物理タグを使うように言ってくる。
845Name_Not_Found:04/11/24 22:31:20 ID:???
>企業のトップ関係はHTMLやらなんやら知らんから。
>どんなに言っても物理タグを使うように言ってくる。

 知らないのになぜ物理タグ?
846Name_Not_Found:04/11/24 22:35:26 ID:???
>>845
何パターンか作って詳しい説明をしてしまった俺のせいです。
847Name_Not_Found:04/11/24 22:38:45 ID:???
ネゴが下手だったのね。
848838:04/11/24 22:44:28 ID:???
みなさん色々とありがとうございます。
個人サイトでは無くて、自社のサイトを
しこしこと自分で作ってるわけなんですが、
解像度の標準ってやっぱり800×600なんでしょうか。

849Name_Not_Found:04/11/24 22:47:17 ID:???
請け負った企業サイトですら、カスってなんぼですよ。
このスレ的には。
850Name_Not_Found:04/11/24 22:49:00 ID:???
解像度と閲覧窓と混同してはいけんよ。
851Name_Not_Found:04/11/25 09:12:52 ID:???
>>847
返す言葉もありませんorz
852Name_Not_Found:04/11/25 22:18:54 ID:???
サイトでoverflow-x: hiddenを使っているんですが、
評判のFireFoxを入れて閲覧してみたら聞いていませんでした。
Mozillaで見る場合はoverflow-x: -moz-scrollbars-none を併記すればいいんでしょうか?
853Name_Not_Found:04/11/25 22:43:01 ID:???
overflow-x はIEの独自拡張だと思った。
854Name_Not_Found:04/11/25 23:33:32 ID:???
「-moz-scrollbar」って何なんだ? Googleで0件だったのだが。
>852はどこからそんな情報を仕入れてきたのか気になる。
855Name_Not_Found:04/11/25 23:54:24 ID:???
http://deztec.jp/site/tips/page/p0032.html#values

ここっす。Mozillaでも横スクロールバーを消すにはと思って
適当に検索したら、Mozilla独自拡張ってのが出てきた。
856Name_Not_Found:04/11/26 00:01:17 ID:???
857Name_Not_Found:04/11/26 07:20:17 ID:???
>>852
そもそもfirefoxなんてヲタブラウザ使ってる奴は門前払いしとけ。
858Name_Not_Found:04/11/26 09:42:39 ID:???
>>852
このスレ的には、一番まともな実装だと思うが、いかがか。
859Name_Not_Found:04/11/26 16:21:00 ID:???
>>852-853
正解。

hoge
{
 overflow: -moz-scrollbars-horizontal;
 overflow-x: hidden;
}

>>854
うましか
860859:04/11/26 16:33:14 ID:???
うわぁ、、ごめんなさい(´・ω・`)

hoge
{
 overflow: -moz-scrollbars-vertical;
 _overflow: auto;
 overflow-x: hidden;
}

適当にハクったけど、もっといい方法あるかな?
861Name_Not_Found:04/11/26 17:26:02 ID:???
>>859
人のこと言えんがな。
862859:04/11/26 18:13:13 ID:???
>>861
自覚している故「除外検索なんて >>854 はおちゃめさんね♥」的な
ニュアンスで書いたんだけど、やってしまった。。

修正した内容は問題ないでしょうか?
863Name_Not_Found:04/11/27 01:15:08 ID:MTKWIA1M
質問です。
Movable Type3.11のスタイルシートをいじっています。
MacOS10.3 IE5.2です。

blogbody(ブログの本文の設定)で行き詰まっています。
他のサイトをみていて、みための良いフォントをみつけたので
スタイルシートを覗かしてもらったところ
フォントファミリーは以下の様になっていました。
(フォントファミリーを真似するくらいは許されますよね?)
font-family: "MS Pゴシック" ,"ヒラギノ丸ゴ Pro W4" ,"Osaka",verdana ,arial ,sans-serif;
と指定しているのですが、
同じように、フォントファミリーを書き換えても、そうなってくれません。
(フォントサイズの指定も同じ数値です)
同じくだりのフォントカラーの色を変えると、文字色は変わるので
スタイルシートは利いている状態だと思います。
私のMTの本文は、どうみてもOsakaフォントにしかみえません。
(もちろん同じブラウザでみての結果です)
そのサイトさんのフォントが私に、どのようなフォントでみせているのか
わかりませんが、確実にOsakaフォントではありません。
MS Pゴシックははいっていないので、ヒラギノ丸ゴ Pro W4のフォントが
見えているんだとはおもいます。
テストのためだけにそちらのサイトさんのスタイルシートをすべてコピーして
私のスタイルシートに貼付けてみました。
(もちろん、今現在に指定しているものは消去)
フォントカラーはかわるのに、やはり、フォントの見た目は
かわりません。
ただそのサイトさんと、私のサイトの唯一違うところは
私がEUC-JPで、そのサイトさんはutf-8で作っているところです。
なにか、お気付きになる事がありましたら
教えて下さい。
864Name_Not_Found:04/11/27 01:23:24 ID:???
>>863
自分は窓だから的外れかも知らんが。
ローカルで試しただけ?>テスト
もしそうならテスト用テンプレートを作って
オンラインでも試してみるべし。
865863:04/11/27 01:26:55 ID:MTKWIA1M
>>864
ありがとうございます。
もちろんオンラインでの結果です。
ローカルでは試していません。
書き忘れてすみません。
866Name_Not_Found:04/11/27 06:55:06 ID:???
>>863
P_BLOGのCSS?
なんでだろうね。
867Name_Not_Found:04/11/27 07:44:30 ID:???
>>863
エディタは?
自分のエンコードもUTF-8にしたらどうなるの?
あとコピペせずに一から手書きしてみたらどうなる?
868Name_Not_Found:04/11/27 08:23:31 ID:???
.css の最初に @charset "euc-jp"; ではどうでしょうかね。
869863:04/11/27 13:20:07 ID:8zdE1Yo2
みなさん、ありがとうございます。

頭に、@charset "EUC-JP";と書いてあります。
エディタを使っているのではなく、ブラウザで、書き
再構築というボタンを押すと、自動で書きかわるといったものです。

>866
すみません、P__BLOG??
ってなんでしょうか。

それと、今更なんですがsafariで確認してみました。
そうしたら、ヒラギノ丸ゴ Pro W4になっていました。
でもIEでは、Osakaです。
IEで参考したページをみるとヒラギノ丸ゴ Pro W4でみえるのに
私のサイトはOsakaでみえる。

んんん、bodyではフォント指定はしていないのですが
他に考えられる原因はありますでしょうか?
870Name_Not_Found:04/11/27 13:30:52 ID:???
>>869
そのCSSに
body{
color : #FF0000;
font-size : 200%;
}
とか入れて 反映されているかどうかを確認してみたら?
871Name_Not_Found:04/11/27 13:35:28 ID:???
えーっと
上下にスペースを作る場合
数値を入力するべき項目は
paddingとmarginどちらでしたっけ?

padding: x 0 x 0; 

margin: x 0 x 0;

どっちかはだめと読んだ気がするのですが。
872Name_Not_Found:04/11/27 13:48:37 ID:???
どうでもいいならmarginにしとけば
873Name_Not_Found:04/11/27 14:12:41 ID:???
やる気があるなら、ちゃんと意味を調べて使い分けれ
874Name_Not_Found:04/11/27 14:16:22 ID:???
>>873
いやいや
どちらも同じような意味になるじゃないですか。
どちらかの設定にするとブラウザによって不都合が出ると読んだのです。
875Name_Not_Found:04/11/27 14:16:59 ID:???

訂正
どちらも同じような役割×
どちらも同じような結果○
876Name_Not_Found:04/11/27 14:33:05 ID:???
>>875
役割なんて>>874のどこにも書かれていないじゃないですか。
877Name_Not_Found:04/11/27 14:38:07 ID:???
>>876
間違えただけじゃないですか。
意味×
結果○
878Name_Not_Found:04/11/27 15:09:41 ID:???
結果は同じでも意味が違う。
そんなの気にしないってのならどっちでもいいじゃないですか。
ブラウザによって不都合が出てもいいじゃないですか。
879872:04/11/27 15:35:34 ID:???
>>874
意味も役割も結果も違う。
同じ結果しか出ないような使いかたしかしてないだけだろ

繰り返すが、どうでもいいならmarginにしとけ
880Name_Not_Found:04/11/27 17:09:38 ID:m+ezKMFe
凄く分かりにくい形の質問で申し訳ないのですがお願いします。
cssで最初に指定をしておく一連のものについて。
以前どこかで見たのですが、フォントサイズを最初にゼロにしておくとかなんとか・…。
で、90%くらいにするとか何とか・…。
なんか、どんなサイト作る時でも最初に指定するある一定のお約束みたいなcssについての話だったのですが
どこで見たのか思い出せず、探せません。
雲を掴むような話で申し訳ないのですが、これで分かる人がいらしたらお願いします。
881Name_Not_Found:04/11/27 17:29:12 ID:???
>>869
自分もWin+IE+UTF-8で困ったことあるんで
助けられたら、と思うんですが、
・MSゴシックの前に[ヒラギノ・・・]を置いてみる
・CSSはちゃんとeuc-jpになっているか(MTだったらなってるだろうけど)
・bodyにもフォント指定してみる
って感じかな?
MacIEが日本語名のフォントを読み込んでないんだよね、きっと。
882863=869:04/11/27 17:45:38 ID:8zdE1Yo2
>>881
フォントの順番をかえてみたり
そのフォントのみにしてみたり
したけど、だめでした。
cssをftoでDLしてエディタで開いてみたら、きちんとeucでした。
883863=869:04/11/27 17:50:40 ID:8zdE1Yo2
あぁ、途中で書き込む押しちゃいました。

>>881
fto×→ftp
ありがとうございます。

IEでそのフォントがみれるサイトとみれないサイトがあるのが
なんとなく許せない。
んん...

>>870
ありがとうございます。
bodyに付け加えてみましたが、フォントがでかくなる事もなく
色も変わる事もなくでした。
それが正常ですよね。

またしばらく、色々いじってみます。
また行き詰まったら、お知恵を貸して下さい。
ありがとうございました。
884Name_Not_Found:04/11/27 17:52:24 ID:???
まどろっこしいので、htmlとcssを晒してみてはくれんじゃろか?
885Name_Not_Found:04/11/27 18:09:53 ID:???

> bodyに付け加えてみましたが、フォントがでかくなる事もなく
> 色も変わる事もなくでした。
> それが正常ですよね。

正常じゃないんじゃない??
886Name_Not_Found:04/11/27 18:26:04 ID:???
>883の人なんかとんでもない勘違いをしてる予感がする。
887Name_Not_Found
>>880
>フォントサイズを最初にゼロにしておくとかなんとか・…。
0じゃなくて100%だと思う。
フォントサイズは%とか相対的にサイズ変更することが多いから
基本となるフォントサイズはきちんと明示しておいたほうが安心、ということ。

同様に、背景色やら文字色もきちんと指定しておきましょう。
全ての人が背景色を白、文字色を黒にしているとは限りませんから。


って、こういうことではない?