/* CSS・スタイルシート質問スレッド【28】 */
810 :
Name_Not_Found:
812 :
808:04/03/14 19:01 ID:pzt5Jb1x
>>812 試せばすぐわかることをなぜ訊くのですか?
もしWinIEを持ってないにせよ、
>>4から対応表を見ればわかるはず。
>>808=
>>812 >リンクに触ると色が変わるタグ
「タグ」なんて言ってるから、全然わかってない初心者なのかな。
IE6.0で効かせられなかったら、それは君のやり方が間違ってるってことだ。
>>4見て勉強しよう。
815 :
808:04/03/14 19:09 ID:pzt5Jb1x
すいません。。。
スタイルシート初心者なのでよくわかんないんです。
コピペするだけで効果が出るようにしてくれませんか?
文字のところは適当に「あああああ」とかで。
816 :
808:04/03/14 19:10 ID:pzt5Jb1x
一応とほほのスタイルシート入門を見てます。
>>815 むしがいい要求だな。自分で学習しないと応用は効かないぞ。
>コピペするだけで効果が出るようにしてくれませんか?
>>809がそれ。
819 :
810:04/03/14 19:16 ID:???
winIE(XP)、MacIE,NN(Os9)で確認しています。
ちゃんと表示されるのはNN(Os9)だけでしたが
winIEを標準にしたいと思います。
td {font-size:medium;}はできるみたいですが
td {font-size:smaller;}が小さくなりすぎてしまいます。
tableをやめてフォント指定もやめて一から出直します。
ありがとうございました
>>819 早まるな。
>td {font-size:smaller;}が小さくなりすぎてしまいます。
継承すれば、smallerのさらにsmallerになるんだから当然では?
>>819 キーワード指定(medium,smaller)を止めて%単位にすれば済む話。
body {font-size:100%;}
これが他のfont-size指定の基準値になる。
smallerの代りに td {font-size:85%;} とか。
822 :
808:04/03/14 19:25 ID:pzt5Jb1x
>>818 809をどこにコピペすればいいかわかんないんです。
htmlの<body>〜</body>の中にコピペするだけで「あああああ」の上に文字を当てると消えるようにしてくれませんか?
<a onmouseover="this.style.visibility='hidden'" onmouseout="this.style.visibility='visible'">ああああ</a>
反則?
>>808その他
825 :
810:04/03/14 19:56 ID:???
>>819-810 今winIEで検証できないのですが
MacIEが表示できてるので希望がもてそうです。
ただ%指定にしてWinIE6.0互換モード及び5.5以前の場合どうなるんだろう…?
826 :
◆vnnY55uM7o :04/03/14 20:33 ID:XNU0L1sD
>>826 「OSやブラウザの種類とヴァージョンについては必ず明記してください。」
>>1 も読めない糞コテハンヤローはもう来なくていいよ。
table要素に対して、
margin-left:auto;
margin-right:auto;
をどうぞ。
div要素に指定してるけど、それは間違い。
div{background-color:fcc}とでもしてみろ。
なんでセンタリングされないかがわかるぞ。
div{
margin-left:auto;
margin-right:auto
text-align:justify
}
>margin-right:auto
>text-align:justify
これのせいとかないだろうな・・・
>>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;
}
831 :
Name_Not_Found:04/03/14 22:36 ID:M/gcTsSQ
>>830 IEはmargin-****:auto;がバグで効かないので、
テーブルタグを囲んでいる <div>〜</div> に
text-align:center;を指定してみて下さい。
>>830 DOCTYPE宣言がない糞HTML文書だと後方互換モードになるから、
margin-left:auto; margin-right:auto; は効かない。
>>732の言ってるようなDiv厨ってどういうことですか?
Table構造をDivで再現するのってあんまりよくない?
かなりマジレス希望です。
>>833 レイアウトの為だけにdiv要素を使う。
それぞれのdiv要素の思想を、id属性で表すと良いんじゃない?
みなさんレスありがとうございます。
>>831 そうですね、考えてみます
>>882 なるほど後方互換モードでしたか。
臨時に管理しているページで、残念ながら
次の管理人さんがどんなマークアップ言語やエディターを使うのか?
どんな文字コードのサーバを使うのか等が決まっていませんので
DOCTYPE宣言やcharsetの定義ができません。
>>833 テーブル(表)の位置を調節する=物理的な事のためにDivを使うのは
論理的マークアップの趣旨に沿った行為ではないから
でもCSSを使おうとした動機は
ページ数が多いのでインラインでいちいちタグを書くのは面倒臭いということです。
ストリクト教徒には怒られそうですが効率を考えて物理タグも場合のよっては使います。
>>835 > ストリクト教徒には怒られそうですが効率を考えて物理タグも場合のよっては使います。
お前の好きなようにするのは全然かまわないから、黙ってて欲しい。
>>833 構造は、HTMLで、の「構造は」の意味が理解できるまで学べば「そういうことか」とわかるはず。
臨界点を突破すると、HTMLの善悪の判断ができるようになる。
自分でも前と違ったことがわかるぐらいに。
いわゆる悟りを開くというやつヽ(゚∀。)ノ?
// 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 かもしれませんが、未確認のようです。
何かソースの誤りとか対策とかありますでしょうか?
>>838 二個目のボックス要素のWIDTHを明記(100%でも)してやれば取りあえず回避できる。
>>839 うまくいきました!
100%で問題無いので、くっつけておこうと思います。
ありがとうございました。
841 :
Name_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 の段組の各サイトは参照したのですが、
解決策は見つかりませんでした。よろしくお願いします。
>>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>
まぁこんな感じ。つか、もうちょっと試行錯誤しようぜ。
>>842 うまくいきました!
<body> の背景色を #menu のそれと同じにする、というのは試していたのですが、
不都合が出てきたので他の方法を模索中でした。その方向性でもう一歩踏み込ん
でおけばよかったのですね。どうもありがとうございました。
844 :
Name_Not_Found:04/03/15 18:34 ID:I54oaKXO
ブラウザの幅に関係なく、ボックスを左右中央にもってくるには、どうしたらいいんでしょうか?
846 :
844: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;}
>>846 margin-left : 20%;
margin-right : 20%
と左右のマージンを同じにするか
width : 500px;
margin-left : auto;
margin-right : auto
と左右のマージンをautoにする。
で、できるかどうか試してみて。
さすがに847の神経を疑ってしまう
851 :
846:04/03/15 21:52 ID:G35zyl5U
>>847 レスありがとうございます。
どちらとも右に寄っちゃってダメでした・・・。
>>5見てもできませんでした。
逃げた方がいいですか?真剣なんですがw
>>851 >>5見て無理だったら逃げた方が(・∀・)イイ!!
>>5に書いてることと同じことしか教えてあげられないし。
853 :
Name_Not_Found:04/03/15 22:57 ID:nQhjkCKU
タイトル
こんてんつ
┌─────┐ ┌─────┐
│1見出し │ │2見出し │
│ ・項目 │ │ ・項目 │
│ ・項目 │ │ ・項目 │
└─────┘ └─────┘
┌─────┐ ┌─────┐
│3見出し │ │4見出し │
│ ・項目 │ │ ・項目 │
│ ・項目 │ │ ・項目 │
└─────┘ └─────┘
・
・
・
こんなかんじの段組をやりたく、
>>6のサイトを参考にfloatで組んでみようと思ったのですが、
うまくいきません。ヒントを教えてもらえないでしょうか。
1,2と3,4若しくは1,3と2,4をdviで括っちゃうとやりやすいんじゃないかな。
>>853 どうやって、どううまくゆかなかったのか、CSS・HTMLのソースを出してくれないと助言できません。
dviってなんだよ…俺。
858 :
853: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>
859 :
853: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%;
}
861 :
846=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;}
どこが間違ってるんでしょうか?
>>861 何にそのスタイルを適用させてるのかわからない。HTMLソースを抄出して。
標準モードか互換モードかも書いて。
それからposition : absolute;を指定すると、初期値left:0;になるのでは。
>>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>
>>863 >float:clear;
おいおい……それは無いぜ。HTMLはいいけどね。
>>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>
867 :
853:04/03/15 23:47 ID:???
ほんとありがたいです。これでなんとかできそうです。
取り敢えず今日は寝ます。
DVIDVI
でゅびでゅび
もえ
869 :
861:04/03/16 01:21 ID:???
>>862 標準モードですが、position : absolute;を外したら
すんなりと中央に配置されちゃいました。
top : 100px; は無視されてましたが。
なんとかなって良かったです。
今までレスくれた方、本当にどうもありがとうございました。
871 :
Name_Not_Found:04/03/16 05:56 ID:HNrAiUnI
テーブル内にある文字全てにスタイルシートの効果を出したいんですが、
全ての<TD></TD>の間に1つづつ入れるのには量が多すぎます。
まとめて効果を出すことって出来ないんでしょうか?
そんなもの基本中の基本だろ。
春だなぁ
874 :
Name_Not_Found:04/03/16 06:33 ID:HNrAiUnI
>>872 まとめて色を変えるくらいなら知ってます。
TD { color:#FF0000 }ってやればいいんでしょ?
けど、a:visited { text-decoration:none; color:#FF0000 } を全TDに効果を出させたいときはどうすればいいの?
876 :
Name_Not_Found:04/03/16 06:46 ID:HNrAiUnI
>>875 すいません。それだけじゃよくわからないです。
>>875はたぶん呆れてレスつける気をなくしていると思うので・・
>>875で方法をズバリ教えてもらっているんだから、ぐぐるとかしてみろ。
それでなくても
>>4の3つめとかに子孫セレクタも子セレクタも説明あるだろが。
これが、春か
これが若さか・・・
質問の仕方くらいなんとかならんのかね。
>>871 >>874 なんて情報後出しで質問の内容変わってるし。
td a:visited {}
882 :
Name_Not_Found:04/03/16 22:55 ID:lCPqa162
ぶっちゃけCSSなんていらないわけで
テーブルがろくニ使えないアホがCSSを使うわけであって
テーブルを思い通りに扱えるアホはCSS使っちゃ駄目ですか??
>>882 |
〜〜〜〜〜〜〜〜|〜〜〜〜〜〜〜〜〜〜
>( c´_ゝ`) |
|
>( c´_ゝ`) J
>( c´_ゝ`)
|
〜〜〜〜〜〜〜〜|〜〜〜〜〜〜〜〜〜〜
| >( c´_ゝ`)
|
J >( c´_ゝ`)
>( c´_ゝ`)
885 :
883:04/03/16 23:12 ID:???
886 :
Name_Not_Found:04/03/16 23:28 ID:DTeSrwMm
<a href=リンク先のアドレス>リンク</a>
を毎回指定せずに、<a>には全て同じリンクをするようにすることって出来ますか?
>>886 スタイルシートってのは「デザイン」を扱うもの
>>886 cssじゃ無理。
<BASE target="">とか、JavaScriptとか。
889 :
Name_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>
これだと上手くいかないんですよね。
891 :
Name_Not_Found:04/03/17 01:08 ID:MDpQKPcD
>>890 いくら見ても理解出来ないんですけど。
889のやつもコピペしていじっただけだし。
>>891 お前の使ってるブラウザが悪いだけです。
function()
>>893 backgroundColorじゃなくbackground-Color
>>896 ああ、CSSスレなんで、CSSと間違えたよ。ごめんね。
Card Captor Sakura
質問させて下さい。
BOXを左下に寄せたいと思うのですが、
position:absolute;
bottom:1em;
にしてもIE6ではまだ無理なんですよね?
IE6でも同じように表示させる為の一番簡単な方法は何なんでしょうか…。
>>900 無理ではない。試したのか?
うまくゆかなかったのならソースを出して、助言を仰ぐこと。
902 :
900:04/03/17 04:04 ID:???
>901
はい、何度も色々と変えて試してます。
IE6でも無理じゃないんですか。先程検索したところ、
これはIE6では無理と書いてあるサイトがあったのでてっきりそう思っていました。
今は、CSSを外部読み込みにして、
#box{position:absolute;
bottom:1em;}
と書きました。
ビルダーを使っていて、ビルダーのプレビューで見るとちゃんと左下寄せになるのですが
IE6で確認すると駄目なんです。
何が原因か教えて頂けると嬉しいです…。
>>902 >これはIE6では無理と書いてあるサイト
具体的に確かめてみるのでそこのURLを出して下さい。
905 :
889:04/03/17 04:32 ID:QJ0d0RUk
>>892 ブラウザによってはこれでちゃんと表示されるんですか?
>902 ビルダーのプレビューなんて、あてにならない。
あくまで「プレビュー」なんだから。
Gekko系ブラウザなどで実際に開いてみるほうが確実だ。
>>905 >h1 { onmouseover="this.style.backcolor='#00FFFF'" }
何これ?
CSSとJavaScriptをごっちゃにする前に、
>>4で一から勉強して下さい。
909 :
889:04/03/17 04:53 ID:QJ0d0RUk
>>907 何度も勉強しようとしたけど、意味不明なんです。
説明の仕方が下手!
911 :
889:04/03/17 05:00 ID:QJ0d0RUk
>>908 hoverはどこに組み込めばいいのかわからない・・・
漏れの理解レベルだと、
h1:hover { color: red }
が何故間違ってるのかがわからない。
913 :
900: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 こちらにそう書いてありました。
これを読んでそう思ったのですが、当方の解釈違いでしたらすみません…
915 :
889:04/03/17 05:10 ID:QJ0d0RUk
>>912 じゃあボクのブラウザだとhoverじゃできないってことじゃないですか。
だからonmouseでやるしかないんです。
hoverを使わない889を簡略化することって出来ないの?
ちなみに889のbackcolorはcolorの間違いです。
>>915 理解力だけでなく、応用力も無い子なのかな。
h1 a;hover {color:#f00;}
<h1><a href="#id1" id="id1">大見出し</a></h1>
<h1><a href="#id2" id="id2">大見出し2</a></h1>
>>915 >だからonmouseでやるしかないんです。
そこまでしてやらなければならないほどどうしてもやりたいことなのかな。
>>916 結局不思議マクアプになるわけだから、説明すると厨を生む結果になるだけだと思うんです。
自分自身を参照する理由は在るのか?
そうやるしかCSSのみで実現できないからだろ
>>918 ちょっとよく見てみて。
おかしいから。
>>920 そうやるしか方法がないから不思議マクアプをせざるを得ない、というのは、
テーブルでしか実現できない段組だからテーブルを使う、と同じだな。
画像使ってロールオーバーでもやれば?
つーか素直にスクリプト組めよ。じゃなきゃbehaviorとか
そこまでしてやらなければならないほどどうしてもやりたいことなのかな。
>>922 それはそういう方法で回答したやつに伝えておいてやるよ
>>925 別に「自分の意見じゃないよ」とか言わなくていいよ。どっちでもいいから。
ただ、不思議マーク付け擁護ウゼー、ってのはどっちでも同じだし。
>>919 いちいちソースを開かないでもその参照したい箇所のidがわかるから便利。
>>926 いちいちウゼーとか言わなくていいよ。
擁護も批判もどっちもどっちだし。
>>927 そのidに、知る価値があるのかね。
918の例を見る限りだと、そうは思えないのだが。
>>929 何日分もある日記のページで、或る日付の箇所だけ参照させたいときは、
URLに#id名をつけて指定できた方がいい。
>>930 それは分かった。でも
<h2>
<a href="#d15" id="d15">2004年3月15日</a>
</h2>
というのは不思議マークアップだよ。
<h2 id="d15"><a href="#d15">2004年3月15日</a></h2> は?
h1って同じページに複数あっても良いの?
>927
>930
参照用のコードを用意しておけばいいんじゃないの?
便利だからそうする、ってのならテーブルレイアウタと同じじゃん。
>932
わけるかどうか、って問題じゃないよ。
>>935 あってもいいが、新しいh1が出現するような文書ならわける、って人のほうが多いように思う。
#一番大きな見出し=そのページの主旨、と解釈するならば、だけどね。
てか、それ、HTMLの質問だから、初心者スレ行っておいで。
救援乞うー(´д`;)
<FIELDSET style="border-style : dotted; border-width : 2px;">
<LEGEND class=blockTitle style="background=#FFFFFF">
unko-!!
</LEGEND>
</FIELDSET>
なぜか上のボーダーだけラインがドットにならない
助けてくださいおながいします。
>940
FIELDSETみたいに見出しつけて、
尚且つボーダーラインをドットタイプにする方法が分からないんでつ(´д`;)
>>941 方法、っていうか、そもそもCSS理解できてる?
要素に対してボーダーをドットにする、なんてごく一部を除けばどれにでもできるだろ。
>>942 Tableでやるときはいつも
style="border-style : dotted; border-width : 2px;"
って書いてたんですが
間違ってるんでしょうか(つд⊂)
>943
書いてる文章だけで推測すると、多分「CSSはタグの一部」と思ってると思う。
その認識ではずっとここに聞きにこなけりゃダメだと思う。
>944
もう終わった話だし、それに、strictスレじゃなくても不思議マーク付けを「ここで」教えるのは本末転倒じゃないかな。
>>945 HTMLの拡張かなんかだと思ってますた。
>>4 の解説読んで
出直してきまス。
>>946 とりあえず、セレクタとかもついでに覚えておいで。
セレクタこれで合ってるかな・・。
<ヘッダ部分のCSS記述>
TABLE.Test {
border-style:dashed;
border-color:#000000;
border-width:2px;
}
<本文>
<table class="Test"><tr>..以下略
あまりにも初心者な質問でスレ消費して申し訳ない。
CSS内のTABLEとHTMLのtableはどっちかに統一しとこう。
出来れば小文字の方に。更に出来るならセレクタも小文字で。
記述に関しては一応それ以外は問題ない。てか試してみれ。
>>949 動いたワァ−(*´д`*)
ソースがすっきりコンパクトになりますた。
951 :
Name_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」をそれぞれ中央に移動させるにはどうすればいいでしょうか。
>>951 text-align:center;
を付け加える。
スマソ。バグリストに載ってた。
IE5.5以降では使えないんだな・・。
ねこめしその他がやっていても
<a href="#hoge" id="hoge">なんてキモイな。
別にいいのかも知れんけど
俺は意味がないと思ってやってない
(それをやるとタイトル中の言葉にアンカーを含められなくなるし)
CSS の content プロパティで表示したりすればいいんでないの
例によってIEじゃ無理だけど
それ == <a href="#hoge" id="hoge">
じゃねーの?
■みたいなマークにリンクを張る場合もあるみたいだけど
それもおかしい気がするな。
どっちにしろ、おかしなマーク付けをここで指南するのは本末転倒。
詳しく知りたいならstrictスレおいで、ってことで。
>>955 idはページ内の指定部分に直接リンクできるようにある
→だれかが#id込みでリンクしようとしても、指定部分のアドレスがわかりにくい
→同位置にリンクしとくとクリックしたらアドレスバーに表示されてコピペできる
リンクする人のことを考えると便利だなと思った。
listのマークと本文の距離って縮めたり遠くしたり出来ないんでしょうか。
特にこのブラウザに関して、という質問ではなく、です。
>>962 なるほど・・・つまり、一定の距離より縮めることはできないってことになりますかね。
ありがとうございます。
>>963 paddingの値-とかで行けない?
試してないけど
>>964 いえ、確かpaddingにマイナスの値を指定するのは不正だったかな、と。
試していないが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を指定してみても
だめなようです。このマージン、どこからやってきているのでしょうか?
>>968 消極的解決方法
<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
>>969 どひゃー、お早いレスありがとうございます。ばっちりでした。
li a {
width:100%
display:block;
}
の順番で指定すると保険が効くみたいですね。大感謝です。
>>3の關聯スレッドも、新スレッドになってゐるし。
>>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>
としよう。
781 [04/03/17 00:28 ID:???] Name_Not_Found <sage>
日頃他サイトのHTMLに噛み付いてるからなのだろうか、
自分達の矛盾を指摘されると火が付いたようにここで正当化図るんだな。
ここにいる人たちが他人のHTML見るとまずなにをすると思う。
間違いを探し出すんだよ。おまいら、こんな人間にだけはなるなよ。
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タグを書きました。
たぶんなにか致命的なミスをしているとは思うのですが
自分ではよくわからなかったので、どなたかご教授くださいませ。
上の訂正します
h1 {
font-family:sans-serif;
font-size: xx-large;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2em;
text-align: center
}
むしろ978が(・∀・)ニヤニヤ
<!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に書いたものです。
>>983 情報を小出しにするな、と言っている
いったい何に不満を感じているのか、私には何も異常が無いように思える
>>983 ディレクトリを漢字で書いて、しかもそれをHTML内でパス指定するなんて
私はどうかと思いますがね
987 :
Name_Not_Found:04/03/18 15:17 ID:/5i8m75B
フォームの整形について教えてください。
formのfieldsetでlegendを使うと、
MSIEでは何か特別な要素になってしまうらしく、
marginでもpaddingでもtext-indentでも解決しない、
マージンが左上に発生してしまいます。
これを取り去る方法は無いでしょうか?
また、lebelとinputなんですが、
Mozila・MSIEどちらも、float等の動作が怪しいです。
かといって、labelとinputは同じブロック要素になければならないと、
W3C推奨の文章に書かれていたと思うのですが、
フォームのlabel項目とinput等を整形する際、
tableレイアウトのように綺麗に配置する事は出来ないのでしょうか?
今のところ、labelとinputを別行にしていますが、
これだと項目が増えた際に大変見難くなって強います。
990 :
987: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%;すら適用されない模様。
また、
label,input {
display:block;
width: 12ex;
float:left;
}
label {
clear:both;
}
等とするとMSIEで凄い事に・・・
>>990 異常なし、もしかしてbodyにmargin,paddingの設定がしてあるとかそんなんじゃないだろうな
>>991 やはり異常なし、仕様どおりの表示だが何に不満だ?
>>992 MSIE6) on WinXP)で表示すると、
legendの左に20pxぐらいの空白が生じますが、
これを無くしたいんです。
また、後者の例では、
inputが複数あった場合、
全て最初のlabelの左にfloatしてしまいます。
992氏の環境で再現されない、
という事は環境依存の問題なのでしょうか・・・
なぁ、だから
* {margin:0px;padding:0px;}
と指定してもそれは駄目なのか試したんか?
あと、floatの仕様はそれで正しい
995 :
987: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では上記のように正しく描画されます。
996 :
987:04/03/18 16:46 ID:???
誤:こちらはMozillaでは上記のように正しく描画されます。
正:Mozillaでは前記したように描画されます。
スレ立てます。
1001 :
1001:
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。