/* CSS・スタイルシート質問スレッド【33】 */
乙
質問です。
スタイルシートを用いて、テーブルセル内で画像と文字を重ねて表示をしたいのですが
画像自体にフィルタを掛けたいので、background-image は使えません。
テーブル枠内で画像を表示したいので絶対位置指定を使うわけにもいきません。
実現の仕方がわかる方はいませんでしょうか?
━━━━╋━━━━━━━━━━━╋ 太線━ :テーブル
. ┃ ┌───────┐┃ 細線枠内 :画像
. ┃ │ [ 文字列 ] │┃ ←こうしたい。
. ┃ └───────┘┃
━━━━╋━━━━━━━━━━━╋
. ┃ ┌───────┐┃
. ┃ │ .│┃ ←こうなってしまう。
. ┃ └───────┘┃
. ┃ [ 文字列 ] ┃
━━━━╋━━━━━━━━━━━╋
background-imageにフィルタかからないの?知らんけど
つーかフィルタ使う時点でうんぬんあーだこーだ
>>11 相対位置指定かmarginでマイナス値を使ったら?
いやそれよりテーブル・レイアウトにしてる時点で、云々
親要素にposition:relative; left:0; top:0;として
絶対位置指定の座標原点をセル内にしてやればよいだけでは。
>>12 無理だと思います。
ちなみにローカルで閲覧するためだけに使うので、まぁその辺は気にしないでください。
>>14 試行錯誤した結果、以下のような感じでほぼ理想とする形になったみたいです。
ありがとうございました。
<TD nowrap align=right STYLE="position:relative; right:0; top:0;">
<img src="イメージ" STYLE=" z-index: 1; position:relative ; right:0px ; filter:ごにょごにょ ;">
<DIV STYLE=" z-index: 2; font-size:16px; position:absolute ; top:13px ; right:0px ; float:right ;"></DIV>
</TD>
>>12 かかります。
ただしその上の文字にもフィルターがかかるのでオススメはしない。
文字は濃いままで、としたい場合は画像そのものを加工してから背景に使うか、
>>14の言うように画像と文字を重ねるか、透過iframeを使うか。
すいません、質問します。
tableのcellspacing="○○" bgcolor="#○○" Width="○○"
をCSSで指定することはできますか?
前スレの1000はCSSスレ的にダメダメだな
24 :
Name_Not_Found:04/07/17 18:22 ID:KQhNdyTb
<h1>test</h1>
<ul>
<li>item1</li>
<li class="nazo"><ul>
<li>item1-1<span class="date">07/16</span></li>
<li>item1-2<span class="date">07/17</span></li>
</ul></li>
</ul>
-----
ul{margin:0;padding:0;list-style-typ:none;}
li{margin:0;padding:0;}
-----
というソースなんですが、何故かIEだけ、li.nazoの下のulの部分に
marginが現れるのです。上下に余白が出来ます。しかも
ul.nazoにborderを付けるとその謎の余白が消えるのです。mozillaなどでは起こりませんが
何故こうなるのでしょうか?win2kでIEのバージョンは6です。
25 :
24:04/07/17 18:23 ID:???
>ul.nazoにborderを付けると
li.nazoにborderを付けると、でした。
26 :
Name_Not_Found:04/07/17 18:31 ID:m16CfSls
floatさせたボックス内でdisplay:inline;とやっても出来ないんですが、何故でしょう?
>>27 リンク先に書いてあった通りwidthを指定してみたら直りました。
本当に助かりました、ありがとうございました!
あるホームページを参照していたんですが、cssファイルの中の
span.note
{
color:#999;
}
の”note”はどういう意味を持つ物でしょうか。
後ろの”color”から色を指定しているということは分かるんですが、
htmlファイルには<span id=note.....>は見つかりませんでした。
また、上の一文を消して、消してない方と見比べてみても色が変わった
ような所は見当たりませんでした。
どうかよろしくお願いします。
参照しているモノがないだけじゃないかな
span.note なら span class="note" でしょ。
外部cssファイルなんて複数のページから参照されるのが
普通なんだから他のページにあるんじゃないの?
32 :
29:04/07/17 20:24 ID:???
>>30 と、いうことは作者の都合で削られたものが、
cssファイルには残っていた、ということでしょうか。
>>31 それが1ページだけなんです。上に有るリンクから
アンカーでどんどん下に引っ張っていくタイプです。
>>32 >上に有るリンクからアンカーでどんどん下に引っ張っていくタイプ
すまんがハゲにも分かるように説明してくれ・・。
<STYLE TYPE="text/css">
<!--
BODY{
margin: 0px;
text-align: center;}
DIV{
background-color: #色;
width: 100%;
height: 100px;
border: none;}
-->
</STYLE>
<div>文字</div>
マージンで余白を0にして上にビシっとくっついたんですが、
そのあと<div style="width :10%; float : left">文字</div>
など段落入れるとその段落の色まで染まってしまいます('A`)。
どうしたらいいんでしょうか(´・ω・`)b
釣り?
>>35 質問する前に一呼吸おいて良くソース見れ。
夏だねぇ
div厨は一回div無しで全部書き直してみなさい
夏の間回答休むわ。じゃっ。ノシ
41 :
41:04/07/18 18:22 ID:5jJNej1l
style="border-bottom :thin dashed"
をspan要素に入れると通常に細い下線が入る。
だが、これに改行して文字を入力すると下線が太くなる。
だれか対処法をおしえてくれ〜
>>41 改行っていうのはソースの改行?それとも<BR>?
うちではどっちにしても細い下線(破線)のままですけど。
ブラウザの問題じゃないですかね。
「CSS質問スレ@画像アップロード」とかホスィ( ゚д゚)
でも一理ある
意外と適当な要素がある場合が多い
<div class="section">は許す
現在フレームを利用したサイトを運営しているのですが、
フレームを外したいと思っています。
で、現在 日←こんな感じに分割して、下半分で案内その他をやっているのですが、
これと同じものをCSSでやりたいと思っています。
下半分を<div id="navi"></div>でくくって、.naviをposition:fixedで画面の一番下に固定したのですが、
どうしてもIEでうまく効いてくれません。Firefoxでは思ったとおりに固定されました。
IEの解釈が変なんでしょうか? それともfixedの使い方が間違ってたんでしょうか?
よろしくお願いします。
>>49 こんなのは?
<head>
<style type="text/css">
<!--
* {
margin: 0px;padding: 0px;
}
.ue {
width: 100%;overflow: auto;height: 90%;
}
.sita {
height: 10%;width: 100%;position: fixed;_position: absolute;bottom: 0px;background: #FFFF00;
}
-->
</style>
</head>
<body>
<div class="ue">
ここが上部
</div>
<div class="sita">
ここが下部
</div>
</body>
>>50-52 ありがとうございました。うまくいきました。
overflowを用いた擬似フレームのページは見ていたんですが、
iframe的な使い方しか思いつきませんでした。感謝です。
a { text-decoration:none; }
a:hover { text-decoration:underline; }
で、リンクにオンマウスになったら下線がつくけど、
その下線の色を変えるにはどうすればいいですか?
>>54 a:hover { text-decoration:underline; color:#ff0000;}
とか?(藁
>>57 それだと、元の文字も赤くなる。保守sage
>>54 A { text-decoration:none;}
A:hover {border-bottom:solid 1 #000000}
1 = 線の太さ
#000000 = 色
61 :
54:04/07/19 17:26 ID:???
>>51 標準モードのみか
IEってやっぱり(ry
IE6でユーザースタイルシートを使ってましたが、
bodyの背景色だけが無視されるようになりました。
body { background-color: #D2D2D2; }
こういった記述なんですが、どこか問題があるでしょうか?
body { background-color: #D2D2D2 !important; }
でどうよ。>63
65 :
Name_Not_Found:04/07/19 23:21 ID:i2eXO2j/
スタイルシートを使ってtableを移動させたいんですが、
marginを使っても効きません。!importantも付けてみましたが、
やっぱり効きませんでした。
table {
font-size:100%;
margin:1em 1em 1em 3em;
}
こんな感じなんですが、何故でしょうか?
>64
!importantをつけて、「Webページで指定された色を使用しない」の
チェックをはずすと、背景の色は変更できました。
でも、他の記述と合わせるとうまくいかなかったりするので、
もう少し調べてみます。
ありがとうございました。
どうしてスタイルシートのリファレンス本の使用例で使われるサンプルはデザインがださいんですか?
シンプルな方が例として解り易いから
>>69 スタイル効果を解説するための技術的な使用例であって、
ユーザを魅了させるようなデザインである必要がないから。
>>69 colorプロパティだけでダサくないデザインを作ってみなさい
なんか久しぶりに見にきたら、ほんとバカの集まりだなここは
質問者がバカというより、回答者がバカっぽい
学生が多いんだろうな
最近は引きこもりの子供が増えてるっていうからな
77 :
73:04/07/20 18:26 ID:???
楽しいか?
嵐はスルーでいきましょう
質問です
<html>
<head>
<title>なんとか</title>
</head>
<body>
<del><p>ほげほげ</p></del>
</body>
</html>
81 :
Name_Not_Found:04/07/20 18:45 ID:XceWirGx
やべ。。。途中で送信してしまった
>>80のように書くと
IEやFirefoxでは「ほげほげ」に取り消し線が引かれますが、
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>なんとか</title>
</head>
<body>
<del><p>ほげほげ</p></del>
</body>
</html>
とすると(つまり標準モード)、Firefox0.9.1では取り消し線が引かれないんですよ。(IE6.0では引かれる)
これって仕様なんですかね。それともバグですか?バグ辞典見てもなかったもので
>これって仕様なんですかね。それともバグですか?バグ辞典見てもなかったもので]
バグ辞典を見てください。
>>81 <p><del>ほげほげ</del></p>
にしてはダメなんですか?
85 :
Name_Not_Found:04/07/20 19:35 ID:MegHdYa8
<Style Type="text/css">
<!--
body{
font-size: 10pt;
line-height: 140%;
color: #000000;
background-color: #f9f9f9; }
-->
</Style>
WinXP+IEだと問題ないのですが、
NN7.1だと設定が反映されません。どこかおかしいでしょうか。
>>83 OKですが、段落ごと削除したい場合は
>>80じゃないとダメです。
>>84 それは読んでいたのですが、やはり関係ありましたか。
標準モードの時だけ表示されなかったので、
何か仕様と関係があるのかと思ってました
>>85 どの指定が反映しないの? 全部?
あと、font-sizeをpt単位で絶対指定して固定するのは、感心しない。
>font-sizeをpt単位で絶対指定して固定するのは、感心しない
それは大きなお世話
親切からの忠告を聞き入れないのは、感心しない。
荒れないうちに次の質問どうぞ。
overflow-x:hiddenで横方向へのスクロールをロックしようとしたら
一つのあるファイルはできたのですが、もう一つのファイルでは
何故か縦方向まで一緒にロックされてしまいました。
CSSの部分のソースは全く一緒で、確認したブラウザも一緒です。
何が原因かわかりますでしょうか。
千里眼ではないので、ソースも出さないで原因を見極めろってのはむつかしいナ。
93 :
85:04/07/20 20:52 ID:???
>>87 すいません自己解決しました。
<Style Type="text/css">
<!--
-->
</Style>
の部分まで外部スタイルシートに書いちゃってました。
>あと、font-sizeをpt単位で絶対指定して固定するのは、感心しない。
勉強してきます。
>>91 overflow-xはIEだけの独自拡張プロパティだってわかってるのかなぁ。
CSSの部分はこうしてます。
<style media="screen" type="text/css">
<!--
.font_main { color: #464646; font-size: 90%; line-height: 135% }
.font_h { font-weight: bold; margin-bottom: 5px }
table { margin-top: 8px; margin-bottom: 8px }
body { margin-left: 30px;
background-repeat:no-repeat; background-position:0% 100%; background-attachment:fixed;
overflow-x:hidden; }
-->
</style>
Bodyの中身はとりあえず画面いっぱい以上のテーブルを置いてみましたが結果は一緒でした。
縦も横もスクロールロックされてしまいます。確認ブラウザはIE5です。
>>91 それは知りませんでした。
でもIEで見てるんですよね・・・。
とりあえずこれ以外の方法で横スクロールをロックする方法が
ありましたらそれでやろうと思うんですが。
>>95 WinIE6互換モードで試したら、そんなことはなかった。指定通り、横スクロール不可になった。
標準モードだと、bodyに指定しても効かない。htmlに指定しなくては。
98 :
Name_Not_Found:04/07/20 23:12 ID:LzVNYQze
突然質問すいません。
外部CSSで背景画像をbodyで設定しているのですが
どうしても表示されません。
IE6.0.2800
body{
background:url(画像パス);
}
これも試しました
body {
background-image:url(画像パス)
2時間格闘してます;;
100 :
Name_Not_Found:04/07/20 23:19 ID:ITfxq/eZ
>>98 画像パスが違う、画像が無い、外部ファイルを参照できていない
>>98 とりあえず外部じゃないスタイルシートからその画像は読めるのかい?
外部ファイルはHTMLと同じディレクトリにあるのかい?パスはCSSファイルのあるディレクトリからのパスだよ。
まあ、気長にいこうや
Webサイト製作初心者質問スレから誘導されてまいりました。
よろしくお願いします。
環境はWin2K,IE6です。
<input type="text" disabled name="hoge" value="hogehoge" style="color:red">
上記のようにdisabled属性にした場合に
フォントの色がグレーで固定になってしまうのですが
この場合にフォントの色を指定する方法はありますでしょうか?
上のタグ内でdisabledを解除した場合は指定どおり赤になってくれるのですが・・・
>>102 属性:Disabled
属性値:なし [CI]
必要性:省略可
説明:
選択項目の使用と選択を全て禁止します。 当属性が指定されているときは、ブラウザは一般的に グレー表示になるようです。属性値はありません。
105 :
102:04/07/21 15:21 ID:???
>>103 そうなんですか、残念ですが諦めます。
ありがとうございました。
106 :
102:04/07/21 15:23 ID:???
>>104 他のページ(ポップアップさせた画面)から
そのテキストボックスの中身だけを入れ替えたいのですが
ユーザによる手入力の変更はさせたくないんです。
なんでJavaScriptで可変的に扱うラベルのような扱いで使いたいと思いまして・・・
WinXP SP2 からポップアップが抑制できるのは知っているよな?
他の方法考えれ。
あと、せっかくネットを使っているんだから、検索しろ。
>>103も一発で出たぞ。
>>102 <input type="text" name="hoge" value="hogehoge" style="color:red" onfocus="blur();">
110 :
102:04/07/21 16:02 ID:???
>>108の方法で出来ました。ありがとうございます。
複数の方が教えてくださったのか、わからないので一括で申し訳ありませんが
レス下さった皆様、本当にありがとうございました。
>>107 ネットではとほほ等のサイトやGoogleでいろいろ検索したつもりだったのですが
調べ方が甘かったみたいです。申し訳ありません。
がんがれよ。
ググルは・……
スタイルシートの3つの数字方式のカラー指定を#******みたいな16進法方式のカラー指定に変換するにはどうすればいいですか?
>>113 #f00 → #ff0000
#369 → #336699
のようにすれば良いだけ。
それとも自動で変換したいということ?
115 :
113:04/07/22 11:25 ID:???
>>114 有難うございます!!それが私が知りたかった事の全てです。。
スタイルシート以前の問題だったのかもしれませんが、本当にどうも!!
そんなことも知らなかったのかよ… orz
>>116 そう言ってやるなよ。俺もそう思ったがな。
□ (本文)
↑
list-style-imageで指定した画像
この指定した画像と本文が平行に並ぶようにしたいのですが、
どうすればいいのでしょうか。というか可能でしょうか。
borderについて質問です。
現在外部ファイルに
.1 {border-top: 1px solid #000;}
.2 {border-left: 1px solid #000;}
.3 {border-right: 1px solid #000;}
.4 {border-bottom: 1px solid #000;}
と記述した上で、目的の部分の上部にborderが欲しければclass="1"と書いて
右に欲しければ"3"、上と下に欲しければ"1 4"などとしています。
自分の環境のWIN98SE/IE6の互換モードでならこれで思った通りに表示されるのですが、
ドキュメントタイプをstrictに変更したり、NN7で見てみるとborderが表示されません。
自分なりに色々と記述を変えてみても表示されないまま、検索しても表示されない理由がわかりません。
どなたかお願いいたします。
クラス名が数字だから
>>118 line-heightとbaselineの問題かな。
>>121 118じゃないが、テキストよりも大きい画像で試してみたが平行にはならなかった。
リストマーカー周りにはバグが結構あるからダメかもしれない。
テキストと画像が交わるの?
126 :
119:04/07/22 17:41 ID:???
>>120-121 ありがとうございました。
クラス名だったんですね。後のborder部分のみ気にしてました。
名前を正しく変更したら、今までの悩みはなんだったのかってぐらいに
あっさりとしっかりと表示されました。質問してよかったです。
本当にありがとうございました。
>>124 それでは画像の中心点とテキストの中心点の高さが同じにならないよ。
試してから言ってる?
>>127 リスト画像と箇条書き本文の底辺は平行になる。
中心点なら、vertical-align:middle;か。
>>124 li {vertical-align:middle;}じゃないのか?
>>128-129 いや、それでもダメ。
ネスケ7.1、オペラ7.23、IE6のどれで見てもダメ。
display:inline;でインライン要素にしたものに
padding
margin
border
width
を指定するのはvalidではありませんか?paddingくらいはokだとうれしいのですが
>>130 画像の高さに合せてline-height値も調節しませう。
>>131 指定してもいいが、インライン要素に適用できないものは効かないよ。
134 :
131:04/07/22 18:05 ID:???
>>133 IE6とn7で確認してるので、間違った書き方でも適用されていて勘違いしちゃいそうだったので、
ここで聞けばインライン要素に使っていいプロパティかはっきりするなと思いました。
よかったらどれが、インラインに使うべきものではないものなのか教えてください。
>>131 padding→わからん
margin→わからん
border→わからん
width→多分バツ
答えた意味ないかもorz
>>132 line-heightを入れたところオペラのみちゃんと中心に表示されました。
でもIE、ネスケはダメだった。
>>138 既に行ってました。
でもブラウザのバージョンアップ待ち以外の解決法は?
>>134 padding→ok
margin→ok
border→ok
width→非置換インライン要素では×、置換インラインならok
俺って親切ぅ!
CSSのクラス名の付け方で質問ですが
私の場合は、文字に赤を使う場合
.font-red 又は .font-red-body
のようにしています。しかし、上記が後から編集しやすいクラス名の
付け方かどうか疑問に感じています。もしかしたら
./font-ff0000とかにしないといけないのかもしれないし。
各ブラウザに依存せずに、他の人が見てもわかりやすく
編集しやすいクラス名の付け方を教えていただけないでしょうか?
.font-red だろうが .font-ff0000 だろうがダメ。
だってソレ赤以外にしたいときクラス名変えなきゃだめでしょ?
言い古されてるけど、なんでその部分を赤くしたいのか。
強調の類なら em とか strong で事足りるし、それに更にクラス名振りたいなら
em.passion とか em.angry とか適当に、その em の意味合いでも付けとくといいんでない。
もし、強調だけどサイトのデザイン変更にあわせて青の太字にしたい
となってもこれなら問題ないでしょ
-----
というか、ぶっちゃけクラス名云々なんて自分が管理しやすいように出来ればいい
んであって、他の人とかましてやブラウザ依存とか関係なくね?
なんか勘違いなこといってたらすまん
145 :
141:04/07/22 19:44 ID:???
>>142 ありがとうございます。見てみます。
>>143 う〜ん、それなのですが、おっしゃっている意味が
いまいち、正解なのかどうか。。
というのも私が他者が作成したファイルのCSSは
em.*****というおっしゃる形式になっているのですが
そもそも”passion”ていうのが修正する側としてはわかりにくて。。
かといって、私のfont-redとするとおっしゃるように変更は利かないし
font01とかにしたらそのフォントが何の色か何を示すのかわからないし。。
こういうCSSのクラス名の効率化がいまいち、うまく出来ないんですよね。。
146 :
141:04/07/22 19:51 ID:???
連投すみません。。
>>142を読み進めると、なんとなく
>>143さんの言う事が
理解できたかも・・。
要はCSSで設定された見た目を重視するのではなく
”どういう目的で”そのCSSを使うのかを重視すると言うことですか。
だから、文字を赤くして目立たせようと思った場合
文字の色は関係なくて、”目立たせる”という事に視点をおけばいいと。
なるほど。なんとな〜く、わかるのですが、まだ正確に理解している
わけではないので、勉強します。ありがとうございました。
147 :
118:04/07/22 20:02 ID:???
>>139 行ったなら、ブラウザ別に報告して下さいませんか。
>>141 一番簡単なのはブロック毎にdivで括りidを振って、後はセレクタでやる。
そうすればクラス名はほとんど必要なくなる。
とりあえずお前はもっとHTML,CSSの基本を勉強してこい。テンプレサイトを全て熟読してから質問しろ。
外部ファイルでCSSを作ったのですが
HTMLに反映されないのですが、なにか変な所があるのでしょうか。
*cssの方はちゃんとcss形式で保存してあります。
*HTMLのほうはHEADの部分に
<link rel="stylesheet" href="****(ファイル名).css" type="text/css" />
でリンクを張っています。
直接HTMLでスタイルシートを設定すると反映されるので、
何かリンクの方がおかしいのだと思います。
リンクのパスは合っているのですが、何処かおかしい所があるでしょうか?
もし分かった方がいて、ヒントなり教えていただければ嬉しいです。
初歩的な質問で、
自分で調べれば分かるようなことであればスルーしてください。
>>150 ブラウザは何よ?
あり得る原因としては、外部シートとHTML文書の文字コードが異なるとか。
>141
> .font-red 又は .font-red-body
class属性の属性値に-って使えたっけ?
たいがい全角
IEの最新版です。ネスケでも表示されませんでした。
>あり得る原因としては、外部シートとHTML文書の文字コードが異なるとか。
これは大丈夫そうです。
どうやら方法は間違ってないんですね。
自分のやり方が間違っている可能性が高そうなので
何かおかしい所がないかもう一度念入りにチェックしてみます。
どうもありがとうございました!
>>118 すっごい亀レスで申し訳ないが、
画像の上とかに空白部分を作ってすりあわせしているのは漏れだけ?
外部スタイルシートというのを使いたいのですが
どこからダウンロードできますか?
僕の肛門はよく詰まります
僕の肛門はよく締まります。
ウホッ
やらないか
>>154 CSSファイルのなかみがなぜかHTMLだったりしない?
>>154 どうせお前は馬鹿だから外部ファイルなのに
<style>タグとか使ってるんだろ?なあ?おい!ボケ!返事しろや!どうなんじゃ!
違うならとりあえず、外部ファイルに
body{background-color:#000;}
だけ書いて試してごらん。後環境は?ちゃんとうpしてあるのか?
俺って親切だろ?早くしろやボケ!
>>165 オマイはいつもそうやって遅れてくるのか?
可哀想な奴だ。
168 :
Name_Not_Found:04/07/23 23:53 ID:tPxOnGm2
質問させてください。
<table cellpadding="0" cellspacing="0" border="0" align="center">
↑のcellpadding="0" cellspacing="0" border="0" align="center"に当たるスタイルシートの記述を教えてください。
<table class="xxx">という形で↑を全てまとめたいのですが。
よろしくお願いします。
170 :
168:04/07/24 01:31 ID:???
>>169 ありがとうございます。
すみません…。見落としてました…。
cellspacingに相当するborder-collapse:separate;border-spacing:数値は
ネスケではきちんと対応してるみたいですが、IEでは表現できないみたいですね…。
171 :
Name_Not_Found:04/07/24 12:56 ID:eLKJJLu+
body { width: 800px;text-align: left}
とした状態で背景画像を幅800px内の中央に表示するにはどうしたらよろしいでしょうか?
body {background-attachment: center;}としてもブラウザの中央になってしまいます。
また、背景画像がCGIにより生成されるものでサイズは不確定なため、px指定もできないんです。
173 :
Name_Not_Found:04/07/24 14:26 ID:Frdc0o4W
ページ全体に渡って、半角文字の場合は自動的にMS Gothicフォント。
全角文字の場合は自動的にMS P Gothicフォントにしたんですが、cssで設定できませんか?
174 :
Name_Not_Found:04/07/24 14:49 ID:eLKJJLu+
>>174 background プロパティも色々
>>174 見てないだろ。
見ていればプロパティを勘違いしてることに気がつくはずだ。
>>175-176 body{width:800px;text-align:left;
background-image: url("./aaaa.cgi");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;}
↑だとダメでした。
body{width:800px;text-align:left;}
#aaa{
background-image: url("./aaaa.cgi");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;}
<body><span id="aaa"></span></body>とかもやってみましたが、今度はfixedが効かないです。
>>177 ダメって何がダメなの?別に変なところはないけど。
179 :
173:04/07/24 17:01 ID:Frdc0o4W
放置プレイは慣れておりまする・・・
>>179 ごめんね。
結論言うと(自動的には)出来ません
以上
div要素にalgin:centerを記入して(<div algin="center">)、
CSSでwidth:640px指定したら、中央に表示されなくなったんだけど。
なんで?
184 :
182:04/07/24 21:33 ID:???
>>183 駄目なの?
>>5のサイトではtransitionalで記述するならdiv要素のalign属性でcenterを指定しても、
文法的には問題無いって書いてあったけど。
185 :
Name_Not_Found:04/07/24 21:36 ID:XU4UdUam
<div style="border:1px">
<img style="float:left;">
<h style="margin-left:210px">
<ul style="margin-left:210px">
画像が200×100px。divの下borderがulの高さで引かれるんだよね(モジラ)。
divにheightつけると文字サイズ変えられた時むごいことになるから
やむなくbrでクリア・・・すると余分なスペースが生じるから
結局は空divでクリア。
モジラの解釈が正しいということになっているが、どう考えても
上の例でdivがimgを内包しないのはおかしくないか。
divでimg挟んでいる以上、borderは画像も挟むべき。
現在のワケワカラン実装はだれも望んでいないと思う。
「俺は○○だと思うんだけど、お前はどう思う?」
「んー、よくわかんないけどお前の言ってることが正しいんじゃない?」
2/2=100%、よって誰も望んでいない、って論理だろ。
2/2じゃなく3/3とかかも知れないけど。
>>185 それは俺も思った。strict+cssでやってるけど、初めのころはそれがうざかった。
>>186-188 あれってなんであーいう仕様になってるの?なんか必要性があってのことだよね?
便利なことがあるのか?
floatの仕様にケチ付けてる様でその実divのborder-bottomがfloatさせたimgの下に来て欲しいんでしょ?
divにmin-heightでも使っとけ
>>190 何の利点があってあの仕様なのかを問われてる
ムカついて仕様に文句言ってるようにしか見えん
俺も自分の思うように行かない時にあったよ「なんでこんな糞仕様なんだよゴルァ〜」ってw
利点以前に、あの仕様がCSSのfloatってものなんだよね
あえて利点と言って挙げるなら後続要素がフロートしてる要素の横に流し込まれるとこでしょ
いやまさにfloatの仕様そのものだけどさ
逆に
>>185の望んでることの利点はなんだよ
>後続要素がフロートしてる要素の横に流し込まれるとこ
それだったら、divを親要素にして囲う必要はないわけだが。
下手な解説はいいから、次いってみよう。
cellspacing="1" cellpadding="2" はCSSではどう書けば?
199 :
↑:04/07/25 13:40 ID:???
粘着
さぁ次の質問どうぞ
>>192-193 >上の例でdivがimgを内包しないのはおかしくないか。
>divでimg挟んでいる以上、borderは画像も挟むべき。
何が問われてるかもわからずに、発言するのはヤメレ
オマイ、アホだろ?
はい、仕様です。
※ 議論はよそで ※
はい、このスレッドの仕様ですね。
cellspacing,cellpadding なんて非推奨でもなんでも無いんだからそのまま使えばいいじゃん
>>208 divのborder-bottomは後続要素じゃなくて親要素になる。
親要素にまでfloat利かせる利点は何なんだろうか?と思うけどみんなは思わないの?
>>209 >divのborder-bottomは後続要素じゃなくて親要素になる。
語弊があるので訂正。
親要素のborder。floatが親要素に影響を与える仕様なのは何故なのかってことで。
>>210 >フロートしたボックスは他のブロックの形状に直接的には影響を与えない
>と言う原則に従うとそうなると言うだけの事であって
?なぜその原則が、子要素に指定したfloatが親要素に影響を与えるってことになるの?
>>212 「親要素に影響を与える」と言う表現が何を差すのかが不明。
具体的なコードなり図なりを出せる?
>>213 <div style="border:1px solid #000; width:500px ;">
<img width=300 height=300 style="float:left;">
<p style="width:200px ; float:left;">あいうえお</p>
</div>
これをレンダリングしたときに、divのborder-bottomにまでimgに指定したfloat:leftが
影響して、border-bottomの位置がimgの下ではなくて、pの下=imgの途中になるってこと。
今のとここのレンダリングが仕様通りの正しいものと言われてるみたい。
>>213 ところで何の話だと思って答えてたの?
>>215 floatしなければちゃんとimgの大きさに合わせてdivの大きさが変わるけど、
floatするとimg要素が大きくなってもdivの大きさが変わらない。
影響を与えてると言えるよ。
>>216 「影響を与える」からそうなるんじゃなくて、「影響を与えない」からそうなるんだよ。
>>217 <br style="clear:both">を</div>の直前に入れるとimgの大きさがちゃんと反映されるのに
影響を与えてないの?
divのborder-bottomまでimgに回り込んでると思うんだけど、それは違うってことかな?
>>219 それはimgの高さが反映されたのではない。
divの子要素であるbrの高さが反映されたのだ。
floatされた子要素は無視され、存在しない如く親要素の高さが計算される。
>>219 あのね、
>>214のソースでdiv {padding-top:400px;}とでも指定すればわかるよ。
ええと、返事書いているうちに他の人が説明してくれたので省くけど、
>>214 そのコード、間違っていないか?
実際にFirefoxにレンダリングさせるとimgもpもfloatさせているから
divの高さはゼロになるが。
一応理解できた。ボックスの高さの計算方法のせいなのね。
214のソース激しく間違ってた。
今の俺にはまだわからないけど、浮動要素を高さの計算に入れないのはやっぱりそれなりの理由があるのかな?
div:after
{
display: block;
content: "";
height: 0;
clear: left;
}
brは嫌だと言う人に。
>>226 height: 0;は必要ないな。
IE以外では空のブロックは通常高さ0。
IEは:afterなんて理解しないので関係ないし。
質問者が引いてるのもかまわず、オナニーかい? >ALL
>>224 floatプロパティは<p>が段落の区切りを表すタグだった頃の
Netscapeの拡張した<img align="〜">を再現するのが目的だった訳で、
CSSのボックスモデルの中でNetscapeの挙動を再現しようとしたら
必然的にそう言うルールになったんだろう。
230 :
↑:04/07/25 20:42 ID:???
大アホ
あれぇ?
ふふふ…
へへへ・・・
>通常フローにある子供要素のみを考える(つまり、浮動ボックスや絶対配置のボックスは無視して
そういうデザインはレアなケースと思うがな。
結局みんなクリアしてるわけでしょ。
マジョリティーの体感にあえて反抗して
妙な仕様に小理屈をつけて強弁するから
W3Cはヲタ集団と呼ばれる。
ハゲワラ
236 :
Name_Not_Found:04/07/25 22:57 ID:Y46P+zJJ
もういいよ
IE以外のブラウザが存在する事も知らない人の集うスレはここですか(wwwww核爆)
IE以外の糞ブラウザを使っている人が煽るスレッドは、ここですか(超新星爆発)
中学校はもう夏休みですか?
仕 様 を 疑 う な
<Div Align="center"> を外部にしたいのですが、どうすればいいですか?
?
外部で、指定したいのです。
あ、もういいです
249 :
Name_Not_Found:04/07/26 09:38 ID:fK/rvrZ6
marginプロパティはインライン要素にも適用できるはずだけど、
display:inline;にすると上下マージンは無効になるんですか。
h1 {
display:inline;
border: 0.5em solid #999;
border-width:0 0.3em;
margin:1em 0;
padding:0.2em;
}
<body>
<div>ヘッダ</div>
<h1>見出し</h1>
<div>IE6とNN7で確認。</div>
</body>
_____
| |
| |
| 画像 |文字○○○○○○
| |
| |
 ̄ ̄ ̄ ̄ ̄
_____
| |
| |
| 画像 |
| |
| |文字○○○○○○
 ̄ ̄ ̄ ̄ ̄
↑のように、スタイルシートを使って、例えば画像にfloat:left等を使って画像の横に文字を配置する時、画像の高さの真中や画像の高さの下のラインに合わせて文字を配置したい場合は、どのようにスタイル指定すればよいのでしょうか??
>>251 画像はインライン要素なんだから、floatしなくても文字は横に続くだろ?
img {vertical-align:middle;}
<p><img src="〜.gif" alt="画像">文字○○○○○○</p>
なぜインライン要素の上下マージンが実質無いのかと言えば行の高さに統一性がなくなるから
>>254 まあ理窟はわかるんだけど、そのこと仕様書にもどこか書いてあったっけ?
256 :
251:04/07/26 12:34 ID:???
>>252 <p><img style="vertical-align:middle">文字○○○○○○<br>文字○○○○○○</p>
↑とした場合、文字の途中で改行<br>を入れたいのですが、これで改行を入れてしまうと改行を入れた後の行は、画像の下にきてしまうじゃないですか?これをふせぎたいのが、その際どう指定すればいいのかわからないんです。。
>>256 その改行が段落変更の意味なら、brでなくpを使ってね。
CSSよりマークアップの問題が大きいな。
imgにはheightがあるはずだから、画像の高さの真中に合せるなら
そのheightの半分の値を後続要素のmargin-topに指定すればよいのでは。
258 :
251:04/07/26 12:56 ID:???
>>257 _____
| |
| |
| 画像 |文字○○○○○○
| |○○○○○○
| |
 ̄ ̄ ̄ ̄ ̄
段落変更とかじゃなく、↑のようにしたいんですよ。
極端な話、、、
<table>
<tr>
<td><img></td>
<td valign=middle>文字<br>文字</td>
</tr>
</table>
TABLEレイアウトでは簡単にできるようなことをCSSでやりたいわけで。
>>258 その画像と文字との意味によってマークアップが変ってくるんだけど。
もしそれが画像と文字との列から成る表なら、表としてtableのままでよいわけだし。
或る幅でひとつづきの文字列を折り返したいのなら、
brで強制改行せずwidthでその一連の行の横幅を指定すべき。
別の行にするならpとか、箇条書きならliとか。
テーブルレイアウトはしたくない、でも無意味な改行はしたい、という所で矛盾が発生している事に気付かないと堂々巡り
やや強引だけど、これでできない?
.abc img, .abc p {vertical-align:middle;}
.abc p {display:inline;}
<div class="abc">
<img alt="画像" width="50" height="100" src="xyz">
<p>画像の説明文〜〜〜〜〜〜〜〜〜〜〜〜〜〜</p>
</div>
263 :
251:04/07/26 13:28 ID:???
>>259 widthでその一連の行の横幅を指定すべき…
<そうしたいんですが、その場合、文字列をブロック要素化しないとダメですよね?
するとimgもブロック化してブロック要素を横並びにして配置(float:leftなりtop:--;left:--;で位置指定して横に並べる)するとなったら、そのブロック化した中の文字列を画像の高さの真中に持ってくる指定ってありますかー??
>>262 >'margin-top'又は'margin-bottom'が'auto'である場合
でも
>>249-250の場合は、autoでなくて明示した場合に無効なんでしょ。
>>263 画像のheightの半分の値を後続ブロック要素のpadding-topに指定すればよいのでは。
>>264 いや、display:inlineのボックス高さはline-heightでしかないってことだと思うよ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head><title>inline要素への上下マージンの適用</title>
<style type="text/css">
p {border: 1px solid red;}
span {
border: 1px solid blue;
line-height:3em;
}
</style>
<body>
<p><span>test test test</span></p>
</body></html>
このソースを表示してみるとspanのボーダー外に*marginのようなもの*が実際取られるわけだし。
>'margin-top'又は'margin-bottom'が'auto'である場合,計算値は0とする
と書かれてるけど、marginを行の高さに使うとは書いてない。書いてない以上使わないってことだと思うが
268 :
251:04/07/26 13:56 ID:???
>>265 ちょっと理解出来ないのですが、、
<div>
<img src="xxx.gif" width="200" height="280">
<p>文字○○○○<br>○○○○</p>
<p style="padding-top:140px;">○○○○○○○○○○○○</p>
</div>
ってことですか??これだとぜんぜんできないのですが。。何か指定が抜けてますか??
ちなみにbrで改行する理由は、その文字列が写真のタイトルで、文字の意味合い、見栄え的に、クラが途中で改行をいれて2行にしてほしいといってくるからです。
>>268 あれ、imgにfloat:left;を指定してるのではなかったの?
何ですぐ後続のpではなくその次のpなんかにpadding-topを指定してるの?
しかもpを二つにした割に、相変らずbr使ってるし。
そもそもインライン・スタイルシートにするのは感心しないな。
270 :
251:04/07/26 14:13 ID:???
>>269 あ、意味不明な勘違いしてました。↓ってことですよね??
<div>
<img style="float:left;" src="xxx.gif" width="200" height="280">
<p style="padding-top:140px;">○○○<br>○○○</p>
<p style="clear:both">○○○</p>
</div>
これで一応レイアウトはできました。ありがとーございます。ちなみにbr使うのはいけないんですか??
あと、TABLEのようなレイアウトはやっぱこんな感じに記述していくのがよいのでしょうか??
TABLEはどーもレイアウトには奨励されてないようで。。
>>267 けれども
>ボックスの高さは'line-height'特性によって与えられる。
と明記されてるからOKなんじゃ?
インライン要素の高さは絶対確定する仕様なわけだし
上下marginの取り扱いに関しては書いてないけど
下手な例だけどある人間の性別を決める時(要素の高さを決める時)に状況Aでは(要素がブロックな場合は)アソコの形で判断するけど
また別の状況Bでは(要素がインラインな場合は)外見で判断するってルールがあったとして
状況Bにおいて「アソコの形は見なくていいんですか?」って言ってるようなものなんじゃないかな
>>270は、FAQ、特に
>>6のリンク先を熟読して下さい。
また、既に
>>259も述べた通り、それが表であるなら無理にtableを廃さなくてもよい。
あと、タグの中にstyle属性で書くインライン・スタイルシートではなく
<style>タグか、できれば外部スタイルシートにしようね。
検証用は別にインラインスタイルシートでかまわんだろう。
本気で全部インラインでやろうとしたらどのみちすぐ詰まるし。
>>271 >下手な例だけど
その例では外見による判断とアソコの形による判断とが、一致する場合と矛盾する場合とがあるね。
それに前者の判断は後者の判断を排除しない。だから特に触れなくてもよい。
しかし、いまの上下margin指定のあるインライン要素の場合では、
line-heightによる高さ算出は、marginの高さへの算入を、*必ず*排除する。
こんな場合にはやはり明記した方がよいかと。
>TABLEはどーもレイアウトには奨励されてないようで。。
奨励とかそういう問題ではないですよ。
tableはあくまでも表をあらわす場合に使うものなので、そもそも用途が違うわけです。
カッターナイフを使うべき作業に包丁を用いるようなものです。
>>274 ゴメン、ほんと下手な例だったね
仕様書に「インライン要素の高さの算出に上下marginは使わないんですか?」と聞いても
「インライン要素の高さはline-heightで決定します」としか返ってこない状態だね
俺もたまに仕様書の表現が気に食わないことはあるよ
marginはあらゆる要素に適用可能と書いてあるだけに、猶更わかりにくいよね。
>>276
ん、まぁもう気にしても疲れるだけだからな
細かいとこは体で覚えるしかないな
インライン要素への上下margin指定は無効。
このこと、意外にCSS解説サイトなんかでも書いてないんだよな。
まぁ、書くまでも無いようなことだからなんだろうけどね
質問です。複数のページに外部ファイルスタイルシートを読み込ませることにしました。
例えばhoge.cssをA、B、Cのページに読み込ませるとします。
hoge.cssには5つの要素への設定が記述してあり
Aページでは1、2、3
Bページでは2、3
Cページでは3、4、5
の要素への設定があります。
しかしAページでは”4、5”、Bでは”1、4、5”、Cでは”1、2”の記述がなく
それらは意味がありません。
こういう場合、何か問題はないのでしょうか?
また別々のファイルにするべきでしょうか?
教えてください。
283 :
281:04/07/26 18:25 ID:???
>>282 安心しました。ありがとうございます。
がんがります(`・ω・´)
Firefox0.8で
font-family: "MS Gothic" sans-serif;
と指定すると、認識してくれないようです。
font-family: "MS ゴシック", sans-serif;
と指定した場合は認識してくれるようなのですが、
「MS Gothic」で認識してくれるブラウザはWinIEだけなのでしょうか?
"MS Gothic"の後にカンマが抜けているという話ではなくて?
286 :
284:04/07/26 22:12 ID:???
>285 うっかりカンマを削ってしまったようです。すみません。
font-family: "MS Gothic", sans-serif;
と指定してもMSPゴシックで表示されたので、
おそらくsans-serifが適用されているのだろうと思います。
ブラウザの設定も見直しましたが、やはり同じ結果になります。
「MS ゴシック」と指定したときは、MSゴシックで表示されました。
本当にフォントが入っているかどうかGeneral(全般)のFont & Colorでどれか選択して出てくるフォント一覧を見てみろ。
MS Gothicがなかったら代替フォントで表示されるのが当たり前。
大抵はMS ゴシックしか入ってない。
background:url(img/hoge.gif) no-repeat 88% center;
これがネスケ7では効かないが何でかね? right center にすれば表示されるけど、
何故にネスケ7はパーセントをサポしなかったのなかね?どなたかご存知の方おるかね?
>>288 %やpxなどの数値での指定と文字列での指定は混在できない
という仕様を厳密に解釈しているだけ。
background:url(img/hoge.png) no-repeat 88% 50%;
とかならOKなはず。
imgタグをaタグで囲んだものは、ブロック要素と言えますか?
>>293 ブロック要素の意味を調べてから質問しれ
そんなすごい勢いで食いつくなよ
299 :
Name_Not_Found:04/07/27 14:20 ID:r8TA/13M
背景画像について質問があります。
background-repeat:repeat-x;
と記述すると、ページの一番上のところに
同じ画像が横に並びますが、
これをページの一番下のところで横に並ばせるには
どう記述すれば良いのでしょうか。
background-position
>297
川上憲伸型
302 :
Name_Not_Found:04/07/27 14:33 ID:r8TA/13M
304 :
Name_Not_Found:04/07/27 21:44 ID:SttUIMbG
現在、ホームページを作ってる最中なんですが、
<span style="background-color: #ffffff;"><font size="2" color="#000000"><b>管理人</b></font></span><br>
<font size="2">モナー</font><br><br>
<span style="background-color: #ffffff;"><font size="2" color="#000000"><b>メニュー</b></font></span><br>
<font size="2">2ちゃんねる<br>日記</font><br><br>
ってタグになってて、
管理人
モナー
メニュー
2ちゃんねる
日記
って表示されてます。
ここを、
管理人
モナー
メニュー
2ちゃんねる
日記
って感じで管理人と、サイト名の部分を少し前にずらすにはどうしたら良いんでしょうか…。
あと、外部スタイルシートに記述しようと思うんですが、管理人とサイト名に付属するタグをどうやったら短く記述出来るのか分かりません…。
<dl>
<dt>管理人</dt>
<dd>モナー </dd>
<dt>メニュー </dt>
<dd>2ちゃんねる<br>日記 </dd>
</dl>
これでどう
>304
htmlをもっと勉強しる
307 :
Name_Not_Found:04/07/27 21:59 ID:SttUIMbG
>>305 さっそくコピペして表示させてみたんですが、
これだと管理人とメニューが前に出過ぎてました。
飛び出す長さを自分で調整したいんです。(pxとかemとか…)
あと、text-indent: -10pxとかやってみたんですが、
管理人の部分は成功しましたが、メニューやその後に続くやつが失敗しました…。
CSS使うならfontタグなんて使うなよ
>>307 >>305のようにするのならCSSは、
dl{
font-size:任意;
}
dt{
font-weight:bold;
display:inline;
background:#fff;
}
dd{margin-left:1.0em;}
311 :
Name_Not_Found:04/07/27 22:10 ID:SttUIMbG
>>309 <span style="background-color: #ccffcc; margin-left: 1em;">
ってやってみましたが、変化無かったです…。
この前に<DIV class=menu id=menu>ってやってるのが問題なんだろうか…。
フレームみたく左にメニュー欄、右に日記とかを表示するようにfloatで段組してます。
ちなみに外部cssのmenu部分は
#menu {
BACKGROUND: #fcfcfc;
FLOAT: left;
WIDTH: 25%;
line-height: 1.1em;
padding-left: 20px;
}
こうなってます…。
>>310さんのやり方で出来るようになりました。
ありがとうございました。
314 :
Name_Not_Found:04/07/27 23:55 ID:VKcQPotx
<float: left;>の後に<clear: left;>を指定した要素に
<margin-top:>を指定しても余白が取れないのですが、
なぜでしょうか?
>>314 浮動要素のheight+marginを取らないとだめ。
316 :
314:04/07/28 00:28 ID:vMnBgGBm
質問ですm(_ _)m
現在作成中のサイトがあるのですが、
例えばメールフォーム等のように、ブラウザの上から下までビッシリ詰まるようなレイアウトでは無い場合、
<div style="position: relative; top: ○○%;">
・
・(この間に全体のレイアウトを収める)
・
</div>
のような感じで、全体を若干下げたりしています。
この場合、IE6とNN7.1では意図したように表示されますが、
Mozilla1.7.1とOperaでは反映出来ないようです。(この4つのブラウザしか試していません)
パーセントではなく、ピクセル単位などで指定すれば反映されますが、
それだと、モニターの解像度によっては下に行き過ぎたりしますし・・・。
他の方はどのようにしてます?
上手く反映させる方法ってあるでしょうか。
MozillaやOperaが%に対応してないだけなのかな・・・。
body {margin-top:**%;}
NN7.1とMozilla1.7.1は同系。そんなに異なるはずがない。
>>317
>>319 無理ではない。body {padding-top:**%;}でも良い。
323 :
319:04/07/28 09:38 ID:???
>>321 すまん。そしてありがd
margin : **.**,**,**; と指定して反応なし=無理と決め付けた俺が池沼orz
正しいCSSを学ぶ旅に出ることにする○几
324 :
Name_Not_Found:04/07/28 10:14 ID:wsbahfZy
質問です!
CSSで背景を設定したんですが、表示されません。
ちなみにその設定はhead内に入れました。他の設定は外部ファイルからです。
(それがいけないんでしょうか?)
それも、オフラインだと表示出来たんですが、FTPでアップした時に表示されなくなりました。
どなたか分かりませんか?
325 :
Name_Not_Found:04/07/28 10:29 ID:Sy8MHy7O
スタイルシートをゴーライブのソフト内で最大化表示してしまったんですが元に戻りません。ソフト閉じるしかないんでしょうか?
>324-325
●基礎は解説サイト(
>>4・かなりわかりやすい)で勉強してください。
>>324 >オフラインだと表示出来たんですが、FTPでアップした時に表示されなくなりました。
おそらく禿げ上がるほどの既出ネタ?
君が置いたサーバーが外部読み込みを禁止しているので表示されない可能性大。
「オフライン時に表示」できたということだけど、
それは単に「キャッシュ」が残ってただけなのではないでしょうか。
#外部ファイルの意味が外部のサーバーという意味ならの話だけど。
その前に力技で<BODY>に直接背景をぶち込んでみて確認してみそ。
ダメなら外部読み込み禁止。オッケーの場合はCSSの記述ミスだと思う。
328 :
324:04/07/28 11:38 ID:wsbahfZy
ありがとうございました!
なんとかなりました
329 :
Name_Not_Found:04/07/28 12:02 ID:odgUQe2m
様々な環境に配慮して、どんなユーザーでも使いやすい方法で提供されている情報はアクセシビリティ
(accessibility) が高いと言います。アクセシブルなコンテンツづくりとは、ウェブでのコミュニケーシ
ョンに誰もが参加できるよう設計すること。情報の利用者であると同時に提供者でもある私たちは、常
にこの点に配慮していきたいものです。
330 :
329:04/07/28 12:03 ID:???
誤爆スマヌ
ものすごく丁寧な誤爆に萌えた。
いったいどこのスレなのかが気になる。
334 :
@import_Wakaran:04/07/28 12:51 ID:vjhrhLCP
@importを読み込まないブラウザがあるのでしょうか?
IE6.0(OSはWin2000SP4)
Opera 7.23
Netscape 7.1
は正常に読み込んで反映するのですが、
Safari1.2 IE6.0(知人のノート、OSはXP)などでは@importで指定したcssファイルを読み込んでくれません。
ブラウザのバグ?それとも記述ミス?
−−−以下ソース−−−これをhtmから外部リンクしています。
@charaset "iso-2022-jp";
@import url("./base.css");
UL {
width: 450px;
}
LI {
padding: 2px
}
.honbun {
width: 450px;
background-color: #FFDFEF
}
#logo {
position: relative;
left: 20px;
}
>>334 OSが2000とXPで異なるからって、同じIE6.0で差が出るわけない。
337 :
@import_Wakaran:04/07/28 15:59 ID:vjhrhLCP
>335
ご紹介ありがとうございます。
やっぱりSafariは対応してるんですよね・・・。
どうして読み込まないんでしょうか?? 謎すぎです。
記述法が間違ってるわけではなさそうなのですが・・・。
base.cssに間違いがあるのだろう
339 :
K:04/07/28 16:22 ID:d4k54oG6
板違いだったらごめんなさい!
写真をクリックすると、音がなった後にべつの写真を
表示することは可能でしょうか?
>>339 可能。
この話は終了。
次の質問ドゾー
ふんにゃか ふんにゃか
>>339 画像と音楽を付けたHTMLドキュメントを作成して、そこへリンク。
でも音鳴るのは嫌われるよ。
343 :
K:04/07/28 17:43 ID:d4k54oG6
>342
ありがとうございました。
0.5秒位の音声も嫌がられますかね?
>>343 鳴ることを嫌う人もいるな。
例えば、職場で仕事で調べものをしてるときに、とか。
まあ、いろいろあるわけだ。
345 :
K:04/07/28 18:11 ID:d4k54oG6
>344
そうですか〜。もう一回検討してみます。
ありがとうございました。
347 :
317:04/07/28 19:08 ID:???
318〜322
返信ありがとうございます。無事に解決しましたm(_ _)m
対応表のほうは一度は目を通したのですが、
どうも読解力がなくて申し訳ないです;;
>>347 解決したのはめでたいが、何が原因だったか、どう解決したのか、できれば報告しておくれ。
すいません、スタイルシートについて質問があります。
外部ファイルでスタイルを与える場合、1つのhtmlファイルに複数の外部ファイル(.css)
を呼び出すことは出来るんでしょうか?
352 :
284:04/07/28 20:29 ID:???
>287
ttp://syobon.zive.net:85/src/syobon3644.png Firefoxの設定画面ですが、このように設定しても変化がありません。
code { display: block;background-color: #fcffff; font-style: normal;
font-size: 90%; font-family: "MS ゴシック", sans-serif;
letter-spacing: 0.02em; border-width: 0px 0px 1px 0px;
border-style: dotted; border-color: #333366; }
code { display: block;background-color: #fcffff; font-style: normal;
font-size: 90%; font-family: "MS Gothic", sans-serif;
letter-spacing: 0.02em; border-width: 0px 0px 1px 0px;
border-style: dotted; border-color: #333366; }
上の指定では、code要素がMS Gothicで表示されるのですが、
下の指定ではsans-serif(つまりMS PGothic)で表示されました。
>>352 それは君のパソコンに"MS ゴシック"はあるが"MS Gothic"は無いからでは。
スタイルシートで背景(画像を二つ)あてる事は出来るんでしょうか?
355 :
昔の人:04/07/28 20:58 ID:???
356 :
284:04/07/28 21:00 ID:???
>353 IE5.5では、下の指定でもMS Gothicで表示されるのです。
ひとつ気になるとすれば、
Firefoxの設定でフォントを選択する欄をクリックしても
「MS Gothic」がないことでしょうか。(MS PGothicもMS UIGothicもありません)
「MS ゴシック」ならばあるのですが・・・。
なお、OSはMeです。
質問です。
フォーカスのあるリンクの周りに、点線の囲みができますが、
これを表示させないように CSS で指定するにはどうしたらよいでしょうか?
a:visited, a:active, a:focus{ border-style:none; }
としてみましたが、うまく行かないようです。
環境は win2000, IE6 です。よろしくお願いします。
>>357 それはスタイルじゃないと思う。
JS スレで解決した人なら、その旨告げて次の質問ドゾーと書いてください。
359 :
357:04/07/28 22:05 ID:???
たしかに私はJSスレ Part29の 853 です。
あそこでの質問は解決していただいたのですが、それと関連したトラブルが
他にありまして、JSスレでの質問と微妙に性質が違うので、こちらで
おうかがいしたいのです。
それはさておき、フォーカスの与えられたオブジェクトの周囲の点線を
指定するセレクタはCSSには存在しない、ということでしょうか?
>>359 点線の囲みってことはブロックレベルだろう?
aじゃなくてそのブロック要素にborder設定しないと。
>>361 はて。インライン要素にもborderは適用できますが。但しWinIEは5.5以降で対応。
363 :
357:04/07/28 22:14 ID:???
それは Mozilla なら点線を消せる、と言うことでしょうか?
当方は Mozilla 1.7 Sylera でテストしておりますが、以下のコードだと
点線は消えません。
<style type='text/css'>
a:focus, a:active, a:visited {border-style:none;}
</style>
<ul>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
<li><a href="#">ふんにゃか ふんにゃか</a></li>
</ul>
あの点線はスタイルじゃないでしょ。borderとは別にあるみたいだし。
そういやWINXPでブラウザに限らず何のファイル選択するんでもあの点線でるな。
MacIEだと a:focus{border:〜;}で制馭できた憶えがある。
あの線は
・winIEではcssとは関係ない(が、独自属性で消せたと思う)
・macIEではcssのoutline
・gecko系では-moz-*
・safariも確かoutline(だったと思う)
・operaは、線なんてあったっけ?
要するにMacのブラウザでは制御しやすいが、WinではOSが邪魔をするってこと?
そもそもフォーカスの印なくなったら
TAB移動とか面倒じゃまいか。
372 :
853:04/07/28 22:55 ID:???
これで Mozilla だと点線が消えるようになりました。
a:focus { -moz-outline:none; }
どたなか WinIEでのやり方をご存知での方はいらっしゃいませんか?
>>372 だからWinIEはa:focusにもoutlineにも対応してないんだって。
それに
>>371も言ってるが、識別できなくなるから、消すなよ。
ユーザー・インターフェースの類は無闇にいぢらない方がよい。
374 :
357:04/07/28 23:16 ID:???
前レスで、他スレの番号が出てしまいました。
お聞きしたいのは、スタイルシート以外でできるという設定についてです。
>>367・winIEではcssとは関係ない(が、独自属性で消せたと思う)
あと、今作っているのはイントラネットのメニュー画面で、線を消すのは
ある事情のためです。今回に限った話で、操作に問題はないはずなのです。
スタイルシート以外のことをここで訊かれても、をぢさん困っちゃふな。
376 :
@import_Wakaran:04/07/28 23:19 ID:vjhrhLCP
>338
base.cssに問題はないと思われ。
W3Cが提供するチェックサービスで問題なしと出る。
最近CSSを学び始めた者です
あるCSSの参考書の書き方なのですが
.head td{vertical-align:top;
padding-top:8px}
といった書き方がされていたので疑問に思ってしまいました。
このスレにある解説サイト等では
タグ .クラス名 という順番で記述するということのようなのですが…
どなたかご教授いただけませんでしょうか。
>>378 それはclassがheadの要素の子孫のtd要素にマッチするセレクタです。
>379さん
ご返答ありがとうございます。
書式の順番という事とは違う内容だったのですね。
うーん、classによって指定した範囲内のtd要素に、
設定が反映するということでしょうか・・・?
基礎概念の勉強がもっと必要だということが解りました…。
リファレンスページを読み直してきます;
テーブルだからはみ出ないんじゃないの?
>382
そうなる予定で書いたんですけど
実際書いてみるときれいにはみ出てしまうんですよね
(´・ω・`)ショボーン
ためしにaを100ぐらいを書くと完全にずれる。
どうすればいいのかなぁ。
何が悪いんだろう
>>383 アルファベットの羅列は改行されずにはみでるよ。
日本語でためしてみなよ。
>>383 連続する半角英数は一単語と見なされて、ブロックの端に到達しても
自動的には折れません。
本来、そういうときのために<br>という要素があるので、可能ならば
それで折ってください。
<br>を入れることが不可能ならば、MSIE ならば word-break という
プロパティを先行実装しているので、それで折ることが可能です。
Moz はまだ実装していません。
>384-385
あー、そうだったのか。
また賢くなった。教えてくれてありがとう。
>385
><br>を入れることが不可能ならば、MSIE ならば word-break という(ry
(´-`).。oO(詳しく教えていただきたいなぁ。)
>387
フー('ε')ーン
お勉強しろということですか。
貴様ら付き合ってくださいまして本当にありがとう
ありがとう。 ばいばい
えーと。
9月半ばくらいまで、名前欄に括弧付きで年齢入れることにしないか?
ちょーでちゅねー。
よくできまちたー。
くだらないルールだ
自分にレスつけて面白いの?
395 :
317:04/07/29 08:10 ID:???
>>348 返信遅れました。
ええと、
>>318と
>>321の方法を両方試したのですが、
どちらの方法でも、私が用いた4つのブラウザ全てに反映する事がわかりました。
(とりあえずは、「body {margin-top:**%;}」のほうを現在使用中)
結局のところ、何が原因で
style="position: relative; top: ○○%;"
が反映されなかったのかは、私の知識ではなんとも・・・。
まだホームページ作成に関しても、覚え始めなので精進あるのみです(- -;A
うん。がんがってね。
夏バテに負けず、毅然として次!↓
ふんにゃか ふんにゃか
チョットチガウヨウナキガシル
>317っていい奴だな。こういう人は俺と違ってどんどん上達するな。
_____ _____
| | | |
| 写真1| | 写真2|
| |コメント:○○○ | |コメント:○○○
| |○○○○○○ | |○○○○○○
 ̄ ̄ ̄ ̄ ̄  ̄ ̄ ̄ ̄ ̄
_____ _____
| | | |
| 写真3| | 写真4|
| |コメント:○○○ | |コメント:○○○
| |○○○○○○ | |○○○○○○
 ̄ ̄ ̄ ̄ ̄  ̄ ̄ ̄ ̄ ̄
CSSでこのような段組レイアウトをしたいのですが、やり方が分かりません。
もちろんテンプレ読んで調べてみましたが、上のような段組の綺麗な組み方は理解するに至りませんでした。
どのように記述したらいいんでしょうか?条件として、、
・写真のコメント(何行になるかわからないものと仮定する)の最後の行は、写真の下側に合わせたい。
・写真1と写真2の上側、写真3と写真4の上側の位置をそれぞれ合わせたい。
よろしくお願いします。
402 :
401:04/07/29 11:08 ID:???
↑絵がずれまくってしまいました。見にくくてスイマセン!!
このスレッドで既出。
>>401 意外と単純そうでやりずらーいな。
TABLEで組めば一瞬なんだけどな、やっぱ表じゃないしあんまりTABLEは好ましくないわな。
かといってCSSで組み込むとOS、ブラウザ毎に表示変わってくるし、
この手のレイアウトは、要素一つ一つをご丁寧にブロック化してから
各々floatなりpositionなりでレイアウト組み込まなきゃだから下手すりゃ
TABLEよりはるかに複雑な記述になる恐れもあるわな。
特にfloatはブラウザ毎でレイアウト崩れ起きやすく注意しなきゃならんし、
かといって絶対座標で位置をとっていくのも、Y座標に関しては難しいとこだよね。
だってこの場合、商品写真よりコメントの方が長くなってコメントの方が占める高さが写真以上になることもあるわけでしょ??どー組み込むのが賢いのか??
みんなどーレイアウトとってんのかね?
<input type="file"> に、
borderやfontなどのスタイルシートを用いる方法はないでしょうか?
>>405 input {
border: 適宜;
font: 適宜;
}
407 :
Name_Not_Found:04/07/29 15:39 ID:ueZu9xl2
ulの入れ子で、以下のようなものがある場合、
第一階層の項目(下でいうと●ではじまる項目)についてだけ、
上マージンだけを10pxもうけるにはどうすればいいのでしょう?
●あああああ
●いいいいい
●ううううう
●えええええ
○かかかかか
■さささささ
○ききききき
○くくくくく
○けけけけけ
●おおおおお
<li class="hoge">
li.hoge{
margin-top:10px;
}
</li>
とやってもだめでした。
>>407 第2階層以下にもクラスを設定してそれぞれマージンを設定汁。
409 :
Name_Not_Found:04/07/29 16:04 ID:EwBe3rxe
tableで枠と中の文字の隙間を決めるのに使うcellpaddingをスタイルシートで一括して設定するにはどうすればいいのでしょうか?
>>407-408 ul li {margin-top:10px;}
ul li li {margin-top:0;}
>>409 padding
>>408は、いつもそんな面倒臭いことやってたのか。子孫セレクタ使ってネ。
412 :
407:04/07/29 17:24 ID:ueZu9xl2
413 :
408:04/07/29 17:51 ID:???
>>410-411 いつもそんな面倒臭いことやってました・・・_| ̄|○
なるほど勉強になりました。感謝!
>>401って極端なことをいうと、こんな感じになるのかな。
tableでもけっこうしんどそうだ。
position駆使するしかない予感。
コメント:○○○
| ̄ ̄| | ̄ ̄|○○○○○○○
|画像|コメント:○○○ |画像|○○○○○○○
|__|○○○○○○○. |__|○○○○○
コメント:○
○○○○○
○○○○○
| ̄ ̄| | ̄ ̄ ̄ ̄|○○○○○
|画像| | 画像 |○○○○○
| |コメント:○○○.  ̄ ̄ ̄ ̄
|__|○○○○○○
クラス選択子を知ってて子孫選択子を知らないとはこれいかに
ハイ〜 キタカサッサー ホイサッサー
417 :
408:04/07/29 18:03 ID:???
>>415 特に学習せず適当にやってきてしまってたので・・・_| ̄|○
これを機会に適当な性格を改めて精進していきたいと思います。
>>414 それじゃあデザインもナニもあったもんじゃないな。
>>414 おいおい、テーブルなら楽勝だろ〜??
それからpositionじゃあやりづらくないか??出来る気がしないな。
<table>
<tr>
<td valign=bottom>画像1</td>
<td valign=bottom>コメント1:○○○○○</td>
<td valign=bottom>画像2</td>
<td valign=bottom>コメント2:○○○○○○○○</td>
</tr>
<tr>
<td valign=bottom>画像3</td>
<td valign=bottom>コメント3:○○○</td>
<td valign=bottom>画像4</td>
<td valign=bottom>コメント4:○○○○○○○○○○○○</td>
</tr>
</table>
これならコメントが何行になろうが401のレイアウトは一応は保持できるから
この方が絶対簡単だし効率的ではあるんだよな。
ただ問題は、このレイアウトをテーブルでやるのはどーなの??ってことだよな。
ポジションの方がテーブルよりうまくできるのは自明の理なので使い方覚えてください。
#つーかテーブルとcssが相反するものと思っている時点で池ry
>>420 じゃあpositionせっせと使って
>>401の言ってるレイアウトの仕方をここに書いてみろよ。
さあ 面白くなってまいりました!
420はどこでもの予感
display:table-* とセレクタをちゃんと使えばリスト要素でも可能だとは思う。
しかしIEの対応が出来ていないいつもの罠
アンカー無けりゃわからんよ。
430 :
Name_Not_Found:04/07/29 21:42 ID:u/TGvJny
>414は何も書いてないでしょ?
>>407 だから
>>251以下既出だって。
>>261を改良して、
コメントのp要素をdivで括って
div {line-height:画像の高さ}とし、
p {display:inline;vertical-align:bottom}
で、どう?
433 :
Name_Not_Found:04/07/30 02:29 ID:qhz4/hik
質問です!
上下(または左右)を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが、
width:100%;にしても両端に余白が出来てしまいます。
border:none;なんかで対処できるかと思ったんですがうまくいかず…。
どうやったら余白を消せますか?
それと、body{background-color:black;}を外部から読み込んでも真っ白なんですけどなんででしょうか…。
とりあえず、.background{background-color:Black;}を加えて、
本体(?)の方に<body class="background">とやって強引にやってるんですが…。
一応、なぜ出来ないのかハッキリさせたいので、出来れば教えてください。
ソース出せ。
>>433 上:意味不明
下:body{background-color:black;} であってるよ。
他のシートやなんかが邪魔してる鴨ナー
>>433 5W1Hって知ってる? 主語と目的語をハッキリさせて質問し直して下さい。
でないとわかりません。
HTMLとCSSはチェッカーにかけて誤記が無いか確かめましたか。
>>433 どんなに正しい記述をしても、ブラウザによっては特定の記述を無視します(実装していないため)
「背景が真っ白になる」のは、おそらくあなたが使ったブラウザの「仕様」なので諦めてください
(たしかmacIE5.1や一部のNNではbodyの要素をいじられるのを嫌うはず)
>上下(または左右)を真っ黒にして真ん中にメニューやらなんやらを置きたいんですが
ブロック要素は普通 width100% で考えるはずな(特に指定が無ければ)
おそらくbodyのほうのmarginがデフォルトでついてると思うので
body {
margin : 0;
}
を追加してもういちど試してください。
あと勘違いかもしれないけど、こういうことがしたいのかな?
ttp://www.fromdfj.net/html/overflow.html 上下左右に分けるってんならこういう手もあるよ
padding: 0
も追加しとけ
439 :
Name_Not_Found:04/07/30 12:09 ID:ESeJnz1h
440 :
439:04/07/30 12:12 ID:ESeJnz1h
上のようなのを書いてNN7で見てみると
「ふん」と「にゃか」のリンクが機能しません。
IEでは機能しました。
ソースは勉強中のものなので突っ込まないでください。
>>439 padding-left:とか使うから。
absoluteならleftで指定すればいいだろ。
まずCSSの前にHTMLから勉強してみよう
>>440 レイヤーが重なっているから。
試しにp.bにbackground:#000;などを加えるとわかりやすい。
で、例えば下記のようにすれば解決できる。
dl.a{
position: absolute;
bottom: 20px;
left:100px;}
p.b{
position: absolute;
bottom: 20px;
left:300px;}
444 :
439:04/07/30 14:49 ID:???
即レスありがとうございます。
>>442 元のHTMLを触らずCSSで見栄えを・・
という条件だったので突っ込まないでください。。
>>441 >>443 リンクしない理由が分かったので勉強になりました。ありがとうございます。
がんがりがす。
>>444 > 元のHTMLを触らずCSSで見栄えを・・
> という条件だったので突っ込まないでください。。
お前になんで問題出されなきゃなんないの。バカか。
446 :
439:04/07/30 15:54 ID:???
>>445 バカはお前。
お前には聞いてないし問題も出してない。
必要とされていない人間が出てくるな。
「さて問題です」などとは一言も言ってない。
お前のような糞がいるから「夏ですね」と書き込むやつが増える。
夏休みならデートでも行ってこい。
>>446 > 「さて問題です」などとは一言も言ってない。
言い忘れるなよ。ヴォケが
夏ですね
はい、皆さんご一緒に・・
夏ですね。
夏ですね。 ツマンネ
>>444 デムパを触らずまともな質問者に回答を・・
というスレだったので質問しないでください。。
じゃぁ空気入れ替えage
俺にも夏休みをくれ
だめ!
じゃぁ空気戻しsage
>>446 > お前のような糞がいるから「夏ですね」と書き込むやつが増える。
自分が言われて悔しかった言葉を人に言えば効果があると思ってるんだろうね。
>>457 >言われて〜
それはお前だろう。
もうこの辺で次ドゾー
ソースいじれない理由をちゃんと説明しとけば荒れなかったのに
答えてやるから3分以内に質問しろ。
>>460 3分以上経っちゃったけど、いいかな。
漏れ、残業で今から帰るんだけど、
晩飯、何にしたらいい?
深夜だけど、胃腸の具合もいいし、
ガッツリ食いたいです。
味噌カツ醤油煮込み炒め焼きそば
どんどん460が哀れになっていく・・・・
相手してくれるお馬鹿さんがどんどん増えてて
むしろ喜んでいると思うが
夏ですねぇ
background:url(img/hoge.gif) repeat-y center center fixed;
こういう一括指定と
background-image:url(img/hoge.gif);
...
のような個別指定?がありますが、これは何のためでしょうか?一括してしか効かない、または個別指定でしか効かないブラウザがあるのですか?
borderの場合は個別指定でないと、できないことがありますが、backgrounfに関しては一括指定と個別指定で
できることが同じだと思うんですが、どういうことなのかエロイ人いましたら教えてください。
どちらが推奨かもお願いします。
471 :
460:04/07/31 08:16 ID:???
ほんとあつがなついですね
>>470 1.手打ちでCSS書く人の簡単の為。
2.伝送量を減らしたい人の為。
background: white;
が
background-color: white;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
と等価なわけなので
手打ちで書く人にとっては楽チンでしょう。
伝送量も約100バイト節約されます。
どっちが推奨かは好みの問題でしかないですね。
#一括指定は、省略値は初期値にリセットされるのが正しいという点を
間違えて覚えるとハマるので注意。
ブラウザによってはリセットしないので、一括指定を使う場合、省略しない方が吉。
473 :
Name_Not_Found:04/07/31 15:35 ID:F0vWRZXC
質問です。
ウィンドの見える位置の一番下の方に画像を置きたいんですけど、CSSだとどうすれば出来ますか?
position:fixed; bottom:0;
但しWinIEは未対応なので他の工夫が要る。
またIEか
>473
背景画像だったら
body {background:transparent url(画像のパス) no-repeat fixed bottom;}
とでもやればIEでもイケル
しかしwinはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・
Win使わなければいいじゃん。
それにWinじゃなく、IEだろ?
WIN != Windows
なら
しかしMSはどうにもなんねーなー
ブラウザーくらいまともにつくれんのか・・・
じゃね?
>>480 相手は小学生だ。細かいこと言いなさんな。
しかしIE6を無視できないのが辛いところで
483 :
473:04/07/31 18:57 ID:???
どうもありがとうございます。無事出来ました。
画像を置くだけだったのでwinでも無事出来ました。
質問です。
背景いっぱいに写真などの画像を指定して余白ができないようにしたいのですが
1024×768の画像を用意しても、最近はそれより大きい画面で閲覧している方も
多いのでどうしても余白が出来てしまうと思います。
どの大きさの画面でも余白ができないように指定する方法はありますか?
485 :
470:04/07/31 19:48 ID:???
>>472 エロイですね!
>#一括指定は、省略値は初期値にリセットされるのが正しいという点を
これ重要なことですね。これが一括と個別の大きな違いですね^^
ものすごくわかりやすかったです!エロイ!
画像を上手く加工してrepeatさせりゃいいんじゃん
>486は
>484ね
>>484 img{width:100%: height:100%}
質問です。
widthで幅を指定したdiv要素の中に、
URLを表記しているのですが、
そうしますとURLのせいで指定した幅を押し広げてしまいます。
これはバグでしょうかね?
良い回避策などありましたらご教授下さい。
493 :
Name_Not_Found:04/07/31 21:20 ID:c8TzC9Yg
ギリシャ語やキリル語のフォントを指定するにはどうしたらいいんでしょうか?
font-family:MS Pゴシック;
↑と書くと日本語の部分は指定したフォントになるんですが、ギリシャ語とキリル語は
そのまま(デフォルト)です。
要は、AAをずれないように表示したいんですが・・・
494 :
Name_Not_Found:04/07/31 21:23 ID:c8TzC9Yg
495 :
Name_Not_Found:04/07/31 21:25 ID:c8TzC9Yg
あ、ごめんspanじゃないや。divとかtdとかブロック要素ね。スマン!
>>493 ブラウザはなんですか?
IE5.5/6 ならモナ板のトップなどに対処法があるのでそっちを見てください。
閲覧者側での対処が必要ということです。
CSSだけではたぶん無理。
497 :
492:04/07/31 21:38 ID:???
498 :
492:04/07/31 22:12 ID:???
あ、でもこれって今のところIE独自でしか効かないのか。
う〜む。。やっぱり適当に改行するしか方法ないのかな。
499 :
Name_Not_Found:04/07/31 23:54 ID:c8TzC9Yg
>>496 IE6です。
結論としてCSSだけじゃ無理なんですね(´・ω・`)ショボーン
不便ですねぇ・・・
500 :
Name_Not_Found:04/07/31 23:57 ID:rQOZg4st
classとidはどう違うのですか?
どう使い分ければいいのでしょうか?
501 :
484:04/08/01 00:01 ID:???
>>486 空とか一色ではない画像を全面に表示させたいのです…。
>>488 background-position: 100% 100%;
だと単に右下に固定になってしまいますよね。
>>489 すみません。
さんざん探したのですが背景に関わるCSSは画像をリピートさせるもの、
左上〜右下・中央に固定するものと簡略化タグしか書いていないところがほとんどで…。
探し方が良くないのでしょうか。
>>493 font-family : "MS Pゴシック";
…まさか囲み忘れじゃないよね。
<div class=test1>テスト1</div>
<div class=test2>テスト2</div>
div{
background-color:#ccc;
}
div.test1{
text-align:center;
}
とした場合はdiv.test1にも背景色があるのが仕様書通りの解釈だと思いますが、
div.test1に背景色がつかない、何故かdiv.test1のセレクタが後から出た時点で
以前のdiv全体に対する指定が反映されず初期化されてしまうようなブラウザってありますか?
一応n6以上ie5以上で問題なければいいんですが。
>>501 1枚でどんなウィンドウサイズでも画面いっぱいにしたいなら、
物凄く大きな画像を用意するしかないのでは?
もしかしてウィンドウサイズに応じて伸び縮みする画像を
望まれているのでしょうか?
それは現時点では無理かと思います。
でかい画像用意したとこで内容はどうなるのよ?
でかい画面使ってても、画面いっぱいにウィンドウ表示するとは思えんが
>>501 だから
>>486が言っているように、繋ぎ目部分をPhotoshopなどで加工して
Repeatしても自然な繋ぎ目になるようにすればいいだろう。
具体的な手ほどきは割愛。
<div id="news">
<p class="news">川口がものすごい活躍をして日本を救いました</p>
</div>
これに対して
p.news{
padding:100px;
color:red;
}
#news p{
padding-bootom:0px;
color:blue;
}
の順番でブラウザに読ませた場合、どちらが優先順位が高いんですか?一応ie6標準準拠モードでは
この二つのセレクタは同じ優先順位と解釈してるっぽく、後から読み込んだ方を優先順位が高いものと
してレンダリングしますが。
IDからの文脈セレクタとクラス名を使ったセレクタが同じ優先順位というのが正しいのか良くわからないですが
エロイ人いませんか?
509 :
507:04/08/01 07:25 ID:???
>>508 エロイですね!
いいサイトを紹介してくださってありがとうございます!
じっくり読んでみます!
510 :
507:04/08/01 07:30 ID:???
>>508 結構わかりやすい計算方法なんですね。
classのみのセレクタはひっくり返ってもIDセレクタを含むセレクタにはかなわないってことですね。
ところで仕様は理解しましたが、実際のブラウザはこの辺を仕様とおりに実装してるのでしょうか?
セレクタの詳細度の算出方法が仕様と食い違っている有名なブラウザはありますでしょうか?
NN4とかIE4未満はCSSを適用させないようにしてるので、どんな実装でもかまわないですが。
511 :
484:04/08/01 07:40 ID:???
>>504-506 >ウィンドウサイズに応じて伸び縮みする画像
そうです、どこかでそういう指定をCSSでできるという書き込みを見たもので、
探していたんですが…。現状では無理ですか。
どうも丁寧なレス有難うございました。
>>510 自分が表示確認できないブラウザがあったとしてどうするつもり?
とりあえずCSS完成してみれば
クロスブラウザなんかその後の話だっつーの
_______________
| 見出し | ――――――見出し――――――
|文章文章文章文章文章文章文章 | |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 | |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 | |文章文章文章文章文章文章文章 |
|文章文章文章文章文章文章文章 | |文章文章文章文章文章文章文章 |
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
分かりにくいですが、角はそれぞれ繋がっていると思ってください
左のAAのようにborder-topを上ではなく、
右のAA のように見出しの上下真ん中に持っていくことは可能でしょうか?
やってみたのかい? borderでは出来ないよ。
>>513 見出しにrelativeで負の値でも付けてあげたらよいかと。
516 :
513:04/08/01 08:46 ID:???
>borderでは出来ないよ。
となると?ヒントだけでも
やろうと思いましたが、アイディアが浮かばなかったので…
517 :
513:04/08/01 08:47 ID:???
518 :
513:04/08/01 09:05 ID:???
<div>
<h3>見出し</h3>
<p>文章文章文章文章文章文章文章
文章文章文章文章文章文章文章</p>
</div>
スタイルシート
div{
width:200px;
border:solid 1px;
}
h3{
position:relative;
top:-0.5em;
text-align:center;
}
↑みたいな感じでやってみたのですが、opera、NNは駄目でした
IEでは形は出来たのですが、borderと見出し部分が重なってしまいました
他にいいアイディアあればよろしくお願いします
見出しのwidthを文字列ぴったりに指定。
そして背景色を指定。
>opera、NNは駄目でした
どう駄目だったか書かないとワカンネよ。
h1 {
font-size: 100%;
margin: 0px;
padding: 0px;
position: relative;
top: -0.5em;
left: 75px;
width: 48px;
background: white;
}
div {
border: 1px solid black;
width: 200px
}
<div class="box"><h1>見出し</h1>あああああああああああいいいいいいいいいいいううううううううううう</div>
出た!文字サイズピクセル固定!!出た!固定!!
バカ丸出し〜w
オマイ便秘だろ?
>>521 class="box"の内容も書きなよ。
525 :
507:04/08/01 10:18 ID:???
>>512 クロスブラウザってなんですか?
とりあえず詳細度の実装があまりよくなければ、問題ない単純セレクタのみで工夫しようかなと思います。
少しは自分で調べたらどうだ?
>>521 まぁ…それはかなり力技だが(^^;)
>>513 OpreaやNNでは単位概念が微妙に異なるので em 系ではズレる。
このズレをなんとかするには
>>521のピクセル指定もやむを得ないのでは。
あと見出しにかかるline-heightとmargin/padding、
DIV(box)内にある(かもしれない)paddingの値をうまくとってみて。
528 :
513:04/08/01 10:35 ID:???
自分なりにいろいろやってみましたが見出しのセンタリングがうまくいきません
>>521のようなピクセル指定はあまりしたくないので
センタリングにはこだわらないようにします
いろいろありがとうございました
>528
>521の見出しをspanで括って以下でどう?
* {margin:0px;padding:0px;}
div {
margin-top:5em;
border-top:2px solid #ccc;
}
h1 {
text-align:center;
margin-top:-0.5em;
}
h1 span {
padding:0px 0.5em;
background:#fff;
}
divのmargin-topやspanのpadding等は適宜
普通のimgは指定ボーダーを、リンクが貼られてるimgにはaのボーダーを表示されたいがうまくいかん・・・
<img><a><img></a>
こんな構造のHTMLがあるとして
img { border: 1px solid black;}
a img { border-style: none;}
とするとa img なimg要素にはボーダーが表示されなくなる
逆に img { border: 1px solid black;} だけだとアンカーのボーダーが表示されないのだが
うまい振り分け方法ありますかね?
できればa img な部分は圧倒的に少ないのでクラスで振り分けるならa img のimg要素だけにクラスを付けたいのですが
>>529 バグなのか家の環境でそれやってみたら
表示は期待通りなんだけど
ウインドウサイズをかえるとdivのマージンが表示されなくなる。
このスレなら構造って言えばある程度略したって伝わると思ったんだけどね
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head><title>test</title>
<style type="text/css">
img { border: 1px solid black;}
</style>
</head><body>
<p><img src="test.jpg"></p>
<p><a href="#"><img src="test.jpg"></a></p>
</body></html>
上のHTML2つ目のimgにはボーダーを表示しないでアンカーによるボーダーが表示されるようにしたいのだが
>>533 悪いけど言いたいことがよく分からない。
多分アンカー張られた画像にマウスが重なったらボーダーを出したいと解釈した。
違ったら説明よろ。
img { border:none }
a:link { border:none }
a:visited { border:none }
a:hover { border:1px solid black }
>>535 なるほど。でもそれなら何も設定しなくても
リンク画像だけにボーダー表示されるのにな。
そんなに黒線がいいのか。
んとちょっと違うです^^;
img { border: 1px solid black;} があると、リンクを張った画像にはアンカーによるボーダーよりCSSによるボーダーが優先されるので
これをアンカー側ののボーダーが表示されるようにしたいわけです
しかしながらただのimg(リンクを貼られてない画像)にはimg { border: 1px solid black;}を適用させたいのです
>>535 その通りです
が、アンカーのボーダーのスタイルはCSSの保守性の観点から1度の定義だけで済ませたいので、できれば子孫セレクタなどで再定義はしたくないのです・・・
特に色やボーダーの太さなど視覚的な値は
例えば
a:link {border-color: red}
がすでに書かれてるのに
a:link img {border-color: red}
とは書きたくないのですが^^;
例えば
a:link {border-color: red}
がすでに書かれてるのに
a:link {color: red}
ですね。ゴメンなさい
んー、結構ややこしいな
ただの画像にクラス付けて
img.foo { border: 1px solid black;}
なんてやればOKじゃね?
まぁ「ただの画像」いちいちクラスってのも個人的には嫌いだが
img { border:1px solid black; }
a img { boder:none; }
a { border:1px solid red; }
じゃいかんのかいな…。
>>537 のは、border-color:red; が2箇所にわかれるのがいやというなら、
a:link, a:link img { border-color:red; } でええんとちゃいますのん。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
BODY {background-color:#EFEFEF;}
DIV {width:50%;border:1px solid black;}
UL LI {list-style:circle url() outside;display:inline;border-bottom:2px dashed red;border-left:2px dashed red; background-color:#EEEEEE;}
</style></head><body>
<div>
IEのみで見られるバグ?NNで
<ul>
<li>LIに下線をつけて左マージンを指定。</li>
<li>背景色を指定すると、LIが上下に重なったところ(下行に送られたところ)の上の行のLIの下線が表示されない。</li>
</ul>
</div></body></html>
IEデフォルト見たいに既読ページは色分けしたいならこうとか。
img { border:1px solid black }
a img {border:none }
a:link { border:3px solid blue }
a:visited { border:3px solid purple}
>>543 いや、だってあーた、テキストリンクはボーダーつけないなんて言ってないじゃん。(´・ω・`)
<a href="hogehoge">テキストリンク</a>
<a href="hoehoge" class="image" title="画像リンク"><img src="mogemoge" alt="もげもげ"></a>
<img src="hanya-n" alt="リンクなし画像">
a { border:none; text-decoratin:underline; }
a.image { border:1px solid red; }
img { border:1px solid black; }
a img { border:none; }
こうでもするしかないのでは?
「これこれを子要素にもつ親要素」のようなセレクタ構文でもでっちあげない限り、
class抜きでは無理でしょう。
めんどくせw
ここまでしてやることか。
549 :
537:04/08/01 13:14 ID:???
みなさん色々どうもです
ただ単にリンクはリンクらしく、ただの画像にはボーダーをってやりたいだけなんですけどね^^;
いちおう*仕様上*解決はしました
a img { border-color: inherit}
で親のaのcolorを継承するのでFireFoxでは希望どおりの動作をします
ただあくまで*仕様上*
ええ、IEがinheritに対応してません_| ̄|○
お前ら難しく考えすぎ
>>533の例文なら、
p > img {border:1px solid black}
554 :
537:04/08/01 13:24 ID:???
今のとこ
>>539しかうまい解決法は無いみたいですね・・・
ありがとうございました
span img { border:1px solid black }
<p><span><img src="1.jpg"></span></p>
<p><a href="#"><img src="1.jpg"></a></p>
>537の
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
この考え方自体がおかしいんじゃね?
aにつけたcolorとimgのborder-colorは違うもんでない?
a {color:#f00;}
img { border:2px solid #000; }
a img {border:2px solid #0f0;}
これでテキストリンクは赤、ただの画像は黒ボーダー、
リンク画像は緑ボーダーにならないか?
いやただの素imgにはborder設定して
aとaの入れ子imgにはborder設定なしでデフォルト設定にしておきたい。
さらに素imgは沢山あるので、できれば一つ一つclass設定記述はしたくない。
さぁどうしる、という問いかと。
559 :
537:04/08/01 13:44 ID:???
>>555 spanで囲うのはクラス付けるのと等価ではありますね
>>556 「リンクはリンクらしく」つまりページ全体でリンクの見栄えを統一したいってのがあって
できれば画像リンクもアンカーのボーダー表示で済ませたいってことです
ところが画像にボーダーが設定されてる場合、アンカーによるボーダーよりも優先されてしまうというのがネックになってたのです
>a:link {color: red} がすでに書かれてるのに
> a:link img {border-color: red} とは書きたくない
ってのは見栄えに関する red とい値が2箇所に書かれるので保守性が良くないからやだなってことです
さらに付け加えると
a:hover などが設定される場合↑の方法で見た目を統一しようと
a:hover や a img:hover というセレクタを使ってもIEが対応してないという問題も孕んでますので・・・
560 :
537:04/08/01 13:46 ID:???
>a:hover や a img:hover というセレクタを
a:hover img や a img:hover というセレクタを
ですね、すいません
>>557 まさにそうです
561 :
433:04/08/01 13:52 ID:???
レスありがとうございました。
body {margin : 0;}を追加したら出来ました。
それと、背景色が出なかった方の問題ですが、
cssファイルの方の一番上にあった(cssref.css)ってのを消したらできるようになりました。
ちなみに(cssref.css)ってのはどっかのサイトからのコピペだったと思います。
562 :
556:04/08/01 13:55 ID:???
>559
ちと反則かもしれんが、リンクの色をa一括で指定したいというのなら
img {padding:2px;background:#000;}
a img {padding:0px;}
でどうかな?
563 :
537:04/08/01 14:12 ID:???
>>562 なるほど〜
うまいですね。これでいかせてもらいます
しかしIEで内容が画像だけのアンカーでhoverが効かないってのはバグですかね・・・
とりあえず皆様どうもでした
a:hover img はなぜかクリックした時に反映されるようになった。
下記だとIEでもうまくいったよ。
img { border:1px solid black }
a img {border:none }
a:link img { border:3px solid blue }
a:visited img { border:3px solid purple }
<p><img src="1.jpg"></p>
<p><a href="hoge.html"><img src="1.jpg" class="hoge"></a></p>
<a href="hoge.html">テキストリンク</a>
565 :
Name_Not_Found:04/08/01 15:27 ID:0QSax1Ps
OPERAで、フォームのinputボタンの立体感とかを無くすことは出来ませんか?
IEで見えるような形にしたいですが。
566 :
556:04/08/01 15:27 ID:???
>>565 input {
background:gray;
border:1px solid black;
}
<input type="submit" value="ほげらっちょ">
とか。
好きな画像貼り付けることもできるよ。
568 :
Name_Not_Found:04/08/01 17:20 ID:0QSax1Ps
>>567 ありがとうございます。
border-bottomにだけ、ラインを入れるという指定はOPERAでは無理なのでしょうか?
569 :
565:04/08/01 17:25 ID:0QSax1Ps
border-topを消すことは出来るのですが、
border-right、border-leftの指定で反映されません。
570 :
Name_Not_Found:04/08/01 17:33 ID:Za4XDi95
今までtableでやっていたレイアウトをfloatに変えてやろうと思っているのですが、
どうしても上手くいきません。どなたか教えていただけないでしょうか。
3段落構成で、2段落目を{float:left}と{float:right}の2つに別けたいんです。
3段落全てのwidth指定を100%にした時は上手くレイアウトできるのですが、
70%にするとレイアウトが崩れます。
どのように記述すれば崩れないで済むでしょうか。
教えられる人がいるのでしょうか?
572 :
570:04/08/01 17:42 ID:Za4XDi95
>>571さん
不可能、ということなんでしょうか?
573 :
Name_Not_Found:04/08/01 17:44 ID:rpL9WuUa
CSSで縦にのばしまくっても
横にのばしまくっても素敵なデザインって実現可能ですか?
あげてる奴は確実に夏まっさかり
>>570 ソース出してくれないと、指示もできない。
>>565 input {
background:gray;
border-top:none;
border-left:none;
border-right:none;
border-bottom:1px solid red;
}
一応こんな感じでできるけど、IEと同じ感じは無理そうだね。
どうしてもIEの見た目がいいなら、IEのボタンをスクリーンショットとって画像にして
ボタンに張るのがいいかも。
>>573 質問の意味がわかりません。通じる言葉に直してね。
579 :
577:04/08/01 18:35 ID:???
>>565 すまん、できた。
かなり反則だけど許してくれ。
border-top:0px solid;
border-left:0px solid;
border-right:0px solid;
border-bottom:5px solid black;
これでIEでもオペラでも下線だけ出る。
borderの値をnoneにするとオペラで凸ってなるから、上の様にしてくれ。
文字の大きさを固定するのって普通はやらないこと?
90%とかのがいいんですか?
>>580 まぁ固定は好ましくないと言われてる。
ただ一般個人サイトの訪問者で一番多いのがIE、文字サイズ中、1024×768って環境だろうから
その環境でちゃんと見えるんであれば、自己責任でやってもいいんでないかな。
俺はやらんけども。
すいません、テーブルやdivタグ内の背景を多少色を付けて透明にして、bodyの背景を透かせたいんですが、
どうやれば出来るんでしょうか?
□■□■
■□■□
□■□■
■□■□
上みたいな1ピクセルごとに透過の入ったGIFファイルを背景にしる。
いやIEの独自スタイルシートで半透明フィルタがある。
使ってる奴はいまだに見たことないが。
586 :
582:04/08/01 20:01 ID:???
>>586 これだよ。
filter: Alpha(opacity=80) background-color #000000
てかこれ使ってるやつ初めて見た……。
589 :
586:04/08/01 20:20 ID:???
フィルターですか、以前私も使ったんですが、私が使った時は文字までボケて見難くなってしまったんですが。
また、グラデーションがかかったみたいにボケてたんですが。どこか違うんですかね?
何つーか、お勧めできないマークアップの典型例な訳だが。
Mozillaだったら-moz-opacityで出来るな。もちろん非推奨だけど。
スタイルシートはマークアップ言語じゃないわけだが。
592 :
586:04/08/01 20:37 ID:???
やっぱりフィルターを使わないと無理なんですかね?
出来ればフィルターは使いたくないんですが。
594 :
592:04/08/01 20:45 ID:???
>>593
すいません、まだ勉強し始めて間もないので、583のやり方がわからないんですが。
>>586 αチャンネルを指定したpng画像をテーブルやdivタグ内の背景に敷けば良いんじゃ無い。
対応できないブラウザは、ほぼ「IE」だけでしょ?(笑
>>579 おかげさまで無事出来ました。
ありがとうございます。
>>596 またIEか・・・
IEを使う人はどこに魅力と利点があってIEを使うのだろうか。
IEならどのページでも見れるといっても、
web制作者が泥沼の努力の玉ものってのを糞MSは知っているのだろうか。
>598
Windows付録のブラウザがIEだからだろ
IE以外にブラウザがあることを知らない人も多い
>>599 そうそう。そういう人をターゲットにせざるを得ない仕事って多いしね。
確かに困るけど、現状を見つめないとビジネスは回せない。
そこが数前に問題になった部分なんだな。
MSは独自企画のIEでもIEユーザーが多いので、そのうち他のブラウザーも
IE企画に参入してくるだろうと、にらんでいるのだろうが、
現実はIE離れしていってることに気づいていない情けない会社。
そう。それがMS
一度画面を切り替え(タブを切り替えるか、一度最小化して戻すかなど)ないと
ボックスの枠(破線)が表示されないんですが、ブラウザとかのバグですか?
それともなにかのミスですか?
.main{
position:absolute;
top:82px;
width:100%;
height:450px;
z-index:0;
clear:both;
border-top:dashed;
border-bottom:dashed;
border-width:1px;
border-color:#ffffff;
background-image:url("
http://sound.jp/aroe/img/purin.gif");
background-repeat:no-repeat;
background-position:right bottom;
background-color:white;
}
こんな感じです。必要なら全部出します。
XP、Donut P(IE6.0)です。
しまった…そのままコピペしちった…
うわぁ・・・痛いサイトですね
140 名前:削除白河さやか ★ [sage] 投稿日:04/08/01 23:41 ID:???
>>137=139さん
8. URL表記・リンクのどれに該当するのでしょう?
大まかな項目だけじゃなくて、その下にある項目まで引用してくださいね。
例えば、エロ画像リンクとか宣伝とか。
どの項目にも該当しないのでしたら、削除対象外ですよー。
http://sound.jp/aroe/ を HTML4.01 Transitional としてチェックしました。
99個のエラーがありました。このHTMLは -154点です。タグが 17種類 93組使われています。
文字コードは Shift JIS のようです。
>>603 ボーダーが消えるのは確かIEのバグ。まあおまいの場合は本当にIEのバグで消えてるのかしらんがな。ゴミソース書くやつがわるい。
とりあえず
IE ボーダー 消える
とかでぐぐれ。確かfloat,position:relative辺りが関係して条件がそろうと消える。
611 :
Name_Not_Found:04/08/02 11:31 ID:DdlVqNDs
IE 6.0 です.
CSS で
body{
background-color: #000000;
line-height: 160%;
margin: 1.0em 10% 1.0em 10%;
}
のように書いて適用しても効果がありません.
p, h1, h2 table の要素はちゃんと効果があります.
body だけなぜかまったくきかないんです.
IE のバグってこともなさそうだし…
何か心あたりがある人はいますか?
612 :
Name_Not_Found:04/08/02 12:09 ID:sbLql6FY
>>611 html{
background-color: #fff;
}
こういうことかな。
613 :
612:04/08/02 12:09 ID:???
上げちゃった...。すみません。
>>612 htmlにはスタイル指定するべきではないと思うが。
まぁともかく基本的にbodyの背景は窓全体に塗られるから
924 名前: Name_Not_Found [sage] 投稿日: 04/08/01 21:14 ID:???
>>919 ieで見た限り <em class="n">高知県中村市</em>
これはロボットでスパムと認定されるよ。
HP評価スレッドにてこのような書き込みを見つけました。
依頼者ではないのですが、この理由を教えていただきたいです。
class名はどのようにつけるのが正しいのでしょうか?
スレ違いすまそ。書かずにいられなかったんで。スルーしてください
自分の好きなように付けるのが正しいです
619 :
616:04/08/02 17:00 ID:???
>>617は私ではないです。
>>618 それでいいんでしょうかねぇ…
何あちらこちらでいろいろ言われているのを目にするのですが。
このスレに書いてあることは一部フィクションです。<em>ご利用は自己責任で。</em>
em{
color: #ff0000;
font-style: normal;
}
これでスパムなら、世の中のem要素使っているドキュメントの半分くらいはスパムだ罠。
そうですか
>>616 書かれたサイトを見たのかい?
emで太字強調表示している部分と <em class="n">で消してる部分がある。
これは明らかにロボット対策。現行ではスパムと判断されてるんじゃない?
624 :
Name_Not_Found:04/08/02 20:56 ID:1snsXnyt
<INPUT type=TEXT>の入力窓の大きさを指定したいんだけど
INPUT {width:130}
のように指定するとボタンからなにから全部変わってしまうので
どうしたらいいでしょうか
今はclass=textなどと付加して一時しのぎしてますが
>624
input[type="text"]{
width:130em
}
IEとかシラネーヨ
IE6をムシしないでくれ〜
expressionでも使っとけ
IEなんてのはweb制作の足枷だからな。
IEがなければweb制作者はもっと幅広いデザインが出来るのに。
IE無くなってほしい。と言うか。MSはまともにブラウザー作れないのか?
せめてIEのシェアが3%程度だったらなあ・・
>>621 頭の悪さを晒すのも程々に。
冗談は顔だけに。
Web製作はMacが常識だっつーのwwww
>>631 それは我々商業制作者だけの話だよ。
この板の多くの人たちは一般の人なので。
ね。
Macで作ってwinで見ると、色文字画像のレンダリングの汚さにげっそり、するからね。
企業のページでテキストの部分を画像で作ってるサイトが多いが。
あれは、制作者の意図したデザインにwinでは見えないのでやむなしに画像にしてる。
winももう少し見た目にも気を使わないとな。
しかしwinは文字は汚いはウイルス満タンだは、いいところが1つもないですな。
>>614 htmlに指定しないと、スクロールバーとかきちんと反映されないはず。
635 :
632:04/08/02 23:16 ID:???
>>633 漏れもマクをベースに作業してはいるが、
そのようなキモイ発言は慎んだ方が良いと思う。
荒れる前に次の質問ドゾー
>>623 スパム判定されないだろ。ロボはCSSを読まないんだから、EMの羅列には反応するが
EMにどんなクラス名があっても関係ない。
フォントサイズ固定の文字のサイズ固定を解除するだけのCSSってできますでしょうか
野原の松の林の陰の…
クサムラの中で、ハァハァした。
>>636 そのサイトまさに >EMの羅列 で、class="n"を使って見た目を制御している。
まぁCSSは見た目を制御するものだからな
IE糞だと言わずに、
IEで表示できるなら他でも大丈夫という認識がよいのでは?
よーし、パパこれから"@i"で済ますぞー
寝る!!
645 :
Name_Not_Found:04/08/03 09:55 ID:R8JeaIZZ
番号つきリストにCSSで横幅設定したときに、
それまで1.2.3.〜となっていたものが
1.あいうえお
1.かきくけこ
さしすせそ
1.たちつてと
(以下略・・・)
となるのはなぜ?
また、リストの中で改行していたときに
1.かきくけこ
さしすせそ
であったものが
かきくけこ
1.さしすせそ
になっていることもあるのですが、
どちらかでも修正方法かヒントをいただければ嬉しいです。
646 :
645:04/08/03 10:07 ID:R8JeaIZZ
ちなみに以下のような設定です。
OLなどに幅を設定するなどもためしてしてみましたが、
数字やリストマークが消えてしまうなど芳しい成果は得られませんでした。
LI{
width : 600px;
list-style-type : decimal;
list-style-position : inside;
}
BODYの幅設定が効かないのでLIに幅をつけようとしたのが
きっかけなのですが、いちおうDIVで囲んでやり過ごしています。
ほかに適切な方法はないものでしょうか?
>>642 IEでもちゃんと表示できるようにはしてまつが
IEが糞だという認識は変わりようがありませんでつ
世界のほとんどのPCはwindowsだっつーのにMacでWeb作ってデザイナー気取りの奴がアホ
でつまつ口調のヤツに何言われても説得力がねぇんだよな
元々頭の悪い奴なんだよ。
でつでつw
>>633 基地外マカーはウイルス作者に相手にされなくて、嫉妬してるんですね。
基地外マカーはそのユーザー数が少なくて、馬鹿高い金を払って購入するのに、
ウィンドウズは安価なハードウェアがあるのを嫉妬してるんですね。
基地外マカーはアップルコンピューターに吸い取られているのに、憤慨してるんですね。
(windowsも高いけどな。けど、ハードウェアが安いから問題ない。)
基地外マカーはデザイナーに多いと聞くけど、まさしく基地外ばかりですね。
基地外マカーはデザイナーに多いと聞くけど、基地外だからマカーなんですね。
基地外で悪いか?
悪い
>>653 マカーがうらやましーんですね。
自信があるならもっとゆったりしてろよ。
マック使いたくてしょうがないから無理なんだろーけど。
657 :
Name_Not_Found:04/08/03 14:52 ID:9xSM0saA
質問です。
CSS部:
div.section { position: relative; left; 5%; width: 90%;}
div.sub_section1 { position; relative; width: 60%;}
div.sub_section2 { position; relative left; 60%; width; 40%;}
HTML部:
<body>
<div id="section">
<div id="sub_section1">
〜〜〜
</div>
<div id="sub_section2">
〜〜〜
</div>
<div>
</body>
とした場合、IE6では、
sub_section1,2の幅はsectionに対しての60%,40%になり、
sectionを6:4にきれいに分割したレイアウトになるのですが、
Mozilla1.7(Mozilla系全部?)では、
sub_section1,2の幅はbodyに対しての60%,40%になり(?)、
sub_section1,2がsection内で重なり合ってしまいます。
どのようにCSSを記述すれば、Mozilla系でもIE6の様表示できるんでしょうか?
個人的には幅をピクセル等で絶対指定をするのは避けたいのですが・・・。
658 :
Name_Not_Found:04/08/03 14:54 ID:9xSM0saA
スミマセン訂正です。
CSS部:
#section { position: relative; left; 5%; width: 90%;}
#sub_section1 { position; relative; width: 60%;}
#sub_section2 { position; relative left; 60%; width; 40%;}
HTML部:
<body>
<div id="section">
<div id="sub_section1">
〜〜〜
</div>
<div id="sub_section2">
〜〜〜
</div>
</div>
</body>
です。
659 :
Name_Not_Found:04/08/03 15:15 ID:ZEWKngaz
質問です
リンクテキストの下線を消したのですが、hoverの時だけ下線をあらわすように
するにはどうすればよいのでしょうか?お願いいたします。
660 :
Name_Not_Found:04/08/03 15:18 ID:9xSM0saA
>>659 a:hover {text-decoration:underline;}
これで出来ます。
>>660 ありがとうございました。勉強はじめたばかりです。難しいけどがんばります。
って言うか次からは>1読んでから質問してください
663 :
657:04/08/03 15:47 ID:???
原因がわかりました。
どうやらIE6では、ブロック要素の幅はwidth指定値がそのまま適用されるのに対し、
Mozilla系では、ブロック要素の幅はwidth指定値+padding-left値+padding-right値+(他?)となっていた事が
原因だったようです。(既出?)
まぁ原因がわかった所で対策は思いつかないんですが_no
何かいい方法はないでしょうか・・・?
超既出。
FAQの一番初めに書いてある。
あ〜あ 鼻高々だったのに・・・・
666 :
657:04/08/03 15:59 ID:???
・・・ですね_no
とりあえずFAQ熟読してきます。
ご迷惑おかけしました。
お前らは自分が井の中の蛙ってことを自覚してないよな
うん。自覚してない。
乞うご指導
body {
border-style:solid;
border-width:130px;
border-color:#??????
}
のborder部分に画像を表示したいのです。
何かよい方法は無いでしょうか。
さらに欲を言えば枠内側をラインで縁取りしたいのです。
おとなしくTBタグ使っとけって感じですか?
670 :
645、646:04/08/03 17:39 ID:R8JeaIZZ
>>647様
教えていただいたdisplay:list-item;とvertical-align: top;で
数字と位置の問題は両方解決しました。本当にありがとうございます。
教えていただいたサイトをじっくり読んで精進いたします。
上記タグのない状態でOLとULに幅を設定した場合ですが、
OLにした場合はリスト自体が視認できなくなり(リストマークが消滅)
ULにした場合は、数字の位置は戻るものの、幅の設定も効きませんでした。
LIの場合は前述のとおり、リストマークが1.1.1.になりその段落の最下行に移動してしまいます。
これまではDIVに幅設定をしてやり過ごしていましたが、
教えていただいたCSSのおかげでこれからは快適にレイアウトできそうです♪
671 :
645、646、670:04/08/03 17:52 ID:R8JeaIZZ
ちなみにDIVは取っ払って、
display:list-item;もCSSのLI項目に追加しました。
>>669 borderに画像は指定できない。
入れ子ボックスの外側ブロックにbackground-imageを指定した上で
paddingを細く取って、borderのごとく見せかけるとか。
>>671 >display:list-item;もCSSのLI項目に追加しました。
無意味なことしなさんな。
li要素は、指定しなくてももともとlist-itemだっての。
でつ ←スヌーピー
IEなどでは、手打ちな人々の利便の為に
trueをt、falseをfと略記できる仕様なのは有名な話。
@iも@mも、同様に手打ちな人々のための略記法として用意された。
つまり、これはバグなどではなく仕様。
バグだ!と得意げに大はしゃぎしてる香具師はアホ丸出し。
>676
それはすごいねよかったよかった
>>676 そんなの知らなかった。
しかし知ったところでIE以外の互換性を無くしてしまう罠
ものすごい糞仕様じゃん、それって。エラーになるべき
ものはエラーにしないと。
それはどうかな。
まあ使う際には独自仕様だという事を念頭におけばいい。
利便性のためとかいっても、独自仕様だとかなんとか、
そういう余計なことをおぼえなければならないことを思うとぜんぜん利便性なし。
属性値のダブルクォートや、終了タグの省略についてもしかり。
682 :
624:04/08/04 09:46 ID:TWW/N2Gy
>>625 ありがとうございます。 でも、IEでは使えませんでした。
これはIE以外のブラウザでの方言ですか?
>>682 > これはIE以外のブラウザでの方言ですか?
逆逆。IEが標準語を知らんのだ。
そうタイ、方言タイ!
IE ≒ どこに行っても関西弁でしゃべりまくる関西人
ということでよろしいか?
>>685 IE ≒ 東京で使っている言葉が標準語と勘違いしている香具師
の方が、近くね?
>>685 それだと他のブラウザが郷土愛のない薄っぺらなものみたいに聞こえるじゃないか。
IE準拠でサイト作ってる香具師 = 東京で使っている言葉が標準語と勘違いしている香具師
∩( ´Α`)< 先生、質問です。
display要素って、色々ありますが、いったいどんな時に使えばいいんでしょうか。
W3C信者 ≒ 東京で使っている言葉が標準語と勘違いしている香具師
692 :
689:04/08/04 10:45 ID:???
>>691 す・・・・すげぇ!!!まさかそんなに便利なものだったなんて・・・・
それを知らずに今まで来ていた自分がはずかしいです orz
>689
display要素ってなんですか?
>690
お前だけ例えがおかしい。
694 :
689:04/08/04 10:47 ID:???
>>693 信者キタ━━━━━━(゚∀゚)━━━━━━!!!!
>>695=
>>690 いやいや落ち着きたまいよ
「ブラウザ」の話をしてるのに、「ブラウザ」側を書き換えた例えを出すのはどう考えてもイカレてるでしょ。
釣られてますよ
menuを|A|B|C|D|E| という風に<ul><li>で表示したいと思うんですけど、
ねこめしにっきのサイトがマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
>698
何故そこでありみか氏のサイトを引っ張ってきて貶すのかよくわからんが
li{
display:inline
}
とでもしとけ
701 :
698:04/08/04 11:37 ID:???
702 :
701:04/08/04 11:39 ID:???
つーか、俺が激しく池沼だったわけだが。orz
float+display:inlineだろーがと。スレ汚しすんません。
なんでこう馬鹿ばっかりなんだろうなぁ・・・
おまえもなーは聞き飽きたぞ。
>702
displayを使った上でfloatさせる意図がワカラン
浮動してるほうが何かかっこいいじゃん。
山の浮動
>>698 menuを|A|B|C|D|E| という風に<ul><li>で表示する方法はわかるんですけど、
>>698の書き込みがマジ生理的に受け付けられないんで、
どうやればいいのか教えたくないんです。
2時間以上ニラメッコしてマジで吐けばいいのに・・・・アーキモ。
昼飯吉野家の豚丼にしようと思うんですけど、
吉野家の看板のオレンジががマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
>>708に2時間ぐらいレスしようと思うんですけど、
ニラメッコがマジ生理的に受け付けられないんで、
オレンジががの「が」が一個多いので吐き気してきた・・・・アーキモ。
うわ! アホのスクツだ。
オナニーしようと思うんですけど、
余った皮がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
アホのスクツだ。を|アホ|のス|クツ|だ。|という風に<ul><li>で表示したいと思うんですけど、
うわ!がマジ生理的に受け付けられないんで、
どうやればいいのか教えていただけないでしょうか。
2時間ぐらいニラメッコしてて吐き気してきた・・・・アーキモ。
夏場に食べるアンキモはまずいね。
次の質問ドゾー
714 :
624:04/08/04 16:17 ID:???
結局、どうしようもないということですか?
IEのシェアは95%ほどと聞いたので
IEでなんとしてもうまくやりたかったのですが
>714
IEでやりたきゃclass指定してやるしかない
>>624 みんながそんなことばっか言ってるから、
いつまで経っても間違った言葉でしゃべらなければイカンくなる。
あなたも、まず、うぃんどうずとIEを離れてみまそー。
少しずつでもただしーほうへ変えるために。
ただしー言葉を礼儀正しくしゃべれるなら、べつにうぃんどうずとIEでもいーんじゃけどね。
まーおいらは使わんけどね。でんでん美しくないんで。
んぢゃ。
717 :
Name_Not_Found:04/08/04 17:36 ID:7LH4X0ph
くだらない質問で申し訳ないのですが、<p></p>と次の<p></p>の間にデフォルトで
シングルスペース(1行空行)が入るのですが、これを<br>と同じように、<p>内の
行間と同じだけの間隔に段落間を設定するには、どんなCSSの記述にすればよいの
でしょうか?
719 :
Name_Not_Found:04/08/04 17:57 ID:7LH4X0ph
>>718 おぉぉぉ、うまくいきました。ありがとう。
あれだけ悩んだのに。。。。盲点でした。
720 :
669:04/08/04 17:59 ID:???
遅くなりましたが
>>672よ、どうもありがとう
入れ子を食わず嫌いしてたけど初体験してみますよ
>>717 ブラウザのデフォルトスタイルはできるだけ殺しておいたほうが楽だよ。
* {
margin: 0; padding: 0;
}
といった感じ。font-sizeやfont-weightなんかもやったほうがいいかも。
722 :
Name_Not_Found:04/08/04 18:51 ID:Okgem90F
3カラムレイアウトでそれぞれのカラムの高さを
カラムの中で一番高いカラムの高さに合わせたい
のですがどのようにすれば良いのでしょうか。
3つのカラムの高さを常に同じにしておきたいのです。
フロートで1カラムずつ回り込ませるだけで同じ高さになると思よ。
724 :
722:04/08/04 19:42 ID:???
ああ、そういうことか。
それはカラムにheightを設定してやればいいよ。
でも個人的にブログなんかのマルチカラムってそういう凸凹が普通だと思うけどね。
726 :
722:04/08/04 19:54 ID:???
即レス感謝します。
blogって見抜かれてしまった!
カラム全体をdivでくくって各カラムのheightを
100%などと指定しているんですけどダメでした。
px以外に指定する値ってありますか?
>>722 カラム全体をくくっているdivに背景を設定するとか。
そうすれば各カラムの高さは追従しなくとも、
見た目上、各カラムは一番長いカラムに追従するよ。
728 :
Name_Not_Found:04/08/04 20:01 ID:WddoE1l4
729 :
722:04/08/04 20:10 ID:???
>>727 むむむ。その方法だと
>>724のサイトみたいな
各カラムの背景色が違う場合はダメですよね。
難しい…。
blogだし凹凸は諦めます。回答ありがとうございました。
731 :
722:04/08/04 20:34 ID:???
ほ、ほんとだ。
サイトごと保存できないみたいですが
がんばって参考にしたいと思います。
ありがとうございました。
732 :
Name_Not_Found:04/08/04 23:51 ID:s1VupOMl
ボディとテーブル内で、font-sizeはどっちも80%にしたんですが、
テーブル内の文字のほうが、明らかにボディ内の文字より小さくなります。
これって普通なんでしょうか?
<!--
body{
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
table{
font-family : "MS Gothic";
font-size : 80%;
line-height : 130%;
}
-->
>>732 テーブルはbodyの中にあるので、
80%で縮小された文字サイズがさらに80%縮小されている。
よって、テーブル内の文字の方が小さくなるのは当然。
ptで指定すれば?
>>732 body,td {
font-family : "MS Gothic"
font-size : 80%;
line-height : 130%;
}
とまとめたほうがよろしいのではないのでしょうか。。
>735
なんでもまとめればいいというわけではない
ここで問題となっているfont-sizeの継承が解決しない
回答者ALLアホ!
font-size : 100%; なら何の問題もない。
80%の必要性を再考しる。
俺は90%でも目がしょぼしょぼする…
しかしアレだな・・・。
「HPのテンプレート」なんかを配布・紹介してるサイトは沢山あるけど、
ほとんどはtableガチガチのレイアウトなんだな〜。
日記帳に書け
742 :
兄さん一寸:04/08/05 12:51 ID:DpBsvqzp
あの、CSSを吐き出してくれるツールって何かいいのがあるんでしょうか?
HPを作り始めたら、FONTだとかのタグは使ってはいけないとかいろいろ
書いてあって、どうも最新のHPはCSSかなとおもっていたら、XMLと
いうのがあるらしい。そこで VISUAL Studio のXMLデザイナーの
チュートリアルを色々ためしてみましたが、HP作成というよりデータ構造の
構築のような感じで、HPにするにはどうしたらいいのかわからん。
スキーマをクリックしても色選択なんて出てこんし、どうやって色つけたり
影つけたりするのか?
データ構造のテーブルなんかどうでもいいから、普通にHPをスタイルシート
使って書きたいのだが、皆さん、まさかテキストエディターで作っておれれるの
でしょうか?
XML+CSS的ホームページ作成ツールってあるのでしょうか?
どう考えてもおめえさんにぁ無理ずら。
HPBでやってつかぁさい。
>>742 HTMLはHTML
CSSはCSS
全く別のものを一つのページとして考えるのはおかしい。
別のものなんだから抱き合わせでソース吐かせるのもヘン。
…と俺は思うんだけどどうよ?頭固いな。
>>742 XMLじゃなくて
HTMLは4で、開発終了。
今後はXHTMLとして開発が進んでます。
XHTMLはXMLの応用規格の一つです。
748 :
兄さん一寸:04/08/05 19:21 ID:DpBsvqzp
>ネタはやめてください。
ちゃう
>スタイルはXLSを使う。
おれの本にはCSSと書いてある。まあスタイルシートってことだ。
>どう考えてもおめえさんにぁ無理ずら。
>HPBでやってつかぁさい。
んにゃ。
749 :
兄さん一寸:04/08/05 19:22 ID:DpBsvqzp
>全く別のものを一つのページとして考えるのはおかしい。
>別のものなんだから抱き合わせでソース吐かせるのもヘン。
たとえば
目次
CCSの自動生成方法1
CCSの自動生成方法2
CCSの自動生成方法3
CCSの自動生成方法4
これをだよ。
目次をハイライトしてクリックしたら属性の選択画面がでて
色、だとか フォントサイズだとか、■で囲むだとか
が選択できて、チョンチョンと選択するだけでたちまちのうちに
■目次■
1)CCSの自動生成方法1
2)CCSの自動生成方法2
3)CCSの自動生成方法3
4)CCSの自動生成方法4
こういう画面にかわる。でそのときの、スタイルをスタイルシートに登録
していく。まあこういうツールがほしい。
ネタはやめてください。
Lunarのことか?
753 :
兄さん一寸:04/08/05 19:40 ID:DpBsvqzp
>今後はXHTMLとして開発が進んでます。
>XHTMLはXMLの応用規格の一つです。
それがよくわからんのですが、高橋麻奈の「やさしいXML」という本があって
その中に、
「
XSLはXSLTとXSLFOからなり
XSLTはデータを取り出す仕様で
XSLFOは書式情報を与える仕様だが未定で現在はCSSをXLFOの代わりに使う。
」
と書いてあります。2001年出版の本ですが。
ということは、XML文書とCSSがあれば、XHTMLになり、少なくとも表示だけは
厳密にできるわけですね。
ネタはやめてください。
755 :
兄さん一寸:04/08/05 19:42 ID:DpBsvqzp
Lunarでできるのですか? ちょいと調べてみます。
貴男、素敵よ。
757 :
兄さん一寸:04/08/05 19:52 ID:DpBsvqzp
>7523
多分これです。厳密に評価するには2,3日かもっとかかりそうですので
まず前もって御礼申し上げます。
>>749 その程度ならツールなんか使わずにいくらでもできるわけだが、
あえてツールが欲しいというのならもっと高度なことがしたいんだろうな。
次の降臨をイヤーな顔してお待ちしております。使い勝手も聞かせてね。
XMLとか言ってた割には、かわいいツールが欲しかったのね。
>>753 惜しい。
XML で本文構造を作って置いて、XSLT を通して、
xhtml + css を吐くために XSL が、めそ…
みんなあんまり冷たくすんなよ。
タコは大事にしろって先輩から教わったでしょ?
食っても良いって教わった。
ちんぽ丸出しだな
言いかけで終わるのも…まあもう来なそうだけど。
764 :
兄さん一寸:04/08/05 21:43 ID:DpBsvqzp
うなさんのカエルのイラストが凄いんで見とれてました。ですので
評価まだです。
>XML で本文構造を作って置いて、XSLT を通して、
>xhtml + css を吐くために XSL が、めそ…
タコたらふく食って、この続きおながいします。どうぞ。
めそ...
765 :
兄さん一寸:04/08/05 21:58 ID:DpBsvqzp
>XMLとか言ってた割には、かわいいツールが欲しかったのね。
いやXMLとスキーマはVS使うと簡単に作れます。Accsessや
モデラーみたいにVisualなリレーションをドラッグドロップすると
自動的に出来上がります。
出来上がったものをどう使うかはまた別問題で、そこのところがわからん。
スレ違いの希ガス
めそ…
はい次どぞ〜
このコテハン、どっかで見たなぁと思ったらレン鯖で「レンタルサーバー契約したんだからプロバイダ解約してもいいよね」
など言い出しえらい粘着したやつだったな
どこ行っても的外れなこと言って粘着してるんだな・・・
>>769 それはどこのスレ?かなり見たいな
解約してもいいよと言って本当に解約させたかったなw
771 :
Name_Not_Found:04/08/06 09:51 ID:OYXZASq5
background-imageを閲覧者側のブラウザのサイズに自動的に合わせるにはどうしたら良いのでしょうか?
例えば□←このくらいの画像とかを無理に引き伸ばしてブラウザサイズにする方法です。お願いします。
っと、ageてしまいました、すみません;
めそって何さーーー!
はよせな
>>771 その画像見られたもんじゃなくなるけど、それでいいの?
>>771 少なくとも、 CSS では無理かと。
繰り返しはありますが、拡大縮小は……。
>771
あきらめれ
だけではなんなので、代案
繰り返しても繋ぎ目が不自然でないような画像を作って、繰り返して表示
>>775 はい、それでもOKです。ただそう言うことが出来るのであれば、やり方が知りたいだけです。
jsとcgiをゴニョゴニョすれば出来そう。
1x1の赤青チカチカのgifを引き伸ばすつもりだったりして。
784 :
760:04/08/06 13:47 ID:???
>>761-770 くらい
誤解されやすい書き方だったかも。
タコっていうのは貶める言葉ではなくて、SE系用語で、
技術力はまだ乏しいけどそれを埋めるべく日夜努力するもの、
を指す言葉です。
タコはときに、頭の凝り固まった識者では発想できないような
何かを創り出してしまうことがあるので大事にしたほうがよい、という話。
最近はそんなこと言わないのかな… orz
>>784 わかってるやつは流し、カン違いしたやつがレスしただけだ。気にするな。
業界用語なんざ知りたくもねー。
"業界用語" はとある業界で造られた業界用語だ。気を付けろ。
a:hover {
border:solid 1 #ffffff;
}
とした時、マウスオーバーすると
リンク文などが微妙に
ぴょこっとずれますが
この動きを封じることはできますか?
>>788 aそのものに透明のボーダーをつけておく。
最初なかったものが現れるからずれるんだ。
>この動きを封じる
すげえ表現だな。
長井さんですか
794 :
788:04/08/06 14:40 ID:???
>>789 なるほど!
それで行ってみます
どうもありがとうございました
ねーねー、秋まで板を閉鎖しない?
見なけりゃ良いんだろうけど、過去ログ読むにも邪魔だし。
みなさん、残念な事しましたね。
769の言うスレを見たのですが、
あのコテハンの方は、例の「LANボードをつけたいが・・・」の方ではないかと、
ふと思いました。
うまく引っ張る事ができれば、あの「LANボードをつけたいが・・・」スレ以来の
見る人、書く人、みんなが微笑む、楽しいスレにできたかも知れないのに......。
>>771 どうしても引き伸ばしたいならCSSでも可能。
ただ background じゃなくて単純に img を下に表示するだけ。
使ってるとこ見たこと無いけど。
liはこういう要素に使う、dtはこういう要素に使う、など
体系的に学べる本かサイトないですか?Pやtable位はわかるんですけど。
英語の仕様書は解読する頃には定年迎えそうなのでjpな方向でお願いします。
>>800 まず国語から勉強し直してください。
そしてここはcss質問スレです。
>>800 いい歳して書店へ行って本を選ぶ事ができないあなたには、
日本語で書かれた情報でも、定年までの残り半年では、無理。
804 :
800:04/08/07 01:35 ID:???
書き方悪すぎたようで申し訳ない。どうか平に。
最近構造とデザインを分離するって流れで、犬も杓子もCSSじゃないですか。
で、勉強を進めるにつれてCSSって深いなぁと感激する訳ですが
色々と人様のソースを眺めていると、なんでもリストにいれたり
内容とタグが必ずしも一致してない人が多い、と感じるのです。
#divタグ地獄だったり(これは問題外ですが)
で、Pであればパラグラフを入れる、h*タグなら見出しを書くなど
わかりやすいものは良いのですが、
例えば「定義リストって普通のリストとどう違いがあるのかしら?」
「俺は本当にこのタグで囲って良いのか?」など思う今日この頃なのです。
こういうのはCSS本格的にやる上で必須の知識ですよね。
タグの持つ意味を理解した上で構造を書いてCSSでデザインを行っている
このスレなら、いい話が聞けるかなと思ったんです。
俺はこの本読んだよとか、W3C逝けバカ、とか暖かいお言葉を期待したんです。
が、、、よく考えたらHTMLスレ池だよね。(´・ω・`) ヌルーしてください。
キリ番げっとシテタワー*・*:.。.:*・(n‘∀‘)η゚・*:.。..*・*
>>804 もう一度言います。
「まず国語から勉強し直してください。 」
多分、あなたはHTMLをちょっとだけかじっていい気分になってるだけなのだと思いますが、
それじゃあいけません。自己主張などせずにコツコツと勉強してください。
色々な意味で痛すぎる。
>>804はスレ違いだが何を言わんとするかはわかる。
中身のない
>>805のレスの方が痛い気がする。
相変わらずこのスレは馬鹿を集めてるんだな
誘蛾灯みたいな作用があるんだろな
HTMLの仕様書和訳すら見つけられないアフォと
そこへ一発で誘導できないアフォ
>>807 そしてアナタもここに集められたうちの一人。
ヲレモナー( ´∀`)
>>800 書籍読むよりこの板の初心者スレやそこのリンク先見ればいいよ。
タグの使い方はちゃんと構造が正しければ自由。というのがタグ自体が少ない。
階層構造を表現することも出来ないし(それでパンクズもめてるし)、これにはこれ!
という一問一答は必ずしも期待できないはず。
マニアックな話を聞きたいならストリクトHTMLスレでも覗くといいかもしれないけど、
頭でっかちな話になるから好きにするといいかも
>>809 >階層構造を表現することも出来ないし(それでパンクズもめてるし)、
何言ってんの?
パンクズはやり方が色々あるだけで、階層構造が表現できないからもめてるわけではない。
っていうか仕様書読めよ
811<<
できればJavaScriptの知識もほしいところだな
次!↓
divやpreなどのブロック要素でボーダーをつけると
中身の行が短くてもボーダーの右端はページの右端までいってしまいますが
これをちょうど中身に合わせた大きさで収めるようにできるでしょうか?
(widthに値を設定するのでなしに)
margin-right: auto;
とか試してみても全然うまくいきません。
変えても問題ないなら
*** {
display : inline;
border : 云々;
}
ブロック要素である以上、枠線が右端まで行くのは仕方ないかと。
って俺なんかヘンなこと言ってる?エロイ人補足キボンヌ↓
817 :
Name_Not_Found:04/08/07 17:48 ID:M+4TxP/c
>>7に書いてある背景画像を2つ指定する方法についてですが、
1要素につき1つだけということは、1ページにつき1つということでしょうか?
要素を重ねるとありますが、この方法を具体的に教えていただけないでしょうか?
>>817 >1要素につき1つだけということは、1ページにつき1つということでしょうか?
ちゃう。要素とはBODYとかDIVとか。
BODYとDIVそれぞれに背景指定汁。
820 :
Name_Not_Found:04/08/07 20:30 ID:b/RTR9I0
811は811のちょっと前で質問してたアフォが暴れたのか?
アーキモ
トラウマなるからグロとか見ないほうがいいよ
日々の生活でなれたので別になんとも思わない。
皆さんあと一ヶ月の辛抱ですよ
811の画像は、精神的につらいだけでPC的には安全だよね?
最近画像から感染するウイルスが流行ってるから怖いね。一応ウイルスバスター使ってるけど。
>825
そんなビビらんでもw
俺は811の画像で癒されたけどなあ
現在、テーブルタグでレイアウトしているサイトのデザインを
CSSだけできちんとデザインしなおそうと考えています。
超初心者な質問かもしれませんが、
UL、LIタグでリスト表示させた時の、字下げの幅を変更したいのですが、
この幅を任意の幅に設定するにはどうすればいいのでしょうか?
hoge
・hoge01
・hoge02
・hoge03
↑
ここの幅
marginで±の値を指定することで、相対的に調整する事はできるのですが、
この幅を仮に20pxなら、20pxぴったりに指定する方法が、どうしてもわかりません。
どうか、よろしくお願いします。
829 :
828:04/08/08 22:43 ID:???
なんか、矢印の位置がずれてしまった…
黒丸の前の字下げの幅を変えたいということです。
ブラウザのデフォルトスタイルシート
http://is.vis.ne.jp/notes/browser/default_style.xhtml /*
* Internet Explorer 6.0,
* Internet Explorer 5.5,
* Internet Explorer 5.0,
* Opera 7.2
*/
ol, ul {margin-left: 40px;}
/*
* Internet Explorer for Mac 5.2
*/
ol, ul {margin-left: 2.5em;}
/*
* Mozilla 1.6,
* Netscape 7.1,
* Netscape 6.2,
* Safari 1.2,
* OmniWeb 4.5
*/
ol, ul {padding-left: 40px;}
/*
* Opera 6.0
*/
ol, ul {margin-left: 40px;}
li {margin: 5px 0;}
>>828 何が言いたいのかよくわからんが
・と本文の間をいじりたいのならpadding
>>828 ←20px→ ・ hoge
←20px→ ・ hage
←20px→ ・ hige
こんな感じで 20px 空けるのか、
・ ←20px→ hoge
・ ←20px→ hage
・ ←20px→ hige
この様に 20px 空けるのかがいまいち。
前者なら margin : * * * 20px ;
後者なら padding : * * * 20px ;
で良いと思います……どうも、質問に対する解釈を間違えている気はしますが。
被ってしまった…… _| ̄|○
834 :
828:04/08/08 23:01 ID:???
>>830 ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 20px;
padding-left: 0px;
}
と指定することで、意図した用に指定できました、有難うございます。
>>831 説明が下手ですいませんでした。
>>832 前者のようにしたかったのでした。
説明下手ですいませんでした。
>>834 ul {
margin-left: 0;
padding-left: 20px;
}
だけで済むはず。li要素への指定は不要。
もしくは
ul {
margin-left: 20px;
padding-left: 0;
}
でもよい。
|■▲▼ | ←こういうのを
|■ ▲▼| ←こういう風にしたいんですが
どうしたらいけますか?
<SPAN>で右寄せしたらできると思ったんですが、
ブロック要素でしかtext-alignは使えないみたいだし
<div>つかうと前後に改行入って見てくれが悪いし・・・
あれ?floatって画像用じゃなかったでしたっけ?
どんなボケだよ。
スミマセン
どっかにそんな事が書いてあった記憶があったので・・・
ありがとうございました。
>>840 つまり、
■
だけのブロックレベルと、
▲▼
だけのブロックレベルにわけて、
それをfloatってわけだ。
>>843 まわりこませるわけだから、
<div style="float:right;">▲▼</div><div>■</div>
って、書けばいいんですよね?
>>844 それでもいいんだが、それだと「CSSを適応するためだけに無理矢理書いた文書」だよな。
そんなやり方するくらいならテーブル使うといい。
なぜ、■が左にあって(左にある理由じゃなくて、■が独立してる理由ね)、
▲▼が右にある、という形になるのか、って考えていくと、それぞれが「どういうブロックレベル要素」でマーク付けすべきか見えてくると思うが。
余談が長すぎたな。すまん。
>>844 ああ、あとfloatにはwidthつけとけよー
絶対配置でも使っとけ
HPBがおすすめだい。
初めてスタイルシートでサイト作ってみたんだが、どこもかしこもdivとspanで房になっちまった。
しかも、サイトの構成で両端背景で真ん中650pxのとこにコンテンツが表示されるようにしたくて、
一番外回りをこんな風に書いて括ったんだが、表示してみたらIEとNCで横幅が違うんだ。どうしてだかワカンネ
しかもど真ん中に表示する方法が分からず左から座標指定してるんだが、真ん中表示の方法ってあるのか?
教えてチャンで申し訳ない。どうか教えてくれ
div.in { position:relative;
width:650px;
left:50px;
margin:0;
padding:0 10px;
background-color:#ffffff;}
alignをセンターに
853 :
851:04/08/09 19:23 ID:???
854 :
849:04/08/09 19:40 ID:???
>>850-853 thx!FAQに載ってるような事聞いてスマソ
もうちょっと詳しくなるよう出直してくる
align センターってすごい初歩だよな
テーブルレイアウトんときから使ってたからすっかり頭から抜けていた
FAQってなんて読むの?
ファッキュー?
口に出すときは「えふえーきゅー」だが
意味は「何回も同じこと聞いてくるんじゃねえファックユー」ってこと
Q&Aは
クエスチョン&アンサーで、
FAQ何の略だ?
ファンタスティック アメイジング クエスト
新作RPG?
全米が泣いた。
>>845 横から見てたんだけど結局どうやるのん?
むしろ>859の親が泣いた
>>862 それぞれ適切にマークアップして、
インラインレベル要素の場合はブロックにしてから、
float 。
865 :
昔の人:04/08/10 12:29 ID:???
864 100叩き
869 :
864:04/08/10 13:02 ID:???
おおおおお。
いままで何の疑いもなく、
display: block;
width: 適宜;
float: left;
とか、コンボで叩いていた。
スマンカッタ。
870 :
862:04/08/10 13:55 ID:???
871 :
864:04/08/10 14:05 ID:???
<tag_1>▲▼</tag_1><tag_2>■</tag_2>
tag_1{
float: left;
width: 適宜;
}
tag_2{
display: block;
text-align: right;
}
でいいんじゃないの?
872 :
862:04/08/10 14:23 ID:???
うむ。久々にちゃんとした流れだったな。
>857
Frequently Answered Questions
Frequency Answer and Question
おまいら脱線しすぎ
>>876 すまん。初心者スレとごっちゃになってた。
878 :
Name_Not_Found:04/08/10 18:02 ID:752XY8RO
>>878 1.IEのバグ
2.
.brdr ol li{border:1px solid #fff;}
>878
そのページ マクのIE5とNetscape7で文字化けするんだが
なんでだろ
UTF-8で書いてあるのにShift_JISが指定されてるからじゃないの?
884 :
882:04/08/10 20:43 ID:???
>883
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
って入れてるから問題ないと思うんだけど、間違ってる?
>>884 ん〜、UTF-8で書いてあるなら、こうじゃないの?
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
887 :
882:04/08/10 20:59 ID:???
>886
すみません。
>他人の金儲けに協力する気はねぇ( ´д`)
いやぁ、bannerだと見る人がうざがるから
テキスト広告にしようと。鯖代だけでも稼ぎたくて・・・
888 :
882:04/08/10 21:09 ID:???
続けて質問してすみません。
#adsense{
position:absolute;
left:620px;
width:240
ってなっているものなのですが、
位置指定を絶対的なものではなくて
相対的なものにするにはどうすればいいのでしょうか?
今のままならブラウザーの大きさを変えても同じところに
表示されるのですが、これをブラウザーの大きさに従って
同じ間隔で縮小拡大するようにしたいです。
よろしくお願いします
>width:240
単位は?
>>889 とりあえずwidthに単位付けれ。まぁ多分コピペミスだろうけど。
ブラウザサイズにあわせるなら%指定。いっぺん相対サイズについて学んで来い