/* CSS・スタイルシート質問スレッド【39】 */
1 :
Name_Not_Found :
05/01/02 01:17:04 ID:54HoZFcI
2 :
Name_Not_Found :05/01/02 01:17:35 ID:54HoZFcI
3 :
Name_Not_Found :05/01/02 01:18:18 ID:54HoZFcI
4 :
Name_Not_Found :05/01/02 01:18:55 ID:54HoZFcI
5 :
Name_Not_Found :05/01/02 01:19:40 ID:54HoZFcI
6 :
Name_Not_Found :05/01/02 01:20:16 ID:54HoZFcI
7 :
Name_Not_Found :05/01/02 01:21:10 ID:54HoZFcI
8 :
Name_Not_Found :05/01/02 01:22:03 ID:54HoZFcI
9 :
Name_Not_Found :05/01/02 01:22:43 ID:54HoZFcI
スレ立て終わり
おつー
CSSのfloat機能によって見え方を2列にするときには 寄せるボックスだけにフロートをつければ良いのに、 3列にする場合にはすべてのボックスにフロートを つけるのは何故なんでしょう? あと、 <br style="clear:~"> や、 <p style="clear:="></p> のうまい使い方が良く分かりません。
14 :
Name_Not_Found :05/01/02 17:28:04 ID:szQUbRBS
Firefoxでテーブルが入れ子になっている場合のCSS。 <table> <tr> <td class="wid_600"> <table> <tr> <td class="wid_400"> </td> </tr> </table> </td> </tr> </table> で入れ子になってるテーブルの"wid_400"(width : 400px;)が効果ないみたいなんですけど なぜ?
>>13 やり方による。
2列でも両方のボックスにフロートつけるやつもいれば
3列でも2つのボックスにしかフロートつけないやつもいるだろう。
どっちでもやれるからあとはやる人しだいだ。
clearの使い方についてはFAQに載ってるサイトをよく読め。
clearの適用対象はブロックレベル要素だから
厳密には <br style="clear: 〜"> は意味ないけどな。
>>14 CSSのソースさらせ。
.wid_600 {
background-color:#ff0;
width:600px;
}
.wid_400 {
background-color:#0f0;
width:400px;
}
で手元のFirefoxで確認したら普通に400pxになってたが。
>>13 > <p style="clear:="></p>
ナニコレ? 意味無いよ。
>>16 >> <p style="clear:="></p>
>ナニコレ? 意味無いよ。
少し上に
><br style="clear:~">
って書いてあるんだから、〜ってことだろうに。
要するにclearの使い方がわからんのだろう。
“"clear:="”も無意味だが、 そもそも中味のないブロックレベル要素にclearを指定しても意味ないよ。
>>7 おいおい、何回言わせるんだ?
いつまで嘘を垂れ流し続けてんだ?
FAQ4 を直せよ。
shrink-to-fit が分からなければ説明してやっても構わないが。
macromediaのサイトみたいに br.clear-both, div.clear-both { font: 1px/1px monospace; display: block } .clear-both { clear: both } <div class="clear-both">&nbsp;</div> <br class="clear-both"> という感じでやりたかったんじゃないの?
23 :
Name_Not_Found :05/01/02 21:13:44 ID:szQUbRBS
>>15 res thx
cssは
.wid_400 {
vertical-align: top;
width: 400px;
}
です。
400pxに収まらない文字列が入ってきた場合
Firefoxだとぎゅいーんと横に伸びちゃいませんか?
IEだと400pxで改行してくれるのですけど。。
この部分はjspで可変長の文字列が入ってくるので
制限は難しいです。
>>20 知ったかしたくてうずうずか?
文句つけずに、テメーでやれ。 コラ
>>20 直すなら代案を出せって言ったろ。
CSS2.0 は Recommendation で、CSS2.1 は Candidate Recommendationだから
必ず 2.1 を基準にしなきゃならんという段階にはなってないし。
現にMacIE5なんかではまだfloatにwidthが要るんだし。
どれも前スレッドで既出だぞ。
フレームの高さ調節で利用できる "*" みたいな機能はCSSないのでしょうか?
どうやるのでしょうか? 頭がないので教えて下さい。。。
>>26 質問は5W1Hをきちんと。何をどうして何がやりたいのか。ソース出せ。
頭の悪い子は、質問が下手。愚問には愚答しか返ってこない。
>>25 何が代案だ、ボケ。仕様書そのまま書けば済むだろ。
2.1に4年間も時間を取られたW3Cの人にその台詞をはいてみろ、馬鹿が。
2.0は既に仕様書扱いされてないんだよ。
>>31 だったら、仕様書そのままを訳して書いてみろよ。
それは初心者にもすぐ呑み込める説明か?
このスレッドで書くに適当な長さなのか?
Candidate RecommendationとRecommendationとの差を無視するのか?
> 現にMacIE5なんかではまだfloatにwidthが要るんだし。 極論すれば、IE3では云々の話になるわな。 だから、MacIE5 の特例として書けばいいだろ。 文句はエラッタ追ってなかった当時のTasman開発者にでも言え。
>だから、MacIE5 の特例として書けばいいだろ。 うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい?
>>33 何回も言わすな、無知。
W3CのCSSのフロントページを見てみろ。
2.0は仕様書の項目から消えてんだよ。
> うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい? おいおい、お前が分かれ、馬鹿。
文句はつけるが代案は出せません、とさ。
> うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい? 口の利き方に気をつけろ。訳して説明してやろうと思ったが、や〜めた。
坊やだな。 ボクには説明できないから逃〜げた、だろ。
> 文句はつけるが代案は出せません、とさ。 代案なんぞ無い。 MacIE5は特例。 他は、普通にshrink-to-fit。
>>40 で、説明を要する部分は、preferred minimum width だわな。
ヒントをやったから、お前が説明してみろ。フォローしてやるから。
ボクは文句つけるだけで説明できないし翻訳できないので相手に説明させちゃお、だとさ。
23 :Name_Not_Found :04/12/01 20:17:53 ID:???
>>6 float に width は必須じゃないんだが。いい加減気付け。
そのサイトの管理人は仕様書エラッタを追っかける英語力すらないわけで。
24 :Name_Not_Found :04/12/01 20:54:05 ID:yVjKWeak
>>23 文句を言うだけなら豚でもできることですので、
エラッタを追っかける英語力のあるエロイひとなあなたが、
訂正を書いてあげてください。
26 :Name_Not_Found :04/12/01 22:18:19 ID:???
>>23 「float に width は必須ではない」というはのは近い未来のことだ。
CSS2.1 への転換期である現在においては width を明示しておくべきだ。
確かにCSS2.1勧告候補では width を明示する必要はない。
http://www.w3.org/TR/CSS21/visudet.html#q8 この記述が登場したのは2003年1月28日付けの草案からだ。
だが、Errata in REC-CSS2-19980512 にはその旨は書かれていない。
モダンブラウザであればCSS2.1準拠で設計されているから、
width を明示しなくともうまく整形できるかもしれない。
だが、その計算アルゴリズムが巧く機能するかどうかはわからない。
CSS2.1 が一般化しても、CSS2.0適合UAを考慮する必要もある。
整形の正確性や後方互換性を確保したいのなら、width を明示するべきだろう。
従って、中途半端に CSS2.1 についての解説をおこなうよりは、
とりあえず、「width は必須」と覚えさせた方が無難かもしれない。
>>44 あのぉ、完全にあなたの負けなんですが。
さっさと説明してフォローしてもらってください。
説明責任を転嫁すんなよ。
>>45 なるほど、前スレ23(オレ)の投稿にそんな痛いレスがついていたのか。
そういう痛いレスに見られるように、もっともらしいことを言って
無知無能を隠すのはCSS界隈特有だ。いつ見ても反吐が出る。
きちんと反論もしないで「痛い」と決めつけるだけ。それでは信用は得られませんね。
書き込んだらレスも見ないで放りっぱなし。よっぽど無責任でイタい。
>>48
とりあえず お前らAFO
>抜かすとMacIEやOperaでの表示は保証できません。 と書いてあるんだから、必須=無いと表示されない という意味ではない事は自明。
このスレが主眼を置いていると思われるぶらうざのほぼ100%がshrink-to-fit。 しかも、それが現在の仕様書(2.1)にとって正しい。 正しいことではなく、特例を優先することの意図が分からんよ。 過去への配慮?だったら、IE3に配慮しろ。IE4に配慮しろ。NN4に配慮しろ。 合計すれば、MacIE5のシェアと大して変わらんぞ。 何度も言うが、2.0は何ヶ月も前から仕様書から陥落してんだ。事実を知れ。 W3CはCSS3にかけるべき時間を削って2.1を4年以上も練りに練ってきたんだろ。 その献身的な努力を分かってやれ。 ぶらうざ毎に説明が必要なpreferred minimum widthに関しても、 WinIE Mozilla Opera で同じ実装を取っているから、はっきり言って、 決め打ちの説明でも大した問題は無い。というか、説明しなくても、 感覚的に覚えてしまっているレイアウト結果を持ち出せば十分だったりする。 というか、2.1を読みもせず勘違いしている奴しかいないが、 shrink-to-fitは全然難しくないんだが。。。 だから、生意気盛りのお前等常連回答者どもやスレ立て人で解決してみろよ。
>>53 お前がそう思ってるなら好きにすればいいじゃん。
愛してる
>>23 それはあれか?Mozilla/FirefoxではURLのような長い英数字の連続が折り返されないという問題か?
まだ言ってるよ 粘着気質だねぇ
>>53 Recommendation って 仕様書 って訳すのかい?
CSS2.1粘着は帰れ 粘着したいならよそでやれ
文句があるなら自分で対案を書いてみな。良ければ次スレから採用してやるよ。
それだけこちゃこちゃ述べる精力があるなら、代案を書く位は簡単だろ?
>>53 何で他人にやらせたがるのか。
.text #left { float: left; background: ffffff; width: 40%; } .text #right { float: center; background: ffffff; width: 100%; }
63 :
Name_Not_Found :05/01/03 19:09:30 ID:YXc9b5Ms
たくさんあるリンクのうち、一部分のリンクのみ色を変えたい場合、 <head> <STYLE type="text/css"> <!-- a:link{color:#000000;} test a:link{color:#ff0000;} --> </style> </head> のように設定した後、 <a class="test">リンク1</a> ではダメなのでしょうか? 以前調べてメモをとっていたのでこれで合ってるかと思ったんですが この書き方は間違ってますか?
classの時はtestの前に.(ドット)
65 :
63 :05/01/03 20:06:13 ID:YXc9b5Ms
<head> <STYLE type="text/css"> <!-- a:link{color:#000000;} .test a:link{color:#ff0000;} --> </style> </head> のように設定した後、 <a class="test">リンク1</a> ということでしょうか。 試しにやってみたんですがなりませんでした・・。 何かまだ間違えてるのかな・・・。
<head> <STYLE type="text/css"> <!-- a:link{color:#000000;} .test a:link{color:#ff0000;} --> </style> </head> <div class="test"> <a href="****">リンク1</a> </div> とか。
67 :
65 :05/01/03 20:10:48 ID:???
ごめんなさい。 .test a:link じゃなくて、 a.test linkですね。(自己レス) 解決しました。大変失礼いたしました。
>>67 まぁ、クラス名を指定しなくても出来るけどね。
<STYLE type="text/css">
<!--
a:link{color:#000000;}
.test a:link{color:#ff0000;}
-->
</style>
でも出来るっつーこと。
>>68 自爆。
「クラス名」って余分・・・orz。
h1 { border: 1px solid #90C090; } h1だけ こ う い う ふ う に空白を入れたいんですが よい方法があったら教えてください
XHTMLでIDが良く使われるのはなぜですか?
C・S・S!C・S・S!
75 :
73 :05/01/04 15:29:02 ID:???
XHTMLでCSSを使うときによくidが使われるのはなぜですか? 例 div#unchi {} div#unchi ul#chinko {}
>>75 そのXHTML文書でIDが使われているからCSSでIDセレクタを使っているのだ。
なぜそのXHTML文書でIDが使われているのかはスレ違い。
つーか「良く使われる」って何を根拠に?
77 :
73 :05/01/04 15:37:50 ID:???
>>76 XHTMLの質問スレがないんだけど。
スレ違いを厳格にしすぎる必要はないでしょうに。
自治厨ありがと。
79 :
Name_Not_Found :05/01/04 20:17:26 ID:92RtcMYn
CSSでテーブルみたいな表を作ることは出来ますか?
81 :
Name_Not_Found :05/01/04 20:36:27 ID:92RtcMYn
>>80 行数が多分100を超えるのでテーブルだと重くなりそうなんでCSSで作れればと思ったんですが
2列×n行の表を視覚的に作るにはどうしたらいいですか?
83 :
Name_Not_Found :05/01/04 23:01:46 ID:ydvLNs++
h1に 画像 テキスト って感じで横にならべたいんですがどうやったらできますか?
<h1>の背景に画像を左詰めで指定して、テキストを右詰めに指定してみる
>>83 こうするとできるよ
h1 {
background-image: url("画像ファイル");
background-repeat: no-repeat;
background-position: left center;
text-indent: 画像の幅;
}
86 :
83 :05/01/05 00:46:04 ID:???
>>84 >>85 できたーー
初心者なうえアホなんで半日悩んでた・・orz
本当にありがとう!!
87 :
85 :05/01/05 01:05:11 ID:???
ウヒョヒョヒョ
CSSは変数使えますか?
>88 使えません。
>>88 WinIEの独自拡張ならCSS関数があったな。expressionって奴。
borderやmarginを指定する際に、すべて同値である場合、 top、bottom、left、rightと別個に記述するのと、 一括で記述するのはどちらがよいのでしょうか?
一括
どっちでもよか
94 :
Name_Not_Found :05/01/05 20:20:18 ID:G3/SLUv8
>>91 一括表記「も」あるのは、便利のためであろう。
95 :
Name_Not_Found :05/01/05 21:02:50 ID:eWMPF733
すいません、cssでフォントの幅を調節する方法はありますか?
96 :
Name_Not_Found :05/01/05 21:06:56 ID:MC7Ss3RR
ひとつのセル、もしくはボックスの中に二つの「背景」画像をどちらも位置を指定して置きたいです。 ただし、二つの画像をくっつけてひとつにしたり、そのセル、もしくはボックスの中に新たな表組みや ボックスを設けたりすることはできないとして教えてください。
97 :
Name_Not_Found :05/01/05 21:07:34 ID:eWMPF733
具体的には、ワープロの縦倍角や横倍角を再現したいのです
>>96 >ボックスの中に新たな表組みや
>ボックスを設けたりすることはできないとして教えてください。
「中」はダメでも、「外」ならいいのかい?
<div id="OutSide">
<div id="TargetArea">
なんたらかんたら
</div>
</div>
これで、div#OutSide と div#TargetArea にそれぞれ、
背景画像を指定したらどうだろう。
重ならないように位置をずらしてね。
(実験してないんでうまくいくか分からんです)
>>95 >>97 欧米圏に倍角の考え方がないからな
W3Cもその辺りを考えて欲しいなぁ
>>95 font-stretchってのがあるらしいけど
対応ブラウザがないんじゃん
馬太 目
無王里
>>102 あれはフォントファミリにexpandとかcondensedとかの
フォントが含まれてるときにそれを使うよう指定するもの。
そんなフォントは一般的にインストールされてないので
対応する気も失せるでしょう。
font-variantとかstyleとかweightとかも本来は
そういう物なんだけどね。ほとんどのブラウザはsamll-capsの
フォントなんかインストールされてなくてもnormalのフォントから
偽スモールキャップを生成してしまう。
そう考えると、stretchも無理矢理対応できなくもなさそうだ。
すいません、以前のスレで紹介されていた、いろいろなブラウザにデフォルトの状態で指定されている タグのマージンなどの値を紹介しているサイトをご存知の方がいらっしゃいましたら、 アドレスを貼っていただけないでしょうか? ブックマークしていたのですが、OSの入れ替えのときにうっかり消してしまい、 ぐぐっても見つけられず、該当スレはDAT落ちしているようで読めないので、 なにとぞお願いします。
107 :
Name_Not_Found :05/01/07 05:52:15 ID:uR2l3W7n
ulリストの最初にある丸を消すにはどう描けばいいですか?
ul {list-style-type:none;} or <ul style="list-style-type:none;">
110 :
Name_Not_Found :05/01/07 09:21:56 ID:HZBl5D4p
112 :
Name_Not_Found :05/01/07 10:38:57 ID:JH6OOKXB
CSSで縦に線を入れることはできますか?できれば方法を教えてください。
113 :
Name_Not_Found :05/01/07 11:58:50 ID:VU+tBePu
shrink-to-fit 自体は簡単。中身にあわせて縮まる。 display: table; をdivに適用すれば言わんとするところが視覚的にわかる。
20は無責任に放りっぱなしだから駄目です。他人にやらせようとするし。
CSS3情報きぼんぬ
>>116 CSSについては初心者ですが、とりあえず↓訳してみました。
shrink-to-fitの計算は、自動的にテーブルレイアウトを決める方法を用いて
セルの幅を計算するのと似ています。
大雑把に、改行が明示されてる部分以外の改行を全て取っ払い、それに合う
幅をもとめます(望ましい幅)。そして、最小になる幅ももとめます。例えば、
改行できるところは全て改行して最小幅をもとめます。CSS 2.1ではその方法
の詳細については明文化されていません。
三番目に、コンテンツが書ける部分の幅を見つけます。この場合、この幅は
抱合ブロックから 'margin-left', 'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right' で使用されている値と関連する全ての
スクロールバーの幅を引いてもとめます。
これらから、shrink-to-fitの幅は、
min( max(最小になる幅, 内容が書ける部分の幅), 望ましい幅 )
でもとまります。
>>120 翻訳してくれてとても有り難いのだけど、
その翻訳を読んでも漏れには意味がわからない… orz
>改行が明示されてる部分以外の改行を全て取っ払い、それに合う幅をもとめます(望ましい幅)。
えっと、「それに合う」の「それ」が何なのか分らないよ。
「改行を全て取っ払う」ということは、長い一行にして「望ましい幅」を求める?
それとも「明示的な改行位置」に合うように「望ましい幅」を求めるってこと?
>min(max(preferred minimum width, available width), preferred width)
この数式の意味すら理解できない漏れは馬鹿…… orz
コンマ区切りはどういう意味で、どう計算するの?
max(a , b) … a と b の大きい方(maximum) min(a, b) … a と b の小さい方(minimum) だとおもわれ。
123 :
120 :05/01/08 08:27:05 ID:???
訳した本人がCSSにそんなに明るくないので、この訳が正しいのかは
今一つ、わかりません。(^_^;)
とりあえず、意訳できそうなところはそうしてます。
>>121 それに合うというのは一番長い行が幅(width)になるという意味です。
_____________________________________________________________________________
私はCSSの勉強をしています。<br>
でも難しいのでこのスレで勉強させてもらってます。<br>
親切に回答してもらえるので助かります<br>
_____________________________________________________________________________
の場合、2行目の幅が求める幅と。
min、maxは
>>122 の通り。
「大雑把に、・・・」の大雑把は全文にかかるので、
大雑把に、 ⇒ 大雑把に以下の3つの幅をもとめます。
にしないといけないかな。
下のように <div id="a">の中に<div id="b">と<div id="c">を入れbとcをfloat: leftとしたところ、 aに設定している背景画像がIEでは表示されるのにfirefoxでは表示されません。 どなたか原因をおしえていただけないでしょうか? <html> <head> <title>テスト</title> <style type="text/css"> <!-- #a {width: 500px; background-image: url(img.gif); } #b {width: 250px; float: left; } #c {width: 250px; float: left; } --> </style> </head> <body> <div id="a"> <div id="b">Bの内容Bの内容Bの内容Bの内容Bの内容Bの内容</div> <div id="c">Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容</div> </div> </body> </html>
>>124 #a {
width: 500px;
height:500px;
background-image: url(img.gif);
}
あとこっちでもいいや <div id="a"> <div id="b">Bの内容Bの内容Bの内容Bの内容Bの内容Bの内容</div> <div id="c">Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容</div> <br style="clear:both;" /> </div>
>>126 float使ったら、後でclearしておかないと、
firefoxでは色んな災いの元になるよね
すいません。 filter: alpha(***)で、DIVタグの背景色にグラデーションをかけたいの ですが、DIV内の文字にまでグラデーションがかかってしまい、読みづらく なってしまいます。 背景色だけにグラデーションをかけて、文字はそのままにする方法を 教えてくださいませ。
>>111 おぉぉぉこれです!ありがとうございます!
>>127 おかしいのはIEなんだが。
#a:after {
content:"";
display:block;
}
とでもすれば。
131 :
Name_Not_Found :05/01/08 19:02:02 ID:U1D2SeiM
スクロールバーの色を変えるので。 scrollbar-3dlight-colorってありますが、 色々なサイトを見ていると、文字がちょっと違います。 scrollbar-3dlight-color scrollbar-3d-light-colorってところもたくさんあります。 dの次に-を入れるのが普通なんでしょうか。 どっちがよいのか気になって。
変えるな!
scrollbar-3dlight-colorでいいんじゃない? ただ変えたら公開しないでオナニーに留めて下さい。
msdnによれば3dlight。 operaもkonquerorも3dlight。
UI のプロパティとして親切に scrollbar-x-color を教える香具師がいるけど、 ユーザーの使い勝手を悪くする要因になる機能であることに気付いていないらしい。 スクロールバーやカーソルなどの基本的なUI機能を自己満足で変更されたら困る。 カーソルは「十字カーソルが格好いい」とか下らん理由で変更するものではなくて、 対象となるオブジェクトによって形状を変化させることで、 何らかの操作が可能であることをユーザーに知らせるための便利な機能なはず。 Opera は「スクロールバーの色変更を許可する」かユーザー側で決められて親切。 IE はマーキーとか、ユーザー側で強制的に効果を無効にする手段がないから不親切。 WinXP では常に Luna の美しいスクロールバーを保ちたいというニーズがあるはず。
IEのscrollbarはユーザスタイルシーチで制御できるよ
しかし 「ユーザースタイルシートでなんとでも出来るんだから、製作者は特に気を使わなくて良い」 と言うのとは違う。 ブラウザのオプションを弄るのと、ユーザースタイルシートを作成するのとではレヴェルが違いすぎる。 サイトをまったり閲覧したいだけのユーザーに無駄な手間をかけさるな、っちゅう。
>Luna の美しいスクロールバー 私がCSSで設定したスクロールバーの方が美しいので ぶっちゃけそんなものどうでもいいです。はい。 カーソルも誰に何を言われたって、戻す気はありませぬ。 格好いい物は格好いいのです。 いやなら見なきゃ良いでしょ。なんで押し付けるかな。
>>138 藻前の個人的な意見など誰も訊いていない。
利己主義者であることを標榜して満足か。
あと、押して付けているのは藻前だから。残念。
>いやなら見なきゃ良いでしょ かくして、誰も見ないサイトが出来上がるのであったぁ。
>138 すすんで見るわけないけど、そっちこそ汚いもの見せないでほしい と一般ユーザーの声
CSS覚えたての初心者です。 CSS使って、下の例のように右に画像を、左にその説明を配置して項目間には区切り線を 入れたいのですがうまく行きません(^^; 説明文・説明文 画像 説明文・説説文 説明文・説明文 --------------------- 説明文・説明文 画像 説明文・説説文 説明文・説明文 --------------------- 以下続く・・・ CSSは以下のような記述です。 DL { border-bottom: 1px solid #CCCCCC; DT { float: right; } DD { width: ○ } 説明文が短くて画像の方が高さがあるときに、区切り線が変な位置にでてくるんです。 恐らく、DTのfloatした画像の高さが認識されていないためだと思うのですが(これは正常動作ですよね?)、 何か良い手立てないでしょうか。1日以上悩んでいます。教えていただければ嬉しいです。
あと
>>143 はfloatについても理解が不充分みたいなので
FAQのA4(
>>7 )「浮動要素の高さもheightに含めさせる方法」を熟読して下さい。
こんな風に定義されてるクラス caption があって、 .caption { text-align: center; position: relative; left: 10%; width: 80%; height: 50px; padding: 15px 0px; background-color: rgb(200, 200, 255); font: bold 20px fantasy; } これを基にして、text-alignだけをleftにした caption2 を作りたいのですが captionをクラス拡張するみたいにして作成できないでしょうか? 同じ定義をコピペすると文字量が増えていやなんです。 .caption2 = new caption() { text-align: left; } みたいにあるクラスを拡張する形で新規にクラス作成する方法を教えて くださいませ。
147 :
143 :05/01/09 18:19:29 ID:???
FAQも見たのですが、どうしても該当する物がなくて、すみません質問させてもらいました(^^;
通常、ボックスサイズの算出にはfloatを除外するとのことですが、今回は
DDでfloatさせている画像の高さも<DL>のサイズに入れさせるようなことは
出来ないのかなと思いまして。
できるなら、DLのボーダーで区切り線が引きたいと思って質問しました。
やっぱりかなり初心者的でしょうか(^^;
一応、ここあたりも調べたんですがIEのバグみたいですし、
何か良い方法ありますでしょうか?
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html あと、clearはDLに入れています。すみません。書きもれていました。
148 :
昔の人 :05/01/09 18:19:56 ID:???
>>146 ハテ。上書きすればいいだけでせうに。以下の如し。
.caption, .caption2 {
text-align: center;
position: relative;
left: 10%;
width: 80%;
height: 50px;
padding: 15px 0px;
background-color: rgb(200, 200, 255);
font: bold 20px fantasy;
}
.caption2 {text-align: left; }
>>148 わぁっ。できました。
ありがとうございます。
これはささやかなお礼です・・・(^*^)ちゅ〜
153 :
143 :05/01/09 18:55:15 ID:???
ううっ、どうしても分かりません。もう泣きそうです。 149さんのページも以前から見ていたのですが、<br style="clear:both;"> 書いても一向に駄目なんです(^^; そもそも定義リスト中では効かないなんてないですよね。 150さんのページも見ましたがどうもその現象とは違う気がします。 152さん、確かに表を使えばいいんですが、初心者ながらに半分意地になっているんです(^^;
初心者は意地を張るな
157 :
143 :05/01/09 19:30:15 ID:???
実験しているソース書きますので、もうちょっとよろしければ教えてください。 多分、皆様がおっしゃっているような高度なことではない気がします。 下のソースを表示させるとDLのボーダーのbottomラインが画像に かかってしまうのですが、これを何とかしたいと思っています。 (分かりやすいように、背景色つけています。当方はIE6で実験してます。) 初心者ですみませんがアドバイスありましたらお願いいたします。
158 :
143 :05/01/09 19:32:16 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
<!--
dl {
background-color: #FFF0F0;
border-bottom: 1px solid #CCCCCC;
margin: 5px;
padding: 5px;
clear: both;
}
dt{
float: right;
background-color: #F0F0FF;
}
dd{
background: #F0FFF0;
width: 400px;
}
-->
</style>
</head>
159 :
143 :05/01/09 19:33:10 ID:???
>>147 ddに高さを指定すれば済む話だ。dd {min-height:[画像の高さ];}
IEにはそのバグを利用した方法でいいだろ。
親ブロックであるDLにwidthを指定すればいいだけ。
でなきゃdlへのborder-bottom指定をborder-topにしろや。
>>158-159 肝腎のimgの高さを指定してないし説明文の長さ(高さ)も同じだから不具合を再現できない。
例示として失格。
162 :
143 :05/01/09 19:52:39 ID:???
160さん、ありがとう。 でも、なぜか、min-heightは効きませんでした。なぜ? おっしゃるようにDLへのWIDTH指定すれば希望通りになるんですが、これはIEのバグ ですよね? 161さん、すみません。これで分かっていただけるかと思っていました。 もうちょっと考えてみて出来ないようでしたら仕方ないので諦めます。 どうも皆さん、ありがとうございました。
>>161 は少しは
>>5 を見て自分で調べなさい。
未熟なWinIEはmin-heightプロパティーに対応してない。
だからその代りにバグを利用して不具合を回避するわけ。
理解できないのなら、それより、border-bottom指定をborder-topにした方が早いのでは。
165 :
155 :05/01/09 20:16:21 ID:???
166 :
143 :05/01/09 20:35:16 ID:???
>>163 min-heightの話初めて知りました。
どうもすみませんでした。自分で調べるようにします。
>>164 どうもありがとう。
でもできませんでした(^^; DDにclear:both 入れているので、DTの画像とDDが真横
に並ばずに、DDが一段下に表示されてしまいます。
167 :
164 :05/01/09 21:06:40 ID:???
>>166 164のソースの下の<DL>の2つ目の<DD>の内容が画像の下に出るというのは仕様通り。
そこに何かしらの捕捉の説明とか何かしらのリンク(ページの先頭に戻る、とか)を入れたりして誤魔化すことで、
元々のページのデザインにバグ対策を組み込めばいいじゃんということ。
それがイヤな場合には、164の上の<DL>の2つ目の<DD>みたいにできるかぎり目立たなくして誤魔化す。
もしくは、面倒になるのを覚悟で、個々のDLとDDに画像分の高さを指定するぐらいしかないのでは。
168 :
143 :05/01/09 21:22:49 ID:???
>167 すみません。激しく勘違いしていました。お恥ずかしい。。。 すごいアイディアですね。このような方法があるなんて全く思いつきませんでした。 バッチリできました(^^) これで行きたいと思います。 本当に嬉しいです。 助かりました。どうもありがとうございました。
169 :
Name_Not_Found :05/01/10 02:31:28 ID:mhYw3Tb6
floatでいくつかdivを並べて、メニューのようなものを作っています。 <DIV class="navi1">戻る</DIV> <DIV class="navi2>ホーム</DIV> <DIV class="navi3">このページのトップ</DIV> <DIV class="navi4">次へ</DIV> こんな風にhtmlを書いて、 .navi1{ float : left ; width : 20% ; margin-left : 2% ; text-align : center ;} .navi2{ float : left ; width : 20% ; margin-left : 2% ; text-align : center ;} .navi3{ float : left ; width : 20% ; margin-left : 2% ; text-align : center ;} .navi4{ float : left ; width : 20% ; margin-left : 2% ; text-align : center ;} こうしているのですが、なぜかnavi1のmargin-leftが思ったとおりに挙動しません。(WinIE6で確認しています) <マージン(7%をnavi1のmargin-leftで指定)> [戻る(20%)] <マージン(2%)> [ホーム(20%)] <マージン(2%)> [このページのトップ(20%)] <マージン(2%)> [次へ(20%)] <マージン(残った7%が勝手に割り当てられる)> こんな風な予想完成図を思い描いています。7+20+2+20+2+20+2+20+7でちゃんと全部の要素の長さを足すと100%になるのですが、二行に表示されてしまいます。 最初の7%がいけないような気がします。 どうしたら意図したようにちゃんと表示されるでしょうか?もしやこのように単純な足し算ではないのでしょうか。 ご助言くださるとうれしいです。
170 :
Name_Not_Found :05/01/10 02:35:07 ID:mhYw3Tb6
.navi1{ float : left ; width : 20% ; margin-left : 7% ; text-align : center ;}の誤りです。よろしくおねがいします
>>168 そんな七面倒くさいことせんでも、
>>158 の
DL { border-bottom: 1px solid #CCCCCC;}
を
border-top: 1px solid #ccc;
に改めれば済む話やん。
>>172 どうもありがとうございます。
バグだったのですね。調べ方が足りなくてすみません。
英語のページで難しいですが、がんばってリストのメニューのページを読んでみます。
あと、100%じゃなくて、少し余裕を持って組んでみます。
174 :
143 :05/01/10 10:05:28 ID:???
>>171 どうしてもborder-bottomでしたかったものですから
無理して悩んでいました。。。
初心者は意地を張るな。 拘泥する理由があるならそれを最初から示せ。
<p style="float:right; width:200px;">なんたらかんたら長い内容</p> <form><input type="text"></form> このinput要素のwidthを100%にしたいのですが、floatの回り込みを解除して欲しくありません。 いい方法はありませんか?
>>176 意味がよく解らないんだけど
widthを100% にすれば基本的に右にはスペースが存在しない訳で...
>>176 formに200pxの右マージンをとるのじゃだめなのか?
179 :
176 :05/01/11 07:02:33 ID:???
>>179 画像のような配置は充分可能だけど、それを100%とか言ってる間は、きみには無理です。
181 :
180 :05/01/11 09:27:56 ID:???
……ごめん、なんか読み違えてたみたいだ。 逝ってくるよ。 でも100%という言い方では、やろうとしてた内容が伝わらないのは事実ですよ。
182 :
Name_Not_Found :05/01/12 03:06:54 ID:7IjTRiFF
スタイルシートを勉強すればするほどDIVを使用する比率が増えてきました。 これって悪いことではないんですよね…? このスレのテンプレであげられているサイトでも、DIV病なんていうコラムが載っていますが、 まさにそうなってしまったのかなって思い始めてきました。 ただ、自分はbodyをまるまるくくったりはしないですし(bodyに対してCSSで指定すれば事足りますし)ちゃんと段落によってpタグを利用したりはしています。 どうしてもCSSとの連携で必要なところだけに絞ってはみました。 ただ、例えば1まとまりの文字部分にbackground-colorをつけたいときなど、pタグに指定すると、段落ごとに背景の切れ目ができてしまうので 仕方なく同一背景にしたいかたまりをDIVで囲ってクラスで指定してしまっています。 (以前はテーブルのセルに背景設定で(゚д゚)ウマーだったんですが) 何かほかにうまいやり方ってあるでしょうか。
「1まとまりの文字部分」というのは何なのか。 p要素のまとまりのようなものを言っているのだろうか。 そういう意味で言っているのであれば、div要素で問題ないと思う。 p要素の中にp要素が使えるのであれば、 もとからdiv要素で括るようなことはしない。 けれども、それだとinvalidになるのだからしかたない。 背景色は各div要素ごとに設定すれば問題ないと思われるが、 背景画像は使ったことがないからわからない。
184 :
Name_Not_Found :05/01/12 03:41:18 ID:7IjTRiFF
>>183 説明が下手ですみません。
その部分だけを抜粋すると、
<p>本文1
</p>
<p>本文2
</p>
<p>本文3
</p>
という場合に、この部分すべてに背景色をつけたい、なんて場合です。(まとまりとはこのことです)
これをもし、pに対してp {background-color : #******; }なんて指定してしまうと、それぞれの本文の背景が分離して表示されてしまいます。
で、仕方なく、
<div class="test">
<p>本文1
</p>
<p>本文2
</p>
<p>本文3
</p>
</div>
なんてして、スタイルシートで、div.test{background-color : #******; }こんな風に指定します。
こうすると、意図したように表示はできるんですが、はぁまた一つdivが増えてしまったと、こうなってしまうわけなんです。
全体をpでくくってbrで改行すればdivを使わなくても同じことができるんですが、今度はpの意味が死んでしまうので、それは一番避けたいです。
>p要素の中にp要素が使えるのであれば、
>もとからdiv要素で括るようなことはしない。
私も激しく同意です。小さな段落の上にさらに大きな段落があるという形式も配慮すると、現状ではこうなってしまいますよね。
どうもありがとうございました。
>>184 ある「段落の纏まり」に意味的な繋がりがあるならDIV要素で示しても良いだろう。
何となくではなくて、論理的な構造として一貫性を見出せるなら妥当と言える。
margin: 0; にして、padding-top, padding-bottom で調整という手もある。
padding の場合、margin のように相殺が発生しないので計算が面倒だが。
>>p要素の中にp要素が使えるのであれば
>私も激しく同意です。小さな段落の上にさらに大きな段落があるという形式も配慮すると
「形式段落」の中に「形式段落」があるなんて文書構造は絶対に有り得ないが、
意味的な繋がりのある「複数の形式段落」を纏めて「意味段落」にするなら有り得る。
漢字を飛ばすと全く解らん。
飛ばすな。
うむ、的確な指摘だ。
>>184 本文1〜3に背景色等付けるのであれば、何かの関連性があんだろ?
もし、そうならば <hx>「見出し」を使用するのが普通
ただ何の意味も無く視覚的な面だけで段落3つごとに背景色を変えるのならばいい
XMLにcssを適用したいんですが、 <picture>a01.jpg</picture>を HTMLの<img src="a01.jpg />のように 動作されるにはどうやったらいいんでしょうか?
>>189 >ただ何の意味も無く視覚的な面だけで段落3つごとに背景色を変えるのならばいい
それでは駄目だろう。まずは「テキストありき」でなければ。
スタイルシートの為に HTML が存在するわけではない。
意味を見出せないなら、段落を纏める必然性もないことになる。
>>190 CSS2では要素の内容文字列を取得できない。
CSS2では属性値もurl()関数に渡せない。
CSS2では内容の置換もできない。(:beforeとかで生成はできるが。)
CSS3になれば内容の置換はできそう(operaは実装済み)
だが、内容文字列は取得できなさそう。urlも直書きしないといけなさそう。
ということで、こんな感じか
<picture xmlns:xlink="
http://www.w3.org/1999/xlink " xlink:href="a01.jpg" xlink:type="simple"/>
@namespace xlink url(
http://www.w3.org/1999/xlink );
picture[xlink|href="a01.jpg"] {
content: url(a01.jpg);
}
a01.jpgを直書きしてるのがなんかマヌケだ。
セレクタをpicture[xlink|href="a01.jpg"]::beforeとかにすれば
mozilla系でいけると思う。
opera,safariはCSSで名前空間使えなかった気がするので
xlink使わなければopera,safariでもいけると思う。
IEは・・・知らん。(behaviorで出来るかもね。)
CSS文法のチェックをしてくれるサイトで日本語サイトは無いの?
194 :
190 :05/01/13 00:06:28 ID:???
>>192 そうですか。
それだと、大量に写真を表示しなければならないので、
あまり意味がないですね。
xslを使えばいいんかなぁ?
とりあえず、サンクスです。
195 :
188 :05/01/13 00:06:53 ID:???
197 :
196 :05/01/13 04:14:58 ID:???
ってかよく見るまでもなくFAQに載ってるじゃねーか。
漏れももお前もFAQ嫁よ。
>>195
OS:WinXPproSP1 IE6 日記を書いてWebに上げています。 現在、テキストをセンタリングして書いています。 その部分のソースは以下です テキストは適宜改行して、全体的に縦長の長方形になるように書いているのですが、 <BR>タグはあまり使用すべきではないと言うことなので、<BR>タグを廃して、 スタイルシートで指定したいのですが、ブラウザのサイズを変えたとき(小さくしたとき)にも、 きちんと読めるようにしたいのです。 日記部分のソースは <h2><a name="d1Jan2005"> 見出し </a></h2> <P> ああああああああああああああああああああああ<BR> ああああああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいい<BR> </p> と言う感じです。 左右に33%ずつ余白を設定するようにすると、 ブラウザを小さくしたときに、テキストの表示される範囲がとても狭くなってしまいます。 なんとか、テキストを表示する領域を、ブラウザを大きくしたときと、小さくしたときで変化させない、 つまり、ブラウザが大きいときは余白が大きく、ブラウザを小さくするときは、テキストの表示幅ではなく、 余白を小さくするようにしたいのです。 このような方法は、ありますでしょうか。 よろしくお願いいたします。
<!-- p{width: 70%; padding: 1px; background-color: #000000} .box{border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: solid solid solid solid; border-color: #ffffff } --> 上のようなCSSでボックスを作っているのですが中央に表示させる事が出来ません。 どのようにすれば表示されるのでしょうか。
200 :
Name_Not_Found :05/01/13 17:10:01 ID:3vSX1j+B
>>198 テキストを表示しているブロックの幅を適当に決めて、
左右のマージンをautoに。
201 :
200 :05/01/13 17:11:54 ID:???
下げ忘れたすまそ。
>>198 つか、幅固定したらウィンドウ幅がソレを下回ったときにはみ出しちゃうんだけどね。
ウィンドウ幅に連動して左右のマージンの値を変動させる、ってのは
CSSだけではちと無理っぽいかも。JavaScriptを使えばかんたん。
>>198-201 控えめに%指定すれば良いのでは。左右それぞれ33%ってのは大きすぎる気ガス。
まぁ人の勝手だけどさ。10%とかなら影響でることって少ないと思うけど。
>>199 widthを指定せずに、
margin-right : 15%
margin-left : 15%
にしる。
IEを標準準拠で動かせるなら
width : 70%;
margin : 0 auto
とかでも良いけど。
>>202 おお、できました。
alignとかcenterとかそういったものでやろうと思っていたので前者みたいな
発想ができませんでした。なるほど、いま理解できましたありがとうございます。
--------------------- | タイトルとか | ←height固定 --------------------- | メニューとか | ←height固定 --------------------- | | | | | | | iframe | ←ブラウザの残りのheight | | | | | | | | --------------------- てのをやろうとしたんですがiframeの部分のheightが上手くできません。 テーブルを使えばできるんですが、なんとかスタイルシートでやる方法はないですか?
>>192 スレ違いだが、XLinkなんて誰もが認める失敗規格。
(標準化に時間をかけ過ぎて、誰もまともに実装しなかった。)
(XPointerの仕様を確定できずに作業部会は解散してしまった。)
(HLinkと不整合。)
そんなものすすんで使う物でもない。
>>204 iframe の是非はともかく、固定配置を使えば簡単にできる。
案の定、M$ Internet Explorer ではまったく駄目だが。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd ">
<title>test</title>
<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }
#header, #menu, #iframe {
position: fixed;
left: 5px; right: 5px;
border: solid 1px;
}
#header { top: 5px; height: 50px; }
#menu { top: 60px; height: 50px; }
#main { top: 115px; bottom: 5px; }
iframe { width: 100%; height: 100%; border: none; }
-->
</style>
<div id="header">
<p>header</p>
</div>
<div id="menu">
<p>menu</p>
</div>
<div id="main">
<iframe src="../../VA022006/index.html" width="100%" height="100%"></iframe>
</div>
207 :
206 :05/01/13 23:33:26 ID:???
実験で
>>4 のサイトを個人的に DL したファイルを
使ったんだけど、パスをそのまま晒してしまった。orz
208 :
206 :05/01/13 23:37:04 ID:???
おまけにスタイルを間違えた… × #header, #menu, #iframe {…} ○ #header, #menu, #main {…}
209 :
204 :05/01/13 23:50:11 ID:???
>>206 ここまで作っていただきありがとうございます。
固定配置でやればいいのか・・・勉強になります。
Netscape7.1ではきちんとできてました。
でもIEではだめみたいですねー。
ifameのheightを100%で指定すると、
mainのボックスのheightではなく全体のheightとなるみたい?
結局のところIEでもこれをやりたい場合テーブルを使うしかないのか・・・
>>206 >>209 いや、この場合fixed使わなくてもabsoluteで良いんじゃないか?
それならIEも対応してるし。
>>204 overflowを応用した疑似フレームってのがFAQにあるから見なさい。
>>210-211 Mozilla とかなら絶対配置とかでもできるけど、MSIE では無理では。
top と bottom を同時に指定したときに、ボックスが伸縮しないから。
上部にあるタイトル部とメニュー部の高さ(固定値)を差し引いて
残った閲覧領域の高さにメイン部を合わせなければならないけど、
bottom を使わずにどうやって、メイン部の高さを導き出しますか?
>>212 回答に不満があるなら自分で結論を導け。
議論なら広告の裏にでも書いておけ。
214 :
212 :05/01/14 15:41:15 ID:???
>>213 言っておくけど、漏れは
>>204 ではないので。
それに、他にどの様な方法があるのか質問しているのですが。
漏れを
>>204 と決め付け、議論厨と決め付ける根拠がナゾ。
>>214 それを最初に記すのがマナーと言うもの。
ちなみに俺は>213ではない
216 :
Name_Not_Found :05/01/14 16:35:16 ID:t+sgHrth
┏━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ ┃ ┃ ┃ @ ┃ ┃ A ┃ ┃ ┃ ┣━━━━━━━━━━━━━━━━━━━━━┫ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ B ┃ ┃ ┃ ┃ ┣━━━━━┫ ┃ ┃ ┃ ┃ ┗━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛ @にh1(画像)、Aにメニュー、Bに本文という配置を考えていて、 テーブルに依存しないで実現させたいです。 ソースに出てくる順番が@ABなので、 A@Bの場合と違って単純にfloatは出来ません。 position: absoluteを使うと、Firefoxで謎の空白が出来たりします。 IE6、Firefox、Operaあたりでこれを実現する方法はありますか? あったら教えて下さい。
ソースに出てくる順番が 2.1.3 で出来るなら そうすれば医院で内科医? 機種依存文字は使わないように。
そういえば機種依存文字だった、忘れてました。 2,1,3でやるとulで書いたメニューがソースの頭に来ることになるんですよね。 Strictの話題はスレ違いですけど、それは何となく落ち着かないんです。
Strict ?
>>218 落ち着け 落ち着け 深呼吸して落ち着くんだ。
「自分で勉強する気はない! だから、お前達やってみろ。」ってか?
誘導されたから来たんだろ
>>221 どのへんがうまく作れないの?
>HTML4.01 Strictで作っているので 嘘はつくなよ嘘は。
>HTML4.01 Strictで作っているので、なるべくStrictなHTMLで、デザインはCSSでお願いします。 50マソ出せ。俺が作ってやる。
マルチしねよ
>>226 ここの住民はてめーの楽チングッズじゃねーんだよ
230 :
↑ :05/01/14 18:45:53 ID:???
アンカー違ってねーかぁー?
231 :
226 :05/01/14 18:46:45 ID:???
(´・ω・`)
CSSなんかあるのが悪いんだよ。 fontだけで十分
まあまあ 皆の衆 餅付け
>>221 このスレは自分で勉強して何とか作りたいと頑張ってるナイスな奴らを応援するスレです。
「再現してくれ」
「なるべくStrictなHTMLで、デザインはCSSでお願いします。」
こんな人には誰も応援しません。
おみおつけで顔を洗って、おととい来てください。
ナイスな奴らってのがレトロでいいな。
236 :
221 :05/01/14 20:03:08 ID:???
>>224 タイトルと、その右にある広告の部分の下の線が上手くあわせられないのが困ってます。
フロートだと余白が勝手に出来ちゃって、絶対指定だとズレたりして…
「作ってもらえませんか?」と書いてますけど、アドバイスで結構です。
書いた後に図々し過ぎると気づいたので…。
>>236 じゃぁ、アドバイスね。
自分で勉強しろ。
239 :
227 :05/01/14 20:41:25 ID:???
>>236 アドバイスなら 25マソでいい。 どうだ?
>>236 雑魚はビルダーでも使ってなさいってこった
241 :
226 :05/01/14 20:57:55 ID:???
>>236 自分で使ったソースをさらしなよ。
そしたらアドバイスがもらえるよ。
243 :
221 :05/01/14 21:16:58 ID:???
244 :
221 :05/01/14 21:28:38 ID:???
馬鹿丸出しだな
お前らよく飽きないな。悪口ばっか言ってんなよ。 アドバイスするならする。しないなら無視。 それぐらいのことできるだろ。そこまで出来ないほどバカじゃねえよな?
自演乙
249 :
221 :05/01/14 21:44:10 ID:???
position:absolute;での指定は良くないでしょうか?
しるかボケ
>>249 ホームページビルダーのどこでも配置モードで大失敗する例が多いのでアレだけど、
うまくやれば問題ないよ。
252 :
Name_Not_Found :05/01/14 22:37:22 ID:Fo6CsLel
レイアウトの為の透過GIFと決別すべく 今まで、 <img src="spacer.gif" width="16" height="16"> などとしていたところに、cssを使って同様の空白を作りたいのですが何か方法は御座いませんでしょうか。 なんらかの方法で縦横の長さを自由に変更できる四角形の空白を用意したいです。 <table>や<iframe>にdisplay:inlineを付けたりしましたが、あまりしっくり来ずです、、、
>221 その程度ならfloatでもできるよ HTMLの記述が間違ってるとCSSが正しくてもきちんと表示されない >252 marginとかpaddingを調べてみそ どっちもHTMLをもう少し勉強するべきじゃね?
CSS(スタイルシート)ってのはHTMLを便利にしたもの? 初心者はHTMLでサイト作りして、なれてきたらCSSを導入みたいな 流れでいいのかしら?
違う
最初からCSSも勉強した方がいいって事?
258 :
221 :05/01/14 23:24:19 ID:???
なんとか自己解決できそうです。ありがとうございました。
ほんとクズだな
>>257 俺は、最初からCSSの勉強をしたよ。
だから<font>タグの使い方いまだに知らない。
というかHTMLって何を勉強するの?
おーい 質問スレッドの定めなのかもしれんが、これはちょっとあまりにも低レベルすぎないかー
だまってろデブ
263 :
Name_Not_Found :05/01/15 00:33:40 ID:bcZ/HOpw
あるページをonClick="window.open・・・・で表示させているのですが、 その中でMENUBAR=NOと指示しているにもかかわらずマック版のIEでは メニューバーもツールバーも表示されてしまいます。ウィンドウズ版IEでは 両方ちゃんと非表示になっています。これって解決できないのでしょうか?
>>263 macユーザーはIEなど使わないと思うんだが
マカーはサファリだよな!
俺はIEしか使わんぞ。てかサファリが動かん!
マックなんてもう売ってないだろ?
>>266 OS9?
9の時はネスケ使ってたなあ
>>267 田舎ではもう売ってないかも知れないなあ・・
いーじゃんMacのIEぐらい むしろツールバー等を隠す必要性が分からんのだが ともかくスレ違いだ はい次どぞ〜
floatを使用し ┌┬┬┐ |||| │||| └┴┴┘ のような枠組みを作っているのですが、左の枠の中のテキスト量が多くなり縦の長さが一番長くなったときに 中央右側の枠線が下まで届かなくなってしまいます。 枠が壊れないようないい方法ないでしょうか?
┌┬┬┐ |||| |||| │|└┤ └┴─┘ のような状態になってしまうということです。
そのAA作る労力を他にいかせ
>>253 HTMLが正しくて、CSSも正しくて、それでも崩れるので全てをCSSではまかなえません。
IEは言うに及ばずMozillaでさえふざけた仕様だから仕方ないですよね。
しかし初心者スレ同様こっちのスレも荒れてきたねぇ・・・
やっぱ冬だから仕方ないのかなぁ・・・
ふざけた仕様だというなら、好みのブラウザ作れば? 己のヘタレをブラウザのせいにするな。
CSSで // を使ったコメントアウトは Mozilla、Operaでは効いてIEでは効かないみたいですけど もしかしてこれって元々仕様にはない方法ですか?MozillaとOperaの独自拡張?
仕様書を。
CSSバグ辞典スレッドって、「このブラウザの表示方法が正しい」とか、 具体的に書いてないから分かりづらい。
>>270 頭を使え。
それでも解らなかったらCSSはやめろ。
向いてない
>>270 現象が再現しないんだが.....
(当方WinXP SP1、filefox1.0およびIE6.0)
<html>
<head>
<style>
div.a{width:3em;float:left;}
div.b{width:3em;float:left;}
div.c{width:3em;float:left;}
</style>
</head>
<body>
<div class="a">あああああああああ</div>
<div class="b">いいいいいいいいい</div>
<div class="c">う</div>
<br style="clear:left">
</body>
ちゃんと表示は
------------
あああいいいう
あああいいい
あああいいい
-----------
になるよ。
281 :
280 :05/01/15 18:52:10 ID:???
すまん、よく読んでなかった。 「枠線」が問題だったのね....
なんかこのスレには基地外が住み着いてるみたいですねw
283 :
Name_Not_Found :05/01/15 21:33:56 ID:GLd59Xme
スタイルで段組をしたのですが、 連続した半角英数が回り込んでくれず、 枠からどんどんはみ出してしまいます。 widthで幅していしても、ウィンドウの端まで行っても 改行されずに続いてしまう感じです。 例えば、簡単にaaaaaaaaaaaaaaaaaaaaaaaaaa....と続く文字があると、 ┌──┐ | | |aaaaaaaaaaaaaaaaaaa | | └──┘ のようにはみ出しつづけてしまいます。 すみません、非常に初歩的な事だと思いますが、 これを回避するにはどうしたらよいのでしょうか?
overflowで設定するけど改行される設定はないらしい
>>284 うーん、そうなんですか。
以前URLを貼り付けられた際に
上のような状態になった事が何度かあったので、
それを回避しようと色々試している所でした。
とすると、XHTMLサイトには連続した
半角でデザインが崩れるリスクがあるんですね。
286 :
283 (285) :05/01/15 21:57:05 ID:GLd59Xme
あ、283です。
marginをマイナス指定するとかなんとか50レスくらい前に貼られたリンク先の中の人が言ってた>はみ出し回避 ついでに壊れない(と思われる)3カラムの作り方もそこに出てた。
289 :
270 :05/01/15 23:40:25 ID:???
後ろに画像を表示して線を引くことにしました。
>>270-271 入れ子にしなさい。
┌───┐
|┌┬┐|
|||||
|||||
│└┴┘|
└───┘
291 :
270 :05/01/15 23:52:54 ID:???
入れ子にしてやって>271になりました… 今は外の枠のバックに線の画像を入れてます
292 :
Name_Not_Found :05/01/16 00:28:31 ID:RC9DXhte
ほしゅ
>>276 >>277 Mozilla/Operaで効いてるように見えるのはただ単に不正なセレクタとみなされてルールごと無視されてるとかだろ
295 :
Name_Not_Found :05/01/16 03:37:06 ID:dRjPmmtR
297 :
Name_Not_Found :05/01/16 13:31:38 ID:J4zlhVzA
きれいなテーブルレイアウトをしたいです
>>270 常に最も左の枠がテキスト量最大、
という条件があるなら入れ子で出来ると思うけど。
300 :
Name_Not_Found :05/01/16 14:27:07 ID:WhLwdGHY
質問です。 hr { border-top: 1px dotted #ff9900; clear: both; height: 1px; } これをネスケでも表示できるようにするにはどうしたら良いのでしょうか
>>300 ブラウザが対応していないものはどうしようもない
302 :
300 :05/01/16 15:16:31 ID:WhLwdGHY
分かりました諦めます。 ありがとうございます
303 :
270 :05/01/16 15:17:53 ID:???
>299 ┌───────┐ │┌────┐ | │|┌─┐ | | │||最|中|右| │||大|央| | ││└─┘ | | │└────┘ | └───────┘ ということですよね。 これなら左に来ているところが最大になれば引っ張られるように 周りの枠も大きくなるのですが、どれが最大量になるかは決まっていないので 中央または右が大きくなった場合にやはり崩れてしまいます。
304 :
270 :05/01/16 15:19:13 ID:???
壮絶に崩れた・・・ ┌───────┐ │┌────┐ | │|┌─┐ | | │||最|中|右| │||大|央| | ││└─┘ | | │└────┘ | └───────┘ ということです。
body{font-family: verdana ;} div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; } div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; } <body><div class="a">hoge</div><br><br> <div class=b"">hoge</div></body> として書いたとき ┌──┐ │hoge│ │ │ └──┘ ┌──┐ │ │ │hoge│ └──┘ のようにaには字の頭が線にそろって下が空くような状態になるのですが、フォントの指定をしていないbでは なぜか頭が線に揃わずに表示されます。フォントの指定をしているときとしていないとき、なぜ表示方法が変わるのでしょうか? あと、両方がbodyからフォントの種類は引き継いでいるはずなのに違う結果となる理由を教えてください。
>>305 変わるのは君だけと思われ。
><div class=b"">
<div class="b">
307 :
305 :05/01/16 17:50:06 ID:???
あ、すみません、こっちで書き直すときにミスしました。 <div class="b"> というような状態にはちゃんとなってます。
308 :
305 :05/01/16 17:54:32 ID:???
これだけでやってみたらちゃんと表示されました。 他のところに原因があるのだろうか…
>>308 せっかく
>>305 みたいなのを書いたなら自分で実証するといいよ。
もとのソースのcssを少しずつ
>>305 に追加していったら何が原因かきっと分かるから、
がんばって確認してくれ。
それでも分からなかったら、もっと詳しくソースを晒せ。
310 :
305 :05/01/16 19:06:38 ID:???
<div class="1"><div class="2">aaa</div></div> となっていて、1にline-height: 140%; があったのが原因のようでしたが、なぜこれがフォントの種類を指定をすると無効になるのでしょうか? ソースはこのようになっております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <STYLE TYPE="text/css"> <!-- body{font-family: verdana ;} div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; } div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; } div.c{ line-height: 140%;} --> </STYLE> </head> <body> <div class="c"><div class="a">hoge</div><br><br> <div class="b">hoge</div></div></body> </body></html>
みなのしゅう HDMLってなんだい?
313 :
305 :05/01/16 20:38:54 ID:???
</body>が2つありますね… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <STYLE TYPE="text/css"> <!-- body{font-family: verdana ;} div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; } div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; } div.c{ line-height: 140%;} --> </STYLE> </head> <body> <div class="c"><div class="a">hoge</div><br><br> <div class="b">hoge</div></div> </body></html> でした。
そんなことじゃないよ。
trueだな!
>>314 質問スレッドなんだからさぁ、
何か問題があれば、上級者はどんどん指摘すれば
いいじゃないか
何をもったいぶってんのさ
>>316 君間違ってるよ。 答えないじゃなくて 答えられない低能が正解
318 :
282 :05/01/16 21:00:25 ID:???
>316 >282
馬鹿ばっか
322 :
282 :05/01/16 21:12:50 ID:???
なんかいきなり速度上がったなw
>>319 Λ_Λ
( ´∀`)< オマエモナー
( )
| | |
(__)_)
>305 >div.a{font: 9px verdana;} >div.b{font-size: 9px;} なんでこんな記述なの?
325 :
306 :05/01/16 21:39:15 ID:???
>>305 「font: 9px verdana; 」という表記では、何が省略されてるのかを考えれ。
327 :
305 :05/01/16 22:02:11 ID:???
line-heightも含まれてたんですね…ありがとうございました。
書き写すときにミスするような奴は参考にしてるサイトから書き写すときにもミスしてるだろ
サイトを作っていて、文字色にオレンジ色を使いたいなぁ、とか、 「ここは緑色にしたいなぁ」とか、文字の色を決めたくなるときがありますよね? だからと言って「class="red"」等とつけるのは良くない、と言いますよね。 そこに特定の色を使いたい時は、どうしたら良いクラス名がつけられるでしょうか?
332 :
Name_Not_Found :05/01/17 21:40:35 ID:3eBYQ2Gp
フォームのテキストエリアの背景を透明にして、テキストエリア内に gif画像の背景を入れたいのですが、どのようなタグを どこに記入したらよいでしょうか? backgroundで指定することなどは大体見当がつくのですが、 挿入する位置がいまいち分からなくて。
333 :
Name_Not_Found :05/01/17 22:51:22 ID:Cy7s2DJQ
フィルターでテーブルを透過させたのですが、当方、ギャラリー サイトなので、マックユーザーも閲覧することがあります。 基本的にフィルターは使うな。ということなんでしょうが・・ フィルター機能と同等のデザインを可能にする別の方法はありま すでしょうか? また、未対応ブラウザで起きる不具合は「透過されず地の色が出る」 という障害だけなのでしょうか? 表示すらされない。等・・の障害が起きますか?
335 :
333 :05/01/17 23:22:54 ID:Cy7s2DJQ
<TABLE style="filter:alpha(opacity=○○); -moz-opacity:○○;"> フィルター部にこんな感じで -moz-opacity:○○; をつけるとある程度 対応できるって本当ですか?
>>335 -moz-opacityはgekoの独自拡張です。
なにがしたいの詳しく和下欄から何ともだけど
アルファ値持ったpngを背景に指定でも同じようなことが出来るかも。
pngはIEだと見れないんだっけか?
>>336 pngのアルファチャンネル使えるのって、MacIEくらいしかないんじゃなかったっけ?
>>336 Gecko も KHTML も opacity: hoge; で OK よ。
>>337 んな訳ないだろ。まともに対応してないのは Win IE だけ。
340 :
Name_Not_Found :05/01/18 00:31:58 ID:5KEHQu4t
皆様始めまして。現在cssを勉強中の者でして、解決つかない事がありまして、ご相談差し上げます。 メインページ <html> <head> <title>メインページ</title> </head> <frameset> <frame src="content.html" name="content"> <frame src="menu.html" name="menu" > </frameset> </html> ページ選択 <html> <head> <title>menu</title> </head> <body> <a href="a.html" target="content">a</a> <a href="b.html" target="content">b</a> </body> </html> ↑と簡単なhtmlでのframe使用のソースを書いたのですが、 これをcssで再現するにはどうしたらいでしょうか? レイアウトのやりかたは理解できたのですが、リンク (a.htmlとb.htmlの切り替え?リンク設定ですね) のやりかたにつまづいております。 どなたかご教授願えませんでしょうか?
341 :
Name_Not_Found :05/01/18 00:44:05 ID:Uwubor8N
根本的に勘違いしてるでしょ、それ。 釣り。。?
342 :
Name_Not_Found :05/01/18 00:53:36 ID:5KEHQu4t
>>341 いえ釣りではないです。
いろんなサイトを見て、メニューとターゲットが分かれてるのに、
フレームを使ってないって言う事は、
>>340 みたいな事ができるんだと思ってたのですが…。
>>8 で紹介されてる
擬似フレームをやりたいの?
344 :
Name_Not_Found :05/01/18 01:13:09 ID:5KEHQu4t
>344 「擬似」の意味をわかっているのだろうか。 フレームを使っているようには見えるかもしれないが、 実際は使っていない。だから頭に「擬似」がついている。 擬似フレームを使いたいのであれば、target属性のことは忘れたほうがよい。 target属性自体が用なしになってすっきりするから。
>>344 「擬似」というのは、挿入したように見せてはいるが
実は、挿入していないということだぞ。
おまえら、>340が疑似餌だということに早く気付け。
348 :
Name_Not_Found :05/01/18 13:47:36 ID:oe/fXn7H
<br><br>みたいな記述で整形するのは、cssを理解していない …という記事をみてドキッとしたのですが、この辺をもう少しだけ詳しく教えて頂けないでしょうか。 楽なのでついついbrを多用してしまいます。
>>348 <br>を連発したいのは、文字・絵・表などのブロックの間隔をあけたいからでしょ。
その間隔のためにmarginというプロパティがあるわけです。
350 :
348 :05/01/18 14:44:27 ID:???
>>349 br多用がcssの概念に反する理由が、おかげで良く分かりました。
ご指摘通り、特に文字の間隔を空けるために多用していたのですが、
これからは積極的に<p>などを使っていこうと思います。レスありがとうございました。
質問者の鏡だ。
鑑だ。
353 :
351 :05/01/18 17:18:12 ID:???
orz
どっちも正しいよ
355 :
351 :05/01/18 19:17:36 ID:???
自粛しますorz
356 :
333 :05/01/18 19:55:47 ID:v5X2f+Q0
やりたいことは、ただなるべく多くに対応した「背景を透かしたテーブ ル」を作りたいという感じなのですが、例えば <TABLE style="filter:alpha(opacity=○○); -moz-opacity:○○;"> のテーブル背景画像をpngで透過画像に設定することで、MacIEではpngで 透過表示させ、他ブラウザでは透過処理されない背景画像をCSSで透過す るという具合に細工することは可能なんでしょうか? 理論的におかしかったりしますか?
だからCSSで透過できるブラウザというのはIEだけなわけで・・
358 :
340 :05/01/18 21:01:48 ID:5KEHQu4t
>>340 です。
レスくださった皆様ありがとうございました。
疑似という言葉は確かに引っかかっていました。
もう一度勉強やりなおしてきます。
359 :
Name_Not_Found :05/01/18 21:51:05 ID:ouGNw5q6
モジラでも透過出来るけど重たくなるから素人にはオススメ
>>356 WinIE以外はアルファチャンネルPNGが使えるので
opacity使う必要性がない。
ついでに。既に-moz-opacityはopacityになっている。
opacityにはGecko系とSafariが対応。
もひとつ。filter:Alphaもopacityも背景だけでなく、内容も透けるぞ。
AlphaImageloaderっつーfilterもあるけど、背景に重なるのでいまいち使えん。
361 :
333 :05/01/18 22:43:17 ID:v5X2f+Q0
>>357-360 有難うございます。
皆さんの言われることから
WinIEはCSSで。
それ以外はpngで。透過を実現させる為に
>>356 のように
CSSとpngを重複して指定してみようと考えてみたのですが。
pngを背景にしておけばMacIEでも透過可能で、WinIEでは
pugは意味無いので、それをCSSにかけるという風に・・・
的はずれでした??
ドットを交互に間引いたGIF画像を作れば どのブラウザでも半透明。ウマー
CSSでtableのセルごとの幅を指定するのはどうすればいい? td.c1{width:6em}
364 :
363 :05/01/19 00:28:52 ID:???
ミスった。
>>363 の二行目みたいにしたんじゃいけないの?
その要素に挟まれて(含まれて)いる状態では無いのに、 その属性を継承してしまうような現象が、しばしば起こってしまい悩んでいます 例えば次のソースなんですが <html> <style TYPE="text/css"> <!-- ul.head{ list-style: square; } ul.contents{ list-style: circle; } li.head{ font-weight: bold; } --> </style> <body> <ul class=head> <li class=head>hoge</li> <ul class=contents> <li>foo</li> <li>baa</li> </ul> </ul> 私としては、hogeだけボールドで表示して欲しくてたまらないのですが、 何故かfooやbaaまでもボールド表示されてしまい、しょんぼりしてます IE6でテストしています 罵倒でも良いのでご指摘頂ければ本当に助かります、昨日から悩みっぱなしで…
<style TYPE="text/css"> <!-- ul.head{ list-style: square;font-weight: bold; } ul.contents{ list-style: circle;font-weight: normal; } --> </style> </head> <body> <ul class=head> <li>hoge <ul class=contents> <li>foo</li> <li>baa</li> </ul> </li> </ul> このHTMLはアリだったかな?
li.hoge{ font-weight: normal; } 入れて <li class=hoge>foo</li> <li class=hoge>baa</li> にでもしておけば?
あちゃー
>365 <ul>の直下に<ul>は置けない。 <ul>の子供になれるのは<li>のみ。
370 :
365 :05/01/19 11:33:38 ID:???
>>366-367 お二人ともレスありがとうございました
となると、「属性はなるべくul側で指定する」
「liで属性を指定する場合は、なぜか他のliにも影響が出てしまうので、li毎に属性を指定しなおす必要がある」
というまとめで良いのでしょうか
ちょっとまだ腑に落ちませんが、目的は達せそうです、重ね重ね感謝です
371 :
365 :05/01/19 11:35:25 ID:???
ああーしまった書いているうちに
>>369 なるほど!!!すっきりさっぱりと、納得しました
ありがとうございました!
>>365-367 別に解決してるから無駄な突っ込みといわれればそれまでだけどさ、
こういうときこそ文脈セレクタだろ。無駄にクラス名を増やすことないだろ。
li.head ul { font-weight: normal; }
>>363 そんなときにはcol要素とかcolgroup要素を使うといいよ。
>>374 いや、手元のFirefox 1.0ではcol要素に対してwidthプロパティーが適用されたぞ。
すみません質問です ページ毎にメニューを付けているのですが、自動改行された時など、上手く背景画像が表示出来ません .navi{border-bottom:solid 1px #000; }とかは上手く行くのですが、 背景画像だとliのテキストだけが、改行されてしまいます /css/ .navi{background:url(./hoge.gif) repert; } .navi li{margin: 0; padding: 0;display:inline; text-align:center; padding-left:10px;} /html/ <ul class="navi"> <li><a href="./index.html">index</a></li> <li><a href="./hoge1.html">hoge1</a></li> ・ ・ <li><a href="./hoge9">hoge9</a></li> </ul>
379 :
Name_Not_Found :05/01/19 20:15:00 ID:GrkNWztu
スタイルシートを使って全体を3つのコラムで分割しようと思っています。 真ん中のコラムに記事を書き、左右のコラムには何も書き込まない予定です。 その際 div.left { float: left; width: 150px; } div.main { } div.right { float: right; width: 150px; } としてクラスmainに記事を書いていったのですが2行目からカラムを無視して ブラウザ全体に広がるようになってしまいます。どうしたら最後まで真ん中の コラムの中に文章を押しとどめておくことができるでしょうか?
普通なら多分 div.main { margin: 0 150px; } とかやる。
381 :
379 :05/01/19 20:33:56 ID:???
>>380 あ(;´Д`)!
そんな簡便な方法が・・・
さらに左右のコラムに文章とかバナーを貼りたければ
div.left{
margin: 0 0px;
}
とかやればいいわけですね。
>>381 そもそも左右のブロックは激しく不要な希ガス。
>>375 え? うちの Fx1.0 だと駄目だ。↓がソース。
IE6 だと3,4 だけ黒(規定値)で、 Firefox だと全部規定値。
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
<html lang="ja"><head>
<title>temp</title>
<style type="text/css">
.col1, .col2, col3, .col4 {color: red;}
</style>
</head><body>
<table>
<caption>table</caption>
<col class="col1">
<colgroup class="col2"></colgroup>
<colgroup class="col3" span="2"></colgroup>
<colgroup class="col4"><col><col></colgroup>
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead><tbody>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td></tr>
</tbody>
</table>
</body></html>
>>383 colに適用できるのは
・background-*
・border-*(border-collapseの場合のみ)
・width
・visibility:collapse
のみ。
IEが余計なお世話をしてるだけ。
CSSファイルが5KBは多すぎですか?
日本語変ですよ。
そこそこ作りこめばそんなもん。
ページの幅を携帯に合わせて320に設定したいのですがむりぽですか? 枠をつけてるのですがPCだとデザインが崩れて・・・
え!?携帯でもCSS使えるの!?
auなんかはかなり読み込んでくれますよ
素直にプログラムで処理しましょ〜。 ブラウザなんて、腐るほど有るんだから。
394 :
392 :05/01/20 19:36:25 ID:???
link内の記述使った振り分けではopera6では出来るようですが、 今のところopera7とmozilaでの振り分けは出来ないんでしょうか? javascriptでの振り分けでも良いんですが、 解析見るとscriptをoffにしてる人も割と居るので……。
そこまで細かい振り分けが必要なもんかね……?
5KBって携帯用のことか? 漏れのPC用は冗長杉で20KB超えてるさorz
>394 サーバーサイドのプログラム。
smallタグって、w3c的にはどうなんでしょうか? やはり非推奨でしょうか?
>>398 そんなことはない。
「ここんところはちょっと大きな声では言えないな....」
という意味を表す場合に用いるのだ。
推奨、非推奨が一目でわかるサイトない〜?
>>399 そうですか。
お早いお返事どうも有難う御座いました。
今までは<span class="small">とやっていたのですが、
この回りくどいやり方に疑問を感じておりまして。
おかげ様で、現状を脱することができそうです。
左側に画像ファイルを、右側に文章を載せたいと思っています。 それぞれをdivでくくって float: left; を指定して並べてみたのですがIE6ではうまく配置されるものの MozillaやOperaでは画像の右側に来るはずの文章は、 画像の下に配置されてしまいました。 ・ブラウザの横幅にあわせて右側の文章が伸縮し ・しかしどんなにブラウザの横幅を狭くしていっても 文章は画像の下に回り込まず、かならず画像の右側に位置し ・ブラウザの横幅を狭くしていくことで文章部分が画像の高さを 超えても画像の下に回り込まずそのまま文章パートのコラム を維持したまま下に伸びていく スタイルを実現するにはどうしたらいいでしょうか?
>>402 最後にclear:left をやるべし
405 :
402 :05/01/20 23:33:08 ID:???
たとえば <div style="float: left;"> <img src="(・・・)"> </div> <div style="float: left;"> (ながったらしい長文・・・) </div> と書きますとIE6では基本的に文章は図の右側にありますがブラウザの横幅 を狭めていくとある一定量以下で図の下に移動してしまいます。 Opera、Firefoxではブラウザの横幅をどんなに広げても常に文章部分は 図の下に位置してしまいます。
>>405 <div style="float:left; width:画像のはば"><img src="hogehoge.jpg"></div>
<div style="margin-left:画像のはば">ぶんしょう</div>
とか? てか、floatにwidthは必須じゃなかったっけ?
408 :
405 :05/01/21 01:54:29 ID:???
>>406 margin-left
というプロパティがありましたか。
3種類のブラウザで問題なく表示されることを確認しました。
ありがとうございます。
ちなみにFirefoxだけブラウザの幅を狭めていくとたまに
横方向のバーが表示されすごく横幅が広くなる現象に
見舞われました。見た目は問題ありませんが。
ここらへんブラウザ間で洗練されてたりされてなかったり
するようです。
そりゃブラウザのせいじゃなくて記述のせいかと。
>>409 いや、結構ブラウザによって違うもんだよ。
一番いい加減なのがIEなわけだが・・・
412 :
I'm Not Found :05/01/21 13:12:21 ID:BkAg2kBm
質問です。 HTMLでトップページにフレーム使うのはナンセンスっぽいので 左側にメニューを置いてクリックしたら右のメインが変わるようにしたいのですが フレームを使わないでいい方法はないでしょうか。
414 :
Name_Not_Found :05/01/21 13:17:31 ID:BkAg2kBm
>>413 やったー!!どうもありがとうございます!!!
415 :
Name_Not_Found :05/01/21 13:18:57 ID:C0nrIR4b
サイトの上部に本の引用を、その下からサイトを紹介する文章を書こう とおもっています。このとき検索サイトにはサイト上部の本の引用部分が 引っかかってしまうのでしょうか?なんとか下部のサイトを紹介している 文章を検索サイトに載せたいです。レイアウトを変えずに実現する方法は ありますか?
417 :
Name_Not_Found :05/01/21 15:35:43 ID:+dtkYNrV
selectメニューの中の一部の文字列だけ赤文字にするのってどうするんでしたっけ <option value="334">ほげほげほげむにゃむにゃむにゃ</option> の「ほげほげ」の部分だけ赤文字にしたいです。 IE限定でいいです。 以上、どうぞよろしくお願いいたします。
419 :
Name_Not_Found :05/01/21 23:10:10 ID:Ld7Rk5Uk
スタイルシートに関しての質問です。 要素としてはテーブルとイメージがあります。 このテーブルの上にイメージがくるようにしたいのです。 現段階の詳細は下記なんですが、 table.main{ z-index:0; background-color:#808080; margin-right:auto; margin-left:auto; color:#808080; font-size:12px; width:803px; } img.logo{ position:absolute; top:100; left:auto; right:auto; z-index:1; } …とこのような状況です。具体的には、テーブルはもう良くて、 イメージを、センターに位置させつつ高さ(上からの位置)を指定したいのですが、 どうしたらいいでしょうか? 長くなりすみません。 (初心者版でスレ違いの指摘を受けました。コピペです。すみません)
誘導されてきたんだろ
>>419 HTMLのソースを出してね。
ビルダーかな?
424 :
Name_Not_Found :05/01/21 23:26:04 ID:Ld7Rk5Uk
メモ帳でつくってるのですが、ソースは
<table cellspacing=1 cellpadding=0 class="main">
<tr>
<td background="cx380_2.jpg" width=600 height=400 align="right"><img src="02.gif"></td>
<td width=200 height=400 bgcolor="#ffffff" valign="bottom">
</td>
</tr>
<tr>
<td height=25 align="right" bgcolor="white" valign="middle" width=801 colspan=2>
<b><font color="#808080">Copyright(c) TUNA All rights reserved. </font>
<a href="mailto:
[email protected] "><img src="mail.gif" border=0 alt="mail" align="middle"></a></b>
</td>
</tr>
</table>
<img src="logo.gif" class="logo">←こいつをどうにかしたい。
…という状態です。
>>424 なんでtableの上に画像を配置するの?
tableの内容が隠れて見えなくならないの?
427 :
426 :05/01/21 23:46:35 ID:???
ごめん。ふっかつしてた。
宣伝うざ
>>424 <style type="text/css">
<!--
.logo {
z-index:1;
position: absolute;
width: 100%;
top: 100px;
text-align: center;
}
-->
</style>
<div class="logo">
<img src="logo.gif">
</div>
>>424 せっかくCSS 使ってて <b><font color="#808080"> これはねーべ?
431 :
Name_Not_Found :05/01/22 00:55:22 ID:Fr6k1KFl
424です。
ありがとうございました。解決しました。
>>425 たいした理由ではないんですが、ちょっとしたこだわりでした。
>>429 ありがとうございます。できました!
>>430 スタイルシート使わないで作ってたときのが消し忘れてました。
これも修正しました。ご指摘ありがとうございます。
Strict DTDで次のように記述したところ、上の画像としたの画像の間にスペースが空くのですが、CSSで画像間のスペースをなくすにはどうすればいいでしょうか? <img src="○○"><br> <img src="○○">
img {margin:0;}
>>423 ちょっと待った。
Strictで書いてる奴がcssを知らんとはどういうことだ?
435 :
↑ :05/01/22 01:15:31 ID:???
436 :
432 :05/01/22 01:18:00 ID:???
437 :
432 :05/01/22 01:21:06 ID:???
言い忘れてました、スペースが空くのはfirefoxとoperaで見た場合です。
俺も答えを忘れることにした。
CSS の問題ではない。HTML の仕様書でも読んでくるんだな
質問です。 ページのリンクメニューを横一列に並べて表示したいんですが、ulのborderとbackground-colorがうまく有効になりません。 <head> <style type="text/css"> ul#menu { margin: 0; padding: 0; background: #777; border: 1px solid; list-style: none; } ul#menu li { margin: 0; padding: 0; background: #77f; border: 1px solid; width: 100px; float: left; } p.para1 { clear: left; } </style> </head> 続く
441 :
432 :05/01/22 02:30:52 ID:???
>>439 CSSじゃなかったんですか。よく読んでみます。
ありがとうございました。
続き <body> <ul id="menu"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> <p class="para1"> paragraph </p> </body> </html> ulのborderがliを囲わず上部に折り重なって出来てしまいます。 ul#menuに強制的にheight:を指定すればうまくいきますが、少し強引な気がします。 通常はulにheight:は指定しませんよね?ulボックスの高さは自動で計算してくれないんでしょうか。 スマートな解決方法はありますか? <li>〜</li>の中には実際にはアンカーを書きます。 p.para1のclear: left;はfirefoxだと何故か内容が右にずれるので指定しています。
>>440 >>7 のQ4/A4を。
ul の border は、ul 内のどっかで clear:left; するか、height で指定しないことには、
つぶれた表示になる。
height 指定がいやというなら、フロートをやめて display:inline; で li を並べるぐらいでは?
>>443 すいませんFAQよく読んでませんでした。inlineでも考えてみます。
ありがとうございました。
最近になって急にHPを見てると文中でスタイルシートのせいと思しきエラーが出てるんで質問させてください。 例えば、最近みたDQ8の攻略のページで出たエラーを例にすると 「とうぞくのカギは「鉄のクギ」+「ブロンズナイフ」です。 ↓ 「とうぞくのカギは「鉄のクギ」+「ブロンズナイ・a style='text-decoration: none; border-bottom: 3px double;' href="t%20v" onmouseover="window.status='t」'; return true;" onmouseout="window.status=''; return true;">t」です。 とこのように文中でスタイルシートがバグってソースが表示されてしまいます。 ブラウザが悪いのかなと思い、IE6.0からスレイプニルやら他のブラウザに変えても変わりません。 OSはXPなんですけども、他のパソとかで見たらまったくエラー起きてないわけで…… もっと根本で悪いところがあるのかもしれませんが、質問させてください。
>>446 直接の回答ではないがあんたの言う「他のブラウザ」って何だ?
まさかLunascapeやDonutではあるまいな?
>>446 それじゃ何も答えようがない。
・エラーの発生するHTMLおよびCSSのソースは?
・「他のパソ」では問題ないそうだが、その「他のパソ」
の環境(OS、ブラウザ等)は?
書いた直後ですが早速訂正なことをー。 ネスケでは友人に確認してもらったんですが、スタイルシートうんぬん以前の話だった=□○_ ……問題なく見えてるんじゃなくてそれはきっと問題が見えてないんだよ、友人=□○_ というわけで今のところ、我が家の環境だけに絞ると ブラウザはIE6とスレイプニルの2種類だけでOSは2kとXPの2つ。 2kの方だと両方のブラウザで見れて、XPの方だと両方のブラウザで見れません。
脱tableレイアウトをしようとしてまして、cssで何とか思い通りのレイアウトが出来たと思ってたら、
Firefoxで崩れてしまいます。
<img>に指定しているfloat:right;のせいだとは思うんですが、
解決方法を教えて下さい。
(CSS)
div.gray{background-color:#ccc; line-height:1.5em;}
p.font1{font-size:100%;}
span.font2{font-size:90%; padding-left:5em;}
span.link{float:right; height:20px; width:50px;}
img{border:0;}
div.black{background-color:#000; clear:right;}
(HTML)
<div class="gray">
<p class="font1">大きな文字
<span class="font2">小さな文字</span>
<span class="link"><a href="
http://www.xx.xx.jp "><img src="./xx.gif"></a></span>
</p>
</div>
<div class="black">詳しい説明</div>
>>451 環境を詳しく。
Windows上の IE6.0 と Firefox で比較した限りでは、
「崩れる」というほどの表示の違いはないように思われるのだけど。
453 :
451 :05/01/22 18:43:19 ID:???
>>452 すみません。
マカなんで、確認はSafari、IE5、Firefox、Operaで行ってます(macしか持ってないんです…)。
でFirefoxで見ると<img>が<div>色付き部分をはみ出して、一行分下に表示されてしまうのです。
Windowsでは大丈夫なんですか。
記述ミスではないらしいので少し安心しましたが、現状のtableで安全策をとるか迷うところです。。
どうもありがとうございました。
451と逆の状態になって困ってます。 FireFoxでは正常に表示されるのに、IE6.0では表示されません。 やってることはTDにborderを指定しているだけなんですが・・・ [CCS]------------------------------------- .classA { border-left : 13px solid #aaf; border-bottom : 1px solid #ccc; } .classB { background-color : #ccc; } .classC { border-right : 1px solid #ccc; } .classD { border-left : 1px solid #ccc; } .classE { border : 1px solid #ccc; } -----------------------------------------
455 :
454 :05/01/22 18:47:01 ID:???
[HTML]----------------------------------- <table cellspacing="0"> <tr> <td colspan="4" class="classA">あああ</td> </tr> <tr> <td class="classB">A</td> <td class="classC">いいい</td> <td class="classD">ううう</td> <td class="classB">B</td> </tr> <tr> <td colspan="4" class="classE"> ううううううう<br> えええええええええ<br> おおおおおおおおおおお </td> </tr> </table> -----------------------------------------
いや、Windows 上では IEもFirefoxも、「一行分下に」になってるんですが。 画像が background-color:#ccc の部分に収まってないといけないのだったら、 どっちも駄目ということです。Opera 7.53 だと、中に収まるようですが。 とりあえず、float の使い方が間違っているというか、ちょっと勘違いしてるんじゃないかと いう印象をうけますた。 あと「脱tableレイアウト」とはいっても、これはこれでなかなか悲惨なHTMLだとオモタ。 頑張って勉強してください。
457 :
451 :05/01/22 18:59:56 ID:???
そうなんですか・・・or2 精進します
>>451 自分も偉そうな事は言えないですが、それ以前に、なんだかCSSプロパティの使い方が
かなり無茶苦茶ですが…。
HTMLとCSS、それぞれの概念が理解出来ていない感じがします。
解決にはおそらく、HTMLとCSSを詳しく解説してある本を1冊読んだほうが早いと思います。
チュートリアル本やテクニック紹介系の本ではダメです。
レイアウトが崩れるというなら、<div class="gray"> - </div>の内部でclear:してみて下さい。
imgをfloatさせたいなら、その前のspanではなく通常はimg自体にfloat:プロパティを設定します。
大きな文字と言いながらfont-size:100%;はこの場合意味がないですし、インライン要素である
spanにwidth:やheight:を設定する事は出来ないはずです。
( ゚д゚)ポカーン
>>454-455 自分が試した限りでは、IE6, Firefox, Opera のいずれも borderが同じように表示されました。
一応、標準モード/互換モード 両方やってみたけど変わらず。
ほかのところに原因があるんじゃないか…としか。
462 :
451 :05/01/22 20:33:55 ID:???
勉強不足で申し訳ないです。。
取りあえず表示は何とかなったようなので、しつこいですが貼ってみます。
あとspan.linkにサイズ指定しないと、画像がどこかに行ってしまうんで書いているのですがダメなのですか?
(CSS)
div.gray{background-color:#ccc; padding:2px;}
span.fonts{font-size:90%; padding-left:5em;}
.link a:link{background:url(./link.gif) no-repeat; height:20px; width:50px; position:absolute; right:20%;}
div.black{background-color:#000;}
(HTML)
<div class="gray"> 普通の文字
<span class="fonts">小さな文字</span>
<span class="link"><a href="
http://www.xx.xx.jp "></a></span>
</div>
<div class="black">詳しい説明</div>
HTMLがアレなのは置いとくとして、
float で回り込みを制御できるのは、後続の要素に対してなので、
1. 順番を入替える(画像を先にする)
2. 「大きな文字 小さな文字」を span で括るなどして、そっちのほうで
float:left; (自動的に display:block がセットされる)する
とかでないと、うまくいかないと思うです。
>>7 の「段組み」(Q3)のところを読まれるとよろしいかと。
464 :
454 :05/01/22 21:01:45 ID:???
>>461 ま、まじですか・・・
ひょっとしてclass名に"_"って使えなかったりしますか?
いや、それでもアンダーバーを使っていないクラスも表示されてないしなぁ・・・
465 :
463 :05/01/22 21:03:03 ID:???
|´‐`) .。o( よく見てなかったけど、やり方ごっそり変えてたのか。
( 不思議な記述だけど、それでちゃんと表示できてんの?
>>462
_ は使わない方が無難
467 :
454 :05/01/22 21:24:17 ID:???
すいませんお騒がせしました自分の凡ミスでした <style type="text/css">が <style= type="text/css">になってました・・・ いらんところで細かく判断するなIE6.0よ・・・_| ̄|○
468 :
463 :05/01/22 21:28:05 ID:???
あ、紛らわしい書き方だった。 1. か 2. のどちらかを選ぶ、ということであって、 1と2を両方やってくださいという意味ではありませんので。
>>459 floatさせればblockになるので
widthもheightも有効ですが?
470 :
Name_Not_Found :05/01/22 22:08:32 ID:O3IAp0uA
floatを使って2つの段をleftに寄せ、左右に表示させたものを divでまとめて、一つの枠の中に入れたいのですが 2つを囲んだdivにborderをつけてみても、上のほうに ┌────┐こういう線が出来るだけで、うまく囲ってくれません。 IE opera Firefoxで確認しました どうやればうまく表示させることが出来るんでしょうか?
>470 ソースコード出せ
472 :
470 :05/01/22 22:15:22 ID:O3IAp0uA
すいませんソース忘れてました .left { float: left; width: 30%; } .right { float: left; width: 70%; } .border { border: solid 10px; } <div class="border"> <div class="left"> <p>左の段<br>左の段<br>左の段</p> </div> <div class="right"> <p>右の段<br>右の段<br>右の段</p> </div> </div>
>>472 floatがぷかぷか浮かんでいるから
divの高さにfloatの高さは含まれないんだ。
divにheight設定してあげるか、
clear:bothをもったブロック要素を
外側のdivの内部に持たせてあげれば
ちゃんと枠で囲ってくれるよ。
>>472 ,473
根本的に間違い
.left {
float: left;
width: 30%;
}
.right {
margin-left: 30%;
}
.border {
border: black solid 10px;
}
475 :
474 :05/01/22 22:43:38 ID:???
HTML部分も <div class="border"> <p class="left">左の段<br>左の段<br>左の段</p> <p class="right">右の段<br>右の段<br>右の段</p> </div> で十分
>>469 ごめんなさい、そうでした。
あんまり見慣れてなかったんですが、置換要素でもなくブロック要素でもなく、
インライン要素をfloatさせてwidth,heightを指定するなんてみなさん結構普通にやってるんですかね…。
とにかく間違ってました。
で、繰り返すようですが、
>>451 のソースでは、実質imgのみを囲んでいるだけなら、わざわざspanで
float,width,heightを指定せず、imgに直接float,width,heightをしてはどうでしょうか?>451さん
imgがfloatしても、ちゃんとaは有効ですよ。
477 :
Name_Not_Found :05/01/22 23:13:20 ID:M14n1vyC
テーブルを使わずに角の丸いdivを作る方法に関して教えてください。 幅もフォントサイズもガチガチに固定してしまえば、IEは簡単なのですが、 NNはフォントサイズを固定しても変更が効くため、以下のような感じで作っています。 角の丸い上部と下部の画像を作り、真ん中のテキストが入る部分に、 cssで左右のボーダーを指定しています。 こうすると、縦に延々のびてくれるので。 【html】 <div id="main"> <!--角を丸くするための画像。上部--> <img src="header.gif" width="110" height="100" class="header"> <p>あいうえおかきくけこ</p> <!--角を丸くするための画像。下部--> <img src="footer.gif" width="110" height="100" class="footer"> </div>
478 :
477 :05/01/22 23:15:49 ID:M14n1vyC
【css】 #main{ width : 110px; margin-top : 10px; margin-right : 0px; margin-bottom : 0px; margin-left : 2px; float : left; clear : left; } #main P{ padding-bottom : 0.5em; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; z-index : 1; position : relative; }
479 :
477 :05/01/22 23:16:31 ID:M14n1vyC
/*各ボックスのヘッダー画像とフッター画像。コレによってフォント拡大に対応。*/ .header{ margin-left : 0px; margin-top : -5px; margin-bottom : -70px; margin-right : 0px; z-index : 0; position : relative; } .footer{ margin-top : -70px; margin-left : 0px; margin-right : 0px; margin-bottom : -5px; z-index : 0; position : relative; }
480 :
477 :05/01/22 23:17:25 ID:M14n1vyC
角の丸い長方形の背景画像を用意して、背景に指定していたこともあったのですが NNではこれをするとフォントサイズを変更したときに崩れてしまうので、上記のようにしています。 cssをブラウザにあわせて振り分けるのはしていません。 (sp2になってから、スクリプトを使うとやたらとポップアップブロッカーが働くので、迷惑かなと思って) いまのところ、これで何とかなっているのですが、もっと簡単な方法ないかなあと思っています。 テーブルで組むのがやっぱり一番早いでしょうか・・・・。 簡単な方法があったらぜひご教授下さい。
481 :
477 :05/01/22 23:20:07 ID:M14n1vyC
あわわわ、ごめんなさい。 うっかりボーダー指定の記述忘れてしまいました。 #mainのところで左右に1ピクセルのボーダーを入れています。
482 :
470 :05/01/22 23:30:06 ID:O3IAp0uA
>>473 clear:bothの方は変な動きをしてうまくいかなかったのですが
heightのほうでうまくいきました。
ありがとうございました
>>474-475 意味はよくわかったのですが、これで表示させてみると左の段の上のほうに隙間が空いてしまうのですが
どうしてなんでしょうか?
少しは自分で工夫する気は無いのか?
484 :
470 :05/01/23 00:09:56 ID:8WiOdFsh
よくわかないけどmargin短縮で書いたらうまくいきました ありがとうございました
>>474 rightカラム内にfloatが使えないという欠点がなかった?
携帯用のサイトを作ってるんですけど全角8文字で 常に改行させるようにはどうしたらいいのでしょうか?
>>487 普通はPREを使うだろな。
MS ゴシックなどのフォントに依存してよいなら
width: 8em でおおよそ8文字。まあおおよそだ。
489 :
474 :05/01/23 10:16:12 ID:???
>>485 否定はしないです。汎用要素ですから
>>472 で float: left; を左右に使用しているのが問題の原因、
又、意味が無いと思ったので間違いと指摘しただけです。
>>474 >>475 のソースのままだと、IE6ではpの(デフォルトの)上下のマージンがうまく計算されず、
崩れてしまいますね。firefoxでは問題ないですが。
pのマージンを0にしても、background-colorすると分かりますが、IEではleftカラムとrightカラムの間に
何故か隙間が出来ますね。各カラムに太めのborderを付けると隙間は消えますが。
この隙間もfirefoxでは出来ません。
IEのバージョンが上がらない現状では、場面によって
>>473 と
>>474 の方法を使い分けても
いいんじゃないでしょうか。
オマイの好きにすればいいで内科医?
>>491 「根本的に間違い」と断定的な書き方だったので、
そうではなく、
>>473 の方法でも決して間違いではないのではないか?、と言う事です。
>>473 の方法なら、各カラムをfloatしなければいけないので、左右のにカラムに
float: left;を使用する事には十分に意味があります。
(結果として
>>470 のように、「floating要素は親ボックスのheightに含まれない」という
仕様上の結果を、初めて目にする人が多く出てくるかもしれませんが)
「根本的に間違い」と断定的な書き方をされている事について言っています。
493 :
Name_Not_Found :05/01/23 17:49:16 ID:b8/uXTWU
CSSスレの達人様、助けてください! タブメニューを作りたくて苦しんでいます。 ソースは以下の通りです。 <ul> <li><img src="icon/top-tab.gif" width="80" height="20"> <li><img src="icon/faq-tab.gif" width="80" height="20"> <li><img src="icon/access-tab.gif" width="80" height="20"> </ul> LI{ background-color : maroon; width : 80px; height : 20px; float : left; padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 10px; margin-bottom : 0px; _margin-bottom : -5px; text-align : center; }
494 :
493 :05/01/23 17:50:06 ID:b8/uXTWU
li要素にタブの画像を入れて、横ならびになるようにしています。 タブの画像は真ん中を透過させてあり、a:hoverでマウスを乗せた時に 背景色が変わるようにしたいと思っています。 ココからが問題なのですが、IEの場合アンダースコアハックをかけないと 何故だか下部に2ピクセルくらいの背景色がはみ出るのです。 高さはliも画像も同じ20ピクセルなのに、何故liの方が大きくなるのですか?
マルチ
画面内に幅500pxの枠を入れたいのですがテーブル使わないと無理ですか?
>>493 うーん、試してないんでわからないけど
<li>の群を全部一行にかいてみてはいかが?
>>496 無理じゃないです
498 :
497 :05/01/23 19:42:54 ID:???
>>493 ちょっと調べてみました。
どうやら、IEが互換モードで動いてる時は
改行が入っていると空白ができてしまうみたいです。
改行を消すか、DOCTYPE宣言で標準タイプを使わせれば
意図したとおりに動くと思います。
499 :
496 :05/01/23 19:43:57 ID:???
500 :
497 :05/01/23 19:48:30 ID:???
>>499 内容がその枠の中だけに入れるのなら、
bodyにwidthなりborderなりを設定すればいけます。
枠の外にも置きたい要素があるのなら
divタグで事足りると思います。
501 :
493 :05/01/23 19:54:01 ID:b8/uXTWU
>>497 神様!!!ありがとうございました!できました!
まさしくネ申!!
因みに、他の方にも参考になるかもしれないので、追記です。
書き忘れていていたのですが、DOCTYPE宣言は元々標準モードでした。
なので、原因はどうやら改行のようです。liを一行に書けば、
画像とピッタリ合いました!
497様、本当にどうもありがとう!
502 :
493 :05/01/23 20:02:00 ID:b8/uXTWU
>>497 師匠
ついでにお尋ねしていいですか?
私、一応ググってみたり、バグ辞典サイト見たりしてみたんですけど
わからなかったのです。コレって有名なバグですか?
それとも私の調べ方が不十分?(もしそうだったら本当にゴメンナサイ)
バグ辞典や回避法サイトでもしいいのがあったら教えてください。m( __ __ )m
503 :
496 :05/01/23 20:06:57 ID:???
>>497 ありがとうございます。CSS勉強し始めたばかりなのですがやり方見て試してみます
504 :
497 :05/01/23 20:09:21 ID:???
どうなんでしょう? ぼくも似たような境遇が多かったみたいで、 いろいろ試しているうちに見つけた回避法なんですが…。 ぼくの方では標準モードなら改行があっても普通に表示できたんですが この辺もよくわからない…^^;
505 :
Name_Not_Found :05/01/23 20:12:26 ID:cBYf61bk
CSSでテーブルタグのようなデザインって出来るよな?確か。。。
書籍関連の質問なので
http://pc5.2ch.net/test/read.cgi/hp/1099736818/で 聞こうと思ったのですが、CSSに特化した質問なのでこちらでします。
WEBサイト運営初心者ではないけど
CSSをオマケ程度しか使ってない人間です。
レイアウトはテーブルでやってるし
CSSは、リンクの下線を消したり、スクロールバーの色を変えるとか
行間を指定したり、文字の大きさを指定する程度にしか使っていませんでした。
でも、今後はサイトをHTMLとCSSを正しく使って運営したい、
今までのサイトもHTMLとCSSを正しく使ったページに書き直して
いきたいと思い、本を買いたいと思っています。
(今持ってる本は、「ポケットリファレンスHTML」って本だけです。)
ネット上に素晴らしいCSS解説サイトがあるのは知っていますが
書籍という形態の媒体が好きなので、本を買って手元におきたいのです。
もよりの本屋はパソコン関連の本の入りが悪いので
ネットの本屋で本を買うつもりですが
ネット本屋のレビューを見て
「一週間でマスターするCSS」
「プチリファレンスHTML」
「スタイルシートスタイルブック」
「スタイルシートレッスンブック」
あたりをチェックしたんですが
お勧めはズバリどの本でしょうか?
508 :
50 :05/01/23 20:19:54 ID:???
ウィンドウズ2000 IE6.0 NS7.1 NC4.7 を持っています。
>507 その質問は書籍スレのほうがいいんじゃないの?
>509 すみません。書籍スレで質問します。 スレ汚し申し訳ありませんでした。
悩んだ末こっちに書いたんじゃないのか… スタイルシートWebデザインっていうのが絶版になってるけど 定評があるらしい。どうなんだろ
513 :
Name_Not_Found :05/01/23 22:02:54 ID:MRDH60KI
scrollbar-arrow-color:#333333; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffeeee; scrollbar-highlight-color:#ff4444; scrollbar-shadow-color:#ff4444; scrollbar-track-color:#ffeeee この色にスクロールバーを変更しています。 スクロールバーを固定しているときはスクロールバー上と下の矢印が黒くなってちゃんと表示されるのですが。 スクロールされない状態で見てみると、赤色の矢印がちょっとかけて見えてしまいます。 具体的にいうと上の方の矢印の左下、下の方の矢印だと右上の部分です。 この矢印を正常にスクロールするときみたいにキレイに表示するにはどうすればよいのでしょうか。 色を何度変更しても変わりそうにないので書き込みました。
スクロールバーの色変更は、 この板では嫌う人が多いです。 かくいう私も嫌いな一人です。 やめましょう。
既出だったらすいません。少しお聞きしたいことがあります。 似非フレームoverflowをつかって縦にページを三分割したんですが その境目がIEだとリストの部分だけ1px程陥没してしまいます。 これはIEのバグなんでしょうか?
なぜスクロールバーの色変更って嫌なんでしょうか。 文字がmarqueeとかはわかる気もするんですが、やっぱり見にくいでしょうか。 サイトの色にあわせたりすれば、初期よりいいと思うんだけど。
517 :
496 :05/01/23 22:25:28 ID:???
<style type="text/css">body {width: 150px;margin-left: auto;margin-right: auto}</style> みたいでいいのかしら?わかんねーorz
>516 スクロールバーの色変えは 仕様書無視の、IEの独自スタイルシートだからじゃね? 詳解HTMLXHTMLCSS辞典には載ってない。
まぁどっちでもいいんじゃないの>スクロールバー色変更 逆に考えればWinIEしか変わらないんだから つかWinIEでも標準モードだとダメじゃなかったっけ?
自己解決しました、ごめんなさい。 仕様書無視だったんですか、知りませんでした。 スタイルシート辞典というのを愛用しているのですが、 ネットスケープは未対応とは書いてあったんですが、感謝です。
欠けて見えるのはshadow-colorとface-colorの色が近すぎてるだけ
>>516 基本的にUIの変更は、操作性を悪くし、ややもすると訪問者を混乱させるだけだから。
他にも、マウスポインタの変更や、わけわからん独自のUI(JavaScriptを用いた物等)とかも
大概は、”鬱陶しい”だけだったりする。
が、どうしてもIEユーザにはスクロールバーを変更してほしいと思うなら書けばよい、とは思うけどね。
ただ、デメリットをわきまえた上で、”あえて”選択した、と、自分の中で割り切って使うのが吉だと思うけどね。
------ | 1 | ------ | 2 | ------ | 3 | ------ フレームで3つにわけてます。 1のフレームの中に box を2の画面と繋がってみえるように 下寄せにしたいんですが、CSSで下寄せにできるのでしょうか? margin-bottom: 0px; ではならないのでしょうか、、?
>>524 ボックスは上から順に流し込まれるのが基本だから、
margin-topかpadding-topを適当にとるか絶対配置するかじゃん
526 :
Name_Not_Found :05/01/24 03:58:07 ID:9DurKeBp
p{line-height:0.3em} --></style> 文字<br><br><br> 文字<br><br><br> 文字<br><br><br> これを繰りかえして文字の下をドラッグすると青い空白みたいなのが表示されますが、 それが嫌いなので、<br>以外で代用できないかと思って。 <p>文字</p> <p>文字</p> <p>文字</p> と書いたのですが、行のあけ方が広すぎるんです。 これをもっとせまくするために、上にあるスタイルシート書いたのですが。 行の幅をせまくできませんでした。こういう場合はどうすればよいのでしょうか。
<table cellspacing="1" cellpadding="2"><tr><td> あああいいいうううえええおおお </td></tr></table> <table cellspacing="1" cellpadding="0"><tr><td> あああいいいうううえええおおお </td></tr></table> この2つのテーブルのソースがありますが、 cellpaddingの値が違います、cellpadding以外の値を変えることによって。 同じ表示形式にすることができるでしょうか。 スタイルシートを使ったりして。
529 :
528 :05/01/24 05:16:49 ID:???
解決しました。
なにをどうしたら解決したのか書いていくのがマナー
モナー
532 :
528 :05/01/24 05:32:27 ID:???
すみません、cellpaddingを変えることによって。 文字が右に1px、下に1pxいくっぽいので。 marginで右と下に1pxだけ足したら。 見た目は同じっぽくなったのでOKかなとしました。
>>526-527 p{line-height:0.3em} このソースを
p{margin:0.3em}にすれば良いってことですよね。
今確かめてみたら、
>>533 これじゃできないぞ。
確かに文字下の青い空白はすくなるなってたけど。
文字まで右にいってるし。もうだめぽ。
連続brをやめて行間をあけたいのか 狭くしたいのかさっぱりわからん
<div id="1" align="center"> <div id="2" style="position:relative; top:XXpx;left:XXpx" > </div> </div> id="2"のdivを、id="1"の相対位置に配置したいです。 この場合、id="1"とid="2"の位置指定をどのようにすればいいのでしょう。
537 :
Name_Not_Found :05/01/24 10:55:37 ID:GS74gkyy
作れるよ。
539 :
537 :05/01/24 11:32:26 ID:???
CSSで
>>539 tdにstyle="border:1px"みたいにやればいいじゃん
>>541 あ、そんなに簡単に出来るんですか。有難うございます。。
"そんなに簡単"なことも調べられずに、何言ってる。
544 :
Name_Not_Found :05/01/24 14:58:31 ID:9DurKeBp
【 図 】 それに対する説明文 というレイアウトをCSSで制作することは出来ますか? 条件としまして ・図はセンタリング ・図の横幅はソースに依存する(統一されていない) ・説明文は左寄せで、図の左端から記述を開始する。なお説明文の横幅は 図の横幅よりはみ出さないようにする。 ・上記の構造をブラウザや文字サイズに依存させずに構築する こんなことは可能でしょうか?
>544 行間とブロック間がごっちゃになってる? 行の幅を広くしたければline-heightで pとp、つまり段落どうしの間を広くしたいならmargin で、どっちがやりたいのかよくわからんと
548 :
Name_Not_Found :05/01/24 15:21:59 ID:9DurKeBp
>>546 文字
ここの空間を空けたいけど、少しだけでいいんです。
文字
それで<p>タグを使ったのですが、空白の幅が広すぎて。
それでスタイルシートでp{line-height:0.3em} を書いて。
pの広さをせまくしようとしたのですが、ムリでした。
marginをやると、狭くはなったのですが、文字まで右にいってしまって。
うお、p{line-height:0.3em} で普通にうまく表示されてました。 できました、ウフォフォオオオオオオオオ。
>>526 p {padding:0; margin:0;}
div.gyoukan{ line-height:2; }
<div class="gyoukan">
<p>mokya</p>
<p>mokya</p>
</div>
>>551 おお、そのやり方の方でやりたいと思います。ありがとう。
文字が15px使っているので、div.gyoukan{line-height:20px}がちょうどいい。
うまくできました。
cssを外部ファイルにして、読み込むやり方でデメリットってありますか? 読み込み時間が遅くなるとかあるのかな。
<div style="position:relative; z-index:2;"> <table> 〜中略〜 </table> </div> <div style="position:relative;z-index:1;"> <object> 〜中略〜(ちなみにFlashムービー) </object> </div> こうしても、重なり合う部分は、 下のdivが常に前にくるんですが、 どこがおかしいのでしょう・・・。
cssの継承について質問させて下さい <div>テスト 0</div> <div style="font-size: 2em"> テスト 1 <table> <tr> <td>テスト 2</td> <td style="font-size: 2em">テスト 3</td> </tr> </table> </div> テーブルの中では外のfont-size: 2emを継承する?しない? HTMLではしない,XHTMLではするが正解??
>>555 それより先に、style="font-size: 2em"
の意味を考える事
興味本位の質問で恐縮ですが、よろしければ教えてください。 スタイルシートでサイトを作ろう、といった趣旨の本で <div id="navi"> <ul> <li>menuA</li> <li>menuB</li> <li>menuC</li> </ul> </div> といった記述を見かけます。 リストを使って、スタイルシートで横に並ぶようにしているのですが、例えば、 <div id="menu1">menuA</div> <div id="menu2">menuB</div> <div id="menu3">menuC</div> として、それぞれにfloat:left;とした場合とどのようなメリットの差があるのでしょうか?
>>557 ナビゲーションとはいわばリンクのリスト。
去れば li でマークアップするのが正しいでしょう、ということ。
div には特に意味がないし。
メリット・デメリットの問題じゃないよ。
divの直下にliを置くような本が出回ってるのか。 HTMLとか、CSSの本って、いまだに仕様書読んだことない人でも書けるんだね。
560 :
557 :05/01/24 23:05:39 ID:???
>ナビゲーションとはいわばリンクのリスト。 そういう解釈なんですね。 >divの直下にliを置くような本が出回ってるのか。 >HTMLとか、CSSの本って、いまだに仕様書読んだことない人でも書けるんだね。 自分も読んでいませんが、本の内容は鵜呑みにしていました。良くないことだったんですね。
562 :
560 :05/01/24 23:15:38 ID:???
>561 了解しました。
563 :
561 :05/01/24 23:16:32 ID:???
補足。 divの直下に「menuA」などのインラインなものが来るのは推奨されません。 インラインなものは大概ブロックレベル要素の子になっているべき、 と思っていた方がいいくらいです、最初のウチは。
564 :
560 :05/01/24 23:21:34 ID:???
>563 わかりました。勉強になります。
565 :
555 :05/01/25 07:20:58 ID:???
>>556 意味を考えたら継承するんだろうけど
firefoxではHTMLとしたときとXHTMLとしたときで
表示が違ってくるので質問しました
じゃあ
>>556 の回答によると
firefoxは間違ったレンダリングをしているということですね
567 :
Name_Not_Found :05/01/25 11:23:42 ID:kHFCSVYM
TopStylePro3.10を文字化けしないようにできないでしょうか? 他スレを読むと、「フォントを何回か適当に選んだら出来た」と 言っているのですがどうしてもできません。 どなたかご存知な方いらっしゃいませんか?
一行で右寄せテキストと左寄せテキストを混在させるにはどうすればいいですか? …と聞こうと思ってこのスレッドにきたら、テンプレがすんごい充実しているのね。 質問する前に全部読まなきゃならんとですか… ありがたやありがたや
一応自己解決: <div style="border: solid 1px; float:left;">hoge</div> <div style="border: solid 1px; text-align:right">fuga</div> 右側のブロックがずいぶん横長になったりしますが。
>>571 <div style="border: solid 1px; float:left;width:50%;">hoge</div>
<div style="border: solid 1px; text-align:right;width:49%;">fuga</div>
>>570 質問して、求める答えが出てくる前に、テンプレで探せてしまうと思うがなぁ。
よほど、便利じゃん。
このままだと左と右で文字のサイズが違うとき、 ベースラインが合わなくなってずれて見えるな。
576 :
570 :05/01/25 16:34:41 ID:???
577 :
555 :05/01/25 19:11:24 ID:???
>>566 リンクしてくれたページですげー理解できたわ.dクス
>>575 まったく同じ事やってる人がいた。これなら無駄な改行は無くなる。
他にベターな方法があるならぜひ俺も教えて欲しい。
ちなみに、clear:はCSS1では
Applies to: all elements だけど、
CSS2では
Applies to: block-level elements だから、
brにclear:するよりかはまだいい気がするんだけどな。
.clear { line-height: 1px; font-size: 1px; clear: both; } <div class="clear">.</div> 半角ピリオドを入れると空ブロックじゃなくなるけどね。。。
.leftbox { float:left: } .leftbox:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } これの方がスマートだろうか?
<div class="a">
<ul>
<li>じゅげむじゅげむごこうのすりきれ</li>
<li>なまむぎなまごめなまたまご</li>
</ul>
</div>
を
┌──────────┐
│・じゅげむじゅげむごこう│
│・なまむぎなまごめなま │
└──────────┘
こんな感じで枠を超えた分は省略して
表示させたいのだけどがうまくいきません
どうしたらいいのでしょうか。
http://csstest.nobody.jp/
>>582 white-space: nowrap;
overflow: hidden;
>>581 別に
content: "";
で良いと思われ
空ブロックはだめなんだろうが contentがどうとか以前に。
連続BRこそが男の魂だろボケ
まったくだ
>>585 579で空ブロックが駄目と書かれてるのは
どう読んでも
clearの為に<div></div>なんて良くないという
スタイルのためにマークアップを変えるなというような
事を言ってるだけだと思うが。
css仕様的に空ブロックでclearできない理由は無い。
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<br>や<hr>を置いて、display:blockにして、上方向に少しずらす、 という方法を良くとります。
まてよ? <pre> これだ!
俺のサイトは<PRE>使いまくり。
BRの多さ=男の価値
<br>ホームページ<br> <br>画像1<br><br>画像2<br> <br> <br> <br><br> <br><br><br><br> <br>戻る<br> <br>メール<br>
<center>を使わない香具師はモグリだね
っていうかチキン?ww
<tikin> ?こんなタグあったっけ?
floatを先に記述してその後にpositionを置き、topなどをマイナスにしなければ positionとfloatを重ねることはできないのでしょうか?
よくわかりません?
600 :
Name_Not_Found :05/01/27 05:05:06 ID:fAEk58v+
floatで左(テキスト)右(画像)のようにしています。 これを逆に右(テキスト)左(画像)のようにするには どうしたらいいのでしょうか?簡単に書くとソースは次の通りです。 <div class="space"> <div class="text">テキスト</div> </div> <div class="space"> <div class="img"><img src="image.gif" width="250" height="188"></div> </div>
601 :
600 :05/01/27 05:07:15 ID:???
.text{font-size: medium; width: 250px;} .img {height: 188px; width: 250px; } .space {width: 250px; margin-top: 20px; float: left; }
>>600 left を right にすればおしまいなのでは?
……ん? ここで何か一発ボケをかましなさいってことなのか?
1つのHTML文書でクラスを20個も設定するっておかしいでしょうか。 8個までとか決まっているのでしょうか。皆さん多いとき何個ぐらい設定するでしょう。
>>603 > 20個も設定するっておかしいでしょうか
おかしくないです。
> 皆さん多いとき何個ぐらい
漏れは子孫セレクタを多用するタイプなのでクラス名の数は何十個、とはなりません。
何個って言われても、ドキュメントによりけりだしね。
605 :
Name_Not_Found :05/01/27 11:16:37 ID:Df6QI8KH
こちらで聞けと言われたのですが、文字と文字の間隔を空けたいのですが どうしたら良いのでしょうか? 見づらくて困っています、どなたか教えてください。
お知恵を拝借したいのですが…よろしくお願いいたします。 <div style="background-image:url('背景画像'); background-repeat:no-repeat;"> 内容内容 : (中略) : 内容内容 </div> となっているとしてこれを印刷した際に、DIVの内容が縦長のため2枚以上に渡るなると、 各ページに背景画像が入ってしまうのですが、2枚目以降は背景が入らないようには出来ませんでしょうか? divを適度な所で分けて、印刷時にページを跨らないようにするしかないでしょうか? ブラウザはWIN IE6ですが、他のブラウザも考慮したい所です。
スタイルシートで p.menu {color: #000000; text-align: left; margin: 7px 0 5px 10px;} と書いてみたのですが IEとNNではマージンの長さが変わるのです。なぜでしょうか?
追記です。すみません。 p.menuの親には #menu { color: #ffffff; width: 180px; text-align: left; border: 2px solid #4682B4; margin: 0 0 20px 0; background: #f3f3f3; } と書いています。
612 :
609 :05/01/27 19:48:28 ID:4CSKNGH4
613 :
609 :05/01/27 19:51:54 ID:???
あ、すみません。 自己解決しました。
初心者スレから誘導されてきました。 Divの位置指定についての質問です。 positionでpx、%指定ではなく、”center”表示するにはどのように書けばいいでしょうか? ブラウザの大きさが変わっても、真ん中に表示したいのですが。 %指定しても<center>のようには機能しないし、 <center> <div> ・・・・・・・・・ </div> </center> とやってみてもだめでした。 解決策をご教授下さい。
margin:auto
リンクをボーダーで囲い、hoverになったときに その範囲全体の色を変えたいと思ってます。 本を読んだ感じでは、リンクしたい文字にwidthなどを設定し、 a:hoverにbackground-colorを設定すれば良い?ようなのですが 文字の背景部分が変わるだけで、ボックス全体の背景が変わってくれません。 WinXP、IE6.02 Opera7.23 NN7.1ですが、どれも駄目です。 (NNはそもそもwidthを無視してます…) ソースは以下のような感じになっています。
617 :
616 :05/01/27 21:28:15 ID:???
<ul id="navbar"> <li><a href="">リンク先1</a></li> <li><a href="">リンク先2</a></li> <li><a href="">リンク先3</a></li> </ul> a:link{color:#ff0066;text-decoration:none;} a:visited{color:#ff9999;text-decoration:none;} a:hover{color:#ff0066;text-decoration:underline;background-color:#eeeeee;} a:active{color:#ff0066;text-decoration:none;} #navbar{ list-style:none; margin:0px; padding:0px; background-color:#3399ff;} #navbar li{ display:inline; text-align:center; padding-top:2px; padding-bottom:2px; width:110px; voice-family:"\"}\""; voice-family:inherit; width:108px;} #navbar a{font-weight:bold;color:#ffffff;}
>>617 a要素はインラインでしょ。
お好みの大きさに変えたいなら、displayでブロック化しる。
619 :
614 :05/01/27 21:36:25 ID:???
>>615 それやってみましたが真ん中になりません・・・
>>614 ブラウザの大きさが変わっても、真ん中に表示したいなら、
bodyにmargin:auto;とtext-align:centerを使えばOK。
2つ使う理由はIEと他各ブラウザに対応させる為。
>>620 なるほど。やってみますね。
ありがとうございます
622 :
616 :05/01/27 21:49:00 ID:???
>>618 あ。それもそうですよね。
ただ、
#navbar a{font-weight:bold;color:#ffffff;display:block;}
としてしまうと、NN7.1とFirefox1.0(こっちは無視しようかなと思ってますが…)では
#navbarで設定したdisplay:inline;が無効になってしまうようなんです。
どこに指定するのが適切なんでしょうか?
リンク先1 リンク先2 リンク先3
と、横並びにしたいのに…。
そしてOperaではbackground-color:#eeeeee自体を無視されましたorz
623 :
614 :05/01/27 21:58:09 ID:???
なぜか右よりになってしまいます。 外部CSSは以下。 body{font-size:10px;color:#666; background-color:#fff; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-arrow-color:#aaa; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; margin:auto;text-align:center;} div{ width:650px; height:420px; background-image: url(image/bg.gif); background-repeat:no-repeat;} 何処が問題なんでしょうか。。
625 :
623 :05/01/27 22:10:34 ID:???
ああ、、、IEの仕様だったんですか。。。。 解決しました。助かりました
>>622 IEとFirefoxで挙動が違うとき
仕様違反なのは、ほとんどの場合IEだし。
Firefoxのシェアも5%になったらしいし。
昔見たいに99%IEなら楽だったんだけどね。
>display:inline;が無効
当たり前だし。
横並びにしたいなら現状、floatか絶対配置しかない。
何年かたったらinline-blockが普通に使えるかもね。
628 :
616 :05/01/27 22:28:56 ID:???
>>626 >>display:inline;が無効
>当たり前だし。
た、確かに…inlineとblockが併用できたらおかしい、ってことですよねorz
四角の背景ごと色が変わるのはあきらめることにします。
ブラウザによって変な見た目になるよりは
どのブラウザでも普通なほうが良いや…。
自分でもFirefox使ってますしね。
629 :
625 :05/01/27 22:30:06 ID:???
input 要素に border を指定しているのですが、 Firefox だと type="hidden" のときもボーダーが表示されてしまいます。 個別に display:none; を指定するのはツライです。 一括指定する方法は無いでしょうか。
631 :
631 :05/01/28 04:30:42 ID:???
632 :
630 :05/01/28 04:31:19 ID:???
レス番間違えました…
は?なにいってんの?真性バカだろ
横ヤリだが、なんでそんな偉そうなんだ
>>628 なんでfloatでならべるのではいかんの?
>>608 @media print 使ってその中でbackground-image:noneにするのが一番妥当かも
一枚目だけ背景いれることをそのソースを使って実現するとなったら@page:firstを使うしかないと思うが
ほとんどのブラウザは対応していません。HTML組みなおしの方がはやいかも。
参考にならなくてごめん。
CSSファイルの中を整理したら7KBから4KBになりました。
どうでもいい
639 :
628 :05/01/28 20:32:46 ID:???
>>635 それもそうかwありがとうございます。
liにfloatやblockを指定するのって、問題ナシ?
ナシ
641 :
628 :05/01/28 21:56:56 ID:???
どうもありがとう。
一枚のhtmlファイルに3カ所 リンクが合ったとしまして、 それぞれのリンクカラーを変えることは出来るのですが、 a:hoverやa:active、a:visitedなどをそれぞれ変える事って出来るんでしょうか? どうすればできるのか、指定の方法って教えて貰えません?
644 :
642 :05/01/29 01:11:48 ID:???
早速試してみました。 ありがとうございます。 参考サイトもじっくり拝見致します。
文章の区切りのために、水平線を画像をしたいのですがうまくいきません。 (みためは細長い画像の区切り線、といった感じにしたいです) hr { height:30px; border:none; background-image: url(img/hoge.png); } このように書いてみましたが、表示させるとhrの枠線が残ってしまいました。 hr自体をnoshadeにすると、枠線は消えますがhr内が塗りつぶされたようになってしまい 画像が表示できません。 解説などを見たところ、noshadeはborderで代用とあったのでそうしてみましたが、 hrのもともとの枠線の外にボーダーが出てくるだけで枠は消えませんでした。 ドツボにはまったみたいで解決法が見当たりませんorz つまらない事かもしれませんが、どなたかアドバイスをお願いできればと思います。 WinXP IE6とNN7.0で表示確認しました。
\ / \ / 氏ね氏 氏 ね 氏 ね シネヤシネヤシネヤ 氏 ね 氏 ね 氏 __氏ね 氏 ね 氏 ね__ / 氏ね 氏 ね 氏 ね 氏 \ __氏 ね 氏 ね 氏 氏ね__ / 氏ね 氏 ね 氏 ね 氏 \ __氏 ね 氏 ね 氏 ね __ / 氏 ね 氏 ね 氏 \ 氏 ね 氏 ね 氏ね氏 ね
>>645 hrでなく、画像そのまま張ればいいだけじぁないのか?
ソースは <div>A</div> <div>B</div> にして 表示は B A って可能かな? なんでこんなひねくれた事したいかっていうと、 Aはページごとのテキストで、Bは各ページ共通の上部メニュー。 SEOを考えると、AよりもBの方を<body>の開始に近づけたいからなんですわ。 まあBのメニューはheightが変わらんようにするから、 <div style="padding-top:Bのheight分">A</div> <div style="margin-top:-(A-Bのheight分)">B</div> で、いけるよね?合ってるかな? でも、他に方法はないかなあ。
650 :
649 :05/01/29 12:40:04 ID:???
>SEOを考えると、AよりもBの方を<body>の開始に近づけたいからなんですわ 間違えました。 >SEOを考えると、BよりもAの方を<body>の開始に近づけたいからなんですわ ややこしくてごめんなさい。
651 :
649 :05/01/29 12:44:48 ID:???
あ、駄目だ。 A(=テキストが主)は、文字サイズを固定しないのでheightが変わってくるや。 ムズかしいな。誰か思いつかない?
絶対位置
653 :
649 :05/01/29 12:51:22 ID:???
>>652 そっか、なんて単純な手を忘れてたんだ。
Bのheightが変わんないなら、余裕じゃん。
アホだな、俺。
アホですね。
単位の付けかたについて、 数値がゼロの場合は、 margin-bottom:0 と、単位をつけずにやるのがいいのか、 margin-bottom:0em margin-bottom:0px というように、単位をつけた方がいいのか、 どちらか悩んでおりますが、 正しい書式はどちらなのかどなたかご教示下さい。
0に単位は付かない。
>>655 どっちも正しい
ってか悩む時間があるなら
>>4 の仕様書でも読んでろよ
画像の一部が透過画像をulの背景として使って liのテキストの上に置いて、画像の透過部分に 重なった部分だけliのテキストが読めるように するにはどうしたらいいでしょう? <html></body> <ul><li>abcdefg</li></ul> </body></html> css: ul{background-image:url("transparent.jpg");}
661 :
645 :05/01/30 01:08:40 ID:???
>646 >648 レスありがとうです。やっぱり仕様ですか… ブログの記事に使用したいので、画像直接貼りは避けたかったのですが、難しいようですね。
>>661 区切りに続くブロックの背景に画像を指定して、上部固定とかじゃ駄目なの?
664 :
Name_Not_Found :05/01/30 07:45:30 ID:c1na4xkI
<div style="width:400px; margin:30px;"> <!-- divは見やすさのため。--> <span style="font-size:200%; line-height:1em; border:1px solid; padding:0em;"> qあwせdrftgyふじこlp;@ qあwせdrftgyふじこlp;@ qあwせdrftgyふじこlp;@ </span> </div> ↑このようなspanのボーダーについてなのですが MacのGeckoブラウザ(Firefox1.0/Camino0.8/Mozilla1.8a6)だと(a, spanなどの非置換インライン要素で)、 ボーダーが次の行のど真ん中を横切ります。 (IE6でもすこしはみ出します) 「非置換インライン要素の高さはline-heightで決まる。 だから、line-heightが1emでパディングが0のとき ボーダー下辺は次の行のボーダー上辺とほぼ重なる」 と思っていたんですが、激しい勘違いですか? もしかしてバグですか?
なぜ<span>なのかね、ヘルペス君?
666 :
Name_Not_Found :05/01/30 13:34:43 ID:c1na4xkI
ヘルペスです。 すいません混乱してまつ。 a,em,spanの3つについては同じ現象であることは確認しましたが、 すべての非置換インライン要素で言えるのかすこし自信がもてません。 サンプルコードにspanを使ったことには深い意味ないです。。。
>>666 それどっかに出てたな。
過去スレ漁ってみれ。
668 :
Name_Not_Found :05/01/30 17:08:11 ID:Mm5Hgt/s
初歩的な質問という気もしますが、過去ログあさっても分かりませんでした。 一つのHTMLファイルに、 複数の外部スタイルシートを指定して反映させることはできるでしょうか? たとえば、 一つの外部スタイルシートでテキスト関連のレイアウトを指定して、 別の外部スタイルシートで背景色や背景画像を指定。 それを1つのHTMLファイルに反映させる。 というようなことをやりたいのですが、 むりでしょうか? 教えてください。
できます
670 :
669 :05/01/30 17:30:37 ID:???
できますか? 助かりました。 ご親切に有難うございました。
すみません、名前欄間違えました。 670は668で669へのレスでした。
サーバ内でブラウザ判別してるサイトはjs使わずにそれぞれの対応CSSに振り分けてるよね
673 :
668 :05/01/30 17:49:52 ID:???
すみません。まだHTMLの勉強を始めたばかりで、何がなにやら。
正直、jsが何かも分かりません。
使用するソースを貼り付けてみました。
こういう表記でいいのでしょうか?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd ">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>○○○</TITLE>
<LINK rel="stylesheet" href="css1.css" type="text/css">
<LINK rel="stylesheet" href="css2.css" type="text/css">
</HEAD>
お手間を取らせてしまいますが、よろしくお願いします。
display:blockを使わない場合、 インライン要素にwidthプロパティ他使うのは正しい使い方? 上記の使い方してるサイトを発見。 IEのバグかな?と思いきやNN・オペラでも普通に動作してる。 ブロック要素にしか使えないと思ってたんだけど、 俺の記憶違いかな?
TopStyle
俺もTopStyleを勧めておく。
設定が視覚で確認出来る。
684 :
Name_Not_Found :05/01/31 00:45:41 ID:nvVZfJck
3つほど質問です。 divにmargin-top:0;を記述しているのですが Operaでは無視される。 見出しにborder-bottom:1px solid black;border-top:1px solid black; と記述したのですがネスケでは下の線が表示されない。 リストタグと段落タグを組み合わせて 似非フレームdivの中に入れたらIEだけ幅が揃わない これからは改善しようがないバグなのでしょうか?
686 :
Name_Not_Found :05/01/31 01:37:59 ID:53F4LkVL
すいません、画像に白黒のフィルタをかけて、オンマウスでフィルタが取れるというのをやりたいのですが、 最初にフィルタがかかっていない状態で表示されます。(IE6.0) <IMG src="image/.※※jpg" border="0" style="margin-right : ※※;" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'"> この表記であっていると思ったのですが、何かが足りないのでしょうか。
>>686 >最初にフィルタがかかっていない状態で表示されます
あたりまえ。
onmouseoutがどういうイベントか調べてみ。
688 :
686 :05/01/31 02:11:46 ID:???
調べました…らなるほどです…。 ありがとうございました。
689 :
686 :05/01/31 02:47:02 ID:???
あと画像じゃなくてテーブルのほうに style="filter:gray(); 入れたら解決しました。 ありがとうございました。
>>684 そんなソースで判断できるか。まあ多分、あなたの勘違ひ。
695 :
608 :05/01/31 20:36:31 ID:???
>>636 さん
レスが遅くなりましてすみません〜。
そうですか〜…。
主要ブラウザで対応しないといけないので、
組みなおしします。
勉強になりました、ありがとうございます!
backgroundで指定した背景画像を引き伸ばしたり縮小したりできませんか? 背景画像をストレッチさせたいのですが画像タグ、imgタグなら拡大や縮小できるというのしか見つかりません。 どのようにすれば背景画像を拡大や縮小できますか?
なるほど、ありがとうございます。 今ふと思ったのですが、z-indexを利用して背後にimgタグを忍ばせるのもでも出来そうですね。 ありがとうございました。
699 :
XHTML1.0です :05/02/01 01:14:59 ID:6kF0AFY9
ここで訊いていいのかどうかわからないのですが、、 OSはWin2kでIE5.5なんですが、リンクの上にカーソルを乗せると 少しテキストが動くというかスクロール(?)してしまいます。 全部のリンクでこの症状になるわけではないので、なんか気持ち悪いのですが、、 これを回避する方法は無いのでしょうか?よろしくお願いします。
701 :
699 :05/02/01 03:21:10 ID:6kF0AFY9
702 :
ぁゃ :05/02/01 10:55:48 ID:xMxtma5r
はじめまして。 スクロールバーの記述でscrollbar-base-color の部分に画像をいれることはできるのでしょうか? よろしくおねがいします。
無理
-moz 系のプロパティと同じで、 UAそのもののインターフェイスをいじるのは感心しない。
CSSで横に並べた要素の高さを揃えることは可能でしょうか? <div style="width:100px;float:left;border:1px solid #FFFFFF"> 左おっぱい </div> <div style="width:100px;border:1px solid #FFFFFF"> 右おっぱい 右おっぱい </div> のようなことです。
706 :
Name_Not_Found :05/02/01 18:27:50 ID:yp+YnIE3
kent-webのyybbsを使っています。
掲示板の投稿するボタンをCSSで色を変えたのですが、
タイトルを入力しようとすると、投稿するボタンのまわりに黒いボーダーみたいなのがでてきます。
下の画像の黒いものが、これをどうにかして出てこなくしたいのです。
できるのでしょうか。
http://u.skr.jp/512/files/8385.png
>>705 よく見る質問のような気がするのだけど、
高さをそろえたい理由は?
理由によって対処法が違うし。
709 :
Name_Not_Found :05/02/01 18:58:58 ID:yp+YnIE3
>>707 にいとは何なんでしょうか。
勉強不足ですみません。
検索してみても新潟がヒットしすぎて、なんとも。
712 :
Name_Not_Found :05/02/02 00:11:59 ID:DsxxOwL1
print "<input type=submit value='返信' onmouseout=this.style.background=#fff0f0 onMouseOver=this.style.background=#eeeeee>\n"; このソースを貼り付けたら、エラーが起きてしまいました。なぜなのでしょうか。原因がわからなくて。
相当アフォウだな… というか多分書く場所を間違えていることと、 クオーテーションで囲うところはちゃんと囲おう。
714 :
Name_Not_Found :05/02/02 01:07:42 ID:DsxxOwL1
スタイルシートなのかと思ってここに書き込みしたのですが、違うのでしょうか。 クオーテーションはカラーのところだと思うのですが、いちおう前と後ろに'をつけたり。 ダブルクオーテーションにして\つけたりしてやってみたのですが、表示さえされなくて。 printにないところは、下ので普通にできるのですが。 <input type=reset value="a" onmouseout=this.style.background="#ffff00" onMouseOver=this.style.background="#000000">
715 :
712 :05/02/02 01:28:49 ID:???
なぜか、そのままのソースでも表示できました。 一体なんだったのか不明ですが、ありがとうございました。 ジャバスクリプトっぽいですね、これ。
>>714 スタイルシートじゃなくてスクリプト。
スレ違いだとおもう。
あなたの場合、何度かやりとりをしないと問題が解決しなそうだし、
ここではなくて先にスレッドを移動するのがおすすめ。
717 :
716 :05/02/02 01:36:13 ID:???
>>712 って
>>706 だろ?
CSSだのJSだのに手つける前にHTMLから学びなおすべきだと思うが
719 :
705 :05/02/02 09:42:09 ID:???
>>708 >高さをそろえたい理由は?
段組みとしてブロック要素を使っています。
見た目でいうと、各要素にbackground-colorを指定した時の下辺の終了位置を揃えたいためです。
仮に4つ横並びに段組みをした場合、各要素のheightはautoにしつつ、一番heightが大きくなる要素に、
他3つも揃うようにならないのかなと思いまして。
<br style="clear:both">などで解除しても、各々のheightになりますし、
親要素を作ってみて、子要素達のheightを親要素に揃えようとしても
(height:100%)、これでは逆に親要素が子要素の影響を受けてレイアウトが崩れてしまいますし。
>>711 せっかくの御厚意なのですが、ご指摘のレスのURL先で問題解決の糸口を見つけられませんでした。
720 :
705 :05/02/02 11:22:27 ID:???
なんとか、もう一丁親要素をつくることで、制御出来るようにはなりました。 ただ、これだと、padding-bottomの解釈がそれぞれのブラウザで異なってしまいます。 以下、便宜的にdivに番号を振ります。 1<div style="height:80%;padding:30px;border:red 1px solid;"> 2<div style="height:100%;padding:10px;border:1px solid blue;"> 3<div style="height:100%;float:left;width:100px;border:1px solid black;"> <p>左おっぱい</p> </div> 4<div style="height:100%;float:left;width:100px;border:1px solid black;"> <p>右おっぱい</p> <p>右おっぱい</p> </div> <br style="clear:both"> </div> </div> win ie6.0=問題なし win ネスケ7.1=2のpadding-bottomは有効で、1のpadding-bottomは減らされる。 mac ie5.1=1.2ともpadding-bottomの数値分だけ要素外へ突き抜ける。3の左おっぱいが要素左上に集合してしまう。 mac ネスケ7.1= 2のpadding-bottomは有効で、1のpadding-bottomは減らされる。 mac safari1.2=1.2ともpaddin-bottomは正常だが、3のheight:100%が無効になる。 これらの対処法はあるのでしょうか?
721 :
Name_Not_Found :05/02/02 11:24:49 ID:uGs+hL0f
722 :
664 :05/02/02 11:34:39 ID:???
>>667 2日がんばって探しましたが、見つけられません。
真性バカですか?
723 :
708 :05/02/02 12:21:41 ID:???
>>719 高さをそろえる理由が段組されているブロックに罫線やら背景色やらが指定されていて、
下端がそろわないとかっこわるい、という理由ならば、
heightプロパティをごにょごにょするよりも、
親ブロックの背景画像をうまく利用するという方法が楽です。
724 :
705 :05/02/02 12:28:45 ID:???
>>723 なるほど、確かにスッキリかつ確実ですね。
とてもスマートなアドバイスありがとうございました。
>>721 (・∀・)人(・∀・)ノ べんきょうになりやした
726 :
705 :05/02/02 12:49:37 ID:???
ちなみに、それで
>>705 >>719 >>720 の問題クリア出来ました?
自分は、今試せないので、よくわからんのですが。
とりあえず、自分はこの問題に対しては
>>723 さんのアドバイスで行こうと思います。
727 :
708 :05/02/02 13:46:12 ID:???
リンク先は読んでいないけど。 「流し込まれるテキストのほうにも、floatを指定しておく。」 っていうのは、高さ云々の問題じゃなくて。 MSIEに置いてブロックにfloatを指定すると、後続がブロックごと回り込む(段組状態)の だけど、このときfloatしているブロックとの間に埋められない隙間ができる。 コレを回避する方法として、回り込む側のブロックにもfloatを指定すると、 この謎隙間はなくなる、って話だと思った。 メシ食おうっと。
<form>のmarginを指定して縦スペースを短くしたいのですが margin-top:3px;margin-bottom3pxをどうやって中にいれるのでしょうか。 クラスやidではなく直接formに入れる方法で。
リンク先は読んだけど 「流し込まれるテキストのほうにも、floatを指定しておく。」 っていうのは、floatを指定しないと流し込まれるテキストのボックスが長方形にならないとか言ってるけど、 ただ単に流し込まれるテキストのボックスのほうにmarginを指定すればいいだけの話じゃないか、って思った。 メシ食ったっと。
731 :
729 :05/02/02 14:35:51 ID:???
すまん、729 != 727 だ。
732 :
708 :05/02/02 14:57:50 ID:???
>>728 style属性で。
らんぷ亭のエビ天卵とじ丼まずかったっと。
>>732 >エビ天卵とじ丼
うぅ…字面はうまそうだぞ。
飯食いたいけど、仕事終わらん。
テーブルレイアウト強制されて、ストレスも溜まるし…。
>720の win ie6.0=問題なし ってのが気になる
>720のおっぱい
>>735 割と真面目そうな文章なのに、<div>おっぱい</div>だもんね。
ttp://www.brainjar.com/ のように、
ブラウザの中央にコンテンツをセンタリングしたいのですが、左に寄ってしまいます。
どこが違うのかご指摘下さい。
htmlソースは
<DIV id="contents">
<H1>--</H1>
<UL> <LI><A href="./">home</A></UL>
</DIV>
CSSは
BODY {
MARGIN: 0px;
PADDING: 0px;}
DIV#contents{
WIDTH: 720px;
HEIGHT:100%;
MARGIN: auto;
BACKGROUND-COLOR: #fff;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
TEXT-ALIGN: left;}
H1 {
WIDTH:710px;
HEIGHT:100px;
MARGIN: 0em;
PADDING: 0em;
TEXT-ALIGN: right;}
となっています。
<!DOCTYPE のモードは?
>739 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> です。
strict にしなされ。
>741 あ、できました!ありがとうございます^^ こんな所を間違っているとは…orz
>>738 先のことを考えて、DOCTYPEによる動作の違いを知っておくと良いですよ。
あと、全部小文字でってのもね。
>743 わざわざアドバイスまでありがとうございます! ちょっと勉強し直しが必要ですね。 全部小文字というのは、HTMLやCSSの記述をすべて小文字で行うということでしょうか?
<form>のmarginを指定して縦スペースを短くしたいのですが margin-top:3px;margin-bottom3pxをどうやって中にいれるのでしょうか。 クラスやidではなく直接formに入れる方法で。 これなのですが、style属性でやるということなのですが。 それがよくわからないのです、検索してもクラスのやり方で説明してるところは たくさんあるのですが、直接入れて説明しているところがなくて。 <form style="margin-top:3px;margin-bottom3px"> 細かくわからないんですが、こういう感じのやり方で 直接フォームの中にいれてformを使ったあとの、無意味な広い縦空間スペースを 減らせる方法がないでしょうか。
>>745 >formを使ったあとの、無意味な広い縦空間スペース
意味が解らん
>>747 同じく。俺も
>>745 の言ってることの意味がわからん。
つーか、styleわからんなら、もうここに来る以前の問題。
そんなことからいちいち教えてくれるやつはいません。終わり。
エステルクローゼティータ
<form></form>
アステカダイナソアぐるみん
意味がわからないようでごめんなさい。説明下手なので、実際にそのまま説明すると。
上みたいに書くとエステルクローゼティータとアステカダイナソアぐるみん
の間に18pxぐらいの空間が空いてしまうのです。
本物はもうちょっとformの中に書いてます。
これが空きすぎなので、marginで指定してやろうと思ったのです。
もしかしたら内側なのでpaddingかもしれません。
それで
>>5 の説明サイトを見たりしたのですが、
説明はどれもH1 { margin-top: 3em }みたいな書き方で。
750 :
708 :05/02/02 21:40:40 ID:???
自己紹介乙
おっと誤爆すまん
テーブルによってリンクの色を統一したいのですが、どうすればいいでしょうか?
>>753 各テーブルにidつけてidごとに色の指定してやる
>>753 どうせテーブルがんがん使ってそうだから class のほうがよさげだね。
756 :
753 :05/02/02 23:36:06 ID:???
>>754-755 レスありがとうございます。
>>5 のサイトを参考に、idを使ってみましたが、うまくいきませんでした。
原因は何処でしょうか?
以下ソースです。
<html>
<head>
<!--
複数ページに使用するため
実際は外部から読み込みます。
-->
<style type="text/css">
<!--
#filer{
a:link{color:#000000;text-decoration: none;}
a:visited{color: #000000;text-decoration:none;}
a:hover,a:active{color: #000000;text-decoration:underline;background: none;}
}
-->
</style>
</head>
続く
757 :
753 :05/02/02 23:37:18 ID:???
続き <body bgcolor="#ffffff"> <!-- 簡易テーブル製ファイラー 現在地のセルの背景は青にする --> <table border="1" align="center" id="filer"> <tr> <td colspan=8>/index.html <tr> <td width=80 bgcolor="#eeeeee">Content <td width=80 bgcolor="#4488ee"><font color="#ffffff">Index <td width=80><a href="chat.html">Chat <td width=80><a href="bbs.html">Bbs <td width=80 bgcolor="#eeeeee">Directory <td width=80><a href="new/index.html">New <td width=80><a href="program/index.html">Program <td width=80><a href="diary/index.html">Diary </table> <hr> 内容 <a href="#">リンク</a> </body> </html> おわり
ひどいよ</a>くらい閉じようよ
761 :
753 :05/02/02 23:52:33 ID:???
そこに突っ込まれるとは思っていませんでした。 ソフトウェア依存かもしれませんが<td>を入れると前のセルの設定が無効化されたので、省略してしまいました。 すみません。
>>757 要素をネスト(謎)して指定するときは、Cみたいなプログラム風に{}を重ねるんじゃなくて、
子孫セレクタ(←検索ワード)とかを使うのだよ。
がんがれ。
え、</a>って省略できるものなの?????? CSSは正しいhtmlを前提としています。 まず正しいhtmlを書こう。。。 がんばれ。
(´-`).。oO( >753はこの世にIEしかないと思っているんだろうなぁ・・・)
>>753 CSSとか正しいHTMLとかいう話以前に、質問の意図がみえない。
つまり、テーブルが1つしかないのにどこの色を変えたいのかわからん。
ひょっとしてセルのことかな?
766 :
753 :05/02/03 00:03:11 ID:???
>>764 いえいえ、MSは嫌いなのです。
NN系でも動作確認しましたが、ちゃんと動いてくれました。
自鯖で回線が細いのできるだけ省略してしまいました。
767 :
753 :05/02/03 00:06:15 ID:???
>>765 すみません
>>765 の文がおかしいですね。
ページ上部にテーブルを置いていて、その中のリンクだけ色を統一したいんです。
リンクそれぞれに<font color="#000000"><a href="hoge">hoge</a></font>としていると、効率が悪いので。
768 :
753 :05/02/03 00:07:28 ID:???
770 :
753 :05/02/03 00:09:35 ID:???
私、言い訳しました?
もういいよ。帰れ
772 :
753 :05/02/03 00:15:22 ID:???
決して悪いことはしていないと思うのですが、 結果的にスレを汚してしまいました。 すみませんでした。帰ります。
言い訳
766 :753:05/02/03 00:03:11 ID:???
>>764 いえいえ、MSは嫌いなのです。
NN系でも動作確認しましたが、ちゃんと動いてくれました。
自鯖で回線が細いのできるだけ省略してしまいました。
>>766 > 自鯖で回線が細いのできるだけ省略してしまいました。
省略って、省略して差し支えないところを削ることを指す言葉だと思いますよ。
aは開始タグも終了タグも必須だよ。
動機が何かにかかわらず、必須なものは削らないように。
(いじわる言い過ぎかな)
775 :
762 :05/02/03 00:19:09 ID:???
(´・ω・`)
777 :
753 :05/02/03 00:22:04 ID:???
帰るといったのにちょっとふに落ちないのでレスします。
>>773 私が
>>770 で言いたかったのは
>>769 に書いてある
「勉強不足の言い訳」はしていませんという意味ですが、言葉足らずでした。すみません。
>>774 >>766 で書きましたが動作確認したブラウザで不具合は見つからなかったので必須では無いと
判断しました。
私の勘違いですね。すみませんでした。
(´・ω・`).。oO(うれぴー)
779 :
753 :05/02/03 00:23:41 ID:???
>>762 すみません、子孫セレクタを検索している途中に
>>764 のレスが返ってきたのでそちらの返事を書いていました。
いま勉強中です。
「自分が見えればあとはどうでも良い」 立派だ。
781 :
753 :05/02/03 00:27:47 ID:???
>>780 いえいえ、そんな馬鹿ではありません。
しかし
>>756-757 を見るとそう見えてしまいます。
誤解を生む書き方をした私が悪いでした。
782 :
774 :05/02/03 00:29:35 ID:???
まぁまぁ落ち着いて。
お茶でも。。。
僕は別に帰らなくてもいいと思うヨ
>>753 なるほど。
「動作確認」をあまり信用してはならないという教訓ですな。
あと、経験上、あまりデータ量をけちらないほうがいいと思う。
こういう変なトラブルの原因になるからね。
特に最初は。
『富豪的』にいきません?
「あのー ちょっとよろしいでしょうか?」
784 :
774 :05/02/03 00:34:49 ID:???
今、子孫セレクタを勉強してんだろ。 こんど来たら優しくしような。
786 :
774 :05/02/03 00:42:03 ID:???
ウン。。。
<blockquote></blockquote> このタグの初期のpaddingの値って何かわかるでしょうか。 こういう初期値が載ってるサイトがあればなぁといつも思うのですが。 例えばtableのcellspacingの初期値は何だみたいなの。 ということでblokquoteの初期値わかるかたがいればお願いします。
788 :
753 :05/02/03 00:59:54 ID:???
>>782 ほんとその通りです。
子孫セレクタ、使えるようになりました。
>>762 さんありがとうございました。
住民の皆さん、迷惑かけてすみませんでした。
<html>
<head>
<style type="text/css">
<!--
#filer a:link,#filer a:visited{
color:#000000;
text-decoration: none;
}
#filer a:hover,#filer a:active{
color:#000000;
text-decoration:underline;
background: none;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
<a href="#">リンクテスト1</a>
<table border="1" id="filer">
<tr><td>
<a href="#">リンクテスト2</a>
</td></tr>
</table>
</body>
</html>
>>753 腹を立てずに頑張った貴方は偉い。よかったな。
790 :
Name_Not_Found :05/02/03 01:04:20 ID:lYjH/7X+
> 787 > <blockquote></blockquote> > このタグの初期のpadding paddingというより、UAの表示方法では??
791 :
774 :05/02/03 01:11:38 ID:???
ブロック要素のなかのブロック要素を中央配置したいときは 外側のブロック要素で、 text-align: center なんか?ちがってるんか?
793 :
Name_Not_Found :05/02/03 01:26:01 ID:lYjH/7X+
>792 それは違う。 中央中央と言うが、"なににたいしての中央なのか" もう一度、よく考えて出おなして来くるがいい。 イメージのみで語るな。
それって中のブロック要素に継承されない?
795 :
Name_Not_Found :05/02/03 02:10:40 ID:F85wEYSN
>>796 メチャメチャ助かりました、本当にありがとうございます。
かなり参考になりました、保存しておきます。
798 :
774 :05/02/03 03:38:31 ID:???
容量を抑えたいなら、タグを省略するよりも、 画像を控えめにする、といった方が100倍くらい 効果的かと思わないでもないということもないと思います
>>798 thx! こんな手法使うんだね。知らんかったよ。
新人イビリしてる奴ってよくこういう物言いしてるよな
>>793
>>798 結局IEのためにtext-align:center;を入れないと駄目ってことだな。
>>803 俺、わりと親切なアドバイスだと感じたけど。
事例ごとではなく考え方の根本について諭すのってさ、めんどいじゃん。
>>793 はニュアンスを否定し空気嫁ない屁理屈を言ってるだけだと思う。
いや、
>>793 のような対応をするのは正直しんどいよ。
新人に聞かれたことをホイホイそのまま答えるのって、
そいつのことなんかどうでもいいときじゃん。
>807 だね。
809 :
Name_Not_Found :05/02/03 23:31:58 ID:eIzcozJ5
以下の上下の入れ替えは可能なのでしょうか? <div style="height:auto"> <p>おっぱい</p> </div> <div style="height:auto"> <p>まんこ</p> </div> これを画面上ではまんこが上、おっぱいを下に持っていきたいんです。 ヨロシクお願いします。
>>804 凄く不毛なことだよね。
場合によっては無駄にdiv増やしたりしないといけないわけだし。
>809 下品な言葉は慎もうよ。
812 :
809 :05/02/04 00:32:59 ID:???
>>811 申し訳ない。
で、出来るかなあ。いろいろ考えてみたけど、
双方に流し込まれるテキストの拡大・縮小にもレイアウトが崩れないようにするには
どうしたらいいものやら。
814 :
809 :05/02/04 00:40:07 ID:???
815 :
813 :05/02/04 00:43:44 ID:???
寝る 誰か頼む
position:absolute;
818 :
809 :05/02/04 00:50:59 ID:???
…もしかして、出来ない? だって、どっちの要素もheightが変わるんだし。 ……………絶対指定じゃ、DEKINAINJA???
そもそもなんで入れ替えたいのか分からない
820 :
809 :05/02/04 00:53:57 ID:???
俺の言葉も足りなくてごめんなさい。 お※ぱいとま※こは重なりあうことなく上下逆にしたいのですよ。
821 :
809 :05/02/04 00:59:08 ID:???
>>819 SEO対策でページのキーワードを「お※ぱい」にしたい場合、
<body>直後におきたいからです。
そーゆーspamくさい方法使うのヤメレ よそからリンクされるような魅力的なページを作りなさい。 それが一番のSEO対策です
823 :
809 :05/02/04 01:09:48 ID:???
<body> <!-- テキスト部分 --> <div style="height:auto;"> <h1>千葉県について</h1> <h2>千葉県の県庁所在地</h2> <p>千葉県は……………</p> </div> <!-- 各ページ共通部分なんかメニューとかいろいろ --> <div style="height:auto;"> … … … </div> で、表示は逆って方が、検索エンジンのポイントが高いし、cssをブラウザで抜かれた場合も 親切じゃないかなと思って。
824 :
809 :05/02/04 01:13:46 ID:???
>>822 SEOだけを見れば、確かにスパム臭くはあるけど、
音声読み上げとかでもどのページを開いても共通部分をだらだら読まれたりするより
ユーザビリティの視点から優れてると思うんだ。
>>823 で書いたように、CSSをOFFにされた場合でもめちゃ文章がすっきり観られるし。
825 :
809 :05/02/04 01:28:15 ID:???
やっぱり無理か…。
>>823 みたいな例だったら、各ページ共通部分は
高さを固定に出来そうだから、
絶対位置指定でいけるんじゃない?
827 :
809 :05/02/04 01:49:45 ID:???
>>826 いろいろ考えたんだけどやっぱり共通部分のメニューとかもテキストで打ち込むのが親切だからさ。
そうするとheightが変わるじゃない。
確かに共通部分の高ささえ固定出来ればいけるんだけどね。
マークアップのみでサーチエンジンに通用するのは 使われていないワードだけだよ。 競合サイトがあるのなら、被リンク数を増やさない限り 何をやっても無駄。
829 :
809 :05/02/04 02:02:49 ID:???
>>828 まあまあSEOについてはスレ違いだからよしましょう。
もちろん自分もポピュラリティ・レピュテーションは存じてますよ。
ただ、正しいマークアップは、テキスト要素だけではなくテーマ要素の点数にも
関係するんじゃないのですか?
と、この話はこのあたりにして、
上下逆に出来るかですよ、このスレでの問題は。
float使ったらできるんじゃない?width:100%;とかにして。 あんまりお勧めしたくはないけど
質問なんですけど、 <ul> <li class="aaaa">--</li> <li class="bbbb"> <ul> <li class="aaaa">--</li> <li class="bbbb">--</li> </ul> </li> </ul> みたいにclass="bbbb"のなかにもう1つ同じclass="bbbb"を入れても W3C的には許されますか?
>>831 それ全然CSSの質問じゃないけど、OK
<ul> <li class="nullpo"> <ul> <li class="ga">--</li> <li class="ga">--</li> </ul> </li>
>809 上下逆にするのにこだわらないで 左と上でもいいんじゃないの 要は目で見た場合の順番が先になればいいんだから
835 :
809 :05/02/04 10:22:56 ID:OOuaen6U
>>834 ありがとうございます。
確かに上下逆にはこだわりはありません。
左と上ですか。
なかなかイメージできないのですが、具体的には?
>具体的には? 左と上です
837 :
809 :05/02/04 12:00:46 ID:???
>>836 >具体的には?
>左と上です
そりゃそうですね。そもそも具体的でした。失礼しました。
ソースかブロックの動かし方について軽く触れていただけれると助かります。
宜しくお願いします。
少しは自分で考える気はないのかね?
839 :
809 :05/02/04 12:26:38 ID:???
>>838 どうもすみません。
考えたいところなのですが、834氏ご指摘の「左と上」というのが何を指してのものなのか正直、わからなかったのもので。
言葉の意味がわからないと誤解を生み、CSSについて考える以前の話になるじゃないですか。
だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。
> だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。 うけた。 809の困ってる顔が目に浮かぶようだ。。。。 僕も「左と上」が正直わからん。 『ページ固有の要素を、左にスペースをあけて「上」から下へ流し込む。 共通部分を縦長にして「左」に流し込む。』 っていう意味で「左と上」なんでしょうか?
SEO? ( ゚д゚) あん? パン屑でどうにか汁
843 :
834 :05/02/04 13:46:27 ID:???
混乱させて申し訳ない 左と上じゃなく左と右です 自分も似たようなことやってて fixed使えば上と下でもできそうだが、IEが対応してないね
おおお、いろいろやってみたけどだめぽ、上下反転。 でも、SEO目的なら上にコンテンツが並んでたってよくね?目次だし。 あと、きちんとマークアップしていればページランクが低くても表示順位は挽回できる、 ってどこかのサイトで見たことがあるから、ガンガレ。
845 :
809 :05/02/04 14:30:45 ID:???
>>843 あ、ごめんなさい。大丈夫です。気にしないでください。
>>844 そろそろ妥協しようと思ってます。いろいろ考えてはみているのだが、上下反転は厳しい…。
結論として、「cssでは2つのブロック要素がともにheight:autoの場合、その上下反転は不可能」
ということでしょうね。
悔しいけど……。
デザインを始めから考えたほうが早くないか?
>>809 >だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。
これ、他で使って良いか?
エロイ方にお尋ねしまつ。 CSSファイルで文字コード宣言してれば、 htmlファイルと文字コード違ってても無問題ですか?
>>849 ぼくは間違いなくエロイと思うのですが、
答えないといけないのでしょうか。
がんばります。
えっと、僕は無問題だと信じて生きてきました。
eucjpのページとsjisのページ、同じCSSファイルを使ってます。
いまのところ問題はありません。
でも本当に無問題かどうかは分かりません。
でもでも、常識的に、それぞれ別に文字コード宣言もあるのだし、
文字コードが違ってもよいと思います。
もし文字コードが同じでなければならないなんてのなら、僕はテロで対抗します。通報しないで。
851 :
Name_Not_Found :05/02/04 22:09:37 ID:YPW8tlTd
WIN IE6.0でのバグだと思うのですが、 ページ全体をブログなどで良く見られる横3段組スタイルにテーブルで分けて、 その真ん中のペインに、TABLE { filter:Alpha(opacity=80); } で透過させた テーブルを設置しました。 で、右のペインにある任意のリンク(hover有り)にマウスカーソルを持っていくと 真ん中のテーブルの下1/4ぐらいが消えるのです。 真ん中のペインにある他のリンクに同様にカーソルを載せると復活します。 分かりにくい説明かもしれませんが、バグ回避の方法など有れば ご教授願えないでしょうか
852 :
831 :05/02/04 22:16:57 ID:???
> 832 ありがと。 > 全然CSSの質問じゃない よく考えたらそうだった。。。スマソ
で、結局809の上下反転は不可能なの? 俺、ちょっと興味あるけど、やり方思い浮かばん。 誰か解けないの、これ。
>>853 無理。絶対不可能。想定されてないでしょ。
857 :
Name_Not_Found :05/02/04 23:35:48 ID:wcdMop6h
behaviorを使ってやれないことはないかもしれないが それはJSの管轄だ。
うざいだけだからやめておけ
懐古主義者は死ね
読めねえ
なにが?
漢字が・・・
CSSの前に漢字の勉強
ウッシ
てst
870 :
Name_Not_Found :05/02/05 14:14:18 ID:cmjEfO5W
訪問時に不便なので揚げさせてもらいます。
色んなサイトのcssを見て回ってるんですが、検索しきれなかたったので質問。 cssファイルに下記のような記述がありました。 これはどういった意味なんでしょうか? * { margin: 0; padding: 0; }
全てのタグに対しマージンとパディングを0にするということです。 マージンは親要素からの距離、 パディングはその要素内の余白です。
パディングって要素からボーダーの距離じゃないのか
874 :
871 :05/02/05 16:15:17 ID:???
>>872 即レスどもです。
*マークの意味がわかりませんでした。
ありがd
875 :
Name_Not_Found :05/02/05 16:31:03 ID:LNU4OPoh
>>871 のように、*でパディングとマージンを0にしますよね。
そうすると、UL要素とOL要素のマージンも0になるのは当前ですよね。
ですが、マージンが0になると、リストのマークが見えなくなってしまいます。
どれだけマージンを入れたら良いでしょうか?
入れてやってみたのかね? やってみてから質問しような。
li { margin-left: 2.5em; } わたしはこれくらいが見やすくていいとおもう。
878 :
875 :05/02/05 16:59:42 ID:LNU4OPoh
>試してみます やってねーじゃん
880 :
Name_Not_Found :05/02/05 20:08:06 ID:9XaypqZ9
>>809 構造次第だが、positionでtop位置を1emとかにすれば上下逆転可能だ。
sage忘れた。 ついでにソース↓ <html> <head> <meta http-equiv="content-type" type="text/html; charset=EUC-JP"> <title>入れ替え配置テスト</title> <style type="text/css"> body { position: relative; } div.a { position: absolute; top: 1em; background: #ccc; } div.b { position: absolute; top: 0; background: #999 } </style> </head> <body> <div class="a">ここが下になる</div> <div class="b">こっちが上</div> </body> </html> 試してみ。
どうでもいいよ、んなもん
divのheightを1emと決め付けてabsoluteを使ってできたとはワラタ
文字サイズに応じて位置が調整されるのが重要なのであって 具体的なサイズまで知るか。 単に実現は可能で環境に応じて対応し得ると示しただけ。
質問です。 任意の要素にem単位でmarginを指定するとき、通常では1emの大きさを その要素のfont-sizeで指定されるフォントの大きさとして計算しますが、 これを、font-sizeの指定にかかわらず、常に1emの大きさをfont-size:100%での フォントの大きさとして計算する方法はないのでしょうか? たとえば、 <div style="font-size:150%; margin-left:3em">ぬるぽ</div> <div style="font-size:100%; margin-left:3em">がっ</div> の場合、「ぬるぽ」は「がっ」より左端が右にズレて表示されますが、 これが揃うようにしたいのです。
<div style="margin-left:3em"> <p style="font-size:150%">ぬるぽ</p> <p style="font-size:100%">がっ</p> </div>
<div style="font-size:150%; margin-left:2em">ぬるぽ</div>
>>884 最初から height が auto の場合、って言ってるじゃない。
高さ固定の場合なら簡単に出来ることくらいみんな分かってるよ。
質問を理解できるレベルじゃないなりにがんばったのだろうから あまりイジメず子供をあしらうように大げさに誉めてやれよ。
890 :
885 :05/02/05 21:05:54 ID:???
>>886-887 なるほど。
言われてみれば、そう難しく考えることでもなかったですね。
即レスありがとうございました。
>>889 おとなですね
わたくしは修行が足りないようです。
精進します。
892 :
Name_Not_Found :05/02/05 21:38:56 ID:mRVu0HBy
CSSがインラインによるものしか読み込みません。 なにぶん今日html、CSSを触ったもので稚拙なミスをしているかもしれませんが どうか御教授願います。 OS:Win98SE ブラウザ:IE6.0 [ソース] <html> <head> <style type="text/css"> <!--ao{font-family: sans-serif;font-size: 36pt;font-style: normal;color: #00FF99;}--> </style> <title>lesson</title> </head> <body> <ao>HelloWorld</ao> <ao2 style="font-size: 30; color: #33CCCC;"> <b>HelloWorld</b></ao2> <h1 style="font-size: 30; color: #33CCCC;"> <b>Hello World</b></h1> </body> </html> [表示レビュー] HelloWorld HelloWorld /*ここの文字はCSSを読み込まない*/ Hello World/*ここの文章だけCSSを読み込む*/
>>892 インライン要素とかブロック要素とか以前に
xmlではないので、aoとかao2など新しいタグを勝手に作ることはできません。
<html>
<head>
<style type="text/css">
<!--
.ao{font-family: sans-serif;font-size: 36pt;font-style: normal;color: #00FF99;}
-->
</style>
<title>lesson</title>
</head>
<body>
<div class="ao">HelloWorld</div>
<div style="font-size: 30; color: #33CCCC;">
<b>HelloWorld</b>
</div>
<h1 style="font-size: 30; color: #33CCCC;">
<b>Hello World</b></h1>
</body>
</html>
あ、body部分少し間違った。 あと、インライン要素の特定の部分にスタイルを適用したい場合はspanタグを、 複数のインライン要素・ブロック要素からなるブロックにスタイルを適用したい場合は divタグを使ってください。 <body> <span class="ao">HelloWorld</span> <span style="font-size: 30; color: #33CCCC;"> <b>HelloWorld</b> </span> <h1 style="font-size: 30; color: #33CCCC;"> <b>Hello World</b></h1> </body>
897 :
892 :05/02/05 23:29:58 ID:???
>>893 有り難う御座います。
参考文献等を曲解していました。
なるほど、特定のタブがあったのですね。
「h1」タブがうまく表示されたのは固有のタブだったのでしょうか。
兎に角もう一度リファレンスを読み返してみる事にします。
>>895 すみません、基礎さえなってなかったですね。
出直してきます。
タブ…
899 :
892 :05/02/05 23:36:46 ID:???
アンカーミスまで…。
>>898 でした。
抹殺されてきます。
タブで思い出したが、手を着かせて後ろからってのが好きだ。
902 :
892 :05/02/05 23:58:07 ID:???
私は下が好きですね。
手打ちにされたか・・・
905 :
Name_Not_Found :05/02/06 02:03:30 ID:Spa+Mrif
質問させてください。 HTML内に書くとちゃんと表示されるのですが、外部スタイルシートにすると表示 されないのです。 <style type="text/css"><!-- #zzzz{〜〜;} #zzzz a{〜〜;} #zzzz a:hover{〜〜;} --></style> <ul id="zzzz"> <li><a href="cccc.html"○○</a></li> <li><a href="bbbb.html"○○</a></li> </ul> こんな感じのものです。 外部スタイルシートから呼び出すためにはどうしたらいいのでしょうか。 よろしくお願いします。
まずお前がどのようにして呼び出しているのか提示しろ 話はソレからだ
907 :
Name_Not_Found :05/02/06 02:17:18 ID:Spa+Mrif
905です。 ロールオーバーのような感じで呼び出しています。 長いので省略してしまいすみません。 #zzzz{margin:0px;padding:0px;height: 30px;list-style-type: none;} #zzzz a{margin: 0px;padding: 0px;width: 140;height: 32;color: #666666; background-image: url(img/zzz.gif);background-repeat: no-repeat; text-align: left;text-decoration: none;display: block;} #zzzz a:hover{color: #FFFFF;background-image: url(img/zzz2.gif); background-repeat: no-repeat;} こんな具合です。
>>907 >外部スタイルシートにすると表示されないのです。
どうやって読み込んでいるのか書けと言ってるんだ。
中身のことを聞いてるわけじゃない。
909 :
Name_Not_Found :05/02/06 02:34:32 ID:Spa+Mrif
すみません。今は、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>タイトル</title> <style type="text/css"><!-- #zzzz{〜〜;} #zzzz a{〜〜;} #zzzz a:hover{〜〜;} --></style> </head> <body> 〜〜 <ul id="zzzz"> という感じで、<head>と</head>の中にCSSを入れています。
うきゃーもー勝手にしろ。どうせちょっとしたミスだろ
質問の意味を理解しているか? お前はCSSを外部から読み込めないんだろ? どうやって「外部から読み込ませよう」としているのかを とっとと晒せといってるんだ
もういい、カエレ
画像の相対パスの起点を間違えてるに200ノットインジョブ
もうほっとけ。 直に書いて表示されるならそうさせとけばいい。
915 :
Name_Not_Found :05/02/06 02:47:06 ID:Spa+Mrif
的はずれな答えですみませんでした・・。 外部には、「#zzzz」のままでは読み込めなかったので、「ul#zzzz」 にしたり、「ul.zzzz」にしたりしてみたのですがダメだったので、 何か書き方があるのかと思い聞いてみました。 お手数おかけいたしました・・
ここ数十レスで笑い死ぬかと思った…
<link rel="stylesheet" type="text/css" href="xxx.css" />
CSSで整形する場合ポジショニング と フロートどっちが良いのでしょうか?
>>918 具体的なケースを挙げれないならご自分で判断するしかありませんよ。
場合によるものだと思う。
頭の悪い発言スレにきたのかと思ったよ。
いやあ、最近の噛み合なさっぷりはコントですなぁ! ホント、ネタスレを読んでる気分。
922 :
Name_Not_Found :05/02/06 12:22:34 ID:WkugB8u2
perlで書いたCGIスクリプトの中にCSSを埋め込みたいのですが どうゆう具合に埋め込んだらよいか教えて下さい CGIスクリプトの中にhtmlタグを入力する場合 print "〜、 とかヒアァードキュメントで print <<"EOM"; EOM とすればできるのですが?スタイルシートの場合わかりません 宜しくおながいします
↑ツマンネー
924 :
初実 :05/02/06 13:28:57 ID:YMoE1KQO
FRAMESET記述してるとこでスタイルシートつかわないと枠ごとになっちゃう罠
どういう場合にポジショニングを使って どういう場合にフロートを使うべきなのでしょうか?
928 :
シャチホコ :05/02/06 17:23:23 ID:YyL/Ez91 BE:5440032-#
カスケードがどうにも読み込まれません。 既出だったらごめんなさい。
読み込んでる部分のソース書け
930 :
シャチホコ :05/02/06 17:27:36 ID:YyL/Ez91 BE:48956696-#
全てです。
読み込むHTMLファイルのソースを書け。
932 :
ソース :05/02/06 17:45:50 ID:UlYcFtyO
ソースは豚カツに書けると美味いんだぞ。 書け書けくん
>>931 932みたいのは気にしないで。
えらいえらい
現在テーブルレイアウトからCSSレイアウトに移行しようと思っています。 それで、下のようなレイアウトがしたいのです。 [---300px---][---残りの横幅---] というレイアウトがしたいのです。フレームは使いたくありません。 で、ポジションを使えばできるのですが、 ポジションを使えば、ちょっとした誤算などで重なりあったりしてうまくいけません。 フロートを使って上記な様なことができれば嬉しいのですが・・・・ フロートを使ってできるのでしょうか?
936 :
蒼月 :05/02/06 21:29:28 ID:cBmlLCf6
div2つ使ってcssでフロートleftとrightにするだけ ついでにleftのidにはwidth="300px"指定しとけ
938 :
?\?[?X :05/02/06 21:44:17 ID:UlYcFtyO
>>936 ど素人の発想だ。
まともな回答を書け。
939 :
935 :05/02/06 21:44:53 ID:???
>>936 フロートする場合は必ず横幅は指定しないといけないらしいです。
左に300pxのボーダーを引いたボックスを作り、そのボーダーの上にポジション指定で 300pxのボックスを作る。
941 :
935 :05/02/06 22:14:44 ID:???
ポジション指定は難しいです; 文書が少しでも多くなれば、ボックスの縦幅が大きくなり、崩れますし; 文字サイズを大きくするだけでも崩れますし どうすれば・・・・・・
お前の質問はFAQに載ってるサイトで勉強すればあっという間に解決するんだよ。 ただ単に左ブロックをフロートして右ブロックはフロート分のマージンとればいい話だろ。
きちんと説明してやれ(w
945 :
935 :05/02/06 22:30:25 ID:???
>>942 一応FAQに載っているサイトも全部見たのですが…
どのサイトに載っているのでしょうか?;
946 :
935 :05/02/06 22:32:04 ID:???
>>944 知ってるのですか…
謝らなくていいです。
こっちこそ、すみません;
947 :
?\?[?X :05/02/06 22:49:25 ID:UlYcFtyO
948 :
?\?[?X :05/02/06 22:54:58 ID:UlYcFtyO
949 :
942 :05/02/06 22:55:54 ID:???
>>935 サンプルを探せといってるんじゃない。CSSを勉強しろといってるんだ。
とりあえず左側に来るボックスにフロートを指定すればいい。(絶対配置でもいいが。)
やってみてできなかったらどうやったがどこができなかったのかを言え。
>>949 ワロタ
質問の主旨から外れていると思われ
951 :
?\?[?X :05/02/06 23:02:28 ID:UlYcFtyO
>>949 こら素人。それじゃ対応できないケースがある。
もっと勉強しろ。どういうケースに対応できない場合があるが
理解できたらここで報告しろ。
>>942 >>左ブロックをフロートして右ブロックはフロート分のマージンとればいい話だろ。
それムリだろw
左はflat:left 横幅300px で 右はマージンleft 300px ってことか??
953 :
935 :05/02/06 23:08:19 ID:???
絶対位置ではなくて、相対を使えってことでしょうか?
CSS3って既にあるのですか?
955 :
?\?[?X :05/02/06 23:15:06 ID:UlYcFtyO
>>953 初めに絶対配置からではなく、相対ボックスを作成して、その中に左ボックスを絶対配置するケースもあるよ。
957 :
935 :05/02/06 23:20:34 ID:???
しかし、ポジションを使うと文字サイズを大きくしたり 文章が長くなったり、すればすぐに重なっちゃうので できるだけフロートを使って [---300px---][---残りの横幅---} を表示させたいのですが、フロートではムリなのでしょうか?
<style type="text/css"> <!-- * {margin:0;padding:0;} .left {float:left;width:300px;} .right {margin-left:300px;} --> </style> <div class="left"> <h2>No.1</h2> <p>aruhareta hirusagari itibahe tuduku miti</p> <p>nibasyaga gotogoto kousiwo noseteyuku</p> <p>kawaii kousi urarete yukuyo</p> <p>kanasisouna hitomide miteiruyo</p> <p>dona dona dona dona kousiwo nosete</p> <p>dona dona dona dona nibasyaga yureru</p> </div> <div class="right"> <h2>No.2</h2> <p>aoisora soyobukaze tsubamega tobikau</p> <p>nibasyaga itibahe kousiwo noseteyuku</p> <p>mosimo tsubasaga attanaraba</p> <p>tanosii bokujouni kaereru monowo</p> <p>dona dona dona dona kousiwo nosete</p> <p>dona dona dona dona nibasyaga yureru</p> </div>
959 :
?\?[?X :05/02/06 23:29:53 ID:UlYcFtyO
>>957 左ボックスは固定サイズで、右ボックスは可変サイズにしたいのは理解している。
それだと、相対ボックスと絶対ボックスの組み合わせが最適だと思うけど。
これだと右ボックス内にボックスを作成しても自由にレイアウトが可能に
なるはず。
960 :
935 :05/02/06 23:39:40 ID:???
>>958 できました!
ありがとうございます。
NNでも確認できましたです。そういうことはどこのサイトに載っているのでしょうか?
>>959 ありがとうございます。自分はポジションのことは知らないに等しいので・・
今回はフロートでレイアウトしたかったのです。
もう 少し勉強してからその方法をやってみますです。
>>935 からここまでのレスを全てメモ帳に保存して、
じっくり勉強します。
皆さん ありがとうございます^^。
961 :
954 :05/02/06 23:41:19 ID:???
質問する場所間違えましたか?
962 :
?\?[?X :05/02/06 23:42:57 ID:UlYcFtyO
>>960 問題解決おめでとう。
レイアウトが複雑になるとポジション設定も必要になるかもしれません。
時間を見つけてポジション設定にチャレンジしてください。
963 :
958 :05/02/06 23:52:59 ID:???
>960 >942を試しただけ CSSの基本的な部分は関連サイト見て覚えてからは ひたすら試行錯誤 >952の言う無理だという理由、環境を知りたい
964 :
Name_Not_Found :05/02/07 01:40:30 ID:ix8vIXIZ
割り込んでスマン
>>958 を中央に寄せるにはどうすればいいでつか?
FAQ見たけどさっぱりわからん。。
初歩的な質問でしょうが・・・ h1,h2,h3ってなんですか?
>>965 CSSの前にHTMLを勉強してください。
見出し1,2,3だったような気がする >964 どれを中央に
body{ margin: 0px auto; }
>>969 頼む! もう少し基本的なことを学習してから質問してくれぇー。
さあ埋めるよ
よっしゃー!
ふんがー
ほぇほぇ
976 :
?\?[?X :05/02/07 03:19:17 ID:vPh6eG/Y
なるほどね。 「書け。」 と書いていた人間の気持ちが理解できる。 俺は不覚にも、殺意を覚えてしまった。 h1 は人が1人 h2 は人が2人 h3 は人が3人 と書いて気を休めよう。
あははは
うふふふ
逝ってヨシ
980 :
?\?[?X :05/02/07 03:34:20 ID:vPh6eG/Y
論理タグとCSSだけで作れる時代が訪れようとしているにも 関わらず、見出しだったような<<気がする>>とは何事ぞ ページに書き込む際に、誰しもが最初に書くやつが<h1>じゃー ないのか?ちがうのか?ちがうのか? そもそも、ここはCSSだろ。ちがうか?
一手ヨシさん(80歳)
ちがうちがうちがう
あなたも私もポッキー
984 :
954 :05/02/07 04:04:15 ID:???
ここまでスルーされると、自分の発言が見えているのか不安。。 もし見えているなら、見えていると、、、 これだけでも良いので答えてください(´;ω;`)ウゥ
>>954 なぜかな…。ま、とりあえず正式勧告はされてるのは無いよ。
あ!
もう55分か! 遅刻すんべ
まじ 遅刻しそうだし ちょっこら行って来るわ
頑張って 逝って来い 若造よ・・・・・
>>958 このやり方は右のボックスにfloatを使う(正確にはclearを入れると)と崩れるのが嫌。
あっそ
1000!!
負けるもんか!1000!!
そろそろ1000?
もうちょい!
次スレは?
1000きたかっ!?
1000!!
∧ < >_∧ = ()二)V`Д´)<ぬるぽ \ヽ ノ ) ノ(○´ノ ガッ (_ノ(__)
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。