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

このエントリーをはてなブックマークに追加
1Name_Not_Found
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
2Name_Not_Found:05/01/02 01:17:35 ID:54HoZFcI
【過去ログ】
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/
3Name_Not_Found:05/01/02 01:18:18 ID:54HoZFcI
4Name_Not_Found:05/01/02 01:18:55 ID:54HoZFcI
【関連スレッド】
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/
5Name_Not_Found:05/01/02 01:19:40 ID:54HoZFcI
【解説など】
・ごく簡単な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/
6Name_Not_Found:05/01/02 01:20:16 ID:54HoZFcI
【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
7Name_Not_Found:05/01/02 01:21:10 ID:54HoZFcI
【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
8Name_Not_Found:05/01/02 01:22:03 ID:54HoZFcI
【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
9Name_Not_Found:05/01/02 01:22:43 ID:54HoZFcI
【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
10Name_Not_Found:05/01/02 01:23:21 ID:???
スレ立て終わり
11Name_Not_Found:05/01/02 01:26:12 ID:???
>>1
乙です
12Name_Not_Found:05/01/02 05:52:20 ID:???
おつー
13Name_Not_Found:05/01/02 11:57:26 ID:???
CSSのfloat機能によって見え方を2列にするときには
寄せるボックスだけにフロートをつければ良いのに、
3列にする場合にはすべてのボックスにフロートを
つけるのは何故なんでしょう?
あと、
<br style="clear:~">
や、
<p style="clear:="></p>

のうまい使い方が良く分かりません。
14Name_Not_Found:05/01/02 17:28:04 ID:szQUbRBS
Firefoxでテーブルが入れ子になっている場合のCSS。

<table>
<tr>
   <td class="wid_600">
      <table>
      <tr>
         <td class="wid_400">
         </td>
      </tr>
      </table>
   </td>
</tr>
</table>

で入れ子になってるテーブルの"wid_400"(width : 400px;)が効果ないみたいなんですけど
なぜ?

15Name_Not_Found:05/01/02 17:49:03 ID:???
>>13
やり方による。
2列でも両方のボックスにフロートつけるやつもいれば
3列でも2つのボックスにしかフロートつけないやつもいるだろう。
どっちでもやれるからあとはやる人しだいだ。
clearの使い方についてはFAQに載ってるサイトをよく読め。
clearの適用対象はブロックレベル要素だから
厳密には <br style="clear: 〜"> は意味ないけどな。

>>14
CSSのソースさらせ。

.wid_600 {
 background-color:#ff0;
 width:600px;
}
.wid_400 {
 background-color:#0f0;
 width:400px;
}

で手元のFirefoxで確認したら普通に400pxになってたが。
16Name_Not_Found:05/01/02 18:05:22 ID:???
>>13
> <p style="clear:="></p>
ナニコレ? 意味無いよ。
17Name_Not_Found:05/01/02 18:31:38 ID:???
>>16
>> <p style="clear:="></p>
>ナニコレ? 意味無いよ。

少し上に
><br style="clear:~">
って書いてあるんだから、〜ってことだろうに。
要するにclearの使い方がわからんのだろう。
18Name_Not_Found:05/01/02 18:36:01 ID:???
“"clear:="”も無意味だが、
そもそも中味のないブロックレベル要素にclearを指定しても意味ないよ。
19Name_Not_Found:05/01/02 18:45:22 ID:???
>>18
そういえばそうだね
20Name_Not_Found:05/01/02 20:22:25 ID:???
>>7
おいおい、何回言わせるんだ?
いつまで嘘を垂れ流し続けてんだ?
FAQ4 を直せよ。
shrink-to-fit が分からなければ説明してやっても構わないが。
21Name_Not_Found:05/01/02 20:29:37 ID:???
macromediaのサイトみたいに

br.clear-both, div.clear-both {
font: 1px/1px monospace;
display: block
}
.clear-both {
clear: both
}

<div class="clear-both">&nbsp;</div>

<br class="clear-both">

という感じでやりたかったんじゃないの?

22Name_Not_Found:05/01/02 20:30:53 ID:???
>>21
;が抜けている。真似したらいかんぞ。
23Name_Not_Found:05/01/02 21:13:44 ID:szQUbRBS
>>15
res thx

cssは
.wid_400 {
vertical-align: top;
width: 400px;
}

です。

400pxに収まらない文字列が入ってきた場合
Firefoxだとぎゅいーんと横に伸びちゃいませんか?
IEだと400pxで改行してくれるのですけど。。

この部分はjspで可変長の文字列が入ってくるので
制限は難しいです。
24Name_Not_Found:05/01/02 21:14:19 ID:???
>>20
知ったかしたくてうずうずか?
文句つけずに、テメーでやれ。 コラ
25Name_Not_Found:05/01/02 21:21:07 ID:???
>>20
直すなら代案を出せって言ったろ。
CSS2.0 は Recommendation で、CSS2.1 は Candidate Recommendationだから
必ず 2.1 を基準にしなきゃならんという段階にはなってないし。
現にMacIE5なんかではまだfloatにwidthが要るんだし。
どれも前スレッドで既出だぞ。
26!omikuji:05/01/02 21:25:13 ID:???
フレームの高さ調節で利用できる "*" みたいな機能はCSSないのでしょうか?
27Name_Not_Found:05/01/02 21:27:35 ID:???
無い。が、頭を使って同等の表現はできる。>>26
28Name_Not_Found:05/01/02 21:31:34 ID:???
どうやるのでしょうか?
頭がないので教えて下さい。。。
29Name_Not_Found:05/01/02 21:42:24 ID:???
>>26 質問は5W1Hをきちんと。何をどうして何がやりたいのか。ソース出せ。
30Name_Not_Found:05/01/02 21:58:12 ID:???
頭の悪い子は、質問が下手。愚問には愚答しか返ってこない。
31Name_Not_Found:05/01/02 22:02:48 ID:???
>>25
何が代案だ、ボケ。仕様書そのまま書けば済むだろ。
2.1に4年間も時間を取られたW3Cの人にその台詞をはいてみろ、馬鹿が。
2.0は既に仕様書扱いされてないんだよ。
32Name_Not_Found:05/01/02 22:04:18 ID:???
>>26
フレームを使って装飾したいのか、
CSSによるマルチカラムデザインを使って装飾したいのか

前者:http://pc5.2ch.net/test/read.cgi/hp/1104083322/
後者:>>7-8を参照
33Name_Not_Found:05/01/02 22:10:24 ID:???
>>31
だったら、仕様書そのままを訳して書いてみろよ。
それは初心者にもすぐ呑み込める説明か?
このスレッドで書くに適当な長さなのか?
Candidate RecommendationとRecommendationとの差を無視するのか?
34Name_Not_Found:05/01/02 22:14:37 ID:???
> 現にMacIE5なんかではまだfloatにwidthが要るんだし。
極論すれば、IE3では云々の話になるわな。
だから、MacIE5 の特例として書けばいいだろ。
文句はエラッタ追ってなかった当時のTasman開発者にでも言え。
35Name_Not_Found:05/01/02 22:16:00 ID:???
>だから、MacIE5 の特例として書けばいいだろ。
うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい?
36Name_Not_Found:05/01/02 22:16:12 ID:???
>>33
何回も言わすな、無知。
W3CのCSSのフロントページを見てみろ。
2.0は仕様書の項目から消えてんだよ。
37Name_Not_Found:05/01/02 22:16:59 ID:???
> うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい?

おいおい、お前が分かれ、馬鹿。
38Name_Not_Found:05/01/02 22:18:12 ID:???
文句はつけるが代案は出せません、とさ。
39Name_Not_Found:05/01/02 22:18:43 ID:???
> うん。だから、それも含めて代案を書いてみてねって言ってるんだよ。わかったかい?

口の利き方に気をつけろ。訳して説明してやろうと思ったが、や〜めた。
40Name_Not_Found:05/01/02 22:20:02 ID:???
坊やだな。
ボクには説明できないから逃〜げた、だろ。
41Name_Not_Found:05/01/02 22:20:20 ID:???
> 文句はつけるが代案は出せません、とさ。
代案なんぞ無い。
MacIE5は特例。
他は、普通にshrink-to-fit。
42Name_Not_Found:05/01/02 22:21:36 ID:???
>>41>>33を読み直せ。
それは初心者にもすぐ呑み込める説明か?
43Name_Not_Found:05/01/02 22:23:29 ID:???
>>40
で、説明を要する部分は、preferred minimum width だわな。
ヒントをやったから、お前が説明してみろ。フォローしてやるから。
44Name_Not_Found:05/01/02 22:25:18 ID:???
ボクは文句つけるだけで説明できないし翻訳できないので相手に説明させちゃお、だとさ。
45Name_Not_Found:05/01/02 22:27:37 ID:???
23 :Name_Not_Found :04/12/01 20:17:53 ID:???
>>6
float に width は必須じゃないんだが。いい加減気付け。
そのサイトの管理人は仕様書エラッタを追っかける英語力すらないわけで。

24 :Name_Not_Found :04/12/01 20:54:05 ID:yVjKWeak
>>23
文句を言うだけなら豚でもできることですので、
エラッタを追っかける英語力のあるエロイひとなあなたが、
訂正を書いてあげてください。

26 :Name_Not_Found :04/12/01 22:18:19 ID:???
>>23
「float に width は必須ではない」というはのは近い未来のことだ。
CSS2.1 への転換期である現在においては width を明示しておくべきだ。

確かにCSS2.1勧告候補では width を明示する必要はない。
http://www.w3.org/TR/CSS21/visudet.html#q8
この記述が登場したのは2003年1月28日付けの草案からだ。
だが、Errata in REC-CSS2-19980512 にはその旨は書かれていない。

モダンブラウザであればCSS2.1準拠で設計されているから、
width を明示しなくともうまく整形できるかもしれない。

だが、その計算アルゴリズムが巧く機能するかどうかはわからない。
CSS2.1 が一般化しても、CSS2.0適合UAを考慮する必要もある。
整形の正確性や後方互換性を確保したいのなら、width を明示するべきだろう。

従って、中途半端に CSS2.1 についての解説をおこなうよりは、
とりあえず、「width は必須」と覚えさせた方が無難かもしれない。
46Name_Not_Found:05/01/02 22:42:04 ID:???
>>44
あのぉ、完全にあなたの負けなんですが。
さっさと説明してフォローしてもらってください。
47Name_Not_Found:05/01/02 22:43:30 ID:???
説明責任を転嫁すんなよ。
48Name_Not_Found:05/01/02 22:48:51 ID:???
>>45
なるほど、前スレ23(オレ)の投稿にそんな痛いレスがついていたのか。
そういう痛いレスに見られるように、もっともらしいことを言って
無知無能を隠すのはCSS界隈特有だ。いつ見ても反吐が出る。
49Name_Not_Found:05/01/02 22:50:34 ID:???
きちんと反論もしないで「痛い」と決めつけるだけ。それでは信用は得られませんね。
50Name_Not_Found:05/01/02 22:53:37 ID:???
書き込んだらレスも見ないで放りっぱなし。よっぽど無責任でイタい。>>48
51Name_Not_Found:05/01/02 22:56:21 ID:???
とりあえず お前らAFO
52Name_Not_Found:05/01/02 22:57:51 ID:???
>抜かすとMacIEやOperaでの表示は保証できません。

と書いてあるんだから、必須=無いと表示されない

という意味ではない事は自明。
53Name_Not_Found:05/01/02 23:37:00 ID:???
このスレが主眼を置いていると思われるぶらうざのほぼ100%がshrink-to-fit。
しかも、それが現在の仕様書(2.1)にとって正しい。
正しいことではなく、特例を優先することの意図が分からんよ。
過去への配慮?だったら、IE3に配慮しろ。IE4に配慮しろ。NN4に配慮しろ。
合計すれば、MacIE5のシェアと大して変わらんぞ。
何度も言うが、2.0は何ヶ月も前から仕様書から陥落してんだ。事実を知れ。
W3CはCSS3にかけるべき時間を削って2.1を4年以上も練りに練ってきたんだろ。
その献身的な努力を分かってやれ。

ぶらうざ毎に説明が必要なpreferred minimum widthに関しても、
WinIE Mozilla Opera で同じ実装を取っているから、はっきり言って、
決め打ちの説明でも大した問題は無い。というか、説明しなくても、
感覚的に覚えてしまっているレイアウト結果を持ち出せば十分だったりする。

というか、2.1を読みもせず勘違いしている奴しかいないが、
shrink-to-fitは全然難しくないんだが。。。
だから、生意気盛りのお前等常連回答者どもやスレ立て人で解決してみろよ。
54Name_Not_Found:05/01/03 00:24:37 ID:???
>>53
お前がそう思ってるなら好きにすればいいじゃん。
55Name_Not_Found:05/01/03 02:18:52 ID:???
愛してる
56Name_Not_Found:05/01/03 03:00:19 ID:???
>>23
それはあれか?Mozilla/FirefoxではURLのような長い英数字の連続が折り返されないという問題か?
57Name_Not_Found:05/01/03 07:38:32 ID:???
まだ言ってるよ
粘着気質だねぇ
58Name_Not_Found:05/01/03 09:49:47 ID:???
>>53
Recommendation って 仕様書 って訳すのかい?
59Name_Not_Found:05/01/03 10:06:48 ID:???
>>55
ワタシモヨ
60Name_Not_Found:05/01/03 10:47:44 ID:???
CSS2.1粘着は帰れ
粘着したいならよそでやれ
61Name_Not_Found:05/01/03 15:54:57 ID:???
文句があるなら自分で対案を書いてみな。良ければ次スレから採用してやるよ。
それだけこちゃこちゃ述べる精力があるなら、代案を書く位は簡単だろ? >>53
何で他人にやらせたがるのか。
62Name_Not_Found:05/01/03 18:57:00 ID:???
.text #left { float: left; background: ffffff; width: 40%; }
.text #right { float: center; background: ffffff; width: 100%; }
63Name_Not_Found:05/01/03 19:09:30 ID:YXc9b5Ms
たくさんあるリンクのうち、一部分のリンクのみ色を変えたい場合、

<head>
<STYLE type="text/css">
<!--
a:link{color:#000000;}
test a:link{color:#ff0000;}
-->
</style>
</head>

のように設定した後、

<a class="test">リンク1</a>

ではダメなのでしょうか?
以前調べてメモをとっていたのでこれで合ってるかと思ったんですが
この書き方は間違ってますか?
64Name_Not_Found:05/01/03 19:13:42 ID:???
classの時はtestの前に.(ドット)
6563:05/01/03 20:06:13 ID:YXc9b5Ms
<head>
<STYLE type="text/css">
<!--
a:link{color:#000000;}
.test a:link{color:#ff0000;}
-->
</style>
</head>

のように設定した後、

<a class="test">リンク1</a>

ということでしょうか。
試しにやってみたんですがなりませんでした・・。
何かまだ間違えてるのかな・・・。
66Name_Not_Found:05/01/03 20:09:36 ID:???
<head>
<STYLE type="text/css">
<!--
a:link{color:#000000;}
.test a:link{color:#ff0000;}
-->
</style>
</head>

<div class="test">
<a href="****">リンク1</a>
</div>

とか。

6765:05/01/03 20:10:48 ID:???
ごめんなさい。
.test a:link じゃなくて、
a.test linkですね。(自己レス)

解決しました。大変失礼いたしました。
68Name_Not_Found:05/01/03 20:14:26 ID:???
>>67
まぁ、クラス名を指定しなくても出来るけどね。

<STYLE type="text/css">
<!--
a:link{color:#000000;}
.test a:link{color:#ff0000;}
-->
</style>

でも出来るっつーこと。
69Name_Not_Found:05/01/03 20:16:09 ID:???
>>68
自爆。
「クラス名」って余分・・・orz。
70Name_Not_Found:05/01/03 21:15:55 ID:???
h1 {
border: 1px solid #90C090;
}

h1だけ こ う い う ふ う に空白を入れたいんですが
よい方法があったら教えてください
71Name_Not_Found:05/01/03 21:21:04 ID:???
>>70
letter-spacing:1em
72Name_Not_Found:05/01/03 21:27:45 ID:???
>>71
ありがとうございます。解決しました。
73Name_Not_Found:05/01/04 15:22:39 ID:???
XHTMLでIDが良く使われるのはなぜですか?
74Name_Not_Found:05/01/04 15:23:52 ID:???
C・S・S!C・S・S!
7573:05/01/04 15:29:02 ID:???
XHTMLでCSSを使うときによくidが使われるのはなぜですか?

div#unchi {}
div#unchi ul#chinko {}
76Name_Not_Found:05/01/04 15:33:32 ID:???
>>75
そのXHTML文書でIDが使われているからCSSでIDセレクタを使っているのだ。
なぜそのXHTML文書でIDが使われているのかはスレ違い。
つーか「良く使われる」って何を根拠に?
7773:05/01/04 15:37:50 ID:???
>>76
XHTMLの質問スレがないんだけど。
スレ違いを厳格にしすぎる必要はないでしょうに。
自治厨ありがと。
78Name_Not_Found:05/01/04 20:16:31 ID:???
>>77
逆ギレ厨はカエレ、と言いたいところだがここで暴れられても困るので
誘導だけはしておく
http://pc5.2ch.net/test/read.cgi/hp/1093950965/l50
79Name_Not_Found:05/01/04 20:17:26 ID:92RtcMYn
CSSでテーブルみたいな表を作ることは出来ますか?
80Name_Not_Found:05/01/04 20:23:06 ID:???
>>79
視覚的には作れる
81Name_Not_Found:05/01/04 20:36:27 ID:92RtcMYn
>>80
行数が多分100を超えるのでテーブルだと重くなりそうなんでCSSで作れればと思ったんですが
2列×n行の表を視覚的に作るにはどうしたらいいですか?

82Name_Not_Found:05/01/04 21:48:40 ID:???
>>81
テンプレサイト参照のこと。
83Name_Not_Found:05/01/04 23:01:46 ID:ydvLNs++
h1に

 画像 テキスト

って感じで横にならべたいんですがどうやったらできますか?
84Name_Not_Found:05/01/05 00:16:53 ID:???
<h1>の背景に画像を左詰めで指定して、テキストを右詰めに指定してみる
85Name_Not_Found:05/01/05 00:34:22 ID:???
>>83
こうするとできるよ
h1 {
background-image: url("画像ファイル");
background-repeat: no-repeat;
background-position: left center;
text-indent: 画像の幅;
}
8683:05/01/05 00:46:04 ID:???
>>84
>>85

できたーー
初心者なうえアホなんで半日悩んでた・・orz

本当にありがとう!!
8785:05/01/05 01:05:11 ID:???
ウヒョヒョヒョ
88Name_Not_Found:05/01/05 08:38:38 ID:???
CSSは変数使えますか?
89Name_Not_Found:05/01/05 08:55:53 ID:???
>88
使えません。
90Name_Not_Found:05/01/05 12:49:39 ID:???
>>88 WinIEの独自拡張ならCSS関数があったな。expressionって奴。
91Name_Not_Found:05/01/05 18:22:03 ID:???
borderやmarginを指定する際に、すべて同値である場合、
top、bottom、left、rightと別個に記述するのと、
一括で記述するのはどちらがよいのでしょうか?
92Name_Not_Found:05/01/05 18:55:58 ID:???
一括
93Name_Not_Found:05/01/05 19:18:59 ID:???
どっちでもよか
94Name_Not_Found:05/01/05 20:20:18 ID:G3/SLUv8
>>91
一括表記「も」あるのは、便利のためであろう。
95Name_Not_Found:05/01/05 21:02:50 ID:eWMPF733
すいません、cssでフォントの幅を調節する方法はありますか?
96Name_Not_Found:05/01/05 21:06:56 ID:MC7Ss3RR
ひとつのセル、もしくはボックスの中に二つの「背景」画像をどちらも位置を指定して置きたいです。
ただし、二つの画像をくっつけてひとつにしたり、そのセル、もしくはボックスの中に新たな表組みや
ボックスを設けたりすることはできないとして教えてください。
97Name_Not_Found:05/01/05 21:07:34 ID:eWMPF733
具体的には、ワープロの縦倍角や横倍角を再現したいのです
98名無シネマ@上映中:05/01/05 21:20:07 ID:???
>>96
>ボックスの中に新たな表組みや
>ボックスを設けたりすることはできないとして教えてください。

「中」はダメでも、「外」ならいいのかい?

<div id="OutSide">
<div id="TargetArea">
なんたらかんたら
</div>
</div>

これで、div#OutSide と div#TargetArea にそれぞれ、
背景画像を指定したらどうだろう。
重ならないように位置をずらしてね。
(実験してないんでうまくいくか分からんです)
99Name_Not_Found:05/01/05 21:22:20 ID:???
>>95>>97
無理
100Name_Not_Found:05/01/05 21:31:27 ID:???
>>95>>97
欧米圏に倍角の考え方がないからな
W3Cもその辺りを考えて欲しいなぁ
101Name_Not_Found:05/01/05 21:48:13 ID:???
>>95>>97
頑張ればきっとできるよ!!

神→ネ申
終→糸冬
102Name_Not_Found:05/01/05 22:44:17 ID:???
>>95
font-stretchってのがあるらしいけど
対応ブラウザがないんじゃん
103Name_Not_Found:05/01/05 22:46:44 ID:???
馬太 目
104Name_Not_Found:05/01/06 02:25:02 ID:???
無王里
105Name_Not_Found:05/01/06 21:22:28 ID:???
>>102
あれはフォントファミリにexpandとかcondensedとかの
フォントが含まれてるときにそれを使うよう指定するもの。
そんなフォントは一般的にインストールされてないので
対応する気も失せるでしょう。

font-variantとかstyleとかweightとかも本来は
そういう物なんだけどね。ほとんどのブラウザはsamll-capsの
フォントなんかインストールされてなくてもnormalのフォントから
偽スモールキャップを生成してしまう。
そう考えると、stretchも無理矢理対応できなくもなさそうだ。
106Name_Not_Found:05/01/07 04:53:13 ID:???
すいません、以前のスレで紹介されていた、いろいろなブラウザにデフォルトの状態で指定されている
タグのマージンなどの値を紹介しているサイトをご存知の方がいらっしゃいましたら、
アドレスを貼っていただけないでしょうか?

ブックマークしていたのですが、OSの入れ替えのときにうっかり消してしまい、
ぐぐっても見つけられず、該当スレはDAT落ちしているようで読めないので、
なにとぞお願いします。
107Name_Not_Found:05/01/07 05:52:15 ID:uR2l3W7n
ulリストの最初にある丸を消すにはどう描けばいいですか?
108Name_Not_Found:05/01/07 05:59:36 ID:???
ul {list-style-type:none;}

    or

<ul style="list-style-type:none;">
109Name_Not_Found:05/01/07 08:45:31 ID:???
>>106
該当スレ読みに行ってあげるよ?
110Name_Not_Found:05/01/07 09:21:56 ID:HZBl5D4p
>>106
>>109
そんなのがあるんだ。
俺も見たい。
111Name_Not_Found:05/01/07 09:30:02 ID:???
>106
これかい?
ttp://is.vis.ne.jp/
112Name_Not_Found:05/01/07 10:38:57 ID:JH6OOKXB
CSSで縦に線を入れることはできますか?できれば方法を教えてください。
113Name_Not_Found:05/01/07 11:58:50 ID:VU+tBePu
>>112
何の縦じゃな?
114Name_Not_Found:05/01/07 12:40:40 ID:???
>>112は知りたくないらしいな。
115Name_Not_Found:05/01/07 17:43:27 ID:???
>>112
border使えばいくらでも。
116Name_Not_Found:05/01/07 19:09:45 ID:???
>>4
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/ は消滅したけど、
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/ に移動したらしい。
同様に CSS1 の方も http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/ に移ってる。

---

ところで、http://www.w3.org/TR/CSS21/visudet.html#q8 の英語ムツカシイね。orz
自動テーブルレイアウトで内容に合わせてセル幅が計算されるのに似ているとかなんとか…

float について何時もまでも揉めていても仕方ないわけで、
"shrink-to-fit" width について、英語が堪能な人=>>20 翻訳してよ。
117Name_Not_Found:05/01/07 23:10:19 ID:???
shrink-to-fit 自体は簡単。中身にあわせて縮まる。

display: table; をdivに適用すれば言わんとするところが視覚的にわかる。
118Name_Not_Found:05/01/07 23:12:37 ID:???
20は無責任に放りっぱなしだから駄目です。他人にやらせようとするし。
119Name_Not_Found:05/01/07 23:26:53 ID:???
CSS3情報きぼんぬ
120Name_Not_Found:05/01/07 23:44:23 ID:???
>>116
CSSについては初心者ですが、とりあえず↓訳してみました。

shrink-to-fitの計算は、自動的にテーブルレイアウトを決める方法を用いて
セルの幅を計算するのと似ています。

大雑把に、改行が明示されてる部分以外の改行を全て取っ払い、それに合う
幅をもとめます(望ましい幅)。そして、最小になる幅ももとめます。例えば、
改行できるところは全て改行して最小幅をもとめます。CSS 2.1ではその方法
の詳細については明文化されていません。
三番目に、コンテンツが書ける部分の幅を見つけます。この場合、この幅は
抱合ブロックから 'margin-left', 'border-left-width', 'padding-left', 'padding-right',
'border-right-width', 'margin-right' で使用されている値と関連する全ての
スクロールバーの幅を引いてもとめます。

これらから、shrink-to-fitの幅は、

  min( max(最小になる幅, 内容が書ける部分の幅), 望ましい幅 )

でもとまります。
121Name_Not_Found:05/01/08 02:22:14 ID:???
>>120
翻訳してくれてとても有り難いのだけど、
その翻訳を読んでも漏れには意味がわからない… orz

>改行が明示されてる部分以外の改行を全て取っ払い、それに合う幅をもとめます(望ましい幅)。
えっと、「それに合う」の「それ」が何なのか分らないよ。
「改行を全て取っ払う」ということは、長い一行にして「望ましい幅」を求める?
それとも「明示的な改行位置」に合うように「望ましい幅」を求めるってこと?

>min(max(preferred minimum width, available width), preferred width)
この数式の意味すら理解できない漏れは馬鹿…… orz
コンマ区切りはどういう意味で、どう計算するの?
122Name_Not_Found:05/01/08 05:13:42 ID:???
max(a , b) … a と b の大きい方(maximum)
min(a, b) … a と b の小さい方(minimum)

だとおもわれ。
123120:05/01/08 08:27:05 ID:???
訳した本人がCSSにそんなに明るくないので、この訳が正しいのかは
今一つ、わかりません。(^_^;)
とりあえず、意訳できそうなところはそうしてます。

>>121
それに合うというのは一番長い行が幅(width)になるという意味です。
_____________________________________________________________________________

私はCSSの勉強をしています。<br>
でも難しいのでこのスレで勉強させてもらってます。<br>
親切に回答してもらえるので助かります<br>
_____________________________________________________________________________

の場合、2行目の幅が求める幅と。

min、maxは>>122の通り。

「大雑把に、・・・」の大雑把は全文にかかるので、

   大雑把に、 ⇒ 大雑把に以下の3つの幅をもとめます。

にしないといけないかな。
124Name_Not_Found:05/01/08 12:52:58 ID:???
下のように
<div id="a">の中に<div id="b">と<div id="c">を入れbとcをfloat: leftとしたところ、
aに設定している背景画像がIEでは表示されるのにfirefoxでは表示されません。
どなたか原因をおしえていただけないでしょうか?


<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
#a {width: 500px;
background-image: url(img.gif);
}
#b {width: 250px;
float: left;
}
#c {width: 250px;
float: left;
}
-->
</style>
</head>

<body>
<div id="a">
<div id="b">Bの内容Bの内容Bの内容Bの内容Bの内容Bの内容</div>
<div id="c">Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容</div>
</div>
</body>
</html>
125Name_Not_Found:05/01/08 13:54:25 ID:???
>>124
#a {
width: 500px;
height:500px;
background-image: url(img.gif);
}
126Name_Not_Found:05/01/08 13:57:46 ID:???
あとこっちでもいいや
<div id="a">
<div id="b">Bの内容Bの内容Bの内容Bの内容Bの内容Bの内容</div>
<div id="c">Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容Aの内容</div>
<br style="clear:both;" />
</div>
127Name_Not_Found:05/01/08 14:30:54 ID:???
>>126
float使ったら、後でclearしておかないと、
firefoxでは色んな災いの元になるよね
128Name_Not_Found:05/01/08 15:49:17 ID:???
すいません。
filter: alpha(***)で、DIVタグの背景色にグラデーションをかけたいの
ですが、DIV内の文字にまでグラデーションがかかってしまい、読みづらく
なってしまいます。
背景色だけにグラデーションをかけて、文字はそのままにする方法を
教えてくださいませ。
129Name_Not_Found:05/01/08 16:07:59 ID:???
>>111
おぉぉぉこれです!ありがとうございます!
130Name_Not_Found:05/01/08 17:41:47 ID:???
>>127
おかしいのはIEなんだが。

#a:after {
content:"";
display:block;
}
とでもすれば。
131Name_Not_Found:05/01/08 19:02:02 ID:U1D2SeiM
スクロールバーの色を変えるので。
scrollbar-3dlight-colorってありますが、
色々なサイトを見ていると、文字がちょっと違います。
scrollbar-3dlight-color
scrollbar-3d-light-colorってところもたくさんあります。
dの次に-を入れるのが普通なんでしょうか。
どっちがよいのか気になって。
132Name_Not_Found:05/01/08 19:09:29 ID:???
変えるな!
133Name_Not_Found:05/01/08 19:10:56 ID:???
scrollbar-3dlight-colorでいいんじゃない?
ただ変えたら公開しないでオナニーに留めて下さい。
134Name_Not_Found:05/01/09 10:02:24 ID:???
msdnによれば3dlight。
operaもkonquerorも3dlight。
135Name_Not_Found:05/01/09 10:59:46 ID:???
UI のプロパティとして親切に scrollbar-x-color を教える香具師がいるけど、
ユーザーの使い勝手を悪くする要因になる機能であることに気付いていないらしい。
スクロールバーやカーソルなどの基本的なUI機能を自己満足で変更されたら困る。

カーソルは「十字カーソルが格好いい」とか下らん理由で変更するものではなくて、
対象となるオブジェクトによって形状を変化させることで、
何らかの操作が可能であることをユーザーに知らせるための便利な機能なはず。

Opera は「スクロールバーの色変更を許可する」かユーザー側で決められて親切。
IE はマーキーとか、ユーザー側で強制的に効果を無効にする手段がないから不親切。
WinXP では常に Luna の美しいスクロールバーを保ちたいというニーズがあるはず。
136Name_Not_Found:05/01/09 11:45:33 ID:???
IEのscrollbarはユーザスタイルシーチで制御できるよ
137Name_Not_Found:05/01/09 12:19:20 ID:???
しかし
「ユーザースタイルシートでなんとでも出来るんだから、製作者は特に気を使わなくて良い」
と言うのとは違う。

ブラウザのオプションを弄るのと、ユーザースタイルシートを作成するのとではレヴェルが違いすぎる。
サイトをまったり閲覧したいだけのユーザーに無駄な手間をかけさるな、っちゅう。
138Name_Not_Found:05/01/09 12:40:42 ID:???
>Luna の美しいスクロールバー

私がCSSで設定したスクロールバーの方が美しいので
ぶっちゃけそんなものどうでもいいです。はい。

カーソルも誰に何を言われたって、戻す気はありませぬ。
格好いい物は格好いいのです。

いやなら見なきゃ良いでしょ。なんで押し付けるかな。
139Name_Not_Found:05/01/09 13:26:17 ID:???
>>138
藻前の個人的な意見など誰も訊いていない。
利己主義者であることを標榜して満足か。
あと、押して付けているのは藻前だから。残念。
140Name_Not_Found:05/01/09 15:05:08 ID:???
>いやなら見なきゃ良いでしょ

かくして、誰も見ないサイトが出来上がるのであったぁ。
141Name_Not_Found:05/01/09 15:21:00 ID:???
>138
すすんで見るわけないけど、そっちこそ汚いもの見せないでほしい
と一般ユーザーの声
142Name_Not_Found:05/01/09 17:04:02 ID:???
スタイルシートで段組をする方法を調べていたら、このスレに辿り着きました。
FAQが充実していたので、該当の問題は無事解決できました。

さて、FAQのQ3ですが、一部URLが404になっています。
移転等は追っていないので詳細は不明ですが、とりあえず列挙します。

CSS段組レイアウトデザ委員会
 http://www.skipup.com/~l-_-l/web/ (※※※リンク切れ)
スタイルシートでマルチカラムデザインの実現
 http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm (※※※リンク切れ)

これらを削除したテンプレは以下の通りになります。

-------------------------------------------------------------
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
スタイルシートでマルチカラム・デザインを実現する方法
 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
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm
-------------------------------------------------------------

スレに常駐されている方がおりましたら、スレ立ての際、修正をお願いいたします。
143Name_Not_Found:05/01/09 17:44:40 ID:???
CSS覚えたての初心者です。
CSS使って、下の例のように右に画像を、左にその説明を配置して項目間には区切り線を
入れたいのですがうまく行きません(^^;

説明文・説明文 画像
説明文・説説文 
説明文・説明文 
---------------------
説明文・説明文 画像
説明文・説説文 
説明文・説明文 
---------------------
以下続く・・・

CSSは以下のような記述です。

DL {
border-bottom: 1px solid #CCCCCC;

DT {
float: right;
}

DD {
width: ○
}

説明文が短くて画像の方が高さがあるときに、区切り線が変な位置にでてくるんです。
恐らく、DTのfloatした画像の高さが認識されていないためだと思うのですが(これは正常動作ですよね?)、
何か良い手立てないでしょうか。1日以上悩んでいます。教えていただければ嬉しいです。
144Name_Not_Found:05/01/09 18:07:02 ID:???
>>143
なぜFAQを見ないのですか。>>8です。

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

clearを忘れるなよ。
145Name_Not_Found:05/01/09 18:11:29 ID:???
あと>>143はfloatについても理解が不充分みたいなので
FAQのA4(>>7)「浮動要素の高さもheightに含めさせる方法」を熟読して下さい。
146Name_Not_Found:05/01/09 18:14:11 ID:???
こんな風に定義されてるクラス caption があって、
.caption {
text-align: center;
position: relative;
left: 10%;
width: 80%;
height: 50px;
padding: 15px 0px;
background-color: rgb(200, 200, 255);
font: bold 20px fantasy;
}
これを基にして、text-alignだけをleftにした caption2 を作りたいのですが
captionをクラス拡張するみたいにして作成できないでしょうか?
同じ定義をコピペすると文字量が増えていやなんです。

.caption2 = new caption() { text-align: left; }

みたいにあるクラスを拡張する形で新規にクラス作成する方法を教えて
くださいませ。
147143:05/01/09 18:19:29 ID:???
FAQも見たのですが、どうしても該当する物がなくて、すみません質問させてもらいました(^^;

通常、ボックスサイズの算出にはfloatを除外するとのことですが、今回は
DDでfloatさせている画像の高さも<DL>のサイズに入れさせるようなことは
出来ないのかなと思いまして。
できるなら、DLのボーダーで区切り線が引きたいと思って質問しました。
やっぱりかなり初心者的でしょうか(^^;

一応、ここあたりも調べたんですがIEのバグみたいですし、
何か良い方法ありますでしょうか?
http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

あと、clearはDLに入れています。すみません。書きもれていました。
148昔の人:05/01/09 18:19:56 ID:???
>>146
ハテ。上書きすればいいだけでせうに。以下の如し。
.caption, .caption2 {
text-align: center;
position: relative;
left: 10%;
width: 80%;
height: 50px;
padding: 15px 0px;
background-color: rgb(200, 200, 255);
font: bold 20px fantasy;
}
.caption2 {text-align: left; }
149Name_Not_Found:05/01/09 18:22:44 ID:???
>>147
だからclearを忘れるなと。
「浮動要素の高さもheightに含めさせる方法」を読めと。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
150Name_Not_Found:05/01/09 18:25:18 ID:???
>>147
先行するフロートの上方に後続のフロートが置かれる
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
151Name_Not_Found:05/01/09 18:30:42 ID:???
>>148
わぁっ。できました。
ありがとうございます。
これはささやかなお礼です・・・(^*^)ちゅ〜
152Name_Not_Found:05/01/09 18:32:44 ID:???
>>143って表でいいんでないの?
153143:05/01/09 18:55:15 ID:???
ううっ、どうしても分かりません。もう泣きそうです。

149さんのページも以前から見ていたのですが、<br style="clear:both;">
書いても一向に駄目なんです(^^; そもそも定義リスト中では効かないなんてないですよね。

150さんのページも見ましたがどうもその現象とは違う気がします。

152さん、確かに表を使えばいいんですが、初心者ながらに半分意地になっているんです(^^;
154Name_Not_Found:05/01/09 19:03:06 ID:???
初心者は意地を張るな
155Name_Not_Found:05/01/09 19:14:45 ID:???
ちょっと話題でてたけど
http://www.fromdfj.net/html/column.html
「簡単な段組を作ってみる。」の項の最後に
「この解釈については、おそらくIEのほうが正しいのではないかと思います(clearはその要素自身の回り込みを解除するだけなので。ちょっと自信なし)。」
ってあるけど実際どうなんでしょう? 正しい方に統一して違う方を無視しようと思うのですが。
156Name_Not_Found:05/01/09 19:19:04 ID:???
>>155 それは>>150の挙げたIEのバグだろ。
157143:05/01/09 19:30:15 ID:???
実験しているソース書きますので、もうちょっとよろしければ教えてください。
多分、皆様がおっしゃっているような高度なことではない気がします。
下のソースを表示させるとDLのボーダーのbottomラインが画像に
かかってしまうのですが、これを何とかしたいと思っています。
(分かりやすいように、背景色つけています。当方はIE6で実験してます。)
初心者ですみませんがアドバイスありましたらお願いいたします。
158143:05/01/09 19:32:16 ID:???
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>

<style type="text/css">
<!--
dl {
background-color: #FFF0F0;
border-bottom: 1px solid #CCCCCC;
margin: 5px;
padding: 5px;
clear: both;
}
dt{
float: right;
background-color: #F0F0FF;
}
dd{
background: #F0FFF0;
width: 400px;
}
-->
</style>
</head>
159143:05/01/09 19:33:10 ID:???
<body>

<dl>
<dt><img src="http://rcm-images.amazon.com/images/P/4767802504.09.MZZZZZZZ.jpg" alt="gfdgfgfddd">
</dt>
<dd>
説明文です。ABCDEFGHIJKLMNOPQRSTUVWXYZ
</dd>
</dl>

<dl>
<dt><img src="http://rcm-images.amazon.com/images/P/4767802504.09.MZZZZZZZ.jpg" alt="gfdgfgfddd">
</dt>
<dd>
説明文です。ABCDEFGHIJKLMNOPQRSTUVWXYZ
</dd>
</dl>

</body>
</html>
160Name_Not_Found:05/01/09 19:34:23 ID:???
>>147
ddに高さを指定すれば済む話だ。dd {min-height:[画像の高さ];}
IEにはそのバグを利用した方法でいいだろ。
親ブロックであるDLにwidthを指定すればいいだけ。

でなきゃdlへのborder-bottom指定をborder-topにしろや。
161Name_Not_Found:05/01/09 19:42:20 ID:???
>>158-159
肝腎のimgの高さを指定してないし説明文の長さ(高さ)も同じだから不具合を再現できない。
例示として失格。
162143:05/01/09 19:52:39 ID:???
160さん、ありがとう。
でも、なぜか、min-heightは効きませんでした。なぜ?
おっしゃるようにDLへのWIDTH指定すれば希望通りになるんですが、これはIEのバグ
ですよね?

161さん、すみません。これで分かっていただけるかと思っていました。

もうちょっと考えてみて出来ないようでしたら仕方ないので諦めます。
どうも皆さん、ありがとうございました。
163Name_Not_Found:05/01/09 20:09:25 ID:???
>>161は少しは>>5を見て自分で調べなさい。
未熟なWinIEはmin-heightプロパティーに対応してない。
だからその代りにバグを利用して不具合を回避するわけ。

理解できないのなら、それより、border-bottom指定をborder-topにした方が早いのでは。
164Name_Not_Found:05/01/09 20:14:28 ID:???
>>159
>>159
<body>

<dl>
<dt><img src="http://rcm-images.amazon.com/images/P/4767802504.09.MZZZZZZZ.jpg" alt="gfdgfgfddd"></dt>
<dd>説明文です。ABCDEFGHIJKLMNOPQRSTUVWXYZ</dd>
<dd style="clear:both; font-size:0; margin:0; padding:0; height:0; background-color:transparent;"> </dd>
</dl>

<dl>
<dt><img src="http://rcm-images.amazon.com/images/P/4767802504.09.MZZZZZZZ.jpg" alt="gfdgfgfddd">
</dt>
<dd>説明文です。ABCDEFGHIJKLMNOPQRSTUVWXYZ</dd>
<dd style="clear:both;>こんな感じで何か有意の文章をかいて解決できれば、それにこしたことはないけれど。</dd>
</dl>

</body>
</html>
165155:05/01/09 20:16:21 ID:???
>>156
ありがとぅ
166143:05/01/09 20:35:16 ID:???
>>163
min-heightの話初めて知りました。
どうもすみませんでした。自分で調べるようにします。

>>164
どうもありがとう。
でもできませんでした(^^; DDにclear:both 入れているので、DTの画像とDDが真横
に並ばずに、DDが一段下に表示されてしまいます。
167164:05/01/09 21:06:40 ID:???
>>166
164のソースの下の<DL>の2つ目の<DD>の内容が画像の下に出るというのは仕様通り。
そこに何かしらの捕捉の説明とか何かしらのリンク(ページの先頭に戻る、とか)を入れたりして誤魔化すことで、
元々のページのデザインにバグ対策を組み込めばいいじゃんということ。

それがイヤな場合には、164の上の<DL>の2つ目の<DD>みたいにできるかぎり目立たなくして誤魔化す。
もしくは、面倒になるのを覚悟で、個々のDLとDDに画像分の高さを指定するぐらいしかないのでは。
168143:05/01/09 21:22:49 ID:???
>167

すみません。激しく勘違いしていました。お恥ずかしい。。。
すごいアイディアですね。このような方法があるなんて全く思いつきませんでした。

バッチリできました(^^)
これで行きたいと思います。

本当に嬉しいです。
助かりました。どうもありがとうございました。
169Name_Not_Found:05/01/10 02:31:28 ID:mhYw3Tb6
floatでいくつかdivを並べて、メニューのようなものを作っています。
<DIV class="navi1">戻る</DIV>
<DIV class="navi2>ホーム</DIV>
<DIV class="navi3">このページのトップ</DIV>
<DIV class="navi4">次へ</DIV>
こんな風にhtmlを書いて、
.navi1{ float : left ;
width : 20% ;
margin-left : 2% ;
text-align : center ;}
.navi2{ float : left ;
width : 20% ;
margin-left : 2% ;
text-align : center ;}
.navi3{ float : left ;
width : 20% ;
margin-left : 2% ;
text-align : center ;}
.navi4{ float : left ;
width : 20% ;
margin-left : 2% ;
text-align : center ;}
こうしているのですが、なぜかnavi1のmargin-leftが思ったとおりに挙動しません。(WinIE6で確認しています)

<マージン(7%をnavi1のmargin-leftで指定)> [戻る(20%)] <マージン(2%)> [ホーム(20%)] <マージン(2%)> [このページのトップ(20%)] <マージン(2%)> [次へ(20%)] <マージン(残った7%が勝手に割り当てられる)>

こんな風な予想完成図を思い描いています。7+20+2+20+2+20+2+20+7でちゃんと全部の要素の長さを足すと100%になるのですが、二行に表示されてしまいます。
最初の7%がいけないような気がします。
どうしたら意図したようにちゃんと表示されるでしょうか?もしやこのように単純な足し算ではないのでしょうか。
ご助言くださるとうれしいです。
170Name_Not_Found:05/01/10 02:35:07 ID:mhYw3Tb6
.navi1{ float : left ;
width : 20% ;
margin-left : 7% ;
text-align : center ;}の誤りです。よろしくおねがいします
171Name_Not_Found:05/01/10 02:41:29 ID:???
>>168
そんな七面倒くさいことせんでも、>>158
DL { border-bottom: 1px solid #CCCCCC;}

border-top: 1px solid #ccc;
に改めれば済む話やん。
172Name_Not_Found:05/01/10 02:53:16 ID:???
>>169-170
バグ辞典(>>5)を見てね。
 フロートの左右マージンが指定値より大きくなる(5.x/6.0)
 http://cssbug.at.infoseek.co.jp/detail/winie/b107.html
paddingにしたら? さもなくばリストをメニューにするか(>>7を見ること)。

>足すと100%になるのですが、
100%ピッタリだときつい。少し遊びを持たせてあるよね。
173Name_Not_Found:05/01/10 03:02:32 ID:???
>>172
どうもありがとうございます。
バグだったのですね。調べ方が足りなくてすみません。
英語のページで難しいですが、がんばってリストのメニューのページを読んでみます。
あと、100%じゃなくて、少し余裕を持って組んでみます。
174143:05/01/10 10:05:28 ID:???
>>171

どうしてもborder-bottomでしたかったものですから
無理して悩んでいました。。。
175Name_Not_Found:05/01/10 14:56:14 ID:???
初心者は意地を張るな。
拘泥する理由があるならそれを最初から示せ。
176Name_Not_Found:05/01/10 16:54:56 ID:???
<p style="float:right; width:200px;">なんたらかんたら長い内容</p>
<form><input type="text"></form>

このinput要素のwidthを100%にしたいのですが、floatの回り込みを解除して欲しくありません。
いい方法はありませんか?
177Name_Not_Found:05/01/10 22:23:19 ID:???
>>176
意味がよく解らないんだけど
widthを100% にすれば基本的に右にはスペースが存在しない訳で...
178Name_Not_Found:05/01/10 23:25:42 ID:???
>>176
formに200pxの右マージンをとるのじゃだめなのか?
179176:05/01/11 07:02:33 ID:???
>>177
すいません、input要素の要素を100%にすると、その場でfloatによる回り込みが解除されますよね。
解除されない範囲で100%にしたいということなのですが…

>>178
いいんですけど、floatが解除されたあとは一番右端まで長くなってもらいたいんですよ。

つまり、(図にしました)こういうことをやりたいわけです、可能でしょうか?
http://49uper.com:8080/html/img-s/33765.gif

引き続きよろしくお願いします。
180Name_Not_Found:05/01/11 09:14:56 ID:???
>>179
画像のような配置は充分可能だけど、それを100%とか言ってる間は、きみには無理です。
181180:05/01/11 09:27:56 ID:???
……ごめん、なんか読み違えてたみたいだ。
逝ってくるよ。

でも100%という言い方では、やろうとしてた内容が伝わらないのは事実ですよ。
182Name_Not_Found:05/01/12 03:06:54 ID:7IjTRiFF
スタイルシートを勉強すればするほどDIVを使用する比率が増えてきました。
これって悪いことではないんですよね…?

このスレのテンプレであげられているサイトでも、DIV病なんていうコラムが載っていますが、
まさにそうなってしまったのかなって思い始めてきました。
ただ、自分はbodyをまるまるくくったりはしないですし(bodyに対してCSSで指定すれば事足りますし)ちゃんと段落によってpタグを利用したりはしています。
どうしてもCSSとの連携で必要なところだけに絞ってはみました。

ただ、例えば1まとまりの文字部分にbackground-colorをつけたいときなど、pタグに指定すると、段落ごとに背景の切れ目ができてしまうので
仕方なく同一背景にしたいかたまりをDIVで囲ってクラスで指定してしまっています。
(以前はテーブルのセルに背景設定で(゚д゚)ウマーだったんですが)
何かほかにうまいやり方ってあるでしょうか。
183Name_Not_Found:05/01/12 03:31:10 ID:???
「1まとまりの文字部分」というのは何なのか。
p要素のまとまりのようなものを言っているのだろうか。

そういう意味で言っているのであれば、div要素で問題ないと思う。
p要素の中にp要素が使えるのであれば、
もとからdiv要素で括るようなことはしない。
けれども、それだとinvalidになるのだからしかたない。
背景色は各div要素ごとに設定すれば問題ないと思われるが、
背景画像は使ったことがないからわからない。
184Name_Not_Found:05/01/12 03:41:18 ID:7IjTRiFF
>>183
説明が下手ですみません。
その部分だけを抜粋すると、
<p>本文1
</p>
<p>本文2
</p>
<p>本文3
</p>
という場合に、この部分すべてに背景色をつけたい、なんて場合です。(まとまりとはこのことです)
これをもし、pに対してp {background-color : #******; }なんて指定してしまうと、それぞれの本文の背景が分離して表示されてしまいます。
で、仕方なく、
<div class="test">
<p>本文1
</p>
<p>本文2
</p>
<p>本文3
</p>
</div>
なんてして、スタイルシートで、div.test{background-color : #******; }こんな風に指定します。
こうすると、意図したように表示はできるんですが、はぁまた一つdivが増えてしまったと、こうなってしまうわけなんです。
全体をpでくくってbrで改行すればdivを使わなくても同じことができるんですが、今度はpの意味が死んでしまうので、それは一番避けたいです。

>p要素の中にp要素が使えるのであれば、
>もとからdiv要素で括るようなことはしない。

私も激しく同意です。小さな段落の上にさらに大きな段落があるという形式も配慮すると、現状ではこうなってしまいますよね。
どうもありがとうございました。
185Name_Not_Found:05/01/12 06:03:43 ID:???
>>184
ある「段落の纏まり」に意味的な繋がりがあるならDIV要素で示しても良いだろう。
何となくではなくて、論理的な構造として一貫性を見出せるなら妥当と言える。

margin: 0; にして、padding-top, padding-bottom で調整という手もある。
padding の場合、margin のように相殺が発生しないので計算が面倒だが。

>>p要素の中にp要素が使えるのであれば
>私も激しく同意です。小さな段落の上にさらに大きな段落があるという形式も配慮すると

「形式段落」の中に「形式段落」があるなんて文書構造は絶対に有り得ないが、
意味的な繋がりのある「複数の形式段落」を纏めて「意味段落」にするなら有り得る。
186Name_Not_Found:05/01/12 09:01:46 ID:???
漢字を飛ばすと全く解らん。
187Name_Not_Found:05/01/12 16:41:02 ID:???
飛ばすな。
188Name_Not_Found:05/01/12 21:15:58 ID:???
うむ、的確な指摘だ。
189Name_Not_Found:05/01/12 21:56:19 ID:???
>>184
本文1〜3に背景色等付けるのであれば、何かの関連性があんだろ?
もし、そうならば <hx>「見出し」を使用するのが普通
ただ何の意味も無く視覚的な面だけで段落3つごとに背景色を変えるのならばいい
190Name_Not_Found:05/01/12 22:01:48 ID:???
XMLにcssを適用したいんですが、
<picture>a01.jpg</picture>を
HTMLの<img src="a01.jpg />のように
動作されるにはどうやったらいいんでしょうか?
191Name_Not_Found:05/01/12 22:41:04 ID:???
>>189
>ただ何の意味も無く視覚的な面だけで段落3つごとに背景色を変えるのならばいい
それでは駄目だろう。まずは「テキストありき」でなければ。
スタイルシートの為に HTML が存在するわけではない。
意味を見出せないなら、段落を纏める必然性もないことになる。
192Name_Not_Found:05/01/12 22:59:29 ID:???
>>190
CSS2では要素の内容文字列を取得できない。
CSS2では属性値もurl()関数に渡せない。
CSS2では内容の置換もできない。(:beforeとかで生成はできるが。)

CSS3になれば内容の置換はできそう(operaは実装済み)
だが、内容文字列は取得できなさそう。urlも直書きしないといけなさそう。

ということで、こんな感じか
<picture xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="a01.jpg" xlink:type="simple"/>
@namespace xlink url(http://www.w3.org/1999/xlink);
picture[xlink|href="a01.jpg"] {
content: url(a01.jpg);
}
a01.jpgを直書きしてるのがなんかマヌケだ。
セレクタをpicture[xlink|href="a01.jpg"]::beforeとかにすれば
mozilla系でいけると思う。
opera,safariはCSSで名前空間使えなかった気がするので
xlink使わなければopera,safariでもいけると思う。

IEは・・・知らん。(behaviorで出来るかもね。)
193Name_Not_Found:05/01/12 23:46:11 ID:???
CSS文法のチェックをしてくれるサイトで日本語サイトは無いの?
194190:05/01/13 00:06:28 ID:???
>>192
そうですか。
それだと、大量に写真を表示しなければならないので、
あまり意味がないですね。

xslを使えばいいんかなぁ?

とりあえず、サンクスです。
195188:05/01/13 00:06:53 ID:???
あぁよく探したらこんなのあったよママン。
http://download.seesaa.jp/contents/win/net/html/10992/

っていうかローカルのCSSは検証できないのね…orz
196Name_Not_Found:05/01/13 04:13:22 ID:???
>>195
いや、そのソフトではUIが用意されてないだけで大元のサービスではローカルのCSSファイルも検証できるから。
ttp://jigsaw.w3.org/css-validator/
197196:05/01/13 04:14:58 ID:???
ってかよく見るまでもなくFAQに載ってるじゃねーか。
漏れももお前もFAQ嫁よ。>>195
198Name_Not_Found:05/01/13 16:18:45 ID:???
OS:WinXPproSP1 IE6
日記を書いてWebに上げています。
現在、テキストをセンタリングして書いています。
その部分のソースは以下です
テキストは適宜改行して、全体的に縦長の長方形になるように書いているのですが、
<BR>タグはあまり使用すべきではないと言うことなので、<BR>タグを廃して、
スタイルシートで指定したいのですが、ブラウザのサイズを変えたとき(小さくしたとき)にも、
きちんと読めるようにしたいのです。
日記部分のソースは
<h2><a name="d1Jan2005"> 見出し </a></h2>
<P>
ああああああああああああああああああああああ<BR>
  ああああああああああああああああああああああ<BR>
いいいいいいいいいいいいいいいいいいいいいい<BR>
   </p>
と言う感じです。
左右に33%ずつ余白を設定するようにすると、
ブラウザを小さくしたときに、テキストの表示される範囲がとても狭くなってしまいます。
なんとか、テキストを表示する領域を、ブラウザを大きくしたときと、小さくしたときで変化させない、
つまり、ブラウザが大きいときは余白が大きく、ブラウザを小さくするときは、テキストの表示幅ではなく、
余白を小さくするようにしたいのです。
このような方法は、ありますでしょうか。
よろしくお願いいたします。
199Name_Not_Found:05/01/13 16:52:45 ID:???
<!--
p{width: 70%; padding: 1px; background-color: #000000}
.box{border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid solid solid solid;
   border-color: #ffffff
}
-->
上のようなCSSでボックスを作っているのですが中央に表示させる事が出来ません。
どのようにすれば表示されるのでしょうか。
200Name_Not_Found:05/01/13 17:10:01 ID:3vSX1j+B
>>198
テキストを表示しているブロックの幅を適当に決めて、
左右のマージンをautoに。
201200:05/01/13 17:11:54 ID:???
下げ忘れたすまそ。

>>198
つか、幅固定したらウィンドウ幅がソレを下回ったときにはみ出しちゃうんだけどね。
ウィンドウ幅に連動して左右のマージンの値を変動させる、ってのは
CSSだけではちと無理っぽいかも。JavaScriptを使えばかんたん。
202Name_Not_Found:05/01/13 17:16:59 ID:???
>>198-201
控えめに%指定すれば良いのでは。左右それぞれ33%ってのは大きすぎる気ガス。
まぁ人の勝手だけどさ。10%とかなら影響でることって少ないと思うけど。

>>199
widthを指定せずに、
 margin-right : 15%
 margin-left : 15%
にしる。

IEを標準準拠で動かせるなら
 width : 70%;
 margin : 0 auto
とかでも良いけど。
203Name_Not_Found:05/01/13 17:57:25 ID:???
>>202
おお、できました。
alignとかcenterとかそういったものでやろうと思っていたので前者みたいな
発想ができませんでした。なるほど、いま理解できましたありがとうございます。
204Name_Not_Found:05/01/13 22:27:31 ID:???
---------------------
|    タイトルとか    | ←height固定
---------------------
|    メニューとか   | ←height固定
---------------------
|               |
|               |
|               |
|     iframe      | ←ブラウザの残りのheight
|               |
|               |
|               |
|               |
---------------------
てのをやろうとしたんですがiframeの部分のheightが上手くできません。
テーブルを使えばできるんですが、なんとかスタイルシートでやる方法はないですか?
205Name_Not_Found:05/01/13 22:40:54 ID:???
>>192
スレ違いだが、XLinkなんて誰もが認める失敗規格。
(標準化に時間をかけ過ぎて、誰もまともに実装しなかった。)
(XPointerの仕様を確定できずに作業部会は解散してしまった。)
(HLinkと不整合。)
そんなものすすんで使う物でもない。
206Name_Not_Found:05/01/13 23:23:41 ID:???
>>204
iframe の是非はともかく、固定配置を使えば簡単にできる。
案の定、M$ Internet Explorer ではまったく駄目だが。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title>test</title>
<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }
#header, #menu, #iframe {
position: fixed;
left: 5px; right: 5px;
border: solid 1px;
}
#header { top: 5px; height: 50px; }
#menu { top: 60px; height: 50px; }
#main { top: 115px; bottom: 5px; }
iframe { width: 100%; height: 100%; border: none; }
-->
</style>

<div id="header">
<p>header</p>
</div>
<div id="menu">
<p>menu</p>
</div>
<div id="main">
<iframe src="../../VA022006/index.html" width="100%" height="100%"></iframe>
</div>
207206:05/01/13 23:33:26 ID:???
実験で >>4 のサイトを個人的に DL したファイルを
使ったんだけど、パスをそのまま晒してしまった。orz
208206:05/01/13 23:37:04 ID:???
おまけにスタイルを間違えた…
× #header, #menu, #iframe {…}
○ #header, #menu, #main {…}
209204:05/01/13 23:50:11 ID:???
>>206
ここまで作っていただきありがとうございます。
固定配置でやればいいのか・・・勉強になります。
Netscape7.1ではきちんとできてました。
でもIEではだめみたいですねー。
ifameのheightを100%で指定すると、
mainのボックスのheightではなく全体のheightとなるみたい?
結局のところIEでもこれをやりたい場合テーブルを使うしかないのか・・・
210Name_Not_Found:05/01/14 06:15:18 ID:???
>>206>>209
いや、この場合fixed使わなくてもabsoluteで良いんじゃないか?
それならIEも対応してるし。
211Name_Not_Found:05/01/14 06:45:23 ID:???
>>204
overflowを応用した疑似フレームってのがFAQにあるから見なさい。
212Name_Not_Found:05/01/14 13:20:56 ID:???
>>210-211
Mozilla とかなら絶対配置とかでもできるけど、MSIE では無理では。
top と bottom を同時に指定したときに、ボックスが伸縮しないから。

上部にあるタイトル部とメニュー部の高さ(固定値)を差し引いて
残った閲覧領域の高さにメイン部を合わせなければならないけど、
bottom を使わずにどうやって、メイン部の高さを導き出しますか?
213Name_Not_Found:05/01/14 13:29:49 ID:???
>>212
回答に不満があるなら自分で結論を導け。
議論なら広告の裏にでも書いておけ。
214212:05/01/14 15:41:15 ID:???
>>213
言っておくけど、漏れは >>204 ではないので。
それに、他にどの様な方法があるのか質問しているのですが。
漏れを >>204 と決め付け、議論厨と決め付ける根拠がナゾ。
215Name_Not_Found:05/01/14 16:03:46 ID:???
>>214
それを最初に記すのがマナーと言うもの。

 ちなみに俺は>213ではない
216Name_Not_Found:05/01/14 16:35:16 ID:t+sgHrth
┏━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
┃     ┃                     ┃
┃     ┃ @                   ┃
┃  A  ┃                     ┃
┃     ┣━━━━━━━━━━━━━━━━━━━━━┫
┃     ┃                     ┃
┃     ┃                     ┃
┃     ┃                     ┃
┃     ┃   B                 ┃
┃     ┃                     ┃
┣━━━━━┫                     ┃
┃     ┃                     ┃
┗━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
@にh1(画像)、Aにメニュー、Bに本文という配置を考えていて、
テーブルに依存しないで実現させたいです。
ソースに出てくる順番が@ABなので、
A@Bの場合と違って単純にfloatは出来ません。
position: absoluteを使うと、Firefoxで謎の空白が出来たりします。
IE6、Firefox、Operaあたりでこれを実現する方法はありますか?
あったら教えて下さい。
217Name_Not_Found:05/01/14 16:47:48 ID:???
ソースに出てくる順番が 2.1.3 で出来るなら
そうすれば医院で内科医?

  機種依存文字は使わないように。
218Name_Not_Found:05/01/14 16:53:16 ID:???
そういえば機種依存文字だった、忘れてました。
2,1,3でやるとulで書いたメニューがソースの頭に来ることになるんですよね。
Strictの話題はスレ違いですけど、それは何となく落ち着かないんです。
219Name_Not_Found:05/01/14 16:58:43 ID:???
Strict ?
220Name_Not_Found:05/01/14 17:04:26 ID:???
>>218
落ち着け 落ち着け 深呼吸して落ち着くんだ。
221Name_Not_Found:05/01/14 18:15:37 ID:???
http://streettricks.fc2web.com/TTTEST.html
こんな感じにページを作りたいのですが、上手く作れません。
HTML4.01 Strictで作っているので、テーブルレイアウトを使わないで作っています。
フロート等のやり方がいくつかあるみたいですが、上手く作れないで困っています。

CSSでこのデザインを再現してもらえないでしょうか?
222Name_Not_Found:05/01/14 18:20:54 ID:???
>>221
マルチ
223Name_Not_Found:05/01/14 18:22:25 ID:???
「自分で勉強する気はない! だから、お前達やってみろ。」ってか?
224Name_Not_Found:05/01/14 18:24:37 ID:???
 誘導されたから来たんだろ

>>221
どのへんがうまく作れないの?
225Name_Not_Found:05/01/14 18:31:09 ID:???
>HTML4.01 Strictで作っているので
 嘘はつくなよ嘘は。
226Name_Not_Found:05/01/14 18:32:23 ID:???
>>221
http://pc5.2ch.net/test/read.cgi/hp/1105592910/168
> タイトルと、その右の広告の下につく線が上手く繋がらなくて…

横に並べた要素の下ボーダーの位置や横ボーダーの長さをそろえる、
ってのはFAQなみに良く出てくるけど、
その親要素をうまく使うのですよ。
227Name_Not_Found:05/01/14 18:38:12 ID:???
>HTML4.01 Strictで作っているので、なるべくStrictなHTMLで、デザインはCSSでお願いします。

 50マソ出せ。俺が作ってやる。
228Name_Not_Found:05/01/14 18:38:16 ID:???
マルチしねよ
229Name_Not_Found:05/01/14 18:39:28 ID:???
>>226
ここの住民はてめーの楽チングッズじゃねーんだよ
230 ↑ :05/01/14 18:45:53 ID:???
アンカー違ってねーかぁー?
231226:05/01/14 18:46:45 ID:???
(´・ω・`)
232Name_Not_Found:05/01/14 18:48:32 ID:???
CSSなんかあるのが悪いんだよ。
fontだけで十分
233Name_Not_Found:05/01/14 19:04:06 ID:???
まあまあ 皆の衆 餅付け

>>221
このスレは自分で勉強して何とか作りたいと頑張ってるナイスな奴らを応援するスレです。
「再現してくれ」
「なるべくStrictなHTMLで、デザインはCSSでお願いします。」
こんな人には誰も応援しません。
おみおつけで顔を洗って、おととい来てください。
234Name_Not_Found:05/01/14 19:20:21 ID:???
ナイスな奴らってのがレトロでいいな。
235Name_Not_Found:05/01/14 19:37:35 ID:???
TABLEデザインのサイトをCSSでどこまで再現できるか
http://pc5.2ch.net/test/read.cgi/hp/1078642389/
236221:05/01/14 20:03:08 ID:???
>>224
タイトルと、その右にある広告の部分の下の線が上手くあわせられないのが困ってます。
フロートだと余白が勝手に出来ちゃって、絶対指定だとズレたりして…

「作ってもらえませんか?」と書いてますけど、アドバイスで結構です。
書いた後に図々し過ぎると気づいたので…。
237Name_Not_Found:05/01/14 20:04:58 ID:???
>>236
しつこい
238Name_Not_Found:05/01/14 20:35:35 ID:???
>>236
じゃぁ、アドバイスね。
                         自分で勉強しろ。
239227:05/01/14 20:41:25 ID:???
>>236
アドバイスなら 25マソでいい。 どうだ?
240Name_Not_Found:05/01/14 20:47:04 ID:???
>>236
雑魚はビルダーでも使ってなさいってこった
241226:05/01/14 20:57:55 ID:???
>>236
(´・ω・`)
242Name_Not_Found:05/01/14 21:15:23 ID:???
>>236
自分で使ったソースをさらしなよ。
そしたらアドバイスがもらえるよ。
243221:05/01/14 21:16:58 ID:???
>>242
今頑張ってソース作ってます…
244221:05/01/14 21:28:38 ID:???
http://streettricks.fc2web.com/test.html
大分理想の形になったと思います。

あとは、幅を固定しないでこれを実現したいのですが、
そうするとズレたりしてしまいます。

フロートで、左はピクセル指定、右はウィンドウ幅から左のボックス分だけ引いた幅、
と言う設定の仕方はないのでしょうか?
245Name_Not_Found:05/01/14 21:32:14 ID:???
馬鹿丸出しだな
246Name_Not_Found:05/01/14 21:32:38 ID:???
>>244
しつこい
247Name_Not_Found:05/01/14 21:37:31 ID:???
お前らよく飽きないな。悪口ばっか言ってんなよ。
アドバイスするならする。しないなら無視。
それぐらいのことできるだろ。そこまで出来ないほどバカじゃねえよな?
248Name_Not_Found:05/01/14 21:39:56 ID:???
自演乙
249221:05/01/14 21:44:10 ID:???
position:absolute;での指定は良くないでしょうか?
250Name_Not_Found:05/01/14 21:46:30 ID:???
しるかボケ
251Name_Not_Found:05/01/14 21:55:31 ID:???
>>249
ホームページビルダーのどこでも配置モードで大失敗する例が多いのでアレだけど、
うまくやれば問題ないよ。
252Name_Not_Found:05/01/14 22:37:22 ID:Fo6CsLel
レイアウトの為の透過GIFと決別すべく

今まで、
<img src="spacer.gif" width="16" height="16">
などとしていたところに、cssを使って同様の空白を作りたいのですが何か方法は御座いませんでしょうか。

なんらかの方法で縦横の長さを自由に変更できる四角形の空白を用意したいです。
<table>や<iframe>にdisplay:inlineを付けたりしましたが、あまりしっくり来ずです、、、
253Name_Not_Found:05/01/14 22:51:14 ID:???
>221
その程度ならfloatでもできるよ
HTMLの記述が間違ってるとCSSが正しくてもきちんと表示されない

>252
marginとかpaddingを調べてみそ

どっちもHTMLをもう少し勉強するべきじゃね?
254まだ初心者ですが、:05/01/14 22:52:07 ID:???
>>249
これ↓とか参考になりませんか?

“3カラムの作り方”: Unmovabletype
http://unmovabletype.org/archives/2004/09/umt_3ctmpl_inside.html
255Name_Not_Found:05/01/14 22:54:05 ID:???
CSS(スタイルシート)ってのはHTMLを便利にしたもの?
初心者はHTMLでサイト作りして、なれてきたらCSSを導入みたいな
流れでいいのかしら?
256Name_Not_Found:05/01/14 23:09:10 ID:???
違う
257Name_Not_Found:05/01/14 23:14:29 ID:???
最初からCSSも勉強した方がいいって事?
258221:05/01/14 23:24:19 ID:???
なんとか自己解決できそうです。ありがとうございました。
259Name_Not_Found:05/01/14 23:26:53 ID:???
ほんとクズだな
260Name_Not_Found:05/01/14 23:27:38 ID:???
>>257
俺は、最初からCSSの勉強をしたよ。
だから<font>タグの使い方いまだに知らない。

というかHTMLって何を勉強するの?
261Name_Not_Found:05/01/14 23:39:14 ID:???
おーい
質問スレッドの定めなのかもしれんが、これはちょっとあまりにも低レベルすぎないかー
262Name_Not_Found:05/01/14 23:44:17 ID:???
だまってろデブ
263Name_Not_Found:05/01/15 00:33:40 ID:bcZ/HOpw
あるページをonClick="window.open・・・・で表示させているのですが、
その中でMENUBAR=NOと指示しているにもかかわらずマック版のIEでは
メニューバーもツールバーも表示されてしまいます。ウィンドウズ版IEでは
両方ちゃんと非表示になっています。これって解決できないのでしょうか?
264Name_Not_Found:05/01/15 00:54:06 ID:???
>>263
macユーザーはIEなど使わないと思うんだが
265Name_Not_Found:05/01/15 00:54:38 ID:???
マカーはサファリだよな!
266Name_Not_Found:05/01/15 01:40:18 ID:???
俺はIEしか使わんぞ。てかサファリが動かん!
267Name_Not_Found:05/01/15 01:41:02 ID:???
マックなんてもう売ってないだろ?
268Name_Not_Found:05/01/15 01:49:35 ID:???
>>266
OS9?
9の時はネスケ使ってたなあ

>>267
田舎ではもう売ってないかも知れないなあ・・
269Name_Not_Found:05/01/15 02:31:55 ID:???
いーじゃんMacのIEぐらい
むしろツールバー等を隠す必要性が分からんのだが
ともかくスレ違いだ

はい次どぞ〜
270Name_Not_Found:05/01/15 04:49:41 ID:???
floatを使用し
┌┬┬┐
||||
│|||
└┴┴┘

のような枠組みを作っているのですが、左の枠の中のテキスト量が多くなり縦の長さが一番長くなったときに
中央右側の枠線が下まで届かなくなってしまいます。
枠が壊れないようないい方法ないでしょうか?
271Name_Not_Found:05/01/15 04:50:56 ID:???
┌┬┬┐
||||
||||
│|└┤
└┴─┘

のような状態になってしまうということです。
272Name_Not_Found:05/01/15 04:53:06 ID:???
そのAA作る労力を他にいかせ
273Name_Not_Found:05/01/15 13:34:51 ID:???
>>253
HTMLが正しくて、CSSも正しくて、それでも崩れるので全てをCSSではまかなえません。
IEは言うに及ばずMozillaでさえふざけた仕様だから仕方ないですよね。

しかし初心者スレ同様こっちのスレも荒れてきたねぇ・・・
やっぱ冬だから仕方ないのかなぁ・・・
274Name_Not_Found:05/01/15 13:58:42 ID:???
ふざけた仕様だというなら、好みのブラウザ作れば?

  己のヘタレをブラウザのせいにするな。
275Name_Not_Found:05/01/15 15:18:41 ID:???
>>270-271
背景画像に線を付けてみたら?
276Name_Not_Found:05/01/15 15:48:21 ID:???
CSSで // を使ったコメントアウトは
Mozilla、Operaでは効いてIEでは効かないみたいですけど
もしかしてこれって元々仕様にはない方法ですか?MozillaとOperaの独自拡張?
277Name_Not_Found:05/01/15 15:58:59 ID:???
仕様書を。
278Name_Not_Found:05/01/15 17:36:22 ID:???
CSSバグ辞典スレッドって、「このブラウザの表示方法が正しい」とか、
具体的に書いてないから分かりづらい。
279Name_Not_Found:05/01/15 18:11:28 ID:???
>>270
頭を使え。
それでも解らなかったらCSSはやめろ。
向いてない
280Name_Not_Found:05/01/15 18:50:58 ID:???
>>270
現象が再現しないんだが.....
(当方WinXP SP1、filefox1.0およびIE6.0)

<html>
<head>
<style>
div.a{width:3em;float:left;}
div.b{width:3em;float:left;}
div.c{width:3em;float:left;}
</style>
</head>

<body>
<div class="a">あああああああああ</div>
<div class="b">いいいいいいいいい</div>
<div class="c">う</div>
<br style="clear:left">
</body>

ちゃんと表示は
------------
あああいいいう
あああいいい
あああいいい
-----------
になるよ。
281280:05/01/15 18:52:10 ID:???
すまん、よく読んでなかった。
「枠線」が問題だったのね....
282Name_Not_Found:05/01/15 20:38:01 ID:???
なんかこのスレには基地外が住み着いてるみたいですねw
283Name_Not_Found:05/01/15 21:33:56 ID:GLd59Xme
スタイルで段組をしたのですが、
連続した半角英数が回り込んでくれず、
枠からどんどんはみ出してしまいます。
widthで幅していしても、ウィンドウの端まで行っても
改行されずに続いてしまう感じです。

例えば、簡単にaaaaaaaaaaaaaaaaaaaaaaaaaa....と続く文字があると、
┌──┐
|    |
|aaaaaaaaaaaaaaaaaaa
|    |
└──┘

のようにはみ出しつづけてしまいます。

すみません、非常に初歩的な事だと思いますが、
これを回避するにはどうしたらよいのでしょうか?
284Name_Not_Found:05/01/15 21:46:14 ID:???
overflowで設定するけど改行される設定はないらしい
285Name_Not_Found:05/01/15 21:56:26 ID:???
>>284
うーん、そうなんですか。
以前URLを貼り付けられた際に
上のような状態になった事が何度かあったので、
それを回避しようと色々試している所でした。

とすると、XHTMLサイトには連続した
半角でデザインが崩れるリスクがあるんですね。
286283 (285):05/01/15 21:57:05 ID:GLd59Xme
あ、283です。
287Name_Not_Found:05/01/15 22:28:06 ID:???
marginをマイナス指定するとかなんとか50レスくらい前に貼られたリンク先の中の人が言ってた>はみ出し回避
ついでに壊れない(と思われる)3カラムの作り方もそこに出てた。
288Name_Not_Found:05/01/15 23:38:18 ID:???
289270:05/01/15 23:40:25 ID:???
後ろに画像を表示して線を引くことにしました。
290Name_Not_Found:05/01/15 23:44:12 ID:???
>>270-271
入れ子にしなさい。
┌───┐
|┌┬┐|
|||||
|||||
│└┴┘|
└───┘
291270:05/01/15 23:52:54 ID:???
入れ子にしてやって>271になりました…
今は外の枠のバックに線の画像を入れてます
292Name_Not_Found:05/01/16 00:28:31 ID:RC9DXhte
ほしゅ
293Name_Not_Found:05/01/16 00:29:18 ID:???
>>291
入れ子の入れ子にしなさい。
294Name_Not_Found:05/01/16 01:11:17 ID:???
>>276
>>277
Mozilla/Operaで効いてるように見えるのはただ単に不正なセレクタとみなされてルールごと無視されてるとかだろ
295Name_Not_Found:05/01/16 03:37:06 ID:dRjPmmtR
最近はロリが多くてヤバイ世の中だな・・・

こいつやばすぎるよ。。
人間じゃねえ
行方不明の7歳と9歳3か月ぶりに帰宅するも皆妊娠してた
http://news18.2ch.net/test/read.cgi/dqnplus/1105713035/
296& ◆ICTkZMBzmc :05/01/16 08:42:35 ID:???
>>295
その7才ならロリではないだろ
297Name_Not_Found:05/01/16 13:31:38 ID:J4zlhVzA
>>291
入れ子の入れ子にしなさい。
298Name_Not_Found:05/01/16 13:33:14 ID:???
きれいなテーブルレイアウトをしたいです
299Name_Not_Found:05/01/16 13:44:16 ID:???
>>270
常に最も左の枠がテキスト量最大、
という条件があるなら入れ子で出来ると思うけど。
300Name_Not_Found:05/01/16 14:27:07 ID:WhLwdGHY
質問です。

hr { border-top: 1px dotted #ff9900; clear: both; height: 1px; }

これをネスケでも表示できるようにするにはどうしたら良いのでしょうか
301Name_Not_Found:05/01/16 15:05:07 ID:???
>>300
ブラウザが対応していないものはどうしようもない
302300:05/01/16 15:16:31 ID:WhLwdGHY
分かりました諦めます。
ありがとうございます
303270:05/01/16 15:17:53 ID:???
>299

┌───────┐
│┌────┐ |
│|┌─┐ | |
│||最|中|右|
│||大|央| |
││└─┘ | |
│└────┘ |
└───────┘
ということですよね。
これなら左に来ているところが最大になれば引っ張られるように
周りの枠も大きくなるのですが、どれが最大量になるかは決まっていないので
中央または右が大きくなった場合にやはり崩れてしまいます。
304270:05/01/16 15:19:13 ID:???
壮絶に崩れた・・・

┌───────┐
│┌────┐  |
│|┌─┐  |  |
│||最|中|右|
│||大|央|  |
││└─┘  |  |
│└────┘  |
└───────┘

ということです。
305Name_Not_Found:05/01/16 16:42:53 ID:???
body{font-family: verdana ;}
div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; }
div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; }

<body><div class="a">hoge</div><br><br>
<div class=b"">hoge</div></body>
として書いたとき

┌──┐
│hoge│
│   │
└──┘

┌──┐
│   │
│hoge│
└──┘

のようにaには字の頭が線にそろって下が空くような状態になるのですが、フォントの指定をしていないbでは
なぜか頭が線に揃わずに表示されます。フォントの指定をしているときとしていないとき、なぜ表示方法が変わるのでしょうか?
あと、両方がbodyからフォントの種類は引き継いでいるはずなのに違う結果となる理由を教えてください。
306Name_Not_Found:05/01/16 17:42:00 ID:???
>>305
変わるのは君だけと思われ。
><div class=b"">
<div class="b">
307305:05/01/16 17:50:06 ID:???
あ、すみません、こっちで書き直すときにミスしました。
<div class="b"> というような状態にはちゃんとなってます。
308305:05/01/16 17:54:32 ID:???
これだけでやってみたらちゃんと表示されました。
他のところに原因があるのだろうか…
309Name_Not_Found:05/01/16 18:17:05 ID:???
>>308
せっかく>>305みたいなのを書いたなら自分で実証するといいよ。
もとのソースのcssを少しずつ>>305に追加していったら何が原因かきっと分かるから、
がんばって確認してくれ。

それでも分からなかったら、もっと詳しくソースを晒せ。
310305:05/01/16 19:06:38 ID:???
<div class="1"><div class="2">aaa</div></div>
となっていて、1にline-height: 140%;
があったのが原因のようでしたが、なぜこれがフォントの種類を指定をすると無効になるのでしょうか?
ソースはこのようになっております。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<STYLE TYPE="text/css">
<!--
body{font-family: verdana ;}
div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; }
div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; }
div.c{ line-height: 140%;}
-->
</STYLE>
</head>
<body>
<div class="c"><div class="a">hoge</div><br><br>
<div class="b">hoge</div></div></body>

</body></html>
311Name_Not_Found:05/01/16 20:28:20 ID:???
>>310
正しいHTML書こうよな。
312Name_Not_Found:05/01/16 20:34:28 ID:???
みなのしゅう HDMLってなんだい?
313305:05/01/16 20:38:54 ID:???
</body>が2つありますね…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<STYLE TYPE="text/css">
<!--
body{font-family: verdana ;}
div.a{ font: 9px verdana; clear: left; height: 20px; border: 1px solid #000000; }
div.b{ font-size: 9px; clear: left; height: 20px; border: 1px solid #000000; }
div.c{ line-height: 140%;}
-->
</STYLE>
</head>
<body>
<div class="c"><div class="a">hoge</div><br><br>
<div class="b">hoge</div></div>
</body></html>

でした。
314Name_Not_Found:05/01/16 20:53:07 ID:???
そんなことじゃないよ。
315Name_Not_Found:05/01/16 20:54:10 ID:???
trueだな!
316Name_Not_Found:05/01/16 20:57:17 ID:???
>>314
質問スレッドなんだからさぁ、
何か問題があれば、上級者はどんどん指摘すれば
いいじゃないか
何をもったいぶってんのさ
317Name_Not_Found:05/01/16 20:59:54 ID:???
>>316
君間違ってるよ。 答えないじゃなくて 答えられない低能が正解
318282:05/01/16 21:00:25 ID:???
>316
>282
319Name_Not_Found:05/01/16 21:05:28 ID:???
馬鹿ばっか
320Name_Not_Found:05/01/16 21:10:19 ID:???
>>316
スレタイを(ry
321Name_Not_Found:05/01/16 21:11:08 ID:???
>>316
何逆ギレしてんの
322282:05/01/16 21:12:50 ID:???
なんかいきなり速度上がったなw
323Name_Not_Found:05/01/16 21:14:00 ID:???
>>319
  Λ_Λ  
 ( ´∀`)< オマエモナー
 (    ) 
 | | |  
 (__)_)  
324Name_Not_Found:05/01/16 21:17:55 ID:???
>305
>div.a{font: 9px verdana;}
>div.b{font-size: 9px;}
なんでこんな記述なの?
325306:05/01/16 21:39:15 ID:???
>>305
もっと基本から忠実に勉強して下さい。
326Name_Not_Found:05/01/16 21:58:56 ID:???
>>305
「font: 9px verdana; 」という表記では、何が省略されてるのかを考えれ。
327305:05/01/16 22:02:11 ID:???
line-heightも含まれてたんですね…ありがとうございました。
328Name_Not_Found:05/01/17 06:15:04 ID:???
書き写すときにミスするような奴は参考にしてるサイトから書き写すときにもミスしてるだろ
329Name_Not_Found:05/01/17 19:02:18 ID:???
サイトを作っていて、文字色にオレンジ色を使いたいなぁ、とか、
「ここは緑色にしたいなぁ」とか、文字の色を決めたくなるときがありますよね?
だからと言って「class="red"」等とつけるのは良くない、と言いますよね。

そこに特定の色を使いたい時は、どうしたら良いクラス名がつけられるでしょうか?
330Name_Not_Found:05/01/17 19:50:41 ID:???,
>>329
別にいいんじゃないかい
331Name_Not_Found:05/01/17 19:52:09 ID:???,
>>329
ttp://www.kanzaki.com/docs/html/htminfo17.html

こういうことか?
とりあえず>>1は読もうな
332Name_Not_Found:05/01/17 21:40:35 ID:3eBYQ2Gp
フォームのテキストエリアの背景を透明にして、テキストエリア内に
gif画像の背景を入れたいのですが、どのようなタグを
どこに記入したらよいでしょうか?
backgroundで指定することなどは大体見当がつくのですが、
挿入する位置がいまいち分からなくて。
333Name_Not_Found:05/01/17 22:51:22 ID:Cy7s2DJQ
フィルターでテーブルを透過させたのですが、当方、ギャラリー
サイトなので、マックユーザーも閲覧することがあります。
基本的にフィルターは使うな。ということなんでしょうが・・
フィルター機能と同等のデザインを可能にする別の方法はありま
すでしょうか?

また、未対応ブラウザで起きる不具合は「透過されず地の色が出る」
という障害だけなのでしょうか?
表示すらされない。等・・の障害が起きますか?
334Name_Not_Found:05/01/17 23:07:48 ID:???
>>332
CSS

>>333
マックというより、MSIE意外はみんなだめぽ。
335333:05/01/17 23:22:54 ID:Cy7s2DJQ
<TABLE style="filter:alpha(opacity=○○); -moz-opacity:○○;">

フィルター部にこんな感じで -moz-opacity:○○; をつけるとある程度
対応できるって本当ですか?

336Name_Not_Found:05/01/18 00:18:45 ID:???
>>335
-moz-opacityはgekoの独自拡張です。

なにがしたいの詳しく和下欄から何ともだけど
アルファ値持ったpngを背景に指定でも同じようなことが出来るかも。
pngはIEだと見れないんだっけか?
337Name_Not_Found:05/01/18 00:24:59 ID:???
>>336
pngのアルファチャンネル使えるのって、MacIEくらいしかないんじゃなかったっけ?
338Name_Not_Found:05/01/18 00:25:47 ID:???
>>336
Gecko も KHTML も opacity: hoge; で OK よ。
339Name_Not_Found:05/01/18 00:28:04 ID:???
>>337
んな訳ないだろ。まともに対応してないのは Win IE だけ。
340Name_Not_Found:05/01/18 00:31:58 ID:5KEHQu4t
皆様始めまして。現在cssを勉強中の者でして、解決つかない事がありまして、ご相談差し上げます。
メインページ
<html>
<head>
<title>メインページ</title>
</head>
<frameset>
<frame src="content.html" name="content">
<frame src="menu.html" name="menu" >
</frameset>
</html>

ページ選択
<html>
<head>
<title>menu</title>
</head>
<body>
<a href="a.html" target="content">a</a>
<a href="b.html" target="content">b</a>
</body>
</html>
↑と簡単なhtmlでのframe使用のソースを書いたのですが、
これをcssで再現するにはどうしたらいでしょうか?
レイアウトのやりかたは理解できたのですが、リンク
(a.htmlとb.htmlの切り替え?リンク設定ですね)
のやりかたにつまづいております。
どなたかご教授願えませんでしょうか?
341Name_Not_Found:05/01/18 00:44:05 ID:Uwubor8N
根本的に勘違いしてるでしょ、それ。
釣り。。?
342Name_Not_Found:05/01/18 00:53:36 ID:5KEHQu4t
>>341
いえ釣りではないです。
いろんなサイトを見て、メニューとターゲットが分かれてるのに、
フレームを使ってないって言う事は、>>340みたいな事ができるんだと思ってたのですが…。
343Name_Not_Found:05/01/18 01:06:21 ID:???
>>8 で紹介されてる
擬似フレームをやりたいの?
344Name_Not_Found:05/01/18 01:13:09 ID:5KEHQu4t
>>343
はい。そうなんです。
345Name_Not_Found:05/01/18 01:49:50 ID:???
>344
「擬似」の意味をわかっているのだろうか。
フレームを使っているようには見えるかもしれないが、
実際は使っていない。だから頭に「擬似」がついている。
擬似フレームを使いたいのであれば、target属性のことは忘れたほうがよい。
target属性自体が用なしになってすっきりするから。
346Name_Not_Found:05/01/18 11:51:09 ID:???
>>344
「擬似」というのは、挿入したように見せてはいるが
実は、挿入していないということだぞ。
347Name_Not_Found:05/01/18 12:03:24 ID:???
おまえら、>340が疑似餌だということに早く気付け。
348Name_Not_Found:05/01/18 13:47:36 ID:oe/fXn7H
<br><br>みたいな記述で整形するのは、cssを理解していない

…という記事をみてドキッとしたのですが、この辺をもう少しだけ詳しく教えて頂けないでしょうか。
楽なのでついついbrを多用してしまいます。
349Name_Not_Found:05/01/18 14:29:24 ID:???
>>348
<br>を連発したいのは、文字・絵・表などのブロックの間隔をあけたいからでしょ。
その間隔のためにmarginというプロパティがあるわけです。
350348:05/01/18 14:44:27 ID:???
>>349
br多用がcssの概念に反する理由が、おかげで良く分かりました。

ご指摘通り、特に文字の間隔を空けるために多用していたのですが、
これからは積極的に<p>などを使っていこうと思います。レスありがとうございました。
351Name_Not_Found:05/01/18 15:11:23 ID:???
質問者の鏡だ。
352Name_Not_Found:05/01/18 17:14:50 ID:???
鑑だ。
353351:05/01/18 17:18:12 ID:???
orz
354Name_Not_Found:05/01/18 18:55:29 ID:???
どっちも正しいよ
355351:05/01/18 19:17:36 ID:???
自粛しますorz
356333:05/01/18 19:55:47 ID:v5X2f+Q0
やりたいことは、ただなるべく多くに対応した「背景を透かしたテーブ
ル」を作りたいという感じなのですが、例えば
<TABLE style="filter:alpha(opacity=○○); -moz-opacity:○○;">
のテーブル背景画像をpngで透過画像に設定することで、MacIEではpngで
透過表示させ、他ブラウザでは透過処理されない背景画像をCSSで透過す
るという具合に細工することは可能なんでしょうか?

理論的におかしかったりしますか?
357Name_Not_Found:05/01/18 20:53:22 ID:???
だからCSSで透過できるブラウザというのはIEだけなわけで・・
358340:05/01/18 21:01:48 ID:5KEHQu4t
>>340です。
レスくださった皆様ありがとうございました。
疑似という言葉は確かに引っかかっていました。
もう一度勉強やりなおしてきます。
359Name_Not_Found:05/01/18 21:51:05 ID:ouGNw5q6
モジラでも透過出来るけど重たくなるから素人にはオススメ
360Name_Not_Found:05/01/18 21:59:17 ID:???
>>356
WinIE以外はアルファチャンネルPNGが使えるので
opacity使う必要性がない。

ついでに。既に-moz-opacityはopacityになっている。
opacityにはGecko系とSafariが対応。

もひとつ。filter:Alphaもopacityも背景だけでなく、内容も透けるぞ。
AlphaImageloaderっつーfilterもあるけど、背景に重なるのでいまいち使えん。
361333:05/01/18 22:43:17 ID:v5X2f+Q0
>>357-360
有難うございます。

皆さんの言われることから

WinIEはCSSで。
それ以外はpngで。透過を実現させる為に>>356のように
CSSとpngを重複して指定してみようと考えてみたのですが。

pngを背景にしておけばMacIEでも透過可能で、WinIEでは
pugは意味無いので、それをCSSにかけるという風に・・・

的はずれでした??
362Name_Not_Found:05/01/18 23:09:13 ID:???
ドットを交互に間引いたGIF画像を作れば
どのブラウザでも半透明。ウマー
363Name_Not_Found:05/01/19 00:26:29 ID:???
CSSでtableのセルごとの幅を指定するのはどうすればいい?
td.c1{width:6em}
364363:05/01/19 00:28:52 ID:???
ミスった。
>>363の二行目みたいにしたんじゃいけないの?
365Name_Not_Found:05/01/19 10:05:25 ID:???
その要素に挟まれて(含まれて)いる状態では無いのに、
その属性を継承してしまうような現象が、しばしば起こってしまい悩んでいます

例えば次のソースなんですが

<html>
<style TYPE="text/css">
<!--
ul.head{ list-style: square; }
ul.contents{ list-style: circle; }
li.head{ font-weight: bold; }
-->
</style>
<body>

<ul class=head>
<li class=head>hoge</li>
<ul class=contents>
<li>foo</li>
<li>baa</li>
</ul>
</ul>

私としては、hogeだけボールドで表示して欲しくてたまらないのですが、
何故かfooやbaaまでもボールド表示されてしまい、しょんぼりしてます

IE6でテストしています
罵倒でも良いのでご指摘頂ければ本当に助かります、昨日から悩みっぱなしで…
366Name_Not_Found:05/01/19 11:10:37 ID:???
<style TYPE="text/css">
<!--
ul.head{ list-style: square;font-weight: bold; }
ul.contents{ list-style: circle;font-weight: normal; }
-->
</style>
</head>
<body>
<ul class=head>
<li>hoge
<ul class=contents>
<li>foo</li>
<li>baa</li>
</ul>
</li>
</ul>

このHTMLはアリだったかな?
367Name_Not_Found:05/01/19 11:13:32 ID:???
li.hoge{ font-weight: normal; } 入れて

<li class=hoge>foo</li>
<li class=hoge>baa</li> にでもしておけば?
368Name_Not_Found:05/01/19 11:15:08 ID:???
あちゃー
369Name_Not_Found:05/01/19 11:31:47 ID:???
>365
<ul>の直下に<ul>は置けない。
<ul>の子供になれるのは<li>のみ。
370365:05/01/19 11:33:38 ID:???
>>366-367
お二人ともレスありがとうございました

となると、「属性はなるべくul側で指定する」
「liで属性を指定する場合は、なぜか他のliにも影響が出てしまうので、li毎に属性を指定しなおす必要がある」

というまとめで良いのでしょうか
ちょっとまだ腑に落ちませんが、目的は達せそうです、重ね重ね感謝です
371365:05/01/19 11:35:25 ID:???
ああーしまった書いているうちに

>>369
なるほど!!!すっきりさっぱりと、納得しました
ありがとうございました!
372Name_Not_Found:05/01/19 11:47:06 ID:???
>>365-367
別に解決してるから無駄な突っ込みといわれればそれまでだけどさ、
こういうときこそ文脈セレクタだろ。無駄にクラス名を増やすことないだろ。

li.head ul { font-weight: normal; }
373Name_Not_Found:05/01/19 13:12:08 ID:???
>>363
そんなときにはcol要素とかcolgroup要素を使うといいよ。
374Name_Not_Found:05/01/19 13:32:46 ID:???
>>373
Geckoでは未だに無視されない?
375Name_Not_Found:05/01/19 15:10:46 ID:???
>>374
いや、手元のFirefox 1.0ではcol要素に対してwidthプロパティーが適用されたぞ。
376Name_Not_Found:05/01/19 16:34:07 ID:???
すみません質問です
ページ毎にメニューを付けているのですが、自動改行された時など、上手く背景画像が表示出来ません
.navi{border-bottom:solid 1px #000; }とかは上手く行くのですが、
背景画像だとliのテキストだけが、改行されてしまいます

/css/
.navi{background:url(./hoge.gif) repert; }
.navi li{margin: 0; padding: 0;display:inline; text-align:center; padding-left:10px;}

/html/
<ul class="navi">
<li><a href="./index.html">index</a></li>
<li><a href="./hoge1.html">hoge1</a></li>
 ・
 ・
<li><a href="./hoge9">hoge9</a></li>
</ul>
377Name_Not_Found:05/01/19 18:00:27 ID:???
>>376
たいぽ。
378Name_Not_Found:05/01/19 20:05:06 ID:???
ttp://jiten.www.infoseek.co.jp/Eiwa?qt=typo&sm=1&pg=result_e.html&sv=DC&col=EW
ty・po [taipou]
━━ [名] 〔話〕 誤植, タイプミス.
379Name_Not_Found:05/01/19 20:15:00 ID:GrkNWztu
スタイルシートを使って全体を3つのコラムで分割しようと思っています。
真ん中のコラムに記事を書き、左右のコラムには何も書き込まない予定です。
その際

div.left {
float: left;
width: 150px;
}
div.main {
}
div.right {
float: right;
width: 150px;
}

としてクラスmainに記事を書いていったのですが2行目からカラムを無視して
ブラウザ全体に広がるようになってしまいます。どうしたら最後まで真ん中の
コラムの中に文章を押しとどめておくことができるでしょうか?
380Name_Not_Found:05/01/19 20:26:26 ID:???
普通なら多分

div.main {
margin: 0 150px;
}

とかやる。
381379:05/01/19 20:33:56 ID:???
>>380
あ(;´Д`)!
そんな簡便な方法が・・・
さらに左右のコラムに文章とかバナーを貼りたければ
div.left{
margin: 0 0px;
}
とかやればいいわけですね。
382Name_Not_Found:05/01/19 21:35:39 ID:???
>>381
そもそも左右のブロックは激しく不要な希ガス。
383Name_Not_Found:05/01/19 21:59:45 ID:???
>>375
え? うちの Fx1.0 だと駄目だ。↓がソース。
IE6 だと3,4 だけ黒(規定値)で、 Firefox だと全部規定値。
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head>
<title>temp</title>
<style type="text/css">
.col1, .col2, col3, .col4 {color: red;}
</style>
</head><body>
<table>
<caption>table</caption>
<col class="col1">
<colgroup class="col2"></colgroup>
<colgroup class="col3" span="2"></colgroup>
<colgroup class="col4"><col><col></colgroup>
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
</thead><tbody>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td></tr>
</tbody>
</table>
</body></html>
384Name_Not_Found:05/01/19 22:14:51 ID:???
>>383
colに適用できるのは
・background-*
・border-*(border-collapseの場合のみ)
・width
・visibility:collapse
のみ。

IEが余計なお世話をしてるだけ。
385Name_Not_Found:05/01/20 00:01:25 ID:???
>>384
知らなかった・・サンクス。
386Name_Not_Found:05/01/20 07:57:07 ID:???
CSSファイルが5KBは多すぎですか?
387Name_Not_Found:05/01/20 09:50:26 ID:???
日本語変ですよ。
388Name_Not_Found:05/01/20 10:12:42 ID:???
そこそこ作りこめばそんなもん。
389Name_Not_Found:05/01/20 10:31:34 ID:???
ページの幅を携帯に合わせて320に設定したいのですがむりぽですか?
枠をつけてるのですがPCだとデザインが崩れて・・・
390Name_Not_Found:05/01/20 10:33:57 ID:???
え!?携帯でもCSS使えるの!?
391Name_Not_Found:05/01/20 10:38:00 ID:???
auなんかはかなり読み込んでくれますよ
392Name_Not_Found:05/01/20 16:35:59 ID:???
javascriptを使わずに振り分けたいのですが、
mozilla専用にa.cssを、opera専用にb.cssを
用意して、それぞれ違う方は読み込まないようにするには
link内にどういうふうに記述すれば良いんでしょうか?
>>5
 ttp://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
を参考に作っているのですが、
opera7がaも読み込んでしまうので、これを止めたいのです。
393Name_Not_Found:05/01/20 16:38:46 ID:???
素直にプログラムで処理しましょ〜。
ブラウザなんて、腐るほど有るんだから。
394392:05/01/20 19:36:25 ID:???
link内の記述使った振り分けではopera6では出来るようですが、
今のところopera7とmozilaでの振り分けは出来ないんでしょうか?

javascriptでの振り分けでも良いんですが、
解析見るとscriptをoffにしてる人も割と居るので……。
395Name_Not_Found:05/01/20 19:42:04 ID:???
そこまで細かい振り分けが必要なもんかね……?
396Name_Not_Found:05/01/20 21:09:31 ID:???
5KBって携帯用のことか?

漏れのPC用は冗長杉で20KB超えてるさorz
397Name_Not_Found:05/01/20 21:21:52 ID:???
>394
サーバーサイドのプログラム。
398Name_Not_Found:05/01/20 22:40:14 ID:???
smallタグって、w3c的にはどうなんでしょうか?
やはり非推奨でしょうか?
399Name_Not_Found:05/01/20 22:49:43 ID:???
>>398
そんなことはない。
「ここんところはちょっと大きな声では言えないな....」
という意味を表す場合に用いるのだ。
400Name_Not_Found:05/01/20 22:52:50 ID:???
推奨、非推奨が一目でわかるサイトない〜?
401Name_Not_Found:05/01/20 23:02:24 ID:???
>>399
そうですか。
お早いお返事どうも有難う御座いました。
今までは<span class="small">とやっていたのですが、
この回りくどいやり方に疑問を感じておりまして。
おかげ様で、現状を脱することができそうです。
402Name_Not_Found:05/01/20 23:06:05 ID:???
左側に画像ファイルを、右側に文章を載せたいと思っています。
それぞれをdivでくくって
float: left;
を指定して並べてみたのですがIE6ではうまく配置されるものの
MozillaやOperaでは画像の右側に来るはずの文章は、
画像の下に配置されてしまいました。

・ブラウザの横幅にあわせて右側の文章が伸縮し

・しかしどんなにブラウザの横幅を狭くしていっても
 文章は画像の下に回り込まず、かならず画像の右側に位置し

・ブラウザの横幅を狭くしていくことで文章部分が画像の高さを
 超えても画像の下に回り込まずそのまま文章パートのコラム
 を維持したまま下に伸びていく

スタイルを実現するにはどうしたらいいでしょうか?
403Name_Not_Found:05/01/20 23:29:05 ID:???
>>402
現状のソースを
404Name_Not_Found:05/01/20 23:32:10 ID:???
>>402
最後にclear:left をやるべし
405402:05/01/20 23:33:08 ID:???
たとえば

<div style="float: left;">
<img src="(・・・)">
</div>

<div style="float: left;">
(ながったらしい長文・・・)
</div>

と書きますとIE6では基本的に文章は図の右側にありますがブラウザの横幅
を狭めていくとある一定量以下で図の下に移動してしまいます。
Opera、Firefoxではブラウザの横幅をどんなに広げても常に文章部分は
図の下に位置してしまいます。
406Name_Not_Found:05/01/21 00:10:40 ID:???
>>405
<div style="float:left; width:画像のはば"><img src="hogehoge.jpg"></div>
<div style="margin-left:画像のはば">ぶんしょう</div>

とか? てか、floatにwidthは必須じゃなかったっけ?
407Name_Not_Found:05/01/21 00:38:25 ID:???
>>406
ループですか?
408405:05/01/21 01:54:29 ID:???
>>406
margin-left
というプロパティがありましたか。
3種類のブラウザで問題なく表示されることを確認しました。
ありがとうございます。

ちなみにFirefoxだけブラウザの幅を狭めていくとたまに
横方向のバーが表示されすごく横幅が広くなる現象に
見舞われました。見た目は問題ありませんが。
ここらへんブラウザ間で洗練されてたりされてなかったり
するようです。
409Name_Not_Found:05/01/21 03:58:59 ID:???
そりゃブラウザのせいじゃなくて記述のせいかと。
410Name_Not_Found:05/01/21 11:40:24 ID:???
>>409
いや、結構ブラウザによって違うもんだよ。
一番いい加減なのがIEなわけだが・・・
411Name_Not_Found:05/01/21 12:45:12 ID:???
>>400 W3C
412I'm Not Found:05/01/21 13:12:21 ID:BkAg2kBm
質問です。
HTMLでトップページにフレーム使うのはナンセンスっぽいので
左側にメニューを置いてクリックしたら右のメインが変わるようにしたいのですが
フレームを使わないでいい方法はないでしょうか。
413Name_Not_Found:05/01/21 13:15:20 ID:???
414Name_Not_Found:05/01/21 13:17:31 ID:BkAg2kBm
>>413

やったー!!どうもありがとうございます!!!
415Name_Not_Found:05/01/21 13:18:57 ID:C0nrIR4b
>>412
php
416Name_Not_Found:05/01/21 13:20:40 ID:???
サイトの上部に本の引用を、その下からサイトを紹介する文章を書こう
とおもっています。このとき検索サイトにはサイト上部の本の引用部分が
引っかかってしまうのでしょうか?なんとか下部のサイトを紹介している
文章を検索サイトに載せたいです。レイアウトを変えずに実現する方法は
ありますか?
417Name_Not_Found:05/01/21 15:35:43 ID:+dtkYNrV
selectメニューの中の一部の文字列だけ赤文字にするのってどうするんでしたっけ


<option value="334">ほげほげほげむにゃむにゃむにゃ</option>
の「ほげほげ」の部分だけ赤文字にしたいです。
IE限定でいいです。

以上、どうぞよろしくお願いいたします。
418Name_Not_Found:05/01/21 18:30:44 ID:???
419Name_Not_Found:05/01/21 23:10:10 ID:Ld7Rk5Uk
スタイルシートに関しての質問です。
要素としてはテーブルとイメージがあります。
このテーブルの上にイメージがくるようにしたいのです。

現段階の詳細は下記なんですが、

table.main{
z-index:0;
background-color:#808080;
margin-right:auto;
margin-left:auto;
color:#808080;
font-size:12px;
width:803px;
}

img.logo{
position:absolute;
top:100;
left:auto;
right:auto;
z-index:1;
}
…とこのような状況です。具体的には、テーブルはもう良くて、
イメージを、センターに位置させつつ高さ(上からの位置)を指定したいのですが、
どうしたらいいでしょうか?
長くなりすみません。

(初心者版でスレ違いの指摘を受けました。コピペです。すみません)
420Name_Not_Found:05/01/21 23:12:19 ID:???
>>419
マルチ
421Name_Not_Found:05/01/21 23:20:49 ID:???
誘導されてきたんだろ
422Name_Not_Found:05/01/21 23:21:34 ID:???
>>420
>>419
> 初心者版でスレ違いの指摘を受けました。コピペです。すみません
423Name_Not_Found:05/01/21 23:22:45 ID:???
>>419
HTMLのソースを出してね。
                            ビルダーかな?
424Name_Not_Found:05/01/21 23:26:04 ID:Ld7Rk5Uk
メモ帳でつくってるのですが、ソースは

<table cellspacing=1 cellpadding=0 class="main">
<tr>
<td background="cx380_2.jpg" width=600 height=400 align="right"><img src="02.gif"></td>
<td width=200 height=400 bgcolor="#ffffff" valign="bottom">

</td>
</tr>
<tr>
<td height=25 align="right" bgcolor="white" valign="middle" width=801 colspan=2>
<b><font color="#808080">Copyright(c) TUNA All rights reserved. </font>
<a href="mailto:[email protected]"><img src="mail.gif" border=0 alt="mail" align="middle"></a></b>
</td>

</tr>
</table>

<img src="logo.gif" class="logo">←こいつをどうにかしたい。

…という状態です。
425Name_Not_Found:05/01/21 23:37:34 ID:???
>>424
なんでtableの上に画像を配置するの?
tableの内容が隠れて見えなくならないの?
426Name_Not_Found:05/01/21 23:45:41 ID:???
ttp://cssvault.com
サイトが変わってしまった・・・・。
もう以前のように戻らないのだろうか?
427426:05/01/21 23:46:35 ID:???
ごめん。ふっかつしてた。
428Name_Not_Found:05/01/21 23:46:56 ID:???
宣伝うざ
429Name_Not_Found:05/01/21 23:52:04 ID:???
>>424
<style type="text/css">
<!--
.logo {
z-index:1;
position: absolute;
width: 100%;
top: 100px;
text-align: center;
}
-->
</style>

<div class="logo">
<img src="logo.gif">
</div>
430Name_Not_Found:05/01/22 00:08:12 ID:???
>>424
せっかくCSS 使ってて <b><font color="#808080"> これはねーべ?
431Name_Not_Found:05/01/22 00:55:22 ID:Fr6k1KFl
424です。
ありがとうございました。解決しました。
>>425
たいした理由ではないんですが、ちょっとしたこだわりでした。
>>429
ありがとうございます。できました!
>>430
スタイルシート使わないで作ってたときのが消し忘れてました。
これも修正しました。ご指摘ありがとうございます。
432Name_Not_Found:05/01/22 01:04:25 ID:???
Strict DTDで次のように記述したところ、上の画像としたの画像の間にスペースが空くのですが、CSSで画像間のスペースをなくすにはどうすればいいでしょうか?
<img src="○○"><br>
<img src="○○">
433Name_Not_Found:05/01/22 01:09:00 ID:???
img {margin:0;}
434Name_Not_Found:05/01/22 01:14:38 ID:???
>>423
 ちょっと待った。
Strictで書いてる奴がcssを知らんとはどういうことだ?
435 ↑ :05/01/22 01:15:31 ID:???
あっ >>432ダタ
436432:05/01/22 01:18:00 ID:???
>>433
消えません・・・

>>434
CSSの仕様書は読んでないです
437432:05/01/22 01:21:06 ID:???
言い忘れてました、スペースが空くのはfirefoxとoperaで見た場合です。
438Name_Not_Found:05/01/22 01:24:02 ID:???
俺も答えを忘れることにした。
439Name_Not_Found:05/01/22 02:08:43 ID:???
CSS の問題ではない。HTML の仕様書でも読んでくるんだな
440Name_Not_Found:05/01/22 02:30:00 ID:???
質問です。
ページのリンクメニューを横一列に並べて表示したいんですが、ulのborderとbackground-colorがうまく有効になりません。
<head>
<style type="text/css">
ul#menu {
margin: 0;
padding: 0;
background: #777;
border: 1px solid;
list-style: none;
}
ul#menu li {
margin: 0;
padding: 0;
background: #77f;
border: 1px solid;
width: 100px;
float: left;
}
p.para1 {
clear: left;
}
</style>
</head>

続く
441432:05/01/22 02:30:52 ID:???
>>439
CSSじゃなかったんですか。よく読んでみます。
ありがとうございました。
442Name_Not_Found:05/01/22 02:30:58 ID:???
続き
<body>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<p class="para1">
paragraph
</p>
</body>
</html>

ulのborderがliを囲わず上部に折り重なって出来てしまいます。
ul#menuに強制的にheight:を指定すればうまくいきますが、少し強引な気がします。
通常はulにheight:は指定しませんよね?ulボックスの高さは自動で計算してくれないんでしょうか。
スマートな解決方法はありますか?

<li>〜</li>の中には実際にはアンカーを書きます。
p.para1のclear: left;はfirefoxだと何故か内容が右にずれるので指定しています。
443Name_Not_Found:05/01/22 02:54:17 ID:???
>>440
>>7 のQ4/A4を。

ul の border は、ul 内のどっかで clear:left; するか、height で指定しないことには、
つぶれた表示になる。
height 指定がいやというなら、フロートをやめて display:inline; で li を並べるぐらいでは?
444Name_Not_Found:05/01/22 03:04:04 ID:???
>>443
すいませんFAQよく読んでませんでした。inlineでも考えてみます。
ありがとうございました。
445Name_Not_Found:05/01/22 03:42:25 ID:???
>>441
CSSと全然関係がないってわけでもないんじゃない?
推測だがこれと根は同じではなかろうか。
ttp://www.mozilla.gr.jp/standards/webtips0018.html
446Name_Not_Found:05/01/22 15:21:30 ID:???
最近になって急にHPを見てると文中でスタイルシートのせいと思しきエラーが出てるんで質問させてください。
例えば、最近みたDQ8の攻略のページで出たエラーを例にすると

「とうぞくのカギは「鉄のクギ」+「ブロンズナイフ」です。
             ↓
「とうぞくのカギは「鉄のクギ」+「ブロンズナイ・a style='text-decoration: none; border-bottom: 3px double;' href="t%20v" onmouseover="window.status='t」'; return true;" onmouseout="window.status=''; return true;">t」です。

とこのように文中でスタイルシートがバグってソースが表示されてしまいます。
ブラウザが悪いのかなと思い、IE6.0からスレイプニルやら他のブラウザに変えても変わりません。
OSはXPなんですけども、他のパソとかで見たらまったくエラー起きてないわけで……
もっと根本で悪いところがあるのかもしれませんが、質問させてください。
447Name_Not_Found:05/01/22 15:33:21 ID:???
>>446
直接の回答ではないがあんたの言う「他のブラウザ」って何だ?
まさかLunascapeやDonutではあるまいな?
448Name_Not_Found:05/01/22 15:40:30 ID:???
>>446
それじゃ何も答えようがない。
・エラーの発生するHTMLおよびCSSのソースは?
・「他のパソ」では問題ないそうだが、その「他のパソ」
 の環境(OS、ブラウザ等)は?
449Name_Not_Found:05/01/22 16:26:54 ID:???
>>447
他の、ネスケで見ただけでした、失敬。
>>448
446に書いた例だと
ttp://www3.kcn.ne.jp/~ff-12/game/data/dq8/d/gousei.html
のトコのです。
他のパソだと、『W2K・IE6』『W2K・ネスケ7.1』の2つです。
450446=449:05/01/22 16:33:33 ID:???
書いた直後ですが早速訂正なことをー。
ネスケでは友人に確認してもらったんですが、スタイルシートうんぬん以前の話だった=□○_
……問題なく見えてるんじゃなくてそれはきっと問題が見えてないんだよ、友人=□○_
というわけで今のところ、我が家の環境だけに絞ると
ブラウザはIE6とスレイプニルの2種類だけでOSは2kとXPの2つ。
2kの方だと両方のブラウザで見れて、XPの方だと両方のブラウザで見れません。
451Name_Not_Found:05/01/22 17:46:23 ID:???
脱tableレイアウトをしようとしてまして、cssで何とか思い通りのレイアウトが出来たと思ってたら、
Firefoxで崩れてしまいます。
<img>に指定しているfloat:right;のせいだとは思うんですが、
解決方法を教えて下さい。

(CSS)
div.gray{background-color:#ccc; line-height:1.5em;}
p.font1{font-size:100%;}
span.font2{font-size:90%; padding-left:5em;}
span.link{float:right; height:20px; width:50px;}
img{border:0;}
div.black{background-color:#000; clear:right;}

(HTML)
<div class="gray">
<p class="font1">大きな文字
<span class="font2">小さな文字</span>
<span class="link"><a href="http://www.xx.xx.jp"><img src="./xx.gif"></a></span>
</p>
</div>
<div class="black">詳しい説明</div>
452Name_Not_Found:05/01/22 18:11:33 ID:???
>>451
環境を詳しく。
Windows上の IE6.0 と Firefox で比較した限りでは、
「崩れる」というほどの表示の違いはないように思われるのだけど。
453451:05/01/22 18:43:19 ID:???
>>452
すみません。
マカなんで、確認はSafari、IE5、Firefox、Operaで行ってます(macしか持ってないんです…)。
でFirefoxで見ると<img>が<div>色付き部分をはみ出して、一行分下に表示されてしまうのです。

Windowsでは大丈夫なんですか。
記述ミスではないらしいので少し安心しましたが、現状のtableで安全策をとるか迷うところです。。
どうもありがとうございました。
454Name_Not_Found:05/01/22 18:45:59 ID:???
451と逆の状態になって困ってます。
FireFoxでは正常に表示されるのに、IE6.0では表示されません。
やってることはTDにborderを指定しているだけなんですが・・・

[CCS]-------------------------------------
.classA {
   border-left : 13px solid #aaf;
   border-bottom : 1px solid #ccc;
}
.classB {
   background-color : #ccc;
}
.classC {
   border-right : 1px solid #ccc;
}
.classD {
   border-left : 1px solid #ccc;
}
.classE {
   border : 1px solid #ccc;
}
-----------------------------------------
455454:05/01/22 18:47:01 ID:???
[HTML]-----------------------------------
<table cellspacing="0">
 <tr>
  <td colspan="4" class="classA">あああ</td>
 </tr>
 <tr>
  <td class="classB">A</td>
  <td class="classC">いいい</td>
  <td class="classD">ううう</td>
  <td class="classB">B</td>
 </tr>
 <tr>
  <td colspan="4" class="classE">
   ううううううう<br>
   えええええええええ<br>
   おおおおおおおおおおお
  </td>
 </tr>
</table>
-----------------------------------------
456Name_Not_Found:05/01/22 18:54:05 ID:???
いや、Windows 上では IEもFirefoxも、「一行分下に」になってるんですが。
画像が background-color:#ccc の部分に収まってないといけないのだったら、
どっちも駄目ということです。Opera 7.53 だと、中に収まるようですが。

とりあえず、float の使い方が間違っているというか、ちょっと勘違いしてるんじゃないかと
いう印象をうけますた。
あと「脱tableレイアウト」とはいっても、これはこれでなかなか悲惨なHTMLだとオモタ。

頑張って勉強してください。
457451:05/01/22 18:59:56 ID:???
そうなんですか・・・or2
精進します
458Name_Not_Found:05/01/22 19:01:31 ID:???
>>456 は >>453(=>>451)に対してです。
459Name_Not_Found:05/01/22 19:08:39 ID:???
>>451
自分も偉そうな事は言えないですが、それ以前に、なんだかCSSプロパティの使い方が
かなり無茶苦茶ですが…。
HTMLとCSS、それぞれの概念が理解出来ていない感じがします。
解決にはおそらく、HTMLとCSSを詳しく解説してある本を1冊読んだほうが早いと思います。
チュートリアル本やテクニック紹介系の本ではダメです。

レイアウトが崩れるというなら、<div class="gray"> - </div>の内部でclear:してみて下さい。
imgをfloatさせたいなら、その前のspanではなく通常はimg自体にfloat:プロパティを設定します。
大きな文字と言いながらfont-size:100%;はこの場合意味がないですし、インライン要素である
spanにwidth:やheight:を設定する事は出来ないはずです。
460Name_Not_Found:05/01/22 19:12:22 ID:???
( ゚д゚)ポカーン
461Name_Not_Found:05/01/22 19:25:33 ID:???
>>454-455
自分が試した限りでは、IE6, Firefox, Opera のいずれも borderが同じように表示されました。
一応、標準モード/互換モード 両方やってみたけど変わらず。

ほかのところに原因があるんじゃないか…としか。
462451:05/01/22 20:33:55 ID:???
勉強不足で申し訳ないです。。
取りあえず表示は何とかなったようなので、しつこいですが貼ってみます。
あとspan.linkにサイズ指定しないと、画像がどこかに行ってしまうんで書いているのですがダメなのですか?
(CSS)
div.gray{background-color:#ccc; padding:2px;}
span.fonts{font-size:90%; padding-left:5em;}
.link a:link{background:url(./link.gif) no-repeat; height:20px; width:50px; position:absolute; right:20%;}
div.black{background-color:#000;}
(HTML)
<div class="gray"> 普通の文字
<span class="fonts">小さな文字</span>
<span class="link"><a href="http://www.xx.xx.jp"></a></span>
</div>
<div class="black">詳しい説明</div>
463Name_Not_Found:05/01/22 20:51:28 ID:???
HTMLがアレなのは置いとくとして、
float で回り込みを制御できるのは、後続の要素に対してなので、
 1. 順番を入替える(画像を先にする)
 2. 「大きな文字 小さな文字」を span で括るなどして、そっちのほうで
   float:left; (自動的に display:block がセットされる)する

とかでないと、うまくいかないと思うです。
>>7 の「段組み」(Q3)のところを読まれるとよろしいかと。
464454:05/01/22 21:01:45 ID:???
>>461
ま、まじですか・・・
ひょっとしてclass名に"_"って使えなかったりしますか?
いや、それでもアンダーバーを使っていないクラスも表示されてないしなぁ・・・
465463:05/01/22 21:03:03 ID:???
|´‐`) .。o( よく見てなかったけど、やり方ごっそり変えてたのか。
     ( 不思議な記述だけど、それでちゃんと表示できてんの? >>462
466Name_Not_Found:05/01/22 21:03:26 ID:???
_ は使わない方が無難
467454:05/01/22 21:24:17 ID:???
すいませんお騒がせしました自分の凡ミスでした
<style type="text/css">が
<style= type="text/css">になってました・・・

いらんところで細かく判断するなIE6.0よ・・・_| ̄|○
468463:05/01/22 21:28:05 ID:???
あ、紛らわしい書き方だった。
1. か 2. のどちらかを選ぶ、ということであって、
1と2を両方やってくださいという意味ではありませんので。
469Name_Not_Found:05/01/22 21:33:38 ID:???
>>459
floatさせればblockになるので
widthもheightも有効ですが?
470Name_Not_Found:05/01/22 22:08:32 ID:O3IAp0uA
floatを使って2つの段をleftに寄せ、左右に表示させたものを
divでまとめて、一つの枠の中に入れたいのですが
2つを囲んだdivにborderをつけてみても、上のほうに
┌────┐こういう線が出来るだけで、うまく囲ってくれません。

IE opera Firefoxで確認しました
どうやればうまく表示させることが出来るんでしょうか?
471Name_Not_Found:05/01/22 22:14:59 ID:???
>470
ソースコード出せ
472470:05/01/22 22:15:22 ID:O3IAp0uA
すいませんソース忘れてました

.left {
float: left;
width: 30%;
}
.right {
float: left;
width: 70%;
}
.border {
border: solid 10px;
}

<div class="border">
<div class="left">
<p>左の段<br>左の段<br>左の段</p>
</div>
<div class="right">
<p>右の段<br>右の段<br>右の段</p>
</div>
</div>
473Name_Not_Found:05/01/22 22:36:49 ID:???
>>472
floatがぷかぷか浮かんでいるから
divの高さにfloatの高さは含まれないんだ。
divにheight設定してあげるか、
clear:bothをもったブロック要素を
外側のdivの内部に持たせてあげれば
ちゃんと枠で囲ってくれるよ。
474Name_Not_Found:05/01/22 22:40:20 ID:???
>>472,473
根本的に間違い
.left {
float: left;
width: 30%;
}
.right {
margin-left: 30%;
}
.border {
border: black solid 10px;
}
475474:05/01/22 22:43:38 ID:???
HTML部分も
<div class="border">
<p class="left">左の段<br>左の段<br>左の段</p>
<p class="right">右の段<br>右の段<br>右の段</p>
</div>
で十分
476Name_Not_Found:05/01/22 23:03:16 ID:???
>>469
ごめんなさい、そうでした。
あんまり見慣れてなかったんですが、置換要素でもなくブロック要素でもなく、
インライン要素をfloatさせてwidth,heightを指定するなんてみなさん結構普通にやってるんですかね…。
とにかく間違ってました。

で、繰り返すようですが、>>451のソースでは、実質imgのみを囲んでいるだけなら、わざわざspanで
float,width,heightを指定せず、imgに直接float,width,heightをしてはどうでしょうか?>451さん
imgがfloatしても、ちゃんとaは有効ですよ。
477Name_Not_Found:05/01/22 23:13:20 ID:M14n1vyC
テーブルを使わずに角の丸いdivを作る方法に関して教えてください。

幅もフォントサイズもガチガチに固定してしまえば、IEは簡単なのですが、
NNはフォントサイズを固定しても変更が効くため、以下のような感じで作っています。


角の丸い上部と下部の画像を作り、真ん中のテキストが入る部分に、
cssで左右のボーダーを指定しています。
こうすると、縦に延々のびてくれるので。

【html】
<div id="main">
<!--角を丸くするための画像。上部-->
<img src="header.gif" width="110" height="100" class="header">

<p>あいうえおかきくけこ</p>

<!--角を丸くするための画像。下部-->
<img src="footer.gif" width="110" height="100" class="footer">
</div>
478477:05/01/22 23:15:49 ID:M14n1vyC
【css】
#main{
width : 110px;
margin-top : 10px;
margin-right : 0px;
margin-bottom : 0px;
margin-left : 2px;
float : left;
clear : left;
}

#main P{
padding-bottom : 0.5em;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
z-index : 1;
position : relative;
479477:05/01/22 23:16:31 ID:M14n1vyC
/*各ボックスのヘッダー画像とフッター画像。コレによってフォント拡大に対応。*/
.header{
margin-left : 0px;
margin-top : -5px;
margin-bottom : -70px;
margin-right : 0px;
z-index : 0;
position : relative;
}
.footer{
margin-top : -70px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : -5px;
z-index : 0;
position : relative;
}
480477:05/01/22 23:17:25 ID:M14n1vyC
角の丸い長方形の背景画像を用意して、背景に指定していたこともあったのですが
NNではこれをするとフォントサイズを変更したときに崩れてしまうので、上記のようにしています。

cssをブラウザにあわせて振り分けるのはしていません。
(sp2になってから、スクリプトを使うとやたらとポップアップブロッカーが働くので、迷惑かなと思って)

いまのところ、これで何とかなっているのですが、もっと簡単な方法ないかなあと思っています。
テーブルで組むのがやっぱり一番早いでしょうか・・・・。
簡単な方法があったらぜひご教授下さい。
481477:05/01/22 23:20:07 ID:M14n1vyC
あわわわ、ごめんなさい。
うっかりボーダー指定の記述忘れてしまいました。
#mainのところで左右に1ピクセルのボーダーを入れています。
482470:05/01/22 23:30:06 ID:O3IAp0uA
>>473
clear:bothの方は変な動きをしてうまくいかなかったのですが
heightのほうでうまくいきました。
ありがとうございました
>>474-475
意味はよくわかったのですが、これで表示させてみると左の段の上のほうに隙間が空いてしまうのですが
どうしてなんでしょうか?
483Name_Not_Found:05/01/23 00:01:06 ID:???
少しは自分で工夫する気は無いのか?
484470:05/01/23 00:09:56 ID:8WiOdFsh
よくわかないけどmargin短縮で書いたらうまくいきました
ありがとうございました
485Name_Not_Found:05/01/23 00:12:41 ID:???
>>474
根本的に間違いっていうか、http://www.w3.org/ の3カラムって
>>473方式ですよね?だから、>>473方式が主流かとばかり思っていましたが…。
もしかしてhttp://www.w3.org/ のトップページも批判されてたりしますか?

http://www.w3.org/ は3カラムの直後のhrでclear:しているようです。
hr自体はvisibility: hidden;で見えないようになっていますが。
もし、3カラムが、さらにborderのあるdivで囲まれていたとするならば、
hrでclear:しなければ、>>470同様潰れて表示される事になります。

>>474方式は知らなかったんですが、こっちの方がスマートな感じはしますね。
http://www.w3.org/ と同じ方式では、clear:する為にいちいち最後に
本来は文章に必要のないブロック要素を追加しなければいけなかったので、
無駄だな〜とは思ってました。
486Name_Not_Found:05/01/23 00:58:24 ID:???
>>474
rightカラム内にfloatが使えないという欠点がなかった?
487Name_Not_Found:05/01/23 02:03:40 ID:???
携帯用のサイトを作ってるんですけど全角8文字で
常に改行させるようにはどうしたらいいのでしょうか?
488Name_Not_Found:05/01/23 02:25:37 ID:???
>>487
普通はPREを使うだろな。
MS ゴシックなどのフォントに依存してよいなら
width: 8em でおおよそ8文字。まあおおよそだ。
489474:05/01/23 10:16:12 ID:???
>>485
否定はしないです。汎用要素ですから
>>472で float: left; を左右に使用しているのが問題の原因、
又、意味が無いと思ったので間違いと指摘しただけです。
490Name_Not_Found:05/01/23 10:38:39 ID:???
>>474>>475のソースのままだと、IE6ではpの(デフォルトの)上下のマージンがうまく計算されず、
崩れてしまいますね。firefoxでは問題ないですが。
pのマージンを0にしても、background-colorすると分かりますが、IEではleftカラムとrightカラムの間に
何故か隙間が出来ますね。各カラムに太めのborderを付けると隙間は消えますが。
この隙間もfirefoxでは出来ません。
IEのバージョンが上がらない現状では、場面によって>>473>>474の方法を使い分けても
いいんじゃないでしょうか。
491Name_Not_Found:05/01/23 15:54:06 ID:???
オマイの好きにすればいいで内科医?
492Name_Not_Found:05/01/23 17:28:41 ID:???
>>491
「根本的に間違い」と断定的な書き方だったので、
そうではなく、>>473の方法でも決して間違いではないのではないか?、と言う事です。
>>473の方法なら、各カラムをfloatしなければいけないので、左右のにカラムに
float: left;を使用する事には十分に意味があります。
(結果として>>470のように、「floating要素は親ボックスのheightに含まれない」という
仕様上の結果を、初めて目にする人が多く出てくるかもしれませんが)

「根本的に間違い」と断定的な書き方をされている事について言っています。
493Name_Not_Found:05/01/23 17:49:16 ID:b8/uXTWU
CSSスレの達人様、助けてください!
タブメニューを作りたくて苦しんでいます。
ソースは以下の通りです。

<ul>
<li><img src="icon/top-tab.gif" width="80" height="20">
<li><img src="icon/faq-tab.gif" width="80" height="20">
<li><img src="icon/access-tab.gif" width="80" height="20">
</ul>


LI{
 background-color : maroon;
width : 80px;
height : 20px;
float : left;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 10px;
margin-bottom : 0px;
_margin-bottom : -5px;
text-align : center;
}
494493:05/01/23 17:50:06 ID:b8/uXTWU
li要素にタブの画像を入れて、横ならびになるようにしています。
タブの画像は真ん中を透過させてあり、a:hoverでマウスを乗せた時に
背景色が変わるようにしたいと思っています。
ココからが問題なのですが、IEの場合アンダースコアハックをかけないと
何故だか下部に2ピクセルくらいの背景色がはみ出るのです。
高さはliも画像も同じ20ピクセルなのに、何故liの方が大きくなるのですか?
495Name_Not_Found:05/01/23 17:53:29 ID:???
マルチ
496Name_Not_Found:05/01/23 19:19:45 ID:???
画面内に幅500pxの枠を入れたいのですがテーブル使わないと無理ですか?
497Name_Not_Found:05/01/23 19:38:55 ID:???
>>493
うーん、試してないんでわからないけど
<li>の群を全部一行にかいてみてはいかが?

>>496
無理じゃないです
498497:05/01/23 19:42:54 ID:???
>>493
ちょっと調べてみました。
どうやら、IEが互換モードで動いてる時は
改行が入っていると空白ができてしまうみたいです。
改行を消すか、DOCTYPE宣言で標準タイプを使わせれば
意図したとおりに動くと思います。
499496:05/01/23 19:43:57 ID:???
>>497
マジですか!一体どうやれば…
500497:05/01/23 19:48:30 ID:???
>>499
内容がその枠の中だけに入れるのなら、
bodyにwidthなりborderなりを設定すればいけます。
枠の外にも置きたい要素があるのなら
divタグで事足りると思います。
501493:05/01/23 19:54:01 ID:b8/uXTWU
>>497
神様!!!ありがとうございました!できました!
まさしくネ申!!

因みに、他の方にも参考になるかもしれないので、追記です。
書き忘れていていたのですが、DOCTYPE宣言は元々標準モードでした。
なので、原因はどうやら改行のようです。liを一行に書けば、
画像とピッタリ合いました!

497様、本当にどうもありがとう!
502493:05/01/23 20:02:00 ID:b8/uXTWU
>>497師匠

ついでにお尋ねしていいですか?
私、一応ググってみたり、バグ辞典サイト見たりしてみたんですけど
わからなかったのです。コレって有名なバグですか?
それとも私の調べ方が不十分?(もしそうだったら本当にゴメンナサイ)

バグ辞典や回避法サイトでもしいいのがあったら教えてください。m( __ __ )m
503496:05/01/23 20:06:57 ID:???
>>497
ありがとうございます。CSS勉強し始めたばかりなのですがやり方見て試してみます
504497:05/01/23 20:09:21 ID:???
どうなんでしょう?
ぼくも似たような境遇が多かったみたいで、
いろいろ試しているうちに見つけた回避法なんですが…。

ぼくの方では標準モードなら改行があっても普通に表示できたんですが
この辺もよくわからない…^^;
505Name_Not_Found:05/01/23 20:12:26 ID:cBYf61bk
>>424

皿仕上げ

hp:Web制作管理[レス削除]
http://qb5.2ch.net/test/read.cgi/saku/1033061518/196
506Name_Not_Found:05/01/23 20:16:12 ID:???
CSSでテーブルタグのようなデザインって出来るよな?確か。。。
507Name_Not_Found:05/01/23 20:18:20 ID:???
書籍関連の質問なのでhttp://pc5.2ch.net/test/read.cgi/hp/1099736818/で
聞こうと思ったのですが、CSSに特化した質問なのでこちらでします。

WEBサイト運営初心者ではないけど
CSSをオマケ程度しか使ってない人間です。
レイアウトはテーブルでやってるし
CSSは、リンクの下線を消したり、スクロールバーの色を変えるとか
行間を指定したり、文字の大きさを指定する程度にしか使っていませんでした。

でも、今後はサイトをHTMLとCSSを正しく使って運営したい、
今までのサイトもHTMLとCSSを正しく使ったページに書き直して
いきたいと思い、本を買いたいと思っています。
(今持ってる本は、「ポケットリファレンスHTML」って本だけです。)
ネット上に素晴らしいCSS解説サイトがあるのは知っていますが
書籍という形態の媒体が好きなので、本を買って手元におきたいのです。

もよりの本屋はパソコン関連の本の入りが悪いので
ネットの本屋で本を買うつもりですが
ネット本屋のレビューを見て
「一週間でマスターするCSS」
「プチリファレンスHTML」
「スタイルシートスタイルブック」
「スタイルシートレッスンブック」
あたりをチェックしたんですが
お勧めはズバリどの本でしょうか?
50850:05/01/23 20:19:54 ID:???
ウィンドウズ2000
IE6.0 NS7.1  NC4.7 を持っています。
509Name_Not_Found:05/01/23 20:21:48 ID:???
>507
その質問は書籍スレのほうがいいんじゃないの?
510Name_Not_Found:05/01/23 20:22:36 ID:???
>509
すみません。書籍スレで質問します。
スレ汚し申し訳ありませんでした。
511Name_Not_Found:05/01/23 20:25:17 ID:???
悩んだ末こっちに書いたんじゃないのか…
スタイルシートWebデザインっていうのが絶版になってるけど
定評があるらしい。どうなんだろ
512Name_Not_Found:05/01/23 20:39:29 ID:???
513Name_Not_Found:05/01/23 22:02:54 ID:MRDH60KI
scrollbar-arrow-color:#333333;
scrollbar-base-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffeeee;
scrollbar-highlight-color:#ff4444;
scrollbar-shadow-color:#ff4444;
scrollbar-track-color:#ffeeee

この色にスクロールバーを変更しています。
スクロールバーを固定しているときはスクロールバー上と下の矢印が黒くなってちゃんと表示されるのですが。
スクロールされない状態で見てみると、赤色の矢印がちょっとかけて見えてしまいます。
具体的にいうと上の方の矢印の左下、下の方の矢印だと右上の部分です。
この矢印を正常にスクロールするときみたいにキレイに表示するにはどうすればよいのでしょうか。
色を何度変更しても変わりそうにないので書き込みました。
514Name_Not_Found:05/01/23 22:04:36 ID:???
スクロールバーの色変更は、
この板では嫌う人が多いです。
かくいう私も嫌いな一人です。
やめましょう。
515Name_Not_Found:05/01/23 22:11:40 ID:???
既出だったらすいません。少しお聞きしたいことがあります。

似非フレームoverflowをつかって縦にページを三分割したんですが
その境目がIEだとリストの部分だけ1px程陥没してしまいます。
これはIEのバグなんでしょうか?
516Name_Not_Found:05/01/23 22:23:08 ID:???
なぜスクロールバーの色変更って嫌なんでしょうか。
文字がmarqueeとかはわかる気もするんですが、やっぱり見にくいでしょうか。
サイトの色にあわせたりすれば、初期よりいいと思うんだけど。
517496:05/01/23 22:25:28 ID:???
<style type="text/css">body {width: 150px;margin-left: auto;margin-right: auto}</style>
みたいでいいのかしら?わかんねーorz
518Name_Not_Found:05/01/23 22:28:41 ID:???
>516
スクロールバーの色変えは
仕様書無視の、IEの独自スタイルシートだからじゃね?

詳解HTMLXHTMLCSS辞典には載ってない。
519Name_Not_Found:05/01/23 22:34:59 ID:???
まぁどっちでもいいんじゃないの>スクロールバー色変更
逆に考えればWinIEしか変わらないんだから

つかWinIEでも標準モードだとダメじゃなかったっけ?
520Name_Not_Found:05/01/23 22:45:44 ID:???
自己解決しました、ごめんなさい。
仕様書無視だったんですか、知りませんでした。
スタイルシート辞典というのを愛用しているのですが、
ネットスケープは未対応とは書いてあったんですが、感謝です。
521Name_Not_Found:05/01/23 22:47:21 ID:???
>>516のような人は M$ のカモ
522Name_Not_Found:05/01/23 23:00:10 ID:???
欠けて見えるのはshadow-colorとface-colorの色が近すぎてるだけ
523Name_Not_Found:05/01/23 23:30:34 ID:???
>>516
基本的にUIの変更は、操作性を悪くし、ややもすると訪問者を混乱させるだけだから。
他にも、マウスポインタの変更や、わけわからん独自のUI(JavaScriptを用いた物等)とかも
大概は、”鬱陶しい”だけだったりする。

が、どうしてもIEユーザにはスクロールバーを変更してほしいと思うなら書けばよい、とは思うけどね。
ただ、デメリットをわきまえた上で、”あえて”選択した、と、自分の中で割り切って使うのが吉だと思うけどね。
524Name_Not_Found:05/01/24 02:30:04 ID:???
------
| 1 |
------
| 2 |
------
| 3 |
------

フレームで3つにわけてます。
1のフレームの中に box を2の画面と繋がってみえるように
下寄せにしたいんですが、CSSで下寄せにできるのでしょうか?
margin-bottom: 0px;
ではならないのでしょうか、、?

525Name_Not_Found:05/01/24 02:54:22 ID:???
>>524
ボックスは上から順に流し込まれるのが基本だから、
margin-topかpadding-topを適当にとるか絶対配置するかじゃん
526Name_Not_Found:05/01/24 03:58:07 ID:9DurKeBp
p{line-height:0.3em}
--></style>

文字<br><br><br>
文字<br><br><br>
文字<br><br><br>

これを繰りかえして文字の下をドラッグすると青い空白みたいなのが表示されますが、
それが嫌いなので、<br>以外で代用できないかと思って。

<p>文字</p>
<p>文字</p>
<p>文字</p>

と書いたのですが、行のあけ方が広すぎるんです。
これをもっとせまくするために、上にあるスタイルシート書いたのですが。
行の幅をせまくできませんでした。こういう場合はどうすればよいのでしょうか。
527Name_Not_Found:05/01/24 04:58:28 ID:???
>>526
margin
528Name_Not_Found:05/01/24 05:14:31 ID:???
<table cellspacing="1" cellpadding="2"><tr><td>
あああいいいうううえええおおお
</td></tr></table>

<table cellspacing="1" cellpadding="0"><tr><td>
あああいいいうううえええおおお
</td></tr></table>

この2つのテーブルのソースがありますが、
cellpaddingの値が違います、cellpadding以外の値を変えることによって。
同じ表示形式にすることができるでしょうか。
スタイルシートを使ったりして。
529528:05/01/24 05:16:49 ID:???
解決しました。
530Name_Not_Found:05/01/24 05:17:52 ID:???
なにをどうしたら解決したのか書いていくのがマナー
531Name_Not_Found:05/01/24 05:30:47 ID:???
モナー
532528:05/01/24 05:32:27 ID:???
すみません、cellpaddingを変えることによって。
文字が右に1px、下に1pxいくっぽいので。
marginで右と下に1pxだけ足したら。
見た目は同じっぽくなったのでOKかなとしました。
533Name_Not_Found:05/01/24 05:36:08 ID:???
>>526-527
p{line-height:0.3em} このソースを
p{margin:0.3em}にすれば良いってことですよね。
534Name_Not_Found:05/01/24 05:39:40 ID:???
今確かめてみたら、
>>533
これじゃできないぞ。
確かに文字下の青い空白はすくなるなってたけど。
文字まで右にいってるし。もうだめぽ。
535Name_Not_Found:05/01/24 07:43:31 ID:???
連続brをやめて行間をあけたいのか
狭くしたいのかさっぱりわからん
536Name_Not_Found:05/01/24 10:15:24 ID:???
<div id="1" align="center">
<div id="2" style="position:relative; top:XXpx;left:XXpx" >
</div>
</div>

id="2"のdivを、id="1"の相対位置に配置したいです。
この場合、id="1"とid="2"の位置指定をどのようにすればいいのでしょう。
537Name_Not_Found:05/01/24 10:55:37 ID:GS74gkyy
↓の右上の1pxの黒い実線の表ってどうやって作るんですか?
<table>タグだと太い線でしか作れませんよね?

http://img.jpn.org/stored/jpn0373.jpg
538Name_Not_Found:05/01/24 11:06:39 ID:???
作れるよ。
539537:05/01/24 11:32:26 ID:???
>>538
マジですか?どうやって?
540Name_Not_Found:05/01/24 11:54:49 ID:???
CSSで
541Name_Not_Found:05/01/24 12:03:42 ID:???
>>539
tdにstyle="border:1px"みたいにやればいいじゃん
542Name_Not_Found:05/01/24 12:45:20 ID:???
>>541
あ、そんなに簡単に出来るんですか。有難うございます。。
543Name_Not_Found:05/01/24 12:55:16 ID:???
"そんなに簡単"なことも調べられずに、何言ってる。
544Name_Not_Found:05/01/24 14:58:31 ID:9DurKeBp
>>535
連続BRをやめて行間をあけたいんです。
でもその方法がPを使うのしか思いつかなくて。
Pを使ったのですが、それだとあける幅が多すぎて。

>>526-527
>>533-534

こういう結果になってしまって。
545Name_Not_Found:05/01/24 15:13:21 ID:???
               【       図       】
               それに対する説明文

というレイアウトをCSSで制作することは出来ますか?
条件としまして

・図はセンタリング
・図の横幅はソースに依存する(統一されていない)
・説明文は左寄せで、図の左端から記述を開始する。なお説明文の横幅は
 図の横幅よりはみ出さないようにする。
・上記の構造をブラウザや文字サイズに依存させずに構築する

こんなことは可能でしょうか?
546Name_Not_Found:05/01/24 15:17:08 ID:???
>544
行間とブロック間がごっちゃになってる?
行の幅を広くしたければline-heightで
pとp、つまり段落どうしの間を広くしたいならmargin

で、どっちがやりたいのかよくわからんと
547Name_Not_Found:05/01/24 15:20:52 ID:???
>>544
ちょっと回り道に思えるかも知れないが、ここを全部読んでみると良いと思うよ。
ttp://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/

私は、その方が結果的に時間の節約になると思うな。
548Name_Not_Found:05/01/24 15:21:59 ID:9DurKeBp
>>546
文字
ここの空間を空けたいけど、少しだけでいいんです。
文字

それで<p>タグを使ったのですが、空白の幅が広すぎて。
それでスタイルシートでp{line-height:0.3em} を書いて。
pの広さをせまくしようとしたのですが、ムリでした。
marginをやると、狭くはなったのですが、文字まで右にいってしまって。
549Name_Not_Found:05/01/24 15:23:20 ID:???
>>547
ありがとうございます、読んでみます。
550Name_Not_Found:05/01/24 15:36:47 ID:???
うお、p{line-height:0.3em} で普通にうまく表示されてました。
できました、ウフォフォオオオオオオオオ。
551Name_Not_Found:05/01/24 15:37:58 ID:???
>>526
p {padding:0; margin:0;}
div.gyoukan{ line-height:2; }


<div class="gyoukan">
<p>mokya</p>
<p>mokya</p>
</div>
552Name_Not_Found:05/01/24 15:43:10 ID:???
>>551
おお、そのやり方の方でやりたいと思います。ありがとう。
文字が15px使っているので、div.gyoukan{line-height:20px}がちょうどいい。
うまくできました。
553Name_Not_Found:05/01/24 20:21:15 ID:???
cssを外部ファイルにして、読み込むやり方でデメリットってありますか?
読み込み時間が遅くなるとかあるのかな。
554Name_Not_Found:05/01/24 21:18:52 ID:???
<div style="position:relative; z-index:2;">
<table>
〜中略〜
</table>
</div>

<div style="position:relative;z-index:1;">
<object>
〜中略〜(ちなみにFlashムービー)
</object>
</div>

こうしても、重なり合う部分は、
下のdivが常に前にくるんですが、
どこがおかしいのでしょう・・・。
555Name_Not_Found:05/01/24 21:48:01 ID:???
cssの継承について質問させて下さい

<div>テスト 0</div>
<div style="font-size: 2em">
テスト 1
<table>
<tr>
<td>テスト 2</td>
<td style="font-size: 2em">テスト 3</td>
</tr>
</table>
</div>

テーブルの中では外のfont-size: 2emを継承する?しない?
HTMLではしない,XHTMLではするが正解??
556Name_Not_Found:05/01/24 22:00:07 ID:???
>>555
それより先に、style="font-size: 2em"
の意味を考える事
557Name_Not_Found:05/01/24 22:54:04 ID:???
興味本位の質問で恐縮ですが、よろしければ教えてください。
スタイルシートでサイトを作ろう、といった趣旨の本で
<div id="navi">
<ul>
<li>menuA</li>
<li>menuB</li>
<li>menuC</li>
</ul>
</div>
といった記述を見かけます。
リストを使って、スタイルシートで横に並ぶようにしているのですが、例えば、
<div id="menu1">menuA</div>
<div id="menu2">menuB</div>
<div id="menu3">menuC</div>
として、それぞれにfloat:left;とした場合とどのようなメリットの差があるのでしょうか?
558Name_Not_Found:05/01/24 22:59:33 ID:???
>>557
ナビゲーションとはいわばリンクのリスト。
去れば li でマークアップするのが正しいでしょう、ということ。
div には特に意味がないし。
メリット・デメリットの問題じゃないよ。
559Name_Not_Found:05/01/24 23:00:46 ID:???
divの直下にliを置くような本が出回ってるのか。
HTMLとか、CSSの本って、いまだに仕様書読んだことない人でも書けるんだね。
560557:05/01/24 23:05:39 ID:???
>ナビゲーションとはいわばリンクのリスト。
そういう解釈なんですね。

>divの直下にliを置くような本が出回ってるのか。
>HTMLとか、CSSの本って、いまだに仕様書読んだことない人でも書けるんだね。

自分も読んでいませんが、本の内容は鵜呑みにしていました。良くないことだったんですね。
561Name_Not_Found:05/01/24 23:08:43 ID:???
>>560
いや、>>559氏は単にulを見逃しているだけかと思われ。
562560:05/01/24 23:15:38 ID:???
>561
了解しました。
563561:05/01/24 23:16:32 ID:???
補足。
divの直下に「menuA」などのインラインなものが来るのは推奨されません。
インラインなものは大概ブロックレベル要素の子になっているべき、
と思っていた方がいいくらいです、最初のウチは。
564560:05/01/24 23:21:34 ID:???
>563
わかりました。勉強になります。
565555:05/01/25 07:20:58 ID:???
>>556
意味を考えたら継承するんだろうけど
firefoxではHTMLとしたときとXHTMLとしたときで
表示が違ってくるので質問しました

じゃあ>>556の回答によると
firefoxは間違ったレンダリングをしているということですね
566Name_Not_Found:05/01/25 08:43:38 ID:???
>>565
まあとりあえず>>4-5でも読めや。
font-sizeプロパティの値は継承される(もうちょっと言えば算出値が継承される)って書いてあるだろ。
継承されないように見えるっていうんならそりゃレンダリングモードが標準準拠モードになってないからだろよ。
ttp://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html
567Name_Not_Found:05/01/25 11:23:42 ID:kHFCSVYM
TopStylePro3.10を文字化けしないようにできないでしょうか?
他スレを読むと、「フォントを何回か適当に選んだら出来た」と
言っているのですがどうしてもできません。

どなたかご存知な方いらっしゃいませんか?
568Name_Not_Found:05/01/25 12:51:57 ID:???
>>567
板違い
569Name_Not_Found:05/01/25 13:23:12 ID:???
>>567
なぜ英語では駄目なんだい?
570Name_Not_Found:05/01/25 15:09:06 ID:???
一行で右寄せテキストと左寄せテキストを混在させるにはどうすればいいですか?

…と聞こうと思ってこのスレッドにきたら、テンプレがすんごい充実しているのね。
質問する前に全部読まなきゃならんとですか…
ありがたやありがたや
571Name_Not_Found:05/01/25 15:22:03 ID:???
一応自己解決:
<div style="border: solid 1px; float:left;">hoge</div>
<div style="border: solid 1px; text-align:right">fuga</div>
右側のブロックがずいぶん横長になったりしますが。
572Name_Not_Found:05/01/25 15:45:40 ID:???
>>571
<div style="border: solid 1px; float:left;width:50%;">hoge</div>
<div style="border: solid 1px; text-align:right;width:49%;">fuga</div>
573Name_Not_Found:05/01/25 15:46:58 ID:???
>>570
質問して、求める答えが出てくる前に、テンプレで探せてしまうと思うがなぁ。
よほど、便利じゃん。
574Name_Not_Found:05/01/25 15:49:16 ID:???
このままだと左と右で文字のサイズが違うとき、
ベースラインが合わなくなってずれて見えるな。
575Name_Not_Found:05/01/25 16:05:28 ID:???
浮動要素の高さもheightに含めさせる方法
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2

このページで <br style="clear: both;" /> を使って float を clear する例が
載っていますが、これでは妙な改行が入ってしまいます。
フロートするブロックがたまたま小さかったりすると、気になってしまいます。

こんなとき
<div style="clear: both;"></div>
は常套手段ですか? ずいぶん汚いように見えますが…
576570:05/01/25 16:34:41 ID:???
>>571
ttp://upload.squares.net/upload/src/file0030.jpg
>>572
ttp://upload.squares.net/upload/src/file0031.jpg

Camino、Safariで実験しました。(写真はCamino)
一応。widthをつけると崩れるようですね。…調べてみます

# 「Mozilla関係のファイルをどぞ」とのアップローダをおかりしました。感謝
577555:05/01/25 19:11:24 ID:???
>>566
リンクしてくれたページですげー理解できたわ.dクス
578Name_Not_Found:05/01/25 20:26:39 ID:???
>>575
まったく同じ事やってる人がいた。これなら無駄な改行は無くなる。
他にベターな方法があるならぜひ俺も教えて欲しい。
ちなみに、clear:はCSS1では
Applies to: all elements だけど、
CSS2では
Applies to: block-level elements だから、
brにclear:するよりかはまだいい気がするんだけどな。
579Name_Not_Found:05/01/25 20:35:10 ID:???
と、思ったら
http://www.mozilla.gr.jp/standards/webtips0021.html
空のブロック要素は適当ではない、と書かれてあるね orz
580Name_Not_Found:05/01/25 21:56:06 ID:???
.clear
{
line-height: 1px;
font-size: 1px;
clear: both;
}

<div class="clear">.</div>

半角ピリオドを入れると空ブロックじゃなくなるけどね。。。
581Name_Not_Found:05/01/25 22:28:57 ID:???
.leftbox
{
float:left:
}

.leftbox:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

これの方がスマートだろうか?
582Name_Not_Found:05/01/26 00:40:13 ID:???
<div class="a">
<ul>
<li>じゅげむじゅげむごこうのすりきれ</li>
<li>なまむぎなまごめなまたまご</li>
</ul>
</div>

┌──────────┐
│・じゅげむじゅげむごこう│
│・なまむぎなまごめなま │
└──────────┘
こんな感じで枠を超えた分は省略して
表示させたいのだけどがうまくいきません
どうしたらいいのでしょうか。

http://csstest.nobody.jp/
583Name_Not_Found:05/01/26 00:44:04 ID:???
>>582
white-space: nowrap;
overflow: hidden;
584Name_Not_Found:05/01/26 21:33:09 ID:???
>>581
別に
content: "";
で良いと思われ
585Name_Not_Found:05/01/26 21:34:40 ID:???
空ブロックはだめなんだろうが
contentがどうとか以前に。
586Name_Not_Found:05/01/26 21:41:02 ID:???
連続BRこそが男の魂だろボケ
587Name_Not_Found:05/01/26 21:46:34 ID:???
まったくだ
588Name_Not_Found:05/01/26 22:05:58 ID:???
>>585
579で空ブロックが駄目と書かれてるのは
どう読んでも
clearの為に<div></div>なんて良くないという
スタイルのためにマークアップを変えるなというような
事を言ってるだけだと思うが。
css仕様的に空ブロックでclearできない理由は無い。
589Name_Not_Found:05/01/26 22:28:32 ID:???
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
590Name_Not_Found:05/01/26 23:18:07 ID:???
<br>や<hr>を置いて、display:blockにして、上方向に少しずらす、
という方法を良くとります。
591Name_Not_Found:05/01/26 23:20:06 ID:???
まてよ?
<pre> これだ!
592Name_Not_Found:05/01/26 23:23:05 ID:???
俺のサイトは<PRE>使いまくり。
593Name_Not_Found:05/01/26 23:26:17 ID:???
BRの多さ=男の価値
594Name_Not_Found:05/01/26 23:27:22 ID:???
<br>ホームページ<br>
<br>画像1<br><br>画像2<br>
<br>
<br>
<br><br>
<br><br><br><br>
<br>戻る<br>
<br>メール<br>
595Name_Not_Found:05/01/26 23:31:21 ID:???
<center>を使わない香具師はモグリだね
596Name_Not_Found:05/01/26 23:47:30 ID:???
っていうかチキン?ww
597Name_Not_Found:05/01/26 23:48:51 ID:???
<tikin> ?こんなタグあったっけ?
598Name_Not_Found:05/01/26 23:51:26 ID:???
floatを先に記述してその後にpositionを置き、topなどをマイナスにしなければ
positionとfloatを重ねることはできないのでしょうか?
599Name_Not_Found:05/01/27 00:04:55 ID:???
よくわかりません?
600Name_Not_Found:05/01/27 05:05:06 ID:fAEk58v+
floatで左(テキスト)右(画像)のようにしています。
これを逆に右(テキスト)左(画像)のようにするには
どうしたらいいのでしょうか?簡単に書くとソースは次の通りです。

<div class="space">
<div class="text">テキスト</div>
</div>
<div class="space">
<div class="img"><img src="image.gif" width="250" height="188"></div>
</div>
601600:05/01/27 05:07:15 ID:???
.text{font-size: medium;
width: 250px;}

.img {height: 188px;
width: 250px;
}

.space {width: 250px;
margin-top: 20px;
float: left;
}
602Name_Not_Found:05/01/27 05:41:17 ID:???
>>600
left を right にすればおしまいなのでは?

……ん? ここで何か一発ボケをかましなさいってことなのか?
603Name_Not_Found:05/01/27 10:46:07 ID:???
1つのHTML文書でクラスを20個も設定するっておかしいでしょうか。
8個までとか決まっているのでしょうか。皆さん多いとき何個ぐらい設定するでしょう。
604Name_Not_Found:05/01/27 11:15:56 ID:???
>>603
> 20個も設定するっておかしいでしょうか
おかしくないです。

> 皆さん多いとき何個ぐらい
漏れは子孫セレクタを多用するタイプなのでクラス名の数は何十個、とはなりません。
何個って言われても、ドキュメントによりけりだしね。
605Name_Not_Found:05/01/27 11:16:37 ID:Df6QI8KH
こちらで聞けと言われたのですが、文字と文字の間隔を空けたいのですが
どうしたら良いのでしょうか?  見づらくて困っています、どなたか教えてください。
606Name_Not_Found:05/01/27 11:19:45 ID:???
607Name_Not_Found:05/01/27 11:20:31 ID:???
>>605
letter-spacing
608Name_Not_Found:05/01/27 14:59:57 ID:???
お知恵を拝借したいのですが…よろしくお願いいたします。

<div style="background-image:url('背景画像'); background-repeat:no-repeat;">
内容内容

(中略)

内容内容
</div>

となっているとしてこれを印刷した際に、DIVの内容が縦長のため2枚以上に渡るなると、
各ページに背景画像が入ってしまうのですが、2枚目以降は背景が入らないようには出来ませんでしょうか?
divを適度な所で分けて、印刷時にページを跨らないようにするしかないでしょうか?
ブラウザはWIN IE6ですが、他のブラウザも考慮したい所です。
609Name_Not_Found:05/01/27 18:41:58 ID:???
スタイルシートで
p.menu {color: #000000; text-align: left; margin: 7px 0 5px 10px;}
と書いてみたのですが
IEとNNではマージンの長さが変わるのです。なぜでしょうか?
610Name_Not_Found:05/01/27 18:43:19 ID:???
追記です。すみません。
p.menuの親には

#menu {
color: #ffffff;
width: 180px;
text-align: left;
border: 2px solid #4682B4;
margin: 0 0 20px 0;
background: #f3f3f3;

}
と書いています。
611Name_Not_Found:05/01/27 19:11:40 ID:???
>>609
>6あたりで解るかも知れない。
612609:05/01/27 19:48:28 ID:4CSKNGH4
>>611
大分解決できたのですが、これだけは解決できませんでした。
ttp://template.bufsiz.jp/
上のサイトをIEとNNで見たら、NNで見た方が余白が大きくなるのです。
613609:05/01/27 19:51:54 ID:???
あ、すみません。
自己解決しました。
614Name_Not_Found:05/01/27 21:12:36 ID:???
初心者スレから誘導されてきました。

Divの位置指定についての質問です。
positionでpx、%指定ではなく、”center”表示するにはどのように書けばいいでしょうか?
ブラウザの大きさが変わっても、真ん中に表示したいのですが。
%指定しても<center>のようには機能しないし、
<center>
<div>
・・・・・・・・・
</div>
</center>
とやってみてもだめでした。
解決策をご教授下さい。
615Name_Not_Found:05/01/27 21:16:13 ID:???
margin:auto
616Name_Not_Found:05/01/27 21:27:30 ID:???
リンクをボーダーで囲い、hoverになったときに
その範囲全体の色を変えたいと思ってます。
本を読んだ感じでは、リンクしたい文字にwidthなどを設定し、
a:hoverにbackground-colorを設定すれば良い?ようなのですが
文字の背景部分が変わるだけで、ボックス全体の背景が変わってくれません。

WinXP、IE6.02 Opera7.23 NN7.1ですが、どれも駄目です。
(NNはそもそもwidthを無視してます…)

ソースは以下のような感じになっています。
617616:05/01/27 21:28:15 ID:???
<ul id="navbar">
<li><a href="">リンク先1</a></li>
<li><a href="">リンク先2</a></li>
<li><a href="">リンク先3</a></li>
</ul>


a:link{color:#ff0066;text-decoration:none;}
a:visited{color:#ff9999;text-decoration:none;}
a:hover{color:#ff0066;text-decoration:underline;background-color:#eeeeee;}
a:active{color:#ff0066;text-decoration:none;}


#navbar{
list-style:none;
margin:0px;
padding:0px;
background-color:#3399ff;}

#navbar li{
display:inline;
text-align:center;
padding-top:2px;
padding-bottom:2px;
width:110px;
voice-family:"\"}\"";
voice-family:inherit;
width:108px;}

#navbar a{font-weight:bold;color:#ffffff;}
618Name_Not_Found:05/01/27 21:33:29 ID:???
>>617
a要素はインラインでしょ。
お好みの大きさに変えたいなら、displayでブロック化しる。
619614:05/01/27 21:36:25 ID:???
>>615
それやってみましたが真ん中になりません・・・
620Name_Not_Found:05/01/27 21:38:17 ID:???
>>614
ブラウザの大きさが変わっても、真ん中に表示したいなら、
bodyにmargin:auto;とtext-align:centerを使えばOK。
2つ使う理由はIEと他各ブラウザに対応させる為。
621Name_Not_Found:05/01/27 21:42:05 ID:???
>>620
なるほど。やってみますね。
ありがとうございます
622616:05/01/27 21:49:00 ID:???
>>618
あ。それもそうですよね。
ただ、
#navbar a{font-weight:bold;color:#ffffff;display:block;}
としてしまうと、NN7.1とFirefox1.0(こっちは無視しようかなと思ってますが…)では
#navbarで設定したdisplay:inline;が無効になってしまうようなんです。
どこに指定するのが適切なんでしょうか?

リンク先1 リンク先2 リンク先3
と、横並びにしたいのに…。
そしてOperaではbackground-color:#eeeeee自体を無視されましたorz
623614:05/01/27 21:58:09 ID:???
なぜか右よりになってしまいます。
外部CSSは以下。

body{font-size:10px;color:#666;
    background-color:#fff;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#aaa;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
        margin:auto;text-align:center;}

div{
    width:650px;
    height:420px;
        background-image: url(image/bg.gif);
        background-repeat:no-repeat;}

何処が問題なんでしょうか。。
624Name_Not_Found:05/01/27 22:03:24 ID:???
>>623
>>6のQ2を読むと良い事があるかも。
625623:05/01/27 22:10:34 ID:???
ああ、、、IEの仕様だったんですか。。。。
解決しました。助かりました
626Name_Not_Found:05/01/27 22:14:38 ID:???
>>622
IEとFirefoxで挙動が違うとき
仕様違反なのは、ほとんどの場合IEだし。
Firefoxのシェアも5%になったらしいし。
昔見たいに99%IEなら楽だったんだけどね。

>display:inline;が無効
当たり前だし。
横並びにしたいなら現状、floatか絶対配置しかない。
何年かたったらinline-blockが普通に使えるかもね。
627Name_Not_Found:05/01/27 22:18:33 ID:???
>>625
最初から、初心者スレで、誘導ではなく6を指してるじゃないかw

390 名前:Name_Not_Found:05/01/27 20:54:50 ID:???
>389
/* CSS・スタイルシート質問スレッド【39】 */
http://pc5.2ch.net/test/read.cgi/hp/1104596224/6
628616:05/01/27 22:28:56 ID:???
>>626
>>display:inline;が無効
>当たり前だし。
た、確かに…inlineとblockが併用できたらおかしい、ってことですよねorz

四角の背景ごと色が変わるのはあきらめることにします。
ブラウザによって変な見た目になるよりは
どのブラウザでも普通なほうが良いや…。
自分でもFirefox使ってますしね。
629625:05/01/27 22:30:06 ID:???
>>627
それはギコナビの仕(ry

orz
630Name_Not_Found:05/01/28 04:22:41 ID:???
input 要素に border を指定しているのですが、
Firefox だと type="hidden" のときもボーダーが表示されてしまいます。
個別に display:none; を指定するのはツライです。
一括指定する方法は無いでしょうか。
631631:05/01/28 04:30:42 ID:???
テンプレのサイトに説明があるようですね。
失礼しました。

セレクタ - CSS2 リファレンス
http://hp.vector.co.jp/authors/VA022006/css/selector.html#type-selector
632630:05/01/28 04:31:19 ID:???
レス番間違えました…
633Name_Not_Found:05/01/28 04:42:25 ID:???
は?なにいってんの?真性バカだろ
634Name_Not_Found:05/01/28 07:13:26 ID:???
横ヤリだが、なんでそんな偉そうなんだ
635Name_Not_Found:05/01/28 15:33:35 ID:???
>>628
なんでfloatでならべるのではいかんの?
636Name_Not_Found:05/01/28 18:33:55 ID:???
>>608

@media print 使ってその中でbackground-image:noneにするのが一番妥当かも
一枚目だけ背景いれることをそのソースを使って実現するとなったら@page:firstを使うしかないと思うが
ほとんどのブラウザは対応していません。HTML組みなおしの方がはやいかも。
参考にならなくてごめん。
637Name_Not_Found:05/01/28 19:05:12 ID:???
CSSファイルの中を整理したら7KBから4KBになりました。
638Name_Not_Found:05/01/28 19:07:36 ID:???
どうでもいい
639628:05/01/28 20:32:46 ID:???
>>635
それもそうかwありがとうございます。
liにfloatやblockを指定するのって、問題ナシ?
640Name_Not_Found:05/01/28 20:59:41 ID:???
ナシ
641628:05/01/28 21:56:56 ID:???
どうもありがとう。
642Name_Not_Found:05/01/29 00:44:39 ID:???
一枚のhtmlファイルに3カ所 リンクが合ったとしまして、
それぞれのリンクカラーを変えることは出来るのですが、
a:hoverやa:active、a:visitedなどをそれぞれ変える事って出来るんでしょうか?

どうすればできるのか、指定の方法って教えて貰えません?
643Name_Not_Found:05/01/29 01:03:09 ID:???
>>642

 a.***:link {color:#******;}

あとは同じように

  ここを参考に
http://hp.vector.co.jp/authors/VA022006/css/selector.html
644642:05/01/29 01:11:48 ID:???
早速試してみました。
ありがとうございます。

参考サイトもじっくり拝見致します。
645Name_Not_Found:05/01/29 06:04:46 ID:???
文章の区切りのために、水平線を画像をしたいのですがうまくいきません。
(みためは細長い画像の区切り線、といった感じにしたいです)

hr
{
height:30px;
border:none;
background-image: url(img/hoge.png);
}

このように書いてみましたが、表示させるとhrの枠線が残ってしまいました。

hr自体をnoshadeにすると、枠線は消えますがhr内が塗りつぶされたようになってしまい
画像が表示できません。
解説などを見たところ、noshadeはborderで代用とあったのでそうしてみましたが、
hrのもともとの枠線の外にボーダーが出てくるだけで枠は消えませんでした。

ドツボにはまったみたいで解決法が見当たりませんorz
つまらない事かもしれませんが、どなたかアドバイスをお願いできればと思います。
WinXP IE6とNN7.0で表示確認しました。
646Name_Not_Found:05/01/29 11:14:40 ID:???
>>645
仕様です
647Name_Not_Found:05/01/29 11:22:09 ID:???
     \     /
       \ /
       氏ね氏
     氏 ね 氏 ね     シネヤシネヤシネヤ
     氏 ね 氏 ね 氏
 __氏ね 氏 ね 氏 ね__
/  氏ね 氏 ね 氏 ね 氏  \
 __氏 ね 氏 ね 氏 氏ね__
/  氏ね 氏 ね 氏 ね 氏    \
 __氏 ね 氏 ね 氏 ね __
/    氏 ね 氏 ね 氏     \
      氏 ね 氏 ね
       氏ね氏
        ね
648Name_Not_Found:05/01/29 12:01:35 ID:???
>>645
hrでなく、画像そのまま張ればいいだけじぁないのか?
649Name_Not_Found:05/01/29 12:33:21 ID:???
ソースは
<div>A</div>
<div>B</div> にして

表示は
B
A
って可能かな?
なんでこんなひねくれた事したいかっていうと、
Aはページごとのテキストで、Bは各ページ共通の上部メニュー。
SEOを考えると、AよりもBの方を<body>の開始に近づけたいからなんですわ。

まあBのメニューはheightが変わらんようにするから、
<div style="padding-top:Bのheight分">A</div>
<div style="margin-top:-(A-Bのheight分)">B</div>
で、いけるよね?合ってるかな?
でも、他に方法はないかなあ。
650649:05/01/29 12:40:04 ID:???
>SEOを考えると、AよりもBの方を<body>の開始に近づけたいからなんですわ

間違えました。

>SEOを考えると、BよりもAの方を<body>の開始に近づけたいからなんですわ

ややこしくてごめんなさい。
651649:05/01/29 12:44:48 ID:???
あ、駄目だ。
A(=テキストが主)は、文字サイズを固定しないのでheightが変わってくるや。
ムズかしいな。誰か思いつかない?
652Name_Not_Found:05/01/29 12:45:18 ID:???
絶対位置
653649:05/01/29 12:51:22 ID:???
>>652
そっか、なんて単純な手を忘れてたんだ。
Bのheightが変わんないなら、余裕じゃん。
アホだな、俺。
654Name_Not_Found:05/01/29 13:26:23 ID:???
アホですね。
655Name_Not_Found:05/01/29 21:36:59 ID:???
単位の付けかたについて、
数値がゼロの場合は、

margin-bottom:0

と、単位をつけずにやるのがいいのか、

margin-bottom:0em
margin-bottom:0px

というように、単位をつけた方がいいのか、
どちらか悩んでおりますが、
正しい書式はどちらなのかどなたかご教示下さい。
656Name_Not_Found:05/01/29 21:42:25 ID:???
0に単位は付かない。
657Name_Not_Found:05/01/29 23:08:21 ID:???
>>655
どっちも正しい
ってか悩む時間があるなら>>4の仕様書でも読んでろよ
658Name_Not_Found:05/01/29 23:29:32 ID:???
>>656-657
どうもありがとう。さっそく仕様書でも読んでみるよ。
659Name_Not_Found:05/01/30 00:43:13 ID:???
画像の一部が透過画像をulの背景として使って
liのテキストの上に置いて、画像の透過部分に
重なった部分だけliのテキストが読めるように
するにはどうしたらいいでしょう?
<html></body>
<ul><li>abcdefg</li></ul>
</body></html>

css:
ul{background-image:url("transparent.jpg");}

660Name_Not_Found:05/01/30 00:48:15 ID:???
>>659
そんなことできない
661645:05/01/30 01:08:40 ID:???
>646
>648
レスありがとうです。やっぱり仕様ですか…
ブログの記事に使用したいので、画像直接貼りは避けたかったのですが、難しいようですね。
662Name_Not_Found:05/01/30 01:19:51 ID:???
>>661
使ってないタグを使ってみるとか
663Name_Not_Found:05/01/30 01:31:40 ID:???
>>661
区切りに続くブロックの背景に画像を指定して、上部固定とかじゃ駄目なの?
664Name_Not_Found:05/01/30 07:45:30 ID:c1na4xkI
<div style="width:400px; margin:30px;"> <!-- divは見やすさのため。-->

<span 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>

</div>

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

「非置換インライン要素の高さはline-heightで決まる。
だから、line-heightが1emでパディングが0のとき
ボーダー下辺は次の行のボーダー上辺とほぼ重なる」
と思っていたんですが、激しい勘違いですか?
もしかしてバグですか?
665Name_Not_Found:05/01/30 13:11:40 ID:???
なぜ<span>なのかね、ヘルペス君?
666Name_Not_Found:05/01/30 13:34:43 ID:c1na4xkI
ヘルペスです。
すいません混乱してまつ。

a,em,spanの3つについては同じ現象であることは確認しましたが、
すべての非置換インライン要素で言えるのかすこし自信がもてません。

サンプルコードにspanを使ったことには深い意味ないです。。。
667Name_Not_Found:05/01/30 14:16:53 ID:???
>>666
それどっかに出てたな。
過去スレ漁ってみれ。
668Name_Not_Found:05/01/30 17:08:11 ID:Mm5Hgt/s
初歩的な質問という気もしますが、過去ログあさっても分かりませんでした。

一つのHTMLファイルに、
複数の外部スタイルシートを指定して反映させることはできるでしょうか?

たとえば、

一つの外部スタイルシートでテキスト関連のレイアウトを指定して、
別の外部スタイルシートで背景色や背景画像を指定。
それを1つのHTMLファイルに反映させる。

というようなことをやりたいのですが、
むりでしょうか?

教えてください。
669Name_Not_Found:05/01/30 17:21:00 ID:???
できます
670669:05/01/30 17:30:37 ID:???
できますか?

助かりました。
ご親切に有難うございました。
671670=668:05/01/30 17:32:01 ID:???
すみません、名前欄間違えました。

670は668で669へのレスでした。
672Name_Not_Found:05/01/30 17:40:19 ID:???
サーバ内でブラウザ判別してるサイトはjs使わずにそれぞれの対応CSSに振り分けてるよね
673668:05/01/30 17:49:52 ID:???
すみません。まだHTMLの勉強を始めたばかりで、何がなにやら。
正直、jsが何かも分かりません。
使用するソースを貼り付けてみました。
こういう表記でいいのでしょうか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>○○○</TITLE>
<LINK rel="stylesheet" href="css1.css" type="text/css">
<LINK rel="stylesheet" href="css2.css" type="text/css">
</HEAD>

お手間を取らせてしまいますが、よろしくお願いします。
674Name_Not_Found:05/01/30 20:34:14 ID:???
display:blockを使わない場合、
インライン要素にwidthプロパティ他使うのは正しい使い方?

上記の使い方してるサイトを発見。
IEのバグかな?と思いきやNN・オペラでも普通に動作してる。

ブロック要素にしか使えないと思ってたんだけど、
俺の記憶違いかな?
675Name_Not_Found:05/01/30 20:40:55 ID:???
676Name_Not_Found:05/01/30 20:50:09 ID:???
widthは非置換インライン要素には適用されない。
その上でここら辺を参照。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q24
CSS 2.1ではちょっと変更されてる (list-item対策か?)
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
677Name_Not_Found:05/01/30 20:58:18 ID:???
昔作ったテーブルレイアウト&フォントタグで字の色や字の大きさ
指定しまくり&CSSは行間あけとリンクの下線を消すくらいにしか
使ってないサイトを、CSSをまともに使ったサイトに
チマチマと書き換えてる最中なのですが、
まんどくさくて困っています。

ズバリ、CSSを書きやすいフリーソフトは何ですか?
とりあえず、
スタイルノート(http://www.wht.mmtr.or.jp/~riki/style/?page=exp)ってのと
ez-html(http://www.w-frontier.com/index.html)ってのを
ダウンロードして
どっちが書きやすいんだろう???(´・ω・`)
と浮気のように使っていますが。

それまで使ってたソフトはTTTエディターです。
678Name_Not_Found:05/01/30 21:06:10 ID:???
TopStyle
679Name_Not_Found:05/01/30 21:08:06 ID:???
680Name_Not_Found:05/01/30 21:24:05 ID:???
俺もTopStyleを勧めておく。
681Name_Not_Found:05/01/30 21:39:43 ID:???
>>678-680
すまんが薦める理由を教えてくれないか
682Name_Not_Found:05/01/30 21:40:50 ID:???
設定が視覚で確認出来る。
683Name_Not_Found:05/01/30 21:52:31 ID:???
>>682
サンクス。ちょっと使ってみる
日本語パッチもあるみたいだね。
ttp://www.vector.co.jp/soft/winnt/net/se285924.html
684Name_Not_Found:05/01/31 00:45:41 ID:nvVZfJck
3つほど質問です。

divにmargin-top:0;を記述しているのですが
Operaでは無視される。

見出しにborder-bottom:1px solid black;border-top:1px solid black;
と記述したのですがネスケでは下の線が表示されない。

リストタグと段落タグを組み合わせて
似非フレームdivの中に入れたらIEだけ幅が揃わない


これからは改善しようがないバグなのでしょうか?
685Name_Not_Found:05/01/31 01:01:52 ID:???
>>684
ブラウザの特性です。
686Name_Not_Found:05/01/31 01:37:59 ID:53F4LkVL
すいません、画像に白黒のフィルタをかけて、オンマウスでフィルタが取れるというのをやりたいのですが、
最初にフィルタがかかっていない状態で表示されます。(IE6.0)

<IMG src="image/.※※jpg" border="0"
style="margin-right : ※※;" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'">

この表記であっていると思ったのですが、何かが足りないのでしょうか。
687Name_Not_Found:05/01/31 01:50:37 ID:???
>>686
>最初にフィルタがかかっていない状態で表示されます
あたりまえ。
onmouseoutがどういうイベントか調べてみ。
688686:05/01/31 02:11:46 ID:???
調べました…らなるほどです…。

ありがとうございました。
689686:05/01/31 02:47:02 ID:???
あと画像じゃなくてテーブルのほうに
style="filter:gray();
入れたら解決しました。
ありがとうございました。
690Name_Not_Found:05/01/31 03:11:23 ID:???
>>684 そんなソースで判断できるか。まあ多分、あなたの勘違ひ。
691Name_Not_Found:05/01/31 12:41:24 ID:???
>>685
そうなのですか。有難う御座います。

>>690
勘違いとは?
692Name_Not_Found:05/01/31 13:01:15 ID:???
>>691
>>690は馬鹿だから気にすんな
693Name_Not_Found:05/01/31 14:51:18 ID:???
>>685の方が信用ならない無根拠な断言だろ。
694Name_Not_Found:05/01/31 15:55:09 ID:???
>>673
CSSは外出しで
JSは中田氏?
695608:05/01/31 20:36:31 ID:???
>>636さん
レスが遅くなりましてすみません〜。

そうですか〜…。
主要ブラウザで対応しないといけないので、
組みなおしします。

勉強になりました、ありがとうございます!
696Name_Not_Found:05/01/31 23:05:44 ID:???
backgroundで指定した背景画像を引き伸ばしたり縮小したりできませんか?
背景画像をストレッチさせたいのですが画像タグ、imgタグなら拡大や縮小できるというのしか見つかりません。
どのようにすれば背景画像を拡大や縮小できますか?
697Name_Not_Found:05/01/31 23:25:42 ID:???
>>696
できない
拡大したやつを貼る
698Name_Not_Found:05/01/31 23:53:51 ID:???
なるほど、ありがとうございます。
今ふと思ったのですが、z-indexを利用して背後にimgタグを忍ばせるのもでも出来そうですね。
ありがとうございました。
699XHTML1.0です:05/02/01 01:14:59 ID:6kF0AFY9
ここで訊いていいのかどうかわからないのですが、、
OSはWin2kでIE5.5なんですが、リンクの上にカーソルを乗せると
少しテキストが動くというかスクロール(?)してしまいます。
全部のリンクでこの症状になるわけではないので、なんか気持ち悪いのですが、、

これを回避する方法は無いのでしょうか?よろしくお願いします。
700Name_Not_Found:05/02/01 02:35:45 ID:???
>>699
ttp://cssbug.at.infoseek.co.jp/detail/winie.html
「アンカーを:hover状態にすると…」ってバグがいくつか報告されてるけど該当するものはない?
701699:05/02/01 03:21:10 ID:6kF0AFY9
レスありがとうございます!
教えていただいたサイトに該当してそうなものが(違うかも)、、
ttp://cssbug.at.infoseek.co.jp/detail/winie/b102.html
の「アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0)」
これ以外に無さそうなんですが、、無知ですみません、、。

でも、その症状が出る部分は
<div class="a">
<p>hogehoge<a href="http://www.2ch.net">2ちゃんねる</a>hogehoge</p>
<p>hogehoge<a href="http://www.2ch.net">2ちゃんねる</a>hogehoge</p>
</div>
みたいな感じで、div要素のaというクラスは同ページの他の部分でも使用
していて、そこでは問題は無いんですよね、、一部分だけなので、どうしたら
いいものか(汗
702ぁゃ:05/02/01 10:55:48 ID:xMxtma5r
はじめまして。
スクロールバーの記述でscrollbar-base-color
の部分に画像をいれることはできるのでしょうか?
よろしくおねがいします。
703Name_Not_Found:05/02/01 11:16:02 ID:???
無理
704Name_Not_Found:05/02/01 14:45:49 ID:???
-moz 系のプロパティと同じで、
UAそのもののインターフェイスをいじるのは感心しない。
705Name_Not_Found:05/02/01 18:03:07 ID:???
CSSで横に並べた要素の高さを揃えることは可能でしょうか?

<div style="width:100px;float:left;border:1px solid #FFFFFF">
左おっぱい
</div>
<div style="width:100px;border:1px solid #FFFFFF">
右おっぱい
右おっぱい
</div>

のようなことです。
706Name_Not_Found:05/02/01 18:27:50 ID:yp+YnIE3
kent-webのyybbsを使っています。
掲示板の投稿するボタンをCSSで色を変えたのですが、
タイトルを入力しようとすると、投稿するボタンのまわりに黒いボーダーみたいなのがでてきます。
下の画像の黒いものが、これをどうにかして出てこなくしたいのです。
できるのでしょうか。

http://u.skr.jp/512/files/8385.png
707Name_Not_Found:05/02/01 18:47:37 ID:???
>>706
にい使うのを止めろ。
708Name_Not_Found:05/02/01 18:55:39 ID:???
>>705
よく見る質問のような気がするのだけど、
高さをそろえたい理由は?
理由によって対処法が違うし。
709Name_Not_Found:05/02/01 18:58:58 ID:yp+YnIE3
>>707にいとは何なんでしょうか。
勉強不足ですみません。
検索してみても新潟がヒットしすぎて、なんとも。
710Name_Not_Found:05/02/01 20:08:03 ID:???
>>709 きみのIDに「にい」はあるよ。
711Name_Not_Found:05/02/01 22:01:08 ID:???
712Name_Not_Found:05/02/02 00:11:59 ID:DsxxOwL1
print "<input type=submit value='返信' onmouseout=this.style.background=#fff0f0 onMouseOver=this.style.background=#eeeeee>\n";
このソースを貼り付けたら、エラーが起きてしまいました。なぜなのでしょうか。原因がわからなくて。

713Name_Not_Found:05/02/02 00:20:09 ID:???
相当アフォウだな…
というか多分書く場所を間違えていることと、
クオーテーションで囲うところはちゃんと囲おう。
714Name_Not_Found:05/02/02 01:07:42 ID:DsxxOwL1
スタイルシートなのかと思ってここに書き込みしたのですが、違うのでしょうか。
クオーテーションはカラーのところだと思うのですが、いちおう前と後ろに'をつけたり。
ダブルクオーテーションにして\つけたりしてやってみたのですが、表示さえされなくて。
printにないところは、下ので普通にできるのですが。
<input type=reset value="a" onmouseout=this.style.background="#ffff00" onMouseOver=this.style.background="#000000">
715712:05/02/02 01:28:49 ID:???
なぜか、そのままのソースでも表示できました。
一体なんだったのか不明ですが、ありがとうございました。
ジャバスクリプトっぽいですね、これ。
716Name_Not_Found:05/02/02 01:33:52 ID:???
>>714
スタイルシートじゃなくてスクリプト。
スレ違いだとおもう。

あなたの場合、何度かやりとりをしないと問題が解決しなそうだし、
ここではなくて先にスレッドを移動するのがおすすめ。
717716:05/02/02 01:36:13 ID:???
お、おめでとう>>715

・・・
718Name_Not_Found:05/02/02 02:37:38 ID:???
>>712って>>706だろ?
CSSだのJSだのに手つける前にHTMLから学びなおすべきだと思うが
719705:05/02/02 09:42:09 ID:???
>>708
>高さをそろえたい理由は?

段組みとしてブロック要素を使っています。
見た目でいうと、各要素にbackground-colorを指定した時の下辺の終了位置を揃えたいためです。
仮に4つ横並びに段組みをした場合、各要素のheightはautoにしつつ、一番heightが大きくなる要素に、
他3つも揃うようにならないのかなと思いまして。
<br style="clear:both">などで解除しても、各々のheightになりますし、

親要素を作ってみて、子要素達のheightを親要素に揃えようとしても
(height:100%)、これでは逆に親要素が子要素の影響を受けてレイアウトが崩れてしまいますし。

>>711
せっかくの御厚意なのですが、ご指摘のレスのURL先で問題解決の糸口を見つけられませんでした。
720705:05/02/02 11:22:27 ID:???
なんとか、もう一丁親要素をつくることで、制御出来るようにはなりました。
ただ、これだと、padding-bottomの解釈がそれぞれのブラウザで異なってしまいます。
以下、便宜的にdivに番号を振ります。

1<div style="height:80%;padding:30px;border:red 1px solid;">
 2<div style="height:100%;padding:10px;border:1px solid blue;">
  3<div style="height:100%;float:left;width:100px;border:1px solid black;">
   <p>左おっぱい</p>
   </div>
  4<div style="height:100%;float:left;width:100px;border:1px solid black;">
   <p>右おっぱい</p>
   <p>右おっぱい</p>
   </div>
  <br style="clear:both">
 </div>
</div>

win ie6.0=問題なし
win ネスケ7.1=2のpadding-bottomは有効で、1のpadding-bottomは減らされる。
mac ie5.1=1.2ともpadding-bottomの数値分だけ要素外へ突き抜ける。3の左おっぱいが要素左上に集合してしまう。
mac ネスケ7.1= 2のpadding-bottomは有効で、1のpadding-bottomは減らされる。
mac safari1.2=1.2ともpaddin-bottomは正常だが、3のheight:100%が無効になる。

これらの対処法はあるのでしょうか?
721Name_Not_Found:05/02/02 11:24:49 ID:uGs+hL0f
>>705 >>719

僕も興味があって読んでみた。
これとは違うの?

http://www.fromdfj.net/html/column.html
「流し込まれるテキストのほうにも、floatを指定しておく。」

勉強になりますた
722664:05/02/02 11:34:39 ID:???
>>667
2日がんばって探しましたが、見つけられません。

真性バカですか?
723708:05/02/02 12:21:41 ID:???
>>719
高さをそろえる理由が段組されているブロックに罫線やら背景色やらが指定されていて、
下端がそろわないとかっこわるい、という理由ならば、

heightプロパティをごにょごにょするよりも、
親ブロックの背景画像をうまく利用するという方法が楽です。
724705:05/02/02 12:28:45 ID:???
>>723
なるほど、確かにスッキリかつ確実ですね。
とてもスマートなアドバイスありがとうございました。
725Name_Not_Found:05/02/02 12:44:02 ID:???
>>721
(・∀・)人(・∀・)ノ べんきょうになりやした
726705:05/02/02 12:49:37 ID:???
ちなみに、それで>>705>>719>>720の問題クリア出来ました?
自分は、今試せないので、よくわからんのですが。
とりあえず、自分はこの問題に対しては>>723さんのアドバイスで行こうと思います。
727708:05/02/02 13:46:12 ID:???
リンク先は読んでいないけど。

「流し込まれるテキストのほうにも、floatを指定しておく。」
っていうのは、高さ云々の問題じゃなくて。
MSIEに置いてブロックにfloatを指定すると、後続がブロックごと回り込む(段組状態)の
だけど、このときfloatしているブロックとの間に埋められない隙間ができる。
コレを回避する方法として、回り込む側のブロックにもfloatを指定すると、
この謎隙間はなくなる、って話だと思った。

メシ食おうっと。
728Name_Not_Found:05/02/02 13:54:44 ID:???
<form>のmarginを指定して縦スペースを短くしたいのですが
margin-top:3px;margin-bottom3pxをどうやって中にいれるのでしょうか。
クラスやidではなく直接formに入れる方法で。
729Name_Not_Found:05/02/02 14:00:28 ID:???
リンク先は読んだけど

「流し込まれるテキストのほうにも、floatを指定しておく。」
っていうのは、floatを指定しないと流し込まれるテキストのボックスが長方形にならないとか言ってるけど、
ただ単に流し込まれるテキストのボックスのほうにmarginを指定すればいいだけの話じゃないか、って思った。

メシ食ったっと。
730Name_Not_Found:05/02/02 14:05:09 ID:???
>>729
飯食うの早いなあ。
731729:05/02/02 14:35:51 ID:???
すまん、729 != 727 だ。
732708:05/02/02 14:57:50 ID:???
>>728
style属性で。

らんぷ亭のエビ天卵とじ丼まずかったっと。
733Name_Not_Found:05/02/02 15:20:15 ID:???
>>732
>エビ天卵とじ丼

うぅ…字面はうまそうだぞ。
飯食いたいけど、仕事終わらん。
テーブルレイアウト強制されて、ストレスも溜まるし…。
734Name_Not_Found:05/02/02 16:37:04 ID:???
>720の
win ie6.0=問題なし
ってのが気になる
735Name_Not_Found:05/02/02 17:02:05 ID:???
>>734
なにが気になるの?
736Name_Not_Found:05/02/02 17:15:39 ID:???
>720のおっぱい
737Name_Not_Found:05/02/02 17:26:14 ID:???
>>735
割と真面目そうな文章なのに、<div>おっぱい</div>だもんね。
738Name_Not_Found:05/02/02 19:38:03 ID:???
ttp://www.brainjar.com/ のように、
ブラウザの中央にコンテンツをセンタリングしたいのですが、左に寄ってしまいます。
どこが違うのかご指摘下さい。

htmlソースは
<DIV id="contents">
<H1>--</H1>
<UL> <LI><A href="./">home</A></UL>
</DIV>

CSSは
BODY {
MARGIN: 0px;
PADDING: 0px;}

DIV#contents{
WIDTH: 720px;
HEIGHT:100%;
MARGIN: auto;
BACKGROUND-COLOR: #fff;
BORDER-RIGHT: black 1px solid;
BORDER-LEFT: black 1px solid;
TEXT-ALIGN: left;}

H1 {
WIDTH:710px;
HEIGHT:100px;
MARGIN: 0em;
PADDING: 0em;
TEXT-ALIGN: right;}
となっています。
739Name_Not_Found:05/02/02 20:00:26 ID:???
<!DOCTYPE のモードは?
740Name_Not_Found:05/02/02 20:08:32 ID:???
>739
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
です。
741Name_Not_Found:05/02/02 20:12:13 ID:???
strict にしなされ。
742Name_Not_Found:05/02/02 20:17:36 ID:???
>741
あ、できました!ありがとうございます^^

こんな所を間違っているとは…orz
743Name_Not_Found:05/02/02 20:19:12 ID:???
>>738
先のことを考えて、DOCTYPEによる動作の違いを知っておくと良いですよ。
あと、全部小文字でってのもね。
744Name_Not_Found:05/02/02 20:51:30 ID:???
>743
わざわざアドバイスまでありがとうございます!
ちょっと勉強し直しが必要ですね。

全部小文字というのは、HTMLやCSSの記述をすべて小文字で行うということでしょうか?
745Name_Not_Found:05/02/02 20:56:19 ID:???
<form>のmarginを指定して縦スペースを短くしたいのですが
margin-top:3px;margin-bottom3pxをどうやって中にいれるのでしょうか。
クラスやidではなく直接formに入れる方法で。

これなのですが、style属性でやるということなのですが。
それがよくわからないのです、検索してもクラスのやり方で説明してるところは
たくさんあるのですが、直接入れて説明しているところがなくて。

<form style="margin-top:3px;margin-bottom3px">
細かくわからないんですが、こういう感じのやり方で
直接フォームの中にいれてformを使ったあとの、無意味な広い縦空間スペースを
減らせる方法がないでしょうか。
746Name_Not_Found:05/02/02 21:02:24 ID:???
>>744
xml を調べてみれ。
747Name_Not_Found:05/02/02 21:04:09 ID:???
>>745 >formを使ったあとの、無意味な広い縦空間スペース

意味が解らん
748Name_Not_Found:05/02/02 21:23:12 ID:???
>>747
同じく。俺も>>745の言ってることの意味がわからん。
つーか、styleわからんなら、もうここに来る以前の問題。
そんなことからいちいち教えてくれるやつはいません。終わり。
749Name_Not_Found:05/02/02 21:39:45 ID:???
エステルクローゼティータ
<form></form>
アステカダイナソアぐるみん

意味がわからないようでごめんなさい。説明下手なので、実際にそのまま説明すると。
上みたいに書くとエステルクローゼティータとアステカダイナソアぐるみん
の間に18pxぐらいの空間が空いてしまうのです。
本物はもうちょっとformの中に書いてます。
これが空きすぎなので、marginで指定してやろうと思ったのです。
もしかしたら内側なのでpaddingかもしれません。

それで>>5の説明サイトを見たりしたのですが、
説明はどれもH1 { margin-top: 3em }みたいな書き方で。
750708:05/02/02 21:40:40 ID:???
>>745
できてるじゃん(´・ω・`)
751Name_Not_Found:05/02/02 22:06:18 ID:???
自己紹介乙
752Name_Not_Found:05/02/02 22:07:01 ID:???
おっと誤爆すまん
753Name_Not_Found:05/02/02 22:28:51 ID:???
テーブルによってリンクの色を統一したいのですが、どうすればいいでしょうか?
754Name_Not_Found:05/02/02 22:40:15 ID:???
>>753
各テーブルにidつけてidごとに色の指定してやる
755Name_Not_Found:05/02/02 22:45:41 ID:???
>>753
どうせテーブルがんがん使ってそうだから class のほうがよさげだね。
756753:05/02/02 23:36:06 ID:???
>>754-755
レスありがとうございます。
>>5のサイトを参考に、idを使ってみましたが、うまくいきませんでした。
原因は何処でしょうか?

以下ソースです。

<html>

<head>

<!--
複数ページに使用するため
実際は外部から読み込みます。
-->
<style type="text/css">
<!--
#filer{
a:link{color:#000000;text-decoration: none;}
a:visited{color: #000000;text-decoration:none;}
a:hover,a:active{color: #000000;text-decoration:underline;background: none;}
}
-->
</style>

</head>

続く
757753:05/02/02 23:37:18 ID:???
続き

<body bgcolor="#ffffff">

<!--
簡易テーブル製ファイラー
現在地のセルの背景は青にする
-->
<table border="1" align="center" id="filer">
<tr>
<td colspan=8>/index.html
<tr>
<td width=80 bgcolor="#eeeeee">Content
<td width=80 bgcolor="#4488ee"><font color="#ffffff">Index
<td width=80><a href="chat.html">Chat
<td width=80><a href="bbs.html">Bbs
<td width=80 bgcolor="#eeeeee">Directory
<td width=80><a href="new/index.html">New
<td width=80><a href="program/index.html">Program
<td width=80><a href="diary/index.html">Diary
</table>

<hr>

内容 <a href="#">リンク</a>

</body>

</html>

おわり
758Name_Not_Found:05/02/02 23:43:19 ID:???
ひどいよ</a>くらい閉じようよ
759Name_Not_Found:05/02/02 23:46:17 ID:???
>>756-757
何処でそんなの習ったんだ。いろはの"い"からhtml勉強し直せ。
760Name_Not_Found:05/02/02 23:52:30 ID:???
>>757
終わってるよ
761753:05/02/02 23:52:33 ID:???
そこに突っ込まれるとは思っていませんでした。
ソフトウェア依存かもしれませんが<td>を入れると前のセルの設定が無効化されたので、省略してしまいました。
すみません。
762Name_Not_Found:05/02/02 23:53:23 ID:???
>>757
要素をネスト(謎)して指定するときは、Cみたいなプログラム風に{}を重ねるんじゃなくて、
子孫セレクタ(←検索ワード)とかを使うのだよ。
がんがれ。
763Name_Not_Found:05/02/02 23:57:28 ID:???
え、</a>って省略できるものなの??????

CSSは正しいhtmlを前提としています。
まず正しいhtmlを書こう。。。

がんばれ。
764Name_Not_Found:05/02/02 23:58:49 ID:???
(´-`).。oO( >753はこの世にIEしかないと思っているんだろうなぁ・・・)
765Name_Not_Found:05/02/03 00:02:57 ID:???
>>753
CSSとか正しいHTMLとかいう話以前に、質問の意図がみえない。
つまり、テーブルが1つしかないのにどこの色を変えたいのかわからん。
ひょっとしてセルのことかな?
766753:05/02/03 00:03:11 ID:???
>>764
いえいえ、MSは嫌いなのです。
NN系でも動作確認しましたが、ちゃんと動いてくれました。
自鯖で回線が細いのできるだけ省略してしまいました。
767753:05/02/03 00:06:15 ID:???
>>765
すみません>>765の文がおかしいですね。
ページ上部にテーブルを置いていて、その中のリンクだけ色を統一したいんです。
リンクそれぞれに<font color="#000000"><a href="hoge">hoge</a></font>としていると、効率が悪いので。
768753:05/02/03 00:07:28 ID:???
あぁすみませんアンカーミスです。
>>767の文の二行目は>>765ではなく>>753でした。
769Name_Not_Found:05/02/03 00:07:43 ID:???
>>754-755で回答付いてるじゃん。

勉強不足の言い訳はしないように・・・
770753:05/02/03 00:09:35 ID:???
私、言い訳しました?
771Name_Not_Found:05/02/03 00:10:27 ID:???
もういいよ。帰れ
772753:05/02/03 00:15:22 ID:???
決して悪いことはしていないと思うのですが、
結果的にスレを汚してしまいました。
すみませんでした。帰ります。
773Name_Not_Found:05/02/03 00:16:10 ID:???
 言い訳

766 :753:05/02/03 00:03:11 ID:???
>>764
いえいえ、MSは嫌いなのです。
NN系でも動作確認しましたが、ちゃんと動いてくれました。
自鯖で回線が細いのできるだけ省略してしまいました。

774Name_Not_Found:05/02/03 00:16:14 ID:???
>>766
> 自鯖で回線が細いのできるだけ省略してしまいました。

省略って、省略して差し支えないところを削ることを指す言葉だと思いますよ。

aは開始タグも終了タグも必須だよ。

動機が何かにかかわらず、必須なものは削らないように。

(いじわる言い過ぎかな)
775762:05/02/03 00:19:09 ID:???
(´・ω・`)
776Name_Not_Found:05/02/03 00:21:02 ID:???
>>762 >>775
いいこいいこ
777753:05/02/03 00:22:04 ID:???
帰るといったのにちょっとふに落ちないのでレスします。

>>773
私が>>770で言いたかったのは>>769に書いてある
「勉強不足の言い訳」はしていませんという意味ですが、言葉足らずでした。すみません。

>>774
>>766で書きましたが動作確認したブラウザで不具合は見つからなかったので必須では無いと
判断しました。
私の勘違いですね。すみませんでした。
778Name_Not_Found:05/02/03 00:22:43 ID:???
(´・ω・`).。oO(うれぴー)
779753:05/02/03 00:23:41 ID:???
>>762
すみません、子孫セレクタを検索している途中に>>764のレスが返ってきたのでそちらの返事を書いていました。
いま勉強中です。
780Name_Not_Found:05/02/03 00:24:50 ID:???
「自分が見えればあとはどうでも良い」  立派だ。
781753:05/02/03 00:27:47 ID:???
>>780
いえいえ、そんな馬鹿ではありません。
しかし>>756-757を見るとそう見えてしまいます。
誤解を生む書き方をした私が悪いでした。
782774:05/02/03 00:29:35 ID:???
まぁまぁ落ち着いて。
お茶でも。。。

僕は別に帰らなくてもいいと思うヨ

>>753
なるほど。
「動作確認」をあまり信用してはならないという教訓ですな。

あと、経験上、あまりデータ量をけちらないほうがいいと思う。
こういう変なトラブルの原因になるからね。
特に最初は。
『富豪的』にいきません?
783Name_Not_Found:05/02/03 00:31:13 ID:???
「あのー ちょっとよろしいでしょうか?」
784774:05/02/03 00:34:49 ID:???
>>783
ごめんエラかった
785Name_Not_Found:05/02/03 00:38:25 ID:???
今、子孫セレクタを勉強してんだろ。
こんど来たら優しくしような。
786774:05/02/03 00:42:03 ID:???
ウン。。。
787Name_Not_Found:05/02/03 00:54:52 ID:???
<blockquote></blockquote>
このタグの初期のpaddingの値って何かわかるでしょうか。
こういう初期値が載ってるサイトがあればなぁといつも思うのですが。

例えばtableのcellspacingの初期値は何だみたいなの。
ということでblokquoteの初期値わかるかたがいればお願いします。
788753:05/02/03 00:59:54 ID:???
>>782
ほんとその通りです。

子孫セレクタ、使えるようになりました。
>>762さんありがとうございました。
住民の皆さん、迷惑かけてすみませんでした。

<html>
<head>
<style type="text/css">
<!--
#filer a:link,#filer a:visited{
color:#000000;
text-decoration: none;
}
#filer a:hover,#filer a:active{
color:#000000;
text-decoration:underline;
background: none;
}
-->
</style>
</head>
<body bgcolor="#ffffff">
<a href="#">リンクテスト1</a>
<table border="1" id="filer">
<tr><td>
<a href="#">リンクテスト2</a>
</td></tr>
</table>
</body>
</html>
789Name_Not_Found:05/02/03 01:03:11 ID:???
>>753
腹を立てずに頑張った貴方は偉い。よかったな。
790Name_Not_Found:05/02/03 01:04:20 ID:lYjH/7X+
> 787

> <blockquote></blockquote>
> このタグの初期のpadding


paddingというより、UAの表示方法では??
791774:05/02/03 01:11:38 ID:???
>>788
よくやた!
792Name_Not_Found:05/02/03 01:19:00 ID:???
ブロック要素のなかのブロック要素を中央配置したいときは
外側のブロック要素で、

text-align: center

なんか?ちがってるんか?
793Name_Not_Found:05/02/03 01:26:01 ID:lYjH/7X+
>792

それは違う。

中央中央と言うが、"なににたいしての中央なのか"
もう一度、よく考えて出おなして来くるがいい。

イメージのみで語るな。
794Name_Not_Found:05/02/03 01:45:00 ID:???
それって中のブロック要素に継承されない?
795Name_Not_Found:05/02/03 02:10:40 ID:F85wEYSN
>>790
それです、凄く気になって。
796Name_Not_Found:05/02/03 02:24:09 ID:???
>>787
IEならJavaScriptでcurrentStyleを使って調べれば。
Mozilla系ならデフォルトスタイルシートがファイルとして存在してるでしょ。
<Firefoxをインストールしたディレクトリ>/res/html.cssとか。

ある程度についてはCSS Laboratoryでまとめられてるけど。
ttp://is.vis.ne.jp/notes/browser/default_style.xhtml
797Name_Not_Found:05/02/03 02:41:10 ID:???
>>796
メチャメチャ助かりました、本当にありがとうございます。
かなり参考になりました、保存しておきます。
798774:05/02/03 03:38:31 ID:???
>>739
>>792

text-alignはインライン要素のセンタリングに使うもの。
ブロック要素のセンタリングにtext-alignは使えないらしいよ

http://www.mozilla.gr.jp/standards/webtips0004.html
などを参考にしてください
799Name_Not_Found:05/02/03 07:34:51 ID:???
容量を抑えたいなら、タグを省略するよりも、
画像を控えめにする、といった方が100倍くらい
効果的かと思わないでもないということもないと思います
800Name_Not_Found:05/02/03 09:23:45 ID:???
>>799
なに言ってるかわかんねえよ!
801Name_Not_Found:05/02/03 09:30:16 ID:???
言いたかったことは、もうすぐ↓だね、ってことだよ
ttp://512kb.net/flash5.htm
802Name_Not_Found:05/02/03 09:44:11 ID:???
>>798
thx! こんな手法使うんだね。知らんかったよ。
803Name_Not_Found:05/02/03 10:07:33 ID:???
新人イビリしてる奴ってよくこういう物言いしてるよな >>793
804Name_Not_Found:05/02/03 10:40:02 ID:???
>>798
結局IEのためにtext-align:center;を入れないと駄目ってことだな。
805Name_Not_Found:05/02/03 10:40:14 ID:???
>>803
俺、わりと親切なアドバイスだと感じたけど。
事例ごとではなく考え方の根本について諭すのってさ、めんどいじゃん。
806Name_Not_Found:05/02/03 10:41:40 ID:???
>>793はニュアンスを否定し空気嫁ない屁理屈を言ってるだけだと思う。
807Name_Not_Found:05/02/03 13:56:16 ID:???
いや、>>793のような対応をするのは正直しんどいよ。
新人に聞かれたことをホイホイそのまま答えるのって、
そいつのことなんかどうでもいいときじゃん。
808Name_Not_Found:05/02/03 14:20:02 ID:???
>807
だね。
809Name_Not_Found:05/02/03 23:31:58 ID:eIzcozJ5
以下の上下の入れ替えは可能なのでしょうか?

<div style="height:auto">
<p>おっぱい</p>
</div>
<div style="height:auto">
<p>まんこ</p>
</div>

これを画面上ではまんこが上、おっぱいを下に持っていきたいんです。
ヨロシクお願いします。

810Name_Not_Found:05/02/03 23:37:56 ID:???
>>804
凄く不毛なことだよね。
場合によっては無駄にdiv増やしたりしないといけないわけだし。
811Name_Not_Found:05/02/04 00:20:16 ID:???
>809
下品な言葉は慎もうよ。
812809:05/02/04 00:32:59 ID:???
>>811
申し訳ない。
で、出来るかなあ。いろいろ考えてみたけど、
双方に流し込まれるテキストの拡大・縮小にもレイアウトが崩れないようにするには
どうしたらいいものやら。
813Name_Not_Found:05/02/04 00:36:02 ID:???
>>809
絶対指定
814809:05/02/04 00:40:07 ID:???
>>813
出来る?
お手間をかけるけど、>>809のソースに追加して書いてみてくれるかな?
815813:05/02/04 00:43:44 ID:???
寝る
誰か頼む
816Name_Not_Found:05/02/04 00:48:03 ID:???
>>813
ことわる
817Name_Not_Found:05/02/04 00:50:49 ID:???
position:absolute;
818809:05/02/04 00:50:59 ID:???
…もしかして、出来ない?
だって、どっちの要素もheightが変わるんだし。
……………絶対指定じゃ、DEKINAINJA???
819Name_Not_Found:05/02/04 00:53:26 ID:???
そもそもなんで入れ替えたいのか分からない
820809:05/02/04 00:53:57 ID:???
俺の言葉も足りなくてごめんなさい。
お※ぱいとま※こは重なりあうことなく上下逆にしたいのですよ。
821809:05/02/04 00:59:08 ID:???
>>819
SEO対策でページのキーワードを「お※ぱい」にしたい場合、
<body>直後におきたいからです。
822Name_Not_Found:05/02/04 01:09:40 ID:???
そーゆーspamくさい方法使うのヤメレ

よそからリンクされるような魅力的なページを作りなさい。
それが一番のSEO対策です
823809:05/02/04 01:09:48 ID:???
<body>
<!-- テキスト部分 -->
<div style="height:auto;">
<h1>千葉県について</h1>
<h2>千葉県の県庁所在地</h2>
<p>千葉県は……………</p>
</div>
<!-- 各ページ共通部分なんかメニューとかいろいろ -->
<div style="height:auto;">



</div>

で、表示は逆って方が、検索エンジンのポイントが高いし、cssをブラウザで抜かれた場合も
親切じゃないかなと思って。
824809:05/02/04 01:13:46 ID:???
>>822

SEOだけを見れば、確かにスパム臭くはあるけど、
音声読み上げとかでもどのページを開いても共通部分をだらだら読まれたりするより
ユーザビリティの視点から優れてると思うんだ。
>>823で書いたように、CSSをOFFにされた場合でもめちゃ文章がすっきり観られるし。
825809:05/02/04 01:28:15 ID:???
やっぱり無理か…。
826Name_Not_Found:05/02/04 01:37:43 ID:???
>>823みたいな例だったら、各ページ共通部分は
高さを固定に出来そうだから、
絶対位置指定でいけるんじゃない?
827809:05/02/04 01:49:45 ID:???
>>826
いろいろ考えたんだけどやっぱり共通部分のメニューとかもテキストで打ち込むのが親切だからさ。
そうするとheightが変わるじゃない。

確かに共通部分の高ささえ固定出来ればいけるんだけどね。
828Name_Not_Found:05/02/04 01:51:47 ID:???
マークアップのみでサーチエンジンに通用するのは
使われていないワードだけだよ。
競合サイトがあるのなら、被リンク数を増やさない限り
何をやっても無駄。
829809:05/02/04 02:02:49 ID:???
>>828
まあまあSEOについてはスレ違いだからよしましょう。
もちろん自分もポピュラリティ・レピュテーションは存じてますよ。
ただ、正しいマークアップは、テキスト要素だけではなくテーマ要素の点数にも
関係するんじゃないのですか?

と、この話はこのあたりにして、
上下逆に出来るかですよ、このスレでの問題は。
830Name_Not_Found:05/02/04 02:28:23 ID:???
float使ったらできるんじゃない?width:100%;とかにして。
あんまりお勧めしたくはないけど
831Name_Not_Found:05/02/04 02:49:49 ID:???
質問なんですけど、

<ul>
<li class="aaaa">--</li>
<li class="bbbb">
  <ul>
    <li class="aaaa">--</li>
    <li class="bbbb">--</li>
  </ul>
</li>
</ul>

みたいにclass="bbbb"のなかにもう1つ同じclass="bbbb"を入れても
W3C的には許されますか?
832Name_Not_Found:05/02/04 02:57:56 ID:???
>>831
それ全然CSSの質問じゃないけど、OK
833Name_Not_Found:05/02/04 08:08:45 ID:???
<ul>
<li class="nullpo">
  <ul>
    <li class="ga">--</li>
    <li class="ga">--</li>
  </ul>
</li>
834Name_Not_Found:05/02/04 08:52:37 ID:???
>809
上下逆にするのにこだわらないで
左と上でもいいんじゃないの
要は目で見た場合の順番が先になればいいんだから
835809:05/02/04 10:22:56 ID:OOuaen6U
>>834
ありがとうございます。
確かに上下逆にはこだわりはありません。
左と上ですか。
なかなかイメージできないのですが、具体的には?
836Name_Not_Found:05/02/04 11:55:17 ID:???
>具体的には?

 左と上です
837809:05/02/04 12:00:46 ID:???
>>836
>具体的には?

>左と上です

そりゃそうですね。そもそも具体的でした。失礼しました。
ソースかブロックの動かし方について軽く触れていただけれると助かります。
宜しくお願いします。
838Name_Not_Found:05/02/04 12:05:34 ID:???
少しは自分で考える気はないのかね?
839809:05/02/04 12:26:38 ID:???
>>838
どうもすみません。
考えたいところなのですが、834氏ご指摘の「左と上」というのが何を指してのものなのか正直、わからなかったのもので。
言葉の意味がわからないと誤解を生み、CSSについて考える以前の話になるじゃないですか。

だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。
840Name_Not_Found:05/02/04 12:35:41 ID:???
> だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。

うけた。
809の困ってる顔が目に浮かぶようだ。。。。


僕も「左と上」が正直わからん。
『ページ固有の要素を、左にスペースをあけて「上」から下へ流し込む。
共通部分を縦長にして「左」に流し込む。』
っていう意味で「左と上」なんでしょうか?
841Name_Not_Found:05/02/04 13:17:24 ID:???
SEO?  ( ゚д゚) あん?
パン屑でどうにか汁
842Name_Not_Found:05/02/04 13:21:35 ID:???
>>809の書き方が偉そうに感じるのは俺だけか?
843834:05/02/04 13:46:27 ID:???
混乱させて申し訳ない
左と上じゃなく左と右です

自分も似たようなことやってて
fixed使えば上と下でもできそうだが、IEが対応してないね
844Name_Not_Found:05/02/04 14:01:51 ID:???
おおお、いろいろやってみたけどだめぽ、上下反転。
でも、SEO目的なら上にコンテンツが並んでたってよくね?目次だし。

あと、きちんとマークアップしていればページランクが低くても表示順位は挽回できる、
ってどこかのサイトで見たことがあるから、ガンガレ。
845809:05/02/04 14:30:45 ID:???
>>843
あ、ごめんなさい。大丈夫です。気にしないでください。

>>844
そろそろ妥協しようと思ってます。いろいろ考えてはみているのだが、上下反転は厳しい…。
結論として、「cssでは2つのブロック要素がともにheight:autoの場合、その上下反転は不可能」
ということでしょうね。
悔しいけど……。
846Name_Not_Found:05/02/04 17:55:16 ID:???
デザインを始めから考えたほうが早くないか?
847Name_Not_Found:05/02/04 17:56:26 ID:???
>>809
>だって、あなた、「左と右」でもなく「上と下」でもなく「左と上」ですよ。

 これ、他で使って良いか?
848Name_Not_Found:05/02/04 18:06:29 ID:???
このやりとり面白すぎだろ。↓

>>834-839
849Name_Not_Found:05/02/04 19:03:58 ID:???
エロイ方にお尋ねしまつ。
CSSファイルで文字コード宣言してれば、
htmlファイルと文字コード違ってても無問題ですか?
850Name_Not_Found:05/02/04 19:27:15 ID:???
>>849
ぼくは間違いなくエロイと思うのですが、
答えないといけないのでしょうか。

がんばります。

えっと、僕は無問題だと信じて生きてきました。
eucjpのページとsjisのページ、同じCSSファイルを使ってます。
いまのところ問題はありません。

でも本当に無問題かどうかは分かりません。
でもでも、常識的に、それぞれ別に文字コード宣言もあるのだし、
文字コードが違ってもよいと思います。

もし文字コードが同じでなければならないなんてのなら、僕はテロで対抗します。通報しないで。
851Name_Not_Found:05/02/04 22:09:37 ID:YPW8tlTd
WIN IE6.0でのバグだと思うのですが、

ページ全体をブログなどで良く見られる横3段組スタイルにテーブルで分けて、
その真ん中のペインに、TABLE { filter:Alpha(opacity=80); } で透過させた
テーブルを設置しました。
で、右のペインにある任意のリンク(hover有り)にマウスカーソルを持っていくと
真ん中のテーブルの下1/4ぐらいが消えるのです。
真ん中のペインにある他のリンクに同様にカーソルを載せると復活します。

分かりにくい説明かもしれませんが、バグ回避の方法など有れば
ご教授願えないでしょうか
852831:05/02/04 22:16:57 ID:???
> 832
ありがと。

> 全然CSSの質問じゃない
よく考えたらそうだった。。。スマソ
853Name_Not_Found:05/02/04 22:26:26 ID:???
で、結局809の上下反転は不可能なの?
俺、ちょっと興味あるけど、やり方思い浮かばん。
誰か解けないの、これ。
854Name_Not_Found:05/02/04 22:46:18 ID:???
>>851
M$のサポートへ聞いて下さい。
855Name_Not_Found:05/02/04 22:49:32 ID:???
>>853
無理。絶対不可能。想定されてないでしょ。
856Name_Not_Found:05/02/04 22:52:32 ID:???
>>851
再現できるソース晒せよ
857Name_Not_Found:05/02/04 23:35:48 ID:wcdMop6h
http://www.brainjar.com/
のタグもどきメニューってCSSで可能ですか?
上部メニュー押したらピコって出てくるやつです
858Name_Not_Found:05/02/05 00:00:35 ID:???
behaviorを使ってやれないことはないかもしれないが
それはJSの管轄だ。
859Name_Not_Found:05/02/05 00:33:37 ID:???
うざいだけだからやめておけ
860Name_Not_Found:05/02/05 00:51:24 ID:???
懐古主義者は死ね
861Name_Not_Found:05/02/05 01:09:08 ID:???
読めねえ
862Name_Not_Found:05/02/05 01:13:13 ID:???
なにが?
863Name_Not_Found:05/02/05 01:18:09 ID:???
漢字が・・・
864Name_Not_Found:05/02/05 01:23:46 ID:???
CSSの前に漢字の勉強
865Name_Not_Found:05/02/05 01:24:49 ID:???
ウッシ
866Name_Not_Found:05/02/05 02:27:19 ID:???
>>860-865
ワロタ
867Name_Not_Found:05/02/05 03:38:39 ID:???
868Name_Not_Found:05/02/05 07:25:31 ID:???
てst
869Name_Not_Found:05/02/05 13:56:39 ID:???
>>867
ヤボ
870Name_Not_Found:05/02/05 14:14:18 ID:cmjEfO5W
訪問時に不便なので揚げさせてもらいます。
871Name_Not_Found:05/02/05 16:08:49 ID:???
色んなサイトのcssを見て回ってるんですが、検索しきれなかたったので質問。
cssファイルに下記のような記述がありました。
これはどういった意味なんでしょうか?


* {
margin: 0;
padding: 0;
}
872Name_Not_Found:05/02/05 16:13:07 ID:???
全てのタグに対しマージンとパディングを0にするということです。
マージンは親要素からの距離、
パディングはその要素内の余白です。
873Name_Not_Found:05/02/05 16:14:20 ID:???
パディングって要素からボーダーの距離じゃないのか
874871:05/02/05 16:15:17 ID:???
>>872
即レスどもです。
*マークの意味がわかりませんでした。
ありがd
875Name_Not_Found:05/02/05 16:31:03 ID:LNU4OPoh
>>871のように、*でパディングとマージンを0にしますよね。
そうすると、UL要素とOL要素のマージンも0になるのは当前ですよね。
ですが、マージンが0になると、リストのマークが見えなくなってしまいます。
どれだけマージンを入れたら良いでしょうか?
876Name_Not_Found:05/02/05 16:35:29 ID:???
入れてやってみたのかね?

 やってみてから質問しような。
877Name_Not_Found:05/02/05 16:47:57 ID:???
li {
margin-left: 2.5em;
}

わたしはこれくらいが見やすくていいとおもう。
878875:05/02/05 16:59:42 ID:LNU4OPoh
>>876
やってみてから質問してます。

>>877
2.5emですか。試してみます
879Name_Not_Found:05/02/05 17:26:23 ID:???
>試してみます

 やってねーじゃん
880Name_Not_Found:05/02/05 20:08:06 ID:9XaypqZ9
>>809
構造次第だが、positionでtop位置を1emとかにすれば上下逆転可能だ。
881Name_Not_Found:05/02/05 20:09:23 ID:???
sage忘れた。
ついでにソース↓
<html>
<head>
<meta http-equiv="content-type" type="text/html; charset=EUC-JP">
<title>入れ替え配置テスト</title>
<style type="text/css">
body {
position: relative;
}
div.a {
position: absolute;
top: 1em;
background: #ccc;
}
div.b {
position: absolute;
top: 0;
background: #999
}
</style>
</head>
<body>
<div class="a">ここが下になる</div>
<div class="b">こっちが上</div>
</body>
</html>
試してみ。
882Name_Not_Found:05/02/05 20:11:03 ID:???
どうでもいいよ、んなもん
883Name_Not_Found:05/02/05 20:13:59 ID:???
divのheightを1emと決め付けてabsoluteを使ってできたとはワラタ
884Name_Not_Found:05/02/05 20:32:43 ID:???
文字サイズに応じて位置が調整されるのが重要なのであって
具体的なサイズまで知るか。
単に実現は可能で環境に応じて対応し得ると示しただけ。
885Name_Not_Found:05/02/05 20:42:11 ID:???
質問です。

任意の要素にem単位でmarginを指定するとき、通常では1emの大きさを
その要素のfont-sizeで指定されるフォントの大きさとして計算しますが、
これを、font-sizeの指定にかかわらず、常に1emの大きさをfont-size:100%での
フォントの大きさとして計算する方法はないのでしょうか?

たとえば、
<div style="font-size:150%; margin-left:3em">ぬるぽ</div>
<div style="font-size:100%; margin-left:3em">がっ</div>
の場合、「ぬるぽ」は「がっ」より左端が右にズレて表示されますが、
これが揃うようにしたいのです。
886Name_Not_Found:05/02/05 20:47:42 ID:???
<div style="margin-left:3em">
<p style="font-size:150%">ぬるぽ</p>
<p style="font-size:100%">がっ</p>
</div>
887Name_Not_Found:05/02/05 20:48:35 ID:???
<div style="font-size:150%; margin-left:2em">ぬるぽ</div>
888Name_Not_Found:05/02/05 21:00:37 ID:???
>>884
最初から height が auto の場合、って言ってるじゃない。

高さ固定の場合なら簡単に出来ることくらいみんな分かってるよ。

889Name_Not_Found:05/02/05 21:05:37 ID:???
質問を理解できるレベルじゃないなりにがんばったのだろうから
あまりイジメず子供をあしらうように大げさに誉めてやれよ。
890885:05/02/05 21:05:54 ID:???
>>886-887
なるほど。
言われてみれば、そう難しく考えることでもなかったですね。
即レスありがとうございました。
891Name_Not_Found:05/02/05 21:06:57 ID:???
>>889
おとなですね

わたくしは修行が足りないようです。
精進します。
892Name_Not_Found:05/02/05 21:38:56 ID:mRVu0HBy
CSSがインラインによるものしか読み込みません。
なにぶん今日html、CSSを触ったもので稚拙なミスをしているかもしれませんが
どうか御教授願います。
OS:Win98SE ブラウザ:IE6.0
[ソース]
<html>
<head>
<style type="text/css">
<!--ao{font-family: sans-serif;font-size: 36pt;font-style: normal;color: #00FF99;}-->
</style>
<title>lesson</title>
</head>
<body>
<ao>HelloWorld</ao>
<ao2 style="font-size: 30; color: #33CCCC;">
<b>HelloWorld</b></ao2>
<h1 style="font-size: 30; color: #33CCCC;">
<b>Hello World</b></h1>
</body>
</html>

[表示レビュー]
HelloWorld HelloWorld /*ここの文字はCSSを読み込まない*/
Hello World/*ここの文章だけCSSを読み込む*/
893Name_Not_Found:05/02/05 22:22:33 ID:???
>>892
インライン要素とかブロック要素とか以前に
xmlではないので、aoとかao2など新しいタグを勝手に作ることはできません。

<html>
<head>
<style type="text/css">
<!--
.ao{font-family: sans-serif;font-size: 36pt;font-style: normal;color: #00FF99;}
-->
</style>
<title>lesson</title>
</head>
<body>

<div class="ao">HelloWorld</div>
<div style="font-size: 30; color: #33CCCC;">
<b>HelloWorld</b>
</div>

<h1 style="font-size: 30; color: #33CCCC;">
<b>Hello World</b></h1>
</body>
</html>
894Name_Not_Found:05/02/05 22:28:09 ID:???
あ、body部分少し間違った。
あと、インライン要素の特定の部分にスタイルを適用したい場合はspanタグを、
複数のインライン要素・ブロック要素からなるブロックにスタイルを適用したい場合は
divタグを使ってください。

<body>

<span class="ao">HelloWorld</span>
<span style="font-size: 30; color: #33CCCC;">
<b>HelloWorld</b>
</span>

<h1 style="font-size: 30; color: #33CCCC;">
<b>Hello World</b></h1>
</body>
895Name_Not_Found:05/02/05 22:59:46 ID:???
>>892
大物だな。
896Name_Not_Found:05/02/05 23:28:50 ID:???
>>893-894
オマイは回答するな。質問者がかわいそうだ。
897892:05/02/05 23:29:58 ID:???
>>893
有り難う御座います。
参考文献等を曲解していました。
なるほど、特定のタブがあったのですね。
「h1」タブがうまく表示されたのは固有のタブだったのでしょうか。
兎に角もう一度リファレンスを読み返してみる事にします。
>>895
すみません、基礎さえなってなかったですね。
出直してきます。
898Name_Not_Found:05/02/05 23:30:49 ID:???
タブ…
899892:05/02/05 23:36:46 ID:???
>>897
そこは見ないで下さい。
900Name_Not_Found:05/02/05 23:40:53 ID:???
アンカーミスまで…。
>>898でした。
抹殺されてきます。
901Name_Not_Found:05/02/05 23:41:06 ID:???
タブで思い出したが、手を着かせて後ろからってのが好きだ。
902892:05/02/05 23:58:07 ID:???
私は下が好きですね。
903893-894:05/02/06 00:52:25 ID:???
>>896
ムネン アトヲ タノム・・・
904Name_Not_Found:05/02/06 01:09:31 ID:???
手打ちにされたか・・・
905Name_Not_Found:05/02/06 02:03:30 ID:Spa+Mrif
質問させてください。
HTML内に書くとちゃんと表示されるのですが、外部スタイルシートにすると表示
されないのです。

<style type="text/css"><!--
#zzzz{〜〜;}
#zzzz a{〜〜;}
#zzzz a:hover{〜〜;}
--></style>
<ul id="zzzz">
<li><a href="cccc.html"○○</a></li>
<li><a href="bbbb.html"○○</a></li>
</ul>

こんな感じのものです。
外部スタイルシートから呼び出すためにはどうしたらいいのでしょうか。
よろしくお願いします。
906Name_Not_Found:05/02/06 02:05:51 ID:???
まずお前がどのようにして呼び出しているのか提示しろ
話はソレからだ
907Name_Not_Found:05/02/06 02:17:18 ID:Spa+Mrif
905です。
ロールオーバーのような感じで呼び出しています。
長いので省略してしまいすみません。
#zzzz{margin:0px;padding:0px;height: 30px;list-style-type: none;}
#zzzz a{margin: 0px;padding: 0px;width: 140;height: 32;color: #666666;
background-image: url(img/zzz.gif);background-repeat: no-repeat;
text-align: left;text-decoration: none;display: block;}

#zzzz a:hover{color: #FFFFF;background-image: url(img/zzz2.gif);
background-repeat: no-repeat;}

こんな具合です。
908Name_Not_Found:05/02/06 02:25:14 ID:???
>>907
>外部スタイルシートにすると表示されないのです。
どうやって読み込んでいるのか書けと言ってるんだ。
中身のことを聞いてるわけじゃない。
909Name_Not_Found:05/02/06 02:34:32 ID:Spa+Mrif
すみません。今は、
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトル</title>
<style type="text/css"><!--
#zzzz{〜〜;}
#zzzz a{〜〜;}
#zzzz a:hover{〜〜;}
--></style>
</head>
<body>
〜〜
<ul id="zzzz">
という感じで、<head>と</head>の中にCSSを入れています。
910Name_Not_Found:05/02/06 02:37:36 ID:???
うきゃーもー勝手にしろ。どうせちょっとしたミスだろ
911Name_Not_Found:05/02/06 02:37:57 ID:???
質問の意味を理解しているか?
お前はCSSを外部から読み込めないんだろ?
どうやって「外部から読み込ませよう」としているのかを
とっとと晒せといってるんだ
912Name_Not_Found:05/02/06 02:38:22 ID:???
もういい、カエレ
913Name_Not_Found:05/02/06 02:40:14 ID:???
画像の相対パスの起点を間違えてるに200ノットインジョブ
914Name_Not_Found:05/02/06 02:46:12 ID:???
もうほっとけ。
直に書いて表示されるならそうさせとけばいい。
915Name_Not_Found:05/02/06 02:47:06 ID:Spa+Mrif
的はずれな答えですみませんでした・・。
外部には、「#zzzz」のままでは読み込めなかったので、「ul#zzzz」
にしたり、「ul.zzzz」にしたりしてみたのですがダメだったので、
何か書き方があるのかと思い聞いてみました。
お手数おかけいたしました・・
916Name_Not_Found:05/02/06 02:51:45 ID:???
ここ数十レスで笑い死ぬかと思った…
917Name_Not_Found:05/02/06 02:56:03 ID:???
<link rel="stylesheet" type="text/css" href="xxx.css" />
918Name_Not_Found:05/02/06 03:05:54 ID:???
CSSで整形する場合ポジショニング と フロートどっちが良いのでしょうか?
919Name_Not_Found:05/02/06 03:49:23 ID:???
>>918
具体的なケースを挙げれないならご自分で判断するしかありませんよ。
場合によるものだと思う。
920Name_Not_Found:05/02/06 04:07:06 ID:???
頭の悪い発言スレにきたのかと思ったよ。
921Name_Not_Found:05/02/06 08:52:21 ID:???
いやあ、最近の噛み合なさっぷりはコントですなぁ!
ホント、ネタスレを読んでる気分。
922Name_Not_Found:05/02/06 12:22:34 ID:WkugB8u2
perlで書いたCGIスクリプトの中にCSSを埋め込みたいのですが
どうゆう具合に埋め込んだらよいか教えて下さい
CGIスクリプトの中にhtmlタグを入力する場合
print "〜、
とかヒアァードキュメントで
print <<"EOM";

EOM
とすればできるのですが?スタイルシートの場合わかりません
宜しくおながいします
923Name_Not_Found:05/02/06 12:24:55 ID:???
↑ツマンネー
924初実:05/02/06 13:28:57 ID:YMoE1KQO
http://hp.xrea.jp/m/s/27.htmlについてなんですが…。
フレームを使ってページ枠にするとフレームごとに枠がついてしまいページ全体を枠で囲む事ができません…。
どうすればよいでしょうか?
925Name_Not_Found:05/02/06 13:40:22 ID:???
FRAMESET記述してるとこでスタイルシートつかわないと枠ごとになっちゃう罠
926初美じゃないけど:05/02/06 13:46:41 ID:???
>>925
なるほどそうやったらできるのか!
927Name_Not_Found:05/02/06 14:52:18 ID:???
どういう場合にポジショニングを使って
どういう場合にフロートを使うべきなのでしょうか?
928シャチホコ:05/02/06 17:23:23 ID:YyL/Ez91 BE:5440032-#
カスケードがどうにも読み込まれません。
既出だったらごめんなさい。
929Name_Not_Found:05/02/06 17:25:00 ID:???
読み込んでる部分のソース書け
930シャチホコ:05/02/06 17:27:36 ID:YyL/Ez91 BE:48956696-#
全てです。
931Name_Not_Found:05/02/06 17:31:50 ID:???
読み込むHTMLファイルのソースを書け。
932ソース:05/02/06 17:45:50 ID:UlYcFtyO
ソースは豚カツに書けると美味いんだぞ。
書け書けくん
933Name_Not_Found:05/02/06 18:45:03 ID:???
>>928
もっと詳しく説明して
934Name_Not_Found:05/02/06 18:47:54 ID:???
>>931
932みたいのは気にしないで。
えらいえらい
935Name_Not_Found:05/02/06 20:48:45 ID:???
現在テーブルレイアウトからCSSレイアウトに移行しようと思っています。
それで、下のようなレイアウトがしたいのです。
[---300px---][---残りの横幅---]
というレイアウトがしたいのです。フレームは使いたくありません。
で、ポジションを使えばできるのですが、
ポジションを使えば、ちょっとした誤算などで重なりあったりしてうまくいけません。
フロートを使って上記な様なことができれば嬉しいのですが・・・・
フロートを使ってできるのでしょうか?

936蒼月:05/02/06 21:29:28 ID:cBmlLCf6
div2つ使ってcssでフロートleftとrightにするだけ
ついでにleftのidにはwidth="300px"指定しとけ
937Name_Not_Found:05/02/06 21:36:11 ID:???
>>936
まったく論外だな(w
938?\?[?X:05/02/06 21:44:17 ID:UlYcFtyO
>>936
ど素人の発想だ。
まともな回答を書け。
939935:05/02/06 21:44:53 ID:???
>>936
フロートする場合は必ず横幅は指定しないといけないらしいです。
940Name_Not_Found:05/02/06 22:00:42 ID:???
左に300pxのボーダーを引いたボックスを作り、そのボーダーの上にポジション指定で
300pxのボックスを作る。
941935:05/02/06 22:14:44 ID:???
ポジション指定は難しいです;
文書が少しでも多くなれば、ボックスの縦幅が大きくなり、崩れますし;
文字サイズを大きくするだけでも崩れますし
どうすれば・・・・・・
942Name_Not_Found:05/02/06 22:18:14 ID:???
お前の質問はFAQに載ってるサイトで勉強すればあっという間に解決するんだよ。
ただ単に左ブロックをフロートして右ブロックはフロート分のマージンとればいい話だろ。
943Name_Not_Found:05/02/06 22:24:32 ID:???
きちんと説明してやれ(w
944893-894:05/02/06 22:30:17 ID:???
>>935
やり方しってるけど、>>896に止められてるので答えられません。
ごめんね。
945935:05/02/06 22:30:25 ID:???
>>942
一応FAQに載っているサイトも全部見たのですが…
どのサイトに載っているのでしょうか?;
946935:05/02/06 22:32:04 ID:???
>>944
知ってるのですか…
謝らなくていいです。 
こっちこそ、すみません;
947?\?[?X:05/02/06 22:49:25 ID:UlYcFtyO
>>946
http://www.wired.com/
ポジションの取り方など参考になるかも。
948?\?[?X:05/02/06 22:54:58 ID:UlYcFtyO
>>946
FAQも当てにならないよ。
ポジションの絶対と相対の関係をちゃんと理解すれば自由度が増すと思うけど。
それを駆使して作っているのが
http://www.wired.com/
ここのCSSをダウンロードして研究したほうがいいかもしれない。
949942:05/02/06 22:55:54 ID:???
>>935
サンプルを探せといってるんじゃない。CSSを勉強しろといってるんだ。
とりあえず左側に来るボックスにフロートを指定すればいい。(絶対配置でもいいが。)
やってみてできなかったらどうやったがどこができなかったのかを言え。
950Name_Not_Found:05/02/06 23:01:17 ID:???
>>949
ワロタ
質問の主旨から外れていると思われ
951?\?[?X:05/02/06 23:02:28 ID:UlYcFtyO
>>949
こら素人。それじゃ対応できないケースがある。
もっと勉強しろ。どういうケースに対応できない場合があるが
理解できたらここで報告しろ。
952Name_Not_Found:05/02/06 23:06:07 ID:???
>>942
>>左ブロックをフロートして右ブロックはフロート分のマージンとればいい話だろ。
それムリだろw
左はflat:left 横幅300px で 右はマージンleft 300px ってことか??
953935:05/02/06 23:08:19 ID:???
絶対位置ではなくて、相対を使えってことでしょうか?
954Name_Not_Found:05/02/06 23:10:16 ID:???
CSS3って既にあるのですか?
955?\?[?X:05/02/06 23:15:06 ID:UlYcFtyO
>>953
初めに絶対配置からではなく、相対ボックスを作成して、その中に左ボックスを絶対配置するケースもあるよ。
956Name_Not_Found:05/02/06 23:20:00 ID:???
>>952
変よ。
957935:05/02/06 23:20:34 ID:???
しかし、ポジションを使うと文字サイズを大きくしたり
文章が長くなったり、すればすぐに重なっちゃうので
できるだけフロートを使って
[---300px---][---残りの横幅---}
を表示させたいのですが、フロートではムリなのでしょうか?
958Name_Not_Found:05/02/06 23:23:48 ID:???
<style type="text/css">
<!--
* {margin:0;padding:0;}
.left {float:left;width:300px;}
.right {margin-left:300px;}
-->
</style>

<div class="left">
<h2>No.1</h2>
<p>aruhareta hirusagari itibahe tuduku miti</p>
<p>nibasyaga gotogoto kousiwo noseteyuku</p>
<p>kawaii kousi urarete yukuyo</p>
<p>kanasisouna hitomide miteiruyo</p>
<p>dona dona dona dona kousiwo nosete</p>
<p>dona dona dona dona nibasyaga yureru</p>
</div>
<div class="right">
<h2>No.2</h2>
<p>aoisora soyobukaze tsubamega tobikau</p>
<p>nibasyaga itibahe kousiwo noseteyuku</p>
<p>mosimo tsubasaga attanaraba</p>
<p>tanosii bokujouni kaereru monowo</p>
<p>dona dona dona dona kousiwo nosete</p>
<p>dona dona dona dona nibasyaga yureru</p>
</div>
959?\?[?X:05/02/06 23:29:53 ID:UlYcFtyO
>>957
左ボックスは固定サイズで、右ボックスは可変サイズにしたいのは理解している。
それだと、相対ボックスと絶対ボックスの組み合わせが最適だと思うけど。
これだと右ボックス内にボックスを作成しても自由にレイアウトが可能に
なるはず。
960935:05/02/06 23:39:40 ID:???
>>958
できました!
ありがとうございます。
NNでも確認できましたです。そういうことはどこのサイトに載っているのでしょうか?

>>959
ありがとうございます。自分はポジションのことは知らないに等しいので・・
今回はフロートでレイアウトしたかったのです。
もう 少し勉強してからその方法をやってみますです。

>>935からここまでのレスを全てメモ帳に保存して、
じっくり勉強します。
皆さん ありがとうございます^^。

961954:05/02/06 23:41:19 ID:???
質問する場所間違えましたか?
962?\?[?X:05/02/06 23:42:57 ID:UlYcFtyO
>>960
問題解決おめでとう。
レイアウトが複雑になるとポジション設定も必要になるかもしれません。
時間を見つけてポジション設定にチャレンジしてください。
963958:05/02/06 23:52:59 ID:???
>960
>942を試しただけ
CSSの基本的な部分は関連サイト見て覚えてからは
ひたすら試行錯誤

>952の言う無理だという理由、環境を知りたい
964Name_Not_Found:05/02/07 01:40:30 ID:ix8vIXIZ
割り込んでスマン

>>958を中央に寄せるにはどうすればいいでつか?
FAQ見たけどさっぱりわからん。。
965Name_Not_Found:05/02/07 01:55:54 ID:???
初歩的な質問でしょうが・・・
h1,h2,h3ってなんですか?
966Name_Not_Found:05/02/07 01:57:10 ID:???
>>965
CSSの前にHTMLを勉強してください。
967Name_Not_Found:05/02/07 01:57:42 ID:???
見出し1,2,3だったような気がする

>964
どれを中央に
968Name_Not_Found:05/02/07 02:02:04 ID:???
body{
margin: 0px auto;
}
969Name_Not_Found:05/02/07 02:12:01 ID:???
>>967
leftとright要素です
なぜか>>968の方法ではできません
(IE6.0)
970Name_Not_Found:05/02/07 02:25:29 ID:???
>>969
<!DOCTYPE は?
971Name_Not_Found:05/02/07 02:28:47 ID:???
>>969
頼む! もう少し基本的なことを学習してから質問してくれぇー。
972Name_Not_Found:05/02/07 02:59:40 ID:???
さあ埋めるよ
973Name_Not_Found:05/02/07 03:14:25 ID:???
よっしゃー!
974Name_Not_Found:05/02/07 03:17:43 ID:???
ふんがー
975Name_Not_Found:05/02/07 03:19:02 ID:???
ほぇほぇ
976?\?[?X:05/02/07 03:19:17 ID:vPh6eG/Y
なるほどね。
「書け。」
と書いていた人間の気持ちが理解できる。
俺は不覚にも、殺意を覚えてしまった。

h1 は人が1人
h2 は人が2人
h3 は人が3人

と書いて気を休めよう。
977Name_Not_Found:05/02/07 03:20:20 ID:???
あははは
978Name_Not_Found:05/02/07 03:30:09 ID:???
うふふふ
979Name_Not_Found:05/02/07 03:31:40 ID:???
逝ってヨシ
980?\?[?X:05/02/07 03:34:20 ID:vPh6eG/Y
論理タグとCSSだけで作れる時代が訪れようとしているにも
関わらず、見出しだったような<<気がする>>とは何事ぞ
ページに書き込む際に、誰しもが最初に書くやつが<h1>じゃー
ないのか?ちがうのか?ちがうのか?
そもそも、ここはCSSだろ。ちがうか?
981Name_Not_Found:05/02/07 03:34:52 ID:???
一手ヨシさん(80歳)
982Name_Not_Found:05/02/07 03:36:08 ID:???
ちがうちがうちがう
983Name_Not_Found:05/02/07 03:44:45 ID:???
あなたも私もポッキー
984954:05/02/07 04:04:15 ID:???
ここまでスルーされると、自分の発言が見えているのか不安。。
もし見えているなら、見えていると、、、
これだけでも良いので答えてください(´;ω;`)ウゥ
985Name_Not_Found:05/02/07 04:57:59 ID:???
>>954
なぜかな…。ま、とりあえず正式勧告はされてるのは無いよ。
986Name_Not_Found:05/02/07 07:50:26 ID:???
あ!
987Name_Not_Found:05/02/07 07:54:02 ID:???
もう55分か! 遅刻すんべ
988Name_Not_Found:05/02/07 07:57:56 ID:???
まじ 遅刻しそうだし
ちょっこら行って来るわ
989Name_Not_Found:05/02/07 08:02:33 ID:???
頑張って 逝って来い 若造よ・・・・・
990Name_Not_Found:05/02/07 09:11:16 ID:???
>>958
このやり方は右のボックスにfloatを使う(正確にはclearを入れると)と崩れるのが嫌。
991Name_Not_Found:05/02/07 10:01:56 ID:???
>>958
これだと
ttp://cssbug.at.infoseek.co.jp/detail/winie/b151.html
のバグあるからいやなんだよね
992Name_Not_Found:05/02/07 12:09:34 ID:???
あっそ
993Name_Not_Found:05/02/07 12:22:53 ID:???
1000!!
994Name_Not_Found:05/02/07 12:28:01 ID:???
負けるもんか!1000!!
995Name_Not_Found:05/02/07 12:41:56 ID:???
そろそろ1000?
996Name_Not_Found:05/02/07 12:42:32 ID:???
もうちょい!
997Name_Not_Found:05/02/07 12:43:34 ID:???
次スレは?
998Name_Not_Found:05/02/07 12:45:13 ID:???
1000きたかっ!?
999Name_Not_Found:05/02/07 12:46:03 ID:???
1000!!
1000Name_Not_Found:05/02/07 12:46:24 ID:???
     ∧
    <  >_∧
= ()二)V`Д´)<ぬるぽ
    \ヽ ノ )
    ノ(○´ノ  ガッ
   (_ノ(__)
10011001
このスレッドは1000を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。