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

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

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

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

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

関聯リンクは>>2-10
【関連スレ】【仕様書】【CSS検証】>>2
【解説など】>>3-4
【FAQ】>>5-9
2Name_Not_Found:2006/11/26(日) 18:50:36 ID:???
【関聯スレッド】
CSS/DHTMLバグ辞典スレッド【第5版】
 http://pc8.2ch.net/test/read.cgi/hp/1144494359/
代替スタイルシートに萌え〜
 http://pc8.2ch.net/test/read.cgi/hp/991400015/l50
独自拡張、草案段階のCSSについて語れ
 http://pc8.2ch.net/test/read.cgi/hp/1019912046/l50
* CSS[適用="2ch"]{ イケてるスタイルを:"作れ"}
 http://pc8.2ch.net/test/read.cgi/hp/1038678267/l50
CSSでイケてるデザインサイト 37
 http://pc8.2ch.net/test/read.cgi/hp/1162545373/

【仕様書】
CSS1の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS1
CSS2の仕様書の原文(英語)
 http://www.w3.org/TR/REC-CSS2
CSS1の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/css1/toc.htm
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css1/rec-css1.html
CSS2の仕様書の邦訳(日本規格協会訳/個人訳)
 http://www.y-adagio.com/public/standards/tr_css2/toc.html
 http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html

【CSS検証】
W3C CSS 検証サービス
 http://jigsaw.w3.org/css-validator/
3Name_Not_Found:2006/11/26(日) 18:50:48 ID:???
【解説など】
・ごく簡単なHTMLの説明
 http://www.kanzaki.com/docs/htminfo.html
・ZSPC - Style Sheets Reference
 http://www.zspc.com/stylesheets/
・ZSPC - CSS2対応状況ガイド
 http://www.zspc.com/documents/css2/
・CSS1テストスイート
 http://www.doraneko.org/css1test/
・ばけらの CSS リファレンス
 http://www.ne.jp/asahi/minazuki/bakera/html/css/reference
・K@tsukun's PAGE! > CSS Reference
 http://hp.vector.co.jp/authors/VA022006/css/index.html
・K@tsukun's PAGE! > 付録:CSS対応状況表
 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser.html
・CSS Laboratory対応表・一覧
 http://is.vis.ne.jp/charts/index.xhtml
・ブラウザのHTML4/CSS対応度テスト
 http://homepage1.nifty.com/emk/moz/browsertest.html
・CSSバグリスト@CSSバグ辞典スレッド
 http://cssbug.at.infoseek.co.jp/index.html
4Name_Not_Found:2006/11/26(日) 18:51:02 ID:???
【解説など】
・Web標準化Tips(特に「HTML/CSSのよくある誤解・ミス」)
 http://www.mozilla.gr.jp/standards/webtips/index.html
・ブラウザによる振り分け(JavaScriptを使用しない方法)
 http://east.portland.ne.jp/~sigekazu/css/boxm.htm#ua
・Web Site 作成支援 - What is CSS?
 http://www.nextindex.net/web/CSS/index.html
・Academic HTML::CSS2
 http://www.tg.rim.or.jp/~hexane/ach/
・『スタイルシートWebデザイン』ボランティアHTML化版。
 http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/
・スタイルシート用語集
 http://www.mitsue.co.jp/case/design/c_index.html
・IE で min-width を指定する方
 http://www.lucky-bag.com/archives/2005/05/ie_minwidth.html
・CSSでイケてるデザインサイトリンク集
 http://ike.s33.xrea.com/
・( ´∀`)< CSS でイケてるデザインサイトリンク集2
 http://www.geocities.jp/cas_ike2/
・* CSS { イケてるスタイルを:"作れ";} 発表所
 http://web.archive.org/web/20030415121122/http://strict.jp/~sappari/2ch/css.php
5Name_Not_Found:2006/11/26(日) 18:51:17 ID:???
【FAQ】
Q1: IEでは大丈夫なのに、Netscape6 以降で見ると横スクロールバーが出たりするが?
A1: Windows版 Internet Explorerのボックス・モデルが間違った実装だからです。
「width と height の計算方法の実装の違いについて」参照。
 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#ref-width-height
width(height)は、要素の内容領域の幅(高さ)を指定するプロパティですが、
WinIE等では、ボーダー領域 + パディング領域 + 内容領域 の寸法で計算されます。
Netscape 6以降やMacintosh版 Internet Explorer 5 の計算が正しい。
WinIEもver.6 からは標準準拠モードにすると仕様通りに計算してくれます。
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic3
参考「IEとNNのBOXの計測方法の違いについて」
 http://www.fromdfj.net/html/border2.html

Q2: tableなどブロック要素をセンタリングするには? text-align:center;を指定しても Netscape6(or7)ではなりません。IEでは中央寄せになるのに……
A2: IEの実装の誤りです。詳しくは下記(特に5.)をご覧ください。
1.'text-align'に関する考察
 http://anslasax.net/css-make/t-a/index.html
2.IE5.5とNetscape6のCSS - 中央寄せ
 http://tancro.stp-1.com/stylesheet/n6_center.html
3.Internet Explorer 6におけるCSSの拡張
 http://www.microsoft.com/japan/msdn/ie/ie60/cssenhancements.asp#cssenhancements_topic6
4.Tableのセンタリング
 http://members.jcom.home.ne.jp/jintrick/Personal/css_miss_table.html
5.ブロックレベル要素をセンタリングする方法
 http://www.mozilla.gr.jp/standards/webtips0004.html
6Name_Not_Found:2006/11/26(日) 18:52:33 ID:???
【FAQ】
Q3: CSSで段組するには?
A3: 下記などを参照して下さい。
CSSを用いた段組の作成のコツ
 http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
 ttp://web.archive.org/web/20031005195659/http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラムデザインの実現
 ttp://web.archive.org/web/20040603063133/http://shiten.s9.xrea.com/etc/stylesheet/multi_column.htm
スタイルシートでマルチカラム・デザインを実現する方法
 http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
 http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
試驗場 - 段組(position版)
 http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと (floatによる段組の例)
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと(Netscape4でも崩れない段組みの実例)
 ttp://web.archive.org/web/20041001014138/http://homepage3.nifty.com/fores/
リストを用いたレイアウト
 http://css.maxdesign.com.au/index.htm
7Name_Not_Found:2006/11/26(日) 18:52:53 ID:???
【FAQ】
Q4: なんかフロートの表示が崩れるみたいなんですけど?
A4: まずclear忘れがないかを確認してください。
floatさせる要素にはwidth指定が必須(img要素以外)。抜かすとMacIEやOperaでの表示は保証できません。WinIEは勝手に補ってくれるだけです。
 http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html
またfloat:left;で回り込むのはテキスト(imgを含む)だけです。ブロック自体を横並びにするには、後続要素にも“float:left;”なり“margin-left:(浮動要素のwidth);”なりを指定する必要があります。WinIEの間違った実装で誤解が多いので注意。
 http://cssbug.at.infoseek.co.jp/detail/winie/b054.html
これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
 http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
 http://cssbug.at.infoseek.co.jp/detail/winie/b079.html
 http://cssbug.at.infoseek.co.jp/detail/winie/b053.html

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

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

Q7:背景画像を二つ指定するにはどうするか。
A7:background-imageは一要素に一つだけ。要素を重ねるなど工夫しませう。
8Name_Not_Found:2006/11/26(日) 18:53:09 ID:???
【FAQ】
Q8.dt・ddを横並びにしたいのですが。(会話文など)
A8.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
 http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

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

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

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

Q12: いままでHTMLでやってた××をCSSでやるにはどうすればいい?
A12: 下記をご覧あれ。テーブル・レイアウトは段組のFAQ(A3)を見なさい。
「いままでの HTML との対照」
 http://www.tg.rim.or.jp/~hexane/ach/fscs/fscsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/sfcs/sfcsa1.htm
 http://www.tg.rim.or.jp/~hexane/ach/tocs/tocsa1.htm
HTML でのレイアウト指定の、 CSS での指定との対応表
 http://deztec.sakura.ne.jp/x/01/tips/page/p0037.html
9Name_Not_Found:2006/11/26(日) 18:53:26 ID:???
【参考】
 IEの position:absolute; のバグを利用した擬似フレーム

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

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

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

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

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

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

《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
10Name_Not_Found:2006/11/26(日) 19:35:35 ID:???
>>1 乙!
11Name_Not_Found:2006/11/26(日) 19:57:51 ID:khziOUOb
段組したDIVのブロックの下にCSSで極細HR書くと、
IEではほどよい位置なんですがFirefixだと上の段組にべったり張り付いてしまいます。

hr {
border: solid 1px #ffffff;
border-top-color: #898989;
color: #ffffff;
}

これに何を足せば両ブラウザで同じ(きれいな)見え方になるんでしょうか?
12Name_Not_Found:2006/11/26(日) 20:42:20 ID:???
>>11
他でmargin:0;にしてるからでしょ。hrに指定するべし。
13前スレ976:2006/11/26(日) 21:59:48 ID:???
自己解決しました。CSS2ではUA依存の模様・・・。どうもありがとうございました。
http://www.y-adagio.com/public/standards/tr_css2/tables.html#height-layout
14Name_Not_Found:2006/11/27(月) 00:14:01 ID:ae66mXe8
javascripをリンクにしていした
要素にa:hoverを擬似クラス付けても効果がないのですが
これはやりかたが違いますか?
15Name_Not_Found:2006/11/27(月) 01:25:47 ID:???
日本語でおK
16Name_Not_Found:2006/11/27(月) 01:41:20 ID:???
A〜Dを

A B C
A B
A DDD

という配置に並べたい(DをAの右でBの下にしたい)のですが、

.A { float: left; width:1em; }
.BCD { margin-left: 2em; }
.B { float: left; width: 1em; }
.D { clear: left; }

<div class="A">A A A A A A A</div>
<div class="BCD">
<div class="B">B B B</div>
<div class="C">C</div>
<div class="D">D D D</div>
</div>

では、D の上下方向位置が A の下端の下にまで下がってしまいます。
D の clear:left が無い場合は DはBの右に。

D を A の右でBのすぐ下に配置はできないのでしょうか?

BCD を float:right にすれば出来るのはわかりますが、実際の用途としては、
A はナビゲーションバー(幅固定)、BCDが残りを使うリキッドスタイルで、B は図表でCが本文、
Dは次の章の冒頭で、そこに B がかからないようにしたいんです。
17Name_Not_Found:2006/11/27(月) 01:42:53 ID:ae66mXe8
画像(id="abc")にリンクをjavasvript:;でヌルリンク
これをCSSでrelativeにする

on clickで history.back();
a#abc:hoverで相対的に移動したい

全部javascript指定でgetElementByIDでは上手くいったけど
18Name_Not_Found:2006/11/27(月) 01:55:03 ID:???
>>16
<br clear="all">じゃだめ?
1916:2006/11/27(月) 02:15:44 ID:???
>>18
試してみましたが、clear:left と同じ
A B C
A B
A
  DDD
という結果になりました。
20Name_Not_Found:2006/11/27(月) 02:16:37 ID:???
>>17
相変わらず日本語はおかしいが
JSでいじれたCSSが単体で動かないのは単に書き方が悪いんだろ。
2118:2006/11/27(月) 02:54:26 ID:???
>>19
.BCD { float: left; margin-left: 2em; } で出来た。
22Name_Not_Found:2006/11/27(月) 02:54:49 ID:???
>>16,19
.C {height:8.5em;} /*数値は適当に*/
23Name_Not_Found:2006/11/27(月) 06:23:40 ID:???
ら抜きを使うやつが他人の日本語の良し悪しを指摘するのは滑稽な話だ。
24Name_Not_Found:2006/11/27(月) 07:39:05 ID:???
なんらとー
25Name_Not_Found:2006/11/27(月) 08:59:53 ID:???
「いじれた」をら抜き言葉というやつが他人の日本語の使い方を評するのは滑稽な話だ。
26Name_Not_Found:2006/11/27(月) 09:09:31 ID:???
揚げ足取り
27Name_Not_Found:2006/11/27(月) 09:28:44 ID:???
「いじられた」
・・・・・・・いやらしい////><
2816:2006/11/27(月) 10:31:44 ID:???
すみません、ちょっと説明不足でした。
C は数行に渡る文章で、リキッドスタイルなので、ブラウザの幅によってCの高さが変わります。
<div class="A">A A A A A A A</div>
<div class="BCD">
<div class="B">B B B </div>
<div class="C">C C C C C C </div>
<div class="D">D D D</div>
</div>
って感じで、
ウィンドウ幅が十分あるときは CよりBの方が高さがあるので、DはBの下
ウィンドウ幅が狭いときは、BよりCの方が高さがあるので、DはCの下
に配置したいんです。


>>21
Cの幅が狭い場合はそれでいけるのですが、
実際にはCは数行にわたる文章なので、
BCDが Aの横に並ばず、下に来てしまいます。

>>22
今のところ、その方法が一番解決に近いような気がするのですが、
リキッドで幅が狭い時は、Cの下端がBより下に来る場合もあるもので
Cの高さがうまく見積もれません。

29Name_Not_Found:2006/11/27(月) 17:12:59 ID:???
>>28
イマイチわからんのだが、そのhtml構造じゃなきゃダメなワケ?
div.Aの高さは固定? div.Aの下辺とdiv.Dの下辺が合ってればいいの?
3016:2006/11/27(月) 18:41:53 ID:???
>>28
この構造は問題(というかやりたいこと)を示すための、最小限の例です。
Aの高さは固定ですが、BCD の方は、実際にはもっと分量があります。
div.A の下辺より上にD を持ってきたいというのが主題で、div.A の下辺とdiv.Dの下辺などはどうでもいいです。

<div class="A">サ イ ド バ ー</div>
<div class="BCD">
<div class="B">図 表</div>
<div class="C">文 章 が つ ら つ ら と</div>
<div class="D">見出し</div>
<div class="B">図 表</div>
<div class="C">文</div>
<div class="D">見出し</div>
(以下略)

って感じになります。
31Name_Not_Found:2006/11/27(月) 19:27:05 ID:???
>>30
.A2 {float:left; width:1em; border:1px solid red;}
.BCD2 {margin-left:2em; border:1px solid gold;}
.B2 {float:left; width:1em; border:1px solid green;}
.C2 {border:1px solid blue;}
.D2 {border:1px solid pink;}

<div class="A1">ああああああ</div>
<div class="BCD2">
<div class="B2">いいい</div>
<div class="C2">ここの行数に依るのだが<br>簡単な<br>パターンとして<br>divに直書き</div>
<div class="D2">えええええ</div>
</div>
32Name_Not_Found:2006/11/27(月) 21:56:35 ID:???
長さについて質問です。

出力メディアがプリンタのとき、相対単位であるpxが使われている長さはどの
ようにして算出値(computed value)に変換されるんでしょうか。出力メディ
アがコンピュータのディスプレイなら画面の解像度とディスプレイの物理的な
サイズから1pxの実際の長さが決まるはずですが(ですよね?)、プリンタの
場合の解像度はどうなるのか、ということです。
33Name_Not_Found:2006/11/27(月) 22:06:21 ID:???
すれ違い
34Name_Not_Found:2006/11/27(月) 22:17:50 ID:???
すれ違いではないような気がするが。
まあ仕様書嫁や。CSS2/2.1の4.3.2な。
3532:2006/11/27(月) 23:19:26 ID:???
>>34
ありがとうございます。

CSS2では腕の長さ28inchに対して90dpiの割合になるよう調節することを推奨
しているみたいなのですが、(http://www.w3.org/TR/REC-CSS2/syndata.html#length-units
これは推奨しているだけで1pxが何mmになるかはUAの実装次第と考えていいん
でしょうか。もしそうならUAの実装はどうなっているんでしょうか(ググって
みるとウェブではWindowsが採用した96dpiを標準にしているとか、W3Cはそん
なことを言っていないとか出てくるのですが、印刷時の解像度はUAごとにばら
ばらなのか、それとも1inch=96pxで統一されていたりするのか)。

連続質問ですいません。


3616:2006/11/27(月) 23:32:59 ID:???
>>31
すみません、それだと >>16 の Dにclear:leftが無い場合と同じで、全然解決しないです。

C2 の<br>が無い状況で、
・ウィンドウ幅が広い場合(B2よりC2の方が高さが低い)→D2はB2の下に来て欲しい
・ウィンドウ幅が狭い場合(B2よりC2の方が高さが高い)→D2はC2の下に来て欲しい
の両方を両立させたいのです。

左のAが無ければ、Dで clear:left すれば実現できるのですが、
左のAがある状態で、Dをclear:leftすると、DがAの下にまで来て困ってる、という状況。

37Name_Not_Found:2006/11/28(火) 01:33:52 ID:???
>>36,16
>BCD の方は、実際にはもっと分量があります
って言ってたじゃん。何か正直じゃないんだよね。誰もそんなレイアウトパクらないって。
もうtableでやれと言いたいけど、height指定した空div.Eを作って、div.Bに重なるように配置。
heightの数値=div.Bの高さ(または以上)にすれば、つっかえ棒になる。
38Name_Not_Found:2006/11/28(火) 10:36:54 ID:???
font-sizeを指定していても、
メイリオとMS Pゴシックで
1行の高さが違ってしまうのですが、
どのプロパティを指定すれば同じ高さになりますか?

line-heightも合わせて指定してみたのですが、
少しはマシになるものの同じにはなりません。
39Name_Not_Found:2006/11/28(火) 16:18:39 ID:???
>>38
不可能。もっと言えばその両方共入ってないPCもあるのだし。
4016:2006/11/28(火) 16:18:43 ID:???
>>37
いや、>>36の説明が全てというか、
実際のレイアウトでは、Bの図は高さがだいたい5〜6行分ぐらいで、
Cの文章は、ウィンドウの幅によって、3〜4行の時もあれば、7〜8行になることもある、という状況です。

状況がわかりやすいようにBを2行、Cを1行〜3行にできるような >>30 の例を出したのですが…

で、「つっかえ棒」を考えてみたのですが、
「div.E を div.B に重なるように配置」する良い方法は思いつかなかったものの

.A { float: left; width:1em; }
.BCD {margin-left: 2em; }
.B { float: left; width: 1em; }
.C { margin-left: 2em; }
.D { clear: right; }
.E { float: right; width: 0; height: 2em; margin: 0; padding: 0; }


<div class="A">サ イ ド バ ー</div>
<div class="BCD">
<div class="B">図 表</div><div class="E"></div>
<div class="C">文 章 が つ ら つ ら と</div>
<div class="D">見出し</div>
</div>

でいけそうです。

ありがとうございました。
41Name_Not_Found:2006/11/28(火) 19:40:37 ID:???
>>38
強いて挙げるならfont-size-adjustかな……。Mozilla系しか実装してないし、和文フォントで効くのか分からないし、試した事無いから期待通りの動作をするのか分からないけど。そもそも縦幅比が分からないから無理か……。
42Name_Not_Found:2006/11/29(水) 02:24:56 ID:???
書体によって大きさが違うんだから、現実的に考えて厳しいよな。
43Name_Not_Found:2006/11/29(水) 13:41:10 ID:???
>>41
適宜改行してくれ。
44Name_Not_Found:2006/11/29(水) 13:49:21 ID:bBaWzvrZ
cssで背景に画像を張るときに
<h1><a href="">タイトル</a></h1>
などとして

h1 {
text-indent:-9999px;
}

a {
background-image: url(画像);
background-repeat: no-repeat;
background-position: left top;
width: 100px;
height: 100px;
}

などとすることがありますが、IE5だとまったく表示できなくなってしまいます

なかに<span>などをいれて、文字だけdisplay:none;すればいけるみたいなのですがIE5のためだけに<span>を追加するのもいやなので
HTMLのほうにはなにもついかせずに
IE5でもうまく対応させるスマートな方法など知ってる方いましたらお願いします。
45Name_Not_Found:2006/11/29(水) 14:26:31 ID:???
>>44
IE5.0だよね?
それだと44自身も言ってる通り、<span>を入れるのが一番ラクだと思う。
確かMacIEでもその方が良かったような気が。
ちなみにdisplay:none;だとアクセシビリティが悪いから、他の方法で消すべし。

或いは、デザイン上で可能なら、全てを画像置換にしないでテキスト部分はそのまま表示させるのも一つの手かと。
46Name_Not_Found:2006/11/29(水) 14:32:28 ID:???
4746:2006/11/29(水) 14:34:21 ID:???
あ、ごめん。h1をリンクにしたいのか。
48Name_Not_Found:2006/11/29(水) 14:44:44 ID:bBaWzvrZ
MACIEではtext-indent-9999:;でも大丈夫みたいです。

しょうがないからIE5.0だけfont-size:0;にして背景と同じ色にして無理やり消そうかな・・。
49Name_Not_Found:2006/11/29(水) 16:08:00 ID:???
それやるとSEOスパム扱いでで村八分にされるよ。
50Name_Not_Found:2006/11/29(水) 16:29:38 ID:???
>>44
padding、height:0、overflow:hiddenを組み合わせてやる方法がある。
51Name_Not_Found:2006/11/30(木) 00:15:36 ID:???
Safari(すべてのバージョンかどうかは知りませんが)で、
input や textarea などではborderは(border:noneでは)消せないのですか?
仕様書のどこかにUA依存という風なことが書かれていた気がするのですが、
ページが見つからなくて・・・
52Name_Not_Found:2006/11/30(木) 00:27:20 ID:lt5e32MO
そのほうほうとは?
>>50
53Name_Not_Found:2006/11/30(木) 00:41:36 ID:???
>>51
そうだよ。だからfromはデフォでいいんだよ。弄くんな。
54Name_Not_Found:2006/11/30(木) 00:58:00 ID:???
>>52
いやそのまんまだよ。
heightの代わりにpaddingで高さとってoverflow:hiddenにすればテキストは消える。
で、IE5.5以下のためにボックスモデルハック。
5551:2006/11/30(木) 01:06:18 ID:???
>>53
そうですか、わかりました。ありがとうございます。
嗚呼、レイアウトを変更せねば・・・
56Name_Not_Found:2006/11/30(木) 06:55:32 ID:lt5e32MO
>>52

おー。
なるほどこんなやり方があったとは、知りませんでした。
どうもありがとうございました。
57Name_Not_Found:2006/11/30(木) 12:18:17 ID:???
32と微妙にかぶってるかもしれませんが、
印刷用CSSの作成で詰まっております。

※画面用
#header {
height: 82px;
background-image: url(../images/xxxx.gif);
background-repeat: repeat-x;
background-position: left center;
padding: 0px;
margin: 0px;
}

※印刷用
#header {
height: 21.7mm;
background-image: url(../images/xxxx.gif);
background-repeat: repeat-x;
background-position: left center;
padding: 0mm;
margin: 0mm;
}

IEでは何とも無いのですが、
FireFoxだと background-image で指定した画像が
異常に小さく表示されてしまいます。
かと言って、背景画像のサイズって指定できないみたいだし…。
そういうものでしょうか?
5857:2006/11/30(木) 12:54:23 ID:???
自己解決しました。

FireFoxの以前のバージョンのバグだったんですね。
ttp://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4855
59Name_Not_Found:2006/11/30(木) 23:52:33 ID:???
list-style-image に指定した画像は、その行の高さの中央に配置したいのですが、
どうすればいいのでしょうか。
60Name_Not_Found:2006/12/01(金) 00:09:55 ID:???
61Name_Not_Found:2006/12/01(金) 00:14:59 ID:???
ブラウザをFxにすればlist-style-imageで自動に中央にしてくれるwww
62Name_Not_Found:2006/12/01(金) 00:21:54 ID:???
よかったでちゅね〜
6359:2006/12/01(金) 01:38:47 ID:???
>>60
自分の説明不足だったのかもしれませんが、
それだと、li要素の内容全体の高さの中央になるから、
一行目の行の高さの中央にはならないですよね。
line-heightと背景画像のtopの位置をpx指定しても、
文字サイズ可変だとやっぱりずれてしまうので…。
6459:2006/12/01(金) 01:41:24 ID:???
>>61
そうなんですか?
下寄りに表示されるのですが。
65Name_Not_Found:2006/12/01(金) 02:16:21 ID:???
>>63
>背景画像のtopの位置をpx指定して
何でそんな事すんの?
66Name_Not_Found:2006/12/01(金) 02:38:37 ID:???
>>63
それは無理。
67Name_Not_Found:2006/12/01(金) 04:30:34 ID:???
どうしてもと言うなら、imgタグを使うとか。
で、そのimgのサイズもemとかで指定すれば?
68Name_Not_Found:2006/12/01(金) 09:49:52 ID:f5gM+E9k
IEだとnoscript要素内にCSSを適用できないみたいなんですが、適用させる方法を教えてください。


<style> noscript p{background-color:red} </style>
<noscript><p>hogehoge</p></noscript>

上記は、FireFoxでは文字の背景が赤くなりますが、IEではなりません。
69Name_Not_Found:2006/12/01(金) 11:18:24 ID:???
IEでも普通にnoscript内にcss使えるんだけど。
無理ならnoscriptの中にdivでも作ってそこからはじめたら?
70Name_Not_Found:2006/12/01(金) 23:02:20 ID:???
>>59
■ hogehoge
  xxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxx
  xxxxxxxxxxxxxxxxxxxxxxxx

画像を常に■の位置に表示って事かな。
だったら、
<h3>hogehoge</h3>
<p>xxxxxxxxx略
xxxxx</p>
としてh3の背景画像に指定してみたらどうだろう?
(タグは構造によって変更しる)
71Name_Not_Found:2006/12/01(金) 23:09:43 ID:???
何でそうなるんだよ・・
72Name_Not_Found:2006/12/01(金) 23:10:29 ID:???
>>70
いやいやいやいや
73Name_Not_Found:2006/12/01(金) 23:26:26 ID:???
>>70
いひゃひゃひゃひゃひゃ
74Name_Not_Found:2006/12/01(金) 23:28:07 ID:???
>>63
liにspan入れて、spanに画像指定くらいしか思いつかんな
75Name_Not_Found:2006/12/01(金) 23:35:51 ID:???
>>70のは、そういう流れの文章なら問題ないんじゃね
>>59が求めている答えとは違うと思うがね
76Name_Not_Found:2006/12/01(金) 23:48:41 ID:???
>>68

<head>
<noscript>
<style>p { background-color: red; }</style>
</noscript>
</head>

<body>
<p>hogehoge</p>
</body>

7767:2006/12/02(土) 04:09:49 ID:???
気が向いたので作ってみた。
↓HTML
<ul>
<li>
<span class="bullet"><img src="images/bullet_01.gif" /></span>
<span class="main">ここに本文本文本文<br>本文続き。</span>
<span class="end"></span>
</li>

<li>
<span class="bullet"><img src="images/bullet_02.gif" /></span>
<span class="main">ここに本文本文本文<br>本文続き。</span>
<span class="end"></span>
</li>
</ul>
7867:2006/12/02(土) 04:11:28 ID:???
↓CSS spanで汚し過ぎとかいろいろツッコめるとは思うけど。
body {
font-size: 100%;
}
li {
list-style-type: none;
}
.bullet img{
margin: 0;
padding: 0;
line-height: 1.5em;
height: 1em;
width: 1em;
float: left;
}
.main {
margin: 0;
margin-left: 0.5em;
padding: 0;
font-size: 1em;
float: left;
}
.end {
clear: left;
}
79Name_Not_Found:2006/12/02(土) 04:14:21 ID:???
インランフレームを使ったフレームの中での
画像の固定について質問です。

フレームのボトムに横長の画像を固定し
それをレイヤーの一番上に持ってきて
ページをスクロールすると文字がその画像の裏に
隠れていくようなつくりにしたいのですが
ボトムへの固定の仕方を自分なりに調べてみたところ
ネスケではサポートされているらしいのですが、IEではされていないようです。

IEで見られ、かつそのようなつくりにするのにはどうしたらいいんでしょうか?
画像の固定で検索してみても背景のことについてしか
言及されていないものばかりだったので
宜しくお願いします。
8067:2006/12/02(土) 04:18:48 ID:???
FireFoxだと表示がおかしいな…スマソ。
多分どっか適当にいじれば何とかなると思う。
81Name_Not_Found:2006/12/02(土) 05:32:42 ID:???
>>59
> line-heightと背景画像のtopの位置をpx指定しても、
> 文字サイズ可変だとやっぱりずれてしまうので…。

その位置指定をemでやればいいんじゃない?
他にも方法有ると思うけど。

>>67,77,78
それで出来るか試してないけど、流石にソースがひどすぎると思う。
> いろいろ突っ込めるとは思うけど
ってあるから突っ込みづらいけどw
82Name_Not_Found:2006/12/02(土) 08:53:53 ID:???
>>76
そういうことじゃないだろ
83Name_Not_Found:2006/12/02(土) 09:48:17 ID:???
>>76
<head>の中に<noscript>を書けない。
84Name_Not_Found:2006/12/02(土) 11:06:46 ID:???
IEやFFをのぞいてsafariだけにCSSをかませたいんだけど、
どうすりゃいい?
85Name_Not_Found:2006/12/02(土) 11:30:54 ID:???
>>84
ブラウザ振り分けスクリプト書きなさい
8668:2006/12/02(土) 14:55:31 ID:wzBmrPvD
こうすることにしました
<style> .noscript p{background-color:red} </style>
<noscript class="noscript"><p>ID:hogehoge</p></noscript>
87Name_Not_Found:2006/12/02(土) 19:02:59 ID:???
TABLEタグで今まで実現できた事をCSSで行いたいと思っていますが、ブラウザによってずれが生じて
しまい困っています。
<table cellspacing="0" cellpadding="0">
<tr>
  <td><a href="http://test.html" target="_self"><img src="xwss01.jpg" border="0" alt="xwss01.jpg(248548 byte)" width="1000" height="1000"></a></td>
  <td><a href="http://test.html" target="_self"><img src="xwss01.jpg" border="0" alt="xwss01.jpg(248548 byte)" width="1000" height="1000"></a></td>
</tr>
</table>
以上のように隙間なく横に二つ画像を並べそれぞれにリンクを貼れるようにしたいのですが。
width="500" height="130" border="0" style="margin-top : 15px;margin-left : 0px;"
width="200" height="130" border="0" style="margin-top : -148px;margin-left : 500px;"
とそれぞれに値を指定しているのですが、ブラウザによって解釈が違うようで正しく表示されない場合
があります。
88Name_Not_Found:2006/12/02(土) 19:31:58 ID:???
意味がさっぱりわからんのは俺だけか?
89Name_Not_Found:2006/12/02(土) 20:10:10 ID:???
>>87
widthと横padding,margin
heightと縦padding.margin
を同時に指定しなければ少し幸せになれる
90Name_Not_Found:2006/12/02(土) 20:19:13 ID:???
別にテーブル使わなくてもimg並べるだけで横に並ぶと思うが
91Name_Not_Found:2006/12/02(土) 20:22:51 ID:???
>>87
>TABLEタグで今まで実現できた事をCSSで行いたい
そう言ってるんのにtable使ってんじゃん。今迄と何の変わりもない。
92Name_Not_Found:2006/12/02(土) 20:35:07 ID:???
>>87
これは難しい。
意味がよく分からない。
93Name_Not_Found:2006/12/02(土) 20:46:55 ID:???
恐らくこれは荒らし
9487:2006/12/02(土) 21:10:51 ID:???
すみません。意味不明な事を書き込んでしまいました。今までしたのようにテーブルで
組んでいたのですが、これをCSSで組みなおすにはどうすればいいだろういう意味で
質問しました。
<table cellspacing="0" cellpadding="0">
<tr>
  <td><a href="(p)http://test.html" target="_self"><img src="xwss01.jpg" border="0" alt="xwss01.jpg(248548 byte)" width="1000" height="1000"></a></td>
  <td><a href="(p)http://test.html" target="_self"><img src="xwss01.jpg" border="0" alt="xwss01.jpg(248548 byte)" width="1000" height="1000"></a></td>
</tr>
</table>

そこで、改めてimgタグを並べて記述してみると
>>90 の言うとおり横に並んだのですが、間に隙間が開いてしまう事や
他CSSと組み合わせると隣に並ばず改行されたかのように配置されてしまいます。
95Name_Not_Found:2006/12/02(土) 21:18:48 ID:???
画面中央表示を<table>でなく<div>で表現したいのですが、
<div>で縦方向の中央を指定するにはどうすればいいですか?
お願いします。
96Name_Not_Found:2006/12/02(土) 21:37:15 ID:???
97Name_Not_Found:2006/12/02(土) 21:46:35 ID:???
そういや、画像ってnowarpで改行されなくなるんだろうか…やったことないが。
98Name_Not_Found:2006/12/02(土) 22:07:40 ID:???
>>94
アンタの代わりにソース書いてやるスレじゃありません。
テンプレ読んで勉強しよう。
9987:2006/12/02(土) 22:11:41 ID:???
すみません。
margin-bottom:-130pxと記述するところを
margin-top:-130pxと記述していた為に起こった
私のミスでした。解決しました。レスを浪費してしまってすいません。
100Name_Not_Found:2006/12/03(日) 09:05:15 ID:???
>>87
どこにプロパティを書いたのかとかが全く分からない。というより、どんな要素を使ったのかすら分からない。大体widthやheightはCSSで実現可能なのに何故属性値なんだ。
にしてもかなり旧式なマークアップだね。テーブルレイアウトのフレーム使用だよね。そして画像を二つ並べてる意図が謎。
altも適切とは言えない(テキストブラウザを使う人や目の不自由な人や検索エンジンにとって、ファイル名とファイルサイズに何の用があるのか?)……。
変更後のコードを一通り書き込んでもらわないとさっぱり分からない。
101Name_Not_Found:2006/12/03(日) 11:34:43 ID:???
初心者スレの質問者と同一人物と思われ。ネタって事で。
102Name_Not_Found:2006/12/04(月) 12:44:22 ID:???
>>79
position使えばいいんじゃね
103Name_Not_Found:2006/12/04(月) 14:27:10 ID:V5vh2oB3
FireFoxでプリントアウトすると背景が印刷されません。

bodyに濃い色の背景画像、その中にdivで薄い背景色のボックスをつくり、
その中にコンテンツを表示するようにしています。

ですが、ページ内容が長くなり、印刷時2ページ以上になると、
薄い色の背景(div設定のもの)が最終ページにしか印刷されなくなり、
他のページが非常に読みづらいです。
(濃い背景色に濃い色の文字という状態になってしまう)

自分では「背景も印刷する」のチェックをはずせばよいだけなのですが…。
修正する方法はあるのでしょうか?

CSSのソースは以下の通りです。
/***** ボディ設定 *****/
body{ margin: 0; padding: 0; text-align: center; font-size: 75%; line-height: 1.5;
background-color: #300; background-image: url(image/back.jpg); background-repeat: repeat-x; letter-spacing: 0.1em; }

/***** ページ領域 *****/
#allpage{ margin: 0; width: 750px; text-align: left; color: #000000;
background-color: white; background-image: url(image/01wall.gif); background-repeat: repeat-y;
border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; }
104Name_Not_Found:2006/12/04(月) 15:57:05 ID:???
>>103
media="print"で印刷用と分ければ?
105Name_Not_Found:2006/12/04(月) 16:10:53 ID:???
>>104
それじゃ根本的な解決にならないと思うけど。
106Name_Not_Found:2006/12/04(月) 16:33:58 ID:???
なんで?

>自分では「背景も印刷する」のチェックをはずせばよいだけなのですが…。
といってるのだから、
background-colorとbackground-imageを未指定の
印刷用css用意すればいいんでないの?
107103:2006/12/04(月) 17:16:48 ID:V5vh2oB3
回答ありがとうございます。

仰るように、できることなら背景もきちんと印刷されるようにしたいです。
もしバグ等で無理ならば>>106さんが説明してくださったように
印刷用に指定しようと思います。
一般的には2ページ以上に渡っても背景は印刷されますよね?
もう、どこの設定がおかしいのか…。
108Name_Not_Found:2006/12/04(月) 17:55:23 ID:???
つーか印刷時に背景なんていらねえ・・・・最低のCSSだorz
109Name_Not_Found:2006/12/04(月) 17:59:23 ID:???
印刷時に専用cssを用意するのは普通…というより普通よりマトモだと思う。
110Name_Not_Found:2006/12/04(月) 18:00:58 ID:???
製作者等の意向にもよるだろうけど、印刷時って、
白黒印刷を考慮して余計な背景は表示させないとかするかな。
111Name_Not_Found:2006/12/04(月) 18:13:56 ID:vqXBXpGd
floatを用いてリストの横並びにした時に、IE6で下マージンがついて段差になってしまいます。
A
  B
    C
みたいなかんじで、右下がりに段差が(;´Д`)
<ul>
<li><a href="hoge">A</a></li>
<li><a href="hoge">B</a></li>
<li><a href="hoge">C</a></li>
</ul>

* {
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
list-style:none;
}
ul li a {
display: block;
float:left;
margin: 0;
padding: 0;
width:100px;
height:20px;
background:url(back.gif) #fff;
}
xml宣言有りで、前後の要素のmarginとpaddingは0。
他にfloatは無し。clearが悪いのかな?と思ってbr指定と後続要素に指定と試したけど変化無し。
FirefoxやOperaでは綺麗に表示されてます。ボスケテ(´Д⊂
112Name_Not_Found:2006/12/04(月) 18:18:52 ID:???
>>111

* {
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
list-style:none;
display: inline;
}
ul li a {
/*display: inline; */
float:left;
margin: 0;
padding: 0;
width:100px;
height:20px;
background:url(back.gif) #fff;
}
113112:2006/12/04(月) 18:20:02 ID:???
ブロック要素とインライン要素の違いが判ってないんだと思う。
114111:2006/12/04(月) 18:26:26 ID:???
>>112
ありがとうございました(´Д⊂
115Name_Not_Found:2006/12/04(月) 19:05:52 ID:???
ブラウザには「背景は印刷しない」の設定があり、
IEは確かこれがデフォだよね。
116Name_Not_Found:2006/12/05(火) 04:24:40 ID:NuQgrIBS
質問です。テーブルのスタイルをCSSで指定したら、テーブルの横幅が指定より微妙に大きくなります。
+++スタイルシート+++++
.T1{
width:140px;
border:1px #cccccc solid;
border-collapse: collapse;
border-spacing: 0px;
background-color: #eeeeee;
}
.T1 td {
border:1px #cccccc solid;
padding:0px;
}

+++ボディ++++++++
<div>
<img src="w140.gif" width="140" height="50px">
</div>
<div>
<table class="T1">
<tr><td>あああ</td></tr>
</table>
</div>

上記のソースをFireFoxで表示させると、テーブルの横幅が左に1px分だけ大きくなって
いるようで、CSS側指定したテーブルサイズ140pxジャストになりません。
どのようにすれば、横幅をピッタリ140pxにできるのかわかりません。
ちなみに、IEで表示を確認したら、ずれていませんでした。
それと、
border-collapse: collapse; を
border-collapse: separate; にしたら、ずれませんでしたが、テーブルの枠線が太くなってしまって・・・。
枠線を細いままで、且つサイズのズレを押さえるにはどうしたらよいでようか。
117Name_Not_Found:2006/12/05(火) 08:26:36 ID:???
>>116
widthとborderを同時に指定しているからでしょ。
>>5 のQ1参照

てか、そのソースならテーブルにしなくていいんじゃない?
divに同じボーダーと背景色を設定して、widthをborder分引いた138で設定すれば?
118116:2006/12/05(火) 11:04:02 ID:NuQgrIBS
ありがとうございました。
色々試したのですがやはりFireFoxでは、テーブルの枠が微妙にずれてしまいました。
FireFoxでずれないようにwidth138にすると、今度はIEでずれてしまったので、
ひとまず多少のズレは我慢する事にしました。


119Name_Not_Found:2006/12/05(火) 11:46:19 ID:???
>>118
どうしても気になるなら「CSSハック」でググるがよろし。
120Name_Not_Found:2006/12/05(火) 11:48:55 ID:???
>>118
IEを標準モードにしてもそれか?
121Name_Not_Found:2006/12/05(火) 12:19:45 ID:cwaYsOp3
Ffox用にmin-widthを設定とか
122Name_Not_Found:2006/12/05(火) 12:20:30 ID:???
ゴメソ、sage忘れた
123Name_Not_Found:2006/12/05(火) 12:38:59 ID:???
Ffoxという新しい呼び名まで与えられたのにフォク助とは言ってもらえない可哀相な狐。
124Name_Not_Found:2006/12/05(火) 14:56:04 ID:???
125Name_Not_Found:2006/12/05(火) 15:03:46 ID:???
Fxk
126Name_Not_Found:2006/12/05(火) 17:35:40 ID:rY9mJCOo
質問です。
position:absoluteにしたdivにheight(px)を指定しなければいけないのですが、(実際はJavaScript)
内容のテキストが下にはみ出す場合は縦スクロールバーを表示したいです。
しかし、下記のようにすると、横スクロールバーも表示されてしまいます。

<div style="

position: absolute;
height: 100px;
overflow: auto;

background-color: #CFF;

">
hogehogehogehogehogehogehogehogehogehogehoge<br>
hogehogehogehogehogehogehogehogehogehoge<br>
hogehogehogehogehogehogehogehogehogehogehoge<br>
hogehogehogehogehogehogehogehogehogehogehogehoge<br>
hogehogehogehogehogehogehogehogehogehoge<br>
hogehogehogehogehogehogehogehogehoge</div>


overflow-y: auto;にしてみましたが、これだと右端の文字が縦スクロールバーに隠れてしまいます。
横方向に内容を全て表示し且つ幅は最小限に且つ縦にスクロールするにはどうしたらよいのでしょう?
127Name_Not_Found:2006/12/05(火) 19:32:06 ID:???
>>124
ちょっと待て、フォクスケを知らんのか?

>>126
hogehogeを日本語にしてレッツチャレンジ。
128Name_Not_Found:2006/12/05(火) 20:08:47 ID:???
>>127
>>124は「Ffox」なる造語へのレス
ついでに言っとくが、「フォクスケ」じゃなく「フォクすけ」が正しい
129Name_Not_Found:2006/12/05(火) 20:58:34 ID:???
今調べてきましたといったレスだな…>>128
130Name_Not_Found:2006/12/05(火) 21:10:53 ID:???
今調べてきたんじゃないもん!ちゃんと知ってたもん!
131Name_Not_Found:2006/12/05(火) 21:32:09 ID:???
>>128
確か、どっかのブログで間違いが多いってエントリがあったはずだが、
まあ、どっちでもいいや

>>130
成り済ましすんな、ハゲ
132131:2006/12/05(火) 21:33:26 ID:???
間違えた

× >>128
>>129

逝ってくる
133Name_Not_Found:2006/12/05(火) 22:17:17 ID:???
・・・なんだその訂正。>>130>>131なのか?ww
134Name_Not_Found:2006/12/05(火) 22:18:02 ID:???
あ、俺の頭が逝ってた。眠ってくるorz
135126:2006/12/05(火) 22:37:20 ID:???
スルーされてる感じ(´;ω;`)
テキストを日本語日本語にしてみましたが状況は変わりません…
136Name_Not_Found:2006/12/05(火) 23:10:43 ID:???
>>128 >>133
どうでもええわw
137Name_Not_Found:2006/12/05(火) 23:23:12 ID:???
>>135
???日本語で>>126をコピってOKなんだが?
138Name_Not_Found:2006/12/05(火) 23:55:05 ID:???
>>135
どこかでwidth指定してるのか?
<br>はやめろ。
139Name_Not_Found:2006/12/06(水) 11:17:05 ID:???
brを止めなきゃいけない意図がわからん。
140Name_Not_Found:2006/12/06(水) 15:56:05 ID:???
質問です。
line-height属性で行間を空けたテキストが
rubyを使ったところだけ高さが変わってしまい
(→テキスト+ルビの高さで上下均等に余白スペースが割り振られてしまう)
何箇所も使っていると見栄えが悪くなってしまうのが気になっています。
ルビを使った行も他のテキスト部分と同じように
本テキスト部分だけに合わせた行の高さにしたいのですが……無理でしょうか?

非常に長いテキストの中に何箇所もルビがあるので、
できればcssのみで処理したいのですが。
141140:2006/12/06(水) 15:58:29 ID:dKuAMRXA
あげ。
一応、cssが駄目でもhtmlやjavascriptなどで対処できるということでしたら
そちらでも構いません
142Name_Not_Found:2006/12/06(水) 16:16:51 ID:???
無理です。
143Name_Not_Found:2006/12/06(水) 17:05:46 ID:???
ええ、無理ですね。
144Name_Not_Found:2006/12/06(水) 17:40:50 ID:???
>>140
ルビタグに拘っている辺りIE以外は無視しても良いと判断して
○のところにはお好きな数字を

ruby{position:relative;}
rt{position:absolute; top: -○px;}

javascriptをつかってIEブラウザの時のみ使うなんてすればいいのかな
単語のあとに()つけてればルビなんて使う必要もないかと思うのだが……
145Name_Not_Found:2006/12/06(水) 18:31:04 ID:???
>>144
マークアップはUAのため。
146140:2006/12/06(水) 19:28:11 ID:???
>>144-145
おお、ありがとうございます!
一応ネスケや他のブラウザでは括弧表示になるようにしてあるのですが、
IE表示のときはルビだとかっこいいなーと思ってまして……。
頂いたタグでいろいろ頑張ってみます。
147Name_Not_Found:2006/12/06(水) 21:00:33 ID:???
ども、140です。
あの後教えていただいたタグをいじってみたのですが、
position:absolute;で左寄りになったルビも
letter-spacingとmarginで(力技ですが)どうにか見やすくすることができました。
一応ご報告までに。
148Name_Not_Found:2006/12/06(水) 21:37:42 ID:???
>>144
別にrubyは(正確には「rubyで文字にルビが振られる表示」は)IEしか出来ない訳ではない。
149Name_Not_Found:2006/12/06(水) 21:49:10 ID:???
     ヘッダー
メニュー   コンテンツ



     フッター

のような2カラムのレイアウトをしたのですが

例えばメニューが縦に長くてコンテンツ部分が短い場合
IEでしか見ていないのですが
フッターがコンテンツ部分の最下部まで上がってしまい
メニューの一部が消えてしまいます
しかし、リンク部分にポインタを持っていくとフッターがメニューの下まで行き正常に表示されます。

このような場合何が悪いのでしょうか。
よろしくお願いします。
150Name_Not_Found:2006/12/06(水) 21:54:24 ID:???
>>149
どういうコーディングをしてるかも示さず何を聞こうと?
151149:2006/12/06(水) 22:32:11 ID:???
だよね
152149:2006/12/06(水) 22:45:16 ID:???
#base
{
width: 760px;margin-top : 0px;margin-left: auto;margin-right: auto;
}

/*-----ヘッダー部分-----*/
#header{
margin : 0px;padding: 0Px;height : 100px;
}
/*-----サイドメニュー(left)--------*/

#left {
width: 180PX;float: left;margin: 0px;color: #000;font-size: 110%;line-height;150%;
}
/*-----コンテンツ部分-----*/
#content{
width: 560px;float: right;margin : 0px 5px 0px 5px;font-size:100%;line-height :133%;
}
こうやって書いているんですが駄目ですかね・・・。
まだ示すものが足りないですか?
153Name_Not_Found:2006/12/06(水) 23:26:07 ID:???
footerにclear:both;を指定
154149:2006/12/06(水) 23:42:01 ID:???
>>153
ありがとうございます

フッター部分を晒し忘れていました。すみません。

確認したところ
フッターにclear:both;はありました。

他に考えられるところはあるでしょうか
155Name_Not_Found:2006/12/06(水) 23:42:51 ID:???
>>154
だkらfooterでクリアしてやらないと、永遠にflowとし続けちゃう
156149:2006/12/06(水) 23:49:08 ID:???
>>155
すみませんどうやら私はアフォなようですねorz

現在フッターは
#footer {
width : 760px;
clear: both;
margin : 0px;
padding: 10px;
}

としているのですが・・・。
具体的にはどうしたらよいのでしょうか
157Name_Not_Found:2006/12/06(水) 23:51:59 ID:???
<div id="base">
<div id="header">ヘッダ</div>
<div id="left">左</div>
<div id="content">中身</div>
<div id="f">footer</div>
</div>
footerを#f{clear:both;}で、ためしにやって見たけどちゃんと見られた

zindexとかはどうよ?
158Name_Not_Found:2006/12/06(水) 23:54:09 ID:???
left部分で、marginの取り方とかpositionにabsoluteがあったりすると
ずれ込んだりするよおお。top:-Xemとかもおかしくなったりするよお。
159149:2006/12/07(木) 00:05:08 ID:???
>>157
これだと問題ないです。
どうしてだろ?

>>158
なるほど


それでは単純なものにバラしてから
どこでおかしくなったのか調べてみることにします。

どうもアフォな私にお付き合いくださりありがとうございました。ペコm(_ _;m)三(m;_ _)mペコ
160Name_Not_Found:2006/12/07(木) 03:28:43 ID:???
>>159
もう見てないだろうが、
>#content {… float: right; … } ←全角だし、ケアレスミスが多いタイプと見た。
161Name_Not_Found:2006/12/07(木) 03:39:37 ID:???
うちではコピペでちゃんと動いたけど全角だったかな。
改行じゃなくて
162Name_Not_Found:2006/12/07(木) 03:55:52 ID:???
>>149は全角だな。
163Name_Not_Found:2006/12/07(木) 03:57:06 ID:???
>>152だった・・・もう寝るね。
164Name_Not_Found:2006/12/07(木) 09:49:25 ID:???
こんにちは。CSSで擬似的に動的な情報の表示を行おうとしてます。

例えばリンクをABCと用意し、それぞれのリンクの上にマウスを乗せると、
予め用意した情報を表示すると言うものです。

実際マウスが乗った時に表示する情報を用意するまでは容易いことで、
表示もピクセル指定してやればそう難しいことではありません。

ただ、ABCにマウスが乗ったときに別クラスのA:HOVER属性を呼び出すことは可能でしょうか。
具体的には以下のような感じです。
.A_Detail{visibility:hidden;}
A:HOVER.A_Detail{visibility:visible;}
<OL>
<LI><A href="a" class="A">A</A>
<LI><A href="b" class="B">B</A>
<LI><A href="c" class="C">C</A>
</OL>
<div class="A_Detail">あるあるwwwwwwwww</div>
165Name_Not_Found:2006/12/07(木) 10:05:13 ID:???
・・その前にa:hoverの所まちがっとるぞ。
166Name_Not_Found:2006/12/07(木) 10:35:01 ID:???
一行ならこんな感じではどうかな
簡単だし
javascriptのonmouseoverがやりたいってことだよな

div a {width:250px; position:absolute; text-decoration:none;}
.link1 a{top:1em;z-index:2; display:block;}
.link2 a{top:2em;z-index:3; display:block;}
a:hover {z-index:100;background:#ffffff;}
.aaa{z-index:10; position:absolute; top:1em; left:100px; width:150px; height:300px; background:#cccccc;}
body{background:#cccccc; padding:0; margin:0;}

<div class="link1"><a href="test">test1          setumeisetumei</a></div>
<div class="link2"><a href="test">test2          setumeisetumei</a></div>
<div class="aaa"></div>
167164:2006/12/07(木) 11:42:27 ID:???
レス有難うございます。 色々試してみたのですが、一箇所に表示させることは可能でしょうか。
JavaScriptを使えば簡単にできることは承知しておりますがあえて、CSSで同じことをやろうと思っておりまして、度々スミマセン
168164:2006/12/07(木) 11:44:58 ID:???
連投スミマセン。具体的には ttp://chicappa.jp/ のサイトのメニューのような感じです。
マウスを載せるとそれぞれ同じ場所に異なる情報を表示させようとしています。
169Name_Not_Found:2006/12/07(木) 12:08:51 ID:???
a:hoverでは無理だよ(cssで親セレクタとかあればできますが)
li:hoverとかではできないこともないが非現実的(非効率且つ、IEでは未実装)

素直にjavascriptにしておいたほうがいいよ
170Name_Not_Found:2006/12/07(木) 13:21:42 ID:???
>>165
たぶんセレクタの話だろうが、確かに、CSS1では間違いだ。しかし、他のレベルでは正しい。
具体的に言うと、IEにとっては間違いだが、他のブラウザでは正しい。
171Name_Not_Found:2006/12/07(木) 22:36:04 ID:???
>>168
できんじゃないの?
離れた場所にでなければ。
<a href="hoge.html" class="aa">お知らせ<span class="bb"><a href="info.html">インフォメーション</a><a href="camp.html">キャンペーン</a></span></a>

.bb { visibility:hidden;}
.aa:hover .bb { visibility:visible;}

あとは .bb のポジションをすべて同じにすれば上のサイトのメニューみたいにできる。
172171:2006/12/07(木) 23:17:28 ID:???
ああ、スマン。A要素の内容にA要素が出現できないんだった。
173Name_Not_Found:2006/12/08(金) 08:53:47 ID:???
filter:alphaでボックスを半透明化して、bodyで指定した背景画像が透けて見えるようにしているのですが、
ボックス内の文字や画像まで透けてしまいます。
ボックス内の背景のみ半透明化して、その中の文字などには半透明化処理を施さないような方法ってありますか?
現在は↓のようにしてます。

main {
padding:5px;
border:1px solid #000000;
margin-bottom:15px;
font-size:12px;
width:568px;
background-color:#FFFFFF;
filter:alpha(opacity=80);
}
174Name_Not_Found:2006/12/08(金) 08:57:02 ID:???
>>173
背景画像に半透明PNGを使う。
ただしIEの対応は7から。
175Name_Not_Found:2006/12/08(金) 12:47:40 ID:???
>>173
画像加工してから使うだろ。常識的に考えて。
176Name_Not_Found:2006/12/08(金) 13:03:33 ID:???
何回目だ、この質問。
177Name_Not_Found:2006/12/08(金) 14:15:40 ID:???
テンプレにでも追加しとくか

半透明PNGが普通に使えるのは、
IEのシェアを考えると、まだずっと先の話だな
178Name_Not_Found:2006/12/08(金) 14:28:06 ID:???
DIVタグでブロックデザインしたいとき楽にできるソフトってなんかある?
179Name_Not_Found:2006/12/08(金) 14:59:33 ID:???
Dreamweaverでいいんじゃね
180Name_Not_Found:2006/12/08(金) 19:05:20 ID:???
>>179
本買ってきます
181Name_Not_Found:2006/12/08(金) 19:35:45 ID:???
何度も言われてるけど
とりあえずCSSを普通に組める程度に覚えてから、
DWとかの「補助」ツールに手を出した方がいいよ。
182Name_Not_Found:2006/12/08(金) 19:40:39 ID:???
同意。
でもって値段に見合うほど活躍してくれるかどうかは微妙。
人による。
183Name_Not_Found:2006/12/08(金) 19:41:16 ID:UEFlPNQk
http://www.ebank.co.jp/
上記のサイトのように、メイン部の左右をシャドーのように表示させたいのですが、
何を使えばいいですか?
お願いします。
184Name_Not_Found:2006/12/08(金) 19:50:09 ID:???
シャドーで検索しろって何回も言わせるなよ。
185Name_Not_Found:2006/12/08(金) 19:55:25 ID:???
>>183
お前の首の上に乗っかってる頭を使え
186Name_Not_Found:2006/12/08(金) 20:05:36 ID:???
>>183
画像だよ、それ。
187Name_Not_Found:2006/12/08(金) 20:24:59 ID:UEFlPNQk
>>184>>185>>186
両側にシャドーを表示させることができるのですか?
188Name_Not_Found:2006/12/08(金) 20:33:47 ID:???
なんでできないと思うんですか?
189Name_Not_Found:2006/12/08(金) 20:34:48 ID:???
左右にシャドーのようなグラデーションを描いた横長の画像を背景にして、repeat-yにします。
あとはそれに合わせて固定幅で中身を作れば影っぽくなります。
190Name_Not_Found:2006/12/08(金) 20:35:02 ID:UEFlPNQk
自分がみたいくつかの解説サイトには両側にシャドーを表示させる方法が書いてなかったからです
191Name_Not_Found:2006/12/08(金) 20:38:00 ID:UEFlPNQk
>>189
ありがとうございます。
画像でしかできませんか?
192Name_Not_Found:2006/12/08(金) 20:45:19 ID:???
193Name_Not_Found:2006/12/08(金) 20:51:46 ID:???
>>189
別に固定幅じゃなくたってできるだろ。

>>190
標準モードにしてhtmlとbodyに左右それぞれの画像を置く。
194Name_Not_Found:2006/12/08(金) 22:15:00 ID:???
なかなか良い画像を手に入れられました。
ありがとうございました。
195190:2006/12/08(金) 22:51:56 ID:???
片側にシャドーならありました。
196Name_Not_Found:2006/12/08(金) 22:53:26 ID:???
今後はこういう画像はどこでスレに行って下さい
197Name_Not_Found:2006/12/08(金) 22:59:29 ID:???
>>191
<div id="i"><div id="h"><div id="g"><div id="f"><div id="e"><div id="d"><div id="c"><div id="b"><div id="a">
<p>うんこ</p>
</div></div></div></div></div></div></div></div></div>

div{border-left: 1px solid;border-right:1px solid;}
#a{border-color:#5e5e5e;height:600px;}
#b{border-color:#b1b1b1;}
#c{border-color:#c1c1c1;}
#d{border-color:#cfcfcf;}
#e{border-color:#dbdbdb;}
#f{border-color:#e4e4e4;}
#g{border-color:#ebebeb;}
#h{border-color:#f0f0f0;}
#i{border-color:#f3f3f3; width:750px;}
198Name_Not_Found:2006/12/08(金) 23:03:19 ID:???
最悪。うんこマークアップ。
199Name_Not_Found:2006/12/08(金) 23:12:01 ID:???
確かにこれならCSSでも出来るけど頑張りすぎだろw

<img srs="" id="shadow-1">
img#shadow-1 { background:#cccccc; height:100%; }

これなら画像だしソースは最悪だけど、これは画像だ!!って言い訳出来そうw
200Name_Not_Found:2006/12/08(金) 23:59:14 ID:???
>>197>>199
お逝きなさい。
201Name_Not_Found:2006/12/09(土) 00:06:41 ID:???
>>196
画像を推薦してきたのはそちらで、
私はそもそもCSSを聞きに来たのですが、なにか?
202Name_Not_Found:2006/12/09(土) 00:08:02 ID:???
>>195
ナリ乙^^
203Name_Not_Found:2006/12/09(土) 00:16:15 ID:???
>>199
srsってなんなんだぜ?
204Name_Not_Found:2006/12/09(土) 00:16:42 ID:???
ソースなんだぜ?
205Name_Not_Found:2006/12/09(土) 00:18:04 ID:???
>>201
CSSで出来たじゃん。良かったネ
206Name_Not_Found:2006/12/09(土) 00:30:06 ID:???
じぁあ俺もsrsするんだぜ?
207Name_Not_Found:2006/12/09(土) 01:39:27 ID:???
ttp://www.y-adagio.com/public/standards/tr_css2/toc.html
こちらにあるCSSの規定を読んでいたのですが、
「特性」と「記述子」がそれぞれどういう意味で、どういう違いがあるのかわかりません。
どなたか教えてください。よろしくお願いします。
208Name_Not_Found:2006/12/09(土) 01:55:33 ID:???
>>207
そのまんまです。
なにがどうわからないかすら説明出来ないんかい?おうっ!
209Name_Not_Found:2006/12/09(土) 02:18:57 ID:???
>>207
よく解ってない俺が答えると、

ttp://www.y-adagio.com/public/standards/tr_css2/fonts.html
>記述子がどの要素に適用されるか,又は子要素が値を継承するかどうかについての概念は存 在しない。

このへんから、要素に対して指定するのが特性(property)、
フォントとかに対して指定するのが記述子(descriptor)という使い分けがあることが窺える。
将来的には色の名前とかも定義できるようになるかもしれない。
210初心者:2006/12/09(土) 02:25:41 ID:kHE9z6u3
突然失礼します。
Net4uで無料掲示板を借りたのですが、掲示板に画像をアップロードするとき、画像が右寄せになるようにするには、どうスタイルシートに書けば良いですか?
設定方法とか詳しく教えてもらえるととっても助かります…。
今は左寄りで、短い文はまだしも、長い文を投稿すると文が画像の下に表示されて(回り込んで)見にくくなるんです。
211Name_Not_Found:2006/12/09(土) 02:46:24 ID:???
>>210
借りた掲示板に聞くのが王道。
どこまでCSSが弄れるのかこっちにわかるわけない。
初心者? 自分で努力なんてしないアホタレですって名乗ってどうする。
大体、単に左寄せ→右寄せだけ変えても回り込む事に変わりない。
21279:2006/12/09(土) 06:09:48 ID:???
>>102
遅レスすみません。
positionをfiexdにしたかったのですが
IE6ではまだサポートされていないようだったので
IEでもスクロールに対して
固定するにはどうしたらいいか分からなかったのですが
自己解決しました。

レスありがとうございました。
213207:2006/12/09(土) 11:01:34 ID:???
>>209さん
どうもありがとうございました。大変参考になりました。
214Name_Not_Found:2006/12/09(土) 17:25:46 ID:QFPR4F+O
オススメのプレビュー機能付きCSSエディタってありますでしょうか。
フリーでも有料でも構わないです。

Nvuは、サポートしてるCSSが少ないですし、バグが多くて×
HPビルダーV11の、CSSエディタはプレビュー機能が今、一つ。△。ただ価格的に◎。
GoLiveやDreamweaverは ??
215Name_Not_Found:2006/12/09(土) 17:29:04 ID:???
体験版使ってみたら?
216214:2006/12/09(土) 17:41:49 ID:QFPR4F+O
ごもっとも、ただ、先日から、
フリーソフト、GPLソフト、の検索&インストール
さらに日本語対応化 ってやりまして時間ばっかり過ぎて 
正直、疲れたんです。
GoLiveとDreamweaverの差もよく理解していませんし。
周りに聞ける人がいないんです。

取りあえずGoLiveの体験版いきまが、ご存知の方いるかなと...

217Name_Not_Found:2006/12/09(土) 17:42:18 ID:???
メモ帳
218Name_Not_Found:2006/12/09(土) 18:16:27 ID:???
オススメはこれ。
CSSに特化してます。
ただし、英語のみ。日本語化が待たれます

TopStyle
http://www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle

フリーのLite版もあり、こちらは日本語用パッチがあるようです
http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdView=lite
日本語化パッチ
http://www.vector.co.jp/soft/win95/net/se259212.html
219Name_Not_Found:2006/12/09(土) 18:21:24 ID:???
スレ違いだろ
220Name_Not_Found:2006/12/09(土) 22:54:11 ID:???
(゚ε゚)キニシナイ!!
221Name_Not_Found:2006/12/10(日) 01:25:22 ID:???
http://kaede.blog.abk.nu/0382

これやってるんだけど
IEでちょろっと見える感じ嫌なんだけど
もっといい方法ありませんか?
222Name_Not_Found:2006/12/10(日) 01:48:34 ID:???
>>221
spanに何て文字入れてんの?
223Name_Not_Found:2006/12/10(日) 01:50:02 ID:???
これはひどい
224221:2006/12/10(日) 01:58:07 ID:???
<img>使うことにしました・・・
225Name_Not_Found:2006/12/10(日) 11:59:35 ID:C8/ID5XV
あるフォルダにindex.htmlと、style.cssと、サブフォルダを置き、
サブフォルダ内にはhoge.htmlを置いています。
このhoge.htmlにstyle.cssを適用させる場合、href="../style.css"になるんでしょうか。
今までindexと同じようにhref="style.css"と書いていてちゃんと表示されているのですが、
間違いだったのかなとふと疑問になりました。IE6とFireFoxで確認していますが、
これじゃちゃんと表示できないとか、そういったことはあるんでしょうか。
よろしくおねがいします。
226Name_Not_Found:2006/12/10(日) 12:11:05 ID:???
そうです!探してたタイプです。
htmlのプレビューはPro版からのようですが、取りあえずトライアルを使ってみます。

現行のTopStyle Liteの日本語パッチは下記でした。(動作確認済み)
TopStyle Lite Ver3.10 β04
http://www.vector.co.jp/soft/winnt/net/se285924.html

ありがとうございます m(_ _"m)ペコリ

Pro版の日本語版が欲しい..
227Name_Not_Found:2006/12/10(日) 12:33:21 ID:???
>>255
今までそれでちゃんとCSSが適用されてたのなら、ベースエイチリファを設定してあるんじゃないのか?
普通は上位ディレクトリを参照しなきゃならないんだが。
228Name_Not_Found:2006/12/10(日) 14:23:00 ID:???
*{ font-size:xx%; }

と指定しておくと、1emが1pxの感覚で使えて、段組の単位にも使いまわしやすい、
みたいな記事を読んだ記憶があるんですが、ソースが激しく不明です。
誰か知ってる人いませんか?

日本語でおkは勘弁(;´Д`)
229Name_Not_Found:2006/12/10(日) 14:46:19 ID:???
>>228
全くそんなことナッシング。
全称セレクタにフォントサイズ指定はしないでおK。
230Name_Not_Found:2006/12/10(日) 15:14:07 ID:???
>>229
ありがとうございました。
231225:2006/12/10(日) 17:15:30 ID:???
>>227
回答ありがとうございます。
ベースエイチリファとはなんなのでしょうか。ぐぐってもそれらしき言葉が引っ掛からず…。
そういうものを設定した覚えがないので、急いで直してきます。
232Name_Not_Found:2006/12/10(日) 18:13:55 ID:???
>>231
すまん、
ttp://www.asahi-net.or.jp/~SD5A-UCD/rec-html401j/struct/links.html#h-12.4
これのこと。設定してないのにCSSが適用されてるってのはちょっと考えにくい。
もし上位ディレクトリを正しく参照したらどうなるの?
233Name_Not_Found:2006/12/10(日) 21:22:47 ID:???
http://jigsaw.w3.org/css-validator/
CSSチェッカってどうなんですか?
皆さんのCSSファイルは満点を取れますか?
234Name_Not_Found:2006/12/10(日) 21:26:53 ID:???
スレ違い
235Name_Not_Found:2006/12/10(日) 21:41:20 ID:???
>>233
取れるよ。でもあんなアホみたいに書くのが本当に必要とは思わないよ。
236Name_Not_Found:2006/12/10(日) 21:44:47 ID:???
余裕で取れるね
取れない方がおかしい
237Name_Not_Found:2006/12/10(日) 22:03:56 ID:???
余裕で取らない。
css3とか独自拡張とか。
238Name_Not_Found:2006/12/10(日) 22:28:55 ID:???
これ出っぱなしw

> プロパティ filter は存在しません : alpha(〜
239237:2006/12/10(日) 22:41:05 ID:???
・・・・・独自拡張とはいっても糞IEの独自拡張だけは使いたくねぇorz
240Name_Not_Found:2006/12/10(日) 22:50:15 ID:???
全称でfont-size:100%にしとけば結構便利だけどまずいとこあるかな?
241Name_Not_Found:2006/12/10(日) 22:51:45 ID:W4Le4IR5
同じくしてます。
まずいことは特にないと思いますが。
242Name_Not_Found:2006/12/10(日) 23:04:27 ID:???
そういやIEだとtdのフォントに反映されなくないか?
243Name_Not_Found:2006/12/10(日) 23:13:43 ID:???
244Name_Not_Found:2006/12/11(月) 00:36:25 ID:???
>>243
ありがとう。
245Name_Not_Found:2006/12/11(月) 12:55:01 ID:qZ25lD3X
イメージと文章を垂直方向中央ぞろえしたいのですが、
align="absmiddle"をCSSで実現できますか?
vertical-align: middleだと、微妙にずれます。
246Name_Not_Found:2006/12/11(月) 12:59:13 ID:???
>>245
自己レス
イメージにも、文章にもvertical-align設定するだけだった orz
お騒がせしました。
247Name_Not_Found:2006/12/11(月) 14:54:44 ID:???
騒いでないけどな
248233:2006/12/11(月) 16:21:12 ID:???
皆さんくす。
249Name_Not_Found:2006/12/12(火) 16:44:27 ID:???
#navigation {
display: inline;
margin: 0px;
padding: 0px;
text-align: right;
top: 6px;
right: 40px;
position: absolute;
}

<div id="navigation">
(ここに画像とかテキストとか入る)
</div>


HTMLドキュメントの右端から40ピクセル離れた位置に
画像などでナビゲーションを作りたいと思っています。

ですがこれだと、
・縦スクロールバーがあるときは
 縦スクロールバーから40ピクセルの位置。
・無い時は画面右端から40ピクセルの位置。
といった動作をしてしまいます。

常にドキュメントの端からにはならないでしょうか。
ちなみに、HTMLは横幅可変の画面解像度に依存しない系統の
デザインです。
250Name_Not_Found:2006/12/12(火) 17:00:57 ID:???
>>249
ドキュメントの端はスクロールバーの左端
251249:2006/12/12(火) 17:09:45 ID:???
>>250
レスTHX。
ナビゲーション以外の部分は↓の様になっていて、
スクロールバーの有無によって、ナビゲーションとメインの
右端位置がずれてしまうんですよね…。
position:absolute 以外の解決法を使うべきか…?

#navigation {
中略(249と同じ)
right: 40px;
position: absolute;
}

#main {
margin: 0;
margin-right: 40px;
padding: 0;
}


<div id="navigation">
(ここに画像とかテキストとか入る)
</div>

<div id="main">
メインのテキスト。
</div>
252Name_Not_Found:2006/12/12(火) 19:44:32 ID:???
>>249
大枠のdivで囲って右margin取ればいいじゃん。
253Name_Not_Found:2006/12/12(火) 21:20:26 ID:???
cssを適用できるのって、bodyがルートなんでしょうか?
254Name_Not_Found:2006/12/12(火) 22:23:39 ID:???
>>253
htmlからなんだけど、htmlは無視するのもあるからやらない方がいいよ。継承、透過が目茶苦茶になる。htmlにあんまり必要もないでしょ。

そんなアホブラウザは無視していいんだという人も時々いるよ。
255Name_Not_Found:2006/12/12(火) 22:55:57 ID:Jf+BDBXs
http://webbingstudio.com/bruna_arts/
上のサイトの左側メニュー「全商品リスト」〜「食器」のように
文字上だけでなくボックス全体をリンクするにはどうすればいいですか?
256255:2006/12/12(火) 23:01:09 ID:Jf+BDBXs
自己解決しました
257Name_Not_Found:2006/12/12(火) 23:42:25 ID:???
なぜもう5分、書き込むのを待てなかったんだろう。
258255:2006/12/12(火) 23:49:11 ID:Jf+BDBXs
すみません。
書き込んだ後、少し考えて<a>を装飾してみたらどうなるかと思い、
実行したところできてしまいました。
259Name_Not_Found:2006/12/13(水) 07:26:49 ID:???
解決できたんだから、それでいいじゃないか
260Name_Not_Found:2006/12/13(水) 17:50:20 ID:???
一つの行にある複数の画像を均等割付したいんですが ググって見つけた方法
text-align: justify;
でやってみたところ 上手くいきませんでした(Firefox1.5 IE6)
画像での均等割付は不可能なのでしょうか?
261Name_Not_Found:2006/12/13(水) 19:59:31 ID:???
>>260
画像は無理だと思う。思うってのは明確なソースを探すのが面倒だから。
また、IEでの文字均等割付けにはtext-justifyの指定も必要。
まあもし出来たとしてもwindowsの一部UAだけの表示だろうし、
君もソース出してないんだし、他の方法を考えるんだね。
262Name_Not_Found:2006/12/14(木) 01:24:56 ID:EaJjM8Lc
質問です。
CSSのfloatで以下のようなレイアウトは可能ですか?
「aaa…」は段落無しの連続した文章です。
(間違えて過疎スレにも書き込んでしまいマルチになってしまいました。すみません。)

aaaaaaaaa┌─┐
aaaaaaaaa│画│
aaaaaaaaa└─┘
┌─┐aaaaaaaaa
│画│aaaaaaaaa
└─┘aaaaa
263Name_Not_Found:2006/12/14(木) 02:29:02 ID:???
>>262
無理です
264Name_Not_Found:2006/12/14(木) 02:32:52 ID:???
>>263
ありがとうございました。やはり出来ませんよね。
265Name_Not_Found:2006/12/14(木) 02:48:33 ID:???
普通にできるだろ
266Name_Not_Found:2006/12/14(木) 03:01:09 ID:???
鵜呑みにする質問者もあまりに勉強不足だと・・・
267262:2006/12/14(木) 03:12:58 ID:???
え?出来るんですか???
是非教えてください。
268Name_Not_Found:2006/12/14(木) 03:50:50 ID:2QPSZoth
余裕で出来るだろ・・・
269Name_Not_Found:2006/12/14(木) 04:00:53 ID:2QPSZoth
それぞれイメージにIDかクラス付けて
右と左のフロートを設定すれば良いだけかと
クリアの必要もないんだな・・・

(これ<p>で囲んでクリアするんだな、勉強になるな)
270Name_Not_Found:2006/12/14(木) 04:45:44 ID:???
段落なしでそ?
pの中で全部やらなきゃダメじゃん
271Name_Not_Found:2006/12/14(木) 04:51:46 ID:2QPSZoth
すまん、それは続く次の文章に対してです。
272Name_Not_Found:2006/12/14(木) 04:56:37 ID:2QPSZoth
俺も質問
<DIV>ってブロック要素なのに<p>みたいになんで改行入らないの?
不思議では?
273Name_Not_Found:2006/12/14(木) 04:58:36 ID:2QPSZoth
http://www.tohoho-web.com/html/div.htm
ここにも改行入るって書いてあるんだけど?
仕様変わった?(まあ、入ったら困るけど)
274Name_Not_Found:2006/12/14(木) 07:19:52 ID:???
とほほ は 内容もとほほなんで、参考にしない方が身のため。

改行する/しないはブラウザの勝手なんで、余白とりたいならcssでマージン設定してやれ
275Name_Not_Found:2006/12/14(木) 07:53:35 ID:???
<div>を知っている視覚系ブラウザなのにデフォで改行しない物の具体例を挙げてくれ。
276Name_Not_Found:2006/12/14(木) 09:27:07 ID:???
>>275
ブラウザが新しいとかそういうのでなく
277260:2006/12/14(木) 10:25:23 ID:???
>>261
厨っぽい質問で叩かれるだろうなと後悔してたのに 優しく回答していただいて
本当にありがとうございます
色々試してみましたが無理っぽいですね
やはりtableを使うしかないのか… 気が引けるなぁ
278Name_Not_Found:2006/12/14(木) 12:39:24 ID:2QPSZoth
>>274
ごめん、改行って下に続くって事かな?

<p><ol><ul>
などの1行空くそれかと思った

同じブロック要素なのにこの差は何?
279Name_Not_Found:2006/12/14(木) 13:15:40 ID:???
>>272
あいう<div>えお</div>
ってやったら改行されたお( ^ω^)?
280Name_Not_Found:2006/12/14(木) 14:20:18 ID:2QPSZoth
ありがとう
<DIV>に対しては改行されなくて
文字だと改行されるのかな?

もう一つ質問
floatを使って
縦に長い<DIV>に右に2つその半分の長さの<DIV>
をくっつけたいんだが・・・
ブラウザによって表示が違ってしまいます
どうしたら良いですか?
281Name_Not_Found:2006/12/14(木) 14:23:18 ID:???
ハコの
外の幅と中の幅と全体の幅のバランスがおかしいとかがよくある原因みたいだぞ
282Name_Not_Found:2006/12/14(木) 14:45:50 ID:2QPSZoth
ごめん、ブラウザの問題じゃないな
やっぱり無理みたい

右は全体を1つの箱に2つ入れないと無理かも
(バラバラ3つの箱を作ってた)
ちょっと勉強してみる
283Name_Not_Found:2006/12/14(木) 14:59:13 ID:???
1行空くとか言ってるけど、pとかはブラウザのデフォルトスタイルでマージンがとられているだけの話。
divに何でマージンがないって、逆に汎用ブロックにデフォルトでマージンがあったらおかしいだろ。
284Name_Not_Found:2006/12/14(木) 15:04:01 ID:XtINz4lG
tableで20000×20位の表を表示させようとすると、200MBメモリを使って、
表示されるまでにかなり時間がかかってしまいます。

こういうのはCSSを使うと、メモリや速度はどうなりますでしょうか?
285Name_Not_Found:2006/12/14(木) 15:05:53 ID:???
>>284
cssでも、table でも、20000x20の表データなんて、だーーーれも見ないから、気にしなくて良い。
286Name_Not_Found:2006/12/14(木) 15:07:20 ID:???
たぶん実行速度の差が知りたいのだろうから
テーブルが重く感じるのは中身が重いとき全部読み込むまで表示されないからじゃないの?
DIVはしらん
287Name_Not_Found:2006/12/14(木) 15:10:16 ID:???
>>280
<div>にwidthとflortを指定すると改行にはならないはず

用途は違うけど2カラム 3カラムをキーワードに検索したほうがいいと思う
もちろんCSSもキーワードに組み合わせてね
288280:2006/12/14(木) 15:22:07 ID:2QPSZoth
>>280のをやろうとすると
DIVでどんどんグループ化していかないと駄目みたいだった。
全体からDIVで囲まないと駄目ぽい
(プロとして恥ずかしくないスタイルシートの大原則読んでみた)
たぶん合ってる
289Name_Not_Found:2006/12/14(木) 16:12:24 ID:???
何やりたいのかさっぱり判らないが、3カラムは書く順番が決まってる。
上っ面だけ理解したつもりは最も危険。ちゃんと勉強しよう。
290Name_Not_Found:2006/12/14(木) 16:15:53 ID:???
ヘッド部
----ハコ-----
|3.  2  .1.|
|   右 右|
------------
フッター部
だっけ?
291280:2006/12/14(木) 16:45:23 ID:2QPSZoth
>>289
全くハコなしで
12
13
(1と1は繋がってる)
って並べようとしてた
1と2・3は別のDIVで囲まないといけないのが分かった

でも、ページ全体をDIVで囲む必要はなくて
段組みたい所だけでも良い?
292Name_Not_Found:2006/12/14(木) 17:02:18 ID:???
>>291
スマン、3ペインだったか。言ってる通り、2カラムの考え方でいいよ。
2・3はdivで囲む。1がボックス要素なら基本的に+divはいらない。
全体を囲むdivはデザインによっては必要。
293280:2006/12/14(木) 17:31:28 ID:2QPSZoth
ASPとかJSPから
それぞれDIVを出力するなら
全体はDIVで囲まないの?
サーバーズサイド、まだ使ったことないけど
294Name_Not_Found:2006/12/14(木) 19:35:31 ID:???
好きにしろ。
295Name_Not_Found:2006/12/15(金) 05:09:17 ID:???
262ではないのですが>>262が出来ないです。
FirefoXやOPERAではちゃんと出来るがIEだけできません。
やり方を教えて下さい。
296Name_Not_Found:2006/12/15(金) 05:18:01 ID:???
まずは問題が発症する最小構成のソースうpからだ。
297Name_Not_Found:2006/12/15(金) 12:50:23 ID:???
プロバイダーがアクセス規制に引っ掛かってるから携帯からしか書き込めないので、ソースを出すのはキツイです。
基本的には
画像右フロート、画像左フロートとクリア右、長い文って感じですがIEだと両方の画像が上に来てしまいます。
298Name_Not_Found:2006/12/15(金) 15:30:45 ID:???
>>295

.a {
float:left;
}

.b {
float:right;
}
==================================================
<p>
<img src="xxx" class="a" />
hogehogehogehoge
hogehogehogehoge
hogehogehogehoge
<img src="yyy" class="b" />
hogehogehogehoge
hogehogehogehoge
</p>

とりあえずこれで表示は問題無かった

ところで、この場合ってclearは必要なんだろうか?
p要素内とp要素の弟要素では不具合が出ないぽいんだが・・・

clearさせるならp要素内でする必要があるだろうし、そうなったら:after擬似要素か?
299284:2006/12/15(金) 16:21:22 ID:HvX7OtBE
昨日の、20000x20の表ですが、
<table>
 <tr>
  <th></th>
   <td>X</td>
   ・・・合計20個
   <td>X</td>
 </tr>
 ・・・合計20000個
 <tr>
  <th></th>
   <td>X</td>
   ・・・合計20個
   <td>X</td>
 </tr>
<table>
と言うのを、
table>
 <tr>
  <th></th>
   <td>X</td>
   ・・・合計20個
   <td>X</td>
 </tr>
<table>
 ・・・合計20000個
てしたらすぐに表示されるようになりました。

一行毎にサイズがずれるのですが、CSSで指定して問題なしです。
初心者なのでこうのに引っかかってました。
300Name_Not_Found:2006/12/15(金) 16:35:23 ID:???
>>299
<col>
301Name_Not_Found:2006/12/15(金) 16:41:05 ID:???
>>299
CSS関係ないっての。
302284:2006/12/15(金) 16:44:53 ID:???
ああ、おっしゃる通りすいませんです。色々試します。失礼しました。
303Name_Not_Found:2006/12/15(金) 16:49:45 ID:cbgNixg/

*{
margin: 0px;
padding: 0px;
}
<ul id="navi">
<li><a href="#">リンク</a></li>
<li><a href="xx">リンク</a></li>
<li><a href="xx">リンク</a></li>
<li><a href="xx">リンク</a></li>
<li><a href="xx">リンク</a></li>
</ul>

こういった感じでリンクリストをcssでメニュー用の装飾をやっています
#navi li {
list-style-type: none;
display: block;
}
で、IE6ではボタンのマーカーが消えて、リンクが領域の左側に隙間無く配置されますが
IE5.0ではマーカーは消えますが、その領域の左側の間に一文字くらいの空きができてしまいます
この隙間はどうすれば無くす事ができるのでしょうか
304Name_Not_Found:2006/12/15(金) 16:55:03 ID:eSGJ5o4R
ホームページの鍵タグってどんなタグだかどなたか教えていただけませんか?
305Name_Not_Found:2006/12/15(金) 17:18:28 ID:???
>>303
バグ辞典見てみたが、そういう例は報告されてない。
個人的にはIE5なんてどうでもいいし。
それにそのソースの場合、display:block;は必要ないんでは。
306Name_Not_Found:2006/12/15(金) 22:39:52 ID:???
CSS Tab Designerなるツールでタブ構成を作ってみたのですが、
ttp://www.highdots.com/css-tab-designer/
選択されたタブが、次に他のタブを選択するまでは
常時フォーカスされているような表示を追加するには、
どのような記述が必要ですか?
JavaScriptの併用なども必要ですか?
307Name_Not_Found:2006/12/15(金) 23:32:23 ID:???
>>306
どんなソフトで作ったかは問題ではない。どういうソースが出来たのか、だ。
DLして試せってのは勘弁してくれ。
だからテキトーに答えるが、
選択タブを表示してる要素にclassなりIDなり振って、focusしてる時の画像だか色だかを指定。
308Name_Not_Found:2006/12/15(金) 23:55:16 ID:???
>>307
d。試してみます。
309Name_Not_Found:2006/12/16(土) 00:10:42 ID:???
「できる」のと、「実用レベルでできる」のとは違うよね。
すぐにCSSでは無理がある要求が出てくるんだから、最初からスクリプトで作れって。
310Name_Not_Found:2006/12/16(土) 00:50:26 ID:???
↑本日のばか
311Name_Not_Found:2006/12/16(土) 14:04:35 ID:???
>>303
ulにwidthかheight指定してるならそれが原因
312312:2006/12/18(月) 01:33:18 ID:T3G8KnWd
高さ100%のボックスを作りたいのですが、できません。
間違っている部分をご指摘ください。
参考にしているサイト:http://www.stylish-style.com/csstec/ultimate/height100.html
[html]
<html>
<head>略</head>
<body>
<div id="outline">内容略</div>
</body>
[css]
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
}
div#outline{
height:100%;
min-height:100%;
position:relative;
left:50%;margin:0 0 0 -390px auto;/* 左右中央表示 */
width:780px;
border:1 solid black;
}
body > #outline{
height:auto;
}
条件が不十分なら補足要求をお願いします。
313Name_Not_Found:2006/12/18(月) 01:48:50 ID:???
>>312
border:1 solid black;
margin:0 0 0 -390px auto;
314Name_Not_Found:2006/12/18(月) 07:51:26 ID:???
ボックスを横に2つ並べて
左側のボックスの横幅を200pxに設定し、右のボックスの横幅は残りの横幅(100%-200px)に
したのですが、どうすればよいのでしょうか?
315Name_Not_Found:2006/12/18(月) 09:02:50 ID:Qia5fm1N
>>303
アンカをblockにしてみても一緒かな?
316Name_Not_Found:2006/12/18(月) 09:03:45 ID:???
ゴメス、sage忘れた
317Name_Not_Found:2006/12/18(月) 09:23:57 ID:???
XHTML1.1にCSSを組み込もうとしています
単純にテキストの右揃えや左揃えをする際にはtext-alignを使えば良いのですが、
適宜<p style="text-align: right;"> と入れるべきか、外部で.right{ } と定義して呼び出すべきか迷っています。
どちらが美しいと言われるのでしょうか?
318Name_Not_Found:2006/12/18(月) 09:37:50 ID:???
>>317
xhtmlではインラインは不可じゃなかったか?
319Name_Not_Found:2006/12/18(月) 11:08:57 ID:???
>>298
亀だがありがとう。
やっと規制解除になったので一応。
320312:2006/12/18(月) 13:08:01 ID:T3G8KnWd
>>313
border:1 solid black;→0px 1px;
margin:0 0 0 -390px auto;→margin-left:-390px;
こうしましたが、できません。
どのように書き換えればいいのか、ご指摘願います。
321312:2006/12/18(月) 13:33:03 ID:???
>>313
訂正です。
border:1px solid #000000;
border-width:0px 1px;
にしました
322Name_Not_Found:2006/12/18(月) 14:40:00 ID:???
>>318
仕様書読もうぜ
323Name_Not_Found:2006/12/18(月) 18:38:49 ID:???
>>312
とことんアホだな。
参考サイトから丸コピ時点で問題ないだろ。アレンジするなら、ちゃんと理解してから。
どうしてもやりたいなら余計な事すんな。最初からやり直せ。
324Name_Not_Found:2006/12/18(月) 21:55:17 ID:???
>>323
答えられないなら余計なこと言うなよ。
スレのクオリティが下がるだろ
325Name_Not_Found:2006/12/18(月) 21:56:34 ID:???
ほんとだ
>>324の存在がこのスレのクオリティを物凄く下げてる
326Name_Not_Found:2006/12/18(月) 22:15:56 ID:???
自演乙
327Name_Not_Found:2006/12/18(月) 22:22:31 ID:???
これだから質問スレは(ry
328Name_Not_Found:2006/12/18(月) 22:28:05 ID:???
>>324みたいにマジで答えがわからないヤツは、このスレの回答者には居ない。
初歩的な理解もしてない人間に、○×式の回答しても無駄って事もよく知ってる。
スレを馬鹿にすんなボケ>>324
329Name_Not_Found:2006/12/18(月) 22:35:39 ID:???
事実だろwボケは>>328
330Name_Not_Found:2006/12/18(月) 22:45:33 ID:???
はいはい
331Name_Not_Found:2006/12/18(月) 22:46:39 ID:???
答えられるんなら答えてあげれば?
332Name_Not_Found:2006/12/18(月) 23:03:44 ID:???
はい、みんな知ったかぶり
333Name_Not_Found:2006/12/18(月) 23:14:03 ID:???
いつからこんな初心者ばかりになったんだ? じゃあ大サービス。
質問者は間違いを指摘されたが、更に間違った直しをしてるんだぜ?
何にも勉強してないって事は明らか。
>margin:0 0 0 -390px auto;→margin-left:-390px;
>border:1 solid black;→border:1px solid #000000; border-width:0px 1px;
>>312のソースになぜmargin-leftが必要なのか? なぜマイナスなのか? positionの意味は?
borderプロパティって何なのか? そもそも何をどうしたいのか?
全く疑問に思わず、調べてもいない。基本も無いくせに応用だけ聞こうって図々しい野郎なんだよ。
334Name_Not_Found:2006/12/18(月) 23:40:13 ID:WkyloGhV
画像の上部に約10pxほどの謎の余白ができています。

CSSでデザインをしているのですが、画像自体には、CSS指定しておらず
それに余白が付加されるような文章はありませんでした。

FireFoxで見ると正しく(謎の余白がなく)表示されています。
IE6.0(恐らく他のIEでも)で見た際の問題です。

CSSで解決する方法をご存知の方宜しければご教授お願いいたします。
335Name_Not_Found:2006/12/18(月) 23:43:36 ID:1VXEloXj
_とか?
336Name_Not_Found:2006/12/18(月) 23:53:44 ID:???
>>334
文字
<img...>となる場合、文字の最後にbr入れると隙間が出来なかったりする
あとはline-heightとか
337Name_Not_Found:2006/12/19(火) 00:01:01 ID:???
>>333
左右中央表示ってコメント入ってるじゃん。
参考サイトに同じのがあったよ、
中央表示にしてボックスの横幅半分をmargin-leftで左にずらすっての。
ま、オレはそれしか気づけなかったが、>>333も不注意だな
338Name_Not_Found:2006/12/19(火) 00:10:37 ID:???
へえ。中央表示ってのはmargin-left:-360px;とpositionでやるもんなんだ。
>>337を筆頭にどんどんレベル下がっていくな。
339Name_Not_Found:2006/12/19(火) 00:17:01 ID:???
>>334
img{vertiacl-align:top}だったっけ
340Name_Not_Found:2006/12/19(火) 00:43:15 ID:???
>>334 >>336

どれも駄目でした。

その画像はラインで文字などは含まれてません。

<p class=""></p>
<img src=" width="" height="" alt="" />

と言う形なんですが何か問題があるのでしょうか?
341Name_Not_Found:2006/12/19(火) 00:49:21 ID:???
css出した方が早いとおも。
342Name_Not_Found:2006/12/19(火) 00:53:39 ID:???
<p class="name">・・・</p>
<img src="" width="400" height="1" alt="" />


p.name{
float:right;
font-size:11px;
color:#696969;
visibility:visible !important;
visibility:hidden;
margin:15px 3px 3px 0;
}

です。
343Name_Not_Found:2006/12/19(火) 01:21:09 ID:???
>>342
謎の余白って、画像はぴったりウィンドウ上辺にくっつけたいって事?

それから最初の質問番号入れてね。
344Name_Not_Found:2006/12/19(火) 02:02:25 ID:???
>>342
pに入れてline-height
345Name_Not_Found:2006/12/19(火) 02:25:35 ID:???
pのmargin、下に3pxとってあるんだけどそれは何の為に。
346Name_Not_Found:2006/12/19(火) 08:38:46 ID:???
下に3px空けたいからです。
347Name_Not_Found:2006/12/19(火) 09:11:04 ID:???
最初のレス番くらい書けないのかよ。。
348Name_Not_Found:2006/12/19(火) 09:49:12 ID:???
>>342
<img src="" width="400" height="1" alt="" /><br />
349Name_Not_Found:2006/12/19(火) 11:07:00 ID:???
しばらくぶりに来てみたが・・・

いつからこんな低レベルになったんだ?
350Name_Not_Found:2006/12/19(火) 16:16:33 ID:???
やっぱゆとり教育が大失敗だったんじゃないかと。
351Name_Not_Found:2006/12/19(火) 17:08:10 ID:???
仕事として成立するようになって来ると、良質の回答は消えて行く。CSSも例外ではないということだ。
352Name_Not_Found:2006/12/19(火) 18:22:01 ID:???
便所の落書きにレベルも糞も無いだろう
353Name_Not_Found:2006/12/19(火) 18:36:03 ID:???
公衆便所の壁にCSSが書いてあったら嫌だな…
別の人が後から修正した後があったりして…
354Name_Not_Found:2006/12/19(火) 18:49:06 ID:???
WEBヤギの目でググって便所の落書き見ろ
355Name_Not_Found:2006/12/19(火) 19:12:28 ID:???
便所の壁に<body>二つとか書いてあったら発狂しそう
356Name_Not_Found:2006/12/19(火) 19:17:01 ID:???
WinIEへの文句・恨みが延々と書かれてるのも怖いな
357334:2006/12/19(火) 19:30:59 ID:???
失礼しました。レス番入れました。

<img src="" width="400" height="1" alt="" /><br />
でしたができません。変わりませんでした。

line-heightでも駄目でした。
358Name_Not_Found:2006/12/19(火) 20:03:21 ID:???
>>357
img に display: block
359334:2006/12/19(火) 20:10:02 ID:???
>>358

どうも。確かに上の余白は消えました。
しかし、下に同様の余白が発生しました・・・
360Name_Not_Found:2006/12/19(火) 20:16:30 ID:???
>>359
margin全部殺してる?
361358:2006/12/19(火) 20:19:24 ID:???
>>359
画像の下にか?再現しないが。
今ソースはどうなってる?
362334:2006/12/19(火) 20:23:52 ID:???
<p class="name">・・・</p>
<img src="" width="400" height="1" class="name2" alt="" />

p.name{
float:right;
font-size:11px;
color:#696969;
visibility:visible !important;
visibility:hidden;
margin:15px 3px 3px 0;
}

.name2{
display: block
}

です。
363358:2006/12/19(火) 20:33:04 ID:???
再現しないな。
imgの後はどうなってる?
364334:2006/12/19(火) 20:40:27 ID:???
<p class="name">・・・</p>
<img src="" width="400" height="1" class="name2" alt="" />
<h2></h2>

h2{
font-size:12px;
margin:15px 0 18px 0;
padding:0 0 0 7px;
}

です。
365Name_Not_Found:2006/12/19(火) 20:43:33 ID:???
俺も前に同じようにPの後に画像って作りしたら、
WinIEだけ10pxくらい隙間ができたことがあったなぁ
どうしたか忘れた…
366358:2006/12/19(火) 20:51:26 ID:???
>>364
h2の上マージン分以外に余白はできんが。
そのp、img、h2だけのソースでもなるか?
IEのバージョンは?
367334:2006/12/19(火) 20:53:05 ID:???
IE6.0です。
368358:2006/12/19(火) 20:59:21 ID:???
最小構成でも再現するかどうか聞いてるんだが
369Name_Not_Found:2006/12/19(火) 21:01:33 ID:???
>>334
そのページのURIを晒せ
もしくはどっかにアップしてそこを晒せ
オマイの伝え方が下手すぎて話にならん
370334:2006/12/19(火) 21:02:46 ID:???
再現するというのは、その余白ができるのかと言うことなんでしょうか?

p img h2 のCSSを除いても余白ができました。
371334:2006/12/19(火) 21:24:54 ID:???
仕事ですので公開できません。
初めての経験でなにが原因なのか分からない為、
うまく説明ができません。申し訳ない。
372358:2006/12/19(火) 21:25:47 ID:???
>>370
ち が う
p img h2 だけにして(CSSそのまま)同じように余白ができるかどうかだ。
373334:2006/12/19(火) 21:31:32 ID:???
同じように余白ができました。
374358:2006/12/19(火) 21:37:05 ID:???
>>373
h2の上マージンを 0 にしてもか?
375Name_Not_Found:2006/12/19(火) 21:40:25 ID:???
こりゃその部分の構造だけでもアップしなきゃ進展なさげ。
376334:2006/12/19(火) 21:40:34 ID:???
はい、そうです。
377Name_Not_Found:2006/12/19(火) 21:44:43 ID:???
一体どんな風にしたいのか、絵に描いてみろ。AAでもいい。
378358:2006/12/19(火) 21:47:22 ID:???
埒あかないから、そのimg付近のソース全部晒して、
書いたCSSファイルまるごと、どっかのロダにでもアップしてくれ
379334:2006/12/19(火) 22:03:09 ID:???
アップしました目欄を。
http://www.bnbest.net/uploader/upload.html
380358:2006/12/19(火) 22:25:40 ID:???
ちょっと待て。
このソースだと p の float: right が意味わかんないんだけど。
何がしたいの?
381334:2006/12/19(火) 22:30:52 ID:???
<p></p>で囲った日付は、javascriptを使い
フラッシュで文字の呼び出していて、右寄せのために使ってます。
382358:2006/12/19(火) 22:46:31 ID:???
floatの使い方間違ってる。
javascriptでその部分にobjectタグを書き出してるってことか?
それを右寄せしたいなら、 p の float: right は消してobjectに margin: 0 0 0 auto; だ。
383358:2006/12/19(火) 22:58:07 ID:???
あー違う違う、何言ってんだ俺は。
p の float: right の代わりに text-align: right だ。
384334:2006/12/19(火) 23:05:59 ID:???
text-align: right;だと左に寄ってしまうんですよ・・・
どうすれば・・・


385358:2006/12/19(火) 23:09:51 ID:???
#a p object { display: block; margin: 0 0 0 auto; }
これでどう?
386Name_Not_Found:2006/12/19(火) 23:12:31 ID:???
>334 >仕事ですので公開できません。

プロなら身の丈わきまえて作ったら?
387Name_Not_Found:2006/12/19(火) 23:16:51 ID:???
手取足取り教わらないとできないプロ
解決能力のの欠如したプロ

>358 そのへんで終わりにしておけ。
388334:2006/12/19(火) 23:17:35 ID:???
できません・・・

余白も消えません。
floatバグが多いように見受けられますがその類ですかね?




389358:2006/12/19(火) 23:27:14 ID:???
floatは消せと言ってるんだが。

だめだなこりゃ。ブラウザか頭か、どっちかがぶっ壊れてるとしか思えん。
390334:2006/12/19(火) 23:32:04 ID:???
もちろん float を消した上で試しましたが
寄せることもできず、余白も消えませんでした。

FireFoxではちゃんと表示されているのでIEでの解釈の仕方が
違うんですよね。そこに重点置いて調べてみます。


391Name_Not_Found:2006/12/19(火) 23:45:08 ID:???
うえ、なんだこりゃ。Pの中身が表示されねー
392Name_Not_Found:2006/12/19(火) 23:49:31 ID:???
余白出来なかったぞ
393334:2006/12/19(火) 23:52:47 ID:???
>>391
その文字は、Flashにてアンチエイリアスした文字を呼び出すために
わざと元の文字を表示されないようにしてありますよ。

読み込みの際に表示されることが多々あるので。

確認されているバグなどいろいろ探してみます。
>>358さん どうもありがとうございました。
394358:2006/12/19(火) 23:57:25 ID:???
ち ょ っ と 待 て

ひょっとしてこの日付の代わりにFlashが入るんじゃなくて、
両方入れてるってことなのか?
395334:2006/12/20(水) 00:02:49 ID:???
そうなりますね。。。

jsがDOMを捜査しマーカーとなるcssタグを発見するとそれを同じ内容を表示するflashで覆う。
JavaScriptがoffでは普通にテキスト表示されると言う感じです。

396Name_Not_Found:2006/12/20(水) 00:11:57 ID:ydMJEulc
Firefox 2.0 / MacOS 10.4

http://www.netkeiba.com/
の右上にある「競走馬」横の入力ボックスの横サイズとフォントサイズを
変えたいのですがuserContent.cssにどう書けばいいのかわかりません。

<input name="word" size="10" class="org-field" type="text">

この部分です。
input {font-size: 12px !important} は無視されてしまいます。
397358:2006/12/20(水) 00:12:11 ID:???
ひょっとして、JavaScript外してFlashを入れないようにして、
Visibilityのとこ消してテキストを表示させた上で>>358,383のようにしたら、
ちゃんと表示されるんじゃないか?
だとしたらJavaScript側の問題だぞ。
398Name_Not_Found:2006/12/20(水) 00:16:53 ID:???
>>397
うーん、確かに読み込んだ方になんか問題あるのかもネ
>>396
width="?em"だめかネ
399334:2006/12/20(水) 00:29:07 ID:???
駄目でした。

それでも余白は消えません。
のでJavaScriptは問題ないと思います。

バグ一通り目を通して来ましたが同様のバグは
見つけられませんでした。

400Name_Not_Found:2006/12/20(水) 00:33:31 ID:???
.org-field { border: 1 solid #000000; font-size: 12px; background: #ffffff; color: #000000; height: 18px; }
普通にここ直せばいいんでねーか?
401Name_Not_Found:2006/12/20(水) 00:50:57 ID:???
すいませんが、質問があります。
2枚の画像の座標を合わせて、次の図のように
2枚のセルを重ねるようなイメージにしようとしています。
   __________
 /              / (←alphaで50%半透明、chromaで白を透過
∠_________/
   __________
 /              / (←通常表示
∠_________/

ブラウザで見ると透過も半透明も問題無く表示されています。
が、この状態で印刷をしてみると上の画像だけしか印刷されません。
(色が薄い半透明の状態)
印刷プレビューではブラウザの表示と同じ画像が表示されてるのですが…。

ブラウザはWindowsのIE6です。
ブラウザ表示と同じように印刷をするのは無理なのでしょうか。
ご教授をお願いします。
402Name_Not_Found:2006/12/20(水) 01:03:50 ID:???
>>401
filterはIE独自仕様であり、ブラウザ上の表示を弄くってるだけ。cssでは無い。
半透明表現はPNG画像を重ねるのが一般的であり、IEは7でやっと実装された。
↑であれば、印刷しても同じ。
403Name_Not_Found:2006/12/20(水) 01:48:32 ID:r2cZDarS
webブラウザでスレッドを閲覧した時に下の方に出てくるようになった
「おすすめ2ちゃんねる」とかいう鬱陶しい表示の部分を
Firefox 2.0のuserContent.cssで消してしまいたいのですが
この部分を何とかしてセレクタで指定する方法はないでしょうか?
404Name_Not_Found:2006/12/20(水) 01:59:29 ID:???
専ブラ使いましょうよ
405Name_Not_Found:2006/12/20(水) 02:12:23 ID:???
>>358良い人過ぎるw
他の人では出ないんだから、>>334環境とかの問題じゃない?
406Name_Not_Found:2006/12/20(水) 07:48:51 ID:???
がいしゅつだったらスマソ

position: fixed;
float: left;
でスクロール時でも位置固定のメニューを作ったんですが、IEだと固定されません。
IEでも位置固定されるCSSのメニューを作るにはどうしたらよいでしょう?
407Name_Not_Found:2006/12/20(水) 08:40:27 ID:???
勉強をする。
408Name_Not_Found:2006/12/20(水) 09:37:10 ID:???
>>406
IE7にアップグレードする。
409Name_Not_Found:2006/12/20(水) 11:57:40 ID:???
<p><img>文章</p>

<img>
<p>文章</p>
なんですが
普通<img>はインライン上に置換されるモノという考え方からすると
構造のタグ内に無い下の例はやはり良くないのでしょうか?
410Name_Not_Found:2006/12/20(水) 12:02:33 ID:???
スレ違い
411Name_Not_Found:2006/12/20(水) 17:41:14 ID:???
必要に迫られてCSSを勉強することになった。

既存のサイトについて、CSSでデザインするような仕様に変えて行くことを、
初歩の勉強として、やっていくつもりだけど・・・。

  「 ト ッ プ バ ナ ー 画 像 を セ ン タ リ ン グ す る 」 

これだけで2時間、いろんなサイトやらを眺めてるけど、全然分からん・・・。


どうすればいいですか?
  1.CSSのことを段階的に書いている書籍を購入して勉強
  2.2chで教えて厨
  3.吊ってくる


ってか、「トップバナー画像をセンタリングする」のヒントだけでも教えて下さい。
参考サイトのリンクでもいいんで・・・。お願いします。
412Name_Not_Found:2006/12/20(水) 17:53:42 ID:???
>>411
ヒントだけ
margin:0 auto; あるいは align="center"

  ドアホ以外なら判るだろ?
413Name_Not_Found:2006/12/20(水) 17:57:49 ID:???
>>411
参考サイトくらいテンプレにあるだろ。
414Name_Not_Found:2006/12/20(水) 17:59:36 ID:???
>>412

>>411ですが、align="center" っていうのは使っていいんですが? html 4.01準拠ではないんですよね?
まぁ、margin:0 auto; で分かれって話なのかもしれないですが・・・。何はともあれ、ありがとうございました。

このネタってのは、このスレで話していいのかなぁ・・・。 < html 4.01準拠


やべーよー、わかんねー。
415Name_Not_Found:2006/12/20(水) 18:00:02 ID:???
>>411
画像は 1つの文字と同じ要領で扱えばいいだけです
416Name_Not_Found:2006/12/20(水) 18:06:34 ID:???
>>414
>>412もドアホみたいだから補足しとくと、text-align: center な。
417Name_Not_Found:2006/12/20(水) 18:07:28 ID:???
>>414
むしろ、align="center"を不要にするために使うのがCSS
>>412の回答がドアホなだけwww
418Name_Not_Found:2006/12/20(水) 18:11:46 ID:???
>>411ですが・・・

>>416 >>417 さんの text-align: center で、なんとなく分かりましたw

ありがとうございました♪ それにしても、こんなところでつまづいてて、CSSに馴染めるのだろうか・・・。

419Name_Not_Found:2006/12/20(水) 18:20:49 ID:???
>>411ですが!

あー、よく分かりましたw ありがとうございましたw
420Name_Not_Found:2006/12/20(水) 21:11:26 ID:???
>>418
なにはなくとも「CSS センタリング」でぐぐる先生にお伺え。
よさげなとこがあったら片っ端からブクマにいれとけ。
理屈に当たりたくなったら規格とバグリストみとけ。
421Name_Not_Found:2006/12/21(木) 01:24:04 ID:???
>>411
ちなみに、上下に関しての中央ぞろえは>>7に書いてある。

けど、

自分も読んでみたが、ブロック要素を上下の中央ぞろえする
もっとも適当な方法がわからん・・・
422Name_Not_Found:2006/12/21(木) 01:31:38 ID:???
…他の質問に答えるフリなんかするな、みっともない。
聞きたきゃ自分で質問しろよ。
423Name_Not_Found:2006/12/21(木) 03:26:27 ID:???
>>409
うん。
divでもpでも囲っとくのがオススメ。
424Name_Not_Found:2006/12/21(木) 04:02:52 ID:???
>>422
厨達の冬が来たんだよ。
425Name_Not_Found:2006/12/21(木) 12:00:30 ID:???
中学生や高校生ってもう冬休み入ってんの?
これから暫く、今まで以上に厨質問が相次ぐのか…。
426Name_Not_Found:2006/12/21(木) 13:24:13 ID:???
CSSのCはチンコのC
427Name_Not_Found:2006/12/21(木) 13:36:29 ID:???
すみません、ちょっと質問させてください。
<optgroup label="○○">で指定した文字はセレクトボックス内で
斜体太字以外のスタイルに装飾可能ですか?

font-style :noneだと変化がないのですが。

また、プルダウンメニューのスクロールバーは装飾出来ないのでしょうか?
428Name_Not_Found:2006/12/21(木) 13:51:35 ID:???
normal
429Name_Not_Found:2006/12/21(木) 14:12:16 ID:???
>>428
nomalでもダメでした・・・
430Name_Not_Found:2006/12/21(木) 14:13:32 ID:???
あ、スペルミス。normalもダメ、です。
431Name_Not_Found:2006/12/21(木) 14:45:50 ID:???
>>427
IEは駄目。Fx/OperaはOK。
432Name_Not_Found:2006/12/21(木) 18:44:02 ID:xInYsKfN
<hr>

hr{
width:620px;
height:20px;
border:0;
background-image:url(image.gif);
}

とやって、<hr>に背景画像を引いて、罫線として使いたいのですが
IE6だと、背景画像の周りに薄い色の線が出てしまいます…。
どうすればいいでしょうか?
433Name_Not_Found:2006/12/21(木) 18:59:48 ID:???
>>432
そんなバグは聞いた事がない。君が間違ってるだけだろう。
罫線とはどう表示したいのかわからんが、border指定で済む話だと思う。
434432:2006/12/21(木) 19:21:24 ID:xInYsKfN
>>433
下に向かっている矢印画像を背景として使いたいのです…。

レンダリングは標準モードで、他にCSS指定せず、それのみのHTMLでも
このような状態になってしまいます…。

IE6でもIE7でも同じ症状です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>無題ドキュメント</title>
<style type="text/css">
hr{
width:620px;
height:20px;
border:0;
background-image:url(image.gif);
}
</style>
</head>
<body>
<hr />
</body>
</html>
435Name_Not_Found:2006/12/21(木) 19:27:46 ID:???
hr {
background: url("image.gif") repeat-x;
width: 620px;
height: 20px;
border: 0;
}

でどうだろう
436Name_Not_Found:2006/12/21(木) 20:28:33 ID:???
>>434
罫線だっつったり、矢印だっつったり一貫性の無いヤツ。さっぱりわからん。
repeatしたいのかどうか位はっきり汁。

>>435
ダブルクォーテンションは必要ないぜ。
437Name_Not_Found:2006/12/21(木) 21:09:22 ID:???
>>436
あってもなくてもシングルでもいいんだよ。
ないのが一番対応してるらしい、ってだけ。
438Name_Not_Found:2006/12/21(木) 21:15:56 ID:???
あるとコケるブラウザがあります。従って付けない方が一般的。
439Name_Not_Found:2006/12/21(木) 21:24:24 ID:???
>>436
web標準みたいに言うなよ。
>>438
おまえの一般なんか知るか。
440Name_Not_Found:2006/12/21(木) 21:36:26 ID:???
              (・ω・) オオオオ
           〜  (_ ゚T゚
              ゚ ゚̄
441Name_Not_Found:2006/12/21(木) 22:01:09 ID:???
回答者のフリしなくていいよ>>439
敢えて悪い見本を出して〜なんて屁理屈はごめんだ。
442Name_Not_Found:2006/12/22(金) 00:17:11 ID:???
ページの一番上にヘッダ、一番下にフッタを起きたいんですが、
どうすればできますか?
よろしくお願いいたします。
443442:2006/12/22(金) 00:51:02 ID:???
えっと…質問、無視しておいてくださいOTL
444Name_Not_Found:2006/12/22(金) 00:56:24 ID:???
これは…なかなか良い釣り堀ですね
445442:2006/12/22(金) 00:59:15 ID:???
今日調べてfloatとclearを初めて知りました、
勉強不足でした
446Name_Not_Found:2006/12/22(金) 03:35:30 ID:???
>>441
>>439じゃないけど悪い見本って何?
447Name_Not_Found:2006/12/22(金) 05:24:22 ID:NKHve1FF
white-spaceそれぞれの表示の違いが
いろいろなサイトを見たのですがよくわからないです、
説明していただけませんか?
448Name_Not_Found:2006/12/22(金) 05:44:50 ID:???
>>447
http://hp.vector.co.jp/authors/VA022006/css/text.html

一番下 実例が出ている。
449Name_Not_Found:2006/12/22(金) 05:46:33 ID:???
>>441
なにぬかしてんだ禿げ
450Name_Not_Found:2006/12/22(金) 06:37:55 ID:NKHve1FF
>>448
とてもわかりやすい実例でした!
ありがとうございました。

質問ですが、
float:left;などで回り込みをさせると、
回り込みをした要素と回り込みをさせた要素との間に隙間ができてしまいます。
どうすればなくなってくれますか?お願いします。
451Name_Not_Found:2006/12/22(金) 06:38:11 ID:???
結局仕様よりもノウハウの蓄積だからな。
継承されるから、line-heightで単位無しの指定をするみたいな。
452Name_Not_Found:2006/12/22(金) 06:41:25 ID:???
>>450
まずは
*{margin:0; padding:0;}
ってCSSに書いて、デフォルトの指定を取っ払ってしまうといいよ。
一々指定しないといけないのが手間だけど、
ブラウザ毎の差異がなくなって結果的に早くなる。

その例のみの話でなら、floatさせた要素のmarginを0にすればおk。
453Name_Not_Found:2006/12/22(金) 06:46:34 ID:NKHve1FF
*{
margin: 0px;
padding: 0px;
}
はすでにしていしてあるのですが、
ほかになにか要因はありませんか?
以下、その部分のCSSです。
/* 左メニュー */
#left{
border: 1 solid #000000;
float: left;
height:500px;
width:170px;
}

/* 右メニュー */
#right{
border: 1 solid #000000;
height:550px;
width:586px;
}
454Name_Not_Found:2006/12/22(金) 06:48:43 ID:NKHve1FF
ちなみに、関係あるのかわかりませんが、IE7です
455Name_Not_Found:2006/12/22(金) 07:42:46 ID:???
そのままだとIE以外じゃ

□□■■■
□□■■■
□□■■■
□□■■■
■■■■■

みたいに表示されるね。
同じ表示にしつつ隙間をなくすなら、右メニューもfloatさせるのがいいかな。
あと
border: solid 1px #000000;
って順番にした方がいい。
456Name_Not_Found:2006/12/22(金) 08:25:48 ID:NKHve1FF
>>455
右メニューも右にfloat(ryということですか?
また、solid 1px #000000という表記のほうが一般的だからですか?
それともなにか意味があるのでしょうか
457Name_Not_Found:2006/12/22(金) 08:50:16 ID:???
試してないが、UAによっては順番が違うと上手く表示されない場合があった気がする
あとfloatは右メニューをleftかと
458Name_Not_Found:2006/12/22(金) 08:57:38 ID:NKHve1FF
>>457
float;leftにしたらくっつきました!thx
ただ、floarはあまり使わないほうがいいのでしょうか
45958:2006/12/22(金) 09:01:27 ID:NKHve1FF
かなりタイプミスですorz
float:left;にしたらくっつきました!thx
ただ、floatはあまり使わないほうがいいのでしょうか
460Name_Not_Found:2006/12/22(金) 09:21:45 ID:???
>>459
>ただ、floatはあまり使わないほうがいいのでしょうか
なぜそう思うのか書け。
461Name_Not_Found:2006/12/22(金) 09:22:25 ID:???
状況によっては面倒な場合もあるけど、
基本はちゃんと動作をわかった上で使ってるなら問題ない。
floatは回り込みで、全体の幅が右メニュー+左メニューの幅より狭いと
下の段に行っちゃったりとかするよ。
あとはどこでclearさせるかとか。
46258:2006/12/22(金) 09:30:28 ID:NKHve1FF
>>460
勘違いです(汗
>>457で「上手く表示されない(ry」とあったのがfloatに対してだと思い込んでました。
>>461
一応、基本的な動作は理解しています。
左メニュー幅170,右メニュー幅590(内20がマージン)を外枠760に入れています。
ボーダーはすべて0です。
右メニューの次のフッタ幅760にclearを指定しました。
46358:2006/12/22(金) 09:31:41 ID:NKHve1FF
フッタも外枠に入ってます
みなさん、どうもありがとうございました。
464Name_Not_Found:2006/12/22(金) 09:41:15 ID:???
回答者のレベル下がりまくりだから気にするな。
もっともそのおかげで、あんたも回答して貰えたわけだし、どっちもどっち。
46558:2006/12/22(金) 09:53:27 ID:NKHve1FF
…ミスった…涙
普通に考えたらメイン(右メニュー)を先に書くべきだった…
なんでカテゴリー(左メニュー)のほうが先に…
漏れサイテーだ…
466Name_Not_Found:2006/12/22(金) 09:54:06 ID:???
>>464
冬なんだよ。厨達のな。
46758:2006/12/22(金) 10:02:38 ID:NKHve1FF
工です
468Name_Not_Found:2006/12/22(金) 10:45:14 ID:???
別にお前さんには聞いてナイし
469Name_Not_Found:2006/12/22(金) 12:58:27 ID:???
>>467
ところでお前さんは本当に>>58なのか?
470Name_Not_Found:2006/12/22(金) 13:23:21 ID:???
>>457
そんな腐った仕様は早々に修正されるものじゃまいか?
471Name_Not_Found:2006/12/22(金) 14:27:43 ID:???
初詣で「今年こそIEが亡くなりますように」と祈願します
47258:2006/12/22(金) 14:59:51 ID:???
寝てました
>>469
はい、>>58です。
473Name_Not_Found:2006/12/22(金) 19:07:22 ID:???
>>334
空行の入る場所に、UTF-8のBOMが入ってませんか?
バイナリ表示して確認するとか、該当部分の周りを削除して書き直すとかしてみると直るかもしれません。
474教えてちゃん:2006/12/22(金) 19:27:30 ID:SHbojDr/
すみません、教えてください。
ヤプログ2カラムのスタイルシートで、幅をヤプ画に合わせていたら、
コメント欄を表示するとスキンが崩れてしまいます。
30ピクセルくらい記事が左に寄って、サイドバーが下に下がる。
http://yaplog.jp/yukarin_marie/

どこを訂正すればいいのか初心者なので分かりません。
どなたか詳しい方、教えてください。
475Name_Not_Found:2006/12/22(金) 19:33:38 ID:???
「初心者なので」と言うのは、自分で調べないことの免罪符にはなりませんよ。
476Name_Not_Found:2006/12/22(金) 20:23:19 ID:???
CSSは、プロパティ:値; の羅列、つまり、ただの設定ファイル。
設定ファイルの書き方を教えるくらいもったいぶるなよ低脳www
逆に、設定ファイルの書き方をわざわざ質問すんじゃねえと言えるが、
こうしてスレがあって順調に消化していっているわけだから、あっさり答えてやれよ。
477Name_Not_Found:2006/12/22(金) 20:36:54 ID:???
>>474
高脳の>>476様が答えてくださるようです。
478Name_Not_Found:2006/12/22(金) 20:47:24 ID:???
>>474
名前が良くない。
>>211を参考に
「自分で努力なんてしないアホタレです」に変えてリトライすれ
479Name_Not_Found:2006/12/22(金) 20:49:43 ID:???
>>474
釣り・・?
釣りじゃないなら今後のためにも、自分で調べる・テンプレ読むくらいした方がいいぞ。
480教えてちゃん:2006/12/22(金) 22:06:00 ID:SHbojDr/
できたよ、あっちこっちいじっていたらできた。
txtというところの幅を18pxくらい縮めたらできました。
http://yaplog.jp/alicia_go_go/
これが本当のアドだよ!!
お洋服買ってネ★
481Name_Not_Found:2006/12/22(金) 22:18:10 ID:???
w
スパムも進化したな
482Name_Not_Found:2006/12/22(金) 23:34:58 ID:???
>>480
カーソルがキモ杉
483Name_Not_Found:2006/12/23(土) 11:41:38 ID:rPJ7y5BI
l<link href=" 〜 media="print">で印刷用のcssを作っています
基本的にいらない部分をdisplay: none;で非表示にし、レイアウトを揃えたいのですが
一度消したID部分が関係の無さそうなIDを弄ったらまた表示されたりと、cssに指定するルールがどうも理解できません
この印刷用cssについて詳しく解説している所などありましたら教えて下さい…
484Name_Not_Found:2006/12/23(土) 12:13:11 ID:???
>>483
それは印刷用CSS特有の問題ではなくて、セレクタ絡みの問題では?
問題が出た部分のソースを出すとよいと思う。
485Name_Not_Found:2006/12/23(土) 14:35:52 ID:???
フロートに関して質問です。
<p style="border: 1px solid black">
ほげほげ
<span style="float: left; width: 5em; border: 1px solid red">フロート</span>
ふがふが
</p>
このようなHTMLを表示させると
┌─────────┐
│ほげほげ ふがふが │
├────┬────┘
│フロート│
└────┘
このようにフロートが包含ブロックの下に来るのですが、
┌─────────┐
│ほげほげ │
├────┐ │
│フロート│ふがふが│
└────┴────┘
このようにならないのはなぜなんでしょうか。また、ウィンドウの幅を縮める
とフロートが包含ブロックの中に入るのですが、どうしてなのか、
http://www.w3.org/TR/CSS21/visuren#floats を読んでもよく分かりませんでした。
486Name_Not_Found:2006/12/23(土) 14:52:49 ID:???
>>485
それ以前にマークアップ的におかしい。
ちなみにIE・FXではそういう表示になるが、Opera・Safariではまた違った表示になる。
487485:2006/12/23(土) 16:14:02 ID:???
>>486
ありがとうございます。確かにOperaで見たら下図のように表示されました。
┌────┬─────────┐
│フロート│ほげほげ ふがふが │
└────┴─────────┘
しかし、ウィンドウの幅を狭めると>>485の上の図のようになりました。

仕様としてはOperaとIE/Fxのどちらの動作が正しいんでしょうか。仕様書の

>If there's a line box, the top of the floated box is aligned with the
top of the current line box.

>If there isn't enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.

このあたりが関係していると思うのですが...
488Name_Not_Found:2006/12/23(土) 17:35:15 ID:???
>>487
floatは、左右に寄せるプロパティではなく、左右に浮動化し回り込みを許可するプロパティ。
この回り込みが、何時如何なる時も後続の要素に限られるなら、IE・FXが正しいのかも知れない。
しかしここで、p {width:7em;}とすると、IE等もOpera等も同じ表示になる。
つまり、Opera・Safariは、浮動化を優先しているという事になる。

君のソースのように短い文章の場合、途中にfloatした要素が挟まれるのはおかしい。
画像だと拡大解釈したとしてもね。
489Name_Not_Found:2006/12/23(土) 17:51:09 ID:CnHxWvUf
ところでおまうら、いわゆる3カラムはどんな方法で作ってる?
有名なのはZeldman方式とBowman方式だと思うんだが、
この前買った本に、中央カラムに左右marginを入れて左右カラムにマイナスmarginを入れるやりかたが載ってて気になった。
俺はBowman方式でやってたんだが、この方式を知ってこっちに変えようかと思っている。
490Name_Not_Found:2006/12/23(土) 18:04:16 ID:???
>>489
メインが最初に書けるから?
メジャーブラウザで問題無いのならいいかもね。
491Name_Not_Found:2006/12/23(土) 18:05:32 ID:???
>>489
中央カラムに左右margin
左右はabsolute
492Name_Not_Found:2006/12/23(土) 18:19:42 ID:???
>>490
>メインが最初に書けるから?
そうそう。 代表的なブラウザで問題が起きた事は無いかな。
ただ、余計なwrapが増えるのが気になるんだよなー。

>>491
そういえばposition使う方法もあったか。
floatと比べて違いとかあるのか気になるところだな。
493485:2006/12/23(土) 18:36:44 ID:???
>>488
> 何時如何なる時も後続の要素に限られる

仕様書には
> Any content in the current line before a floated box is reflowed in
the first available line on the other side of the float.
とあるので、そういうことはないと思います。

もう少し自分で調べてみます。ありがとうございました。
494Name_Not_Found:2006/12/23(土) 18:56:01 ID:64q8uZZ/
特定の画像リンクだけリンクの枠線を表示したいのですが、style="???" の???に入れるのが解りません。
枠線を2pxで表示したいです。宜しくお願いします。

<a href="http://ooooooo.html"><img src="ooo.jpg" style="???" alt="写真" width="300" height="224"></a>
495Name_Not_Found:2006/12/23(土) 18:58:49 ID:???
>>494
なんっっっにも調べてないでしょ自分で。
496495:2006/12/23(土) 19:02:30 ID:64q8uZZ/
枠線を消すというのは沢山あるのですが、表示するというのが見付かりません。
IEとFOXなら無指定でも表示できるのですが、Operaだけは指定しないと表示されないみたいです。
あまりブラウザの事を書くと回答を得られないので外して質問しました。
497Name_Not_Found:2006/12/23(土) 19:02:52 ID:???
>>494
スレタイを100回読み直せ
498495:2006/12/23(土) 19:07:34 ID:64q8uZZ/
このスレには回答できる人がいないみたいなのでもっと知識のある人がいる所に行きますね。
499Name_Not_Found:2006/12/23(土) 19:56:33 ID:???
捨て台詞は、恥の上塗りにしかならない。
500Name_Not_Found:2006/12/23(土) 22:32:12 ID:???
>>488

>何時如何なる時も後続の要素に限られるなら、

>つまり、Opera・Safariは、浮動化を優先しているという事になる。


もう、限界超えてるよバカwwwwwwwwwwwwww
仕様書読めwwwwwwwwwwwwwwww
Operaらが正しい。
超有名な、「FxとIEの意図的なバグ」だろwwwwwwwwwwww
501Name_Not_Found:2006/12/23(土) 23:00:14 ID:???
>>500
有名なバグ?俺も知らないな。
502Name_Not_Found:2006/12/23(土) 23:13:26 ID:???
これの訂正のところだな。
ttp://www.mozilla.gr.jp/standards/webtips0021.html
過去ログでも出ていた話だと思うが。
503Name_Not_Found:2006/12/24(日) 00:00:06 ID:???
>>502
>先行するインライン要素(または匿名インライン)の最後の行(インラインボックス)の上端とfloatした要素の上端(マージン辺)が一致するように配置しなくてはいけません。
一行だとOperaみたいな表示になるって事か。
Mozillaがバグとして認めているんだから、意図的ってのは言い過ぎだろうね。
タマに現れるよね、この感じ悪い人。
504Name_Not_Found:2006/12/24(日) 01:05:45 ID:???
>>498
一ヶ月もしたら自分のレス読み返してみたらいいよ。
赤面すること間違いなしだから。

あと、レス番違うぞ。
505Name_Not_Found:2006/12/24(日) 02:55:57 ID:???
>>488
>君のソースのように短い文章の場合、途中にfloatした要素が挟まれるのはおかしい。
こんなのありがちだと思うけどどうよ。

p { margin-right : 10em ; }
.chushaku { float : right ; width : 10em ; margin-right : -10em ; }
<p>人間は考える葦<span class="chushaku">(イネ科の多年草)</span>である。</p>

p img { float : right ; }
<p>人間は考える葦<img alt="" src="..." title="葦の写真(平成18年12月撮影)"/>である。</p>

>>500
一行だけ「wwww」が無くて、いきなり冷静になってるように見える。
506Name_Not_Found:2006/12/24(日) 03:23:40 ID:???
>>505
無理矢理考えたって感じがするぞw どちらも必然性がないと思う。
507Name_Not_Found:2006/12/24(日) 03:26:31 ID:???
つかvalidなHTML片なんだからおかしいもなにもないだろ
508Name_Not_Found:2006/12/24(日) 03:33:32 ID:???
へーvalidなら何でもいいんだ
509Name_Not_Found:2006/12/24(日) 03:39:47 ID:???
validなら質問する条件は満たしてるだろ
strictに越したことはないが、このスレでstrictであることを要求するのか?
CSS質問スレでHTMLの使い方まで(質問されてもいないのに)指導する必要はない
510Name_Not_Found:2006/12/24(日) 03:57:05 ID:???
質問の条件なんてシラネ
サイトでそんな事やらねってHTML書いて、それを仕様書ではどうのって調べたって意味ないじゃん
そっちがStrictマニアのやる事だろ
511Name_Not_Found:2006/12/24(日) 04:06:35 ID:???
>>510はここのテンプレ見たことないのかな…
512505:2006/12/24(日) 04:14:23 ID:???
>>506
具体例を挙げれば、このタレントの写真とか。
ttp://www.asahi.com/kansai/news/OSK200612220066.html
# 適当に探して取り上げただけで、他意は無い。

注釈のほうは小学生の頃読書感想文を書くために読んだ「トム・ソーヤーの冒険」が
こういうスタイルを採用してたのが印象に残ってるんだけど、
今本棚にある本をいくつか見てみたら全部脚注だった。
割と珍しいスタイルだったのかも。

まあ言いたいことは>>507と同じ。

>>510
日本語でおk
513Name_Not_Found:2006/12/24(日) 04:26:03 ID:???
>>512
長い文章があって途中で写真ってのはよくあるでしょ。
質問してる人は一行以内に収まっちゃう場合の表示を聞いてたし、>>506もそう。
514Name_Not_Found:2006/12/24(日) 04:36:53 ID:???
>>513
俺には>>485は問題点を明確にするために
最小化したソースを載せたようにしか見えないんだが…
515Name_Not_Found:2006/12/24(日) 06:29:35 ID:???
>>514
>>505で短い文章の場合って事で、短文の例を書いてたから無理矢理っぽいって言ったんだよ。
516Name_Not_Found:2006/12/24(日) 15:35:35 ID:???
CSSに関することは置いといて、
過剰に反応するバカばっかだな。
517Name_Not_Found:2006/12/24(日) 15:59:25 ID:uh7Bsdhl
質問させていただきます。

全ページに共通使用する「a.css」というファイルがあるとします。
ある1ページ「ep.html」にのみに使用する「b.css」があるとします。

当然ながら「ep.html」には「b.css」だけでなく、
全ページ共有用の「a.css」も使われています。

「a.css」にはサイト全体の制御ならびに<h1>に関する指定も書いてあります。
ですが、「ep.html」に対しては、「a.css」の<h1>ではなく、
「b.css」に書き込んだ、他のページとは仕様の異なる
<h1>を適用したいと思っています。

「a.css」に書かれている<h1>を無効にして、
「b.css」の<h1>を適用するにはどうしたら良いのでしょうか。

本来なら「b.css」に「a.css」の必要箇所を貼り付け、
「b.css」のみを使用したいところなのですが、
「ep.html」は、自分以外が組んでいる部分もあるため、
弄ることができません・・(その部分にはa.cssが適用されています)

以上の理由から、
「b.css」のみを使用するわけにはいかず、困っています。

良い方法がありましたら
お教えいただければ幸いです。
518Name_Not_Found:2006/12/24(日) 16:05:01 ID:???
>>517
a.cssでこう書いてあるとする
h1{
border: solid 1px #F00;
background-color: #FFC;
}

そうしたらb.cssでこれらプロパティを無効にするには
h1{
border: none;
background-color: transparent;
}
とする。ここから先にb.css用のスタイルを書いていけばいい。
519Name_Not_Found:2006/12/24(日) 16:27:14 ID:???
確かHTMLに直接書き込めばいいんじゃなかったっけ
520517:2006/12/24(日) 16:34:59 ID:???
>>518氏の記述で無事にクリアできました。
迅速なご回答、ありがとうございました。


>>519
直接書き込んだ方が優先されるんですね。
ありがとうございます。
521Name_Not_Found:2006/12/24(日) 18:10:25 ID:???
>>516
煽りあいと話し合いは違うでしょ。
相手の言ってる事を理解したいから話してるだけじゃん。何がいけないんだか。
X'masだってのにギスギスした人間ばかりだよ。。
522Name_Not_Found:2006/12/24(日) 18:55:55 ID:???
>>521
いや、クリスマスなのに2ちゃんなんかやってる人間達*だから*ギスギスなんじゃないか?
・・・オレもw
523Name_Not_Found:2006/12/24(日) 19:07:24 ID:???
<div id="xmas"> 今日は楽しいクリスマス </ div>

#xmas {


}
524Name_Not_Found:2006/12/24(日) 19:24:03 ID:???
#xmas_single { margin:0; padding:0; }
525Name_Not_Found:2006/12/24(日) 19:25:42 ID:???
display:none;
526Name_Not_Found:2006/12/24(日) 19:41:52 ID:???
#xmas { background: url(img/orz.jpg) repeat-x; }
527Name_Not_Found:2006/12/24(日) 19:44:24 ID:???
#xmas{text-decoration:line-through}
528Name_Not_Found:2006/12/24(日) 20:02:04 ID:???
font-family:orz体ねえよ
529Name_Not_Found:2006/12/24(日) 20:37:05 ID:???
#xmas:after {
content: '2ちゃんやってる俺には関係ないけどな';
}
530Name_Not_Found:2006/12/24(日) 21:00:37 ID:???
@media screen, kanojyomochi {#xmas:happy;}
531Name_Not_Found:2006/12/24(日) 21:25:31 ID:???
>>530
無効なCSSです。表示できません。
532Name_Not_Found:2006/12/24(日) 21:36:23 ID:5w3e7AeB
ブログのテンプレートを使わせていただいているのですが

画像の横の空白がウィンドウ枠の大きさに合わせて
変わるようになってるのですが
適度なウィンドウの大きさで見ても
画像のよこの空白が大きすぎて、スクロールバーがでてしまいます。

ウィンドウの大きさに合わせて変わるところはそのままで、
もっとぎりぎりまで空白をつめるにはどうしたらいいのでしょうか?

説明が下手ですみません、
よろしくお願い致します。
http://pstube.web.fc2.com/aaa.jpg
533Name_Not_Found:2006/12/24(日) 21:47:10 ID:???
padding,margin,leftあたりをチェックして見る
534Name_Not_Found:2006/12/24(日) 22:41:42 ID:???
画像の下にできる隙間を取りたいのだけど。

vertical-align以外で取り除く方法ってありますかね?
535Name_Not_Found:2006/12/24(日) 22:47:24 ID:???
できるほうが不思議だ
536Name_Not_Found:2006/12/24(日) 22:53:16 ID:???
537Name_Not_Found:2006/12/25(月) 07:53:22 ID:???
allaboutの記事なんか参考にするなよ…
538Name_Not_Found:2006/12/25(月) 08:19:57 ID:???
そんなことよりも「上は??」の意味が分からん
539Name_Not_Found:2006/12/25(月) 09:28:53 ID:/Bh/qGfu
ブラウザの文字サイズの大小設定で文字の大きさが変わる・変わらないのは
どういったプロパティが影響してるのでしょうか?
メニュー項目をリストにして背景画像+<a>拡張して縦並び形式のメニューを作っていますが
文字サイズを大きくすると、文字の大きさは変わらないのにボタンとボタンの間に隙間ができてボタン領域が広がってしまいます
他のメイン文などは何も影響は無いようですが…
因みに文字サイズはボタン・他の文章全てpxで指定しています
540Name_Not_Found:2006/12/25(月) 12:22:13 ID:???
>>539
それは多分line-heightだと思われ。
フォントサイズをpx指定は迷惑だからやめれ。
541532:2006/12/25(月) 14:29:25 ID:0oosbRCP
レスくださった方、ありがとうございますm(_ _)m
542Name_Not_Found:2006/12/25(月) 14:47:54 ID:???
>>540
pxとかで指定すれば崩れないと思ってる人がいるけど、かえって変になることも多いんだよな。
543Name_Not_Found:2006/12/25(月) 15:55:27 ID:???
539です、レスありがとうございます、line-heightも実際使ってました

やはりフォントサイズにはemなど使った方が良いのでしょうか
ただ、emだと文字サイズをブラウザ設定で大きくすると全体のレイアウトが崩れたりして…
em設定でも一部の文字は大きくならないように固定などできるものなのでしょうか?
544Name_Not_Found:2006/12/25(月) 16:03:04 ID:???
文字を大きくしてもレイアウトが崩れないように作るのがベターだよ
あとpxでもfirefoxだと文字サイズ変えれる
どうしても固定にしたければ一部だけ画像にするしかない
545Name_Not_Found:2006/12/25(月) 17:42:51 ID:???
そこでFlashですよ(・∀・)
546Name_Not_Found:2006/12/25(月) 19:25:09 ID:G+P4732q
IE6でどう表示されるかを確かめられるサイトってありますか?
547Name_Not_Found:2006/12/25(月) 21:03:15 ID:???
>>546
WinならIE6のスタンドアロンを入れるか
MacだったらPCショーケースとか行くとか
548Name_Not_Found:2006/12/25(月) 21:05:19 ID:G+P4732q
スタンドアロン?
調べてみます!
ありがとうございました
549Name_Not_Found:2006/12/25(月) 21:19:56 ID:???
うちはMacにVPC入れてスタンドアロン含めて5、6、7と入れちょるよ
550Name_Not_Found:2006/12/25(月) 21:22:26 ID:G+P4732q
自分、Winxpです
551Name_Not_Found:2006/12/25(月) 21:22:28 ID:???
ああ、Macだとエミュがあるのか。
ペアーがまともにつかえればなー。
552Name_Not_Found:2006/12/25(月) 21:31:13 ID:???
Winなら7入れて、スタンドアロンで5〜6入れればいんじゃね。
553Name_Not_Found:2006/12/25(月) 21:41:02 ID:G+P4732q
スタンドアロンというのがいまいちよくわからないのですが、
参考になるサイトか、検索すべきキーワードをお願いします。
554Name_Not_Found:2006/12/25(月) 21:44:11 ID:???
お前が全くググってない事はわかった。
555Name_Not_Found:2006/12/25(月) 21:46:05 ID:G+P4732q
一応、ググりましたよ。
「スタンドアロン」を入れる、ってどういうことですか?
556Name_Not_Found:2006/12/25(月) 21:49:53 ID:???
入れる=インストール
557Name_Not_Found:2006/12/25(月) 21:52:23 ID:G+P4732q
…スタンドアロンとは「単体で動くソフトウェア」のことでいいですか?
「スタンドアロンで」とはどういうことですか?
558Name_Not_Found:2006/12/25(月) 21:57:15 ID:???
>>555
キーワードの指定を色々変えてみろ
例えば、「IE standalone」でググってみな
559Name_Not_Found:2006/12/25(月) 21:57:19 ID:???
IEってのは普通OSと一体になってて切り離せないんだ、
そして別バージョンのIEを複数も入れられない。それがnotスタンドアロン。
スタンドアロンってのはOSから切り離されて単体で動くエグゼって意味。
もうWeb制作の範疇じゃないから、PC初心者板に行ったほうがいいと思う。
560Name_Not_Found:2006/12/25(月) 22:05:26 ID:G+P4732q
>>558
ありがとうございました
助かりました
561Name_Not_Found:2006/12/25(月) 22:09:59 ID:???
・・・・無視されたorz
562Name_Not_Found:2006/12/25(月) 22:20:32 ID:???
まあ、冬だから仕方ないのかもしれんけど、>>561に同情
563Name_Not_Found:2006/12/25(月) 22:32:06 ID:G+P4732q
…厨じゃないっすよ
スミマセン
564Name_Not_Found:2006/12/25(月) 22:56:26 ID:???
('A`)
だったら言い訳の前に、役に立たなくても答えてくれた>>559=561?に礼ぐらい言えるようになれよ
565Name_Not_Found:2006/12/25(月) 23:24:47 ID:???
役に立てなくてサーセンwwwww
566Name_Not_Found:2006/12/25(月) 23:27:58 ID:???
567Name_Not_Found:2006/12/25(月) 23:38:15 ID:???
冬全開だな。
568Name_Not_Found:2006/12/25(月) 23:50:52 ID:???
わかりきってるのに冬だの春だの言う奴は何なの?
569Name_Not_Found:2006/12/25(月) 23:57:50 ID:???
冬厨厨ですよ
570Name_Not_Found:2006/12/25(月) 23:58:09 ID:???
カンタンに言うと、テメエみたいな厨は消えろ、って事だね。
正直に言っちゃうと角が立つから、隠喩ってヤツね。
そんなのわかりきった事じゃないの。
571Name_Not_Found:2006/12/26(火) 00:04:10 ID:???
少なくとも「春」と言ってる香具師は存在しない
572Name_Not_Found:2006/12/26(火) 00:07:16 ID:???
香具師と言ってる奴も存在しない
573Name_Not_Found:2006/12/26(火) 00:08:18 ID:???
冬だねぇ
574Name_Not_Found:2006/12/26(火) 02:49:08 ID:???
2ch.netで季節を知るなんて…
575Name_Not_Found:2006/12/26(火) 04:27:37 ID:???
IEだけ画像のロールオーバーが上手くいかないのですが、どうすればいいのでしょうか?
正確には、画像が変わることには変わるのですが、マウスを近づけて画像が変わったあとに
マウスを離しても、画像が元に戻らないときがあるんです。

span#box1{
background-image:url("../photo/1.gif");
background-repeat:no-repeat;
}
a:hover #box1{
background-image:url("../photo/2.gif");
}

HTML
<a href="#"><span id="box1">aaa</span></a>
<a href="#"><span id="box1">bbb</span></a>
<a href="#"><span id="box1">ccc</span></a>
576Name_Not_Found:2006/12/26(火) 04:41:23 ID:???
>>575
それはPC性能のせいかと思われ・・・
単なるレンダリング失敗だしょ
577Name_Not_Found:2006/12/26(火) 05:53:06 ID:???
>>575
ですよね。間違いではないすよね。。
あの、ついでにもうひとつ質問させていただきたいのですが、
<a href="#"><span id="1"></span>あああ</a>
<a href="#"><span id="2">いいい</span></a>
このようなHTMLで、「○あああ」→「●あああ」のようにロールオーバーさせて
○画像を変えようとするときには、どのようなCSSが最適ですかね?
今まで、「○●」みたいな画像を用意して、idにwidthやdisplay:blockを設定して、
hoverにbackground-position:-10px; みたいな感じでやってたんですけど、
隣に文字を置こうとすると上手くいかなくて、575のように直接、画像を変える
手段しか思い浮かばなかったのですが。。初心者質問ですいません。

578Name_Not_Found:2006/12/26(火) 06:02:04 ID:pmJgx3oQ
画像を使ったスクロールバーについて質問です。
http://magald.com/scrollbar/free/original2/org101.html
このサイトでスクロールバーを画像に設定できると知りました。
CSSにrepeat-yとありますが、⇔のような画像を使い、
ブラウザの大きさによって真ん中の=の部分が延び縮みするようなスクロールバーを作ることは可能ですか?
579Name_Not_Found:2006/12/26(火) 07:20:22 ID:???
>>578
可能です
580Name_Not_Found:2006/12/26(火) 07:27:53 ID:???
>>577
span使わないで、aにid設定
cssは
pading-left:画像の横幅;
を追加

で、スッキリしない?
あくまで参考程度に。
581Name_Not_Found:2006/12/26(火) 07:31:34 ID:pmJgx3oQ
>>579
どんなCSSを仕込めばいいですか?
582Name_Not_Found:2006/12/26(火) 08:52:43 ID:???
>>578
スクロールバーの体裁を変更するのはアクセシビリティー上ヤメレ
583Name_Not_Found:2006/12/26(火) 08:59:22 ID:pmJgx3oQ
>>582
アクセシビリティー上に問題があるのですか?
584Name_Not_Found:2006/12/26(火) 09:04:51 ID:pmJgx3oQ
>>582
了解しましたー
585Name_Not_Found:2006/12/26(火) 10:00:18 ID:???
>>578のサイトが
スクロールバーの色に著作権主張しているのには笑ったw
586Name_Not_Found:2006/12/26(火) 11:29:12 ID:R2U5aPQc
DWスレから誘導されてきました
divタグ内のテキストを上下左右ともに中央寄せする方法が知りたいのですが
IE6、opera9.1, NN7.1 ,firefox1.5.0.6 どれかでできれば満足です
よろしくお願いします
587Name_Not_Found:2006/12/26(火) 12:49:08 ID:???
つ【テンプレ】
588Name_Not_Found:2006/12/26(火) 13:20:16 ID:???
>IE6、opera9.1, NN7.1 ,firefox1.5.0.6 どれかでできれば満足です
なんじゃそりゃ
589Name_Not_Found:2006/12/26(火) 13:40:14 ID:???
>>588
なんとなく自己満足です
>>7のリンクを読んでみましたが、難しいですね
590Name_Not_Found:2006/12/26(火) 13:53:13 ID:???
やりたいのはリンクボタンだけなんでjpgかなんかを中心に貼るのがいいのかなぁ
って思いました
591Name_Not_Found:2006/12/26(火) 13:59:46 ID:???
>>590
おまいのちょっと上の質問者が似たようなことをしている。
592Name_Not_Found:2006/12/26(火) 14:15:25 ID:???
あのリンクの中にありました
真ん中らへんに表示されるのが
理解不能ですが、ありがたく使わせていただきます
593Name_Not_Found:2006/12/26(火) 14:35:23 ID:???
???
594Name_Not_Found:2006/12/26(火) 14:38:30 ID:???
>>593
cssをちゃんと理解できてないけどってことです
おやすみなさい
595Name_Not_Found:2006/12/26(火) 14:40:55 ID:???
単にID出してないから誰がどれだかわかってないだけだろう・・・
とは言っても俺も591に対してどうして592の返答になるのか理解不能
596Name_Not_Found:2006/12/26(火) 14:43:10 ID:???
あれは独り言です
597Name_Not_Found:2006/12/26(火) 16:53:43 ID:???
>>294
もう寝るの?
598Name_Not_Found:2006/12/26(火) 18:31:26 ID:???
質問者はID晒し推奨
599542:2006/12/26(火) 18:56:13 ID:???
>>543
>ただ、emだと文字サイズをブラウザ設定で大きくすると全体のレイアウトが崩れたりして…
それは幅をpxとかで指定してるからじゃないのか?
基本的には、font-sizeだけじゃなく、画像とかが関係しないところは全て相対的な指定にするほうが良い。

>>544も言ってるようにFxとか(というか多分IE以外のほとんど)ではpxでも変えられるし、IEでもユーザスタイルを書けば良い。
俺はOperaユーザだけど、html, body { font-size : 14px !important ; } として、「本文」の文字を14pxで固定してる。

まあユーザスタイルまでいちいち気にしてたらきりが無いとも言えるが、
こういうありがちなスタイルは想定しといたほうが良いと思う。
600Name_Not_Found:2006/12/26(火) 19:45:36 ID:???
>>599
そういうことを言うと、以前「相対です!」ってemで幅指定する奴が出たよorz
601Name_Not_Found:2006/12/26(火) 21:14:18 ID:???
スレ違いかもしれませんが相談させてください。

CSSでレイアウトを組む人ならメディアごとに最適な形で情報を提供するのは
初歩だと思います。(例えばプリントならナビゲーションを非表示にしたり出力枚数に配慮するなど)

しかしWebに詳しくないお客さんの間ではスクリーンと同じレイアウトで
プリントできることを重要視する文化が根強く残っています。

承諾を得て制作しても「印刷したら全然違う形で出てきた」なんて問い合わせを受けることがあります。
閲覧者がプリントアウト時にスクリーンレイアウト/プリントレイアウトを選択して
印刷したりすることはできないでしょうか?
602Name_Not_Found:2006/12/26(火) 21:20:48 ID:???
>>601
印刷用ページを作る
603Name_Not_Found:2006/12/26(火) 21:24:14 ID:???
>>601
javascriptでON/OFFぐらいしか思いつかんな。
604Name_Not_Found:2006/12/26(火) 22:30:30 ID:???
>>601
見たままを印刷したいならPDFを選択させれ
605Name_Not_Found:2006/12/26(火) 22:32:31 ID:???
>>601
CSSでレイアウトを組む人だが、
メジャーブラウザでの閲覧しか考えてません。
606Name_Not_Found:2006/12/26(火) 22:38:37 ID:???
そもそも承諾を得てたのに問い合わせが来たってことは
説明が足らなかったんじゃないか?
ある程度どういう感じになるか実際に見せてやっていかないと
これからももめまっせ
607Name_Not_Found:2006/12/27(水) 00:43:46 ID:???
印刷すると紙やインクが著しく無駄になりそうなスタイルにして印刷する気を殺げば良い。
608Name_Not_Found:2006/12/27(水) 10:44:58 ID:???
ページ全体をdivで囲って、ページの上端と左端を隙間無くピッタリ付くようにしたいのですが
この隙間を消すにはどうすれば良いのでしょうか
609Name_Not_Found:2006/12/27(水) 10:51:42 ID:iJ7RCdP9
リファレンスくらい見なさい
ただ全部囲うくらいなら全部に当てはめたほうがいいかもわからんね
*ってしてやるとすべてのタグに適応
610Name_Not_Found:2006/12/27(水) 11:08:20 ID:???
>>609
直りました、ありがとうございます;

それとちょっと気になっていた事なのですが
ページの最下部辺りで
float: left
でdivボックスを二つ横並びにして
そのボックスの後にidを付けられるようなタグやデータ等が無い場合、そのfloatに対するclearは必要ないのでしょうか?
611Name_Not_Found:2006/12/27(水) 12:20:46 ID:72OuoAZl
css憶えたての頃作ったページを手直し→IE6とOperaで表示確認していたら
マージンをIEの2倍のpx設定しないとOperaでは同じ状態に見れませんでした
(以前は表示確認はIEでしかやっていませんでした)
まだ最初のページタイトル周辺いじったばかりで、bodyや他の要素の影響なんかはは殆ど受けていないと思うのですが・・・
調べても原因がわからず、何か考えられる原因などありませんか?
612Name_Not_Found:2006/12/27(水) 12:51:05 ID:???
>>611
IEのバグ。IEのほうが2倍になっててOperaのが正しい。
ttp://cssbug.at.infoseek.co.jp/detail/winie/b107.html
613Name_Not_Found:2006/12/27(水) 12:56:27 ID:???
>>612
あーこれムカつくよなぁ… マジで滅びろよIE。
614Name_Not_Found:2006/12/27(水) 13:15:01 ID:???
>>612
フロートしたものに
display: inlineとすれば幸せになれるよ
615Name_Not_Found:2006/12/27(水) 13:18:15 ID:???
616Name_Not_Found:2006/12/27(水) 13:24:15 ID:???
617Name_Not_Found:2006/12/27(水) 13:35:44 ID:???
最初に612のバグ見たときは、周囲の指定とか疑って継承チェックしても
何故マージンが突然2倍になるのかさっぱり分からず、かなり悩んだよ・・・
この不良品め
618Name_Not_Found:2006/12/27(水) 14:16:58 ID:???
>>612
規定バグ?だったんですね、勉強になりました
619Name_Not_Found:2006/12/27(水) 14:35:55 ID:???
ひとりぐらいは「バグじゃなくて独自仕様」と言ってやれ
620Name_Not_Found:2006/12/27(水) 14:50:27 ID:???
      冫─'  〜  ̄´^-、
    /          丶
   /             ノ、
  /  /ヽ丿彡彡彡彡彡ヽヽ
  |  丿          ミ
  | 彡 ____  ____  ミ/
  ゝ_//|    |⌒|    |ヽゞ
  |tゝ  \__/_  \__/ | |  < バグじゃなくて独自仕様じゃね?
  ヽノ    /\_/\   |ノ
   ゝ   /ヽ───‐ヽ /
    /|ヽ   ヽ──'   /
   / |  \    ̄  /
 / ヽ    ‐-
621Name_Not_Found:2006/12/27(水) 14:51:16 ID:???
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)  独自仕様だろ・・・
  |     ` ⌒´ノ   常識的に考えて……
.  |         }
.  ヽ        }
   ヽ     ノ        \
   /   く  \        \
   |     \   \         \
    |    |ヽ、二⌒)、          \
622Name_Not_Found:2006/12/27(水) 15:04:04 ID:???

 どすこ〜〜い どすこ〜〜い っと・・・
623Name_Not_Found:2006/12/27(水) 21:10:20 ID:???
規定バグって何だろうと小一時間考えて
既出バグの間違いかと気付いた・・・
624Name_Not_Found:2006/12/28(木) 02:46:12 ID:???
IEのことを考えながらコーディングするのは苦痛だよなw
625Name_Not_Found:2006/12/28(木) 08:47:41 ID:???
>>624
WinIEは平気
MacIEは殺したくなる
626Name_Not_Found:2006/12/28(木) 09:02:08 ID:???
627Name_Not_Found:2006/12/28(木) 09:20:53 ID:???
>>626
はじめて見た。

でもその前にそのブログがIE6でカラム落ちしてるのを
誰か教えてやったほうがいい。
628Name_Not_Found:2006/12/28(木) 09:41:14 ID:x32BUO8U
>>626
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)  独自仕様だろ・・・
  |     ` ⌒´ノ   常識的に考えて……
.  |         }
.  ヽ        }
   ヽ     ノ        \
   /   く  \        \
   |     \   \         \
    |    |ヽ、二⌒)、          \
629Name_Not_Found:2006/12/28(木) 10:32:26 ID:???
>>627
背景画像もずれてるしね。
630Name_Not_Found:2006/12/28(木) 14:08:10 ID:???
>>626
それって、これとどう違うの?

ttp://cssbug.at.infoseek.co.jp/detail/winie/b134.html

「XML宣言あり」って書いてある時点で、正しく比較できていない気が…
631Name_Not_Found:2006/12/28(木) 18:06:11 ID:???
>>626
これはひどいww

>>630
そっちはコメント関係無くね?
632Name_Not_Found:2006/12/28(木) 18:29:20 ID:???
つかスタンドアロンで626の症状出たこと無いんだが・・・
633Name_Not_Found:2006/12/28(木) 21:57:00 ID:???
先生、リストのマーカの種類で白四角ってないんでしょうか?
黒丸、白丸、黒四角があるんだから、白四角もあってもよさそうなかんじですが。
634Name_Not_Found:2006/12/28(木) 22:17:26 ID:???
>>633
どうしてもなら画像でやれば。
デフォで無いのはチェックボックスとかぶるからだろ。
635Name_Not_Found:2006/12/29(金) 00:26:37 ID:???
白丸もラジオボタンとかぶるな。
636Name_Not_Found:2006/12/29(金) 03:35:56 ID:???
ていうかもはやCSSのレベルじゃない質問だな・・
637Name_Not_Found:2006/12/29(金) 05:23:18 ID:tV2s8uHl
リンクをクリックするとき(activeの状態)に出る点線の枠を消すことはできますか?
638Name_Not_Found:2006/12/29(金) 05:41:32 ID:???
>>637
迷惑なのでやめてください・・・ユーザビリティのために
639Name_Not_Found:2006/12/29(金) 07:48:41 ID:???
みなさんは

*{
margin:0px;
padding:0px;
}

ってやってますか?
640Name_Not_Found:2006/12/29(金) 08:05:33 ID:tV2s8uHl
>>638
それは『できる』ということですか?
色を変えるだけでもいいのですが
641あbc:2006/12/29(金) 08:15:40 ID:EeIe1SrF
ツリーメニューで

親メニュー1
親メニュー2
親メニュー3 と並んでる時、どの親メニューをクリックしても子メニューが

親メニュー1
親メニュー2
親メニュー3
子メニュー  ←この位置にでるようにするにはどうしたらいいですか?
642あbc:2006/12/29(金) 08:26:39 ID:EeIe1SrF
今はこんな状態です。
ttp://www.geocities.jp/zsdfgyikujhgfk/abc.html
643Name_Not_Found:2006/12/29(金) 08:56:45 ID:???
>>641
JavaScript
644Name_Not_Found:2006/12/29(金) 11:02:56 ID:???
リンクの下線を点線にしたいときって、borderを使うしかないのでしょうか?
645Name_Not_Found:2006/12/29(金) 11:30:22 ID:tV2s8uHl
a:hoverで文字の太さを変えるとブラウザがチカチカっとゆれるのですが、
これは自分のPCだけでしょうか。
やめたほうがいいですか?
646Name_Not_Found:2006/12/29(金) 11:36:15 ID:tV2s8uHl
>>645です。
a:linkとa:visitedのときと
a:hoverとa:activeのときとで
太さをノーマルとボルドにしています
647あbc:2006/12/29(金) 15:04:32 ID:EeIe1SrF
>>643
わ、すいませんでした;
648Name_Not_Found:2006/12/29(金) 17:53:37 ID:k3iMozww
CSSでテーブルのborderを表現させているのですが、

div#datalist td{
border: 1px solid #CCCCCC;
}

こうした場合、TDの中身が空(NULL)の場合、ボーダーが表示されません。
現在は<td> </td>っと空白コードを入れて対処しているのですが、
やはりこうする他無いのでしょうか?それとも他に必ずボーダーが表示される
方法はあるのでしょうか?(<table border="1"> 以外で)
649Name_Not_Found:2006/12/29(金) 18:13:42 ID:???
中身のないTD自体に意味がないと思うけど
650Name_Not_Found:2006/12/29(金) 18:15:42 ID:???
>>684
cssだろうがhtmlだろうが、最低<td></td>は必要でしょ。
cgiなんかで書き出ししてるんかいな。
651Name_Not_Found:2006/12/29(金) 18:28:59 ID:???
652Name_Not_Found:2006/12/29(金) 18:32:19 ID:???
そんな話はしていないんだが・・
653Name_Not_Found:2006/12/29(金) 18:33:48 ID:???
>>652
おまえがどっちがしらんが、
中身のないtdには意味があるし、
tdタグ自体がないという意味のnullじゃないだろ。
654Name_Not_Found:2006/12/29(金) 19:38:41 ID:???
空のセルが無いと表が作れない場合
ttp://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.2
655Name_Not_Found:2006/12/29(金) 19:46:54 ID:???
>>653
>tdタグ自体がないという意味のnullじゃないだろ。
俺はそうとったから>>650のレスをした。
おまえさんの言ってる事もレスに入れるか迷ったが、
質問がわかりにくい以上、そこまで親切にする義理もないからな。
656Name_Not_Found:2006/12/29(金) 20:57:45 ID:???
>>655
>現在は<td>?</td>っと空白コードを入れて対処しているのですが、
空白コードを入れるとあるんだから最低限<td></td>は入れてるとわかる。
だから
>最低<td></td>は必要
を満たしている。

とそういう風にちゃんと取ってて>>650というのは日本語がずれてね?
657Name_Not_Found:2006/12/29(金) 21:05:21 ID:???
難しいこと訊くんじゃねー
658Name_Not_Found:2006/12/29(金) 21:18:50 ID:???
>>656
うるせー野郎だなあ。国語やり直してほしいわ。
>現在は<td> </td>っと空白コードを入れて対処しているのですが、
>やはりこうする他無いのでしょうか?
文章はちゃんと最後まで引用しろよ。
「今は入れて対処してるけど、入れんの面倒いから他に方法はないの?」って事であり、
「こうすればborder表示されるけど、入れんの面倒いから〜」と解釈するのが普通だと思わないか?
更に、入れたくないのが、<td></td>なのか空白コードなのか、と何通りにもとれる質問なんだよ。
659Name_Not_Found:2006/12/29(金) 21:25:34 ID:???
「「こうすればborder表示されるけど、入れんの面倒いから〜」と解釈するのが普通」だから
「入れたくないのが、<td></td>なのか空白コードなのか」なんて普通は思わないんだよ、
自分で矛盾させてどーする。
660Name_Not_Found:2006/12/29(金) 21:33:57 ID:???
>>658
言い訳見苦しい
661Name_Not_Found:2006/12/29(金) 21:35:08 ID:???
>>659
そんな事ないさ。どうしてそう絡むわけ?ここは粘着厨の巣?
662Name_Not_Found:2006/12/29(金) 21:35:08 ID:???
>>658
>空白コードを入れて対処しているのですが
ということは、対処方法が空白コードを入れること。
つまり対処方法が<td></td>を入れることではない、ということ。
                        ~~~~~~~~
663Name_Not_Found:2006/12/29(金) 21:35:46 ID:???
>>661
と書いてたら・・・・
むしろ普通の解釈をしない自分を認めないで
絡んできてる君のが粘着に見えるよ・・・・
664Name_Not_Found:2006/12/29(金) 21:43:43 ID:???
粘着と言われたらオウム返しかよw 図星でムカついたかい?
665Name_Not_Found:2006/12/29(金) 21:50:20 ID:???
冬だなあ
666Name_Not_Found:2006/12/29(金) 21:53:33 ID:???
>>664
言い訳見苦しい
667Name_Not_Found:2006/12/29(金) 21:55:02 ID:???
どう見たって>>658が国語力無い。
668Name_Not_Found:2006/12/29(金) 22:03:07 ID:???
もうそろそろ冬厨いじりは や ら な い か 。
669Name_Not_Found:2006/12/29(金) 22:22:24 ID:???
で、なんだっけ?
670Name_Not_Found:2006/12/29(金) 22:25:43 ID:???
冬なんだよ
671Name_Not_Found:2006/12/29(金) 22:53:56 ID:???
最近は突っ込みだがる連中ばかり。他人の回答なんてどうでもいいんだから放っとけよ。
初心者スレの流れなのかね。
672Name_Not_Found:2006/12/29(金) 23:11:26 ID:???
いや、おかしな回答は訂正しとかないと質問者が可哀相だろ
しかも「質問がわかりにくい」とか言って質問者を貶めるようや奴だったし
673Name_Not_Found:2006/12/29(金) 23:25:59 ID:???
それは質問者を貶める事にはならないと思う。
最初からバカとかボケとか言うのはどうかと思うが。
複数の回答が出る事も良い事だ。質問者が選択出来るし、何かしらヒントになるかも知れない。
それも出来ない程の初心者用のスレではない。
674Name_Not_Found:2006/12/29(金) 23:31:03 ID:???
>>637
自分の読解力がないのを棚に上げてわかりにくいから俺は悪くない
と開き直るのは充分質問者を馬鹿にしてるだろ。
複数の回答が出るのはいいことだが、それは合っていたらの場合であって。
675Name_Not_Found:2006/12/29(金) 23:35:51 ID:???
ていうか擁護してるのは本人だろうからほっとくが吉
676Name_Not_Found:2006/12/29(金) 23:44:22 ID:???
>>671がツッコミな件
677Name_Not_Found:2006/12/29(金) 23:52:37 ID:???
確かに君の言う通りだね。お疲れ様。

勝手な同定は迷惑。
678Name_Not_Found:2006/12/30(土) 00:07:39 ID:???
そこでさらに言い訳を続ける粘着ぶりが
似てるのは確かなのでやめてください
679Name_Not_Found:2006/12/30(土) 00:31:11 ID:???
冬だなぁ
680Name_Not_Found:2006/12/30(土) 01:07:33 ID:???
真冬だよ
681Name_Not_Found:2006/12/30(土) 01:42:43 ID:???
冬だったら悪いか。
682Name_Not_Found:2006/12/31(日) 11:40:55 ID:AKGUocOX
780pxの幅に900pxの背景画像を指定し、それを中央で揃える。
幅100%指定のHEADER部分に900pxの背景画像を指定するんだけど
下のLAYOUTとの中央揃えが1pxズレる。

この解決法分かる人教えてください。
Opera、firefoxではちゃんと表示されました。
683Name_Not_Found:2006/12/31(日) 11:57:06 ID:???
>>682
切り捨て、切り上げ、四捨五入の計算方法が
プログラム(ブラウザ)によって違うので、そのままじゃ無理。
ハックで何とかしたら何とかなるかも。
684Name_Not_Found:2006/12/31(日) 12:02:48 ID:???
>>683 thx
やっぱそうなのか。。。

IEホントに嫌になるな、
685682:2006/12/31(日) 12:06:36 ID:???
それとそのまま画像を表示させてセンタリングさせることで解決した。

自己解決につき、スルーで
686Name_Not_Found:2006/12/31(日) 17:52:31 ID:lOX8K3UH
ボックスの中にある要素の左側全てに5pxのマージンを取りたい場合に
ボックスの内部要素それぞれにmargin-left: 5px;とするのは邪道ですか?
正しいのはそのボックスにpadding-left: 5px;が正しいとか本にはありましたが
でもIE5処理とか触れてないしwidth指定もしてるのでその処理も大変かなと思って
内部要素がpだけなら #ボックス名 pでマージンを一律処理してますが
imgやulや色々と要素が入っているので。。。
687Name_Not_Found:2006/12/31(日) 22:19:19 ID:???
>>686
#hoge *{margin-left:5px;}
#hoge * *{margin-left:0;}

IE6以下無視なら子供セレクタが使える。]
#hoge>*{margin-left:5px;}
688Name_Not_Found:2007/01/01(月) 03:27:39 ID:yreeJBmK
既出の質問でしたらすみません。XPとIE6使用の初心者です。
CSSのフォント指定で、たとえば欧文と和文書体のうち、欧文だけ太字にしたり大きさを変えることは可能でしょうか? たとえば現在は
BODY,TD,TH {font-family: "Arial","MS Pゴシック"; font-size:10pt; }
としています。(欧文はArial、和文はMSPゴシックにしたいので)
が、ここにboldを入れると、和文も太字になってしまいます…。
689Name_Not_Found:2007/01/01(月) 04:13:43 ID:???
>>688
そういう指定はないよ。
それから、font-family: "Arial","MS Pゴシック";じゃあ、
これらが入ってないPCはどうするの。
690Name_Not_Found:2007/01/01(月) 05:21:22 ID:???
>>688
欧文をspanで囲んでそこだけフォント指定。
フォントはファミリーも指定した方が良いよ。
691Name_Not_Found:2007/01/01(月) 06:15:30 ID:yreeJBmK
たびたびすみません、688です。
ArialはMac、Win共通かと思ったのですが、和文の方はちなみに何を加えればよいのでしょう?

>欧文をspanで囲んでそこだけフォント指定。
フォントはファミリーも指定した方が良いよ。

こ、こんな感じにしてみたのですが↓、反映されませんでした
(SPANの意味さえ知らなかったので、慌てて調べたのですが。汗)。
それとも、欧文それぞれに指定をするという意味でしょうか?
全然勘違いしてたらすみません!!
BODY,TD,TH {<SPAN style>font-family: "Arial; size:12pt; weight; bold " </SPAN> ,font-family: "MS Pゴシック"; font-size:10pt;}
692Name_Not_Found:2007/01/01(月) 08:09:02 ID:???
>>691
基礎の基礎から勉強してこないとやばそげ。
ttp://hp.vector.co.jp/authors/VA022006/
693Name_Not_Found:2007/01/01(月) 08:16:06 ID:e+IGhnkZ
過去ログを見ると>>651さんが参考サイトを出されているのですが、
それを見ても解決しなかったので、質問します。

tdの中身が空(空セル)の場合でもボーダーを表示させる方法として
empty-cells: show; を指定しろとあるのですが、
これを指定すると確かにFirefoxなどでは表示されるのですが、
IE6では表示されません。
まだまだIE6は使われると思うので、代替えがないか調べているのですが
特に見つかりません。諦めるしかないのでしょうか?
694Name_Not_Found:2007/01/01(月) 09:08:00 ID:???
>>693
同サイトの対応状況くらい見てこいよ。IEは基本非対応。
しかしborder-collapseをcollapseにすれば表示される謎。
separateでは無理。
695Name_Not_Found:2007/01/01(月) 10:59:26 ID:???
contentsというdivのなかのdtの1文字目を赤い色にしたい場合、

#contents dt:first-letter{
color:red;
}

とするとWinIE6では何も変化がないのに、

#contents dt:first-letter {
color:red;
}

とスペースを1文字入れただけで反映されるようになりました。
いままでCSSはセレクタと { の間に半角スペースを入れてなかったのですが、入れるようにしたほうがいいような仕様あったでしょうか?
696Name_Not_Found:2007/01/01(月) 11:20:46 ID:???
>>695
IEのバグ。
俺は全部そう書くようにしてる。
697Name_Not_Found:2007/01/01(月) 15:43:49 ID:???
698Name_Not_Found:2007/01/02(火) 10:09:35 ID:4tiTBpqZ
>基礎の基礎から勉強してこないとやばそげ。
ttp://hp.vector.co.jp/authors/VA022006/
リンクありがとうございます、もう一度勉強しなおしてきます(涙)…。
htmlもできていないのに、CSSなんて身の程知らずでした…とほほ。
699Name_Not_Found:2007/01/02(火) 10:51:45 ID:???
最初はみんな初心者だ。少しづつ勉強すれば良いんだよ。
 がんがれ
700Name_Not_Found:2007/01/02(火) 22:59:58 ID:???
CSSに初心者てw
701Name_Not_Found:2007/01/03(水) 20:38:22 ID:???
今の主流は骨組みがHTMLでデザインがCSSですよね。
でもCSSだけでサイトを作りたいんですが大変ですか??
702Name_Not_Found:2007/01/03(水) 21:55:06 ID:???
基本から勉強して来て下さいね(はぁと
703Name_Not_Found:2007/01/03(水) 21:56:45 ID:???
>>702
うるせぇ!
いいから教えろくそじじぃ!
704Name_Not_Found:2007/01/03(水) 21:58:41 ID:???
ツマンネ
705Name_Not_Found:2007/01/03(水) 22:22:11 ID:zpiefmy9
CSSだけでテーブルをページのセンターに配置したいのですが
DIVでなどで囲わずにやる場合どういうタグにすればいいんでしょうか?

text-align: center;
でも出来るかと思ったのですが
やっぱりテーブルの中身の文字だけがセンターに表示されてしまいダメでした。
おねがいします。
706Name_Not_Found:2007/01/03(水) 22:24:51 ID:???
>>705

マージンじゃダメかな?俺も詳しくないからアレだけど。
707Name_Not_Found:2007/01/03(水) 22:43:37 ID:zpiefmy9
>>706
margin: auto;
もやってみたけどOPERAではちゃんとセンターに表示されたんですけど
IEだとダメでした。
708Name_Not_Found:2007/01/03(水) 22:44:13 ID:???
>>705
>CSSだけでテーブルをページのセンターに配置したいのですが

CSSでは不可能(IE6ではDIVで囲えば可能)。
tableの属性で「align="center"」するしかない。
709Name_Not_Found:2007/01/03(水) 22:51:57 ID:???
>>701
>でもCSSだけでサイトを作りたい
ということの意味がよく受け取れません^^;
CSSだけでサイトを作りたいのならCSS着せ替えテンプレートプロジェクト
に行って、そこのフォーラムを使えばいいと思います。
710Name_Not_Found:2007/01/03(水) 22:52:36 ID:krTKkxBp
margin-left:auto;
margin-right:auto;
を使って全体を真ん中へ寄せたいのですが
うまくできません…。
widthは770pxです
711Name_Not_Found:2007/01/03(水) 22:59:10 ID:???
>>710
標準モードじゃなきゃダメ
712Name_Not_Found:2007/01/03(水) 23:05:34 ID:???
content: "はげ," "ほげ。";
で無理やりやればCSSだけでいけそう?w

>>710
スレのテンプレ見てみ。
>>711の言う通り標準モードが一番楽だけど、互換モードでも出来ない事は無いから。
713Name_Not_Found:2007/01/04(木) 12:08:32 ID:go+RZx3Y
全称セレクタでcolorを指定して、変更したい箇所は外部cssで設定
したんですが反映されないです。タグにstyleで書けば大丈夫でした。
全称セレクタは一番優先度が低いらしいので問題ないかと思ったんですが
どこか間違ってますでしょうか?
714Name_Not_Found:2007/01/04(木) 12:19:23 ID:???
>全称セレクタでcolorを指定して
それも外部に汁
715Name_Not_Found:2007/01/04(木) 12:25:08 ID:???
全部外部cssに書いときゃいいのに。あちこち書くと間違いの元。
716Name_Not_Found:2007/01/04(木) 12:41:11 ID:go+RZx3Y
713です。。
全称セレクタも同じ外部cssの一番上に書いてます。
テストで簡単なテキスト作って設定したら反映されました。
なんか邪魔する要素でもあるんでしょうかね?
とりあえずstyleで設定できるんでなんとかなります。
714,715さんありがとうございました
717Name_Not_Found:2007/01/04(木) 13:31:04 ID:???
とりあえず
s t y l e は 使 用 し な い 方 向 で 頑 張 れ
718Name_Not_Found:2007/01/04(木) 15:15:05 ID:???
>>716
bodyでいいじゃん。なんで全称?
719Name_Not_Found:2007/01/04(木) 20:54:56 ID:rBBD0k40
CSSの設定がおかしいらしく
TOP記事の文字がときどき消えてしまいます。(反転すれば見える)
CSSのどこの場所がおかしくなっているのでしょうか・・?

http://blog.livedoor.jp/news2chplus/
720Name_Not_Found:2007/01/04(木) 21:24:23 ID:???
>>719
それが原因かわからんけど、とりあえず
font-family:arial ,sanzs-serif;
これ直したら?
721Name_Not_Found:2007/01/04(木) 23:18:35 ID:rBBD0k40
>>720
直しました。ありがとうございます!

コメントで「CSSのfloatが関係しているのでは?」と言われたけど謎、、
不具合が直せない・・・。
722Name_Not_Found:2007/01/05(金) 00:12:14 ID:???
背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)
http://cssbug.at.infoseek.co.jp/detail/winie/b032.html
723Name_Not_Found:2007/01/05(金) 10:00:37 ID:???
スタイル設定で↓こんな感じでやってみたのですが、

.box_1 {
width: 500px;
font-family: "MS Pゴシック", Osaka;
font-size: 15px;
font-weight: normal;
line-height: 150%;
color: #333333;
background-color: #efefef;
font-style: normal;
text-align: left;
height: auto;
padding: 10px;
}

Internet Explorer と Mozilla Firefoxで表示が違うのですが
どこがいけないのでしょうか?
どなたかご教示ください。
724Name_Not_Found:2007/01/05(金) 10:19:22 ID:???
>>723
何がどう違うんだか全然わからんが、
1.font-familyには総称ファミリを指定しておく。
2.ボックスでfont-sizeはやめい。
3.heightのauto指定に意味はない。
4.標準モードにしてないととっても大きさが違うよ。
725Name_Not_Found:2007/01/05(金) 11:25:56 ID:???
>>724
早速ありがとうございます。m(_ _)m

>何がどう違うんだか全然わからんが、
ごもっともです。
表示幅が崩れます。
Internet Explorer だと指定した500pxで表示され、
Mozilla Firefox やOpera だと、padding: 10pxが足され、
520pxで表示されるのです。
ちなみに、Dreamweaver2004MXで自動生成されたCSSなんです。

726Name_Not_Found:2007/01/05(金) 11:28:16 ID:???
MX 2004 だって、突っ込み入れないでね。
727Name_Not_Found:2007/01/05(金) 11:31:38 ID:???
>>725
>>724の4
728Name_Not_Found:2007/01/05(金) 13:59:08 ID:???
>>727
標準モードとはどこで設定すれば良いのでしょう?
素人ですんません。
729Name_Not_Found:2007/01/05(金) 14:04:48 ID:???
なぁ、ちゃんと基礎から勉強しようぜ?
素人とか初心者ってレベルじゃねーぞ…
730Name_Not_Found:2007/01/05(金) 14:10:42 ID:???
>>729
>素人とか初心者ってレベルじゃねーぞ…

それ以下ですか。
やばー(^^;)
731Name_Not_Found:2007/01/05(金) 14:10:52 ID:???
>>728
DOCTYPEで設定。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
または
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
XHTMLでXML宣言のためだったらハック使え。
732Name_Not_Found:2007/01/05(金) 14:19:42 ID:???
>>731
サンクスです。(^o^)
ヘッダーのDOCTYPE設定ね。
やったら直りました。(^^)
感謝感激です。
733Name_Not_Found:2007/01/05(金) 16:09:29 ID:???
HTTPのヘッダーなら分かる。
ブラウザで見た目のヘッダー(<div class="header"> とか)も、まあ、分かる。
しかし、「ヘッダーのDOCTYPE」だと???
それは、HTMLソースで見た時に、上の方にあるからそう呼ぶのか??
734Name_Not_Found:2007/01/05(金) 16:31:28 ID:???
head内のことだろ、上級者ぶってつっこんでやるな、そっちのが恥ずかしいから。
735Name_Not_Found:2007/01/05(金) 16:32:34 ID:???
そしてつられて恥ずかしいことをorz
head上だ。
736Name_Not_Found:2007/01/05(金) 17:58:05 ID:???
なんつー低ラベルなんだ、ここは!!
737Name_Not_Found:2007/01/05(金) 19:21:57 ID:???
cssスレだからな。htmlは苦手なんだろ。
738Name_Not_Found:2007/01/05(金) 19:38:50 ID:???
   / ̄ ̄ ̄ ̄ ̄ ミ
  /   ,――――-ミ
 /  /  /   \ |
 |  /   ,(・) (・) |
  (6       つ  |
  |      ___  |
  |      /__/ /   < なわけねぇだろ!
/|         /\
739Name_Not_Found:2007/01/05(金) 19:43:23 ID:???
>>734
発作的に死ぬなよ。
740Name_Not_Found:2007/01/05(金) 20:50:45 ID:???
むしろ733
741Name_Not_Found:2007/01/06(土) 16:24:55 ID:???
---HTMLソース---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<link rel="stylesheet" type="text/css" href="design.css" media="all">
</head>
<body>
<h1>Test</h1>
<p>
[アイウエオ]
</p>
</body>
</html>
---CSSソース---
p {
color:#15555;
}

こんな感じの設定で、<p>で囲んだ[aiueo]の部分は灰色になるはずなのですが、
ブラウザで確認すると黒色のままです。
何故でしょうか?
742Name_Not_Found:2007/01/06(土) 16:26:00 ID:aNzgOnaF
age忘れ・・・。
743Name_Not_Found:2007/01/06(土) 16:41:36 ID:???
#15555?
744741:2007/01/06(土) 17:12:03 ID:???
#555555
でした。

16進数とかよく分からないので、とりあえず参考書通りに指定してみたのですが、
灰色って#555555で合っているのでしょうか?
もしかして参考書のミスですか?
745Name_Not_Found:2007/01/06(土) 17:14:32 ID:???
(;´Д`) ・・・・・
746Name_Not_Found:2007/01/06(土) 17:34:02 ID:???
>>744
それは色だけが反映されないのか?
だとしたら、全角スペース使っちゃってるとか綴り間違いとか。
CSS全部反映されてないんだとしたら、適用間違い。
とりあえず
ttp://hp.vector.co.jp/authors/VA022006/
747Name_Not_Found:2007/01/06(土) 17:51:07 ID:SxrpEiei
MACのsafariで表示がずれてしまうんですが対策おせーて
748Name_Not_Found:2007/01/06(土) 18:05:45 ID:???
やだ
749Name_Not_Found:2007/01/06(土) 18:16:23 ID:???
SafariでずれるCSSに問題があるんじゃ・・・
750Name_Not_Found:2007/01/06(土) 18:26:01 ID:???
Safariに問題がある
751Name_Not_Found:2007/01/06(土) 18:39:35 ID:???
ほんとにほんとにほんとにほんとにらいおんだ
752741:2007/01/06(土) 18:42:17 ID:???
>>746
p {
color:#C0C0C0;
}
でキチンと灰色になりました。
#555555がおかしかったみたいです。
ありがとうございました。
753Name_Not_Found:2007/01/06(土) 18:59:08 ID:???
>>752
いや、#555555って色もあるから、単に書き間違いだろう・・・
754Name_Not_Found:2007/01/06(土) 19:01:08 ID:???
#555555じゃ黒と大差ないからな。
見間違えたんじゃね?
755Name_Not_Found:2007/01/06(土) 19:19:30 ID:???
だけどちょっと、だけどちょっと僕だって黒いな
756Name_Not_Found:2007/01/06(土) 22:52:13 ID:???
>>747
標準モードにしてみ。
757Name_Not_Found:2007/01/08(月) 15:45:28 ID:???
!!!CSS!!!
ul {
text-align:left;
list-style-image:url(listmark.gif);
margin-left:25px;
padding-left:0;
margin-top:0;
}

li {
padding-left:0.3em;
font-size:0.875em;
color:#555555;
margin-bottom:0.5em;
}

!!!HTML!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<link rel="stylesheet" type="text/css" href="design.css" media="all">
</head>
<body>
<h3>テスト</h3>
<ul>
<li>aaaaa</li>
</ul>
</body>
</html>
としています。
758Name_Not_Found:2007/01/08(月) 15:47:31 ID:???
HTMLファイルとCSSファイルとおなじディレクトリにlistmark.gifを置いてあるので、
項目の●がlistmark.gifで表示されるはずなのですが、表示されていません。
何故でしょうか?
759Name_Not_Found:2007/01/08(月) 16:45:21 ID:???
気のせいでしょう
760757:2007/01/08(月) 18:17:15 ID:???
いえ、気のせいではないようです。
761Name_Not_Found:2007/01/08(月) 21:02:38 ID:a6mmtkak
質問です。
<div id="A"><div id="B"></div></div>
<div id="C"></div>
として
A{float:right;}
C{float:right;}
とし左からA、Cと表示させ
B{margin-left:-100px}
としてAから少し左にはみださせたいのですが、
CのほうがBの上にかぶさってしまい、Bが100px見えなくなってしまいます。
どうすればCよりBを上に表示できますか?
お願いします。
762Name_Not_Found:2007/01/08(月) 21:32:07 ID:3x4+siLD
DIV要素に枠線つけて、
その中にLI要素のリストを入れて、
行間を狭くしようと思ってCSSで設定したら、
何故か枠線に繋がるような下線が引かれてしまいました・・・

<HTML><HEAD><TITLE>test</TITLE><STYLE TYPE="text/css">
<!--
DIV{
border-width:thin;
border-style:solid;
border-color:#000000;}
UL{
margin-bottom:-10px;}
LI{
margin-bottom:-2px;
}
--></STYLE></HEAD>
<BODY>
<DIV>
挨拶一覧
<UL>
<LI>おはようございます</LI><LI>こんにちわ</LI><LI>こんばんわ</LI><LI>おやすみなさい</LI></UL>
</DIV></BODY></HTML>

こうなってしまう理由はわからないのですが、
この問題は、DIV要素の変わりにTABLE要素を使うことで、一応片付けています。
DIV要素使えないのかな・・・?
763Name_Not_Found:2007/01/08(月) 22:16:10 ID:???
>>761
被る?のは多分IEのせい。
だけどおまいさん、その書き方だと
     C A
B  (100px)
となるが、それでいいのか?
まず何をどうしたいのかが全く見えてこない。

>>762
マルチ乙。
764Name_Not_Found:2007/01/08(月) 23:07:07 ID:???
>>761
floatした要素の高さは認識されないの。
他の人の言う通り、どういう表現をしたいのか具体的に書かないとね。

>>762
あっちのスレにちゃんと謝ってないから、マルチって言われちゃうの。
マルチじゃなくてもアンタの言ってる事も意味不明よ。
divにborder指定してるんだから枠線が出来るのは当然だし、マイナスmarginってどういう考えよ。
765Name_Not_Found:2007/01/08(月) 23:42:18 ID:???
いつからツーチャンネルがマルチ禁止になったのかね?
766Name_Not_Found:2007/01/09(火) 00:07:00 ID:???
質問スレではもともと禁止じゃね?
767Name_Not_Found:2007/01/09(火) 00:12:59 ID:???
ずっと昔からマルチは師ねが基本だった筈だが。
768Name_Not_Found:2007/01/09(火) 03:14:59 ID:???
ルールはないけど、世間には暗黙の了解ってのがあるんだよ
769Name_Not_Found:2007/01/09(火) 03:20:24 ID:???
2chなら非常識な事してもいいと思ってんだろ。
770757:2007/01/09(火) 09:54:16 ID:???
ul {
text-align:left;
list-style-image:url(listmark.gif);
margin-left:25px;
padding-left:0;
margin-top:0;
}

li {
padding-left:0.3em;
font-size:0.875em;
color:#555555;
margin-bottom:0.5em;
}



を、CSSソースの上の方に持ってきたら正常に表示されました。
これって何でですかね?
771Name_Not_Found:2007/01/09(火) 10:34:22 ID:???
>>770
理解せずパクってくるとそうなるよね。
772757:2007/01/09(火) 10:43:16 ID:???
>>771
参考書の通りに進めただけなのですが・・・
何かわけがあるのでしょうか?
773Name_Not_Found:2007/01/09(火) 12:37:53 ID:???
あります。
774757:2007/01/09(火) 12:44:21 ID:???
教えていただけませんか?
775Name_Not_Found:2007/01/09(火) 13:46:16 ID:???
わかりません。
776Name_Not_Found:2007/01/09(火) 15:32:50 ID:hy1bWRhw
strict.dtd にすると
Firefoxで 画像の下に5pxくらいの余白が出来ちゃうのですが、
(line-height?)
みなさんどうやって解決してますか??
777Name_Not_Found:2007/01/09(火) 15:37:25 ID:???
俺はエスパーじゃないんで答えられない
778Name_Not_Found:2007/01/09(火) 15:44:27 ID:hy1bWRhw
>>776 に補足です。

環境はWindowsでFirefoxは 2.0.0.1 です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
* {
margin:0px;
padding:0px;
}
<div><img id="1"></div>
<div><img id="2"></div>


とした場合でも、1と2の間に隙間が開いてしまうのです。
以前からこうではなかったような気もするのですが、、。
779Name_Not_Found:2007/01/09(火) 15:44:59 ID:???
IE使えば?
780Name_Not_Found:2007/01/09(火) 15:51:50 ID:hy1bWRhw
IEも使ってますよ。
781Name_Not_Found:2007/01/09(火) 15:55:01 ID:???
うるせぇ黙れ
782Name_Not_Found:2007/01/09(火) 16:07:57 ID:???
なぜ?私に不備があるなら言って下さい。
そうでないならそちらがスレを閉じるのがオススメです。
783Name_Not_Found:2007/01/09(火) 16:19:23 ID:???
オススメっすかwwwwwwwwww
784Name_Not_Found:2007/01/09(火) 16:22:14 ID:???
オススメっすねwww
785Name_Not_Found:2007/01/09(火) 16:22:23 ID:???
あなたに不備があるのは明らかですが、それが何かわれわれには知る事ができません。
786Name_Not_Found:2007/01/09(火) 16:26:19 ID:???
わからないのに明らかとはこれいカニ。

っていうか解決しちゃった。
787Name_Not_Found:2007/01/09(火) 17:06:14 ID:???
不備があるから問題が発生するのです。
788Name_Not_Found:2007/01/09(火) 18:12:02 ID:???
>>776
img {vertical-align:bottom;}
でだめかな?
789757:2007/01/09(火) 23:46:18 ID:???
みんなぼこぼこにしてやんよ
 ∩_∩      
 ( ・(ェ)・)=つ≡つ
 (っ ≡つ=つ    
 ./   ) クママママ
 ( / ̄∪ 
790Name_Not_Found:2007/01/10(水) 10:01:44 ID:SN8hBeeX
定義リストで

<dl>
<dt>リンク先</dt>
<dd>リンク先の説明</dd>

<dt>リンク先</dt>
<dd>リンク先の説明</dd>

</dl>

@の部分にリンク先url<a>を挿入したり
またはdtに商品名、ddに商品説明を入れて
@に商品サムネイル画像<img>を挿入したりするのは
dlの構造的な使い方的にはOKなのでしょうか?
791Name_Not_Found:2007/01/10(水) 11:32:06 ID:???
>>790
HTMLの問題だからスレチだろうが・・・・
NG。aもimgもddを入れてから。
dlの下にはdtかddのみ。
792Name_Not_Found:2007/01/10(水) 11:32:07 ID:???
dl の直下には dt と dd しか置けないので駄目

さらにCSSとは何の関係もない
793790:2007/01/10(水) 11:58:48 ID:???
cssではなくタグの問題でしたね;
お答え頂きありがとうございました
794Name_Not_Found:2007/01/10(水) 17:00:01 ID:???
>>788
回答有難うございます。
まさにそれで解決しました!
795Name_Not_Found:2007/01/10(水) 21:36:11 ID:???
IE7が属性セレクタに対応したそうなので、ユーザースタイルシートで
バナー広告消しなどに使えないかなと思って
テストしてみました。しかし

table[width="600"]{
display:none !important;
}

上記のような書き方をしてみたのですが、正常に動きません。
FirefoxのuserContent.cssだと

@-moz-document url("http://www.example.com/") {
table[width="600"]{
display:none !important;
}
}

上記のような書き方で期待した動作をするのですが、
IE7で正常に動作させるにはどうしたらよいでしょうか?
板違いでしたら申し訳ありませんが、適当な板に
誘導していただけると助かります。
796Name_Not_Found:2007/01/10(水) 23:54:42 ID:???
>>795
こちらへどうぞ

http://www.google.com/
797Name Not Found:2007/01/11(木) 09:59:00 ID:???
<div class="a">text</div>
.a{ border:1px solid red; height:500px; width:500px;}
上記のような場合のときに、textを中心に持っていきたいのですが、どうやれば
いいのでしょうか?横は、text-alignでできるのですが、縦に中心に持っていくには
どうすればいいのでしょうか?
798Name_Not_Found:2007/01/11(木) 10:03:50 ID:???
テンプレ嫁
799Name Not Found:2007/01/11(木) 10:50:25 ID:???
すいません。読んでもよくわからなかったので、どうか教えてください。
800Name_Not_Found:2007/01/11(木) 11:02:13 ID:???
マルチは放置で。
801Name_Not_Found:2007/01/11(木) 15:26:59 ID:wSdU71Gv
<h1>ああああ</h1><h2>いいいい</h2>

このソースだと

ああああ

いいいい

ってなるけどh1とh2を使いながらも「ああああいいいい」って続けて表示させるにはどうしたらいいの?
802Name_Not_Found:2007/01/11(木) 15:30:06 ID:???
>>801
display:inline
803Name_Not_Found:2007/01/11(木) 15:43:53 ID:???
furo-todemoiiyo
804Name_Not_Found:2007/01/11(木) 16:36:10 ID:???
風呂、とてもいいよ
805Name_Not_Found:2007/01/11(木) 18:23:10 ID:6rKw9Hu/
回答1
<td><h1>ああああ</h1></td><td><h2>いいいい</h2></td>

回答2
<h1><h2>ああああいいいい</h2></h1>
806Name_Not_Found:2007/01/11(木) 18:28:15 ID:???
とんでもない馬鹿が現れた。
807Name_Not_Found:2007/01/11(木) 19:19:54 ID:???
>>801

これが正解
<h1></h1><h2></h2><fontsize="7">あああああ<font>
<sontsize="5">いいいいい</font>
808Name_Not_Found:2007/01/11(木) 19:26:14 ID:???
こな〜〜ゆき〜♪
809Name_Not_Found:2007/01/11(木) 19:30:54 ID:???
おまえら真面目にやれよ!

正解
<span><h1>ああああ</h1><h2>いいいい</h2></span>
810809:2007/01/11(木) 19:32:05 ID:???
ごめん思いっきり間違いorz

見なかったことにしてくれ
811Name_Not_Found:2007/01/11(木) 19:36:57 ID:???
<h1></h1><h2></h2><font size="7">あああああ<font>
<font size="5">いいいいい</font>

俺もスで間違ってた.

cssでサイズ指定するのになれ過ぎちゃったな。
812Name_Not_Found:2007/01/11(木) 19:38:38 ID:???
    _, ,_  スパン!
 ( ‘д‘)
  ⊂彡☆))Д´) >>809
813Name_Not_Found:2007/01/11(木) 20:07:33 ID:6rKw9Hu/
    _, ,_  スパン!
 ( ‘д‘)
  ⊂彡☆))Д´) >>807

    _, ,_  スパン!
 ( ‘д‘)
  ⊂彡☆))Д´) >>809
814Name_Not_Found:2007/01/11(木) 20:07:40 ID:???
猛吹雪が吹き荒れている
815Name_Not_Found:2007/01/11(木) 20:08:29 ID:6rKw9Hu/
こな<h1>ああああ</h1>ゆき<h2>いいいい</h2>


これでおk
816Name_Not_Found:2007/01/11(木) 20:15:24 ID:???
大寒波襲来
817Name_Not_Found:2007/01/11(木) 20:56:28 ID:???
スパン → span

(´・ω・`)
818Name_Not_Found:2007/01/11(木) 21:54:49 ID:???
ひまだな
819 ◆ZSxIfyU42I :2007/01/11(木) 23:30:39 ID:???
NN4のtableに関して質問です。
border属性なしのtableで、
最新ブラウザだとtdに対するborderでセルの線が引けますが、
NN4だと線が引けません。特別な書き方が必要でしたらお教えください。
820 ◆ZSxIfyU42I :2007/01/11(木) 23:31:25 ID:???
失礼、補足です。
>最新ブラウザだとtdに対するborderでセルの線が引けますが、

最新ブラウザだとtdに対するborderプロパティでセルの線が引けますが、
821Name_Not_Found:2007/01/11(木) 23:43:26 ID:???
822 ◆ZSxIfyU42I :2007/01/11(木) 23:49:45 ID:???
>>821
不可能だと言うことでしょうか?
823Name_Not_Found:2007/01/11(木) 23:52:38 ID:???
NN4はもうぃぃ…
824Name_Not_Found:2007/01/12(金) 00:00:20 ID:???
そんなのを使ってる方がウンコなんだからさ。
対応させるのはもうやめようよ。
825Name_Not_Found:2007/01/12(金) 00:08:02 ID:???
NNは失敗作
826Name_Not_Found:2007/01/12(金) 00:26:01 ID:cfKGwcKR
CSSリンクさせてるけど肝心のHTMLに<div>がありません。
やはり<div>タグは必要ですか?
827Name_Not_Found:2007/01/12(金) 00:31:06 ID:???
何を言ってるのか..
828Name_Not_Found:2007/01/12(金) 00:37:41 ID:???
DIVはでぃぶんで書けよ
829Name_Not_Found:2007/01/12(金) 00:39:37 ID:???
メンドいよ。デブでいいよ。
830Name_Not_Found:2007/01/12(金) 01:26:05 ID:???
border=1
831Name_Not_Found:2007/01/12(金) 02:13:43 ID:???
古いブラウザ使ってる奴が悪いって考えは
プロとして、あってる?
832Name_Not_Found:2007/01/12(金) 02:18:19 ID:???
あっていない
833Name_Not_Found:2007/01/12(金) 02:42:22 ID:???
IEではおもいっきりしょぼく

IE以外では見た目もかっこよく・きれいに

IEに対応しつつIEはゴミということを伝える

これがプロ
834819 ◆ZSxIfyU42I :2007/01/12(金) 02:45:59 ID:???
無理のようですので失礼します。
どうもありがとうございました。
835Name_Not_Found:2007/01/12(金) 02:58:46 ID:???
むりじゃないよ。
836819:2007/01/12(金) 08:49:50 ID:???
もうやりません
837Name_Not_Found:2007/01/12(金) 09:28:39 ID:???
そんなこというな
838Name_Not_Found:2007/01/12(金) 09:38:48 ID:???
っつーか、NN4対応させようなんて偉い。
俺なんかもう完全無視してるよ。

っつーか、使ってるヤツいるのか?
0.1%もいないんじゃ?
839Name_Not_Found:2007/01/12(金) 10:06:56 ID:???
もう俺らがどんどん無視していかないと
xhtml+cssが標準にならないんだよ
840Name_Not_Found:2007/01/12(金) 10:38:06 ID:???
>>838
0.1%って結構大きい数字でぃ
841Name_Not_Found:2007/01/12(金) 12:22:50 ID:???
flashってNN4で表示されるっけ?
表示されないとしたら、大手企業殆どNNはきってると言うことだよな
842Name_Not_Found:2007/01/12(金) 12:50:54 ID:???
>>840

少ないよ

色盲率のほうが高いのに
読めないページ作ってるほうが問題
843Name_Not_Found:2007/01/12(金) 13:33:21 ID:???
>>842
それって明暗が少なかったりリンクにした線がないページを作ってるってことじゃないか。
そもそも最低のページ。
844Name_Not_Found:2007/01/12(金) 13:53:07 ID:???
NN4なんてCSS切ってやって
文字&画像を素で見せた方がマシ。
845Name_Not_Found:2007/01/12(金) 13:55:36 ID:???
>>844
それが普通だよな。
846Name_Not_Found:2007/01/12(金) 15:14:49 ID:???
               |
    (・L・).        |
   ◎(^ω^)ヽ     .|
   (3⊂∩∩ノ      .|
    | |   |       |   (^ω^;)  \WWWWWWWW/
    | ∪∪|        |   ( ̄\ ヽ  < CSSなんか捨てて >
    |  ||  |.        |  / 7ヽ   /   < かかってこいよ! >
    (__)(__)       |  / ./  `ーi   < Netscape!!   >
               |  し'    ⌒i  /MMMMMMMMM\
               |/  / ̄|  |
               (__)   (___)
847Name_Not_Found:2007/01/12(金) 16:09:13 ID:???
>>841
少なくともプラグインがあったと思う。
NN4はHTMLとCSSが終わってるだけで、他は当時としては「まとも」だったし。

>>844
マシというか、それで良いじゃん。
848Name_Not_Found:2007/01/12(金) 18:06:10 ID:E6LuNBfX
閉鎖前に一言
お世話になりました
849Name_Not_Found:2007/01/12(金) 19:11:54 ID:???
table要素は内容にあわせて自動的に幅が決定されますが、
div要素でこのような振る舞いをさせるにはどのようにすればいいのでしょうか?
850Name_Not_Found:2007/01/12(金) 19:15:04 ID:???
>>849
width:100%
851Name_Not_Found:2007/01/12(金) 19:23:43 ID:???
>>850
?それだと幅が最大になるだけだと思うんですが。
852Name_Not_Found:2007/01/12(金) 19:41:30 ID:???
>>849
white-space:nowrap;
width:1px;
853Name_Not_Found:2007/01/12(金) 19:55:14 ID:???
>>852
レスどうもです。
それだとやはり幅が1ピクセルになってしまいますね。
ボーダーを表示したり背景を変えたり余白を設定したりすると表示が崩れてしまいます。
やはりtableを使うしかないんでしょうか。
854Name_Not_Found:2007/01/12(金) 19:57:36 ID:???
表組みなら表を使え。
表を表組み以外で表現するほうがおかしい。
表=諸悪の根源という発想はやめるべき。
855Name_Not_Found:2007/01/12(金) 20:01:54 ID:???
中の要素の量によってdiv幅が変わったりしたら、それこそ表示が崩れるでしょ。
856Name_Not_Found:2007/01/12(金) 20:08:18 ID:???
>>854
いや、表ではないです。
┌─────────────┐
│     ┌───-─┐    │
│     │This is the│←div │
│     │content  │     │
│     └───-─┘    │
└─────────────┘
こんな感じで、div要素の中身を左寄せにしつつ
div要素を中央寄せにしたいというだけなのですが、コンテンツによって
div要素の幅が自動的に変わるようにしたいと思っています。
このときtable要素にすれば意図したように表示できるのですが、
div要素ではどうもうまくいかないというわけです。
857Name_Not_Found:2007/01/12(金) 20:16:41 ID:???
>>856
コンテンツによって幅がバラバラってのはカッコ悪いでしょ。
何ページかあるなら統一感ってのは大事だと思うし、同ページ内なら尚更だよ。
どうしてもtableでやりたいんなら、好きにすればいいし。
858Name_Not_Found:2007/01/12(金) 20:24:04 ID:???
>>857
いえ、このようなdiv要素は各ページに1つのみ、それにどのページでも同じものを表示するので
その点は問題ないです。
ですがやはりdiv要素では無理なのですかね。
おとなしくtable要素で書くことにします。
どうもありがとうございました。
859Name_Not_Found:2007/01/12(金) 20:32:37 ID:???
どうせdiv内に直書きしてるレベルだろ。
カッコつける以前なのさ。
860Name_Not_Found:2007/01/12(金) 20:43:10 ID:???
divでなくspan使えばいいんじゃね?
861Name_Not_Found:2007/01/12(金) 23:53:56 ID:???
>>856
min-width+IEにはハックでwidth
862Name_Not_Found:2007/01/13(土) 02:00:57 ID:???
2chが終わりそうな今言うのも何だが、テンプレに未だにNetscape 6とか書いてあるのはどうなんだろう。
863Name_Not_Found:2007/01/13(土) 16:01:46 ID:ena7+LGw
質問です。

最下段の余白を取りたいのですが、↓の様な記述をしてもIEでは余白が出来ないのですが、FOXやOperaではしっかり余白ができます。

<p style="margin-bottom:50px">最下段</p>
</body>
</html>

IEでも余白を取る方法はありませんか?
864863:2007/01/13(土) 16:04:15 ID:ena7+LGw
追記:IEとはIE6のことです。
865Name_Not_Found:2007/01/13(土) 16:06:45 ID:???
>>863
bodyに下マージン
866863:2007/01/13(土) 16:13:10 ID:ena7+LGw
>>865
できました!
ありがとうございました。
勉強になりました。
867Name_Not_Found:2007/01/13(土) 20:40:31 ID:O2qLH+M2
リンクの上にマウスをもっていくとマウスカーソルが変わる指定方法を教えてください
868Name_Not_Found:2007/01/13(土) 20:44:28 ID:???
>>867
a:hoverにどう変わるか指定
869Name_Not_Found:2007/01/13(土) 20:45:21 ID:O2qLH+M2
ありがとうございます
870Name_Not_Found:2007/01/13(土) 22:34:49 ID:???
>>867
つかウザイからヤメレ
871Name_Not_Found:2007/01/14(日) 08:09:44 ID:???
質問です。

自サイト
ttp://fenice.kyarame.com/

のサイドメニューで、「cg」の部分だけクリックした状態(active)の状態になると
下のlinkでhoverに指定した画像が適用されてしまいます。
ほかのメニューとまったく同じように指定しているはずなのにこうなっているのでお手上げ状態です。
CSSファイルをUPしてみました。
ファイルの最下部にhover、activeの設定があります。
よろしければ助言をお願いします

ttp://ranobe.com/up/src/up165464.zip
872871:2007/01/14(日) 08:24:51 ID:???
あぁ・・解決しました。

activeの指定が明らかに間違ってました・・

なんか朝からぼけてたようですいません・・
873Name_Not_Found:2007/01/14(日) 20:44:39 ID:1fPM+V9q
バグにはまって早10日。
やっと脱出できますたー。

泣けた。

スタイルシートぉぉぉぉ・・・・・・・・。
874Name_Not_Found:2007/01/14(日) 21:21:10 ID:???
悪いのは何もかもIE
875Name_Not_Found:2007/01/15(月) 10:24:38 ID:???
ブログの時代になって、
自分でシコシコHTMLとCSS書くやつは減ったな。
このスレも寂れてしまった。
876Name_Not_Found:2007/01/15(月) 12:08:31 ID:???
ブログになったってデザイン編集でCSSたっぷり弄ればいいじゃない!
877Name_Not_Found:2007/01/15(月) 12:18:57 ID:???
>>875
このスレだけでなく、この板全体が寂れただけだ。
878Name_Not_Found:2007/01/15(月) 14:12:55 ID:???
そうじゃないと、プロが儲からない。
879Name_Not_Found:2007/01/15(月) 15:08:23 ID:???
それもそうだな。
寂れて良かった♪
880Name_Not_Found:2007/01/15(月) 15:18:57 ID:???
大昔と違って今はホムペ作り=ブログだしね。
よほど趣味的に興味ないとお仕着せテンプレ以上に
HTMLだのCSSだのいじろうと思わないわな。
881Name_Not_Found:2007/01/15(月) 22:58:50 ID:???
ここはそういう人が来るべき場所じゃないのは確かだわな
882Name_Not_Found:2007/01/16(火) 00:30:07 ID:???
<div id="header">hogehoge</div>
<div id="content">hogehoge</div>
<div id="sidebar">hogehoge</div>
<div id="footer">hogehoge</div>

こういうのがあるとして、この四つを、

■□



■=header
□=content
○=sidebar
△=footer

こんな風にレイアウトしたいのですが、うまい方法が見つかりません。
要はheaderの下にsidebarを持ってきて、headerの横にcontentを並べるようにしたいんです。
contentとsidebarの順番を逆に記述すれば簡単に出来るんですが、そうはしたくないのでそれは無しでお願いします。
883Name_Not_Found:2007/01/16(火) 00:34:47 ID:???
>>882
headerがサイドバーの一部みたいにするの?
headerとsidebarとfooterにposition:absolute;てして好きな位置に配置して幅も適当にしてcontentに左マージン
884Name_Not_Found:2007/01/16(火) 00:38:26 ID:???
>>883
あ、そんな感じです。
absolute使わないでそうする方法ってないですかね?
885Name_Not_Found:2007/01/16(火) 01:22:36 ID:???
contentが長いんだったらfloat:rightでよくね?
でもfloatよりabsoluteでcontentを外しちゃったほうがいいとは思うが。
886Name_Not_Found:2007/01/16(火) 04:56:10 ID:???
高さがまちまちなboxをfloatで並べてるんだけど、改行された時に変なところで引っかかるんだ。
なんかいい方法無い?
887Name_Not_Found:2007/01/16(火) 05:57:48 ID:???
>>880
じゃブログ向けCSS質問スレッド とかいるのけ?
888Name_Not_Found:2007/01/16(火) 09:07:24 ID:???
>>886
具体的に

>>887
ブログ板ってのがあるんだから、そっちで考える事でわ
889Name_Not_Found:2007/01/16(火) 09:41:25 ID:???
width:100pxのboxをfloat:leftで並べて、てきとーなテキスト流し込んだ場合、例えば左から1行、3行、2行、1行とか一番右端の高さより高いboxが途中にあると、改行した時にboxが左端に行かずに3行の一番高いboxに引っかかってしまう。
高さを指定してやると解決するが、高さは変わるし、不自然な隙間ができてしまう場合があっていまいち。
890Name_Not_Found:2007/01/16(火) 10:57:35 ID:JByOKKis
 a
┌─────────┐
│ b□□□□□□.   │
└─────────┘
┌───┐ ┌───┐
│     │ │     │
│     │ │     │
│     │ │     │
└───┘ └───┘
 c         d

aのメニューボックスのの中にあるbのメニュー項目ボックスをfloat:leftにして横並びにして
aの下に隣接するfloat:leftで横並びになったボックスcdがあります
このbに指定したfloatをclear指定するのはcのボックスにclear:bothを指定でよいのでしょうか?
891Name_Not_Found:2007/01/16(火) 11:22:48 ID:???
>>890
いいかどうか、やってみればいいじゃない。
892Name_Not_Found:2007/01/16(火) 13:03:09 ID:???
いいんじゃない
893Name_Not_Found:2007/01/17(水) 01:16:31 ID:???
Safari1.3.2なんですが、リンクテキストのサイズを12px以下にした場合に
a{text-decoration: none;}
a:hover{text-decoration: underline;}
をやろうとするとマウスオンしても下線が出てこないのは仕様なんでしょうか?
シイラ1.2.1でも同様でした
IE,Opera,FireFox,ネスケ(どれもMac OSX版)では問題ないのですが…
894Name_Not_Found:2007/01/17(水) 01:24:28 ID:???
そんなちっちゃい字を使うなって天の啓示…
895Name_Not_Found:2007/01/17(水) 01:32:07 ID:???
>>893
自分もつい最近それ気づきました…
hover時の下線有/無が効かないですよね。
何か書き方が間違ってるんだろうか?
896Name_Not_Found:2007/01/17(水) 01:34:06 ID:???
取り敢えずhoverと{の間に半角スペース入れて。
確かIEではバグが出る。Safariは知らんが。
897Name_Not_Found:2007/01/17(水) 01:40:59 ID:???
>>893,895
問題なく表示されるが?
898893:2007/01/17(水) 01:54:39 ID:???
>>897
マジですか?じゃあやっぱ書き方の問題なのかな…
ちなみにSafariのバージョンは何でしょうか?
うちはOSX10.3.9でSafari1.3.2です

>>894
13pxだとちょっと大きい気がするのさ…(´・ω・`)ショボーン

>>896
やってみましたが変わらずでした…
899Name_Not_Found:2007/01/17(水) 01:54:48 ID:???
ググったらこんなの見つけたけど違うかな。
----
Mac IE5やSafariでヒラギノ角ゴ Pro W3を指定するとフォントサイズ=10px以下の時に
リンクのアンダーライン(下線)が出なかったりするそうですが
----
900Name_Not_Found:2007/01/17(水) 01:57:54 ID:???
Geckoにも似たような問題があったらしいけど
ひょっとしたら原因同じ(MacOSのせい)かも。
ttp://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2007010104
901893:2007/01/17(水) 02:08:08 ID:???
>>899
なんとなく近い気もするのですが、ウチの環境だと
IE5.2.3では12pxでも問題なく下線の有無が反応しますね
Safariは10pxどころか12pxでダメです…
ただそれはもしかしたらSafariの標準フォントを
ヒラギノ角ゴPro13にしてるからなのかも

あ、そんな事言ってたら発見!
標準フォントをOsakaやMSゴシックにすると12pxでも反応する!
どうやらヒラギノ系と小塚などではサイズによってダメなようですね
902Name_Not_Found:2007/01/17(水) 02:18:27 ID:???
ちょっと試してみたけど、ヒラギノ角ゴPro 12px以下だと下線出ないね。
Safariの書体変えるか、a:linkで13pxより上げれば効く。
でも今まで普通に下線hoverなんて見てるのになぁ・・・ナンデ?
903Name_Not_Found:2007/01/17(水) 02:53:52 ID:???
>>902
ブラウザデフォが12px以下ではないんでは。
関係ないが、俺は■等が小さく表示されるのが嫌だからOsakaにしている。
904Name_Not_Found:2007/01/17(水) 11:06:38 ID:???
lineheightの%上げたら大きくならんかな?
試してないけど
905Name_Not_Found:2007/01/17(水) 16:45:20 ID:9pTJ4VHE
Safariのデフォルトフォントって明朝なんだよな。
俺は無意識にヒラギノ角ゴにしちゃってるけど、
やっぱ明朝のまま使ってる人の方が多いよね?
906Name_Not_Found:2007/01/17(水) 18:19:37 ID:???
そんな事ないべ。
907Name_Not_Found:2007/01/17(水) 18:33:43 ID:???
自分はNN4の頃から明朝→ゴシックを当たり前にやってるけど
デフォのまんまって人も相当いるでしょ。
908Name_Not_Found:2007/01/17(水) 19:08:51 ID:???
いや〜さすがにゴシックの方が多いでしょう
それまでIEメインで使ってた人はほとんどゴシックに変えてるんじゃ?
NC使ってた人達はそのままでSafari使ってなさそうだしw
909Name_Not_Found:2007/01/17(水) 19:45:47 ID:???
mac板で聞いた方が早いと。
910Name_Not_Found:2007/01/17(水) 20:33:13 ID:???
こんな感じでフォームを作ってみたんですが、IE6.0だとパスワードのフォームが大きくなってしまいます。
解決策をご教授ねがえないでしょうか?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<title>新規登録</title>
<STYLE TYPE="text/css">
<!--
.waku{
padding:20px;
border-style:solid;
border-color:#ff0000;
}
h3{
border-style:solid;
padding:0px 2px;
width:200px;
}
.text{
border-color:#ff0000;
border-width:0px 0px 2px 20px;
}
form{
}
form, input{
border-color:#ff0000;
border-top-width:3px;
border-bottom-width:3px;
border-left-width:3px;
border-right-width:3px;
}
-->
911ソース続きです:2007/01/17(水) 20:34:13 ID:???
</STYLE>
</head>
<body>
<div class="waku">
<h3 class="text">新規登録</h3>
<form method="POST" action="karitouroku.cgi">
<p><strong>メールアドレス</strong> <input type="text" name="mail" size="20"></p>
<p><strong>パスワード</strong>     <input type="password" name="pass" size="20"></p>
   <input type="submit" value="登録" name="submit">  <input type="reset" value="リセット" name="reset"></p>
</form>
</div>
<br>
</body>
</html>
長々と失礼しました。
912Name_Not_Found:2007/01/17(水) 20:49:15 ID:???
>>898
20pxでも小さいと思いますが何か。

>>910
inputにwidth設定。
913Name_Not_Found:2007/01/17(水) 20:51:01 ID:???
>>911
どこがCSSなんだ?
inputにstyle指定してwidth要素にすりゃいいだろ。
914Name_Not_Found:2007/01/18(木) 00:03:53 ID:???
フォームタグ(optionとか)にdisplay=noneがIE6.0では利きません。
しかし、Firefox1.5では利きます。

これって仕様なのでしょうか?
915Name_Not_Found:2007/01/18(木) 00:10:44 ID:???
display=noneはきいちゃまずいと思うな・・・
916Name_Not_Found:2007/01/18(木) 00:15:31 ID:???
しかもageてるアホ
917Name_Not_Found:2007/01/18(木) 00:25:32 ID:???
>>916
むしろageでID出すのが普通なんだが。

ID出てないがwww
918Name_Not_Found:2007/01/18(木) 00:49:53 ID:???
むしろFirefox1.5できいていることが驚きだ。
919Name_Not_Found:2007/01/18(木) 23:24:17 ID:???
画像のサムネイルにマウスオーバーしたときのみ、画像の枠の色を変えたいと思い、
<p>
<a href="xxx_thumb.jpg">
<img src="yyy.jpg" alt="zzz" />
</a>
</p>
というマークアップをして、
a:link img{
border : solid 5px #cccccc ;
}
a:visited img{
border : solid 5px #999999 ;
}
a:hover img{
border : solid 5px #000000 ;
}
というスタイルを定義したのですが、IE6において、
hover時のborderの色の変化が適用されなくて困っています。
(正確には、hoverで指定した値がactiveのタイミングで適用されてしまっています)
Firefox2.0では問題なく動作しました。

どなたか、原因と解決法を教えていただけないでしょうか。
920Name_Not_Found:2007/01/19(金) 00:06:10 ID:???
>>919
a:●● imgじゃなくてa:●●にボーダー設定。
921Name_Not_Found:2007/01/19(金) 01:54:45 ID:???
>>921
その方法も試したのですが、逆にFirefox2.0で表示が崩れます。
具体的には、borderから画像がはみ出した形になります。
922Name_Not_Found:2007/01/19(金) 02:04:50 ID:???
つ【ハック】
IEのバグなんだから仕方ない。
923Name_Not_Found:2007/01/19(金) 02:27:16 ID:???
>>922
ありがとうございます。
いろいろ試した結果、a:hoverの方に_filter : Alpha(opacity=100) ;
というプロパティを追加したところ、IEでもborderの変化が適用されました。
念のためアンダースコアハックでIEのみに読み込ませるようにしておいたものの、
環境によって不具合が生じないか、ちょっと不安ですが……
924Name_Not_Found:2007/01/19(金) 03:34:29 ID:???
>>923
わざわざ a:hover に分けなくて、ふつうは、その filterプロパティも a:hover img にまとめるんじゃないかな。
925Name_Not_Found:2007/01/19(金) 11:17:52 ID:???
border-widthって相対で幅を指定できませんよね?
全体のレイアウトを相対指定で行う時、これがネックになるんですけど
みなさんどうやって解決していらっしゃるのでしょうか?
926Name_Not_Found:2007/01/19(金) 12:30:12 ID:???
927Name_Not_Found:2007/01/19(金) 12:47:23 ID:???
>>926
width: 100% - medium;とか書けるなら別に問題ないんですけどね。
928Name_Not_Found:2007/01/19(金) 13:22:34 ID:???
日本語でおK
929Name_Not_Found:2007/01/19(金) 13:30:18 ID:???
DIVのブロックに font-size:80%; とかを指定すると、そのブロック内に設置した
テーブルの中のフォントの大きさもテーブルに何も指定などしていなけば、自動的に80%になりますよね?
そこでテーブルに font-size:80%; の指定をすると、divに指定した80%に乗算されて、
テーブル内の文字は80%より小さくなります。(pxなどの指定ではなくて%の場合です)

IEでは乗算になっているみたいなのですが、他のブラウザでもこうなるんでしょうか?
別のブラウザではDIVに%指定したfont-sizeが、その中のテーブルに%指定したfont-sizeに
影響しないとか、独立しているとかの違いはあるのでしょうか?
930Name_Not_Found:2007/01/19(金) 13:50:52 ID:???
もうブラウザによってばらばらでとりあえずIE死ねって事
931Name_Not_Found:2007/01/19(金) 13:56:15 ID:???
>>929
なんでほかのブラウザで確認しないの?
932929:2007/01/19(金) 14:05:31 ID:???
>>931
すいません。全部自分で入れて試してみろと言われそうな気もしながらも、聞いてしまいました。
大変そうなので、もし知っている人がいれば教えてもらった方が早いかなと思って。
933Name_Not_Found:2007/01/19(金) 14:42:28 ID:???
その長い質問文書いてる間に出来そうな…
934Name_Not_Found:2007/01/19(金) 19:03:14 ID:???
>>932
お前はそれしきのことにそんなに時間がかかるのか?
935Name_Not_Found:2007/01/19(金) 19:22:58 ID:???
人を利用するのが賢い生き方とでもカン違いしてるんだろ。
936Name_Not_Found:2007/01/19(金) 20:21:38 ID:KQTWCWmB
imgとcssに関する質問です。
imgに、paddingを設定しているのですが、
Firefox2.0では、しっかり、間が開き枠線がつくのですが、
IE6だと、間が開きません。

これは、IEのバグでしょうか?

img.thumbnail {
padding: 5px;
background: #fbfbfb;
border: 1px solid #cccccc;
}
937Name_Not_Found:2007/01/19(金) 20:25:42 ID:KQTWCWmB
自己レス。
>>936は、xhtmlで、どうもIEの場合後方互換モード?になっているらしく。
xml宣言をはずすといいらしい。
が、他のもスタイルもずれてくる orz
938Name_Not_Found:2007/01/19(金) 20:41:52 ID:KQTWCWmB
とりあえず、後方互換モードでしのぎました。
他のスタイルのずれも適当に直したらいけた・・・
939Name_Not_Found:2007/01/19(金) 20:42:36 ID:KQTWCWmB
x とりあえず、後方互換モードでしのぎました。
o とりあえず、xml宣言はずしてしのぎました

間違えた・・・。
940Name_Not_Found:2007/01/19(金) 21:17:40 ID:???
>>936
imgへのpaddingってFxやIE6は効くけど
IE5だとダメだったような。
941Name_Not_Found:2007/01/20(土) 06:37:25 ID:V76I1w7Z
>>940
IE5は使っている人いないので、どうでもいいです ><
942Name_Not_Found:2007/01/20(土) 06:51:31 ID:???
アクセスログでは たまに見かけるけどな。
943Name_Not_Found:2007/01/20(土) 08:35:15 ID:???
IE5はまだ結構いるような。
でも対応すんの面倒くさ…
944Name_Not_Found:2007/01/20(土) 12:12:59 ID:zZNKGHsP
リストでナビゲーションメニューを作る場合
メニュー項目をリストにしてその画像を背景にして・・・はわかるのですが
このリストにマークアップした文字自体はどのように処理されているのでしょうか?
因みにココを見て思った事なのですが
ttp://www.honzouin.or.jp/

firefoxで文字サイズを変更してもメニューは何も影響を受けず
cssを外してみるとメニュー項目はちゃんとリスト状態のの文字リンクの形で表示されてます

945Name_Not_Found:2007/01/20(土) 13:00:22 ID:???
解説しているサイトも本もいくらでもあるので勉強して下さい。
946Name_Not_Found:2007/01/20(土) 15:23:17 ID:???
>>944
ソース見りゃいいでしょ。
メンドイから他人に見てくれってか?
947Name_Not_Found:2007/01/20(土) 16:15:15 ID:???
>>944
CSSありのときは字も画像、
CSSなしのときは字は文字。
948Name_Not_Found:2007/01/20(土) 16:16:56 ID:???
>>944
画像を表示しないにすると何も出ない(笑)
949Name_Not_Found:2007/01/20(土) 16:22:34 ID:???
>何も出ない
おまえのPCやばくね?
950Name_Not_Found:2007/01/20(土) 16:30:56 ID:???
CSSon画像offの話だろう。
951Name_Not_Found:2007/01/20(土) 16:44:44 ID:moXdTHNe
>>944
ソース見てないから憶測なんだけど、text-indentでマイナスの値指定してたりしない?
952Name_Not_Found:2007/01/20(土) 17:20:08 ID:???
憶測過ぎるにも程がある
953Name_Not_Found:2007/01/21(日) 15:50:27 ID:???
どうせdisplay:noneとかしてるだけじゃねーの?
954Name_Not_Found:2007/01/21(日) 15:52:31 ID:???
>>953
みたらそうだった
955Name_Not_Found:2007/01/21(日) 20:32:37 ID:gPZG9UVM
これも真言密教の技か
956Name_Not_Found:2007/01/22(月) 01:58:01 ID:???
IEのbehaviorでsavesnapshot、saveHistoryを同時に指定することはできないのですか?
↓では、snapshotは効くようになり、savehistoryが効かなくなります。

<META NAME="save" CONTENT="history">
<META NAME="save" CONTENT="snapshot">
<STYLE>
.SSSSSSS
{
behavior:url(#default#savesnapshot) url(#default#saveHistory);
}
</STYLE>
</HEAD>
957Name_Not_Found:2007/01/22(月) 03:23:19 ID:???
>>956
behaviorはIE独自拡張。当該scriptスレ又はwebprog板へ。
958Name_Not_Found:2007/01/22(月) 09:31:48 ID:???
>>944
どうでもいいけどそこのサイト、普通にまとまっていていい感じだな。
少なめの予算で作る小〜中規模サイトの見本。
とか言ったら言い過ぎか?
959Name_Not_Found:2007/01/22(月) 19:02:46 ID:???
>>958
いや解説でなく商店でもないとなると、表紙は普通こんなのしか選べないだろうね。
しかもブログに飛ばしてるし、3階層無くても量的に間に合う。
960Name_Not_Found:2007/01/23(火) 12:21:30 ID:???
<html>
<head>
<style type="text/css">
<!--
.box_a{
}
.box_b{
}
.box_c{
float:left;
width:80px;
background-color:#c8ffdb;
}
.box_d{
float:left;
width:10px;
background-color:#c8ffdb;
}
-->
</style>
</head>
<body>
<div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div>
<div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div>
<div class="box_b"><a href=""><img src="" class="box_c" /><img src="" class="box_d" /></a></div>
</body>
</html>

上記のコードをブラウザで見るとIE6では隙間なく並んでいるのですが、IE5.01,IE5.5で見ると画像の間に隙間が空いてしまっています。
IE5*でもCSSで画像を横に隙間なく並べる方法はありますか?
961Name_Not_Found:2007/01/23(火) 15:55:07 ID:???
962Name_Not_Found:2007/01/23(火) 18:12:57 ID:dpeY8D15
個人でWebApplication作ってる者ですが、
HTMLファイルを出力することはできるんですが
デザイン能力がまったくなくて
見映えがなかなかしません。

HTMLファイルはdivやclassやidを使い、内容と意味だけ持ったファイルです。

何か、フリーでも商用でもいいんですが
出力したHTMLを基にして、
CSSをデザインするアプリケーションで使いやすいものはないでしょうか??

できれば、上記のような使い方の解説本があるようなものがいいです。
解説本も同時に教えてもらえないでしょうか??
963Name_Not_Found:2007/01/23(火) 18:29:17 ID:???
そんなあんたにはメモ帳しかない
964Name_Not_Found
CSS初心者なのですが、
paddingを頻繁にしようしていて、FireFoxで見てみたら
糞サイトになっていました。
検索してみたところpaddingはIEとFireFoxとで
表示のされ方が違うとのことでした。
そこで質問なのですが、
みなさんはどんなときにどうやってpaddingを使っているんですか?
お願いします