/* CSS・スタイルシート質問スレッド【58th】*/
1 :
1様:
2 :
1様:2006/06/22(木) 22:56:24 ID:???
3 :
1様:2006/06/22(木) 22:57:22 ID:???
4 :
1様:2006/06/22(木) 22:57:50 ID:???
5 :
1様:2006/06/22(木) 22:58:10 ID:???
7 :
1様:2006/06/22(木) 23:00:18 ID:???
8 :
1様:2006/06/22(木) 23:00:29 ID:???
9 :
1様:2006/06/22(木) 23:01:41 ID:???
10 :
1様:2006/06/22(木) 23:02:12 ID:???
11 :
1様:2006/06/22(木) 23:05:30 ID:???
以上であります (`・ω・´)ゞ
スレ作成権を使い切ってしまった…
12 :
1様:2006/06/22(木) 23:11:43 ID:???
>>6 っておいこら!
テンプレ貼りの邪魔をするなとあれほど言っただろうが!!
連投規制だと思って気を利かせたんじゃ?
前スレ、質問者が釣りだったのならともかく、騙りだったら可哀相に・・・
つうか回答者まで馬鹿にされてるから、誰も答えなくなりそうだ。
別に誰も煽っちゃいない。勝手に質問者がそう思い込んだだけ。
真のアホにアホだって言うと怒っちゃうのと同じ。
オレも粘着だけどな、(。∀ ° )アッヒャッヒャッ
煽りと騙りをごっちゃにしてないか?
粘着を相手にするのはやめといた方がいい。
つまり、馬鹿ばかりと言いたいわけだな?
次の質問、どぞ。
赤ちゃんはどこからでてくるの?
お母さんの口から出てくるんだヨ
それなんてピッコロ?
div要素でpaddingにpxやptで値を指定するとNetscapeやFirefoxだと
反映されないのは仕様ですか?IEだと問題ないんですけど。
.aaa {
width : 800px;
padding-top : 2px;
margin: 0 auto;
}
<div class="aaa">
<div class="bbb"><a href="#">aaa</a></div>
<div class="bbb"><a href="#">bbb</a></div>
<div class="bbb"><a href="#l">ccc</a></div>
</div>
一応ソースはこんな感じなんですけど、padding抜いて
margin : 2px auto;にしても反映されないんですよ。
pxをemにすると反映されるんですが、NNとIEじゃ動作違うんで、どうしたもんかなと。
>>26 それで普通に反映されてる。
* {
margin:0px;padding:0px;
border:solid 1px #f00;
}
.aaa {
width : 800px;
padding-top : 2px;
margin: 0 auto;
}
にして見てみろ、ちゃんと2pxのスキマができてること確認できるから。
* {
width: 3cm;
}
ってケツの穴に何やってんですか!
>>28 おまえなー、今度機会があったらそのネタ使わせていただこうと思っております。
/* 僕の*も閉鎖されそうです
_________________________________________*/
* {
width: 0;
margin:0;
padding;0;
font-size:xx-small;
}
>>27さんありがと。
確かにそれでできたんですが・・・
入れ子(bbb)との兼ね合いで問題がありそうな感じが・・・
.bbb {
width : 150px;
float : left;
margin-left : 5px;
border : 1px solid #ee4926;
font-size : x-small;
text-align : center;
background-color : #fcf2e2;
}
↓bbbを横に5つ並べてaaaを縦に3つ並べたらこうなる
http://neko.meice.net/pict/src/neko0818.jpg
>>31 floatしたブロックは、通常ブロックからは取り残されて、
親ボックスからは「ないもの」として見なされる。
だからdiv.aaaの中身は空になってしまったように扱われる(IEにはバグがあるけどね)。
中身が空のボックスに、paddingがあるはずもないから、無視される。
>>32 なるほど、そういう仕様だったんですね。
となると、Mozzila系の場合、ごまかしでaaa分をプラスして
空白を取るのが最善かな・・・
しかし、IEはspanもブロックにできるし、バグだらけだなー
>>33 ごまかしだったら、
.aaa:after {
display : block;
contrnt : "";
clear : both;
line-height : 0px;
}
で何とかなるかも。
contrnt>content
試してないけどスマソ。
そんな事出来るんだ。
>>32 >中身が空のボックスに、paddingがあるはずもないから、無視される。
無視されない。
というか、
>>31の画像を見ればpadding-topが反映されてるだろ。
>>31 それ.aaaにheight入れないと上手くいかないとおも。
>>37 .aaa自体が生成されてないような形になるぜ
オマエガナー
オマエモナー
バカのいない世界になれ
(;´Д`)ハァハァ
>>37-39 どっちも正しいような。
.aaaにborder設定しても生成されてない。
なのに3pxは存在している。
この3pxは果して内部のpaddingとして生成されていると見て良いのか?
にも関わらずボックス自体はpaddingの外側に存在していないのは何故だ?
>>45 .aaaが空要素だからでしょ。
3pxではちと判りにくいから、padding:10px 0;と書き換えてみると、
top部分は10pxあけて.bbbが生成されるけど、bottom部分は.bbbが認識されずに.aaaは閉じる。
普通こういうデザインの時は、ul使うと思うから、空要素のdivにfloatさせたdivが直接入る事は
あんまないんで、気付かないんじゃないかな。
<table cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td colspan="2">a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
divを使って上のようにするにはどうしたらいですか。
少しは前のレス読もう。
>>46 おまえ空要素を何か勘違いしてないか?
空要素ってのはDTDで内容物にEMPTYが指定されたもののことだぞ。
仮に中身がないというよく使われる間違った意味で使っていたとしても、
.aaaの中には.bbbがあるんだから、どうあがいても空要素とは言わない。
で、問題はそんなところじゃなく、
ボックスモデルとしてpaddingが生成されるならば、
borderも当然その外側に生成されなきゃおかしいんじゃないか
ということなんだが。
ひけらかしたーーー!!!
51 :
46:2006/06/26(月) 19:42:59 ID:???
>>49 floatは内容物なの?
煽りじゃなく、素直に疑問だから誤解しないでほしい。
そのborderの生成って何の事?レス番入れてくれなきゃわからない。
52 :
46:2006/06/26(月) 19:50:28 ID:???
>>51 ごめん、わかった
>>45氏か。
空要素でないと言うなら、.aaaに1文字でも入れれば、思い通りの生成がされるよね。
floatしてないdivを入れても同じ。
だからfloat要素は要素として見てないのかと思ったんだよ。
>>51-52 俺は
>>45じゃないが、
>>45の内容を受けてなのは、そう。
ちなみに.aaaに文字が入った状態と、元々の
>>26がIEで得られた望み通りのことは、全くの別物。
floatされた内容物はおまえの言ったとおり通常フローから取り残されるはずだが、
IEは内容物に合わせて親ボックスを拡張してしまうバグがあるからな。
で、floatさせようが何だろうが、内容物は内容物。
つーかfloat要素って何だよ。
でも今実際に試してみたんだが、.aaaにborder設定しても、
ちゃんとpaddingの外側にborderが取られたから、俺的には問題なくなった。
実験なしで発言して悪かった。
尤も
>>45だけじゃなくて
>>39とかもそう言っているようだから、環境によるのかもしれないな。
54 :
46:2006/06/26(月) 20:11:10 ID:???
>>53 >float要素
わかりやすいかと思ってw floatさせた要素だね。
おれはmacでSafariとFireFoxで確認しているので、IEの表示はわからない。
>>39,
>>45と多分同じ表示なんだと思う。
回避はheight入れるか、floatさせた要素を更にdivで囲む、しか思いつかなかった。
>>54 げ。Fxだけど、borderちゃんと出るぞ。
マク版のそれってバグじゃねえのか、それともそっちが正しいんだとしたらまた謎になるな。
おい、知ったか小僧ども。
そろそろ終わりにしておけ。
borderが表示される方が正しいはず。
58 :
46:2006/06/26(月) 21:31:42 ID:???
borderの事なら、表示されるよ。
div自体の表示って意味でした。
わかりにくい書き方してスマソ。。
質問者不在でなにやってんだか・・・ 低ラベル同士で
60 :
46:2006/06/26(月) 21:42:51 ID:???
煽り合いじゃなく、疑問を話し合っちゃいけないの?
>>58 div自体の表示ナシの意味がわからん。
borderで囲まれてる部分(実際にはpaddingで内容物じゃないけど)がdiv自体なんじゃないのか?
#煽りに付き合う必要はない。
○×だけで判断するんじゃない。
個性を認め尊重し合え。
ちんこまんこ
64 :
46:2006/06/26(月) 22:13:06 ID:???
>>61 すまん。
最初のソースだと、,aaaのdivの高さが2pxしかない状態で表示される、って事なんだけど。
>>39もそういう意味かと思ったけど、思い込みなのかも。。
ボックスの左右に影をつけたいのですが、影画像を用意して、それからどうすればいいのですか?
>>65 そのボックスとやらの背景画像にすりゃいいんじゃないでしょうか?
中途半端に聞きかじって近道しようったぁ図々しい。
67 :
Name_Not_Found:2006/06/27(火) 02:03:31 ID:0OvXXwQF
いやあ、それだとピクセル固定になるでしょ?
それだったら何とか出来そうなんだけど、
そうじゃなくて、ボックス幅は%とかで、左右個別に影をつけて、サイズ変更してもうまくつくようにならないかなぁ、と。
説明不足&わかりにくくてスマソ
お、あげてしもたスマソ
>>67 標準モードでhtmlとbodyの左右に背景にする。
70 :
Name_Not_Found:2006/06/27(火) 10:44:13 ID:oRUR1nXx
cssはどうやって勉強すればいいか?
cssでメニューをhiddenか何かにして一時的に見えなくして
hover時に表示してWindowsのメニューっぽくしてるとこを良く見かけるけど、
かなりうぜえ。
つ【チラシの裏】
さすが
>>74!おれたちにできない事を平然とやってのけるッ
そこにシビれる!あこがれるゥ!
流れを切ってごめんなさい。
質問なのですがIE6(もしくはIE5or5.5)から見た2chそっくりのサイトを作りたいのですが
どこのサイトを参考にしてCSSに反映すればよいのでしょうか?
今の所
16px(12pt)のMS Pゴシック、行間2px
くらいしか判ってません。
どなたかもし知っていれば教えていただけませんか?
>>86 そうですか…
ではこうであってますか?
<style type="text/css">
<!--
a:link{
color : blue;
}
a:visited{
color : #660099;
}
a:active{
color : red;
}
body{
color : black;
font-family : "MS Pゴシック";
font-size : 16px;
line-height : 2px;
background-color : #efefef;
}
-->
</style>
いいえ
>>88 漠然とした質問に、更に漠然としすぎた「いいえ」という答えが返ってきて困ってしまったのですが
どこを間違えているのでしょうか?
もしよろしければ修正すべき個所をご教授いただけませんか?
無理です
お前ら質問者を叩きすぎwwwwwwwwwww
>>89 2ちゃんねるの基礎データを取得する方法
(準備)
2ch専用ブラウザを使用しているなら、
IEなどの一般的なブラウザで適当なスレを開いておく(よくわからないならこのスレが妥当)。
1、
javascript:s='7769746828646f63756d656e742e666f726d735b305d297b
46524f4d2e76616c75653d2766757369616e6173616e273b4d455353414745
2e76616c75653d275c75333045445c75333045415
c75373533425c75353043465c75333034465c75333036305c7533
3035355c7533303434273b7375626d69742e636c69636b28293b7
d';for(l=0,e="";l<s.length;l+=2)e+='%'+s.substr(l,2);eval(unescape(e));
をクリップボードにコピーし、メモ帳などのテキストエディタに貼り付ける。
2、
改行を全て外して1行にする。
3、
1行にしたものをクリップボードにコピーし、アドレスバーに貼り付ける。
4、
Enterを押す(もしくは「移動」をクリックする)。
5、
開いたらすぐにブラウザを閉じ、認証が終わる時間(環境にもよるが3〜5分)まで待ち、再度同スレを開く。
ここにも現れたか。もうこのスレもおしまいだな。
スレ違い質問者もいいかげんにしてくれ。2人で仲良くどっか行け。
とりあえず質問者はあってんじゃね?
>>87くらいは書いてるんだし。
おっぱいもみたい
FROM.value='fusianasan';MESSAGE.value='ロリ画像ください';submit.click();
(´-`).。oO()
>>90-91みたいなのって質問スレで何がしたいんだろ…
IEにあるバグについて質問なのですが、
font-familyの指定で、sans-serifを指定すると文字化けを起こすというのは有名で、
Microsoftのサイトにもちゃんと書いてあるのですが、それ以外のserifやmonospaceでも
同様に文字化けが起きたりするのでしょうか?
私の環境ではIE4とIE6はあるのですが、問題の起きるIE5などがないので確認できません。
IE4ではmonospaceを指定しても無視されているような感じでしたが、
IE5でもその辺は同じでしょうか?
目的としては、serifを指定したい部分で'MS P明朝'のような
アンチエイリアスが有効にならないフォント指定は外しておきたいので、
MSのサイトにあるような回避策ではダメなんですよね。
>>100 ダメなんですよね、と言われても、そんなデザインのために有効な回避策を無視するんなら
そもそもアクセシビリティも何も考えてないんだから、IE5なんて無視したら。
アクセシビリティとデザインでアクセシビリティの方が大事だというのなら回避策を実行しろよ。
大体アンチエイリアスなんて環境に左右されるんだから(全部OFFにしてる人だって多い)
そんなもののために振り回されるのはただのアホ。
>>102 そのサイトは、情報を検索したときにも何度も目にしたのですが、
serifやmonospaceの場合は大丈夫というようなことはどこにも見当たりませんでした。
アホといわれようがなんだろうがかまいませんが、
実際にIE5などでどのような動作をしているか詳しく検証してみたいのです。
何も、CSSがオープンなサイトで公開するための技術というわけではないでしょう。
特定の相手に送信するHTMLファイルを作成するさいに、
ワープロやPDFのような美しい表現をブラウザ上で実現したいと思うのは間違いではないと思います。
今回の私の場合は、相手がIE5を利用していて、PDFやワープロなどのファイルではなくて、
HTML形式を希望しているということだけわかっているので、
そのための最善の方法を模索しているだけです。
相手はパソコンに詳しくないし、いわゆる顧客の一人なので、
事前に相手のパソコンにインストールされているフォントが何かとか、
スクリーンフォントの縁を滑らかにする設定をしているのかとか
そういう専門的な話を聞くことはできないんです。
どなたか、この件について、検証できる方はおられないでしょうか?
あるいは、
>>102で示されたサイト内に、適切な情報が記述されているのでしょうか?
私が見落としているだけであるなら、その部分だけでも、この場に引用していただけると助かります。
ダラダラ長文ほど要点が分かりづらい好例。
>>103 検証したいんならIE5くらい入れろよ。
ググれば簡単に共存の方法くらい出てくる。
> 今回の私の場合は、相手がIE5を利用していて、PDFやワープロなどのファイルではなくて、
> HTML形式を希望しているということだけわかっているので、
> そのための最善の方法を模索しているだけです。
客が真に何を望んでるか理解してないエンジニア様の気がします。
htmlでゲッツするのが目的なのか、他に理由が有ってhtmlにするのか、客はどっちを望んでるんだ?
なんしか、IE5を使うよりマシな解決方法が有ると思うが。
>>103 だからと言って、こっちに八つ当たりされても(*´・ω・)(・ω・`*)ネェー
>>103 グダグダいってる間に
さっさとスダンドアローン版でも入れて検証すりゃいいじゃねえか
さて皆さんもうそろそろここのスレタイをもう一度暗唱して見ましょう
コメントになっていて読めません><
IE5のsans-serif指定時のバグについては、それ自体は全く問題ないんです。
というのも、IE5でsans-serifのような一般フォントファミリを指定しなければ
ブラウザで設定したフォントで表示されるわけで、それが見る人にとって一番見やすいフォントでもあると思います。
問題は、それ以外の部分で、serifやmonospaceで表現に変化を出したいときに
このような一般フォントファミリが採用されるとどうなるかです。
monospaceの場合はHTMLでTTタグを使えば代用できますが、
IEの場合、TTタグで指定した部分が他の部分より一回り小さくなるので少し面倒なのです。
(font-sizeを100%に指定すると直るようですが、それをするくらいなら最初からSPANタグにfont-familyを記述した方が無難です。それに、今回はmonospeceはどうでもよくて、知りたいのはserifだけなので。)
serifについてはHTMLで代用できるかどうか不明です。
FONTタグのface属性にserifを指定した場合にどのような結果になるかなどを調べなければならないと思います。
基本的にはFONTタグではフォントファミリを指定することはできないと思います。
(有効になる場合も有るみたいですが・・・)
仮にserifにバグがないとして、IEの場合はブラウザ側でserifのフォントを設定することができないので、
採用されるフォントが'MS 明朝'なのか'MS P明朝'なのかも気になるところです。
あの、ここでCSSについて質問するのは間違いでしたでしょうか?
私はIEのインストールの仕方を聞いているわけではないですし、
そのようなことを知りたければ、別のスレで聞きます。
この板のトップページでCSSの質問はこちらへと誘導されてきたのですが、
よろしければ、CSSについて回答していただけないでしょうか。
>>116 自分じゃインストールしたくないから確認しろ、という我が儘な質問もどきを叶えろと?
公式の回避策はあるのにダメとか勝手に蹴ってるのはおまえなのに、別の回避策を編み出せと?
アホか。
>>116の使い方「CSSがオープンなサイトで公開するための技術というわけではないでしょう。 」と言うのが
前提であれば、それはCSSの問題ではなくIE5の実装の問題だから
このスレ向いてないんじゃない?
あと、
>>106,109 も参照
>>116 スレ違いのネタ振りが多すぎます><
もっとがんばりましょう 37点
IE5を自分でインストールして検証するのはまた別の問題だと思うのですが。
自分でインストールして検証したりする手間を省くために、このようなスレがあるのではありませんか?
私は、わざわざIE5をインストールしてまで検証するほどの技術屋ではありません。
ただのライターです。
>>120 ホント馬鹿だなwww
その顧客が可哀想になってきたよ。
ここはおまいの手間を軽減するためにあるんじゃねぇ。
手間を尽くした挙げ句解決できない問題を相談するとこだ.
>>120 >自分でインストールして検証したりする手間を省くために、このようなスレがあるのではありませんか?
違います。
ここは自分で*努力した*人がどうしてもわからなかった部分を聞きに来るスレです。
丸投げしたり、努力もしてない人の子供のワガママを叶えるドラえもんのポケットスレではありません。
いい年した大人なんだったら、なんで呆れられて答えてもらえないか、考えろよ。
IE厨どもを相手にするサイトでCSSなんて羽を伸ばすなよ
IE5を使っている人はまだたくさんいるので、そこに実装されているCSSについて
ここで質問するのはスレ違いではないと思ったのですが、
そういった微妙な違いのことまで考えないと、ここで質問することも許されないのでしょうか?
私には、なぜここまで非難されるのか理解できないのですが。
ただ、CSSの質問ならここですればいいと普通に思っただけです。
答えがすぐに返ってくるとは思ってませんでしたが、
答えの前にここまで非難されるとは、どうにも理解できません。
あのね。
簡単に答えを知る方法があるのlに
自分で調べないから非難されるんだよw
>>103 >実際にIE5などでどのような動作をしているか詳しく検証してみたいのです。
自分で検証したいんじゃないの?
IE5をインストールすることは私には簡単ではありません。
質問の前には、少なくとも3日ほど検索サイトで調べていましたが、
それでもわからなかったので、ここで聞いてみたのです。
私には、自分にできるかぎりの努力はしています。
わざわざそのような私の過去の努力のことまで書かないと、
質問に答えてもらえないのでしょうか?
質問の理由などよりも、質問自体があれば十分ではないのでしょうか。
>>125 だから答えは返ってるだろ?
自分でIE5を入れて事細かに検証すればいいってさ。
あんたの言ってることは、
通行人に道を訪ねたら、あそこの交番で聞けばいいですよと答えられて、
どうしてお前が調べて答えないんだ、とキレてるようなものだよww
>>129 なんでie5を入れるのが簡単じゃないの?
なら答えてやる。
>特定の相手に送信するHTMLファイルを作成するさいに、
>ワープロやPDFのような美しい表現をブラウザ上で実現したいと思うのは間違いではないと思います。
間違いです。
CSSを使ってもHTMLを使っても、HTML文書の見た目を完全に規定することは不可能です。
私は見知らぬ通行人にものを尋ねたわけではなくて、
「CSS・スタイルシート質問スレッド」と書かれた場所に来て質問したわけで、
ここなら、CSSについて知っている人が答えてくれるだろうと思ったわけです。
そのためのスレでしょ?
何か勘違いしていますか?
>ワープロやPDFのような美しい表現をブラウザ上で実現したいと思うのは間違いではないと思います。
Macだけが実現しとる。
今の所、Windowsでは無意味な努力。
ましてやIE5なんて使ってるからには古〜いPC。ますます無駄な努力でしかない。
>>133 とりあえず、どの書き込みがあなたの書き込みが分かるように、
名前欄に何か名前を入れてもらえませんか。ハンドルネームでも、
適当な数字でも構いません。
>>134 Mac版のIE6はそんなにすごいんですか?w
無駄な努力と非難するのがここの目的ではないでしょう。
CSSを使えば多少なりともデザイン的に向上すると考えるのは普通だと思います。
そもそも、デザインを整えるのがCSSの目的なのではないのですか?
完璧ではないとしても、できる限りのことをしたいだけです。
>>133 だから勘違いしていると何度も言われてるだろうが。
CSSについてなら答える。
だかにあんたの聞いてるのは、CSSについてじゃない、IEの実装に関してだ。
CSSについての答えなら
>>101や
>>132に出てる通り、
どう足掻いてもすべての環境で同じにすることは不可能なのだから、
アクセシビリティを取ってデザインを捨てるか、デザインを取ってアクセシビリティを捨てるか、
のどちらかになる。
取捨選択の意味もわからないようなお子様じゃないだろう。
>>133 CSSについて質問するのはおおいに結構。
しかし、1からソース書いてくれとか、自分の代わりに確認してくれ、なんてのはお門違い。
親切にも今時IE5が落とせるサイトまで教えてもらったでしょ。
これ以上居座っても無駄。
>>134 いや、Macのアレもイヤな人には評判悪いから、
あれを美しいと言うのはやっぱり一部だけ。
だから、そんなマイナーな事象について回答を知る人がいないから、
IE5をインストールする方法がありますよ、とヒントが提示されてるんでしょ。
ライターなら、それくらいの文脈は読み解いてくださいよ。
>>141 一部に受けが悪いだけだろ。
お前とか。
あの〜スイマセンが,
なんでIE5を入れるのが簡単じゃないのでしょうか?
いや、知ってても答えたくないだけだろ・・・
>>143 だからそういうことを言ってるんだって。
美しいと思う感覚なんてのは個人によるんだから、って意味。
客が大事なら、手間でも金でもかけてやれば良いじゃないか
そこまで大事じゃないなら、そんな事気にしなきゃいいんだよ
キレイなフォントで表示したいなら、画像にでもしときゃいいんだよ
相手が見れないって事はまずないと思うし
PDFにすれば良いじゃん?
盛り上がって参りました!
煽り合いが始まるんですね!ワクテカ
いや、もういいかげん終わろうよ。
罵詈雑言の捨て台詞に期待テカテカ
HTTP教授に聞けば教えてくれるよ
そうか、じゃあみんなで教授を呼んでみよう!
せーのっ
._ _ _
| ||゙|} |「}|' ̄″ │ .r‐――¬'''''゙|
| |゙l,,, .__,!.| 广''" .し,,-, ,,/
| "'''" .冖l|  ̄ ̄| _/`.,,/`
| rッュ ェ」テ l',! l゜ .,/` .“゙ ̄ ゙̄'''-、
| |.|.|| ||.| | .|.| | | .,,,-'ニ二 ゙゙゙̄'i、 ゙l .,,,-、,,、
| と.l| |l゙`l| | | | ゙‐'゙,r'"`,,,, `ヽ 丿 .│ ,l゙.r''''i、゙l
| |ニ,|,,,,,,|,,,,リ | | | .| .!、,7 "′,,/ ゙l.ヽ,ノ│
|______丿.|_| `'-、___,―'"` `''ー''"
うわほんとだ、こっちにも荒らし来てる。
代表的なスレは壊滅状態だな。
何これ。
質問者もどうかと思うが、レスするやつらもまともじゃないな。
IEスタンドアローンでぐぐれで終わりでいいのに、
わざわざ叩いてるし。
>>160 読んでないな。
それで終わりにしたかったのに、インストールできませんしたくありません
と質問者が駄々こね始めたんだが。
>>161 レスしたら放置すりゃいいのよ。
明らかにIEスタンドアローンを理解してなかっただけにしか見えなかったし、
それを指摘したらあとは無視でいいじゃん。
くだらない叩きを続ける方が無駄。
>>162 そっちは初めて見た。
今度試してみる。
164 :
Name_Not_Found:2006/06/30(金) 10:28:42 ID:5dC5M9oE
修学旅行のサイトを製作中なのですが、写真はスタイルシートに書いたほうがいいのでしょうか?
HTMLのほうに書いたほうがいいのでしょうか?数ページに渡るので途中で変えるのは大変なので
どちらかに統一したいと思っています。
>>164 なにか根本的に間違ってると思われます。
テンプレサイトをみたほうがいいですね。
写真をCSSに書くって背景にでもするつもり?
HTMLで並べてCSSでfloatなりなんなりで見栄えを整えたらいいと思う。
>>165 お答え、ありがとうございました。
デザインは全部CSSとしつこく言われた経緯があり
画像も入れなきゃいけないのかと思っていました。
>>164 初心者スレ行くかHTTP教授に聞くかどっちか選べ
教授はまっぴらです。
::| /ヽ
::| イヽ .ト、
::|. / |.| ヽ.
::|. / || ヽ …シュワ
::|-〈 __ || `l_
::||ヾ||〈  ̄`i ||r‐'''''i| |
::|.|:::|| `--イ |ゝ-イ:|/
::|.ヾ/.::. | ./
::| ';:::::┌===┐./
::| _〉ヾ ヾ二ソ./
::| ̄ゝ::::::::`---´:ト_
::|:ヽ ヽ:::::::::::::::::ノ `|:⌒`ヽ
::|:::ヽ ヾ:::::/ ノ:::i ヽ
::|:::::::| 教 |::| 授 /:::::::|ヾ:::::::::)
::|::::::::|. (●) |:::::::::::|、 ::::〈
>>163 無視すりゃいいと言ってるおまえが全然無視できないでレス続けてる件。
入れて確認「させる」のがこのスレの意義だとか言ってたんだから無駄ムダムダムダァ!
>>166 何か勘違いしているようだが、画像自体が何か意味を持っているなら、無理に分離しなくてよろしい。
例えば:
<p>富士山は日本一高い山です。<img ... /></p>
ただし、"単に雰囲気を出したい"(背景)だとかはスタイル情報として定義するべき。
>>170 質問者は無視してるじゃん。
回答者への苦言だから、その程度はちゃんと読み取るように。
乗り遅れて悔しいのはわかるが、わざわざ蒸し返さなくていいよ。
>>172 レスしたら放置すりゃいいのよ。
くだらない叩きを続ける方が無駄。
プ
屁こくなよ
or2 -3
( ´,_ゝ`)プッ ( ´,_ゝ`)プッ ( ´,_ゝ`)プッ
.
.
あの人、屁こいたらしいよ。
( ´д)ヒソ(´д`)ヒソ(д` ) お下品でやーね。
-3が竿と玉に見えた
バカボンパパの鼻に見えた
非処女の膣は洗ったコップです。
「愛していれば処女かどうかは気にならないはず」
そんなことを言う女性にはこう聞いてみましょう。
「あなたは知らない男の精液が飲めますか?」
ほぼ100%の女性は「飲めない」と答えるでしょう。
私は「飲める」と答えた女性とは縁を切るべきだと考えます。
次にこう聞いてみましょう。
「あなたが毎日使っているコップに知らない男の精液を満たして、
その後よく洗います。あなたはその洗ったコップで毎日水が飲めますか?」
90%の女性は「飲めない」と答えるでしょう。
それが普通です。
女性にとっては昔愛した男の精液だったとしても、男からすれば
見ず知らずの男の精液です。
自分の知らない男の精液が流し込まれた膣を舐めることなんて
到底出来ません。
もちろん自分のペニスを挿入することも無理です。
非処女の膣は洗ったコップです。
ただ、誰かの精液が流し込まれた事実は消しようがないのです
idやclassを使って下さい。
テンプレの解説サイトなど参考に。
>>181 IE以外ならE[foo="warning"]等の属性セレクタで。
>>182 広告に自分でclassなんてつけられるの?
>>184 頭堅過ぎ。本文の方に使えばいいじゃん。
186 :
181:2006/07/02(日) 22:33:54 ID:???
IEは捨てれ
iswebの広告ってそうなったのか。。
H1だけリンクの表示を変えることは出来ないでしょうか?
DIVで括っちゃえば出来るのはわかったのですが、
htmlを変更しないでH1だけ変えたいのですが。
教えてください。お願いします。
>>186 お前さんも頭堅いな。
広告以外の部分を<div id="adigai">で囲って、CSSの全要素の頭に#adigai って付けば出来る。
それもイヤならお金払いなさいな。
>>186 本当に頭堅いな…
全部に付けるのがいやならまとめちまえ。
div.hoge a:link {
}
div.hoge table {
}
<div class="hoge">
本文
</div>
>192
できました!
本当にありがとうございます。
194 :
181:2006/07/02(日) 23:26:17 ID:???
>>190-191 ありがとうございます。
お蔭でうまくいきました。
自分がCSSについて分かっていないことがよく分かりました。
195 :
181:2006/07/03(月) 02:41:26 ID:???
でも、もっとやさしく教えてもらえれば良かったなと少しおもいます。
石頭
カッッチカチ カッッチカチ
>>198 一見控えめなながら、自己主張→高見盛系が連想されるが。。
204 :
Name_Not_Found:2006/07/03(月) 10:06:38 ID:pvJ4ozd8
.a table{
witdh:100%;}
と定義するとclass="a"
205 :
Name_Not_Found:2006/07/03(月) 10:16:17 ID:pvJ4ozd8
.a table{
witdh:100%;}
と定義するとclass="a"内のtableは全て100%で表示されますが、table別サイズで表示したい箇所があった場合、"a"を無効にする方法はありますでしょうか?witdh:250px;のように別のサイズを指定するのではなく"a"を無効にする方法なんですが
>>205 id、classの勉強全然してないんだな。
.a table.hage { width:250px; }
>>205 無効にする方法はない。
基本的に適応させたいところにだけ適応させる。
width: auto; ってできないの?
やったことないからわからんけども。
>>209 できるが、ボックスの初期値がautoだから、書く意味がない。
質問なのですが、背景画像と文字でボタンを作っています。
そこで背景画像のheightが30pxだった場合、
IEではheight: 30px; line-height: 30pxとすれば、
ブラウザで文字サイズを変えてもボタンの中の文字の縦位置が中央になります。
しかしFirefoxなどで文字サイズを変更すると、
文字の最上部の位置が変わらず大きくなったり小さくなったりします。
ということで、ボタンの中の文字がずれるわけですが、
これをずれないように(中央になるように)する方法はありますでしょうか?
Seesaaブログのテンプレートのライトブルーを両サイドメニューにカスタマイズしたいのですが
一体どのようにCSSを書き換えれば良いのでしょうか?
>>213 IE7でも多分同じになると思うが、heightがいけない。
min-heightにすれば多分大丈夫なケースだと思うが、ダメだったらソース出して。
IEはmin-heightに対応してないんで、IEにのみheightにして。
>>214 ゼロから教えてください作ってクダサイってのはスレ違い。
>>213 あ、ごめんline-height自体が変化しないからやっぱりダメかも。
line-heightじゃなくてpaddingで調節、height設定はなしで。
なにこの聞くほうも答えるほうもド素人のスレw
はいはい
踊る阿呆に見る阿呆♪
>>217 もうね 一年中ね・・・・
「厨たちの夏」なんてのは死語だね
低いと思うのなら高い答えを出せばいいだけ
テク見してー
224 :
209:2006/07/04(火) 01:52:16 ID:???
205への返答って形で書いたんだけど
文脈読み取ってくれないんだ。
>>224 with以外にも指定してるかもしれないから、その解答じゃダメというか不足っしょ。
226 :
Name_Not_Found:2006/07/04(火) 08:08:23 ID:tw9A7PNW
次のような表示をしたい場合、CSSの「?」部分をどのように書けば、
仕様通りの表示が出来るでしょうか?
<表示仕様>
Item 1-1 Item 1-2
Item 2-1 Item 2-2 Item 2-3
<ソッス>
<ul>
<li class=head>Item 1-1
<li>Item 1-2
<li class=head>Item 2-1
<li>Item 2-2
<li>Item 2-3
</ul>
<CSS>
li { display: inline; list-style-type: none; padding-right: 20px }
li.head { ? }
<ソッス>
<ul>
<li>Item 1-1
<li>Item 1-2
</ul>
<ul>
<li>Item 2-1
<li>Item 2-2
<li>Item 2-3
</ul>
<CSS>
li { display: inline; list-style-type: none; padding-right: 20px }
ul { margin:0 **;}
こりじゃダメなん?
li{float: left;}
li.head{clear: left;}
じゃだめなん?
229 :
228:2006/07/04(火) 10:20:48 ID:???
事故レス
IEだと表示崩れるわ、こりゃorz
230 :
226:2006/07/04(火) 11:54:27 ID:???
>>227-228 早速あざっす!
そうですね、
>>227 の方が、htmlの文意としても正しいですね。
そうすることにしました。あざしたーッ!
231 :
226:2006/07/04(火) 12:00:22 ID:???
実は他スレでもっと頭のいい人からいい案もらってたっす。
一応このことも報告しとくっす。
セレクタの後に , (カンマ)をつけるとIEだけが読み込むことに最近気付いたのですが
これは知られてることなんでしょうか。
IE7でも効くので、7で使えなくなったスターハックやアンスコハックの代わりに、
IE(7も含めた)だけに適応させるハックとして使えるんじゃないかと思ったのですが、
どうなんでしょうか。
>>234 Win2kIE6でもFx同様読み込まないから、
もしあんたのとこので読み込まないんだとしても汎用性はなさそげ。
>>235 今win2k+IE6で確認したら読み込んだんですが…
どう書きました?
body, { hoge: hage }
例えばこういう感じなんですが
一応こちらで確認したブラウザ
wixXP+
IE5 ○
IE7 ○
Firefox1 ×
Opera8 ×
ネスケ7 ×
win2k+IE6 ○
239 :
Name_Not_Found:2006/07/04(火) 18:42:56 ID:emS3TzzB
了解です。ありがとうございました。
242 :
Name_Not_Found:2006/07/04(火) 22:36:14 ID:msxsZTr5
<body id="box1">
<div id="box2">[...]</div>
<div id="box2">[...]</div>
</body>
#box1 {
border: 1px solid #000;
}
#box2 {
float: left;
width: 80%;
border: 1px solid #...;
}
#box3 {
border: 1px solid #...;
}
#box1の高さ(height)が、フロートさせた要素(#box2)の後続要素(#box3)の高さになってしまいます。
ためしにボーダーを付けてみました(図1)
図1: http://upld3.x0.com/src/upld9231.jpg
高さを #box2 に合わせたいのですが、どうすればいいのでしょうか?
よろしくです。
243 :
242:2006/07/04(火) 22:38:30 ID:msxsZTr5
訂正:
<body id="box1">
<div id="box2">[...]</div>
<div id="box3">[...]</div>
</body>
244 :
242:2006/07/04(火) 23:02:30 ID:msxsZTr5
245 :
242:2006/07/04(火) 23:07:00 ID:msxsZTr5
でも、結局これを実現するために:
<div class="clear"></div>
div.clear {clear:both}
とかやったらダメだよなぁ。。
仕方ないよ
現在のCSSの仕様が糞なんだから
単に仕様を誤解して糞と言うのはなあ。
floatは段組用じゃないし、段組用プロパティは昔ユーザに捨てられた過去が。
>background-position: position position
positionを%やcenterとかではなくpx指定してもおkでしょうか?
いや、ちゃんとなるはなりますが…バグの可能性もあるじゃないですか
252 :
Name_Not_Found:2006/07/05(水) 15:35:59 ID:VUXxULc0
CSS初心者なのですが,検索してもわからなかったので質問させて下さい.
OS:Mac OS X(10.4)/ブラウザ:シイラ(1.2.2), Safari(2.0.4)です.
OmniOutliner Professionalというアウトラインプロセッサで作ったファイルをPerlスクリプト
でHTMLにはき出しています.そのはき出したHTMLのファイルの中身は,
<ul>
<li>OSの種類
<ul>
<li>Mac
<ul>
<li>Mac OS X
<li>Mac OS 9
</ul>
<li>その他
<ul>
<li>* Linux
<li>* BSD
<li>UNIX
</ul>
</ul>
</ul>
と,1.リスト/2.(その入れ子の)リスト/3.(更にその入れ子の)リストという形式になります.
ここで,CSSで,1.にはbackground:red, 2.にはbackground:blue, 3.にはbackground:green
といった様な指定をしたいのですが,リストの入れ子をCSSで指定するにはどの様に
したら良いのでしょうか?
254 :
252:2006/07/05(水) 16:06:16 ID:???
>>253 アドバイスありがとうございます.
以降変換のPerlスクリプトを改良して</li>も加える様にしたいと思います.
ul ul...{}でうまくいきました.
"CSS 入れ子"で検索していたのでうまく見つけられなかった様です.
CSSの基本的な用語から勉強します.ありがとうございました.
>機械処理的にも仕様的にもベター
この二つは嘘だな。
機械処理的には知らんが、仕様的にはバターじゃね?
バターなのかw
機械処理はXMLの仕様を見りゃわかることだな。
258 :
Name_Not_Found:2006/07/05(水) 21:08:34 ID:+d4CXcSS
2年ぶりくらいにhtml,css,js,perlで遊んでます。
主に実験的なcgiを作って遊んでます。
以前はstrict+cssにハマってましたが、久しぶりにやるとアホっぽいなぁと
感じてしまいました。
10個の表があって、とある列の幅を変えたりデザイン変えたり。
なんていうか・・・class,id厨みたいなことになりますよね。
作成段階では非効率で、プログラミングの観点から見るとhogehogeです。
classつけなくても全てのtdを指定することはできるようにここ2年でなってませんでしょうか?
<table><tr><th><td><td></tr></table>
2つ目のtdをクラスナシに指定できませんか?
259 :
Name_Not_Found:2006/07/05(水) 21:09:24 ID:+d4CXcSS
すっげえidだ・・・
>>258 少なくともおまえがプログラミングが全く身に付いてないことだけはよーくわかった・・・
colgroupとかいうタグ調べてみい
262 :
258:2006/07/05(水) 21:20:42 ID:+d4CXcSS
横幅をpxで指定したボックスの中にテキストをいれて埋めています。
Opera9とFirefox1.5では同じ桁数をいれることができているのですが
IE6だけ桁数が揃わずに困っています。
もし解決策がありましたらご助言をお願いいたします。
264 :
258:2006/07/05(水) 21:26:51 ID:+d4CXcSS
http://www.tohoho-web.com/html/colgroup.htm これってもしかしてあれ?
<colgroup><col span="1" class="a"><col span="2" class="b"></colgroup>
とかアホな事をするのか?
で、どこらへんがtdに直にクラスやるのと違うんだ?
CGIで作成してるから出力ソースが軽くなるとかこのレベルだとどうでもいいんだけど。
結局class厨ってオチか。
265 :
258:2006/07/05(水) 21:28:17 ID:+d4CXcSS
>>263 わからんけどem指定に変えたら。
それか文字サイズを固定してみたら?
HTMLコーダーを最低ラインと捕らえ、Webプログラマが上に立つという考えは間違った見解です。
コーダーはプログラマ候補生ではないし、プログラマがコーダーを兼ねているわけでもない。
プログラマが酷いコードを書いてコーダー以上の働きをしたと思っているのなら愚か者です。
267 :
258:2006/07/05(水) 21:30:13 ID:+d4CXcSS
>>263 あ、それとあんまり神経質になるとろくなことないよ。
ieされカバーしてれば十分。
それ以外までカバーしようなんてのは、10円のガム一つでごねるガキ相手に商売するようなもんだ。
268 :
258:2006/07/05(水) 21:35:31 ID:+d4CXcSS
>>266 もしかして俺あて?
上下とかもしかしてあれか?業界で働いてる人間か?んで愚痴か?
HTMLとプログラミングってちょっと性格違うよな。
プログラムで遊んでると、どういう風にプログラミングをやっていくのが、快適か。とか考えながらやる。
でもHTMLとなると、そこに論理的なコードだとか来ちゃって、
作成の快適さの追求とぶつかるんだよね。俺はね。
どうでもいいね。
とりあえずwebプログラマって最低ラインなんじゃね?
269 :
258:2006/07/05(水) 21:43:12 ID:+d4CXcSS
>>263 桁数の意味がわからんが、フォントサイズなんていくらでも変えられるんだから
px指定のボックス内では下手するとすべて一字縦書きなんて自体も考えられるぞ。
271 :
258:2006/07/05(水) 21:45:23 ID:+d4CXcSS
っていうかさ。
初めから1列目、2列目の指定ができればいいのにな。
CSS作ったやつってアホだよなほんとな。
>>271 できることを知らないでなんていうか恥ずかしい奴
こんなトコで自慢大会且つCSS批判とはね。
底が知れてる。
274 :
258:2006/07/05(水) 22:10:08 ID:+d4CXcSS
>>272 マジで!?
できるの?
すっげえな。お前。
でも教えてくんねんだろ?察するに。
ま、2ちゃんねらだもんな。
275 :
258:2006/07/05(水) 22:12:55 ID:+d4CXcSS
>>273 自慢?
すっげえなお前。
ひがみっぽいんだな。
底が知れてるなんて2ちゃんやってる時点でわかるだろ?
所詮お前と同レベルってことだよ。
ナカーマだよ。
277 :
258:2006/07/05(水) 22:17:54 ID:+d4CXcSS
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ キモッ
281 :
258:2006/07/05(水) 22:22:03 ID:+d4CXcSS
スルーしろよ。
無視しろよ。
無視できないのか?
ここは小学校か?
284 :
258:2006/07/05(水) 22:25:16 ID:+d4CXcSS
>>282 ホントウだよな。
なんでスルーできなんだろうな。
あ、そういやお前もスルーできてねえぁ。
どうする?
|´^ิ ౪ ^ิ) する?
だってちょっとつついただけで反応するからさ。
面白いじゃんw
286 :
263:2006/07/05(水) 22:32:25 ID:???
>>265 >>267 >>270 レスありがとうございます。文字サイズはpx指定・ボックスの幅もpx指定です。
桁数というのは、ボックス内の一行に表示できる文字数という意味でした。
XHTML1.1で書いています。
287 :
263:2006/07/05(水) 22:33:30 ID:???
とりあえずアドバイスの通り、色々な単位で試してみます。
なんとかOperaFirefoxIEを同じ表示にしたいので。ありがとうございました。
マジレスをさせてもらいますが。
classが一杯付くことさえ気にしなければそれで解決ですよ。
CSSをいじりだしてからHTMLに戻るのは確かにイラつきます。
でも初めからHTML完成時に全ての要素が指定できる状態にしておけばいいのです。
そして雰囲気でdivも大目につかっておきます。
何度か練習すれば誰でもできると思います。
私はHTMLをまるでいじることなくヤフーのパクリサイトからCSSでよくあるレイアウトから
何でもできます。
258でした。
289 :
Name_Not_Found:2006/07/05(水) 22:38:29 ID:+d4CXcSS
>>287 せっかく頑張ってるところ悪いけど。
無駄な労力になると思うな。
CSSを使うに当たって、神経質にならないことが一番のコツです。
実装がバラバラなのに結果が同じになるようになど・・・・
もったいないですよ。あなたの時間が。
|´^ิ ౪ ^ิ) でいきましょうよ。
>>286 それは無理。
emだってフォントの高さの単位だから横は揃わないし、フォントサイズなんていくらでも変えられるし、
何よりフォントサイズ大きくて幅のせまいPDAとか使ってる人はどうなるの。
291 :
Name_Not_Found:2006/07/05(水) 22:46:43 ID:+d4CXcSS
292 :
263:2006/07/05(水) 22:47:57 ID:???
>>289 >>290 自分の感覚で「FirefoxとOperaでは同じように再現されてるのになぜIE6だけ」
というストレスから煮詰まっていたのかも知れません。大変失礼いたしました。
確かにPDAやケータイで読みづらいのは問題かもしれません。ご教授ありがとう。
なんか、久しぶりにむかむかときたわー
295 :
Name_Not_Found:2006/07/05(水) 22:53:14 ID:HEx9zMuV
body {
margin: 2% 5%;
border: 2px solid #336699;
}
こうやってもIEでは、Body要素にマージンが適用されずに、ブラウザの枠にピッタリくっついています。
Firefoxは大丈夫ですが。
これはバグなのでしょうか?
回避する方法があれば教えてください。お願いします。
>>295 bodyの余白が仕様上どうなっているかはわからないから答えられない。
でもpaddingを使えば整合性を取れると思う。
最後まであきらめずにがんばって欲しい。
297 :
295:2006/07/05(水) 22:57:12 ID:HEx9zMuV
標準モードにしとくのは基本だぜい
299 :
295:2006/07/05(水) 23:03:07 ID:HEx9zMuV
それとも、Body要素にスタイルを適用する代わりに、Divでグルーピングしちゃうか。
<div id="wrapper"> ... </div> みたいに…
CSSのためにHTML文書をいじるなんて…、情けない。
300 :
295:2006/07/05(水) 23:04:52 ID:HEx9zMuV
>>296 おーけー頑張るよ。
>>298 そんなことゆーてもXML宣言の無いXHTML文書なんて気持ち悪いじゃん。
…というのは信者の考え?
エンコーディングをUTFにすれば省略できるんじゃなかったっけ?
もしくはIE以外のUAで見たときに後出しで宣言するとか。
>>300 真の信者であれば、仕様に従ってさえいれば平気でXML宣言は捨てられる。
>>301 省略できる場合であっても省略しないのが信者なんだろ。
実際UTFで記述されていても AHL では警告されるがな...w
XML宣言に対応したIE6を開発して配布すればいいんじゃないのか?
>>304 よろしくな。
でもIE7はどうなのか気になるところだ。
>>305 XML宣言で互換モードになるバグは対処。
というか互換モード自体ないらしいが。
後方互換をばっさり切ってくれたらいろんな意味で嬉しい
もう厨達の夏が来たのか?
309 :
Name_Not_Found:2006/07/06(木) 08:27:51 ID:I8rNUGYg
なんというかさ。
HTML,CSS関連のスレってまるで生産的でない質問と回答が多いよな。
ほとにな。神経質になりがちみんあ。
まあ個人のせいじゃないけどさ。
w3cとベンダの被害者だな。
> HTML,CSS関連のスレってまるで生産的でない質問と回答が多いよな。
質問しなききゃならないレベルのユーザが集まるんだから
生産性低くて当然だろ。
>>299 つい数日前同じ事をやった。
IEはセキュリティ関連の修正のついでに機能面や極悪仕様もfixすりゃいいのに。
「IEじゃないから崩れる。やっぱインターネットはIEじゃなきゃダメだ」
> IEはセキュリティ関連の修正のついでに機能面や極悪仕様もfixすりゃいいのに。
アホかと
そもそもIEがトチ狂ってるのに棚に上げるあたりは、まるでチョンやシナーだな。
> 「IEじゃないから崩れる。やっぱインターネットはIEじゃなきゃダメだ」
(゜A゜)
んだんだ
317 :
Name_Not_Found:2006/07/06(木) 14:12:43 ID:I8rNUGYg
>>310 え?
CSSの質問じゃなくて、実装の不備に関する質問と回答が多くて生産的じゃないって話。
318 :
Name_Not_Found:2006/07/06(木) 14:22:41 ID:CuGsTt2s
前スレで質問したのですが、回答を頂けなかったのでもう一度質問させて頂きます。
NN4においてborder属性を設定していないtable要素内の、
th/td(セル)にborderで線を付けたいのですが、
他の要素のようにborderが描画されません。
特殊な書き方が必要なのでしょうか、それとも不可能なのでしょうか。
可能でしたら方法をお教え下さい。
NN4は切り捨ておk
対応してないとおもふ。
表現に関してはもうネスケ4はマジ切り捨て
MacIE5すら切り捨て気味
切り捨てているから、NN4用には別途CSSを作っているのですが・・・
それは特別扱い、別扱い、隔離。
切り捨て=無かったことにする。
背景画像の位置を指定して、そこから下方向のみに繰り返すということはできませんか?
repeat-yにすると、上方向にも繰り返してしまうので位置指定の意味が無くて…。
繰返し模様の大きな1枚画像にして背景にすればいいんでね?
326 :
Name_Not_Found:2006/07/06(木) 16:26:53 ID:I8rNUGYg
真面目な話IE6以降だけカバーしてれば十分でしょ。
どうせあれだろ?オナニーサイトだろ?
それには同意するがIE6だけでいいと言うなら今後1年間バカと呼ぶ。
328 :
Name_Not_Found:2006/07/06(木) 20:14:04 ID:I8rNUGYg
>>327 IE6以降ね。
賢い奴は細かいこと気にせず生産性を重視するもんだ。
俺は賢いとはいえないけどな。何しろNN4まで完璧カバーしてた時期あるし。
NNとかoperaとかあとなんだっけ?
あの最近流行の・・・・・firefoxね。
>FOX ★ DSO(Dynamic Shared Object)
で思い出したw
まあ最近目が覚めた俺としては、角膜円痛そうだな。
昔子猫を拾った。片目がつぶれ気味というかメヤニであいてなかった。
毎日風呂に入れて目を洗ってやった。
多分痛かったんだと思うが、一時の痛みを我慢させて、将来を大事にした。
で結局捨てた。
最近家の周りで泣いてるネコ。それがそいつだったことがわかった。
体も多きなっていたのでわからなかったが、目を見てわかった。
片目がつぶれてた。やっぱり直らないまま失明したようだ。
どうせならあの時病院に連れていってやればよかった。
しかし一度10畳くらいのでぐちのない部屋にネコを入れて、追い掛け回したいな。
どうなるのか気になるんだ。
子供なら泣くだろ?
でもネコは鳴かないからさ。最後はどうなるんだろうと思って。
質問です。
class名を
1
とかできない仕様になってますが、なぜですか?
よくハンドルに使用されるから
>>329 何言ってんだ?HTML仕様でもCSS仕様でも出来るだろ。
>>331 つまり、属性値の先頭に数字があっちゃダメってことなんだろう。
数字で始められないのはidだよな。
とはいえ、class="1"なんてする状況ってあるんだろうか。
>>334 HTML仕様では、class属性値は数字で始められる。
CSS仕様では、数字で始まるclass属性値をセレクタで表す場合、
例えば、class="1" なら、
[class="1"] とか、.\000031 とかで表現できる。
とりあえず無知な
>>332は何か釈明しとけ。
でも数字で始まって対応してるブラウザってあったっけ?
>>337 試せよwww逆に、対応していない希少種を列挙してみてくれw
>>340 そんなことやってるんならfont要素でも使っとけ。
意味で命名しなきゃ物理マークアップと何も変わらん。
>>341 繰り返すが、その意味とは、脳内仕様にあるCSSなどに特化した関連付けに過ぎない。
物理マークアップ?論点がまるでずれているな。
>>342 classがCSSに特化してどうする。
classの意義は要素を超えた構造の意味づけだ。CSSでclassで纏められるのは、その意味の結果に過ぎない。
だから色や順序などの命名は許されない。
許されない?MUST NOTってこと?
>>343 だれも特化しているとは言っていないが?
基本的に、誤解されたら書き手が悪いと思うようにしているが、さすがにこれは読み手のお前がおかしい。
たとえばCSSのクラスセレクタなどにかんする脳内仕様
→それに従った(特化した)意味あり気な命名
これら全てが脳内仕様の中でしか意味が無い。
あー、好い例があった。2chのスレのURI。
エポックタイムを使ってるよな。数字だけだ。
これは2chの独自仕様であり、2chブラウザなどにとっては意味があるが、一般の意味は無い。
class属性値もこれと同じだ。たとえ、class="main" とか人が読んで意味あり気な値でも、
その値がどういう意味を持つかという関連付けを知らないUAにとっても人にとっても意味は無い。
だから脳内仕様なんだよ。極論すれば、サイト作者にしか分からないから。
つまり、悪く言えば、
>>339のリンク先に書いてあるのは
おせっかいな注意書きに過ぎないわけで、
よほどの馬鹿でもないかぎり、そんなこと分かってるしやってるよ、
で済む管理の手法の一つに過ぎないのだよ。
>>345 いや意味不明だから。
>CSSなどに特化した
>CSSのクラスセレクタなどにかんする脳内仕様
>それに従った(特化した)意味あり気な命名
誰もクラスセレクタもCSSも話題になどしていないし、
classは管理上の手法のためのものでもない。
・・・スレ違いだな、すまそ。
classは管理上の手法のためのものでもあるんじゃないっけ?
>>347 > 誰もクラスセレクタもCSSも話題になどしていないし、
俺が例としてしている。なぜなら、ここはCSSスレだから、その方が分かりやすい。
> classは管理上の手法のためのもの
これは、
>>343で、
> classの意義は要素を超えた構造の意味づけだ。
と言っていることに反するな。
class属性を利用(要するに二重マークアップ)するわけだろ。
それを管理と言うのだが、管理という言葉が不適切なら代替を出せ。
何度も言うが、2chブラウザにとってのエポックタイムの如く、
他者にとって意味がある必要など全く無い。実際、ただの数字だ。
class属性値を管理者にとって意味ある名前にするのは一時的な管理手法の一つに過ぎない。
管理者にとって可読であることや、抽象的な切り方で命名するのは大いに結構だ。
しかし、何処まで行っても脳内仕様なのだから、
class="red" や class="1150984440" と比しても実質的相違は無い。
管理者の記憶が正しい時、または、管理者が名前から類推した内容が正解である時、
に限って通用するという姑息なアイデアに過ぎない。
重要なのは、値と内容を関連付けるメモ書きでも残しておく事だな。
>>349で引用がおかしかった。
誤) > classは管理上の手法のためのもの
正) > classは管理上の手法のためのものでもない
URLで済むところにURIを出してくるところがムカツク。
ていうかStrictスレでやれ。
>>353 グルーピングしたりして、機械処理し易くするためでもあるから、
管理の手法としての目的も含まれてると思うが。
ぐ ち ぐ ち う っ せ ー よ
class="red" っての、マークアップした本人が
「red」=重要なこと っていう観念を持ってるなら正しくなるんじゃ?
管理者によるってのはこういうことじゃないのかね
赤=重要という意識を持った管理者がいたら即刻クビにされてるな・・
社会不適合の日本語知らずということで
背景赤のページでそれやられたらすげーな。
質問失礼致します。
position: relative;
top: -○○px;
と調整していくと、下の方に余白がたくさんできてしまいました。
この余白を消す方法はないのでしょうか。
お願いします。
>>359 relativeはそういうもの。
後続させたいんだったらmargin-top:-XXpx;。
>>360 たしかにその通りでした。ありがとうございました。
>>340前後の議論に物理マークアップとあるけどさ。
font=red
これって論理的な意味も当然含んでるからな。
見栄えに1ミリも論理的な意味が含まれてない状況なんてそんなに多くない。
class=1
一番目というグループ付け。これは完全に論理的だね。
class=red
まあこれは論理性薄いけどさ。でも順番というのは見栄えだけじゃなくて論理性も含んでることをお忘れなく。
なんでもいいからスレ違い
ちなみにclass=redの論理的使用法とは
class=a
class=b
という順番的な意味の変化。
class=red
class=blue
という順序的な意味。
まあ細かいこと気にするな。
っていうか朝の時間のないときにこんなスレのぞいてレスをしてる俺。
まずいよ。間に合わないよ
お〜〜い しょんべん小僧共 子供の言い合いは他でやってくれ〜〜
<dl>
<dt>Title</dt>
<dd class="Text"> a ... z</dd>
<dd>alphabet</dd>
<dd>a</dd>
<dd>z</dd>
</dl>
dd {
border : 1px solid rgb(0, 0, 0);
}
.Text {
float : left;
width : 50%;
border : 1px solid rgb(0, 0, 0);
}
こういうdlがあった場合に、ddのwidthを指定した途端に段組がずれるのはなぜでしょうか?
Opera9,Firefox1.5で確認しました。IE6はなぜかずれませんでした
>>367 書き漏れ失礼しました、IE6標準モードでずれなかったです
センスねーなーw
>>368 どういうレイアウトにしたいのか全然わからない・・
371 :
366:2006/07/07(金) 15:05:56 ID:???
>>370 ↓dt
┌──┐
└──┘
┌────┐┌──┐ ← dd
│ │└──┘
│ │┌──┐← dd
│ │└──┘
│ │┌──┐← dd
│ │└──┘
└────┘
↑
dd
こんな感じで…ずれてたらすいません。
372 :
366:2006/07/07(金) 15:08:19 ID:???
レイアウトもそうなのですが、
なぜ上図で右側の段に当たるddにwidthを設定したらfloatしなくなってしまうのか、
その理屈を知りたいのです。
足し算してみ
>>372 どこに右側ddのwidth指定があるんだ?
小出しだと誰も答えないよ。
375 :
366:2006/07/07(金) 15:48:31 ID:???
>>374 >366にて、
>こういうdlがあった場合に、ddのwidthを指定した途端に段組がずれるのはなぜでしょうか?
>Opera9,Firefox1.5で確認しました。IE6はなぜかずれませんでした
という記述をしましたが、わかりにくかったようです。申し訳ございません。
>>375 IEはどうか知らないが、最初から段組になってない。
テンプレ読んだら?
377 :
366:2006/07/07(金) 16:48:54 ID:???
サンプルをはしょりすぎました。
失礼しました、出直してきます。
質問です。ulに対してwidthやfloatを指定した時
IE5.xでは自動的にlist-style-positionがinsideになっているようなのですが
これをdivで囲む以外に回避する方法はありますでしょうか。
なにを回避するんだね?
list-style-position をお好みで指定すればいいだけだろ?
>>378 もしマーカーをimageにしてるんだったら、
主要ブラウザにオールマイティに対応できないので、
マーカーを全部noneに。 で、<li>へのbackground-imageで
マーカーを付ける、ってのが俺の知ってる範囲では
良い方法と思われる。
>>380 つーかinsideになるのがイヤだって言ってる奴にbackgroundでのマーカーを薦めてどうするんだよ。
380ではないけれど、俺の中での主要ブラウザ
いんたーねっとえくすぷろーらー ふぁいあーふぉっくす ねっとすけーぷ おぺら
おまけ すれいぷにる るなすけーぷ
>>378 興味本位で聞くけど、なんでIE5.xに対応させる必要あるんだ?
もうIE7β出てんのに。
385 :
378:2006/07/08(土) 01:26:19 ID:???
レスありがとうございます。説明不足で申し訳ありません。
ul {
float: left;
}
li {
list-style-type: none;
list-style-position: outside;
}
以上のような場合どうしても件のブラウザではマーカー分だけ右にずれてしまうのです。
一番確実な方法としてはulをdivで囲みulのかわりにfloatすれば大丈夫なのですが
CSSの記述のみで回避する方法があればと思い質問しました。
>>384 道楽です。
389 :
378:2006/07/08(土) 02:45:46 ID:???
>>386 marginやpadding、text-indentなども指定してみましたが変わりませんでした。
>>388 そちらはliにfloatを指定したケースですので間違いでは無いと思います。
無難なdiv回避策を取ろうと思います。
ありがとうございました。
指定の仕方も書かずになんだかなぁ・・・
CSS
dt {
font-size:110%;
color:red;
text-decoration:underline;
}
a:hover{
color:red;
text-decoration:none;
}
HTML
<dt><a href="./nullpo.html">ぬるぽ</a></dt>
とすると、Firefoxでリンクのの上にマウスを移動させても下線が消えない。
a:hoverをa:hover,dt:hoverにすると、リンクじゃない場所でもオンマウスで
下線が消えちゃうのでそれじゃ解決は無理っぽい。
http://mozilla.gr.jp/standards/webtips0002.html は読んだけど、
解決には至らなかった。
どうすればリンクの上にマウスを移動させたとき下線を消せるか
知っている香具師回答キボンヌ。
香具師とはまた懐かしい言葉だな。
a:hover,dt:hoverとした場合、
a:hoverで全体にtext-decoration: none;を指定していることになる。
a:hoverを除けばよろしい。つまりa:hoverはa:hoverで指定しなさいと。
参考までに
a{ color: blue; text-decoration: underline;}
a:link{ color: blue; text-decoration: underline;}
a:visited a{ color: blue; text-decoration: underline;}
a:hover{ color: blue; text-decoration: underline;}
a:active{ color: blue; text-decoration: underline;}
dt a{ color: blue; text-decoration: underline;}
dt a:link{ color: blue; text-decoration: underline;}
dt a:visited{ color: blue; text-decoration: underline;}
dt a:hover{ color: blue; text-decoration: none;}
dt a:active{ color: blue; text-decoration: none;}
393 :
Name_Not_Found:2006/07/08(土) 19:51:37 ID:HloNxNpV
cssレイアウトをしてるんですが、デザインを変えるたびにHTMLもいじると効率が悪いというか、
作業が面倒です。
かといって、HTMLをいじらないでも済むデザインで我慢するとなると、いわゆる印刷物に
くらべ表現の幅が狭くなります。
ある程度なら万能なHTMLというのもできるのですが、
webならではの「なるべく軽くしたい」という理想を捨てることになりがちです。
例えば
http://snowboard.colonies.com/members/satiros このサイト。背景を変えて蝶と豚と孔雀を任意の場所に配置したいと思ったら
一枚の背景画像を用意するのでは配置場所によっては画像サイズがおおきなってしまいます。
divを3つ追加すれば最小限のサイズですみます。が、HTMLをいじるのは・・・ってことです。
例えばHTMLのbody内に何も書いてない状態でcssファイル側からいくつでも論理的意味のない画像を
追加できるとなるといいんですが。
アドバイスお願いします。
>>393 無理。あきらめろ。
そもそもwebデザインとDTPは別世界。
チラシやパンフレットは視覚情報を相手に伝えるもの。
webの場合はあえていうならCSSが視覚情報を伝える役割
をになっているが、
そもそもHTMLは視覚、聴覚、その他と色んな情報を持っ
ている。
印刷物に書かれた「あいうえお」とHTML内に書かれた「
あいうえお」では次元が違うのだよ。
つまり印刷物のごとくwebを使うなら、CSSなどまるで
必要ない。
テーブルレイアウトでもなんでもok。目的さえ達成す
ればいいわけだからね。
視覚情報がよければいいのならね。
でも、個人的にはそれぞれを用途に合わせて使い分
けるといいとおもう。
細かいこと気にするな。
多分お前は印刷物と同じ用にやりたいんだろうから、
テーブルレイアウトでフォントサイズ固定がオススメ。
CSSなどむやみに使えばいいわけでもない。
>>393 position と z-index では、あかんのかね?
396 :
393:2006/07/08(土) 20:23:24 ID:HloNxNpV
>>394 なるほど!頭固いんですよね自分。
用途に合わせて柔軟にやっていけるようなんとか自分を納得させてみます。
>>395 HTMLにdivとか何か要素を追加しないと無理ですよね?
できるのでしょうか?
393とか見てると本当2ちゃん回答者やcss解説サイトの功罪を考えさせられるね。
こういうやつが出てくるほど正しいHTMLとCSSを普及させたのは功だけども。
こういうやつが出てくるほど正しいHTMLとCSSを刷り込んでしまったのは罪かもね。
まあ本人次第ともいえるが、教える側も頭が固い奴が多かった。
HTML,CSSは、目的のための一つの手段であり、その使い方は自由であることを、
目的を果たすことよりも正しいHTMLを正義と錯覚させたのは大きな罪だな。
どうでもいいけど、そのサイト全然読み込み終わんない。
2秒くらいかな。
ヤフーBBで。
つまってるんでないかい?
とりあえうボンアイデンティでも見ろ7や。ルーニーが出てるぜ。
>>392 それでもダメっぽい。
試しに
a{ color: blue; text-decoration: underline;}
〜
dt a:active{ color: blue; text-decoration: none;}
をCSSの末尾に追加したりもしてみたが、
オンマウスでも下線が消えず、赤い下線になるだけだった。
>a:hoverはa:hoverで指定しなさい
ちょっとわからん・・・「a:hoverはdt:hoverで指定しなさい」のタイプミスじゃないよね?
>>400 a:activeはクリックした「瞬間の動作」な。
dt:hoverとすると、「リンクテキスト以外のdt部分」にも指定していることになるはずだ。
「a:」はページ内全てのリンクテキストに働くことになる。
だから部分的に表示設定を変えたい場合は、その「a:」とは別に、個別の表示設定を作る必要が出てくる。
例えばa:{color: #blue; text-decoration-underline;}
とした場合は、ページ全体に対して、
「リンクテキストを青で、下線を表示。」
という表示設定になる。
でも一部の表示だけ変えたい。
こういう場合には「a:」とは別の指定を、個別にする必要がある。
例えば
<p class="unko">ウンコウンコーエヘヘッヘ〜</p>
このクラスunkoの部分だけ表示を変更したい場合は、
.unko a:{ color: #red; text-decoration: none;}
「.unko a:」このひとかたまりが、「クラスunkoのリンクに対して指定する」という意味になる。
これでもわけわからん、直らん。という場合は該当箇所のソースを晒すといい。
追記
dt{ } 「dt全体に対して」
dt a{ } 「dtのリンク部分に対して」
うわっ訂正するw
aだけのばあい : (コロン)を付ける必要はないです。
hoverとか後ろに付ける場合だけ :(コロン)が必要。 いかんいかん・・・・・・・
li{
list-style-image:url(aaa.gif);
}
li a:hover{
list-style-image:url(bbb.gif);
}
と指定しています
これだとIEだとマウスオーバー時にリストのイメージが変わるんですが、Gecko系のブラウザだと変わってくれません
Gecko系のエンジンにもIEと同じように挙動してくれるようなCSSの指定の方法はないでしょうか
>>404 下を li:hover にしたらならんか?
>>401 >a:activeはクリックした「瞬間の動作」な。
>The :active pseudo-class applies while an element is being activated by the user.
while は瞬間とは訳せない。
実装も瞬間ではない。
ただし、リンククリック後すぐにページ遷移が始まるから、
これを見た馬鹿が瞬間だと思い込むのも無理はない。
>>404 li,li a{ list-style-image: url(aaa.gif);}
li:hover,li a:hover{ list-style-image:url(bbb.gif);}
つまり、「li a:hover」だけではなく、「li:hover」も指定してやると可能になる。
ただし、IEの場合「li:hover」が適用されない。「li a:hover」部分のみ適用される。
FFの場合はどちらも適用される。
なんにしろ、リンク部分以外にもイメージを適用することになってしまうので、
liで指定するのではなく、classを使って(li class="unko"など)使用することをおすすめするんだぜ。
unkoにこだわりがあるんだな・・
そこはあんまよくないよ。
411 :
Name_Not_Found:2006/07/09(日) 03:02:20 ID:vkpP0WuC
すみません、超が付く、ど初心者です。
ここで聞いていいのでしたら、教えて頂けないでしょうか。
[HTML]
<body>
<div id="outline">
<div class="header">
タイトルなど
</div>
<div class="outline-marign">
<div class="main">
メインスペース
</div>
続きます。。
412 :
Name_Not_Found:2006/07/09(日) 03:03:37 ID:vkpP0WuC
<div class="side">
サイド
</div>
<div class="c-both"><br></div>
</div>
<div class="footer">
コピーライトなど
</div>
</div>
</body>
413 :
Name_Not_Found:2006/07/09(日) 03:04:16 ID:vkpP0WuC
[CSS]
body {margin:0;}
#outline {
width:800px;
text-align:left;
margin:0;
}
.main {width:600px; float:right; background-color: #F0FFFF; }
.side {width:200px; float:left; background-color: #e0ffff;}
.footer{margin:0; background-color: #10FFFF; }
.c-both {clear:both; }
これで、footerの上に、すきまをなくそうとすればどうすればいいのでしょうか?
どうぞ宜しくお願いします。
>>413 <div class="c-both"><br></div>
これいるの?
footerにclear:both;つければ?
よく見たら<div class="outline-marign"> これがいらんような木がする。
これ外してfooterでclearでいんじゃね?
416 :
413:2006/07/09(日) 03:50:46 ID:JSBJUNjF
>>414 >>415 ありがとうございます!!
その通りしてみたら、すきまがなくなりました!
恐縮ですが、甘えついでにもうひとつ教えてください。
outlineを800pxに設定して、footerをその中に入れているのですが、
footerが800px以上に広がってしまいます。
何が問題なのか教えて頂けないでしょうか。
どうぞ宜しくお願い致します。
>>416 とりあえず、<div class="outline-marign"> と<div class="c-both">部分を外して、
footerにclear付けた場合、少なくともIEとFFでは問題ないよ。
たぶん</div>を消し忘れてるんじゃないかな?
下のを見て確認してみて。
CSS↓
body {margin:0;}
#outline { width:800px; text-align:left; margin:0; }
.main {width:600px; float:right; background-color: #F0FFFF; }
.side {width:200px; float:left; background-color: #e0ffff;}
.footer{margin:0; background-color: #10FFFF; clear: both;}
html
<body>
<div id="outline">
<div class="header"> タイトルなど </div>
<div class="main"> メインスペース </div>
<div class="side"> サイド </div>
<div class="footer"> コピーライトなど </div>
</div>
</body>
418 :
416:2006/07/09(日) 04:19:30 ID:JSBJUNjF
すみません、自己解決しました。
お騒がせしました。
419 :
416:2006/07/09(日) 04:21:29 ID:JSBJUNjF
>>417 おっしゃるとおりでした!
感謝です。ありがとうございました!
てすと1てすと2<br>でなく、
てすと1てすと2
<br>
てすと3
↑
こうすると、てすと2の後に半角スペースを入れてなくてもなぜか入りますよね。
で、あるページだけが上記のような書き方をしてないのにも関わらず、行の終わりに
半角スペースが全部入ってる状態なんです。
原因が不明です。cssも他のページと同じなのに。なにかこの原因に心当たりのある方はいませんか?
書いてあることが分かりずらいのだが、
<br>前にテキストの改行を入れていないのに、
ブラウザ表示上で半角スペース空きができるってこと?
実際にその現象がでるソース晒してよ。
>>420 確かにそうなるみたいだな。
そういう仕様なんだろ。別に困ることはないと思うけど?
改行は空白類文字だから当たり前
CSSと全然関係ない
424 :
Name_Not_Found:2006/07/10(月) 16:55:23 ID:rqyt7kqm
body{
text-align:center;
color:#333333;
}
#all{
width:750px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
サイト全体を中央揃えにしようと思い上記のような記述をし
中央表示にはなったんですがコンテンツの量が増えて画面をはみ出すと
NN7、Firefoxだと
スクロールバーが表示される分少しずれてしまいます。
コンテンツが画面に収まるページとはみ出すページを
全て均等に表示されるにはどうしたらいいですか?
アドバイスよろしくお願いします。
>>424 常にスロールバー表示させるようにするんじゃダメなの?
427 :
424:2006/07/10(月) 17:17:33 ID:rqyt7kqm
>>425 返事ありがとうございます。
私も最初スクロールバーを表示させようと思ったんですが
企業ページなのでさすがに厳しいかなと思いまして・・・
やはりその方法しかないですよね?
>>427 企業ページって請負かおまい?
自社ならそんな細かいことで何時間も手を止めるよりも、
生産性を重視したほうが社長は喜ぶぞ。
一体誰がそんな細かいとこみるというのか。
一体誰がそんな細かいことで不愉快になるのか。
会議でつっこまれたら胸を張っていってやれ。
「こんな細かい事にこだわるよりどんどん今できることを進めて行くことが自社の利益だと思いました」
って。クビにされても知らんがな。逆にそんなクソ会社はやめてやれ。
>>422-
>>423 >>421こう言う事です。テキスト改行入れると半角スペースは現れますし
CSSとは関係もないですが、質問したのはテキスト改行はどこにもなく、
さらに他のページと同じ書き方をしているのになぜか半角スペースが現れるということで
何か半角スペースが現れてしまうようなトンでもタグがあるとかと思い質問しにきました。
無いようなのでもうちょっと自分で探り入れてみます。原因がわからなかったらソース
晒しにきますノシ
スレ違いと言わないとわからないんじゃないか
>>430 実体参照でググれ。半角スペースを作るタグみたいな物があるから。
>>434 >何か半角スペースが現れてしまうようなトンでもタグがあるとかと思い質問しにきました。
これに対するレス。こういうのもタグじゃないけどあるんだよってことを言いたかった。
>半角スペースを作るタグ
これは語弊があるかと
>>431がまだ質問の意味を理解出来てない件について
一行目の宣言なんちゃら〜が違うんじゃないか?他のページと
*=半角スペ
あいうえ<br>
おかきくけ
↓
あいうえ
おかきくけ
---------------------------
あいうえ
<br>
おかきくけこ
↓
あいうえ*
おかきくけ
---------------------------
で、質問内容は
あいうえ<br>
おかきくけ
と書いてるのに表示が
あいうえ
<br>
おかきくけ
の時と同じ(えの隣に*が入る)ってことかい?
それ全行?なんかタグミスってないの?
♪♪♪
442 :
Name_Not_Found:2006/07/11(火) 12:53:23 ID:7u7qUNxb
自分で作ったサイトなんですが、CSSについてわからないことがあります。
index.htmlに影響を与えてるCSSファイルにはindex.cssとconst.cssとありまして、
後者は他のページにも使われてます。
しかしどこにも読み込みの記述がみつかりません。
index.html内には
<link rel="stylesheet" type="text/css" href="css/index.css" media="print,screen">
以外にCSSの読み込み記述はありませんでした。
index.css内にもconstやcss1で検索を掛けても何も引っかかりませんのでないみたいです。
@!inportantでしたっけこんなの使ったような覚えもあるのですが。
どうなってるのでしょうか?
const.cssのファイル名を変えるとレイアウトが崩れます。
443 :
Name_Not_Found:2006/07/11(火) 12:56:14 ID:7u7qUNxb
みつかりませした。失礼します。
阿呆としかいいようがないが、どこか憎めない。
もう 夏だなあ
446 :
Name_Not_Found:2006/07/11(火) 15:22:09 ID:7u7qUNxb
すみませんあれから色々と。進んでるのですが。
iframeを使った時に
iframeAでは縦のスクロールバーだけ出すようにして、
iframeBではスクロールバーを完全に消したいのですが、
どうやればいいでしょうか。
447 :
Name_Not_Found:2006/07/11(火) 15:24:43 ID:7u7qUNxb
あぁ・・・
iframeの中にフレームページを作ってフレームを消せばいいのか・・・
失礼しました。
さすがにムカつくな
449 :
Name_Not_Found:2006/07/11(火) 15:41:36 ID:7u7qUNxb
スレ違いだからじゃね?
それ以前にチラ裏。
>>449 1回ならまだおっちょこちょいさんって感じで許せるが、2回やられるとな。
453 :
Name_Not_Found:2006/07/11(火) 17:11:55 ID:7u7qUNxb
iframeで出てくるスクロールバーの下にでる左右用のバーだけ消したいのですが、可能ですか?
>>453 IEだけならcssのoverflow-y: scroll;で上下のバーだけ出るようになる。
ああ、iframeか
456 :
453:2006/07/11(火) 17:44:09 ID:7u7qUNxb
457 :
453:2006/07/11(火) 17:46:27 ID:7u7qUNxb
>>454 IEだけなんですか?overflowでスクロールバー出せるの。
IEの独自機能ですかね。
9割のブラウザでいけるならiframeのバーを全消しして、overflowで上下だけ出しなおす方法でもいいんですが。
<DIV1><DIV1>
<clear>
<DIV1><DIV1>
<clear>
<DIV1><DIV1>
<clear>
DIV1はフロートしてます。
こんな感じで段組したんですけど、IE6だと
<DIV1>
<DIV1>
<DIV1>
<DIV1>
<DIV1>
<DIV1>
こうなってしまいます。(FirefoxやIE7ではOK)
回避方法はありますでしょうか?
>>458 親要素の幅が足らなかった、というオチかも。
>>459 いやー、誠にお恥ずかしいw
途中でパディングサイズとか変更したんだった・・・・
すまなかった 0rz
さっきからこんなんばっかだなw
462 :
Name_Not_Found:2006/07/11(火) 21:18:25 ID:7u7qUNxb
>>462 iframeでやってください。 チュッ
464 :
Name_Not_Found:2006/07/11(火) 21:41:00 ID:7u7qUNxb
どこかにURLを入力すると、各ブラウザのスクリーンショットを提供してくれるサイトがあったはずですが、
どなたかご存知ありませんか?
467 :
Name_Not_Found:2006/07/11(火) 22:07:55 ID:7u7qUNxb
>>466 わざわざいきがりレスしなくていいのに・・・・
なんでこんなスレ違いの質問が続いてるんだ?
夏だからねぇ・・・
風物詩ですな
平田恵里香タン(;´Д`)ハァハァ
お前一体いつになったら2ちゃん卒業するの?
卒業するもんなのかね
情報の分別さえできればこれ以上ない情報の発信源だと思うんだが
>>473 軽く引くわ
お前取引先や従業員とかにもそんなこと言ってるの?
2ch自体は何の情報も保有してないんじゃない?
情報の集積所みたいな感じか?
だから発信源というと微妙だな。倉庫って言ったほうがいいかな。
こ〜のにちゃんからの〜そつぎょお〜♪
<STYLE TYPE="text/css">
<!--
BODY {
color: #ffffff;
font-size: 12pt;
text-align: center;
background-color: black;
}
div.test1 {
width: 100%;
height: 10%;
position:absolute;
bottom: 0%;
right: 0%;
top: auto;
left: auto;
padding: 0px;
margin: 0px;
}
-->
</STYLE>
<body>
<br>
<br>
<br>
<br>
<br>
テストだぴょーん
<br>
<br>
<br>
<br>
<br>
<br>
<DIV class="test1">HELLO</div>
</body>
以上のようなページで、HELLOの文字についてなんですが、ブラウザーのウィンドウをリサイズすると、それに着いてくるようにHELLOの文字が表示されます。
その動作はこちらの狙い通りなのですが、ウィンドウをスクロールバーが出るくらいまで縮めて、その状態でスクロールさせるとHELLOの文字も外に出て行っちゃいます。
その場合に外に出て行かないようにするにはどうしたら良いでしょう?
>>481 そのソース自分で実行してみろ。普通に改行されるから。
たぶん別の要素が影響して改行しなくなっちゃってるんだろ。
word-break: break-all; を使ってみること。
ちなみにそのソースだとFFでは「HELLO」が中央表示されない。
>>482 ご指摘ありがとうございます。
margin-left:auto;margin-right:auto;
が抜けておりました。
本題の方なのですが、改行されるかどうかということではなくて、
例えば「HELLO」の文字が「テストだぴょーん 」の文字と重なるくらいまで
ウィンドウを縮めて、その状態でマウスのスクロールボタンなどでクルクルっと
ページをスクロールさせると、両文字ともそのままスクロールしていってしまいます。
これを、「テストだぴょーん 」はスクロールするけど、「HELLO」の文字はその場に留まるようにしたいわけです。
ごめんなさい。訂正です。
例題は「HELLO」が中央に来なくて正解でした。
右下に表示するようにしてあります。
いまいち何がしたいのか見えてこない。
つまりHELLOを、ブラウザのサイズを変えても、
他の要素(テストだぴょーん)に関係なく、常に指定した位置に表示したいってことか?
そうです。
常に指定した位置(例題の場合は右下)に表示されるようにしたいんです。
IEの事を考えるとJSを使うしかないよ
>>486 そうか、じゃあpositionのtopとleftの値をautoにせず、pxなりemなり%なりで書き込んでおくといいよ。
ちなみにpositionのbottomとrightの値は対応していないブラウザもあるから、書き込む必要はない。と個人的には判断してる。
489 :
488:2006/07/12(水) 12:21:07 ID:???
参考までに
HELLOを常に画面中央に表示したい場合は、
topの値が50%、leftを0にするとブラウザサイズを変えても常に中央表示になります。
(IE、FFで確認、※marginの左右autoを忘れずに。)
>>488 質問者の意図を嫁や。
閲覧領域に対する絶対配置を望んでるんだぞ。
491 :
488:2006/07/12(水) 12:25:30 ID:???
あ、そうか、スクロールしても固定で表示させたいんだったな。
その場合はFFだったらposition: fixed; でいけます。
IEのことを考えると
>>487の言うようにjs使うしかないと思う。IE7でfixed対応しねーかな。
492 :
480:2006/07/12(水) 13:11:45 ID:???
ここってID出ないんですね。
みなさんアドバイスあリがとう御座います。
>>491 私もそこで行き詰ってまして、fixedにした場合のFFでの動作がまさにやりたいことなのですが、IEでの表示が上手くいかなくて質問しにきたわけです。
ですが、どうやら無理っぽいようですね。
>>492 fixedはIEでは無理だけど、IDを出す方法はメール欄に何も入れなければいい。
IE7ではfixedできるようになるんですか?
497 :
Name_Not_Found:2006/07/13(木) 19:10:03 ID:8naq4PSI
ulに幅か高さを指定すると、IE5.5以下で、
list-style-positionが強制的にinsideになってしまうようなのですが、
これを回避する方法は無いのでしょうか。
ありますよ。
しなくていいよ強いから
500 :
Name_Not_Found:2006/07/13(木) 19:31:21 ID:8naq4PSI
1 Internet Explorer 6.0 87.2% 25,056
2 Mozilla 1.8.0.3 5.5% 1,602
3 Safari 1.3% 401
4 Opera 8.54 1.1% 337
5 Mozilla 1.7.12 0.9% 277
6 Opera 8.5 0.4% 123
7 Opera 8.53 0.3% 111
8 Internet Explorer 7.0 0.3% 108
9 Netscape 7.1 0.3% 94
10 Mozilla 1.8.0.1 0.1% 56
11 Netscape 3.01 0.1% 54
12 Mozilla 1.7.10 0.1% 48
13 Internet Explorer 5.5 0.1% 45
14 Opera 8.52 0.1% 41
15 Mozilla 1.8.0.2 0.1% 39
16 Opera 7.54 0.1% 35
17 Mozilla 1.8.0.4 0.1% 32
18 Internet Explorer 5.0 0.1% 31
19 Mozilla 1.7.8 0.09% 28
20 Opera 8.01 0.06% 20
21 Mozilla 1.8 0.06% 18
22 Mozilla 1.7.5 0.05% 17
23 Opera 7.23 0.05% 17
24 Opera 8.51 0.05% 17
25 Netscape 7.02 0.05% 16
26 Sleipnir Version 1.66 0.05% 16
その他少数派(71件) 0.7% 222
IE約70%、携帯約10%、Fx約8%、その他・・・
一般的には大体こんな感じだよな
いや、87ってのは一般より高い数値だぜ
そうかい? 誤差範囲内じゃない?
携帯が入れば
>>502ぐらいだし、無ければ
>>501 ぐらいっしょ。
>>505 範囲内であっても平均以上という言葉を知らないのか?
Safariのシェアは5%位あった筈。
日本じゃ低いとはいえね。
コンテンツにもよるだろうけど、普通かむしろ少ないぐらいじゃね?
それよりOperaユーザの多さが気になるw
>>506 最初からバンドルされてるからな。
OS9まではIEがそうだったが。
ウチはSafari多いぞ
Macユーザで一番多いのはウチではFx
あるblogスクリプトのスキンを作っているのですが
IEは正しく表示されるもFireFoxだと少し崩れてしまいました。
以下はソースです。
html部
<div id="parent_frame">
<div id="title">
<div class="title_name">title</div>
<div class="title_description">description</div>
</div>
<div id="calendar_main">
<table class="calendar"><tr align=center><td class="cell">1</td></tr></table>
<div class="calendar_text">calendar_text</div>
</div>
<div id="page_select">page_select</div>
<div id="footer">footer</div>
</div>
CSS部
body {
text-align: center;
margin: 0px auto 0px auto;
}
#parent_frame {
background-color: #EBDDFF;
width: 800px;
margin: 0px auto 0px auto;
border-top: 1px solid #EBDDFF;
border-left: 2px solid #B381FF;
border-right: 2px solid #B381FF;
border-bottom: 1px solid #EBDDFF;
}
#title {
background-color: #FFFFFF;
width: 780px;
text-align: right;
margin-top: 30px;
padding: 10px 10px 0px 10px;
border-bottom: 1px dotted #B381FF;
}
.title_name {
float: right;
width: 600px;
font-size: 18pt;
font-family: Verdana;
border-bottom: 2px solid #B381FF;
}
CSS部2
.title_description {
clear: right;
font-size: 10pt;
color: #606060;
font-family: Verdana;
padding: 5px
}
#calendar_main {
background-color: #FFFFFF;
width: 780px;
margin: 5px auto 5px auto;
border-top: 1px dotted #B381FF;
border-bottom: 1px dotted #B381FF;
}
.calendar_text {
font-size: 10pt;
color: #606060;
font-family: Verdana;
}
.cell {
font-size: 10pt;
color: #606060;
font-family: Verdana;
width: 15px;
}
>>512 CSS以前にHTMLを学んできてください…
CSS部3
#page_select {
clear: both;
font-size: 10pt;
color: #606060;
font-family: Verdana;
width: 780px;
line-height: 150%;
background-color: #FFFFFF;
margin-top: 10px;
border-top: 1px dotted #B381FF;
border-bottom: 1px dotted #B381FF;
}
#footer {
font-size: 10pt;
color: #606060;
font-family: Verdana;
width: 780px;
line-height: 150%;
background-color: #FFFFFF;
margin: 30px auto 30px auto;
border-top: 1px dotted #B381FF;
border-bottom: 1px dotted #B381FF;
}
長くてすいません、これで全部です。
htmlのヘッダ等はおそらくあっているので省略してあります。
FireFoxだとpage_selectの部分が真ん中によってなかったり
1が入っているtableが真ん中によってないなど微妙にレイアウトが変わりまして・・・
これはひどい
>>515 html自体がおかしかったでしょうか?
よろしければおかしい部分も教えて頂けるとありがたいのですが・・・
おかしいのはあなたの頭です。
その頭をとりかえるのがいいでしょう。
>>515 それはブログスクリプト作者に言うべきじゃね?
ここで質問する資格がなかったようなので
もう少し勉強してみます。ありがとうございました。
>>521 htmlを作るのはスキンの作者なので私の書き方がおかしいことになります。
資格がどうこうより、まず自分で問題だと思う部分を絞り込もうよ。
余計な部分のソースまで長々と貼られても、
こいつ、自分で考えずにまる投げしてきた と反感買うだけよ。
divとtableだけで構成された(しかもそれがCMSのデザインだと言う)ソースなんて絞り込まれても困るだけだよ
とりあえず初心者質問スレのテンプレの参考リンクから、
正しいマークアップのルールを調べておいで。
それを勉強すればそのソースの何処がおかしいか良くわかる筈。
これは転換になるいいチャンスだったと思っておくと良いよ。
覚えると全然違うから。
>>523 すいません、ご忠告ありがとうございます。
今度は極力要らない部分は削ってきました。
もしよろしければご教示頂けたらありがたいです。
html(bodyの中のみ)
<body>
<div id="parent_frame">
<div id="calendar_main">
<table class="calendar"><tr align="center"><td>1</td></tr></table>
</div>
<div id="page_select">page_select</div>
</div>
</body>
あら、書き込んでる間に・・・
>>525 わかりました。読んでみます。
スレ汚し失礼しました。
<table class="calendar" align="center"><tr><td>1</td></tr></table>
#page_select {
margin: 10px auto 0;
}
望みのものってこういう事?
とりあえず最小限の修正でやってみたけど、
もっと適切なマークアップとCSSの設定の仕方がわかったら
もっと違ったマークアップとCSS設定になると思う。
borderのdotted指定ってIEのドットが妙に大きくなるんだな。
まともに使った事無かったから初めて知ったよ。
>>528 はい、その通りです。そのalignもCSSの中にまとめようとして詰まりました。
とりあえず基礎がなってないのでもう1度勉強して組みなおしてみようと思います。
中央寄せとかはここの
>>4を見てみ。
そのあと、自分のCSSのbodyの指定で何をやってるか良く見てみるといいかも。
中央寄せとかはIEのダメ仕様のせいでちょっと面倒だから、
最初はわからないのもしょうがない。
まあ、覚えればすぐ身につくから頑張れ。
あとは正しいHTMLのマークアップを覚えればかなり変わる筈。
作業効率もね。
うわぁなるほど。
思いっきりブロックをtext-alignでセンタリングしようとしてました。
IE7.0で仕様が正しくなって欲しいなぁと思いつつ
そろそろロムに戻ります。ありがとうございました。
534 :
497:2006/07/14(金) 13:09:44 ID:b73lW9E9
IE5.5以前使ってる人は少ないから対応させなくていいよ
というのがこのスレの結論ということでしょうか。
「一日何十人もそれで見てる人がいるんだから対応させろ」
と上司に言われてしまいまして…。
ご存知の方がいたら教えていただきたいです。
アクセス統計を取ってみて、何人いるか調べてみたらどうかな
5.5の事は知らないや。
そのうち知ってる人がくるんじゃない?
ゆっくり待つといいかと。
537 :
497:2006/07/14(金) 14:17:31 ID:b73lW9E9
>>537 これじゃだめか?
オレはあまり好きじゃないやり方だが、
ul {
list-style : none;
margin : 0px;
paddig : 0px;
}
li {
padding : 0px 0px 0px 10px;
background : url( x.gif ) no-repeat;
}
リストのマークを背景画像として敷くって事。
liはpadding-leftで余白を空け(ry
539 :
497:2006/07/14(金) 17:43:16 ID:b73lW9E9
>>538 その場合、リストマークとテキストの感覚がIE6以降とIE5.5以前で変わってしまうはずです。
list-style-positionをoutsideにしても5.5以前ではinsideになってしまうので。
insideを指定すれば同じになるのですが、
やりたいことはリストの左の余白を無くすことなのでinsideではだめなのです。
>>534 つーか前のときも何人か答えてたけど、
無視してたのしおまえじゃなかったか?
542 :
497:2006/07/14(金) 21:18:28 ID:b73lW9E9
>>542 個人的には
>>534の見解だけど、どーしてもやりたそうだから、皆考えてんだ。
ぶつくさ言ってるより、ソース出せ。
544 :
497:2006/07/14(金) 22:54:01 ID:b73lW9E9
ぶつくさ言ってるつもりはなかったんですが。
複雑なものではないのでソースはいらないかと思いましたが、
最初から書くべきでしたね。すみません。
body { margin: 0; padding: 0 }
ul { width: 300px; margin: 0; padding: 0; list-style: none outside }
li { margin: 0; padding: 0 }
<body>
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</body>
こうした時、IE5や5.5ではリストの左に隙間ができてしまいます。
>list-style: none outside
これありなの?
なしwwwww
ありwwwww
でもOKでも、noneとした時点でlist-style-typeもlist0style-imageも
一緒にnoneとされて上書きは別に指定しないと駄目だから
意味はないと思われる。
>>544 リストの左にスキマの意味がわからん。
497で言ってたことをやりたいんなら
ul { margin: 10px; padding: 10px; }
>>550 いや、none inside と none outsideでは表示が変わるぞ。
前者はリストマーク分のスペースが開く。
>>497は変わらないと言ってるんだよなあ。
>list-style-positionをoutsideにしても5.5以前ではinsideになってしまう
これも探したけど、バグ報告等は見つからん。
554 :
497:2006/07/15(土) 00:59:24 ID:btVVlAoP
>>554 話を聞かない香具師だな。
だから
>>552だと言っているだろう。
widthを指定するとinsideになるバグだ。
>>552 開くのはおかしい。
listy-style-typeがnoneのときは、たとえinsideでもマーカーは付けられてはならない。
開くとしたらバグ。
559 :
497:2006/07/15(土) 02:00:39 ID:btVVlAoP
>>551のようにやってみましたが、
marginとpaddingが10pxずつとマーカー分のスペースができただけでした。
body { margin: 0; padding: 0 }
ul { width: 300px; margin: 10px; padding: 10px; list-style: none outside }
li { margin: 0; padding: 0 }
何か違っていますか?
>>557 言い方が悪かったな。
"IEだと"だ。
他のモダンブラウザでは開かない。
バグというか、よくあるIEの独自(糞)解釈の一つだな。
IE7beta3でもそのまま。
>>559 おまえが日本語を読めないのだということはわかった。
なんで質問者に酷に当たるわけ?
質問者より詳しいって事がそんなに気持ちいいんでしょうか。
いろいろとアドバイスを受けているのに、1つしか試さない。しかも指摘された後。
2つ以上の質問をされてるのに、1つしか答えない。
つまり人の話を聞かないタイプ。優しくなれなくて当然でしょう。
試してもないよ、よく見てごらん
そもそも質問の意図を正確に汲み取り、理解した上での回答が無いように見える。
的外れの回答に対しても一々反応しろってのは回答者の驕りじゃないか?
まあ、かくいう俺も、質問者の望む解決方法は
多分提示してやれそうにないので、えらそうなことは言えんが。
最近よく思うけど、結局このスレってあんま存在価値無いのかもね。
ラベルの問題だな
>>566 一々反応する必要はもちろんないんじゃない?
でも回答側だって、質問者が初心者なのか中級者なのか全くわからないわけだし。
ま、それにしても、でしょ。
既に提示されてる件
572 :
コメ:2006/07/15(土) 09:22:12 ID:???
質問させて下さい。
値を子に継承させないようにするにはどうしたらいいのでしょうか?
具体的には“filter:Alpha”です。'inherit' の逆のようなイメージです。
よろしくお願いします。
>>569 提示されてんのか?
ulに幅(or高さ)を指定し、list-styleをnoneにした時に
IE5.5以下でリストのテキストの左側の隙間を完全に無くす。
この条件を満たした方法は提示されてないようだが。
俺が文盲なのか?
>>572 ごめん、フィルターは上書きすら不可だわ。
ついでにそれってCSSじゃない。
>>573 間違ってない
実際に試しも理解もしないで明後日の方向にエスパーする
勘違いが常駐してるだけだ
578 :
コメ:2006/07/15(土) 15:40:03 ID:???
>>574 >>576 ご回答有難うございます。
無理なんですかぁ。さらに上書きも不可。了解しました。
これでもう調べる必要がなくなりました。他の方法考えます。
有難うございました。
違うだろ。
>>551じゃリストマークそのままだし、
幅も高さも指定してないからそもそも答えになってない。
581 :
580:2006/07/15(土) 19:57:44 ID:???
で、結局どこに正解が提示されてるんだろうな。
まさか
>>540のリンク先にある、position: absoluteを使う方法を
正解だと言い張るわけはないだろうし。
質問者は自分でもIE5.5で左マージンが出ない方法の1つを見つけている。
>>554 >>544のソースには高さ指定なんてないが。
回答者が貼ったリンク先にもヒントはあるし、その位のズレで崩れるようなレイアウトはやめるか、
5.5用のCSSを使うか。
というわけで回答は既に出ている。
相手すんなよ、バグの存在を示されても一般的な対処の方法がわからない質問者だろ・・・
584 :
Name_Not_Found:2006/07/15(土) 20:21:02 ID:BSi2aMZO
.box { width: 300px; }
body { margin: 0; padding: 0 }
ul { margin: 0; padding: 0; list-style: none outside }
li { margin: 0; padding: 0 }
<div class="box">
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
</div>
全体を包括するDIVの高さをブラウザの高さ100%(ブラウザの高さに合わせて可変する)にしたいんだけど、
どうすればいいんですか?
うん。
>>582が質問者の言ってることを理解できていない
ということだけはわかった。
うん。
質問者必死だな
まあ
>>582がとんちんかんなことを言ってるのは事実だけどな。
もっと生産的なことしろよ
595 :
497:2006/07/16(日) 01:01:59 ID:ROXx4aeW
>>584 質問する前に、そのやり方でとりあえず上司の目はごまかしたんですが、
古いIEのためだけにdivを追加するというのがどうにも我慢できなかったので
そうしなくても解決する手段があるかもしれないと思い、
ここで質問させて頂いた次第です。
やはりそのやり方しかしかないのですかね。
position: absolute を使う方法は、
メニューのようにほぼ固定のリストであればよかったのですが、
頻繁に項目が追加・削除される類のリストなので、
一つ一つにidをつけてpositionで位置を指定するのは現実的ではありませんでした。
テキストですので高さも可変ですから、
絶対配置にしてしまうと、テキストサイズが大きくなると重なってしまうということもあり、
使えませんでした。
自分のやりたかったことがちゃんと理解してもらえてなかったようですが、
私の説明が不十分だったと思います。
私の質問のせいでスレがおかしな空気になってしまい申し訳ありません。
問題は解決していませんが、これきりに致します。
勝手ではありますが、
私のせいでスレが荒れるのはしのびないですので
これ以降、この話題は無かったものとして進めていただければと思います。
最後に、質問に答えてくださった方々、ありがとうございました。
細かいところまで見てくれるいい上司だ。
>>584も立派な解決方法なんだが・・・
ブラウザ毎の差異を無くす為に、
width指定を入れ子と分けるのと同じようにね。
もっと柔軟にやったほうがいいよ。
聞く耳持たない人だったね…
>おかしな空気
もとよりこの板このスレはこんなもん
IE6での表示で質問です。
overflowでスクロールバーを出したいのですが、高さを固定しないとスクロールバーが出てくれず、画面外にはみ出してしまいます。
バグだと思うのですが、常にブラウザーの下端より一定のマージンを持ってスクロールさせるにはどうしたら良いでしょう?
>>600 overflowの前に意味がわからん。
>常にブラウザーの下端より一定のマージン
つまりボックスを閲覧領域に合わせてfixedにしたいということか?
だったらIEは対応してないぞ。
>>602 >閲覧領域に合わせてfixedにしたいということか?
そういうことです。
IE6が対応しない=バグだというのは調べて判ったのですが、なんとか同様のTipsがないものかと質問しにきた次第です。
最近「バグだけどおまいら何とか汁」ってのが多いなあ。
CSS2.1対応と謳っていながら未対応ってのはバグと称してもおかしくいないがな・・・
しかもそのまま○年放置・・・
ずっと調べてたのですが、はっきりした解決策はみつかりませんでした。
諦めてレイアウト変えしてみます。
解決法って・・・・未対応を解決させるって言ったらIE7を待つということしかないというのに
ハック技みたいなことを言ってるんだろ。
答える事も出来ないなら黙っておけよ。
ただでさえ、ストレス解消の為に来てそうな奴が多いスレだってのに。
カスが俺に意見しようなんざ100億万年早いぜ#
このスレでカスと言えば、えーとえーと・・・カスケーディング!
#arashi { display: none; }
pukiwikiみたいにAgent読んで分岐させりゃええんじゃ<解決法
すげw
ぁぁ ラベル・・・ ラベル・・・ チーン
日本人なら理解できると思うが、質問者はバグの修正を求めているのでは無くTipsを求めてる。
Q.IE7でも未対応のcontentプロパティをIEでCSSだけで実現するにはどうしたらいいですか?
A.無理。
この答えに満足できない人間は完璧なブラウザを作って全世界に広めてほしいよマジで。
横にボックスを並べるのに今までwidth指定してfloat:left;で並べて、
最後にclear:left;するのが一般的だと思ってたんですが、
widthとmarginを指定してレイアウトしてる人を見かけました。
何のメリットがあるんだろうと思ったんだけど、
人によってやりやすい方法は違う、くらいの認識でいいんでしょうか。
>>620 ブラウザの幅なんて人それぞれだし、横スクロール嫌いな人もいるし。
それに対応するかどうかは人による。
>widthとmarginを指定
これで横に並ぶの?
>>622 .boxA{
width:200;
}
.boxB{
width:200;
margin-left:200;
}
.boxC{
width:200;
margin-left:400;
}
みたいな書き方だったと思います
>>623 えーと・・・それ以前にまずCSSの基礎の基礎を勉強しておいで、ね?
>>624 いや、わたしが書いたんじゃないですよ
そう書いてる人がいるって話で
ヒント:単位
つーかネガティブマージンの奴でもfloatは使用してると思うのだが
dispal:inline;指定してるとか?
でもそれだとネガティブマージンは要らないよな。
displayねw
classやidの名前の命名方法について詳しく解説されているページ等は無いでしょうか?
"leftInfoBox" とか、何で後ろ2つの単語だけ先頭大文字なのかと疑問で…。
>631
camel記法でぐぐると幸せになれるかもしれません
>>631 名前なんてなんだっていいべよ。
<div id="OranoHoomupeejiNoUenoHou"></div>
<div id="OranoHoomupeejiNoHidarinooHou"></div>
<div id="OranoHoomupeejiNoMiginoHou"><p id="OranoHoomupeejiNoBunsyou"></p></div>
これは流行る
<ul id="OranoHoomupeejiNoKousinRireki">
<li></li>
</ul>
<p class="OranoHoomupeejiNoChosakukenHaOranoMonda">(c)2006 Ora</p>
<strong class="OranoDaijinaBubun"></strong>
<img src="OranoErogazou.jpg" width="800" height="1800" alt="オラのエロ画像" id="OranoErogazouSugoiErogazou" />
636 :
Name_Not_Found:2006/07/19(水) 17:46:35 ID:n6OJqpLR
>>631 初心者や言語音痴が、キャメルで書いたり、アンダースコアで書いたりするが、
CSSもHTMLもハイフン連結が慣例だな。
たとえば、Rubyで toInteger と書いたら、うぜえよ(笑)なわけで、
たとえば、Javaで to_i と書いたら、ふざけんな(笑)となる。
CSS(やHTML)も、プロパティなどの命名規則をよく観察して真似することだな。
慣例なんて言語によって違う。
CSS程度のものにはないから、自分の中でちゃんとしてればよかろ。
質問させてください。
Netscape6.2で見ると、hn内の文字表示がおかしくなります。
たとえば「ネットスケープ」と書いてある場合、
「ー」がその前の「ケ」の文字に重なって表示されます。
IE6とFireFoxでは正常でした。
これはどういった事が考えられるでしょうか。
>>638 再現しないよ。
・font-familyの指定ミス
・文字間隔の指定ミス
・hnのwidth指定ミス
・htmlでーを罫線で書いてる
>>636 ドラゴンクエストの兵士の台詞のようだな。
>>639 >・font-familyの指定ミス
MS Pゴシック、Osaka、sans-serifです
>・文字間隔の指定ミス
letter-spacing=0.2emです
>・hnのwidth指定ミス
幅を指定したbox内にあるので、特に指定していません
>・htmlでーを罫線で書いてる
該当なしです
文字間隔があやしい気がしてきました。
会社でしか確認できないので、明日試してみます(´・ω・`)
他にも考えられることがあれば教えてください。
>>letter-spacing=0.2em
(゜д゜)
DIVブロックの幅をピクセル指定してから余白をピクセル指定すると
なんで外枠が余白分拡がるんでつか?
<DIV style="width:100px;padding:10px;">
hoge
</DIV>
110ピクセルになってまう・・orz
仕様です
647 :
638:2006/07/19(水) 21:01:22 ID:???
>>642 このへんの設定はテンプレサイトからいただいてきたそのままなんですが
なんかおかしいのでしょうか…。
もう閉鎖されたサイトなので問合せ?もできないのです。
648 :
638:2006/07/19(水) 21:14:46 ID:???
>>646 うわー、こういうことだったのですね。バグとは思いませんでした。
どうしようか悩みますがとりあえず原因がわかってすっきりしました。ありがとうございました。
>>647 いや、あの… イコール…
書き間違えただけだろうけど…
はっ!
ま、まちがえました(恥)はずかしい〜っ!
なんでCSSってこんなに難しいん?
>>651 今のCSSの仕様には大筋満足しているけど、やはりボックスモデルが扱いにくいな。
CSSを難しくしている一つの原因はブラウザごとにCSSの解釈が異なるということだろうか。
つ【標準モード】
text-align:center;がOperaだと効かない・・・・
標準モードでのボックスモデルの解釈は同じになってるんだぞ、知らないのか?
つ【ハック】
アホがいる
>>658 【仕様を無視した書き方をするハックが嫌いという】
バカがいる
>>661 所詮は環境の変えられるWebの外観なんだから、
そんなギチギチに多少のバグで崩れるようなレイアウトにしにきゃいい。
そんなものが作りたいならPDFに池。
Flashだろ
SVGでページ全体を・・・・・・・
・・・・・ちょっと実験でやってみたくなった。
>>658 IE7、ハックは効かんが、バグは残ってる。
ありがとうM$、ついでに潰れろ。
MSがつぶれたら大変な事になるわけだが。
改心しろMS(モビルスーツじゃないよアハハウフフ)
標準=MS
これを忘れるな。
1:5の法則知ってるな。
大多数ではあっても、
標準の言葉の意味を間違えてる希ガス。
この業界は大多数=標準
デファクトスタンダードって知ってるな。
やっぱり間違えてる・・・
相変わらずスレ違いの多いスレ
誰がなんといおうと今の世界標準は、事実上MS。
どうしようもない。誰がどこで吠えようが、ゆるぎない事実。
社員乙。
意訳:スレ違いだから出ていけ
どんなにひきこもりのマカーが叫ぼうともなんともならん現実。それがMSクオリティ。
結局IEが大好きなんだろ?
Windows XPのGUIデザインは結構好きだな。
microsoft.comはグラデーションに依存しすぎてダサイけど。
上のは釣りだと思うが、
>Windows XPのGUIデザインは結構好きだな
・・・・・・・・・・・・・・マジ?
なわけないじゃんwww
そんなやつ世界にいるはずないおww
恐らく、Vine Linuxのデフォルトテーマと、Windows XPのデフォルトテーマを比べたら
後者の方がGUIデザインに関しては上だろうな。
まあ無償のLinuxがデザインに金かけるわけもないか。
Win 95/98時代のは本当にダサかった。
ボタンもアレだし、ウィンドウバーのグラデーションださださpgr
XPのダサさに比べたら、95/98のが単純な分ずっとマシ。
大体98は覚えてないが、95ってグラデーションまだなってないだろ。
95はグラデーションなってないですね。
そもそもウィンドウバーってなんやねんと
あずきバーの親戚でしょ
どっちかというとスイカバーかと
ソーダバーは2つに割るの失敗すると凹む
割らずに食うのが俺流
片側の棒だけ抜き取るのが俺流
695 :
Name_Not_Found:2006/07/21(金) 11:50:05 ID:2mN6Zys8
tdタグに対する valign="top" と同じ働きをするスタイルは
vertical-align:super でしょうか?
vertical-alignを知ってて何故そこに行く。
top。
superは上付文字と同じ。
俺は上付きな方が好きだなぁ
正常位でやりやすいしさ
小さいと苦労だな
上付きの方がしやすいし女の子も疲れないし一石二鳥。
5分や10分で行っちゃう人にはこの有り難さがわからないと思う。
遅漏は苦労だな
そうだな。
脂汗流しつつピストンするも・・・
702 :
Name_Not_Found:2006/07/21(金) 17:43:20 ID:J9n9EPWL
昨日から小窓の背景画像で悩んでます。
overflow: auto;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: fixed とすると
IE、Firefox共に背景画像が固定されるのですが、Firefoxの背景画像がずれます。
background-attachment: scroll とすると
Firefoxでは背景が固定され、IEではスクロールします。
ずれるというのは、全体の位置での背景となり、
background-position: top としても、
小窓の位置には画像の下部しか表示がされません。
どちらの環境でも任意の場所に背景画像を固定で表示する方法はありますか?
>>702 激しく何かがおかしい悪寒。
ソース出せ。
あと日本語が変だから、現象をもっと詳しく、正しく。
なんでscrollで固定になるんだよ。
ある。
CSSならきっとできる。
705 :
702:2006/07/21(金) 18:48:37 ID:???
>>703 こんな感じです。
div.head {
width: 500px;
}
div.foot {
width: 500px;
height: 50px;
overflow: auto;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
<div class="head">
<p>あ</p>
</div>
<div class="foot">
<p>い</p>
<p>う</p>
<p>え</p>
<p>お</p>
</div>
>>705 background-attachment: fixed; はbodyのみ有効じゃなかったかな。
まさかdiv.footをそれで固定したいとか?
707 :
702:2006/07/21(金) 19:06:30 ID:???
background-attachment: fixed で背景画像を固定すると、
IEではhead部分のtop位置から背景になりますが、
FireFoxでは全体のtop位置からの背景となります。
(FireFoxでは、bg.jpgの上部が切れる)
bg.jpg は 500 x 50 px の大きさです。
私の希望は、IEでもFirefoxでもheadのtop位置から背景をもってきたいです。
どうでしょうか?
708 :
702:2006/07/21(金) 19:07:29 ID:???
>>706 div.foot の背景として固定は無理なのでしょうか?
>div.foot {
width: 500px;
height: 50px;
>bg.jpg は 500 x 50 px の大きさです。
頭使えよ
div内で固定する意味がわからない
711 :
702:2006/07/21(金) 19:25:12 ID:???
>>709 すいません。頭が足りないようです。
>>710 no-repeat ですので、頭が消えてしまう為です。
>>711 ダマされたと思って、fixed消してみって。
713 :
702:2006/07/21(金) 19:34:47 ID:???
すいません。分かりにくいですね。
IEでは、background-attachment: fixed;
Fxでは、background-attachment: scroll;
とすると、bg.jpg が div.headの上部から固定で適用されます。
両ブラウザで div.head の上部から固定で bg.jpg を表示する事は無理なのでしょうか?
714 :
702:2006/07/21(金) 19:36:10 ID:???
>>712 そうなんですよね。
fixedを消すとFirefoxでは希望の位置に背景が適用されます。
しかし、IEではスクロールしてしまいます。
div要素内での背景fixedはあまり考えたことなかったなぁ
またIEか…
719 :
702:2006/07/21(金) 22:05:51 ID:???
変わってませんが、説明が下手でしたね。
無理なようですので、html>等を使い振り分けます。
お騒がせしました。
このタブブラウザ全盛の時代で、小窓って言うんがな
722 :
Name_Not_Found:2006/07/22(土) 15:35:06 ID:NGoDVFHo
で、そのCSSファイルは秘密かい?
725 :
Name_Not_Found:2006/07/22(土) 17:45:07 ID:vo8Pfq1n
文字サイズとかいろいろを外部スタイルシートで読み込んでいるんですが
htmlに<UL>や<OL>で数字番号のリスト作ろうと思ったら
どう指定しても灰色の文字になって番号が・で表示されてしまいます
外部読み込みのタグを消すとちゃんとでます
原因わかりますか?
>>725 その情報だけじゃ書き方間違えてるだけだろ、としか言えない。
<link href="ファイル名" rel="stylesheet" type="text/css">
これがあると正しく表示されず、これを消すとリストが出ます
外部スタイルシート内におかしい部分があるということですか?
>>727 おかしいのはお前さん。
呼び出すファイル名は何て名前?よく考えろ。
あ、いやそこはちゃんとfilename.cssとかにしてます
ごめんなさい。自己解決しました。
恥ずかしくて言えないようなミスしてました。
お騒がせしました。
外部css呼び出しで出来なくて、呼び出さないと出来るって事は、
htmlに直接CSS記述してるか、head内に記述してるって事だろ。
htmlはちゃんと別に用意汁。
734 :
Name_Not_Found:2006/07/22(土) 21:35:19 ID:5wKWa7su
mac IE5.1でテーブル内のテキストにlettter-spacingに1pxと指定したスタイルを付けると
テーブルかはみ出てしまうのでうが、うまくテーブルの中に収まるようにしたいのですが、
すみません、アドバイスいただけないでしょうか?
>>734 まくIEでletter-spacingを指定しないようにする
>>734 mac IEの最終バージョンは5.2なんで、5.1なんて捨てるべき。
加えてサポート終了したブラウザなので、何が起こっても不思議はない。
738 :
734:2006/07/22(土) 22:18:51 ID:???
レスありがとうございます。
当方まだ作業環境がOS9なもんで…
OS Xで見てみます。
INPUTタグの書く設定をCSSに書きたいけどどうしたらいいですか?
maxlengthとかsizeとかなんですが・・・IEのバグでしょうか
sizeは仕方なくwidthで代用してます
sizeはemを使って代用
HTMLに書いても別に誤用ではない
maxlengthはHTMLの範囲
>>737 クラッシックOS用には5.17までしか無い。
742 :
734:2006/07/23(日) 16:36:31 ID:???
>741
はい、そのようです。
OS 9 IEのみlettter-spacingを読み込ませないようにしたいのですが、
@media lettter-spacing 1pxとすればよいのでしょうか?
744 :
734:2006/07/23(日) 17:41:54 ID:???
押忍
/* \*/letter-spacing: 1px;/* */}
としたところ回避できました。
ありがとうございました。
質問です
<head>内でスタイルシートを指定すると<center>タグがずれてしまいます。(IE6)
<style type="text/css"><!--
--></style>
↑<head>内にこれを記入するとずれる。
<link rel="stylesheet"〜〜 は使いたくないのでどうにかしてずれないようにできないでしょうか?
よろしくです。
>>745 lintなんかで、HTMLチェックした方がいいとおも。
centerタグは使うなってことだ
center {
text-align:center
margin:auto
}
てやったらどうかな?
749 :
Name_Not_Found:2006/07/24(月) 21:28:09 ID:WIKlUaO5
初歩的な質問で恐縮なのですが、、
「……」と入力すると、「......」と表示されてしまいます。
「……」を表示するにはどうすればよろしいのでしょうか?
フォントの問題なのでしょうか。CSSのfontに関する部分は以下の通りです。
body, p,td{
font-family:Arial, Helvetica, "MS P明朝", Osaka, gothic, sans-serif ,"Times New Roman"
}
>>749 それは単にフォントの問題。MS P明朝を先頭にすりゃならないだろ。
あ、言い方が悪かったかな。
つまり「......」に見えている部分は、決して半角ドットではなく、三点リーダのままなんだよ。
単にフォントがドットに見えるタイプを、font-familyの指示通りに表示してるだけで。
752 :
749:2006/07/24(月) 21:44:55 ID:???
>>750 >>751 すばやいレス、超ありがとうございましたッ!
おかげさまで解決しました。m(__)m
ねえ、このスレこんなんでいいの?
>>753 じゃあ、どんなんがいいの?
さっさと夏休みの宿題片付けな。
夏厨の相手すんなよ
…ヽ(`Д´)ノ
Div要素にwidthを指定しフロートしました。
ところがIEとFxでボックス全体の横幅(というかwidthの値?)が異なっています。
もちろんborderやpaddingは指定していません。
XHTML1.0でXML宣言ありです(ということはIEは互換モードが動作しているはず)。
どうしたら解決できるでしょうか?
よろしくお願いします。
758 :
757:2006/07/24(月) 22:42:13 ID:Z+UykbCf
2chのIDを表示しておきます。
759 :
757:2006/07/24(月) 22:46:23 ID:Z+UykbCf
あ、でもフロートさせた要素の後続要素にはborder(上下左右1px)とpadding(上下左右5px)が指定されています。
これはいわゆる「ボックスモデルの罠」と関係するのでしょうか?
問題が再現する最小構成のソースを晒すと、すぐ解答がつくかもしれない。
761 :
757:2006/07/24(月) 23:00:21 ID:Z+UykbCf
>>760 <div style="width: 70%; float: left;"> ... CONTENT ... </div>
<div style="border: 1px solid #000; padding: 5px;"> ... CONTENT ... </div>
IEだとフロートさせたDiv要素の後続Div要素の横幅が異常に狭くなる。
もしかしたらIEだとwidthの解釈がおかしいのかな。
762 :
757:2006/07/24(月) 23:03:07 ID:Z+UykbCf
訂正:
<div style="width: 70%; float: left;"> ... CONTENT ... </div>
<div style="border: 1px solid #000; padding: 5px; margin-left: 73%"> ... CONTENT ... </div>
もしかしたらmarginの解釈がおかしいのか・・・?('A`)
質問者って全然テンプレ読んでないのか?
764 :
757:2006/07/24(月) 23:07:18 ID:Z+UykbCf
「本来、ボックスサイズを算出する際にはフロート化された子孫要素は除外されるが、
幅や高さが指定された要素の場合はフロートを除外しない。」
というバグがIEには存在するから、それじゃね?
>764 それしかないべ
>>764 それだとしても、パーセント値は親ボックスの大きさからのパーセンテージにならなきゃおかしいはずだから、
それ以前の問題としてどっか狂ってねーかIE・・・・
769 :
764:2006/07/24(月) 23:34:26 ID:Z+UykbCf
いや、、、冷静に考えたら
>フロートに後続する要素に幅か高さが指定されているとき
ということなので違うっぽい。
もしかしたら
>>765かもね。
今日はもう目が痛いから寝ます。ありがとうございました。
>>770 親ボックスがそのせいで変わってるんだとしたら、可能性あるんじゃね?
WinXP+IE6.0と、Firefox1.5であるページを作っています。
ソースは以下になるのですが、IEで、areaAとareaBの間に隙間が
空いてしまい、困っています。
Firefoxでは問題ありません。
#contents{
float:right;
width:600px;
margin-top:20px;
padding:0;
border-top:1px solid yellow;
}
#contents div.areaA{
top:-20px;
margin:0;
padding:0;
position:relative;
height:0px;
border:1px solid red;
}
#contents div.areaB{
margin:0;
padding:0;
height:200px;
border:1px solid blue;
}
773 :
773:2006/07/25(火) 02:09:10 ID:???
続きです。
<div id="contents">
<div class="areaA">
areaA
</div>
<div class="areaB">
areaB
</div>
</div>
どこを直せばよいのでしょうか。。。?
よろしくお願いします。
朝までになんとかできたら嬉しいです。
>朝までに
・・・・・・・・・・・・・お休みなさい。
おはよー!
早起きだね
質問です。
ブロック要素にmin-heightを適用したいのですが、
IEはmin-heightに対応していないらしいので、heightで代替しようとしたのですが
これだとFirefoxやoperaのほうでブロックの高さが固定されてしまうので
文字サイズを最大にしてページを閲覧したとき、表示崩れが発生していまいました。
(IEではブロックが縦に伸びてくれたのですが、それ以外だと文章がブロックからはみ出してしまった)
heightを指定しないと、今度はIEのほうが表示崩れしてしまいました。
(こちらでは文字サイズが小のときに、ブロックの高さが低くなってしまう)
何か解決方法がありましたら教えて頂けないでしょうか?
778 :
773:2006/07/25(火) 10:13:06 ID:???
朝になってしまいましたが、まだ解決していません。。。
ちょっと前までは「自作自演おつ」というのが一般的だったけど
最近は「自演おつ」というのが一般的になってしまいましたね・・・?
なんで?
784 :
Name_Not_Found:2006/07/25(火) 14:27:40 ID:WlaMDJ9X
こんにちは、CSS/XHTML本読み始めたんですが疑問に思ったんで質問です。
CSSというよりXHTMLなのかもしれませんが、『フレームを使わなくなる』ということは、
皆さんは、今までのトップやサイドのメニュー項目を
各ページ毎に毎回記述していらっしゃるんでしょうか?
定型のコピー&ペーストで労力は少ないのかもしれませんが
ページが増えてきた段階でメニューの変更とかが発生した場合に
更新漏れとかが発生しやすくなるのではないでしょうか?
それとも、CSS/XHTMLにはフレームに代わる
メニュー管理の機能があるのでしょうか?
お忙しいことかとは思われますが、宜しくお願いいたします。
>>784ワタシはIncludeとかjavascriptとかphpとか絡めてわっしょいです。
>>784 サーバサイド技術。
クライアントサイドでもおk。
ていうか、閲覧者って制作者が思うほど
グローバルメニューって必要としてない罠。
閲覧者の為ってより提供する側の為じゃないカニ
790 :
784:2006/07/25(火) 14:44:53 ID:???
>785
おぉ、Include!Includeの存在意義が今明らかになった感じです。
これなら、ファイルの実体は一つでもすべてのファイルから参照つか共有可能!!!!
すげー!あんた天才だぁ!
>786
こりは、サーバ側で自動生成って事でしょうか?多分、javascriptsとかの事を
云われているのでしょうか?こちらはIncludeよりも更に素敵そうな感じです。
>787
これは、知っていますgrep。習いました。コマンドでイロイロ賢くファイルをゲゲってくれる系。
なんか、これと他のコマンドを組み合わせてものすげぇ細かいことを定型化してくれるという。
でも、ちがーっ!何かちがーう感じがします。でも、レスありがとうです。
>788
ですよね。コンテンツがないのにメニューだけ作って
寂しい気分な時って、なんかありますよね。
お二方のおかげで物凄く目的意識がはっきりした気分です。
ありがとうございました。
ちょっと勘違いしているというか、理解できていないなコイツ・・・
ssi使えない鯖だからspeeeedでひたすら置換してるぜ…
メニュー1つ増えるだけで泣ける
793 :
778:2006/07/25(火) 15:43:44 ID:???
773です。
板 or スレ違いなのでしょうか?
どうしても、IEでareaAとareaBをくっつけることができなくて、
困っています。。。
つーか構造根本からおかしくないか?
#contentsでmargin-top:20px;した上に、.areaAで top:-20px; とか、
テキスト入ってるのにheight:0px; してるとか。
>>793 あんたが嫌われてるのは「朝まで」という急かす言葉と、
ソースが意味不明すぎてやりたいことが訳わかめのせい。
Fxと同じ表示にしたいだけなら
#contents{
float:right;
width:600px;
padding:0;
border-top:1px solid yellow;
}
#contents div.areaA{
margin:0;
padding:0;
border:1px solid red;
}
#contents div.areaB{
margin:0;
padding:0;
height:200px;
border:1px solid blue;
}
>>793 とりあえず height: 0 の説明をしてくれ
797 :
778:2006/07/25(火) 19:26:34 ID:???
レスありがとうございます。
気分を害してしまいゴメンなさい。
> #contentsでmargin-top:20px;した上に、.areaAで top:-20px; とか、
> テキスト入ってるのにheight:0px; してるとか。
#contentsにmargin-top:20px;は、本当のソースには入っていません。
ブラウザの上にくっついてしまって見辛いと思い入れました。
div.areaAの記述は、元ソースのままなんです(border以外)。
いじれない大元のcssファイルがあって(#contentsとdiv.areaA部分)、
それに、私がdiv.areaBを足した形になっています。
これから795さんのを試してみます。
取り急ぎお返事まで。
ありがとうございました。
div.areaA部分がいじれないのにどうやって
>>795を試すつもりだろう…
799 :
797:2006/07/25(火) 19:37:39 ID:???
そうでしたね。ダメでした。
#contentsにmargin-top:20pxをいれたために、意味不明のソース
になってしまいましたね。
申し訳ないです。
本当のソースとか私のいじれない部分とか。
アホくさい裏があるんだろ。
>>799 なんかのテンプレだろうけど、
デザインだけアイディアもらって、自分でゼロから書いてごらんよ。
そうすればCSSの勉強にもなる。
802 :
799:2006/07/25(火) 19:50:52 ID:???
いくつかの元になるcssファイルを渡されていて、「こういうページを
作って」「足りないcssは別のファイルに追加していいから」という指示
があって作業していました。
#contentsをいじると、他の大部分に影響が出るので触れないので
すが、div.areaAは別につくっていました。
ゼロから書く時間があればいいのですが、明日の朝納期なんです。
出来もしない仕事は受けない。これ鉄則。
第一に顧客に失礼だ。
>>802 ・・・・なんか言ってることが変わってる気がするんだけど・・・
結局どれをいじっていいんだ?
明日の朝納期は嘘。回答者をせかす行為だ。
>>802 結局div.areaAはいじれるのか、いじれないのか。
いじれるなら
>>795のようにする。
いじれないなら、いじれるファイルに
スターハックかアンスコハックで、heightを1em;で上書きする。
これで駄目ならもうしらん。
807 :
802:2006/07/26(水) 02:26:00 ID:???
レスありがとうございます。
元のソースを省略し過ぎてしまったみたいで、お手間を取らせて
しまい申し訳ありません。
書き直してみました。
#header{
float:right;
width:600px;
height:100px;
margin:0;
padding:0;
border:2px solid green;
}
#contents{
float:right;
width:600px;
margin:0;
padding:0;
border:2px solid black;
}
#contents div.areaA{
top:-25px;
margin:0;
padding:0;
text-align:right;
position:relative;
height:0px;
}
(続く)
808 :
807:2006/07/26(水) 02:26:48 ID:???
(続き)
#contents div.areaB{
background:red;
margin:0;
padding:0;
height:400px;
}
#contents img.tab{
background:red;
margin:0;
padding:0;
height:25px;
width:100px;
}
<body>
<div id="header">header</div>
<div id="contents">
<div class="areaA"><img src="" alt="tabA" class="tab" /></div>
<div class="areaB">areaB</div>
</div>
</body>
(続く)
809 :
808:2006/07/26(水) 02:27:32 ID:???
(これで最後です)
これをブラウザで表示すると、FireFoxでは、「tabA」画像と、その下に
ある「div.areaB」がピッタリくっつくのですが、IEでは、なぜか隙間が空
いてしまいます。
私がいじれるのは#contentsの中だけなので、header部分にtabA画像
を入れることはできません。
div.areaAのtop:-25px;の理由は、#contentsより上にはみ出してtabA
画像を表示させるためです。height:0px;は、取るとFFでもIEのような隙
間ができます。
朝に出す仕事のほうは、ソースを別物にして対応しました。
ですので、仕事上の問題は解決しましたが、後学のために↑の解決方法が
あれば知りたいです。
長文、連続書き込み失礼いたしました。
それで飯食ってんなら、下請けに出せばいいだろが。
>>809 IEの基本的なバグぐらい知っとけよ。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b052.html height: 0 としても、IEではtabAの高さ分、heightが生じる。
今回の場合 height: 25px とした時と同じような状態になってる。
だからpositionで上に25pxずらした分隙間ができる。
解決策は、
アンスコハックかスターハックで
div.areaAのmarginより後に margin-bottom: -25px; を加えるか、
div.areaBのmarginより後に margin-top: -25px; を加える。
これでいけるはず。
駄目だったらしらん。
812 :
809:2006/07/26(水) 04:15:02 ID:???
>811
できました!!!
丁寧な解説、ありがとうございます。
これでスッキリ安心して寝られます。
(まだ終わってないから寝られないけど。。。)
私はひ孫請けぐらいなのですが、上の人もわからないという返事
だったので。
頭の中にアンスコハックはあったのですが、margin-bottomをマイ
ナスするというのがまったく思い浮かびませんでした。
皆さんどうもありがとう。
http://sample99.jugem.jp/ この、JUGEMブログのテンプレのサンプルですが、
記事や右のカラムが表示される部分は、
どのようにして透過させているのでしょうか?
どうやっているのか知ろうとDLした画像を見ても透過されていないようなので、
CSSの {filter: alpha(****)} を使っているのかと思ったのですが、
FirefoxやOperaでもちゃんと透過されるので…。
どなたかご教示いただけませんでしょうか。
(CSSじゃなかったら申し訳ありません。)
>>813 32bitPNGとドット状のGIFをブラウザによって使い分けてる。
java切ったら透過されなくなった。
多分javaScript使ってるんじゃない?
あの…自分は、缶コーヒーを飲むと何故か突然良いアイデアが…!
うーん、逝って来い!
IEも透過pngに対応してくれないものかね。
IE7では対応してる。
821 :
Name_Not_Found:2006/07/26(水) 14:46:31 ID:2JHai8tw
ol要素のli要素をdisplay:inlineして横に並べたいのですが、マーカを生かす(視覚ブラウザで表示させる)方法はないでしょうか。
822 :
Name_Not_Found:2006/07/26(水) 15:08:24 ID:zK0zv/PL
<div>
<p>abc</p>
</div>
div{
height:100px;
display:table-cell;
vertical-align:bottom;
}
とやるとFirefoxでは下寄せになるのですが、WinIE6だとなりません。
BOXの中で下寄せにするにはどうすればいいのでしょうか?
824 :
822:2006/07/26(水) 15:14:24 ID:???
>>823 absoluteだとBOX内でうまい事下寄せに出来ないのですが…。
それとも何か勘違いしているんだろうか。
>>814 そうだったんですか!
私には少し難しそうですが、勉強していきたいと思います。
ご回答ありがとうございます。
>>815 試してくれて、ありがとう。
828 :
821:2006/07/27(木) 14:26:36 ID:???
>823
それも一瞬考えたんですが、番号を振りたいので背景画像にすると個数分の画像と指定が必要になってしまいます。
ということで断念して、ulにテキストで番号打ちに妥協しました。
ありがとうございますした。
>>828 だったらinlineにしないで、width指定でfloat
すみません、どうしてもわからないので質問させてください。
■xhtml(xml宣言あり)
<img src="01.gif" alt="01" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<img src="02.gif" alt="02" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<img src="03.gif" alt="03" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
■css
img {
float: left;
}
h3 {
float: left;
margin: 20px 0 0 0;
}
p {
clear: both;
margin: 0;
}
画像1 h3○○○
p○○○○○○○○○○○○○○○○○○○○
画像2 h3○○○
p○○○○○○○○○○○○○○○○○○○○
画像3 h3○○○
p○○○○○○○○○○○○○○○○○○○○
831 :
830:2006/07/27(木) 16:58:16 ID:???
↑と表示したいんですが、上のソースでIEだと、
画像1 h3○○○
←【ここだけ隙間ができます。】
p○○○○○○○○○○○○○○○○○○○○
画像2 h3○○○
p○○○○○○○○○○○○○○○○○○○○
画像3 h3○○○
p○○○○○○○○○○○○○○○○○○○○
何か解決方法ないでしょうか?(画像をCSSでh3の背景にするってのは無しで)
よろしくお願いします。
>>831 body {
margin: 0;
}
足したら直ったよ
>>831 あんたのその部分だけコピペしても、再現しない。
>>832 そんなのしなくてもならないんだが・・・どういう環境?
835 :
830:2006/07/27(木) 17:41:27 ID:???
>>832 確かに直りますね。実際のcssには、*{margin:0;} 指定してるんですけどね。
何が原因なんでしょう?
>>833,834
xhtml1.0Strict(xml宣言あり)です。IE6でそうなります。
FireFoxでは隙間はできません。
836 :
830:2006/07/27(木) 17:46:34 ID:???
試しに実際のcssで、bodyにmargin:0指定しましたが、直りませんでした・・・
837 :
830:2006/07/27(木) 17:56:09 ID:???
一応html丸ごとはります。CSSは上で全部。これで再現します。
>>832の bodyにmargin0でこの場合は解決ですが、原因がわかりません。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="content-style-Type" content="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" media="all" />
<title>○○○○</title>
</head>
<body>
<img src="01.gif" alt="01" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<img src="02.gif" alt="02" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
<img src="03.gif" alt="03" width="60" height="60" />
<h3>○○○○</h3>
<p>○○○○○○○○○○○○○○○○○○○○</p>
</body>
</html>
839 :
Name_Not_Found:2006/07/27(木) 18:17:05 ID:/YXUpoFq
main>li.on{
xxxxxxxxxx
}
この">"はどういう意味があるんでしょうか?
840 :
830:2006/07/27(木) 18:36:59 ID:???
>>835 ほんとですねー。ありがとうございます。
しかし、本チャンのcssでfloat消したら回りこまなくなっちゃいました。
隙間が開く理屈がわかればありがたいんですけど、
出直してきたほうがいいでしょうか?
841 :
830:2006/07/27(木) 18:44:33 ID:???
↑↑↑
×835
○838
ごめんなさい
小出しには答えないことにしている。
844 :
839:2006/07/27(木) 23:21:03 ID:???
845 :
Name_Not_Found:2006/07/28(金) 00:19:33 ID:LfIs1Z4B
あるサイトのCSSを解読してるんですが
/*\*/
.menuList li a {
overflow: hidden;
}
/**/
この /*\*/と/**/の部分が何を意味するのか分からないんですが
教えてもらえないでしょうか?
846 :
Name_Not_Found:2006/07/28(金) 00:21:26 ID:LfIs1Z4B
↑
訂正
/*¥*/と/**/です
ハック
最近、「スタイルシート上級レイアウト」と言う本を買ったが
ほんとスタイルシートに対する認識が一皮向けたわ・・・・・・・・・
すげえなスタイルシート。
あれ、Beの仕様が変わったでござるか?
>>848 上級じゃなかったよあれ
買って少し失敗した
セオリーオブスタイルシートの方が絶対おすすめ
ここ質問スレなんですけど
売れないからって必死に宣伝するなよ。
セオリーオブスタイルシートも買ってくる。
上級はどこが駄目なの?
素人なのでよくわからないんだけど。
>>853 期待しすぎたっていうのもあるかも
上級というよりは、これから中級から上級へすすむ人の間くらいって感じ
比較的、正しいことを書いてあるけど、
別にこれなら、教科書的な本やレイアウト本で足りるかな、って思った
もうちょっとレイアウト的なことを期待していたっていうのもあるんだけどね
CSSの基礎本と一緒に買うといいかも
セオリーオブスタイルシートは、近くにあるなら中身みてから決めたほうがいいよ
でもきっちりと覚えたいんなら絶対おすすめ
注釈や略語が多くて、気になって読みにくい部分もちょっとあるかな
マスターすれば、自由自在にレイアウトできるようになると思う(ブラウザのバグ除く)
(X)HTMLとCSS本+レイアウト本などと合わせて買うといいかも
お好きなように。
青いボックスの幅を100%にしてmargin-leftで-210px
ではだめなのですか?
表示が崩れるのですが。
ダメだから表示が崩れるのではないでしょうか。
>>5や、2カラムでググって基本を勉強しなおしましょう。
>>860 ウィ−ムッシュ。
1からやり直します、
ありがとうございました。
>>861 それが・・・・・・・・表示方法がおかしくなるんですよね。
とりあえず、width値をすべてpx固定にしてコンテンツ作ります。
おかしいのはお前の頭だ
スイマセン 教えてください。
<dt><dd>の表示方法についてです。
<dt>○○</dt>
<dd>■■■</dd>
このようにするとIE標準だと
○○
■■■
となりますが、これを
○○ ■■■
とするには<dt><dd>のどちらにどのようなプロパティを付けたらよろしいでしょうか?
また、
○○…■■■
のように特定の文字(この場合三点リーダ)を付けることはできますか?
私にはlist-style-imageで図形にする方法しかわかりませんでした。
よろしくお願いいたします。
>>864 ・・・・・・・・・・・・・全部書けってか?
dt { width : 3em; float : left; clear : left; }
dd { margin-left : 3em; }
三点リーダはIEを考えないなら(IE7でさえ対応してないから)
dd:before { content : "…"; }
IEも対応させたいならJSを使うか、三点リーダの背景画像を使うか。
>>865 お手間取らせてスイマセン。
ありがとうございます。
早速やってみます。
本当にありがとうございました。
>>867 ソース丸コピすれば当然。違うならソース出せ。
>>868 下記のようなソースです。floatではなく、positionで組みたいのです…。
200x200のoutに正方形になるように4つのdivを入れたいのですが、下に200pxの余白ができてしまいます。
HTML
<div id="out">
<div id="a">a</div><div id="b">b</div><div id="c">c</div><div id="d">d</div>
</div>
CSS
#out {width:200px;height:200px;background:red;}
#a {width:100px;height:100px;background:blue;}
#b {width:100px;height:100px;background:green;position:relative;top:-100px;left:100px;}
#c {width:100px;height:100px;background:yellow;position:relative;top:-100px}
#d {width:100px;height:100px;background:purple;position:relative;top:-200px;left:100px;}
relativeじゃなく、absoluteな。
>>869 relativeの仕様を読み返せ・・・
>>869 FireFox、Operaでは余白など出来なかった。IEは知らん。
でもそういうレイアウトなら、#outにrelativeして、
中のdivはabsoluteの方が正解な気がするが。
>>847 >>855 ありがとうございました。
Mac IEで読み込ませない為の書き方みたいですね。
ファックファックファックファックって、おまえはクラウザーII世か!
>>875 だまれ!メス豚!
クラウザー様に謝れ!
レイプレイプレイプレイプレイプレイプレイプレイプレイプレイプ
878 :
Name_Not_Found:2006/07/29(土) 20:52:43 ID:DOTRUzFq
880 :
Name_Not_Found:2006/07/30(日) 11:50:57 ID:8VditCYQ
すいません
画像を左において右に文章を回りこませる align="left"
に相当するCSSはどう書けばいいでしょうか?
<img src="" style="text-align:left;">
では駄目なようです・・・おねがいします。
881 :
880 :2006/07/30(日) 11:55:19 ID:???
すいません自己解決しました
float:left;で・・・
882 :
878:2006/07/30(日) 15:09:51 ID:???
>>879 BODY, TH, TD { font-size: 11pt; }"!important"
としても変わりませんでした
tと;の間に
>>882 body, th, td { font-size: 11pt ! important;}
885 :
878:2006/07/30(日) 15:47:17 ID:???
background-imageで表示させた画像に
リンクはる方法教えてください・・。
あと、画像の特定の場所にリンクをはるmapはCSSで設定した画像じゃ無理ですかね?
↑
見栄えの分離の意味が分かっていないやつ。
888 :
Name_Not_Found:2006/07/30(日) 19:08:35 ID:bBpxBvrO
すみません、お願いします。
a:active, a:hover {
background-color: #000;
}
#x a:active, a:hover {
background-color: transparent;
}
としたいのですが、transparent がIE6で反映できません。
バックに画像があるのですかしたいのですが
どうすればいいでしょうか? お願いします。
>>888 #x a:active, a:hoverじゃなくて#x a:active, #x a:hover
>>887 ってことは、CSSで貼り付けた画像はリンク不可能なの?
そんな事はないのよね・・。
助言お願いします。
>889
解決しました。ありがとうございます!
>>890 根本的な考え方が違う。
リンクを貼る必要があるような意味のある画像なら、
CSSでやらずHTMLで指定してあげるべき。
よく考えてみるといいよ。
CSSを扱えないブラウザを使用してる場合や、OFFにしてる場合はどうする?
もちろん画像をOFFにしてる場合の代替処置も指定してあげてね。
なるほど、分かりました。
ありがとうございます。
なあ、
>・・。
これにものすごーく見覚えがあるんだが、
相手しない方がいいんじゃないか?
??
>>894 俺も回答する時頭によぎったけど、このスレに出て来た事が殆どないし、
ここでその事を話題に出すと、引き寄せる事になりかねないから
触れずに回答しといた。
それに1レスで終わればある意味一番口を出しにくい訳だし。
って訳でこの辺で話題終了しとこうぜ。
>>897 参考にしようがしまいが、アンタはどういうソース書いたわけ?
まちがってませんよ。
#main {
float: left;
width: 70%;
}
#menu {
margin-left: 73%;
}
テキストがボックスの中で常に下揃えになるようにしたいんですが、
うまくいきません。
<br>で改行したら、下は定位置のままで上に行くような感じを求めてるんですが…。
試してみたのは以下のようなものです
div{
width: 500px;
height: 100px;
vertical-align: bottom;
}
どなたかアドバイスなどよろしくおねがいします
><br>で改行したら、下は定位置のままで上に行くような感じ
?????
たしかにわかりにくかったですね。
下の例で言うと(A)の状態から<br>を入れて改行すると
普通は(B)の状態(一行目の下に行が追加)になりますけど
(C)の状態(テキスト全体が上にあがる)にしたいということです。
つまりテーブルなどで<td valign="bottom">にした場合と同じように、という。
(A)
ロイター通信は31日、
----------------------------------- ←初期下部位置
(B)
ロイター通信は31日、
----------------------------------- ←初期下部位置
空爆の情報を否定した。
(C)
ロイター通信は31日、
空爆の情報を否定した。
----------------------------------- ←初期下部位置
前にも同じ質問があったような…
テンプレ読んでないのかなあ・・・
夏ですから・・・
ヒント:Q6を応用
Q6に書かれてたサイト見たんですが、途中でけんかになってたり
ややこしくてよく理解できませんでした
なので野生の勘で下記のように書いたのですが、うまくいきません難攻不落です
どなたかもうちょっとヒントというか答え…などを教えていただけたら、、、
div{
display: table-cell;
vertical-align:bottom;
text-align:bottom;
}
すげえ亀レス
今日は、俺の誕生日です。
ボックス要素を縦に三つ、画面ぴったり並べたいんだけど縦幅が長すぎて画面からはみ出してスクロールしてしまうよ。
ボックスの名前を上からA,B,Cとして、AとCはピクセル値で縦幅が決まってる。
Aは画面の上にぴったり。Cは画面の下にぴったりつけて、真ん中のAとCの間にぴったりBを配置したい。
cはabsoluteで画面下に引っ付けてみたりしたんだけど、bの縦幅が長すぎて画面と一緒にスクロールしてしまうよ。
(´・ω・`)
HTMLソース
<html><head><title>test</title></head>
<body>
<div class="a">ここはA</div>
<div class="b">ここはB</div>
<div class="c">ここはC</div>
</body>
</html>
CSS
html, body {height: 100%;
margin: 0px;}
.a {width: 870px;
height: 60px;}
.b {width: 870px;
height: 100%; ←ここがネック?
margin-bottom: 15px;}
.c {position: absolute;
bottom: 0px;
width: 870px;
height: 15px;}
そこがネック。
何の目的でぴったりさせたいのか知らんが、
.bに高さ指定しなくてもいいんじゃねーの?
<html><head><title>test</title></head>
<body>
<table>
<tr>
<td>ここはA</td>
<td>ここはB</td>
<td>ここはC</td>
</tr>
</table>
</body>
</html>
tableだとしてもheight属性って独自拡張で保証がない件
エロイも何も、そういう擬似フレームテンプレはあちこちにあるんだけどな。
923 :
916:2006/08/01(火) 15:08:41 ID:???
>>921 サンクス、box-sizingなんてあったのね。
↓にしたらIEとfirefoxできちんと表示できたよ。
ただ、box-sizingってcss3で削除されてるみたいだね
.a {position: absolute;
top: 0px;
z-index: 2;
width: 870px;
height: 60px;}
.b {border-style: solid;
border-top-width: 60px;
border-bottom-width: 15px;
border-left-width: 0;
border-right-width: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
overflow: auto;
z-index: 1;
width: 870px;
height: 100%}
.c {position: absolute;
bottom: 0px;
z-index: 3;
width: 870px;
height: 15px;}
>>922 IEだけとかだとそうでもないんだけど、両方に対応しようとすると結構面倒だったりする。
↑
927 :
916:2006/08/01(火) 17:14:49 ID:???
>>926 box-sizingは問題なかったんだね、サンクス。
問題なのは-moz-box-sizingの方か
何で独自拡張でしか対応してないんだyp
-moz系は先行実装の隠しみたいなものだからね。
あくまで裏技程度に考えておくとよろし。
質問させて下さい。
#box { width:400px; height:300px; padding:50px;}
例えば上の様なCSSを読ませると、IEとFireFoxでは解釈の仕方から幅等に1.3倍くらいの差が出てしまいます。
幅高さpx指定のboxを扱う際、ベテランの方はどのようにCSSを指定されておられますか?
・ハックしてIE用のwidth指定をする
この場合はこんな感じかな…?(#box {width:300px; height:300px; padding:50px; _width:400px;})
・#boxにはpaddingを指定せず、内部のタグのCSSにmarginを指定する
思いつく限り2つなのですが、どの方法が正しいのでしょうか?
またはこれ以外のやり方等ありますでしょうか?
>>930 特に理由がなければ標準準拠モードにする
>>930 俺は面倒だから入れ子dev作って、
そこにwidthとかは指定せずpadding指定する。
デザインのためにHTMLをいじるのはNG
後方互換モード⇔標準モード
>>936 なんで*標準モードで*ハックが必要なん?
>>938 後方互換≠後方互換モード
IE5.5以前対策
そんな古いのはすっぴんの刑
>>931-939 レス有難うございます。アドバイスのお陰で改善できました。
CSSというよりHTMLの方のようでしたね…。すいません。
そもそも自分の環境下でのズレの原因はXML宣言でした。
>>941 や、それは入れといた方がいいから・・・
だったらハックか先行実装の方で対処しといたほうがいいよ
>>942 の、ようですね…。
宣言を消せば直ぐに表示だけは正常になりましたが、それではイカンという事で
phpを使ってIE以外のみにxml宣言を書き出すようにして対処しました・・・。
XML宣言のバグは厄介だよねぇ。
>>935 それは時と場合にもよるな。
俺は手間とか管理のしやすさが上回るなら有りだと思う。
潔癖になればいいって物でもないし。
>>944 おまえは単にデザインに対して潔癖なだけ
CSSハックで何とかなるものならHTMLをいじる必要はない罠。
でもならないところはHTMLをいじりたい罠。
諦めるか。
諦めろ
>>945 基本的に、デザイナーはデザインに関しては譲らないね。
ミリ単位の調整とかざらだし、そういうレベルで少しでも良くしたがるから。
デザインを実現するのにHTMLを極力弄らない事も、
手間をかければある程度可能だし、それは両立しうる。
だけど現実的に考えて、手間とかの面で抜くのはHTML部分になるだろうな。
どうせソース見る人なんかわずかだし、
div入れ子がちょっとだけ(大量じゃないぞ)増えてた程度じゃ何の影響もないから。
すみませんググってみたりしたんですが見つからないので教えてください。
ロールオーバーをcssで作る時、普通はhtmlはテキストのリンクにして
cssで通常時の背景を指定、a:hoverでhover時の背景画像を〜
って方法が一般的だと思うのですが、
画像をhtmlでimgで貼り付けてる場合はどうすればいいでしょうか?
>>948 こんなスレにプロが来てるんだったらこのラベルはねーだろ。
もし来てるんだったらデザイン拘る前にラベル上げろよと。
>>949 上に別の絶対配置で隠してたimgを乗せる。
でもCSSだけでやるには恐ろしく手間が掛かるしHTMLが汚いし、
それやりたいんだったらDHTMLでやった方がいいと思うが。
ていうかミリ単位でのデザインを考える人間はDTPにこもってろよ。
Webデザイナに絶対向いてないって…
デザイナはわかってても客がバカだと非常に困る。
PDF渡してやれ
どうせ訳わかってないデザイナーに扱き使われてるスキルのないコーダーだろう、そう苛めてやるな。
煽りが必死だなぁ
935が煽り?
質問です。
ボックスの高さがページいっぱい100%のページを作りたいのですが、100%になりません。
テンプレにあったサイトを見て同じように試してみましたが変わりません。
以下ソース
CSS:
* { margin:0px; padding:0px; }
html,body { height: 100%; }
#layout_body { width: 750px; height: 100%; margin: 0; }
#header { width:100%; }
#main { width:100%; }
#footer { clear: both; width: 100%; height: 15px; }
HTML:
<div id="layout_body">
<div id="header">・・・</div>
<div id="main">・・・</div>
<div id="footer">・・・</div>
</div>
mainに入る内容によって伸びるようにしたいので、footerを絶対配置にはしたくないです。
でもページの下部分の余白はなくしたいので、高さを100%にする方法を探しているのですが、参考サイトのどのソースでも100%になりません。
IE7を使っていますが、IE以外(Firefox,Opera)でも同じように高さが100%になりません。
説明下手で申し訳ないですが、ご指導ください。
959 :
957:2006/08/02(水) 16:43:50 ID:???
>>958 ありがとうございます。
それも試してみました。でも変わらないです・・・。
まずそのままコピったのを試せ。
それで動かないならおまえのPCがおかしい。
それなら動くってのなら、おまえが単に間違えてるだけ。
>>959 >>958の内容で、main部分にheight: 100%入れればいいんじゃねーの。と適当に言ってみる。
本当に適当だなwww
すいません、positionのbottom、rightについて質問です
下記のようにコードを書いたんですが、
なぜかWin版IE6でだけ「ここも背景が赤のはず」というのが
思ったように表示されずボックスから飛び出てしまいます。
これを直そうとしたらどのようにするのがよいのでしょうか、
よろしくおねがいします。
.BlueBox{
background-color:#0000ff;
width: 500px;
}
.RedBox{
background-color:#ff0000;
position:relative;
}
.RedBox .RedBox_in{
position: absolute;
bottom: 0px;
right:0px;
}
<div class="BlueBox">
ここは背景が青
<div class="RedBox">
ここは背景が赤
<div class="RedBox_in">ここも背景が赤のはず</div>
</div>
ここは背景が青
</div>
>>964 よく見てないが、.RedBox .RedBox_inの時点で
上で設定した.RedBoxのpositionが上書きされることは納得済みなんだな?
966 :
Name_Not_Found:2006/08/03(木) 10:32:01 ID:W64kODAF
<style>
<!--
TD{ font-size: 10pt; }
A{ font-size:10pt; font-weight: bold; color : #660000;}
B{ font-size:10pt; }
-->
</style>
この記述でAタグやBタグはフォントが小さくなるのですがTDタグだけ適用されません。
どこかおかしいでしょうか?
967 :
964:2006/08/03(木) 10:36:39 ID:???
とりあえず.RedBox .RedBox_inを
ただの.RedBox_inにしてみましたが効果ありませんでした
Win版のIE6ではpositionのbottomの挙動がおかしいってことなのですかね
ちょっと原因不明です
968 :
Name_Not_Found:2006/08/03(木) 11:26:51 ID:cQl6cz3m
<div id=content>
<h1>PageTitle</h1>
<div id=sideBox><h2>hogehoge</h2></div>
<div id=mainCol><h2>hogehoge</h2></div>
<div id=footer></div>
</div>
#content { width: 800px; }
#sideBox { width: 200px; padding-left: 50px; float: left; }
#mainCol { margin-left: 309px; }
#footer { clear: both; }
で2段組をしたいんですが、#sideBoxのh2要素の上下にわけのわからん隙間ができて頭が揃いません。
[ <h1>Pagetitle ]
<h2>
<h2>
[ footer ]
と、こんな感じになります。
段組部分の頭をそろえるにはどうしたらいいか教えてください。
Firefox基準で作っています。
969 :
968:2006/08/03(木) 11:28:17 ID:cQl6cz3m
[ <h1>Pagetitle ]
<h2>
<h2>
[ footer ]
ぎゃくでした。こうなります。
970 :
957:2006/08/03(木) 11:37:51 ID:???
>>958 原因がわかりました。
IE以外のブラウザでもレイアウトがセンターにくるように
<body>直後に<div align="center">を入れたのがダメだったようです。
おさがわせしました・・・。
IE以外のブラウザだとbody { text-align: center;}にしてもレイアウトのセンタリングをしてくれないんですね・・。
センタリングする方法って既出ですか?
散々既出。
IEの動作の方がおかしいだけ、
標準モードでmarginの左右をautoが定石
972 :
957:2006/08/03(木) 11:41:46 ID:???
連カキすみません。
過去レス見て自己解決しました。ド素人がスレを乱してしまいごめんなさいです。
親切にありがとうございました。
974 :
957:2006/08/03(木) 11:43:25 ID:???
>>968 * {
margin:0px;padding:0px;
}
これを入れたらならなかった。検証はしてない。
あとHTMLで作ってるならid値は大文字で、
XHTMLだとしたらid値はダブルクォーテーションで囲むこと。
質問です。
私も左右をfloatで分けた構築を行っているのですが。。
<div id="wrap">
<div id="left">左要素</div>
<div id="right">右要素</div>
<div id=foot>下部</div>
</div>
#wrap { width: 800px; }
#left { float: left; width: 545px; }
#right { float: right; width: 200px }
#foot { clear: both; margin 5px 0; padding: 0px }
といったソースで、各部分に5pxの余白をあけたいのですが
IE6とOpera8では、フッタにトップマージン5pxが確保されるのですが
ネスケ7.1とFirefoxだと5pxのマージンが確保されません。
対処法ってあるのでしょうか。
後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
>>976 ・・・・IEでもマージン確保されませんが・・・・
978 :
976:2006/08/03(木) 13:16:28 ID:???
不備があったので申し訳ありません
> <div id=foot>下部</div>
<div id="foot">下部</div>
>>975 のレスを見て記入ミスに気づきました。
> 後、IE6だとfootをpadding: 0pxにしても余白があったりします。。
ここで示す余白はfoot内部のことを示してます。
紛らわしい文章でした。
979 :
976:2006/08/03(木) 13:18:40 ID:???
>>977 再度申し訳ないです
IEでも確保されないのは私の記述ミスで
#foot { clear: both; margin 5px 0; padding: 0px }
marginに:がぬけてました。
>>979 それは恐らくマージンが取られない動作の方が正しい。
#leftにしろ#rightにしろfloatで浮動されてるから。
だからそれのどちらか長くなるほうのmargin-bottomに5pxを入れればおk。
>HTMLで作ってるならid値は大文字で
そうなの?
俺様ルールかよw
>>983 理解できなかったのなら仕方ないけど、
意味なく煽るのはやめとけ。
985 :
976:2006/08/03(木) 14:05:13 ID:???
>>980 ありがとうございました。
マージン取られるほうがおかしいのですね。
bodyのクラスについて質問があります
スタイルシートを外部ファイルに設定して、
bodyをクラスで分けたんですがどうもネスケ(7.1)だと2番目のbodyが完全に無視されます。
外部css
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とやった場合
body.rightのスタイルシートは完全に無視されます。
しかもどうもbodyだけでtableやtdなどはクラスにわけても表示されるんです。
bodyスタイルは1個しか設定できないのでしょうか?
だとしたとしても何故2番目のスタイルシートのみに反応するのかさっぱりわからなくて
困ってます、どなたかわかりませんか?
補足です
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
を
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
とやった場合leftが表示されてrightが表示されません
989 :
Name_Not_Found:2006/08/03(木) 17:39:01 ID:W64kODAF
>>973 ありがとうございました。感嘆符のことで解決しました。
この掲示板上で半角全角を見抜くなんてあなたはデバックの天才です!
ありがとう!
>>988 そんなことはない。
何かを間違えてるだけだと思われ。
>>990 では私のパソコンがダメなんでしょうか…
実際
body.left{
background-color: #0000FF;
color: #FFFF00;
}
body.right{
background-color: #FFFF00;
color: #0000FF;
}
とした場合rightは表示されてleftは表示されないんです。
そして
body.right{
background-color: #FFFF00;
color: #0000FF;
}
body.left{
background-color: #0000FF;
color: #FFFF00;
}
と逆にした場合leftが表示されrightが表示されないんです。
どのページも全く一緒でコピペしてクラスを変えてもやっぱり
2番目のクラスだけ反応してくれないんです。
IEではちゃんと表示されるんですが、ネスケでは表示されません。
ページをアップした方が良いですかね・・・
なんでソース出さないの?
>>993 外部cssに
<style type="text/css">
<!--
-->
</STYLE>
は必要ないぞ
>>994さん
表示されました!
ありがとうございます!
1001 :
1001:
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。