/* CSS・スタイルシート質問スレッド【25】 */
/* CSS・スタイルシート質問スレッド【25】 */
- 1 名前:Name_Not_Found :03/11/19 13:34 ID:SK1Vr9dR
- 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://web2ch.s31.xrea.com:8080/?CSS
【FAQ】 http://web2ch.s31.xrea.com:8080/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com:8080/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com:8080/?CSSRelated
- 2 名前:Name_Not_Found :03/11/19 13:35 ID:SK1Vr9dR
- 【過去ログ】
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/hp/kako/1053/10536/1053619342.html
http://pc2.2ch.net/hp/kako/1055/10555/1055536413.html
http://pc2.2ch.net/hp/kako/1057/10578/1057860130.html
http://pc2.2ch.net/test/read.cgi/hp/1060869440/l50
【前スレッド】
http://pc2.2ch.net/test/read.cgi/hp/1066310242/
- 3 名前:Name_Not_Found :03/11/19 13:35 ID:???
- 【関連スレッド】
・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
・CSSでイケてるデザインサイト 18
http://pc2.2ch.net/test/read.cgi/hp/1065889619/l50
・CSSでデザインしたサイト 18
http://pc2.2ch.net/test/read.cgi/hp/1065882318/l50
【仕様書】
・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/11/19 13:35 ID:SK1Vr9dR
- 【解説など】
・ごく簡単な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/
・『スタイルシートWebデザイン』ボランティアHTML化版。
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・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.at.infoseek.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/
- 5 名前:Name_Not_Found :03/11/19 13:36 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/11/19 13:36 ID:???
- 【FAQ】
Q3: CSSで擬似フレームってどうやるの?
A3: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
http://alt.s31.xrea.com/tips/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/11/19 13:37 ID:SK1Vr9dR
- 【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.at.infoseek.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
HTML でのレイアウト指定の、 CSS での指定との対応表
http://deztec.jp/site/tips/page/p0037.html
- 8 名前:Name_Not_Found :03/11/19 13:42 ID:???
- >>3の【関連スレッド】の修正
CSSでイケてるデザインサイト 18
http://pc2.2ch.net/test/read.cgi/hp/1065889619/l50
は
CSSでイケてるデザインサイト 19
http://pc2.2ch.net/test/read.cgi/hp/1067806559/
に移っています。
- 9 名前:Name_Not_Found :03/11/19 13:42 ID:???
- >1
激しく乙。
- 10 名前:Name_Not_Found :03/11/19 13:44 ID:???
前スレッドでよくあった質問
Q:リンクした画像の線が消えません。
A:a:link img, a:visited img, a;hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
- 11 名前:Name_Not_Found :03/11/19 13:55 ID:???
- >>1
乙彼様でっす
- 12 名前:Name_Not_Found :03/11/19 14:00 ID:???
- >>9
>>11
いえいえ。
生まれて初めてのスレ立てでドキドキしまくった。
気付いた間違いは>>8で追記しておいたけど他に不手際あったらスマン
- 13 名前:Name_Not_Found :03/11/19 14:19 ID:???
- >>10
に関連する話なんですが、
a img {
border: 1px solid white;
}
a:hover img {
border: 1px solid red;
}
みたいに hover のときだけ枠出すようにしてるんですけど、
align="left" な画像だと、上の方しか枠が出ません。
文章の先頭行のベースラインで切れてるような感じです。
┏━━━━━━┓文章一行目
(以下枠出ない) 文章二行目
回避できるもんなんでしょうか?
- 14 名前:Name_Not_Found :03/11/19 14:23 ID:???
- align=left・・・
- 15 名前:Name_Not_Found :03/11/19 14:24 ID:???
- >>13
・OSやブラウザの種類とヴァージョンについては必ず明記してください。
- 16 名前:Name_Not_Found :03/11/19 20:38 ID:???
- >>14
何か変でしょうか?
>>15
すいません。忘れてました。
OS:Windows2000
ブラウザ:IE6.0
です。
- 17 名前:Name_Not_Found :03/11/19 21:41 ID:???
- align属性とか使わずにcss使ってください。cssのスレなんで・・・
- 18 名前:Name_Not_Found :03/11/19 22:02 ID:???
- >>17
いえ、ですから画像の枠のところのCSSをお伺いしたいんです。
それともこちらのスレではCSSで対応できるものについては
必ずCSSで書かないと駄目だというルールなのでしょうか?
それでしたら残念ですがあきらめます。
- 19 名前:Name_Not_Found :03/11/19 22:06 ID:???
- 別にそんなことはないだろうが、ただ回答者が萎えて答える気が起きないだけ。
- 20 名前:Name_Not_Found :03/11/19 22:17 ID:???
- >>19
わかりました。どうもスレ汚しすいませんでした。
- 21 名前:Name_Not_Found :03/11/19 22:24 ID:???
- もう、ほんま、リンクの色を変えるためだけにcssって存在してるんかなぁ、って思うことがしばしば
- 22 名前:Name_Not_Found :03/11/19 23:59 ID:???
- >>1
z
- 23 名前:Name_Not_Found :03/11/20 01:48 ID:???
- http://elith.at.infoseek.co.jp/main.htm
みたいな対話型のデザインをCSSで作って見ようと思って試していたのですが
MozillaFirebird0.7、Opera7.20では意図したとおりになるのですがIEでの動作おかしくなります
http://www.geocities.co.jp/Playtown-Knight/9224/test_dtdd.html
float周りの挙動がおかしいようなので、バグ辞典を探したのですが
http://members.at.infoseek.co.jp/cssbug/detail/winie/b079.html
違うなぁ…。という感じで迷っています。
何方か、原因、回避方法などをご存じでしたらご教授お願いいたします
- 24 名前:Name_Not_Found :03/11/20 01:57 ID:???
- >>18
もう少し前後のソースを出してくれない?
>>23
多分このバグだな。
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html
- 25 名前:Name_Not_Found :03/11/20 02:09 ID:???
- >>21
あと、テキストに背景色を付けるためとスクロールバーの色を変えるためにも。
- 26 名前:Name_Not_Found :03/11/20 02:15 ID:???
- >>23
pxの固定指定はあんまり感心しないが……。
できれば%かem指定がよくはないか? せめてddのwidthは無くすとか。
dt.left {clear:both; float:left;}
dd.left,dd.right {margin:5px 80px;}
dt.right {clear:both; float:right;}
dt {
width:75px;
height:75px;
margin:5px;
}
- 27 名前:Name_Not_Found :03/11/20 02:37 ID:???
- http://cssbug.at.infoseek.co.jp/detail/opera/b066.html
インラインフレームにz-indexが効かない(6.0/7.0)
http://cssbug.at.infoseek.co.jp/detail/opera/b067.html
:hover擬似クラス状態になることでマージンの幅が変化する
いづれもOpera7.22で見ると、そのページのソース例ではバグは発現しませんでした。
- 28 名前:27 :03/11/20 02:38 ID:???
- あ、バグ辞典スレッドに書き込むつもりで間違った。すみません。
- 29 名前:Name_Not_Found :03/11/20 03:19 ID:???
- >>23
どうも、ありがとうございます。バグ自体は、一度困らないとなかなか読んでもピンと来ない物で…
>>26
ddにもfloatを"当てないと"という先入観に捕らわれておりました。そうですね…。こうすれば良かったんですよね…。
結局IEで動かないので、しばらく実用化はおあずけになってしまいそうですが…(汗。
ポップアップキラー搭載のついでで、アップデートしてくれないかなぁ…(無理とは知っていますが
一応修正版です。
http://www.geocities.co.jp/Playtown-Knight/9224/test_dtdd2.html
ご協力、大変ありがとうございました。
- 30 名前:Name_Not_Found :03/11/20 03:25 ID:???
- >>29
>結局IEで動かないので、
? できてるやん。
- 31 名前:Name_Not_Found :03/11/20 03:34 ID:???
- >>1さんへ
いまさらだが、>>2の過去スレッド一覧から
前々スレッド(【23】)が抜けてますな。
これね。↓
http://pc2.2ch.net/test/read.cgi/hp/1064502391/l50
- 32 名前:Name_Not_Found :03/11/20 10:09 ID:???
- 今まで
<HR noshade size="1">
で横棒を表示させてたんですけど、
これをスタイルシートでやるにはどうしたらいいんですか?
1pxの黒い画像を用意して、それで表現するのも考えたんですが、
画像を表示させない設定だと消えてしまうので、出来れば<HR>を使ってやりたいです。
- 33 名前:Name_Not_Found :03/11/20 10:19 ID:???
- さすがにウンザリ
- 34 名前:Name_Not_Found :03/11/20 10:19 ID:???
- そしてゲンナリ。
- 35 名前:Name_Not_Found :03/11/20 10:22 ID:???
border:none;
border-top:1px solid #000;
height:1px
- 36 名前:32 :03/11/20 10:49 ID:???
- できました、ありがとうございます。
- 37 名前:Name_Not_Found :03/11/20 11:04 ID:???
- >>32
前スレッドで既出なんだよ。
http://pc2.2ch.net/test/read.cgi/hp/1066310242/939-943n
- 38 名前:Name_Not_Found :03/11/20 11:10 ID:???
- それでも教える奴は教えてくれるので、いつまでも同じ質問が続く事に。
- 39 名前:Name_Not_Found :03/11/20 11:44 ID:???
- HRでなく近接要素のborderで表現するって発想は出ないもんかね。
- 40 名前:Name_Not_Found :03/11/20 15:15 ID:+jAmOGf2
- cssで定義する場合、div と span どっちの要素を使うのか、少し悩みます。
また、その属性の class とi d もそうです。
用途で使い方が決まってるのでしょうか?
- 41 名前:Name_Not_Found :03/11/20 15:17 ID:???
- インラインとブロックで使い分けてください。
- 42 名前:Name_Not_Found :03/11/20 15:21 ID:???
- classとidは
前者は同一文書内に複数出現する可能性のあるもの、
後者は同一文書内に一つしか出現しないものに対して使ってください。
- 43 名前:Name_Not_Found :03/11/20 15:24 ID:???
- >>40
あまりよろしくない事ではあるけど、
よく分からないうちは全部classでも構わないと個人的には思う。
idとclassの意味やその使い分けを学ぶ前に覚えておく事も多いと思うしね。
- 44 名前:Name_Not_Found :03/11/20 17:19 ID:???
- スクロールバーの幅を変更することはできますか?
- 45 名前:Name_Not_Found :03/11/20 18:34 ID:???
- (´-`).。oO(・・・)
- 46 名前:Name_Not_Found :03/11/20 19:06 ID:???
- >41-43
ありがとうございました、基本的な事がわかってないみたいなので
逝ってきます。
- 47 名前:Name_Not_Found :03/11/20 19:36 ID:???
- >後者は同一文書内に一つしか出現しないものに対して使ってください。
id は同一文書内の或る要素を一意に識別したい場合に使ってください。
同一文書内に一つしか出現しないクラスというのも存在し得ます。
- 48 名前:Name_Not_Found :03/11/20 19:41 ID:???
- >>47
>複数出現する可能性のあるもの
ということは単一も内包してるんだけど。
- 49 名前:Name_Not_Found :03/11/20 20:48 ID:???
- <ul>にbackground-color適用した時にIEでは表示されてNNで表示されない様なのですが、これはブラウザ側の問題ですか?
- 50 名前:Name_Not_Found :03/11/20 20:53 ID:???
- >>49
ul liとやってみれ
- 51 名前:Name_Not_Found :03/11/20 21:02 ID:???
- >>50
どうしても<ul>全体に適用したいのですが・・・
やっぱり<div>で囲むしかないのかな
- 52 名前:Name_Not_Found :03/11/20 21:04 ID:???
- >>51
ul全体、って…
ul要素って何かわかってる?
- 53 名前:Name_Not_Found :03/11/20 21:05 ID:???
- >>48
出現回数ではなくて用途によって使い分けろってこと。
- 54 名前:Name_Not_Found :03/11/20 21:26 ID:???
- >>52
順序無しリスト・・・
- 55 名前:Name_Not_Found :03/11/20 21:32 ID:???
- >>49
NNてバージョンいくつ?
6以降は普通に適用できているが。
- 56 名前:Name_Not_Found :03/11/20 21:51 ID:???
- >>55
7.1です
- 57 名前:Name_Not_Found :03/11/20 21:54 ID:???
- あ、<ul>のheightをautoにしてたのが悪かったみたいです。
IEは<li>高さを継承して<ul>にも反映させてるみたいです。
- 58 名前:Name_Not_Found :03/11/20 22:02 ID:???
- >>57
二行目が気になる。 IEってそこまで腐ってるの?
- 59 名前:Name_Not_Found :03/11/20 22:25 ID:???
- >53
いや、>>42は「区別が出来ないならこれくらい覚えておくと無難」って話だろ。
正直、いろいろやらない(スタイルシートでの利用しか考えてない)ならクラスだけで充分だし、
「idは一回だけだヨ!」で問題ない。
- 60 名前:Name_Not_Found :03/11/20 23:11 ID:???
- >>59
納得した。
- 61 名前:Name_Not_Found :03/11/21 03:00 ID:???
- >>57はソース出しなよ。
もしかして、liにfloat指定してない?
- 62 名前:Name_Not_Found :03/11/21 08:45 ID:???
- style sheetで画像の高さの中間に文字を配置するにはどう書けば良いのですか?
これを変えたいです。
<a href="url">
<img src="img" align="middle">======<img src="img" align="middle">
</a>
- 63 名前:Name_Not_Found :03/11/21 08:53 ID:???
- img{vertical-align:middle}で事故解決しました
- 64 名前:Name_Not_Found :03/11/21 09:19 ID:???
- >>63
事故で解決したとはとんだラッキーボーイだな。
ってか、聞く前に試せるもんは全部試せよ。
- 65 名前:Name_Not_Found :03/11/21 11:49 ID:???
- 調べて見つからなかったのでカキコして
もう一度調べたら運良くみつ簡単だよ
- 66 名前:Name_Not_Found :03/11/21 12:12 ID:ftXfKsn5
- 質問です。
ラジオボタンへのCSS適用なんだけど、
MacIEだとbackground-colorで指定した色が、
○の背景に適用されるのね。
でも、winでは□に適用されるんですわ。
これって仕様?Winでも○の背景色を変える方法があれば
どなたか教えてください。
- 67 名前:Name_Not_Found :03/11/21 17:33 ID:???
- >66
そこまでこだわらんでも・・・
- 68 名前:Name_Not_Found :03/11/21 22:41 ID:8uCOBwgy
- 実現できなくてもいい事なんですが、
<A>タグなどの下線をテキストと別の色に・・・
無理?
- 69 名前:Name_Not_Found :03/11/21 22:43 ID:???
- borderなら可能だろうけど…
デコレーションの下線なら俺は無理だと思う。
- 70 名前:Name_Not_Found :03/11/21 22:43 ID:???
- >>68
テキストデコレーションを消して、ボーダーボトム。でそれにカラー。
聞き方気に入らんな。
- 71 名前:Name_Not_Found :03/11/21 23:02 ID:???
- >>68
CSS2 では前景色と同じ色になる仕様。
CSS3 では装飾線の色設定が可能になる。
http://www.w3.org/TR/css3-text/#text-decoration-color
- 72 名前:Name_Not_Found :03/11/21 23:57 ID:???
- >>68
ttp://www.mozilla.gr.jp/standards/webtips0002.html#c1_2
- 73 名前:Name_Not_Found :03/11/22 00:59 ID:???
- 下線のスタイルも指定できるんかー。
CSS3が普及するのはいつごろからなの?
- 74 名前:Name_Not_Found :03/11/22 01:18 ID:???
- 5年後。いや、永久に来ないかもしれない。
- 75 名前:Name_Not_Found :03/11/22 01:26 ID:???
- 5年以内にはgecko、operaは実装してるでしょ。
IEは…
- 76 名前:Name_Not_Found :03/11/22 12:06 ID:???
- 部分実装 + 独自拡張 + CSS1にすらまともに完全に対応しない + バグバグ
- 77 名前:Name_Not_Found :03/11/22 12:10 ID:???
- >>76
独自拡張 + Jscript + トリッキーな適用でcss3と同様なことが出来るようになる
そして、IEが標準厨が跳梁跋扈する((;゚Д゚)ガクガクブルブル。
- 78 名前:Name_Not_Found :03/11/22 12:43 ID:???
- CSS DESIGN @ 2ch { displaynone }
って今はもうないんでしょうか?板違い?
探してきます
- 79 名前:Name_Not_Found :03/11/22 13:54 ID:Zou8XQ47
- htmlで昔の日本のように「左から読む縦書き」にしたいのですが、
うまくいきません。
縦書きにはできるんですが、そのままだと右から左に向かって
文章が書かれてしまいますよね?
それを左から右へ読ませたいのです。
文章を<div>とかでくくってFlipH()というのを当てたら、左右の反転は
できるんですが、これだと文字まで左右反転してしまってよめません。
文字だけを左右に反転させるやり方があれば、鏡の原理(反転→反転)
で右から左へ文字が読めるようになるのではないかと思うんですが、
そんな方法ありますか?
それとももっと簡単に 右から左へ縦書きに文章を書く方法が
あったらご教授ください。
*html自体はいじらず、CSSだけで というのが大前提です。
- 80 名前:Name_Not_Found :03/11/22 13:57 ID:???
- >>79
BDO要素かな
- 81 名前:Name_Not_Found :03/11/22 14:01 ID:???
- >昔の日本のように「左から読む縦書き」
これの意味がわからないんだけど
- 82 名前:Name_Not_Found :03/11/22 14:15 ID:???
- 俺も意味が分からないが、BDOかな。
<div dir="ltr">
ltr=left to right
rtl=right to left
の意味
- 83 名前:80 :03/11/22 14:22 ID:???
- >81
>82
>右から左へ縦書きに文章を書く方法が
つってるから焦ってたんだろ。
>79
雰囲気を優先させて、常連が去る予感
そんな読みにくいもん何度も見に行くと思うか?
BDO要素とは言ったが、
>*html自体はいじらず
とか制限つけちゃってるのね。
- 84 名前:79 :03/11/22 14:23 ID:???
- >>80 ドモ
ちょっと調べてみたんですが、BDOって↓みたいにくくらないと
<bdo dir="rtl">テスト</bdo>つかえ無くないですか?
今は → <p>テスト</p>とかになってるので、
これを書き直すのはつらいんですが、CSSから指定できるんでしょうか?
>>81
「右利きの人が手で文字を汚さないように左から右へ書く縦書き」
と書くべきでしたか。
- 85 名前:79 :03/11/22 14:25 ID:???
- 書いてる間にレスが・・・
できるかどうかっていう好奇心の方が大きいので。
連続カキコ&スレ汚しすいません。
- 86 名前:Name_Not_Found :03/11/22 14:26 ID:???
- >>84
ああ、そういう意味か。
ないな。
- 87 名前:Name_Not_Found :03/11/22 14:32 ID:???
- directionとunicode-bidiあたりを調べてみれ
http://hp.vector.co.jp/authors/VA022006/css/visualren.html#directions
- 88 名前:Name_Not_Found :03/11/22 14:33 ID:Xbdiiqpi
- テーブルレイアウトをやめて、スタイルシートで頑張ってみようと思っています。
以下のように書いたら、三行三列のようなレイアウトは出来たのですが、
この三行三列の塊の横幅を固定したいと思い、<body style="width:500px;">を入れてみても500px以上に広がってしまいます。
どうすればよいのでしょうか?
<html>
<head>
</head>
<body style="width:500px;">
<div style="float:left;width:30%;background-color:red;">
<div>a</div>
</div>
<div style="float:left;width:40%;background-color:gray;">
<div>b</div>
</div>
<div style="float:right;width:28%;background-color:blue;">
<div>c</div>
</div>
</body>
</html>
- 89 名前:Name_Not_Found :03/11/22 14:37 ID:???
- >>88
なんだ?脳みそが腐ってるのか?
全然固定されてるじゃねえか。
まさかてめえ「ブラウザを広げることができなくなる」とか思っちゃいねえだろうな?
- 90 名前:Name_Not_Found :03/11/22 14:46 ID:Xbdiiqpi
- >>89
えと、テーブルでレイアウトを組んでいたときは、テーブルの幅を500pxに固定して真ん中表示にしたら、
ブラウザを全画面表示にしても、真ん中の500pxの幅の中にしか文字が表示されない状態だったのです。
>>88のように描いてみても、ブラウザの画面の大きさに合わせて500px以上に広がってしまうんです。
<html>
<head>
</head>
<body style="text-align:center;">
<div style="width:500px;" align="center">
<div style="float:left;width:10%;background-color:red;">
<div>a</div>
</div>
<div style="float:left;width:50%;background-color:gray;">
<div>b</div>
</div>
<div style="float:right;width:38%;background-color:blue;">
<div>c</div>
</div></div>
</body>
</html>
こうやってみたら、うまく再現できたのですが、これは適切な書き方なのでしょうか・・・???
- 91 名前:Name_Not_Found :03/11/22 14:49 ID:???
- まず環境を書こうぜ
- 92 名前:Name_Not_Found :03/11/22 14:49 ID:???
- >>90
強いて言うと、激しく汚い。
これでは脱テーブルの恩恵は薄いな。
全くさらのデザインしよう、とかはないかな?
- 93 名前:Name_Not_Found :03/11/22 14:50 ID:???
- >>90
IE6だと正常に表示されてるけど。
ブラウザは何を使ってらっしゃるので?
- 94 名前:Name_Not_Found :03/11/22 14:50 ID:Xbdiiqpi
- >>91
済みませんでした。
OSはWindowsXPで、ブラウザはIE6です。
- 95 名前:Name_Not_Found :03/11/22 14:52 ID:???
- あれ?俺と同じ。
至って正常に表示されとるが…。
- 96 名前:88 :03/11/22 14:54 ID:???
- >>92
ちょっと再現できるか試してみています…。
きたない、というのは、書き方ですよね?
デザインとしては、http://alt.s31.xrea.com/index.html ここのようなかたちを目指しています。
>>93
>>88のように、bodyの中で指定してもダメ、ということなんですね・・・。
ありがとうございました。
- 97 名前:Name_Not_Found :03/11/22 14:57 ID:???
- >>96
> きたない、というのは、書き方ですよね?
・div要素多用しすぎかな
・コンテントを入れてないのは気持ち悪いかな
・幅固定は好ましくないかな
- 98 名前:Name_Not_Found :03/11/22 15:00 ID:???
- あんま焦らず地道にやって行った方がいいよ。
いきなり凄いサイトみたいにできるわけないからさ。
- 99 名前:Name_Not_Found :03/11/22 15:02 ID:???
- >>96
> デザインとしては、http://alt.s31.xrea.com/index.html ここのようなかたちを目指しています。
そこは固定などといったクソなことはやってないんだけど。
- 100 名前:88 :03/11/22 15:14 ID:???
- >>97
コンテント・・・c⌒っ*゚д゚)φ メモメモ
>>98
まず、http://alt.s31.xrea.com/index.htmlのサイトのスタイルシートを切った状態の並び方とかから参考に始めてみます!
>>99
マージンで左右余白取ればいいだけのことでした…ページの中の表示のされ方を固定すると、スタイルシートでデザインする意味がないんですよね…???
うー…難しい…少しずつ、頑張ってみます。
ありがとうございました。
- 101 名前:Name_Not_Found :03/11/22 15:18 ID:???
- まず正しいHTMLを学ぶ
次にCSSを、実際に適用しながら勉強していく。
そして上手になる。と、こんな感じが近道。
- 102 名前:Name_Not_Found :03/11/22 15:18 ID:???
- >>100
コンテント=開始タグと終了タグの間にあるもの。内容。
俗に「空DIV」と呼ばれ気持ち悪がられる。
とりあえずブラウザを半分にまで縮めて横スクロールバーが出ない、くらいからはじめてみて。
- 103 名前:88 :03/11/22 15:24 ID:???
- >>101
はい!
>>102
http://tohoho.wakusei.ne.jp/css/reference.htm#content
これのことかと思ってしまいました・・・。
連休中、勉強してみます。
ブラウザ半分で横スクロールなしから始めてみます!
まず、スタイルシートなしで、項目が順序だてて並んでいる状態を作ります。
本当にありがとうございました。
- 104 名前:Name_Not_Found :03/11/22 15:28 ID:???
- >>103
こっちだ。
ttp://www.rju666.com/web/reference/index.html#t_content
- 105 名前:Name_Not_Found :03/11/22 17:10 ID:???
- paddingやmarginで指定する幅はpxとemと%、どれが一番いいんでしょうか。
- 106 名前:Name_Not_Found :03/11/22 17:12 ID:???
- >>105
emか%。
- 107 名前:Name_Not_Found :03/11/22 17:24 ID:???
- >>105
%かpx。
- 108 名前:Name_Not_Found :03/11/22 17:25 ID:???
- >>105
むしろ指定しない。
- 109 名前:Name_Not_Found :03/11/22 18:40 ID:???
- >>106-108
ありがとうございます。
fontの大きさは%とsmall(large)とどっちで書けばいいんでしょうか。
これも出来れば細かく指定しないほうがいいのでしょうか。
- 110 名前:Name_Not_Found :03/11/22 18:59 ID:???
- 指定しなくていいなら指定しない方がいい。
見に来る人全員が、"いつものサイズ"で見れるからな。
- 111 名前:Name_Not_Found :03/11/22 19:05 ID:???
- >>103
とりあえず、<div>と<span>がなくても正しくマークアップ出来ているかどうかをチェックするようにするといいよ
- 112 名前:Name_Not_Found :03/11/22 19:10 ID:???
- padding には percentage の値はないから em だな。
- 113 名前:Name_Not_Found :03/11/22 20:01 ID:???
- >112
あるよ
- 114 名前:Name_Not_Found :03/11/22 20:09 ID:???
- >>84「右利きの人が手で文字を汚さないように左から右へ書く縦書き」
そんなのは昔の日本でも珍例だ。
ましてや横書きなら、右横書きは殆ど1行の場合だけ。
2行以上にわたる文章では右から左へが昔も今も日本語表記の基本則です。
なぜ縦書き日本語文は右から左に向かって書く?
http://academy2.2ch.net/test/read.cgi/gengo/958570141/
- 115 名前:114 :03/11/22 20:13 ID:???
- 訂正。
>2行以上にわたる文章では右から左へが昔も今も日本語表記の基本則です。
2行以上にわたる文章では横書きでは左から右へ
縦書きでは右から左へが、昔も今も日本語表記の基本則です。
- 116 名前:Name_Not_Found :03/11/22 21:01 ID:???
- スレ違いです。
- 117 名前:Name_Not_Found :03/11/22 21:44 ID:???
- リンクされてある部分にマウスカーソルをあてると
下線が出てきて下線が点滅するという方法がありましたら教えて下さい。
- 118 名前:Name_Not_Found :03/11/22 21:56 ID:???
- 下線だけ点滅となるとJavaScriptか?
:hover時だけ背景画像にアニメーションGIFを指定するというのもありそうだが。
- 119 名前:117 :03/11/22 22:30 ID:???
- >>118
あ、なるほど。その手もありますね。
早速やってみます。ありがとうございました〜
- 120 名前:Name_Not_Found :03/11/23 00:14 ID:???
- <ul>
<li>a
<li>b
<li>c
<li>d
<li>e
</ul>
これをスタイルシートで
a b c d e
と横並びに表示させるにはどうすればいいですか?
- 121 名前:Name_Not_Found :03/11/23 00:20 ID:???
- li{float:left;}
もしくは
li{display:inline;}
FAQだな。
- 122 名前:Name_Not_Found :03/11/23 00:38 ID:???
- >>121
ありがとう!じっくり読んでみる!
- 123 名前:Name_Not_Found :03/11/23 11:32 ID:???
- http://www.toyamaken-pta.gr.jp/
ここにある 小さな■って、どう表現しているのですか?
- 124 名前:Name_Not_Found :03/11/23 11:35 ID:???
- >>123
左のボーダーを1emにしてるだけ。
- 125 名前:124 :03/11/23 11:37 ID:???
- >>123
リストの■なら、
list-style-type:square;
- 126 名前:Name_Not_Found :03/11/23 11:42 ID:???
- うわぁ…
全然違う事考えてた…
即レスありがとう これで思い通りのサイトが作れそうです
さんくす!
- 127 名前:124 :03/11/23 11:43 ID:???
- >>126
で、どっちだったんだ?124は上の方の青い■だぞ。
- 128 名前:Name_Not_Found :03/11/23 11:46 ID:???
- あ、すいません、125の事です
■〜〜〜
■〜〜〜
の方です
- 129 名前:Name_Not_Found :03/11/23 11:49 ID:???
- おお
できた!
処理の意味とかよくわかんないけどとにかく できました
ありがd
きちんと意味も学んでおきます
初心者がギャーギャーとすいませんでした
本気で感謝してます
- 130 名前:Name_Not_Found :03/11/23 11:58 ID:???
- >>129
おまえだれだ?
だれかわかれば説明してやるが。
- 131 名前:Name_Not_Found :03/11/23 13:54 ID:???
- >>129 は、初心者
>>130 は、暇人
- 132 名前:130 :03/11/23 14:55 ID:???
- >>131
番人っつー仕事は暇なんよ。
- 133 名前:Name_Not_Found :03/11/23 15:48 ID:???
- <SPAN onmouseover="this.style.background='red';" onmouseout="this.style.background='blue';">
背景色変更</SPAN>
これを外部ファイルに書いて、それをクラス指定でhtmlファイルに反映したのですが、
外部ファイルへの書き方がよく分かりませんでした。
どなたか分かる方いましたらお願いします。
- 134 名前:Name_Not_Found :03/11/23 15:52 ID:???
- >>133
それは外部ファイルにできないだろ・・・
- 135 名前:Name_Not_Found :03/11/23 16:01 ID:???
- >>133
今手元にリファレンスや開発環境がないので多分動かないと思うが参考までにどうぞ。
window.onload = hoge;
function hoge(){
var objs = document.getElementsByTagName("span");
for(var i = 0; i < objs.length; i++){
objs[i].onmouseover = "this.style.background='red'";
objs[i].onmouseout = "this.style.background='blue'";
}
}
- 136 名前:Name_Not_Found :03/11/23 16:10 ID:???
- >>134
まじっすか
>>135
親切にも、どうもです。
試してきますm(_ _)m
- 137 名前:Name_Not_Found :03/11/23 16:26 ID:rghaQRPI
- あげ
- 138 名前:88 :03/11/23 16:32 ID:???
- >>111
ごちゃごちゃしたテーブルタグ一掃して、見出し、段落、リストぐらいのスッキリしたhtmlになりました。
自分で見ていて、ヒジョーにみやすいです。
スタイルシートの書き方一つでサイトのデザインが物凄く変わり、はしゃいでます!
idやclassの作り方が、今まではその場その場の思いつき(ここの色を変えよう、というだけとか)だったんですが、
最初にこれをきちんと考えてやれば、スタイルシートを書き換えるだけでコンテンツメニューを上にも右にも下にも、自由に動かせてデザインできることがよく分かりました!
これからそこら辺をきちんと考えて、classとか作っていってみます。
- 139 名前:Name_Not_Found :03/11/23 17:41 ID:???
- >>133
外部ファイルに
span {background: blue;}
span:hover {background: red;}
IEじゃうまく適用できないがな。
- 140 名前:くろさん :03/11/23 18:55 ID:zULC30g6
- テーブル幅を固定するには「table-layout=fixed & widht= NOT auto」こと、教えていただきありがとうございました。
さて、moz, operaでは、colへの属性指定は、tdに伝わらないのでしょうか?
IE6だと、2つ目のabcdefは赤色になるのですけどね。
またまた、moz,operaの方が「正しいCSS」なのでしょうか。
<html>
<head>
<style type="text/css">
body { font-size: 12px;}
col.change { color : red; }
</style>
</head>
<body>
<table border="1">
<col></col>
<col class="change"></col>
<tr><td>ABCDEFG<td>abcdefg
</table>
</body>
</html>
- 141 名前:Name_Not_Found :03/11/23 19:00 ID:???
- アカン、12Pxに吐き気が・・・
- 142 名前:133 :03/11/23 21:08 ID:???
- >>139
レスありがとうございます。う〜む、背景色変更は我慢して
span {background: blue;}
で間に合いませます。ありがとうございました。
- 143 名前:Name_Not_Found :03/11/23 21:34 ID:???
- >>142
てか、糞IE使うのやめろ
- 144 名前:139 :03/11/23 21:57 ID:???
- >>143
IEを使うのは作成者ではなく訪問者なのだよ。
残念だけどな。
少しは脳味噌使おうな。
- 145 名前:Name_Not_Found :03/11/23 22:54 ID:???
- >>140
Opera は今ちょっと環境が無いので分からんけど、
Mozilla だと col には border, background, width, visibility しか適用されない。
セレクタを使ってセル (th, td) に直接指定しろ、と。
Bug 1561 - [INVA] COL要素、COLGROUP要素からtext-alignが継承されない
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=1561
- 146 名前:Name_Not_Found :03/11/23 23:02 ID:???
- >>145
それってバグなんかなぁ・・・?
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/tables.html#q4
> 以下のプロパティは列要素や列グループ要素にも適用できる:
> 'border' 'background' 'width' 'visibility'
この中に text-align は含まれないけど、これは「text-align を含まなくてもよい」
なのか「text-align を含んじゃダメ」なのかがイマイチよくわからん。
- 147 名前:Name_Not_Found :03/11/23 23:45 ID:???
- >>144
訪問者も糞IE使うのやめればいいことだ
脳みそ使う前の問題
- 148 名前:Name_Not_Found :03/11/24 00:34 ID:???
- >>146
含む含まないの問題ではなくて、CSS2のモデル的にはcolからセルにtext-alignは継承されないという話。
colは空要素なのでtext-alignを適用しても意味ない。
border,background,width,visibilityが適用されるのはセルではなくてcol。
仕様書のtable,colgroup,col,tbody,row,cellの順に重なってる図を見れば理解の助けになると思われ。
- 149 名前:Name_Not_Found :03/11/24 01:05 ID:???
- overflowによる疑似フレームをサイトに利用しています。
その疑似フレームを使ったサイトをブラウザで最大化で見る分には問題有りませんが、
ウィンドウ幅を少し縮めると横スクロールバーが表示されてしまうのですが、これを解決する方法ってないでしょうか?
どなたか解る方お願いします。
- 150 名前:Name_Not_Found :03/11/24 01:10 ID:???
- >>149
仮にmenuとmainに振り分けてるとするならば、main側の横幅をautoにする。
- 151 名前:Name_Not_Found :03/11/24 04:47 ID:???
- overflowはMacだとIEでもOperaでもバグがでるからなー
- 152 名前:Name_Not_Found :03/11/24 09:46 ID:???
- まぁmacなんて使ってるヤツほとんどいないから
無視していいんじゃないの?
- 153 名前:Name_Not_Found :03/11/24 10:01 ID:???
- まあMacOpera7が出たらOpera6は切ってもいいと思うが
ホントに今年中に出るんかな。
- 154 名前:149 :03/11/24 11:28 ID:???
- >>150
レスありがとうございます。
ただ試行錯誤中です...できたら報告しにきます
- 155 名前:149 :03/11/24 11:47 ID:???
- >>150
BODYにoverflow:autoを付加してみましたら出来ました!
ありがとうございました。
>>151
おかげで別館を造るはめに(つД`)
- 156 名前:Name_Not_Found :03/11/24 13:34 ID:SS4OxOvP
- age
- 157 名前:Name_Not_Found :03/11/24 14:29 ID:???
- >>155
CSS切り替え機能つければイインジャネーノ?
- 158 名前:Name_Not_Found :03/11/24 15:35 ID:???
- バグ・未実装を利用してスタイル指定を振り分ければいいだけでは。>>155
http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
http://cssbug.at.infoseek.co.jp/detail/opera/b013.html
http://cssbug.at.infoseek.co.jp/detail/macie/b030.html
http://cssbug.at.infoseek.co.jp/detail/macie/b009.html
- 159 名前:Name_Not_Found :03/11/24 18:39 ID:???
- メモ。
MS-IEのDOMリファレンス
http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/domrefs.asp?frame=true
CSS属性リファレンス
http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/references/cssrefs.asp?frame=true
- 160 名前:Name_Not_Found :03/11/24 18:43 ID:???
- こっちのほうがいいか。
http://www.microsoft.com/japan/msdn/library/default.asp?url=/japan/msdn/library/ja/jpisdk/dhtml/references/dhtmlrefs.asp?frame=true
- 161 名前:155 :03/11/24 18:45 ID:???
- >>157-160
自分がいない間に有益な情報をありがとうございます。
CSSの切り替えなんて知りませんでした。使いこなせば便利そうなので
これからリンク先を見て勉強してきます。
レスありがとうございます。
- 162 名前:155 :03/11/24 20:37 ID:???
- overflow:autoを使って疑似フレームを再現してるサイトなだけに
CSSを切り替えたとしても、内容を書き換えないといけないため無理なような気がしてきました。
別の方法として、Mozilla、Operaだった場合に
http://www.fantasy/~aaa/index.html がIEの行き着くページだとしたら、Mozilla、Operaでは
http://www.fantasy/~aaa/bbb/index.html に行くようにしたいのですが、これは無理でしょうか?
- 163 名前:Name_Not_Found :03/11/24 20:39 ID:???
- >>162
そりゃjsかphpなら可能だろう。
- 164 名前:155 :03/11/24 20:49 ID:???
- >>163
可能ですか。
出来ると分かった所で、自力で使えるように頑張って勉強してきます。
レスありがとうございました。
- 165 名前:Name_Not_Found :03/11/24 20:52 ID:???
- ただ、Operaの場合はブラウザをMozillaに認識させる等の機能があるからOperaは無理と思われ・・・。
- 166 名前:Name_Not_Found :03/11/24 21:03 ID:???
- js ならUA偽装してても if (window.opera) ... でイケるでしょ
- 167 名前:Name_Not_Found :03/11/24 21:30 ID:???
- それに navigator.userAgent の情報には
Opera っていう文字が末尾に記述されてある。良心的。
それに navigator.appName も Opera って返ってくる。
- 168 名前:Name_Not_Found :03/11/24 21:49 ID:???
- >>162
擬似フレームかどうかだけで内容を書き換えないといけないようなつくりなら
まず、マークアップを見直したほうが良い。
ちゃんとマークアップされていれば、CSSを替えただけじゃ破綻しないよ
- 169 名前:Name_Not_Found :03/11/24 23:05 ID:???
- js ありなら
>150 の例えでいうと、main を overflow させるよりも、
menu を js で固定させるほうが早いような気がする。
つか、俺はそうしてる。
- 170 名前:Name_Not_Found :03/11/24 23:10 ID:???
- 意味も無く、自分の考えだけで overflow を使ってるサイトは
見づらい糞サイトだ(w
- 171 名前:155 :03/11/24 23:14 ID:???
- 164下の情報ありがとうございます。
少し調べていましたが先は長そうです・・
でもがんばります。それでは /ノシ
- 172 名前:Name_Not_Found :03/11/25 02:23 ID:lBdLUhr9
- 単純な質問ですいません。
CSSで背景に画像を適用させて、その画像にフィルター
filter:Alpha(opacity=20)とかをかけたいんですが、
どうもうまくいきません。
body {background-image:url(back.png); filter:Alpha(opacity=20);}とすると
bodyの全部にフィルターがかかってしまうのです。
どうやったらうまくいくでしょうか?
- 173 名前:Name_Not_Found :03/11/25 02:30 ID:???
- 背景だけにフィルタをかけるのは多分無理。
が、position や z-index をうまく使って背景のように見せることはできるかもしれない。
- 174 名前:Name_Not_Found :03/11/25 02:33 ID:???
- >>172
背景にフィルタはむりぽ
- 175 名前:172 :03/11/25 02:56 ID:???
- >>173-174
そうなんですか。
残念。
>>173さんの教えてくれた技でなんとか頑張ってみます。
即レスThanksです
- 176 名前:Name_Not_Found :03/11/25 07:42 ID:???
- >>175
画像のほうに手を加えれば?
- 177 名前:Name_Not_Found :03/11/25 11:40 ID:???
- なんか、155君はよくわかってない感じですな。
- 178 名前:172 :03/11/25 11:42 ID:???
- >>176
フィルタで半透明にしたかったんですが、画像の処理で
半透明にするやり方がわからずあきらめました。
連続質問になってしまって申し訳ないですが、
あともう一つ教えてもらえませんでしょうか?
用途としては、h1などのタイトルの左横に画像(40*40px)をいれて、
その画像の横にタイトルがくるようにしたいのですが、
h1 {background-image:url(./h1-back.png); background-repeat:no-repeat:
padding-left:40px; font-size:1em;}
としたら、画像の横に文字は出るんですが、文字が画像の上のほうに
でてしまいます。
なんとか画像の中央横に文字を出したいんですが、どうしたらいいでしょうか?
vertical-align:sub;とやってもうまくいかなかったのです
- 179 名前:Name_Not_Found :03/11/25 11:57 ID:???
- 基本。paddingを設定汁。
- 180 名前:Name_Not_Found :03/11/25 12:09 ID:???
- >>178
「画像の中央横に文字」じゃなくて、「文字の中央横に画像」なら
h1 {
padding-left:40px;
background-image:url(h1-back.png);
background-position:left center;
background-repeat:no-repeat;
font-size:1em;
}
で。
- 181 名前:Name_Not_Found :03/11/25 12:32 ID:???
- >>178
h1 {line-height:1.0; vertical-align:middle;}
<h1><img src="./h1-back.png" alt="" width="40px" height="40px">見出し</h1>
では駄目なのか?
- 182 名前:Name_Not_Found :03/11/25 12:34 ID:???
- >>181
Coolじゃない
- 183 名前:Name_Not_Found :03/11/25 12:44 ID:???
- Coolとは如何なるものなりや。
ところで、img要素でいいところまでbackground-imageを多用する人、
たまに見かけない? div中毒みたいなもん。
- 184 名前:Name_Not_Found :03/11/25 12:59 ID:???
- 極論を言えばimg要素は必要なくて、すべて背景として処理すべきだ、と言えなくもない
- 185 名前:172 :03/11/25 13:02 ID:???
- >>179-182 ども
>>180
おっしゃるとおりに書いたら確かに文字の横に画像が表示されました。
ただ、画像の上下端が切れてしまったので、height:40px;と指定したところ
文字が中央ではなく上に出てしまいます。
画像が文字より小さい場合は問題ないようなんですが、私の場合、
うまくいかなかったです。
>>181-182
CSSを切り替えて遊べるというのを見てちょっといじってるのでhtml本体
はいじれないんです。すいません
>>179
padding:20px 0 0 40px;で見た目は文字が中央になったんですが、
こういうことですか? 全然違います?
- 186 名前:Name_Not_Found :03/11/25 13:06 ID:???
- 面倒だから line-height: 40px にしとけ
- 187 名前:Name_Not_Found :03/11/25 15:56 ID:???
- あのう、body { font-size: 12px;}で
12pxで吐き気……
>>140->>141
というのを読んでの質問なんですが、
読みやすさ等の為に文字サイズを16pxで指定して
小さすぎず、大きすぎず、年配の方にも……
と思っているのですが、これって適正でしょうか。
スレ違いでしたら、すんません。
- 188 名前:Name_Not_Found :03/11/25 15:59 ID:???
- 12は論外だとしても、大きい小さいは実はあまり関係がない
ユーザーが、簡単に自身の好みに変更できる事が重要
- 189 名前:Name_Not_Found :03/11/25 16:08 ID:???
- >>187
絶対指定とpx以外にするとよいよ。
- 190 名前:Name_Not_Found :03/11/25 16:09 ID:???
- >>188
12ってそんなに小さいかね?
モニタの解像度いくつなん?
- 191 名前:Name_Not_Found :03/11/25 16:11 ID:???
- >>190
脳みそ足りてるか?
px指定すんなヴォケ、と言ってるんだよ。脳みそ足りてない書き込みすんな。
- 192 名前:190 :03/11/25 16:11 ID:???
- 書き忘れ。
漏れは 19inchCRT で 1280*1024 と、
17inchCRT で 1024*768
- 193 名前:Name_Not_Found :03/11/25 16:13 ID:???
- >>192
お前の陳腐なマシンなんぞ興味ねえよ。
俺が55度のシャワーを熱くないと感じてても、俺が風呂屋の主ならそんな風呂は用意しないな。
- 194 名前:Name_Not_Found :03/11/25 16:13 ID:???
- >>187
読みやすいサイズというのは人によって違うので
IEでもブラウザで変更できるようにpxやptを避けるほうが吉
- 195 名前:Name_Not_Found :03/11/25 17:29 ID:???
- >>187です。
皆さん有り難うございました。
emかexで頑張ってみることにいたします。
お邪魔いたしました。
- 196 名前:Name_Not_Found :03/11/25 17:35 ID:???
- >>195
%でもおけーよ。
- 197 名前:Name_Not_Found :03/11/25 18:06 ID:???
- むしろ%推奨というか。
em指定はIEでの不具合があっただろ
- 198 名前:Name_Not_Found :03/11/25 19:31 ID:???
- >>197
%はmacIEでネストバグがあるよ。
- 199 名前:Name_Not_Found :03/11/25 21:01 ID:???
- またまたこの話題ですか。
こっちでやりなされ。↓
フォントサイズについて考えよう
http://pc2.2ch.net/test/read.cgi/hp/1042293757/l50
- 200 名前:Name_Not_Found :03/11/25 21:04 ID:???
- ネストってなに?
- 201 名前:Name_Not_Found :03/11/25 21:23 ID:???
- >>200 質問の前に辞書位は引いてね。
三省堂提供「デイリー 新語辞典」より
http://dictionary.goo.ne.jp/search.php?MT=%A5%CD%A5%B9%A5%C8&kind=&mode=0&jn.x=33&jn.y=9
- 202 名前:Name_Not_Found :03/11/25 21:23 ID:???
- >>200
入れ子。
- 203 名前:Name_Not_Found :03/11/25 21:29 ID:???
- >>201-202
ありがとう
- 204 名前:Name_Not_Found :03/11/25 21:29 ID:???
- >>201=>>198
無理やり英単語使うなよ馬鹿市ね
>>202
ありがとうございます。
- 205 名前:Name_Not_Found :03/11/25 21:36 ID:???
- >>198
>%はmacIEでネストバグがあるよ。
無いよ? ↓
http://cssbug.at.infoseek.co.jp/detail/macie.html
Opera6と間違ってないかい?
http://cssbug.at.infoseek.co.jp/detail/opera/b009.html
- 206 名前:Name_Not_Found :03/11/25 23:09 ID:???
- >>204
ネストの意味ぐらい自分で調べろよ(´,_ゝ`)
それに片仮名なんだから英単語ではなくて外来語だろ。
というかそれぐらい常識。まったく恥ずかしい香具師だな。
- 207 名前:Name_Not_Found :03/11/26 01:15 ID:???
- 自分のサイトの基本となるCSSの名前がbasic.cssなんだけど
何かお勧めのネーミング無い?
- 208 名前:Name_Not_Found :03/11/26 01:34 ID:???
- >>207
bin.css
- 209 名前:Name_Not_Found :03/11/26 01:38 ID:???
- burakura_tonjae~~~ahya.ccs
- 210 名前:Name_Not_Found :03/11/26 01:54 ID:???
- >>207
ssc.css
- 211 名前:Name_Not_Found :03/11/26 02:37 ID:???
- >>210
感動した
- 212 名前:198 :03/11/26 02:53 ID:???
- >204
> 無理やり英単語使うなよ馬鹿市ね
ごめんな。でも201は俺じゃない。201は教えてくれてるだけだよ。
>205
> Opera6と間違ってないかい?
それだね。記憶違いだった。スマソ
- 213 名前:Name_Not_Found :03/11/26 09:22 ID:???
- >>207
sutairu.si-to
拡張子はCSSでなくてもいいんだよな
- 214 名前:Name_Not_Found :03/11/26 09:48 ID:???
- >207
style.css
(サイトの名前).css
- 215 名前:Name_Not_Found :03/11/26 09:55 ID:???
- >>214
それじゃbasicと変わらんじゃん
- 216 名前:Name_Not_Found :03/11/26 10:05 ID:???
- >>207
もれはdefault.cssとかnormal.cssとかにしてる。
- 217 名前:Name_Not_Found :03/11/26 10:16 ID:???
- >>207
【AV】[裏] 長瀬愛 - 宅配コギャル.css
- 218 名前:Name_Not_Found :03/11/26 10:35 ID:???
- >>207
私は standard.css にしてる。
- 219 名前:Name_Not_Found :03/11/26 12:53 ID:???
- もう俺CSSの紹介はどうでも良いです
- 220 名前:Name_Not_Found :03/11/26 13:04 ID:???
- >>219
2時間前に終わってるんだから蒸し返さなくてもいいよ。
- 221 名前:Name_Not_Found :03/11/26 13:23 ID:???
- em 単位は小数点は幾つまでOK ですか?
- 222 名前:Name_Not_Found :03/11/26 13:28 ID:???
- em じゃなくても、小数点はひとつだけです。
- 223 名前:Name_Not_Found :03/11/26 13:34 ID:???
- >>222
ワロタ
>>221
小数点以下は、いくらでもいけるだろ。ただ、該当する大きさがない場合、もっとも近いものを選ぶ、というわけで細かくしても無駄な気が。
- 224 名前:Name_Not_Found :03/11/26 14:03 ID:???
- 了解しました・・・・
通常は小数点イカは、四捨五入でしょうか?
- 225 名前:Name_Not_Found :03/11/26 14:16 ID:???
- 何を了解したんだ
- 226 名前:Name_Not_Found :03/11/26 14:18 ID:???
- >>224
>該当する大きさがない場合、もっとも近いものを選ぶ
もう二度と訊くなよ?
- 227 名前:Name_Not_Found :03/11/26 17:04 ID:???
- 色指定を
color : #000;
てな感じで省略しているサイトがあったんですがこれは問題ないのでしょうか。
- 228 名前:Name_Not_Found :03/11/26 17:18 ID:???
- >>227
おk
- 229 名前:207 :03/11/26 18:17 ID:???
- >>214,216,218
いいネ!参考にさせていただきます
- 230 名前:Name_Not_Found :03/11/26 18:21 ID:???
- img src で表示させる画像を自動的に中央に持っていきたいのですが
img {
text-align : center ;
}
では無理ですよね。どうすればいいのでしょうか。
divで囲むしかないのかな...
- 231 名前:Name_Not_Found :03/11/26 18:56 ID:???
- img要素を子に持つ親ブロック要素にtext-align:center;を指定すればよい。
が、そんなセレクターは無い。
だいたいimgなどのインライン要素はbody直下に置いてはいかん。
必ずブロックレベル要素の中に入れねばならぬ(Strictの場合)
- 232 名前:Name_Not_Found :03/11/26 20:47 ID:???
- positionの絶対値指定って避けた方が無難ですか?
- 233 名前:Name_Not_Found :03/11/26 20:59 ID:???
- >>232
ハ、なんで?
場合によるよ。
まあ、ウィンドウ・サイズを拡大縮小したり文字サイズを大小させても
表示が崩れないか、試してごらん。
- 234 名前:Name_Not_Found :03/11/26 22:24 ID:???
- img {
display:block;
margin:auto;
}
- 235 名前:Name_Not_Found :03/11/26 23:03 ID:???
- 後に来るブロック要素を、上に表示させることは出来ますか。
ポジションの絶対指定だと、
ボックスが縦に伸びたときに重なってしまうので悩んでいます。
- 236 名前:Name_Not_Found :03/11/26 23:53 ID:???
- >>235 具体的なソース出してくれないと、助言もできません。
- 237 名前:Name_Not_Found :03/11/27 03:40 ID:6UkehJG5
- <table border="1">
<tr>
<td>カテゴリA</td><td>カテゴリB</td><td>カテゴリC</td>
</tr>
<td>1a</td><td>2a</td><td>3a</td>
</tr>
</table>
として、カテゴリをクリックするとその下にそのカテゴリのメニューが出てくるようにテーブルでレイアウトしていました。
このテーブルレイアウトをやめようと思って作業しているのですが、
<ul>
<li>カテゴリA
<ul>
<li>1a
<li>2a
<li>3a
</ul>
<li>カテゴリB
<ul>
<li>1b
<li>2b
<li>3b
</ul>
<li>カテゴリC
<ul>
<li>1c
<li>2c
<li>3c
</ul>
</ul>
これを上のテーブルのようにスタイルシートで表現するにはどうすればいいのでしょうか?
- 238 名前:Name_Not_Found :03/11/27 04:03 ID:???
- strictじゃねぇな・・・
- 239 名前:Name_Not_Found :03/11/27 07:19 ID:gEt3aA4z
- position : absolute;
と
float : left;
左上の方にメニューボックスを作りたいんですが、どっちでやる方が良いんですかね?
まぁどちらでも自分の意図するように表示されてるんで、
自分的には好みで選んでいいのかなぁと思ってるんですが・・・
- 240 名前:Name_Not_Found :03/11/27 07:52 ID:???
- ムズムズするから</li>つけてくれ
- 241 名前:Name_Not_Found :03/11/27 08:05 ID:???
- >>240
ぶっちゃけHTML4.01では省略可となってるんだよな。
- 242 名前:Name_Not_Found :03/11/27 08:34 ID:???
- でもその奇妙なネストは許されんよな
- 243 名前:Name_Not_Found :03/11/27 09:34 ID:???
- <style type="text/css"><!--
ul {
list-style : none;
margin : 0;
padding : 0;
}
li.outer {
float : left;
width : auto;
border : solid 1px red;
}
ul.inner {
border : solid 1px blue;
}
--></style>
<ul>
<li class="outer">カテゴリA
<ul class="inner"><li>1a</li><li>2a</li><li>3a</li></ul></li>
<li class="outer">カテゴリB
<ul class="inner"><li>1b</li><li>2b</li><li>3b</li></ul></li>
<li class="outer">カテゴリC
<ul class="inner"><li>1c</li><li>2c</li><li>3c</li></ul></li>
</ul>
class名についてはこの際ご容赦願うとして
Opera6だと width:auto が ul.inner に「継承」されるかのように表示される。
で、ul.inner に width:100% とか指定するととんでもないことになる。
何に対して100%なのかが不明。ピクセル値は問題なさそう。
Opera7じゃ特に問題ないんで今更ではあるけど。
- 244 名前:Name_Not_Found :03/11/27 11:09 ID:0ATNjL7H
- 質問です。
CSSのdisplayプロパティを使って文字の表示非表示を行なっています。
overflowでその全体を囲むと、非表示部分までスクロールバが伸びてしまいます。
表示されている部分だけでoverflowのスクロールバーを表示させたいのですが
どのようにすればよいでしょうか?なにかアドバイスをお願いします。
overflowはautoで指定してあります。
- 245 名前:Name_Not_Found :03/11/27 11:24 ID:???
- >>244
文章の意図を読み取れない。
具体的な例を提示せよ。
- 246 名前:Name_Not_Found :03/11/27 14:29 ID:???
- ul・liを使って表の様に表示させたがる香具師等の考えていることがわからんのだが。
tableでええやん、表なんやから。
- 247 名前:Name_Not_Found :03/11/27 18:06 ID:???
- >>243
ありがとうございました!
- 248 名前:Name_Not_Found :03/11/27 18:10 ID:???
- >>242
どこがどう奇妙なんだ?
問題ないはずだが。
- 249 名前:Name_Not_Found :03/11/27 18:29 ID:???
- http://alt.s31.xrea.com/
ここみたいなタブで画面が切り替わるような構成にしたいのですが、どこを参考に勉強すればいいでしょうか?
- 250 名前:Name_Not_Found :03/11/27 19:06 ID:???
- >>249
"pure css tab"で全言語のページから検索した結果から。
- 251 名前:Name_Not_Found :03/11/27 20:03 ID:???
- つか『ここみたいな』などと例が出せるのならそのサイトを参考にすればよかろう
- 252 名前:Name_Not_Found :03/11/27 20:06 ID:???
- 真似じゃんか…。
- 253 名前:Name_Not_Found :03/11/27 20:09 ID:???
- じょじょの奇妙なCSS
- 254 名前:Name_Not_Found :03/11/27 22:18 ID:???
- >>252
HTMLソースの流用に問題があるとでも?
- 255 名前:Name_Not_Found :03/11/27 23:21 ID:???
- よく何々をしたいという欲望を持った質問者が現れるが、
それが本当にユーザにとって好ましいのか考えてみることだ。
どうせ見栄えなんか直ぐに飽きるんだし、スキルがないんだから、
Simple is best! を徹底した方が宜しいと思うのだが如何なものか。
- 256 名前:Name_Not_Found :03/11/27 23:23 ID:???
- 如何なものだ。
- 257 名前:Name_Not_Found :03/11/27 23:33 ID:???
- >>255
禿げ堂
- 258 名前:Name_Not_Found :03/11/27 23:42 ID:inbLJmfb
- divタグの中に長いアルファベットの文字列(URL)を書くと
自動的に改行されずにwidthで指定した大きさを無視して
横に長くなってしまってレイアウトが崩れるのですが、
なにがなんでも強制的に改行してくれる方法ってないでしょうか?
- 259 名前:Name_Not_Found :03/11/27 23:45 ID:???
- >>258
強制的に改行
ttp://www.rju666.com/web/reference/html.html#br
余談だが、div要素内だから改行されないのではなくて、区切りのない英数字だから改行されないんだよ。
div要素外でやっても同じことになる。
- 260 名前:Name_Not_Found :03/11/28 00:06 ID:bEA3mANd
- <p>
<img src="aaa.gif" align=left height=240 width=100>
aaaaaaaaaaaaaaaaaa
</p>
こうすると<p>から画像がはみ出るのですが、
どうすれば<p>の中におさまりますか?
- 261 名前:Name_Not_Found :03/11/28 00:12 ID:???
- >>260
はみ出るわけない。
ここ、なんのスレかわかってる?
- 262 名前:Name_Not_Found :03/11/28 00:12 ID:???
- 余談だが「改行」ではなくて「行の折り返し」なんだよ。
「改行」ってのは、CR や LF などの制御コードのこと。
それと br要素は、強制的な行区切りの指定であって改行ではない。
- 263 名前:Name_Not_Found :03/11/28 00:14 ID:???
- 「行の折り返し」や「行区切り」のことを日本語で「改行」って言うんじゃないの?
- 264 名前:Name_Not_Found :03/11/28 00:15 ID:???
- 強制的な行区切り=改行
行を区切る=行を改める
なんかどこかの受け売りか知らんが、強制的に行を折り返す、ってのは行を改める、ってことで改行と同義だよ。
改行を辞書でひいてみ。
- 265 名前:Name_Not_Found :03/11/28 00:19 ID:???
- >>258
word-break:break-all;
だっけ。brじゃなくてこれ使いなよ
- 266 名前:Name_Not_Found :03/11/28 00:25 ID:???
- >>265
このスレ的にも記述的にも正論かな。
- 267 名前:Name_Not_Found :03/11/28 00:28 ID:???
- ああすっかり忘れていた word-break
確かIE専用だったよね
- 268 名前:Name_Not_Found :03/11/28 00:32 ID:???
- >>261
はみ出るんだよ馬鹿
- 269 名前:Name_Not_Found :03/11/28 00:34 ID:???
- W3Cで審議中で、IEが独自実装だったかな
- 270 名前:Name_Not_Found :03/11/28 00:34 ID:???
- >>263
少なくともIT技術者はふつう「改行」と「折り返し」とをはっきり区別
した意味で使う。区別の仕方は>262が書いているとおり。
「キャリッジリターン」と「ラインフィード」は、けっこう適当な
使い方している人が多いけどね。
他の業種についてはしらね。
- 271 名前:Name_Not_Found :03/11/28 00:35 ID:???
- >>268
<p>に設定してるwidthに対して画像がでかすぎるだけだよ。
そこのところの<p>のwidthを画像の幅以上にするか、
画像を小さくしないと無理。
- 272 名前:Name_Not_Found :03/11/28 00:38 ID:???
- >>268
はみでるわけない。
Pの幅も同じだけ拡張されるからね。
- 273 名前:Name_Not_Found :03/11/28 00:41 ID:???
- 下にはみ出るんだよ馬鹿
- 274 名前:Name_Not_Found :03/11/28 00:43 ID:???
- >>273
そっか。下か。よかったな。
- 275 名前:Name_Not_Found :03/11/28 00:46 ID:???
- >>273
散々お前に馬鹿馬鹿となじられた272=261だけどね。
pに
height : 1px;とか入れて見ろ。
- 276 名前:Name_Not_Found :03/11/28 00:49 ID:???
- >>275
デキタ━━━(゚∀゚)━( ゚∀)━( ゚)━( )━( )━(゚ )━(∀゚ )━(゚∀゚)━━━!!
272=261=273=神
さんきゅう〜〜〜
- 277 名前:Name_Not_Found :03/11/28 00:52 ID:???
- >>276
けっこう傷ついたけどね。
- 278 名前:Name_Not_Found :03/11/28 00:59 ID:???
- >>277
ごめぽ
「はみでるわけない」って言われて
ムっとしちゃったあ
発言もはみ出てたね(-_-)ごめぽ
- 279 名前:Name_Not_Found :03/11/28 02:39 ID:???
- はみでるってなんだ?日本語が変。
これだけで解った>277は本当に神と思う。
- 280 名前:277 :03/11/28 02:47 ID:???
- >>279
一応リファレンスサイトやってますんで。
てか、はみでる、はgoo辞書にも載ってるからまともな言葉じゃないの?
はみだす、と同義。
- 281 名前:Name_Not_Found :03/11/28 03:17 ID:???
- いや、具体的にどういう状態になってるのかが
サッパリわからなかった<はみでている状態
下にはみ出るってなんだろう…。
- 282 名前:277 :03/11/28 03:37 ID:???
- >>281
┏━━━━━━━┓
┃┌──┐あああ┃
┗| |━━━┛
| |
| |
| |
└──┘
太線がPのボックス
- 283 名前:Name_Not_Found :03/11/28 08:25 ID:???
- 画像からリンクさせる場合のaの擬似クラスでborder-styleを指定したborderの消し方を教えてください。
>>10の方法では擬似クラスにborder-styleを指定したsolidのborderだけ残ってしまいました。
IEとNNの最新版でもどうしても solidを指定した方だけ消えなくて行き詰ったので、わかる方間違いを教えてください。
以下サンプルです。
<html>
<head>
<style type="text/css">
a {text-decoration: none;border-style-bottom:dotted;}
a:link {border-bottom: 3px blue;}
a:visited {border-bottom: 3px navy;}
a:active {border-bottom: 2px solid red;}
a:hover {border-bottom: 2px solid hotpink;}
a img, a:link img, a:visited img, a:active img, a:hover img {border-bottom: none ;} <!-- *備考:下記に記載 -->
img { border: none;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.hogehogehoge.net/" title="hoge"><img src="hogehoeg1.gif" alt="1バナー" /></a></li>
<li><a href="http://www.hogehogehoge.com/" title="hoge"><img src="hogehoge2.gif" alt="2バナー" /></a></li>
<li><a href="http://www.hogehogehoge.jp/" title="hoge"><img src="hogehoge3.gif" alt="3バナー" /></a></li>
</ul>
</body>
</html>
*備考: border-bottomをborder-style-bottomやborderに変えたり、noneを0px noneや 0pxに変えても結果は一緒でした。
- 284 名前:Name_Not_Found :03/11/28 09:06 ID:???
- >>283
AのボーダーをIMGで消そうとしてるわけ?よく考えい。
やりたいことは分かるが良い策は分からん。ごめん。
ところで a:link と a:visited の指定はそれで効いてるの?
- 285 名前:Name_Not_Found :03/11/28 10:02 ID:???
- a:active.img,a:hover.aimg {border:none ;}
とでもして、<img class="aimg" SRC="">とすれば消えてくれるが、なんで
a img {border:none ;}だと思いどおりにならんかな
- 286 名前:Name_Not_Found :03/11/28 10:13 ID:???
- a:active { hoge: huga; } -> specificity = 11
a img { hoge: huga; } -> specificity = 2
つまり優先度の問題。
- 287 名前:Name_Not_Found :03/11/28 10:36 ID:???
- >>285=>>283?
ホントか?<a class="aimg"> じゃなくてか?
- 288 名前:285 :03/11/28 11:13 ID:???
- メンゴメンゴ。クラス振るのは<a>だな、書き違えたわ。あと、283じゃないよ。
で、優先度の問題を解決するんはどうすんのかな?important指定しても上手く行かんなー。
- 289 名前:Name_Not_Found :03/11/28 11:18 ID:???
- >>288
id を 100、
class を 10、
要素名を 1、
として足し算、だったっけ?
- 290 名前:Name_Not_Found :03/11/28 11:42 ID:???
- みんなモチツケよ
子孫セレクタ
ttp://hp.vector.co.jp/authors/VA022006/css/selector.html#descendant-selectors
- 291 名前: :03/11/28 12:08 ID:t6/2q5sc
- ↓のスタイルがあって
<style type="text/css"><!--
.al {filter:Alpha(opacity=50 );}
.no_al {filter:Alpha(opacity=100);}
--></style>
テーブルの背景は al で半透明にして、そのテーブルの中にある文字などは
no_al で透明にならないようにしたいのですが、
<table class="al"><tr><td class="no_al">あいうえお</td></tr></table>
としても、al が先にtableタグ内で宣言されているので td で no_al を使用しても
"あいうえお" の文字列が半透明になってしまいます。
しかし逆に
<table class="no_al"><tr><td class="al">あいうえお</td></tr></table>
とすると、table は 半透明にならずに 文字だけ半透明になります。
なんで〜〜???
テーブル(背景など)は半透明で、文字は透明じゃないようにしたいのに・・・。
どなたかご教授お願い致します。
- 292 名前:Name_Not_Found :03/11/28 12:29 ID:???
- 半透明処理などのフィルタはCPU負荷率が高いので遠慮願いたい。
と言っても、ユーザースタイルで対処するから構わないのだけど。
初心者ってのは M$IE のフィルタがヴァカみたいに好きだね(´ー`)
- 293 名前:Name_Not_Found :03/11/28 12:31 ID:???
- >>291
>>172-
- 294 名前: :03/11/28 12:48 ID:t6/2q5sc
- >>292
バカはお前だよっ。 ほとんどのユーザーがMSIEだべ。
サイトの対象となるユーザーの環境も考えないお前の
方が初心者。
んじゃな。
ps)
最近はmozillaとかOperaが多いとかいうなよな。
所詮10%以下なんだから。そいうユーザーにも
見てもらいたいのなら、そいうサイトのつくりに
すればいいわけだし。 さよなら、初心者の292さん。
- 295 名前:Name_Not_Found :03/11/28 12:52 ID:YLg/JowU
- link-style-image:url(listmark.gif);
でリストのマークを指定したら、指定してないときより
右にはみ出るのは何ででしょう?
IEのみでウィンドウサイズを変えたらはみ出ないんですが・・・。
- 296 名前:Name_Not_Found :03/11/28 13:10 ID:???
- 漏れも5年前のパソコンではフィルタ乱用きつい。
Win98のレジストリいじって無効化してる。
- 297 名前:Name_Not_Found :03/11/28 13:13 ID:???
- >>294
あえて釣られるけど、お前のサイトのアクセス解析結果か?
お前のサイトのアクセス解析結果が10%以下を示しているのは、お前のサイトがMSIE向けに作られてるからだよ。
俺のサイトはどんなブラウザでも見れるように作っているからドリームキャストや携帯からでも閲覧可能だ。
- 298 名前:Name_Not_Found :03/11/28 13:18 ID:???
- >>294
ワラタ
- 299 名前:Name_Not_Found :03/11/28 13:36 ID:???
- 論点がズレてるように見受けられる。
IEを使うヤツの話ではなくて、
IE用のフィルタを使いまくるヤツの話では?
- 300 名前:Name_Not_Found :03/11/28 13:37 ID:???
- >>295
何が、どう、右にはみ出るのですか。
その画面が見えない他人にもわかる書き方をして下さい。5W1Hね!
- 301 名前:Name_Not_Found :03/11/28 14:47 ID:???
- >>300
五人のワイフを見ながら一人エッチですか。
泣けてきますね」
- 302 名前:Name_Not_Found :03/11/28 14:58 ID:???
- >>301
違うよ、5人のワイフに毎日1Hするってことだよ。
絶倫。
- 303 名前:Name_Not_Found :03/11/28 15:07 ID:bBCRabY8
- 頑張ってCSS&脱テーブルのサイト作っても、
Mac&IE5.2で見たらjsエラーでcss弾かれてちゃしゃーないわな。
そんなアホはcss使うのヤメレ。
- 304 名前:295 :03/11/28 15:08 ID:YLg/JowU
- >>300
質問用にソースを書いていたら原因がわかりました・・・。
幅を%指定している並列の二つのボックスの右側ボックスに
margin-rightをpxで指定してしまっていました。
ソースがシンプルならば原因も見つけやすいのですが・・・、
皆さんソースが複雑になったときのレイアウトのずれなんかの
デバック?ってどうやってるんですかねぇ?
- 305 名前:Name_Not_Found :03/11/28 15:22 ID:???
- 久々に大物の登場だったな
- 306 名前: :03/11/28 16:54 ID:t6/2q5sc
- >>297
>ドリームキャストや携帯からでも閲覧可能だ。
すっげ〜自慢だね! 全く興味をそそらないのは、何故?
- 307 名前:Name_Not_Found :03/11/28 16:56 ID:???
- >>306
どんなブラウザからでもアクセス可能ってのは凄いこと。
興味がないのはそういうことを考えてない人間だからだろ。
- 308 名前: :03/11/28 16:57 ID:t6/2q5sc
- >>297
携帯がアクセスしてきたら、User-Agent とかIP見て
携帯用のページにリダイレクトすりゃいいだろ。
なんで そこまでしてひとつのページを全ブラウザで
見れるようにするんだよ。 アホじゃね〜の。
素人めが。
- 309 名前: :03/11/28 17:00 ID:t6/2q5sc
- >>307
<HTML><HEAD></HEAD><BODY>あ</BODY></HTML>
全ブラウザで閲覧可能だぜ。どこがすごいんだよ。あ?
単に簡単なHTMLを使ったサイトだから、全ブラウザで
閲覧可能なんだろ? そこを間違えるなよっ。
- 310 名前:Name_Not_Found :03/11/28 17:07 ID:???
- 凄い人の登場だ…。
- 311 名前:Name_Not_Found :03/11/28 17:20 ID:???
- お、俺は釣られねーぞっ!
- 312 名前:Name_Not_Found :03/11/28 17:39 ID:???
- 良質なテキストサイトは XHTML Basic ひとつあれば十分に事足りる。
- 313 名前:Name_Not_Found :03/11/28 18:42 ID:???
- >>308
マジレスすると、
その手法は一世代前の考え方で、
結局情報が二(多)元化してしまう、更新コストがかさむ、
同期を取るのが結構大変、との理由で最近では嫌われています。
自分の不勉強を棚に上げて素人なんt(ry
- 314 名前:Name_Not_Found :03/11/28 18:56 ID:ojOWcRV4
- 質問お願いします。
divで指定した部分が上と左右のウィンドウ枠に密着するように
したいと思っています。
bodyとdivにmargin:0pxの指定をすると、単独で見る場合は希望どおりに
表示されるのですが、フレームで表示させるとIE6では右側に余白ができてしまいます。
ネスケ7ではきちんと余白なしで表示されました。
この場合どのような記述をすればいいのでしょうか。よろしくお願いします。
- 315 名前:Name_Not_Found :03/11/28 19:28 ID:???
- フレームなんて使うな。
- 316 名前:Name_Not_Found :03/11/28 19:47 ID:???
- >291
あーとだな、何か流れが質問スレと違う中レスしてみるとだな。
OpacityはFont-sizeみたく子孫にも影響するんじゃないかな。
つまりno_alの方のOpacityを200にしてみるとどうかな。
ダメだったらごめんな。
- 317 名前:Name_Not_Found :03/11/28 20:28 ID:TX1z+Wx8
- いま、
http://kanzaki.com/docs/html/lesson1.html
ここを参考にして自分のサイトのhtmlを書き直して整理しています。
htmlでは、見出し、段落、リスト、リンク、強調、線、署名だけにするようにしています。
レイアウトは後々スタイルシートで、と思っていますが、classやidはこの段階で割り振っていくようにした方がいいのでしょうか?
また、この段階で割り振っていくとき、スタイルシートの記述はどのように整理すると見やすくなるのでしょう。
皆さんの整理の仕方や、参考になるサイトがあったら教えてください。
宜しくお願いします。
- 318 名前:Name_Not_Found :03/11/28 20:44 ID:???
- >>317
せっかくそこ見てやってるなら、「線」(=<hr>のことだと思うが)のような物理要素もやめりゃいいのに。
strictの世界ではclass名やid名ですら文書構造を表す意味のあるネーミングでなきゃならんという話なので
理論上はマークアップをやってる段階でclassやidを割り付けることができるはず。
また、そのように構造化された文書ではスタイルシートの記述もおのずと構造化され整理されているはず。
- 319 名前:Name_Not_Found :03/11/28 20:50 ID:TX1z+Wx8
- >>318
ここの最後の纏めに
1. HTMLは文書の構成パーツを「要素」としてマークアップする
2.HTML文書はhead要素とbody要素で構成され、headとbodyを合わせたものがhtml要素になる。html要素にはマーク付け言語情報を書く
3.headの中に、分かりやすいtitleを書く。文字コードも必要ならここでmetaを使って示す
4.body(本文)は段落(p)と見出し(h1〜h6)で構成され、必要に応じてリスト(ul, ol, li)を使って情報を見やすく整理する
5.ハイパーリンクはa要素タイプを使う
6.強調するところはem, strong要素で示し、画像が欲しければimg要素タイプを使う
7.文書にはaddressで署名する。本文と署名のように役割が異なるセクションはhrで区切るとわかりやすい。
とあったもので・・・。
7で、hrで区切るとわかりやすい、と。
使わないほうがよいのでしょうか?
> strictの世界ではclass名やid名ですら文書構造を表す意味のあるネーミングでなきゃならん
むむむ…難しそうですね…。コツコツやってみます。
- 320 名前:Name_Not_Found :03/11/28 21:05 ID:???
- >>319
まあstrictな人の中には、br, hr, b, i, tt, big, small のような物理的な要素は
たとえstrict.dtdであっても排除すべきだという人もいれば、
spanにclass振るくらいならスタイルシート非対応ブラウザ向けにsmallにclass振れという人もいるし、
そこらへんは浄土宗か浄土真宗かって所なんで、宗派に合わせて適当にやって下さい。
法が人の為にあるのか、人が法の為にあるのかって議論は、この手の話には必ず
付いて回るものだし、これ以上やるのもスレ違いなんで。
- 321 名前:Name_Not_Found :03/11/28 21:28 ID:TX1z+Wx8
- >>320
はぁい
>>317
> 皆さんの整理の仕方や、参考になるサイトがあったら教えてください。
このあたりにもアドヴァイスいただきたいのですが・・・。
- 322 名前:Name_Not_Found :03/11/28 21:40 ID:???
- >>321
>>4に挙がってるもの以外なら
http://www.asahi-net.or.jp/%7Esd5a-ucd/www/
とか。
クラスとIDに関しては
まずは一切つけずにマークアップし終えてから
必要なところにだけ順次つけていくようにするといいかも。
要は最初からクラスとIDをもりもり付けていこうとしないようにって感じ。
- 323 名前:Name_Not_Found :03/11/28 21:50 ID:TX1z+Wx8
- >>322
ありがとうございます、読んでみます。
> 要は最初からクラスとIDをもりもり付けていこうとしないようにって感じ。
まさにもりもり付けていこうとしていました…_| ̄|○
ありがとうございました。
- 324 名前:Name_Not_Found :03/11/28 22:30 ID:???
- >306
今更なんだが、メ欄も込みで見て欲しかった。
- 325 名前:283 :03/11/28 22:48 ID:???
- >>284
<a><img /></a>
だから a imgとか a:link img としてますが間違ってましたでしょうか
img以外にはdottedで指定した:linkなどはちゃんと表示されます
>>285
確認しました。imgにclassを指定しないでやる方法はないものなんでしょうか
>>286
a {text-decoration: none;}
a:link {border-bottom: 3px dotted blue;}
a:visited {border-bottom: 3px dotted navy;} と変えて
a:link img, a:visited img, a:active img, a:hover img {border-bottom: none!important ;}
としたら今度は全部消えなくなりました。
a:link img{border-bottom: none;} ....
と個別に指定してもだめでした、もうどうしたらいいのやら
>>290
a:link * img や a:link > imgとしてもだめでした
擬似クラスにborder-styleを指定しなければ問題はなく消えるんです。
擬似クラスにborder-styleの指定があるとどうしてもだめです。
根本的に何が間違ってるのか本当にわかりません。
だれか助けて
- 326 名前:Name_Not_Found :03/11/28 23:18 ID:???
- >>325
あのさ、a要素(とその疑似クラス)に指定したスタイルを
img要素に対してnoneとしたって無意味では?
imgを子に持つa要素(とその疑似クラス)に対して取り消し指定をしなければ。
- 327 名前:283 :03/11/28 23:43 ID:???
- >>326
なるほど、そう考えるべきなんですね。
すごくわかりやすかったです、ありがとうございます。
そうすると、*や>や+で結合させてもうまく行くわけないですね。
・imgを内包するaにだけという指定が出来る構文はない
↓
・classやidで対処するしかない
ってことであってますか???
- 328 名前:Name_Not_Found :03/11/28 23:54 ID:???
- >>327には折角の忠告↓が目に入らなかったのか。
284 :Name_Not_Found :03/11/28 09:06 ID:???
>>283
AのボーダーをIMGで消そうとしてるわけ?よく考えい。
- 329 名前:Name_Not_Found :03/11/29 00:08 ID:???
- ダメなやつは何をやってもダメ
- 330 名前:283 :03/11/29 00:22 ID:???
- >>328-329
バカでほんとにすいません
>>10で紹介されていた「よくある質問」が自分のケースと同じだと勘違いしてたみたいで、
>>284の言っている本位を汲み取れませんでした。
お世話になりました。
- 331 名前:Name_Not_Found :03/11/29 00:23 ID:???
- >>318
hr要素は、CSS非適用の素のスタイルで閲覧する人用に、要る。
http://deztec.jp/site/tips/page/p0013.html#hr
「見えない水平線」を入れる
>CSS では見出しや段落にボーダーライン( border )を指定できるため、簡単な
>記述で(視覚的に)読みやすいページを作ることができます。ところが、非 CSS
>環境だと CSS の border が表示されないため、文章の区切りがわかりにくいと
>いうことがあります。
>
>こういう場合、文書の区切り位置に<hr>を挿入し、<hr>に対して CSS で
>display: none; と指定すると、 CSS 非対応環境でのみ表示される水平線にする
>ことができます。長文の場合などは章・節の句切りが意外と重要なので、章ごと
>くらいに挿入するといいでしょう。
- 332 名前:Name_Not_Found :03/11/29 00:32 ID:???
- 画像の横(左側)に文章が置かれるようにしたいのですが、
<img src="" align="right">
こういう書き方はどうやら良くないそうですね。
何かいい方法はありませんでしょうか。
- 333 名前:Name_Not_Found :03/11/29 00:41 ID:???
- >>332
float使え
>>331
あんまりその議論は蒸し返さんほうがええよ。俺は <hr style="display:none"> 派だし
>>318もそんなことはわかってると思うが、<table> を見るとアレルギー起こす人と同じように
真の原理主義者は「物理的要素」を見ただけでヒステリーを起こすんだと思う。
- 334 名前:昔の人 :03/11/29 00:41 ID:???
- >>332は>>7を見たまへ。
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
HTML でのレイアウト指定の、 CSS での指定との対応表
http://deztec.jp/site/tips/page/p0037.html
- 335 名前:Name_Not_Found :03/11/29 00:44 ID:???
- >275
1日経ってからつっこむのもなんだが,それってMozillaで見ると
本当に高さが1pxになるよ
リファレンスサイトねぇ…
>314
初心者スレFAQ
http://web2ch.s31.xrea.com:8080/index.php?BeginnerFAQ
のQ12
解決方法は,互換モードにするなり右に適当にmargin取るなり
>315さんの言うようにフレームやめるなり
- 336 名前:Name_Not_Found :03/11/29 00:47 ID:???
- 他人がどう思おうがstrict.dtdの枠内で自分が正しいと信じるマークアップするのがいいんじゃないの?
ここCSSスレだし質問者がhr使いたいならむやみにやめさせることもないと思うよ。
- 337 名前:Name_Not_Found :03/11/29 00:49 ID:???
- 確かにheight:1px;はヒドイ。IEのことしか考慮してないナ。>>335
>>260君にはFAQのQ5(>>7)、「浮動要素の高さもheightに含めさせる方法」を見て欲しかった。
WinIEの場合、親要素の幅を明示(widthプロパティを具体的な値で指定する)しておけばよし。
- 338 名前:Name_Not_Found :03/11/29 00:57 ID:???
- >>272
>はみでるわけない。
>Pの幅も同じだけ拡張されるからね。
それは、IEのバグだっての。一般化してはいかん。
ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b052.html
- 339 名前:Name_Not_Found :03/11/29 02:34 ID:igAB4tAt
- ネストされたULタグって、
IEだと見栄えはこんなかんじ↓になるかと思うのですが・・・
●ほげ
●ふが
○ヒゲ
○カツラ
●うき
こないだどこかのサイト(失念してしまった。。。)で、
●と○との、横方向(x座標)の距離がデフォルトより短いものを見つけました。
これは、CSSだとは思うのですが、どうやって実現させるのでしょうか?
どなたか教えていただければ幸いです。
- 340 名前:Name_Not_Found :03/11/29 03:21 ID:???
- LI UL , DT UL { margin-left : ??px }
pxという単位はあくまでも例です。
- 341 名前:Name_Not_Found :03/11/29 03:21 ID:???
- DTじゃなくてDDでした。申し訳ない。
- 342 名前:Name_Not_Found :03/11/29 05:14 ID:???
- フォントサイズについてなんですが、
em や % は一部のブラウザでバグがあるらしいと言う理由から
xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger のみを使っているのですが、何か問題はあるでしょうか。
- 343 名前:Name_Not_Found :03/11/29 05:58 ID:???
- IEの旧態依然モードでは・・・
CSSのデフォルト
↓
CSS font-size | xx-small x-small small medium large x-large xx-large
HTML <font size=...>| 1 2 3 4 5 6 7
↑
HTMLのデフォルト
つーことでズレる。
- 344 名前:Name_Not_Found :03/11/29 10:27 ID:???
- >>342 バグは工夫すれば避けられる。
- 345 名前:Name_Not_Found :03/11/29 14:26 ID:???
- >>335,339
IEで見えてれば誰も困りません。困る人数など統計的に見れば0に等しい。
有名無実の「w3c標準」に合わせると大多数のIEユーザが迷惑をこうむります。
99%のブラウザはIE4〜6です。OSもmacなんて1%です。
この数字を見れば何を基準にすべきかは小学生でもわかるでしょう。それはIE。
- 346 名前:Name_Not_Found :03/11/29 14:39 ID:???
- IEのシェアは世界的に見ても、日本だけを見ても圧倒的ではあっても
せいぜい90〜95%というところ。
5〜10%という数字は統計学的には0とは等しくありません。
あと、商的な意味でもそれらを排除するのは「望ましい」ことでは
ありません。
XHTMLでMIMEタイプをapplication/xhtml+xmlにするとかそういう
レベルの話でない限り、W3Cの標準に合わせることでIEユーザが
迷惑をこうむることはありません。
- 347 名前:Name_Not_Found :03/11/29 15:09 ID:???
- ブラウザに依存しないCSSを書けない奴の戯言に釣られるな。
- 348 名前:314 :03/11/29 15:38 ID:V8q7YsJt
- えーとすみません、。
>314は表示することができないものだったんでしょうか…
- 349 名前:Name_Not_Found :03/11/29 15:52 ID:???
- >>345
>IEで見えてれば誰も困りません。困る人数など統計的に見れば0に等しい。
(´ι _` ) 馬鹿なオマエがな
- 350 名前:13 :03/11/29 15:55 ID:???
- >>24
遅レスすいません。これだけのソースなんですが、
画像にマウスカーソルを乗せても枠の色が変わりません。
画像の上にカーソルを置いておいて ALT + TAB でウインドウを
切り替えて再描画させると変わっているので、認識はしてくれてる
みたいなんですが、IEの問題なのでしょうか?
<html>
<head>
<title>css test</title>
<style type="text/css">
<!--
a:link img, a:visit img {
border: 1px solid green;
}
a:hover img {
border: 1px solid red;
}
-->
</style>
</head>
<body>
<a href="test.html"><img src="test.jpg"></a>
</body>
</html>
ブラウザは
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; T312461; istb 702; .NET CLR 1.0.3705)
です。OS は Windows 2000 SP4 です。
- 351 名前:Name_Not_Found :03/11/29 16:04 ID:???
- >>350
>visit
visited
- 352 名前:13 :03/11/29 16:16 ID:???
- >>351
失礼しました。でも visited にしても変わらないです。
ちなみにちょっと古いのですが、
Mozilla/5.0 (Windows; U; Windows NT 5.0; ja-JP; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
でやると大丈夫でした。IEの問題っぽいですね。
- 353 名前:Name_Not_Found :03/11/29 17:51 ID:???
- IE以外にも対応すること 以 外 で 潜在的なカスタマを5%増加させるのは並大抵な事ではない。
とゆってみる。
- 354 名前:Name_Not_Found :03/11/29 17:55 ID:???
- >>353
まわりくどい日本語やめれ
- 355 名前:342 :03/11/29 18:01 ID:???
- >>343
なるほど、そういえば古めの IE では大きくなりますね。
medium = ブラウザのデフォルト じゃないとなると
今使っているシートのみではちょっと問題もありそうなので、見直してみます。
ありがとうございました。
- 356 名前:Name_Not_Found :03/11/29 19:36 ID:???
- >>350
擬似クラスにスタイル指定がないと擬似クラスの子孫要素への指定が効かない(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b077.html
- 357 名前:Name_Not_Found :03/11/29 22:19 ID:???
- サイズ指定の単位についての質問です。
自分はフォントの大きさを指定するときにptを使うことがあるのですが、
ptってどういう基準で大きさが決まるんですか?
Windowsならどのパソコンのどのブラウザで見ても大体同じような大きさになってデザイン崩れないんですが、
Macだったり特殊な媒体だったりするとptのサイズが違って崩れるんでしょうか?
どうしてもサイズを絶対指定したいときはpxの方が無難ですか?
- 358 名前:Name_Not_Found :03/11/29 22:43 ID:???
- ptもpxも使うな。どうしても使いたいならその理由を言え。
- 359 名前:Name_Not_Found :03/11/29 23:07 ID:???
- 画像の上に字を乗っけるのでフォントのサイズが一定じゃないとデザインが崩れるからなのですが。
- 360 名前:Name_Not_Found :03/11/29 23:19 ID:???
- >>357
Macは pt=pxだったと思うよ
OSXはどうだか知らないけど
- 361 名前:Name_Not_Found :03/11/29 23:27 ID:???
- >>358
http://ryus.s21.xrea.com/Sub/about/font.shtml
- 362 名前:Name_Not_Found :03/11/29 23:45 ID:???
- >>361
フォントを固定するなって言ってる輩とそこの作者が固定にする
理由に挙げてるようなサイトの作者って層が違うと思う
- 363 名前:Name_Not_Found :03/11/29 23:53 ID:???
- >>360
なるほど、じゃあptは使わない方が無難ですね・・・
px指定なら、とりあえず字と周囲のデザインとの関係はどんな出力でも同じように表示されるんでしょうか。
(もちろん、そのブラウザが使用するフォントによって違ってはくるでしょうが)
- 364 名前:Name_Not_Found :03/11/29 23:58 ID:Dfkj2CN/
- 済みません、スタイルシートでデザインすることを前提にhtmlを書く場合、
メニューなどのリンクは
<a>で並べるべきですか?
<ul>などでリストとして記述するべきですか?
- 365 名前:Name_Not_Found :03/11/30 00:03 ID:???
- >>364
aで並べる、の意味が不明です。
後者なら
<ul>
<li>日記<li>
<li>リンク<li>
</ul>
とするなら問題ないし、説明を加えたいのであれば
<dl>
<dt>日記</dt>
<dd>〜説明事項〜</dd>
<dt>リンク</dt>
<dd>〜〜〜〜</dd>
</dl>
としてもOKです。
他にも色々と方法はありますが…。
- 366 名前:13 :03/11/30 00:04 ID:???
- >>356
できました!どうもありがとう!
- 367 名前:Name_Not_Found :03/11/30 00:12 ID:o8x1wFc9
- >>365
えと、スタイルシートでデザインしよう、と決意して、このスレのリンクとかのソースを覗いてみたりするようになったのですが、
殆どの人が<ul>でリストとして書いてました。
が、今日本屋で立ち読みした本では、
<a href="hoge.html">hoge</a>
<a href="hoge2.html">hoge2</a>
<a href="hoge3.html">hoge3</a>
という風に書いていたので。
ちなみに、今まではテーブルで
hoge1 ..hoge1の説明
あんなことやこんなこと
hoge2 ..hoge2の説明
あんなことやこんなこと
hoge2 ..hoge2の説明
あんなことやこんなこと
このようにレイアウトしていたのですが、
<ul>や<dl>でこういうレイアウトは出来ますか?floatやdisplay使ってやってみてるのですが、
右側の説明の二行目が左のタイトルの下に回りこんでしまったり、
右側の説明全体が左のタイトルの下に来てしまったりしてうまくいかないのです。。。
- 368 名前:Name_Not_Found :03/11/30 00:17 ID:???
- >>367
右側の説明が回りこんでしまうのは、
marginをしっかり指定していないせい。
リストを使っても回り込むものは回り込むよ。
- 369 名前:Name_Not_Found :03/11/30 00:20 ID:o8x1wFc9
- >>368
margin指定ですか!やってみます。ありがとうございました!
- 370 名前:Name_Not_Found :03/11/30 00:54 ID:???
- >>361
話の主旨のすり替えをやってるつもりのようだけど、「大きめに指定で可変」について触れてないところ、つまり言い訳でしかないと言えるな。
- 371 名前:Name_Not_Found :03/11/30 01:04 ID:???
- ptという単位に対しての質問をフォント固定否定論に摩り替える>>358が一番の問題だが。
- 372 名前:Name_Not_Found :03/11/30 01:14 ID:o8x1wFc9
- <dl>でやってみたのですが、どうしても>>357のようなレイアウトに出来ません。。。
どうすればいいのでしょう?
- 373 名前:Name_Not_Found :03/11/30 01:15 ID:???
- >>370
某所のセリフを借りると
「単なるW3C(とその信者)への恨み節」ってやつだな。
トップページでとんでもない事やってやがるし。
- 374 名前:Name_Not_Found :03/11/30 01:27 ID:???
- >>372
説明不足。5W1H!
ソースと環境を書いてね。
- 375 名前:Name_Not_Found :03/11/30 01:31 ID:???
- >>371
禿げ同
- 376 名前:Name_Not_Found :03/11/30 01:56 ID:???
- >>372
357じゃなくて367の間違いだよね?
>>367のようなデザインにしたいのなら、リストは無理に使わない方がいいと思うよ。
<div style="float:left;">hoge1</div>
<div style="margin:0 100px">hoge1の説明<br>あんなことやそんなこと</div>
・・・最低限のことしか指定してないけど、こんな感じかな?
- 377 名前:Name_Not_Found :03/11/30 02:00 ID:o8x1wFc9
- >>374
済みません、以下の情報でよいでしょうか?
<dl>
<dt><a href="info.html">information</a></dt>
<dd>このページ<br />何かご案内書いているかと</dd>
<dt><a href="rireki.html">what's new?</a></dt>
<dd>更新履歴<br />あまり更新はないものと思われ<br />むしろ、更新に興味を持つ人がいるのかと</dd>
<dt><a href="xxx.html">xxx