/* CSS･スタイルシート質問スレッド【28】 */
952 ：Name_Not_Found：04/03/17 17:27 ID:???
953 ：Name_Not_Found：04/03/17 17:40 ID:???
ttp://no9.mine.nu/upload/img-box/img20040317173746.jpg
やぱり変だ。FIELDSETには使えないのだろうか_|￣|○
やぱり変だ。FIELDSETには使えないのだろうか_|￣|○
954 ：Name_Not_Found：04/03/17 17:43 ID:???
スマソ。バグリストに載ってた。
IE5.5以降では使えないんだな・・。
IE5.5以降では使えないんだな・・。
955 ：Name_Not_Found：04/03/17 20:59 ID:???
ねこめしその他がやっていても
<a href="#hoge" id="hoge">なんてキモイな。
別にいいのかも知れんけど
<a href="#hoge" id="hoge">なんてキモイな。
別にいいのかも知れんけど
956 ：Name_Not_Found：04/03/17 21:32 ID:???
俺は意味がないと思ってやってない
（それをやるとタイトル中の言葉にアンカーを含められなくなるし）
CSS の content プロパティで表示したりすればいいんでないの
例によってIEじゃ無理だけど
（それをやるとタイトル中の言葉にアンカーを含められなくなるし）
CSS の content プロパティで表示したりすればいいんでないの
例によってIEじゃ無理だけど
957 ：Name_Not_Found：04/03/17 22:24 ID:???
>>956
それ、ってどれ？
それ、ってどれ？
958 ：Name_Not_Found：04/03/17 23:00 ID:???
それ == <a href="#hoge" id="hoge">
じゃねーの？
■みたいなマークにリンクを張る場合もあるみたいだけど
それもおかしい気がするな。
じゃねーの？
■みたいなマークにリンクを張る場合もあるみたいだけど
それもおかしい気がするな。
959 ：Name_Not_Found：04/03/17 23:04 ID:???
どっちにしろ、おかしなマーク付けをここで指南するのは本末転倒。
詳しく知りたいならstrictスレおいで、ってことで。
詳しく知りたいならstrictスレおいで、ってことで。
960 ：Name_Not_Found：04/03/18 01:43 ID:???
>>955
idはページ内の指定部分に直接リンクできるようにある
→だれかが#id込みでリンクしようとしても、指定部分のアドレスがわかりにくい
→同位置にリンクしとくとクリックしたらアドレスバーに表示されてコピペできる
リンクする人のことを考えると便利だなと思った。
idはページ内の指定部分に直接リンクできるようにある
→だれかが#id込みでリンクしようとしても、指定部分のアドレスがわかりにくい
→同位置にリンクしとくとクリックしたらアドレスバーに表示されてコピペできる
リンクする人のことを考えると便利だなと思った。
961 ：Name_Not_Found：04/03/18 02:49 ID:???
listのマークと本文の距離って縮めたり遠くしたり出来ないんでしょうか。
特にこのブラウザに関して、という質問ではなく、です。
特にこのブラウザに関して、という質問ではなく、です。
962 ：Name_Not_Found：04/03/18 02:53 ID:???
>>961
padding
padding
963 ：Name_Not_Found：04/03/18 03:01 ID:???
964 ：Name_Not_Found：04/03/18 03:08 ID:???
965 ：Name_Not_Found：04/03/18 03:28 ID:???
966 ：Name_Not_Found：04/03/18 03:52 ID:???
>>964
いえ、確かpaddingにマイナスの値を指定するのは不正だったかな、と。
いえ、確かpaddingにマイナスの値を指定するのは不正だったかな、と。
967 ：Name_Not_Found：04/03/18 04:56 ID:???
試していないがtext-indentプロパティあたりにマイナス指定すると縮められるかもしれない。
968 ：Name_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を指定してみても
だめなようです。このマージン、どこからやってきているのでしょうか？
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を指定してみても
だめなようです。このマージン、どこからやってきているのでしょうか？
969 ：Name_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%;}
消極的解決方法
<li><a href="#">あ</a></li><
li><a href="#">い</a></li><
li><a href="#">う</a></li>
積極的解決方法
li a {display:block;} → li a {width:100%;}
970 ：Name_Not_Found：04/03/18 08:43 ID:Lsdj4THh
971 ：Name_Not_Found：04/03/18 08:56 ID:???
972 ：Name_Not_Found：04/03/18 09:00 ID:???
>>3の關聯スレッドも、新スレッドになってゐるし。
973 ：Name_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>
としよう。
上の書き方はだめ。開始タグの < と要素名の間に空白類文字を入れてはいけない。
<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>
としよう。
974 ：Name_Not_Found：04/03/18 09:10 ID:???
975 ：Name_Not_Found：04/03/18 10:43 ID:???
781 [04/03/17 00:28 ID:???] Name_Not_Found <sage>
日頃他サイトのHTMLに噛み付いてるからなのだろうか、
自分達の矛盾を指摘されると火が付いたようにここで正当化図るんだな。
日頃他サイトのHTMLに噛み付いてるからなのだろうか、
自分達の矛盾を指摘されると火が付いたようにここで正当化図るんだな。
976 ：Name_Not_Found：04/03/18 11:58 ID:???
ここにいる人たちが他人のHTML見るとまずなにをすると思う。
間違いを探し出すんだよ。おまいら、こんな人間にだけはなるなよ。
間違いを探し出すんだよ。おまいら、こんな人間にだけはなるなよ。
977 ：Name_Not_Found：04/03/18 12:01 ID:???
>>975-976
何か嫌なことでもあったのか？がんがれよ
何か嫌なことでもあったのか？がんがれよ
978 ：Name_Not_Found：04/03/18 13:13 ID:???
>>977
（・∀・）ﾆﾔﾆﾔ
（・∀・）ﾆﾔﾆﾔ
979 ：Name_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タグを書きました。
たぶんなにか致命的なミスをしているとは思うのですが
自分ではよくわからなかったので、どなたかご教授くださいませ。
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タグを書きました。
たぶんなにか致命的なミスをしているとは思うのですが
自分ではよくわからなかったので、どなたかご教授くださいませ。
980 ：Name_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
}
h1 {
font-family:sans-serif;
font-size: xx-large;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2em;
text-align: center
}
981 ：Name_Not_Found：04/03/18 13:42 ID:???
むしろ978が（・∀・）ﾆﾔﾆﾔ
982 ：Name_Not_Found：04/03/18 13:51 ID:???
>>980
情報を小出しにしない
情報を小出しにしない
983 ：Name_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に書いたものです。
"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に書いたものです。
984 ：Name_Not_Found：04/03/18 14:13 ID:???
985 ：Name_Not_Found：04/03/18 14:53 ID:???
986 ：Name_Not_Found：04/03/18 15:10 ID:???
987 ：Name_Not_Found：04/03/18 15:17 ID:/5i8m75B
フォームの整形について教えてください。
formのfieldsetでlegendを使うと、
MSIEでは何か特別な要素になってしまうらしく、
marginでもpaddingでもtext-indentでも解決しない、
マージンが左上に発生してしまいます。
これを取り去る方法は無いでしょうか？
formのfieldsetでlegendを使うと、
MSIEでは何か特別な要素になってしまうらしく、
marginでもpaddingでもtext-indentでも解決しない、
マージンが左上に発生してしまいます。
これを取り去る方法は無いでしょうか？
988 ：Name_Not_Found：04/03/18 15:24 ID:???
また、lebelとinputなんですが、
Mozila・MSIEどちらも、float等の動作が怪しいです。
かといって、labelとinputは同じブロック要素になければならないと、
W3C推奨の文章に書かれていたと思うのですが、
フォームのlabel項目とinput等を整形する際、
tableレイアウトのように綺麗に配置する事は出来ないのでしょうか？
今のところ、labelとinputを別行にしていますが、
これだと項目が増えた際に大変見難くなって強います。
Mozila・MSIEどちらも、float等の動作が怪しいです。
かといって、labelとinputは同じブロック要素になければならないと、
W3C推奨の文章に書かれていたと思うのですが、
フォームのlabel項目とinput等を整形する際、
tableレイアウトのように綺麗に配置する事は出来ないのでしょうか？
今のところ、labelとinputを別行にしていますが、
これだと項目が増えた際に大変見難くなって強います。
989 ：Name_Not_Found：04/03/18 15:49 ID:???
>>987-988
ソース
ソース
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%;すら適用されない模様。
<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%;すら適用されない模様。
991 ：Name_Not_Found：04/03/18 16:02 ID:???
また、
label,input {
display:block;
width: 12ex;
float:left;
}
label {
clear:both;
}
等とするとMSIEで凄い事に・・・
label,input {
display:block;
width: 12ex;
float:left;
}
label {
clear:both;
}
等とするとMSIEで凄い事に・・・
992 ：Name_Not_Found：04/03/18 16:26 ID:???
993 ：Name_Not_Found：04/03/18 16:32 ID:???
>>992
MSIE6) on WinXP)で表示すると、
legendの左に20pxぐらいの空白が生じますが、
これを無くしたいんです。
また、後者の例では、
inputが複数あった場合、
全て最初のlabelの左にfloatしてしまいます。
992氏の環境で再現されない、
という事は環境依存の問題なのでしょうか・・・
MSIE6) on WinXP)で表示すると、
legendの左に20pxぐらいの空白が生じますが、
これを無くしたいんです。
また、後者の例では、
inputが複数あった場合、
全て最初のlabelの左にfloatしてしまいます。
992氏の環境で再現されない、
という事は環境依存の問題なのでしょうか・・・
994 ：Name_Not_Found：04/03/18 16:34 ID:???
なぁ、だから
* {margin:0px;padding:0px;}
と指定してもそれは駄目なのか試したんか？
あと、floatの仕様はそれで正しい
* {margin:0px;padding:0px;}
と指定してもそれは駄目なのか試したんか？
あと、floatの仕様はそれで正しい
>>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では上記のように正しく描画されます。
* {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では上記のように正しく描画されます。
誤：こちらはMozillaでは上記のように正しく描画されます。
正：Mozillaでは前記したように描画されます。
正：Mozillaでは前記したように描画されます。
997 ：Name_Not_Found：04/03/18 17:32 ID:???
スレ立てます。
998 ：Name_Not_Found：04/03/18 17:53 ID:???
999 ：Name_Not_Found：04/03/18 17:59 ID:???
>>997 ご苦労さん
1000 ：Name_Not_Found：04/03/18 18:02 ID:???
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
もう書けないので、新しいスレッドを立ててくださいです。。。