2ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

/* CSS・スタイルシート質問スレッド【64nd】 */

1 :Name_Not_Found:2007/02/26(月) 00:31:28 ID:???
CSSに関する質問はこちらへどうぞ。 ※ 議論はよそで ※
■■■■■ 質問のしかた ■■■■■
●基礎は解説サイト(→【解説など】>>3-4)で勉強してください。
●質問の前に【FAQ】(>>5-9)を参照して、既出の再掲を避けて下さい。
●【FAQ】でもわからなかった場合、過去ログを検索すると載ってるかも。
 WinIEの場合は、[Ctrl+F]で検索できます。
●ブラウザによって対応していないプロパティーやバグがありますので、
 解説サイト(→【関連リンク】)の対応表や「CSSバグリスト」に目を通しておきませう。
●土台のHTMLが間違ってるとCSS指定も意図通りに効きません。
 正当(valid)なHTMLを心がけて下さい。validator(>>2)でチェックできます。

初心者の疑問は大抵ここまでで解決します。

●OSやブラウザの種類とヴァージョンについては必ず明記してください。
 特にNetscapeは、ver.4までと6以降でまったく別物です。
●「環境を書け」とか「ソースは?」と求められたら応じませう。
 その方が回答が早く得られます。質問は具体的に。

【まとめサイト】 http://web2ch.s31.xrea.com/?CSS
【FAQ】 http://web2ch.s31.xrea.com/?CSSFAQ
【過去ログ】 http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】 http://web2ch.s31.xrea.com/?CSSRelated
【前スレッド】 http://pc10.2ch.net/test/read.cgi/hp/1169637015/

関聯リンクは>>2-10
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9

2 :Name_Not_Found:2007/02/26(月) 00:32:14 ID:???
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド【第5版】
 http://pc8.2ch.net/test/read.cgi/hp/1144494359/
代替スタイルシートに萌え〜
 http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 37
 http://pc8.2ch.net/test/read.cgi/hp/1162545373/

【仕様書】
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.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

3 :Name_Not_Found:2007/02/26(月) 00:33:20 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録:CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/index.html

4 :Name_Not_Found:2007/02/26(月) 00:34:26 ID:???
【解説など】
・Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
 http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
 http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方
 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
 http://ike.s33.xrea.com/
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php

5 :Name_Not_Found:2007/02/26(月) 00:35:06 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: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
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.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html

6 :Name_Not_Found:2007/02/26(月) 00:36:10 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 ttp://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm

7 :Name_Not_Found:2007/02/26(月) 00:37:42 ID:rc9iuXNe
世界標準ホームページ制作王の、国内における標準化を目標に、
他社工作員と戦い続ける愛国有志のスレッドは以下の通りである。

【警告】21世紀の世界標準はホームページ制作王のみ
http://pc10.2ch.net/test/read.cgi/hp/1172413968/

非標準アプリケーションを製造・販売するために
標準アプリケーションに対していわれなき悪評を喧伝する企業、
ならびに非標準アプリケーションを使用しつづけて
標準アプリケーションの普及を妨げるユーザー、
彼らに世界の意志による正義の天誅が下る日は近い!

8 :Name_Not_Found:2007/02/26(月) 00:43:19 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://web.archive.org/web/20040221221340/http://kobit.info/tips/overflow.html
 http://web.archive.org/web/20040215182735/http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html

Q6:画面中央に配置するにはどうすれば?
A6:左右(水平方向)のセンタリングはA2に既出。垂直には色々な方法があります。
 「スタイルシート 縦中央(垂直中央)」参照のこと。
 http://chaichan.hp.infoseek.co.jp/qa3500/qa3558.htm
vertical-alignはテキストのみが対象だからブロックレベル要素を配置できません。

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。

9 :Name_Not_Found:2007/02/26(月) 00:44:36 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

Q9.リンクした画像の線が消えません。
A9.img要素ではなくa要素をセレクタにしてborder指定してませんか?
a:link img, a:visited img, a:hover img {border:none;}
NN4は http://cssbug.at.infoseek.co.jp/detail/nn4x/b022.html 参照。
text-decorationの場合、親要素に設定された下線を子要素で解除できないのが正しい仕様です。
cf. http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Q10: リンクを新しいウィンドウで開かせるにはどうしたら?
A10: CSSではできません。target属性かJavaScriptでやって下さい。別窓が開くと迷惑に感じる人もありますからなるべくしない、がW3Cの方針です。

Q11. height:100%;としても高さが100%になりません。
A11. heightを%単位で指定するためには親要素の高さを明示的に指定する必要があります。下記サイトを参照のこと。
「height: n%;の正しい仕様」
 http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの 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.sakura.ne.jp/x/01/tips/page/p0037.html


10 :Name_Not_Found:2007/02/26(月) 00:45:19 ID:???
【参考】
 IEの position:absolute; のバグを利用した擬似フレーム

----------------------------------------------------------------

*IEの position:absolute; のバグを利用した擬似フレーム

1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定

以下に示すようなハックを用いることにより、全ブラウザへの対応も可。

/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}

/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html

11 :Name_Not_Found:2007/02/26(月) 00:47:07 ID:???
>>2のリンク、現行スレじゃなかった。許せ。
前スレ>>1000氏ね

12 :Name_Not_Found:2007/02/26(月) 00:48:47 ID:???
>>1乙。
しかし64ndって・・・・・・前スレの63ndにつられるなよwww

13 :Name_Not_Found:2007/02/26(月) 01:21:49 ID:???
だよな。
64の場合は64rdだ。

14 :Name_Not_Found:2007/02/26(月) 01:28:37 ID:???
>>13
馬鹿。中学英語からやり直せw
64stだ。

15 :Name_Not_Found:2007/02/26(月) 01:52:09 ID:???
前スレ1000ワロタw
あれこそ1000に相応しい。

16 :Name_Not_Found:2007/02/26(月) 02:44:50 ID:???
ふさわしいかどうかは別にして、誘導まだなのに埋めんなアホ。

17 :Name_Not_Found:2007/02/26(月) 04:21:10 ID:mwkML6C9
64ck

18 :Name_Not_Found:2007/02/26(月) 06:23:50 ID:???
それよりも、まとめサイトが消えてるわけだが

19 :Name_Not_Found:2007/02/26(月) 07:43:51 ID:vxJoeb3J
64css

20 :Name_Not_Found:2007/02/26(月) 11:57:34 ID:tylfh3zR
たぶん FAQ レベルと思うんですが解決方法が見つからず…。

可変幅 div に対して nowrap/overflow:hidden にしたいんですがこれは無理でしょうか?
div の最大幅は先祖要素の幅(固定幅だが不定値)としたいのです。

具体的には、
<div id="container"><div> 可変幅 </div><div>固定幅右寄せ</div></div>
で、container が可変幅(さらなる親要素で width 指定)という状況で、
これを表示上一行で表現したいという。

つまり、可変幅div は container 内で右寄せ部に侵食しない範囲で広がり、
その上で内容テキストは overflow:hidden ではみ出した部分を削りたいのです。

21 :Name_Not_Found:2007/02/26(月) 12:05:45 ID:tylfh3zR
firefox では以下でうまくいってます。IE では左の div が広がっちゃいますが…。

<div style="text-align:center">
<div style="margin-left: auto; margin-right: auto; text-align: justify; width: 400px; border: 1px solid #ccc;">

<table><tbody><tr>
<td style="border: 1px dotted #f00"><div style="white-space: nowrap; overflow: hidden; ">
ながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいながいテキスト
</div></td>
<td style="width: 140px; white-space: nowrap; overflow: hidden; border: 1px dotted #00f">固定幅(幅確保)テキスト</td>
</tr></tbody></table>

</div>
</div>

22 :Name_Not_Found:2007/02/26(月) 12:16:13 ID:???
>>16
グズグズしてるからだろカス

23 :Name_Not_Found:2007/02/26(月) 12:20:28 ID:???
>>22
ファビョんなよw

24 :Name_Not_Found:2007/02/26(月) 14:40:37 ID:???
1.「固定する」
横幅を固定する、その理由はレイアウトのバランスを保つため
横幅を広げたらWebも横に広がり、レイアウトが崩れるようでは、初めからレイアウトはなかったのと同じ
固定された横幅なら、ウインドウの幅に関係なく常に一定の横幅の中にWebを表示することができ、
スリムでバランスのとれた構成が実現できるのです
実際、世界中の「CoolWeb」やプロが作っている企業ページのほとんどは横幅を固定しています

25 :Name_Not_Found:2007/02/26(月) 14:59:53 ID:???
>>22-23
いい流れだ。実に2chらしい( ^ω^)

26 :Name_Not_Found:2007/02/26(月) 15:07:07 ID:???
可変幅のレイアウトって地味に読みにくいよな

27 :Name_Not_Found:2007/02/26(月) 15:38:08 ID:???
>>26
ttp://wktk.vip2ch.com/dl.php?f=vipper22405.jpg

28 :Name_Not_Found:2007/02/26(月) 16:05:52 ID:???
>>24
無職のアホ原理主義者は固定幅は迷惑とかいってるみたいだけど
もともと購買能力の無いニートの意見は実際資本主義世界では無いに等しいからね。
デザインといったらPCのLED青いやつと交換するようなキモヲタの相手はしなくていいよ。

29 :Name_Not_Found:2007/02/26(月) 16:26:38 ID:???
というわけで28の意見は無視していいみたいです。

30 :Name_Not_Found:2007/02/26(月) 18:18:43 ID:???
可変幅の利点がいまいち不明

31 :Name_Not_Found:2007/02/26(月) 18:40:07 ID:???
極端な解像度に対応出来ると思ってた頃が、僕にもありました。

32 :Name_Not_Found:2007/02/26(月) 18:59:15 ID:???
>>20-21
Div使いまくってるのに、Tableレイアウトなのか・・・

33 :Name_Not_Found:2007/02/26(月) 19:07:06 ID:???
逆に固定幅の利点が不明。
作る側がデザインしやすいというくらいか?
閲覧する側からしたら知ったこっちゃないよな。

34 :Name_Not_Found:2007/02/26(月) 19:16:49 ID:???
閲覧する側からすると
幅は自分の好きにウィンドウを変えたい

35 :Name_Not_Found:2007/02/26(月) 19:23:51 ID:???
>>33-34
君たちが趣味でWebをやっている事はわかった

36 :Name_Not_Found:2007/02/26(月) 19:39:21 ID:???
>>35
実に短絡的だな。
仕事での話をすれば、クラの要望等で固定幅にせざるをえないことなど多々ある。
それは制作者の都合であり、クラの都合であり、閲覧者の都合ではない。
お前はひょっとして固定幅にすることのエクスキューズを求めてるだけなのか?

37 :Name_Not_Found:2007/02/26(月) 19:51:23 ID:tylfh3zR
うーん、ある pixel までは可変でそれ以上には広がらない(で overflow:hidden)って
結構あたり前にほしいと思うんですけどね…。やっぱ無理かなぁ。

今回の場合は右寄せ要素があるから面倒なんですが…。
positon: related のなかに absolute で right:0 なども試しましたが、
firefox ではそこそこだけど IE じゃぜんぜん…。

38 :Name_Not_Found:2007/02/26(月) 19:53:08 ID:???
>>36
Webの仕事をしているような書き込みですが
訪問者の多くが固定幅より幅可変を求めているとでも思っているのですか?

39 :Name_Not_Found:2007/02/26(月) 19:54:09 ID:???
というか、一番に試したのは float だったわけですが、float する要素自体が固定 width でないとあっさりブロック改行になるわけです…。
いろいろやって行き着いたのが table…。それでも(IEで)だめだったわけですが。

40 :Name_Not_Found:2007/02/26(月) 20:03:00 ID:???
>>37
>ある pixel までは可変でそれ以上には広がらないで
max-widthを調べろ。overflow関係ない。

41 :37:2007/02/26(月) 20:03:48 ID:???
37 は書き方が悪かったと思うので書き直します。

GUI 一般(web に拘らない)の table 的レイアウトで、特定列だけ可変幅にする
というのはごく普通だと思います。で、全セル nowrap&overflow:hidden というのも。
単にそれを実現したいだけなんですよね結局のところ…。

42 :37:2007/02/26(月) 20:05:18 ID:???
>>40 そのようなわけ(>>41)で max-width に指定すべき値が無いんです。
その指定すべき幅が親要素(>>41 の例の場合は table 幅)に影響されるので。

43 :Name_Not_Found:2007/02/26(月) 20:05:49 ID:???
>>38
実際にどうかは統計取るしかない。
それができないなら、それぞれのメリット・デメリットから考察するしかないよな。
で、あなたは訪問者の多くが幅可変より固定幅を求めているとでも思っているのですか?

44 :Name_Not_Found:2007/02/26(月) 21:07:59 ID:???
>>43

実際にどうかは統計取るしかない。
それができないなら、それぞれのメリット・デメリットから考察するしかないよな。
で、あなたは訪問者の多くが幅可変より固定幅を求めているとでも思っているのですか?


実際にどうかは統計取るしかない。 それができないなら、それぞれのメリット・デメリットから考察するしかないよな。 で、あなたは訪問者の多くが幅可変より固定幅を求めているとでも思っているのですか?


45 :Name_Not_Found:2007/02/26(月) 21:09:16 ID:???
固定幅=池沼乙

46 :Name_Not_Found:2007/02/26(月) 21:17:13 ID:???
大型ディスプレイでリキッドレイアウトを見ると果てしなく1行が長いんだぜ

47 :Name_Not_Found:2007/02/26(月) 21:19:05 ID:???
>>46
大型ディスプレイでブラウザ幅を自分好みにしてないってどういう初心者

48 :Name_Not_Found:2007/02/26(月) 21:22:32 ID:???
>>47
それは観覧者がしなければいけないのかよ?

49 :Name_Not_Found:2007/02/26(月) 21:28:59 ID:???
>>33
>逆に固定幅の利点が不明。

それを想像力の欠如と言います、
大多数の商業サイトが固定幅を採用している事実に直面しながら、
なお、その目的や利点を理解できないということは相当な重傷です。

世の中の仕組みが理解できないのは最近の初等教育の欠陥のなせる技であろうと思われます。
早めに死んでください。

宜しくお願いいたします。

50 :Name_Not_Found:2007/02/26(月) 21:33:37 ID:???
>>44
>いよな。 で、あなたは訪問者の多くが幅可変より固定幅を求めているとでも思っているのですか?

目の前の事実を直視できないのですか?
まず鏡を見てください、ブサイク中でしょうがそれがあなたの遺伝情報の発現です。
直視してください。

馬鹿にはわからないでしょうが、世の中理由がありみな行動しています。
その意味がわからないからといって説明を求めては行けません、
なぜならあなたに説明する程、暇ではないのです。

あなたが理解できなくても固定幅のサイトは存在するし、
あなたの遺伝情報も伝えられる事はないでしょう。
もし、良い人が現れたら感謝してください。
それはボランティアです。

51 :Name_Not_Found:2007/02/26(月) 21:42:10 ID:???
リキッド推奨派は観覧者が全員ブラウザのお気に入りを表示していると思ってないか?
1024×768で画面いっぱいに広げたブラウザでリキッドレイアウトの文章なんて読めたもんじゃない
読みにくければ自分で好みのサイズに変更しろってどう考えてもおかしいだろwww



52 :Name_Not_Found:2007/02/26(月) 21:45:29 ID:???
プライドだけは高いから基地害煽ると盛り上がるな

53 :Name_Not_Found:2007/02/26(月) 21:48:06 ID:???
ディスプレイが大型化・解像度が上がるにつれ幅可変レイアウトは減っていくだろうな

54 :Name_Not_Found:2007/02/26(月) 21:50:14 ID:???
しかし固定だと大型モニタ超解像度だとめっちゃ細くならね?

55 :Name_Not_Found:2007/02/26(月) 21:51:02 ID:???
幅可変なんかいってるの貧乏人だけでしょ?

56 :Name_Not_Found:2007/02/26(月) 21:51:50 ID:???
>>54
でかくしてスカスカになっても嬉しくも何ともないがな。


57 :Name_Not_Found:2007/02/26(月) 21:52:32 ID:???
>>54
殺風景ではあるが読みにくいよりまし

58 :Name_Not_Found:2007/02/26(月) 21:55:26 ID:???
普通に2-3枚表示してるけど?
画面一杯にするとなんかいいことあるのか?

59 :Name_Not_Found:2007/02/26(月) 21:59:43 ID:???
>>58
自分中心に物事を考えるなよ

60 :Name_Not_Found:2007/02/26(月) 22:00:08 ID:???
俺はタブブラウザだから画面一杯にしかならない

61 :Name_Not_Found:2007/02/26(月) 22:03:51 ID:???
>>59
なんかいいことあるのか?って意味わからないか?

>>60
タブブラウザって画面でかくなるとそんなに利点を感じないなぁ
Vistaやマックじゃタブなんか邪魔なだけだと最近感じるな。

62 :Name_Not_Found:2007/02/26(月) 22:04:33 ID:???
>>59
質問に逆ぎれか。。

ゆとりあるな。

63 :Name_Not_Found:2007/02/26(月) 22:08:34 ID:???
2〜3枚表示している奴もいれば全画面表示している人もいるって事だろ

64 :Name_Not_Found:2007/02/26(月) 22:12:27 ID:???
だから全画面表示してなんか良い事有るのかって聞いてるんだと思うんだけどな。

ゆとり満載だな。



全画面表示の特徴(このスレ直近より)

>>56 スカスカになる
>>57 読みにくい
>>60 タブブラウザだからそうなる


どれも積極的な理由に見えないけど。。。。

65 :Name_Not_Found:2007/02/26(月) 22:13:20 ID:???
>>64

スルーよろ

66 :Name_Not_Found:2007/02/26(月) 22:14:22 ID:???
>>61
んーでも、ビジターのディスプレイを汚さない要素は大事だと思う

67 :Name_Not_Found:2007/02/26(月) 22:14:37 ID:???
表示の仕方は個人の自由なんだから良い事があるないなんて関係ないだろ
自分も全画面表示なんてしないし・・・

68 :Name_Not_Found:2007/02/26(月) 22:18:03 ID:???
おいもういいだろ
12chみろゴルゴ13の製作風景だぞ。

69 :Name_Not_Found:2007/02/26(月) 22:23:15 ID:???
>>51
固定だと自分で好みのサイズに変更することさえできないんだぞ?

70 :Name_Not_Found:2007/02/26(月) 22:26:46 ID:???
ゴルゴすげー。
脚本家45人っておい。
直木賞作家もゴルゴの脚本家出身かよ!

71 :Name_Not_Found:2007/02/26(月) 22:27:39 ID:???
固定推奨してた奴は結局自分の基地外っぷり披露しただけで去ってったな

ところでここ何のスレ?

72 :Name_Not_Found:2007/02/26(月) 22:35:42 ID:???
WPを使ってBlogを作ろうと思ってます。サイドバーからメニューが
左右に突き出た形のデザインで、CSSでつまずいてしまっています。
サンプルイメージを下記の場所に置かせていただきました。
レイアウトは固定です。

http://ccfa.info/cgi-bin/up/upload.html
up0215.jpg
PASS:sample

サイドバーのCSSの一部はこんな感じですが、だめだめな感じです。

#rap {text-align: center; }

#sidebar {float: left; clear: right; width: 220px; text-align: center;}

#title {width: 190px;height: 190px;margin-left:15px; margin-right: 15px;background: #000160; }

#menu1 {background: #6C1FB3; color: White; width: 220px; height: 30px; }

.space40 {width: 190px; height: 40px; margin-left: 15px; margin-right: 15px;
background: #000160; }

何か例となるサイトやCSSはないものでしょうか。

73 :Name_Not_Found:2007/02/26(月) 22:39:56 ID:???
>>72
>レイアウトは固定です。

旬なワードだな!w

74 :Name_Not_Found:2007/02/26(月) 22:39:56 ID:???
>>49,50何だこの池沼は

75 :Name_Not_Found:2007/02/26(月) 22:40:30 ID:???
さあ、リキッドデザインリターンズの時間です!w

76 :Name_Not_Found:2007/02/26(月) 22:40:49 ID:???
でかいモニター使う奴は全画面サイズでブラウザ使わないから問題ない。
見やすい大きさってのはあるからな。

77 :Name_Not_Found:2007/02/26(月) 22:41:39 ID:???
>>72
その質問の仕方でどう答えろと?

78 :Name_Not_Found:2007/02/26(月) 22:42:27 ID:???
>>75
あなたは池沼リターンズですか?

79 :Name_Not_Found:2007/02/26(月) 22:46:39 ID:???
ID表示にしようぜ、アホは消せるし粘着も減るだろ。

80 :Name_Not_Found:2007/02/26(月) 22:50:15 ID:???
Webデザイナーも素材屋も小学生も池沼もW3C信者も制作王狂信者もアフィ厨も同人板の腐女子も潜伏してるのがこの板の醍醐味だろうがよ
ID表示にしたらつまらんよ

81 :Name_Not_Found:2007/02/26(月) 22:54:21 ID:???
そんな面白さはいらないw

82 :Name_Not_Found:2007/02/26(月) 22:56:13 ID:???
やましい事はしてないからIDになっても全然困らない。

83 :Name_Not_Found:2007/02/26(月) 22:57:23 ID:???
tableで作ってるけど、サイドバーの話題が出ると揺らぐ。
右のサイドバーだと、コンテンツ→サイドバーの順にクロールするんだよね。
ブロック要素やってみたけど、レイアウトの微調整がむずかしすぎてだめだった。
慣れると微調整も楽になるんだろうか。

ってクロールの順番てtableは行の結合すればいいだけか。
でもソースごつくて保守大変。tableユーザーってオールドタイプ?

84 :Name_Not_Found:2007/02/26(月) 23:03:26 ID:???
少なくともここで言うことじゃねーな

85 :Name_Not_Found:2007/02/26(月) 23:04:04 ID:???
>>72,>>83
何をどうしたいか書け。何言ってるかさっぱりわからん。
tableレイアウトはスレ違いだ。

86 :Name_Not_Found:2007/02/26(月) 23:10:20 ID:???
リキッドと固定は知覚方法の違いもあるんだろうな。
デザイン畑よりの人間でブロックマンとか好きな奴はリキッド?なんか理解できないだろうし。
記述言語から入ってそれを体系的・論理的に理解してるやつらにはまた別の感覚があるんだろうな。

87 :83:2007/02/26(月) 23:11:27 ID:???
流れが雑談だったから質問と言うわけでもない

88 :Name_Not_Found:2007/02/26(月) 23:12:51 ID:???
>>87
さっきから顔真っ赤な奴が混じってるからしょうがないよ。

89 :Name_Not_Found:2007/02/26(月) 23:14:52 ID:???
うわ粘着

90 :Name_Not_Found:2007/02/26(月) 23:25:43 ID:???
>>87
質問だとは思ってなかったが、どちらにしろここで言うことじゃない。

91 :Name_Not_Found:2007/02/26(月) 23:47:17 ID:???
疑問符で書いといて質問じゃない、とはねw
もうアホかと。

92 :Name_Not_Found:2007/02/27(火) 00:02:30 ID:???
おまえらまとめて出てけ。

93 :Name_Not_Found:2007/02/27(火) 00:10:22 ID:???
煽ることしか出来ない奴は帰れ

94 :Name_Not_Found:2007/02/27(火) 00:26:21 ID:AekS3jy5
CSSの勉強をしているのですが質問があります。
body {
height:100%;
max-height:100%;
   overflow:hidden;
   border:0;
}
のheight:100%;の後にmax-height:100%;を書く理由が分かりません。
どういった効果があるのでしょうか?ご指導よろしくお願い申し上げます。

95 :Name_Not_Found:2007/02/27(火) 00:31:41 ID:???
あ・い・し・て・るのブレーキサインと一緒

96 :Name_Not_Found:2007/02/27(火) 00:39:17 ID:???
>>94
意味がない・・・

97 :94:2007/02/27(火) 01:08:56 ID:AekS3jy5
なるほど。意味が無いのですか。
難しく考えすぎちゃいました;
ありがとうございました。

98 :Name_Not_Found:2007/02/27(火) 08:01:06 ID:???
ふと思ったんだがリキッド派は2chでも改行する必要ないんじゃね
どうして改行するんだ?

99 :Name_Not_Found:2007/02/27(火) 10:47:32 ID:???
>>98
専ブラで改行しないで横スクロールバーが出るやつもあるらしいぞ。
それはリキッドソリッド全く関係なく他人への気遣いだと思うが。

100 :Name_Not_Found:2007/02/27(火) 11:20:06 ID:???
まだ続ける気?

101 :Name_Not_Found:2007/02/27(火) 11:46:05 ID:???
まだ煽る気?

102 :100:2007/02/27(火) 12:04:39 ID:???
>>101
それは俺に対してか?
何を勘違いしてるか知らないけど俺は傍観者だ。
スレ違いの話題をいつまで引っ張る気だと言っているんだが。

103 :Name_Not_Found:2007/02/27(火) 12:18:41 ID:???
>>102
長文でスレ違い乙。

104 :Name_Not_Found:2007/02/27(火) 12:28:11 ID:???
>>98-103まとめて消えろ

105 :Name_Not_Found:2007/02/27(火) 12:39:22 ID:???
一番は95だと思うな

106 :Name_Not_Found:2007/02/27(火) 12:51:54 ID:???
どうでもいいけど3行って長文か?

107 :Name_Not_Found:2007/02/27(火) 12:56:03 ID:???
単にイヤミだろ

108 :Name_Not_Found:2007/02/27(火) 13:01:44 ID:???
br病でググレ

109 :Name_Not_Found:2007/02/27(火) 13:34:31 ID:???
初めて聞いた>br病

110 :Name_Not_Found:2007/02/27(火) 14:47:43 ID:???
とりあえず今は関係ないな

111 :Name_Not_Found:2007/02/27(火) 19:38:26 ID:???
リスト<li>の黒丸のサイズを小さくさせるにはどうしたらいいですか?

112 :Name_Not_Found:2007/02/27(火) 19:52:16 ID:???
>>111
disc指定ならfont依存。画像とかtextにすれば。

113 :Name_Not_Found:2007/02/27(火) 20:00:25 ID:???
>>112
どうもありがとう
指定なしで規定の使っててfont-size小さくしても文字だけ小さくなって
精進します

114 :Name_Not_Found:2007/02/27(火) 20:14:13 ID:???
>>113
いや、特に指定しなければdiskだよ。

115 :Name_Not_Found:2007/02/27(火) 21:05:38 ID:???
>>114
いや、UA依存だよ。
Lynxなら*

116 :Name_Not_Found:2007/02/27(火) 21:09:47 ID:???
>>115
それは知らなかった。thx!

117 :Name_Not_Found:2007/02/27(火) 21:22:08 ID:???
>>115
確かにdisc、square、circleはUA依存だけど、lynxはそもそもCSSに対応して
ないんじゃ

118 :115:2007/02/27(火) 21:37:54 ID:???
いや、CSSとか<ul type="***">とか何もしなかった場合にどんなリストマークが表示されるかって言いたい。

119 :Name_Not_Found:2007/02/27(火) 21:47:10 ID:???
リストのサイズはjavascript使わないと無理だろ
まともに回答してやれよ

120 :Name_Not_Found:2007/02/27(火) 22:02:47 ID:???
>>119
>>119
>>119

121 :Name_Not_Found:2007/02/27(火) 23:22:15 ID:???
CSS2.1に出てくるaligned subtreeというのがよく分からないのですが、どな
たか説明してもらえないでしょうか。
http://www.w3.org/TR/CSS21/visudet#propdef-vertical-align
「aligned subtreeはその要素とvertical-alignが"top"か"bottom"でない子要素
のaligned subtreeを含む」ってどういうことですか?

122 :Name_Not_Found:2007/02/27(火) 23:39:43 ID:???
>>121
無理せず日本語訳を読めばいいと。
2.1はあるのか知らないが、vertical-alignが2とそうそう変わるわけないし。

123 :Name_Not_Found:2007/02/28(水) 00:20:38 ID:???
>>121
ただの、virtical-alignの説明じゃないかw難しく考えナイナイ!!


<img src"***" style="vertical-align:top">ああああああああああああああ

ホームページの説明を言えば、
imgが親で、サブツリーがああああああああああああああああ

virtical-alignは、ブロック要素には指定できないから、その関連のこと言ってんでしょ。
imgタグに入れた場合は、その要素を含んだDivに適用されっから、imgに入れた場合、
親にあたる画像に対して、テキストが、上下する配置になる

ってのを、ややこい文章で説明してんだろ

124 :Name_Not_Found:2007/02/28(水) 01:13:07 ID:???
<div>
 <ul>
  <li>あああ</li>
  <li>いいい</li>
 </ul>
</div>

を表示したときって

 ・あああ
 ・いいい

になると思うんだけどこの左の無駄な空きってCSSで削除できる?
text-alignとか試したんだけどできなくて・・・初心者すぎだがよろしくたのむ

125 :Name_Not_Found:2007/02/28(水) 01:30:11 ID:???
>>124
li { margin-left: -1em; }

126 :Name_Not_Found:2007/02/28(水) 01:44:00 ID:???
最初に
*{margin:0;padding:0;}
って指定してから必要な部分にmargin設定するのをお勧め。

127 :Name_Not_Found:2007/02/28(水) 03:10:35 ID:YJ3AL7eb
すいません、CSS勉強しながら、HP作ってます。
そこで質問なんですが、

お気に入りに入れた時に、ホームページによっては、
そのページのマークみたいなのが付いてるページありますよね。

ヤフーならY! Yahoo動画  とか。
     ↑マーク

このマークって、どうやってはめ込んでるんでしょうか??
すいません、CSSの質問ではないのかもしれないのですが。。
あと、このお気に入りのマークって、名称とかあるんでしょうか???

お忙しいと思いますが、どうかよろしくお願いします。

128 :Name_Not_Found:2007/02/28(水) 03:15:13 ID:0RPQob4U
>>127
お気に入りアイコン?
作り方がここにあるよ。
ttp://www.tagindex.com/hp_guide/img/favicon.html

129 :Name_Not_Found:2007/02/28(水) 03:16:25 ID:???
確かにスレ違い。
とりあえずfaviconでググるといいよ。

130 :Name_Not_Found:2007/02/28(水) 04:06:48 ID:YJ3AL7eb
>>128-129
さっそくの、ご返事ありがとうございました。
作成ページまで、お手数をおかけします。
faviconというのですね、勉強になりました。

ありがとうございました!

131 :Name_Not_Found:2007/02/28(水) 06:42:42 ID:???
            全体を中央に

       |         A       |    |
        -------------------------    |
       |   |             |   |
       | B |     C       | D |
       |   |             |   |
       |   |             |   |
       |   |             |   |


こういうレイアウトをCSSで実現するにはどうしたらいいのでしょうか。
今のところ下のような感じになっていてD以外は収まっています。

<body style="text-align:center">
  <div style="text-align:center; margin-left:auto; margin-right:auto; width:ページ全体の幅">
    <div>
      <div id="A"> ...... </div>
      <div style"width:Aと同じ">
        <div id="C" style="float:left"> .... </div>
        <div id="B" style="float:right"> .... </div>
      </div>
    </div>

    <div id="D"> .... </div>
  </div>
</body>

132 :131:2007/02/28(水) 06:43:39 ID:???
  <div style="text-align:left; margin-left:auto; margin-right:auto; width:ページ全体の幅">

でした。

133 :131:2007/02/28(水) 06:45:18 ID:???
BとCのfloatも逆です・・・

134 :Name_Not_Found:2007/02/28(水) 08:08:44 ID:???
ABCを1つのdivでまとめて
そのdivとDのdivで考えれば余裕だろ

135 :Name_Not_Found:2007/02/28(水) 08:11:47 ID:???
おまえらdivってどう発音してる?
デーアイブイ?
ディブ?
デブ?

136 :Name_Not_Found:2007/02/28(水) 08:17:03 ID:???
でぃぶ


137 :131:2007/02/28(水) 08:22:51 ID:???
>>134
    <div id="D" style="float:right;"> .... </div>

にすると

  <div style="text-align:center; margin-left:auto; margin-right:auto; width:ページ全体の幅">

で指定した幅を超えて画面右端にいってしまうんです。

138 :Name_Not_Found:2007/02/28(水) 08:35:34 ID:???
c left
b left
d left

139 :Name_Not_Found:2007/02/28(水) 08:37:12 ID:???
b left
c left
d left

140 :131:2007/02/28(水) 09:07:21 ID:???
どうもCSSの問題じゃなさそうなのでもう一度ソース見直してみます。
レスしてくれた方、ありがとうございました。

141 :134:2007/02/28(水) 09:24:06 ID:???
<body style="text-align:center">
  <div style="text-align:center; margin-left:auto; margin-right:auto; width:ページ全体の幅">

    <div style="float:left">
      <div id="A"> ...... </div>
      <div id="C" style="float:left"> .... </div>
      <div id="B" style="float:right"> .... </div>
    </div>

    <div id="D" style="float:left"> .... </div>

<div id="footer" style="clear=all"><div>

  </div>

</body>

これでいけるだろ

142 :134:2007/02/28(水) 09:26:04 ID:???
clear="all"=×
clear="both"

143 :Name_Not_Found:2007/02/28(水) 09:34:32 ID:???
Dの幅減らしてみれば入る

144 :Name_Not_Found:2007/02/28(水) 12:17:14 ID:PWdi1aTg
外部cssにて全称セレクタでfont-sizeとcolorを設定して、所々classでそれぞれ
を変更したんですが全称のほうが優先されてしまいます。styleでタグに直接
入れるとやっと反映されます。
全称は一番優先度が低いらしいですが、こういう仕様なんでしょうか?

145 :Name_Not_Found:2007/02/28(水) 12:18:45 ID:???
単に書き方間違えてるんだろ。

146 :Name_Not_Found:2007/02/28(水) 16:07:34 ID:8Byt7U5d
マップでエリア内のリンク形状を変えたいんだけど、foxで動くんだけどIE,Safariで動きません・・・
よい方法ありませんかね?

area shapeにhrefは、書けない仕様です。

<map name="nanashi">
<area shape="rect" style="cursor: pointer" coords="295,4,340,22" id="nanashi1" alt=" ">
<area shape="rect" style="cursor: pointer" coords="360,4,402,22" id="nanashi2" alt=" ">
</map>

ちなみに、最初はCSSからclass属性で読み込ませてましたがダメなので
現在は直接書いてしまっています。それでもダメなのはなぜ。。。。

147 :Name_Not_Found:2007/02/28(水) 16:08:42 ID:???
>リンク形状
なんだこれ

148 :Name_Not_Found:2007/02/28(水) 16:13:09 ID:8Byt7U5d
>>147

すみません。
カーソル形状でした。。。

149 :Name_Not_Found:2007/02/28(水) 16:26:02 ID:???
>>148
意味がわからない。クリッカブルマップにリンクが無くて、いったい何の主義なんだ。

150 :Name_Not_Found:2007/02/28(水) 16:32:09 ID:8Byt7U5d
>>149
この領域内だけをカーソル形状「リンク」にしたいとの要望がきたんですよね。
私にもどんな主義かはわかりません。

151 :Name_Not_Found:2007/02/28(水) 16:32:38 ID:???
>>146
area shapeにhrefは、書ける仕様です。
ttp://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#h-13.6.1

152 :Name_Not_Found:2007/02/28(水) 16:45:21 ID:8Byt7U5d
>>151

通常は、書ける仕様なんですがこのページに関しては書けないんです。
なのでCSSで無理やり変えてやろうかと思い立ったんですが、変わってくれなくて。

153 :Name_Not_Found:2007/02/28(水) 16:54:14 ID:???
>>150
用語もまともに言えないレベルだもんな。言いなりなんだよな。
ユーザビリティに反するくらい言えるようになりなさいな。
どうあってもmap使うなら、空リンクつけたら出来る。以上。


45 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.02.02 2014/06/23 Mango Mangüé ★
FOX ★ DSO(Dynamic Shared Object)