/* CSS・スタイルシート質問スレッド【20】 */
/* CSS・スタイルシート質問スレッド【20】 */
- 1 名前:質問は他人にわかる日本語で :03/06/14 05:33 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
cf. http://web2ch.s31.xrea.com:8080/index.php?CSSFAQ
http://nira.s25.xrea.com/FAQCSS/ls_00.html
- 2 名前:Name_Not_Found :03/06/14 05:38 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/hp/kako/1045/10451/1045124732.html
http://pc2.2ch.net/hp/kako/1047/10471/1047154499.html
http://pc2.2ch.net/hp/kako/1048/10487/1048775997.html
http://pc2.2ch.net/hp/kako/1050/10500/1050086156.html
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1053619342/l50
【関聯スレッド】
・CSS/DHTMLバグ辞典スレッド 第3版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/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/06/14 05:38 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/06/14 05:39 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/06/14 05:39 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/06/14 05:40 ID:???
- 【FAQ】
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://alt.s31.xrea.com/overflow.html
http://alt.s31.xrea.com/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
なかよしぱれっと (ネスケ4でも崩れない段組みの実例)
http://village.infoweb.ne.jp/~fores/
- 7 名前:Name_Not_Found :03/06/14 05:41 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:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
「スタイルシート 縦中央(垂直中央)」参照のこと。
http://www.parkcity.ne.jp/~chaichan/qanda/qa3558.htm
Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
Q8.いままでHTMLでやってた××を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/06/14 05:44 ID:???
- 行数オーバーで>>2から省いた。
CSSでイケてるデザインサイト 14
http://pc2.2ch.net/test/read.cgi/hp/1054115237/l50
- 9 名前:Name_Not_Found :03/06/14 06:36 ID:???
- 10くらい(σ・∀・)σゲッツ!!
- 10 名前:Name_Not_Found :03/06/14 10:59 ID:???
- 10くらい(σ・∀・)σオッツ!!
- 11 名前:Name_Not_Found :03/06/14 11:45 ID:???
- >>1
乙。
- 12 名前:Name_Not_Found :03/06/14 15:59 ID:xIXD7C6B
- >>1
乙です
過去スレで
word-break: break-all;
というのが出てましたが、Netscapeで
半角英数字をテーブル幅に合わせ自動改行させることって
現代の科学ではまだ不可能なんでしょうか?
- 13 名前:かおりん祭 ◆dzq80gWuas :03/06/14 16:04 ID:???
- ∋oノハヽo∈ / ̄ ̄ ̄ ̄ ̄ ̄ ̄
( ^▽^) < 新スレおめでとうございま−す♪
= ⊂ ) \_______
= (__/"(__) トテテテ...
- 14 名前:Name_Not_Found :03/06/14 16:08 ID:???
- >12
max-width指定すればええんでないの?
- 15 名前:Name_Not_Found :03/06/14 17:17 ID:???
- >12
寝助と言うかほとんどのブラウザで無理じゃないの?
スペース空けたところで改行するようになってるような。
max-widthが効いたとして欧文の折り返し不可とどちらが強いのか…。
- 16 名前:Name_Not_Found :03/06/14 21:04 ID:???
- word-breakってCSS3じゃなかったっけ?
- 17 名前:Name_Not_Found :03/06/14 21:31 ID:???
- >>16 WinIE5以降は先取り実装してくれてる。
International Layout in CSS
http://east.portland.ne.jp/~sigekazu/css/international.htm#word-break
- 18 名前:Name_Not_Found :03/06/14 21:47 ID:???
- 初めて気付いたんだがOperaってcolへの指定無視するのな…。
- 19 名前:Name_Not_Found :03/06/14 22:56 ID:???
- >WinIE5以降は
勝手に
>先取り実装してくれてる
から困る。
- 20 名前:Name_Not_Found :03/06/14 23:02 ID:???
- IEが先取り実装してくれないと
有用性なんかのテストが出来ないと思われ。
その点でIEのやってる事は評価できる。
- 21 名前:Name_Not_Found :03/06/14 23:31 ID:???
- >>19
議論はこちらで。
独自拡張、草案段階のCSSについて語れ
http://pc2.2ch.net/test/read.cgi/hp/1019912046/l50
ハイ次の方、質問をどうぞ。
- 22 名前:Name_Not_Found :03/06/15 01:02 ID:???
- すいません、質問させて下さい。
テキストエリアで、
{border-width : 1pt;
border-style : solid;
border-color : #FFFFFF;
color : #777777;
background-color : #777777;}
と指定したら、
文字入力のカーソルがbackground-colorに近い色になってしまって困っています。
文字入力のカーソルの色の指定って出来るんでしょうか?
- 23 名前:Name_Not_Found :03/06/15 01:13 ID:???
- >22
cursorプロパティでカーソルごと変えるとか。
キャレット("|"みたいな奴)は変えられないと思う。
- 24 名前:12 :03/06/15 01:15 ID:???
- >>14-15
ありがとうございます。
max-widthってのを調べて試してみます。
上手くいったらいいな・・・
- 25 名前:Name_Not_Found :03/06/15 01:16 ID:???
- >22
カーソルって文字入力の〜って書いてることから察するにあの点滅してるやつだよねえ。
それなら無理。
あと関係ないが文字色と背景色が同じってどう言う目的でテキストエリアを使ってるのか気になる…。
余計ながら一つ提言しておくと、
そう言う観覧者の操作に直接関わってくる部分を無闇にCSSとかで色々指定するのは良くないかな…
操作に違和感があるとストレス溜まるしね。
#テキストエリアを別の目的で使っているなら話は変わるけど。
- 26 名前:Name_Not_Found :03/06/15 01:24 ID:???
- >>20-21
以下はスレ違いの発言だが、このスレの利用者全般に
言って置きたい事があるので敢えて書くことにする。
考案中のプロパティと同じ名称で先行実装することは、
後の正式仕様と、先行仕様との間に食い違いが発生し、
後方互換性に問題が生じることになる可能性をはらむ。
実験目的であるのであれば、「-moz-*」の様に標準仕様と区別すべき。
Micro$oft の独自拡張は、次世代仕様の実験を目的としているのでは無く、
便宜主義による勝手な先行実装か、マーケティング的な戦略であるに過ぎない。
要は、商業的に利益になれば何でもするという M$ の謀略である。
- 27 名前:Name_Not_Found :03/06/15 01:24 ID:???
- >>22
少し私なりに書き直してみました。
textarea {
border: 1pt solid white;
color: #777;// ←これは文字の色
background-color: #777;// ←これは背景の色
}
近い色どころかまったく同じ色です。それと、カーソルとは普通
マウスにあわせて動くポインタ(矢印)のことを指します。
- 28 名前:12 :03/06/15 01:31 ID:???
- max-widthは試した限りでは効かなかったんですが、
table {table-layout: fixed}
でNetscapeいけました。ただ、半角英数の部分が
テーブルから飛び出しますが・・・
- 29 名前:Name_Not_Found :03/06/15 01:40 ID:???
- 22です。
すいません。書き間違えてました。
color : #777777;ではなくて
color : #FFFFFF;の間違いでした。
打った文字は白で表示されるんですが
キャレットは#777777に非常に近い色になっている状態です。
>>23さん、>>25さん、>>27さん、
回答とご指摘(カーソルとキャレット)ありがとうございました。
- 30 名前:Name_Not_Found :03/06/15 01:50 ID:???
- ページの一番上に文字がつく方法を教えてください。
ぴったりくっつくやつ。
- 31 名前:Name_Not_Found :03/06/15 01:53 ID:???
- >>30
先にどっかで口の利き方覚えて来い
- 32 名前:Name_Not_Found :03/06/15 02:03 ID:???
- >>26
スレ違いだが激しく同意
つーか、やるならcss2を完全にしてからやれって
- 33 名前:Name_Not_Found :03/06/15 02:13 ID:???
- >>30
bodyのmargin-topとpadding-topを0にしろ。
- 34 名前:Name_Not_Found :03/06/15 02:17 ID:???
- >>28
max-width乃至widthをmin-widthと組み合せてもダメ?
- 35 名前:Name_Not_Found :03/06/15 06:11 ID:???
- overflow属性を弄って擬似フレームを使いたいのですが、
3分割の上、中、下のフレームがあるとして、
上、下のフレームのみ高さを固定したいのです。
heightを%指定しないで上手くいく方法はあるのでしょうか。
http://www.fromdfj.net/html/sample/overflowsample02.html
例えばこのデザインの上下のフレームの幅のみ固定したいのです。
後、弄るって漢字はエロイですね。
- 36 名前:Name_Not_Found :03/06/15 10:35 ID:???
- >>26
スレ違いで堂々と同意できないが(藁)激同。
で、後にプロパティの名称が変わっても
それには対応しないで新たな「独自拡張」ができていく罠。
- 37 名前:Name_Not_Found :03/06/15 12:00 ID:???
- >>26,36
おまえらバカか?
勝手に先行実装してるんじゃなくて、
草案の段階でも実装してフィードバックすることが求められるんだよ。
文句はW3Cに言え。
- 38 名前:Name_Not_Found :03/06/15 13:24 ID:???
- >>37
Webの機能性と相互運用性を高める事がW3Cの目的。
その活動を妨害している M$ は極悪なの。
これぐらいの事も理解できない馬鹿は(・∀・)カエレ!!
- 39 名前:Name_Not_Found :03/06/15 13:32 ID:???
- >>35
overflow を使わなくてもよいのであれば、
http://homepage.mac.com/mikihiro/md/web/model/
の model 2 と 3 を参考にしてみてください。
- 40 名前:Name_Not_Found :03/06/15 13:33 ID:???
- 何で議論してるバカが居るんだ?
- 41 名前:Name_Not_Found :03/06/15 14:43 ID:wjMRwnYl
- とりあえずage
- 42 名前:Name_Not_Found :03/06/15 21:34 ID:???
- http://www.interq.or.jp/rock/yuuloo/index.css
このスタイルシートどうでしょう?間違いとかあったら教えてください。
- 43 名前:Name_Not_Found :03/06/15 21:53 ID:???
- ";"の付け忘れがけっこうある。
- 44 名前:Name_Not_Found :03/06/15 21:59 ID:???
- >>43
そのセミコロンは基本的にどこにつければいいんでしょうか?
ぜんぜん初心者なもんで(´Д`;)
- 45 名前:Name_Not_Found :03/06/15 22:06 ID:???
- 頭遺体
- 46 名前:Name_Not_Found :03/06/15 22:18 ID:???
- >>44
>4にリストアップされたサイトで基本を勉強しましょう。
- 47 名前:Name_Not_Found :03/06/15 22:22 ID:???
- >>46
そうですね
- 48 名前:Name_Not_Found :03/06/15 22:33 ID:???
- arrow-colorとはスクロールバーのどの部分にあたるんでしょうか?
- 49 名前:Name_Not_Found :03/06/15 22:35 ID:???
- >48
矢印の部分。
- 50 名前:Name_Not_Found :03/06/15 22:57 ID:dkdArOHE
- 質問です。
SELECTのボックスの
外枠およびプルダウンの色を変えることってできますか?
- 51 名前:nobodyさん :03/06/15 23:04 ID:???
- http://www.geocities.co.jp/Playtown-Part/4519/
- 52 名前:Name_Not_Found :03/06/15 23:11 ID:3Asmwzps
- >>50
背景や文字色はできる
- 53 名前:Name_Not_Found :03/06/15 23:59 ID:???
- >>50
Border も使える。
- 54 名前:Name_Not_Found :03/06/16 00:14 ID:???
- >>50
というかブラウザによる。
- 55 名前:50 :03/06/16 00:19 ID:???
- ありがとうございます。
Border使えますか?
IE6なんですが、色変わらなかったんですよ。
- 56 名前:Name_Not_Found :03/06/16 04:09 ID:???
- ボーダーの角を丸くする事って出来ます?
テーブル使えばボーダーを画像で丸める事出来るけど、CSSでしたいので・・・
- 57 名前:216 :03/06/16 05:02 ID:???
- できますよ。
同じように画像で。
- 58 名前:Name_Not_Found :03/06/16 05:16 ID:???
- つか、ここはテンプレのリンクのためにあるスレなんだよ!
質問するヤシはあらし回答するヤシもあらしだバカ!
以降、保守のみ書き込みを許可する。
- 59 名前:Name_Not_Found :03/06/16 06:30 ID:???
- >>58
うるせーはげ
- 60 名前:Name_Not_Found :03/06/16 20:10 ID:???
- >>56
独自拡張を、活用しませう。
Mozilla/NN7なら-moz-border-radiusで、できる。
- 61 名前:Name_Not_Found :03/06/16 20:26 ID:???
- >>35
WinIEならダイナミック プロパティことexpression()関数を利用して、できる。
document.body.clientHeightを弄って。
http://www.microsoft.com/JAPAN/developer/library/jpwebwk/author/dhtml/dude061198.htm
- 62 名前:Name_Not_Found :03/06/16 20:48 ID:???
- >>55
CSS2対応状況ガイド
http://www.zspc.com/documents/css2/box/border.html
- 63 名前:Name_Not_Found :03/06/16 22:06 ID:???
- >>38
しったかぶりごくろう。
http://www.hotwired.co.jp/webmonkey/2000/22/index1a_page2.html
- 64 名前:2^6 :03/06/16 22:23 ID:z129NKbj
- 質問です.確認環境 win98 IE6
やりたいこと:
cgiでカレンダーをtableで作っていましたが,今まで各tdにおいって,
<td width="120" height="120">日付と内容</td>
としていましたが,これをcssを使って同様の効果を得たいです.
調べて理解したこと:
tdではwidthは効くがheightが効かない.inline要素では高さはline-heightで
決まるらしい.tdはblockでもinlineでもない.
知りたいこと:
tdの高さを固定することができるならば,どのように記述したらよいのでしょうか?
それともそうすべきでないのでしょうか?
現状の設定:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
tr{vertical-align:top;}
td{width:120px;}
//-->
</style>
<body>
<table border="1" >
<tr><td>内容と日付</td><td>内容と日付</td></tr>
<tr><td>内容と日付</td><td>内容と日付<br>改行</td></tr>
</table>
</body></html>
- 65 名前:Name_Not_Found :03/06/16 22:23 ID:???
- >>63
革新的な技術を導入するのは結構だが、5年前の仕様くらいはそろそろ完全対応してもらいたいものだ。
せっかくDOCTYPEスイッチなる逃げ道を用意できたのだからね。
- 66 名前:2^6 :03/06/16 22:36 ID:???
- >>64ですが,今自分でtdにheight:120pxと書いたらできました.
回線切って逝ってきます
- 67 名前:Name_Not_Found :03/06/16 22:36 ID:???
- >>64
普通に効くけど…height
あと、vertical-alignはtdに指定しないとダメでしょ。
- 68 名前:Name_Not_Found :03/06/16 22:38 ID:???
- >>60
確かにMozillaの拡張CSS使えば出来るけど、IEやOperaはどうする?
それに使っちゃいけないような事言ってたけど?
- 69 名前:Name_Not_Found :03/06/16 23:04 ID:???
- >それに使っちゃいけないような事言ってたけど?
気にするな。害は無いんだから。
- 70 名前:Name_Not_Found :03/06/16 23:10 ID:???
- あるとすれば、拡張cssが変更されて思い通りに表示されていない
スクリーンを見たときの作者の悲しみくらいだ。
害は無いな
- 71 名前:Name_Not_Found :03/06/17 00:51 ID:???
- 表を、ブラウザのウィンドウの大きさにかかわらず、常に右下にぴったりと
つけて表示させるためにはどうしたらよいでしょうか?
マージンの設定をいじってみましたが、上にしかくっつかないです。
お願いします。
- 72 名前:Name_Not_Found :03/06/17 00:57 ID:???
- >> 71
スクロールしても同じ位置に表示させたいならば
CSS2では
table{
position: fixed;
bottom:0;
right : 0;
}
で指定できる。
ただし、IEは未対応なのでJavaScriptを用いるなどして代替手段を講じる必要がある。
/*
この質問に答えるの3度目ですが。
*/
- 73 名前:71 :03/06/17 01:19 ID:???
- >>72
IE未対応ですか・・・。ありがとうございました。
- 74 名前:Name_Not_Found :03/06/17 01:23 ID:???
- >>72-73
WinIEでも、position: fixed;の代りにoverflowとbody,html要素へのheight指定とでできる。
- 75 名前:73 :03/06/17 02:19 ID:???
- >>74
ありがとうございます。
がんばってみます!
- 76 名前:Name_Not_Found :03/06/17 03:57 ID:???
- >>69
害はないけどw
でもmozillaのみでしょ?表示されるのは
ieとoperaでも見れなきゃ意味ないし
それとも、トップの分かりやすい場所に 「このwebページはMozillaでしか見るな」とでも付け加えろってか?w
- 77 名前:Name_Not_Found :03/06/17 06:21 ID:???
- ieとoperaで見られないことに意味がある。
- 78 名前:Name_Not_Found :03/06/17 07:55 ID:???
- でもシェア率No.1 InternetExplorer
- 79 名前:Name_Not_Found :03/06/17 08:55 ID:???
- しょうもなー!
- 80 名前:Name_Not_Found :03/06/17 11:40 ID:???
- ブラウザの振り分け等の方法もかなりあるし、
-mozを使いつつも(何もしなくても)IEで特に問題なしに使えるページだってやろうとおもえばできるさ
- 81 名前:Name_Not_Found :03/06/17 13:17 ID:???
- >>76 たかが角丸、丸くならなくても表の閲覧に支障は無いはず。
未対応のブラウザでもそれなりに見える、それが見栄えを分離したCSS設計のいいところ。
- 82 名前:Name_Not_Found :03/06/17 13:32 ID:???
- >>76
>それとも、トップの分かりやすい場所に 「このwebページはMozillaでしか見るな」とでも付け加えろってか?w
角が丸くないと見る価値無し、と?
内容の無いくだらねぇページだな。やめちまえ。
- 83 名前:Name_Not_Found :03/06/17 13:33 ID:???
- ulの丸を画像にして、更に横一列に表示させるのはできますか?
display:inline;を使うと画像が表示されずトホホです。
- 84 名前:Name_Not_Found :03/06/17 14:11 ID:???
- >83
li {display:inline;}
li:before {content:url('hoge.jpg');}
だがIEでは聞かない諸刃の剣。
li {
display:inline;
background:url('hoge.jpg') no-repeat left center;
padding-left:XXpx; /*画像の大きさ分の余白*/
}
少し強引に。
- 85 名前:83 :03/06/17 14:43 ID:???
- >84
少し強引な方を使わせて貰います。しかしoperaでは効かない罠。
ありがとうございました。
- 86 名前:Name_Not_Found :03/06/17 15:02 ID:???
- >>85
>しかしoperaでは効かない罠。
インライン要素に背景画像を指定できない(6.0)
http://cssbug.tripod.co.jp/detail/opera/b022.html
Opera7.0からは対応してます。
あと、display:list-item;になってる要素をdisplay:inline;にしたら
リストマーカーが消えるのは当り前。
floatで横一列に表示させればよいのに。liにmargin-leftとpadding-leftを設置するも忘れずに。
- 87 名前:86 :03/06/17 15:05 ID:???
- と思ったが、WinIEには別のバグがあるんだった。悩ましい……
絶対配置/フロート状態のリストアイテム要素のリストマーカーが消える(5.x/6.0)
http://cssbug.tripod.co.jp/detail/winie/b106.html
- 88 名前:Name_Not_Found :03/06/17 15:10 ID:???
- >>83-87
つまり、横一列に表示させるのはfloatでやって、
後は左端に背景画像を配置。
これならブロック要素だからOpera 6でも問題ないはず。
Mozilla/N7向けにはlist-style:none;としておく。
- 89 名前:Name_Not_Found :03/06/17 15:15 ID:???
- >Mozilla/N7向けにはlist-style:none;としておく。
display:block;の方がいいかも。
cf. http://cssbug.tripod.co.jp/detail/mozilla/b047.html
- 90 名前:Name_Not_Found :03/06/17 16:43 ID:???
- >89
floatした要素は常にdisplay:block;と扱われるはず。
実際どうだかは怪しいから指定しておいた方が良いと思うがナ
- 91 名前:Name_Not_Found :03/06/17 16:50 ID:???
- >>90 >floatした要素は常にdisplay:block;と扱われるはず。
リンク先を読めって。それはErrataで修正されたんだよ。
>CSS2.1では、displayプロパティがlist-item値の要素は
>フロート化してもlist-item値のままであると定義されています。
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=3093
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata#s-9-7
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
- 92 名前:Name_Not_Found :03/06/17 17:50 ID:???
- スタイルシートをランダムで変更して適用とかできませんか?
- 93 名前:Name_Not_Found :03/06/17 17:57 ID:???
- >>92 できますが、JavaScriptスレッドに相談しなさい
http://east.portland.ne.jp/~sigekazu/css/javascript3.htm
http://east.portland.ne.jp/~sigekazu/css/javascript9_4.htm
- 94 名前:Name_Not_Found :03/06/17 18:00 ID:???
- >>93
(´∇`)ありがとうございました
ココはCSS関係なのですね
- 95 名前:リナ :03/06/17 18:37 ID:???
- お聞きしたいのですが、
作ったホムペが、WINだとサイズ的に収まるんですが、MACだとはみ出してしまいます。
MAC側はIE5.1
WIN側はIE6.0
なんですが、関係しているのはOS?ブラウザ?でしょうか。
よろしくお願いします。m(_ _)m
- 96 名前:Name_Not_Found :03/06/17 18:43 ID:???
- >>95
OSだと思われ。
てか
そんな作り方じゃIE以外は全滅と心得よ。
- 97 名前:Name_Not_Found :03/06/17 19:11 ID:YoG9dVuv
- >>95
(*´Д`)ハァハァ探したぞ・・・・ハァハァ・・・ちかれた・・・・
最強ソフトを決めるスレで間違えてカキコしたろ。
きになって探しちまったよ。
そりゃソースの洗い直しだな。
- 98 名前:Name_Not_Found :03/06/17 19:18 ID:???
- >>97
こ、こんちくしょぉー!
リナだから気になったんだな!?
リナタソ (*´Д`)ハァハァ
- 99 名前:リナ :03/06/17 19:42 ID:???
- レスありがとうございます♪ヽ(´▽`)/
OSですかぁ。。
例えば、widthの数値なんかはパーセントで表したほうがいいのでしょうか?
馬鹿で ごめんなさい。。。
- 100 名前:Name_Not_Found :03/06/17 19:55 ID:???
- >>99
ブラウザのウィンドウサイズにそって表示したいのならパーセントでイイが
そうでなければピクセルしていでいんでないの?
- 101 名前:Name_Not_Found :03/06/17 20:13 ID:???
- 便乗質問いいですがよろしくです。
もってるPCがWINのみでMACもってる知り合いはいないのですが、
MACでの表示を確かめる方法はありますか?
- 102 名前:Name_Not_Found :03/06/17 20:24 ID:???
- >>101
自分の場合、
Gecko系、Operaは普通に確認。SafariにはKNOPPIX LinuxのKonquerorで確認。
どこまでちゃんと互換性があるか疑問だけど、まあこのくらいが限界でしょ。
MacIEはそのうち消える運命なので放置。
- 103 名前:101 :03/06/17 20:27 ID:???
- なるほど。
最後の一文にワラタっす。
どうも。
- 104 名前:リナ :03/06/17 20:27 ID:???
- >>100さん
Mac IE5で、「画像width="800"」が、はみ出てしまうみたいなんですが。。。
- 105 名前:Name_Not_Found :03/06/17 20:44 ID:???
- >>104
テーブルを入れ子にしてレイアウトしてる?
だったら中に入ったテーブルの横幅などもきちんとあわせたほうがいいよ。
主な原因として全体の数値より入れ子になった数値のほうが大きいとか数値が
矛盾しちゃってるんじゃないかな?
OSやブラウザーによって<table>の横幅と<td>の横幅のどちらを優先にするかが違うから
<table>タグはもちろん<td>の「widht」もきちんとあわせないと崩れるよ。
- 106 名前:リナ :03/06/17 21:01 ID:???
- >>104
うわぁ〜 その通りです。
テーブルの幅などをチェックしてみまーす。
ありがとうございました♪~♪ d(⌒o⌒)b♪~♪
- 107 名前:Name_Not_Found :03/06/17 22:20 ID:???
- ( ´,_ゝ`)プラットフォームの違いで同じ表現もできない
M$の糞ブラウザなんか捨てれ
- 108 名前:Name_Not_Found :03/06/17 22:32 ID:???
- >>106
と言うか、テーブルレイアウトはスレ違いだ。
- 109 名前:じゃあ :03/06/17 23:05 ID:???
- 何処のスレや!?( ´,_ゝ`)
- 110 名前:Name_Not_Found :03/06/17 23:34 ID:???
- 初心者は初心者用質問スレッドへ行きたまへ。
- 111 名前:Name_Not_Found :03/06/17 23:41 ID:???
- >>107-108
自分の思いどうりのレイアウトが出来ないヤツのぼやきだな。
利用者のシェア考えらればそれに対応して作るのは当たり前だろ。
- 112 名前:Name_Not_Found :03/06/17 23:55 ID:???
- けれども「テーブルレイアウトはスレ違い」なのに変りはない。>>111
CSSスレッドなんだからね。CSSでのやり方を訊くならともかく。
- 113 名前:Name_Not_Found :03/06/18 00:00 ID:???
- >>111 >思いどうりの
正しくは「どおり」ですね。歴史的仮名遣「どほり」→現代仮名遣「どおり」
- 114 名前:Name_Not_Found :03/06/18 00:02 ID:???
- レイアウトなんぞおおよそでいいからコンテンツの中身をきちんとしろ
- 115 名前:Name_Not_Found :03/06/18 03:23 ID:???
- まあそれ言ったらこのスレの存在意義もアレな感じだし。
きちんとマクアプしろって意味ならごめんよ。
- 116 名前:Name_Not_Found :03/06/18 05:13 ID:RFLSAg/4
- <INPUT TYPE=text NAME="名前" STYLE="background:#DDDDDD;color:#000000;border:1 solid #007dff">
上記フォームのSTYLE="〜〜"をCSSでするにはどのように記述すればよいでしょうか?
- 117 名前:Name_Not_Found :03/06/18 06:28 ID:???
- 既にCSSだけど。
もちっと正確に言えばstyle属性にCSSを使ってるやね。
#まあ、もしかしたらCSSと互換性のある別のスタイルシート言語かも知れんがそれは兎も角
CSSでするって具体的にどうしたいん。
- 118 名前:Name_Not_Found :03/06/18 06:34 ID:???
- >>113
通じてりゃ十分だろうが(ぷ
- 119 名前:Name_Not_Found :03/06/18 12:07 ID:???
- >>116
> border:1 solid #007dff
数値指定は"1px"とか、単位をつけなきゃだめ。
>>118
通じるけど、あほっぽく見えるよ。
- 120 名前:Name_Not_Found :03/06/18 12:26 ID:???
- >>116
※ hoge.css の内容
input.abc {
background-color: #dddddd;
color: #000000;
border: 1px #007 solid;
}
または、
input.abc {
background-color: #dddddd;
color: #000000;
border-width: 1px;
border-color: #007;
border-style: solid;
}
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="hoge.css" type="text/css" />
</head>
<body>
<input class="abc"... />
</body>
</html>
- 121 名前:Name_Not_Found :03/06/18 12:29 ID:???
- >>120
初心者相手に、なんでXHTMLにするかね……。
- 122 名前:Name_Not_Found :03/06/18 13:07 ID:???
- >>121
文書型宣言ないし、ルート要素に名前空間もないし、
ただ空要素タグ使ってるだけで、XHTML ではないと思われ。
- 123 名前:Name_Not_Found :03/06/18 13:23 ID:???
- 整形式なXML文書?
でもないか。
- 124 名前:120 :03/06/18 14:13 ID:???
- >>121-123
ああ、つい癖で空要素閉じちゃうんで(w
基本的なことだよ
- 125 名前:Name_Not_Found :03/06/18 16:41 ID:???
- 自己顕示欲満々ですね
- 126 名前:Name_Not_Found :03/06/18 16:48 ID:???
- 名前空間って何ですか?
- 127 名前: