/* CSS・スタイルシート質問スレッド【62nd】 */
【参考】
IEの position:absolute; のバグを利用した擬似フレーム
----------------------------------------------------------------
*IEの position:absolute; のバグを利用した擬似フレーム
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定
以下に示すようなハックを用いることにより、全ブラウザへの対応も可。
/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}
《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
11 :
Name_Not_Found :2006/11/26(日) 19:57:51 ID:khziOUOb
段組したDIVのブロックの下にCSSで極細HR書くと、 IEではほどよい位置なんですがFirefixだと上の段組にべったり張り付いてしまいます。 hr { border: solid 1px #ffffff; border-top-color: #898989; color: #ffffff; } これに何を足せば両ブラウザで同じ(きれいな)見え方になるんでしょうか?
>>11 他でmargin:0;にしてるからでしょ。hrに指定するべし。
13 :
前スレ976 :2006/11/26(日) 21:59:48 ID:???
14 :
Name_Not_Found :2006/11/27(月) 00:14:01 ID:ae66mXe8
javascripをリンクにしていした 要素にa:hoverを擬似クラス付けても効果がないのですが これはやりかたが違いますか?
日本語でおK
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 がかからないようにしたいんです。
17 :
Name_Not_Found :2006/11/27(月) 01:42:53 ID:ae66mXe8
画像(id="abc")にリンクをjavasvript:;でヌルリンク これをCSSでrelativeにする on clickで history.back(); a#abc:hoverで相対的に移動したい 全部javascript指定でgetElementByIDでは上手くいったけど
>>16 <br clear="all">じゃだめ?
19 :
16 :2006/11/27(月) 02:15:44 ID:???
>>18 試してみましたが、clear:left と同じ
A B C
A B
A
DDD
という結果になりました。
>>17 相変わらず日本語はおかしいが
JSでいじれたCSSが単体で動かないのは単に書き方が悪いんだろ。
21 :
18 :2006/11/27(月) 02:54:26 ID:???
>>19 .BCD { float: left; margin-left: 2em; } で出来た。
>>16 ,19
.C {height:8.5em;} /*数値は適当に*/
ら抜きを使うやつが他人の日本語の良し悪しを指摘するのは滑稽な話だ。
なんらとー
「いじれた」をら抜き言葉というやつが他人の日本語の使い方を評するのは滑稽な話だ。
揚げ足取り
「いじられた」 ・・・・・・・いやらしい////><
28 :
16 :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の高さがうまく見積もれません。
>>28 イマイチわからんのだが、そのhtml構造じゃなきゃダメなワケ?
div.Aの高さは固定? div.Aの下辺とdiv.Dの下辺が合ってればいいの?
30 :
16 :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>
(以下略)
って感じになります。
>>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>
長さについて質問です。 出力メディアがプリンタのとき、相対単位であるpxが使われている長さはどの ようにして算出値(computed value)に変換されるんでしょうか。出力メディ アがコンピュータのディスプレイなら画面の解像度とディスプレイの物理的な サイズから1pxの実際の長さが決まるはずですが(ですよね?)、プリンタの 場合の解像度はどうなるのか、ということです。
すれ違い
すれ違いではないような気がするが。 まあ仕様書嫁や。CSS2/2.1の4.3.2な。
35 :
32 :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で統一されていたりするのか)。
連続質問ですいません。
36 :
16 :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の下にまで来て困ってる、という状況。
>>36 ,16
>BCD の方は、実際にはもっと分量があります
って言ってたじゃん。何か正直じゃないんだよね。誰もそんなレイアウトパクらないって。
もうtableでやれと言いたいけど、height指定した空div.Eを作って、div.Bに重なるように配置。
heightの数値=div.Bの高さ(または以上)にすれば、つっかえ棒になる。
font-sizeを指定していても、 メイリオとMS Pゴシックで 1行の高さが違ってしまうのですが、 どのプロパティを指定すれば同じ高さになりますか? line-heightも合わせて指定してみたのですが、 少しはマシになるものの同じにはなりません。
>>38 不可能。もっと言えばその両方共入ってないPCもあるのだし。
40 :
16 :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>
でいけそうです。
ありがとうございました。
>>38 強いて挙げるならfont-size-adjustかな……。Mozilla系しか実装してないし、和文フォントで効くのか分からないし、試した事無いから期待通りの動作をするのか分からないけど。そもそも縦幅比が分からないから無理か……。
書体によって大きさが違うんだから、現実的に考えて厳しいよな。
44 :
Name_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でもうまく対応させるスマートな方法など知ってる方いましたらお願いします。
>>44 IE5.0だよね?
それだと44自身も言ってる通り、<span>を入れるのが一番ラクだと思う。
確かMacIEでもその方が良かったような気が。
ちなみにdisplay:none;だとアクセシビリティが悪いから、他の方法で消すべし。
或いは、デザイン上で可能なら、全てを画像置換にしないでテキスト部分はそのまま表示させるのも一つの手かと。
47 :
46 :2006/11/29(水) 14:34:21 ID:???
あ、ごめん。h1をリンクにしたいのか。
48 :
Name_Not_Found :2006/11/29(水) 14:44:44 ID:bBaWzvrZ
MACIEではtext-indent-9999:;でも大丈夫みたいです。 しょうがないからIE5.0だけfont-size:0;にして背景と同じ色にして無理やり消そうかな・・。
それやるとSEOスパム扱いでで村八分にされるよ。
>>44 padding、height:0、overflow:hiddenを組み合わせてやる方法がある。
Safari(すべてのバージョンかどうかは知りませんが)で、 input や textarea などではborderは(border:noneでは)消せないのですか? 仕様書のどこかにUA依存という風なことが書かれていた気がするのですが、 ページが見つからなくて・・・
52 :
Name_Not_Found :2006/11/30(木) 00:27:20 ID:lt5e32MO
>>51 そうだよ。だからfromはデフォでいいんだよ。弄くんな。
>>52 いやそのまんまだよ。
heightの代わりにpaddingで高さとってoverflow:hiddenにすればテキストは消える。
で、IE5.5以下のためにボックスモデルハック。
55 :
51 :2006/11/30(木) 01:06:18 ID:???
>>53 そうですか、わかりました。ありがとうございます。
嗚呼、レイアウトを変更せねば・・・
56 :
Name_Not_Found :2006/11/30(木) 06:55:32 ID:lt5e32MO
>>52 おー。
なるほどこんなやり方があったとは、知りませんでした。
どうもありがとうございました。
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 で指定した画像が 異常に小さく表示されてしまいます。 かと言って、背景画像のサイズって指定できないみたいだし…。 そういうものでしょうか?
58 :
57 :2006/11/30(木) 12:54:23 ID:???
list-style-image に指定した画像は、その行の高さの中央に配置したいのですが、 どうすればいいのでしょうか。
ブラウザをFxにすればlist-style-imageで自動に中央にしてくれるwww
よかったでちゅね〜
63 :
59 :2006/12/01(金) 01:38:47 ID:???
>>60 自分の説明不足だったのかもしれませんが、
それだと、li要素の内容全体の高さの中央になるから、
一行目の行の高さの中央にはならないですよね。
line-heightと背景画像のtopの位置をpx指定しても、
文字サイズ可変だとやっぱりずれてしまうので…。
64 :
59 :2006/12/01(金) 01:41:24 ID:???
>>61 そうなんですか?
下寄りに表示されるのですが。
>>63 >背景画像のtopの位置をpx指定して
何でそんな事すんの?
どうしてもと言うなら、imgタグを使うとか。 で、そのimgのサイズもemとかで指定すれば?
68 :
Name_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ではなりません。
IEでも普通にnoscript内にcss使えるんだけど。 無理ならnoscriptの中にdivでも作ってそこからはじめたら?
>>59 ■ hogehoge
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
画像を常に■の位置に表示って事かな。
だったら、
<h3>hogehoge</h3>
<p>xxxxxxxxx略
xxxxx</p>
としてh3の背景画像に指定してみたらどうだろう?
(タグは構造によって変更しる)
何でそうなるんだよ・・
>>63 liにspan入れて、spanに画像指定くらいしか思いつかんな
>>70 のは、そういう流れの文章なら問題ないんじゃね
>>59 が求めている答えとは違うと思うがね
>>68 <head>
<noscript>
<style>p { background-color: red; }</style>
</noscript>
</head>
<body>
<p>hogehoge</p>
</body>
77 :
67 :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>
78 :
67 :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; }
インランフレームを使ったフレームの中での 画像の固定について質問です。 フレームのボトムに横長の画像を固定し それをレイヤーの一番上に持ってきて ページをスクロールすると文字がその画像の裏に 隠れていくようなつくりにしたいのですが ボトムへの固定の仕方を自分なりに調べてみたところ ネスケではサポートされているらしいのですが、IEではされていないようです。 IEで見られ、かつそのようなつくりにするのにはどうしたらいいんでしょうか? 画像の固定で検索してみても背景のことについてしか 言及されていないものばかりだったので 宜しくお願いします。
80 :
67 :2006/12/02(土) 04:18:48 ID:???
FireFoxだと表示がおかしいな…スマソ。 多分どっか適当にいじれば何とかなると思う。
>>59 > line-heightと背景画像のtopの位置をpx指定しても、
> 文字サイズ可変だとやっぱりずれてしまうので…。
その位置指定をemでやればいいんじゃない?
他にも方法有ると思うけど。
>>67 ,77,78
それで出来るか試してないけど、流石にソースがひどすぎると思う。
> いろいろ突っ込めるとは思うけど
ってあるから突っ込みづらいけどw
>>76 <head>の中に<noscript>を書けない。
IEやFFをのぞいてsafariだけにCSSをかませたいんだけど、 どうすりゃいい?
86 :
68 :2006/12/02(土) 14:55:31 ID:wzBmrPvD
こうすることにしました <style> .noscript p{background-color:red} </style> <noscript class="noscript"><p>ID:hogehoge</p></noscript>
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;"
とそれぞれに値を指定しているのですが、ブラウザによって解釈が違うようで正しく表示されない場合
があります。
意味がさっぱりわからんのは俺だけか?
>>87 widthと横padding,margin
heightと縦padding.margin
を同時に指定しなければ少し幸せになれる
別にテーブル使わなくてもimg並べるだけで横に並ぶと思うが
>>87 >TABLEタグで今まで実現できた事をCSSで行いたい
そう言ってるんのにtable使ってんじゃん。今迄と何の変わりもない。
恐らくこれは荒らし
94 :
87 :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と組み合わせると隣に並ばず改行されたかのように配置されてしまいます。
画面中央表示を<table>でなく<div>で表現したいのですが、 <div>で縦方向の中央を指定するにはどうすればいいですか? お願いします。
そういや、画像ってnowarpで改行されなくなるんだろうか…やったことないが。
>>94 アンタの代わりにソース書いてやるスレじゃありません。
テンプレ読んで勉強しよう。
99 :
87 :2006/12/02(土) 22:11:41 ID:???
すみません。 margin-bottom:-130pxと記述するところを margin-top:-130pxと記述していた為に起こった 私のミスでした。解決しました。レスを浪費してしまってすいません。
>>87 どこにプロパティを書いたのかとかが全く分からない。というより、どんな要素を使ったのかすら分からない。大体widthやheightはCSSで実現可能なのに何故属性値なんだ。
にしてもかなり旧式なマークアップだね。テーブルレイアウトのフレーム使用だよね。そして画像を二つ並べてる意図が謎。
altも適切とは言えない(テキストブラウザを使う人や目の不自由な人や検索エンジンにとって、ファイル名とファイルサイズに何の用があるのか?)……。
変更後のコードを一通り書き込んでもらわないとさっぱり分からない。
初心者スレの質問者と同一人物と思われ。ネタって事で。
103 :
Name_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; }
>>103 media="print"で印刷用と分ければ?
>>104 それじゃ根本的な解決にならないと思うけど。
なんで? >自分では「背景も印刷する」のチェックをはずせばよいだけなのですが…。 といってるのだから、 background-colorとbackground-imageを未指定の 印刷用css用意すればいいんでないの?
107 :
103 :2006/12/04(月) 17:16:48 ID:V5vh2oB3
回答ありがとうございます。
仰るように、できることなら背景もきちんと印刷されるようにしたいです。
もしバグ等で無理ならば
>>106 さんが説明してくださったように
印刷用に指定しようと思います。
一般的には2ページ以上に渡っても背景は印刷されますよね?
もう、どこの設定がおかしいのか…。
つーか印刷時に背景なんていらねえ・・・・最低のCSSだorz
印刷時に専用cssを用意するのは普通…というより普通よりマトモだと思う。
製作者等の意向にもよるだろうけど、印刷時って、 白黒印刷を考慮して余計な背景は表示させないとかするかな。
111 :
Name_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では綺麗に表示されてます。ボスケテ(´Д⊂
>>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;
}
113 :
112 :2006/12/04(月) 18:20:02 ID:???
ブロック要素とインライン要素の違いが判ってないんだと思う。
114 :
111 :2006/12/04(月) 18:26:26 ID:???
ブラウザには「背景は印刷しない」の設定があり、 IEは確かこれがデフォだよね。
116 :
Name_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; にしたら、ずれませんでしたが、テーブルの枠線が太くなってしまって・・・。 枠線を細いままで、且つサイズのズレを押さえるにはどうしたらよいでようか。
>>116 widthとborderを同時に指定しているからでしょ。
>>5 のQ1参照
てか、そのソースならテーブルにしなくていいんじゃない?
divに同じボーダーと背景色を設定して、widthをborder分引いた138で設定すれば?
118 :
116 :2006/12/05(火) 11:04:02 ID:NuQgrIBS
ありがとうございました。 色々試したのですがやはりFireFoxでは、テーブルの枠が微妙にずれてしまいました。 FireFoxでずれないようにwidth138にすると、今度はIEでずれてしまったので、 ひとまず多少のズレは我慢する事にしました。
>>118 どうしても気になるなら「CSSハック」でググるがよろし。
121 :
Name_Not_Found :2006/12/05(火) 12:19:45 ID:cwaYsOp3
Ffox用にmin-widthを設定とか
ゴメソ、sage忘れた
Ffoxという新しい呼び名まで与えられたのにフォク助とは言ってもらえない可哀相な狐。
Fxk
126 :
Name_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;にしてみましたが、これだと右端の文字が縦スクロールバーに隠れてしまいます。 横方向に内容を全て表示し且つ幅は最小限に且つ縦にスクロールするにはどうしたらよいのでしょう?
>>124 ちょっと待て、フォクスケを知らんのか?
>>126 hogehogeを日本語にしてレッツチャレンジ。
>>127 >>124 は「Ffox」なる造語へのレス
ついでに言っとくが、「フォクスケ」じゃなく「フォクすけ」が正しい
今調べてきたんじゃないもん!ちゃんと知ってたもん!
>>128 確か、どっかのブログで間違いが多いってエントリがあったはずだが、
まあ、どっちでもいいや
>>130 成り済ましすんな、ハゲ
132 :
131 :2006/12/05(火) 21:33:26 ID:???
あ、俺の頭が逝ってた。眠ってくるorz
135 :
126 :2006/12/05(火) 22:37:20 ID:???
スルーされてる感じ(´;ω;`) テキストを日本語日本語にしてみましたが状況は変わりません…
>>135 どこかでwidth指定してるのか?
<br>はやめろ。
brを止めなきゃいけない意図がわからん。
質問です。 line-height属性で行間を空けたテキストが rubyを使ったところだけ高さが変わってしまい (→テキスト+ルビの高さで上下均等に余白スペースが割り振られてしまう) 何箇所も使っていると見栄えが悪くなってしまうのが気になっています。 ルビを使った行も他のテキスト部分と同じように 本テキスト部分だけに合わせた行の高さにしたいのですが……無理でしょうか? 非常に長いテキストの中に何箇所もルビがあるので、 できればcssのみで処理したいのですが。
141 :
140 :2006/12/06(水) 15:58:29 ID:dKuAMRXA
あげ。 一応、cssが駄目でもhtmlやjavascriptなどで対処できるということでしたら そちらでも構いません
無理です。
ええ、無理ですね。
>>140 ルビタグに拘っている辺りIE以外は無視しても良いと判断して
○のところにはお好きな数字を
ruby{position:relative;}
rt{position:absolute; top: -○px;}
javascriptをつかってIEブラウザの時のみ使うなんてすればいいのかな
単語のあとに()つけてればルビなんて使う必要もないかと思うのだが……
146 :
140 :2006/12/06(水) 19:28:11 ID:???
>>144-145 おお、ありがとうございます!
一応ネスケや他のブラウザでは括弧表示になるようにしてあるのですが、
IE表示のときはルビだとかっこいいなーと思ってまして……。
頂いたタグでいろいろ頑張ってみます。
ども、140です。 あの後教えていただいたタグをいじってみたのですが、 position:absolute;で左寄りになったルビも letter-spacingとmarginで(力技ですが)どうにか見やすくすることができました。 一応ご報告までに。
>>144 別にrubyは(正確には「rubyで文字にルビが振られる表示」は)IEしか出来ない訳ではない。
ヘッダー メニュー コンテンツ フッター のような2カラムのレイアウトをしたのですが 例えばメニューが縦に長くてコンテンツ部分が短い場合 IEでしか見ていないのですが フッターがコンテンツ部分の最下部まで上がってしまい メニューの一部が消えてしまいます しかし、リンク部分にポインタを持っていくとフッターがメニューの下まで行き正常に表示されます。 このような場合何が悪いのでしょうか。 よろしくお願いします。
>>149 どういうコーディングをしてるかも示さず何を聞こうと?
151 :
149 :2006/12/06(水) 22:32:11 ID:???
だよね
152 :
149 :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%; } こうやって書いているんですが駄目ですかね・・・。 まだ示すものが足りないですか?
footerにclear:both;を指定
154 :
149 :2006/12/06(水) 23:42:01 ID:???
>>153 ありがとうございます
フッター部分を晒し忘れていました。すみません。
確認したところ
フッターにclear:both;はありました。
他に考えられるところはあるでしょうか
>>154 だkらfooterでクリアしてやらないと、永遠にflowとし続けちゃう
156 :
149 :2006/12/06(水) 23:49:08 ID:???
>>155 すみませんどうやら私はアフォなようですねorz
現在フッターは
#footer {
width : 760px;
clear: both;
margin : 0px;
padding: 10px;
}
としているのですが・・・。
具体的にはどうしたらよいのでしょうか
<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とかはどうよ?
left部分で、marginの取り方とかpositionにabsoluteがあったりすると ずれ込んだりするよおお。top:-Xemとかもおかしくなったりするよお。
159 :
149 :2006/12/07(木) 00:05:08 ID:???
>>157 これだと問題ないです。
どうしてだろ?
>>158 なるほど
それでは単純なものにバラしてから
どこでおかしくなったのか調べてみることにします。
どうもアフォな私にお付き合いくださりありがとうございました。ペコm(_ _;m)三(m;_ _)mペコ
>>159 もう見てないだろうが、
>#content {… float: right; … } ←全角だし、ケアレスミスが多いタイプと見た。
うちではコピペでちゃんと動いたけど全角だったかな。 改行じゃなくて
こんにちは。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>
・・その前にa:hoverの所まちがっとるぞ。
一行ならこんな感じではどうかな 簡単だし 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>
167 :
164 :2006/12/07(木) 11:42:27 ID:???
レス有難うございます。 色々試してみたのですが、一箇所に表示させることは可能でしょうか。 JavaScriptを使えば簡単にできることは承知しておりますがあえて、CSSで同じことをやろうと思っておりまして、度々スミマセン
168 :
164 :2006/12/07(木) 11:44:58 ID:???
a:hoverでは無理だよ(cssで親セレクタとかあればできますが) li:hoverとかではできないこともないが非現実的(非効率且つ、IEでは未実装) 素直にjavascriptにしておいたほうがいいよ
>>165 たぶんセレクタの話だろうが、確かに、CSS1では間違いだ。しかし、他のレベルでは正しい。
具体的に言うと、IEにとっては間違いだが、他のブラウザでは正しい。
>>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 のポジションをすべて同じにすれば上のサイトのメニューみたいにできる。
172 :
171 :2006/12/07(木) 23:17:28 ID:???
ああ、スマン。A要素の内容にA要素が出現できないんだった。
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); }
>>173 背景画像に半透明PNGを使う。
ただしIEの対応は7から。
>>173 画像加工してから使うだろ。常識的に考えて。
何回目だ、この質問。
テンプレにでも追加しとくか 半透明PNGが普通に使えるのは、 IEのシェアを考えると、まだずっと先の話だな
DIVタグでブロックデザインしたいとき楽にできるソフトってなんかある?
Dreamweaverでいいんじゃね
何度も言われてるけど とりあえずCSSを普通に組める程度に覚えてから、 DWとかの「補助」ツールに手を出した方がいいよ。
同意。 でもって値段に見合うほど活躍してくれるかどうかは微妙。 人による。
183 :
Name_Not_Found :2006/12/08(金) 19:41:16 ID:UEFlPNQk
シャドーで検索しろって何回も言わせるなよ。
187 :
Name_Not_Found :2006/12/08(金) 20:24:59 ID:UEFlPNQk
なんでできないと思うんですか?
左右にシャドーのようなグラデーションを描いた横長の画像を背景にして、repeat-yにします。 あとはそれに合わせて固定幅で中身を作れば影っぽくなります。
190 :
Name_Not_Found :2006/12/08(金) 20:35:02 ID:UEFlPNQk
自分がみたいくつかの解説サイトには両側にシャドーを表示させる方法が書いてなかったからです
191 :
Name_Not_Found :2006/12/08(金) 20:38:00 ID:UEFlPNQk
>>189 ありがとうございます。
画像でしかできませんか?
>>189 別に固定幅じゃなくたってできるだろ。
>>190 標準モードにしてhtmlとbodyに左右それぞれの画像を置く。
なかなか良い画像を手に入れられました。 ありがとうございました。
195 :
190 :2006/12/08(金) 22:51:56 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;}
最悪。うんこマークアップ。
確かにこれならCSSでも出来るけど頑張りすぎだろw <img srs="" id="shadow-1"> img#shadow-1 { background:#cccccc; height:100%; } これなら画像だしソースは最悪だけど、これは画像だ!!って言い訳出来そうw
>>196 画像を推薦してきたのはそちらで、
私はそもそもCSSを聞きに来たのですが、なにか?
ソースなんだぜ?
じぁあ俺もsrsするんだぜ?
>>207 そのまんまです。
なにがどうわからないかすら説明出来ないんかい?おうっ!
210 :
初心者 :2006/12/09(土) 02:25:41 ID:kHE9z6u3
突然失礼します。 Net4uで無料掲示板を借りたのですが、掲示板に画像をアップロードするとき、画像が右寄せになるようにするには、どうスタイルシートに書けば良いですか? 設定方法とか詳しく教えてもらえるととっても助かります…。 今は左寄りで、短い文はまだしも、長い文を投稿すると文が画像の下に表示されて(回り込んで)見にくくなるんです。
>>210 借りた掲示板に聞くのが王道。
どこまでCSSが弄れるのかこっちにわかるわけない。
初心者? 自分で努力なんてしないアホタレですって名乗ってどうする。
大体、単に左寄せ→右寄せだけ変えても回り込む事に変わりない。
212 :
79 :2006/12/09(土) 06:09:48 ID:???
>>102 遅レスすみません。
positionをfiexdにしたかったのですが
IE6ではまだサポートされていないようだったので
IEでもスクロールに対して
固定するにはどうしたらいいか分からなかったのですが
自己解決しました。
レスありがとうございました。
213 :
207 :2006/12/09(土) 11:01:34 ID:???
>>209 さん
どうもありがとうございました。大変参考になりました。
214 :
Name_Not_Found :2006/12/09(土) 17:25:46 ID:QFPR4F+O
オススメのプレビュー機能付きCSSエディタってありますでしょうか。 フリーでも有料でも構わないです。 Nvuは、サポートしてるCSSが少ないですし、バグが多くて× HPビルダーV11の、CSSエディタはプレビュー機能が今、一つ。△。ただ価格的に◎。 GoLiveやDreamweaverは ??
体験版使ってみたら?
216 :
214 :2006/12/09(土) 17:41:49 ID:QFPR4F+O
ごもっとも、ただ、先日から、 フリーソフト、GPLソフト、の検索&インストール さらに日本語対応化 ってやりまして時間ばっかり過ぎて 正直、疲れたんです。 GoLiveとDreamweaverの差もよく理解していませんし。 周りに聞ける人がいないんです。 取りあえずGoLiveの体験版いきまが、ご存知の方いるかなと...
メモ帳
スレ違いだろ
(゚ε゚)キニシナイ!!
これはひどい
224 :
221 :2006/12/10(日) 01:58:07 ID:???
<img>使うことにしました・・・
225 :
Name_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で確認していますが、 これじゃちゃんと表示できないとか、そういったことはあるんでしょうか。 よろしくおねがいします。
>>255 今までそれでちゃんとCSSが適用されてたのなら、ベースエイチリファを設定してあるんじゃないのか?
普通は上位ディレクトリを参照しなきゃならないんだが。
*{ font-size:xx%; } と指定しておくと、1emが1pxの感覚で使えて、段組の単位にも使いまわしやすい、 みたいな記事を読んだ記憶があるんですが、ソースが激しく不明です。 誰か知ってる人いませんか? 日本語でおkは勘弁(;´Д`)
>>228 全くそんなことナッシング。
全称セレクタにフォントサイズ指定はしないでおK。
231 :
225 :2006/12/10(日) 17:15:30 ID:???
>>227 回答ありがとうございます。
ベースエイチリファとはなんなのでしょうか。ぐぐってもそれらしき言葉が引っ掛からず…。
そういうものを設定した覚えがないので、急いで直してきます。
スレ違い
>>233 取れるよ。でもあんなアホみたいに書くのが本当に必要とは思わないよ。
余裕で取れるね 取れない方がおかしい
余裕で取らない。 css3とか独自拡張とか。
これ出っぱなしw > プロパティ filter は存在しません : alpha(〜
239 :
237 :2006/12/10(日) 22:41:05 ID:???
・・・・・独自拡張とはいっても糞IEの独自拡張だけは使いたくねぇorz
全称でfont-size:100%にしとけば結構便利だけどまずいとこあるかな?
241 :
Name_Not_Found :2006/12/10(日) 22:51:45 ID:W4Le4IR5
同じくしてます。 まずいことは特にないと思いますが。
そういやIEだとtdのフォントに反映されなくないか?
245 :
Name_Not_Found :2006/12/11(月) 12:55:01 ID:qZ25lD3X
イメージと文章を垂直方向中央ぞろえしたいのですが、 align="absmiddle"をCSSで実現できますか? vertical-align: middleだと、微妙にずれます。
>>245 自己レス
イメージにも、文章にもvertical-align設定するだけだった orz
お騒がせしました。
騒いでないけどな
248 :
233 :2006/12/11(月) 16:21:12 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は横幅可変の画面解像度に依存しない系統の デザインです。
>>249 ドキュメントの端はスクロールバーの左端
251 :
249 :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>
>>249 大枠のdivで囲って右margin取ればいいじゃん。
cssを適用できるのって、bodyがルートなんでしょうか?
>>253 htmlからなんだけど、htmlは無視するのもあるからやらない方がいいよ。継承、透過が目茶苦茶になる。htmlにあんまり必要もないでしょ。
そんなアホブラウザは無視していいんだという人も時々いるよ。
255 :
Name_Not_Found :2006/12/12(火) 22:55:57 ID:Jf+BDBXs
256 :
255 :2006/12/12(火) 23:01:09 ID:Jf+BDBXs
自己解決しました
なぜもう5分、書き込むのを待てなかったんだろう。
258 :
255 :2006/12/12(火) 23:49:11 ID:Jf+BDBXs
すみません。 書き込んだ後、少し考えて<a>を装飾してみたらどうなるかと思い、 実行したところできてしまいました。
解決できたんだから、それでいいじゃないか
一つの行にある複数の画像を均等割付したいんですが ググって見つけた方法 text-align: justify; でやってみたところ 上手くいきませんでした(Firefox1.5 IE6) 画像での均等割付は不可能なのでしょうか?
>>260 画像は無理だと思う。思うってのは明確なソースを探すのが面倒だから。
また、IEでの文字均等割付けにはtext-justifyの指定も必要。
まあもし出来たとしてもwindowsの一部UAだけの表示だろうし、
君もソース出してないんだし、他の方法を考えるんだね。
262 :
Name_Not_Found :2006/12/14(木) 01:24:56 ID:EaJjM8Lc
質問です。 CSSのfloatで以下のようなレイアウトは可能ですか? 「aaa…」は段落無しの連続した文章です。 (間違えて過疎スレにも書き込んでしまいマルチになってしまいました。すみません。) aaaaaaaaa┌─┐ aaaaaaaaa│画│ aaaaaaaaa└─┘ ┌─┐aaaaaaaaa │画│aaaaaaaaa └─┘aaaaa
>>263 ありがとうございました。やはり出来ませんよね。
普通にできるだろ
鵜呑みにする質問者もあまりに勉強不足だと・・・
267 :
262 :2006/12/14(木) 03:12:58 ID:???
え?出来るんですか??? 是非教えてください。
268 :
Name_Not_Found :2006/12/14(木) 03:50:50 ID:2QPSZoth
余裕で出来るだろ・・・
269 :
Name_Not_Found :2006/12/14(木) 04:00:53 ID:2QPSZoth
それぞれイメージにIDかクラス付けて 右と左のフロートを設定すれば良いだけかと クリアの必要もないんだな・・・ (これ<p>で囲んでクリアするんだな、勉強になるな)
段落なしでそ? pの中で全部やらなきゃダメじゃん
271 :
Name_Not_Found :2006/12/14(木) 04:51:46 ID:2QPSZoth
すまん、それは続く次の文章に対してです。
272 :
Name_Not_Found :2006/12/14(木) 04:56:37 ID:2QPSZoth
俺も質問 <DIV>ってブロック要素なのに<p>みたいになんで改行入らないの? 不思議では?
273 :
Name_Not_Found :2006/12/14(木) 04:58:36 ID:2QPSZoth
とほほ は 内容もとほほなんで、参考にしない方が身のため。 改行する/しないはブラウザの勝手なんで、余白とりたいならcssでマージン設定してやれ
<div>を知っている視覚系ブラウザなのにデフォで改行しない物の具体例を挙げてくれ。
277 :
260 :2006/12/14(木) 10:25:23 ID:???
>>261 厨っぽい質問で叩かれるだろうなと後悔してたのに 優しく回答していただいて
本当にありがとうございます
色々試してみましたが無理っぽいですね
やはりtableを使うしかないのか… 気が引けるなぁ
278 :
Name_Not_Found :2006/12/14(木) 12:39:24 ID:2QPSZoth
>>274 ごめん、改行って下に続くって事かな?
<p><ol><ul>
などの1行空くそれかと思った
同じブロック要素なのにこの差は何?
>>272 あいう<div>えお</div>
ってやったら改行されたお( ^ω^)?
280 :
Name_Not_Found :2006/12/14(木) 14:20:18 ID:2QPSZoth
ありがとう <DIV>に対しては改行されなくて 文字だと改行されるのかな? もう一つ質問 floatを使って 縦に長い<DIV>に右に2つその半分の長さの<DIV> をくっつけたいんだが・・・ ブラウザによって表示が違ってしまいます どうしたら良いですか?
ハコの 外の幅と中の幅と全体の幅のバランスがおかしいとかがよくある原因みたいだぞ
282 :
Name_Not_Found :2006/12/14(木) 14:45:50 ID:2QPSZoth
ごめん、ブラウザの問題じゃないな やっぱり無理みたい 右は全体を1つの箱に2つ入れないと無理かも (バラバラ3つの箱を作ってた) ちょっと勉強してみる
1行空くとか言ってるけど、pとかはブラウザのデフォルトスタイルでマージンがとられているだけの話。 divに何でマージンがないって、逆に汎用ブロックにデフォルトでマージンがあったらおかしいだろ。
284 :
Name_Not_Found :2006/12/14(木) 15:04:01 ID:XtINz4lG
tableで20000×20位の表を表示させようとすると、200MBメモリを使って、 表示されるまでにかなり時間がかかってしまいます。 こういうのはCSSを使うと、メモリや速度はどうなりますでしょうか?
>>284 cssでも、table でも、20000x20の表データなんて、だーーーれも見ないから、気にしなくて良い。
たぶん実行速度の差が知りたいのだろうから テーブルが重く感じるのは中身が重いとき全部読み込むまで表示されないからじゃないの? DIVはしらん
>>280 <div>にwidthとflortを指定すると改行にはならないはず
用途は違うけど2カラム 3カラムをキーワードに検索したほうがいいと思う
もちろんCSSもキーワードに組み合わせてね
288 :
280 :2006/12/14(木) 15:22:07 ID:2QPSZoth
>>280 のをやろうとすると
DIVでどんどんグループ化していかないと駄目みたいだった。
全体からDIVで囲まないと駄目ぽい
(プロとして恥ずかしくないスタイルシートの大原則読んでみた)
たぶん合ってる
何やりたいのかさっぱり判らないが、3カラムは書く順番が決まってる。 上っ面だけ理解したつもりは最も危険。ちゃんと勉強しよう。
ヘッド部 ----ハコ----- |3. 2 .1.| | 右 右| ------------ フッター部 だっけ?
291 :
280 :2006/12/14(木) 16:45:23 ID:2QPSZoth
>>289 全くハコなしで
12
13
(1と1は繋がってる)
って並べようとしてた
1と2・3は別のDIVで囲まないといけないのが分かった
でも、ページ全体をDIVで囲む必要はなくて
段組みたい所だけでも良い?
>>291 スマン、3ペインだったか。言ってる通り、2カラムの考え方でいいよ。
2・3はdivで囲む。1がボックス要素なら基本的に+divはいらない。
全体を囲むdivはデザインによっては必要。
293 :
280 :2006/12/14(木) 17:31:28 ID:2QPSZoth
ASPとかJSPから それぞれDIVを出力するなら 全体はDIVで囲まないの? サーバーズサイド、まだ使ったことないけど
好きにしろ。
262ではないのですが
>>262 が出来ないです。
FirefoXやOPERAではちゃんと出来るがIEだけできません。
やり方を教えて下さい。
まずは問題が発症する最小構成のソースうpからだ。
プロバイダーがアクセス規制に引っ掛かってるから携帯からしか書き込めないので、ソースを出すのはキツイです。 基本的には 画像右フロート、画像左フロートとクリア右、長い文って感じですがIEだと両方の画像が上に来てしまいます。
>>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擬似要素か?
299 :
284 :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で指定して問題なしです。 初心者なのでこうのに引っかかってました。
302 :
284 :2006/12/15(金) 16:44:53 ID:???
ああ、おっしゃる通りすいませんです。色々試します。失礼しました。
303 :
Name_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ではマーカーは消えますが、その領域の左側の間に一文字くらいの空きができてしまいます この隙間はどうすれば無くす事ができるのでしょうか
304 :
Name_Not_Found :2006/12/15(金) 16:55:03 ID:eSGJ5o4R
ホームページの鍵タグってどんなタグだかどなたか教えていただけませんか?
>>303 バグ辞典見てみたが、そういう例は報告されてない。
個人的にはIE5なんてどうでもいいし。
それにそのソースの場合、display:block;は必要ないんでは。
>>306 どんなソフトで作ったかは問題ではない。どういうソースが出来たのか、だ。
DLして試せってのは勘弁してくれ。
だからテキトーに答えるが、
選択タブを表示してる要素にclassなりIDなり振って、focusしてる時の画像だか色だかを指定。
「できる」のと、「実用レベルでできる」のとは違うよね。 すぐにCSSでは無理がある要求が出てくるんだから、最初からスクリプトで作れって。
↑本日のばか
>>303 ulにwidthかheight指定してるならそれが原因
312 :
312 :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;
}
条件が不十分なら補足要求をお願いします。
>>312 border:1 solid black;
margin:0 0 0 -390px auto;
ボックスを横に2つ並べて 左側のボックスの横幅を200pxに設定し、右のボックスの横幅は残りの横幅(100%-200px)に したのですが、どうすればよいのでしょうか?
315 :
Name_Not_Found :2006/12/18(月) 09:02:50 ID:Qia5fm1N
>>303 アンカをblockにしてみても一緒かな?
ゴメス、sage忘れた
XHTML1.1にCSSを組み込もうとしています 単純にテキストの右揃えや左揃えをする際にはtext-alignを使えば良いのですが、 適宜<p style="text-align: right;"> と入れるべきか、外部で.right{ } と定義して呼び出すべきか迷っています。 どちらが美しいと言われるのでしょうか?
>>317 xhtmlではインラインは不可じゃなかったか?
>>298 亀だがありがとう。
やっと規制解除になったので一応。
320 :
312 :2006/12/18(月) 13:08:01 ID:T3G8KnWd
>>313 border:1 solid black;→0px 1px;
margin:0 0 0 -390px auto;→margin-left:-390px;
こうしましたが、できません。
どのように書き換えればいいのか、ご指摘願います。
321 :
312 :2006/12/18(月) 13:33:03 ID:???
>>313 訂正です。
border:1px solid #000000;
border-width:0px 1px;
にしました
>>312 とことんアホだな。
参考サイトから丸コピ時点で問題ないだろ。アレンジするなら、ちゃんと理解してから。
どうしてもやりたいなら余計な事すんな。最初からやり直せ。
>>323 答えられないなら余計なこと言うなよ。
スレのクオリティが下がるだろ
ほんとだ
>>324 の存在がこのスレのクオリティを物凄く下げてる
自演乙
これだから質問スレは(ry
>>324 みたいにマジで答えがわからないヤツは、このスレの回答者には居ない。
初歩的な理解もしてない人間に、○×式の回答しても無駄って事もよく知ってる。
スレを馬鹿にすんなボケ
>>324 。
はいはい
答えられるんなら答えてあげれば?
はい、みんな知ったかぶり
いつからこんな初心者ばかりになったんだ? じゃあ大サービス。
質問者は間違いを指摘されたが、更に間違った直しをしてるんだぜ?
何にも勉強してないって事は明らか。
>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プロパティって何なのか? そもそも何をどうしたいのか?
全く疑問に思わず、調べてもいない。基本も無いくせに応用だけ聞こうって図々しい野郎なんだよ。
334 :
Name_Not_Found :2006/12/18(月) 23:40:13 ID:WkyloGhV
画像の上部に約10pxほどの謎の余白ができています。 CSSでデザインをしているのですが、画像自体には、CSS指定しておらず それに余白が付加されるような文章はありませんでした。 FireFoxで見ると正しく(謎の余白がなく)表示されています。 IE6.0(恐らく他のIEでも)で見た際の問題です。 CSSで解決する方法をご存知の方宜しければご教授お願いいたします。
335 :
Name_Not_Found :2006/12/18(月) 23:43:36 ID:1VXEloXj
_とか?
>>334 文字
<img...>となる場合、文字の最後にbr入れると隙間が出来なかったりする
あとはline-heightとか
>>333 左右中央表示ってコメント入ってるじゃん。
参考サイトに同じのがあったよ、
中央表示にしてボックスの横幅半分をmargin-leftで左にずらすっての。
ま、オレはそれしか気づけなかったが、
>>333 も不注意だな
へえ。中央表示ってのはmargin-left:-360px;とpositionでやるもんなんだ。
>>337 を筆頭にどんどんレベル下がっていくな。
>>334 img{vertiacl-align:top}だったっけ
>>334 >>336 どれも駄目でした。
その画像はラインで文字などは含まれてません。
<p class=""></p>
<img src=" width="" height="" alt="" />
と言う形なんですが何か問題があるのでしょうか?
css出した方が早いとおも。
<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; } です。
>>342 謎の余白って、画像はぴったりウィンドウ上辺にくっつけたいって事?
それから最初の質問番号入れてね。
pのmargin、下に3pxとってあるんだけどそれは何の為に。
下に3px空けたいからです。
最初のレス番くらい書けないのかよ。。
>>342 <img src="" width="400" height="1" alt="" /><br />
しばらくぶりに来てみたが・・・ いつからこんな低レベルになったんだ?
やっぱゆとり教育が大失敗だったんじゃないかと。
仕事として成立するようになって来ると、良質の回答は消えて行く。CSSも例外ではないということだ。
便所の落書きにレベルも糞も無いだろう
公衆便所の壁にCSSが書いてあったら嫌だな… 別の人が後から修正した後があったりして…
WEBヤギの目でググって便所の落書き見ろ
便所の壁に<body>二つとか書いてあったら発狂しそう
WinIEへの文句・恨みが延々と書かれてるのも怖いな
357 :
334 :2006/12/19(火) 19:30:59 ID:???
失礼しました。レス番入れました。 <img src="" width="400" height="1" alt="" /><br /> でしたができません。変わりませんでした。 line-heightでも駄目でした。
>>357 img に display: block
359 :
334 :2006/12/19(火) 20:10:02 ID:???
>>358 どうも。確かに上の余白は消えました。
しかし、下に同様の余白が発生しました・・・
361 :
358 :2006/12/19(火) 20:19:24 ID:???
>>359 画像の下にか?再現しないが。
今ソースはどうなってる?
362 :
334 :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 } です。
363 :
358 :2006/12/19(火) 20:33:04 ID:???
再現しないな。 imgの後はどうなってる?
364 :
334 :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; } です。
俺も前に同じようにPの後に画像って作りしたら、 WinIEだけ10pxくらい隙間ができたことがあったなぁ どうしたか忘れた…
366 :
358 :2006/12/19(火) 20:51:26 ID:???
>>364 h2の上マージン分以外に余白はできんが。
そのp、img、h2だけのソースでもなるか?
IEのバージョンは?
367 :
334 :2006/12/19(火) 20:53:05 ID:???
IE6.0です。
368 :
358 :2006/12/19(火) 20:59:21 ID:???
最小構成でも再現するかどうか聞いてるんだが
>>334 そのページのURIを晒せ
もしくはどっかにアップしてそこを晒せ
オマイの伝え方が下手すぎて話にならん
370 :
334 :2006/12/19(火) 21:02:46 ID:???
再現するというのは、その余白ができるのかと言うことなんでしょうか? p img h2 のCSSを除いても余白ができました。
371 :
334 :2006/12/19(火) 21:24:54 ID:???
仕事ですので公開できません。 初めての経験でなにが原因なのか分からない為、 うまく説明ができません。申し訳ない。
372 :
358 :2006/12/19(火) 21:25:47 ID:???
>>370 ち が う
p img h2 だけにして(CSSそのまま)同じように余白ができるかどうかだ。
373 :
334 :2006/12/19(火) 21:31:32 ID:???
同じように余白ができました。
374 :
358 :2006/12/19(火) 21:37:05 ID:???
こりゃその部分の構造だけでもアップしなきゃ進展なさげ。
376 :
334 :2006/12/19(火) 21:40:34 ID:???
はい、そうです。
一体どんな風にしたいのか、絵に描いてみろ。AAでもいい。
378 :
358 :2006/12/19(火) 21:47:22 ID:???
埒あかないから、そのimg付近のソース全部晒して、 書いたCSSファイルまるごと、どっかのロダにでもアップしてくれ
379 :
334 :2006/12/19(火) 22:03:09 ID:???
380 :
358 :2006/12/19(火) 22:25:40 ID:???
ちょっと待て。 このソースだと p の float: right が意味わかんないんだけど。 何がしたいの?
381 :
334 :2006/12/19(火) 22:30:52 ID:???
<p></p>で囲った日付は、javascriptを使い フラッシュで文字の呼び出していて、右寄せのために使ってます。
382 :
358 :2006/12/19(火) 22:46:31 ID:???
floatの使い方間違ってる。 javascriptでその部分にobjectタグを書き出してるってことか? それを右寄せしたいなら、 p の float: right は消してobjectに margin: 0 0 0 auto; だ。
383 :
358 :2006/12/19(火) 22:58:07 ID:???
あー違う違う、何言ってんだ俺は。 p の float: right の代わりに text-align: right だ。
384 :
334 :2006/12/19(火) 23:05:59 ID:???
text-align: right;だと左に寄ってしまうんですよ・・・ どうすれば・・・
385 :
358 :2006/12/19(火) 23:09:51 ID:???
#a p object { display: block; margin: 0 0 0 auto; } これでどう?
>334 >仕事ですので公開できません。 プロなら身の丈わきまえて作ったら?
手取足取り教わらないとできないプロ 解決能力のの欠如したプロ >358 そのへんで終わりにしておけ。
388 :
334 :2006/12/19(火) 23:17:35 ID:???
できません・・・ 余白も消えません。 floatバグが多いように見受けられますがその類ですかね?
389 :
358 :2006/12/19(火) 23:27:14 ID:???
floatは消せと言ってるんだが。 だめだなこりゃ。ブラウザか頭か、どっちかがぶっ壊れてるとしか思えん。
390 :
334 :2006/12/19(火) 23:32:04 ID:???
もちろん float を消した上で試しましたが 寄せることもできず、余白も消えませんでした。 FireFoxではちゃんと表示されているのでIEでの解釈の仕方が 違うんですよね。そこに重点置いて調べてみます。
うえ、なんだこりゃ。Pの中身が表示されねー
余白出来なかったぞ
393 :
334 :2006/12/19(火) 23:52:47 ID:???
>>391 その文字は、Flashにてアンチエイリアスした文字を呼び出すために
わざと元の文字を表示されないようにしてありますよ。
読み込みの際に表示されることが多々あるので。
確認されているバグなどいろいろ探してみます。
>>358 さん どうもありがとうございました。
394 :
358 :2006/12/19(火) 23:57:25 ID:???
ち ょ っ と 待 て ひょっとしてこの日付の代わりにFlashが入るんじゃなくて、 両方入れてるってことなのか?
395 :
334 :2006/12/20(水) 00:02:49 ID:???
そうなりますね。。。 jsがDOMを捜査しマーカーとなるcssタグを発見するとそれを同じ内容を表示するflashで覆う。 JavaScriptがoffでは普通にテキスト表示されると言う感じです。
396 :
Name_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} は無視されてしまいます。
397 :
358 :2006/12/20(水) 00:12:11 ID:???
ひょっとして、JavaScript外してFlashを入れないようにして、
Visibilityのとこ消してテキストを表示させた上で
>>358 ,383のようにしたら、
ちゃんと表示されるんじゃないか?
だとしたらJavaScript側の問題だぞ。
>>397 うーん、確かに読み込んだ方になんか問題あるのかもネ
>>396 width="?em"だめかネ
399 :
334 :2006/12/20(水) 00:29:07 ID:???
駄目でした。 それでも余白は消えません。 のでJavaScriptは問題ないと思います。 バグ一通り目を通して来ましたが同様のバグは 見つけられませんでした。
.org-field { border: 1 solid #000000; font-size: 12px; background: #ffffff; color: #000000; height: 18px; } 普通にここ直せばいいんでねーか?
すいませんが、質問があります。 2枚の画像の座標を合わせて、次の図のように 2枚のセルを重ねるようなイメージにしようとしています。 __________ / / (←alphaで50%半透明、chromaで白を透過 ∠_________/ __________ / / (←通常表示 ∠_________/ ブラウザで見ると透過も半透明も問題無く表示されています。 が、この状態で印刷をしてみると上の画像だけしか印刷されません。 (色が薄い半透明の状態) 印刷プレビューではブラウザの表示と同じ画像が表示されてるのですが…。 ブラウザはWindowsのIE6です。 ブラウザ表示と同じように印刷をするのは無理なのでしょうか。 ご教授をお願いします。
>>401 filterはIE独自仕様であり、ブラウザ上の表示を弄くってるだけ。cssでは無い。
半透明表現はPNG画像を重ねるのが一般的であり、IEは7でやっと実装された。
↑であれば、印刷しても同じ。
403 :
Name_Not_Found :2006/12/20(水) 01:48:32 ID:r2cZDarS
webブラウザでスレッドを閲覧した時に下の方に出てくるようになった 「おすすめ2ちゃんねる」とかいう鬱陶しい表示の部分を Firefox 2.0のuserContent.cssで消してしまいたいのですが この部分を何とかしてセレクタで指定する方法はないでしょうか?
専ブラ使いましょうよ
がいしゅつだったらスマソ position: fixed; float: left; でスクロール時でも位置固定のメニューを作ったんですが、IEだと固定されません。 IEでも位置固定されるCSSのメニューを作るにはどうしたらよいでしょう?
勉強をする。
<p><img>文章</p> と <img> <p>文章</p> なんですが 普通<img>はインライン上に置換されるモノという考え方からすると 構造のタグ内に無い下の例はやはり良くないのでしょうか?
スレ違い
必要に迫られてCSSを勉強することになった。 既存のサイトについて、CSSでデザインするような仕様に変えて行くことを、 初歩の勉強として、やっていくつもりだけど・・・。 「 ト ッ プ バ ナ ー 画 像 を セ ン タ リ ン グ す る 」 これだけで2時間、いろんなサイトやらを眺めてるけど、全然分からん・・・。 どうすればいいですか? 1.CSSのことを段階的に書いている書籍を購入して勉強 2.2chで教えて厨 3.吊ってくる ってか、「トップバナー画像をセンタリングする」のヒントだけでも教えて下さい。 参考サイトのリンクでもいいんで・・・。お願いします。
>>411 ヒントだけ
margin:0 auto; あるいは align="center"
ドアホ以外なら判るだろ?
>>412 >>411 ですが、align="center" っていうのは使っていいんですが? html 4.01準拠ではないんですよね?
まぁ、margin:0 auto; で分かれって話なのかもしれないですが・・・。何はともあれ、ありがとうございました。
このネタってのは、このスレで話していいのかなぁ・・・。 < html 4.01準拠
やべーよー、わかんねー。
>>411 画像は 1つの文字と同じ要領で扱えばいいだけです
>>414 むしろ、align="center"を不要にするために使うのがCSS
>>412 の回答がドアホなだけwww
>>411 ですが・・・
>>416 >>417 さんの text-align: center で、なんとなく分かりましたw
ありがとうございました♪ それにしても、こんなところでつまづいてて、CSSに馴染めるのだろうか・・・。
>>411 ですが!
あー、よく分かりましたw ありがとうございましたw
>>418 なにはなくとも「CSS センタリング」でぐぐる先生にお伺え。
よさげなとこがあったら片っ端からブクマにいれとけ。
理屈に当たりたくなったら規格とバグリストみとけ。
>>411 ちなみに、上下に関しての中央ぞろえは
>>7 に書いてある。
けど、
自分も読んでみたが、ブロック要素を上下の中央ぞろえする
もっとも適当な方法がわからん・・・
…他の質問に答えるフリなんかするな、みっともない。 聞きたきゃ自分で質問しろよ。
>>409 うん。
divでもpでも囲っとくのがオススメ。
中学生や高校生ってもう冬休み入ってんの? これから暫く、今まで以上に厨質問が相次ぐのか…。
CSSのCはチンコのC
すみません、ちょっと質問させてください。 <optgroup label="○○">で指定した文字はセレクトボックス内で 斜体太字以外のスタイルに装飾可能ですか? font-style :noneだと変化がないのですが。 また、プルダウンメニューのスクロールバーは装飾出来ないのでしょうか?
normal
あ、スペルミス。normalもダメ、です。
432 :
Name_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だと、背景画像の周りに薄い色の線が出てしまいます…。 どうすればいいでしょうか?
>>432 そんなバグは聞いた事がない。君が間違ってるだけだろう。
罫線とはどう表示したいのかわからんが、border指定で済む話だと思う。
434 :
432 :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>
hr { background: url("image.gif") repeat-x; width: 620px; height: 20px; border: 0; } でどうだろう
>>434 罫線だっつったり、矢印だっつったり一貫性の無いヤツ。さっぱりわからん。
repeatしたいのかどうか位はっきり汁。
>>435 ダブルクォーテンションは必要ないぜ。
>>436 あってもなくてもシングルでもいいんだよ。
ないのが一番対応してるらしい、ってだけ。
あるとコケるブラウザがあります。従って付けない方が一般的。
(・ω・) オオオオ 〜 (_ ゚T゚ ゚ ゚̄
回答者のフリしなくていいよ
>>439 。
敢えて悪い見本を出して〜なんて屁理屈はごめんだ。
ページの一番上にヘッダ、一番下にフッタを起きたいんですが、 どうすればできますか? よろしくお願いいたします。
443 :
442 :2006/12/22(金) 00:51:02 ID:???
えっと…質問、無視しておいてくださいOTL
これは…なかなか良い釣り堀ですね
445 :
442 :2006/12/22(金) 00:59:15 ID:???
今日調べてfloatとclearを初めて知りました、 勉強不足でした
447 :
Name_Not_Found :2006/12/22(金) 05:24:22 ID:NKHve1FF
white-spaceそれぞれの表示の違いが いろいろなサイトを見たのですがよくわからないです、 説明していただけませんか?
450 :
Name_Not_Found :2006/12/22(金) 06:37:55 ID:NKHve1FF
>>448 とてもわかりやすい実例でした!
ありがとうございました。
質問ですが、
float:left;などで回り込みをさせると、
回り込みをした要素と回り込みをさせた要素との間に隙間ができてしまいます。
どうすればなくなってくれますか?お願いします。
結局仕様よりもノウハウの蓄積だからな。 継承されるから、line-heightで単位無しの指定をするみたいな。
>>450 まずは
*{margin:0; padding:0;}
ってCSSに書いて、デフォルトの指定を取っ払ってしまうといいよ。
一々指定しないといけないのが手間だけど、
ブラウザ毎の差異がなくなって結果的に早くなる。
その例のみの話でなら、floatさせた要素のmarginを0にすればおk。
453 :
Name_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; }
454 :
Name_Not_Found :2006/12/22(金) 06:48:43 ID:NKHve1FF
ちなみに、関係あるのかわかりませんが、IE7です
そのままだとIE以外じゃ □□■■■ □□■■■ □□■■■ □□■■■ ■■■■■ みたいに表示されるね。 同じ表示にしつつ隙間をなくすなら、右メニューもfloatさせるのがいいかな。 あと border: solid 1px #000000; って順番にした方がいい。
456 :
Name_Not_Found :2006/12/22(金) 08:25:48 ID:NKHve1FF
>>455 右メニューも右にfloat(ryということですか?
また、solid 1px #000000という表記のほうが一般的だからですか?
それともなにか意味があるのでしょうか
試してないが、UAによっては順番が違うと上手く表示されない場合があった気がする あとfloatは右メニューをleftかと
458 :
Name_Not_Found :2006/12/22(金) 08:57:38 ID:NKHve1FF
>>457 float;leftにしたらくっつきました!thx
ただ、floarはあまり使わないほうがいいのでしょうか
459 :
58 :2006/12/22(金) 09:01:27 ID:NKHve1FF
かなりタイプミスですorz float:left;にしたらくっつきました!thx ただ、floatはあまり使わないほうがいいのでしょうか
>>459 >ただ、floatはあまり使わないほうがいいのでしょうか
なぜそう思うのか書け。
状況によっては面倒な場合もあるけど、 基本はちゃんと動作をわかった上で使ってるなら問題ない。 floatは回り込みで、全体の幅が右メニュー+左メニューの幅より狭いと 下の段に行っちゃったりとかするよ。 あとはどこでclearさせるかとか。
462 :
58 :2006/12/22(金) 09:30:28 ID:NKHve1FF
>>460 勘違いです(汗
>>457 で「上手く表示されない(ry」とあったのがfloatに対してだと思い込んでました。
>>461 一応、基本的な動作は理解しています。
左メニュー幅170,右メニュー幅590(内20がマージン)を外枠760に入れています。
ボーダーはすべて0です。
右メニューの次のフッタ幅760にclearを指定しました。
463 :
58 :2006/12/22(金) 09:31:41 ID:NKHve1FF
フッタも外枠に入ってます みなさん、どうもありがとうございました。
回答者のレベル下がりまくりだから気にするな。 もっともそのおかげで、あんたも回答して貰えたわけだし、どっちもどっち。
465 :
58 :2006/12/22(金) 09:53:27 ID:NKHve1FF
…ミスった…涙 普通に考えたらメイン(右メニュー)を先に書くべきだった… なんでカテゴリー(左メニュー)のほうが先に… 漏れサイテーだ…
467 :
58 :2006/12/22(金) 10:02:38 ID:NKHve1FF
工です
別にお前さんには聞いてナイし
>>457 そんな腐った仕様は早々に修正されるものじゃまいか?
初詣で「今年こそIEが亡くなりますように」と祈願します
472 :
58 :2006/12/22(金) 14:59:51 ID:???
>>334 空行の入る場所に、UTF-8のBOMが入ってませんか?
バイナリ表示して確認するとか、該当部分の周りを削除して書き直すとかしてみると直るかもしれません。
474 :
教えてちゃん :2006/12/22(金) 19:27:30 ID:SHbojDr/
すみません、教えてください。
ヤプログ2カラムのスタイルシートで、幅をヤプ画に合わせていたら、
コメント欄を表示するとスキンが崩れてしまいます。
30ピクセルくらい記事が左に寄って、サイドバーが下に下がる。
http://yaplog.jp/yukarin_marie/ どこを訂正すればいいのか初心者なので分かりません。
どなたか詳しい方、教えてください。
「初心者なので」と言うのは、自分で調べないことの免罪符にはなりませんよ。
CSSは、プロパティ:値; の羅列、つまり、ただの設定ファイル。 設定ファイルの書き方を教えるくらいもったいぶるなよ低脳www 逆に、設定ファイルの書き方をわざわざ質問すんじゃねえと言えるが、 こうしてスレがあって順調に消化していっているわけだから、あっさり答えてやれよ。
>>474 名前が良くない。
>>211 を参考に
「自分で努力なんてしないアホタレです」に変えてリトライすれ
>>474 釣り・・?
釣りじゃないなら今後のためにも、自分で調べる・テンプレ読むくらいした方がいいぞ。
480 :
教えてちゃん :2006/12/22(金) 22:06:00 ID:SHbojDr/
w スパムも進化したな
483 :
Name_Not_Found :2006/12/23(土) 11:41:38 ID:rPJ7y5BI
l<link href=" 〜 media="print">で印刷用のcssを作っています 基本的にいらない部分をdisplay: none;で非表示にし、レイアウトを揃えたいのですが 一度消したID部分が関係の無さそうなIDを弄ったらまた表示されたりと、cssに指定するルールがどうも理解できません この印刷用cssについて詳しく解説している所などありましたら教えて下さい…
>>483 それは印刷用CSS特有の問題ではなくて、セレクタ絡みの問題では?
問題が出た部分のソースを出すとよいと思う。
フロートに関して質問です。
<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 を読んでもよく分かりませんでした。
>>485 それ以前にマークアップ的におかしい。
ちなみにIE・FXではそういう表示になるが、Opera・Safariではまた違った表示になる。
487 :
485 :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.
このあたりが関係していると思うのですが...
>>487 floatは、左右に寄せるプロパティではなく、左右に浮動化し回り込みを許可するプロパティ。
この回り込みが、何時如何なる時も後続の要素に限られるなら、IE・FXが正しいのかも知れない。
しかしここで、p {width:7em;}とすると、IE等もOpera等も同じ表示になる。
つまり、Opera・Safariは、浮動化を優先しているという事になる。
君のソースのように短い文章の場合、途中にfloatした要素が挟まれるのはおかしい。
画像だと拡大解釈したとしてもね。
489 :
Name_Not_Found :2006/12/23(土) 17:51:09 ID:CnHxWvUf
ところでおまうら、いわゆる3カラムはどんな方法で作ってる? 有名なのはZeldman方式とBowman方式だと思うんだが、 この前買った本に、中央カラムに左右marginを入れて左右カラムにマイナスmarginを入れるやりかたが載ってて気になった。 俺はBowman方式でやってたんだが、この方式を知ってこっちに変えようかと思っている。
>>489 メインが最初に書けるから?
メジャーブラウザで問題無いのならいいかもね。
>>489 中央カラムに左右margin
左右はabsolute
>>490 >メインが最初に書けるから?
そうそう。 代表的なブラウザで問題が起きた事は無いかな。
ただ、余計なwrapが増えるのが気になるんだよなー。
>>491 そういえばposition使う方法もあったか。
floatと比べて違いとかあるのか気になるところだな。
493 :
485 :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.
とあるので、そういうことはないと思います。
もう少し自分で調べてみます。ありがとうございました。
494 :
Name_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>
>>494 なんっっっにも調べてないでしょ自分で。
496 :
495 :2006/12/23(土) 19:02:30 ID:64q8uZZ/
枠線を消すというのは沢山あるのですが、表示するというのが見付かりません。 IEとFOXなら無指定でも表示できるのですが、Operaだけは指定しないと表示されないみたいです。 あまりブラウザの事を書くと回答を得られないので外して質問しました。
498 :
495 :2006/12/23(土) 19:07:34 ID:64q8uZZ/
このスレには回答できる人がいないみたいなのでもっと知識のある人がいる所に行きますね。
捨て台詞は、恥の上塗りにしかならない。
>>488 >何時如何なる時も後続の要素に限られるなら、
>つまり、Opera・Safariは、浮動化を優先しているという事になる。
もう、限界超えてるよバカwwwwwwwwwwwwww
仕様書読めwwwwwwwwwwwwwwww
Operaらが正しい。
超有名な、「FxとIEの意図的なバグ」だろwwwwwwwwwwww
>>502 >先行するインライン要素(または匿名インライン)の最後の行(インラインボックス)の上端とfloatした要素の上端(マージン辺)が一致するように配置しなくてはいけません。
一行だとOperaみたいな表示になるって事か。
Mozillaがバグとして認めているんだから、意図的ってのは言い過ぎだろうね。
タマに現れるよね、この感じ悪い人。
>>498 一ヶ月もしたら自分のレス読み返してみたらいいよ。
赤面すること間違いなしだから。
あと、レス番違うぞ。
>>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」が無くて、いきなり冷静になってるように見える。
>>505 無理矢理考えたって感じがするぞw どちらも必然性がないと思う。
つかvalidなHTML片なんだからおかしいもなにもないだろ
へーvalidなら何でもいいんだ
validなら質問する条件は満たしてるだろ strictに越したことはないが、このスレでstrictであることを要求するのか? CSS質問スレでHTMLの使い方まで(質問されてもいないのに)指導する必要はない
質問の条件なんてシラネ サイトでそんな事やらねってHTML書いて、それを仕様書ではどうのって調べたって意味ないじゃん そっちがStrictマニアのやる事だろ
512 :
505 :2006/12/24(日) 04:14:23 ID:???
>>512 長い文章があって途中で写真ってのはよくあるでしょ。
質問してる人は一行以内に収まっちゃう場合の表示を聞いてたし、
>>506 もそう。
>>513 俺には
>>485 は問題点を明確にするために
最小化したソースを載せたようにしか見えないんだが…
>>514 >>505 で短い文章の場合って事で、短文の例を書いてたから無理矢理っぽいって言ったんだよ。
CSSに関することは置いといて、 過剰に反応するバカばっかだな。
517 :
Name_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」のみを使用するわけにはいかず、困っています。 良い方法がありましたら お教えいただければ幸いです。
>>517 a.cssでこう書いてあるとする
h1{
border: solid 1px #F00;
background-color: #FFC;
}
そうしたらb.cssでこれらプロパティを無効にするには
h1{
border: none;
background-color: transparent;
}
とする。ここから先にb.css用のスタイルを書いていけばいい。
確かHTMLに直接書き込めばいいんじゃなかったっけ
520 :
517 :2006/12/24(日) 16:34:59 ID:???
>>518 氏の記述で無事にクリアできました。
迅速なご回答、ありがとうございました。
>>519 直接書き込んだ方が優先されるんですね。
ありがとうございます。
>>516 煽りあいと話し合いは違うでしょ。
相手の言ってる事を理解したいから話してるだけじゃん。何がいけないんだか。
X'masだってのにギスギスした人間ばかりだよ。。
>>521 いや、クリスマスなのに2ちゃんなんかやってる人間達*だから*ギスギスなんじゃないか?
・・・オレもw
<div id="xmas"> 今日は楽しいクリスマス </ div> #xmas { }
#xmas_single { margin:0; padding:0; }
display:none;
#xmas { background: url(img/orz.jpg) repeat-x; }
#xmas{text-decoration:line-through}
font-family:orz体ねえよ
#xmas:after { content: '2ちゃんやってる俺には関係ないけどな'; }
@media screen, kanojyomochi {#xmas:happy;}
532 :
Name_Not_Found :2006/12/24(日) 21:36:23 ID:5w3e7AeB
ブログのテンプレートを使わせていただいているのですが
画像の横の空白がウィンドウ枠の大きさに合わせて
変わるようになってるのですが
適度なウィンドウの大きさで見ても
画像のよこの空白が大きすぎて、スクロールバーがでてしまいます。
ウィンドウの大きさに合わせて変わるところはそのままで、
もっとぎりぎりまで空白をつめるにはどうしたらいいのでしょうか?
説明が下手ですみません、
よろしくお願い致します。
http://pstube.web.fc2.com/aaa.jpg
padding,margin,leftあたりをチェックして見る
画像の下にできる隙間を取りたいのだけど。 vertical-align以外で取り除く方法ってありますかね?
できるほうが不思議だ
allaboutの記事なんか参考にするなよ…
そんなことよりも「上は??」の意味が分からん
539 :
Name_Not_Found :2006/12/25(月) 09:28:53 ID:/Bh/qGfu
ブラウザの文字サイズの大小設定で文字の大きさが変わる・変わらないのは どういったプロパティが影響してるのでしょうか? メニュー項目をリストにして背景画像+<a>拡張して縦並び形式のメニューを作っていますが 文字サイズを大きくすると、文字の大きさは変わらないのにボタンとボタンの間に隙間ができてボタン領域が広がってしまいます 他のメイン文などは何も影響は無いようですが… 因みに文字サイズはボタン・他の文章全てpxで指定しています
>>539 それは多分line-heightだと思われ。
フォントサイズをpx指定は迷惑だからやめれ。
541 :
532 :2006/12/25(月) 14:29:25 ID:0oosbRCP
レスくださった方、ありがとうございますm(_ _)m
>>540 pxとかで指定すれば崩れないと思ってる人がいるけど、かえって変になることも多いんだよな。
539です、レスありがとうございます、line-heightも実際使ってました やはりフォントサイズにはemなど使った方が良いのでしょうか ただ、emだと文字サイズをブラウザ設定で大きくすると全体のレイアウトが崩れたりして… em設定でも一部の文字は大きくならないように固定などできるものなのでしょうか?
文字を大きくしてもレイアウトが崩れないように作るのがベターだよ あとpxでもfirefoxだと文字サイズ変えれる どうしても固定にしたければ一部だけ画像にするしかない
そこでFlashですよ(・∀・)
546 :
Name_Not_Found :2006/12/25(月) 19:25:09 ID:G+P4732q
IE6でどう表示されるかを確かめられるサイトってありますか?
>>546 WinならIE6のスタンドアロンを入れるか
MacだったらPCショーケースとか行くとか
548 :
Name_Not_Found :2006/12/25(月) 21:05:19 ID:G+P4732q
スタンドアロン? 調べてみます! ありがとうございました
うちはMacにVPC入れてスタンドアロン含めて5、6、7と入れちょるよ
550 :
Name_Not_Found :2006/12/25(月) 21:22:26 ID:G+P4732q
自分、Winxpです
ああ、Macだとエミュがあるのか。 ペアーがまともにつかえればなー。
Winなら7入れて、スタンドアロンで5〜6入れればいんじゃね。
553 :
Name_Not_Found :2006/12/25(月) 21:41:02 ID:G+P4732q
スタンドアロンというのがいまいちよくわからないのですが、 参考になるサイトか、検索すべきキーワードをお願いします。
お前が全くググってない事はわかった。
555 :
Name_Not_Found :2006/12/25(月) 21:46:05 ID:G+P4732q
一応、ググりましたよ。 「スタンドアロン」を入れる、ってどういうことですか?
入れる=インストール
557 :
Name_Not_Found :2006/12/25(月) 21:52:23 ID:G+P4732q
…スタンドアロンとは「単体で動くソフトウェア」のことでいいですか? 「スタンドアロンで」とはどういうことですか?
>>555 キーワードの指定を色々変えてみろ
例えば、「IE standalone」でググってみな
IEってのは普通OSと一体になってて切り離せないんだ、 そして別バージョンのIEを複数も入れられない。それがnotスタンドアロン。 スタンドアロンってのはOSから切り離されて単体で動くエグゼって意味。 もうWeb制作の範疇じゃないから、PC初心者板に行ったほうがいいと思う。
560 :
Name_Not_Found :2006/12/25(月) 22:05:26 ID:G+P4732q
・・・・無視されたorz
まあ、冬だから仕方ないのかもしれんけど、
>>561 に同情
563 :
Name_Not_Found :2006/12/25(月) 22:32:06 ID:G+P4732q
…厨じゃないっすよ スミマセン
('A`)
だったら言い訳の前に、役に立たなくても答えてくれた
>>559 =561?に礼ぐらい言えるようになれよ
役に立てなくてサーセンwwwww
冬全開だな。
わかりきってるのに冬だの春だの言う奴は何なの?
冬厨厨ですよ
カンタンに言うと、テメエみたいな厨は消えろ、って事だね。 正直に言っちゃうと角が立つから、隠喩ってヤツね。 そんなのわかりきった事じゃないの。
少なくとも「春」と言ってる香具師は存在しない
香具師と言ってる奴も存在しない
冬だねぇ
2ch.netで季節を知るなんて…
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>
>>575 それはPC性能のせいかと思われ・・・
単なるレンダリング失敗だしょ
>>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のように直接、画像を変える
手段しか思い浮かばなかったのですが。。初心者質問ですいません。
578 :
Name_Not_Found :2006/12/26(火) 06:02:04 ID:pmJgx3oQ
>>577 span使わないで、aにid設定
cssは
pading-left:画像の横幅;
を追加
で、スッキリしない?
あくまで参考程度に。
581 :
Name_Not_Found :2006/12/26(火) 07:31:34 ID:pmJgx3oQ
>>578 スクロールバーの体裁を変更するのはアクセシビリティー上ヤメレ
583 :
Name_Not_Found :2006/12/26(火) 08:59:22 ID:pmJgx3oQ
>>582 アクセシビリティー上に問題があるのですか?
584 :
Name_Not_Found :2006/12/26(火) 09:04:51 ID:pmJgx3oQ
>>578 のサイトが
スクロールバーの色に著作権主張しているのには笑ったw
586 :
Name_Not_Found :2006/12/26(火) 11:29:12 ID:R2U5aPQc
DWスレから誘導されてきました divタグ内のテキストを上下左右ともに中央寄せする方法が知りたいのですが IE6、opera9.1, NN7.1 ,firefox1.5.0.6 どれかでできれば満足です よろしくお願いします
つ【テンプレ】
>IE6、opera9.1, NN7.1 ,firefox1.5.0.6 どれかでできれば満足です なんじゃそりゃ
>>588 なんとなく自己満足です
>>7 のリンクを読んでみましたが、難しいですね
やりたいのはリンクボタンだけなんでjpgかなんかを中心に貼るのがいいのかなぁ って思いました
>>590 おまいのちょっと上の質問者が似たようなことをしている。
あのリンクの中にありました 真ん中らへんに表示されるのが 理解不能ですが、ありがたく使わせていただきます
???
>>593 cssをちゃんと理解できてないけどってことです
おやすみなさい
単にID出してないから誰がどれだかわかってないだけだろう・・・ とは言っても俺も591に対してどうして592の返答になるのか理解不能
あれは独り言です
質問者はID晒し推奨
599 :
542 :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で固定してる。
まあユーザスタイルまでいちいち気にしてたらきりが無いとも言えるが、
こういうありがちなスタイルは想定しといたほうが良いと思う。
>>599 そういうことを言うと、以前「相対です!」ってemで幅指定する奴が出たよorz
スレ違いかもしれませんが相談させてください。 CSSでレイアウトを組む人ならメディアごとに最適な形で情報を提供するのは 初歩だと思います。(例えばプリントならナビゲーションを非表示にしたり出力枚数に配慮するなど) しかしWebに詳しくないお客さんの間ではスクリーンと同じレイアウトで プリントできることを重要視する文化が根強く残っています。 承諾を得て制作しても「印刷したら全然違う形で出てきた」なんて問い合わせを受けることがあります。 閲覧者がプリントアウト時にスクリーンレイアウト/プリントレイアウトを選択して 印刷したりすることはできないでしょうか?
>>601 javascriptでON/OFFぐらいしか思いつかんな。
>>601 見たままを印刷したいならPDFを選択させれ
>>601 CSSでレイアウトを組む人だが、
メジャーブラウザでの閲覧しか考えてません。
そもそも承諾を得てたのに問い合わせが来たってことは 説明が足らなかったんじゃないか? ある程度どういう感じになるか実際に見せてやっていかないと これからももめまっせ
印刷すると紙やインクが著しく無駄になりそうなスタイルにして印刷する気を殺げば良い。
ページ全体をdivで囲って、ページの上端と左端を隙間無くピッタリ付くようにしたいのですが この隙間を消すにはどうすれば良いのでしょうか
609 :
Name_Not_Found :2006/12/27(水) 10:51:42 ID:iJ7RCdP9
リファレンスくらい見なさい ただ全部囲うくらいなら全部に当てはめたほうがいいかもわからんね *ってしてやるとすべてのタグに適応
>>609 直りました、ありがとうございます;
それとちょっと気になっていた事なのですが
ページの最下部辺りで
float: left
でdivボックスを二つ横並びにして
そのボックスの後にidを付けられるようなタグやデータ等が無い場合、そのfloatに対するclearは必要ないのでしょうか?
611 :
Name_Not_Found :2006/12/27(水) 12:20:46 ID:72OuoAZl
css憶えたての頃作ったページを手直し→IE6とOperaで表示確認していたら マージンをIEの2倍のpx設定しないとOperaでは同じ状態に見れませんでした (以前は表示確認はIEでしかやっていませんでした) まだ最初のページタイトル周辺いじったばかりで、bodyや他の要素の影響なんかはは殆ど受けていないと思うのですが・・・ 調べても原因がわからず、何か考えられる原因などありませんか?
>>612 あーこれムカつくよなぁ… マジで滅びろよIE。
>>612 フロートしたものに
display: inlineとすれば幸せになれるよ
最初に612のバグ見たときは、周囲の指定とか疑って継承チェックしても 何故マージンが突然2倍になるのかさっぱり分からず、かなり悩んだよ・・・ この不良品め
>>612 規定バグ?だったんですね、勉強になりました
ひとりぐらいは「バグじゃなくて独自仕様」と言ってやれ
冫─' 〜  ̄´^-、 / 丶 / ノ、 / /ヽ丿彡彡彡彡彡ヽヽ | 丿 ミ | 彡 ____ ____ ミ/ ゝ_//| |⌒| |ヽゞ |tゝ \__/_ \__/ | | < バグじゃなくて独自仕様じゃね? ヽノ /\_/\ |ノ ゝ /ヽ───‐ヽ / /|ヽ ヽ──' / / | \  ̄ / / ヽ ‐-
/ ̄ ̄\ / _ノ \ | ( ●)(●) . | (__人__) 独自仕様だろ・・・ | ` ⌒´ノ 常識的に考えて…… . | } . ヽ } ヽ ノ \ / く \ \ | \ \ \ | |ヽ、二⌒)、 \
どすこ〜〜い どすこ〜〜い っと・・・
規定バグって何だろうと小一時間考えて 既出バグの間違いかと気付いた・・・
IEのことを考えながらコーディングするのは苦痛だよなw
>>624 WinIEは平気
MacIEは殺したくなる
>>626 はじめて見た。
でもその前にそのブログがIE6でカラム落ちしてるのを
誰か教えてやったほうがいい。
628 :
Name_Not_Found :2006/12/28(木) 09:41:14 ID:x32BUO8U
>>626 / ̄ ̄\
/ _ノ \
| ( ●)(●)
. | (__人__) 独自仕様だろ・・・
| ` ⌒´ノ 常識的に考えて……
. | }
. ヽ }
ヽ ノ \
/ く \ \
| \ \ \
| |ヽ、二⌒)、 \
つかスタンドアロンで626の症状出たこと無いんだが・・・
先生、リストのマーカの種類で白四角ってないんでしょうか? 黒丸、白丸、黒四角があるんだから、白四角もあってもよさそうなかんじですが。
>>633 どうしてもなら画像でやれば。
デフォで無いのはチェックボックスとかぶるからだろ。
白丸もラジオボタンとかぶるな。
ていうかもはやCSSのレベルじゃない質問だな・・
637 :
Name_Not_Found :2006/12/29(金) 05:23:18 ID:tV2s8uHl
リンクをクリックするとき(activeの状態)に出る点線の枠を消すことはできますか?
>>637 迷惑なのでやめてください・・・ユーザビリティのために
みなさんは *{ margin:0px; padding:0px; } ってやってますか?
640 :
Name_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
リンクの下線を点線にしたいときって、borderを使うしかないのでしょうか?
645 :
Name_Not_Found :2006/12/29(金) 11:30:22 ID:tV2s8uHl
a:hoverで文字の太さを変えるとブラウザがチカチカっとゆれるのですが、 これは自分のPCだけでしょうか。 やめたほうがいいですか?
646 :
Name_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
648 :
Name_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"> 以外で)
中身のないTD自体に意味がないと思うけど
>>684 cssだろうがhtmlだろうが、最低<td></td>は必要でしょ。
cgiなんかで書き出ししてるんかいな。
そんな話はしていないんだが・・
>>652 おまえがどっちがしらんが、
中身のないtdには意味があるし、
tdタグ自体がないという意味のnullじゃないだろ。
>>653 >tdタグ自体がないという意味のnullじゃないだろ。
俺はそうとったから
>>650 のレスをした。
おまえさんの言ってる事もレスに入れるか迷ったが、
質問がわかりにくい以上、そこまで親切にする義理もないからな。
>>655 >現在は<td>?</td>っと空白コードを入れて対処しているのですが、
空白コードを入れるとあるんだから最低限<td></td>は入れてるとわかる。
だから
>最低<td></td>は必要
を満たしている。
とそういう風にちゃんと取ってて
>>650 というのは日本語がずれてね?
難しいこと訊くんじゃねー
>>656 うるせー野郎だなあ。国語やり直してほしいわ。
>現在は<td> </td>っと空白コードを入れて対処しているのですが、
>やはりこうする他無いのでしょうか?
文章はちゃんと最後まで引用しろよ。
「今は入れて対処してるけど、入れんの面倒いから他に方法はないの?」って事であり、
「こうすればborder表示されるけど、入れんの面倒いから〜」と解釈するのが普通だと思わないか?
更に、入れたくないのが、<td></td>なのか空白コードなのか、と何通りにもとれる質問なんだよ。
「「こうすればborder表示されるけど、入れんの面倒いから〜」と解釈するのが普通」だから 「入れたくないのが、<td></td>なのか空白コードなのか」なんて普通は思わないんだよ、 自分で矛盾させてどーする。
>>659 そんな事ないさ。どうしてそう絡むわけ?ここは粘着厨の巣?
>>658 >空白コードを入れて対処しているのですが
ということは、対処方法が空白コードを入れること。
つまり対処方法が<td></td>を入れることではない、ということ。
~~~~~~~~
>>661 と書いてたら・・・・
むしろ普通の解釈をしない自分を認めないで
絡んできてる君のが粘着に見えるよ・・・・
粘着と言われたらオウム返しかよw 図星でムカついたかい?
冬だなあ
もうそろそろ冬厨いじりは や ら な い か 。
で、なんだっけ?
冬なんだよ
最近は突っ込みだがる連中ばかり。他人の回答なんてどうでもいいんだから放っとけよ。 初心者スレの流れなのかね。
いや、おかしな回答は訂正しとかないと質問者が可哀相だろ しかも「質問がわかりにくい」とか言って質問者を貶めるようや奴だったし
それは質問者を貶める事にはならないと思う。 最初からバカとかボケとか言うのはどうかと思うが。 複数の回答が出る事も良い事だ。質問者が選択出来るし、何かしらヒントになるかも知れない。 それも出来ない程の初心者用のスレではない。
>>637 自分の読解力がないのを棚に上げてわかりにくいから俺は悪くない
と開き直るのは充分質問者を馬鹿にしてるだろ。
複数の回答が出るのはいいことだが、それは合っていたらの場合であって。
ていうか擁護してるのは本人だろうからほっとくが吉
確かに君の言う通りだね。お疲れ様。 勝手な同定は迷惑。
そこでさらに言い訳を続ける粘着ぶりが 似てるのは確かなのでやめてください
冬だなぁ
真冬だよ
冬だったら悪いか。
682 :
Name_Not_Found :2006/12/31(日) 11:40:55 ID:AKGUocOX
780pxの幅に900pxの背景画像を指定し、それを中央で揃える。 幅100%指定のHEADER部分に900pxの背景画像を指定するんだけど 下のLAYOUTとの中央揃えが1pxズレる。 この解決法分かる人教えてください。 Opera、firefoxではちゃんと表示されました。
>>682 切り捨て、切り上げ、四捨五入の計算方法が
プログラム(ブラウザ)によって違うので、そのままじゃ無理。
ハックで何とかしたら何とかなるかも。
>>683 thx
やっぱそうなのか。。。
IEホントに嫌になるな、
685 :
682 :2006/12/31(日) 12:06:36 ID:???
それとそのまま画像を表示させてセンタリングさせることで解決した。 自己解決につき、スルーで
686 :
Name_Not_Found :2006/12/31(日) 17:52:31 ID:lOX8K3UH
ボックスの中にある要素の左側全てに5pxのマージンを取りたい場合に ボックスの内部要素それぞれにmargin-left: 5px;とするのは邪道ですか? 正しいのはそのボックスにpadding-left: 5px;が正しいとか本にはありましたが でもIE5処理とか触れてないしwidth指定もしてるのでその処理も大変かなと思って 内部要素がpだけなら #ボックス名 pでマージンを一律処理してますが imgやulや色々と要素が入っているので。。。
>>686 #hoge *{margin-left:5px;}
#hoge * *{margin-left:0;}
IE6以下無視なら子供セレクタが使える。]
#hoge>*{margin-left:5px;}
688 :
Name_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を入れると、和文も太字になってしまいます…。
>>688 そういう指定はないよ。
それから、font-family: "Arial","MS Pゴシック";じゃあ、
これらが入ってないPCはどうするの。
>>688 欧文をspanで囲んでそこだけフォント指定。
フォントはファミリーも指定した方が良いよ。
691 :
Name_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;}
693 :
Name_Not_Found :2007/01/01(月) 08:16:06 ID:e+IGhnkZ
過去ログを見ると
>>651 さんが参考サイトを出されているのですが、
それを見ても解決しなかったので、質問します。
tdの中身が空(空セル)の場合でもボーダーを表示させる方法として
empty-cells: show; を指定しろとあるのですが、
これを指定すると確かにFirefoxなどでは表示されるのですが、
IE6では表示されません。
まだまだIE6は使われると思うので、代替えがないか調べているのですが
特に見つかりません。諦めるしかないのでしょうか?
>>693 同サイトの対応状況くらい見てこいよ。IEは基本非対応。
しかしborder-collapseをcollapseにすれば表示される謎。
separateでは無理。
contentsというdivのなかのdtの1文字目を赤い色にしたい場合、 #contents dt:first-letter{ color:red; } とするとWinIE6では何も変化がないのに、 #contents dt:first-letter { color:red; } とスペースを1文字入れただけで反映されるようになりました。 いままでCSSはセレクタと { の間に半角スペースを入れてなかったのですが、入れるようにしたほうがいいような仕様あったでしょうか?
>>695 IEのバグ。
俺は全部そう書くようにしてる。
698 :
Name_Not_Found :2007/01/02(火) 10:09:35 ID:4tiTBpqZ
最初はみんな初心者だ。少しづつ勉強すれば良いんだよ。 がんがれ
CSSに初心者てw
今の主流は骨組みがHTMLでデザインがCSSですよね。 でもCSSだけでサイトを作りたいんですが大変ですか??
基本から勉強して来て下さいね(はぁと
>>702 うるせぇ!
いいから教えろくそじじぃ!
ツマンネ
705 :
Name_Not_Found :2007/01/03(水) 22:22:11 ID:zpiefmy9
CSSだけでテーブルをページのセンターに配置したいのですが DIVでなどで囲わずにやる場合どういうタグにすればいいんでしょうか? text-align: center; でも出来るかと思ったのですが やっぱりテーブルの中身の文字だけがセンターに表示されてしまいダメでした。 おねがいします。
>>705 マージンじゃダメかな?俺も詳しくないからアレだけど。
707 :
Name_Not_Found :2007/01/03(水) 22:43:37 ID:zpiefmy9
>>706 margin: auto;
もやってみたけどOPERAではちゃんとセンターに表示されたんですけど
IEだとダメでした。
>>705 >CSSだけでテーブルをページのセンターに配置したいのですが
CSSでは不可能(IE6ではDIVで囲えば可能)。
tableの属性で「align="center"」するしかない。
>>701 >でもCSSだけでサイトを作りたい
ということの意味がよく受け取れません^^;
CSSだけでサイトを作りたいのならCSS着せ替えテンプレートプロジェクト
に行って、そこのフォーラムを使えばいいと思います。
710 :
Name_Not_Found :2007/01/03(水) 22:52:36 ID:krTKkxBp
margin-left:auto; margin-right:auto; を使って全体を真ん中へ寄せたいのですが うまくできません…。 widthは770pxです
content: "はげ," "ほげ。";
で無理やりやればCSSだけでいけそう?w
>>710 スレのテンプレ見てみ。
>>711 の言う通り標準モードが一番楽だけど、互換モードでも出来ない事は無いから。
713 :
Name_Not_Found :2007/01/04(木) 12:08:32 ID:go+RZx3Y
全称セレクタでcolorを指定して、変更したい箇所は外部cssで設定 したんですが反映されないです。タグにstyleで書けば大丈夫でした。 全称セレクタは一番優先度が低いらしいので問題ないかと思ったんですが どこか間違ってますでしょうか?
>全称セレクタでcolorを指定して それも外部に汁
全部外部cssに書いときゃいいのに。あちこち書くと間違いの元。
716 :
Name_Not_Found :2007/01/04(木) 12:41:11 ID:go+RZx3Y
713です。。 全称セレクタも同じ外部cssの一番上に書いてます。 テストで簡単なテキスト作って設定したら反映されました。 なんか邪魔する要素でもあるんでしょうかね? とりあえずstyleで設定できるんでなんとかなります。 714,715さんありがとうございました
とりあえず s t y l e は 使 用 し な い 方 向 で 頑 張 れ
719 :
Name_Not_Found :2007/01/04(木) 20:54:56 ID:rBBD0k40
>>719 それが原因かわからんけど、とりあえず
font-family:arial ,sanzs-serif;
これ直したら?
721 :
Name_Not_Found :2007/01/04(木) 23:18:35 ID:rBBD0k40
>>720 直しました。ありがとうございます!
コメントで「CSSのfloatが関係しているのでは?」と言われたけど謎、、
不具合が直せない・・・。
スタイル設定で↓こんな感じでやってみたのですが、 .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で表示が違うのですが どこがいけないのでしょうか? どなたかご教示ください。
>>723 何がどう違うんだか全然わからんが、
1.font-familyには総称ファミリを指定しておく。
2.ボックスでfont-sizeはやめい。
3.heightのauto指定に意味はない。
4.標準モードにしてないととっても大きさが違うよ。
>>724 早速ありがとうございます。m(_ _)m
>何がどう違うんだか全然わからんが、
ごもっともです。
表示幅が崩れます。
Internet Explorer だと指定した500pxで表示され、
Mozilla Firefox やOpera だと、padding: 10pxが足され、
520pxで表示されるのです。
ちなみに、Dreamweaver2004MXで自動生成されたCSSなんです。
MX 2004 だって、突っ込み入れないでね。
>>727 標準モードとはどこで設定すれば良いのでしょう?
素人ですんません。
なぁ、ちゃんと基礎から勉強しようぜ? 素人とか初心者ってレベルじゃねーぞ…
>>729 >素人とか初心者ってレベルじゃねーぞ…
それ以下ですか。
やばー(^^;)
>>731 サンクスです。(^o^)
ヘッダーのDOCTYPE設定ね。
やったら直りました。(^^)
感謝感激です。
HTTPのヘッダーなら分かる。 ブラウザで見た目のヘッダー(<div class="header"> とか)も、まあ、分かる。 しかし、「ヘッダーのDOCTYPE」だと??? それは、HTMLソースで見た時に、上の方にあるからそう呼ぶのか??
head内のことだろ、上級者ぶってつっこんでやるな、そっちのが恥ずかしいから。
そしてつられて恥ずかしいことをorz head上だ。
なんつー低ラベルなんだ、ここは!!
cssスレだからな。htmlは苦手なんだろ。
/ ̄ ̄ ̄ ̄ ̄ ミ / ,――――-ミ / / / \ | | / ,(・) (・) | (6 つ | | ___ | | /__/ / < なわけねぇだろ! /| /\
むしろ733
---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]の部分は灰色になるはずなのですが、
ブラウザで確認すると黒色のままです。
何故でしょうか?
742 :
Name_Not_Found :2007/01/06(土) 16:26:00 ID:aNzgOnaF
age忘れ・・・。
#15555?
744 :
741 :2007/01/06(土) 17:12:03 ID:???
#555555 でした。 16進数とかよく分からないので、とりあえず参考書通りに指定してみたのですが、 灰色って#555555で合っているのでしょうか? もしかして参考書のミスですか?
(;´Д`) ・・・・・
747 :
Name_Not_Found :2007/01/06(土) 17:51:07 ID:SxrpEiei
MACのsafariで表示がずれてしまうんですが対策おせーて
やだ
SafariでずれるCSSに問題があるんじゃ・・・
Safariに問題がある
ほんとにほんとにほんとにほんとにらいおんだ
752 :
741 :2007/01/06(土) 18:42:17 ID:???
>>746 p {
color:#C0C0C0;
}
でキチンと灰色になりました。
#555555がおかしかったみたいです。
ありがとうございました。
>>752 いや、#555555って色もあるから、単に書き間違いだろう・・・
#555555じゃ黒と大差ないからな。 見間違えたんじゃね?
だけどちょっと、だけどちょっと僕だって黒いな
!!!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>
としています。
HTMLファイルとCSSファイルとおなじディレクトリにlistmark.gifを置いてあるので、 項目の●がlistmark.gifで表示されるはずなのですが、表示されていません。 何故でしょうか?
気のせいでしょう
760 :
757 :2007/01/08(月) 18:17:15 ID:???
いえ、気のせいではないようです。
761 :
Name_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を上に表示できますか? お願いします。
762 :
Name_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要素使えないのかな・・・?
>>761 被る?のは多分IEのせい。
だけどおまいさん、その書き方だと
C A
B (100px)
となるが、それでいいのか?
まず何をどうしたいのかが全く見えてこない。
>>762 マルチ乙。
>>761 floatした要素の高さは認識されないの。
他の人の言う通り、どういう表現をしたいのか具体的に書かないとね。
>>762 あっちのスレにちゃんと謝ってないから、マルチって言われちゃうの。
マルチじゃなくてもアンタの言ってる事も意味不明よ。
divにborder指定してるんだから枠線が出来るのは当然だし、マイナスmarginってどういう考えよ。
いつからツーチャンネルがマルチ禁止になったのかね?
質問スレではもともと禁止じゃね?
ずっと昔からマルチは師ねが基本だった筈だが。
ルールはないけど、世間には暗黙の了解ってのがあるんだよ
2chなら非常識な事してもいいと思ってんだろ。
770 :
757 :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ソースの上の方に持ってきたら正常に表示されました。 これって何でですかね?
772 :
757 :2007/01/09(火) 10:43:16 ID:???
>>771 参考書の通りに進めただけなのですが・・・
何かわけがあるのでしょうか?
あります。
774 :
757 :2007/01/09(火) 12:44:21 ID:???
教えていただけませんか?
わかりません。
776 :
Name_Not_Found :2007/01/09(火) 15:32:50 ID:hy1bWRhw
strict.dtd にすると Firefoxで 画像の下に5pxくらいの余白が出来ちゃうのですが、 (line-height?) みなさんどうやって解決してますか??
俺はエスパーじゃないんで答えられない
778 :
Name_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の間に隙間が開いてしまうのです。
以前からこうではなかったような気もするのですが、、。
IE使えば?
780 :
Name_Not_Found :2007/01/09(火) 15:51:50 ID:hy1bWRhw
IEも使ってますよ。
うるせぇ黙れ
なぜ?私に不備があるなら言って下さい。 そうでないならそちらがスレを閉じるのがオススメです。
オススメっすかwwwwwwwwww
オススメっすねwww
あなたに不備があるのは明らかですが、それが何かわれわれには知る事ができません。
わからないのに明らかとはこれいカニ。 っていうか解決しちゃった。
不備があるから問題が発生するのです。
>>776 img {vertical-align:bottom;}
でだめかな?
789 :
757 :2007/01/09(火) 23:46:18 ID:???
みんなぼこぼこにしてやんよ ∩_∩ ( ・(ェ)・)=つ≡つ (っ ≡つ=つ ./ ) クママママ ( / ̄∪
790 :
Name_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なのでしょうか?
>>790 HTMLの問題だからスレチだろうが・・・・
NG。aもimgもddを入れてから。
dlの下にはdtかddのみ。
dl の直下には dt と dd しか置けないので駄目 さらにCSSとは何の関係もない
793 :
790 :2007/01/10(水) 11:58:48 ID:???
cssではなくタグの問題でしたね; お答え頂きありがとうございました
>>788 回答有難うございます。
まさにそれで解決しました!
IE7が属性セレクタに対応したそうなので、ユーザースタイルシートで
バナー広告消しなどに使えないかなと思って
テストしてみました。しかし
table[width="600"]{
display:none !important;
}
上記のような書き方をしてみたのですが、正常に動きません。
FirefoxのuserContent.cssだと
@-moz-document url("
http://www.example.com/ ") {
table[width="600"]{
display:none !important;
}
}
上記のような書き方で期待した動作をするのですが、
IE7で正常に動作させるにはどうしたらよいでしょうか?
板違いでしたら申し訳ありませんが、適当な板に
誘導していただけると助かります。
<div class="a">text</div> .a{ border:1px solid red; height:500px; width:500px;} 上記のような場合のときに、textを中心に持っていきたいのですが、どうやれば いいのでしょうか?横は、text-alignでできるのですが、縦に中心に持っていくには どうすればいいのでしょうか?
テンプレ嫁
すいません。読んでもよくわからなかったので、どうか教えてください。
マルチは放置で。
801 :
Name_Not_Found :2007/01/11(木) 15:26:59 ID:wSdU71Gv
<h1>ああああ</h1><h2>いいいい</h2> このソースだと ああああ いいいい ってなるけどh1とh2を使いながらも「ああああいいいい」って続けて表示させるにはどうしたらいいの?
furo-todemoiiyo
風呂、とてもいいよ
805 :
Name_Not_Found :2007/01/11(木) 18:23:10 ID:6rKw9Hu/
回答1 <td><h1>ああああ</h1></td><td><h2>いいいい</h2></td> 回答2 <h1><h2>ああああいいいい</h2></h1>
とんでもない馬鹿が現れた。
>>801 これが正解
<h1></h1><h2></h2><fontsize="7">あああああ<font>
<sontsize="5">いいいいい</font>
こな〜〜ゆき〜♪
おまえら真面目にやれよ! 正解 <span><h1>ああああ</h1><h2>いいいい</h2></span>
810 :
809 :2007/01/11(木) 19:32:05 ID:???
ごめん思いっきり間違いorz 見なかったことにしてくれ
<h1></h1><h2></h2><font size="7">あああああ<font> <font size="5">いいいいい</font> 俺もスで間違ってた. cssでサイズ指定するのになれ過ぎちゃったな。
_, ,_ スパン!
( ‘д‘)
⊂彡☆))Д´)
>>809
813 :
Name_Not_Found :2007/01/11(木) 20:07:33 ID:6rKw9Hu/
_, ,_ スパン!
( ‘д‘)
⊂彡☆))Д´)
>>807 _, ,_ スパン!
( ‘д‘)
⊂彡☆))Д´)
>>809
猛吹雪が吹き荒れている
815 :
Name_Not_Found :2007/01/11(木) 20:08:29 ID:6rKw9Hu/
こな<h1>ああああ</h1>ゆき<h2>いいいい</h2> これでおk
大寒波襲来
スパン → span (´・ω・`)
ひまだな
NN4のtableに関して質問です。 border属性なしのtableで、 最新ブラウザだとtdに対するborderでセルの線が引けますが、 NN4だと線が引けません。特別な書き方が必要でしたらお教えください。
失礼、補足です。 >最新ブラウザだとtdに対するborderでセルの線が引けますが、 ↓ 最新ブラウザだとtdに対するborderプロパティでセルの線が引けますが、
NN4はもうぃぃ…
そんなのを使ってる方がウンコなんだからさ。 対応させるのはもうやめようよ。
NNは失敗作
826 :
Name_Not_Found :2007/01/12(金) 00:26:01 ID:cfKGwcKR
CSSリンクさせてるけど肝心のHTMLに<div>がありません。 やはり<div>タグは必要ですか?
何を言ってるのか..
DIVはでぃぶんで書けよ
メンドいよ。デブでいいよ。
border=1
古いブラウザ使ってる奴が悪いって考えは プロとして、あってる?
あっていない
IEではおもいっきりしょぼく IE以外では見た目もかっこよく・きれいに IEに対応しつつIEはゴミということを伝える これがプロ
無理のようですので失礼します。 どうもありがとうございました。
むりじゃないよ。
836 :
819 :2007/01/12(金) 08:49:50 ID:???
もうやりません
そんなこというな
っつーか、NN4対応させようなんて偉い。 俺なんかもう完全無視してるよ。 っつーか、使ってるヤツいるのか? 0.1%もいないんじゃ?
もう俺らがどんどん無視していかないと xhtml+cssが標準にならないんだよ
flashってNN4で表示されるっけ? 表示されないとしたら、大手企業殆どNNはきってると言うことだよな
>>840 少ないよ
色盲率のほうが高いのに
読めないページ作ってるほうが問題
>>842 それって明暗が少なかったりリンクにした線がないページを作ってるってことじゃないか。
そもそも最低のページ。
NN4なんてCSS切ってやって 文字&画像を素で見せた方がマシ。
| (・L・). | ◎(^ω^)ヽ .| (3⊂∩∩ノ .| | | | | (^ω^;) \WWWWWWWW/ | ∪∪| | ( ̄\ ヽ < CSSなんか捨てて > | || |. | / 7ヽ / < かかってこいよ! > (__)(__) | / ./ `ーi < Netscape!! > | し' ⌒i /MMMMMMMMM\ |/ / ̄| | (__) (___)
>>841 少なくともプラグインがあったと思う。
NN4はHTMLとCSSが終わってるだけで、他は当時としては「まとも」だったし。
>>844 マシというか、それで良いじゃん。
848 :
Name_Not_Found :2007/01/12(金) 18:06:10 ID:E6LuNBfX
閉鎖前に一言 お世話になりました
table要素は内容にあわせて自動的に幅が決定されますが、 div要素でこのような振る舞いをさせるにはどのようにすればいいのでしょうか?
>>850 ?それだと幅が最大になるだけだと思うんですが。
>>849 white-space:nowrap;
width:1px;
>>852 レスどうもです。
それだとやはり幅が1ピクセルになってしまいますね。
ボーダーを表示したり背景を変えたり余白を設定したりすると表示が崩れてしまいます。
やはりtableを使うしかないんでしょうか。
表組みなら表を使え。 表を表組み以外で表現するほうがおかしい。 表=諸悪の根源という発想はやめるべき。
中の要素の量によってdiv幅が変わったりしたら、それこそ表示が崩れるでしょ。
>>854 いや、表ではないです。
┌─────────────┐
│ ┌───-─┐ │
│ │This is the│←div │
│ │content │ │
│ └───-─┘ │
└─────────────┘
こんな感じで、div要素の中身を左寄せにしつつ
div要素を中央寄せにしたいというだけなのですが、コンテンツによって
div要素の幅が自動的に変わるようにしたいと思っています。
このときtable要素にすれば意図したように表示できるのですが、
div要素ではどうもうまくいかないというわけです。
>>856 コンテンツによって幅がバラバラってのはカッコ悪いでしょ。
何ページかあるなら統一感ってのは大事だと思うし、同ページ内なら尚更だよ。
どうしてもtableでやりたいんなら、好きにすればいいし。
>>857 いえ、このようなdiv要素は各ページに1つのみ、それにどのページでも同じものを表示するので
その点は問題ないです。
ですがやはりdiv要素では無理なのですかね。
おとなしくtable要素で書くことにします。
どうもありがとうございました。
どうせdiv内に直書きしてるレベルだろ。 カッコつける以前なのさ。
divでなくspan使えばいいんじゃね?
>>856 min-width+IEにはハックでwidth
2chが終わりそうな今言うのも何だが、テンプレに未だにNetscape 6とか書いてあるのはどうなんだろう。
863 :
Name_Not_Found :2007/01/13(土) 16:01:46 ID:ena7+LGw
質問です。 最下段の余白を取りたいのですが、↓の様な記述をしてもIEでは余白が出来ないのですが、FOXやOperaではしっかり余白ができます。 <p style="margin-bottom:50px">最下段</p> </body> </html> IEでも余白を取る方法はありませんか?
864 :
863 :2007/01/13(土) 16:04:15 ID:ena7+LGw
追記:IEとはIE6のことです。
866 :
863 :2007/01/13(土) 16:13:10 ID:ena7+LGw
>>865 できました!
ありがとうございました。
勉強になりました。
867 :
Name_Not_Found :2007/01/13(土) 20:40:31 ID:O2qLH+M2
リンクの上にマウスをもっていくとマウスカーソルが変わる指定方法を教えてください
869 :
Name_Not_Found :2007/01/13(土) 20:45:21 ID:O2qLH+M2
ありがとうございます
872 :
871 :2007/01/14(日) 08:24:51 ID:???
あぁ・・解決しました。 activeの指定が明らかに間違ってました・・ なんか朝からぼけてたようですいません・・
873 :
Name_Not_Found :2007/01/14(日) 20:44:39 ID:1fPM+V9q
バグにはまって早10日。 やっと脱出できますたー。 泣けた。 スタイルシートぉぉぉぉ・・・・・・・・。
悪いのは何もかもIE
ブログの時代になって、 自分でシコシコHTMLとCSS書くやつは減ったな。 このスレも寂れてしまった。
ブログになったってデザイン編集でCSSたっぷり弄ればいいじゃない!
>>875 このスレだけでなく、この板全体が寂れただけだ。
そうじゃないと、プロが儲からない。
それもそうだな。 寂れて良かった♪
大昔と違って今はホムペ作り=ブログだしね。 よほど趣味的に興味ないとお仕着せテンプレ以上に HTMLだのCSSだのいじろうと思わないわな。
ここはそういう人が来るべき場所じゃないのは確かだわな
<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の順番を逆に記述すれば簡単に出来るんですが、そうはしたくないのでそれは無しでお願いします。
>>882 headerがサイドバーの一部みたいにするの?
headerとsidebarとfooterにposition:absolute;てして好きな位置に配置して幅も適当にしてcontentに左マージン
>>883 あ、そんな感じです。
absolute使わないでそうする方法ってないですかね?
contentが長いんだったらfloat:rightでよくね? でもfloatよりabsoluteでcontentを外しちゃったほうがいいとは思うが。
高さがまちまちなboxをfloatで並べてるんだけど、改行された時に変なところで引っかかるんだ。 なんかいい方法無い?
>>880 じゃブログ向けCSS質問スレッド とかいるのけ?
width:100pxのboxをfloat:leftで並べて、てきとーなテキスト流し込んだ場合、例えば左から1行、3行、2行、1行とか一番右端の高さより高いboxが途中にあると、改行した時にboxが左端に行かずに3行の一番高いboxに引っかかってしまう。 高さを指定してやると解決するが、高さは変わるし、不自然な隙間ができてしまう場合があっていまいち。
890 :
Name_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を指定でよいのでしょうか?
>>890 いいかどうか、やってみればいいじゃない。
いいんじゃない
Safari1.3.2なんですが、リンクテキストのサイズを12px以下にした場合に a{text-decoration: none;} a:hover{text-decoration: underline;} をやろうとするとマウスオンしても下線が出てこないのは仕様なんでしょうか? シイラ1.2.1でも同様でした IE,Opera,FireFox,ネスケ(どれもMac OSX版)では問題ないのですが…
そんなちっちゃい字を使うなって天の啓示…
>>893 自分もつい最近それ気づきました…
hover時の下線有/無が効かないですよね。
何か書き方が間違ってるんだろうか?
取り敢えずhoverと{の間に半角スペース入れて。 確かIEではバグが出る。Safariは知らんが。
898 :
893 :2007/01/17(水) 01:54:39 ID:???
>>897 マジですか?じゃあやっぱ書き方の問題なのかな…
ちなみにSafariのバージョンは何でしょうか?
うちはOSX10.3.9でSafari1.3.2です
>>894 13pxだとちょっと大きい気がするのさ…(´・ω・`)ショボーン
>>896 やってみましたが変わらずでした…
ググったらこんなの見つけたけど違うかな。 ---- Mac IE5やSafariでヒラギノ角ゴ Pro W3を指定するとフォントサイズ=10px以下の時に リンクのアンダーライン(下線)が出なかったりするそうですが ----
901 :
893 :2007/01/17(水) 02:08:08 ID:???
>>899 なんとなく近い気もするのですが、ウチの環境だと
IE5.2.3では12pxでも問題なく下線の有無が反応しますね
Safariは10pxどころか12pxでダメです…
ただそれはもしかしたらSafariの標準フォントを
ヒラギノ角ゴPro13にしてるからなのかも
あ、そんな事言ってたら発見!
標準フォントをOsakaやMSゴシックにすると12pxでも反応する!
どうやらヒラギノ系と小塚などではサイズによってダメなようですね
ちょっと試してみたけど、ヒラギノ角ゴPro 12px以下だと下線出ないね。 Safariの書体変えるか、a:linkで13pxより上げれば効く。 でも今まで普通に下線hoverなんて見てるのになぁ・・・ナンデ?
>>902 ブラウザデフォが12px以下ではないんでは。
関係ないが、俺は■等が小さく表示されるのが嫌だからOsakaにしている。
lineheightの%上げたら大きくならんかな? 試してないけど
905 :
Name_Not_Found :2007/01/17(水) 16:45:20 ID:9pTJ4VHE
Safariのデフォルトフォントって明朝なんだよな。 俺は無意識にヒラギノ角ゴにしちゃってるけど、 やっぱ明朝のまま使ってる人の方が多いよね?
そんな事ないべ。
自分はNN4の頃から明朝→ゴシックを当たり前にやってるけど デフォのまんまって人も相当いるでしょ。
いや〜さすがにゴシックの方が多いでしょう それまでIEメインで使ってた人はほとんどゴシックに変えてるんじゃ? NC使ってた人達はそのままでSafari使ってなさそうだしw
mac板で聞いた方が早いと。
こんな感じでフォームを作ってみたんですが、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; } -->
</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> 長々と失礼しました。
>>911 どこがCSSなんだ?
inputにstyle指定してwidth要素にすりゃいいだろ。
フォームタグ(optionとか)にdisplay=noneがIE6.0では利きません。 しかし、Firefox1.5では利きます。 これって仕様なのでしょうか?
display=noneはきいちゃまずいと思うな・・・
しかもageてるアホ
>>916 むしろageでID出すのが普通なんだが。
ID出てないがwww
むしろFirefox1.5できいていることが驚きだ。
画像のサムネイルにマウスオーバーしたときのみ、画像の枠の色を変えたいと思い、 <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では問題なく動作しました。 どなたか、原因と解決法を教えていただけないでしょうか。
>>919 a:●● imgじゃなくてa:●●にボーダー設定。
>>921 その方法も試したのですが、逆にFirefox2.0で表示が崩れます。
具体的には、borderから画像がはみ出した形になります。
つ【ハック】 IEのバグなんだから仕方ない。
>>922 ありがとうございます。
いろいろ試した結果、a:hoverの方に_filter : Alpha(opacity=100) ;
というプロパティを追加したところ、IEでもborderの変化が適用されました。
念のためアンダースコアハックでIEのみに読み込ませるようにしておいたものの、
環境によって不具合が生じないか、ちょっと不安ですが……
>>923 わざわざ a:hover に分けなくて、ふつうは、その filterプロパティも a:hover img にまとめるんじゃないかな。
border-widthって相対で幅を指定できませんよね? 全体のレイアウトを相対指定で行う時、これがネックになるんですけど みなさんどうやって解決していらっしゃるのでしょうか?
>>926 width: 100% - medium;とか書けるなら別に問題ないんですけどね。
日本語でおK
DIVのブロックに font-size:80%; とかを指定すると、そのブロック内に設置した テーブルの中のフォントの大きさもテーブルに何も指定などしていなけば、自動的に80%になりますよね? そこでテーブルに font-size:80%; の指定をすると、divに指定した80%に乗算されて、 テーブル内の文字は80%より小さくなります。(pxなどの指定ではなくて%の場合です) IEでは乗算になっているみたいなのですが、他のブラウザでもこうなるんでしょうか? 別のブラウザではDIVに%指定したfont-sizeが、その中のテーブルに%指定したfont-sizeに 影響しないとか、独立しているとかの違いはあるのでしょうか?
もうブラウザによってばらばらでとりあえずIE死ねって事
932 :
929 :2007/01/19(金) 14:05:31 ID:???
>>931 すいません。全部自分で入れて試してみろと言われそうな気もしながらも、聞いてしまいました。
大変そうなので、もし知っている人がいれば教えてもらった方が早いかなと思って。
その長い質問文書いてる間に出来そうな…
>>932 お前はそれしきのことにそんなに時間がかかるのか?
人を利用するのが賢い生き方とでもカン違いしてるんだろ。
936 :
Name_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; }
937 :
Name_Not_Found :2007/01/19(金) 20:25:42 ID:KQTWCWmB
自己レス。
>>936 は、xhtmlで、どうもIEの場合後方互換モード?になっているらしく。
xml宣言をはずすといいらしい。
が、他のもスタイルもずれてくる orz
938 :
Name_Not_Found :2007/01/19(金) 20:41:52 ID:KQTWCWmB
とりあえず、後方互換モードでしのぎました。 他のスタイルのずれも適当に直したらいけた・・・
939 :
Name_Not_Found :2007/01/19(金) 20:42:36 ID:KQTWCWmB
x とりあえず、後方互換モードでしのぎました。 o とりあえず、xml宣言はずしてしのぎました 間違えた・・・。
>>936 imgへのpaddingってFxやIE6は効くけど
IE5だとダメだったような。
941 :
Name_Not_Found :2007/01/20(土) 06:37:25 ID:V76I1w7Z
>>940 IE5は使っている人いないので、どうでもいいです ><
アクセスログでは たまに見かけるけどな。
IE5はまだ結構いるような。 でも対応すんの面倒くさ…
944 :
Name_Not_Found :2007/01/20(土) 12:12:59 ID:zZNKGHsP
リストでナビゲーションメニューを作る場合
メニュー項目をリストにしてその画像を背景にして・・・はわかるのですが
このリストにマークアップした文字自体はどのように処理されているのでしょうか?
因みにココを見て思った事なのですが
ttp://www.honzouin.or.jp/ firefoxで文字サイズを変更してもメニューは何も影響を受けず
cssを外してみるとメニュー項目はちゃんとリスト状態のの文字リンクの形で表示されてます
解説しているサイトも本もいくらでもあるので勉強して下さい。
>>944 ソース見りゃいいでしょ。
メンドイから他人に見てくれってか?
>>944 CSSありのときは字も画像、
CSSなしのときは字は文字。
>>944 画像を表示しないにすると何も出ない(笑)
>何も出ない おまえのPCやばくね?
CSSon画像offの話だろう。
951 :
Name_Not_Found :2007/01/20(土) 16:44:44 ID:moXdTHNe
>>944 ソース見てないから憶測なんだけど、text-indentでマイナスの値指定してたりしない?
憶測過ぎるにも程がある
どうせdisplay:noneとかしてるだけじゃねーの?
955 :
Name_Not_Found :2007/01/21(日) 20:32:37 ID:gPZG9UVM
これも真言密教の技か
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>
>>956 behaviorはIE独自拡張。当該scriptスレ又はwebprog板へ。
>>944 どうでもいいけどそこのサイト、普通にまとまっていていい感じだな。
少なめの予算で作る小〜中規模サイトの見本。
とか言ったら言い過ぎか?
>>958 いや解説でなく商店でもないとなると、表紙は普通こんなのしか選べないだろうね。
しかもブログに飛ばしてるし、3階層無くても量的に間に合う。
<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で画像を横に隙間なく並べる方法はありますか?
962 :
Name_Not_Found :2007/01/23(火) 18:12:57 ID:dpeY8D15
個人でWebApplication作ってる者ですが、 HTMLファイルを出力することはできるんですが デザイン能力がまったくなくて 見映えがなかなかしません。 HTMLファイルはdivやclassやidを使い、内容と意味だけ持ったファイルです。 何か、フリーでも商用でもいいんですが 出力したHTMLを基にして、 CSSをデザインするアプリケーションで使いやすいものはないでしょうか?? できれば、上記のような使い方の解説本があるようなものがいいです。 解説本も同時に教えてもらえないでしょうか??
そんなあんたにはメモ帳しかない
964 :
Name_Not_Found :
2007/01/23(火) 23:49:53 ID:WgawpfSc CSS初心者なのですが、 paddingを頻繁にしようしていて、FireFoxで見てみたら 糞サイトになっていました。 検索してみたところpaddingはIEとFireFoxとで 表示のされ方が違うとのことでした。 そこで質問なのですが、 みなさんはどんなときにどうやってpaddingを使っているんですか? お願いします