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

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://pc8.2ch.net/test/read.cgi/hp/1113106800/l50#tag960
【関連リンク】　http://web2ch.s31.xrea.com:8080/?CSSRelated

【過去ログ】
31 http://pc5.2ch.net/test/read.cgi/hp/1085400294/
32 http://pc5.2ch.net/test/read.cgi/hp/1087263288/
33 http://pc5.2ch.net/test/read.cgi/hp/1089975931/
34 http://pc5.2ch.net/test/read.cgi/hp/1092319307/
35 http://pc5.2ch.net/test/read.cgi/hp/1093998766/
36 http://pc5.2ch.net/test/read.cgi/hp/1096389019/
36 http://pc5.2ch.net/test/read.cgi/hp/1098720757/
38 http://pc5.2ch.net/test/read.cgi/hp/1101827958/
39 http://pc5.2ch.net/test/read.cgi/hp/1104596224/
40 http://pc5.2ch.net/test/read.cgi/hp/1107809092/
41 http://pc8.2ch.net/test/read.cgi/hp/1110236393/
【前スレッド】
http://pc8.2ch.net/test/read.cgi/hp/1113106800/

【関聯スレッド】
CSS/DHTMLバグ辞典スレッド 第４版
　http://pc8.2ch.net/test/read.cgi/hp/1078463560/l50
代替スタイルシートに萌え〜
　http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
　http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを："作れ"}
　http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるサイトをネタに雑談するスレ 24
　http://pc8.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.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳（日本規格協会訳／個人訳）
　http://www.y-adagio.com/public/standards/tr_css2/toc.html
　http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html
【CSS検証】
W3C CSS 検証サービス
　http://jigsaw.w3.org/css-validator/

【解説など】
・ごく簡単な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.jp/cas_ike2/

【解説など】 追加
・スタイルシート用語集
http://www.mitsue.co.jp/case/design/c_index.html

【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

【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

【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

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

Q11: いままでＨＴＭＬでやってた××をＣＳＳでやるにはどうすればいい？
A11: 下記をご覧あれ。テーブル・レイアウトは段組のＦＡＱ（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.htm

【参考】
　IEの position:absolute; のバグを利用した擬似フレーム

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

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

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

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

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

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

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

>>7-9
ありがとう

>>1-10
乙カレー

FAQのA5（>>8）の下記はリンク切れ？
　http://kobit.info/tips/overflow.html
　http://kobit.info/files/frame.html

新スレッドへ移行したら下記で申請もよろしく。
　http://qb5.2ch.net/test/read.cgi/operate/1106260567/l50

>13
頼んでないで自分でやんな。

>>1
>【過去スレ】　　http://pc8.2ch.net/test/read.cgi/hp/1113106800/l50#tag960
なにこれ？
そもそも移転してるし。
【まとめサイト】http://web2ch.s31.xrea.com/?CSS（
【過去スレ】http://web2ch.s31.xrea.com/index.php?CSS%A1%A6%A5%B9%A5%BF%A5%A4%A5%EB%A5%B7%A1%BC%A5%C8%BC%C1%CC%E4%A5%B9%A5%EC%A5%C3%A5%C9%2F%B2%E1%B5%EE%A5%B9%A5%EC

【まとめサイト】http://web2ch.s31.xrea.com/?CSS
【FAQ】　　　　 http://web2ch.s31.xrea.com/?CSSFAQ
【過去スレ】　　http://web2ch.s31.xrea.com/?CSSLog
【関連リンク】　http://web2ch.s31.xrea.com/?CSSRelated

２つ質問させてください

１．
アンカーには下線のつくようにしてありますが
<a name=""></a>のみ、テキストの下線を消したいのです
タグの一つ一つにStyleを書き込むしかないのでしょうか？

２．
点線の<hr>のようなものが作りたいのですが
<div style="border-top:1px dotted #ffffff;"></div>
で擬似？点線作る以外に方法はあるでしょうか

よろしくおねがいします。。

>>17
a{text-decoration: none;}
a:link,a:visited,a:hover,a:active{text-decoration: underline;}
もしくは
a[name="piyo"]{border:none !important;}


hr{border:none;width:50%;height:5px;background-image:url(piyo.gif);}

>>17
1.
a { text-decoration: underline } としでもしてるのか。
a[name]で消すか、a:link等だけにつける。

2.
正攻法なら hr { border-top: 1px dotted } とか。IE非対応。

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

前スレで提案し損ねたけど次スレ以降↑をFAQに追加してはいかがでしょうか？

>>17
あ、IEこれでもいいみたいよ。
hr {
  border: 0; /* デフォのスタイル無効 */
  color: #fff; /* IE用記述。背景と同じ色に */
  border-top: 1px dotted #000; /* border-colorは省略しない */
}

すげーっす。感動。
皆さんありがとうございました。

<html>
<head>
<title></title>
</head>
<body>
<div style="width:502px; border:1px solid #0000ff; ">
<div style="float:left; width:300px; height:100%; background-color:#f00; ">
</div>
<div style="float:left; width:200px; height:200px; background-color:#00f; ">
</div>
</div>
</body>
</html>

赤のボックスの高さを青の高さに常に合うようにするにはどうすれば
いいですか？
右の青のボックスの高さは200pxとしていますが、変動します。
よろしくお願いします。

position: absoluteの起点を変更することはできますか?
(例えば特定のdiv要素の左上など)
ページ全体を中央寄せし、ウィンドウサイズに連動して最適な位置に配置するには
スクリプトを併用するしかないのでしょうか?
relativeでは本来の位置に移動させた要素のスペースが残ってしまうので支障があります。
CSSだけで何か良い手はないでしょうか?

margin を % 指定では駄目なのかね？

>>25
%は何の割合なのかイマイチわからないので封印していました。試してみます。

書き込んでから思いついたのですが
ポジショニングさせたい要素を最も外枠のdiv要素(要するにコンテンツ全体が入るブロック要素)とぴったり重なる
絶対配置のdiv要素の中に置き、要素自体は相対指定にしてやれば
元の位置のスペースが障害にならないと思ったのですがなにか問題はあるでしょうか?

>>23
簡単そうでなかなか難しい。
<html>
<body style="height:200px;">
<h1>親子関係にない要素の高さを可変的に合わせる</h1>
<h2>bのheightが200px以下の場合こう見える</h2>
<div style="position:relative;width:500px;overflow:hidden;">
<div style="position:absolute;left:0;width:300px;height:1000px;background-color:#f00;min-height:200px;">A</div>
<div style="margin-left:300px;background-color:#00f;min-height:200px;">B<br>B</div>
</div>
<h2>bのheightが200px以上の場合こう見える</h2>
<div style="position:relative;width:500px;overflow:hidden;">
<div style="position:absolute;left:0;width:300px;height:1000px;background-color:#f00;min-height:200px;">A</div>
<div style="margin-left:300px;background-color:#00f;min-height:200px;">B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B</div>
</div>
<h2>注意</h2>
<ul>
<li>moz系で質問者の意図通り。ieでは表現が異なる。背景画像を使えばieでもうまく行く→http://www.pp.iij4u.or.jp/~xxx/test.html</li>
<li>bodyを使いたくない場合は親divの上にもう一つ親divをつくり、そのdivにheightを指定する</li>
</ul>
</body>
</html>

あ、>>27の答えにもなってるわ。

まちがった。
>>26の答えにもなってるわ。

>>27
考えてくれてどうもありがとう！
とりあえず今日はお礼だけさせてください、現時点でヘベレケなもので。
今HTMLファイルにしてユーザエージェントで表示してみましたが、残力は
どうやらそこまでみたいです。明日にでも検証してみます。
ではでは。

>>24
position:absoluteな要素の親に
position:absolute/relative/fixedな要素があれば
その要素の左上が基点になる。

tableを使わずに画面の中心への配置は可能でしょうか？

<table style="width:100%;height:100%">
<tr><td><center>配置物</center></td></tr>
</table>

上記のような方法しか知らないのです。どなたかよろしくお願いします。

>>32
水平方向なら
>>6のQ2

垂直方向なら↓参照
ttp://www.jakpsatweb.cz/css/css-vertical-center-solution.html

併用で縦横共に常に中心に表示することも可

>>33
うおテンプレ読んでませんでしたorz
既出質問にも丁寧な回答ありがとうございました。

おまえなぁ・・・

きったねぇhtmlだなぁ。よく平気でこんなの晒せるよな。

それが匿名掲示板クォリティ

掲示板で、URLとか書き込まれると、<div>から飛び出して横スクロールが出るんだが、なんでだ？

>>38
連続する半角英数は（ｒｙ

ログ嫁

綺麗、汚いなんてのは変人の無意味な玄人意識
閲覧者にはどうでもいい事

見た目の汚さじゃなくてW3C勧告完全無視のソースだから汚いって言われてるのわかってる？
閲覧者にどうでもよくねーべ

background-position: 100px 50%;
こういう風に単位が混在してるの許されますか？

問題なし

>>43
そうですか。�d！

烈しく亀ですが、
前スレ最後の方で、MacIEの@charsetを質問した者です。
レス読みましたのでー。
�dクスでした。安心しました。

<link rev="made">のメルアドはエンティティ化されててもいいでつか？

とくつーにcgiを組み込んだのですが、周りの広告がめちゃ邪魔です。
cssを使用してcenter{display:none;}ってので広告をカットすることが出来るそうなんです。
しかし、本を立ち読みしてきても、ググっても参考になりそうな物は見あたりませんでした。
アドバイスをいただけませんでしょうか？

通報されたら連絡無しにサーバーのファイル全削除されるから気をつけてね

また借りるので余計なお世話です。
やられるほうがマヌケなのであって、やったものが得するのが今の世の中です。
引きこもってないで、実社会に出てみなさい。馬鹿を見るのは正直者のほうというのが身を以て体験できるでしょう。

ねぇねぇ、煽っていい？からかっていい？

やっぱり、だめだよねぇ…

>>49
ずいぶん正直者なかたですね。

IEでルビを振ると行間が開いてしまって読みにくくなるのですが、
CSSでルビのある行とない行との行間を整形することはできますか？

<HTML><HEAD><TITLE>out</TITLE><META http-equiv=Content-Type content="text/html; charset=Shift_JIS">
<META http-equiv=Content-Style-Type content=text/css></HEAD>
<BODY text=#0000 vLink=#00000 aLink=#00000 link=#00000 bgColor=#00000
><CENTER><BR><IMG height=62 alt="" src="****.gif" width=90 border=0><BR><BR>
<TABLE cellSpacing=8 cellPadding=3 width=127> <TBODY align=middle> <TR>
<TD bgColor=#00000 colSpan=27>　<FONT color=#000000>おすすめリンク集</FONT></A>　　</TD>
</TR> <TR> <TD noWrap align=middle bgColor=#00000 colSpan=6> <P><FONT color=#ffffff>ドラマ
チィック<BR>古畑ーー：おもしろいよ<BR><FONT size=2>そうだね</FONT></FONT></P></TD>
<TD noWrap align=middle bgColor=#00000 col
Span=6> <P></A><FONT color=#ffffff>今週の天気<BRさつきばれですよ< P></FONT></P></T
D></TR> <TR> <TD noWrap align=middle bgColor=#00000 colSpan=6> <P><FONT color=#ffffff>
<FONT size=-1><FONT size=3><STRONG><FONT size=2>1/20</FONT></STRONG><BR>お花見
をみんなでたのしもう</FONT><BR></FONT>
<FONT

size=-1></P></FONT></FONT></TD> <TD noWrap align=middle bgColor=#00000 colSpan=21> <P>
<FONT size=-1 color=#ffffff><STRONG>　1/20</STRONG></FONT><FONT size=-1><STRONG
><BR></STRONG><FONT color=#ffffff><FONT size=3 >リンク集</FONT><BR></FONT></P></FON
T></TD></TR>
<TR> <TD bgColor=#00000colSpan=27><FONT color=#ffffff>掲示板</FONT></TD></TR></TBODY></TABLE><BR><BR></CENTER></BODY></HTML>

---------------------------------------------------------------------------
↑でどうしてもリンク集の横の表がハミでてしまうんです。きれいにならべる方法ありませんか
初心者すれから誘導されてここにきました。よろしくお願いします

>>54
なんだかソースがぐちゃぐちゃですよ。数値やタグなどを一旦整理した方がいいと思います。
てか、どこにもCSS使ってる形跡ないんですけど・・

>>53
ﾜﾛｽww
cssなしだなｗ

div.aaa {
float : left ;
}
で、右に他のdivを回り込ませているのですが、
ウインドウを極端に小さくさせると、下に右のdivが行ってしまい、
レイアウトが崩れます。右のdivを固定させて動かないように出来ますか？

IE6.0で見ると全く問題ないのに
ネスケやFireFox 1.0.3で見ると、bodyに設定した背景画像と文字色が
全く反映されず、背景が真っ白になってしまうのですが、直す方法はないでしょうか。

指定したのはcolor・background・line-heightの３つ（一部ページにbackground-repeat）で
line-heightはきちんと反映されているようなんですが・・・

あなたが具体的にどのように指定したのか書かないことには誰も答えようがないと思う

>>59
そりゃそうですよね・・・。失礼しました。

body {
　　background-color: #000000;
　　background-image: url(***.gif);
　　background-repeat: repeat-y;
　　color: #FFF7E8;
　　line-height: 130%;
}

こんな感じです。他のページも大体同じやり方で設定しています。
たぶんbackgroundは一つにまとめられるんでしょうが、とりあえずこのままにしています

具体的になってなーい！！

>>60
全角スペースになっているのは書き込みのため？
それともCSSのソースの時点で全角スペース？

みんなえらいなー
とても答える気にならん・・・

http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
もうちょっと遅く生まれていたらな…とか思ってしまった。

コチラとプログラム板と、書くのどっちが正しいか悩んだんですが。
CSSとPHP双方ともに、スタイルを揃えられる要素があるようだ。っていうのは
検索してわかったのですが、実際のところどちらで作ったほうが良いんでしょう？

CSSも軽い、PHPも軽いらしいし。

あとは、作業効率の面で
ドリームウィバー使ってるんですが、やはり自分で覚えるとなれば
両方手書きになるんですよね？ソフトの有意義性にちょっと甘えてたかな。（・ω・）

なんでCSSとPHPが対等に比べられてるのかわからん

Google氏ね

>>67の邦訳。
「Google氏で調べてね」

>>65
まず、CSSとPHPの概要を知りましょう

ごめんなさい。sageわすれました。
えと、PHPは、調べ始めて3日なのですが。PHP→動的ページ（プログラミング）
CSSはhtmlファイルに付属して呼び出し、タグ内に納入することによってhtml
タグの統一なんかがはかれる（静的な）もの。

という認識なんですけど。（間違ってそうだ。）

きちんとした手打ちから、CSSを作った経験が無く。
ソースを見て、多少理解できる程度なんですけど。PHP自体が<?php>から始まるタグで
区切って、ココまでという出し方が出来るらしいというのを見て、そこはCSSに似てるなと。

…じゃあ移行はどうなのかな？

と思ったのです。組み合わせていろいろは出来るみたいではあるなって。
概要ですか。比べること自体がおかしいって事がわかってないので、勉強してきます。
ご返答、有難う御座いました！

大手Web制作プロダクション「�鰍hＭＪ」に訪問するイベント見つけました。
Webの業界で将来就職する方は参加してみてはどうですか。
http://www.dhw.co.jp/tokyo/bus0505/

>>60です

>>61-62
すいません、全然具体的でもなんでもなかった上、
>>62さんの通り、普通に全角スペースになっていただけと判明しました・・・
アホすぎて涙出そうです。くだらない質問に答えていただいてありがとうございました。

>>70
> …じゃあ移行はどうなのかな？
　　　　　　　↑
激しく意味不明っす

>>70
CSSはHTMLによって作られたページのスタイル(デザイン)を決めます。
PHPはサーバーサイドスクリプト言語で動的にwebページを作り出します。
この「作り出すページ」の中にはHTMLもCSSも含まれます。
PHPにスタイルを揃えられる要素があるのではなく、
PHPがCSSを吐き出してるだけだと思われます。
要するに、CSSとPHPを同列に語るのはまったく持って意味不明。

>PHP→動的ページ（プログラミング）
つまりPHPについては板違いです。
WebProg板へどうぞ。
(PHPとCSSを同列に扱っているうちは行っても意味無いと思うが)

PHPは処理をするだけで、表示を可能にしているのはApache…

いや、なんでもない

リストにおいて
背景のイメージをリストスタイル代わりに使うテクニックがあるけれども
それを右寄せで使う方法はありませんか？

左寄せならば問題ないけれども
右寄せだと矢印の位置がうまくいかない。
文字幅にあわせて矢印の位置を自動的に調整することはできませんか？

で、調べてみましたか？

<img ...><br>
<img ...>
これだと画像と画像の間に隙間ができてしまいます。
画像の隙間をなくすスタイルシートの設定方法はありませんか？

>>76
フローとらいと

>78
確認ブラウザがIEならたぶんIEのバグのせいだと。
それ以上は検索しましょ

聞く方も答える方も・・・
>>78
vertical-alignがbaselineだから。バグじゃない

>81
*{padding:0px; margin:0px;}とする。

1.IEのバグで下に空白
<IMG>
<BR>
<IMG>

2.改行をはさまないので空白はできない
<IMG><BR>
<IMG>

これで悩んでるのかと思ったのですが

ul{
margin:0;
list-style:none;
}
<ul>
<li><img src="a.gif"></li>
<li><img src="a.gif"></li>
</ul>

とリストで画像を表示させているんですが、
MacIEやドリームウィーバーのプレビューでは隙間なく画像が
配置されるんですが、WinIEで見ると上下に5pxぐらい空いてしまいます。
この隙間をなくすにはどうすればいいか教えてください。

セルにマウスカーソルを置くと背景色が変わるようにしたいのです。

<td style="background-color:blue;"
　　onmouseover="this.style.backgroundColor='red'"
　　onmouseout="this.style.backgroundColor='blue'">あいうえお</td>

上のを個別に指定するのではなく、外部cssファイルに記述して
class指定で使用したいのですが、思ったように上手くいきません。
どう書けばいいのかどなたか教えてください！！

CSSを適用してサイトを作ってみた。
んで、何気なくIEでCtrl + Aしてみたら、ありえねぇ場所が反転されるんだが、バグか？

>85
ソース

>>85
背景色が指定されてないブロック要素は全体が反転する。俺の経験談。

<div id="cotent">

<div id="head">
<h1>Title<h1>
<form action="" method="post">
<p><input type="text" name="search_word" size="25" value=""> <input type="submit" name="search" value="検索"></p>
</form>
</div>

<div id="left">
<ul>
<li><a href="">トップページ</a></li>
　　　　　　　　　　：
</ul>
</div>

<div id="right">
<h2>新着情報</h2>
<dl><dt>hogehoge</dt><dd><p>hogehoge</p></dd></dl>
</div>

<div id="foot">
<address>Copyright （ｒｙ</address>
</div>

</div>

んな感じ。ひょっとして、<div>ごとに１行開けてんのがいかんのか？

>>87
織れのは、なんてーか、字とかブロック要素のborder周辺に、小さいゴミがついてる感じ。

cssの方もないとわからんのでは？
h1閉じてないよ

>>90

＞cssの方もないとわからんのでは？
ま、マジか .............. ○|￣|＿

＞h1閉じてないよ
あ・・・ .............. ○|￣|＿

もうね、逆切れ。
気にしないことにした。

レスくれたヤツ、正直スマンかった・・・。

>>83
>>81

>>84
:hover ただしIEは対応してない。

>>92氏
レスThx！です。
でもIEで使えないなんて･･･
個別に設定しないとダメなのかな（´・ω・｀）ｼｮﾎﾞｰﾝ

IEは切り捨てて良いよ

>>93
IE用と同時に用意するだけじゃん

オペラって背景画像（繰り返しなし）のボトムって反映されないの？
なぜかトップに表示される。

リスト表示を横2段組にするにはどうすればよいですか？
下記のやり方だと、文字ら系は問題ないのですが
IEやOperaではliの背景画像がうまく表示されません。

.b120 { margin: 0; padding: 0; width: 120px; float: left }
.c { display: inline; margin: 0; padding: 0 }
.c ul { list-style-type: none; margin: 0; padding: 0 }
.c li { background-image: url("../images/index/sankaku-g.gif"); background-repeat: no-repeat; background-position: 0 8px; margin: 0; padding: 0 0 0 10px }

<div class="b120">
<div class="c">
<ul>
<li><a href="">A</a></li>
<li><a href="">B</a></li>
<li><a href="">C</a></li>
<li><a href="">D</a></li>
</ul>
</div>
</div>
<div class="c">
<ul>
<li><a href="">E</a></li>
<li><a href="">F</a></li>
<li><a href="">G</a></li>
<li><a href="">H</a></li>
</ul>
</div>
<div class="clear"></div>

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

あの･･･　サイト作っているのですが、index.htmlとbase.cssって作って
デスクトップ上でindexを開いてもcssが適応されないのですが・・・

もちろん<link rel="">での関連付けは間違っておりません。
Goliveで開いてレイアウトのタブでは適応されているので間違いはないと思います。
プレビューでは適応されていませんが・・・

httpdもテスト用に入れていたので\c:\www\homeと作ってそこにこの二つのファイルを入れ
ローカルでもテストして見ましたが適応されていません。
<head>~</head>にはこの様に記載してあります。↓indexからコピペ
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="base.css" type="text/css">
http://127.0.0.1 でも　ローカルでもCSSで指定した背景色にもフォントの
おおきさにもならず
<h1>TEST</h1>が標準のピクセルと黒でかかれるだけです
ローカル（自ＰＣ＋デスクトップ上）で手cssって適用されないわけないですよねー？
なぜでしょう・・・　以前は出来ていたようなきもするのですが・・・
教えてください

html側
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="ja">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="generator" content="Adobe GoLive 6">
<meta name="author" content="webmaster">
<meta name="keywords" content="music">
<meta name="description" Content="DANCE系ミュージックとDTMなどの打ち込み系音楽のサイトです。">
<title> * css design *　TEST</title>
<base href="http://○○○.net">
<link rel="stylesheet" href="base.css" type="text/css">
</head>
<body>
<h1>TEST</h1>
</body>
</html>

CSS側
body {background-color: #CBB8B1}
h1 {background-image: url(hed.gif);
color: #DD9265;
font-family: Gungsuh;
font-size: 20px}

それと<h1>~</h1>の背景画像も表示されないのも気になっております。
画像もデスクトップ上にあります。

<base href="http://○○○.net">

あっ・・・
珍しくめちゃめちゃ真面目にStricでしたっけそれでも通るぐらい真面目に丁寧に書いたつもりで
<base>の指定なんていままでしたことなかったのに、初めて書いて見たら
<base>指定したらローカルで見れないなんて初めて知りました････

慣れないことはするもんじゃないですね・・・
ありがとうございました・・・
助かりました・・・

って<base>ってなんのためにあるんだろ・・・

>>103
そもそもなんでbaseなんて入れたの？

>>104 自分にサイトはテーブルでレイアウトしてたのですが、
全てCSSに直そうかと思い、この際徹底的に勉強しようと思いまして･･･
本とか見ながらほんと基本から全て見直そうと・・・

それでその本に書いてあった通り全てを記載してみようと思いまして･･･

base
基部とか出発点とか基準とかそんな意味。

HTMLリファレンス的には
「HTML 文書の基準 URI を指定します。href 属性に書かれた URI がこの文書の基準 URL とされ、相対 URI を解釈する際に利用されます。」
＞http://www.ne.jp/asahi/minazuki/bakera/html/reference/headcontent.html.ja.sjis#base

>>105
理由もわからないまま本の通り打っても意味ないのでは
わからなくてもそれ以上しらべようとしないようだし、
仮にできたらできたでそれでいいや、なんだろうし、
それで勉強になるんですかね。

私は、なんでも勉強するときの仕方として、
例えば、本とかでもサイトでもサンプルソースみたいなのってあるじゃないですかー、
私はとりあえずそれをダウンロードして、ソースを自分で変えて見るんです。
画像の高さだったり、幅だったり、それであーここをこう書くとここがこういう風に変わるんだって、
そういうふうなちょっといい加減なHTMLやCSSなど覚え方していたもので・・・
これじゃダメだなっと思いまして、

ほんと基本から一度ちゃんとやってみようかなと思いまして・・・

どんな覚え方するかは人それぞれだとは思うんですけど、
私はいままでそのような勉強の仕方していたもので、全部が中途半端な知識に
なってしまいそうでして・・・

もうちょっと今度から細かく一つ一つ意味や動作を調べてみることにします。
ありがとうございました。

勉強にならない事は無いが効率良くは無いな

>>109 おっしゃるとおりでして････　中途半端に基本わからないのに
小技ばっかりに見付いてしまって･･･

変に小技って覚えちゃうと使いたくなっちゃうじゃないですか、
ので私のサイトのソースなんてぐちゃぐちゃで・・・とても汚いんです。

綺麗なデサインのサイトとか見るのが好きでそのサイトで使ってて綺麗だったという理由だけで
onMouseover="this.style.filter='';" onmouseout="this.style.filter='gray'"
バナー並べてる所全てに使って見すっごい暗いイメージになってしまったりとか・・・・

>>110
いいものやる。
ttp://openlab.ring.gr.jp/k16/htmllint/htmllinte.html

>>110
最初はみんなそんなもんさ。
やってるうちに要らないものがわかって見やすいソースになるでしょうよ。
色んな事を知ってれば役にたつときもあるからいいんでない。

>>111
.... _no

>>111
フレームページ（枠組み）だけでマイナス１８０点以下って、もうダメポ

ホームページビルダーで作った枠組みなんだけどね・・・
中が空のタグが減点対象ってのもあるんだね

>111
俺もﾀﾞﾒﾎﾟ…

ふつうとか言われた・・・

エラー2つで100点(´Д⊂ ﾓｳﾀﾞﾒﾎﾟ

おまえらスタイルシートは良くても
HTMLがまともに作れていないなんて
本末転倒だなｗｗｗ

基本(HTML)ができてないのに、"正しい"CSSなんて知らんだろ

ただのネタじゃろ

じゃあ>>119は何点だよ

99だった

>>113
ビルダーで作ったらマイナス１００でも良いほう

みんなlintで100点近くじゃないの？俺には信じられない。
CSS正しくてもHTMLが正しくないなら魅力半減だと思う。
つーかXHTML使っていれば（制限上から）おのずと点数高くなる気がする。

54点orz

漏れの減点のほとんどは alt だな
おまいらきっちり alt 書いてる？

結論：このスレ初心者ばっかり

つかネスケってcssの外部ﾞ呼び出し効果ないんか？
適応されないんだが・・。

つかネスケ４は死に絶えてほすぃ

ねえねえ>>80と>>81はどっちが勝ったの？

バグっつーか、改行はスペース扱いにしていいはずだから
バグではないな

<img>
<img>
ってしたときの左右の画像のスキマは改行がスペース扱いにされたもの。
<img><br>
<img>
とか
<li><img></li>
<li><img></li>
ってしたときの上下の画像のスキマは、基本的にはベースラインより下の分だけど、
line-heightが画像の高さより大きい、という場合もあるかもしれない。

IEで

#****　 {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
background-color: #000000;
color: #ffffff;
width: 700px;
}

という感じで

<body>
<div id="****">
本文
</div>
</body>

のように使っているのですが、本文の部分に画像をおく場合その画像にフィルタが適用されないようにはできるでしょうか？

なに言ってんだ喪前は

フィルター知らんけど、

#**** img {
}

で、フィルター無効にするよう指定すりゃ良いだけじゃないかね

つまり◆CHUTA/Ht4wはアフォってこと？

べつにそうでもない、ってこと。
あと、晩飯うｐする奴が最近なかなか出てこなくてさみしい、ってこと。

>>136
最近はこっちにうｐしてるみたいだ。
５月23日の夜食はチキンハンバーグ。相変わらず野菜が少ない。

Webサイト制作初心者用質問スレ Part 133
http://pc8.2ch.net/test/read.cgi/hp/1115837668/

html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="ja">
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<meta name="generator" content="Adobe GoLive 6">
<meta name="author" content="webmaster">
<meta name="keywords" content="music">
<meta name="description" Content="">
<title>test</title>
<link rel="stylesheet" href="design/base.css" type="text/css">
</head>
<body>
<div class="contents">
<h1><a href="index.html">サイト名</a></h1>
<h2><a href="index.html">index</a>>about</h2>
<div class="left">Favorite</div>
<div class="main">Contents</div>
<p>サイトの概要</P>
<div class="right">広告</div>
<h3>DTM|FAQ|サイトマップ|top|管理用</h3>
</div>
</body>
</html>

糞だな

CSS
body {background-color: #212121}
.contents {width: 800px;
margin: auto;
background-color: #000000}
h1 {background-image: url(../img/heder.jpg);
height: 130px;
text-align: right}
h1 a {color: #D89B66}
h2 {color: #384372;
text-align: right;
font-size: 12px;
margin: 1em 0px}
h3 {color: #384372;
font-size: 12px;
text-align: center}
a {text-decoration: none}
.left {width: 100px}
.main {width: 500px}
.right {width: 200px}

で記載するとh1の背景写真にタイトルを文字でいれようしているのですが、
CSSのｈ１　に　フォントを指定してん文字を打つと　フォントの指定もされす、
ちゃんと入ってあるフォントです。texe-alignもrightにしてるのが左寄りになります。
h1 a{}にいれても同結果でした。

フォントをとサイズを指定してなおかつ右寄りにするには
どうすればよろしのでしょうか

バーナー付きLINKを表示させるソース教えて
リンクはしてるんですが画像だけが表示されないんですよ

>>141
(*´･ω･`)？

リンクについて教えてください
広告表示させたいんです
HTML?の方はわかります
スタイルシートの方がさっぱりなんです

質問がさっぱりです。

画像の回り込みについて質問です。

画像AとテキストBを並べるレイアウトを作っています。
がたがたですみませんがこんな感じです。↓
┌─┐
|_ A._| BBBBBBB　（Bが1行ですむとき）

┌─┐BBBBB
|_ A._| BBB　　　　　（Bが2行にわたるとき）

p { vertical-align: bottom; }
img { float: left; }
上のように指定するのは駄目でした。
どうすればいいでしょうか？

ずれすぎだ……＿|￣|○

┌─┐
..|_ A._| BBBBBBB　（Bが1行ですむとき）

┌─┐BBBBB
..|_ A._| BBB　　　　　（Bが2行にわたるとき）

こうですね。すみません。

リンクの貼り方教えてください
これで分りますか?

ha?

>>147
ホームページの基礎の基礎　つー本を買って勉強してください。

>>145-146
　　　5W1H　質問がさっぱりです。

低学歴が多すぎる
所詮ウェブ製作やるやつなんてこんなもんか

すみません。では書き直します。

画像AをテキストB並べて表示したくて、基本的には
下揃えで表示したいのです。このように↓
┌─┐
..|_ A._| BBBBBBB　（これはフロートを設定してない状態）

しかし、Bが少し長い文章の場合、
┌─┐
..|_ A._| BBBBBBB
BBB
こうなってしまいます。これを、
┌─┐BBBBBBB
..|_ A._| BBB
と表示するようにしたいのです。あとは>145-146の通り。
まだいろいろ試しているのですが、 vertical-align:text-bottom; も駄目でした。
ちなみにテキストBは3行以上にはならない長さです。

スタイルシートを使うと
なぜかMAC IE5において
一番下に大きな隙間（空白）ができて表示されてしまいます。
イメージとしては</html>で終わっている下に隙間がある感じです。
なのでブラウザのスライドバーが出てきて、
何もないのにスライドできてしまいます。

これはバグですか？
なくすことはできませんか？

なんていえば言いか
ヤプログでCSS使って広告バーナー貼りたいんですよ
HTMLタグ入力じゃなくてスタイルシート入力の方です

とりあえずテキストBが長くなる場合だけ
<img src="" style="float: left;">
としておくことにしました。
考えてみたらすごく簡単なことですね。
短いテキストにも長いテキストにも一発で対応しようと
したのが間違いでした。スレ汚しすみません。

>>155
表示画面の幅は変えられるって知ってる？

widthでしょうか？
実はソースはこんなふうになっていて、
DIVは500pxで固定してます。

<div>
<dl><dt>（画像A1）（テキストB1）</dt>
<dd>テキストC1</dd>
<dt>（画像A2）（テキストB2）</dt>
<dd>テキストC2</dd>
</dl></div>

上に出したソースと全然違ってしまってますが(´･ω･｀)
このページはリンクページで、画像Aはバナー、テキストBはサイト名、
テキストCはサイトの説明書きです。

あっ、いや、文章が1行で収まるか2行に渡るかっていうのは
ブラウザの幅によるんじゃないかって思ったから。
幅固定しているんだ。フォントサイズを変えれば
1行に収まると思っていたものが2行にわたる可能性もあるけど
自分がいいと思えばいいことだろうしね。

<div>
<h1>タイトル</h1>
ああああああ
</div>

とやると、タイトルと文章の間に

タイトル

あああああ

という具合に一行分の間が開いてしまいますが、
この間を無くす事は出来ますか？

h1のmarginとpaddingを調節

>>159
>>1

なんだかなぁ・・・

>>159
ccsと関係あるのか？

ccs ってなに？

Romanticが止まらない

ccsなんていつ勧告されてたんだ

>>163
この辺から

誤爆ｗ
cssだ

>>164
C：カスによる
C：カスのための
S：スタイルシート

つかcssでリンクの色を変えるにはどうしたらいいんでしょうか？
A:link,A:active,A:visited{
color : gray;
text-decoration : none;
}
A:HOVER {
position : relative;
top:2px;
right:2px;
color : darkgray;
text-decoration: none;
;}
でやるとfirefoxではいつもどおりなんですが・・。

>>170
Firefox、IEとも特に問題ない。

hoverの指定はあってると思いますが

上のリンクがどこかおかしいので表示がされない・・どこだ・・

大文字違和感

a{
color : gray;
text-decoration : none;
}

でいいやん

最後の　;}　
;が要らないし
hoverが大文字だし
汚いったらありゃしない

おまえの顔ほどかよｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

margin、paddingの設定が他と同じなのに、
clear:both;で回り込みを終了した領域だけ、
テキストの上に余分な空白ができます。
どういう原因が考えられるでしょうか。

ソースを見んことには・・・

header、left、right、footerといった感じの段組みです。

body {margin:0; padding:0;}
h1 {margin-top:0;padding-top:1em; padding-left:1em;}
div#footer{clear:both;}
こんな感じです。

>>180
それ、h1の下マージンじゃん。

(´-`).｡oO(意味も解らず margin-top　なんだろうなぁ・・・)

(´･ω･｀).｡oO(やぁ…　全部バクリだから、中身知らないんだよ。)

>>180
m9(＾Д＾)ﾌﾟｷﾞｬｰ

義務教育が長期休暇なのかと思ってしまう件。

君も僕も引きこもっている件。

「件」をつける必要があるのかと思う件。

俺がなくした定期券

孫にもらった「肩たたき券」

向こう３軒両隣　　あれ？

センスねーなー

　パパのﾁﾝﾁﾝ　ママ邪険　　　　　こうこなくっちゃ

( ﾟдﾟ)ﾎﾟｶｰﾝ

ボックス内に文章と文章の高さより長い画像を入れて、
フロートを使って横に並べる。
そして、ボックスにマージン下20設定。
それを縦に重ねてると
IEとFFでは表示が異なってしまいます。

IEでは画像の下からマージン20になるのに対し
FFでは文章の下からマージン20となります。

画像の下からマージン20とるのが望ましいのですが
FFでもそのようにするには何をすればよいですか？
もしかしてできませんか？
教えて（・∀．）ｵﾈｶﾞｲｲ!

table を中央に表示させるのに、align="center"を使っていました。
これをCSSでやるにはどのようにしたらいいのでしょうか？

<div id="hoge">ここ</div>

の中に入れたいんです。
ちなみにhogeではテキストを左よりにしています。

よろしくお願いします。

>>193
clearしていないからだよ。
そのブロックのborderなりbackground-colorなりに色つけてみて、
ブロックの位置関係を確認しながら試してみるといいですよ。

>>194
widthを適宜決めてから、左右のmarginをautoに。

>>195
ご返答ありがとうございます。
ﾎﾞｯｸｽ自体にｸﾘｱｰbothを入れたのですけれども
問題の現象は起きます。

<div class="box">
<img ...>←ﾌﾛｰﾄﾚﾌﾄ
ああああああああ
</div>
<div class="box">
<img ...>←ﾌﾛｰﾄﾚﾌﾄ
ああああああああ
</div>

上記のようにやっています。
どこにｸﾘｱを入れるべきでしょうか（・∀．）？

>>195
レスありがとうございます。
早速やってみたのですが、中央によらないです。

ソースがないんじゃアドバイスのしようがありません。

すみません。
今のところこんな感じです。

<style type="text/css">
<!--
#hoge {
width: 550px;
text-align: justify;
text-justify:inter-ideograph;
margin: 0px;
}
.hoge {
margin-right: auto;
margin-left: auto;
width: 300px;
}
-->
</style>
<body>
<div id="hoge">
<table class="hoge">
<tr>
<td>ほげ</td>
</tr>
</table>
</div>
</body

>>199
IEの場合は左右のmarginをautoにしてもセンタリングできないので、
text-align:center;を使ってやって下さい。
詳しくは>>6のQ2

>>200
嘘を教えてはいかんよ。

>>194
DOCTYPE html標準モードにすれば auto で出来ますよ。

>>196
ああああああああ
<!---この位置--->
</div>

ああ---じゃなくて--だった。

>>6のQ2があったとは見落としていました・・・。
よくある質問なのですね。
申し訳なかったです。

とりあえずDOCTYPE宣言を変えてみる事にします。

下位バージョンのIEは捨てるの？

>>205-206
現状では
親ブロック{
text-align: center;
}
該当ブロック{
margin: 適宜 auto;
width: 適宜;
text-align: left;
}
としておくのが、まあ落としどころだよなあ。

色々関連記事を探したのですが、解決策が見つからなかったので
すいませんが質問させて下さい。

OS9 Mac IE5の環境で
floatを指定したブロックの中にFlashを埋め込むと
アクセスした最初は表示されるものの、リロードや
ウィンドウをスクロールして戻るとFlash部分が真っ白になってしまいます。

Flashのロールオーバーを指定しているボタンあたりにマウスを持っていくと
そのインスタンスだけ表示されます。

これに関して回避策はありますでしょうか？
float内のFlashは無理という仕様になってしまうのでしょうか。

>>208
漏れも似たようなのに遭遇したことがある。
漏れは、回り込んでいる要素にロールオーバ効果をJSで与えると、
フラがちらつく、程度のことだったけど。
<ブロック1>フラ</ブロック1>
<ブロック1>その他</ブロック1>
というhtmlで
ブロック1{ float:left; }
ならば、
ブロック2{ float:right; }
にして対応してはどうか（つか漏れはそうした）。

ごめん。
<ブロック1>フラ</ブロック1>
<ブロック2>その他</ブロック2>

だ。orz

>>203
ありがとう
すべてがうまくいきました

ただ、
<div class="clear"></div>
と追加しないといけなくなってしまいますた。
間が空でも良いですよね？
入れるものないし。

<div class="clear"><a href="#top">Top</a></div>
などとして

.clear a {display: none;}

とかはどうよ。

>>212
なるほろけっと。
たすかります。
やってみます。
多謝！

そのろけっとは飛ぶのか？

IEでルビを振ると行間が開いてしまって読みにくくなるのですが、
CSSでルビのある行とない行との行間を整形することはできますか？

できません

>>215
ラインハイトを調整しても駄目なの？
と、試しもせずにカキコ

line-height: 90%でちょっといい感じになりました。
ありがとうございます。他にも何かアドバイスできる人がおりましたら、
恥ずかしがらずに、びしばしカキコしてください。

びしばし　びしばし　　ぁぁ　ﾊｽﾞｶｼｲ

vertical-align:-30%でもっといい感じになりました。
他には何かいい方法ないかなぁ？

その場に適したものを使う、それでええやん

　　　　　　　　　　　　　　　ﾋﾞｼﾊﾞｼｱﾝｱﾝ

一つのインライン要素の中に、
ある片方の文字列は右寄り、もう片方は左寄り、ってことはできますか？
<h1> <span class="left">左よりの文字</span> <span class="right">右よりの文字</span> </h1>

のようにやってみたのですができませんでした。
どなたか、このやり方を教えていただけないでしょうか？
よろしくお願いします。

ﾃｰﾋﾞﾘが簡単よ。

cssスレでﾀﾌﾞﾚかよ

>>223
「できませんでした」ってまさかleft、rightってクラス名
つけるだけで左寄り、右寄りになるとか思ってないよね？
「一つのインライン要素の中に」って言うのもよくわからん状況だが
とりあえず落ち着いてフロートでも使えば？

ﾃｰﾋﾞﾘ＝ﾀﾌﾞﾚ

知らんかった

>>224-225
なるべくtableは使いたくないです。

>>226
もちろんCSSでテキストの位置を指定してます。

http://www.uploda.org/file/uporg111913.jpg.html
実際にこういう風にしたいので、floatだと上手くいかないんです。
h1はborderを表示させてるのでそのborder内に入れた状態で
左寄せ右寄せできたらいいんですが・・・。

どういう風にやってうまくいかなかったのさ

<h1>左寄せ文字 <span class="right">左寄せ文字</span></h1>

.right
{
text-align:right;
float:right;
}

とかいろいろやったんですけどダメでした。

なんじゃそりゃ

>>230
h1{


}
じゃないのか？W

だから、いろいろやったんですってば。

>>223
ブロック要素内のインライン要素を左右に配置は不可。
ブロック二つで>226が書いてるようにフロートさせる。
ただ、h1が左右に別れて有るというのは、適切なマークアップとは言えない。

　ﾃｰﾋﾞﾘ＝ﾀﾌﾞﾚ　にして、あらためてブロック要素とインライン要素の違いを勉強しれ。

あてずっぽうでやたらめったらやるよりも
ちゃんと解説サイトでも読んで理解してからやったほうがいいよ。

>>234
テーブルを使うことこそ不適切だろ
もう少し考えて話せ

>>233
例ひとつしか出してないのにいろいろといわれてもなー
左寄せのほうをフロートとか試してないの？

お前等死ねよ
役にたたねーカスどもが

おめーにはﾃｰﾌﾞﾙがお似合いだーね。

>>239
は？クズはしんでろ

>223てさ、ﾎｹなんだって？

これは意味が違う？

<h1><div style="float:left;">左左左</div><div style="float:right;">右右右</div></h1>

div厨お断り

<style>
h1{position:relative}
span{position:absolute;right:0;top:0;}
</style>
<h1>左<span>右</span></h1>

m9（^Д^）ﾌﾟｷﾞｬー

スタイルシートが良いとスタイルが良いねぇー

>>243
divとspanって同類じゃないの？
ブロックとインラインの違いで。

>>243
これでいいかい？

<h1><span style="float:left;display:bock;">左左左</span><span style="float:right;display:bock;">右右右</span></h1>

display:bock;

ボクは幸せだなあ

>>249
ﾜﾗﾀ
ブロック指定とかいらんな。

<h1><span style="float:left;">左左左</span><span style="float:right;">右右右</span></h1>

span厨お断り
p厨お断り
h厨お断り

>>252
そうですか

CSS厨お断り

乞食厨お断り

お前らみーんなゲッ厨！

ｃｓｓで、h1の背景に画像を適用し、幅は固定しないとき、ウインドウを縮めると背景画像も同時に縮小させることはできないんですか？？
右端から切れていくのがいやなんですが、

zoom

>>251　clear

念のため、CSS2 の仕様では、非置換要素を float する場合、幅の指定が必要。
最近の Gecko や Opera は CSS2.1 先取によって、また WinIE は独自仕様で、
「よきに計らってくれる」けど、そうじゃないブラウザもある。

ttp://hp.vector.co.jp/authors/VA022006/css/visualren.html#floats

>257
background:url("haikei.jpg") no-repeat center;

【html】
<div id="box">
　<p>aaaa</p>
　<p>bbbb</p>
　<p>cccc</p>
</div>

【css】
#box{
　　border:solid 1px black;
}
#box p{
　　width:30%;
　　margin:auto;
　　float:left;
　　border:solid 1px black;
}

と<p>を横配列した時に
<p>cccc</p>の文章が最も長ければ問題はないのですが
<p>aaaa</p>や<p>bbbb</p>よりも<p>cccc</p>の文章が短い時
<p>aaaa</p>や<p>bbbb</p>を無視して
<p>cccc</p>のbottomを基準に<div>の枠線(下)が来てしまいます。
これを改善するのにはどうしたら良いのでしょうか？
僕的には<p>aaaa</p><p>bbbb</p><p>cccc</p>がそれぞれいかなる長さにおいても<div>でスッポリ３つの<p>を覆う形にしたいのです。
よろしくお願い致します。

>>262
FAQだよ >>7

ボックスを角丸にしたいときに、ボックスの上蓋と下蓋に角丸の背景画像を適用するというやり方を使うんですが、
この場合ボックス幅を相対値にさせながら蓋画像を適用させるのは無理ですか？？ディスプレイの小さい人でも大きい人でも
画面100％に表示させたいのです。

>>264
上蓋・下蓋の背景画像だけのボックスを＜div＞とかで作って、
本文のボックスとドッキングさせる。margin、paddingに注意。

>>265
ドッキングさせることには既に成功していますが、たとえば本文の幅が700ｐｘの場合、画像も全部表示されて700ｐｘ
500ｐｘなら画像も切れることなく500ｐｘっていう風にしたいのです。ウインドウ縮めると画像の端が切れるので。

例１）
<div class="hoge">
<div class="mage">
<h1>test</h1>
<p>para</p>
</div>
</div>

div.hoge　に上蓋
h1　に右上の角
div.mage　に下蓋
p　に右下の角

h1とpのwidthは100%
margin,padding,背景色や画像の透過に注意

他いくらでも考えられそうです。

CSSの為にHTMLを無意味に変更する…
CSSの存在意義無いですな
テーブル使った方が良いね

IEにて「表示」->「スタイルシート」->「スタイルシートの無効」
ってのを選ばれた時に画面の切り替えを行いたいんだけど
クライアントがCSSを利用できる環境か取得する方法ってありますかね？

ページ自体をプリントアウト一枚サイズにおさえるために、
フォントサイズを小さくしたいのですが、印刷時のみフォントサイズを小さくしたいんです。
そこで、印刷用のスタイルシートというものがあると小耳にはさみ、
それをどのように駆使しようと思ったのですがなかなかうまくいきませんorz
どのようにすればいいのでしょうか？教えてくださいませ。。。

winXP IE6 ですよろしくお願いいたします。。。

>>270
@media print {
/* --ここにプリント用のＣＳＳ-- */
}

@media screen {
* --ここにディスプレイ表示用ののＣＳＳ-- */
}

>>271
umakudekinai...orz

恐れながら、
記入例などを頂けると幸いです。

IEとかプニルとかだとmax-widthとmin-widhが使えないみたいですが、どうにかして同じような効果を得ることは
できませんか？？

min-widhは無理です。

>>272
じゃあ、cssファイルを別にして、link要素で呼ぶ方式にして、media属性で変えてみよう。

>>273
むりぽ。
ところでスレイプニルのレンダリングはママIEだろう？

>>273
min-widthねぇ…
width指定した、空divでも入れとけば？

“min-widh ”では、Mozillaでも無理です。　>>273

いやみな連中だこと。

上のほうにもあったと思うんですけど
ルビ（ふりがな）を使ったときの
行間の調整方法って
なんかないんですかね

css3まで待ちましょう。line-heightの詳細指定が可能になってるはず。

運が良ければ数年後には出来るようになってるかと。
10年経っても出来ない確率の方が高そうな気もしますが。

ボックスを重ねたようなデザインにしようと思い、
position:relativeでmargin-bottomを負にしてdiv領域を重ねたんですが、
重ねた上の領域の背景が部分的に消える現象が出てしまいました。
FAQには、marginが負で入れ子だと書かれない場合があるなどあったんですが、
それとはちょっと違うようです。IE6で問題が出ます。
リロードすると背景の色が出るんですが、
スクロールして戻ってくると消えてしまいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<body>
<div style="z-index:1; position:relative; top:0px; margin:30px 0px -50px 50px;
padding:0px 0px 50px 0px; background:blue;">
test area 1
</div>
<div style="z-index:2; position:relative; top:0px;
margin:0px 50px 0px 0px; background:green;">
test area 2<br />
test area 2<br /> ←もっとたくさん並べる。
</div>
</body>

肝心なことを書き忘れてました…。
absoluteだと問題はないんですが、1つめのdivの内容・長さによって、
2つめの位置がうまく変わるようにしたいんです。
なにかいい回避方法無いでしょうか。

問題なく(正確には、自分の予想したとおりに)見られたのはこんな感じです。
FireFox(win&mac)・MacIE5.2・Safari(10.3.9のもの)
Opera(win)・amaya(一昨日のCVSからビルド)

ブロック要素をセンタリングする際・・・

1.センタリングしたいブロック要素にdisplay:inlineを指定
2.text-align:centerを適用

というのは邪道でしょうか?

邪道

文章の最後ににPDFアイコンとかのちっこい画像入れるとそこだけ行の高さがせまくなっちゃう。
どうすんべコレ

table組むとか背景画像として指定するとかはナシで

いろいろ工夫してみる

それはいい考えだ

画像を大きくすればいいじゃない。

ケーキを食べればいいじゃない。

>>289
ダイエット中だから、やだ

ノンシュガーのケーキだから大丈夫。

2つのボックスにそれぞれ違う背景を入れ
表示しようとしたのですが、
何故かbg6の背景が表示されません。
なにか間違った表記をしているのでしょうか？

-html-
<div id="main">
<div id="bg00"></div>
<div id="bg06"></div>
</div>

-CSS-
div#main {
width: 640px;
position: relative;
margin: auto;
padding: 0px;
}
div#bg00 {
background: url(img/00.png);
height: 74px;
width: 640px;
position: relative;
z-index:auto;
}
div#bg06 {
background: url(img/06.png);
height: 53px;
width: 214px;
filter: Alpha(Opacity=50);
z-index:auto;
}

すいません。IE6.0でだけ表示がされなくて悩んでいるのです。
FireFoxもMozillaもSafariもひょうじされるのですが。

filter: Alpha(Opacity=50); 外したらどうなる？

>>294
外してもダメでした。

06.pngが無いんだろ。
直打ちやってごらん。

ごめん。俺は馬鹿だな。　逝ってくる。

>>296
IE以外では意図した通りに表示されているので画像が無いことは無いのですが・・・

なんでrelativeなの？

えと、実際のソースはこれなんですが、
http://www.geocities.jp/vg900b/top2.htm
まだCSSをあまり理解できていない状態なので、すみません。
relativeにしたのは書かなかった時にはうまく表示できなかったもので。

ﾌﾞﾛｸﾞって何？？？？？？？

テーブルの設置場所をブラウザの中央に持って行きたいのですが、
どのように書けば良いでしょうか。
ブラウザのサイズは訪問者ごとに違うと思うので、
ブラウザを大きくしても小さくしても中央にテーブルが来れば良いなあと思っています。

{top:100;left:100;}

のように指定すると、常に左上になってしまいます。
何か方法はないでしょうか。

連投すいません。

bodyにtext-align:center;を入れてみたところ、
x軸では中央になったのですが、y軸では頂点にいます。
なので追加してtext-valign:center;も入れてみたのですが、
これは不可なのか無反応でした。

天辺にくるのではなく中央に来る方法があれば教えて下さい。

vertical-align

FAQって書いときゃいいんだよ。こんな質問。

>>304
すいません、それも既に試しているのですが
テーブルの位置は一番上のまま動きません。

一から組みなおしてみます。
ありがとうございました。

>>302
FAQ

>>303
ヴぁりんぐｎ

段組の際、三つ以上のブロックを横に並べようと思うと、
ＣＳＳよりテーブルのほうがいいのでしょうか？

リストタグ(li)の定義で、list-style-image: url(image/A.jpg);
を適用した場合、リストの黒丸の替わりにA.jpgが表示されますが、
A.jpgと文字の間隔は調整できないのでしょうか？

(具体例)
A テスト１
A テスト２
A テスト３

上記のlist-style-imageを適用した「A」と「テ」のスペース調整のことです。

>>310
なんでそう思うの？

>>311
できないので、liの背景画像をうまく使うと幸せになれるかもしれません。

背景？？？
全然意味がわかりません。背景じゃなくて黒丸です

>>310
イエス。

>>314
背景にして
左 margin か左 padding を指定する

>>313、316
なるほど、背景を。気が付きませんでした。

padding: 0px 0px 0px 10px;
background-image: url(image/A.jpg);
background-repeat: no-repeat;
おかげさまで、liタグ使用時の見栄えがよくなった感じです。

※ちなみに314は私(311、RhDUPaqE)ではありません。念のため。

BOX内のテキストの位置について質問です。
BOX内に配置したテキストの上下の位置が私の手元の環境では
Firefox(Mac)だけが若干上気味に配置されてしまいます。
これの解決・回避方法ありますでしょうか？

ソース書かずにわかるわけなかろう
何度同じことを言わせるんだ

>>319
ttp://www.sozo2.ac.jp/wecan/shoku/syoku-02.htm#Sauce

例えば、こんな感じです

<div style="padding:2px 2px 2px;
background: #99CC66;
color: #ffffff;
font-size:11px;
text-align:center;">TEXT</div>

２行以上表示してるボックスだと目立たないのでわからないからいいんですが、
１行だけ表示してるボックスだと気になって..

今、他のサイトざっとのぞいてきたのですが
Firefoxだとどこを見てもテキストがBOXの上辺に寄って見えてます
単なるFirefox（または、Mozilla）のbugなんでしょうかね。

そういうもんだと思って、とりあえず今日はねます

みなさんCSSファイルのサイズってどのくらいになってますか？
私は10KBですが普通ですか？

>>322
なんでもbugかい！

都合の悪いことをバグの所為にしてしまえば自尊心が傷つかずに済みます

>>318-325
ヒラギノフォントのせい

ttp://www.remus.dti.ne.jp/〜a-satomi/nikki/2002/06b.html#d18n03
ttp://www.remus.dti.ne.jp/〜a-satomi/nikki/2004/11a.html#d13n01

ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2002/06b.html#d18n03
ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2004/11a.html#d13n01
うざ

>>326-327
Safariのせい？

ttp://www.remus.dti.ne.jp/~a-satomi/nikki/2004/03a.html#d01n02

何のせいだか知らないけど、「~」じゃなくて「%7E」にしとけ。

嫌だ。断る！

>>327-329

そう、Safari で書き込んだせいだった。ごめん。
それから、327 は別人。フォロー、さんくすこ

レスありがとうございます。
他のフォントを指定して試して見たのですが、
どうやら、ヒラギノだけのではないみたいです。うちの環境では
小塚シリーズ（OpenType）で同じような現象が有りました。
#小塚シリーズの方が、ひどく見えますorz

OpenTypeFontの「字面」と「仮想ボディ」の扱いが、「何のせい」かは
わかりませんが、きちんと処理されていないのでしょうかね

とりあえず、該当（気になる）部分には他のフォントを指定することにします。

テーブルの中に

<td class="A">

と入れて、.cssファイルに

.A{font-color:red;}

のような指定をしています。
この場合、テーブル内に入力した文章の一ヶ所に別のスタイルを指定しようとしても
無視されてしまいます。どうしたら良いでしょうか。

さきほど<div style="font-color:blue;">地震</div>が起こりましたね。

のような記述をしたのですが、駄目でした。
地震、の部分が他の文字と被る現象が起こってしまいます。改善策をお願いします。

font-color

まちがえました、color:red;です。
ファイルの記述は正確な方で書いてますが結果は変になるんです。

>>335
<span>

＞さきほど<div style="font-color:blue;">地震</div>が起こりましたね。
こういうのは、その語句を強調したいのだから、<em>または<strong>
を使うのが順当かとおもう。

em { font-color: blue; }

回答ありがとうございます、spanやemというのを使えば良いんですね。

spanやemの使い方をネットで検索してみたのですが、
spanは指定内容（color:red;など）をbody内に直接記述し、
emは指定内容はcssファイルに書いてbody内の本文には
＞さきほど<em>地震</em>が起こりましたね
のような使い方をするという考え方であっていますでしょうか。

はぁ？

styleとspanを混同してるかな

>>338
strong … 強調
em … やや強調
span … なんか意味あるかもね

という要素。スタイルとはなんも関係なし。
で、（現在の）CSSは要素ごとの見た目を設定するモノです。

spanとdivはそれ自体は意味がないとどっかで説明していた。
単にブロックだよ〜インラインだよ〜
と言っているだけで。
どこで説明していたかは忘れた とほほだっけ？

仕様書くらい嫁や　　ﾎﾞｹ

<div id="bigbox">
<div class="sbox">
ああああああ
</div>
<div class="sbox">
ああああああ
</div>
</div>

id="bixbox"に背景を指定したのですが
FFなどモジラ系では表示されません。
OPやIEでは表示されます。

バグですか？
表示させるにはどうすれば良いですか？

cssは ひ・み・つ だよね？

>344
それはとても深刻なバグです、IEの脆弱性を利用したバグです

>344
セキュリティーガード(SG)に登録して個人情報を抜かれないように
したほうがよいと思います。

本来ならこれくらい自分で調べてほしいんだが

＝＝　以下引用　＝＝

２ちゃんねる初心者ですか？
書き込む前にSG(セキュリティー・ガード)に登録しないと危険ですよ。
SGに登録せずに書き込んだ場合、
あなたのパソコン内の情報が他人に見られる恐れがあります。
初期の頃から２ちゃんねるにいる方達はかなりのスキルとこのBBSのコマンドを知っています
ですから簡単にあなたのIPアドレス等抜かれ、住所まで公開された人も数多くおり
社会的に抹殺されてしまう。それが２ちゃんねるの隠れた素顔でもあります
SGしておけばまず抜かれるコマンド自体が無効になってしまうので
どんなにスキルがある人でもIPアドレスを抜くことが不可能になります


SGに登録する方法は、名前欄に「 fusianasan 」と入れる。


これでSGの登録は完了します
一度登録すれば、電話番号を変えない限り継続されます。
２ちゃんねるはルールさえ守れば危険な場所ではありません。
しかし悪意を持った人間も確かに存在します。気を付けて下さいね。

fusianasanは、正式にはフュージャネイザン、
又はフュジャネイザンと読みます。
元々はアメリカの学生達の間で、チャットの時に
セキュリティを強化する為に開発されたシステムです。
fusianasanを掲示板に組み込むのは結構面倒なのですが、
２ちゃんにカキコしてたらウィルスに感染したとか、
個人情報が漏れた等の抗議がうざったくなったひろゆきが、
仕方なく導入しました。
悪意のある人間にクラックされる前にSGを施す事をお勧めします。

あーもう！IEムカつく！なんでこんなゴミブラウザが一番普及してやがるんだか！！！
糞IEのcss誤実装のせいで余計な入れ子が増えていく・・・

詳しくはしらんがこんな感じ？
つ.htaccess
SetEnvIf User-Agent "MSIE" BadAgent
<Files *>
Order allow,deny
Allow from all
Deny from env=BadAgent
</Files>

質問です。
半透明に化したテーブル上に文章があるのですが、
文字が半透明されたレイヤーの下に入ってしまいます。
文字を最前面に表示させる方法を教えて下さいませ。
以下ソースです。

■HTML

<TABLE height="40" width="160" class="op">
<TBODY>
<TR>
<TD width="168" class="font">あいうえお</TD>
</TR>
</TBODY>
</TABLE>


■CSS

.font {
font-size : 10px;
font-family : "ＭＳ ゴシック";
color : #ffffff;
}

.op {
background-color : #ff0000;
filter:alpha(opacity=45);
-moz-opacity:0.25;
opacity:0.75;
}

レイヤー?

>>351
> 文字が半透明されたレイヤーの下に入ってしまいます。

filter は範囲内のもの全てに効果を与えるから
文字も当然くすんでしまうのだけれど。

そういう意味ではなくて？

どこにもレイ(ry

>>353
ありがとう御座います。
やはり無理ですか･･･。
353氏の言い方に置き換えますと、
文字だけをくすまずに表示させたかったのですが･･･。

>置き換えますと
>>354

逆にお尋ねいたしますと、なぜ半透明にする必要があるのですか？
そういう画像を用意して背景に指定すればいいと思うのですが。

俺もそう思う。
テーブルにドット系の1px置き透過GIF画像作るとかはどうかな。

持ってないなら上げるけど。

float　と　position
今からどっちか覚えよーと
思います。
どっち派がおおいんですか？

>359
どうせならどっちも覚えといて損はないよ
用途によって使い分ければいいから

>>360
サンクスです！
ごっちゃになりそーでビビってます、、、
どっちのが取っ掛かりやすいですかねぇ？

そうごっちゃになるもんでもないよ
取っ掛かる順番は好みで
俺はfloatから覚えた

さんくす。
現在　float　挑戦中-

おらpositionから覚えた。
positionなら1, 2時間で十分覚えられんべ。
floatは中々難しかったよ。

floatなら俺に訊け。
俺の人生を語ってやるから・・・

すいません、こういうもの↓

文章block１　文章block２　文章block３
□□□□□　□□□□□　□□□□□
□□□□□　□□□□□　□□□□□
□□□□□　□□□□□　□□□□□
□□□□□　□□□□□　□□。
□□□□。　 □□□。

を、テーブルを使わずにdivかspanなどで
作る方法ありますでしょうか。

FAQ嫁

>366
聞き方からしてすでにやり方を知っていると思われるが。

>351
ttp://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja-JP%3Aofficial&q=1px%E3%80%80%E9%80%8F%E9%81%8E%E7%B4%A0%E6%9D%90&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja

初歩的な質問なんですが、「div」とはどういう意味でしょうか。
またどういう時に使う事を想定されているものなんでしょうか。

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.4

>>367-368
ありがP。
やり方があったような気がしてたけど
やり方がわかりませんでした

font-familyで全角と半角両方別々に指定する方法はないのでしょうか？
全角は諦めて、font-familyにアルファベット用フォントのみ指定するしか
ないでしょうか。
その場合、環境によって全角が化けてしまったりはしないんでしょうか？
少し気になります。

>>372
アルファベット用フォント名を先に書けば良いのに。
font-family: Times, "ＭＳ Ｐゴシック", sans-serif;

>>373
あれっそれだと日本語無視されません？？
もういちど試してみます

a.htmlのなかに
<object data="b.html" height="50px" width="50px">
といった感じのインラインフレームをつくったのですが、
b.html内にあるリンクからa.htmlのページを切り替えるにはどうしたらいいのですか？

NN4に実装されていたmulticol要素ってCSSで実現できる？
文字サイズと連動して段の中の情報量が変化する多段組みです。

>>376
ていうか段組でしょ。できる。

>>377
ただの段組レイアウトとは違うぞ？

>>377
例えば文字サイズを小さくしていたときに
1段目下に表示されていた部分がサイズを大きくすると
2段目に来るような多段組みです。

>>373
やっぱり無視されるようなんですが？

>>379
レイアウト的に段組構成をするというだけでの話。
イラストレータでの文字の流し込みみたいな感じの部分も可能か、ってことに関しては無理。

>>380
君の書いたfont-family部分のコードをさらしてくれ。

>>382
body {
font-family: verdana, helvetica, geneva, arial, "ＭＳ 明朝";
}
わかりやすいように明朝にしてある

>>383
Windows XP ProのIE6、Firefoxで確認したがどちらも問題なく適用されてる。
それ以外のコード部分で指定がおかしいのか、ブラウザの設定を確認してみれば？

>>383
link要素や@importを使っているのなら、文字コードの問題かもね。
MS系ならMSPGothic（スペルうろ覚え）とか書いた方がいい希ガス

http://aploda.org/dat6/upload42544.jpg

↑こういう段組をしたいんですが
tableでもCSSでも再現することができません…

上記の画像は普通のテーブルで
白い線のところを1ピクセルのセル、
背景が透けているところは3ピクセルの空セルにしてムリムリに組んで表示させていますが
もっと簡単な組み方があるのではないかと思います。
tableでもCSSでもどちらでもけっこうですので
スマートな組み方をご存知のかた教えてください。

<html lang="ja">
<head>
<title></title>
</head>

<body>
<div style="width: 700px; margin: 0 auto; padding: 0; border: 1px solid black;"><!--大枠

start-->

<div style="float:left; width: 200px; margin: 0; padding: 0; background-color: #ff9;">おいら

</div>

<div style="float:left; width: 300px; margin: 0; padding: 0; background-color: #99f;">ゴクウ

!</div>

</div><!--大枠 end-->

</body>
</html>

NNで、大枠の中に「おいら」と「ゴクウ」が入りません。（大枠に「height」を
指定すれば入りますが。）
IEだと大丈夫です。
どこか間違っていますか？

>>387
Netscape 7.1 Firefox/1.0.2 では入ってるな。
NNのverとhtmlのモードは？

>>386
そんなものをtableですら実現できない方にCSSは無理です。
あきらめましょう。

はい。

>>387
枠が無いことと、大枠の中に入りません　とは意味が違うぞ。

　　どっちだ？　　　　って言ってみても返事はないよな。

>>388
今違うPCの前にいるので（NN未インストール）NNのバージョンは分かりません。多分7です。
で、FFの1.0で見てみたのですが、やはり大枠に入っていません。
htmlのモードについては良く分かりません。確認する方法があるのでしょうか。アフォで済みません・・・。

わかりませんじゃ話にならん。
両方解るようになってから、もう一度あらためて来いや。

>>391
枠という表現がまずかったでしょうか。

700ピクセルのブロックの中に「おいら」ブロックと「ゴクウ」ブロックが入らないのです。
見た目で詳しく言うと、700ピクセルのブロックが上下つぶれてただの横線になり、
その横線にぶら下がるように「おいら」ブロックと「ゴクウ」ブロックが隣接しているのです。

height　書いとけばいいやん。

>>395
一つあきらめると脳細胞がずいぶん死滅すると聞いていますので、あきらめたくありません。

>あきらめたくありません。

うむ、諦めず、自分で勉強しなさい。

>>ずいぶん死滅
気になるなぁ　俺、結構諦めちゃってるからなぁ。

おいらの場合、そろそろ全滅かも・・・

>>386
できたよ
http://venus.aez.jp/uploda/data/dat6/upload316442.png

頑張って

>>400
ﾜﾛｽ

解決しました。あきらめないでよかった。

>>386
俺もできたよ
http://venus.aez.jp/uploda/data/dat6/upload316442.png

頑張って

ニュースメニューTABLEタグが下に来ないので教えてください。
今は右側になってしまっています。HPはわかりますが、CSSタグは初心者です。
JAVAは使っていません。右ではなくて下にしたいです。
よろしくおねがいします。m(__)m

ごめんなさい。自分語で書かれても判りません。

テーブルタグで全体囲んでおいて
その間に調べればええやん HTMLわかるなら

>ニュースメニューTABLEタグが下に来ないので教えてください。

　頭痛くなってきた。

リンクにカーソルが乗っている時(a.hover)の指定で、「少しずれる・破線を出す」
という効果が出るようにしたいのですが、表示されるものの下がった分他の本文もずれてしまいます。

IE6でうまく表示させる為にはどうしたらよいのでしょうか。NN7.1では問題なく表示されます。

a.hover {boder-bottom:#000000 1px dashed; position:relative; top:1px; left:1px;}

hover以外のaは文字色しか指定していません。
bodyに line-height:130%; という指定で行間調整しているのですがそれがまずいのでしょうか?

a.hover ……

>>408
あ 俺もなんかそういう状況になることあるなぁ IEかな
とりあえずclear:bothがa:hoverとa:hoverの間にあると
ちょっとは改善した(下方向へのずれはなくなった)けど根本的な解決法はワカンネ

>>404
私みたいに真剣に相談しに来る人もいるのです。
釣りは釣堀でやってください。

>>409
写し間違えました！すみません。本文ではa:になっております。
>>410
他のサイトさんを見ても特に特別な指定はないみたいなのにずれていなくて
なぜ自分の所ではずれてしまうのか悩んでおりました。
応急処置参考にさせて頂きます。ありがとうございました。
一から書き直して何故ずれるのかもう少し調べてみようと思います。

外部CSSを利用しています
・IEだとCSSが反映されない個所がある
・FF、NSではCSSがちゃんと反映される

で、IEだと記述順を変えたりすると結果も変わってきます
何か記述順にルールってあるのでしょうか？

ま、IEは色々あるとしか…。それだけではね。

<table>
<tr>
<td>　窓を変形しても、このセルの幅を常にtb1に合わせるにはどうしたらいいでしょう？
　<table class=tb1>
</td>
<td>
　<table class=tb2>
</td>
</tr>
</table>

>408
文字を動かすだけなら

a:hover { position : relative; left : xx; top : yy}

※xxおよびyyは任意の数値な。2pxとか適当に。破線は知らん。

>413
IEは悪い子なのでFFなどを主軸に通常のCSSを用意。それからIE用のCSSを用意。
んで、あまり推奨ではないけどHEADにこれ差し込む。

<!--[if IE]><link rel="stylesheet" href=ie.css" type="text/css" media="screen, projection" /><![endif]-->

するとIEの場合はie.cssを読み込んでくれると思うんだけど、俺は馬鹿だからよく知らないで使ってる。
後は頼んだ賢い人↓

イトーに行くならハ・ト・ヤ　電話は良い風呂っとぉ・・・

cssを、
ul { list-style:none;}
ul li a{
width:50px;
float:left;
border:3px double #000080;
}
ul li a:link,ul li a:visited { background-color:#8080FF;}
ul li a:hover { background-color:#C0C0FF;}

htmlは、
<ul>
<li><a href="a">1</a></li>
<li><a href="b">2</a></li>
<li><a href="c">3</a></li>
<li><a href="d">4</a></li>
<li><a href="e">5</a></li>
<li><a href="f">6</a></li>
</ul>

という横並びの箱型のリンクを作っているのですが、
IE(6で確認)で見ると横並びでなく階段状になってしまいます。
どのようにすれば改善されるでしょうか。
borderを削除すれば起きないようなのですが、borderをつけたいのです。

ul li a{
width:50px;
float:left;
border:3px double #000080;
}

これを

ul li {
width:50px;
float:left;
}
li a {
border:3px double #000080;
}

と分けても駄目かな？

>>419
試してみましたが、変わらないようです……。

>418

※ul { list-style:none;}はなしで※
li a　に　{display: block;}　を追加でいかがでしょうか？

質問させてください。
divで囲んだメインブロックに
ttp://www.nirui.com/2nd/　こちらのサイトのように影をつけたいのですが
背景画像として影の画像を用意して重ねる方法が主流なのでしょうか？
画像を用意せずに影をつけられる方法などがありましたら教えてほしいのですが・・・。
よろしくお願いします。

>418

※ul { list-style:none;}はなしで※　は余計でした。display: block;を追記してみてください。

>>421
　css
div.shadow {
background:#b9c5c5;
width: 36em;
}

div.light {
background:#ffffff;
border: 1px solid black;
position:relative;
left:-4px;
top:-4px;
}

　　htmlは解るよな？

tableで作ったマルチカラムの段組を
完璧にcssで再現できませんよね？

出来る。
　　　　　　やらずに訊くな。

>>421
display: block;を追加してみました、が、変わりません……。
多分IE固有の何かのバグだとは思うのですが。

display:inline;

>>418
ul li を float して
ul li a を display:block; ではどうですか。

>>428
????

<style type="text/css">
<!--
li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="img1.gif" width="100" height="20"></a></li>
<li><a href="#"><img src="img2.gif" width="100" height="20"></a></li>
<li><a href="#"><img src="img3.gif" width="100" height="20"></a></li>
<li><a href="#"><img src="img4.gif" width="100" height="20"></a></li>
<li><a href="#"><img src="img5.gif" width="100" height="20"></a></li>
</ul>

</body>


↑のようにした場合画像と画像の間に微妙な隙間ができてしまいます。
これを無くすにはどうしたらいいですか？

>430
img { margin:0; padding:0; }

>431

回答ありがとうございます。

li {　margin: 0px;　padding: 0px;　list-style-type: none;　}
ul {　margin: 0px;　padding: 0px;　list-style-type: none;　}
img {　margin: 0px;　padding: 0px;　border: 0px;　}

としてみたのですがやっぱり微妙な隙間ができてしまいます。
何か他に方法はないでしょうか？

vertical-align
http://www.mozilla.gr.jp/standards/webtips0018.html#c1_1

>>432
過去ログくらい探せ！何度も既出。
ヒント：vertical-align
>>431
この質問がくると必ずそう答える奴がいるな・・・

>>420
うそつけ。ちゃんと横並びになったぞ。Win98SE/IE6.0で確認。
ul li {
width:50px;
float:left;
}
li a { border:3px double #000080; }
ul li a:link,ul li a:visited { background-color:#8080FF;}
ul li a:hover { background-color:#C0C0FF;}
<ul>
<li><a href="a">1</a></li>
<li><a href="b">2</a></li>
<li><a href="c">3</a></li>
<li><a href="d">4</a></li>
<li><a href="e">5</a></li>
<li><a href="f">6</a></li>
</ul>

>423
ありがとうございます。できました。
ドロップシャドウみたいに輪郭がぼけた影はやはり画像が必要になるんでしょうか？

>433-434
ｹｺ━━━━(・∀・)人(・∀・)━━━━ﾝ

スタイルシートの質問ではないのかもしれませんが・・

テーブルの枠を作る方法で、例えばテーブルの背景色を黒、セルの背景色を白
とし、cellpaddingの数値を変える事によって枠の太さを任意に調整できる方法があると思います。
今この方法でテーブルを作っているのですが、背景に画像を挿入したいと思いました。
で、普通に画像は確かに入れれるのですが、バックグラウンドにまたがった画像を背景にしたいと思うのですが
どのようにすればよいでしょうか？

普通にBGimageを設定しただけではテーブル内には背景は表示されず（当然セルの色になります）
テーブルに入れるだけでは背景にまたがらない・・

<div class="ufufu">
これはサンプルです
</div>


div.ufufu {
　font-size:xx-small;
}

>>436
何重にも重ねればいいんじゃねぇ？

img { margin:0; padding:0; }
って意味ないのか(´･ω･｀)
PBBSのカスタマイズで使いまくってる。

>>439
>入れれるのですが
>バックグラウンドにまたがった画像
>普通にBGimageを
>背景にまたがらない・・

意味わからんね。自分語を使用されても困る。

>>439
セルに色を指定していたら、そりゃ背景画像は映らないだろ。
とりあえず、セルの背景色指定を外せ。

>441
意味が無くは無いこともあるが、
imgはインライン要素だからなぁ…。

>442
察してやれ

わかりにくい質問＆用語連発でスミマセン。
セルの色を指定していないと、テーブルの枠が表示されない
ので困っているんです（テーブル枠の色が背景の色になってしまう）。
背景まで透過表示されるような指定ってできないですかね・・・？

>>441
インライン要素でも、左右のパディング値は有効。
マージンもだっけ？

よし俺が翻訳してやる


　CSSの質問ではないのかもしれませんが宜しくお願いします。

　tableに枠を付けたように見える効果として次のような方法があると思います。
　例えばtableの背景色に黒を、セルの背景色に白を指定すると
　cellpaddingの数値を変える事によって枠のように見える部分が調整できますよね？
　私はそうしてます。

　ところで、この変な小技を使用しているtableに背景画像を挿入したいと思いました。
　背景画像を指定すれば、確かに画像は背景として出ます。しかしそれではTable内だけしか出てきません。
　しかし私はTableの外にも画像が表示されるようにしたいのです。（※←またがるの意味）

　とはいえ、bodyにbackground-imageを入れたところでtdやthには白、tableには黒色を指定していますから、
　背景画像はtableのせいで見えなくなってしまいます。

　どうにかできませんか？

セルとセルの間に、細胞壁のごとく余白部分が発生して、ボーダーが二重に見えるのが嫌なのかな。
それなら、テーブルにもセルにも背景を指定せずに、次のプロパティを書けばいい。


table{
border-collapse: collapse;
}

td, th{
border: thin #000 solid;
}

(*←それが広がる意味)

>>447
翻訳ありがとうございます。まさしくそういう事です。
そして、
>>448
まさにそういうことです。そのCSSで思った通りできました！

推敲までして頂いて感謝感激です。ありがとうございました。

>>435
あ、自分は何を勘違いしていたのでしょうか、確かにできますね……。
419さん、本当にすいません。435さん、ご指摘有難うございました。
しかし、その方法だと幅が50pxという部分が無視され（幅は文字列の長さになる）てしまうようです。

と思ったら、>>428の方法で出来ました!!
ul li { float:left;}
ul li a {
display:block;
width:50px;
border:3px double #000080; }
ul li a:link,ul li a:visited { background-color:#8080FF;}
ul li a:hover { background-color:#C0C0FF;}

理屈がわかりませんがこれで行かせてもらいます!
色々とご迷惑おかけいたしましたが、有難うございました。

あのな、非置換インライン要素にwidthなんて指定できないんだよ。
だから、display:block; なんだよ。理窟がわからなければ仕様書を読むべし。
あと、floatかけた要素は自働的にブロックレベル要素になるお約束だ（一部を除き）。

cssってhtmlみたいにversion明記したほうがいいんじゃないんでしょうか？

ＣＳＳは後方互換性が考慮されとるだろが。JavaScriptぢゃあるまいし。

段組で横幅固定にするのはマナー違反ですか？

別に

>>455　スレ違ひ。こちら↓で問ひなさい。
　横幅800固定やめろ。ブラウザ最大化するのｳｻﾞｲ。
　http://pc8.2ch.net/test/read.cgi/hp/1031302476/l50

最近CSSに変えたらしいが、激しく読みにくい。
http://www.ocn.ne.jp/

文字小さ杉

>>458
文字サイズは普通だろ。ブラウザの設定じゃないのか？
つーか製作者はIEでしか確認してないのか？
Firefoxで見ると「注目情報」のところのバナーがずれてて激ﾜﾛｽｗｗｗｗｗ

IEで文字サイズ小ってことじゃない。
全く読めないなｗ

>460
そいうこと。

>459
激ﾜﾗ
当然NNでもズレまくりｗ

幅固定の3ペインだったらこの文字サイズじゃなければ厳しいんだろうな。
でもこのデザインなら幅固定しないでリキッドデザインでもいいと思うんだが。

　　 ∩∩
　　 | | | |
　　( ﾟωﾟ) 　＜すれちがいのざつだん　ここまで
　 ｡ノДヽ｡
　　　bb

プロの仕事じゃないわねっ

ttp://fanta.10gallon.jp/　ファンタ
↑のウェブサイトのStyleをdecoyに切り替えてください。
メニューバーが手前にあってスクロールしても固定されていますよね？
これはどの様に設定しているのでしょうか？(IEで見ても固定されているので謎です。)

ttp://fanta.10gallon.jp/decoy.css
↑該当らしきスタイルシートを見ても分かりませんでしたので
アドバイスをお願いします。

>>465
頭かたいなあ。
絶対配置とオーバーフロウをうまく使うんだよ。

>>466
その使い方がよく分からないので教えてください。
最低限必要な設定項目とかを…

質問は具体的に。
ソースのどこがどうわからないのかね。
それを言ってくれないと、こちらも何と回答してやればよいのかわからない。

コピペするのでそっくり書いてください。

>>469
先のサイトをそっくりコピペすればいいんじゃね？

>470 がいいこといった

なに釣られてるんだよ。

>>467
絶対配置は、要素の配置を他の要素にかかわらず、一カ所を起点にして
指定した位置に配置するんだよ。コレでメニュー部分を固定できるでしょ？

で、オーバーフロウはブロックの範囲からはみ出した部分をどうするか、
のプロパティ、ってのはもう調べて知っているよね？
はみ出し部分を、表示・非表示・スクロールバーを用いて表示、のどれかに設定できる。

ということは（以下略

CSSを勉強したいのですが、お勧めの書籍やどうやって勉強したか教えてください。

>>474
まず>>1を読むことだよ。

>467
スマートじゃないけど、

　bodyに動かないものを貼ってさ
　divなりで文章囲って
　そのdivでスクロールバーを出して
　bodyのスクロールバーを消すと

見た目はbodyにスクロールバーがあるかもしれないけど実際は
DIV内をスクロールして読んでるだけのページができるってこと。

コピペしてしまいなさい。

横幅40%ぐらいのdivをfloatで配置していますが、float:leftで配置するとボックス内の文章量によって
┏┓┏┓
┃┃┗┛
┃┃┏┓
┗┛┃┃
　　　┃┃
　　　┗┛
┏┓
┗┛
のようになってしまいます。これを
┏┓┏┓
┃┃┗┛
┃┃┏┓
┗┛┃┃
┏┓┃┃
┗┛┗┛
のように配置するにはどうすればよいでしょうか？
テンプレートの段組について解説しているページを読みましたがこの方法がわかりませんでした。

>>477
図示もいいが、いまどう指定してるのか、ソース出しなさいって。

ぱくられるのが嫌なのでソースは出せません。
想像でお願いします。

>>478
すみません。↓こんな感じです

<div class="box">
てすと<br />てすと<br />てすと<br />
</div>
<div class="box">
てすと
</div>
<div class="box">
てすと<br />てすと
</div>
<div class="box">
てすと
</div>

div.box{
width:40%;
margin:1%;
border:1px solid #000;
float:left;
}

全然ダメｗ
全部直すことになるよ。

>>481
それだけか。

根本的に今のままだと無理だろうとは思うので、構成が変わるのはかまいません。
できればシンプルに実現したいとは思います。

<style>
div.box{ width:40%; margin:1%; border:1px solid #000; float:left; }
div.box2{ margin:1%; border:1px solid #000; }
</style>

<div class="box">
<div class="box2">
てすと<br />てすと<br />てすと<br />
</div>
<div class="box2">
てすと
</div>
</div>

<div class="box">
<div class="box2">
てすと
</div>
<div class="box2">
てすと<br />てすと<br />てすと<br />
</div>
</div>
てすと
</div>
</div>

>>484
説明がへたくそですみません。
ようは、あらかじめ位置を決めるのではなくて、
すでに配置されてるボックスの量の少ないほうに配置したいです。
(数字はHTMLソース上の順番)
┏━┓┏━┓
┃１ ┃┃２ ┃
┃　 ┃┗━┛
┗━┛┏━┓
┏━┓┃３ ┃
┃４ ┃┗━┛
┗━┛
が、1の中身が増えたら
┏━┓┏━┓
┃１ ┃┃２ ┃
┃　 ┃┗━┛
┃　 ┃┏━┓
┃　 ┃┃３ ┃
┃　 ┃┗━┛
┗━┛┏━┓
　　　　 ┃４ ┃
　　　　 ┗━┛

しね

>>485　無茶を言ふ人だ。

できるかどうかもわかってないのでダメなら諦めます。

亀レスでスミマセンm(_ _)m
とりあえずやりたいことはh1のタイトルをバーとして固定して
その背後にpのボックスをスルスルーとスクロールさせたいのです。
現状ではh1が固定されずスクロールしてもpと共に流れてしまいます。

▼html▼
<body>
<div id="banner">
<h1>タイトル</h1>
<p class="description">hogehoge前書き前書きHOGEHOGEまえがきまえがき</p>
</div>

…

</body>

▼css▼
body {
font-size:100%;
font-style: normal;
font-weight: normal;
margin:0;
padding:0;
line-height:1.5;
word-break:normal;
word-wrap:break-word ;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
z-index:2;
}

h1 {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0px;
padding:5px 0px;
background:white fixed;
text-align:center;
border-top:solid 5px black;
border-bottom:solid 5px black;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index:3;
}

p.description {
overflow:auto;
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
text-align:right;
width:80%;
height:100%;
border-left:solid 5px darkgray;
border-right:solid 5px darkgray;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index:1;
}

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

下記のようにTABLEにmenuを指定していますが、
CSSの「.menu A･･･」の記述ではなく、「A･･･」のリンクの設定が適用されてしまいます。
TABLE内に指定しているからいけないのでしょうか？

■HTML
<TABLE width="100%" height="20" cellpadding="0" cellspacing="0" class="menu">
<TBODY>
<TR>
<TD height="17"></TD>
<TD class="menu_button" width="116" height="20"><A href="./menu1.html">メニュー1</A></TD>
</TR>
</TBODY>
</TABLE>

続き...

■CSS
.menu A:hover {color: #ff0000;text-decoration: none; }

.menu A:link { color: #333333; text-decoration: none; }

.menu A:visited { color: #ffffff; }

.menu A:iactive { color: #ff0099; text-decoration: none; }



A:hover { color:#ffffff; background-color : #ff0000; }

A:link { color:#6a5acd; text-decoration:none; }

A:visited { color:#6a5acd; text-decoration:none; }

A:active { color:#ff0099; text-decoration:none; }

ふつう
a:hover.menu じゃね？

今確認しました所、どうやら
.menu A:hoverのcolor: #ff0000;と
A:hoverのbackground-color: #ff0000;が二つ適用されてしまっているようです。
指定方法に間違いがあるのでしょうか？

TABLE.menu A:hoverかな

さらに触ってみた所、
.menu A:hover {
color: #ffffff;
background-color: #ff0000;
}
background-colorを指定すると何故か適用されますが、
color: #ff0000;に変更すると、「A:hover･･･」が適用されてしまいます･･･。
一体何故でしょうか･･･？

>>489-491
無駄に長いよ。
コメント・アウト（/* */）して行って、どれが不要な記述だか見極めなさい。
もう少し自分で絞り込んできたら、話を聞くよ。

>>492-497　もう少し整理して、よけいな記述は省いてもってきな。

すぐに怒らないでください。
これだから初心者は書き込めません。

>>498
まとめました。お願いします。m(_ _)m

▼css▼
body {
overflow:hidden;
z-index:2;
}

h1 {
position:absolute;
top:20px;
left:0;
width:100%;
border-top:solid 5px black;
border-bottom:solid 5px black;
z-index:3;
}

p.description {
overflow:auto;
position:absolute;
top:0;
left:0;
width:80%;
height:100%;
z-index:1;
}

>>489
>とりあえずやりたいことはh1のタイトルをバーとして固定して
>その背後にpのボックスをスルスルーとスクロールさせたいのです。

ごめん、何がしたいんだか、意味わかんないや。

>>489
h1要素を非表示にして、h1要素と同等の画像を、
body要素のbackground-imageとして、右上固定表示にするとか。

>>498
こういうのか？
ttp://desperadoes.biz/style/p_frame.php

498じゃなくて489

>>501
それはたとえば

#test { overflow : hidden; z-index : 2;}
#test #menu{ position : absolute; top : 20px; left:0; width : 100%; z-index:3; }
#test #content {overflow : auto; position : absolute; top : 0 ;left : 0;width : 100%;height : 100%;z-index : 1;}

<body id="test">
<div id="menu">
固定させたいもの
</div>
<div id="content">
スクロールさせたいもの
</div>
</body>

こういうのとは違うの？勝手にソース書き換えたけど。

>>502
まずは ttp://fanta.10gallon.jp/ の
サイトのStyleをdecoyに切り替えてください。
そうするとメニューバーが浮遊したかたちになりますよね。
本文はスクロールするけれどメニューバーは動かない。
この形を作りたいのです。
（h1は固定、pはスクロールするという形で…）

>>503
h1が前面に来るようにしたいのです。
その方法だとh1よりも本文が手前になりますよね。

>>504
似ているけれど異なります。
サイドから固定バー(h1)を離してそのうしろをpが通過するようにしたいので…

>>507
要は、IEで無効なposition:fixedの代替をoverflowでやりたいってか？　
そんなの検索すれば出てくるだろに。

>>508
javascriptを使わずに設定する方法を教えてください。
FANTAのサイトのCSSを見たらexpressionとかは使われていないのです。
ググっても見つかりませんでした。

>>509
http://fanta.10gallon.jp/decoy.css
真似すればいいだけでしょ。不要な指定は/* */で削っていってさ。
>>506は試したのかね。

>>510
h1に.menu1をp.descriptionにmainのCSSを重ねてみたけれどできないのです。
だからこうして質問しているわけで…
>>506はムリでした。h1も一緒にスクロールされます。

>>511
＞>>506はムリでした。h1も一緒にスクロールされます。
？
俺はきちんと固定されたが

p.descriptionの後に他の要素があったらダメなんですかね？

とりあえず465のサイトを晒せ。回りくどくてカナワン。
擬似フレームの固定メニュー版をやりたいってことだろ？

>>514
http://desperadoes.biz/cat/fw/set/site/pseudo/pink/index.html
ここの黒メニューバーみたいにしたいんですよ。

>>515
何故君が、そのサイトのソースを見ないのかが不思議だよ。

これでできるってば。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
body {overflow:hidden; margin:0; padding:0; z-index:2;}
.fixed {
position:absolute; top:20px; left:0;
width:100%; height:2em;
z-index:3;
}
.scroll {
overflow:auto;
position:absolute; top:0; left:0;
width:100%; height:100%; margin:0; padding:0;
z-index: 1;
}
<body>
<h1 class="fixed">固定させたいもの</h1>
<div class="scroll">
<p>スクロールさせたいもの。</p>
<p>スクロールさせたいもの。</p>
<p>スクロールさせたいもの。</p>
<p>スクロールさせたいもの。</p>
　…（以下繰り返し）…
</div>
</body>

>>517
できました。ｻﾝｸｽｺ！

>>508
>>510
>>514
>>516
氏ね！

>>518
・・・。

>>518　同じものを506が出してるぞ、お馬鹿さん。

>>508
>>510
>>514
>>516
お前らはものすごく正しい。気を落とすな。

>>520
　>>506のドコに
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
って書いてあるんだ？アァ？
ここを修正したからできたんだよ。ヴァーカ!!

恥ずかしい奴だな。もう判ったから帰れ

>>522　HTMLソースを見てないお前が悪い。

>>522
文書方宣言を書かない文書を作るお前の方が圧倒的に悪い。

まぁ、今日は吉牛で食べてきた牛カレーが美味しかったから良いことにするよ。
10月頃には牛丼再会するかもって店員が言ってた。つゆだく頼みたいなぁ。

ていうか、DOCTYPE宣言がCSSの挙動に影響するのか？

ＩＥ標準モードの場合
html {overflow:hidden;}
body {height:100%;width:100%;}
を入れるのは
擬似フレームの初歩、ＦＡＱだよな。

|´,_ゝ`) .｡o（ 逆切れですか。）

>>527　>>2-10読め。基礎です。

ろくに勉強しないで人に聞いたりソースコピペしたり。
あまつさえ文書方宣言すら書かず・・・
>>465は氷山の一角なんだろうな。恐ろしいことで。

文書方宣言？　文書型宣言だろ。これも氷山の一角か。

>>527
うん、影響するよー。

>>529
厨房メールスレに常駐してる俺から見れば質問者の逆切れなんて可愛いもの。
「ここを修正したからできたんだ」って言ってるんだから問題解決したんでしょ。
めでたしめでたし。

間違いがないように訂正しておくと、「文書型」だな。>>525,531
俺のMSIMEじゃ一発変換できんなこれ。

>>527
これは必読だろ。
http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic4

HTML、webサイト作成ソフトを何とか勉強し終わったんですが
どうせならCSS勉強してからサイトつくった方がいいでしょうか？

>>408の書き込みをした物です。あれから調べてみたり書き直したりしたのですが
どうしても直ってくれないようです。
IE固有のバグだと諦めようかとも思ったのですが、ズレないサイトもあるので…。
position:relativeのみならば平気なんですが、
下線を入れようとするとどうしてもズレてしまいます。
記述する順番なども変えてみたのですが…。
どなたか根本的解決方法を教えて下さい。

>>537
ずれないけども。
あと質問のとき「IE6」と書くだけでなく、表示モードについても書いてください。
たぶん、どこかでheightを指定してませんか？
消し忘れとか、かぶってるとか。その場合の理由は>>6の1。
最小限の構成でテストすれば他の場所に原因があるのがわかると思うんだけど。

>536
人によるけど沢山ページを作りながら体当たりでcss学んだほうがいいかも。
まぁなんにせよ、疲れん程度に。

>HTML、webサイト作成ソフトを何とか勉強し終わったんですが

　ビルダーの使い方でしょ？

>>536
html勉強しおわる（ってのもアレだけど）と、おのずとCSSのことも
わかっているはずなんだけどなあ。

ビルダーなんて毒でしかないよ。ソースも汚くなるし。

http://cssbug.at.infoseek.co.jp/detail/winie/b164.html
このIEのバグを回避する方法はないのでしょうか？

>543

相対指定

テーブルデザインからXHTML+CSSへの移行勉強中です。
HTMLからスタイル要素を分離して、スタイルシートの変更でデザインを変えられるようになる、と理解しています。
ただ、いろいろとサンプルを見ると、デザインを分離できていないコーディングのものが多々みられます。
left, mainなどとボックスを分けるのはまだ名称だけの問題とも言えますが、
不用意にボックスを入れ子にするとスタイルシートによる自由なデザイン変更が難しくなるかと思います。
その辺りをしっかり把握・理解したいのですが、参考になるサイトなどないでしょうか？

能書きより先ず実践！！
　　　　　￣￣￣￣￣￣　

やっています。やってますが、なんとなく見えてきたのは、
「ロジックとデザインを分離できる」というのは建前であって、
実際には今のCSS2では、ロジックからデザインを完全に分離することはできない、
つまりスタイルシートの変更だけでデザインを自由に変更できるように(X)HTMLを書くことはできない、
のではなかろうか、という思いです。
なのでその辺りに言及しているものがないかと探しているんです。

普通に出来るけど？

質問はソースを出して具体的に。何をどうしたらどううまくゆかなかったのか。
※ 議論はよそで ※

>>545
ブログ

>>547
ロジックに基いたデザインを意識すればしあわせになれます。

>>547
ここは見たかな？
http://www.csszengarden.com/tr/japanese/

>>545>>547の言わんとしてる事とずれてたかもだ…

ttp://www.ehdo.go.jp/okayama/
ちょうど同じようなサイトがあったので、
こちらのサイトを例に出させていただいて質問させていただきます。

上記サイトと同じように
上段　ヘッダー
中段　左：メニュー　右：メインコンテンツ
下段　フッター
とスタイルシートで段組してます。
左：メニュー部分と右：メインコンテンツ部分をdivで囲んでfloat:leftを指定し、
メインコンテンツ部分を右側に回りこませてるんですが
上記サイトと同じように幅を狭めるとメインコンテンツ部分が下にずれます。

ウィンドウ幅を縮めても下にずれないようにするにはどうすれば良いのでしょう？
よろしくお願いします。

>>547
多分、divやspanが気になるのでしょうね。
確かにCSSレイアウトで、それらのタグを一切使っていないサイトは見たことがありません。

でも、レイアウトなんてそんなに頻繁に変えるものでは無いと思うし、その時々に応じてHTMLを変えていけば良いんじゃないでしょうか？
少なくとも、テーブルよりは修正するところは少なくなるし。

>>554
追記です。IE6でブラウジングした場合に起こります。
失礼しました。

divやspanを、CSSデザインのためだけに使おうとしなければ、少しはよくなると思うが。どうだろう。>>555

>>547
そもそも現在のCSSが要素単位での装飾しかできない時点で、
出来ることは限られていて。

で、それ以上のコトをするためには、htmlやJavaScriptに手を加えて
何とかするしかなくて。なので不要な要素はハックみたいなモンだと思いねぇ。

>>557
CSS以外にdiv、spanを使う目的って何がありますかね？

自分はspanは滅多に使わないけど、divなんかは例えばcontainer、header、navigation、main、footerくらいに絞れば
HTMLソースもかなり綺麗になって、使い回しがし易いです。
要は論理タグを使って、汎用タグを極力（div,span）使わないのが大切でしょうね。
もっとも、複雑なレイアウトを組む時は、こうは行かないだろうけど･･･

>>555
机の上だけのお勉強は済んだか？
ほかの質問者の邪魔はしないでくれ。

>>559
それは構造化が目的で、CSSも想定したdivの使い方。
俺は、CSSを前提(絶対に必要)とするdivの使い方を避ける方がいいんじゃないかと言ったのよ。
テーブルレイアウトの感覚のままCSSに移行したのが、>>547の悩みのタネの原因じゃないかと推測して。

失せろ！

div,spanは基本中の基本だと思ってきたが、極力使わないものなのか・・・？
それじゃぁ、普遍的な構造や特殊な場合だけに認められるということ？

　　


　　　　　　　　　　※ 議論はよそで ※

(´-`).｡oO( なんで2chあたりで教科書知識をひけらかすかねぇ・・・)

(´･ω･｀).｡oO(やぁ…　馬鹿を証明してることに気づかないんだよ)

可哀想な子供達だな。

やせろ！

>>563
文章の流れを読め。

>>554
左右ブロックともにfloat:left;を指定するのを止める。左メニュー部分だけでよい。
代りに右のメインコンテンツ部分にはmarfin-left:左ブロックの横幅;を指定。
これは初歩だからあとはフロートのＦＡＱを見なさい。>>7です。

>>554

左：メニュー(#menu)　右：メインコンテンツ(#main)
これに、それらを包むボックス(#wrap)をつくって、

..

<DIV id="wrap">
　<div id="menu">
　　..メニュー..
　</div>
　<div id="main">
　　..メインコンテンツ..
　</div>
<DIV>

..

名前のこってた..orz

>>571
おいおい「それらを包むボックス」を作ってやるだけでは駄目だって、わかってるよな？
まあこれもＦＡＱに出てるが。
　浮動要素の高さもheightに含めさせる方法
　http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2

CSSによって作られるプロパティのファイルは、厳密にはなんと呼ぶべきものですか？

m9(＾Д＾)・・・

質問させてください。
IE6にて正常に表示されているスタイルシートが
「たまに」NN7.1で効かなくなる事があるのです。

NN7.1でスタイルシートを利用する際の定番の注意事項等
があるのでしょうか？

>>576
たぶん「たまに」間違った記述しているんだよ。

<input type="file">で作るボタンとテキストエリア（？）に
それぞれスタイルをかけたいのですが、それは不可能ですか？
あと、ﾏｯｸのIEでは、テキストエリアとボタンの間の
背景が白くなるのですが、回避方法を知っていたら教えて下さい

>>576　質問は具体的にと何度言ったらわかるのやら。
どのスタイル指定がどんな風に効かなくなるのか、ソースと条件を述べたまへ。

ちょっとすまないが、XHTMLについて教えてほしんだが
ここでよかったかな？

違うね。

じゃ、どこ？

自分で探せ

どうぞ教えて下さい。

【HTML部分】
<body>
<div CLASS="box1"> box1</div> <div CLASS="box2"> box2</div> <div CLASS="box3"> box3</div>
<div CLASS="box4"> box4</div> <div CLASS="box5"> box5</div> </DIV></body>


【CSS部分】
BODY { padding:0px;margin: 0px; }

.box1 { FLOAT: left; background-color:#997766; WIDTH: 15%; height:800px;margin-top: 0px }

.box2 { FLOAT: left; background-color:#445566; WIDTH: 60%; height:150px;margin-top: 0px }

.box3 { FLOAT: left; background-color:#778899; WIDTH: 20%; height:150px; margin-top: 0px }

.box4 { FLOAT: left; background-color:#cc1234; WIDTH: 80%; height:200px; margin-top: 0px }

.box5 { FLOAT: left; background-color:#cccc34; WIDTH: 5%; height: 800px; margin-top: 0px }

というスタイルシートで、
box5がどうしてもページのトップへ行かずに下へずれてしまいます。
margin-top: 0px　を指定しているのにどうしてなのでしょうか。
box5をページの一番上に来させるにはどうすればいいのか教えて頂けませんでしょうか。
どうぞ宜しくお願いします。

その前に、正しいhtmlを書きましょう。

これで
<style>
BODY { padding:0px;margin: 0px; }

.box1 { FLOAT: left; background-color:#997766; WIDTH: 15%; height:800px;margin-top: 0px }

.box22 { FLOAT: left; WIDTH: 80%; height:150px;margin-top: 0px }
.box2 { FLOAT: left; background-color:#445566; WIDTH: 75%; height:150px;margin-top: 0px }

.box3 { FLOAT: left; background-color:#778899; WIDTH: 25%; height:150px; margin-top: 0px }

.box4 { FLOAT: left; background-color:#cc1234; WIDTH: 100%; height:200px; margin-top: 0px }

.box5 { FLOAT: left; background-color:#cccc34; WIDTH: 5%; height: 800px; margin-top: 0px }

</style>
<body>

<div CLASS="box1"> box1</div> <div class="box22"><div CLASS="box2"> box2</div> <div CLASS="box3"> box3</div>
<div CLASS="box4"> box4</div> </div><div CLASS="box5"> box5</div></body>

せっかく検証してたのに、cssまで変えられたらやってらんねーな。

単純な算数じゃないの？

>>584
質問の意味がわかりません。
box1〜4があるのに、box5が「ページの一番上に来」るわけがありません。
絶対配置でも指定してあるならともかく。

>>585
すみません。
そうはおもったのですが、ど初心者の上、急いでいたので。

>>586
レスありがとうございます。

書いて頂いたタグが理解できなくて、
(特にwidthの％が。）
とにかくもそのままやってはみたのですが、うまく行きません。
もう少し教えて頂けると大変有難いです。

大変困っています。
どうぞ宜しくお願いします。

何をしたくて困ってるやら理解できんので、こちらも困ってるんです。　>>589

>586は確かにﾀﾞﾒだな。

.box5 {
FLOAT: left;
background-color:#cccc34;
WIDTH: 5%;
height: 800px;
margin-top: -150px;
}

>>588
レスありがとうございます。
box1がwidth:15%で１番左、box2がwidth:60%でbox1の右、
box3がwidth:20%でbox2の右、box4はwidth:80%でbox1の右、かつbox2とbox3の下、
（ここまでは、表示されています。）

あと、widthが5%残っているので、
box5をwidth:5%、float:left、margin-top:0pxを指定してやれば、
box3とbox4の右、つまり１番右の上に持ってこられるかな、と単純に思ったのですが、
１番右には来るものの、box5の上の面はbox4の上面とつらになって、
（box3の横は空白。）
box3とbox4の横には揃わない状態です。
box5を右上端に持ってきたいのです。

絶対配置については、今は時間がないので、
今晩、家で調べてみます。

アドバイス頂ければ大変有難いです。

>>593
>>592

margin-top: 0px } これ×
margin-top: 0px; } ○

>>590
593に書いたので、理解頂けましたでしょうか。
> box5を右上端に持ってきたいのです。
ということなのです。

>>592
レスありがとうございます。
今は試してみる時間がありませんので、
あとでチェックして再度書き込みします。

>>594
593書いてる間に592を頂いたようなんですー(^^；

レス遅くなりました。
>>570
それを試してみたら、メイン部分が左メニューの高さだけ下にずれるんですよね
IE6（MAC､WIN）
多分どこかミスしてるはず…
ともあれ>>7を見て勉強します。レスありがとうございます

>>571-573
それも昨日試して、うまくいったと思ったら、なぜかMAC　IE6で選択不能になっちゃって…
http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
読んで勉強してきます。

レスくださった方ありがとうございます。
初めてCSSで段組してるのでつまづいてばかりですが、ヒントもらえるだけでも
やる気が出てきます。
それでは失礼します

>>593
>box5の上の面はbox4の上面とつらになって、
「つら」ってどこの方言？　同じ高さってことかな。
どっちにしろ、フロートの原理に逆らって無理させてはいかん。
できても、それはバグだ。
　先行するフロートの上方に後続のフロートが置かれる
　http://cssbug.at.infoseek.co.jp/detail/winie/b093.html

もしかして「つらになって」とは「つらなって（列なって）」のつもりでは？

>上面とつらになって

大人は普通に使うけど？

面（つら）を合わせる、は方言じゃないと思った。
ツライチ、は専門用語チックな気分。

box5にfloatが設定してある時点で、floatする側、される側の理解が足りないのではないか、
と思うんだけど。>>584はその辺わかっているのかな？
わかんないんだったら、いきなり四つも五つもブロック並べようとしないで、
まず二個から始めるべきだと思った。

解決策も出さずにうだうだと・・・　おめでてーな。

>>601
>面（つら）を合わせる、は方言じゃないと思った。
でも、「つらになる」って用法は普通の日本語には無い。

それがCSSとどんな関係が・・・　　消えておくれ。

脱線してごめんなさい。

box4がbox2とbox3の下に来るのは、それより右にもう余地がないから
改行してそこに来ているだけじゃん。
で、box4にfloat:leftを書いても、box4の右に来るのは当然の結果でしょ（IEは違うかも）。

文書の内容にもよると思うんだけど、
1〜4 or 2〜4 or 2〜5 のどれかを大きくひとくくりにする、というのは駄目かね。>>584

>>605
>>592

>>584
<style>
body {padding:0px;margin:0px;}
.box1 {float:left;background-color:#997766;width:15%;height:800px;margin-top:0px;}
.box234 {float:left;width:80%;height:350px;margin-top:0px;}
.box2 {float:left;background-color:#445566;width:75%;height:150px;margin-top:0px;}
.box3 {background-color:#778899;height:150px;margin-top:0px;}
.box4 {background-color:#cc1234;height:200px;margin-top:0px;}
.box5 {float:left;background-color:#cccc34;width:5%;height:800px;margin-top:0px;}
</style>

<body>
<div class="box1"> box1</div>
<div class="box234">
<div class="box2"> box2</div>
<div class="box3"> box3</div>
<div class="box4"> box4</div>
</div>
<div class="box5"> box5</div>
</body>

IEでは>>592でやっても幅によってはbox5がbox4の下にいってしまうんだけどな。
>>586,592,607ともIEでは無理。FF等Gecko系なら全部問題ないけど。

>>584
全部足して幅100%のようなレイアウトにしない方がいい。
あとあなたの疑問はただCSSの理解不足です。
ブラウザはCSSの通り表示しています605がいってることを理解しましょう。

>>595
アドバイス感謝です。

レスいっぱいありがとうございます。
まず、「つらになる」ですが、
私は使っていますが、正しい日本語ではありません。
>>601が書いて下さっていますが、
「ツライチになる」が省略されたものだと思います。
「ツライチ」は、面（ツラ・めん）が同一レベルになる、あるいは1つになるという意味です。
今回、WEBという2次元のことについて書いているので、
「ツライチ」という表現は正しくないですが、
BOXという概念でいたので、「つらになる」と書いてしまいました。
わかってもらえるかと思って。
言いたかったのは、box5の上端がbox4の上端に揃ってしまう、ということでした。

で、本題の、書いて下さっているタグについてですが、
まだチェックできていないので、
今夜、もう一度よく読んで、やってみてから疑問点と併せて再投稿させて頂きます。
宜しくお願いします。

CSSでページの基本フォントを設定する方法を教えてください。

size: 12px
weight: 500
color: #666666
line-height: 18px

これをどのようにすればいいでしょうか？

<head>
<style type="text/css">
<!--
BODY{
font-size : 12px;
font-weight : 500;
color : #666666;
line-height: 18px;
;
}
-->
</style>
</head>

訂正

<head>
<style type="text/css">
<!--
BODY{
font-size : 12px;
font-weight : 500;
color : #666666;
line-height: 18px;
}
-->
</style>
</head>

>>611
全称セレクタ

*{ … }

>>612
ありがとうございます。背景画像も同じようにBODYの中に指定すればいいですか？

名前欄に fusianasan を指定するといいよ。

>>615
●基礎は解説サイト（>>5・かなりわかりやすい）で勉強してください。

アタックＮＯ．１　　（＠ヨ＠）

>>617
ありがとうございます。早速見てみます。
あとひとつだけ質問ですが、
>>613でアドバイスいただいた方法を試してみたのですが
table外ではスタイルシートの値が反映してるようなんですが
table内では反映されません。
table内では個別に指定する必要があるのでしょうか？

>614は試さなかったのかい？

<!--
* {font-size : 1200px; font-weight : 500; color : nulupo; line-height : -1em;}
-->

>>620
うはｗｗｗｗｗｗｗそれ無理ｗｗｗｗｗｗ

>>619　（どうしたものかと困惑しております）
何にスタイルを当てたいのか考えてください。

body, th, td {…} か * {…} で。

<OL>使うとどうしてもリストが右にずれてるよね？
アレをずらさないように表示できないものかね？

OLのmargin・padding指定をすればいいだけ。

>>578です
誰かわかりませんか？

すいません。質問です。

ブラウザ間の表示の違いについてですが、ＩＥでは普通に
表示されるのに、Ｏｐｅｒａで表示すると上部にスペースが
空いてしまいます。
これって、どのあたりが原因でしょうか？
（センタリングしたので、それが原因？）

>>626
できません

>>627
詳しいことはソースを見ないと解らないが
マージンの設定が起因である可能性が高い。

>>625
>>OLのmargin・padding指定をすればいいだけ。

すまん。もう少し教えてくれ。
例えば<LI>を使う場合

○○○○
　1.■■■
　2.■■■
　3.■■■

と、なるところを

○○○○
1.■■■
2.■■■
3.■■■

とやりたわけだけど
LI { list-style-type: decimal; padding: ■px ■px ■px ■px;}
どんな感じの数値を入れればOKなん？
色々試してみたけどなかなか左にずれてくれない・・○|￣|＿

>>630
(・∀・)ﾆﾔﾆﾔ

LI { list-style-type: decimal; padding: sugoipx futuupx sugoipx onipx;}

ごめん。できれば冗談抜きでお願い。

>>633
>>625

あのさあ、質問が無いからって無理やりネタ質問つくって笑えるやり取り書いて楽しませようとか
そういう余計な事はしないでいいからね。

>>634
解決。ありがとう

ul要素とol要素のブラウザごとの違い
http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

>635
見てるほうは結構楽しいよ。

>630
* {margin : 0; padding : 0; font-weight : normal ; font-style : normal; font-size : 100%;}
にしたあと個別に決めていけば？恐ろしくソースが長くなるけど[･∀･]

/ *
olやulの場合は {list-style : inside ;}も入れておいたほうが･･･
いいかどうかは自分で判断汁
* /

<ul><li><dl><dt>dt</dt><dd>dd1</dd><dd>dd2</dd></dl><li>

これ<li>の後改行はいってるように表示されるの直せる？IE6です．

最後のliとulとじ無しなのは見逃して…

マージンとパディングをいじれば多分直せる

じゃあ俺も便乗してリストの質問を一つ
リストスタイルに画像を指定すると、その後のテキストと縦方向にズレが発生するんだけど
これはどうやって矯正すればいいですか？

>>639　なぜバグ辞典も見ないで質問する？

li要素の子孫にリスト要素があるとリストマークが上方にずれる
http://cssbug.at.infoseek.co.jp/detail/winie/b028.html

>>642　なぜバグ辞典も見ないで質問する？

li要素でvertical-alignがテキストの配置に影響を与える(5.x/6.0)
http://cssbug.at.infoseek.co.jp/detail/winie/b170.html

スンません教えてください。
今度会社のホームページの更新をやんなきゃいけなくなったとです。
パソコンは１ヶ月前に生まれて始めて触った２７歳です。
使ってるのはWINDOWS、ＸＰというノート型のやつです。
で、ホームページビルダー８というＣＤみたいなヤツをわたされ
エクセルで社長が作った日記みたいなのを、かっこよく編集しろといわれました。
適当にいじってたら、何とかホームページビルダーの中にエクセルの内容を書き込めたのですが
以前の様式（私がいじる前）と、ぜんぜん違います。
社内に聞ける人はいないので、教えてください。
どうやったらエクセルの内容をホームページに出来るんでしょうか？

かなりアフォな質問かも知れませんがお願いします。

>>645
スレ違い

ホームページビルダースレッドその23♪(・ω・)ノ
http://pc8.2ch.net/test/read.cgi/hp/1116775944/

Webサイト制作初心者用質問スレ Part 135
http://pc8.2ch.net/test/read.cgi/hp/1118025479/

>>645
スレ違いです。こちらへどうぞ。

Webサイト制作初心者用質問スレ Part 135
http://pc8.2ch.net/test/read.cgi/hp/1118025479/

>>642
ttp://www.stylish-style.com/csstec/basic/m-list.html
ここの解説のように背景にするといいよ。
リストが長くなって、数行になるとちょっとださいけど。

文字と文字の間隔を開けたくて、
   letter-spacing: 0.1em; 
のように指定してみたのですが、IE6での挙動がおかしいです。

確かに間隔は開くのですが、副作用なのか何なのか、
1行おきの表示ができなくなります。
つまり、二つ連続した <br><br> が、<br> 一つの場合と同じように表示されます。

これってどうしようもないんでしょうか？

ちなみにMozillaでは何の問題もありませんでした。

>>649

/* Win IE バグ対策 */
br {
letter-spacing: 0px;
}

>>650
どうもありがとうございます。解決しました。

そしてたった今、バグ辞典スレの存在を知りました・・・orz

だいたいやね、二つ連続した <br><br> つーのがいらないやね。

全くだ。ちゃんとしたhtmlを書いてれば、発現しないはずのバグだよな。

ごもっともなんですが、
掲示板用のスタイルシートなんですよ。
この2ちゃんと同じような

おぬし、letter-spacingを指定するとMacIEでバグると承知の上での狼藉か。>>649

これね。
http://cssbug.at.infoseek.co.jp/detail/macie/b014.html

classでpage_topを指定しておりますが、
hover等が無反応でマウスオーバーしても何も変化しません。
記述方法が間違っていたら教えて下さい。

CSS----------------------------------------
.page_top A:hover {
color: #ffffff;
text-decoration: none;
}

.page_top A:link {
color: #6a5acd;
text-decoration: none;
}

.page_top A:visited {
color: #6a5acd;
text-decoration: none;
}

.page_top A:active {
color: #ff0099;
text-decoration: none;
}

HTML----------------------------------------
<TD class="page_top">
<a href="#page_top">このページのトップへ戻る</A>
</TD>

さっき>>655を読んで、今まさに>>656のページを見てきたところです。
崩れるって、どんな風に崩れるのでしょう？

とりあえず、656の回避策を入れておこうと思います。ありがとうございました。

>>657
:hover疑似クラスは宣言順序に注意が必要です
http://www.mozilla.gr.jp/standards/webtips0012.html

それにしても、テーブル・レイアウトかよ。

>>659
解決致しました。
ありがとうごじいます！
やっぱフルCSSじゃないとダメですか？
ブラウザ依存が気になってしまうので･･･。

テーブル・レイアウトこそブラウザ依存であるから駄目なのでごじいます。

↑そんなことはないだろ

<TD class="page_top">
<a href="#page_top">

　　IDはどこへやら・・・

>>663

こっちの記述が正しいということですか？

CSS----------------------------------------
#page_top A:hover {
color: #ffffff;
text-decoration: none;
}

#page_top A:link {
color: #6a5acd;
text-decoration: none;
}

#page_top A:visited {
color: #6a5acd;
text-decoration: none;
}

#page_top A:active {
color: #ff0099;
text-decoration: none;
}

HTML----------------------------------------
<TD>
<a href="#page_top" id="page_top">このページのトップへ戻る</A>
</TD>

はぁ？

レス読んじゃいねーし　だめだこりゃ

これが自己参照というやつですか。
オブジェクト指向？

とりあえずIDの意味と指定法を知ってから書こうね。

詰んない釣りに釣られる

質問者が回答者を試すスレというのはここですか?

<TABLE border="0">
<TBODY>
<tr>
<td align="center">01</td>
<td align="center">02</td>
<td align="center">03</td>
</tr>
<tr>
<td align="center">04</td>
<td align="center">05</td>
<td align="center">06</td>
</tr>
</TBODY>
</TABLE>

こんなHTMLだと
┏━┳━┳━┓
┃01┃02┃03┃
┣━╋━╋━┫
┃04┃05┃06┃
┗━┻━┻━┛
って感じのテーブルになります

01　02　03
━　━　━
04　05　06
━　━　━
って感じにしたいのですが
横線と横線の間を15px離したいのですが指定してもうまく離れてくれません。

cssfile.css に
table td{
border-bottom: solid 1px #000000;
margin: 0px 15px 1px 15px;
padding: 5px 5px 1px 5px;
}
と書いてます。

わけて書いたらなんか変になった
>>671 のテーブルを >>672 のようなテーブルにしたいのです。

border-spacing使えれば楽なんだけどIEが対応してないからね。
tdの直下に(本来は無意味な)divでも置くという手もあるけど
それするならHTMLでcellspacing指定するのと大差ないかも。

タイトルの背景の画像を動かしたい場合はどう設定すればいいのでしょうか？

背景にアニメーションGIFを使う

675です。すんません。質問の仕方を間違えました。
marqueeで文字を左から右に動かしたりするみたいに
タイトルの背景の画像を動かしたいのです。

>>674
tdのborderを太くしたりしたらできるかも？と思って試してみたが意味なし
先週からいろいろスタイルシート関連のサイトで
それらしいのを調べても見つからなくてかなり苦戦してます・・・

>>677
スクリプト使ったら？
そうするとなるとスレ違いだけど。

>>671-673
http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html#table

table td{
border-bottom: solid 1px #000;
margin: 0 0 1px 0;
padding: 5px 5px 1px 5px;
border-right: solid 15px #fff/*背景色*/;
}

>>9
>HTML でのレイアウト指定の、 CSS での指定との対応表
>　http://deztec.jp/site/tips/page/p0037.htm

移転してる。↓
http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html

>>680
border-right: solid 15px #fff/*背景色*/;
の部分ですが、背景色を指定しましたが壁紙と重なるとかなり目立ちます・・・
なんとかなりませんか？

んなもん自分でなんとかしろつーの！！　この大アホが・・・

学習能力　0　かな？

bodyに指定してるんだか何だか知らんけど、tableにもbackgroundを指定すればぁ？　>>682

div指定ごとにa:hoverなどの設定を変更することって可能ですか？
ふざけた質問だったらスマセンです・・・

ふざけた質問だがもちろん可能だ

li { width: 5em; background: gray; word-break: break-all;}

<ol>
<li>あああああああああああああああああああああああああああああ</li>
<li>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>？？？？？？？？？？？？？？？？？？？？？？？？？？？？</li>
<li>???????????????????????</li>
<li>////////////////////</li>
<li>[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[</li>
<li>(((((((((((((((((((((((((((((</li>
</ol>
1は width:5em; で改行されます。
2はそれプラス word-break:break-all; で改行されます。
3以降の記号の羅列が改行されません。
これらを指定した幅の中で改行させるにはどうしたら良いですか？

>688
くやしく

>>688
ブラウザとDTD書いてみ

すみません。 IE6で XHTML 1.0 Transitional です。
他のブラウザだと背景だけ5emで、そこから文字がはみ出した状態になります。

>>688
word-break:がIEの独自仕様ってことは理解してる？

.div a{
background-color:#FFFFFF;
border:solid #8a409d 1px;
margin-right: auto;
margin-left: auto;
position:relative;
width : 720px;
height:120px;
text-align: left;
z-index:1;
}
.h1{
position:absolute;
top:0px;
left:0px;
height:80px;
width: 240px;
z-index:3;
}
.ul {
position:absolute;
width : 720px;
height:120px;
margin: 0;
text-align:right;
list-style:none;
top:0px;
right:0px;
z-index:2;
}
この状態で表示させると、z-indexが機能せず、上から記述順で表示されてしまうのですが
どこが不味いのでしょうか？

すみません、記述が無茶苦茶だったので出直してきますorz

>>692
すみません、それじゃ対処方法は無いってことでしょうか…

>>695
ごめん俺のレベルじゃ無理。

しかも物凄いイージーミスでした吊ってきます∧||∧

//
でコメントアウトできるって言う解説サイトを見つけたんだけどちがうっぽい・・・。
IEもFFもDreamWeaverもコメントアウトとして判断してくれないみたい。

だしょう？

どうしようもないんで overflow: hidden; で隠してしまいました。

>>698
確かMozillaとOperaは//の行を読み飛ばすはずだけど…
でもこれは未対応のプロパティか何かだと判断して読み飛ばすだけなので
いずれにしても正しいコメントアウトは/* */だけ。

CSSのコード内で同じ意味の持つ値を使うことはよくあるのですが、
例えばC言語のような
#define MENU_WIDTH 200px
のような定義というのはCSSでは出来ませんでしょうか？

>>702
いまんとこ無理。

IE7が夏に出るけど、2010年までサポートされるWindows 2000向けにはIEの新しいバージョンを投入しないって、これは、MSによる、さりげない嫌がらせですか？

やっと、最近ネスケ４はテキストブラウザと同じ扱いになります(対象外)と堂々と言えるようになったのに

つか、IE7が6並みに※という可能性もあるけど…

うっそ。Win2k好きなのに。つか
ｽﾚﾁｶﾞｽ

ｸﾞﾚｰﾄﾁｷﾝﾊﾟﾜｰｽﾞ

>>703
ありがとうございます。

ｈ１などの見出しの下に文章を入れた時、h1部分と文章との行間隔が
広くなってしまうのはしょうがないのでしょうか？
狭くしたい時、いくつかやり方があるように思えるのですが、
一番スマートなやり方を、どうか、この初心者君に教えて下さい。

どうぞよろしくお願いします。

<h1 style="margin-bottom:0px;">

Opera と Firefox では、サイドバーが表示できますが、
IE では、サイドバーが表示されません。
上手に表示させる方法を教えていただけるとうれしいです。
http://blog.livedoor.jp/tanahata/

３つのボックス要素（div）A,B,Cが順に並列要素としてあるとして、
これを任意の順番に、例えばC,B,Aの順に縦に表示するにはどのようにすればよいのでしょうか？
ただしA,B,Cのいずれにもテキストが含まれており、よって縦サイズは可変であるものとします。
もちろん(X)HTMLはいじれない条件です。
縦サイズが可変の条件ではabsoluteは適当でないし、CSS2では不可能なのではないかとも思うのですが。

意味がわからん

>>711
＞３つのボックス要素（div）A,B,Cが順に並列要素としてあるとして、
これのソースを書け

>>711
スタイルシートに対応していいないブラウザのことを考慮すれば
そのケースの場合、ソースはC、Ｂ、Aの順にしなければおかしいのでは。
それができれば全く問題ない話ですよね。

ありがとうございます。
>>714
まずスタイルシートに対応していないブラウザは考慮する必要はありません。
コトの主眼は、HTMLソースからデザイン要素を分離することにあります。
またそれがスタイルシートのそもそもの理念かと思います。
HTMLに手を入れずにデザインのリニューアルを行えるよう、HTMLおよびCSSを書きたいわけです。
ただ、いろいろ調べてみると、実際にはデザイン要素を分離できていないHTMLを多く見受けますし、
CSS2自体まだそれを実現する十分な機能を有していないようにも思えたので。

<div id="a">省略</div>
<div id="b">省略</div>
<div id="c">省略</div>

>>711
<html>
<head>
<style>
.a {position:absolute; top:60%; height:30%; width:100%;border:1px solid #00f;}
.b {position:absolute; top:30%; height:30%; width:100%; border:1px solid #0f0;}
.c {position:absolute; top:0%; height:30%; width:100%; border:1px solid #f00;}
</style>
</head>
<body>
<div class="a">
aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
</div>
<div class="b">
bbbbbbbbbbbb bbbbbbbbb bbbbbbbbbbbbbbbbb bbbbbbbbbbbbbbbb
</div>
<div class="c">
cccccccccccc ccccccccc ccccccccccccccccc cccccccccccccccc
</div>
</body>
</html>

>712
>715のソースがあったとして 表示を
|---|
|CCC|
|BBB|
|BBB|
|B__|
|AA_|
|---|
としたい ということだと理解した

>715
現状CSSのみでの実現は不可能です
縦横幅決めてフォント決めてフォントサイズ決めてなどとやれば
可能かもしれませんが 非現実的でしょう

とはいえ「構造上ABCの順『でなければならない』
かつ表示はCBA『であるのが望ましい』」というのは どういう内容？
想像力が足りないのでイメージできません

>716
それは（高さが可変である以上）スクロールバーが出ることを許容？

不可能ですと言い切ってしまうのは問題だな
「可能かもしれないけど おそらく不可能だし 少なくとも僕にはわかりません」

>>716は>>711の条件すべてを満たしている。
よって>>711は勉強不足。

他でも聞いているのですが・・・
blogにて、
メインコメントの部分のフォントサイズなんですが、
ＰＣのブラウザの文字表示サイズを最大に変えると、
ひどく大きくなりすぎてしまい文字が重なってしまいます。

ブラウザのサイズ表示に左右されすぎないように
するにはどうしたらよいでしょうか？

やや初心者ぎみなのですが、どうかよろしく
お願いいたします。

>>720
無理。

>>721
え？そうなんですか！？
他人のホムペとかだと、ブラウザで文字表示サイズ
変更しても極端には変わらなかったんですが、
自分のblogは極端にデカくなってしまうので
不思議です。

>>717
やはり現状のCSS2ではまだ不可能なようですね。
ちょっと具体例を出しますと、「トピックパス」いわゆる「パンくずリスト」ってありますよね。
いろいろなページをみていても、あれのデザイン上の位置って実に様々です。
つまり、デザインリニューアルに際してもそれだけ位置が変わる（変えたくなる）可能性があるわけです。
もちろんトピックパス以外でも、タイトルやサブメニューなどもデザインによって結構位置が異なります。

このスレの回答者の殆どは、真面目で親切な人が多いけど
若干名、感じ悪いやついるね。

>>720
フォント指定どうやってるか書けよヴぁか

>>724
俺のこと？

>>724

じゃあ言わしてもらうとね、
>>720は初めっから堂々のマルチポスト宣言。
cssの質問なのにcssの情報ゼロ。
>PCのブラウザ
環境の情報もゼロ

どうやって答えろと？

>>727
情報不足ですみません。
blogはＦＣ２というレンタルサーバーで、
テンプレートもそこの借り物ですが、ＨＴＭＬ
は変更可能なものです。

>>728
藻前は↓に行ったほうがいいと思う
http://pc8.2ch.net/test/read.cgi/hp/1106209097/

ブラウザはＩＥです。
ＨＴＭＬの何処をいじれば
よいかわからなかったのですが
スレ違いでしたか。スマソ

* { margin : 0 ; padding: 0; }
#header { width : 100% ; height : 50px; }
#navi { position : absolute; top : 50px; right :1 8px; width : 212px; }
#main { margin-right : 250px; }

で、Mozilla系やoperaでは問題ないのですが、
何故か、IEやILunascape では横スクロールバーが出てしまいます。

bodyに{width:100%}を入れたら、WIN IE6とLunascape 2では横スクロールバーは消えましたが、
MAC IE5では、未だ横スクロールバーが出ます。
#naviの right:18px; を right:30px; にしたら、MAC IE5でも横スクロールバーは出なくはなるのですが、

#naviの right:18px; のままで、MAC IE5の横スクロールバーを出さなくする方法はありますでしょうか？

因に宣言はMTデフォの<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">です。

マジで困ってます。　よろしくお願いします。

>>731
超FAQ

「IE　XHTML 1.0 Transitional　バグ」　でぐぐれ

>729
俺の巣に誘導するな

>>731

#navi {
right: 30px;
margin-right: -12px;
残りは同じ
}

ではダメなんかな？

>>715 >>723
スタイルシート自体は、データ構造とスタイル記述を分離させようということから生まれたわけです。
結果としては、デザインスキン・デザインテンプレート的なスタイル変更ができるようになりますが
それが主眼というわけではないです。
ページのみではなく、データとしても使えることを目指したものです。
スタイルシート非対応環境でも問題のないソースの方が正しいというか、望ましいでしょうね。

もちろん、あなたの目的をどうするか、ということは自由ですが。

CSSだけで完全なレイアウトができるかという問いなら、それは無理ということになるでしょうな。

フルCSSについての初歩的な質問で申し訳ないのですが、そもそもフルCSSの定義ってなんですか？
自分的には、タグの属性を全てCSSで指定することだと思っていたのですが、それもいまいち違うようで・・・
使ってOKなHTMLタグってどこまでなんでしょう。
いろいろ調べてみたんですが、そういうことがはっきりと書かれているサイトが見つかりませんでした。
すみませんが、よろしくお願いします。

>>736
>>1を読んでもわからないスキルの人には教えようがありません。

>>737
すんません、一通り目を通してはいるのですが、よくわかりません。
というのも、今のクライアントからフルCSSでという注文があって、もしソースに対する指摘があった場合にフルCSSに準拠しているということを示したいのです。
しかし、その基準が判らないという状態で・・・
もし自分が思い違いをしていたら、ご指摘いただけるとありがたいです。
恐れ入りますが、よろしくです。

そもそも「フルCSS」という言葉の定義がないことにはな……
HTMLのプレゼンテーション関連要素/属性をまったく使わないってことか？

議論はよそで。

>>739
ありがとうございます！
どうりでフルCSSという言葉で引っかからないなあとは思ってました。
ちなみになんとなく解決したのですが、フルCSSとは「論理構造と見た目が分離できていること」だそうです。
ﾀﾝｸｽでした！！

クライアントがどの程度のスキルかによりそうだね。
多分、テーブルレイアウトはダメ程度のような気がする。

>>742
クラ、とくに暇な広報のweb担当や代理店の中のひと、が中途半端に雑誌などで
CSSレイアウトのコトを聞きかじって、生半可な知識で言ってくるケースが
たまにあるよなあ。

そんなクラとは、カスイケリンク集とか一緒に見ながら「こういうコトだよね？ね？」
とコンセンサスをとっておくのが大事かと思います。

>>736
よくマルチで怒られなかったな。
そんだけｱﾎばっかということかな、ここは？

質問です。

td内にテキストを流していて、ジャスティファイさせたいのですが、
td幅はフォントサイズの倍数、例えば12*10=120pixelにもかかわらず、
mac IEだと、１文字分手前で改行されていまいます。

そこでcssで　text-align: justify; text-justify:auto;指定しても
ジャスティファイされません。

どうしたら良いのでしょうか？

フォントを書かずしてなにを・・・

>>745
IEは計算方法が標準と異なります。
テーブル内のtextのマージンを0、white-space: nowrapにして、
padding: auto;を使うとかテーブルの幅を調整しするなど工夫してください。

xhtmlじゃないんか？

>>744
>そんだけｱﾎばっかということかな、ここは？
746とか748を見る限りそうみたいだね。

>>746
すみません。全角フォントです。とりあえず今、基準にしてるのがosakaです。

>>747
white-space:nowrapにするとレイアウトが崩れてしまいました。
１行で納まりつかない長い文章だったので。説明不足ですみませんでした。

自分でも色々調べてみたらtext-align、text-justifyは
Mac IE5は非対応とのことでした。
失礼しました。

といか>>746は的を得ていると思うが。
120pxの幅に12pxのテキストを入れるとかいっても、スタイルうんぬんより
フォントの方が重要だと思うよ。プロポーショナルなのかシングルスペースなのかで全然変わるから

>>751
全然的を得て無いよ。

的は射る、当は得る。

シングルスペース ってのはまた新しい概念だ

うん、指１本分の隙間だ。

<img> 要素に対して、画像が読み込まれているかどうかによって
異なるスタイルを適用させたいのですが、CSS のみでできますか?

可能ならその方法を教えてください。よろしくお願いします。

http://jukengo.mpage.jp/sample.html

aは何故にはみ出すのでしょうか。

え？つまり、<img src="url">の画像urlが無くなってたらスタイルを変えるって事か？

>>757
連続する半角英数は一単語として扱われるから

はみ出すのが正しくて
勝手にボックスを拡張する IE がうんこ

お世話になります。

<iframe>で枠というか、影の部分を消したいので
frameboader="0"にしても、消えません。

そこでCSSでborder: 0px noneにしても
Win IE6で消えてくれません。

消すにはどうしたら良いのでしょうか？

>>734
ダメでした。

>>732
ググって見つけたのが、親要素に幅をで
body{width:100%}を入れて、WIN IE&とlunascapeで…

とおもったら、肝心な事を忘れてました。
Mac IE5はXHTMLサポートしてませんでした。

たしかに、超FAQ でした。
マジでアホだ　＞　オイラ

>>760
× frameboader
○ frameborder

>>762
うおお。感謝でございます。全く目が行かなかった…

>>758
はい。URL が有効でない場合を含めて、<img> が画像として
置換表示されているか、あるいは alt 属性の値が表示されて
いるかでスタイルを変えたいということです。ブラウザの設定で
画像を自動的に読み込まない場合もあるかと思います。

具体的には、リンク画像をわかりやすくするために 2px solid の
border を付けてるんですが、画像が表示されていないときは
この border には意味がないので、none にして普通のアンカーの
ように見せたいんです。

こんな感じです。↓
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title></title>
<style type="text/css">
a:link img, a:visited img {border: 2px solid;}
</style>
</head><body>
<p><a href="アドレス"><img alt="リンク先の名前" src="banner.gif"></a></p>
</body></html>

>764
70％程度、無理。
どうやっても環境に左右される。

>>764
JavaScriptでbanner.gifの有無を調べれば簡単だけどな。

画像を自分の鯖にアップすれば済むのでは？

またアホが湧いてきた。

質問です。
画像をリンクすると枠線が表示されてしまいますが、
この枠線の色や線種、太さをスタイルシートで指定するには
どうしたら良いでしょうか？

<TABLE>
<TBODY>
<TR>
<TD><A href=".link1.html" ><IMG src="./pic1.gif" alt="GIF画像1"></A></TD>
<TD><A href=".link2.html" ><IMG src="./pic2.gif" alt="GIF画像2"></A></TD>
<TD><A href=".link3.html" ><IMG src="./pic3.gif" alt="GIF画像3"></A></TD>
</TD>
</TR>
</TBODY>
</TABLE>

今度はスタイルシートか。
style="border: none;"

img { border: none; }

>>769
一回学んでからこいよ
ふざけんのもいい加減にしろ

>>769
<TD><A href=".link1.html" ><IMG src="./pic1.gif" alt="GIF画像1"　ここに「border="0"」を付け足すといいよ></A></TD>

>>772
学んでもわからん奴はわからんだろうに。
質問答える気ないなら他行けや。

>>771
ありがとうございます。
むむ、外部CSSファイルに
IMG {
border:none;
}
を指定したのですが、何故か枠線が消えません。
他に何か原因があるのでしょうか？

>>773
ありがとうございます。
773サンの記述方法で消せるというのは既に理解していたのですが、
ただ、できればCSSでborderを解除したいのです。

>>774
cssファイルは呼び出してるか？

border: 3px solid #69c;

線種の変更などは、
スタイルシート　border
で検索したらすぐに見つかる

>>765-767
どうもありがとうございます。
今回の件ではリソースが有効かどうかが重要なのではなく、
ユーザーが画像を読み込む設定にしていて、実際に画像を
読み込んだかどうかを疑似クラスか属性セレクタのような形で
選択できるか知りたかったのですが、無理なようですね。
紛らわしい書き方をしたことについてはお詫びします。

>>771,776
記述に誤りがあり、771サンの指定で枠線を消すことができました。
また、776サンの指定で色を付けることができました。
線種等も調べて、思ったとおりに動かすことができました。
ありがとう御座いました。

>>774>>778
おまえは今日からボーダーマスターな

>>769
ありがとうございます。
■■■■■■とかも一単語で扱われるorz。

がいしゅつ（←何故か変換できない）だったみたいです。ごめんなさい。

マスターオブボーダーを称えるスレになりました。

>>781

なにそれ

>>779
子供は他へお行きなさい。

>>780
既出（きしゅつ）を「がいしゅつ」って読むのって、わざとでもわざとじゃなくてもださい。出直してこい。

もういないんだけど・・・

だぁーー

>>784
これって新しい反応の仕方？
それとも単なる2ch初心者？

てか、がいしゅつなんて単純に馬鹿っぽくねーか？最近はそれが正しい読み方と思ってる奴らもいるし。

>>788
なるほど。
それは言えてるな。

この流れ散々ｶﾞｲｼｭﾂ

どうか教えていただけるとうれしいです。
よろしくお願いします。

サイドバーなんてものは俺は知らない。

http://www.mypress.jp/v2_writers/mamabutterfly/story/?story_id=1041287
↑こういうdivを半透過するのってどうやればいいんですか？ソースいじくって調べてみたけどわかんないです。。

>>793
オレには半透明に見えていないから、おそらくフィルタ。
MSIEの独自拡張。

MSIE意外でも出来る方法。
PNGのアルファチャンネルを指定したベタ画像をdivの背景にして並べる。

>>794
>>795
ほんとだ、alphaってのが使ってありました。。そしたらpngでやってみます。ありがとう！

pngの半透明はIEが未対応・・

IEではフィルタ使ってそれ以外ではPNGに分岐させるとか・・・

>wood
「どうやって分岐させるんですか？」は質問するんでねーど

スタイルシートで質問があります。

ユーザーごとのブラウザの「文字のサイズ」を効かなくするために
文字サイズを固定するのが好きなんですけど

<li>

の○だけが固定できません。
cssファイルを読む形で実装してるのですが
どうしたらよいでしょうか？
よろしくお願いします。

あぁもちろんulも試してみました。
↓こんな感じです。

ul {
font-family: times, serif;
font-size : 9pt;
line-height: 120%;
}

li {
font-family: times, serif;
font-size : 9pt;
line-height: 120%;
}

弱視のやつらは見なくていいとでも・・・

>>800
＞○だけ
○って何？
リストマークのこと？

>>803
あ、そうですリストマークです。
説明不足ですみません。
あと ul とか li の属性に font-size はありませんね。

>>800
WinIE系以外は変えられるから無意味だな。
list-styleで画像などで工夫しても、フォントやUAによってずれる。
多少のずれが生じても大丈夫なように余裕を持って作るべし。

>>805
なるほど画像で固定する手もありましたね。
まあ簡単にできないならそこまで
無理することもないので妥協します。
ありがとうございました。

>>797
対応してるよ

ガチガチに固定はいい加減やめてﾎｽｨ

>>808
何で？

幅を最低限確保しながらブラウザサイズに合わせることはできないですよね？
画像よりブラウザの幅を狭くすると崩れてしまうけど、
幅固定はしないでおきたいんです。

>810
WinIE未対応でいいならmin-width
多分よくないんだろうけど

>>810
幅を%指定で、中身のブロック要素にoverflow指定を入れてみるとか。

まだ試してないですけど
色々情報ありがとう御座います。

>>810
min-width

ｵﾏｲって言う奴は・・・

>>810
意図した最小幅をwidthに指定した、ダミーの<div>をつっかえ棒として入れとけば、
IEでもmin-widthっぽいのが出来るんじゃなかろか…
<div>
<div style="width:100px"></div> <- つっかえ棒
本来のコンテンツ
</div>

中身が空じゃ、つっかえ棒にならないUAもある。

頭の中が空だから、自分だけ見えればいいのよ。

この方法↓が有名
テンプレに入れるといいかもね。

IE で min-width を指定する方
http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html

リスト（<li>）にCSSを適応して、メニューを作成しているのですが

・名前

となっているのを、”・”と”名前”の間を4px空けたり、・を中央
ではなく、上にしたりする事は出来ないのでしょうか？

>>820
>”・”と”名前”の間を4px空けたり
<ul> に list-style-position: outside; 指定。リスト全体の位置もここで。
<li> に（paddingとかで）横の位置指定。

>中央ではなく、上にしたり
<li> で（vertical-alignとかで）文字の縦の位置を工夫。（邪道）

UAによって必ずしも思い通りになるとはかぎらないので、
結構ドツボにはまった経験がある。
お勧めできない。