/* CSS・スタイルシート質問スレッド【18】 */
/* CSS・スタイルシート質問スレッド【18】 */
- 1 名前：気の早い1 ：03/04/12 03:35 ID:???
- CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
・基礎は解説サイト（>>4・かなりわかりやすい）で勉強してください。
・質問の前に【FAQ】（>>5-7）を参照して、既出の再掲を避けて下さい。
・【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
WinIEの場合は、[Ctrl+F]で検索できます。
・ブラウザによって対応していないプロパティーやバグがありますので、
【解説など】（>>4）の対応表や「CSSバグリスト」に目を通しておきませう。
・土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
正当(valid)なHTMLを心がけて下さい。
初心者の疑問は大抵ここまでで解決します。
・OSやブラウザの種類とヴァージョンについては必ず明記してください。
特にNetscapeは、ver.4までと6以降でまったく別物です。
・「環境を書け」とか「ソースは？」と求められたら応じませう。
その方が回答が早く得られます。
過去スレや関連リンクは>>2-10
【過去ログ】【関聯スレ】>>2
【仕様書】【CSS検証】>>3
【解説など】>>4
【FAQ】>>5-7
http://fake_lint.tripod.co.jp/css.html
【FAQ】 http://fake_lint.tripod.co.jp/css.html#faq
【過去ログ】 http://fake_lint.tripod.co.jp/css.html#log
【関連リンク】 http://fake_lint.tripod.co.jp/css.html#related
- 2 名前：Name_Not_Found ：03/04/12 03:36 ID:???
- 【過去ログ】
http://mentai.2ch.net/hp/kako/974/974934062.html
http://natto.2ch.net/hp/kako/984/984113434.html
http://natto.2ch.net/hp/kako/992/992992981.html
http://pc.2ch.net/hp/kako/996/996828258.html
http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
http://pc2.2ch.net/hp/kako/1041/10416/1041641395.html
http://pc2.2ch.net/test/read.cgi/hp/1045124732/
http://pc2.2ch.net/test/read.cgi/hp/1047154499/
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1048775997/l50
【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
・CSSでイケてるデザインサイト 10
http://pc2.2ch.net/test/read.cgi/hp/1048475227/l50
・* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
http://pc2.2ch.net/test/read.cgi/hp/1038678267/l50
・代替スタイルシートに萌え～
http://pc2.2ch.net/test/read.cgi/hp/991400015/l50
・独自拡張、草案段階のCSSについて語れ
http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
- 3 名前：Name_Not_Found ：03/04/12 03:37 ID:???
- 【仕様書】
・CSS1の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS1/
・CSS2の仕様書の原文(英語)
http://www.w3.org/TR/REC-CSS2/
・CSS1の仕様書の邦訳（日本規格協会訳／個人訳）
http://www.y-adagio.com/public/standards/css1/toc.htm
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css1/rec-css1.html
・CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
・W3C CSS 検証サービス
http://jigsaw.w3.org/css-validator/
- 4 名前：Name_Not_Found ：03/04/12 03:41 ID:???
- 【解説など】
・ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
http://www.zspc.com/stylesheets/
・K@tsukun's PAGE! > CSS Reference
http://hp.vector.co.jp/authors/VA022006/css/index.html
・とほほのスタイルシート入門
http://tohoho.wakusei.ne.jp/wwwcss.htm
・ばけらの CSS リファレンス
http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・Academic HTML::CSS2
http://www.tg.rim.or.jp/~hexane/ach/
・ZSPC - CSS2対応状況ガイド
http://www.zspc.com/documents/css2/
・CSS対応状況表
http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS1テストスイート http://www.doraneko.org/css1test/
・ブラウザのHTML4/CSS対応度テスト
http://homepage1.nifty.com/emk/moz/browsertest.html
・CSS Laboratory対応表・一覧
http://is.vis.ne.jp/charts/index.xhtml
・CSSバグリスト＠CSSバグ辞典スレッド
http://cssbug.tripod.co.jp/index.html
・Web標準普及プロジェクト （特に「HTML/CSSのよくある誤解・ミス」）
http://www.mozilla.gr.jp/standards/index.html
・ブラウザによる振り分け （JavaScriptを使用しない方法）
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・（ ´∀｀）＜ CSS でイケてるデザインサイトリンク集2
http://www.geocities.co.jp/SiliconValley-SantaClara/1308/
・* CSS { イケてるスタイルを："作れ";} 発表所
http://strict.jp/~sappari/2ch/css.php
- 5 名前：Name_Not_Found ：03/04/12 03:41 ID:???
- 【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが？
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width（height）は、要素の内容領域の幅（高さ）を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
http://www.fromdfj.net/html/border2.html
Q2: text-align:center;を指定しても Netscape6(or7)ではtableなどブロック要素がセンタリングできません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記（特に4.）をご覧ください。
1.'text-align'に関する考察
http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.ブロックレベル要素をセンタリングする方法
http://www.mozilla.gr.jp/standards/webtips0004.html
- 6 名前：Name_Not_Found ：03/04/12 03:44 ID:???
- 【FAQ】
Q3: CSSで擬似フレームってどうやるの？
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
http://www.fromdfj.net/html/overflow.html
Q4: CSSで段組するには？
A4: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと (floatによる段組の例)
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと （ネスケ４でも崩れない段組みの実例）
http://village.infoweb.ne.jp/~fores/
- 7 名前：Name_Not_Found ：03/04/12 03:45 ID:???
- 【FAQ】
Q5: なんかフロートの表示が崩れるみたいなんですけど？
A5: floatさせる要素にはwidth指定が必須（img要素以外）。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
http://cssbug.tripod.co.jp/detail/winie/b079.html
http://pc2.2ch.net/test/read.cgi/hp/991666454/683n
Q6:画面中央に配置するにはどうすれば？
A6:左右（水平方向）のセンタリングは既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm
Q7:背景画像を二つ指定するにはどうするか。
A7:できません。background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
Q8．いままでＨＴＭＬでやってた××をCSSでやるにはどうすればいい？
A8．下記に書いてあります。テーブル・レイアウトは段組のFAQ（A4・>>6）をご覧あれ。
「いままでの HTML との対照」
http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
- 8 名前：Name_Not_Found ：03/04/12 03:55 ID:???
- ちんぽ
- 9 名前：Name_Not_Found ：03/04/12 03:56 ID:???
- 胸毛おじさん
- 10 名前：Name_Not_Found ：03/04/12 04:00 ID:???
- Web Site 作成支援 - CSS とはなんだろうか
http://msugai.fc2web.com/web/CSS/
- 11 名前：Name_Not_Found ：03/04/12 04:17 ID:???
- 女の子はアホな方がカワイイと思う
結局まだまだレイアウトを自在に表現できないＣＳＳじゃあ
validじゃなくてもしかたないよね。
ちょっと凝ったことやろうとするとやっぱり既存の方法に頼るしかない
って寂しいね。
- 12 名前：Name_Not_Found ：03/04/12 04:20 ID:???
- >>11 ※ 議論はよそで ※
ここは質問スレッドです。
- 13 名前：Name_Not_Found ：03/04/12 05:19 ID:pU13ygGl
- >>7のQ7なんですが、
2つの画像を右下と左上にそれぞれ位置指定する事は可能ですか？
要素を重ねるってのが理解できないんですが。
- 14 名前：Name_Not_Found ：03/04/12 05:38 ID:???
- >>13
<div class="hage">
<div class="sage">
</div>
</div>
hageに右下、sageに左上を指定
- 15 名前：Name_Not_Found ：03/04/12 05:46 ID:???
- 背景画像だったら不可能。
要素を重ねるってのは
<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
- http://jbbs.shitaraba.com/computer/2100/jsweb_1.html
- 18 名前：13 ：03/04/12 06:06 ID:pU13ygGl
- >14-15
ありがとうございました。
∧＿∧ ／￣￣￣￣￣￣￣￣￣￣
（ ´･ωﾒ) ＜ ふ・・不可能・・ｼｮﾎﾞｰﾝ
（つ旦と） ＼＿＿＿＿＿＿＿＿＿＿
と＿）＿）
- 19 名前：Name_Not_Found ：03/04/12 06:17 ID:???
- sageろ
- 20 名前：Name_Not_Found ：03/04/12 07:16 ID:???
- え？むりなの？
- 21 名前：Name_Not_Found ：03/04/12 10:04 ID:???
- ん？できるの？
- 22 名前：Name_Not_Found ：03/04/12 10:58 ID:???
- は？どっちなの？
- 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="..</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を加えて全部０にしてもだめです。
width,heightを使わず、同じ表示を得るよい手はないでしょうか。
- 25 名前：Name_Not_Found ：03/04/12 12:00 ID:???
- >>24
あのさ、そのバグの解決法は俺のスキルじゃちょっとわからないんだけど、
IE5.0わかってるだけでも相当なバグがあるから、IE5.0でもきっちり同じ見栄えを、
と思うならJavascriptで振り分けたほうがいいと思う。
- 26 名前：Name_Not_Found ：03/04/12 12:03 ID:???
- >>23-24
それはFAQのＡ４に既出。>>7見て。
>これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
> http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
> http://cssbug.tripod.co.jp/detail/winie/b079.html
> http://pc2.2ch.net/test/read.cgi/hp/991666454/683n
- 27 名前：26 ：03/04/12 12:10 ID:???
- ごめん、Ａ４でなくてＡ５だな。
要するに、<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">していた方、
悲しいけど、こちらのほうが安全です。。。
- 29 名前：Name_Not_Found ：03/04/12 12:32 ID:???
- >>28
<hr style="clear:left;margin:0;height:0;"> の方がいいのでは。
但し互換（Quirks）モードだと、Mozillaに限り効かないけどね。
で、いままでのこと「バグ辞典スレッド」に登録しておいてくれない？
- 30 名前：Name_Not_Found ：03/04/12 12:33 ID:???
- あまりにアレな解決法なんで口出ししてみる
同じ結果を得るのに必要なプロパティだけに絞ってみた
これでぶっ壊れるようなバグは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="..</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分の余白が生じます。
- 33 名前：Name_Not_Found ：03/04/12 14:22 ID:???
- >>31－32
widthが使えないなら、#migiwakuにfloat:rightは必須。
で、ブロック要素内では左揃いだからtext-align:rightも必須。
- 34 名前：Name_Not_Found ：03/04/12 14:25 ID:???
- >>32
>#uewakuにはwidthとheightのどちらか片方だけ
>でもIE5.0でむごい障害が発生します。
具体的には？ 再現条件は本当にwidthの所為だけなのか？ 下記へどうぞ。
・CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
- 35 名前：Name_Not_Found ：03/04/12 14:28 ID:???
- >>32
><br style="clear:both">は曲者で、IE5とIE5.5－6で解釈が異なります。
>NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
>heightの下にプラスbrの1em分の余白が生じます。
それは、#uewakuにheightを指定してるからだろ。
cf. http://cssbug.tripod.co.jp/detail/winie/b079.html
- 36 名前：Name_Not_Found ：03/04/12 14:50 ID:???
- >>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="..</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バク辞典のほうに移ってソースをアップします。
- 38 名前：Name_Not_Found ：03/04/12 15:05 ID:???
- >>37 >>36の通りにしてもうまくゆかない？
ポイントは右左の記述順序を逆にしてfloat:right;にすることと、
#hidariueにはfloatを指定しないこと。
- 39 名前：24 ：03/04/12 15:24 ID:???
- >>36
おっしゃるとおりにhtmlソースの#migiueと#hidariueを入れ替えて、
cssも36さんが書いた通りに書き換えましたが、だめでした。
#uewakuにwidthもheightもないのに、もう訳がわかりません。
もちろんIE5意外ではきちんと表示されます。
- 40 名前：質問ﾊﾞｶ ：03/04/12 16:31 ID:???
- いきなり質問なんですけど
「"red" style="background-image:url(JAVASCRIPT:」
↑この状態でJSを自動的に（強制的に）切らす方法はどうやってやればいいんですか？
- 41 名前：質問ﾊﾞｶ ：03/04/12 16:34 ID:???
- ↑の"red"は必要ないです＾＾；ごめんなさい。
- 42 名前：Name_Not_Found ：03/04/12 17:36 ID:???
- >>39
今ソース見てきたけどこれだけレイアウト目的のdiv入れていいなら
positionでやったほうがいいんじゃないの？
- 43 名前：Name_Not_Found ：03/04/12 17:40 ID:???
- >>40
環境くらい書けよ。
- 44 名前：Name_Not_Found ：03/04/12 17:58 ID:???
- >>42
だれがレイアウト目的のＤＩＶだめっていったの？何のためのスタイルシートなんだよ。
- 45 名前：Name_Not_Found ：03/04/12 18:19 ID:???
- >>44
誰もレイアウト目的のdivが駄目とは言ってないだろうが。馬鹿か？
strictなHTMLにこだわらないなら、バグの出るfloatよりも
positionとか他の方法を試したほうがいいんじゃねーの？
と言ってるだけだが。
- 46 名前：Name_Not_Found ：03/04/12 18:41 ID:???
- >>24
ネスケ４対策してるようには思えないけどfloatにこだわる理由は？
- 47 名前：Name_Not_Found ：03/04/12 19:55 ID:???
- <hr size="n">ではなく、
CSSでhrに太さを定義することってできるんですか？
- 48 名前：Name_Not_Found ：03/04/12 19:57 ID:???
- >>47
自分で試せばすぐわかることを訊くなって。できるよ。
- 49 名前：Name_Not_Found ：03/04/12 19:59 ID:???
- 自己解決。heightでできるね。
>>48
ｽﾏｿ
- 50 名前：Name_Not_Found ：03/04/12 20:12 ID:???
- >>39
君のＩＥだけが狂ってるんだったりして。
だって「ウインドウズごとアボーン」したりしたんでしょ？
誰か他の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は対策しています。ネスケ４とその他一般で分けています。
アップしたソースは問題を分かりやすくするために、超簡単に省きました。
あれを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;">でうまく行かなかった場合は、
これを試してみると、たいていはオッケーだろうと思います。見苦しいですが。
- 52 名前：Name_Not_Found ：03/04/12 20:15 ID:???
- >>46
CSS Laboratory > 研究室・目次 > html:hrエレメント・研究室
http://is.vis.ne.jp/lab/html_hr_element/index.xhtml
- 53 名前：Name_Not_Found ：03/04/13 01:18 ID:???
- .paragraph {
line-height: 140%;
font-weight: normal;
text-decoration: none;
line-break: strict;
padding-right: 20px;
padding-left: 20px;
font-family: 11pt "ＭＳ Ｐゴシック", "Osaka";
color: #333333;
}
p.paragraph:first-letter {
font: bold 2em "ＭＳ Ｐゴシック", "Osaka";
color: #FF0000;
float: left;
margin: 0px;
padding: 0px;
}
上ですが、
<p class="paragraph">次回の計画に向けて....
</p>
と適用したところ，二文字目以降の文にスタイルが適用されていません。
つまり色サイズ等の指定が無視されています。
対処法を教えていただけませんか。
- 54 名前：Name_Not_Found ：03/04/13 01:33 ID:???
- >>53
font-family: 11pt "ＭＳ Ｐゴシック", "Osaka";
これおかしいよ。
- 55 名前：Name_Not_Found ：03/04/13 02:17 ID:???
- >>54
<（´Д｀）> ﾋｪｴｴ！
- 56 名前：Name_Not_Found ：03/04/13 02:29 ID:???
- 最近オンラインカジノでよく遊んでるよ！
３０ドルのチップを始めに貰えるのでよかったらやってみて♪
無料でできるプレーもあるし、結構楽しめるよ(^.^)
おすすめはルーレット！！赤か黒にかけるだけで、
50%の確率で2倍になるよ♪
http://white.sakura.ne.jp/~marchen/
- 57 名前：Name_Not_Found ：03/04/13 03:50 ID:???
- 質問させてください。
台本のマークアップは<dt><dd>タグでと聞き、試してみたのですが、
実際の台本のように表示させようと思うと、なかなか上手く行きません。
<dt>長い長い長い長い名前</dt><dd>セリフは短め</dd>
<dt>名前</dt><dd>セリフが２行以上<br>セリフが２行以上</dd>
↑この例を
長い長い 「セリフは短め」
長い長い
名前
名前 「セリフが２行以上（略）
セリフが２行以上」
という風に表示させようとすると、
長い長い「セリフは短め」
長い長い
名前 「セリフが２行以上（略）
名前 セリフが２行以上」
のように表示が崩れてしまいます。現在のCSSソースは以下の通りです。
dt { width : 4em ; float : left ; clear : left ; }
dd { margin-bottom : 1em ; }
段組みの指定が参考になるかと思い、>>6に載っていたサイトも
見てソースを試してみたりしたのですが、どうにも上手く行きません。
よろしくお願いします。
- 58 名前：Name_Not_Found ：03/04/13 04:08 ID:???
- >>57
dt { display : run-in; margin-right : 1em; }
これだけでOK。
ただし、display : run-inに対応してるブラウザは、現時点では少ない。
（Operaだけ？）
- 59 名前：Name_Not_Found ：03/04/13 04:29 ID:???
- >>57
ブラウザは？ Moz系だと思うけど
- 60 名前：Name_Not_Found ：03/04/13 05:02 ID:???
- >>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)の間違い。
- 62 名前：Name_Not_Found ：03/04/13 05:31 ID:???
- 「レッツゴー三匹」ではなく「レツゴー三匹」が正しいとは思うが、
脊髄反射で「TABLEレイアウトは糞」という輩が登場することを期待してsage。
- 63 名前：Name_Not_Found ：03/04/13 06:12 ID:???
- >62
一行目はげしく同意
>57
tableでいいんでない？ 線形だし。
- 64 名前： ◆9plK6jko/k ：03/04/13 06:40 ID:???
- 最近cssを使い始めたのですが、行き詰まってしまいましたので
質問させていただきます。
（cssファイル）
a:link,a:visited{～}
a:hover,a:active{～}
（htmlファイル）
～
<LINK REL="stylesheet" href="○○.css">
～
とりあえず教科書通りのこの形でハイパーリンクにカーソルを持っていった
状態に変化をつけることは出来たのですが、これを
「ページの上半分だけにスタイルを適用する」状態にしたいのです。
classやIDで指定する方法も考えたのですが、記載方法が独特なので
どうしたら良いのか皆目見当がつきません。
どなたかアドバイスお願いします。
- 65 名前：Name_Not_Found ：03/04/13 06:46 ID:???
- >>64
a:link { ～ } /* 普通の*/
a:visited { ～ }
a:active { ～ }
a:hover { ～ }
a.ue:link { ～ } /* 上半分用*/
a.ue:visited { ～ }
a.ue:active { ～ }
a.ue:hover { ～ }
- 66 名前： ◆9plK6jko/k ：03/04/13 06:49 ID:???
- >>65
あ、なるほど……
ありがとうございました。これから試してみます。
- 67 名前：Name_Not_Found ：03/04/13 06:52 ID:???
- こういう手もある
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>
- 68 名前：Name_Not_Found ：03/04/13 06:58 ID:???
- >>67
.ue { ～ } /* 上半分用*/ の間違い
- 69 名前：Name_Not_Found ：03/04/13 07:03 ID:???
- >>57
dd のブロックボックスは float ボックスである dt を無視して
レンダリングされるから、そうなるのが正しいはず
dt の行数が dd より多くならないようにするしかないんじゃ
>>67
そこで span が出てきますか
- 70 名前： ◆9plK6jko/k ：03/04/13 07:19 ID:???
- みなさんありがとうございました。
おかげで問題は一通り解決しました。
- 71 名前：Name_Not_Found ：03/04/13 07:50 ID:vw4pwcRq
- お尋ねします。
body要素に
{border:solid #F0A8A8 15px}
と指定したところIE6.0ではページ全体に枠が表示されるのですが、
Opera7.03では下に空白が表示されます。
どうにかしてOperaでも空白が表示されないようにできないでしょうか？
- 72 名前：Name_Not_Found ：03/04/13 07:53 ID:???
- >>57-61
定義リストの段組は前スレッドでも既出。floatで十分できますよ。
http://pc2.2ch.net/test/read.cgi/hp/1048775997/655-680
dt { width:4em ; float:left ; clear:left ; }
dd { margin-left : 4.5em ; }
ｃｆ.「<dl> の整形」
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03
>dd の margin-left を dt の width と同値にすれば、dd の内容が画面右端で
>折り返されても見た目がヘンにはならないとゆー特典もありまふ、
- 73 名前：Name_Not_Found ：03/04/13 07:59 ID:???
- >>71
それはＩＥが間違ってます。
Internet Explorer (Windows) CSSバグリスト
body要素に設定したボーダーが閲覧領域全体を囲むように表示される(IE5)
http://cssbug.tripod.co.jp/detail/winie/b036.html
- 74 名前：Name_Not_Found ：03/04/13 08:00 ID:???
- >>71
html { border: ～; } とすれ
- 75 名前：Name_Not_Found ：03/04/13 08:06 ID:???
- >>69
>>>57
>dd のブロックボックスは float ボックスである dt を無視して
>レンダリングされるから、そうなるのが正しいはず
いいえ、正しくありません。下記参照。
CSSバグリスト
先行するフロートの上方に後続のフロートが置かれる
http://cssbug.tripod.co.jp/detail/winie/b093.html
http://cssbug.tripod.co.jp/detail/opera/b044.html
- 76 名前：71 ：03/04/13 08:11 ID:???
- >>73
回答ありがとうございます
IEのバグだったんですが。
どうおりで片方だけ表示が違うわけですね。
>>74
教えていただきありがとうございます！
Operaでも正しく表示されるようになりました。
本当にありがとうございました。
- 77 名前：60-61 ：03/04/13 08:51 ID:???
- >>62
知らなかった……今までずっと間違えてました。
ご教示、ありがとうございました！
と、質問者の感謝レスのふりをしてみる。
- 78 名前：Name_Not_Found ：03/04/13 10:06 ID:???
- >>75
>>57を良く見れ
- 79 名前：Name_Not_Found ：03/04/13 11:47 ID:???
- >>78 >>75のリンク先をよく見て。
>Cのフロートはclearプロパティにより回り込みが抑制されています。
- 80 名前：Name_Not_Found ：03/04/13 14:36 ID:???
- すみません教えてください。
テキストの「デザインだけ」を
アンカータグで囲った場合と同じにするには、どう書けばよいのでしょうか？
- 81 名前：Name_Not_Found ：03/04/13 14:42 ID:???
- >>80
曖昧すぎ。もっと具体的に。
- 82 名前：Name_Not_Found ：03/04/13 14:43 ID:???
- >>80
<body>
<a href="">
～～～
</a>
</body>
- 83 名前：Name_Not_Found ：03/04/13 14:47 ID:???
- >>80
多分、こういう事だと思うけど
span.design:hover{
color:#ff0000;
text-decoration:underline;
}
<span class="design">ココのデザイン</span>
- 84 名前：Name_Not_Found ：03/04/13 14:55 ID:???
- a { display: block; } のことですか？
- 85 名前：Name_Not_Found ：03/04/13 15:02 ID:???
- 下線を引きたいの？
- 86 名前：Name_Not_Found ：03/04/13 15:07 ID:???
- 質問です。
<!DOCTYPEIE ～に"http://www.w3.org/TR/html4/loose.dtd"を入れたIE6やOp6、NN7だと
<a href="http://2ch.net/" style="border-width: 1px;border-style: solid;width: 200px;">2ch</a>
のようにaにwidthを指定しても無効になってしまうのですが、
うまく表示させる方法はあるのでしょうか？
- 87 名前：57 ：03/04/13 15:09 ID:???
- お答えくださった皆様、ありがとうございます。
テーブルを使っても良かったんですね。
台本は表じゃないよなぁと一人で悩んでおりました。
72さんの
dt { width:4em ; float:left ; clear:left ; }
dd { margin-left : 4.5em ; }
の方法を試してみましたが、名前の方が行数が多くなってしまう場合に
やはり前述のような表示の崩れがみられました（ネスケ7.0でテスト）
ただ、75さんのリンク先を見るとバグのようですので、
名前の行数の方が多くならない方向で調整するか
テーブルにマークアップし直すということでやってみます。
ありがとうございました。
- 88 名前：Name_Not_Found ：03/04/13 15:41 ID:???
- >>86
一部を除いてa要素のようなインライン要素にwidthは適用できませんよ。
styleにdisplay: blockと追加すればwidthが適用されますよ。
- 89 名前：86 ：03/04/13 16:29 ID:???
- >>88
ありがとうございました。
- 90 名前：Name_Not_Found ：03/04/13 17:14 ID:???
- 何でも文字が大きければいいような
こと言うやつっているけど、反対にあんまり文字が大きいと読みにくかったりする
場合もあるし、一概に文字サイズだけで言えないよな。だいたい、IEの中で字が
読めない奴はユーザースタイルシートでも使えばいいんだよ。
ここのスレの奴はvalidであればデザインなんかどうでもいいと思ってるような
奴らばっかりだから理想論しかでてこないんだよ。
あんまりここのスレのこと鵜呑みにするとダサイサイトしか出来ないよ。
- 91 名前：86 ：03/04/13 17:17 ID:???
- >>90
参考にします。ありがとうございました。
- 92 名前：Name_Not_Found ：03/04/13 17:29 ID:???
- >>90は誤爆か。
- 93 名前：Name_Not_Found ：03/04/13 18:38 ID:???
- >>92
§ノヽ§
（ ・ｅ・ ） うるせーばか
（ ）
∪∪
- 94 名前：Name_Not_Found ：03/04/13 18:41 ID:???
- >>93
§ノヽ§
（ ・ｅ・ ） うるせーばか
（ ）
∪∪
- 95 名前：Name_Not_Found ：03/04/13 19:47 ID:???
- >>87
69が正しい。
そのバグは、float対floatについてのバグだから。
- 96 名前：Name_Not_Found ：03/04/13 22:13 ID:???
- 誘導のためage
- 97 名前：Name_Not_Found ：03/04/13 22:16 ID:???
- >>96
§ノヽ§
（ ・ｅ・ ） うるせーばか
（ ） ∪∪
- 98 名前：Name_Not_Found ：03/04/13 22:18 ID:???
- >>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;">セリフが２行セリフが２行セリフが……</dd>
</dl>
……と思ったら、Opera 7だけうまくゆかないや。
- 99 名前：セルン ◆LUr2ERYJL6 ：03/04/13 23:45 ID:???
- >>57
dt { width : 4em;float:left;clear:both;}
dd {padding-bottom:2em;padding-left:2em;}/*IE相当強引*/
一応三大ブラウザぐらいなら大幅に同じだけど強引だね。。
そもそもその名前と台詞の関係配列強引じゃない？下の名前二ついるのかな？
一言に対しては一つの台詞でいいんじゃないの？
連続台詞なら二つに別けて書くのが普通と思われ。
- 100 名前：セルン ◆LUr2ERYJL6 ：03/04/13 23:59 ID:???
- >>57
すまん。洩れが勘違いしてた。
- 101 名前：セルン ◆LUr2ERYJL6 ：03/04/14 00:02 ID:???
- だとしたら
ddのbrを取って幅を指定する方（ddにwidth加える）が自然と言える
- 102 名前：Name_Not_Found ：03/04/14 00:36 ID:???
- ◆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では以下のような表示になってしまいました。
長い長い「セリフは短め」
長い長い
名前
名前
「セリフが２行以上（略）
セリフが２行以上」
>>98さんの例もコピペして試してみましたが、どのブラウザでも表示が崩れました。
- 104 名前：Name_Not_Found ：03/04/14 01:40 ID:???
- >>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
- >>103
もうテーブルでいーじゃーん。
- 106 名前：57 ：03/04/14 01:45 ID:???
- 103のソースで正しいのか正しくないのか、
>>75のバグがWindows版IEでも発生して表示が崩れるものなのか、
103のMac版IEでの表示の崩れはMac版IE独自のものなのか、
Windows版IEで確認できないので心配です。如何でしょうか。
素直にテーブルにした方が良いとは思うのですが、
情報の整理だけはしておきたくて。よろしくお願いします。
>>99
すみません、言わんとしていることがよくわからないのですが…。
- 107 名前：Name_Not_Found ：03/04/14 01:45 ID:???
- >>103
発言した人、発言の内容、でてーぶるでも問題ないと思うんだけどな。
- 108 名前：Name_Not_Found ：03/04/14 01:53 ID:FmsBR48v
- http://jbbs.shitaraba.com/computer/2100/jsweb_1.html
- 109 名前：セルン ◆LUr2ERYJL6 ：03/04/14 01:56 ID:???
- 上の文章例
長い長い 「セリフは短め」
長い長い
名前
名前 「セリフが２行以上（略）
セリフが２行以上」
は
dt {width : 4em;float:left;clear:both;}
dd {padding-bottom:2em;padding-left:2em;width : 10em }
で正常に表示される。三大ブラウザ問題なし。
強制改行のBRを入れているが文章的には不必要だと判断した。
ただし、DDのpaddingに関してはある程度バランスが必要と言う面で
相当強引なことは確か。とりあえず弄ってみればわかると思うけど。
- 110 名前：セルン ◆LUr2ERYJL6 ：03/04/14 02:05 ID:???
余計なの付いてる・・・padding-left:2emは特に要らない。
padding-bottomの値が一番のポイントになるのかな。
- 111 名前：Name_Not_Found ：03/04/14 02:28 ID:???
- ＞セルン ◆LUr2ERYJL6
お前な、解答するならﾚｽまとめろよ。固定がスレ占拠してんじゃねーよ
「ふ」みたいな香具師だな。いや、お前「ふ」だろ？
- 112 名前：Name_Not_Found ：03/04/14 02:30 ID:???
- >>106
dt の高さ ＞ dd の高さ
dt の高さ ＜ dd の高さ
これが混在する場合、floatを使ってうまくやる方法は（現時点では）ない
まず、dd を通常フローで流し込むと dt と dd の上辺が揃わなくなる（揃ったらバグ）
dd を float にすればいいのだけどIE等が馬鹿なので使えない
名前が折り返されないように、一番長いのに合わせてwidthを指定すれば
前者の方法が使えるんだけど、そうもいかないのかな
でなきゃ省略形で書くとか
<dt><abbr title="長い長い長い長い名前">長い人</abbr></dt>
これ以上は何ともいえないので後はそちらの判断で
- 113 名前：Name_Not_Found ：03/04/14 03:27 ID:???
- 糞コテセルンは
煽りを煽るだけのage厨
http://pc2.2ch.net/test/read.cgi/hp/1048867117/767-772
http://pc2.2ch.net/test/read.cgi/hp/1048610844/678-683
http://pc2.2ch.net/test/read.cgi/hp/1046615656/410-452
http://pc2.2ch.net/test/read.cgi/hp/1037955969/617-620
http://pc2.2ch.net/test/read.cgi/hp/1035775357/510-
セルンはNG
セルンはスルーで
- 114 名前：Name_Not_Found ：03/04/14 03:48 ID:???
- セルン ぷ
http://pc2.2ch.net/test/read.cgi/hp/1035775357/510-600
- 115 名前： ◆1w8jmuVPSI ：03/04/14 15:04 ID:???
- 私は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="..<li><a href="..<li><a href="..</ul>
- 116 名前： ◆1w8jmuVPSI ：03/04/14 15:04 ID:???
- >115の続き
この例ですと、「トップに戻る」だけが表示されて、前の2つは
透明アンカーになっていました。一応マウスを持っていけば
ステータスバーにリンク先URIが表示されてリンクとして利くこと
は利くのですが非常に分かりづらくなっているので対処したいです。
テンプレートのバグ辞典の方とバグ辞典スレッドの方も調べて
みたのですが、該当するものが見つかりませんでした。
Googleで、「mac IE css display inline」「mac IE css before」
で調べている最中なのですが、見つからないですしMac使いの方が
おられましたら、フォローしていただけると助かります。
私はMacを持っていないですし、図書館は17時に閉まるので平日は
利用出来ないのです。
before, afterはWinIE6でも非対応なのですが、ただcontentの内容が
付加されないだけど、アンカー文字列自体に影響を与えることは
なかったのですが、そこが原因なのでしょうか。
それとも別のことなのでしょうか。
- 117 名前：Name_Not_Found ：03/04/14 17:31 ID:???
- >>115
原因はtext-align : center;とul.navigate liのbackground-color : #e6e6fa;。
ul.navigate liのbackground-color : #e6e6fa;を外せば解決。
- 118 名前：Name_Not_Found ：03/04/14 17:32 ID:???
- >>115-116
1. ul.navigate の text-align : center; を取る
2. ul.navigate li の background-color : #e6e6fa; を取る
のどちらかで、表示されるようになりました。
原因は不明ですが。
- 119 名前：115-116 ◆1w8jmuVPSI ：03/04/14 17:57 ID:???
- >>117 >>118
ありがとうございます。
前記したように、こちらはMacで確認するのが困難な状況
ですので、たいへん助かりました。
修正後、この土日に確認し報告させていただこうと思います。
重ね重ねありがとうございました。
- 120 名前：Name_Not_Found ：03/04/14 18:05 ID:???
- >>117-118
あんたらすごいな。俺どこに問題あるか全然わからんかった。
- 121 名前：Name_Not_Found ：03/04/14 19:07 ID:???
- >>115-119
こちらに登録しておいて下さいませんか。
CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
- 122 名前：119 ◆1w8jmuVPSI ：03/04/14 19:55 ID:???
- >>121
現在の時点でこちらが分かっていることについて報告させていただきました。
よろしくお願いします。
- 123 名前：Name_Not_Found ：03/04/14 20:44 ID:???
- <i style="font-style: italic;">斜め</i>
- 124 名前：Name_Not_Found ：03/04/14 22:22 ID:???
- スタイルシートで透過して背景を見えるように半透明にしたいのですが、これはwin2000とwinxpでしか見れないのでしょうか？
win9Xは透過に対応していなくて使えないフリーソフトがあったりしたのでどうなのかな？と思ったのですが、当方9Xの環境がなく試せません。
教えたください。
- 125 名前：Name_Not_Found ：03/04/14 23:09 ID:???
- >>124
>スタイルシートで透過して背景を見えるように半透明にしたい
できるとしたら、それは正式のＣＳＳではなくWinIEの独自拡張です。
ですからOSは関係ありません、IEのヴァージョンが問題になります。
NetscapeやOperaで閲覽すると半透明にはなりませんよ。
- 126 名前：Name_Not_Found ：03/04/14 23:19 ID:???
- >>125
ﾚｽ有難うございます
OS云々かと思っていましたが違うのですね、（´∀｀ ）ｻﾝｷｭｽｺ!!!
- 127 名前：Name_Not_Found ：03/04/14 23:21 ID:???
- 透過pngのことならスタイルシートと關係ないぞよ。
- 128 名前：57 ：03/04/14 23:25 ID:???
- >>112
詳しい説明をありがとうございました。自分にも理解できました。
とりあえず現時点では素直にテーブルで行こうと思います。
長々とご迷惑をおかけしました。
- 129 名前：Name_Not_Found ：03/04/14 23:30 ID:???
- CSSと関係有り
背景色透過（background:transparent;）→OS・ブラウザに関係なく適用
背景半透明（filter:alpha();）→IEの独自拡張
CSSと関係無し
PNGの透過（αチャンネル）→ブラウザ・環境によってできない
- 130 名前：Name_Not_Found ：03/04/14 23:43 ID:???
- CSSと関係有り
背景半透明（-moz-opacity:***;）→Mozilla/NS6～7の独自拡張
cf. http://www.openspc2.org/reibun/css/filter/004/
- 131 名前：Name_Not_Found ：03/04/15 02:29 ID:???
- cf. http://www.ne.jp/asahi/moe/pro/
- 132 名前：Name_Not_Found ：03/04/15 04:36 ID:q3xu5Rs9
- 画面中央に配置するやり方がFAQのURL読んでもイマイチ解らない。
詳しく教えて。
- 133 名前：Name_Not_Found ：03/04/15 04:54 ID:???
- >>132
小学生レベルの質問だな。
まずどこがどのようにわからないのか教えてくれ。
そして何を中央に配置したいのか書け。
- 134 名前：Name_Not_Found ：03/04/15 05:24 ID:q3xu5Rs9
- いいから早く教えろよ。
- 135 名前：あぼーん ：03/04/15 05:48 ID:???
- あぼーん
- 136 名前：Name_Not_Found ：03/04/15 06:04 ID:???
- >>134
朝っぱらから釣りか。
何をどう配置したいのか書いてないのに答えられるはずがないだろう。
引き篭もりはコミュニケーション能力に欠けるっていうのは本当だな(藁
- 137 名前：Name_Not_Found ：03/04/15 06:17 ID:q3xu5Rs9
- わかったから早く教えろよ
- 138 名前：