/* CSS・スタイルシート質問スレッド【55th】*/
11 :
1:2006/04/08(土) 23:13:14 ID:???
strictで、operaかfxを基準で作っていく。
こうすれば後々、楽になるぞ。まじで
>>12 子供セレクタ・隣接兄弟セレクタ・属性セレクタは使用しないこと、
との但し書きが要るがね。
セレクタマッチングを使わないと、大したことできないけどな。
修飾のためにclass追加もあれだしな。
IE用にはフィルタやスクロールバーの別の意味で派手ちゃちな別CSS作った方が楽。
子孫セレクタとclass・IDがあれば大抵足りるがね。いくらIEだってね。
ハイ次の方、質問どうぞ。
classとid依存のCSSに頼ってるなよ
※ 議論はよそで ※
ハイ次の方、質問どうぞ。
一番始めにツッコミ始めた13が何を言ってるんだかw
>>19 パソコンにインストールされてないフォントでは表示されっこないし、
そのリンク先に挙げられたフォントでもデフォルトでは入ってないものがある。
現に、そのページを開くと、書体が同じに表示されてるものがある。
一般フォント名を指定しておき、あとは駄目もとで期待しないこと。
classとIDって本来可能な限りつけておく方がいいと思う。
>>19 そう。個人のPCに入ってるフォントに依存なので、
OSにデフォルトで入ってるフォントを規準にするのがお勧め。
だから平成明朝とか平成ゴシックは無理だと思う。
日本語だと、WinはMSゴシックや明朝、MacはOsakaやヒラギノ辺りかな。
それ以外の日本語フォントは期待しない方がいい。
英語は違い忘れちゃったけど、こっちもあまり期待しない方が良かった気がする。
>>19 あと補足。
どうしてもフォントを使いたかったら画像にしてしまうといいかも。
PNGで保存して背景を透過しておけば結構使えたりするし。
ありがとうございます。
なるほど。
折角みつけたサイトなのに残念です。。。
デフォルトで入ってるfont一覧をサンプル付きで、載せてるサイトは知りませんでしょうか?
おお。
ありがとうございます!
これからはこの一覧の中にあるフォントだけ使っていこうと思います。
本当にありがとうございました。
OSごとに使えるフォントが違うからちゃんと設定してあげてね。
Win用にMSPゴシック、Mac用にヒラギノとかって感じで。
無きゃ無いでデフォルトフォント使ってくれるからまあ気にしなくても良いだろうけど。
はい。わかりました。総称ファミリも忘れず入れるようにします。
ありがとうございました
29 :
Name_Not_Found:2006/04/09(日) 08:45:37 ID:6HtkBhjP
divとcssだけ使ってれば良いってもんじゃないですよね
最近そういうWEBサイトが多いんで・・・
エラーと警告満載で見難いったらありゃしない
素直にtableタグ使ってりゃいいのにと思いますよ
divとcssだけっていう表現がいまいち分からんが、
TABLE使うべきときに意味不明にDIVやらDLやらで入れ子しまくりなページはあるな
tableは新しくtable作っていくのと
1つのtableを多くセル分割するのとではどっちが負荷少ないの?
>無頼座
何の誤字だ?
ブラウニー
ブラウザか!
質問下手ですみませんが質問です。
ブロック要素の背景画像のみを表示したい、という場合なのですが、
つまり、その要素内のテキストを表示したくない場合。
具体的には、hnタグ内をimgタグじゃなくてhnの背景画像にするときなのですが、
例えば、そのテキストの、<a>タグを「display:block」して、
「text-indent: -9999px; position:absolute; overflow: hidden;」みたいにするやり方は、
ありなのでしょうか?
仕様書的に、という意味で。
>>36 ふりだが、position:absoluteはいらなくね?
Divの背景にするのとhnの背景にするのって
どう違うの?
>>39 DIVは単体では意味を付与できない要素、hnは見出し要素。
だから意味に合わせて適切にマークアップするべき。
CSSの問題じゃなくてHTMLの問題。
>>39 hnだけならdivで囲む必要ないでしょ。
ありがとう
Firefox 1.0.7 です。
overflow : visible のブロック内で、
ブラウザ装備の文字調節で文字を大きくしていった時、
background-image がリピートされないんだけど、
これはバグ?
IE 6 はリピートされます。
overflow : scroll みたいなことはしたくないです。
44 :
36:2006/04/09(日) 16:33:21 ID:???
レスありがとう。
>>43 それはつまりボックス(ブロック)自体が大きくなっていればIE6が糞で
大きくなっていなければFxのバグということになる。
>>5 を参考に段組しています。 floatで左固定メニュー、右領域可変です。
この場合右領域は、内容量やブラウザのリサイズによって、縦方向に
伸びていきますが、この縦の伸縮に左領域も同様に追従させることは出来るでしょうか?
前スレ誰かうめてくれ。
スレ立てるの早すぎなんだよ
>>48 できません。
しかしそんな風に見せかけることはできます。
親要素の背景色などで工夫して下さい。
51 :
48:2006/04/09(日) 21:27:39 ID:???
本当にわかったのかね。
いやわかるだろ
>>前スレ993
一番大きいセルに対してwhite-space : pre;
何でwhite-space?
56 :
48:2006/04/09(日) 22:04:29 ID:???
>>52 へぃ。今回は親に背景色だと右が短い場合に不格好になるケースだった為、
親に縦リピート背景画像を入れて、見た目対応しました。
試してから言えよおまいら
>>59 ……?
993 :Name_Not_Found:2006/04/09(日) 21:28:59 ID:???
テーブルの各セルの横幅を一番大きいセルのものに合わせる方法はありますか?
white-space:nowrap;ならまだしも、なんでpreか?
noerapとpreの動作位知っとけよ。
noerapは知らない。
一体、何がしたくて(nowrapでなく)preなんだか。
>>61
誤字。
>>63 XHTML1.1なら大抵nowrapよりpre。察しろ。
何だか雲行きがあやしくなってきたな
察しろとか言ってるのは大抵、説明できなくなってきた場合だからね。
だめだこりゃ。
過去ログも読まないやつら
>>65 >XHTML1.1なら
前スレ993が、XHTML1.1だとでも? そんなのはごく少数派でしょ。
スペースで調整しろってこと?
だからおまいら試してから言えよ
behaviorに関しての詳しい説明をしているサイトがあったら教えてください。
74 :
Name_Not_Found:2006/04/10(月) 00:09:02 ID:n45vy6WG
TOPページによくある、項目の画像などにマウスを乗せると、一覧が下に向けて、ズラッと出てくるやつありますよね?
それを、JavaScriptを使わずに、CSSで実現可能ですか?
可能ですよ
76 :
Name_Not_Found:2006/04/10(月) 00:12:57 ID:n45vy6WG
78 :
Name_Not_Found:2006/04/10(月) 00:14:30 ID:n45vy6WG
>>77 a:hoverをつかって、どの様にすれば、一覧が出てくるようになりますか?
>>78 a:hover { display:brock; }
81 :
Name_Not_Found:2006/04/10(月) 00:24:12 ID:n45vy6WG
>>79 a:hover { display:brock; }で、どの様に、位置を決めて、一覧を出すようにして、表示させることが出来るのですか?
>>80 JSを一切使わないようにして作りたいのですが、不可能ですか?
IE、Mozilla系ブラウザで、見れるようにしたいです。
>>81 だからIEは現状では無理だと言っている。
証明してください><
>>81 a:hover {
display: block;
text-indent: -99999px;
overflow: hidenn;
position: absolute;
top: 0;
left: 0;
}
何も知らないなら最初からそう言えよ
>>83 WinIEがa要素以外への:hover擬似要素をサポートしていないから。
困ったことがあります。
backgroundなどのurl指定で画像を指定した場合、
ブラウザによって、相対URLの解釈が違うようなのです。
IEは、cssの置いてある場所が基準、
Mozilla(FireFox)は、htmlのおいてある場所が基準となっているようです。
例えば、
・hoge.html
・my/hoge.css
・my/image/moge.jpg
というファイルがあり、
my/hoge.cssには、
background: url(image/moge.jpg);
と書いてある場合、
IEだと表示されるのですが、FireFoxだと表示されません。
IEとMozillaと両方で同じように見えるようにするには、どうしたらよいですか?
検索しても上手く見つけられなかったため、質問させていただきました。
88 :
87:2006/04/10(月) 00:53:58 ID:???
あれ?FireFoxでも表示されました。
気のせいだったようです・・・
89 :
83:2006/04/10(月) 01:31:23 ID:n45vy6WG
>>86 div要素で、a要素を囲って、cssで、要素(id等)をクロスさせると、さてどうなるでしょう?(*゚∀゚)ゞ
出来たかもw(似たような物が出来そう。)
もう少し詳しく(理由が整い次第)、出来たら、ソースうpします。
>>89 理解できていないようだが、a要素はインライン要素だ。
項目はリストでマークアップされないといけない以上、
aの下にブロック要素であるリストを配置することはできない。
それをするには上位のa要素をブロック要素に置き換えるしかないが、
そうするとIEは:hover擬似要素を適用してくれない。
不思議マークアップでやりたいんなら消えろ。
HTML 仕様に準拠する形でやるならどうしても兄弟セレクタが欲しくなるな。
cssのリストを利用した左サイドのメニュー。
サブメニューの作り方なのですが、
1)リストの入れ子をしてサブメニュー表示
2)classを利用してリストの入れ子をしているようなサブメニュー
どちらの方が正しいのでしょうか?
<説明が下手ですみません>
ホームページカーソルに関してご意見をお聞きしたいです。
<Style Type="text/css">
<!-- Body{cursor:url(ファイル名.ico),auto;} -->
</Style>
とすれば,カーソルを変更できますよね?
多くのタグ解説サイト様にはicoファイルはカーソルに出来る,
とは書いていないのですが,実際出来ます。
ほんの少しですがicoファイルでカーソルを解説してるサイト様もあります。
で,icoをホームページカーソルには出来るのですがやってみると
カーソルの外枠が表示されないことがあるのです。
最初っから黒色の外枠が透明になってしまい,
カーソルの画像が変になってしまっているものもあれば,
今まできちんと外枠も表示されていたものが急に上記と同じ症状になったり。
最初はブラウザやOSに依存するのかと思っていたのですが,
急に変になったりするところによると,それでは無いみたいで…。
根本的にカーソルをicoファイルでやろうとすることが
間違いなのでしょうか?(確立されていない?)
それとも何か環境の変化があってのことなのでしょうか?
何かちょっとしたことでもありましたら
ご意見お聞きしたいです。宜しくお願いします。
>>94 あと蛇足を承知で言うが、
悪いがそんなうざったいカーソルを変えるようなサイトには、
二度と行く気がしない。そういう客が多いと覚えておけ。
カーソルの形状ってのはユーザインタフェースの部分だ。
それが変えられるというのは、著しいユーザビリティの低下を招く。
以上。
95は日本語をもう少し勉強したほうがいいのでは?
否定されると逆ギレってのがこの頃多いな…まだ春休みだっけ
逆切れ荒らし。
これが噂のデレツンですね。
101 :
Name_Not_Found:2006/04/10(月) 09:42:22 ID:rUHvLVNg
>>94 仕様書はどんなファイルがカーソルとして使えるかを定義してない。
だから、icoファイルだろうがなんだろうが「使えりゃいい」もんだと思う。
どっちにしろicoファイルはカーソルじゃねえな
「\」を表示できるfont-familyは日本語のフォントだけですか?
>>103 スレ違いというか板違い?
PC板かね、英語版フォントの話題を扱ってるところなんてあるるのか知らんが
105 :
Name_Not_Found:2006/04/10(月) 12:39:08 ID:S7/IcE7Q
以下のように、背景色を黒、コンテナの中を白で、左部分と右部分を各色で指定した場合、
IEではコンテナの中の白い色が出るのですが、FFやNNだと出ません。
対処法はないのでしょうか?よろしくお願いします。
<html>
<head>
<style type="style/css">
body{ background-color: #000000; text-align: center; }
#container{ margin: 0 auto; width: 780px; background-color: #ffffff; }
#left{ margin: 10px; background-color: #cccccc; width: 200; float: left; }
#right{ margin: 10px; background-color: #ffcc33; width: 500; float: left; }
</style>
</head>
<body>
<div id="container">
<div id="left">左部分</div>
<div id="right">右部分</div>
</div>
</body>
</html>
>>105 それはIEのバグ。floatされたブロックは通常フローからは取り残されなければならない。
コンテナの一番最後に
<div style="clear:left;"></div>
こういう感じでfloatクリアを入れてやらなきゃならない。
言い方変だったな。
だからFxの動作の方が正しいんだが、
IEのようにコンテナを残してやりたいんなら上記の方法、というだけ。
リストで(1),(2),(3)…での表記は可能でしょうか?
>>106 なるほど〜。
IEのバグって結構あるんですね。 ありがとうございました。
>>105 あとついでに、widthにはpx入れろ。
リストで(1),(2),(3)…と表記すればいいんだよ。
>>109 こんな感じ?IEだめだけど
<style type="text/css">
ol {
list-style : none;
counter-reset : item;
}
li {
counter-increment : item;
}
li:before {
content : "("counter(item)")";
}
</style>
<ol>
<li>あ</li>
<li>い</li>
<li>う</li>
</ol>
検証してないがそんな感じじゃね。
どっちにしてもIEは7でもcontentに対応してないっつってるから
どう考えてもカウンターなんてもっとムリポ。IE消えてホスィ。
119 :
109:2006/04/10(月) 18:03:40 ID:???
>>117 ありがとうございます。
しかしながらIEが対応してないとのことですので
他に機会があったら使ってみます。
お役所系のページを作っているのですが、
1と(1)の違いとかに異常にうるさいのでまいってます…。
>>119 list-style-typeプロパティで「none」を指定し、ちょっと強引だけど
<li>(1)...内容...</li>
これはよく批判されるけど、五月蝿いクライアントなら仕方ないんじゃないかな。
>>119 ちょい待ち、もしかして、それって順序に意味があるわけじゃなくて、
番号「そのもの」に意味があるのか?
だとしたら
>>115の言うとおり、ulでマークアップして(マーカは消してもいいけど)(1)と直書き
の方が正しい。
>>120 olでそれやったら批判されるかもしれないが、
お役所や法律文書のような「番号に意味のあって番号で参照される」場合は
ulで番号直書き、がStrictスレの結論だぞ。
意味というか慣例に厳しいだけって感じだろうな。
124 :
120:2006/04/10(月) 18:36:41 ID:???
>>122 いや、私だったら順不同型にして「list-style-type: decimal」とするかな。
批判されるっていうのは、見栄えのためにHTMLをいじったりすること。
私の説明が下手だったのだが…
>>124 そっか、番号直書きしなくてもその手があったのか!
126 :
120:2006/04/10(月) 18:42:55 ID:???
× 見栄えのためにHTMLをいじったりすること
◯ 番号入れるため直書きすること
... orz
>>124 それでどうやって(12)とか括弧を入れられるんだ?
番号までコピペできないとだめなんじゃないの?
>番号までコピペできないとだめ
???????
>>124 127の通りなんだが、「番号自体を参照・再利用する場合」は
その番号自体を直書きしてないと意味がない。CSS切られたらオシマイだしな。
>>130 でも直書きしたらStrict的にはダメなんじゃないの?
そういう結論だったし…
そうだよ。
どっちにしろリスト自体に順序は無いんだからさ。
>>129 番号に本文とセットで意味や必要性がある場合を考えてみ。
CSS切ってたら表示できないって、html的にもやばいだろ。
おじゃまします
バナーのURLは?と聞かれたのですが、私の作ったサイトは
X-BEATという無料レンタルサーバーの/public_html内に
アップしてあります。
そのフォルダ内のにあるタイトル用のjpgがあるのですが、
大きさは規格外です。規格の二種類くらいのjpgかなにか
(リンクは付けるのですか??)用意して、アップをするのですか?
またそのアップしたjpgの住所って、何なのでしょうか、
私のサイトのURLが
http://negishi.s11.x-beat.com で
FTPサーバー名がs11.x-beat.com
の/public_html 内です。
お手数かけますご教授お願いします
>>133 コピペできるかどうかは、直書きとは関係なくUAの実装の問題だろ?
>>136 CSSがOFFの場合は?
UA以前の問題でしょ。
/*
*
* いや、もう議論はやめようぜ。
* ここ質問スレなんだからさ、続きはStrictスレでなw
*
*/
>>139 だからCSSで番号が書かれることの問題と、コピペは全くの無関係、と言いたいだけ。
コピペの可否で決められることではない。
直書きで書かれてたって(できるのか知らんがJSとかで)コピペできないようにしてあったって
HTMLの問題としては無問題なんだから。
CSSがOFFの時にコピペ出来ないのに?
133だが、CSSを切ってる場合にどうするのよって言いたかったのよ。
表示されなかったらコピペさえ出来ないだろ?
>>141はCSS表示できる環境が前提になってるみたいだけど、
今は携帯とかもあるし表示できない場合を考慮するのを前提にすべき。
多分この辺の認識のズレで噛み付かれてるんだろうな。
>>142 CSSが切られて見かけ番号がなかったとしても、
olならば番号を付与してコピーするUAがあるかもしれない。
そんなのは単純にUAの機能の問題であって、HTMLの意味とは何ら関係ない。
いいかげんコピペは単なる機能だと気付け。
>>143 >表示できない場合を考慮するのを前提にすべき
あのな、俺は「番号自体に意味がある場合は直書きすべき」と言った人間なんだが。
それとコピペできるできないが関係ない、と言っているだけだ。
ちょwwwなにその機能があるかもしれないってwwwww
>>146 単に機能の問題だから、そういう機能が付けられてもおかしくない、という意味。
>>145 「番号自体に意味がある場合は直書きすべき」っていう前提自体が間違ってるんじゃね?
CSSが切ってある状態でも表示できる必要があるだけだから。
>>147 そんなもしたらればの機能まで言い出したら、
何でもありになってしまうんだがwww
詭弁にも程があるぞ
>>146 無いと証明するか、有ると証明してみれば?wwww
/*
*
* いや、もう議論はやめようぜ。
* ここ質問スレなんだからさ、続きはStrictスレでなw
*
*/
>>151 おけwww
まずは悪魔の存在の証明から手始めにやってみる事にするwwwww
そこからかよ!
155 :
Name_Not_Found:2006/04/10(月) 19:49:54 ID:olde/tZi
番号はスタイルシートで振るべきだよね。
↓
順序を表す番号はスタイルシートで振るべきだけど、後に参照するための番号は直書きしないと意味ないよ。
↓
だよね。そうじゃないとコピペのときに困るもん。
↓
いやいや、コピペ云々は関係ないよ。
スタイルシートの装飾までコピペしてくれる便利なブラウザがあれば解決するってわけでもないし。
問題の本質は、装飾は環境によって変わるということ。
後の参照に使うような変わってほしくない情報は直書きするしかないんだよ。
それ見るとさらに
>>144とかの見当違いなレスが際立つな
参照がコピペだけだと思うのも間違い
コピペなんかあくまでも例に挙がった一つってだけじゃん
噛み付いてる人ウザス
更にそれに噛みついてるおまえらはもっとウザス。スレ違いいいかげんにしろよ。
本人が言っても説得無し・・・
もうそれでいいから消えろ。
やっぱ 馬鹿って学習能力ないから馬鹿のままなんだよな。
「質問が来るまでは雑談スレです」とか書いておけばいいよ
*/
もう早とちりなんだから
/*
早漏といえ早漏と
*/
もうぶっちゃけどうでもいいよ。
やりたいようにやれ。
所詮オナニーHPだろ。
/*
(^_^;)
あのう・・・ ぎ ぎゃくなんですけど・・・
変な人が住み着いてしまったねぇ。<!--
171 :
Name_Not_Found:2006/04/10(月) 20:55:14 ID:XTktZfy9
浜崎「1番前なのに座ってるよ。みんなどう思う?感じ悪いよね〜。」
客「お前らだよカス!あゆに迷惑かけんな!さっさと立てよ!」
母親「すみません、この子足が不自由で立てないので・・・」
客「うざ〜〜、アユに迷惑かけんならくんなよ!」
客「そうだそうだ!帰れよー!」
母親「本当に申し訳・・(涙)・・・」
客「お前ら帰れ、邪魔邪魔!」
娘「お母さん・・もう帰ろう・・本当にごめんなさい」
母親「・・・(涙)」
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
証拠VTR→
http://www5d.biglobe.ne.jp/~EMPEROR/hamaayu.mpeg このムービー見て下さい!!貼り付けて!!!!
もう、浜崎あゆみが大嫌いになりますよ!!
なんか、この事件をマスコミがテレビに流さないように、
浜崎あゆみの事務所が金払って口止めしてるみたいです!!
だから、みなさん!
これをいろんな掲示板に広めて下さい!
<--> → <!--> → <!°°>ピコーン
だからおまえらいいかげんに汁
>>74 div {
display: block-anchor;
}
a:hover {
slide:pulldown 0% 100%;
}
まだ春休みだっけ・・
2ちゃんねるは毎日が日曜日ですよ?
>>178 2回言ってるお前は同類以上という事だなww
??
>>178は例えで2回言ってると思うんだが、
ぁあ、釣りですかそうですかor2・・・
183 :
Name_Not_Found:2006/04/10(月) 22:06:32 ID:VWA+NlVC
なんで最近このスレにバカが集まってるんですか?
わろす
春、春ってならわかるけど、スペースな辺りにわざとやって自演で突っ込んでる気がする。
189 :
Name_Not_Found:2006/04/10(月) 22:31:08 ID:ave/e3wP
#hoge {
float: left;
width: 180px;
}
#null {
margin-left: 220px;
}
こうやって#nullを左に回り込ませたのですが、何故か#hogeの横幅が固定されずに
はみ出してしまいます。
どうすればいいでしょうか?
widthとpaddingとかborderを同じ要素に指定してない?
191 :
Name_Not_Found:2006/04/10(月) 22:40:11 ID:ave/e3wP
>>189 同じ要素というか、その子供の要素には指定しています。
#hogeの子供要素、「ul」や「h2」にはmaginとpaddingを指定しています。
これが原因なのでしょうか?
>#hogeの横幅が固定されずにはみ出す
kwsk
193 :
189:2006/04/10(月) 22:44:18 ID:ave/e3wP
>>192 本来ならば180pxで固定されているので、はみ出せば折り返される筈なんですが…
何かが原因で180pxを越えてしまい、#nullと重なって読めなくなってしまいます(文字サイズを大きくすればもっと酷いことに…)
だからといって「overflow: hidden」を指定する訳にもいきませんし…
float系は難しいです。
>>193,189
普通はそんな事にはならないんで、別のブラウザで確認してみるとか、
もちょっとソース出すとかさ。
195 :
189:2006/04/10(月) 22:52:12 ID:ave/e3wP
一つ忘れていました。詳しいソースを記述します。
<div id="layout">
<div id="hoge">
<hn>見出し</h3>
<ul>
<li> ... </li>
<li> ... </li>
</div>
<div id="null">
<hn>見出し</hn>
<p> ... </p>
</div>
</div><!-- End #layout -->
196 :
189:2006/04/10(月) 22:54:36 ID:ave/e3wP
んで、CSS(訂正:ul要素の終了タグはあります)
#layout {
width: 100%;
}
#hoge {
width: 180px;
float: left;
}
#null {
margin-left: 240px; /* floatしたので左に余白を作る */
}
ブラウザはFirefoxです。
>>195 IEでもFxでも180以上にはならない。
>>193 >文字サイズを大きくすればもっと酷いことに
だから、px固定ではなくemで相対指定が好ましいのだよ。
>>193 <hn>って、本物はちゃんと書いてあるのか?
>>195-196 その最小構成だけで、試しましたか。
何か他に要らぬ指定をしてるでしょ。でなきゃ問題は起きません。
201 :
189:2006/04/10(月) 23:02:33 ID:ave/e3wP
>>197 kwsk
>>198 良いアイデアなんですが、固定した方がよろしいかと...
ウィンドウ幅が狭いと崩れるんですけど。
>>199 はい、書いてあります。
試しに子供要素のマージンを全て殺してみましたが…駄目でした。
., 、 .,,,
.| ! l゙'〉 ./> ,!.! .! ! i│ .i'ヽ ,i、 , 、
.| ! !.| .,,, .!.| │! .,i---ヾ.!'''''''''i .! ! .!.| /./ |´} \\ /,./
..i-'" .,〉,, ―-, .,,....! !-、, .l..l. !.| .| ! .!―ー''i i'''"゙゙´ ,!.! .| !__,、 l l゙ ! :! . \ヽ //
..゙‐'゙| レ゙,./ '''、 l ヽ 、.r'''i l .l l ,!.! .!.| __,| |,,,,..、 i'''''"`゙,゙__、,,..../ /.l゙ ! | \\ .//
. l / ゙l | ,!.l | ! .l .! ,!.!./'i ,!.! !,,,,,,.., ,...... ! "'^| ! .,!.! / ゙‐''i ,i、 .|| \゙'、 ./ ./
./., | ,!.| .! ! ,!.! .! | | "/ ! ! ,!.! !.| .,,....! ! .,!.r'"L| ,! ! .|,,! // .\ヽ,
.././| ! / l゙ .l│ l | .`" `'′ l l゙ ./゙_,,゙ .ゝ、 | ! .ヽ ./ i!.l゙ | | .| ,! // `-\
.ヘl゙ | ! / ./ ,! !./!..",! / / !.l゙ .l |\.`j .l:.|______. .l゙ ! .! !_./ ,! .l゙゙! .// `-\
.| ! .|,/ {,/ .ヽ,,/ ,i"./ lゝヾ/ `′ .l_______| `'゙ l__,./ ゙‐' {./ ヽ,゙>
.!ゞ ゙'" `''''゛ ` `
>>201 >ウィンドウ幅が狭いと崩れるんですけど。
むしろpx指定の方が、崩れる。てか、文字を大きくしてる人に見辛い。
>>201 kwskじゃなくて、再現しないんだよ、あのソースじゃ。
>>200が言ってる事やってみた?
そこ以外の要素に問題があるな。
206 :
189:2006/04/10(月) 23:38:02 ID:ave/e3wP
em指定でも駄目みたい...
>>206 あのね、それは脇道の話だから。肝腎の200は読んだのかな。
MacIEでフォントの行間設定してるとかじゃね?
むしろどうやったらはみ出させる事が出来るのかが知りたいw
>>206,189
レスを色々貰ってるのに見てないし、実行もしない。詳しいソースも出そうとしない。
そうだね、貴方にはfloatは難しかったね。うん、あきらめな。
>>208 よく読まないクセに回答すんな。
211 :
189:2006/04/11(火) 00:06:27 ID:5i5sZ8cr
>>210 200さんが言ったように最小構成でテストしてみましたが、どうやらうまくいったみたいです。
他にいらない指定をしていないか探してみたのですが駄目でした。
前にfloatやったとき出来たのですが、今回は何かの原因で駄目っぽいです。
なので諦められないというか…テーブルレイアウトに逃げるか…なんです。
もうちょっと自分で頑張ってみます。
>他にいらない指定をしていないか探してみたのですが駄目でした。
最小構成から元のソースに戻し、最小以外を/*コメントアウト*/し、
コメントアウトから少しづつ外してそのたびに更新する。
表示が変になったら、それが悪さをしてる指定だ。
フロートで手間取ったらポジションやばいよ
214 :
94:2006/04/11(火) 00:21:28 ID:???
>>95 拡張子の問題でも無いんですね。
出来るのは偶然って言ってもいいくらいなんですね...
>>96 いや蛇足じゃなくておっしゃる通りだと思います。
無駄に十字だったり,砂時計だったりすると使いにくいしビビる…。
そこは心にきちんと留めておきます。
>>101 使えりゃいいもんなんですか。
ってことは使えてラッキー!で,使えなかったらアンラッキー…,
不具合の原因なんてわかったもんじゃないってことですね。納得です。
>>102 それは間違いないですね。
でも何でそれで出来るんでしょう。不思議で楽しいですね。
色々と貴重なご意見ありがとうございました!
215 :
189:2006/04/11(火) 00:25:45 ID:5i5sZ8cr
>>212 ありがとう。
早速実践してみます。
floatを解除して #hogeに1pxの枠線を付けて確認したらやっぱり
はみ出ていたので、widthあたりが何かおかしいのかも…。
HTML、CSSはValidチェックして問題はありませんでした。
頑張ります。
えっと、
>>212の方法はチェックの基礎だと思ってたけど、知らなかったのか……
217 :
189:2006/04/11(火) 00:29:44 ID:5i5sZ8cr
>>216 え、いや、本当はやっていたんですが はみ出ることぐらいしか
分かりませんでした。
俺も知らなかった。
だって今までミスしたことないし
219 :
189:2006/04/11(火) 00:32:53 ID:5i5sZ8cr
えっ、何で??
Windows版のIEならちゃんと出来たよ?Firefoxが壊れちゃったの?
バグだったりしてw
ナニ寝言を言ってるんだ?
普通はWinIEがバグで、Firefoxが仕様書通りの場合が多いが。
>>219のFxが壊れたという可能性はなきにしもあらずだが。
再インストールしてみ。
223 :
189:2006/04/11(火) 00:43:04 ID:5i5sZ8cr
>>221 そう信じているけど、実際にIEで見たらはみ出ていない。
>>222 おk。やってみます。
ってかIEを基準にするのが間違ってる。
よく、「CSSを切られていたら表示が…」とありますが、実際
CSSを切ったりして常用している方というのはいるのでしょうか?
JaveScriptなら分かりますが。
未対応ブラウザは、それはそれで仕方ないとして。
227 :
189:2006/04/11(火) 00:54:29 ID:5i5sZ8cr
再インストールしたけどやっぱ駄目っぽい。
というかGecko系とIEしか見ていないけど、他のレンダリングエンジンはどうなんだろう…。
>>224 ということは IEがおかしい のかなぁ。
もうちょっとだけCSSと睨め合って、それでも駄目なら寝ます。(目が痛い...
228 :
189:2006/04/11(火) 01:03:22 ID:5i5sZ8cr
>>226 すみません、それ読んでませんでした。
ということはあれはIEのはバグだったのですね…orz
「要素より大きな内容は要素からはみ出す」と聞いて不思議に思うのが、僕と同じように
widthの値をpxで固定しているのにも関わらず、はみ出さずに折り返しているサイトがあるんです。
もちろんそのサイトと同じようにしたんですが…
で、相対指定でもはみ出ちゃうとなると、さて困りました…。
>>228 本当に解決したいの?
>>212の方法で一要素ずつチェックしたわけ?
わからないんなら、素直にまんまのソース出せ。
CSSでのwidth指定についてうまくいか無く困っています。
下記のような指定を行った場合ブラウザのサイズを780以下まで縮めるとheader、footer部分が100%表示されません。
100%表示されない理由が解からないのと対応策をご教授願えればと思います。
宜しくお願いします。
<div style="width:100%; background-color:#FF3333">
header
</div>
<div style="width:780px; background-color:#CC9999">
content
</div>
<div style="width:100%; background-color:#6699FF">
footer
</div>
>>225 大半のサイトは、自分で作ったユーザCSSを被せて見てる。
ほぼCSSを切った状態に近い見かけ+別窓のサイトを明示させたりする補助程度のもの。
悪いけど、読みやすさが一番だから。
>>232 IE6/Fx1.5.1で普通に100%いった。
235 :
232:2006/04/11(火) 01:42:20 ID:???
>>234 ごめんなさい。説明が抜けてました。
ブラウザのサイズを780以下まで縮めると横スクロールが出ると思いますが、
そのスクロールをずらすと100%になっていなく切れているんです。
申し訳ありません。説明不足でした。
>>235 それが正しい動作。
780px取ってあるボックスが存在するからって、100%が780pxになるわけじゃない。
237 :
232:2006/04/11(火) 01:47:41 ID:???
>>235 やはりそうなんですね。
何か対応策のような物はありませんでしょうか?
contentのwidthを変えるなりしないとダメなのでしょうか?
>>237 IEが対応してないけど、min-width:780px。
239 :
232:2006/04/11(火) 01:53:52 ID:???
>>238 ありがとうございます。ですが、ごめんなさい。
既にそれは試しのたですが、やはりIEには対応していないとキツイので。
ブロックレベルをdisplay:inline と指定すれば、text-align:centerという
指定をやっても良いのでしょうか?
242 :
232:2006/04/11(火) 02:08:51 ID:???
>>240 contentの中にさらに3つの横ならびのカラムが入り、
そのwidthを780px以内に収めたいので入れるしか無いかなと思うのですが。
>>241 display:inlineだと上記のように3つのカラムを入れられますでしょうか?
すいません。ピンとこないのですがlist系式以外にも使えますか?
>>242 780pxにこだわる理由がわからんが、
content内の3カラムの1つだけでもリキッドにすればいいんでは。
244 :
232:2006/04/11(火) 02:34:40 ID:???
780px企業サイトで一番使われているのは確かだな。
>>233 ユーザCSSをかぶせるのはまぁまぁ有るだろうけど、
「ほぼCSSを切った状態に近い見かけ+別窓でサイト表示」って
そんなキモイ見方してる人なんて、無視できる程の数ぢゃない?
弱視や色盲ならしょーがないけどさぁ。
>>244 contentのwidth:100%;にして、中の3個のdivの内、一個をリキッドにすればいいんでないの?
>別窓でサイト表示
何この誤読。
というか偉そうな質問者だな、意見聞く気ないのにここで質問したわけか?
249 :
232:2006/04/11(火) 02:53:53 ID:???
>>246 中の3個のdivの内、左を180px固定させた場合に残り2つのdivのwidthを指定しないと
780pxを超えてしまうので何かしら指定しないと駄目だと思うのですが。
何か方法ありましたっけ?
>>248 回答に再度疑問を投げてるんだろ?
回答は聞てるぞ。なんや、鵜呑みにまでせなあかんか?
252 :
232:2006/04/11(火) 03:19:04 ID:???
>>251 すみません。それじゃ解決にならないので。
表示方法を変えるか、コンテンツ部分のTableを検討します。
こんな時間に皆さんありがとうございました。
なんだったの?この糞プロ・・・
今北産業。
>>232のプロ?の問題だが、根本的解決にはならないが、一部のみ解決できたぞ。
255 :
Name_Not_Found:2006/04/11(火) 10:26:12 ID:rFkfV+sz
回りこみの解除をしたいのですが、もう次に何も書くものないので
そういう場合は、どのようにしてCSSで解除すれば良いのでしょうか?
<div style="clear : both;"> </div>
こういうのは文法的に駄目ですよね。
もう次に何も書かれてないのなら、回り込みを解除する必要も無い。
不安なら、水平線でも入れておけば? hr {clear:both;}で。
hr {clear:both; margin:0; visibility:hidden;} だな
hr.omajinai {clear:both; margin:0; visibility:hidden;}
のほうがいいぞ
いや、hr {clear:both; margin:0; visibility:hidden; height:1px;} か。
なんでそんなことをする必要あるの?
そんな、とはどれを指すか。255〜259のレスより引用せよ。
262 :
Name_Not_Found:2006/04/11(火) 11:56:27 ID:Y0Uuv58y
プラウザでの印刷がいまくいきません。
WinXP + IE6 はOK(画面表示通りに印刷される)。
Win98 + IE5.5だと、以下のようにすべてのDivが縦に印刷されます。
ヘッダー
左側メニュー
右側文章
フッター
なぜなんでしょう?
***HTML***
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet">
<body>
<div id="wrap">
<div id="head">ヘッダー</div>
<div id="left">左側メニュー</div>
<div id="right">右側文章</div>
<div id="foot">フッター</div>
</div>
</body>
</html>
***CSS***
body{margin:0; padding:0;}
#wrap{width:750px;}
#head{width:750px; height:50px; background-color:#66ccff; }
#left{width:150px; height:200px; background-color:#ccffff; float:left; }
#right{width:600px; height:200px; background-color:#66ffff; float:left;}
#foot{width:750px; height:50px; background-color:#ffff66;clear:both;}
印刷専用ページを作ればいいんじゃね?
>>262 150px+600px=750px――ってか? もちっと親widthに餘裕を持たせたまへ。
できればpxよりもemで相対指定の方がいい。文字サイズを大小させると……。
>>263 CSSのmedia="print"で濟む話を、なぜ別ページに作らせようとするのかね。
emが良い ってよく言うけど、
文字サイズをでっかくしたら横幅が広がるわけでしょ?
横スクロールバーとかでちゃうじゃん。
俺はwidthにemはあまり使わないな。
フォントサイズやmarginにならよく使うが。
文字サイズを大きくしてる人は、ウィンドウも大きくして見てるさ。
>>265
そうなの?
じゃあ横幅をem指定して文字サイズが大の時、
横幅が1000pxぐらいあっても良いってこと?
>>267 してるはずねーだろ。
>>265 emが良いってのは、font-sizeの話。
幅は指定無しか、ウィンドウに対するパーセント指定が良い。
float段組の場合ならば、
左側メニューは見出しの最大字数でem固定、右側はmargin-leftで幅非固定
……ってのはよくある例だけどな。
ありがとう。
文字サイズは%でしてるけどダメなんか・・・
emに変えることにするよ。ありがとう
>>262 >#right{width:600px; height:200px; background-color:#66ffff; float:left;}
↓
#right{height:200px; background-color:#66ffff; margin-left:155px;}
>>271 いや、パーセントでもいいと思うよ。
要するに、pxやpt固定に対してemやパーセントが「良い」って話だから。
http://makimo.to/2ch/pc2_hp/1042/1042293757.html 65 名前: Name_Not_Found 03/01/17 21:52 ID:???
font-size : **px;
だと、IEで文字サイズを変えられないので、目の悪い読者にやさしくないから駄目。
font-size : 1em;
だと、IEで文字サイズを小さくすると、字がごま粒みたいになってしまうので駄目。
381 名前: Name_Not_Found 03/08/04 01:35 ID:???
そもそも本文をpx指定で固めるなっての。
何も指定しないのが一番だが、指定するならせめてfont-size:100%;にしてくれ。
特殊な小部分ならともかく、本文は指定は要らない。
閲覧者それぞれの都合があるんだから、その裁量に委ねる。
私のサイトは
body {
font-size:100%;
line-height:1.2;
}
font-size:1emだとWinIEで文字サイズ大中小につれ急激に大小するバグがある。
mediumとするとIEで少し大きめになる。
よって、どうしても指定するなら100%。
括弧内の註記などは小さくして
small {font-size:80%;}
>>274 それはline-heightの問題で、直接的にemが関わってるわけじゃないがな
俺が作るサイトは大抵font-size:90%;
>…でもこういうのを突き詰めていくと、色とかマージン取りとかのデザイン要素すべてが該当してくる話なので、
>「 Web ページにデザイン要素を持たせる企てはぜんぶダメ」になっちゃう罠。なんともはや。
結局そうなるよな
突き詰めなくていいから、その手前で考慮しような。
>>280 文脈嫁。せめて本文は100%って話だろ。
divに免疫がある俺は勝ち組
<div><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p></div>
なあに、かえって免疫力が
286 :
232:2006/04/11(火) 16:14:24 ID:???
>>254 別にプロを名乗る訳じゃないのですが…
一部解決策ありましたか!?それでも良いので是非教えていただきたいのですが。
IEの互換モードで
hoge[hoge]{hoge:hoge}
と同じような指定のしかたをすることはできますか?
>>287 IEは標準、互換関係なく、子孫セレクタしか対応してない。
>>288 無理ですか…わかりました、ありがとうございます
290 :
Name_Not_Found:2006/04/11(火) 17:55:24 ID:ox+X7hLj
既出だったらすみません。以下のように画像を並べたのですが、
IE6だと隙間がでてしまいます。
<img src="test.gif"width="100" height="20" alt="" />
<img src="test2.gif"width="100" height="20" alt="" />
ググって調べてimgにはvertical-align: top;を指定しているのですが、
それでも変わりません。どうしたらいいでしょうか?(margin+paddingも0pxにしています)
<img src="test.gif"width="100" height="20" alt="" /><img src="test2.gif"width="100" height="20" alt="" />
>>290 vertical-alignってことは縦方向の隙間の話?だとしたらtopじゃなくてbottom
293 :
290:2006/04/11(火) 18:11:02 ID:???
>>291 ありがとうございます。ただ、今色々とやっているのですが、
以下でも無理です。
<p>テキスト・・・・</p>
<img src="test.gif"width="100" height="20" alt="" />
<p>テキスト・・・・</p>
pと(pタグ以外でもdivでも)imgの間がIE6でみると余計に隙間が空いています。
Firefoxでは正常です。
294 :
290:2006/04/11(火) 18:12:42 ID:???
>>292 縦方向の隙間です。というか、imgを入れた下にIE6だと隙間が出来ます。
ちなみにvertical-alignをbottomにしても結果は変わりません。
>>293 なんでimgが素なの・・・
pに入れて、駄目だったらそのpのline-height:0。
296 :
290:2006/04/11(火) 18:20:41 ID:???
>>295 おっしゃるとおりにしてみたのですが、依然状況は変わりません・・。
どうしてもIE6だと隙間が空きます。
299 :
189:2006/04/11(火) 20:01:35 ID:5i5sZ8cr
widthをpx値で固定しても文字がはみ出てしまう原因、ちょっと分かりますた。
・日本語の文字は折り返されるが、半角英数文字は折り返されずにはみ出る
不思議だ、今までCSSいじっててこんなに苦労したことはない。
フォントのせいなのかなー?
英単語は勝手に改行されると意味が通じなくなるから改行されない。
どうせURLとかをそのまま書いたか、
テストでalohalkshf;lakjfajfみたいなのを大量に書いたってとこだろ。
301 :
189:2006/04/11(火) 20:08:41 ID:5i5sZ8cr
>>300 そうだったのかー…_| ̄|◯
今までの苦労は一体なんだったのだ…
だから最初にソース出せって言われてただろw
それやってりゃ10分で済んだ問題だ。
自業自得。
303 :
189:2006/04/11(火) 20:17:06 ID:5i5sZ8cr
>>302 ソースは出したかったのですが、サイトがバレそうなので…
難しい問題です。
自業自得でした。寝ます…
304 :
189:2006/04/11(火) 20:19:12 ID:5i5sZ8cr
それから皆さん、最後まで丁寧に教えていただきありがとうございました。
この苦労で一つ賢くなったんだから良いじゃないか
色々調べて見たのですがなかったのでどなたか可能かどうか
方法があるのかわかる方いましたら教えて下さい
リストのマークのサイズを、ブラウザの文字の大きさに左右されず
固定にする方法はあるのでしょうか?
308 :
254:2006/04/11(火) 21:05:55 ID:???
>>286 死ぬほどくっだらねぇ解決策だが、
bodyに背景画像を指定する。これでheader部分のは解決。footerは知らん。
header部分とfooter部分の画像を一緒にして、
縦に長い背景画像を作って使うとか?
入れ子しまくったら解決
>>307 書きわすれたのですが画像を使わずに
自動に付加されるマークのサイズを固定する方法は何かあるのかなと
思ったのですが、やっぱりそれで代用してやるしかない
ということでしょうか?
ない。
なんでそんなことしたいんだかさっぱり理解できない。
後出しじゃんけんすると誰も遊んでくれないよ
HTML4.01 Strictでサイトを構築しています。
文章中の特定単語にルビを振りたいのですが、
<ruby>タグを使用せず実現する方法はありますでしょうか。
title属性だとポインティング時以外表示されないので。
XHTML1.1に移行するにしても、ブラウザの対応の面で
かなり難があるようで、できれば現状での対応策を、と考えています。
質問するに当たって、どのスレにするか迷ったのですが
おそらくデザイン面での問題だろうということでこちらに投下しました。
難しい話だとは思いますが、よろしくお願いいたします。
>>313 XHTML1.1「が」対応悪いんじゃないよ。
application/xhtml+xmlに対してIEが対応する気がないだけ。
text/htmlなら問題ない。
しかし本当にスレ違い。
「ルビを振る」が単にデザインの問題だと思ったのか?
「ルビという意味」のことは考えなかったのか?
316 :
313:2006/04/12(水) 02:01:12 ID:???
>>314-315即レス感謝です。
>>314 「が」という表記はしていないし、そのつもりもありません。
IEその他ブラウザの実装のまずさを問題にしていたのですが、
読み誤るような文を書いていたのであれば申し訳ありませんでした。
確かにルビの意味、ということまでは考えていませんでした。
漠然と「定義リストにスタイルを追加して実現できるかな」くらいに
考えていたもので……。お恥ずかしい限りです。
>>315 <ruby>タグ関連でなく、
>>314にあるようなコンテントタイプの問題他
ブラウザごとのxmlへの対応の問題について難がある、という
趣旨の発言でした。上記同様わかりにくかったようで、申し訳ありません。
ありがとうございました。XHTMLへの移行も再考してみます。
甚だスレ違いの内容で、本当にご迷惑をおかけしました。
そもそも
body{font-size:100%;}とは、
font-sizeを指定しないのと変わらないんじゃないのか?
320 :
Name_Not_Found:2006/04/13(木) 12:19:23 ID:LxVHKzOf
>>320 >株式を貯蓄手段として考える 次章へ
これを一行でやるのがそもそも間違ってる。
どう見ても二つ、関係を表すアンカーを並べてあるんだから、マークアップとしては
<ul>
<li class="prev">株式を貯蓄手段として考える</li>
<li class="next">次章へ</li> ←この分も本当はおかしい、次章のタイトル/内容を書くべき
</ul>
で、
li { list-style : none ; }
.prev { width : 50% ; float : left ; }
.next { text-align : right ; }
323 :
320:2006/04/13(木) 13:10:41 ID:???
大変ありがとうございました。
すいません。
ネスケ4ではうまく表示できませんでした。
1から10まで教えないといけないのか?
少しぐらいは自分で工夫しろ。したんなら、どこを工夫したか書け。
それ以前にソースだせ。
てか、ID出せよ・・・
>>324 ねすけ4はCSSの解釈、IEどころじゃない遺物なんだから、
それに対してはCSSを読み込ませないか、別ページに移してテーブルレイアウトに汁。
ってかなんでネスケ4とかあるの?
最新使えよ
ってかなんでIEなんてあるの?
7でもダメダメだし、とっとと消えろよ
>>329 多数決の正義だな。数の暴力とも言うが。
多くの人が使うことをわかっていながら仕様に準拠しようとしないのは罪だと思います
332 :
Name_Not_Found:2006/04/13(木) 20:50:40 ID:Jz9hsuvv
IEの仕様が事実上のWEB標準
独占したいですし。
>>329 現在最も普及しているWindowsに、IEがデフォルトで付属しているからかな。
オープンソースになればもちっと良くなるとは思うけど、MSIEの開発チームは
その気もないみたいだし、天下をとっているので急いでデバックする必要もないんだろうけど。
大衆というのは得てして愚かなものです
336 :
Name_Not_Found:2006/04/13(木) 22:31:39 ID:XoCTJuzx
初心者の質問で申し訳ないですが、どなたか教えて下さい。
【CSS部分】
.box-oya{
width: 300px;
height: 200px;
background-color: #FFCCCC;
}
.box-ko{
width: 20px;
height: 20px;
background-color: #CC0000;
margin:0px 0px 0px 0px;
}
【html部分】
<div class="box-oya">
<div class="box-ko">
</div>
</div>
《続きます。。》
337 :
Name_Not_Found:2006/04/13(木) 22:32:44 ID:XoCTJuzx
《336の続きです》
という記述で、box-oya の中に、box-ko を入れ子しようとしています。
box-koのmarginを全て0pxにしているので、
box-koは、box-oyaの中で左上に隙間なくぴったり位置すると思うのですが、
そうはなりません。
左はぴったり一番左にくるのですが、
上に10pxくらい、隙間が開いてしまいます。
どうしてなのでしょうか?
左上に隙間なくぴったり位置するようにするにはどうしたらいいのでしょうか。
どうぞ宜しくお願い致します。
>>336 。ボx-オヤ{
ポシチオン:アbソゥテ;
}
。ボx-コ{
ポシチオン:レァチヴェ;
}
>>336 Win2kIE6/Fx1.5.1でくっつくこと確認。
>>336 余計な空白入ってるんじゃね?
<div class="box-oya"><div class="box-ko"></div></div>
だとどうよ?
>>336 .box-oyaにpaddingが効いてるとか。
とりあえず、
* { margin: 0; padding: 0; }
これは入れとけ。
>>342 そんなことしたら、ulやdlが厄介だよ。
345 :
336:2006/04/14(金) 00:04:20 ID:o7Wf7RZS
>>339 -
>>344 早速のレスありがとうございます。
やっぱりくっつく筈ですよねーー。
これ、あるサイトに練習問題として書かれていたものの解答を、
そのままコピペしたものなので、
くっつかないというのが、どう考えてもおかしいのです。
ちなみに、Win XP, IE6で試しています。
原因お分かりの方、おられましたらどうぞ宜しくお願いします。
>>344 デフォ設定は消して自分で設定するのが基本は基本。
リスト関係はブラウザによってドットをmarginとpaddingのどっちが追い出すかが違うし、
そのままだと厄介なんだよ。
>>345 だから、それだけのソースだとくっついたんだって。
余計なもの入れてないか?
347 :
336:2006/04/14(金) 00:08:54 ID:o7Wf7RZS
ひっつきました!!
>>340の答えが正しかったです!
ありがとうございました!!
試さないで書き込んでたのかよ・・・呆れた
>>346 >そのままだと厄介なんだよ。
逆。デフォルトのままにしておけば厄介は無い。
わざわざマージンを消したり付けたりする方が厄介。
俺は消す派だけどな〜
消した方がいいのはpの上下マージン位さ。
日本語組版ではあんなに段落間を空けないからな。
body {line-height:1.2;}
p {margin:0.2em 0;}
352 :
336:2006/04/14(金) 00:26:55 ID:bsy+YN6B
>>348 空白は全部消したと思い込んでたんです。
ど初心者ということで許してやって。
>>349 逆。
デフォルトのままにしておくとブラウザ間の調整が厄介になる。
たかがマージンを自分でつけるくらい手間を惜しむな。
デフォルトのままにしておけば
ブラウザ間の調整など要らないが。
>>353 マージンとパッディンの違いを知らない人なんだよ、きっと
デフォルト・スタイルの儘なら、marginであれpaddingであれ、
構ったことではない。
それが気になるのは、何か自分のスタイルで指定をする場合だけ。
>>356 それって「リストはあまり使ってません」か「リストはあまり修飾しません」
と言っているだけだから、そんなに威張らなくても…
デフォルトスタイルのままならいっそ何もいじらず全てデフォルトスタイルのままにしていてくれたら見やすい。
>>358 下手修飾するよりは無闇にスタイルを変更しない方がいいが、
それでも最低限、
>>351みたいに行間や段落間などは調節しないと
日本語として読みにくいわな。
>>359 いや、きちんと段落はpで、リストはulでマークアップしててくれるんなら、
むしろ俺は行間、段落間はいじんないでいてくれたほうが読みやすいのよ。
よくpで行間空けてpの上下自体はくっつけるのあるけど、
あれより段落は行間詰まってて、段落と段落の間は開いてる方が読みやすいのね。
>>360 そんな個人的で特殊な好みは、ユーザー・スタイルシートでやってくれ。
印刷物の版面を見てみなさいな。どちらが普通か。
ドリームウエイブというソフトはどこでダウンできますか?
>>361 行間は俺も空けた方が好みだが、
印刷と同様に考えるのはやめたほうがいい。
WebではPの段落間は開いていた方がいいという話はそこらにあるぞ。
>>362 そんなソフトはないが、きっとDreamweaverの事だろう。
へえ初めて聞いたな。
何であんな馬鹿みたいに段落間を空けたがるのか理解できぬ。
普通に文章を書いて、正しくマークアップしてたら、
一段落は結構ボリュームがあるから、バカみたいな間なんか開かない。
間が開くのは、そもそも日本語がなっていないのだろう。
ブロック要素AとBがあるとします。
Aにfloat:right;を適用すると
┌──────┐┌──┐
│ ... ││ B ..│
│ A .. .│└──┘
│ ... └───┐
│ . ... .. │
│ . ... .. │
└──────────┘
このようになりますが,これを
┌──────────┐
│ . ... .. │
│ A................................│
│ ... ┌───┘
│ . │┌──┐
│ ... ││ B ..│
└──────┘└──┘
このようにする方法はありますか?
一段落の量なんか関係ないよ。
>>366 数十行の段落の後であれ、間が空くのは変だ。量は人それぞれだし。
初心者にbr使用が多いのも、pで改行だと妙に間が空くのを嫌ってだったりする。
逆に、何で間を空けたがるんだ? その理由が知りたいね。
>>367 Aにfloat:right;を適用しても、図示みたいになりません。float:left;か?
>>367 下に置くのはないと思う。
>>368 100作ほど素人のbr使用小説を読んできたほうがいいよ。
特に中高生女子の書くようなもの。
brを「並べて」使用してるから、Pどころじゃなく間が開いてる。
あれはどうかと思うけど、そのほうが「見やすい」からなんだそうだ。
>>369 それだとBの上の部分にAが回りこまないようです。
もしかしたらCSSの限界なのかもしれませんね。
>>370 下におくのはないのですか。
ありがとうございました。
>>371 CSSっていうか、HTMLはどう足掻いても「上から下に」なんだよ。
高さの規定は基本的にできないから、当然「高さの下」もわからない。
逆に、文章量によって高さが変わらないと不便でしょ?
しったかの人?
>>370 改行方法のbrかpかが問題だったから、br連打とは別の話でしょ。
>>376 問題は段落間の「バカみたいな間」。
「段落巻に間を空けることが理解できない」んだろ?
だったらどういう手法を用いようとも関係ない。
要するにそいつがアホなだけでしょ。
スレ違い。
>>376 大体最初はbrなんか出てもなかっただろうが。
pだけの問題だったのに、突然おまえが「間をなくすためにbr」とか言い出したから、
結局brを使ったって間を空ける奴は開けるんだって話になったわけだが。
>結局brを使ったって間を空ける奴は開けるんだって
まあ、そんな間抜けどもは相手にしなくていいだろ。
きっちり締めてけ。
段落間が一行以上空くと、単なる段落同士の間隔ではなく、
段落の幾つか集合した「節」同士の間に挿入される空白に見える。
そこがいかん。
370の挙げた「中高生女子の書くようなもの」は未熟で、
短い文章しか書けないか改行をしないでダラダラ書くかだから、
一段落が即そのまま節になってるんでないの。
>>381 >「中高生女子の書くようなもの」は未熟で
>数十行の段落の後であれ、間が空くのは変だ。量は人それぞれだし。
……? 意味わからん。
矛盾してるってこったろ、同一人物かわからんが
矛盾してるかぁ? 節なら間隔を一行以上空けてもいいわけだろ。
同 一 人 物 か よ
もうアホはほっとけよ・・
さらなるアホハケーン…
(´-`).。oO( ヘタレほど講釈が多いんなんだよなぁ・・・)
んなん
(´-`).。oO(ここに来てる人間が行間程度の調節方法を知らないとでも思ってるのかなぁ…)
行間ではなく段落間、調節方法説明ではなく調節してる実例として、見るべし。
(´-`).。oO(ここに来てる人間が段落間程度の調節方法を知らないとでも思ってるのかなぁ…)
この流れにWeb先生を感じるのは俺だけだろうか。
だれそれ。
多分混じってる筈。
ふっふっふ・・・
div.a{
height: 400px;
width: 400px;
background-color: #f00;
margin: 100px;
}
div.b{
height: 200px;
width: 200px;
background-color: #00f;
margin: 100px;
}
<div class="a"><div class="b"></div></div>
↑の入れ子の状態の時にネスケでは横方向のmarginは効くのですが、
縦方向ではbがaの中央に表示されないのはどこが悪いのでしょうか。
わからん・・・
406 :
402:2006/04/14(金) 14:05:09 ID:???
書き方が悪くてすみません。
縦中央配置をしたかったのではなく、
入れ子の際に縦方向のmarginの値が反映されない理由が分かればとのことでした。
>>406 Win2000IE6/Fx1.5.12、N7.1でmarginが効いていること確認。
nn opera fx 共にダメ
>>406 div.aにborderをつけると、縦marginが反映されるようにならない?
a要素に
a:link {
text-decoration:none;
background-image:url("./image/dashed.gif");
background-repeat:repeat-x;
background-position:bottom;
}
a:hover, a:active {
text-decoration:none;
background-image:url("./image/solid.gif");
background-repeat:repeat-x;
background-position:bottom;
}
と、画像で下線を指定した場合に
a:link img, a:hover img, a:active img, a:visited img {
border:none;
background-image:none;
}
と、a:linkの状態(画像にリンクを貼った)は消えているのですが
a:hoverの状態(リンクを貼った画像にマウスを載せた)の下線が消えません。
どういった指定にしてあげればよいのでしょうか。
412 :
402:2006/04/14(金) 14:33:27 ID:???
>>409 ありがとうございます、反映されました。
それにしても不思議です。
ネスケのほうがIEにくらべ正しくCSSを解釈するそうですが、
これもその一つなのでしょうか。
a:link img〜は無しにして、img{border:none;}だけでいいと思うが。
>>406 WinXP IE6、Firefox1.5、Oprera8.54で問題無し。
>>408の環境詳細は?
>>408 borderなんか無しでもmarginは効いてる。
>>412 バグなのか調べてないけど、なぜか
divだけだとmargin・paddingの基準としてみてくれないんだよね。
macだとIE以外全部そうだし。。
416 :
402:2006/04/14(金) 14:44:10 ID:???
>>414 私のとこではWin98+Firefox1.5でだめでした。
422 :
410:2006/04/14(金) 15:10:55 ID:???
>>411>>413 レスどうも。
でも、それでもマウスを乗せると画像の下線がでる…。
img { border:none; background-image:none; }
a img { border:none; background-image:none; }
両方ともダメでした。
>>422 imgの線ではなくa:hoverの線を消さなければ意味無いので、当然。
inheritを使うより、数値や色を定義をした方がいいといわれたのですが、
inheritのメリット、デメリットって何なんでしょうか?
>>424 単純にIEのバカのinheritサポート状況のためです。
>>424 別に使ってもいいんじゃない?
CSS2からだから、対応してないUAを考えるならアレだけど。
>>426 対応してないUA=IE。
俺はIEなんて切り捨てても問題ないとは思うがなwww
自分しか見ないならそれで良いかもね。
<hr>みたいな区切り線の為に空のdiv使ってるんですけど
<hr>使った方がいいですか?
いいですよ。
>>431 区切りは適切にマークアップが入ってるんなら、そもそも入れる必要はないわけだが。
マークアップと文章構成自体を間尚したほうがヨクナイか?
サイト全体のセンタリングは body text-align:center; を使用せず、
例えば # wrapper { width:780px; margin:0 auto; } だけではダメですか?
>>434 駄目ですかも何も、text-align:centerは「インライン要素しか」センタリングしないぞ。
に比してmargin-autoはブロック要素をセンタリングする。
用途が違う。
IE6用にモロバレhackの事を言ってるんじゃねーの?
body {
text-align: center;
}
body div {
text-align: left;
margin: 0 auto;
}
要するに標準モードと互換モードを知らないと言うことですか?
>>410 これ、俺も知りたい。
boder は消せるんだけど、a:hover で background-image を指定した場合、消えなかった。
(表の画像を透過GIF にしてみると分かる)なんで?
439 :
Name_Not_Found:2006/04/14(金) 20:37:38 ID:3ZdJySOG
印刷時のみ左側にページ全箇所を揃えたいんですが、
どう記述すればいいでしょうか?
>ページ全箇所を揃えたい
意味不明、kwsk
>>438 イマイチわからんのだけど、<a>にbackground-imageを指定しておいて、
更に<a><img src="hoge.gif"></a>した場合という事?
>>439 印刷用のCSSを用意する
<link REL="stylesheet" type="text/css" HREF="XXX.css" media="print">
443 :
Name_Not_Found:2006/04/14(金) 20:56:34 ID:3ZdJySOG
>>439 CSSで設定してあげればいいのはこのスレに来てるからわかってるんだよね?
それならCSSで設定してあげれば良いよ。
media="print"で分けて設定するといい。
446 :
Name_Not_Found:2006/04/14(金) 21:03:07 ID:3ZdJySOG
>>445 今、ailgn=centerとかで真ん中に配置しているページを、
印刷時のみ左に配置したいと。
@mediaなんとかでtext-ailgn:leftでやってもできませんでした。
それはCSSを使わないで、ailgn=centerでレイアウト指定しちゃってるから当然かと。
>>446 本文中のailgn=centerも全てtcssにかきかえろ。
話しはそれからだ。
コピペしちゃったけどよく見たらalignだなw
>>446 htmlに直接書いちゃってる指定は、CSSで何を指定しても無駄。
451 :
Name_Not_Found:2006/04/14(金) 21:09:47 ID:3ZdJySOG
では、CSSで全て揃えるにはどうしたらいいのでしょうか?
一度どっかのサイトでみたんですが、CSSで中央揃えはバグの宝庫だとか…
バグの宝庫?
はぁ?
そういうことは、やってみてから言え。
p styleなど部分的に適用させることはググってわかるのですが
その逆をやりたいのです
つまり、全体をstyle.cssで定義して、ある範囲からある範囲までは
スタイルシートを適用させたくない場合の記述方法を教えてもらえないでしょうか?
全体に適用させないで、
適用させたいとこだけ適用するように、そのstyle.cssに書けばよい。
>>454 classやidの使い方を勉強して下さい。
ある範囲の部分だけ、定義してない状態の値でCSSで定義してあげればいいんじゃ。
459 :
454:2006/04/14(金) 22:10:26 ID:???
ありがとうございます
横着しちゃだめってことですね
もっと勉強してみます
ブラウザに左右されないサイドメニューが出来ない orz............................
かなり初歩的な質問で申し訳ありません
ググってみたり、テンプレ見ましたけどわかりませんでした
水平線をHR{width: 100%; border: 0px;}
ってな感じにしてみたんですけど
画面の最後まで隙間なくぴっしゃり水平線がひかれません
具体的には2ちゃんねる下部にある新着スレの表示っていうのを
挟んでいる2本の水平線みたいな感じ左右に若干の隙間ができてしまいます
この隙間すらなくして画面ぴったりにまで水平線を引けないでしょうか?
>>462 CSSデザインの基本は*{margin:0;padding:0;}
>>462 body{margin:0; padding:0;}か、*{margin:0; padding:0;}
465 :
462:2006/04/15(土) 04:24:20 ID:???
ありがとうございます。これからやってみます
>>463 基本ではない、全称セレクタはやりすぎ。
paddingとかmarginはUAごとに基本の値が違うから全部消すのが確実。
結果的に一番早いし。
469 :
438:2006/04/15(土) 10:18:46 ID:???
最初の質問者、いなくなったかな?
>>441 そう。それ。
>>410の CSS を
>>441の HTML に適応すると、
a:link は無効になるが a:hover 、つまりマウスオーバーする場合の
スタイルシートがうまく適応されないのよ。
*{margin:0; padding:0;}
は基本ではないが、やった方がいいと思うよ。
471 :
Name_Not_Found:2006/04/15(土) 15:42:07 ID:piznmyj7
俺の場合、水平線は、こうやってる。
html,body{
height:100%;
margin:0px;
}#hr{
width:100%;
height:1px;
overflow:hidden;
background:silver;
}
>>471 html,body{
height:100%;
↑ちゃんとIE以外の低解像度でも確認してるんだろうな、ゴルァ。
IE6でチェックボックスやラジオボタン、select要素などに
ボーダー,heightなどを適用してスタイルを書き換える方法はありますか?
ありません。お引取りください
>>474 ボーダーなんか普通に書けば表示されるはずだが。
わかりにくい質問で申し訳ないのですが
上部、左柱、メイン、右柱と最近のブログみたいな構成にしました
左柱にはリンク集。メインにテキスト、右柱にコンテンツリンク(過去ログ
って感じで構成しました。このときに過去ログをクリックして
メインのところに過去ログを表示しつつ、左柱のリンク集の部分はindexと同じまま
っていう感じにできないでしょうか?
具体的には
ttp://www.otablog.net/index.php(vip系ブログ
左柱にある過去ログの12月をクリックしてメインのほうは過去ログに飛んで
左柱下部にあるリンク集はまったく変わらないって感じです
非常にわかりにくい説明で申し訳ありませんが、できるかどうかお願いします
>>477 スレ違いだが、できるに決まってるだろ、
リンク集を全ページに同じ物を書けばいいだけだ。
それかメインの部分にフレームを埋め込め
>>478 やっぱりそういう回答でした、言葉足らずでした、すいません
最初は全ページに書こうと思ったのですが
例えば、indexで左柱のリンクを更新した場合に
過去ログページにある左柱にもリンク更新を同期させたいんです
現在のうちの状況は過去ログが数十ページある状況で
左柱のリンクちょくちょく変化していってます
いちいち過去ログの左柱を更新していくのは手間なので
ぐーたらなお願いですがこういうことってできますか?
>>480 つ【CMS】
で、それがCSSに何の関係があるんだ。
482 :
480:2006/04/15(土) 18:43:33 ID:???
>>479 ありがとうございます。やってみたいと思います
>>481 すいません、CSSとはまったく関係がありませんでした
CMSっていうのも見に行ってみます
まだまだ春は長いな
お前が言うなよ
ページを上と下に分けて、
上のボックスの縦幅を100px
下のボックスの縦幅を(100% - 100px)にしたいのですが
cssでできるのでしょうか?
もし、できるのならどうするのでしょうか?
よろしくお願いします
ありがとうございます。
cssでできそうですね!そのHP見て頑張ってみます・。
cssで一応レイアウトしてるのですが、
cssを適用さしててもpタグを適当に使うのはダメなのでしょうか?
基本的にpタグは、文の始めから「。」までを適用させるものなのでしょうか?
>>489 それはHTMLの問題だからスレ違いなんだが、
基本的に省略可の腕も空タグにはしないほうがいい。
癖を付けるためにXHTMLを勉強するのもいいかもしれないよ。
>>489 HTMLというよりはマークアップの問題だな。
<p>は文のはじめからというよりは、文略のまとまりごとに使ったほうがいい。
作文で
ああああああああああああああ
あああああああああああ。いいい
ううううううう。
ええええええええ。おおお(略
って一文字行頭にあけて段落つくるよね。
基本的には、これが=pでいいんじゃないかな。
「段落」という言葉を知らんのか?
知らない人は居ないのでは?とマジレスw
皆さん。ありがとうございます。
ということはコンナ感じで良いのでしょうか?
<h3>タイトル</h3>
<div class="txt">
<p>あああああああああああああああああ。いいいううううううう。</p>
<p>えええええええええええ。おおおおお</p>
</div>
後、スレ違いごめんなさい。
タイトルなのにh3を持ってくるセンスが素敵(ハート
>>495 hnの見出しは、h1から順に小さくなってくように用いるのが好ましい。
見かけはそれこそCSSで変更してね。
一部分を抜き出したからh3なんだろ。
499 :
sage:2006/04/15(土) 22:57:59 ID:y0Wt0Gnu
>>489 >>491-
>>492 段落とは、ひとつの主題を持った一つ以上の文の集まりのこと。
つまり、ひとつの段落ではひとつだけの主題を扱う。
主題が変わったら段落も変える。見た目で適当に区切ってはダメ。
主題を端的に示す文を、段落の最初に置くのが良いとされる。
なぜなら、最初の部分を読むだけで大間かな内容がわかるから。
つまり、流し読みしやすい。文字が読みにくいウェブでは特に重要。
段落の区切りが不適切でダラダラと長い文章は、非常に読みにくい。
sageの書くとこ間違えたOTL
>>499 日本語には、意味段落と形式段落があるって小学校で習ったよ…なぁ?
>>495 pの親にdivってあるけど、pの位置調整ためだけにdivって入れていいの?
>>499 それは英語のパラグラフ。日本語にはそれにあたる概念がない。
だから日本語に於いては、pがインラインのみ含めるということを踏まえて
p=形式段落とされている。
皆pとか使ってるんだ・・・・
自分はdiv内に文章を書いていってた。段落変えるときはbrで1行空けたりしてたんだけど
これはダメなの?
>>504 >皆pとか使ってるんだ・・・・自分はdiv内に文章を書いていってた。
div要素は何の意味も構造も持たない、汎用的なブロックレベル要素に過ぎない。
従って、div要素の開始タグと終了タグを取り去っても成り立つような構造でないと不適切。
br要素で区切られていても、そこは強制的に行が区切られているだけで段落とは見なされない。
div要素は、複数のブロックレベル要素を纏める時に使用すべきである。
匿名ブロックボックスが生成されるようにマークアップは好ましくない。
ユーザースタイルで、p { margin: 1em 0 !important; line-height: 1.5 !important; }
というふうに指定しても適用されないようなHTML文書は、ユーザーにとって不利益。
> div要素は何の (略) 構造も持たない
まあ、消し忘れか書き間違いだろうが、マークアップしたら構造もついてくるわな。
俺はpにマージンなどを付けて位置調整して
その中に文章を書いていってる・・・
で段落とかはbr・・・・・・
>>508 div自体は意味ないぞー。
意味がないから、既存のブロック要素ではマークアップできないものをdivにして
classやなんかで意味をかりそめにつけられる。
が、それも保証されない程度のものだから、
divは抜いても正しくマークアップできていることが前提。
まぁ 議論は余所でってことでひとつよろしく・・・
P要素を用いない理由がまったく理解できない。
そもそも文章の書き方すら知らないのかもしれんが。
きちんとP要素でパラグラフを示した方が、
制作者、ユーザー双方のスタイル指定で融通が利く。
他所でやれって言ってるだろ
ksg
>>510 新でいいぞ、貸す。
意味があるなんて、誰が言った?なんで略したか分かるか?
腐った脳みそで読めば、意味=構造か?
>>514 それが人間のマークアップする言語である以上、
構造が生じること=人間にとっての意味が生じることだ。
汎用divで囲ったからといって、そこに構造は予約されない。
>>515 おいおい、間違いを認めろよ、お前みたいな馬鹿の暇つぶしの相手してる俺もスレ違いなんだから。
>>516 本当にスレ違いの上バカだな、いつものしったかの人ですかwww
>>all
(´-`).。oO( ヘタレほど講釈が多いんなんだよなぁ・・・)
>>517 aaa
<no-semantics>aaa</no-semantics>
<p>aaa</p>
順に、
意味なし、構造なし。
意味なし、構造あり。
意味あり、構造あり。
理解できるか?
(´-`).。oO( これからはヘタレじゃない518が全部答えてくれるんだ、凄いなんだ・・・)
ヘタなヤツほどレスしたがるってホントなんだね
凄いなんだ・ ????
>>519 構造無いぞ、それ。
人間が見てあるように見えても意味ないからな、HTMLは。
ま、おまえがDTD掛けるというのなら話は別だが、
それはまたおまえの前提不足でしかない。
この頃あっちこっちで「なんだ」を見かけるなんだ。何?
>>525 全然反論になってない。
>with the id and class attributes
まぁ 議論は余所でってことでひとつよろしく・・・
aとa:linkの違いを教えてください…
>>526 反論云々じゃあなくて、おまえの発狂で飛び出してくる妄言を訂正してやっているわけだが、わかってるか?
何を沸騰してんだ、どあほ。出来が悪くてもその脳を働かせろ。
>>528 aはa:link、a;visitなどすべてを含むもの。
a:linkは始点アンカーを生成する要素のうち、そのリンク先を訪れたことがないもの。
>>529 昨日のStrictスレの粘着か・・・
あっちで相手にされないんで本当にこっちに来たのか?
いいかげん消えろ。
い・い・加・減・に・し・ろ・!!
議論はよそで
>>531 誰だって?
わけわかんねえよ。
話そらしてんじゃねえぞ、ほら吹きの糞ガキが。
図々しいんだよ、おまえは。
大嘘言ってたことに気づいたらなあ、素直に訂正しろ、自ら。
他人にけつ拭かせてんじゃねえぞ。
>>533 もはや議論相手もいない馬鹿が騒いでるだけに見えるから、放っておこうぜ
>>525 >>532 それは制作者の都合であって、UAはどんな構造なのか解釈できない。
単に制作者スタイルによって、人が見た目から構造を推測できるだけ。
これが分かっても、分からなくても、消えてくれ。
>>536 UAは意味を解釈できないが、構造を解釈できる。
そもそも、マークアップによって、構造が付加される。
何でもマークアップすれば構造化されると思ってることが間違い
消えろ
>>536 構造と意味は違うだろ。何回指摘してもらえば分かるんだ。あほ?
>>538 構造化される。
ただ、それが、適切な構造化かどうかは別の話。
>>540 マークアップが間違ってれば、そもそも正式にはパースエラーが起きなきゃならないから
実際には構造化はされない。
ま、divなんかはちょっと違うけど、519のようなアホな説明をされてるから。
ていうか延々スレ違い。
>>536 <p>文章</p>
<div><p>文章</p></div>
UAはこの違いくらい分かるだろwww
>>541 はあ?
いつ間違ったマークアップの話をした?
扱うデータが、人が読む文章だとする。
<div>aaaaaaaaaa</div>
たぶんこれは不適切だろう。p を使わないと意味を成さない。
しかし、パースエラーは出ない。
不適切とはそういうことであって、パースエラーの話ではない。
おまいら個人的に文通でもしとけよ
せっかくいなくなったのに煽らないでくれ。
昨日の粘着がうざすぎ。
まァな。。 クライアントの糞文章が一番の原因なんだわ。
勝手に直すと一字一句校正してくるセンス
UAは、マークアップの意味や構造をユーザーに伝えるものだろ。
つまり何かのスタイルで表現されなければ、構造を示したことにならないよな。
でもDIV要素は「プレゼンテーション的語彙を示すことはない」はずだから、
制作者がスタイル指定しない限り、UAは何も表現してくれないことになるなw
意味や構造を持たないから「プレゼンテーション的語彙を示すことはない」んだろ。
違うか? もし構造としてUAが解釈してるなら、
デフォルトスタイルで "display: block" の他に何か適用してくれないとw
ユーザーに伝わらない「構造」がどういうものか、教えてくれよw
明日は皐月賞だぞ。 もうねましょ。
551 :
Name_Not_Found:2006/04/16(日) 06:06:15 ID:SMKGzvhg
質問よろしいでしょうか?
Yahoo等で見られるコンテンツ全体を中央に表示する方法なのですが、
大体は<table>要素を全体に使用してalign="center"で中央へ持ってきますよね?
CSSを使用した場合なのですが、
body {
margin-left: auto;
margin-right: auto;
width: 700px;
}
これで、出来ると思っていたのです。
Firefox 1.0.7で確認したところ中央に全体が700pxの幅で表示されます。
しかし、IEver6では適用されませんでした。
そのほかのブラウザは持ち合わせていないので確認できていません。
とりあえずはIEでも表示できるようにしたいのですが、
対処法がわかりません。どうすればよいのでしょうか?
>>551 丁寧に文章書く暇あるなら、テンプレ見ようぜテンプレ。
>>551 IEのときだけ違うCSS取得させたら。ハック。
552が言うようにテンプレに載ってるよ。
なんで標準モードで作らないの?
>>551 body {
text-align: center;
}
page {
width: 700px;
margin-left: auto;
margin-right: auto;
}
これで百万億パーセント解決するよ
そのままだとtext-align: center;が子要素へ引き継がれちゃうよ。
>>559 細かい奴だ。
ほれ、これで百億万兆パーセント解決さ! エヘヘ!
page {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
bodyがないよ?(’’
body {
text-align: center;
}
wapper {
width: 700px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
こーだろ?
素直に標準モードでやれよお前。
互換か標準かぐらい自由に選ばせてやれよw
それをやる権利のある人間は、互換モードと標準モードの動作の違いをよく把握している人間のみ。
能力のない人間は、高望みしてはならない。
どうしても互換モードでやりたい事情がある場合以外は
とりあえず標準モードにしといた方が何かと楽ではないかと思います
レンタルBBSだとどうしようもない場合が多いけどな
問答無用で冒頭が
<html>
<head>
だから
>>563 だってIEはxml宣言があると互換モードで動作しちゃう仕様(バグ)なんでしょ?☆
xml宣言書かなければ医院だよん
んなアホな・・・っていうと信者かな
571 :
560:2006/04/16(日) 18:00:59 ID:???
>>570 一応UTFにしてHTTPヘッダさえちゃんとしてれば
XML宣言はなくてもいいからなあ、あったほうがいいけど。
UTFでもxml宣言を外したくないのは、よっぽどのW3C信者でLint厨なんだろうか?
>>573 それだけじゃなくて、.htaccessを使えないから
正しくUTFにならない鯖の場合もあるんじゃない?
m0じコードに関わらずxml宣言を書かなくても特に問題は派生しない
文保的に犯して九手も
画像の下に、画像の説明コメントを表示させ、
横に3列、縦に10行ぐらいのページを作ろうと思っているんですが、
こういうのはテーブルでやってもいいんでしょうか?
それともやはり表でないということでCSSでやった方がいいのでしょうか?
あなたが発信したくて作るページなら、それを決めるのはあなただ。
>>574 サーバはApache系に限定、しかも、ディレクトリ設定ファイルしか触れないわけだw
579 :
576:2006/04/16(日) 19:25:08 ID:???
「表」であり、テーブルを使うべきなのか、
「画像と文字の羅列」であり、CSSでレイアウトすべきなのか悩んでいたのですが、
普通に考えるとCSSですね。 自己解決しました。
テーブルでも問題ないよ。
むしろ、下手にcssでやるよりテーブルの方が良い。
要は見れたら良いんだ。
見に来る人はソースを見に来るわけじゃないんだから
人以前に、UAがソースを見る。
>>530 つまりaさえ指定していれば、a:linkは指定しなくてもいいということですか?
583 :
Name_Not_Found:2006/04/16(日) 22:44:27 ID:X9FGbAJI
>>583 nanntokakanntoka{ border-left: 20px solid #チョメチョメ;
border-bottom: 1px solid #チョメチョメ; }
>>582 href属性が指定されていないアンカーにも適用される。
例えば <h2><a id="toc" name="toc">目次</a> のような
終点アンカーにも適用されてしまう事になる。
HTML文書であれば、a:link はCSS2の場合、a[href] と大体同じ意味になる。
>>586 ありがとうございます。
終点の色も変えられるんですね。
すげー勘違いをしているというか、レスが読めていない悪寒。
外部CSSへ印刷禁止を埋め込みましたが、
IE6の印刷プレビューで見ると表示されてしまいます。
@media print {
body { display: none; }
}
どなたか、予想される原因を教えていただけないでしょうか。
>>589 なぜ印刷禁止にしたいのか謎。
ユーザースタイルでどうにでもなるし、
制作者スタイルを無効にすれば意味ない。
印刷して閲覧したい人の権利を侵害するな。
再利用されたくないなら、公開するな。
圧倒的シェアのIEは無視できない存在だとわかっていますが、
WEB標準、CSSを一番素直に解釈するブラウザはFirefoxではないかと
思いますが、皆さんはどう思いますか?
GeckoとOperaとSafari辺り使えば誤差程度だよ。
はっきり言って大差ないレベル。
IEについての感想。
・子供セレクタ・隣接セレクタ・属性セレクタが使えないのが糞。
・ダイナミック疑似クラスがあらゆる要素に適用されないのが糞。
・キャンバス以外の固定背景画像を真面に実装していないのが糞。
・viewport に対して固定配置(position: fixed)できないのが糞。
・min(max)-width、min(max)-height に対応していないのが糞。
・生成内容(content,quotesプロパティ)に対応していないのが糞。
・最重要指定が !i とか!im とかなんでも適用してしまうのが糞。
・左右ボーダーとパディング指定で後続部がずれてしまうのが糞。
・その他むかつくバグや身勝手な独自・先行実装、などなどが糞。
Firefoxについての感想。
・重いのが少々糞だが、Geckoは素晴らしい。CSS3セレクタ使える。
・個人的に text-align: justify が和文に対応したのがうれしい。
・個人的に text-decoration による装飾が唯一完璧なのがうれしい。
・個人的に font-family のフォント選択が唯一完璧なのがうれしい。
Operaについての感想。
・何か変。後もう一寸だけど何か変。上手く説明できないが微妙に変。
・font-family: 欧文フォント, 和文フォント, 総称ファミリ; が糞。
Safariについての感想。
・フォント関連の実装が糞だと思った。和文の整形に弱い気がする。
Geckoって酒飲めないヤツのことか?
あと忘れてたけど、
IEは border-color: transparent; に対応していないのが糞。
>>594 Fxが重い? 最新それぞれ使ってるが、内ではFxが一番軽い、Operaよりも。
>>597 border-colorだけじゃないがな。
position:fix;にも対応してないよな>IE
早く何とかしてくれ。
>>598 それはありえないw
Operaでレンダリングをすぐに表示に設定変更してないとかじゃないか?
起動時間も早いし、描画のサクサク感とか、操作のレスポンスとか、
デフォルトの何も入れてないFirefoxより軽快だぞ。
あとOperaの場合、次ようにすると下線がずれるのが糞。
<p style="text-decoration:underline">ほげ<small>foo</small></p>
text-decoration については改悪。Opera 6の頃の方が正しかった。
>>598 当方、未だに Pentium 500MHz/RAM 256MBytes だから、重い。
多分、ハードディスクのアクセスも遅いと思う。かなりチープ。
それでも流石にIEはシステムそのものだから、軽い。Sleipnirだけど。
Fxは起動するのに時間が掛かる。メモリーを消費する。スワップが溜まる。
確かに最近のOperaは詰め込みすぎなのか重い。ver6はかなり軽かった。
それは、Opera6が軽すぎなだけでしょ。
あれは確かに軽かったけど、Javascriptもボロボロだし表示酷かったじゃん。
Opera6から7でちょっと重くなったけど、
今のOpera9でも7の頃と重さが殆ど変わってないってのは凄いと思うね。
>>602 確かにver6は非道かった。特に和文のレンダリングが変。
でも未だに欧文と和文の混在表示が、糞なのが直ってない。
font-family: 欧文フォント, 和文フォント, 総称ファミリ;
の実装さえ真面になれば使うのに、勿体無い。ver9では直ってる?
出たばかりの最新のβでもその辺は治ってないね。
<p style="font-family:xxxxx, Arial, 'MS P明朝', monospace;">多彩なFont</p>
これで表示すると、「多彩な」はフォントリンクさせてあるMS Pゴシックになってる。
でもこれが必要な状況が全然思い浮かばないんだよな。
MacとWinとLinuxで考えただけで既にフォントとかの環境が全く違ってしまうので、
フォント指定するよりしないのを基準にデザインした方がいいと思うし、
一部に使いたいなら画像にした方がいいと思うしで。
>>604 和文フォントのASCII文字列は体裁が悪いし、読みにくい。
印刷媒体では昔から普通に「和欧混植」が行われている。
font-family: 欧文フォント, sans-serif; には絶対に対応して欲しい。
和文の部分がユーザー設定になれば、読みにくくなる事はない。
現状だと勝手なフォント(MS Pゴシック とか)になってしまう。
これでは何のために総称ファミリがユーザー設定できるのか分からない。
単なる「見た目」の問題以外にも、国際的な文章を正確に表示したい時に重要。
やはり、文字に対するグリフが含まれているかどうか検証してくれなければ。
何よりも困るのが「ユーザースタイル」で好みのフォントに出来ないこと。
>>605 だからこそ指定しないのがいいんじゃ?
指定しなけりゃ、個人がブラウザで設定してるフォントとかの環境で表示されるわけだし。
下手に指定すると今度はユーザがuser.cssとかで設定しないといけない。
結構居るぞ。
好みの英字にフォントリンクで日本語書体を設定して使ってる人とか。
国際的な文章を正確に表示したい時ってのがいまいち予想つかないけど、
そういう意図の場合は必要な部分にだけspanにstyleで指定とかしてごまかすしかなさそうだね。
>>606 >だからこそ指定しないのがいいんじゃ?
>指定しなけりゃ、個人がブラウザで設定してるフォントとかの環境で表示されるわけだし。
個人的には欧文の部分については、制作者に任しても良いと考えている。
大半が「漢字」や「かな」なのだから、和文の部分がユーザー設定になれば読み難くならない。
あと、和文フォントのASCII文字列より、欧文フォントを適用した方が読み易い場合が多い。
だけど、Operaではこれが通用しない。
>好みの英字にフォントリンクで日本語書体を設定して使ってる人とか。
ユーザー側でフォントリンクに拘りがあるのなら、常にユーザースタイルを適用していれば良い。
というか、当方のOperaではフォントリンクが有効にならないのだが。
基本的にIEにしか効かないと思っていたのだが違うのか?
>国際的な文章を正確に表示したい時ってのがいまいち予想つかないけど、
>そういう意図の場合は必要な部分にだけspanにstyleで指定とかしてごまかすしかなさそうだね。
確かにspan要素でマーク付けして、lang属性を指定して、:lang()疑似クラスという方法も
あるにはある。音声読み上げにも都合が良いのだが、マーク付けが煩雑になるのが欠点。
あ、ホントだ。
Operaはフォントリンクの設定を無視してOperaの設定の方を使っちゃうみたいだ。
これは失礼。
と思ったけど、試してみたらやっぱりフォントリンク効いてるわ。
>>594 糞はないだろう。CSS1準拠なのに、何を求めてんだw
>>589 IE5 は優先順位にバグがあったが、IE6にもあるのか?
>>600 勝手に「あり得ない」とか言うなよ、実際そうなんだから。
起動だってIEとほぼ同じで、表示まで含めたら初回もIEより早い。
表示だけならOperaと変わらないし。
環境が違うんだから勝手に否定するな。
IEと同じ起動速度なら普通に速くね?
早いよ。1.0までは遅かったけど、1.5になってから早くなった。
その話題は、1.5が出たときにこのスレでも話題になって、
1番早いって人も何人かいた。
くっだらねー知ったかの集まりか?
ちったー質問する奴のことも考えろや ゴルァ
OS組み込みのやつより早いってスゴーい
組み込みの癖にIEの遅さは異常
>>591 ここは質問スレだろ。お前の考えを述べるスレじゃあないんだ。
答えられないなら黙ってろ知ったか房が。
>>619 ありがとうございます。答えてください。
うっ
623 :
Name_Not_Found:2006/04/19(水) 17:26:47 ID:ONHiReT4
タイトル *メニュー1
サイドバー コンテンツ
ーーー フッター ーーー
ヘッダーをタイトルとメニュー1
メインコンテンツをサイドバーとコンテンツ
に分けてます
可変幅のサイトを目指して壁にぶち当たりました
*メニュー1は画像ボタンになってます
現在、ウィンドウ幅を狭めるとボタンが消えていってしまいます
この*メニュー1を右寄せして、さらにウィンドウ幅を狭めても
ボタンが消えてしまわないようにする記述方法を教えてください
positionをabsoluteで指定するのかfloatで指定するのかわからずです
よろしくおねがいします
ヘッダにメニュー入れればいいんじゃないの?
>>623 幅がタイトル+メニュー1以下になれば、どうしても隠れてしまうと思うが?
やるならメニュー1をfloat:right;じゃないかな。
>>623 >ウィンドウ幅を狭めてもボタンが消えてしまわないようにする
そのメニューのボタン部分だけを不可変にするって意味?
なんにせよ少しわかりづらいから、ソースの一部を出した方がいいかも
<div id="header" style="width: xxxpx;">
<h1 style="float: left;">タイトル</h1>
<div id="menu1" style="float: right;">
<div class="button" style="float: left;"><img src="button1.gif" alt="ボタンの画像だウンコッコ1" width="100" height="10"></div>
<div class="button" style="float: left;"><img src="button2.gif" alt="ボタンの画像だウンコッコ2" width="100" height="10"></div>
<div class="button" style="float: left;"><img src="button3.gif" alt="ボタンの画像だウンコッコ3" width="100" height="10"></div>
<div class="button" style="float: left;"><img src="button4.gif" alt="ボタンの画像だウンコッコ4" width="100" height="10"></div>
</div>
</div>
とかじゃだめぽ?
627 :
623:2006/04/19(水) 17:53:10 ID:???
>>624 一応ヘッダー部にメニュー1は入ってます
>>625 ”隠れてしまいそうになったらスクロールバー出現”
をやりたいのです
>>626 参考になります
ちょっといじってみます
628 :
Name_Not_Found:2006/04/19(水) 17:57:28 ID:Qrxj0iOV
Firefoxで確認すると、widthの幅が同じ設定にしているにも関わらず、
少しずれて表示される時があります。(コンテンツを真ん中寄せしている場合)
これはコンテンツの内容量によるのでしょうか?それとも仕方ないのでしょうか?
>>627 スクロールバーは普通何も設定しなくても出るべよ。
borderとかpaddingも設定してない?
IEは表示法方がおかしいから、このスレのテンプレ見て修正するといいかも。
632 :
628:2006/04/19(水) 18:04:27 ID:???
>>630 ですよね・・・。大手サイトで確認してもそうなりますし・・。
それを文章化しているサイトとかありませんでしょうか?
人に聞かれた場合、説明出来るようにしたいと思いまして。
>>632 縦スクロールバーが出ると出ないで中央からずれたりするがその事?
テキストの上下に線を引きたいのですが、FireFoxだけズレてしまいます。
---------------------
ダミーテキスト
---------------------
が
---------------------
ダミーテキスト
---------------------
のようになってしまうのです。
CSSは以下の通りで、特に変わったことはしていません。
h1{
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
}
回避方法ありますでしょうか?
>>634 line-heightをcssで指定するといいかも。
>>610 今になっても未だにCSS1適合なのが、糞なんだよボケ。
CSS1適合と謳いつつ、CSS1の適合性を守ってないし。
CSS2の部分実装だっていい加減にやりやがって糞だろうが。
>>612-614 お前等のPC環境が高性能過ぎるんだろ。
IEが2秒程度で起動。Fxは13秒で起動(機能拡張、十数個)。
機能拡張をすべて無効にしても7秒掛かった。それでも遅い。
機能拡張を使わないと、Fxの価値なしだから。やっぱり重い。
あなたのWebコンテンツをHTML4.01Strictに従うように変換するために
使用することができるウェブページテーブル形式アプローチについて
述べているのはどれですか?
A.スペースとリターンで<PRE>タグを使用しているHTMLテーブルをフォーマットする
B.フレームでウェブページを構造化するためにHTMLテーブルを使用する
C.テーブルヘッダーとコラムを作成するためにHTMLタグの代わりにCSSを使用する
D.表にされたテキストをフォーマットするために<PRE>タグの代わりにHTMLテーブルタグを使用する
639 :
635:2006/04/19(水) 19:22:03 ID:???
逆だったw
IEでのwidthはpadding、borderを含む幅
FFなど正しい方は、widthにpadding、borderを含まない幅
>>636 ありがとうございます。
でも、line-heightも設定してみたのですが変わらないようです。
FireFoxだけテキストのベースライン(?)が違うのでしょうか…。
>>640 その部分だけでIE、FOXで確認するとわかるけど、ちゃんとなるよ。
親要素に何か指定してない?例えば下のようにすると、h1にも影響するよ。
<html lang="ja">
<head>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
#kakomuze{ line-height: 250px;}
h1{
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
}
-->
</style>
</head>
<body>
<div id="kakomuze">
<h1>ごりららっぱぱせりんこ</h1>
</div>
</body>
</html>
<li>
<h5><label for="id">メールアドレス</label></h5>
<span><input type="text" id="id"><label for="id2">@</label><input type="text" id="id2"></span>
</li>
li {
position: relative;
}
span {
position: absolute;
top:0;
left: 10em;
}
li要素の子要素のフォーム部品の左位置を揃える目的でこのようなソースを書きました。
IE6ではtype属性の値がtextのinput要素の水平位置が少々右にずれます。
深くインデントを取ったような形になります。
各要素のmargin,padding,text-alignなどを確認しましたが直すことが出来ませんでした。
UAのバグでしょうか?それともどこかおかしいところがありますか?
643 :
640:2006/04/19(水) 20:10:57 ID:???
>>641 元のソースのままでもWindowsのFireFoxではズレなかったので、
原因発見できました。
どうやらMacのFireFoxでヒラギノ書体他一部のフォントをデフォルトにしていると
>>634のようにズレてしまうようです。
こうなるとCSSでどうにかできる問題ではないですね。
ありがとうございました。
ページを#left と #rightという2つのボックスに別け、
#leftの横幅を200px rightの横幅を残りの横幅(?)にしたいのですが
どうすれば良いのでしょうか?できればフロートでやりたいです
>>642 メールアドレス 「フォーム」@「フォーム」
↑
これを埋めたいってことだよね?
h5にfloat: left; を設定してやる方法ではだめ? これだと一応くっつくけど。
>>645 例を一つしか出しませんでしたが実際には
名前 「フォーム」
メールアドレス 「フォーム」@「フォーム」
Webサイト 「フォーム」
のように多数のフォーム部品が配置されているのですがフォームの左端を揃えたいのです。
floatを使うと文字サイズを大きくしてフォーム部品が伸びたときに2段になってしまうため、
親・先祖要素の影響を受けないようにposition:absoluteとしました。
これで左端が揃うはずなのですがtextフォームは余白が出来てしまいます(IE6)。
ラジオボタンなどでは期待した位置に配置されます。
>>644 rightの幅をautoにすればいいよ。
>>647 思いついたことがあるからちょっと待っててくれろ。
650 :
649:2006/04/19(水) 20:45:50 ID:???
>>647 名前、アドレス、サイトを1つのブロックとして、
三つのフォームも1つのブロックとして扱う方法を思いついたんだけど、
フォントサイズ変えられるとずれるからだめだよね。
651 :
649:2006/04/19(水) 20:53:05 ID:???
えっと、一応フォントサイズを変えられても大丈夫な方法思いついたので
参考にならないかもしれないけど書いておきます。ごらんのようにデブデブしてます。
<div style="width: 500px;">
<div style="float:left;">
<li><h5><label for="id">名前</label></h5></li>
<li><h5><label for="id">メールアドレス</label></h5></li>
<li><h5><label for="id">サイト</label></h5></li>
</div>
<div style="float: left;">
<div><input type="text" id="id"><label for="id2"></div><br>
<div><input type="text" id="id"><label for="id2">@</label><input type="text" id="id2"></div><br>
<div><input type="text" id="id"><label for="id2"></div>
</div>
</div>
>>651 フォームの方も<li>にすればいいじゃん。
654 :
647:2006/04/19(水) 21:41:21 ID:???
>>651 例まで書いていただいて恐縮ですが
フォームのレイアウトについては自分なりの方法で解決しています。
>>642のような方法が書き方の誤りなのかUAのバグなのか判別できなかったためこちらで質問しました。
一応自分なりの方法をここに書きます。
<li>
<h5><label for="id0">名前</label></h5>
<span><input type="text" id0="id"></span>
</li>
<li>
<h5><label for="id1">メールアドレス</label></h5>
<span><input type="text" id="id1"><label for="id2">@</label><input type="text" id="id2"></span>
</li>
li {
position: relative;
height: 1em;
margin-bottom: 値;
}
h5 {
position:absolute;
top:0;
left: 0;
}
span {
position:absolute;
top:0;
left: 10em;
}
>>637 > 今になっても未だにCSS1適合なのが、糞なんだよボケ。
IE6が出た当時、見栄を張ってでもCSS2完全準拠を謳えるブラウザは存在しなかった。
IE6がCSS1を仕様とみなして実装したんだから、
バージョンを上げずに勝手に仕様変更したら、むしろおかしいだろ。
> CSS1適合と謳いつつ、CSS1の適合性を守ってないし。
じゃあ、その点だけを必要な時に的確に指摘すればいい。
> CSS2の部分実装だっていい加減にやりやがって糞だろうが。
それは別にIE6に限った話じゃあないし、これも必要な時に的確に指摘すればいい。
あと、CSS2を仕様とみなしているベンダはすでに存在しない。
何度も言うが、W3Cでさえ、CSS1, CSS2.1, CSS3 を仕様とみなしている。
W3Cの作業過程がPRとWDを行き来しているが、
そういうW3Cの一作業グループの内輪な都合などどうでもよくて、
W3Cを含む全ての団体企業がCSS2.1とCSS3を仕様とみなしている。
>>646 確認したところバージョンは1.5で更新の確認でも最新だと言われたのですが、
念のため再ダウンロードしてみたら件の現象は起りませんでした。
そんなこともあるのですね。勉強になりました。ありがとうございます。
N7.1はCSS2.0だから考えざるをえないがな。
>>655 IEが1.0対応の6のままでずっと止まってたくせに
7でも2.0の対応状況が悪い件
* { margin: 0; padding: 0; }
html{overflow:hidden;height:100%;}
body{height:100%;}
body > #left {height: auto;}
body > #right {height: auto;}
#left {
border-left: 1px solid #666666;
border-right: 1px solid #666666;
width: 200px;
margin-left:10px;
background-color:#e4e4e4;
float: left;
height:100%;
min-height: 100%;
}
#right {
overflow:auto;
height:100%;
min-height: 100%;
width: auto;
margin-left:220px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
background-color:#e4e4e4;
}
<div id="left">←</div>
<div id="right">→</div>
というソースなんですが、IEでは#leftの右側に空白ができないのですが
FxとOperaじゃ#leftと#rightの間に隙間ができてしまいます。IEと同じ表示にするにはどうすれば良いでしょうか?
すみません。ミスです、
Operaでは#rightの右側に空白ができ。
Fxでは#leftと#rightの間に隙間ができてしまいます
>>660 >Fxでは#leftと#rightの間に隙間ができてしまいます
#rightのmargin-left:220px;だから。
>>660 >Operaでは#rightの右側に空白ができ。
#rightにoverflow:auto;が入ってるから。
・・・
664 :
Name_Not_Found:2006/04/20(木) 08:00:31 ID:7W4T4Rkz
でIEと同じ表示にするにはどうすれば良いんだ?
ああん?
いやん、そこ、ああん
>>664 IEで表示してスクリーンショット→その画像を配置。
何で見ても同じ表示(ハート
>>664 フォトショで作って画像をペローンと一枚貼っとけ。
ペローン キャッ
669 :
Name_Not_Found:2006/04/20(木) 11:57:30 ID:BN5DlND3
cssで指定した特定のブロック要素の背景色を
印刷する方法はありますか?
media = printとかやってますけど、ダメです。
backgroundプロパティ自体がダメみたいなのですが,,,。
ありますよ。
>>669 プリンタの対応状況と設定に依存するものだから、
できない人間に対しては何をやってもムダ。
あんたのプリンタの設定もできないんじゃないの。
>>669 たとえば IE なら詳細設定の「印刷」→「背景の色とイメージを印刷する」がオンになってない限り
(デフォルトはオフ) Web ページ側でどう指定されていようが印刷されない。
つまりそこはエンドユーザーの設定に依存。作成者側ではコントロールできない。
673 :
669:2006/04/20(木) 14:05:42 ID:BN5DlND3
>672
レスどうもありがとうございます。
つまり印刷用のページはあまり派手に装飾せず、
シンプルにしとけってことですかね。
ありがとうございました。
というよりは、印刷されないと困るような情報は背景等ブラウザの機能に依存されるような配置はしない。ということじゃね?
669が672にしか礼を言ってないことにムカついた。
お 前 は 俺 を 怒 ら せ た
どんマイケル・・。
672以外にまともな回答ないやん。
まぁ ラベルが低いからしかたがないよ
役に立ったかどうかじゃなく、
マナーとして礼を言えない奴は腐ってる
良いこといった
list-style-imageで表示した画像を、文字の大きさにかかわらず、
文字高さの中央に配置することはできるでしょうか?
>>682 一行の場合はbackground-imageのcenterで
せっかく答えたのにお礼言ってもらえなかった><
>>686 まぁそういうクズ野郎だっているさ。
俺は知識の再確認だと思って答えてるよ。自分のためだと思えば礼など言われなくてもって気になれる。
どうでもいい。
強制するようなことでもないし。
レスちゃんと嫁
オマエガナー
何か前にもこの問題でもめてたな・・・
ブラウザの設定及びプリンタの能力と設定の両方に依存する問題でFA。
つぎの質問どぞ〜
あのーー いいやっ
テレ屋さんなんだからもお〜〜〜っ!
その前にまだ答えてない質問に答えてあげなよ
お前が答えとけ
699 :
698:2006/04/20(木) 17:18:30 ID:???
ちんぽっぽ
700 :
698:2006/04/20(木) 17:36:13 ID:???
プギャー
昼は使えないバカばかりだな
質問に答えてもらえないからってそれかよ
はア? 質問なんかしてないよ。むしろ答える側
じゃ、まだ答えてない質問に答えてあげたら?
ちんこまんこ
で、答えてない質問ってどれ?
707 :
Name_Not_Found:2006/04/20(木) 20:24:49 ID:AyB46ft0
質問です。
a:hoverでbackground-imageを指定して
リンクにポインタが触れたときにリンクの背景に画像を表示しようとしたのですが、
IEではマウスのフォーカスが外れたときに背景の画像がリンクに触れたときの
ままなのですが、解決策って無いのですか?
IEを意識しながら作るのがなんだか面倒くさくなってきました。
>>707 れっつIE廃棄。
じゃなくて、普通にならないんだが。
aから外れたときの所に何らかの背景を指定したら?
>>709 そんなことする必要ないじゃん。
どうやれば、逆に背景そのままにできるんだろう。
711 :
Name_Not_Found:2006/04/20(木) 21:27:45 ID:GNiDut1l
NNだと思ったとおりに動きますが、IEだとうまくいいきません。
どうやたら、直りますか?
heml側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title><link rel="stylesheet" type="text/css" href="index.css"></head><body>
<div id="1"><img src="image/1.png" width="600px" height="240px"></div>
</body></html>
css側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html><head><title></title><link rel="stylesheet" type="text/css" href="index.css"></head><body>
<div id="1"><img src="image/1.png" width="600px" height="240px"></div>
</body></html>
712 :
711:2006/04/20(木) 21:28:16 ID:GNiDut1l
訂正
css側
html,body{
margin:0px;
background:white;
}#1{
width:100%;
height:240px;
background:#000000;
text-align:right;
}
・・・・?
HTMLとCSS・・・?
>>711 まず width="600px" height="240px"を width="600" height="240"に直せ。
そして何がやりたいのかを書け。
715 :
711:2006/04/20(木) 21:31:01 ID:GNiDut1l
フロートでボックスを←と→にわけたんですが、
右側のボックスはフロート:left とするより
マージンで調整したほうがいいんですか?
フロートでボックスを←と→にわけたんですが、
右側のボックスはフロート:left とするより
マージンで調整したほうがいいんですか?
ww
>>718 やりたいことと趣味による。
俺はフロートのleftとrightで分けるのが好き。
フロートでボックスを←と→にわけたんですが、
右側のボックスはフロート:left とするより
マージンで調整したほうがいいんですか?
>>714 711じゃないんですが、なぜpxを外すのですか?
>>722 CSSの問題じゃなくてHTMLの問題だからスレ違い。
それくらい答えてやれよ。
そんなくだらないレスするくらいなら。
スレ違い。
729 :
724:2006/04/20(木) 23:06:09 ID:???
>>729 騙るならせめて文体くらい真似ろよ。間抜けだな。
ぁぁ ラベルがラベルが・・・
>>715 それは文書型宣言といって、HTMLがどのバージョンに基づいて記述されているのかを宣言するもので、タグではないよ。
711の時点でおかしいんだよな
>>707に誰かまともな回答してあげろよ。
例えば、 <a href="omame.html">おまめちゃん</a> にカーソルを合わせた時に、背景に画像を表示したい場合。
htmlで <a href="omame.html" id="on-omame">おまめちゃん</a> とし、
cssで、
#on-omame{ display: block; width: 100px; height: 20px;}
a#on-omame:hover{ width: 100px; height: 20px;
background: url(img/on-omame.gif);
background-repeat: no-repeat;}
とするとか。
>>735 ていうかマジで背景画像そのままになる現象って再現すんの?
大体おまえのソース、質問者のとどう違うわけ?
>>735 おまえイイ奴だな。
でもさ、理解出来たのかどうかレスもしない、
ソースも出さない
>>707にそこまで親切にはなれんな。
740 :
736:2006/04/20(木) 23:31:41 ID:???
1.707の言葉を普通に受け止めれば735のようになる→おまえのソース、質問者のとどう違うわけ?
2.そのソースのようなソースでは背景がそのまま残るという現象は再現しない。
707の質問時に、:hoverのソース書いたが再現しなかった、ということ。
>>739 別に俺はイイ奴じゃないよ。 ただ自分の復習のためにやってるだけだから。
そういう考えでレスしないと、「礼も言えねえのかこのビチグソ野郎がっ!!!」って嫌な気分になるから。
意味分からん。
735はちゃんと答えてるんじゃない?
>>742 やってわからなかったんだが、
どういう条件のトキに再現するんだ?
背景残したいの?
>>741 おまいさんのスタンスはどうでもいいが、
じゃあ「>誰かまともな回答してあげろよ。」なんて言わないこった。
あ、わかった。
>>740はちょっと勘違いしているな。
>2.そのソースのようなソースでは背景がそのまま残るという現象は再現しない。
>背景がそのまま残るという現象は再現しない
>>707のレス
>IEではマウスのフォーカスが外れたときに背景の画像がリンクに触れたときの
>ままなのですが、解決策って無いのですか?
>背景の画像がリンクに触れたときのままなのです
これでわかったかな?
>>747 いや、そこは読んでるんだが。
普段は背景無しで、:hoverしたときにのみ背景画像アリなんだろ?
>>707 で、:hoverさせたマウスのフォーカスがなくなった状態、即ち:hover状態でなくなっても、
「リンクに触れたときのまま」=:hover状態のように
背景画像が存在したまま、という意味ではないのか?
>>748 違う。
元に戻して欲しいと言ったが、そんなも度に戻らないようなソースをどうやったら書けるんだ?
ということ。
>>749 >マウスのフォーカスが外れたときに背景の画像がリンクに触れたときの
>ままなのですが、解決策って無いのですか?
背景の画像がリンクに触れたときのまま=hover状態。
解決策=hover状態を解除する。
・カーソルが外れたときに、hover状態のままになってしまうのですが、解決策って無いのですか?
普通に日本語解釈するとこうなるんだが。
>>750 それは知らんがな。
とりあえず
>>707はhover解除されないようになってるんだから、
そうならないソースの例を書いただけ。
>>751 そうだよ。
だから普通に:hoverのソースを書けば
>>735のようになって、
hover状態のままになる、なんてことはないだろう?
なのに
>>707はどうやってカーソルを外したのにhover状態のままにできるんだ?ということ。
それがわからないと、解決策も何もないだろうが。
とりあえず・・・当の本人707がいないと何とも
>>753 普通に書いたらhover解除されるわけだ。
で、
>>707はソースを晒していない。
ということは
>>707は間違ったソース=hover状態のままになってしまうソースを書いている可能性がある。
だったらとりあえず正しいソースの例を出して、やらせてみる。
それで解決すればそれでよし。解決しなければソースの全体ないし一部分を晒させる。
でいいじゃん。
IEでhover状態が残ってしまうバグ、前に再現したことあるよ
丸角使おうとしてa内にdisplay:block;にした空span入れたりごちゃごちゃしたソースだったけど
スクロールしたりリロードしたりすると直ったから、peekaboo bug の一種だろうと思った
759 :
707:2006/04/21(金) 01:29:24 ID:MNBemluh
長らくレスできなくてすみません。
問題のソースです。
HTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="navi">
<a href="./">HOME</a>
<a href="./">About</a>
</div>
</body>
</html>
760 :
707:2006/04/21(金) 01:29:58 ID:MNBemluh
stylesheet
.navi {
width: 700px;
height: 50px;
background-image: url("./img/b001.gif");
}
.navi a {
display: block;
float: left;
padding: 1em;
width: 3em;
text-decoration: none;
font-weight: bold;
border-right: groove red;
color: lightskyblue;
}
761 :
707:2006/04/21(金) 01:31:13 ID:MNBemluh
.navi a:hover {
color: silver;
background-image: url("./img/b005.gif");
}
.navi a:active {
color: white;
background-image: url("./img/b006.gif");
}
>>758の言うとおりa要素にdisplay:block;入れてます。
FireFoxで表示できるので構文が間違っているとは思えません。
IEのバグでしょうか?
やりたいことはFlashで作るようなグラフィカルなナビゲーションバー
をCSSで再現したいと思っています。
おいおい、ココは2ちゃんだぜ。善意も悪意もごちゃ混ぜOK
>>707 >>735を試してからレスしようや。せっかく書いたのに。
ちなみに解決方法は、background-repeat: no-repeat; を入れること。
少なくとも俺の環境のIE6.0ではそれで解決した。理由は激エロな人が教えてくれると思う。
764 :
707:2006/04/21(金) 02:13:22 ID:y7nhjzve
>>763 ありがとうございました。
そしてすみませんでした。
しばらく読まないうちにレスがいっぱいあったので
試すよりも、まず私自身がレスしないと、とあせっていました。
background-repeat: no-repeat;
では、画像一枚分なのでスペースがあいてしまったので
background-repeat: repeat-x;
で横に敷き詰めスペースを埋めることで解決いたしました。
書き忘れましたがネスケ4です。
>IEではマウスのフォーカスが外れたときに背景の画像がリンクに触れたときの
>IEを意識しながら作るのがなんだか面倒くさくなってきました。
>書き忘れましたがネスケ4です。
・・・・・・・・・・?
どうみても精子ですみたいなシュールさだな。
書き忘れましたがヨネスケ4です。
769 :
1/2:2006/04/21(金) 23:03:50 ID:???
下記の状態で、
・上のテーブル内のテキストが寄せられない
・下のテーブルでは結合セルの高さが変更されるのに、上のテーブルでは変更されない
のは何故でしょうか。
−−CSS−−
.a td{
width:30;
height:30;
align:center;
valign:top;
}
−−−−−
770 :
2/2:2006/04/21(金) 23:04:55 ID:???
<table class="a" border>
<tr><td colspan="7" height="60">a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td colspan="7" height="60">a</td></tr>
</table>
<table border>
<tr><td colspan="7" height="60">a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
<tr><td colspan="7" height="60">a</td></tr>
</table>
確認してみたが特にテーブル変わらないが?
つーか、表記おかしいし。
align:center;→text-align:centaer;
valign:top;→vertical-align:top;
のことか?
>>771 もちつくんだ! text-align:centaer;→text-align:center;
>>770 >>8 を読んどいた方がいいよ。
773 :
Name_Not_Found:2006/04/22(土) 17:07:11 ID:NKKl+xTY
CSSでボックスの中にボックスをいくつか段上に入れて
親ボックスの上に文字を入れるとNetscape 7.1で隙間が生じます。
IEやFirefoxだと正常に動作します。
774 :
Name_Not_Found:2006/04/22(土) 17:09:13 ID:NKKl+xTY
HTMLは以下の通りです
<body>
<div class="box-base">
<div class="box-top"></div>
<div class="box-middle">
a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="box-bottom"></div>
</div>
</body>
775 :
Name_Not_Found:2006/04/22(土) 17:10:10 ID:NKKl+xTY
CSSは次の通り
.box-base {
vertical-align : bottom ;
width : 200px ;
height : auto ;
background-color : #ff0000 ;
}
.box-top {
vertical-align : bottom ;
width : 150px ;
height : 7px ;
background-image : url("image/box-top.bmp") ;
}
.box-middle {
font-size : 12px ;
vertical-align : bottom ;
width : 150px ;
height : auto ;
background-image : url("image/box-middle.bmp") ;
}
.box-bottom {
vertical-align : bottom ;
width : 150px ;
height : 7px ;
background-image : url("image/box-bottom.bmp") ;
}
776 :
Name_Not_Found:2006/04/22(土) 17:11:28 ID:NKKl+xTY
<div class="box-base">の前に何か文字が入ると
NetScape 7.1で<div class="box-middle">と<div class="box-bottom">の間に
1pxの隙間が出来るのですが何故でしょうか?
IEやFireFoxだと正常に出ます。
vertical-alignも一応試しましたが解決されず。
777 :
769:2006/04/22(土) 17:52:49 ID:???
>>776 あのさ、ソース出してくれるのはいいんだけどさ、
background-image : url("image/box-top.bmp") ; とかされてもさ、困るじゃん?
おまけにbmpなんか背景画像にするなよ。
それに最近↑こういう書き方してる人多いけど、正しい書き方じゃないよ。
background-imageを指定したら、最低background-repeatとbackground-colorも併記しておくべき。
>>778 は?別にそんなもの気にしない人間なら書かなくたっていいに決まってるだろ。
bmpはアレだが。
>>779 そうかあ?だったら最初からbackground:url(hoge.gif);ってしとけばいいのに。
780は根本的に何か分かってない悪寒
アフリカでは良くある事。
783 :
780:2006/04/22(土) 19:53:05 ID:???
みんな中途半端が好きなんだな。
俺は
>>776は再現しなかったから、あとよろしく。
background:url(hoge.gif);を中途半端と思わない783に不安。
785 :
780:2006/04/22(土) 20:01:12 ID:???
>>784 いつまでもウルセー野郎だ。
知っとるよ、それも正しくない事くらいはな。省略したいなら、そこまでしろってこった。
大体そういう事いうヤツが絶対いると思ったから「正しくない」って書いたんだ。
間違ってるとは言ってないし、思ってない。
早く質問者に回答汁。
>>785 backgroundプロパティとbackground-imageプロパティの違いを勉強してこい。
background-imageでイメージだけ指定したときの動作と、
backgroundでイメージだけ指定したときの動作とは異ならなければならない。
787 :
780:2006/04/22(土) 20:05:30 ID:???
今度は仕様書マニアかよ。いいかげんにしてくれ。
仕様書も読まないで回答者になろうたぁ、ふてえ野郎だ。
僕の青春イメージは縦リピートできるでしょうか
>>776 問題があるのはbox-middleの方。
font-sizeが悪さをしているらしい。
詳しい原因は分からないが、恐らくバグ。
font-sizeプロパティを外せば問題ない。
>>791 そもそも、省略形は良いんだが
プロパティに於いての初期値の問題
このスレのタイトルにある【55th】の「th」って
threadの略語かと思ってた。
794 :
Name_Not_Found:2006/04/22(土) 23:28:01 ID:NKKl+xTY
>>790 font-sizeをはずしたらうまくいったんですけど、
はずすわけにもいかんのです。
バグかと思って探してみましたが見つかりませんでした。
まさか、新手ですかね。
>>794 フォントサイズ指定を外すわけにもいかないって、おまえ
フォントサイズなんてブラウザの設定でユーザは自由に変えられるんだぞ。
サイズ変えたら見られなくなるようなデザインはWebでは無理。
レイアウトから考え直せ。
796 :
Name_Not_Found:2006/04/22(土) 23:39:11 ID:NKKl+xTY
空divnなんてありすか
>>796 角丸レイアウトのために空b連続なんてことをやらかす輩もいるくらいだぞ。
798 :
Name_Not_Found:2006/04/23(日) 00:12:44 ID:m3qajQxS
質問です。
div の背景の指定で、上から166px目から背景画像の繰り返しを行おうと思い以下のようにしました。
#container {
background-image: url(../img/contents/contents_back.jpg);
background-position: 50% 166px;
background-repeat: repeat-y;
}
しかし、背景は上から敷き詰められてしまいます。
background-repeatをno-repeatにすると、きちんと上から166px目から表示されるのですが、当然繰り返しはしてくれません。
上から何ピクセル目からの繰り返しの方法で、良い方法があればご教授願いたいと思います。
margin
800 :
Name_Not_Found:2006/04/23(日) 09:10:07 ID:6qC85mTm
.clear { clear : left ; }でネスケだとfloatの解除が出来ない。
もっとも少ないソースで↓の事がやりたいです。
名前:あああ
住所:東京
年齢30歳
これを
<dt>名前<dt><dd>あああ</dd>・・・というように囲って
#dt{clear:both;width:100px;}
#dd{float: right;width:100px;}
みたいにしたのですが、右側が一段ずれて表示されます。
良い方法は無いでしょうか?
803 :
Name_Not_Found:2006/04/23(日) 18:51:56 ID:CpOnqsmf
>>798 縦にリピートだから
上にも下にもリピートしているのですよ。
>>802 >もっとも少ないソースで↓の事がやりたいです。
<p>名前:あああ<br>住所:東京<br>年齢30歳</p>
画像でいんじゃね?
>>802 どっちかというと↓じゃね?
#dt{float: left;width:100px;}
#dd{width:100px;}
dt {
float:left;
clear:left;
width:100px;
}
dd {
width:100px;
}
808 :
800:2006/04/23(日) 21:11:10 ID:6qC85mTm
.clear { clear: left ;}を空divで
<div class="clear"></div>っやっても
IEやFirefoxだとできるのにネスケだと出来ないんですよ。
空だからいけないんでしょうかね?
空要素は意味的によくないに決まってんだろうがゴルァ
意味的にってどういうことよ
情報に意味づけするのがタグってことで。
812 :
809:2006/04/23(日) 22:24:39 ID:???
× 空要素
◯ 内容が空の要素
<ul>
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
</ul>
を
li {
display:inline;
}
で横並びにしてみたら半角スペースが入ってしまいます。
表示上で
"ほげ1ほげ2ほげ3ほげ4"が理想なのに"ほげ1 ほげ2 ほげ3 ほげ4"
となってしまいます。
htmlテキストを
<ul><li>ほげ1</li><li>ほげ2</li><li>ほげ3</li><li>ほげ4</li></ul>
と変更してみたらなぜか半角スペースは消えました。
改行が半角スペースを生み出している模様です。
htmlテキストを変更することなく半角スペースをなくす方法を教えてください。
>>813 確か半角スペースをレンダリングする仕様なんじゃなかったかな?
IEでは改行しても半角スペースをレンダリングしない模様・・・
<ul><!--
--><li>ほげ1</li><!--
--><li>ほげ2</li><!--
--><li>ほげ3</li><!--
--><li>ほげ4</li><!--
--></ul>
きたねぇ〜w
li { float: left }
marginとかpaddingとか信用できないんで
空div使って位置を調整しまくってるんですが
やっぱこれって止めた方がいいですかね。
ここは嫌なものから目をそらさず、
立ち向かって行こうじゃない!っていう精神が必要ですかね。
何故信用できないのかわかんないから何とも言えないけど。
それで出来てるんなら良いんじゃないの?
>>813 インライン要素ってそういうものじゃんか
823 :
Name_Not_Found:2006/04/24(月) 00:41:28 ID:0IJuL0gX
初心者板で回答が得られなかったので、こちらでも質問させていただきます。
824 :
Name_Not_Found:2006/04/24(月) 00:43:21 ID:0IJuL0gX
全称セレクタで色々リセットしちゃうと、フォームのボタンにも適用されますね。
例えばそこだけ回復したい場合には、どうすればいいでしょうか?
>>825 具体的には、どういう風に指定すればいいのでしょう?
フォームのボタンってIEだと、defaultでは角丸で立体的なデザインですが、
それを指定する方法が判らないのですが…
>>825 初心者スレでも答え貰ってたろ。どこで聞いても同じ。
フォーム関連のCSS指定の仕方が判んないなら、正直にそう言うべき。
ググれば判るような事には答えないけどな。
>>825 ん?
borderを定義しておけばいいんじゃない?
そのボタンという要素に再定義すれば。
>>829 どこで聞いても同じというのは、具体的な方法は教えてもらえないという事ですか?ここでは?
質問しているのはずばり、フォーム関連のCSS指定の仕方で、正直に言っているつもりなのですが…。
ググっても、出てこないのでここの質問スレッドで伺っているのですが……
>>830 ブラウザdefault(IE6の場合)の“角丸立体”を再定義する方法がわからないのです…。
>>831 最初の質問の仕方では、同じ答えしか出ないって言ってんだ。
全称セレクタなんて、関係ないだろ。
type=buttonとした場合、ブラウザによって指定された汎用ボタンが表示される。
それが嫌なら、type=imageにでもして、好きなようにしろ。
>>833 全称セレクタでリセットしてしまうと、私がしたいような再指定は出来ないという事でしょうか?
おっしゃるように、結局はtype=imageで偽のボタン画像作って対処していますが、それしか方法はないのですか?
この場合、フォームのボタンで例えていますが、キモは全称セレクタで指定した場合に
特定の要素だけを回避する方法があるのでしょうか、という質問です。
>>834 全称セレクタで何をリセットしてるんだ?
使い方を勘違いしてるとしか思えん。
しょうもない質問には皆食い付きいいなあ。
>>802 <dl compact><dt>・・・・・・ </dl>
とやると改行が入らない。 もう見てないだろうけど、質問した時間帯がまずかったな。
自分が答える時間帯が正しいと
839 :
Name_Not_Found:2006/04/24(月) 02:05:47 ID:tREBE9gR
すいません質問です
ブログ内検索のフォームの入力欄の横に画像のボタンを配置していて
それらを垂直中央揃えにしたいのですがうまく行きません
alignやvertical-alignなどで指定みても駄目でした
どなたかお力を貸してもらえないでしょうか?
一応ソースを張っておきます。
<div class="module-content">
<form method="get" action="
http://***.jp/mt/mt-search.cgi">
<input id="search" name="search" size="15" class="form_space"/>
<input id="search" type="image" value="検索" src="
http://***.jp/mt/tmpl-image/searchbtn.gif" class="form_image"/>
</form>
</div>
一番使える本って何かな?
印刷して店頭に並ぶ頃になると古くなってしまうんだろうけど。
そこをあえて、ここの神たちに聞きたい。
>>839 その質問では、何に対して垂直縦方向なのかわかりません。
>>7のFAQは読みましたか?
845 :
839:2006/04/24(月) 02:51:44 ID:tREBE9gR
>>843 すいません
>>7は読んでいませんでした。
フォームを含んでいるdiv要素に対して垂直中央方向にしたかったのですが
今7を読むとdiv要素に対しては出来ないという事なのでしょうか?
>>845 今いち意味がわからんが、フォームとイメージの下部分を水平にそろえたいってこと?
>>845 ブロック要素を垂直中央に指定するCSSのプロパティは無いからね。
848 :
839:2006/04/24(月) 03:17:43 ID:tREBE9gR
>>846 分かりにくくてすいません;
えーと・・・、フォームはブログ内検索のフォームなのですが
そのフォームボタンに画像を使っていて、それぞれ高さが違うので
二つの中央部を水平に揃えたいんです。
849 :
839:2006/04/24(月) 03:20:43 ID:tREBE9gR
>>847 ありがとうございます。
ブロック要素に対してはできなんですか;
ボタン部分の画像の高さを合わせるしかなさそうですね。
>>848 だったらmargin使って調整すりゃいいじゃん。
>>835 では、具体的に
* {
background-color: transparent;
}
と、背景をtransparentとしますと、これだけでもうまず、ボタンの角が丸くなくなりますよね?
background-color: transparent;
を、全称でやるなと言われるかもしれませんね。
ていうか初めから俺んとこではボタンの角なんて丸くないわけだが。
OSに依存する描画になってるものを、
CSSだけでどうやってそれぞれで振り分けて指定できると思ってんの?
全OSの調べるの?
ああ、OSだけじゃないな。個人でデスクトップテーマ変えてたらそれだけで駄目だ。
デフォルトは存在しないと言っていい。
823 名前:Name_Not_Found 投稿日:2006/04/24(月) 00:41:28 ID:0IJuL0gX
初心者板で回答が得られなかったので、こちらでも質問させていただきます。
824 名前:Name_Not_Found 投稿日:2006/04/24(月) 00:43:21 ID:0IJuL0gX
全称セレクタで色々リセットしちゃうと、フォームのボタンにも適用されますね。
825 名前:Name_Not_Found sage 投稿日:2006/04/24(月) 00:44:02 ID:???
例えばそこだけ回復したい場合には、どうすればいいでしょうか?
なんで3レスも使うんだよ。しかも最後がsageだから微妙に823-824の続きなのかどうか、わかりにくくなってるし。
つまり全焼セレクタでリセットしてしまった、フォームのボタンを回復したいわけだな?
んで、もう一度定義しろって言われたけど、フォームデフォルトスタイルがわからんと。
そのデフォルトの値を教えてくれと、でも誰も知らんと。こういうことか。
全焼セレクタ使わなきゃいいんじゃないの? どうしても使う必要あんの?
使う必要があるっていうなら微力ながら俺も調べて見るけど。
フォームのデフォルトスタイルの値なんてあるのかどうか怪しいけど。
結局のところ
>>851は各要素にCSSを指定する方法を知らないんだと。
どっかで半端に聞きかじって、セレクタ=全称セレクタしかないと思ってるんだろ。
* {
background-color: transparent;
}
になんの意味があるんだ?
見てわかんないの?
意味がないことは分かる。
もっとちゃんと勉強しろよ
バ関西人か
* {
background-color: transparent;
}
>>867の意味がわかんない奴って、なんも理解せずにcss使ってるんだろうな
>>868 御託はいいから、とりあえずその意味とやらを教えてよ。
意味なんて無いって事でしょ
釣りだよね?
わかんない奴なんているの?
まさかねー?
875 :
Name_Not_Found:2006/04/24(月) 17:07:38 ID:7vccOUNH
わかってるよ
↓おまえわかってないんだろ?
こんなスレで矢印かよ。
>>867 これやるとブラウザが透けてデスクトップが見えるようになるんだよね><
横に並んだ文字列を正しく整列させる方法を教えてください。
どんな風に整列よ
>>879 <ul><li>めにゅー1</li><li>めにゅー2</li><li>めにゅー3</li></ul>
にli {float:left}を指定すると、
めにゅー1 めにゅー2 めにゅー3
と表示されます。
しかしブラウザの幅が狭いと
めにゅー1 めにゅー2 め
にゅー3
と表示されます。
変なところで改行されないようにしたいのです。
ブラウザの幅が文字列よりも狭い場合、文字列を改行させるのではなく
横スクロールバーが出るようにしたいのです。
ブラウザの幅が狭いと
めにゅー1 めにゅー2
めにゅー3
と表示されます。
要するにメニューを何が何でも横一列で表示させたいのです。
ulとliのwidthをちゃんと設定してあげればいいんでない?
>>868 いや、俺もよくわかんない無知野郎だけど
デフォルトスタイルを殺すってことなの?
教えて天才君!
余裕で流れをぶったぎりだけど
みんなCSSって1つのファイルにどーんと書いてる?
HTMLなりXHTMLのモジュール毎に分けてたりする?
わけない。
分ける必要が無い
分けたいのはHTMLに直に書いてる。
>>856 >フォームのデフォルトスタイルの値なんてあるのかどうか怪しいけど。
私も、ソコこそががすごく知りたいところでして…。ほとんど興味の問題です。
再現したいレンダリング・イメージを達成できないというのではないんですね。
>>857 むしろ、今までが全称セレクタは使わないやり方でした。
>>880 display: block; とするのはどうでしょうか。
widthも指定して。
>> 883
ブラウザー毎で、違うdefaultスタイルをもっていますね?
それを再定義してしまいたい場合にも、全称セレクタは役に立ちますよ。
CSSはブラウザごとに分けてる。
>>888 そういうことじゃなくて、全称セレクタで
background-colorをtransparentする意味がわからんつーことじゃね?
>>884 ページ数がバカみたいに多い時はカテゴリ別にわけることがある。
MAC IEは一気にCSSとCSSで指定した背景画像を呼んでるっぽいから
あまりにでかいCSSだと一発目の表示に偉い時間がかかる。
・・・?
それ「ページ数がバカみたいに多い時」じゃなくて
「ファイルサイズがバカみたいなデカい時」ジャネーノ?
>>894 俺もわからんよ。ぜひ教えてほしい。
元の質問者はブラウザデフォのボタンが変わると言ってるが、
俺のブラウザでは何も変化しない。
だから指定する意味がわからんのだよ。
background-colorがtransparentになるんだよ。
(´・㈈ ・`)
>>898背景色が透明になるってことズラ
(´・㈈ ・`)いちいち指定する意味はわからんズラ
(´・㈈ ・`)指定する意味を誰か教えるズラ
>>899 未知のブラウザの基本の背景色が#FF0000だったら目が痛いから
多分そんなノリ?ズラ
ん?
基本背景色がff0000だったら、transparentにしたらぜーんぶff0000にならないか?
基本背景色ってOSの背景色のことだよね?
902 :
Name_Not_Found:2006/04/25(火) 14:01:28 ID:j4ZcAxvW
あるDVIのボックスをページのど真ん中に表示させたいです。
昔、テーブルのなかにテーブルを書いてalign=centerとかやってたやつです。
cssではどうすればいいでしょうか?
width: 100%;
margin: auto;
とやると左右でセンタリングされますが、天地は無理でした。
皆さん ずいぶん釣られやすい体質ですなぁ・・・
釣りでした、は敗者の弁。
906 :
902:2006/04/25(火) 14:09:41 ID:j4ZcAxvW
>903
レスどうもです。
探したのですが見つかりませんでした。
なにか方法はありますでしょうか?
>>906 探した?うそつけ。
テンプレ
>>7 の F A Q 読 ん だ の か ?
>>907 レスどうもです。
該当するようなものは見あたりませんが?
他の方なにか方法はありますでしょうか?
910 :
Name_Not_Found:2006/04/25(火) 14:24:44 ID:j4ZcAxvW
>907
レスどうもです。
7を読んで解決しました。
過去ログなんて1秒も見てませんでした。すみませんでした。
>該当するようなものは見あたりませんが?
>該当するようなものは見あたりませんが?
>該当するようなものは見あたりませんが?
>>900 そんならbodyを#fffしたほうがマシじゃないか。
結局意味はないってことね。
君にとっては意味の無い事かもしれないね。
君が何をどう思うか何て事はわからないし興味も無い事だが。
>>914 ところがこっちは君にとっても興味がある。
君には意味のある事なんだろ?
それを教えて欲しいんだよ。
意味は書いてある通りだ
それがわからないと言うから、勉強不足だと言ったのだ
でも、君は本当はわかっているんだろ?
>>912 IEで試せよ、真っ赤になるから。
OSの背景色設定を赤にして*{background:transparent;}
それは、IEの仕様だろ
>>917 IEの背景設定じゃなくてOSの背景(デスクトップ)?
壁紙がそのまま背景になるのか、Windowsは便利だな。
おらマカーだからわからね。
*{background:transparent;}
どっちにしてもコレでボタン変わるわけじゃないからもういいだろ。
background-color:transparent;の意味はみんなわかるだろう。
しかし何故*{background-color:transparent;}なのか。
・この指定によるメリットがあるのか。
・この指定をしなければ実現しないデザインがあるのか。
そこがわからないと、無意味としか思えない。
>>920 ボタンの背景色も変わるよ?真っ赤っかww
>>921 そう思うなら、それでいいんじゃない?
それで君の事を無知だなんて、誰も責める事は無いと思うよ。
>>923 他人を勉強不足呼ばわりして悦にいってるヤツに言ってくれ。
<html><body>
<button>BUTTON</button>
<button style="background-color:transparent;">Transparent BUTTON</button>
</body></html>
こう↑かくとこう↓なる。
ttp://uppp.dip.jp/gazou/src/1145950557540.png *セレクタで指定すればこの三つのブラウザではすべて右側のボタンと同じになる。
でも何の意味があるかは不明……。
>>919 デスクトップの背景色じゃなくてウィンドウのデフォルトカラー。
要するに無指定だと
html { color:WindowText; background-color:Window; }
って状態になってるってこと。
IEでは独自の色指定のほかにOSの配色を引き継ぐ設定も出来て、デフォルトではこっちになってる。
もしも未知のブラウザでdivやらpやらの背景色が#FF000なら
*{background-color:transparent;}は意味があるかもしれない。
お前らは意味がわかっているが、使いどころがわからないってだけだろ?
質問した人がいないからもうドウデモイインジャナイ・・・・・?
930 :
Name_Not_Found:2006/04/25(火) 19:31:11 ID:MbQjNeUf
float:left; で右側に続けたBOXの高さに、左側のBOXの高さを強制的に合わせるにはどうすればいいでしょうか?
-----HTML-------
<div class="mother">
<div class="daughter-left"> hogehoge </div>
<div class="daughter-right"> fugofugo </div>
</div>
-----CSS-------
.mother { height: auto; border-width: 0px; }
.daughter-left { height: 100%; float: left; border-width: 1px; }
.daughter-right { border-width: 1px; }
と、やってみたんですが、daughter-right の中身がどんどん増えたときに、daughter-leftのBOXの高さが daughter-rightのBOX高さに揃ってくれません。
motherの高さの100%になってくれると思ったんですが…
散々外出
cssではできません
テーブル使えば?
>>930 rightに色々書き込んだり、画像を貼ったりすると、
leftとrightの上辺の高さがチョメチョメpxズレます。 ってこと?
それともrightが落ちちゃうってこと?
>>937 よく読めばわかりそうな・・・
てかもう答えでてるし
ああ、高さって縦の長さって意味か。
940 :
まいるー。:2006/04/26(水) 00:57:49 ID:xWSjxK05
二次元コードを自分のホームページや宣伝版、掲示板に搭載することは可能でしょうか?誰かやり方おしえてください!
>>940 QRコードとかの作成ソフトは探せばあるよ。
942 :
まいるー。:2006/04/26(水) 03:17:04 ID:xWSjxK05
auの携帯買ったとき一緒についてきたソフトでコードは作れたのですが、載せ方がどこにも書いてないんでわからないんです
(;〜;)
CSS関係ないじゃん。スレ違いだっつーの。
947 :
Name_Not_Found:2006/04/26(水) 16:37:51 ID:DBYW0EMu
tableの枠線の表示が、おかしいです。
本来表示されるべきでないところに表示されているみたいですが。。。バグ?
環境:MacOS10.3.9+safari1.3.2
ソース:
css↓
table{border-collapse:collapse;}
td{border:1px solid}
td.noborder{border:none;}
html↓
<table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td colspan="2" class="noborder">2-2+3 border:none;</td></tr>
<tr><td>3-1</td><td colspan="2" class="noborder">3-2+3 border:none;</td></tr>
<tr><td>4-1</td><td colspan="2" class="noborder">4-2+3 border:none;</td></tr>
<tr><td>5-1</td><td>5-2</td><td class="noborder">5-3 border:none;</td></tr>
<tr><td>6-1</td><td colspan="2" class="noborder">6-2+3 border:none;</td></tr></table>
キャプチャ:
ttp://homepage3.nifty.com/catfood/up/src/up4881.gif win2000sp4+firefox1.5.0.2のキャプチャ↓
ttp://homepage3.nifty.com/catfood/up/src/up4880.gif safariのほうは、5-3のtdの上下にborderが表示されてしまいます。
948 :
947:2006/04/26(水) 16:43:21 ID:???
小出しですみません。
ちなみに、td個々にborderの色を変えて検証したら
5-3の上下のborderは5-2のborderが伸びているようなのです。
>>948 ホントだね、Safariだけおかしい。mac用FX、Opera、iCabは大丈夫。
バグ報告したらいいんじゃないかな。
タイトルバーに文字を流す
<script><!--
msg="hoge hoge"
msg+=msg
IE4=(navigator.appName==
"Microsoft Internet Explorer"&&
navigator.appVersion.charAt(0)>=4)
function titlemsg(){
msg=msg.substring(2,msg.length)+msg.substring(0,2)
document.title=msg
}
if(IE4)setInterval("titlemsg()",250)
// -->
</script>
これを外部CSSファイルから読み込ませるには
どうしたらよいのでしょうか?
ガイシュツかもしれませんが、急いでいるので聞かせてもらいます。
いや、それCSSじゃないし…。
953 :
951:2006/04/26(水) 18:23:33 ID:???
ごめんなさい
スレチでした...。
おまいっていう奴は・・・
955 :
947:2006/04/26(水) 20:43:42 ID:???
バグでしたか。
検証・誘導・変わりに報告してくれた方ありがとうございました。
957 :
Name_Not_Found:2006/04/26(水) 21:24:46 ID:2cPR75cR
ま、マジで落っこったの?それ。
コラだろ…
>>955 詳しいことはバグ辞典スレッドにも書いておいてね。
カルガモ.ヒナ{ display : none }
吹いたけど、哀れな話だ。
963 :
Name_Not_Found:2006/04/27(木) 02:16:12 ID:Gvga/D5H
<ul><li>blah blah</li></ul>
ul {
text-align:right;
border-top:1px solid #000;
}
li {
display:inline;
padding:5px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
上記の状態でulのボーダーとliのボーダーが合体して綺麗に長方形にできる方法ってありますか?
このままだと、liのボーダーが上にはみ出て綺麗になりません。あとpaddingを変えたりすると変わってしまいます。
ulとliだけでは表現できないでしょうか。
もし他の方法があってそれでうまくできるなら教えてください。
試してないが、liに右線だけ、ulに上下左線だけ、では駄目だろうか。
>>963 ul { padding-top:2px;}
WinIE6、FireFoxはこれでよし。
しかしOperaでは4pxでないと駄目だった。
>>964 それではtext-align:rightとdisplay:inlineの意味が無くなる。
966 :
Name_Not_Found:2006/04/27(木) 02:33:42 ID:Gvga/D5H
>>965 Firefoxではきれいに見えるんですが、IE6では上にはみ出ていました。Operaは持ってません。
他にスマートにできる方法ありますか?
このデザインってちょっと無理矢理かな?
li {line-height:1.3;}を追記すれば、Opera8.54でもOK。
IE6では、もともとulにpaddingを設定しなくとも問題無し。
こちらはWinXPでDOCTYPEは標準モードだが、そちらの環境は互換モードか?
ul {padding-top:2px;
text-align:right;
border-top:1px solid #000;
}
li {line-height:1.3;
display:inline;
padding:5px;
border:1px solid #f00;
border-width:0 1px 1px 1px;
}
macだと、
>>967のulをpadding-top:4px; にしないと上手くいかない。
FXだけはpadding-top:2px;のままでOKだった。
969 :
Name_Not_Found:2006/04/27(木) 13:29:24 ID:8fYDVViK
違うデザインにしましたので、もういいですよ。
ありがとうございました。
各要素をpxでちびちびあわすより、divで包んでdivのwidthなりheightなりを調整して、その中いっぱいに線書いたほうがいいね。
>もういいですよ。
>もういいですよ。
>もういいですよ。
二度とクンナ。
971 :
Name_Not_Found:2006/04/27(木) 13:39:15 ID:8fYDVViK
叩きたいだけですか?
>>971 おまえはCSSの勉強の前に日本語を勉強しろ、ガキ。
975 :
Name_Not_Found:2006/04/27(木) 13:51:51 ID:8fYDVViK
ちゃんとお礼言ってます
楽しいね
>>975 いちいちイヤミな奴だな。逆の立場に立ってモノを言えって。
ま、二度と来なくていいけど。
何事もゆとりを持って臨まなきゃいかん
>>969 どうでもいい糞デザインなんだから作るな。
980 :
Name_Not_Found:2006/04/27(木) 14:07:14 ID:rAwKq7o5
すいません質問なのですが
h2タグにcssで背景に画像を設定したのですが、表示されません。
パスが間違ってるわけでも無く、ちゃんとバイナリモードでも転送していています。
しかし、その画像のURLを直接開いてみると表示されて、
HTMLファイル上の記述は<h2></h2>と中が空白になっているのですが、スペースを入れると表示されます
これは仕様なのでしょうか?
とういうか、hタグに画像のみ使う場合はHTMLで画像を指定し
代替えテキストを表示するのが正しい文法なんでしょうか?
>>980 とりあえずソースが分からないことには答えようがない。
んー・・・前に自分も同じようなことあったけど、すっごくつまんないミスだったような気がする。
というわけでソースください。
>>980 一番いいのは
<h2>にはテキストを入れて画面上では見えなくし、画像は背景にする。
しょうじゃない場合は画像を入れてalt書く。
空タグは最悪。
>>977 この手の子は、逆の立場でもキニシナイからたちがわるい。
>>971 「もういいです」は否定なので、「お断りだ」って言われるのと
同じような印象をもたれることだけ覚えとけ。
986 :
980:2006/04/27(木) 14:27:50 ID:rAwKq7o5
MT 3.2のデフォルトテンプレを使っているのですが、以下が問題のソースです
html
-------------------------------------------
<div class="module-search module">
<h2 class="search-header"></h2>
<div class="module-content">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4"></label>
<input id="search" name="search" size="20" />
<input type="submit" value="検索" />
</form>
</div>
</div>
------------------------------------------------------
css
------------------------------------------------------
.search-header {
margin: 0;
background-image: url(
http://***.jp/mt/tmpl-image/search-title.png);
background-repeat: no-repeat;
}
----------------------------------------------------------------------------
h2タグ内に といれると表示されます。
>>986 テキストが何もない場合の動作は保証されない。
なんでタイトルも何もないのよ、hnは「見出し」だぞ。
988 :
980:2006/04/27(木) 14:30:31 ID:rAwKq7o5
>>985 ローカルだと表示されます
safari,IE,firefoxで見たのですが駄目でした。
989 :
980:2006/04/27(木) 14:33:10 ID:rAwKq7o5
>>988 タイトルを画像にしたかったので・・・
やはり、空タグがいけないのですね;
空タグが原因だろうね。
これだったら画像をhtml上で配置した方がマシ。
とりあえずh2にテキスト入れて
text-indent: -9999px;
でいいんじゃない?
なんでローカルだと表示されるんだ?
あ・・・あとh2のサイズ指定して無いじゃん
995 :
980:2006/04/27(木) 14:37:07 ID:rAwKq7o5
>h2タグ内に といれると表示されます。
↑の空白が部分が表示されてない;
空白部分は& n b s p ;です
>>995 大丈夫、それは 全 然 重 要 な 問 題 じ ゃ な い
997 :
980:2006/04/27(木) 14:44:32 ID:rAwKq7o5
>991
原因が知りたかったもので・・・
>>994 サイズ指定は画像以外使わないし、余白等もいらないので指定していませんが、いるんですかね?
みなさんありがとうございます。htmlで指定してみます
>htmlで指定してみます
理解してない悪寒
999 :
980:2006/04/27(木) 14:54:06 ID:rAwKq7o5
>>997 空タグなのが原因なんですよね?
プラス、CSSでもサイズも指定してないのでブラウザが認識しないと言う事でしょうか?
1001 :
1001:
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。