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

このエントリーをはてなブックマークに追加
810Name_Not_Found
テーブルの中に入ったフォントのサイズと
DIVや何もないところにいれたフォントのサイズが違うのですが、
フォントサイズをきっちりあわせるいい方法はありませんか?

サンプル
ttp://f32.aaacafe.ne.jp/~sasuga/test.htm

テーブルを使わなければいいだけの話かもしれませんが
かなり使いたいので回避方法があったら教えてください
811Name_Not_Found:04/03/14 18:35 ID:???
>>810
ブラウザは何か、書いて下さい。WinIEならそれはバグです。
対処法は標準モードにするか、body, th, td {font-size:medium;}

BODYへの定義が継承されない
 http://zoo.millto.net/~tancro/stylesheet/note_inherit.html
フォントサイズの指定が表要素に継承されない(IE5)
 http://cssbug.at.infoseek.co.jp/detail/winie/b023.html
キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6)
 http://cssbug.at.infoseek.co.jp/detail/winie/b060.html
812808:04/03/14 19:01 ID:pzt5Jb1x
>>809
それってIE6.0でも使えますか?
813Name_Not_Found:04/03/14 19:03 ID:???
>>812
試せばすぐわかることをなぜ訊くのですか? 
もしWinIEを持ってないにせよ、>>4から対応表を見ればわかるはず。
814Name_Not_Found:04/03/14 19:07 ID:???
>>808>>812
>リンクに触ると色が変わるタグ
「タグ」なんて言ってるから、全然わかってない初心者なのかな。
IE6.0で効かせられなかったら、それは君のやり方が間違ってるってことだ。
>>4見て勉強しよう。
815808:04/03/14 19:09 ID:pzt5Jb1x
すいません。。。
スタイルシート初心者なのでよくわかんないんです。
コピペするだけで効果が出るようにしてくれませんか?
文字のところは適当に「あああああ」とかで。
816808:04/03/14 19:10 ID:pzt5Jb1x
一応とほほのスタイルシート入門を見てます。
817Name_Not_Found:04/03/14 19:14 ID:???
>>808
もしかして釣り?
818Name_Not_Found:04/03/14 19:14 ID:???
>>815
むしがいい要求だな。自分で学習しないと応用は効かないぞ。
>コピペするだけで効果が出るようにしてくれませんか?
 >>809がそれ。
819810:04/03/14 19:16 ID:???
winIE(XP)、MacIE,NN(Os9)で確認しています。

ちゃんと表示されるのはNN(Os9)だけでしたが
winIEを標準にしたいと思います。

td {font-size:medium;}はできるみたいですが
td {font-size:smaller;}が小さくなりすぎてしまいます。

tableをやめてフォント指定もやめて一から出直します。
ありがとうございました
820Name_Not_Found:04/03/14 19:19 ID:???
>>819
早まるな。
>td {font-size:smaller;}が小さくなりすぎてしまいます。
継承すれば、smallerのさらにsmallerになるんだから当然では?
821Name_Not_Found:04/03/14 19:22 ID:???
>>819
キーワード指定(medium,smaller)を止めて%単位にすれば済む話。
body {font-size:100%;}
これが他のfont-size指定の基準値になる。
smallerの代りに td {font-size:85%;} とか。
822808:04/03/14 19:25 ID:pzt5Jb1x
>>818
809をどこにコピペすればいいかわかんないんです。
htmlの<body>〜</body>の中にコピペするだけで「あああああ」の上に文字を当てると消えるようにしてくれませんか?
823Name_Not_Found:04/03/14 19:26 ID:???
>>822
カエレ
824Name_Not_Found:04/03/14 19:33 ID:???
<a onmouseover="this.style.visibility='hidden'" onmouseout="this.style.visibility='visible'">ああああ</a>

反則?>>808その他
825810:04/03/14 19:56 ID:???
>>819-810
今winIEで検証できないのですが
MacIEが表示できてるので希望がもてそうです。

ただ%指定にしてWinIE6.0互換モード及び5.5以前の場合どうなるんだろう…?
826 ◆vnnY55uM7o :04/03/14 20:33 ID:XNU0L1sD
よろしくお願いします。
テンプレの
『4.ブロックレベル要素をセンタリングする方法 』を参考にして
やってみましたがセンタリングできませんでした。
どうしたらいいですか?

http://2.csx.jp/~gackt/main/00120.html
http://2.csx.jp/~gackt/gackt.txt

パターン1
div table{
margin-left:auto;
margin-right:auto
text-align:justify
}

パターン2
div{
margin-left:auto;
margin-right:auto
text-align:justify
}
827Name_Not_Found:04/03/14 21:38 ID:???
>>826
「OSやブラウザの種類とヴァージョンについては必ず明記してください。」
>>1 も読めない糞コテハンヤローはもう来なくていいよ。
828Name_Not_Found:04/03/14 22:00 ID:???
table要素に対して、

margin-left:auto;
margin-right:auto;

をどうぞ。

div要素に指定してるけど、それは間違い。
div{background-color:fcc}とでもしてみろ。
なんでセンタリングされないかがわかるぞ。
829Name_Not_Found:04/03/14 22:01 ID:???
div{
margin-left:auto;
margin-right:auto
text-align:justify
}

>margin-right:auto
>text-align:justify
これのせいとかないだろうな・・・
830 ◆vnnY55uM7o :04/03/14 22:29 ID:???
>>827
すみません。
IE6
NN7
です

>>828-829
レスありがとうございます。
これでNNはセンタリングされました。IEはバグのせいか左寄せのままなのですが
面倒なので妥協します。

td{
margin:0;
padding:0;
font-size:small;
text-align:center;
border-style : solid;
border-width:1;
}

table{
margin-left:auto;
margin-right:auto;
}
831Name_Not_Found:04/03/14 22:36 ID:M/gcTsSQ
>>830
IEはmargin-****:auto;がバグで効かないので、
テーブルタグを囲んでいる <div>〜</div> に
text-align:center;を指定してみて下さい。
832Name_Not_Found:04/03/14 22:49 ID:???
>>830
DOCTYPE宣言がない糞HTML文書だと後方互換モードになるから、
margin-left:auto; margin-right:auto; は効かない。
833Name_Not_Found:04/03/15 03:04 ID:???
>>732の言ってるようなDiv厨ってどういうことですか?
Table構造をDivで再現するのってあんまりよくない?
かなりマジレス希望です。
834Name_Not_Found:04/03/15 03:22 ID:???
>>833
レイアウトの為だけにdiv要素を使う。
それぞれのdiv要素の思想を、id属性で表すと良いんじゃない?
835 ◆vnnY55uM7o :04/03/15 09:20 ID:???
みなさんレスありがとうございます。

>>831
そうですね、考えてみます
>>882
なるほど後方互換モードでしたか。
臨時に管理しているページで、残念ながら
次の管理人さんがどんなマークアップ言語やエディターを使うのか?
どんな文字コードのサーバを使うのか等が決まっていませんので
DOCTYPE宣言やcharsetの定義ができません。
>>833
テーブル(表)の位置を調節する=物理的な事のためにDivを使うのは
論理的マークアップの趣旨に沿った行為ではないから

でもCSSを使おうとした動機は
ページ数が多いのでインラインでいちいちタグを書くのは面倒臭いということです。
ストリクト教徒には怒られそうですが効率を考えて物理タグも場合のよっては使います。
836Name_Not_Found:04/03/15 09:52 ID:???
>>835
> ストリクト教徒には怒られそうですが効率を考えて物理タグも場合のよっては使います。
 お前の好きなようにするのは全然かまわないから、黙ってて欲しい。

>>833
 構造は、HTMLで、の「構造は」の意味が理解できるまで学べば「そういうことか」とわかるはず。
837Name_Not_Found:04/03/15 12:25 ID:???
臨界点を突破すると、HTMLの善悪の判断ができるようになる。
自分でも前と違ったことがわかるぐらいに。

いわゆる悟りを開くというやつヽ(゚∀。)ノ?
838Name_Not_Found:04/03/15 12:32 ID:???
// css
DIV.menu{float:left; width:200px; border:1px solid #0f0; background:#efe;}
DIV.body{ margin-left:210px; padding:0px; border:1px solid #00f; background:#eef;}

// html
<DIV class="menu">HOME<BR>BBS<BR></DIV>
<DIV class="body">MONA<BR>MONA<BR>MONA<BR>MONA<BR>MONA<BR></DIV>

これをWin2000・IE6で表示すると「MONA」の上3つ(class="menu"ブロックの右側)がズレるんです。
Opera7.23の「Operaとして認識させる」「Mozilla(5.0 4.78 3.0)として〜」「MSIE6.0として〜」では問題なく表示されました。
標準モード・互換モードでborderの有り・無しを試しましたが、すべて同じ結果でした。

>>4
CSSバグリスト@CSSバグ辞典スレッド
http://cssbug.at.infoseek.co.jp/index.html
http://cssbug.at.infoseek.co.jp/detail/winie/b010.html
かもしれませんが、未確認のようです。

何かソースの誤りとか対策とかありますでしょうか?
839Name_Not_Found:04/03/15 13:15 ID:???
>>838
二個目のボックス要素のWIDTHを明記(100%でも)してやれば取りあえず回避できる。
840Name_Not_Found:04/03/15 13:32 ID:???
>>839
うまくいきました!
100%で問題無いので、くっつけておこうと思います。
ありがとうございました。
841Name_Not_Found:04/03/15 14:06 ID:E5ZNCoM/
// CSS
#body {background: white;}
#menu {float: left; width: 150px; background: blue;}
#content {margin-left: 150px; background: yellow;}

// HTML
<div id="menu">
<p>Menu1</p>
<p>Menu2</p>
</div>

<div id="content">
<p>本文1行目</p>
<p>本文2行目</p>
<p>本文3行目</p>
<p>本文4行目</p>
</div>

上記のHTMLとCSSで、ページ左側にメニュー、ページ右側に本文
という構成のページを作成しました。

メニューの内容の方が本文より短い場合、"Menu2" の文字の下に
白い空白ができます。これをなくしたい(青のボックスと
黄色のボックスの下端を揃えたい)のですが、何かいい方法は
ありませんか? >>6 の段組の各サイトは参照したのですが、
解決策は見つかりませんでした。よろしくお願いします。
842Name_Not_Found:04/03/15 15:01 ID:???
>>841
* {margin:0px;padding:0px;}
#main {background: blue;}
#menu {float: left; width: 150px; background: blue;}
#content {margin-left: 150px; background: yellow;}

<div id="main">
<ul id="menu">
<li>Menu1</li>
<li>Menu2</li>
</ul>
<div id="content">
<p>本文1行目</p>
<p>本文2行目</p>
<p>本文3行目</p>
<p>本文4行目</p>
</div>
</div>

まぁこんな感じ。つか、もうちょっと試行錯誤しようぜ。
843Name_Not_Found:04/03/15 15:40 ID:???
>>842
うまくいきました!
<body> の背景色を #menu のそれと同じにする、というのは試していたのですが、
不都合が出てきたので他の方法を模索中でした。その方向性でもう一歩踏み込ん
でおけばよかったのですね。どうもありがとうございました。
844Name_Not_Found:04/03/15 18:34 ID:I54oaKXO
ブラウザの幅に関係なく、ボックスを左右中央にもってくるには、どうしたらいいんでしょうか?
845Name_Not_Found:04/03/15 18:50 ID:???
>>844
逃げろ!!早く!!
846844:04/03/15 18:59 ID:I54oaKXO
>>845
すみません。IE6.NN7です。

#page{position : absolute;top : 100px;
left : 100px;
width : 550px;
height : 350px;
overflow:auto;
padding-left : 15px;}

847Name_Not_Found:04/03/15 19:05 ID:???
>>846

margin-left : 20%;
margin-right : 20%

と左右のマージンを同じにするか

width : 500px;
margin-left : auto;
margin-right : auto

と左右のマージンをautoにする。

で、できるかどうか試してみて。
848Name_Not_Found:04/03/15 19:27 ID:???
さすがに847の神経を疑ってしまう
849Name_Not_Found:04/03/15 19:35 ID:???
>>846
なぜ逃げなかった?
既出なんだよ… >>5 を見れ。
850Name_Not_Found:04/03/15 21:10 ID:???
>>825
>>>819-810
↑?
>ただ%指定にしてWinIE6.0互換モード及び5.5以前の場合どうなるんだろう…?
別にバグ辞典に記載は無いだろが? 問題ありません。
問題あるとしたら古いWinOpera6。
http://cssbug.at.infoseek.co.jp/detail/opera/b009.html
だがこれとてbodyだけをセレクターにしてfont-size:100%指定するなら問題無し。

「DOCTYPE スイッチ」 CSS 解釈実例編
実例: font-size の振る舞い
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_example.html#font-size-behavior
851846:04/03/15 21:52 ID:G35zyl5U
>>847
レスありがとうございます。
どちらとも右に寄っちゃってダメでした・・・。

>>5見てもできませんでした。
逃げた方がいいですか?真剣なんですがw
852Name_Not_Found:04/03/15 21:59 ID:???
>>851
>>5見て無理だったら逃げた方が(・∀・)イイ!!
>>5に書いてることと同じことしか教えてあげられないし。
853Name_Not_Found:04/03/15 22:57 ID:nQhjkCKU
タイトル

こんてんつ

┌─────┐ ┌─────┐
│1見出し   │ │2見出し  │
│ ・項目   │ │ ・項目   │
│ ・項目   │ │ ・項目   │
└─────┘ └─────┘
┌─────┐ ┌─────┐
│3見出し   │ │4見出し  │
│ ・項目   │ │ ・項目   │
│ ・項目   │ │ ・項目   │
└─────┘ └─────┘




こんなかんじの段組をやりたく、>>6のサイトを参考にfloatで組んでみようと思ったのですが、
うまくいきません。ヒントを教えてもらえないでしょうか。
854Name_Not_Found:04/03/15 22:58 ID:???
1,2と3,4若しくは1,3と2,4をdviで括っちゃうとやりやすいんじゃないかな。
855Name_Not_Found:04/03/15 22:59 ID:???
>>853
どうやって、どううまくゆかなかったのか、CSS・HTMLのソースを出してくれないと助言できません。
856Name_Not_Found:04/03/15 22:59 ID:???
dviってなんだよ…俺。
857Name_Not_Found:04/03/15 23:02 ID:???
>>853
4つのボックスを配置したいのね?
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
↑ここの「補足」のソースを応用するとか。
858853:04/03/15 23:02 ID:???
HTMLのソース

<h1>コンテンツ</h1>

<ul>
<div class="contents" id="cont1">
<li> <h2>1見出し</h2>

<ul>
<li> <h3>2見出し</h3>
</ul>
</div>

<div class="contents" id="cont2">
<li> <h2>3見出し</h2>
</div>

<div id="cont3">
<li> <h2>Link</h2>
</div>

</ul>

<div>
859853:04/03/15 23:04 ID:???
外部CSSのそーす

.contents {
width:30%;
padding:5px;
border:1px solid #003370;
background:#ffffff;
margin:1% 0% 1% 1%;
float:left;
}
#cont3{
clear:left;
width:30%;
padding:5px;
border:1px solid #003370;
background:#ffffff;
margin:1% 1% 1% 1%;
}
860Name_Not_Found:04/03/15 23:06 ID:???
>>858
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
 正当(valid)なHTMLを心がけて下さい。validatorでチェックできます。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
861846=851:04/03/15 23:10 ID:G35zyl5U
#page{position : absolute;
top : 100px;
margin-left:auto;
margin-right:auto;
width : 550px;
height : 350px;
overflow:auto;
padding-left : 15px;
text-align:center;}

div.font{text-align:left;
margin-left:auto;
margin-right:auto;}

どこが間違ってるんでしょうか?
862Name_Not_Found:04/03/15 23:15 ID:???
>>861
何にそのスタイルを適用させてるのかわからない。HTMLソースを抄出して。
標準モードか互換モードかも書いて。
それからposition : absolute;を指定すると、初期値left:0;になるのでは。
863Name_Not_Found:04/03/15 23:17 ID:???
>>853
これで試してみ。widthやborderを弄れば希望通りになると思う。

<div style="float:left;width:50%;">
<h1>1見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
<div style="float:clear;width:50%;">
<h1>2見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
<div style="float:left;width:50%;">
<h1>3見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
<div style="float:clear;width:50%;">
<h1>4見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
864Name_Not_Found:04/03/15 23:19 ID:???
>>863
>float:clear;
おいおい……それは無いぜ。HTMLはいいけどね。
865Name_Not_Found:04/03/15 23:21 ID:???
>>854-857>>860>>863
ありがとうございます。参考にしてがんばります。

ちなみにチェックの結果-378点でした(苦笑)
866Name_Not_Found:04/03/15 23:29 ID:???
>>853
.content {float:left; width:45%;}
#col2 {clear:left;}
<div id="col1">
<div class="content" id="cont1">
<h1>1見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
<div class="content" id="cont2">
<h1>2見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
</div>
<div id="col2">
<div class="content" id="cont3">
<h1>3見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
<div class="content" id="cont4">
<h1>4見出し</h1>
<ul><li>項目</li><li>項目</li></ul>
</div>
</div>
867853:04/03/15 23:47 ID:???
ほんとありがたいです。これでなんとかできそうです。
取り敢えず今日は寝ます。
868Name_Not_Found:04/03/16 00:47 ID:???
DVIDVI
でゅびでゅび
もえ
869861:04/03/16 01:21 ID:???
>>862
標準モードですが、position : absolute;を外したら
すんなりと中央に配置されちゃいました。
top : 100px; は無視されてましたが。

なんとかなって良かったです。
今までレスくれた方、本当にどうもありがとうございました。
870Name_Not_Found:04/03/16 01:26 ID:???
>>851
>>7もみれ。これでだめなら、(´・ω・`)
871Name_Not_Found:04/03/16 05:56 ID:HNrAiUnI
テーブル内にある文字全てにスタイルシートの効果を出したいんですが、
全ての<TD></TD>の間に1つづつ入れるのには量が多すぎます。
まとめて効果を出すことって出来ないんでしょうか?
872Name_Not_Found:04/03/16 06:24 ID:???
そんなもの基本中の基本だろ。
873Name_Not_Found:04/03/16 06:26 ID:???
春だなぁ
874Name_Not_Found:04/03/16 06:33 ID:HNrAiUnI
>>872
まとめて色を変えるくらいなら知ってます。
TD { color:#FF0000 }ってやればいいんでしょ?
けど、a:visited { text-decoration:none; color:#FF0000 } を全TDに効果を出させたいときはどうすればいいの?
875Name_Not_Found:04/03/16 06:39 ID:???
>>874
子セレクタか子孫セレクタ
876Name_Not_Found:04/03/16 06:46 ID:HNrAiUnI
>>875
すいません。それだけじゃよくわからないです。
877Name_Not_Found:04/03/16 07:04 ID:???
>>875はたぶん呆れてレスつける気をなくしていると思うので・・

>>875で方法をズバリ教えてもらっているんだから、ぐぐるとかしてみろ。
それでなくても>>4の3つめとかに子孫セレクタも子セレクタも説明あるだろが。
878Name_Not_Found:04/03/16 08:02 ID:???
これが、春か
879Name_Not_Found:04/03/16 12:31 ID:???
これが若さか・・・
880Name_Not_Found:04/03/16 13:11 ID:???
質問の仕方くらいなんとかならんのかね。
>>871 >>874 なんて情報後出しで質問の内容変わってるし。
881Name_Not_Found:04/03/16 16:57 ID:???
td a:visited {}
882Name_Not_Found:04/03/16 22:55 ID:lCPqa162
ぶっちゃけCSSなんていらないわけで
テーブルがろくニ使えないアホがCSSを使うわけであって
883Name_Not_Found:04/03/16 23:10 ID:???
テーブルを思い通りに扱えるアホはCSS使っちゃ駄目ですか??
884Name_Not_Found:04/03/16 23:12 ID:???
>>882
           |
〜〜〜〜〜〜〜〜|〜〜〜〜〜〜〜〜〜〜
   >( c´_ゝ`)  |
            |
>( c´_ゝ`)     J
     >( c´_ゝ`)



            |
〜〜〜〜〜〜〜〜|〜〜〜〜〜〜〜〜〜〜
            |     >( c´_ゝ`)
            |
            J   >( c´_ゝ`)
                    >( c´_ゝ`)

885883:04/03/16 23:12 ID:???
>>884
ごめんw
886Name_Not_Found:04/03/16 23:28 ID:DTeSrwMm
<a href=リンク先のアドレス>リンク</a>
を毎回指定せずに、<a>には全て同じリンクをするようにすることって出来ますか?
887Name_Not_Found:04/03/16 23:31 ID:???
>>886
スタイルシートってのは「デザイン」を扱うもの
888Name_Not_Found:04/03/16 23:44 ID:???
>>886
cssじゃ無理。
<BASE target="">とか、JavaScriptとか。
889Name_Not_Found:04/03/17 00:38 ID:MDpQKPcD
<h1 onmouseover="this.style.backcolor='#00FFFF'">
あいうえお
</h1>
<h1 onmouseover="this.style.backcolor='#00FFFF'">
かきくけこ
</h1>
<h1 onmouseover="this.style.backcolor='#00FFFF'">
さしすせそ
</h1>

これを簡略化したいんですが、最初のほうにまとめることで出来るんですかね?
どうしたらいいかわからなくて困ってます。
教えて下さい。

<style>
h1 { onmouseover="this.style.backcolor='#00FFFF'" }
</style>

これだと上手くいかないんですよね。
890Name_Not_Found:04/03/17 00:43 ID:???
>>889
>>4とhover擬似クラス
891Name_Not_Found:04/03/17 01:08 ID:MDpQKPcD
>>890
いくら見ても理解出来ないんですけど。
889のやつもコピペしていじっただけだし。
892Name_Not_Found:04/03/17 01:18 ID:???
>>891
お前の使ってるブラウザが悪いだけです。
893Name_Not_Found:04/03/17 01:21 ID:???
function()
894Name_Not_Found:04/03/17 01:23 ID:???
http://iswebmag.hp.infoseek.co.jp/sample050.html

backcolorじゃなくbackgroundColor
895Name_Not_Found:04/03/17 01:38 ID:???
>>893
backgroundColorじゃなくbackground-Color
896Name_Not_Found:04/03/17 01:41 ID:???
>>895
( ´,_ゝ`)プッ
897Name_Not_Found:04/03/17 01:43 ID:???
>>896
ああ、CSSスレなんで、CSSと間違えたよ。ごめんね。
898Name_Not_Found:04/03/17 03:38 ID:???
Card Captor Sakura
899Name_Not_Found:04/03/17 03:44 ID:???
>>898
マジで???????
900Name_Not_Found:04/03/17 03:47 ID:???
質問させて下さい。
BOXを左下に寄せたいと思うのですが、
position:absolute;
bottom:1em;
にしてもIE6ではまだ無理なんですよね?
IE6でも同じように表示させる為の一番簡単な方法は何なんでしょうか…。
901Name_Not_Found:04/03/17 03:57 ID:???
>>900
無理ではない。試したのか?
うまくゆかなかったのならソースを出して、助言を仰ぐこと。
902900:04/03/17 04:04 ID:???
>901
はい、何度も色々と変えて試してます。
IE6でも無理じゃないんですか。先程検索したところ、
これはIE6では無理と書いてあるサイトがあったのでてっきりそう思っていました。

今は、CSSを外部読み込みにして、
#box{position:absolute;
bottom:1em;}
と書きました。
ビルダーを使っていて、ビルダーのプレビューで見るとちゃんと左下寄せになるのですが
IE6で確認すると駄目なんです。
何が原因か教えて頂けると嬉しいです…。
903Name_Not_Found:04/03/17 04:24 ID:???
>>902
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/visualren.html#top
HTMLソースも出しなさい。
他の要素にCSS指定をしてるならそれが悪さしてるかもしれないからコメントアウトしてみなさい。
ビルダーなんて知りません。

下記では成功します。IE6標準/互換モードで確認。
<body>
<p style="position:absolute; bottom:1em;">bottom</p>
</body>
904Name_Not_Found:04/03/17 04:26 ID:???
>>902
>これはIE6では無理と書いてあるサイト
具体的に確かめてみるのでそこのURLを出して下さい。
905889:04/03/17 04:32 ID:QJ0d0RUk
>>892
ブラウザによってはこれでちゃんと表示されるんですか?
906Name_Not_Found:04/03/17 04:33 ID:???
>902 ビルダーのプレビューなんて、あてにならない。
あくまで「プレビュー」なんだから。
Gekko系ブラウザなどで実際に開いてみるほうが確実だ。
907Name_Not_Found:04/03/17 04:35 ID:???
>>905
>h1 { onmouseover="this.style.backcolor='#00FFFF'" }
何これ?
CSSとJavaScriptをごっちゃにする前に、>>4で一から勉強して下さい。
908Name_Not_Found:04/03/17 04:52 ID:???
>>889
onmousoverはJavaScriptのイベントハンドラ。CSSの記述にはない。
 http://tohoho.wakusei.ne.jp/js/write.htm#event
 http://tohoho.wakusei.ne.jp/js/onevent.htm#onMouseOver
CSS2では、:hover疑似クラスをセレクタにすると、カーソルなどのポインタが上に乗った状態を定義できる。
 http://hp.vector.co.jp/authors/VA022006/css/selector.html#dynamic-pseudo-classes
 http://msugai.fc2web.com/web/CSS/selectors.html#link
ダイナミック疑似クラスはあらゆる要素と組合せ可能だが、その適用はブラウザの実装に依存する。
WinIEなどでは始点アンカー(href属性を持つa要素)と組み合わせた場合にのみしか効果を持たない。
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html#pseudo-classes
909889:04/03/17 04:53 ID:QJ0d0RUk
>>907
何度も勉強しようとしたけど、意味不明なんです。
説明の仕方が下手!
910Name_Not_Found:04/03/17 04:55 ID:???
>>909の理解の仕方が下手なだけ。
911889:04/03/17 05:00 ID:QJ0d0RUk
>>908
hoverはどこに組み込めばいいのかわからない・・・
漏れの理解レベルだと、
h1:hover { color: red }
が何故間違ってるのかがわからない。
912Name_Not_Found:04/03/17 05:03 ID:???
>>911
あってるよ。IEは非対応だがね
913900:04/03/17 05:03 ID:???
短時間に何度もすみません。自己解決しました。
>903
<DIV ID="box">
テキスト
</DIV>
だと表示されませんでしたが、
<DIV ID="box"><BR>
テキスト
</DIV>
と、改行を入れたら表示されました。
unicoスキンのフレーム式の日記を作っていて、メニュー画面にこれを使ったので
CGIとの兼ね合いとかがあるのでしょうか…その辺は全くわからないのですが
何度もやっても同じ結果になりました。
因みに、CGIを動作させずにHTMLだけで確認した場合、
最初のタグでもきちんと表示されていました。
説明不足で申し訳ありません。

>904
ttp://tohoho.wakusei.ne.jp/css/reference.htm#position
こちらにそう書いてありました。
これを読んでそう思ったのですが、当方の解釈違いでしたらすみません…
914Name_Not_Found:04/03/17 05:08 ID:???
>>913
> ttp://tohoho.wakusei.ne.jp/css/reference.htm#position
> こちらにそう書いてありました。
それは position: fixed のことだよ。確かにまぎらわしいな
915889:04/03/17 05:10 ID:QJ0d0RUk
>>912
じゃあボクのブラウザだとhoverじゃできないってことじゃないですか。
だからonmouseでやるしかないんです。
hoverを使わない889を簡略化することって出来ないの?
ちなみに889のbackcolorはcolorの間違いです。
916Name_Not_Found:04/03/17 05:14 ID:???
>>915
理解力だけでなく、応用力も無い子なのかな。
h1 a;hover {color:#f00;}
<h1><a href="#id1" id="id1">大見出し</a></h1>
<h1><a href="#id2" id="id2">大見出し2</a></h1>
917Name_Not_Found:04/03/17 05:19 ID:???
>>915
>だからonmouseでやるしかないんです。
 そこまでしてやらなければならないほどどうしてもやりたいことなのかな。

>>916
 結局不思議マクアプになるわけだから、説明すると厨を生む結果になるだけだと思うんです。
918Name_Not_Found:04/03/17 05:34 ID:???
>>917
別に>>916は不思議ではあるまい。日記などでその日付の記事を参照させたいときはよくやる。
例:http://www.remus.dti.ne.jp/~a-satomi/nikki/2004/03b.html
<h2>
<a href="#d15" title="#d15">2004年3月15日</a>
</h2>
919Name_Not_Found:04/03/17 05:36 ID:???
自分自身を参照する理由は在るのか?
920Name_Not_Found:04/03/17 05:39 ID:???
そうやるしかCSSのみで実現できないからだろ
921Name_Not_Found:04/03/17 05:39 ID:???
>>918
ちょっとよく見てみて。
おかしいから。
922Name_Not_Found:04/03/17 05:41 ID:???
>>920
そうやるしか方法がないから不思議マクアプをせざるを得ない、というのは、
テーブルでしか実現できない段組だからテーブルを使う、と同じだな。
画像使ってロールオーバーでもやれば?
923Name_Not_Found:04/03/17 05:44 ID:???
つーか素直にスクリプト組めよ。じゃなきゃbehaviorとか
924Name_Not_Found:04/03/17 05:45 ID:???
そこまでしてやらなければならないほどどうしてもやりたいことなのかな。
925Name_Not_Found:04/03/17 05:45 ID:???
>>922
それはそういう方法で回答したやつに伝えておいてやるよ
926Name_Not_Found:04/03/17 05:47 ID:???
>>925
別に「自分の意見じゃないよ」とか言わなくていいよ。どっちでもいいから。
ただ、不思議マーク付け擁護ウゼー、ってのはどっちでも同じだし。
927Name_Not_Found:04/03/17 05:57 ID:???
>>919 いちいちソースを開かないでもその参照したい箇所のidがわかるから便利。
928Name_Not_Found:04/03/17 06:00 ID:???
>>926
いちいちウゼーとか言わなくていいよ。
擁護も批判もどっちもどっちだし。
929Name_Not_Found:04/03/17 06:01 ID:???
>>927
そのidに、知る価値があるのかね。
918の例を見る限りだと、そうは思えないのだが。
930Name_Not_Found:04/03/17 06:05 ID:???
>>929
何日分もある日記のページで、或る日付の箇所だけ参照させたいときは、
URLに#id名をつけて指定できた方がいい。
931Name_Not_Found:04/03/17 06:08 ID:???
>>930
それは分かった。でも

<h2>
<a href="#d15" id="d15">2004年3月15日</a>
</h2>

というのは不思議マークアップだよ。
932Name_Not_Found:04/03/17 06:31 ID:???
<h2 id="d15"><a href="#d15">2004年3月15日</a></h2> は?
933Name_Not_Found:04/03/17 06:42 ID:???

FAQが加筆されてるので、次スレッド立てる人は気をつけてね。
http://web2ch.s31.xrea.com:8080/?CSSFAQ
934Name_Not_Found:04/03/17 06:45 ID:???
アフォでヴァカな厨房はいつにたっても厨房なんだろうな。
ttp://www.h7.dion.ne.jp/cgi-bin/ezboard/nuru44/2/
ttp://www.h7.dion.ne.jp/~nuru44/
935Name_Not_Found:04/03/17 11:27 ID:???
h1って同じページに複数あっても良いの?
936Name_Not_Found:04/03/17 11:29 ID:???
>>935
アリ
937Name_Not_Found:04/03/17 11:54 ID:???
>927
>930
 参照用のコードを用意しておけばいいんじゃないの?
便利だからそうする、ってのならテーブルレイアウタと同じじゃん。

>932
わけるかどうか、って問題じゃないよ。
938Name_Not_Found:04/03/17 11:56 ID:???
>>935
あってもいいが、新しいh1が出現するような文書ならわける、って人のほうが多いように思う。

#一番大きな見出し=そのページの主旨、と解釈するならば、だけどね。

てか、それ、HTMLの質問だから、初心者スレ行っておいで。
939Name_Not_Found:04/03/17 12:50 ID:???
救援乞うー(´д`;)

<FIELDSET style="border-style : dotted; border-width : 2px;">
<LEGEND class=blockTitle style="background=#FFFFFF">
 unko-!!
</LEGEND>
</FIELDSET>

なぜか上のボーダーだけラインがドットにならない
助けてくださいおながいします。
940Name_Not_Found:04/03/17 12:56 ID:???
>>939
htmlがおかしいからです。
941Name_Not_Found:04/03/17 13:00 ID:???
>940
FIELDSETみたいに見出しつけて、
尚且つボーダーラインをドットタイプにする方法が分からないんでつ(´д`;)
942Name_Not_Found:04/03/17 13:01 ID:???
>>941
方法、っていうか、そもそもCSS理解できてる?
要素に対してボーダーをドットにする、なんてごく一部を除けばどれにでもできるだろ。
943Name_Not_Found:04/03/17 13:08 ID:???
>>942
Tableでやるときはいつも

style="border-style : dotted; border-width : 2px;"

って書いてたんですが
間違ってるんでしょうか(つд⊂)
944Name_Not_Found:04/03/17 13:09 ID:???
>>931のは、Strictスレにまわすべきだ。
945Name_Not_Found:04/03/17 13:13 ID:???
>943
 書いてる文章だけで推測すると、多分「CSSはタグの一部」と思ってると思う。
その認識ではずっとここに聞きにこなけりゃダメだと思う。

>944
 もう終わった話だし、それに、strictスレじゃなくても不思議マーク付けを「ここで」教えるのは本末転倒じゃないかな。
946Name_Not_Found:04/03/17 13:19 ID:???
>>945
HTMLの拡張かなんかだと思ってますた。
>>4
の解説読んで
出直してきまス。
947Name_Not_Found:04/03/17 13:28 ID:???
>>946
とりあえず、セレクタとかもついでに覚えておいで。
948Name_Not_Found:04/03/17 13:48 ID:???
セレクタこれで合ってるかな・・。

<ヘッダ部分のCSS記述>
TABLE.Test {
border-style:dashed;
border-color:#000000;
border-width:2px;
}

<本文>
<table class="Test"><tr>..以下略

あまりにも初心者な質問でスレ消費して申し訳ない。
949Name_Not_Found:04/03/17 13:54 ID:???
CSS内のTABLEとHTMLのtableはどっちかに統一しとこう。
出来れば小文字の方に。更に出来るならセレクタも小文字で。

記述に関しては一応それ以外は問題ない。てか試してみれ。
950Name_Not_Found:04/03/17 14:38 ID:???
>>949
動いたワァ−(*´д`*)
ソースがすっきりコンパクトになりますた。
951Name_Not_Found:04/03/17 17:24 ID:bIz6jXB+
<div>
<span class="gene">001</span><span class="gene">002</span>
</div>
で囲んだものを
span.gene{
background:#ffffff;
border:2px double #336633;
width:100px;
margin:1%;
font-size:100%;
font-weight:bold;
color:#ff9900;
}
このように指定しています。「001」と「002」をそれぞれ中央に移動させるにはどうすればいいでしょうか。
952Name_Not_Found:04/03/17 17:27 ID:???
>>951
text-align:center;
を付け加える。
953Name_Not_Found:04/03/17 17:40 ID:???
ttp://no9.mine.nu/upload/img-box/img20040317173746.jpg
やぱり変だ。FIELDSETには使えないのだろうか_| ̄|○
954Name_Not_Found:04/03/17 17:43 ID:???
スマソ。バグリストに載ってた。
IE5.5以降では使えないんだな・・。
955Name_Not_Found:04/03/17 20:59 ID:???
ねこめしその他がやっていても
<a href="#hoge" id="hoge">なんてキモイな。
別にいいのかも知れんけど
956Name_Not_Found:04/03/17 21:32 ID:???
俺は意味がないと思ってやってない
(それをやるとタイトル中の言葉にアンカーを含められなくなるし)

CSS の content プロパティで表示したりすればいいんでないの
例によってIEじゃ無理だけど
957Name_Not_Found:04/03/17 22:24 ID:???
>>956
それ、ってどれ?
958Name_Not_Found:04/03/17 23:00 ID:???
それ == <a href="#hoge" id="hoge">
じゃねーの?

■みたいなマークにリンクを張る場合もあるみたいだけど
それもおかしい気がするな。
959Name_Not_Found:04/03/17 23:04 ID:???
どっちにしろ、おかしなマーク付けをここで指南するのは本末転倒。
詳しく知りたいならstrictスレおいで、ってことで。
960Name_Not_Found:04/03/18 01:43 ID:???
>>955
idはページ内の指定部分に直接リンクできるようにある
→だれかが#id込みでリンクしようとしても、指定部分のアドレスがわかりにくい
→同位置にリンクしとくとクリックしたらアドレスバーに表示されてコピペできる

リンクする人のことを考えると便利だなと思った。
961Name_Not_Found:04/03/18 02:49 ID:???
listのマークと本文の距離って縮めたり遠くしたり出来ないんでしょうか。
特にこのブラウザに関して、という質問ではなく、です。
962Name_Not_Found:04/03/18 02:53 ID:???
>>961
padding
963Name_Not_Found:04/03/18 03:01 ID:???
>>962
なるほど・・・つまり、一定の距離より縮めることはできないってことになりますかね。
ありがとうございます。
964Name_Not_Found:04/03/18 03:08 ID:???
>>963
paddingの値-とかで行けない?
試してないけど
965Name_Not_Found:04/03/18 03:28 ID:???
>960

>>959嫁バカ
966Name_Not_Found:04/03/18 03:52 ID:???
>>964
いえ、確かpaddingにマイナスの値を指定するのは不正だったかな、と。
967Name_Not_Found:04/03/18 04:56 ID:???
試していないがtext-indentプロパティあたりにマイナス指定すると縮められるかもしれない。
968Name_Not_Found:04/03/18 07:50 ID:Lsdj4THh
ul.button li a {
display: block;
margin: 0;
padding: 0;
background: red;
}
ul.button li a:hover {
background: green;
}
ul.button li a:active {
background: blue;
}

として
<ul class="button">
 <li><a href="#">あ</a></li>
 <li><a href="#">い</a></li>
 <li><a href="#">う</a></li>
</ul>

としたところ、MacIE5.xやSafariではマージン0で疑似ロールオーバーボタンが
実現できましたが、WinIE6.0のみボタンの上下に謎のマージンが入ってしまって
除去できません。ul以下すべての要素にマージン・パディング0を指定してみても
だめなようです。このマージン、どこからやってきているのでしょうか?
969Name_Not_Found:04/03/18 08:21 ID:???
>>968
消極的解決方法
 <li><a href="#">あ</a></li><
 li><a href="#">い</a></li><
 li><a href="#">う</a></li>

積極的解決方法
li a {display:block;} → li a {width:100%;}
970Name_Not_Found:04/03/18 08:43 ID:Lsdj4THh
>>969
どひゃー、お早いレスありがとうございます。ばっちりでした。
li a {
width:100%
display:block;
}
の順番で指定すると保険が効くみたいですね。大感謝です。
971Name_Not_Found:04/03/18 08:56 ID:???

次スレッド立てる人へ。

FAQが加筆されてるので、気をつけてね。
http://web2ch.s31.xrea.com:8080/?CSSFAQ
972Name_Not_Found:04/03/18 09:00 ID:???

>>3の關聯スレッドも、新スレッドになってゐるし。
973Name_Not_Found:04/03/18 09:07 ID:???
>>969
上の書き方はだめ。開始タグの < と要素名の間に空白類文字を入れてはいけない。

 <li><a href="#">あ</a></li><li
 ><a href="#">い</a></li><li
 ><a href="#">う</a></li>

とするか、あるいは

 <li><a href="#">あ</a></li><!--
 --><li><a href="#">い</a></li><!--
 --><li><a href="#">う</a></li>

としよう。
974Name_Not_Found:04/03/18 09:10 ID:???
>>973 これだね。他にもバグ回避法がある。
http://cssbug.at.infoseek.co.jp/detail/winie/b071.html
975Name_Not_Found:04/03/18 10:43 ID:???
781 [04/03/17 00:28 ID:???] Name_Not_Found <sage>

日頃他サイトのHTMLに噛み付いてるからなのだろうか、
自分達の矛盾を指摘されると火が付いたようにここで正当化図るんだな。
976Name_Not_Found:04/03/18 11:58 ID:???
ここにいる人たちが他人のHTML見るとまずなにをすると思う。
間違いを探し出すんだよ。おまいら、こんな人間にだけはなるなよ。
977Name_Not_Found:04/03/18 12:01 ID:???
>>975-976
何か嫌なことでもあったのか?がんがれよ
978Name_Not_Found:04/03/18 13:13 ID:???
>>977
(・∀・)ニヤニヤ
979Name_Not_Found:04/03/18 13:35 ID:???
CSS超初心者なんですが、外部スタイルシートをリンクさせて
HP作っているのですが、別のページに書いたスタイルシートが
うまい具合にHTMLページに反映されなくて困っています。
h1 {
font-family:
sans-serif;
font-size: xx-large;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2em;
text-align: center
}

このように書いたのですが、フォントとか文字のサイズなど反映されない部分が
あるのです。
<link rel="stylesheet" href="yoshi.css" charset="shift_jis" type="text/css">
HEADの部分に上のLINKタグを書きました。
たぶんなにか致命的なミスをしているとは思うのですが
自分ではよくわからなかったので、どなたかご教授くださいませ。
980Name_Not_Found:04/03/18 13:39 ID:???
上の訂正します
h1 {
font-family:sans-serif;
font-size: xx-large;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2em;
text-align: center
}

981Name_Not_Found:04/03/18 13:42 ID:???
むしろ978が(・∀・)ニヤニヤ
982Name_Not_Found:04/03/18 13:51 ID:???
>>980
情報を小出しにしない
983Name_Not_Found:04/03/18 14:02 ID:???
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Style-type" name="yoshi" content="text/css">
<link rel="stylesheet" href="yoshi.css" charset="shift_jis" type="text/css">
<title>yoshi`s homepage</title>
</head>
<body background="../壁紙/tengoku1.jpg" text="ccffff">
<h1>Homepage</h1>
</body>
</html>

変な書き方してすいません、上のがindexのページです。
外部スタイルシートが980に書いたものです。
984Name_Not_Found:04/03/18 14:13 ID:???

 >>981
985Name_Not_Found:04/03/18 14:53 ID:???
>>983
情報を小出しにするな、と言っている
いったい何に不満を感じているのか、私には何も異常が無いように思える
986Name_Not_Found:04/03/18 15:10 ID:???
>>983
ディレクトリを漢字で書いて、しかもそれをHTML内でパス指定するなんて
私はどうかと思いますがね
987Name_Not_Found:04/03/18 15:17 ID:/5i8m75B
フォームの整形について教えてください。

formのfieldsetでlegendを使うと、
MSIEでは何か特別な要素になってしまうらしく、
marginでもpaddingでもtext-indentでも解決しない、
マージンが左上に発生してしまいます。

これを取り去る方法は無いでしょうか?
988Name_Not_Found:04/03/18 15:24 ID:???
また、lebelとinputなんですが、
Mozila・MSIEどちらも、float等の動作が怪しいです。

かといって、labelとinputは同じブロック要素になければならないと、
W3C推奨の文章に書かれていたと思うのですが、
フォームのlabel項目とinput等を整形する際、
tableレイアウトのように綺麗に配置する事は出来ないのでしょうか?

今のところ、labelとinputを別行にしていますが、
これだと項目が増えた際に大変見難くなって強います。
989Name_Not_Found:04/03/18 15:49 ID:???
>>987-988
ソース
990987:04/03/18 16:01 ID:???
HTML:
<form><fieldset>
<legend>ヘッダー</legend>
<label for="name">お名前</label>
<input id="name" name="name" class="text" type="text" value="" />
<label for="pwd">パスワード</label>
<input id="pwd" name="pwd" class="text" type="password" value="" />
<label for="email">電子メール</label>
<input id="email" name="email" class="text" type="text" value="" />
</fieldset></from>

CSS:
form,fieldset {
margin:0px; padding:0px; border:solid 1px #ccc;
}


legend {
display: block; width: 100%; margin: 0px; padding: 0px; text-indent: 0px; border: none; background-color: #eee; color: #000;
}


で表示すると、左端に空白が・・・
ためしにposition:absoluteにしてみても変わらず、
Mozillaではwidth:100%;すら適用されない模様。
991Name_Not_Found:04/03/18 16:02 ID:???
また、

label,input {
display:block;
width: 12ex;
float:left;
}

label {
clear:both;
}

等とするとMSIEで凄い事に・・・
992Name_Not_Found:04/03/18 16:26 ID:???
>>990
異常なし、もしかしてbodyにmargin,paddingの設定がしてあるとかそんなんじゃないだろうな

>>991
やはり異常なし、仕様どおりの表示だが何に不満だ?
993Name_Not_Found:04/03/18 16:32 ID:???
>>992
MSIE6) on WinXP)で表示すると、
legendの左に20pxぐらいの空白が生じますが、
これを無くしたいんです。

また、後者の例では、
inputが複数あった場合、
全て最初のlabelの左にfloatしてしまいます。

992氏の環境で再現されない、
という事は環境依存の問題なのでしょうか・・・
994Name_Not_Found:04/03/18 16:34 ID:???
なぁ、だから
* {margin:0px;padding:0px;}
と指定してもそれは駄目なのか試したんか?

あと、floatの仕様はそれで正しい
995987:04/03/18 16:44 ID:???
>>994

* {margin...}は駄目でした。

floatについては、

label1
input1
label2
input2

と連続した要素がある場合に、
labelとinput両方でdisplay:block&float:leftしlabelでclear:bothすれば、

label1 input1
label2 input2

となると解釈されると考えていますが、MSIE6SP1( on WinXP)では、

label1 input2 input2
label2

となってしまいます。
こちらはMozillaでは上記のように正しく描画されます。
996987:04/03/18 16:46 ID:???
誤:こちらはMozillaでは上記のように正しく描画されます。
正:Mozillaでは前記したように描画されます。
997Name_Not_Found:04/03/18 17:32 ID:???
スレ立てます。
998Name_Not_Found:04/03/18 17:53 ID:???
建ちました。

/* CSS・スタイルシート質問スレッド【29】 */
http://pc2.2ch.net/test/read.cgi/hp/1079598884/
999Name_Not_Found:04/03/18 17:59 ID:???
>>997 ご苦労さん
1000Name_Not_Found:04/03/18 18:02 ID:???
>>998
お疲れさま。

>>1-999
次スレで会おう。
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。