1 :
Name_Not_Found :
2006/01/13(金) 00:43:59 ID:0j/prymY
ばかもんが
【先代の格言】 おまいらまだCSSとかやってんの はっきり言って時代おくれ
14 :
Name_Not_Found :2006/01/13(金) 19:26:17 ID:C6gM4fZT
スレタイ痛すぎ
>>14 質問も回答も、激しくクドい感じでお願いしちゃうゼ?
ルー大柴が居るって聞いたんですけど・・・・・
何このルー大柴って何か元ネタあるの?
ぐぐれ
ルー大柴とCSSでググったが… ルー大柴はよく英語を略すのか?
IE6.0にて、フッタの【CopyRight 2006 111 All Rights Reserved.】
という文字列最後の3文字【.ed】が変な場所に現れます。
しかも、二重にです。
HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd ">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>001</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">top</div>
<div id="main_wrap">
<div id="menu">menu</div><!--/#menu-->
<div id="main">main contents</div><!--/#main-->
<div id="bottom" align="right">CopyRight 2006 111 All Rights Reserved.</div>
</div>
</body>
</html>
CSS部分(外部ファイル) div#top { width:800px; background-color:#ff0000; } div#main_wrap { clear:both; width:800px; background-color:#cccccc; } div#menu { float:left; border:0px dashed #ffffff; width:130px; background-color:#00ff00; padding:0px 0px 0px 10px; } div#main{ float:left; width:660px; } div#bottom { float:left; clear:both; width:800px; color:#666666; }
23 :
21 :2006/01/16(月) 14:10:10 ID:???
とりあえず、解決方法は、 1、HTML宣言の後半部分のURLを消す 2、<!--/#menu--><!--/#main-->のコメントを消す 3、CSSでdiv#menuのpaddingをすべて0pxにする。 4、CSSでdiv#bottomのfloat:leftを消す のどれかで解決できるんですが、決定的な理由がわかりません。 ただのバグというにはあまりにも解決方法が多すぎる気がするんですが・・・。 画期的な解決方法をご存知の方、いらっしゃいますか?
24 :
Name_Not_Found :2006/01/16(月) 15:59:06 ID:Qhe1jz4x
>>23 Mac OS9、Netscape7.02というドマイナーな環境ではこのままで正常に表示されるな。w
>>24 win XPでも
Netscape4.8 Netscape6 Netscape7.1 Netscape8.0
Opera8.5 Firefox1.5
では正常です。
おかしいのはIE6.0だけ。
明らかにバグだとはわかるんですが、解決方法が多すぎるのでなんかスッキリしないんです。
ていうか本スレここじゃないよ。
ワロス
<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 となってしまいます。 どうやったら解決できますか
内緒です
そこをなんとかお代官
田中彰の応援歌を考えた。 行くぞ彰ホームラン!センターオーバーホームラン! 弾丸ライナーだ!飛ばせ!運べ!彰! 俺が考えた歌詞ですよ! 弾丸ライナーだ!の後に「ヘイ!」とか「おい!」って掛け声を入れてスタンドでジャンプするの とかいれると面白いかもしれない。
34 :
Name_Not_Found :2006/02/22(水) 20:48:57 ID:mL83/VvT
頑張ってますよ
同じページでリンクの色をクラスごとに分けたいんですけど、どのように記述すればよいでしょうか。 メニュー中の日記は青、BBSは赤、といった感じにしたいのですけど。 どうぞよろしくお願いします。 もしかして不可能でしょうか・・・
自己解決しました
クラスセレクタに続けて要素名を書けばよろしい
なんだよこのスレww
41 :
Name_Not_Found :2006/11/08(水) 17:20:38 ID:xMeRUYZn
まん
42 :
Name_Not_Found :2006/11/12(日) 20:51:42 ID:s6+6DegB
こ
43 :
Name_Not_Found :2006/12/14(木) 01:20:03 ID:EaJjM8Lc
質問です。 CSSのfloatで以下のようなレイアウトは可能ですか? 「aaa…」は段落無しの連続した文章です。 aaaaaaaaa┌─┐ aaaaaaaaa│画│ aaaaaaaaa└─┘ ┌─┐aaaaaaaaa │画│aaaaaaaaa └─┘aaaaa
可能。 クリアを忘れずに。
45 :
Name_Not_Found :2007/02/10(土) 13:49:19 ID:cwVXvG/f
tdのひとつひとつの横幅のサイズを指定する 方法がありましたら教えてください。
>>45 なんでよりによってこのスレで質問する?
普通にwidthプロパティ。
47 :
45 :2007/02/10(土) 16:21:37 ID:cwVXvG/f
>>46 ありがとうございます。
インライン要素にはwidthは使わない方がいいと書いてありました。
他には、tableにはwidthを指定できるので、
tdには比率が指定できればサイズが指定できると思ったのですが、
そのやり方は見つかりませんでした。
49 :
45 :2007/02/10(土) 16:55:21 ID:cwVXvG/f
50 :
45 :2007/02/10(土) 17:18:51 ID:cwVXvG/f
すいません。:ではなく、=でつないでいました・・。 CSSチェックをしても、英語の変な文章が出てくるわけですね・・。
51 :
Name_Not_Found :2007/02/11(日) 14:03:15 ID:hu/1JMam
tableのcolspan、lowspanの CSSバージョンがありましたら教えてください。
ない。 つーかこのスレで質問すんな。
53 :
51 :2007/02/11(日) 16:25:11 ID:???
ありがとうございました。
55 :
Name_Not_Found :2007/03/29(木) 06:13:51 ID:Vw1XKpXy
<br>を2つ以上入れても、1回分の改行しか出来ません。 そういう症状の場合、letter-spacingが疑われますが、letter-spacingは使っていません。 ひとつひとつ検証してみたところ、 * { margin: 0, padding: 0, } で使っているmarginが原因のようです。 これは必要な要素なのでカットするわけにもいかないし、困っています…。 いままでも同じように設定しているのですが、何も問題はありませんでした。 何かアドバイスをしてくださる方がいれば、よろしくお願いします。 ちなみにmarginを1pxにしたら、若干行間があきました。 改行でできる隙間(=マージン?)も0に、という解釈なのでしょうか。
>>55 釣りだと思うがマジレス。
・letter-spacingの意味を調べろ。
・CSSの基礎から勉強し直し。
>>55 <br>は空行を作るためのものではない。
そもそもの使い方が間違ってるからCSS勉強しなおせ。
2回以上改行する場面など無い。
ひとつのタグに二つ以上要素を設定することは可能ですか? <ul id="content" class="center"> という感じなんですが・・・ また文法的には正しいんでしょうか?
>>58 それの中の「要素」ってulだぞ?
多分idとclassの同時設定は、という意味だと思うが、可能。
ついでにclass複数も値を半角スペースで区切って可能。
61 :
Name_Not_Found :2007/03/29(木) 16:07:04 ID:A4Tu737G
absoluteを用いたレイアウトでIE6とFFでレイアウトが違ってしまいます。 <body> <div id="container"> <h1>sss</h1> <div id="navigation"> <p>aaaaaaa</p> </div> <div id="content"> <p>ccccccc</p> </div> </div> </body> これにcssで body{text-align:center;} h1{psition:absolute;} #container{text-align:left;} #navigation{float:left; width:100%;} #content{float:right; width:20%;} とxml宣言をしたため、中央ぞろえにtext-align:center;を使いました。
62 :
Name_Not_Found :2007/03/29(木) 16:07:49 ID:A4Tu737G
この表示がFFなら sssaaaa cc cc cc c と表示されるのですが、IEでは aaaaaaa sss cc cc cc c と開始位置がずれてしまいます。どうやって改善したらよろしいでしょうか?
>>61-62 釣り大流行らしいが、負けずにマジレス。
レイアウトと呼べる代物じゃないので、一から勉強して下さい。
>>63 webページにおいて実用性は一通りでは語れないはずですが?
そもそもあなたの予想しているものと違う場合だってあります。
問題の方は解決…ぽいことはできました。ありがとうございました。
釣れました?
このスレ一体何人が張りついてるんだ
69 :
Name_Not_Found :2007/04/02(月) 19:02:42 ID:YnkH6gsN
なんというルー大柴・・・これは間違いなくルー大柴 / ̄\ | ^o^ | \_/
71 :
Name_Not_Found :2007/05/11(金) 00:03:01 ID:Xz++WjQ7
これは見逃せない
テーブル内の文字を全て左揃えにしたいんですが わかる人お願いしますm(_ _)m
>>73 table,td,tr {text-align:left;}
76 :
Name_Not_Found :2007/05/18(金) 15:08:40 ID:4i99yRls
フレームの色を全て同じにするにはどうすればいいですか? htmlソフトのプレビューでは、ちゃんと表示されるのですが 某ブログでは、色が変わらないのでcssでやってみようと 思っています。
事故解決しました 汗汗;;;;;
79 :
Name_Not_Found :2007/06/09(土) 21:12:40 ID:d51ozyPH
ここは笑いの絶えないほのぼのスレッドですね
80 :
qa :2007/07/07(土) 20:43:24 ID:h5myQA9f
[ ] ←画像(縦方向のグラデーション) [ テキスト ] [ テキストテキストテキスト ] 上記のようにテキストの量によって自動で背景画像が可変するような CSS指定をしたいのですが、これって可能でしょうか? 縦の可変はわかるのですが、横の可変がわかりません…
81 :
Name_Not_Found :2007/07/07(土) 20:46:44 ID:9ivsDHRw
マージンやパッジングを指定するときに margin-top: 0; と書いてあるところがほとんどなのですが margin-top: 0px; と書いても問題ないですか?
82 :
Name_Not_Found :2007/07/07(土) 22:13:51 ID:BHKm+gY3
83 :
Name_Not_Found :2007/07/07(土) 23:19:42 ID:OT0y3ZG6
■HTML中身 <body> <div id="a">あ</div> <div id="b">い</div> </body> ■CSS中身 body {width: 400px; position: relative; margin-left: auto; margin-right: auto;} #a {margin-top: 100px;} #b {position: absolute; top: 70px; right: 0;} これだと、「い」が「あ」から70px下の位置に表示されてしまいます (IEだけは一番上から70pxの位置に表示される) ・「い」を、一番上から70pxの位置に表示したい ・「い」を、400pxで真ん中に寄せたBODYの右端に表示させたい 二つを満たすにはどうしたらいいんでしょうか? お願いします
自分でどうにかしようって気はないのか…
>>83 関係ないが、俺ボデーにいきなりwidthやらpositionって指定しない。
コンテナid作る。
そうですか。
うん
88 :
Name_Not_Found :2007/07/27(金) 22:27:40 ID:eb2UaVpt
あげときましょうか
ちょっとした質問なんだが <div id="main" class="index"> があったとして div#main.index { といった指定は通る? そもそも文法的に正しいのかも気になる IDとClassを同時に指定なんて滅多に無いから実用性は無いと思うが・・・ 気になってググってみたけど見つけきれなかったんだ
>>89 その記述の必要性がなくない?
<div id="main">にして
各要素にclassを使うってので良いと思うが。
テーブルの<td align=left valign=bottom> ってのを<div>で出来ませんか? 検索した結果<div align=left>では、できたのですが、 valign=bottomが出来ませんでした。 ちなみにHPとかで使うのではなくテーブルのセル内で左側表示と 右側の表示というので使うつもりです。 誰か詳細がわかりましたらよろしくおねがいします。m(_ _)m
>>91 全然スタイルシートについて質問してないし
vertical-alignについて聞いてるのかと思ったら
左右とか言い出して意味不明だが、こういうことか?
<HTML>
左側表示したいセル: td class="left"
右側表示:したいセル td class="right"
<CSS>
td.left {text-align:left}
td.right {text-align:right}
スレチに回答するドアホ
95 :
Name_Not_Found :2007/10/14(日) 17:15:11 ID:FB+vrREU
サイトのコンテンツ領域外背景がグラデーション状になっていて コンテンツ領域内と外背景の間をグローのようなぼかし効果をしているサイトを見た事がありましたが bodyタグに背景グラデーション画像を指定するとして、このグロー効果はどうやって付けているのでしょうか グローの背景画像付ける為だけにコンテンツ領域全体を新たにdivで囲む事も考えましたが、必要の無い無駄div作るのもどうかと思って・・・ この方法以外に良い方法などあったら教えて頂けませんでしょうか
bodyやdivの背景画像はcssのbackground-imageで指定しています 書き足りていませんでした、すみません
>>95 ,96
ここで聞くなよ。
取り合えず手本となるサイトがあるなら、ソース見れ。
あんたの説明から想像するに、div使う以外考えられないけどな。
>>97 ぐぐって色々調べ物をしていた時辿り着いたサイトなので、どういった検索で行けたのか覚えていないもので・・・
やっぱりdivが必要なら諦めようと思います、レスありがとうございました
IE(Mac) において、TABLEタグのcellspacing属性の代替となるCSSプロパティはありますか? border-spacing や border-collapse も使えないようですが、 セル間隔をなくすには、cellspacing属性を使うしかないないのでしょうか?
>>99 IE(Mac)に限らずpadding。
IE(Mac)なんて使ってる奴は希少。
ルー大柴流行再来の前に建てられたこのスレは本格予言的スレ
102 :
99 :2007/10/15(月) 01:07:33 ID:???
>100 うーん、paddingプロパティはcellpadding属性の代用にはなりますが cellspacingとは異なりますよね? それともMacIEではpaddingでセル間隔を調整できるのでしょうか? 当方ボックスモデルの理解はできているつもりですが 試す環境がないのでMacIEの仕様の詳細がわからないのです・・・。
>>99 border-spacingがその代用。
border-collapseがseparateのときのみ。
Mac用IEなんてどうでもいいよ。。
106 :
Name_Not_Found :2007/10/19(金) 20:37:37 ID:b7HNLlS3
携帯から見てリンク下線を見えなくする方法ってありますか?
>>106 CSSの効く携帯ブラウザなら普通と一緒
108 :
Name_Not_Found :2007/10/19(金) 21:22:35 ID:b7HNLlS3
>>107 DoCoMoから確認したところ反映されていなかったので困っています
やはり携帯対応タグはないんでしょうか?
携帯関連の質問者ってどうしてこうバカばかりなんだろ
>>108 CSS未対応の機種ではおそらく無理かと。
>>110 そうですか…
やはり携帯からみて下線を消したり見えなくする方法はなさそうですね
ありがとうございました
(゚д゚)ダカラCSS対応ケータイナラ可能ッテ言ッテルノニ自分ノケータイガスベテカヨ
そもそも下線のないリンクなんてユーザビリティの観点から(以下略)
たまにでいいから読み上げブラウザのことも思い出してあげてください
包括ブロックとfloatが俺をいじめる
大手テンプレートサイトで配布されているCSSに次のような記述がありました。 font: 70%/1.5em sans-serif; この、"70%/1.5em" というのはどういう意味なんでしょうか? 教えて下さい。
font propertyを調べろ
hu
ぬ
120 :
Name_Not_Found :2007/12/01(土) 05:26:51 ID:3bqLvzKw
すいません、初歩的な質問ですがよろしくお願いします。 1つのページにリストを表示して、複数のリストグループがあるとき、 1つは横並びのリスト、もう一つはたて並びのリストにしたいのですが、 float:leftで設定すると、<li>全部横並びになってしまうんですけど どうすればいいでしょうか? 以上よろしくお願いします。
>>120 何の為にclassやidがあるのか考えよう。
>>120 何のためにCSS質問スレがあるのか考えよう。
123 :
Name_Not_Found :2007/12/03(月) 11:31:33 ID:BKcjh546
ho
スタイルシートで不等号("<", ">")って使うっけ?
127 :
125 :2007/12/12(水) 23:26:59 ID:???
あ、自己解決、 qq 'xxx'; でやればいいと気付いた。
・・・なんかすっごく解決してない気がする。 子供セレクタって知ってるか?
129 :
125 :2007/12/13(木) 01:24:44 ID:???
>>128 いあ、ダブルクォーテーションのエスケープだけが問題だから。
ソレさえクリアできれば、まぁって感じで。
しかしスレ違いという根本的な問題は解決してない罠
nürüpo守
133 :
Name_Not_Found :2007/12/31(月) 16:41:54 ID:BsoPA2II
135 :
Name_Not_Found :2008/01/23(水) 15:11:00 ID:xqvM1sDp
保守
floatを指定する要素にはwidth属性が必須、 ただし画像などもともとwidth属性を持つ要素の場合は無くても可。 …ってことらしいんですが、 <div style="float:left;"> <img src="img.jpg"> </div> <div style="float:left;"> <img src="img.jpg"> </div> のように、フロート要素内に画像のみ、という場合でもやはり (上記例の場合はdivに対して)width指定は必須?
>>136 CSS2.0はwidth必要、CSS2.1はCSS不必要。
必要ないかと divの最小幅は画像で引っかかって決まるだろうし。
140 :
136 :2008/01/28(月) 02:39:26 ID:???
レスありがとう。 結局、CSS2.0では本来は必要だけど、ブラウザが なんちゃって表示してくれる、って感じですね。 で、CSS2.1ならOK(autoで適宜解釈してくれる)ってことですね。
毎回手書きで文字の前に画像を持ってきていたのですが <p class="icon">ここに文字</p>と書いて 外部cssで画像を指定することは可能でしょうか? 「css 画像」でググったのですが、解決できなかったのでアドバイスいただけると嬉しいです。
cssというよりはxmlなきがしなくもない
contentsもな、IE対応してないし
画像というのがどういう画像なのかわからんけど もしアイコンみたいな小さい画像だとしたら、 背景画像で左上に表示して、あとは画像の大きさに合わせて paddingとかtext-indentとかで中身をずらせばそれっぽくできる。
あ、class="icon"って書いてるからアイコンぽいのでいいのか。
<p><img src="kuso" />ここに文字</p> これに尽きるだろ、わざわざ CSS でするもんでもない てか、手書きって、<p class="icon">も手書きじゃねぇか 方法はいくらだってある、あんたの言う手書きってのはメモ帳でって事かい ならテキストエディタ使え 画像のファイル名を変えたら修正が大変だってかい なら置換使え 他にも定型のコピー&ペーストなり、扱いやすいファイル名に設定するだの、いろいろ出来ることがあるだろうに この手間さえも省きたいんであれば”手書き”ってやつはやめときな、向いてないわキミには
146はこのスレで相談に乗ることに向いてないと思うのは私だけか。
んー、146の応え方、好きだけどな。頑固親父が居るラーメン屋ぽいじゃんw
kusoが入ったラーメンなんていやです><
特定の要素のみを指定する場合の書き方が混乱してきました。 例えばclassを使ってtableのth要素だけを指定したい場合どうすれば良いのでしょうか? <html> <body> <table class="test"> <tr><th>あいうえお</th></tr> <tr><td>かきくけこ</td></tr> </body> </hmlt>
table.test th { color: pink; }
table.test th {...}
ごめん
table[class="test"] th { color: red; }
test[class~="test"] th { color: yellow; }
later-spacing プロパティ
paddingすりゃいいだけだろ
159 :
Name_Not_Found :2008/02/11(月) 02:20:11 ID:xgyjrVKt
HTML 文書には、 link 要素で import.css を読み込ませるようにしてあり、 その import.css には、 @import'style1.css'; @import'style2.css'; と、二つのスタイルシートファイルが更にインポートされるようにしてあります。 この style1.css と style2.css 両方に、 style1.css : 文字の太さは通常の太さで、文字色は青にする。 style2.css : 太文字にし、文字色は赤にする。 というような、異なる a 要素のスタイルが書いてある場合、 どちらの表示が優先されるのでしょうか? また、 style2.css での記述を必ず優先させるためには、 !important を書くだけで平気でしょうか? よろしくお願いします。
何で試したり、cssの仕様を読もうとしないの?
161 :
158 :2008/02/11(月) 17:04:19 ID:???
試してみたのですが、 どちらが優先されているかがイマイチ分かりません…。 後からインポートした方(style2)の方が優先されるのでしょうか…?
色盲なんだな。
上から下へ読んでいくんだろうが、ボケ PCは昔のことなんか振替んねぇんだよ
お前らなんでcssの話してんだよカスが 大柴の話をちゃんとしろよ
ルー語でおk
ユーはホワイcssのトークオンリーな訳? しっかり大柴のトークをトゥギャザーしようぜ
ミーの脳がメルトダウン
>>166 もはやそなたはルー語をマスターしてるな
幅指定ありのテーブルにボーダーを付けた時、ボーダーを含めて 幅が設定されるみたいなんだけど、これって仕様通り? 例えば <table style="width:500px;border:3px solid #000;"> とかってした場合に、ボーダーを含めた幅が500pxになるみたいなんだけど。 (標準モードでも互換モードでも同じ) 仮に仕様通りの解釈だとして、どういう理屈になるのかな?
strictスレへどーぞ
シュッ シュッ シュッ ハ,,ハ シュッ ハ,,ハ彡( ゚ω゚ ),ハ ( ゚ω゚ )彡ミ( ゚ω゚ ) お断りします _(__つ/ ̄ ̄ ̄/_ \/ /
172 :
Name_Not_Found :2008/03/04(火) 10:29:28 ID:jxKPUKng
<div style="width:300px;height:300px;background-color:red;overflow:hidden;"> <img src="hoge.png" width="100" height="100" style="position:absolute;top:250px;left:250px;"> </div> 画像の赤いエリアからはみ出しているところが隠れるようにしたいと思っています。 IE7だと上の書き方でできましたが、 Opera9だとはみ出している部分が表示されてしまいます。 Operaでも可能な方法を教えてください。
173 :
172 :2008/03/04(火) 10:39:52 ID:???
すみません解決しました。 divのほうにも絶対座標を指定すればいいんですね。
174 :
Name_Not_Found :2008/03/04(火) 15:28:12 ID:58HvQhEk
<ol> <li>あああ</li> <li>いいい</li> </ol> としたとき、数字と文字(あああ)の隙間が空くのですが、 これを詰める方法はないでしょうか?
マーカー表示をやめて、content プロパティで表示するようにすれば? IE対応?そんなゴミブラウザシラネーヨ
スレ違い ここはルー大柴スレだ
オールマイティーオッケーさ ブラザー
178 :
Name_Not_Found :2008/03/05(水) 20:20:26 ID:3TVPhP6o
「#***がclassで、.***がidだ」って書いてある本があるんだが、これは一体なんなのでしょうか? 返品して貰えますかね?
なんていう本ですか?
div.newpage{ page-break-before: always;} で印刷時の改行位置をやってるんだが、 印刷プレビューしてみると、divで指定しているブロックの区切りの間がものすごい開いて、 改行ポイントまで一つのdivブロックを押し下げるって状態になってる。 ようするに、ある区間、真白な部分ができている状態。 これってどうすればいい?
どの UA で発生する現象なのかも書かないで質問とは片腹痛い
182 :
178 :2008/03/08(土) 01:52:28 ID:???
>>179 『3日で作るPHPアプリケーション』秦崇・遠藤諭 アスキー
という薄っぺらい本です。
PHPについての本ですが、なぜかCSSについても数頁ふれていて、そこでこの間違いが。
単なる誤植ではなく、著者が根本的に勘違いしてるんだと思われまする。
ならCSS自体はおまけなわけで そこのまちがいくらいじゃ返品はできないでしょ
<html>
<head>
<style type="text/css">
h2{
background-image:url(nav_bk.gif);
float:left;}
</style>
</head>
<body>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
<h2>MMENU</h2>
</body>
って試しに書いたら
http://www2.uploda.org/uporg1359650.png みたいに左のだけ上にズレルのは何故
margin,paddingを殺す
おk、試してみるサンクス
padd殺さんでもmargin殺したらできた。 聞いてばっかりですまないがコレってどういう理屈?
仕様書にinline要素はそうしろ的なことが書いてあるから 一応、UAによってmargin,paddingの解釈は違うので最初に全部殺しておくが吉
回答サンクスだぜ
192 :
Name_Not_Found :2008/04/12(土) 01:51:31 ID:ezBgs235
背景画像の範囲を左や真ん中に寄せるにはどうすればいいですか? bodyでwidthを指定すればできると思いましたが背景画像だけは全体に広がってしまいます。
>>192 a) box作ってそれに背景指定
b) 画像を表示したい幅または高さに加工し、repeat方向をyまたはx指定
194 :
Name_Not_Found :2008/04/12(土) 13:21:43 ID:gYw71jVr
195 :
Name_Not_Found :2008/04/12(土) 16:24:01 ID:CNG7bHPk
DTDでURL書いとけばieでも火狐でもそんなに機にしなくていいよ
196 :
Name_Not_Found :2008/04/13(日) 05:10:04 ID:AdLzqwk3
ほら絶対配置なんかするとフッタから、金玉みたいにはみ出る事もあるじゃないか。 そういうのはCSSを諦めてtableを使ってみたりしてるのかい。
金玉はしまってあるし
198 :
Name_Not_Found :2008/04/13(日) 07:28:41 ID:AdLzqwk3
君は金玉に対する認識が間違っている。 折角、ぶらさげた金玉を皆に紹介しないでどうする。 それすらしたくない程に金玉が恥ずかしい存在なら 引きちぎってしまえ!!
199 :
Name_Not_Found :2008/04/27(日) 15:03:58 ID:B3KoEFqh
バックの色を指定しつつ それとは別に特定の場所から特定の場所までの色を別の色に指定する方法はありますか?
ありますよ。
余裕ですよ。
CSSファイルを分けて作ると、管理はしやすいけど読み込みの処理が時間かからない? 前にサーバーが極端に重いときに読み切れなかったりしたんだけど。 ずらずらと長い1つのCSSファイルか、 部分部分に分けた5つぐらいのCSSファイルか どっちがいいんだろうね
そんなに細かい指定をずらずらCSSで行うのもどうかと
冗長なソースしか書けないんだろ
ハ,,ハ 僕、アルバイトォォ!! ('(゚∀゚∩_ 僕をどこかのスレに送って! /ヽ 〈/\ お別れの時にはお土産を持たせてね! /| ̄ ̄ ̄|.\/ | モツ煮 |/  ̄ ̄ ̄ 現在の所持品:新聞、∈(・ω・)∋ダムー、ゆうパック、ダム穴、NCSA Mosaic
普通にCSSだけで8kbいかないか?
んじゃ、まさるさんのとこに送り返すか
htmlが大体12k〜24kに収まるようにしてるから、 cssだけで10kbいったりすると、長くなったかもと思う。 一回読み込めばいいから気にならんけど。 cssにした一番のメリットは転送量だったが、少しでも軽くしたい。
今見直したらHTMLが50Kから100KでCSSがざっと20Kほどか 50はさすがに個別ファイル化したほうが見やすいが、 idとnameによって一つのファイルに詰め込めるから詰め込んでいるが、 こりゃちょっとやりすぎだな。テーブルだとさらに増えそうだ。
CSSもページ数が多くなってひとつに詰めるとそれぐらいになるよな
ブログも煩雑だから20KB超えるぜ どの程度のclassとidを使用するかによって、 最終的な量が決定するわけだ。 シンプルでidもclassも指定しなければ問題はないけど、 段組とかやりまくっていると、結構な量になるね。
テーブルレイアウト→CSS段組→シンプルなCSS こう移ると見た。 CSS段組も飽きると質素な、ほとんど文法のみのhtmlになるのかな。
ならないだろ。 歴史的な系譜としては、 シンプル→テーブル→CSS だよ。 発端は紙媒体のデザインをwebで表現したいことなんだから。
定番な3カラムCSSだけど デザイン的には悪くないんだけど カッチリやればやるほど融通が利かなくなるな 文字サイズを最大にしたら崩れたり、cssでキッチリサイズ指定するから
さすがルー大柴公認のスレ
というか、文字サイズ変更で崩れないデザインのほうが難しいだろ。 IE7は描画が特殊だからborder指定した瞬間、文字サイズ変更で崩れるのが確定。
1カラムが少なくてさびしいな。 2カラムも好きだが、基本1カラム。 3カラムとかなんですか……なんであんなごちゃごちゃしたものが好きなんだろう。
縦のスタイルのほうが楽だから 3カラム→2カラム→ほとんど1カラムになったよ
読む分にも3カラムって全くメリットないしな。 あれって作成者がアフィ貼り付けるのに便利ってだけじゃね?
ちなみに↑これって下の両サイドはブラウザに合わせて伸縮するんですよね・・・? どうかお願いします。
余裕だな。中身まで伸縮されたら厄介だったが。 後方互換は無視する。考えると面倒だ。 body { margin:auto; width:800px; } <body> ここの中のものが中央ブロック揃えになりますよ </body> 当たり前だが、後方互換を考えたらbodyではなくdivに指定する必要がある。 互換モードが発動するとbody要素ではセンタリングできないんだ。
さらに段組にする場合は、floatを使って外幅の90%を超えないように指定する。 この場合、メニュー部分は250pxで本文部分は500pxでいいだろう。 後方互換の場合は全体にtext-align:leftを指定して、 bodyにtext-align:centerを指定する。さらに中身は全部外側にdivで外側divにwidth指定とmargin:autoだ え? text-alignはボックス位置の指定ではなくテキストの位置指定だって? MSの製造ミスですよ。
#CONTENT { width: 500px; float: right; } #MENU { width: 250px; float: left; } <div id="CONTENT"> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> </div> <div id="MENU"> <p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p> <p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p> <p>関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報関連情報</p> </div> 段組はこういう感じ。お粗末様
>>223 は、「このページの作り方」を聞いてるんじゃなくて
「このページで紹介されているテンプレート」の作り方を
聞いてるんじゃないかと思うんだ。
>>228 そのとおりでございます・・・
>>225 さん
ありがとうございます。
いただいた内容も全部理解しきれていないのですが・・・
背景の写真とか、下のメニューの伸縮を考えると少し違うような?
中身のテンプレの作りを教えていただけるとありがたいです。
もし、私の勘違いだったらすみません・・・
どうかお願いいたします。
orz もしかしてflashの中身か…… 上半分と下半分はまず最初にdivでグーピングして分割する。 別にフレーム使ってもいいけどさ。 上はタブメニュー部分をulリストにして丁寧にfloat そこから内容は2カラム段組。さっき表示したパターンのdivを採用だ。 縦に表示が崩れると困る場合はここでoverflowを使う。 で外枠のdivに角丸背景画像を表示して上は完成 下は三カラム段組。一個ずつ丁寧にfloatしていく。 floatブロックの角丸は背景画像使うと楽だからそれ使え。 さらに外枠divにwidth指定。marginの指定も忘れるなよ。 で、あまった背景部分はおそらく別の背景画像を表示する。 下3カラムはおそらく固定だろう。上は伸縮しそうだけど。
グルーピングすら不要だと思うがとにかく余裕 がんがれ
body背景画像は左右に角丸と写真を描いたものno-repeatでtop・center位置に指定。 背景色は#fffかな? もしくは下三カラムは角丸+縦横の線を描いたものを背景画像で指定かな? すると中身は固定だが、背景部分のお陰で大きく見ると伸縮しているように見える。 この容量だと1024よりも大きい解像度で見ることはまずないだろうから、気にしないでいいだろう。 気になるのなら真ん中だけ可変幅にするとか出来なくないんだけど、そうすると角丸のために余分なdivが二つ必要になる。
floatしたものにmarginは出来ないかorz とりあえず四つのブロックに幅指定する。 上と下は別物として扱う。下はfloatする。 これだけね。すまんね。長々と。
>>223 俺と好みが近いな。
他のテンプレートも紹介してくれ!
235 :
Name_Not_Found :2008/05/01(木) 22:14:14 ID:ECONvAZd
float指定で困っています。 side1、main、side2を間隔なく配置し、それをブラウザの中央に表示したいと考えています。 この3つの要素をfloat:leftで左寄せにし、contentsというdiv要素の中に記述しました。 marginは0px、paddingも0pxと指定し、各要素のwidthはside1が9px、mainが740px、side2が9pxに 設定しました。合計で758pxなのでcontentsのwidthを758pxにしましたが、side2がside1の真下に配置されてしまい困っています。 IE6で確認しただけなのですがなぜかわかる方いましたらご教授お願いします。
合計値は外幅の90%にするんだよ じゃないと崩れる
>>235 IEは横幅合計値とコンテナボックス横幅が同じだと下に落ちる有名なバグがある。
ちなみに、その場合、mainのみでいいんじゃないか? 外側のdiv(この場合、contents)にpaddingかmarginを指定するのが定石だよ で、さらに外側のbodyをセンタリングするといい感じ。 もしくはmainのみでpaddingかmarginを表示して幅指定しない
239 :
Name_Not_Found :2008/05/01(木) 22:50:15 ID:ECONvAZd
>>236 >>237 すばやい指摘ありがとうございます。
width761pxにしたらしっかりなりました。
>>238 <body>
<div class="contents">
<div class="side"><img src="aaa.jpg" width="9"></div><!-- end side-->
<div class="main">
<div class="t_logo"><img src="logo.jpg" width="220"></div><!-- end t_logo-->
<div class="t_photo"><img src="photo.jpg" width="520"></div><!-- end t_photo-->
</div><!-- end main-->
<div class="side"><img src="bbb.jpg" width="9"></div><!-- end side-->
</div><!-- end contents-->
</body>
こんな感じになっています。logoとphotoにもfloat:leftつけてきっちり配置しているので
(デザイン上1pxも空けたくないので・・・)こんな面倒なことになってしまって。
>>239 背景画像として組み込んだほうが、管理しやすいってことだよ
特にimgのみのdivってのはさほど意味がない
ごちゃごちゃとソースをいじるよりは一発なんだ
書き忘れたが、divではなく、h*……つまり見出しの場合はimgの方が楽
242 :
Name_Not_Found :2008/05/01(木) 23:03:06 ID:ECONvAZd
>>240 ご指摘ありがとうございます。
書き忘れましたが、背景に組み込みめばよかったのですが、デザイン上背景にすでに別の画像を組み込んでいたので
仕方なくこのような形をとりました。ブラウザによっては何個か背景画像を組み込めるらしいのですが通常は1つだけらしいので・・・
何か別の簡単なやり方などがあればご教授お願いします。
つーかこのスレで質問すんなよ・・・
sageも知らん超初心者だからな
>>242 一つの要素に表示できる背景画像は一つ
旧IEを考えればhtmlはムリなので、
body以下の要素になる
つまり、bodyやdivなどがこの場合最有力候補
固定は旧IEのバグで一個しか固定できないが、普通に考えたら一個固定できれば十分
後は自分で考えろ。そうじゃないと成長しないぞ
って、書いて、分からないだろうから答えを書く。 contentsが内包するdiv三つの画像を合体させて、contentsに背景表示する もし、side main logo photoに背景表示されている場合はもう諦めるしかないけどね それに、ソースを見る限り内包しているのはimg要素であってテキストではない この場合テキストを追い出すテクニックもあるが、確かにこりゃfloatしかないわ おせっかいすまんね
>>IEは横幅合計値とコンテナボックス横幅が同じだと下に落ちる有名なバグがある。 これってpx指定でも崩れる? どっか解説してるページとかあったら教えて。
つーかdivの直下にimg
おまえらネタスレで何やってんだ
本音で語れないこの世の中じゃあ・・・
>>246 どうもです。
参考になりました。自分なりにいろいろ試してみます。
252 :
Name_Not_Found :2008/05/16(金) 14:57:31 ID:yRdVj5ds
hr要素にborder-styleを適用する手法は有りですか? dottedを指定しても、FirefoxとSafariでだけベタの直線になってしまいます。 スタイルシート適用時は点線の罫線で、非対応のときは通常の罫線を表示したいのですが、 うまくいきません。
UA依存だから仕方ない
254 :
Name_Not_Found :2008/05/16(金) 21:53:02 ID:8V5hksUz
質問 画像付きボタンを img src= で書いたのですが、FireFoxだけちょっと横長で 小さくなりません、小さくするにはどうしたらいいのでしょうか?
はあ?web初心者スレ池
>>253 やはりしかたないのですね。罫線の意味としては変わらないので、そのままでいくことにします。
あ、罫線ではなく水平線か。
だからここは質問スレじゃねえっての!
>>258 じゃあ何なの? 検索してヒットする質問スレは上級者用だけだし、「スタイル」で探して辿り着いたのだが。
スタイルで検索ってダイエット板か
>>259 マジレスすると
ネ タ ス レ 。
「CSS初心者」で検索汁
CSSの質問かもわからないのにいい加減な誘導すんな
>>262 間違ってここにきたとしてもCSSの質問じゃないことはあり得ない件
お前のほうが質問者よりスレタイ間違えてね?
ハァ?
>>263 カスケーディングスタイルシートではなく単にスタイルシートについて質問する人が
多いのではないかと。
ハァ?
>>265 JSSやXSLの質問なんてあったか?www
そんなことよりも、どっちのスレもCSS用スレだから無関係。
>>260 「スタイルシート」で検索したあと、「シート」を削って再検索。
そりゃダイエットし過ぎってもんで
270 :
Name_Not_Found :2008/05/19(月) 15:38:04 ID:2teYNWNa
『仕切り奉行』が五月蠅すぎ。
五月蠅いって漢字がうるせーよwww
ご・・・ごがつばえ
たしかに五月蠅いwwwww
特定のクラスのタグ内にあるテキストの先頭に 番号を順番に振っていきたいのですが, こういうことってスタイルシートだけでできるのでしょうか? <div class="title">たいとる</div> <div class="naiyou">内容</div> <div class="title">たいとる</div> <div class="naiyou">内容</div> <div class="title">たいとる</div> <div class="naiyou">内容</div> のような繰り返しがあるときに,title タグの中の 文字列の先頭に番号を振っていきたいのですが・・・・ 今は連番を返してくる関数を書いて, <div class="title"> <script type="javascript"> renban(); </script> たいとる </div> のようにしているのですが,面倒で・・
277 :
Name_Not_Found :2008/07/04(金) 18:15:59 ID:zSjWM7/K
cgiで吐き出すテーブル(サーチエンジンの結果)を改行ではなく、 順に横に並べていって、横まで行きついたら改行するっていうのを cssでやろうと思うのですがどのようにすればいいでしょうか?
float
279 :
Name_Not_Found :2008/07/04(金) 20:02:47 ID:zSjWM7/K
>>278 ありがとうございます。
フロートでできたのですが、一つ一つのテーブルの縦の長さが違うため、ブラウザの端まで来て回り込む際にガタガタになってしまいます。
ブラウザの横サイズを決めちゃう以外で何かいい方法はあるでしょうか?
tableの高さを決めちゃう
281 :
Name_Not_Found :2008/07/05(土) 20:54:59 ID:PZ6XbNJj
質問です。 下記のような同じ構成のボックス(四角は画像など)を 回り込ませてレイアウトした際にIE6でまれにボックスの 文章の最後から5文字くらいが外にはみ出してしまうことが あるのですが対処方法はないでしょうか? ■こうなるはずが・・・ ┏━━┓ ┏━━┓ ┃ ┃あいうえお ┃ ┃さしすせそ ┃ ┃かきくけこ ┃ ┃たちつてと ┗━━┛ ┗━━┛ ┏━━┓ ┏━━┓ ┃ ┃なにぬねの ┃ ┃まみむめも ┃ ┃はひふへほ ┃ ┃やゆよ ┗━━┛ ┗━━┛ ■IE6でたまにこうなる ┏━━┓ ┏━━┓ ┃ ┃あいうえお ┃ ┃さしすせそ ┃ ┃かきくけこ ┃ ┃たちつてと ┗━━┛ ┗━━┛ ┏━━┓ ひふへほ←────左のボックス内の後ろ5文字くらいが ┃ ┃なにぬねの ┏━━┓ この辺に分身として現れる ┃ ┃はひふへほ ┃ ┃まみむめも ┗━━┛ ↑ ┃ ┃やゆよ │ ┗━━┛ │ ここにきちん文章があるのに
>>281 IE6のfloat関連バグは山程あり、情報も山程あるんだからググレカス
IE6以外で正しく表示できるならIE6対策を取らず放っておいても構わないとさえ思う。
285 :
Name_Not_Found :2008/07/10(木) 21:55:01 ID:5d81RjCM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml " lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT-JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style>
div#foo { width: 100px; height: 100px; border: 5px solid #000; }
div#foo p { display: none; }
</style>
</head>
<body>
<div id="foo"><p>FOO<p><div><img src="./foo.gif" width="100" height="100" />
</body>
</html>
例が変で申し訳ないですが、
上記HTMLを出力すると、foo.gif のボトムに数ピクセルの隙間が必ずできてしまいます。
対応方法はあるのでしょうか?
286 :
285 :2008/07/10(木) 22:01:14 ID:5d81RjCM
すいません。追記です。 この現象はIE6のみで発生します。
>>286 こんな風にしてみたらどうかな?
div#foo p {
display: none;
margin: 0px;
}
そうか・・・では知らん!!(`・ω・´)キリッ!!
>>285 img {vertical-align:bottom;}
291 :
Name_Not_Found :2008/07/19(土) 00:31:11 ID:nQ5rYAPt
PHPとCSSを使っていますがCSSでも変数って使えないの? 色とか文字サイズを1つ1つ指定していくのは大変・・・ もっと効率よく使いたいので変数が使えればいいな〜
セレクタの意味わかってる?
プログラマは頭がカタい
あああああああああああああああ あああああああああああああああ いいいいいいいいいいいいい(改行)<!-- 先頭2文字分あき --> いいいいいいいいいいいいい(改行) ううううううううううう(改行)<!-- 先頭4文字分あき --> ううううううううううう(改行) こういうのが作りたいんですが、p ではなくspanでできないでしょうか。 p.3 { margin-left: 3em }
296 :
Name_Not_Found :2008/08/07(木) 19:44:51 ID:fv5MkkX5
画像をセンタリングするのに2時間かかってもできないのです・・・ 初心者な質問すぎて申し訳ないです! (テンプレも読んだのですが上手く行かず) <div style="text-align: center;"><img ほにゃ/></div> ならうまくいくのですが、CSSを別ファイルにして test.css: .centering{text-align: center;} test.html: <div class="centering"><img ほにゃ/></div> とすると左寄せになってしまいます。centering クラスの中に margin: 0px auto; display: block; やら何やらいろいろ足してみてもだめです・・・何が間違っているのでしょうか?
>>296 ・text:alignはインライン要素に有効
・imgはインライン要素
・divはブロックレベル要素
・IEは糞
298 :
Name_Not_Found :2008/08/07(木) 21:08:13 ID:fv5MkkX5
>>297 お返事ありあとうございます!
上3つはわかったのですが、
一番したの「IEは糞」というのは・・・?
バグが多いと聞いたことがありますが、そういうことでしょうか。
もう3時間以上この問題で右往左往して疲れてしまったので、
作業は明日にします・・・ああ、どうして画像を中央に持ってくるだけで
こんなに面倒くさいのか・・・<center>タグとか<div align>とか
使いたいなあ、正直・・・
わかるタグを使えばいいのです。 背伸びしても仕方ないのです。
300 :
Name_Not_Found :2008/08/07(木) 22:53:10 ID:fv5MkkX5
>>299 非推奨のタグって使っても大丈夫なんですかね?
ある日からポンと使えなくなりそうで怖いです・・・
(現実問題大丈夫なんでしょうけどねー)
バグも多いし仕様もおかしい。
外部cssから全てのdivにフィルタ filter:Alpha(opacity=70) をかけているんだけど、 divの中の画像にはかからないようにするにはどうすれば良いですか?
>>303 img { position: relative; }
>>303 そんなのはIE独自プロパティでCSSじゃねえよスレチ。
307 :
Name_Not_Found :2008/08/11(月) 20:27:54 ID:CNc3/M+W
a:link { color: --- }やa:visited { color: --- }など、リンク色を変えるのは、 外部スタイルシートから呼び出すことはできないんですか? 目的のhtml文書のbodyに組み込むしかないんでしょうか。
>>307 外部スタイルシートから呼び出せるよ。
うまくいかないとしたら、どっか記述間違ってるんじゃないかな。
>>308 回答ありがとうございます。安心しました。
どっか間違ってないか見直してきます(`・ω・´)
310 :
Name_Not_Found :2008/08/14(木) 13:00:42 ID:r25rewuU
質問です。 box1(div)のheightに固定値を指定すると「余白」の色が box1で指定した背景色(仮に青とする)になるのですが、 autoにすると、青になったり白(box2とbox32の背景色)に なったりします。 高さ以外に違いがないと思われるページで、違う色になります。 高さが関係するのかと思って調べたのですが、 高さの関係が、x>y>zになるxとzが青で、yが白になるので 関係ないような気がしています。 table1とbox31の高さは常に同じで、table1の高さの方がbox31の 高さより大きく、box32の高さが可変です。 どういう原因が考えられるのでしょうか。 box1 table1 box2 box31 余白 box32 よろしくお願いします。
311 :
Name_Not_Found :2008/08/14(木) 13:05:21 ID:r25rewuU
↑補足します。 table1とbox2はbox1の要素です。 box31とbox32はbox2の要素です。
・floatやpositionした要素に高さは無効 ・boxの挙動がおかしいと思ったら、borderを付けて確認するのが基本 ・ソース出せ馬鹿
ソースをよこせ
そーだよそーだよソースだよ
テーブル全体をリンクに使用したいしたいのですが 現在は onclick="window.open('view/research_capital_view.html')" を使用しています。 これをスタイルシートで実現する方法はないのでしょうか JAVAScriptで行うとHover設定がまったく反映されないのと 構造が綺麗にならない点が不満です。
>>315 JSだとかCSSだとか以前の問題だ
tableをaの中に入れるのは間違い
>>316 それは、分かっているから、JAVAScriptでやっているわけでして
とはいえIE、Opera、FireFoxで挙動は全然違いますが、
aの中にTableを無理やりぶち込んだほうが、
まだ求めている物に近い動作はするですよね。
特にFireFoxはそのものズバリの動作をしてくれてしまいます。
スレ違いということも分からないのに分かってるとかw
そもそもこのスレが質問スレではない件
320 :
Name_Not_Found :2008/08/17(日) 21:12:57 ID:+JE4P2wV
>>318 CSSで細工して、そのように動かすことが出来ないか?
という質問なのですが
ここはCSSの質問スレではないのですか?
>>320 htmlにはa要素にtarget属性がありますが、HTML4.01で非推奨、
xhtml1.1では廃止されました。
cssで動的な指定はできません。
322 :
Name_Not_Found :2008/08/18(月) 11:29:53 ID:AufoEyIv
>>321 Hover以外に動的な細工をする方法はないんですね
trやtdには出来てもTable自体にHoverが有効でない以上
手法はなしという事なんですね
ありがとうございました
馬の耳に念仏
324 :
Name_Not_Found :2008/08/19(火) 13:14:57 ID:WaoB7Y1R
<div class="box1"> <table class="box2"> <tr class="box3"> ・・・・ って構造だとbox1にfont-size指定してもbox3内には利かない?
フツーdivにtableなんて入れないけど、利かないブラウザあんの?
おっ
ぱ
っ
ぴー
>>316 tableをaの中に入れてはいけないのか…。
table全体をa nameで囲んだりよくするのだけど。
この場合a hrefと言いたいんじゃないかと a nameならcaptionやhxに付けた方がスマートではないかと
333 :
Name_Not_Found :2008/09/02(火) 11:19:17 ID:lN/qnR2r
印刷するときに、css を使って印刷するページごとに ヘッダやフッタを付けたいのですが可能ですか?
余計な事すんな
>>333 <link rel="stylesheet" type="text/css" href="print.css" media="print">
printcssは印刷のときだけ適用される。
>>332 a hrefだろうがa nameだろうが
インライン要素でブロック要素を囲むな
他にもつっこみどころ満載 HTMLから勉強してこい
プ
質問失礼します。 web初心者スレでも質問させていただいたのですが あちらなんだか荒れてるみたいでスルーされてしまったので こちらでも質問させていただく失礼をお許しください。 <STYLE TYPE="text/css"> <!-- TABLE {font-weight:bold;} --> </STYLE> でページ全体の文字を太くしたのですが、一部分だけ細字に戻すことはできますか? よろしくおねがいします。
>>339 細くしたい部分に
font-weight:normal;を指定
>>340 できました!ありがとうございます!
スタイルシートの効果を部分キャンセルする方法ばかり考えていました…。
floatしたボックスをネガティブマージンで重ねた場合の重なり順序は、 後続が絶対上にしかならないのでしょうか? <!-- 例HTML --> <div id="satou"> <div id="sio"></div> <div id="solt"></div> </div> /* 例CSS ++++++++++++++++ */ #satou{ width:45px; } #sio{ float: left; width: 100%; height:30px; margin-bottom: -15px; background-color: #FFF; } #solt{ float: left; width: 100%; height:30px; background-color: #000; } というコードの時の、重なり方についてです。 #FFFが15px+#000が30px、#FFFが30px+#000が15pxとコントロールできないのでしょうか?
>>342 position+z-indexで可能
W3CのCSSチェックかけると 「padding-leftとかpadding-rightの値にautoとかねーよw」とか言われる…。 これって廃止になったの?使わない方がいいんだろうか?
345 :
Name_Not_Found :2008/12/26(金) 23:14:43 ID:h+SjkvEv
説明しにくいのですが、画面いっぱいに表示するメニューに div style="overflow:auto"を使って、サイドバーのようなものを作りたいのですが、 下のようにしたとき、 IEなら画面を小さくして、div.sidebarの中身がはみ出るときちんとスクロールバーが出るのですが、 firefoxで表示させると、divの中身が全部表示できるだけ大きくなってしまいます(スクロールしない) うまくfirefoxで表示できる方法はありませんか? <html><body> <table style="width:100%;height:100%;"> <tr> <td colspan="2" style="height:1;background-color:#f00"> </td> </tr><tr> <td style="width:20%;background-color:#ff0"> <div id="sidebar" style="overflow:auto;height:100%;"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </td> <td rowspan="2" style="background-color:#f0f"> </td> </tr><tr> <td style="height:1;background-color:#0ff">a</td> </tr></table> </body></html>
css初心者です 作った(といっても改変可サンプル変更)のおかしな部分を実際見てもらって 間違いの質問をしても大丈夫でしょうか? もし、もっとふさわしいスレがあったら誘導して頂けるとありがたいです… 質問は、IEでは出るのにサファリ、火狐ではでないスクロールバーについてです
リスト化したメニューにそれぞれ画像を張り付けているんですが、 hoverで別の画像を表示したいのですがうまくいきません。 ご教示ください。 html <div id="header"> <ul> <li><a href="#"><img src="image/home.gif" alt="ホーム" name="home" width="160" height="50" id="home" /></a></li> <li><a href="#"><img src="image/profile.gif" alt="会社概要" width="160" height="50" id="profile" /></a></li> <li><a href="#"><img src="image/service.gif" alt="提供サービス" width="160" height="50" id="service" /></a></li> <li><a href="#"><img src="image/faq.gif" alt="FAQ" name="faq" width="160" height="50" id="faq" /></a></li> <li><a href="#"><img src="image/contact.gif" alt="お問い合わせ" width="160" height="50" id="contact" /></a></li> </ul> #header ul li a#home:hover という感じでそれぞれ指定するだけではダメなのでしょうか?
>>347 a#homeなんかどこにも存在してないだろ
349 :
347 :2009/01/19(月) 15:57:08 ID:???
これ以外にいくつか試したんですがうまくいきません。 id="home"を#homeで指定してもダメでした。 #header ul li #home:hover、#header ul li #home a:hoverも同じく・・・orz
みんな、固定レイアウトの時ってフォントサイズどうしてる? 可変?それとも固定?
絶対値指定はしない。ここでいう絶対値指定っていうのはピクセルとかじゃなくてミリメートルとかインチとかのこと。
ピクセルもやめとけ
>>347 根本がおかしいだろ。なんで画像にID振ってるんだ。
javascriptの画像切り替えと混同してないか?
普通は
<ul id="Menu">
<li id="Test"><a href="#"><span>TEST</span></a></li>
</ul>
てな感じでタグ書いてcssは
#Menu ul li a { display:block; width:200px; height:30px; }
#Menu ul li span { display:none; }
li#Test a:link,li#Test a:visited { background:url("test1.gif") no-repeat 0 0; }
li#Test a:hover,li#Test a:active { background:url("test2.gif") no-repeat 0 0; }
CSSの画像切り替えは普通背景でやる。
347みたいにデフォ画像を画像タグでやるんなら
マウスオン時にデフォ画像をvisibilityで隠すなりして背景にマウスオン画像を敷く、でいけるかも。
どっちにしろ画像じゃなくliかaにid振るべき。
ちょっと質問 <meta http-equiv="Content-Style-Type" content="text/css"> これが記入されていれば <link rel="stylesheet" href="hogehoge.css"> <style>〜</style> これでかまわない。 <link rel="stylesheet" type="text/css" href="hogehoge.css" /> <style type="text/css">〜</style> やはりこう書かないとだめだ。 さて、どっちが正しい?
コンテントタイプの意味を考えればわかるだろ
imgをくくってるdivの背景画像を、imgの上に重ねることは不可能ですかね? <div class="box"> <a href="test.html"><img src="test.gif" ></a> </div> div.box { background-image:url(test2.gif); z-index:2; } img { z-index:1; }
>>348 divの中にある以上無理だろ。
z-indexは同階層のものに対して使う。親子関係に口は挟めない。
なんでそもそもそんな馬鹿げた事やろうとしてんだ。
divの中の画像を消してdivの背景出したいならvisibility:hiddenで消しゃいいだろ。
高さが可変のブロックAの中に、ブロックB、ブロックCが入っています。 こんな感じです。 <div id="A"> <div id="B">hoge</div> <div id="C">moge</div> </div> ブロックBの高さを100px、 ブロックCを残りの長さ(ブロックAの高さから100pxを引いた値)にしたい場合、 CSSではどのように指定したら良いでしょうか?
360 :
359 :2009/02/18(水) 22:35:37 ID:???
(モダンブラウザのみですが)自己解決しました。スレ汚し失礼しました。 div#A{ height:80%; } div#B{ height:100px; } div#C{ position: absolute; top: 100px; bottom: 20%; }
<li>や<dd>のリストをfloat:leftで横並びにするとき、 最後の属性だけfloat:noneを指定すれば、親ブロックにその分の領域が発生する (全部floatだとheightがゼロになって背景などが描画されないので) ……と期待するのだけど、Firefoxなどで表示すると、まるでclear:leftが指定されたかのように、 そのブロックが右に流し込まれずに下に落ちてしまいます。 <ul><li>hoge</li><li>hoge</li><li>hoge</li><li class="end">hoge</li></ul> li{width:100px; float:left;} li.end{float:none;} これは、ただしい描画なのでしょうか? また、どういう解釈になるのでしょうか。
>>361 ブロック要素はfloatしない限り基本的に横に並ぶことはない。
なのでfloat:noneを指定されれば下に落ちるのは当然のこと。
「リストが終わったら周り込み解除」ではなく「最後のリストだけ周り込み解除」になる。 だからそれで問題ない。 <div class="hogehoge"> <ul> <li>hoge</li><li>hoge</li><li>hoge</li><li class="end">hoge</li> </ul><span class="end"> </span> </div> .hogehoge { background:#fcc; } li {width:100px; float:left; background:#ffc; } span.end { display:block; height:1px; width:1px; overflow:hidden; clear:left; margin-top:-2px; }
この記述は正しいの? body{border:5px solid; border-color:#000000 #0000ff;} div{border:solid #000000; border-width:5px 3px;}
>>364 特に間違いは見当たらないが
何が問題なんだろうか
borderの一括設定とborder-widthを同時にやってるって点だろ。 正しいかどうかはワカラン。別に問題は無さそうだけどな。 個人的には一括設定のトコでborderのtyoeの前にwidthが来てるトコとかが気になるがw
>>366 >borderの一括設定とborder-widthを同時にやってる
線の太さや色をtop、bottomなどで変えたいときはむしろ今回のように別に指定しなければならない
>一括設定のトコでborderのtyoeの前にwidthが来てるトコとかが気になる
値さえ合っていれば、順番はどちらでも大丈夫
368 :
367 :2009/03/06(金) 08:54:42 ID:???
>>366 あーごめんなさい、しなければならないはちょっと言い過ぎ
ベースをborderで指定して個別に上書きというやり方も可
369 :
Name_Not_Found :2009/06/02(火) 06:25:13 ID:7YwK8DI7
<table border="1" style="border-collapse:collapse;"> <tr> <td style="width:10px;">aaa</td> <td style="width:10px;">bbb</td> <td style="width:10px;">ccc</td> ・・・・ ってやると5個目のセルくらいからセルの左端の座標が1pxくらいズレ出すんだけど borderのせい? セルの左端の座標を全部正確に10の倍数にするにはどうしたらいい?
多分改行のせい
ここは質問スレじゃないのに質問してるせい
pタグで改行しない方法ってありますか?\
display:inlineか display:inline-block あまりオススメはしないが、 状況によっては使い道もあるかもな
だからここ質問スレじゃないっつーの
>>374 !!!!!!!!!!!!!!!!!!374!!!!!三七四!!!!!!!!!!!!!!
なんでお前がしきってるんだよおおおお!!!
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお!!!
ツマンネ
377 :
Name_Not_Found :2009/06/20(土) 11:44:10 ID:PTFkUzz8
id・classの使いまわしをするとMarkup Validation Serviceでしかられます。 仕方なく、id・classの名称を変えて二度書、三度書きをしています。 Markup Validation Serviceでエラーを出すことなく、効率よく書く方法が あるのでしょうか。
378 :
377 :2009/06/20(土) 12:51:19 ID:???
idとclassが混ざってました。レス汚しですみません。
それ以前にここはネタスレであって質問スレじゃない
>>379 !!!!!!!!!!!!!!!!!!379!!!!!三七九!!!!!!!!!!!!!!
なんでお前がしきってるんだよおおおお!!!
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお!!!
110のランキング表作っているのですけど 10のいちが各ブラウザ安定しません 各<li>タグににパディングをいてれ調節しているのですが・・ テーブルのしかできませんか?
スレ違い以前に日本語でおk ここネタスレだから
>>383 !!!!!!!!!!!!!!!!!!383!!!!!三八三!!!!!!!!!!!!!!
なんでお前がしきってるんだよおおおお!!!
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお!!!
ツマンネ
386 :
Name_Not_Found :2009/07/11(土) 05:07:29 ID:QTq+57Lo
他人のcss見て勉強中なんだけど、全体幅に780pxが多いのは何か理由があるのかね? ちょっと気になったもんで
多いのはリキッド
>>386 > 他人のcss見て勉強中なんだけど、全体幅に780pxが多いのは何か理由があるのかね?
> ちょっと気になったもんで
IE6の標準設定でギリギリA4縦に収まる幅が770〜780px
1024幅のモニタでお気に入り出したままで サイドバーの幅はデフォなら 横スクロール出ず全部入るのが790pxくらいまで
希望している動作はCSS無しで書くと、↓こんな感じの動作を希望しています。 <table border="1" cellspacing="0" cellpadding="20"><tr><td>あ</td> <td><table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td></tr></table></td> </tr></table> <table border="1" cellspacing="0" cellpadding="0"><tr><td>あ</td> <td><table border="1" cellspacing="0" cellpadding="20"><tr><td>い</td></tr></table></td> </tr></table> それで↓のようにしたのですが ■CSS .hoge { border: 1px solid black; border-spacing:0; border-collapse:collapse; } .hoge td { border: 1px solid black; padding:20px; } .hage { border: 1px solid black; border-spacing:0; border-collapse:collapse; } .hage td { border: 1px solid black; padding:0px; } ■HTML <table class="hoge"><tr><td>あ</td> <td><table class="hage"><tr><td>あ</td></tr></table></td> </tr></table> <table class="hage"><tr><td>あ</td> <td><table class="hoge"><tr><td>あ</td></tr></table></td> </tr></table> テーブルの中のテーブルのpaddingが上位のpaddingが優先されてしまうみたいなんですけど どうすれば良いのでしょうか?
>>393 !!!!!!!!!!!!!!!!!!393!!!!!三九三!!!!!!!!!!!!!!
なんでお前がしきってるんだよおおおお!!!
ちゃんとスレタイに質問スレって書いてあるじゃんかよおおおおお!!!
396 :
392 :2009/07/16(木) 08:39:49 ID:???
質問スレじゃなかったんですね。 他のスレに移動します。 スレ汚して、申し訳ありませんでした。
397 :
Name_Not_Found :2009/09/15(火) 15:55:20 ID:GZqjI6jH
a { 〜 } a:hover { 〜 } のように書いて、マウスが乗ったときに色かえたりできますけど、これを <a style="〜">のように<head></head>に書かないでやることはできますか?
だから質問スレじゃ(ry
マルチ乙
401 :
Name_Not_Found :2009/09/15(火) 22:57:38 ID:Eb4QiI20
http://www.dotup.org/uploda/www.dotup.org145707.lzh.html ↑のファイルの中の「index.html」の右側のサイドメニューの横幅をかえたいんですが、
「style.css」の
/*サイド(一番右側)コンテンツ
------------------------------------------------------------------*/
#side {
float: right;
width: 176px;
margin-left: 8px;
padding: 10px;
この部分のwidth: 176px;の176pxの値を大きくすると大きくはならず、
形が崩れてしまいます。
どうすればサイズ変更できるでしょうか?
403 :
Name_Not_Found :2009/09/16(水) 00:24:12 ID:oqGyqT1l
こんにちは。FireBugをカンでいじってCSS組んでいます。
http://fukia.6.ql.bz/ 上記のサイトを作っているんですが、IEで見てみると、下のbottomの部分がなくなってしまいます。
どうしたらよいのでしょうか?
ここは質問スレじゃねーっての スレも読めない奴は仕様書でも読んでろ
405 :
Name_Not_Found :2009/09/16(水) 14:58:43 ID:3rcpibgk
「CSS」でスレ一覧を検索
了解しました
>>403 は無視してください
失礼しました
CSSを使用してリスト内の文字の上下間隔を狭めるにはどうすれば良いでしょうか? (上下の文字と文字の間隔を5pxや10pxと指定したいと思っています。) <ul> <li>あ</li> <li>い</li> <li>う</li> </ul>
自己解決したときはちゃんと書くように ・li内部の行間を調整するのは li {line-height:xx } →単位無し整数指定が推奨 ・li同士の間隔を調整するのは li {margin-bottom:xx} li {padding-bottom:xx} →px指定が安定だがemでもよい
>>410 推奨も何もない
用途によって変えなきゃならないに決まってるだろ
整数じゃないな すまん
>>412 そこの管理人が推奨してるとWeb全体に推奨なんてことはないw
理屈は知ってるが、知ってればこそ用途によって変えるべき
というかその人も「行ボックスの高さが意図していないものになってしまう可能性がある」 から推奨と言ってるだけで、常に推奨とは言ってないじゃん。 逆に言えば意図があれば別のものを使うという話をしてるだけだろ、 なのにその推奨を布教されてもその管理人に迷惑なだけと思うが。
本人だったら問題ないんじゃね?w
お前が本人か
俺がガンダムだ
そこの管理人はそこまで馬鹿じゃないだろw
知り合いかよ
tableでカレンダーを作りたいのですが、縦(日曜・土曜)の文字に色を適用する方法で悩んでます。
http://www.d-spica.com/designcatalog/table/table211.html 上のページだと縦列の背景色に<col class="xxx">、<th scope="col">などとして一括設定していますが
背景色の変わりにcolor:red;などとしても文字色が変わりません。
(td全体なら文字色変更できましたが。)
上の方法だと文字色指定は無理なのでしょうか?
また別の方法があるのでしょうか?
最悪、該当セル全てにclass指定するつもりですができればやりたくない・・・
良スレage
426 :
光 :2009/11/05(木) 21:21:25 ID:???
<select>の<option>に個別に設定したスタイルシート(色変え等は)はブラウザ依存なのでしょうか? SH903iのiモードフルブラウザでは正常に動作したものの SH-06Aのiモードフルブラウザでは効きません ブラウザ依存なら対象方法としてはJavaScript/onChangeで<select>ごとスタイルシートを変えるくらいしかないでしょうか?
427 :
Name_Not_Found :2009/11/17(火) 13:57:40 ID:ifxZIQ60
IE8, Windows7です。
下線がボックス幅を超えて描かれます。どうしてなのでしょうか?
幅240pxのサイドメニューボックスの中に下記のmenu_leftボックスを設け、
menu_leftボックスの中に、menu_titleを入れています。
下記の定義でmenu_titleの下線(border-bottom)が、menu_title幅(200px)をはみ出して(右側に20px)描かれます。
menu-tileの幅もmenu_leftのマージン幅も200pxなのに、なぜはみ出すのでしょうか?
.menu_left {
margin: 0px 20px 0px 20px;
padding: 0px 0px 20px;
}
.menu_title {
text-align:left;
color:#fff;
font-size:12px;
font-weight:bold;
background-image:url(
http://hogehoge.com/sTitle.gif );
background-position:top left;
background-repeat:no-repeat;
border-bottom: 1px solid #961585; /*この下線が右にはみ出す*/
margin:25px 0 0 0;
padding: 6px 12px 2px 30px;
height: 25px;
width:200px;
}
-webkit-border-radius: 4px; -webkit-ってなんだろー
独自拡張のプロパティに付けるベンダ接頭辞
430 :
Name_Not_Found :2009/11/20(金) 16:39:48 ID:mUHXNI5N
質問です。
リンク文字にマウスを重ねた時に、背景色(ボックス形)を表示するようにしたいのですが、
背景ボックスの高さが変更できません。指定方法を教えて頂けませんでしょうか。
今のソースとスタイルシートは以下の通りです。よろしくお願いします。
(「HOGEmail」と「HOGEurl」のところの背景色の高さです)
≪ソース≫
<ol class="ct_container">
<li><p class="ct_header"><a href="mailto:hoge1">HOGEmail</a> | <a href="
http://hoge2.com ">HOGEurl</a> |
<p class="ct_title"><a id="comment3" name="comment3"></a>タイトル</p>
<div class="ct_body">内容</div>
<div class="cnt_date">YYMMDD</div></li>
<li>/*次のタイトル、内容等*/</li>
</ol>
≪スタイルシート≫
.ct_header a , .ct_header a:visited {
color:#666;
text-decoration:none;
line-height:28px; /*(1)ここを変えても変わらない*/
padding:0.2em 0.5em;
border:1px dotted #fff; }
.ct_header a:hover {
color:#444;
/* (2)ここにline-heightを追加して変えても変わらない*/
border: 1px solid #ccc;
background:#f5f5f5; }
/* (3)下記を追加して変えても変わらない
li { line-height:28px; }*/
質問です。 横一列のメニューリンクテキストを右詰めで、<ul><li>タグを使って再現したい。 ブラウザではきちんと表示されるが、DreamWeaverのデザイン表示が妙なことになる。 (5つのメニューが、途中3つで改行され2段表示。 うち1つはテキスト自体も4文字が全て改行され縦4文字に並んでしまう。) テキストボタンでなく画像ボタンならば<li>にwidthを指定することで 回避できるのですが、テキストなのでwidth指定はしたくない。 また、納品後はクライアントが更新作業を行っていく体制を取るので DreamWeaverのデザイン表示を混乱の少ない状態に整える必要がある。
>>431 の続き
これは仕方のないことなのでしょうか?
現在は<li>タグにfloat: leftを指定して横一列に表示しています。
これをやめて<li>タグにdisplay: inline;を指定すると
DreamWeaver上では改行無しで表示されるのですが、
ブラウザ上でトップマージン指定や背景画像の位置指定が効かなくなります。
何か解決策が分かりましたら教えてください。
DWの表示が完全だという前提になってますね こういう人多いのかなあ今
まったくだ。ローカルの1制作ソフト上での見た目なんてどうでもいい。 どうせ各ブラウザで確認するんだし、WYSIWYGの見た目なんて違って当然。
というかDWもWebKit採用してくれればいいのになー 俺はhtmlもCSSもエディタでハンドコーダー派なんだけど DWしかわからない子たちが「○○さんのデザイン崩れます」て言ってくる IE・FF・Safari・Opera,全部検証してるっつの!
CS4からはプレビューはWebKit対応になってるらしいよ。
トゥギャザーしようぜ!
>>436 だね
あんまり意味ないんだけどね
IE9はまた独自仕様になりそうでこわいなあw
IEは6789でチェックとか、もうやめて><
439 :
Name_Not_Found :2009/11/26(木) 21:02:04 ID:FzH8K/lF
質問スレなんだから、まじめに回答しろ!
440 :
Name_Not_Found :2009/12/01(火) 12:27:45 ID:Mkuhgcka
HTMLの中で以下のようなレイアウトを作ろうとしています。 This is a [pen]. ↑black [pen]を基準にして「↑black」の位置を決めるにはどうすればいいですか? positionというのを使うのかな、、と試しましたがよくわかりませんでした。 よろしくお願いします。
>>440 .pen { position: relative; display: inline-block; }
.black { position: absolute; top: 1em; left: 0; }
<p>This is a <span class="pen">[pen].
<span class="black">↑black</span></span></p>
442 :
441 :2009/12/06(日) 02:37:42 ID:???
って5日も前のレスだったか…もう解決してるかな
443 :
Name_Not_Found :2009/12/08(火) 11:25:26 ID:spDDXc55
>>441 ありがとうございます。
とても助かりました。^^
もうすぐ三周年 トゥギャザー
jsだとオライリーのサイ本がバイブルっぽいですが、CSSでそういった書籍ってありますか? もちろん一冊で完結する訳はないんですが、皆さんどんな本で勉強されたのかなと。
446 :
Name_Not_Found :2010/01/11(月) 02:32:45 ID:QmXP9yD9
CSSで、この画像のような構造のサイトを作りたいと考えています。
ttp://imagepot.net/view/126314455414.jpg 今このようなCSSを組んでいるのですが、実際には以下の画像のような表示になってしまいます。
http://imagepot.net/view/126314476261.jpg div#content {
position: relative;
width: 900px;
margin-left : auto;
margin-right : auto;
top: 40px;
text-align: left;
bottom: 40px
min-height: 90%;
height: auto !important;
height: 90%;
}
div.nakami {
background:#fff1c3;
border:solid 10px #c96c29;
overflow:scroll; padding:30px;
position: absolute;
bottom: 71px;
left: 0px;
top: 72px;
right: 0px;
z-index: 11;
}
<続きます>
447 :
446 :2010/01/11(月) 02:34:08 ID:QmXP9yD9
<続きです> div.copyright { display: block; position: absolute; bottom: 0px; left: 0px; right: 0px; background-image: url(images/copyright_2010.png); background-repeat: no-repeat; background-position: right bottom; } 検索しているのですが、どうしてもわかりません。 どなたか、何が悪いか、御指南ください。お願いします。 それから、position="relative"にしておくと、margin-bottomは適用されないのでしょうか?
>>447 cssに
html,body { height: 100%; }
を書いてなさそう?
449 :
446 :2010/01/11(月) 05:20:52 ID:???
>>448 レスありがとうございます!
今急いで追加してみたんですが、変化なしでした。
どこか他におかしい所はないでしょうか?
450 :
446 :2010/01/11(月) 05:32:46 ID:???
HTMLの方はこうなっています。 <div id="content"> <div id="menucontainer"> メニュー </div> <div class="nakami"> テストテスト </div> <div class="copyright"> </div> </div>
452 :
446 :2010/01/12(火) 00:30:03 ID:???
できました! ありがとうございました。
ここはネタスレであって質問スレは別にあるだろボケ
定期的に書いておかないと駄目か ここは質問スレじゃないぞ
455 :
Name_Not_Found :2010/03/19(金) 15:28:56 ID:uF0/sJns
a:link { color: white; } a:visited { color: white; } a:hover { color: red; } いくら指定してもブルーのまま。 試しに<head>内をいろい消しても変わらず・・・ ドキュメント宣言とか文字コードとかも関係アルのかな??
検証もしてないし根拠もないがoutlineとかは?
>>457 outlineはどこも設定してません・・
全てを消して
a:link { color: red; }
未訪問リンク
a:visited { color: red; }
訪問済みリンク
a:hover { color: blue; }
マウスカーソルを乗せたリンク
書いてみたけどマウス載せても色が変わらない・・
a:hover { color: red; } <body link="white" vlink="white" alink="white" > <a href=" ">リンク</a> 結局これで解決・・・なんでできないんだろう。。
>>457 は
>>455 へのレスなんだけど、
クリックしたとき出る枠線ってのはoutline:noneで消せたはず、と思って。
>>456 は
>>455 ではないよな?
CSSだけだされても誰もわからんと思うよ。
だからここはネタスレだと何度
スタイルシート使いたいと思ったけどさっぱりわからんわ、難しいなあ。 HP作成ソフト使っても思うようにいかへん。
ここネタスレ
.entrytext { font-size: 100%; margin: 0; padding: 50; width: 100%; } .entrytext img { margin: 0px; padding: 0px; border: 2px black solid; } 写真は900pxで貼り付けてあるんですが、その下に流し込んでるテキストのみ 例えば幅600pxとかっていう指定はできないでしょうか?
できますん
divタグのdivの由来ってdivision の省略したものでしょうか?
>>467 <div>
それであってる。どっかの本にもdivisionとかいてあった
</div>
471 :
Name_Not_Found :2012/08/10(金) 23:23:21.71 ID:WDR6FW17
MouseOverはhoverでできるけど、MouseLeaveって指定できないの? 具体的にはposition: relative; でずらしたテキストをマウスが離れるときにゆっくり元の位置に戻したい。
下のようにして、ロゴの下に、ナビを5つ並べたいのですが、 widthでサイズ指定してるのに関わらず、logoの画像が少し右に飛び出してしまい、 また、naviの画像が4つまでしか横並びにならず、最後の一つが二列目にまわってしまいます・・・ どこがいけないのか教えていただけないでしょうか。お願いします。 html <div id="header"> <div class="logo"> <a href="index.html"><img src="img/logo.jpg" width="800" height="67"></a> <!-- end .logo --></div> <div class="navi"> <ul> <li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li> <li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li> <li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li> <li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li> <li><a href="#"><img src="#" alt="#" width="160" height="32" /></a></li> </ul> <!--navi end--></div> <!-- end .header --></div>
css #page #wrapper #header { width: 800px; float: left; height: 100%; } #page #wrapper #header .navi { width: 800px; float: left; height: 100%; } #page #wrapper #header .navi ul li { float: left; width: 160px; height: 100%; }
474 :
472 :2012/08/27(月) 23:53:43.69 ID:???
すみません解決しました。
創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね 創価死ね
keyframes を途中で停めた状態から transition に移行することは可能でしょうか? 具体的には #content { animation: move 10s linear 5; transition: transform 5s linear; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } #content.move { transform: translateX(300px); } #content は keyframes move で 100px へ移動中 javascript で任意のタイミングで animation プロパティを削除、move クラスセレクタを #content に設定 希望する動きはそれまでの keyframes で移動した位置から transition の目標値まで移動してくれることなんですが、 animation プロパティを削除すると #contents は to または from の位置に飛んでしまいます。 任意のタイミングで keyframes の移動位置を取得する方法はありませんでしょうか?
477 :
Name_Not_Found :2012/10/17(水) 21:57:00.46 ID:YdN4x0Qd
印刷時に重要な部分以外の諸々のパーツを全て非表示にするために、header内にmedia="print"として 印刷用のCSS(print.css)を用意しました。しかし、これを使って印刷すると、IEでもchromeでも全く同じように謎の余白ができてしまいます。 試しに通常のスタイルシート(usual.css)の代わりにprint.cssを印刷時以外にも適用するようにしてみたところ この謎の余白は出てきませんでした。印刷して出てきません。 全く同じスタイルシートが適用されているはずなのに、media="print"を介して適用された時だけ謎の余白ができます。 ずいぶんはまってしまっているので、この原因がわかる方がいればご教授お願いします。m(_ _)m
478 :
Name_Not_Found :2012/10/23(火) 15:08:17.43 ID:813/Owme
macのsafariで見た画面を見れるようなサイトってありますか? input[type=search]要素のレンダリングがmac/safariでは独特ということで CSSのレイアウトも無視されるとききました。 mac/safari独自のレンダリングを回避して自前のCSSを適用する方法は公開されていますが その方法で対処の上、ちゃんと思う画面になっているか確認したいところです。 iPhoneのsafariでは効いてるようだったんですが、不安なので。
<div id="renban1">〜〜〜</div> <div id="renban2">〜〜〜</div> <div id="renban3">〜〜〜</div> … みたいなHTMLソースにて、CSSでこの連番IDのフォントサイズを小さくしたいんですが div#renban%d { font-size: 12px; } ↑これは通用しませんが、イメージとしてこんなことがしたいです。 div全体のフォントサイズを変えると、変えたくないとこまで変わっちゃいます。 こんな風に連番のついたIDの、連番を無視して全てに適用させるやり方ってないですか? もしくは、これら連番のついたIDを一括で"renban"にしちゃうことって可能ですか? このidは自動生成されてて数が多いので1つ1つ変えるのは面倒です。 id="renban"ってなってくれるなら一応解決はするので。。
左に設置したメニューバーを画面のスクロールに合わせてついてくるように設定をしようと思い、 position:fixedを試してみたのですが、メニューバーの上にヘッダーがあるため、 ヘッダーの高さの分だけ空白のまま、画面についていく感じになってしまいます。 メニューバーのてっぺんが画面一番上に来た以降、それに合わせてスクロールされるという風にしたいのですが、 どうすればよいのでしょうか? よろしくお願いします。
iOS上でcss3のアニメーション処理をする際、 width/height値をGPUアクセラレータで動かす方法って無いですか? scaleだと座標情報保持しちゃって複数要素の同時変化に事足りないので、 何か手段があれば嬉しいのですけど
ライブドアブログを始めてんですが、CSSのどの部分を弄れば行間を変えれますか?
web制作初心者です。質問させてください。 wordpressでサイト作っていてまだCSSをちゃんと習得できてないので、 値とか少し変えた後すぐにブラウザで読み込んでいちいち確認しています。 大量に書いた後に確認してデザインが想定していたものでなかった場合、 どこが間違いか確認するのが凄い時間がかかってしまうからです。 このやりかたは非効率ですかね? 間違ってますか?
中央にtableタブで表を(幅は可変)。その右にYahoo!の週間天気予報widget(
http://n-de.jp/bp_wn.html )を配置。
こんなレイアウトをブラウザの横幅を変えても維持されるようにスタイルシートで作成したいと思っています。
どういう方法を使うのが一般的でしょうか?
tableタブの幅が可変だとややこしいようであれば固定幅にすることも可能です。
タブだな
<div class="btn-group"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Action<span class="caret"></span> </a><ul class="dropdown-menu"> <li><a href="#">アクション</a></li> <li><a href="#">別アクション</a></li> </ul></div> html + bootstrapの勉強してるんだけど、何でボタンクリックしてもリスト出てこないんですか? chromeのF12機能を使って、コピペしたんですが... すいませんがスレチだったら、誘導しください