/* CSS・スタイルシート質問スレッド【57th】*/
1 :
Name_Not_Found :
2006/05/20(土) 14:36:20 ID:L4dAphnx BE:141451968-#
2 :
Name_Not_Found :2006/05/20(土) 14:42:57 ID:1j+htWN9
2げっと
3 :
Name_Not_Found :2006/05/20(土) 23:38:36 ID:xNK03Hqx
>>前スレ 985,988 <img src="./***.gif"> 相対パス云々に関しては、これで正しい。 <img src="***.gif">と同じ意味なのはわかっているのか? <a href="./**/***.jpg"><img src="./***/***.jpg" width="160" height="120"></a>(前スレ 976 より)の どこが「相対パスとしておかしいか」を説明してください。
おかしくないよ。言い出したほうが無知なんだ。 君の勝利だよ。おめでとう。勝てたの久しぶりかな?
5 :
Name_Not_Found :2006/05/21(日) 01:26:38 ID:c/rfpVMy
買ったの負けたのって、 (ノ∀`)アイータタタ
ウワァーン!!ヽ(`Д´)ノ モウコネェヨ-!!
JS使わないで、CSSだけでIEに対応したドロップダウンメニューって作れますか?
>>1 は建てただけで逃げた。
だからテンプレが・・・・
連張り規制で苦労したぜ
ならテンプレ貼り人乙。
>>10 <a>
<a href="x.html">1</a>
<a href="x.html">2</a>
<a href="x.html">3</a>
</a>
a:hover {
display: block
}
a a {
display: none;
}
a:hover a {
display: block;
}
>>3 昨日のアホタレです。_| ̄|○
W3C見てきました。./でもつけなくても同じ意味でした。
嘘教えてすみませんでした。_| ̄|○|||
>>23 従う従わないを決定できるということは、UA作ってんだよね?
すごいじゃん!!
では何を仕様にUA作ってんだ?
広く普及した勧告を仕様とする方が楽なのに、独自に仕様を作ってるのか?
26 :
Name_Not_Found :2006/05/21(日) 18:22:33 ID:0JNe/rFj
BOXの中の画像の位置を変更するにはどうすればいいのでしょうか。 bodyにtext-align:center;を指定していて、BOXにはtext-align:left;を、 画像にはtext-align:right;を指定しているんですが、画像が動いてくれません。。 もう一つ質問なのですが、 親BOXの中に2つのBOXを並列で並べているのですが、 margin-bottomをいくら設定しても、親BOXとの距離が変わらないのです。 どうすればいいのでしょうか。 よろしくお願いします。
>>26 画像をpで囲ってtext-align:right。
後者は「並列で並べている」の意味がわからん。
float:right padding-bottom
29 :
Name_Not_Found :2006/05/21(日) 23:52:13 ID:c/rfpVMy
http://pc8.2ch.net/hp/subback.html たとえば、なんのクラスもidもない、ただの普通のページを、他の普通のページの処
理に影響を与えずにそのページだけにcssを適用させる方法ってありますか?
具体的になにをしたいのかというと、自分用のスタイルシートにて
a {display: block;}
としたいのです。ツール使えば?っていうのは無しの方向でお願いします。
>>29 つBookmarklet
javascript:var t=document.getElementsByTagName('a');for(i=0;i<t.length;i++){void(t[i].style.display='block');}
専ブラを使わない理由は?
今までに3つほど試してみて、どれも便利なのは十分理解できるのだけれど、 馴染めない、としかいいようがないです。 ほら、どうしてもoutlookが嫌いで仕方ない人とか、たまにいるじゃないですか。
33 :
Name_Not_Found :2006/05/22(月) 02:34:13 ID:drhO5idk
>>29 よく解りませんが、そのページだけ必要なcssを呼び込めばいいのでは。
>>32 ,29
>>33 の言う通り、ユーザースタイルシート作って必要なページで読み込めばいいんだが、
IEデフォだと切り替えがワンタッチで出来ないと。
FX使えと言いたいが、専プラ同様イヤなのかね?
どっちにしろスレ違い。PC板行ってくれ。
直球どまんなかでcssの話してるのにスレ違いだから出てけとか言ってるやつの 意味がわかんねえよ。
>>35 おぅ間違えたな、板違いだ。
意味わかんないボケに説明してやるが、ここはWeb制作板>CSS質問スレ。
しかもcssについての答えは親切にもう出てる。
>>29 は使用者側の設定を聞いてるんだろ?
ウチは制作者側の板だ。PC板でアプリについて聞けってのは
十分まっとうな誘導だと思うがどうだ。
ちなみに漏れは
>>29 にOpera 8を激しく薦める。
慣れないというなら慣れろ。
それがむりなら諦めろ。
そう、まあ板違いだっていうんならそうなんだろうけど、cssに関する少しばかりの 脱線を許容する事はできないん?当たらずとも遠からずナンじゃねえの? 追い出されるほど見当違いな事なの?これは。最近多くねえ?目くじらたてて出てけ ってやつ。別にこっちも荒そうと思ってる訳じゃないし、出来れば礼は欠きたくないと 思ってる。 だけど頭から出てけみたいに言われると、いくらこっちが質問者で立場低くても正直 かちんとくるよ。まあ、あなたはそれでもきちんと答えてくれたので礼は言っておきます。 ありがとうございました。
許容って範囲じゃないでしょ。 CSSの質問じゃなくて、IEの機能に関する質問だっつの。 そんなの専門の板行った方が、いい回答が得られるに決まってんじゃん。 自分の勘違いも認めず、脱線とはあきれちゃうね。
IEの機能に関する質問なんてした覚えないんだけどなあ、、、 わかったよ、俺が悪かったよ。もう消えるよ。
>>42 よく読めよ。
>>29 は
>>34 の回答内容を全く否定してない。
「スレ違い」と言われた事に逆ギレしてるだけ。
そして
>>29 はあくまでこの質問は、このスレ向きの質問だと主張したいだけ。
更に混ぜっ返してどうするんだ。
45 :
29 :2006/05/22(月) 22:08:51 ID:???
なんか誤解を招いてるみたいなのですっきりさせるために何をいいたかったのかだけ いっておきます。もう消えるぜ!って言った後なので解答はしてくれなくていいです。 同じcssを常に読み込んだ状態で、あるサイトに来たときだけに効果を発揮するプロパティ の設定の仕方はありますか?というのが質問です。俺はcssのプロパティやセレクタの 設定の仕方で出来るのであれば、ここできいてもおかしくないと判断しての事です。 これ以上私が出てきてもほんとに追い出されてしまうので、この話はこの辺でかんべん してください。
>>45 相手がCSSシグネチャを設定してればできる。
2chがCSSシグネチャを設定してるわけ?
>>47 質問者なんだとしたら、話をもうちょっとまともに聞け。
違うんだとしたら、混ぜっ返すな。
------29に関する話題はここで終了------
>>48 昨日からの一連の流れを知らないんだろ。
専プラはイヤだとか、誘導の仕方が気に入らないとか主張ばっかで、つきあいきれん奴なんだよ。
>>50 だから「れば」という仮定の話で答えを提示してるんだ。
違うんなら、もう混ぜっ返すな。
奴もできないということがわかっただろう。
>>53 気にスンナ、どうせ質問者に無碍にされた回答者の一人だろ。
前スレ見りゃわかるが、ここの大半はCSS signatureも知らないみたいだから まともに答えられなかったんだと思われ。質問者も大概アレげだったけどな。
自分のサイトなら好きに作ればいいさ。 奴が言ってるのは、他人のサイト=2chを閲覧中の話。 この板違いっぷりを理解してんだか。
うるせーよ、どっちでもいいいよ 目障りだから両方とも消えろ
お前も消えろ
59 :
29 :2006/05/23(火) 00:31:59 ID:???
うあ、なんだか私のせいで荒れてしまったようで、申し訳ありません。
>>46 ありがとう。参考になりました。
>>47 私じゃありません。
>>56 もう勘弁してください
という訳で失礼しました
60 :
Name_Not_Found :2006/05/23(火) 00:36:13 ID:giktrSMH
>>55 答えを知っているのなら、
君が解答を出しなさい。
↓次の質問どうぞ。
62 :
Name_Not_Found :2006/05/23(火) 05:38:06 ID:2dbmdFwY
ブログに2ちゃんねるで使われているアスキーアートを張っているんですけど、 どうもブログのスタイルシートが邪魔をして綺麗に表示されないんですよね。 ウィンドウズのIE環境で2ちゃんねるを見ているのですが、綺麗に表示されております。 ですが、CSSファイルを使っている様子はありません。 綺麗に表示されるようAAの時だけスタイルシートを挿入したいのですが どうしたらいいのでしょう? IEのCSSを使用していない設定などがわかれば何とかなりそうなのですが…
>>62 どのブログかさえ分からないから答えられないのだが。
まあ最終的には画像だろうな。
ブログってどこのかにもよるけど、独自のCSSを追加で 書き込める様になってなかったっけ?
おはようございます。 div="content"に背景色がつかないので悩んでいます。 menuとmainにはつきました。 どなたかお知恵を貸してください。宜しくお願いします。 #content { width: 750px; background-color: #333333; ←効いていません。 } #menu { width: 200px; float: left; } #main { width: 550px; float: right; }
66 :
65 :2006/05/23(火) 07:29:52 ID:???
>65です。 大事なことを書き忘れました。 背景色が効いていないのは、firefox、opela、netscapeです。 bodyの背景色はついています。 宜しくお願いします。
>>65 div="content"に色がつくわけない。
div id="content"。
>>56 ユーザースタイルシートの質問はここですよ、と。
>>68 質問内容はそうじゃなかった事くらいわかっとるくせにw
>>69 あくまでも悪いのは自分じゃないと言い張るおまえの態度がうざいので消えろ
>>8 http://www.mitsue.co.jp/case/design/c_index.html こんな中途半端な解説なんて何の役に立つんだよ。
これ自体が「HTML/CSSのよくある誤解・ミス」そのもの。
>CSSとは、Cascading Style Sheetの省略表記で、Webコンテンツの視覚的な表現を指定するための仕組みのことです。
>CSSにおけるプロパティとは、あるセレクタに対し視覚表現を適用する場合に指定する、スタイルの種類のことです。
音声スタイルシートのプロパティも解説しておきながら、
なぜ「視覚的な表現」「視覚表現」と拘泥するのか謎。
というか節穴。これでW3Cメンバーとは笑わせる会社だな。
>overflowとは、ボックスのコンテンツがボックスの外にはみ出る場合の表示形式を指定するためのプロパティです。
馬鹿まるだし。1つのボックスには、1つの “content area” しかない。
だから複数形の「コンテンツ」は不適切。日本人にありがちなミス。
気が済んだか?
そういえば、和製英語でコンテンツは存在するけど、コンテントはないよな。
次スレのテンプレで消滅しない限り、気が済まない。 誰だよこんなの推薦したのは。よく中身を読めよ。
>>75 まあなんだ。
おまえがこのスレから消滅すれば済む話だ。
つうかあれだ。とっとと消えろ。
んだんだ
もう言いたい事は言ったから消えるよ、さようなら。 役に立たないものはテンプレから消えるべき、それだけ。 それでは次の質問どうぞ。
>>72 初心者のために専門用語を使わないようにしてるのかと思えばそうでもない
こんな解説上級者はむかつくし、初心者は理解できない。
こんにちは、変なデザインを作ったら、画面チェックしてたIE(win)以外では
まともに表示できない状態になってしまいました。
何度か作り替えて少しはマシになったんですが、テーブルが入れ子状態で
ソースがグダグダでもうちょっとなんとかしたいと思っているのですが
どうも旨く作れず、手詰まりに陥ったので、
一端、精通した人のご意見を頂きに参りました。
cssも勉強中で、ページはごちゃごちゃしていろいろとこだわる人には怒られそうな構文してる気がしますが
肝心のデザインは説明するより見た方が速いと思うので私のサイトは以下です
http://momoshin.net/maglog IE(win)以外では意図したような表示がされないと思います。
1記事分スレッドのtableを見てください
作りたいデザインとしては、現状のようなタイトル日付名前等の配置で
・1スレッドごとに左上にアイコンが配置される感じで
スレッドの上空間と、下の本文部分にはみ出るような状態、
・スレッドの影をつけたい
アイコンがはみ出るというのがポイントなのですが
これをやろうとすると、どうしてもごちゃごちゃになってしまって・・・
もうちょっとスマートにやるほうほうは無いですかねぇ
>>81 まずはじめに一つ。テーブルレイアウトとCSSの無理な併用はやめてくれ。
無駄に複雑すぎて理解するのに時間と労力がかかる。
しかもstyle属性さえ随所にちりばめられていて、もうなんといっていいのやら。
悪いことは言わないからはじめから作りなおした方がいいと思われ。
このさいテーブルレイアウトでもCSSでもいいから、
どちらか片方だけにしぼって作り上げたてからまたおいで。
つーかIEもそれ以外もどっちも崩れてるんだが・・・
>もうなんといっていいのやら。 是非いろいろご意見頂戴したい次第です。 技術的にも乏しく時間もあまり無いので、完全に文句つけられないような 構文をすることはたぶん現実的には無理ではないかとは思ってはいますが それでもこういう所でいろいろ言ってもらえないと、なにがどう駄目なのかが わからないので、ぜひ箇条書きとかでも結構ですので、いろいろご意見お聞かせ願えれば幸いです。 今後の参考にさせて頂きますので、是非よろしくお願いします。 感覚的に駄目チックなのはわかるんだけど、 どう駄目なのかわからないから、どう直すべきなのか方向もわからないという感じで・・・
これはひどい
>82 凝ってるなぁ これだけ作った労力は凄い だが汚いw あんたプログラム出来るんなら難しくないんじゃないのか?
87 :
86 :2006/05/23(火) 16:30:57 ID:???
>>81 これってnucleusじゃん。
まずCSSの基礎が分かってないと改造は難しいと思う。
それが嫌なら公開されてるスキンでも使えば。
ニュークリで自分でこれだけくんだなら、 cssの技術的基礎は分かってると思う。 cssの概念的基礎が分かってないんじゃないかと思う 81は何がしたいの?
ていうか、一人で自演してるやついるよな、確実に、、、
一人じゃなきゃ自演出来ないだろうが。
そだね、まあどうでもいいんだけど、なんかやけにレス伸びるのが長くてうざかったので
長くてうざかった?長いって何だ? フォント最大で2ch見てて見づらいというオチとかw
あと、お前もうざいってのも、書き足すのを忘れてた レスが長く伸びてうざかったので、なんですけど? この程度も理解できないって事は小学生か、、、
>>94 そんなどうでもいいことで煽ってくるおまえが一番ウザ
小学生って・・・
じゃあしょうがくせいいですよろしくね
わからなくてごめんね、ゆるしてね
わかった、しょうがないから許してやるよ。
一つ言えることはスレを伸ばすのに一番貢献したのは確実におまえだな。
下らないレスもまた2ちゃん。 まぁ良いではないか。ははは。
>>97 いや、むしろうざがってるわけで、逆にお前じゃないの?ぐらいの話しなわけでだな、、
レスもやたら早いし
おまえらいい加減にしろ。続けるなら他でやれ。 99はうざがっていると発言するなら無視しろ2ちゃんの基本。出来ないなら消えろ。
というループなわけですけれども
102 :
Name_Not_Found :2006/05/23(火) 21:29:54 ID:giktrSMH
>>81 おかしなところが多いが悪くないサイト。
あなたは伸びる、
↓次の質問どうぞ
では、、、 質問というか、ナンというのか 背景になにか画像があって、その上にボックスが配置されています。そのボックスは 背景が少し透けて見えるのだけれど、 1.パスを切る時点で完成した画像にしてしまう。 2.透過gifを使って実現する 一般的に、どちらの方がスマートな方法でしょう? 今、そういうのを作ろうとおもっていて、どちらの方法で作り始めようか悩んでます。
>>104 >背景が少し透けて
半透明はすこし注意を要する技術。
フィルタとPNGの併用しかまともな道はないんじゃないかな?
>>105 はい、ピクセル合わせabsoluteでイメージ自体を完成させて切ってしまえば簡単に
実現できるのですが、透過png等を(間違えた)使ってやる方法も自由度があって
面白そうだなあ、と思ったので聞いてみた次第です。
例えば、blogのようにコンテンツや配置が入れ替わる可能性があるデザインの場合、
簡単に変更が出来なくなってしまうという辺りが心配でして、、、
どちらにせよスレちがいだな。
108 :
Name_Not_Found :2006/05/24(水) 03:14:35 ID:sgRvUFMG
CSSを用いた段組を作成し、左にメニュー要素をおいてFloat設定して margin-leftでメニュー分空けて右側にメインのコンテンツをおいております。 メイン側のコンボボックスには動的に値が入るのですが、この文字列の長さが 画面の表示可能領域を超える長さだと、メイン部分がメニューの下に移動してしまいます。 知り合いには狭い画面を有効に使うためのCSSの仕様とか言われましたが、 メイン要素を固定しておく方法はないのでしょうか。 はじめから領域を切っておくと普段は必要のない空白領域と、バーが出てしまうので 避けたいです。 よろしくお願いしますm(__)m
>>108 それはどこかで妥協しないとね。
全体の横幅固定か、動的な文字列の表示を再考するか。
110 :
Name_Not_Found :2006/05/24(水) 03:23:44 ID:FNXevfOA
>>108 ・メイン側は数値指定をしない。
あるいは
・メニューとメインの % 指定。
111 :
108 :2006/05/24(水) 03:39:59 ID:???
>>109 >>110 このような時間にありがとうございます。
110さんのは試してみたけどやはり落ちてしまいました。
どこかに"出来ない"と明記されていればとりあえず
お客さんも納得してくれそうな気がするんですが・・・。
>>107 CSSの仕様じゃない。floatの仕様。
floatは元々img要素のalign属性のような、小さなものを浮動させるのが目的であって
メニューのような使い方は邪道。
どうしても落ちないようにしたかったら、横スクロールバーが出るので非常に迷惑だが
position:absoluteで固定。
>>108 >お客さんも・・・
おいおい大丈夫かよ
#box2 { background-color: #999999; margin-top: 5px; height: 500px; } #box3 { background-color: #FF0000; margin-top: 30px; } <div id="box1"> <p>あいうえおあいうえおあいうえお</p> </div> <div id="box2"> <div id="box3"> <p>かきくけこかきくけこかきくけこかきくけこ</p> </div> </div> このような場合 Box1から5px下にBox2を置いてBox2の中の上から30px下にBox3を置きたいのですがIEではこれでOKですが FireFoxではこれだとBox2がBox1から30px下でBox3と共に表示されます。 どうしたら良いでしょうか?
>>114 #box2 {
background-color: #999999;
margin-top: 5px;
height: 500px;
padding-top:30px;
}
#box3 {
background-color: #FF0000;
}
隣接要素セレクタ
>>118 俺も今同じようなレイアウトしてます。
俺のは
>>112 の方法です。メニュー要素はpositionで固定、widthも固定、
メインのmarginをメニューのwidth分とりました。
横スクロールバーは出ないのでやや違うかもですが、うまくいっています。
HTMLもメニューを後に書けるのでいいですよ。
で、それに加えて質問ありましたので次に書きます。
↑のとおりレイアウトすると、通常はいいのですが、
小さく表示したとき、可変のメイン要素はどんどん縮んでしまって
メニューはどこまでも同じ幅でついてくるので、読みにくくなってしまいます。
そこで下のサイトなんですが、一定まで縮小するとメイン要素がそれ以上縮まなくなります。
ttp://www.sanspo.com/baseball/baseball.html どこかの要素がストッパーになってると思うんだけど目下謎解き中。
解ける方いたらお願いします。
>>118 footerにwidth:760px;のdiv要素が入ってるから。
ソース見りゃわかるだろ。
いや、良い具合に利用された感じもしないでもないんだが、、、
そうだったのかーヽ(`Д´)ノ
いや別に利用してない。ありがとうございます。
フッターというかダミーでしたがwidth指定ありました。
それに近いことは自分でも試してたんですが
やはり
>>177 の構造では同じようにはいかない感じですorz
なお工夫してみます。
それにしても
>>118 のサイト、ページ全体がtableに入ってた。
初めて見た〜
>>122 ソース出せば考えてくれる人もいるだろう。
124 :
114 :2006/05/25(木) 00:20:40 ID:???
125 :
108 :2006/05/25(木) 02:53:11 ID:???
>>112 ありがとうございます。助かりました。m(..)m
126 :
Name_Not_Found :2006/05/25(木) 05:22:04 ID:HzlDsjTX
このスレだったと思うんですが 違うかも知れませんが、2CH関連のまとめサイトか何かでCSSの決まり事?みたいな内容で フロート要素には幅を指定しないといけない、マージンを0にした場合は何なに… のような事が書いてあるサイトの話をみたのですが、どなたか、ご存じないでしょうか? いろんなスレの過去ログを見ても見つけられなくて…
「フロートに幅を明示しろ」 これまだ必要か? 必要とするブラウザを具体的に列挙しておく程度でいいだろ。 「Opera6ではフォームコントロールのボタンに前景色が適用されないから フォームコントロールのボタンの背景色を黒っぽくしてはならない」 なんて必死に言っているようなもの、かなりおかしい。 まだCSS2和訳を参照している人は急いでCSS2.1に切り替えた方が良い。
>>129 >必要とするブラウザ
うろ覚えだがIE 4.x and 5.x for Macだったっけ?
N7も2.0準拠だろう。
132 :
Name_Not_Found :2006/05/25(木) 22:46:28 ID:gyUddm1A
質問です。 <div id = xxx> <div id = aaa> aaaaaaaaaaaaaaaaa </div> <div id = bbb> bbbbbbbbbbbbbbbbb </div> </div> と一度作ってブラウザで確認したあと <div id = xxx> <div id = aaa> aaaaaaaaaaaaaaaaa </div> <div id = bbb> bbbbbbbbbbbbbbbbb </div> <div id = ccc> ] ccccccccccccccccc ]←この3行を追加する </div> ] </div> 上記のようにやるとID cccだけが ID xxxとネストされず、 はみ出してしまいます。 あとからIDを追加と言うのはできないのでしょうか? 教えて下さい。
133 :
Name_Not_Found :2006/05/25(木) 22:55:59 ID:80zrNqiE
CSSをまだ何も勉強していないんですけど、とりあえず本買って勉強しようと思うんです。 で、なんかお勧めの入門書とかないですか?
オレンジ色の本がいいよ
>>132 そんな事ない。あと<div id = "xxx">。
強要スンナ
>>133 とりあえずアンク著の本とかは止めておけ。昔から非道い。
「売れている本」と「内容の正確さ」は必ずしも一致しない点に注意すること。
同様に「初心者に人気のある解説サイト」もほとんどの場合、正しくない。
>>135 それよりもイコールの前後にある空白の方がよっぽど拙いだろ。
HTML4ならxxxという名であれば引用符で括らなくても大丈夫。
>>132 どこかに余計な</div>が混ざってるんじゃないの?
一度検証でもしてみた方がいいと思われ。
tp://www.hinet.mydns.jp/~hiraku/tDiary/20050922.html#p04 のようにPREを width: xx%; overflow: auto; とするとIE6でスクロールバーが表示されると文字に重なってしまいます。 どうするのがスマートでしょうか?
ゲイツに文句を言う
overflowを使わない
<html> <title>IE Su*k!</title> <body> <h1>IE Su*k!</h1> . . . </body> </html> を天麩羅にする
143 :
139 :2006/05/26(金) 03:43:37 ID:???
>140-142 d overflow: scroll; は気に入らないのでautoで</pre>の前に改行を足す事にしますた。
IEで、縦のスクロールバーが表示されるときに、 幅の計算がおかしくて横のスクロールバーも同時に表示されてしまう症状を、 解消する方法はありませんか?
100%にしなきゃいいんじゃなかったっけ?
そんな状態あんのか?
147 :
Name_Not_Found :2006/05/26(金) 11:57:48 ID:ZLjDJ1Wc
BODY{ background-color : #FFFFFF; ↓ここから下の部分を a:link {text-decoration:none; color:#ffffff ; a:visited {text-decoration:none; color:#ffffff ; a:active {text-decoration:none; color:#ffffff ; a:hover {text-decoration:none; color:#FFFFFF; position:relative;top:2px;left:2px; } ↓ここに入れたリンクにだけに適用されるようにしたいのですが TD{ text-align: right ; vertical-align: bottom ; padding : 3px; width : 100px; height : 100px; } どの辺に入れたらよろしいでしょうか。 もうワケワカランです。
因みに蛇足だけど、position:relativeを多用すると ロースペックマシンだと落ちることもあるぞ、あんま使わないほうがいい。
貧乏人は見なくていいよ
ネット先輩方へ。教えてください(;´Д`)ゞ
cgiboyの「前略プロフィール」の【・・足跡】の
GuestBOOK(超シンプル・掲示板)なのですが、
背景を際立たせる為に、書き込まれた欄の部分を透けるようにしたいんです。(完全に透けるのではなく、薄っすら背景が見えるように)
で、自分でもGoogleで色々と検索し、調べタグを入れようとしたら、その掲示板自体が、カラーコードの記入欄しかないのです。
でも、他のユーザー方の書き込まれた欄は背景が薄っすら見えるようになっています。
(具体例)
http://bbs7.cgiboy.com/1R3072411 など。
※↑↑↑いたずらカキコはしないでくださいねm(__)m
カラーコードの入力欄しかないのに、みんながどのように透けるようにしてるのか、サッパリわかりません。
cgiboyのサポートセンターにもメールで問い合わせましたが、「そうゆうことは出来ません。」と返って来てしまいました。
長くなりましたが、2chの方なら分かるかな?と思い、書き込ませて頂きました。
ご回答、どうぞよろしくお願い申し上げます。
出来ましたら、細かく説明して頂けると大変助かります。
<追伸>ちなみにPCは、ウィンドウズでXPを仕様しております。
板違いでしたら、誘導お願いします。失礼いたしました。
>>151 IE以外とIE7用には半透明PNG。
IE6用にはfilter。
>>151 >カラーコードの記入欄しかない
だったら無理。
154 :
147 :2006/05/26(金) 13:03:40 ID:???
>148-149 ありがとうございました。 リンクが動きましたヒャホーイ position:relativeの使用は2,3個のとどめておきます。
>>151 です。
>>152 さんへ。レスありがとうございます。
そのソフトをダウンロードすれば「可能」ってことなんですよね?今、Googleで調べてみました。しかし、サッパリわからないです。ちなみに自分のIEってどう調べたらわかるんでしょうか?質問だらけですいません。。。
>>153 さん。レスありがとうございます。
・・・・・やっぱりカラーコードの記入欄しかないと無理ですか?
他のユーザーの方々の掲示板は、透けているんですけどねぇ(´Д`)
まったくもって謎です(´・ω・`)ハァァァ・・・
半透明PNGは「32bit PNG」という「画像の形式」。 filterはWindows用の「Internet Explorer」というブラウザ専用の「スクリプト(プログラムみたいなもん)」。 どちらも「カラーコード」とは別物。 ok?
>>158 filter CSS IEでググれ。
そのカラーコードをボックスら乗せた上で半透明にするのがfilterというCSSもどき。
でもこれはIE専用なので、その他には色指定なしで半透明PNG画像を背景画像として敷き詰める。
質問させて下さい。 今制作しているサイトは外部CSSでフォント指定などをしているんですが、 font-familyでヒラギノ丸ゴシックProW4を指定してもFireFoxやSafariで反映されません。 一応、font-family:"ヒラギノ丸ゴシック Pro W4","Hiragino Maru Pro W4"と両方記述しているんですけど。。。 原因はどこにあるのでしょうか?ご教授お願いします。
>>158 説明判りやすかったです。とか言って全然分かってねーじゃねーかクソガキ
何が*しつこくてすいません*だクサレマンコが、キモ杉おっぱいおっぱい
66.102.7.104/search?q=cache:7kosGiUeOhoJ:mizugane.kuronowish.com/log/2005/03/opacity/+&hl=ja&ct=clnk&cd=1&lr=lang_ja
>>160 単純にフォントがはいってないんじゃないの?
>>162 自分の環境書くの忘れてました。すいません。
一応MacOS10.4.5なので、入ってます。
>>160 他のブラウザは?
フォント名正確?
文字コード宣言?
>>164 Operaでは反映されていました。
Netscapeでは反映されずです。
記述は一部抜粋すると、
.text { font-family: "ヒラギノ丸ゴシック Pro W4", "Hiragino Maru Gothic Pro", "Verdana", "Osaka", "MS UI Gothic"; font-size: 9px; line-height: 15px; color: #ffffff}
こんな感じにしています。
文字コード宣言とは?馬鹿ですいません。
自分のマシンにインストールされているInternet Explorerのバージョンを知るには、 ブラウザのウインドウの「ヘルプ(H)」をワンクリックして、 一番下の「バージョン情報(A)」を選んでワンクリックすれば確認できる。 Windows XPがインストールされているのなら、バージョンは6.0xだと思われ。 Mac OS Xなら、多分Internet Explorer 5.2.3。
すいません。文字コードはShift_JISです。
>>165 宣言してないんだとしたら、CSSファイルの先頭に入れとけ。
@charset "Shift_JIS";
>>168 どうもです。
うぅ、、、オフライン上では正しく表示されるんですけど。。。Safariのみ。
ファイルをアップした後にオンラインで確認すると反映されてないんですよ。
もう少し試してみます。
ありがとうございました。
>>169 CSSファイルには記述してませんでした。。。
が、特に変わりませんでした。。。どうなってんだろ。
何度もすいません。
>>169 Safariでは正確に反映されました!ほんとありがとうございます!!
fireFoxに関しては仕様だと諦めようと思います。
>>173 おぉ、、、このサイトさんはFireFoxでも問題なく反映されてますね。
ちょっと勉強させてもらいます。ありがとうございました。
>>159 さん
出来ました!細かく教えて頂きありがとうございました!
>>161 さん
そうですね。判っていませんでした。嫌な思いをさせて
すいませんでした。
176 :
Name_Not_Found :2006/05/26(金) 20:32:03 ID:VpdbKp4e
width: 200; height: 200;のdivの中で、 テキストを右下に表示させたいのですが、可能でしょうか? tableのtdにおけるalign=right valign=bottomのようなことを したいのですが・・・。
>>176 podision:absoluteでないと無理。
>>176 <div id="aa">
<p>ほげほげほげ</p>
</div>
div#aa { width: 200px; height: 200px }
div#aa p { width: 100px; height: 100px; margin: 100px 0 0 100px }
こんな感じか?
180 :
178 :2006/05/26(金) 20:53:20 ID:???
テキストの量が決まっていて文字サイズ固定なら…
divの中で右下では無くて、右下にdivがあればいいだけじゃないの?
これで良いんじゃねぇの。 <div style="border:solid 1px;width:200px;height:200px;position:relative"> <span style="position:absolute;right:0;bottom:0">あああ</span> </div>
文字がデカくなるとどうにもならないな。
だからさぁ
>>182 で良いんだろ。違うのか。
親のDIVを相対配置して包含ブロックを設置。
その中で絶対配置right:0;bottom:0を指定。
この意味がわからんのかな。
186 :
176 :2006/05/26(金) 22:35:13 ID:???
>177-183
レスありがとうございます!
>>182 さんのやりかたでやったところ上手くいきました。
ありがとうございました!
>>185 だからそれが何。ちゃんと右下になるだろう。
line-height: 1; を指定すれば尚よいがな。
自力で学習しない怠慢な初心者がわらわら集まってきて、 無知な回答者が知ったか振って不適切な説明を繰り返す。 それで質問者をほったらかしにて変な議論が始まったりする。 結局、初心者は混乱して何も解決できないまま去ることに。 もし解決できたしても無題に時間が掛かってしまうという罠。 だからこの手の質疑応答タイプの掲示板はくだらない。 回答者のスキルのばらつきが余りに大きすぎる。 その時刻に識者が居ないと真面な回答が返って来ない。 高いスキルを持つ識者だけの登録制にしない限り不毛。 ここに来る質問者も回答者もくだらない。両方とも勉強しろ。
低ラベルだもんしようがあんめいよ。
初心者が超初心者に憎たらしく論じている
>>190 だったら、教えてgooとかにいったらいいと思うよ。
たまーにこういう人いるけど、お前ら全員うんこたれだぜ!といってる
人の中に自分もふくまれているとゆー、、、
行ってることはもの凄くよくわかるんだけど、じゃあお前なんでここにいるの?って
思ったりする
W3C CSS 検証サービス
ttp://jigsaw.w3.org/css-validatorについて質問です 。
html {
background-color : #〜;
color : #〜;
}
body {
background-color : #〜;
margin : 10%;
}
例えばこのようなCSSを書くと、bodyのcolorを指定していないと怒られます。
また、子要素の文字色を指定して、背景色を透化と明示しても問答無用で怒られるようです。
しかし、この警告に従うとCSSというスタイルシートの利点も奪われているような気がしますし、
事実、私にとっては面倒かつ足枷になっています。
この警告はどの程度深刻なものなのでしょうか。
195 :
194 :2006/05/27(土) 02:21:33 ID:7oXMefIP
idを出し忘れました。 申し訳ありません。
★ このていど
所詮機械的に判断してるだけだからそんなに気にする必要ないよ。 わかっていてその方がいいと判断したならそれでいい。
198 :
194 :2006/05/27(土) 11:05:02 ID:7oXMefIP
>>194 自分も
>>197 の意見に同意。W3C信者とかなら別だけど、理想と現実の境界線を
考えてやるべきだと思われ。
あと、検証してないで適当なことを言ってみるが
bodyに color: inherit; とか入れてみるとどうなるだろうか。
body { margin-left: 50px; padding: 0 20px; } とやっているのですが、この状態で p.example { position:absolute; top:0; left:0; width:100% } とするとPはleft:0により左端にくっつきますが、右端にOperaではbodyのマージン分、IEではbodyのマージンとパディング分の隙間ができます。 Firefoxでは、なにも隙間ができずに右端にくっつき、ウィンドウ幅と同じ幅になります。 これをうまいこと他のブラウザでも右端にくっつけて、ウィンドウ幅にすることはできませんか?
201 :
Name_Not_Found :2006/05/27(土) 12:13:55 ID:EOztyPvQ
CSSを組んでいってる時に、IEだけ妙な挙動をするのでちょっとパターンを調べてみました。 /* 定 */ このようなコメントを指定すると、それ以後の指定を無視するのですが、当方以外の環境でも再現するか試して頂けませんか? 語尾が「定」だと発生するようなんです。 それ以外にコメントを書いてる場合、一部無視するみたいな動きをするようなのですが…。 避けるのは簡単なんですが、既知のバグなら後学の為に詳細を知っておきたいので。 よろしくお願いします。
202 :
200 :2006/05/27(土) 15:39:54 ID:???
自己解決しました。 幸い、これより上の要素がすべて縦が固定幅だったので、 p.exampleにmarginで左右に負数を与えてウィンドウ幅にして、 そのままposition:relativeとtopで無理矢理上に持ち上げました。 position:absolute時にleft:0、またはright:0とやるとそれぞれウィンドウの端にいくことが出来るんだから、 width:auto; left:0; right:0; みたいな感じでウィンドウの幅になればいいのに…。
203 :
Name_Not_Found :2006/05/27(土) 15:51:05 ID:QkweEEWQ
ブログのメニューにあるような、カレンダーをCSSで作りたいんですが、どうやろうか悩んでます。 やっぱりテーブルでやるのが無難かなぁ?
テーブル以外ならリストかな? しかし、カレンダーって要するに日付”表”だから 素直にテーブルにした方がいいと思われ。
205 :
Name_Not_Found :2006/05/27(土) 16:03:37 ID:QkweEEWQ
>>204 なるほど。ありがとうございます。
便乗でもう1つ。
名前 [ ]
メールアドレス. [ ]
本文 -------------
| |
| |
| |
| |
-------------
ちょっと見にくいかと思いますが、フォームだと思ってください。
こういうのもテーブルでやると楽なんですが、CSSでやるにはどうしたらいいでしょうか?
<form> <div><label></label><input></div> <div><label></label><input></div> <div><label></label><textarea></div> </form> div {position: relative;} label {position: absolute;} input,textarea {position: relative;left:em;}
使えば?
209 :
Name_Not_Found :2006/05/27(土) 16:31:07 ID:QkweEEWQ
>>206 すいません、よくわからないので解説おねがいできますか?
ラベルの部分が表示されない・・・
>>206 の説明は分かりにくすぎだと思われ。
こんな感じのものをCSSでととのえれ。
<form>
<fieldset><label>名前</label><input></fieldset>
<fieldset><label>メールアドレス</label><input></fieldset>
<fieldset><label>本文</label><textarea></textarea></fieldset>
</form>
212 :
Name_Not_Found :2006/05/27(土) 17:04:06 ID:QkweEEWQ
fieldsetタグなんて初めてだ。 何もスタイル指定してないのにボーダー付くのかw
>>194 遅レスだが、ユーザスタイルシートで
body {
background-color: #〜;
color: #〜; /* 著者スタイルシートのbackground-colorの値と同じ */
}
みたいに書いたらどうなるか考えてみろ。
>>214 ん?おまえのそれだと普通にユーザスタイルシートが優先されるだけだじゃね?
htmlに文字色と背景色を指定してbodyの指定を忘れるか
bodyの背景色か文字色のどちらか片方だけを変えないと問題にならないぞ。
216 :
Name_Not_Found :2006/05/27(土) 17:51:42 ID:QkweEEWQ
>>211 position使わないとできないですか?
>>205 <form>
<dl>
<dt>名前</dt>
<dd><input></dd>
<dt>メールアドレス</dt>
<dd><input></dd>
<dt>本文</dt>
<dd><textarea></dd>
</dl>
</form>
dt { clear:left; float:left; width:8em; }
>>201 文字コードは?
そして文字コードの指定は正しくしているか?
>82 テーブルでできるならテーブルでいいや派はなのですが どうしても今のデザインがテーブルで無理で(重ねとか) テーブルで無理な部分をcssでツギハギしてたらごちゃごちゃになりました すみません、精進します・・・(^-^; >83 83さんのおかげでwarning出てる事に気づいた・・・・ 教えて(?)ありがとうございました。 >86 えーとプログラムの能力はwebデザインとは別で 同じプログラマーでも見やすいソース、構造にこだわるタイプ・能力を持つ人とかは webデザインもソースからこだわりそうな予感がします
>>220 普通のCSSの方には普通にリストの装飾にしておいて
プルダウン用のCSSはJSで書き出す。
>>221 実際にその方法を用いているサイトをご存じないでしょうか?
どうもscriptが上手く動かないみたいでorz
ずっと探してるけど無いんです…。
223 :
201 :2006/05/27(土) 21:20:52 ID:???
>>218 文字コード等見直しました結果、指定文字コードとエディタで保存時の文字コードが食い違っておりました。
合わせた結果問題なくCSSが適用されるようになりました。
ありがとうございます。お騒がせ致しました。
>>222 知らん。
というか、普通のそういうCSSのプルダウンメニューのスクリプトから
CSSの部分だけJSに移してwriteでいいんじゃね?
filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; などを使わないで、半透明にする方法は無いですか?
IE6以下を見捨てれば簡単。
>>225 半透明PNGを背景画像にする。IEには格子状のGIF画像を。
半透明に見えるような画像を貼る
81んとこの影が半透明だな
230 :
229 :2006/05/28(日) 12:29:39 ID:???
スマン、半透明じゃなくて格子GIFだった。よくみないで書いちまってすまん。
僕は会社での立場が半透明です
>81
233 :
Name_Not_Found :2006/05/28(日) 14:50:43 ID:BoYuq+wH
>>114 ちょっと思ったのだがこれってieとffどっちの挙動が正しいの?
>>233 IEだと思う。Fxもborderを付けると解消される。
ただ垂直方向のマージンの相殺の計算で敢えて後出しのbox3を優先させて
こういう動作にしてる可能性も否定できない。
相殺の場合、どっちが優先されるって仕様明確にされてたっけ?
>>225 なんでfilteを使わない方法を探してるかわからん、filter使っちゃ
いけない状況なんてあるの?
100%ピュアCSSで作成しなきゃならない場合も当然あろ。
232が何を書こうとしていたのか気になる
デザイン、ソースのきたなさ等いろいろありそうだが 個人的にはどうやってこんな複雑な入り子テーブル作ったのかが気になる
>>233 これはFxのほうが正しい。
マージンの相殺は隣接要素間だけでなく親子要素間でも
(ボーダーやパディングがなければ)行われるから。
IEもbox2のheightを消せばちゃんとマージンが相殺される。
それはむしろユーザビリティじゃないかと(ry
イタイこと言っちゃったな
>>241 そんなあなたに番号だけでポップアップするCastellaをお薦め。
245 :
232 :2006/05/28(日) 18:01:50 ID:???
>>242-243 だからてめーらレスアンカー付けろって言ってんだろ
このすっとこどっこいがあああああああ!!!!!!!drftgyふじこlp@
》244 それはそれでちょっと不便かな
>>246 クリックでポップアップ、ダブルクリックでポップアップ、など選べる。
>>235-236 独自拡張のfilterプロパティを使ってはいけない理由はある。
WinIEの設定でActiveXコントロール云々の項目を無効にしたら
そのスタイル宣言は適用されないどころか、ブラウザ左下に黄色い警告が出る。
これはIE5.5とIE6でおこること。
2006年4月頃から手元のWinXPだけでは起こらなくなっているが定かではない。
要するに、CSSでfilterプロパティを直接書いては駄目だという事。
スクリプトで例外処理とともに書かなければ駄目だという事。
filterプロパティって、アルファチャンネル付きPNG画像をサポートしていないIEが、唯一の代替手段を
提供しているんだなあーって思ったww
>>247 ほぅ、それは便利だな。
>>249 唯一ではない。他にも裏技は幾つかある。
つーか半透明PNGを表示する機能は、実は有しているんだよIE。
なのに「正規の」手段は一つも用意しなかったってのはどういうことだゴルァ!
誰が教えるかボケ
あ?やんの?
帰れバカ共
ちんこまんこ
うーすいません。 左、真中、右と3つのボックスで段組して 真中をセンター寄せにするにはどうすればいいのでしょうか? 真中をtext-align:center;にしてもうまくいきません。 どうぞ教えてください。よろしくお願いします。
>>259 今書いてるソースを書いてくれれば誰かがきっと答えてくれる
>>259 左右をposition:absoluteで端にくっつけ、真ん中を左右カラム分マージンを取る。
>>260 ありがとうございます!
こんな感じです。
#waku {
width: 100%;
text-align: center;
height: 900px;
}
#center_box {
width: 600;
text-align: left;
}
#left_box {
height: 900px;
width: auto;
}
#right_box {
height: 900px;
width: auto;
}
<body>
<div id="waku">
<div id="left_bod"></div>
<div id="center_bod"></div>
<div id="right_bod"></div>
</div>
</body>
どうぞよろしくお願いしますm(_ _)m
>>261 あ、すいません。説明が足りませんでした。
ブラウザの幅に連動して真中のボックスの幅も変わり、
かつ常に中央にいるようににしたいのです。
264 :
263 :2006/05/28(日) 20:52:09 ID:???
>>261 す、すいません!
ぐだぐだでした。
>>263 は間違いです!
ブラウザの幅が変わっても真中ボックスの幅が変わらないようにしたいのです。
もうほんとすいません。
どうぞよろしくお願いしますm(_ _)m
もちつけ
あ、すいません。もちつきます。
いま改めて見ると
>>262 は明らかにおかしいですねw
いろいろやってるうちに、わけわからんくなってしまいました(泣)
はじめは真中のボックスを
position:absolute
left:50%;
marjin左:-300;
左右のボックスを
floatで右左にしてたんですが
うまくいかず頭がスパゲッティになってしまいました。
>>262 色々間違ってる。
#center_box {
width: 600px; ←単位が必要。
#left_box {
_height: 900px; ←これ以上の高さに伸びないのが仕様なのでIE用はハックで
min-height: 900px; ←そのたブラウザ用はこちら
↑右ボックスも同様。
そして肝心の、真ん中だけ不動幅で左右を可変幅で全体をリキッド、
というレイアウトは、ちょっとやそっとじゃ不可能。
昔ここの住人が頭拈ってなかば裏技で出した例が過去ログにはあったと思う。
>>266 まずfloatかpositionか、どっちかに統一してみそ。
>>267-268 どうもありがとうございました!
おかげで少し楽になりました。
いろいろやってみますですm(_ _)m
>>270 綺麗なんだけどね
つーかIE6でしか管理者の思ったように表示されないと思う
>>258 のmenuのtopやinfoは画像使っているのですか?
>>272 IEでは使ってない。
IE以外で似た効果を出したかったら32bitPNGが必要。
Styleによっては使ってるな kenkenってstyleだと使ってる
276 :
272 :2006/05/28(日) 21:53:33 ID:???
すいません。JavaScriptオンにしてなかったです。 kenkenじゃなくXan aduです。 ってこれJavaScriptでスタイル切り替えられるんですね。 初めて見ました。凄いっす。
これって
>>258 も言ってるように、背景の画像を半透明にするわけじゃないから、32bitPNGでも不可能なんじゃないの?
280 :
569 :2006/05/28(日) 22:39:54 ID:ScUuF9Kg
245ウザ アンカーごときでぐだぐだいうなよ
こんな板があったのか! 最近HTMLとCSSを勉強し始めたんだが、 買った参考書と上のリンクを網羅して手足のように動かし、 さらにJavaScriptを齧る位になったらまたくるわ! ホームページ作るよりも タグを並べてCSSでデザイン考えてるほうがワクテカする俺は いつまで経ってもホームページのデザインが定まらない。 もうTOPデザイン更新ページになってるだが そんな俺にはCSSを勉強する資格はあるのだろうか? スレ違いだが教えてくれ!!!いや、くださいませ!!!
ない
はげどう
おしえてくださいませm(_ _)m ボックスの中に文字を入れる時 ボックスのまんなかに文字を表示させるにはどうすればいいでしょうか? 横方向ならボックスにtext-align:centerつければいいのでしょうけど 縦方向のほうがよくわかりませぬ。 どうぞ教えてくださいませm(_ _)m
テンブレ読んで頂戴!
あ、見つけました。 おさわがせしました^^;
テーブルは使っちゃ駄目なのですか? わかりやすく説明出来る人はいますか
使っていいですが?
駄目じゃないよ。 表データならテーブルを使えば良い。
>>284-285 なるほど!反骨精神でやれってことだな!
よっしゃ!サンクス!挫けぬ心で頑張るぜ!!!!
CSSでformのsizeの制御はできないんですか? どうもうまくいかないんですが
295 :
Name_Not_Found :2006/05/30(火) 10:28:45 ID:dyD4jLi8
あげ
296 :
Name_Not_Found :2006/05/30(火) 11:17:02 ID:W7kZmtpx
ol { list-style-type: decimal; margin-left:0px; } でリストを書くと、IEだと最初の数字が表示領域外に出ちゃうんですけど 、仕様ですか? firefoxだとちゃんと表示されます。
>>296 IEはmarginで、Fxはpaddingで、マーカーの領域を確保している。
Operaもpaddingだったかな。ブラウザによって違うから、
全部のmargin/paddingを殺してから、自分で設定するのが一番。
>>296 ol {list-style-position: outside ;}
>>298 訂正orz
×list-style-position: outside ;
○list-style-position: inside ;
p { display:inline-block; width:5em; height:1em } というボックスを作り、 <p>test</p> その中にボックスより幅の小さな文字列を入れます。 これからボックス内の文字列をボックスいっぱいに均等配置したいのですが p{}にtext-align:justifyを追加しても均等配置になってくれません。 どこか解釈間違ってるでしょうか。
根本的な問題としてp要素はp要素を内包できない。
display:inline-block; なんて値あったっけ?
306 :
302 :2006/05/30(火) 15:31:44 ID:???
>>303 さん
書き方が悪かったかもしれません。
<p style="display:inline-block; width:5em; height:1em;">test</p>
として
[t e s t]
上記のように表示したいのですが。
>>306 justifyの仕様を勘違いしている。
それはボックスよりテキスト幅が大きいときに
自動改行の前の行が両端揃えされるだけだ。
テーブルタグでテーブルの中のバック画像で、画像を繰り返さないで中心に固定する やり方は、どうすればいいでしょうか? <table border="0" border background="○○"> 背景画像固定などのサイトはたくさんあったのですが テーブルのバックイメージ固定が探しきれなかったので もしやり方しってましたら教えて下さい m(_ _"m)
とりあえず出来れば良いと言うレベルなら <table border="0" border background="○○" style="background-repeat:no-repeat;background-position:50% 50%;"> とかかなぁ。
>>306 あまり良いやり方ではないが
letter-spacingで調整すれば近い感じになる。
文字サイズが変わったら崩れるだろうし
あまり現実的ではないがね。
実際は短い文のボタン見たいのなら画像にしたほうが良いと思う。
CSSで、 background-image:url("abc.jpg"); background-position:100% 100%; background-repeat:no-repeat; background-attachment:fixed; で背景画像を指定しているんですけど、これで画像のheightやwidthを指定はできないんですか? 縮小してからアップロードすると、画質が劣化してしまうので、できれば避けたいんですけど
仮に height や width が指定できたとして ブラウザにリサイズさせるよりは まともな画像ソフトで 前もってリサイズしといたほうが綺麗な気がするけどね
314 :
312 :2006/05/31(水) 04:02:14 ID:???
>>313 そうなんですか・・・
わかりました
ありがとうございます
background: で一括指定は何か問題があるんだったっけ?
こんにちは。自分では解決できない問題が発生しました。 divで箱を作りその中にテキストと画像をいれました。 この段階では支障なく通常に表示されます。 ここで画像に回り込み指定を行いたいので指定しました。 画像が表示されません。 align="***"またはstyle="float: ****"のどちらも同じでした。 しかし、altには反応しているので画像自体は存在しているようです。 保存も出来ますし、保存したファイルを開けばちゃんと見れます。 ちなみに表示されないブラウザはIE6.0だけです。 自分で確認したブラウザでは、 Windows:NN7.1 Firefox Opera8 MAC: MAC-IE5.2 Safari これらは全て意図した通りに表示されました。 Lynxで確認するとaltでの代用が効いていました。 何か原因がわかる方。。。
そういう質問はhtmlソース出した方が早いと思うよ。 その際には問題が起こる最小構成の要素のみだと◎。
318 :
316 :2006/05/31(水) 14:16:22 ID:???
>>317 ---html---
<div id="mainwrap">
<div id="main">
<div class="blok">
<p>
<img>
テキスト
</p>
</div>
</div>
横220pxのメニュー欄があると考えてください。
box model hackで180pxです
</div>
これでどうでしょうか。
足りなければ追記します。
CSS出さなきゃ話にならんだろ・・
320 :
316 :2006/05/31(水) 14:22:36 ID:???
css source .blok { border: 1px solid #bbb; padding: 5px 9px; background: #fafafa; } #mainwrap { position: relative; width: 100%; margin: 0; padding: 0; } #main { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 220px; line-height: 150%; padding: 0px 40px 50px 40px; position: relative;
上のソースで、状況が再現出来るのか?
322 :
316 :2006/05/31(水) 14:45:32 ID:???
申し訳ないです。 <body id="body"> <div id="mainwrap"> <div id="main"> <div class="blok"> <p> <img> テキスト </p> </div> </div> <div id="leftwrap"> <div id="menu"> <a href="#">***</a> </div> </div> </div> これはhtmlです
323 :
316 :2006/05/31(水) 14:48:12 ID:???
cssはimportで分けてます。 構成(main.css)と装飾(design.css) ---main.css--- #mainwrap { position: relative; width: 100%; margin: 0; padding: 0; } #leftwrap { position: absolute; left: 0px; top: 0px; width: 220px; } #main { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 220px; line-height: 150%; padding: 0px 40px 50px 40px; position: relative; }
いやそうじゃなくて。 あなたの質問は、imgに回り込み指定した時、IEで表示されないって事じゃないの? だったら、imgにどういう指定してるのかが重要。
325 :
316 :2006/05/31(水) 15:00:31 ID:???
上記だけで閲覧することが出来ます。 imgにはお手数ですが何か画像をいれてみて下さい。 次に、img内にalign="left" または style="float: left"を 追加してみて下さい。 テキスト数増やしてみるとわかりやすいかもしれません。 画像が消えるのは私だけでしょうか。
326 :
316 :2006/05/31(水) 15:02:35 ID:???
imgには何も指定してませんよ。
やってみたが全然消えないな。 W2K IE6 他の要素が悪さしてるんじゃないのか?
329 :
316 :2006/05/31(水) 15:22:36 ID:???
あっと、申し訳ありません。 環境は閲覧のみなので Win98です。 ただ、XPの方に見てもらって消えてるようでした。
XPのヒトがIE7だっつーならわかんないけど、 IE6は基本的に同じ。
>>329 少し気になるのは、potision段組みなのに、#mainにmargin-left使ってる事。
CSSも2枚あるっていうし、あまり複雑にするとつまんないミスしやすくなると思う。
332 :
Name_Not_Found :2006/05/31(水) 15:54:50 ID:mmov2LCq
解答者の方に質問なんですが 真っ新な初心者状態からHTMLやCSSを学んで今のみなさんのようなレベルになるのにどれくらいかかりましたか? ついこの間から興味を持ち始めて独学で勉強してるんですが少し気になりました。
他の人に見てもらって消えてるなら、ここに書いた以外のところが原因になってるんだろ。 ちゃんと再現する最小構成って言ったんだけど、 自分でここに投下したソースから確認してもちゃんと消えるか?
やる気ある人なら2週間もあれば普通にいけるようになる筈。 ブラウザ毎の共同の違いを吸収しようとするとかなり知識が必要になってくるけど、 そこまでしなかったらの話ね。
>>332 HTMLは2.0の自体から知ってるから参考にならないけど、
CSSは趣味の合間に半年ほど。
なるべくStrictなHTMLソースを借りてきて、CSSは見ないでデザインを再現する。
ttp://alimika.alib.jp/satomican/ ここのリンク先とか超Strictなソースの人が多いから、参考に。
で、それがある程度できるようになったら、どれか一つのHTMLソースを共通テンプレとして
同じHTMLで色んなデザインをCSSで作りまくる。
336 :
Name_Not_Found :2006/05/31(水) 16:10:29 ID:mmov2LCq
>>334 2週間ですか…。
自分の場合まずPCそのもに対しての知識やタイピング能力などの初歩中の初歩もまだまだなんで
このスレなどを参考にして頑張ります。ありがとうございました!
337 :
Name_Not_Found :2006/05/31(水) 16:18:40 ID:mmov2LCq
>>335 親切にありがとうございます!
正直何からどう始めればわからなかったのでかなり参考になります!
共同じゃなくて挙動ねw
ミスった。
>>336 スレの最初の方に載ってる解説サイト見ながら、
Winユーザならez-htmlとかHTML Project2とかのエディタで
実際にコンテンツ作ってみると良いよ。
339 :
316 :2006/05/31(水) 16:23:48 ID:???
340 :
Name_Not_Found :2006/05/31(水) 16:25:00 ID:mmov2LCq
>>338 Macユーザーなんですけれどもやってみます!
そういえば、みんなエディタは何使ってる? 俺は一通り試してperlも弄るから、秀丸+入力補助マクロ等で落ち着いたんだが、 他の人はどんな環境なのか気になる。
<img alt="イメージ" align="left" /> 画像はどこ?w
ま、なんちゅーか ほんちゅーか・・・
Macだとmi辺りがいいかもね
>>341 xyzzy
>>339 positionがstatic以外のボックスが上に来てるから。
>>341 ez-HTMLとWZ Editor。
>341 Macでmi使用中
349 :
316 :2006/05/31(水) 16:56:23 ID:???
既出かもしれませんが色々調べても分からなかったので質問させて下さい。 初歩的な質問で申し訳ないです。 <body> <div class="bg"> <div class="head">ヘッダー</div> <div class="main"> <div class="box">表</div> <div class="window">写真</div> </div> <div class="foot">フッター</div> </div> <body> 簡略化しましたがこんな感じで、windowをboxの上に重ねて表示させたいと思い、 mainとwindowにposition:absoluteを適用しました。 そうするとfootの位置がmainを無視してheadの真下に来るようになってしまいました。 IE6で確認していますが、FFでも同じでした。 それぞれのボックスには横幅が設定してあります。 footをmainの下に表示させるためにはどのようにすればいいのでしょうか? どうかよろしくお願い致します。
>>346 もちついて今迄ついたレスを最初から全部嫁。
potisionの使い方をよく見れ。
はぁ?
どこにレスしてんの?ってことでしょ。 逆ギレこわいこわい。
>>350 だーかーらー、CSSの質問ならCSSソース出さなきゃ。
あんさん アンカー使い方 ちごうとるでー
あっ しもた!
359 :
316 :2006/05/31(水) 17:22:24 ID:???
>>351 落ち着いてpotisionの構成から見なおしてみますね。
ありがとうございました
はぁ?
ひぃ?
はぁ?
>>356 失礼しました。
簡略化したソースに合わせるとこんな感じでしょうか…
.bg {width:600px;background-image:url(bg.jpg);text-align:center;}
.head {width:550px;background-color:#333333;}
.main {width:550px;background-color:#CCCCCC;position:absolute;}
.foot {width:550px;background-color:#FFFFFF;}
.box {width:550px;background-color:#FF0000;}
.window {width:200px;height:200px;background-color:#00FF00;position:absolute;250px;}
これってpositionの使い方間違ってますか?
すみません打ち間違えました。 .window {width:200px;height:200px;background-color:#00FF00;position:absolute;left:250px;} です…
自演だらけ。
366 :
質問あげ :2006/05/31(水) 18:01:32 ID:F96K5JXv
疑似フレームを作ってます。 メニュー部分を固定したくて /*メニュー用*/ .menu TABLE{ width : 140px; height :100%; border:none;} ↑に position:fixed; を加えたら .menu a:hover { text-decoration:none; color:#C0CDD6; position:relative;left:2px;} ↑部分のpositionが無効化してしまいました。 メニュー用CSSのBODYやフレームレイアウト用CSSの.menuに fixedを入れてみましたが同じでした。 スクロールしてもメニューが移動しないようにしたいのですが どうすればよろしいでしょうか。
メニューがtableって・・・ つーかa:hoverのクソウゼエpositionが無効化したって、 あんたがやりたいことはメニューのほうのposition:fixedなんだから、 そっちは無効化されてないんだったら別にいいじゃん。
>>363 ,366
positionの質問ばっかだが、むやみやたらと指定しても意味無い。
何に対してabsolute or relativeなのか、ちと考え直した方がいいと思う。
ぽじぽじはりらりらりんでかんたん♪
a:hover で background-color を指定した場合 <a href="〜"><img src="〜"></a> の画像の上とか下とかに適応されてしまうのを避ける方法ありますか? IEでは出ないんですが。
>>371 d
それが
a:hover img { background-color: 〜 }
は違うみたいなんですよ。
background-color: transparent;
とかやってみたんですが
???
374 :
370 :2006/05/31(水) 21:29:10 ID:???
a:hover { background-color: #222; } a:hover.img { background-color: transparent; } <a href="〜" class="img"><img src="〜"></a> で fx, Opera のbackground-color 消えました。 クラス指定するしかなさそうです。
ブラウザによって、textarea で表示される文字の大きさが変わってしまい、それによってフォームの大きさが変わってしまうんですが、これをCSSでどうにかできないですか?
フォントサイズ固定は究極的には無理。
フォントサイズではなくて、強制的に width 指定できるといいんですが・・・。 cols や rows だと、フォントサイズに依存してしまうので。
??? widthプロパティを知らないんだったらテンプレ見ておいで。 それともそれ以上に何か期待してる?
IE7で
>>11 の スタイルシートスタイルブック を見ると、崩れまくるのが気になる
何でかは知らん
詳しく見てないからわからんが バグ修正しきれてないのにIE用のハックが効かないようにしやがったせいじゃないか?
ちなみにIE7だと、ブログでも似たように崩れるのが多いね IE7が悪いのか、htmlのソースが悪いのか
アンダースコアじゃなかったっけ
IE7でレイアウト崩れるのは以前のハックがきかなくなったせい。
#あるとリンクポップアップできないから無しにしてくれ。
おまえらが無能だってことだろう。
なんのこっちゃ
vimとかxyzzyは色々設定とかマクロとかする手間があるから、 敷居の高さとあいまってどんな感じなのかわかりづらいし別にいいんでね? 俺は秀丸使ってるんだが、html組むだけなら大差ないっぽいのがわかったし参考になった それに初心者だらけのスレで、こんな敷居が高いエディタで布教も糞もないだろ
>>391 そんなにあなたが初心者だって自慢しなくてもいいですから。
今、イメージをフロートさせ、直後のテキストをまわりこませ、次にくる段落のテキスト は自動的にクリアする、というのを考えてるんですが、どういう記述がもっともいいのか わかりません。 <img></img> <tr></tr> <td></td> <img></img> <img></img> <tr></tr> <td></td> なんてのがあったとき、 td+img,td{ clear:both } とすると自動的にできるとおもうのですが、イメージを縦に並べてフロートさせて、 イメージとイメージの境界を無視してテキストが自然に流し込まれるようにしたい ばあいはどんな風に記述すればいいんでしょうか?できればクラスやidは一切使わずに やりたいと思ってます □イメージの境界線↓無視して □自然に流し込まれま す
>>393 釣りをしたいならもうちょっと高ラベルでおながい。
すいません、自分で読み返して何をいいたいのかが解らなくなってきました。 とりあえずもうちょっと考えてから質問します
* { clear: left }
>>398 z-css.js の中身を見てもわからんのかね?
400 :
398 :2006/06/02(金) 06:19:17 ID:???
すいません 自己解決しました
401 :
398 :2006/06/02(金) 06:19:50 ID:???
>>399 見たらわかりました
ありがとうござあいました
402 :
Name_Not_Found :2006/06/02(金) 10:28:48 ID:j5rP8UbK
質問です HEADタグ内で <link rel="stylesheet" href="style/****.css" type="text/css"> 等と記述してCSSファイルを読み込む場合 最大いくつまでのCSSファイル読み込みまでとするのが適当でしょうか? 読み込むCSSファイルが多すぎるとバグが発生するなどの症状もあるのでしょうか? それともCSSに対応しているブラウザが対象なら特に制限は無いのでしょうか?
1度に大量のCSSファイル使うことはそうは無いんじゃないかな・・・。 ie3とか使わないなら特に数の制限は無いはず。
ハロー(注意報)。 えーと、ページ内にAdSenseを埋め込むときに、 GoogleのサーバにアクセスしてAdSenseが表示されるよりも前に レイアウトを確定させるにはどうすればいいんでしょうか? また、CSS使用時におけるページ表示の高速化についてどこかに情報はありませんか?
>>403 >>404 レスありがとうございます!
今作ってるホームページのCSSリンクが4個5個になってしまっているので
これはなんとかまとめた方がいいのかなと思って質問しました
でもこの程度なら問題なさそうですね
ありがとうございました
まとめた方が良いにきまっとるが。 つか、たぶん無茶苦茶。 検証してもらえ。
>>383 うああ忘れてたあぁぁ・・・
いつごろ本発表になるんだろ
>>408 もう出てるぞ。
βとは言ってもあれで終わりで一般ユーザに公開されてる。
試験的に使ってるが いくつかのバグは残ってる。 で、アンスコハック、スターハックが効かないことは確認した。 他にもだいたいのIE用ハックは効かないみたいだ。 つーかIE7はあれで確定なの?
>>409 サンクス
なんか嫌な汗かいてきた・・・
俺はプロではないけど知り合いの店の通販サイトがもうすぐ公開予定。
>>他にもだいたいのIE用ハックは効かないみたいだ。
なんてきいちゃったらもう・・・現実から逃避してとりあえず今日は寝るか。。
明日試してみるよノシ
>>410 あとはセキュリティ以外はいじらないってさ。
<style type="text/css"> <!-- a.hoge.hover{color:white} --> </style> の様にすれば、hogeクラスのhover時に文字列の色を白に出来ますが、これを <div class="hoge" style="color: balck;">aaa</div> のようなdivやspanのstyle属性内で、hover時のスタイルを直接記述するにはどうすればよいのでしょうか?
じゃう゛ぁすくりぷとを絡めなきゃ無理なんじゃない?
417 :
Name_Not_Found :2006/06/03(土) 20:52:50 ID:d0ePxfst
>>413 <div style="初期スタイル" onmouseover="this.style.cssText='マウスオーバー時のCSSテキスト'" onmouseout="this.style.cssText='マウスアウト時のCSSテキスト'">aaaaa</div>
ヤフーから読み込んだ画像をfilterで色を変更させたいと考えています。 ネガポジ反転の場合はタグに直接 style="filter:invert()"でjavascriptを設定しなくても設定が反映されますが style="filter:light()"でonLoadを使用せずに色を指定する場合で直接タグに書き込みたい場合はどうすればよろしいでしょうか。 今の状態 <img src=〜 style="filter:light;position:relative" onLoad="this.filters.light.addAmbient(205,205,255,100)"> よろしくおねがいします。
>>418 そもそもfilterはCSSじゃないからスレ違い。
外部cssでbackground-colorが指定されたフォームの background-colorをonfocusで処理するにはどうしたらいいでしょう?
421 :
418 :2006/06/04(日) 13:16:29 ID:???
>>420 :focus擬似クラスの話をしている?
onfocusイベントハンドラだったらスレ違い。
423 :
420 :2006/06/04(日) 13:22:28 ID:???
jsスレ行ってきます
424 :
Name_Not_Found :2006/06/05(月) 05:22:50 ID:i/lM1Yp1
リストで、アンダーラインにドットを適用させたいんですが、文頭の数字には付きません。 文頭の数字にも適用させるにはどうすればいいですか?
425 :
Name_Not_Found :2006/06/05(月) 11:50:58 ID:pOc0oeBz
426 :
425 :2006/06/05(月) 12:02:08 ID:pOc0oeBz
すみません。 どうやらキャッシュあたりの問題だったようです。 問題なしでした
下の図でボックスを div.box { position: absolute; right: 10px; top 30px; width: 300px; height: 300px; } のようにして絶対配置にしているのですが、 ブラウザのウィンドウ幅を縮めるとボックスと 文字が重なってしまいます。指定の幅以上 縮めると横スクロールバーが出るようにしたく、 body { min-width: 600px; } としてみましたが、だめでした。 (そもそもIEがmin-widthに対応していないので この方法は使えませんが) 文字の幅は可変、ボックスの幅と高さは固定で、 文字とボックスが重ならないようにする方法は ないでしょうか。 ┌──────────┐ │ │ │ ┌────┐ │ │文字 │ボックス │ │ │文字 │ │ │ │文字 │ │ │ │文字 └────┘ │ │文字 │ │ │ └──────────┘ フロートは使わないでお願いします
ダミー画像
>>427 別に絶対配置にしなくても
div.box {
margin: 30px 10px auto 文字の幅px
width: 300px; height: 300px;
}
ではいけませんか?
430 :
Name_Not_Found :2006/06/05(月) 22:06:57 ID:oYM003Jp
教えてください。 CSSで背景画像を指定してブラウザで確認しても画像が出てきません。 画像はCSSファイルと同じディレクトリにあります。 本を見ながらやっていて、本の通りにしているつもりなんですが・・・。 試しに他の画像やセレクタでやってみても表示されませんでした。 jpeg、gif、pngのどれも同じ結果でした。 今の状態です。 h1 { background-image: url("title1.png"); background-color: #a5c9c1; height: 90px; font-size: 12px; color: #fafdff; padding-left: 10px; padding-top: 10px; margin-bottom: 40px; } 宜しくお願い致します。
>430 全角
433 :
430 :2006/06/05(月) 23:00:54 ID:???
>>431 >>432 ありがとうございます。
width指定しましたが背景の色の部分のはが変わりましたが
画像は表示されませんでした。
全角とは、どこのことでしょうか。
質問ばかりですいません。
>>430 width指定はいらないがww
url("")←ダブルクォーテーション付きは環境によっては無視されるから、なしのほうがいい。
>>430 cssまんまコピぺでIE6 FX Operaで表示できた。
ブラウザからtitle1.pngは表示できてるんだろうな?
437 :
427 :2006/06/06(火) 09:22:07 ID:???
438 :
430 :2006/06/06(火) 09:56:43 ID:???
>>434 ""は取ってみましたが、変わりませんでした。
>>435 IE6なんですが、ブラウザで画像が出てきません・・・。
色々調べてみます。
アドバイス頂きましてありがとうございました。
ブラウザのキャッシュ読み込んでるんじゃない? Ctrl+F5とかでリロードしてみ。
>>437 つっかえ棒を入れるんだよ。
このスレ内検索汁。
IEでレイアウト整えるのにfloatを使った場合、 floatを指定したボックスの高さ途切れると、 多少ずれるのはしょうがないのですか? float:left ↓ ■ ■■ ■ ■■ ■ ■■ ■ ■■ ■■←ここで少しずれる
442 :
ひゃっほい :2006/06/06(火) 20:05:37 ID:???
ソース! ソース!
>>437 文字の右側にボックス幅分のマージン取れば
重ならないのでは?
445 :
Name_Not_Found :2006/06/06(火) 22:58:35 ID:AOAeK0nB
質問です。CSSで上下の中央に表示するにはどうすればよいのでしょうか? htmlならvalign=centerで出来るのですが。CSSだとわからなくて。 alignで左右の中央にはできたのですが(HTML,CSSともに)上下の中央だけはわかりません。 idとして書きたいのです。 #tyuuou{; } 上の{ }にどう書けばよいのでしょうか?
つ【テンプレ】
447 :
441 :2006/06/06(火) 23:00:19 ID:???
>>443 サンクス。
そうか、height: 0px;で回避すればよかったのか。
とっても助かりました。
448 :
445 :2006/06/06(火) 23:15:20 ID:???
テンプレはできるかぎり見たつもりなのですが、 CSSではそういうことは出来ないということなのでしょうか? Operaの8.5を使っています。
つ【FAQ6】
>>449 様
ありがとうございます。出来ました。
最初読んでも意味不明だったんですが、
要点だけコピペしてたら、完成しました。
自分だけ見えれば良いってわけだな・・・
質問です。 htmlページに<span class="xxx">あああ</span>と記入していて css.cssのファイルでclassのxxxの書き方はいつも .xxx {border(ry}とかだったんですが間違いなのでしょうか? span.xxx {ry} と言う風にしているサイトがあるのを今頃初めて見つけて、 自分のは間違いなのかと思ったので…
>>453 どちらも正しいです。
.xxxとした場合、pにもspanにも使い回しできますよね。
span.xxxとした場合、spanにしか使えませんが、何の要素に指定したか一目でわかる訳です。
ありがとうございました、ほっとしました。 そうですか、span.にしたらそれにしか使えないと言う意味だったんですね。 勉強になりました。
body{ font-size:85%; }としてる中、1ヶ所フォントサイズを大きくしたい部分があって .sample{ font-size:95%; }としました。 そしたらsampleで指定した文字は小さくなってしまいました。 これは85%の中での95%なので小さくなってしまったんだろうと理由はわかったのですが もしこういう時85%指定の頁で、ある箇所の文字を大きくする場合の方法は px、pt指定しかないのでしょうか・・?
>>456 問題。
1×0.85=0.85
0.85×X=0.95
X=?
むじゅかしぃー
>>457 あ、そっかそう言う指定すればちゃんとなるじゃn(ry( ;´Д`)
難しく考えてましたw
なんとかなりそうです。
background: urlとbackground-imageはどっち使う方がいいですか? 後者でしょうか
>>460 それは、「あの犬を「犬」と呼ぶのがいいでしょうか、「コリー」と呼ぶのがいいでしょうか」
という質問と似たようなものだぞ。
僕は男です、僕は女です 似たようなもんか。
左がcss1でIE3はこれにしか対応してなくて 右はcss2とかあって、どっちを使った方が無難なのかわからなかったので… どっちでも特に問題なく、どのブラウザでも見られるんでしょうか?
エスパー! エスパーっ!
>>463 古いブラウザは無視する。それが古いブラウザを使い続ける人にとってもいずれ福音となる。
迷うのは、あなたに取って、どちらでも良いという証拠。
実際に実現したい表現になれば、どっちでも良い。
"べき"論が欲しいのなら、w3cで以って勉強して見る。
フロート使って疑似テーブル作ったは良いものの センタリング(margin:0 auto; text-align:center;)ができない…orz clearであれこれやっても解決できない(´・ω・`)どうすればいいんでしょうか?
>>466 全体をdivで囲って、そのdivをセンタリング。
疑似テーブルという物は知らないけど。
>>467 それでならなかったので質問に来ました(´・ω・`)
たとえば
div#table2 {
float:left;
width:202px;
border:1px #666666 solid;
}
div#table3 {
width:202px;
border-left:1px #666666 solid;
margin-left:27px;
float:left;
padding:9px;
}
として、htmlに
<div id="center"><div id="table2"><div id="table3">testet</div></div></div>
これをページのセンターにもって来る為に上記のものをcssにかきました。(center)
でもできませんでしたorz
大きな間違いや問題があるのでしょうか
>>468 なんで三重入れ子でfloatがそこなんだ・・・
上のは所々端折ってる部分があるのですが、 デザイン上そうしないとどうしても崩れてしまうんで… あと今id=containerもやってみましたがだめでした。
>>470 いや、端折るとかの問題ではなくてな・・・
構造の正しい形程度は端折らないで提示してくれ・・・
>>468 ┏━━━━┓
┃┏┓┏┓┃
┃┗┛┗┛┃
┗━━━━┛
こうしたいんじゃないの?
>>468 だと
┏━━━━┓
┃┏━━┓┃
┃┃┏┓┃┃
┃┃┗┛┃┃
┃┗━━┛┃
┗━━━━┛
こうなっちゃうぞ
| ̄| ̄ ̄| |_|__| こうなった。by mac これをセンターに持ってきたいってことか?
>>466 では出来なくて駄目もとで
float:right;にしたら右寄せに動いてくれました!
ここから右の隙間指定してセンタリングっぽくできそうです。
こういうのにfloat:right;使っていいものなのか不安ですが( ;´ー`)
>>473 これです。
>>474 それじゃセンタリングにならない。
ソースに肝心の#centerを書かないあたりといい、勘違いが多いタイプだから気をつけよう。
margin:0 auto;はwidthを明示しないと使えない。
ie過去互換で左右のマージンautoではセンタリング出来ない。 その場合 bodyにtext-align center centerに左右のmarginをauto 標準なら centerに左右のmarginをautoで出来るはず
>>475 >widthを明示しないと使えない
指定もした上でできなかったので相談にきました。
>>476 ありがとうございます。
>>477 >>468 のソースからはとてもwidth指定したようには読めないが?
つーかid="center"に対するCSSが無いのだがね
IEで出来なかったとか、、しかし
>>466 ではtext-align:center;としてるし。。
明示の意味が分からんかったんかな。どうでもいいが。
上のと多分、似たような質問だと思うのですがお願いします。 ・掲示板に使うスキン(HTML部分) ┏━┳━┳━━━━━┓ ┃ ┃ ┃┌─┬─┐┃ ┃ A┃B ┃│ │ │┃ ↑ height指定はなし ┃ ┃ ┃│ │ │┃ ↓ サイズフリー ┃ ┃ ┃└─┴─┘┃ ┗━┻━┻━━━━━┛ ・太い枠はborderで囲む(2px/Aの横Bの横もborder有り) ・右側・中のはborder無し ・ABに文字はない。背景画像を敷き詰める。同じ幅(25px) <div class="A"></div><div class="B"></div>(ロココ←こんな感じで)とするのもでは AとBの背景画像が上で言う所の"外枠の下ライン部分"までとどかず、レイアウトが 崩れてしまいます。白背景だったらこれでもいいのですが…。 なので高さは一番右に合わせると言う事で入れ子して右が縦に伸びた時に どこまでも付いてくように↓としました。 <div class=A><div class=B><div class=migi></div></div></div> でもさらにこれをページ右側に寄せるのでdivタグがまた出てきますし、 もっと簡単な書き方あると思い質問にきました。宜しくお願いします。
>>480 >・太い枠はborderで囲む
のなら、いずれにせよ全体を囲むdivが必要だと思うが。
>>481 氏の言う通り、AB合体してしまえば2カラムだし、divdivするのは仕方ない。
>>481 (.ω・`)…
>>482 >いずれにせよ全体を囲むdivが必要
>divdivするのは仕方ない
囲みすぎるのはよくないかな?と不安だったり、他の方法などありそうで
気になってましたが、
この場合はこれしか方法はない&これでおkみたいで一安心です。
徹夜して試行錯誤した甲斐があった( `・ω・´)
>囲みすぎるのはよくない そりゃまあよくないよ、というよりデザイン主体にしてマークアップすることがそもそも間違ってるよ。 正しいHTMLだけでできるデザインにしてみたら?というのが一番現実的な答え。
>>484 >正しいHTMLだけでできるデザイン
そもそもこの人はそれを聞きに来たんじゃなかったっけかw
できないデザインだとわかったのに変えないってのが問題なんじゃ?
?
もっと簡単に作る・・・ 今やってみてるが背景画像が厄介かもしれん こいつがいるからうあああryとなる
ボーダーを画像にするのに何か問題あるのか?
いいんでね?
ね、出来上がったCSSファイルのライブラリを整理する方法ってない? アルファベット順とか。いっぱいあると探せなくって。。
そんな作りにした事自体がおかしい。
>>491 言ってる意味がわからん。
そんな作り方したことを怨め。
いや、そうなんだけどさ。ごっちゃになってるヤツをセレクターごとに 分けて吐き出してくれるソフトとか、探しやすいようにABC順にソートして くれたりするソフトの機能があったら便利だなと。。フリーで。
作れ
496 :
Name_Not_Found :2006/06/09(金) 18:54:50 ID:xDo2rouN
セレクタの並ぶ順は意味があるのでソートしちゃだめです
td {text-align:center} [略] <tr> <td >あいうえお</td> <td colspan="3" >かきくけこ</td> </tr> としても、「かきくけこ」の方はセンター揃えにならないんですけど、 何が原因でしょうか?
498 :
Name_Not_Found :2006/06/09(金) 19:59:21 ID:xDo2rouN
ええと…CSS以前の話なんですが。 外部CSSでHTMLの文書構造からデザインを完全に切り離して作る場合、 HTMLでimgタグは使わない(でcss: backgroundで指定)のが正しいのでしょうか?
画像が情報か装飾かで切り分け
>>499 装飾のための画像は、たとえばCSSを切り替えたときに意味がなくなるからCSSでのみ指定。
CSSを切り替えても必要な、文書の内容を補足する画像ならば、imgないしobjectで埋め込み。
>>491 CSS編集だけに使うのはもったいないが、VSとかVWDとか。
hoverはa要素以外では使えないのでしょうか? たとえば、<div>〜</div>で囲まれた領域にカーソルが来たときに その領域の背景色を変えたりすることは出来ないのでしょうか?
<h4>につける場合 H4 A:hover { color: #ff0000;} とすれば<h4>要素にカーソル持って行ったときそこが(リンクじゃなくても)光るけど a要素以外はだうだろ…できないんじゃないの?
>>503-504 まずは、試してから・・・なっ!
div { background-color: #FFF }
div:hover { background-color: #000 }
<dl compact>をスタイルシートで表現したいんですが、 dt{ float: left;} でいいのでしょうか?なぜかIEだと表示崩れが・・・・・
>>506 IEの開発者に文句言ってくれ。
私に文句を言われても困る。
テンプレにありましたすいませんdt
おまえにいったのか
ふっふっふ・・・ 甘いな
来ンな 面白いトコ行け
流れを切ってしまい、すみません。 CSSで<link rel="SHORTCUT ICON" href="./img/favicon.ico">を定義することって可能でしょうか? ぐぐってみると、META属性なので無理っぽいんですが、詳しい方よろしくお願いします。
>>520 CSSじゃ無理だと思うが。
サーバのドキュメントツリー上のルートに 'favicon.ico' を置けるならそうしてみて。
IEはダメダメ...これでいいんだろ?
>>506
>>520 無理。はっきり無理。きっぱり無理。どうあがいても無理。
>>521 ありがとうございます。
とりあえず、ドキュメントツリー上の手段を試してみます。
>>522 そんな。そこまで否定しなくてもw
とりあえず、ありがとうございました。
質問です IE5,0ってインライン要素にbackground-imageつけることは無理でしたっけ?
CSSで鳥の切り抜きを作って笑いたい。
んーなんかIE5、0でみたらインライン要素のところだけバックグラウンドイメージついてなかったきがしたんですが なんか条件によってつかなくなるとかあるんですかね?
文字に影をつけたくてfilter: dropshadow を適用したら、 SP2のアクティブコンテンツブロックが出るようになったんだが何でだろう? 検索してみたら同じ症状の人いるようだが解決方法はわからんかった
>>528 ActiveXオフにすればいいよ。
filter:dropshadow見れないけど
カラム落ちすることがリキッドレイアウトの極意ですよね?
カラム落ちするソリッドレイアウトもある。 カラム落ちしないリキッドレイアウトもある。
次の書き方って認められているでしょうか?(ひとつの要素内に複数のID,CLASS) (例) <div class="index" id="top_index">・・</div> <div class="index" id="bottom_index">・・</div> JavaScriptとかでIDにアクセスするときなど結果的にこうなることがありますが CSSの解説などではまだ見たことないです。 CSSもJSもIDの意味は同じはずだから別にいいかなと思い試したら 特に問題ないようなんですが、裏がとれません。 よろしくお願いします。
↑よくよく考えるとスレ違いなのかも? CSSに関連したことのつもりだったので、よかったらよろしくですm(_ _)m
HTMLの質問だな。
>>535 書き方自体に問題はないが、意味が変じゃね?
<div class="index top">
<div class="index bottom">
のほうがマシな希ガス。
539 :
Name_Not_Found :2006/06/11(日) 04:30:46 ID:QjMoGqaD
スタイルシートだけでスタイルシートで囲んだブロックをセンタリングしたいんですけど、 うまい方法はないでしょうか?
542 :
535 :2006/06/11(日) 06:04:48 ID:???
>>538 ありがとうです。なるほど〜"意味"とかはまったく考えてませんでした。
共通の指定はclassにまとめて、個別の指定はidで、という
単純発想のなせる技です・・・記述の簡略化のつもりorz
もう一度本来の意味を確認して考えてみますm(_ _)m
>>541 それはCSSじゃないですね。a要素内のtitle属性ですお。
#id は他の指定が無視されるとかなんとかいうバグがどっかになかったっけか。
>>543 単に優先順位値の計算をお前が間違えてるんじゃね?
第三者の介入w
ヒント:飲みかけのコーヒー
551 :
Name_Not_Found :2006/06/11(日) 16:53:08 ID:NKftj9M8
すいません。教えてくださいm(_ _)m 透明部分を含んだpng-24形式の画像を貼り付けたのですが、 透明部分に灰色が描画されてしまい透明になりません。 png-8形式だとうまくいくのですが、 もしかしてpng-24形式だと透明使えないのでしょうか?
ヒント:仮性
553 :
Name_Not_Found :2006/06/11(日) 16:54:33 ID:NKftj9M8
方形?
555 :
Name_Not_Found :2006/06/11(日) 17:26:38 ID:NKftj9M8
>>552 ,554
ありがとうございましたm(_ _)m
>>554 英語なんて読めるわけねーだろ糞虫太郎が日本語で解説してるサイト晒せ犬畜生にも劣るウンコブリッあっ臭っ!チンポチンポコチン
558 :
Name_Not_Found :2006/06/11(日) 18:53:20 ID:V7AUg+Dj
ヒント:ヤスの背中
ヒント:Web先生が八つ当たりしてる
>>551 IE6以下は半透明PNGに対応してないぞ。
561 :
Name_Not_Found :2006/06/11(日) 19:34:05 ID:NKftj9M8
png-24では現在のブラウザでは非対応なのですね〜。 こまりまつた。 png-8ですと小さな文字が綺麗にでませぬorz
背景色にあわせたアンチエイリアスが効いてるように256色で作ればいいんじゃない?
563 :
Name_Not_Found :2006/06/11(日) 20:17:00 ID:NKftj9M8
はい。 あきらめてそうしまつたです。 ありがとうございましたm(_ _)m
↑なんかむかつく口調だな
安心汁、564ほどじゃない。
無理に用語を使わなくても普通に書けば良いと思うよ
用語?アンチエイリアスの意味も分からない?
>>567 あのなぁ、
>>563 の「そうしまつたです」に対してレスしたんだ。
2ちゃん用語を無理に使わなくていいよーってね。
ここの住人は意外ともろいものだよ。CSS以外は。 だからWebページも作れやしない。
Web先生は無理に煽らなくていいよ。
浦島たろう状態の自分には WEB先生の意味がわからん…。
少なくともここには来た事ないだろ。 コンパクトなレスなど出来ないし。
img要素をCSSの背景画像に置き換える方法として 1.display: span 2.? 3.text-indent:-9999px の3つの手法が過去スレで紹介されていたと思うのですが 2の方法がなんだったか良く覚えていません。 たしかpaddingの部分に内部テキストを書いてどうにかして隠す方法だったと思います。 3の方法で作っていて困ったことがあったので2の方法を教えてください。
>>575 display: spanってなんだよw
2はたぶんこれか
height: 0;
padding-top: **px;
overflow: hidden;
IEの後方互換考えるならハックする必要がある。
3の方法で困ったことってのは、
IE5以前で要素ごと飛んでっちまうあれか?
それならfloatすればOKのはず。
それはそれでややこしいことになったりするが。
578 :
575 :2006/06/12(月) 20:38:31 ID:???
>>577 教えてくださってありがとうございます。
3の方法で困っていたのはfirefox1.5対策として適用していたoverflow:hidden;でした。
ですので2の方法も試すことができませんでした。
a:hoverとpositionを使ってa要素外に子要素を出現させるやり方を試していたのですが
overflowで隠してしまうと子要素が見えないのです。
結局、子要素としてspanを用意して絶対配置とし、topマイナス方向に飛ばしてテキストを隠すことにしました。
579 :
575 :2006/06/12(月) 20:45:52 ID:???
背景画像の置き換えについてはこれで解決したのですが上記のa:hoverで子要素を出現させるところで新たな問題にぶつかりました。 レイアウトはfloatを使った2段組で、左の段のリンクリストにカーソルを合わせると右の段の上(z方向)に子要素が出現し、 右の段の場合は左側の段の上(z方向)に子要素が出現する格好です。 段を組んでいるブロック要素はいずれもstaticな配置なのですが内部的に重なり順を持っているらしく 後にマークアップしたものの方が重なりが上になります。(IE6とFirefox1.5で確認) ですのでHTMLソース上でa:hoverで出現させたい要素よりも後にマークアップした部分は 出現させたい要素よりも重なりが上になってしまいます。 この仕様だと上記のような2段組で左段、右段共に子要素を出現させるためには Javascriptを使って左段、右段のz-indexを変えてやるくらいしか方法が思いつきませんでした。 もっとスマートな方法がありましたらどなたか教えてください。
>>579 z方向に出現って何だよ?
ソース出せ。
ソースドロボウ
んじゃイラネ
583 :
Name_Not_Found :2006/06/12(月) 22:25:34 ID:pfeCxE/o
ちわー三河屋でーす!ソースっすか?
マウスが上に来た際に、その文字列の色ではなく、他の場所の文字列の色を変更する方法を教えてください。
CSSレイアウトでデカ画像のテーブルスライスなんてのは、 諦めてtableブチ込む以外ない?ない、というかtableにするべき?
どうしてもやるなら素直にtable使った方がいい。 スライス画像の配置ということ自体、CSSの利用目的からはずれてるから。
>>587 ここにフリーのdivがある!!
ここをulでマークアップすれば背景画像を置ける!!
とかそんな作業でフリースペースを見つけていく。
テーマは「発見」
質問です。 IE5.0ってインライン要素にpaddinつけられないですかね?
>>591 気をつけろ。
解りやすく解説しないと、
「日本語でおk」
と言われてしまうぞ!
ぁーdisplay: block;してぱっでぃングつけろってことですか・・。 やっぱりそれしかほうほうはないのですかね・ それつかうと、横並びしたいとき、幅していしてあげないといけないじゃないですか・・。
block要素にvertical-align: middle; を適用させることはできないようですが、 文字をblock要素内の中央に設置するにはpadding-topで指定するしかないのでしょうか?
597 :
596 :2006/06/14(水) 11:10:05 ID:???
>>9 の5にありましたどうもすいません。無理っぽいですね。
つーか議論だか煽りあいだかわからんようなページですね。
お聞きしたいのですが <div id="con_image"> <img src="common/*****.jpg" alt="" width="800" height="180" /> <br /> <img src="common/img_top_mainimage.jpg" alt="" width="800" height="15" /> </div> こんな感じで単純に画像2枚を縦に並べてるんですが <br />を入れて空間をあかないようにするにはどうすればいいのでしょうか。 現在IEだと12px位画像と画像の間が開いており、ネスケだと2~3px縦に空間が出来てしまっています。 このような場合<br />にどの様な要素を入れればいいのでしょうか。
<br />を入れなければいいのでは。 入れる必要あるの?
>>600 おまえ、世の中には800×2px以上の解像度のPCなんてザラにあるぞ。
602 :
598 :2006/06/14(水) 11:50:28 ID:???
>>599 XHTMLで構築しているのでテーブルは極力避ける為
URLの方法は出来ない状態です。
line-height:0;もネスケでは数px空いてしまいますね。
>>600 縦に画像2種類表示する形なので<br />要素は必要だと思われます。
用は改行による空間を無くしたいのです。
現状のソース
---
<div id="con_image">
<img src="common/*****.jpg" alt="" width="800" height="180" /><br />
<img src="common/*****.gif" alt="" width="800" height="18" />
</div>
なぜかネスケの場合縦の空間が開いてしまうんですよね。
>>602 テーブルに関係ない。キモのところをちゃんと嫁。
>>602 > XHTMLで構築しているのでテーブルは極力避ける為
XHTML Basic 1.0 か?
そうでないなら、むしろHTML以上にテーブルを有意義に使えるだろう。
605 :
598 :2006/06/14(水) 12:09:02 ID:???
>>603 imgに対してvertical-align:bottom;要素をCSSで組み込んだら
高さの隙間がなくなりました。
有難う御座いました。
画像にdisplay: block指定して<br />無くすって方法もあるが邪道か?
いや、それが王道
imgはpでかこむべきでは?
根拠を述べよ
普通にdiv直下にinline要素は嫌われる罠。
文字もpでかこうのとおんなじで、画像もpで囲って意味もたせてあげないとだめじゃね? 別に場合によってはpじゃなっくてliとかでもいいとおもうけど。
div要素を取り払ってもきちんと意味が通るようにすべきだよね。 まぁ激しくスレ違いの話題っぽいけど。
divでいいじゃん。divを嫌うなよ。divがかわいそうだろデブどもが
デブはピーザを食らうべきだ。
>>613 誰も嫌ってはいないと思うけど。
ただ何でもかんでもdiv要素にするのはよくないってだけでしょ。
>>614 なんの話だよw
Div病だのDiv厨って言葉はいつごろ生まれたの?
メキシコオリンピックの翌年ぐらいだったと思います
そんなレスは期待してないんだけど
DIV全部とっぱらったぜ! でもなぜか満たされないんだ DIV削る為に別に必要もない要素を置いて何か意味もないこと詰め
大文字の時点で終わってる
div使うのは厨だけ
やっぱspanも使わんの?
divよりも更にspanの使いどころって難しいから使わないと思うんだが・・・
使い方知らないだけ何ジャマイカ
>>624 使う必要はなくて済むから汎用要素なんじゃん。
質問です tableタグは指定された高さがからはみ出た場合、 それに合わせ(はみ出さないようにと)高さが変わりますよね。 DIVなどでheight指定していた時、そのように高さからはみ出た場合に 上記tableみたいにしてくれるタグはありますか?
spanは使わんな。強調ならemとかstorong使うし。 逆にspan使う人は、どんなとこで使ってるのだろ?
>>627 タグじゃなくてプロパティだろ。
min-height。
>>627 height指定しなければいいんだよん
>>628 幾つかの言語を混在させる時とかを例に使われるのは見た。
しーーーっ
CSSのクラス名で一般的な命名ルールってありますか? 大文字で始めるとか、_ は使わないとか、そういうものがあれば教えてください。 俺はこうしてるってのでもお聞かせ頂ければ嬉しいです。 よろしくお願いします。
.Noriko .Yuki .Mana .Mika
>>636 .Noriko はやめてくれ.Noriko は
よくある説明では英字で始り、英字、数字、ハイフンで構成された名前となってる。 後は視覚的な命名(red、center、など)は避けた方がいい。
>>638 に反するけど、とある自治体のサイトで
.br150p { line-height:150%; }
.br200p { line-height:200%; }
とかってなってるの見かけたな。
まぁ名前から中身が類推出来る方が後々良いだろうね
641 :
635 :2006/06/15(木) 13:47:25 ID:???
>>636-639 ありがとうございます。
大文字小文字はあんまりこだわらないってことでしょうか?
(例えばJavaのクラスだと先頭大文字が推奨されてたり等)
>>635 クラス名とかは大文字小文字が混ざっても良いんじゃないかな。
javaの場合も別に良いけど、作る人毎に命名法が違うと読みづらいので
コーディング規則とか決めてみんなで合わせてるだけ。
cssなんか別に他人が書いたのを直すにしても、
「読解する」ってほどの作業が発生しないので皆結構好き勝手やってるんじゃないかな。
.Noriko と .noriko が区別されるか、って話なら、わたしゃ知らないけど、
書くときは厳密に書いておけば間違いないよ。
まぁ、漏れ本職じゃないし知識も中途半端なんで間違ってたらおしえてくださいませ>えろい方々
命名のとき、最初はinfoとかcopyrightとか英語っぽくするのだけど、 だんだん面倒臭くなって、 syatyouaisatuとかtensenwakuとか書いてまう。
俺なんか.aaa.とか.bbbだよ
>>645 あーそれ分かる
なるべく英語にしようと思うだけど
結局ローマ字表記にしちゃうのw
そしてヘボン式訓令式IMのローマ字入力表現が入り乱れて混乱の時代に。
cssだとバレバレだから恥ずかしくないか?w
>>628 例えば「日付」を意味付けする要素は存在しないよね。
だからといって勝手に自分ルールの要素を作ってしまうわけにはいかない。
そこでspanが用いられる。
<span class="date">2006-06-15</span>
これにスタイルを定義して日付を表現したりする。
でも日付をマークアップする時って、 日記とかで、インラインよりもブロックのときじゃね?
それは「日記のタブ」というブロックで表現したい要素の中身が たまたま「日付」という意味を持つモノであることが多いというだけで、 むしろ実際は「日付+α」がブロックになっていることも多々ある。
日付は<hn>でマークアップするもんじゃないの?
>>653 段落要素の中に日付が出現したらどうすんのよw
日付って結構ちょっとした画像なんかと組み合わせるから DIVでまとめてポン
>>654 はあ? お前馬鹿?
<p>今日は <h4>2006-06-15</h4> でしゅ。</p>
最近の釣りは巧妙化しているからな。
spanは、強調の逆に弱める場合につかうかなぁ。
html 止まりならそれでもいいんだが・・・
htmlどまり?
<span> _, ,_ スパーン! ( ‘д‘) ⊂彡☆))Д´) </span>
htmlなら別に大文字でタグ書いてもかまわないけど xmlは全部小文字で書かなきゃいけない。 でもまぁ、置換一発で終わる話。
XHTMLもね
>>650 日付を意味づけする必要が一般にはないと判断されたからこそ一般要素として存在しないんだろ。
ありとあらゆる意味づけを要素にしたら誰も覚えられない。
日付なんか意味づけする必要はなし。
だからどんなときにするんよ? 明日の<span class="date">1月1日</span>はお正月です。 とか? 意味わかんね。
>>665 div や span をスタイルシートのための要素だと思っていないかい?
669 :
650 :2006/06/15(木) 21:52:05 ID:???
>>667 別にマークアップする必要が無いと思った人はいいんだよ。
それに日付は単なる例示だから…。
例えば「用語」はマークアップする要素があるが、日付はない。
スタイルシートを適用させたくても、適当な要素がないんだよ。
だからって:
<date style="border:1px solid #000;">2006-06-15</date>
とするわけにはいかない。
つーわけで span でマークアップする。
<span class="date">2006-06-15</span>
ちょっと説明が悪かったかな。
誤るよ...
>>669 マークアップする必要のないところにマークアップするつもりなら
単語毎にマークアップできるようになるんだよ、馬鹿か。
それを防ぐためにも要素は必要最低限でいい。
そして日付は必要最低限ではない。
ブログとかで日付だけ出てくる場合なら <p class="date">2006-06-15</p> とかでもいいとおもうんだけどわざわざspanでやらないでも。
些細な事ですが、気になったので質問です。 body { margin-left: 4%; background: #ffffff url(back.jpg) no-repeat 4% 0; } 例えば上記のように記述すると、body以下の要素と背景画像の左側に、4%の空きが作られると思ったのですが、 背景画像の位置が、明らかに4%未満の場所に表示されてしまいます。 「%」の指定で空きを揃える事は不可能なのでしょうか? emやpx指定にすれば、揃える事ができるのですが・・・。
>>669 いや、それは分かるんだけど。
端的に、インラインのspanで日付をマークアップしなきゃいけない状況が分からんのよ。
>>667 の例だったら、文章の中で日付ではなくて、
1月1日という特定の日を強調したいのだろうから、
<em class="date">1月1日</em>なら分かる。
文中にある日付を強調などの他の意味付けなしに
「日付」としてマークアップしたい状況ってどんなん?
674 :
650 :2006/06/15(木) 22:06:44 ID:???
>>670 > それを防ぐためにも要素は必要最低限でいい。
> そして日付は必要最低限ではない。
いや、だからさ…
スタイルを適用させる場合の話だよ。span要素自体は特に意味を持たないから、普通はスタイルを定義するのさ。
日付だけではないが、メールアドレス、電話番号など をマークアップする要素はないから
これにスタイルを適用させたい場合は span を用いるんじゃないかなって?
理解できる?
<p>メールアドレス</p> <p>電話番号</p> でいいのでは? または <ul> <li>メールアドレス</li> <li>電話番号</li> </ul> とか
何のための日付かに着目すればおのずとふさわしい要素も見えてくるだろう。
677 :
650 :2006/06/15(木) 22:12:35 ID:???
>>671 ,
>>673 それは個人の思想だとおもー。
日付が強調だと考える人もいれば、俺みたいに強調ではないと思う奴もいる。
つーわけでインライン要素のグループ化、という意味ではspanを用いるのがよいかと。
逆に
>>671 みたいな *日付だけが記述された段落* が出現するのはどうかと。
何か意見ある?
いや、650の言ってる意味は普通にわかるよ。 日付に意味を持たせたい場合で、尚且つ適当な要素が無かった場合のspanだな。
具体例が無いということは、 つまりは意味あるマークアップじゃなくて装飾ってことね。 つーか後はStrictスレでやれ。
680 :
650 :2006/06/15(木) 22:16:28 ID:???
>>675 これなんか面白いんじゃないかな?
<address>
電話番号: <span class="telephone">xxx-yyy-zzz</span><br />
メールアドレス: <span class="e-mail">
[email protected] </span><br />
作者: <span class="author">山田 太郎</span><br />
最終改訂: <span class="date">2006-06-15</span>
</address>
まあaddress要素内にブロックレベルが内包できるように仕様が改訂されれば
>>675 みたいに、リストとしてマークアップするのもいいかもね。
うちのサイトの日記のとこにも使ってる。 例えば <h3>ほにゃらら</h3> <p class="date">2006年06月15日</p> <p>本文。</p> 以下略〜 みたいな感じ。 あと、ブログみたいに記事のタイトル一覧ページも作ってるけど、そこでも使ってるね。 <ul> <li><span ="date">2006年06月15日<span>: <a href="〜">ほにゃらら</a></li> 以下略〜 </ul> みたいな感じ。
>>681 > <h3>ほにゃらら</h3>
> <p class="date">2006年06月15日</p>
え? その日付は段落ではなく一般的に見出し要素ではないの?
<h1>お馬鹿な日記</h1>
<h2>2006-06-15</h2>
<h3>うんこもらした…</h3>
... 以下略 ...
>>674 だから「意味を持たせる」ことが「無限に可能だから問題」だと言ってるんだ。
だったらおまえは日付だけじゃなく、すべての意味を意味づけするために
単語毎にspanでくくるのか?無理だし煩雑になる。
>>682 んー
見出しじゃなくて
pでも間違いじゃないと思うに一票
そのほか
<ul>
</li>2006-06-15</li>
</ul>
とか
<dl>
<dt>day</dt>
<dd>2006-06-15</dd>
</dl>
とか
>>681 <ul>
<li class="date">2006年06月15日: <a href="〜">ほにゃらら</a></li>
</ul>
のほうがいいようなきがしないでもない・・。
>>685 おまえがaddressを理解してないだけだろ。
>>684 スタイルシートで意味付けしたい要素だけ スパパーン
>>680 addressで1行ごとにしろよ、brなんか使ってるんじゃねえよ。
692 :
650 :2006/06/15(木) 22:29:17 ID:???
>>688 こうマークアップした場合、日付やメールアドレスは、確かにaddress要素になりましたね。
でもaddress内の日付やメールアドレスに(見栄えで)意味を持たせることができる、と私は言っているのです。
いや、俺はする。
>>691 そうかな?
俺はグループ化することは悪いことではないと思うが
(見栄えで) ↑この時点で間違ってるって気付けよ。
>>692 何だよ見栄えって、要素は見栄えのためのものじゃない。
意味を持たせることができても、インラインのすべてに意味を持たせることができるから逆に問題なのであって、
そもそもaddressで意味をもっているんだからそれ以上やったら煩雑だから逆に意味がなくなる。
697 :
681 :2006/06/15(木) 22:32:26 ID:???
>>682 あぁなるほど、見出しでも良いね。
単にうちの場合は見出しには日記のタイトルを使用したくて、
日付に見出しを使うほど強い意味を持たせていないだけなのね。
同日内に複数の記事を書く場合なら見出しを使うけど、
一日一度の日記なんで、日付は補助的に使ってるだけなんだ。
私がそういうコンセプトで制作してるって話なだけだね。
698 :
650 :2006/06/15(木) 22:32:29 ID:???
>>695 たしかにそれは間違いだったと認めるよ。
>>694 グループ化をさせるためのaddressじゃない。
グループ化という意味だったらdiv。
つーかスレ違いですよ、と。
>>699 <div id="...">
<address> ... </address>
<address> ... </address>
<address> ... </address>
</div>
こうなるじゃん。
それでいいじゃん
大体グループ化させることに何の意味が。 addressってだけで、そこが全部addressなんだってわかるっつーに。
704 :
650 :2006/06/15(木) 22:35:42 ID:???
>>700 そうだった。
ここは質問スレだよな。。
続きは Strict スレでもよろ(て、俺が悪いんか。ごめ)
<hr title="話題の区切り" />
今のHTMLじゃhrは意味の区切りを示さない
だからそういうときのclassじゃん。
>>650 とおまけの馬鹿たちへ
青臭い議論はよそで
大人なら解るよな?
じゃぁ改めて。 .Norikoの話を聞こうか。
ふられたんだ ぅぅ
おー、よしよし
その.Norikoは俺の彼女。ごめん。
うちのオカンがNorikoだが。
ところで
>>672 は解決したかね?
Norikoに教えてもらった
<div class="Noriko">
>>712 さん、ごめんね。</div>
>>
#Noriko > #712 { display: none }
720 :
Name_Not_Found :2006/06/16(金) 15:37:04 ID:zaQCKwqE
tdで縦位置位置を上揃えにするvalign="top"にあたるのは、 CSSでは何になりますでしょうか。 vertical-align:top;でもないようですし…。 よろしくお願いします。
721 :
720 :2006/06/16(金) 15:42:35 ID:???
すいません事故解決しました。 間違えてtdではないところに設定してました…。
>>719 >#712
セレクタのこの部分が正しくない。
#\37\31\32 から #\000037\000031\000032 までの 125通り、
#\37\0000312 から #\000037\0000312 までの 5通り、
#\0000371\32 から #\0000371\000032 までの 5通り、
#\00003712 の 1通り、
合計 136 通りのどれかに一致していなければならない。
ただし、これは id="712" という属性値が CSS処理系に渡された場合の話に過ぎない。
最初のHTMLパース時に ID値として認識されなければ、CSS処理系に渡されない。
ID値は、HTML4.01仕様からXML1.1仕様まで、数字で始まる事は許されていない。
(実装において、属性値の型ではなく、属性名が id であることを基準に
CSSへ処理を委ねているから、条件はもっと限定される。)
なにマジレスしてんだ と、釣られてみる
724 :
助けてー :2006/06/17(土) 00:25:22 ID:a2NsDTr/
tableの中に、画像を数個、たてよこに並べたいと思っています。 positionで relativeを設定すれば、親BOXをtableと認識するのですが absolute にて設定を変えると、ブラウザの左上からの距離で表せれてしまいます。 tableはブラウザからの中央寄せで表示したいので、absoluteでの表示では、 思った表示ができず困っております。だれか助けてください。
725 :
助けてー :2006/06/17(土) 00:26:18 ID:W3wrZbyU
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="tablemain"> <tr> <td> <div class="imagetitle"><img src="images/title.gif" width="219" height="243" border="1"></div> <div class="imageday"><img src="images/day.gif" width="219"height="117"></div> <div class="swf"><img src="images/flash.gif" width="656" height="365"></div> <div class="menu01"><img src="images/menu01.gif" border="1"></div> </td> </tr> </table>
726 :
助けてー :2006/06/17(土) 00:26:44 ID:a2NsDTr/
.tablemain { padding: 15px 7px 0px; background-color: #FFFFFF; border: thin solid #999999;} .imagetitle { position: absolute; left: 0px; top: 0px;} .imageday { position: relative; left: 0px; top: 5px;} .swf { position: absolute; top: 0px; left: 233px;} .menu01 { position: absolute; top: 379px; left: 7px;}
>>724 つ【正しくないHTMLにCSSを適用させても何にもならない】
>>724 absolute ってそういうもんでしょ
729 :
Name_Not_Found :2006/06/17(土) 01:58:10 ID:kZGPpMSl
HTMLでいうところの<iframe>〜</iframe>は cssではどのように表記すればいいのでしょうか? 同じ効果の得られるタグを教えてください。 宜しくお願いします。
HTMLとCSSの基礎を理解してから質問して下さい。
>>729 CSSはタグじゃないし、iframeのような埋め込み機能は存在しない。
iframeで嫌ならSSIやPHPでインクルードして、あとのCSSの整形になったらまたおいで。
もし疑似フレームのことにしたって、FAQに載ってるしな。
733 :
助けてー :2006/06/17(土) 02:22:10 ID:a2NsDTr/
>>727 はは、注意ありがとう。
>>728 そんなものなんですか?
absoluteの基点は、BOXでなくて、ブラウザの左上ということでいいんでしょうか?
となると、中央寄せのサイトとかには使えないですね。
テーブルで組んだ方が簡単だなーはあ。
735 :
助けてー :2006/06/17(土) 02:40:28 ID:a2NsDTr/
はやレスありがとう。 えっと、ということは僕のは、単純にHTMLの書き方が 悪いから?ブラウザの左上になるのかな? relativeに直して、各位置を書き換えると、きちんと table=BOXの位置から、それぞれの相対位置になるんだけど、 単純にHTML間違い?
親要素で absolutかerelativeが指定されてる場合 親要素の左上から そうじゃない場合は左上から ただソースを見ると根本的にわかってないと思うから htmlから勉強しなおしたほうが良いと思うよ。
737 :
助けてー :2006/06/17(土) 03:19:26 ID:a2NsDTr/
)ただソースを見ると根本的にわかってないと思うから )htmlから勉強しなおしたほうが良いと思うよ。 ギクッ!! Dreamweaverにたよら
なんだこいつ
739 :
助けてー :2006/06/17(土) 03:21:19 ID:a2NsDTr/
ギクッ!! Dreamweaverにたより過ぎたからな。
>>736 そうじゃない。
dlが親要素の場合、dtはrelative関係なくdlの本来配置されるべは位置からの絶対指定になる。
relativeは親との明確な関係が出ない場合の話。
position: absoluteにしてtopしか設定しないと 横位置は元の位置と同じになるから、 真ん中寄せでも使える と思ってたのだが、 ひょっとしてそういうやり方ってよくないのか?
>>741 いや、別に両方設定しなきゃならないってこともない。
包含ブロックの初期位置にならないケースってdiv以外にもあるんだな。
>>740 dlやdtで絶対配置なんて使ったこと無かったから勉強になった.
ありがとう
744 :
助けてー :2006/06/17(土) 03:56:42 ID:a2NsDTr/
よこからすいません。 WEBdesign誌 2002年11月号の CSS特集記事で ----------- abusolute 絶対座標(bodyオブジェクト上の座標を基準) relative 相対座標(親からの座標を基準) static HTMLレベルのレイアウトに従う ----------- って書いてるけど、、。なんだか違うくない?
「違うくない」という言葉が違うくない?
746 :
Name_Not_Found :2006/06/17(土) 04:01:47 ID:9NlqJ/np
brタグを使うとfirefox,IEとOperaで表示のされ方が違うのですが、 brタグの高さを指定する方法はあるのでしょうか?
>>740 最も近い位置指定されてる要素のはずだが、dlになんか設定してね?
750 :
Name_Not_Found :2006/06/17(土) 04:09:56 ID:9NlqJ/np
>>747 ありがとうございます。言われてみればあたりまえですね。
普通に<p>では使っていたのに勘違いしてました。
<br>に指定するんじゃなくて、その上に指定することを忘れていました。
751 :
助けてー :2006/06/17(土) 04:11:46 ID:a2NsDTr/
>>745 すいません。何が正しいのかわからなくなってきました。
752 :
Name_Not_Found :2006/06/17(土) 04:11:56 ID:9NlqJ/np
>>749 なにも指定していないとoperaでは高さがまったく無くて、
IE,Firefoxだと1ドット空きますよ。それともうちの環境がそうなだけなのかな。
753 :
助けてー :2006/06/17(土) 04:12:56 ID:a2NsDTr/
ただ単純に画像を横に並べたいとき、 ↓こうしたい。 [A] [B] [C] [D] relativeだと、 下みたいなってしまう。 [A] [B] [C] [D] abusoluteだと、 (ブラウザ) ‖======= ‖ ‖[A] [B] [C] [D] ‖ ‖ なってしまうのは私だけ?
>>751 >WEBdesign誌 2002年11月号
こんな古本は今すぐ捨てろ
755 :
助けてー :2006/06/17(土) 04:17:31 ID:a2NsDTr/
)754 ああああ、そんなあ。
理解もしてない要素を使うからおかしな事になる。position使うな。 大体table使うんなら、tdで並べれば済む話。 >725-726見たが意味わからんよ。
757 :
助けてー :2006/06/17(土) 04:42:15 ID:a2NsDTr/
そうだな、素人は tableで組みます。 CSSの人達ありがとうです。
>>753 ちょっと待て、イメージを横に並べるだけなら
divで囲う必要なんかなくて並べて書くだけでいいじゃんか。
>>740 >>748 やってみたがdlが親要素で何も指定無しの場合dt,dd共に
absoluteではbody左上からの距離
relativeではdl本来の場所からの距離になる。
またdlにabsoluteを指定した場合(height:とwidthも指定)
dt,dd共にabsoluteの場合dlの左上からのj距離。
relativeの場合はdl左上を基本に本来の配置からの距離。
dtがabsolute ddがrelativeだとddは上はdlの上で左は本来の場所からとなるようです。
760 :
助けてー :2006/06/17(土) 05:05:45 ID:a2NsDTr/
>758 あ、そうですね。 ありがとう。 でもCSSってムズイ。
>>760 知らないから、難しいことしちゃうんだよ。
知ってれば並べるだけだったろ。
absolute:最も近い位置指定された(static以外)包含ブロックからの相対位置。
存在しない場合は初期包含ブロック(body)からの相対位置。
relative:本来staticで配置されるべき位置からの相対位置。
static:通常フロー。
fixed:メディアによって異なるが、PC閲覧のような連続メディアの場合は
閲覧領域に対して固定配置。
762 :
助けてー :2006/06/17(土) 05:34:27 ID:a2NsDTr/
>>761 さんありがとう。
CSSなんて今まで文字の飾りぐらいしか使わなかったんで
脱テーブルデザインを目指した矢先でした。
それで、ついでに質問
----------------
[A] [B] [C] [D]
[ E ] [E] [F]
----------------
のように画像がならんだものを、
親要素でくるんでCSSで調整しようと
したいとき、
その親要素って何のタグを利用
するものですか?
今まではこういった組絵は
tableで組んでいたので、
一行一列のtableをBOXとして組んだのが
>>725-726 のソースになります。
--<table?>--------------
[A] [B] [C] [D]
[ E ] [E] [F]
------------</table?>----
というか質問自体おかしいですか?
おかしいよ。 tableさえも理解してないって事がわかったよ。 CSS以前にhtmlちゃんと勉強した方がいいと思う。
>>762 いや、どういう意図でイメージを並べるのかがわからないと答えようがない。
単に絵を並べるんだったら意味的にリストだから
<ul>
<li>イメージA</li>
<li>イメージB</li>
・
・
<li>イメージF</li>
<ul>
でliをCSSでinlineにする。
766 :
助けてー :2006/06/17(土) 06:20:47 ID:a2NsDTr/
>>764 いいヒントありがとう。
>>765 親切にありがとうです。
ちょっとで直してきます。
そのときはよろしくね。
勉強するならまずは日本語から。 というフォローも忘れずに。
768 :
助けて! :2006/06/17(土) 22:08:20 ID:???
プルダウンメニューの作り方がわかりません。 ロールオーバーのみCSSを作ったけど、これ以降どうしたらいいのか・・・。 以下ソースです。 HTML一部分 <div id="g-navi"> <ul> <li><a href="#" id="sample1">ナビ1</a></li> <ul> <li>サブメニュー1リンク</li> <li>サブメニュー2リンク</li> <li>サブメニュー3リンク</li> </ul> 中略 </ul> </div> 以下CSS一部分 ul,li{list-style: none;} #g-navi{width:100%;height:33px;overflow:hidden;display: block;z-index: 100;} #g-navi ul li{float:left;display:inline;} #g-navi ul li a{display: block;text-indent:-5000px;text-decoration:none;overflow:visible; /* \*/ overflow:hidden; /* */ } #g-navi a#sample1{width : 131px;height : 33px;background:url(../../imgs/g-navi.gif)} #g-navi a#sample1:hover,#g-navi a#sample1-active,#g-navi a#sample1-active:hover{width : 131px;height : 33px;background : url(sample.gif) 0px 33px;} 以下略 ここからどうすればいいですか??アドバイスお願いします・・・。 初心者でごめんなさい。
>>768 質問とは関係ないが、ul要素直下にul要素は出現できない。
質問に関係する事を言うと、CSSでできるからといって実際にやってはいけない。
CSSで工夫して実現できる処理手順は貧弱すぎるから、使い易さとは程遠い物になるから。
例えば、ブラウザのメニュー(ファイルとかヘルプとか)が、ちょっとでもマウスを離したら
閉じてしまって、また最初から開かなければならなかったら、苛立つだろう?
そもそも、マウスに依存しすぎる(キー操作に難がある)ようなメニューなんて要らないだろう?
このように、できるという事と実用に耐え得るという事には厳然たる隔たりがあるわけだ。
だから、処理手順を細かく記述できる何か(JSに限定されるが)を使え。
>>770 の人の補足
正しくはこう↓
<ul>
<li><a href="#" id="sample1">ナビ1</a>
<ul>
<li>サブメニュー1リンク</li>
<li>サブメニュー2リンク</li>
<li>サブメニュー3リンク</li>
</ul>
</li>
中略
</ul>
個人的にはプルダウンメニューは嫌い
body{margin:0;padding:0;}ってやってるのに IEだとtopとbottomにスキマが空いてしまいます。 opera firefoxだとぴたーりはしっこまでいくのに、なんでしょうか?
>>772 です
IEがぴったりで、opera firefoxにスキマがでます。逆ですた。
スマソ。偉くてえろい人教えてくださし
*{margin:0;padding:0;} こっち使った方が良くない?
フレームでうs
>>774 *{margin:0;padding:0;}
これだと<p>の本領を発揮できず段落が一切なくなってしまたので
おっぱいかっこ!
>>776 そういう時はpにmarginとか設定してあげるのよ。
ブラウザごとに無指定の時の取り方に誤差があるから、
最初に全て取っ払ってちゃんと指定してあげる事によって、
見え方の違い等も考慮するのが定石だよ。
それをやってれば
>>772 みたいな問題にも遭遇しないでしょ?
手間はかかるけどそれなりに効率的な手法なんだな。
>>776 ぬるほど
最初に全て取っ払って指定するのが定石ですか。
僕は逆で、全てのcssの仕様を守りつつ、変更したいところだけカエルのが定石かとおもってますた
780 :
質問 :2006/06/18(日) 17:38:40 ID:E9m2z9RY
ページ数が多いんですが、フレームつかわず CSSで疑似フレームでやろうとすると 全部のページにナビゲーション付けないといけないんですか?
そう。
んが・・・ やっぱフレームでやるか orz
便乗質問ですが、 ページ数多いけどフレーム無しの場合は メニューやヘッダ、フッタ部分に PHPとかサーバインクルード使ってるのが多いんでしょうか?
CSSとフレーム使ってるサイト多いけど? それら皆バカ?
全部のページにナビゲーションを付けるのが望ましいって事で >785は中途半端なフレームと一緒じゃんw
Javascriptで流し込むって手もあるぞ。 OFFの時の代替手段がないと厳しいけど。
インラインフレーム
というかグローバルナビゲーションは要らないだろ。 トップと上の階層と前後リンクさえあればいい。
CSSでtarget="_blank"と同じことできない?
>>793 おいおい、そんなだからレベル低って言われちゃうんだぞ。
なにが?
Web製作板なんだから、JavaとJavascript、JScriptの違いがわかるように ちゃんと書き分けようぜ。
<>
低レベルの>793 おはよう
CSSでイケてるデザインサイトいくつか見てきたけど フレームやテーブルも併用してる所が多かった CSSってやっぱイマイチだな
>>800 テーブルはデータテーブルら使って当たり前だし、
変更されてるところじゃなきゃおまえが擬似フレームをフレームと勘違いしてるだけだと思われ。
>801 >擬似フレームをフレームと勘違いしてる バーカ 勘違いしてるのは801だけだろw
>801 日本語崩壊してるよw
804 :
Name_Not_Found :2006/06/19(月) 15:07:00 ID:Ly1Gfdw2
フッタ部分の文章を中央揃えしようと、 #foot p{ text-align:center font-size:small } という風に書いたのですが、 何故かfont-size:smallを入れるとスタイルシートが適用されません。 (font-size:smallを外すと、中央揃えはされます) どのような原因が考えられるでしょうか?
>>804 text-align:centerの後ろに「;」を忘れてる。
最後は確かに入れなくてもいいけど、全部に入れる癖を付けといた方がいいよ。
>>805 ありがとうございます、上手くいきました。
初歩的なミスで、お恥ずかしい限りです。
807 :
Name_Not_Found :2006/06/20(火) 00:56:15 ID:QPNXj+tw
失礼します、質問です。 ┌──────────┐ │┌─┐回り込みテキスト│ ││画│回り込みテキスト│ │└─┘回り込みテキスト│ │回り込みテキスト. │ └──────────┘ こういう感じのボックスを作る場合に、大雑把に以下のような構造として、 <div> <img> <p>テキスト</p> </div> imgの部分に「float:left;」を指定してやれば後続のpは回り込むことになると思います。 で、上の例のように、コンテナボックスにあたる要素(例ではdiv)が閉じている場合、 回り込みをクリアしなくても(IE等に限定すれば)レイアウトが保たれる状況があると思うのですが、 規則的なことを言うと、そういった場合でもclearを入れるのが正しいのでしょうか? また、仮にclearを入れるとして、文書としては不要なbrや中身が空のdivなどを使うことがありますが、 そうしたものを敢えて用意してでも、この場合clearは行うべきなのでしょうか? どなたかご教授いただけると助かります。
すみません、
>>807 です。図の訂正を。。。
┌──────────┐
│┌─┐回り込みテキスト│
││画│回り込みテキスト│
│└─┘回り込みテキスト│
│ 回り込みテキスト│
└──────────┘
例に挙げた状況ではこのようになるのかな。。。
質問の主旨は変わりません。
タイトル1 サブ1 サブ2 サブ3 タイトル2 サブ1 サブ2 サブ3 みたいなデザインを作るときは、どうするのが一番良いのでしょうか?
>>808 どちらにしても、その後にfloatしたくない要素がくるなら、clearが必要だと思うが。
>>809 デザインと言われても困るが、マークアップ例としては↓とか。
<hn>タイトル1 </hn>
<ul><li>サブ1</li>…</ul>
<hn>タイトル2 </hn>
<ul><li>サブ1</li>…</ul>
>>807 です。
homepage3.nifty.com/catfood/up/upload.html
up7823.zip
こちらのアップローダーをお借りしてサンプルHTMLをあげてあります。
私の言いたいことを伝える目的で急いで製作したものなので、
ひどいソースというか、文法上はHTMLと呼べるようなものではありませんが。。。
[前提]
対象UAを限定すれば、clearなしでもレイアウトが保たれる状況がある。
[質問1]
そもそも、規則上、floatに対してclearは必須なのか、場合によっては不要なのか。
[質問2]
もし規則上必須で、それに対応しようと考えた場合、
上記サンプルファイルのように、clear目的のみで中身のない要素を設置しないとclearが困難な状況では、
どのような記述でclearを行うのがベターであるのか。
という感じです。
どなたかご教授いただますと助かります。
ご教授 = ネタ
>>807 です、たびたびすみません。。。
一点補足なのですが、私の現在の認識ですと、
<div>
<p style="float: left;">あああ</p>
<p>回り込ませたいテキスト</p>
←(ここで何らかの手段でclearを行わないといけない)
</div>
←(上位のボックスの外に出てからclearを行うのは間違い)
ということになっているのですが、これがそもそも大間違いだったりしますか?
ただ、その場合でも、
<div style="clear: both;"></div> のような(よく見かけるのですが)、
clear目的のみでの中身のない要素を設置してもよいのかどうかが解りません。。。
普通は外に出てclearでしょう。 brやhrに指定するってのもあるけど、 空要素に指定していいかってのはstrict論争になるんでね。
>>807 です、自分でも自分の文章が読んでいてよくわからないという有様なので、改めてまとめます。
<div>
<div style="float: left;">
<img style="float: left;">
<p>回り込みテキスト回り込みテキスト回り込みテキスト</p>
</div>
<div style="float: right;">
<img style="float: left;">
<p>回り込みテキスト回り込みテキスト回り込みテキスト</p>
</div>
</div>
<hr style="clear: both;">
という状況の場合、imgが浮動してpがそれに対して回り込んでいると思います。
で、回り込ませたいのはpのみである場合、普通ならその後にclearが必要になりますよね?
しかし、上の状況では、親ボックスも左右に浮動しており、そちらの浮動処理が優先されるため、
後続の要素は回り込むことを許可されないと思います(そう私は認識しています)。
結果、clearの記述が本来必要と思われる箇所(pの後?)に、clearを記述しなくても、
レイアウトが意図したものから大きく崩れるということはなくなっているのかと思います。
で、実際imgの回り込みを解除するclearは必要なのかどうか、というところが解らないという感じです。
>>807 です、
>>815 は各要素にwidthが指定されているかどうかで状況が変わるかもしれません。
本当に混乱してきました。
とりあえず、floatさせた場合、不要になった段階で全部漏れなくclearしろ。
空要素を使う使わないはまた別の問題として、とりあえず回り込みが終わるところでclearしろ。
仮にclearしなかったものを一見問題なさそうな感じでUAが表示しちゃっていてもclearしろ。
という考え方でよろしいでしょうか。。。
>>807 です、
>>817 さんありがとうございます。
とすると、
>>814 さんの「普通は外に出てclear」について質問があるんです。
<div style="width: 200px;">
<img src="hoge.gif" width="80" height="80" style="float: left;">
<p>回り込みテキスト回り込みテキスト回り込みテキスト。</p>
</div>
<p>後続テキスト後続テキスト後続テキスト。</p>
上のソース、imgのfloatをclearしていません。
ですが、IE等で表示させた場合、後続テキストは回り込みの影響を受けず通常配置されます。
これは、
・親のボックスを超えてfloatが後続に影響を及ぼすことは無い
・UAがclearの記述不足を内部的に補填した上で表示させている
・それ以外の何か
のどの状態であると考えておけばよいのでしょう?
私が
>>813 で、ボックス内部でclearを行わないといけないと考えていたのはここがよく解らないためです。
>>818 ごめん、ちょっと酔っぱらってて。外でclearってカラムの時の話ね。
それ、pでclearしてもしなくてもいけるんだけど、どこかでclearしないと継承するブラウザがあった
けど思い出せない。
>>818 それは単にIEのバグだな、本当は後続テキストも回り込みに入らなきゃならない。
どういうこと考えてそういう動きになってるのかはM$すら知らないだろうwww
821 :
820 :2006/06/20(火) 08:04:40 ID:???
NN4においてborder属性を設定していないtable要素内の、 th/td(セル)にborderで線を付けたいのですが、 他の要素のようにborderが描画されません。 特殊な書き方が必要なのでしょうか、それとも不可能なのでしょうか。 可能でしたら方法をお教え下さい。
スタイルシートの text-decoration で下線と取り消し線を両方有効にしたい場合ってどうすんの?
>>823 ムリ。
擬似的に、line-throughとboer-bottomで似たような感じにはできる。
typo。 border-bottomね。
>823 text-decoration: underline line-through;
>>818 です。
遅くなりましたがレスくださった皆さんどうもありがとうございました。
同じページでこのようなCSSを記述するのって使い方間違えてますか? CSS側 div#header ul li#nav01 {……} div#footer ul li#nav01 {……} XHTML側 <div id="header"> <ul><li>……</li></ul> </div> <div id="footer"> <ul><li>……</li></ul> </div>
>>828 間違えてる。
ID値は1ページに2度出現してはならない。
classが性質ならidは名前だから、同じ名前の人が文書に何度も出ると解釈する機械は困ってしまう。
830 :
828 :2006/06/20(火) 22:41:18 ID:???
>>829 即レスどうもです。
表示に問題ないからひょっとして?って思ったけど、
やっぱり間違えなんですね。
質問なのでageます hoverでリンク部分を色変えし、かつ別の場所に説明を出すって事は可能でしょうか? もし出来るなら教えてください。
833 :
832 :2006/06/21(水) 09:49:39 ID:1o0zAOKT
ageるつもりがsageが入ってた・・・スマソ
>>832 hoverはCSSだが、別の場所に説明ってのはJS。
>>835 それは説明を出すのとは何の関係もない。
832です >835さんの良さげですね >836 自分の説明が悪かったみたいです hoverで複数箇所が変化する方法は使えそうです
あー俺も知りたい>CSS複数箇所hover
講座や本を見たのですが原因がわからないので教えてください @charset "Shift_Jis"; body { font-family: "MS Pゴシック", Osaka; font-size:12px; background-color: #ffffff; background-image: url(old_paper.jpg); background-repeat: repeat; line-height:130%; letter-spacing:10em; word-spacing: 3em; margin: 3em; } 外部CSSを作りHTMLにもリンクさせました スクロールやリンクは問題なく反映します でも文字サイズや行間文字間が反映されません 最初文字をテーブルの中に入れていたので、外にだしてみたんですがやっぱり反映されません どこが間違ってますか?
>>839 CSS自体はそれで反映される。
とりあえず文字コード確かめて
@charset "Shift_JIS";
に修正。
841 :
839 :2006/06/21(水) 13:32:53 ID:???
>>840 早速の回答ありがとうです。
文字コードは今まで気が付きませんでした。ありがとうございます。
とりあえず
@charset "Shift_JIS";
を変更したんですが、やっぱり文字に関する指定が反映されません
いままでHTMLのbodyで指定していて反映されなかったことがないので・・・
外部の受け渡しは
<link rel="stylesheet" type="text/css" href="ファイル名.css">
あってますよね?
>>841 合ってる。
HTMLとCSS一緒に圧縮してどっか上げてみ。
843 :
839 :2006/06/21(水) 13:56:35 ID:???
レスつけてもらったのに自己解決でごめんなさい 原因はHTMLの記述問題でした 今上げようとサラのHTMLを作ったところ反映されました 原因はテーブルから正確にはだしていなかったようです テーブルの上からテーブルを作ってレイアウトしていたので もうしわけありませんでした。でも、@charset "Shift_JIS";たすかりました
>>837-838 span入れてdisplay:none / hover position
じゃね?
教えて欲しいのですが、リンクの下線を個々に消したいときは <a href="URL" style="text-decoration:none;"> とやりますよね。 同じようにカーソルをのせると文字位置を変更する[hover]って個々に 指定できるんでしょうか?
846 :
845 :2006/06/21(水) 23:34:55 ID:???
すいませんちょっと書き間違えました A:hover{position:relative;top:1px;left:1px;}これを個々指定したいのです。
clsss属性でヤッテ見て
個々に、というかそういうクラス作ればオッケー
<style type="text/css"> <!-- スタイル指定色々 --> </style> 上記の<style>〜</style>って<head>〜<head/>内に書くものだと固く信じてたけど<body>〜</body>に書いてもちゃんと動作するんですね。 この辺について、なにか情報があったら教えてください。
はじめまして、昔ちまちまHP作成の仕事をしていたのですが 復帰するにあたり、CSSという言葉が頻繁に出てきて頭を悩ませております。 私はドリームウィーバーMXを使っていて、 昔はテンプレートと、CSS(文字指定のみ)でやっていたのですが、 皆さんのお話のCSSって、テンプレートとはどういう風に違うんでしょうか。 チョット調べてみたのですが、さっぱり違いが分かりません・・・。 それと、ドリームウィーバーMXだと、文字指定以外のCSSの設定ができない(私にはわからない) のですが、それ以降のバージョンだと簡単に出来るんでしょうか。 それとも、テキストで指定するもんでしょうか。 皆様から見たら、もしかしてあほな質問ですいませんが、 浦島太郎な私にお手数ですが教えてくれる方いたらうれしいです。 また、参考HPなどありましたら教えてください。
このスレの
>>7-15 と、Webサイト製作初心者質問スレのテンプレの
解説系のリンク見てくるといいかも。
ドリームウィーバーMXのことはわからないが、
HTMLやってた人ならちょっと慣れれば理解できるはず。
「仕事」としてやるならもちっと積極的に ググりまくるとか本屋で関連本見るなりしようよ。 浦島なので、は言い訳ですよ…
853 :
850 :2006/06/22(木) 05:47:59 ID:???
朝早くなのに素早いレスありがとうございます。 実は私HTMLもやった事がないんです・・・。 全部ソフト(DW)でやってあとは、コーディングの人に頼んだりしてて。 あと、最初に張ってあるリンク最初に見たんですが、 何か全部「ページがありません」で見れなかったんですよ。 うーむ。とおもって質問しちゃったわけですが、 今もう一回見たらやっぱり見れないんですが、コピペだと見れるんですね。 今気づきました(汗 何か私のPCがおかしいのかしら・・・。 それで、質問の内容なんですが、浦島がイイワケなのはごもっとも! すいません・・。 ただ、チョット探した感じでは、(ちょっとですいません) DWで使っていたテンプレートとCSSの差が分かりやすく説明してある所が見つからなかったッてことと、 ドリームウィーバーでソフトで出来るCSSの範囲が簡単に知りたかったのです。 ご指摘どうりもうチョットがんばって探してみます><
8ならかなり対応してるよ。 MXとは比べ物にならない とりあえずMXの頃はテーブル+文字だけCSSだったと思うけど 今は見た目は全部CSSに移行しつつある。 html4..01+CSSとかxhtml1.0+CSSって感じが多いと思う。 その辺りは解説サイトをみれば結構わかると思う。 しくみがわかれば答えもわかると思う。 細かく解説しても余計混乱すると思うので 一度ちゃんと勉強した方が良いと思う。
みんな優しいな。 そんなんで仕事になるんだったら、俺もサクッと転職したいよ。
俺はクラの立場だけど、制作側にひどいのがいるよ。 見出しの指定をしたら、hnが有ることを知らなかった奴がいたり css自体を「文字の大小を決めるもの」と思ってたとかね・・・
あー・・・・いるいる。 それでそいつの個人ほーむぺーじ見つけちゃったら 大したことやってないから自分はプロじゃないとか言ってて 金払ってるこっちの立場は。
そんなのに頼んでしまった自分を呪いなさい。
Dreamweaver8にしたらCSS作成が楽になったよ
手打ちで充分だろ、プロパティくらい簡単に覚えられるし。
↑時代に取り残されるタイプw
↑記憶力の悪いタイプ
>>861 みたいなのは必ず居るよね
努力自慢というか・・・
無駄な労力自慢というか・・・
DWでCSSパネル使ってるやつっている? あれ遅くて使いにくいよ実際
>>861 わー手打ちでスゴイスゴイ
これでいいか?
ていうか、仕様は基本的にあまり変わらないが ツールの使い方こそしょっちゅうアップデートするから覚えたって時代に残されると思うんだが。
>>865 DWもどんどん重くなるよな。HPBほどじゃないけど。
>>861 HTML作成をメモ帳でやってんだぜって自慢する厨みたい
ここは手打ちを自慢するスレとなりました
オーサリングツールはあくまで覚えてる人間が楽をするためのものであって 結局仕様やプロパティを覚えてない人間が使えば・・・・な罠。
なんか妙な流れだが質問。 MYSWYG型じゃなくて、入力支援でCSSの打ち間違いをなくしてくれるようなソフトで お奨めあったら教えてくれ。
遊びや勉強でやるなら別だけど、htmlやらCSSが全部エディタで出来たとしても、 それでツール使うより生産性が落ちるようなら無意味。 そんな俺様も学生さんの頃は「このサイトはメモ帳で作りました」みたいな アイコンをサイトのトップに貼り付けてたもんだ。 つって、俺も結局DW使うけど、 CSSパネル使わずにDW上でcss開いて手打ちしてるんだよね・・・orz
>>872 >860は楽になったって言ってるだけなのに
何故そこまで絡む?
なんか僻みに近くなってないか?
>>878 できないことを自慢げに書き込んでるのがおまえ。
もうバカばっか
>>879 何ができないの?
CCSより日本語勉強したら
みんながやってる事を
どうだと言わんばかりにレスする
>>861 に感動しました
「みんな」と言ったら可哀相な人が約一名…
885 :
Name_Not_Found :2006/06/22(木) 11:51:59 ID:BDZ4p16s
cssやらhtml程度しか出来ない人って僻んだり叩いたり大変だなぁ・・・
皆=全員って意味じゃないんだが 日本語わかんないかな?
860だけど約一名に絡まれちゃったみたいだね 以前は861と同じように手打ちだったんだけどw
ていうか
>>860 も大概どうレスして良いのか分からないカキコだけどなw
> Dreamweaver8にしたらCSS作成が楽になったよ
そのためのソフトだもんw
>>886 純粋に質問。
皆=(最低限そこにいる)全員、以外のどんな意味があるんだ?
893 :
874 :2006/06/22(木) 12:34:43 ID:???
煤H!;
>>891 やっぱ "One for all, all for one" なんてのは
「全員は一人のために、一人は全員の為に」
その「一人」てのは全員に含まれるわけだから、
俺は俺の為だけにがんばっても問題ないんだ、とか解釈しちゃうわけ?
青いな
つーかマジ答えもせずに何やってるんだ。
誰も MYSWYG型 ってのが理解できないんだろう。
煽ってるだけの899の方がずっと馬鹿に見える件
くだらんレスにレスする900も同じ
それよりCSSの話しよーぜ
ここでのレスを読んでドリ8の体験版を入れて使ってみた。 cssパネル、ややこしくて却って効率が落ちそうなんだが 慣れれば使いやすくなるのかな? あと結局ハックは手打ち?
手打ち手打ちって…うどんそばスレかと思ったぞ
>>904 ちゃんとDWのCSSの作成法理解してる?
>>904 人によって違う。重いし効率落ちるって人もいる。
>>904 DW8はかなり作りやすくなってると思うけど
今までのVerとは違って
>>907 さっき入れたばっかだからなんとも…
新規ルール作成→定義 が基本だよね?
>>908 そうだよな。俺はこういうの苦手だ;
>>909 そうなの?確かにMXやMX2004より使えるのはわかるが。
はいてくは肌にあわんな。大人しく寺パッドでセコセコ書くよorz
いい加減スレ違いだって言われそうなんでこのへんで ノシ
つーか使いこなしてもいないのに 使って便利だと言ってる人に絡んじゃダメだよ
つーかスレちがいだから、DWスレに行け。
そうか?CSSに関係有るから別にいいじゃん
さっきからいる911のような認定厨は何なんだ。
認定厨? 914みたいに日本語がおかしい厨もさっきから居るけど・・・
頭のおかしい厨よりましだよね^^
何だかなあ。
くだらねぇな
語尾に^^つけてるとマヌケに見えるな
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
日本語読解能力不足厨もいますよね、
>>915 とか^^
^^厨は氏んできていいよ ウザいから
>>923 別人だとかどうでもいいんだよ
おまいらまとめてスレ違いだ
わっしょい!わっしょい!
まだ居るの?^^基地外
>>923 つーかそれも別の人間ですぅ^^
君って鈍いね
スレ違いの純情
930 :
894 :2006/06/22(木) 16:00:17 ID:???
今までのやりとりの中で一番「漏れ」が痛いと思った漏れ
>>910 入れたばっかりで使いにくいとか言われてもねw
みやびちゃんかわいいよみやびちゃん
Dreamweaver使いこなしてる俺格好EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
たかだか数十~二百行程度のcss書く/編集するために 一々重いソフト起動する程メリットは無いというのが正直なところ。
あまりに質問がないから、ヒマを持て余しているようだな。 おれも手打ちだよ。 正直DWなんて高いソフト買えないからな。
DW8ってそんなに重い? 個人的にはあまり感じないんだけど。。。 まぁ軽くは無いけどねww
フロートつかって2カラムにしてます。 左側を400pxで固定し、文字を以下のように入れると 『あああああああああああああああい<br> あああああああ』の<br>で改行されますが、IEのフォントサイズをでっかくしたら <br>前の入りきれる文字まで(400px)で強制改行が入ります。 『あああああああ ああああああああああ<br>』←このように。 そうならないようにしたいのですが… ・400pxくらいの横幅を指定したい ・400px越えたら入りきれない文字は強制改行ではなく、 文字の<br>までちゃんと一行表示させたい。横幅はそれに合わせたい 方法はありますでしょうか?
>>940 max-widthとか…
って未対応多いからダメじゃんww
他なんかあったっけ?
つっかえ棒を入れるとか、nowrap使うとかあるけど、 そもそも<br>で整形する事が間違ってるとおも。
↑つっかえ棒はなしorz
overflow
>>944 え、普通に改行は<br>じゃないの?
kwsk
無知な俺にkwsk
>>948 「改行したいから」という見栄えのために、「色を変えたいから」と見栄えのために、
マークアップをすることを物理マークアップと言い、
これはHTMLの指向ととティム・バーナーズ・リーの嗜好に適っていない。
HTMLは論理マークアップをすることのみに特化した特殊なマークアップ言語のため、
そこが見出しならhn、そこが段落ならpというように、文章の構造をのみ表現するのが基本。
そして、だからこそCSSがある。
見栄えを制御できないHTMLの、見栄えを制御するために生み出された規格、それがCSS。
だからCSSを正しく使いたければ、HTMLも正しく使うのが基本中の基本。
だからCSSを勉強するなら、StrictなHTMLも勉強したほうがいい。というのが基本。
もし釣りなんだったらこれ以降レスはしない。
本気なんだったらStrict-HTMLスレの過去スレ読んでおいで。
釣りでした
じゃあ俺が立てるよ!
明日から2〜3日旅に出ます
954 :
Name_Not_Found :2006/06/22(木) 23:07:47 ID:kHOrru0e
質問なので上げさせてください。 以前、テンプレートサイト(現在は閉鎖)で見たのですがやり方がわからず、試行錯誤しています。 どのようなものかというと、背景画像があって、その上に白い小窓のような画像がかぶさって 窓から風景が見えるようなかんじになっていました。 テンプレをダウンロードさせていただいてソースを見たときにはbackground-base(?)という 記述があったような覚えがあります。私が持っている本にはbaseというものは載っていなかったので自信はありませんが…。。 使う前にパソコンがクラッシュしてしまったので、確かめるすべがありません。 どなたかよろしくお願いします。
956 :
948 :2006/06/23(金) 07:09:21 ID:???
>>949 見栄えの為に使っちゃってたよ…
ありがとう!過去スレ読んでくる
957 :
Name_Not_Found :2006/06/23(金) 08:48:40 ID:kO2nYzVF
画像の右側にテキストを回り込ませたいのです。 <div class="aaa"> <p><img src="image.jpg" class="img-L" /></p> <p>段落</p> <p>段落</p> </div> .img-L { float: left; } .aaa { clear: left; border-bottom: 1px solid #ccc; } テキストの回りこみは期待どおりになってるのですが、 テキストが短い場合、border-bottomが画像にかぶってしまいます。 ブログのコメント欄なので、最後の段落要素だけclass名を振るというわけにも いきません。 少しアドバイスいただけると嬉しいです。
ストリクタは普通は使わないだろ
欧文だとbrの扱いは軽微でいいだろうけど、 和文だと改行は重要だと思うっす。
??962 和文での改行は=形式段落だから、和文でこそ必要ない。 というのがあいつらの結論だから、だからStrictスレの過去スレ読んで恋よ。
一言で言えばスレ違い
次の質問、どぞ。
966 :
Name_Not_Found :2006/06/23(金) 15:12:40 ID:XOF6JM2y
画像の脇に複数行の文章を並べたいのですが、その場合の改行の仕方がわかりません。 <br>だと画像の下に飛んでしまうのでダメだということだけわかりました。 どなたかよろしくお願いします
??
>>966 すまんが意味がわからん。
図説かなんかしてくれないか。
_ 画| ここに文章 | だらだらと。 像| 文章を。 _| これで<br>を使って改行すると画像の下に文章が行っちゃうってことだろ? お前らちっとはエスパー働かせ。 ちなみに答えは知らんから誰かよろしく。
970 :
966 :2006/06/23(金) 15:29:06 ID:XOF6JM2y
すみません、説明足りなさすぎでした。 ■■■■■■■■@はじめまして。 ■ ■A… ■ ■ ■ ■ ■ ■ ■ ■ ■■■■■■■■ B こんな感じで、@みたいに「。」をつけた後で改行してAから続きを書きたいんですけどその方法がわからないってことです。 <br>使うとBから始まっちゃうし。 どうにかなりませんか?
>>970 別にbrだろうがpだろうが普通になるはずだが。
img { float:left }
<img src="xxx.png" width="100" height="100" alt="xxx">
<p>1はじめまして。</p>
<p>2なんだよこれは。</p>
>>970 ついでに超基本的なこと言っておくと
インターネッツでは○付き数字は使わない方がいいよ
clear入れたり特殊な設定をしてなければ、 画像の天地分は大丈夫なはずだけどな。
どうでもいい。
>>975 普通に誤解させるような書き方をしたおまえがアホ。
こうして順調に釣りで埋まっていくのであった。
>>971 じゃできないっすよ。
誰か知ってるかたいませんか?
とりあえずソース出せ。
はい。めでたしめでたしですね。
釣られたのか…まぁ、こんなとこで聞くのがそもそもの間違いだったというわけですね ありがとうございました
>>986 そうだけど?それすらわからなかったの?
はいはいうめうめ
>>982 971のでできないとしたら、pでfloatのclearをしてるんだと思う。
確認してご覧。
直でぶちこんでもなんの反応もないっすよ floatってどこにつかえばいいんですかね
>>991 釣りじゃないんだとしたら、テンプレの基本から全部学んでこい。
{ float:left } そもそもこれはなんなのかがわかりません… 反応ないし
>>988 やっぱり激アホだな。
ついでに、ついでに〜のレスはオレじゃない。
うめうめ
>>887 本当にアホだな。
ついでに〜のレスがおまえとは言っていない。
やっぱり聞くところを間違ってました。
すいませんでした。
ありがとうございました。
ついでに
>>971 はアホ。
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。