【DW】HTML/CSS質問・優しく答えるスレ【神降臨】
>>944のコピペこわい
953 ：Name_Not_Found：2009/06/30(火) 20:35:59 ID:???
954 ：Name_Not_Found：2009/07/01(水) 12:29:21 ID:JooizKUC
こっち埋めてから次仕えよ
955 ：Name_Not_Found：2009/07/01(水) 17:38:12 ID:???
１枚の画像(hoge.gif)を用意して、
マウスのフォーカスが画像を通過した時だけ
画像の色を反転させるにはどうすればよいでしょうか？
ググッたところCSSで
filter: invert();
というCSSを使うであろう事は想像出来るのですが
肝心の画像の上をマウスが通過した場合にのみ色を逆転させる方法が分りません。
マウスのフォーカスが画像を通過した時だけ
画像の色を反転させるにはどうすればよいでしょうか？
ググッたところCSSで
filter: invert();
というCSSを使うであろう事は想像出来るのですが
肝心の画像の上をマウスが通過した場合にのみ色を逆転させる方法が分りません。
956 ：Name_Not_Found：2009/07/01(水) 18:08:45 ID:???
通過というかマウスがあたってる時のみ行うならhover擬似クラス
ただし
aタグ以外のhover擬似クラスはIE6以前は対応してない
fiterプロパティはIE以外のブラウザは正式対応してない
ただし
aタグ以外のhover擬似クラスはIE6以前は対応してない
fiterプロパティはIE以外のブラウザは正式対応してない
957 ：Name_Not_Found：2009/07/01(水) 18:11:09 ID:???
>>955
hover使えばよろし。
しかしながらfilterはブラウザ独自のはずだからあんまりオススメしない。
どちらかというと、通常の画像と色相反転した画像をひっつけて1枚の画像にして
hoverとpositionを使って位置をずらすようにする方法を、最近よく見かける。
hover使えばよろし。
しかしながらfilterはブラウザ独自のはずだからあんまりオススメしない。
どちらかというと、通常の画像と色相反転した画像をひっつけて1枚の画像にして
hoverとpositionを使って位置をずらすようにする方法を、最近よく見かける。
958 ：Name_Not_Found：2009/07/01(水) 20:20:18 ID:HcMmVmvA
少し前、皆さんにお世話になった者です。あの時はありがとうございました。
またしても質問で申し訳ないのですが、IE8だとクリックできるリンクがFirefox,
GoogleChromeでクリック出来ません。hover擬似クラスも動作してないみたいです。
色々ググってはみたのですが、IE6のPNG画像とか、今回のケースとは関係なさそう
な情報ばかりで困っています。皆さん何か心当たりは無いでしょうか？
またしても質問で申し訳ないのですが、IE8だとクリックできるリンクがFirefox,
GoogleChromeでクリック出来ません。hover擬似クラスも動作してないみたいです。
色々ググってはみたのですが、IE6のPNG画像とか、今回のケースとは関係なさそう
な情報ばかりで困っています。皆さん何か心当たりは無いでしょうか？
959 ：Name_Not_Found：2009/07/01(水) 20:28:43 ID:???
コードを書け
960 ：Name_Not_Found：2009/07/01(水) 21:11:38 ID:HcMmVmvA
申し訳ありません。忘れていました。
<div class="Master">
<div class="OutFrame"></div>
<div class="Header">
ヘッダー内のリンクは機能している
</div>
<ul id="Menubar">
メニューバー内のリンクも機能している
</ul>
<div class="Main">
メインコンテンツ内のリンクが機能していない
hoverしてもカーソルが変化しない。
hover時の設定が機能しない。
押せない
</div>
<div class="Footer">
</div>
</div>
こんな感じです
<div class="Master">
<div class="OutFrame"></div>
<div class="Header">
ヘッダー内のリンクは機能している
</div>
<ul id="Menubar">
メニューバー内のリンクも機能している
</ul>
<div class="Main">
メインコンテンツ内のリンクが機能していない
hoverしてもカーソルが変化しない。
hover時の設定が機能しない。
押せない
</div>
<div class="Footer">
</div>
</div>
こんな感じです
961 ：Name_Not_Found：2009/07/01(水) 21:12:29 ID:???
>>960
htmlだけじゃなくてcssも書きなよ
htmlだけじゃなくてcssも書きなよ
962 ：Name_Not_Found：2009/07/01(水) 21:38:24 ID:HcMmVmvA
a{
color: #FF6633;
}
a:link{
color: #FF6633;
}
a:visited{
color: #FF6633;
}
a:hover{
color:red;
}
a:active{
color: #FF6633;
}
アンカーに指定しているスタイルはこんな感じです。
color: #FF6633;
}
a:link{
color: #FF6633;
}
a:visited{
color: #FF6633;
}
a:hover{
color:red;
}
a:active{
color: #FF6633;
}
アンカーに指定しているスタイルはこんな感じです。
963 ：Name_Not_Found：2009/07/01(水) 21:45:37 ID:???
>962
CSSを適用させなければリンクは効くの？
あと問題の箇所はdivタグ直下？
他のタグの入れ子になってるなら、特定タグ内の時だけ問題が起こる？
CSSを適用させなければリンクは効くの？
あと問題の箇所はdivタグ直下？
他のタグの入れ子になってるなら、特定タグ内の時だけ問題が起こる？
964 ：Name_Not_Found：2009/07/01(水) 22:12:26 ID:HcMmVmvA
アンカー関連の部分をコメントアウトしてみましたがやはり機能しません。
メニューバー用に設定したアンカースタイルもコメントアウトしてみたら押せなくなりました。
問題のリンクは、ほとんど<div class="Main">の直接の子要素ではありません。別のdivやul,p要素等の子要素です
メニューバー用に設定したアンカースタイルもコメントアウトしてみたら押せなくなりました。
問題のリンクは、ほとんど<div class="Main">の直接の子要素ではありません。別のdivやul,p要素等の子要素です
965 ：Name_Not_Found：2009/07/01(水) 22:45:19 ID:???
div class="main"の直下に問題のaタグもってきてみ
それでもリンク効かないならmainに指定してるcssがおかしいんじゃね
それでもリンク効かないならmainに指定してるcssがおかしいんじゃね
966 ：Name_Not_Found：2009/07/01(水) 22:57:52 ID:HcMmVmvA
直接の子供にしてみましたがだめです。mainに指定されてるCSSは
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
てな感じです
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
てな感じです
967 ：Name_Not_Found：2009/07/01(水) 23:21:33 ID:???
リンクがおかしいのなら
・単純にアンカータグや周囲のタグを間違えてる（単純な記述ミス）
・該当要素の上に被さってる要素がある（positionとかz-indexとかで）
どっちかだろうと思う
a:link,visited,hover,activeで指定したスタイルが適用されているようなら後者な
・単純にアンカータグや周囲のタグを間違えてる（単純な記述ミス）
・該当要素の上に被さってる要素がある（positionとかz-indexとかで）
どっちかだろうと思う
a:link,visited,hover,activeで指定したスタイルが適用されているようなら後者な
968 ：Name_Not_Found：2009/07/02(木) 00:10:10 ID:/AkBgeKF
質問です。
htmlで文章を書くとき
例えば
りんご 100円
オレンジ 150円
パイナップル 300円
みたいに果物名と値段を書いて値段の部分で頭をそろえたいので
その間にスペースを入れたいのですが
空白の部分に を入れて例えば
りんご 100円
オレンジ 150円
パイナップル 300円ってやり方で問題ないですか？
50個くらい商品があるのでかなり をいれなきゃいけなく
なるので、このやり方でいいのかな？と迷ってます。
他にもっといい方法がありますでしょうか？
htmlで文章を書くとき
例えば
りんご 100円
オレンジ 150円
パイナップル 300円
みたいに果物名と値段を書いて値段の部分で頭をそろえたいので
その間にスペースを入れたいのですが
空白の部分に を入れて例えば
りんご 100円
オレンジ 150円
パイナップル 300円ってやり方で問題ないですか？
50個くらい商品があるのでかなり をいれなきゃいけなく
なるので、このやり方でいいのかな？と迷ってます。
他にもっといい方法がありますでしょうか？
969 ：Name_Not_Found：2009/07/02(木) 00:10:32 ID:Q/Q/2P4u
フッター直下に入れてみたらリンクが機能しました。ということはmainがいけないんでしょうか。
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
div.footer{
width:inherit;
margin:0 auto 0 auto;
position:fixed;
bottom:0;
background-color:#FFFFFF;
border-width:2px 0 0 0;
border-color:#000033;
border-style:solid;
}
といった感じにスタイルを指定しています
div.main{
width:inherit;
margin:0 auto 0 auto;
padding:59pt 0px 41pt 0px;
clear:both;
}
div.footer{
width:inherit;
margin:0 auto 0 auto;
position:fixed;
bottom:0;
background-color:#FFFFFF;
border-width:2px 0 0 0;
border-color:#000033;
border-style:solid;
}
といった感じにスタイルを指定しています
970 ：Name_Not_Found：2009/07/02(木) 00:12:40 ID:/AkBgeKF
971 ：Name_Not_Found：2009/07/02(木) 00:22:07 ID:???
>>970
するべきじゃない
だってフォントによって幅変わるからずれちゃうじゃん
でも別に読めるっちゃ読めるから気にしないならおk!
気にするならtable使うか
CSSで、
display:inline;width:***px;みたいに書けばおk
するべきじゃない
だってフォントによって幅変わるからずれちゃうじゃん
でも別に読めるっちゃ読めるから気にしないならおk!
気にするならtable使うか
CSSで、
display:inline;width:***px;みたいに書けばおk
CSSだけでやるよりやっぱりJavaScriptでやる事にしました。
973 ：Name_Not_Found：2009/07/02(木) 00:57:59 ID:???
974 ：Name_Not_Found：2009/07/02(木) 01:02:20 ID:/AkBgeKF
>>971
そうなんですか、今全角のスペース入れて調整したんですが
フォントが変わったらずれてきますかね。
一応フォントはMSゴシックで統一してるんですが。
りんご 100円 バニラ 200円 コーラ 250円
オレンジ 150円 チョコレート 200円 カルピス 250円
パイナップル 300円 ハワイアンブルー 200円 ジンジャエール 250円
みたいにしたいんですが、商品名によってかなり幅が違ってきます。
でも値段は頭そろえたいんですが。
テーブルは使いたくないんですが、cssの記述も商品1個1個に適用されるんでしょうか？
そうなんですか、今全角のスペース入れて調整したんですが
フォントが変わったらずれてきますかね。
一応フォントはMSゴシックで統一してるんですが。
りんご 100円 バニラ 200円 コーラ 250円
オレンジ 150円 チョコレート 200円 カルピス 250円
パイナップル 300円 ハワイアンブルー 200円 ジンジャエール 250円
みたいにしたいんですが、商品名によってかなり幅が違ってきます。
でも値段は頭そろえたいんですが。
テーブルは使いたくないんですが、cssの記述も商品1個1個に適用されるんでしょうか？
975 ：Name_Not_Found：2009/07/02(木) 01:42:50 ID:???
>>974
もちろん。簡単に書くとこんな感じ。
<head>区間か既存のスタイルシートの中に以下をいれて、
<style type="text/css">
.item{width:100px;}
.price{width:50px;}
</style>
表示する部分
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span><br>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span><br>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
もちろん。簡単に書くとこんな感じ。
<head>区間か既存のスタイルシートの中に以下をいれて、
<style type="text/css">
.item{width:100px;}
.price{width:50px;}
</style>
表示する部分
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span><br>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
<span class="item">りんご</span>
<span class="price">100円</span><br>
<span class="item">ばにら</span>
<span class="price">200円</span>
<span class="item">じんじゃえーる</span>
<span class="price">230円</span>
<span class="item">りんご</span>
<span class="price">100円</span>
976 ：Name_Not_Found：2009/07/02(木) 01:49:35 ID:/AkBgeKF
977 ：Name_Not_Found：2009/07/02(木) 06:42:05 ID:???
マークアップは定義リストだろｊｋ
978 ：Name_Not_Found：2009/07/02(木) 10:52:47 ID:???
span要素やdisplay:inlineした要素にはwidthは効かんと思うのだが
マークアップは>>977に激しく同意
縦に並べるだけなら単にfloatでdtをleft、ddをrightに振るのもいいかと
>>974のように横にも並べるなら、テキトーだけど、
dl, dt, dd { margin: 0; padding: 0; }
dl { width: 33em; }
dt { float: left; width: 8em; text-align: left; }
dd { float: left; width: 3em; text-align: right; }
<dl>
<dt>りんご</dt><dd>100円</dd>
<dt>バニラ</dt><dd>200円</dd>
<dt>ジンジャーエール</dt><dd>950円</dd>
<dt>パイナップル</dt><dd>300円</dd>
<dt>スマイル</dt><dd>0円</dd>
</dl>
余白や幅は適宜調整
マークアップは>>977に激しく同意
縦に並べるだけなら単にfloatでdtをleft、ddをrightに振るのもいいかと
>>974のように横にも並べるなら、テキトーだけど、
dl, dt, dd { margin: 0; padding: 0; }
dl { width: 33em; }
dt { float: left; width: 8em; text-align: left; }
dd { float: left; width: 3em; text-align: right; }
<dl>
<dt>りんご</dt><dd>100円</dd>
<dt>バニラ</dt><dd>200円</dd>
<dt>ジンジャーエール</dt><dd>950円</dd>
<dt>パイナップル</dt><dd>300円</dd>
<dt>スマイル</dt><dd>0円</dd>
</dl>
余白や幅は適宜調整
979 ：Name_Not_Found：2009/07/02(木) 11:21:46 ID:???
あああああいいいいい
いいいいいいいいい
いいいいいいいいい
上のような文章があって、二行目以下を任意のスペースあきにしたまま（ここでは１字分としてます）、
ブラウザを小さくしても、二行目以下を任意のスペースあきにしたい。
あああああい
いいいいい
いいいいい
いいいいい
いいいいい
いい
とか、
あああああいいいいいいいいいいいいいい
いいいいいいいいい
になるようにしたい、
テーブルの使用OKとした場合、どのように記述すればよいかわかりません。
いいいいいいいいい
いいいいいいいいい
上のような文章があって、二行目以下を任意のスペースあきにしたまま（ここでは１字分としてます）、
ブラウザを小さくしても、二行目以下を任意のスペースあきにしたい。
あああああい
いいいいい
いいいいい
いいいいい
いいいいい
いい
とか、
あああああいいいいいいいいいいいいいい
いいいいいいいいい
になるようにしたい、
テーブルの使用OKとした場合、どのように記述すればよいかわかりません。
980 ：Name_Not_Found：2009/07/02(木) 11:34:07 ID:???
変なレイアウトだな…
1行目は見出しにする、とか決まってるなら
1行目はh1タグとかで括り、2行目以降(本文)をpタグでくくりゃ良いんだろうけど
何らかの意味を持ってる訳じゃなく、単純に
今日の天気は雨で
した。学校は休み
ました。
みたいな感じにしたいの？
1行目は見出しにする、とか決まってるなら
1行目はh1タグとかで括り、2行目以降(本文)をpタグでくくりゃ良いんだろうけど
何らかの意味を持ってる訳じゃなく、単純に
今日の天気は雨で
した。学校は休み
ました。
みたいな感じにしたいの？
981 ：Name_Not_Found：2009/07/02(木) 13:10:05 ID:???
こういう事では無かろうか。
p { text-indent: -1em; }
p { text-indent: -1em; }
983 ：Name_Not_Found：2009/07/02(木) 14:17:30 ID:???
ちょっと教えて。
別ページの同じ場所に画像を貼付けるのに
HTMLが下記で
<div id="bg（共通）" class="p01（そのページ名）">
<p>あああああ</p>
<div>
↑この場合 p01.html 他にp02.html、p03.html…
CSSを下記のように書いた場合
#bg{width:800px; height:200px;}
#bg.p01{background: url(image/p01-no-bg.gif) no-repeat;}
#bg.p02{background: url(image/p02-no-bg.gif) no-repeat;}
#bg.p03{background: url(image/p03-no-bg.gif) no-repeat;}
IE6で、p02.html以下のページで背景画像が表示されないんだけど
何か原因わかりますか？（Firefoxなどは問題無し）
CSSの書く順番を入れ替えると一番上に書いたページのみ表示されます。
#bg.p02{}
#bg.p01{}
#bg.p03{}
↑こう書くと、p02.htmlのみ背景画像が表示される
別ページの同じ場所に画像を貼付けるのに
HTMLが下記で
<div id="bg（共通）" class="p01（そのページ名）">
<p>あああああ</p>
<div>
↑この場合 p01.html 他にp02.html、p03.html…
CSSを下記のように書いた場合
#bg{width:800px; height:200px;}
#bg.p01{background: url(image/p01-no-bg.gif) no-repeat;}
#bg.p02{background: url(image/p02-no-bg.gif) no-repeat;}
#bg.p03{background: url(image/p03-no-bg.gif) no-repeat;}
IE6で、p02.html以下のページで背景画像が表示されないんだけど
何か原因わかりますか？（Firefoxなどは問題無し）
CSSの書く順番を入れ替えると一番上に書いたページのみ表示されます。
#bg.p02{}
#bg.p01{}
#bg.p03{}
↑こう書くと、p02.htmlのみ背景画像が表示される
984 ：Name_Not_Found：2009/07/02(木) 14:33:33 ID:???
>>984
ありがとうございます。
早速やってみましたが、#bg .p01と書くとFirefoxでも画像が非表示になってしまいました。
何か根本的に間違っているのでしょうか？
ちなみに、
#bg .p02と書いてIE
#bg .p01と書いてFirefox、IEとも
画像が非表示の場合でも<p>のテキストは表示されています。
ありがとうございます。
早速やってみましたが、#bg .p01と書くとFirefoxでも画像が非表示になってしまいました。
何か根本的に間違っているのでしょうか？
ちなみに、
#bg .p02と書いてIE
#bg .p01と書いてFirefox、IEとも
画像が非表示の場合でも<p>のテキストは表示されています。
986 ：Name_Not_Found：2009/07/02(木) 15:59:55 ID:???
>982
spanタグで括るとマークアップの仕方として意味合いが違ってくるんじゃないかね
>983
CSS側で#bg取っ払ってクラス名だけ書くとどうなる？
spanタグで括るとマークアップの仕方として意味合いが違ってくるんじゃないかね
>983
CSS側で#bg取っ払ってクラス名だけ書くとどうなる？
>>986
クラスだけで書くとなんてびっくり画像が表示されました。
今まで何を悩んでいたんだろうって感じ？
しかし、クラス名だけだと他のところに同じクラス名が出てくると
画像が表示されてしまう（今回は使ってないので大丈夫なのですが）
ように思うのですが、#bgの中の.p01という風にするにはどうすれば？
クラスだけで書くとなんてびっくり画像が表示されました。
今まで何を悩んでいたんだろうって感じ？
しかし、クラス名だけだと他のところに同じクラス名が出てくると
画像が表示されてしまう（今回は使ってないので大丈夫なのですが）
ように思うのですが、#bgの中の.p01という風にするにはどうすれば？
988 ：Name_Not_Found：2009/07/02(木) 18:09:17 ID:???
>>987
セレクタの書き方くらい最初から調べとけよカス
<div id="bg" class="p01"></div>
のようにidとclassを一緒に指定するのならおそらく不可能
<div id="bg">
<div class="p01"></div>
</div>
これなら div#bg div.p01 {background:;} で可能
idだけを使うとすれば
div#p01,
div#p02,
div#p03 {
共通部分のスタイル
}
div#p01 {background:;}
div#p02 {background:;}
これで<div id="p01"></div>を使えばうまくいくはず
まぁクラス名を被らないようにするのが簡単だろ
セレクタの書き方くらい最初から調べとけよカス
<div id="bg" class="p01"></div>
のようにidとclassを一緒に指定するのならおそらく不可能
<div id="bg">
<div class="p01"></div>
</div>
これなら div#bg div.p01 {background:;} で可能
idだけを使うとすれば
div#p01,
div#p02,
div#p03 {
共通部分のスタイル
}
div#p01 {background:;}
div#p02 {background:;}
これで<div id="p01"></div>を使えばうまくいくはず
まぁクラス名を被らないようにするのが簡単だろ
989 ：Name_Not_Found：2009/07/02(木) 18:35:29 ID:???
>>988
詳しい解説サンクスです。
> <div id="bg" class="p01"></div>
> のようにidとclassを一緒に指定するのならおそらく不可能
不可能というのは理解しました。
ということは、そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか？
それともCSSをちゃんと理解して使えば（idやclass指定）こういう書き方は問題ない？
詳しい解説サンクスです。
> <div id="bg" class="p01"></div>
> のようにidとclassを一緒に指定するのならおそらく不可能
不可能というのは理解しました。
ということは、そもそも<div id="bg" class="p01"></div>という書き方そのもがNGなんでしょうか？
それともCSSをちゃんと理解して使えば（idやclass指定）こういう書き方は問題ない？
990 ：Name_Not_Found：2009/07/02(木) 19:02:46 ID:???
991 ：Name_Not_Found：2009/07/02(木) 19:05:27 ID:???
>>989
<div id="bg" class="p01"></div>自体には問題はないよ
全く使われないってこともないから>>983のケースなら、クラス名だけを記述するのがベストだと俺は思う
クラス名が被るのを心配してるみたいだけど、自分一人でサイトを管理するのなら特に問題はないだろうし
最終的には好み次第かな
<div id="bg" class="p01"></div>自体には問題はないよ
全く使われないってこともないから>>983のケースなら、クラス名だけを記述するのがベストだと俺は思う
クラス名が被るのを心配してるみたいだけど、自分一人でサイトを管理するのなら特に問題はないだろうし
最終的には好み次第かな
993 ：Name_Not_Found：2009/07/02(木) 22:18:20 ID:???
まだ勘違いしている悪寒
994 ：Name_Not_Found：2009/07/03(金) 02:59:06 ID:EmJc7+sr
下のほうにいくと・・・・
ドコモ専用
http://beetv.jp/ft/horror02/1/1/?uid=NULLGWDOCOMO&rl=http%3A%2F%2Fbeetv.jp%2Fpg%2F10000121%2F
ドコモ専用
http://beetv.jp/ft/horror02/1/1/?uid=NULLGWDOCOMO&rl=http%3A%2F%2Fbeetv.jp%2Fpg%2F10000121%2F
995 ：神様見習い：2009/07/03(金) 07:26:51 ID:qBBScwLZ
梅マッシュ
996 ：神様見習い：2009/07/03(金) 07:27:54 ID:qBBScwLZ
みなさん次スレでもスキル向上ばんばってください
997 ：神様見習い：2009/07/03(金) 07:28:44 ID:qBBScwLZ
998 ：神様見習い：2009/07/03(金) 07:30:00 ID:qBBScwLZ
次スレでも神様降臨お待ちしております。。。
ぼくはまだ神様見習いのへっぽこです。。。
1000 ：神様見習い：2009/07/03(金) 07:38:30 ID:oUDiSKpc
では次スレで。。。！
1001 ：１００１：
このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
もう書けないので、新しいスレッドを立ててくださいです。。。