ちゃんとスレのURL変えろよ、コピペしか出来ないのか無能 スレタイだけは何故か変えて自己主張してんじゃねえ屑
高さがautoになっているブロック要素の中で最後の要素をフロートさせていると その分の高さが確保されず、親要素のbottomをはみ出してしまいますよね。 どんな対策をしていますか? brはあまり使いたくないです。
floatは通常流し込みから排斥されるので当然です。 clearをうまく使いましょう。
<div id="a">■■■■…</div> <div id="b">回回回回…</div> <div id="c">サルサやる…</div> とあって ■■■■サルサや回回回回 ■■■■るのはハ回回回回 ■■■■ワイへ保.回回回回 ■■■■留サルサ回回回回 やるのはハワイへ保留サル サやるのはハワイへ保留 とやりたいのですがどうすればいいのかわかりません。 floatを使ってもダメでした。 ご指導願います。
>>1 乙!って思ったら今度は 50%か〜い!?
つまらん。
>>11 幅は勝手に30%にしたけどそのHTMLで。
あ、でも内容が■連続だと半角英数の並びと同じになるから適切な文章入れてね。
#a{width:30%;float:left;}
#b{width:30%;float:right;}
質問させてください。 環境はMac OSX10.3.9とWinXPSP2 確認ブラウザはMacのSafari1.3.1/NN7.1/Opera8.0.1/FF1.0.4と MacIE5.2でWinではIE,Opera,NN,FF等最新版。 W3Cのサイトのような三段組(但し左右は固定で)にしたいのですが MacIEだけがうまくいきません。真ん中の段だけボコッと下がって しまいます。以下ソース抜粋します。 <div id="container"> <div id="contents"> <h2>ページ目次</h2> <ul> <li>ああ</li> <li>いい</li>…</ul></div> /* ここまで左側 */ <div id="hogehoge" class="section"> <h2>ほげほげ</h2> <p>あいうえお</p></div></div> /* 真ん中と#container終了*/ <div id="navcontainer"> /* 残り右側 */ <h2>サイトメニュー</h2> <ul> <li>うう</ul> <li>ええ</li>…</ul></div>
div#container{ clear : left; /* このclearはネガティブマージンの時のみ */ float : left; width : 100%; margin-right : -215px; } div#contents{ clear : left; float : left; width :155px; margin-right : -155px } div.section{ margin : 20px 215px 0px 155px; /* 実際は簡略表記せず */ padding : 0px 0.8em } div#navcontainer{ clear : right; float : right; width : 215px; } とりあえず関係ありそうなソースを書きました。その他は 今のところ特に指定してません。ちなみにネガティブマージン を用いないfloatやposition:absoluteでもMacIEだけがうまく表示 できませんでした。よろしければMacIEでも可能な三段組を 教えて頂きたいです。見にくかったら申し訳ないです。 二段組みではMacIEも問題ありませんでした。
>>14 先生!
<li>うう</ul>
は誤字なんでしょーか、そういうソースなんでしょーか!
17 :
14 :2005/12/09(金) 01:56:58 ID:???
>>16 わっすいません。間違いです。コピペじゃないです。
>>18 スマンMac持ってないもんでイマイチ現象が理解できないんだが・・・
真ん中のマージンとは別に落ちるの?
19 :
Name_Not_Found :2005/12/09(金) 02:14:25 ID:pFxPIMVp
>>18 はい。…多分…。
●●● ↓◎◎◎
●●● ↓◎◎◎
☆☆☆◎◎◎
本当は上一列まっすぐなるはず(?)なんですが左側の横に
どうしても並ぶのが嫌!という感じです。右側は特に変化なしです。
>>19 ん?
div.section{
margin : 20px 215px 0px 155px; /* 実際は簡略表記せず */
↑このマージントップのせいでFirefoxでも上一列まっすぐにはならないんだが、
そういうのとは違って一番下に来ると言うこと?
そしてスマン、限界なので寝る・・・orz
22 :
14 :2005/12/09(金) 02:30:03 ID:???
重ね重ね本当に…orz。 margin-top:20pxは左右共に設定してます。 他のブラウザでは問題ないです。 もうしばらく考えてみます。 夜分遅くにすいませんでした。
はぁあ・・・スレタイpx結構お気に入りだったんだがな
>>22 それ、まずは3段じゃなくて左2つを囲ってるcontainerだけでもsectionが下がるの?
一番小さなところから切り分けていこうよ。
>>14 その組だと、ページもくじにバックグラウンド設定できないよ。
いいの?
>>25 そんなのはする気になりゃすぐ追加できるし
目次だけ背景付けるなんてダサいことしたくないのかもしれないし
瑣末事じゃん・・・
27 :
25 :2005/12/09(金) 12:29:04 ID:???
さがってるねー
28 :
25 :2005/12/09(金) 13:07:11 ID:???
>>14 ページ目次が増えるとsectionもつられて下がってるよー
29 :
25 :2005/12/09(金) 14:14:54 ID:???
30 :
質問 :2005/12/09(金) 14:22:12 ID:dJAXwr1/
WindowsXP Professional Edition SP2 + IE6.0SP2 で確認しました。 文字コードがUTF-8でエンコードしたHTMLファイルをブラウザで表示した場合、 TEXTAREA の入力域と INPUT type=TEXT の入力域とでフォントが違います。 インラインでスタイル指定して、style="font-family:sans-serif"とすれば、 TEXTAREA の入力域と INPUT の入力域のフォントは同じになります。 (※Shift_JISでエンコードしたHTMLではフォントが違います。) これはどうしてなのでしょうか。
>>30 UTF-8 は日本語じゃない、と IE が勝手に判断してるから
日本語フォントの設定は適用されない。
IE なら多分ラテン語のフォント設定で表示してると思うが確認はしてない。
32 :
14です :2005/12/09(金) 14:36:35 ID:???
33 :
30 :2005/12/09(金) 14:43:19 ID:dJAXwr1/
30の質問をした者です。 質問が舌足らずですみませんでした。 TEXTAREA と INPUT の入力域で文字フォントが違う理由が知りたかったのです。 目的は、TEXTAREAの入力域とINPUTの入力域の文字フォント(サイズも含めて)を同じにしたいからなのです。 そのために、スタイルシートに、 textarea{ font-family:sans-serif; } などとする解決策は妥当なのかを判断するために、 TEXTAREAとTEXTとで文字フォントが違う理由が知りたいのです。 もちろん、上記のスタイルシート記述では、 Netscape系(6.0以上)では、 TEXTAREAとTEXTの文字フォントが違ってしまいます。 ただし、Netscape系(Safari等含む)でも、 同様の現象が起きるため、Netscape系の解決にはならずとも、 原因は知りたいのです。 どなたかご存知の方がいらっしゃいましたら、 ご教示いただければ幸いです。
34 :
Name_Not_Found :2005/12/09(金) 15:47:48 ID:LSGQQ4Qr
mediatypeがprintの場合は プリンタのユーティリティだかドライバだかが直接cssを解釈してレンダリング・印刷を行うのでしょうか? それともプリンタへ送った際のブラウザなどのレンダリング能力(?)に左右されるのでしょうか? ●OSやブラウザの種類とヴァージョン Windows2000 IE5.0/PortableFirefox/OperaUSB
ああ、ただドライバとの連携によっては巧く連動が取れない とかいう話は聞いたことがあるが・・・
>>35-36 どうもありがとうございます
環境によっては意図しない印刷がなされたりする可能性もあるが、
わざわざ印刷して表示確認をする必要もない、
って理解でいいんですね。
すばやい回答、感謝です。
>>33 違う理由も何も、同じにする規定がない。
デフォルト表示を如何にするかなんてのは定められてないよ。
form部品に限らず、emだろうがdelだろうが、「このように表示しろ」という指定はない。
ただ慣例に従うとどのブラウザも似たような表示結果になるだけのこと。
それをするのはユーザないしブラウザの(デフォルト)CSS。
だからユーザがCSSでデフォルトを変更するのは当然妥当。
とはいえ君のブラウザがそういう表示仕様なのかどうかまでは知らん、スマソ。
39 :
25 :2005/12/09(金) 16:20:24 ID:???
>>33 >Netscape系(Safari等含む)
Sfafariってレンダリングエンジンゲッコーとは別だけど
40 :
30 :2005/12/09(金) 16:58:55 ID:dJAXwr1/
>>31 >>38 レス下さった方ありがとうございます。
textarea と text で同じフォントにする理由はない
↓
当然フォントは違う
Win+IE: "MS ゴシック"+"Courier New"
Win+NS: "MS ゴシック"
javascriptでなくcssで時間でbg変化させることできるの?
どうやって時間を計るの?
>>41 PHPで。[ if ]を調べれば少しは分かると思うよ。
44 :
25 :2005/12/09(金) 17:28:50 ID:???
46 :
Name_Not_Found :2005/12/09(金) 17:37:54 ID:F0gFjAfv
PHPって言葉をかいてみたかったんだよ、きっと。
m9(^д^)プギャー
>>44 CSSでは確かに出来ないよ。
俺は、くだらないけど昼と夜で背景画像をphpで変えてる。
JScriptでやっても良いが…
49 :
25 :2005/12/09(金) 17:53:57 ID:???
>>48 だったら出来ないって云え。
>>46 の通りじゃねーか。
どうせ、
>>48 はJSじゃ出来ないんだろ?
背景画像切り替えるのになんでサーバに負荷かけるんだ。
いまは、JS使って負荷を軽くする方向に進んでるのに、
時代に逆行してますよと。
m9(^д^)プギャー
池沼はスルー。これ基本。
>>49 何そんなムキになってるの?
>どうせ、
>>48 はJSじゃ出来ないんだろ?
>背景画像切り替えるのになんでサーバに負荷かけるんだ。
>いまは、JS使って負荷を軽くする方向に進んでるのに、
>時代に逆行してますよと。
イタタタタ…
54 :
25 :2005/12/09(金) 18:14:23 ID:???
死ねよおめーら
55 :
41 :2005/12/09(金) 18:15:04 ID:FF2EOrTG
すまかった、できなんだろうなと九割九分九厘思った でも朝 昼 夜 と背景変わるサイトのソースみたら cssしかなかったんだよ javascriptでは知ってますよ昔からあるから でもjavascriptだとブラウザ選ぶでしょう、だからそのサイトはcssでやってるのかなとおもただけです gifやjpegの中にjavascript隠してるのかな?
>>55 だからサーバサイドスクリプトっつてんだろボk.
> でもjavascriptだとブラウザ選ぶでしょう
>>49 に喧嘩売ってるぞww
>>55 behaviorを使えば?
まあ結局はCSSから利用するjavascriptだけど
てかこれIE限定だっけ
60 :
25 :2005/12/09(金) 18:41:08 ID:???
cssだけでできるのかな?って考えるところからしておかしい cssの役割を理解しろよ
今年の冬厨は随分早いな。
gifやjpegの中にjavascript隠してるのかな?
64 :
25 :2005/12/09(金) 19:04:38 ID:???
>>59 php使えば誰でも出来るよー
php使うんだったらSSI使った方が軽いし。
背景変えるぐらいだったらSSIでしょ普通。JS以外でね。
>>55 >でもjavascriptだとブラウザ選ぶでしょう
選ばないよ、今時OFFにしてるやつはどうでもいいし。
>>41 背景変えるその情熱を、コンテンツに注いだ方がいいと思うよ。
現在、論文をスタイルシートで縦書きにしているのですか、IEでは縦書きで表示されますがFirefoxやNetScapeでは通常の横書きで表示されてしまいます。 ちなみに指定した際のタグは { width: 100%; height: 80%; direction: ltr; writing-mode: tb-rl; background-color: #FFF; color: #000; line-height : 1.7; margin-top : 10px; margin-left : 10px; margin-right : 10px; margin-bottom : 10px; padding-top : 25px; padding-left : 25px; padding-right : 25px; padding-bottom : 25px; } です。 FirefoxやNetscapeで表示させるようにしたいので、アドバイス宜しくお願いします
>>66 縦書きは現在草案中のものをIEが勝手に盛り込んだだけです。
CSS1のまともな実装もできていないくせにそういう余計な先走りばかりして
お陰で草案は互換性を保つために大きな苦労をしています。
そんなものを使わないでください。
ということで無理。
どうしても縦書きが良いんなら
普通に横書きで作って縦書きブラウザで表示させるのが一番。
http://www.kagetaka.org/
>>66 結論から言うと、WinIEぐらいしか縦書き表示はできない。
確か次期CSSで候補に挙がってたと思う。
論文ならワードプロセッサを使用することをお勧めする。
>>9-10 ブロック要素の中の最後の子要素をフロートさせているとbr以外clearを入れる余地がないのです。
ブロック要素のoverflowをautoにすると高さを確保してくれるようですがIE6ではうまくいきませんよね。
こういうときはどうします?
>>69 じゃあHRでも使ったら。
それよりそんなギチギチのレイアウトを考えない頭を作ることが大事だと思うけど。
>>67 なるほどそういうわけだったのですね。知りませんでした
ありがとうございました
#早く規格統一してほしいですね。
>>71 や、規格は統一されてるんだけど無視してるM$さんが…。
でも縦書きがどんな最新ブラウザでもOKになったって、
現在のフォントじゃまともな縦書きにならないからそっちの変更とかもありそうだなあ。
メインコンテンツを右側、サイドバーを左側に 表示させる形式がありますが メニュータブと同じ場所で背景の色が切れてしまいます。 左左 右右 左左 右右 右右 右右 左のバーの高さを右側とあわせるにはどうすればいいんでしょうか?
>>73 メニュータブ、をメニューブロックの左側だと解釈して話を進める。
全体を囲むブロックの背景色を左側ブロックの背景色と同じにする。
75 :
74 :2005/12/10(土) 00:37:20 ID:???
>>73 あ、つまり高さを合わせる訳じゃないよ、ごまかすだけ。
高さを合わせたいんだったらCSSだけじゃ駄目。
ていうかmin-heightでいいんだったらそれでもいいけどIEが対応してな・・・
即レスありがとうございます。 本来意図した背景色を右ブロックで指定してしまえばいいわけですね。 やってみます。
IEはハックで小さいheight入れて のばすのがラクっていばラク
>>76 右ブロックで指定じゃないと思うぞ。
作用のコンテナを囲む全体コンテナを作って、
そのコンテナの色を短い方の背景色に合わせろ、
というのが常套手段だが。
79 :
Name_Not_Found :2005/12/10(土) 11:51:43 ID:ml9U1q+m
IE6.0ではCSSで指定した領域にbackground-imageで背景画像表示されるのですが IE5.0で表示すると背景画像が表示されない場合があります 他に作ったサイトでも同じようにしてどちらでも表示されてるのですが何が違うのでしょうか・・・
>>79 表示できてるサイトとできてないサイトのソースをよく見比べる
てかもうIE5.0はほっといてもいいよ
83 :
Name_Not_Found :2005/12/10(土) 15:27:00 ID:iT3FjTIM
質問です。
position: relative を使うとIEでスクロールが重くなるんですが、
一般的な回避方法はないでしょうか。
もちろんケースバイケースなのでしょうが、
フロートの左右にある行の端がずれる
(
ttp://cssbug.at.infoseek.co.jp/detail/winie/b151.html )
の場合のように
> ブロックボックスのwidthまたはheightプロパティを具体的な値で
> 明示することでこのバグを回避することができます。
みたいに、明確な回避方法があれば知りたいです。
よろしくお願いします。
>>83 ものによるんだけど、staticに変えちゃ駄目な部分?
85 :
83 :2005/12/10(土) 15:49:59 ID:???
>>84 どういうことでしょうか?
staticの意味がわかりません…(´・ω・`)
書き忘れましたが、HTMLはできるだけ弄りたくないです。
それから、dtdはHTML 4.01 Strictです。
わからなければググれよ。
>>85 position:relative;だろ?
relativeはstaticにしてもOKな場合が多いんだよ、
そうするとリソースの消費も少なくて済むから。
あ、勿論relativeでtop/left等を指定してたなら、 marginとかに変える。
89 :
83 :2005/12/10(土) 16:27:48 ID:???
position の値に static があったのを度忘れしていましたorz 頓珍漢な発言をしてごめんなさいorz orz 推論ばかりだと埒があかないのでソース出します。 ◆HTMLの構成 <head>ヘッダ</head> <container> <main>本文</main> <menu>メニュー</menu> </container> ◆CSS container に { position:relative; } menu に { position:absolute; top:0; left:0; } ◆表示 ----------- ヘッダ ----------- メニュー ----------- 本文 ----------- で、staticに変えられないか、というのはNGですよね? もし上手い方法があれば教えてくださいorz
position: fixed; にするとスゲースクロール重くなって、フリーズする。 何であんな重いの? 再描画してるの?ああーイライラ
>>89 おまえ、それを表示させてみろ。
本当にそれがおまえの望む表示になってるか?
頼むから確認してソースはまともに表示できるのにしてから出してくれ。
ついでにどうしてそれでrelativeの必要性がある?
そこに出てない部分でrelativeの必要性があるのか?
93 :
83 :2005/12/10(土) 16:49:15 ID:???
>>91 もちろん、このまま書いているわけではなく、<head> は <div id="head"> とかです。
>>92 すみません。抜け漏れがありました。
こんどこそ確かなの出します。
◆CSS
#container { position:relative; border: 1px solid red;}
#menu { position:absolute; top:0; left:0; border: 1px solid green;}
#main {margin-top: 2em; border: 1px solid blue;}
◆HTML
<div id="head">ヘッダ</div>
<div id="container">
<div id="main">本文</div>
<div id="menu">メニュー</div>
</div>
確認しましたが、
#container の { position:relative; } は必要でした。
(static だと表示が崩れました。)
>>93 #container { border: 1px solid red;}
#menu { margin-top:-3em; border: 1px solid green;}
#main { margin-top: 2em; border: 1px solid blue;}
95 :
83 :2005/12/10(土) 17:03:21 ID:???
>>94 それだとmenuが2行以上になったとき崩れませんか?
もちろん本文は複数行 かつ 可変です。
(私の書き方がまずかったですね。言葉足らず過ぎですみません。)
すみませんが出かけてくるのでスレを離れます。
>>93 どこかでつまらんものを吹き込まれたようですね?
>>93 それでrelativeをやめたいなら、素直にHTMLのメニューを先に書くことだ。
SEO対策なんて言われてるほど意味のあるもんじゃない、
あれはほーむぺーじ屋がリニューアルを迫るための口実ってのが大きい。
>>95 93のソースでも、メニューが何行にもなったときは本文と被るんだが・・・
99 :
14 :2005/12/10(土) 17:15:08 ID:???
解決しました。一応書いておきます。 幅が縮小したら崩れるのを防ぐつもりでいれた (無駄にいくつも入れる必要が無かった) #container部分のclearが原因でした。 すでにためしてた事だったのですがリロード ではなく変更のたびにMacIEを再起動させなくては うまく反映しなかったようです。 どうも失礼しました。
>>14 おお、乙。
力になれなくてスマンかった。
>>95 border関係はメタメタになるが
#main { position:absolute; margin-top:1em;} /* ←margin-topはメニューによって変えてね */
文章入れ替えなら#containerと#menuの設定消してこれだけでイケる。
ギリシア・キリル文字等のフォントをCSSやHTMLで変更することは可能ですか?
>>102 font-familyの話をしてるなら理論的には可能なはず
試したことはない
>>103 実際に
dd{
font-family:"MS PGothic","Osaka−UI",sans-serif;
}
と書いて、HTMLに<dd>〜</dd>(<dt>とかもありますが省略)としてもIEだと設定されているフォント(Times New Romanなど)になってしまうんですよ。
>>105 ある。XPならIEのフォント設定でギリシア語・キリル文字に設定できるし。
先生、下のほうに「MS PGothic」があります。
兎に角、Windowsだと「MS Pゴシック」も「MS PGothic」もOK。 あと、 body{font-family:serif;} と書いてやると<dd>〜</dd>だけMS PGothicになるから指定が効いているのは間違いない。 半角英数お日本語以外のフォントは設定されている標準になる。
111 :
Name_Not_Found :2005/12/11(日) 01:30:57 ID:bKkfRIQT
クラス指定に関しての質問です。 クラス指定って差分プログラミングできないのでしょうか? 例えばAってクラス指定でフォントとサイズを指定し、 BとCでAを継承し(フォントとサイズを引継ぎ)、ボーダーの指定だけを それぞれ指定する方法です。 ボーダーの組み合わせ(16種類)をクラスでやろうと思ったときに疑問になりました。 宜しくお願いします。
>>11 BとCがAの内包クラスなら自然とそうなる
CSSの継承を調べてみて、それ以上のことはできないよ
113 :
111 :2005/12/11(日) 01:50:20 ID:bKkfRIQT
>>112 例えば、
div{
フォントとサイズを指定
}
div.B{
ボーダーのみ指定
(フォントとサイズは引継ぎ)
}
ってのは出来ないってことですか?
DOMにおける属性の継承は調べましたが、自分はJava屋でしたので
継承で差分プログラミングできないかな〜って思ったしだいです。
class="A B C"
>>113 できるよ。
それだとまずdiv全体にその指定がなされる。
次にclassがBのdivにのみ、divの設定+ボーダーの設定がなされる。
前スレからコピペ。
977 Name_Not_Found 2005/12/07(水) 22:35:59 ??? mailto:sage
>>976 うーん、もちっと基本勉強したほうがいいかも。
CSSは汎用装飾→特殊装飾の順にトップダウンしていく仕組みだから、
divで指定した場合、全部のdivにその装飾がいくワケね。これが汎用。
で、その中から特殊なclassなりidなりに、更に修飾を足す、または上書きする。
117 :
111 :2005/12/11(日) 02:03:03 ID:bKkfRIQT
>>113 えっ、出来ますか?
以前験したとき、親にあたる属性(divの親であるbody)の
属性を引き継いでしまいました。
なにか書き方があるのでしょうか?
>>117 ん?ちょっと待って、引き継ぎたいんじゃないの?
118のような規則になっているよ。
>>117 あ、もしかして、divの設定を無視してbodyの設定がdiv.Bに反映されちゃったって意味?
↓を試しても君の環境でそうなるんだったら、環境がおかしいかも。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html401/strict.dtd ">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-Type" content="text/css">
<title>テスト</title>
<style type="text/css"><!--
body{font-size:12px;color:#f00;background:#fff;}
div{font-size:20px;color:#0f0;background:#000;}
div.b{border:solid 3px #00f;}
--></style>
</head>
<body>
<div class="b">黒地緑字になってる?</div>
<div>ここはボーダーなし黒地緑字</div>
</body>
</html>
121 :
111 :2005/12/11(日) 02:17:37 ID:bKkfRIQT
>>119 すみません。
説明が下手でした。
DOMツリーにおける親子関係での属性の引継ぎではなく、
Javaみたいにクラス間での継承による属性の引継ぎが
できないかなった思っていたのです。
まぁ、出来ないとしてもコピペで済みますので
支障はないですけど。
>>122 JAVAのクラス継承よく知らんので変なこと言ってたらスマンが、
クラス間にDOM上の親子関係がない場合は引き継ぎはむりぽ。
>>115 のようにクラスを幾つも指定してやることで沢山のスタイルも取り込めるから、
コピペはそこまで要らんと思うよ。
123 :
111 :2005/12/11(日) 02:25:22 ID:bKkfRIQT
>>120 あっ、うまく逝きました。
環境はIE6.0です。
HTMLの記述はDOCTYPEのところが曖昧です。
月曜日に会社で確認したからまた書き込みます。
そう言えばDOCTYPEの書き方でIEの挙動が変わるってどこかで
見た気が・・・
あ、因みに挙動変わるのはIEだけじゃないよ。 IEのCSS解釈はちょっとアレなので、 真面目にCSSをヤルんだったらFirefoxのほうがいいカモ。
126 :
111 :2005/12/11(日) 02:32:52 ID:bKkfRIQT
>>115 >>122 有難う御座います。
クラス複数していも月曜日会社で試してみます。
(組み合わせを考えなきゃ名〜)
>>104 "MS PGothic","Osaka−UI"
に " はいらないよ
129 :
111 :2005/12/11(日) 02:40:54 ID:bKkfRIQT
>>125 今回の対象は社内アプリでIE6.0限定です。
(JScriptも使いまくり)
関係ないけど、111からの書き込み見直すと仮名漢字とかかなり変。
酔っ払ったまま書き込むのは危険ですね。
それでは退散します。
月曜日の夜に結果報告いたします。
<div id="left">...</div>
<div id="right">...</div>
というのを作り、leftは左に(メニューとか)、
rightは右に並べようと思ってます。
そのとき、leftよりもrightの方が長いと、leftが途中で切れて格好悪くなってしまいます。
なので、leftの高さをrightの高さと同じようにしたいのですが……
わかりにくいと思うので、理想通りのサイトを(これはテーブル)
http://www.rockbox.org/ これのメニューみたいに、左の柱が右の柱の高さと同期するようにしたいのですが……
どうやれば良いのでしょう。
>>131 left{float:left; hight:100px;}
right{float:left; hight:100px;}
133 :
131 :2005/12/11(日) 03:37:37 ID:???
右は可変でお願いします…… というか、似たようなことも検討したんです。 メニューだけpx固定という。 しかしそれだと、画面サイズが指定サイズ以下だと、 無駄なスクロールバーがでちゃうのであきらめました。
このスレ、ちょっと前まではいい感じだったのになぁ〜・・・・・
背景に写真を使っているため、白い半透明のテキストボックスが欲しく、 .txtbox{background:#ffffff; filter:alpha(opacity=45);} <div class="txtbox"> こんな感じに使っているのですが、 そのテキストボックス内で、普通にimgタグで画像を貼り付けると テキストボックス内に貼り付けた画像まで透過率を継承してしまいます。 新たに貼り付けた画像は透過して欲しくないのですが、継承を拒否するようなやりかたはありませんでしょうか。
.txtbox img {}
filterて
写真てことは固定? そうだったら body {background-image:url(濃い背景写真)} .txtbox {background-image:url(薄い背景写真)} でも、filterって何ー
filterはCSSじゃないからほっとけ
えー!filter知らないんですかー!
ごめーんしらないんですぅ><
>>131 box {
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div>
間違って書き込んじゃったからここまで。
146 :
131 :2005/12/11(日) 12:33:15 ID:???
>>142 #box{
width:100%;
position:absolute;
background-color:#ffffcc;
}
#right{
width:84%;
float:right;
background-color:#FFFFFF;
}
#left{
width:16%;
float:left;
background-color:#ffffcc;
}
これでいけました。
147 :
131 :2005/12/11(日) 12:35:31 ID:???
ああ、rightがleftより短いと、 背景が後ろまで出てくるか…… そこは譲歩しないとダメか。
>>147 本質を理解してないな・・・
「必ず短いほう」に背景色を合わせるんだよ。
それが嫌なんだったらテーブルレイアウトでもいいと思うぞ。
質問させてください。 「ページの余白を指定するタグ」 <!--body{margin-top:**px;margin-left:**px;}…… で、400pxなどの大きな数字を入れ、好きな場所から文字が始まるように使用しても大丈夫なのでしょうか? 窓+IEでは普通に見れますが、Macなどだと酷いことになったりしないか不安で… やっぱりこういう場合はテーブルタグをつかったほうがよいのでしょうか? よろしくお願いします。
スペーサーが欲しいってことでしょ? 別に問題ないとおもうけど
>>149 それはタグじゃありません。CSSです。
好きな場所、というのがビルダーの何処でも配置モードと同じような絶対配置を指すのだとしたら
UA間によって差異が大きく出る可能性があります。
>>146 #box{
margin: auto;
width: 800px;
background: url('n.gif') repeat-y;
}
#right{
width:640px;
float:right;
}
#left{
width:160px;
float:left;
}
n.gifは幅800pxでright,leftの背景に対応する画像を用意
>>148 そうなる可能性もあるということです。
メニューは全ページ同じでも、
右の柱が長くなったり短くなったりするので、
たまにメニューの長さに負ける可能性が無くもないと。
普段はメニューの方が短いのですがね。
必ず短いという保証はないのです……
>>153 width固定にするなら、その方法もありですね。思いつきませんでした。
固定にする気は今のところありませんが、参考にさせてもらいます。
・font-size:90% ・font-size:0.9em この2つってどう違うのですか? OperaやNNだと大丈夫なのですが、 IEだと前者は正しく表示されるのに、 後者だと「文字サイズ:小」と設定したときに 文字が異常なほど小さくなってしまいます。 IEのバグなのか、私の見当違いなのか…… 教えてください。
どうもありがとう
>>150-152 火狐で見たら酷いことになったので変えようと思います。
ありがとうございました。
1行目にXML宣言入れてるんでムリ
関係ないけど コンテナ(container)をずーと コンタイナーって読んでたよ
>>164 それは全然的外れなことを言ってる・・・
左右どちらが長くなるかわからない、かつ
左右の背景色が違うんだったら
短いことが多いほうで設定して、そっちが長くなっても妥協するしかないでしょ。
テーb
>>166 あれ、
>>131 で float が clear されてないから、長い方が切れるって話じゃないのか
それは解決されてるでガス
ブロックレベル要素(h1要素など)の幅を内容に合わせて自動的に 変化させることはできませんか?display:inlineとしてやれば 可能ですが、そうするとインライン要素のようにレンダリングされて しまうので、表示はブロックレベルのまま前後に改行が入るように したいです。
幅って?縦?横?
172 :
170 :2005/12/13(火) 04:23:36 ID:???
横です。
次にbr入れるか、テーブルでやるか・・・
なんでdivが嫌われるのかわからん
>>170 display: table;
まぁ、IEには無いけど…
>>170 正しくHTMLを書けばH1の下はブロック要素のハズ。
とすればh1をinlineにしておけば、自然とさの次のブロック要素との間には改行ができる。
>>174 回りくどい。<h1><span>..</span></h1> と表示結果は似たようなものだろ。
>>177 行が折り返されても背景色は全体に行き渡るようにしなきゃ駄目なんじゃないの?
仮にそうなら、display:inline; は使えないから、shrink-to-fit されるように、
display:table;, position:absolute;, float:left(right); しかないだろ。
でも、display:table; を除いて、後続の心配をしなきゃならないから、結局、
>>176 になる。
現実には、<table>要素型(抽象的な表定義)の具体的利用形態の一つである、
「視覚に対して表としてのレイアウト(紙媒体のようなレイアウト)を提供する [RFC1942]」
を素直に利用する。
<table><tr><td><h1>..</h1></td></tr></table>
で問題無い。
>行が折り返されても背景色は全体に行き渡るようにしなきゃ駄目 ??? これは逆だと読めたんだが、 背景色やボーダーがないなら幅なんて考える必要ないじゃん
>>177 HTML4.01 Transitional DTD などでは、body 要素直下にHTMLのインラインレベルエレメントを置ける。
言うまでも無く、HTMLのインラインレベルエレメントは、普通、display:inline; な表示である。
>>179 > 背景色やボーダーがなければ幅なんて考える必要無い
→
>>178 幅を考える必要がない (というか適用されない) display:inline; じゃあ駄目
>>181 170の望んでるのはdisplay:inlineじゃ改行がされないから駄目、というだけだぞ
>>180 それは現在のW3Cの求めるところではないから
「正しい」とは言い難いじゃろ。
>>180 ISOが聞いたら泣き出しそうな仕様だな
h1{display:inline;} h1:before{content:"\A";} h1:after{content:"\A";} 次の要素がインラインでもこれでイケるかと思ったんだが、 テキスト相当の改行=半角スペースが入るだけでbr相当の改行は入らなかったな、 何か間違ってる?
みんなもっとdivをいっぱい使おうよ。
188 :
170 :2005/12/13(火) 15:30:48 ID:???
レスを下さった方々、ありがとうございます。 紹介していただいた方法をまとめると、 ・display: inline; (Strictにマークアップしてあることが前提) ・display: table; (IEは未対応) ・<table><tr><td><h1>〜</h1></td></tr></table> ・<h1><span>〜</span></h1> ・<div><h1>〜</h1></div> などですが、下の三つの方法は見た目を制御するためにHTMLを書き換える ことになって保守性が下がってしまうので、私にとっては使いにくく感じました。 私の書く文書はXHTML1.1としてマークアップしているので最初の方法でも とりあえずは問題ないのですが、要素の内容が多いと改行が入り枠線や 背景色が意図したものとは違ってくる、margin-topなどのプロパティが 使えない(なぜ?)、などの不満もあります。ひとまずはタイトルを長く しすぎないことで対応したいと思います。(TransitionalなHTMLでも 使える方法があればそれが一番なんですが)
.XXX と #XXX クラスとIDってすみわけらしいのだが って何が違うん?
オ ゥォ ッョ ググレ カレー
>>189 <p id="MAKIKO-TANAKA" class="name">田中真紀子</p>
<p id="KAKUEI-TANAKA" class="name">田中角栄</p>
IDはその要素「固有の」名前を表す、だから1ファイルに同じIDがあってはならない。
classはその要素の性質を表す。
>>191 ???
固有の設定?をしたいときにIDを使うでおk?
>>192 「設定」をするしないとは別物。
たとえば生きてるときでも、「私」がID(名前)を有していて、
更に「男」「人間」というclass(性質)を有しているように、
文書もその中身に名前と性質を有してるだろ?
それを踏まえて適切にマークアップすれば、自然とIDとCLASSは棲み分けられる。
CSSで設定をしたいからidがあるわけでもclassがあるわけでもない。
元々そういう性質(class)を持っているから、同じ性質には同じ設定をするんだし、
元々そういう名前(id)を持っているから、それには固有の設定ができるだけ。
設定をしたいからid/classを振るのは本末転倒。
これに関してはCSSじゃないから、Strict-HTMLスレのが適切な希ガス。
http://pc8.2ch.net/test/read.cgi/hp/1132669841/
>>187 大してこったレイアウトでもないのに
自信有り過ぎw
このデザインなら確認しなくてもどのブラウザでも見られるし。
hタグの使い方間違えてるしw
fontsizeピクセル指定だしと
挙げたらきりがないなー。
無視でよろ
>>194 みんなが無視してたのに何を構ってるんだ
自演臭いな
へ へ の の も へ
198 :
Name_Not_Found :2005/12/14(水) 23:01:32 ID:2fZ17BR0
<ul class="menu"> <li class="menulink"></li>.. </ul> としているところを、いちいち<li>にクラス指定せずに、 ul li{...} という様にcssの方で一括指定するにはどうすれば良いでしょうか?
>>198 .menu li {..........}
200 :
Name_Not_Found :2005/12/15(木) 00:30:58 ID:JXWnMn1B
IE6使用です。3段組+ヘッダ+フッタのレイアウトで 縦スクロールした時に両サイドとヘッダ部分のみ 固定した状態でブラウザでの表示位置を変えない ようにする事は出来ないでしょうか? (3段組の中央部のみスクロールされる状態) よろしくお願いします。
204 :
Name_Not_Found :2005/12/15(木) 00:53:52 ID:JXWnMn1B
FONTの埋め込みってできるんですか?
エスパーキボンヌ
position: fixed; top: 32px; Netscape,Mozilla,Firefox,Opera,IEだと正常なのに Safariだと崩れる。 32pxって書いてあるのに下行きすぎ! 重なって文字が見えねーよ。 これはバグ?それとも仕様??
エレガントなsafariにバグなどあろうはずもない
IE は :hover使えますか?
おまいは試すと死んでしまうのか?
はい
:visitedとかIE使えないのか。 使えないんだ。 使えないIE
はい
うんこ
217 :
Name_Not_Found :2005/12/15(木) 14:56:01 ID:/qlXhHgU
全称セレクタ*とhtmlとbodyは、同じものですか? どれで設定しても、それにすべての要素に適用されると思うのですが。
はぁ?
肉を食え肉を
body{ margin:0; padding:0; background-image:url(../images/bg.gif); background-position:center; background-repeat:repeat-y; text-align:center; } #hogehoge{ width:750px; margin:auto; padding:auto; text-align:left; } 上記のようにして背景画像とセンタリングしたボックス(div)を 配置すると、WinIE 6 で横位置が1px分ずれるんです。 (※他のブラウザでは背景画像(幅750px)とボックスの両端がちゃんと合う) これってどこに原因があるんでしょうか。
223 :
Name_Not_Found :2005/12/15(木) 20:35:58 ID:2qoUVvWo
どっちにずれるか聞かせてよ
225 :
221 :2005/12/15(木) 20:47:42 ID:???
>>228 ホントだ、ずれるな。50%でも同様。
これ、偶数ピクセルのせいで「明確な中心」が出ないんじゃないかな、
多分切り捨て/切り上げのラウンドがもじら系とは違うんだと思う。
だから結論としては、画像とdivを749pxにしてやれば*IEでは*直る。
ただこれをするとFirefoxで逆にずれてくれるんでorz
そっちは750pxのままで振り分けて。
227 :
Name_Not_Found :2005/12/15(木) 21:09:31 ID:OSlz4Ee6
>749px のような指定ではなくて%指定のほうがいいのでは?
後ろ向きな手段ではあるがホゲホゲに背景画像
229 :
221 :2005/12/15(木) 21:23:49 ID:???
>>226 背景画像2枚用意して切り換える訳ですね。
試してみます。
>>228 中身がなくてもページ下端まで背景画像を表示させたいのです。
bodyに背景画像をセットする以外にやり方ってあるのでしょうか?
230 :
Name_Not_Found :2005/12/15(木) 21:24:58 ID:OSlz4Ee6
俺もpx指定でIEでずれたから、IE用のスタイルシートを別に書いて、 サーバサイドスクリプトでブラウザ取得してスタイルシートを返してる。 IEのバグじゃないのかな。
UA偽装はそいつの責任
偽装する知恵があるのなら、ページが正常に表示されない問題も自己解決できるさ。 好きに泳がせておけばいい。
非常に素朴な疑問 CSSで“本来正しい記述”はどれ? 例題 body@{Abackground-colorB#FFFFFFC} @半角スペースを開ける YES/NO A半角スペースを開ける YES/NO B 1 ":"(コロンのみ) 2 ": "(コロン+半角スペース) 3 " : "(半角スペース+コロン+半角スペース) C 1 ";"(セミコロンのみ) 2 "; "(セミコロン+半角スペース) 3 " ;"(半角スペース+セミコロン) 4 " "(半角スペースのみ)
これほどどうだっていい質問はそうは無かろう C−4以外は
スルーしろよ
C−4が正じゃなかったっけ?
>>237 どれでもいい。
ただ4がそのセレクタ最後のプロパティでなかった場合はセミコロンが必要と言うだけ。
個人的には
body {
background-color : #fff;
color : #000;
}
↑タブ ↑タブでコロンを合わせる。
body { background-color : #FFFFFF } これが綺麗
好きなように書けよ
今は俺が考えたインデント式が海外でも広まってるんだぜ
タブやスペースで容量云々言うより 画像やCSSの書き方自体のが問題だ罠
>>248 殆どCSSで何も書いてないくせに
背景画像で70MB超えてたりするともうアボガドバナナ
251 :
Name_Not_Found :2005/12/16(金) 14:03:38 ID:tI4A2zdK
初心者ですいません。 CSSでボックスを作りheightを指定して上下にborderを入れた場合、 IEですとheight内にborderの幅が収まるのですが、Firefoxですと height+borderの幅というふうになってしまいます。 これをどのように回避すればよろしいでしょうか?
IEのバグだからハック汁
5.5以下なんてクソ以下のIEの話はしなくていいんジャマイカwww
FireFoxも糞以下
258 :
Name_Not_Found :2005/12/16(金) 15:24:36 ID:tI4A2zdK
>>254 ありがとうございます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
を入れてみたらFirefoxと同じ表示になりました
>>258 リンク先見たかー!
それじゃ不十分だぞ、ちゃんとシステム識別子入れろー!
>>259 互換モードになるだけだから、別に良いだろ。
古いブラウザでも同じ表示になるんだし。
オマエガナー
オマイモナー
モマエモナー
267 :
Name_Not_Found :2005/12/16(金) 20:45:32 ID:5m9b6ZKJ
全然重くない
>>267 0.5秒くらいで表示されたが。
おまいのPCか回線がしょぼすぎるんじゃね?
>>267 ダイヤルアップ28kでクラシックペンティアムだろwwwww
486DXはいい石だった
へ へ の の も < カスが馴れ合うスレはここですか?
>>267 は、自分のPCがそれほどしょぼかったのかと
打ちのめされました。
しかし負けず嫌いの
>>267 は、必死で罵声を
飛ばすことで意地を張ろうとしましたが、
結局は自演を見破られ、むなしくそのスレを去りましたとさ。
ちゃんちゃん
かすいけスレ落ちたの?
>>279 落ちたみたいだ。
・Web制作初心者用質問スレッド
・CSSでイケてるデザインサイト
携帯からどっちか立ててみるか・・・
●持ちの人よろしく。
281 :
Name_Not_Found :2005/12/17(土) 13:56:39 ID:5q2vIVap
tdやddを、リストのように■を付けたいと思っています。 (2行にわたってもあたまの■の後に文字がくるように) いろいろやってみましたがうまくいきません。 できないものなのでしょうか…。
>>280 自己レスだけど、スレ立て代行スレで頼んでおいた。
list-item
>>281 IEにも適用させようとするなら、テーブルレイアウトがいいと思うよ。
CSSだけだとまたIEがね・・・
287 :
初心者マーク10個必要な人 :2005/12/17(土) 17:28:54 ID:IvSkoIfv
ブログ全体が、画面左によってしまいます。 マージンを0pxにしたり、 マージンライト0pxにしても、変わりません。 どうしても、左によっているのが不細工なので何とかしたいです。 ご教示お願いします<(_ _)>
元々表示していた線あり表の情報を線なしにして表示しようと 考えているのですが、以下のソースだと <p>と<td>の(「な」と「あ」の)左位置が異なっているのですが 合わせる事は可能でしょうか? table.sample3 {margin: 0px;padding: 0px;} tr.sample3 {margin: 0px;padding: 0px;} td.sample3 {margin: 0px;padding: 0px 10px 0px 0px;} <p>なんちゃらかんちゃら組み合わせは以下</p> <table class="sample3" summary="test"> <tr class="sample3"><td class="sample3">あああ</td><td class="sample3">いいい</td></tr> </table>
290 :
初心者マーク10個必要な人 :2005/12/17(土) 17:37:12 ID:IvSkoIfv
このままだとエスパーを呼ぶしかないな・・・・
294 :
初心者マーク10個必要な人 :2005/12/17(土) 17:47:26 ID:IvSkoIfv
>>292 269gです。
書く必要あるかわからないけど、一応、わかっていることを書いておきます。
269gはシーサーのシステムを使っています。
シーサーでやっていたときも同じでした。
3カラムです。
どこかのブログで、中央ぞろえか、左か右かと選べるようになっていましたが、
269g、シーサーは選べません。
>>287 先生、テンプレは見てくださいましたか・・・・
マージンは左右共に標準モードでautoですよ。
>>289 table{border-spacing:0;}
298 :
初心者マーク10個必要な人 :2005/12/17(土) 18:43:02 ID:IvSkoIfv
>>296 どこにautoと入れるのでしょうか・・・
うーん・・・
>>298 全体を囲うコンテナブロックに対してmargin:auto;
これで理解できなかったら、上のテンプレ一通り呼んで再勉強したほうがいいかも。
281です。
display:block
はやってみたんですがダメだったんです。
>>286 IEで確認したから適応されていなかったのでしょうか。
IEのバグってことですか。
>>298 body { text-align:center; }
#container { margin:auto;
text-align:left; }
この3つの要素を入れれば何とかなるはず。
>>303 text-align:center;
初心者スレならともかく
このスレでそういう間違いを教えるのはどうかと
305 :
Name_Not_Found :2005/12/17(土) 23:42:37 ID:yXmAmtfV
('A`)
つ【テンプレ】
だから、馬鹿(IE)に合わせる必要があるわけで。
バカも一応標準モードくらいはあるんだよ
つーことは、俺が標準語をしゃべれるのと同じだな?
そうそう。 ってンなはずあるかいっ!
んにゃぁ
IE5.5以前は margin:auto; が効かない。
>>317 margin-left:auto;
margin-right:auto;
IE5.5ww
>>317 NN4でもmargin:autoが効きません!><
スレ違いかもしれませんが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> これって標準モード?
リストそのものををfloat:left出来ませんか? divで括らないと駄目? ・あああ ・いいい ・あああ ・いいい <ul> <li>あああ</li> <li>あああ</li> </ul> <ul> <li>いいい</li> <li>いいい</li> </ul> ul{ width: 45%; float: left;}
326 :
324 :2005/12/18(日) 18:55:47 ID:???
>>325 当方マカですが、324のソースではfloatしてくれません。
divでulを囲めば、かろうじて成功。
リストはfloatするものかどうか知りたかったので。
328 :
324 :2005/12/18(日) 19:33:21 ID:???
>>327 thxです。
やっぱりIEでもNCでも駄目でした。
理屈ではフロート出来るはずなのに、変だなーと思ったので。
phpで作っているので、macにだけdivで囲むよう指定してみます。
>>322 回答者ならともかく、質問者に3年ROMって…w
330 :
Name_Not_Found :2005/12/18(日) 21:12:04 ID:4yIGxWki
CSSで右クリック&ドラッグ禁止の指定ってできますか? JavaScriptでの oncontextmenu="return false;" onselectstart="return false;" みたいなやつです。
釣りは余所でやれ
>>330 できるよ。教えてやるから、ケツの穴をまずかせ。
>332 嫌です
>>320 できない。
ていうかCSSの成立意味に反する。
Strictの標準モードでhtmlを作成しました。 CSSで * { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; } とやってみたのですが divブロックのwidthを指定すると borderやpaddingの幅が含まれません。 divブロックの幅+border幅+padding幅といった感じになります。 どこが間違っているのか分かりません。 希望としてはdivブロックの幅=要素+border幅+padding幅といったようにしたいです。 よろしくお願いします。
標準モードになってないです
まちがった。標準モードになっています。
>>335 box-sizingが入ってる時点で(+moz)が入ってる時点でIE以外はOKなはずだけど・・・
どっか書き方間違ってないか?
340 :
335 :2005/12/18(日) 23:18:42 ID:???
>>339 後出しでスミマセン。確認した環境はIE6.0です。
IEでもOKにする方法を教えてください。
341 :
335 :2005/12/18(日) 23:20:49 ID:???
>>341 IE標準モードでbox-sizingはStrictな方法では存在しない。
正規のbox計算で慣れといたほうがいいか
IEは互換モードでその他はbox-sizingにしといたほうがいい。
タグに括られていないテキストだけを装飾するにはどうすればいいのでしょうか?
>>343 テキストの内容を正規表現で検索するスクリプトをOK。
>>344 で、どうすんだよ、低脳。
そういう抽出操作の後、タグ付けせずにCSS装飾できますか、という質問かもしれないだろ。
>>346 で、どうすんだよ低脳。
おまえがタグづけせずにCSS装飾できる方法を教えろよwww
348 :
Name_Not_Found :2005/12/19(月) 02:52:51 ID:ckM/OVLl
>>347 全ての要素はbodyのなかだ
body{}にかけばいいだろコンボイ
>>348 時々でいいから head, title {display:block;} のことを思い出してあげてください
350 :
Name_Not_Found :2005/12/19(月) 13:14:30 ID:dxAyHPSG
初心者ですいません。 テキストリンクのCSS装飾を2種類欲しいのですが、 CSSでどのように装飾すればいいのでしょうか? idやclassでできるのでしょうか?
>>350 無理だと思います。
テキストリンクの装飾を複数欲しい場合は、
Javascriptなどの言語を使う必要が有ります。
352 :
Name_Not_Found :2005/12/19(月) 13:56:18 ID:ckM/OVLl
353 :
Name_Not_Found :2005/12/19(月) 14:37:46 ID:dxAyHPSG
>>352 すいません。こういうことでしょうか?
これだとうまく表示されないようです。
.hoge a:link {
color: #FF9933;
}
.hoge a:visited {
color: #FF9933;
}
.hoge a:hover {
color: #FF9933;
}
.hoge a:active {
color: #FF9933;
}
.hage a:link {
color: #666666;
}
.hage a:visited {
color: #666666;
}
.hage a:hover {
color: #666666;
}
.hage a:active {
color: #666666;
}
<a class="hoge" href="
http://yahoo.co.jp/ ">Yahoo</a>
<a class="hage" href="
http://google.co.jp/ ">google</a>
>>353 基本を勉強しなさい
そのHTMLの場合は
a:link.hoge
356 :
Name_Not_Found :2005/12/19(月) 17:25:23 ID:dxAyHPSG
359 :
Name_Not_Found :2005/12/19(月) 19:04:47 ID:2QmKv3U+
初心者ですが、大至急で商用HPを作っています。 レンタルサーバー屋のフォーマットにHTMLを打ち込んでも、なんかタグの通りにならないと思って 問い合わせたら、「共通CSSです。」と言われました。 何がしたいかと言うと、文章の一部にリンクを入れました。その部分の文字だけ色が変わるとか 下線が付くとか見て、ここにリンクがあるとわかる様にしたいのです。 どうタグを打ったらよろしいですか? また、GoLiveを持っております。面倒な時はGoLiveでとりあえず作って、 HTMLソース画面をコピーして他に移しております。CSSでもそれが出来そうなのですが、 マニュアルを読んでもわかりませんでした。 どなたか詳しい方アドバイスを下さい。宜しくお願い致します。
361 :
359 :2005/12/19(月) 19:22:01 ID:2QmKv3U+
>>360 ありがとうございます。
しかし、インラインで書くとはどういうことなのでしょうか?
たぶん基本的なことなのでググツたのですが、スケートの内容になってしまいます。
度々すみませんが、また教えて下さい。
362 :
Name_Not_Found :2005/12/19(月) 19:30:42 ID:Q1Fgok6p
インラインフレームで読み込む形のこといってるんじゃない。
>ググツたのですが、スケートの内容になってしまいます。 わろた
364 :
359 :2005/12/19(月) 20:04:25 ID:jtOtsdyj
質問してみたものの、皆様のアドバイスについていけないです。 もうちょっと勉強してから出直します。
365 :
Name_Not_Found :2005/12/19(月) 20:10:05 ID:Q1Fgok6p
366 :
359 :2005/12/19(月) 20:19:46 ID:jtOtsdyj
>>365 ご親切にどうもありがとうございます。
HPを自分で作るのは10年早い気がします。
よく勉強してみます。
367 :
Name_Not_Found :2005/12/19(月) 20:30:30 ID:WPsqHsxy
縦方向に中央配置するにはどうしたら
「インラインで書け」でなんで「インラインフレーム」がでてくるんだ? 知識もねーくせに回答すんな
369 :
Name_Not_Found :2005/12/19(月) 20:45:09 ID:Q1Fgok6p
{ vertical-align: middle } でいいんでない。
ラベル低いな。
divの外側に1emでmarginを取っているのですが IEとFFでサイズ(幅)が異なります。 これは仕様なのでしょうか? それとも特殊なバグですか?
DOCタイプは?
>>372 1em=1文字の高さ。
デフォルトの文字の大きさが元々人によっても違うんだからさ。
375 :
372 :2005/12/19(月) 21:33:58 ID:???
376 :
Name_Not_Found :2005/12/19(月) 21:36:25 ID:WPsqHsxy
初歩ですいません。 emって絶対指定か相対指定のどちらなんでしょか
直ぐ上も読めないのか?
>>377 質問者は俺達みたいにスレにはりついていないからな。
>>378 インラインフレームで読み込む形のこといってるんじゃない。
質問です header領域内にh1を入れてマージン指定をしています。 左のマージンは良いのですが上のマージンを指定すると ie6ではちゃんとh1のみが移動してるのですが、ffやnnだとheaderの背景も移動してしまいます。 これはバグなんでしょうか? 対処法を教えてください。
382 :
381 :2005/12/19(月) 22:53:16 ID:???
間違えました。 headerの背景ではなくheader自体が移動してしいます。 例えば上のマージンを10pxとするとheader自体が上から10pxの位置に表示されます。 そしてh1はheaderの一番上に表示されるって感じです
何の要素に対してmarginを指定してるの?
>>381 ソース出せ。
多分IEのほうがオカシイとは思うが、その程度の書き方じゃ推測しかできん。
385 :
381 :2005/12/20(火) 00:16:19 ID:???
386 :
381 :2005/12/20(火) 00:21:44 ID:???
>>384 #header {
width: 760px;
background-image: url(img/headback.jpg);
background-repeat: no-repeat;
position: relative;
margin: 0px;
padding: 0px;
height: 80px;
}
h1 {
margin-left: 30px;
margin-top: 20px;
}
って感じです。
>>386 HTMLは
<div id="header">
<h1>ちゃらら</h1>
</div>
って感じ?
>>386 なんで、position: relative; してんの?
>>386 Win2kのFxとN7共に確認できず。
むしろIEのが、margin-topを大きく取ってもそれに合わせてheaderが伸びてしまう
よくあるバグが見られた。
390 :
381 :2005/12/20(火) 00:53:52 ID:???
391 :
381 :2005/12/20(火) 01:20:54 ID:???
余計な要素を全てはずして最初から作り直してみたけど変らなかったです。 ちなみにoperaでもffとかと同じになるのでIEが違うんだと思うのですが。。。 何処が間違っているのかまったくわかりません。
392 :
359 :2005/12/20(火) 01:24:06 ID:kvaBVs5C
! ! ! 内部CSSのことを「インライン」と言っていたんですね。 なんとかGoLiveで内部CSSのページを出すまでは出来たのですが、 ソースのページに行くとHTMLと変わりがなかったです。 何か根本が違ったんだと思います。 また勉強してきます。 お邪魔しました。
>>390 >他の物を絶対配置でheader内に置く為です。
他の物ならheaderに入れなくてよいのでは?
z-indexの問題かな?
relativeの時って
top:0px;
left:0px;
とかっていれなくてよいの?
positionって使ったことないからわからんのだが
>>391 えーっと、つまりFxでもOperaでも、
h1のマージントップでヘッダーのマージンが設定されてしまうってことでいい?
だとしたらそれは確かにおかしいんだが・・・
>>393 入れなければ自然とtop:0;left:0;になる。
position:absoluteのdivをdivの中に設定するとき、
親divをrelativeにするのとしないとで動作が変わってくるんだよ。
397 :
381 :2005/12/20(火) 02:10:56 ID:???
>>394 はい。そういうことです。
一応positionなどはとりあえずなくして作り直したんですがかわりません。
>>397 一応こっちで症状の出なかったソース↓
これでダメだったらおまいの環境が不思議・・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html401/strict.dtd ">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-Type" content="text/css">
<title>テスト</title>
<style type="text/css"><!--
*{margin:0;padding:0;border:solid 1px #0f0;}
#header {width: 760px; background-image: url(bg.png); background-repeat: no-repeat; position: relative;
margin: 0px; padding: 0px; height: 80px; }
h1 {margin-left: 30px; margin-top: 100px; }
--></style>
</head>
<body>
<div id="header">
<h1>ちゃらら</h1>
</div>
</table>
</body>
</html>
ごめんゴミorz
401 :
381 :2005/12/20(火) 03:01:28 ID:???
>>398 ありがとうございます。今試して見ましたが、確かにこれならOKでした。
ただユニバーサルセレクタのborder:solid 1px #0f0;を無くすと同じになってしまいます。
線無しにするにはどうしたらよいでしょう?
>>401 !!
マジだすまん、気付かなかった。確かになるわ。
線を消したいだけなら
border:solid 1px transparent;
でいいけど、根本的な解決じゃないな、これ。
あとスマン、限界なんで寝る・・・
不可ww
ワラタ
407 :
Name_Not_Found :2005/12/20(火) 10:56:16 ID:rmEitWVo
ちょっと教えてほしいのですが テーブルのborder,cellspacing,cellpadding等のオプションを CSSに入れる方法はありませんでしょうか? また、フォーム関係のonclick=等のjavascriptの動作を入れる事は・・・ できないですよねぇ?? 重複するので何かスマートな方法はありませんでしょうか?
cssで小作りできますか? headerがまるごと動いちゃう現象は safariでも起きました。 divだからだねきっと
411 :
Name_Not_Found :2005/12/20(火) 12:49:54 ID:rmEitWVo
>>404 それって複数指定にしなきゃいいだけじゃwww
すみません、IEのスタイルシートで、 font-familyで英字フォントを含むよう指定したら font-sizeの指定を無視するのですが、どうすれば指定を認識してくれますでしょうか? (例) .text10B { font-family: "Century", "MS ゴシック", "Osaka−等幅"; font-size: 10px; } とすると <span class="text10B">sitemapはこちら</span> が、Firefoxでは正常に見えるが、IEだと指定を無視する という状態になります。
質問する時はメール欄を空白にしろって書いてあるだろ。
>>413 それをコピってWin2000 IE6でも正常に動作を確認。
多分他のトコの指定とコンクリフトを起こしてると思われ。
416 :
415 :2005/12/20(火) 17:42:06 ID:???
あ、ゴメン、嘘吐いたかも。 それ、12pxだとならないでしょ。 確か10、11px程度だとおかしくなるバグがあったと思う。 そんな小さな文字を使うなってことで納得してくれorz
>415 本題とまるで関係ないけど 「コンフリクト」な もしこれが2ch用語なんだったら 野暮を謝る
>>417 ん?
border-color-*/border-style-*/border-width-*
で全部分けたらWinIEでOKだったぞ。
そんな2ch用語聞いたこと無いよ
IEってうっといね。
423 :
Name_Not_Found :2005/12/20(火) 21:51:44 ID:cSiw3wCt
すみません。 テーブルのセルにリンクを置いた時、セルの空白の部分にもカーソル反応させたくて a{display: block;} とスタイルシートで設定したのですが、 <table border> <tr><td width=100><a href=#>aaa</a></td></tr> <tr><td width=100><a href=#>bbb</a></td></tr> <tr><td width=100><a href=#>ccc</a></td></tr> </table> 上記のような縦に連続したセルの場合、Firefoxだと正常に反応するのですが、 IEだと2段目以降反応しなくなります。 これはIEのバグなのでしょうか?
A! display-mode::brock;
>>423 うん。
tdの幅が100pxなら、aにもwidth:100px;を指定汁。
うそこけ。
>>419 WinIE6で確認したが、枠線は文字色になり、透明にならんぞ。
div {
border-width:10px;
border-style:solid;
border-color:transparent;
color:blue;
}
<div>透明ボーダー</div>
>>426 横から口を出すが、419はハイフン*なんだから
border-color-top(その他四方向)を言っていると思われ
>>427 border-color-topって……正しくはborder-top-colorだろ。
でも、同じこと。下記を試してもボーダーは透明ではなく文字色のまま。
div {border:10px solid red; color:blue;}
.transp {
border-top-width:10px;
border-top-style:solid;
border-top-color:transparent;
}
<div>ボーダー</div>
<div>透明ボーダー</div>
429訂正。 <div>ボーダー</div> <div class="transp">透明ボーダー</div> ま、WinIEのborderではtransparentが効かないのには変りない。
久しぶりに来てみた。なんだこれは! がんばって検証や回答してるのはいいんだけどラベルが・・・ 質問者が可哀想になってくるぜ!
結局381が解決してない件 そして俺も解決できない件
padding で解決するようなことが解らんの?
<div id="nodisplay">テスト</div> #nodisplay{display:none;} で上記の「テスト」は表示されなくなりますが、ソースを見ると 記述はあります。やはり表面上で見えにくくするだけで CSSのみでソース表示もしない方法はないのでしょうか?
<head> <style>dt {font-family: courier new;color: #aaaaff;border-bottom: #cccccc 1px dotted;} dd {border: #cccccc 0px dotted;} dd dt {float: left;width: 30px;}</style></head> <body> <dt>A</dt> <dd>aaaaaaaa</dd> <dd> <dl><dt>A1</dt><dd>BBBBBBBBBBBB</dd> <dt>A2</dt><dd>CCCCCCCCCCCC</dd> <dt>A3</dt><dd>DDDDDDDDDDDD </dd></dl> </dd> </body> </html> 上のソースでA1〜A3を縦に並べたいんですが、どうやってもフォントサイズによってはズレてしまいます。 dtセレクタをコメントアウトするとOKなのですが・・・。 どうしたらきちんと並べられますか?
441 :
Name_Not_Found :2005/12/21(水) 16:25:34 ID:wuoclF2x
<form> <input type="image" border="0" name="imageField2" src="img/yes.gif" width="110" height="38"> </form> <form> <input type="image" border="0" name="imageField2" src="img/no.gif" width="110" height="38"> </form> というソースで、ボタン画像を二つ横並びにした上で右寄せにしたいのですが、良い手段は無いでしょうか。そのままだと折り返して2行になってしまいます。
442 :
441 :2005/12/21(水) 16:43:11 ID:wuoclF2x
>>441 yes.gifにstyle="float:left"をかけると1行にはなってくれるのですが、
左寄せになってしまいます。
ものすごく簡単な事でつまづいてて申し訳無いですが、
よろしくご指導お願いいたします。
floatを知っていて、ま〜じんを知らないのかい?
444 :
441 :2005/12/21(水) 16:49:36 ID:wuoclF2x
>>443 marginをどうかけてやれば1行右寄せになるでしょうか…。
ホントにアフォで申し訳無いですが、ヒントplz
ググる気がないなら帰れ!
446 :
441 :2005/12/21(水) 17:26:08 ID:???
自己解決しました。 スレ汚し失礼いたしました。
>>441 CSS以前に、form直下にはブロック要素しか許されてないから
そのHTMLは間違っているわけだが。
???
仕様書読んでない香具師多いのか <!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form --> 正しくCSSを適用させるには正しいHTMLから
??????????????????????????????????????????
>>447 何とかなりました。どうもありがとうございました。
>>448 Transitionalな場合もあるから
Transitionalだろうがインラインをbodyの下に置くような書き方してる奴は(ry
別にどういうHTMLを書いててもいいが そういうHTMLにCSSを被せるのは至難の業・・・
idとclass振りまくりでwww
ぁぁ ラベルが・・・
つーか100%CSS装飾やってると、単純に効率の問題でストリクターになる罠
>>381 marginではなくpaddingで指定する。
これ1.5になってから出始めた症状のような気がするが、
前バージョン持ってる香具師検証頼む。
>>461 ならない。
趣味でクラシカルなほうむぺいじ作ってるだけのおまえといっしょにするなという声が聞こえてきそうだ。
CSS使っててクラシカルもクソもない罠
>>465 クラシカルでレガシーなホームページというと、StrictよりTransitionalだと思うんだが。
企業もこの頃SEOSEOうるさいしなあ。
企業の担当が言ってるSEOなんて大したこと無いから 適当にごまかせるし、SEO対策とか言ってぼったくれるから 昨今の状況はありがたい。
でもSEO対策汁というとStrictだの言ってくるよなオジサン 下手するとブログに汁とかワケわからん
MTならカスタマイズ簡単だからなおさら良いじゃん。
企業サイトにMTもどうなのか。
新しくつくんのめんどくせ
>>164 フロートの問題でoverflowも良いですが、display:tableで解決するのは使えると思いますか?
IEは対応してないようですが、IEはwidth指定しただけで解決するようなので大丈夫でした。
HTML
<div class="container">
<div class="left">
<p>The left column.</p>
<p>The left column.</p>
<p>The left column.</p>
<p>The left column.</p>
</div>
<div class="right">
<p>The right column.</p>
<p>The right column.</p>
<p>The right column.</p>
</div>
</div>
CSS
div.container {display:table;width:100%;border: 1px solid green;}
div.left {width: 45%;float: left;border: 1px solid red;}
div.right {width: 45%;float: right;border: 1px solid blue;}
474 :
Name_Not_Found :2005/12/22(木) 11:24:44 ID:+P2mBHY0
質問させてください 画像アルバムをレイアウトしてるのですが 画像などの情報を <div><img ...><p>タイトル</p><p>日時とか</p></div> のようにして連続して何十個かを出力しています。 これを float: left; で並べてるのですが、 高さが可変なので途中に高さの高い<div>があったりすると そこの次に並べられてしまって順番がおかしくなります。 HTMLをいじらずにCSSだけで うまく並べる方法はないでしょうか?
ありますん
477 :
474 :2005/12/22(木) 14:03:12 ID:???
>>476 A,B,C,D・・・・
と並んでる場合で
Windowの幅を小さくして
Dが入りきらなくなった場合に
Aの下からD,E,F・・・と続いてほしいのですが
Cの下にDが来たりしてしまいます。
開発はIE6を使っています。
やはり無理なのでしょうか?
>>477 ていうかフロートはそれが仕様
そういう動きをさせたいからこそフロートを使うもんなんだが・・・
どうしてもくっつけて段落上げ下げしたいときは、 そのブロックを更にブロックで囲ってやって、 そっちにフロート制御してやるしかないよ。
>>476 レスありがとうございます。MacIEだと不安定みたいですね。(Safariは大丈夫)
164のリンク先でも、overflowもMacIEだとよくないっぽいですね。
MacIEの利用者って殆どいないんですが、念のためbrでクリアする方法にしておきます。
>>477 A,B,C,D・・・の高さをそろえれば良い。
多分Bが長いのだろう。
484 :
483 :2005/12/23(金) 05:47:50 ID:???
> Aの下からD,E,F・・・と続いてほしいのですが > Cの下にDが来たりしてしまいます。 申し訳ない。 「Dの下から Aの下に」 と完全に読み違えていた。吊ってくる。o...rz
釣り禁止
StrictでTransitionalみたいにborderを含めた寸法でボックス幅を割り振るにはどうすればいいですか?
>>486 それはStrict/Transitionalの問題じゃないんだが・・・
とりあえずIE以外ならborder-boxというプロパティ値を調べてみろ。
488 :
Name_Not_Found :2005/12/24(土) 09:11:05 ID:3BLpfNmx
朝から質問すみません。 h1.PageHeaderTitle { background: #fff url('./bg.gif') 0 0 no-repeat; color: #000; font-size: 3em; height: 120px; margin: 0; padding: 5px 0 0 26px; } これで背景画像がうまく表示されました (※1)。 しかしIE6で確認したところ、height の解釈が他のブラウザと違うみたいで、背景画像 が下まで表示されません。 この場合、IE6のために対策は無いでしょうか? お願いします。 -------------[Note]------------ ※1:Epiphany 1.4.8 , Firefox 1.0.4 , Galeon 1.3.20 , Konqueror 3.3 , Mozilla 1.7.8 , Safari 2.0
>>488 背景画像のサイズは?
IEだと背景画像が途中で途切れるってこと?
あとその確認したブラウザって描画エンジンが
GeckoとKHTML(とWebKit)しかないから
Operaでも確認したほうがよくない?
490 :
Name_Not_Found :2005/12/24(土) 09:24:44 ID:3BLpfNmx
>>489 背景画像のサイズは 130*90です。
しかもCSSに間違いがありました。訂正します:
h1.PageHeaderTitle {
background: #fff url('./bg.gif') 0 0 no-repeat;
color: #000;
font-size: 3em;
height: 60px;
margin: 0;
padding: 27px 0 0 90px;
}
> IEだと背景画像が途中で途切れるってこと?
はい、そうです。
ちなみにOperaでも確認してみましたが、特に大丈夫みたいです。
>>489 height:90px;の画像だから。
492 :
Name_Not_Found :2005/12/24(土) 09:40:06 ID:3BLpfNmx
>>491 paddingのサイズは含めないのでしょうか?
90pxに指定すると逆に画像の境界が見えてしまい、不自然です。
画像の境目ってなんじゃそりゃ。 画像ぴったりの高さにしたいなら、padding:0;でいいじゃん。
494 :
Name_Not_Found :2005/12/24(土) 09:58:08 ID:3BLpfNmx
>>493 やってみましたが、画像の上に文字がきてしまい
上とピッタリ(余白が無い)状態に…。
>>494 スクリーンショット撮れる?
最終的にどうしたいのか説明できる?
このスレの回答者のラベルってどれくらいでしょうか?
497 :
Name_Not_Found :2005/12/24(土) 10:27:33 ID:3BLpfNmx
自己解決しました。 ありがとうございました。 #header { background: #fff url('./bg.gif') 0 0 no-repeat; color: #000; font-size: 3em; height: 90px; } h1.PageHeaderTitle { margin: 0; padding: 20px 90px; }
498 :
486 :2005/12/24(土) 11:27:52 ID:???
499 :
486 :2005/12/24(土) 11:48:47 ID:???
現状をまとめなおします。 ・DOCTYPE設定はHTML4.01のstrict.dtd ・firefoxやNetScapeは-moz-box-sizing: border-box; box-sizing: border-box; で解決しました。 残るはIE。 borderの幅がボックスのwidthに含まれないのです。 これを含ませるためにはどうすればよいですか?
xhtmlのstrictにしてxml宣言を書く
>474 アルバムは「table」じゃねえのかな。
502 :
Name_Not_Found :2005/12/24(土) 15:07:07 ID:7e9fEU4J
ブロック要素の幅を文字の分量で変動させるにはどうすれば良いでしょうか?
直リンしちまった。スマン。俺もぶっちゃけテーブルでいいや…とか思ってる。
506 :
502 :2005/12/24(土) 17:06:39 ID:???
>>505 レスありがとうございます。
ただ、それだと折り返しがある時に綺麗な四角にならないので。。。
display:tableもやってみたんですがブラウザが。。。
>>506 widthをemで指定しる!
ユーザー側でフォントサイズを大きくしたら横幅も広くなる。
無理しないでtable使えって
ハックすればいい
510 :
502 :2005/12/24(土) 22:00:22 ID:???
>>507 レスありがとうございます。
文字数によって幅が変更するようにしたいので、それだとちょっと。。。
やっぱり、floatとclearを組み合わせるのが一番なんでしょうか?
widthにfitとかあれば良かったんですが。。。
次のように、ブロック要素の右下にテキストを配置したいのですが、 上手くいきません。 ■■■■■■■■■■■■■■■■■■■ ■□□□□□□□□□□□□□□□□□■ ■□□□□□□□□□テキストテキスト■ ■□□□□□□□□□テキストテキスト■ ■■■■■■■■■■■■■■■■■■■ HTML <div> <p>テキストテキスト<br>テキストテキスト</p> </div> CSS div { display: block; width: 200px; height: 50px; text-align: right; } 自分でいろいろやってみて、<p>の部分も<div>にし、入れ子にしてみま したが、どうやって下側に配置するのかわかりません。。。 環境は、WinXP+IE、Operaなどです。 よろしくお願いします。
自分なら↓こうやる。 div { width: 200px; height: 50px; position:relative; } p { position: absolute; bottom: 0px; right: 0px; }
514 :
512 :2005/12/25(日) 00:14:46 ID:???
>513さん レスありがとうございます。 さっそく試してみましたが、IE以外、表示がおかしかったです。 512に書いたソースはサンプルで、<div>が他にも存在し(もち ろん、個別にidを持っています)、position:relative;の指定も他 でしているのでうまくいかないのでしょうか。。。 今日はもう寝るので、明日、もう一度試してみます。
516 :
513 :2005/12/25(日) 11:27:42 ID:zcOPKHI9
>>515 何で?
bottomとrightを使っているから?
普通にこれでよくね? 確認してないが。 div { width: 200px; height: 50px; text-align: right; } p { margin-top: 50px; }
ああ、pのmarginは調整して。 50じゃはみ出てしまうわ。
>519 すいません、white-space: wrap; で解決しました
>>519 overflow
てか解決できなかったってどうなったのよ
?(´д`)
ここは土素人ばっかだな。 とくに517は酷いな・・・ 答える資格もねー。
div { width: 200px; height: 50px; text-align: right; } p { margin-top: 50px; } ワロタw
512じゃないけど、どうやればいいの?
boxの高さが決まってるならline-hight(一行限定)
528 :
Name_Not_Found :2005/12/25(日) 23:46:42 ID:VmsqkhFI
margin使うことがナンセンス
PX使うことが邪道。 解像度が変われば・・・ ズレズレw
ウソこけ
ULとLIを外部cssで設定したら全然反映されないんだけどなんで?
おまえの頭かブラウザが非対応だら。
>>503 たてに並べるってこと?
じゃないよね?
534 :
Name_Not_Found :2005/12/26(月) 16:52:06 ID:cLchEVpx
空セルの枠も表示させたいのですが 今までは半角スペースとか入れて無理やりだしてたのですが CSSでよい方法はありませんでしょうか? ちなみにブラウザはIEを用いるのでempty-cellsは使えませんでした。
何のためのCSSだよw
>>534 >ブラウザはIEを用いるので
おまえ、サイトは閲覧者が見るものだ。
おまえが使ってるブラウザで見られなくても、閲覧者の使ってるブラウザで見られればいい。
それはさておき何か色々と勘違いしてそうだが。
>>534 empty-cellsの初期値はshow
>>536 限られた人しか見ないからIEでいいんだよ。
お前の方が勘違いしてないか?
539 :
536 :2005/12/26(月) 21:09:17 ID:???
>>538 俺様にケンカうってんならはっきり言え。
こうして冬厨の夜は更けていくのであった。
>>541 オマエこそだれだ?あぁ?
ケンカ売ってんなら表にでろっ!
543 :
Name_Not_Found :2005/12/26(月) 22:50:17 ID:Edakepgc
CSSって、px指定はまずいのか?
メートル法で指定すべき
俺は色白の子を指名する
display:inline;とfloat:left;の使い分けはどのようにすればいいですか?
画面外に飛ばしたいときは、普通にインチで指定してますが何か。
551 :
534 :2005/12/27(火) 10:45:41 ID:z007gPkU
えー、色々とすみません。
>>535 複数のページスタイルを統一するためのものだと思っているのですが間違っていますでしょうか?
で、閲覧は限られた人であり外部にだすようなものではないのでIEということです。
>>544 サイズ指定だと複数の表のサイズも同じになってしまうのでなるべくは使いたくないなーと思うのですが・・。
まぁ、その上で各ソースに明示的に書いたらいけますがそれだと意味ないですよね??
用は空セルの枠は表示させますよーってスタイルのみスタイルとして定義したいのです。
勘違いしてたらすみません、いろいろご教授お願いします。
552 :
548 :2005/12/27(火) 10:51:54 ID:???
>>549 なんでそんなにエラそーなの?
きらい。
553 :
Name_Not_Found :2005/12/27(火) 11:03:58 ID:MgjEPkFu
>>548 floatはバグ関係で使いづらい。
それだけ。
きんもーっ☆
始めまして。 HXTMLでページを現在制作しており、現在のようなCSSですと IEではきちんと表示されるのですがNetscape 7.1では レイアウトが崩れてしまいます。 Netscapeにも対応させるにはどのようにすれば宜しいかお教え頂けますでしょうか。 参考にメインコンテンツ部分のCSSの一部を記載します。 div#left_top { width:160px; height:500px; background-repeat : no-repeat; background-image: url(../common/meinleft.jpg); float:left; } div#right_top { margin: 0px; padding: 0px; background-color: #FFFFFF; width:420px; float:left; } また、Netscape 7.1ではpadding,marginで-要素は対応されないのでしょうか? margin-top : -50px; 等です。
>HXTMLでページを現在制作しており、現在のようなCSSですと ?
557 :
555 :2005/12/27(火) 13:51:21 ID:???
>HXTMLでページを現在制作しており、 ここは気にしないで下さい。 CSSファイルを適応させるページをXHTMLで作っているという事です。
適用させるHTMLソース無しに、CSSだけ出されてわかるか。
>>555 どうせfloatのclear忘れとかでしょ。FAQみてないのかな。
560 :
555 :2005/12/27(火) 16:48:35 ID:???
>>558 >>559 ありがとう御座います。
clear : left;
が必要だったのですね。
無事Netscapeでもレイアウト崩れず表示できました。
やっぱFAQも見ないで質問してたのか。
>>561 なんでそんなにエラそーなの?
きらい。
>>551 つーかだからIEでもデフォルトが空セルは表示する設定なんだよ。
どうやって書けば空セル表示なしにできるんだ。
「子要素にaaaを持つbbb要素」だけにスタイルを適用したい場合はどう指定すればいいのでしょうか?
「親の中でこういう条件の子」に対する指定はあるが、 「子がこういう条件の親」という指定はCSS3でも出てなかったような。
567 :
565 :2005/12/27(火) 20:19:53 ID:???
>>566 そうなんですか・・・
解説サイト(たぶんcss2)を見て回っても見つからなかったんですが
そもそも存在しないんですね
たとえば「<a><img /></a>」みたいに
img要素を持つa要素にだけ特定のスタイルを指定した言って思うときが
頻繁にあるのですが
そういうものにだけclassを振るのは大変なので
ある特定の要素を包括する要素にスタイルを指定するセレクタか何かがあったらなと思ったのですが
というかあってもよさそうなのですが
大体<a><img /></a>なんてのはリストで並んでたりするから、 そういう不便は感じたことないなぁ。 というかIEがあるから、そんな素敵なマッチングは簡単なのでも使えナッシング・・・
569 :
565 :2005/12/27(火) 20:27:24 ID:???
あーたしかにそういうimg要素を含むa要素などは たいていその親要素に共通点があったりしますね 工夫してみます どうもありがとうございます
〜の親である x 要素っていう指定は XSL ではできるが、まぁスレ違いか。
ここはCSSのスレだからね
572 :
Name_Not_Found :2005/12/28(水) 21:43:31 ID:id41/09a
>>572 イベントハンドらを使ってz-indexの値を変更しているんだ。
>>572 すいません。
解説しているサイトをお探しなのですね。
それはわからないです。ごめんなさい。
>>572 JavaScriptスレのほうでヨロシク
そういえば、スゲー文法無視してHTML , CSSだけでやったのがあったような。
>>576 へえ、そっちはちょっと興味がある。
もし見付けられたら教えてくんろ。
>>577 display:aとしてaをdiv見たいな使い方をする(aの中にコンテンツを仕込む)。
イベントハンドラはa:hoverで代用。
ちょい待ち、本当に:hoverか? 動作的に:visitedではないのか?
display:a???
>>578 onmouseoverの代わりにa:hoverを使うんだね.
display:aというのは謎だから,contentで試してみたらできたので晒し.
Sleipnir2&Geckoで確認.IEではどうやれば….
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml " xml:lang="ja">
<head>
<title>TEST</title>
<style type="text/css">
a:visited:before { content: attr(title); background-color:#ffaaaa; }
a:hover:after { content: attr(href); background-color:#aaaaff; }
</style>
</head>
<body>
<ul>
<li><a href="
http://www.yahoo.co.jp/ " title="やふー">△</a></li>
<li><a href="
http://www.google.co.jp/ " title="ぐぐる">■</a></li>
<li><a href="
http://www.w3c.org/ " title="W3C">▽</a></li>
</ul>
</body>
</html>
582 :
Name_Not_Found :2005/12/29(木) 01:05:13 ID:P1OZc3j1
CSSで色々指定するのに、<div>タグをいっぱい使いまくって指定するというのは あまり良くないでしょうか? それと、CSSって意味とかあまり考えずに見栄えだけを考えて使ってもいいんでしょうか?
>>582 >CSSで色々指定するのに、<div>タグをいっぱい使いまくって指定するというのは
別にいいと思うよ。
>CSSって意味とかあまり考えずに見栄えだけを考えて使ってもいいんでしょうか?
それがCSSです、意味はXHTMLの方できちんとしてればいいよー。
>582 divのほかにも文脈に合ったタグが使われていれば問題無いなないでしょうか。 divも普通、<div id="title">とか、div自体にもIDやCLASSで意味付けを行うのが普通です。 CSSのプロパティの意味まで考えてたら、ほとんど何もデザインできなくなるので かたくなる必要はないです。気にしていたらレイアウトにfloatを使っている人は 全部アウトになっちゃいますから。
なんで
>>582 意味のあるdivなら、使うべき。
ただ意味のない空タグが俗手浸かるくらいだったらテーブルレイアウトでも同じ、
つまりCSSレイアウトの意味がなくなってしまう。
CSSのほうは、見栄えの分離のために生み出されたものだから、意味は考えなくても良いが
意味が分かってないと仕様を理解するのが難しいかも。
588 :
582 :2005/12/29(木) 01:33:40 ID:???
皆様どうもありがとうございました!
自分のサイトなんだから好きなように作れよ 他人にそのdivは意味がないとか言われてやめるくらいなら最初から作るな
素直にテボーレイアウテゥー
>>584 id属性もclass属性も、divに意味を与えない。
作者であるあなたにとっては何かの目印になるかもしれないが、divに意味は無い。
おまえら margin とか padding とかの長さの単位は何にしてる?
>>595 マジレスするとpt。
蛇足するとfont-sizeとかなら%。
.black-text { font-size:10pt; font-family:Gothic; font-style:normal; color: black; } .red-text { font-size:10pt; font-family:Gothic; font-style:normal; color: red; } .green-text { font-size:10pt; font-family:Gothic; font-style:normal; color: green; } .blue-text { font-size:10pt; font-family:Gothic; font-style:normal; color: blue; } このように似たようなクラスをいくつも定義したい場合に、大元となるクラスを作ってそれを継承した派生クラスを定義するようなことはできませんか?
たしかnullって0だよな。 0には単位つけなくてもよいしな。
603 :
Name_Not_Found :2005/12/29(木) 16:41:35 ID:cva4622A
>>601 新たな質問はあげような。
で回答だが、そんなの複数クラスで上書きすればいいでしょ。
605 :
604 :2005/12/29(木) 16:53:24 ID:???
スマン誤爆
606 :
Name_Not_Found :2005/12/29(木) 16:57:28 ID:eh7uIIat
text-indent: -9999pxでテキストのリンク吹っ飛ばして画像のリンク に置き換えるのは検索エンジンスパムなんでしょうか? たいていのサイトが使っているCSSの手法だと思うんですが。
>たいていのサイトが使っている んなこたぁない。偏ったサイトばかり見てるんだなあ。
>>606 糞w3c信者はその使い方は用法が違う!とか目くじら立てて批判するけど、
よく見かけるし、よく使うね。
俺だったらspanで括って display: none;
610 :
609 :2005/12/29(木) 17:33:20 ID:???
ああ、でもどっかの音声ブラウザは display: none; を 読み上げないやつあったか。 そうなると…
611 :
606 :2005/12/29(木) 17:42:49 ID:eh7uIIat
隠しテキストの程度によるんでないの? -9999pxだと、画像非表示の時まずくない?
>>611 は? <h1><img alt="タイトル"></h1>でいいぢゃん。CSSの出番無し。
alt属性がいいかもね。 画像非表示にしてると CSS で文字が消えちゃうので見えなくなってしまう。 まぁ画像切ってる人はCSSも切ってると思うけど。
冬厨が来ると話題がループするなぁ・・・
>>614 私は普段、画像オフだがCSSは有効だよ。だってIEだもん。
>>617 そこ、IEで閲覧できない。アクセシビリティーに配慮が無いな。
>>610 w3cとは仲良しなんだけど
音声ブラウザってのに出会ったことがない
俺の人生の中で唯一の処女だ(;´Д`)ハァハァ
>>614 altだけのヤツ多いけど
titleもセットにしてくれょ
と、、、もじらクンが昨日つぶやいてた
も〜じらクン さよな〜ら さよ〜〜なら も〜じらクン
CSSを勉強したいんですが、おすすめの本を教えてください
net上にたくさんあるが、本のほうがいいのかい?
CSS2.1とCSS2は違うだろ
>>624 ,626
WDなんて読んでも仕方ないだろ
WDはWesternDigitalの略称です
>>627 CSS2.0を部分的にでも実装してる現役の有名ブラウザはIEだけだろ。
まあ、どう見ても仕様に忠実じゃないが。
今時のブラウザは全部2.1を仕様にして実装されているし、
W3C本体がCSS2.0を仕様と見なさなくなって2年弱が経過した。
現在の仕様は、1.0, 2.1, 3.0 であり、勧告に達しているのは 1.0 だけだ。
要するに、2.0?はあ?いつの話してんだ?っつうことですよ。
つうかねえ、HTMLとCSSは簡単だからか、これらを扱うスレには
知識も関心も無い門外漢が気軽にしゃしゃり出てきて困る。
スレじゃない。板。 ばかおおい
WinXP+Opera8.5です。 <html> <head> <style type="text/css" media="all"> @import "css/common.css"; @import "css/home.css"; </style> </head> <body> <div id="sitelogo"> <h1>○○○○</h1> </div> </body> <<common.css>> * { margin: 0; padding: 0; border: 0; } div { display: block; } <<home.css>> #sitelogo { float: left;width: 780px;height: 250px; background: url(../img/site_logo.gif) top left no-repeat; } #sitelogo h1 { text-indent: -9999px; }
633 :
632 :2005/12/30(金) 00:15:25 ID:???
#sitelogoの内容を、common.cssに書いていたときはちゃんと 画像が表示されていたのですが、home.cssに移動したところ、 画像が表示されません。(IE、ネスケ、Firefoxでは大丈夫でした) なぜなのでしょうか?
634 :
632 :2005/12/30(金) 00:17:58 ID:???
(今日はもう寝ます)
>>632 なんで<style>@import</style>とかやってんの。
<link rel="stylesheet" type="text/css" href="common.css"
hreflang="ja" charset="Shift_jis" media="print, screen, projection">
<link rel="stylesheet" type="text/css" href="home.css"
hreflang="ja" charset="Shift_jis" media="print, screen, projection">
で、いいぢゃん。
-9999pxでリンクボタンつくってしまうと クリックした時に表示される点線がうにょ〜んと左に伸びるな。 さぁどうするfirefoxユーザー。
いや、べつにどうも……
>>637 つ【onfocus="this.blur()"】
初めからやり方わかりませーんって素直に質問しとけよ。
top:0; left:75%;
642 :
634 :2005/12/30(金) 09:03:15 ID:???
>635 参考にしたサイト(Fujitsu他)でインポートしていたからです。 <link></link>にしてcssファイルを読み込んでみましたが、状 況は変わりません。 #sitelogoの部分は、ページごとに画像を変えたいと思ってい るので、commoc.cssとは切り離したいのですが。。。 よろしくお願いします。
>>642 たぶんタイプミス
commoc.cssでピンと来た!!!!11
<div id="top"> <div id="main"> <div id="menu"> にする場合、 div#main {width:70%;float:left;} div#menu {width: 20%;} か、 div#main {width:70%;float:left;} div#menu {width: 20%;float:right;} のどちらにしたほうがいいでしょうか?
>>644 オナヌーは左手でしたほうが気持ちいいお。
>>641 右側のメニュー部分が
position: absolute;
top: 0;
left: 75%;
となっているがや.
>>645 float:rightは要らないってことですね。thx!
float:left;width:30%で左メニュー。 width:70%;で右の本文だと思うんですけど、 なぜ、そうでなくて、margin-left:31%なんでしょうか?
651 :
642 :2005/12/30(金) 09:31:50 ID:???
>642 ではタイプミスしましたが、検証しているhtmlファイルでは 間違えていないことを、今、再度確認しました。
floatを使うとその親要素が縦に潰れてしまうんですがそれを回避するにはどうすればいいんですか? clearはfloatをつけている親要素の弟要素に指定しても親要素そのものに指定しても 親要素が潰れてしまいます
質問はあげて。ソースを出して。
655 :
Name_Not_Found :2005/12/30(金) 10:11:36 ID:+i2W1lS7
>>654 thx! 見ました。でも、なぜ、
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html の、
div.contents { float: left; width: 30%; margin-top: 0;}
div.honbun { margin-left: 31%; } /*↑の横幅が30%ゆえに */
のdiv.honbunがwidth:70%とか65%ではないのでしょうか?
の疑問は解決しませんでした。
float:left;width:30%で左メニュー。
width:70%;で右の本文だと思うんですけど、
なぜ、そうでなくて、margin-left:31%なんでしょうか?
contentで生成される内容物の色を指定するにはどうすればいいのでしょうか contentを指定した要素にもともとかかれている文字の色は変えないで
だって回答者だもん。
回答者は間違ったときに下の沼の落下するような席で答えさせれば回答の質が上がるだろう
>>639 javascriptつかってなかった場合はどうする
>>637 =662
そもそもそんなこと気にするのがバカ
>>664 いやそれはいるだろ。
だけどフォーカスが伸びるくらいのことが何だっつの。
うふぉレス番号間違えた
がんばれってのはjavascriptをオフにしてる人がいないと思っている
>>664 な
勉強してね
>>662 outline:none;
IEは対応してないんだっけ?でも関係ないよなww
>>668 outlineがまったく見えないのも問題かと
>>669 問題だと思うが、637のように気にする人種にとってはそれが解決法なんだろう。
「気にするな」と言いたいが。
アクセスログを見るかぎりjavascriptオフってるのはアクセス全体の1.1%くらいいるが、cssオフはこれ以下だろうな。
float関係の質問多いな。
回答者がエライ ちょwwwwwwwwwwwwwwwww 氏ねよ ゴミサイトばっか作ってる糞プログラマー風の馬鹿のくせに 笑ってやったぞ 氏ねよ ヒキヲタ 糞プログラマー崩れがヽ(`Д´)ノ
狂っているのか?
676 :
651 :2005/12/30(金) 19:04:44 ID:???
>632-633 なのですが、わかる方いらっしゃいませんでしょうか ※@importではなく、<link>でスタイルシートを呼んでも 現状変わらず ※呼びだすスタイルシート名の間違いでもないです
俺のWinXP+Opera8.5環境では、表示できるよ。
678 :
671 :2005/12/30(金) 19:49:19 ID:???
>677 そうなんですか! レスおよび検証ありがとうございました。 だとすると、ますますわからなくなってきました。 common.cssに書けば画像は表示されるので、Operaで画像が 表示できないわけではないし、home.cssに書いた、他のidやclass 指定は正常に表示されているのです。。。 (Operaはインストールして設定はいじっていません) (OSの再起動は何回かしています)
どうでもいいけど、divにdisplay:block; とか、無意味なことやってんな。
>>632
commonにどんな意味があっても、無意味に変りないけどな。 どうせやるなら H1,H2,H3,H4,H5,H6,P,UL,OL,DIR,MENU,DIV,DT,DD,ADDRESS,BLOCKQUOTE,PRE {display:block;} 位はしろ。デフォルト・スタイルシートの真似。
>>632 は、そもそもtext-indent: -9999px;が無意味。
<h1><img src="./img/site_logo.gif" alt="題名"></h1>で済むはず。
意味を考えてから無意味かどうか判断しな
>>682 img使いたくないからtext-indentやってんだろ
無意味じゃない
Webサイト制作初心者用質問スレ Part 150 でも同じ事でもめとるな。
んなことやったところで中身がクソじゃ誰も見ないんだけどな。 目先のことに惑わされんなよ・・・
687 :
678 :2005/12/30(金) 21:18:53 ID:???
>681 ここに書いたのはサンプル文なので、div以外の指定は 省きました。 >682 は、>684さんのいうとおりです。 ↑ cssで画像を指定すれば、htmlの方は違うページになっ てもタグをそのまま使えるかなと思ったので。
ならせめて、position:relative;とかmarginとかにしておけ。
>>687
>>687 サンプル文でもdiv {display:block;}は無用ですから。残念。
冬休みだと楽しいですね。
>>690 Web板に毎日のように立つ単発質問スレを何とかしてくれ。
おらにはどーにもできねえだよ。
普通にやればできるよね 習慣だよね
<h1>hoge</h1> h1 {color:blue;} h1:after {content:"mage";color:red;} hogeは青、mageは赤になるっしょ。 こーゆーことじゃなくて?
>>697 普通にできました。ありがとうございます
>>681 HTML相手に余計なことしてんじゃねえよ、と。
自分より弱い優先順位のCSS (例えば、UAのデフォルトCSS) を詳しく把握して、
必要な所だけを最小の詳細度で上書きする形にするのが理想だろう。
ああ、あと、outline: none; みたいなのは、実装依存だから、正しいやり方ではないよ、一応。 見れば判ると思うが、決して outline の位置じゃないから、あの点線は。 そして、outline の位置にあったとしても、それが CSSでどうこう出来るかどうかは別の話。 つまり、どうあがいても実装依存だから。
横にびょ〜ん自体が実装に依存した話だったのに何を言ってるんだか
>>699 未知のUAに対応したいときはどうするの?
705 :
Name_Not_Found :2006/01/01(日) 14:09:37 ID:si69Y7GO
明けましておめでとうございます。新年早々長文の質問ですみません。 HTML4.01 Strictで、 <body> <div id="MAIN"> <div id="MENU"> <ul><li><a href="aaa/">aaa</a></li> <li><a href="bbb/">bbb</a></li> <li><a href="ccc/">ccc</a></li> </ul> </div> </div> </body> #MAIN { overflow: auto; height: 300px; width: 500px; margin: -150px 0px 0px -250px; position: absolute; top: 50%; left: 50%; } として画面の真ん中に疑似フレームを配置して、 #MENU { height: 300px; width: 500px; position: fixed; top: 0px; left: 0px; } このように、疑似フレームの外にdivを表示させたいのですが、 表示できたのはwinFF1.5のみで、fixedに対応していないIE6は無論、 NN7もOpera8も表示されません。 z-indexも指定してみたのですが、結果は変わらぬまま。 親要素の外に子要素を表示することは出来ないのでしょうか? ご教示願います…
多分IEだったらfixedじゃなくてabsolueにすればOK。 Operaはやばかった希ガス。 N7はFxと同じでよかったはずだが・・・
>706 ありがとうございます。 しかしabsoluteだと、div#MAINの"中"に表示されてしまい、 試しにマイナス値を指定してみると、画面上から消えてしまいます。 どうやら親要素からはみ出ると、消えてしまうようです。 かといってdiv#MAINにoverflow: visible;を指定すると、 疑似フレームそのものが解除されてしまいます。
リストなどを横並びにさせるには float:left;などで流し込むか position:absolute;で絶対指定か display:inline;を使うか どれが一番スマートでおしゃれでかっこいいですか?
display: inline;
display:inline
711 :
708 :2006/01/01(日) 19:58:14 ID:???
>>709-710 お正月にレスどうもありがとうございます
それを踏まえて
<dl>
<dt>a-1</dt><dd>a-2</dd>
<dt>b-1</dt><dd>b-2</dd>
<dt>c-1</dt><dd>c-2</dd>
</dl>
これを
a-1 a-2
b-1 b-2
c-1 c-2
と表示させるにはどうすればいいですか?
すべてのdt、ddにdisplay:inline;を適用させると
a-1 a-2 b-1 b-2 c-1 c-2
と表示されてしまいます
検索すると
dd:after {content:"\A";}
で要素の後に改行が入るらしいのですが
firefox1.5ではうまく反映されませんでした
IEはcontentプロパティには対応していないそうなのでそもそも効果がありません
playboy: you;
713 :
708 :2006/01/01(日) 20:02:21 ID:???
>>711 に追記です
compact="compact"と同じような効果を得たいのですが
上記の方法は使いたくありません
>>714 絶対指定はスマートでおしゃれでかっこいいとは思えないんですが
もっともスマートでおしゃれでかっこいいと教えていただいた
display:inline;を使って実現したいのですが無理ですか?
>>715 スマートでおしゃれでかっこいい方法を探る前に、仕様を理解しろ、な?
>もっともスマートでおしゃれでかっこいい 鏡見ようぜ
>>718 漏れ自身の外見はスマートでおしゃれでかっこよくはありません
すでに何度も鏡を見て悟りました
そして今求めているのはスマートでおしゃれでかっこいい漏れではありません
>>716 仕様書にはなんて書いてあるんでしょうか?
リストなどにはdisplay:inline;を使ってはいけないんでしょうか?
ということは
>>709-710 は漏れにうそを教えたと言うことですか?
>>719 >すべてのdt、ddにdisplay:inline;を適用させると
>a-1 a-2 b-1 b-2 c-1 c-2
>と表示されてしまいます
少なくともdisplay:inlineの仕様を理解している人間は、
そのような表示されて「あたりまえ」と思う。
>リストなどを横並びにさせるには
ちゃんと横並びになっているだろう?
>a-1 a-2
>b-1 b-2
>c-1 c-2
改行させたいなどとおまえは一言も言わなかった。
もう一度聞き直す前に調べ直せ。
新しい質問でっス!!
漏れは
>>708 ではありませんヌ!
横並びにさせるのにもっともスマートでおしゃれでかっこいいらしいdisplay:inline;を使って
<dl>
<dt>a-1</dt><dd>a-2</dd>
<dt>b-1</dt><dd>b-2</dd>
<dt>c-1</dt><dd>c-2</dd>
</dl>
を
a-1 a-2
b-1 b-2
c-1 c-2
と表示させるにはどうすればいいですかア?
うへあ
>>720 ああその個所ですか。それでは
>>711 を書き直しますね
>>709-710 お正月にレスどうもありがとうございます
それを踏まえて
<dl>
<dt>a-1</dt><dd>a-2</dd>
<dt>b-1</dt><dd>b-2</dd>
<dt>c-1</dt><dd>c-2</dd>
</dl>
これを
a-1 a-2
b-1 b-2
c-1 c-2
と表示させるにはどうすればいいですか?
すべてのdt、ddにdisplay:inline;を適用させると
a-1 a-2 b-1 b-2 c-1 c-2
と表示されてしまいます
当然これは仕様書どおりなので仕方がないのですがこれをなんとかdisplay:inline;を使って
a-1 a-2
b-1 b-2
c-1 c-2
と表示させるにはどうすればいいですか?
>>723 dt{
float:left;
clear: both;
width: 100px;}
dd{
margin-left: 2em;}
質問者もアレだけど回答者もバカだな. 有無をも言わせないほどの確実な回答をすればアレな質問者はすぐにいなくなるのに. そういう俺は質問者兼回答者.アレな上にバカ.
>>723 フロート使わないやり方もあるけど、
あとは、自分で調べてみ。
結構簡単。
こいつはフロート使わないやり方だけじゃなく、 絶対配置やマージンに負の数値を使うやり方もスマートじゃないと言うだろう。
つ 鏡
<select name="select"> <optgroup label="Internet Explorer"> <option value="ie4">Internet Explorer 4</option> <option value="ie5">Internet Explorer 5</option> <option value="ie5_5">Internet Explorer 5.5</option> <option value="ie6">Internet Explorer 6</option> </optgroup> <optgroup label="Netscape"> <option value="n_scape4">Netscape Navigator 4</option> <option value="n_scape6">Netscape 6</option> </optgroup> </select> optgroupのlabelによって表示されるテキストを 装飾するにはどうすれば良いのでしょうか? ご教示ください。
バグの問題だったのか?
バグってより非対応でしょ。まあ確かに斜体になるのは止してほしいが。
いやだって色とかはつくじゃん。 非対応なのは一部なのに、730の質問はそういう質問か?
735 :
Name_Not_Found :2006/01/03(火) 12:38:55 ID:7RzGrNRa
「optgroupのlabelによって表示されるテキスト」だけに適用させるセレクタは 設定できないでしょ。その意味で非対応なんだよ。
737 :
Name_Not_Found :2006/01/03(火) 17:48:01 ID:EFkndTgS
<ul> <li>Yahoo</li> <li>Google</li> </ul> とすると * Yahoo * Google というように左と中がだいぶ空いてしまいます(特にFireFox)。 これを *Yahoo *Google とコンパクトに表示する方法はありますでしょうか?
>>731 は参考情報。実際、select関係で装飾できないとか言ってるのは大抵それ。
>>738 insetってborder-style:inset;ってこと?
ボーダがないと動かなくない?
742 :
741 :2006/01/03(火) 18:53:39 ID:???
あ、たぶんinsetは誤記だろうと思ったんだが、738の意図は違うかも。
>>743 はinsetとinsideを勘違いしてる悪寒
745 :
737 :2006/01/03(火) 19:35:08 ID:EFkndTgS
list-style-position:outsideで左がつめて表示されるようになりました! マーカーと文字の間をつめる方法はありますでしょうか?
>>745 marginとpadding(ブラウザによって違う)
>>737 リストスタイルをなしにして
*って自分で入れる
749 :
Name_Not_Found :2006/01/05(木) 11:15:03 ID:Ub+J0YSN
特にmediaオプション等指定していないのですが 印刷(プレビュー含)時にスタイルシートが適応されません。 なにかしないといけないのでしょうか? それともおかしいのでしょうか? ブラウザはIE6使っています、宜しくお願いします。
751 :
749 :2006/01/05(木) 11:46:06 ID:Ub+J0YSN
>>750 ありがとうございます。
しかしちょっとこれとは違うみたいです。
背景画像ではなくてスタイルシートの定義内容全部というか
例えばテーブルの色ですとかそういうのが印刷時に無効になってしまうのです。
普通は何もしなくても適応されるものなんでしょうか??
752 :
Name_Not_Found :2006/01/05(木) 11:52:50 ID:nMYGXIah
754 :
Name_Not_Found :2006/01/05(木) 12:21:49 ID:nMYGXIah
>>751 それは例えば背景色が全部黒で白字なんてページを考えてみ。
印刷やってらんねーよとプリンタが文句言いそうな量になるだろ。
背景色はcssじゃなくても普通のプリンタだと付かないよ。
>>754 スレ違いだとわかったんならここで聞かないでください。
757 :
Name_Not_Found :2006/01/05(木) 12:30:24 ID:nMYGXIah
759 :
Name_Not_Found :2006/01/05(木) 12:39:38 ID:nMYGXIah
あなたの知りたいことをテキストボックスに入力。
761 :
749 :2006/01/05(木) 12:57:10 ID:Ub+J0YSN
>>755 そうでしたか。
あほな質問どうもすみませんでした。
>>749 「ツール」メニュー→インターネットオプション→詳細設定
→1番下の、背景の色とイメージを印刷する、にチェック
765 :
763 :2006/01/05(木) 13:49:05 ID:???
>>764 そうは思ったけど、IEで背景が印刷されないとなると、これが真っ先に思いついたもので。
案外知らない人多いし。
プリンタ依存で背景が飛ぶなら、1度PDF化してから印刷すると良いと思われ。
フリーのPDFツールもあることだし。
そもそも自分トコで印刷したいという質問だったのか? 閲覧者全員に、という質問ではないのか?
767 :
749 :2006/01/05(木) 14:22:07 ID:Ub+J0YSN
>>765 どうも有難う御座いました。IEの設定でOKでした。
まさにやりたいことがこれだったので勉強になりました。
>>766 一応今回は自分とこでできればOKです。
ちなみ閲覧者がするとなれば各PCで同じ設定しなければいけないということですね。
ご迷惑おかけしました。
>>766 >>749 は、IE6を使っている、と言っているので、自分トコでと推測。
本人に出てきてもらうのが手っ取り早いけど、もう見てないのかなぁ。
ぉ、かぶった。解決できたようでよござんした。
color: #fff; を指定してる場合アウト !?
白いインクで印刷できるプリンタって一般にあるだろうか
>>770 「ツール」メニュー→インターネットオプション→詳細設定
→1番下の、背景の色とイメージを印刷する、にチェック
>>771 そういう意味ではなくて、背景色を印刷しないで
白い文字を印刷すると読めないよね?
>白いインクで印刷できるプリンタって一般にあるだろうか
試しに白い文字に背景(黒)色を付けて印刷してごらん。
>>772 ('・c_・` )イミネ
あ、そうか。 印刷用のCSS作って背景色は白、文字色を黒にすれば… 解決じゃん。
モニターでも、白ヌキ文字なんか読みにくいから、やめておけ。
>>776 見出しとかで、背景画像が黒っぽくて
文字を白くてしる。\何か?
見出しは別だな。 でも本文で白文字は困る、特にCRTディスプレイだと。Ctrl+Aってか?
プログラマにゃ黒地に白字が多いし、長時間見てる分には 白地に黒字よりも優しいと思われ。
可読性が低くなる閲覧環境が多いのを承知でどうしても黒地に白にしたいなら、 せめてfont-sizeは大きめに、そしてfont-weightも太目に設定すべし。
眼の錯覚で有名な格子。ハーマン・グリッド現象ってものよ。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ チカチカするでしょ? 白十字の真ん中に黒い霞が掛かって見えるっしょ。 これが黒地に白文字状態なんですよ。日本語は四角い漢字が多いから猶更。
2ちゃんねるの配色が最強。
>>780 大きめにっつーかどう足掻いたって文字サイズ指定は可読性が悪くなる罠
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ ・・・・いやこれもチカチカするって。色というか図形の問題のような。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋ ╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋ ╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋ ╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋ ╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋
どれもこれも目がちらちら
真っ白に真っ黒というのはコントラストがきつ過ぎる 白地に黒字、黒地に白字はどっちも白がまぶしいので 灰色寄りの色を使うなどしてマイルドにして欲しいところ
個人的には灰色地に黒字が一番いい。 次は黒地に白字かな。 PGはやっぱそういう香具師が多い。
2ちゃんねるの配色が最強
791 :
Name_Not_Found :2006/01/05(木) 20:30:27 ID:5j1cIM8d
li{ height: 50px; list-style: none; } liの中の文字を縦中央に配置したいんですが、どうすればいいですか。 vertical-alignを指定したのですが駄目でした。
794 :
791 :2006/01/06(金) 08:29:49 ID:???
ありがとうございます。 無事解決致しました。 ありがとうございました。
とあるサイトのソースを見てみたら下記の様に3つの書き方で 記述されていました。 これはどういうことなのでしょうか? div#localNavMenu ul li a:hover{ background:url(../img/common/submenu_arrow_on.gif) no-repeat 8px 8px; background-color:#eeeeff; width:188px; } * html div#localNavMenu ul li a:hover{ width:163px; } html[xmlns] div#localNavMenu ul li a:hover{ width:163px; }
797 :
Name_Not_Found :2006/01/06(金) 23:11:29 ID:CsPgVrgw
CSSを使ってデザインする現在のスタイルでは 1pixelサイズの透明GIFを使ってデザインを調整するやり方は もしかして邪道で排除すべきテクニックなんでしょうか?
>>797 当然です。
つ paddingプロパティ
799 :
795 :2006/01/06(金) 23:23:42 ID:???
>>796 ボックスの解釈バグ回避なんですね。
width:188px がIE5*で
width:163px はその他、正しく理解するブラウザってことでいいのでしょうか?
800 :
Name_Not_Found :2006/01/06(金) 23:43:48 ID:CsPgVrgw
>>798 昨日納品したホムペにも使いまくってた・・・orz
「ホムペ」と言ってる時点で
ホムーペジ
ほーむぺーじ
たうんぺーじ?
805 :
795 :2006/01/07(土) 04:21:00 ID:???
誰かレス下さい。。。
ぺーいち兄さん?
808 :
381 :2006/01/07(土) 10:26:04 ID:???
>>808 新規の質問はあげて。
caption {padding-bottom:0.5em;}
caption strong {border-bottom:1px solid #000;}/* text-decoration:underline; でも可。*/
<caption><strong>キャプション</strong></caption>
>>808 俺も同じ事で悩んでたんだが、IEだと対象のテーブルが
border-collapse:separate;
でないと、ボーダーがテーブルと重なってしまうので見えないね。
画像で無理やり下線ひいて、パディングで調整したりしたよ。
811 :
810 :2006/01/07(土) 16:25:09 ID:???
連投すまん。 ちなみにその背景画像は、 caption { background:url('画像') repeat-x bottom; padding-bottom:5px; /*表本体との間隔*/ } 画像は下部に表本体との間隔をいれた透過GIFです。 HTML書き直したくない時などいいかなと。 でも809のやり方も結構いいね。俺もそうしようかな。
812 :
Name_Not_Found :2006/01/07(土) 19:38:00 ID:XIApPvfm
質問です、一応最初だけageさせていただきます。 クラス属性の値を複数記述する用法があるかと思うのですが、例えば以下のように、 div.sample1 { color: #f00; } div.sample2 { font-weight: bold; } <div class="class1">この中は赤色になる。</div> <div class="class2">この中は太字になる。</div> <div class="class1 class2">この中は赤色かつ太字になる。</div> で、さらに、class1とclass2が両方指定されている場合のみ追加でスタイルを指定したい場合、 div.sample1.sample2 { border: 1px solid #f00; } と書けば、<div class="class1 class2">〜</div>のみ、ボーダーが表示されるはずですよね。 というか、私はそう把握しているのですが、まず、この認識で間違いはないでしょうか? 実際にいくつかのブラウザで確認してみたところ、WinのIE5.0、5.5、6.0では、 <div class="class1 class2">〜</div>だけでなく、<div class="class2">〜</div>にも、 ボーダーが表示されてしまいました。 これは、私の認識が何かおかしいのか、それとも、IEが、 div.sample1.sample2 { border: 1px solid #f00; } を、div.sample2とも解釈して勝手にそちらにも適用させてしまっているのか、 そこがちょっと解らずに悩んでいます。 どなたかご回答いただけますと助かります、恐縮ですが宜しくお願いします。
813 :
812 :2006/01/07(土) 19:41:36 ID:???
すみません、
>>812 の書き込みですが、微妙に記述がぐちゃぐちゃでした。
クラス名が、sample1だったりclass1だったり混ざっていますが、
ただの記述ミスですので、どちらかに脳内統一してご覧になってください。
申し訳ないです。。。
>>814 >>812 です。認識の方が間違いとのこと、お恥ずかしい。
URLどうもありがとうございます。
そちらのページで勉強しなおしてきます。
816 :
812 :2006/01/07(土) 20:49:44 ID:XIApPvfm
>>814 さん
WinIE6以下がcss2の「E.class1.class2」の用法に未対応のUAであるということまでは確認できました。
用法も、提示いただいたページのクラスセレクタの項目については目を通しました。
で、ちょっと確認なのですが、
>>812 の前半「まず、この認識で間違いはないでしょうか?」までの範囲で、
(
>>813 に書いたとおりクラス名の記述がぐちゃぐちゃで恐縮なのですが)
まだ私の理解不足というか認識不足な点というのがあったりするのでしょうか?
変な質問になってしまって申し訳ないのですが、ご指摘を齟齬無く理解できているかどうかが不安で。
>>816 あ、ごめん、「まず、この認識で間違いはないでしょうか?」までは合ってる。
IEの認識の話で。
818 :
812 :2006/01/07(土) 21:18:59 ID:XIApPvfm
>>817 >>812 です。了解しました。
もう少しきちんと勉強してみます、ありがとうございました。
819 :
Name_Not_Found :2006/01/08(日) 00:09:58 ID:1sXWUlbq
サイズが決まっているボックスの中に文章を書いて、その左下隅にぴったりとフッタを配置したいのですが、下のようにやっても文章のすぐ下に配置されてしまいます。positionをabsoluteにしたりいろいろ試しましたがわかりませんでした。 初歩的な質問かもしれませんが、解決策をよろしくお願いします。 <div style="width:200px;height:100px;border:1px solid green;">文章<div style="position:relative;bottom:0px;right:0px;">フッタ</div></div>
>>809 ありがとうございます。その方法でやってみます。
>>810 そういうやりかたもありますね。参考になりました。ありがとうございます。
822 :
Name_Not_Found :2006/01/08(日) 10:44:17 ID:1sXWUlbq
>>820 ありがとうございました。
決して簡単なことではないのですね。
テーブル不使用CSSのみで、画像ファイルを使った枠を、ほとんどのブラウザで破綻することなく表示させることは 現在可能なのでしょうか?
僕のIEは画像は非表示にしてます。
825 :
Name_Not_Found :2006/01/08(日) 14:47:38 ID:fpPT0mbY
文字サイズの指定にpxを使ってました。 そこでemか%にしようと思うんですが、 emの「文字の高さ」っていうのはどのサイズの文字が基準になってるんですか? 同様に%はどの大きさの文字に対する比率なんですか?
emはmだしexはx。仕様書読みなさい。
>>2 にあるでしょ。
828 :
Name_Not_Found :2006/01/08(日) 15:05:44 ID:fpPT0mbY
>>826 >>827 ありがとうございます。
それで親要素のフォントサイズに相対するっていうのはわかったんですが、
親要素でフォントサイズを指定していなかった場合はどうなるのでしょうか。
自分で調べる気は無いのかね?ヘルペス君
body {font-size:100%;} でよし。
> 100% 同様に%はどの大きさの文字に対する比率なんですか?
>>835 なるほど。参考になりました、ありがとうございます。
838 :
Name_Not_Found :2006/01/09(月) 00:24:22 ID:PDdZh3cD
質問です。 環境 OS WindowsXP SP2 ブラウザ IE6 OSの画面のデザインの設定 WindowsXPStyle で、例えば、 <html> <head> <style> .aaa{ background-color : red; } </style> </head> <body> <input type="checkbox" value="checkbox1"/> <input type="checkbox" class="aaa" value="checkbox1"/> </body> </html> のように、チェックボックスの背景色を指定すると、 背景色を指定した側のチェックボックスのデザインが WindowsXPStyleでなくなってしまいます。 回避方法はないのでしょうか。
840 :
838 :2006/01/09(月) 00:58:30 ID:PDdZh3cD
>>839 ありがとうございます。
あきらめました。
841 :
Name_Not_Found :2006/01/09(月) 01:14:03 ID:UGUvcZil
844 :
Name_Not_Found :2006/01/09(月) 05:18:53 ID:opXhZcyg
cite:before { content: "引用元:" } の、 content: "引用元:" の最後には、「;」が要りますか? jigsaw.w3.org/ でチェックしてもエラーにならないんですけど、どうなんでしょうか?
845 :
Name_Not_Found :2006/01/09(月) 05:50:04 ID:opXhZcyg
「」はCSSで実現したほうがいいでしょうか?
aaa { bbb: ccc; ddd: eee; fff: ggg /*←最後のやつは「;」がなくてもいい*/ }
847 :
Name_Not_Found :2006/01/09(月) 07:13:32 ID:opXhZcyg
>>846 thx!!!!!
本当にありがとうございます!
ずっと疑問だったんです!
thx!
848 :
Name_Not_Found :2006/01/09(月) 07:17:40 ID:EAHLoxU4
あるブロック要素に高さをpxで指定して さらにその中の文字をその要素内の最下部に配置したいんですが どうすればいいんでしょうか? html部分はたとえばこんな感じです <hn>文字列</hn> vertical-alignはインライン要素とテーブルセル要素にしか使えない(効かない)みたいで またpaddingを指定してtopに大きな値bottomに小さい値をとると当然のことながら その要素の高さがheightで指定した値ではなくなってしまいます よろしくお願いします
>>845 「」に意味がある小説の会話文なんかは書いたほうがいい。
「」が強調するための引用文の全部だったらCSSで実現したほうがいい。
↑と言いつつここらへんは人によって感覚が違うので適宜ヨロ。
というかStrictスレのほうがお似合い。
>>848 簡単なのはline-heightでの調節。
もっとも正確にやりたいんだったら
>>820 のようなdiv入れ子。
850 :
Name_Not_Found :2006/01/09(月) 11:27:01 ID:+IgFL2hz
あsdfghjkぁ;あ
>>849 line-heightは文字の上下が同じ広さになるんじゃない?
>>851 その上の幅がボックスの幅になれば下に置かれることになる。
853 :
Name_Not_Found :2006/01/10(火) 13:09:40 ID:GCV8rmWr
すみません。 CSSの印刷まわりの部分を勉強したいのですが わかりやすいサイト等どこかありませんでしょうか?
<link rel="alternate" media="print" title="PDF" href="〜.pdf" /> で印刷用代替のPDFを提供するといいよ などとCSSスレで言ってみる
856 :
Name_Not_Found :2006/01/10(火) 14:14:39 ID:gTIvlsCK
<input name="imageField" type="image" src="" class="submit">とかのボタンをカーソルが乗っかった時に1pxずらしたいのですが、WindowsIEでこれを実現する方法はありますか? JavaScriptではなく、CSSで実現させたいです。 .submit:hover{ position:relative; top:1px; left:1px; } これで、Firefox/Safariは動きます。
激しく迷惑なボタンだな・・・
858 :
853 :2006/01/10(火) 17:08:24 ID:GCV8rmWr
859 :
Name_Not_Found :2006/01/11(水) 14:37:59 ID:OpSDq/4C
floatを使ってbox1の右にbox2を配置し、 box1のwidthの値に150pxを指定した時… box2のwidthをウィンドウサイズ-150px(box1の値)とする… なんて事、できるのでしょうか? 最小ウィンドウサイズに640*480を想定していて、 box1=150px box2=75% としているのですが、フレームの様に値*みたいにできないものかと…。
>>859 JSでウィンドウサイズを取得してCSS出力。
DHTMLの分野になるな。
まあそれ以前に、右のボックスにwidthを指定しなければいいだけの話という気がしないでもない。
>>859 に便乗ですけど
widthなどの数値を
100%-200px
とか
10em+100px
って指定したいときが多々あるんですけどやっぱり無理なんでしょうか
つーかそういう指定を多々やりたいって時点で何かCSSデザインの根本を間違えてる気が・・・。 素直にテーブルレイアウトかフレームでいいじゃん。 できないことをムリにやろうとする必要はない。できるものでできることをするべき。
テーブルレイアウトかフレームかじゃなくて すべてpx指定の非リキッドデザインにするしかないな
非リキッドは質問者の希望じゃないだろ。 それで代用できると考えを変えるんならそれでもいいがね。
867 :
初心者です :2006/01/11(水) 15:32:00 ID:r8g4C+T8
htmlでhpを作っていて tableタグを使っているのですが <td> </td>の 入力のフォントのサイズを <tr> </tr>の中 で一括でサイズ変更したいのですが 何か方法ありますか?
tr { font-family : "Times New Roman"; font-style : italic; font-weight : bold; font-size : x-small; color : #c9bac9; } こんな感じ 詳しくは勉強してね。
むこうで礼も言わなかった「初心者」と名乗る香具師を相手にする
>>868 に萌え。
>>867 こんなふうに書くんだよん
属性値は自分の好みに変えて・・・
ブラウザで見れば表示されるよ
<head>
*
*
*
*
<style type="text/css">
<!--
tr {
font-family : "Times New Roman";
font-style : italic;
font-weight : bold;
font-size : x-small;
color : #c9bac9;
}
-->
</style>
</head>
<body>
むしろ萎え。 クレクレ厨増やしてどーすんだよ・・・
冬厨早期撲滅対策
aaa.cssから@importでbbb.cssを呼び出した場合で もし同じ要素に同じプロパティを指定していてその値が異なっていた場合 どちらが優先されるのでしょうか? 検索したら > インポートされたスタイルシートは > 他のすべての規則より先行する位置に書かれているものとして扱う。 とあったのですがこれは優先度が高いという意味でしょうか? つまりaaa.cssで指定したものよりもbbb.cssで指定したものが反映されるってことでしょうか?
>>873 に追記ですが
aaa.cssからbbb.cssとccc.cssを
@import url(bbb.css);
@import url(ccc.css);
という順番で呼び出した場合で
bbb.cssとccc.cssに同じ要素の同じプロパティに違う値を指定していた場合は
どちらが優先されるのでしょうか?
・・・・試してから聞いてるんだよな?もちろん。
>>875 あ、すみません、
>>873 のパターンでは
IEでもfirefoxでもaaa.cssのほうが優先されていました。
だから検索して出てきたものに書かれてる意味はどういう意味なのかなーっと
>>875 >先行する位置に書かれているものとして扱う
これは優先する、という意味ではない。
同ファイル内でも先行のプロパティ値を後続のプロパティが書き換えたら、
あとで指定したほうに置き換えられる。
だから
>>874 のパタンでもccc.cssのほうで書き換えられる。
>>877 @importの部分にその指定したcssが代入されると考えれば委員ですね
やっと理解できました
ありがとうございます
p要素などをうまい具合に中央に表示したいのですが、なかなかうまくいきません これはmarginで指定するのでしょうか?
マッチポンプ?
言葉が乱れている。
>>874 > 同じ要素
同じセレクタ
>>877 > 書き換え
この種の話題では、書き換えという言葉と上書きという言葉を適切に使い分けなければならない。
body { margin: 0; }
body { margin: 1%; }
後の規則がスクリプトで削除された場合、先の規則が適用される(適用可能ならば)。
こういうのは、書き換えとは言わない。
優先されなかった規則も残っている。
上書きと言うのが最も相応しい。
仕様にも、rewrite とは書かれていない。override と書かれている。
はいはいわろすわろす
cssで以下のような表示をしたいのですがどうすればよいのでしょうか? <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR><TD height="50" bgcolor="black"></TD></TR> <TR><TD height="100%"></TD></TR> <TR><TD height="20" bgcolor="black"></TD></TR> </TABLE> 試しに、 <DIV style="height:50px;background-color:black;"></DIV> <DIV style="height:100%;"></DIV> <DIV style="height:20px;background-color:black;"></DIV> としたところ、100%が画面のサイズとなってしまってできませんでした。 50と20は固定幅にしたいので%に変更する以外で出来るのであれば方法を教えてください
>>884 ???
テーブルもdivもIE/Firefox共に同じに表示されるんだけど。
100%が画面のサイズにならないって状況がわからん。
886 :
884 :2006/01/12(木) 17:40:28 ID:???
>>885 自分が使っているIE6SP2/Firefoxでは
TABLEだと画面をはみ出さずに、上部と下部に背景が黒い部分が出来ます。
DIVだと上部の背景黒は見えますが、下部の背景黒はスクロールしなければいけません。
TABLEの100%は画面の高さ。
TDの100%は固定されていない余白(TABLEの100%から上部と下部を除いた)高さ。
↑これをCSSでやりたいのですが・・・。
ああゴメン、Strictでやってたからテーブルのほうもheight効いてなかっただけだ。
>>819-820
888 :
884 :2006/01/12(木) 20:01:37 ID:???
>>887 ありがとうございます。
参考にしてやってみたところ上と下は固定されたのですが、
overflow:auto;をつける場所が全体だけになってしまいましたorz
先ほどのやつで真ん中の100%だけをscrollさせるにはどうすればいいのでしょうか?
フレームは使いたくないのでわかる方教えてください。
・・・翻訳キボンヌ
>>888 > overflow:auto;をつける場所が全体だけになってしまいましたorz
この部分の意味が分からないけど、真ん中が
<div style="height:100%; overflow:auto;"></div>
ではダメってことかな?
高さが大きすぎると文書全体にスクロールが必要になる可能性もあるけど。
891 :
884 :2006/01/12(木) 21:45:41 ID:???
最初の書き方が悪かったですねorz 仕切りなおさせてください・・・。 <frameset rows="50, 1*, 20" cols="1*"> <frame name="banner" scrolling="no"> <frame name="header" scrolling="auto"> ←ここだけスクロール表示(CSSで2分割中) <frame name="detail" scrolling="no"> </frameset> を1つのページでやりたいのでCSSでやるにはどうすればいいのでしょうか? 50pxと20pxの部分は1行の文字(タイトルと権利系のメニュー及び著作権表示)です。
892 :
884 :2006/01/12(木) 21:49:04 ID:???
追記。 1行の文字はcssにするために、画像に変更しました。 もし、文字のままでいけるならありがたいかもです。 さっき、TABLEで例を出したのはTABLEデザインをしようとしていたからです・・・。
日本の著作権は自動発生だから付けるのやめたら。 フレームよりウザイぞそれ。
894 :
884 :2006/01/12(木) 22:18:59 ID:???
>>893 Copyright (ry. 使用条件 個人情報について
横にリンクもついてます。(MSのサイト風)
896 :
890 :2006/01/12(木) 23:09:26 ID:???
>>891 overflowを使う時は、高さを固定しないとダメっぽいね。
JavaScriptを使えば、ウィンドウサイズにきっちり合わせられるかもしれないけど。
<div style="height:50px;">HEADER</div>
<div style="overflow:auto; height:40em;">
<p>C</p><p>O</p><p>N</p><p>T</p><p>E</p><p>N</p><p>T</p>
<p>C</p><p>O</p><p>N</p><p>T</p><p>E</p><p>N</p><p>T</p>
<p>C</p><p>O</p><p>N</p><p>T</p><p>E</p><p>N</p><p>T</p>
</div>
<div style="height:20px;">FOOTER</div>
897 :
884 :2006/01/12(木) 23:47:33 ID:???
>>896 そのページはJavaScriptも使っているので一時的にそっちも試してみたいと思います。
JavaScriptに対応していないブラウザは暫くは放置かな・・・。
できる腕がないんだったら素直にフレーム使っとけや・・・
無視汁。 まあ再利用してもいいけどまだ早過ぎ。
903 :
Name_Not_Found :2006/01/13(金) 04:28:25 ID:OqRJzN5I
質問させて下さい。 CSS(外部呼び出し)で行間を230%で指定し、文章にルビをふると ルビをふった行とその上の行の行間が開いてしまいます。 IE5?W98での確認ですが、一度他の質問板にて ruby{margin-right: 1px;} rt{vertical-align: bottom;} と入れる事で行間が一部広くなるという問題は解決致しました。 が、これを記述すると今度はルビ文字が(右に1ptのスペースがあるせいだと 思うのですが)ずれてしまいます。 解決法はありますでしょうか? 宜しくお願い致します。
>行間を230%で指定し 行間、広すぎ。でも、それだけ行間があれば、ルビも含められるのでは? 元の質問では「行間を110%と「%」で設定し」とあるが。
906 :
Name_Not_Found :2006/01/13(金) 15:13:00 ID:jTRqsxUc
質問です。 <body> <h1>このページのタイトル「ほげー」</h1> <p>ほげほげほげほげほげほげ。ほげほげほげほげほげほげ。</p> <p>ほげーほげーほげーほげーほげーほげー。</p> (以下、<p>がずっと続く) </body> 上記のように、文章量が多くて印刷すると数ページにまたがるというボリュームのページで、 印刷時にh1の部分がどの用紙の頭に必ず入るというようなことはCSSでできるのでしょうか。 よろしくお願いします。
(´;ω;`)ふざけてないです
なるほど替え玉って意味ね。 ではとりあえずhogeときますね。
911 :
906 :2006/01/13(金) 15:55:09 ID:???
すみません、例として「ほげ」を使用しました。 申し訳ありません。あと、909は私ではありません。
>>906 プリントメディアのCSSでh1をposition:fixed。
913 :
906 :2006/01/13(金) 19:07:52 ID:???
>>912 お答えありがとうございます。
早速試してみたところ、IE以外(NN7.1、Opera8、Firefox1)では狙い通りになりました。
Winでしか確認してないんですけど…。
position:fixedというのは、IEは対応してないんですね。ビックリしました。
IEを切り捨てるわけにもいかないので、「長いページ」という構成そのものを考え直すか
h1を各ページに印刷するのを諦めるか、しないといけないみたいですね…orz
お答えいただいて本当にありがとうございました。
h1を画像化し、それを背景画像にすれば? background-attachment:fixed;で。
>>913 印刷のほうが大事なんだったら、
HTMLじゃなくてPDFでやるのが一番現実的。
916 :
Name_Not_Found :2006/01/13(金) 19:52:50 ID:jcxTxPP3
position:fixedをoverflowによる疑似フレームで再現しても、 印刷時にはうまくゆかないんだっけ?
プリンタの設定によると思うけど 普通<title>属性が書類のheaderかfooterに付かない? <title>きっちりしておけば良くない? プリント書類にヘッダフッタ入れるのも、通し番号入れるのも ユーザーに任せて欲しい。
918 :
Name_Not_Found :2006/01/13(金) 23:17:04 ID:bKuKrTUt
インラインでホバーならアンダーラインしたい。 <a href="" style=text-decoration:none;a:hover:text-decoration:underline>xx</a> 教えて。えらい人。
>>918 htmlに直接記述する場合はjavascriptを使うしかないんじゃない?
onmouseoverとか。
<br> <br> ってやっちゃだめなんですか?
>>921 タグとしてはかまわないけどw3cでは減点されるよ
ただ見栄えを良くするための改行ならCSSでやるべき。
スレ違いとわかっていながらレスするおまえら萌え
次スレマダー?
>>922 おまいは margin を取りたいだけなんじゃないかと小一時間。
>>929 誰も突っ込んでくれなかったから自分で突っ込んだのか?
931 :
Name_Not_Found :2006/01/15(日) 03:29:48 ID:ZOXlSxHT
すみません。 CSSレイアウトで上部マージン0に設定しても firefoxだと数ピクセル分の空きができてしまうのですが、 キッチリ上に詰める方法をご存知でしたら教えてください。 よろしくお願いいたしますm(_ _)m
932 :
学生 :2006/01/15(日) 05:45:09 ID:/4Ng90Sy
すいません。質問させてください。
http://www.citinet.jp/ ↑このサイトのヘッダーにあるプルダウンメニューを
ボクもこんな感じのものが作ってみたいと思い、ソースを見てローカルで
イジってたんですが、(もちろんUPはしてません。)
動作しません。
DWしてきた状態のままですと、一番右の「会社案内」が
onmouseの状態で下に5個副メニューが出た状態になります。
正常に動作させるにはどうすれば良いでしょうか?
皆様お忙しいと思いますがご回答よろしくお願いします。
とりあえず、CSSとJavaScriptの違いを勉強してくること それとIEでしか表示できないソースは真似しないほうがいいと思うよ
>>932 ソースをまじまじ見たわけじゃないけどjavascriptの領域じゃないかといってみる。
そっちの質問スレで訊くのがいいと思う。
firefoxではうごかなかったのでどんなメニューなのかもわからんかった。
935 :
学生 :2006/01/15(日) 07:09:52 ID:Njuz7XM2
ご回答ありがとうございました。 いろいろ検討してみます。
>>931 普通は空かない。何か書き方間違えてると思われ。
938 :
Name_Not_Found :2006/01/15(日) 14:35:37 ID:6Br7vQKM
.main{ font-size: 12px; } .box3{ background-color: #77ff77; width: 40%; height: 150px; border: 1px solid #dddddd; float: left; } .box4{ background-color: #ffaaaa; width: 60%; height: 150px; border: 1px solid #dddddd; float: left; } <div class="main"> <div class="box3"></div> <div class="box4"></div> </div> 40%と60%の割合でbox3とbox4を横に並べたいのですが、 上の書き方ではなぜかbox4が下段に落ちてしまいます。 60%を59%に変更すればちゃんと並んでくれるのですが、 微妙な間が開いてしまうので出来れば100%で使いたいのですが… これは何が原因なのでしょうか?どなたかご教授お願いします。
>>938 borderの幅は、widthに含まれないので、938のCSSだと
40% +1px +1px +60% +1px +1px >100%
と計算され、100%を超える。なのでbox4が下に落ちる。
回避したければ、
1.borderを指定しない
2.widthの合計を95%などと小さめに見積もる
3.以下参照
<div style="width:40%;">
<div style="border:1px solid #dddddd;"></div>
</div>
<div style="width:60%;">
<div style="border:1px solid #dddddd;"></div>
</div>
みたいに入れ子にする。div厨っぽいが。
940 :
Name_Not_Found :2006/01/15(日) 15:01:58 ID:6Br7vQKM
>>939 ありがとうございます。
borderのサイズ分が100%を超えていたのが原因なのですね。
とても参考になりました。
次スレのスレタイは今までのやつに戻すよ? /* CSS・スタイルシート質問スレッド【51th】 */
942 :
Name_Not_Found :2006/01/15(日) 15:49:54 ID:ZOXlSxHT
>936-937 ソースは下記の通りです。 #container { width:750px; margin-right: auto; margin-left: auto; position: relative; margin-top: 0px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000000; border-left-color: #000000; height: 1000px; background-color: #FFFFFF; } * { margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,h6,p,address{ font-size:100%; font-weight:normal; font-style:normal; } firefoxだと #containerの上部に数ピクセルの余白ができてしまうのですが、 ここをきっちり詰める方法がどうしてもわかりません>< ブラウザのバグなんでしょうか?
943 :
941 :2006/01/15(日) 16:04:32 ID:???
立ててみるよ。
945 :
606 :2006/01/15(日) 16:38:03 ID:fqn64Xfs
946 :
941 :2006/01/15(日) 16:41:43 ID:???
51stじゃないのか?
949 :
941 :2006/01/15(日) 19:13:59 ID:???
>>948 スレタイが駄目なんじゃない?
(スタイルー大柴シート)
>>945 と、とりあえずHTMLが悲惨なので、HTML-lintで確認して、直してごらん。
それでも変だったらまたおいで。
951 :
931 :2006/01/15(日) 19:52:35 ID:ZOXlSxHT
情報が不足していたようなので補足します。 #container { width:750px; margin-right: auto; margin-left: auto; position: relative; margin-top: 0px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000000; border-left-color: #000000; height: 1000px; background-color: #FFFFFF; } * { margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,h6,p,address{ font-size:100%; font-weight:normal; font-style:normal; } IE6では意図した通りに表示されるのですが、 firefox1.5だと#containerの上部に数ピクセルの余白ができてしまいます。 余白を空けない方法をご存知の方いらっしゃいましたら教えてください。 よろしくお願いいたします。
952 :
606 :2006/01/15(日) 19:52:57 ID:???
>>950 色々いじくってたら直りました。ありがとうございます。おそらくもう大丈夫だと。
>>952 無駄に長いスタイル指定に萎え。もっと簡略化できるぞ。
position: relative; はなんのため?
スタイルを適用させるHTMLソース例も出しなさい。長くせず、キモの部分だけな。
今さらなんだが、
>>637 ってoverflow:hidden;で指定幅のみ選択になるよな。
でもここらへん、確かMacIEで表示できない細かい条件があったような気がするんだけど、
MacIE環境持ってる人、知らない?hiddenじゃやっぱり危険?
MacIE は overflow:auto; すると display:none; みたいになってしまうからいやん
すみません。質問します。
CSSでデザインされたとてもカッコいいサイトを見つけました。
参考にさせてもらおうと思い、CSSの中身を除いた※1のですが、
@import url("base2.css");
/*\*//*/
@import "ie5mac.css";
/**/
このような記述が出てきてCSSが見れませんでした。
どうすればいいでしょうか。
サイトを晒したいけど、許可をとっている訳ではないので止めておきます。
よろしくお願いします。m(_ _)m
※1
http://ホームページ名//css/base2_im.css ←を入力
>>957 ちなみにそれバグの多いMacIE用ハックだから、
一般用CSSはそれじゃないと思われ。その部分はただの回避策じゃないかな。
#navi a:link, a:active, a:visited { 〜略〜 } #navi a:hover { 〜略〜 } 上記のようにスタイルシートを記述しているのですが、なぜか <div id="navi"></div> で 囲っていない部分にも a:link, active, visited が影響されてしまいます。(hovor は適用されてません) 原因はなんでしょうか? W3C や HTML-Lint でチェックはしたのですが…
http://pc8.2ch.net/test/read.cgi/hp/1137080639/29 からきました
<dt>DT1</dt>
<dd>DD1</dd>
<dd>DD2</dd>
<dt>DT2</dt>
<dd>DD3</dd>
<dd>DD4</dd>
<dd>DD5</dd>
というのを
DT1 DD1 DD2
DT2 DD3 DD4 DD5
と並べて表示したいのですが
dt
float: left
clear: both
dd
float: left
だとWinIEで
DT1 DD1 DD2 DD3 DD4 DD5
DT2
となってしまいます。
どうやったら解決できますか
#navi a:link, #navi a:active, #navi a:visited に修正。
>>968 ありがとうございます。
もう一つ質問なんですが
ul {
background-color: #FFFFFF;
}
とやるとIEだと背景色が適用されますがFirefox1.5だと適用されません。
どっちが正しい挙動なのでしょうか
FireFox1.5で > <q cite="引用元">引用文</q> を > 「引用文」(引用元) と表示してさらに"(引用元)"の部分のフォントや色を"「引用文」"とは別のものを適用したいのですが > q { quotes: "「" "」"; } > q:after { content: "(" attr(cite) ")"; } /*←fontとかcolorとか指定する予定*/ とすると > 「引用文(引用元) のように表示されます(閉じるかぎかっこがない) > q:before { content: "「"; } > q:after { content: "」" "(" attr(cite) ")"; } とすると一応 > 「引用文」(引用元) と表示されるのですがそれだと当然ながら "(引用元)"の部分だけに"「引用文」"とは別のスタイルを適用することができません ("」(引用元)"の部分にスタイルが適用される) どうすれば思い通りにできるでしょうか
971 :
969 :2006/01/18(水) 15:28:35 ID:???
>>969 そんなことなかったです
リスト要素がulの外に配置されてるような状況になってたようです。
これはこれでバグだとおもいますが
>>969 Win2000Firefox1.5で変わることを確認。
スペルミスを確認汁。
リロードしたんだが…orz
>>971 小分けですまん、それもそんなことはないから、おまいの書き方確認。
>>970 citeまで装飾(CSS)として付けるのは法律的にちょっと難という意見があるので
cite属性を用いるがよかろ。
cite属性じゃねえ、cite要素だ。
977 :
969 :2006/01/18(水) 15:37:00 ID:???
>>974 li要素をfloatしてた所為でした。
IEだとfloatされたli要素もulの中のように振る舞いますが
FFだとulの外に浮いてる形になるみたいです。
後続する要素とのマージンなどからもこんどこそ合ってると思います
978 :
970 :2006/01/18(水) 15:38:03 ID:???
>>975-976 レスどうもありがとうございます。
そもそもhtml部分を
> <q cite="引用元">引用文</q><cite>引用元</cite>
として
q要素のcite属性部分をcssで装飾するのではなくcite要素を追加し装飾すれば委員ですね。
それでもやっぱりq要素のcite属性は書いたほうがいいのでしょうか?
って、これはcssの質問ではないのでスレ違いですね。
どうもありがとうございました。
>>978 q要素とcite要素が完全に対応する確証がない(現在の仕様ではそれを明文化する規定がない)から
HTMLとしては、たとえcite要素はなくともcite属性は書くべき。
むしろHTML的にはcite要素は法律的なおまけと考えておいたほうがいい。
またcite属性にはURI(URLやISBN)しか書けないが、
cite要素のほうはq要素のtitle属性と同じような出版物名とか著者名とか書けるんで便利。
>>979 >>980 素朴な疑問。
その仕様通りだと、ブロック要素であるhrはフロートされちゃマズイと思うんだけど、
hrがきっちりフロートの下に潜り込んでるのは知ってる限りOperaだけで、
IEはおろかFirefoxでもMozillaでもフロート幅によって縮められちゃってテキスト扱いになってる感じなんだが、
これってバグ?
>>983 いや、標準モードでそれだった気がするんだが・・・
もういっぺん試してみる。
ちょっと該当見付からなかったんですけど、 legend要素に:first-letter擬似要素が働かないのは仕様ですか?
>>988 Windows2000SP4Firefox1.5です。
>>990 わかりました、あとでソースを簡略化してやってみます。
おはよう埋め
雪だ
梅干しすっぺー
カリカリ埋め
すっぱいまんくいてー
うめうめ
すっぱいまんこいてー
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。