/* CSS・スタイルシート質問スレッド【53nd】
4 :
Name_Not_Found :2006/03/08(水) 11:10:34 ID:hHnUf1tn
hehehe
53rd
すまん 反省している
X1thか。
左右の真ん中は text-align: center; ですが 上下の真ん中はどうやって指定すればいいのでしょうか?
見えません><
padding: 1px xxx 0px 2px; xxx の部分だけサイズを特に指定しない場合はどうすればいいのでしょうか?
>>19 pxddingを分けて書く。
ていうか前スレ埋めてよ。
>>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; }
24 :
Name_Not_Found :2006/03/08(水) 15:00:07 ID:DDCDE7wU
positionプロパティのabusoluteとrelativeがよく理解できないのですが、 abusoluteはページ左上が基準、relatibeは親要素の左上が基準という認識で いいんでしょうか?
27 :
Name_Not_Found :2006/03/08(水) 15:41:08 ID:DDCDE7wU
>>25 なんとなくですが理解できました。
ありがとうございました。
28 :
24 :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の記述が間違っているのでしょうか? よろしくお願いします。
ここまでスレタイ */
>>28 まずタイプミスしてないかチェックするべき。
で、fixedはいらんだろ。
backgroundのfixedはbackground-attachmentの値。
positionとは違う。
31 :
Name_Not_Found :2006/03/08(水) 17:50:25 ID:3ROOx1l0
cssで設定しているものよりも htmlで設定するものを優先させたいのですが どうすればいいでしょうか? 例えばfont colorなどを、cssファイルで決めているものより 優先させたい場合など。
>>31 せっかくCSS使ってるのに、そんなことをするなんてイクナイ。
フォントや色はCSSで統一して、ID、クラス、場合によっては<span>の適用だけにするのがベストでしょう。
34 :
Name_Not_Found :2006/03/08(水) 18:17:46 ID:gqJJfVxD
/*----もう何がなにやら分かりませんよ><----*/
35 :
21-22 :2006/03/08(水) 20:54:21 ID:???
。・゚・(ノД`)・゚・。 ウワーン できないよぉorz 仕事の休みが無駄になった
なんかかなり長文で理解できんorz
上に真ん中にできないっていう書き込みあるけど 俺もできないまま放置してたので質問させてもらう #test { width:500px; hight:500px; vertical-align: middle; } <div id="test"> testtesttest </div> こういうのでも真ん中に行かないのだがどうすれば? Q6読んだけど、いまいち不明
>いまいち不明 Web作る前に日本語の勉強を。 そのソースのどこに真ん中の指定があるのかな?
>>40 vertical-align: middle;
何故vertical-align: middle;
すまん、インラインの行に対してのみじゃなく、テーブルのセルに対しても有効だ。
間違ってる
47 :
Name_Not_Found :2006/03/09(木) 14:07:47 ID:+UlHsFBB
リストの左側の余白ってどうやって調節するのですか? ・AAAAA ・BBBBB ↓こうしたい場合とか ・AAAAA ・BBBBB
margin
margin
50 :
47 :2006/03/09(木) 14:18:39 ID:???
>>48-49 .business_box2 li{
margin-left: 5px;
}
こういうこと?変わらないよ・・・
そりゃ変わるわけない
52 :
47 :2006/03/09(木) 14:24:19 ID:???
>>51 <ul>にmarginやったら変わった!!
けど0pxにしても左にまだ余白があるんだけど・・・
どうしてなの?
CSSの最初の行に *{margin:0; padding:0;} って書いてみ。
54 :
47 :2006/03/09(木) 14:38:26 ID:???
>>53 やったらうまくいったけど
他のまで影響されてる・・・・
<p>とか<dd>とか全部
他にリストだけ変更するいい方法無いのでしょうか?
>>54 うん、むしろそれこそが狙い。
そうやって全部自分で設定して、ブラウザごとの表示の違いを削っていくのよ。
何も指定しない場合は、IEとそれ以外でmarginの取り方の差みたいなのが出ちゃうから。
ちなみに、これってCSSを初心者に教える時にまず最初に教える事ね。 余白を気にしだす=デザイン意識も高まるし一石二鳥。
57 :
47 :2006/03/09(木) 14:47:57 ID:???
>>55-56 そういう事ですか
全部自分でやれ!って事ですね
それの方が結果として簡単って事ですよね
頑張ってやってみます!有難うございました(゚∀゚)ノ
調教しがいがあるわね
女王様!
60 :
Name_Not_Found :2006/03/09(木) 19:10:48 ID:RTHMlyJK
BODYにフォントの設定の記述を入れてるんですが、 テーブルタグ内に入っている内容が変化しません。なぜなんでしょうか?
62 :
Name_Not_Found :2006/03/09(木) 19:33:49 ID:RTHMlyJK
>>61 いや、だから
SCCで
BODY{};
というように、BODY全体にフォントスタイルを決めたいのですが
中身の文字がちっともかわりません。ビルダーで書いてる記述は
問題ないと思います。
これはどういうことなんでしょうか?
63 :
Name_Not_Found :2006/03/09(木) 19:35:40 ID:RTHMlyJK
訂正 SCC→CSS
65 :
Name_Not_Found :2006/03/09(木) 20:04:09 ID:RTHMlyJK
>>64 いや、なんちゃらはもう入ってます。
BODY{
font-size : xx-small;}
です具体的には。
でも、内容が変わらないんです、
文字が小さくならないんです。
>>64 の意味が分かるまでテンプレで基礎を勉強してきたほうがいい。
>>65 >>64 で重要なのは、なんちゃらのほうでなく「*」のほうだぞ。
「俺はそこに「BODY」って既に書いてある!」って言っても意味ないぞ。
CSSにおける「*」の意味を調べれ。
68 :
Name_Not_Found :2006/03/09(木) 20:18:54 ID:RTHMlyJK
*ってなんですか? 具具って見ましたが、*が無視されます。
>>68 それの記号としての呼び名はなんだ?このスレは何のスレだ?
一回ググってそれでおしまいか。
「CSS アスタリスク」でググるくらいの工夫をしろ。
ワイルドカードもしらんのか? 全てに対応って意味だ
おまいら親切すぎ
72 :
Name_Not_Found :2006/03/09(木) 20:57:07 ID:RTHMlyJK
ビルダーのスタイルシートマネージャでアスタリスクを定義するには どうすればよいのでしょうか?
ビルダースレへ逝け
ここで聞くべきかわかりませんが、Geckoに関する質問です 二つのボックスを縦に並べて、両者のマージンを0pxにし、それぞれに背景色を指定しています 本来なら二つのボックスはぴったりくっつくはずで、IEとOperaではちゃんと表示されます ところがFF1.5およびNetscape7.2で表示すると、両者の間に高さ1pxの隙間ができていることがあります 上のボックスに文章を1行足すだけで消えたり現われたりします しかもおかしな事に、FF1.5では、ボックスの境界が画面の下のほうに表示されている時は隙間がないのに スクロールして上方に移動すると隙間が現われます これはGeckoのバグでしょうか?また解決策は知られているのでしょうか すみませんがどなたか詳細をご存知でしたらお教えください
>>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>
残念ながらこちらではそんな現象は確認できなかった。
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>
<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>
>帝王切開焼肉定食 これはすげーなぁー
80 :
74 :2006/03/10(金) 02:57:55 ID:???
>>75 ,77
こちらの環境ではそれらのソースでは再現しませんでした
これから詳しく述べますがボックスの高さや
スクロールが関係しているためと思われます
症状がIE の Peekaboo Bug に似ているようなところもあります(原因は全く違うと思いますが)
とりあえず自分なりに回避策らしきも見つけました
というか、比較的稀な現象のようです
>>76 作ってみたので以下にコピーします、長くなってしまいますがお許しください
<!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> 続く
<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>
83 :
74 :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では再現されませんでした
84 :
74 :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より大きなどんな値を指定しても再現します 長くてすみません、素人にはこれ以上のことはわかりませんが、とりあえず確認をお願いします
85 :
74 :2006/03/10(金) 03:54:23 ID:???
すみません、間違えました
>>83 ×ただしコメントアウトにあるように、最初の<p>test</p>をdivの外にだすと、常に隙間が現われます
○段落中にあるように、最初の<p>〜</p>を以下同文
IEでフロートさせたDIV要素のmarginが倍になっちゃうんだけど、これって直せない?
87 :
86 :2006/03/10(金) 04:24:27 ID:???
自己解決した
>>74 ,85
よくわからんソースだが、
body{padding:30px;}とdiv.box_b{overflow:auto; margin-left:1px;}あたりがあやしい。
>>74 >>81 <p>Box A</p>
<p>ここが描画領域の外に出た後、リロードすると隙間が現われます</p>
</div>
これは再現できなかった。
<p>リロードすると、この下の境界に1pxの隙間</p>
</div>
こちらは描画領域の外に出た後、リロードすると境界に1pxの隙間が現れた。
また、リロードだけでなく、描画領域の外に出した後、ウィンドウサイズを変更しても発生した。
……とうやら、Box Bの下1pxが侵蝕されて(?)白くなっているようだ。
普通、margin ではボックスの外側に余白ができるのに。
また、margin-leftは、0pxより大きなどんな値を指定しても再現します。
0pxでも-20pxでも再現したよ。
この問題、環境に依存するのかね〜。
自分はGeckoのバグだと思う。
90 :
89 :2006/03/10(金) 11:09:53 ID:???
>>74 >>81 リロードするとできる隙間の上に、ブラウザではない別のソフト(たとえばテキストエディタ)のウィンドウを重ねると、その隙間が一部分だけ正しい色に染まることがある。
五回に一回くらいだけどさ。
やっぱりGeckoのバグかと。
>>89 >やっぱりGeckoのバグかと
報告したら?
92 :
89 :2006/03/10(金) 11:24:05 ID:???
>>91 正直、Mozillaみたいな大きいところにバグを報告するのはおっかない。
h4 #main { color: red; } <h4 id="main">サイト概要</h4> id=mainのh4のみに適応するにはどうやるんだっけ? 忘れたorz
偽者って別に
>>93 を騙ってるわけじゃないじゃん
てか質問するんならID出せよ
>>97 あの状況を見れば
>>93 を騙っているようにしか見えないが.
わざわざやぶ蛇なことをしなくても良いよ.
float:left; と似たやつって何があったっけ?
float:left;で実現したいことによって違う
>>100 menu main
menu main
menu main
menu main
menu main
menu main
って感じに横二行にしようとしてる
float:leftでもいいし、display:inlineでもいいし、 親コンテナを右に寄せておいて子にposition:absiluteで左に移動させてやってもいいし。
103 :
74 :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でも変えてやれば消えることがおおいので対処はできそうですが
長々と失礼しました
float:left; を使うと場所がちょっとおかしく時ありませんか?
>>103 もじらに言うのはともかくさ、バグ辞典スレのほうには報告してきてくんねーかな
>>104 です
float:left; を使うとテキストが少し右下に移動するんです・・・
>>107 clearって?
恐らくやってないorz
ちょっと調べてきます
clear: both; bothをrightやleftに変えて いろんな値に順番に書いてみたが変わらず・・・
>>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の最新です
>>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;
}
>>114 10pxってそんなに字が小さいですか?
1920x1200 の環境ですが小さくはないですけど・・・?
>>114 10pxの文字が見えにくいなら環境終わってるな
小さいモニタで解像度でかくするからだ
たくさんの人に見てもらいたくなければ、それでも医院じゃね?
俺はブラウザの設定で最小フォント16pxにしてるから知らんけど
環境でIEに限定されてる件
>>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のテーブルの中に入れると
明らかにテーブルからはみ出てしまうのですが・・・なぜなのでしょうか?
これはバグでしょうか。防ぐ方法があれば教えてください。
<!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>
>>118 ブラウザ何?IEとかにそんな設定あったか?
>>122 俺はOperaだけどFirefoxにもあるよ
124 :
Name_Not_Found :2006/03/10(金) 22:36:32 ID:yellEsUP
<body> <img src="GRP_0041.JPG" > </body> で この画像をページの中央に表示したいのですがどうすればいいですか?
126 :
Name_Not_Found :2006/03/10(金) 22:40:46 ID:yellEsUP
スイマセン 半年ロムってます・・・・
>>121 文字列が消えるわけじゃなくて、画像に隠れちゃうんだろ。
バグなのかは知らん。
俺なら画像と文字列で段組みするけどな。
>>124 body {
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
129 :
120 :2006/03/10(金) 22:57:14 ID:???
どなたかわかりませんか?
>>129 1時間も待てないのか。
さては早漏だな?
>>129 テーブルセルのデフォルトパディング消したか?
>>120 ,129
tableなんてどこにあるんだ?
大きな枠をテーブルで指定してるんだろ。
>>120 テーブルのセルの描画って、ブラウザに依存してんの。
細かい規定がないから、テーブル+CSSできっちりレイアウトは難しい。
テーブル外してCSSだけでやってみ。
>>133 そんな勝手に想像してもw
全体を囲むtableなら、#headがはみ出すだろうに。
ブラウザや宣言にもよるけどね。
このスレに評論家はいらんのだよ。
>>135 133じゃないが、120の最後の2行を読んだ上で、他の解釈が成り立つのか?
>>86 ,87さん
よければ解決策をおしえていただけませんか?
自分も以前にそうなっていた箇所があり、
実害が無いのでそのままにしましたが、気になってました。
>>137 勘違いで計算してるかも知れんだろ?
大体ちゃんとソースを出さない
>>120 がせっつくからいけないんだけどな。
意味不明 計算の勘違いと大枠テーブルの存在との間にどういう関連が
#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; }
<div id="table"> <div id="head"> Title</div> <div id="menu"> test</div> <div id="main"> main</div></div> こういうことです・・・
#table { border: medium solid #ff00ff; width:720px; } 間違ってたorz
もしかして
clear:left;
float:left;
を使ったからじゃないの?
>>142-143 の場合だと左側10pxあけてるけど
clear:left;
float:left;
を使うと0pxでも多少間開くじゃん・・・
>>141 やけに絡むヤツだなあ。
>>120 は大枠のtableを使っているとすると、
そのtableに入ってる要素は#menuと#mainだけと決めつけてる、と言ってるんだ。
#headが入ってないなんて、どこに書いてあるんだ?
常識で判断してなんてのは笑止。質問者のレベルは一定ではない。
絡んでるのが一人だと思うなんてのは笑止。 あんたもう消えていいよ^^
>>147 どこに入ってるなんて書いてるんだ?
常識で判断してなんてのは笑止。質問者のレベルは一定ではない。
>>139 のバグ対策はどうすればいいのぉ?
見本オシエレ
アホばっか
153 :
138 :2006/03/11(土) 00:16:59 ID:???
>>139 さん
レスありがとうございました。
float以外の部分で調整することにします。
コメント閉じ忘れたorz こっちで閉じ*/
表のセルでの話だけど、 { border-top: #333333 1px solid; } と指定しても、opera等だと空白セルには反映されない・・。 何かいい回避方法や代替方法ありませんか?
即レスthx まだまだ勉強不足だな・・
うむ がんがれ
インデントの付け方で質問です。 文章が端で折り返した後、 1文字下げて表示させたいのですが、 どのようにすれば良いかわかりません。 例えば、 文章文章文章文章文章文章文章文 章文章文章文章文章文章文章文章 文章文章文章文章文章文章文章文 章文章文章文章文章・・・・・・ のように、1行目は空けないで 2行目以降を1文字空けたいんですが、 文章を固定しないでTABLEを使わずに 表現することは可能でしょうか?
text-indent:-1em;
>>160 むしろテーブルでどうやってそれを表現するのか激しくお訊きしたい。
div { margin-left : 1em; }
p { text-indent : -1em; }
<div>
<p>テストテストテストテストテストテスト(略)</p>
</div>
あ、pのマージンでよかったや。
marginだとはみ出すからpaddingのほうが
1行目を"はみ出させる"んじゃなくて2行目以降を"1文字空ける"と書いてあるから、1行目の行頭もボックスの中にある、というイメージなのでは
…paddingもボックス外なんですが。
えっ?そうだったの??
169 :
Name_Not_Found :2006/03/11(土) 05:40:12 ID:XYTrVFG0
例えば左側だけマージン10px開けたいとき、プロパティは margin: 0 0 0 10px; と書くじゃないですか。 でもパッと見わかりづらいので、自分は margin: 0; margin-left: 10px; と記述するのですが、w3cの人に怒られたりしないですよね。
170 :
Name_Not_Found :2006/03/11(土) 05:42:26 ID:ZVV+nEm0
DOCTYPE スイッチによる位置関係の変化に関する質問は このスレで質問でOK?
誤爆した・・・ paddingって内の要素のmarginと打ち消しあわなかったっけ?
173 :
160 :2006/03/11(土) 09:52:59 ID:???
>>161-162 できました。
ありがとうございました。
頭固いので、TABLE使うことしか
考えてませんでした_| ̄|〇
#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のやつばっかり・・・どなたかエロい人教えてください。
文字数制限にひかかったので追加 display position をやってみたがやり方が悪いのか 使い方が間違ってるのかがわからないが うまいことできませんorz
>>138 ,150
IEでfloat要素のmarginが倍になってしまうバグは
display: inline; を入れると直るよ。
他のブラウザで見ても問題無し。
#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の左右の中央に表示させたいのですが うまいこといきません・・・どこがおかしいのでしょうか?
text-align: center; ↓ margin:0 auto; 標準モードで。
>>178 #sotowaku {
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
margin:0 auto;
width:95%;
}
こういうことですよね?
sotowakuの左側にmenuが引っ付いてる状態で
何も変化ありませんが・・・?
>>170 ボックスと言ったらコンテントボックスだぞ。
IEの仕様に慣れすぎてないか?
>>177 外枠にボーダーつけてみてごらん。
浮動ボックスはコンテナボックスに含まれなくなるから。
>>180 #sotowaku {
border-left: 2px ridge #000000;
border-right: 2px ridge #000000;
text-align: center;
width:95%;
}
外枠ってこれのことですよね?
border左右だとだめですか?
>>181 そういうことを言ってるんじゃなくて、ボーダーが反映されなくて当然だぞ、
と180は言いたいんだと思うが。
で、あんたのやりたいのはどっちだ?
・二つのボックスを中央にならべたい→二つのボックスを合計したボックスをもうひとつ設定しなきゃ駄目。
・ボーダーを両端2.5%のところに表示させたい→二つのボックスの長い方をfloatじゃなくしなきゃ駄目。
>>183 なら外枠を、二つのボックス+余白の合計幅にして
text-align:centerの変わりにmargin:auto;。
>>183 >>178 で回答済み!!
ちゃんと標準モードにしたか?
width:200px;と width:400px;を95%に入れて・・・
なんだかなぁ・・・
>>185 178のでは、中心には寄らないっての。
左から2.5%のところに二つ並べられるだけ。よく考えろ。
width:200px;と width:400px;を95%に入れて・・・
未だにclass/idの違いなんて質問が来るくらいだから 中途半端な答えを書いてもわからない質問者にそれ以上を求める事が間違えてる。 無視したい香具師は無視してればよろし。
さうだな。春休みだたことを忘れていたよ。
>>188 質問は中央にしたいって言ってるのに
違うこと言うと意味ねぇじゃんw
回答者のレベルも下がってるな。
「出たよ、この(煽って聞き出そうとする)パターン!」(バナナマン日村風に)
このエロエロ軍団!!
195 :
Name_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のサイズで表示されました。 どうしてこのような事が起きるのか、ご教授下さい。
GeorgiaのGが全角だからじゃね?
osakaのOも小文字になってるな。
198 :
195 :2006/03/12(日) 04:08:07 ID:Gmyb6gig
ごめんなさい。それは今打つときにミスしました。
10pxなんて小さな指定は(ry
深夜にすみません。 optgroup要素のlabel属性に当たる文字の部分(=カテゴリのタイトル)をCSSでいじりたいのですが どうやればいいのでしょうか?
>>200 記憶に間違いがなければ、弄れなかった気がする。
IEだと斜体になって嫌なんだよねぇ。
俺はOperaだから気にしないけど。
>>200 色は普通にいじれる。
斜体はいじれない。
204 :
Name_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ではこんなふうになってしまいます。 何か良いやり方はないでしょうか?
206 :
204 :2006/03/12(日) 15:35:11 ID:???
>>205 ありがとうございます。
しかしそれではIE以外でおかしな表示になりますし、IEでも妙な隙間が空きます。
>>206 具体的なソースやスクリーンショットもなしに何を言えと言うんだ。
208 :
204 :2006/03/12(日) 15:46:23 ID:???
ぶっほ
ソースいじってるとオマンコをいじりたくなってきたのですがどうすればいじれますか?
春だねえ・・・
211 :
Name_Not_Found :2006/03/12(日) 18:03:22 ID:NqqInVzI
みなさん、エディターは何を使っているのでしょうか? 初心者ですが、DWでは時間がかかって仕方ありません
DWです。これがないと仕事になりません。
>211 DWってDreamweaverだよな スレ違い んで、時間がかかる理由も書いてくれんと・・・
ez-HTMLはいいんだけど、常時妙な負荷がかかるのがな。 ちょっと書くときは秀丸使ってる。
マシンパワーの問題じゃないかな、負荷なんか気になったことないや。
ちょっと更新するくらいならボールペン。 真面目にやるなら墨をすって筆でささーっと、ね。
218 :
211 :2006/03/12(日) 19:07:05 ID:NqqInVzI
DreamWeaver MX です。 cssには対応していないのですが、 (フォントの指定程度) カラーピッカーが使えないと、イライラします。 新しいやつはcss対応ですか?
>>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要素などに書いてみましたが駄目でした。
>>219 普通にdivと同じ幅をselectに指定。
divの幅が可変ならムリポ。
あ、可変が無理とは言っても、min-widthは効くからな。 もしIEの話をしてるんだとしたら、selectに限らずIEはmin-width非対応。
>>222 できました、ちなみにIEにはスクリプトで対応させるつもりでした。
稚拙な質問に答えていただきありがとうございました。
>>204 clear: leftは無しで
全てのボックスをwidth: 30%
とかは?
225 :
211 :2006/03/12(日) 21:35:03 ID:NqqInVzI
結局、何を使うのがいいの? Dreamweaver8 がいいの? ez-HTML WZ editor がいいの?
自分に合うものを選べ 出来ないなら去れ
何を使っても211の姿勢じゃ駄目のような
要は個人の好み 学生はメモ帳かフリーソフトで十分 ソフトに頼ってもいい物が作れるとは限らない 便利なソフトに慣れると作業効率は上がるだろうが >211の場合はヘルプを読む気がないあたりからして猫に小判
CSSなんてメモ帳でいけるだろ。 CSSみたな短いタグを間違う方がどうかしてる。
>CSSみたな短いタグ ・・・少なくとも229には言う資格が・・・
メモ帳で良いって言う奴は大抵初心者だってばっちゃがいってた
ばっちゃはメモ帳なんてことは言わない。 言うとしたら帳面だ。
233 :
211 :2006/03/13(月) 02:37:33 ID:XCvDv3PQ
色をひとつ決めるにも、 カラーピッカーで何10回も試行錯誤して、 微妙なところにこだわるのが デザイナーだろ。 素早くできないと、困るんだよ。 お前ら、素人のプログラマーか?
>>216 バグみたい。
スペック高い人でも気になるって人は居るらしい。
>>233 どうせ全体のバランスを見ながら決めないといけないから、微調整やるのは最後の最後。
画面の中の色の占める割合でも変わってくるからな。
プレビューしながらやってたら何やろうが結局同じ。
それになれてきたら何十回もやる必要さえない。
結局自分が使いこなせてないだけ。
素人のプログラマーワロス
フリーのカラーピッカーの存在すら知らないようだね。
馬鹿なのでDWを使いこなせてないだけだと思うよ。
道具に使われているな。アンチパターン。
brの高さをCSSでコントロールできないですか? IEだと高さが出ないのですが、mozillaだとbr分の高さが出てしまいます。 CSSは↓です。1pxtとかに変更してもダメでした。 br { font-size: 0; line-height:0; height:0; }
brを使わなければいいだろ?
>>239 つ br{line-height:0}
書いといてなんだが240に同意。
242 :
Name_Not_Found :2006/03/13(月) 12:20:37 ID:rsOIP0Xo
CSS使ってる癖にbr連打なんて、あり得ぬ。
ユーザCSSでやったことならある>br消し
↓のような感じをCSSだけで作りたいのですが +--------+-----------+ |AAAA |BBBBBBBB| | |BBBBBBBB| | |BBBBBBBB| | |BBBBBBBB| +--------+-----------+ 私が作ったらこうなってしまいました↓ +----------+--------+ |AAAAA |BBBBBBBB| +----------+BBBBBBBB| |BBBBBBBB| |BBBBBBBB| +--------+ AとBの枠は高さは固定にしないで(横は固定) Bの内容によって高さを可変にしたいです どう書いたらイイでしょうか?
245 :
339 :2006/03/13(月) 13:32:12 ID:???
>242 br連打なんてしないです。 brでfloatをclearしてるんです。
247 :
ケンタコピペ :2006/03/13(月) 17:43:18 ID:BAFYXHrw
こんにちは。今年に入ってPC弄り始めたケンタです(^^) 先週、HTMLという言語(?)の勉強をはじめました! 気づいたらスルスル頭に入っていくというか、どういうものか理解できてしまった! 勢いでWEBサイトを作って公開しました〜>_< それで、僕が借りてるサーバはHTMLのソースに広告タグを付加してページを 出力するようになってるんですが、そこにJavaScriptが使われていたので今日勉強しはじめました。 すると・・・もうJavaScriptがだいたいどういうものか理解できてしまった!というかWEBがだいたい どういうものか分かった!んで、今PHP書いてます!もちろんこれはJavaScriptと違ってサーバ側で 動くのでブラクラにはあまり関係ありませんね(笑) ぶっちゃけプログラミングってかなり簡単。。基礎さえ分かれば関数調べるだけじゃん。。
コピペイラネ
CSSの処理で、 「いのき」というテキストにカーソルを合わせると 「アントニオ」と変わる、効果を出すことはできますかね? CSSで色や大きさや下線を付けたり、画像のマウスオーバーは できるんですが、これはどうでしょう。よろしければ教えて ください。
251 :
249 :2006/03/13(月) 22:32:09 ID:???
>>250 ありがとございます。画像で「いのき」と「アントニオ」を
作ってマウスオーバーする方法ではなくて、あくまで単なる
テキストの「いのき」をポインタを乗せるだけで「アントニオ」
に変換したいんです。
それとも、画像のマウスオーバーと同じ方法でテキストを
変化させる方法があるのでしょうか。もしそうでしたら詳しく
教えていただけませんでしょうか。お願いします。
>>249 <block>foo</block>
block {line-height: 2; height: 2; white-space: nowrap; overflow: hidden;}
block:hover::before {content: "bar"; display: block;}
誤 height: 2; 正 height: 2em;
255 :
249 :2006/03/13(月) 22:44:15 ID:???
>>252 ,254
ありがとうございます!試してみます。
結果ご報告させてもらいますね。
256 :
249 :2006/03/13(月) 22:52:28 ID:???
operaでしか稼働しませんでした...
というか、全部のブラウザで動作すると思ったのか? それはどう足掻いても無理。
マウスオーバーするとバックグラウンドの画像が変わる という方法は分かるんですが、 変わる瞬間、画像を呼びだす間が空くんですよね。 次の画像を事前に裏で呼び込んでおくことはできないのでしょうか。 imgで貼り付けるのではなく、あくまでも背景画像として呼び出したいんです。
>>256 CSS3が勧告されて他のブラウザにサポートされるまで待て
Opera(というかCSS3)なら
<style>
#test:hover { content : 'アントニオ' }
</style>
<p id="test">いのき</p>
こんだけでいける
別の画像や背景色に隠れるような要素に、見えないようにhover時の画像を指定しとけばいいんでない?
マウスオーバーで画像をかえる方法は 1.バックグランドの画像をかえる 2.バックグランドに重ねていた画像を-indentで飛ばす 3.前後の画像を二つ重ねて、上下に動かす この3つがメインですか?
>>262 2、3はどういうときに使うの?そんな強引な方法が必要な場面が思いつかない
>>262 ではないが、それでいいのなら
>>258 のプレリロード問題は解決する。
でもそれやるとCSS切り替えがイヤンなことになるから嫌い。
>>263 使い分ける状況まではわからないです。すいません
マウスオーバーを使いたいと思って調べてみたら
この3つの方法が見つかったので、どれがいちばん
メジャーかなと質問させてもらいました
>>268 3と1、2のHTMLの違いを比べてみよう。
>>264 おお、こんな発想思いつきませんでした。
早速やってみます。
>>269 3は一枚の画像なんで始めから読み込まれてますね。
1,2はマウスオーバーした時点で画像を読み込むので
時差がでますね。
ただ
>>268 が言っているのは、
そんな読み込み時間かかるか?ダイアルアップじゃ
ねーんだから微妙にもたつくくらいだろということでしょう。
>>271 わり、2の画像吹っ飛ばしも3と同じく
時差ゼロだったね
>>268 は、
「
(メジャーなのは)3だろ。
(この3の方法でロードに)間が空くって(言って3の方法を使わないやつは)
ダイヤルアップ(を使っているのか)?
」
って言っているの?んなわけないよね?でもそうとしか読めない。
>>271 読み込み時差の問題ではなく、HTMLの問題で3はメジャーにはなり得ないという意味。
>>262 2はマイナーで、1か3を使う
読み込みタイムラグが気になるなら3
htmlの問題(どんな?)が気になるなら1
ということでいいでしょうか?
というかそもそも
>>262 のレス内容自体が不明瞭
1は通常の背景画像とhoverの背景画像に別の画像を指定するって意味だとわかるけど
> 2.バックグランドに重ねていた画像を-indentで飛ばす
と
> 3.前後の画像を二つ重ねて、上下に動かす
は
みんなそれぞれ違うことを想像してそう
まあ
>>249 は途中からレス番出さなくなったし、
>画像のマウスオーバーは できるんですが
と言ってしまった手前、今更よくわかってませんとは言えなかったんだろ。
>>276 >重ねてってレイヤー的な重なりじゃないよ?2枚の画像を1枚にするってだけ。
どう見ても「重ねて」はz-indexに見えます。本当にどうもあry
2と3は前面の画像を左右に動かすのか上下に動かすのかの違いだけに思えてきたw そして前面と背面に画像を配置するってことは img要素を使っているの? それとも重なり合う親要素と子要素にそれぞれbackground-imageを指定してるの? って疑問が
まぁどの方法を使うにしろ 画 像 は 軽 く 汁 これに尽きる。
背伸びしたかったんだよ・・・・わかるよ、俺にはわかるよその気持ちが・・・・
>2枚の画像を1枚にするってだけ 276はなんでこんな断定できるの? もし276が262なんだとしたら、もうちょっと日本語を勉強してくれ
この「マウスオーバー」という単語を使った一連の質問は同一人物ってのは決定事項でおk?
>>286 テキストを飛ばそうが飛ばすまいが、
カーソルを当てると背景が変わる手法は1とまったくいっしょじゃん
289 :
288 :2006/03/14(火) 00:05:02 ID:???
以下の文を追記です。ごめん 2がその方法だという意味なら
>>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 なんだとしたらすげーな。
291 :
290 :2006/03/14(火) 00:08:49 ID:???
あ、2.は背景画像を-indentって何だ、消すだけかw
>>288 1は背景が変わる
2はon背景の上にoff画像を置き、そのoff画像を画面左に飛ばして、on背景をむき出しにする
3は上下にoff/onの画像をつなげて一つの背景にして、いつもはoff半分だけ表示、オーバーすると画像を上に動かしてonにする
で決着ですか?
>>286 text-indentに負の値を指定して文字を飛ばす方法が別のものだとしてカウントするなら
>>264 の場合(3が
>>264 という意味だと仮定して)も同様に
text-indentに負の値を指定する方法とそうでない方法を挙げて
全部で4パターンになると思うけど
>>292 > 2はon背景の上にoff画像を置き、そのoff画像を画面左に飛ばして、on背景をむき出しにする
という意味だとするとこれはhtmlのマークアップに変更を加えているってこと?
>>294 手を加えるも何も、画像OFF/CSSonを考慮して
わざと最初から画像リンクを選択する人もいるんだし。
>>294 a要素と同じ大きさの親要素がある、という後出しの前提条件か何かがあるんじゃない?
またはこの2だけa要素内にimg要素を持っているとか
ん?そもそも1と2と3はHTMLファイルが同じものじゃないの!?そうだったのか
これで
>>290 が正解なんだとしたら、123.はすべてHTMLが違うことになるなww
コンフュ メダパニ
cssスレでの アンカー要素のhoverによる画像切り替えの話題だと ただ単純に <a href="hoge">huga</a> というマークアップを想定してしまうけど そうじゃなかったってこと?
>>300 そうでもないでしょ、ここでも前に確かimg要素の重ね技を質問した香具師もいたはず
#あのときも質問者がよくわかってなかったのかうやむやで終わったが
どう考慮しても1、2、3が同列として列挙されているのは無理があるね
逆に同列じゃないからこそ、どれが一般的なのか聞いたという可能性もある
結局どういう意味だったの
>>262 そろそろ釣り宣言してくれないと気になって眠れない
結局もう寝たの
>>304 それが気になって眠れない
なぜそんなにこだわってるのかがいまいちわからん。 普通にやり方がいくつかあるってだけの事でしょ? 同列とか関係ないじゃん。
HTML関係のスレにおいては同列。 CSSスレにおいては非同列。 って意味でしょ、価値の問題じゃないと思うけど?
価値なんて誰も述べてない気がするんだが。
>>306 が同列にこだわることはないって言ってるのは、じゃあどういう意味なんだ?
それが同列(同価値)に見られなかったから憤慨してるだけに見えるが。
私の為にケンカしないで!
やれやれー 馬鹿ども もっとやれーーー
いや俺が俺が!
俺も俺も! 306=262なんだとしたらワロス。
質問よろしいでしょうか。 インライン要素をfloatさせてwidthを指定するのは使わないほうがいいのでしょうか? display:block使うのが普通ですかね?
>>315 インラインのfloatというとrightかな?
良い悪いというより、日本語でおk。
>>309 同列じゃなかろうと関係有りません。
好きな手法でやればいいだけ。
別に誰がどんな手法使おうが関係ないじゃん。
そこに価値や順位の有無を求めるのが大間違い。
同じように順位なんかないと同列を求めるのも大きな間違い。
>>314 反論できなくなって人格攻撃ですか?(藁
というか2がtext-indentに負の値を入れてもともとある文字を飛ばすって意味なら これはhoverによる画像の切り替え手法ではなく 文字を画像に差し替える手法だから 同列とか以前の問題じゃない?別次元じゃない? > 2.バックグランドに重ねていた画像を-indentで飛ばす でもこれだけだと「画像をtext-indentの負の値で画面外に出す」としか読めないんだよね・・・。 画像をtext-indentの負の値で飛ばす・・・って。 そもそも「バックグランドに重ねていた画像」が どういう手法で重ねられているのかもまったく不明だし・・・。
1の「バックグランド」と2の「バックグラウンド」は別のものを指す。
そして2の「重ねて」と3の「重ねて」も別のものを指す。
その違いは
>>262 にしかわからない。
そろそろ議論は他所でやったほうが
馬鹿には空気が読めないからねえ・・・
>>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指定できない
みたいなので、使い方がおかしいのかと思って。
なんか変・・・
既出かもしれませんが、質問させてください。 ┌────┐ │ テキスト│ └────┘ このように表示しているはずなのに ┌────┐ │ テキスト│ └────┘ スト となってしまいます。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; }
326 :
325 :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> これで 「コンテンツエリア」が「コンテンツエリアエリア」 になってしまいます。
DIV病に感染していますねw
>>327 html書類にdivが10程度あると使いすぎなんでしょうか?
>>328 数の問題じゃなく、意味の問題。
レイアウトのためのdiv使用でdiv厨と呼ばれる。
>>329 レイアウトのためにつかってます。すいません…
対処方法おしえてくださいペコリ
>>328 気にするな、まともなプログラマなら、見通し、今後の拡張を考えてdiv多用するから。
332が少なくともまともなプログラマじゃないことは解った。 ツリー構造になってない無意味なDIV多用はあとで自分が困るだけ。
「プログラマ」って・・・ 笑ってもいいかな?
<div class="nullpo"></div>
>>331 divタグつかうよりPやULとかにスタイル指定していったほうが良いって感じなんでしょうか?
>>336 質問者は、最初に質問したレス番号を名前に入れろ。
出来ればE-mailアドレス入力欄を空白にしてIDを出して欲しい(煽り対策)。
>divタグつかうよりPやULとかにスタイル指定していったほうが良いって感じなんでしょうか?
そういう意味ではない。
DIVはまとまりを意味する。
339 :
325 :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-->
>>336 俺は、サイト構造自体を表すのは、君と同じように作るね。
で、その構造の中に、コンテンツとして、p、ulをほおりこむ。
こうすると、pだけに適用すべきcss、あるいはulだけに適用すべきcssとサイト構造を
表現するcssを分離できるからね。
笑っていいと思う。
>>339 本当に
>>325 だけのソースでなるのか?俺んとこではそれ以前に悲惨に崩れてるんだがな。
最低限でなる条件を出してくれ。
342 :
325 :2006/03/15(水) 13:20:15 ID:???
>>338 はい。了解しました。
divは纏まりとして使っています。
divの中にulや画像や色々いれて、グローバルメニューエリア等として
HTMLでは「纏まり」は「見出し」と共に存在しているのが普通なんだが(ry
344 :
325 :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-->
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; }
>>344 Win2000Fx1.5、IE6で、そのソースでは再現せず。
347 :
325 :2006/03/15(水) 13:26:50 ID:???
上記で文字が重複するのはheader というテキスト。 #headerの巾を600等にすると重複はさけられるのですが、 なにぶん謎なもので、 ちなみにcssは外部においています
348 :
325 :2006/03/15(水) 13:28:00 ID:???
うぷローダにあげてみます。
ブラウザ再起動してみ
350 :
325 :2006/03/15(水) 13:32:33 ID:???
353 :
325 :2006/03/15(水) 13:43:14 ID:???
>351さん>352さん早速有難うございます。 当方の環境 winxp ie6のみでテキスト重複となっています。 ----下記環境では問題ないのです、、、、 winxp ファイヤーフォックス1.5、ネットスケープ7.1 macOS9 iea5.1 macOSX safari、ファイヤーフォックス
>>350 XP2 IE6 再現する。
同 Fx 再現しない。
うーん、なんじゃこれ???
Win2000IE6は問題ない。 XP、また悪さしてんの?
>>354 とりあえずこっちじゃ確かめられないから、
* { border:solid 1px #f00; }
でも付けて、ボックス壊れてないか確認おながい。
357 :
325 :2006/03/15(水) 13:48:11 ID:???
358 :
352 :2006/03/15(水) 13:49:01 ID:???
>>350 スマン、見間違えてた
確かに最下部headerの文字が重複表示されてる
359 :
325 :2006/03/15(水) 13:56:14 ID:???
361 :
325 :2006/03/15(水) 14:20:29 ID:???
>>360 すみません
>344のソースは改行減らしている時にコメントタグの末尾が抜けてしまっていました。
350のソースが正解です。
>>361 html のコメント全部とっぱらう。それで直る。
363 :
325 :2006/03/15(水) 14:23:08 ID:???
>>362 おおおおおおおおおおおお
マジですね!
しかし、なんでなんでしょうか…コメントタグに関するバグなんですかね・・・
<!--コンテンツエリアend-- <!--コンテンツエリアend-- <!--コンテンツエリアend--
>>363 それはSGMLでいうところの注訳宣言なのでタグではない。
366 :
325 :2006/03/15(水) 14:27:59 ID:???
>>364 <!--コンテンツエリアend--
は2ch添付の際のミスです ごめんなさい。
ふ〜〜ん
>>363 あてずっぽだが、キャラコードがshift-jisで、コメントの最初の文字が日本語。
で、IEのコメント解釈(独自に拡張してる)とかち合ってるんじゃ無いかと思う。
EUCとか、UTFとかで試して見るとかすると判るかもしれんが、めんどくさい。
369 :
325 :2006/03/15(水) 14:29:37 ID:???
注釈宣言内の文字を半角英数にしても結果変わりませんでした。 注釈を取ると直るということはどういう原因が考えられますでしょうか?
とりあえず気になって仕方が無いのでツッコミ。 フッダーじゃなくてフッターだからw
>>369 とすると、>が含まれるコードが入ってるかもね。
日本語全部とっぱらってみるとかか?
373 :
325 :2006/03/15(水) 14:37:23 ID:???
>>370 ブッタみたいですみません(ペコリ)w
コメントが1つや2つの場合は重複表示はされませんでした。
コメント多すぎなんでしょうか?
>>372 みてみます!
374 :
371 :2006/03/15(水) 14:38:15 ID:???
と思ったが全然違うな。
>>372 多分、こっちまわりだな。
おもしろいね。 utf-8にしてもだめだった。 <!--グローバルメニューend--> <!--コンテンツエリアstart--> <div id="cont"> <p>コンテンツエリア</p> </div> <!--コンテンツエリアend--> <!--フッダーstart--> この部分のコメントを1つ削ると1文字、2つで2文字、3つで〜以下同文って感じで消えてくみたいw
これは関係ないかな? <!--フッダーstart--> ↓ <!-- フッダーstart -->
377 :
371 :2006/03/15(水) 14:41:53 ID:???
確認した。
>>372 が正解だ。
float指定してるdivの前のコメント削ったら直った。
IEは、あかんね…
378 :
325 :2006/03/15(水) 14:47:22 ID:???
>376 スペースいれてみましたが変わりませんでしたっす。 floatの前にコメントを置くとなるバグですかね… みなさんご協力有難うございました。 コメントタグ消して納品するかな… しかしfloat指定のdivの前にコメント書くことなんかよくある事では無いんでしょうか 俺だけか…
納品って・・・おまえ・・・・・・・・・・・・・・・・・・・・・・・・・・・・
初心者スレにも妙なプロが湧いてたな、そういや。
流石にこのバグはわからなくても仕方ない気も。
問題はテンプレも見てなかったということだな。
え?w
テンプレ以前にここの住人でさえまともにこのバグ把握できてる人って
>>372 の1人しか居なかったじゃん。
答えがわかったから好き放題言えるけどな。
コロンブスの卵みたいなものだ。
答えてもらったらもうそれか・・・
バカなプロは消えな
>>383
>>383 ここの住人はアマ。
質問者はプロ。
この違いが分かるな?
プロはなんでも知ってて完璧だと思い込んでる人だらけのスレはここですか?
知らなくてもいいんじゃない 自分で調べる努力を し て れ ば
383は本人じゃないかもしれないが、 どっかの崩れプロのような希ガス。 ていうかそういう香具師に頼みたくNeeeeeEEEE!!!
389 :
325 :2006/03/15(水) 15:03:15 ID:???
トリップとか付けてなくてすいませんでした。 winxpのIEのバグとなると無視する訳にもいかず… firefoxの方が使いやすいんですけどね本当は 最近cssを使い始めて(遅いですが)色々模索しながら作業してるので こういう場はとても助かります。 また、なにか分からないことあったら皆さんよろしくお願い致します。
来なくて済むようになってください。 というかプロなら周りに詳しい人いるでしょうが、 名無しの無責任な発言より、そういう人達を頼りにしてくだちい…。
あんだけコメント付けてたら手間かかって・・・ プロならそう思うと思ったりなんかして仕方がない今日この頃です。
392 :
325 :2006/03/15(水) 15:06:19 ID:???
>>390 周りにcssについて詳しい人いないんすorz
社長は中卒でアホだし orz
金の絡む問題で匿名をアテにスンナ
>>352 「納品」で自慢、「中卒」で学歴批判('A`)
もう二度とクンナ!
396 :
:2006/03/15(水) 15:10:21 ID:wgRo25VY
398 :
:2006/03/15(水) 15:11:53 ID:wgRo25VY
>>397 =352
ごめんねごめんね母さんレス番間違えたよごめんね
なに噛み付いてんだか、さっぱり理解できん。
>399 かあさんにもやっと春が来たんだね。
売ってんじゃねーよ。
404 :
:2006/03/15(水) 15:18:07 ID:wgRo25VY
ま、全員アマチュアの引きこもりってことでFA?
しかもひがみ根性丸出しでFA
406 :
325 :2006/03/15(水) 15:19:37 ID:wgRo25VY
そろそろ自演は終わった?
終わった
むしろ自演を装った煽りが終わった?
終わった
test
412 :
:2006/03/15(水) 15:49:59 ID:wgRo25VY
test
list
pest
dust
^^
417 :
:2006/03/15(水) 20:16:13 ID:wgRo25VY
t
すみません、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で見ても、そうした現象は起きません。
50レス程遡ると幸せになれるかもしれん。
>>419 どうもありがとう。コメントが障っている、ということですね。
それとは別に、418を投稿したあと、自己解決というか、
clear後のブロックのwidth指定をすると、文字のダブリは消えました。
なぜなのかはわかりませんが。。。
IEの挙動はおかしいからな。 覚えるのキリが無い。
422 :
:2006/03/16(木) 09:56:16 ID:yJc0q8A/
w
423 :
Name_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; } として文字を画像に置き換えたいのですが、 このままではリンクが外れて?しまいます。 画像リンクのように表示したいのですがどうすればよいのでしょうか? よろしくお願いします。
>>423 h1 a {
display:block;
text-indent: -9999px;
background: url(img/h1.jpg) no-repeat;
width: 100%;
height: 100px;
margin-bottom: 30px;
}
425 :
423 :2006/03/16(木) 14:44:16 ID:???
質問させてください。 h1 { vertical-align:middle; } div { height:200px; } <div><h1>text</h1></div> でvertical-alignが効きません。 何か指定を間違えてるんでしょうか?
>>426 vertical-alignはインライン要素、TD/TH要素に対してのみ。
>>427 h1にdisplay:inline;を追加したところで変化しないのですが
助けて母さん
>>428 非置き換え要素のインラインにはheightは適用されない。
ありがとうございます、何とか理解しました
<div class="section"> <h2>見出し</h2> <p>本文</p> </div> こういうの見かけたんですけど、なんでsectionなんですか?
>>432 スレ違いなんだが、それは理解してるか?
XHTML2.0ではsectionという要素が追加される可能性がある。
それでなくともsectionには区画という意味がある。
見出しで区切られる一つの章は区画だから。
>>433 ありがとうございました。
そういうことですか。
スレ違いだとは思いましたが、該当スレがなかったのでここで聞いちまいました。
Osakaフォントを使用しているのですが、たまにOsakaフォントが反映されないサイトがあります。 そこで、ユーザースタイルシートを用いてOsakaフォントを適用させたいと思うのですが、どのようにすればいいのでしょうか? フォント以外の部分はデフォルト通りを希望します。 自分でも検索しましたが、探し方が悪いためか見つかりませんでした。 よろしくお願いします。
ユーザースタイルシートの設定は環境によって違うということは知ってるんだが フォントごとに設定ってできた? というかスレt(r
ユーザースタイルシートで検索したのですが、引っかからなかったので CSSで検索してこのスレが妥当かと思い質問させていただきました。 スレ違いでしたら申し訳ありません。
>>435 * { font-family : Osaka !important; }
サイト側のフォント設定を無視するなんて設定は ブラウザに付いてるだろ。チェックボックスのオンオフを切り替えるだけ。
>>440 ついてるよ。インターネットオプションの全般→ユーザー補助でもじっくり見とき
>>435 Osaka以外のフォントをシステムから外す
445 :
Name_Not_Found :2006/03/16(木) 22:08:33 ID:Jh6ZNqYL
content以外で文章を挿入する方法はありませんか? 比較的頻繁に更新される共通部分を持つ場所が多いのでcssで文章を挿入するようにしたいです。
ない SSI じゃいかんの?
>>446 サーバ管理してるわけじゃないんでそこまでの権限はないんですよね。
かわりの方法考えてみます。ありがとうございました。
??
普通にSSI使えない鯖って事でしょ。
>>447 PHPならinclude()とかの関数はある。
Perlでもあったと思うが忘れた…ググれ。
451 :
445 :2006/03/16(木) 22:40:52 ID:???
今の予定ではWebサーバすら利用せずに完全にローカルで使うだけなんです。
ローカルだろうがパーソナルコンピュータだろうがSSIは使える。 それぐらい調べれ。
配布用かも知れん
457 :
445 :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 ってエラーがでてきました。 言語指定しなかったらフランス語しかでてこなかったです。
あ、tiddyだ。 ケアレスミス。
tiddly wikiまだ間違えてるw うろ覚えすぎた。すまん。
どんま〜〜〜い
どんマイケル!
462 :
Name_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で空かないようにしたいのですが可能でしょうか?
ちなみにmargin-top: -3pxとかはダメです。 IEは余白が3ピクセルですが、FireFoxは4ピクセルだったりするからです。
>>462 vertical-align:bottom;
ul,li{margin:0;padding:0;}
正解だったのに嬉しくない・・・何この偉そうな質問者。
もういいよ、それでも。あほらしい。
いわゆる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)}としても、実際にリンクテキストを踏まないとリンクが機能しませんでした。 どうすればいいのでしょう・・
すみません、ソース訂正します。 ●対象ソース <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>
before擬似要素で失敗したのはこんな感じです。 ul li{ width: 200px; height: 50px; /* imgn.pngの大きさ*/ overflow:hidden;} ul li:before{ content: (imgn.png);} もちろんimg要素を使えば解決しますが、できればCSSで実現したいです。
あ、もっと前だ。 まあここのレスなんで漁ってみて。
見つけました。少し前のレスにあったのですね。 ごめんなさい、夜分遅くにありがとうございます。
とあるサイトでフッターを常に最下部に表示する方法が 乗っていたのですが、 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などでうまく表示されません。 他に最下部に表示する方法でよい方法はありますか?
>>477 ありがとうございます。
CSS初心者なのですが記載のサイトの
html{
height:100%;
}
とはどういうことなのでしょうか?
480 :
Name_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; }
481 :
Name_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が崩れています。 修正はどうすればいいんでしょうか?
IEが崩れてるんです
484 :
Name_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共に他の記述をすべて削除した状態で確認しました。 よろしくお願いします。
485 :
484 :2006/03/17(金) 22:14:02 ID:???
自己レスです。 すいません、なんか色々触ってたら2倍うんぬんは直りました… ただ前半は変わりません。 何がどうなってんだか自分でも混乱してきました…
486 :
484 :2006/03/17(金) 22:29:28 ID:???
再び自己レスです。 すいません。直りました。 ずっと以前にobjectの中に既に別のidを指定していたのを忘れてたという 恥ずかしいケアレスミスでした。 でもそういったゴミソースを無視するブラウザと影響が出るブラウザが 混在しつつ、その挙動に関連性が薄いのがそもそもCSSの…と思いつつ、 大変お騒がせ致しました。ごめん。
おれもわからなかったから
>>464 には感謝だ。
報われるかな。
インライン要素でvertical-alignも使って調整するって、strict的にどうなんだろ?
何の話だ?
display:block;でブロック要素にしちゃえばおk!
天才現る
>>493 その下にソースあるじゃん。
imgじゃなくてテキストに対するa要素でhoverだよ。
a>imgでも同じことはまあできるけど。
495 :
493 :2006/03/18(土) 14:07:41 ID:90z33FUF
496 :
:2006/03/18(土) 15:27:08 ID:90z33FUF
質問です。 ■■ □□□□□□□□ □□□□□□□□ □□□□□□□□□□□ ■がdt □がdd で上のように作りたいいんですけど。 □□がどうしても ■■ □□□□□□□□ □□□□□□□□ □□□□□□□□ □□□ になってしまします。 <dl><dt></dt></dd></dl> で教えていただければ幸せです。
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; }
要素に設定されているスタイルを、 クラス等でノーマル状態にクリアする事はできるでしょうか? <ul> <li>あああ <li class=hoge>いいい <li>ううう <ul> CSS: li { padding:20px; background:などなど沢山 } li.hoge { (クリア) color:red} 表示: 「いいい」 だけが、ノーマルに赤文字表示。
>>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バグ用*/
}
>>500 「ノーマル」の意味がわからない。
デフォルト表示だったら各ブラウザによって違うから指定は難しい。
503 :
501 :2006/03/18(土) 17:29:23 ID:???
>>498 っと、忘れてた。
そのサイト、互換モードになっててIE以外だとずれてるから、
標準モードにして全部で調整したほうがいいよ。
DOCTYPEでググれ。
>>503 DOCTYPEは知ってるけど難しい言葉が一杯でよくわからんのよね・・・
505 :
500 :2006/03/18(土) 17:46:59 ID:???
>>502 ありがとうございます。
そうですね、デフォルト状態に初期化という意味です。
やはり、font-size: medium とか 1こ1こ 指定していくしかないんですかぁ ショボーン
いいい以外にclass指定してあげればいいだけでは。
>>501 /*IE5.5バグ用*/ってあるけど
そのスタイルで変になるところあるか?
知らん。そこまで検証したくはない。
classと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属性が使われる理由もそこ。
ありがとうございます。 ということは、 ヘッダーなどの大きなブロックはid ヘッダーなどの中身の文章はclass っていう感じなのでしょうか?
>>511 というか、idとclassは一緒に使っていいんだよ。
見出しは大抵IDを付けるけど、それとは別に
「こういう説明の見出し」だから、それを全部同じclassで纏めるって手もあるし、
見出しに含まれないナビやアドレスは固有のidを付ける場合もあるし。
「CSSのため」って考えを一度捨ててごらん。
文書として「これとこれはこういう性質の要素だからclassを付けよう」とか
「これはこういう固有の名前を持った要素だ」とか、
まず中身の構造ありきでしか考えちゃならないものだから、本来は。
CSSで装飾ができるのは、おまけのようなもの。
ここはCSSスレ。 id、classといえば当然セレクタの話だろう。 HTMLの属性の話に終始するのはおかしい、スレ違い。
>>513 >>511 嫁。
すでに存在するID/classの話じゃない。
スレ違いはスレ違いだが、昔からよくあるこっちゃ。
>>514 昔からあるからスレ違いだけでも構わない?
一言もセレクタに触れなくて良い?
不正な文書に対して実装がどうなっているかに触れなくて良い?
>>515 >不正な文書に対して実装がどうなっているか
kwsk
これでよくわかった。 説明できん奴はスレ違いの一点張り。 説明できる奴はきちんと説明してる。 理解している=説明できる と思ってる奴は基地外
自分だけがわかったと思い込んで有頂天になり、優越感を覚えるため目の前のスレに書き込む。
>518 >理解している=説明できる 突然脈絡の無い意味不明の発言ワロスw 理解していても説明する為には、 説明の順番や話し方、慣れなど技術的な事が必要 だから、理解しているからといって説明できるとは限らない おまえはこういう事をいきなり話だしたっての理解してる? お前がバカってのは良くわかったw
>>520 こ こ は 2 c h で す よ ?
その言葉久しぶりに聞いたキガス
>521 って、すげーバカ びっくりして歯ブラシおっこどしたぜ ボブ・デビットソン並にキチガイw
>>512 そう言われても、素人にはわからないんだよねー。
IDとCLASSで異なる設定したら、どっちが優先されるのでしょうか。
526 :
523 :2006/03/19(日) 00:13:36 ID:???
>524 自演もなにも、矛盾した発言じゃねーだろ 言い返してきた521に、こ こ は 2 c h で す よ ? っていいたかったのによ。つまんねー奴。
人に聞いてばかりいないで自分で調べたら? それでもわからなかったらまたおいで。
おまえら、cssの話にもどれ。 必死になったら負けだぞ
つまらん質問が多いから、 たまにこういう形でガス抜きも必要なんだろうな。
>>530 だな。でもここでガス抜きは、人間腐ってる
>>531 >つまらん質問が多いから
って話だろ、すり替えるな。他所でガス抜きされた方が、よっぽどメイワク。
ガス抜きぐらい、パソコン使わなくてもできるだろうに・・・・
へえ。そう言う発言で実は他人を馬鹿にして喜んでるのに?
どう読めば他人を馬鹿にしてる ってなるの?
春ですね
position:absolute使った直後の要素にfloat:left使ったら winのIEだけposition使った要素が表示されなくなりました 対策方法はありますか?
クリアするなり、absoluteの要素を最後に書くなり
IDだけでやっても問題なんてねーよ
542のサイトがその程度の作りなら、そのままにしておけばいい。
>>IDだけでやっても問題なんてねーよ まずはIDだけでやってみろ。 やっていくうちにclassの必要性もわかってくる。 ってことを言いたいんじゃないのか?かっこわらいかっことじた
>>544 そうでもないと思うけど。
ページ構成が完全に既存の要素だけで意味が完結してて
一つの要素で別の意味を持たせたいとか
複数の要素で同じ意味を持たせたいとか
そういうのがなければclassは必要ないと思うよ。
思想的だな
思想をマークアップする言語、それがHTML
548 :
Name_Not_Found :2006/03/19(日) 13:21:52 ID:jXLhZx6j
質問させてください。
divの中にfloatを使って<P>と<img>を入れているんですが、二つの縦の長さが違うと
divの下の枠線が短いほうに合わされてしまい、長い要素と重複してしまいます。
↓こんな感じです。
http://www.uploda.org/uporg340278.gif IEでもFirefoxでも同じ症状になります。問題点の指摘をよろしくお願いします。
>>548 だってfloatさせた要素は、通常フローから取り残されるから、それが正しい動作。
550 :
Name_Not_Found :2006/03/19(日) 13:27:43 ID:jXLhZx6j
>>549 ありがとうございます。お答えをヒントにひょっとしたらと思って<div>内の最後に
clear属性をつけた空divを入れてみたんですが、ダメでした…
もうこれはあきらめたほうが良いですか?
552 :
Name_Not_Found :2006/03/19(日) 13:38:20 ID:jXLhZx6j
>>551 ありがとうございます。今見てきたんですがありませんでした。
自分がイメージしているのは、ブログでよくあるようなスタイルです。画像とテキストを含んだ一まとまりの
divが縦に連続して並んでいくというものです。説明が足りなくて申し訳ありませんでした。
>>552 だったら単純に次のブロックでfloatをclearしてやりゃいいだけじゃ。
ってもう俺いなくなるんで、あとは他の人おながいします。
555 :
Name_Not_Found :2006/03/19(日) 13:47:31 ID:jXLhZx6j
ありがとうございます。続く要素にclear属性をつけてみましたがやはりダメでした。
clear属性?!
557 :
Name_Not_Found :2006/03/19(日) 14:11:40 ID:jXLhZx6j
なんか正しい呼び方とか知らないんですが、clear:bothつけました(・∀・)
×both ○boss
member { clear: boss; }
>>557 プロパティな
あと変な子がbossboss言ってるけどbothであってる
561 :
Name_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と倍になってしまいます。 良い回避策はありませんでしょうか?
追伸ですが、imgのheightより『文章』が長い場合はpadding-topは倍になりません。
<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> あえてこうするとか
>>563 レスありがとうございます。
IEだけ半分にする指定方法というのがありますでしょうか?
>>564 レスありがとうございます。
そういった方法ならいろいろあると思いますが、見栄えのためにhtmlを変更しないという条件でやっておりまして・・・
申し訳ありません。
>>567 ありがとうございます。
やってみます。
569 :
561 :2006/03/19(日) 16:26:14 ID:???
IEのみに適用させるハックを使って、さらにもう1つのIEバグも使って * html p { height: 80px; }とすることで解決しました。 ありがとうございました。 IE7が出ても、このハックはIE7以降のIEには適用されないってだけで問題ありませんよね?
そ ん な も の は 出 て み な い と 解 ら な い
わかりました。
>>569 そういうのは、MSが言うとおり、コンディショナルコメントでやるべきだと思うけどね。
>見栄えのためにhtmlを変更しないという条件 これがあるからConditional Commentsは駄目だろ。 俺も同様の理由で嫌いだし、CSS切り替えでは致命的。
好き嫌いで、プログラムでも何でも組める連中は楽で良い。
プロはこんなところに来てませんよ^^
ていうかプロの本にこそハックの小手先技が載ってる現実・・・ 取引先がCCを知ってるくらい知識があると楽だろうね。
position: relativeをした後、それを無効にする方法はないでしょうか? p { position: relative; left: 200px; } #id { ここで無効にしたいんです。でもposition: absolute; right: 200px;は使いたいんです。 }
579 :
577 :2006/03/19(日) 19:02:33 ID:???
>>578 p { position: relative; left: 200px; }
#id { position :static; position: absolute; right: 200px; }
としてみましたが無理でした。
・・・当り前じゃん、更にabsoluteで上書きしてんだから
581 :
577 :2006/03/19(日) 19:27:41 ID:???
display要素の対応しているブラウザは、多いほうですか?
すみません。 CSSの書き方で、質問させていただきます。 たとえば、{ }の中に、{ }を入れて、定義することは出来ますか? ***0{ ***:*** ***1{ ***:*** } }
質問の前にやってみたらどうだね? すぐわかるから
>583 できるのとできないのがある。 メディアとかは可能。
586 :
577 :2006/03/19(日) 21:17:07 ID:???
自己解決しました。 誰も答えられないんですね。
質問する前に努力してなかっただけだな。
>586 誰にも気付かれず寂しかったんですね 泣きなさい笑いなさい あなたの心の傷は受け止めてあげるから そして、あなたの様な思いをする人が出ないように、 貢献してください。世界が平和でありますように。
590 :
577 :2006/03/19(日) 21:26:07 ID:???
やはり負け惜しみですか。 まさに思ったとおりの展開です。 あなたたち・・・無知でかわいそう・・・
591 :
577 :2006/03/19(日) 21:26:50 ID:???
悔しかったら、どうやって解決したのか答えてみるのも良しとします。
>>586 あれだけヒントをあげてて気づけなかったお前に嫌気が差して無視した。
593 :
577 :2006/03/19(日) 21:28:13 ID:???
>>592 大変申し訳ございませんが、それは何のヒントにもなっていないし関係なかったです。
・・・本当の池沼だったか・・・
595 :
Name_Not_Found :2006/03/19(日) 21:28:39 ID:K2tsWb4V
>590 3時間も悩み続けたようですね 答えが出なくてもいいんですよ あなたは成長している筈です もっともっと叫んでください あなたの心が癒されるなら
597 :
577 :2006/03/19(日) 21:29:17 ID:???
>>594 こういう場合、ここでは「おまえがな」とでも言っておくのがよろしいんでしょうか。
>597 そうそう、もっともっと叫んでください 明日には新しい自分に会えるはずです
600 :
577 :2006/03/19(日) 21:31:08 ID:???
>>596 3時間も悩み続けてたと思うということは、あなたはそのような暇があるようですね。
みんな自分と同じように考えないほうが、これからの人生少しは上手くいくと思いますよ。
601 :
577 :2006/03/19(日) 21:31:49 ID:???
>>599 その調子です。
あなたも私に対してもっともっと叫んでください。
602 :
577 :2006/03/19(日) 21:34:43 ID:???
「誰も答えられないんですね。」というふとした拍子の私の発言にカチンと来たあなたたち・・・かわいいわね。
>600 あなたは素晴らしい あなたは3時間悩んだだけでなく、 私のことまで気遣ってくれて もっともっと貢献してください
餌やると居着くから放置しろよ
605 :
577 :2006/03/19(日) 21:35:28 ID:???
>>603 さあその調子です。
もっとです。
あなたの妄想を私にぶちまけなさい。
606 :
577 :2006/03/19(日) 21:38:02 ID:???
>>604 あなたは何様ですか?
私を犬とでもおっしゃるおつもりですか?
犬はどちらか・・・それを3時間ほどよく考えなさい。
577 3サイズは?
>>604 に加えて、触ってる奴は自演って事でまとめて放置ヨロ
609 :
577 :2006/03/19(日) 21:39:26 ID:???
紅音ほたると同じです。
チェーンソーで斬れそうなヤツだな
611 :
577 :2006/03/19(日) 21:40:32 ID:???
>>608 加えてあなたも自演だということに気づきなさい。
>>610 私をcoda扱いしないでください。
ポの新手の自演か?
613 :
577 :2006/03/19(日) 22:17:28 ID:???
ごめんなさい。 精子が溜まってたので、頭がおかしかったです。 もうしません。次したら自分は糞と認めます。 だから許してください
.hoge{ background: #ffffff; color: #ff000; } +++ .hoge { background: #ffffff; color: #ff000; } +++ .hoge{background: #ffffff;color: #ff000;} ↑どういうのが正しいの?
615 :
595 :2006/03/19(日) 22:26:58 ID:K2tsWb4V
会話の途中ごめんなさい。 fontsizeで指定したのですがテーブル内の文字のフォント(bodyのみ)が 変わりません。何かタグを追加しないといけないのですか? body {background-color: eeeeee; font-size: 14px (別にlinkなども指定してあります) つまらない質問ですみません..
>>615 td{
font-size: 14px;
}
あと、フォントpx指定h(ry
dd{ border-bottom: dashed 1px red; } <dd>testaa</dd> <p>aa</p> testaa ---------- aa って感じにしたいけど testaa aa ---------- こんな感じになってしまいます。 どうすれば直るのかがわかりませんorz
質問なのですがNetscapeだけにCSSを実行させるハックはどういう記述でしたっけ?
619 :
595 :2006/03/19(日) 22:35:59 ID:???
質問です。 あるボックスの横幅を200pxに固定してpadding-left:50px; と設定したら IEでは正常なのにオペラなら横幅が250px;になってしまいます。 どうすれば、横幅が200pxのままpaddingをつけれるのでしょうか?
623 :
Name_Not_Found :2006/03/19(日) 23:09:36 ID:jXLhZx6j
あのう… 昼に
>>548 で質問した者ですが、ヒントでもいいので教えていただけないでしょうか…
昔のを出してすみません。
>>621さん すみませんでした。 ありがとうございます やっぱりこの対処法で一番いいのは width:200px; と書くよりbox-width:200px; と書くことなのでしょうか?
626 :
617 :2006/03/19(日) 23:15:50 ID:???
(´・ω・`)
627 :
Name_Not_Found :2006/03/19(日) 23:17:06 ID:jXLhZx6j
625ではないが、それならポジションでやれば?
imgをpの子要素に
文中に文字より小さな画像を入れたら 文字の上に合わせてしまいます。 真ん中にするにはどうすればいいのでしょうか?
632 :
Name_Not_Found :2006/03/19(日) 23:24:45 ID:jXLhZx6j
>633 検証サビス。 または基礎からやる直し。
635 :
Name_Not_Found :2006/03/19(日) 23:33:02 ID:OHUzI0Q9
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; }
上下のマージンをなくし パディングでやったらどうでしょうか dt.ddどちらにもパディングで上下に20pxつければ ずれないとおもいます
思いっきり余談だが、この過疎板でこのスレは安定して伸びている。 それはそれで問題じゃないか。 仕様書を読むとか、曲がりなりにも検索するとか、 もっと大曲がりして表示させて確かめるとか、 そういうことを繰り返すほうが比較にならないほど早いはずなのに、 どういう積もりで見ず知らずの誰かに恭しく質問なんかするのだろうか。 ちょっとおかしいと思わないか、そういう人種たちを。
>>638 器小さすぎ。
答えたい奴が答えてるんだから、別にいいだろ。
気に食わないならこのスレに来なければ良いこと
正しい答え、ならな。
いいじゃないのよ。 あんたに文句つけられる筋合いはないわよ。 とっととあっちへいってらしてよ。 あんたなんか嫌いよ。
そうよ女の敵だわ!
>>636 試してないが、vertical-alignで出来ないかな。
あとはfloatさせずdisplay:inline;指定するのもいいかも。
div〜divの中に書けるタグって何がある?
たくさんある。
┏━━━━━━━━━━━━━━━━ ┃ ┃ ▼ 見出しのタイトル ┃ ┗━━━━━━━━━━━━━━━━ な感じにしたいけど ┏━━━━━━━━━━━━━━━━ ┃ ▼ ┃ 見出しのタイトル ┃ ┗━━━━━━━━━━━━━━━━ みたいに上に画像が行っちゃう・・・なんで? ▼は画像です。
>>650 説明不足でした背景の画像を真ん中にしたいのですが・・・
background-position: 50%; 背景の画像を左から50%の位置ってこれであってますか? background-position: 50% 0; background-position: 50% auto; って感じにしたほうがいいのでしょうか?
centerひとつで
>>653 すいません
60%の位置の場合は・・・
#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 ┃ ┗━━━━━━━━━━━━━━━━┛ ってなってしまいます・・・
background-position: 20px 50%; 左から20pxの位置の真ん中にしたい場合はこれでOK?
>>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 しつこい。試せ。
>>658 width:20px;
これはなぜ20pxなのでしょうか?
>>659 画像の幅を20pxにしたから。非置き換え要素のfloatは幅を明示しないといけない。
またaとimgの両方にしたのはIEともじらの互換性のため。
cssファイルに、どこのどんなスタイルか分からなくならないように、 各スタイルのかたまりごとに、 /* この中にどこの部分のスタイルかを書いています */ こんな感じで全角文字でコメントを入れていたのですが、 このコメントのある・なし(もしくは中の文字数?)によって、 IEだけ、そのコメント直下のスタイルが効かないことがあります。 コメントを書くときに約束事、使用不可文字などあるのでしょうか? コメント内に「を」があると、ダメなような気がしています。
>>662 文字コードちゃんと指定してて、保存もそれでしてるか?
できれば.htaccessでも指定してやるのがいいらしいけど。
664 :
662 :2006/03/20(月) 17:59:53 ID:???
>>663 @charset "utf-8";
を入れています。保存もしています。
いまも、いくつか試したのですが、
「を」があると、直下のスタイルが効かなくなるようです。
とりあえず「を」は使わず、他の文字にも注意してやってみます。
.htaccessでの指定方法はこれから調べてみます。
ありがとうございました。
665 :
662 :2006/03/20(月) 18:04:46 ID:???
何度もすみません。分かりました! HTMLファイルは文字コードを指定して保存していたのですが、 cssファイルの方はやってませんでした。 さっそく、cssファイルを文字コード指定して保存したところ、 ちゃんとスタイルが効きました。 初歩的なミスですみません。 ありがとうございました。
666 :
Name_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でも正常にすることが出来るのでしょうか?
画像の上に画像を重ねて表示させることは出来るでしょうか? 例えば、商品画像の上に「売り切れ」ロゴ画像を重ねたりなど。 ちなみに、この場合の商品画像にあたる画像は imgタグで表示されています。
配置を弄れば表示できるけど、divに背景画像を指定して、中でimgタグを使うとか、そんな方法もとれる。
>>670 そんなことしなくても、imgのbackgroundでええやん。
それだと、z-indexがおかしくなるんじゃないっけ?
>>672 z-index必要ないだろ。
尤も669の場合、HTMLをいじることが前提になるが。
674 :
669 :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> ←売り切れ商品画像
こんな感じになるといいな、と考えています。(でなくても構いませんが)
>>674 そういうHTMLにしたいんだったら、
やっぱりpositionでやるしかないと思う。
その他がどういうマークアップになるのかわからないが、
relativeとabsoluteを使ってz-indexでz軸の並び順を設定。
個人的にだが、ホームページビルダーのせいで z-indexにはなんとなくアレルギーがあるなぁ。
すみません。質問です <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つ使うのはダメなのでしょうか?
ダメ。 IDは1つにしか使っちゃいけない。 そういう時はclass属性を使う。
box-width:480px;と設定しても480pxにならずautoになるんですが、どうしてでしょうか?
>>679 そりゃCSS3で実装されるかもしれんってプロパティだからな。
>>680 さん、ありがとうございます。
これと同様の働きをするプロパティはないのでしょうか・・・・?
Operaとかでみたら横幅IEのときと全然違います。テンプレにのってるサイトもみたのですが・・・・
box-widthの方法しかわかりませんでした
質問です。 やりたいこと: ―――――――――――――――――― | | | | | | | | | | | | | | | | | | | | | | | | | | | |_________________ 右(メニュー)幅150px、右隅固定 左(コンテンツ)可変幅+overflow:scroll適用 フレームを使えば簡単なんだけど、CSSで解決出来ませんか?
>>681 標準モードにすればIEも同じ挙動になるから。
個人的にだが、IEを基準にレイアウトするのはやめた方がいいと思う。
>>682 CSSでは段組みとかカラムとか呼ばれてるけどね。
テンプレ見てみなされ。
>>683 標準モードって閲覧者個人の設定ですよね?
それとも、こちらから設定できるのでしょうか?
>>685 さん。ありがとうございます。
何故か自分は交互のほうを書いてました。
ありがとうございました!
<!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 の数値分横幅が増えるんですが・・・
どこか間違ってますか?
増えるだろ?
>>688 さん。
IEでは増えて、Operaでは増えないんです。
どうにかできないんですか?
ソースなきゃわからんよ
あれ。すみません。自分が間違ってました。 標準モードなら IE、Opera・・・・padding-leftの数値分widthに加算 標準モードではなかったら IEは加算されて Operaならpadding-leftの数値はwidthに加算されない ってことなのでしょうか?
ごめんなさい。上のレスは忘れて下さい。 全て自分が悪かったです。全て自分のcssが間違ってました。 スレ汚しごめんなさい。お手数かけた人もすみませんでした
#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ボックスの下にいっちゃいます。 どうして⇒にいかないのでしょうか?
事故解決しました ; が抜けてました
Copyright (C) Your Site Name, 2005 All right reserved. の2005ってどういう意味ですか? 2005年から有効? 2005年まで有効?
2005からスレ違い
スレ違いにも関わらずありがとうございました!
例えばこんな場合、実際のwidthは502pxになるんですか? .que { width: 500px; border: 1px solid #000000; }
CSSの本来の実装だとそうなる。 だけどIEだけは中身498、border1*2って表示する。
ありがとうございます
701 :
Name_Not_Found :2006/03/21(火) 16:21:41 ID:XNilTTsw
なにをもって「本来」とするのか?
人間本来汗とアルデヒド
>>701 標準モードでないと文字の大きさの計算がずれるバグがあった希ガス。
>>704 strictの宣言でバグがあるということですか…。
それは仕方ないですね。
回答ありがとうございます。
>>705 違う。Strictの宣言がないとバグがある、だ。
バグってより、互換モードはQuirks(奇癖)だから、正格で 必要はないったらないんだが・・・なぁ?
>>706 では、strictの宣言入れてる自分のほうの表示が正しい、
という解釈でよろしいのでしょうか。
ただ、CSSのやり方について書かれているサイトが宣言が抜けていて、
『x-smallだとこの大きさに見えます』
と説明されていたので、自分のやり方がまずいのかと心配で…。
>>709 サイト情報ありがとうございます。
なんか分かったような分からないようなw
とにかく宣言があるほうが正しいと分かったので一安心です。
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を画面の右下に表示させようとしていますが このやり方だとページの右下に表示されてしまいます。 どなたかよい方法を教えてください!
>bg.jpgを画面の右下に表示させようとしていますが >このやり方だとページの右下に表示されてしまいます。 させようとしてることができているように書いてあるようにしか見えないのは俺だけか?
IE Opera もじら で表示確認をしていれば、NNでもレイアウトは崩れる ってことはありませんよね? (標準モード)
背景固定したいって事?
>>713 バージョンによっても違う。NNは4と6以降で別物。
また最新のN7.1も、一昔前のMozillaだからCSS2.0対応で若干違う。
最新MozillaはCSS2.1対応。だから保証できないし、実際違う部分もあった。
なんで714と718は同じ下一行が空いてるのかな〜
720 :
Name_Not_Found :2006/03/22(水) 00:59:06 ID:Yunm48LN
ネタにマジレスさr
そんなネタじゃ笑えんよ
つまらなくてごめんなさい! 生きててごめんなさい! CSSスキーでごめんなさい!
724 :
711 :2006/03/22(水) 10:11:05 ID:???
>>712 hogehoge・・・
とかのメインコンテッツ
の部分が長くなるって数ページになると
ページの右下に壁紙が表示されてしまいます。
私が表示させたいのは画面の右下です!!
725 :
711 :2006/03/22(水) 10:29:24 ID:???
726 :
Name_Not_Found :2006/03/22(水) 10:41:05 ID:Yunm48LN
背景画像固定はスクロールがもっさりするから嫌い。
>>725 >>711 の質問では誰もが
>>712 だと思ったよ。ヒステリーは勘弁してくれ。
divじゃなくてbodyに指定すれば出来るけど、
画像によっては右方向の位置調整がメンドウだな。
あとまあ
>>726 に同意。
背景画像固定ってもっさりするのか? 初耳だ。自分の環境ではなったことない
>>727 画面とページをちゃんと使い分けてるから漏れはわかったが・・・
壁紙を並べて表示させたのですが 壁紙と壁紙の間って指定できないのでしょうか?
>>732 並べてってのは?
repeatの間隔は調整出来ないよ。
[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>
[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の部分をどのように変更すればよいか教えてください。。。
>>733 そうですか・・・
BODYに壁紙二枚も指定できないですよね??
これだけ探して見つからないんですから・・・
>>735 いろいろ方法はあると思うが、自分ならこうするってやつ。
例ではdlが1つになってるが、それぞれdl(例の場合2つ)にして、
dlにborder-bottomとheightを指定。
それからdl内にpはヘンだから削除。
739 :
735 :2006/03/22(水) 14:54:39 ID:???
>>737 アドバイスありがとうございます。やってみます。
>それからdl内にpはヘンだから削除。
了解です。
自分も今、スタイルシート事典を読んでいて
変であることに気がつきました…。
んなこたない。 dl直下にpだったら違反だけど dd内にpが出ることは充分考えられる。
>>740 どんな要素も入れちゃダメなんじゃなかったっけ??
>>740 dl - dt|dd
dt - inline
dd - flow(block|inline)
ddはp入れられる
743 :
742 :2006/03/22(水) 15:44:37 ID:???
744 :
Name_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; } だとダメでした。
745 :
Name_Not_Found :2006/03/22(水) 17:12:47 ID:9WJvmjty
テーブルのスクロールバーはCHROMAで透過できるけどBODYではうまくいかない 方法がありますか?
746 :
Name_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; }
>>746 明らかにスタイルシートの基礎が理解できてない
ブラウザの横幅100%ってウインドウの端から端までなのに 縦の100%ってブラウザの端から端までではないんだね・・・(´・ω・`)ショボーン あと、テキストBOXのスクロールバーを透明にするやり方あったと思うんだがどうやるんだっけ?
意味が無いと思うなら外せばいいんじゃない?
>>748 高さは内容量で決まる。CSS以前の問題。
752 :
748 :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;
}
テキストボックスはできるけどこういうやつは透明化できないのか・・・
>>752 それ以前の問題。
spanはインライン要素!
756 :
Name_Not_Found :2006/03/22(水) 17:43:53 ID:R/+RH28S
746です。勉強不足でした。 リンク先をみて勉強してみます。ありがとうございました!
<ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> たとえば上のようなリストを横並びで表示したいんですが、 各項目の間を、 - (ハイフン)などで区切りたい場合 どのようにしたらいいですか?(横並びにする方法自体は理解してます。)
>>758 contentプロパティ。
IEが対応してないからJSで。
それができないんだったら背景画像としてハイフン。
divでかこってあるところをposition: relative; し そのなかのものを position: abusolute; left: 0; bottom: 0; としたのですが、IEだとうまくdivでかこった範囲内でabsoluteされないのですが なにか対処法はありませんでしょうか?
Divの親もposition: relative; にしても無理?
>>760 あー・・・IEはなんか間違った動作する組み合わせがあった希ガス。
因みにabsoluteの動作自体を誤解してる香具師が多いんだが、
親要素からの絶対配置だぞ?
むりですね・・ なぜかかなりはみでた位置にabsoluteされます・・
親要素=今の場合はdiv ですね でもやはり、ボーダーでかこってみても、あきらかにはみ出たいちに配置されます Firefoxだとdivないのleft bottomになるのですが。
>>764 ソース出さないと誰も再現出来ない。
一人でぶつぶつ言いたいだけならいいんだが。
とりあえず親の親も全部position: relative;やってみれ bodyもposition: relative; ごめん 適当
<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; }
>bodyもposition: relative; これだけはやめとけ、 マシンパワーの少ないブラウザクラッシュさせるだけだ
これでうまく動作しません
margin: 0 auto; はよけいでした・・。
質問者はIDを出すこと!!
>>767 ulのabsoluteがleftとbottomだけど、leftとtopで指定するべきなんでは。
あとdivの高さを指定すると。
bottomの指定だと無理ですかね? 高さは指定せず文章が追加されたときでも対応できるようにしたいのですが topの指定だと文章量がかわってしまったときにうまく表示されないのでどうしたものかと
さんなものを絶対配置するな!
どういう時に div class , div id , span とかを使い分けるのかがいまいちわかりません。 エロい人教えてください
順不同リストを1個だけボトムへ・・・・ 思いつかん
>>775 relativeに対するabsoluteの基点はrelative要素の左上だから。
結局
>>776 って事になる。
んーなるほどわかりました。
>relativeに対するabsoluteの基点はrelative要素の 親要素だから。 って言えよ・・
>>781 誤解してるようだが、親要素がrelativeでない場合はちがうよ?
質問者がぜんぜんわかってないようだから、回りくどく説明したまで。
>773 質問者はsageなくていい、ってほうがわかりやすいかと
尤もそれはIEがバグ抱えのせいなんだがな・・
IE7、β2の例のヤツで開発終了だって・・・・ハハハ・・・・ orz
>>777 class→なんらかの共通項をもつ要素にアクセスしたいときに使う。
id→ある要素に個別の識別子を与えたいときに使う。
※CSSに限った話じゃないです。
div→要素群をひとまとめにしたいときに使う。
span→インラインレベルのものをなんとなく括りたいけど、
とくに該当する要素がない時に使う。
※CSSとはあまり関係ありません。
>>789 ソースplz
まあMSならそういわれても不思議ではない気がするが。
すみません。質問です。 縦に割るレイアウトみたいな感じで 左側に<div id="left"> というボックス。 右側に<div id="right"> というボックス。 を作り、縦の長さが長くなったほうに、heightを合わせたいのですがどうすれば良いでしょうか? たとえば、 left が文章の書きすぎでheighが大きくなって200pxになったら そにあわせて、rightのheightも200pxにしたいのです。
>>795 無理。背景でそれっぽくごまかすしかない。
>>796 さん。ありがとうございます。
自分も背景で誤魔化すことを考えたんですが・・・
leftとrightの境目に線をひきたいのですが、やっぱりこれも無理ですよね?
これをするにはテーブルで囲むしかないのでしょうか?
>>797 絶対に長いほうが決まってるなら、
そっちのボックスの左だか右だかのボーダーで。
決まってないんだったら、コンテナボックスの背景画像を線にする。
>>798 さん。ありがとうございます。
やっぱり背景画像で誤魔化すしか、ありませんか・・・
css3ならこういうのできるようになるのかな・・・・・
ありがとうございました
>>799 ていうか、だからHTMLというか文書の問題として
内容量で高さが決まらなかったら逆に問題でしょうが。
日本語でおk
803 :
Name_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> と打ち込んだのですが、背景色が表示されません。 どうしたらいいでしょうか。 よろしくお願いいたします。
sage進行でしたか? だったら申し訳ありません。
スタイルシートをこうしてみて。 .1 td { background-color: #99FF99; } .2 td { background-color: #CCFFCC; } .3 td { background-color: #99FFCC; }
先ほど質問したものです。
言われたとおりに修正すると背景色が現れました。
どうもありがとうございました。
>>805-806
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ラインの横幅が明らかに長くなってた・・・ なんでですか??
811 :
Name_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
つか、他にも突っ込みどころが萬斎
ちょっと聞きたいのですが10pxの文字って読みにくいですか? 自分の環境でも読みにくいことはありませんし、よく10pxに固定してるサイトも見かけます。 某ブラウザも9px以下のサイズの文字は強制的に大きくするように標準でなってます。 皆さんの環境ではどうなのでしょうか?
>>815 読みにくいかどうかは、アクセスした人の環境や視力などによって異なる。
固定しない方が吉。
10pxなんて絶対駄目駄目! バナーとかコピーライトとか、無意味なイラストとか 絶対読まない情報価値の無い場所とか 気取った雰囲気メインのサイトとか 読んで貰いたくないけど、データとして載せるだけのとことか 文字として扱う必要の無いとことか だから本文は14pxにして!12でもブラウザによっては小さすぎる まぁ、CSSはテキストへ非適用、文字サイズ最大にして見てるけどな つーか、使い所次第だろ?
>>817 本文が14pxでかいなぉぃ
モニタ小さいわりに解像度をでかくしてる馬鹿だろ?ww
819 :
815 :2006/03/23(木) 19:08:50 ID:???
>>817 本文が14pxってでかいですねw
私は、本文を12pxにしてます。
%で指定に変えようかと思ってるのですが
100%だと何を基準にしてるのかがいまいちわかりません。
どなたか教えてください。
逆 でかいモニターのPCに買い換えてからまめ字がうざくなった
>>819 100%がどれくらいかはブラウザによっても違うと思われます。
IEはモジラ系に比べて大きい。
うちだとNNはやたら小さい。
某所でフォントサイズの指定はどの単位で指定すべきか?って論議してたけど、%がベストみたい。
ピクセルとかの絶対指定をしてしまうと閲覧者の側で変えたくても変えられなくなるので好ましくないと。
つまり、文字サイズによってレイアウトが崩れるような作りにするな、って事ですかな。
px固定するなら16pxにしている。 %なら105%か110%ぐらい。 閲覧者はデザインじゃなくて字を読みにきてると思うから字を大きくしてる
情報詰め込みたいトップページなんかは小さ目でもいいだろ 結局>815はどんなサイト作るんだ? 単位うんぬん話しても無意味なきがするぅ
>>819 でかくねーよ、俺の最低フォントは24px。
だから固定されると非常に辛い。
本文のフォントサイズは全く指定しないのが最善 見出しとかは本文に対する相対比で適当な大きさに指定する
フォントサイズっちゅうのは、そこのPC環境によって 利用者が自分で設定しているサイズがある。 弱視の人なんかは とんでもなく大きい文字を標準にしてたり。 だからサイズは、できるだけ%で相対指定して、環境標準サイズを 生かしてやるべき。
とはいえ85%で固定とかされてても豆字固定と大差ないと思うが・・
>825 適当ってのも最近疑問なわけよ ぶっちゃけ、見出しは本文より小さくていいような気がする 本文は見やすくデカくしたいのに、見出しがそれよりデカイとウザイ デザイン的にどうよ?って話もあるが、 なんつーかさ、webって情報がほしいわけだから、 重要なもの程デカクして欲しい 「あらすじ」とか「おいしい作り方」なんて見出しがデカくても意味ねーしな さらに、見出しはグラフィカルにしてある方が、 本文と区別がついて検索率が上がる
829 :
Name_Not_Found :2006/03/23(木) 21:01:36 ID:SD9f8nRx
>>824 さすがにそれはモニタが小さいのに解像度上げすぎてるんじゃね?
と思ったけど、よく見たらpxなのな。
16ptと24pxじゃ大体同じ文字サイズなのでやや大きめぐらいってとこか。
俺はptで設定がいいと思ってるんだが、みんなpx指定してるものなのか?
>>828 一般的に見て「見出しはデカいほうがわかりやすい」という傾向はありそうだから
合わせるべきとは思うがね。
>>829 ptだろうがpxだろうが、固定がイクナイ!
>一般的に見て「見出しはデカいほうがわかりやすい まーね。ただ、欲しい情報へ直接アクセスできる(リンクや検索から飛んでくる)から、 本のようにパラパラとめくって見出しを探す必要がないってのもある とはいえ、偏った考え方ってのは認めるw 内容、ジャンプ率、行間やレイアウトで適切さは変わってくるしね
>>931 一ページ内の見出しの数にもよると思われ
833 :
Name_Not_Found :2006/03/23(木) 22:02:35 ID:SD9f8nRx
俺は見出し小さくてもいいと思うよ。 その分、色つけたり、borderつけたり、画像つけたりして目立たせることはできるから。 というか、そういうことすると逆に文字大きいと目立ちすぎて邪魔になる。
というか、さすがにそろそろスレ違い。
>>820 解像度でかい割りにモニタ小さいだろ?wwwww
確か以前こんなサイトを見た気がする 小←文字サイズ調整→大 ってなってて、小を押すと文字が小さく、大を押すと大きくなる あれどうやってるんだろう?ってかサイトが見つからんorz
16px以上の文字が見にくいって視力悪いのか? 16pxの文字より小さな画像のボタンとかってかなり多いかと思うんだけど・・・
文字サイズだけど、某有名PCニュースサイトは 本文だけ文字は固定してないね。 あとは10-12pxの固定文字みたい。 俺も10-12pxで文字を固定するか!
厨達よ そろそろ質問が来る頃だ。 帰ってくれないか?
>>836 JSで変えてるんだろ。
>>837 視力だけでなく解像度も関係する。
2048×1580の15inchとかノートPCだと普通にあるから。
ノートだから解像度下げると滲んで悲惨になるし。
841 :
Name_Not_Found :2006/03/23(木) 22:27:23 ID:SD9f8nRx
>>840 JSはわかってる・・・ってかスレ違いだな
知ったか春厨ってのはタチが悪いな。
845 :
Name_Not_Found :2006/03/23(木) 22:37:04 ID:SD9f8nRx
>>842 ググればすぐ見つかるぞ。
キーワード:Javascript フォントサイズ変更
>>840 >>843 JSじゃJScriptもあるから紛らわしい。
省略しない方がいいよ。
JScriptでもできるとは思うが。
Javascriptでソースがいくつもあるのに、わざわざJScriptでやるのか。
少しは過去ログ読んだら?
どっちでもできるから省略しても問題ないってことだろ。ていうかスレ違い。
最近よく来るいちゃもんつけまくる荒らしっぽいから放置で
知ったか春厨ってのはタチが悪いな。 過去ログも読まずに議論かい? 質問したい人には迷惑なんだよ。 出て行けよ、な?
携帯だけでHP作ってます。 お尋ねしたいのですが、 支援サイト様で見たのですが 「外部CSSのとき、リンク元ページはテキストエディタで拡張子を.CSSにする」とありました サイト自体はフリーページなので、外部CSS用のページが有りますが、掲示板にLOOK2を使っていまして LOOKには自由に使って良いページが有るもので、それを掲示板装飾の為に外部CSS用に出来ないものか、と思いまして。 板違いでしたらすみません。
>>853 その「自由に使って良いページ」をCSSファイルにできるかどうかは、このスレの範疇じゃない。
初心者質問スレか、レン鯖板にそのスレがあればそっちか、
じゃなかったら一番いいのはそこのサポセンに聞くこと。
855 :
Name_Not_Found :2006/03/24(金) 01:36:40 ID:h4f9oNF+
わかりました。
>853>855 駄目だよ。まことさんが禁じてる。
>>857 背景画像のある要素を隠したり表示させたりしてるだけ。
見たが何のことだか解らん
>>857 そこのサイト他のブラウザで見てもデザインが全くズレないな・・・
すげぇ・・・俺のサイトも似たような感じのデザインしてるが
IE以外だとすげぇズレまくりで見れたもんじゃない・・・
ソース眺めていたんだけど、どのブラウザで見ても全体がちゃんと真ん中に寄ってるね
ソース見てたけどそれらしいのが見つからない。俺のやり方だとIEだけ真ん中によって
他のブラウザだと左に寄ってる・・・
どなたかエロイ人教えてください!!
cssファイルは見たのか?
padding: 29px 0 28px 23px; _padding-bottom: 29px; こんなやり方って意味あるの? _ なんかついてるけど・・・
864 :
Name_Not_Found :2006/03/24(金) 12:43:42 ID:h4f9oNF+
>>856 LOOK内のページをCSSファイルにしたいんだろ。
MKTと何の関係がある?
>>860 全てを囲ってるボックスの左右のマージンをauto
アンタースコアハックって言ってほしかった
アンター・・・・吊ってきます
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"> を左右の真ん中にもって行きたいのですが どうすればいいのでしょうか?
標準モードで、margin:auto; を入れとけ
>>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;
}
こういうことですか?
真ん中に寄りませんけど・・・?
オーバーバーって言うのはきもちわるい。
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%にしてるのに真ん中に寄ってくれない・・・ なぜ??
>>878 同じ質問ばかり・・・
何個か前のスレも読めないのか・・・
どうせIEでしか見てないんだろ・・どうしてM$はアホなのか・・・・
>>878 div.test{ ← クラスセレクタが「test」クラスを指定してる。
〜
}
<div class="back_side"> ← クラス名が「back_side」になってる。
〜
</div>
春だからねぇ・・・
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?参考にしたつもりだったんだが
>>883 ・標準モードにするとIEも他のブラウザと同じ動きになる。
・どーしても互換モードでやりたいなら、text-align:center;を追加する。
・そもそもdiv内に直接文章を書くのはよろしくない。
えっ?
>>872 ホントにボケだったんだな・・・
アンダーバーだけならおKだが、
アンダーバーハックでググって、アンダースコアハックとの差を比べてみろ。
どっちだっていいんじゃ。 _をアンダースコアと呼ぶか、アンダーバーと呼ぶか程度の違いしかないし。 たまたまハックという手法でよく使われるのがアンダースコアだったってだけ。
だからこそよく使われてる言葉で言わなきゃ質問者はググれもしないわけで
アンダーバーハックでググってもすぐアンダースコアハックが出てくるよ。
そこまで用語間違え厨を擁護してどうすんの
本人だからさ。
違います><
どっちだっていいって指摘したら擁護とか言われちゃったw 何で噛み付かれてるんだろう俺。
南無w
>>893 南無ww
どっちだってよくないからさ。
初心者にググってもまともに出ない言葉を教えるのは、さすがにちょっと。
ググればどちらでもわかる件について
テンプレがずーっとアンダーバー・ハックになってる件について
問題ありまくり。
些細なことでいちゃもんつけてるなぁ…
質問者に伝わればいいんだが・・
まあ、アンダーバーハックでググってもすぐわかるから大丈夫でしょ。
スクリプトで動いているんであって、CSSじゃないと思うよ。
903>> スレ違いでしたか・・・すみませんでした。。。。
IE使ってなかったからrelativeのことを言っているのかと思った。 しかしきれいなサイトだな。
よく使われる手法だけど、上手い使い方だな。 ちょっと感激した。
>>902 ぃぃな。ぉぃ
そういう使い方があったんだな・・・知らなかったぜ。
他のブラウザでもデザインはほぼ壊れないけど
JavaSがOFFだと動かないな
ageとこ
blogなどにある2カラムのような縦割り表示をするならtableタグしか方法が無いと 思ってたのですがdivでも出来ると言う事を初めて知りました。 そこで質問なのですが divで2カラム作成用タグの「display: inline;」はあまりオススメではない 記述だったりしますか?心配です。 あとBLOGのようなDIVの範囲が広くなりそう(ページ全体など)ならば tableを使ったほうがマシなのでしょうか?
JavaScriptないと読めないってのも不便だよな 3割くらいはOFFのままスルーしてしまう。
JavaScriptをOFFにしてるやつって理解できん・・・ うちのアクセス解析なら3%もいないけど三割もいるの???
>>910 floatを使うといいよ。
>>912 3割はさすがに誇張もいいところだろうけど、それでも5%ぐらいは居るんじゃないかな。
気持ちはわからないでもない。
ほんとウザイのあるからなぁ。
>>913 >float
アリガトン( `・ω・´)調べてきます
>>6-7 辺りにも載ってるから参考に見てみるべし。
>>913 floatは画像回り込み云々だけじゃなかったか?
divにも使えたっけ…
>>915 ありがとうございます。
ブログのメニュー部分、tableを使わなくても済みそうですね(`・ω・´)
918 :
911 :2006/03/24(金) 23:39:55 ID:???
3割ってのは自分がスクリプトをOFFのままにして、内容見ない確立。 閲覧者の3割がスルーするって意味ではないです。。 表現与誤解ごめん
なかよしパレットがとても参考になりました。 ありがとうございました( ´Д`)ノ解決です
サイトをデザインするとき、どうしてますか? 自分は紙と鉛筆で草稿(風呂場でも書けるし)してから 一気にエディタで仕上げるのが好きですが。
俺は頭の中だw 一度書くのを試みたがマンドくセーだった。
考えるんじゃない、感じるんだ
>>922 それって数時間で作業終わるの?
おれは内容ノートに書き出してやんないと、
できたと思っても不足だったりするから
やっぱりノートとボールペンかな。
鉛筆の方が消しゴムで修正できるよ。 あと使うのはノートじゃなくてチラシの裏だな。
実際に頭で構想したのをhtml作ってみる それから紙に書く んで、使う色と文書の配置とかまとめる 短くて三日、長くて一週間
俺は1つのHPを作ってあげるのに、一ヶ月ぐらいデザインを考える。 で色々試行錯誤して3ヶ月目で完成。
おれは完成がない。 一通りできたなと思っててもしばらくすると またどっかいじりたくなる。 そんな人いない?
929 :
Name_Not_Found :2006/03/25(土) 08:43:54 ID:WIGutepY
930 :
Name_Not_Found :2006/03/25(土) 10:15:43 ID:ZixGbgAA
なんかいろいろ付けてみたくなったり、ここ消してみたくなったり。
>925 ボールペン派。消しゴムは面倒くさいし全体が汚れてくるから嫌い。 履歴が残るのもいいな。ただ、恥ずかしい落書きが残ってしまうw 裏が白紙のチラシを探すのって大変そうだなw
932 :
Name_Not_Found :2006/03/25(土) 11:09:51 ID:rfusdULp
やっぱ紙と鉛筆はいつになっても必需だ
紙を発明した人はパソコン発明した人よりえらいな。
紙と鉛筆ほど手軽なものは他にないだろう。 ただ紙と鉛筆とPCは元々次元が違うから、比べるのはナンセンス
ぁぁ ラベルがラベルが・・・
>>936 泣くな 休みになると一気にラベルが下がるのはどこも同じだ。
というか、普通にレベルが高い人でもやる事ばかりじゃね? 「春だなって言いたいだけちゃうんか」とかってツッコミ入れたくなる。
| 項目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>
ボーダーでやればいいのに・・・
俺は / にしたくて背景画像で指定した。
けどリニューアルの時に面倒になって
>>940 みたいにしちゃったw
background:url(img/bb.gif) repeat-y; /*background-image:url(img/bb.gif); background-repeat:repeat-y;*/ これって意味あるの? なんかのバグを利用したやつかな? エロイ人教えて。
お勧めのカラーコードを教える #123456 まじお勧め
なんかびみょうじゃね?
>>943 コメントハックかと思ったけど、その部分だけならただのコメントアウト
>>946 thx
コメントハックって妙にHIT数少ないけど
別の名前かなんかあるのかな?
例みたいなのがないからよくわからん
948 :
Name_Not_Found :2006/03/25(土) 16:31:53 ID:rdK3MnxL
>>947 バックスラッシュハックていう。
#macIE {
}
/*\*/
#other{
}
↑
『/*\*/』以降書かれたものはmacIEで読み込まない。
<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>
.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;}
>>949 >>950 Firefoxの環境だと重なってしまうようです。
Win IE NN Opera ならなんともないので気に入ってたのですが・・・
どこを直せば重ならないのかが色々試したのですがわかりません。
どなたかご教授お願いいたします。
とりあえず、divに生でtestって書くのはイクナイ。
重なるって何がだろう。
>>952 そうなの?知らなかった。
<h3> あたりでも追加するよ
>>953 上の<li><a href="hogehoge.html" title="リンク">リンク</a></li>ってあたりに
下の<li><a href="hogehoge.html" title="はじめての方へ">はじめての方へ</a></li>
が重なる。なぜか下のが上に行っちゃう・・・
>>955 で、これをどうしたいの?
2列に並べる予定?
Gecko/20050922のSylera/2.2.7と、 Gecko/20060130のBagel/0.3.2、SeaMonkey/1.0でチェックしてみたがずれない。 Firefoxは重いから居れてないのでスマン。 だが、Geckoエンジン使ってるので違いが出ないと思うんだけどなぁ。 多分ここに書いたソース以外に原因がある予感。
>>956 普通に縦にしたいのですが・・・(上のソースを普通にIEやNNやOperaなどで見てるのと同じように
Firefoxでも見れるようにしたいのです。)
>>958 いろいろ突っ込みたいとこだが、.sideのheight:1%;って何?
Geckoのバージョンとかにもよるんじゃ。 Geckoのバグか、その他の部分のソースの影響かわからんしなぁ。
>>958 画像じゃなくて、html と css をアップロードしなさい。
本人が関係無いと思って削ってる所がおかしいとかは、良くある話だ。
>>959 それだ!解決した・・・
突っ込みどころ満載でつか?もっと突っ込んでください。
>>962 まだ作り直し途中なので削ってないです。
font-sizeは絶対値指定は止めた方がいいぞ。 %とかで指定しとくのがお勧め。 あと、marginは最初に *{margin:0; padding:0;} って指定してブラウザごとの取り方の誤差を削っておくと楽。 それと、個人的に!importantは嫌いw
>>963 ul.listの2重の指定margin: 0px 0px 0px 0px!important; margin-left: -2px!important; 、
list-style: none!importantってIEは?、しかもlist-style-typeが普通、とかさ。
まあがんがれ。
基本から勉強したほうがいいと思うよ
>>966 ってIEは?って意味がわからないんですけど・・・
>>965 *{margin:0; padding:0;}
* は一つ一つのIDやClassを書かないといけないよね?
>>966 関係ないのに話に入るが
!important って最後につけると意味あるの??
971 :
970 :2006/03/25(土) 22:35:56 ID:???
>>966 あと一つ、まだまだスタイルが未熟で疑問が出てきた
none って値にするのと ないのは全く同じ??
デフォルトの値を継承する
すまん、意味を取り違えた list-style: none これはリストマークを表示しない
うざい。テンプレサイトいけ
/ : 》:、∩ (===○=)/ ウンコ漏れました __ / ⇔ / \⊂ノ ̄ ̄ ̄\ ||ヽ|| ̄ ̄ ̄ ̄|| ...|| ̄ ̄ ̄ ̄||
自分で食べろ
#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%; }
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>
<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でうまくいきません。
>979 #footer { clear:both; }
<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だとやたら左上に表示されます。
982 :
981 :2006/03/26(日) 12:09:07 ID:???
分かる方どうか教えてください。
>>982 分かる方って・・・まあいいか。
fixedはいらない。
984 :
Name_Not_Found :2006/03/26(日) 14:17:47 ID:/ThAfAwL
以下のような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>
986 :
985 :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; } つづく
987 :
985 :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; } 以上
988 :
985 :2006/03/26(日) 14:52:50 ID:???
高さが変わってしまって困ってるのはid="logo"でした。スミマセン どのブラウザで見てもid="logo"が同じ高さになるようにしたいです。 よろしくお願いします。
>>988 h1の文字の大きさに影響されてしまってるんだと思う。
h1の文字の大きさをfont-size: 100%;みたいな感じで指定してみ。
あと、paddingとmarginをいちいち0指定するのは面倒でしょ?
最初の行に
*{margin:0; padding:0;}
って書いておくと楽チン。
>>983 fixedを削除しました。
FirefoxとOperaでは正常になりましたが
NNだと左上から動いてません。
うち無理だった。
誰かスレ立てよろしく。
>>984 を
>>2 に追加を忘れないでおくれ。
992 :
985 :2006/03/26(日) 15:13:25 ID:mMIY0hNs
>>989 ありがとうございます。
やってみましたがダメでした。
試しにh1タグを外したりid="logo"のセル内を空にしてみたのですが
症状は一緒でした。id="content"の中身の量に応じて30px〜100px
くらいの範囲でid="logo"の高さが変わります。
>>992 <td id="navi" rowspan="2"> だからなんでは?
IEだけ均等に配置してしまうとか。
994 :
985 :2006/03/26(日) 15:27:22 ID:???
>>993 もしそうだとするとこのレイアウトでは回避方法は無いという
ことになりますよね?
均等にはなってないんですが、id="logo"が100pxくらいの時
下のid="content"は500pxとかだったり・・・
<div>でやった方が良いんでしょうか・・・
>>990 判りにくいから、名前欄に最初の質問時の番号入れてね。
そりゃ内容が1行しかないdivに指定してるからでしょ。
bodyに指定すれば?
>>996 そういう事ではないと思うんだが・・・・
ソースも流れもきちんと見てないけど 「本当に高さを指定したいのは tr なんです(><)」っていうお話? 次スレまだないね。俺は立てられなかった。
>>997 h1{background-image:url("./test.jpg")}
って感じってこととか?
うーん…わからんので、
わかるお前さんがちゃきちゃきっと答えたってくれ。
1000 :
Name_Not_Found :2006/03/26(日) 15:54:21 ID:qZmPdTbn
1000なら寝る
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。