/* CSS・スタイルシート質問スレッド【45th】 */
1 :
S.A Studio ◆Sastuvj1Pg :
【参考】
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
新テンプレートの
>>6は「改行多すぎです」で拒否されるので2つに分割しました。
12 :
教えて下さい:2005/07/21(木) 16:16:07 ID:???
iモード専用(携帯コンテンツ)を作成予定なのですが
CSS等は携帯電話からみても適用されるのでしょうか?
教えて下さい
14 :
教えて下さい:2005/07/21(木) 17:56:03 ID:???
>>13さん
れすありがとうございます。
そちらのスレで読み直してきます
助かりました!
15 :
Name_Not_Found:2005/07/21(木) 18:36:28 ID:IY3MHYNA
すみません質問です。
a:link{color:lime; text-decoration:none}
a:visit{color:green; text-decoration:none}
a:hover{color:green; text-decoration:underline}
a:active{color:green; text-decoration:underline}
IE6だと思い通りに表示されるのですが、NN7だと a:visit の部分が無視されて、
NNのデフォルトの色(紫)・アンダーライン付きで表示されてしまいます。
どこが間違ってるんでしょうか?
それは仕様なので仕方ないです。
スタイルシートは IE専門と思ったほうがいいと思います。
× a:visit
○ a:visited
18 :
15:2005/07/21(木) 18:56:09 ID:IY3MHYNA
>>17 うわ、記述が間違ってたんだ。
直したら、NNでも思い通りの表示になりました。ありがとうございました!
19 :
Name_Not_Found:2005/07/21(木) 19:31:28 ID:V0R8izfh
16は黙ってロムれ
夏だねぇ・・・
質問です。
<select>で、マウスオーバーしてるoptionだけ
背景色を指定するのってできないんでしょうか。
どうしてもデフォルト色が優先されてしまいます。
<select style="background-color:〜">だと、全option部品に色がついちゃうし、
個別のoptionで
onMouseOver="this.style.backgroundColor='〜'"と
onMouseOut="this.style.backgroundColor='#FFFFFF'"
させたりしても、どうあがいてもデフォルト色が優先されてしまうんです。
これって仕様なんでしょうかね。
動確環境は、WinXPのIE6とFireFoxです。
もうJavaScriptとCSSで疑似select部品を作るしかないのかなorz
わたしの持ってる本には
NN4はCSSが全然だめ。6以降で改善されたが、IEと表示が違うことが多く、
まだまだ実用に堪えない。開発陣には、がんばってもらいたい。
とかいてありますが?
いつの本だよ。
まだ1年と少し前ですよ。
NN7になっても、IEと同じに表示できない問題点がつらつらと書いてあります。
それはその本の著者が無知なだけの気が……
多分その「問題点」とやらの9割はIE側に問題があるんだろうな……
geckooooooooooo
IE側の問題というのがよくわかりませんね。
MSOfficeに対するOpenOfficeOrgみたいなものですから、
NN側がIE互換になるように努力すべき問題であって、IE側がどうしようと関係ない気が。
>>1 改訂案はわざと無視したの?
957 :Name_Not_Found:2005/07/19(火) 14:13:01 ID:???
再掲
次スレッドのための改訂案、三つ。
>>6 >A4: まずclear忘れがないかをを確認してください。
→ A4: まずclear忘れがないかを確認してください。
>>8 Q11とQ12の順番を逆にすべし。
「いままでHTMLでやってた××を……」は最後が相応しい。
>>11・
>>16-20を組み込むかどうか。
>>30 気付かなかっただけじゃないのかとマジレス
とりあえず
>>25のいってる本のタイトルと著者名は知りたい。
釣りだろ?
ありえない・・・
なんか CSS の仕様は IE が決めてると思っている奴がいるな…
>>28 p { float:left; margin-left:10px; }
と書いて左に20pxのマージンができるのはIEだけ!
IE茸
38 :
Name_Not_Found:2005/07/22(金) 19:47:43 ID:375zrUoL
<div>
<p><img></p>
<table>
</table>
</div>
p{
width:200px;
float:left;
}
table{
width:100%;
}
とやると当然ですが、<table>がめいっぱい広がってフロートすらされないのですが
<table>のwidthを 100% - 200px にするのには、どうすれば良いのでしょうか?
margin-left
40 :
38:2005/07/22(金) 20:09:51 ID:???
>>39 レスありがとうございます。
table{
width:100%;
margin-left:200px;
}
とやると、200pxぶんはみ出てしまうと思うのですが…。
>>40 こういう書き方は良くないのかもしれないけど……。
table { display: block; margin-left: 200px }
42 :
ラブ天使:2005/07/22(金) 20:44:31 ID:pCKOcktu
///////
///////____________
///////  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| ̄ ̄
/////// (~) チリンチリン
/////// ノ,,
/////// ∧_∧ / ̄ ̄ ̄ ̄ ̄ ̄
/////// ( ´∀`)( 厨 ) )) < 夏だなあ〜
/////// (つ へへ つ \______
/////// //△ ヽλ ) ) 旦
////// l ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄l
/////  ̄| .| ̄ ̄ ̄ ̄ ̄ ̄ ̄| .| ̄
//// ^^^ ^^^
>>40-41 <html>
<head>
<style>
p{
width:200px;
float:left;
}
table{
width:100%;
}
</style>
</head>
<body>
<div>
<p><img></p>
<div style="float:right;"><table border="1"><tr><td>table</td><td>table</td></tr></table></div>
</div>
</body>
</html>
IE6以外でどうなるのかしらないけど
>>28 否、IEがW3Cのガイドラインに従うべき(ry
46 :
38:2005/07/22(金) 21:33:49 ID:???
>>41 <table>を block にしてもはみ出てしまいました。
>>43 やはり、<div>を一個入れてあげるしかないっぽいですね。
ありがとうございました。
基地外相手にマジレスが多いね。
無料ホームページスペースを利用してるのですが。
<body>
<div>
コンテンツ
</div>
<cssの広告>
</body>
といた感じに、body閉じ前にcssで記述された広告が入るようになっています。
ここで、NetscapeとFirefoxでみると広告が最上部に表示されてしまいます。
IEではコンテンツが終わった、最下部に表示されるのですが、ネスケと火狐
で正常にさせる事って出来ますか?
んあ?
ここってネタスレだっけか?
<dl>
<dt></dt>
<dd></dd>
</dl>
のdd,dl,dtそれぞれにmargin:0:padding:0;を指定しているんですが、
ddとdtがファイヤーフォックスだと左揃えになりません、
(ddがインデントされたカタチになる)
これをぴったりあわせる方法をご存知のかたがいたらおしえてください
やっぱハックするしかないのでしょうか?
>>48 無料HPを借りている所にお問い合わせください
>>51 FireFoxでもなるよ。ヘンな指定してないか? CSSソース出して。
>>54 ありがとうございます、
;が全角になってましたorz
直したら出来ました
56 :
48:2005/07/23(土) 16:19:53 ID:???
body {
border: 8px solid #000000;
}
のように指定した場合、Firefoxなどでは上手くページ全体を囲うborderを出す事が出来るのですが、
IEの場合のみ表示の仕方が変わり、ウィンドウの内枠に沿ってborderが表示されてしまいます。
(スクロールバーもborderの内側に表示される)
これをIEの場合でも他と同じく表示されるようにするにはどうすればよいですか?
文字のサイズを、個人のブラウザの設定に左右されないようにしたいんだけどどうしたらいいですか?
ここで61アンカーでクマのAA↓
63 :
Name_Not_Found:2005/07/24(日) 17:12:42 ID:GHtOMLvM
クマー
position:absolute で
right,left autoしてもセンタリングされないんだね。
margin-right,margin-leftでもされない。
どうしたら、センタリングされますか?
65 :
ラブ天使:2005/07/24(日) 18:54:12 ID:+a13nFAd
| ̄ ̄ ̄ ̄ ̄ ̄ ̄|
>>64 | ギ子様が |
自分で考えろタコ ,._ | 余裕ブリブリ |
_,..----―' 、  ̄ ̄ヽー- 、 | 8ゲトブーン |
ヽ ̄7 , , \ 、 「 ̄ 7 |_______|
ヽ/ /_ /ハヽl ヽ、\ V ./ | |
i il/ ∧ ∧ \ヽ .V | |
___________| ii i | il | | |
/ l il |、 (_人_) | li | ̄ ̄ ̄ ̄ ̄ヽ
ヽ___________ヽN ` _ /リiレ______丿
| / i_i
| /
| /
| /
/ \ |
! ヽ 丿
入 ヽ
/ \ )
/ /丶 /
/ / / /
─── | / | 丿
─── | / | /
─── レ レ
>>64 position:absolute の意味判ってるか?
漏れの金ポジはabsoluteですが何か?
68 :
21:2005/07/24(日) 20:17:30 ID:???
69 :
Name_Not_Found:2005/07/24(日) 20:31:50 ID:V04PtVB/
body {
border: 5px solid #000000;
margin: 0 10%;
}
などのようにしてbody要素にボーダーを引き、左右に余白を開けたとします。
この時、この余白部分に色を付ける事は可能でしょうか?
また、そうするためにはどのようにしたらよいでしょうか?
70 :
1/2:2005/07/24(日) 21:08:15 ID:???
以下ソースの3つあるうちの上二つのdtの高さが
windowsIE6.0でだけ思い通りにうまくいきません
標準モードでやってます
アドバイスください
(html)
<form id="login" action="" method="POST">
<dl>
<dt class="t14"><img src="images/0.gif" width="60" height="12" alt="ID" class="h12"></dt>
<dd class="frm"><input type="text" name="mail" value="" class="w170" tabindex="100" accesskey="M"></dd>
<dt class="t14"><img src="images/2.gif" width="60" height="12" alt="パスワード" class="h12"></dt>
<dd class="frm"><input type="password" name="passwd" value="パスワード" class="w170" tabindex="101" accesskey="P"></dd>
<dt><input type="image" name="submit" src="images/1.gif" value="ログイン" alt="ログイン" tabindex="102" accesskey="L" id="bttn"></dt>
<dd id="pw"><A HREF="hoge.html">※トイアワセ</a></dd>
</dl>
</form>
71 :
2/2:2005/07/24(日) 21:15:17 ID:???
コピペし忘れたのですが、上のソースは、以下のようにformの上をdivでかこっています
<div><form id="login" action="" method="POST">中略</form></div>
ーーーースタイルシートはります
(css)
div{
width:730px;
height:413px;
position:relative;
background-image:url(../images/bg.jpg)}
#login{
position:absolute;
top:69px;
left:471px;
display:block;
background-image:url(../images/bg2.gif);
background-repeat:no-repeat;
width:210px;
height:178px;
margin:0;
padding:0;
}
続く
72 :
3/3:2005/07/24(日) 21:16:19 ID:???
#login dl{margin:23px 0 0 19px;padding:0;width:172px}
#login dl dd{margin:0;padding:0;}
#login dl dt{margin:0;line-height:0px;border:1px solid silver;padding:0;}
#bttn{padding:5px 0 5px 0;height:34px;}
#pw{
text-align:right;
font-size:12px;
line-height:14px;
}
.h12{padding:0 0 2px 0;margin:0;vertical-align;bottom;line-height:0px;border:1px solid black;}
.t14{height:14px}
.w170{
width:170px;
border:1px solid silver;
margin:0 0 6px 0;
height:20px;
font-size:12px;
padding:0;
line-height:0px;
}
.frm{height:26px;
vertical-align:top}
分母が増えた
74 :
72:2005/07/24(日) 21:26:25 ID:???
2回で終わらせたかったんですが
改行多すぎますとでてしまったので分母を増やしましたorz
ゴメソ
>>69 おいらこれ好きなんだよな
paddingつかってbody { に背景色指定汁
>>60 文字の大きさを固定しても、ディスプレイや OS によって
表示が異なるのは知ってる?
たぶん「小さい文字でオサレさん」をやりたいんだろうけど
そういう独りよがりなページは読んでもらえない。
>>21 どっちかというとjavascriptスレ向きだけど、optionでイベント取得できたっけ?
selectでイベント取得して、selectedIndexから・・・
まぁ、スレ違い。
78 :
Name_Not_Found:2005/07/25(月) 17:04:25 ID:5XFQimT/
拡張子が.cgiや.phpで表示されるものを.html内でスタイルシートを用いて読み込む方法はありますか?
例えば(下の図)中央の●の部分のテーブルに「ある結果を表示させる.cgiまたは.php」を表示させるにはどのようにしたらよいでしょうか
@@@@@@@@@@
@@@@@@@@@@
@@●●●●●●@@
@@●●●●●●@@
@@●●●●●●@@
@@@@@@@@@@
@@@@@@@@@@
>>78 質問の内容からして、ぜんぜん理解してないみたいだけど、
やりたいことができるのはSSIかも。
どの道、今は使いこなせるレベルではないと思われ。
はげどう
81 :
ラブ天使:2005/07/25(月) 18:26:57 ID:OmtHSKW9
>>80 ウルせえ!!!!!!!!!!!!!
ちんちん切ったろか!!!!!!!!!
うるせえ!!!
ちんちん切ったろか!!!!!!!!!!
うるせえ!!!!!!!!
ちんちん切ったろか!!!!!!!!!!!!!!!!!!!!!!ウルせえ!!!!!!!!!!!!!
ちんちん切ったろか!!!!!!!!!
うるせえ!!!
ちんちん切ったろか!!!!!!!!!!
うるせえ!!!!!!!!
ちんちん切ったろか!!!!!!!!!!!!!!!!!!!!!!
ウルせえ!!!!!!!!!!!!!
ちんちん切ったろか!!!!!!!!!
うるせえ!!!
ちんちん切ったろか!!!!!!!!!!
81のカキコ読んでたらセックルしたくなってきた
したことないだけだろ
すんません。教えてください。
<div id="contentA">
<h1>hogehoge</h1>
<p>hogehogehogehogehogehogehogehogehoge</p>
</div>
<div id="contentB">
<h1>foofoofoofoofoofoofo</h1>
<p>fofofofofoooooooooooofofofofofofof</p>
</div>
を、左右に並べて配置するときのCSSって、
#contentA{
width:62%;
float:left;
position:absolute;
left:0;
}
#contentB{
width:38%;
margin-left:62%;
}
でOKだとおもわれるのですが、左右に並んだ形で表示されません。
どこを直せばよいでしょうか。
いろいろ見てみましたが、pxでの指定の例ばかりで、%による指定の例がありませんでしたので
ご質問申し上げます。
>>84 position の使い方と、absolute がどういう意味かをもう一度確認してみよう。
あとそのやり方だと、MSIEにおいて並ぶブロックの間に埋められない隙間が発生します。
よって、合計が100%を超えてしまい結果として並びません。Bの方を、
margin-left:0;
float:left;
とすれば解決できるかもしれません。
>>84 position の使い方と、absolute がどういう意味かをもう一度確認してみよう。
あとそのやり方だと、MSIEにおいて並ぶブロックの間に埋められない隙間が発生します。
よって、合計が100%を超えてしまい結果として並びません。Bの方を、
margin-left:0;
float:left;
とすれば解決できるかもしれません。
>>84 position の使い方と、absolute がどういう意味かをもう一度確認してみよう。
あとそのやり方だと、MSIEにおいて並ぶブロックの間に埋められない隙間が発生します。
よって、合計が100%を超えてしまい結果として並びません。Bの方を、
margin-left:0;
float:left;
とすれば解決できるかもしれません。
すんません。教えてください。
<div id="contentA">
<h1>hogehoge</h1>
<p>hogehogehogehogehogehogehogehogehoge</p>
</div>
<div id="contentB">
<h1>foofoofoofoofoofoofo</h1>
<p>fofofofofoooooooooooofofofofofofof</p>
</div>
を、左右に並べて配置するときのCSSって、
#contentA{
width:62%;
float:left;
position:absolute;
left:0;
}
#contentB{
width:38%;
margin-left:62%;
}
でOKだとおもわれるのですが、左右に並んだ形で表示されません。
どこを直せばよいでしょうか。
いろいろ見てみましたが、pxでの指定の例ばかりで、%による指定の例がありませんでしたので
ご質問申し上げます。
http://www1.skz.or.jp/~kusumi/klee/ のサイトのように左右のmarginに色をつけたいのですが、
メインコンテンツをdivでくくって
div.hoge{backaground-color:white;
margin-left:3%;
margin-right:3%;}
body{backgroud-color:black;}
としても、marginについた色が上下にまわりこんでしまいます。
どうすればいいでしょうか?
>>89 いまいちわかんないけど、
bodyのマージンとかをなんとかしる。
あと、bodyの背景画像のrepeat-yをうまく使うって方法も有る。
質問いたします。
右側にサイドバーがあるレイアウトの画面を作成しようと思っております。
IEでは全体の背景である白地部分がブラウザの画面下にくっ付いているのですが、
Firefoxで見ると、画面下の白地部分にわずかに隙間ができてしまっています。
CSSの「.back」の「border-width: 0px 5px 0px 5px;」を「border-width: none 5px none 5px;」
にすると白地背景部分はブラウザ画面にくっ付くのですが、
今度はサイドバーの下部分が浮いてしまいます(IE,Firefox共に)。
テーブルレイアウトですが、どなたかご教授下さいませ。
-つづく-
-上のつづき-
#HTMLのソース
<BODY>
<TABLE width="500" height="100%" cellpadding="0" cellspacing="0" class="back">
<TBODY>
<TR>
<TD height="100%" align="left">
<TABLE width="800" height="100%" cellpadding="0" cellspacing="0" class="main">
<TBODY>
<TR>
<TD height="100%" width="580" valign="top"></TD>
<TD height="100%" width="220" class="sidebar" valign="top"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
-つづく-
}
-上のつづき-
#CSSのソース
BODY {
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #000000;
}
.back {
margin: 0px auto 0px auto;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-color: #ffffff;
background-color: #FFFFFF;
}
.main {
margin: 5px 0px 0px 0px;
}
.sidebar {
background-color : #FF0000;
}
以上です。
長々と申し訳ないです。
質問です。
タイトルを表示させる時に、
<div class="form0" id="position0">
<h1><span>タイトル</span></h1>
</div>
(css)
div{
border-color:#dcdcdc;
border-style:solid;
border-width:thin;
padding:20px;
overflow:auto;
position:absolute
}
h1{
font:italic bold 400%/400% cursive;
}
としているのですが、<h>を使うとどうしても回りのスペースが大きくなり、
ボックスを強制的に大きくしてしまうので他のボックスに干渉して困っています。
もう<h>をつかわずに、<p>をつかってフォント指定したほうがいいのでしょうか。
>>94 クマさんはいま夏休みで知床に行っています。
>>94 <h1 class="param">タイトル</h1>
h1 {
border: thin solid #dcdcdc;
padding: 20px;
overflow: auto;
position: absolute;
font: italic bold 400%/400% cursive;
}
これではいかんのかと。
>>96 多分
>>94はh1のデフォルトのマージンのことを言っているのでは?
あと、彼の記述をそのまま持ってきたからなんだろうけど、
position: absolute; はいらんよね。
>>94 <h1>タイトル</h1>
h1 {
margin: 0;
padding: 0;
}
divは多分いらない。
>>98 ウワーありがとう!これでHタグが使えるわ
常々、なるべくW3Cに準じてhtml構築したいなと思ってるんだけど、
マージンがブラウザや前後のタグによって表示されたりされなかったりと
扱い辛い印象だったので敬遠してた。
とりあえず、CSSに
* {
margin: 0; padding: 0;
font-size: 100%; font-weight: normal; font-style: norma;
}
を追加してみろ、と。
プロパティの継承とか一々考えずにスタイル設定できるから、かなり作業が楽になるぞ。
101 :
99:2005/07/27(水) 22:37:38 ID:???
そっかぁ。なるほどんなるほど
マージンかぁ、小一時間マージン調整してみる
なるほどねー。目からうろこ
ページ内リンクでジャンプした時、見だしがギチギチになってしまうのを嫌って
↓こんな風にしてたけど
<br><a name=ここ> </a><br>
<span class="h">みだし</span><br>
が
<h1 class="h"><a name=ここ>みだし</a></h>
にしてcss上下のマージンとってあげれば<br>も要らないね。スッキリ
なんで今まで気がつかなかったのかorz
しかしよう <h1><span>タイトル</span></h1>
こんな書き方を
>>94はどこで覚えたんだろうか?
103 :
Name_Not_Found:2005/07/28(木) 11:30:44 ID:khp90DRr
すみません、すごく初歩的な質問なのですが、
昨日からどうしてもできないので、良かったら教えて下さい。
問題は、外部スタイルシートの呼び出しです
まず、テキストエディタに
h1 {color:blue;background:yellow}
p {color:red;font-size:1.5em}
と書き、ファイル名をabc.cssと変えます。
次に、HTML Documentに、
<html><head><title>タイトル</title>
<link rel="stylesheet" href="abc.css" type="text/css">
</head><body>
本文
</body></html>
と書きます。
説明では、abc.cssに書かれた指定が、
少なくとも背景が黄色になるのですが、何も起こりません。
入門サイトはいくつか回りましたが、その都度似たような説明があり、
似たような事をやり、結果、何も起こらない事態になってます。
指示通り書いてるつもりなのですが・・どこがおかしいのでしょうか?
>>103 >どこがおかしいのでしょうか?
CSSのコード。
>>103 ×background:yallow
○background-color:yallow
うは、自己レス
×yallow
○yellow
>>104 ありがとうございます。コードですか。
もし良かったら、何を付け足すと反映されるか、
教えていただけないでしょうか?
CSSの方に問題があるのが分かっただけでも、
本当にありがたいのですが・・
108 :
103:2005/07/28(木) 11:40:42 ID:???
109 :
Name_Not_Found:2005/07/28(木) 11:42:10 ID:ee2stUqA
>>103 >少なくとも背景が黄色になるのですが、何も起こりません。
何もとはスタイルが何も効いていないの?どれか一部ではなく?
それならば、cssfileが読み込めてない可能性が一番高いよ
あとbackground:yellow;は別に問題ないよ。
本文をp要素でマークアップしていないのが問題と見た。
<p>本文</p>
ってやってみな。
>>106 ×うは、自己レス
×yallow
○yellow
○うほっ、自己レス
×yallow
○yellow
h1 {color:blue;background:yellow}
p {color:red;font-size:1.5em}
のそれぞれの最後に ; を足して、
h1 {color:blue;background:yellow;}
p {color:red;font-size:1.5em;}
↑的外れ
>>109 レスありがとうございます。すみません、一部の間違えです。
<p>本文</p> <h1>レベル1</h1>
を加えたところ「レベル1」の文字が黒いまま、大きくなりました。
でも何故か、他には変化しませんでした。
>>110 申し訳ありません、その通りでした。
昨日はちゃんと作ったんですけど・・
ただ<p>本文</p>は変化が現れないので、
CSSの読み込みがまずいみたいです。
>>112 ありがとうございます、早速試してみます。
全く読み込めていない訳では無いのが分かったので、
少し前進できました。ありがとうございます。
>>114 ><p>本文</p> <h1>レベル1</h1>
>を加えたところ「レベル1」の文字が黒いまま、大きくなりました。
?。h1タグは普通に文字が黒いまま、大きくなるんだよ?CSS適用されてないのでは?
俺はまったく読み込めて無いだけだと思う。
CSSが103の通りだったら100%CSSの記述に間違いないから
>114
それは読み込まれていないかもしれない。
abc.cssに、
body { background-color: #ff0000; }
って書いてみて。
それでページ全体の背景色が"赤"になるんならいいんだけど。
外部ファイルじゃなくて、普通に書いて変化があるかどうかから確かめたほうが。
ブラウザの設定いじってスタイルの一部効果を切ってるとかないよね?
118 :
Name_Not_Found:2005/07/28(木) 13:12:51 ID:KooLkwUL
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
−−−−−−−
| A | B |
|−−| |
| C | |
| | |
|−−| |
| |
|−−−|
ずれてると思いますが、こんな感じに段組したいのですが、うまくいきません。
どうすでば良いでしょうか?
119 :
118:2005/07/28(木) 13:15:21 ID:???
ごめんなさい。普通に出来ました。マージンを指定していたのが駄目だった orz
z-indexって単純にHTMLをレイヤー化するって考えて良いんでしょうか?
ある画像を前面に持っていきたいのですが、他のブロックと被っているところで背景色など指定するとどうしても見えなくなってしまいます。
>>120 >他のブロックと被っているところで背景色など指定するとどうしても見えなくなってしまいます。
あたりまえじゃん。
>>121 ___/
___/
___/
つまりこんな感じに重なっているわけではないという事ですか?
<div id="a"><div id="c"><div id="b">
</div></div></div>
#a{position:relative; z-index:3;}
#b{position:relative; z-index:2;}
#c{position:relative; z-index:1;}
こうすれば↓みたいになるってことじゃないんですか?
______________/ ←div#a
____________/ ←div#b
__________/ ←div#c
質問の仕方が中途半端なんだよ
だからなんだっつーのよ?
これでdiv#bに背景を指定して、div#cにも背景を指定するとdiv#bが前面にあるわけだから優先されるんですよね?
は?CSS使わんでも124の通りだったら#bが前面にくるよ?
>>126 ちゃんとソースかきゃいーんだよ
>>124 よく考えたらならねーよ
cssをどうしようが、
______________/ ←div#b
____________/ ←div#c
__________/ ←div#a
だな
ちがうちがう
今の無し
うん
133 :
89:2005/07/28(木) 23:06:22 ID:???
ダメダ・・・
bodyのmarginをいじってもだめだった・・・
背景画像を使うしかないんですかね?
>>133 body { margin:0; padding:0; }
div { margin: 0 3%; }
を追加しても駄目か。
>134
できました。
ありがとうございました。
137 :
Name_Not_Found:2005/07/29(金) 09:17:06 ID:0W3dGzRk
下のようなテーブルがあります。
<img>のサイズはバラバラで<table>の
場合はちゃんとマトリクス表示されます。
<table border="0">
<tr><td><img></td><td> </td></tr>
<tr><td><img></td><td> </td></tr>
</table>
------------------------------------------------------------
下記のCSSで書いたものは各行を"row"で囲んで
ブロックになっているけど、"right"が上に送り込まれてしまいます。
どうすればtableレイアウトのようにマトリクス表示が
できますでしょうか。
.matrix{
width:100%;
}
.left{
float:left;
margin:40%;
};
.right{
margin:40%;
margin-left;40%
};
<div class="matrix">
<div class="row"><div class="left"><img></div><div class="right"> </div></div>
<div class="row"><div class="left"><img></div><div class="right"> </div></div>
</div>
久々にdiv厨
「表」として表現すべき内容であれば「表」としてマークアップすればいいんだよな今の
厨はなんでもdivに置き換えればいいと思っているから困る。
突っ込みどころがいろいろあるので困る。
とりあえず
ヒント: clear
140 :
Name_Not_Found:2005/07/29(金) 09:59:44 ID:0W3dGzRk
表でなくて、表のように形成されている
文章なんですよ。
.row{clear:left;}してみましたけど、だめみたいです
141 :
Name_Not_Found:2005/07/29(金) 10:13:53 ID:Rjq+EINt
.matrix{width:100%;}
.row{clear:left}
.left{float:left}
.right{float: left;}
はい。最低限。
君のmargin指定が意味判らん
すみません、CSSを初めて使ってみたのですが、
一部分どうしても不具合が出てしまいます
<div>で横幅を指定したスペースにテーブルを
置いているんですが、テーブルのwidthを100%に
しても、何故か右にスペースが余ります。
これの真ん中の部分です
http://www.my-worldmap.com/index.html ちょっとした隙間なんですが、どうしても
気になってしまいます・・・・
143 :
Name_Not_Found:2005/07/29(金) 12:05:27 ID:vKjPPgb+
どうか教えてください。floatで配置しているのですが、文字組が崩れる
症状が起こりました。float指定しているボックスのheightを2000pxまで
に指定するとキレイに整列します。原因はfloatのボックスにあると思われる
がどうしたら解決できるかわかりません。
誰か助けて!
>>143 ソースを(問題点だけを抽出して簡潔に)。
145 :
Name_Not_Found:2005/07/29(金) 13:33:45 ID:vKjPPgb+
>>144 すみませんでした。
#extra-col{
float:left;
width:170px;
/*height:2000px;*/
}
#main-col1{
margin:0px 190px;
}
/*contents.css用css*/
#main-col2{
float:left
padding:0px 190px;
}
これでよいですか?
146 :
103:2005/07/29(金) 13:45:35 ID:???
>>115 >>116 >>117 レスありがとうございます。
>>h1タグは普通に文字が黒いまま、大きくなるんだよ?
すみません、赤くなって大きくなるんだと思ってました。
>>CSSが103の通りだったら100%CSSの記述に間違いないから
ここが悩みです。一つの入門サイトなら何かの間違えとも
思えますが、三つ以上回って同じ結果なので、
サイトの説明に根本的な問題があると思えなくなりました。
>>body { background-color: #ff0000; }
赤くなりません。きっと正しい事を書かれていると思うのですが、
結果を出せずごめんなさい。
>>外部ファイルじゃなくて
『スタイルシートで区切り線を太くしてみよう』
という作業を一昨日やって、そちらは正常に表れました。
>>ブラウザの設定
ありがとうございます。考えてみると外部ファイルを
使って作ったのは、漫画喫茶でやっている時ばかりなので、
そうかも知れません。早速家のPCで試してみます。
147 :
103:2005/07/29(金) 13:47:50 ID:???
サイトの説明に問題が無い以上、110さんに指摘してもらったような、
アホみたいなミスを僕がしている予感がどんどんしてきて、
何か、怖くなってきました。
なので質問は一旦中止して、当分基本的な事ばかりやろうと思います。
ただ、知識のある方から『100%CSSの記述に間違いない』
と言ってもらえたのは、本当に助かります。
他の皆さんも、初歩的な質問なのにちゃんと
付き合って下さって、とても感謝しています。
ありがとうございました。
それと、返信が遅くなってすみません。
情報の小出し乙。
149 :
143:2005/07/29(金) 15:05:26 ID:vKjPPgb+
対処しました。
ボックスを入れ子にすることで、ある程度文字組の崩れを
防ぐことができました。
お騒がせしてすみません。
>>145 なあ、俺らはキミのサイトのことなーんにも知らなんだよ。
なのにそれだけ見せられてもわからんて。
151 :
142:2005/07/29(金) 16:12:08 ID:???
どなたか
>>142 の原因分からないでしょうか?
CSSのタグで必要な部分を教えてもらえれば
書き込みます
>151
サイト見えない。
空白って・・・まさか、BODYのmargin指定忘れとか言わないよね?
153 :
Name_Not_Found:2005/07/29(金) 16:32:46 ID:Rjq+EINt
154 :
Name_Not_Found:2005/07/29(金) 16:59:14 ID:Rjq+EINt
↑いやー俺の文意味わかんね。
h1タグのためだけににtableを使ってるのが意味が判らないといいたかった。
h1を入れ子にしてるtableタグをとって下記のCSSを適用させてみて。
h1{
font-size : large;
color : #000000;
text-decoration : bold;
padding : 3px 1em;
margin : 0;
border: 1px solid #999;
background-color: #c0c0c0;
}
これで求めてる結果になるはず
155 :
142:2005/07/29(金) 17:27:48 ID:???
>>154 ありがとうございます。
返事遅くなってすみません。
ごめんなさい、CSSはまだまだ勉強中です・・・。
今やってみたんですが、タグがすっきりして感動しました。
しかし相変わらず右側に隙間ができてしまいます。 orz
156 :
142:2005/07/29(金) 17:28:44 ID:???
XML にて <content:encoded> ... </content:encoded> の部分の表示を、
CSS で消したいのですが、以下の様に指定しても上手くできません。
content:encoded{ display: none; }
どうしたら良いか、誰か教えて頂けないでしょうか。
>>157 CSS 3 のセレクタに対応していれば | 区切りで選択できる。
使用する前に @namespace で名前空間 URI を指示する。
名前空間 URI は XML 文書の xmlns で指定したものと一致させる。
例えば、XML が
<content:encoded xmlns:content="
http://localhost/"> ... </content:encoded>
の場合、CSS は
@namespace content url("
http://localhost/");
content|encoded { display: none; }
159 :
Name_Not_Found:2005/07/30(土) 06:18:20 ID:LmdMAvNK
ブラウザのウィンドウ上下いっぱいにボックスを作りたいのですが、うまくいきません。。。
cssに以下を記述して
body {
margin: 0px;
background-color: #000;
}
#box{
display: block;
width:800px;
height: 100%;
background-color: #FFF;
margin: 0px;}
}
htmlには以下を書いているのですが、
<body>
<div align="center">
<div id="box">
てすと
</div>
</div>
</body>
height: 100%;が全然効果ありません。直値(100pxとか)を入れるとその高さになるのですが、
ブラウザの上にはぴったりついているけど、下はスカスカなボックスができます。
パーセンテージにするとボックスが現れなくなります。。。
どうすれば上下に100%の大きさのボックスを作れますか?
宜しくお願いいたします!!m(_ _)m
160 :
Name_Not_Found:2005/07/30(土) 06:27:30 ID:jNY7TT7J
【環境】Win98SE、ブラウザIE6.0
【質問】
1ページ内に複数のテキストエリアがあり、それぞれのデザイン(スクロールバーの色)を
違うものにしたい場合、どのように記述すれば良いですか?
FAQ、まとめサイト、グーグルなどで検索してみたのですが見つかりませんでした。
どうぞよろしくお願いします。
161 :
159:2005/07/30(土) 06:41:35 ID:LmdMAvNK
親要素が無かったです。
自己解決しましたすんませんorz
>>159 html, body, div {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-color: #000;
}
div {
background-color: #fff;
}
ブラウザで表示させる画像をプリント時に別の画像になるようにしたいのですが、
何か良い方法はありますか?
164 :
163:2005/07/30(土) 10:17:58 ID:???
すみません。ブラウザはIE6でお願いします。
<link rel="stylesheet" href="./print.css" type="text/css" media="print" />
>>165 レス有難うございます。
具体的にどう書けばいいのでしょうか?
または参考になるページをよろしくです。
自分で調べる気はないのか?
<div id="content">
<div id="block1" class="section"><div id="block3"><span>□</span></div></div>
<div id="block2" class="section">□</div>
</div>
.section {
float: right;
width: 50%;
}
#block1,
#block3 {
position: relative;
}
#block3 span {
position: absolute;
top: 0;
left: 0;
}
#block2 {
float: left;
width: auto;
}
このような状況なんですが、こうするとblock1とblock2が並んで表示されるようになるのですが、IEでは何故だかblock1の幅が明らかにblock2より大きくなってしまいます。何ででしょうか?
171 :
170:2005/07/30(土) 12:36:50 ID:SO3cMO48
と、質問するときはageでしたね。すみません。
172 :
157:2005/07/30(土) 13:17:03 ID:???
>>158 CSS3 が必要になるんですか orz
使いたい環境では現状無理そうですが、とても参考になりました。
ありがとうございました。
>>170 IE6.0(標準/互換)および、IE5.01で見たが、明らかな幅の違いとやらは確認できず。
というか、ブロックボックス生成されとんのかいな、それ。
単純に"□"の表示位置ということで言えば、Firefox 1.0.6 や Opera 8.01 の
場合と同等の表示結果が得られる。
当方 Windows Me。後だしでMacIEでしたとかいわれても困る。
174 :
170:2005/07/30(土) 13:30:22 ID:SO3cMO48
WinIEだけど、なんでだろう
ちなみに□の部分は実際には文章とかが入ります。
block3には他にも結構長めのパラグラフとか、block2はリスト系がズラっと。
これ関係ありますかね?他に関係ありそうなことは特に無いと思うんだけど・・・contentもfont-sizeとかだけだし
175 :
170:2005/07/30(土) 22:06:04 ID:SO3cMO48
普通に* html #block1 { height: 1%; }で解決しました。
なんかスレストまがいなことやってすみませんですた。
176 :
Name_Not_Found:2005/07/30(土) 23:11:58 ID:eLgbg9Ru
<object>タグを使って、iframeの代わりにHTMLファイルを読み込ませているのですが
WindowsIE6の環境だと、CSSでスクロールバーを消すことが出来ません。
ifram(実際にはobjectだけど)ということを視覚的に認識できないようにスタイルを変更
するにはどうすればいいのでしょうか?
試してみたスタイル
object{
overflow:hidden;
border:0;
margin:0;
padding:0;
}
>>176 子の HTML (object に読み込まれる側) の CSS で、
html {
overflow: hidden;
}
としたらどうですか?
178 :
176:2005/07/30(土) 23:54:15 ID:???
>>177 読み込まれる側のBODYに overflow:hidden; を指定すると消えました!
ありがとうございます!感謝っ!!
>>159みて思い出したけど
body {
margig: 0px 0px 0px 0px;
}
ってOperaじゃ反映されないんだよね
Operaだとbody要素のマージンが最初から0だからな。
んなこたーない
margig
paddingだから。marginは最初から0よ。
ヽ(`Д´)ノ
185 :
179:2005/07/31(日) 09:32:38 ID:???
>>183(179?)
・・・ほんとだ!↓で行けた
body {
margin: px px px px;
padding: 0px 0px 0px 0px;
}
このスレ見てると思わぬところで勉強なりますわ
>Operaだとbody要素のマージンが最初から0だからな。
こんなことどこのリファレンスにも書いてなかった
X margin: px
O margin: 0px
Operaは何かいろんなところで挙動が気持ち悪いから無視している。
Javascriptの解釈も滅茶苦茶だし。
>>185 それなら
body {margin: 0; padding: 0;}
で済むのに。
>>188 そうですね。
自分仕様のテンプレそのまま乗せちゃったんで見苦しくてすまそ(上下左右個別に指定することが多い)
全てのbody余白を無効にしたい人は
>>188さんのやつでOKです
body {
margin:1% 5% 1% 5%;
↑これは何なの?
きっとどっかのテンプレを、プロパティの意味もわからないままいじってるんだろう。
すぐ上にあるbodyのmargin,paddingについてのやりとりも思いっきり無視してるし。
body {
margin:0 5% 0 5%;
↑こうすりゃいけるんじゃね。
まいったなぁ・・・
>>190 h1 {
margin: 0;
padding: 0.5em;
}
でいいんじゃないか?
196 :
190:2005/07/31(日) 15:44:23 ID:???
>191
bodyと、<div id="page">の間に top left bottom rightの順で
marginをあけようとしてたのですが、書き方間違ってるのでしょうか。
>193
だめでした。。。。改善されません。元のままです
>195
頂戴したご提案を元に
#baner h1 {
margin: 0;
padding: 0.5em;
}
と追加したところ、解決いたしました。
しかし、なぜこのような挙動になるのでしょう。
後学のためお聞かせ願えれば幸いです。
0 5%
って書き方でもいいってことじゃないの?
子供だと思って舐めんなよヽ(`Д´)ノ
齧ってあげる!!
かじってあげる!!
孕ませてあげる!!
>>196 margin と padding の違いを理解してないんじゃないかい?
CSSのリファレンスに解説が載ってたと思うよ。
はらませてあげる!!
ぼくの童貞あげる!!
お断りします
おぺらじゃなくても反映されないと思うが
ヽ|/
/ ̄ ̄ ̄`ヽ、
/ ヽ
/ \,, ,,/ |
| (●) (●)||| |
| / ̄⌒ ̄ヽ U.| ・・・・・・・・ゴクリ。
| | .l~ ̄~ヽ | |
|U ヽ  ̄~ ̄ ノ |
|  ̄ ̄ ̄ |
208 :
Name_Not_Found:2005/07/31(日) 19:39:26 ID:IRA+IhTA
<div id="section">
<div id="box1">
テキスト
</div>
<div id="box2">
テキスト
</div>
</div>
#section{
border:1px solid #000000;
}
#box1{
margin-left:210px;
}
#box2{
position:absolute;
top:0;
left:0;
width:200px;
}
とやっときに、#box2が左側に、#box1が右側に段組されるのですが、#box2の高さが
#box1よりも大きかった場合、#sectionのボーダーからはみ出てしまいます。
これを解消する良い方法ありますか?
209 :
Name_Not_Found:2005/07/31(日) 20:13:12 ID:MZhMIOSS
<div id="branding"><!-- branding -->
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
</div><!-- /branding -->
上記のようなbranding属性とH1で囲まれた部分のリンク色を変更するにはどのような記述をすれ
ばいいですか?
210 :
Name_Not_Found:2005/07/31(日) 20:26:36 ID:uzi2AQPd
ご教授ください、スタイルシートを使って画像のギャラリーを作りたいと思っております。
テーブルタグで画像のサムネイルを表示して下段にファイル名を記載し、それを並べていきたいと思っているのですが、
横型スクロールバーを表示させず、ウインドウのサイズで横に並ぶ数を変化させる事は可能でしょうか・・・。
この場合、display:inlineでよろしいのでしょうか・・・よろしくおねがいします。
ttp://u.skr.jp/128/files/13137.png 言葉じゃうまく伝えれないので図にしてみました・・・。
>>209 すまん branding属性ってなに?
>>210 並べたい数だけ<td></td>でいいのでは? ってcssじゃないってか?
もちっと基礎を勉強しようぜ。
213 :
Name_Not_Found:2005/07/31(日) 20:43:26 ID:MZhMIOSS
>>211 属性というかIDの事です
brandingは適当に付けた名前です
勝手に自分語で説明されてもおじさんには解らないんだよ。
>>209 a に class でも振ってやるよろし
>>210 <table>
<tr><td><img src="..." alt="..."></td></tr>
<tr><td>ファイル名</td></tr>
</table>
を画像の数だけ書いて、float:left で並べればそれっぽくはなると思う。
が、マークアップとしては table よりは dl のほうが適切かと。
>>209 属性というのはこの場合 "id" がそれ。 "branding" は id属性の値。
悪いことはいわんから、基礎から勉強やり直してきてください。
218 :
Name_Not_Found:2005/07/31(日) 20:58:22 ID:gV1+tGdd
>>215 classを使わないと無理ですか?
#branding h1 a:link {color: #ffffff;text-decoration: none}
a#branding:link {color: #ffffff;text-decoration: none}
とかやってるんですけど色がリンク色が変わらないんです。
219 :
196:2005/07/31(日) 21:04:39 ID:???
各位
いろいろありがとうございます。
>202
margin=ボックス要素外側の余白
padding=ボックス要素内側の余白
だと思ってました。
で、修正前は、bodyに、marginを設定しておったわけです。
いまだに、なぜ、>196で解決できたかなぞなのです。
ひょっとして、bodyで設定したmarginが、以降のボックス要素でも
引き継がれてるからなのでしょうか?
220 :
210:2005/07/31(日) 21:16:09 ID:uzi2AQPd
>>212 ごめんなさい・・・基礎を固めて出直してきます・・・
>>216 それっぽいのができました!
感動であります!そして最後にclear:floatすればいいわけですね!
ありがとうございました!
かくして、サムネイル1個のテーブルがずらっと並ぶのでした。
>スタイルシートを使って画像のギャラリーを作りたい
>かくして、サムネイル1個のテーブルがずらっと並ぶのでした。
なんと言ったらいいのでしうか? おせーて
う〜ん
ページ全体とは別に、<div id=test>の中の href属性を持つアンカータグだけ
別のフォント装飾したいときって、
#baner a:link{
color: #FFFFFF;
text-decoration: none;
border-bottom: none;
}
#baner a:visited{
color: #FFFFFF;
text-decoration: none;
border-bottom: none;
}
#baner a:hover{
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dotted white;
}
#baner a:active{
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px dotted white;
}
としてると、IEでは結果どおりですんですが、
NNやFirefoxでは出ません。
どうやって回避すりゃいいんでしょうか?
224 :
210:2005/07/31(日) 21:52:13 ID:uzi2AQPd
すみません、さっき質問した者です。
あの・・・一部「段組」にしたい要素が横に並ばない箇所があるんですけど・・・解決策はないでしょうか・・・IE6です・・・mozillaは大丈夫みたいなんですが・・・
>>223 Firefoxでは予想どうりになりますが?
どなたか
>>208 に答えて頂けないでしょうか orz
229 :
208:2005/08/01(月) 03:08:56 ID:???
>>228 フロートを使っても、左側を固定・右側をリキッドというのが出来なくて困っています
ん?
box1をfloat:rightでできないのか?
IEって、
font-size: xx-small
をちゃんと表示できないの?
他のブラウザより大きく表示(一定のpxに対して)させるらしい
その意味では「ちゃんと表示させてない」と言えなくもないかな
うーん。 どうみても、IEの xx-small は、「他のより大きく見せる」ではなくて
xx-smallが効いてないように見えるんだがな。
試しに<h1>を、small x-small xx-small にしてみると大きさは
xx-small>>small>>>>>x-small って感じなんだけどな。
234 :
232:2005/08/01(月) 12:35:28 ID:???
>>233 あーそういうことか。いまIEとOperaで試してみたけど
確かにx-smallとxx-smallどちらも殆どかわらんね。特にOperaでは両者の差は全くなかった
「確かに」っておかしいか
うちでは
x-small=xx-smallだった
236 :
231:2005/08/01(月) 13:01:23 ID:???
自己解決。
small x-small xx-smallって、NN系でしかだめみたい。
相対的に指定したいときは、smaller larger もしくは、%指定してやると、IEでも意図どおり。
勉強になった。&お騒がせしてすいません
>>237 そこのページの一番下の
>Windowsで、大きいサイズで綺麗なものは、19ptあるいは25pxの指定の時のようです。
には腹が立った。
ちっこいフォントはやめてくれ……
デカ過ぎる本文もやめてくれ・・・○| ̄|_ =3 ブッ
行間0もきっついぞ
242 :
Name_Not_Found:2005/08/01(月) 22:42:16 ID:tueAzkzj
CSSとかいうやつでFLASHが作れるって聞いてここにきたんですけど教えてください
243 :
Name_Not_Found:2005/08/01(月) 22:50:17 ID:4smAjv3b
バカチョン・クソチョンを支援・擁護する放送を行っているNHKの受信料を支払う気は全くありません。
244 :
名無し:2005/08/01(月) 23:27:52 ID:6hW7/UUw
CSSでFLASHは作れません。
CSSじゃなくJavaでは?
.FLASH {
width:100%;
}
246 :
Name_Not_Found:2005/08/01(月) 23:54:14 ID:tueAzkzj
boxの中を縦に分けたいのですが、どうすればよいのでしょうか?
現在は
.box{
margin: 0px;
padding: 0px 3px 3px 3px;
border:1px solid;
}
の中にboxをもう一つ作ろうとしているのですが、
横にしか分けることができません。
すごく基本的な事がわかっていないと思うんですが
右も左もわからないのでどなたかお力添えをよろしくお願いします。
意味がわからん
箱の中に、半分の大きさの箱を入れたいなら、
.box .box2 {
width:50%;
}
でいいんじゃないか?
てきとーだが
250 :
Name_Not_Found:2005/08/02(火) 13:18:02 ID:bg3rXC9b
レスどうも、247です。
質問の意味がわけわからなくて申し訳ないですm(_ _)m
横にboxを2つ3つと並べたいのですが、それがうまくできません。
どうしたらキレイにbox内部を分けることができるのでしょうか?
CSS自動生成機。使え!
253 :
Name_Not_Found:2005/08/02(火) 13:38:42 ID:bg3rXC9b
1
255 :
143:2005/08/02(火) 15:10:22 ID:60szMTZ/
しつもん。メニューボタンの文字が上にずれてしまってます。
真ん中に寄せたいのですが、どうすれば。
/*メニューボタン部分*/
#navi {margin-right:15px;height:50px;}
#navi ul{margin:5px;}
#navi li{width:130px;float:right;font-size:12px;text-align:center;}
#navi a {height:40px;color:#006633;background-image:url(img/bottun.gif);
background-repeat:no-repeat;display:block;text-decoration:none;
margin-top:10px;padding:-top:5px;}
#navi a:hover {color:#ebe7e1;background-image:url(img/bottun-over.gif);background-repeat:no-repeat;
}
バーチカルアラインの問題じゃなかろうかね。
258 :
143:2005/08/02(火) 16:02:41 ID:60szMTZ/
>>257 <div id="navi">
<ul>
<li><a href="***">○○○</a></li>
</ul>
</div>
※ムーバブルのタグも使っているため内容を簡単にしました。
ヘッダの下に横並びするために今のソースになってます。
lineheight
260 :
143:2005/08/02(火) 16:44:28 ID:60szMTZ/
う〜 うまくいかん。せっかく教えてもらってるのに〜
むう、時間があまりない。17:00になったらパソコンから
離れるヅラ。
みなさん 宜しくお願いしますm(__)m
サイトをモニターの中央に表示させたい場合はどのようにすれば宜しいのでしょうかm(__)m
>>261 例。
#box {
position:absolute;
width:800px;
height:600px;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-300px;
}
>>261 スレ違いなので、詳しくはJavaScriptスレで聞いてほしいんだけど。
モニタの解像度が縦横のpxで拾えるので、
そこからウィンドウの縦横の大きさを引いて2で割る。
その位置にウィンドウ自体を移動させる。
264 :
Name_Not_Found:2005/08/02(火) 20:32:40 ID:OsVy/1yY
質問です。
画像と文字で
<img src='
http://xxxxx.gif' align='left' alt='xxx'>
<br>hogehoge〜〜〜〜<br>
hogeghoge~~~~~<br>
hogehoge~~~~~~<br>
とやって、画像の横にテキストを表示させてますけど
この部分全体(画像とテキスト)をこのままの状態でセンタリングするにはどうしたらいいでしょうか?
よろしくお願いします。
>>264 <p>画像と文字</p>
p {
width: 適当px;
margin: 適当px auto 適当px auto;
}
とか。
266 :
265:2005/08/02(火) 21:19:07 ID:???
あ、どうせなら、img要素のalignはなしにして、
p {
width: 適当px;
margin: 適当px auto 適当px auto;
}
p img {
float: left;
}
の方が良かったかも。よしなに。
P {margin:auto}
<P>
<img src='
http://xxxxx.gif' align='left' alt='xxx'>
<br>hogehoge〜〜〜〜<br>
hogeghoge~~~~~<br>
hogehoge~~~~~~
</P>
268 :
Name_Not_Found:2005/08/02(火) 22:25:08 ID:UMEsU1bH
スタイルシートを組むときIE、MOZILLA、どちらを優先して作ればよろしいでしょうか。
269 :
264:2005/08/02(火) 22:41:08 ID:???
>>268 君が好きな方を想定したらええ。でもまぁ、UAを固定して考えるぐらいだったらUAごとにCSSを振り替えてやった方がええかもな。
んなことできるんだ
262 有難うございます
263 そうですか そっちにも行ってみます
273 :
Name_Not_Found:2005/08/03(水) 08:48:10 ID:mEP/rU6h
>>2を読んでみたのですが、、、サパーリ。。
質問します。
今までFirefoxで動作確認してきたのですが、IEで表示すると
多少ずれていました。
こちらはIEを見捨てられないのでなんとかしてこのズレを直したいです。
どうすればよいでしょうか?
275 :
Name_Not_Found:2005/08/03(水) 09:14:45 ID:mEP/rU6h
>274
読んでましたが・。。。
あ〜言えば こ〜言う
>>275 ずれると言われてもなぁ・・
極端なこと言えばブラウザによって「ずれ」が全く無い方が不思議だし
漠然としすぎててわからんのよ
ソース貼ってみれば
278 :
Name_Not_Found:2005/08/03(水) 11:22:23 ID:mEP/rU6h
<ul>
<li>メニュー</li>
<ul>
<li><a href="./index.html">ホーム</a></li>
<li><a href="***.html">ページ2</a></li>
………
</ul>
</ul>
279 :
Name_Not_Found:2005/08/03(水) 11:28:10 ID:mEP/rU6h
これで、CSSの方で
#navigation ul li{
background: transparent url(img/bg.gif) top left no-repeat;
}
したのですが、Firefoxでは「メニュー」という題名の背景と下のメニューリスト(四角い枠で囲まれている)
が揃っているのですが、IEだと、下のメニューリストが右にずれています。
IE専用のスタイルシートを読み込ますでFAですか?
そもそもHTMLがinvalidじゃん
281 :
Name_Not_Found:2005/08/03(水) 11:59:06 ID:mEP/rU6h
そうだよね。。。
なんで「メニュー」っつーのまで<li>に入れてるんだかわからん。
見出し付けりゃいいじゃん。
283 :
Name_Not_Found:2005/08/03(水) 12:15:50 ID:mEP/rU6h
確かに・・・・・・・・・・・・・・orz
□
□
□
□
四つのリーグ表を
□□
□□
ってしたくて、それぞれのリーグ表をdiv要素でくくってrelativeでポジション指定したんですが、
もともとリーグ表のあった部分にスペースが開いてしまい困っています。
ページ自体がちょっと縦長なのでrelativeで位置指定したほうがいいかなと思ったんですが
absoluteのほうがいいのでしょうか。その使い分けも教えていただけると幸いです。
floatではあかんの?
表はtableを使ってください。
>>285 こういう場合はfloat使うのが普通なんですか。
なにぶんかたよった知識なもので・・・。
>>286 一応表自体はtableで作ってます。
おふた方どうもです。
floatを調べてわからなかったらまたきます。
288 :
Name_Not_Found:2005/08/03(水) 17:13:56 ID:mEP/rU6h
つ position
ゴメス、あげちゃった。
ひとつの表に4つというのは思い浮かばないのだろうか???
IEで、display:block のバグってありますか?
エビfliat
すみません、質問させてください。
段組ではないのですが、下のようなレイアウトで
高さをディスプレイに合わせて自動的に調節するように
できないでしょうか。文字量が足りなくても、多くても、
下マージン0になるようにしたいのですが…。
親要素{height:100%;}
div{height:100%;}
で試してみましたがNNなどでは途中でDIV要素が切れてしまい
うまくいきませんでした。
overflowや画像を使用すればできないこともないのですが、
もう少し他にうまい方法はないかと探しています。
分かる方いらっしゃいましたらぜひともご教示ください。
よろしくお願いします。
| ̄ ̄| ̄ ̄ ̄ ̄| ̄ ̄|
| | | |
| | | |
|背景| DIV |背景| 常に上下余白0
| | 要素 | | DIV要素と背景の背景色が異なる
| | | |
| | | |
 ̄ ̄  ̄ ̄ ̄ ̄  ̄ ̄
height: auto
>295
height: autoだと、文字量が足りなかった場合、
下のようになってしまうんです…。
| ̄ ̄| ̄ ̄ ̄ ̄| ̄ ̄|
| | DIV | |
| | 要素 | |
|背景| |背景|
| | ̄ ̄ ̄ ̄| |
| | 余白 | |
| | | |
 ̄ ̄  ̄ ̄ ̄ ̄  ̄ ̄
weight
>>294 だいたいそれに合うような背景画像を作るもんだ。
残念ながら今のCSSに「段組」のためのものはないからやむを得ない。
299 :
295:2005/08/03(水) 22:40:59 ID:???
すまん、何が言いたいかワカンネ。それにAAがズレた。
Windowsに切替えるノシ
だったらmarginすべてautoにしてしまえw
>298
現状でCSSのみでの表現は不可能ということですね。
う〜ん、残念ですが、画像か何かで手を打ちます。
>299
こちらこそ説明下手で申し訳ないです。
HTMLで組んだ場合、下のソースをIE表示したように
したかったんです。
<body bgcolor="#000000">
<center>
<table bgcolor="#ffffff" width="600" height="100%">
<tr height="100%">
<td height="100%">
テキスト
</td>
</tr>
</table>
</center>
</body>
お二方ともご意見をくださいまして、本当にありがとうございました。
302 :
Name_Not_Found:2005/08/03(水) 23:09:11 ID:3I0TjXIz
IE6でカーソルをドラッグして文字を範囲選択するとチカチカしたり関係無いところまで選択されてしまったりする不具合があります。
原因がよく分からないのですが、floatとposition:relativeを多様しているからでしょうか?
このような不具合にあったことがある人いらっしゃいませんか?
正常です
CSS で文字をボックス内の縦のセンターに配置するにはどのように
するのでしょうか?
現在はpaddingで中央にくるように調整してます。
top:50% ???
306 :
302:2005/08/04(木) 00:15:21 ID:V7LBNRsx
これで正常なんですか?
>>306 IE がうんこなだけ
ソースのせいじゃない
という意味でそれで正常
例えば200px×200pxのボックス内にテキストを配置した場合、その
テキストが縦の中央にくるような意味なんですが
横はtext-align: center;でセンターにそろうのに
縦のセンターぞろえの指定がわかりません・・・
vertical-align: middle;ではそろわないので・・
他に指定方法があるのでしょうか?
<200x200のボックス>
<div class=content>テキスト</div>
</200x200のボックス>
div.content {position: absolute; top:50%;}
とか?
ああでも複数行なら無理だね・・・
311 :
Name_Not_Found:2005/08/04(木) 04:17:19 ID:+x1Wm/E1
こんばんわ、
優先度の高いインラインスタイルでA:hoverを設定したいので↓
<a href="
http://www.w3.org/"
style="{color: #900}
:link {background: #ff0}
:visited {background: #fff}
:hover {outline: thin red solid}
:active {background: #00f}">■■■</a>
↑としたのですが全く反応しません。
どのように修正したら良いか教えてください。
あと、インラインスタイルで擬似クラスの書き方とかサンプル有で説明してるサイトなどあれば教えてください。お願いします
>>308 その手の質問は何度も繰り返されてるから過去ログ嫁。
314 :
311:2005/08/04(木) 11:39:12 ID:???
313>>
釣りのつもりはないのですが...むしろ2ちゃん板は初めて(だったと思う)書込みですし。
...ageてしまったので逆に釣られたのかな?それとも出来ない事なのでしょうか??
サイトによってインラインスタイルは{}使わない。となってたり 使う。となってたり
煮詰まってます。44以前の過去スレ見ようともしましたが『ビューア(通称●)なしでは読めません。』と... orz
>>314 そもそもstyle属性が使用から消えてしまったぐらいなので、
style要素を使うか、別のファイルに書いてlink要素でインクルードしましょう.
316 :
315:2005/08/04(木) 12:17:50 ID:???
×:使用
○:仕様
はいはいわろすわろす
>>311 お前の最大の失態は、外部CSSと、HTMLに直接書くのとを混同してることだ。
322 :
Name_Not_Found:2005/08/04(木) 14:20:15 ID:EHMy1R/J
>>320 これか
>要素に加え、'::first-letter' 擬似要素を使って要素の 1 文字目にもプロパティを 設定する。
>この場合は大括弧 ({...}) が必要になる点に注意してください。
<p style="{color: #090; line-height: 1.2}
::first-letter {color: #900}">...</p>
>>320 ワーキングドラフトは草案なので、一部の先行実装をのぞいて、そのまま使うのは
まだ見送った方がいいです。
勧告レベルでも未実装・誤実装が多いのが現状。
>>320 w3cって横の連携が無いっていうけど本当だな。
そのWDではいろんなxml応用言語がstyle属性をサポートする事を勧める
とか言っておいて、
かたや、XHTMLからは消してるしな。
SVGなんかはcssを採用した事自体が間違いだったとか言い出す始末。
<div id="block1">
<h1>hogehoge</h1>
<div id="block2"><div id="block3">
<div id="main"></div>
<div id="sub"></div>
</div></div>
</div>
#block1 { position:relative; margin:0 auto;
327 :
326:2005/08/05(金) 10:59:32 ID:gcXc9dJx
ごめん、途中で投稿しちゃった
それと質問なんでage
CSSの部分から続き
#block1 { position:relative; margin:0 auto;}
h1 { height:100px position:relative; }
#block2 { float:right; width:100%; margin:0 0 0 -200px; }
#block3 { position:relative; margin:0 0 0 200px; }
#main { margin:0; padding:0; }
#sub {float:left; position:relative; z-index:1; }
* html #block2, * html #block3, * html #sub { height:1%; }
こんな感じなんだけど、IE6で見ると#block2以下の要素が全てはみ出してh1に被ってしまう。
ウィンドウのサイズを少しでも変えるとすぐ直って、それからは全画面に表示にしても大丈夫なんだけど、
更新したり新しくページを開いたりすると必ずこうなる。
他には特に問題になりそうなところ無いんだけど、誰か原因わかりますか?
328 :
326:2005/08/05(金) 11:00:36 ID:gcXc9dJx
一箇所間違いがあった
追加で、#sub { width: 180px; }
>>326 position: relativeの祟りだ。
なんでもいいけど float:right; width:100%; には笑った。
331 :
326:2005/08/05(金) 11:39:19 ID:gcXc9dJx
やっぱposition:relative;のせいか(´・ω・`)
でもこれ外したらIEで酷いことになるし・・・
いったい全体どうなってんだかワケワカメ
つかひどいCSSだから、ちょっと勉強しなおした方がよいかと。
333 :
326:2005/08/05(金) 12:28:24 ID:gcXc9dJx
どの辺りが酷いの?
326が省いた部分も含めて全体見てからじゃないと断定はできないけど、
「なんでこんな指定してんの?」って思う部分が多々ある。
それこそ330の言うあたりとかも。
335 :
326:2005/08/05(金) 13:39:27 ID:gcXc9dJx
ああ、
>>326のソース自体が間違ってるやorz
<div id="block1">
<h1>hogehoge</h1>
<div id="block2"><div id="block3">
<div id="main"></div>
</div></div>
<div id="sub"></div>
</div>
実際はこんな感じですた
それとなんとか問題は解決したぽ
またposition:relative;でw
好きにしとけ
むしろdiv厨?
div厨の定義ってなんだ?
<div id="main">
<h1>コンテンツ1</h1>
<p>コンテンツ1の本文</p>
</div>
<div id="navi">
<ul>
<li>コンテンツ1(以外は製作中です)</li>
</ul>
</div>
おしい。あと一つでおれもdiv厨になれた。
span使うか・・・・・
<div id="body">
<div id="header"><div id="title"></div></div>
<div id="main"><div id="contents"></div></div>
<div id="navi"><div id="menu"></div></div>
<div id="footer"><div id="copyright"></div></div>
</div>
<dl></dl>はまじでオススメかと思う。
>>344 上から順にやっていけばそんなに難しくないよ、そのレイアウトなら。
結構入門つか練習向きだからやってみれ。
>>345 そうですか。
では、勉強してみます。。。ども。
1ページに<div>100個使ってる僕はヘタレですか?
昔は気にしてたんだけどね、どうでもいいやって感じになりました
お前ら!もったいぶらず使えよ
流石に100個はどうかと思う。
使い方によるのかもしれんが。
divとaとimgにcssだけあれば、あと何もいらないも〜ん。
ただしいhtmlとかバカじゃねーのって感じ?
>>347 もったいぶってるんじゃなくて、普通に使う必要がないから
使ってないだけだが。
<div></div>なんかページに1,2組あれば十分立派なレイアウトが出来る。
釣り乙
レイアウトはdivなんか一組も必要ない
ちゃんと見られるデザイン組むならdivは必須だが
>>352 日本人ならちゃんと意味の解る言葉をしゃべって下さい。
ボビーじゃあるまいし
>>354 意味不明。
ふんいき的にはCSSとは関係なさげ。
とりあえず日本語の勉強からやり直しを推奨。
CSSにはコマンドなど有りません。
スレ違いでしょ?
>>357 そうですか。他の所で奇異的舞うs
ありがとうございました。
奇異的マウス
ここは外国からの方が多いインターネットですね。
html,body{
height: 100%;
text-align: center;
}
#wrapper{
width: 705px;
height: 100%;
margin: 0 auto;
text-align: left;
background-color: #FFFFFF;
}
画面下端まで背景色の白色が続くようにしたいと思い、
テンプレの「height: n%;の正しい仕様」を読んで上記のように記述したのですが
firefoxで観覧した場合、あくまでもウィンドウサイズの大きさが100%の基準になってしまい
背景色が途中で切れてしまいます。
これらの症状を回避する方法を教えていただけないでしょうか。
質問
divで(ry
364 :
Name_Not_Found:2005/08/07(日) 15:03:31 ID:/3magT4W
見出しを利用すると、その見出しの上下によくわからない余白ができるのですが、
どうしたらその余白を消せますか?
普通の文を書くとページの上ぴったりにくっつくのですけど、見出しになると
にょきっと間が開いてしまうのです
366 :
364:2005/08/07(日) 15:23:53 ID:???
>>365 単純な一行で…
ありがとうございました!!
背景を前面に持ってくるにはどうしたらいいんでしょうか?
>>368 * {
margin:0;
padding:0;
}
371 :
367:2005/08/07(日) 22:19:43 ID:???
ムリなんでしょうか?
背景を前面って
どこの背景を 何より前に置きたいのか
それを言ってくれ
言葉足らずですみません。
ブログで右サイドバーや左サイドバーに画像がかぶっている奴がありました。
それを作りたいと思った私は、背景に絵を描いて、あと見えなくなってしまう部分を透明に
したら作りたいようなブログができると考えました。
考え方が間違っているのでしょうか?前見たブログを少し探してみます。
背景は背面にあるから背景と言うんです
ブラウザはNetscape4.8です
378 :
367:2005/08/07(日) 23:19:13 ID:???
>>378 こういうのやるには、本当に透過PNGを使ってセル画のように重ねるか、透過っぽく見える画像をつくって固定配置する方法があります。
どっちにしろ使う画像自体が大きいので、実用性も低くて自己満足程度にしかなりませんが、どうしてもやりたいのなら本を買うなりググるなり、テンプレにあるサイトを見るなりしてください。
そうですか。ありがとうございましか。
>>345 アレからやってみたのですが…
よければアレにあった解説サイトをお願いします。
>>377 いい加減、最近のブラウザ使った方がいいと思う。
384 :
Name_Not_Found:2005/08/08(月) 09:34:32 ID:VDTgentT
UAごとに振り分けられるらしいんですが、詳しく解説してるWebサイトご存じでしたら、お教えくださいorz
ありません
>>382 黄・緑・青のブロックをdivでひとまとめにするとわかりやすいかも。
387 :
Name_Not_Found:2005/08/08(月) 11:25:32 ID:VDTgentT
画像をインラインで並べたいと思っています。
ソースを下記のようにしたのですが、画像と画像の間にスペースが
空いてしまいます。どうしたらいいでしょうか?(どのブラウザでもなります)
■HTML
<div id="navi"><ul>
<li><img src="test.gif" width"50"height"50"></li>
<li><img src="test.gif" width"50"height"50"></li>
</ul>
</div>
■CSS
div#navi {
padding: 0px;
margin: 0px;
text-align: left;
}
div#navi ul{
margin: 0px;
padding: 0px;
}
div#navi li {
list-style-type: none;
display: inline;
}
#navi li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
}
じゃないかな。
試してないからわからないけどね。
>>388 <ul
><li>なかみ</li
><li>なかみ</li
></ul>
隙間の犯人は改行コード。
犯人って言い方はおかしかった。
実体、のほうがしっくり。
img のmarginも0にしてカットしないと。
394 :
Name_Not_Found:2005/08/08(月) 17:50:57 ID:CoMCVpkI
position: absolute;にて要素を重ねました。
z-indexをそれぞれの要素に指定してみても、まったく反映されません。
どうすればいいのか教えてください。
DIV 1
DIV 2
という順番で記述しました。現状、DIV 1 の上にDIV 2が覆い被さって、1を隠しています。
これを、2の上に1が重なるようにしたいです。
1にz-index: 2; として、2には、z-index: 1; を指定してみましたが反映されませんでした。
(使い方があってるのかも不安です)
おねがいします
ここの過去ログみたいんですが人大杉で見れないみたいです
専用ブラウザでも見る方法がわかりません・・・
どうしたらいいのんでしょう
リンクの下線を破線に指定しているのですが画像にリンクを張った時にも、画像の下に破線が表示されてしまいます。画像のみ下線を解除するにはどのような方法があるのでしょうか?
a:link {
text-decoration: none;
color:#FF9200;
border-style: dashed;
border-width: 1px;
border-color:#FF9200;
border-top: none;
border-left: none;
border-right: none;
}
a:visited {
text-decoration: none;
color:#DBB6AA;
border-style: dashed;
border-width: 1px;
border-color:#FF9200;
border-top: none;
border-left: none;
border-right: none;
}
a:hover {
text-decoration: none;
color:#DB6D00;
border-style: dashed;
border-width: 1px;
border-color:#FF9200;
border-top: none;
border-left: none;
border-right: none;
}
397 :
Name_Not_Found:2005/08/08(月) 18:55:34 ID:VDTgentT
img{ border: none}
??
398 :
396:2005/08/08(月) 21:27:38 ID:???
>>397 ええと、私へのレスでしょうか。
そのタグを挿入してみたのだけれども、うまくいきません…
>>8の一番下の方法もダメでした…
>>398 現行のUAではCSS2の絞り込みに対応してないから、
imgにさらに別の親要素(div とか pとか)で別のクラスを指定して、
p.**** a:link...
とかで指定するとかどうだろう?
h2 ほにゃらら h2
p
ほげほげ
p class="****"
a 画像 /a
/p
ほにゃほにゃ
/p
こんな感じ。
400 :
396:2005/08/08(月) 22:18:18 ID:???
>>399 ススススイマセン…せっかくご教授くださっているのに
おっしゃっているのことがあまりよく理解できず…お恥ずかしい。
ですが、クラス指定ということをすればいいのだな、ということは分かったので下のように記述を追加して
P.クラス名 a:link{
border-style: none;
}
P.クラス名 a:visited{
border-style: none;
}
P.クラス名 a:hover{
border-style: none;
}
クラス指定を入れたPで画像を囲んで解決しました。
ありがとうございます、助かりました!
401 :
Name_Not_Found:2005/08/09(火) 01:14:08 ID:MhLyXefI
すみません。質問です。
CSSでリンクを貼った箇所のスタイルが読み込まれなくなりました。
CSSのソースは
.text{font-size:14; font-werght:bold; line-heght:14px;}
でHTMLの方では
<td nowrap class=".text"><font color="#1b3670">
<storng>hoge</strong></font></a></td>
引継で他の人が作ったCSSなんです。
会社がウィンドウズXPでIEのヴァージョンは多分6だと思います。
で、今日家のMacでCSS書いてちゃんと表示されました。
以下CSSのソース。
<style type="text/css">
.navigation a:link{
font-size:24px;
color:"#1b3670";
}
</style>
HTMLのソース
<td class="navigation">
<a href="a.html">てすと</a></td>
これだとちゃんと表示されたんです。あとDream Weaverを使ってて表示が
おかしくなったんですが関係ありますか?どなたか分かる方レス下さい。
402 :
Name_Not_Found:2005/08/09(火) 01:17:58 ID:MhLyXefI
すみません。ソースに間違いがありました。
<td nowrap class=".text"><a href="hoge.html>
<font color="#1b3670">
<storng>hoge</strong></font></a></td> です。
>>401,402
言っている意味がさっぱりわかりません。
そのソースだとCSSを使う意味が全くないし。
404 :
Name_Not_Found:2005/08/09(火) 01:48:04 ID:MhLyXefI
あっ、すみません。
要は前の人が作ったCSSを適用した部分にリンクを貼ったら
スタイルが壊れてしまったって事です。
だけど家で実験してみたら上手くいったんです。
わかりにくいですか?すみません。
>>404 要は元のお寒いソースをあんたが手直ししたってことでしょ?
下ので方向性はあってるから、そのままa:linkとa:visitedとa:hoverとa:active
を指定してやれば済むのでは?
.navigation a:link {...}
.navigation a:visited {...}
.navigation a:hover {...}
.navigation a:active {...}
navigationの前にtdつけてもいいしさ。
td.navigation
まさかa:visitedを指定せずに訪問済みリンクを見て、
崩れてるとか騒いでるんじゃないよね?
>まさかa:visitedを指定せずに訪問済みリンクを見て、
崩れてるとか騒いでるんじゃないよね?
あっ、違いますw 参考になりました。どうもありがとうございます。
407 :
Name_Not_Found:2005/08/09(火) 11:30:58 ID:lfPMP2Yr
ブラウザごとに違う解釈を解消できるように
>>100 のように指定し、
それぞれのプロパティのマージンやパディングを指定したいのです。
ブラウザの持つデフォルトの値の一覧をどこかで見たような気がするのですが
「ブラウザ」「デフォルト」「初期値」「値」「マージン」「CSS」等で検索しても
見つかりません。
ご存知のかたいらっしゃいませんでしょうか?
410 :
408:2005/08/09(火) 14:00:12 ID:???
>409
あぁ、そっか。
自分、暑さでボケてた。 スマソ
部屋にクーラー欲しい... orz
右側にサイドバーがあるレイアウトの画面を作成しようと思っております。
IEでは全体の背景である白地部分がブラウザの画面下にくっ付いているのですが、
Firefoxで見ると、画面下の白地部分にわずかに隙間ができてしまっています。
CSSの「.back」の「border-width: 0px 5px 0px 5px;」を「border-width: none 5px none 5px;」
にすると白地背景部分はブラウザ画面にくっ付くのですが、
今度はサイドバーの下部分が浮いてしまいます(IE,Firefox共に)。
テーブルレイアウトですが、どなたかご教授下さいませ。
-つづく-
412 :
411:2005/08/10(水) 09:23:47 ID:???
-上のつづき-
#HTMLのソース
<BODY>
<TABLE width="500" height="100%" cellpadding="0" cellspacing="0" class="back">
<TBODY>
<TR>
<TD height="100%" align="left">
<TABLE width="800" height="100%" cellpadding="0" cellspacing="0" class="main">
<TBODY>
<TR>
<TD height="100%" width="580" valign="top"></TD>
<TD height="100%" width="220" class="sidebar" valign="top"></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
-つづく-
413 :
411:2005/08/10(水) 09:26:27 ID:???
-上のつづき-
#CSSのソース
BODY {
margin: 0px 0px 0px 0px;
text-align: center;
background-color: #000000;
}
.back {
margin: 0px auto 0px auto;
border-width: 0px 5px 0px 5px;
border-style: solid;
border-color: #ffffff;
background-color: #FFFFFF;
}
.main {
margin: 5px 0px 0px 0px;
}
.sidebar {
background-color : #FF0000;
}
以上です。
ご教授下さい。
>>411 何で書いたらこんなソースになるんだろ?
TABLEにデフォでmargin付いてるの知っているよな?
widthもおかしいぞ
415 :
Name_Not_Found:2005/08/10(水) 10:50:19 ID:dgu1HmJx
>>414 すいません。
widthの指定おかしかったです。
table {margin:0} とやったらどうなる?
オーサリング何使ってるの?
417 :
411:2005/08/10(水) 11:28:49 ID:???
>>416 オーサリングは使ってなく、エディタに書いてブラウザで確認して・・・
って方法で作成しております・・・。
418 :
407:2005/08/10(水) 12:14:27 ID:???
>>409 あー、これ! これです!
>>100のようにしたあとp要素やらul要素やらをどうしたもんかと悩んでました。
>>408さん共々、ありがとうございました。
もうずっと人大杉
420 :
408:2005/08/10(水) 14:05:27 ID:???
>>418 ん?あれ?
>>100 はデフォルトのスタイルシートを殺してるんだから
>>407の
> ブラウザの持つデフォルトの値の一覧
よりかは…って説明するつもりだたよ orz
二重にボケてたよ orz
暑さで脳ミソ溶けてきたよ...orz
421 :
Name_Not_Found:2005/08/10(水) 18:17:44 ID:iF7Nwlvu
Cellspacing="0" Cellpadding="0"
は、スタイルシートで表記できないのでしょうか?
>>421 td th {
padding:0px;
margin:0px;
}
>>422 いらっしゃい。
次からはリンクじゃなくて内容を写そうな。
質問者に余計な手間をかけちゃいけないから。
.hoge {
margin-left: auto;
margin-right: auto;
}
<div class="hoge">
いろいろ。pとリストとか
</div>
で、要素がセンタリングされるが中身はセンタリングされない。
こういう事をしたかったの?
>>424 すみません。これからはちゃんと本文を写します。
その通りのソースにしてみたんですが、要素自体も
左揃えになってしまいました・・・・
>>425 悪いが全く意味が解らん。
もう一度最初から具体的に何をしたいのか教えてくれ。
このスレの人でマルチカラムやってる人は
CSSでやってる?それともTABLE?
CSSでやるとネスケで観ると形崩れるようだけど・・
>>427 太古の遺産にはスルーさせればいいじゃん。
いくつか方法あるし。
そもそもおまいわざわざCSSのスレにきてなに言ってんだ?
>>426 えっと、まずbody
<h1>〜</h1>
<p>〜</p>
<div class="menu1">〜</div>
<div class="menu2">〜</div>
という構成で作ったのですが
<div align="center">
<h1>〜</h1>
<p>〜</p>
<div class="menu1">〜</div>
<div class="menu2">〜</div>
</div>
にすると、pの中身に改行があるので、文字数の少ないところは
○○○○○○○○○○○○
○○○○○○
(○=文字列)
になってしまいます。
これを、
○○○○○○○○○○○○
○○○○○○
のように、p自体は中央、pの中では左揃えにしたいです。
430 :
427:2005/08/10(水) 18:56:32 ID:???
何言ってんだ って、俺そんな変な事聞いたと思ってないけど
overflow:auto でスクロールボックスを表示すると
マウスのスクロールホイール(?)が無効になってしまうのですが、なぜですか?
<div align="center">
まずこれがいくない。
.hoge {
text-align: left;
margin-left: auto;
margin-right: auto;
}
<div class="hoge">
いろいろ。pとリストとか
</div>
ちなみに外部スタイルシートとか分かってる?
基本が出来てないようだからスレの
>>2-10あたり見て勉強した方がいいよ。
>>431 たしかにそうなる場合が多いね
だけど文句はブラウザに
div の中で、テキストとimgを テキストは左そろえ、img は右そろえで表示したいんだが、簡便な方法を教えてくださいな。
|テキスト 絵|
みたいな感じ。
>>434 div img {
float: right;
}
>>435 |テキスト |
| 絵|
こんな感じになります。何故に?
<img>
<p>
>>437 div img {float: right;}
div p {float: left;}
>>432 調べてきたら原因が分かりました。
お手数おかけしました。
>>423 適当な事書いてんじゃねーよ
セルにマージンなど無い。
table{border-spacing:0;}
td,th{padding:0;}
>>430 cssスレにいる人がテーブルでレイアウト組むわけないと思うよ
>>442 marginはApplies to: all elementsですよ。
実装が対応できてないだけでしょう。
自分の無知を棚に上げて恥ずかしい人ですね全く。
442の1行目をそっくりそのまま返します。
>>444 Internal table elementsはdo not have marginsですよ。
あなたが知らないだけでしょう。
自分の無知を棚に上げて恥ずかしい人ですね全く。
442の2行目をそっくりそのまま返します。
(442の1行目って「
>>423」ですよね?)
ついでにCSS 2.1では
Applies to: all elements except elements with table display types other than table and inline-table
とりあえず落ち着けよ。
質問者>421の要望にこたえているのは、442で正解。
447 :
Name_Not_Found:2005/08/10(水) 21:20:59 ID:OU/H8eWh
UAごとにスタイルシートを適用したいと思うんですが、方法がわかりません、ご教授ください。
私の組んだCSSにはIEとMozillaでの表示に食い違いがありますので、それを解消したいためです。
ヨロシクお願いします。
449 :
Name_Not_Found:2005/08/10(水) 21:34:18 ID:OU/H8eWh
>>448 サンクス!!
おいらが英語わかんないからって、わざとそんなの出してきたな!!
おまい大好き!!
ほこりかぶった英和辞書開いてくる ;;ノシ
>>447 日本語ならバグ辞典みれ
ここのテンプレにあるから
451 :
Name_Not_Found:2005/08/11(木) 00:34:38 ID:ie8c9KWS
CSSで、リンクテキストを画像に差し替えています。
WindowsIEだとマウスオーバーしたときに、一瞬フラッシュのように白くなってしま
います。これを回避する方法ってないのでしょうか?
ローカルで試すと全く問題ないのですが、サーバにアップするとこういった現象が
出ます。色々なサーバを試してみたりしましたが、ローカルサーバ以外では全て
同じでした。
p{
display:block;
text-indent:-9999px;
}
a{
display:block;
width:50px;
height:50px;
background-image:url("test.gif");
background-repeat:no-repeat;
background-position:0px 0px;
}
a:hover{
background-position:0px -50px;
}
<p><a href="">リンク</a></p>
背景画像は、通常用とロールオーバー用の2つのイメージが連結してあります。
GIF・JPG・PNGと色々な形式で試してみましたが、どれも同じでした。
画像ファイルサイズは500バイト程度です。
段落をすっ飛ばすとは大胆だな。
453 :
451:2005/08/11(木) 00:43:51 ID:???
>>452 ああ、ごめんなさい。マークアップは例のために適当に付けてしまったのでアレな感じです。
しかも、text-indent:-9999px;がアレなのも見逃してください。
>>451 aの方を普通に画像リンクにして、visibilityで切り換えてみるというのはどうだろう?
背景がホバー画像で、画像が普通の。
455 :
Name_Not_Found:2005/08/11(木) 07:33:47 ID:iP+3sZKc
floatで並べたブロック要素をbottomで合わせる方法を教えて頂きたく存じ申し上げる
vertical-alignでは駄目でござった
>>457 背景書き換えじゃ451と同じことだろ。
背景書き換え(ポジションずらし)でIEのレンダリングがちらつくから、
解消方法か代替案がないかということなんだが。
ポジションずらしじゃ無く、background-imageを変えればいいじゃん
背景の指定はaじゃなく、a:linkにしてはどうだろうか?
解決策が見つからないので知恵をお貸しください。
IE6とFirefoxを見比べながら作業しているのですが、
IEだとページの縦幅が短くても常にスクロールバーは右側に表示されて
いますが、Firefoxはスクロールが発生しないページではスクロールバー自体が
表示されません。
このせいで、Firefoxでスクロールが発生すると
そこだけバーの分だけ左にずれてしまいます。
overflowで常に表示というのも考えたのですが、
今度はFirefox以外のブラウザでバーが二重に表示されたり、もしくは
縦だけでなく横にもバーがでてしまったり。。とうまくいきません。
このような場合はどうやってすり合わせていけばよいのでしょうか。
>>461 IEの仕様です。
overflow: auto;
でもダメですか?
463 :
461:2005/08/11(木) 12:22:57 ID:???
>>462 autoだと結局IE側のバーが出たり消えたりするだけなので、
Firefox側が崩れることの解決にはならなかったです。
464 :
461:2005/08/11(木) 12:26:11 ID:???
書き忘れました。IEだとバーがでてもでなくても
表示領域に変化はありませんでした。どうも、
バーを領域の一部として考えるかそうでないかということみたいですね。
仕様と思ってあきらめるしかないのでしょうか(´・ω・`)
>>464 だね
ゲイツに文句をいいつつ自分のサイトに火狐へのリンクでもはっておこう
それが気になるのは自分だけさ
我こそはCSSマスター…
CSSを極めし者である。
私が解決できない質問など、この世に存在しない。
分からない事があれば何でも私に相談しなさい。
ただしHTML文とCSS文は必ず提示するように!
ちなみに私もです
あの世の住人の質問でもオッケーですか?
なんでもこいや
>>472 タクラマカン砂漠に飛んでカメラのシャッターを切る
>>473 無理だ。作者さんは本当に写真撮りに行ったの?
それとも、素材サイトから借りたとか?
>>472 そんなことここの住人が知るかよ!
作者に直接訊けばいいだろウンコ野郎が!
そういうことは作者に聞け
474=ウンコ野郎 でよろしいか?
すみません。 ちんこかまんこにしてくれますか?
>>475 いや、そうじゃなくてですね。
CSS Zen Garden のルールがわからなくて。
素材サイトから借りた画像でもOKなのかなーと、思って。
あ、自分が出展するわけではありませんよ。
>>479 それこそ運営側に聞け
つーかな、質問する前にせめて一分間ぐらいは頭働かせようや
いずれにしてもこのスレに合わない質問な訳だが
だって、英語じゃないですか?
479=ウンコ野郎 決定!!
はいはいわろすわろす
仁義なきウンコ論争。
「うう」
487 :
Name_Not_Found:2005/08/12(金) 18:31:18 ID:BsaIeszE
CSSって出来上がりまでが楽しいんだよね、完成図を妄想して組んでいくのがたまらなく快感なんだよね、
出来上がった時って、射精したときと似てるよね・・・おまいらどうよ(;´Д`)ハァハァ
あたし女だから射精なんてしないんだけど・・・
>>487 貴男のをお口で受けたいわ うふっ
さすがに射精ほどではないが、妙に爽快な達成感はあるな。
苦労したときなんて特に。
射精のあっけなさ だろ
しかもオナニーだよな
何とも言えない達成感を見事なまでにぶち壊してくれるUAがあるよな。
がてs
脳内ブラウザでは多少のミスは許容してくれるのだが
ブロックとブロックの間が空いてしまうのですが、
どうすれば間を消せますか?
えーと、・・・・。
馬鹿にされてるのでしょうか。
ともかく、こんなところで聞いた私が馬鹿でした。さようなら。
>こんなところで聞いた私が馬鹿でした。さようなら。
この台詞って逆切れした質問者がみんな使うけど
そういうテンプレでもあるのかと思うくらい見事なパターンだな。
ほんとにテンプレあったら嫌だけどな。
よし、逆切れのテンプレを(ry
何様のつもりですか
>>499って普通の質問に見えるけど、なんで切れたんだろう?
カルシウムが足りないんだよ
きっとせいr(ry
ブロックの意味はわからんが、
とりあえず、paddingの上下方向に0以外の数値を加えればいいよ
よくあるこういうのはCSSでは出来ないでしょうか?TRはややこしくて
_______________
| なんたら. |
|~~~~~~~~~~|
| *ホニャララ |
| .|
|______________|
>>507 俺様の想像したものと同一ならば、できる
>>507 多分その想像であってます。ご教授願います!
>>509 <pre style="font-size: 100%;">
_______________
| なんたら. |
|~~~~~~~~~~|
| *ホニャララ |
| .|
|______________|
</pre>
完璧、だろ?
ここで聞いた私がバカでした・・
(;^ω^)うぇうぇうぇ
まってまって! ほんの、つかみのギャグだってば!!
参考urlとか絵で描いてみるとか、そうしてくれないとワカランよ
>>509 一番簡単な方法はそういうところのCSSをパクる>自分用に変える
>いじっているうちに覚えちゃう>カスタマイズしたくなる
>調べる>詳しくなる
515 :
507:2005/08/13(土) 01:30:04 ID:???
>>513 ヤフーのトピックスみたいな感じです。
>>514 結構ソースとか見るんですがどれもTRばかりで・・。
CSSでやってるのは見たこと無くて
>>515 ホニャララが文章でなんたらがその見出しですよね?
*は何か意味があるのですか?
CSS所学者だけど、練習ついでに分かる範囲で適当にYahooのトピックス風にしてみた。
でも、divの開きタグより前に、1画面に収まり切らずに自動改行されるような文字列入れてh2のfont-size小さくすると、
Firefoxで見た時にh2とulのボックスの間に隙間が・・・なんでだぁー orz
<style type="text/css">
#topics { width: 15em; }
#topics h2, #topics ul { margin: 0em; }
#topics h2 { background: #9b72cf; color: #ffffff; padding: 0em 0.125em; font-size: 1em;}
#topics ul { background: #f1f1fd; padding: 0.25em 0em 0.25em 1.25em; border-color: #9b72cf; border: 0.125em solid #9b72cf; }
</style>
<div id="topics">
<h2>トピックス</h2>
<ul>
<li>トピック1</li>
<li>トピック2</li>
</ul>
</div>
すいません
ブロックとはダイアブロックの事です
IE、フロート周りのバグ多くて腹立つ
firefoxと両立させんの難かしい・・
そこで振り分けだよ
えーと、・・・・。
馬鹿にされてるのでしょうか。
ともかく、こんなところで聞いた私が馬鹿でした。さようなら。
この流れマジウケタ
>>523 だから、間を無くするにはどうしたらいいですか?
>>525 ミュージシャン達の心の隙間をうめるには昔から酒と薬と異性と相場が決まってる
おもちゃのブロックの隙間をなくすにはしっかり丁寧に組んでいけばいい
どっちにしても板違いだな
>>500って、壮大な釣り?
なかなか面白い釣りだから、許そう。
margin:0;
印刷用CSSを作ってるのですが、アドバイスお願いします。
余白を作りたいのですが、だいたい何%ぐらいが適当でしょうか?
よろしくお願いします。
530 :
529:2005/08/13(土) 19:22:35 ID:???
529です。
余白は margin で空けたいと思います。何%が適当かと思いまして…
用紙サイズが秘密なようなので好きにしてください。
532 :
529:2005/08/13(土) 19:40:18 ID:???
A4
>>529 そんなことここの住人が知るかよ!
自分で適当と思う%を探せや!
%指定程度自分で試してすぐ実践出来るだろうウンコ野郎が!
534 :
529:2005/08/13(土) 19:50:29 ID:???
またウソコ野郎扱いされました。
じゃ、5%って言う事で…
せめてageろよ・・・質問する方
537 :
529:2005/08/13(土) 21:39:05 ID:???
538 :
529:2005/08/13(土) 21:39:50 ID:???
間違えた。474=529ですw
ID出ない上に、全く関連性のない質問で、
二度もウンコ野郎認定されるとは・・・さては
>>529はネ申だな?
いや、紙だろ。
541 :
529:2005/08/14(日) 01:37:39 ID:???
CSSの練習するから練習に適してそうなサイトおせーて。
答え見ないで同じデザインを書く。
>>526 ありがとうございました
隙間を埋める事ができました。
質問です
#footer {
background-color: black;
color: white;
margin : 0 auto;
padding-top: 5px;
padding-bottom: 5px;
width : 700px;
border-top : solid black 1px;
font-size : small;
text-align:center;
}
と打ち込んでいるのですが、フッターの下に少し余白が出来てしまいます。
余白を無くすにはどうしたらいいでしょうか?
546 :
Name_Not_Found:2005/08/15(月) 02:30:34 ID:CZjEltSP
>>545 position と bottom あたりをいじればなんとかなるんじゃないでしょうか
>>545 body{margin:0;padding:0;}
548 :
Name_Not_Found:2005/08/15(月) 02:56:41 ID:iWv/vJy9
>>546 >>547 position: absolute;
bottom 0px;
で解決出来ました。ありがとうございます。
>>548 ほんとに解決した?
footerがコンテンツに重なったりしない?
ttp://www.uploda.org/file/uporg170426.jpg.html <div class="title">
ここにタイトル。
</div>
<div class="content">
ここに本文。
</div>
.title {
border-bottom: solid 2px;
border-left: solid 2px;
}
.content {
border-left: solid 1px;
border-bottom: solid 1px;
}
画像のように線を飛び出させたいのですが、
どの様な指定をすれば飛び出てくれますか?
厨よ 正しいhtmlを書こうや
<h1>タイトル</h1>
<p>ここに本文</p>
>画像のように線を飛び出させたいのですが、
>どの様な指定をすれば飛び出てくれますか?
paddinを上手く使うんだよ。
paddingだた
右の線を背景にすりゃいんでない?
パッディン!!!
The paddin
(・∀・)パッディン♪
hatten ar din
div厨キターーーーーー(・∀・)ーーーーーー!!
CSSを外しても見れるようなサイト作りを
>>550 解決策としたら
>>554そのまま。
よし、スクリーンショットの画像加工して使え・・・
>CSSを外しても見れるようなサイト作りを
なんで?
>>560 釣り? ま、いいか。
構文として正しく書いてると、検索ロボットからも拾われやすくなる。
この先、ロボットのアルゴリズムや検索エンジンのサイト評価の基準は変更されていく可能性がある。
そこを正しい記述であれば、どのような変更になっても、生き残る確率は高くなるから。
562 :
560:2005/08/15(月) 20:23:00 ID:???
ども
なるほどねー
>>560=
>>550ですか?
<div>で括ってると、CSSが適用されない(CSS未対応ブラウザ、検索ロボット、音声ブラウザ)
端末で表示した時ぐらい想像つくだろ。
<div id="titile">見出し</div>
よりは……
<h1>見出し</h1>って(ry
正しい記述にこだわってない人間だ。
CSSが適用されない(CSS未対応ブラウザ、検索ロボット、音声ブラウザ)端末なんて、
ぜっっっっっったい眼中にないだろうな。
おっと、音声ブラウザはCSS大丈夫だった。
>>564何か?
566 :
質問者:2005/08/15(月) 21:03:36 ID:???
現在、勉強中の身であります。識者の方からのご返答お待ちしております。
小見出しの付いたリストを作っているのですが<H3>で囲んだ レビュー と
リスト aiueo との行間が開いてしまいます。
レビュー
・a
・b
・c
・d
・e
のように小見出しにぴったりリストをつけるにはどのようにすればよいのでしょうか?
HTMLとCSSをつづきに記載いたします。
567 :
質問者:2005/08/15(月) 21:04:53 ID:hoMnDXCD
つづき
<HTML>
<DIV CLASS="menu">
<h3>レビュー</h3>
<ul>
<LI>a</LI>
<LI>i</LI>
<LI>u</LI>
<LI>e</LI>
<LI>o</LI>
</ul>
</DIV>
<css>
h3{
font-size:0.5em;
margin-bottom:0;
}
ul{
margin-top:0px;
text-align:left;
list-style-image:url(sozai/yz_12.gif);
margin-left:20px;
padding-left:0;
}
li{
font-size:0.5em;
padding-left:0em;
padding-bottom:0.2em;
}
>>567 CSSに下記を追加してみてください。
*{
padding:0;
margin:0;
}
569 :
質問者:2005/08/15(月) 21:58:35 ID:hoMnDXCD
>>568 レスありがとうございます
これは h3 ul li すべてに入れるのでしょうか?
入れてみたのですが解決いたしませんでした。(−−;)
よろしければ引き続きのフォローをお願いいたします。
margin-top: -x
で地味に調整すれば〜〜?www
>>567 ulにレフトマージンを設定すると、IEとFirefox等のブラウザとで挙動が異なるので注意(IEのバグかな)。かわりにliに設定するとうまくいきます。
572 :
568:2005/08/15(月) 23:21:55 ID:???
>>569 ↓これでわかる?
h3{
font-size:0.5em;
margin-bottom:0;
}
ul{
margin-top:0px;
text-align:left;
list-style-image:url(sozai/yz_12.gif);
margin-left:20px;
padding-left:0;
}
li{
font-size:0.5em;
padding-left:0em;
padding-bottom:0.2em;
}
*{
padding:0;
margin:0;
}
>>572 >*{
>padding:0;
>margin:0;
>}
これを最後に持ってきちゃダメだろ
最初にしないと
*{
padding:0;
margin:0;
}
h3{
font-size:0.5em;
}
ul{
text-align:left;
list-style-image:url(sozai/yz_12.gif);
margin-left:20px;
}
li{
font-size:0.5em;
padding-bottom:0.2em;
}
これでOK!
いやだから違うっての
質問です
#banner {
background-color : white ;
margin : 0 auto ;
padding : 0 ;
width : 680px ;
}
#menu { color: white ;
font-size : medium ;
background-color : black ;
margin : 0 auto;
padding : 0 ;
padding-top: 5px;
padding-bottom: 5px;
width : 700px;
text-align: center;
}
と打つと、バナーとメニューの間に1行くらいの余白が出来るのですが、
余白を無くすにはどうしたらいいでしょうか。
>>577 >余白を無くすにはどうしたらいいでしょうか。
お前がつけた余白をなくせばいいと思います。
>>577 >padding-top: 5px;
>padding-bottom: 5px;
しっかり余白が開いてると思うのですが
580 :
577:2005/08/16(火) 00:06:33 ID:???
padding-top: 5px;
padding-bottom: 5px;
は無くしても、メニューバーの縦幅が小さくなるだけで
バナーとメニューの余白は詰まらないのですが・・・
>>580 ソース晒さないから分かるわけない
もしかしてこんな構成かもしれんから何も言えない
メニュー
・
・
・
内容色々
・
・
・
バナー
582 :
580:2005/08/16(火) 00:14:49 ID:ZH+86Xo2
スイマセン。
<div id="banner">
<h1><a name="top"></a><img src="アドレス"><a></h1>
</div>
<div id="menu">
というソースです。バナーとメニューの間には他の記述はありません。
>>566 h3{
font-size:0.5em;
margin-bottom:-5px;
}
これでばっちり!!
>>582 h1 {
margin : 0 auto;
padding : 0;
}
#menu {
margin : 0 auto;
padding : 0;
}
<h1 id="top"><img src="アドレス" alt="サイトタイトル"></h1>
<div id="menu">
585 :
580:2005/08/16(火) 01:12:34 ID:???
>>584 h1のmargin : 0 auto; padding : 0;を指定していなかったからでした。
h1 {
margin : 0 auto;
padding : 0;
}
を加えたら問題なく解決できました。
ありがとうございます。
「しばらく旅に出ます。探さないでください。」 クマより
>クマ
ホケ手術後の養生かい?
588 :
質問者:2005/08/16(火) 12:08:33 ID:???
亀ですみません。
たくさんの方からのアドバイスで頭がパニクっていました。
結局583氏の方法で隙間を埋めることが出来ました。
が、実は<h3>に続くulとの隙間だけではなく<h2>に続く<p>などにも
すきまが出来てしまって悩んでおりました。
たくさんの皆さんありがとうございました。
<h>に続く他の要素の間に余白が出来てしまう(ぴったり後に続かない)
ということで
>>577さんと同じ問題の様な気もしております。
はー、はじめて1ヶ月がたちましたが分からんことばかりですorz
最初はみんなそんなもんだ。
ひとつづつのんびり覚えていけばいい。
がんがれ
590 :
質問者:2005/08/16(火) 13:35:01 ID:???
ほんとにありがとう
例の隙間で盆休み2日つぶしますた。。。
paddingなどにマイナスを使うのを覚えて本日の作業ははかどっております。
がんがりまーす
591 :
質問者:2005/08/16(火) 13:46:51 ID:WunMPhZC
お言葉に甘えてもひとつ質問投下よろしいでしょうか?
list-style-image:url(sozai/yz_12.gif); ではリストマークと文字とにずれがありましたので
li {
padding-left: 12px;
background: url(hogehoge.gif) no-repeat 10px 0.5em;
list-style: none; }
に変更したところliの行間が以前より開いてしまいました
以前は li { padding-bottom:-0.2em; } で行間を調整していましたが
-0.2emを変更しても行間が変わらないのはなぜでしょうか?
どうぞよろしくお願いいたします。
行間はolに
line-height: *;
paddingに負の値は指定できない
>>591 よし分った
行間を完璧にしてやろう
これをスタイルシートの 一 番 最 後 におきたまへ
* {
border: 0px none;
margin : 0;
padding: 0;
list-style: none;
line-height:0;
}
nanisitennda omae
<pre>タグと同じことをcssだけで実現出来る?
.pre{
font-family:monospace;
white-space:pre;
}
599 :
597:2005/08/16(火) 16:13:45 ID:???
すいません。激しく説明不足でした。
<body>内のどこにも<pre>タグを置かずに
preと同じ動作(自動改行)をさせたいのですが、
cssで可能でしょうか?
bodyの属性にそのようなものはあるのでしょうか?
601 :
597:2005/08/16(火) 16:32:43 ID:???
改行されないようですが、
html内で何か指定する必要がありますか?
つーか、<pre>で括る意味があるなら<pre>で括るべき。
HTMLの意味ないじゃん。
603 :
ウソコ野郎:2005/08/16(火) 16:35:20 ID:???
ふぅ。。。。。
604 :
597:2005/08/16(火) 16:44:12 ID:???
やはりそうですよね。
ウソコ野郎ありがとうございます。
605 :
質問者:2005/08/16(火) 17:02:15 ID:???
またまた皆さんありがとう
盆休み最後の今日もパニ食ってますので
もー少し悩んでみます。。。
606 :
Name_Not_Found:2005/08/16(火) 17:28:27 ID:dUU073i9
みなさまに質問ですが。ulで横並びのメニューをつくりたいのですが、どのブラウザでも適用できるcssの記述のしかたはありますか?
>>599 >preと同じ動作(自動改行)をさせたいのですが、
なんで自動改行なんだ?(w
どのブラウザでもってのは当然、css非対応はのぞく、だよな?
609 :
Name_Not_Found:2005/08/16(火) 17:42:49 ID:dUU073i9
一度自分でcssを記述したところ、メニュー自体が消えたり、
ぜんぜん違う位置にあったりで。なにかコツがあるんですかね?
610 :
ウソコ野郎:2005/08/16(火) 17:48:18 ID:???
>>609 floatじゃないの?
しかし、全てのブラウザってのは非対応は除くって事だよな?
じゃないと無理。
611 :
Name_Not_Found:2005/08/16(火) 17:55:26 ID:16hbKc7B
まちがって消しちゃった
ブラウザ終了のタグしらない?
display: inline;
613 :
Name_Not_Found:2005/08/16(火) 18:04:09 ID:dUU073i9
614 :
ウソコ野郎:2005/08/16(火) 18:07:11 ID:???
>>613 釣り?CSSを十分にサポートしていない古い
ヴァージョンのブラウザを使っている方がまだいることをお忘れなく。
>>606であなたが、「どのブラウザでも適用できる」って書いたから
誤解してないか?と思ったり
615 :
Name_Not_Found:2005/08/16(火) 18:30:13 ID:16hbKc7B
>>612 ブロック要素のdisplay: inlineはIEでしか使えなかったという苦い経験があります
そんな僕はfloatちゃん!!!
何いってんだ?
NN4の呪いが頭から抜けないオサーンだろ。
auがPCサイトビューワーとかCMで謳ってたけど、あれってどうなのよ
「フルブラウザ」という単語はドキュモしか使えないので。
DQM
ドラクエモンスターズ
>>620 ハァ?いつそんな法律が出来たんだよ?
勝手に使えばいいだろが。アホか。
>>622 昭和35年4月1日にできた。
>商標法施行法
>第1条 商標法(昭和34年法律第127号。以下「新法」という。)は、昭和35年4月1日から施行する。
>>606 li を float:
横並びメニューが終わったらちゃんと clear: してね
css対応の主要ブラウザなら大丈夫だから
どんな感じのメニューかしらないけど、float:が妥当だと思うよ
625 :
愚痴:2005/08/17(水) 11:32:15 ID:???
IEにはとことんあきれた。前からバグ多くて
嫌だったが、まさかmargin:autoも使えないとは…_| ̄|◯ガクリ
今日はじめて知っちゃったんだけど。
今までずっと、一部のサイト中央構えしてたからIEユーザは
左構えで見えていたのか orz
打倒MSって日はこないかねぇ?
厨房臭いレスでスマソ…
margin:autoじゃなくて
margin-left:auto
margin-right:autoだった。
>>625 いまどき互換モードなんかでページを作ってるからですよ
>>628 あ、それなら見ましたよ。
俺が主張したかったのは、せっかく製作を楽にしてくれるCSSなのに
糞IEのおかげでIE専用のスタイルシートを読み込ませてるから面倒なのです。(読み込ませなくても、IEのおかげで無駄なテクニックを使ってるし…)
text-alignだと、いちいちまた設定しなおさないといけないわけですし(左構えにしたい時leftを指定するの面倒)
どうすればあの糞IEを潰せるのだろうか…と。。。
>>629 Windows版のIEへの対策の弊害対策ってとこ嫁
スレ違いだけど……
俺のサイトでも97%がIEユーザなので、困った者だ。
どうしてFirefoxやNNが広まらないのか…
・初心者はわざわざ設定なんかしたくないだろうから、使いなれたIEのままである
・そもそもNNで観覧するメリットを理解していない人が多い。(IEは世界最高のブラウザって思ってる)
・技術系重視のサイトは、あらかじめIEユーザ以外は弾く(Java Scriptは痛い)
・NN系が違和感ある
・IEしか知らない奴が多い
・MSがIEデフォにしてる限りなかなかNN系へ移る奴はいない
こんなものか?
・最初から入ってるのがIE
・普通のサイトはIEで正しく観れるように作られており、利用者からすれば問題無い
MSがIEを広めるのにそれなりの対価を払ったから。
635 :
ウソコ野郎:2005/08/17(水) 13:52:04 ID:???
IEは子供のおもちゃだったよな?
??
text-decoration:undelineを破線に出来ない?
>>639 今のところできない。borderをうまく使えば近いことはできる。
あと、underlineね。
border-bottom: 1px dashed;
♪パッディン(・∀・)ウンデリン♪
小林製薬の商品名みたいだね
kobayashi#seiyaku{
paddin:500em;
}
<kobayasi id="seiyaku">ウンデリン</kobayashi>
paddin'
↑この方がカッコイイよね
KEEP ON PADDIN'
ずっとパディングって読んでたんが・・・パッディングって釣りだよな?
>>646 誰もそんなこと言ってないよ(・∀・)パッディン♪
発音としてはパリンが近いしな
*で全体のmargin paddingを0にすると、
IEでリストのマーカーの表示が消えてしまいました。
Firefoxでは表示されているので、どうやら消えたのではなく
margin paddingを0にしたことで表示範囲外にいってしまっているようです。
*の設定はそのままで、リストの部分だけノーマルな位置に戻すのはどうすればいいのでしょうか。。。
>>649 * {
margin:0;
padding:0;
}
li {
margin:0 0 0 適当な数値;
padding:0 0 0 適当な数値;
}
>>650 レスありがとうございます。よく考えたら再度margin paddingを
指定しなおせばいいんですよね。。表示させることができました。
上に書いたCSSを無効化させるCSSとかあったら便利なのになあと
思ってしまいました。
>>650 そんな書き方なら
margin-left
padding-left
を使ってくれ・・・
♪パッディン(・∀・)パッディン♪
そもそもCSSオフ環境でも見れるようにと勧めるW3C信者はCSSをなんと心得るのか!!
ご老公の御前である。控えおろうー!
何か勘違いしてるな
わざとだろうけど
>>654 普通にマークアップしてればCSS切ってても、それなりに見えるんじゃない?
俺はそれで困ったことなんて一度も無いぞ。
CSSみれないブラウザ利用者なんてもう対象外でいい
>>659 ある意味差別だな。さて、視覚障害者が実際、障害無くサイトを
訪れられるのは全体の何%だろうか。
ま、俺はそんなHTMLでアクセシビリティをあーだこーだじゃなくて
本当にボランティアで役立ってるから気にしない。
視覚障害者がどーだとか言ってるヤツは、まずその辺の歩道に
違法駐輪してある自転車の一台でもどかした方がよほど社会の役にたってる。
視覚障害者が見る必要のあるサイトなのかどうか?
視覚障害者が見てたのしめるサイトなのかどうか?
そもそも視覚障碍者はどんなサイトを見るのか。
>>664 趣味(多少障害を乗り切れなくても)とかもあるだろうから
さまざまなサイトへアクセスすること間違い無し。
まえに視覚障害の人が降臨したスレがあったな。
どこだったっけ?
俺が加入してるMLは、視覚障害者だらけだよ。
気分で顔文字使ったら「音声合成読み上げソフト使ってるから意味不明な文字書かれると
読みにくい」って怒られたんだボケーーーー!
まぁ、とても親切な事…。
サイトも晒したけどね、alt属性に入れる文字例に悩んでると、親切に考えてくれるのよ。
気持ちわりーから帰れよ
オマエモナー
すみません質問です
スクロールバー付き小窓&背景画像固定(壁紙固定)をcssでやると
IEでは、上手く表示されるのですが、モジラなどでは背景画像がずれて
表示されます。ソースは
div.*** {
background:url(背景画像、横200 縦120ピクセル!パターン模様とかの柄じゃなくて写真);
background-attachment:fixed;
height:120px;
overflow:auto;
border : 2px white inset
}
どこか訂正個所があればよろしくお願いします。m(__)mペコッ
それだけじゃわかりません
673 :
Name_Not_Found:2005/08/20(土) 00:02:18 ID:cRHuSufc
多分、インライン要素の設定に関しての知識が足りてないような気がするんですが、
次のようなことがわからないで困っています。
(HTML自体の問題もからんでいるのですが。。)
<img src="./left.gif"><img src="./center.gif"><img src="./right.gif">
って書くと、3つの画像が隙間なく表示されます。
しかし
↓のように改行を入れて書くと
<img src="./left.gif">
<img src="./center.gif">
<img src="./right.gif">
なぜか、3つの画像の間に隙間が入ってしまいます。
そのため、
img{
padding: 0px;
border: 0px;
margin: 0px;
}
などとして、3つの画像の間を埋めようとしたのですが、ダメでした。
2つ目のようにHTMLを書いて、間を埋めようとすると無理なんでしょうか?
あと、1つ目と2つ目の書き方で、どういう解釈の違いが生じているのでしょうか??
(CSSだけの質問でないですが、よろしくお願いします)
ソースの改行は半角スベースと解釈される。
一行にずらずらと書くか、
<img
src="./left.gif"><img
src="./center.gif"><img
src="./right.gif">
みたいに書くとよいかもね
>>673 CSSじゃなくてHTMLの仕様の問題
ほとんどのUAでは改行は空白文字として扱われる
試しにこんな実験をして御覧
<p>
色は匂へど
散りぬるを
</p>
<p>
色は匂へど散りぬるを
</p>
そんな時は、テーブルレイアウトですね
>>672 なんで「viewportすなわちウインドウ」になるんだろう?
普通に考えて
要素に背景をつけているわけだから
要素の top left 位置を基準に貼り付ける IE の方が
正しい仕様のような気がしなくもないだけど。
w3c の文書でそれについて厳密に記述しているものってあるん?
Gecko や Opera の実装のがかっこいいことは同意できるんだけど。
678 :
Name_Not_Found:2005/08/20(土) 00:58:00 ID:cRHuSufc
679 :
Name_Not_Found:2005/08/20(土) 01:23:46 ID:dfXjZ1y9
すみません。教えてください。
フリーの掲示板のCGIを設置して、HTMLでデザインしているの
ですが、文字数が多い場合、なぜか、ウインドウの幅で改行されない
のです。(横スクロールバーが出てしまう)
考えられる原因は、何でしょう?
テーブル
681 :
Name_Not_Found:2005/08/20(土) 01:29:23 ID:dfXjZ1y9
あ、やはり。ありがとうございます。分析してみます。
<!-- 誰だよテーブルやめてfloatでレイアウトしようっていいやがったのはあああああああ -->
俺はテーブル分からん。どっちの方が楽なんだろう。
時と場合
待て、楽かどうかは関係なかろう
FireFoxで、display:table にするとz-index 効果なくなるけど、これはこれで良いの?
良いとすると、どういう理由?
外部CSSファイルで
A { color: #00659D;}
と指定したものを
特定のページに関してのみ色を変えたいと思い、
ヘッダ部分に
<STYLE type=text/css>
<!--
a {color: #666666;}
-->
</STYLE>
と書き加えたのですが、
思うように色を変えることが出来ません。
(外部CSSファイルで指定した色のまま)
これは仕様上、外部ファイルの指定が継承されてしまうのでしょうか?
<a></a>のタグがシステムから自動で吐き出されてくるため、
class指定などが出来ないのですが、
ヘッダにスタイルを記述するだけで解決する方法はあるでしょうか?
STYLEタグはLINKタグより後に来てる?
先に来ては駄目だぞ
>>686 今試してみたら効果あったんだけど、他の部分も一緒に書き換えちゃったとかじゃ?
>>687 >>688の方法で多分解決するとは思うけど、
ページ内にstyle要素で書かずに、そのページ用の外部CSSファイルを作るってのも手だよ。
もしかしてなまず?
>>677 CSS2仕様書の'background-position'のとこに書いてある。
って、こんなのすぐ見つかるだろ
* { display:none; }
693 :
686:2005/08/20(土) 10:42:17 ID:???
>>689 極めて単純なHTMLとCSSで試して見たら、言われた通り効きますね。
う〜ん、もう少し原因を探って見ます。
お手数掛けました。
このスレで質問するのは不適当かも知れませんが・・・
display: none; とは逆に、
スタイルシートをOFFにした時、消えるような文字列を指定することは可能でしょうか?
contentプロパティ
もしくはbackground-image
696 :
687:2005/08/20(土) 12:51:46 ID:???
>>688 いま確認してみましたら、
<link href="style.css" rel="stylesheet" type="text/css">
<STYLE type=text/css>
<!--
a {color: #666666;}
-->
</STYLE>
となっており、ちゃんと後ろのほうに来ていました。
なのに適用されてない。なんでだろう?
>>689 とりあえず、そのページ用に外部CSSを一個作りました。
無事表示されたので、このまま行くことにします。
ありがとうございました。
698 :
Name_Not_Found:2005/08/20(土) 14:14:23 ID:YnX+4Ix6
┌─┬───┐
│ ├──┬┤
│ │ ││
│ │ ││
├─┴──┴┤
└─────┘
こんな感じのCSSを作りたいです。
お願いします。
外部スタイルシートでリンク色を指定してるんですが
同じページの一部のリンクの色を変える場合はどうすればいいですか?
>701
アホは答えなくてよい。
>>700 a { color:#ff0000;}
a .hoge { color:#00ff00;}
<a herf="hoge.html">ほげ</a>
<a herf="hoge.html" class="hoge">ほげ</a>
または、
em a { color:#0000ff;}
<em><a herf="hoge.html">ほげ</a></em>
テーブルを自由な位置に配置するにはどうすればいいですか?
>>708 _,,..,,,,_∩
/ ,' 3 `ヽーっ
l ⊃ ⌒_つ
`'ー---‐'''''"
ようするにここは、適切な回答がわからないバカが回答者面してるわけですね
滑稽です
他で聞くのでもう結構。バカはバカたちで楽しくなれ合っててください
自滅乙ww
>>698,700,702,704,706,708,710,712
全部同一人物か?
やってらんね
ワロスwwwwww
回答できない高度な質問に対しては
そうやって逆切れして、追い払ってる訳ですね
良く出来たシステムですね。全く素晴らしい。感動です
高度な質問だったんだw
初めて知った
>>716 これも同一人物?
逆ギレしてるのはあなただと思うけど…
わからないからって逆ギレする方は誰もサポートできないシステムですよ。
高度な質問していいかな な?
高貴な質問なら、気品ある態度でしたらしてもよろしくてよ
おテーブルを自由な位置にお配置するにはどうすれば宜しいのでございましょうか?
最後に一言足りない…気品は?
>>708 "プロパティ"なんてものは存在しない。
勝手に用語を造るなよ。常識。
答えるのもばかばかしい質問だってこともわからないのか?
>>724 なんでそんなにキレてんの?
まぁ落ち着け。
回答できない高度な質問に対しては
そうやって逆切れして、追い払ってる訳ですね
良く出来たシステムですね。全く素晴らしい。感動です
え?プロパティって存在しないの?初耳だぞそんなの
何だよプロパティって。
Javaのスレに行けバカ。
730 :
1/2:2005/08/20(土) 22:26:59 ID:qfXSsRS4
質問させていただきます。
【動作確認】
Win2k Netscape7.1
【やりたいこと】
テーブルセル内でのテキスト改行なし設定を1列一括指定したい
【希望表示】
┏━━━━┯━━━━━━━━━━━━━━━━┓
┃改行なし │改行任意改行任意改行任意改行任意┃
┃ │改行任意改行任意改行任意 ┃
┠────┼────────────────┨
┃改行なし │改行任意 ┃
┗━━━━┷━━━━━━━━━━━━━━━━┛
【ソース】(実際には外部CSSファイルだが動作は変わらず)
<table>
<col style="white-space:nowrap;">
<col>
<tbody>
<tr><td>改行なし</td><td>テーブル幅より大きく改行するような長い文章</td></tr>
<tr><td>改行なし</td><td>改行任意</td></tr>
</tbody>
</table>
>"プロパティ"なんてものは存在しない。
>勝手に用語を造るなよ。常識。
↑
詳しく。
732 :
2/2:2005/08/20(土) 22:27:39 ID:qfXSsRS4
【実際の表示結果】
┏━━┯━━━━━━━━━━━━━━━━━━┓
┃改行│改行任意改行任意改行任意改行任意改行┃
┃なし │任意改行任意改行任意 ┃
┠──┼──────────────────┨
┃改行│改行任意 ┃
┃なし │改行任意 ┃
┗━━┷━━━━━━━━━━━━━━━━━━┛
<tr><td style="white-space:nowrap;">改行なし</td><td>(略)長い文章</td></tr>
<tr><td style="white-space:nowrap;">改行なし</td><td>改行任意</td></tr>
ですと希望通りに表示はされますが、実際にはセル数が多いので
colで一括指定できないものかと思っております。
また、widthでのem指定ですと、今後テーブルの拡張がありますので
ミスをなくすためできれば避けたいと思っております。
何か方法がある、或いは方法を間違えておりますでしょうか。
733 :
708:2005/08/20(土) 22:57:20 ID:???
例えば
p {font-size:40px}
のfont-sizeはプロパティですよ?
>>724 は俺より無知ですか?
騙りが出たのでもう一度質問します。
table{position
までは分かったんですが、その後具体的に
どうすればいいか分かりません。
教えてください。
少しは自分で調べたら?
>>735 その要素をどこにどういう風に固定したいのだい?
>>736 わからないなら口を出さないでください(><)
>>737 上から180ピクセル、左から40ピクセルぐらいの位置に配置したいです。
>>739 教えてやるから二度と来るな!
#hoge {
position : absolute;
top : 180px;
left : 40px;
}
>>740 ありがとうございました。
また来ます。ノシ
もういや
↓まともな質問ドーゾ
いまならもれなく5割増の好感度で迎えられますよ
テーブルを自由な位置に配置するにはどうすればいいですか?
外部から、複数のスタイルシートを呼び出すことも可能だと聞きました
代替スタイルシートに萌え〜ってやつですか?
「まともな質問」?
だめだな、表現は正確かつ的確にしないと。
「ここの低能回答者にも答えられるやさしい質問」だろw
このスレって妙な奴らに妙な恨み買われてない?
なぜによ
>>730,732
「改行なし」のセルって見出し?もしそうなら
<td>改行なし</td>を
<th>改行なし</th>に変えて
td { white-space:nowrap; } にしてみそ
もしくは自動改行抑えたいセルにクラス指定してみたら?
>>747 まちがえた
th { white-space:nowrap; } だorz
ちょっと質問です。
みなさんは画像を配置するとき、
background-image と imgタグ どちらを使用しますか?
750 :
724:2005/08/21(日) 08:36:28 ID:???
>>733 ああ……すまん、てっきり"tableのプロパティ"を聞いてるのかと思った。
Java厨かと思ったんだ。まじすまん。
で、
>>740じゃなくてposition, top, leftプロパティって答えて欲しいのか?
無学な俺にはどうしてそんな聞き方をするのか分からないんだがだれかご教授plz
>>750 人間不信でJava厨で無知なのに教えたがりな君がどうしてここに粘着してるのかな
listをfloatで横並びにするとマーカーが消えちゃうのはどうして?
>>749 普通なら素直にimg要素
装飾画像を裏技的に使いたいのならbackground-image
754 :
Name_Not_Found:2005/08/21(日) 16:44:59 ID:Fa3qCrYv
a:text {color : white ; } ←これじゃダメなんですか?
a:link {color:white; text-decoration:none}
a:visited {color:white; text-decoration:none}
a:hover {color:yellow; text-decoration:underline}
a:active {color:red; text-decoration:underline}
:link、:visited、:hover、:activeは疑似クラスといって
初めから用意されてる決まり文句。:textというのは存在しない。
a {color : white ; }
で不都合がありますか?
756 :
Name_Not_Found:2005/08/21(日) 17:03:29 ID:j+e1P049
前にも誰かが;textのついたセレクタを用いてたな。
そのような擬似要素も擬似クラスもないはずだが、
だれがそんなことを教えているんだろうか。
もしかして何かのブラウザの独自仕様なんだろうか。
>>756 きっとどこかの嘘つきサイトが教えてるんだろ。
ぐぐってみるか…
758 :
Name_Not_Found:2005/08/21(日) 17:56:23 ID:DpU8SDxk
>>754 a:link{color:#ffffff; text-decoration:none}
a:visited{color:#ffffff; text-decoration:none}
a:active{color:#ffffff; text-decoration:none}
a:hover{color:#ffffff; text-decoration:under-line}
759 :
Name_Not_Found:2005/08/21(日) 17:57:24 ID:DpU8SDxk
underlineダ
間違イ
760 :
質問者:2005/08/21(日) 18:36:22 ID:???
みなさま、先週はお世話になりました。
先週まで15インチ(1024×768)のノートPCでデザインしていたのですが
本日ネットワーク上にあるCRT(800×600)で見てみたところ
<h2>などでは上下半分で切れたり文字がすごく小さくなったりで
まともに見れたものじゃありませんでした。
CRTを1024×768にプロパティ変更して見ましたが同じでした。
CRTの方でノートPCの時のように変更し又ノートで見てみると
今度は<h2>などぶっとくなり過ぎて見れたものじゃありません。
このような時はどこに気をつけていけばよいのでしょうか?
あまりにも初歩的な質問をお許しください。
どうぞよろしくお願いいたします。
マージンや文字サイズをemや%で指定する
普段から800幅・1024幅などで確認する癖をつける
自分はこんな感じかなぁ。モニタの解像度は1280*1024。
HTMLやCSSを気にしだしたらIE・NN・FF・Opera等一通りそろえて
チェックするようになってしまった。
いくつもCSS作る根性ないから振り分けしてないしなぁ。
762 :
質問者:2005/08/21(日) 19:01:11 ID:???
>>761 レスありがとうございます
やはり皆さんも解像度にあわせて あーでもない こーでもないと
チェックし手直しされながらデザインされてるんですね
マージンや文字サイズもemで指定しているのですが
もう一度見直してみます。何か根本的なミスがあるのかもしれませんし。
しかし、たとえばヤフーのTOPなどどちらで見てもほとんど変わりはないのに
私の場合の変わりようはえらいことになってしまっています。
ほんとにうまく作らないと違う解像度では見れないということですね。
ブラウザによって見え方が違うのは分かるのですが
解像度によりこんなにもデザインが変わってしまうなんてショックです。
解像度変えてもなんも変わらんぞうちだと。
ただドットの細かさが変わるだけで
>>758 それでは
<a name="〜">・・・</a>
の部分が白くならない。(そうしたいのかどうかは知らない)
また:activeの記述が:hoverで上書きされてしまう。
(:active状態は:hover状態でもあるので:activeを後に記述する)
>>763 それならそれでいいんじゃね。
というか、そういうサイトのほうが親切度は上だろう。
640ピクセルでも見れますとかだと狭くて見難いぞゴルァとか思うけど。
オペラ、ページ表示領域の大きさをリアルタイムで表示してくれる設定があるから重宝してる。
パネル出した状態で幅800、消したら幅1024になるようにしてるので
サイトの確認も楽だな。
766 :
質問者:2005/08/21(日) 19:36:02 ID:v899s8Pl
>>763 それがですね
例えばノートでは 長編小説レビュー って一列なんですけど
CRTでは 長編小説レ
ビュー
って感じで2段になってバックの色帯もぶっとくなって
ぐちゃぐちゃなんですよー。 はーっ。。。
767 :
質問者A:2005/08/21(日) 19:45:56 ID:hMvb4glk
たとえば、企業が使うソフトとかを開発したいって思ったら、どこに依頼すればいいんだ!?
ライブドアじゃねーし…。SEに言ってもなあ…。教えてくれー!!
768 :
Name_Not_Found:2005/08/21(日) 20:02:55 ID:Fa3qCrYv
>>755 >>756 デフォルトのテキストを白にしたくて他のを真似してやってみたんですが・・・。
どうやったらいいんでしょうか?
a {color : white ; }←これではできませんでした
>>768 body { color:#ffffff; }
意味もわからずいじってるってなんだか凄い冒険家だなぁ
スタイルシートを外部リンクにする場合、全てのファイルに
共通のものだけを外部から読み込みにして、ファイルごとに
個別のものはそのファイルに追加するのと、
共通の物も、個別の物も外部から読み込みで、クラスを
使って区別するのでは、どっちが効率がいいですか?
773 :
Name_Not_Found:2005/08/21(日) 23:39:51 ID:DpU8SDxk
>>764 idも白くしたいんなら
a{color:#ffffff}
にしれ
それから、activeとhoverは別物
>>772 ねぇねぇどうやったらIDを???にできんの??
おせーーーーーーーーーーーーーーーーーーーーーーーーて!!!!><
>>747-748 thにしてもおかしくない内容でしたので使用させていただきました
どうもありがとうございました!
〜〜〜ID:???の真相に迫る〜〜〜
この物語は(ry そんなことより↑これ文字が波立った海に浮かんでるっぽくね??
>>778 確かモジラ系のバグだった希ガス
全UAで試してみ
ttp://adp.daa.jp/tech/20041203.html こちらのサイトのサンプルのページを、Firefoxで見ているのですが、
最後の「dl要素(フッターつき)を使う場合」で、
一番下に、1pxだけ、縦棒の背景画像が見えてしまっているのは、
Firefoxの不具合でしょうか?
自分も画像ではないですが、borderやbackground-colorなどで、
いろいろと枠を作っていると、1pxだけ、色が付かないときがよくあります。
ul,liや、dlなどのリスト系を使うとなると思うのですが・・・。
これは、何か解決策はありますでしょうか?
>>780 文字の大きさを大きくしたり小さくしたりしてみ、多分なくなるから
確かめてないけど、これbackground-imageをno-repeatにしてないせいじゃないか?
あ、嘘つきました、no-repeatにしてるな
>>780 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20050813 Firefox/1.0+
だけどなかった。
dl要素を使う場合。のところの横枠が欠けてただけ。
divの上にヘッダ/フッタが乗っかってて、フッタより下にdivの背景が飛び出してるからでしょ。
ピクセル数計算する時の切り捨て処理の問題じゃないかな。
バグって言えばバグだけど。
いちばん簡単な回避方法は、下地がはみ出さないように
.part2 totop { position: relative; top: 1px; }
とかでフッタを下に移動しちゃう事かなぁ。
あんまりいい方法とは言えない気もするけど。
すみませんちょっと教えてください
firefoxとsafariとoperaとieと
このいずれのブラウザはスタイルシートの解釈がそれぞれ違ったりするんですか?
787 :
Name_Not_Found:2005/08/22(月) 13:54:27 ID:T+kIweCg
スタイルシートを使って、リンクテキストにマウスポインタを乗せると別の場所の画像が切り替わる
ということをしたいのですが、どうすればいいのでしょうか?
>>787 正攻法じゃ無理
JSやフラッシュ使った方がいい
789 :
Name_Not_Found:2005/08/22(月) 14:08:58 ID:T+kIweCg
>>788 回答ありがとうございます。
javaのスレで聞いてみます。
待て、JavaじゃなくてJavaScriptだが、そこらへんわかってるか?
>>791 大丈夫、ちゃんとJSの質問スレで奴を見たからwwwwwwwww
.contents {
padding:0px;
margin:0px 0px 0px 150px;
width: 300px;
}
#footer {
padding:0.5em;
text-align: right;
margin:0px 0px 0px 150px;
width: 300px;
}
というスタイルシートを使っています。IEでは問題なく表示されるのですが、firefoxでみるとfooterが少し右に飛び出します。
paddingの分だけ飛び出していることは分かり、.contentsのpaddingを弄りましたが、今度はIEでも表示が乱れる始末です。
何か解決方法があったら教えてください。
>>793 IEはドキュメントタイプを書かない(大雑把)と、うんこモードになって、
paddingを幅に含めてしまいます。
標準では、paddingは幅に含まれないので、その例では300px+0.5emの幅になるわけです。
>>793 状況がわからんな、スクリーンショットくれ!
あ、そういうことね。文句はIEに言ってくれ!
右寄せしたボックスの中にある文字列を、
そのボックスの中で左寄せにする方法はないでしょうか。
<p>本日はご来場ありがとうございました。</p>
<div>代表取締役 山田太郎<br>
実行委員長 佐藤はな子</div>
これを、
例1:
本日はご来場ありがとうございました。
代表取締役 山田太郎
実行委員長 佐藤はな子
こうではなく、↓のようにしたいです。
例2:
本日はご来場ありがとうございました。
代表取締役 山田太郎
実行委員長 佐藤はな子
単にdiv{text-align:right;}だと
例1のようになってしまいます。
よろしくお願いします。
ヒント : text-align:left
魔神
マジレス
<table align=right>
<tr><td align="left">代表取締役 山田太郎<br>実行委員長 佐藤はな
</td></tr></table>
margin-left: auto;
htmlに配置したswfの上にCSSでレイヤーを被せても必ず
swfファイルが優先されて上に表示されます。
レイヤーでz指定したんですが、それでも上に表示されちゃいます。
これを回避する方法ご存知の方いらっしゃいますか?
よろしくお願いいたします。
>>800 いやレイアウトにテーブルはできれば使いたくないです…
>>798>>801 ありがとうございます。できました!
div{
text-align:left;
width:11em;
margin-left:auto;
}
とやったらうまくいきました。
どうもありがとうございました。
auto指定は真ん中揃えのときしか使ったことがなくて
まだ挙動がよくわかっていません。
勉強しようと思います。
おい! ウンコ野郎! 元気か!?
おう、元気だ!何か?
>>803 どういたしまして…
質問内容斜め読みしたからいい加減な答え書いてしまったが、解決したなら吉。
プルダウンの中の文字を右寄せにしたいのですが、
text-alignでrightを指定するとfirefoxではきちんと右に寄るんですが、
IE6では寄りません。
IEでも右寄せにする方法はないのでしょうか
810 :
808:2005/08/22(月) 17:55:48 ID:???
テスト用に簡単につくったものですみませんが、こんな感じです。
【html】
<body>
<form name="form1" method="post" action="">
<select name="select">
<option selected>あいうえお</option>
<option>あい</option>
<option>うえ</option>
<option>おかき</option>
</select>
</form>
</body>
【css】
option { text-align:right; }
あらあら、火狐ではOKなのにIEでは駄目ですか?
IEに文句言って下さいね。
ヘ へ
:| / /
∧∧,..,.. ;'、., : 、
;'゚Д゚、、:、.: : ;:'
'、;: ...: ,:. :.、.: '
`"∪∪''゙
∩ ∩
// | |
// Λ_Λ | |
| |( ´Д`)// <うるせぇ、IEのフライぶつけんぞ
\ |
| /
/ /
| |
どうぞ↓
│ _、_
│ ヽ( ,_ノ`)ノ 残念 私のおいなりさんだ
│ へノ /
└→ ω ノ
>
'、;: ...: ,:. :.、.: '
`"∪∪''゙
//Λ_Λ | |
| |( ´Д`)//
\ | ミ
| lヽ,,lヽ
| ( ) やめて
| と、 ゙i 衣はげちゃう
>>812 一行目にXML宣言付けてるならそれが原因。
IEのDOCTYPEスイッチのミス
付けてないならどっか間違ってるに200ペソ。
CSS色分けできるテキストエディタってあるの・・・??
あったら見やすくて便利そう・・・
819 :
Name_Not_Found:2005/08/22(月) 21:08:34 ID:f5A5VygK
classとidの違いを教えてください。
マジレスお願いします。
idは1ページに1つだけ
classは何個でも
初心者はこう覚えておけばいいんでないかい?
821 :
Name_Not_Found:2005/08/22(月) 21:19:41 ID:f5A5VygK
ありがとうございます。
idの中にclassや、classの中にidがあってもいいのですか?
はぁ?
826 :
Name_Not_Found:2005/08/22(月) 21:37:29 ID:f5A5VygK
>>825 ありがとうございます。
質問の仕方が悪かったようです。
失礼しました。
>>817 ばっちし1行目にXML宣言あります。
仕様ちゅーことであきらめようと思います。
もう一回言っていいですか?
IEのうんこー!
>>828 やめなさい。またIEフライが飛んできますよwwwwwww
>>828 俺は最初のうちはIE用CSSで分離してたけど、最近あきらめがついたよ。
ヘ へ
:| / /
∧∧,..,.. ;'、., : 、
;'゚Д゚、、:、.: : ;:'
'、;: ...: ,:. :.、.: '
`"∪∪''゙
∩ ∩
// | |
// Λ_Λ | |
| |( ´Д`)// <うるせぇ、えびフライぶつけるぞ
\ |
| /
/ /
| |
Λ_Λ ∧∧
( ´Д`(# く;'゚Д゚
>>828 IEがうんこ以下なのは前からわかってるんだよ。
それを乗り越えないと、いけないんだって。
今やIE様はユーザが多いから急いでバグ直す必要も無いのだろうね。
ブラウザのデフォルトスタイルシートをリセットするCSSよろ↓
そんなことが出来ちゃったら困るだろ
* {
* : reset !important;
}
まだ、もうずっと人大杉?
839 :
Name_Not_Found:2005/08/22(月) 23:57:05 ID:wWlrDJur
>>821 class と id を同時に指定するのはok
例:<div id="hoge" class="hage"></div>
id="class" や class="id" の様に文字として書く事も可
>>821 <div id=hage>
<div class=hige></div>
</div>
も
<div class=hige>
<div id=hage></div>
</div>
もおk。
ここの住人は高度な質問が出ると答えれない(スルーをかます)らしいです
誰か高度な質問かましてやってください><
こいつらただの教えたがりの青二才どもです><
そんな高度な質問できる奴は一人で試行錯誤する。
CSSなら日立ですか?
高度過ぎる質問で私には答えられない。次どうぞ
>>698,700,702,704,706,708,710,712,716,743,745,841
これ全て同一人物か。乙!
>>847 それは旧名。しかも、ミミカキエディットだし。
現在は mi といいます。
どっちにしろドザーには関係ない話さ
>>818 うはwwwwwwwwww俺xyzzywwwwwww
∩____∩
| ノ ヽ
/ ● ● |
| ( _●_) ミ <なかなかCSSって普及しませんねwwwwww
彡、 |∪| /
/ __ ヽノ /
(___) /
853 :
Name_Not_Found:2005/08/23(火) 19:48:09 ID:98OoKetL
質問ですが、
テーブルの代わりに<ul><li>使って画像を配置したいのですが、
winIEでは上下に余白ができてしまいます。
マージンもパディングも0に設定してあるのですが、それでも余白が消えません。
リストにはいろいろとサイズの違う画像を並べたいと思っております。
余白を消すやり方ってあるのでしょうか?
winIEだけ表示できればそれでいいのですが。。。
よろしくおながいします。
ソースを晒せ、話はそれからだwwww
855 :
853:2005/08/23(火) 20:07:52 ID:98OoKetL
http://www.heartfull-machi.com/index3.html ↑とりあえず適当なものをここに置いておきました。
横712pxでピッタリに配置したいんですが、横に余白ができてしまいます。
幅178pxの画像を4つ並べればピッタリになると思っていましたが、考えが甘かったです。
どうかよろしくお願いいたします。
#navi {
width: 712px;
float: left;
margin-top: 5px;
margin-left: 4px;
margin-right: 4px;
margin-bottom: 10px;
}
#menu{
width: 712px;
margin:0px;
padding:0px;
}
ul#menu li{
display:inline;
width: 178px;
height:auto;
margin:0px;
padding:0px;
list-style-type:none;
}
>>855 関連要素間に空白類文字を直接含むのはイクナイ。
ココだって文章何行かドラッグすると、右端に半角スペース分の領域が発生するっしょ。
空白類文字を含むと予期せぬ余白が発生するので、今回みたいに敷き詰めるとか考えてるなら注意すべし。
見栄えの為に改行やインデントをしたかったらコメント化を利用汁。
ブロックレベル要素に包含される要素がimg要素のみの場合は置換インライン要素なので下端がbaseline揃えで表示されまふ。
ブラウザによってはディセンダが考慮されずに余白の扱いが統一されないので一括でもセレクタ使ってでもimg要素にvertical-alignでtext-bottomを指定することをお奨めする。
本来は考慮されるし、余白を無くすのにもプロパティ値はbottomでいいんだけれども、IEの挙動がイカれてるのでtext-bottomにしてくらはい。
分からんかったら試してから再度質問汁。
858 :
853:2005/08/23(火) 20:31:16 ID:98OoKetL
>856
お返事どうもありがとうございます。
でも、すみません。
853では上下の余白と書きましたが、慌ててサンプルをアップしたので、855では横の余白の問題で出してしまいました。
855のサンプルで作ってくださっているので、それでお伺いしたいのですが、横がピッタリになると画像一個折り返しになっているのが解消されると思うのですが、どうにかなりますか?
ややこしくしてしまってすみませんが、どうかよろしくお願いいたします。
>>858 まとめると、メニューの画像を一列にしたいって事かい?
860 :
853:2005/08/23(火) 20:38:49 ID:98OoKetL
>857
ありがとうございます。
でも、ちょっと自分にはレベル高い回答でした。
自分なりの解釈で挑戦してみます。
わからなかったらまた質問いたします。
>859
ありがとうございます。
そういうことです。
855のパターンでは横1列に、隙間なくピッタリに並べたいと考えております。
説明下手で申し訳ないです。
>>853 とりあえず、
<ul>〜</ul>の
<li>部分の改行をとっぱらったら、横一列になったけど?
>>861 確かに横一列になりましたがね…
画像の幅の合計が、712pxより大きいからはみ出してますが…俺だけ?
863 :
853:2005/08/23(火) 20:48:57 ID:98OoKetL
>861
ほんとだー!
どうもありがとうございます。
もしかして、857さんの「関連要素間に空白類文字を直接含むのはイクナイ。」というのはこういうことですか?
このやり方が解決方法ですかね。
865 :
853:2005/08/23(火) 21:01:01 ID:98OoKetL
>862
ありがとうございます。
調べてないですが、178を4つで712になるので
もしかしたら影との間隔が712pxと違っている可能性があります。
準備不足ですみません。
MacIEだとはみ出してないのだー。
文字らもはみ出してないのだー。
Winを起動させて確認したらはみ出していたのだー。
>>866 おや、私はFirefoxですよ。
WinIEはうんこじゃないようですね(^^;
869 :
853:2005/08/23(火) 21:12:06 ID:98OoKetL
>867
ご指摘ありがとうございます。
イメージを伝えるため急ぎ用意したものなので、コピペのカタマリです。
余計なものもくっついてきているかと思います。
紛らわしくてすみません。
もしかして、フロートのせいで何かなるということはあるでしょうか?
>>869 イメージを伝えるため。ってどうせならポジション使えば。
自分でプロパティ適用させたり解除したりで挙動確かめてごらんなさい。
CSS慣れてないならテーブル使ってでも構成してみなょ。
871 :
853:2005/08/23(火) 21:42:11 ID:98OoKetL
>870
ご指摘ありがとうございます。
ついつい甘えて短絡的な質問になってしまいました。
まだまだCSS勉強中の身、自分でもいろいろと試してみます。
みなさんも付き合ってくれてどうもありがとうございます。
どういたしまして。どうも 「うんこ野郎」です。
www.unco.jp
>>843 てか、何故日立と思う?迄の過程を説明汁
>>871 XHTML1.0ってonmouseoutとかの値に大文字含めて大丈夫だっけ?
>>874 XHTML1(J)では、属性名は小文字で書かなければなりません。
⇒属性"値"に関しては何の規制もありません。
2カラムでheightが100%のレイアウトを作っています。
テンプレを見てhtmlとbodyにheight100%を指定しており、その他のエリアも
divでheightを100%指定しています。
[side bar] [main]
あああ 文章が入ります。
いいい ・
ううう ・
・
こういうようなレイアウトにした場合。main内の長さがブラウザの立てスクロールを
必要とするぐらい長くなった場合、mainは問題なく下に伸びるのですが
sidebarの方は下に伸びずに途中で切れます。
tableの表示のように、sidebarもmainも左右どちらも同じ長さだけ
伸びるようにするには、どのように指定すればいいのでしょうか?
>>876 どうやって2段組にしてますか?
クロスブラウザにしたいですか?
IEで実現できれば良いのでしょうか?
DTDは何ですか?何モードを適用させたいですか?
ハイブリッドデザインじゃダメですか?
どうでしょうか。
>>877 長くなるので、出来るだけ完結にまとめます。
<div id="sidebar">aaa</div>
<div id="main">bbb</div>
html,body{ height:100% }
#sidebar{ height:100%; background-color:#cccccc;}
#main{ height:100%; background-color:#cccccc;}
IE6.0とFirefoxです。
DTDは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
ハイブリッドでは駄目です。
>>877 2段組の方法は…?
HTML4.0(識別子無し)で定義している理由はありますか?
ハイブリッドデザインがダメな理由はありますか?
特別な理由があれば合わせますが…。
CSSハックは利用してもいいですか?
880 :
876:2005/08/24(水) 00:56:25 ID:???
>>879 すみません、肝心なところが抜けていました・・。
再度、cssを書きます。
html,body{ height:100% }
#sidebar{ height:100%; background-color:#cccccc;float:left;}
#main{ height:100%; background-color:#cccccc;float:right}
>>HTML4.0(識別子無し)で定義している理由はありますか?
特にありません。Dreamweaverを利用しているものですから。。
>>ハイブリッドデザインがダメな理由はありますか?
そこまでの事をしたいわけではないからです。
>>CSSハックは利用してもいいですか?
使用しないで下さい。
このような回答で意図が伝わりますでしょうか?
>>880 完成形は
>>876の時点で想像ついたのですが、条件を絞るための質問でした。
IEの解釈に対応するのは困難なので、出来るか出来ないかは分かりません。
ただ、まだ理想形に関して分からないことがあります。
>>876 > sidebarの方は下に伸びずに途中で切れます。
これは、切れるというのは背景のことでしょうか?
であれば、ラッパーし、そのブロックで同色の背景を付けるだけで良いのでしょうか?
※単純な左、右だけなら、bodyの背景色で補えるはずですが;
次に、
>>880のハイブリッドデザインについて。
> そこまでの事をしたいわけではないからです。
どういう意味ですか?テーブルで組めば一発なのですが。
テーブルレイアウトを利用してはならない理由を聞いたのですが…。
まぁ、前者(ラッパー利用)でよければ簡単に出来ます。
理想形の条件が緩いようですが、宜しいのでしょうか。
882 :
876:2005/08/24(水) 01:45:36 ID:???
>>881 >これは、切れるというのは背景のことでしょうか?
はい。左右のエリアに指定している背景が切れるのです。
どちらかのエリアに文が下に続くぐらい長いと。
>> そこまでの事をしたいわけではないからです。
>>どういう意味ですか?テーブルで組めば一発なのですが。
確かにテーブルですれば一発ですが、ここはCSSのスレですよね?
CSSのみでのレイアウトにこだわっているもので、極力、表意外は
テーブルを使いたくないんです。テーブルレイアウトなら簡単に出来ますね。
883 :
876:2005/08/24(水) 01:52:29 ID:???
>>883 Firefoxだとmainもちゃんと下に伸びないんだけど・・・
sidebar、mainともheightに最低サイズ(1画面分)を指定しておいて
mainが伸びたら、同じだけsidebarも伸ばしたい。って事?
<!-- 関係ないけど、1行目だけ改行コードがLfになってたよ -->
885 :
876:2005/08/24(水) 02:13:37 ID:???
>>884 すみません、Firefoxでもおかしいみたいですね。。
>>sidebar、mainともheightに最低サイズ(1画面分)を指定しておいて
>>mainが伸びたら、同じだけsidebarも伸ばしたい。って事?
そういう感じです。テーブルだと↓のような表示になるのを
CSSでやりたいのです。
<table width="100" height="100%" >
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>
table には height など無いのだが・・・
> <!ATTLIST TABLE -- table element --
> %attrs; -- %coreattrs, %i18n, %events --
> summary %Text; #IMPLIED -- purpose/structure for speech output--
> width %Length; #IMPLIED -- table width --
> border %Pixels; #IMPLIED -- controls frame width around table --
> frame %TFrame; #IMPLIED -- which parts of frame to render --
> rules %TRules; #IMPLIED -- rulings between rows and cols --
> cellspacing %Length; #IMPLIED -- spacing between cells --
> cellpadding %Length; #IMPLIED -- spacing within cells --
> %reserved; -- reserved for possible future use --
> datapagesize CDATA #IMPLIED -- reserved for possible future use --
> >
確かに無い。
>>885 最低サイズを指定、最大サイズは可変ってのは、自分も昔やろうとしたけど、うまくいかずに諦めた憶えが・・・
サイドバーとメインの長さを同期させるってのは、正攻法じゃ無理だと思うので
サイドバーとメインを入れるコンテナを作って
<div id="container"> <!-- ここにサイドバーとメインの背景色(同じ色じゃないと駄目) -->
<div id="sidebar></div>
<div id="partition"></div> <!-- 仕切り線。背景色にbodyの背景色と同じ色を -->
<div id="main"></div>
</div>
という具合に、同期してるように見せかけるのはどうでしょう?(bdoyの背景が画像だったらアウト)
最低サイズを指定しなければ、一応これで同期が取れるには取れるかと。
納得いって貰えなさそうだけど・・・
890 :
876:2005/08/24(水) 02:57:57 ID:???
>>889 ありがとうございます。いささか汎用性が下がる気もしますが
そういう方法しかなさそうですね・・。
ありがとうございます。大変参考になりました。
891 :
881:2005/08/24(水) 02:58:56 ID:???
892 :
876:2005/08/24(水) 03:05:11 ID:???
>>891 お手間を取らせてすみません。。こちらも参考にさせていただきます。
本当にありがとうございました。
893 :
891:2005/08/24(水) 03:13:16 ID:???
2カラムで、基本全体縦横100%、超越したらメイン基準ってので、
ヘッダ 縦固定値
メニュ 横固定値
メイン 縦横可変
フッタ 縦固定値
で、各ブロックでのスクロールバー表示が絡んでくる構成を考えたことがあるんだが、
これのクロスブラウザ化が、ハック使っても漏れには出来なかった。
もし出来るって人居たら教えてくれ(つд`)マークアップは何でもいいw
|彡
はてなダイアリーを指定なしで一から作っているのですが、伸びたサイドバーが日記の方へ回りこんでしまいます。
すれ違いかもしれませんが、対処の仕方を教えてください。よろしくお願いします。
div.hatena-body {
width: 800;
margin: 0px 0px;
overflow: hidden;
background-color: #f0f;
}
div.main{
float: left;
text-align: left;
width: 500px;
background-color: #cc0000;
}
div.sidebar{
float: right;
width: 230px;
background-color: #008080;
padding: 0px 0px;
}
>>876 どうしてプロパティに height: 100%; を指定してるんだ?
説明よろしく。
画面いっぱいに表示がとりあえずの最低サイズって事を言いたいからじゃ?
上のレイアウトで、メインがheight: 100%; じゃ必ず画面からはみ出すけどね
水平線を1pxで横幅100%にしたいのですが、
HR {
color:#000000;
height:1px;
border-top:solid 1px #000000;
border-left:none;
border-right:none;
border-bottom:none;}
これだとIE・FF・Operaでは問題ないのですが、NNでは横に1px分ほどずれて横スクロールバーが出てしまいます。
出ないようにするにはどうしたらいいでしょうか?
ブロックのborderでやった方がいいんでしょうか…
>>897 margin、width,、paddingあたりを調節してみ
>>898 margin:0px;で無事消せました!bodyで既に指定していて考えにありませんでした。
ありがとうございます。
<div class=contents>
<div class=leftleft> (ラッパー)
<div class="topleft"> (メニュー)
内容
</div>
<div class="topright"> (記事))
内容
</div></div>
<div class=rightright> (アフィリエイト)
内容
</div>
<div id="footer">
内容
</div>
と3カラムで作っているのですが、IEだとうまく表示されるのに NNやFIREFOXだと
<div class=contents>の中にラッパーから下が入ってくれないのですが
どうしたらいいでしょうか?よろしくお願いします。
902 :
545:2005/08/24(水) 18:14:59 ID:???
>>901 すいません解決しました。
新たな問題が・・・
#footer {
background-color: black;
color: white;
margin : 0 auto;
padding-top: 5px;
padding-bottom: 5px;
width : 700px;
border-top : solid black 1px;
font-size : small;
text-align:center;
}
と打ち込んでいるのですが、フッターの下に少し余白が出来てしまいます。
position: absolute;
bottom 0px;
を入れるとIEでは余白が無くなるのですが、NetscapeやFirefoxだとコンテンツと重なった
部分に表示されてしまいます。
余白を無くす方法、よろしくお願いします。
>>549 解決していませんでした・・・。
>>902 各ブロックの構成がどうなってるか晒せ。
余計なことしなけりゃ余白なんか出来ねぇよ。
つか、positionを使う意味不明。挙動をよく理解してから使え。
今北帰宅。
今日は質問スゴスwwwwwww
1つのhtmlファイル上でCSSを使って
2カラム・3カラムとCSSによって変更するのは難しいですよね?
通常は2カラムなら2カラム用のhtmlを、3カラムなら3カラム用のhtmlを
用意するのが無難ですよね?
>>905 否。
初めから想定していればちょっとの工夫でやれる。
>>905 cssとHTMLの分離を理解すればある程度の前提次第でできるよ。
他人といっしょにWEBページ作ったこと無いの?
909 :
有希:2005/08/25(木) 01:27:52 ID:???
>>907 「ある程度の前提次第」ってなに?
おしえて おにいちゃん
ジグザグで2カラムを3カラムにしたいんですけど、やっぱり難しいですね?
例えば
・あああ 本文
・いいい
・ううう
・えええ
という2カラムがあったとして
・あああ 本文 ・ううう
・いいい
・えええ
のような。それぞれをdivで囲ってfloatで振り分けつつclearしたら
出来るかなって思ったのですが、「ううう」が右上に来なくって
はまってます・・・
>>910 試してみたfloatとclearの指定はどんな?
ソース晒してみ。
ふぅ・・・
シンクロった(つд`)
914 :
910:2005/08/25(木) 01:56:37 ID:???
>>914 考えたけどちょっとむずぃ。
FFだと表示がおかしく…って、FFの挙動が正常です。
うまい手があるかもしれんけど、今はポジションしか思いつかないな。
916 :
910:2005/08/25(木) 02:39:46 ID:???
>>915 そうですか・・。色々とやっていただいたみたいで、ありがとうございます。
また、勉強してみます。
920 :
918:2005/08/25(木) 06:25:19 ID:???
HTMLソース
<DIV CLASS="1">
<DIV CLASS="2">08/01 祝!ウェブサイトオープン!!</DIV CLASS="2">
<DIV CLASS="3">
ウェブサイトオープンしました。<BR>
<BR>
このコーナーは、最近流行のブログのようなものです。<BR>
いろいろな事を面白おかしく書いていきたいなと思っています。<BR>
基本的に毎日更新していく予定ですので、お時間に余裕があるときなんかは覗いてやってください。<BR>
</DIV CLASS="3"></DIV CLASS="1">
CSSソース
/* 記事のボックス */ .1 {
width: 100%; margin: 30px 30px 50px 30px;
background-color: #F7F7FF;
border-width: thin; border-style: outset;
}
/* 件名のボックス */ .2 {
.width: 100%; margin: 30px 30px 30px 30px; font-weight: bold; padding-left: 4px;
border-top-width: 0px; border-right-width: 0px;
border-bottom-width: 1px; border-left-width: 7px;
border-color: ; #909090; border-style: ridge;
}
*/ 本文のボックス */ .3 { width: 100%; margin: 0px 60px 30px 60px; }
(少々詰めて書いてあります)
921 :
有希:2005/08/25(木) 07:12:27 ID:???
おいおい html を一から勉強したほうがよくないか?
>>920 これはあくまで経験上ですが、クラス指定に数字だけ使うと適用されないみたいですよ、Mozilla系は。
そのclass="1"になにか文字列加えてやれば大丈夫だと思うよ。
例:class="nuko1"
925 :
924:2005/08/25(木) 07:58:49 ID:???
って
>>922氏がわかりやすく的確に説明してくれてる・・・orz
おいらなさけね
926 :
918:2005/08/25(木) 07:59:31 ID:???
>>922 >>923 PC用ウェブサイトを作るためCSSは最近少しだけ覚えました。
全角スペースはここに書き込む際に見やすいようにと入れてしまいました。
CLASS名を変えたら表示することができるようになりましたが、思ったとおりの表示になってくれません。
もう少し、勉強しなおしてみようと思います。
また、わからないことがあったらそのときもどうぞ宜しくお願いします。
ありがとうございました。
idは数字から始まる文字列が禁止だが
classはいいんだっけ?
だめにゃん
>>927 一応、定義上問題ないのはnameトークンだけ。
数字から始まるのがダメとかじゃなくて、アルファベットから始めなくてはいけない。
アンダースコアとかハイフンは微妙。認められてたりダメだったり。
勉強になるなぁ
フィルターについて質問です。
<TABLE style="filter:alpha(style=0,opacity=50); background-color:#d9daea; color:#a0a0a0; font-
size:12px">
<TR><TD>
<DIV style="margin:2px; padding:10px; border:1px dashed #a0a0a0">
<P>ああああ</P>
<IMG src="wall.jpg" style="filter:none; background-image:url(wall.jpg); width:100px;
height:100px">
</DIV>
</TD></TR>
</TABLE>
画像だけフィルター適用外にしたいのですが、うまくいきません。
上手い解決法はあるでしょうか?WinXPsp2、IE6です。
ブロック要素のwidth属性にて最小幅だけ設定することは出来ますか?
例えば、最小値300pxでウィンドウ幅がそれ以上なら→枠いっぱい100%というような感じで
すいません、
IMGの中のstyleのbackground-imageは無視してください。
>>933 min-widthじゃなかった?
記憶にございません。。
300px の透明 gif
>>933 それを可能にするプロパティは存在するんだが
ブラウザが悲しいまでに対応してない
>>937 それだと横スクロールバーが出ると思われ。
うんこはだまっとれ!!
942 :
933:2005/08/26(金) 00:24:05 ID:???
ウンコ野郎 www.unco.jp さんどうもです
でもdiv や table には対応してないみたいですね・・・
>>938 そうなんですか残念です。
contentと同様はやく実装して欲しいす
どうも うんこ野郎です。 www.unco.jp
下品ってメール貰ったのでリネームしようと思います。
>>942 対応してないのはIEだけ。
(ということは9割以上対応してないって事でもあるが。)
さて、火狐は問題無しでしたよ。
.a { background-color: RED }
ul.hoge {float: left; width: 50%; }
<div class="a">
<H1>ほげほげほげ</H1>
<p>ほげほげほげ</p>
<ul class="hoge">
<li>ほげリスト</li>
<li>ほげリスト</li>
</ul>
<ul class="hoge">
<li>ほげリスト</li>
<li>ほげリスト</li>
</ul>
</div>
このような段組に挑戦して、レイアウト自体はうまくいったんですが、
「ほげリストのUL部分の背景にclass="a"で指定した背景が反映されません
(PとH1の「ほげほげほげ」の部分はclass="a"で指定した背景に変わってくれています)
ULにて背景を指定してやれば見かけ上は解決するんですが、
いま悩んでる問題の解決にはならないので後学のためにアドバイス頂けたらうれしいです。
どうぞよろしくお願いします。
floatは深く考えてはいかんのじゃ
下のULのCSSは要らない
>>947 ul要素に直接フロートとか微妙に危険。
包含ブロック要素内がフロート化した要素で終わってると、高さが算出されないょ。
transitionalなら<br clear="all">を最後の</div>の直前に入れればok。
strictなら、フロートしたまま終わるような構成にしない。
div.a にパディング入れたら大丈夫だった気もするような感じだったと思うっぽいよーな
>>949 ちゃんとそのソースで確認した?
>>949の言ってる通りの動作すらしてくれないんだけど。
んで、上で答えてる人がいるんで、他の方向から適当に解答。
div以下の各要素に共通のプロパティを設定するのであれば、
各要素にいちいち背景色を設定せずに、属性セレクタで
.a, .a * { background-color: red; } のようにすればいい。(.a自身と、.aの子孫の全要素を指定)
>>949 ためしに下のULCSSからフロート部分を抜き出したら背景はうまく行きました。
ですが、右側(下)の部分のUL内のLIのstyaleや他のstyaleが全て無効に・・・なんでなんだぁぁぁぁ
>>950 >包含ブロック要素内がフロート化した要素で終わってると、高さが算出されないょ
そうなんですか?!だとしたらULのclassを外してやってDIVで指定してやっても同じということですよね・・・
実は二つ目の</ul>の下に<br style="clear: both;">を置くと回避されるのは発見していてたんですが、
いわゆる「よくない無意味なタグ」ということで使うのを憚られたんですが
仕方ないのかもしれませんね<span style="clear: both;">全角スペース</span>なんてやるよりかはましでしょうからね・・・・うーん
>ul要素に直接フロートとか微妙に危険
これはどういった理由からなんでしょうか?
DIVを多用するのも避けるべきだと書いてあったので
ブロック要素にはなるべく直で扱うように心がけています・・・
>>951 >>947には不要かと判断して書いてませんがpaddingの指定もしてます
>>952 ありがとうございます。背景をしてやれば見栄え上は解決するんですが、
>.a, .a * { background-color: red; }
これってDIV.aにして*を<div class="a"> * </div>してやれば
.a { background-color: red; }と同じ事ではないの?って思って
もやもやと納得いかない部分がありまして今回質問させてもらいました。
>>950さんが仰るように>包含ブロック要素内がフロート化したまま終わってると
高さが反映されないということで仕方ないのかなと思いましたorz
みなさんありがとうございました。
955 :
949:2005/08/26(金) 01:39:09 ID:???
ごめんごめん
下の<ul>のfloat指示を外して変わりにmargin:50%;でおk
956 :
949:2005/08/26(金) 01:39:51 ID:???
さらにゴメン
margin-left ね
957 :
949:2005/08/26(金) 01:43:34 ID:???
ちゃんと書くわ。つまり
ul.hoge {width: 50%; }
一個目<ul class="hoge" style="float: left;">
二個目<ul class="hoge" style="margin-left: 50%;">
ね。
>ul要素に直接フロートとか微妙に危険。
これって何?
>>952 最後、それ属性セレクタじゃないだろ。
クラスセレクタ、クラスセレクタと全称セレクタの子孫セレクタ。
>>953 clearプロパティはブロックレベル要素にしか適用されないよ。
div要素に指定するならwidthも指定することが推奨される。100%でも。
> いわゆる「よくない無意味なタグ」ということで使うのを憚(はばか)られたんですが
読めなかった。
で、無意味じゃないからtransparentなら指定汁。clear属性で。
IEはフロートボックスのサイズも計算するけど、イカレた挙動。
フロートとかポジショニングしたら普通は親要素無視される。
後続要素があればその分領域が発生するので包含ブロックの領域も下まで発生する。
>>953&
>>957 ul要素直接フロートが危険なのは、ブラウザによってリスト要素の解釈が異なるから。
適当に指定してるとマーカー重なったりするよ。outsideだと。※↓
しかも、フロートする要素は内在的な幅が指定されていない限り、width指定が必要。
だからってul要素にwidth指定したり、※マーカー避けるためにmarginとか指定すると、IEでli要素が崩れる。
そんなこんなで、divで包含した方が吉。
divの多用を避けるっつっても、クロスブラウジングするにはある程度必要。
よく考えて、必要なだけ使うのであれば気にすることはない。
>>954 >953のまま終わるなっ。
ブログでよく見かける文章を枠で囲む場合です
引用文ではないのに blockquote を使ってもいいのでしょうか?
960 :
949:2005/08/26(金) 01:48:44 ID:???
>>958 >ul要素直接フロートが危険なのは(以下略)
そいうことか
なるなる。了解
961 :
958:2005/08/26(金) 01:51:26 ID:???
誤記スマソ。
> で、無意味じゃないからtransparentなら指定汁。clear属性で。
transitionalね。
で、
>>959 食事中に箸でドラムの練習するのと同じくらい良くないことです。
でも、絶対にしてはいけないって訳でもないです。表示結果さえ理想形であればいいってなら。
文法無視してるけど。つかlivedoor blog使いにくい。(板違いスマソ
962 :
951:2005/08/26(金) 01:54:40 ID:???
>>961 ありがとうございます
やろうと思ってたけどやめておきます
963 :
959:2005/08/26(金) 01:55:44 ID:???
964 :
947:2005/08/26(金) 02:04:29 ID:???
>>949 >>957のでもうまく行きました。なるほど〜そういう考え方も(感心)m(_ _)m
>>958 >無意味じゃないから
うーん開眼したかも。確かにフロートしっぱなしを解除しやるわけですからね
imgタグで置き換えてやると、確かに無意味どころか、むしろ文法的には必須のものかも!?
<br>の下に何も来ないこと(実際には<div="fotter">フッター<div>がありclear:both;してるんですが…)、CSS解除モードで余計な一行分のスペースが空くことから余計なもの
と考えておりました。
>transitional>div要素に指定するならwidthも指定することが推奨される。100%でも。
となにやら私のスタイル的に重要な新しい知識が得られそうなのでググッて参ります。
他にも重要で中身の濃いアドバイス本当にありがとう。貪欲にググッて参ります!
漏れの回答が正しいとは限らないが;
こういうWeb歴半年で、1000時間くらいしか学習してないょ。
10年以上前から確立してんだから凄いよな。先人は。
id属性値ってhtml文書内でユニークと聞いたのですが、
<input type="radio" name="hoge" value="1">
<input type="radio" name="hoge" value="2">
というラジオボタンにid属性をつけたい場合はどうなるのでしょう?
name=idだとユニークになりませんよね?
id="hoge_1"
id="hoge_2"
というようにつけるのでしょうか?
>>966 それってCSSじゃない気がするけど、一応。
name属性はデータを送信する際に渡すパラメタの名称や、
オブジェクトをオブジェクト外部から参照するための名称
id属性は文書内でオブジェクトを一意に識別するための識別子
なんで、そんな感じでいいんじゃないの。
一応自分で調べて絶望済みなんですが、確認のために質問させてください。
margin & padding の値で「デフォルト」を指示することってできないですよね?
leftだけデフォルトでって場合は
margin-top: **
margin-bottom: **
margin-right: **
padding-top: **
padding-bottom: **
padding-right: **
こうやらないと駄目なんですよね?autoってのは微妙に違うしみたいだし
margin: ** ** ** デフォルト
padding: ** ** ** デフォルト これが出来たら便利なんだけどな〜…
デフォルト値を書けばいいだけじゃん
>>968 個別指定じゃなくてmargin/padding一括指定したいという意味?
だったらできる
もうちょっと調べてみ
どなたか知恵を貸してください。
全体(div id="all")にborderを設定してあるんですが、
中の要素を絶対配置にしたところ、その要素を含んでくれません。。
どうすれば中の#left #rightも含んでくれるようになるのでしょうか。
973 :
972:2005/08/26(金) 12:43:53 ID:???
ソースです
---html---
<body>
<div id="all">
<div id="left">
左やねん
</div>
<div id="right">
右ですわ
</div>
</div>
</body>
974 :
Name_Not_Found:2005/08/26(金) 12:44:14 ID:J+I7PKFa
すみません、質問です。
【HTML】
<div id="foot">
<div class="menu">
<ul>
<li><a href="aaa.html">AAA</a></li>
<li><a href="bbb.html">BBB</a></li>
</ul>
</div>
<div class="copyright">Copyright (C) hogehoge.</div>
</div>
(注:見やすいように全角スペースを入れていますが、実際は半角です。)
これを
−−−−−−−−−−−−−−−−−−−−−−−−
Copyright (C) hogehoge. AAA BBB
−−−−−−−−−−−−−−−−−−−−−−−−
と表示したいです。
ネックになっているのはmenuとcopyrightの場所を左右逆にすることです。
ネックって言うか全然見当がつきませんorz
良い知恵がありましたら教えてください。
ソースの順番を変えるというのはナシでお願いします(´・ω・`)
975 :
972:2005/08/26(金) 12:45:18 ID:???
---css---
* {
margin: 0; padding: 0;
font-weight: normal;
font-style: normal;
font-family:"MS P Gothic", "MS Gothic", "Osaka-等幅", monospace;
color:#333333;
}
#all{
width:688px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
background-color:#EAEAEA;
}
#left{
position:absolute;
top:160px;
left:0px;
background-color:#FF0000;
width:170px;
}
#right{
width:518px;
background-color:#00FFFF;
position:absolute;
top:160px;
left:170px;
}
>>974 宿題は自分でやらなきゃいけんぞなもし。
>>974 floatでGoogle検索して自分で当てはめてみると
見当以前に答えが分かる。
ガンガレ、あとちょっとだ。