/* CSS・スタイルシート質問スレッド【33】 */
質問です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に単位付けれ。まぁ多分コピペミスだろうけど。
ブラウザサイズにあわせるなら%指定。いっぺん相対サイズについて学んで来い