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

このエントリーをはてなブックマークに追加
1Name_Not_Found
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※

■■■■■ 質問のしかた ■■■■■

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

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

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

【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc8.2ch.net/test/read.cgi/hp/1139885961/

関聯リンクは>>2-15 あたり
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9
2Name_Not_Found:2006/03/08(水) 11:09:29 ID:???
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第4版
 http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え?
 http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 30
http://pc8.2ch.net/test/read.cgi/hp/1136660907/l50

【仕様書】
CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/css1/toc.htm
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html
3Name_Not_Found:2006/03/08(水) 11:10:33 ID:???
【解説など】
・Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
 http://www.nextindex.net/web/CSS/
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
 http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方法
 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
 http://ike.s33.xrea.com/
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php
4Name_Not_Found:2006/03/08(水) 11:10:34 ID:hHnUf1tn
hehehe
5Name_Not_Found:2006/03/08(水) 11:11:05 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
 http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
 http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
 http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html
6Name_Not_Found:2006/03/08(水) 11:11:56 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
スタイルシートスタイルブック
 http://stylesheet-stylebook.com/
7Name_Not_Found:2006/03/08(水) 11:21:05 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかをを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html
8Name_Not_Found:2006/03/08(水) 11:26:05 ID:???
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html

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

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

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

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html
9Name_Not_Found:2006/03/08(水) 11:27:29 ID:???
【FAQ】
Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScript?でやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

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

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html
10Name_Not_Found:2006/03/08(水) 11:34:46 ID:???
【参考】
*IEの position:absolute; のバグを利用した擬似フレーム
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

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

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

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

アンダーバー・ハックの方がいいか?
http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
11Name_Not_Found:2006/03/08(水) 11:36:31 ID:???
12Name_Not_Found:2006/03/08(水) 11:52:26 ID:???
53rd
13Name_Not_Found:2006/03/08(水) 11:54:43 ID:???
すまん
反省している
14Name_Not_Found:2006/03/08(水) 12:18:15 ID:???
>>1乙。

ま、今までもX1ndとかだったしww
15Name_Not_Found:2006/03/08(水) 12:18:45 ID:???
X1thか。
16Name_Not_Found:2006/03/08(水) 12:40:06 ID:???
左右の真ん中は text-align: center; ですが
上下の真ん中はどうやって指定すればいいのでしょうか?
17Name_Not_Found:2006/03/08(水) 12:45:19 ID:???
>>16
ちょっと上のテンプレも見えないのかい?
18Name_Not_Found:2006/03/08(水) 12:50:09 ID:???
見えません><
19Name_Not_Found:2006/03/08(水) 13:05:03 ID:???
padding: 1px xxx 0px 2px;
xxx の部分だけサイズを特に指定しない場合はどうすればいいのでしょうか?
20Name_Not_Found:2006/03/08(水) 13:20:09 ID:???
>>19
pxddingを分けて書く。
ていうか前スレ埋めてよ。
21Name_Not_Found:2006/03/08(水) 14:13:29 ID:???
>>17
すいません・・・聞き方がわるかったです。
真ん中にしたいのですが以下のやり方だと効果がないようなのです。。。

<div id="head">
<div id="head_logo">
logo space
</div>
<div id="head_right">
right space
</div>
</div>

#head {
background-color:yellow;
text-align: center;
width:770px;
margin:5px 40px 10px 40px;
padding-bottom:4px;
}
22続きです。:2006/03/08(水) 14:14:03 ID:???
#head_logo {
background-color:red;
float:left;
text-align: left;
vertical-align: middle;
width:200px;
height: 60px;
padding:0px;
}
#head_right {
background-color:blue;
text-align: right;
vertical-align: middle;
float:right;
height: 60px;
margin:0px;
padding: 0px;
}
23Name_Not_Found:2006/03/08(水) 14:48:20 ID:???
24Name_Not_Found:2006/03/08(水) 15:00:07 ID:DDCDE7wU
positionプロパティのabusoluteとrelativeがよく理解できないのですが、
abusoluteはページ左上が基準、relatibeは親要素の左上が基準という認識で
いいんでしょうか?
25Name_Not_Found:2006/03/08(水) 15:07:18 ID:???
誰も前スレ埋める気がねーのはいいかげんにしてくれ。

>>24
absoluteがコンテナブロックからの絶対位置、relativeが通常フローからの相対位置。
但し親コンテナがdivの場合、確かIEでバグがあって無視されることがあったような。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#position
26Name_Not_Found:2006/03/08(水) 15:32:55 ID:???
>>23
どういう事でしょうか?
27Name_Not_Found:2006/03/08(水) 15:41:08 ID:DDCDE7wU
>>25
なんとなくですが理解できました。
ありがとうございました。
2824:2006/03/08(水) 15:50:49 ID:DDCDE7wU
もう1つ質問なんですが、
Macでページを作成しているのですが、
<div id="hoge">

ああ
あああ
ああああ


</div>

#hoge {background : url(./img.jpg) no-repeat bottm right fixed; }

とすると、MacのIE、サファリ、Opera、Firefoxではスクロールしても常にimgがページ右下に配置されているのですが、WinIEではスクロールしきった右下にしか配置されません。fixedが効いていないようです。
WinIEのバグなのでしょうか?それともCSSの記述が間違っているのでしょうか?
よろしくお願いします。
29Name_Not_Found:2006/03/08(水) 16:07:46 ID:???
ここまでスレタイ */
30Name_Not_Found:2006/03/08(水) 17:47:53 ID:???
>>28
まずタイプミスしてないかチェックするべき。
で、fixedはいらんだろ。
backgroundのfixedはbackground-attachmentの値。
positionとは違う。
31Name_Not_Found:2006/03/08(水) 17:50:25 ID:3ROOx1l0
cssで設定しているものよりも
htmlで設定するものを優先させたいのですが
どうすればいいでしょうか?
例えばfont colorなどを、cssファイルで決めているものより
優先させたい場合など。
32Name_Not_Found:2006/03/08(水) 18:12:05 ID:???
>>31
htmlの意味
33Name_Not_Found:2006/03/08(水) 18:12:07 ID:???
>>31
せっかくCSS使ってるのに、そんなことをするなんてイクナイ。
フォントや色はCSSで統一して、ID、クラス、場合によっては<span>の適用だけにするのがベストでしょう。
34Name_Not_Found:2006/03/08(水) 18:17:46 ID:gqJJfVxD
/*----もう何がなにやら分かりませんよ><----*/
3521-22:2006/03/08(水) 20:54:21 ID:???
。・゚・(ノД`)・゚・。 ウワーン
できないよぉorz
仕事の休みが無駄になった
36Name_Not_Found:2006/03/08(水) 21:28:48 ID:???
>>35
>>8 Q6
37Name_Not_Found:2006/03/08(水) 21:35:23 ID:???
なんかかなり長文で理解できんorz
38Name_Not_Found:2006/03/08(水) 23:22:22 ID:???
11 :Name_Not_Found:2006/02/14(火) 13:25:48 ID:???
>>1
>【CSS検証】>>2
……って、落ちてるけど?

【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
39Name_Not_Found:2006/03/09(木) 11:22:30 ID:???
上に真ん中にできないっていう書き込みあるけど
俺もできないまま放置してたので質問させてもらう

#test {
width:500px;
hight:500px;
vertical-align: middle;
}

<div id="test">
testtesttest
</div>


こういうのでも真ん中に行かないのだがどうすれば?
Q6読んだけど、いまいち不明
40Name_Not_Found:2006/03/09(木) 11:38:02 ID:???
>いまいち不明
Web作る前に日本語の勉強を。

そのソースのどこに真ん中の指定があるのかな?
41Name_Not_Found:2006/03/09(木) 12:00:17 ID:???
>>40
vertical-align: middle;
42Name_Not_Found:2006/03/09(木) 12:03:07 ID:???
何故vertical-align: middle;
43Name_Not_Found:2006/03/09(木) 12:23:31 ID:???
http://www.htmq.com/style/vertical-align.shtml
を見たら縦方向の揃え位置を指定するって書いてるので・・・
上下の真ん中にしたいんだけど・・・間違ってるか?
44Name_Not_Found:2006/03/09(木) 12:27:10 ID:???
>>43
vertical-alignはインラインに対してのみ有効。
ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#vertical-align
一行で中央にしたいのならline-height:500px;。
但し折り返しが入ったときheightでは下ボックスと重なるだろうからmin-heightに変更。
45Name_Not_Found:2006/03/09(木) 12:28:15 ID:???
すまん、インラインの行に対してのみじゃなく、テーブルのセルに対しても有効だ。
46Name_Not_Found:2006/03/09(木) 12:40:03 ID:???
間違ってる
47Name_Not_Found:2006/03/09(木) 14:07:47 ID:+UlHsFBB
リストの左側の余白ってどうやって調節するのですか?

    ・AAAAA
    ・BBBBB
↓こうしたい場合とか
 ・AAAAA
 ・BBBBB
48Name_Not_Found:2006/03/09(木) 14:15:54 ID:???
margin
49Name_Not_Found:2006/03/09(木) 14:16:42 ID:???
margin
5047:2006/03/09(木) 14:18:39 ID:???
>>48-49
.business_box2 li{
margin-left: 5px;
}

こういうこと?変わらないよ・・・
51Name_Not_Found:2006/03/09(木) 14:22:48 ID:???
そりゃ変わるわけない
5247:2006/03/09(木) 14:24:19 ID:???
>>51
<ul>にmarginやったら変わった!!

けど0pxにしても左にまだ余白があるんだけど・・・
どうしてなの?
53Name_Not_Found:2006/03/09(木) 14:27:06 ID:???
CSSの最初の行に

*{margin:0; padding:0;}

って書いてみ。
5447:2006/03/09(木) 14:38:26 ID:???
>>53
やったらうまくいったけど
他のまで影響されてる・・・・
<p>とか<dd>とか全部

他にリストだけ変更するいい方法無いのでしょうか?
55Name_Not_Found:2006/03/09(木) 14:40:08 ID:???
>>54
うん、むしろそれこそが狙い。
そうやって全部自分で設定して、ブラウザごとの表示の違いを削っていくのよ。
何も指定しない場合は、IEとそれ以外でmarginの取り方の差みたいなのが出ちゃうから。
56Name_Not_Found:2006/03/09(木) 14:41:33 ID:???
ちなみに、これってCSSを初心者に教える時にまず最初に教える事ね。
余白を気にしだす=デザイン意識も高まるし一石二鳥。
5747:2006/03/09(木) 14:47:57 ID:???
>>55-56
そういう事ですか
全部自分でやれ!って事ですね
それの方が結果として簡単って事ですよね

頑張ってやってみます!有難うございました(゚∀゚)ノ
58Name_Not_Found:2006/03/09(木) 15:11:41 ID:???
調教しがいがあるわね
59Name_Not_Found:2006/03/09(木) 15:39:21 ID:???
女王様!
60Name_Not_Found:2006/03/09(木) 19:10:48 ID:RTHMlyJK
BODYにフォントの設定の記述を入れてるんですが、
テーブルタグ内に入っている内容が変化しません。なぜなんでしょうか?
61Name_Not_Found:2006/03/09(木) 19:30:26 ID:???
>>60
なぜCSS質問スレで聞くのですか?
62Name_Not_Found:2006/03/09(木) 19:33:49 ID:RTHMlyJK
>>61
いや、だから

SCCで
BODY{};
というように、BODY全体にフォントスタイルを決めたいのですが
中身の文字がちっともかわりません。ビルダーで書いてる記述は
問題ないと思います。
これはどういうことなんでしょうか?
63Name_Not_Found:2006/03/09(木) 19:35:40 ID:RTHMlyJK
訂正
SCC→CSS
64Name_Not_Found:2006/03/09(木) 19:39:37 ID:???
>>62
* {なんちゃら}
65Name_Not_Found:2006/03/09(木) 20:04:09 ID:RTHMlyJK
>>64

いや、なんちゃらはもう入ってます。

BODY{
font-size : xx-small;}

です具体的には。
でも、内容が変わらないんです、
文字が小さくならないんです。
66Name_Not_Found:2006/03/09(木) 20:09:16 ID:???
>>64の意味が分かるまでテンプレで基礎を勉強してきたほうがいい。
67Name_Not_Found:2006/03/09(木) 20:10:50 ID:???
>>65
>>64で重要なのは、なんちゃらのほうでなく「*」のほうだぞ。
「俺はそこに「BODY」って既に書いてある!」って言っても意味ないぞ。
CSSにおける「*」の意味を調べれ。
68Name_Not_Found:2006/03/09(木) 20:18:54 ID:RTHMlyJK
*ってなんですか?
具具って見ましたが、*が無視されます。
69Name_Not_Found:2006/03/09(木) 20:27:07 ID:???
>>68
それの記号としての呼び名はなんだ?このスレは何のスレだ?
一回ググってそれでおしまいか。
「CSS アスタリスク」でググるくらいの工夫をしろ。
70Name_Not_Found:2006/03/09(木) 20:28:16 ID:???
ワイルドカードもしらんのか?

全てに対応って意味だ
71Name_Not_Found:2006/03/09(木) 20:40:49 ID:???
おまいら親切すぎ
72Name_Not_Found:2006/03/09(木) 20:57:07 ID:RTHMlyJK
ビルダーのスタイルシートマネージャでアスタリスクを定義するには
どうすればよいのでしょうか?
73Name_Not_Found:2006/03/09(木) 21:07:34 ID:???
ビルダースレへ逝け
74Name_Not_Found:2006/03/09(木) 22:21:05 ID:???
ここで聞くべきかわかりませんが、Geckoに関する質問です

二つのボックスを縦に並べて、両者のマージンを0pxにし、それぞれに背景色を指定しています
本来なら二つのボックスはぴったりくっつくはずで、IEとOperaではちゃんと表示されます
ところがFF1.5およびNetscape7.2で表示すると、両者の間に高さ1pxの隙間ができていることがあります
上のボックスに文章を1行足すだけで消えたり現われたりします
しかもおかしな事に、FF1.5では、ボックスの境界が画面の下のほうに表示されている時は隙間がないのに
スクロールして上方に移動すると隙間が現われます

これはGeckoのバグでしょうか?また解決策は知られているのでしょうか
すみませんがどなたか詳細をご存知でしたらお教えください
75Name_Not_Found:2006/03/09(木) 22:53:03 ID:???
>>74
本当ならバグスレ向きだと思うが、普通じゃならない希ガス。どういう条件だ?
これ↓でもなる?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title></title>
<style type="text/css">
<!--
* { margin : 0; padding : 0; }
ul { background : #ffc; }
p { background : #ccf; }
-->
</style>
</head>
<body>
<ul>
<li>テスト</li>
<li>テスト</li>
</ul>
<p>テスト</p>
</body>
</html>
76Name_Not_Found:2006/03/09(木) 22:54:05 ID:???
>>74
それが再現するコードをよろしく。
77Name_Not_Found:2006/03/09(木) 22:59:29 ID:???
残念ながらこちらではそんな現象は確認できなかった。
Fx(FFはFirefoxのことだよね? 公式ページによると、Fxって略記しろってさ)1.5でしか調べてないけど。
以下、その時のソース。

<?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 xml:lang="ja-jp" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>新規</title>
  <style type="text/css" media="screen">
<!--
  div.ue {
padding: 0px;
background-color: #ff0000;
}
  div.sita {
padding: 0px;
background-color: #00ff00;
}
-->
  </style>
</head>
78Name_Not_Found:2006/03/09(木) 23:00:36 ID:???
<body>
  <div class="ue">
    前人未踏四面楚歌<br />
    天変地異戦々恐々<br />
    赤red赤red赤red赤red赤red赤red赤red赤red赤red赤red赤red赤red赤red赤red
  </div>
  <div class="sita">
    緑green緑green緑green緑green緑green緑green緑green緑green緑green緑green<br />
    異口同音呉越同舟<br />
    帝王切開焼肉定食
  </div>
</body>

</html>
79Name_Not_Found:2006/03/10(金) 01:04:28 ID:???
>帝王切開焼肉定食

これはすげーなぁー
8074:2006/03/10(金) 02:57:55 ID:???
>>75,77
こちらの環境ではそれらのソースでは再現しませんでした
これから詳しく述べますがボックスの高さや
スクロールが関係しているためと思われます
症状がIE の Peekaboo Bug に似ているようなところもあります(原因は全く違うと思いますが)
とりあえず自分なりに回避策らしきも見つけました
というか、比較的稀な現象のようです

>>76
作ってみたので以下にコピーします、長くなってしまいますがお許しください
81Name_Not_Found:2006/03/10(金) 02:58:46 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>TITLE</title>
<style type="text/css" media="all">
<!--
*{margin:0; padding:0;}
body{ background:#fff; padding:30px; font-size:15px; font-family:'MS Pゴシック'; color:#fff;}
p{ line-height:1.3em;}
hr{ height:20px; border:0px;}
div.box_a{ background:#000;}
div.box_b{ overflow:auto; margin-left:1px; background:#555;}
div.box_c{ background:#000;}
-->
</style>
</head>

続く
82Name_Not_Found:2006/03/10(金) 02:59:19 ID:???
<body>
<div class="box_b">
<p>この段落をdivから出すと、リロードしなくても常に隙間が見えます</p>
</div>
<hr>
<div class="box_a">
<p>Box A</p>
<p>ここが描画領域の外に出た後、リロードすると隙間が現われます</p>
</div>
<div class="box_b">
<p>Box B</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>あ</p>
<p>リロードすると、この下の境界に1pxの隙間</p>
</div>
<div class="box_c" style="height:2000px;">
<p>Box C</p>
<p>スクロールしないと再現しないので、スクロールバーを出すために、このボックスはわざと高さを持たせています</p>
</div>
</body>
</html>
8374:2006/03/10(金) 03:00:00 ID:???
以上です
再現の方法ですが、このソースでは

1.まず、最初の表示状態では
Box A
Box B
Box C
の順に縦に並んでおり(その前後のボックスは高さ調節のためで、本質的には無関係です)、
各々の境界には隙間はない

2.最初の表示状態から画面を数行スクロールし、Box A を画面外に追い出す
 ただし、Box B と Box C の境界は表示されているようにする

3.この状態でリロードすると、Box B と Box C との境界に高さ1pxの隙間ができ、body に指定した背景色(白)が見える

という手順です

以下のUAで再現されます
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040804 Netscape/7.2 (ax)
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20050729 Netscape/8.0.3.3
Fx1.5(>>77さんご指摘ありがとうございます)では、今回は「スクロールすると勝手に」ではなく、
「スクロールしてからリロード」すると再現しました
ただしコメントアウトにあるように、最初の<p>test</p>をdivの外にだすと、常に隙間が現われます
Netscapeでは、常に隙間が見えていました。IE, Operaでは再現されませんでした
8474:2006/03/10(金) 03:00:49 ID:???
まずわかった事は、問題のボックス同士の境界が、
ページの先頭から何ピクセルの位置にあるかが関係していそうだということです
font-sizeをpxで指定したり、<p>あ</p> などの無駄に見える段落をいくつか残しているのはそのためで、
これらの数を変えると、再現されなくなります
従って回避策として、何らかの方法でどこかのボックスの高さやマージンを1pxでも変えてやると
隙間ができなくなることが多いようです、常にそれで回避できるかどうかはわかりませんが
むしろこの現象を再現するためには、各所を1px単位で調整するくらいやらないといけないようです
(ただしbodyに指定したpaddingの値は無関係でした)

それから、
div.box_b{ overflow:auto; margin-left:1px; background:#00f;}
という部分ですが、overflow:auto;をやめるか、margin-left:0px;とすれば解消するようです
本来このoverflowは、このボックスの子要素がfloat:left;というプロパティを持っており、
何もしないとこのボックスが子要素の高さより小さくなってしまうのを回避するために指定していたものです
また、margin-leftは、0pxより大きなどんな値を指定しても再現します

長くてすみません、素人にはこれ以上のことはわかりませんが、とりあえず確認をお願いします
8574:2006/03/10(金) 03:54:23 ID:???
すみません、間違えました>>83
×ただしコメントアウトにあるように、最初の<p>test</p>をdivの外にだすと、常に隙間が現われます
○段落中にあるように、最初の<p>〜</p>を以下同文
86Name_Not_Found:2006/03/10(金) 04:19:02 ID:???
IEでフロートさせたDIV要素のmarginが倍になっちゃうんだけど、これって直せない?
8786:2006/03/10(金) 04:24:27 ID:???
自己解決した
88Name_Not_Found:2006/03/10(金) 10:34:34 ID:???
>>74,85
よくわからんソースだが、
body{padding:30px;}とdiv.box_b{overflow:auto; margin-left:1px;}あたりがあやしい。
89Name_Not_Found:2006/03/10(金) 10:48:46 ID:???
>>74 >>81

  <p>Box A</p>
  <p>ここが描画領域の外に出た後、リロードすると隙間が現われます</p>
  </div>
これは再現できなかった。

  <p>リロードすると、この下の境界に1pxの隙間</p>
  </div>
こちらは描画領域の外に出た後、リロードすると境界に1pxの隙間が現れた。
また、リロードだけでなく、描画領域の外に出した後、ウィンドウサイズを変更しても発生した。
……とうやら、Box Bの下1pxが侵蝕されて(?)白くなっているようだ。
普通、margin ではボックスの外側に余白ができるのに。

  また、margin-leftは、0pxより大きなどんな値を指定しても再現します。
0pxでも-20pxでも再現したよ。

この問題、環境に依存するのかね〜。
自分はGeckoのバグだと思う。
9089:2006/03/10(金) 11:09:53 ID:???
>>74>>81
リロードするとできる隙間の上に、ブラウザではない別のソフト(たとえばテキストエディタ)のウィンドウを重ねると、その隙間が一部分だけ正しい色に染まることがある。
五回に一回くらいだけどさ。
やっぱりGeckoのバグかと。
91Name_Not_Found:2006/03/10(金) 11:20:30 ID:???
>>89 >やっぱりGeckoのバグかと

報告したら?
9289:2006/03/10(金) 11:24:05 ID:???
>>91
正直、Mozillaみたいな大きいところにバグを報告するのはおっかない。
93Name_Not_Found:2006/03/10(金) 13:23:56 ID:???
h4 #main {
color: red;
}

<h4 id="main">サイト概要</h4>
id=mainのh4のみに適応するにはどうやるんだっけ?
忘れたorz
94Name_Not_Found:2006/03/10(金) 13:26:38 ID:???
95Name_Not_Found:2006/03/10(金) 13:27:10 ID:???
>>94
どこどこ?
96Name_Not_Found:2006/03/10(金) 13:28:13 ID:???
>>94
THX
h4#main でよかったのかぁ

>>95
偽者乙
97Name_Not_Found:2006/03/10(金) 13:35:45 ID:???
偽者って別に>>93を騙ってるわけじゃないじゃん
てか質問するんならID出せよ
98Name_Not_Found:2006/03/10(金) 16:30:27 ID:???
>>97
あの状況を見れば>>93を騙っているようにしか見えないが.
わざわざやぶ蛇なことをしなくても良いよ.
99Name_Not_Found:2006/03/10(金) 17:26:37 ID:???
float:left;
と似たやつって何があったっけ?
100Name_Not_Found:2006/03/10(金) 17:27:18 ID:???
float:left;で実現したいことによって違う
101Name_Not_Found:2006/03/10(金) 17:29:56 ID:???
>>100
menu main
menu main
menu main
menu main
menu main
menu main

って感じに横二行にしようとしてる
102Name_Not_Found:2006/03/10(金) 17:47:24 ID:???
float:leftでもいいし、display:inlineでもいいし、
親コンテナを右に寄せておいて子にposition:absiluteで左に移動させてやってもいいし。
10374:2006/03/10(金) 18:12:02 ID:???
>>88
元のhtmlから不要と思われる部分を削って作ったのでこうなりました
試していたら、bodyのpaddingとdiv.box_bのmargin-leftが両方0pxのときに限り再現しませんでした
どちらかを0以外の値にすると再現します

>>89

  <p>Box A</p>
  <p>ここが描画領域の外に出た後、リロードすると(Box B と Box C との間に)隙間が現われます</p>
  </div>

という意味です、よって私も後者のように再現します
誤解を与える書き方をしてすみませんでした

>描画領域の外に出した後、ウィンドウサイズを変更しても発生
本当ですね、今気付きました

>>90
それも同じように見られます、やはりバグですか…
リロードで再現するくらいならまだいいのですが、時折スクロールしただけで再現することがあって
背景の色や画像によっては結構目立って困ることがあるんですよね
とりあえず問題の境界よりも上にあるどこかのボックスの高さを1pxでも変えてやれば消えることがおおいので対処はできそうですが

長々と失礼しました
104Name_Not_Found:2006/03/10(金) 18:23:49 ID:???
float:left; を使うと場所がちょっとおかしく時ありませんか?
105Name_Not_Found:2006/03/10(金) 18:23:55 ID:???
>>103
もじらに言うのはともかくさ、バグ辞典スレのほうには報告してきてくんねーかな
106Name_Not_Found:2006/03/10(金) 18:25:54 ID:???
>>104 です
float:left; を使うとテキストが少し右下に移動するんです・・・
107Name_Not_Found:2006/03/10(金) 18:27:32 ID:???
>>106
ちゃんとclearしてるか?
108Name_Not_Found:2006/03/10(金) 18:48:39 ID:???
>>107
clearって?
恐らくやってないorz
ちょっと調べてきます
109Name_Not_Found:2006/03/10(金) 18:48:48 ID:???
>>105
わかりました、行って来ます
110Name_Not_Found:2006/03/10(金) 18:53:08 ID:???
clear: both;
bothをrightやleftに変えて
いろんな値に順番に書いてみたが変わらず・・・
111Name_Not_Found:2006/03/10(金) 18:54:54 ID:???
>>109
どうもありがとう

>>110
ソース出して
112Name_Not_Found:2006/03/10(金) 18:59:32 ID:???
113Name_Not_Found:2006/03/10(金) 19:03:50 ID:???
>>111
#head {
text-align: center;
width:700px;
margin:5px 40px 10px 40px;
padding-bottom:4px;
border-bottom: #888888 1px solid;
}
#menu {
float:left;
font-size:10px;
width:200px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
#main {
font-size:10px;
width: 500px;
margin:17px 0px 0px 210px;
padding: 5px 0px 0px 0px;
}
<div id="head">
Title
</div>
<div id="menu">
test
</div>
<div id="main">
main
</div>
marginとpaddingの上からの高さは同じなのに
testとmainって字が明らかに高さ違うのはこれで確認できます。環境はIEの最新です
114Name_Not_Found:2006/03/10(金) 19:21:57 ID:???
>>113
clearは何段にも渡らないんだったらいらないかも。
どうでもいいけど、高解像度のパソコンで見てみ・・・読めないじゃなくて見えない。

#menu {
clear:left;
float:left;
font-size:10px;
width:200px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
#main {
float:left;
font-size:10px;
width: 500px;
margin:17px 0px 0px 210px;
padding: 5px 0px 0px 0px;
}
115Name_Not_Found:2006/03/10(金) 21:59:00 ID:???
>>114
10pxってそんなに字が小さいですか?
1920x1200 の環境ですが小さくはないですけど・・・?
116Name_Not_Found:2006/03/10(金) 22:02:08 ID:???
>>114
10pxの文字が見えにくいなら環境終わってるな
小さいモニタで解像度でかくするからだ
117Name_Not_Found:2006/03/10(金) 22:04:54 ID:???
たくさんの人に見てもらいたくなければ、それでも医院じゃね?
118Name_Not_Found:2006/03/10(金) 22:09:53 ID:???
俺はブラウザの設定で最小フォント16pxにしてるから知らんけど
119Name_Not_Found:2006/03/10(金) 22:10:49 ID:???
環境でIEに限定されてる件
120Name_Not_Found:2006/03/10(金) 22:12:17 ID:???
>>113さん、ありがとう

#head {
text-align: center;
width:700px;
margin:5px 40px 10px 40px;
padding-bottom:4px;
border-bottom: #888888 1px solid;
}
#menu {
float:left;
font-size:10px;
width:200px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
#main {
font-size:10px;
width: 500px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
<div id="head">
Title</div>
<div id="menu">
test</div>
<div id="main">
main</div>

横幅の計算をすると10+200+10+500=720px なので、横幅720pxのテーブルの中に入れると
明らかにテーブルからはみ出てしまうのですが・・・なぜなのでしょうか?
121Name_Not_Found:2006/03/10(金) 22:12:36 ID:???
これはバグでしょうか。防ぐ方法があれば教えてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>バグ検証</title>
<style type="text/css">
<!--
p {background: #dfc;}
img {float: left;}
-->
</style>
</head>
<body>
<p><img src="test.png" width="250" height="200" alt="画像">
WinIE6.0でこの文字が消えます。
<br style="clear:both;">「フロートの後続フロー制御を設定したbr要素が親要素に包含されない」回避の文字列。</p>
</body>
</html>
122Name_Not_Found:2006/03/10(金) 22:13:31 ID:???
>>118
ブラウザ何?IEとかにそんな設定あったか?
123Name_Not_Found:2006/03/10(金) 22:19:10 ID:???
>>122
俺はOperaだけどFirefoxにもあるよ
124Name_Not_Found:2006/03/10(金) 22:36:32 ID:yellEsUP
<body>
<img src="GRP_0041.JPG" >
</body>

この画像をページの中央に表示したいのですがどうすればいいですか?
125Name_Not_Found:2006/03/10(金) 22:38:10 ID:???
>>124
>>8 Q6
126Name_Not_Found:2006/03/10(金) 22:40:46 ID:yellEsUP
スイマセン
  半年ロムってます・・・・
127Name_Not_Found:2006/03/10(金) 22:51:30 ID:???
>>121
文字列が消えるわけじゃなくて、画像に隠れちゃうんだろ。
バグなのかは知らん。
俺なら画像と文字列で段組みするけどな。
128Name_Not_Found:2006/03/10(金) 22:56:27 ID:???
>>124
body {
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
129120:2006/03/10(金) 22:57:14 ID:???
どなたかわかりませんか?
130Name_Not_Found:2006/03/10(金) 22:58:22 ID:???
>>129
1時間も待てないのか。
さては早漏だな?
131Name_Not_Found:2006/03/10(金) 23:04:07 ID:???
>>129
テーブルセルのデフォルトパディング消したか?
132Name_Not_Found:2006/03/10(金) 23:04:13 ID:???
>>120,129
tableなんてどこにあるんだ?
133Name_Not_Found:2006/03/10(金) 23:09:20 ID:???
大きな枠をテーブルで指定してるんだろ。
134Name_Not_Found:2006/03/10(金) 23:15:14 ID:???
>>120
テーブルのセルの描画って、ブラウザに依存してんの。
細かい規定がないから、テーブル+CSSできっちりレイアウトは難しい。
テーブル外してCSSだけでやってみ。
135Name_Not_Found:2006/03/10(金) 23:34:44 ID:???
>>133
そんな勝手に想像してもw
全体を囲むtableなら、#headがはみ出すだろうに。
ブラウザや宣言にもよるけどね。
136Name_Not_Found:2006/03/10(金) 23:40:08 ID:???
このスレに評論家はいらんのだよ。
137Name_Not_Found:2006/03/10(金) 23:40:09 ID:???
>>135
133じゃないが、120の最後の2行を読んだ上で、他の解釈が成り立つのか?
138Name_Not_Found:2006/03/10(金) 23:40:12 ID:???
>>86,87さん

よければ解決策をおしえていただけませんか?
自分も以前にそうなっていた箇所があり、
実害が無いのでそのままにしましたが、気になってました。
139Name_Not_Found:2006/03/10(金) 23:43:25 ID:???
>>139
ttp://cssbug.at.infoseek.co.jp/detail/winie/b107.html
余白を取らない、またはIEにのみ半分の値を設定。
140Name_Not_Found:2006/03/10(金) 23:44:54 ID:???
>>137
勘違いで計算してるかも知れんだろ?
大体ちゃんとソースを出さない>>120がせっつくからいけないんだけどな。
141Name_Not_Found:2006/03/10(金) 23:45:57 ID:???
意味不明
計算の勘違いと大枠テーブルの存在との間にどういう関連が
142Name_Not_Found:2006/03/10(金) 23:53:46 ID:???
#table {
margin: 30px 30px;
padding: 10px;
border: medium solid #ff00ff;
width:720px;
}
#head {
text-align: center;
width:700px;
margin:5px 10px 10px 10px;
padding-bottom:4px;
border-bottom: #888888 1px solid;
}
#menu {
background-color:red;
clear:left;
float:left;
font-size:10px;
width:200px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
#main {
background-color:blue;
float:left;
font-size:10px;
width: 500px;
margin:17px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}
143Name_Not_Found:2006/03/10(金) 23:54:16 ID:???
<div id="table">
<div id="head">
Title</div>
<div id="menu">
test</div>
<div id="main">
main</div></div>

こういうことです・・・
144Name_Not_Found:2006/03/10(金) 23:55:09 ID:???
#table {
border: medium solid #ff00ff;
width:720px;
}

間違ってたorz
145Name_Not_Found:2006/03/10(金) 23:56:31 ID:???
もしかして
clear:left;
float:left;
を使ったからじゃないの?
>>142-143 の場合だと左側10pxあけてるけど
clear:left;
float:left;
を使うと0pxでも多少間開くじゃん・・・
146Name_Not_Found:2006/03/10(金) 23:59:08 ID:???
147Name_Not_Found:2006/03/11(土) 00:00:19 ID:???
>>141
やけに絡むヤツだなあ。
>>120は大枠のtableを使っているとすると、
そのtableに入ってる要素は#menuと#mainだけと決めつけてる、と言ってるんだ。
#headが入ってないなんて、どこに書いてあるんだ?
常識で判断してなんてのは笑止。質問者のレベルは一定ではない。
148Name_Not_Found:2006/03/11(土) 00:01:56 ID:???
絡んでるのが一人だと思うなんてのは笑止。
あんたもう消えていいよ^^
149Name_Not_Found:2006/03/11(土) 00:05:27 ID:???
>>147
どこに入ってるなんて書いてるんだ?
常識で判断してなんてのは笑止。質問者のレベルは一定ではない。
150Name_Not_Found:2006/03/11(土) 00:08:20 ID:???
>>139
のバグ対策はどうすればいいのぉ?
見本オシエレ
151Name_Not_Found:2006/03/11(土) 00:09:07 ID:???
アホばっか
152Name_Not_Found:2006/03/11(土) 00:09:18 ID:???
>>150
CSSハックでググれ
153138:2006/03/11(土) 00:16:59 ID:???
>>139 さん

レスありがとうございました。
float以外の部分で調整することにします。
154Name_Not_Found:2006/03/11(土) 01:06:16 ID:???
コメント閉じ忘れたorz
こっちで閉じ*/
155Name_Not_Found:2006/03/11(土) 01:07:22 ID:???
表のセルでの話だけど、
{
border-top: #333333 1px solid;
}
と指定しても、opera等だと空白セルには反映されない・・。
何かいい回避方法や代替方法ありませんか?
156Name_Not_Found:2006/03/11(土) 01:10:26 ID:???
>>155
empty-cells:show;
157Name_Not_Found:2006/03/11(土) 01:11:16 ID:???
158Name_Not_Found:2006/03/11(土) 01:23:09 ID:???
即レスthx
まだまだ勉強不足だな・・
159Name_Not_Found:2006/03/11(土) 01:26:03 ID:???
うむ がんがれ
160Name_Not_Found:2006/03/11(土) 03:17:47 ID:???
インデントの付け方で質問です。
文章が端で折り返した後、
1文字下げて表示させたいのですが、
どのようにすれば良いかわかりません。

例えば、

文章文章文章文章文章文章文章文
 章文章文章文章文章文章文章文章
 文章文章文章文章文章文章文章文
 章文章文章文章文章・・・・・・

のように、1行目は空けないで
2行目以降を1文字空けたいんですが、
文章を固定しないでTABLEを使わずに
表現することは可能でしょうか?
161Name_Not_Found:2006/03/11(土) 03:23:19 ID:???
text-indent:-1em;
162Name_Not_Found:2006/03/11(土) 03:24:19 ID:???
>>160
むしろテーブルでどうやってそれを表現するのか激しくお訊きしたい。

div { margin-left : 1em; }
p { text-indent : -1em; }

<div>
<p>テストテストテストテストテストテスト(略)</p>
</div>
163Name_Not_Found:2006/03/11(土) 03:25:19 ID:???
あ、pのマージンでよかったや。
164Name_Not_Found:2006/03/11(土) 03:26:33 ID:???
marginだとはみ出すからpaddingのほうが
165Name_Not_Found:2006/03/11(土) 03:27:53 ID:???
>>164
ん?はみ出させることが目的だしょ?
166Name_Not_Found:2006/03/11(土) 03:30:01 ID:???
1行目を"はみ出させる"んじゃなくて2行目以降を"1文字空ける"と書いてあるから、1行目の行頭もボックスの中にある、というイメージなのでは
167Name_Not_Found:2006/03/11(土) 03:34:47 ID:???
…paddingもボックス外なんですが。
168Name_Not_Found:2006/03/11(土) 03:55:51 ID:???
えっ?そうだったの??
169Name_Not_Found:2006/03/11(土) 05:40:12 ID:XYTrVFG0
例えば左側だけマージン10px開けたいとき、プロパティは

margin: 0 0 0 10px;

と書くじゃないですか。
でもパッと見わかりづらいので、自分は

margin: 0;
margin-left: 10px;

と記述するのですが、w3cの人に怒られたりしないですよね。
170Name_Not_Found:2006/03/11(土) 05:42:26 ID:ZVV+nEm0
DOCTYPE スイッチによる位置関係の変化に関する質問は
このスレで質問でOK?
171Name_Not_Found:2006/03/11(土) 07:51:29 ID:???
>>167
はい?
172Name_Not_Found:2006/03/11(土) 07:53:17 ID:???
誤爆した・・・

paddingって内の要素のmarginと打ち消しあわなかったっけ?
173160:2006/03/11(土) 09:52:59 ID:???
>>161-162
できました。
ありがとうございました。

頭固いので、TABLE使うことしか
考えてませんでした_| ̄|〇
174Name_Not_Found:2006/03/11(土) 10:52:51 ID:???
#menu {
background-color:blue;
width:250px;
}
#main {
width: 250px;
}

<div id="menu">test menu<BR>test menu<BR>test menu<BR>test menu<BR>test menu</div>
<div id="main">test main<BR>test main<BR>test main<BR>test main<BR>test main</div>

test menu test main
test menu test main
test menu test main
test menu test main
test menu test main
こういう感じにしたいのに縦に
test menu
test menu
test menu
test menu
test menu
test main
test main
test main
test main
test main
って感じになっちゃう・・・float使うのは覚えてるけど
あれは確かバグがあったから違う方法でやりたいのだが
思い出せない・・・調べてもfloatのやつばっかり・・・どなたかエロい人教えてください。
175Name_Not_Found:2006/03/11(土) 10:55:45 ID:???
文字数制限にひかかったので追加
display
position
をやってみたがやり方が悪いのか
使い方が間違ってるのかがわからないが
うまいことできませんorz
176Name_Not_Found:2006/03/11(土) 11:14:52 ID:???
>>138,150
IEでfloat要素のmarginが倍になってしまうバグは
display: inline; を入れると直るよ。
他のブラウザで見ても問題無し。
177Name_Not_Found:2006/03/11(土) 12:17:12 ID:???
#sotowaku {
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
text-align: center;
width:95%;
}
#menu {
display: inline;
clear:left;
float:left;
background-color:red;
width:200px;
margin:0 10px 0 0;
}
#main {
display: inline;
float:left;
background-color:green;
width: 400px;
margin:0 0 0 10px;
}
<div id="sotowaku">
<div id="menu">テストメニュー<BR>テストメニュー<BR>テストメニュー<BR>テストメニュー<BR>テストメニュー</div>
<div id="main">テストメイン<BR>テストメイン<BR>テストメイン<BR>テストメイン<BR>テストメイン</div>
</div>

id="menu"と"main"の間を20px開けてsotowakuの左右の中央に表示させたいのですが
うまいこといきません・・・どこがおかしいのでしょうか?
178Name_Not_Found:2006/03/11(土) 12:56:25 ID:???
text-align: center;
    ↓
margin:0 auto;

標準モードで。
179Name_Not_Found:2006/03/11(土) 14:02:08 ID:???
>>178
#sotowaku {
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
margin:0 auto;
width:95%;
}

こういうことですよね?
sotowakuの左側にmenuが引っ付いてる状態で
何も変化ありませんが・・・?
180Name_Not_Found:2006/03/11(土) 14:02:27 ID:???
>>170
ボックスと言ったらコンテントボックスだぞ。
IEの仕様に慣れすぎてないか?

>>177
外枠にボーダーつけてみてごらん。
浮動ボックスはコンテナボックスに含まれなくなるから。
181Name_Not_Found:2006/03/11(土) 15:02:27 ID:???
>>180
#sotowaku {
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
text-align: center;
width:95%;
}

外枠ってこれのことですよね?
border左右だとだめですか?
182Name_Not_Found:2006/03/11(土) 15:20:05 ID:???
>>181
そういうことを言ってるんじゃなくて、ボーダーが反映されなくて当然だぞ、
と180は言いたいんだと思うが。
で、あんたのやりたいのはどっちだ?
・二つのボックスを中央にならべたい→二つのボックスを合計したボックスをもうひとつ設定しなきゃ駄目。
・ボーダーを両端2.5%のところに表示させたい→二つのボックスの長い方をfloatじゃなくしなきゃ駄目。
183Name_Not_Found:2006/03/11(土) 16:03:17 ID:???
>>182
多分、上・・・
184Name_Not_Found:2006/03/11(土) 16:11:19 ID:???
>>183
なら外枠を、二つのボックス+余白の合計幅にして
text-align:centerの変わりにmargin:auto;。
185Name_Not_Found:2006/03/11(土) 17:37:43 ID:???
>>183
>>178で回答済み!!

ちゃんと標準モードにしたか?
width:200px;と width:400px;を95%に入れて・・・

  なんだかなぁ・・・
186Name_Not_Found:2006/03/11(土) 17:42:20 ID:???
>>185
178のでは、中心には寄らないっての。
左から2.5%のところに二つ並べられるだけ。よく考えろ。
187Name_Not_Found:2006/03/11(土) 17:47:11 ID:???
width:200px;と width:400px;を95%に入れて・・・
188Name_Not_Found:2006/03/11(土) 17:49:58 ID:???
>>186
手取り足取りスレじゃねーどここは
189Name_Not_Found:2006/03/11(土) 17:54:01 ID:???
未だにclass/idの違いなんて質問が来るくらいだから
中途半端な答えを書いてもわからない質問者にそれ以上を求める事が間違えてる。
無視したい香具師は無視してればよろし。
190Name_Not_Found:2006/03/11(土) 18:00:26 ID:???
さうだな。春休みだたことを忘れていたよ。
191Name_Not_Found:2006/03/11(土) 19:01:26 ID:???
>>188
質問は中央にしたいって言ってるのに
違うこと言うと意味ねぇじゃんw
192Name_Not_Found:2006/03/11(土) 20:37:03 ID:???
回答者のレベルも下がってるな。
193Name_Not_Found:2006/03/11(土) 20:39:46 ID:???
「出たよ、この(煽って聞き出そうとする)パターン!」(バナナマン日村風に)
194Name_Not_Found:2006/03/11(土) 23:11:30 ID:???
このエロエロ軍団!!
195Name_Not_Found:2006/03/12(日) 03:20:09 ID:Gmyb6gig
Windows環境で制作・表示確認をしているんですが
IE(バージョンは6.0)で表示を確認すると
何故か指定したフォントサイズにならなくて困ってます。
(ネスケやFirefoxは意図した通りに表示されています)

font-family: Georgia, osaka, "MS Pゴシック", serif;
font-size: 10px;

というような指定しているんですが、
フォントサイズが10pxより大きいサイズで表示されてしまいます。

font-family: Verdana, osaka, "MS Pゴシック", serif;

と、フォントファミリーをGeorgiaからVerdanaに変えると、
意図した10pxのサイズで表示されました。

どうしてこのような事が起きるのか、ご教授下さい。
196Name_Not_Found:2006/03/12(日) 04:04:48 ID:???
GeorgiaのGが全角だからじゃね?
197Name_Not_Found:2006/03/12(日) 04:06:33 ID:???
osakaのOも小文字になってるな。
198195:2006/03/12(日) 04:08:07 ID:Gmyb6gig
ごめんなさい。それは今打つときにミスしました。
199Name_Not_Found:2006/03/12(日) 04:55:37 ID:???
10pxなんて小さな指定は(ry
200Name_Not_Found:2006/03/12(日) 05:31:50 ID:???
深夜にすみません。
optgroup要素のlabel属性に当たる文字の部分(=カテゴリのタイトル)をCSSでいじりたいのですが
どうやればいいのでしょうか?
201Name_Not_Found:2006/03/12(日) 05:32:23 ID:???
PS. こういうのです。
http://www.htmq.com/html/optgroup.shtml
202Name_Not_Found:2006/03/12(日) 08:38:28 ID:???
>>200
記憶に間違いがなければ、弄れなかった気がする。
IEだと斜体になって嫌なんだよねぇ。
俺はOperaだから気にしないけど。
203Name_Not_Found:2006/03/12(日) 12:12:36 ID:???
>>200
色は普通にいじれる。
斜体はいじれない。
204Name_Not_Found:2006/03/12(日) 15:17:06 ID:ZUzGPZFd
質問させてください。
floatで3カラムを2段にしたいんですが、clear: leftを下記の1と4に入れると・・・

IE以外
┏━┓┏━┓┏━┓
┃1 ┃┃2 ┃┃3 ┃
┗━┛┗━┛┗━┛
┏━┓┏━┓┏━┓
┃4 ┃┃5 ┃┃6 ┃
┗━┛┗━┛┗━┛

IE
┏━┓┏━┓┏━┓┏━┓┏━┓
┃1 ┃┃2 ┃┃3 ┃┃5 ┃┃6 ┃
┗━┛┗━┛┗━┛┗━┛┗━┛
┏━┓
┃4 ┃
┗━┛

以上のようにIE以外では狙い通りですが、IEではこんなふうになってしまいます。
何か良いやり方はないでしょうか?
205Name_Not_Found:2006/03/12(日) 15:29:06 ID:???
206204:2006/03/12(日) 15:35:11 ID:???
>>205
ありがとうございます。
しかしそれではIE以外でおかしな表示になりますし、IEでも妙な隙間が空きます。
207Name_Not_Found:2006/03/12(日) 15:41:50 ID:???
>>206
具体的なソースやスクリーンショットもなしに何を言えと言うんだ。
208204:2006/03/12(日) 15:46:23 ID:???
ぶっほ
209Name_Not_Found:2006/03/12(日) 17:27:17 ID:???
ソースいじってるとオマンコをいじりたくなってきたのですがどうすればいじれますか?
210Name_Not_Found:2006/03/12(日) 17:29:08 ID:???
春だねえ・・・
211Name_Not_Found:2006/03/12(日) 18:03:22 ID:NqqInVzI
みなさん、エディターは何を使っているのでしょうか?

初心者ですが、DWでは時間がかかって仕方ありません
212Name_Not_Found:2006/03/12(日) 18:06:50 ID:???
DWです。これがないと仕事になりません。
213Name_Not_Found:2006/03/12(日) 18:07:30 ID:???
>211
DWってDreamweaverだよな
スレ違い
んで、時間がかかる理由も書いてくれんと・・・
214Name_Not_Found:2006/03/12(日) 18:10:31 ID:???
>>211
ez-HTML
WZ editor
215Name_Not_Found:2006/03/12(日) 18:21:55 ID:???
ez-HTMLはいいんだけど、常時妙な負荷がかかるのがな。
ちょっと書くときは秀丸使ってる。
216Name_Not_Found:2006/03/12(日) 18:23:50 ID:???
マシンパワーの問題じゃないかな、負荷なんか気になったことないや。
217Name_Not_Found:2006/03/12(日) 18:38:12 ID:???
ちょっと更新するくらいならボールペン。
真面目にやるなら墨をすって筆でささーっと、ね。
218211:2006/03/12(日) 19:07:05 ID:NqqInVzI
DreamWeaver MX です。
cssには対応していないのですが、
(フォントの指定程度)
カラーピッカーが使えないと、イライラします。
新しいやつはcss対応ですか?
219Name_Not_Found:2006/03/12(日) 19:19:11 ID:???
>>202,203さん
ありがとうございます、あと一つ質問させてください。

<div>
<select name="hoge">
<option value="foo">foo</option>
<option value="foo">bar</option>
</select>
</div>

以上のようなHTMLがあったとき、div要素の幅に応じて、select要素のセレクトボックスも追随するようにびろーんと
のびるようにさせたいのですが、どのようにすればいいのでしょうか?
min-width, widthをselect要素などに書いてみましたが駄目でした。
220Name_Not_Found:2006/03/12(日) 19:20:35 ID:???
>>218
スレ違い。

Dreamweaver Fireworks♪Macプロ(その22)
http://pc8.2ch.net/test/read.cgi/hp/1138194011/
221Name_Not_Found:2006/03/12(日) 19:22:33 ID:???
>>219
普通にdivと同じ幅をselectに指定。
divの幅が可変ならムリポ。
222Name_Not_Found:2006/03/12(日) 19:23:43 ID:???
あ、可変が無理とは言っても、min-widthは効くからな。
もしIEの話をしてるんだとしたら、selectに限らずIEはmin-width非対応。
223Name_Not_Found:2006/03/12(日) 19:54:54 ID:???
>>222
できました、ちなみにIEにはスクリプトで対応させるつもりでした。
稚拙な質問に答えていただきありがとうございました。
224Name_Not_Found:2006/03/12(日) 21:21:45 ID:???
>>204
clear: leftは無しで
全てのボックスをwidth: 30%
とかは?
225211:2006/03/12(日) 21:35:03 ID:NqqInVzI
結局、何を使うのがいいの?
Dreamweaver8 がいいの?
ez-HTML
WZ editor がいいの?
226Name_Not_Found:2006/03/12(日) 21:37:37 ID:???
自分に合うものを選べ
出来ないなら去れ
227Name_Not_Found:2006/03/12(日) 21:41:59 ID:???
何を使っても211の姿勢じゃ駄目のような
228Name_Not_Found:2006/03/13(月) 00:00:26 ID:???
要は個人の好み
学生はメモ帳かフリーソフトで十分
ソフトに頼ってもいい物が作れるとは限らない
便利なソフトに慣れると作業効率は上がるだろうが

>211の場合はヘルプを読む気がないあたりからして猫に小判
229Name_Not_Found:2006/03/13(月) 00:06:59 ID:???
CSSなんてメモ帳でいけるだろ。
CSSみたな短いタグを間違う方がどうかしてる。
230Name_Not_Found:2006/03/13(月) 00:08:12 ID:???
>CSSみたな短いタグ
・・・少なくとも229には言う資格が・・・
231Name_Not_Found:2006/03/13(月) 00:32:59 ID:???
メモ帳で良いって言う奴は大抵初心者だってばっちゃがいってた
232Name_Not_Found:2006/03/13(月) 00:41:07 ID:???
ばっちゃはメモ帳なんてことは言わない。
言うとしたら帳面だ。
233211:2006/03/13(月) 02:37:33 ID:XCvDv3PQ
色をひとつ決めるにも、
カラーピッカーで何10回も試行錯誤して、
微妙なところにこだわるのが
デザイナーだろ。
素早くできないと、困るんだよ。
お前ら、素人のプログラマーか?
234Name_Not_Found:2006/03/13(月) 02:47:34 ID:???
>>216
バグみたい。
スペック高い人でも気になるって人は居るらしい。

>>233
どうせ全体のバランスを見ながら決めないといけないから、微調整やるのは最後の最後。
画面の中の色の占める割合でも変わってくるからな。
プレビューしながらやってたら何やろうが結局同じ。

それになれてきたら何十回もやる必要さえない。
結局自分が使いこなせてないだけ。
235Name_Not_Found:2006/03/13(月) 05:35:52 ID:???
素人のプログラマーワロス
236Name_Not_Found:2006/03/13(月) 09:36:11 ID:???
フリーのカラーピッカーの存在すら知らないようだね。
237Name_Not_Found:2006/03/13(月) 09:42:16 ID:???
馬鹿なのでDWを使いこなせてないだけだと思うよ。
238Name_Not_Found:2006/03/13(月) 10:52:44 ID:???
道具に使われているな。アンチパターン。
239Name_Not_Found:2006/03/13(月) 11:40:03 ID:???
brの高さをCSSでコントロールできないですか?
IEだと高さが出ないのですが、mozillaだとbr分の高さが出てしまいます。

CSSは↓です。1pxtとかに変更してもダメでした。
br { font-size: 0; line-height:0; height:0; }
240Name_Not_Found:2006/03/13(月) 11:49:02 ID:???
brを使わなければいいだろ?
241Name_Not_Found:2006/03/13(月) 12:04:23 ID:???
>>239
つ br{line-height:0}

書いといてなんだが240に同意。
242Name_Not_Found:2006/03/13(月) 12:20:37 ID:rsOIP0Xo
CSS使ってる癖にbr連打なんて、あり得ぬ。
243Name_Not_Found:2006/03/13(月) 12:27:14 ID:???
ユーザCSSでやったことならある>br消し
244Name_Not_Found:2006/03/13(月) 13:28:26 ID:???
↓のような感じをCSSだけで作りたいのですが

+--------+-----------+
|AAAA   |BBBBBBBB|
|       |BBBBBBBB|
|       |BBBBBBBB|
|       |BBBBBBBB|
+--------+-----------+

私が作ったらこうなってしまいました↓

+----------+--------+
|AAAAA   |BBBBBBBB|
+----------+BBBBBBBB|
        |BBBBBBBB|
        |BBBBBBBB|
        +--------+

AとBの枠は高さは固定にしないで(横は固定)
Bの内容によって高さを可変にしたいです

どう書いたらイイでしょうか?
245339:2006/03/13(月) 13:32:12 ID:???
>242
br連打なんてしないです。

brでfloatをclearしてるんです。
246Name_Not_Found:2006/03/13(月) 14:46:30 ID:???
>>244
それが正しい動き。
高さを合わせるのは無理。
背景画像でそれっぽく見せるしかない。

>>245
ttp://cssbug.at.infoseek.co.jp/detail/winie/b079.html
247ケンタコピペ:2006/03/13(月) 17:43:18 ID:BAFYXHrw
こんにちは。今年に入ってPC弄り始めたケンタです(^^)

先週、HTMLという言語(?)の勉強をはじめました!
気づいたらスルスル頭に入っていくというか、どういうものか理解できてしまった!
勢いでWEBサイトを作って公開しました〜>_<

それで、僕が借りてるサーバはHTMLのソースに広告タグを付加してページを
出力するようになってるんですが、そこにJavaScriptが使われていたので今日勉強しはじめました。

すると・・・もうJavaScriptがだいたいどういうものか理解できてしまった!というかWEBがだいたい
どういうものか分かった!んで、今PHP書いてます!もちろんこれはJavaScriptと違ってサーバ側で
動くのでブラクラにはあまり関係ありませんね(笑)

ぶっちゃけプログラミングってかなり簡単。。基礎さえ分かれば関数調べるだけじゃん。。
248Name_Not_Found:2006/03/13(月) 18:33:10 ID:???
コピペイラネ
249Name_Not_Found:2006/03/13(月) 22:19:46 ID:???
CSSの処理で、
「いのき」というテキストにカーソルを合わせると
「アントニオ」と変わる、効果を出すことはできますかね?

CSSで色や大きさや下線を付けたり、画像のマウスオーバーは
できるんですが、これはどうでしょう。よろしければ教えて
ください。
250Name_Not_Found:2006/03/13(月) 22:24:13 ID:???
>>249
画像のマウスオーバーでできますよ。
251249:2006/03/13(月) 22:32:09 ID:???
>>250
ありがとございます。画像で「いのき」と「アントニオ」を
作ってマウスオーバーする方法ではなくて、あくまで単なる
テキストの「いのき」をポインタを乗せるだけで「アントニオ」
に変換したいんです。

それとも、画像のマウスオーバーと同じ方法でテキストを
変化させる方法があるのでしょうか。もしそうでしたら詳しく
教えていただけませんでしょうか。お願いします。
252Name_Not_Found:2006/03/13(月) 22:37:46 ID:???
>>249

<block>foo</block>

block {line-height: 2; height: 2; white-space: nowrap; overflow: hidden;}
block:hover::before {content: "bar"; display: block;}
253Name_Not_Found:2006/03/13(月) 22:38:07 ID:???
>>249,251
無理
254Name_Not_Found:2006/03/13(月) 22:41:29 ID:???
誤 height: 2;
正 height: 2em;
255249:2006/03/13(月) 22:44:15 ID:???
>>252,254
ありがとうございます!試してみます。
結果ご報告させてもらいますね。
256249:2006/03/13(月) 22:52:28 ID:???
operaでしか稼働しませんでした...
257Name_Not_Found:2006/03/13(月) 22:57:44 ID:???
というか、全部のブラウザで動作すると思ったのか?
それはどう足掻いても無理。
258Name_Not_Found:2006/03/13(月) 22:57:58 ID:???
マウスオーバーするとバックグラウンドの画像が変わる
という方法は分かるんですが、
変わる瞬間、画像を呼びだす間が空くんですよね。

次の画像を事前に裏で呼び込んでおくことはできないのでしょうか。
imgで貼り付けるのではなく、あくまでも背景画像として呼び出したいんです。
259Name_Not_Found:2006/03/13(月) 22:59:41 ID:???
>>258
CSSの範疇では無理
260Name_Not_Found:2006/03/13(月) 23:01:07 ID:???
>>256
CSS3が勧告されて他のブラウザにサポートされるまで待て
Opera(というかCSS3)なら

<style>
#test:hover { content : 'アントニオ' }
</style>
<p id="test">いのき</p>

こんだけでいける
261Name_Not_Found:2006/03/13(月) 23:01:56 ID:???
別の画像や背景色に隠れるような要素に、見えないようにhover時の画像を指定しとけばいいんでない?
262Name_Not_Found:2006/03/13(月) 23:02:37 ID:???
マウスオーバーで画像をかえる方法は
1.バックグランドの画像をかえる
2.バックグランドに重ねていた画像を-indentで飛ばす
3.前後の画像を二つ重ねて、上下に動かす
この3つがメインですか?
263Name_Not_Found:2006/03/13(月) 23:04:22 ID:???
>>262
2、3はどういうときに使うの?そんな強引な方法が必要な場面が思いつかない
264Name_Not_Found:2006/03/13(月) 23:09:11 ID:???
265Name_Not_Found:2006/03/13(月) 23:09:33 ID:???
>>262ではないが、それでいいのなら>>258のプレリロード問題は解決する。
でもそれやるとCSS切り替えがイヤンなことになるから嫌い。
266Name_Not_Found:2006/03/13(月) 23:10:05 ID:???
>>263
使い分ける状況まではわからないです。すいません
マウスオーバーを使いたいと思って調べてみたら
この3つの方法が見つかったので、どれがいちばん
メジャーかなと質問させてもらいました
267Name_Not_Found:2006/03/13(月) 23:11:07 ID:???
>>266
メジャーなのは多分1
268Name_Not_Found:2006/03/13(月) 23:14:10 ID:???
>>267
3だろ。間が空くってダイヤルアップ?
269Name_Not_Found:2006/03/13(月) 23:16:17 ID:???
>>268
3と1、2のHTMLの違いを比べてみよう。
270Name_Not_Found:2006/03/13(月) 23:19:48 ID:???
>>264
おお、こんな発想思いつきませんでした。
早速やってみます。
271Name_Not_Found:2006/03/13(月) 23:21:56 ID:???
>>269
3は一枚の画像なんで始めから読み込まれてますね。
1,2はマウスオーバーした時点で画像を読み込むので
時差がでますね。

ただ>>268が言っているのは、
そんな読み込み時間かかるか?ダイアルアップじゃ
ねーんだから微妙にもたつくくらいだろということでしょう。
272Name_Not_Found:2006/03/13(月) 23:23:57 ID:???
>>271
わり、2の画像吹っ飛ばしも3と同じく
時差ゼロだったね
273Name_Not_Found:2006/03/13(月) 23:26:04 ID:???
>>268は、

(メジャーなのは)3だろ。
(この3の方法でロードに)間が空くって(言って3の方法を使わないやつは)
ダイヤルアップ(を使っているのか)?

って言っているの?んなわけないよね?でもそうとしか読めない。
274Name_Not_Found:2006/03/13(月) 23:26:50 ID:???
>>271
読み込み時差の問題ではなく、HTMLの問題で3はメジャーにはなり得ないという意味。
275Name_Not_Found:2006/03/13(月) 23:32:03 ID:???
>>262
2はマイナーで、1か3を使う
読み込みタイムラグが気になるなら3
htmlの問題(どんな?)が気になるなら1

ということでいいでしょうか?
276Name_Not_Found:2006/03/13(月) 23:36:28 ID:???
>>268だけど、スマン、判りにくかった。
メジャーなのは3でしょ。htmlの問題ってなにかあんの?
重ねてってレイヤー的な重なりじゃないよ?2枚の画像を1枚にするってだけ。
ttp://css.maxdesign.com.au/index.htmにも載ってるがな
質問者が「間が空く」と言ってるんで、ダイアルアップなのか?というわけ。
277Name_Not_Found:2006/03/13(月) 23:43:01 ID:???
というかそもそも>>262のレス内容自体が不明瞭

1は通常の背景画像とhoverの背景画像に別の画像を指定するって意味だとわかるけど

> 2.バックグランドに重ねていた画像を-indentで飛ばす

> 3.前後の画像を二つ重ねて、上下に動かす

みんなそれぞれ違うことを想像してそう
278Name_Not_Found:2006/03/13(月) 23:48:55 ID:???
まあ>>249は途中からレス番出さなくなったし、
>画像のマウスオーバーは できるんですが
と言ってしまった手前、今更よくわかってませんとは言えなかったんだろ。
279Name_Not_Found:2006/03/13(月) 23:51:42 ID:???
>>276
>重ねてってレイヤー的な重なりじゃないよ?2枚の画像を1枚にするってだけ。
どう見ても「重ねて」はz-indexに見えます。本当にどうもあry
280Name_Not_Found:2006/03/13(月) 23:52:37 ID:???
281Name_Not_Found:2006/03/13(月) 23:53:39 ID:???
2と3は前面の画像を左右に動かすのか上下に動かすのかの違いだけに思えてきたw
そして前面と背面に画像を配置するってことは
img要素を使っているの?
それとも重なり合う親要素と子要素にそれぞれbackground-imageを指定してるの?
って疑問が
282Name_Not_Found:2006/03/13(月) 23:55:54 ID:???
まぁどの方法を使うにしろ
画 像 は 軽 く 汁
これに尽きる。
283Name_Not_Found:2006/03/13(月) 23:56:42 ID:???
>>280
ttp://www.fsiki.com/jet/archives/2006/01/text-indent.htmlは1の延長であって
1、2、3と同列に扱うものじゃないし
3からはどう読んでも「一枚の画像」であるとは読めない。だって「二つ重ねて」ってあるから。
一枚の画像を重ねるなんて
284Name_Not_Found:2006/03/13(月) 23:58:34 ID:???
背伸びしたかったんだよ・・・・わかるよ、俺にはわかるよその気持ちが・・・・
285Name_Not_Found:2006/03/13(月) 23:58:34 ID:???
>2枚の画像を1枚にするってだけ
276はなんでこんな断定できるの?
もし276が262なんだとしたら、もうちょっと日本語を勉強してくれ
286Name_Not_Found:2006/03/14(火) 00:02:15 ID:???
>>283
1は、
a
a:link
a:visited
a:hover
a:active
毎に背景を設定して

ttp://www.fsiki.com/jet/archives/2006/01/text-indent.htmlは
a:hover{text-indent: -1000em;}
のことだから、2でいいんじゃない?
287Name_Not_Found:2006/03/14(火) 00:02:23 ID:???
この「マウスオーバー」という単語を使った一連の質問は同一人物ってのは決定事項でおk?
288Name_Not_Found:2006/03/14(火) 00:03:45 ID:???
>>286
テキストを飛ばそうが飛ばすまいが、
カーソルを当てると背景が変わる手法は1とまったくいっしょじゃん
289288:2006/03/14(火) 00:05:02 ID:???
以下の文を追記です。ごめん

2がその方法だという意味なら
290Name_Not_Found:2006/03/14(火) 00:07:34 ID:???
>>262の文面からのみの想像。

1.a:linkとa:hoverで別の背景画像を用意し、テキストリンクを背景画像で置き換える。
2.イメージ(hover画像)に対するリンクを設定し、a:link時にはイメージを-indextして通常用背景を出し、
 a:hover時にはHTMLの方の-indentを戻して背景画像を-indentさせる。
3.relativeで重ねた2枚の画像を、a:hoverでそれぞれz-indexを交換。

実際が>>276>>281なんだとしたらすげーな。
291290:2006/03/14(火) 00:08:49 ID:???
あ、2.は背景画像を-indentって何だ、消すだけかw
292Name_Not_Found:2006/03/14(火) 00:10:32 ID:???
>>288
1は背景が変わる
2はon背景の上にoff画像を置き、そのoff画像を画面左に飛ばして、on背景をむき出しにする
3は上下にoff/onの画像をつなげて一つの背景にして、いつもはoff半分だけ表示、オーバーすると画像を上に動かしてonにする

で決着ですか?
293Name_Not_Found:2006/03/14(火) 00:11:27 ID:???
>>286
text-indentに負の値を指定して文字を飛ばす方法が別のものだとしてカウントするなら
>>264の場合(3が>>264という意味だと仮定して)も同様に
text-indentに負の値を指定する方法とそうでない方法を挙げて
全部で4パターンになると思うけど
294Name_Not_Found:2006/03/14(火) 00:13:27 ID:???
>>292
> 2はon背景の上にoff画像を置き、そのoff画像を画面左に飛ばして、on背景をむき出しにする
という意味だとするとこれはhtmlのマークアップに変更を加えているってこと?
295Name_Not_Found:2006/03/14(火) 00:14:25 ID:???
>>294
手を加えるも何も、画像OFF/CSSonを考慮して
わざと最初から画像リンクを選択する人もいるんだし。
296Name_Not_Found:2006/03/14(火) 00:15:20 ID:???
>>294
a要素と同じ大きさの親要素がある、という後出しの前提条件か何かがあるんじゃない?
またはこの2だけa要素内にimg要素を持っているとか
297Name_Not_Found:2006/03/14(火) 00:16:37 ID:???
ん?そもそも1と2と3はHTMLファイルが同じものじゃないの!?そうだったのか
298Name_Not_Found:2006/03/14(火) 00:18:14 ID:???
これで>>290が正解なんだとしたら、123.はすべてHTMLが違うことになるなww
299Name_Not_Found:2006/03/14(火) 00:22:35 ID:???
コンフュ メダパニ
300Name_Not_Found:2006/03/14(火) 00:27:51 ID:???
cssスレでの
アンカー要素のhoverによる画像切り替えの話題だと
ただ単純に
<a href="hoge">huga</a>
というマークアップを想定してしまうけど
そうじゃなかったってこと?
301Name_Not_Found:2006/03/14(火) 00:30:48 ID:???
>>300
そうでもないでしょ、ここでも前に確かimg要素の重ね技を質問した香具師もいたはず
#あのときも質問者がよくわかってなかったのかうやむやで終わったが
302Name_Not_Found:2006/03/14(火) 00:31:35 ID:???
どう考慮しても1、2、3が同列として列挙されているのは無理があるね
303Name_Not_Found:2006/03/14(火) 00:33:05 ID:???
逆に同列じゃないからこそ、どれが一般的なのか聞いたという可能性もある
304Name_Not_Found:2006/03/14(火) 00:34:11 ID:???
結局どういう意味だったの>>262
そろそろ釣り宣言してくれないと気になって眠れない
305Name_Not_Found:2006/03/14(火) 02:41:16 ID:???
結局もう寝たの>>304
それが気になって眠れない
306Name_Not_Found:2006/03/14(火) 05:06:13 ID:???
なぜそんなにこだわってるのかがいまいちわからん。
普通にやり方がいくつかあるってだけの事でしょ?

同列とか関係ないじゃん。
307Name_Not_Found:2006/03/14(火) 12:51:08 ID:???
HTML関係のスレにおいては同列。
CSSスレにおいては非同列。
って意味でしょ、価値の問題じゃないと思うけど?
308Name_Not_Found:2006/03/14(火) 13:44:41 ID:???
価値なんて誰も述べてない気がするんだが。
309Name_Not_Found:2006/03/14(火) 13:50:54 ID:???
>>306が同列にこだわることはないって言ってるのは、じゃあどういう意味なんだ?
それが同列(同価値)に見られなかったから憤慨してるだけに見えるが。
310Name_Not_Found:2006/03/14(火) 13:52:02 ID:???
私の為にケンカしないで!
311Name_Not_Found:2006/03/14(火) 13:53:22 ID:???
やれやれー 馬鹿ども もっとやれーーー
312Name_Not_Found:2006/03/14(火) 14:09:40 ID:???
>>310は誰にも渡さない!
313Name_Not_Found:2006/03/14(火) 14:10:49 ID:???
いや俺が俺が!
314Name_Not_Found:2006/03/14(火) 14:15:03 ID:???
俺も俺も!


306=262なんだとしたらワロス。
315Name_Not_Found:2006/03/15(水) 03:47:13 ID:???
質問よろしいでしょうか。
インライン要素をfloatさせてwidthを指定するのは使わないほうがいいのでしょうか?
display:block使うのが普通ですかね?
316Name_Not_Found:2006/03/15(水) 07:28:18 ID:???
>>315
インラインのfloatというとrightかな?
良い悪いというより、日本語でおk。
317Name_Not_Found:2006/03/15(水) 09:02:30 ID:???
>>309
同列じゃなかろうと関係有りません。
好きな手法でやればいいだけ。

別に誰がどんな手法使おうが関係ないじゃん。
そこに価値や順位の有無を求めるのが大間違い。
同じように順位なんかないと同列を求めるのも大きな間違い。
318Name_Not_Found:2006/03/15(水) 09:39:29 ID:???
>>314
反論できなくなって人格攻撃ですか?(藁
319Name_Not_Found:2006/03/15(水) 09:49:34 ID:???
というか2がtext-indentに負の値を入れてもともとある文字を飛ばすって意味なら
これはhoverによる画像の切り替え手法ではなく
文字を画像に差し替える手法だから
同列とか以前の問題じゃない?別次元じゃない?


> 2.バックグランドに重ねていた画像を-indentで飛ばす
でもこれだけだと「画像をtext-indentの負の値で画面外に出す」としか読めないんだよね・・・。
画像をtext-indentの負の値で飛ばす・・・って。
そもそも「バックグランドに重ねていた画像」が
どういう手法で重ねられているのかもまったく不明だし・・・。
320Name_Not_Found:2006/03/15(水) 09:52:23 ID:???
1の「バックグランド」と2の「バックグラウンド」は別のものを指す。
そして2の「重ねて」と3の「重ねて」も別のものを指す。
その違いは>>262にしかわからない。
321Name_Not_Found:2006/03/15(水) 09:59:15 ID:???
そろそろ議論は他所でやったほうが
322Name_Not_Found:2006/03/15(水) 10:03:43 ID:???
馬鹿には空気が読めないからねえ・・・
323Name_Not_Found:2006/03/15(水) 10:04:40 ID:???
>>316

li {width:500px}
.left {float:left; width:200px;}
.right {float:right; width:300px;}

<ul>
<li><span class="left">123</span><span class="right">456</span></li>
</ul>

実際使いたいのはこんな感じです。
floatさせるとインラインにもwidth指定できるのですが、普通インラインにはwidth指定できない
みたいなので、使い方がおかしいのかと思って。
324Name_Not_Found:2006/03/15(水) 10:38:12 ID:???
なんか変・・・
325Name_Not_Found:2006/03/15(水) 12:27:33 ID:???
既出かもしれませんが、質問させてください。
┌────┐
│ テキスト│
└────┘
このように表示しているはずなのに
┌────┐
│ テキスト│
└────┘
スト 

となってしまいます。WIN IEのみ最下部に表示するテキストがはみ出て重複しています。cssとHTMLを下記に記しますので対処方法ご存知でしたら教えてください。

/*■■■メインエリア■■■*/
#main{
width: 700px;margin: 0px;padding: 0px;text-align: left;
}
/*■■■グローバルナビ■■■*/
#gnavi{width: 165px;margin: 0px;padding: 0px;float: left;
}
/*■■■コンテンツエリア■■■*/
#cont{width: 535px;margin: 0px;padding: 0px;float: right;
}
/*■■■フッターエリア■■■*/
#footer{width: 700px;margin: 0px;padding: 0px;float: left;
}
326325:2006/03/15(水) 12:30:03 ID:???
>325のHTMLです


<div id="main">
<div id="gnavi"></div>
<div id="cont">
コンテンツエリア
</div>
<div id="footer">
footer
</div>
</div>


これで

「コンテンツエリア」が「コンテンツエリアエリア」

になってしまいます。
327Name_Not_Found:2006/03/15(水) 12:34:28 ID:???
DIV病に感染していますねw
328Name_Not_Found:2006/03/15(水) 12:40:48 ID:???
>>327
html書類にdivが10程度あると使いすぎなんでしょうか?
329Name_Not_Found:2006/03/15(水) 12:44:22 ID:???
>>328
数の問題じゃなく、意味の問題。
レイアウトのためのdiv使用でdiv厨と呼ばれる。
330Name_Not_Found:2006/03/15(水) 12:52:27 ID:???
>>329
レイアウトのためにつかってます。すいません…

対処方法おしえてくださいペコリ
331Name_Not_Found:2006/03/15(水) 12:59:50 ID:???
>>330
こういう風に直したらいいとオモ
http://pc8.2ch.net/test/read.cgi/hp/1141001776/140
各見出しに対応したセクションdivにするのな
332Name_Not_Found:2006/03/15(水) 13:04:18 ID:???
>>328
気にするな、まともなプログラマなら、見通し、今後の拡張を考えてdiv多用するから。
333Name_Not_Found:2006/03/15(水) 13:05:46 ID:???
332が少なくともまともなプログラマじゃないことは解った。
ツリー構造になってない無意味なDIV多用はあとで自分が困るだけ。
334Name_Not_Found:2006/03/15(水) 13:12:44 ID:???
「プログラマ」って・・・

  笑ってもいいかな?
335Name_Not_Found:2006/03/15(水) 13:13:10 ID:???
<div class="nullpo"></div>
336Name_Not_Found:2006/03/15(水) 13:13:22 ID:???
>>331
divタグつかうよりPやULとかにスタイル指定していったほうが良いって感じなんでしょうか?
337Name_Not_Found:2006/03/15(水) 13:14:01 ID:???
>>334
そこは笑うところではない。
338Name_Not_Found:2006/03/15(水) 13:16:41 ID:???
>>336
質問者は、最初に質問したレス番号を名前に入れろ。
出来ればE-mailアドレス入力欄を空白にしてIDを出して欲しい(煽り対策)。

>divタグつかうよりPやULとかにスタイル指定していったほうが良いって感じなんでしょうか?

そういう意味ではない。
DIVはまとまりを意味する。
339325:2006/03/15(水) 13:16:50 ID:???
たとえば、下記のようにしても文字がはみ出るんです。


<!--グローバルメニューstart-->
<ul id="gnavi">
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
<li>gnavi</li>
</ul>
<!--グローバルメニューend-->

<!--コンテンツエリアstart-->
<p id="cont">
コンテンツエリア
</p>
<!--コンテンツエリアend-->

<!--フッダーstart-->
<p id="footer">
footer
</p>
<!--フッダーend-->
340Name_Not_Found:2006/03/15(水) 13:19:44 ID:???
>>336
俺は、サイト構造自体を表すのは、君と同じように作るね。
で、その構造の中に、コンテンツとして、p、ulをほおりこむ。

こうすると、pだけに適用すべきcss、あるいはulだけに適用すべきcssとサイト構造を
表現するcssを分離できるからね。
341Name_Not_Found:2006/03/15(水) 13:19:57 ID:???
笑っていいと思う。

>>339
本当に>>325だけのソースでなるのか?俺んとこではそれ以前に悲惨に崩れてるんだがな。
最低限でなる条件を出してくれ。
342325:2006/03/15(水) 13:20:15 ID:???
>>338
はい。了解しました。

divは纏まりとして使っています。
divの中にulや画像や色々いれて、グローバルメニューエリア等として
343Name_Not_Found:2006/03/15(水) 13:21:56 ID:???
HTMLでは「纏まり」は「見出し」と共に存在しているのが普通なんだが(ry
344325:2006/03/15(水) 13:22:23 ID:???
具体的にはこうです
<!--全体フレームstart-->
<div id="frame">
<!--ヘッダーstart-->
<div id="header">
header
</div>
<!--ヘッダーend-->
<!--メインエリアstart-->
<div id="main">
<!--グローバルメニューstart-->
<div id="gnavi">
<ul>
<li>gnavi</li>
</ul>
</div>
<!--グローバルメニューend-->
<!--コンテンツエリアstart-->
<div id="cont">
コンテンツエリア
</div>
<!--コンテンツエリアend--
<!--フッダーstart-->
<div id="footer">
header
</div>
<!--フッダーend-->
</div>
<!--メインエリアend-->
</div>
<!--全体フレームend-->
345325 つづき:2006/03/15(水) 13:23:46 ID:???
body{margin: 0px;
padding: 0px;
font-size: 90%;
background-repeat: no-repeat;
}

#frame{width: 700px;
}
#header{width: 700px;
margin: 0px;
padding: 0px;
}
#main{width: 700px;
margin: 0px;
padding: 0px;
text-align: left;
}
#gnavi{width: 165px;
margin: 0px;
padding: 0px;
float: left;
}
#cont{width: 535px;
margin: 0px;
padding: 0px;
float: right;
}
#footer{width: 700px;
margin: 0px;
padding: 0px;
float: left;
}
346Name_Not_Found:2006/03/15(水) 13:26:11 ID:???
>>344
Win2000Fx1.5、IE6で、そのソースでは再現せず。
347325:2006/03/15(水) 13:26:50 ID:???
上記で文字が重複するのはheader というテキスト。

#headerの巾を600等にすると重複はさけられるのですが、
なにぶん謎なもので、

ちなみにcssは外部においています
348325:2006/03/15(水) 13:28:00 ID:???
うぷローダにあげてみます。
349Name_Not_Found:2006/03/15(水) 13:29:37 ID:???
ブラウザ再起動してみ
350325:2006/03/15(水) 13:32:33 ID:???
http://www-2ch.net/up/download/1142397057469455.CLuXSm

ぱすは325です。

みてやってください。
351Name_Not_Found:2006/03/15(水) 13:38:14 ID:???
>>350
再現せず。
352Name_Not_Found:2006/03/15(水) 13:39:51 ID:???
>>350
Win2k IE6で問題なし
353325:2006/03/15(水) 13:43:14 ID:???
>351さん>352さん早速有難うございます。

当方の環境
winxp ie6のみでテキスト重複となっています。


----下記環境では問題ないのです、、、、
winxp
ファイヤーフォックス1.5、ネットスケープ7.1

macOS9
iea5.1

macOSX
safari、ファイヤーフォックス

354Name_Not_Found:2006/03/15(水) 13:44:55 ID:???
>>350
XP2 IE6 再現する。
同 Fx 再現しない。

うーん、なんじゃこれ???
355Name_Not_Found:2006/03/15(水) 13:45:41 ID:???
Win2000IE6は問題ない。
XP、また悪さしてんの?
356Name_Not_Found:2006/03/15(水) 13:46:49 ID:???
>>354
とりあえずこっちじゃ確かめられないから、
* { border:solid 1px #f00; }
でも付けて、ボックス壊れてないか確認おながい。
357325:2006/03/15(水) 13:48:11 ID:???
>>356
ちょっとやってみます。
358352:2006/03/15(水) 13:49:01 ID:???
>>350
スマン、見間違えてた
確かに最下部headerの文字が重複表示されてる
359325:2006/03/15(水) 13:56:14 ID:???
http://www-2ch.net/up/download/1142398465890110.T45B5T

ぱすは325


ボーダー1pxいれてますんで2pxのずれが生じています。
ボックス自体に問題はないのかなと思いますがどうでしょうか?
360Name_Not_Found:2006/03/15(水) 14:16:11 ID:???
>>325
>>344のソースは>>359にupしたものとまったく同一なのか?
コメントが閉じてない所があるけど。
361325:2006/03/15(水) 14:20:29 ID:???
>>360
すみません
>344のソースは改行減らしている時にコメントタグの末尾が抜けてしまっていました。

350のソースが正解です。
362Name_Not_Found:2006/03/15(水) 14:21:19 ID:???
>>361
html のコメント全部とっぱらう。それで直る。
363325:2006/03/15(水) 14:23:08 ID:???
>>362
おおおおおおおおおおおお

マジですね!

しかし、なんでなんでしょうか…コメントタグに関するバグなんですかね・・・
364Name_Not_Found:2006/03/15(水) 14:25:56 ID:???
<!--コンテンツエリアend--
<!--コンテンツエリアend--
<!--コンテンツエリアend--
365Name_Not_Found:2006/03/15(水) 14:27:45 ID:???
>>363
それはSGMLでいうところの注訳宣言なのでタグではない。
366325:2006/03/15(水) 14:27:59 ID:???
>>364

<!--コンテンツエリアend--

は2ch添付の際のミスです ごめんなさい。
367Name_Not_Found:2006/03/15(水) 14:28:07 ID:???
ふ〜〜ん
368Name_Not_Found:2006/03/15(水) 14:28:29 ID:???
>>363
あてずっぽだが、キャラコードがshift-jisで、コメントの最初の文字が日本語。
で、IEのコメント解釈(独自に拡張してる)とかち合ってるんじゃ無いかと思う。

EUCとか、UTFとかで試して見るとかすると判るかもしれんが、めんどくさい。
369325:2006/03/15(水) 14:29:37 ID:???
注釈宣言内の文字を半角英数にしても結果変わりませんでした。

注釈を取ると直るということはどういう原因が考えられますでしょうか?
370Name_Not_Found:2006/03/15(水) 14:32:29 ID:???
とりあえず気になって仕方が無いのでツッコミ。
フッダーじゃなくてフッターだからw
371Name_Not_Found:2006/03/15(水) 14:32:34 ID:???
>>369
とすると、>が含まれるコードが入ってるかもね。
日本語全部とっぱらってみるとかか?
372Name_Not_Found:2006/03/15(水) 14:34:41 ID:???
http://cssbug.at.infoseek.co.jp/detail/winie/b166.html
これ関係のバグで、文字が二重になるの、昔あった希ガス。
373325:2006/03/15(水) 14:37:23 ID:???
>>370
ブッタみたいですみません(ペコリ)w

コメントが1つや2つの場合は重複表示はされませんでした。
コメント多すぎなんでしょうか?

>>372みてみます!
374371:2006/03/15(水) 14:38:15 ID:???
と思ったが全然違うな。

>>372
多分、こっちまわりだな。
375Name_Not_Found:2006/03/15(水) 14:38:43 ID:???
おもしろいね。
utf-8にしてもだめだった。

<!--グローバルメニューend-->

<!--コンテンツエリアstart-->
<div id="cont">
<p>コンテンツエリア</p>
</div>
<!--コンテンツエリアend-->

<!--フッダーstart-->

この部分のコメントを1つ削ると1文字、2つで2文字、3つで〜以下同文って感じで消えてくみたいw
376Name_Not_Found:2006/03/15(水) 14:41:10 ID:???
これは関係ないかな?

<!--フッダーstart-->
    ↓
<!-- フッダーstart -->
377371:2006/03/15(水) 14:41:53 ID:???
確認した。
>>372が正解だ。
float指定してるdivの前のコメント削ったら直った。

IEは、あかんね…
378325:2006/03/15(水) 14:47:22 ID:???
>376
スペースいれてみましたが変わりませんでしたっす。


floatの前にコメントを置くとなるバグですかね…
みなさんご協力有難うございました。
コメントタグ消して納品するかな…


しかしfloat指定のdivの前にコメント書くことなんかよくある事では無いんでしょうか
俺だけか…
379Name_Not_Found:2006/03/15(水) 14:48:41 ID:???
納品って・・・おまえ・・・・・・・・・・・・・・・・・・・・・・・・・・・・
380Name_Not_Found:2006/03/15(水) 14:49:32 ID:???
初心者スレにも妙なプロが湧いてたな、そういや。
381Name_Not_Found:2006/03/15(水) 14:50:37 ID:???
流石にこのバグはわからなくても仕方ない気も。
382Name_Not_Found:2006/03/15(水) 14:53:08 ID:???
問題はテンプレも見てなかったということだな。
383Name_Not_Found:2006/03/15(水) 14:56:59 ID:???
え?w
テンプレ以前にここの住人でさえまともにこのバグ把握できてる人って
>>372の1人しか居なかったじゃん。
答えがわかったから好き放題言えるけどな。
コロンブスの卵みたいなものだ。
384Name_Not_Found:2006/03/15(水) 14:58:12 ID:???
答えてもらったらもうそれか・・・
バカなプロは消えな>>383
385Name_Not_Found:2006/03/15(水) 14:58:46 ID:???
>>383
ここの住人はアマ。
質問者はプロ。
この違いが分かるな?
386Name_Not_Found:2006/03/15(水) 15:00:46 ID:???
プロはなんでも知ってて完璧だと思い込んでる人だらけのスレはここですか?
387Name_Not_Found:2006/03/15(水) 15:01:26 ID:???
知らなくてもいいんじゃない
自分で調べる努力を し て れ ば
388Name_Not_Found:2006/03/15(水) 15:02:50 ID:???
383は本人じゃないかもしれないが、
どっかの崩れプロのような希ガス。
ていうかそういう香具師に頼みたくNeeeeeEEEE!!!
389325:2006/03/15(水) 15:03:15 ID:???
トリップとか付けてなくてすいませんでした。

winxpのIEのバグとなると無視する訳にもいかず…
firefoxの方が使いやすいんですけどね本当は

最近cssを使い始めて(遅いですが)色々模索しながら作業してるので
こういう場はとても助かります。

また、なにか分からないことあったら皆さんよろしくお願い致します。
390Name_Not_Found:2006/03/15(水) 15:04:45 ID:???
来なくて済むようになってください。
というかプロなら周りに詳しい人いるでしょうが、
名無しの無責任な発言より、そういう人達を頼りにしてくだちい…。
391Name_Not_Found:2006/03/15(水) 15:05:34 ID:???
あんだけコメント付けてたら手間かかって・・・

プロならそう思うと思ったりなんかして仕方がない今日この頃です。
392325:2006/03/15(水) 15:06:19 ID:???
>>390
周りにcssについて詳しい人いないんすorz

社長は中卒でアホだし orz
393Name_Not_Found:2006/03/15(水) 15:06:26 ID:???
>>389
だから煽り対策にID出せと・・・
394Name_Not_Found:2006/03/15(水) 15:06:27 ID:???
金の絡む問題で匿名をアテにスンナ
395Name_Not_Found:2006/03/15(水) 15:07:24 ID:???
>>352
「納品」で自慢、「中卒」で学歴批判('A`)
もう二度とクンナ!
396 :2006/03/15(水) 15:10:21 ID:wgRo25VY
>>395
すみません、そんなつもりじゃ…

397Name_Not_Found:2006/03/15(水) 15:10:41 ID:???
>>395

 かかってこい!!
398 :2006/03/15(水) 15:11:53 ID:wgRo25VY
はなしは変わりますが、
cssを使ったサイトとして参考にしてるのが京都府HPなんですが

http://www.pref.kyoto.jp/

ここの作り方って皆さんどうおもいますか?

399Name_Not_Found:2006/03/15(水) 15:12:39 ID:???
>>397=352
ごめんねごめんね母さんレス番間違えたよごめんね
400Name_Not_Found:2006/03/15(水) 15:13:14 ID:???
>>398
スレ違い
カスイケスレ池
401Name_Not_Found:2006/03/15(水) 15:13:20 ID:???
なに噛み付いてんだか、さっぱり理解できん。
402Name_Not_Found:2006/03/15(水) 15:16:00 ID:???
>399
かあさんにもやっと春が来たんだね。
403Name_Not_Found:2006/03/15(水) 15:17:14 ID:???
売ってんじゃねーよ。
404 :2006/03/15(水) 15:18:07 ID:wgRo25VY
ま、全員アマチュアの引きこもりってことでFA?
405Name_Not_Found:2006/03/15(水) 15:18:59 ID:???
しかもひがみ根性丸出しでFA
406325:2006/03/15(水) 15:19:37 ID:wgRo25VY
 
407Name_Not_Found:2006/03/15(水) 15:28:31 ID:???
そろそろ自演は終わった?
408Name_Not_Found:2006/03/15(水) 15:33:00 ID:???
終わった
409Name_Not_Found:2006/03/15(水) 15:38:38 ID:???
むしろ自演を装った煽りが終わった?
410Name_Not_Found:2006/03/15(水) 15:42:47 ID:???
終わった
411Name_Not_Found:2006/03/15(水) 15:44:07 ID:???
test
412 :2006/03/15(水) 15:49:59 ID:wgRo25VY
test
413Name_Not_Found:2006/03/15(水) 16:59:21 ID:???
list
414Name_Not_Found:2006/03/15(水) 17:01:07 ID:???
pest
415Name_Not_Found:2006/03/15(水) 17:05:52 ID:???
dust
416Name_Not_Found:2006/03/15(水) 17:55:37 ID:???
^^
417 :2006/03/15(水) 20:16:13 ID:wgRo25VY
t
418Name_Not_Found:2006/03/15(水) 21:32:08 ID:???
すみません、floatとclearで質問させてください。
float:leftで2カラムを作り、そのあとclear:leftとすると、
IEでだけ、カラムの末尾の文字が次の行に表示されます。
たとえば、FireFoxやOperaでは、

□□□|□□□| ←float
□□□|□□□|
□□□|□□*|
―――――――― ←ここでclear
□□□□□□□□

と、何ごともなくキレイなのですが、なぜかIEの場合だけ、

□□□|□□□| ←float
□□□|□□□|
□□□|□□*|

―――――――― ←ここでclear
□□□□□□□□

というふうに、clearするブロックの直前に、末尾の「*」に相当する文字が表示されるのです。
元の*にあるものが送信ボタンですと、次の行の*も送信ボタンになります(機能はありません)。

これはなぜか御存知の方、おられますでしょうか。
なお、
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
のページもfloatとclearを使用していると思いますが、
このページをIEで見ても、そうした現象は起きません。
419Name_Not_Found:2006/03/15(水) 21:37:52 ID:???
50レス程遡ると幸せになれるかもしれん。
420Name_Not_Found:2006/03/15(水) 21:53:09 ID:???
>>419
どうもありがとう。コメントが障っている、ということですね。

それとは別に、418を投稿したあと、自己解決というか、
clear後のブロックのwidth指定をすると、文字のダブリは消えました。
なぜなのかはわかりませんが。。。
421Name_Not_Found:2006/03/16(木) 07:40:48 ID:???
IEの挙動はおかしいからな。
覚えるのキリが無い。
422 :2006/03/16(木) 09:56:16 ID:yJc0q8A/
w
423Name_Not_Found:2006/03/16(木) 14:14:22 ID:ycfrGihN
質問させてください。

<h1><a href="/">サイト名</a></h1>

h1 {
text-indent: -9999px;
background: url(img/h1.jpg) no-repeat;
width: 100%;
height: 100px;
margin-bottom: 30px;
}

として文字を画像に置き換えたいのですが、
このままではリンクが外れて?しまいます。
画像リンクのように表示したいのですがどうすればよいのでしょうか?
よろしくお願いします。
424Name_Not_Found:2006/03/16(木) 14:36:44 ID:???
>>423
h1 a {
display:block;
text-indent: -9999px;
background: url(img/h1.jpg) no-repeat;
width: 100%;
height: 100px;
margin-bottom: 30px;
}
425423:2006/03/16(木) 14:44:16 ID:???
>>424
ありがとうございます
426Name_Not_Found:2006/03/16(木) 15:00:40 ID:???
質問させてください。

h1 {
vertical-align:middle;
}
div {
height:200px;
}

<div><h1>text</h1></div>

でvertical-alignが効きません。
何か指定を間違えてるんでしょうか?
427Name_Not_Found:2006/03/16(木) 15:07:52 ID:???
>>426
vertical-alignはインライン要素、TD/TH要素に対してのみ。
428Name_Not_Found:2006/03/16(木) 15:12:09 ID:???
>>427
h1にdisplay:inline;を追加したところで変化しないのですが
429Name_Not_Found:2006/03/16(木) 15:14:09 ID:???
助けて母さん
430Name_Not_Found:2006/03/16(木) 15:19:28 ID:???
>>428
非置き換え要素のインラインにはheightは適用されない。
431Name_Not_Found:2006/03/16(木) 15:36:41 ID:???
ありがとうございます、何とか理解しました
432Name_Not_Found:2006/03/16(木) 17:27:19 ID:???
<div class="section">
<h2>見出し</h2>
<p>本文</p>
</div>

こういうの見かけたんですけど、なんでsectionなんですか?
433Name_Not_Found:2006/03/16(木) 17:30:51 ID:???
>>432
スレ違いなんだが、それは理解してるか?

XHTML2.0ではsectionという要素が追加される可能性がある。
それでなくともsectionには区画という意味がある。
見出しで区切られる一つの章は区画だから。
434Name_Not_Found:2006/03/16(木) 17:32:53 ID:???
>>433
ありがとうございました。
そういうことですか。

スレ違いだとは思いましたが、該当スレがなかったのでここで聞いちまいました。
435Name_Not_Found:2006/03/16(木) 18:08:05 ID:???
Osakaフォントを使用しているのですが、たまにOsakaフォントが反映されないサイトがあります。
そこで、ユーザースタイルシートを用いてOsakaフォントを適用させたいと思うのですが、どのようにすればいいのでしょうか?
フォント以外の部分はデフォルト通りを希望します。
自分でも検索しましたが、探し方が悪いためか見つかりませんでした。
よろしくお願いします。
436Name_Not_Found:2006/03/16(木) 18:18:44 ID:???
ユーザースタイルシートの設定は環境によって違うということは知ってるんだが
フォントごとに設定ってできた?

というかスレt(r
437Name_Not_Found:2006/03/16(木) 18:30:05 ID:???
ユーザースタイルシートで検索したのですが、引っかからなかったので
CSSで検索してこのスレが妥当かと思い質問させていただきました。
スレ違いでしたら申し訳ありません。
438Name_Not_Found:2006/03/16(木) 18:31:26 ID:???
>>435
* { font-family : Osaka !important; }
439Name_Not_Found:2006/03/16(木) 19:05:33 ID:???
サイト側のフォント設定を無視するなんて設定は
ブラウザに付いてるだろ。チェックボックスのオンオフを切り替えるだけ。
440Name_Not_Found:2006/03/16(木) 19:46:41 ID:???
>>439
火狐?IEにはついてないでしょ。
441Name_Not_Found:2006/03/16(木) 19:49:32 ID:???
>>440
ついてるよ。インターネットオプションの全般→ユーザー補助でもじっくり見とき
442Name_Not_Found:2006/03/16(木) 19:55:21 ID:???
>>441
おお。そうだったのか。スマソ。
443Name_Not_Found:2006/03/16(木) 20:45:35 ID:???
>>435
Osaka以外のフォントをシステムから外す
444Name_Not_Found:2006/03/16(木) 21:12:35 ID:???
>>443
天才現る。
445Name_Not_Found:2006/03/16(木) 22:08:33 ID:Jh6ZNqYL
content以外で文章を挿入する方法はありませんか?
比較的頻繁に更新される共通部分を持つ場所が多いのでcssで文章を挿入するようにしたいです。
446Name_Not_Found:2006/03/16(木) 22:17:25 ID:???
ない
SSI じゃいかんの?
447Name_Not_Found:2006/03/16(木) 22:23:50 ID:???
>>446
サーバ管理してるわけじゃないんでそこまでの権限はないんですよね。
かわりの方法考えてみます。ありがとうございました。

448Name_Not_Found:2006/03/16(木) 22:28:49 ID:???
??
449Name_Not_Found:2006/03/16(木) 22:30:46 ID:???
普通にSSI使えない鯖って事でしょ。
450Name_Not_Found:2006/03/16(木) 22:37:01 ID:???
>>447
PHPならinclude()とかの関数はある。
Perlでもあったと思うが忘れた…ググれ。
451445:2006/03/16(木) 22:40:52 ID:???
今の予定ではWebサーバすら利用せずに完全にローカルで使うだけなんです。
452Name_Not_Found:2006/03/16(木) 22:42:36 ID:???
ローカルだろうがパーソナルコンピュータだろうがSSIは使える。
それぐらい調べれ。
453Name_Not_Found:2006/03/16(木) 22:48:29 ID:???
>>451
つ JavaScript
454Name_Not_Found:2006/03/16(木) 22:48:39 ID:???
配布用かも知れん
455Name_Not_Found:2006/03/16(木) 22:51:06 ID:???
>>453
見えない。見えない。
>>454
配布はしないけど、たぶんそんな感じです。
456Name_Not_Found:2006/03/16(木) 22:51:34 ID:???
>>451
TeddyWikiでググれ。
457445:2006/03/16(木) 22:55:03 ID:???
日本語で出てきたページは全部
No such file to load -- erb/erbl (LoadError) ./tdiary.rb:21:in `require' ./tdiary.rb:21 ./index.rb:18:in `require' ./index.rb:18 index.cgi:4:in `require' index.cgi:4
ってエラーがでてきました。
言語指定しなかったらフランス語しかでてこなかったです。
458Name_Not_Found:2006/03/16(木) 22:56:45 ID:???
あ、tiddyだ。
ケアレスミス。
459Name_Not_Found:2006/03/16(木) 22:58:00 ID:???
tiddly wikiまだ間違えてるw
うろ覚えすぎた。すまん。
460Name_Not_Found:2006/03/16(木) 23:01:00 ID:???
どんま〜〜〜い
461Name_Not_Found:2006/03/16(木) 23:09:30 ID:???
どんマイケル!
462Name_Not_Found:2006/03/17(金) 01:42:43 ID:vXmKkgwW
<ul>
<li><img src="block.gif" width="50" height="50" /></li>
<li><img src="block.gif" width="50" height="50" /></li>
</ul>

このようにした場合、上下の画像の間に3ピクセルぐらいの余白が空いてしまいます。
これをCSSで空かないようにしたいのですが可能でしょうか?
463Name_Not_Found:2006/03/17(金) 01:47:55 ID:???
ちなみにmargin-top: -3pxとかはダメです。
IEは余白が3ピクセルですが、FireFoxは4ピクセルだったりするからです。
464Name_Not_Found:2006/03/17(金) 01:48:37 ID:???
>>462
vertical-align:bottom;
465Name_Not_Found:2006/03/17(金) 02:01:45 ID:???
ul,li{margin:0;padding:0;}
466Name_Not_Found:2006/03/17(金) 02:03:29 ID:???
>>464
ありがとうございます。
それで解決です。

>>465
それはやりましたが無理です。
467Name_Not_Found:2006/03/17(金) 02:13:28 ID:???
正解だったのに嬉しくない・・・何この偉そうな質問者。
468Name_Not_Found:2006/03/17(金) 02:24:39 ID:???
>>467
何が偉そうなのかわからん。
正解だったとか言ってるが、おまえ>>464じゃなくて>>465だろ?
間違いを指摘されて悔しいんだろw
469Name_Not_Found:2006/03/17(金) 02:45:51 ID:???
もういいよ、それでも。あほらしい。
470Name_Not_Found:2006/03/17(金) 03:41:30 ID:???
いわゆるImage Replacementの画像にハイパーリンクが張られたデザインを実現したいのですが、方法があれば教えてください。

●対象ソース
<ul>
<li id="f1"><a href="#f1">test1</a></li>
<li id="f2"><a href="#f1">test1</a></li>
<li id="f3"><a href="#f1">test1</a></li>
</ul>

●完成イメージ
[ img1.png ]
[ img2.png ]
[ img3.png ]
↑各画像ブロック全体にリンクが張られている感じです。テキストが画像の上に来ないようにしたいです

text-indentで普通にとばしてしまうと、もちろんリンクは張られません。
a:before{ content: url(imgn.png)}としても、実際にリンクテキストを踏まないとリンクが機能しませんでした。
どうすればいいのでしょう・・
471Name_Not_Found:2006/03/17(金) 03:42:27 ID:???
すみません、ソース訂正します。

●対象ソース
<ul>
<li id="f1"><a href="#f1">test1</a></li>
<li id="f2"><a href="#f2">test2</a></li>
<li id="f3"><a href="#f3">test3</a></li>
</ul>
472Name_Not_Found:2006/03/17(金) 03:45:57 ID:???
before擬似要素で失敗したのはこんな感じです。
ul li{ width: 200px; height: 50px; /* imgn.pngの大きさ*/ overflow:hidden;}
ul li:before{ content: (imgn.png);}

もちろんimg要素を使えば解決しますが、できればCSSで実現したいです。
473Name_Not_Found:2006/03/17(金) 03:51:21 ID:???
474Name_Not_Found:2006/03/17(金) 03:52:02 ID:???
あ、もっと前だ。
まあここのレスなんで漁ってみて。
475Name_Not_Found:2006/03/17(金) 04:03:57 ID:???
見つけました。少し前のレスにあったのですね。
ごめんなさい、夜分遅くにありがとうございます。
476Name_Not_Found:2006/03/17(金) 04:59:26 ID:???
とあるサイトでフッターを常に最下部に表示する方法が
乗っていたのですが、

div.naka {
position:relative;z-index:9;
border:solid 2px #0000ff;/←*見やすくするように入れた*/
background-color:#ffffff;
}

div#footerarea {
position:relative;z-index:8;
height:15px; width:100%;
background-color:transparent;
}

div.sita {position: fixed ; bottom:0;
z-index:0;
height:15px; width:100%;
border:solid 2px #ff0000;/←*見やすくするように入れた*/
background-color:#ffffff;
}

safariなどでうまく表示されません。
他に最下部に表示する方法でよい方法はありますか?
477Name_Not_Found:2006/03/17(金) 05:01:26 ID:???
478Name_Not_Found:2006/03/17(金) 16:57:15 ID:???
>>477
ありがとうございます。
CSS初心者なのですが記載のサイトの
html{
height:100%;
}
とはどういうことなのでしょうか?
479Name_Not_Found:2006/03/17(金) 16:59:28 ID:???
>>477
初心者が、そういうブラウザによってはヤバイかもしれないことを
使用も理解せずにやるのは感心しないんだが・・・
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html
480Name_Not_Found:2006/03/17(金) 20:43:26 ID:vTI0r0X5
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(略)

<style type="text/css">
/*日付の部分*/
.news-time{
float:left;
width:120px;
border:1px;
border-style:solid;
border-color:#CCFFCD;
background:#CCFFCD;
text-align:left;
}
/*タイトル部*/
.news-title{
width:310;
border:1px;
border-style:solid;
border-color:#CCFFCD;
background:#CCFFCD;
text-align:center;
}
481Name_Not_Found:2006/03/17(金) 20:44:57 ID:vTI0r0X5
/*内容部*/
.news-core{
width:433;
margin-top:3px;
padding:5px;
border:1px;
border-style:solid;
border-color:#CCFFCD;
background:#FFFFFF;
text-align:left;
}
</style>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080" bgproperties="fixed">
<div class="news-time">2006/3/5</div>
<div class="news-title">タイトル</div>
<div class="news-core">内容はないようです。<br></div>

このページをIE6で見ますとBOXが整っているんですが、
Firefox、opera、safari等で見ますとBOXが崩れています。

修正はどうすればいいんでしょうか?
482Name_Not_Found:2006/03/17(金) 20:53:35 ID:???
IEが崩れてるんです
483Name_Not_Found:2006/03/17(金) 20:54:35 ID:???
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

にしてみ
484Name_Not_Found:2006/03/17(金) 20:54:52 ID:wetSNKqF
質問です。
Opera8.53でflashオブジェクトに対する絶対配置が効きません。
画像なら効くんですが…
タグはFlashが吐き出したものをそのまま貼り付け、
そのobject要素にidを指定してます。
IE6、Firefox1.0、NN7.1では正常に表示されるんですが、
これは何が原因なんでしょうか?
気になる部分としては、objectではなくそれをdivで囲ったものを絶対配置指定すると
Opera以外では配置の値が2倍になってしまうことです。
(これも画像なら全てのブラウザで正常表示される)
ちなみにHTML・CSS共に他の記述をすべて削除した状態で確認しました。
よろしくお願いします。
485484:2006/03/17(金) 22:14:02 ID:???
自己レスです。
すいません、なんか色々触ってたら2倍うんぬんは直りました…
ただ前半は変わりません。
何がどうなってんだか自分でも混乱してきました…
486484:2006/03/17(金) 22:29:28 ID:???
再び自己レスです。
すいません。直りました。
ずっと以前にobjectの中に既に別のidを指定していたのを忘れてたという
恥ずかしいケアレスミスでした。
でもそういったゴミソースを無視するブラウザと影響が出るブラウザが
混在しつつ、その挙動に関連性が薄いのがそもそもCSSの…と思いつつ、
大変お騒がせ致しました。ごめん。
487Name_Not_Found:2006/03/17(金) 22:41:20 ID:???
おれもわからなかったから>>464には感謝だ。
報われるかな。
488Name_Not_Found:2006/03/17(金) 22:46:47 ID:???
インライン要素でvertical-alignも使って調整するって、strict的にどうなんだろ?
489Name_Not_Found:2006/03/17(金) 23:05:07 ID:???
何の話だ?
490Name_Not_Found:2006/03/17(金) 23:37:26 ID:???
display:block;でブロック要素にしちゃえばおk!
491Name_Not_Found:2006/03/17(金) 23:39:51 ID:???
天才現る
492Name_Not_Found:2006/03/18(土) 02:20:28 ID:???
>>487
ありがとう。ごめん。
493Name_Not_Found:2006/03/18(土) 13:50:00 ID:???
質問させてください。

http://css.maxdesign.com.au/listamatic2/vertical06.htm

上のアドレスにあるボタンですが、
ポインタをテキストの上ではなく、画像の上に持ってくるとa:hover
になっていますが、

これは何処で指定できているのでしょうか
494Name_Not_Found:2006/03/18(土) 13:53:07 ID:???
>>493
その下にソースあるじゃん。
imgじゃなくてテキストに対するa要素でhoverだよ。
a>imgでも同じことはまあできるけど。
495493:2006/03/18(土) 14:07:41 ID:90z33FUF
>>494
あ、わかりました。
どうも
496 :2006/03/18(土) 15:27:08 ID:90z33FUF
質問です。

■■ □□□□□□□□
    □□□□□□□□
    □□□□□□□□□□□


■がdt
□がdd

で上のように作りたいいんですけど。

□□がどうしても

■■ □□□□□□□□
    □□□□□□□□
    □□□□□□□□
□□□

になってしまします。
<dl><dt></dt></dd></dl>
で教えていただければ幸せです。
497Name_Not_Found:2006/03/18(土) 15:43:34 ID:???
498Name_Not_Found:2006/03/18(土) 17:16:34 ID:???
http://wdt.pekori.jp/info.php
のデザインを少し参考にしようと思ってるのですが
赤丸の部分はどうやってるのでしょうか?
探したのですがうまくいきません。青○の部分は画像でした。
http://zetubou.mine.nu/itoshiki/nozomu/zetubou21450.jpg

一応、再現スタイル・・・
<h3 id="summary">サイト概要</h3>
<div class="box">
<dl>
<dt>サイト名</dt>
<dd>[WebDesignTemplates]</dd>
<dt>URL</dt>
<dd>[http://wdt.pekori.jp/]</dd>
<dt>管理者</dt>
<dd>[caz]</dd>
<dt>内容</dt>
<dd>[HTML/CSSデザインソースの配布]</dd>
</dl>
</div>
499Name_Not_Found:2006/03/18(土) 17:17:04 ID:???
h3{
font-size: 90%;
font-family: "MS UI Gothic","MS Pゴシック",sans-serif;
letter-spacing: 0.2em;
color: #56564C;
padding: 4px 1em 2px 2.5em;
margin: 2em 14% 0px 0px;
border: solid 1px #949495;
white-space: nowrap;
background-color: #FAFAFB;
background-image: url("../img/h3.gif");
background-repeat: no-repeat;
background-position: 5pt 0.5em;
}
.box dl{
margin: 0.3em 1em 0.2em 0.5em;
}
.box dt{
font-size: 80%;
font-family: Arial,Helvetica,sans-serif;
margin: 1px 2em 0px 0px;
padding: 0px 1em 0px 0.2em;
letter-spacing: 0.1em;
}
.box dd{
margin: 0.2em 2em 0.5em 0.1em;
padding: 0px 1em 0.2em 1em;
border-bottom: dashed 1px #CACACF;
}
500Name_Not_Found:2006/03/18(土) 17:20:31 ID:???
要素に設定されているスタイルを、
クラス等でノーマル状態にクリアする事はできるでしょうか?

<ul>
<li>あああ
<li class=hoge>いいい
<li>ううう
<ul>

CSS:
li { padding:20px; background:などなど沢山 }
li.hoge { (クリア) color:red}

表示:
「いいい」 だけが、ノーマルに赤文字表示。
501Name_Not_Found:2006/03/18(土) 17:24:06 ID:???
>>498
div.box{
margin: 0px 15% 2.5em 8pt;
padding: 0.7em 0.5em 1em 0.5em;
border-left: solid 1px #949495;                 ←これ
border-bottom: solid 1px #FDFDFD;/*IE5.5バグ用*/
}
502Name_Not_Found:2006/03/18(土) 17:25:29 ID:???
>>500
「ノーマル」の意味がわからない。
デフォルト表示だったら各ブラウザによって違うから指定は難しい。
503501:2006/03/18(土) 17:29:23 ID:???
>>498
っと、忘れてた。
そのサイト、互換モードになっててIE以外だとずれてるから、
標準モードにして全部で調整したほうがいいよ。
DOCTYPEでググれ。
504Name_Not_Found:2006/03/18(土) 17:45:41 ID:???
>>503
DOCTYPEは知ってるけど難しい言葉が一杯でよくわからんのよね・・・
505500:2006/03/18(土) 17:46:59 ID:???
>>502
ありがとうございます。
そうですね、デフォルト状態に初期化という意味です。

やはり、font-size: medium とか 1こ1こ 指定していくしかないんですかぁ ショボーン
506Name_Not_Found:2006/03/18(土) 18:24:56 ID:???
いいい以外にclass指定してあげればいいだけでは。
507Name_Not_Found:2006/03/18(土) 18:39:44 ID:???
>>501
/*IE5.5バグ用*/ってあるけど
そのスタイルで変になるところあるか?
508Name_Not_Found:2006/03/18(土) 18:51:18 ID:???
知らん。そこまで検証したくはない。
509Name_Not_Found:2006/03/18(土) 20:03:25 ID:???
classとidの違いを簡潔に教えてくれませんでしょうか?
510Name_Not_Found:2006/03/18(土) 20:13:31 ID:???
>>509

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

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

905 Name_Not_Found 2006/01/30(月) 23:18:15 ??? mailto:sage
>>904
classは主にCSSのためにしか使われない。むしろこっちはなくても何とかなる。
だがidは違う。まさに「名前」だ。
そこにアクセスするための名前だから、見出しなんかには確実に付けといたほうがいい。
廃止されるname属性の代わりにid属性が使われる理由もそこ。
511Name_Not_Found:2006/03/18(土) 20:44:50 ID:???
ありがとうございます。
ということは、
ヘッダーなどの大きなブロックはid
ヘッダーなどの中身の文章はclass
っていう感じなのでしょうか?
512Name_Not_Found:2006/03/18(土) 20:50:28 ID:???
>>511
というか、idとclassは一緒に使っていいんだよ。
見出しは大抵IDを付けるけど、それとは別に
「こういう説明の見出し」だから、それを全部同じclassで纏めるって手もあるし、
見出しに含まれないナビやアドレスは固有のidを付ける場合もあるし。
「CSSのため」って考えを一度捨ててごらん。
文書として「これとこれはこういう性質の要素だからclassを付けよう」とか
「これはこういう固有の名前を持った要素だ」とか、
まず中身の構造ありきでしか考えちゃならないものだから、本来は。
CSSで装飾ができるのは、おまけのようなもの。
513Name_Not_Found:2006/03/18(土) 21:12:58 ID:???
ここはCSSスレ。
id、classといえば当然セレクタの話だろう。
HTMLの属性の話に終始するのはおかしい、スレ違い。
514Name_Not_Found:2006/03/18(土) 21:15:00 ID:???
>>513
>>511嫁。
すでに存在するID/classの話じゃない。
スレ違いはスレ違いだが、昔からよくあるこっちゃ。
515Name_Not_Found:2006/03/18(土) 21:20:55 ID:???
>>514
昔からあるからスレ違いだけでも構わない?
一言もセレクタに触れなくて良い?
不正な文書に対して実装がどうなっているかに触れなくて良い?
516Name_Not_Found:2006/03/18(土) 21:30:29 ID:???
>>515もスレ違い。
517Name_Not_Found:2006/03/18(土) 21:31:47 ID:???
>>515
>不正な文書に対して実装がどうなっているか
kwsk
518Name_Not_Found:2006/03/18(土) 22:57:38 ID:???
これでよくわかった。
説明できん奴はスレ違いの一点張り。
説明できる奴はきちんと説明してる。


理解している=説明できる
と思ってる奴は基地外
519Name_Not_Found:2006/03/18(土) 23:13:52 ID:???
自分だけがわかったと思い込んで有頂天になり、優越感を覚えるため目の前のスレに書き込む。
520Name_Not_Found:2006/03/18(土) 23:41:43 ID:???
>518
>理解している=説明できる
突然脈絡の無い意味不明の発言ワロスw

理解していても説明する為には、
説明の順番や話し方、慣れなど技術的な事が必要
だから、理解しているからといって説明できるとは限らない

おまえはこういう事をいきなり話だしたっての理解してる?
お前がバカってのは良くわかったw
521Name_Not_Found:2006/03/18(土) 23:53:59 ID:???
>>520
こ こ は 2 c h で す よ ?
522Name_Not_Found:2006/03/18(土) 23:58:03 ID:???
その言葉久しぶりに聞いたキガス
523Name_Not_Found:2006/03/19(日) 00:03:08 ID:???
>521
って、すげーバカ
びっくりして歯ブラシおっこどしたぜ
ボブ・デビットソン並にキチガイw
524Name_Not_Found:2006/03/19(日) 00:06:54 ID:???
>>521-523
自演乙
525Name_Not_Found:2006/03/19(日) 00:12:39 ID:???
>>512
そう言われても、素人にはわからないんだよねー。
IDとCLASSで異なる設定したら、どっちが優先されるのでしょうか。
526523:2006/03/19(日) 00:13:36 ID:???
>524
自演もなにも、矛盾した発言じゃねーだろ
言い返してきた521に、こ こ は 2 c h で す よ ?
っていいたかったのによ。つまんねー奴。
527Name_Not_Found:2006/03/19(日) 00:13:42 ID:???
人に聞いてばかりいないで自分で調べたら?
それでもわからなかったらまたおいで。
528Name_Not_Found:2006/03/19(日) 00:14:43 ID:???
>>520
そもそも説明するほどの価値がある相手かってのが問題。

>>518にはその価値がない。
529Name_Not_Found:2006/03/19(日) 00:21:23 ID:???
おまえら、cssの話にもどれ。
必死になったら負けだぞ
530Name_Not_Found:2006/03/19(日) 00:31:07 ID:???
つまらん質問が多いから、
たまにこういう形でガス抜きも必要なんだろうな。
531Name_Not_Found:2006/03/19(日) 00:52:43 ID:???
>>530
だな。でもここでガス抜きは、人間腐ってる
532Name_Not_Found:2006/03/19(日) 01:13:08 ID:???
>>531
>つまらん質問が多いから
って話だろ、すり替えるな。他所でガス抜きされた方が、よっぽどメイワク。
533Name_Not_Found:2006/03/19(日) 01:42:22 ID:???
ガス抜きぐらい、パソコン使わなくてもできるだろうに・・・・
534Name_Not_Found:2006/03/19(日) 02:06:28 ID:???
へえ。そう言う発言で実は他人を馬鹿にして喜んでるのに?
535Name_Not_Found:2006/03/19(日) 02:45:10 ID:???

どう読めば他人を馬鹿にしてる ってなるの?
536Name_Not_Found:2006/03/19(日) 02:54:18 ID:???
>>535
ごめん 俺にはわからん
537Name_Not_Found:2006/03/19(日) 04:57:26 ID:???
多分>>534の性格が捻くれてるんだよ
538Name_Not_Found:2006/03/19(日) 07:00:27 ID:???
春ですね
539Name_Not_Found:2006/03/19(日) 07:49:23 ID:???
position:absolute使った直後の要素にfloat:left使ったら
winのIEだけposition使った要素が表示されなくなりました
対策方法はありますか?
540Name_Not_Found:2006/03/19(日) 09:15:50 ID:???
クリアするなり、absoluteの要素を最後に書くなり
541Name_Not_Found:2006/03/19(日) 10:18:54 ID:???
>525
>こういった背景から CSS のIDセレクタは,
>クラスセレクタやその他のセレクタ規則よりもカスケード処理で優先されます。

ってここに書いてある。
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#id-selectors
IDとクラスについても解説あるよ。
542Name_Not_Found:2006/03/19(日) 12:57:42 ID:???
IDだけでやっても問題なんてねーよ
543Name_Not_Found:2006/03/19(日) 12:59:33 ID:???
542のサイトがその程度の作りなら、そのままにしておけばいい。
544Name_Not_Found:2006/03/19(日) 13:02:38 ID:???
>>IDだけでやっても問題なんてねーよ

まずはIDだけでやってみろ。
やっていくうちにclassの必要性もわかってくる。

ってことを言いたいんじゃないのか?かっこわらいかっことじた
545Name_Not_Found:2006/03/19(日) 13:12:48 ID:???
>>544
そうでもないと思うけど。
ページ構成が完全に既存の要素だけで意味が完結してて
一つの要素で別の意味を持たせたいとか
複数の要素で同じ意味を持たせたいとか
そういうのがなければclassは必要ないと思うよ。
546Name_Not_Found:2006/03/19(日) 13:17:18 ID:???
思想的だな
547Name_Not_Found:2006/03/19(日) 13:21:44 ID:???
思想をマークアップする言語、それがHTML
548Name_Not_Found:2006/03/19(日) 13:21:52 ID:jXLhZx6j
質問させてください。
divの中にfloatを使って<P>と<img>を入れているんですが、二つの縦の長さが違うと
divの下の枠線が短いほうに合わされてしまい、長い要素と重複してしまいます。
↓こんな感じです。
http://www.uploda.org/uporg340278.gif

IEでもFirefoxでも同じ症状になります。問題点の指摘をよろしくお願いします。
549Name_Not_Found:2006/03/19(日) 13:23:08 ID:???
>>548
だってfloatさせた要素は、通常フローから取り残されるから、それが正しい動作。
550Name_Not_Found:2006/03/19(日) 13:27:43 ID:jXLhZx6j
>>549
ありがとうございます。お答えをヒントにひょっとしたらと思って<div>内の最後に
clear属性をつけた空divを入れてみたんですが、ダメでした…
もうこれはあきらめたほうが良いですか?
551Name_Not_Found:2006/03/19(日) 13:32:56 ID:???
>>550
動作を勘違いしてるようなんで、いまいち何がやりたいんだかわからないが・・・
ttp://www.stylish-style.com/gallery/gallery-top.html
ここらへん参考にして、期待するものありそう?
552Name_Not_Found:2006/03/19(日) 13:38:20 ID:jXLhZx6j
>>551
ありがとうございます。今見てきたんですがありませんでした。
自分がイメージしているのは、ブログでよくあるようなスタイルです。画像とテキストを含んだ一まとまりの
divが縦に連続して並んでいくというものです。説明が足りなくて申し訳ありませんでした。
553Name_Not_Found:2006/03/19(日) 13:39:44 ID:???
>>552
だったら単純に次のブロックでfloatをclearしてやりゃいいだけじゃ。
554Name_Not_Found:2006/03/19(日) 13:40:41 ID:???
ってもう俺いなくなるんで、あとは他の人おながいします。
555Name_Not_Found:2006/03/19(日) 13:47:31 ID:jXLhZx6j
ありがとうございます。続く要素にclear属性をつけてみましたがやはりダメでした。
556Name_Not_Found:2006/03/19(日) 14:01:36 ID:???
clear属性?!
557Name_Not_Found:2006/03/19(日) 14:11:40 ID:jXLhZx6j
なんか正しい呼び方とか知らないんですが、clear:bothつけました(・∀・)
558Name_Not_Found:2006/03/19(日) 14:38:36 ID:???
×both
○boss
559Name_Not_Found:2006/03/19(日) 14:50:21 ID:???
member {
clear: boss;
}
560Name_Not_Found:2006/03/19(日) 15:10:07 ID:???
>>557
プロパティな
あと変な子がbossboss言ってるけどbothであってる
561Name_Not_Found:2006/03/19(日) 15:18:35 ID:Kzr7HuTs
float: leftとclear: leftについて質問です。

<style>
p img { float: left; }

h2 {
background-color: #ffcccc;
padding: 10px 0;
clear: left;
}
</style>

<h2>見出し</h2>
<p><img src="./images/pict.jpg" width="80" height="80" />文章</p>
<h2>見出し</h2>

こうすると、IEでのみバグで下のh2のpadding-topが20pxと倍になってしまいます。
良い回避策はありませんでしょうか?
562Name_Not_Found:2006/03/19(日) 15:20:09 ID:???
追伸ですが、imgのheightより『文章』が長い場合はpadding-topは倍になりません。
563Name_Not_Found:2006/03/19(日) 15:47:01 ID:???
564Name_Not_Found:2006/03/19(日) 15:50:14 ID:???
<style>
span { vertical-align: top; }
h2 { background-color: #ffcccc; padding: 10px 0; }
</style>

<h2>見出し</h2>
<p><img src="./images/pict.jpg" width="80" height="80" /><span>文章</span></p>
<h2>見出し</h2>

あえてこうするとか
565Name_Not_Found:2006/03/19(日) 15:50:18 ID:???
>>563
レスありがとうございます。
IEだけ半分にする指定方法というのがありますでしょうか?
566Name_Not_Found:2006/03/19(日) 15:51:51 ID:???
>>564
レスありがとうございます。
そういった方法ならいろいろあると思いますが、見栄えのためにhtmlを変更しないという条件でやっておりまして・・・
申し訳ありません。
567Name_Not_Found:2006/03/19(日) 15:53:40 ID:???
>>565
CSSハックでググル。
568Name_Not_Found:2006/03/19(日) 16:16:34 ID:???
>>567
ありがとうございます。
やってみます。
569561:2006/03/19(日) 16:26:14 ID:???
IEのみに適用させるハックを使って、さらにもう1つのIEバグも使って
* html p { height: 80px; }とすることで解決しました。
ありがとうございました。

IE7が出ても、このハックはIE7以降のIEには適用されないってだけで問題ありませんよね?
570Name_Not_Found:2006/03/19(日) 16:27:41 ID:???
そ ん な も の は 出 て み な い と 解 ら な い
571Name_Not_Found:2006/03/19(日) 16:29:20 ID:???
わかりました。
572Name_Not_Found:2006/03/19(日) 16:59:46 ID:???
>>569
そういうのは、MSが言うとおり、コンディショナルコメントでやるべきだと思うけどね。
573Name_Not_Found:2006/03/19(日) 17:02:22 ID:???
>見栄えのためにhtmlを変更しないという条件
これがあるからConditional Commentsは駄目だろ。
俺も同様の理由で嫌いだし、CSS切り替えでは致命的。
574Name_Not_Found:2006/03/19(日) 17:13:39 ID:???
好き嫌いで、プログラムでも何でも組める連中は楽で良い。
575Name_Not_Found:2006/03/19(日) 17:18:17 ID:???
プロはこんなところに来てませんよ^^
576Name_Not_Found:2006/03/19(日) 17:24:57 ID:???
ていうかプロの本にこそハックの小手先技が載ってる現実・・・
取引先がCCを知ってるくらい知識があると楽だろうね。
577Name_Not_Found:2006/03/19(日) 17:58:37 ID:???
position: relativeをした後、それを無効にする方法はないでしょうか?

p { position: relative; left: 200px; }

#id { ここで無効にしたいんです。でもposition: absolute; right: 200px;は使いたいんです。 }
578Name_Not_Found:2006/03/19(日) 18:05:50 ID:???
>>577
デフォルトがstatic。
579577:2006/03/19(日) 19:02:33 ID:???
>>578
p { position: relative; left: 200px; }

#id { position :static; position: absolute; right: 200px; }

としてみましたが無理でした。
580Name_Not_Found:2006/03/19(日) 19:11:36 ID:???
・・・当り前じゃん、更にabsoluteで上書きしてんだから
581577:2006/03/19(日) 19:27:41 ID:???
>>580
あ、leftを無効にしたいんです。
582Name_Not_Found:2006/03/19(日) 19:44:03 ID:???
display要素の対応しているブラウザは、多いほうですか?
583Name_Not_Found:2006/03/19(日) 20:23:04 ID:???
すみません。
CSSの書き方で、質問させていただきます。
たとえば、{ }の中に、{ }を入れて、定義することは出来ますか?

***0{
***:***
***1{
***:***
}
}
584Name_Not_Found:2006/03/19(日) 20:33:11 ID:???
質問の前にやってみたらどうだね?
すぐわかるから
585Name_Not_Found:2006/03/19(日) 20:45:50 ID:???
>583
できるのとできないのがある。
メディアとかは可能。
586577:2006/03/19(日) 21:17:07 ID:???
自己解決しました。
誰も答えられないんですね。
587Name_Not_Found:2006/03/19(日) 21:22:23 ID:???
>>586
おまえの質問がアホなだけ。
588Name_Not_Found:2006/03/19(日) 21:24:26 ID:???
質問する前に努力してなかっただけだな。
589Name_Not_Found:2006/03/19(日) 21:25:05 ID:???
>586
誰にも気付かれず寂しかったんですね
泣きなさい笑いなさい
あなたの心の傷は受け止めてあげるから
そして、あなたの様な思いをする人が出ないように、
貢献してください。世界が平和でありますように。
590577:2006/03/19(日) 21:26:07 ID:???
やはり負け惜しみですか。
まさに思ったとおりの展開です。

あなたたち・・・無知でかわいそう・・・
591577:2006/03/19(日) 21:26:50 ID:???
悔しかったら、どうやって解決したのか答えてみるのも良しとします。
592578、580:2006/03/19(日) 21:27:16 ID:???
>>586
あれだけヒントをあげてて気づけなかったお前に嫌気が差して無視した。
593577:2006/03/19(日) 21:28:13 ID:???
>>592
大変申し訳ございませんが、それは何のヒントにもなっていないし関係なかったです。
594578、580:2006/03/19(日) 21:28:14 ID:???
・・・本当の池沼だったか・・・
595Name_Not_Found:2006/03/19(日) 21:28:39 ID:K2tsWb4V
CSSを使って一度に(テーブル内も)文字のフォントを変えれないのですか?
fontsizeで一度指定してみたのですがテーブル内の文字のフォントが変わりません。

ttp://youki.xxxxxxxx.jp/
596Name_Not_Found:2006/03/19(日) 21:29:03 ID:???
>590
3時間も悩み続けたようですね
答えが出なくてもいいんですよ
あなたは成長している筈です
もっともっと叫んでください
あなたの心が癒されるなら
597577:2006/03/19(日) 21:29:17 ID:???
>>594
こういう場合、ここでは「おまえがな」とでも言っておくのがよろしいんでしょうか。
598Name_Not_Found:2006/03/19(日) 21:29:23 ID:???
>>595
変えられる。もっと基礎から勉強しておいで。
ttp://hp.vector.co.jp/authors/VA022006/
599Name_Not_Found:2006/03/19(日) 21:30:22 ID:???
>597
そうそう、もっともっと叫んでください
明日には新しい自分に会えるはずです
600577:2006/03/19(日) 21:31:08 ID:???
>>596
3時間も悩み続けてたと思うということは、あなたはそのような暇があるようですね。
みんな自分と同じように考えないほうが、これからの人生少しは上手くいくと思いますよ。
601577:2006/03/19(日) 21:31:49 ID:???
>>599
その調子です。
あなたも私に対してもっともっと叫んでください。
602577:2006/03/19(日) 21:34:43 ID:???
「誰も答えられないんですね。」というふとした拍子の私の発言にカチンと来たあなたたち・・・かわいいわね。
603Name_Not_Found:2006/03/19(日) 21:34:44 ID:???
>600
あなたは素晴らしい
あなたは3時間悩んだだけでなく、
私のことまで気遣ってくれて
もっともっと貢献してください
604Name_Not_Found:2006/03/19(日) 21:35:27 ID:???
餌やると居着くから放置しろよ
605577:2006/03/19(日) 21:35:28 ID:???
>>603
さあその調子です。
もっとです。
あなたの妄想を私にぶちまけなさい。
606577:2006/03/19(日) 21:38:02 ID:???
>>604
あなたは何様ですか?
私を犬とでもおっしゃるおつもりですか?
犬はどちらか・・・それを3時間ほどよく考えなさい。
607Name_Not_Found:2006/03/19(日) 21:38:57 ID:???
577
3サイズは?
608Name_Not_Found:2006/03/19(日) 21:39:21 ID:???
>>604に加えて、触ってる奴は自演って事でまとめて放置ヨロ
609577:2006/03/19(日) 21:39:26 ID:???
紅音ほたると同じです。
610Name_Not_Found:2006/03/19(日) 21:39:37 ID:???
チェーンソーで斬れそうなヤツだな
611577:2006/03/19(日) 21:40:32 ID:???
>>608
加えてあなたも自演だということに気づきなさい。

>>610
私をcoda扱いしないでください。
612Name_Not_Found:2006/03/19(日) 22:11:31 ID:???
ポの新手の自演か?
613577:2006/03/19(日) 22:17:28 ID:???
ごめんなさい。
精子が溜まってたので、頭がおかしかったです。
もうしません。次したら自分は糞と認めます。 
だから許してください
614Name_Not_Found:2006/03/19(日) 22:25:50 ID:???
.hoge{
background: #ffffff;
color: #ff000;
}
+++
.hoge
{
background: #ffffff;
color: #ff000;
}
+++
.hoge{background: #ffffff;color: #ff000;}

↑どういうのが正しいの?
615595:2006/03/19(日) 22:26:58 ID:K2tsWb4V
会話の途中ごめんなさい。
fontsizeで指定したのですがテーブル内の文字のフォント(bodyのみ)が
変わりません。何かタグを追加しないといけないのですか?
body {background-color: eeeeee; font-size: 14px
(別にlinkなども指定してあります)
つまらない質問ですみません..
616Name_Not_Found:2006/03/19(日) 22:29:21 ID:???
>>615
td{
font-size: 14px;
}

あと、フォントpx指定h(ry
617Name_Not_Found:2006/03/19(日) 22:33:49 ID:???
dd{
border-bottom: dashed 1px red;
}

<dd>testaa</dd>
<p>aa</p>

testaa
----------
aa

って感じにしたいけど

testaa aa
----------

こんな感じになってしまいます。
どうすれば直るのかがわかりませんorz
618Name_Not_Found:2006/03/19(日) 22:34:10 ID:???
質問なのですがNetscapeだけにCSSを実行させるハックはどういう記述でしたっけ?
619595:2006/03/19(日) 22:35:59 ID:???
>>616
出来ました
ありがとうございます!
620Name_Not_Found:2006/03/19(日) 22:48:04 ID:???
質問です。
あるボックスの横幅を200pxに固定してpadding-left:50px; と設定したら
IEでは正常なのにオペラなら横幅が250px;になってしまいます。
どうすれば、横幅が200pxのままpaddingをつけれるのでしょうか?
621Name_Not_Found:2006/03/19(日) 22:58:50 ID:???
>>620
>>5のQ1。
テンプレくらいは読もう。
622Name_Not_Found:2006/03/19(日) 23:01:33 ID:???
>>620
発想の逆転だ。
623Name_Not_Found:2006/03/19(日) 23:09:36 ID:jXLhZx6j
あのう… 昼に>>548で質問した者ですが、ヒントでもいいので教えていただけないでしょうか…
昔のを出してすみません。
624Name_Not_Found:2006/03/19(日) 23:11:22 ID:???
>>621さん
すみませんでした。
ありがとうございます

やっぱりこの対処法で一番いいのは
width:200px; と書くよりbox-width:200px; と書くことなのでしょうか?
625Name_Not_Found:2006/03/19(日) 23:11:53 ID:???
>>623
画像がみれません
626617:2006/03/19(日) 23:15:50 ID:???
(´・ω・`)
627Name_Not_Found:2006/03/19(日) 23:17:06 ID:jXLhZx6j
>>625
もう消えてたみたいですね。同じのを上げます
http://www.vipper.org/vip217376.gif
628Name_Not_Found:2006/03/19(日) 23:22:39 ID:???
625ではないが、それならポジションでやれば?
629Name_Not_Found:2006/03/19(日) 23:22:59 ID:???
imgをpの子要素に
630Name_Not_Found:2006/03/19(日) 23:23:11 ID:???
文中に文字より小さな画像を入れたら
文字の上に合わせてしまいます。
真ん中にするにはどうすればいいのでしょうか?
631Name_Not_Found:2006/03/19(日) 23:23:25 ID:???
>>617
HTML自体の書式が間違っています
632Name_Not_Found:2006/03/19(日) 23:24:45 ID:jXLhZx6j
>>629
やってみます。
633Name_Not_Found:2006/03/19(日) 23:25:12 ID:???
>>631
どこですか?
634Name_Not_Found:2006/03/19(日) 23:27:09 ID:???
>633
検証サビス。
または基礎からやる直し。
635Name_Not_Found:2006/03/19(日) 23:33:02 ID:OHUzI0Q9
>>633
<dd>独立機構なところ
636Name_Not_Found:2006/03/20(月) 00:03:26 ID:???
DLを使って
■■ □□□□□
    □□□□□
■■ □□□□□
    □□□□□
としたいのですが、IEでのみ
■■
    □□□□□
    □□□□□
■■ □□□□□
    □□□□□
のようになってしまいます。
FireFox等では正常(意図通り)に表示されるのですが、
IEでも意図通りに表示させるにはどうすれば良いのでしょうか。

因みにソースです。

<!--html-->
<dl>
<dt>■■</dt><dd>□□□□□□□□□□</dd>
<dt>■■</dt><dd>□□□□□□□□□□</dd>
</dl>

/*CSS*/
dt{
margin:0;
width:4em;
float:left;
}
dd{
margin:20px 0 20px 4em;
}
637Name_Not_Found:2006/03/20(月) 03:06:18 ID:???
上下のマージンをなくし
パディングでやったらどうでしょうか
dt.ddどちらにもパディングで上下に20pxつければ
ずれないとおもいます
638Name_Not_Found:2006/03/20(月) 03:08:20 ID:???
思いっきり余談だが、この過疎板でこのスレは安定して伸びている。
それはそれで問題じゃないか。
仕様書を読むとか、曲がりなりにも検索するとか、
もっと大曲がりして表示させて確かめるとか、
そういうことを繰り返すほうが比較にならないほど早いはずなのに、
どういう積もりで見ず知らずの誰かに恭しく質問なんかするのだろうか。
ちょっとおかしいと思わないか、そういう人種たちを。
639Name_Not_Found:2006/03/20(月) 03:19:38 ID:???
>>638
器小さすぎ。
答えたい奴が答えてるんだから、別にいいだろ。
気に食わないならこのスレに来なければ良いこと
640Name_Not_Found:2006/03/20(月) 03:24:06 ID:???
正しい答え、ならな。
641Name_Not_Found:2006/03/20(月) 03:41:14 ID:???
いいじゃないのよ。
あんたに文句つけられる筋合いはないわよ。
とっととあっちへいってらしてよ。
あんたなんか嫌いよ。
642Name_Not_Found:2006/03/20(月) 04:24:31 ID:???
そうよ女の敵だわ!
643Name_Not_Found:2006/03/20(月) 05:36:01 ID:???
>>636
試してないが、vertical-alignで出来ないかな。
あとはfloatさせずdisplay:inline;指定するのもいいかも。
644Name_Not_Found:2006/03/20(月) 08:45:17 ID:???
>>634
別に間違ってないみたいですけど?
645Name_Not_Found:2006/03/20(月) 08:56:51 ID:???
>>642 から おっさんの臭いがする
646Name_Not_Found:2006/03/20(月) 08:57:01 ID:???
div〜divの中に書けるタグって何がある?
647Name_Not_Found:2006/03/20(月) 08:58:53 ID:???
たくさんある。
648Name_Not_Found:2006/03/20(月) 09:00:19 ID:???
┏━━━━━━━━━━━━━━━━

┃  ▼  見出しのタイトル

┗━━━━━━━━━━━━━━━━
な感じにしたいけど
┏━━━━━━━━━━━━━━━━
┃  ▼
┃     見出しのタイトル

┗━━━━━━━━━━━━━━━━
みたいに上に画像が行っちゃう・・・なんで?
▼は画像です。
649Name_Not_Found:2006/03/20(月) 09:01:09 ID:???
>>637
出来ました。
ありがとうございました。

>>643
>>637の方法で出来てしまったので試していませんが、
ありがとうございました。
650Name_Not_Found:2006/03/20(月) 09:05:58 ID:???
651Name_Not_Found:2006/03/20(月) 09:11:41 ID:???
>>650
説明不足でした背景の画像を真ん中にしたいのですが・・・
652Name_Not_Found:2006/03/20(月) 09:12:52 ID:???
background-position: 50%;
背景の画像を左から50%の位置ってこれであってますか?
background-position: 50% 0;
background-position: 50% auto;
って感じにしたほうがいいのでしょうか?
653Name_Not_Found:2006/03/20(月) 12:23:00 ID:???
centerひとつで
654Name_Not_Found:2006/03/20(月) 14:53:12 ID:???
>>653
すいません
60%の位置の場合は・・・
655Name_Not_Found:2006/03/20(月) 14:55:41 ID:???
656Name_Not_Found:2006/03/20(月) 14:56:47 ID:???
#main h4{
width: 350px;
border: solid 1px #000000;
}
#main .back{
text-align: right;
}
<div id="main">
<h4>見出し<a href="#hoge"><img src="./hoge.gif" class="back"></a></h4>
</div>


┏━━━━━━━━━━━━━━━━┓
┃ 見出し             hoge.gif ┃
┗━━━━━━━━━━━━━━━━┛
こんな感じにしたいのに
┏━━━━━━━━━━━━━━━━┓
┃ 見出しhoge.gif              ┃
┗━━━━━━━━━━━━━━━━┛
ってなってしまいます・・・
657Name_Not_Found:2006/03/20(月) 14:59:02 ID:???
background-position: 20px 50%;
左から20pxの位置の真ん中にしたい場合はこれでOK?
658Name_Not_Found:2006/03/20(月) 15:05:52 ID:???
>>656
#main h4{
width: 350px;
border: solid 1px #000000;
}
#main .back, .back img{
float:right;
width:20px;
}
<div id="main">
<h4><a href="#hoge" class="back"><img src="./hoge.gif" width="20" height="20"></a>見出し</h4>
</div>

>>657
しつこい。試せ。
659Name_Not_Found:2006/03/20(月) 15:12:56 ID:???
>>658
width:20px;
これはなぜ20pxなのでしょうか?
660Name_Not_Found:2006/03/20(月) 15:19:11 ID:???
>>659
画像の幅を20pxにしたから。非置き換え要素のfloatは幅を明示しないといけない。
またaとimgの両方にしたのはIEともじらの互換性のため。
661Name_Not_Found:2006/03/20(月) 15:40:40 ID:???
>>658
それ二行になるような・・・
662Name_Not_Found:2006/03/20(月) 17:44:34 ID:???
cssファイルに、どこのどんなスタイルか分からなくならないように、
各スタイルのかたまりごとに、

/* この中にどこの部分のスタイルかを書いています */

こんな感じで全角文字でコメントを入れていたのですが、
このコメントのある・なし(もしくは中の文字数?)によって、
IEだけ、そのコメント直下のスタイルが効かないことがあります。

コメントを書くときに約束事、使用不可文字などあるのでしょうか?
コメント内に「を」があると、ダメなような気がしています。
663Name_Not_Found:2006/03/20(月) 17:45:36 ID:???
>>662
文字コードちゃんと指定してて、保存もそれでしてるか?
できれば.htaccessでも指定してやるのがいいらしいけど。
664662:2006/03/20(月) 17:59:53 ID:???
>>663
@charset "utf-8";
を入れています。保存もしています。

いまも、いくつか試したのですが、
「を」があると、直下のスタイルが効かなくなるようです。
とりあえず「を」は使わず、他の文字にも注意してやってみます。

.htaccessでの指定方法はこれから調べてみます。
ありがとうございました。
665662:2006/03/20(月) 18:04:46 ID:???
何度もすみません。分かりました!

HTMLファイルは文字コードを指定して保存していたのですが、
cssファイルの方はやってませんでした。
さっそく、cssファイルを文字コード指定して保存したところ、
ちゃんとスタイルが効きました。

初歩的なミスですみません。
ありがとうございました。
666Name_Not_Found:2006/03/20(月) 21:43:08 ID:Q41tmvB5
FirefoxのDOMインスペクタでスタイルシートを検査すると下記のように *| という記述がたくさん出てくるのですが、 | 記号の意味はどういう意味ですか?

*|a, *|a:link, *|a:visited { color: rgb(32, 91, 0); text-decoration: none; }
*|h1, *|h2, *|h3, *|h4, *|h5, *|h6, *|em, *|strong { font-weight: bold; }
*|img { border: medium none ; -moz-box-sizing: content-box ! important; }
667 ◆9GXrYrkNaQ :2006/03/20(月) 23:54:04 ID:ZYQJvxQa
ttp://1st-train.net/ef65535/diary.cgi
このブログを使用し始めようと、試行錯誤しているのですが。
(このブログはCSSでデザインされてる)
デフォルトのスキンでも改造してもどうしても、IEで見ると記事が下に
ずれてしまいます。
しかし、Firefoxでは正常に表示されます。
どうやれば、FirefoxのようにIEでも正常にすることが出来るのでしょうか?
668Name_Not_Found:2006/03/20(月) 23:58:06 ID:???
>>667
フロートのバグだな
669Name_Not_Found:2006/03/21(火) 00:40:14 ID:???
画像の上に画像を重ねて表示させることは出来るでしょうか?
例えば、商品画像の上に「売り切れ」ロゴ画像を重ねたりなど。
ちなみに、この場合の商品画像にあたる画像は imgタグで表示されています。
670Name_Not_Found:2006/03/21(火) 00:46:17 ID:???
配置を弄れば表示できるけど、divに背景画像を指定して、中でimgタグを使うとか、そんな方法もとれる。
671Name_Not_Found:2006/03/21(火) 01:01:24 ID:???
>>670
そんなことしなくても、imgのbackgroundでええやん。
672Name_Not_Found:2006/03/21(火) 01:08:04 ID:???
それだと、z-indexがおかしくなるんじゃないっけ?
673Name_Not_Found:2006/03/21(火) 01:33:11 ID:???
>>672
z-index必要ないだろ。
尤も669の場合、HTMLをいじることが前提になるが。
674669:2006/03/21(火) 02:26:05 ID:???
いろいろありがとうございます。
>>670
divに背景は、例の場合の商品画像を背景にする方法ですよね。
この場合、商品画像をaタグでリンクにする等が出来ないので
二の足を踏んでます。

>>671
imgのbackgroundで出来るのでしょうか?  この場合は imgタグに
売り切れ画像で、背景に商品画像ということでしょうか?
他にも、透過とか色々やってはみるもののなかなか上手く行きません。

>>673
はい、htmlの変更は可能です。
最終的な理想としては、htmlソースの方は
<img src="xxx.jpg"> ←取扱商品画像
<img src="xxx.jpg" class=soldout> ←売り切れ商品画像
こんな感じになるといいな、と考えています。(でなくても構いませんが)
675Name_Not_Found:2006/03/21(火) 02:29:33 ID:???
>>674
そういうHTMLにしたいんだったら、
やっぱりpositionでやるしかないと思う。
その他がどういうマークアップになるのかわからないが、
relativeとabsoluteを使ってz-indexでz軸の並び順を設定。
676Name_Not_Found:2006/03/21(火) 02:34:11 ID:???
個人的にだが、ホームページビルダーのせいで
z-indexにはなんとなくアレルギーがあるなぁ。
677Name_Not_Found:2006/03/21(火) 02:45:21 ID:???
すみません。質問です

<div id="menu">
<ul><H2>メニュー</H2>
<li><a href="index.html">TOP</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<ul>
</div>

<div id="menu">
<ul><H2>メニュー</H2>
<li><a href="index.html">TOP</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">Menu</a></li>
<ul>
</div>

こように<div id="menu">を2つ使うのはダメなのでしょうか?
678Name_Not_Found:2006/03/21(火) 02:46:11 ID:???
ダメ。
IDは1つにしか使っちゃいけない。
そういう時はclass属性を使う。
679Name_Not_Found:2006/03/21(火) 02:58:54 ID:???
box-width:480px;と設定しても480pxにならずautoになるんですが、どうしてでしょうか?
680Name_Not_Found:2006/03/21(火) 03:04:06 ID:???
>>679
そりゃCSS3で実装されるかもしれんってプロパティだからな。
681Name_Not_Found:2006/03/21(火) 03:13:16 ID:???
>>680さん、ありがとうございます。
これと同様の働きをするプロパティはないのでしょうか・・・・?
Operaとかでみたら横幅IEのときと全然違います。テンプレにのってるサイトもみたのですが・・・・
box-widthの方法しかわかりませんでした
682Name_Not_Found:2006/03/21(火) 03:22:51 ID:???
質問です。

やりたいこと:

 ――――――――――――――――――
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|                    |   |
|_________________

右(メニュー)幅150px、右隅固定
左(コンテンツ)可変幅+overflow:scroll適用

フレームを使えば簡単なんだけど、CSSで解決出来ませんか?
683Name_Not_Found:2006/03/21(火) 03:37:07 ID:???
>>681
標準モードにすればIEも同じ挙動になるから。
個人的にだが、IEを基準にレイアウトするのはやめた方がいいと思う。

>>682
CSSでは段組みとかカラムとか呼ばれてるけどね。
テンプレ見てみなされ。
684Name_Not_Found:2006/03/21(火) 04:00:07 ID:???
>>683
標準モードって閲覧者個人の設定ですよね?
それとも、こちらから設定できるのでしょうか?
685Name_Not_Found:2006/03/21(火) 04:05:52 ID:???
>>684
宣言だよ。メンドウだから。。
互換
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
標準
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
686Name_Not_Found:2006/03/21(火) 04:08:11 ID:???
>>685さん。ありがとうございます。
何故か自分は交互のほうを書いてました。
ありがとうございました!
687Name_Not_Found:2006/03/21(火) 04:17:05 ID:???
<!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-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サイトの名前</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="text.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
で標準モードになってるはずなんですが、padding-left の数値分横幅が増えるんですが・・・
どこか間違ってますか?
688Name_Not_Found:2006/03/21(火) 04:19:33 ID:???
増えるだろ?
689Name_Not_Found:2006/03/21(火) 04:24:05 ID:???
>>688さん。
IEでは増えて、Operaでは増えないんです。
どうにかできないんですか?
690Name_Not_Found:2006/03/21(火) 04:27:52 ID:???
ソースなきゃわからんよ
691Name_Not_Found:2006/03/21(火) 04:48:08 ID:???
あれ。すみません。自分が間違ってました。

標準モードなら
IE、Opera・・・・padding-leftの数値分widthに加算

標準モードではなかったら
IEは加算されて
Operaならpadding-leftの数値はwidthに加算されない

ってことなのでしょうか?
692Name_Not_Found:2006/03/21(火) 04:52:25 ID:???
ごめんなさい。上のレスは忘れて下さい。
全て自分が悪かったです。全て自分のcssが間違ってました。
スレ汚しごめんなさい。お手数かけた人もすみませんでした
693Name_Not_Found:2006/03/21(火) 06:01:05 ID:???
#left {
width: 160px;
float:left
border: 1px solid #000000;
}
#right {
width: 540px;
float:left
border: 1px solid #000000;
}

<div id="left">
あああああああああああああああああああああああああ
</div>
<div id="right">
いいいいいいいいいいいいいい
</div>

としてるんですがrightがleftボックスの下にいっちゃいます。
どうして⇒にいかないのでしょうか?
694Name_Not_Found:2006/03/21(火) 06:02:56 ID:???
事故解決しました
; が抜けてました
695Name_Not_Found:2006/03/21(火) 08:09:45 ID:???
Copyright (C) Your Site Name, 2005 All right reserved.
の2005ってどういう意味ですか?
2005年から有効?
2005年まで有効?
696Name_Not_Found:2006/03/21(火) 08:21:37 ID:???
2005からスレ違い
697Name_Not_Found:2006/03/21(火) 08:51:20 ID:???
スレ違いにも関わらずありがとうございました!
698Name_Not_Found:2006/03/21(火) 12:06:58 ID:???
例えばこんな場合、実際のwidthは502pxになるんですか?
.que {
width: 500px;
border: 1px solid #000000;
}
699Name_Not_Found:2006/03/21(火) 12:44:56 ID:???
CSSの本来の実装だとそうなる。
だけどIEだけは中身498、border1*2って表示する。
700Name_Not_Found:2006/03/21(火) 13:34:47 ID:???
ありがとうございます
701Name_Not_Found:2006/03/21(火) 16:21:41 ID:XNilTTsw
質問してよろしいでしょうか。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

↑これらを入れると『font-size:x-small;』がFireFox(マック)で
本来より少し大きめに表示されてしまうのですが、
これってなにか理由があるのでしょうか。
702Name_Not_Found:2006/03/21(火) 16:31:05 ID:???
なにをもって「本来」とするのか?
703Name_Not_Found:2006/03/21(火) 16:45:13 ID:???
人間本来汗とアルデヒド
704Name_Not_Found:2006/03/21(火) 16:47:17 ID:???
>>701
標準モードでないと文字の大きさの計算がずれるバグがあった希ガス。
705Name_Not_Found:2006/03/21(火) 17:19:35 ID:???
>>704
strictの宣言でバグがあるということですか…。
それは仕方ないですね。
回答ありがとうございます。
706Name_Not_Found:2006/03/21(火) 17:24:53 ID:???
>>705
違う。Strictの宣言がないとバグがある、だ。
707Name_Not_Found:2006/03/21(火) 17:26:20 ID:???
バグってより、互換モードはQuirks(奇癖)だから、正格で
必要はないったらないんだが・・・なぁ?
708Name_Not_Found:2006/03/21(火) 17:39:10 ID:???
>>706
では、strictの宣言入れてる自分のほうの表示が正しい、
という解釈でよろしいのでしょうか。

ただ、CSSのやり方について書かれているサイトが宣言が抜けていて、
『x-smallだとこの大きさに見えます』
と説明されていたので、自分のやり方がまずいのかと心配で…。
709Name_Not_Found:2006/03/21(火) 17:55:16 ID:???
>>708
MacFxの話じゃないが、font-size関連で似たような記事があったので。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_example.html#font-size-behavior
ていうかそんな宣言もないサイトは個人的には信じないことにしている。
そのほうが精神安定上いい希ガス。
710Name_Not_Found:2006/03/21(火) 18:13:22 ID:???
>>709
サイト情報ありがとうございます。
なんか分かったような分からないようなw

とにかく宣言があるほうが正しいと分かったので一安心です。
711Name_Not_Found:2006/03/22(水) 00:13:24 ID:???
div.back{
background-image: url("./bg.jpg");
background-attachment: fixed;
background-position:right bottom;
background-repeat: no-repeat;
border-left: 1px ridge red;
border-right: 1px ridge red;
width: 80%;
height: 100%;
background-color: white;
text-align: left;
}

〜略〜
</HEAD>
<BODY>
<div class="back">
hogehoge・・・
とかのメインコンテッツ
</div>
</BODY>
</HTML>

こんな感じに全てを囲ってて
bg.jpgを画面の右下に表示させようとしていますが
このやり方だとページの右下に表示されてしまいます。
どなたかよい方法を教えてください!
712Name_Not_Found:2006/03/22(水) 00:19:49 ID:???
>bg.jpgを画面の右下に表示させようとしていますが
>このやり方だとページの右下に表示されてしまいます。
させようとしてることができているように書いてあるようにしか見えないのは俺だけか?
713Name_Not_Found:2006/03/22(水) 00:35:37 ID:???
IE Opera もじら で表示確認をしていれば、NNでもレイアウトは崩れる ってことはありませんよね?
(標準モード)
714Name_Not_Found:2006/03/22(水) 00:36:35 ID:???
背景固定したいって事?
715Name_Not_Found:2006/03/22(水) 00:41:36 ID:???
>>713
バージョンによっても違う。NNは4と6以降で別物。
また最新のN7.1も、一昔前のMozillaだからCSS2.0対応で若干違う。
最新MozillaはCSS2.1対応。だから保証できないし、実際違う部分もあった。
716Name_Not_Found:2006/03/22(水) 00:41:41 ID:???
>>713
古いネスケじゃなければ多分大丈夫。
717Name_Not_Found:2006/03/22(水) 00:44:00 ID:???
>>715-716さん、ありがとうございます。
718Name_Not_Found:2006/03/22(水) 00:50:31 ID:???
>>714
でしょね
719Name_Not_Found:2006/03/22(水) 00:54:28 ID:???
なんで714と718は同じ下一行が空いてるのかな〜
720Name_Not_Found:2006/03/22(水) 00:59:06 ID:Yunm48LN
言っとくが>>714=716だが、>>718は別の人だぞ。
一応ID表示しとく。
721Name_Not_Found:2006/03/22(水) 01:11:23 ID:???
ネタにマジレスさr
722Name_Not_Found:2006/03/22(水) 01:16:37 ID:???
そんなネタじゃ笑えんよ
723Name_Not_Found:2006/03/22(水) 01:24:50 ID:???
つまらなくてごめんなさい!
生きててごめんなさい!
CSSスキーでごめんなさい!
724711:2006/03/22(水) 10:11:05 ID:???
>>712
hogehoge・・・
とかのメインコンテッツ

の部分が長くなるって数ページになると
ページの右下に壁紙が表示されてしまいます。
私が表示させたいのは画面の右下です!!
725711:2006/03/22(水) 10:29:24 ID:???
>>711 でできること
http://zetubou.mine.nu/itoshiki/nozomu/zetubou21616.jpg

やりたいこと
http://zetubou.mine.nu/itoshiki/nozomu/zetubou21617.jpg
スクロールが真ん中の時でも画面の右下に表示したい
726Name_Not_Found:2006/03/22(水) 10:41:05 ID:Yunm48LN
背景画像固定はスクロールがもっさりするから嫌い。
727Name_Not_Found:2006/03/22(水) 10:59:53 ID:???
>>725
>>711の質問では誰もが>>712だと思ったよ。ヒステリーは勘弁してくれ。
divじゃなくてbodyに指定すれば出来るけど、
画像によっては右方向の位置調整がメンドウだな。
あとまあ>>726に同意。
728Name_Not_Found:2006/03/22(水) 11:06:29 ID:???
背景画像固定ってもっさりするのか?
初耳だ。自分の環境ではなったことない
729Name_Not_Found:2006/03/22(水) 11:07:00 ID:???
>>727
画面とページをちゃんと使い分けてるから漏れはわかったが・・・
730Name_Not_Found:2006/03/22(水) 11:08:40 ID:???
>>729
じゃあ答えてやれよ・・・
731Name_Not_Found:2006/03/22(水) 11:25:05 ID:???
>>730
スタイルの知識がない
732Name_Not_Found:2006/03/22(水) 11:27:27 ID:???
壁紙を並べて表示させたのですが
壁紙と壁紙の間って指定できないのでしょうか?
733Name_Not_Found:2006/03/22(水) 11:34:15 ID:???
>>732
並べてってのは?
repeatの間隔は調整出来ないよ。
734Name_Not_Found:2006/03/22(水) 12:57:09 ID:???
[1/2]
<style type="text/css">
<!--
img.fl {float:left ;margin:3px 5px 0px 5px;border: 0px; }
.test p { margin: 10px 0px 10px 155px ; /*IE以外のnetscape.firefox.operaにしか効かない→*/min-height:60px;}
.test dd { margin: 2px 0px 10px 0px; border-bottom: 2px #000000 solid;}
.test dt {color:#FFFFFF; PADDING: 3px 3px 3px 15px; MARGIN: 2px 2px 2px 2px; BACKGROUND: #ffaaee; BORDER-TOP: #ffcc66 1px solid; BORDER-RIGHT: #ffcc66 1px solid; BORDER-BOTTOM: #ffcc66 1px solid; BORDER-LEFT: #ffcc66 1px solid; font-weight: bold;}
-->
</style>

<div class="test">
<dl>
<dt>dtdt</dt>
<dd><img src="test.gif" alt="test" width="150" height="60" class="fl"><p>ddddテスト</p></dd>
<dt>dtdt</dt>
<dd><img src="test.gif" alt="test" width="150" height="60" class="fl"><p>ddddテスト</p></dd>
</dl>
</div>

735Name_Not_Found:2006/03/22(水) 12:59:45 ID:???
[2/2]
※意図している表示。netscape、firefox、operaでの表示。<p>のmin-height:60px;が有効なので一応まともに表示される。
[dtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdt]
■■■■ <p>ddddテストddddテストddddテスト</p>
■写真■ 
■■■■ 
---------------------------------------- ←dd の border-bottom: 2px #990000 solid;


※IEでの表示。min-height:60px;が効かない。これを意図している形でIEにて表示させたい。
[dtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdtdt]
■■■■ <p>ddddテストddddテストddddテスト</p>
--写真---------------------------------- ←dd の border-bottom: 2px #990000 solid;
■■■■ 

cssの部分をどのように変更すればよいか教えてください。。。
736Name_Not_Found:2006/03/22(水) 13:55:24 ID:???
>>733
そうですか・・・
BODYに壁紙二枚も指定できないですよね??
これだけ探して見つからないんですから・・・
737Name_Not_Found:2006/03/22(水) 13:59:17 ID:???
>>735
いろいろ方法はあると思うが、自分ならこうするってやつ。
例ではdlが1つになってるが、それぞれdl(例の場合2つ)にして、
dlにborder-bottomとheightを指定。
それからdl内にpはヘンだから削除。
738Name_Not_Found:2006/03/22(水) 14:01:01 ID:???
>>736
テンプレくらい見ましょう。>>8のQ7。
739735:2006/03/22(水) 14:54:39 ID:???
>>737
アドバイスありがとうございます。やってみます。

>それからdl内にpはヘンだから削除。

了解です。
自分も今、スタイルシート事典を読んでいて
変であることに気がつきました…。
740Name_Not_Found:2006/03/22(水) 14:57:18 ID:???
んなこたない。
dl直下にpだったら違反だけど
dd内にpが出ることは充分考えられる。
741Name_Not_Found:2006/03/22(水) 15:42:09 ID:???
>>740
どんな要素も入れちゃダメなんじゃなかったっけ??
742Name_Not_Found:2006/03/22(水) 15:44:05 ID:???
>>740
dl - dt|dd
dt - inline
dd - flow(block|inline)

ddはp入れられる
743742:2006/03/22(水) 15:44:37 ID:???
アンカー間違えた>>741だった
744Name_Not_Found:2006/03/22(水) 16:16:30 ID:20kF0+Dy
質問です。

<table>
<tr>
<td>
<ul>
<li>1</li>
<li>2</li>
</ul>
</td>
<td>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</td>
</tr>
</table>

HTMLをこう書いたときに、ulがtdの中で縦中央に配置されてしまいます。
これをtdの中で上の方に配置するにはCSSでどう書けばいいんでしょうか?
うまく説明できないんですが。。

td {
vertical-align: top;
}
だとダメでした。
745Name_Not_Found:2006/03/22(水) 17:12:47 ID:9WJvmjty
テーブルのスクロールバーはCHROMAで透過できるけどBODYではうまくいかない
方法がありますか?
746Name_Not_Found:2006/03/22(水) 17:21:05 ID:R/+RH28S
助けてください。

例えば
<div id="abc">
<div class="123"><a href="/123/" title="123"></a></div>
<div class="456"><a href="/456/" title="456"></a></div>
<div class="789"><a href="/789/" title="789"></a></div>
</div>

の場合で、class 123,456,789のぞれぞれのcssに#でabcのidが入っています。
この場合のidの意味って何かあるのでしょうか?

#abc .123 {
margin: 0px 4px 0px 0px;}

#abc .456 {
margin: 26px 0px 0px 0px; }

#abc .789 {
margin: 26px 0px 0px 0px; }
747Name_Not_Found:2006/03/22(水) 17:29:56 ID:???
>>746
明らかにスタイルシートの基礎が理解できてない
748Name_Not_Found:2006/03/22(水) 17:35:09 ID:???
ブラウザの横幅100%ってウインドウの端から端までなのに
縦の100%ってブラウザの端から端までではないんだね・・・(´・ω・`)ショボーン
あと、テキストBOXのスクロールバーを透明にするやり方あったと思うんだがどうやるんだっけ?
749Name_Not_Found:2006/03/22(水) 17:35:11 ID:???
意味が無いと思うなら外せばいいんじゃない?
750Name_Not_Found:2006/03/22(水) 17:36:42 ID:???
>>744
そのソースコピったが、それでできた。
751Name_Not_Found:2006/03/22(水) 17:37:22 ID:???
>>748
高さは内容量で決まる。CSS以前の問題。
752748:2006/03/22(水) 17:38:37 ID:???
>>751
THX


<span class="update">
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
hogehoge<BR>
</span>
.update{
width: 100%;
height: 120px;
overflow: auto;
}

テキストボックスはできるけどこういうやつは透明化できないのか・・・
753Name_Not_Found:2006/03/22(水) 17:40:54 ID:???
754Name_Not_Found:2006/03/22(水) 17:42:06 ID:???
>>746
ttp://www.w3.org/TR/CSS21/selector.html#q1

「#abc .123」 っていうセレクタはは「IDがabcの要素内でクラス名が123」ってこと。
だからそれ以外の場所で class="123" ってなってるものがあっても適用されない。

とりあえず ttp://www.w3.org/TR/CSS21/ をまず見なさい。
755Name_Not_Found:2006/03/22(水) 17:43:19 ID:???
>>752
それ以前の問題。
spanはインライン要素!
756Name_Not_Found:2006/03/22(水) 17:43:53 ID:R/+RH28S
746です。勉強不足でした。
リンク先をみて勉強してみます。ありがとうございました!
757Name_Not_Found:2006/03/22(水) 17:44:40 ID:???
ここ最近の香具師にプレゼント。
仕様書見る気がないんだったらこっち見ろ。

ttp://hp.vector.co.jp/authors/VA022006/
758Name_Not_Found:2006/03/22(水) 18:16:38 ID:???
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>

たとえば上のようなリストを横並びで表示したいんですが、
各項目の間を、 - (ハイフン)などで区切りたい場合
どのようにしたらいいですか?(横並びにする方法自体は理解してます。)

759Name_Not_Found:2006/03/22(水) 18:28:40 ID:???
>>758
contentプロパティ。
IEが対応してないからJSで。
それができないんだったら背景画像としてハイフン。
760Name_Not_Found:2006/03/22(水) 21:18:49 ID:???
divでかこってあるところをposition: relative; し

そのなかのものを
position: abusolute;
left: 0;
bottom: 0;
としたのですが、IEだとうまくdivでかこった範囲内でabsoluteされないのですが
なにか対処法はありませんでしょうか?
761Name_Not_Found:2006/03/22(水) 21:20:46 ID:???
Divの親もposition: relative; にしても無理?
762Name_Not_Found:2006/03/22(水) 21:25:59 ID:???
>>760
あー・・・IEはなんか間違った動作する組み合わせがあった希ガス。
因みにabsoluteの動作自体を誤解してる香具師が多いんだが、
親要素からの絶対配置だぞ?
763Name_Not_Found:2006/03/22(水) 21:26:22 ID:???
むりですね・・

なぜかかなりはみでた位置にabsoluteされます・・
764Name_Not_Found:2006/03/22(水) 21:45:02 ID:???
親要素=今の場合はdiv
ですね

でもやはり、ボーダーでかこってみても、あきらかにはみ出たいちに配置されます

Firefoxだとdivないのleft bottomになるのですが。
765Name_Not_Found:2006/03/22(水) 21:58:33 ID:???
>>764
ソース出さないと誰も再現出来ない。
一人でぶつぶつ言いたいだけならいいんだが。
766Name_Not_Found:2006/03/22(水) 22:09:44 ID:???
とりあえず親の親も全部position: relative;やってみれ
bodyもposition: relative;

ごめん 適当
767Name_Not_Found:2006/03/22(水) 22:18:39 ID:???
<div>
<h3>テスト</h3>
<p>テスト</p>
<p>テスト</p>
<p>テスト</p>
<ul>
<li>テスト</li>
</ul>
</div>

div {
position: relative;
border: 1px solid red;
margin: 0 auto;
}

ul {
position: absolute;
left: 0;
bottom: 0;
}
768Name_Not_Found:2006/03/22(水) 22:19:10 ID:???
>bodyもposition: relative;
これだけはやめとけ、
マシンパワーの少ないブラウザクラッシュさせるだけだ
769Name_Not_Found:2006/03/22(水) 22:19:22 ID:???
これでうまく動作しません
770Name_Not_Found:2006/03/22(水) 22:20:20 ID:???
margin: 0 auto;
はよけいでした・・。
771Name_Not_Found:2006/03/22(水) 22:21:26 ID:???
>>769
誰だよ。
772Name_Not_Found:2006/03/22(水) 22:25:03 ID:???
>>766
なぜかワロタ
773Name_Not_Found:2006/03/22(水) 22:26:40 ID:???
質問者はIDを出すこと!!
774Name_Not_Found:2006/03/22(水) 22:38:12 ID:???
>>767
ulのabsoluteがleftとbottomだけど、leftとtopで指定するべきなんでは。
あとdivの高さを指定すると。
775Name_Not_Found:2006/03/22(水) 22:44:13 ID:???
bottomの指定だと無理ですかね?

高さは指定せず文章が追加されたときでも対応できるようにしたいのですが
topの指定だと文章量がかわってしまったときにうまく表示されないのでどうしたものかと
776Name_Not_Found:2006/03/22(水) 22:45:10 ID:???
さんなものを絶対配置するな!
777Name_Not_Found:2006/03/22(水) 22:49:27 ID:???
どういう時に div class , div id , span とかを使い分けるのかがいまいちわかりません。
エロい人教えてください
778Name_Not_Found:2006/03/22(水) 22:50:18 ID:???
順不同リストを1個だけボトムへ・・・・

 思いつかん
779Name_Not_Found:2006/03/22(水) 22:50:19 ID:???
>>775
relativeに対するabsoluteの基点はrelative要素の左上だから。
結局>>776って事になる。
780Name_Not_Found:2006/03/22(水) 22:51:34 ID:???
んーなるほどわかりました。
781Name_Not_Found:2006/03/22(水) 22:51:58 ID:???
>relativeに対するabsoluteの基点はrelative要素の
親要素だから。
って言えよ・・
782Name_Not_Found:2006/03/22(水) 22:55:41 ID:???
>>781
何言ってるのかわからない。
783Name_Not_Found:2006/03/22(水) 22:57:55 ID:???
>>782
仕様再読破
784Name_Not_Found:2006/03/22(水) 22:58:52 ID:???
>>783
やだ。
785Name_Not_Found:2006/03/22(水) 23:04:38 ID:???
>>781
誤解してるようだが、親要素がrelativeでない場合はちがうよ?
質問者がぜんぜんわかってないようだから、回りくどく説明したまで。
786Name_Not_Found:2006/03/22(水) 23:13:37 ID:???
>773
質問者はsageなくていい、ってほうがわかりやすいかと
787Name_Not_Found:2006/03/22(水) 23:14:54 ID:???
>>785
当り前だ。
788Name_Not_Found:2006/03/22(水) 23:20:31 ID:???
尤もそれはIEがバグ抱えのせいなんだがな・・
789Name_Not_Found:2006/03/22(水) 23:31:59 ID:???
IE7、β2の例のヤツで開発終了だって・・・・ハハハ・・・・




orz
790Name_Not_Found:2006/03/22(水) 23:39:11 ID:???
>>777
class→なんらかの共通項をもつ要素にアクセスしたいときに使う。
id→ある要素に個別の識別子を与えたいときに使う。
※CSSに限った話じゃないです。

div→要素群をひとまとめにしたいときに使う。
span→インラインレベルのものをなんとなく括りたいけど、
とくに該当する要素がない時に使う。
※CSSとはあまり関係ありません。
791Name_Not_Found:2006/03/22(水) 23:48:26 ID:???
>>789
ソースplz
まあMSならそういわれても不思議ではない気がするが。
792Name_Not_Found:2006/03/22(水) 23:57:45 ID:???
793Name_Not_Found:2006/03/23(木) 00:07:17 ID:???
>>768
いつの時代の話してんだよw
794Name_Not_Found:2006/03/23(木) 00:08:26 ID:???
>>793
悪かったな、俺もだよ
795Name_Not_Found:2006/03/23(木) 08:25:42 ID:???
すみません。質問です。
縦に割るレイアウトみたいな感じで
左側に<div id="left">  というボックス。
右側に<div id="right">  というボックス。
を作り、縦の長さが長くなったほうに、heightを合わせたいのですがどうすれば良いでしょうか?

たとえば、
left が文章の書きすぎでheighが大きくなって200pxになったら
そにあわせて、rightのheightも200pxにしたいのです。
796Name_Not_Found:2006/03/23(木) 08:29:59 ID:???
>>795
無理。背景でそれっぽくごまかすしかない。
797Name_Not_Found:2006/03/23(木) 08:38:09 ID:???
>>796さん。ありがとうございます。
自分も背景で誤魔化すことを考えたんですが・・・
leftとrightの境目に線をひきたいのですが、やっぱりこれも無理ですよね?

これをするにはテーブルで囲むしかないのでしょうか?
798Name_Not_Found:2006/03/23(木) 08:48:04 ID:???
>>797
絶対に長いほうが決まってるなら、
そっちのボックスの左だか右だかのボーダーで。
決まってないんだったら、コンテナボックスの背景画像を線にする。
799Name_Not_Found:2006/03/23(木) 09:08:06 ID:???
>>798さん。ありがとうございます。
やっぱり背景画像で誤魔化すしか、ありませんか・・・
css3ならこういうのできるようになるのかな・・・・・
ありがとうございました
800Name_Not_Found:2006/03/23(木) 09:50:28 ID:???
>>799
ていうか、だからHTMLというか文書の問題として
内容量で高さが決まらなかったら逆に問題でしょうが。
801Name_Not_Found:2006/03/23(木) 09:59:07 ID:???

日本語でおk
802Name_Not_Found:2006/03/23(木) 10:07:06 ID:???
>>801
仕様読み直せ。
803Name_Not_Found:2006/03/23(木) 11:32:54 ID:Op8QPNzU
質問させてください。
テーブルの背景色を列ごとに変えようと
tr {
font-size: medium;
text-align: center;}
.1 {
background-color: #99FF99;
}
.2 {
background-color: #CCFFCC;
}
.3 {
background-color: #99FFCC;
}
とスタイルシートをヘッダーに書き込み、
同じページ内に
<table width="90%" border="1" bordercolor="#000000">
<tr class="1">
<td> </td>
</tr>
<tr class="2">
<td> </td>
</tr>
<tr class="3">
<td> </td>
</tr>
</table>
と打ち込んだのですが、背景色が表示されません。
どうしたらいいでしょうか。
よろしくお願いいたします。
804Name_Not_Found:2006/03/23(木) 11:34:07 ID:???
sage進行でしたか?
だったら申し訳ありません。
805Name_Not_Found:2006/03/23(木) 11:47:43 ID:???
スタイルシートをこうしてみて。

.1 td {
background-color: #99FF99;
}
.2 td {
background-color: #CCFFCC;
}
.3 td {
background-color: #99FFCC;
}
806Name_Not_Found:2006/03/23(木) 12:04:34 ID:???
>>803
クラス名に数字から始まる単語はNG。
807Name_Not_Found:2006/03/23(木) 12:47:31 ID:???
>>805-806
ご教授感謝です。その通りにやってみて、また報告させてもらいます!
808Name_Not_Found:2006/03/23(木) 13:31:44 ID:???
先ほど質問したものです。
言われたとおりに修正すると背景色が現れました。
どうもありがとうございました。>>805-806
809Name_Not_Found:2006/03/23(木) 13:37:06 ID:???
>>805
恥ずかしいぞ、おい。
810Name_Not_Found:2006/03/23(木) 14:46:33 ID:???
FirefoxやOperaで自分のサイトを見ると

h4{
letter-spacing: 0.2em;
color: #000000;
padding: 5px 1em 5px 2em;
margin: 10px 10px 1px 1px;
width: 625px;
border: solid 1px #000000;
white-space: nowrap;
<h4>てすと</h4>

こういうやつのBORDERラインの横幅が明らかに長くなってた・・・
なんでですか??
811Name_Not_Found:2006/03/23(木) 14:52:12 ID:SD9f8nRx
IEの独自解釈の場合
widthにborderやmarginやpaddingを含む→中身+padding+border+margin=width
正しい解釈の場合
widthにはborderとmarginとpaddingは含まない→中身=width 全体の幅=width+padding+border+margin
812Name_Not_Found:2006/03/23(木) 14:58:44 ID:???
>>811
標準モードで作れば直るんですか?
813Name_Not_Found:2006/03/23(木) 15:03:10 ID:???
>>811
先生!どうすれば直るのですか??
814Name_Not_Found:2006/03/23(木) 16:47:08 ID:???
つか、他にも突っ込みどころが萬斎
815Name_Not_Found:2006/03/23(木) 16:58:30 ID:???
ちょっと聞きたいのですが10pxの文字って読みにくいですか?
自分の環境でも読みにくいことはありませんし、よく10pxに固定してるサイトも見かけます。
某ブラウザも9px以下のサイズの文字は強制的に大きくするように標準でなってます。
皆さんの環境ではどうなのでしょうか?
816Name_Not_Found:2006/03/23(木) 17:10:04 ID:???
>>815
読みにくいかどうかは、アクセスした人の環境や視力などによって異なる。
固定しない方が吉。
817Name_Not_Found:2006/03/23(木) 18:37:02 ID:???
10pxなんて絶対駄目駄目!
バナーとかコピーライトとか、無意味なイラストとか
絶対読まない情報価値の無い場所とか
気取った雰囲気メインのサイトとか
読んで貰いたくないけど、データとして載せるだけのとことか
文字として扱う必要の無いとことか

だから本文は14pxにして!12でもブラウザによっては小さすぎる
まぁ、CSSはテキストへ非適用、文字サイズ最大にして見てるけどな

つーか、使い所次第だろ?
818Name_Not_Found:2006/03/23(木) 19:05:56 ID:???
>>817
本文が14pxでかいなぉぃ

モニタ小さいわりに解像度をでかくしてる馬鹿だろ?ww
819815:2006/03/23(木) 19:08:50 ID:???
>>817
本文が14pxってでかいですねw
私は、本文を12pxにしてます。
%で指定に変えようかと思ってるのですが
100%だと何を基準にしてるのかがいまいちわかりません。
どなたか教えてください。
820Name_Not_Found:2006/03/23(木) 19:36:29 ID:???

でかいモニターのPCに買い換えてからまめ字がうざくなった
821Name_Not_Found:2006/03/23(木) 19:47:31 ID:???
>>819
100%がどれくらいかはブラウザによっても違うと思われます。
IEはモジラ系に比べて大きい。
うちだとNNはやたら小さい。

某所でフォントサイズの指定はどの単位で指定すべきか?って論議してたけど、%がベストみたい。
ピクセルとかの絶対指定をしてしまうと閲覧者の側で変えたくても変えられなくなるので好ましくないと。

つまり、文字サイズによってレイアウトが崩れるような作りにするな、って事ですかな。
822Name_Not_Found:2006/03/23(木) 20:21:09 ID:???
px固定するなら16pxにしている。
%なら105%か110%ぐらい。

閲覧者はデザインじゃなくて字を読みにきてると思うから字を大きくしてる
823Name_Not_Found:2006/03/23(木) 20:29:20 ID:???
情報詰め込みたいトップページなんかは小さ目でもいいだろ
結局>815はどんなサイト作るんだ?
単位うんぬん話しても無意味なきがするぅ
824Name_Not_Found:2006/03/23(木) 20:29:55 ID:???
>>819
でかくねーよ、俺の最低フォントは24px。
だから固定されると非常に辛い。
825Name_Not_Found:2006/03/23(木) 20:31:32 ID:???
本文のフォントサイズは全く指定しないのが最善
見出しとかは本文に対する相対比で適当な大きさに指定する
826Name_Not_Found:2006/03/23(木) 20:53:01 ID:???
フォントサイズっちゅうのは、そこのPC環境によって
利用者が自分で設定しているサイズがある。 弱視の人なんかは
とんでもなく大きい文字を標準にしてたり。

だからサイズは、できるだけ%で相対指定して、環境標準サイズを
生かしてやるべき。
827Name_Not_Found:2006/03/23(木) 21:01:02 ID:???
とはいえ85%で固定とかされてても豆字固定と大差ないと思うが・・
828Name_Not_Found:2006/03/23(木) 21:01:24 ID:???
>825
適当ってのも最近疑問なわけよ
ぶっちゃけ、見出しは本文より小さくていいような気がする
本文は見やすくデカくしたいのに、見出しがそれよりデカイとウザイ
デザイン的にどうよ?って話もあるが、
なんつーかさ、webって情報がほしいわけだから、
重要なもの程デカクして欲しい
「あらすじ」とか「おいしい作り方」なんて見出しがデカくても意味ねーしな
さらに、見出しはグラフィカルにしてある方が、
本文と区別がついて検索率が上がる
829Name_Not_Found:2006/03/23(木) 21:01:36 ID:SD9f8nRx
>>824
さすがにそれはモニタが小さいのに解像度上げすぎてるんじゃね?
と思ったけど、よく見たらpxなのな。
16ptと24pxじゃ大体同じ文字サイズなのでやや大きめぐらいってとこか。

俺はptで設定がいいと思ってるんだが、みんなpx指定してるものなのか?
830Name_Not_Found:2006/03/23(木) 21:05:39 ID:???
>>828
一般的に見て「見出しはデカいほうがわかりやすい」という傾向はありそうだから
合わせるべきとは思うがね。

>>829
ptだろうがpxだろうが、固定がイクナイ!
831行間の事も考えてやってください:2006/03/23(木) 21:30:53 ID:???
>一般的に見て「見出しはデカいほうがわかりやすい
まーね。ただ、欲しい情報へ直接アクセスできる(リンクや検索から飛んでくる)から、
本のようにパラパラとめくって見出しを探す必要がないってのもある
とはいえ、偏った考え方ってのは認めるw
内容、ジャンプ率、行間やレイアウトで適切さは変わってくるしね
832Name_Not_Found:2006/03/23(木) 21:33:45 ID:???
>>931
一ページ内の見出しの数にもよると思われ
833Name_Not_Found:2006/03/23(木) 22:02:35 ID:SD9f8nRx
俺は見出し小さくてもいいと思うよ。
その分、色つけたり、borderつけたり、画像つけたりして目立たせることはできるから。
というか、そういうことすると逆に文字大きいと目立ちすぎて邪魔になる。
834Name_Not_Found:2006/03/23(木) 22:03:36 ID:???
というか、さすがにそろそろスレ違い。
835Name_Not_Found:2006/03/23(木) 22:04:05 ID:???
>>820
解像度でかい割りにモニタ小さいだろ?wwwww
836Name_Not_Found:2006/03/23(木) 22:10:38 ID:???
確か以前こんなサイトを見た気がする
小←文字サイズ調整→大
ってなってて、小を押すと文字が小さく、大を押すと大きくなる
あれどうやってるんだろう?ってかサイトが見つからんorz
837Name_Not_Found:2006/03/23(木) 22:11:47 ID:???
16px以上の文字が見にくいって視力悪いのか?
16pxの文字より小さな画像のボタンとかってかなり多いかと思うんだけど・・・
838Name_Not_Found:2006/03/23(木) 22:24:09 ID:???
文字サイズだけど、某有名PCニュースサイトは
本文だけ文字は固定してないね。
あとは10-12pxの固定文字みたい。
俺も10-12pxで文字を固定するか!
839Name_Not_Found:2006/03/23(木) 22:26:57 ID:???
厨達よ そろそろ質問が来る頃だ。
 帰ってくれないか?
840Name_Not_Found:2006/03/23(木) 22:27:13 ID:???
>>836
JSで変えてるんだろ。

>>837
視力だけでなく解像度も関係する。
2048×1580の15inchとかノートPCだと普通にあるから。
ノートだから解像度下げると滲んで悲惨になるし。
841Name_Not_Found:2006/03/23(木) 22:27:23 ID:SD9f8nRx
>>837
×見にくい ○読みにくい
842Name_Not_Found:2006/03/23(木) 22:28:37 ID:???
>>840
JSはわかってる・・・ってかスレ違いだな
843Name_Not_Found:2006/03/23(木) 22:28:49 ID:???
知ったか春厨ってのはタチが悪いな。
844Name_Not_Found:2006/03/23(木) 22:30:36 ID:???
>>843
体現乙。
845Name_Not_Found:2006/03/23(木) 22:37:04 ID:SD9f8nRx
>>842
ググればすぐ見つかるぞ。
キーワード:Javascript フォントサイズ変更

>>840>>843
JSじゃJScriptもあるから紛らわしい。
省略しない方がいいよ。
846Name_Not_Found:2006/03/23(木) 22:42:30 ID:???
JScriptでもできるとは思うが。
847Name_Not_Found:2006/03/23(木) 22:56:49 ID:???
Javascriptでソースがいくつもあるのに、わざわざJScriptでやるのか。
848Name_Not_Found:2006/03/23(木) 22:59:48 ID:???
少しは過去ログ読んだら?
849Name_Not_Found:2006/03/23(木) 23:00:04 ID:???
どっちでもできるから省略しても問題ないってことだろ。ていうかスレ違い。
850Name_Not_Found:2006/03/23(木) 23:00:34 ID:???
>>848
851Name_Not_Found:2006/03/23(木) 23:02:51 ID:???
最近よく来るいちゃもんつけまくる荒らしっぽいから放置で
852Name_Not_Found:2006/03/23(木) 23:11:18 ID:???
知ったか春厨ってのはタチが悪いな。
過去ログも読まずに議論かい?
質問したい人には迷惑なんだよ。
 出て行けよ、な?
853Name_Not_Found:2006/03/23(木) 23:41:27 ID:???
携帯だけでHP作ってます。
お尋ねしたいのですが、
支援サイト様で見たのですが
「外部CSSのとき、リンク元ページはテキストエディタで拡張子を.CSSにする」とありました

サイト自体はフリーページなので、外部CSS用のページが有りますが、掲示板にLOOK2を使っていまして
LOOKには自由に使って良いページが有るもので、それを掲示板装飾の為に外部CSS用に出来ないものか、と思いまして。
板違いでしたらすみません。
854Name_Not_Found:2006/03/23(木) 23:49:34 ID:???
>>853
その「自由に使って良いページ」をCSSファイルにできるかどうかは、このスレの範疇じゃない。
初心者質問スレか、レン鯖板にそのスレがあればそっちか、
じゃなかったら一番いいのはそこのサポセンに聞くこと。
855Name_Not_Found:2006/03/24(金) 01:36:40 ID:h4f9oNF+
わかりました。
856Name_Not_Found:2006/03/24(金) 01:47:33 ID:???
>853>855
駄目だよ。まことさんが禁じてる。
857Name_Not_Found:2006/03/24(金) 11:50:27 ID:???
http://www.koikikukan.com/
ここの左右のメニュー畳めるのを見て少し疑問に思ったことがあります。
開いてる時は、メニューの左右に縦のぼかし画像がありますが
閉じたときは一つになります。これってスタイルシートを切り替えてるのでしょうか?
858Name_Not_Found:2006/03/24(金) 11:59:31 ID:???
>>857
背景画像のある要素を隠したり表示させたりしてるだけ。
859Name_Not_Found:2006/03/24(金) 12:00:12 ID:???
見たが何のことだか解らん
860Name_Not_Found:2006/03/24(金) 12:18:45 ID:???
>>857
そこのサイト他のブラウザで見てもデザインが全くズレないな・・・
すげぇ・・・俺のサイトも似たような感じのデザインしてるが
IE以外だとすげぇズレまくりで見れたもんじゃない・・・

ソース眺めていたんだけど、どのブラウザで見ても全体がちゃんと真ん中に寄ってるね
ソース見てたけどそれらしいのが見つからない。俺のやり方だとIEだけ真ん中によって
他のブラウザだと左に寄ってる・・・
どなたかエロイ人教えてください!!
861Name_Not_Found:2006/03/24(金) 12:21:08 ID:???
cssファイルは見たのか?
862Name_Not_Found:2006/03/24(金) 12:24:29 ID:???
>>860
おまえはCSSの基礎から勉強したほうがいい。
IEの互換モードを基準にCSSを組むこと自体が間違い。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_example.html#text-align-behavior
ttp://hp.vector.co.jp/authors/VA022006/css/box.html#margin-properties
863Name_Not_Found:2006/03/24(金) 12:41:43 ID:???
padding: 29px 0 28px 23px;
_padding-bottom: 29px;

こんなやり方って意味あるの?
_ なんかついてるけど・・・
864Name_Not_Found:2006/03/24(金) 12:43:42 ID:h4f9oNF+
>>856
LOOK内のページをCSSファイルにしたいんだろ。
MKTと何の関係がある?
865Name_Not_Found:2006/03/24(金) 12:55:11 ID:???
>>860
全てを囲ってるボックスの左右のマージンをauto
866Name_Not_Found:2006/03/24(金) 12:55:33 ID:???
>>863
アンダーバーハックってやつ。
867Name_Not_Found:2006/03/24(金) 13:06:42 ID:???
アンタースコアハックって言ってほしかった
868Name_Not_Found:2006/03/24(金) 13:07:22 ID:???
アンター・・・・吊ってきます
869Name_Not_Found:2006/03/24(金) 13:12:45 ID:???
>>867
ここの連中にラベルの話は酷だぜ。
870Name_Not_Found:2006/03/24(金) 13:18:06 ID:???
div.test{
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
width: 80%;
height: 100%;
background-color: #223322;
text-align: left;
}
<div class="test">
hogehoge
 ・
 ・ 90行ぐらい
 ・
hoge
</div>


<div class="test">
を左右の真ん中にもって行きたいのですが
どうすればいいのでしょうか?
871Name_Not_Found:2006/03/24(金) 13:30:14 ID:???
標準モードで、margin:auto; を入れとけ
872Name_Not_Found:2006/03/24(金) 13:32:53 ID:???
>>867
アンダーバーでもアンダースコアでもいいんだよボケ
http://www.nifty.com/yougo/pce01002.htm
873Name_Not_Found:2006/03/24(金) 13:34:34 ID:???
>>871
div.test{
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
width: 80%;
height: 100%;
background-color: #223322;
text-align: left;
margin:auto;
}

こういうことですか?
真ん中に寄りませんけど・・・?
874Name_Not_Found:2006/03/24(金) 13:37:14 ID:???
>>872
ボケとはひどいよアンター
875Name_Not_Found:2006/03/24(金) 13:40:21 ID:???
>>873
テンプレ読みましょう
>>5のQ2
876Name_Not_Found:2006/03/24(金) 14:48:02 ID:???
>>867
アンターばかぁー?
877Name_Not_Found:2006/03/24(金) 15:51:17 ID:???
オーバーバーって言うのはきもちわるい。
878Name_Not_Found:2006/03/24(金) 16:26:16 ID:???
div.test{
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
width: 96%;
height: 100%;
margin: 0 2% 0 2%;
}
<div class="back_side">
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
</div>

なぜか両サイドを2%にしてるのに真ん中に寄ってくれない・・・
なぜ??
879Name_Not_Found:2006/03/24(金) 16:34:54 ID:???
>>878
同じ質問ばかり・・・
何個か前のスレも読めないのか・・・
どうせIEでしか見てないんだろ・・どうしてM$はアホなのか・・・・
880Name_Not_Found:2006/03/24(金) 16:44:14 ID:???
>>878
div.test{ ← クラスセレクタが「test」クラスを指定してる。

}
<div class="back_side"> ← クラス名が「back_side」になってる。
 〜
</div>
881Name_Not_Found:2006/03/24(金) 16:45:54 ID:???
春だからねぇ・・・
882Name_Not_Found:2006/03/24(金) 16:48:40 ID:???
div.test{
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
width: 96%;
height: 100%;
margin: 0 2% 0 2%;
}
<div class="test">
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
hogehogehogehoge<BR>
</div>

こうだった
>>5のQ2?参考にしたつもりだったんだが
883Name_Not_Found:2006/03/24(金) 17:01:26 ID:???
>>882
>879 3行目
884Name_Not_Found:2006/03/24(金) 17:17:14 ID:???
>>883
・標準モードにするとIEも他のブラウザと同じ動きになる。
・どーしても互換モードでやりたいなら、text-align:center;を追加する。
・そもそもdiv内に直接文章を書くのはよろしくない。
885Name_Not_Found:2006/03/24(金) 17:22:54 ID:???
えっ?
886Name_Not_Found:2006/03/24(金) 17:52:28 ID:???
>>872
ホントにボケだったんだな・・・
アンダーバーだけならおKだが、
アンダーバーハックでググって、アンダースコアハックとの差を比べてみろ。
887Name_Not_Found:2006/03/24(金) 18:00:26 ID:???
どっちだっていいんじゃ。
_をアンダースコアと呼ぶか、アンダーバーと呼ぶか程度の違いしかないし。
たまたまハックという手法でよく使われるのがアンダースコアだったってだけ。
888Name_Not_Found:2006/03/24(金) 18:08:26 ID:???
だからこそよく使われてる言葉で言わなきゃ質問者はググれもしないわけで
889Name_Not_Found:2006/03/24(金) 18:10:57 ID:???
アンダーバーハックでググってもすぐアンダースコアハックが出てくるよ。
890Name_Not_Found:2006/03/24(金) 18:15:22 ID:???
そこまで用語間違え厨を擁護してどうすんの
891Name_Not_Found:2006/03/24(金) 18:16:34 ID:???
本人だからさ。
892Name_Not_Found:2006/03/24(金) 18:23:22 ID:???
違います><
893Name_Not_Found:2006/03/24(金) 18:26:43 ID:???
どっちだっていいって指摘したら擁護とか言われちゃったw
何で噛み付かれてるんだろう俺。
894Name_Not_Found:2006/03/24(金) 18:28:23 ID:???
南無w
895Name_Not_Found:2006/03/24(金) 18:36:54 ID:???
>>893
南無ww
どっちだってよくないからさ。
初心者にググってもまともに出ない言葉を教えるのは、さすがにちょっと。
896Name_Not_Found:2006/03/24(金) 19:00:32 ID:???
ググればどちらでもわかる件について
897Name_Not_Found:2006/03/24(金) 19:12:11 ID:???
テンプレがずーっとアンダーバー・ハックになってる件について
898Name_Not_Found:2006/03/24(金) 19:15:21 ID:???
問題ありまくり。
899Name_Not_Found:2006/03/24(金) 19:54:07 ID:???
些細なことでいちゃもんつけてるなぁ…
900Name_Not_Found:2006/03/24(金) 19:56:20 ID:???
質問者に伝わればいいんだが・・
901Name_Not_Found:2006/03/24(金) 19:59:41 ID:???
まあ、アンダーバーハックでググってもすぐわかるから大丈夫でしょ。
902:Name_Not_Found:2006/03/24(金) 22:29:22 ID:???
ttp://flower.vis.ne.jp/index02.htmlこのサイト様のSitemapのAboutを押すと
すす〜っと横に動くんですが、
動かし方が分かる方教えていただけませんか?
ソースを見ても全然わからなので・・・・。
宜しくお願い致します。
903Name_Not_Found:2006/03/24(金) 22:47:23 ID:???
スクリプトで動いているんであって、CSSじゃないと思うよ。
904:Name_Not_Found:2006/03/24(金) 22:56:55 ID:???
903>>
スレ違いでしたか・・・すみませんでした。。。。
905Name_Not_Found:2006/03/24(金) 22:57:42 ID:???
>>902
ジャバスクリプトでレイヤ使ってる
背景画像の上に文字を表示してるからフラッシュのような印象を受けるね。
ttp://flower.vis.ne.jp/Pages/sitemap.html
906Name_Not_Found:2006/03/24(金) 23:01:05 ID:???
IE使ってなかったからrelativeのことを言っているのかと思った。
しかしきれいなサイトだな。
907Name_Not_Found:2006/03/24(金) 23:05:22 ID:???
よく使われる手法だけど、上手い使い方だな。
ちょっと感激した。
908Name_Not_Found:2006/03/24(金) 23:09:44 ID:???
>>902
ぃぃな。ぉぃ
そういう使い方があったんだな・・・知らなかったぜ。
他のブラウザでもデザインはほぼ壊れないけど
JavaSがOFFだと動かないな
909Name_Not_Found:2006/03/24(金) 23:16:40 ID:???
ageとこ
910Name_Not_Found:2006/03/24(金) 23:22:31 ID:???
blogなどにある2カラムのような縦割り表示をするならtableタグしか方法が無いと
思ってたのですがdivでも出来ると言う事を初めて知りました。
そこで質問なのですが
divで2カラム作成用タグの「display: inline;」はあまりオススメではない
記述だったりしますか?心配です。

あとBLOGのようなDIVの範囲が広くなりそう(ページ全体など)ならば
tableを使ったほうがマシなのでしょうか?
911Name_Not_Found:2006/03/24(金) 23:24:04 ID:???
JavaScriptないと読めないってのも不便だよな
3割くらいはOFFのままスルーしてしまう。
912Name_Not_Found:2006/03/24(金) 23:25:09 ID:???
JavaScriptをOFFにしてるやつって理解できん・・・
うちのアクセス解析なら3%もいないけど三割もいるの???
913Name_Not_Found:2006/03/24(金) 23:32:46 ID:???
>>910
floatを使うといいよ。

>>912
3割はさすがに誇張もいいところだろうけど、それでも5%ぐらいは居るんじゃないかな。
気持ちはわからないでもない。
ほんとウザイのあるからなぁ。
914Name_Not_Found:2006/03/24(金) 23:33:40 ID:???
>>913
>float
アリガトン( `・ω・´)調べてきます
915Name_Not_Found:2006/03/24(金) 23:35:48 ID:???
>>6-7辺りにも載ってるから参考に見てみるべし。
916Name_Not_Found:2006/03/24(金) 23:36:16 ID:???
>>913
floatは画像回り込み云々だけじゃなかったか?
divにも使えたっけ…
917Name_Not_Found:2006/03/24(金) 23:38:58 ID:???
>>915
ありがとうございます。
ブログのメニュー部分、tableを使わなくても済みそうですね(`・ω・´)
918911:2006/03/24(金) 23:39:55 ID:???
3割ってのは自分がスクリプトをOFFのままにして、内容見ない確立。
閲覧者の3割がスルーするって意味ではないです。。
表現与誤解ごめん
919Name_Not_Found:2006/03/24(金) 23:46:12 ID:???
>>916
試してみるんだ。
920Name_Not_Found:2006/03/24(金) 23:48:52 ID:???
なかよしパレットがとても参考になりました。
ありがとうございました( ´Д`)ノ解決です
921Name_Not_Found:2006/03/24(金) 23:55:42 ID:???
サイトをデザインするとき、どうしてますか?
自分は紙と鉛筆で草稿(風呂場でも書けるし)してから
一気にエディタで仕上げるのが好きですが。
922Name_Not_Found:2006/03/24(金) 23:58:26 ID:???
俺は頭の中だw
一度書くのを試みたがマンドくセーだった。
923Name_Not_Found:2006/03/25(土) 00:22:40 ID:???
考えるんじゃない、感じるんだ
924Name_Not_Found:2006/03/25(土) 01:06:42 ID:???
>>922
それって数時間で作業終わるの?
おれは内容ノートに書き出してやんないと、
できたと思っても不足だったりするから
やっぱりノートとボールペンかな。
925Name_Not_Found:2006/03/25(土) 01:23:53 ID:???
鉛筆の方が消しゴムで修正できるよ。
あと使うのはノートじゃなくてチラシの裏だな。
926Name_Not_Found:2006/03/25(土) 01:26:05 ID:???
実際に頭で構想したのをhtml作ってみる
それから紙に書く
んで、使う色と文書の配置とかまとめる
短くて三日、長くて一週間
927Name_Not_Found:2006/03/25(土) 01:51:57 ID:???
俺は1つのHPを作ってあげるのに、一ヶ月ぐらいデザインを考える。
で色々試行錯誤して3ヶ月目で完成。
928Name_Not_Found:2006/03/25(土) 05:15:08 ID:???
おれは完成がない。
一通りできたなと思っててもしばらくすると
またどっかいじりたくなる。
そんな人いない?
929Name_Not_Found:2006/03/25(土) 08:43:54 ID:WIGutepY
>>928
同意。また何か試みたくなる
930Name_Not_Found:2006/03/25(土) 10:15:43 ID:ZixGbgAA
なんかいろいろ付けてみたくなったり、ここ消してみたくなったり。
931Name_Not_Found:2006/03/25(土) 10:55:38 ID:???
>925
ボールペン派。消しゴムは面倒くさいし全体が汚れてくるから嫌い。
履歴が残るのもいいな。ただ、恥ずかしい落書きが残ってしまうw

裏が白紙のチラシを探すのって大変そうだなw
932Name_Not_Found:2006/03/25(土) 11:09:51 ID:rfusdULp

次スレッド立てる人、要注意!

>>1
>【CSS検証】>>2
……って、落ちてるけど?

【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
933Name_Not_Found:2006/03/25(土) 11:17:11 ID:???
やっぱ紙と鉛筆はいつになっても必需だ
934Name_Not_Found:2006/03/25(土) 13:40:39 ID:???
紙を発明した人はパソコン発明した人よりえらいな。
935Name_Not_Found:2006/03/25(土) 13:54:45 ID:???
紙と鉛筆ほど手軽なものは他にないだろう。
ただ紙と鉛筆とPCは元々次元が違うから、比べるのはナンセンス
936Name_Not_Found:2006/03/25(土) 14:13:16 ID:???

 ぁぁ ラベルがラベルが・・・
937Name_Not_Found:2006/03/25(土) 14:17:44 ID:???
>>936
泣くな 休みになると一気にラベルが下がるのはどこも同じだ。
938Name_Not_Found:2006/03/25(土) 14:22:03 ID:???
というか、普通にレベルが高い人でもやる事ばかりじゃね?
「春だなって言いたいだけちゃうんか」とかってツッコミ入れたくなる。
939Name_Not_Found:2006/03/25(土) 14:27:08 ID:???
>>938
実はそれこそが春厨と呼ばれる人たち
940Name_Not_Found:2006/03/25(土) 14:37:20 ID:???
 | 項目1 | 項目2 | 項目3 | 項目4 |

↑こんな風に項目を「 | 」で区切るために、
HTML側を下のように書くのはありだと思いますか?

<ul>
<li>|</li>
<li><a href="#">項目1</a></li>
<li>|</li>
<li><a href="#">項目2</a></li>
<li>|</li>
<li><a href="#">項目3</a></li>
<li>|</li>
<li><a href="#">項目4</a></li>
<li>|</li>
</ul>
941Name_Not_Found:2006/03/25(土) 14:46:33 ID:???
ボーダーでやればいいのに・・・
942Name_Not_Found:2006/03/25(土) 15:04:49 ID:???
俺は / にしたくて背景画像で指定した。
けどリニューアルの時に面倒になって>>940みたいにしちゃったw
943Name_Not_Found:2006/03/25(土) 15:23:37 ID:???
background:url(img/bb.gif) repeat-y;
/*background-image:url(img/bb.gif);
background-repeat:repeat-y;*/


これって意味あるの?
なんかのバグを利用したやつかな?
エロイ人教えて。
944Name_Not_Found:2006/03/25(土) 15:31:55 ID:???
お勧めのカラーコードを教える
#123456
まじお勧め
945Name_Not_Found:2006/03/25(土) 15:37:49 ID:???
なんかびみょうじゃね?
946Name_Not_Found:2006/03/25(土) 15:40:09 ID:???
>>943
コメントハックかと思ったけど、その部分だけならただのコメントアウト
947Name_Not_Found:2006/03/25(土) 16:01:14 ID:???
>>946
thx
コメントハックって妙にHIT数少ないけど
別の名前かなんかあるのかな?
例みたいなのがないからよくわからん
948Name_Not_Found:2006/03/25(土) 16:31:53 ID:rdK3MnxL
>>947
バックスラッシュハックていう。

#macIE {

}
/*\*/
#other{
}


『/*\*/』以降書かれたものはmacIEで読み込まない。
949Name_Not_Found:2006/03/25(土) 16:58:01 ID:???
<div class="stitle">
test
</div>

<div class="side">
<ul class="list">
<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
<li><a href="hogehoge.html" title="このサイトについて">このサイトについて</a></li>
<li><a href="hogehoge.html" title="リンク">リンク</a></li>
<li><a href="hogehoge.html" title="用語集">用語集</a></li>
<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
<li><a href="hogehoge.html" title="このサイトについて">このサイトについて</a></li>
<li><a href="hogehoge.html" title="リンク">リンク</a></li>
<li><a href="hogehoge.html" title="用語集">用語集</a></li>
</ul>
</div>

<div class="stitle">
test
</div>

<div class="side">
<ul class="list">
<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
<li><a href="hogehoge.html" title="このサイトについて">このサイトについて</a></li>
<li><a href="hogehoge.html" title="リンク">リンク</a></li>
<li><a href="hogehoge.html" title="用語集">用語集</a></li>
<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
<li><a href="hogehoge.html" title="このサイトについて">このサイトについて</a></li>
<li><a href="hogehoge.html" title="リンク">リンク</a></li>
<li><a href="hogehoge.html" title="用語集">用語集</a></li>
</ul></div>
950Name_Not_Found:2006/03/25(土) 16:58:32 ID:???
.stitle {
margin: 0px 1px;
padding: 4px 3px 3px 22px;
_padding: 3px 3px 3px 22px; /* For WinIE */
background: url(img/sb.gif) repeat-x;
border-top: 1px solid #666699;
border-bottom: 1px solid #666699;
font-size:9px;
letter-spacing: 0.05em;
width: auto;
text-align: left;
}
.side {
margin: 15px 22px 18px 22px;
font-size: 10px;
_font-size: 9px;
line-height: 150%;
word-break: break-all;
padding: 0;
height: 1%;
}
ul.list {
list-style: none!important;
margin: 0px 0px 0px 0px!important;
margin-left: -2px!important;
padding: 0px!important;
}
ul.list li {
margin: 0px;
padding: 0px 0px 3px 12px;
background: url(img/lmark.gif) no-repeat 3px 0.4em;
list-style: none!important;}
951Name_Not_Found:2006/03/25(土) 16:59:49 ID:???
>>949
>>950
Firefoxの環境だと重なってしまうようです。
Win IE NN Opera ならなんともないので気に入ってたのですが・・・
どこを直せば重ならないのかが色々試したのですがわかりません。
どなたかご教授お願いいたします。
952Name_Not_Found:2006/03/25(土) 17:00:07 ID:???
とりあえず、divに生でtestって書くのはイクナイ。
953Name_Not_Found:2006/03/25(土) 18:27:26 ID:???
重なるって何がだろう。
954Name_Not_Found:2006/03/25(土) 18:50:45 ID:???
>>952
そうなの?知らなかった。
<h3> あたりでも追加するよ

>>953
上の<li><a href="hogehoge.html" title="リンク">リンク</a></li>ってあたりに
下の<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
が重なる。なぜか下のが上に行っちゃう・・・
955Name_Not_Found:2006/03/25(土) 18:53:49 ID:???
>>953
http://zetubou.mine.nu/itoshiki/nozomu/zetubou21778.jpg
一応、画像アップロードした。
954で説明したよりもっと下に下がってました。
956Name_Not_Found:2006/03/25(土) 19:16:16 ID:???
>>955
で、これをどうしたいの?
2列に並べる予定?
957Name_Not_Found:2006/03/25(土) 19:18:53 ID:???
Gecko/20050922のSylera/2.2.7と、
Gecko/20060130のBagel/0.3.2、SeaMonkey/1.0でチェックしてみたがずれない。
Firefoxは重いから居れてないのでスマン。
だが、Geckoエンジン使ってるので違いが出ないと思うんだけどなぁ。

多分ここに書いたソース以外に原因がある予感。
958Name_Not_Found:2006/03/25(土) 19:22:22 ID:???
>>956
普通に縦にしたいのですが・・・(上のソースを普通にIEやNNやOperaなどで見てるのと同じように
Firefoxでも見れるようにしたいのです。)
959Name_Not_Found:2006/03/25(土) 19:27:30 ID:???
>>958
いろいろ突っ込みたいとこだが、.sideのheight:1%;って何?
960Name_Not_Found:2006/03/25(土) 19:27:34 ID:???
>>956
また画像UPした。
http://zetubou.mine.nu/itoshiki/nozomu/zetubou21780.jpg
NNでもずれてた・・・NN起動したつもりがIE系タブブラウザだったorz
961Name_Not_Found:2006/03/25(土) 19:27:43 ID:???
Geckoのバージョンとかにもよるんじゃ。
Geckoのバグか、その他の部分のソースの影響かわからんしなぁ。
962Name_Not_Found:2006/03/25(土) 19:27:57 ID:???
>>958
画像じゃなくて、html と css をアップロードしなさい。
本人が関係無いと思って削ってる所がおかしいとかは、良くある話だ。
963Name_Not_Found:2006/03/25(土) 19:29:45 ID:???
>>959
それだ!解決した・・・
突っ込みどころ満載でつか?もっと突っ込んでください。
964Name_Not_Found:2006/03/25(土) 19:30:15 ID:???
>>962
まだ作り直し途中なので削ってないです。
965Name_Not_Found:2006/03/25(土) 19:37:02 ID:???
font-sizeは絶対値指定は止めた方がいいぞ。
%とかで指定しとくのがお勧め。
あと、marginは最初に
*{margin:0; padding:0;}
って指定してブラウザごとの取り方の誤差を削っておくと楽。

それと、個人的に!importantは嫌いw
966Name_Not_Found:2006/03/25(土) 19:43:30 ID:???
>>963
ul.listの2重の指定margin: 0px 0px 0px 0px!important; margin-left: -2px!important; 、
list-style: none!importantってIEは?、しかもlist-style-typeが普通、とかさ。
まあがんがれ。
967Name_Not_Found:2006/03/25(土) 21:00:20 ID:???
基本から勉強したほうがいいと思うよ
968Name_Not_Found:2006/03/25(土) 22:32:11 ID:???
>>966
ってIEは?って意味がわからないんですけど・・・
969Name_Not_Found:2006/03/25(土) 22:33:16 ID:???
>>965
*{margin:0; padding:0;}
* は一つ一つのIDやClassを書かないといけないよね?
970Name_Not_Found:2006/03/25(土) 22:33:47 ID:???
>>966
関係ないのに話に入るが
!important って最後につけると意味あるの??
971970:2006/03/25(土) 22:35:56 ID:???
>>966
あと一つ、まだまだスタイルが未熟で疑問が出てきた
none って値にするのと ないのは全く同じ??
972Name_Not_Found:2006/03/25(土) 22:38:08 ID:???
デフォルトの値を継承する
973Name_Not_Found:2006/03/25(土) 22:41:39 ID:???
すまん、意味を取り違えた
list-style: none
これはリストマークを表示しない
974Name_Not_Found:2006/03/25(土) 22:42:21 ID:???
うざい。テンプレサイトいけ
975Name_Not_Found:2006/03/25(土) 23:39:35 ID:???
   / : 》:、∩
  (===○=)/  ウンコ漏れました
__ /  ⇔ /
\⊂ノ ̄ ̄ ̄\
||ヽ|| ̄ ̄ ̄ ̄||
 ...|| ̄ ̄ ̄ ̄||
976Name_Not_Found:2006/03/25(土) 23:51:37 ID:???
自分で食べろ
977Name_Not_Found:2006/03/26(日) 11:37:44 ID:???
#linksLeftBox {
float: left;
width: 195px;
}
#linksLeft {
margin-bottom: 20px;
margin-left: 10px; /* shadow */
}
.sidetitle2 {
margin: 0px 0px 0px -5px;
padding: 4px 3px 3px 22px;
border-top: 1px solid #666699;
border-bottom: 1px solid #666699;
font-size:9px;
letter-spacing: 0.05em;
width: auto;
text-align: left;
background-image: url("./img/background2.gif");
background-attachment: fixed;
background-color: #F2F4FC;
}
ul.list1 {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 15px 22px 18px 22px;
width: auto;
font-size: 10px;
line-height: 150%;
}
978Name_Not_Found:2006/03/26(日) 11:38:14 ID:???
ul.list1 li {
margin: 0px;
padding: 0px 0px 3px 12px;
list-style: none;
background-image: url("./img/menupoint.gif");
background-repeat: no-repeat;
background-position: 0pt;
}
.blog {
margin: 0px 5px 0px 200px;
padding: 22px 0 20px 0;
}
#footer {
font-size:10px;
FONT-FAMILY:Verdana,Arial,"MS Pゴシック",Osaka;
width:100%;
line-height:150%;
margin:0px 5px;
padding:20px 0px;
text-align : center;
border-top: #949495 1px solid;
}


<div id="linksLeftBox">
<div id="linksLeft">

<BR>
<div class="sidetitle2">
<h4>testtest</h4>
</div>
979Name_Not_Found:2006/03/26(日) 11:39:04 ID:???
<ul class="list1">
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
<li>testtesttest</li>
</ul>

</div>
</div>


<div class="blog">

本文・・・<BR>
本文・・・<BR>
本文・・・<BR>


</div>

<div id="footer">
Copyright ©
</div>

footerが本文の下に行ってしまう。
testtestと本文の下に行かせたいのだが
floatでうまくいきません。
980Name_Not_Found:2006/03/26(日) 11:47:31 ID:???
>979
#footer {
clear:both;
}
981Name_Not_Found:2006/03/26(日) 12:08:34 ID:???
<div id="banner">
<a href="http://www.hogehoge.com/" accesskey="1">hogehogehogehogehogehogehogehogehogehoge</a>
</div>

#banner {
margin: 0 5px;
padding: 20px 0 20px 200px;
text-align: left;
border-bottom: 1px solid black;
background-image: url("http://www.google.co.jp/images/logo_sm.gif");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 20px center;
}


左から20pxの位置、上下の真ん中に背景を表示させたいのですが
IEだと思い通りにちゃんと表示されます。
FirefoxとOperaだとどこかに隠れてるのか表示されません。
NNだとやたら左上に表示されます。
982981:2006/03/26(日) 12:09:07 ID:???
分かる方どうか教えてください。
983Name_Not_Found:2006/03/26(日) 12:30:27 ID:???
>>982
分かる方って・・・まあいいか。
fixedはいらない。
984Name_Not_Found:2006/03/26(日) 14:17:47 ID:/ThAfAwL
次スレッド立てる人、要注意!

>>1
>【CSS検証】>>2
……って、落ちてるけど?

【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
985Name_Not_Found:2006/03/26(日) 14:47:30 ID:???
以下のようなHTMLに次のレスのようなCSSを適用しているのですが、
MacのFirefoxやSafariでは問題が無いのに、WinのIE6だとid="navi"
の高さが下のid="content"の内容量に応じて変化します。
どのブラウザで見ても、id="navi"を高さ30px;で固定したいのですが、
分かる方いらっしゃったら教えてください。
はげしくガイシュツっぽいですがどうかよろしくお願いします。
(散々ぐぐりました)

---HTML---
<body>
<table id="layout" align="center">
<tr>
<td id="navi" rowspan="2">
メニューが入っています
</td>
<td id="logo">
<h1>ロゴが入っています(画像)</h1>
</td>
</tr>
<tr>
<td id="content">
コンテンツが入っています
</td>
</tr>
<tr>
<td id="footer" colspan="2">
フッターが入っています
</td>
</tr>
</table>
</body>
986985:2006/03/26(日) 14:49:06 ID:???
---CSS---
body {
margin: 0px;
font-size: 12px;
line-height: 1.5;
color: #333333;
}

img{
border-width: 0px;
}

#layout{
width: 700px;
}

#navi{
width: 145px;
vertical-align: top;
text-align: left;
}

つづく
987985:2006/03/26(日) 14:50:15 ID:???
#logo{
margin: 0px;
padding: 0px;
height: 30px;
text-align: right;
}

h1{
margin: 0px;
}

#content{
padding: 5px;
width: 555px;
background-color: #cccccc;
background-position: top right;
background-repeat: no-repeat;
vertical-align: top;
}

#footer{
width: 700px;
height: 50px;
background-color: #000000;
vertical-align: middle;
text-align: center;
}

以上
988985:2006/03/26(日) 14:52:50 ID:???
高さが変わってしまって困ってるのはid="logo"でした。スミマセン
どのブラウザで見てもid="logo"が同じ高さになるようにしたいです。
よろしくお願いします。
989Name_Not_Found:2006/03/26(日) 15:06:13 ID:???
>>988
h1の文字の大きさに影響されてしまってるんだと思う。
h1の文字の大きさをfont-size: 100%;みたいな感じで指定してみ。

あと、paddingとmarginをいちいち0指定するのは面倒でしょ?
最初の行に
*{margin:0; padding:0;}
って書いておくと楽チン。
990Name_Not_Found:2006/03/26(日) 15:11:03 ID:???
>>983
fixedを削除しました。
FirefoxとOperaでは正常になりましたが
NNだと左上から動いてません。
991Name_Not_Found:2006/03/26(日) 15:11:33 ID:???
うち無理だった。
誰かスレ立てよろしく。

>>984>>2に追加を忘れないでおくれ。
992985:2006/03/26(日) 15:13:25 ID:mMIY0hNs
>>989
ありがとうございます。
やってみましたがダメでした。
試しにh1タグを外したりid="logo"のセル内を空にしてみたのですが
症状は一緒でした。id="content"の中身の量に応じて30px〜100px
くらいの範囲でid="logo"の高さが変わります。
993Name_Not_Found:2006/03/26(日) 15:22:24 ID:???
>>992
<td id="navi" rowspan="2"> だからなんでは?
IEだけ均等に配置してしまうとか。
994985:2006/03/26(日) 15:27:22 ID:???
>>993
もしそうだとするとこのレイアウトでは回避方法は無いという
ことになりますよね?
均等にはなってないんですが、id="logo"が100pxくらいの時
下のid="content"は500pxとかだったり・・・
<div>でやった方が良いんでしょうか・・・
995Name_Not_Found:2006/03/26(日) 15:28:44 ID:???
>>990
判りにくいから、名前欄に最初の質問時の番号入れてね。
そりゃ内容が1行しかないdivに指定してるからでしょ。
bodyに指定すれば?
996Name_Not_Found:2006/03/26(日) 15:34:08 ID:???
>>992
うちでは同じに表示されてるぞ。
ttp://zetubou.mine.nu/itoshiki/nozomu/zetubou21827.png

弄ったのは最初の行に
*{margin:0; padding:0;}
を居れて、残りはこれだけ。
h1{
margin: 0px;
font-size: 100%;
}

中身がはみ出ると当然指定した高さより大きくなるから、
h1の文字が大きいと当然30pxに収まるわけが無い。
997Name_Not_Found:2006/03/26(日) 15:43:43 ID:???
>>996
そういう事ではないと思うんだが・・・・
998Name_Not_Found:2006/03/26(日) 15:48:49 ID:???
ソースも流れもきちんと見てないけど
「本当に高さを指定したいのは tr なんです(><)」っていうお話?

次スレまだないね。俺は立てられなかった。
999Name_Not_Found:2006/03/26(日) 15:53:39 ID:???
>>997
h1{background-image:url("./test.jpg")}
って感じってこととか?
うーん…わからんので、
わかるお前さんがちゃきちゃきっと答えたってくれ。
1000Name_Not_Found:2006/03/26(日) 15:54:21 ID:qZmPdTbn
1000なら寝る
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。