/* CSS・スタイルシート質問スレッド【18】 */
1 :
気の早い1 :
03/04/12 03:35 ID:???
ちんぽ
胸毛おじさん
女の子はアホな方がカワイイと思う 結局まだまだレイアウトを自在に表現できないCSSじゃあ validじゃなくてもしかたないよね。 ちょっと凝ったことやろうとするとやっぱり既存の方法に頼るしかない って寂しいね。
>>11 ※ 議論はよそで ※
ここは質問スレッドです。
13 :
Name_Not_Found :03/04/12 05:19 ID:pU13ygGl
>>7 のQ7なんですが、
2つの画像を右下と左上にそれぞれ位置指定する事は可能ですか?
要素を重ねるってのが理解できないんですが。
>>13 <div class="hage">
<div class="sage">
</div>
</div>
hageに右下、sageに左上を指定
背景画像だったら不可能。 要素を重ねるってのは <div><p>hoge</p></div> みたいな感じ。
16 :
13 :03/04/12 05:46 ID:pU13ygGl
>14 やってみます。
17 :
Name_Not_Found :03/04/12 05:55 ID:q6lVsLru
18 :
13 :03/04/12 06:06 ID:pU13ygGl
>14-15 ありがとうございました。 ∧_∧ / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ( ´・ωメ) < ふ・・不可能・・ショボーン (つ旦と) \__________ と_)_)
sageろ
え?むりなの?
ん?できるの?
は?どっちなの?
23 :
Name_Not_Found :03/04/12 11:32 ID:Grrv8eF+
前スレの911ですが、まだ問題を解決できていません。 ページに背景色つきの上枠を作りたいのですが、 常套手段ではIE5.0で致命的な表示不良が起こり、 これを回避する方法を考えています。 htmlのソースはこうです。 <div id="uewaku"> <div id="hidariue"> <a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a> </div> <div id="migiue"> <div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div> </div> </div> スタイルシートはこれで問題はありません(ie5.5-6/ns7/op7)。 #uewaku { width: 100%; height: 40px; background-color: #333000; color: #b7a800; } #hidariue { float: left; width: 40%; } #migiue { float: right; text-align: right; width: 40%; } 質問はつづく。
24 :
Name_Not_Found :03/04/12 11:35 ID:Grrv8eF+
しかしこれだとie5で見るに絶えない空恐ろしい状態になります。原因は #uewakuのwidthとheightで、これさえのければよいのですが、 そうするとn7/op7などでは#uewakuが0行と認知されて背景色がつきません。 そこでwidthとheightを指定せず、#uewakuの閉じタグ</div>の前に <br style="clear:both">と入れると無事、ie5/n7/op7で同じ 表示が得られるのですが、今度はie6がheightを40pxプラス<br>と 認知して表示します。 そこでやっぱり<br style="clear:both">はやめにして、 スタイルシートを変更、 #uewaku { background-color: #333000; color: #b7a800; } #hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; } #migiue { float: right; text-align: right; width: 50%; height: 41px; background-color: #333000; color: #b7a800; } として、要するに#uewaku不要にしてみたのですが、これだど n7/op7でなぜか#migiueと#hidariueの間に隙間が生じます。 margin,padding,borderを加えて全部0にしてもだめです。 width,heightを使わず、同じ表示を得るよい手はないでしょうか。
>>24 あのさ、そのバグの解決法は俺のスキルじゃちょっとわからないんだけど、
IE5.0わかってるだけでも相当なバグがあるから、IE5.0でもきっちり同じ見栄えを、
と思うならJavascriptで振り分けたほうがいいと思う。
27 :
26 :03/04/12 12:10 ID:???
ごめん、A4でなくてA5だな。 要するに、<br style="clear:both">を入れて、且つ#uewakuにwidthを指定すること。
28 :
24 :03/04/12 12:26 ID:Grrv8eF+
皆さん、ありがとう。レスがついて幸せです。ようやく解決しました。
多少のバクなら目をつぶったのですが、かなりシェアのあるIE5で
heightが1000pxにされるような恐ろしいバグはさすがに見逃せません。
>>27 さん、widthとheightは使わずに、という条件なので
貫徹してまで悩みぬいたのです(泣)
解決はこう。
<br style="clear:both">の変わりに、
<div> </div>に書き換え。
スタイルシートは、
div { clear: both; line-height: 0px; }
brでクリアするとIE6でheightの幅が大きくなります。そこで
空白文字を入れて、それをline-height:0pxで消したわけです。
あまりに悲しい解決法だったので、divのクラス名は「悲しい」にしました。
いままで安易に<br style="clear:both">していた方、
悲しいけど、こちらのほうが安全です。。。
>>28 <hr style="clear:left;margin:0;height:0;"> の方がいいのでは。
但し互換(Quirks)モードだと、Mozillaに限り効かないけどね。
で、いままでのこと「バグ辞典スレッド」に登録しておいてくれない?
あまりにアレな解決法なんで口出ししてみる 同じ結果を得るのに必要なプロパティだけに絞ってみた これでぶっ壊れるようなバグはIE5にはなかったと思うんだが・・・ #uewaku { height:41px; background-color: #333000; color: #b7a800; } #hidariue { float: left; width: 40%; } /*widthは画像に合わせてもいい*/ #migiue { text-align: right; }
31 :
26 :03/04/12 12:39 ID:???
>>30 の指摘する通り、#migiueのfloat:rightは不要だな。これでいいはずだが。
#uewaku { width: 100%; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { margin-left: 51%; text-align: right; height: 41px; background-color: #333000; color: #b7a800; }
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<br style="clear:both">
</div>
32 :
24 :03/04/12 14:15 ID:Grrv8eF+
>>29 <hr style="clear:left;margin:0;height:0;">が通用するのは
オペラ7だけのようです。
>>30 さん、
>>31 さん、#uewakuにはwidthとheightのどちらか片方だけ
でもIE5.0でむごい障害が発生します。となると、clearするしか
方法はなさそうです。
ちなみに#migiwakuは簡略化しています。そこにはフォーム部品などが
ごてごて入っているのでfloatにしました。怪しんで消してみましたが、
floatは無関係でした。
<br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
heightの下にプラスbrの1em分の余白が生じます。
>>31 −32
widthが使えないなら、#migiwakuにfloat:rightは必須。
で、ブロック要素内では左揃いだからtext-align:rightも必須。
>>23-24 #hidariueの中に高さ40pxのimg要素があるなら、height指定なんか要らないのでは?
#uewaku { background-color: #333000; color: #b7a800; }
#migiue { float:right; width:50%; text-align: right;}
#hidariue {height: 41px;}
<div id="uewaku">
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
</div>
37 :
24 :03/04/12 14:53 ID:???
>>35 いいえ。
heightの下にプラスbrの1em分の余白、というのは、
画像の縦幅プラスbr1行分の余白のことです。
でも、ここでの大前提はwidthとheightを指定しないという
一種の異常事態でのことですから。
DHMLバク辞典のほうに移ってソースをアップします。
>>37 >>36 の通りにしてもうまくゆかない?
ポイントは右左の記述順序を逆にしてfloat:right;にすることと、
#hidariueにはfloatを指定しないこと。
39 :
24 :03/04/12 15:24 ID:???
>>36 おっしゃるとおりにhtmlソースの#migiueと#hidariueを入れ替えて、
cssも36さんが書いた通りに書き換えましたが、だめでした。
#uewakuにwidthもheightもないのに、もう訳がわかりません。
もちろんIE5意外ではきちんと表示されます。
いきなり質問なんですけど 「"red" style="background-image:url(JAVASCRIPT:」 ↑この状態でJSを自動的に(強制的に)切らす方法はどうやってやればいいんですか?
↑の"red"は必要ないです^^;ごめんなさい。
>>39 今ソース見てきたけどこれだけレイアウト目的のdiv入れていいなら
positionでやったほうがいいんじゃないの?
>>42 だれがレイアウト目的のDIVだめっていったの?何のためのスタイルシートなんだよ。
>>44 誰もレイアウト目的のdivが駄目とは言ってないだろうが。馬鹿か?
strictなHTMLにこだわらないなら、バグの出るfloatよりも
positionとか他の方法を試したほうがいいんじゃねーの?
と言ってるだけだが。
>>24 ネスケ4対策してるようには思えないけどfloatにこだわる理由は?
<hr size="n">ではなく、 CSSでhrに太さを定義することってできるんですか?
>>47 自分で試せばすぐわかることを訊くなって。できるよ。
自己解決。heightでできるね。
>>48 スマソ
>>39 君のIEだけが狂ってるんだったりして。
だって「ウインドウズごとアボーン」したりしたんでしょ?
誰か他のIE5の人の追試が欲しいところだな。
51 :
24 :03/04/12 20:12 ID:???
>>44 >>45 positionは一番に試しました。IE5.0ではもうぐちゃぐちゃで、
目を覆いました。わたしがヘボいからですが。。。
positionはrelativeでもtop/bottom/left/rightの指定が神経質で、
どのブラウザでも崩さないようにするのは熟練の技が必要でしょう。
もちろん、文章のフローを無視してレイアウト順にhtmlを再構成するのなら
floatでもpositionでもらくらくレイアウトできます。雛型自体はごく簡単ですから。
>>46 ネスケ4は対策しています。ネスケ4とその他一般で分けています。
アップしたソースは問題を分かりやすくするために、超簡単に省きました。
あれをIE5.0/WINで見ると、ぞっとするようなことになります。
結論としては、
<div style="clear:both; font-size: 1px; line-height: 1%;"> </div>
で、IE5.0/5.5/6.0 NS7 OP7 のすべてで完全に同じ見栄えになることが分かりました。
ちなみにインライン要素に指定してもダメでした。また、値に0を入れると、
ブラウザによっては無視するものもあり、やはりよくないようです。
<br style="clear: both;">でうまく行かなかった場合は、
これを試してみると、たいていはオッケーだろうと思います。見苦しいですが。
.paragraph { line-height: 140%; font-weight: normal; text-decoration: none; line-break: strict; padding-right: 20px; padding-left: 20px; font-family: 11pt "MS Pゴシック", "Osaka"; color: #333333; } p.paragraph:first-letter { font: bold 2em "MS Pゴシック", "Osaka"; color: #FF0000; float: left; margin: 0px; padding: 0px; } 上ですが、 <p class="paragraph">次回の計画に向けて.... </p> と適用したところ,二文字目以降の文にスタイルが適用されていません。 つまり色サイズ等の指定が無視されています。 対処法を教えていただけませんか。
>>53 font-family: 11pt "MS Pゴシック", "Osaka";
これおかしいよ。
質問させてください。
台本のマークアップは<dt><dd>タグでと聞き、試してみたのですが、
実際の台本のように表示させようと思うと、なかなか上手く行きません。
<dt>長い長い長い長い名前</dt><dd>セリフは短め</dd>
<dt>名前</dt><dd>セリフが2行以上<br>セリフが2行以上</dd>
↑この例を
長い長い 「セリフは短め」
長い長い
名前
名前 「セリフが2行以上(略)
セリフが2行以上」
という風に表示させようとすると、
長い長い「セリフは短め」
長い長い
名前 「セリフが2行以上(略)
名前 セリフが2行以上」
のように表示が崩れてしまいます。現在のCSSソースは以下の通りです。
dt { width : 4em ; float : left ; clear : left ; }
dd { margin-bottom : 1em ; }
段組みの指定が参考になるかと思い、
>>6 に載っていたサイトも
見てソースを試してみたりしたのですが、どうにも上手く行きません。
よろしくお願いします。
>>57 dt { display : run-in; margin-right : 1em; }
これだけでOK。
ただし、display : run-inに対応してるブラウザは、現時点では少ない。
(Operaだけ?)
>>57 tableを使った方が楽じゃない?
登場人物と台詞からなる表だと考えれば、マークアップとしてもおかしくはないし。
th {
text-align : right;
vertical-align : top;
padding-right : 1em; /* 人物と台詞の間の余白(A) */
width : 4em; /* もっとも長い人物の名前+(B) */
}
thead {
display : none; /* 縦列の見出しは自明なので表示せず */
}
td p {
margin : 0; /* 人物名と台詞がずれないようにpのマージンを消す */
}
<table summary="第一場第一幕の台本。登場人物、台詞の順に記載。">
<caption>第一場第一幕 復活! レッツゴー三匹</caption>
<thead>
<tr><th scope="col" abbr="人物">登場人物</th><th scope="col" abbr="台詞">台詞</th></tr>
</thead>
<tbody>
<tr><th scope="row" abbr="じゅん">じゅん</th><td><p>じゅんでーす。</p></td></tr>
<tr><th scope="row" abbr="長">長作</th><td><p>ちょうさくでーす。</p></td></tr>
<tr><th scope="row" abbr="正">正児</th><td><p>三波春夫でございます。</p></td></tr>
</tbody>
</table>
61 :
60 :03/04/13 05:05 ID:???
>>60 失礼。「もっとも長い人物の名前+(B)」の(B)は、(A)の間違い。
「レッツゴー三匹」ではなく「レツゴー三匹」が正しいとは思うが、 脊髄反射で「TABLEレイアウトは糞」という輩が登場することを期待してsage。
>62 一行目はげしく同意 >57 tableでいいんでない? 線形だし。
最近cssを使い始めたのですが、行き詰まってしまいましたので 質問させていただきます。 (cssファイル) a:link,a:visited{〜} a:hover,a:active{〜} (htmlファイル) 〜 <LINK REL="stylesheet" href="○○.css"> 〜 とりあえず教科書通りのこの形でハイパーリンクにカーソルを持っていった 状態に変化をつけることは出来たのですが、これを 「ページの上半分だけにスタイルを適用する」状態にしたいのです。 classやIDで指定する方法も考えたのですが、記載方法が独特なので どうしたら良いのか皆目見当がつきません。 どなたかアドバイスお願いします。
>>64 a:link { 〜 } /* 普通の*/
a:visited { 〜 }
a:active { 〜 }
a:hover { 〜 }
a.ue:link { 〜 } /* 上半分用*/
a.ue:visited { 〜 }
a.ue:active { 〜 }
a.ue:hover { 〜 }
>>65 あ、なるほど……
ありがとうございました。これから試してみます。
こういう手もある a:link { 〜 } /* 普通の*/ a:visited { 〜 } a:active { 〜 } a:hover { 〜 } ue { 〜 } /* 上半分用*/ .ue a:link { 〜 } .ue a:visited { 〜 } .ue a:active { 〜 } .ue a:hover { 〜 } HTML 上半分をspanなどでくくる <span class="ue"> <a href ・・・ <a href ・・・ <a href ・・・ </span>
>>67 .ue { 〜 } /* 上半分用*/ の間違い
>>57 dd のブロックボックスは float ボックスである dt を無視して
レンダリングされるから、そうなるのが正しいはず
dt の行数が dd より多くならないようにするしかないんじゃ
>>67 そこで span が出てきますか
みなさんありがとうございました。 おかげで問題は一通り解決しました。
71 :
Name_Not_Found :03/04/13 07:50 ID:vw4pwcRq
お尋ねします。 body要素に {border:solid #F0A8A8 15px} と指定したところIE6.0ではページ全体に枠が表示されるのですが、 Opera7.03では下に空白が表示されます。 どうにかしてOperaでも空白が表示されないようにできないでしょうか?
>>71 html { border: 〜; } とすれ
76 :
71 :03/04/13 08:11 ID:???
>>73 回答ありがとうございます
IEのバグだったんですが。
どうおりで片方だけ表示が違うわけですね。
>>74 教えていただきありがとうございます!
Operaでも正しく表示されるようになりました。
本当にありがとうございました。
>>62 知らなかった……今までずっと間違えてました。
ご教示、ありがとうございました!
と、質問者の感謝レスのふりをしてみる。
>>78 >>75 のリンク先をよく見て。
>Cのフロートはclearプロパティにより回り込みが抑制されています。
すみません教えてください。 テキストの「デザインだけ」を アンカータグで囲った場合と同じにするには、どう書けばよいのでしょうか?
>>80 <body>
<a href="">
〜〜〜
</a>
</body>
>>80 多分、こういう事だと思うけど
span.design:hover{
color:#ff0000;
text-decoration:underline;
}
<span class="design">ココのデザイン</span>
a { display: block; } のことですか?
下線を引きたいの?
87 :
57 :03/04/13 15:09 ID:???
お答えくださった皆様、ありがとうございます。 テーブルを使っても良かったんですね。 台本は表じゃないよなぁと一人で悩んでおりました。 72さんの dt { width:4em ; float:left ; clear:left ; } dd { margin-left : 4.5em ; } の方法を試してみましたが、名前の方が行数が多くなってしまう場合に やはり前述のような表示の崩れがみられました(ネスケ7.0でテスト) ただ、75さんのリンク先を見るとバグのようですので、 名前の行数の方が多くならない方向で調整するか テーブルにマークアップし直すということでやってみます。 ありがとうございました。
>>86 一部を除いてa要素のようなインライン要素にwidthは適用できませんよ。
styleにdisplay: blockと追加すればwidthが適用されますよ。
89 :
86 :03/04/13 16:29 ID:???
何でも文字が大きければいいような こと言うやつっているけど、反対にあんまり文字が大きいと読みにくかったりする 場合もあるし、一概に文字サイズだけで言えないよな。だいたい、IEの中で字が 読めない奴はユーザースタイルシートでも使えばいいんだよ。 ここのスレの奴はvalidであればデザインなんかどうでもいいと思ってるような 奴らばっかりだから理想論しかでてこないんだよ。 あんまりここのスレのこと鵜呑みにするとダサイサイトしか出来ないよ。
91 :
86 :03/04/13 17:17 ID:???
>>92 §ノヽ§
( ・e・ ) うるせーばか
( )
∪∪
>>93 §ノヽ§
( ・e・ ) うるせーばか
( )
∪∪
>>87 69が正しい。
そのバグは、float対floatについてのバグだから。
誘導のためage
>>96 §ノヽ§
( ・e・ ) うるせーばか
( ) ∪∪
>>57 ・
>>95 つまり、これでもいいわけだろ? IE6・NN7で確認。
<dl>
<dt style="float:left; width:4em; clear:left;background:aqua;">長い長い長い長い長い長い名前</dt>
<dd style="/*float:left;*/ margin-left:4.5em; background:lime;">短いセリフ</dd>
<dt style="clear:left;float:left; width:4em; background:fuchsia;">短い名前</dt>
<dd style="float:left;min-width:1em; margin-left:0.5em; background:red;">セリフが2行セリフが2行セリフが……</dd>
</dl>
……と思ったら、Opera 7だけうまくゆかないや。
>>57 dt { width : 4em;float:left;clear:both;}
dd {padding-bottom:2em;padding-left:2em;}/*IE相当強引*/
一応三大ブラウザぐらいなら大幅に同じだけど強引だね。。
そもそもその名前と台詞の関係配列強引じゃない?下の名前二ついるのかな?
一言に対しては一つの台詞でいいんじゃないの?
連続台詞なら二つに別けて書くのが普通と思われ。
だとしたら ddのbrを取って幅を指定する方(ddにwidth加える)が自然と言える
◆LUr2ERYJL6 をNGワードに指定、と……
103 :
57 :03/04/14 01:35 ID:???
すみません、皆さんの意見をずっと読んで来たら混乱してきてしまいました。
とりあえずバグ辞典のスレも参考に、自分が試してみたソースです。
dl { width : 40em ;} /* 任意の幅 */
dt { width : 4em ; float : left ; clear : left ; margin : 0 ; } /* 名前の幅指定 */
dd { width : 34em ; float:left ; margin : 0 ; } /* 大枠の幅ー名前の幅未満を指定 */
これでネスケおよびSafariでは正しく表示されるようになりましたが、
Mac版IE5.2では以下のような表示になってしまいました。
長い長い「セリフは短め」
長い長い
名前
名前
「セリフが2行以上(略)
セリフが2行以上」
>>98 さんの例もコピペして試してみましたが、どのブラウザでも表示が崩れました。
>>103 Note that in some browsers, the float property is not implemented or not properly,
which means that the layout won't be in columns in the rendering they'll make of the home page.
For sake of simplicity, we'll still refer to the different parts of the layout as left, middle and right columns,
even if it's not universally true.
105 :
Name_Not_Found :03/04/14 01:41 ID:XNLxB9zu
106 :
57 :03/04/14 01:45 ID:???
103のソースで正しいのか正しくないのか、
>>75 のバグがWindows版IEでも発生して表示が崩れるものなのか、
103のMac版IEでの表示の崩れはMac版IE独自のものなのか、
Windows版IEで確認できないので心配です。如何でしょうか。
素直にテーブルにした方が良いとは思うのですが、
情報の整理だけはしておきたくて。よろしくお願いします。
>>99 すみません、言わんとしていることがよくわからないのですが…。
>>103 発言した人、発言の内容、でてーぶるでも問題ないと思うんだけどな。
108 :
Name_Not_Found :03/04/14 01:53 ID:FmsBR48v
上の文章例 長い長い 「セリフは短め」 長い長い 名前 名前 「セリフが2行以上(略) セリフが2行以上」 は dt {width : 4em;float:left;clear:both;} dd {padding-bottom:2em;padding-left:2em;width : 10em } で正常に表示される。三大ブラウザ問題なし。 強制改行のBRを入れているが文章的には不必要だと判断した。 ただし、DDのpaddingに関してはある程度バランスが必要と言う面で 相当強引なことは確か。とりあえず弄ってみればわかると思うけど。
余計なの付いてる・・・padding-left:2emは特に要らない。 padding-bottomの値が一番のポイントになるのかな。
>セルン ◆LUr2ERYJL6 お前な、解答するならレスまとめろよ。固定がスレ占拠してんじゃねーよ 「ふ」みたいな香具師だな。いや、お前「ふ」だろ?
>>106 dt の高さ > dd の高さ
dt の高さ < dd の高さ
これが混在する場合、floatを使ってうまくやる方法は(現時点では)ない
まず、dd を通常フローで流し込むと dt と dd の上辺が揃わなくなる(揃ったらバグ)
dd を float にすればいいのだけどIE等が馬鹿なので使えない
名前が折り返されないように、一番長いのに合わせてwidthを指定すれば
前者の方法が使えるんだけど、そうもいかないのかな
でなきゃ省略形で書くとか
<dt><abbr title="長い長い長い長い名前">長い人</abbr></dt>
これ以上は何ともいえないので後はそちらの判断で
私はWin使いなのですが、図書館のMacのMacIE5.16で自分のサイトを見てみたら、 以下の記述でのサイト内リンクが、「最後の一つだけしかアンカーが見えない」 状態になっていました(サイト内全ページ)。 HTML4.01Strictでも、XHTML1.1でも同様でした。DOCTYPEは両方とも 公開識別子 + システム識別子を記述しています。 ─────────────────────────── ul.navigate{ border-style : solid none solid none; border-width : thin; margin : 2em 0em 0em 0em; padding : 0.5em 0em 0.5em 0em; text-align : center; border-color : #000099; background-color : #e6e6fa; color : #000000; } ul.navigate li {margin : 0em 0em 0em 0em;display : inline;background-color : #e6e6fa;color : #000000;} ul.navigate li:before {content : "[ ";} ul.navigate li:after {content : " ]";} a:link {color : #0000ff;} a:visited {color : #004080;} <ul class="navigate"> <li><a href="../hoge/index.html">hogeコーナーへ</a></li> <li><a href="../sitemap.html">サイトマップ</a></li> <li><a href="../index.html">トップに戻る</a></li> </ul>
>115の続き この例ですと、「トップに戻る」だけが表示されて、前の2つは 透明アンカーになっていました。一応マウスを持っていけば ステータスバーにリンク先URIが表示されてリンクとして利くこと は利くのですが非常に分かりづらくなっているので対処したいです。 テンプレートのバグ辞典の方とバグ辞典スレッドの方も調べて みたのですが、該当するものが見つかりませんでした。 Googleで、「mac IE css display inline」「mac IE css before」 で調べている最中なのですが、見つからないですしMac使いの方が おられましたら、フォローしていただけると助かります。 私はMacを持っていないですし、図書館は17時に閉まるので平日は 利用出来ないのです。 before, afterはWinIE6でも非対応なのですが、ただcontentの内容が 付加されないだけど、アンカー文字列自体に影響を与えることは なかったのですが、そこが原因なのでしょうか。 それとも別のことなのでしょうか。
>>115 原因はtext-align : center;とul.navigate liのbackground-color : #e6e6fa;。
ul.navigate liのbackground-color : #e6e6fa;を外せば解決。
>>115-116 1. ul.navigate の text-align : center; を取る
2. ul.navigate li の background-color : #e6e6fa; を取る
のどちらかで、表示されるようになりました。
原因は不明ですが。
>>117 >>118 ありがとうございます。
前記したように、こちらはMacで確認するのが困難な状況
ですので、たいへん助かりました。
修正後、この土日に確認し報告させていただこうと思います。
重ね重ねありがとうございました。
>>121 現在の時点でこちらが分かっていることについて報告させていただきました。
よろしくお願いします。
<i style="font-style: italic;">斜め</i>
スタイルシートで透過して背景を見えるように半透明にしたいのですが、これはwin2000とwinxpでしか見れないのでしょうか? win9Xは透過に対応していなくて使えないフリーソフトがあったりしたのでどうなのかな?と思ったのですが、当方9Xの環境がなく試せません。 教えたください。
>>124 >スタイルシートで透過して背景を見えるように半透明にしたい
できるとしたら、それは正式のCSSではなくWinIEの独自拡張です。
ですからOSは関係ありません、IEのヴァージョンが問題になります。
NetscapeやOperaで閲覽すると半透明にはなりませんよ。
>>125 レス有難うございます
OS云々かと思っていましたが違うのですね、(´∀` )サンキュスコ!!!
透過pngのことならスタイルシートと關係ないぞよ。
128 :
57 :03/04/14 23:25 ID:???
>>112 詳しい説明をありがとうございました。自分にも理解できました。
とりあえず現時点では素直にテーブルで行こうと思います。
長々とご迷惑をおかけしました。
CSSと関係有り 背景色透過(background:transparent;)→OS・ブラウザに関係なく適用 背景半透明(filter:alpha();)→IEの独自拡張 CSSと関係無し PNGの透過(αチャンネル)→ブラウザ・環境によってできない
132 :
Name_Not_Found :03/04/15 04:36 ID:q3xu5Rs9
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
>>132 小学生レベルの質問だな。
まずどこがどのようにわからないのか教えてくれ。
そして何を中央に配置したいのか書け。
134 :
Name_Not_Found :03/04/15 05:24 ID:q3xu5Rs9
いいから早く教えろよ。
あぼーん
>>134 朝っぱらから釣りか。
何をどう配置したいのか書いてないのに答えられるはずがないだろう。
引き篭もりはコミュニケーション能力に欠けるっていうのは本当だな(藁
137 :
Name_Not_Found :03/04/15 06:17 ID:q3xu5Rs9
わかったから早く教えろよ
139 :
Name_Not_Found :03/04/15 06:44 ID:q3xu5Rs9
て言うか早く教えろよ
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
141 :
Name_Not_Found :03/04/15 06:58 ID:q3xu5Rs9
何でもいいから早く教えろよ。
質問です。 ページの先頭にサイトのロゴを入れたいので、見出しの 背景画像として指定してやることにしました。 また、見出しと本文の間に仕切りの線があると見やすい と思い、下部だけに罫線を指定しました。 h1 { background : transparent url(logo.png) no-repeat left; height : 120px; /* 背景画像(logo.png)の高さ */ text-align : right; border-bottom : thin solid black; } ところがこれだと、見出しの文字列と、下部の罫線の間に 隙間が空いてしまいます。 できれば、見出しの文字列と罫線の間に隙間が空かない ようにしたいのです。 つまり、 ■■■□□□□見出し ■■■□□□□□□□ ■■■□□□□□□□ −−−−−−−−−− これを、 ■■■□□□□□□□ ■■■□□□□□□□ ■■■□□□□見出し −−−−−−−−− このようにする方法がありましたら、どなたか教えてください。
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
>>142 vertical-align:bottom;
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
>>142 height値にこだわらなければ height の代わりに padding-top で可能
こだわるなら・・・
<h1><span>見出し</span></h1>
h1 { position: relative; }
h1 span { position: absolute; right: 0; bottom: 0; }
とするしかないかね
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
小学生レベルの質問だな。 まずどこがどのようにわからないのか教えてくれ。 そして何を中央に配置したいのか書け。
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd ">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>天地中央</title>
<style type="text/css"><!--
body {
margin:0;
padding:0;
}
div {
position:absolute;
top:50%; /* 内容に応じて調整 */
right:auto;
bottom:auto;
left:50%; /* 内容に応じて調整 */
}
--></style>
</head>
<body>
<div>■</div>
</body>
</html>
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 を、NGWordに設定。
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。 詳しく教えて。
しかし4時からよくやるな
157 :
142 :03/04/15 13:46 ID:???
>>145 自分も最初はそれを考えたのですが、vertical-alignはブロック要素には
適用されないので、無理です。
>>148 ありがとうございます。
padding-topを指定するやり方でなんとかしてみます。
FAQの"URL"読んでやり方がわかったらすげーよな
↑ヴァカ
160 :
Name_Not_Found :03/04/15 17:11 ID:C/DVFtap
>160 スクロールバーでませんが……
163 :
Name_Not_Found :03/04/15 17:30 ID:C/DVFtap
>>161 意味分からないですか…
スクロールバーって言い方が悪いのかな。
スクロールバーの土台って言うんですか?あれを出したいんです。
というのも、
>>160 のページの様に
どのページもページのセンターにテーブル(四角の箱)を置きたいんですが、
縦にスクロールするページがあると、右側にスクロールバーがでて、
センターがずれて嫌なのです。
で、常にスクロールバーの土台(?)を出しておきたいんです。
この説明で分かるかどうか分かりませんが、どうか宜しくお願いします。
ごめんなさい。 どうやらものすごい勘違いをしてました。 なんか自分の作ったページだけそれが出ない様になってました。 普通は出ますよね。 と、いうことでスルーしてください。 逝ってきます。
165 :
Name_Not_Found :03/04/15 17:35 ID:hGq7DJWV
逆に、横スクロールバーだけ消せばいいんじゃねー?
今日は釣り人が多いなぁ
スクロールバーの土台っ消せるの?
このスレに書き込める資格のある人 ★日本語で会話できる人 ★釣り・ネタでしたといわない人>スレ違
170 :
40 :03/04/15 21:49 ID:???
>>170 質問文が意味不明。
他人にわかってもらえるような文章を書きましょう。
引き篭もりはコミュニケーション能力に欠けるっていうのは本当だな(藁
最後の一文は自分の価値を下げてるよ>171
173 :
Name_Not_Found :03/04/16 00:50 ID:UFFbsFyM
>>152 それの通りにやったらfloat:left;が効かなくなった。
画面中央に置く方法を教えろ。
>>173 何を画面の中央に置きたいのか、それが問題です。
つーか、
>>5 読め。
175 :
Name_Not_Found :03/04/16 01:29 ID:UFFbsFyM
'text-align'じゃねえよアフォ
/ \ / ヽ / ,----、 __ ヽ ! /_ `'''''''´ `ヽ i | / } | _⊥< ,,,,,,,,__ | ! /r\f‐┴─-<_ ≦二ヽ__レ'! !ノ!. ヽ 厂二二┐ ̄r─‐-、 /⌒! l ヽ !ヽ__//^ヽ!  ̄` ノ/iヽ / / ̄ ̄ ̄ ̄ ̄ ̄ ̄ \__! `ー--/! \ヽ--'/├'/ < ばーか | / L _ __)ヽ ̄ /‐' \_______ ,┤ i〈 、_____, 〉 / / ! ヽ\+┼┼+/ / __/ ヽ `ー‐‐'´ / , -‐''" i \ 人 -''~ | \`ー----‐'´! iヽ、
引き篭もりはコミュニケーション能力に欠けるっていうのは本当だな
178 :
174 :03/04/16 03:10 ID:???
>>175 text-alignじゃないのも載ってるんですが。
text-alignじゃない物がほしいのであれば、
>>5 のA2の4番目なんて如何でしょうか。
>>173 >>1 読め。
>・「環境を書け」とか「ソースは?」と求められたら応じませう。
> その方が回答が早く得られます。
以前失敗して止めていた擬似フレームに再度挑戦してます。
>>6 を見て何とか形にする事は出来たのですが、フレームというよりも
インラインフレームのようにしているのでOperaやMacIEだと擬似フレーム
になっている要素とその下の要素が重なってしまい、しかも一緒にスクロール
されてしまいます。何とか意図通りに表示させる事は出来ないでしょうか。
ソースは長くなるので鯖にそのままUPしておきました。
http://shinjuku.cool.ne.jp/drug_spider/
>>180 OperaはOpera6のこと?だったらoverflow:autoに対応してないから仕方がない。
Opera7は対応してるから気にしなくてもいいと思う。
Macはちとわからん。すまん。
>180 IEでJavaScript切ってたら広告とテキストが重なってえらいことになりますた…
183 :
180 :03/04/16 22:18 ID:???
>>181 確認したのは6.05でした。7では確認してないので見てみる事にします。
>>182 捨て鯖なので広告付きなのは許して下さい。
メディアタイプにhandheldっていうのがあるけど これに対応している情報端末ってあるの?
携帶は、下手にCSS対応するよりスタイルシート・オフであって欲しい。
>>185 AUのことか!
背景画像まで読み込もうとするからな。
携帯サイズで両端に5%もマージンいらねえだろ、って感じだ。
187 :
厨房 :03/04/18 00:23 ID:qJ7X4D0t
質問させて下さい。 書き込みフォームの背景を透明にしようとして、 そのフォームのあるテーブルに style="filter: Choroma(color=#FFFFFF);" と書いたら、背景も透けてカコイくなったのですが、 書き込み中の動作が重くなりますた。 サーバーにもかなりの負荷がかかってるのでしょうか??
>>187 filterプロパティはブラウザの処理が重くなる
189 :
厨房 :03/04/18 00:31 ID:???
>>188 ということは、自分で使う分には問題無しってことですかね・・・
本当はAlphaタグで指定して、テーブルもうっすら残したかったのですが、
文字まで透けちゃって・・・(´Д`;)
divとかの高さをウインドウの大きさに合わせるのはやっぱ無理ですか? heightって%は使えないですよね?
>>192 div{height:70%;}
とかやっても何も起こらない(指定しないときと全く同じ)んですが・・・
div{height:300px;}
とかだったらちゃんとなるのに・・・
>>193 body { height: 100% }
って指定しとかないとダメだと思う。
スタイルシートでJavaScriptを無理矢理 無効 にする方法ってどうやるんですか?
>>196 逆じゃないの?
JavaScriptでスタイルシートを無効にするでは?
ネタでないとして script {display: none;} script[type="text/javascript"] {display: none;} とか?試してないから有効なのかどうかは知らないけど
cssを貼ればおかしい所、直してくれるの?
201 :
199 :03/04/19 09:38 ID:???
202 :
196 :03/04/19 10:18 ID:???
「スタイルシートでJavaScriptを無理矢理 無効 にする方法」なんて無いよ。
じゃあどうやればJavaScriptを無理矢理 無効 にする方法を実現できるんでしょうか? 色々と捜したんですが・・・。
>>204 あなたはどの立場でJavaScriptを無効にしたいの?
製作者の立場で言ってるなら、そもそもJavaScript使わなければいいじゃん。
自分でJavaScript入れてて、それを無効にしたいってわけわかんないよ…。
閲覧者の立場で言ってるなら、ブラウザの設定でJavaScriptの機能をOFFにすればいい。
これはCSSとはなんの関係もない。Webサイト制作初心者スレというよりもPC初心者板行き。
広告をあぼ〜んしたいんだと見た。 通報しておいた。
208 :
山崎渉 :03/04/20 03:10 ID:???
∧_∧ ( ^^ )< ぬるぽ(^^)
209 :
山崎渉 :03/04/20 03:44 ID:???
∧_∧ ( ^^ )< ぬるぽ(^^)
WinのIE6は、contentプロパティを正確に解釈できまつか?
212 :
210 :03/04/20 17:12 ID:???
質問ですが、 リンクにマウスポインタを合わせると、文字に背景が付くタグってどうするのでしょうか? お願いします。
>>214 a:hover { background-image : url(xxx.png); }
これでわかんない場合は
>>4 に挙げられている解説ページで勉強してください。
>>214 とりあえず
>>4 で挙げられているサイトで勉強してみてください。
それでもわからなければお答えします。
>>214 どこかそんなことをやってるサイトがあるの?
なら、そこのソースを見て真似すればわかるでしょ。
たぶん、マウスオーバー効果はa:hoverセレクターで、
背景をつけるのはbackground-imageプロパティー。
>>4 読めばあなたにも出来ますよ。
218 :
216 :03/04/20 19:14 ID:???
重コーン
>>214 >文字に背景が付くタグってどうするのでしょうか
……「タグ」とか言ってる時点で既に全然理解できてないな、こりゃ。
基礎から勉強しておいてほしい。
>>117 >>118 教えていただいた方法のうちの一つ「li要素のbackground-color
指定をなくす」で、図書館のMacIE5.16で問題ないことを確認
いたしました。ありがとうございました。
<div>とあるブロック要素</div> <h1>見出しキター(・∀・)ー</h1> <div>いくない</div> コレを ――――― 見出しキタ(・∀・)ー ――――― とあるぶろっく イクナイ と位置を指定できますか?
>>221 position使ってできるだろ。でも不自然なのでお獎めできない。
223 :
? :03/04/21 12:46 ID:aaXU9/AQ
css-validatorで検証したら、検証結果云々以前の段階で、 「スタイルシートが見つかりませんでした。」 と表示が出てしまう.... 先週は全く同じページでも検証結果が表示されたのになんでだろ? もしかしてDOCTYPEをきちんと書いていないと読み込んでくれなくなった? 今朝の5:00頃updateしたみたいだけど...
224 :
? :03/04/21 14:05 ID:???
今検証してみたら、ちゃんと結果が出るようになった.... 原因がわからないけど、何はともあれ一件落着。 お騒がせしました。
独り言は余所でやらんかい
226 :
? :03/04/21 16:48 ID:???
バグっぽい状況だったので報告のつもりだったのが結果的には独り言のようになってしまった。 もうしわけない。
font style="background-image:url(javascript:document.body. これで壁紙を貼りたいんですが続きはどうしたらいいんでしょうか?教えてください・・・。
ワケ ワカ ラン(AA略
>>227 もっとわかりやすく書いていただけると、解答しやすくなります。
230 :
226 :03/04/21 22:57 ID:???
>>229 そこをインテリジェントに解釈して回答してくださいよ。
回答できないのなら黙ってろ。
騙りシパーイか。惨めだな。
以下のようなソースで複数の画像を一つの画像のように見せたいのですが Opera7だときちんとmargin無しで表示されるのですが IE6だと各リストの間に隙間があいてしまいます。 IEもしくはOperaのバグでしょうか? どうすればIEでも隙間が開かないようにできますか? <ul class="edit"> <li><img src="img/edit01.png" width="230" height="16" alt="edit01.png" /></li> <li><img src="img/edit02.png" width="230" height="16" alt="edit02.png" /></li> <li><img src="img/edit03.png" width="230" height="16" alt="edit03.png" /></li> <li><img src="img/edit04.png" width="230" height="16" alt="edit04.png" /></li> </ul> .edit li { margin: 0; list-style-type: none; }
>>232 不思議マークアップの匂いがぷんぷんするが……
line-height : 1; padding: 0; でもだめ?
235 :
232 :03/04/22 01:00 ID:???
>>233 .edit li {
line-height: 1;
margin: 0;
padding: 0;
list-style-type: none;
}
でやってみましたが、だめでした。
>>234 ソフトウェアの説明しているページを作っているのですが、
ドロップダウンリストの説明をしようと思ってまして
リストを画像で説明したかったので、各リストを画像に分けて
画像にリンクを貼って<dt><dd>を使って説明している部分に
ジャンプさせたいと思っています。
>>235 そうじゃなく、なんでリストなんか使って並べるのってこと
>>235 それならば、<li>使わなくても<div>とかのブロック要素に
marginをとって、display:list-item;でリストboxを生成したら?
こんな感じで
div {
margin-left:20px;
display:list-item;
list-style-type:square;
}
>>235 それだったら普通に1つの画像&クリッカブルマップの方が良いような
>>232 font-size: 1px (ピクセル数はてきとう)
を追加するとくっつくね
日本語で書いてある CSS のリファレンス本で、 最高の奴を教えてクリ。 ぶっちゃけ、疲れ目の時は紙で読みたい。
>>240 明興堂 「3日で覚えるスタイルシート・マスター!」¥1700
>>244 5年経ってもどうだ?
CSS2を100%を解釈できるブラウザなんて存在しないのが現状だね(w
本が売れなくなる
>>240 >246とどうよう、
プリントアウトして読めば?
と言う意見。
プリントアウトするのはもち仕様書。
249 :
240 :03/04/22 23:23 ID:???
優れた編集の書籍ってやっぱり存在するでそ。 リファレンスとかだと、そういうの顕著じゃん。 基本はだいたいわかってるから、とにかく辞書的に使えるのを探してマス。
私の見た限り、Web上のより優れた紙のCSSリファレンス・解説書は無かった。 本屋であれこれ探してみたが、どれもWeb上の優良サイトには及ばなかったので、 金出してまで購入しなくてもいいやと思った。これが三年前。
>>250 優れた編集の書籍ってやっぱり存在するでそ。
>>251 例を出しておくれ。
>>250 は少なくとも「三年前」は「CSSリファレンス・解説」の分野では無かった、
ってことだろ。
その後の刊行書やその他の分野では勿論優れた書籍もあるかもしれんがな。
すみません、初歩的な質問なのですが、 CSSレイヤーを使ってレイアウトする場合、<body>〜</body>間には ボックス要素化していない従来のテーブルレイアウトと組み合わせるのはタブーですか? ブラウザのサイズに合わせて可変するレイアウトにしたいのですが、メニューだけドロップダウン型にしたいのです・・・
>>254 >ボックス要素化していない
すべての要素にはボックスがあるんだが……意味がわからない。
メニューをドロップダウン型にしたいというのはselect要素を使うということ?
それだったらJavaScriptなので誘導することになるよ。
256 :
254 :03/04/23 03:40 ID:???
変な言い方ですみません。 例えれば、従来のテーブルを使ったレイアウトのHTMLに CSSレイヤーを混在させるのは問題ないのか、ということです。 私の場合、普通だとCSSレイヤーを使う場合は全てレイヤーだけでレイアウトするのですが、 ブラウザのサイズに追従する可変型のデザインだとテーブルの方がシンプルに 出来そうな気がして・・・ただ、メニューだけレイヤーを使って階層化できるものに したかったのです。 以前、NN4で混在させようとして、うまくいかなかった記憶があるので、 根本的にタブーなのかな、と思ったもので・・・
CSSレイヤーって何?
>>256 あんまり変な用語を作られても困るが。
基本的にtableでレイアウトして部分的にposition:absoluteで絶対配置にしたいということだと推測すると、
それ自体は問題ない。好きにしてくれ。
管理が面倒になるのでお勧めはしないが。
>>256 >NN4で混在させようとして、うまくいかなかった
NN4はCSSをまともに解釈しないバグだらけの駄目ブラウザです。
特にpositionは相性が悪い。CSSを読み込ませない方がいい。
z-indexのことならレイヤーなんて言っては通じません。
layerなんてものはNN4だけの独自拡張タグでしたから。
>>4 で勉強するとよいことでせう。
>>257 〜
>>260 ありがとうございます。スッキリしました。
260さんの言うとおり、CSSレイヤーという呼び名はDreamweaver系では
割とフツーに使われちゃっているんで気にしてませんでした…。
(NN4のlayerタグと同じような働きをCSSでさせるということでそういう呼称っぽいです)
まともな用語も使えなくてお恥ずかしい。
>>4 で勉強してきます。
横に広がったリスト(・×× ・○○ ・……)ってのを作りたいのですが CSS2で、 ul要素の改行を無くすタグってありますか?
タグってなあにー
>>262 CSS2にはul要素の改行を無くすタグはありません。
265 :
262 :03/04/23 22:43 ID:???
うげ。
HTMLと混同してた。
えーと、CSSの場合はプロパティーか。
>>264 さんくす。
ずらずらと並べるしかない訳ですね……。
>>265 いや、CSS2にタグはない、と言ったんだけど。
flortで回りこませるか、インラインにするか、どっちでもいけるんじゃないの?
268 :
262 :03/04/23 23:03 ID:???
>>267 >flortで回りこませるか、インラインにするか
成る程。そう云う手もありましたね。
float使って回り込ませてみます。
ありがとうございます。
……ちょっと意地悪された気分ですが(笑。
>>262 display:inline;を使うと、リストの前に付く"・"がなくなってしまいます。
付けたい時はli:brefore{content:"・"}等としなければなりません。
一方floatを使った場合はブラウザによって"・"が見えなくなりますが、
これはpaddingを指定してやることで出てきます。
ちなみに、HTMLであっても
タグは<li>や<body>と言った記号の事であって、liやbodyなどは要素と呼ばれるものです。
liやbodyなどは要素*名*
すみません。 marginというプロパティがよくわからないんです。 たとえば、pにmarginで上側に4em下側に2emの余白を設定すると、 段落間の余白は結局2emになるんでしょうか、4emになるんでしょうか、 それとも2em+4emで6emになるんでしょうか。 あと、それはブラウザの種類に左右されますか? IEを使っている限りだと、4emっぽいんですが・・・ あまりに基本的なことなんでしょうか、 いろんなCSSの説明サイトを回ってみたんですけど、 書いてないんです。 どうか教えてください。よろしくお願いします。
マジレスしてくれる燃料ってなんか可愛いね。
275 :
271 :03/04/23 23:42 ID:???
>>273 ありがとうございます。
ああ、やっぱりちゃんと規則があったんだ。
どこ見てたんだろ、私。
えっと・・・うわ、英語・・・
んと・・・大雑把にfloatやpositionが関わる場合か
marginの値の一方が0より小さいときが、合計値
それ以外の場合は、最大値
ってことでいいのかな・・・
>>275 上下のmarginは相殺される。
左右のmarginは相殺されない。
とりあえず、それだけでいいんじゃない?
278 :
Name_Not_Found :03/04/23 23:56 ID:ChAtJs6g
名無しさん<TAB>sage<TAB>1036857268<TAB><style type="text/css"><!-- strong { color: red; font-size: 1.5em; } --></style><strong>テスト</strong>かきこ
279 :
271 :03/04/23 23:59 ID:???
>>276 >In CSS2, horizontal margins never collapse.
あ、ほんとだ・・・
ありがとうございます。
>>277 うわ、教えてくれて、どうもです!
皆様、どうもありがとうございました!
目の周りが被れ目の回りに化粧をしなくなりました。少し前に買った アイリムーバーが必要でなくなりました。クレンジングはせっけんになり クレンジングとしても必要でなくなりました。何か化粧品として以外の 方法で使いたいのですが、何かありませんか?(ヤフオク以外の方法で) 貧乏だし勿体ない気がするもので。よろしくお願いします。
271が誤爆か?
Validatorで font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として付け加えておく事を推奨します これってどういうことですか? どのようにすればよいのですか?
>>283 font-family: Osaka, "MS Pゴシック", sans-serif; のようにする。
一般〜つーのはsans-serifとかmonospaceとか。
285 :
283 :03/04/24 22:29 ID:???
外部CSSの符号化の優先順序は 1. HTTPヘッダにあるContent-Typeフィールドのcharsetパラメータ 2. @charsetによる指定 3. 参照元文書の構造化言語による指定(たとえばHTMLならLINK要素のcharset属性) とのことですが <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> は、どの順序になるんでしょう? 1. と同等なのか? 3. に当てはまるのか? 無視されるのか?
ふと、思ったんだけど ※ margin:2em 5em 3em 2em; ※ margin-top:2em; margin-right:5em; margin-bottom:3em; margin-left:2em; 果たして、ハード的にはどっちの方が解釈するのが無理なく速いのか? ※ border:red thin solid; ※ border-width:1px; /*細いということで仮に*/ border-color:#ff0000; border-style:solid; これもどうだろうか? 誰かしらんか?
そんなこと考えるなんてヒマだね
解釈も何もソース自体のサイズが大きくなるからまとめた方がいいに決まってる
>>289-291 ただ、marginなんかはブラウザによっては分けないとバグになる場合もあるから
分けたほうが無難ともいえる。
>>291 たまに見かける、body内よりもはるかに長いスタイルとか?
>>290 ふと、思っただけなんだが悪いか?
>>291 それもあるだろうけど実際どうなのか?
やはり、どっちかが速いはず
>>292 基本的にはそうだと思うね
他のソースコードでも実際速くなることがあるんだから絶対にあると思う。
詳しいひといないのかな?
内部でどんな処理してるかはブラウザによって違うだろ
ブロックレベル要素のセンタリングはFAQに載ってますが、 右寄せや左寄せにするにはどうすればいいんでしょうか…?
>>296 float:right/left;とかmargin-right/margin-left;とか。
298 :
286 :03/04/26 03:50 ID:???
>>287 レスありがとうございます。どうやら、私が勘違いをしていたようです。
charsetパラメータとあるので、*.html のことかと思って
<meta http-equiv="Content-Type" …> との競合を気にしたのですが
*.css のContent-Typeのことだったようですね。
Content-Type: text/css; charset=Shift_JIS
と、charset付で吐き出す鯖は見たことがないので
実質 @charsetの指定が最優先されるということでしょう。
失礼しました。
>>298 >と、charset付で吐き出す鯖は見たことがないので
そお?たまに見かけるよ
300 :
286 :03/04/26 04:10 ID:???
>>299 そうですか。不勉強で申し訳ありません。
text/html で charset付はよく見かけるのですが…
まあ、「よく見かける」というほど
いちいちチェックしているわけでもないので。
スレ汚し失礼しました。
ここで聞くべきかどうか微妙だけど。お願いします。 Mac OS XでGoLive つかってて cssでフォントセットを作ろうかと思ってるんですが <p>または.classに ヒラギノ角ゴW3,Osaka,MSゴシック,MS Pゴシック <strong>または.classに ヒラギノ角ゴW6,Osakaを当ててます。 ヒラギノはOSXで、OsakaはOS9やOSXでバンドルされてるフォントです。 Win側のMSゴシックの太字に相当するフォントとして汎用性のある フォントはどんなでしょう? まあ単に<strong>か、.classに太さを加えても良いのですが。。。一応
>>301 <strong>自体、ブラウザによって違うが擬似的に太さを描画している
だけなのでほとんど無意味。Safariなんかは<strong>で包囲すると、
ヒラギノ角ゴW3→ヒラギノ角ゴW6に置き換えるので
あと、 @font-faseもあるが対応がイマイチ。
htmlダグの<font fase=" ** ">とはまた意味が違う訳
>301 うちの環境だと対応できるフォントはありません。 日本語フォントは「MS 〜」しかないです… 「どの環境でもそれなりに意図通りに表示する」のなら font-weightプロパティを指定するのが無難だと思います。 OSもMac、Winだけじゃないですしね。
304 :
Name_Not_Found :03/04/26 14:38 ID:4CQw2I/v
WYSIWYGで編集出来て、かつ編集画面でCSSの表示が崩れにくい ソフトを探しています。 今はホームページビルダー7を使っているのですが、 DIVをフロートさせて段組を作ったりすると編集画面で表示が崩れたり、 別途手書きで書かなければならないプロパティが多かったりと CSSに関しては使いづらいので、他によいソフトを探しています。 (その他のことについてはほぼ満足なのですが・・・) CSSをフルに使うことを前提にお勧めのWIN2kで使えるソフトを 教えて頂けたらと思います。宜しくお願いします。 エディタで書いても良いのですが、作っている各ページのサイズが 大きいので編集したい場所を探すのに手間がかかったり、 リンクやファイルの管理も一度に出来るソフトが使いやすいと 思っています。スレ違いでしたら済みません。
>>301 世の中にはヒラギノもMSも入れてない人もいる・・・
あと、MacのIEはFontのfamilyを無視したと思う。
>>302 >>303 のいうように
strongを用いたり、weightとsizeの組み合わせで対応したほうが、
結果的に安定したデザインになると思う。
306 :
301 :03/04/26 15:11 ID:???
やってるうちにそうだと思いはじめてきた。皆ありがと。 つかOS9環境での確認もOsakaで想定すると他に割り振るフォントなんか ないわ。<strong>でフォント(ヒラギノw6とか)けられたら Boldになる。みたいになったらなー。なーンて思った。 アポの配付しとるcssでできないこともないけどテーブルまで絡んでくるし Javascript(これでfontfaceを制御?)で飛ばないと行けなそうだから やっぱ断念。OSX(なめらか文字)だとボールドって濁るよなぁ
>>306 CSSの仕様通りに解釈すると本当は
font-family:"ヒラギノ角ゴ";
と指定しておけば
font-weight:normalでW3あたり、
font-weight:boldでW6あたりが表示されるはずなんだけどね。
今のブラウザはboldと指定されると無理やり太くして表示する罠。
308 :
Name_Not_Found :03/04/26 18:26 ID:hY+BOoaJ
<style type="text/css"> <!-- A { text-decoration : none ; } A:hover { text-decoration : underline ; } #a { font-family: HG正楷書体-PRO; font-size: 40px; } #b { font-size: 12px; } --> </style> これで#bのところで何度もid属性を使うことになってしまうのですがどうすれば解決できますか?
>>308 アンカーに対する指定と#aおよび#bに対する指定の関連がよくわからない。
どういう風に表示したいの?
>>308 idの使い方を激しくまちがっとる予感。classを使うべし。
ていうか、まず
>>4 で勉強した方がいい。
dt,ddを横並びにしたいのだけどいい方法ない? dt { width:10em; float:left; } dd { width:70%; float:left; clear:right; } とりあえずこんなのでごまかしてるけど、dtのほうが10文字超えると 2行になってしまい、その段のddが1行だと次のdtが回り込みを 起こしてしまいます。 というわけでこの方法だと、dtの最大長にあわせてデザインを修正 しなければならずあんまり楽しくないので、良い方法あったら教えてください。
312 :
308 :03/04/26 18:52 ID:hY+BOoaJ
>>311 dt{float:left;clear:left;width:10em;}
dd{width:70%;}
じゃだめ?
絶対にdtを改行させたくなければwhite-space:nowrap;とか。
一番左上に空白まったくとらずに配置するにはどうすればいいですか?
>>316 何を?
ブロック要素ならmargin-left:0;margin-top:0;padding-left:0;padding-top:0;で出来ますが。
>>317 あ、何かclass名を勘違いしてたせいでできなかったみたいです。
ちゃんと設定したらできました。ありがとうございました。
lintの結果で出るtableのsummary?属性ってなんですか?
323 :
Name_Not_Found :03/04/28 12:30 ID:GroE9npd
textarea内のテキストの特定の文字だけ背景色を変えいることはできますか?
なんでそんなことしたいんだろう
デザインにいちいち理由聞いてケチつけるのはウェブ板ぐらいダヨな。
>>326 今のうちから注意してやらないと白い布を巻いて歩くようになっちゃうよ
ちんちん腐っちゃうヨ
ああ、textarea内の元から書いてある文字のことか。
body { background: #000000 url( "top/logo1.gif" ) bottom right no-repeat; } という指定をして、右下の隅っこに100×100pxの画像を背景指定してるのですが、 画面がウィンドウサイズより縦長になるとき、 opera7で見るとスクロールしても背景が表示されてません。 IE6で見た場合は、少々挙動が怪しいですが背景自体は表示されます。 N7では問題なく表示されてます。 operaでの背景表示きちんとできる方法あったら教えてください。
>>332 background-attachment:fixed;
334 :
Name_Not_Found :03/04/29 23:58 ID:aO53M+u0
A:LINK, A:HOVER, A:ACTIVE, A:VISITED { text-decoration:none; border-bottom: 1px dotted blue;} としてリンクに疑似下線をつけているのですが、 IMG A:LINK, IMG A:HOVER(以下略) { border-bottom-width:0px;} としてやっても下線が消えません。 不格好なので何とかしたいのですが。。 IE6.0で発生。Opera6.02では起こらず、です。
>>334 a.img { border-bottom-width:0; }
<p><a href="**">***</a></p>
<p><a href="**" class="img"><img src="***.gif"></a></p>
classつけるしかないんじゃないの?
337 :
332 :03/04/30 01:51 ID:???
>>333 レスありがとうございます。fixedだと、表示されるんですね。
でも、scrollだと一番下までスクロールしても表示されないって言うのは、何なんでしょうか。
340 :
337 :03/04/30 02:45 ID:???
>>339 そこも、読んではありますが、
opera7では、fixedのバグは直ってるようです。で、変わりにscrollがおかしいです。
って、バグなのかな。opera7の。
ページを表示さ せた段階で表示されている部分しか表示されない。
そのため、ページをスクロールしても見えない。
ためしに、縦長の画像(100×1000px)をつかってみたら、
ページを表示さ せた段階で表示されている部分しかまともに表示されない。
隠れている部分はページをスクロールして出すと、画像がゆがんでいる。
バグ辞典スレッドに持ってくべきかな?
341 :
334 :03/04/30 03:13 ID:???
>>338 よく考えてみれば、当たり前なのですが気づきませんでした。
誘導どうもです。そちらの方へ報告させていただきました。
>>340 >バグ辞典スレッドに持ってくべきかな?
お願ひします。
症状としては、Opera6でbackground-attachment: fixed;にしたのと同じなのかな?
text-alignって、文字にしか効かないの? 子要素には影響しない? NetscapeやOperaでは文字だけで子要素には効かず、 IEだと文字も子要素も影響する。 本当はどちらの動作が正しいのですか?
>>343 ブロックレベル要素にのみ指定できて、継承されます。
効果は、指定した要素内にある、各行(行ボックス)のそろえ方の指定です。
詳しくは
>>5 のQ2参照
>>344 スレのFAQにあったんですか。すみません。
しかも親切にお教えいただいて、感謝。
要素を縦いっぱいに引き伸ばすにはどうすればよいのでしょうか。 height: 100%;としても、 IE5 Opera6ではウィンドウの下まで届くのですが、 N7ではautoと同じような表示になります。
347 :
346 :03/04/30 22:11 ID:???
すみません、解決しました。
ユーザースタイルシートで background-image : none !important; としても背景画像が表示されてしまうのですが…
349 :
348 :03/05/01 00:28 ID:???
失礼、IE6での話です。Opera7.02では画像が表示されずに済みます。
>>348-349 それだけだとなあ……。ソース出してくれんと何が原因かもわからないって。
親要素の横幅に合わせて、 子要素の文字を自動で改行するにはどうすればいいのでしょうか。 親要素からはみ出たり(Opera6、N7)、 親要素が引き伸ばされたり(IE5、NN478)してしまいます。
>>350 IEはその辺りが未熟。例えば、
input[type="text"] {
display:none;
}
のように要素、属性、値のレベルまで指定できないようにね
>>351 IE5とNN4.78は多分にバグを含んでいるわけで。
354 :
351 :03/05/01 02:14 ID:???
>>353 しょぼーん
たとえば幅400pxに指定している親要素の中に、
改行なしの文字を書いていき、幅400pxに達した時点で
<br>とかなくても強制的に改行したいんだけど。。。
子要素が親要素の中に座標的に内包するとは限らないと 思えばいい。 したがって子要素にも正しく幅を指定しる。 ちなみにIE6も引き伸ばし派だった。
なんとかNN6でチェックボックスの背景色とチェックの文字色は変えられないもんでしょうか。
フォーム関連のCSS実装ってかなりまちまちなんだよな。 チェックボックスの背景・文字色(・ボーダー)についてはOpera7の実装が いちばん真っ当に見えるけどどうなんだろう。
358 :
348 :03/05/01 07:34 ID:???
解決しました。 いちいち設定を変えるのが面倒でツールを使って ユーザースタイルシートを適用していたのが問題だったようです。 普通にインターネットオプション>ユーザー補助からCSSを適用したら 背景画像は表示されませんでした。 >350 お手数おかけしました。
CSSでテキストに影をつける、っていうのはまだ実装されてないんですか?
>359 CSSレベル2だけど、どのブラウザもまだ実装してないみたいね。
確かCSS2.1では消えたんじゃなかった?>text-shadow
363 :
351 :03/05/01 12:56 ID:???
>>362 どうもありがとうございます。
参考にさせていただきます。
365 :
351 :03/05/01 14:17 ID:???
>>364 はい、そうします。
いろいろと試行錯誤してみます。
<a>にwidthを指定しても、反映されないのですが、 幅を指定するにはどうすればよいのでしょうか。 Netscape4x、6x、7x、mozilla1x、Opera6xで効きません。 IE50は効きます。 たぶんIEの解釈が間違っていると思うのですが、 IEで表示されているように、他のブラウザでも表示したいです。
>>366 幅を指定できたとして、どうしたいんだ?
リンク文字列以降も下線を長く伸ばしたいってことか?
>>366 a を display : block でブロック要素にするかなぁ
mozilla ならこれでできる。N4は期待しないで
369 :
366 :03/05/01 17:57 ID:???
>>367 widthと書きましたが、hightもです。
クリックできる範囲を大きくしたい…みたいな。
フォントサイズはそのままで。
┌──────┐
│ │
│ クリック │
│ │
└──────┘
罫線の中すべてがクリックできる範囲にしたいです。
わたしはこのほうが押しやすいと思っています。
~~~~~~~~
いろんなこと考える人がいるものだなぁ やれやれ・・・
373 :
366 :03/05/01 18:09 ID:???
>>368 >>370 >>372 たくさんの方からのレス、どうもありがとうございます。
>>368 さんの方法で、うまくできました。
各ブラウザで微妙に大きさが違ってしまいますが。
こっちを立てればアッチが立たず、みたいです。なんとなく。
374 :
366 :03/05/01 18:20 ID:???
特に問題ではないのですが、
>>368 さんの方法だと、Opera(6)では
text-decoration: underlin;がなぜかoverlineになっちゃいました。
問題ではないといいつつ、少し気になって。
おまえスペルミス多すぎ
376 :
366 :03/05/01 18:29 ID:???
>>375 すみません。タグ入力タイプのエディタに頼っているので、
自分で手打ちすることはあまりないのです。
そして、英語が苦手です。
>>374 どっかに記述ミスがあるか他のスタイルが影響してるのだと思われ
というかOpera6はa要素にdisplay:blockしてもwidthが効かなかった気がする
Mozilla 系って css で col 要素を指定しても 何にも反映されないのだけれど、これはバグ? それとも漏れの書き方が悪いのか?
>>378 backgroundは確かに未サポートだが、
colに対してのtext-alignとかはIEの独自拡張だよ。
381 :
378 :03/05/01 22:20 ID:???
>>379 なるほど。さんくす。しかし、なぜ?
XHTML 1.0 にもあるんだし、
CSSバグリストにその旨載っててもいい
(例えば『Gecko が col要素をサポートしていないのは仕様です』とか)
気がするのは漏れだけか?
CSSのバグというより、HTMLのバグなんじゃないかなあ。 バグだとすれば。
基本的なことかもしらないがcssのclassで文字を class="xx1"(10px、行130%) class="xx1b"(10px、行130%、Bold) class="xx2"(12px、行130%) class="xx2b"(12px、行130%、Bold) class="xx3"(14px、行130%) class="xx3b"(14px、行130%、Bold) などと設定(ややこしい?から全部spanで)してるマカーだが、 Winで見ると欧文はサイズ相応に見えるが 和文が12pxとほとんど変わんないきがするんだけど 気のせいかなぁ?こうゆう仕様?Winはほとんど使わないんで なんつうか常識の範囲のことかもしれないけどわかんない。 ディスプレイによって印象が違うのかもだが ぬるい漏れに一喝してくれませんか?
>>383 とりあえずわかりやすく書いてくれないか
>>383 気のせいかどうかくらい自分で検証せいや!
>>384 うぐ。GWと言うことで勘弁。どこが分かりずらいのかわからないけど
とりあえず補足。
Macでみると、12pxの文字と10pxの文字のサイズは明らかに違うのに
Winでみると、ほとんど変わってないように見える。
欧文(oubun)の場合はMacで見た時に近い印象。
もうひとつゆうと、10pxBoldも小さく見える。ただ10px(ウエイトなし)が
12pxとほとんど変わらなく見えてしまう。こうゆうもの!といってくれれば
安心するなぁ。みたいな。
こんな説明でいいだろうか?
>>386 WinMac関係なくpx指定してもモニタによって違って見えるはずだから
一概にこうだ!とは言えないと思う
>>383 >ややこしい?から全部spanで
span使わなくていいところでspan使ってたらショック。
で、ソース出せ。
>>386 同じ文を上下にでも並べてみれば、
そんなあやふやな言い方じゃなくはっきり分かるのに。
>>387 お。その一言でちょっぴり安心だ。うすうすそうだとは思っていたが。
1機のWin(ディスプレイも)でしか見てないし今は手元にないから
ちょっと不安でさぁ。Macだとその辺は慣れてるせいか自身もてるんだけど。Winはまだ慣れてないし常に触れる環境になくて。
>>386 なんつーか、環境とフォントに依存かと思ふ。
マクでも、OSXヒラギノと棺桶OSアンチエイリアスなしの
Osakaとでは、表示結果違うし。
ビットマップ表示する場合は、持っていないサイズの
フォントは近似のサイズで表示するので、
サイズ指定が違っても、画面表示は同じサイズだったり。
マカ的には、ウィソも綺麗なアンチエイリアスする
和文フォントを持ってほしかったりするが、
高望みはすまい。
4pxあたりから70pxくらいまでスタイル一覧作って
確認してみるとおもしろかったり。
┏━━┓ ┃┌┐┃ ┃││┃ ┃││┃ ┃└┘┃ ┗━━┛ 太線…divの枠 細線…本文 IEでは上記のようになるんですが、Operaでは ┏━━┓ ┃┌┐┃ ┗││┛ ││ └┘ となってしまいます。 本文に画像を使わなければこんな風にはならないんですが、 画像を使っても、こうならないように回避する方法を教えて下さい。お願いします。
393 :
392 :03/05/02 00:55 ID:???
自己解決しました。 なぜか高さを指定してたみたいです。
>>394 文字サイズは固定してもいくらでも観覧時に変更できますが何か?
あ。自身じゃなくて自信だ。
それから実は手打ちじゃなくてGoLive。このスレでは反則かなぁ?
span使わなくてもいいところでも使ってる。なにせ全文字だから。
たぶんpやdivでごっそり行けるところもあると思うけど
<font size>や<b>も併用したら、spanの挙動が一番安心出来た気がしたから
どうせ手打ちじゃないから汚いし。手間的にもそんなに変わんないし
spanでいいや。とかテキトーに考えて。(順を追ってキチンとしていきたいけど)
こんどwinで見る時はそう(
>>389 )やって見てみる。
どうせぬるい漏れだし。ソースは勘弁ね。upする時は書き出すし
(Golive属性やコメント、スペース程度は書き出し機能で削除)
>>391 そうそう。ぼんやりだけどそんな高望みなことも考えてた。
サイズ固定良くないのも分かってはいたけど。うーん悩む。
やっぱりwin買うか。(金ねー)皆レスありがと。と、ぬる長文ごめん。
>395 出来る人はそりゃ出来る。 アクセシビリティという言葉をご存知かね。
>>395 現在一番のシェアを誇るブラウザでは簡単には変更できないけど?
というかほぼ寡占状態にあるブラウザに「合わせて」作る必要はないけど、
「考慮」しないことは製作者として怠慢だと思いますが何か?
>>397 馬鹿な事を聞くなよ。
ご存知だったら
>>395 みたいな発言できるわけないだろ。
わかってやれよ。
>>397 ,399
( ´,_ゝ`)プッ
そんなこといってたらデザインレイアウトなんかできんよ
12px,14pxぐらいがそんなに小さいサイズか?
>>400 ( ´,_ゝ`)プッ
そんなことぐらいでデザインレイアウトできない腕なのね
12px,14pxなんかをそんなに使わないと無理か?
>>401 腕だけでは無理なレイアウトやデザインって解らないですか?
画像の場合はどうでしょう?拡大されて表示されますか?
それとブラウザの標準フォントはおいくつぐらいで設定されていますか?
また、平均的にどれぐらいのフォントサイズで観覧されているかご存じですか?
アクセシビリティを忠実に守られているようですがいかがですか?
同じように屁理屈を述べてみましたが(w
>>403 その前に、CSS切ってたら意味ないだろ
>>402 > 腕だけでは無理なレイアウトやデザインって解らないですか?
わからない。腕が足りないだけだとしか思わない。
> 画像の場合はどうでしょう?拡大されて表示されますか?
画像と文章を同列に語るのはどうかと。画像も%指定できるし。
> それとブラウザの標準フォントはおいくつぐらいで設定されていますか?
IEの中。
> また、平均的にどれぐらいのフォントサイズで観覧されているかご存じですか?
IEの中。
> アクセシビリティを忠実に守られているようですがいかがですか?
良好。
> 同じように屁理屈を述べてみましたが(w
まったくだめ。箸にも棒にもかからない。
>>404 切ってる人はデザイン不要な人なんだろ?なにが「その前に」だ。
ハハハ、もまえら釣りに掛かりすぎ(*´∀`) 今時こういうスレ見てて、px指定使わないとデザイン出来ないヤシなんて居るわけないじゃん。
おまいらふぉんとに(本当に)フォントの話が好きですね
アクセシビリティて言ってるけどさ 文字はいいけど画像はどうよ、写真とさ ふぉんとうに
>409 そのためにALT属性があるし、 写真の展示等のコンテンツは視覚系ブラウザでの閲覧を目的に作ってあるわけで。 それはアクセシビリティとは違う。 聴覚が不自由な人がコンサートに出かけるのか、という事。
>>410 そうなら、ふぉんとも同じことだろ
大きさによって読み上げの音量でも変わるとでも言いたいのかよ(w
>>409 比類なき馬鹿だな。
デフォルトサイズってのがあるフォントと
デフォルトサイズってのがない画像を一緒くたに語れると思うの?
>411 えーと、弱視とか老眼の人…良いや、なんか疲れた。 まあフォントサイズ固定で喜んでるのは大抵当人だけだよ、とアドバイスしとくよ。 じゃ、快適なGWを。
>>412 上の方を読めば解るけど、フォントサイズ(12〜14px程度)の指定が
そんなにアクセシビリティに反しているかってことなんだ
411でいったのは冗談だけど、視覚の面でアクセシビリティを考えた場合
画像も何かも比例して大きくなるかってこと、装飾イメージは別として。
その辺なんだよ
厨房が厨っぷり露呈して必死に「釣りだ釣り」って言ってるみたいだな。 とりあえずお前の言ってることはさっぱりわからん。
>>415 > 上の方を読めば解るけど、フォントサイズ(12〜14px程度)の指定が
> そんなにアクセシビリティに反しているかってことなんだ
そんなにデカい字にする必要ってあるの?
黄金厨ども議論はスレ違いですよ
420 :
394 :03/05/02 02:45 ID:???
>>419 好ましくなくても聞かれたら答えるだけ
か
好ましくないならその旨を伝える
か
の選択は必要な気が。
(´-`).。oO(どうしてスレ違いの議論は盛り上がるのに誘導された先には行かないんだろう…)
厨ばっかりだから
>>422 ネタだからだよ。こんな話題今更本気で話すやつなんていないでしょ。
>>422 バーベキューでならピーマン食べれるけど食卓に並んだら食べれないのと同じ
>>425 おれ、バーベキューでもピーマン食えね。
ピーマン食えない時点で子供
苦いものを美味いと感じるかどうかは、 子供の頃に苦いものを食べて慣れていたかどうか、による。 と聞いた覚えがある。気がする。
アニヲタは迫害されて当然だと思う
あのさ、 a:hover[id="zzz"]{} みたいなことってできないの? できるわけねぇだろ、別のやり方があっから教えてやる。 って人求ム
floatとpositionって併用できないの?
>>435 positionした中でfloatとか、浮動した中で相対配置とかならできるよ。
438 :
Name_Not_Found :03/05/02 16:35 ID:UT5gAFW5
win、macのいくつかのブラウザで試したのですが。 div {font-size:50%;} span {font-size:50%;} とすると、 <div><span>この部分のフォントサイズは、</span></div> 親要素の指定が継承されて、25%のフォントサイズになりました。 td {font-size:50%;} として、 <table>(<td>)を2重の入れ子にした場合、 tdの中のフォントサイズは50%のままでした。 これって正しいんですか? tableを入れ子にしたら親要素、つまり親tableの指定は引き継がないのでしょうか?
440 :
433 :03/05/02 16:40 ID:???
>>439 ありがとう!!
でもなんで
a[id="link"]:hover{}
じゃできないんだろうか・・・・
>>440 Internet Explorerは属性セレクタ([id="link"])に対応してないけど、
それのことかい?
>>440 できないブラウザの名とヴァージョンを記してくれんと判斷できん。
WinIEだったら属性セレクタは未対応だ。
444 :
438 :03/05/02 16:58 ID:UT5gAFW5
>>441 HTML 4.01 Transitionalです。
win IE5
mac IE5、N6、iCabあたりで確認したのですが…。
だんだんわけがわからなくなってきました…。
とりあえず、親要素の指定は継承するのが正しいんですよね。
>444 > 補足 > > Mozilla5.0系互換モードやOperaでも子供要素としての表要素に継承されない現象は発生します。 互換モードだと表要素に親要素の指定が継承されない。 TransitionalはDOCTYPE宣言次第で互換にも標準にもなるはず。 URI部分を省略すると互換モード。
449 :
433 :03/05/02 17:22 ID:???
>>449 これからは質問する前に
>>4 のサイトで調べてね。
質問するときはブラウザ名とヴァージョンを書いてね。
>>439 .449
a#zzz:hoverはではダメポ
<a>要素はぺージ内に複数使用する可能性のあるものなので、
a.zzz:hover
「id」を使用するなら
>>434 のように特定のidに指定する。
>451 ん? 特定のa要素にだけ指定したいならidでも良いと思うが。 idでDOM操作してるかもしらんし。
>>452 全般的に考えて判断する。
まれに特定のケースやDOM操作はあると思うが、複数存在
するケースの方が一般的なわけで言ったんだけど?
>>449 はどういうケースかは分かりませんが
>453 433がidで質問してるんだから、idの指定の仕方で答えるのが普通じゃね? 普通はnameで指定するだろうし、もしかしたら433がidとnameを混同してるのかも知らんが とりあえずは聞かれた事に答えとけば良いのでは。
>>454 普通はnameか?(w
何を頭にきているのか知れないが、もう少しHTMLやCSSの動向を勉強してから答えてくれないかな?
a#zzz:hover を見ただけで普通はピンとくるもんだけどね
>455 あ、スマン、classの間違い。 頭に来ては居ないんだけど、433の質問に対する答えなら439で良いのでは、と思っただけよ。
◆セレクタ プチ講座 ※ id 一つの文書内に同一のid名を使用することは出来ない。 CSSのセレクタに限らず、link、scriptの参照にも利用される。 ※ class 一つの文書内に同一のclass名を複数使用することが出来ます。 スペースで区切ることで、同一要素の中に複数のclass名使用できる。 おもにCSSのセレクタとして利用します。 注意)両方ともhtmlとは違って、名前に使用する文字の、 大文字・小文字は区別されます。
>>457 へ? idもclassもCase-Sensitiveですが?
ただ、暇だったので書き込んだだけなんだけど
>>458 のような、アフォが居てビックリ ((((;゚Д゚)))
>>458 のブラウザか、パソコンがぶっ壊れていると思われ
>>451 わけわからん。 既出だけど、そこまでおせっかいになる必要もないだろう。
つーことで、余計なおせっかい。
a[class="ZZZ"]は a.ZZZ では完全に代替できない。
前者はclass="YYY ZZZ"にはマッチしない。
462 :
438 :03/05/02 20:48 ID:???
>>445-446 なるほど。互換モードで書いてました。
ありがとうございます。
バグや諸々考えていたら結構大変…
>>459 > 両方ともhtmlとは違って、名前に使用する文字の、
> 大文字・小文字は区別されます。
だからHTMLでもidやclassの大文字小文字は
区別されるだろうって言ってるの。
465 :
暇な人 :03/05/02 21:47 ID:???
なんかちょっと飯食ってる間にレスが
>>458 Case-Sensitiveを詳しく調べた方が今後のためにいいでしょう
>>464 勿論そうだよ。
疑問を抱く前に、質問する前に試したほうがいいよ
iframeでも2つ作って、id="main" id="MAIN" 個別に名前付けて
<a href="***.html" target="MAIN">どっちかな?</a>
でクリックしてみ?
> 両方ともhtmlとは違って 意味がわからん。 あんたの脳内で言う“html”って何なんだ?
467 :
暇な人 :03/05/02 22:04 ID:???
>>466 ああ、書き方悪かったかな? htmlのタグ類だよ
それぐらい解釈してほしいな(w
idをつかう意味がよくわからん。 一個使うときも複数使うときも、全部classでいい気がする。 なんでidを使うの?
classじゃ名前付けられないから
NN4.78ってbackground-color: transparent;の解釈ができないの? 真っ黒になる。
あぁ、何だ、「HTMLの」って要素名のことか。
足りない日本語で書いといて 「解釈してほしいな(w」ですか おめでてぇな
いちいちクソミソな物言いしてただけに、カコワルイ。
476 :
暇な人 :03/05/02 23:51 ID:???
>>473 ,474,475
暇だから相手してやっただけだよ
言葉尻とることより、css 勉強したほうがいいよ
それに釣られているオマイラって面白いね?
ありがとう、いい暇つぶしになったよ(w
とりあえず何で自分上位な喋り方なの?
476 名前:暇な人[sage] 投稿日:03/05/02 23:51 ID:???
>>473 ,474,475
暇だから相手してやっただけだよ
言葉尻とることより、css 勉強したほうがいいよ
それに釣られているオマイラって面白いね?
ありがとう、いい暇つぶしになったよ(w
>>478 はあまりに見事に厨の負け惜しみレスを再現してしまったため、
逆に釣れなかった好例。
はいはい、CSS 勉強しとくから日本語勉強してくださいね、と
釣られたお魚くん達がビクの中でもがいています
つまらん
483 :
Name_Not_Found :03/05/03 11:01 ID:TO1mBV/M
IDセレクタとCLASSセレクタの違いが分かりません。 #aaa { font-size:12pt } #bbb { font-color:red: font-size:12pt } これはダメでだけど、 .aaa { font-size:12pt } .bbb { font-color:red: font-size:12pt } これはいいってこと?
485 :
bloom :03/05/03 11:11 ID:tEYOWoFm
>483 HTMLの事をもう少し勉強した方が良い。 まあそれだけじゃ何のための質問スレなんだかって事で… IDはそれぞれの要素に固有の識別子をつける属性。 スクリプトなんかでアクセスする時に使ったりする。 固有だから、一つの文書内で別々の要素に同じIDは登場しない。 CLASSは、スタイルを指定するための属性。 スタイルのためにある属性なんで普通はこっちを使う。 ってか、なんでIDセレクタは特別扱いされてるんだろ? と書いてて疑問に思いますた。
(たまたま)ページ内で一回しか使われていないclassは 替わりにidを使っても良い(使うべきだ)。 などと勘違いしてる人が案外いるんだよなあ。
なんかIDに過剰反応しすぎ。特にGW入ってから。 散々既出なんだって、IDとclassは。 idを使わざるを得ない場面だってあるんだしさ。
489 :
Name_Not_Found :03/05/03 11:44 ID:TO1mBV/M
>>486 ごめん、やっぱり違いが分からん。
とりあえず、CLASSだけ使っときます。
向学心ゼロだな
491 :
Name_Not_Found :03/05/03 12:00 ID:TO1mBV/M
あーそうか。 CSSのためにしか使うつもりが無ければ、1個だろうが複数だろうがclassでいいわけだね。
んー。別にCSSのためにclassがあるわけじゃないんだけど。まあいいか。
494 :
Name_Not_Found :03/05/03 13:44 ID:78R2klUz
FAQだと思うんですがちょっと教えて。 今気がついたんだけど、俺のHTMLファイルに class=vhs と class="vhs" ってのが混在してるんだけど、"マークあり、なし、のどちらが正式 でしょうか?
>>487 うわ、あかんの?
一回しか使わんから、
まさに「使うべきだ」とか思って使ってた。
XHTMLの場合も?
>>494 なぜ仕樣書を讀まない? 屬性は" "で括るのが正式に決まってるだろ。
すげー旧字体だな
>>4 の「ブラウザによる振り分け」をみたのですが、
「IE5だけを除く」方法がわかりません。
>>4 で紹介されているサイトの方法をうまく組み合わせると
できるのかもしれませんが、そういった思考回路が発達していないのでわかりません。
先ほどもいろいろと試してみたのですが、頭が熱くなるだけです。
CGIやJavascriptによる振り分けを使うべきでしょうか。
499 :
483 :03/05/03 14:12 ID:TO1mBV/M
分かった! 下でいいの? #aaa { font-size:12pt } .bbb { font-color:red: font-size:12pt } ・ ・ ・ <div id="aaa">これはOKです。</div> <div id="aaa">2回目の呼び出しはダメです。</div> <div class="bbb">これはOKです。</div> <div class="bbb">これもOKです。</div>
500 :
494です :03/05/03 14:17 ID:78R2klUz
>>496 ありがとうございます!
でも混乱してきちゃった ・・・・
属性が英数字のみの時は ”は省略できるっていうのはHTML4.0のルールであって、
スタイルシートの仕様書ではそうゆう記述は無い、っていうことですか?
理屈っぽくてスマソ
>>498 除 IE3 & IE4 & IE5/6 & NC4
@import "N6+Opera.css" all;
で、IE5.5〜6向けには
<!--[if gte IE 5.5000 ]>
<LINK rel="stylesheet" type="text/css" href="ie5_5+.css">
<![endif]-->
IE3や4は相手にしなくてよいはず。
バグだらけのNC4にもCSSを適用させたいってことなら、もうJavaScript振分けしかない。
もともとネスケ4はJavaScriptを切るとスタイルシートも効かなくなるからいいだろ?
<script type="text/javascript" charset="Shift_JIS" src="javascript/nn4css.js"></script>
var StyleRt = Rt+'stylesheets/'; // 基準ディレクトリ
var ua = navigator.userAgent;
var NN4=(ua.indexOf("MSIE")==-1 && ua.indexOf("Mozilla/4")==0)?1:0;
var tag = '<LINK REL="stylesheet" TYPE="text/css" charset="Shift_jis" HREF="';
if( ua.indexOf("Opera")!=-1 || ua.indexOf("OmniWeb")!=-1){NN4 = false;};
/* Operaの偽称対策。またOmniWebもdocument.layersに対応してるので。*/
if(NN4)
{
var cssFile = "nn4.css";
/*ページ読込み後、ステイタス・バーに「ドキュメント:完了。」に代って注意書きを表示する*/
window.defaultStatus = "!表示が妙な場合スタイルシートを無効にしてご覧下さい!";
}
else var cssFile = "kara.css";/*中身の無い外部cssファイル*/
document.write(tag+StyleRt+cssFile+'">')
>>500 スタイルシートの仕様書は関係ない。
HTML4なら英数字だけなら省略可能ではあるが、省略は推奨されない。
XHTMLなら省略不可。
>>499 単純に考えてそういうこと
・id ---1ページに同じ名前は1回しか使えない。
・class --- 1ページに同じクラス名を何度でも使える。
id名とは、id属性の識別子
div#abc {・・・}
class名とは、class属性の値
div.abc {・・・} → div[class="abc"] と同様のこと
505 :
483 :03/05/03 14:38 ID:TO1mBV/M
>>501-504 お前ら奇跡的に親切ですね
めんどくせー質問と思って放置した自分が恥ずかしい
>>500 HTML4.xとは、〜HTML3.2からXHTMLに移行する段階の暫定バージョン
なので、Strict以外は、以前の互換性もやむおえず考慮されている部分もある。
そのことを理解すること。
>>499 私なら次のやうにするね。
.aaa, .bbb { font-size:110%;}/*文字サイズは絶対指定で固定しないこと*/
.bbb {font-color:red:}
#ccc {font-weight:bold;}
<div class="aaa">font-sizeは大きめ</div>
<div class="bbb">font-sizeは大きめで文字色は赤</div>
<div class="aaa" id="ccc">font-sizeは大きめでここだけ太字</div>
>>507 誤>やむおえず
正>やむをえず(止むを得ず)
510 :
483 :03/05/03 14:51 ID:TO1mBV/M
>>508 >/*文字サイズは絶対指定で固定しないこと*/
これはどういうことですか?
511 :
494・500です :03/05/03 14:53 ID:78R2klUz
>>502 >>504 たびたびありがとうございます!
" "でくくるのが正式、だが英数字のみであれば省略可、ということで了解
しますた。
いずれにしても、同一クラスで ""付きと""なしが混在してるのは寝覚めが
良くないので、TextSSでも使って""付きに一括置き換えることにします。
>>510 君が例に挙げてるフォントサイズの指定だと
一番利用者数の多いIEで文字サイズの変更ができない(やり方がとても大変)
ので避けたほうがよいという一般的な注意だと思われ
513 :
483 :03/05/03 15:01 ID:TO1mBV/M
>>512 そういうことか、サンクス。
早速、自分のホムペも直してきます。
フォントサイズを割合で指定するのは、一見親切のようで不親切 ブラウザやフォント等の環境の違いによって大きさがまちまちになる。 フォントサイズを実数値で指定していする場合は極端に小さなサイズに しないように心がければ問題はない。
517 :
498 :03/05/03 15:09 ID:???
>>503 嘘教えるな
>div.abc {・・・} → div[class="abc"] と同様
div[class~="abc"]
520 :
503 :03/05/03 15:28 ID:???
>>518 いや、div.abc ←→ div[class~=abc] だと思ふ。
つまりclass屬性値が複數併記の場合を考慮して「=」ではなく「~=」である譯でせう?
なんか旧仮名遣いな感じのヤシがいるな。
きっと昔の人なんだよ。
昔の人にしては最近の文化に詳しそうだな。 中の人も大変ですね。
なかのひとなぢいない
×なかのひとなぢいない ○なかのひとなどゐない
二番煎じはつまらん
旧字体ごときでがたがた騒ぐな。前からいただろうが。 古文でも漢文でもないんだからな。 GWは大変だなぁ。
GWの人などいない
>>518 嘘ではない、このシッタカ野郎
>div.abc {・・・} → div[class="abc"]
div.abc .xxx {・・・} のような場合を想定して、[class~="値"]と表す
IE無視で話が進められているのが素晴らしい
質問者にはお前のブラウザーを書け、と言うわりにはな
IEが属性セレクターに未対応ってのは既出だろ。
今の話の流れでわざわざ附記する必要あるかい?
>>534
CSS語るのに、糞IEなど関係ない
>>531 ""は
識別子に適合する属性値ならいらないし、
識別子に使えない文字が含まれてたらいる。
いつでも付けとけば間違いはない。
[class="foo"]はfooの完全一致だから、 <span class="foo bar">なんて指定の時に使えないんじゃなかったっけ?
生理中の女はお参りに行くものじゃない、 どうしても行かねばならないなら、正面からお参りするな、脇道から行け、 鳥居もくぐるなと明治生まれのばーちゃんはうるさかったです。
☆ チン マチクタビレタ〜
マチクタビレタ〜
☆ チン 〃 ∧_∧ / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
ヽ ___\(\・∀・) <
>>458 まだ〜?
\_/⊂ ⊂_ ) \_____________
/ ̄ ̄ ̄ ̄ ̄ ̄ /|
| ̄ ̄ ̄ ̄ ̄ ̄ ̄| |
| 愛媛みかん |/
もしちがってたら誘導していただけるとありがたいです scrollbarのスタイルシートが反映されないんですが 同じバージョンのIEでもmeだとOKで2000マシンだと だめなようです(たぶん) 何が考えられますでしょうか?
>>546 OSよりもIEのバージョンとDOCTYPEだと。
html{}とbody{}の違い。 IEの独自拡張だから、もちろんNS/Moz/Operaじゃダメですよん。
>>546 ではないけど便乗質問。
html要素にscrollbar-face-color等を指定すればIE6で効くのはわかりますが(標準/互換モードとも)、
IE5.5以前のヴァージョンではどうなりますか。
古いヴァージョン向けにはやはりbodyをセレクターとして指定しないと効きませんか。
独自拡張はウケ悪いよ
552 :
昔の人 :03/05/04 12:08 ID:???
>>546 Win2000はIE5、WinMeはIE5.5がデフォルトではなかったっけ?
scrollbar關係の獨自擴張はver.5.5からで、それ以前は未對應。
ウケ悪いっていうか、CSSじゃないだろ(w
>>553 ん? 独自拡張ではあっても、CascadingするStyleSheetですよ?
まあ見分けにくい色指定とかしなければ害のあるもんではないんだから、
規格外だからって目くぢら立てなさんな。
555 :
553 :03/05/04 12:27 ID:???
>>554 目くぢら立てなんて立ててないよ (´∀`)
Cascading StyleSheetのを利用したIEの機能と認識しているよ
誰かIE5.5持ってる人、
>>550 の質問に返答してやって下され。
htmlでもbodyでも効くよ(IE5.5)
たとえば p { color: #000000 text-align: center; } p.hoge { color: #ff0000 } としたばあい、 <p class="hoge">は色が赤で位置が真ん中になるのが正常な動きでしょうか。
文字の大きさは自己満足したい以外の場合は サイズを固定すべきではないんですよね? %で指定? 各フォームの大きさも、指定してはいけないの? テキストエリアとか、一行テキストとか。
>>558 正常。<p>が全て黒文字の横位置は中央寄せで
その中の class="hoge" に赤文字が追加される。
>>558 正確に言うと色が#FF0000で<p>の中のテキストが真中にくるのが正常な動き。
基本なので
>>4 のサイトで確認すべし。
>>559 一般的に文字サイズは相対指定したほうがユーザーに優しいしそれを勧めるけど、
最終的には自分で決めることだと思う。
フォーム自体の大きさはCSSじゃなくてHTML側で指定するものじゃないかな?
562 :
558 :03/05/04 15:22 ID:???
>>560-561 基本的なことはタグレベル(?)で指定して、
あとは個別にclassで指定しるってことですね。
わかりました。ありがとうございます。
>>549 実はOpera7は対応しちゃってる罠…
デフォルトでは効かないようになってるけど。
>>565 やったけど、スクロールバーの色は変化しなかったぞ。
C:\WINDOWS\Application Data\Opera\OPERA7\profile\opera6.ini だよな?
>>565 を実施しただけでは駄目。
どうやらOpera7ではIE6とは違ってhtmlではなくbodyをセレクタにしないと
scrollbar関係のスタイル指定は効かない模樣。
これってバグかなあ?
568 :
Name_Not_Found :03/05/05 12:22 ID:cgu0oOWB
二つのクラス p.size { font-size: 120% } p.red { font-color: red } を組合せて表現することはできますか? 要するに <p class="size"class="red">赤くて大きなフォント</p> こんな感じにして、サイズ120%、色・赤にできないかということです。
<p class="aaa bbb"></p>
571 :
Name_Not_Found :03/05/05 12:38 ID:cgu0oOWB
>568 HTMLで一つの要素に同じ属性を二回指定するのは間違い。 複数のクラスを指定したいなら>569のように半角スペースで区切って列記する。 ただIEが対応してなかったような…? Mozillaなら出来る。
574 :
568 :03/05/05 12:47 ID:cgu0oOWB
今試したら、
>>569 さんの記述でIEでもできました。
レスしてくださった人、サンクス。
>>572 font-color → color
ですね。
スマソ。
>568 もう来るなよ。
>>573 あんまりIEをあなどってくれるなよな。
複数classに未対応なのはNetscape4.xやIE4みたいな骨董品だけだろ。
>576 そうか、未対応なのはオレの頭の方だったらしい。 W3C逝って最新仕様に準拠してくる
IE5.0 Opera7 Netscape7でOKなんですけど XP+SP1のIE6で表示おかしいって感じで困ってるんですが そういうケースでも ここにソース書いて解決方法お尋ねしてもよいですか? a:HOVERのときに問題がおきるのです。
>>579 とりあえず書かないと誰にもわからないわな
581 :
579 :03/05/05 22:40 ID:???
すみません。ではソース貼らせていただきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd ">
<html><head>
<style type="text/css">
<!--
BODY{
color: #000000;
background-color:#ffffff;
}
a{
background:url("01.gif");
background-repeat:no-repeat;
color:#0055ff;
}
a:HOVER{
background:url("02.gif");
background-repeat:no-repeat;
color:#8800FF;
background-color:#FFFFFF;
}
.ch1{
width:100px;
}
.ch2{
background:url("03.gif");
background-repeat:repeat;
border-style:solid;
}
582 :
579 :03/05/05 22:40 ID:???
.ch3{ margin:10px; padding:10px; } --></style></head> <body> <div class="ch1"><div class="ch2"><div class="ch3"> <a href="1.htm">ここにマウスをあわせると</a> </div></div></div> <p>移動しちゃう</p> </body></html> ここから適当にCSS設定を省くと動作okなのですが 各CSS設定は必要なので困っています。
583 :
579 :03/05/05 22:46 ID:???
すいません、追記です。 各gif画像はなくても問題(マウスをあわせると下の<p>が移動してしまう)は 起きますのでそのままで問題動作の確認はできます。 .ch1{} とか .ch3{} を消すとOKだったりしますが 各要素は必要なんでどうしたらよいのかなぁ・・・と。 込みいった状況ですみません。
585 :
579 :03/05/06 00:23 ID:???
>584 ありがとうございます。 もうなんかIEがダメみたいですね。 スレ違いもどうもすみませんでした。
588 :
579 :03/05/06 08:42 ID:???
>>587 ありがとうございます。ちゃんとまとまっててすごいです。
余談ですが、cssで凝ったレイアウトを始めるとかなりの確率で
各ブラウザのバグに突き当たり嫌になってきました。
外枠だけでもテーブルレイアウト使いたくなります。
floatそのものも使いづらいし、float widthあたりはずいぶんバグが山積しているみたいですし。(´Д`;)
はやくMulti-column layoutが普及してほしいものです。
>IE使うのやめれば幸せになれる予感
うちの訪問者の9割はIEで、6割がIE6なんです。・゚・(ノД`)・゚・。
text-align を justify に指定したのですが、うまく効果が表れません。 text-justify も同時に指定するべきなのですか? IE の独自拡張だという文を読んだ気がするのですが……。
592 :
844 :03/05/07 06:35 ID:???
質問です。ブロック要素2つを並べて、回り込み解除から文章を続けたい時、 (↓こんな風に) ■■ 文章 <div style="float:left">■</div> <div style="float:left">■</div> <br style="clear:both"> 文章 で、あっていますか?それとも br..の部分は、 <div style="clear:both"></div> 文章 と、しなければならないのでしょうか?宜しくお願いします。
593 :
Name_Not_Found :03/05/07 06:58 ID:t7o3cWMN
>>592 問題なし。ただしIE5.01で(状況が悪ければ)問題を起こすかもしれない。
各ブラウザで完全に確認が取れないのなら、<div>を使ったほうが安全ではある。
594 :
__ :03/05/07 07:03 ID:???
スタイルシート切り替えスクリプトを利用しているのですが、 alternate stylesheetにCSSを追加した場合と、スクリプト内にCSSを追加した場合のMozillaの挙動の違いは何なのでしょうか。 要は、alternate stylesheetにCSSを追加したら、表示がバグりました。スクリプト内で追加すれば問題ないのですが・・・。 個人的には、Java Scriptを実行しないようにしている人にも変えられるようにしたいのですが・・・。
スタイルシート切り替えなんてただのウザいオナニー。 スタイルシートを扱うサイトなら別だが。 どうせ切り替えたってサイト全体のスタイルが切り替わるわけではなく、 そのページだけだろ? いちいちそんなめんどいことするか。 スクリプト切るやつ、あるいはおれのようにクッキー切るやつには 代替スタイルシートなんて文句なしに用なしだよ。ベストで勝負しろ。 と、苦情を申し立てた上でいえば、ネスケでは 代替スタイルシートは、表示>スタイルで切り替えられるんじゃ? おれは一度も切り替えたことはないが。
>>591 二つ使用する必要がある。IEの独自拡張だよ。
text-align: justify;
text-justify: inter-ideograph;
>596 敢えて漏れの意見を言わせてもらうならば、代替スタイルシートは 内容のためにサイトデザインを変更せざるを得ないページで使うものだと思う。 例えばデータ一覧表のページなんかで、一部環境ではサイトデザインが可読性を損ねる場合 そのページだけは代替スタイルでデータを見やすく出来るように、と。 こんな事考えながら作ってもIEじゃ簡単には切り替えられないんだがナー(´・ω・`)
>どうせ切り替えたってサイト全体のスタイルが切り替わるわけではなく、 >そのページだけだろ? >あるいはおれのようにクッキー切るやつには よくある「切り替えスクリプト」は「サイト全体のスタイルが切り替わる」。 そうでないのはお前がクッキー切ってるから。 「スタイルシート切り替え」の是非はともかく、 前提条件すらおかしい厨房はどっかいけ。
>>599 だからクッキー切ったりスクリプト切ったりする人間に
代替スタイルシートなんてのは文句なしに用なしだつーてんだろ?
日本語のわからんやつだな。いや、代替スタイルシートで恍惚と
自慰行為にふけってたのに邪魔されたんで逆鱗に触れたか。
まあ、悪かったよ。
>>598 それが本来の代替スタイルシートってもんだな。
…?
>>596 >どうせ切り替えたってサイト全体のスタイルが切り替わるわけではなく、
>そのページだけだろ?
この部分の説明キボンヌ
>601 a.htmlでスタイルを代替スタイルの方に切り替え ↓ b.htmlに移動する ↓ スタイルはデフォルトの方 ↓ ハァ? って事だと思われ。 確かに代替スタイルシートはあくまで補助的なもので サイトデザインを複数用意するためのものじゃないんだがな。
>>596 は
--------------------------------------------------------
a.htmlでスタイルを代替スタイルの方に切り替え
↓
b.htmlに移動する
↓
スタイルはデフォルトの方
↓
ハァ?
------------------------------------------
で、「スタイルシート切り替えスクリプト」ってムカツク
と思いました。
それで
>どうせ切り替えたってサイト全体のスタイルが切り替わるわけではなく、
>そのページだけだろ? いちいちそんなめんどいことするか。
>スクリプト切るやつ、あるいはおれのようにクッキー切るやつには
>代替スタイルシートなんて文句なしに用なしだよ。ベストで勝負しろ。
という発言になりました。
スクリプト切ってればスタイル変更できないだけだし、
べつにあるからといって邪魔するわけでもありません。
ただ、スクリプトONクッキーOFFの
>>596 切り替えたのにb.htmlに移動すると元に戻ってしまったので
頭にきたわけです。
馬の前に食べられないニンジンということか。 そりゃ馬もいらいらする罠w
つまり切り替え用意することに何も問題はないってことね
>605
切り替え用意するのは良いけど、
切り替えスクリプトだとスクリプトoffやクッキーoffの人が取り残され、
AlternateStyleSheetだとページ毎に切り替え作業が必要に、
と、あんまり良い事は無いと思いますた。
>>596 じゃないけど、漏れも自己満足の領域だと思いまつ。
うちのサイトからして自己満足だからなあ
>>608 違います。
通常の要素が <tag>内容</tag> という形で記述され、「内容」の部分が表示されるのに対し、
置換要素(replaced element)は、 「内容」の部分が表示されないで別のもの(画像や入力フォームなど)が表示されます。
img, object, inputなどがその代表です。
切り替えスクリプトは置いといて 代替スタイルいくつもあるところはHTML+CSSのいい手本になるはずだ しっかり分離が出来てるってことで でも例外も多そうだな。よく知らん
通常スタイルでフォントサイズを12px、代替スタイルに14pxのようにしているサイト見たことあるけど、 そこまでするくらいなら最初から相対指定にすればいいのにと思った。 ところで代替スタイルはそもそもユーザビリティ上げるためってのは同意だけど、 スタイルの見本市のようにいろんなデザイン用意してあるのもいいと思う。 サイトに遊びの要素があってもいいと思うし。
>>600 phpでやればクライアント側の設定(接続方法は除く)に関わらず、
代替のスタイルシートを選択する機構を構築する事は可能でつ。
>>610 島根県のサイトがいい感じだよな。
613 :
:03/05/07 18:09 ID:CPR2AsS1
http://web-ranking.net/ トップページはまだマシなんですが、総合得点ランキングなどのページでは、
右部の方が長いために、左側メニュー部の背景色が途中で切れてしまいます。
右部に合わせて、左部の背景も下にのばす方法ってないのでしょうか?
また、ページ最下部に、<HR>で区切り線を入れたいのですが、どのようにすれば
いいでしょうか?
よろしくお願いします。
>>613 一番はやいのが、縦数px程度のイメージ作って
body{
background-image:url("xxx.gif");
background-attachment:repeat-x;
}
のように縦リピートで貼付けて、<div class="top">はbackground-colorで色を
付けて背景を隠す。
615 :
614 :03/05/07 18:59 ID:???
代替スタイルシートの恩恵が受けられないのは ス切リボなどをつかうか、Moz等を使わないから悪いのだ。
617 :
613 :03/05/07 19:46 ID:CPR2AsS1
>>614 ども、ありがとうございます。試してみます。
div などのブロック要素の幅は,普通はコンテナブロックの幅と 同一になりますが,これを内部の文字列等の幅に合わせて縮めることは できないでしょうか.とりあえず ・ { white-space: nowrap; width: 1px; } のような指定をする. ・ table を使う. ・ width 指定なしの float を使う. ぐらいは考えたのですが,もっとスマートな方法は存在しないのでしょうか.
バカ
622 :
619 :03/05/08 00:07 ID:???
>>620 とすると,安全にやるとなれば table 使うより仕方ないんでしょうかね......
>私だったら
>min-width:1em; とします。
これはやってみると,何も指定しない時同様に横幅いっぱいになってしまうようです.
ネスケ7だと { display: table-cell } で一応意図したような表示になるのですが,
IEでは全然ダメなようですし.
float使わずにwidth指定なしでposition使う
インラインにすれば解決。
width:autoで出来なかったっけか
>>619 当該要素が内容にブロック要素を含まない場合、display : inline;で
意図通りの見た目を実現できると思いますが。
627 :
Name_Not_Found :03/05/08 02:49 ID:f50gscAv
質問。謎だ。IE5ではOKだったが、NN7で確認したら驚いた。
divで囲んだ要素を2つ並べた。普通に縦に。それだけ。
<div>文字</div>
<div>文字</div>
横幅を100%指定。IE5ではちゃんと画面一杯一杯の幅でborderの枠が表示。
サイズ変えても、それに応じて。なのに、NNではスクロールバーが出る。激しく横に伸びた枠…
そこで
>>5 な訳だが、文字数を「3文字」とかにしても、現象が変わらん。
計算方法の実装の違いを激しく超えてるような…。
ウィンドウサイズを変えてみると、スクロールバーの【余白部分】が一定なのも
激しく不気味なのだが…
スタイルは全て外部CSS<div class...>と関係ありますか?宜しく。
>>627 それだけじゃよくわからん。
せめて、そのdivに関するところだけでも、ソースさらせ。
>627 それだけじゃ判らん、該当するスタイルを書いてくれ。 あとWinかMacかも。 想像するに、 <div style="border:solid 1px #000;width:100%;">文字</div> <div style="border:solid 1px #000;width:100%;">文字</div> で横幅が変になるのか?
630 :
627 :03/05/08 03:44 ID:???
>>627 ソース。
>>628 違う。
Win98である。
<div class="box">短い文</div>
<div class="box">短い文</div>
で、CSSの方に
.box{width:100%;border:2px solid #cc33ff;color:#ffffff;
background-color:transparent;padding:2em;margin-bottom:60px;}
html-lint減点無し、CSS検証もエラー無しだったが。激しい勘違いをしてるのか俺は。
>630 width100%+左右のpadding4em+border4pxだからはみ出て当然。
632 :
630 :03/05/08 04:40 ID:???
>632
>>5 のQ1を理解してこいやモルァ!!
簡単にいえばwidthで指定する幅がborderやpadding(あとmargin)を含んでるWinIEが間違い。
widthの周りにpaddingが、その周りにborderが、さらにその周りにmarginがつくのが正しい。
上記ソースではbody要素の100%(表示域一杯)の幅+4emつくんだからはみ出て当然。
常に4emはみ出る事になる。
634 :
630 :03/05/08 05:49 ID:???
>>633 >モルア!! (((( ;゚Д゚)))ガクガクブルブル
素晴らしい説明だ633よ。
>>5 は何かドツボにはまり、全く解らなかった。何故だろう。
paddingではまってたのね。NNの実装が正しいのか…
問題解決(90%とか、全部の合計で考える)&動作確認OK。ありがとう633
黄金厨はいなくなったはずなのに・・・
636 :
Name_Not_Found :03/05/08 09:29 ID:FjGUpOsa
質問です。 「WEB標準普及プロジェクト」等を参考にしながら、 メニュー要素を<div class="menu">でfloat:leftに、 テキスト要素を<div class="main">でfloat:rightに、 幅はいずれも%指定で表示しました。 IE5.5、IE6、NN4.x、opela6いずれもだいたい意図どおり表示されました。 で、これをさらに<div class="all"></div>でくくり、 { margin-left:auto; margin-right:auto; width: 600px; } として画面左右中央に持ってきました。 IEでは意図どおり全体が中央に配置されますが、 NN4.xやopela6では中央に来てくれません。 <div class="all">の親要素はbodyでmarginは0指定しています。 もしかして根本から間違っているのでしょうか?
>>636 .all { position: relative; }
でどう?
>636 とりあえず、NN4.xはどうなんだろう… NN6以降ではどうなの? あと、Ope"r"aね。 で、NN7ではちゃんと真ん中に表示されたよ。 ソースはっとく。 <html><head> <style> .left{float:left;width:40%;background:#0ff;} .right{float:right;width:60%;background:#ff0;} .all{margin-left:auto;margin-right:auto;width:600px;border:solid 1px #000;} </style> </head><body> <div class="all"> <div class="left">左</div> <div class="right">右</div> <br style="clear:both"> </div> </body></html>
639 :
636 :03/05/08 15:09 ID:???
>637 ありがとう。やってみましたが同じでした。 bodyのmarginが0なのでNN、Operaともぴったり左上寄せになるのです。 >638 ソースそのままで試すとOpera(スペルミスすいません)でも きちんと中央に来ました! <br style="clear:both">が抜けていたせいのようです。 floatした場合はこれで必ず解除しないとダメなんですね。 NNの入っているマシンが今日はもう使えないので、 NNでの確認はまだですが、何とかなりそうです。 ありがとうございました!
>>639 浮動させた要素は通常のフローから除外されるってことを理解して下さい。
div#allの中にフロートさせた要素しか入ってなければ、それは何も入ってないのと同じなのです。
だから<br style="clear:both">なり何なり他の浮動しない要素を含ませるわけで。
widthの解釈って、Opera7もIE6と同じですよね。
>>633 のように、Operaも間違ってるの?
今まで幅を%で指定したい場合は、width:80%;と指定し、さらにmax-width:60%;などと併記して
IE6とN7で同じような幅で表示されるようにしてました。
ところが、Opera7はmax-widthにも対応してるので、この方法だと縮みすぎてしまうのです。
何かうまい方法ないかな、と思うのですが、もうこのやり方自体が駄目駄目ですか?
要は、widthを%で指定する場合、paddingなどがあっても
IE6、N7、Opera7で見た目同じ幅で表示させたい、ということです。
paddingがせまければ、FAQの中央寄せのやり方でも、たいした差はないので気にならないのですが、
デザイン上paddingを大きくとった時、やっぱり幅の差が出てしまうので。
>>641 >widthの解釈って、Opera7もIE6と同じですよね
いいえ、ちがひます。
>要は、widthを%で指定する場合、paddingなどがあっても
>IE6、N7、Opera7で見た目同じ幅で表示させたい、ということです。
ならばIE6を標準モードで解釈させなさい。
643 :
Name_Not_Found :03/05/08 21:34 ID:F5r4R1P0
<div class="width:100px; height:100px;"> <p>2ちゃん</p> </div> で、ブロックのど真ん中に表示させるもっとも簡単な方法はなによ? vertical-align使えないとなると面倒この上ないな。 やれやれ、 W3Cは融通が利かないからいつまでたっても相手にされないんだな。
>>643 vertical-alignのことをわかってない人、発見。
valign属性の代りではないんだよ。
いや、釣りですか? スゴイclass名ですねえ。
>class="width:100px; height:100px;">
645 :
641 :03/05/08 21:45 ID:???
>>642 あー、互換モードでやってました。
互換モードだと、Opera7とIE6のwidthの表示が同じになるんですけど。
(widthがpadding込みになる)
>ならばIE6を標準モードで解釈させなさい。
ソレダ!
なんでだか分からんけど、標準モードって難しいような気がしてたので、
標準モード使うなんて考えもしなかったです。
さっそくソースの見直しだ。ありがとん
>>642
>>643 すごい!そんなCSSって何処で学んだの?
647 :
Name_Not_Found :03/05/08 21:48 ID:F5r4R1P0
>>644 つまらん揚げ足取りしか言えんのか。おまえは。
vertical-alignが使えりゃ、体感的に分かりやすいのにと
嘆いているんだろうが。テーブルレイアウトならさくっとできることも
満足にできないような仕様だから、いつまで経ってもオタク以外は
だれも支持してくれないのよ。
>>647 >vertical-alignが使えりゃ、
使用できますよ? でもvalignとは別の機能を果すものなんだけど。
vertical-alignは行ボックス内における、インラインボックスの垂直方向の位置を指定するプロパティです。
>>647 >テーブルレイアウトならさくっとできることも満足にできない
CSSでもさくっとできますよ。
IEがそれに対応していない(する気がない)だけの話です。
>>643 div p {
text-align:center;
margin-top:50%;/*50px*/
}
でええやんけ。
>>647 >いつまで経ってもオタク以外はだれも支持してくれないのよ。
( ´,_ゝ`)プッ 史ね�
652 :
Name_Not_Found :03/05/08 21:59 ID:F5r4R1P0
>>648 おぉ、揚げ足取りじゃないまともな反応が。。
インラインボックスの垂直方向は分かるが、
ブロック要素で縦中央にしたいわけよ。heightを指定してりゃ
中央なんて簡単に出せるんだからインラインに限らなくてもよさそうなもの。
結局むりやりインラインにするしかないのか。結局それが一番簡単なのか。
ID:F5r4R1P0よ、言葉は正確に使ってくれたまへ。 あれではvertical-alignとvalignの差もわからぬ馬鹿としか見えない。
>>652 上下に、paddingとればいいだけだろ
655 :
Name_Not_Found :03/05/08 22:07 ID:F5r4R1P0
>>650 まあそうだな。できれば
垂直中央をひとまとめに指定できればうれしかったのだが、
あきらめてひとつひとつ指定することにするよ。
W3C厨もうざいが、 それにもまして コイツ ID:F5r4R1P0 は最悪。 人間のカス。氏んでいいよ。
画像画像画像 文章 画像画像画像 文章 画像画像画像 文章 画像画像画像 文章 文章 文章 画像にfloat:left;を指定して文章を回り込みさせているのですが, 画像の下端が来た時点で回り込みが終了してしまいます。 上の図のように回りこませる文章の左端が揃うようにしたいのですが, どうすればいいのでしょうか?
>>658 右側のもdivで括ってflortを指定すればできるよ
660 :
658 :03/05/09 00:28 ID:???
>>659 盲点でした…
ありがとうございました。
自分たちが正しいと信じ込んでいますね。
そのようです。
>661=>662=F5r4R1P0
664 :
Name_Not_Found :03/05/09 01:52 ID:zMQHPqPW
>661=>662=F5r4R1P0 =>664 しつこいな
つか656まででいいんだよな。 657以下は無駄。
>>666 以下って、質問とその回答と自演デムパしかないぞ?どれを指してるの?
ID:F5r4R1P0 は最悪。
669 :
Name_Not_Found :03/05/09 15:45 ID:ftTrsNwc
フォームのドロップダウンリストボックスに表示する件数を制御する方法はありますか? <SELECT>〜</SELECT>です。最大で11件しか表示されません。 よろしくお願いします。
ID:F5r4R1P0みたいな、自分が無知な(スキルがない)ことを CSSのせいにする香具師が一番 最悪。
昼間は雰囲気悪いな。
hn や p タグの最初の文字だけに装飾を施す、などはできますか? 文字色を変えたりサイズを多少大きくするようなことができればよいのですが。
>>674 hn:first-letter などでよいのでしょうか。
>>675 よい
基本解説サイトくらいは舐めるように見とくとよろし
>>674 ,676
偉そうに・・・
それぐらい、すんなりとでないのか?(蛸
煽っても何も出んよ
ちょっと調べたらすぐわかるじゃん
「できる?」と聞かれて「できる」と答えるのは正しい。
681 :
Name_Not_Found :03/05/11 01:51 ID:5vQM/Zdq
質問です。 1.外部CSSを用いていますが、属性によってはbody内に記述したほうが 良いものがあったりする場合があるらしいんですけど、 (UAの実装上の理由で)どんなものがあるのでしょうか? 2.黄金厨って、なんですか? 宜しく。
>2.黄金厨って、なんですか? おまえみたいなやつのこと
インラインフレームやフレームはありですか?なしですか?
>>683 さあ?
そういう質問の仕方はなしってのはわかりますけどね
>>684 つまんない奴だな。
お前には用はないよ。
>>684 ではないけど
おまえおもしろいやつだなw
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
・基礎は解説サイト(
>>4 ・かなりわかりやすい)で勉強してください。
・質問の前に【FAQ】(
>>5-7 )を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
【解説など】(
>>4 )の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。
初心者の疑問は大抵ここまでで解決します。
・OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは?」と求められたら応じませう。
その方が回答が早く得られます。
688 :
昔の人 :03/05/11 09:53 ID:???
>>681 >属性によってはbody内に記述したほうが
>良いものがあったりする
初耳ですな。そんなのがあったらこちらが教へて貰ひたいものです。
昔の人も大変だな。
IE3でbackgroundは文書内に書いておかないとダメだった気がする。 つーかそんなことまで気にするならCSSなんて使わない方が。
>>690 そんなことまでして、IE3を使うことをやめて下さい。
頭悪いんか?
すみません。ちょいと質問っす。 CSSがオフでは文字列のみが表示されて、 オンの時にはその文字列の代わりに、 画像のみが表示されるようにするのは可能ですか? 可能なら、どのように書けばいいんでしょうか?
>>692 たとえば、CSSがオンの環境では画像でロゴを表示したいが、
オフの環境では文字列を表示したい、というような場合ならば、
h1 {
width : 100px; /* 画像の幅 */
height : 200px; /* 画像の高さ */
background-image : url(xxx.png); /* 使いたい画像 */
background-repeat : no-repeat;
font-size : small; /* 目立ちにくいように小さめのサイズを指定 */
color : white; /* 画像全体の色調に近い色 */
background-color : black;
/* 画像オフの環境でも読めるように、文字色とは異なる色を指定 */
}
とかで、どうだろう。
文字サイズは、xx-smallとか0.1emなどといった風に、極端に小さくした方が
目立ちにくく、CSS有効な環境では画像の邪魔にならないが、「CSSは有効だが
画像は非表示」という環境のことも考慮して、あまり小さくしすぎない方が
よいと思う。
>>692 こんなのとかどうでしょう。
div { background-image: url"画像のパス"; height: 50px; width: 100px; }
h1 { display: none;}
<div><h1>たいとる</h1></div>
696 :
695 :03/05/11 23:40 ID:???
"画像のパス"にカッコが抜けてた。
>>692 表示したくない文字列をspanとかで括って
visibilityプロパティで操作するのもありかもね
ちなみにこの場合だと非表示分も空間が空けられる
(
>>695 の場合だと非表示分の空間は詰められる)ので
使い分ければいいよ。
他にもいろいろやりようはありそう。
某ブラウザが対応してさえいれば擬似要素で決まりなのだけどな。
700 :
692 :03/05/11 23:59 ID:???
>>694-697 おかげで解決しますた。
いくら感謝しても感謝し足りないくらいっす。
ホント、ありがとう(涙
>>695-697 display : noneやvisibility : hiddenを使うと、「CSSは有効だが画像は
非表示」の環境で情報が伝わらなくなる(文字列も画像も表示されない)
ので、あまりおすすめできない。
702 :
Name_Not_Found :03/05/12 01:09 ID:F77kHtUs
質問です。 画像を非表示に設定する人のことも考えて設計すべきなんですか? 非表示にする理由が解らないのですけど、何故でしょうか?
703 :
動画直リン :03/05/12 01:11 ID:vHELmxKt
>>702 1回線が細いから。
2テキスト情報のみ求めてるから。
3うっかり精神的ブラクラ踏むのが怖いから。
1と2は割といそう。
CSSを使う気があるなら代替スタイルで画像あまりつかわないスタイルも用意するとか。
レベルの高いサイトは画像切ってもそれなりになるように設計されてたりするけどね。
>「CSSは有効だが画像は非表示」の環境 そんなアタマおかしいヤシは虫。
漏れのサイト画像切っても全然問題ないけど、 CSS 切ると結構ヤバイかもなぁ。
>>702 テキストブラウザ等だけでなく、IEやネスケ等の「ふつうのブラウザ」を
使っている人の中にも、
>>704 のような理由で画像をオフにしといて、解説や
代替テキストによって興味をひかれたものだけ手動で表示してる人もいる。
(ブロードバンドが普及してきたから、減少傾向にはあると思うけど)
だから、HTMLだけでなく、CSSも、画像非表示の環境を考慮した方が無難。
>>706 論理マークアップすれば問題ない筈です。
漏れのサイトはそもそもが写真サイトなんで画像切ってるヤシのことなんて考えない。 テキストサイトだったら考えてもいいのだろうが。
ええと、「画像オフの環境を考慮すべきか否か」とか、そういう議論はよそで やってね。 ここは質問スレなので。
>>708 そういう人がいることを考慮するのが必要なのかはさておき
そんなのは1万人に1人もいない。
しかもそれはブラウザの設定の問題で、それを考慮するのと
携帯などで見る人も考慮するのでは
意味合いが全くちがう。
W3C的にはおなじなんだろうけどさ。
>712 統計でも取ったの? そうでなきゃ「一万人に一人」なんて断言しないで欲しい。
>>712 一例ですが、私はADSLだけど画像オフ。自サイトはCSS使用しまくり。
ダイヤルアップの頃はそこそこいた気もするけどね。
テーブルの枠線について質問です。 body{background-color:#fff;color:#f00} table{background-color:#f00} td{background-color:#fff} <table cellspacing="1"> <tr> <td>品名</td><td>価格</td><td>説明</td> </tr> <tr> <td>品名</td><td>価格</td><td>説明</td> </tr> </table> 通常テーブルはそれぞれのセルが枠で囲われるため二重線のようになってしまうのですが これを一本の線で表示させるために、このような方法を取っています。 これは適当でしょうか?もっと適切な方法があったら、ご指導をお願いします。
オペラも対応してる
>717 NN6相手なら border-spacing:0px; で見た目は同じに出来る。 ピンポイントな対応だけど両方書いとけば良いかと
721 :
Name_Not_Found :03/05/12 21:32 ID:WSwvyp6t
<html> <head> <title>photo</title> <style TYPE="text/css"> <!-- a:link{color:ffffff} a:visited{color:ffffff} a:hover{color:ffffff} a:sctive{color:ffffff} --> </style> </head> <body> <a HREF="javascript:window.close()" title="ウィンドウを閉じます"><img SRC="close.png"></a> </body> </html> リンクの色を指定しているのに画像だとリンクの色がデフォルトのままです。 どうしたら変わりますか?
>>721 色がついているのは何か、それを考えてみましょう。
そう、色がついているのは画像のボーダーです。
したがって、
a img{
border-color : ffffff;
}
でOKです。
a img{ border-color : #ffffff; }
724 :
722 :03/05/12 22:12 ID:???
725 :
717 :03/05/13 10:36 ID:???
>>718-720 あ、だいたい思い通りになりました。
ちょっと手直しして使えそうです。
ありがとうございました。
>>705 img {display:none;}
>>726 で思い出したけど、Sleipnirとか使ってるとよくやる<CSS有効で画像非表示
プニル? ('A`)イラネ
大抵のタブブラウザはワンクリックで画像のON/OFFできるだろ
>722 border:none;で良いような。
>>730 言うか言うまいか迷ってた。
でも質問者はボーダーなくしたいとは言ってないしなぁ、とか。
それ以前に既読も未読も同じ色ってのは糞
それ以前に糞って言い始める奴が糞
それ以前に糞って言い始める奴が糞って言い始める奴が糞
それでも既読も未読も同じ色ってのは糞
736 :
bloom :03/05/14 23:11 ID:DZwRSDjG
まぁ正直どっちでもいいんだけどね
よくねえよっ
なんか粘着がいるな。 既読も未読も同じ色って不便そうかもしれんが それもサイトによるだろ。
まぁそれぞれやりたいようにやってくれ。次ドゾ。
↑自分ではなにもしないヤシ
742 :
Name_Not_Found :03/05/15 02:44 ID:eAe/KMBQ
{border-width: 5px 1px; border-color: black gray; border-style: solid;} を、borderの重複を避けて一括表示ってできないのですか?
744 :
Name_Not_Found :03/05/15 05:34 ID:nba0rtaQ
border:1px solid #000; サイズ スタイル 色
>>739 > それもサイトによるだろ。
よらねえよばか
スレの流れにもにょりーた
だから既読も何も同じでいいよ そんなとこ誰も行かねーからよ
このスレは我々【死ぬ死ぬ団】が制圧した。 団員に加わりたい者は死ぬ気で戦え。 総指揮官プセ淫。
↓山崎で大いに和んでスレ沈静化
hr 水平線の縦位置を上端にする方法教えて ──── これを  ̄ ̄ ̄ ̄ こんなふうに
756 :
754 :03/05/15 15:04 ID:???
リンクのtarget属性をCSSで設定するにはどうすればよいのでしょうか(TT)
age
>>757 できません。JavaScriptでやって下さい。
老婆心ながら、窓を無闇に開かせると嫌がられることがありますよ。
760 :
757 :03/05/15 16:48 ID:???
>>759 java使わないと無理なんですね、ありがとうございます。
画像は別窓で開いたほうがいいかなとおもいまして
>>760 X java使わないと無理なんですね
○java script 使わないと無理なんですね
Javaと、JavaScriptは別物
762 :
757 :03/05/15 16:57 ID:???
>>761 間違えました、吸いませんでしたm(_)m
764 :
Name_Not_Found :03/05/15 17:09 ID:aOJm2fAs
tableのalignをCSSで書くとどうなるのですか? table< align = "center" > これをCSSで。
766 :
Name_Not_Found :03/05/15 17:14 ID:aOJm2fAs
ミスった。 <table align = "center" >
>>766 慌てるでない。なぜFAQを見ぬのか。
table {
margin-left:auto;margin-right:auto;
text-align:center;/*WinIE互換モード対策*/
}
td {text-align:left;}/WinIE互換モード対策*/
769 :
Name_Not_Found :03/05/15 17:40 ID:aOJm2fAs
770 :
_ :03/05/15 17:43 ID:???
>>771 少なくともそれは人それぞれの問題じゃないと思うぞ
javascript無しでは見られないのは致命的だと思うぞ
タブで移動しキープレスでリンク移動する香具師なんて 知ったことではないということ。 >>javascript無しでは見られないのは致命的 というのは同感。
>>774 俺はそれすげー不便。ちったぁ見る人のことを考慮してくれ。
てめぇの自分勝手な都合で直感に反する動作(マウスとキーボードで動作が違う)が
起こる記述をしないでくれ。
窓が開く時点でウザいんだけどな。
スレ違いスマソ
>タブで移動しキープレスでリンク移動する香具師なんて >知ったことではないということ。 ( ´,_ゝ`)プ
いいんじゃないの 自分の常識に当てはまらない奴なんかシラネーヨってスタンスなんでしょう 人それぞれってのはそういう意味かと まあ糞ガキの理屈だがナー
contentで、「/*」「*/」をつけたいときに、 どう記述すればよいんでしょうか hoge:before{content:"/*";} hoge:after{content:"*/"} ではマズイですよね・・・?
>>778 ""で括ってるから大丈夫だろ
つか聞く前にやってみんかい
781 :
778 :03/05/16 01:18 ID:???
>>779-780 ありがとうございます。
以前やってみたときに、Operaは普通に表示されて、
Mozillaでは無視されたことがあって、
駄目なのかなと思ってたんですが、
今やったらMozillaでも表示されてました・・・
どうもすみません、ありがとうございました。
IE5.0以降で見てくださいね。 というページがよくあります。 するとお前らは文句たらたらいうわけです。毒電波満載で。 別に個人の自由だろ。だったら見るな! もちろんいろんな環境でみれるようにValid+CSSでやるのもいいだろうし それもまた自由。
IE5以降なんかで見たらスカラー波の餌食ですよ
>>782 藻前の理屈でいうと、駄目サイトに対して文句を言うのも
個人の自由だろ。ばーか。
昨夜あたりから香ばしいのが一人紛れ込んでるな
いや、いい香りだよ。
まーあれだ 2chでほえてろ馬鹿が。 どーせこんなとこでしか吠えられねーんだからなw
>>784 まーあれだ
2chでほえてろ馬鹿が。
どーせこんなとこでしか吠えられねーんだからなw
>>784 まーあれだ
2chでほえてろ馬鹿が。
どーせこんなとこでしか吠えられねーんだからなw
自由だかなんだか知らんが、NN4.xやIE4ならいざ知らず それ以降のブラウザ全てで意図した表示に出来ないのははっきり言って未熟。 オーサリングツール使ってIE対象のヘチョいページ作って満足してろってこった。
>>791 WinIEは5.5以降でないと真価を発揮できない。
5.0まではインライン要素へのborder指定に対応してくれないから。
5.5以降ならそんなに不足を感じない。
IE5.5なんてダメダメもいいとこじゃん
>>792 ,793
WinIEなんて6でも、ダメダメじゃん
CSS語るなよ
そもそもCSSを語るスレではないわけだが
お前ら、ここは質問スレです。
797 :
初心者 :03/05/16 18:33 ID:wEF+SSgr
結局IEとNNとモジラとオペラに対応してれいいんでつか?
798 :
初心者 :03/05/16 18:34 ID:/KWm9G6R
あ、最新の、です
何が、が抜けてるわけだが。
ば
か
MozillaとOpera(最近の)はかなり高い互換性があるから トリッキーなことをあまりしなければ、実際のところほとんど 仕様に促した記述 と IEでの表示 の折り合いをつける作業になると思ふ。
>>802 互換性というか、CSS2を素直に解釈しているだけ。
IEのようなシェアを翳しあげて好き放題にやっているブラウザは
使用しない方がいい。
と思うんだけど
804 :
Name_Not_Found :03/05/16 19:25 ID:LeOeqJaX
インラインフレームで中に表示するHTMLファイルの HEAD内にインラインフレームのスクロールバーの色を変えようと 下記を記述したのですが適用されません(スクロールバーの部分のみ) <style type="text/css"> <!-- div.box{ position:absolute; } --> <!-- body { scrollbar-arrow-color:#000000; scrollbar-3dlight-color:#605CA8; scrollbar-shadow-color:#000000; scrollbar-darkshadow-color:#1B1464; scrollbar-face-color:#342E8B; scrollbar-track-color:#070250; scrollbar-highlight-color:#8D89D3; } --> <!-- body { background:#605CA8; font-size:12px; margin: 0px; padding: 0px; } --> </style> 他のスクロールバーは変わるんですが・・・・。
>>804 IEのみでしか解釈されない、scrollbar-....などは
使用しない方がいい
>>804 iflame{scrollbar:unko;}
iframeか。
808 :
804 :03/05/16 19:38 ID:???
>>806 ワロタ・・・・。
色変えは使わない方がいいんですね。
わかりました。やめておきます。
ありがとうございました。
>>808 見づらい色でなければ別に使ってもいいんだけど。
IE以外では適用されないだけで害は無いし。
( ゚Д゚)ハァ?まいっか。
>>803 はげど。
IEはwidthなんかもバグがあるし、Opera/Mozあたりで
チェックしとけばいいよな。
Opera/Mozあたりでうまくできていれば、大抵IEでもそこそこうまくいっている。
>>804 scrollbar関係の独自拡張プロパティーは、bodyではなくhtmlに指定した方がいい。
でないと標準準拠モードで効かなくなるよ。これ既出。
overflow等でブロック要素にスクロール・バーを出す場合などは、
そのブロックに対して指定する。継承しないからね。
>>811 >Opera/Mozあたりでうまくできていれば、大抵IEでもそこそこうまくいっている。
但し、条件がつくけどね。
子供セレクタ、隣接セレクタ、属性セレクタを使用しないこと。
contentプロパティに頼らないこと。
大体、Win IEなんてWebアプリの粗大ゴミ & 寄生虫 使うな
いくら吠えても無駄
>>816 「赤信号、みんなで渡れば怖くない」
そんな、アフォ連中ってことですか?
赤信号ですか。頭大丈夫?
ハイ質問を、どうぞ。 ↓
代々木上原から武蔵野台まで行きたいのですがどうやっていくのが一番早いですか?
823 :
Name_Not_Found :03/05/17 00:02 ID:elUgOg9W
質問ですが、ボックスを表示さすときに、テキストの周りにボックスを表示させるのではなくて、 ボックスの中に自由にテキストを表示したいんですが、CSSでそのようなレイアウトにするには どうしたらよいでしょうか。テーブルは使いたくありません。どなたか教えてください。
ボックスって何のこと言ってるの?
>>823 うまく言葉で表現できないなら、AAで示すか、
テーブルレイアウトだとこうやってできるやつって言ってくれると解決しやすいです。
blockとinlineの違いのことなのだろうか
borderとテキストの距離ならpaddingで調節する。
>>823
>>828 borderの幅と高さってどうやって指定するんですか?
>>829 すまん。divかなんかでボーダーでくくって、そのサイズを指定、だな。ボケてたわ。
<table > <tr><td style="font-size:10px"> ほげ </td></tr> </table> とか、 <table style="font-size:10px"> <tr><td> ほげ </td></tr> </table> は、CSS効くのに、 <div style="font-size:10px"> <table > <tr><td> ほげ </td></tr> </table> </div> が効かないのなんででしょう
>>831 ボックス内に指定した内容は、テーブル内に継承しないから。
833 :
Name_Not_Found :03/05/17 08:08 ID:fqk9w9au
834 :
831 :03/05/17 08:13 ID:???
>831のような現象を回避する方法として、 テーブル外のテキストとテーブル内のテキストのサイズをあわせるために 以下のように指定することは規格に反しますか? <table > <tr><td><p style="font-size:10px"> ほげ</p> </td></tr> </table> <p>のstyleはhead内、あるいは外部cssで指定済み
>>835 構わないよ。
HTMLの話はスレ違いだけどな。
>>834 バグだってば。仕様書には継承されるって書いてある。
>>835 pとtableに同じスタイルを指定すればtd内をpで囲む必要はないんじゃない?
>>831 ,832,835
どこの糞ブラウザ使ってんのよ(w
>>837 ブラウザのスタイルシートでtd{font-size:small}
がデフォルトスタイルになってるだけだろ。
なんでもかんでもバグにするな。
>>839 マジで? そういう解釈もできるとかじゃなく?
>>839 だから、User agentのデフォルトスタイルがauthorスタイル
よりも優先順位が高くなってしまっているんだから「明確にバグ」。
定義リストでよくある ○○………コメント ●●●……コメント ↑ この可変のリードを実現したいんです。 一応<dt><span>●●●</span></dt>でdtにwidthおよびfloatを指定した上で 背景画像としてリードの『…』を設定、 spanで囲まれている部分だけ画像が隠れるように背景色を設定して 実現できたことはできたんですが、もっとスマートにやれる方法はないでしょうか。 :afterとかでできそうな気もするんですが……。
>843 最初何言ってるのか判らなかった… うーん、無いんじゃない? positionで重ね、z-indexで隠し、くらいしか思いつかない。 expression(だっけ?)使えばスマートになるのかも知れないけど。
<dt>●●●……</dt>ではあかんのか
846 :
839 :03/05/17 17:43 ID:???
>>842 ハァ?継承の概念わかってますか?
あんたの言ってることは
「body{font-style:normal}にしたのに
iとかemでデフォルトスタイルが優先されて斜体になってしまうのでバグだ」
と言う事と同じだ。
>>843 dd {
margin-left:hoge;
display:list-item;
list-style-image:url("hoge.gif");
}
は?
なんにしてもIEが糞ってことに変わりない。 M$信者(839=846)は必死になっているが。
IEがどうとかはさておいて、
>>839 の説は面白いな。
ひょっとしたらbody要素にもfont-size:smallが指定してあるのかも、と思って
html要素にfont-sizeを指定したらしっかり継承されちゃいますた
>>849 禿道、糞なIEしか知らないが為、間違ったモノが身に付いて
しまっているようですね?
851 :
Name_Not_Found :03/05/17 23:23 ID:1tyqJGgo
>>849 > ひょっとしたらbody要素にもfont-size:smallが指定してあるのかも、と思って
バッカじゃねーの
低脳すぎ
>>831 そもそもpx単位でfont-sizeを指定しなければよいのだ。そしたらバグも起こらない。
emと%だよ、やっぱり。
ul{list-style-image:url(URI);} li{text-align:right;} Opera7.10なんかでマークがついてこないのはバグでしょうか 既出ならスマソ
>>853 バグっぽいですね。
ちなみにOpera6では再現しません。
>>853 ,854,855
って、いうか各リストに表示したいなら、
li {
list-style-image:url(URI);
text-align:right;
}
もしくは<ul>のみ表示されるには
ul{
display:list-item;
list-style-image:url(URI);
}
li{
text-align:right;
list-style:none;
}
こうだけどな
バグ以前の問題だけどな(w
独自拡張を使うと、W3CのValidatorではエラーが出るんでしょうか?
>>859 試せばすぐわかることをなぜ訊くの? 出るよ。
861 :
856 :03/05/18 18:25 ID:???
>>857 自分への問いかけ?(w
<li>表示したければlist-style:noneを消せば良い。
つまり、<ul>にはリスト用のボックスがないので、display:list-item;で
リスト用のボックスを生成させてlist-style-imageを指定するってこと。
<ul>に何も表示されないのではなくて隠れているのでmargin付ければでる。
意味分かるか?
言ってる意味がよくわからないのは僕だけでしょうか?
>>856 何でそんな面倒臭いことするの?
ul li {
list-style-image:url(URI);
text-align:right;
}
で充分じゃん(w
864 :
856 :03/05/18 18:54 ID:???
>>862 .863
20pxぐらいの mark_ul.gif・mark_li.gifを用意してやってみな
ul {
border:red thin solid;
display:list-item;
list-style-image:url(mark_ul.gif);
margin-left:30px;
}
li {
list-style-image:url(mark_li.gif);
border:blue thin solid;
margin-left:30px;
}
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
865 :
856 :03/05/18 18:59 ID:???
>>863 一見それでいいようだけど、<ul><dl><ol>はブラウザによって
初期値が違うんだよね、バグじゃないよ
初期値違ってもmarginとpadding指定してやればそんな面倒なことする必要ないんじゃ?
>>866 まったく意味がわかってない香具師
アフォだな
868 :
昔の人 :03/05/18 21:29 ID:???
>>856 は根本的に勘違ひをしてゐませんか。
>つまり、<ul>にはリスト用のボックスがないので、display:list-item;で
>リスト用のボックスを生成させてlist-style-imageを指定するってこと。
そんな「<ul>のみ表示される」なんてこと、
質問者(
>>853 )が求めてゐたとは思へないんですが。
tableタグにfilter:alpha をつけて表を半透明化させたのですが、 その表の中の画像だけ透明化をきりたいので、IMGタグの中にfilter:alpha(opacity=100)と記述したのですが半透明なままです。 画像のみ半透明をきることは不可能なのでしょうか?
んなもんMSに聞け
871 :
856 :03/05/18 21:53 ID:???
>>868 オマエも解ってないな?
<ul>のみに表示させるっていうより、基本的にいえば<ul>にlist-style-image
を指定することは、Strictじゃないわけで、あえて表示させるなら...
ってことで説明してやたんだけど?
<ul>にlist-style-imageしたところで継承の関係で<li>のマーカーとして
表示されているだけで、実際のところは、
>>853 はどういう風に要素に対して
マーカーを表示させたいのかは知らないし、どうでもいいことなんだけどな。
>>869 そんなモノ使用するのやめる
最近は糞なWinIEのせいで勘違いしている香具師が増えてきたね?
873 :
昔の人 :03/05/18 22:04 ID:???
>>871 偉ぶってウソ説かれたら、困りますな。
>>872 独自拡張位で目くじら立てなさんな。ええやん、どうせIEで見てないんでしょ?
>869とは違うんだけど IEのfilter: Alpha みたいなのって CSSではでけへん?
>>875 正式には、できない。
でもMozilla/NN6なら、独自拡張のmoz-opacityでできるから、検索してごらん。
>869 tableに50、imgに100を指定してたとすると imgは結局50% * 100% = 50%だから半透明のまま。 200にすれば解決 するかどうかは知らんけどな、IE使ってないから
つかimg{filter:none;}で良いんじゃないかって気もするが
880 :
853 :03/05/18 22:51 ID:???
質問者です。多数のご意見有り難うございました。 えと、CSSの例文については疑義もあると思いますが、 質問点は以下で取り上げていただいた通りで、大変参考になりました。 > 「CSS/DHTMLバグ辞典スレッド 第3版」 > 112 :Name_Not_Found :03/05/18 15:54 ID:??? # スレ違いスマソ
881 :
875 :03/05/18 22:58 ID:???
>>882 >>864 の例からして、単純にULのマーカーではなくて、
ULと、LIのブロックの配置について語っていると思われ
なんかよくわからんけど<ul><ol>にわざわざdisplay:list-itemする必要ないし、 list-style-imageプロパティはli要素だけじゃなくてdisplayプロパティが list-itemの要素にも適用できるってことでいいのかな。
885 :
Name_Not_Found :03/05/20 00:14 ID:MzEdboz8
テキストに重ねて色付きの横棒を表示させるデザインにしたいんですが、どうしたらいいんでしょうか。
>>885 その色付きの横棒とやらを何処にどういう風に付けたいのかが問題
>885 打消し線の色は変えられなかったような希ガス
888 :
Name_Not_Found :03/05/20 00:27 ID:MzEdboz8
>>886 打ち消し線のように重ねて表示です。で、テキストの色とは別の色でテキストを強調させるような
効果をだしたいんですが。
>888 positionとz-indexで「─」を文字の上に重ねる、かな。 あんまりお手軽には出来ないね。
ちょっとすれ違い気味かもしれないけど、、 CSS切り替えスクリプトでBBSの外観までコントロール しているページって知ってます?
どういうこと? サイト全体の外観が変わることでBBSの外観も変わるという所なら、いくつかあるだろうけど。
>>888 こんなんどう?
.ui{color:blue;text-decoration:line-through}
.wi{color:red}
<div class="ui">
<span class="wi">うぃうぃ</span>
<div>
スマソ。 .ui{color:blue;text-decoration:line-through} .wi{color:red} <span class="ui"><span class="wi">あうあう</span></span> こっちのほうがスマートかも。 しかしspanって入れ子にしてよかったっけ? ちゃんと動作するみたいだけど。
>>893 レスども。
切り替えスクリプトを使ってCGIまでいじってるとこあるのかな、と思ったんですけど。
よくよく考えるとその道のサイトでは結構ばんばんやってましたね。
しょうもないことに時間とらせてスマソ
>>895 回答するなら仕様書ぐらい読め。間違った事教えたらどうするんだ。
で、spanをネストするのはinvalidではないが、
むやみやたらとネストすることはお勧めできない。
895
>>897 いや、すみませんでした(汗
フォロー、サンクスです。
テーブルの幅をウィンドウ幅に合わせて伸縮させ、かつ左右の余白は常に一定…とするには、どうすれば良いでしょう? こんな感じ テーブル ┌―│―┐ │┌↓┐│ ││ │←余白 │└―┘│ └―――┘ テーブル横幅はウィンドウにあわせて伸縮 ┌――│――┐ │┌―↓―┐│ ││ │←左右の余白は一定 │└―――┘│ └―――――┘ どうも、すごい基本的なことのような気がするのですが、どうぞよろしくお願いします。
width=100% margin=適当。
901 :
899 :03/05/20 09:01 ID:???
>>900 やってみました。
右のほうが画面外にはみ出してしまいます…。
100%じゃなくてautoとかにしないと実装がアレだったような…。資料出せなくてスマ。
>>899 div厨かもしれないけど、こんなん駄目?
.hako{margin:1em 3em 1em}
.hyou{width:100%;margin:0}
<div class="hako">
<table class="hyou" border="1">
<tr>
<td>あ</td><td>ん</td>
</tr>
</table>
</div>
あ、スマソ。
>>904 の.hyouのmargin:0は消し忘れです。
907 :
899 :03/05/20 11:30 ID:???
レスありがとうございます。
うーん、いずれの方法でもうまく表示されません。
環境はIE6.0で確認しているのですが、やはり
>>903 のような事情なのでしょうか。
少し考えてみます。
>906 不思議マークアップで笑タ。 おまけにうざくてオナニーサイト化してきたな。
>>908 不思議って……広告の部分は仕方ないのでは。ケチつけることばかりうまくなって。
>>909 今見てきたら不思議というよりあまりにも酷過ぎだったけど。
でもwikiってのよく知らないんだけど、
これが吐くソースがひどいのではないだろうかと推測。
あと関係ないけどxreaなら広告を手動で挿入すれば正しいHTMLソースでいける。
>>899 marginのサイズに合わせてwidth:95%くらいに加減すればハミデナーイ
新しいテンプレ見てきましたが・・・ ああいうデザイン、今はやってんですか? Operaのフロントページ、Lunascapeのフロントページ、 みーんなそっくし。 もしかして作ってる人が同じ? 特徴がなくて何だか見ててつまんにゃい。
オナニーサイトだからな。 他人の評価なんてどうでもいいんだろう。
>>906 このスレの関係サイトがこれじゃなねぇ。
>>915 流行っていると言うかpukiwikiだし
まあこの板で使うなら、ちゃんとしたソース吐くように 改造しても良さそうなもんだけどな。
pukiwiki使う必要があるのかはさておき、 なんでCSSスレなのにpukiwiki使うのか。
プッ
925 :
Name_Not_Found :03/05/22 09:01 ID:LdW0NUPk
質問です。 CGIで生成されるHTMLで(DOCTYPE宣言無し)、 Opera6のH要素につけた<CENTER>がききません。 <CENTER><H3 style="border:solid 1px #000;">見出し</H3></CENTER>が ブロックごと普通に左寄せになります。 <CENTER><table><tr>・・・・・</table></CENTER> だと画面中央にちゃんときます。 <CENTER>なんか取っ払ってcssでBODY{text-align:center}とすれば いいんでしょうが、 CGIなので<CENTER></CENTER>が記事を追加するたびに 延々吐き出されつづけます。 どう対処すればいいのでしょうか? ちなみにIEでは問題ありません。
>925 center{text-align:center} これでダメならCGI改造するべし。
927 :
動画直リン :03/05/22 09:09 ID:eu9qdXFr
質問ではないのですが、 今自分でトラブってて解決したことからちょっと。 <p class=" myclass"> という感じに半角スペースをいれて .myclass{ /* いろいろ */ } とやるとオペラで無効、IEと根輔では有効に働きます。 ブラウザ振り分けのとても邪道な方法になる・・・・・わけないですよね。 駄文許してけろ。
932 :
930 :03/05/22 21:20 ID:???
すみません。初めてで解説サイト見ながら四苦八苦やってるんですがどうも出来ないので質問させてください。 素材サイトからフォントを落としたんですがこれをIEで表示させたい時はどうすればいいのでしょうか? windowsのフォルダファイルに落としたフォントファイル入れてテキストエディタで <font-family: "落としたフォントファイルの名前">〜</font> でいいんでしょうか?
<span style="font-family:xxxxx;">〜〜</span> だけど結局自分以外には意味が無いからやめとけ。
>934 まあCSSでやるにはどう?って質問ならスレ違いじゃ無いんだけど。 見る人がそのフォントを持ってないとブラウザで指定されているフォントが使われるか、 まあそれなら良いんだけど実装や特定の環境によっては文字化けの原因になっちゃうので フォント決め打ちはちょっと推奨できないかな。
ああ、自分専用のローカルな文書を作るのなら問題無しだけど。
>>922 なんだ、まだまともなHTMLのところもあるじゃないか。
つーか、結局このスレにテンプレ張っているんだから
あんまり必要ないような気が
>>934 特定のフォントきめうちでは、そのフォントがインスコされていない
他のPCでは、あなたの思っているような表示にならないでしょうから、
(A) あきらめる
[閲覧者の好みのフォントを使わせてあげる♥]
(B) 画像にしてみる
(C) "MS Pゴシック","Osaka",,,,,のように候補を増やす
942 :
934 :03/05/23 00:08 ID:???
詳細&迅速なレスありがとうございます。 あまり実用的でない&スレ違い失礼致しました。 フォントファイルを画像にして保存するってできないですよね? ちと自分で方法探してみます
>>942 著作者の意向も考えなきゃだめだよ。
画像にする、ってことは加工して表示するわけなんだから。
>>933 > ユーザエージェントは、CDATA型属性値の、冒頭あるいは末尾の空白
> 文字を無視してよい
って、ユーザエージェントが空白を無視しないのも仕様上間違っては
いないのでは?
つまりバグとは言えないような気がするのですが.。
識者フォローお願いします。
新スレッドにテンプレートを使用すべきではなかったか?
<table> <tr> <td><p>oijfeafew<br /> affefew<br /> afewcafe<br /> wafewa<br /> wawoifjewa</p> </td> <td><img src="ea" /></td> </tr> </table> こんな感じの←文字列、画像→のCSSはどんな感じで実現したらいいでしょうか <p>feawfeawfewafea<img src="ea" /></p> こんな風にすると結局文字列が画像の大きさに左右されて見にくくなってしまうので
949 :
404 :03/05/23 07:47 ID:???
>>948 言ってる意味理解するのに時間かかった。・゚・(ノД`)・゚・。 うえええん
<img style="float:left;" src="ea" />
950 :
404 :03/05/23 07:50 ID:???
全然違う・・・。・゚・(ノД`)・゚・。 うえええん
951 :
404 :03/05/23 07:52 ID:???
style="clear:right;" 鬱だ・・・
解説サイト見ながらやってるんですがある素材サイトで重ねることで形が完成するようなメニューアイコンを落としたんですがどうもうまくいきません。 どうも上と下で微妙なスペースが空いてしまいます。 メニューアイコンを上下スペースナシで貼り付けるにはどうしたらいいんでしょうか?
>>952 htmlソース書いてくれたらアドバイスできるかも。
自分である程度cssわかりますというレベルなら「margin、padding、line-height」
あたりをキーワードに調べてみるといいかも。
954 :
953 :03/05/23 11:34 ID:???
と思ったらマルチだったので放置します
>>948 >文字列が画像の大きさに左右されて見にくくなってしまうので
意味わからん。なので回答できん。説明求む。
-----------┌───┐ -----------│ │ ----- └───┘ という感じになると良くて ------┌───┐ ------│ │ ------└───┘ ---------- のようにテキストが回り込むのが嫌って事なのか?
957 :
948 :03/05/23 15:38 ID:???
>>957 文をdivでくくって、floatで回り込ませれるとか…
959 :
952 :03/05/23 21:04 ID:???
自己解決しました。地道にやってりゃできました。 マルチすみません
960 :
Name_Not_Found :03/05/24 14:07 ID:tFA3GdMj
すみません。 <li></li>の項目をCSSで どうすれば横一列にすることができますか? きっと初歩的なことだと思うのですがお願いします。
961 :
960 :03/05/24 14:09 ID:tFA3GdMj
あ、float:left; ですね。 スレ汚しでした。ごめんなさい。
964 :
960 :03/05/24 14:37 ID:tFA3GdMj
>>962 さんありがとう。
で、リストのアイコンを無しにしようと
ul の class で list-style:none;
と指定しましたが、消えません。
どうしたらいいでしょうか。
>>964 ・OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
967 :
960 :03/05/24 14:50 ID:tFA3GdMj
あの、、叩かれるのを承知でドキドキしながら書きますが、、 自分のパソコンのブラウザってどこを見たら分かるでしょうか。 ちなみにwindosです。 馬鹿ですいませんです。
>>967 叩きはしないけど、初心者板あたりで聞いた方がいいと思うよ。
>>964 IEとN7では消えるけど?
<ul style="list-style:none;">
<li style="float:left;width:3em">111</li>
<li style="float:left;width:3em">222</li>
</ul>
>>967 WindowsならInternet Explorerがデフォルト(初期装備)で入ってる。
他にブラウザをインストールしてなければIEだと推定される。
使ってるブラウザのメニュー・バーから「ヘルプ」を開けば
ヴァージョンは判るはず。
971 :
Name_Not_Found :03/05/24 15:06 ID:eHhCqL32
FrontpageExpressを使ってるんですが 改行するとやたらと行間が広くなってしまいます。 狭くするにはスタイルシートを使えば出来るってあったんですけど、 コピペしてやっても狭くなんないんですが、どういう事dしょう?
973 :
960 :03/05/24 15:09 ID:tFA3GdMj
Internet Explorer の ver6 でした。 皆さんありがとう。 dreamweaver上では消えるのですが、送ると消えていないままです。 色々やってみます。お世話かけました。
975 :
Name_Not_Found :03/05/24 15:10 ID:eHhCqL32
>>972 すいません。こんな感じです。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=x-sjis">
<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
<title>Contents</title>
<STYLE type="text/css">
<!--
BODY { line-height:1.5em; }
-->
</STYLE>
</head>
<body bgcolor="#FFFFFF">
<div align="right">
<table border="0">
<tr>
<td><p align="left"><font size="2"><strong>Contents</strong></font></p>
</td>
</tr>
<tr>
<td><p align="left"><font size="2">▼ C</font></p>
</table>
</div>
</body>
</html>
>>975 そのソースを見て、色んな感情を通り越して
むしろ爽やかな気分になった。
>971 シフト+Enterで改行してみたら?
978 :
Name_Not_Found :03/05/24 15:16 ID:eHhCqL32
>>977 おおおおお!!!!
ありがとうございます!!!!!!!マジうれしいです!
>>976 なんででつか?
>>978 おい、冗談をまともに取って感激するなよな。
p要素とbr要素について学んで下さい。
brでやたらに改行するものではありません。
p要素のマージンを指定すると幸せになれるかもしれません。
Frontpage Expressに依存してる限り、まともなCSSなんてムリでしょ。
どうやらまともなCSSじゃなくても かまわないみたいですので気にせず そのまま続けてください
982 :
Name_Not_Found :03/05/24 15:34 ID:eHhCqL32
>>979 そうでつか。アイスィー。
どうでもいいですけど、更新履歴って英語でなんていうんでつか?
私もHTML触り立ての初心者の時はp改行とbr改行で悩んだな。 やはりフロントページ(昔は無料だった)を使ってたのだが、 CSSの便利さを知るにつれて、フロントページでは 思った通りにスタイル指定できないのが嫌になって、メモ帳に移行した。
うめー
まつー
987 :
Name_Not_Found :03/05/25 10:56 ID:XIZjMQqn
ページを開こうとするとパスワードを入力せよと言うのがでて 正解か不正解によって2つのページに飛ぶ、といったようなものを つくるにはどうしたらいいでしょうか
>>987 一体、いくつのスレにマルチしたんだよ…埋め。
991
990
989
976
902
752
1001
67
401
0
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。