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

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

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

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

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

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

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

【まとめサイト】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:05/02/08 05:45:55 ID:???
【過去ログ】
1 http://mentai.2ch.net/hp/kako/974/974934062.html
2 http://natto.2ch.net/hp/kako/984/984113434.html
3 http://natto.2ch.net/hp/kako/992/992992981.html
4 http://pc.2ch.net/hp/kako/996/996828258.html
5 http://pc.2ch.net/hp/kako/1005/10050/1005047493.html
6 http://pc.2ch.net/hp/kako/1011/10113/1011358982.html
7 http://pc.2ch.net/hp/kako/1015/10154/1015474859.html
8 http://pc.2ch.net/hp/kako/1019/10198/1019881572.html
9 http://pc3.2ch.net/hp/kako/1025/10253/1025346520.html
10 http://pc3.2ch.net/hp/kako/1028/10286/1028646616.html
11 http://pc3.2ch.net/hp/kako/1031/10317/1031773943.html
12 http://pc3.2ch.net/hp/kako/1034/10349/1034922586.html
13 http://pc3.2ch.net/hp/kako/1038/10384/1038437758.html
14 http://pc5.2ch.net/hp/kako/1041/10416/1041641395.html
15 http://pc5.2ch.net/hp/kako/1045/10451/1045124732.html
16 http://pc5.2ch.net/hp/kako/1047/10471/1047154499.html
17 http://pc5.2ch.net/hp/kako/1048/10487/1048775997.html
18 http://pc5.2ch.net/hp/kako/1050/10500/1050086156.html
19 http://pc5.2ch.net/hp/kako/1053/10536/1053619342.html
20 http://pc5.2ch.net/hp/kako/1055/10555/1055536413.html
21 http://pc5.2ch.net/hp/kako/1057/10578/1057860130.html
22 http://pc5.2ch.net/hp/kako/1060/10608/1060869440.html
23 http://pc5.2ch.net/hp/kako/1064/10645/1064502391.html
24 http://pc5.2ch.net/hp/kako/1066/10663/1066310242.html
25 http://pc5.2ch.net/hp/kako/1069/10692/1069216458.html
26 http://pc5.2ch.net/test/read.cgi/hp/1072018825/
27 http://pc5.2ch.net/test/read.cgi/hp/1074845459/
28 http://pc5.2ch.net/test/read.cgi/hp/1076968824/
29 http://pc5.2ch.net/test/read.cgi/hp/1079598884/
30 http://pc5.2ch.net/test/read.cgi/hp/1082785026/

3 :Name_Not_Found:05/02/08 05:46:43 ID:???
【過去ログ】
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/
36 http://pc5.2ch.net/test/read.cgi/hp/1098720757/
38 http://pc5.2ch.net/test/read.cgi/hp/1101827958/
【前スレッド】
39 http://pc5.2ch.net/test/read.cgi/hp/1104596224/

4 :Name_Not_Found:05/02/08 05:47:54 ID:???
【関連スレッド】
CSS/DHTMLバグ辞典スレッド 第4版
 http://pc5.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
 http://pc5.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc5.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc5.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
 http://pc5.2ch.net/test/read.cgi/hp/1097724119/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(消滅につき↓で)
 http://web.archive.org/web/20011005012937/http://www.fan.gr.jp/~kaz/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(消滅につき↓で)
 http://web.archive.org/web/20011202074642/http://www.fan.gr.jp/~kaz/rec-css2/cover.html
CSS2の仕様書の邦訳アーカイブ(個人訳)
http://web.archive.org/web/20011021231417/http://www.fan.gr.jp/~kaz/rec-css2.zip
【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/

5 :Name_Not_Found:05/02/08 05:48:56 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
・ばけらの 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標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.co.jp/SiliconValley-SantaClara/1308/

6 :Name_Not_Found:05/02/08 05:49:43 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

7 :Name_Not_Found:05/02/08 05:50:17 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm

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

8 :Name_Not_Found:05/02/08 05:51:00 ID:???
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://kobit.info/tips/overflow.html
 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は一要素に一つだけ。要素を重ねるなど工夫しませう。

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

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

Q11: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A11: 下記をご覧あれ。テーブル・レイアウトは段組の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.jp/site/tips/page/p0037.html

10 :Name_Not_Found:05/02/08 06:07:16 ID:???
スレたて乙
前スレで誰かが指摘してたけど
ttp://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/cover.html は
ttp://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html に移ったんだな。
CSS1の分も合わせて次スレ立てる際には修正よろしく。

11 :Name_Not_Found:05/02/08 06:50:09 ID:???
そうだったのか、すまん。

12 :Name_Not_Found:05/02/08 07:55:40 ID:???
フロートでデザインしているのですが
ウインドを縮めれば、右側が左側の下に潜ってしまいます!
なんででしょうか?

13 : ◆miDMBzoAn. :05/02/08 08:43:19 ID:JjN41vgc
おつかれさまです >>1

14 :Name_Not_Found:05/02/08 09:01:01 ID:???
以前どこかのサイトでbackground-repeatに関しての文章を見たのですが、どんなサイトだったか忘れてしまいました。

内容はリピートさせる画像のサイズに関するもので、最小限のサイズに抑えてリピートの数を増やすよりも
ある程度の画像サイズでリピートの数を減らした方がUAへの処理負荷が低いとかなんとか、そんな感じのことでした。

上記のようなコンテンツに思い当たりのある方おられませんでしょうか?

15 :Name_Not_Found:05/02/08 09:30:16 ID:???
>>14
そんなことはない

16 :Name_Not_Found:05/02/08 09:36:29 ID:???
>>12
右側がフロートしてるから。

17 :Name_Not_Found:05/02/08 13:22:11 ID:???
NN6でposition:absolute;で指定したブロック要素の下にくる要素は
上部分のマージンが無視されてしまうじゃないですか。
これを何とか回避したいんですが、いい方法はありますか?

18 :Name_Not_Found:05/02/08 13:41:58 ID:wbCt6pKW
リンクの前に、画像をおきたいので、
a.external {
background-image: url(/image/external.gif);
background-repeat:no-repeat;
background-position:1px 0px;
padding-left:12px;
}
/*
/image/external.gifは10*10px
*/
というようなcssを書きました。
リンクが1行で終わる場合はどのブラウザで見ても一緒なのですが、
このclassを指定したリンクが複数行にわたる場合、
MacIE5.2の場合(それ以前のバージョンは確認環境がないのでしていないです)、
行の頭毎に画像がはいるが、2行目以降はpaddingが効いていないため(当たり前)、
文字と画像がかぶってしまいます。
<img>タグを書かずに、aのclassを設定すだけでいけて、なおかつこれを回避する
にはどうすればいいでしょうか?

19 :Name_Not_Found:05/02/08 14:42:33 ID:???
>>18
htmlも晒す

20 :Name_Not_Found:05/02/08 15:01:26 ID:???
NN6ってform要素がinline化できない?
form要素とinput要素両方ともdisplay:inlineの指定してるのに
改行されちゃうから対処にこまってまつ。対策ないですか?

21 :Name_Not_Found:05/02/08 16:42:33 ID:???
absolute はウィンドウの左上から位置を測るのでしょうか?
それとも
親ボックスの左上から測るのでしょうか?

22 :Name_Not_Found:05/02/08 17:19:59 ID:???
>>21
そんなことソース書いて試せばわかるだろう?

23 :21:05/02/08 17:34:00 ID:???
親ボックスの左上からでした;
でもポジションは難しいですね・・・・・・・

24 :22:05/02/08 17:34:52 ID:???
>>21
親ボックスが、position: relative; ならばボックスに沿う

#upper {
height: 100px;
background-color: blue;
}
#container {
position: relative;
height: 300px;
background-color: red;
}
#main {
position: absolute;
top: 0;
left: 100px;
width: 150px;
height: 150px;
background-color: yellow;
}

<div id="upper">上部のボックス</div>
<div id="container">親ボックス
<div id="main">absolute</div>
</div>

25 :18:05/02/08 18:00:18 ID:wbCt6pKW
>>19
失礼しました。
htmlは普通に
<a href="http://example.com/" class="external">hoge</a>
です。で、この<a></a>で囲まれたhogeが長くなり、複数行にわたる場合、
MacIE5.2で改行されるごとに、行の頭に背景画像が現れてしまうという感じです。
repeatされてしまっている風でもなく、行毎にbackground-imageが呼ばれる
けど、padding-leftは最初の1行目だけきいているって感じです。

26 :Name_Not_Found:05/02/08 18:17:54 ID:???
>14,15
自分の経験では4×4ピクセルの背景画像と
32×32ピクセルの背景画像を使った場合とで
敷き詰める数の多い4×4の方が
スクロールが重たく感じるブラウザがあったかと

透過gifなんかを使った場合特にそう思ったが
気のせいなのかな

27 :Name_Not_Found:05/02/08 18:17:55 ID:???
border="0" align=""
を書くとHTML lintでエラーと判定されるようになったのですが、
CSSで代替するにはどうしたらよいでしょうか。


28 :Name_Not_Found:05/02/08 18:32:22 ID:???
ttp://w3j.org/articles/cssready/cssready02.html
ここお勧めですよ・・・・皆さん
>>24
relative使わなくても、絶対配置でautoなどをうまく使った方が良くない?

29 :mago:05/02/08 18:49:18 ID:nPHRYhZl
CSSでフレームと同じ効果をだしたいのですが、
どうすればよいのでしょうか?
今は、flortを使って見た目だけは再現してます。
レイアウトは普通の左にメニュー、右にコンテンツです。
例として、2CHのような感じですね。
CSSをレクチャーするサイトのソースを覗いても、ダメでした。
全てのページにメニューバーを記述してました。
ちなみに<objet>で埋め込むという事も試してますけど、本末転倒な
きがするのです。

30 :Name_Not_Found:05/02/08 19:33:24 ID:???
CSSでフレームと同じ効果を出すことは絶対無理です。
フレームみたいなものはCSSでできます。
【FAQ】
Q5: CSSで擬似フレームってどうやるの?
A5: 次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
 http://kobit.info/tips/overflow.html
 http://kobit.info/files/frame.html
overflowを用いた擬似フレーム
 http://www.fromdfj.net/html/overflow.html
レイアウトサンプル 擬似フレーム
 http://www.rju666.com/web/layout/imitate_frames.html



31 :Name_Not_Found:05/02/08 19:46:10 ID:+YQrWE2L
<TD STYLE="filter: Alpha( Opacity=0, FinishOpacity=100, Style=1, StartX=0, FinishX=0, StartY=100, FinishY=0);"
bgcolor="#000000">こんにちわ</TD>

背景にグラデーションをかけたいのですが、上のようにやると「こんにちわ」という文にも
グラがかかってしまいます。
文だけ一色にするにはどうすればいいんでしょうか?


32 :Name_Not_Found:05/02/08 19:51:59 ID:???
ttp://hp.xrea.jp/m/link/34.html
みたいなことをcssでしたいのですが、無理でしょうか?

33 :Name_Not_Found:05/02/08 19:59:47 ID:???
どうしたんだ今日は?
がっこ休みだと>>1も読まない奴しか来ないのかよ。

34 :Name_Not_Found:05/02/08 20:10:30 ID:???
>>33
ヒッキーおつ

35 :Name_Not_Found:05/02/08 20:42:29 ID:???
ヒッキーで〜〜し

36 :Name_Not_Found:05/02/08 22:13:33 ID:???
>>26
気のせい

37 :14:05/02/08 22:28:13 ID:???
>>15,26
回答有難うございます。

今作っているサイト(グラフィック系)の訪問者の環境などを考慮すると
大したストレスにもならなさそうですので、今回は都合のいいようにやってみます。

38 :Name_Not_Found:05/02/08 22:31:44 ID:???
>>25
だから、全体行に渡るhtmlの構造を部分的に晒せ

39 :Name_Not_Found:05/02/08 22:48:54 ID:???
>>14,15,26
サイトは知らないけど、僕は実際に経験しました。

バックグラウンドが2x1の画像とかだと、めっちゃ重い、っていう環境があることはたしかです。

昔の話だから、CSSでも同じことがおきるかどうかは分からないけどね。
普通に考えたら数年でそんなに実装が進化しているとは思えないですな。

>>15
適当なこと言わない

>>26
気のせいではないと思う



40 :Name_Not_Found:05/02/08 22:53:31 ID:PwwxMWde
.TonpuLink A:link { color : #000000 }
.TonpuLink A:visited { color : #000000 }
.TonpuLink A:active { color : #CC0000 }
.TonpuLink A:hover { color : #246A1D; background-color : #88E87E }
これは<STYLE></STYLE>の間に記述して<SPAN>で使用していますが
sytle="A;link"みたいな方法はありますか?
<A style="link{color:#0000CD">こんな感じではダメでした。

41 :Name_Not_Found:05/02/08 22:55:20 ID:???
>>39
それは明らかに君の思い違い。

42 :Name_Not_Found:05/02/08 22:56:50 ID:???
>>41

思い違いができるようなレベルではなく、
ほとんどフリーズのような重さです。
描画の過程が見えます。



43 :Name_Not_Found:05/02/08 22:59:30 ID:???
>>40
おまいも>>41

44 :40:05/02/08 23:04:28 ID:???
>>43
どういうコトですか?

45 :Name_Not_Found:05/02/08 23:07:36 ID:???
>>44
「リファレンスサイトで勉強しておいで」ってことだよ。

46 :Name_Not_Found:05/02/08 23:09:32 ID:???
「背景 リピート 処理」→google で見つけた
ttp://www.gac.jp/article/index.php?stats=question&category=7&id=7558&command=msg
ほんとかどうかは知らんが


47 :Name_Not_Found:05/02/08 23:23:30 ID:???
<TABLE border=1 style="TABLE-LAYOUT:fixed; width=400>
 <TR><TD>観光地</TD><TD>ランク</TD><TD>名物</TD></TR>
 <TR><TD>日光</TD><TD>5</TD><TD>猿・東照宮</TD></TR>
 <TR><TD>秩父</TD><TD>4</TD><TD>芝桜・祭り</TD></TR>
 <TR><TD>箱根</TD><TD>3</TD><TD>温泉・湖</TD></TR>
</TABLE>

TABLEの表示は↑のようにTABLEタグ内に「style="TABLE-LAYOUT:fixed;」を入れることにより早くなりますが、
↓のように、TABLEを二重にした場合でも早く表示させるにはどのようにしたら良いですか?

<TABLE border=1 style="TABLE-LAYOUT:fixed; width=400>
 <TR>
  <TD>
   <TABLE border=1 style="TABLE-LAYOUT:fixed; width=200>
    <TR><TD>観光地</TD><TD>ランク</TD><TD>名物</TD></TR>
    <TR><TD>日光</TD><TD>5</TD><TD>猿・東照宮</TD></TR>
    <TR><TD>秩父</TD><TD>4</TD><TD>芝桜・祭り</TD></TR>
    <TR><TD>箱根</TD><TD>3</TD><TD>温泉・湖</TD></TR>
   </TABLE>
  </TD>
 </TR>
</TABLE>



48 :Name_Not_Found:05/02/09 00:17:00 ID:6um6YjtR
初めてblog(Excite)を作っていてCSSをいじっていたら、なんか全体のフォントが
二周りくらい大きくなったまま戻らなくなってしまった...
リンクをクリックすると一瞬もとの大きさに戻る。
これってどうしたらいいんでしょうか?

49 :Name_Not_Found:05/02/09 00:34:51 ID:???
>>48
メニューの表示>文字のサイズで2段階サイズを下げる。
クリックするとサイズが変わるのはおそらくUTF-8だから。

50 :48:05/02/09 00:42:15 ID:6um6YjtR
>>49
まったくそのとおりでした。お恥ずかしい。

51 :Name_Not_Found:05/02/09 01:54:18 ID:???
>>47
全部スタイルシートにするわけにはいかないのかなぁ?
いかないから聞いてるのか。。。
テーブル二つで、うまいやりかたありそうだけども。。

52 :Name_Not_Found:05/02/09 02:56:33 ID:???
なんで>>41みたいに断言できるのか不思議

53 :Name_Not_Found:05/02/09 05:54:26 ID:???
CSSで太字にしたいときってどうすればいいんでしょう?
<b>・・・じゃないよね?わかんないよぉ〜・・・。
そういうのってどこにのってるんでしょうか?

54 :Name_Not_Found:05/02/09 07:51:35 ID:???
>>53
しつこいな。
少しは自分で探せよ。。。
font-weight:bold;

55 :Name_Not_Found:05/02/09 07:52:44 ID:???
ってか CSSは化粧って言うけど、
俺のサイトはCSSでガチガチ・・・・

ん?なんでもないよ

56 :Name_Not_Found:05/02/09 09:27:02 ID:???
質問です!今困ってます!
CSSがいいと聞いて取り入れたいのですが、動いてくれません。
文字を大きくするにはどうしたらいいのでしょうか?
今はこんな感じでプログラムしてまう。

<body>
<html>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ!!
</font>
</body>

よろしくお願いしますm(_ _)m

57 :56:05/02/09 09:38:51 ID:???
すいません、追加で質問です。

<body>
<html>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ!! ここはマサシのホームページです!
</font>
</body>


このマサシの部分を、えーと、どっかのホムペでみたのですが、
虹みたく光らせたいです。
いろいろですけど、助けてください。
よろしくお願いしますm(_ _)m

58 :Name_Not_Found:05/02/09 10:02:20 ID:???
>>56
まったくCSSは取り入れられていません。
>>4,5辺りを参照してから質問して下さい。

59 :Name_Not_Found:05/02/09 10:17:59 ID:???
>>57
(・∀・)イイ!!

60 :18,25:05/02/09 10:49:03 ID:myk6aXCb
>>38
部分的と言わずに、全体をさらします。
-----ここから-----
<html><head><title>TEST</title>
<style type="text/css">
<!--
a.external {
background-image: url(/image/external.gif);
background-repeat:no-repeat;
background-position:1px 0px;
padding-left:12px;
}
/* /image/external.gifは10*10px */
-->
</style></head>
<body>
<a href="example.com" class="external">hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge</a>
</body>
</html>
-----ここまで-----
これだけでも、現象の再現は出来ます。
MacIE 5.2 で、ウインドウサイズを小さくしていって、<a></a>が複数行にわたると
行が変わる都度にexternal.gifが現れてしまいますが、2行目以降はpaddingが効かずに
画像と文字が重なってしまいます。
質問の仕方悪いですか?

61 :Name_Not_Found:05/02/09 11:17:59 ID:???
>>60
状況はわかるけど、何をしたいわけ? どう表示させたいのかがわからない。
padding-leftでうまくゆかないならtext-indent:12px;とするとか。

62 :Name_Not_Found:05/02/09 11:57:41 ID:???
>>60
そりゃあ、あんた、インライン要素なんだからそうなるでしょ。

63 :18,25,60:05/02/09 12:09:13 ID:myk6aXCb
何をしたいか...他のブラウザとMacIEでも同じような表示にしたいだけなんです。
>>18にも書いているんですが、
<img>タグを書かずに、aのclassを設定すだけでいけて、なおかつこれを回避する
にはどうすればいいでしょうか?
ということなんですが....
>>60のhtmlをMozilla 1.7.5 for Mac OS X と IE 5.2 for Mac で表示させたキャプチャ
をあっぷしてみました。
ttp://up.isp.2ch.net/up/75e40fc11b81.gif
上のMozillaのような形を想定しております。
>>62
そ、そうなんですか。と、この場合、Mac IEの解釈が正しくて、他のブラウザの
方がおかしいってことなんですか。う〜む。素直に、頭に<img>タグを書くしか
ないのですか...

64 :38:05/02/09 12:12:49 ID:???
>>60
>>61と同様で何をしたいのかが解らない
CSS以前にa.external はどのような文書構造の中で使用するのかで違ってくる。
例としてリンク等のリスト形式
画像 リンクの内容1リンクの内容1
   リンクの内容1リンクの内容1
画像 リンクの内容2リンクの内容2
   リンクの内容2リンクの内容2
なら
<html><head><title>TEST</title>
<style type="text/css">
<!--
li { list-style-image: url("/image/external.gif"); }
-->
</style></head><body>
<ul>
<li><a href="example.com">リンクの内容1リンクの内容1リンクの内容1リンクの内容1</a></li>
<li><a href="example2.com">リンクの内容2リンクの内容2リンクの内容2リンクの内容2</a></li>
</ul></body></html>
のような感じで...

65 :18,25,60:05/02/09 12:16:45 ID:myk6aXCb
何度もすんません。
>>62
そうか...インライン要素じゃなきゃいいんですね。<a>の前にブロック要素を
つけて、そのブロックの背景に設定すればいいと...
幸い、今回の場合、<a>の中身が長くなるのはサブタイトルにリンクをつけたものなので、
<h3 class="external"><a...>hoge</a></h3>
とすることで、無事解決しました。
>>62さまをはじめ皆様、ありがとうございました。

66 :Name_Not_Found:05/02/09 12:24:06 ID:myk6aXCb
>>64
ご指摘ごもっとも。全体を晒せってそういうことだったんですね。
ああ、やっぱり質問の仕方が悪かったのか。すんません。
慣れない板で慣れない質問につきあってもらって感謝感謝。
いい板だぁ〜。
結果は>>65ということになりました。

67 :Name_Not_Found:05/02/09 13:06:27 ID:???
>>21
>absolute はウィンドウの左上から位置を測るのでしょうか? それとも親ボックスの左上から測るのでしょうか?

「ほーむぺーじ入門」で "containing block" の概念を教えないから、初心者が混乱する。
おそらく解説している本人も "containing block" を理解していない・知らないのだろう。
「absolute は親ボックスに対する位置」とか平気で間違った解説するから混乱してしまう。

http://hp.vector.co.jp/authors/VA022006/css/visualren.html#containing-block
このサイトのように、仕様書に基づいている解説を読むことだ。

初心者は「ウィンドウの左上」等とよく言うけれど、よく考えればあり得ないことがわかると思う。
通常、ブラウザウィンドウの上部には、タイトルバーやメニューバー、ツールバー等があるのだから。
ウィンドウ左側には、エクスプローラバー、サイドバー、サイドパネル等が表示されることもある。

"canvas", "viewport", "initial containing block", "containing block"
の概念を理解できないと、視覚整形モデルを理解することはできない。

68 :Name_Not_Found:05/02/09 13:14:15 ID:???
>>67
オマイはいつもそうやって遅れてくるのか?

69 :Name_Not_Found:05/02/09 13:52:43 ID:uAUlgRC8
Cellspacing="1"

これをスタイルシートにしたいのですが、どう書けばいいのでしょうか?

70 :Name_Not_Found:05/02/09 13:54:35 ID:???
>>69あなたに質問する資格はないです。

71 :Name_Not_Found:05/02/09 14:00:55 ID:???
そりゃあんまりだ

72 :Name_Not_Found:05/02/09 14:12:47 ID:???
>>1すら読んでないのに質問する資格なんてなくて当然だろう

73 :Name_Not_Found:05/02/09 14:14:42 ID:???
なら>1を読んでないオマイも回答する資格がない。

74 :Name_Not_Found:05/02/09 14:16:15 ID:???
(´-`).。oO( 天狗の回答者気取りがいるなぁ・・・)


75 :69:05/02/09 14:19:08 ID:uAUlgRC8
69です。
OSはWindowsXP HomeEdition
browserはInternet Explorer 6 Service Pack 2です。
申し訳ありませんでした。

76 :Name_Not_Found:05/02/09 14:39:04 ID:kk+JrbKf
画面の大きさによってレイアウトが崩れるんだが・・・



77 :Name_Not_Found:05/02/09 14:41:27 ID:???
>>75
「環境を提示すればよい」ってことではなくて、
「ある程度は自分で調べなさい」ってことだろう。

border-spacing で調べてみる。
対応状況とかも調べればわかる。

>>76
知るか。

78 :Name_Not_Found:05/02/09 14:48:08 ID:???
中央の段が、ブラウザ幅によって可変になるような3段組の
ページを作成しようとしています。
ソースは以下のようにしています。

■ HTML ■
<div id="leftbox">適当な内容</div>
<div id="rightbox">適当な内容</div>
<div id="centerbox">
<p>適当な文章</p>
<p class="photo"><img src="xxx" width="100" height="100"></p>
<p>適当な文章</p>
<p class="date">日付</p>
</div>

※左右の段にはリスト等が含まれています。
※中央の段は文章と写真があり、写真に回り込みの指定をしたいです。
※日付では、上記の回り込みを解除したいです。

■ CSS ■
#leftbox { width:200px;
       float:left; }
#rightbox { width:200px;
        float:right; }
#centerbox { width:100%;
         margin:0 220px; }
*>#centerbox { width:auto; }
.photo { float:left; }
.date { clear:left;
     width:100%; }

79 :78:05/02/09 14:49:08 ID:???
>78続きです。

以上をFireFox1.0で確認したときに思うように表示できません。
具体的には、
centerboxの中身が、leftboxやrightboxの中身より、高さが少ない場合、
clearした「日付」の部分が、leftboxやrightboxにある中身の下辺まで
下がってしまいます。
※上記だと、centerbox内の3つ目の<p>と日付の間が大きく開きます。
※この間が開かないようにしたいです。
※IE6.0、NN6/7で確認したときは、なりませんでした。

floatとclearに関するサイトなどを読んでいて、
clearは、それ以前に出てきたいかなる要素の回り込みも解除するみたいに
書いてあったので、この表示が正しいのかもしれないんですが、
何か回避する方法はありませんでしょうか?
よろしくお願いします。

80 :Name_Not_Found:05/02/09 14:57:10 ID:kk+JrbKf
>77
なんなのこの人?

81 :Name_Not_Found:05/02/09 15:06:35 ID:???
>>80
お前みたいな奴へふさわしいレスをしてくれる人だと思う。

82 :Name_Not_Found:05/02/09 15:10:59 ID:kk+JrbKf
マジで?

83 :Name_Not_Found:05/02/09 15:12:08 ID:???
>>82

 >>76
 知るか。

ほら、極めて簡潔で適切なレスじゃん

84 :Name_Not_Found:05/02/09 15:12:49 ID:???
とりあえず、皆>>1


85 :Name_Not_Found:05/02/09 15:13:08 ID:???
俺だったら

  >>76
  あっそ

かな。

86 :Name_Not_Found:05/02/09 15:30:53 ID:???
>>78
clear: left の意味は、「要素のボーダー上辺が、ソース文書内でそれ以前に出現するあらゆる左フロートの外下辺より下であるように、要素が生成するボックスの上マージンを十分大きくする。」だから、Firefox1.0 や Opera 7.5 の実装が正しい。

>この表示が正しいのかもしれないんですが、何か回避する方法はありませんでしょうか?
多分むり。絶対配置とか他の方法で挑戦したら。

87 :75:05/02/09 16:15:16 ID:uAUlgRC8
ありがとうございました。
まだ見つけてはいませんが、ヒントを頼りに見つけてきます。
ありがとうございました。

88 :Name_Not_Found:05/02/09 16:17:55 ID:???
正しい物を回避するとはこれいかに?

89 :78:05/02/09 16:51:57 ID:???
>86
ありがとうございます。
やっぱり、FireFoxの解釈の方が正しいんですね。
他の方法を探して頑張ってみます。

>88
回避するって言い方はおかしかったですね。
すみません。
全体をもう作り上げてしまって、今ごろになって気付いたので、
どうにか少し書き換えるだけでFireFoxもIEやNNの表示に合わせられないかと
あせってしまいました。
もう一度全体から考え直してみます。

90 :Name_Not_Found:05/02/09 16:56:19 ID:???
Firefox で一語。FireFox と表記すると稚拙に見える。

91 :78:05/02/09 17:10:26 ID:???
>>90
いちいち煩い。

92 :78:05/02/09 17:17:35 ID:???
>90
あ…。Firefoxだったんですね。
今の今まで、勘違いしてました。

91は、私じゃないです。
質問以外の話題でスレ汚しゴメンナサイ。

93 :78:05/02/09 17:19:21 ID:???
誰・・・・・・

94 :78:05/02/09 17:26:08 ID:???
>>93
俺だよ俺

95 :78:05/02/09 17:27:16 ID:???
え!? 潤くん?

96 :78:05/02/09 18:00:22 ID:???
うん 潤だよ

97 :Name_Not_Found:05/02/09 18:05:41 ID:???
なんかへんな鏡があるみたいだ

98 :Name_Not_Found:05/02/09 18:31:21 ID:???
ワラタw

99 :Name_Not_Found:05/02/09 18:32:51 ID:???
>>96
ほらだめよ潤くん。病室に戻りましょうね。

100 :76:05/02/09 19:31:00 ID:kk+JrbKf
誰かマジレスお願い

101 :Name_Not_Found:05/02/09 19:52:44 ID:???
>>100
情報が少なすぎて解決方法を提示しようがない

102 :Name_Not_Found:05/02/09 20:22:27 ID:???
>>100
フロートでレイアウトしているの?
それとも、ポジションでレイアウト?
IEでは崩れるの?
NNではどうなの?
ソースも全部教えて。
足のサイズ何m?

103 :Name_Not_Found:05/02/09 21:04:13 ID:???
>>100
チンチンのサイズは何px?

104 :Name_Not_Found:05/02/09 21:37:22 ID:???
2px

105 :Name_Not_Found:05/02/09 21:50:46 ID:???
勝った 俺2.6px
お前 小さいな

106 :Name_Not_Found:05/02/09 21:52:19 ID:???
小学生並の会話になっている件について

107 :Name_Not_Found:05/02/09 21:56:44 ID:???
会話も子供には合わせてやるべきだろ。
今、>>76が来てるんだからさ。

108 :Name_Not_Found:05/02/09 21:59:24 ID:???
>>106
空気嫁

109 :Name_Not_Found:05/02/09 22:01:38 ID:???
ダッチワイフ

110 :Name_Not_Found:05/02/09 23:14:43 ID:???
行間隔をCSSで設定したくて(dream weaver)

.font12new {
font-size: 12px;
line-height: 18px;
font-family: "MS ゴシック", "Osaka−等幅";
}

で設定してるが制作画面では行間空いてるのにプレビューすると間隔があかない・・・
XP、確認ブラウザはIEとプニルです。ちなみにフォントとサイズは変わります。
埋め込み、外部両方ためしたけど変化なし。

111 :Name_Not_Found:05/02/09 23:16:32 ID:???
ソース

112 :Name_Not_Found:05/02/09 23:35:14 ID:???
<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<TITLE></TITLE>
<script type="text/javascript" language="JavaScript" src="menu/js/script.js"></script>
<style type="text/css">
<!--
<link href="css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style6 {color: #0000FF}
.leftborder {border-bottom-width: 1px;
border-left-width: 5px;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.style8 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"}
.style10 {font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #000000; }
.style4 {font-weight: bold}
.style12 {color: #000099}
-->
</style>
</HEAD>
<BODY bgcolor="#ffffff">
<!-- URL's used in the movie-->
<!-- text used in the movie-->

113 :Name_Not_Found:05/02/10 00:36:08 ID:???
>>110
>line-height: 18px;

ピクセルではなく line-height: 1.5; と実数値で相対指定した方が柔軟。
ウェブブラウザ側の設定でフォンサイズが18pxより大きくなると、
行間がなくなってしまい、隣接する行のテキスト同士が重なってしまう。

font12new, leftborder, style6 とかその場限りのクラス名はどうかと思う。
これでは、スタイル変更に伴ってHTML文書の該当個所を変更する羽目になる。
style6 などのクラス名からでは、スタイル内容を把握することもできない。

何らかの文書構造を表現するための仕組みが、スタイルシートのあるべき姿。
だからマークアップした意味や構造に基づいてスタイルシートを設計すべき。
そうでないと、HTML文書からスタイル情報を分離する意義がなくなってしまう。

質問スレに見合わない、余計なお世話かもしれないけど、一応忠告しておく。

114 :おれはわからん:05/02/10 01:55:28 ID:???
はあ?質問に答えてやれよボケ
宗教でもゲームでもWEB制作でも
信者ってほんときもちわるいね。

115 :Name_Not_Found:05/02/10 02:50:47 ID:???
Firefox1.0では、下記の形式の外部スタイルシートが無視されてしまうようです。

@media screen{・・・}
@media print{・・・}

つまり、ブラウザ表示用とプリントアウト用を一つのスタイルシートに書いた場合ですが、
Firefox1.0では両方とも無視されます。
media指定のないスタイルシートは、きちんと認識するのですが。

同じページ&スタイルシートを他のブラウザで確認してみたところ、
IE、Netscape、Opera、Safari ではきちんとスタイルシートを認識してくれます。
Firefoxのバグでしょうか?


116 :Name_Not_Found:05/02/10 04:00:37 ID:???
>>115
手元のWinXP+Firefox 1.0で以下を試したけど、問題なかったぜ。

-- test.html ----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<link rel="stylesheet" type="text/css" href="test.css">
<title>テスト</title>
<h1>テスト</h1>

-- test.css ----------------------
@media screen { h1 { color: red } }
@media print { h1 { color: blue } }

117 :115:05/02/10 05:27:32 ID:???
>>116
レスどうもありがとうございます。わざわざ確認していただき、誠に恐縮です。
自己解決したんですが、原因は私のバカバカしいミスでした。
@charsetで文字コードを指定する際、euc-jpと書くべきところを、euc_jpと誤記していたのが原因でした。
お騒がせして、本当にすみませんでした。

上記のその他のブラウザでは、間違った文字コード指定は無視するようですが、
Firefoxは、間違った文字コード指定をすると、スタイルシート全体を無視してしまうんですね。


118 :Name_Not_Found:05/02/10 08:48:23 ID:a/rUKwtp
スタイルシートで文章の外に
角丸の囲みを作ることってできますか?
四角の囲みを作る方法は分かります。
方法は、やはり角丸の絵を作ってテーブルですか?

119 :56:05/02/10 09:59:25 ID:???
あの…56な者ですが、一晩考えたんですけど‥……無理でしたぁ!
意地悪しないでどこが悪いか教えてください!

120 :56:05/02/10 10:05:49 ID:???
とりあえず下のがプログラムです。一晩でやっとここまで(汗
文字がスクロールしてくるようになりました。

<body>
<html>
<MARQUEE>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ!! ここはマサシのホームページです!
</MARQUEE>
</font>
</body>

でも、マサシの部分を虹色にしたいんです!
あと、文字も大きくなるはずなんですが、うちのパソコンが古いせいでしょうか?
すれ違いかもしれませんがホムペって通じます、よ、ね??
よろしくお願いします!!m(_ _)m

121 :Name_Not_Found:05/02/10 10:07:52 ID:???
>>120
http://pc5.2ch.net/test/read.cgi/hp/1106209097/

122 :38:05/02/10 10:15:27 ID:???
>>100
だから上の方をよく嫁
考えてどうなるモノではないと思われ
http://www.kanzaki.com/docs/html/htminfo11.html
http://www.kanzaki.com/docs/html/htminfo17.html#S31
http://www.kanzaki.com/docs/html/htminfo17-2.html#font

123 :56:05/02/10 10:26:22 ID:???
>>121
すみません。リンク辿ってみたのですが、天ぷらがどーだ海老フライがどーだとか
意味がわからなかったのですが…

実は初心者なんです。わかりやすくお願い出来ますでしょうか?

124 :Name_Not_Found:05/02/10 10:32:25 ID:MAP5w2to
>>118
今の所Mozilla系しかだめだけど。
ttp://www.d-toybox.com/spec/CSS3/border/

<html><head><title>TEST</title><style type="text/css">
<!--
div.x {
border:1px solid #000;
padding: .5em;
/* Mozillaの独自実装 */
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomleft: 1em;
-moz-border-radius-bottomright: 1em;
-moz-border-radius-topleft: 1em;
/* CSS3の草案 */
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
border-bottom-left-radius: 1em;
border-top-left-radius: 1em;
}
--></style></head><body><div class="x">本文</div></body></html>

125 :Name_Not_Found:05/02/10 10:52:29 ID:???
>123
つっこみどころ満載で、ここまで来ると呆れるな。
ネタと思われても、しょーがないくらい。
以下の全ての質問に答えてください。
これにより、解答を考えたいと思う。

1,HTMLを覚える気はあるか。
2,今まで覚えてきた知識が、全て否定される可能性があるが、覚悟はあるか。
3,Googleって知ってる? 何か判る? 使ってる?

126 :56:05/02/10 11:12:16 ID:???
>>125
す、すみません…。(汗
質問が怖いんですけど、答えます、はい。


1,HTMLを覚える気はあるか。
あります!頑張ります!
将来出来ればこの道で食べていければ……と思っています。
(初心者がスミマセン)
ただ、ふと思うのは、今大学生一年なのですが僕が卒業する頃まHTMLって残ってるんですか?
CSS一本じゃなくていろいろ覚えておいた方がいいんですか?

2,今まで覚えてきた知識が、全て否定される可能性があるが、覚悟はあるか。
す、全てですか?は、はい……。

3,Googleって知ってる? 何か判る? 使ってる?
使ってます!
独学でここまで来れたのはGoogleのおかげです。


こ、こんな感じでよろしいですか?
宜しくお願いします!m(_ _)m

127 :Name_Not_Found:05/02/10 11:44:20 ID:???
>126
OK!
>5 の一番上、【ごく簡単なHTMLの説明】を読んで、
HTMLが何かを学んでみてください。
CSSが何かを学んでみてください。

理解した上で、疑問が残るのなら、また来てみてください。

128 :Name_Not_Found:05/02/10 11:51:31 ID:???
すげーな56。いやホントあんた格好いいよ。
夢は叶うよ。
いいことに気がついてるしね。
そう君が社会人になる頃には、HTMLはCSSにとって替わられてるのさ。

129 :Name_Not_Found:05/02/10 12:20:21 ID:OCQ0oX+b
外部CSSに以下のクラスを作って、テーブルの任意の<td>にクラス指定
したんですが、IEでは反映されるんですがMozilla系で上手く反映されません。
どこか書き方悪いですか?よろしくご教示下さい

.hoge {
border-top: 1px solid #FFFFFF;
border-right: 1px solid #333333;
border-bottom: 1px solid #666666;
border-left: 1px solid #CCCCCC;
}

130 :Name_Not_Found:05/02/10 12:20:39 ID:???
厨学1年かと思っていたら大学1年だった件について

131 :Name_Not_Found:05/02/10 12:47:28 ID:???
ゆとり教育のなせる業

132 :56:05/02/10 13:41:52 ID:???
釣られすぎwwwwwwwwwwwww

133 :56:05/02/10 14:34:36 ID:???
>>132
だ、誰ですか、あなた!?
みなさん、131は別人ですよ。(汗、汗
とりあえず誘導してもらったリンク先でhtmlの未来形がcssじゃないってことがわかりました。
人の名を騙るのはやめてください!
本当誰ですか?

134 :Name_Not_Found:05/02/10 14:35:55 ID:???
それだけか?
学んだのは、それだけなのか?
やる気無いんじゃない?

135 :Name_Not_Found:05/02/10 14:43:59 ID:???
マジレスすると、56はまずHTMLの基本書に目を通すべきなのでは。

136 :Name_Not_Found:05/02/10 14:44:55 ID:???
>>133>56
もちつけ。とりあえずソープ行ってすっきりして来い。

137 :Name_Not_Found:05/02/10 14:59:33 ID:???
別にタグ全部覚えろって言ってるわけでもない。
HTMLが何なのか理解するだけなら、>>5で十分じゃないか?

138 :56:05/02/10 15:22:11 ID:???
今勉強中です。
どうやらhtmlがハイパーテキストマークシートランゲージってこともわかりました。
見栄えはCSS、意味付けがhtmlですね。だいぶ見えてきました。
ってことは、下のは

<body>
<html>
<MARQUEE>
<font="font-size:30px" font="font-color:red">
いらっしゃいませ!! ここはマサシのホームページです!
</MARQUEE>
</font>
</body>

自分で書いておきながらぐちゃぐちゃだ…。
<font style="font-size:30px;color:red">
これで思い通りの表示が出来ました!!

後は、マサシの部分を虹色にしたいのですが、具体的に
color:????
上の部分に何を指定したらいいのでしょうか?
color:rainbowなども一応試してみたのですが……。


139 :Name_Not_Found:05/02/10 15:33:31 ID:???
>>138
>color:rainbowなども一応試してみたのですが……

笑えるなあ56。
いけそうかもって思った気持ちはわかる、すごく伝わってくるよ

140 :Name_Not_Found:05/02/10 15:36:14 ID:???
>ハイパーテキストマークシートランゲージ

釣り師確定

141 :56:05/02/10 15:43:55 ID:???
今頃 気づいたのか(藁

142 :Name_Not_Found:05/02/10 15:44:07 ID:???
>>138
虹色にするのはcssの領域じゃありませんよ。
PHPってのを勉強してごらん。
書店で3000円ぐらいの本がいっぱい置いてあるから。

143 :56:05/02/10 15:48:47 ID:???
>>142
ありがとうございます!PHPですね!
ちょっと高いけど、今からちょうど新宿行くので紀伊国屋にでも行って買ってきます!
また夜来ます!m(_ _)m

144 :56:05/02/10 15:49:37 ID:???
あ、あと141は俺じゃありません!それでは!

145 :Name_Not_Found:05/02/10 15:53:43 ID:???
>>144
1人で2役やって楽しいか?

146 :142:05/02/10 15:54:47 ID:???
やべ。ちょっと罪悪感。本当に買っちゃったらどうしよう。

147 :56:05/02/10 15:54:57 ID:???
>>136
石鹸工場に言ったらスッキキリ出来るんですね!!!!!1111!!!
早速、見学を申し込みました、。

148 :56:05/02/10 16:03:29 ID:???
>>142
え? PHPではできないのですか?
後、147は俺じゃありません!

149 :Name_Not_Found:05/02/10 16:11:07 ID:???
もう訳わかんね。

150 :Name_Not_Found:05/02/10 16:27:08 ID:???
PCサロンあたりに56クン専用スレでも立てよっか? たのし杉でマジヤバイ

151 :Name_Not_Found:05/02/10 16:43:26 ID:???
>>150
しかしどれが本当の56やら。
俺の予想では買いにいったっていう143=56だと思うが。

152 :56:05/02/10 17:09:31 ID:???
お騒がせしてすみません。
偽者さんも迷惑です!
後 自分は151さんの言うとおりです!

153 :Name_Not_Found:05/02/10 17:32:34 ID:???
本物56よ sage 入れるな。

154 :56:05/02/10 17:36:52 ID:???
このスレは上げていいのでしょうか?

155 :Name_Not_Found:05/02/10 17:41:28 ID:???
IDで偽物の判別が出来る。

156 :Name_Not_Found:05/02/10 17:48:33 ID:???
>>156
おまいアホだろ。

157 :Name_Not_Found:05/02/10 17:49:52 ID:???
ワロタ

158 :Name_Not_Found:05/02/10 17:53:16 ID:???
以後、レス番下二桁が56のひとは、なにかボケること。

159 :Name_Not_Found:05/02/10 17:59:29 ID:???
>156は天才?

160 :Name_Not_Found:05/02/10 18:03:41 ID:???
>>158
1人でやってろ。

161 :Name_Not_Found:05/02/10 18:19:53 ID:???
cssで文字サイズを変える場合はどうすればいいのでしょうか?
font=17px とやってもダメでした。

162 :Name_Not_Found:05/02/10 18:20:54 ID:???
まずはcssを1から勉強しろ。
そして>>1嫁。
font-size: 17px;
でおk

163 :Name_Not_Found:05/02/10 19:30:40 ID:???
#wrapper{
width:700px;
background:transparent url(img/bg.jpg);
}
#left_cont{
width:500px;
float:left;
}
#right_cont{
width:200px;
float:right;
}

<div id="wrapper">
<div id="left_cont">text1</div>
<div id="right_cont">text2</div>
</div>

この状態をMozzilaで見ると、wrapperの背景画像が反映されないのですが、解決法は無いでしょうか?

164 :Name_Not_Found:05/02/10 19:42:46 ID:???
自己レススイマセン。
解決しました。

<div id="wrapper">
<div id="left_cont">text1</div>
<div id="right_cont">text2</div>
 
</div>

少しソースが汚いけど、これで出来ました。


165 :Name_Not_Found:05/02/10 21:57:46 ID:ua5QsPTa
A:link.sat { color:#0000CD; }
A:hover.sat { color:#FFFFFF; background-color:#0000CD; }
A:active.sat { color:#0000CD; }
A:visited.sat{ color:#0000CD; }
な感じでcssファイルで定義し、
<A href="../index.html" class="sat">あああ</A>とやっているのですが
カーソルを合わせると背景・文字色ともに#0000CDになってしまいます。
ナニが間違っているのでしょうか?
アドバイスよろしくお願いします。

166 :Name_Not_Found:05/02/10 22:19:22 ID:???
>>163
Mozzilaってのは初耳だが...


167 :Name_Not_Found:05/02/10 22:19:50 ID:???
>>165
A.sat:link とかに直せ

168 :Name_Not_Found:05/02/10 22:31:23 ID:???
>>165
A:link.sat { color:#0000CD; }
A:visited.sat{ color:#0000CD; }
A:hover.sat { color:#FFFFFF; background-color:#0000CD; }
A:active.sat { color:#0000CD; }

169 :Name_Not_Found:05/02/10 22:35:40 ID:???
>>167
どっちでも同じ。仕様書読んでから言え。

170 :165:05/02/10 23:03:42 ID:???
>>168
ありがとうございます!
出来ました。
順番も重要なんですね…

171 :Name_Not_Found:05/02/10 23:06:26 ID:???
m×nのテーブルがあり、それぞれのセルにある絵のm×n分割した部分を表示させたいのだが、どうすれば良い。

例えば下の4×4のテーブルを作り1のところに13に相当する部分の絵を置いたりしたい。
15パズルゲームをジャヴァスクリプトで作ったが、元の絵を16分割しなくても済むようにしたい。
指定する絵(あるいはそのアドレス)を変えさえすればどの絵でも15パズルゲームが出来るように
したい。

┌──┬──┬──┬──┐
│ 1 │ 2 │ 3 │ 4 │
├──┼──┼──┼──┤
│ 5 │ 6 │ 7 │ 8 │
├──┼──┼──┼──┤
│ 9 │10 │11 │12 │
├──┼──┼──┼──┤
│13 │14 │15 │16 │
└──┴──┴──┴──┘

172 :Name_Not_Found:05/02/10 23:26:44 ID:???
はい。スレ違い。

173 :Name_Not_Found:05/02/11 00:06:37 ID:???
>>172
すれ違いじゃないよ。スタイルのところが判らないのだから。絵を部分的に表示する方法
が判らないのだよ。

174 :Name_Not_Found:05/02/11 00:13:36 ID:???
>スタイルのところが判らないのだから

なにが解らないか具体的に書け。

175 :Name_Not_Found:05/02/11 00:16:46 ID:???
>>173
どこがCSSなのかさっぱり解らん。

176 :173:05/02/11 00:23:15 ID:j3EIHoOK
>>175
だから絵を部分的に表示したいのだよ。例えば3×3のテーブルを作る。真ん中のセルに9分割
した絵の真ん中の分だけ、あるいは右上の部分だけを表示させたいのだよ。

違う喩えをすれば、掌の絵がある。親指だけを表示させたい場合どうすればよいかと言う質問。
絵を5分割すれば一番右端の部分に親指が写っていて、そこだけを表示させたいのだが、
どうすれば良いのかという質問。

177 :Name_Not_Found:05/02/11 00:31:28 ID:???
>>176
4×4のテーブル作って、絵も16分割しといて
各セルの背景に該当するパーツを設定しとけばいいだろ。

てか、IDがj3っておまえ古式だろ? ヲチ板に(・∀・)カエレ!!

178 :Name_Not_Found:05/02/11 00:33:09 ID:???
JavaScriptスレでも、自分では一切考えず丸投げ。
面倒臭いことを効率よくするための努力さえ面倒臭がって。
そんなの誰も答えてくれるわけないじゃん。

179 :Name_Not_Found:05/02/11 01:24:38 ID:???
絵を一部だけを切り取れば良いだろ。
それがめんどうならシラネ

180 :Name_Not_Found:05/02/11 01:30:31 ID:???
JavaScriptでIMG要素を複製してclipプロパティを操作、でいーじゃん?

181 :Name_Not_Found:05/02/11 01:30:54 ID:???
>>173
背景画像でマイナ座標とかを駆使すればいけるよ。
外部のバカはほうっておきなさい。

182 :Name_Not_Found:05/02/11 02:23:36 ID:j3EIHoOK
>>177
一つの絵を16分割にして16個の絵を使ってやる15パズルゲームはすでに完成させた。
それより汎用性を持たせるために一つの絵を分割表示する方法が知りたいのだよ。

>>178
丸投げじゃないよ。絵を部分的に表示する方法を知らないだけだ。

>>181
もっとヒントをくれ。

183 :Name_Not_Found:05/02/11 02:49:25 ID:???
うーん
例えば、80*80のセル(class: e)に
1 2 3
4 5 6
7 8 9
って並んでいる1枚の画像の5番を表示するとしたら

td {
 background-image: url("");
}
td.e {
 background-position: -80px -80px;
}

って感じ?

184 :Name_Not_Found:05/02/11 03:02:41 ID:???
CSSってあくまで見た目ですよね。
15パズルなんだから、15個に分割していないと意味が無いよね。
即ち、CSSで再現すると、「そう見えるだけ」であって、実際はそうではない。
無意味じゃないですか?

185 :Name_Not_Found:05/02/11 03:03:14 ID:???
あああー、16個に分割ですたね。

186 :Name_Not_Found:05/02/11 03:54:47 ID:???
そう見せたいんじゃないの?

187 :Name_Not_Found:05/02/11 04:09:26 ID:Kd8O8ny/

それにしても、
CSSオンリーで作ったサイトって安っぽいよね。


188 :Name_Not_Found:05/02/11 07:54:35 ID:???
cssオンリーで作れたら、それはそれですごいと思ふ。

189 :Name_Not_Found:05/02/11 07:59:58 ID:???
>>182 JSスレで大暴れ。

190 :Name_Not_Found:05/02/11 08:24:48 ID:???
>>189
ネカマ幼女に釣られる古式ヴァカ葉だからしょうがないよ。

191 :Name_Not_Found:05/02/11 08:33:43 ID:???
すいません、質問です。

IE6では、paddingやborderがwidthに含まれないと
聞いていますが(バグ修正済みと聞いていますが)、
これは本当でしょうか。
自分はIE6を使っていますが、何度やってもpaddingがwidthに
含まれていました。
たとえば、
width:100px;
padding:20px;
の場合、横幅がやはり100pxのままなんですが。。


192 :Name_Not_Found:05/02/11 08:44:00 ID:???
>>191
>>5にのってるサイトのいくつかにも書いてあることなんだが……
DOCTYPEスイッチで調べてみ。

193 :191:05/02/11 10:24:15 ID:???
>>192

「DOCTYPEスイッチ」でググッて解決できました。
ほんとありがとうございます。
自分、まだまだ知らないことばかりだと痛感しました。
191のことは何時間も悩んでいたんで、まじ感謝です。

194 :Name_Not_Found:05/02/11 10:31:47 ID:???
>>188
そうだね。

195 :Name_Not_Found:05/02/11 16:16:26 ID:???
>>187
そんな事無いと思うが…。
むしろテーブルよりは高度な表現が可能だと思う。

css Zen Gardenなんかは相当上手いと思うが…。
http://www.csszengarden.com/?cssfile=/099/099.css&page=6
http://www.csszengarden.com/?cssfile=/103/103.css&page=5
http://www.csszengarden.com/?cssfile=/041/041.css&page=13
特にこの辺が自分にはツボ。

196 :Name_Not_Found:05/02/11 16:50:33 ID:???
>>195
テーブル使うってことは、そういう
CSSのみのデザインに加えてテーブルレイアウトもOKってことだと思うので
「より高度」とかいう表現は適切でないかと…。
表現の可能性が広がると言う感じでは?

それにしてもそこきれいだね

197 :195:05/02/11 17:22:45 ID:???
>>196
確かに「より高度」と言う表現は適切では無いですね。

Zen Gardenはレイアウトも綺麗だし、しかもソースが同じなのが凄い。
他にもselect a designと言うところに、違うデザインがあるので、クリックしてみると面白いですよ。

198 :Name_Not_Found:05/02/11 17:33:18 ID:JQfdekfN
別ページをブロック内に埋めこみたいんですが、どのようにすれば良いでしょうか
HTMLでは
<IFRAME SRC="〜">
とやっていた部分の代替です。

199 :Name_Not_Found:05/02/11 17:37:17 ID:???
>>198
CSSではできません。
インラインフレームか、
SSIとかPHPみたいなのを使ってください。

200 :Name_Not_Found:05/02/11 17:45:27 ID:JQfdekfN
ありがとうございます。
出来ませんか。。。
CSSでやろうと思ったのは

<Iframe>のあるボックスは
z-indexにて他ボックスの下に重なるよう指定しているのですが
フレーム内の部分だけ他ボックスの上に重なってしまいます。
これの回避方法がわからず、CSSで出来ないかなと思ったのですが

.tab{width:100%;height:30px; top:0px ; overflow:auto ; z-index:2}

.content{width:100%;height:90%; position:absolute; ; right:0px ; bottom:0px; overflow:auto; z-index:1}

この様に擬似フレームを作っております。 .contentが下にくるボックスでこの中にフレームを置いているのですが
先に書いたようにフレーム部分だけ上に重なって表示されてしまいます。
回避方法は何か無いでしょうか?質問続きですみません。




201 :Name_Not_Found:05/02/11 17:50:19 ID:JQfdekfN
うあ、、、勘違いしてました。フレームのみじゃなく .contetのボックス自体が上に重なってしまうようです。。
他に配置してるボックスはz-indexの指定通りに重なってくれているのですが。。

202 :Name_Not_Found:05/02/11 21:37:26 ID:???
なにがやりたいのか全く解らん。

203 :Name_Not_Found:05/02/11 21:40:41 ID:???
>>202
オナニーじゃないの?

204 :Name_Not_Found:05/02/11 22:06:11 ID:???
positionがきまってくれないんですが
全然、親要素に対して動いてくんねぇえええ

205 :Name_Not_Found:05/02/11 22:22:08 ID:???
広告の裏へでもお書きになって・・・ ね?

206 :Name_Not_Found:05/02/11 22:41:43 ID:???
広告の裏はこちらと聞いてやってきました!

207 :Name_Not_Found:05/02/12 00:02:56 ID:???
ほんとcssは使えねーな

208 :Name_Not_Found:05/02/12 00:45:47 ID:???
ITmedia ニュース(http://www.itmedia.co.jp/news/)のメニュー(左のヤツ)って、どうやって作るんだ?
ソース覗いたら、<ul>と<li>だけで構成されてたし。
スタイルシート覗こうとしたら、制限されてるし。

209 :Name_Not_Found:05/02/12 00:49:55 ID:???
ul, li {
margin:0;
padding:0;
width:;
}
ul a {
display: block;
width:;
height:;
}

210 :Name_Not_Found:05/02/12 01:29:38 ID:???
> <ul>と<li>だけで構成されてたし

それだけ解れば出来たも同然だろうに・・・

211 :Name_Not_Found:05/02/12 09:07:07 ID:???
>>209-210
サンクス。やってみる。

212 :Name_Not_Found:05/02/12 13:57:30 ID:AdLBAQAD
こんな感じの、タブ風メニューバーを作りたいのですが、
これをリストの要素で出来ないでしょうか?


┌─┬─┬─┬─┐   ←ここにメニュー
│  └─┴─┴─┴─┐
│文章文章文章文章文│←ここにサブメニュー
└─────────┘

┌─┬─┬─┬─┐
├─┘  └─┴─┴─┐
│文章文章文章文章文│
└─────────┘

宜しくお願いします。

213 :Name_Not_Found:05/02/12 14:39:17 ID:???
できる

214 :212:05/02/12 15:15:23 ID:AdLBAQAD
やってみたのですが、線が、上手く下のリストと合わなくて困っています。

215 :Name_Not_Found:05/02/12 15:19:54 ID:???
やり方は何通りもあるわけよ。
わかる?あんたがどんなやり方でやっているかわからない。
そしたら、こっちも口を出せない。
お前はソース出せ

216 :Name_Not_Found:05/02/12 15:38:41 ID:???
マルチ
http://pc5.2ch.net/test/read.cgi/hp/1078642389/245

217 :212:05/02/12 15:50:33 ID:AdLBAQAD
マルチはよくないみたいなので、そちらのスレッドで話します。

218 :Name_Not_Found:05/02/12 17:07:39 ID:???
読売新聞のサイト
http://www.yomiuri.co.jp/
右上部にある、文字サイズを+と−で変更させる方法ってどのように記述すれば良いのでしょうか?
ソース見ても文字化けしててよく分からないです。


219 :Name_Not_Found:05/02/12 18:10:22 ID:???
li {
dispay: inline
}
で横方向のメニューバーを表示させてるんですが、
これだけではブラウザのウィンドウサイズが足りないと
途中で改行されてしまいます。
改行しないようにする為にはどうすればいいんでしょうか。

220 :Name_Not_Found:05/02/12 18:30:14 ID:???
>>218
「JavaScriptの質問用スレッド」で質問しる
まあJavaScript使わなくてもいけるがな

221 :Name_Not_Found:05/02/12 20:17:10 ID:???
>>219
実際にみないとわからんな

222 :Name_Not_Found:05/02/12 22:54:41 ID:???
>>218
はい、ソースです。

<SCRIPT LANGAGE="javascript"><!--
document.write("<font class='SS'>写真の拡大</font>");
//  ★photoWinOpen('拡大写真のHTMLファイル名',写真のWIDTH,写真のHEIGHT);
document.write("<A HREF='javascript:void(0);' ONCLICK=photoWinOpen('http://www.yomiuri.co.jp/zoom/1-A-20050212203437766M-L.htm',500,361,37)><B style='background-color:#dddddd'><font class='Md'>+</font></B></A>");
//--></SCRIPT>

223 :Name_Not_Found:05/02/12 23:25:03 ID:???
>>222
ブラウザでそれぐらい調整できるだろ?
アフォか?

224 :Name_Not_Found:05/02/12 23:26:53 ID:???
>>223


225 :Name_Not_Found:05/02/13 00:43:24 ID:???
>>223 あわてんぼさん。

226 :Name_Not_Found:05/02/13 10:52:33 ID:ZmRGlb1T
>>222
それは写真の拡大
文字の拡大は
<SCRIPT langage="javascript"> printResizeButton(); </SCRIPT>
<FONT class=SS>文字サイズ</FONT><IMG height=1 src="/g/d.gif" width=2><A
onclick=fontSizeChange(+1) href="javascript:void(0);"><B
style="BACKGROUND-COLOR: #dddddd"><FONT class=Md>+</FONT></B></A><IMG height=1
src="/g/d.gif" width=2><A onclick=fontSizeChange(-1)
href="javascript:void(0);"><B style="BACKGROUND-COLOR: #dddddd"><FONT
class=Md>−</FONT></B></A>

227 :Name_Not_Found:05/02/13 13:14:16 ID:???
CSSでレイアウトをしているんですが半角文字が続くと正しく改行されずレイアウトが
崩れてしまいます・・・、何か改善方法はないでしょうか?
お願いします

228 :Name_Not_Found:05/02/13 14:57:49 ID:???
無い

229 :Name_Not_Found:05/02/13 15:50:18 ID:???
>>218,222,226
擦れ違い

230 :Name_Not_Found:05/02/13 16:09:03 ID:FpQGCFwL
先頭の文字だけ色を変えているサイトを前に見たことがあるのですが
CSSでどう記述すれば可能でしょうか

231 :Name_Not_Found:05/02/13 16:12:39 ID:???
span で class でOK

232 :Name_Not_Found:05/02/13 16:20:07 ID:???
__:first-letter {
color: ;
}

233 :230:05/02/13 18:22:19 ID:???
>>232
ありがとうございました、strictでは使えないみたいですね・・・。
教えて頂いたのに申し訳ないです

234 :Name_Not_Found:05/02/13 18:46:09 ID:???
??

235 :Name_Not_Found:05/02/13 18:50:13 ID:???
BACKGROUND-IMAGE でテーブルの背景に画像を張りつけ、
その背景だけを半透明にしたいのですが。どんな方法がありますか?
filter: alpha(opacity=30);
とするとテーブル内の文字まで薄くなっちゃいます。orz
解決方法はあります?



236 :Name_Not_Found:05/02/13 19:03:06 ID:???
画像を加工する。

237 :235:05/02/13 19:05:00 ID:???
いや、それ以外でお願いします。。。

238 :Name_Not_Found:05/02/13 19:07:28 ID:???
>テーブルの背景だけを半透明

画像を加工する。それしかないのだよん。

239 :235:05/02/13 20:24:02 ID:???
そうですか、、、ありがとうございました。

240 :Name_Not_Found:05/02/13 21:57:39 ID:???
>>227
IEに word-wrap: break-word があるよ。CSS2には無いがね。

241 :Name_Not_Found:05/02/14 18:31:32 ID:???
IE6とNN7で表示確認してます。
font-sizeを相対指定してるんですが、大きさが違う…。
>font-size:small とか large とかです
(NNの方が一段階大きくなる)

絶対指定する以外に大きさを統一できる方法ありますか?

242 :Name_Not_Found:05/02/14 18:34:56 ID:???
いや、逆でしたね。
「IEの方が一段階大きくなる」でした。

243 :Name_Not_Found:05/02/14 19:24:39 ID:???
>>241
無意味

244 :Name_Not_Found:05/02/14 19:57:31 ID:???
既出かも知れないが、CSSと日本語ってデザインの相性が悪くない?
英語だとかっこいいデザインでも、日本語にするとあら不思議。ダサダサ。
CSSで作ったサイトにひじょーに多いと思うんだけど。

245 :Name_Not_Found:05/02/14 20:04:22 ID:???
>>244
すげえ分かる

246 :Name_Not_Found:05/02/14 20:14:59 ID:???
>>244
扇子の問題

247 :Name_Not_Found:05/02/14 21:09:18 ID:???
>>241
ついでに言うと絶対指定にしても統一することは不可能。

248 :Name_Not_Found:05/02/14 21:09:23 ID:???
>>244
わけわからん、使い方が下手なだけ

249 :Name_Not_Found:05/02/14 21:35:54 ID:???
>244
まぁ別にtableレイアウトでも一緒な訳だが

250 :Name_Not_Found:05/02/14 21:45:20 ID:???
フォントがダサいとか

251 :Name_Not_Found:05/02/14 22:02:20 ID:???
要するに日本語をデザインとして美しいと思えるか思えないか、
或いはフォントそのものが美しいか美しくないか、の違いかと。

252 :Name_Not_Found:05/02/14 22:09:34 ID:YEitDlGk
word-break: break-allとword-wrap: break-wordって
どう見ても全く同じにしか見えないんですが、
どう違うんですか?

253 :Name_Not_Found:05/02/14 22:31:16 ID:???
h1{
color:#000000;
font-size:200%;
background-color:#8eafff;
background-image:url("bg.jpg");
background-repeat:no-repeat;
width:100%;
height:143px;
border-bottom:1pt solid #000000;
}

こういう風に指定しています、文字位置を下にしたいのですがどのようにすればよろしいでしょうか?
vertical-align:bottom;というのはできませんでした。
文字サイズを固定してpaddingを指定すれば出来ないことはないのですが…。

254 :Name_Not_Found:05/02/14 22:43:39 ID:oCQC56iv
右側にメニューのあるページをfloatを使用してレイアウトしようと
思っているんですが、どうやってもうまくいきません。
右側のメニューを160pxのサイズ固定にし、残りの部分を全て
メインメニューとして使用したいのですが、
下の例で、「このサイトについて」という文字が、
残った画面のど真ん中に表示されるようにするには
どうすればいいのでしょうか??
(わかりやすくするため背景に色をつけています。)

<body>
<div style="float:left;background-color:#eeeeee;">
<center>
1.このサイトについて
</center>
</div>
<div style="float:right;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>


255 :Name_Not_Found:05/02/14 22:55:45 ID:???
>>254
ieでしかちぇっくしてないけど。
<body style="margin:0px;padding:0px;">
<div style="margin-right:160px;background-color:#eeeeee;text-align:center;">
1.このサイトについて
</div>
<div style="position:absolute;top:0px;right:0px;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>

256 :Name_Not_Found:05/02/14 23:05:40 ID:???
>>254
メニューとコンテンツの順番変えたら?

<div style="float:right;background-color:#ffcccc;width:160px;">
メニュー
</div>
<div style="margin-right:160px;background-color:#eeeeee;">
<center>
1.このサイトについて
</center>
</div>


257 :255:05/02/14 23:07:07 ID:???
>>256
そっちの方が正しいね。多分。

258 :Name_Not_Found:05/02/14 23:17:25 ID:???
>257
何で正しいの?

>254は
メニューを後ろに持って行きたいのに
HTMLの構造を変えられちゃ困るんでないか?

259 :255:05/02/14 23:21:13 ID:???
>>258
論理構造上は、メニューの方が本部より上位の概念だから。

260 :254:05/02/15 01:58:46 ID:VoSm6fF5
ありがとうございます!
メニューとコンテンツの位置を入れ替える方法も考えたんですが、
それはお手上げだったときの最終的な代替案として考えてました。
できれば右メニューのレイアウトのまま相談にのっていただきたいんです。
わがまま言ってすみません!

>255さんの教えてくれたものに少し手を加えました。

<body style="margin:0px;padding:0px;">
<div style="margin-right:160px;background-color:#eeeeee;text-align:left;">
1.このサイトについて
<center>
<div style="width:600px;background-color:limegreen;">
表です
</div>
</center>
</div>
<div style="position:absolute;top:0px;right:0px;background-color:#ffcccc;width:160px;">
メニュー
</div>
</body>

↑のように左側にあるメインコンテンツにwidth:600pxの表を置きたいんですが、
画面のサイズを小さくしたときに、(600px以内)
右側のメニューが表に食い込まない形にするにはどうすればいいでしょうか?
画面を600以内にしたときに右メニューは見えなくなる感じにしたいのですが、
うまくいきません・・・。(イミわかるでしょうか・・?)



261 :Name_Not_Found:05/02/15 01:59:17 ID:???
>>241
IE6 はDTD で標準モードにしたらいい

262 :Name_Not_Found:05/02/15 02:54:11 ID:OnArH2ND
cssでレイアウトすると、印刷時に崩れませんか?
1ページくらい空白になったりします。
印刷用のcssで対応すればすむ問題なんですけど、
できれば、組んだとおりにピシッと印刷に出るとうれしいです。
ブラウザで見た時と印刷時とで同じレイアウトにできるよう
狙うコツを教えてください。



263 :Name_Not_Found:05/02/15 09:53:32 ID:???
PDFにしろや。

264 :Name_Not_Found:05/02/15 10:02:39 ID:???
>>262
>ブラウザで見た時と印刷時とで同じレイアウトにできるよう狙うコツを教えてください。

それを遣らかそうとすると、印刷時にあわせて画面上で
絶対単位を使ってレイアウトするとか、ナンセンスなことになる。

出力媒体やデバイスの特性にあわせてレイアウトするのが基本。
画面情報をそのまま印刷しても読み易くはならない、と考えべき。
そもそも画面情報のレイアウトが読み難ければ、話にならないし。

265 :Name_Not_Found:05/02/15 10:20:27 ID:???
質問です。

1あいうえお   4たちつてと
2かきくけこ    6なにぬねの
3さしすせそ   7はひふへほ

<ol>でこういうことしたいんですけど、
cssで<ol start="">の代わりになるのは無いので、
どうしたらいいんでしょうか?
<ol>でやろうとしているのが間違いなんでしょうか?

266 :Name_Not_Found:05/02/15 10:23:36 ID:???
間違い

olがなんのリストだか勉強しろ

267 :265:05/02/15 10:43:25 ID:???
>>266さん
レスありがとうございます。

選手名鑑みたいなのを作りたいんですけど、
そういう場合は<table>を使うのが正しいんでしょうか?

268 :267:05/02/15 10:47:57 ID:???
スレチガイデシタすいませんでした。

269 :Name_Not_Found:05/02/15 14:57:49 ID:jCmCmIOq
<body>
<div id="layout">
<!--タイトルロゴと住所-->
<h1>〜〜〜〜〜</h1>
<h2>〒〜〜〜  tel/fax 〜〜〜〜</h2>
<!--メニュー-->
<div id="menu">
<h3>メニュー</h3>
<ul><li><li><li></ul>
</div>
<!--コンテンツ用ボックスー-->
<div id="1">
</div>
<!--コンテンツ用ボックス-->
<div id="2">
</div>
<!--コンテンツ用ボックス-->
<div id="3">
</div>
<!--コンテンツ用ボックス-->
<div id="4">
</div>
</div>
</body>


270 :269:05/02/15 14:58:36 ID:jCmCmIOq
ソースは上記の通りです。

レイアウト用の<div>は幅を696pxにして背景に画像を指定、
4辺共に1pxでボーダーを指定しています。
画面上部にタイトルと住所、画面左にメニューバー、
そして正方形のボックスを順次フロートさせて、レイアウトしています。
それぞれのボックスの上と左に10pxのマージンを指定してボックス同士が
くっつかないようにしています。

質問ですが、ネスケだと時々、レイアウト用の<div>が下まで広がらないのです。
<h2>のあたりで切れてしまいます。
コンテンツ用のボックス4の後に改行を入れたり、空白の段落を一つ入れたりすると
きちんと表示される事もあります。
いらない改行を入れたりせずに表示させたいのですが、どうすればよいでしょうか?
よろしくお願い致します。

271 :Name_Not_Found:05/02/15 15:23:55 ID:8PDKrG39
>>254が<center>を使っている件について

272 :Name_Not_Found:05/02/15 15:56:47 ID:roMGrMuY
縦18px、横196pxの背景画像(実際はhover用も含め36×196の画像)を用意して、<ul>でhover時に背景が変わるメニューを作成したいのですが、
WindowsIE(5,6)で各<li>間にどうしても隙間ができてしまいます。MacIEやFireFox等ではピッチリ隙間なく表示されているのですが…
<ul>の直前のタイトル画像との間にも隙間ができます。どうやったらバグ回避できるでしょうか。
余分なものも含まれてると思いますが、以下現在のソースです。どなたかご助言、お願いします<(_ _)>

<img src="menutitle.gif" width="85" height="24" alt="menu"/>
<ul class="sidemenu">
<li><a href="URL">コンテンツA</a></li>
<li><a href="URL">コンテンツB</a></li>
<li><a href="URL">コンテンツC</a></li>
</ul>

ul.sidemenu {list-style-type: none; margin-left: 0; padding-left: 0;}
ul.sidemenu li a { display: block;}
.sidemenu li { width: 196px; height: 18px; font-size: 10px; line-height: 18px; border: none;}
.sidemenu li a { padding-left: 12px; color: #ffffff; text-decoration: none; background: transparent url("sidemenubg.gif") no-repeat 0 0;}
.sidemenu li a:visited{ color: #ffffff; text-decoration: none;}
.sidemenu li a:hover{ color: #000000; text-decoration: none; background: transparent url("sidemenubg.gif") no-repeat 0 -18px;}

273 :Name_Not_Found:05/02/15 16:02:16 ID:???
>>272
ul や li の width を明示すると MSIE が変なスキマをこさえるようになった気がする。
で、ul の親が li だと、そのスキマが無くなることに気づいてDOM操作で無理矢理
追加した覚えがある。

274 :Name_Not_Found:05/02/15 16:19:13 ID:???
>>253
不細工な方法だと思うが、これぐらいしか思いつかん。

h1{
position:relative;
color:#000000;
font-size:200%;
background-color:#8eafff;
background-image:url("bg.jpg");
background-repeat:no-repeat;
width:100%;
height:143px;
border-bottom:1pt solid #000000;
margin-top:0;
}
h1 span {
position:absolute;
bottom:0;
}

<h1><span>文字列</span></h1>


275 :Name_Not_Found:05/02/15 17:32:24 ID:8A20HnvN
画像リンクをする際、画像にborderを指定していると
リンク後に紫色に染まってしまって見苦しいのですが、
これを解決するにはどうすればよろしいでしょうか。
どなたかご存知の方ご教授お願いします

276 :Name_Not_Found:05/02/15 17:35:36 ID:???
少しはググれや ブォケ

277 :Name_Not_Found:05/02/15 17:58:39 ID:8A20HnvN
ググって探したのですが、見つかりませんでした。
探し方が悪いのかもしれませんが、本当に見当たらなかったんです。
URLだけでもいいので、教えて頂けないでしょうか

278 :Name_Not_Found:05/02/15 18:06:43 ID:???
>>277
http://www.google.co.jp/search?hl=ja&c2coff=1&q=%3Cimg+src%3D%22%7E.gif%22+border%3D%220%22%3E&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=

279 :Name_Not_Found:05/02/15 18:17:44 ID:8A20HnvN
ありがとうございます。
質問が悪かったかもしれませんが、border=0指定ではなく、
borderを表示させて、なおかつ枠をリンク色に左右されずに特定の色に固定させる
という方法なのですが、教えて頂けないでしょうか。

280 :Name_Not_Found:05/02/15 18:57:06 ID:???
>>279
あたま堅いなあ。
要はそのボーダの色はa要素のcolorなんだよ。

281 :Name_Not_Found:05/02/15 19:14:32 ID:???
DIV要素で囲んだ領域の中で、
一番上にリスト要素(ulでもdlでもolでも一緒)を置くと、
余計なマージンが入ってしまいました。
現象を確認したのはFireFox1.0 Netscape7,Opera7.54u1です。
IE6では表示は崩れません(独自解釈?)
以下ソース、DOCTYPEはHTML4.01 Strictです。

<!--ヘッダ-->
<div style="width:600px;height:100px;background-color:#ff0000"></div>

<!--ボディ-->
<div style="width:600px;padding:10px;background-color:#00ff00>
<ul>
 <li>テスト1</li>
 <li>テスト2</li>
</ul>
</div>

<!--フッダ-->
<div style="width:600px;height:100px;background-color:#0000ff"></div>

こうすると、背景赤のヘッダ部と背景グリーンのボディ部の間に改行のような形で
隙間ができます。リスト要素以外では表示に異常はありませんでした。
position:absoluteでdivの位置を絶対指定すると解消されるものの、
relativeでは現象変わらずでした。

問題の原因がわかるかた、いらっしゃったら教えていただけないでしょうか。

282 :272:05/02/15 19:55:13 ID:roMGrMuY
>>273
ありがとうございます<(_ _)>
width指定を<li>から<a>に移動すると、WindowsIEでは隙間が解消されました。
(ただ、そうすると今度はMacIEではul.sidemenuを入れたボックスとメインボックスの間に隙間ができてしまいましたが)
DOM操作は今のスキルではよく分からないので、このままでいきたいと思います。
ずっとできないでいたので嬉しいです。本当にありがとうございました。

283 :Name_Not_Found:05/02/15 20:09:54 ID:???
ttp://www.in3c.org/blogs/index.php
ttp://www.in3c.org/blogs/css/main.css
このページのように左側のメニューの背景を透かす方法が分かりません。
ググってみたところ、背景に透過PNGを使う方法と、CSSでalphaフィルタを使う方法
があることは分かったのですが、このページのソースを見ても、メニュー部の背景画像はgifで、
alphaフィルタを使った様子も無いようなのです。

よかったら教えていただきたいです。
よろしくお願いします。

284 :揚げ職人:05/02/15 20:36:39 ID:XtqosxXr
良質問age

285 :Name_Not_Found:05/02/15 20:40:09 ID:8A20HnvN
>>280
何度もすみません。おかげ様で分かりました。
ご指摘の通りもう少し柔軟な考えでやっていこうと思います。
ありがとうございました

286 :Name_Not_Found:05/02/15 20:47:23 ID:???
>>283
http://www.in3c.org/blogs//images/menu_bg_top.gif

287 :281:05/02/15 20:48:48 ID:???
失礼。ソース修正します。

<!--ヘッダ-->
<div style="width:600px;height:100px;background-color:#ff0000"></div>

<!--ボディ-->
<div style="width:600px;padding:0px 10px;background-color:#00ff00>
<ul>
 <li>テスト1</li>
 <li>テスト2</li>
</ul>
</div>

<!--フッダ-->
<div style="width:600px;height:100px;background-color:#0000ff"></div>

リストが先頭に来るdivの、topとbottomのpaddingが0指定だと現象が再現します。

288 :Name_Not_Found:05/02/15 20:56:19 ID:???
>>287
それ、ulのマージン。
この挙動が間違っているのか正しいのかはエロイ人に細くして頂きたいです。
ul(に関わらず各種ブロックでこのマージンはみ出しは怒るけど)の親となるブロックの
上方向paddingを1pxでも指定していれば何とかなったような気がする。

289 :Name_Not_Found:05/02/15 21:13:20 ID:Zu4RAcVP
リンクのページで
(HTML)
<P><A href="〜"><IMG src="〜"alt="〜"></A>〜</P>
<P><A href="〜"><IMG src="〜"alt="〜"></A>〜</P>
(css)
img{
border:none;
vertical-align:middle;
margin-left:0px;
margin-right:50px;
margin-top:10px;
margin-bottom:10px;
}
p{text-align:center;}

とした場合、バナーのサイズが違うためそれぞれの説明文が綺麗に上下が揃わないんです。
どうすれば最初の一文字から揃えさせればいいんでしょうか。


290 :283:05/02/15 22:49:54 ID:???
>>286

なるほど。
透かしてたわけじゃなくて、
実際には透かしたように見せた画像を背景にしてたわけですね。
灰色のgifをどうにかさせて透過させてたのかと思ってた。
謎が解けました。ありがとう。

291 :Name_Not_Found:05/02/16 01:56:29 ID:???
>>289
きれいに上下がそろわないってどういうふうにそろえたいの?
vertical-align: topとは意図してることが違うの?

292 :Name_Not_Found:05/02/16 04:20:30 ID:905Zv8v0
fontやらtableやらtdやらなんとか頑張ってきた
実際、それほど難しくもなかった
だがcss?なんだそりゃ…さっぱりわからん…
通販サイトみたいなtableタグ多用したサイト作りたいのだけどcss無しではだめなのかい?
ビルダーもニンジャもよくわかんねーよぉーw


293 :Name_Not_Found:05/02/16 05:34:23 ID:???
まぁ、cssはお前にぁー無理だ。

294 :Name_Not_Found:05/02/16 05:42:25 ID:???
>>292
どうぞ勝手にtableと仲良く戯れていてください。
くだらないサイトを作って幸せになってください。
そしてこのスレに二度とあらわれないでください。

295 :Name_Not_Found:05/02/16 12:35:48 ID:gTIBizGx
>>291
テキストの説明文をです。
(例)
バナー  ここは〜です。
バナー  ここは〜です。
このようにしたいんですがバナーのサイズがばらばらなんで今は
バナー  ここは〜です。
バナー ここは〜です。

こういうふうになっているんです。

296 :Name_Not_Found:05/02/16 14:10:59 ID:???
>>295
1 テーブルを使う。
2 バナーの種類ごとにクラス振ってマージン。

297 :Name_Not_Found:05/02/16 14:11:43 ID:???
>>295
そういう内容なら、自分はtableでマークアップする。

298 :Name_Not_Found:05/02/16 14:44:54 ID:y5tcOjtJ
スタイルシートでtableの色指定したとして
このtableだけは別の色にしたいっていう時は
どうしたらいいの?

299 :Name_Not_Found:05/02/16 15:17:14 ID:???
>>298
classやid振るか文脈セレクタ使え

300 :Name_Not_Found:05/02/16 16:44:15 ID:???
>>296 >>297
ありがとうございます。
素直にテーブルを使います。

301 :Name_Not_Found:05/02/16 18:05:02 ID:itn0lY/Q
ど真ん中にテーブルを配置したいのですが、
どうすれば良いのでしょうか?
ALIGN="center" VALIGN="center" をやってもIE以外ではど真ん中になりません
cssでど真ん中配置する場合はどうすれば良いのでしょうか?

302 :Name_Not_Found:05/02/16 18:08:53 ID:???
ど真ん中にテーブルっていう時点で
表としての扱いはしていないと思われるので
width100%、height100%のテーブルのなかに
入れ子でテーブルを入れましょう。
DOCTYPE宣言で標準モードにしないように。

303 :Name_Not_Found:05/02/16 18:09:21 ID:+ZZebcIo
今までIE使ってて、最近Firefoxを使いはじめた。
z-indexが効いていておどろいた。

304 :Name_Not_Found:05/02/16 18:26:43 ID:???
>>301
<div align="center">テーブル</div>で解決

305 :Name_Not_Found:05/02/16 18:33:18 ID:DD9+tJ66
IEだと問題ないんですがFireFOXを使用して見た場合
画像にリンクを貼ってあるものにカーソルを合わせると「ガクッ」っと画像が動くのですが
回避方法等ご存知でしたらご教授ください。

306 :Name_Not_Found:05/02/16 18:47:21 ID:itn0lY/Q
>>302>>301
さんのやり方はIEではど真ん中に配置されるのですが
ネスケやMozillaだとど真ん中に配置されません。

307 :Name_Not_Found:05/02/16 18:49:47 ID:??? ?#
>>306
>>6 Q2

308 :Name_Not_Found:05/02/16 19:31:29 ID:???
まずどっち方向にど真ん中にいかないのか教えてくれ

309 :Name_Not_Found:05/02/16 19:53:21 ID:itn0lY/Q
>>308
横方向にはど真ん中になるんですが、
縦方向はど真ん中にならず一番↑に表示されるんです・・・

310 :Name_Not_Found:05/02/16 19:54:54 ID:itn0lY/Q
>>307
横方向のセンタリングはできるんです。


311 :Name_Not_Found:05/02/16 20:10:42 ID:???
ぼくのは常に右曲がりです。

312 :Name_Not_Found:05/02/16 20:13:43 ID:DgHBDewb
CSS覚えないとどうなるの?

313 :Name_Not_Found:05/02/16 20:29:34 ID:???
>>310
テーブルを入れ子にするのは先ほど言ったとおり。
親のテーブルの高さを100%にしなさい

314 :Name_Not_Found:05/02/16 20:35:52 ID:itn0lY/Q
>>313
きちんと親テーブルは100%と設定しています。


315 :Name_Not_Found:05/02/16 20:41:33 ID:???
インターネットオプションの「セキュリティー|既定のレベル」を「低」に設定しないとだめ。


316 :Name_Not_Found:05/02/16 21:05:39 ID:???
すべての祖先をheight:100%にしないと縦中央にならないのはcss2の仕様。

317 :Name_Not_Found:05/02/16 21:33:35 ID:itn0lY/Q
全て100%にしています・・・・・・


318 :Name_Not_Found:05/02/16 22:22:57 ID:???
だからDOCTYPE宣言を見直せって
標準モードじゃできないよ

319 :Name_Not_Found:05/02/16 22:28:42 ID:???
css関係ないじゃん...

320 :Name_Not_Found:05/02/16 22:36:50 ID:???
ど真ん中厨が・・・   春だねぇ

321 :Name_Not_Found:05/02/17 00:19:02 ID:???
厨達は夜が早いな。

322 :Name_Not_Found:05/02/17 01:38:08 ID:???
<style type="text/css">
<!--
#test{
color: #33ff00;
}
-->
</style>
</head>
<body>
<p ID="test">123</p>
<h1 ID="test">abc</h1>
</body>
IDは1ページ内で一回しか適用されないはずなんですが、上のようしても、
「123」「abc」両方にcssが適用されます。何故でしょうか?

323 :Name_Not_Found:05/02/17 01:49:43 ID:???
>>322
一回しか適用されないんじゃなくて一回しか使えない

324 :Name_Not_Found:05/02/17 02:02:01 ID:???
>>322
>IDは1ページ内で一回しか適用されないはずなんですが

そもそもの根本的な考え方が間違っている。
 1. id属性値は、同一文書内で一意的な存在の筈であり、複数存在し得ない。
 2. 即ち、同一文書内で同一名称のIDセレクタは複数要素にマッチし得ない。
と、考えるべき。

>上のようしても、「123」「abc」両方にcssが適用されます。何故でしょうか?

HTMLパーザが「御めでたい」エラー訂正機能を働かしているから。
XMLプロセッサの妥当性検証のように、エラーを報告しないから。

325 :Name_Not_Found:05/02/17 03:10:29 ID:???
パーザ の検索結果 約 4,830 件中 1 - 10 件目 (0.20 秒)

326 :Name_Not_Found:05/02/17 03:13:52 ID:???
無駄な手間を…

327 :Name_Not_Found:05/02/17 03:23:29 ID:CfXdrqZ4
天地中央は >>8

328 :Name_Not_Found:05/02/17 03:27:22 ID:???
>5.ブロックレベル要素をセンタリングする方法
>http://www.mozilla.gr.jp/standards/webtips0004.html

最近FireFox導入しました。
ここで紹介されてるものをエディタにコピペしてFireFoxで表示しても全くCSSが反映されてない。
おれのFireFoxがおかしいのか?

329 :Name_Not_Found:05/02/17 04:12:09 ID:???
頭!

330 :Name_Not_Found:05/02/17 07:55:53 ID:???
>>328
DOCTYPE宣言してねーだろ。

331 :328:05/02/17 11:56:54 ID:???
>>329
>>330
初歩でしたね。
HTMLもおれの頭もおかしかった…
サンクス。

332 :Name_Not_Found:05/02/17 13:26:41 ID:???
>>331
あのな、頭! ってのはおまいのじゃないの。

333 :328:05/02/17 14:16:37 ID:???
>>332
だから「HTML(DOCTYPE)も」おかしかった、と。
「HTMLの頭もおれの頭もおかしかった」と書けばよかったな。スマソ。

334 :Name_Not_Found:05/02/17 15:03:46 ID:???
ドウイタシマシテ。

335 :Name_Not_Found:05/02/17 17:18:19 ID:???
ブロック要素に、widthとpaddingやmargin、borderを指定した時、
例えば200pxでpadding10pxにするとmozillaの場合paddingを除いてwidthが再計算されますよね。(paddingあわせて220pxになる)
IEやOperaの場合これはありませんが、どっちが正しいのでしょうか?

336 :Name_Not_Found:05/02/17 17:21:31 ID:???
>>328-331
の記事を見てもしかしてと思ったらDOCTYPE宣言してませんでした;
したらOperaは再計算されていたので、220pxになるのが正しいのかな?

337 :Name_Not_Found:05/02/17 17:26:02 ID:???
IEが間違っているというか、そんなかんじっすね。

338 :322:05/02/17 18:33:20 ID:???
>>323
>>324
返答を参考に勉強しなおして来ます。ありがとうございました。

339 :Name_Not_Found:05/02/17 18:54:33 ID:???
FireFoxで、ボックスにfloat属性を指定しないとmargin-topが無効になるのってバグ??
IEだとfloatがなくても普通にマージンが効きます。
↓このソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>テスト</title>
</head>

<body>

<div style="margin:0;width:400px;height:200px;background-color:#ffcc00;float:left">
<h1 style="margin-top:20px;margin-left:20px">回り込み指定あり(トップマージン有効)</h1>
</div>

<div style="margin:0;width:400px;height:200px;background-color:#00cc00;clear:left">
<h1 style="margin-top:20px;margin-left:20px">回り込み指定なし(トップマージン無効)</h1>
</div>

</body>
</html>

IEの独自解釈なのか、FireFoxのバグなのか・・・
さらにFireFoxだと見出しのmarginをem指定にすると、親のdivのマージンが変わったりとか、わけわからん・・・

340 :Name_Not_Found:05/02/17 19:10:46 ID:1pDNcfd8
<div id="body">
<p>あいうえお</p>
</div>

で、

#body{
width:50%;
height:100%;
background:#cccccc;
}

と指定すると、IE6だと縦いっぱいに背景#ccccccが適用されるのですが
Operaだと<div id="body">分の高さしか適用されません。
どのようにすれば、縦いっぱいにできるのでしょうか?

341 :Name_Not_Found:05/02/17 19:21:04 ID:???
>>335
>例えば200pxでpadding10pxにするとmozillaの場合paddingを除いてwidthが再計算されますよね。(paddingあわせて220pxになる)

Mozilla が周辺領域を除いて「再計算」しているわけではなくて、本来、
width と height は、ボックスが持つ内容領域の寸法を指定するもの。

ボックスモデルでは、各ボックスは、テキストや画像などの内容領域を持ち、
その周囲に padding, border, margin という周辺領域を持つ構造になっている。

そして、通常フローのブロック要素であれば、以下の等式に基づいて計算される:
  親ブロック要素の内容幅 = 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' (ただし、border-style が 'none' であれば、ボーダー幅は '0' になる)

IE や Mozilla、Opera 7 などの後方互換モードでは:
  width = 'border-left-width' + 'padding-left' + 内容領域の幅 + 'padding-right' + 'border-right-width'
という具合に計算するように実装されている。すなわち:
  親ブロック要素の内容幅 = 'margin-left' + 'width' + 'margin-right'
という具合に計算されていると推測される。


342 :Name_Not_Found:05/02/17 21:26:11 ID:???
>>339

あーあるある。バグなのか仕様なのかは教えてエロイ人なんだけど、おれも苦しんだ。
俺の場合はヘッダにアイキャッチ画像置いてるサイトなので、横幅は740ピクセル指定で
固定してある。
センタリングとmargin有効を両立するために、float指定するボックスをまるごと囲むボックスを用意したり、
色々やりたくないこともやった。
さらにIEのWidthのバグ(borderとpaddingを含めてしまう)対応のために、
ボックスの入れ子を作ったり、もうダサダサ。

なんか疲れる・・・。


343 :Name_Not_Found:05/02/17 21:39:19 ID:???
疲れたら寝ろ

344 :Name_Not_Found:05/02/17 21:49:24 ID:???
だーかーらー

CSSで作るメリットはないって気づけよ!

345 :Name_Not_Found:05/02/17 21:52:17 ID:???
(´・ω・`).。oO(やぁ… 世の中についていけない奴は何処にでも居るもんだね。)


346 :Name_Not_Found:05/02/17 22:13:30 ID:???
>>339
( ´ _ゝ`)...

347 :Name_Not_Found:05/02/17 22:50:51 ID:???
h1{
margin-bottom:1em;
}
.hidari{
width:30%;
float:left;
}
.migi{
width:70%;
}
.clear{
clear:left;
}
と指定しています。

<h1>おだおdd</h1>
<div class="hidari">a</div>
<div class="migi">i</div>
<div class="clear">ひげ</div>
とすると、h1に指定しているmargin-bottom:1em;がclearの上にも効いているのですが何故でしょうか?

348 :Name_Not_Found:05/02/17 23:02:11 ID:???
>>347
これが原因かどうかはわかりませんが、
%指定で合計が100%になるようにするのは
あまり好まれません。

349 :Name_Not_Found:05/02/17 23:09:53 ID:???
>>344
そうですね、一生tableレイアウトしててくださいね

350 :347:05/02/17 23:12:47 ID:???
>>348
はい、実は上のは例で簡潔に書いただけでして本当は
2%スペース|25%左|2%スペース|右69%|
と98%にしまして一番右、2%は指定せず同じだけスペース開くようにとしています。
最初99%にしていましたが1%の違いが自分にとって気持ち悪かったので…

他にはフォントの色、大きさの指定等、問題について関係無いだろうと思われる物ははぶいて書きました。

351 :Name_Not_Found:05/02/17 23:14:50 ID:???
>>347
「ひげ」と「i」の間が1em空くってことか?

IE6 Transitionalでテストした。 空かないよ。


352 :347:05/02/17 23:20:22 ID:???
>>351
はい、そうです。
空きませんか…では他に原因があるようですね、一時的にUPしてみます。

353 :347:05/02/17 23:33:05 ID:???
遅くなりました。
http://www.rinku.zaq.ne.jp/bkdgg507/
これです、ノートパソコンで見ていたらまぶしく無かったのですが今デスクトップで見たら
目が痛い…これは後日変更します。

作成途中で適当なんですが、宜しくお願いします。

354 :Name_Not_Found:05/02/17 23:43:57 ID:???
>>353
試してみてもいないんだけどメニューのボーダーをそれぞれ逆にしたほうがいいんじゃないかと思った

何か違和感が

355 :Name_Not_Found:05/02/17 23:59:30 ID:???
class="clearl" 外してみて。

>347と全く違うじゃないか。div厨の見本だな。

356 :Name_Not_Found:05/02/18 00:03:50 ID:???
<div class="背景的なもの"></div> のheightを
<div id="メインの文章">
<?php メインの文章(); ?></div>
に相対的にあわせるのってどうすればできるんでしょうか。
というか今調べてて思ったんですが、これってそもそも可能なのでしょうか。心配です。

357 :347:05/02/18 00:07:21 ID:???
>>354
後ほど試してみます、有難う御座います。

>>355
http://www.rinku.zaq.ne.jp/bkdgg507/test.html
外してみました。確かにdivに頼りすぎですね申し訳ないです、精進します。

358 :Name_Not_Found:05/02/18 00:07:34 ID:???
>>356
やってみれば解るんじゃないのか?

やらないんなら好きなだけ心配してろ。

359 :Name_Not_Found:05/02/18 00:11:53 ID:???
やってみたんだけどうまくいかなかった。

360 :Name_Not_Found:05/02/18 01:27:06 ID:???
>>339
IEのバグ
http://cssbug.at.infoseek.co.jp/detail/winie/b172.html

361 :Name_Not_Found:05/02/18 01:42:16 ID:???
>>340
http://www.mozilla.gr.jp/standards/webtips/webtips0032.html

362 :Name_Not_Found:05/02/18 04:49:29 ID:???
>>356
JavaScriptでも使わない限り直接その両者の高さを合わせるすべはありません。
しかし、うまくやっている人はその親要素をうまく使っています。
参考にしてみて下さい。

363 :Name_Not_Found:05/02/18 09:28:30 ID:???
>>347
#floatbox{
width:100%;
}

<h1>おだおdd</h1>

<div id="floatbox">
<div class="hidari">a</div>
<div class="migi">i</div>
</div>

<div class="clear">ひげ</div>

これでOKだと思う。

364 :Name_Not_Found:05/02/18 12:38:26 ID:???
DW2004のCSSでフォントの指定をするとおかしくなる。
例)
body {
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
上記で指定した場合、指定したフォントが適用されません。
なぜでしょうか。

365 :Name_Not_Found:05/02/18 14:15:07 ID:???
DW2004なんか知るか。
●OSやブラウザの種類とバージョンについては必ず明記してください。

366 :Name_Not_Found:05/02/18 14:23:02 ID:???
質問ですが、
a:hoverで、背景を変えるときに、

ボックスいっぱいに背景を変えたいときはどうしたらよいのでしょうか??

367 :Name_Not_Found:05/02/18 14:36:39 ID:???
>>366
a要素はデフォのママだとインラインレベル要素なので、ボックスはテキストの
分量しか形成されません。
もし、a要素が入っているli要素などがあって、そのli要素のブロックいっぱいに
背景を変えたい、というのであれば a { display: block } としてブロック化し、
さらにli要素のブロックと同じ大きさになるようにしてください。

368 :Name_Not_Found:05/02/18 15:07:41 ID:???
>>367

丁寧で正確なレスありがとうございます。完璧に分かりました。ありがとうございました。

369 :Name_Not_Found:05/02/18 17:13:19 ID:???
>>365さん

winXP home
firefox,IE 6で発生します。
2バイト文字をcssで使用すると現象が発生すると考えています。

370 :Name_Not_Found:05/02/18 17:38:08 ID:???
おいニート共。検索するの面倒なんで俺様の質問に懇切丁寧に答えやがれ

bodyを幾つかに分けたいんだが
例えば1.htmlには1のbody 2には2のbody といった感じに
その場合って
1.body{hogehoge}
2.body{hogehoge}で良いんだっけ?
で、適用する場合<body>タグに<body class=1>でいいんだっけ?

371 :Name_Not_Found:05/02/18 17:43:06 ID:???
リンクをテキストだけではなく、ボックス全体に適用させるにはどうすればよいでしょうか??

372 :Name_Not_Found:05/02/18 17:59:51 ID:???
>>370
態度が気に入らないが 、答えてやろう。
body要素だけ内部CSS、他は外部CSSでFAだろ。
解決したなら、非礼を詫びて、感謝のレス書いとけ。

373 :Name_Not_Found:05/02/18 18:04:16 ID:???
>>372
ばっか全て外部CSSでやりてぇんだよ

374 :Name_Not_Found:05/02/18 18:06:19 ID:???
>>373
頭からっぽなんだから背伸びするな。

375 :Name_Not_Found:05/02/18 18:11:37 ID:???
>>372が答えるから

やるのも教えるのも簡単だけどな、
1のbody、2のbodyて・・・センスなさすぎ。

376 :Name_Not_Found:05/02/18 18:12:04 ID:???
class値に数字って問題ないですか?
<p class="10">みたいな感じなんですが。

377 :Name_Not_Found:05/02/18 18:13:09 ID:???
>>371
あるボックス(というかブロック)内にあるa要素全てに、ってこと?

378 :371:05/02/18 18:16:59 ID:???
>>377

リンク先へ飛ぼうとするときに、テキスト上をクリックするだけでなく、余白部分とか、ボックス内のどこをクリックしても
リンク先へ飛べるようにしたいのです。

379 :Name_Not_Found:05/02/18 18:18:58 ID:???
>>376
数字は使えるけどその使い方は間違い。
classとidは英数記号が使えるけど、数字から始めるのは NG 。
class="asdf-10" とかは大丈夫。

記号の中で一文字、例えばアンダースコアとか、を絶対使わないって
自分でルール決めしておくと、のちのち更新とかデバッグとかするときに、
エスケープシーケンス風に使えて便利。

380 :Name_Not_Found:05/02/18 18:20:13 ID:???
>>378
それだったら、a要素のdisplayをブロックにすれば良い、

…はずなんだけど、MSIEは駄目っぽい。
夏に期待しる。

381 :376:05/02/18 18:24:47 ID:???
>>379さん
親切なレスありがとうございました。

382 :371:05/02/18 18:26:19 ID:???
>>380
ありがとうございます、一応displayをブロックまではやってたんですが、うまくいかなかったもので。
当方msie使いですが、ttp://voix.s16.xrea.com/の左側ぶぶんとかはもしかしてjava script
ですか??こんな風にしたかったんです。

383 :Name_Not_Found:05/02/18 18:39:47 ID:???
>>369
>2バイト文字をcssで使用すると現象が発生すると考えています。
そんなわけがない。うちではちゃんと反映される。他にヘンな指定してると見た。
あと、当然だが、入れてないフォントは反映されないぞ。
フォント・キャッシュをクリアーしてみたらどうだ。


384 :Name_Not_Found:05/02/18 18:41:01 ID:???
>>382
ソースを。

385 :Name_Not_Found:05/02/18 18:43:06 ID:???
>>378
ブロック化したアンカーの範囲が内容物の部分のみになる(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b072.html

386 :Name_Not_Found:05/02/18 18:53:57 ID:???
>>382

>>7
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm
ここから好きなのを。というかテンプレ読んでね。

387 :Name_Not_Found:05/02/18 19:10:33 ID:???
a:link{
color:#000000;
text-decoration:none;
border-bottom-style:double;
border-width:4px;
}
ってしてるんだけど下線に二重線が付きません
visitedの方も同じようにしてるんですけどコチラもつきません
でも改行を入れて下に文字を入力すると二重線が付くのですが…

388 :Name_Not_Found:05/02/18 19:22:44 ID:???
a { に汁

389 :Name_Not_Found:05/02/18 19:26:59 ID:???
>>388
してもできませんでした(⊃Д`)

390 :Name_Not_Found:05/02/18 19:31:48 ID:???
普通に出来ますけど・・・

なんか余計なものが有りそうだね。
CSS全部出してみて

391 :Name_Not_Found:05/02/18 19:33:35 ID:???
4pxだと細線・太線になるから 3px にしたほうがいいな。

392 :Name_Not_Found:05/02/18 19:34:54 ID:???
>369
"ダブルコーテーション"でなく
'シングルコーテーション'でもダメか?

2バイト文字でのバグはSafariで発生する
ttp://members.at.infoseek.co.jp/cssbug/detail/safari/b003.html

393 :389:05/02/18 19:38:58 ID:A+fxLSb2
>>390
<!--
body{
font-size:11px;
color:#000000;
background-color:#ffffff;
margin:0px;
scrollbar-face-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-arrow-color: #aaaaaa;
scrollbar-track-color: #ffffff;
cursor:url(cur.cur);
}
a {
font-size:11px;
color:#000000;
border-width:3px;
text-decoration:none;
border-bottom-style:double;
cursor:url(cur2.cur);
}

394 :389:05/02/18 19:40:18 ID:???
a:hover{
font-size:11px;
color:#000000;
background-color:#cccccc;
border-width:3px;
text-decoration:underline;
}
h1{
font-size:11px;
border-bottom-style:dashed;
border-bottom-width:1px;
margin-right:0px;
margin-bottom:5px;
margin-top:15px;
font-weight:normal;
}
h2{
font-size:11px;
border-top-style:solid;
border-bottom-style:solid;
margin-left:0px;
margin-bottom:1px;
margin-top:10px;
border-top-width:1px;
border-bottom-width:1px;
font-weight:normal;
}
-->ageてもた(⊃Д`)以上です

395 :Name_Not_Found:05/02/18 19:57:57 ID:???
>>393
ふつうに2重下線になるけど・・・

リンク部分のhtmも出してみな

396 :389:05/02/18 20:02:11 ID:???
ごめんなさい一時ファイル消去したらちゃんと表示されました(⊃Д`)

397 :Name_Not_Found:05/02/18 20:05:01 ID:???
コノー  まあいいか・・・

a:hoverの
border-width:3px;
text-decoration:underline; は消しておけよ。

398 :Name_Not_Found:05/02/18 20:26:24 ID:h7M3I42M
IEが position:fixed に対応してくれるのは
いつごろになりそうですか?

399 :Name_Not_Found:05/02/18 20:26:40 ID:???
夏です

400 :Name_Not_Found:05/02/18 20:55:44 ID:???
15年後のな

401 :Name_Not_Found:05/02/18 21:20:58 ID:???
夏はセキュリティホール埋めだけだろうなあ。

402 :Name_Not_Found:05/02/18 21:40:39 ID:???
でもメジャーバージョン上がるんだし…

403 :347:05/02/18 22:04:26 ID:???
>>363
有難う御座いました、無事解決しました。

404 :Name_Not_Found:05/02/18 22:26:51 ID:???
藻前らさぁ
CSS以前に「HTML」を先に勉強供して下さい

405 :Name_Not_Found:05/02/18 22:30:40 ID:???
藻前は国語勉強してくらはい。

406 :Name_Not_Found:05/02/18 22:38:53 ID:???
>>402
Moz(FF)が、あまりにもセキュリティセキュリティ言うから、
その当てつけで6の穴ふさいだだけのものが出るんじゃないかな。

407 :Name_Not_Found:05/02/18 22:47:45 ID:oqvWHRjm
今cssでのレイアウトについて勉強してるんですが、float等によるレイアウトとtableによるレイアウトどちらが主流なのでしょうか?
どちらを使うべきでしょう?

408 :Name_Not_Found:05/02/18 22:49:53 ID:???
>>407
意味分かってる?

409 :Name_Not_Found:05/02/18 22:51:33 ID:???
どちらを使うべきかと聞かれたら、
前者としか言いようがない。
このスレ的には。

410 :Name_Not_Found:05/02/18 22:56:28 ID:???
妥当なところでテーブルだろうな

411 :Name_Not_Found:05/02/18 22:57:06 ID:???
主流なのはtableレイアウトだがね

412 :Name_Not_Found:05/02/18 23:05:20 ID:???
↓W3C信者が一言

413 :Name_Not_Found:05/02/18 23:06:17 ID:???
フロートのレイアウトは難しいよ
テーブルが楽、などなどの理由でテーブルが主流
若い人はフロートがんがれ。

414 :Name_Not_Found:05/02/18 23:07:54 ID:???
イチゴフロート 好き   キャッ

415 :407:05/02/18 23:24:57 ID:oqvWHRjm
テーブルが楽というのは、時間的に早く制作できるということでしょうか?
思いどおりにレイアウトできるということでしょうか?
簡単ということでしょうか?

実際webデザインを職業としている方々はfloat、position等はあまり使っていないのでしょうか?


416 :Name_Not_Found:05/02/18 23:26:40 ID:???
デザインを職業とWebを職業では違うからねぇ

417 :Name_Not_Found:05/02/18 23:42:57 ID:???
テーブルは表なんだよ。レイアウト用ではないっての。以上。

418 :Name_Not_Found:05/02/18 23:57:50 ID:ylAbSzRg
一般に言及されているテーブルレイアウトの欠点を、適当にピックアップ。

- 人間がテーブルレイアウトを実現するにはマークアップが困難。ソースが難解。
- 他人が再編集するのは困難。本人でも、飽きたレイアウトを組み直す作業は面倒。
- 本文とは関係のないレイアウトの再編集ばかりにコストを消費し、生産性を落とす。
- レイアウト情報が各HTML文書に内包するので、ソースが肥大化する要因になる。
- 逐次表示が難しい(表のデータをすべて読み込まないとレンダリングを開始できない)。
- ある一定の画面環境のユーザーしか、レイアウトの恩恵を得ることができない。
- 印刷出力、小型情報機器などの、個別のデバイスに適したレイアウトを提供できない。
- 代替スタイルシートのように、ユーザーの趣向に合わせたレイアウトを提供できない。
- ソース文書上の構造順序と、整形上におけるレイアウトの位置情報を分離できない。
- 非視覚メディアのユーザーにとっては、2次元的な表の構造を理解するのは非常に困難。
- ユーザースタイルシートで、個人的あるいは技術的な不都合を調整するのが困難。

だからといって、現状の CSS2 のレイアウト手法が万能ではないのは確か。

419 :Name_Not_Found:05/02/19 00:11:03 ID:???
CSS3で飾り枠専用の属性を追加すればかなり助かる :b:aだと限界がある…

420 :Name_Not_Found:05/02/19 00:49:57 ID:???
テーブルが主流っていうのは脳タリンで古いものにしがみついてる人。
テーブルレイアウトは減る一方。

421 :Name_Not_Found:05/02/19 01:20:08 ID:???
「減っている」と「主流」はちげーよバーカ

422 :& ◆Jx3uuDAUoo :05/02/19 01:53:48 ID:WAeDyttD
主流はphotoshopだな
見栄えが良くて数稼げる
HTMLなんぞ知らなくてもOK

423 :Name_Not_Found:05/02/19 02:15:59 ID:???
>>421
お前が馬鹿だろ。
減る一方なもの「主流」だと推すのは脳タリンで古いものにしがみついてる人。

424 :Name_Not_Found:05/02/19 03:32:50 ID:???
>>420
テーブルレイアウト減ってるようには思えないんだが
どこで調べたの減る一方って。

425 :Name_Not_Found:05/02/19 06:20:24 ID:???
テーブルレイアウト…InternetExplorer
CSSレイアウト…FireFox
ってカンジぃ? みたいな〜。

426 :Name_Not_Found:05/02/19 08:33:17 ID:???
まつたく・・・

427 :Name_Not_Found:05/02/19 09:34:56 ID:???
主流だろうが傍流だろうがどっちでもいいではないか。
>>418とかCSSの欠点考えてやりたいようにやれや。

スレ違いも甚だしい


428 :Name_Not_Found:05/02/19 09:50:09 ID:???
物理的なレイアウトの維持を最優先事項と考える観念は捨てよ。
思考の論理をマークアップし、その表現方法を CSS で具現化せよ。
WWW は流動的な漠然として世界であり、論理が唯一普遍である。

429 :Name_Not_Found:05/02/19 09:52:56 ID:???
シーエスエスでバックグランドイメージを書くときに、ミームが必要ないのはなんでだろう?
{
background-image: url(URL) type("images/jpeg");
}
の方がすっきりするきがする。


430 :Name_Not_Found:05/02/19 09:56:54 ID:???
>>427
>>418>>407 の質問に対するある種の回答だろう。スレ違いか?

>>429
MIMEタイプのことか。そんなのHTTPヘッダで判るだろう。
余計な記述が増えただけで、どこが「すっきり」なのよ。

431 :Name_Not_Found:05/02/19 10:15:49 ID:???
>>429
それと、拡張子なしのURLにして「コンテント・ゴシエーション」で
UA が適切なリソースを選べるように設定した方が柔軟だと思わんか?
実際に W3C ではリソースの永続性を保つために、そう設定している。

CSS側でMIMEタイプを指定しても煩雑になるだけで、メリットないよ。

432 :Name_Not_Found:05/02/19 10:17:48 ID:???
脱字訂正。
× コンテント・ゴシエーション
○ コンテント・ネゴシエーション

433 :Name_Not_Found:05/02/19 10:52:28 ID:???
間違えるなら最初から書くな。 聞きかじり丸見えだ。

434 :Name_Not_Found:05/02/19 10:55:52 ID:???
ゴーストネゴシエーターを思い出した。

435 :Name_Not_Found:05/02/19 10:57:45 ID:???
大まかなレイアウトはテーブルがいいと思うな。
CSSにレイアウト用の要素がないのが痛い。
スレ違いだけど。

436 :Name_Not_Found:05/02/19 11:07:04 ID:???
とりあえずtable推してる奴はこのスレで教える立場にない事は確か

437 :Name_Not_Found:05/02/19 11:08:31 ID:???
>>430
>>427をよく読め

438 :Name_Not_Found:05/02/19 11:43:24 ID:???
※ 議論はよそで ※

http://pc5.2ch.net/test/read.cgi/hp/1093950965/

439 :スレッド39の664:05/02/19 13:02:36 ID:iR1plMME
<a style="font-size:200%; line-height:1em; border:1px solid; padding:0em;">
qあwせdrftgyふじこlp;@ qあwせdrftgyふじこlp;@ qあwせdrftgyふじこlp;@
</span>


a spanなどの非置換インライン要素のボーダーについてなのですが
MacのGeckoブラウザだと、ボーダーが次の行のど真ん中を横切ります。
(Win IE6でもすこしはみ出します)
(MacのFirefox1.0/Camino0.8/Mozilla1.8a6で確認しますた)

「非置換インライン要素の高さはline-heightで決まる。
だから、line-heightが1emでパディングが0のとき
ボーダー下辺は次の行のボーダー上辺とほぼ重なる」
はずだと思っていたんですが、もしかしてバグですか?

3週間過去ログ探してもどうしても見つけられませんでした。
再投稿スミマセン。
ポインタだけでも教えていただけないでしょうか>えらいひと


440 :Name_Not_Found:05/02/19 13:46:59 ID:???
>>433
脱字だけで「聞きかじり丸見え」って決め付けるかね。
単なる入力ミスでしょ。藻前は絶対にミスしないのか。

441 :Name_Not_Found:05/02/19 13:52:26 ID:???
誰も気にしてないことを・・・ 顔を赤くして・・・

442 :Name_Not_Found:05/02/19 14:03:28 ID:???
バカは相手にしなくてもいいらしいよ☆ >440

443 :Name_Not_Found:05/02/19 14:40:25 ID:???

( ´Α`)つ ttp://sugiue-t.s3.x-beat.com/cgi-bin/uploader/source/up6802.jpg


444 :Name_Not_Found:05/02/19 15:03:29 ID:???
>>443
うける

445 :Name_Not_Found:05/02/19 15:15:13 ID:???
>>439
>非置換インライン要素の高さはline-heightで決まる。だから、line-heightが1emでパディングが0のときボーダー下辺は次の行のボーダー上辺とほぼ重なる

font-size = line-height であれば、非置換インライン要素の高さは、グリフ(字形)の高さと等しくなる。
各周辺領域は「非置換インラインボックスの高さの計算」に影響しないので、隣接する行へはみ出ることになる。

特に欧文フォントである場合は、アセンダやディセンダの都合で隣接する行に大幅にはみ出すことが多い。
例えば、アクセント記号付きのラテン文字(Á)を含む場合、キャップラインよりアセンダが高くなる。

ちなみにCSS2仕様では、非置換インラインボックスの内容辺の高さの決定について、明確化されていない。

『CSS2 勧告邦訳 10.8.1 行間と半行間(Leading and half-leading)』を参照。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#line-height

446 :Name_Not_Found:05/02/19 15:49:41 ID:???
漢字とカタカナばっか   嫁ねぇ

447 :Name_Not_Found:05/02/19 17:09:30 ID:???
>>446
http://white.jpg-gif.net/bbsx/10/img/124214.jpg

448 :Name_Not_Found:05/02/19 18:53:03 ID:???
>439
前スレで見たときに自分もいろいろ試してみたが
Macのネスケなんかはfont-family:monospace;以外の指定をしていると
fontの高さの基準が違うように思う
背景色つけるとわかりやすいが文字自体がやや上気味になる

あとfont-sizeとline-heightを別々に指定してみ

449 :Name_Not_Found:05/02/19 19:39:48 ID:LrVDWhqG
いろいろみたのですが、わからないので質問します。
overflow:auto;をしたいのですが、Mac Safariで、スクロールしてくれません。
macIE、winIEではスクロールしました。
ttp://1st-q.jpn.org/sourceup/img/up0002.css

<div class="entry" id="ent1">
<div class="file"><img src="./img/xx.gif"></span></div>
<div class="comment">改行<br>改行<br>改行<br>改行<br>改行<br>改行</div>
<div class="color">--------------------------------</div>
</div>

commentの部分をスクロールしたい。
でも、横スクロールはだしたくない。
winIEで確認したところ、できました。

問題はMacSafariでまったくスクロールバーがでないことです。
必要ないときはスクロールしたくないのでautoでやりたいです。


原因がわかるかた、お願いします。


450 :Name_Not_Found:05/02/19 21:55:35 ID:btCJ/Rnl
position:absoluteでレイアウトしたものは絶対指定だからセンタリングなんてできないんですよね?

photoshopのcssってposition:absoluteでしかレイアウトしてくれないんです。
floatでやり直してセンタリングするしかないですか?

なんとかできないかなと思ってるんですが、方法があるなら教えてください。

451 :Name_Not_Found:05/02/19 21:57:50 ID:???
>>449
>.entry .comment {
...
overflow:auto;
}
auto の値は基本的にブラウザの初期値なので誤差が出る
><div class="comment">改行<br>改行<br>改行<br>改行<br>改行<br>改行</div>
の内容だけに合わせると "height: 7em;" で理想の視覚的効果は得られるはず。
基本的に、テキストを包含するモノの heigh の値に px 単位を用いる事は×
観覧者が同じフォントサイズで見ているとは限らない

452 :Name_Not_Found:05/02/19 22:08:55 ID:EXryj/Bi
loose.dtdなんですが、
ブロック要素で、width:100%にしてmarginなりpaddingなり、borderなりを指定すると、
横幅が100%+marginなりの幅になりますよね。
これを、合わせて100%にする方法はありますか?

453 :Name_Not_Found:05/02/19 22:15:57 ID:???
>>450

<html>
<head>
<style type="text/css">
<!--
#back-container {
position: absolute;
top: 20px;
left: 0;
height: 200px;
width: 100%;
background-color: yellow;
}
#inner {
height: 200px;
width: 200px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
-->
</style>
</head>
<body>
<div id="back-container">
<div id="inner">#inner</div>
</div>
</body>
</html>


454 :449:05/02/19 22:56:46 ID:LrVDWhqG
>>451
ありがとうございます。
emについて、勉強してみます。

あくまでその改行の文は例なのですが
ご指摘どおりに直してみましたが、やはりスクロールがでないので
文章がみれませんでした。

なにか方法はないでしょうか?

455 :450:05/02/19 23:21:03 ID:xO6dhbv2
>>453
そういう意味じゃないんですよ。

photoshopでデザインした画像をhtmlとcss化するとdivをpositionで絶対指定したソースができるんです。


絶対指定の中の子供をセンタリングするんじゃなくて、
絶対指定そのものをセンタリングしたいんですが方法はないでしょうか?
floatでやり直すしかないですか?

456 :Name_Not_Found:05/02/19 23:24:48 ID:???
>>455
ソースを晒す

457 :450:05/02/20 00:04:41 ID:yuj0pLCT
>>456

<html>
<head>
<style type="text/css">
<!--
.title {
position: absolute;
left: 0px;
top: 0px;
height: 100px;
width: 100px;
}
.main {
position: absolute;
left: 0px;
top: 101px;
height:100px;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="title">title</div>
<div class="main">main</div>
</body>
</html>

↑↑このページをセンタリングするには、
floatでレイアウトしなおす以外ないでしょうか?


458 :Name_Not_Found:05/02/20 00:13:21 ID:???
センタリングしたいのに絶対座標指定ってありえないべ

459 :Name_Not_Found:05/02/20 01:07:39 ID:???
>>450
よく分からないんだが、手作業でCSSを修正することは出来ないの?

460 :Name_Not_Found:05/02/20 01:58:23 ID:???
とりあえず、cssでレイアウトするなら
手打ちでしましょう。ソフトは糞です。

461 :Name_Not_Found:05/02/20 02:01:25 ID:???
>>452
横幅100%消してauto

462 :456:05/02/20 09:25:48 ID:???
>>457
> ↑↑このページをセンタリングするには、
floatでレイアウトしなおす以外ないでしょうか?
いまいち訳が解らないんだけど、 .title → .main の立て並びなら
body {
margin: 0;
}
.title {
background-color: blue;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
}
.main {
background-color: green;
margin-top: 1px;
margin-left: auto;
margin-right: auto;
height:100px;
width: 100px;
}
でいいんじゃないの

463 :Name_Not_Found:05/02/20 16:23:10 ID:???
「絶対配置を使って」が条件なんじゃないの?

464 :Name_Not_Found:05/02/20 16:53:06 ID:???
見出しとして画像を使用したいのですが、下の方法のうちどれが適切でしょうか
(3つとも本に紹介されていました)
もっと良い方法がありましたら教えて下さい

1.見出し要素の中に画像を入れalt属性で内容を指定する
2.cssの背景で画像を指定し、見出し要素のテキストをcssで{display:none}にするor非可視エリアに飛ばす
3.配置でテキストの上に画像を重ねる

1.は「見出しの中に画像を入れる」ことは妥当か疑問です
2.は画像の表示をオフにしている人(少ないでしょうが)は見えないですよね
3.は中身のない<span>を使っているので(下ソース)いいのかな?と思っています。

.heder{
width: 185px;
height: 49px;
font-size: 12px;
position: relative;
}
.heder span{
background: url("header.gif") no-repeat;
width: 100%;
heght: 100%;
position: absolute;
}

<h1 class="header"><span></span>タイトル</h1>

465 :Name_Not_Found:05/02/20 17:02:26 ID:???
3.は中身のないを使っているので(下ソース)いいのかな?と思っています。

  空の<span>がなぜ良いのか説明してくれ。

466 :Name_Not_Found:05/02/20 17:10:46 ID:???
>>465
いや、中身のない<span>使ってもいいのかな?駄目なんじゃないの?の意味です。
紛らわしくてすみません。

467 :Name_Not_Found:05/02/20 17:16:03 ID:???
hnは文字が基本。画像のみでは無いのと同じ。
文字で書いて、背景に画像でやりましょう。

468 :Name_Not_Found:05/02/20 17:24:28 ID:???
>>464
市販の制作本を鵜呑みで作ると、悲惨なことになるから
先ずは基本に忠実に作ったほうがいいよ。
ここが参考になるよ。
 http://kanzaki.com/docs/htminfo.html#simple-html

469 :初心者ですが・・・:05/02/20 17:31:50 ID:???
>>457

<html>
<head>
<style type="text/css">
<!--
.title {
position: absolute;
left: -50px;top: 0px;
height: 100px;width: 100px;
}
.main {
position: absolute;
left: -50px;top: 101px;
height:100px;width: 100px;
}
.container
{
margin-left: auto;margin-right: auto;
position: relative;width:0px;
}
-->
</style>
</head>
<body style="text-align:center;">
<div class="container">
<div class="title">title</div>
<div class="main">main</div>
</div>
</body>
</html>

470 :Name_Not_Found:05/02/20 17:41:06 ID:???
>>467
XHTMLとCSSの本で紹介されていたのですがやはり駄目なのですね
疑問が解消させてスッキリしました
ありがとうございます
3の方法も見出し要素に直接画像を使わない苦肉の策なのでしょうか
ロゴが既に決まっているのでテキストでは表現しきれずに困っています

>>468
製作本だけを参考にしないほうが良いのですね
一応スタイルブック系の本を2冊、辞典系の本を4冊読み
こちらのスレやご紹介いただいたサイトなども参考にしています
個人で製作している訳ではないので(web製作したことない人が口出ししてくる)基本だけで作ることができずいろいろな方法を探しています
悲惨なことにならない為にももう一度よく調べてみます
ありがとうございます

471 :Name_Not_Found:05/02/20 17:43:28 ID:???
470
疑問が解消できて
の間違いです
すみません

472 :Name_Not_Found:05/02/20 17:57:13 ID:???
がんがれ

473 :Name_Not_Found:05/02/20 18:44:02 ID:???
>>464
別に、h1要素の子要素として img が入るのは、HTMLとしては別に invalid なことではない。

何について妥当かどうかを問題にしてるのかが、いまいちよくわからんのだけども
(というかCSSではなくてHTMLとしての問題ではないのか?)、
3. の空の span が問題だなという程度で、あとは、どういう画像をどういう意味で使うか
次第ではないのかと思う。

474 :Name_Not_Found:05/02/20 18:51:43 ID:???
検索ロボットも考慮してるのかも・・・

475 :Name_Not_Found:05/02/20 19:10:17 ID:???
こういう肝っ玉の小さいことを必死に考えているようでは、未熟。
そのうちどんな糞ソース書いても軒並みPR↑検索上位の時代が来る。
まともなサイトなら

476 :450:05/02/20 19:25:35 ID:6U6zpIL5
>>469

すごい!できてる!

しかし {left: -50px}してあるのはなぜなんでしょう?
よくわかりません。よかったらおしえてもらえませんか?

477 :Name_Not_Found:05/02/20 19:40:24 ID:???
よくないので教えません。。。

478 :Name_Not_Found:05/02/20 20:38:33 ID:???
>>476
オマイはなんでそんなにアホなんだ?

479 :Name_Not_Found:05/02/20 20:44:46 ID:???
もうやだ。
テーブルレイアウト脱却のために
float:left;しても隣の要素と段差が出来ちゃうよ
つд`゚

480 :Name_Not_Found:05/02/20 20:52:31 ID:???
そうですか。

481 :Name_Not_Found:05/02/20 20:59:48 ID:???
FLOATしてないほうのブロックの
一番最初の要素の上マージンを見直してみるべし

482 :Name_Not_Found:05/02/20 21:01:36 ID:???
質問とちゃうでぇ。

483 :Name_Not_Found:05/02/20 21:06:06 ID:???
一々人に訊いていないで、仕様書なり、レファレンスなりを読んで
確りと仕組みを理解した方が色々と応用が効くわけだが、初心書は読まない。

ほとんどの初心者は玄人に成らない。成る必要もないと考えている。
だから自称初心者の多くは努力しない。なんでも人任せで済ませる。
質問掲示板なんかに来る初心者なんて、そもそも碌な連中じゃない。

碌に勉強もせずに直ぐに諦めて「〜はこんなことも出来ない」と嘆いてみせる。
真面目に学ぶつもりがないのなら、テーブルレイアウトなり何なり続ければいい。

484 :Name_Not_Found:05/02/20 21:08:22 ID:???
つまらない自己主張を質問スレに書くのも碌な奴じゃない。

485 :初心者ですが・・・:05/02/20 21:32:30 ID:???
>>476
         真中のここが原点(left:0がここ) 
              ↓
─────────+──────┬──
              │   title    │
              │         │
              └──────┘
              │← 100px → │

左に50px(left:-50px)ずらすと真中にくる。

486 :Name_Not_Found:05/02/20 21:55:37 ID:???
上の段差はなくなった!

でもfloatさせた要素の下辺で、隣に持ってきた要素内のテキストがガタつく・・・が、
>>7のサイトもそうなってるから、しかたのないことだと見た!

とにかく、出来た。原因は隣にもってきた要素のmarginがmarign になってただけだった。
一人で泣き入れてごめんよう

487 :Name_Not_Found:05/02/20 21:55:46 ID:???
仕様書読んでるやつってキモい

488 :Name_Not_Found:05/02/20 21:57:26 ID:???
>>486
それはIEのバグだから仕方ない。
隣に持ってくる要素の横幅が決まっているのなら、
それもfloat:leftをさせるとうまくいく。

489 :Name_Not_Found:05/02/20 21:57:46 ID:???
そのキモいのに助けられていい気になるのもいいだろう

490 :486:05/02/20 22:02:37 ID:???
>>488
あ り が と う !
あとは何とかできそうだー

491 :Name_Not_Found:05/02/20 22:04:00 ID:???
>>469
>>453と結果としては同じことだし>>462の方がスマート
ただ>>457の無知な我がままなだけ

492 :初心者ですが・・・:05/02/20 23:14:17 ID:???
>>491
綺麗、汚いでなく、photoshopで出したソース(絶対配置)を最小の
修正でセンタリングするのにはどうすれば効率がいいか?

という質問だと思ったのですが。

493 :Name_Not_Found:05/02/20 23:17:56 ID:???
>>491
人の話聞けよHAGE

494 :Name_Not_Found:05/02/21 00:33:41 ID:???
"CSS 2.1CR section. 10.3.5" を翻訳してみたけど,どうよ?
http://www.w3.org/TR/CSS21/visudet.html#q7
ウェブ上の翻訳サービスを使って調べた程度なので,多分いい加減。
英語が堪能な人,適切に翻訳できているかどうか,確認してくれない?

以前に width: auto; のフロート云々で揉めたじゃない。
だからさ,これを推敲してFAQサイトに掲載してみたらどうよ。

<!-- 翻訳文の開始 -->
<p>'margin-left' または 'margin-right' の算出値が 'auto' ならば,その値には '0' を用いる。</p>
<p>'width' の算出値が 'auto' ならば,その値には "shrink-to-fit" width(内容に合わせて縮めた幅)を用いる。</p>
<p>shrink-to-fit width の計算は,自動テーブルレイアウトアルゴリズムを使用しているテーブルのセル幅の計算と類似している。
概略:明確に行区切りが起こる場所以外では行を区切らずに,内容を整形化することによって望ましい幅を計算する。次に,望ましい<em>最小限</em>の幅を(たとえば,可能な限りの行区切りを試みて)計算する。
CSS2.1 では,正確なアルゴリズムを定めない。
最後に,<em>利用可能な幅</em>を見つける。その計算は,包含ブロックの幅から 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right' と関連したスクロールバーの幅を差し引いて求める。</p>
<p>shrink-to-fit width は次のように算出する: 最小( 最大(望ましい最小限の幅, 利用可能な幅), 望ましい幅).</p>
<!-- 翻訳文の終了 -->

参考:
・「width: auto のフロート」
 http://altba.com/bakera/hatomaru.aspx/ebi/topic/472
・width 明示なしのブロック要素を float
 http://www.remus.dti.ne.jp/%7Ea-satomi/nikki/tmp/floattest/float_not-specified-width.html

495 :Name_Not_Found:05/02/21 04:18:29 ID:VCDndwOC
<body>
<div id="header">
</div>
<div id="contentsbox">
 <div id="menubox">
 </div>
 <div id="mainbox">
 </div>
</div>
<div id="footer">
</div>
</body>

#header { margin: 0; padding: 0; display: block; position: relative; height: 110px; }
#contentsbox { clear: both; margin: 0; padding: 0; }
#mainbox { margin-left: 197px; padding: 0; display: block; height: 100%;}
#menubox { margin: 0; padding: 0; display: block; width: 196px; float: left; }
#footer { margin: 0; padding: 0; display: block; height: 74px; clear: both; }

試行錯誤の末、以上のソースでのレイアウトを行っています。
WindowsIEにおいて、mainbox内にブラウザウインドウサイズ以上の画像等が入ると、
mainboxの回り込みが解除されてmenuboxの下にガクンと下がってしまいます。
FireFox等ではおこりません。
どうしてもこの問題がクリアできません。
どなたか、対処法をご助言いただけませんでしょうか<(_ _)>

496 :450:05/02/21 07:31:19 ID:dZghY7In
>>485
原点が中心にくるからwidthの半分を-することによって中心にくるってことですよね。
ありがとうございます。


497 :Name_Not_Found:05/02/21 12:06:36 ID:geztn/Ih
スクロールしても動かないボックスをIEで実現するのは不可能でしょうか?

498 :Name_Not_Found:05/02/21 12:23:39 ID:???
それ、すんごく邪魔じゃね?

499 :Name_Not_Found:05/02/21 13:06:20 ID:???
たとえば左端か右端かにスペース空けて
そこに動かないボックスを置くとかなら邪魔とは思わない場合もあると思う。
しかしIEで実現しようとなるとスクリプト使うしかないんじゃないかな。
あるいはIEの独自拡張のexpressionとか。

500 :Name_Not_Found:05/02/21 14:58:54 ID:fQTeIH6p
3カラムのレイアウトで、
例えば左側を幅100px、右側を幅150px、中央を出来る限りの幅にってするのはCSSではかなり難しいですよね?
両側を position:absolute で頑張ればなんとか、幅は合うのですが、高さを合わせるのが至難の技です。
どうすればこのレイアウトをエレガントに出来ますか?
正直現時点ではCSSでこのようなレイアウトをするのは現実的じゃないのでしょうか?



501 :Name_Not_Found:05/02/21 15:11:44 ID:???
>>500
まず、左右に分ける。
<div id="AAAAA">左</div>
<div id="BBBBB">中</div>

このとき、
div#AAAAA{
width: 100px;
float: left;
}
div#BBBBB{
margin-left: 100px;
}

次にBBBBBの中で右ブロックを作る
<div id="AAAAA">左</div>
<div id="BBBBB">

    <div id="CCCCC">右</div>
</div>

ここで、
div#CCCCC{
width: 150px;
float: right;
}

とする。こうすると、漏れの脳内レンダリングではうまくいくはずなんだが、いかがか。

502 :501:05/02/21 15:13:07 ID:???
あ。
「中」のところを、
<div id="AAAAA">左</div>
<div id="BBBBB">
    <div id="DDDDD">中</div>
    <div id="CCCCC">右</div>
</div>

として、
div#DDDDD{
margin-right: 150px;
}

とすべきかな。

503 :Name_Not_Found:05/02/21 15:36:07 ID:fQTeIH6p
ご回答ありがとうございます。
俺も今、
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
を見て、それと同様のことを試していたのですが、
IEでしか確認していないのですが、右のパネルが下に表示されてしまうようです。


504 :501:05/02/21 15:44:54 ID:???
>>503
万人にわかるように。

505 :501:05/02/21 15:47:53 ID:???
あと、今更で申し訳ないけど、
出てくる順序にこだわりが無ければ。

<div id="aaa">左</div>
<div id="bbb">右</div>
としておいて、それぞれフロート左右して幅を固定すれば、
残りは真ん中のあいた空間に流れ込むな、たぶん。

506 :Name_Not_Found:05/02/21 15:48:17 ID:???
opera.com参考汁

507 :Name_Not_Found:05/02/21 16:02:24 ID:???
CSSで出来ないことなんてない。出来ないというやつはそいつが出来ないだけ。
旧ブラウザの対応が難しいだけで、今の主要ブラウザなら他でやれることはCSSでも出来る。

508 :Name_Not_Found:05/02/21 16:13:23 ID:???
嘘つけ厨房

509 :Name_Not_Found:05/02/21 16:19:14 ID:???
>>503
テーブル使えば5分でできるのに。
しかも全ブラウザー対応。

510 :Name_Not_Found:05/02/21 16:22:15 ID:fQTeIH6p
すみません。実際に書いたhtmlを挙げてませんでした。
この場合だと右側のカラム(さっきはパネルと書いてしまったが;)が下に表示されてしまうのですが、
なんとかならないでしょうか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<style type="text/css">
body{background-color:#666666; text-align:center}
div.main_panel{background-color:#FFFFFF; width:70%; margin-left:auto; margin-right:auto; text-align:justify}
div.left_panel{background-color:#CFCFFF; float:left; width:100px}
div.center_right_basi_panel{background-color:#FF0000; margin-left:100px}
div.center_panel{background-color:#00FF00; margin-right:150px}
div.right_panel{background-color:#CFFFCF; float:right; width:150px;}
</style>
</head>
<body>


511 :Name_Not_Found:05/02/21 16:22:43 ID:???
漏れのLynxにも対応できますか?

512 :Name_Not_Found:05/02/21 16:23:03 ID:???
時代遅れのtable厨はさっさとこのスレから出ていってくださいな

513 :Name_Not_Found:05/02/21 16:23:18 ID:fQTeIH6p
<div class="main_panel">
<div class="left_panel">
left_panel!
</div><!-- end left_panel -->

<div class="center_right_basi_panel">
<div class="center_panel">
center_panel!
</div><!-- end center_panel -->

<div class="right_panel">
right_panel!
</div><!-- end right_panel -->
</div><!-- end center_right_basi_panel -->
</div><!-- end main_panel -->


<br><br><br><br><br>
<!-- テーブルの場合のサンプル -->
<table style="width:70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:100px; background-color:#CFCFFF;">left_panel!</td>
<td style=" background-color:#00FF00;">center_panel!</td>
<td style="width:150px; background-color:#CFFFCF;">right_panel!</td>
</tr>

</body>
</html>


514 :501:05/02/21 16:24:36 ID:???
>>513
width: 70%;

をちゃんと計算しなきゃいかんだろうな、たぶん。
相変わらず脳内レンダリングなんだけど。

515 :501:05/02/21 16:27:44 ID:???
とりあえず、いきなりあれこれやろうとせずに、
できるところからやっていって、
少しずつ装飾を足していけばいいんじゃないのかな。
色とか、後ででいいじゃん。

516 :Name_Not_Found:05/02/21 16:35:48 ID:???
>>509
> しかも全ブラウザー対応。
けいたいでんわで いんたーねっと を するときに
つかってるのは ぶらうざ じゃないのですか?

517 :Name_Not_Found:05/02/21 16:53:44 ID:???
テーブル厨馬鹿丸出し→>>509

518 :Name_Not_Found:05/02/21 17:11:40 ID:fQTeIH6p
色付けは、実際表示させてみて分かりやすくしてるだけです。
配色はテキトーです。

width: 70% の部分はpx指定にしてもだめでした。

正直、 position:absolute を使わなければ出来ないレイアウトなら、
一つのHTMLで携帯対応までしないのであれば、現時点では Table レイアウトもありなのかなと思ってしまいます。
CSS3 Module:Multi-Column Layout とかのような追加仕様がない限りは……。


519 :Name_Not_Found:05/02/21 17:16:35 ID:???
泣き言いうなら最初から手を出さなきゃいいのにw
テーブルレイアウトしさえすれば
携帯にとってすばらしいデザインになるわけでもないでしょう
>一つのHTMLで
大体あんた携帯コンテンツをわかってなさげ。

520 :釣りですが何か?:05/02/21 17:24:30 ID:???
>>518
全くその通り。
CSSはレイアウト用の要素がない。
CSS3が出るまでテーブルレイアウトをするのが本道。
テーブルならshrink to fit もちゃんとしている。

floatによる対処療法は余分(余計な?)な知識が必要で、しかも
CSS3が出たら、いらなくなる知識が多い。

装飾や単純なレイアウトなら現状のCSSでOK。

521 :Name_Not_Found:05/02/21 17:25:58 ID:fQTeIH6p
いあ、確かに携帯コンテンツなんて作ったことありません、すみません;
519さんが携帯コンテンツを例に挙げていたので、てっきりそっちの現場はそういうことしてるのかと;


522 :Name_Not_Found:05/02/21 17:28:04 ID:fQTeIH6p
516だ;たびたびすみません;

523 :Name_Not_Found:05/02/21 17:28:18 ID:???
どこがその通りなんだか。更に馬鹿な発言になってて内容に突っ込む気もしない。


524 :Name_Not_Found:05/02/21 17:30:04 ID:???
>>521
携帯にも対応しようとしてるページを携帯で実際にみてみたら?
>一つのHTMLで
いかに無茶なことをいってるかわかる。

525 :Name_Not_Found:05/02/21 17:32:19 ID:???
>>521
挙げてない。519が最初の発言

526 :is:05/02/21 18:31:33 ID:???
ブログサイトでよくある左にメニュー、右に日記というのを作ろうと思い、いろいろいじくっているのですが、うまくいきません。
何処が悪いのでしょうか。

<HTML>

<div id="container">
<p>container</p>
<div id="left">
<p>left</p>
</div>
<div id="right">
<p>right</p>
</div>
</div>



527 :is:05/02/21 18:34:14 ID:???
<css>

body {
margin:0px;
padding:0px;
background-color: #000000;
}
#container {
width:480px;
margin:0px;
padding:0px;
background-color: #FFFFFF;
}
#left {
width:200px;
height:150px;
margin:10px;
padding:0px;
float:left;
background-color: red;
}
#right {
width:200px;
height:150px;
margin:10px;
padding:0px;
float:left;
background-color: blue;
}

ie6とfirefox1.0で確認しているのですが表示の仕方が違います。
ie6の表示の仕方を希望しているのですが。。

528 :Name_Not_Found:05/02/21 18:34:20 ID:???
全部

529 :is:05/02/21 18:38:01 ID:???
>>528
と、いいますと。。?

あの、一応試しでやってますので実際に作るのはもっと違ったcssとHTMLになる予定です。
はい。。

530 :501:05/02/21 18:42:07 ID:???
>>518
難しく考えすぎだよ。
とりあえず書いてみた。

#スタイルシート
div#content{
margin: 0px 15%;
}

div#AAAAA{
width: 100px;
float: left;
background-color: #ffe6e6;
}

div#CCCCC{
width: 150px;
float: right;
background-color: #e6ffe6;
}

div#BBBBB{
margin: 0px 150px 0px 100px;
background-color: #e6e6ff;
}
※「content」のブロックはbodyでヤルのが本筋なんだろうけど、
 MSIE対策として。

531 :501 = 530:05/02/21 18:43:29 ID:???
>>530の続き
#html

<body>
<div id="content">

<div id="AAAAA">
<h2>左左左左左</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

<div id="CCCCC">
<h2>右右右右右</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

<div id="BBBBB">
<h2>中中中中中</h2>
<p>本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。本文が入るところ。</p>
</div>

</div>
</body>


532 :Name_Not_Found:05/02/21 18:50:22 ID:???
>>526
たぶんMovable Typeをいじっているのだろうけど。
MTの吐くhtmlって結構変というか、遠回りなコトやっているので、
それに併せてスタイルシートいじっていると大変。
できるならテンプレ書き直した方がいいよ(漏れはそうした)。

とりあえず、container のブロックは全体をくくっているだけなので放置しておいて。
left{
width: 200px;
float: left;
}
right{
margin-left: 200px;
}

が基本。rightについては、
right{
margin-right: 0px;
float: left;
}

とすることもあります(MSIE対策として)。
あとはちょこちょこいじっていけばいいよ。
がんがれ。

533 :is:05/02/21 21:28:26 ID:???
>>532
へたれなんで最初よく解らなかったですが、いまやっと解りました。
考え方がちょっとおかしかったですねorz
めちゃめちゃ助かりましたです。
ありがとう!がんばりますです!

あと、Movable Typeではなく自分でMovable Typeモドキなプログラムを作ってまして、それのんなんです。


534 :Name_Not_Found:05/02/21 21:34:49 ID:???
xhtmlとcssでwebページを作って見た。
mozillaで確認しながらしこしこと。
今日、そのページをIEで見たら、
メニューすらうまく表示されてなかった。
マイクロソフトさんが、メディアのイ
ンタビューとかでもじらよりIEが優れているみたいな
ことを言ってたので、もじらで表示できてれば、IEで
も見られるだろう、と。しかし、どういうことだ?
主に原因はなんなのでしょうか?


535 :Name_Not_Found:05/02/21 21:37:45 ID:???
その質問の仕方から想像するに
原因はおまいの頭だ。

536 :500:05/02/21 21:40:11 ID:???
501さんありがとうございます。
float: right を使うときはHTML上では順番を逆にしたのですね;
勉強になりました。
これくらい楽に書けると table レイアウトはあまり必要なさそうですね。


537 :Name_Not_Found:05/02/21 22:13:46 ID:???
>>536
さらにそのボックスの中でfloatを使うと崩れるという次の問題があったりするが。

538 :Name_Not_Found:05/02/21 22:13:48 ID:???
>>496
馬鹿は引っ込んどけ
ウザイ

539 :Name_Not_Found:05/02/21 23:02:38 ID:EtdmXXBr
ヘッダー
-------------------------------
メニュー|サブメニュー|コンテンツ
-------------------------------
フッター

という構成なのですが
float:leftで指定していて、左右にマージンをとると
レイアウトが崩れてしまいます。
マージンをはずすと正常に戻るのですが
floatでレイアウトするときはマージンは取れないのでしょうか。
下記がそのファイルです。

http://puchipu.fc2web.com/
http://puchipu.fc2web.com/style.css

540 :539:05/02/21 23:04:25 ID:???
ヘッダー
-------------------------------
メニュー|コンテンツ| サブメニュー
-------------------------------
フッター

でした。すいません。

541 :Name_Not_Found:05/02/21 23:15:44 ID:???
やりたいことがようつかめないが
マークアップの順番は
ヘッダ→メニュー→サブメニュー→コンテンツ→フッタ
にして、スタイルシートは
メニューにfloat: left;、サブメニューにfloat: right;、
コンテンツにメニューとサブメニュー分のマージンを指定すれば
いいとおもうが。

全体の左右のマージンをとりたいのなら
bodyのpaddingで調整するよろし

542 :539:05/02/21 23:29:33 ID:???
>>541
全体の左右のマージンをとりたかったのです。
bodyのpaddingでできました。本当にありがとうございます。

543 :Name_Not_Found:05/02/22 00:37:50 ID:???
.header{
background-color:#999999;
}

<div class="header">aaaaa</div>

この場合ちゃんと背景#999999となるのですが、<div></div>この間に
コメントを入れようと<!--ほにゃららら-->とすると指定が解除されるようです。
div外に入れれば問題ないので別に良いのですがこれは仕様ですか?

544 :543:05/02/22 00:41:54 ID:???
大丈夫だと思ったんですが、</div>の下の行に入れてみると
表示全て消えてしまいました、以前はこんなこと無かったんだけど…何だこれ。

545 :Name_Not_Found:05/02/22 00:43:20 ID:???
>>543
Validatorにかけてみることをおすすめする。

546 :Name_Not_Found:05/02/22 01:00:15 ID:???
>>545
>>4にあるCSS検証サービスというのをやってみましたが、出たのは
行番号 : 23 font-family: 一般フォントファミリー名(generic font family)を最後の選択肢として
付け加えておく事を推奨します
だけでした、付け加えましたが問題の解決にはなりませんでした。
後、HTMLクイックチェッカというのも試してみましたが特に何もありませんでした。

body内を問題の起こっている最低限の記述にしてみると、問題は解決しました
うーん、よくわかりませんがもう一度最初から見直してみます。有難う御座いました。

547 :Name_Not_Found:05/02/22 01:14:36 ID:???
HTMLの方もヤレ

548 :Name_Not_Found:05/02/22 01:58:38 ID:???
ttp://syobon.com/upload/src/syobon19805.zip.html
2つのhtmlファイルがあります。
2つの違いは、div.outer の指定があるかないかです。

2つのファイルを Firefox0.8 と IE5.5 でそれぞれ開いて画面を見比べてみると、
Firefox0.8 では1px(borderがある分)だけ画面がずれるのに対して、
IE5.5ではもっと大きくずれてしまいます。
これはブラウザの仕様なのでしょうか?

IEの方では、div.inner1 と div.inner2 の境目あたりが
背景色になってしまうことがあって、非常に格好悪く見えてしまいます。

549 :548:05/02/22 02:18:06 ID:???
最後の2行は文では説明しづらいので、
「境目あたりが背景色になってしまう」ときの画像をいれてあげ直しました。
ttp://syobon.com/upload/src/syobon19811.zip.html

550 :497:05/02/22 04:06:15 ID:f2EY0n+w
>>498
>>499
499さんのおっしゃってるようなボックスを作ろうと思っています。
やっぱスクリプト弄らないとダメっぽいですね…
ありがとうございます。参考になりました。

551 :439:05/02/22 09:31:39 ID:yesM7k8I
>>445
>>448

本当にありがとう。
遅くなったけど、教えてもらった先をいろいろ読んで、いろいろ試してみて、
ようやっと理解がすすんできました。


>ちなみにCSS2仕様では、非置換インラインボックスの内容辺の高さの決定について、明確化されていない。

なるほど。
内容辺の高さはUA依存、当然、ボーダーなど周辺領域の位置もUA依存。

現状では「確実にはみだしを防止」する方法はなく、
line-heightを多めにとっておこうという予防策しかないんですね。

マックのネスケ・Geckoのバグじゃないかと思ってたけど、
そんなことないんだな。

これからはline-heightの値を多めにとるようにします。

>Macのネスケなんかはfont-family:monospace;以外の指定をしていると
>fontの高さの基準が違うように思う

これ、すごく役立ちました。
他の環境での間延び (line-heightが大きすぎることによる) を防ぎつつ、
Macでのボーダーはみだしを抑制することができます。
ばんざい


#今後のCSSではどうなるんだろう?勉強します。


552 :Name_Not_Found:05/02/22 13:01:58 ID:???
>>551
#今後のCSSではどうなるんだろう?
http://www.w3.org/TR/css3-linebox/

553 :Name_Not_Found:05/02/22 13:55:46 ID:???
今後って・・・資料が古い

554 :Name_Not_Found:05/02/22 14:27:14 ID:???
>>553
(゚Д゚)ハァ? 何が古いって?

555 :Name_Not_Found:05/02/22 14:53:50 ID:???
>>550
そういうのがやりたいならフレーム使ったほうがいいんじゃないか?
ボックスがウインドウはみだしたらはみ出した部分がみえないじゃん。

556 :497:05/02/22 15:03:54 ID:???
>>555
なるほど!簡単なコトでしたね…
CSSのことばかりに目がいって気付きませんでした。
ありがとうございます。目が覚めました。

557 :Name_Not_Found:05/02/22 16:23:55 ID:???
まだフレームなんて使おうという制作者いたのか。
小学生が作ったようなサイトでしか最近みないんだが

558 :516:05/02/22 18:00:55 ID:???
>>524
ちょっと待って。俺は>>516だが、
携帯対応のページは作れるよ。
まあ、そこそこ新しい機種のみだけどね。

・1ページのファイルサイズが携帯電話の限界を超えない
・サイトに使う画像はそれぞれ携帯電話の限界を超えなくて、JPG
・見栄え用の画像はCSS
・テーブルは無理やりDL要素
・「図1」のような使い方をする画像の場合、
 リンクとし、そのA要素にIDを与え、サイズを指定し、
 背景画像にその参照先の画像を置く(CSS有効で画像、CSS無効でリンクになるように)
・media属性で、screen,tvのみにCSSを適応

これを厳守。
まあ、これをやる労力が果たして見合うものなのか、ってのは別だけど、
あくまでも趣味で作ってみた。企業のサイトだから晒せないけれど。

559 :Name_Not_Found:05/02/22 18:11:34 ID:???
>>558
待つのはあんただ。
それはようするに携帯用コンテンツだろ。
>1つのHTMLで
からすでに外れてる。

560 :Name_Not_Found:05/02/22 18:55:35 ID:???
>>558
>サイトに使う画像はそれぞれ携帯電話の限界を超えなくて、JPG
JPEG, PNG, GIF の3つのバージョンを用意しておいて、
コンテントネゴシエーションで端末ごとに振り分ける。

>テーブルは無理やりDL要素
単純なテーブルなら表示できるのだが。

>media属性で、screen,tvのみにCSSを適応
フルブラウザは screen も対応しているが、
携帯端末は一般に handheld か tty だろう。

---
携帯端末に Opera のような高度なフルブラウザが一般的に搭載されれば、
将来的には XHTML Basic + CSS Mobile Profile の組み合わせで、
PC と携帯端末の両方で閲覧できるようにウェブページを設計できるはず。

561 :Name_Not_Found:05/02/22 18:58:47 ID:???
>>558
・つい最近の機種でもi-modeなんかはJPGが使えない場合があるので、GIF推奨。

--

結局、携帯端末のブラウザスタイルシート(実際そういう仕組みになっているか
どうかは別として)でdl要素のdtとddが区別つくように表示されてくれるから
そのような発想になるわけで、table同様に見栄えゼロなら、dlで代替しようとは
考えないでしょ。
このような見栄えの問題でhtmlの記述を変えるってのは結局、bやiやfont使うのと
根っこは同じじゃん。だったらいっそのことはじめから物理マーk


ごめん、スレ違いだ。次の質問ドゾー

562 :Name_Not_Found:05/02/22 20:24:44 ID:???
>>551
インラインボックスのボーダーとかは明確になっとる。
フォントサイズの示す矩形が内容辺となり、
パディング領域、ボーダー領域が外接する。

理論的には、font-size+上下パディング+上下ボーダーの値より
line-heightが大きければボーダーが重なることはない。

563 :Name_Not_Found:05/02/22 20:29:41 ID:???
フレームと同等の効果のものは
まだHTMLとCSSだけじゃ実現できないのに
偉そうですね>>557

564 :Name_Not_Found:05/02/22 20:36:00 ID:???
>>563
しょうがくせい?
しーえすえすはボクにははやいよ

565 :Name_Not_Found:05/02/22 20:40:44 ID:???
今時フレームて(プ

566 :Name_Not_Found:05/02/22 20:52:19 ID:???
なかなか食いつきがいいですね
ここの堀は餌少なめですか?

567 :Name_Not_Found:05/02/22 21:10:38 ID:???
質問です。
外部スタイルシートを使用しているのですが、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script language="javascript">
<!--
function navi(obj) {
url = obj.options[obj.selectedIndex].value;
if(url != "") {
parent.location.href = url;
}
}
//-->
</script>
<BASE target="_top">
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>ジャンル:<!--genre--><BR>

<外部スタイルシートで背景が黒になるように指定してます>
body {
     background-color:#000000;
}
これで反映されない理由は何なんでしょうか?
style.cssは同じ階層に有ります。直接アドレスを入力しても反映されないのです。
どうしたらいいでしょうか?

568 :548:05/02/22 21:27:30 ID:???
>549が消えてしまったので、もう一度だけあげてみます。
ttp://www.42ch.net/UploaderSmall/source/1109074561.zip

しかたなく、body の padding をいじってみました。
ひとまず解決したものの、根本的には改善しないようです。

569 :Name_Not_Found:05/02/22 21:49:05 ID:???
>>567
バスが間違っているとか。
<a href="style.css">スタイルシート見えるかな?</a>
(パスはlink要素のhref属性と同じに)

ってして、ちゃんとリンク繋がる?

570 :Name_Not_Found:05/02/22 21:49:58 ID:???
>>562
>フォントサイズの示す矩形が内容辺となり、

CSS2 では 'font-size' と 'line-height' の差が行間である、
ということになっているけど、実は CSS2.1 の定義では違う。
この変更は CSS3 における再定義と実際の実装を反映したものだ。

CSS2.1 10.8.1 Leading and half-leading
>The difference between the content height and the used value of 'line-height' is called the leading.
content height と line-height の差が行間であると変更されている。

それでは non-replaced element の content height の定義は、
定義されているかというと、CSS2.1仕様では未定義になっている。

CSS2.1 10.6.1 Inline, non-replaced elements
>The 'height' property doesn't apply. The height of the content area should be based on the font, but this specification does not specify how.
>A UA may, e.g., use the em-box or the maximum ascender and descender of the font.

これは、CSS3 ではlineモジュールの 'text-height' property で使い分けが出来る。

571 :Name_Not_Found:05/02/22 21:59:10 ID:???
Divボックスの右下に文字を配置したいのですが、どうすれば良いのでしょうか?
右寄せは text-align: right; と解るのですが
下寄せが分かりません。 教えてください

572 :Name_Not_Found:05/02/22 22:29:15 ID:???
>>571
vertical-align:text-bottom

573 :562:05/02/22 22:48:26 ID:???
>>570
そーだったのか。おれのcss2の知識は
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x41
の時点で停止しとったよ。

574 :Name_Not_Found:05/02/22 22:49:23 ID:???
>>571
ブロック下辺にそろえるプロパティは無い。

と言うだけでは何なので。
divをposition:static以外にして、子要素作って文字を放り込んで
小要素でposition:absolute; bottom:0; right:0;
スタイルのためにhtmlいじるのはあまり推奨されないが。

>>572
適当な事言っとるな・・・

575 :Name_Not_Found:05/02/22 22:52:54 ID:???
今時フレーム使ってないサイトダサい。

576 :Name_Not_Found:05/02/22 23:05:20 ID:???
テーブル厨とフレーム厨勢いないな。
一年位前まで堂々と恥ずかしい意見を主張してたのにね。
今じゃ単なる知恵遅れ的存在。

577 :Name_Not_Found:05/02/22 23:09:54 ID:???
イントラで使うwebアプリとかだと、役立つ場面もあるんだけどな、フレーム。
今使っている2chブラウザのp2もそうだし。
ただ、webページで効果的に使うのは難しいな。




はい、次の質問ドゾー

578 :Name_Not_Found:05/02/22 23:27:19 ID:???
2chブラウザと比較するのはおかしい。
んなのフレームキッチンと比較してるのと同じ。

579 :Name_Not_Found:05/02/22 23:32:30 ID:???
作りたい本人が自由に作ればいいじゃない。

580 :Name_Not_Found:05/02/22 23:56:46 ID:???
>>578
p2はphpで稼働するhtmlベースの2chブラウザ。

581 :Name_Not_Found:05/02/23 00:01:13 ID:???
>>580
フレームキッチンはとってもおしゃれ

582 :Name_Not_Found:05/02/23 00:23:05 ID:???
テキストを背景画像に置き換える手法で、
テキストをtext-indentで画面外に飛ばしたいんだが、
opera7.53とmac版IE5.5だとそのまま背景画像の上にテキストが残ってしまいます。
ちなみにWinIE6.0、Firefox1.0だと消えます。

cssは
#midashi{
display:block;
width:200px;
height:40px;
text-indent:-9000em;
background:url("../img/midashi.gif") no-repeat 0 0;
}

htmlは
<h1><span id="midashi">見出し</span><h1>

みたいな感じですが、どこかおかしいですか?

583 :Name_Not_Found:05/02/23 02:02:32 ID:???
display:block;

584 :Name_Not_Found:05/02/23 02:06:33 ID:???
text-indent:-9000em;
これだろpxにしる

585 :Name_Not_Found:05/02/23 02:30:47 ID:???
なんだかなぁ・・・

586 :Name_Not_Found:05/02/23 02:39:23 ID:???
そんな裏技を駆使してまでCSSを使う意義について

587 :516:05/02/23 03:11:15 ID:???
>559
> それはようするに携帯用コンテンツだろ。
おいおい。あれ読んで理解できないのか?
パソコンで見たらパソコン用の見栄えが提供される、ってのが前提なんだが。

>560
> JPEG, PNG, GIF の3つのバージョンを用意しておいて、
> コンテントネゴシエーションで端末ごとに振り分ける。
今日び、JPG対応してます。

> 単純なテーブルなら表示できるのだが。
テーブルネストのハング問題で、無視するブラウザ多い。

> 携帯端末は一般に handheld か tty だろう。
携帯端末に「CSSを読ませないため」って意味だよ。

>561
> ・つい最近の機種でもi-modeなんかはJPGが使えない場合があるので、GIF推奨。
あったっけ? 機能一覧とか見た限りでは対応してると思ったが。最近、ってのが1年前も含むのならその限りではないが。
あとgif対応してない携帯ブラウザは結構ある。

> そのような発想になるわけで、table同様に見栄えゼロなら、dlで代替しようとは
> 考えないでしょ。
違うよ。「見出し」と「内容(セル)」の関係として扱ってるだけ。勝手に非論理に仕立て上げようとしないでね。

> このような見栄えの問題でhtmlの記述を変えるってのは結局、bやiやfont使うのと
見栄えの問題で、って。携帯端末がテーブル実装してないのがあるんだから。バカ?
じゃあ、どうやってテーブルを携帯電話で再現すんの?おせーて。
こういう「最近、ストリクタソぽくなりますた」みたいなガキが能書き垂れてると反吐が出るね。

588 :Name_Not_Found:05/02/23 03:37:37 ID:???
>そんな裏技を駆使してまでCSSを使う意義について

589 :Name_Not_Found:05/02/23 06:49:24 ID:???
>まあ、これをやる労力が果たして見合うものなのか、ってのは別だけど、

590 :Name_Not_Found:05/02/23 11:51:57 ID:???
議論は他所で

591 :Name_Not_Found:05/02/23 13:25:08 ID:???
>>587
先日購入したソニエリのpreminiはgifしか見れんぞ、
とログを見ないでカキコ

592 :Name_Not_Found:05/02/23 15:07:37 ID:k+ZOSBnx
探しにくいのでageてください。

593 :Name_Not_Found:05/02/23 15:23:15 ID:???
captionにmarginをとりたいんだけど、
IEはじめほとんど全部対応してないみたいなんですけど
こういう場合はどうやってmarginとればいいですか?
よろしくお願いします

594 :593:05/02/23 15:45:24 ID:???
上の要素のmargin-bottomをとることで解決しました
お騒がせしました

595 :Name_Not_Found:05/02/23 15:54:47 ID:???
>>587
>おいおい。あれ読んで理解できないのか?

お前は本当に馬鹿なんだな。作ってみろ。理想だけじゃなくて。
PCで作ったHTMLの段階から携帯では合わない内容

596 :Name_Not_Found:05/02/23 16:28:21 ID:???
質問失礼します、以前もお世話になったのですがまた問題が発生しました。

わかりやすい用にアップロードしました。
http://www.rinku.zaq.ne.jp/bkdgg507/
このページなんですが、タイトル、ヘッダーまでは自分の思った通りに表示できています。
その下のコンテンツや本文、フッターで表示がずれて見えるのですがそれは何が問題なんでしょうか?

>>7にある"段落れいあうとてすと"を参考にして作成しています。

宜しくお願いします。

597 :Name_Not_Found:05/02/23 17:33:28 ID:???
「ずれる」とはどういった観点からなのかを述べてくらはい

598 :Name_Not_Found:05/02/23 17:40:39 ID:???
>>596
基本レイアウトとして
 ヘッダ領域 サイド領域 メイン領域 フッタ領域
の四つに分けてから、それぞれの領域に気兼ねせずに中身を入れていくようにするのはダメかい?

599 :Name_Not_Found:05/02/23 17:41:58 ID:???
>>597
失礼しました。
タイトル・ヘッダー・フッターの一番左のボーダーを基準とした時に

1.コンテンツの部分がそれよりも左側にきている
2.コンテンツと一番上の本文の上側の位置
3.本文とフッターに書かれている文字がleft-borderにかぶっている

等のことを言っています。後、WindowsXP IE6.0で見ています。

600 :Name_Not_Found:05/02/23 17:48:39 ID:???
>>598
はい、思っているように表示できるのでしたらそういう方法でももちろん大丈夫です。
今別のパターンで作っている最中でした、もう少し考えてみます。

601 :Name_Not_Found:05/02/23 18:10:25 ID:k+ZOSBnx
>596
たしかにズレてる。

602 :Name_Not_Found:05/02/23 18:17:20 ID:???
ieのfloat回りはバグ多いから大変だね。

603 :Name_Not_Found:05/02/23 18:46:02 ID:???
CSS有効時のみ、装飾のためのテキストを出現させる方法はないでしょうか。
contentがそれだと思いますがIEでは未実装ですし。

604 :Name_Not_Found:05/02/23 19:57:40 ID:???
displayかな?

605 :Name_Not_Found:05/02/23 19:59:44 ID:???
それじゃ逆

>>603
ないです

606 :Name_Not_Found:05/02/23 20:06:28 ID:???
無念。画像貼ることにします

607 :Name_Not_Found:05/02/23 20:12:34 ID:???
IEって未実相だったんだ。
NNだから気がつかなかった。
緊急更新しなくちゃ!

608 :Name_Not_Found:05/02/23 20:15:04 ID:???
ttp://oshare.chips.jp/
上のサイトのメニューの様にオンマウスでボックスの背景が変わる
様になるには下の通りでいいのでしょうか?

<html>
<head>
<style type="text/css">
<!--
a {
width:150px;
padding: 5px 2px 5px auto;
background-color:#e4e4e4
}
a:hover {
color:#FA8072;
background-color:#af441a;
}
-->
</style>
</head>
<body>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
<a href="index.html">メニュー</a>
</body>
</html>


609 :608:05/02/23 20:17:38 ID:???
簡単に言うと、下のようなことをcssでやりたいのです。
上のやり方であっているのでしょうか?(結果は別として)
<table width="100%" BORDER=0 BGCOLOR="#FFFFFF" CELLSPACING=0 cellpadding="0">
<tr>
<td class="b" onClick="window.location.href='index.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">トップ</TD>
</tr><tr>
<td class="b" onClick="window.location.href='menu.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">メニュー</TD>
</tr><tr>
<td class="b" onClick="window.location.href='menu.html'" onmouseover="this.style.backgroundColor='#dbdbdb';" onmouseout="this.style.backgroundColor=''">メニュー</TD>
</tr>
</table>

610 :Name_Not_Found:05/02/23 20:19:42 ID:???
いける。

611 :608:05/02/23 20:59:45 ID:???
あ! ブロック入れなきゃいけませんでしたね・・・

612 :Name_Not_Found:05/02/23 22:26:13 ID:???
>>609
擦れ違い

613 :Name_Not_Found:05/02/23 23:11:02 ID:???
>>608
単にそのサイトのソースを見ればいいのでは?

http://oshare.chips.jp/blue_img/blue.css


614 :Name_Not_Found:05/02/24 00:21:09 ID:l5EP4Dxh
>>613 がいいこと言った

615 :Name_Not_Found:05/02/24 00:28:55 ID:???
>>596
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

.honbunと.footer
にpadding-left:10pxを追加

ただ、俺もヘッダ領域 サイド領域 メイン領域 フッタ領域の4つに分けたほうがいいと思うけど。

616 :Name_Not_Found:05/02/24 01:02:18 ID:???
>>615
>>596 にストリクトは荷が重いと思った。

617 :Name_Not_Found:05/02/24 01:20:55 ID:???
>>596
↓これとは違うけ?

http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

618 :Name_Not_Found:05/02/24 01:34:45 ID:???
>>617
それ系のfloat使った段組って
ttp://cssbug.at.infoseek.co.jp/detail/winie/b151.html
のバグがいまだに直ってないんだね。

619 :Name_Not_Found:05/02/24 08:53:07 ID:???
>>618
↓この問題は解決されてるのかな〜?

3段組ブログサイトのレシピ。
http://o-ume8.com/junsdiary/C2058415919/E42125766/


620 :Name_Not_Found:05/02/24 09:22:28 ID:7jQ7hm9e
画像にリンクをはると外枠が青くなってしまうので
スタイルートを使って外枠を消すか、色を黒に変えたいと思っています。

記述はどうすれば設定できますか?

621 :Name_Not_Found:05/02/24 09:33:56 ID:???
>>620
>>8
FAQぐらい読んでほしいな。

622 :Name_Not_Found:05/02/24 09:59:51 ID:7jQ7hm9e
すみませんでした・・・。

623 :Name_Not_Found:05/02/24 13:00:22 ID:???
>>618
いまだに、つーか、6より新しいバージョンがまだ出てないじゃんw

624 :596:05/02/24 14:58:44 ID:???
widthを指定する、各領域に分けてから中身を入れる。という方法で作ってみたところ。
思っているように表示することができました。
http://www.rinku.zaq.ne.jp/bkdgg507/

これで行こうかと思います、皆さんレス有難う御座いました。

625 :Name_Not_Found:05/02/24 15:14:30 ID:???
>>624
今、khtmlで見てたんだけど、思うようになっていないと思う。残念。
ソースまではちゃんと見てないのだけど、回り込むガワのブロックのwidthを明示
するほかに、回り込むガワにもfloatを設定する、という方法でもMSIEでの微妙な
ズレは回避できるよ。

626 :596:05/02/24 15:37:54 ID:???
>>625
レス有難う御座います、khtmlとは何のことでしょうか?そういう名前のブラウザですか?
自分の環境(Windows XP IE6.0)で見た場合は
http://www.rinku.zaq.ne.jp/bkdgg507/001.gif こんな感じで見えています。
回りこむ側(main)にもfloat:left;と指定してみると
http://www.rinku.zaq.ne.jp/bkdgg507/002.gif こう見えるようになってしまいました。

627 :Name_Not_Found:05/02/24 16:43:15 ID:???
MACのSafariも知らないのか!?どざーは馬鹿ばっかだなー
その調子じゃLinuxのも知らないでしょ?ぷ

628 :Name_Not_Found:05/02/24 16:45:56 ID:???
全角のは知らないな。

629 :Name_Not_Found:05/02/24 17:28:27 ID:???
そんなにえらそうに言うほどSafariなんて使われていないじゃん。
MacユーザーよりMozilla系の方がユーザーは多い。
まぁ俺もKHTMLでの表示チェックくらいはするけれど、多少の崩れなら流すよ。

630 :Name_Not_Found:05/02/24 17:41:59 ID:???
>>624
FireFoxでも見てみることをお薦めする。

631 :Name_Not_Found:05/02/24 17:47:48 ID:???
ドザーの制作者の立場から言わせてもらうと、safariの再現状況は気になる。
再現状況をキャプしてくれる程度のマカーの友人は必須だな。

ん?動作確認用のMac買えって?カテナが開き直りやがったんだよ!w
貧乏SOHOのボヤキですた・・・

632 :596:05/02/24 18:39:12 ID:???
レス有難う御座います。

>>630さんの言っているFireFoxというので見てみました。
ずれてますね。空きのある範囲での100%と勝手に考えてwidth:100%;とか指定してましたが
普通に画面の横幅分表示されていて横スクロールが出ていました。

手直せば直す程悪化していきました、あちらを立てればこちらが立たず。
もう少し考えてみます。

633 :Name_Not_Found:05/02/24 19:23:54 ID:???
>>631
実際のところ Gecko と同じか、それ以上だと思えばいいと思う。
ボックスのズレとかボーダー消えたりしないしw。
XML とか JavaScript まわりは確認が必要だろうけど。。

634 :Name_Not_Found:05/02/24 20:35:34 ID:MMwXmsu9
IE6以外は切り捨てていいですか?

635 :Name_Not_Found:05/02/24 20:36:01 ID:???
(・∀・)イイ

636 :Name_Not_Found:05/02/24 21:06:13 ID:???
何年もかけて作ってるのに、
たかがcssでの表示ひとつ同じに出来ないとは・・・
firefoxなどの偽IEはいつ本物のIEに追いつくの?

本物はもう2年以上放置されてますよ?
それで追いつけないなんて低能がすぎるのでは?

637 :Name_Not_Found:05/02/24 21:08:06 ID:???


638 :Name_Not_Found:05/02/24 21:15:33 ID:???
釣りなんだろうか

639 :Name_Not_Found:05/02/24 21:18:58 ID:???
釣り・・・だと思う、けど?

640 :Name_Not_Found:05/02/24 21:33:49 ID:???
>>636
今年IE7がでるんじゃないの?

641 :Name_Not_Found:05/02/24 22:14:35 ID:MMwXmsu9
IE7はposition:fixedに対応してくれるんでしょうか?

642 :Name_Not_Found:05/02/24 22:23:35 ID:???
>>638,639
もしも、釣りではないとしたら漏れは本当に恐い

643 :Name_Not_Found:05/02/24 23:21:50 ID:???
はい次どぞ〜

644 :Name_Not_Found:05/02/25 01:04:03 ID:???
過去ログ探ったんですが解決しなかったので質問させてください。

一番下にTABLEでできた広告が表示される鯖でWebサイト運営してるんですが、
文字や画像をposition:absolute;  top:10em;  left:10em;というように配置しています。
で、これを鯖にうpすると、広告が、body生書きの位置に来てしまいます。
自分の考えだと、ウィンドウの縦幅に関係なく、常に一番下に広告が来て欲しいんです。
---------------------
[ここに広告が入る]
            字
    絵
       絵
  字

       字

(ここに広告を入れたい)
---------------------
bodyのほうでpositionをbottom:0em;としているんですが、どうもうまくいきません…。
ぜひ、解決方法をご教授ください…。

645 :644:05/02/25 01:14:11 ID:???
すいません、擬似フレーム使ったら解決しました。
スレ汚しごめんなさい。

646 :Name_Not_Found:05/02/25 01:20:33 ID:nzX2rgYV
初心者な質問ですみません。。
HTMLでJPEGの画像を背景に載せたいんですが、
<BODY BACKGROUND="画像名.JPEG">じゃないですよね??


647 :Name_Not_Found:05/02/25 01:22:04 ID:???
>>646
body {
background-image: url("画像名.JPEG");
}

これでOK。

648 :646:05/02/25 01:34:09 ID:nzX2rgYV
>>647
ありがとうございます!!

649 :Name_Not_Found:05/02/25 01:39:47 ID:e+4/HVxJ
ブログのように左右を色で塗りつぶした感じにしたいのですがどうしたらいいですか?

650 :Name_Not_Found:05/02/25 01:42:43 ID:???
やり方はいろいろあると思うぞ

651 :Name_Not_Found:05/02/25 03:03:06 ID:2CWLOK0N
IEでfloat:left指定しているブロックにmarginを%指定するとマージンが二倍取られるみたいなんですが、これを回避する方法ありますか?

652 :Name_Not_Found:05/02/25 03:09:42 ID:???
ある




653 :651:05/02/25 05:14:52 ID:???
すいません。やり方を教えてください。

654 :Name_Not_Found:05/02/25 06:31:36 ID:???
>二倍取られるみたいなんですが

なら1/2にすれば医院じゃね? IE以外で悲惨だが・・・

655 :Name_Not_Found:05/02/25 06:38:03 ID:rIOnV674
cssを http://iroiro.matrix.jp/test/test.css
こうやって、htmlを
<body>
<p class="menu">
<a href="aaaa.htm">aaaa</a>
<a href="bbbb.htm">bbbb</a>
<a href="cccc.htm">cccc</a>
<a href="dddd.htm">dddd</a>
<a href="eeee.htm">eeee</a>
<a href="ffff.htm">ffff</a>
</p>
<img src="noimg.jpg" width="200" height="256">
</body>
こうすると、
http://iroiro.matrix.jp/
こんな風にメニューと写真の間に大きく隙間が出来てしまいます。
隙間を無くすにはどうればいいでしょうか?

656 :Name_Not_Found:05/02/25 06:51:25 ID:???
隙間を詰めればいいんじゃね?

657 :Name_Not_Found:05/02/25 07:16:33 ID:???
>>653
標準仕様に準拠していないブラウザでは表示が崩れることがあるという内容を書き添える。

658 :Name_Not_Found:05/02/25 07:18:10 ID:???
>>655
オマイが自分で margin-bottom:50px; こうしてるんだよ。

659 :Name_Not_Found:05/02/25 07:59:21 ID:???
>>658
あー!助かりました!ありがとうございました!

660 :Name_Not_Found:05/02/25 08:02:13 ID:???
>>651 既出。バグ辞典も見ること。

661 :昔の人:05/02/25 08:11:51 ID:???
>>653 
かはいさうだから、教へてあげませう。

フロートの左右マージンが指定値より大きくなる(5.x/6.0)
 http://cssbug.at.infoseek.co.jp/detail/winie/b107.html

これを回避するには、アンダースコア・ハックを使ふがよい。

識別子の先頭にある「_」を無視する(5.x/6.0)
 http://cssbug.at.infoseek.co.jp/detail/winie/b157.html
>この不具合を使用すると、WinIEだけに特定のスタイル指定を適用させることができます。
http://wellstyled.com/css-underscore-hack.html
http://www.unknownplace.org/blosxom/web/140.html
http://hail2u.net/blog/webdesign/use_underscore_in_css_identifier.html
>こんな書き方をするとMozillaやOperaとInternet Explorer 5以降で適用
>されるスタイルを切り分けられるようです。
>#menu {
> position: fixed;
> _position: absolute;
>}
>MozillaやOperaではfixed、Internet Explorer 5以降ではabsoluteが
>適用されるということになりますね。

662 :Name_Not_Found:05/02/25 14:01:09 ID:???
>633
何がそれ以上なの?
マカーって少しでも勝っている部分があると
誇大広告するから信じられん。
KHTML見ている限りは、長短それぞれって感じだけれどなぁ。

663 :Name_Not_Found:05/02/25 14:45:27 ID:rmC+BkMO
質問です。
プルダウン形式の選択メニューで、右のボタン等の色をスクロールバーを変える感じで変える事は出来ないのでしょうか?
初心者質問スレにて回答が出なかった為、こちらで質問させて下さい。よろしくお願いします。

664 :Name_Not_Found:05/02/25 15:31:19 ID:PMO6mTVG
div.top-comment {
font-size:0.85em;
color:#555555;
line-height:1.5em;
letter-spacing:0.1em;
border-top:solid 1px #555555;
border-bottom:solid 1px #555555;
border-right:solid 1px #555555;
border-left:solid 1px #555555;
width:780px;
margin-left:auto;
margin-right:auto;
padding:10px;
}

細い線で囲まれたBOXを横幅780pxで作ったのですが
実際の表示は780pxを超えてしまいます。
paddingの数値はwidthの値を無視してしまうのでしょうか?

IE、Opera共に同じ結果になります。

665 :Name_Not_Found:05/02/25 15:46:13 ID:???
padding:10pxはやめて、マージンで我慢汁

666 :Name_Not_Found:05/02/25 15:52:12 ID:???
>>664
互換モードにしてみれ。
もしくはpaddingとborderの分引く

667 :Name_Not_Found:05/02/25 16:10:28 ID:???
これは
http://adp.daa.jp/archives/000250.html

668 :664:05/02/25 16:15:31 ID:???
書き忘れたのですが線で囲まれたBOXの中に文章を入れる予定です。
その文章と枠線の余白を設定したくpaddingを設定しました。

>>665
marginは既に設定しているのですが中の文章と枠線の間隔の調整として使えるのでしょうか?

>>666
「スタンダードモードで覚えていったほうが良い」と聞きました。
もしかして、その考えは間違いでしょうか?

互換モード以外だとpaddingとborderの分も計算する必要有りということですね。

669 :651:05/02/25 16:37:12 ID:???
ありがとうございました(*´∀`)

670 :Name_Not_Found:05/02/25 16:41:32 ID:???
トップページで
部屋1、
部屋2、
部屋3
のように大きな画像にリンクを貼って
それぞれ別種のコンテンツの入り口にするのは
CSSで作るのには好ましくないのでしょうか?

あと、部屋ごとにstyle1、style2、style3.cssと
別々のスタイルシートを使って背景色や表示方法を変えるのと
ひとつの同じcssファイルで、idやclassによって、背景色などを変えるのと
どっちがよい作り方なのでしょうか?

使い方しだいの気もしますが…

671 :Name_Not_Found:05/02/25 16:49:56 ID:???
一枚絵でできるロールオーバーのやり方を教えてください。
おながいします。

672 :Name_Not_Found:05/02/25 17:15:14 ID:sNrOcbtr
画面の下の中央に数行の文字列を配置するにはどうすればいいですか?

DIV要素をセンタリングするのは >6のQ2を見たのですが
これを一番下に張り付けようと position:absolute; bottom:10; などを入れると
真ん中ではなくなってしまいます。


673 :Name_Not_Found:05/02/25 18:49:52 ID:???
>>671
オーバ前後の絵を上下または左右に並べた一枚絵をつくっておいて、
例えばaだったら、
a:link {
background-image: url(hoge.gif);
background-repeat: no-repeat;
background-position: top left;
}

a:hover {
}

674 :673:05/02/25 18:50:40 ID:???
途中で送信しちゃったすまそ。
a:hover {
background-position: bottom left;
}

とかするです。

675 :Name_Not_Found:05/02/25 21:42:46 ID:PMO6mTVG
<ul>
<li></li>
<ul>
で作ったリストの頭に画像を指定したのですが、上手く上下が整いません。
vertical-align:middleを<ul><li>に試してみるも結果は同じでした。

画像の方が文字のラインより上にいっているのですが、どうやってバランスを整えれば良いのでしょうか?

676 :Name_Not_Found:05/02/25 21:45:53 ID:???
                _,.  -─‐- 、.
                .,ィ´        `ヽ.
              r/´ / ///  i l ヽ ヽ  ヽ.
           | ! l l l ! ! l  l ! l !l ! i   ',
           | ! l l l ! ! l  l l-l‐リトl、li ! l !
           | ! l レl'l丁l  _jリv'_ノヽl l ! l |
           | ! ,ハVi,ノ::! ̄   li::;;::}| l ! l l
\            〉ト! レ{.li:;::i}  ,  ヽ=' | l ! lリ
  \        | !l lハ ゝ'´  r ┐  _l l l jl
   ゝ. _       !l ! l lヽ、._  ヽ'_,. ィ´-l il_レ′
   ヽ,>f !.     ヽ! |_⊥<_,二j   ト、. l'´
    {.!rヽヽ     ヽ!  / /,'  , ' / \
      ヽ._ト ヽ     _/ .i/ i f'ー Y  / ヽ.
       '、 \  /¬ | |TT┬/  /  |
        ヽ  ヽイヽ   l j i i i i ! 、    li

677 :633:05/02/25 22:19:16 ID:???
>>662
Gecko は >>633 に書いた不具合がかなりイタイんですが、Safari (KHTML) は
(僕が)普段気になる不具合が無いので「それ以上」としました。表現がよくなかったですね。
OS X はフォント表示がダントツにイイので印象はよいのです。。

ちなみに僕は Windows メインですよ。 iPod 使ってるけど foobar2000 で管理してますし。
2,3行目は同意しますがw、印象悪いし余計に思います(;´д`) 是々非々でよいかと。

>>675
line-height とか、かなぁ。 場合によっては background-image でも試してみては。

678 :Name_Not_Found:05/02/25 22:27:00 ID:???
>>675
まず、>>1に書いてあるようにあなたがどういう方法で指定したかなどの情報を書かないと、
しっかりした回答は得られません。
もし、list-style-imageを使っているならやめて
http://css.maxdesign.com.au/listamatic/vertical05.htm
このようにbackground-imageを使ってください。

679 :Name_Not_Found:05/02/25 22:30:14 ID:GsqV72CF
ドリームウィーバーを使っています。
修正→ページプロパティー→カテゴリー→リンクで
リンクカラーやロールオーバーなどの色を指定したら
そのページ全部のリンクなどの色が同じになってしまいます。
部分的に指定することは可能なのでしょうか?
もしよろしければ教えてください。

680 :Name_Not_Found:05/02/25 22:47:24 ID:???
CSSで class なり ID を・・・

 あとはググって下さい。

681 :Name_Not_Found:05/02/25 22:53:57 ID:???
>>679
マルチめ

682 :Name_Not_Found:05/02/25 22:55:18 ID:???
あっ 誘導されたのね。 ゴミン

683 :Name_Not_Found:05/02/25 23:02:50 ID:???
>>677-678
こちらの書き込む情報が足りず申し訳ありませんでした。
苦戦しながらもbackground-image(no-repaet)で挑戦しているのですが
オプションとして指定する%がどうしても定まりません。

100%だとアイコンの上部分が削れてしまい80%だと下が削れます。
80〜100%の間を微調整してみたのですが、上下が削れることになり
結果的に上手く表示が出来ません。

画像の大きさを12px正方形から24pxまで試しましたが結果は一緒です。

background:url(../image/icon.gif) no-repeat 5px 80%;
↑のように書きました。

1pxの枠線で囲んだ中に背景色を入れ、その中に文字(リスト)を書いている状態です。
画面中央に表示させリストは左寄りに書いている為、下のような感じです。
width:300px;
margin-left:auto;
margin-right:auto;

上下の位置だけが調整できず悩んでおります。
アドバイスいただけませんでしょうか?


684 :Name_Not_Found:05/02/25 23:11:42 ID:???
お騒がせしました。原因が判明しましたので書き込みます。

<li>要素に行間を空けようとmargin-bottom:0.8em;と書いていたので
そこを削除し<ul>に当てたclassの部分でline-heightで調整したところキレイに表示されました。

また1つ勉強になりました。どうもお騒がせいたしました。

685 :Name_Not_Found:05/02/26 03:32:09 ID:Z9YirJZt
CSSが永久に流行らないこれだけの理由。

・回線が拡大している現在では、CSSで作られたページ容量の
わずかな軽さは利点にならない。
・ブラウザや環境による表示ばらつきの大きさは致命的。
・CSSで作られたページは画一的で面白みがない。
・テーブルやGIFを使ったサイトと比べて、CSSは安っぽい。
・文法自由度が高い分だけ、実現に高いスキルが必要となる。

要するに、CSSで作られたサイトは、デザイナーの自己満足であって、
「売れるサイト」ではない。ゆえに、商業ベースでは必要とされていない。
また、ブラウザごとの表示ばらつきはきわめてリスクが高く、意味がない。

686 :Name_Not_Found:05/02/26 03:48:25 ID:???
>>685
CSSでうまく出来ないからってCSSに八つ当たりするのは寂しいよ。
腕をみがきな!

687 :Name_Not_Found:05/02/26 04:36:30 ID:???
CSSが永久に流行らないのはこれだけの理由。
・文法自由度が高い分だけ、実現に高いスキルが必要となる。

出来ないわからないバカが多すぎるんだ。

688 :Name_Not_Found:05/02/26 04:40:00 ID:???
CSSガ嫌イナ香具師ハ、CSS以外ノ技術ダケデ視覚デザインヲ行ウノカ?
ソレコソ無茶ダロ? 何ンダカンダ文句言ッテル癖シテ少シハCSS使ウダロ?
自身ヤベンダニ技術力ガナイノコトヲCSSニ責任転嫁シテイルダケダロ?
藻前ハCSSニカワル技術ヲ考案シテ、新規ニブラウザヲ開発デキルノカ?
デキナイダロ? タダ、自分ニ出来ルコトヲ精一杯スレバイイ。ソレダケダロ?

689 :Name_Not_Found:05/02/26 04:42:44 ID:???
>>685
> ・回線が拡大している現在では、CSSで作られたページ容量の
> わずかな軽さは利点にならない。
わずかだろうがなんだろうが利点は利点。
無理矢理なかったことのようにする必要性はないよな。

> ・ブラウザや環境による表示ばらつきの大きさは致命的。
ばらつき程度は腕でカバー。
ブラウザや環境で見栄えが変わる程度なら「見れる」だけまだマシ。
テーブルレイアウトとかだったらハンドヘルドじゃ見れない場合だってある、ってことと比べてみろ。

> ・CSSで作られたページは画一的で面白みがない。
画一的なのは腕の悪さ。
デザイン能力がない人のサイトを見てCSSを非難するのはお門違い。

> ・テーブルやGIFを使ったサイトと比べて、CSSは安っぽい。
テーブルやGIFを使ったサイトは安っぽい。
感覚だけで物をいうとこういう意見も通るわけで。

> ・文法自由度が高い分だけ、実現に高いスキルが必要となる。
難しいから出来ないよ、は一理あるな。

> 要するに、CSSで作られたサイトは、デザイナーの自己満足であって、
CSSの利点を理解してないから「自己満足」と思うわけで。

> 「売れるサイト」ではない。ゆえに、商業ベースでは必要とされていない。
クライアントが無知なだけだ。

> また、ブラウザごとの表示ばらつきはきわめてリスクが高く、意味がない。
これは全く腕の悪いCSS使いのサイトしか知らない、としか思えない発言だな。
HTMLの特色ってわかるのかな。

690 :Name_Not_Found:05/02/26 05:36:51 ID:???
689は今日の釣果一番だな(´ー`)y-~~

691 :Name_Not_Found:05/02/26 05:40:36 ID:???
つられたっていいじゃないか 人間だもの

692 :Name_Not_Found:05/02/26 05:42:10 ID:???
GIFを使ったサイトってなに?

693 :Name_Not_Found:05/02/26 05:50:05 ID:???
GIFを使ったサイトじゃない?

694 :Name_Not_Found:05/02/26 05:53:17 ID:???
>>690
「チャック開いてるよ」
「開けてるの」
くらいかっこ悪いな。

695 :Name_Not_Found:05/02/26 05:56:10 ID:???
確かに企業サイトだとテーブルレイアウトかAllFlashしかみねーな。
HTML版も用意して・・。

696 :Name_Not_Found:05/02/26 05:57:24 ID:???
>>695
企業が悪いんじゃない。
製作会社が悪いんじゃない。
製作会社に頼んだ、企業の偉いさんが悪いんだ。

697 :Name_Not_Found:05/02/26 06:05:52 ID:???
>>695
数年前はそうだったから未だにお決まりの文句でそういうけど……
違うな。

698 :696:05/02/26 06:31:06 ID:???
>>697
オレ?


699 :Name_Not_Found:05/02/26 09:34:01 ID:???
「プログラミングは簡単だ、そんなくだらねえことに夢中になる時間はないよ。」
という言葉は、昔から、医学科や数学科をはじめ、理工系の学生が時々口にする。
でも、実際には、すんなりと呑み込めない者がほとんどで、商用レベルの
コードを書ける者となると極めて少ない。現実とはそういうもの。
C も Java も一気に流行したが、これらが簡単だからではない。
教育制度が整っていて、教育される側もする側も、決まりきったことを
こなしていけば、必要とされる最低レベルをクリアできるようになっているからだ。
もちろん、資格という目標もある。古いプログラマで資格を持たない者は少なくないが、
そんな彼等でさえ、応募者を振り分ける時、機械的に有資格者を選んでいる。
だから、今時の入門者は、資格取得を入門レベル卒業のハードルにしている。

CSS は簡単だ。これは脳に障害でも無い限り、誰もが感じる事実だろう。
しかし、何事もなめてはいけない。教育資格制度が無いに等しいのは大問題だ。
仮に、教育資格制度が整って、制作者の CSS スキルの平均が飛躍的に向上したら、
これに関わる制作コストが桁違いに下がる。現状の印刷屋主導の制作業界内部の
パワーバランスが大きく変化するに違いない。権力争いは、詰まる所、生存競争である。
既に8年以上「画期的な」ままで放置されている CSS によるワークフローを
業界レベルで実際に運用することは、命の取り合いをする覚悟無しには取り組めない
大変重要な仕事である。

700 :Name_Not_Found:05/02/26 09:52:45 ID:???
>>699
> C も Java も一気に流行したが、これらが簡単だからではない。
簡単だからだよ。

> CSS は簡単だ。これは脳に障害でも無い限り、誰もが感じる事実だろう。
そんなことない。

701 :Name_Not_Found:05/02/26 10:12:04 ID:???
すみません672なんですが、どなたかアドバイス頂けないでしょうか

702 :Name_Not_Found:05/02/26 10:16:51 ID:???
IEでvertical-align:super;すると上の行との間に無駄な空間が出来るのは何とかできない?

703 :Name_Not_Found:05/02/26 11:03:18 ID:???
>>701
絶対配置した要素の中に子要素を入れ子にして、その子要素を中央寄せにすればいいだけ。
頭使ってよ。

704 :Name_Not_Found:05/02/26 11:04:15 ID:???
>>702 始めからline-heightを高く取って置くとか。

705 :Name_Not_Found:05/02/26 12:03:39 ID:???
H1,H2,H3,P,OL,UL,DLと構造的に並べろ、そうすれば楽になる、っつーのがcssでしょ。

706 :Name_Not_Found:05/02/26 12:26:07 ID:???
そのとおり。CSSはデザインの手段であって
目的ではないのだ

707 :Name_Not_Found:05/02/26 12:28:22 ID:???
のだ

708 :Name_Not_Found:05/02/26 13:33:56 ID:???
body {
text-align: center;
margin: 0px;
}

div#main {
width: 750px;
height: 100%;
margin: 0px auto;
}

<body>
<div id="main">
hoge
</div>
</body>

これでブロックをセンタリングしたいんですが、
IE6では意図通り「| |」となるんですが、NN7.1では「□」みたいに
上と下に余白ができてしまいます。
marginとかpaddingとか色々いじってみたんですが、どうにも変化がないので、
何処がいけないか教えていただけますでしょうか?

709 :Name_Not_Found:05/02/26 13:35:08 ID:???
body {
text-align: center;
margin: 0px;

padding: 0;

}


710 :Name_Not_Found:05/02/26 13:55:21 ID:???
CSSクックブック ― Webデザインのための活用テクニック集
http://www.oreilly.co.jp/books/4873112192/

俺の代わりに誰か買って

711 :Name_Not_Found:05/02/26 13:59:46 ID:???
*{
margin: 0;
padding: 0;
}

712 :Name_Not_Found:05/02/26 14:06:23 ID:???
>703
↓こういうことじゃないんでしょうか。

<div style="position:absolute; bottom:10;">
<div style="text-align:center;">
<div style="width:400; margin-left:auto; margin-right:auto;">
ここに5行ぐらいの文字列
</div></div></div>

文字列の中ではセンタリングされてますが
ブロック自体は左端によってしまってます


713 :708:05/02/26 14:18:37 ID:???
>>709
それは無理でした。

>>711
それも上のマージンが消えても、heightが100%にならないんですよ。

別のページだったら同じやり方で問題無かったんですけどねぇ。
コピペしてidをあわせてもやっぱり駄目・・・。
わけわかんねぇや。

714 :Name_Not_Found:05/02/26 14:38:33 ID:???
>>708
あれだ、divの直下の要素のマージンとかの問題じゃないか?

715 :708:05/02/26 14:43:20 ID:???
>>708
マージンを全部0pxにしても変わらなかったです。
っていうか100%って書いてるのに、内容によってheightが変わってるんですよね。
!importantとかも意味なしでした。

716 :Name_Not_Found:05/02/26 14:49:49 ID:???
親ボックスの高さは全部100%にしてるか?

717 :708:05/02/26 14:52:02 ID:???
>>716
div#mainってのがbody直下のボックスなんで、それは大丈夫だと思います。

718 :Name_Not_Found:05/02/26 15:02:39 ID:???
NNってGeckoエンジンだよね?
手元のFirefoxで見てみたけど、
別に余白があいてるようなことはないみたいだけど…
よかったらもうちっと詳しいソースくれるかい

719 :708:05/02/26 15:09:24 ID:???
>>718
ちょっとコンテの消して、ソースだけ上げてみるんで、少しお待ち下さい。

720 :708:05/02/26 15:14:54 ID:???
http://www.hcn.zaq.ne.jp/la_fouine34/smp.html

http://www.hcn.zaq.ne.jp/la_fouine34/css/default.css
http://www.hcn.zaq.ne.jp/la_fouine34/css/index.css

です。
お願いします。

721 :Name_Not_Found:05/02/26 16:11:03 ID:???
あーこれはだな、XML宣言がうんぬんとかだが
説明するのも面倒だし、いろいろ複雑なんで


BODYの背景画像でやれ!
ってこった(;_;)

722 :708:05/02/26 16:26:29 ID:???
>>721
あぁ、なるほど、DOCTYPEを消してみたら上手いこといきました。
かといってそうするわけにもいかないですしね・・・。
ありがとうございます。

ちなみに、この場合はNNの解釈がおかしいんですか?

723 :Name_Not_Found:05/02/26 16:30:28 ID:???
>>717
bodyの高さも100%に・・・

724 :Name_Not_Found:05/02/26 16:30:46 ID:???
ちょっとそこまでは・・・(´・ω・`)

725 :Name_Not_Found:05/02/26 17:20:01 ID:p3dDsB14
タグのついたファイルから、
GUIでウェブページのデザインして、
スタイルシートを出力してくれるソフトってあります??

つまり、HTMLの中に、デザインを埋め込まないで、
完全にスタイルシートを使うようなソフトってないですか??

726 :Name_Not_Found:05/02/26 17:25:09 ID:???
>>725
ソフトがやるんじゃなくて。使い手がそう使えばどんなソフトでも出来るよ。
ところで、そのスタイルシートは誰が作るのかね?

727 :Name_Not_Found:05/02/26 17:50:12 ID:p3dDsB14
>>726
自分で作るつもりです。
CGI習って、HTMLの出力はできるようになったんですけど、
デザインを変えようと思うと大変なので、

divタグのclassとかidとかでデータを分類したものを出力して、
アプリケーションでスタイルシートだけ書けないかなぁと思いました。

じゃあ、GoLiveとか使ってみようかな。

728 :Name_Not_Found:05/02/26 18:17:37 ID:eeKublzN
<head>
span{ font-size:35pt;font-weight:bold;color:navy;position:absolute;filter:shadow(color=#ffff00,direction=125)}
</head>
<body>
<table border=1>
<tr><td width="220" height="50" align="left"><span>何を言う</span></td><td>早見優</td></tr>
<tr><td>上裕</td><td>北天裕</td></tr>
</table>
</body>

すいません、上記のようにCSSでFilterかけてtable内に表示させようとしたのですが「何を言う」が
枠からはみ出してどうにもなりません。
何か間違ってるのでしょうか?


729 :Name_Not_Found:05/02/26 18:39:09 ID:???
例 html{border-style:solid 1em #000;}
と、指定してみたところ、IE6.0で動作しましたが
htmlタグに対して指定するのは推奨されることなんでしょうか?

730 :Name_Not_Found:05/02/26 18:51:17 ID:???
>>729
他のブラウザでは違うところにborderが付いてるはず。
とはいえその辺は仕様でも未定義だったり曖昧なので
IE6以外はどうでもいい!と思ってるなら別に良いのでは?

731 :Name_Not_Found:05/02/26 18:51:28 ID:???
>728
position

732 :Name_Not_Found:05/02/26 19:32:50 ID:???
>>731
すいませんがもう少し具体的に教えてはいただけないでしょうか?


733 :Name_Not_Found:05/02/26 19:35:37 ID:???
北天裕は北天佑のまちがいだとおもいます。

734 :Name_Not_Found:05/02/26 19:40:29 ID:???
>>733
そうでしたか・・ご指摘ありがあとうございます。

735 :Name_Not_Found:05/02/26 20:00:06 ID:???
>>730
なるほど、違う所に付くんですね。
レイアウト的にあっても無くてもどちらでも良いのでやめておきます。
有難う御座いました。

736 :Name_Not_Found:05/02/26 20:15:23 ID:???
>>722
せっかく>>716が指摘してくれるのに勝手に勘違いしちゃって……
heightの初期値は100%じゃなくてautoだ。明示的に100%としない限り100%にはならない。
NNの解釈が正しく、IEが間違っているんだよ。

height: n%;の正しい仕様 - Web標準普及プロジェクト
ttp://www.mozilla.gr.jp/standards/webtips/webtips0032.html

ってかこれFAQに載せたほうがよくねえか?
結構勘違いしやすそうなポイントだと思うし。

737 :Name_Not_Found:05/02/26 20:35:43 ID:???
>>712
widthの初期値はautoだから絶対配置にすると中の幅に合わせて縮んじゃうのよ。
というわけで一番外側のdivの幅を100%にするとどうなる?
ついでにtext-align: center;も一番外側のdivに指定すれば
無意味なdivが一つ減らせるんじゃない?

それから>>672なら672と名乗れ。
(専用ブラウザ使ってるとそのほうが元の質問を参照しやすい)
あと数字に単位(px)をつけろ。

738 :716:05/02/26 20:55:24 ID:???
>>736
ありがとう。解ってくれたのは君だけ。


739 :Name_Not_Found:05/02/26 21:13:59 ID:???
>>728
position:absoluteは何のためにつけてるの? その意味わかってる?

740 :728:05/02/26 21:23:57 ID:???
>>739
shadowのfontに対する位置指定じゃないんでしょうか?

741 :Name_Not_Found:05/02/26 22:01:58 ID:???
absolute

742 :728:05/02/26 22:57:02 ID:???
やっぱりわからないです。tableにフィルター文字入れるの諦めます。。。

743 :Name_Not_Found:05/02/26 23:03:20 ID:???
>>740
・・・。
position:absolute;消してdisplay:inline-block;とでもしとけ。

hasLayout==trueにしないとfilterはかからない。
ので、position:absoluteが指定されていたのだろう。


744 :728:05/02/26 23:53:44 ID:???
>>743
ああ、神様ありがとうございます。
タグ辞典読んでも書いてなく、ググってもわからなかったので助かりました。
感謝、感謝です。


745 :708:05/02/26 23:55:37 ID:???
>>736
>>716
やっと気づきました・・・。
<HTML>の存在を完全に忘れてました。

ありがとうございます。

746 :Name_Not_Found:05/02/27 06:42:50 ID:yfd1S0kE
CSSが凋落するこれだけの理由。

・実はなくても困らない。
・同上
・同上
・・
・・

747 :Name_Not_Found:05/02/27 07:34:13 ID:???
5〜6ページのおまいじゃそうだろうなぁー

748 :Name_Not_Found:05/02/27 07:42:48 ID:???
だからなんで釣られるの

749 :Name_Not_Found:05/02/27 07:44:13 ID:???
もなー

750 :Name_Not_Found:05/02/27 10:24:04 ID:???
最近かなりレベルが低くなったな
これも「ゆとり教育」のなせる技かな?(w

751 :Name_Not_Found:05/02/27 10:33:26 ID:???
>>748
ストリクタソの俺としては、釣られるのが流儀だと思っていたんだが違うのか?
ネタにマジレスで完膚なきまで叩いて自己満足、が真骨頂だと思うぞ。

752 :Name_Not_Found:05/02/27 13:28:54 ID:???
クリトリスンなあたいは相手に逝かしてもらうのが好きなの。

753 : ↑ :05/02/27 13:36:10 ID:???
すんごくレベルが低いと思う

754 :Name_Not_Found:05/02/27 17:52:21 ID:???
ちょと質問よろしいでしょうか?

<dl>
<dt><img src="xxx.jpg" width="10" height="10"></dt>
<dd>この絵はxxxxxxxxxxxxxxxxxです</dd>
<dt><img src="xxx.jpg" width="10" height="10"></dt>
<dd>この絵はxxxxxxxxxxxxxxxxxです</dd>
</dl>

<table>
<tr><td><img src="xxx.jpg" width="10" height="10"></td><td>この絵はxxxxxxxxxxxxxxxxxです。</td></tr>
<tr><td><img src="xxx.jpg" width="10" height="10"></td><td>この絵はxxxxxxxxxxxxxxxxxです。</td></tr>
</tr>
</table>

上の<dl>で作った物を下の<table>と同じように再現するには
cssでどう記述すればよいか教えてください。

755 :Name_Not_Found:05/02/27 18:10:33 ID:???
dt {
clear: left;
float: left;
width: 10px;
display: inline;
}

756 :Name_Not_Found:05/02/27 18:34:22 ID:???
>>755
なるほど。それを参考にいろいろ試してみるっす。

757 :Name_Not_Found:05/02/27 19:11:09 ID:???
ddが空要素だとfirefoxでずれまくるけどな

758 :Name_Not_Found:05/02/27 20:11:55 ID:???
いつの間にinlineがfloatされるようになった?

759 :Name_Not_Found:05/02/27 21:14:01 ID:???
この場合、float: left;を指定した時点でdisplayプロパティの値が
自動的にblockに設定されるからinlineがフロートされるわけではない。
というわけで>>755のdisplayの指定は無意味だな。

760 :初心者:05/02/27 21:45:53 ID:QBa8Y4aj
Googleのニュースサイトみたいな感じのレイアウトって、floatだけだとできないですか??
2段目(社会と国際の段)とか3段目(経済と政治の段)の上を揃えたり、左を揃えたりするには
floatじゃなくて、positionじゃないとできないですか?

761 :760:05/02/27 21:47:32 ID:QBa8Y4aj
あと、もし良ければ、大体どういう感じでレイアウトしたらいいか
教えてください。お願いします。

↓Googleのニュースサイト
http://news.google.co.jp/

762 :Name_Not_Found:05/02/27 21:48:09 ID:???
いや できるよ

763 :Name_Not_Found:05/02/27 22:02:53 ID:???
div {
border: 1px solid red;
margin: 5px; }
body {
margin: 5px;
padding: 0; }
.left {
float: left;
width: 48%;
height: 300px; }
.right {
float: right;
width: 48%;
height: 200px; }
.clear {
clear: all; }

<div class="left">a</div>
<div class="right">a</div>
<div class="clear"></div>
<div class="left">a</div>
<div class="right">a</div>
<div class="clear"></div>
  :
  :
  :

空のDIV入れれば上が揃うけど
ここの住人が黙っちゃいない

764 :Name_Not_Found:05/02/27 22:08:20 ID:???
>>760
入れ子を使えば余裕だろ

765 :Name_Not_Found:05/02/27 22:27:30 ID:???
Mozillaなら入れ子を使わなくても左側のボックスにclear: bothを
指定すればいいんだけどIEにはこのバグがあるからな……
ttp://cssbug.at.infoseek.co.jp/detail/winie/b093.html
まあ>>764の言うとおり横に並ぶ二つの段をひとつのボックスで囲っちゃえば簡単だけど。
それから>>763、clear: allじゃなくてclear: bothね。

766 :763:05/02/27 22:46:06 ID:???
sorry

767 :Name_Not_Found:05/02/27 23:45:57 ID:???
floatを用いて画像に対してテキストの回りこみをさせていますが
IE6でテキストが消えるバグの回避方法をご教授ください。

768 :Name_Not_Found:05/02/28 02:59:59 ID:???
もうちょっと詳しく言ってくれないとわからんな。
これか? ttp://cssbug.at.infoseek.co.jp/detail/winie/b032.html

769 :Name_Not_Found:05/02/28 08:01:04 ID:???
ページを縦に3つ区切って、左右を幅固定(200px)、
中央をウィンドウに合わせて伸び縮みさせたいんですが、
ウィンドウを100pxぐらいに縮めると、left,center,rightのボックスが重なってしまいます。
<div id="left">左</div>
<div id="center">センター
<div id="right">右</div>
</div>



div#left {
height: 200px;
width:200px;
margin: 0px 0 0 0px;
border: 1px solid #4682B4;
position:absolute; top:auto; right:auto; bottom:auto; left:0px;
}
div#center {
height: 250px;
margin-left: 200px;
margin-right: 200px;
border: 1px solid #666666;
}
div#right {
width: 200px;
height: 200px;
border: 1px solid #666666;
position:absolute; top:0; right: 0px; bottom:auto; left:auto;
}


770 :769:05/02/28 08:04:33 ID:???
重ならないようにするには、どうすれば良いのでようか?
rightをフロート(right)で設定した場合も
rightの上にcenterの内容がきてしまいます。


771 :Name_Not_Found:05/02/28 08:33:38 ID:???
ウインドウ小さすぎ

772 :Name_Not_Found:05/02/28 09:22:40 ID:jSco2/4W
すいません、 link rel なんですが、 http:// 経由でアクセスできるところに
置かないといけないんでしょうか?
public_html と同じディレクトリに css を掘ってそこに入れたのにアクセス
させるようにしたら css が適用されず、アクセスログを見ると 404 エラーに
なっています。

773 :Name_Not_Found:05/02/28 09:39:48 ID:???
>public_html と同じディレクトリ
 これじゃまずいだろ。

 public_htmlの下だよ。

774 :Name_Not_Found:05/02/28 10:10:16 ID:???
>>772
当たり前だ。
http://から書いてなくてもHTTPでサーバにアクセスするんだよ。


775 :769:05/02/28 13:10:07 ID:???
left(200px),center(残りの横幅),right(200px)
をcssを使って再現したいんです・・・
ウィンドウを縮めてもrightがcenterの下に潜り込まなないレイアウトがいいです。
ポジション、フロートを使って色々試したのですが、自分では無理でした;
誰かお願いします。。。教えてください

776 :Name_Not_Found:05/02/28 13:16:07 ID:???
横幅640px程度のウインドウサイズで見れりゃそれでいいじゃん…
逆にそれ以上のサイズを要求するサイトが意外と多くてウザイ。

777 :Name_Not_Found:05/02/28 13:19:42 ID:???
640pxとは言わないけど、お気に入り出したままだと見れないサイトはちょとうざい

778 :Name_Not_Found:05/02/28 14:19:36 ID:???
min-width

779 :Name_Not_Found:05/02/28 14:29:04 ID:???
>>775
>>500-531


780 :769:05/02/28 14:43:05 ID:???
>>779
ウインドウを縮めると、かなり崩れます・・・

781 :Name_Not_Found:05/02/28 14:56:43 ID:???
* { margin:0;padding:0; }
.parent {
position:relative;
}
.left {
width: 200px;
}
.centerpad {
position:absolute; top:0; left:200px;
}
.center {
position:absolute; top:0;
padding-right: 200px;
}
.rightpad {
position:absolute; top:0; left:600px;
}
.rightpar {
width:100%;
position:relative;
}
.right {
position:absolute; top:0; right:0;
width: 200px;
}
そもそも縮めたときにどういう動作をさせたいのか、それが本当に必要な要件なのかわからん

782 :Name_Not_Found:05/02/28 15:24:25 ID:???
>>769
#container { min-width: 600px;position: relative;}
div#left { height: 200px;width:200px;margin: 0;border: 1px solid #4682B4;float: left;}
div#center { height: 250px;margin: 0 202px;border: 1px solid #666666;}
div#right { width: 200px;height: 200px;position: absolute;top: 0;right: 0;border: 1px solid #666666;}

<div id="container">
<div id="left">左</div>
<div id="center">センター</div>
<div id="right">右</div>
</div>

div#center 最小限度で width: 200px;にしたいという意図
IEでは min-widht は解釈しないので上記では意味が無い
<div id="container">の width を固定する、または%で割り振る
もしくはIEを無視する

783 :769:05/02/28 15:36:04 ID:???
縮めた時に、ボックス同士が重ならず横スクロールバーを出したいんです。
>>782
min-widht のこと知らないので、調べてみたいと思います。
>>781
 今からやってみようと思います



ありがとうございます。

784 :769:05/02/28 15:45:06 ID:???
>>781
rightが下に潜り込んでしまいました・・・・・・

785 :Name_Not_Found:05/02/28 16:00:27 ID:???
重なるとかいうならまだしもfloatなしで下に回るって一体どんなコード書いたんだよ。
まじめにやれまじめに

786 :Name_Not_Found:05/02/28 18:03:49 ID:???
liの・を消したいのですが、どうすればいいのですか?

787 :Name_Not_Found:05/02/28 19:24:05 ID:???
>>786
list-style-type: none;

788 :772:05/02/28 19:52:26 ID:???
>>773-774
レスありがとうございました。
スクリプトだとpublic_htmlディレクトリより上にもアクセスできるので、
混乱してました。


789 :Name_Not_Found:05/02/28 22:08:36 ID:???
初心者的な書き込みで申し訳無いのですが教えて頂けると嬉しいです。
テーブルの中(H480 W580)に背景画像(H480 W280)を入れその画像
を右寄りにし固定し、その固定した背景画像の上にテーブルを入れ
テキストを入れたのですが(テキストもCSSで文字の大きさなど固定)
winでみたらきちんとデザインも崩れずきちんと見れるのですがmacだと
固定している背景画像がスクロールを動かすたびに動いて崩れてしまいます。
この場合きちんとmacでもデザインが崩れないようにするにはどうしたらいいのか
教えてください。よろしくお願いします。






790 :Name_Not_Found:05/02/28 22:12:49 ID:???
初心者的な書き込みで申し訳無いのですが教えて頂けると嬉しいです。
テーブルの中(H480 W580)に背景画像(H480 W280)を入れその画像
を右寄りにし固定し、その固定した背景画像の上にテーブルを入れ
テキストを入れたのですが(テキストもCSSで文字の大きさなど固定)
winでみたらきちんとデザインも崩れずきちんと見れるのですがmacだと
固定している背景画像がスクロールを動かすたびに動いて崩れてしまいます。
この場合きちんとmacでもデザインが崩れないようにするにはどうしたらいいのか
教えてください。よろしくお願いします。

























791 :Name_Not_Found:05/02/28 22:15:48 ID:???
>>790
たぶん原因はそれ以外のところだけど、
そこに書いてある文章だけ読むと、tableの存在理由がわからんぞ?

792 :Name_Not_Found:05/02/28 22:18:36 ID:???
winでmacでと言ってるけど、ブラウザはなんなんだ。たぶんIEだろうけど。

793 :Name_Not_Found:05/02/28 22:21:01 ID:???
>>789,790
きちんとソースを晒して下さい。

794 :Name_Not_Found:05/02/28 22:26:24 ID:???
body以外でbackground-attachment:fixedとかやってんだろ。
macIEだけじゃなくてfirefoxとかoperaでも同じことになってるよ
ならないWinIEが悪い。

795 :Name_Not_Found:05/03/01 00:37:45 ID:???
余計な改行やめれ

796 :Name_Not_Found:05/03/01 02:22:32 ID:???
WINXPでホームページをスタイルシートで作ってるんですが、なぜかこの様な文章が出てくるんですが・・・。

"セキュリティの保護のため、コンピュータにアクセスできるアクティブ コンテンツは表示されないよう、
Internet Explorer で制限されています。オプションを表示するには、ここをクリックしてください..."

何が原因なんでしょうか?

797 :Name_Not_Found:05/03/01 02:29:13 ID:???
js

798 :Name_Not_Found:05/03/01 09:37:56 ID:???
カウンタとか呼び出すのに使ってるんじゃね

799 :Name_Not_Found:05/03/01 10:45:09 ID:???
>>794
background-attachment:fixed の場合はブロック要素が起点ではない
それぐらい観察して解らない?

800 :Name_Not_Found:05/03/01 11:32:04 ID:???
うそ800

801 :Name_Not_Found:05/03/01 12:26:22 ID:???
ってかmacは無視に限る
なぜかって? macはもうすぐで絶滅するよ

802 :Name_Not_Found:05/03/01 14:03:38 ID:???
>>801
だからきちんと説明、ソースを晒して下さい

803 :Name_Not_Found:05/03/01 15:39:22 ID:???
説明? 俺の勘だよ

804 :Name_Not_Found:05/03/01 16:06:22 ID:???
>>801
ほぼ同意だけどimac miniはかなり人気があるね……
アレさえなけりゃあな……

805 :Name_Not_Found:05/03/01 17:43:03 ID:???
まあそんな製品ないけどね

806 :Name_Not_Found:05/03/01 18:01:17 ID:???
おれは、すべてが同一規格に近づくってのが嫌いだから
リンゴ箱にはがんばって欲しいなぁ

ところで非マックPCって何箱っていえばいいんだろう

807 :Name_Not_Found:05/03/01 18:05:31 ID:???
はい次どぞ〜

808 :Name_Not_Found:05/03/01 18:08:54 ID:???
質問しようと思ったけど、解決しちゃった
テヘ

809 :Name_Not_Found:05/03/01 18:17:14 ID:???
アクセシビリティ ユーザビリティはどう違うのですか?

810 :Name_Not_Found:05/03/01 18:18:06 ID:???
辞書

811 :Name_Not_Found:05/03/01 18:20:25 ID:???
辞書で調べたけど、Webサイトの使い易さしかでてこなかったけど・・・


812 :Name_Not_Found:05/03/01 18:22:26 ID:???
accessibility
http://dictionary.goo.ne.jp/search.php?MT=accessibility&kind=ej

usability
http://dictionary.goo.ne.jp/search.php?MT=usability&kind=ej&mode=0

813 :Name_Not_Found:05/03/01 18:27:11 ID:???
accessibility
 障害や、老人な人が使いやすい
usability
 どんな人でも普通に使いやすい

ってことですか?

814 :Name_Not_Found:05/03/01 18:28:47 ID:???
どうしてそういう解釈になるのか理解に苦しみます。

815 :Name_Not_Found:05/03/01 18:43:02 ID:???
例えば病院のエントランスが階段だけだと、車椅子の人は入りづらかろう。
でも、階段の横にスロープを設置すれば入りやすくなる。
つーことでよい? > アクセシビリティ

816 :Name_Not_Found:05/03/01 18:58:51 ID:???
>>809
スレ違い気味だぜ。
アクセシビリティスレかユーザビリティスレの最初の方見てみ。

817 :Name_Not_Found:05/03/01 19:30:52 ID:???
accessibility
音声ブラウザへの対応
usability
文字が大きさ,横幅の大きさ,操作性

みたいなことでいいですか?
ほとんどはusabilityのことかな・・・・・・


818 :Name_Not_Found:05/03/01 19:35:21 ID:???
おまえ、日本語変だぞ

819 :Name_Not_Found:05/03/01 19:56:09 ID:???
誤字だろ

820 :Name_Not_Found:05/03/01 20:04:01 ID:???
NN4.xで見れねえサイト作って御託並べてんじゃねえよ

821 :Name_Not_Found:05/03/01 20:06:05 ID:???
あくせしびりちぃ
 直訳すると 接近のしやすさ
 つまり、そのサイトのもつ、万人に対しての敷居の低さを表す

 あくせさびりちぃのいいサイト(日本語としておかしいが)
=目の遠い人や手が不自由な人でも閲覧しやすい

ゆぅざびりちぃ
 操作性のことね。使い勝手が良ければ、ゆぅざびりちぃが高いといえる

両者はくっきりと分かれているわけじゃなくて、
重なり合ってる部分も多い。

もちろん、接近のしやすさが使い勝手の良さにつながることもあれば、
相反することもある、と。

822 :Name_Not_Found:05/03/01 20:18:11 ID:???
だぁらスレ違いだって

823 :Name_Not_Found:05/03/01 20:25:40 ID:???
>>821
よく解りました。ありがとうございました。

824 :Name_Not_Found:05/03/01 20:39:03 ID:???
憶測だけでものをいっていればすれ違いが延々と続くが
明快な答えがあればそれで終わるかなぁ、と。マジ(゚ε゚)スマンネ

825 :Name_Not_Found:05/03/01 20:40:51 ID:???
テーブル内にdivを使って文字設定をすると
IEでは反映されるのにモジラ系では反映されません。
仕様でつか?

826 :Name_Not_Found:05/03/01 20:42:17 ID:???
いいえ、あんたが大将です。

827 :Name_Not_Found:05/03/01 20:57:23 ID:???
全体に適応させる
a:link a:visited a:hover a:active
を作ったのですが
一部分だけ上記とは見た目を変えるようにしたい
なので
#a a:link a:visited a:hover a:active
を別で作りました
が、IEでは反映されるけどモジラでは反映されず

モジラも反映させるためにはどうすればいいですか?

828 :Name_Not_Found:05/03/01 21:04:30 ID:???
>>827
#a:link #a:visited #a:hover #a:active

829 :Name_Not_Found:05/03/01 21:24:08 ID:???
a#a:link a#a:visited ...

じゃね?

830 :Name_Not_Found:05/03/01 21:30:43 ID:???
まぎらわしいID属性値つけるなよ

831 :827:05/03/02 09:28:38 ID:???
申し訳ありません
書き直します。
.page { color: #000; font-size: 10px }
.page a, .page a:link, .page a:visited, { color: #039; text-decoration: underline }
.page a:focus, .page a:hover, .page a:active { color: #c00; text-decoration: underline }

とスタイルシートを設定して
テーブル内に
<td><div class="page"><a href="../index.html">ホーム</a> | <a href="index2.html">あ</a> | <a href="index3.html">い</a></div></td>
を記述しました。

こうするとIEは.page a,・・・が適応されるのですが
モジラでは別で設定したa:link a:visited a:hover a:active {・・・}
が適応されてしまいます。
モジラで.page a,・・・を適応させるにはどうすればいいですか?

832 :Name_Not_Found:05/03/02 10:14:06 ID:???
セレクタの詳細度?

833 :Name_Not_Found:05/03/02 10:31:49 ID:???
floatを使い三段組みをしようかと思ったのですが、
どうもうまくいきません。

<div id="TIT">
<div class="menu">
<h2>タイトル1</h2>
<h2>タイトル1</h2>
<h2>タイトル1</h2>
</div>
</div>

#TIT {
text-align:center;
}
.MENU {
margin-left:auto;
margin-right:auto;
text-align:justify;
border:red;
}
#TIT h2{
float:left;
margin-left:auto;
margin-right:auto;
text-align:justify;
}

どうしてなんでしょうか???
CSSマスターな方宜しくお願い致します。

834 :Name_Not_Found:05/03/02 10:43:35 ID:???
>>833
IE6とFirefoxで確認した分にはちゃんと段組出来てるけど。
どううまくいかないか書きなさい。

835 :Name_Not_Found:05/03/02 11:55:07 ID:???
説明不足ですみません・・・

#TIT {
width:90%;
text-align:center;
border:1px solid #FF0000;padding: 10px;
}
.menu {
margin-left:auto;
margin-right:auto;
text-align:justify;
border:1px solid #00FF00;padding: 10px;
}
#TIT h2{
float:left;
margin-left:auto;
margin-right:auto;
text-align:justify;
border:1px solid #0000FF;padding: 10px;
}

だとわかりやすいかと思うのですが、
H2をまとめたmenuという名前の要素全体をセンタリングしたいのですが、
どうしてもTITの真ん中にきてくれません。

考え方自体違うのでしょうか?

836 :Name_Not_Found:05/03/02 12:04:43 ID:???
body{
text-align:center;
}

837 :Name_Not_Found:05/03/02 12:12:18 ID:???
>>831
× .page a, .page a:link, .page a:visited, { color: #039; text-decoration: underline }
○ .page a, .page a:link, .page a:visited { color: #039; text-decoration: underline }

838 :Name_Not_Found:05/03/02 12:15:12 ID:???
>>835 >>7
.menu に widthを指定する

839 :Name_Not_Found:05/03/02 13:38:51 ID:m9gzhqte
<!-- つけるかつけないかいっつも迷う

840 :Name_Not_Found:05/03/02 13:44:26 ID:???
ゴムをか?

841 :Name_Not_Found:05/03/02 13:49:29 ID:???
外田氏は避妊にはならんぞ

842 :Name_Not_Found:05/03/02 13:50:09 ID:???
悪いことは言わん、ゴムはつけとけ。

843 :Name_Not_Found:05/03/02 15:17:38 ID:???
>838

menuのwidthがわかっていれば問題ないが
動的の場合は?

Hタグ使って、アクセシビリティ&SEO対策しなくてはならんので
widthはどうしても固定できない・・・
TITの幅は90%として、,menuの幅も90%にしても意味無いだろうし・・・

結局だれもレスが無いと言うことは無理なのかぁ?


844 :Name_Not_Found:05/03/02 15:51:37 ID:UsVwmojt
<div id="body">

<div id="sub">
<p>abc</p>
</div>

<div id="main">
<p>def</p>
</div>

</div>

#body{
border:10px solid #000000;
}

#sub{
float:left;
}

#main{
float:left;
}

とやると、WinIE6とOperaでは#bodyのボーダー内に #sub と #main のBOXが入るのに
WinFirefoxだと #body のボーダーをはみ出して表示してしまいます。
どうすれば良いのでしょうか?

845 :Name_Not_Found:05/03/02 16:08:10 ID:???
>>844
標準モード?

846 :Name_Not_Found:05/03/02 16:14:11 ID:???
>>837
ありがとうございます・・・
それで解決しました・・・

847 :Name_Not_Found:05/03/02 16:14:17 ID:UsVwmojt
標準モードです。(たぶん)
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
ヘッドはこんな感じ。

<div id="body">

<div id="sub">
<p>abc</p>
</div>

<div id="main">
<p>def</p>
</div>

<!-- ↓追加 -->
<div style="clear:left;">
<p>abc</p>
</div>

</div>

と、追加したら出来るのですが、追加した要素はいらないし…。

848 :Name_Not_Found:05/03/02 16:29:09 ID:???
>>847
MSIEは一行目にドキュメントタイプを書かないと、うんこモードになっちゃうよ。
って、Mozの話か。すまそ。

849 :Name_Not_Found:05/03/02 17:07:31 ID:ZVhkPcNi
#suraimu1{margin:0px}

<form action="metaruking" name="kousyou" class="suraimu1">
かくかくしかじか
かくかくしかじか
かくかくしかじか
</form>

こんな感じで上のformのマージンは消えたんだけど、
下側にあるformのマージンが消せないのです。
</form class="suraimu1">にできるわけもないし。
どうすればいいんでしょうか。

850 :Name_Not_Found:05/03/02 18:58:47 ID:???
>>847
フロートのFAQも見ずに質問するなかれ。>>7へ逝け。
>これに当て嵌まらなかったら「浮動要素の高さも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

>>849
●OSやブラウザの種類とバージョンについては必ず明記してください。
あと、それだけでは再現しない。他のソースも出しなさい。

851 :Name_Not_Found:05/03/02 19:11:12 ID:???
>>843
無意味な text-align:justify; はよせ。
#TIT h2 {text-align:center;} で、いいだろ。

852 :Name_Not_Found:05/03/02 19:28:28 ID:???
はあ?

853 :Name_Not_Found:05/03/02 19:31:09 ID:???
ははあ。

854 :Name_Not_Found:05/03/02 19:36:39 ID:???
>>843
浮動要素は通常フローから除外されるってわかってないな?
float:left; でなくて
#TIT h2 {display:inline;}
でいいぢゃん。


855 :Name_Not_Found:05/03/02 20:01:22 ID:ZVhkPcNi
IE6.0を使っています
スタイルシートの部分が
#t1{margin-bottom:0px}
--></style>

<table>
<tr>
<td>
<form action="search.cgi" method=get target="" name="form1" id="t1">
<input type=hidden name=mode value=search>
<input type=hidden name=page>
<input type=hidden name=sort value=mark>
<input type=text name=word size=200>
<input type=submit value=" 検 索 ">
<input type=reset value=" 消 去 ">
</form>
</td></tr></table>

こうやっていると、</form>の下側にスペースがあいてしまうのです。
</form>を入れないと綺麗になるのですが、</form>は入れないとまずいですよね。

856 :Name_Not_Found:05/03/02 20:09:47 ID:???
849,855の者です。
解決しました、なぜかIDのなのクラスでやってました。
classに変えたらできました、感謝。

857 :Name_Not_Found:05/03/02 20:10:38 ID:???
>>849
class だったら↓じゃね?

.suraimu1{margin:0px}

858 :Name_Not_Found:05/03/02 20:17:33 ID:???
>>855
table の枠の幅のような気がするけど?

859 :Name_Not_Found:05/03/02 21:33:23 ID:???
>>855
table.Search td {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}

<table class="Search">
<tr>
<td>
<form action="search.cgi" method=get target="" name="form1" id="t1">
検索フォームをtable要素で囲む理由が分からんが気にしないことにしておくよ

860 :Name_Not_Found:05/03/03 00:59:13 ID:bWnD5A71
何が原因なのかわからないのですが
floatで左にメニュー右にコンテンツを配置もので
右のコンテンツ内のdlをfloatを使ってdt,ddを一直線に表示したのですが
左のメニューのリンク部分にマウスカーソルを合わせるとdt部分が左に一文字分くらい動きます

IE以外では大丈夫でした
なにか原因とか解決策とかわかる人がいたらお願いします

861 :Name_Not_Found:05/03/03 01:30:40 ID:???
>>860
ソースを晒してくれまいか

862 :Name_Not_Found:05/03/03 01:33:21 ID:???
>>860
a:hover周りかな。
バグ辞典見てみて。

863 :860:05/03/03 01:40:06 ID:bWnD5A71
関係なさそうなとこ削ったら、少し動きが変わりましたが

#menu { float: left; width: 20%; }
#contents { margin-left: 20%; }
dt { float: left; width: 2em; }
dd { margin-left: 2em; }
a:hover { background-color: #000000; color: #ffffff; }

<div id="menu">
<ul class="menu">
<li><a href="./index.htm">メニュー</a></li>
</ul>
</div>
<div id="contents">
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
</div>


864 :860:05/03/03 01:43:03 ID:bWnD5A71
>>862
はい。hoverやmagin削っても大丈夫でした
バグ辞典見てみます

865 :Name_Not_Found:05/03/03 01:45:10 ID:???
>>864
これかな。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b038.html

866 :860:05/03/03 01:55:49 ID:bWnD5A71
>>865
それと同じ状況でした。バグ回避はのってないみたいですね
同じ条件でもなるものとならないものがあるので、いろいろ試してみます
ありがとうございました

867 :Name_Not_Found:05/03/03 02:06:49 ID:???
>>863
例文だから一概に言えないけど、ul要素もdl要素もブロックレベル要素なんだから、
それをdiv要素で括る必要はないような。まあ、それ以外も書いてないけど存在するのかもしれないけどね。

868 :Name_Not_Found:05/03/03 02:10:46 ID:???
dlだけで出来てるコンテンツなんてないだろ

869 :Name_Not_Found:05/03/03 02:14:32 ID:???
>>868
使い方の良し悪しは抜きにして、「見出し、内容」で使ってたとしたら、コンテンツの部分はdl要素が一番外になるよね。

>>863
そのソースで試したけど、動かないよ?
IE6で試した。

870 :869:05/03/03 02:22:44 ID:???
ごめん。dl要素が動いたわ。
お詫びに回避策探してきます。

871 :869:05/03/03 02:29:02 ID:???
連投すまん。
>>860
解決策にはならんかもだけど、幅指定を20%から15emとか別の単位に変更すれば回避できるね。
ただ、ブラウザの幅に対して、だったものが、文字のサイズに対して、になっちゃうから挙動が変わっちゃうよね。
ごめん非力で。

872 :Name_Not_Found:05/03/03 14:10:54 ID:???
俺にはdl要素使ってテーブル表示と同じ動きさせるのは無理だ・・

873 :Name_Not_Found:05/03/03 18:04:47 ID:ZwOtc1Ty
>>872
ttp://www.htmq.com/html/dl.shtml

ところで質問です
CSSをhead部分に書いて
datクラスで改行禁止を行うには
何を書けばいいんですか?

874 :Name_Not_Found:05/03/03 18:22:55 ID:???
なぜ872を指名したのか……。

875 :873:05/03/03 19:19:17 ID:???
正解は
.dat{white-space:nowrap;}

876 :Name_Not_Found:05/03/03 19:23:37 ID:???
>>874
ワロス
漏れも一瞬そう思ったけど、勘違いの親切だと思われw。

877 :Name_Not_Found:05/03/03 19:26:43 ID:???
最近こういうキチを良くみるけど、流行ってるの?

878 :872:05/03/03 19:27:04 ID:???
>>873
なんかよくわからんが、ありがとう!

879 :873:05/03/03 20:05:19 ID:???
ごめんなさい
本当は自己解決と言いたくなかっただけなんです
872を指名したのは参考UPLを渡したかっただけです
お騒がせしました

880 :Name_Not_Found:05/03/03 20:27:44 ID:???
配管更正延命化工法?

881 :Name_Not_Found:05/03/03 20:31:00 ID:???
U-shin Pig Lining Engineering System か。

882 :Name_Not_Found:05/03/04 12:40:22 ID:???
floatとdisplay:inlineはどう使い分ければイイですか?

883 :Name_Not_Found:05/03/04 13:02:26 ID:???
ゆとり教育の結果とはこういう事を言うのか・・・

884 :Name_Not_Found:05/03/04 16:19:54 ID:???
ゆとり教育 ってうるさいな。
分かってるなら教えてやれよ。
まあ 俺は知らんがな

885 :Name_Not_Found:05/03/04 16:23:17 ID:???
ゆとり教育受けてない奴っておっさんだろ?

886 :Name_Not_Found:05/03/04 16:24:45 ID:???
半ドンで育った俺はゆとり教育

887 :Name_Not_Found:05/03/04 16:25:28 ID:???
次の質問ドゾ
半ドンがうれしかったおじちゃんが答えてやるぜよ

888 :Name_Not_Found:05/03/04 16:32:54 ID:???
チンドンで育ったおいらは失業状態。

889 :Name_Not_Found:05/03/04 16:49:32 ID:???
<div id"top">
<h1>サイト名</h1>
<p id="menu">
メニュー メニュー メニュー メニュー
</p>
</div>
としているんですが、
h1の文字サイズを大きくすると、divボックスの高さを無視して
文字が貫通してしまいます。
なぜでしょうか?
h1にはinlineをしています

890 :Name_Not_Found:05/03/04 16:57:39 ID:???
>>889
<div id"top"> なにこれ
<div id="top"> でしょ

891 :Name_Not_Found:05/03/04 17:11:32 ID:???
>>889
出し惜しみするな糞

892 :889:05/03/04 17:59:53 ID:???
うち間違いです。

893 :Name_Not_Found:05/03/04 18:23:52 ID:???
>>889
div の overflow が visible(初期値)だから。overflow:hidden を指定すればいい

894 :Name_Not_Found:05/03/04 18:33:44 ID:???
display: none
でいいよもう

895 :Name_Not_Found:05/03/04 19:22:05 ID:???
初歩的な質問をすみません。
背景に一枚画像を設置したのですが、上の方だけしか表示されません。
画像そのものに問題はなく、ブラウザを縮めると少しずつ見えてくるのですが…
background-positionが間違っているのかと思い直してみましたが直らず、
解決策が見つかりません。
よろしければ解決策を教えてください。

896 :Name_Not_Found:05/03/04 19:24:12 ID:???
>>895
それだけじゃ何がなんだか分からんって
ソース出せや

897 :Name_Not_Found:05/03/04 19:24:34 ID:???
background-repeat: repeat-y;

898 :Name_Not_Found:05/03/04 19:27:00 ID:???
すいません、素で忘れました

<style type="text/css">
<!--
BODY{ background-image: url(http://orange5555.hp.infoseek.co.jp/tope.jpg);
background-repeat:no-repeat;
background-position:80% 30%;
background-attachment:fixed;}
--></style>

899 :jiji:05/03/04 19:34:42 ID:CkWNLixq
XHTML1.0 Strictで制作をしているのですが
イメージ画像を縦に並べたときにMozilla系で見ると5pxぐらいイメージ画像の上下に余白ができてしまうんですがこれってCSS側で回避できないんですかね?

900 :Name_Not_Found:05/03/04 19:37:32 ID:???
できるよー

901 :jiji:05/03/04 19:39:27 ID:CkWNLixq
ご教授ください!
ちなみに余白がでるのは下だけっぽいです

902 :Name_Not_Found:05/03/04 19:41:20 ID:???
img{margin: 0;}
じゃね?

903 :jiji:05/03/04 19:42:04 ID:CkWNLixq
それはだめでした

904 :Name_Not_Found:05/03/04 19:51:58 ID:???
*{margin: 0;}
じゃね?

905 :Name_Not_Found:05/03/04 19:59:05 ID:???
img {display: block; margin: 0; }
ウチはこれで回避した

906 :Name_Not_Found:05/03/04 20:10:21 ID:???
聞く側も答える側も、なんでFAQ見ねーかな
vertical-alignの初期値がbaselineだから。

907 :Name_Not_Found:05/03/04 20:24:05 ID:???
なんでそんなに真剣なの?

908 :Name_Not_Found:05/03/04 20:24:28 ID:???
みんなネタでやってると思われる

909 :Name_Not_Found:05/03/04 20:25:31 ID:???
906だけ真剣ですか?

910 :Name_Not_Found:05/03/04 20:33:58 ID:???
ワロス

911 :Name_Not_Found:05/03/04 22:10:34 ID:ylCts+9q
質問

addressタグの中にdivタグを入れても問題ないのでしょうか?

912 :Name_Not_Found:05/03/04 22:23:23 ID:???
( ´ _ゝ`)おまえらさぁ...
CSS の前にHTMLの要素くらい勉強してくれないか


913 :Name_Not_Found:05/03/04 22:30:32 ID:???
>>911
ち○この穴にま○こを女の体ごと入れるようなもの。

914 :Name_Not_Found:05/03/04 22:31:56 ID:???
window.createPopupで新しいオブジェクト作ったんですけど、
そこにテーブルタグある場合、どうやればテーブルにCSSを適応できますか?
フォントとかなら 〜〜.style.font=〜 で出来るのは分かりますが、テーブルにはどうやればよいのか分かりません。

915 :Name_Not_Found:05/03/04 22:46:08 ID:???
>>914
class か id つけてスタイルシート書いた方が早い。

916 :Name_Not_Found:05/03/04 22:51:32 ID:???
>>914
物事にはすべて順序ってものがるんだよ

917 :914:05/03/04 22:59:50 ID:???
>>915
TD一つ一つにstyle=〜は訳あって付けられません。
TD{〜〜}でCSSを書くのもwindow.createPopupで作った物の場合ダメなようです。(私のミス?)
私が考えつく方法は一行ずつ .style.○○= を書くごとぐらいです。。
面倒くさくっても良いので、テーブルにCSSを適応させる方法を教えて頂けたらありがたいっす。

918 :Name_Not_Found:05/03/04 23:19:12 ID:???
createPopup() を使ったことのある人自体が少ないと思うんだが。
クロスブラウザを捨ててまで使う価値あるの?

919 :Name_Not_Found:05/03/04 23:35:11 ID:???
>>917
オナニーは自分の思考の中だけにしておいて下さい

920 :Name_Not_Found:05/03/05 00:21:08 ID:???
>>917
> (私のミス?)
どうやって失敗したのか知らないが多分あんたのミス。

> 面倒くさくっても良い
なら
> 一行ずつ .style.○○= を書く
にしたら。

921 :Name_Not_Found:05/03/05 02:21:36 ID:6GSCq/cK
はじめまして。
<select> を横スクロールしたいのですが、方法が見つかりません。
overflow:scroll でうまくいくかなーと思っていたんですが、駄目でした。
IEで動けばとりあえずOKなんですけど・・・。

922 :Name_Not_Found:05/03/05 02:25:53 ID:6GSCq/cK
>>921
追加コメントです。
width:200px で横幅を固定して、中身が表示しきれない場合に、横にスクロールをさせる方法を探しています。
ご存知な方いますか?

923 :Name_Not_Found:05/03/05 04:17:20 ID:???
>>920 Windowsでは無理です。

924 :Name_Not_Found:05/03/05 04:19:01 ID:???
参考:
select要素ではz-indexやborderなどのプロパティを無視する(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b112.html

925 :Name_Not_Found:05/03/05 04:21:23 ID:???
まあ、select要素をdivか何かに入れ子にして、
その親ブロックにoverflowを指定すれば、できるか。

926 :Name_Not_Found:05/03/05 15:44:38 ID:???
全称セレクタと、body要素をセレクタはどう違うのですか?


927 :Name_Not_Found:05/03/05 15:47:05 ID:???
同じ・・・・・だとおもいます

928 :Name_Not_Found:05/03/05 15:47:55 ID:???
>>927
アホ?

929 :Name_Not_Found:05/03/05 15:52:53 ID:???
>>927
アフォですか?


930 :Name_Not_Found:05/03/05 15:56:44 ID:???
>>927
違う・・・・・と思います。
>>927のような奴は返事すんな。
全称セレクタの継承違いを勉強しよう。

931 :Name_Not_Found:05/03/05 16:02:44 ID:???
ハァ?じゃあどう違うのか説明してみろ!!!
出来る訳ねーよな!同じなんだからよ!

氏ねボケどもが!

932 :Name_Not_Found:05/03/05 16:03:20 ID:???
>>927
>>931
死ね


933 :Name_Not_Found:05/03/05 16:05:18 ID:???
>>931のような、バカはよく騒ぐ

934 :Name_Not_Found:05/03/05 16:08:47 ID:???
荒れてますなあ。

935 :Name_Not_Found:05/03/05 16:24:17 ID:???
>>926はどこへ行った

936 :Name_Not_Found:05/03/05 16:43:30 ID:3n1MZwNA
テーブル使いになりましたとさ。

937 :Name_Not_Found:05/03/05 18:51:18 ID:EKZWSzUg
表のセルにoverflowを使用したのですが、IE以外では無効化されて
セル内のテキストの分、表が長くなり指定した表の大きさになりません。
仕様なのでしょうか?

938 :Name_Not_Found:05/03/05 18:57:10 ID:???
tableにtable-layout: fixed
ちなみにおかしいのはIEの方。

939 :937:05/03/05 19:21:19 ID:???
>>938
<div class="main"><table 〜〜
となってるんですが、table内にstyle=""で追加しても.mainの方に追加してもダメでした

940 :Name_Not_Found:05/03/05 19:41:06 ID:???
tableにwidthも必要。autoじゃダメ。

941 :937:05/03/05 19:44:48 ID:???
今の状態が
<div class="main"><table border="0" width="100%" height="100%" cellspacing="0" cellpadding="13">
.main{height:100%;overflow:auto;}
なんですが。
table重ねて大きさは指定してます

>>940 width="100%"じゃダメですか?

942 :Name_Not_Found:05/03/05 19:57:04 ID:???
セルにoverflowとは
tdにoverflow:auto
とかしてるってこと?

943 :Name_Not_Found:05/03/05 21:44:59 ID:???
>>941
だから、全体のソースを晒す

944 :943:05/03/05 21:50:47 ID:???
というのも最近このスレに質問する香具師ってほとんどマークアップが
滅茶苦茶で、CSSを落書きの道具のように勘違いしているのがほとんど
その意味でお願いしたい。

945 :Name_Not_Found:05/03/05 21:55:54 ID:???
調子のるな禿

946 :943:05/03/05 21:58:00 ID:???
禿じゃないよ

947 :Name_Not_Found:05/03/05 21:59:34 ID:???
ワロタw

948 :Name_Not_Found:05/03/05 22:05:41 ID:???
943=944=945=946=947

949 :Name_Not_Found:05/03/05 22:14:54 ID:???
947=948

950 :943:05/03/05 22:26:21 ID:???
>>945-949
それが落書きだ(w

951 :Name_Not_Found:05/03/05 23:10:17 ID:???
>>943-944
糞本見てるか、どっかで変な書き方教わってるんじゃないかなー?

952 :Name_Not_Found:05/03/05 23:12:09 ID:???
<table width="100%" cellpadding=0 cellspacing=0 id="i4" class="d8">
こういうかんじで、1つのテーブルタグにidとclassを使うのってありなのでしょうか。
それともこういうやり方は誰もしないのでしょうか?

953 :Name_Not_Found:05/03/05 23:19:26 ID:???
あり。

954 :937:05/03/05 23:26:03 ID:???
構造さらします、かなり酷い構造だとは思いますが。
<body>
<table width="500px" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr><td><table height="300px" border="0" width="100%" cellspacing="4" cellpadding="0">
<tr><td colspan="2" height="100px"><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td height="100px" width="200px">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%">
<tr><td></td></tr></table></td><td> </td></tr></table></td></tr><tr><td></td>
<td width="100%"><div class="main"><table border="0" width="100%" height="100%" cellspacing="0" cellpadding="13"><tr><td valign="top">
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</td></tr></table></div></td></tr></table></td></tr></table>
</body>

>>942
ごめんなさい訂正させてください
状態は>>941ですので、大元のセル内に新たに表を組み込み、それに対してのoverflowでした
>>951
そういう状態orz ページ見て試行錯誤

955 :Name_Not_Found:05/03/05 23:50:17 ID:???
>>937 >954
悪いことは言わねーから、足洗ってくれ。

956 :938:05/03/05 23:58:27 ID:???
どこがセルなんだ・・・
だったら938,940は関係ないよ・・・

957 :943:05/03/06 00:04:39 ID:???
>>954
思ったよりヒドい...
overflow は何でもいいから、見出し、段落から出発して下さい。

958 :Name_Not_Found:05/03/06 00:13:14 ID:???
>>957









ワロタw

959 :Name_Not_Found:05/03/06 00:14:08 ID:???
>>954  orz

960 :Name_Not_Found:05/03/06 00:19:44 ID:???
>>954
テーブルが四重か。
iframe 使った方がよくね?

961 :937:05/03/06 00:43:58 ID:???
みなさんお騒がせいたしました・・・'`,、(´∀` ) '`,、

>>960 提案ありがとう

962 :Name_Not_Found:05/03/06 08:05:24 ID:JCKnGu3e
果たして将来自分の愚かさに気付くだろうか。

963 :Name_Not_Found:05/03/06 11:11:43 ID:???
>>961
ソフトは何で作ったの?

964 :Name_Not_Found:05/03/06 12:43:51 ID:???
>>962
おまえも愚かな自分を恥じた方がいい。

965 :962:05/03/06 14:24:04 ID:???
は?シネよ

966 :ひろ:05/03/06 14:27:33 ID:b94katCe
ページレイアウトはDIV styleで行なって
サイドメニューを<TABLE id="menu">タグで上下に動かして
動くメニューをつくっているのですが、
メニューの上からの開始地点をどうやってCSSにいれればいいかわかりません、
あとIEだと下までメニューが永遠に下がってしまい、調べても直し方がわかりません

CSSは↓
table { border : 1px solid ; border-collapse : collapse ;}
div { border-style : 0px solid ; background-color : #ffffff ; float : left ;}
#menu { position : absolute ; top: 100 ;}

動くメニューに使っているスクリプト↓
lay = document[document.all ? "all" : "layers"]["menu"]
function ffhpaint() {
tY = (document.all ? document.body.scrollTop : window.pageYOffset);
cY = document.all ? lay.style.pixelTop : lay.top
di = cY - tY;
(di>0)?de=di:de=Math.round(di/5);
if (document.all)
lay.style.pixelTop -= de
else
lay.top -= de
}
window.setInterval("ffhpaint()",10)

誰かわかる方いませんか?よろしくお願いします
長文すいません

967 :Name_Not_Found:05/03/06 15:14:44 ID:???
いまどき、allかlayersで分岐させるなんてどこで聞いたんだよ。
つーかスレ違い。

968 :Name_Not_Found:05/03/06 15:15:48 ID:???
>>966
今日一番のワロス

969 :Name_Not_Found:05/03/06 15:37:01 ID:???
>>965
ペタワロスwww

970 :966:05/03/06 16:41:49 ID:???
>>967-968
わかんねーんだったら、つまんねえレスしてんじゃねーよ
このインポ野郎どもが!!

971 :Name_Not_Found:05/03/06 20:55:03 ID:???
てめー 俺の秘密をバラしたなー!!

972 :ひろ:05/03/07 03:08:33 ID:nY9pV3Oj
CSS のスレか scriptのスレのどっちで質問したかわからなかったので、
あと2チャンネルの使い方はあまり把握してません、
なるべく関連のあるスレにカキコミしているだけなので

scriptが問題だったのかな?
#menu { position : absolute ; top: 100 ;}
で上からの位置がかえれなかったです


973 :Name_Not_Found:05/03/07 03:14:48 ID:???
>>972
分解して検証くらいしなよ。topに単位識別子が無い。

974 :ひろ:05/03/07 11:49:00 ID:Cx9ihRp0
#menu { position : relative ;}で

メニューがBODYのmarginを越えて、上に行きすぎる問題は解決できました
2chに書き込まないで、何でも自分で調べるのが正解

975 :Name_Not_Found:05/03/07 12:38:45 ID:???
その質問の文章じゃわからんよ

976 :Name_Not_Found:05/03/07 14:31:42 ID:???
メニューボタンをマウスオーバーするとプルダウンメニュー3つが表示されて、カーソルを外すと
消えるようにしたいんですけど、

たしかにマウスオーバーすると表示されるのですが、カーソルをはずしても消えて
くれません。。。

どんなことが考えられますか? 教科書どうりにやっているのですが。。。

お願いします。

977 :Name_Not_Found:05/03/07 14:33:57 ID:???
ここわCSSスドッレなんですが
ジャバスプリクトじゃないですよねそれ?

978 :Name_Not_Found:05/03/07 14:45:30 ID:???
>>977
CSSでも、できるんだけどね。

>>976
CSSでの話なら
ttp://www.kxen.com/
この辺のソースでも参考にしてみなさいな。

979 :Name_Not_Found:05/03/07 14:48:18 ID:oaGZ63Lj
IEでfloatさせたものの上に指定してないボーダーが表示されてしまうのですが
ttp://cssbug.at.infoseek.co.jp/detail/winie/b138.html
バグ辞典に同じ症状のものが載っていたので
backgroundに色を指定する方法で消すことは出来たのですが
これの上でスクロールさせていると、
結構頻繁にこの線が表示されたまま残ってしまいます
自分の場合同じような形のものをいくつも並べているので、かなり目立ってしまうのですが
なにかいい方法わかる方いたらお願いします

980 :Name_Not_Found:05/03/07 15:22:22 ID:???
>978のサイトはオモクソJSに頼ってるよな、CSSでプルダウンメニューは無理だろ

981 :Name_Not_Found:05/03/07 16:09:50 ID:???
>>979
上のボーダー色を背景と同じ色にしてみるとか

982 :Name_Not_Found:05/03/07 16:16:43 ID:???
>>980
お兄さん、JavaScript切ってもう一回行って御覧なさい。

983 :Name_Not_Found:05/03/07 16:48:24 ID:???
お前、プルダウンの意味解ってるか?

984 :Name_Not_Found:05/03/07 16:49:31 ID:0hH3u8wb
>>980
できるよね、CSSでも。
ttp://www.filemaker.com/

985 :Name_Not_Found:05/03/07 17:13:36 ID:???
>>983
別にクリックして良いなら、えらい簡単にできるぞ。
質問者の文章をもう一回読み直してみな。

986 :Name_Not_Found:05/03/07 17:21:17 ID:???
質問です。
<ol>で、
ol li {display:inline;
   list-position:inside;}
と指定し、
番号を振りながら、
1〜 2〜 3〜 4〜
と並べていきたいのですが、
番号が表示されません。
これはそういう仕様なんでしょうか?

987 :Name_Not_Found:05/03/07 17:47:04 ID:???
>>986
inlineにしてるからだよ。
inlineがはずせないなら、
counter-incrementつかって連番するのも手。(出来たよな?たしか)

988 :Name_Not_Found:05/03/07 18:15:21 ID:???
左右にページを分けて左にメニューをずっと表示させておいて
右に内容等を表示するようにしてるのですが、BBS(cgi)を右に表示させる場合どうしたら良いのでしょうか
HTML+CSS Handbook等CSSに関する書籍をいくつか購入して勉強してるのですが方法が見つかりません
どなたかアドバイスお願いします

989 :Name_Not_Found:05/03/07 18:18:52 ID:???
フレームで2つに分けるか、
アイフレームで内容を表示する。
分からないなら検索汁

990 :Name_Not_Found:05/03/07 18:35:35 ID:???
アイフレーム

991 :Name_Not_Found:05/03/07 18:49:41 ID:???
>>987
ありがとうございます。

inlineは外せないです・・・
2ちゃんねるの板トップのスレッド一覧みたいに、
各コンテンツを、改行せずに(display:inline;)順にリストアップしたいんです。
それだけだと見にくいので番号を振りたいんです。
(番号は移動するので、HTMLには書けませんし、
デザイン的な可否の問題は置いておいて。。。)

counter-incrementは対応状況が悪いみたいで使えませんねorz

992 :988:05/03/07 19:02:43 ID:???
>>989-990
本当に困ってたので助かりました、道を作ってくれて有り難うございます

993 :Name_Not_Found:05/03/07 19:34:30 ID:???
>989-990
position: fixed;ぐらい教えてやれよ

994 :Name_Not_Found:05/03/07 19:35:33 ID:???
>991
floatさせれば良いかも、試してないけど
inlineは外せ

995 :Name_Not_Found:05/03/07 19:51:11 ID:???
>>991
olの子のliにつく番号は、そのリスト要素の「並び順」であって、
例えば掲示板のスレッドの番号みたいな、番号と文字列(スレタイ)が相関している
場合の番号とは違うもの。なので、liの中に
<ol>
<li>1.またおまえは騙されたわけだが</li>
</ol>
と番号を書いて全然問題ない、というかそうすべきだったりします。
で、その番号を書くのが面倒な場合はプログラムを使ったりスタイルシートのカウンターを
使ったりするのがいいです。

996 :Name_Not_Found:05/03/07 19:53:28 ID:sB5o15YD
うめ

997 :Name_Not_Found:05/03/07 19:57:17 ID:???
997

998 :Name_Not_Found:05/03/07 19:57:48 ID:???
九百九拾八

999 :Name_Not_Found:05/03/07 19:58:35 ID:???
九九九

1000 :Name_Not_Found:05/03/07 19:59:16 ID:???
↓同じ発言ばっかじゃねーか 氏ね

1001 :1001:Over 1000 Thread
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。

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

read.cgi ver 05.04.00 2017/10/04 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)