【参考】
IEの position:absolute; のバグを利用した擬似フレーム
----------------------------------------------------------------
*IEの position:absolute; のバグを利用した擬似フレーム
1.標準モードにする
2.body {height:100%; overflow:auto;}
3.fixしたいブロックを position: absolute; で指定
以下に示すようなハックを用いることにより、全ブラウザへの対応も可。
/* 全ブラウザに適用 */
#menu {position:fixed; display:block; top:100px; left:10px; width:130px; height:200px;}
/* IE6 のみ読み込む */
* html #menu {position:absolute; display:block; top:100px; left:10px; width:130px; height:200px;}
《実現例》
CSS frame emulation
http://www.stunicholls.myby.co.uk/menu/background2.html
7 :
Name_Not_Found :2008/12/10(水) 18:19:30 ID:E3/IK9Wk
乙
9 :
Name_Not_Found :2008/12/11(木) 02:29:21 ID:5bPJFyFb
乙乙乙乙 乙 乙 乙 乙乙乙乙
>>1 (・ω・`)乙 これはポニーテールが勘違いでなんとかかんとかおめこ
12 :
質問です。 :2008/12/14(日) 13:58:05 ID:HB/Eybq8
質問です。 印刷用CSSってありますけど、 実際Web制作やWebシステムで利用されているのでしょうか?
実際プリントしないとCSSが働いてるかどうか確認できないね。 プリント用紙がもったいないね。
そんな当たり前の事をレスする意味は何?
16 :
12 :2008/12/14(日) 17:58:40 ID:???
CSSについての質問があります。 外部CSSファイルにこれまではタグ内で <div class="hogehoge">aiueo</div> と定義した物については、CSS内で .hogehoge { /* ここに定義*/ } と記述していたのですが、 <div id="hogehoge">aiueo</div> とidで定義をした場合にはCSSファイルに「#」をつけて記述する、という認識で正しいでしょうか? (学習用に人の作成したWEBページのCSSを拝見したところそんな感じがしました。 #hogehoge { /* ここに定義*/ }
>>17 あってる。
ちなみに最近、同じ名前のidを使いまわしているページをよく見かけるが、
あれは間違いで、そういうときにこそ使うのがclassだ。
>>18 ありがとうございます。一安心です。
CSSの知識があまりないので頑張って勉強しようと思います。
外部CSS1枚で全部のページを制御しているんだが、 最近、半分固定的なデザインになってきたんで、 1)全ページ共通部分の外部CSS+それ以外の部分の外部CSS 2)全ページ共通部分の外部CSS+それ以外はheadに記述 のどっちかに作り直そうと思ってる どっちの方が都合がいいかよく分からんので (レイアウト変更したくなった時の事を考えると1だと思うけど) どなたかメリット・デメリット教えてくれると助かります
テーブルを見やすくするために、1行おきに違う背景色にすることはできますか? 行を挿入したり削除したりしても影響がない方法をさがしています。
>>20 ページ内に書いちゃうと改造の時大変だからどんなときでも外部CSS
>>21 CSSだけでやりたいんなら隣接兄弟セレクタで何十個何百個と書いていく
23 :
20 :2008/12/16(火) 02:08:08 ID:???
>>22 回答トンクス。外部2個で行こう
また改装だよwwww
ありがとうございました
>>22 自分が勘違いしてたらわるいんだけど
>>21 さんのやりたいことって
シマシマやトリコロールのテーブルつくることじゃないですか?
/*ソース*/
<table>
<tr class="bgblack"><td>黒</td></tr>
<tr class="bgwhite"><td>白</td></tr>
<tr class="bgblack"><td>黒</td></tr>
<tr class="bgwhite"><td>白</td></tr>
</table>
/*css*/
.bgblack{
background-color:black;
}
.bgwhite{
background-color:white;
みたいな感じで
>>24 勘違いしてないだろうけど
>行を挿入したり削除したりしても影響がない方法をさがしています。
だからclassつけたら挿入削除に耐えられない
26 :
21 :2008/12/16(火) 03:17:18 ID:???
>>22 , 24
さっそくレスいただきありがとうございます。
やりたいこととしては
>>24 さんのおっしゃるとおりです。
htmlでtr要素に対して交互にクラスを指定する方法は、
・行が多くなると大変
・現在CSVファイルから正規表現を使った置換で表を作成しているが、その方法の中での指定が困難
・行を挿入したり削除したりするとデザインが崩れる(
>>25 さんもご指摘のとおり)
などの理由で現在使用していません。
もしかしてもっとエレガントな方法があるのではないかと思い質問させていただきました。
>>22 さんの「隣接兄弟セレクタで何十個何百個と書いていく」というのは
/*html*/
<table>
<tr><td>黒</td></tr>
<tr><td>白</td></tr>
<tr><td>黒</td></tr>
<tr><td>白</td></tr>
</table>
/*css*/
tr { background-color: black; }
tr + tr { background-color: white; }
tr + tr + tr { background-color: black; }
tr + tr + tr + tr { background-color: white; }
といった感じでしょうか?
何十行とある表のことを考えるとエレガントとはいえない方法ではありますが、
たしかにこれで交互に縞々になりますし、行の挿入や削除をしてもデザインには影響ありませんね。
隣接兄弟セレクタにこんな使い方があるとは思ってもみませんでした。
どうもありがとうございました。
>>26 隣接兄弟セレクタはIEだと反映されないんじゃなかったか?
idもしくはclassを指定することをすすめる。
28 :
21 :2008/12/16(火) 03:52:55 ID:???
>>27 そうでしたか、それは知りませんでした。
ありがとうございます。しかし残念。
悪いこと言わんから javascriptでやれ
>>27 IE6なんてもうFxを下回ってるシェアだが
場所によってはまだ残ってるのか?
>>30 自分のWebではIE7や8よりもずっと多いよ。
Firefox 3.0.4 よりは少ないけれども、Opera 9.62 よりは多いな。
そりゃ8より多かったら問題だろ、何言ってんだ
>>30 Fxと大差ない
Ie6を無視するのとFxを無視するのはユーザー数的にはほぼ同義
Fx推したい気持ちはわかるけどね
Global Web Stats November 2008
Web Browsers
1 Internet Explorer 7.0 30.44%
2 Internet Explorer 6.0 28.13%
3 Firefox 2.0 16.09%
4 Firefox 3.0 12.28%
5 Firefox 1.5 2.03%
>>33 それこそ「場所によっては」の話だから余計なお世話
>>26 >CSVから置換するのが大変
エクセルとかスプレッドシート編集ソフトつかって
適当な列にHTML時の背景色データを用意して
0と1を交互に入れる(オートフィル使えば数万行あっても楽)
置換する時に0なら class="bgblack" 1なら class="bgwhite"ってやれば
そんなに難しくなくないとおもいますけど、もしかしてそういう問題じゃない?
俺のサイトの統計では IE7.0 43% IE6.0 42% FF 5% Safari 3% 携帯 5% その他 2% ぐらいだな IE6はまだまだ無視できる数字じゃない
IE6が少ないなんて、自分のサイトの割合しか見てないんじゃないですか。 利用者はまだまだ沢山いますよ。
典型的なFx信者でつね
WEB関連情報のサイトはブラウザにこだわる人が多いからIE6の比率は下がるけど、 一般サイトを見に来る人はまだまだIE6使ってる人が多い。
IEと認識されている中には、他のブラウザ使いもいるだろうな。 ユーザーエージェントを読んで弾いてくるところとかで、 とりあえずIE6に偽装して表示させる。
さぁ言い訳が苦しくなってきました
見かけなんて全部同じにする必要はないからどうでもいい
>>37 自分のサイトの割合だけでいいだろ、作るのはそこだけなんだからw
44 :
21 :2008/12/16(火) 15:11:17 ID:???
>>35 たしかにそれでいけますね。
そんな問題じゃないことはないです、参考にさせていただきます。
ありがとうございました。
>>45 ならアホなこと言ってるんだ、サイトによって割合が違うんだから
ソースも何も意味がないと言ってるんだよ
そうやって○○が最適!という余計なお節介をずっとしてる奴は一人なのか?
w3schoolsやCodezineを見るような奴がIE6を積極的に使うわけがない 世の中にはブラウザが何かわからない人もいるんだぞ 日本のインターネット白書2008によるブラウザシェア IE7.x 36.6% IE6.x 29.0% Firefox win+mac 10.3%+1.2% わからない 22% わからないはデフォルトが多そうだし、IEが大半じゃないか 個人的にはアメブロのブラウザシェアが気になるw
そういや、Firefoxはダウンロードしただけで使わないってニュースになってたな
>>45 隣接セレクタの話なんだからIE7は考慮しなくていい
アメブロなんて重いとこ使う気がしれねえ・・・
>>48 家ではFF使ってるが職場では強制的にIE6とか
IE6で崩れないかをテストするとか(レンダラーサイトは信用してない・知らない)
色々いるだろう。何人か実際にそういう人知ってるし
それは置いておいて IEやっぱ多いんだな。
>>47 最適じゃなくて妥当なんだよ。
それに全てのサイトが現状の訪問者だけかまって
他を切り捨てると思ってるのか。
なるべく広い人に見てもらうのが一番「妥当」なんだよ。
>>50 FFが入ってるんだから隣接セレクタの話は
もう終わってるんじゃない?ちがったらごめん。
53 :
21 :2008/12/16(火) 22:05:28 ID:???
>>29 遅くなりましたがレスありがとうございました。
JavaScriptで実現することも考えてみます
(CSSですることしか考えてなかったのでそちらのほうは盲点になっていました)。
FFでもFxでもわかればべつにいいじゃないか 細かいことにこだわるとハゲるよ
ファイナルファンタジーですねわかります どうでもいいけどFFじゃなくてファイファンだろJK
FFはファイナルファイトに決まってるだろ
>>52 本当に話がずれてる奴だな
全てのサイトが現状の訪問者だけかまって他を切り捨てるんじゃないのと同様
全てのサイトが現状の訪問者だけでなく他もかまうんじゃないんだよ
おまえの妥当を他サイトに押しつけるな
それは全てのサイトに現状の訪問者だけかまって他を切り捨てろと言ってるのと同じなんだよ
特定のブラウザで表示できずに泣こうが笑おうが個人の自由ってことで いいかげんこの話題やめようぜ
FFがファイナルファンタジーかファイナルファイトかの話題は続けてもいいですか つーか特定のブラウザで表示できないなんてことがないようにフルCSSの概念があるんであって 多少テーブルに色がつかないくらいどうだっていいことだな
隣接セレクタどころじゃなくJSだともっと色がつかない人も多いだろうしねえ
むしろファイナルファイトをファイファイで
ファイファンvsファイファイ?
6まではファイファン。 7からはFF。
モーターレース好きならファーストフラッグと答えるはず(゚∀゚)
ページのデザインについて質問があります。 現在、ページのデザインを行う場合に1つのページ全体を中央に配置する為の<div></div> ブロックを<body>部に挿入し、更にその中に罫線( border)が 0のテーブルを用意し、 それらの<td></td>の中に新たに<div></div>を挿入する事により デザインをしているのですが、この方法って悪いのですか? うわさによると<div>タグを多様したページはなぜか好ましくは無いらしいんですけれども 実際のところはどうなのでしょうか?
しょれのどこいらへんがCSSなの ?
テーブルレイアウトじゃん
それはあれだべ。 <div>が特に目的をもたないタグだから、 タイトルや段落、リストを作る目的なら、<h>や<p>、<ul>とか適切なタグを使えってだけで その目的に合致するようなタグがないのであれば、<div>を使っても問題ないよ。 要は何でもかんでも<div>を使うなってことだ。 多用というよりも乱用してはいけないって感じ。
上の方とは別の者ですが、
それに関して質問してもいいでしょうか。
テーブルの td タグの中にdivとかを入れるのは
文法違反だと思っていたんですがHTML4.0の木構造を見ると
http://www.kanzaki.com/docs/html/element-tree.html td の中には %flow* とあり、divも%flow のタグ群に含まれます。
これは td の中に div を入れても文法的におかしくないということなんでしょうか。
それとも現在のブラウザにテーブルレイアウトのサイトを表示させるために
一応こういう定義も認めるという意味(つまり文法違反)なんでしょうか。
教えて下さい。よろしくお願いします。
>>71 「憎まれっ子世にはばかる」は文法違反ではないし日本語としては正しいが、おかしいだろ?
それと同じ事
間違えた、自分がおかしいorz 「憎まれっ子世にはびかる」は文法違反ではないし日本語としては正しいが、おかしいだろ? それと同じ事 だ 正しい「はばかる」で書いたら全然意味伝わんねーorz ちなみに「的を得る」も「的を射るだよプギャー」とされてますが 実は「正鵠を得る」から変化した語なので「得る」の方が正しいです という豆知識で許して
はびかる→はびこる もう退場します…
文法にこだわり過ぎるやつって何なの?病気? ブラウザでちゃんと表示されてるならそれでいいじゃん
>>73 逆だよ。
当を得ると混ざって昨今そう言われるようになった。
誤用かどうかは権威の間でも議論は平行線を辿っているのでどうにも。
正鵠というのは的の中心のこと。
だから、実はどちらも本来は「射る」という表現が正しい。
元々は正鵠を「失う/得る」で対だがどっちでもいいよ つかスレ違い甚だしいぞおまえら
国文系のスレに誘導しようかと思ったが行ったことない俺にはどこかわからなかったぜ
CSSネタの雑談スレ立てるよろし
>>76 ありがとうございます。
文法のこと質問したらなんか為になる話も聞けたw
みなさん、ありがとございました。
質問です 先日、知り合いにサイトを見てもらったら、 イメージタグがそのまま入ってるのはよくない、何かで囲め。 と言われたのですが、↓ <img src="~~" /></img> 見出しタグ、リスト以外で、デザイン上使用してる画像って(でも背景画像にしない場合) ほぼ<p>タグでくくって良いんでしょうか 会社サイトとか見てても、イメージタグをそのまま入れてる所って結構みるけど そんなに良くないことなのかな
83です 間違えました! <img src="~~" /> ↓ <p><img src="~~" /></p> うっかりものすごい間違いをしてました・・・恥ずかしい
素朴な疑問なんですが、 <br>タグって </br>
86 :
85 :2008/12/18(木) 02:33:05 ID:???
素朴な疑問なんですが、 <br>タグの使い方は 1.</br> 2.<br/> どちらが正しいのでしょうか? ASP.net(VS2005)で自動で作成(推奨)されるのは「2.」の様なのですが。
<br /> だXHTMLなら。
>>87 あざーす。
今後は<br/>と記述す事にします。
>>89 DOCTYPEを書いてくれ、話はそれからだ。
HTMLなら<br>だし、<br>に閉じタグはないので</br>は×
XHTMLなら<br />で<br/>は×
http://www.linkfly.net/template/103/ 上のテンプレートはCSSでレイアウトしていますけど、この中でテーブルを使うと文法的・構造的におかしくなるのでしょうか?
メインコンテンツの下に項目別にデータの数値等を記述したいのですが、テーブルを使わないと難しい気がします。
最近のテンプレートはテーブルを使っていないから、入れると間違いなのかなと思いまして・・・。
よろしくお願いいたします。
またテーブルの質問かw てか、質問内容からして同類だな レイアウトとコンテンツの表にどんな関連性があるんだよw テーブル=文法的構造的におかしい とでも思ってるのか? もうこのスレでは、テーブルの質問はなしな。HTMLスレ行け。
>>92 そういうことじゃなくね、テーブルレイアウトがどうのってことじゃないんだから
>>91 でもここで聞くのはおかしい、自分でソース見りゃわかる話だろうが、あるいは試すとか
そこのCSS、tableについては一切スタイル設定してない
>>91 勘違いしないで欲しいのは
テーブルを使うことが悪いのじゃなくて、テーブルを用いてレイアウトをすることが良くないっていうこと。
表を作るのならテーブル使うのは当たり前。表をテーブル使わないでcssだけで表現するとか言うのは本末転倒。
もちろんテーブルで組んだ表を装飾するのにはcssを使うべき。
まあ、テーブルの可否はcssスレの話題じゃないかもね。HTMLもしくは文法関連の話かな。
テーブルをcssで装飾する云々ならここにおいで
>>95 おまいは2ちゃん語を勉強してくるといいお
古語でも何でも指摘するとした方が恥ずかしいからな
いいかげんCSSの話しませんか?
ていうか「なくね」ってもはや一般的に使われてね?w
言葉尻に突っ込んでると解釈したのかw
>>92 のどこがそういうことじゃないかを聞いたんだが
>>92 もレイアウトがどうのってことじゃないから
表作る(テーブル使う)のとは関連性がないって言ってるのに
そういうことじゃないっておかしいだろ
いいかげんスレチだ
>>101 おまえのレスがが「日本語でおK」なことだけはわかる
質問です 前方互換(XML宣言した時)のIE6だと white-space:pre; が使えないようなのですが (<br />いれるとか<pre>つかうとかじゃなくて) CSSでこれを回避する手はあるでしょうか。 あったら教えて下さい。お願いします。
ない
しばらく悩んでます、助けてください。 z-indexを使ってるdivを左にfloatさせたいんだけど、 z-indexのposition:absolute;のおかげで、 同じ位置に表示されてしまうんだ z-indexは譲れないので、absoluteを設定しつつもfloatできる スマートなやり方があれば教えてほしいです
109 :
108 :2008/12/19(金) 04:33:55 ID:???
>z-indexを使ってるdivを左にfloatさせたいんだけど、 z-indexを使ってるdivを左にfloatさせて増やしていきたいんだけど、 わかりずらい記述でごめん
position:absolute; がなにを意味するか調べてから質問して頂戴 !
>>108 position:absoluteとfloatの併用は無理
無理つーか意味がないつーか
>110 絶対配置は知ってるよ でもcssレイヤーを使わなくちゃで、ハックのようなものがあったらと思ったの >111 やっぱ無理っすかー 他の方法でためしてみます >112 レスどうも
CSS着せ替えテンプレの事で質問です 基礎htmlと使いたいやつ(仮にA)DLしてきたのはいいけど上手く表示できない… (文字だけ表示されてる状態) どこに何をぶち込んだら表示されますか?
せっかく名前付けた「A」がまったく必要ないな だから、テンプレ作った奴をAとしよう Aに聞け
まぁパスの問題だろうけど
>>107 ありがとうございます。
<br class="ie6"/>で整える作業が始まるお・・・。
理由もちゃんと書きましょうね^^
レンタル鯖に強制挿入される以下のバナーをcssで見えなくしたいのですがどうすれば良いでしょうか?
よろしく御願いします
<body bgcolor="#eeeeee"><!-- '"> -->
<table style="margin: 0pt 0pt 10px; padding: 0pt; position: absolute; left: 0px; top: 0px; z-index: 2147483647; width: 100%;" cellpadding="0" cellspacing="0"><tbody>
<tr><td style="border-bottom: 1px solid purple; width: 100%; height: 18px; text-align: center; background-color: rgb(204, 204, 204);">
<a href="
http://www. 〜style="padding: 0pt 20px 0pt 0pt; font-family: tahoma,verdana; font-size: 11px; font-weight: bold; color: rgb(0, 0, 204);" target="_new"> Web Hosting</a>
<a href="
http://www. 〜" style="padding: 0pt 20px; font-family: tahoma,verdana; font-size: 11px; font-weight: bold; color: rgb(0, 0, 204);" target="_new">
Report </a></td></tr></tbody></table><div style="height: 18px;"><p></p></div><br>
>>124 table [display:none }
127 :
124 :2008/12/20(土) 12:27:51 ID:???
すみません ページ内が全部消えました・・・
>>127 どこの鯖か知らんがそれって規約違反じゃねーの?
見つかったらアカウント削除されるよ
広告がいやなら有料鯖使えよ
ユーザースタイルシートで自分にだけ見えないようにするなら構わないけれどもね。
>>128 広告じゃなくて、bloggerにあるような通報バーなんです
だから消したい
広告であろうとなかろうと規約で消すなと書かれてるものはダメだろ 消していいものならサポートに訊けば消し方を教えてくれるんじゃないかな
absoluteで配置されてるとかじゃね?
そりゃ消えたんだから使ってるで確定じゃね?
二度手間だなw
id と外部CSS使えば たぶん
>>137 さんは幸せになるんだが・・・。
どう教えたらいいの、こういう場合・・・。
いっそテーブルレイアウトやめろといえばいいのか
z-indexを最大値にするくらいなんだから、見えなくしちゃ駄目なんじゃないか。
bloggerの奴は通報バーじゃなくて、ナビ検索バーな。
で、ちゃんとIDも付いてる。
でも、
>>124 はソース見る限りナビ検索バーとは思えんな。
バナーっていったり、通報バーといったりでよくわからんが、どこのレンタル鯖?
ないと思うけど規約違反の方法を聞くとかやめてね。
3カラム+フッターのサイトを作りました。 IE,opera,Firefoxで見ると、Firefoxだけフッターが上のほうに表示してしまいます。 調べるとFirefoxではheight指定してないと、clear: both; したあとフッターが上に表示されるようです。 IE,operaでは、3カラムの下にフッターがきっちり収まります。 Firefoxでは皆さんheight指定をきっちりやっているのでしょうか? height指定すると、テキスト文の増減で高さが自動調整されないので不便だと思うのですが 何か良い方法はありますか?
heightの問題じゃないとおもうけど
>>141 多分clearの仕方を間違えてるだけ
heightなんか関係ない
ブロック要素でclearしてるよな?
>>142 >>143 >>144 レスありがとうございます。
やはり自分の作り方に問題があるようですね。
>>144 さんの教えてくれたサイトで何かヒントが得られそうな感じです。
ちょっと他の作業があるので、それが終わったらじっくりと勉強したいと思います。
d
146 :
Name_Not_Found :2008/12/22(月) 01:54:32 ID:7DtqaC/E
中央揃えされたボックス群を中央揃えにするにはどうすればいいのでしょうか。 現状 【[ a ] [ a ][ a ] [ a ] __________】 みたいな感じなのです。 よろしくお願いします #menu li a { color: #000000; text-decoration: none; font-size: 13px; display: block; width: 8em; text-align: center; padding-right: 5px; padding-left: 5px; line-height: 40px; }
>>146 中央揃えされたボックス群を中央揃えにする?
>>146 なんかインラインとボックスをごちゃ混ぜにしてるみたいだけど
単純にボックス群をブラウザ中央表示させたいってことでいいなら
inline-blockを使えばいいよって言いたいんだけど
クロスブラウザ的問題があるから初心者にはちょっと難しいかも
だからtableで妥協ってところだろうか
全体のwidthが決まってるならmarginやpaddingで調整するって手もある
>>149 width決まってなくてもmarginのautoがありますが
むしろお前の解答の方が心配な件
>>150 それってボックスが一つならってオチ?
もしmarginのautoで複数のブロック要素を中央揃えできるなら是非教えてもらいたい
>>146 widthを指定しなくていいならtext-alignでなんとかなるんだけどなぁ
>>154 それはその親要素が中央に寄るだけで
中身の複数ブロックを中央揃えできるわけじゃないジャマイカ
な ん な ん だ こ の 低 ラ ベ ル は !
>>151 >>155 質問の意図を勘違いしてね?
いや、質問者の質問が悪いのかもしれんが
親要素を中央寄せにしたいだけだろ
既にボックス群自体は「中央揃えされたボックス群」なんだから
それを更に「中央揃えにするにはどうすれば」なんだから
>>150 >>154 のほうで普通は正解だろ
>>155 なにを言っているんだおまいはwwwww
>>154 で、なんのために親要素を作ったと思っているんだ。
親と一緒に複数の要素とやらも中央に並ぶだろw
>>158 そういうんじゃなくて、
>>155 は親ブロックの中に隙間を作って中央寄せと勘違いしてるんだと思う
ただ
>>146 見るとブロック群と言いつつ実際はliの中にaがたくさんのような気がするから
text-alignでいいんじゃないのという気がしないでもないのは確かなんだが
マジで
>>146 は日本語でおK
エスパー養成所か、ここは?
[ a ]
俺はこれを見た瞬間ピンと来たね。
>>146 の「中央揃えされたボックス群」が意味するものは
「中央揃えされたテキスト」のことだってことがね。
そして【 】これが親ボックス。
つまり、1つのブロックを中央寄せしたいって質問だったのさ。
>>159 liの中にaがたくさんは間違いだぜ。
liをインラインにしてその中のaをブロックにしてるんだ。
でないとli使う意味もないからな。
「リストの横並びメニューのやり方を最近学んで試行錯誤してる」
質問者は今そんな状態なんだ。
>>161 いや残念ながらliはブロック要素だな
しかもfloat:leftしてる
理由はdisplay:block指定してるaが左詰めで並んでること
そもそもインラインの中にブロック要素は書けないぞ
【】はulで[]がliだな、でliの中にそれぞれaがある
結局質問の答えとしては
>>149 が正解だな
俺としたことが迂闊だったぜ。 確かにそこはフロートだ。
な ん な ん だ こ の 低 ラ ベ ル は !
つまり、こういうことなのか? なんというか、完成図をもう少し明確に示して欲しいな。 ┌─ body ──────┐ | ┌─ #menu ┐ | | |[a][a][a][a]← li | | └─────┘ | └──────────┘ <ul id="menu"> <li><a href="sample1.html">サンプル1</a></li> <li><a href="sample2.html">サンプル2</a></li> <li><a href="sample3.html">サンプル3</a></li> <li><a href="sample4.html">サンプル4</a></li> </ul> で、「中央揃えされたボックス群」が li だとして、 俺ならこうする。
body { /* テキスト中央揃え */ /* #menuブロックを中央へ (IE用) */ text-align: center; } #menu { /* #menuブロックを中央へ (標準に添ったブラウザ用) */ margin-left: auto; margin-right: auto; text-align: left; } #menu > li { float: left; width: 8em; padding-right: 5px; padding-left: 5px; text-align: center; line-height: 40px; } #menu > li > a { color: #000000; text-decoration: none; font-size: 13px; }
もう答えはでてるんだからいいだろ。 だいたい子セレクタはIE6では対応してないし、 ブラウザ間によるulの違いも処理されてない。 さらにリンクをblockにしてるのを無視したりと質問と違いすぎる。 俺ならオナニーは自分のブログにでも書いとけ。
168 :
Name_Not_Found :2008/12/23(火) 22:45:35 ID:uZK3x+Ll
質問なんですが、以下のCSSを表示させると IEとOperaで表示が違うのですが回避する方法はないでしょうか? 具体的にはleftsideとarticleの間にIEだと隙間が出来てしまいます。 Operaだと隙間なくピッタリと引っ付いて表示されます。 #leftside { float: left; width: 175px; height: 150%; background-color: #555555; margin: 0px; padding: 5px; } .article { height: 29px; background-color: #225522; margin: 0px; padding: 0px; text-align: center; }
>>168 htmlもかかないとmargin、paddingを見直せとしか言えない
とりあえず問題が再現できる最小限のソースを貼ってくれ
171 :
168 :2008/12/23(火) 23:26:20 ID:uZK3x+Ll
すいません htmlは単純に <body> <div id="leftside"> <font color="#FF0000">いいいいい</font> </div> <div class="article"> ううううううう </div> </body> です。 margin、paddingは0でやってみましたが同じです。 OperaとIEでは、色々動作が違うのですね。
>>171 .articleのheight消してみ
後<font>は使わないほうがいい
回答者馬鹿ばっかだなwww 「CSS リセット」でググれw
馬鹿同士で突っつき有ってるんだからしかたがない。
175 :
Name_Not_Found :2008/12/24(水) 17:51:54 ID:DMjK1awe
質問です。よろしくお願いします。 ハイパーリンクの箇所に背景画像を設定しています。 背景画像は、アンダーラインの点線と矢印です。 矢印は、ハイパーリンクを示すため、 リンクされている文字列の右に表示しているものです。 また、マウスオーバーで、文字色を変え、 点線のアンダーラインを実線に変えています。 このとき、文字列の途中で画面上改行されると、IEにかぎり、 最終行しかアンダーラインが表示されず、 矢印も変なところに飛んでいます。 何か対処する方法はありますでしょうか。 それとも、俺の書き方が悪くて、 たまたまFireFox等がうまくフォローしてくれているだけなのでしょうか。
176 :
Name_Not_Found :2008/12/24(水) 17:55:52 ID:DMjK1awe
具体的には、こんな感じです。
html======
<a href="
http://www.google.co.jp "><span>Google.co.jp</span></a>
=========
css======
a {
background: url(点線.jpg) bottom repeat-x;
}
a span {
padding: 0 16px 0 0;
background: url(矢印.jpg) right no-repeat;
}
a:hover {
background: url(1px点.jpg) bottom repeat-x;
color: #B22222;
}
=========
>>175 とりあえずFirefoxのほうは聞かないで入れて試せよ
IEはバグ
179 :
Name_Not_Found :2008/12/24(水) 22:50:41 ID:DMjK1awe
>>178 ありがとうございます。IEのバグなんですね。
Firefox、Opera、Safari(ウィンドウズ版)では、ちゃんと表示が確認できました。
IE(とSleipnir)ではできませんでした。
もし対処法をご存じの方がいらっしゃいましたら、よろしくお願いします。
ない
┏━━━━┓┏━━━━━━━┓DIV要素のBを左カラムの一番下に表示させたいのですが、CSSで可能なんでしょうか? ┃ .................. ┃┃ . . . . . . . . . . .........┃具体的にどうcssに書き込めば良いのか教えてくださいm(__)m ┃ .....A... ..... ┃┃ . . メイン. .... .........┃ ┃ .................. ┃┃ . . . . . . . . . . .........┃ ┗━━━━┛┃ . . . . . . . . . . .........┃ ................................┃ . . . . . . . . . . .........┃ ................................┃ . . . . . . . . . . .........┃ ................................┃ . . . . . . . . . . .........┃ ┏━━━━┓┃ . . . . . . . . . . .........┃ ┃......B............┃┃ . . . . . . . . . . .........┃ ┃ .................. ┃┃ . . . . . . . . . . .........┃ ┃ .................. ┃┃ . . . . . . . . . . .........┃ ┃ .................. ┃┃ . . . . . . . . . . .........┃ ┗━━━━┛┗━━━━━━━┛
>>181 body {
display:
"a.m"
"..m"
"b.m"
}
#A { display: "a"; }
>>181 具体性を求めてる割には質問が抽象的すぎる
position使えばおk
あとソース教えろってのはなしな 永遠とここで聞くことになるから
永遠とっておかしいな 永遠にか延々とだな
Bでfloatをclearしてマイナスマージンで引っ張り上げてやればいいんじゃないか?
おれ ?
詐欺じゃー
CSSについて質問があります。 次のコードの通り<div>で定義した文字列"あいうえお"を <td>要素内で上下中央の位置に表示するにはどうすれば良いで しょうか? ※単なる文字列(divを使わない)の場合には次のスタイルシー トで正常に上下中央に表示される事は確認済みです。 style="vertical-align: middle;" <table> <tr> <td> <div>あいうえお</div> </td> </tr> </table>
196 :
Name_Not_Found :2008/12/25(木) 23:42:59 ID:mSQhgYea
つーかdivの意味がねえw
>>198 使用しているブラウザを教えて下さい
IEでは中央になりますよw
IEをバージョン言わないお前もレベル似たようなもんだがな
>>196 >>199 IE7です。
どっか別なスタイルシートが邪魔してるかもしれないのでまっさらな状態
のWEBページを作成して試してみます。
>>200 IE6,7はテーブルの中身は中央揃えになると
思うんだけど5以前ってどっちかに寄るの?
なんという丸投げ。 あえてサイトは見ないが、floatなら背景はコンテンツ分しか表示されないだろ。 表示したいなら、背景画像か変なjavascript、あるいは禁断のtableでも使え。
そのレイアウトなら別に変わってもいいじゃん 一番簡単なのはメニュー幅の背景画像で縦リピート
ありがとうございました。 あれから試行錯誤し、画像で対策することにしました。
207 :
Name_Not_Found :2008/12/27(土) 20:05:00 ID:rblnBYHv
first-letterって、たとえば、 ul:first-letter { ほにゃらら}には適応されるけど、 li:first-letter {ほにゃらら}では何も起こらない。 これってそういうもんですか?
年末年始休みに入った上級者です。 何か難しいことを質問してください。
>>208 CSS3が勧告されるのはいつ頃になりそうですか?
>>209 IEでバグがでまくります。
世の中からIEを消すにはどうしたらいいですか?
IEをなくすにはIEで表示されないものすごく面白いサイトを 作りつづければいいと思うよ。 ただIEでの表示違いを「バグ」だと言ってるうちは 面白くて流行るものはなかなか作れないだろうな。
>>212 え?じゃ上級者の方って
背景画像が出なかったり
borderが出なかったり
リセットしてるのに余白が出たり
margin:autoがきかなかったり
floatの横marginが2倍になったり
dottedがうまく表示されなかったり
縦marginが相殺されなかったりするのを
バグと言わずになんとお呼びしてるのでしょうか?
<div style="position:absolute; width:○px; height:○px; z-index:1"> <img src="画像URL" alt="画像名" width="○" height="○"> </div> <div style="position:absolute; width:○px; height:○px; z-index:0 "> <img src="画像URL" alt="画像名" width="○" height="○"> </div> これを常にブラウザの真ん中に表示させておきたいんだけども どうすればいい?
これってどれだよ
ずっと引っ掛かってるんだが
>>17 が言ってる「同じ名前のidを使いまわすのは間違い」
ってホントか?
ページ内で同じidを使わない(使えない)、って解釈してたんだが
コレが本当なら俺のCSSは間違いだらけだorz
動くし問題ないんだけど気になるから誰か教えてくれ
>>216 ごめん、画像のことね。
>>215 で画像を重ねて表示することは出来るんだけども
その重ねた画像を真ん中に持ってきたいわけ
>>217 マジだぞ。仕様で決まってる
>>218 ただ単に画像をブラウザ中央で重ねたいなら
tableとposition:relativeを組み合わせればいいよ
後フォントサイズを0にしとくと吉
>>219 dクス
年末年始はidをclassに書き換える作業に費やされることが決定したわ
<div class="a">
<div class="b">内容</div>
<div class="c">内容</div>
</div>
<div class="b">内容</div>
ってのがあったとしてCSSの方で
.a .b{background:#000000}
.b{background:#ffffff}
とかできないよな?
今のCSSだとaがidだからいいんだけど
これ無理なら年末年始どころか1月中CSSを…orz
>>220 やりたいことは謎だけど指定の仕方は間違ってないよ
.a .b{background:#000000}
.b{background:#ffffff}
だと.a .b{background:#000000}が優先される
ってかidをclassクラスに#を.にエディタで置換すればいんじゃない?
222 :
Name_Not_Found :2008/12/28(日) 04:14:51 ID:CVsPBHN9
HTML <div id="test"> <div class="test_body"><a href="#">リンク</a></div> </div> CSS× #test a{ text-decoration: none; } #test a:hover{ color: #FF0000; } #test .test_body a:link{ color: #0000FF; } CSS○ #test a{ text-decoration: none; } #test a:hover{ color: #FF0000; } .test_body a:link{ color: #0000FF; } CSS×のほうだとマウスオーバーした際にリンクの文字色が変わりません CSS○のように.test_bodyの頭の#testをとるとリンクの文字色が変わります #test .test_body a:link{ color: #0000FF; }のままでマウスオーバー時の色が変わるようにするには CSS×をどのように書けばいいんでしょうか?
>>222 #test .test_body a{ text-decoration: none; }
#test .test_body a:hover{ color: #FF0000; }
#test .test_body a:link{ color: #0000FF; }
>>219 ありがとう、真ん中に置くのはこれでいい感じだ。
で、もう一つ質問なんだけども
上に重ねた画像を、ページ上部に持ってきたいんだけども
それはどうすればいい?
225 :
215 :2008/12/28(日) 04:38:49 ID:???
>>225 position:absoluteをうまく使う
>>217 >>17 がそんなことを言ってるとは思えないんだが
ページ内で同IDは駄目だが、別ページなら同じIDがあっても問題ないぞ、マジで
228 :
217 :2008/12/28(日) 05:06:48 ID:???
>>221 実際にはclass="b"で指定しているモノが
違う幅で2つあるんだけど
CSS書き足すのが面倒だったからまーいいやと思ってそのまま
出来るんなら置換すればイイだけのことだから
たいした問題じゃなさそう
根底からCSS書き換えたほうがいいのは分かってるんだがな
>>227 スマン、
>>18 の間違いだわ。
でもって結局のところどうなんだよ!?
>>229 学校を思い出すんだ
組=ページ
出席番号=id
性別=class
にそれぞれ置き換える
同じ組の中に同じ出席番号の人がいたら困るけど
別の組に同じ出席番号の人がいても困らないよねって話
>>228 >>18 も「同じ名前のidを使いまわしているページをよく見かけるが」と言ってるんだから
同ページ内での同IDの話しかしてないだろ
231 :
215 :2008/12/28(日) 05:37:50 ID:???
>>226 ありがとう、今cssを完全に理解した。
愛してる
ああ絶対に理解してないな・・・
ああ絶対に理解してないな・・・
234 :
222 :2008/12/28(日) 15:18:09 ID:???
>>223 あ、すみません
#test a{ text-decoration: none; }
#test a:hover{ color: #FF0000; }
この2行もそのまま使って、#test以下のa:hoverすべてに
color: #FF0000を適用したいのですがうまくいきません
HTML
<div id="test">
<div class="test_body"><a href="#">リンク</a></div>
<div class="test_body2"><a href="#">リンク</a></div>
</div>
CSS×
#test a{ text-decoration: none; }
#test a:hover{ color: #FF0000; }
#test .test_body a:link{ color: #0000FF; }
#test .test_body2 a:link{ color: #0000FF; }
下のほうにもhover書けばいいよ
>>214 仕様
IEの開発者がそう意図して作ってるんだから
とりあえずバグじゃないよ。上級者とか関係ない。
>>236 仕様じゃなくてバグだっての
数値の2倍になるように設計するはずあるかボケw
仕様です
数通り書くのマンドクセ('A`) もうIE作った奴出てこいよ。 グーで一発殴らせろ。
>>237 バグだと認定されてるならオンラインサポートに情報が載るか
パッチを公開するからたぶん
意図して放置されてるんだと思う。
「実は2倍になっちゃうけどその方がページが
綺麗に表示されるもんね。
お金かかるし、めんどいから仕様ってことにしておきましょう」
みたいな。
つまり仕様ですよ。
まぁ、「仕様です」にはバグですってニュアンスも内包されてるからね。
list-style-imageプロパティで、どうしても画像と文字が縦方向にずれるのですが 何か良い解決方法はありませんか?
初心者にオススメなわかりやすいCSSの参考書 どなたか教えて頂けないでしょうか 一応自分で一冊買ったのですが、わかりづらくて困りました(´・ω:;.:...
list-style-imageは使わずに背景画像
>>235 まとめて一括指定できないんですね
がんばって全部link visited hover active入れます・・・
link visited hover active だけのクラス作って、 クラス複数指定で当てればいいよ
上に同じ「id」を使いまわすのは禁止とりますが、 同じ「class」を使いまわすのは、良いのでしょうか?
>>249 ありがとうございます。
大丈夫そうですね。
もし、書き直すとなると
大変な手間になるので、ヒヤヒヤしてました。
普通はHTML弄るほうが面倒だと思うけど
CLASS増やすと、HTML内のCLASS=""も いじらないといけないので、ヒヤヒヤしてました。 サイトが完成したら、評価スレに書き込むので評価お願いします。
なんだ宣伝か
ところで皆「hover」って何て呼んでるの? 英語の発音だと「ハヴァー」に近いけど、日本語だと「ホバリング」ていうくらいだから「ホヴァー」?
ほえ〜
ホバー …ダメ?
俺はいつも心の中で「フバー」って読んでる
ホヴァー
オヴェール
エイチオーバー
hoverよりheightの呼び方のほうが気になる
ホヴァー と ヘイト
質問です。 テキストの折り返しをさせないようにしたいのですが、 white-space: nowrap;を使うと、 飛び出したテキスト部分の背景が表示されなくなったり 飛び出したテキストが他のboxに重なってしまったりします。 この背景の表示と文字の重なりの問題をなんとかできないかと。 例えば、テキストを折り返させず なおかつ、テキスト幅に合わせてboxの幅が変動する。 このような設定は可能なのでしょうか。 その他解決できる方法がありましたらご教示ください。
>>264 > テキスト幅に合わせてboxの幅が変動する
position: absolute
pre使えよ
>>266 ユーザーのフォントサイズによって崩れるレイアウトを直すために、
全体に設定したいのでpreは使えないですね。
>>265 少し試してみたんですけど、うまくいかないです。
どんな風に書けばなりますか?
なら幅をemで指定 てか先に書けよ2度手間だろ
>>269 ごめんなさい。
見事な後出しです。
テキストの量は同じタグでも場所によって変わるので
それぞれのテキスト幅にあったwidthを設定できたらなと。
ありがとうございました。
それで頑張ってみます。
271 :
Name_Not_Found :2008/12/30(火) 23:01:53 ID:G1yClEIj
質問が2つあります。 @<h1>〜<h6>の文字色を、個別に設定したいのですが、可能でしょうか。 Aメインの下に、もうひとつメインを設置する方法 例えば、 ・main float: left; width: 20px; ・menu float: right; width: 10px; これの下に、 ・main2 clear: both; float: left; padding-left: 10px; width: 20px; とすると、「main2の文末」が、 「menu」部分にも表示されるバグが起こりました。 実際は3カラムで試したのですが、対処法はありますでしょうか。
ソース表示すりゃわかるじゃん
>>272 暗号化?されてるから見られないと思うよ
ところでみなさん、
多くのCSS使う場合、CSS専用フォルダ作ってますか?
UTF-8がwww暗号化wwwwwww
>>274 IEでソース表示からたどったって、全部よめたけどねww
>>273 他の板で聞いたらstructer.cssらしいのですが、そんなのソースにあります???
よっぽどwwwなのか ばかでごめん
@importも知らんのか
(´-`).。oO(年が明けても低ラベルのままなんだろうなぁ…)
>>280 一応、ヒントになってるけど
初心者質問スレでそのレスはねーよw
なくてもいいよ、そいつマルチだし
284 :
279 :2009/01/01(木) 10:41:36 ID:???
"一応、ヒント"とか言っちゃってる282は俺じゃないからね☆ミ あけましたおめでとう
285 :
【大吉】 :2009/01/01(木) 17:59:10 ID:???
^^;
cssでたとえば一番上の段に横並びにメニューを作って その下のブロック?をスクロールさせてもずっと一番上のメニューを表示させておくことは可能ですか? また、そう言ったものをかるーく作れるものなのでしょうか
>>286 CSS を良くサポートしているブラウザならば、position: fixed を使ってかるーく作れます。
レスありがとう! 以前作ろうと思ったとき、シンプルでそう言ったサンプルを提示して説明しているサイトさんがあったのですが、 見失ってしまいました… サンプルではグリーン、ピンク、パープルといろいろな色天プレで説明して サンプルテキストは猫の話でした… どなたかご存じの方、もしくはほかにわかりやすいサイトをご存じの方教えて頂けないでしょうか お願いします!!
答えをもらってるのに何を言ってるんだおまえは・・・
すみませんサンプル見ながら練習したかったので…見つけました すごくわかりやすいので、書いておいた方が良いですか? 晒しになりますか…
>>290 個人的には知りたいけど、
そのサイトの管理人さんが気を悪くするかもしれないですよね。
ググって見つけたのなら、
検索結果のトップページにそのサイトが引っかかる検索フレーズを
教えて下さい。まどろっこしいですけど。
次の通りスタイルシートを組み"class_h2_midashi"を<h2>タグに反映させ ようとしているのですがなぜか、Aの背景色が出てしまいます。 classできちんち分けているのになぜでしょうか? <h2 class="class_h2_midashi">今夜のメニュー</h2> h2 /* @ */ { BACKGROUND-COLOR: #8484ee } h2.class_h2_midashi /* A */ { font-size: 14pt; border-left: #00ff00 5px solid; color: #ff3366; border-bottom: #ff3399 1px dotted; text-align: left; width: 650px; }
>>293 ありがとうございます。
実はAで背景色を指定したく無い為に何も指定していません。
背景色を白色では無く、無色(透明)にするにはどうすれば良いでしょうか?
CSSで特定のボックスの背景のみアクセスする度にランダムで読み込ませるようにしたいのですが、どうすれば良いのでしょうか?
javascriptつかえ
299 :
あああ :2009/01/05(月) 15:51:49 ID:1ERxuzo7
まだ5日しかたってないって
303 :
Name_Not_Found :2009/01/05(月) 19:41:02 ID:rA3Bbg3Y
質問があります。 --------------------------- @import/**/ "abc.css"; --------------------------- 上記の/**/って何を意味しているのですか?
古いブラウザ向けのハック 何のやつだったかは忘れた
305 :
303 :2009/01/05(月) 20:44:13 ID:rA3Bbg3Y
>>304 ありがとうございます。
ハックで調べてわかりました。
コメントハックで[WinIE5.0以下,MacIE除外]に該当するよう?です。
俺もそれ、自分で書いた昔のWebページを見てなんだろうと思っていたんだ。 忘れているものだよな。
それはむしろ若年性健忘症を疑っとけ
308 :
Name_Not_Found :2009/01/06(火) 02:14:44 ID:YTTnE6PD
<table width="500" height="200" border="0"> <tr> <td width="70%"></td> <td width="30%"></td> </tr> </table> このような単純な表を作っています。 ┏━━━━━━━━━━━━┳━━━━━┓ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━━━━━━━━━━┻━━━━━┛ 左枠にブログの新着記事を表示させているのですが、記事タイトルが長い場合、 記事タイトルが改行されみっともなくなってしまいます。 ┏━━━━━━━━━━━━┳━━━━━┓ ┃2009/1/5 あいうえおかきく ┃ ┃ ┃けこさしすせそ ┃ ┃ ┃2009/1/2 短いタイトル ┃ ┃ ┃2009/1/2 短いタイトル ┃ ┃ ┗━━━━━━━━━━━━┻━━━━━┛ 記事タイトルが表の幅より長くなる部分を隠して、改行しないようにすることはできないでしょうか。 右の30%分のスペースは確保しておきたいです。 よろしくお願いいたします。
わざわざ隠さなくても、、、俺なら ◆HTML◆ <dl id="sintyaku"> <dt>2009/1/5</dt> <dd>あいうえおかきくけこさしすせそ <dt>200/1/2</dt> <dd>短いタイトル</dd> <dt>200/1/2</dt> <dd>短いタイトル</dd> </dl> ◆CSS◆ #sintyaku dt{ position: absolute; } #sintyaku dd{ padding-left: 5em; ←(ご自由にどうぞ) } これを左のtdにぶちこむと ┏━━━━━━━━━━━━┳━━━━━┓ ┃2009/1/5 あいうえおかきく ┃ ┃ ┃ けこさしすせそ ┃ ┃ ┃2009/1/2 短いタイトル ┃ ┃ ┃2009/1/2 短いタイトル ┃ ┃ ┗━━━━━━━━━━━━┻━━━━━┛ となるからあんまみっともなくならん。 ソースも綺麗だしな。
隠したいのなら ◆HTML◆ <div id="container"> <ul id="sintyaku"> <li>2009/1/5 あいうえおかきくけこさしすせそ</li> <li>2009/1/2 短いタイトル</li> <li>2009/1/2 短いたいとる</li> ←普通に<br>でもいいけどこっちのが綺麗 </ul> <div id="contents"> <h2> こっちはあんまおすすめじゃねえよ </h2> <p> ・・・・・・・・・ </p> </div> </div> ◆CSS◆ #container{ width: 500px; position: relative; } #sintyaku li{ list-style: none; } #contents{ background-color: #FFF; position: absolute; top: 0 left: 350px; } こんな感じか?まあ上のやつのがいいと思うけど。
書き忘れた。
>>310 の#contentsにwidth: 150pxを適用しないとな。
倫理マークアップを知らないようだが、これを期に勉強してみれば?
外部スタイルシートに <STYLE type="text/css"> <!-- body {margin:0; padding:0; background-color:#eeeeee;} --> </STYLE> って書いて作ってもBODYに指定した値が全然適応されません。 そこでこのbodyの上に small {color:red;} body {margin:0; padding:0; background-color:#eeeeee;} とか、何でもいいのでとりあえず別の要素を書いてみたらページ全体の背景色が#eeeeeeで適応されました。 その代わり今度は .left が効きません。 最初に記述した要素だけ効かず、それより下に書いたのは普通に使えているみたいなのですが、 何か間違えているのでしょうか? ちなみにIE6、7では両方ともちゃんと表示されて、opera9 firefox3 safari3では上記の症状が出ます。
訂正。 >その代わり今度は .leftが ・・・ smallが効きませんでした。すみません。 色んなページを探しても原因が分かりません。 思い当たる方いましたらよろしくお願いします
倫理マークアップ(笑)
>>313 外部は<STYLE type="text/css">いらねーよ
>>315-316 すみません。すっごい根本的な部分が変だったんですね・・・
ありがとうございました。勉強し直してきます。
>>144 141では無いけどもfloatのやり方を勘違いしてた事による
段組崩れの解決に大変役立ちました。 感謝!!
IEだと問題なくロールオーバー画像が出るのですが、 FireFoxだとなぜかロールオーバーが表示されず、 テキストリンクだけが表示されてしまうのですがなぜでしょう・・・? .link_bnr01 a {text-indent:-9999px; text-decoration:none; background-image:url(画像1.jpg); background-repeat:no-repeat; margin:0 0 5px 0; width:184px; height:47px; display:block; outline-width:0; } .link_bnr01 a:hover {background-image:url(画像2.jpg); background-repeat:no-repeat;} 背景画像のパスと名前はダミーです。
プルダウンメニューで質問なんですが、マウスカーソルが離れてもずっと表示させるには どうすればいいんでしょうか?クリックしたら子ページが出て又クリックしたら元に戻る…みたいな感じにしたいのですが
>>322 でもそうしたらjava無効にしてる人には見れなく…
>>323 無効にしてる場合には最初から表示しとく
>>325 どういう事ですか?
そんな便利なcss記述ってあるの?
>>326 JavaScriptだって何回言えばわかるんだゴルァ
>>326 <noscript>
cssじゃなくてhtmlでの記述
>>328 なるほど
助かりました。ありがとうございます
うわ、最低の質問者…
>>322 はcssじゃできないって言ってればよかったね^^
>>331 でも
>>321 の質問は方法を聞いているんだからjavascriptを使えと言うのは正しい解答だろ。
CSSじゃ出来ないでは解答になっていない。
なんかただ単に煽ってる人が一人で空回ってる感じ 質問と回答だけ見ればいたって普通
あいかわらず頭のおかしいのが多いな
>>333 スレ違いだと解答もらってるのに続けるのは全然普通じゃないぞ
>>335 javascriptを無効にしてる時に表示を可能にする方法が
cssの記述でできるか?って質問だから
あながちスレ違いとは言い切れない
質問者が無知なのは否めないが基礎知識のない人の為のスレだし許容範囲じゃね?
ちょー好きな流れ。
というか本人の擁護だろ、これ
340 :
Name_Not_Found :2009/01/09(金) 21:37:35 ID:iQ5uBc4Z
画像を貼る際に、このようにマージンを指定することが良くあります。 <img src="**********.jpg" style="margin-left: 20px; margin-right: 50px;" /> これを毎回書くのは長いので、headのスタイルシートに .mmm{ margin-left: 20px; margin-right: 50px; } とかいて、 <img src="**********.jpg" class="mmm" /> としたのですが、画像にマージンが指定できませんでした。 この書き方ではだめなのでしょうか。
<span></span>でくくると左に隙間ができてしまいます。 margin-right: 0pxを指定しても意味がありません。 どうしてでしょうか。
342 :
Name_Not_Found :2009/01/09(金) 22:24:14 ID:iQ5uBc4Z
>>340 >>341 自己解決しました。
>>340 は何回か更新してたらいきなり適用されました。
>>341 は右端のマージンを30にしたくて0px 0px 0px 30pxとしてしまってました。
正しくは0px 30px 0px 0pxでした。
しかも左端のマージンを0にしたいのにmargin-right: 0pxとかやってました。すいません
うむ
いいのよ、別に。
>>341 左に隙間出来てるのに、右のマージン殺してもねぇ・・・
つか、情報少なすぎ
>>341 左に隙間ができるのならmargin-leftを0にしなさい
普通は隙間はできないのでどっかで間違った指定をしているんでしょう
自己解決完全スルーw
推奨 NG ワード: 自己解決
左右ってうっかり間違えやすいもんな
そもそもインライン要素のspanにマージンないだろ
もう質問者は帰ったよ^^
>>350 関係ないのは上下だけだぞ
インラインの左右のマージンは
最初の文字の左側と、最後の文字の右側に存在する
354 :
Name_Not_Found :2009/01/10(土) 18:40:27 ID:MdCGiqfg
firefox3.1で単位 'ch' が通常の長さの単位として任意の場所で使えるようになり、この単位は仕様に従い、文字 '0' の横幅を基準とするみたいなんですが 3.0と3.1でどうcssでこの差を修正したらよろしいでしょうか?
hoge { width: 10em; width: 20ch; } こんな感じで
>>354 CSS3で適用されたのかと思って思わず調べちまったじゃないか
CSS2でも3でもchは単位として認められてない
Fxの独自仕様なんだとしたら、IEのもそうだがここでは扱ってないのでスレ違い
じゃ、ハックもスレ違い?
フィルターとかいっつも追い出されてはいたな
ハックは別に独自路線じゃないよな 単に「こうできて当たり前」なのをやれてないブラウザがあるから 結果としてハックになるだけで
4大ブラウザ(IE,FF,O,S)でできることなんだから独自仕様とかいちいち細かい奴は他池
むしろ変なもんは使うなと そんなもん使って何の意味があるのかと
>>362 widthは数字5桁分みたいな指定がフォントに依存せずできるようになる
widthは数字5桁分みたいな指定がブラウザ依存でできるようになる
普通に考えてそういう使い方ならフォントに依存してくれたほうが使いやすいだろ
どんなフォントで表示されようが「0」5個分って指定ができるようになる ってことじゃねーの? これがフォント依存なのかどうなのかはよくわからんが
>>361 フィルターは4大ブラウザでできることじゃないだろwww
どうでもいいけどFxをFFと言うこと自体はいいんだが そう言う奴に限ってろくなレスをしないのは何でなんだぜ
お前らGoogle Crome試してみ。 WEBページの表示速度が半端無い。 唯一の欠点としてはWEBページを作成する時にGoogle Cromeで閲覧すると 少々文法が間違ったとしても補正して正常に表示されてしまう事かなw それにしてもマジで凄いぞGoogle !!
エンジンはサファリと一緒だから
サファリ入れてるからイラネ
絶対位置指定(position:absolute;)をよく使うのですが
調べてみると「多用すると表示が遅くなる」と書いてありました。
http://soudan1.biglobe.ne.jp/qa4103346.html ブラウザによっても違いはあると思いますが
ソースをレンダリングする場合、margin や padding を考慮するより、
絶対位置指定がしてあった時の方が処理は少ないと思うのですが
なぜ、絶対位置指定だと表示が遅くなるのでしょうか。
(CSSのコード量が多くなるとかはあるでしょうがそれを考慮しても)
あと表示が遅くなる以外に絶対位置指定を使った場合、
ユーザー側に不便が発生することはなにかあるでしょうか。
>>370 サファリってそんなに速いの?
使った事ないから分かんね。
因みにLunascapeは、遅すぎる。
lunascapeとかプニル使ってる奴は自称ブラウザ通(笑) マジきめえwwwwwwwwwwwwwwwwwww
wwwとか多様している↑の方がよっぽど気持ち悪いよ。 秋葉のオタクの巣に帰れ
↑と、きめえブラウザ使ってる人が最後の抵抗をしてます(笑)
>>372 通常フローを基準にしてるんだから絶対位置指定はmarginやpaddingよりずっと遅くなるよ
absoluteはまだましだけどfixedがかなり処理重い
表示以外だとIEの絶対位置指定は入れ子なんかにしてるとCSSの仕様から外れた動きをするんで
他と全然違う表示になることが多い
まあこれはrelativeでも同じだから、IEはposotionのstatic以外全部弱いと思っとけ
position/floatに関しては6どころかIE7にまってさえまだまだバグは多い
>>377 ありがとうございます。
バグがあるんですか。
IE6、7とFirefoxで組んでてそんなに差はなかったけど
そういえばリスト組んだ時に少し大変でしたね。
>>378 今後はie6~7に含めFf3.0~3.1も差異がでてくるよ
IE7は確かfloatとマイナスマージンが組み合わさると最低最悪の動きを見せた記憶が・・・
もう余計なことは止めて簡単に作って 残りはJSで配置と大きさ調整するのがいいのかもしれない
>JSで 釣り乙
配置と大きさ変えるだけだからなくても普通に見えるようにはするよ 今時JS切ってる奴も少数派だしマイナーブラウザ対応とたいして変わらん
385 :
Name_Not_Found :2009/01/11(日) 18:22:31 ID:GnN4G6n0
バカ晒しあげ
386 :
Name_Not_Found :2009/01/11(日) 18:23:18 ID:GnN4G6n0
382 名前:Name_Not_Found[sage] 投稿日:2009/01/11(日) 18:03:26 ID:??? >JSで 釣り乙
388 :
Name_Not_Found :2009/01/11(日) 19:34:30 ID:NngWkbY6
float指定がわからないので教えてください。 <h1>SECTION TITLE<h1> <div style="..."><a href="#top">goto top<a/></div> というHTMLで、 SECTION TITLE goto top のような表示にしたいです。つまり、 ・「SECTION TITLE」と「goto top」が同じ行 ・「SECTION TITLE」は左寄せ ・「goto top」は右寄せ というふうにしたいです。 ここでdivタグにどのようなCSSを指定すればいいでしょうか。
コ ←こういう枠線を作りたい場合、下の2つならどちらが正しい書き方とかあるのでしょうか? どっちにしろやってる事は同じなので好みの問題ですかね? div.line { border:solid 1px #cccccc; border-left:0; } と div.line { border-style:solid; border-color:#cccccc; border-width:1px 1px 1px 0; }
>>388 色んなやり方があると思うけど、h1 要素への style 指定も必要。
>>392 >>389 ですが、やっぱり上の方が記述少ないしいいですよね!
一回1pxって指定した後、上書きで0にしてるのが二度手間的でだめかなと思って聞いてみました。
レスありがとうございました。
>>392 特定されて必死の反論wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
うわー
何処もかしこも煽り厨が沸いてる理由が知りたい
>>393 border-●●●:none;が好き
399 :
Name_Not_Found :2009/01/11(日) 23:23:57 ID:mC9CQfyF
border-style: dotted; って、ブラウザによっては表示がうまくいかなかったりしますか?
する
401 :
Name_Not_Found :2009/01/11(日) 23:41:05 ID:mC9CQfyF
>>400 まじですか、現在IE6、IE7、FireFox3で動作確認ができているのですが、
dottedが使えないブラウザには何がありますか。
IEとFirefoxとOperaでそれぞれdottedの形が違うし、 px指定のときのdottedとdashedの差がちゃんと出ないとかじゃなかった? スタイルシート border dotted 違い とかでググってみると 表示サンプルをあげてるページがでてくると思う
Firefox2とFirefox3のborder-style: dashedって開始点が違う? 上下左右にborderの"1px"つけたときのグラデーションっぽいのも気になる。 これFirefox2みたいに表示することできないの? <p style="width: 150px;border-bottom: #000 1px dashed;margin: 0 1em 1em;"> ハッピーマン○ー </p> <p style="width: 150px;border-left: #000 8px solid;border-bottom: #f00 1px solid;margin: 0 1em 1em;"> ハッピーマン○ー </p>
405 :
403 :2009/01/12(月) 11:34:37 ID:???
そうか。ありがとう。
<div style="xxx"> あいうえお <a href="index.html" style="yyy">かきくけこ</a> さしすせそ </div> このようにスタイルシートを利用しているのですが xxxは「font-size:15px;」、yyyは「font-size:12px;」にして書いても <div>〜</div>に含まれている部分に適用されてしまい、全て「font-size:15px;」になってます 「<a href="index.html">かきくけこ</a>」だけ除いて、適用するという事は不可能なのでしょうか?
yyyよりxxxの方が後に書かれてるとか、 .xxx a.yyy{font-size:12px;}ってちゃんと指定してないとかじゃないの?
順番も重要な要素だったんですね div関連は多いので下の方にまとめているから それが原因かもしれません、直してみます
1カラムレイアウトでヘッダー、メニューバー、コンテンツ、フッターと並ぶページを作ってます。 そのメニューバーに関する質問なんですが、背景にurl(nav.gif)repeat-xで背景指定している場合、 ブラウザの文字を大きくしたとき、ページの横幅を超えた分のリンク先は下に表示されるのですが 背景も下に表示したい場合、どうしたら良いでしょうか? 背景を単純に#OOOなどのように指定していれば表示されるんですが。
li一個ずつにばらばらに指定
おくればせながらありがとうございます。
>>391 いろんなやり方があるんですか。391さんのやり方を教えてほしいです。
>>392 float。。。わからないんですよね、本を読んでも。
もう一回出直してきます。
>>411 <h1 style="position: relative;">SECTION TITLE<a href="#top" style="position: absolute; right: 0px">goto top</a></h1>
ひでぇ hの中にgoto top入れるのかよw
h1の中には入れたくないな
>>411 普通に左右にfloatしようよ〜
<style type="text/css">
<!--
#lr{width:100%; float:left;}
.left {float:left;}
.right{float:right;}
-->
</style>
-----------------------------------
<div id="lr">
<div class="left"><h1>SECTION TITLE</h1></div>
<div class="right"><a href="#top">goto top</a/></div>
</div>
しかしそもそも
>>411 は
<h1>や<div id="xxx">が1html内では
1回ずつしか使えないことが分かっているんだろうか?
まだ<h2>と<a href="#top">が同じ行に並ぶならわかるが、
<h1>と並ぶデザインて考えにくいな
<h1>は最上位の見出しだから 複数回出てきてもいいんじゃない?
最上位の見出しだから一回限りという考え方の人が多いよ ただHTML4.01としての規定ではない、無論DTDによっては1回限定 Strictスレでやってくれ
h1の二通りの考え方 1サイト1ページ完結型→h1〜h6使用完結型 1サイト複数ページ型→各ページにh1〜h6使用 どれも間違いではない
そう言うことを平気で言うなよ。
423 :
Name_Not_Found :2009/01/14(水) 19:21:31 ID:KoP/Y2Mp
そういうなって、例の判決で相当滅入ってるんだからさあ。
すいません Div依存症なんですけど、どうしたら治りますか?
直す必要あるの?
liやdtにfloatつけたときのclearって必要? after効かない場合はulやdlの外でclearするの?
clearが必要かどうかは用途によって違う afterでやりたいってのは結構特殊な用途 自分が何をやりたいかという一言に尽きる
floatは元々小物用なんだよなあ・・・
質問です。 <a href="a"><div class="b"></div></a> は駄目なんですよね? divのかわりになにを使えばいいのでしょうか? よろしくお願いします。
いつまでたってもレイアウト用のプロパティでないな いったいどういうつもりなんだろうか
>>433 div a /a /div
span a /a /span
DW8で作業中で、現在下のような感じでヘッダ内にh1とその下にナビを 入れようとしてます。 ナビのli要素をインラインにすると普通にul全体もヘッダ内にあるのですが、 li要素をブロック、フロート左にするとul要素全体がヘッダの下に飛び出て しまいます。これをヘッダ内におさめる方法はないでしょうか? 【HTML】 <div id="header"> <h1>株式会社ロゴ</h1> <ul> <li><a href="#">TOP</a></li><li><a href="#">ななな</a></li><li><a href="#">あああ</a></li> </ul> </div> 【CSS】 #header { margin: 0px; padding: 0px; } #header h1 { margin: 10px 0px 0px 10px; padding: 0px; } #header ul { margin: 0px; padding: 0px; } #header li { padding: 0px; margin: 0px; display: block; float: left; }
>>438 よくわからないんだけどどういう風に表示したいのか画像か文字で出力後を眼で見えるように書いて
440 :
438 :2009/01/18(日) 18:50:38 ID:???
----------------------------------------------------- | titlelogo | |---------------- | btn1 | btn2 | btn3 | ----------------------------------------------------- こんな感じです。 右側の縦の線入れると崩れるんで書いてないだけです。 ボタンはテキスト表示なんでインラインでも良いのかもしれないですが 画像に変更する際に不便だと思いまして。
#header h1 { margin: 10px 0px 0px 10px; ここでヘッダのh1に右マージン入れてるからじゃなくて?
有難うございますここから先はググって自分でやってみます。
>>442 右マージン0にしてみたんですが変わりませんでした。
CSSムズカシ…
float 指定しているのにwidth指定してないからじゃないの? floatにはwidth必須。
>>444 それは2.0
2.1ではもうwidthは不必要
>>445 現実的には必須じゃね?
css2.1に対応してないブラウザのシェアが多すぎる。
447 :
Name_Not_Found :2009/01/18(日) 23:06:56 ID:et4jyHhz
どっちにしろ指定しないとデザインむちゃくちゃになるだろ
>>446 何を言ってるんだ
2.0基準なんてネスケ6だけで、IE6でさえ2.1の扱いだぞ
IEはバグなんだけどさwww
450 :
Name_Not_Found :2009/01/18(日) 23:23:19 ID:et4jyHhz
それはおまいがデザイン放棄してるからだよ
>>444 >>438 で書いたのが中途半端でスイマセン。ここにレスするにあたって
要素を少なくしてシンプルにしたつもりだったんですがその際にfloatも消して
しまっていただけで、一応、指定はしていたんですが無理でした。
最終的にはclearfixの方法で解決しました。
有難うございました。
453 :
438 :2009/01/19(月) 00:29:12 ID:???
452=438の私です。
>>438 みたいなヘッダぐらいなら、clearfix使わなくても
ulにemで高さ指定するとか、#headerにナビを加えた高さ指定するなりして
次の要素で普通にclearした方がいいんじゃね。
clearfixって見えないだけで、余計な要素が挿入されてることには変わりないんでしょ?
455 :
Name_Not_Found :2009/01/19(月) 00:36:57 ID:RI41bZ/M
一般的なclearfixはCSSだけで完結する
456 :
438 :2009/01/19(月) 00:45:44 ID:???
>>454 有難うございます、教えて頂いた方法も明日試してみます。
そのサイトに言えば
* { padding : 0; margin : 0; } こんなことやってる人いるけど? こんなんアリなの?
やってますが何か。
462 :
Name_Not_Found :2009/01/19(月) 18:37:15 ID:71kneiZo
何がだめだと思ったの?
466 :
Name_Not_Found :2009/01/19(月) 20:06:49 ID:RI41bZ/M
初心者はそれでいいよ ダメなのにぶつかったら違うの使えばいい
初心者でも上級者でもやる人はやるしやらない人はやらない
>>460 やらない理由は「reset.css」とか「初期化 css」でググって自分で理由をつけろ
擬似フレームでサイトを作ったんだけども 常にブラウザの真ん中に内容を持ってきたい場合はどうすればいいの?
1emは実質何pxですか?
472 :
Name_Not_Found :2009/01/20(火) 07:04:24 ID:VGdxgY0Q
フォントによる
というか設定による ブラウザで設定してるフォントの大きさだ
474 :
Name_Not_Found :2009/01/20(火) 14:33:08 ID:Qqhu3gr+
全体を中央寄せにしたいんですが、全体を囲んでいる要素に対して {text-align: center;} を使うと、IEでは中央寄せになるのですが、他のブラウザ(firefox,safariで確認)では中央寄せになりませんでした。 で、多くのCSS関連事項を載せているサイトを参考に、上記と一緒に、 {margin: 0 auto;}({margin-left: auto; margin-right: auto;}) も記述してみました。 ところが、firefoxではどちらをやっても、テキストしか中央寄せにしてくれません。 全体を囲むボーダーも、レイアウトも全て中央寄せにしたい場合はどの様に記述すれば良いでしょうか? 回答宜しくお願いします。
>>474 widthを指定してないのに中央になるはずないだろ
c{width:700;margin-left:auto;margin-right:auto;}
<div id="c">
<div id="h"></div><div id="b"></div><div id="f"></div>
</div>
訂正な c{width:700px;margin-left:auto;margin-right:auto;}
#cな
479 :
>>474 :2009/01/20(火) 14:45:10 ID:Qqhu3gr+
すいません。事故解決しました。 body要素でなく、*要素に適用すると、中央寄せになりました。 ですが、どうしてbody→*にしたことで、解決したのでしょうか? *も全体を囲む要素ですよね? body(もしくは、全体を囲む要素α)と同じではないのでしょうか?
>>476 すいません。書いてなかっただけで、widthは指定していました。
記述漏れです。すいません。
h3だけtext-indentをかけようとしたのですが p,ulにまで適用してしまいます どういう理由なんでしょうか? よろしくお願いします <h3 id="topick">topick</h3> <p> <ul> <li class="item_Name">黄金</li> </ul> </p> #topick{text-indent:-999px;}
>>479-480 お前は body{width: 1000px;} とでもしているのか?
>>481 そのHTMLとCSSだけでも適用されるのか?
てか、<p>の中に<ul>を入れるなよ
483 :
>>474 :2009/01/20(火) 15:46:06 ID:???
body{width: 100%; margin-top: 10px;} としてます。 これはやめたほうがいい使い方なんでしょうか?
484 :
481 :2009/01/20(火) 15:54:06 ID:???
>482 これだけでそうなるです pいらないね、今消してきた ついでにものごっそ書き直したら直った ありがと
485 :
Name_Not_Found :2009/01/20(火) 16:12:06 ID:r+faKba/
質問があります。 divは横幅100%で表示させて、pは横幅600pxで且つテキストは 左寄せにしたいのですが、下記のようにやると左詰めで表示されてしまいます・・・。 <div id="a"> <p>ほげほげほげほげ</p> </div> div#a{ width:100%; margin:0 auto; background-color:#006600; } div#a p{ width:600px; color:#fff; } 詳しい人教えてください
486 :
485 :2009/01/20(火) 16:18:11 ID:r+faKba/
すみません言葉足らずでした 誤 divは横幅100%で表示させて、pは横幅600pxで且つテキストは 左寄せにしたいのですが、下記のようにやると左詰めで表示されてしまいます・・・。 正 divは横幅100%で表示させて、pは横幅600pxの中央表示でテキストは pの中で左寄せにしたいのですが、下記のようにやると左詰めで表示されてしまいます・・・。
div#aじゃなく pにmargin:0 auto;
pにmarginレフトとライフにauto
>>483 そりゃ、width:100%の中央寄せには何の意味もないよ
bodyにmarginを指定したら、font-sizeみたいに中の要素にも継承されると思ってるとか?
*は全ての要素に適用させるもんだから、bodyと同じじゃないよ
490 :
485 :2009/01/20(火) 16:40:47 ID:???
>>487 >>488 ありがとうございました!
なるほどセンター表示したい要素に指定するんですね
text-alignと同じかと思ってました
>>489 あ、そうなんですか。レスありがとうございます。
参考にしてたサイトでbodyにwidth:100%;を指定していたもので。
勉強になりました。
bodyにwidth100%を指定する意味のあるときもある ただ意味もわからないのにやるな、余計わからなくなるだけだ
493 :
Name_Not_Found :2009/01/21(水) 09:23:03 ID:e7hDjiLC
CSSの本を買う前にXHTMLの本も買った方がいいですか? HTMLの本はあるんですが、XHTMLは初めて知ったんでアドバイスお願いします
XHTMLとHTMLの差はごく僅かだから HTMLをマスターしてるならネットで少し調べる程度で十分だと思う あとHTMLでもCSSは使えるし無理にXHTMLにすることもないかと
そうなんですか。 90年の本なので心配でしたが、ちょっと調べる程度の拡張ならCSSに突入しようと思います。 ありがとうです。
>拡張 >突入 なにげに言葉選びが危ない。
HTML 1.0の仕様が出たのが93年なんだがw 90年代の本ってことだよね?
質問です。 #CSS li.a { list-style-position: inside; border: 1px solid #000; } li.b { list-style-position: inside; border: 1px solid #000; width:200px; } li.c { list-style-position: inside; border: 1px solid #000; margin-right:600px; } #HTML <ul> <li class="a">aaa</li> <li class="b">bbb</li> <li class="c">ccc</li> </ul> IE7で li.b だけマーカーがボーダーの外部になってしまいます。 Fx3では、すべてボーダー内部に収まっています。 なぜ???
a をクラスに使ったら、リンクになっちゃうから 例として文字が不適切 だよね
ならないよ 要素名とクラス名の名前空間は別
すまんが質問 ロールオーバーでマウス乗せたら画像が変わるようにしたいんだけど 画像はリンクするためのものではなく 単にマウス乗せたら画像が変わるようにしたいだけ (<a href="hoge"><img src="honya"></a>ではない) この場合、a:hoverは使わないよね? CSSじゃなくてJSを使うべき?
質問です。 アウトラインで左右にボーダーを表示して、中にボックスを左右配置。 で、左右を-1pxずつずらして重なった部分だけアウトラインのボーダーを消したいです。 (上手く言えないので下でソース書いておきます) これをブラウザで開くと、 firefox opera safariの3つは意図どおりに表示されるのですが、IEでは無理でした。 これをIEでも意図通りに表示させるにはどうすればいいでしょうか? <html lang="ja"> <head> <style type="text/css"> <!-- html body{ margin:0; padding:0; width:100%; height:100%; text-align:center; /*IE用*/ } #outline{ width:612px; height:100%; margin:0 auto; border:solid 1px; border-width:0 1px; color:#000; } #header{height:100px;}
#left , #right{ background-color:#fff; height:300px; border:solid 1px; } #left{ width:200px; float:left; border-left-color:#fff; margin-left:-1px; } #right{ width:400px; float:right; border-right-color:#fff; margin-right:-1px; } --> </style> <title>テスト</title> </head> <body> <div id="outline"> <div id="header"> </div> <div id="left"> </div> <div id="right"> </div> </div> </body> </html>
>>502 #left, #right { position: relative; }
>>504 おおおおお!!
こんな簡単に出来たんですね!本当にありがとうございます!助かりました。
506 :
Name_Not_Found :2009/01/22(木) 23:01:02 ID:JPNUQrnL
すごく初歩的な事なのですが、ずっと疑問に思っていることがあります。 記述の仕方なのですが、 例1 #item{display: none !important;} 例2 #item{ display: none !important; } 例3 #item{ □□□display: none !important; □} □の部分は空白が入ってる。タブ入れてる感じではなくエディタで確認すると半角スペースが 連続して入ってます。 1,2,3のどの記述が最も正しいのでしょうか?
507 :
Name_Not_Found :2009/01/22(木) 23:02:48 ID:EFG0744N
全部正しい どんなにスペース入れてもかまわない
508 :
Name_Not_Found :2009/01/22(木) 23:50:53 ID:uOafP8HA
質問です。 メルマガのバックナンバーをWebサイトで公開する予定なんですが、 メーラーの一般的な表示状態(textメール)を再現するためのCSS設定をわかる方いますか? よろしくお願いします。
>>508 メーラーによって違う上テキストなんだからCSS無関係
510 :
Name_Not_Found :2009/01/23(金) 00:46:20 ID:03uD02pE
>>509 そういう話ではないです。
全ての環境で完璧に再現させるという話ではなく、
例えば広く使われているwindows、outlookなんかのデフォルト設定を想定して、
表示がそれほど大きく崩れないCSS設定があれば聞きたかったのです。
「テキスト」の意味解って無いだろ ?
514 :
Name_Not_Found :2009/01/23(金) 05:16:31 ID:lvh+Uqwn
一緒にする必要性がわからん
515 :
Name_Not_Found :2009/01/23(金) 21:12:43 ID:wX7BQpTe
すっごく初歩的な事訊くけど、IE7で幅を%指定しても正しく表示されないことってあります?狐だとちゃんとなるのに… ■css .abc{width:100%;heignt:90px;background-color:#000000;} ■html <div class="abc">ほにゃらら</div> というように記述したんだが…どうやってもボックスが90%くらいにしか表示されない。どっかに記述ミスがある? 実は%指定使ったの初めてで…
親ブロックのマージンパディングでも消してないんじゃないの
CSS+XHTMLで組んでるページの場合、文章(テキスト)の部分は、 XHTML標準だと必ず何か前後につけなきゃいけないんですよね? <ol><ul><p>を使わない場合は、何をつければいいんでしょうか? <li>だけつけるのですか?
>>517 日本語でおK・・・
ちょっと違うが、段落だとp、順序なしリストだとul、順序ありリストだとol、
段落引用だとblockquote、というように文意で付けてくれ
liだけなんてのはもっともっとどこまでも果てしなく存在しない
body直下に インライン要素はダメ
520 :
517 :2009/01/23(金) 23:01:48 ID:???
たとえば<body>や、入れ子構造のかなり上位の<div>のCSSの中で
フォントの種類やサイズをしてしまっている場合で、特にその文章が
段落でも「・」「1.〜]でも引用でもない普通の文章の場合です。
ソースだけ見るとそこだけ何もついてないので、これでいいのかな、と思ったものですから。
文章の直前に<div>がついてるので、いいんですかね。
どうも<div>のイメージがレイアウト専用のタグのイメージがあるもので、
これから文章書くよ!っていう、文章専用のタグ宣言があるのかなと思いまして。
>>518 さんの区別で考えて、単純に振り分ければいいのかもしれませんね。
ありがとうございましたm(_ _)m
>>517 そんな時のために<div>
ていうか大抵は<p>でいいんでね?
>>520 お前は・・・文章を構造化する以前に
まともな意味の通る日本語を書けるようにならないと駄目みたいだな・・・
普通の文章ならpでいいよ
>>521 全然そんなときのためにdivじゃねえええええええええw
つーかここCSSスレじゃん・・・ 初心者スレと間違えて答えちまった
別に日本語は変じゃないと思うけどな。
わかりやすー(自演が
別に自演はしてないけどね。 いちいち宣言しろってか。
ちょ、ま、おま自演の意味すらわかってないってwww まあなんだ、強く生` そして2ちゃんは半年ROMれ
>>527 いや、そもそも
HTML / XHTML の問題だから
『スレ違い』
おまえもな。もう変な突っ込みやめろよ。
>>529 ごめん。ここも関連してるかなと思ったので。これから気をつける。
むしろ3年はROMらないと無理だろ、こういう手合いは
しつこいよ。
>>534 おまえがだ
答えてもらったのにぶーたれて答えてくれたスレ住民を貶してスレに居座り続けて
いいかげん消えろ
おまえを疎ましいと思ってレスしてるのが一人だと思うな
>>531 の素直っぷりで許そう
あとは水に流して
どこにでもいるんだよな。 こういう勘違いさん。 これを雇ってる会社は大変だな。
何と言う典型的な「女史」 構うだけ無駄、馬鹿は死んでも直らない
これで社会人かよ、日本語も書けない学生だろwww
雑談は別スレでやってくれ
はい!もう終わり!スレ汚すな!
>>537 おまえも勘違いした知識しかもってないのに?
職場では怒鳴られて、2ちゃんで偉そうに振る舞うんですか?(笑)
547 :
Name_Not_Found :2009/01/25(日) 16:57:06 ID:y+8nJM/h
【CSS】 .imgs{ width: 180px; padding-top: 2px; padding-bottom: 2px; margin: 0 auto 0em; border-style: solid; border-color: #99ccff; } 【html】 <div class="imgs"> <img src="***" /> </div> このように書いているのですが、画像にマウスを乗せたときにボーダーの色を変えたいと思っています。 そこで、CSSに .imgs a:hover { border-color: #000000; } を追加してみたのですが、うまく色が変わりません。 どうすればいいのでしょうか。
.imgs a:hover { border-color: #000000; } を .imgs:hover { border-color: #000000; } に変える
549 :
Name_Not_Found :2009/01/25(日) 17:08:07 ID:y+8nJM/h
>>548 出来ました。高速な回答ありがとうございました!
550 :
Name_Not_Found :2009/01/25(日) 18:32:06 ID:y+8nJM/h
>>548 IE6では動作しなかったのですが、これは仕様ですか?
>>550 IE6はa以外のhoverに対応してない
IE7からはOK
552 :
Name_Not_Found :2009/01/25(日) 19:26:29 ID:y+8nJM/h
553 :
Name_Not_Found :2009/01/25(日) 21:20:10 ID:MmOJfCiF
6で動かないものに存在意義はない
IE6のシェアはFx以下だし CSSなんて切っても意味が通じるもんなんだからhover程度動かなくても何の問題もない
555 :
Name_Not_Found :2009/01/25(日) 21:31:50 ID:MmOJfCiF
ありえないよ
a以外のhoverが機能しなくても別に困らんだろ・・・jk
558 :
Name_Not_Found :2009/01/25(日) 22:03:10 ID:MmOJfCiF
お前はあほか
おまえ煽るくせにie6でhover使うためのライブラリも知らないんだな
560 :
Name_Not_Found :2009/01/25(日) 22:09:02 ID:y+8nJM/h
>>554 の言うとおりだと思う
少なくとも私のサイトの場合はそうです
561 :
Name_Not_Found :2009/01/25(日) 22:11:26 ID:MmOJfCiF
JS使ったら出来るに決まってんだろwww hover自体元々JSだってのwww
563 :
Name_Not_Found :2009/01/26(月) 01:12:23 ID:KF1G9Iro
>>562 私が
>>554 に同意したのは2行目の部分ね。
シェアの順番なんてあまり関係ない。
利用者が少ないブラウザならレイアウトが崩れてもいいの?
違うでしょ。
564 :
Name_Not_Found :2009/01/26(月) 02:08:32 ID:XtvmFF5r
おれが言ってるのはそんな中途半端なもん作るなってこと 作るなら全部同じように見えるように作れと そもそも存在する限りそれは必要だからつけたのであって必要でないものはつけるべきじゃない
特定の環境で動かないもの作るなとか
押しつけられる筋合いありませんがな
質問主の使い方では強調させたいだけだろうから、あればいい程度
シェアとかブラウザとか語りたいなら
>>542 でやればいい
566 :
Name_Not_Found :2009/01/26(月) 02:40:51 ID:XtvmFF5r
別に押し付けてないよ おれはおれの言いたいこと言ってるだけ 別にお前らがどんなの作ろうが知ったこっちゃないです
567 :
562 :2009/01/26(月) 07:34:52 ID:???
>>563 君は
>>554 の2行目「hover程度動かなくても何の問題もない」に同意するのか?
だったら最初の質問(
>>547 )自体する必要のない物になってしまうぞ。
あと、なんで突然レイアウトが崩れる話が出てくるのか訳わからん。
>>562 日本でもIE7>Fx>IE6ってのもある
ああいうのは調査機関によって違うからな
自分のサイトなら別にhoverやろうがやらまいが勝手じゃねえの 仕事、まして他人のサイトを作らせてもらう時にそう作らないといけないときは別だけどね ここは日曜大工と仕事人が入り乱れてるから意見もまとまらないよ
いや、プロはこんなとこ来ないだろw 来てたとしたらこの低ラベルはw
>>570 定時10:00-22:00の零細企業ですが文句ありますか
li要素の中にimgを入れた場合、テキストと同じラインに並べるようにするにはどう書けばいいのでしょうか? img画像は矢印→です。
すいません書き忘れました。 vertical-align:middle;を試したのですが完全に真ん中にはいかず 少し下よりになっていました。
vertical-alignを%かpxでプラスの数値を指定。 合わせて並べる文字もpxで指定。 ただし、ご存知のようにブラウザによっては文字のpx指定は 見る人の設定で大きさ変わります。 ちなみに−の数値で指定すると,もっと下にずれます。
577 :
Name_Not_Found :2009/01/27(火) 13:10:35 ID:7zCUEeC/
css3でazimuthは対応してますか?
2.0でも存在してるが
579 :
577 :2009/01/27(火) 14:06:52 ID:???
css1〜2.1では対応してるのは確認してますが3はどうなんでしょうか?
そこまで自分で調べられる知識があるなら 3も自分で調べりゃいいだろw
CSSって基本的に下位互換は保たれてるんじゃねーの?
つーかまだモジュールのWDも出てない部分じゃね 答えられる人間はいないだろう
583 :
Name_Not_Found :2009/01/27(火) 14:22:20 ID:E8x6s37i
CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する
下位で一度廃止になったプロパティが上位で復活したプロパティもあるよ
>>583 バージョンも存在するし、古くから存在してるプロパティだって未実装のものなんかたくさんある
586 :
Name_Not_Found :2009/01/27(火) 14:58:30 ID:E8x6s37i
君はもうちょっと文章をよく読みなさい
どう見てもE8x6s37iが馬鹿なだけだな
588 :
Name_Not_Found :2009/01/27(火) 14:59:48 ID:E8x6s37i
おkお前が馬鹿なのは分かった
意味なしage厨うぜえぇぇぇ
ID:E8x6s37i css1 css2 css2.1 css3 これだけあるからな 勉強になったな^^
591 :
Name_Not_Found :2009/01/27(火) 15:03:07 ID:E8x6s37i
日本語の不自由な方なんですねわかります
583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 586 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:58:30 ID:E8x6s37i 君はもうちょっと文章をよく読みなさい 588 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:59:48 ID:E8x6s37i おkお前が馬鹿なのは分かった 591 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 15:03:07 ID:E8x6s37i 日本語の不自由な方なんですねわかります
583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する 583 名前:Name_Not_Found[] 投稿日:2009/01/27(火) 14:22:20 ID:E8x6s37i CSSなんてバージョン表記ないんだからブラウザが対応する限り対応する
594 :
Name_Not_Found :2009/01/27(火) 15:10:10 ID:E8x6s37i
m9pgrwww
おまえ質問スレでliの中にp入れられないとかいってたやつだろwwwwwwwww 今度はバージョンはないとかwwwwwwwwwwwwwwwwwwwwwwww きめえwwwwwwwww
596 :
Name_Not_Found :2009/01/27(火) 18:46:26 ID:S4oll2+Q
テキストエリアの文の固定ってできる?
597 :
Name_Not_Found :2009/01/27(火) 19:30:07 ID:7l+5G42P
サァ シィノ マターリノ タメニ
色ンナ スレニ 貼ルンダヨ♪
\ /
シカタナイカラ シィノ オシリサンノ
〜γ⌒ヽ∧∧ ニホイヲ カガセテ アゲルワ♪
.( * ) ,i゚ー゚*) アリガタク オモイナサイ♪
U U"ヽ)ヽ)
今ならもれなく、しぃのおしりの臭いがかげる掲示板
しぃのマターリ掲示板
http://jbbs.livedoor.jp/computer/22654/
レイアウト枠を中央に配置するにはどうすればいいんですか? もしくはページの横幅を指定して、常に全体が中央に表示されるようにしたいんです。よくあるやつですが、どうやるのかがわかりません
その質問がこのスレで何度出たことか ctrl+fで少しは調べろよksg
ホームページビルダーでそれできますか?
ホーwwwムwwペーwwwジwwwwwビwwwルwwダーwwwwwwwwwwwww
>>601 ホームページビルダーは単なるツール。
出来るか出来ないかは作成者の能力。
ホームページビルダーでできますよ。
どこを押せばいいんですか? もう5日ぐらいやってるんですが、レイアウト枠の中の文字だけまん中にきてレイアウト枠がは左なんです
606 :
Name_Not_Found :2009/01/28(水) 09:05:54 ID:GsyhHmz4
諦めろ
これができるソフトを教えてください。 XHTMLもできるやつ教えてください。ホームページビルダーHTMLなんです。
>>605 それはソフトの使い方であってCSS云々の問題なのか?使ったこと無いからわからないけど。
誘導ありがとう!
今、CSSで悩んでいます。 それは、ヘッダー内に画像を印刷時のみ入れたいのですが、どのように記述して良いのかがわかりません。どなたかお力をお貸しください。
<link rel="stylesheet" href="xxxxxx.css" type="text/css" media="print"> プリントだけのcssつくんの。
あ、はい。それは既に作ってあります。 その「xxxxxx.css」のCSSにどのように記述していいのかが分かりません・・・・
614 :
Name_Not_Found :2009/01/28(水) 15:36:02 ID:GsyhHmz4
ググレカス
ポイント時に、ゆっくりと背景色が変化するメニューを作りたいです。 横並びでブログ用(メニュー数や文字数がころころ変わる可能性アリ)なので、 画像で作ると都度手入れが必要になると考えられるため、 できればcssでと思っていますが、方法はあるでしょうか?
>>615 基本的にcssで「徐々に〜する」事は出来ないと思う。jsでおやり。
>>614 さんざんググってるのですが・・・orz
>>616 そうします、ありがとう。
「おやり。」がセクシー。
>>617 もっと真剣に探せよコラ
ていう基礎からCSS覚えないで都合のいいところだけつまみ食いしても
上手くいかない場面がこれからも出てくるよ。
基本は以下のcss。あとは自分なりの設定をいろいろ付けていくの。
<link rel="stylesheet" href="for-print.css" type="text/css" media="print">
for-print.css
#header {background:url(xxx.jpg)}
<link rel="stylesheet" href="for-screen.css" type="text/css" media="screen">
for-screen.css
#header {background:#fff}
>>619 は分かりづらかったからこっちね。
要するに2つCSSを用意するのね。
<head>
<link rel="stylesheet" href="for-print.css" type="text/css" media="print">
<link rel="stylesheet" href="for-screen.css" type="text/css" media="screen">
</head>
for-print.cssには以下を記述
#header {background:url(xxx.jpg)}
for-screen.css には以下を記述
#header {background:#fff}
>>620 の方法でもいいとうけど
XHTMLの使い方としては↓(display:none)の方が良くない?
<head>
<link rel="stylesheet" href="for-print.css" type="text/css" media="print">
<link rel="stylesheet" href="for-screen.css" type="text/css" media="screen">
<style>
/*for-print.cssには以下を記述*/
#print_only {display:none;}
</style>
</head>
<body>
<!--画像-->
<img src="xxx.jpg" id="print_only" alt="印刷時に表示" />
</body>
</html>
何やってんだ俺余計なことして自爆したOTL
>>621 のはこう修正してください
<head>
<link rel="stylesheet" href="for-print.css" type="text/css" media="print">
<link rel="stylesheet" href="for-screen.css" type="text/css" media="screen">
</head>
<body>
<!--画像-->
<img src="xxx.jpg" id="print_only" alt="印刷時に表示" />
</body>
</html>
cssぶぶん
/*for-print.cssには以下を記述*/
#print_only {display:none;}
質問を理解してから答えようよ、 な ?
624 :
622 :2009/01/28(水) 18:50:45 ID:???
>>623 すいません、理解してないかも。
ヘッダー内に画像を入れるって質問だと思うんですが
>>620 さんは背景のCSSでやろうとしてらしたので
それじゃなくてimgでやっちゃえばいいんじゃないかと思ったんですが
>>622 俺は初心者だがそれだと印刷時に画像が表示されないと思う
>>615 先読みが必要になるかもしれんが
一応GIFアニメをhoverの背景にすると似たような効果が
627 :
622 :2009/01/28(水) 21:30:28 ID:???
>>625 ああ、そういうことかw
すいません。
/*for-screen.cssには以下を記述*/
#print_only {display:none;}
ですか
それだと「印刷時以外に消す」だろ・・・
display:none レイアウト崩れるよ?
というより画像をhtmlに入れてることが元々レイアウトを崩してる無駄
>>629 そんな時は
visibility:hidden;
でいい・・・のか?
>>628 問題なくね?印刷時に表示ってことは
印刷時じゃないときに表示しないってことだろ。
>>629 印刷時にその部分を空白にしておくのかどうかは
質問では書いてないけど空白で残したいならdisplay:none;は
使わない方がいいか
>XHTMLの使い方としては↓(display:none)の方が良くない?
<ul> <li>あいうえお</li> <li>かきくけこがぎぐげご</li> <li>さしすせそ</li> </ul> 「かきくけこがぎぐげご」の文章が長くなって「がぎぐげご」が2行目になった場合、テキストの頭を揃えたいのですが cssでtext-indent:1em;を設定すると「かきくけこがぎぐげご」自体が1em下がってしまいます。 「か」と「が」が同じラインになるように設定するにはcssにどう書けばいいのでしょうか?
ならばtext-indentを設定しなければ良いんでないの?
>>632 構造が違うだろバーカ
HTMLの構造を変えさせてまでやるんだったらCSSの必要はない
>>634 list-style-position:outside
でもデフォルトがそのはずだが
637 :
Name_Not_Found :2009/01/29(木) 07:26:10 ID:xHkf95uN
あんまりごちゃごちゃとプロパティ使うべきじゃない レイアウトはパディングなりマージンで統一すべき
639 :
Name_Not_Found :2009/01/29(木) 07:58:44 ID:xHkf95uN
どこがやねんw
641 :
Name_Not_Found :2009/01/29(木) 08:39:35 ID:xHkf95uN
しね
>>635-636 styleで丸や数字を設定すると2行目の文字が丸や数字の下にきてしまうので1文字分下げたいです。
>>644 デフォルトやlist-style-position:outsideならそうはならない
なるんならお前の設定が間違えてるだけ
>>645 すいません、よく見たら記述が間違っていたようです。ありがとうございました。
647 :
Name_Not_Found :2009/01/29(木) 19:51:40 ID:xS4FMMhF
すいません“超”初心者ですのでスレ違いかもしれませんが これからCSSを勉強しようと思ってます。 例えばテーブルで <table width="800" border="1" cellspacing="1" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> は、CSSでどう表現するのでしょうか? またCSSを別ファイルにしてサーバーにUPするだけで、上のHTML(table)は必要なくなるのでしょうか? 知人のサイトのHTMLをコピペでDWに貼り付けると、タグが全然なかったものですので どういう技なの?と・・これやりたい!と思った次第です。 宜しくお願いいたします。
648 :
Name_Not_Found :2009/01/29(木) 20:12:53 ID:/kaH+JMG
CSSでテーブルは作れない CSSとhtmlは全く別物
649 :
Name_Not_Found :2009/01/29(木) 20:21:13 ID:xS4FMMhF
>>648 そうなんですか。。。ありがとうございます。
私はHPを作る際には主にテーブルを使っていましたので
これがスッキリしたら良いと思ってました。
前述の、知人のサイト等はソースをコピーしてDWに貼ってみると一切タグが
反映されず、これがCSSで別ファイルUPなのかと感心していました。
みなさんテーブルは使わないですか?
652 :
Name_Not_Found :2009/01/29(木) 20:46:46 ID:KK+B+g7I
>>651 ありがとうございます。
レイアウトで使ってました。
教えていただいたサイトで1から勉強します。
使う使わないの話ではない tableにするべきところはtableにする
ギャフン!!
年齢がバレるな
てか、650がガチョーンじゃね?
css厨はdivをfloatしまくってカレンダー作るんですか?w 壮大なスケールのソースになりそうですね(笑)
それはCSS厨じゃなくてdiv厨だ
>>658 えるしってるか カレンダーは 七曜表っていう表なんだよ
table使ったってレイアウト目的でも何でもないわ
>七曜表っていう表 へぇ〜へぇ〜へぇ〜へぇ〜
662 :
Name_Not_Found :2009/01/30(金) 22:53:52 ID:Yk9Rthz9
width を設定すると、幅に収まらない文字は自動で改行されますが、 幅に収まらない部分を、見えなくすることってできますか?
まず自分で探せ! オバーフロー:ヒドゥンで探せ!
664 :
662 :2009/01/30(金) 23:07:08 ID:???
上手くいきました。どうもありがとうございます。
>>663 ヒドゥンって読むのか・・・
ハイディーンって読んでたよ
ヒデンと読んでるが
秘伝桁あふれの術!
英語っぽく書くとへデンとかヒデンだよな ハイディーンも捨てがたい(゚∀゚)b
俺はヒデン 正確にはヒデュンなのかな? 解かんないやw
alignってアラインって読むんだぜ。知ってたか? 英語全く出来ないからずっとアリグンって読んでた。 gはどこに消えたんだよgは・・・納得いかん
俺中卒だけどその位は読めるぜ(;・ω・) お前頭大丈夫かwww ←悪気はないw
lightととかね
gとhどこ逝っちゃたのって思うよね 俺
>>671
・・・right。その通り。よく気付いたね。
PC用と携帯用と2つのcssを用意して1つのhtmlで両対応するサイトを運営しています。 (振り分けの方法は既に知っています。) 基本的に内容は同一なのですが、 外部リンクだけはPC用と携帯用で別々のものを表示したいのです。 そこでcssを用いて、携帯で閲覧した場合はPCの地図リンクを隠して、 PCで閲覧した場合は携帯の地図リンクを隠すという方法を取ろうと思い その方法としてfontsizeを0にするとか色々な方法が浮かんだのですが、 普遍的な方法とはどのようなものなのでしょうか?
675 :
Name_Not_Found :2009/01/31(土) 06:35:12 ID:gvgdBdNA
display
676 :
674 :2009/01/31(土) 12:38:51 ID:???
>>675 おお、まさに理想的な要素ですね。
ありがとうございます。
677 :
Name_Not_Found :2009/01/31(土) 20:30:54 ID:NlDYPLAz
「これより下の背景色を変える」ことは出来ますか?
これより下の言語は日本語でおK
679 :
Name_Not_Found :2009/01/31(土) 21:03:55 ID:NlDYPLAz
すいません body { background-color: #ffffff; } だと、サイト全体の背景色が白になりますが、 上半分は白、下半分は黒、のような指定がしたいです。 ┌────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ │■■■■■■■■■■■■│ └────────────┘ 分かりにくいかもしれませんが、こんな感じです。
そこから下の要素の背景を黒にすればいいだけ
縦長の黒画像用意して background-color: white; background-image: url("black.png"); background-position: left center; background-attachment: fixed; これでできるようなできないような
682 :
Name_Not_Found :2009/01/31(土) 21:52:59 ID:NlDYPLAz
>>680 サイトの縦幅が短いので、大きなディスプレイで見ると下が白くなります。
┌────────────┐
│ │
│ │
│ │
│ │
│■■■■■■■■■■■■│
│■■■■■■■■■■■■│
│■■■■■■■■■■■■│
│■■■■■■■■■■■■│
│■■■■■■■■■■■■│
│ │
│ │
└────────────┘
このような感じに
>>681 ありがとうございます、やってみます。
683 :
Name_Not_Found :2009/01/31(土) 22:11:13 ID:NlDYPLAz
>>681 これは背景が固定されてしまうんですね。
希望のと少し違っていました。
ありがとうございました。
>>679 ここはテトリススレじゃねえ!!!!!!!!!!!!!
685 :
Name_Not_Found :2009/01/31(土) 22:21:07 ID:NlDYPLAz
すいません、あれはテトリスのつもりではなくて、 レイアウトを視覚的に表そうとしただけです。
686 :
Name_Not_Found :2009/01/31(土) 22:26:10 ID:D1XX/oMy
逆に背景全部黒にして上のほうの要素だけ背景白くすればいいんじゃね?
>>685 #u,#s{margin:0 auto;padding:0 auto;}
#u {background:#ffffff}
#s {background:#000000}
<body>
<div id="u">test</div>
<div id="s">test</div>
</body>
#u,#s{margin:0 auto;padding:0 auto;width:100%} #u {background:#ffffff} #s {background:#000000} /* ここから下は消しておk */ #u,#s{height:300px} /* ここまで */ <body> <div id="u">test</div> <div id="s">test</div> </body>
適当な高さの白画像用意して background-color: black; background-image: url("white.png"); background-position: left top; background-repeat: repeat-x;
ie6以前のブラウザはsorryページに誘導すればおk ie6以前のブラウザはcssを読み込ませなければおk
692 :
690 :2009/01/31(土) 23:42:33 ID:???
IE6以前の人も多いので、CSSを読み込ませて見せたいのですが、 少し修正する程度では、この崩れは直らないのでしょうか。
ie6以前のブラウザとそれ以降のブラウザとでcssを振り分ければおk
ちなみにieには振り分ける書き方があるからググって調べればおk ヒントつIF
695 :
690 :2009/01/31(土) 23:55:19 ID:???
説明ありがとうございます。 崩れが起こらないために、HTMLやCSSを修正したいのですが、 どこをどうするべきか検討がつきません。 詳しい方に、それも教えていただきたいです。
エスパーいとうさ〜〜〜ん
>>690 のサイトは君のかね?
まずアフィをはずせ、質問する前の礼儀だ
698 :
Name_Not_Found :2009/02/01(日) 00:02:18 ID:hVbwUP9e
>>690 いくつかあるが、箇条書き部分の
<li><a href="/skin/kansou/">乾燥肌</a></li>
<li><a href="/skin/oily/">脂性肌(オイリー肌)・混合肌</a></li>
のように改行して書いてあるコードを
<li><a href="/skin/kansou/">乾燥肌</a></li><li><a href="/skin/oily/">脂性肌(オイリー肌)・混合肌</a></li>〜
のように1行にしてみる(見た目用の改行を入れない)
まずこれを試す
701 :
690 :2009/02/01(日) 00:10:03 ID:???
アフィリエイトで不快な思いをさせてしまい、失礼しました。 トップページのアフィリエイトは外してきました。 ご意見ありがとうございます。 まず、700さんの方法を試してみます。
702 :
690 :2009/02/01(日) 00:20:58 ID:???
>>700 ご指摘いただいたとおりに修正すると、
無駄に空いていた行間がすっきりしました。
ありがとうございます。
しかし、
●「髪ヘアケア」と「髪ヘアケア(小ネタ)」の上下のズレ
●その周辺を横切るライン
これらは修正されないままです。
いくつか。とありましたが、まだ間違っている点があるのでしょうか?
705 :
690 :2009/02/01(日) 00:58:47 ID:???
いろいろなご指摘、ありがとうございました。 私には、まだまだ分からないことだらけですが、 勉強しながら修正していきます。
706 :
Name_Not_Found :2009/02/01(日) 07:36:21 ID:3BUK8so8
imgのsrcを外部ホストの画像にすると、 widthとheight指定しても大きさを変えられないんですが、 外部ホストの画像の大きさを変えることはできないんですか?
707 :
706 :2009/02/01(日) 09:44:18 ID:???
すいません。かんちがってました。 余裕で大きさ変えられますね。
>>706 外部ホストの画像を貼る=直リンでいいのか?
709 :
706 :2009/02/01(日) 09:58:43 ID:???
直リンです。具体的にはリンクのバナーですね。
710 :
706 :2009/02/01(日) 10:02:14 ID:???
直リン?リンク先は画像じゃなくて、サイトですけど。 <img src="外部ホストのバナー画像" /> これをスタイルで大きさ変えられないと、勘違いしてただけです。
714 :
Name_Not_Found :2009/02/01(日) 23:05:18 ID:6IFdN6M9
すいません、どなたかわかる方いたらお願いします。 テキストボックスの中にあらかじめ表示させておく文章を リンクさせてるCSS側から指定することってできますか? 通常だったら↓のように記述すれば表示できますが <textarea rows="5" cols="100"> 感想や一言はこちらへお気軽にどうぞ。(ここの部分) </textarea> レンタルのメールフォームを使用しているため、リンク先のHTMLをいじることが出来ず・・・。 手段としてなにかあったら教えてください。
backgroundに、その文字の画像を作って指定するのは?
>>715 714です。
画像・・・!
それは思いつかなかったです。
やってみたいと思います!ありがとうございます!!
717 :
Name_Not_Found :2009/02/02(月) 02:48:21 ID:MpbH00Qr
<body style="text-align: center;"> <div>あいうえお</div> <table> <tr><th>ほげ</th><th>あげ</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> としたときに、 テーブルがIEならセンタリングされるのに、 Firefoxだとセンタリングされません。 どうしたらFirefoxでもセンタリングできますか?
マージンをオートにすればいいと思うよ^^
719 :
717 :2009/02/02(月) 03:33:18 ID:MpbH00Qr
>>717 思うようになりました。
ありがとうございます。
text-align:center;は文字のセンタリングなのでtableはセンタリングされない。 ふつうは左右のmarginにauto指定
疑似フレームって何?object要素の事?
723 :
Name_Not_Found :2009/02/02(月) 15:38:47 ID:OHB8d9XP
725 :
Name_Not_Found :2009/02/02(月) 17:54:24 ID:vUOxeOXO
<table>タグにmarginを指定できますか?
727 :
Name_Not_Found :2009/02/02(月) 19:09:07 ID:vUOxeOXO
>>726 ありがとうございます。
もう一つなのですが、div要素を横に並べることは出来ますか?
┏━┓┏━┓
┃ ┃┃ ┃
┗━┛┗━┛
このような感じに。
divにinline要素を指定しても無駄なようで、困っています。
できる
729 :
Name_Not_Found :2009/02/02(月) 19:19:58 ID:vUOxeOXO
>>728 <div style="width: 480px;">
<div style="float:left">menu1</div>
<div>menu2</div>
</div>
とやってもmenu1とmenu2が縦に並んでしまうのですが、間違っていますか?
>>729 floatさせる要素にwidthは必須
<div style="width: 480px;">
<div style="float:left; width=240px;">menu1</div>
<div>menu2</div>
</div>
>>729 というかその前にdivをcssで位置を設定してないじゃないか。
>>730 散々既出だがwidth必須は2.0で2.1では必要なく
2.0基準のブラウザなんてN6くらいしか存在しない
>>729 初心者の俺の推測ではそれでも横並びになるはずだけどな・・・なんでだろう
よく分からんがこれで試してくれ
<div style="width: 480px;">
<div style="width: 240px; float: left;"><h3>おっぱいメニュー1</h3></div>
<div style="width: 240px; float: right;"><h3>おっぱいメニュー2</h3></div>
</div>
<div style="cleat: both;">
<h1>( ゚∀゚)o彡゜オッパイ!オッパイ!</h1>
</div>
>>733 今気づいたがタイプミスでclearがcleatになってたぜ
>>734 深い意味はないよ。テキストテキストテキストと同じ
>>733 でも間違いではないが以下のやり方推奨
<div style="width: 480px;">
<div style="float:left">menu1</div>
<div style="float:left">menu2</div>
</div>
次のタグの出現ででclear:both
CSS2.1が普及してきたのって2002年くらいだっけ?
それより古いバージョンのブラウザだとIEやOperaとかでも崩れると思うよ。
必須ではないが、明示した方がいい。
このスレ的には必須といえば、必須かなみたいな。
XP以前のOSなんて使ってる奴は少ないだろうけど。
紛らわしいから、次スレで
>>4 を修正した方がいいかもしれん。
推奨(笑) clearするなら親要素の中か、clearfix使えよ。 heightの指定もないし、親要素の高さがないままだぞ。 つか、メニューなら<li>のfloatにでもしとけ。
別に親の高さがなくたって問題はない場合が多いからそれは好きでいいだろ
親要素に背景や線つけたりすることはけっこうありそうだが。 未だ作成途中で詳細がわからないのなら、問題のないやり方を推奨すべきだよ。 スレタイに初心者ってあるし、あとで問題でたら困るだろ。
>>740 正しい仕様なのにそれを問題って言う方のほうが問題だっての
>>737 >>740 あたりは多分ここで何度もトンチンカンな解答してる奴だ
もうちょっと隠せないもんかね
"推奨"や"問題はない場合が多い"なんてトンチンカンなこと言い出したからだな
すいません。教えてください。 今、印刷用CSSを作っているのですが、サイズの大きいFLASHを印刷すると、途中で切れてしまい、1枚目しか印刷されなくなってしまいます。どのようにCSSを作れば、FLASHの大きさを変えずに2枚目に印刷できるようにCSSを作ることは出来ますか?教えてください。
レンタルのメールフォームをやめて適当なCGIを拾ってきて自分で設置するという選択肢も
そうですか・・・FLASH板ですか・・・
<!-- * {margin:0; padding:0;} body {margin:0; padding:0; overflow:hidden; position:absolute; width:480px; left:50%; margin-left:-240px;} #leftbox {margin:0; padding:0; height:100%; width:15em; position:absolute; left:2em; } #mainbox {margin:0 0 0 15em; padding:0; height:100%; overflow:auto;} #title{margin:0 15em 0 0; padding:0; height:100%; width:15em; position:absolute; top:0;} #text{font-size:0.8em; color:#696969;} #hitokoto{font-size:0.8em; color:#696969;} #ALL {margin: auto auto auto auto;} --> こんな感じで、左右にボックス、上にタイトルって風にして作ってるんですけども firefoxでは真ん中に持っていけたのにIEではレイアウトがぐちゃぐちゃになってしまいました。 どうすればいいですか?
>>748 状況を再現させる最低限のHTMLを出せ
>>749 <body>
<div id=ALL>
内容
<div id=hitokoto>内容</div>
内容
<div id=text>
<div id=leftbox>
内容
</div>
<div id=mainbox>
内容
</div>
</div>
</div>
</div>
</body>
こんな感じです。
cssの記述も更新を反映させてそれを見ながらいじってるようなド素人なので
多分記述に余計な部分やまとめられるところ等多く、お目汚しかと思いますが
何卒よろしくお願いいたします。
厨出現
753 :
Name_Not_Found :2009/02/03(火) 21:05:43 ID:WgjXDH6P
dl、dt、ddでカテゴライズしているんだけど、 ddの右に、右端そろえの要素を加えたいのです。 主題 副題 内容内容内容 日付 内容 日付 内容内容 日付 こんな感じにしたいんですが、無理なのかなあ…
無理じゃない 頑張れ
755 :
753 :2009/02/03(火) 22:14:27 ID:???
spanやdivでfloat指定したりしているんですが、 どうしても二行になってしまいます。 もしお分かりでしたらどなたかお教えいただけませんか。
文章構造から作れってか? ググレカス
副題がdt?主題がdt? 内容と日付はddの内部だよな? 日付だけspanで右寄せすれば改行されないかと
改行はされないが右寄せもされないだろそれwww
dd relative span positionでおk
761 :
753 :2009/02/04(水) 02:29:20 ID:???
<dl><dt>題</dt> <dd><div style="width: 200px;"> <div style="float:left; width=140px;">短めのタイトル</div> <div style="float:right; width=10px; margin-left : 5px ;">090204</div> </div></dd> <dd><div style="width: 200px;"> <div style="float:left; width=140px;">ちょい長めのタイトル</div> <div style="float:right; width=10px; margin-left : 5px ;">090204</div> </div></dd> </dl> 題 タイトル 日付 こんな感じになってしまいます。
<div>厨か
>>752 ちゃんとレイアウトされました。
ありがとうございます。
___ /|∧_∧| ||. ( | じゃ、そういうことで ||oと. | || |(__)J| ||/彡 ̄ ガチャ
同じIDを何回も使っているのはいいんですか? この場合、副題内容日付って、クラスのほうがよくないんですか?
>>765 同じIDが別ページなら問題ない。同ページは駄目
下の行は日本語でおK
767 :
Name_Not_Found :2009/02/05(木) 11:55:59 ID:OKAwEgmY
cssを使って擬似フレームを作っています。 フレームの外(メニューやヘッダー等)と内(コンテンツ)で2つのcssを書きました。 コンテンツの外枠としてボーダーをひきたいのですが、内の方にボーダー要素を書いてもブラウザで表示されません。 で、外のほうに書くとブラウザで表示されます。 ですがその場合、内の方と要素が被るために内の方の内容が読み込まれません。 外のcssを全部共通にして、内のcssだけをページ数分用意する形にしたいのですが、これを解決するためにはどうすればいいでしょうか?
被ったって読み込まれないなんてことはない 擬似フレームじゃない何をやってるんだ その症状が出る最低限のhtmlとcssを持って出直してこい、最低限だぞ
>>767 なにを言いたいのか分からんけど、メニュー部分とコンテンツ部分のcssを分けたいんなら、外部スタイルシートでmenu.cssとcontents.cssを創って一緒に読み込めばいいんじゃない?
770 :
Name_Not_Found :2009/02/05(木) 12:56:45 ID:OKAwEgmY
>>768 では、ボーダーが読み込まれないのは何故なんでしょうか?
最低限のHTMLとCSSをうpしろってことですか?
>>769 そうしているのですが、読み込まれないというか、読み込んでるけど記述してあるはずのボーダーが表示されないというわけです。
オウム返しw
>>770 お前質問する土壌にも立ってないよ・・・
773 :
Name_Not_Found :2009/02/05(木) 13:19:26 ID:OKAwEgmY
>>773 最低限の構成でな
全部書いたら無視されるぞ
775 :
Name_Not_Found :2009/02/05(木) 13:28:14 ID:OKAwEgmY
えーと、ちょっとまとめます。
frame.css、content1.css、content2.cssの三つのcssを用意しました。
1.htmlではframe.cssとcontent1.cssを、2.htmlではframe.cssとcontent2.cssをそれぞれ読み込むように記述しました。
ページはこのようなレイアウトです。
http://www2.vipper.org/vip1097002.gif コンテンツの中身だけが切り替わるフレームページのようなページにしたいんです。
776 :
Name_Not_Found :2009/02/05(木) 13:41:33 ID:OKAwEgmY
最低限と思われる部分だけ抜粋しました。 [html] <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css/frame.css" rel="stylesheet" type="text/css" media="all"> <link href="css/content1.css" rel="stylesheet" type="text/css" media="all"> <title></title> </head> <body> <div id="wrapper"> <div id="head_foot"></div> <div id="content"></div> <div id="menu"></div> </div> </body> </html> [css(frame)] *{list-style-type: none; margin: 0 auto; padding: 0 auto; text-align: center; margin-top: 10px; } #wrapper{ position: relative; width: 932px; height: 592px; border: 1px solid; } #head_foot{ float: left; width: 150px; height: 500px; margin: 0 0 0 5px; } #menu{ clear: both; width: 100%; } [css(content1)] #content{float: right; width: 750px; height: 500px; margin: 10px 10px 5px; border: 1px; overflow: scroll; }
全然最低限じゃない件
>>775 どこが擬似フレームだよ
まずそこから勉強し直せ
779 :
Name_Not_Found :2009/02/05(木) 13:45:11 ID:OKAwEgmY
>>777 どれくらい省けばよかったんでしょうか?
780 :
Name_Not_Found :2009/02/05(木) 13:47:33 ID:OKAwEgmY
>>778 こういうページは擬似フレームとは言わないのでしょうか?
2つ以上のhtmlを幅分けして表示するページがフレームページではないのでしょうか?
cssでフレームページのようなページを作るのが擬似フレームだというのは認識間違いでしょうか?
兎も角、コンテンツ部分のCSSが読み込まれないんです。
>>776 ×#content{float: right; width: 750px; height: 500px; margin: 10px 10px 5px; border: 1px; overflow: scroll; }
○#content{float: right; width: 750px; height: 500px; margin: 10px 10px 5px; border: 1px solid; overflow: auto; }
border: 1px; って何がしたいの?
1.htmlと2.htmlとか言ってるんだから 何言っても無駄じゃね・・・
やってるの別ページかよ、そりゃ読み込まれるはずねえw ちゃんと別ページの方でCSS読み込ませろよ、でFA
786 :
Name_Not_Found :2009/02/05(木) 14:03:56 ID:OKAwEgmY
788 :
Name_Not_Found :2009/02/05(木) 14:09:34 ID:OKAwEgmY
>>787 基礎の基礎とはどのようなことをいうのでしょうか?
基本的なことは分かってるつもりなのですが・・・。
789 :
Name_Not_Found :2009/02/05(木) 14:11:54 ID:OKAwEgmY
特に
>>785 は意味が分からないのですが・・・。
あと、
>>776 は全部共通の部分で、ここに書き込むにふさわしいと思われる部分だけを抜粋しました。
もちろんコンテンツの中身は各ページ違いますし、コンテンツ用cssは各ページ分用意してますが、フレームページ用cssはひとつです。
釣りじゃねーのコレ…
791 :
Name_Not_Found :2009/02/05(木) 14:20:16 ID:OKAwEgmY
>>790 断じて釣りではないです。
ですが、釣りに見えますね。
客観的に見て、僕は皆さんが至極当然に理解出来ている内容が理解出来てないように思います。
とりあえず、もう一度自分で1から考えてみます。レスありがとうございました。
はてしなく意味がわからないんだが、ひょっとしてやりたいことって border: 1px; ↓ border: solid 1px #000; だけだったりする?
俺が思うにサンプルになるページを誰か作って質問主に見せてやる方がいいような気がする。
そもそもやりたいことがわからないからサンプルも作ってやれない
質問者がやりたいことをまとめると ・フレームを使わずにフレームページを作りたい ・メニュー部分とコンテンツ部分の境界線を入れたい ・どのページに飛んでもメニュー部分は同じ構成にしたい …でいいの?
797 :
Name_Not_Found :2009/02/05(木) 16:32:20 ID:YjcC5+Rk
質問させてください html <div></div> css div { width: 10em; } このようにソースを書いている場合、 div内に文字を流すと横幅が10emに達すると改行されますが、 たとえば、 文字列が20emある場合はdivが拡張して、あたかも div { width: 20em; } のように見えるようにする最善の方法にはどんな方法が考えられるでしょうか? widthを捨て、width以外を使うことで実現できるのでしたら、 その方法を選んでも構わない状態ですので、どうかよろしくお願いいたします
798 :
797 :2009/02/05(木) 16:36:57 ID:YjcC5+Rk
情報が不足しているように感じましたので補足します 普段はdivを div { width: 10em; } の幅で表示させておきたい状態です div内に流す文字が10emを超える場合は、 cssで指定した上記のwidth縛りを破って 1行辺りの文字列の幅によっては、 divで囲んだ場所が20emにも30emにも横に膨らんで欲しいのです
white-space:nowrap;のことか?
>>799 +display:table-cell;のことではないか、多分
801 :
797 :2009/02/05(木) 16:52:10 ID:YjcC5+Rk
>>799 レス頂きましてありがとうございます
それではたとえば、
div { width: 10em; white-space: nowrap; }
というので何か問題になりそうなことはありますでしょうか?
特に問題が無いようでしたら、
white-spaceを使ってみようと思います
802 :
797 :2009/02/05(木) 16:58:35 ID:YjcC5+Rk
>>800 display: table-cellを併用すれば実現できそうですね
IE6でもハックを使えば行けそうな情報がありました
レス頂きましてありがとうございました
>>801 普通に使ってみたらいいじゃんw
white-space: nowrap;はdivが膨らむっていうのとはちょっと違うよ。
文字がその領域からはみ出してしまうことになる。
背景色とかを指定ないなら問題ないと思うけど。
「div内に文字を流す」 こんな言い方って普通なの? オレは初めて聞いたけど
min-width ちゃうん?
┏━━━┓ ┏━━━━┓ ┏━━┓ × ┃CSS┃→┃HTML┃→┃出力┃ ┗━━━┛ ┗━━━━┛ ┗━━┛ ┏━━━━┓ ┏━━━┓ ┏━━┓ ○ ┃HTML┃→┃CSS┃→┃出力┃ ┗━━━━┛ ┗━━━┛ ┗━━┛
今頃
>>806 は試しのソース作って恥ずかしさに悶えてるんだろうか
809 :
Name_Not_Found :2009/02/06(金) 18:18:56 ID:Lu15mL1u
Ctrl + Fで出てくる文字列検索機能をページに埋め込むようなことって出来ますか?
ボタン押して文字列検索とかならjavascriptで出来るけど 「Ctrl+Fで検索してください」って書いた方がよかないか
スレタイ読め
812 :
Name_Not_Found :2009/02/06(金) 23:40:00 ID:PDPQm6PX
text-align: centerにして たまにセンター揃えにならないのはなぜ?
どっか間違えてるんだろ
そうか ありがとう。
どうでもいいイメージ的な画像なんだけど divに普通に画像貼るのと背景画像にするのどっちでもいいの?
>>816 目的地に自動車で行くか自転車で行くかはたまた徒歩で行くかの違いのようなもん
>>816 どうでもいいなら背景にしとけ
imgで埋め込むのはその画像が文章の中で必要なときだけだ
>>816 その画像がコンテンツの一部ならimg
装飾目的なら背景画像
「どうでもいいイメージ的な画像」なら背景画像のほうがいいだろうな
しかしスレ違い
820 :
Name_Not_Found :2009/02/07(土) 16:51:38 ID:mDs/RJbH
xhtml1.0 strictで制作してます
h1タグの右側にpタグを置いてるのですが
h1の文字が大きいので、pタグの文字が上に浮いてしまったように見えてしまいました
pを下揃えにしたいのですが
http://2-laps.com/mt/2008/03/cssdiv.htmlを参考にしても実現できません どなたか、pタグの文字を下に下ぞろえにしたいのですが
h1,p{float:left;}
p{
pisition:absolute;
bottom:0;
}
<div id="contents">
<h1>タイトル</h1>
<p>段落文字段落文字段落文字</p>
</div>
821 :
Name_Not_Found :2009/02/07(土) 16:52:28 ID:mDs/RJbH
すいません途中で送信してしまいました どなたかご教授お願いいたします
どうでもいいけど恥ずかしいからそれは使うな、「ご教示願います」だ。 「ご教授願います」でググると恥ずかしさで悶えられるぞ。 そして何をしたいのかいまいちわからないが floatとpositionは併用できない
>>820 俺も初心者だから何が悪いのか良く分からんが
多分これでやりたいことは再現できるはず。
.oppai{
font-size:32px;
font-weight: bold;
}
.paiotu{
pisition:absolute;
bottom:0;
}
<div>
<span class="oppai">おっぱい</span>
<span class="paiotu">( ゚∀゚)o彡゜オッパイ!オッパイ!</span>
</div>
またおっぱい大好きのアンタか 自分も好きだけどな
>>823 今すごいことに気づいたがoがiになってたよ・・・ん?
いっぱいおっぱいはたくさんだw
>>822 は「確信犯」って単語に反応しちゃうタイプ
<div id="contents"> <h1>タイトル</h1> <p>段落文字段落文字段落文字</p> </div> div#contents { width: 500px; /*clearFixとか*/ } div#contents h1 { float: left; margin: 0px; width: 300px; } div#contents p { margin: 24px 0px 0px 300px; /* ふつうにmarigin-topで調節 */ width: 200px; } これでいいんじゃね?
div#contents { border: 1px solid #000000; width: 500px; } div#contents h1 { border: 1px solid #000000; margin: 0px; width: 300px; } div#contents p { border: 1px solid #000000; margin: -28px 0px 0px 300px; width: 200px; } これでもいいな。 IEはしらん。
classとかidの名前めんどくさいけどどうすればいい?
ぐぐったらよく使われるclass名やid名が出てくる。 でも、あんまりおすすめしない。 書くのがめんどくさいなら、さらにめんどくさく、 body div div div ul li ul li {} とかにしたらいい。
>>820 htmlに書き加える事になるけど。
<html>
<head>
<style type="text/css">
<!--
.kakomi div{
display:table-cell; }
* html div.kakomi div{
display:inline;
zoom:1; } /* IE 6用のハック */
*:first-child+html div.kakomi div{
display:inline;
zoom:1; } /* IE 7用のハック */
-->
</style>
</head>
<body>
<div class="kakomi">
<div>
<h1>ここは見出しです</h1>
</div>
<div>
<p>ここに本文。</p>
</div>
</div>
</body>
</html>
<html>にheight100%へのバグは既出ですか?ググったけどどこにもなかったんですが。。
<html> はcssの効く <body>の中じゃないから <html> タグ自体がなかったことになってる
>>834 htmlにheight:100%としたなら効果なくて当然。それが仕様
>>835 body外のhead内要素にもCSSは効く、まあ実装はまちまちだけど
840 :
834 :2009/02/07(土) 23:42:07 ID:???
すいません日本語崩壊でw 正確に言うとcssで<html><body>にwidth:100%、height:100%って 普通にやってたら、<body>にyリピートしてる画像が途中で途切れるんすよね。 一応ソースさらします。 <html> <head> <style type="text/css"> <!-- body, html { width: 100%; height: 100% margin: 0px; padding: 0px; } html { background: url(../img/hanagara.png) repeat center top; } body { background: url(../img/tatetate.png) repeat-y center top; } #doc { margin: 0px auto; height: 1000px; width: 900px; } </style> </head> <body> <div id="doc">テスト</div> </body> </html>
>>840 それって、IE8やFirefoxで起きてIEでは起きない現象のヤツかな?
842 :
834 :2009/02/08(日) 00:06:26 ID:???
>>841 IE8はわからんですがIE7とFF3で、こうなっちゃいますね。
ただIE6は問題ないというww
843 :
834 :2009/02/08(日) 00:12:50 ID:???
で補足なんですが、 1、このソースで、bodyにだけ背景画像の指定をすると何故か途切れない。 2、同じくこのソースで<html>のheght:100%を外すとbodyの背景画像が途切れない。 まぁ2の方法でやれば問題ないんですが、釈然としないんですよね。。。
>>843 だから仕様だと何度・・・
パーセンテージは親要素に対する割合なんだからさ
846 :
834 :2009/02/08(日) 01:11:10 ID:???
>>844 仕様ですか。。。
>>845 さんのリンク先は理解できたのですが、
<html>にheight:100%とする場合に起きる、自分が書いた
>>840 における現象が
何故そうなるのか、理解できません。すいません頭悪くて。。m(__)m
よろしければ詳しく教えて下さい。
body { min-height: 100%; } * html body { height: 100%; }
849 :
834 :2009/02/08(日) 03:28:11 ID:???
>>847 分かりました!!viewportの事ですよね?
なるほど。ブラウザの表示領域が、そのまま影響するから途切れちゃうわけですね。
すげー納得しました。ありがとうございます!!
仕様は分かるが出来るんだが?ブラウザの仕様は理解してるか?
>>852 >仕様は分かるが出来るんだが?
日本語でおk
普通にわかる文章だろ
仕様は分かりましたが、実際はスクロールしても背景を途切れることなく表示することが可能です。
ブラウザの仕様は理解していらっしゃいますでしょうか?
>>853 これでいいか?
別に文法厨ってわけじゃないけど、「〜だが」とかが同じ文中で二回出ると変だと思う人もいるんじゃない?
857 :
834 :2009/02/08(日) 14:18:53 ID:???
>>855 自分は<html>からheight:100%を外すことで解決させていますし、納得もしています。
>>848 さんのやり方は<body>直下の子要素のdivを100%表示させたい時に使いたいと思います。
皆さん色々アドバイスありがとうございました!!
>>自分は<html>からheight:100%を外すことで解決させていますし、納得もしています。
理解してないじゃないか。
>>845 読んだのか・・・?
859 :
848 :2009/02/08(日) 14:42:13 ID:???
なんか勘違されてるみたいだから一応補足。仕様は詳しくないので他の方に任せます。 html { height: 100% } body { min-height: 100%; }/*モダンブラウザ用*/ * html body { height: 100%; }/*IE6以下用*/
マニアックなブラウザ使ってる奴はアフィのパフォーマンス低いから ie6・7とfirefox以外切り捨てていいと思うよ^^
そんな簡単に切り捨てられたらどんなに楽か・・w いまだにNN6対応とか言われる泣きたくなる。あとMacIE5。
863 :
834 :2009/02/08(日) 15:13:51 ID:???
ああ、やっと分かりました。駄目だな〜俺w
height:100%外しでは解決できなかったですね。
>>848 さんありがとうございました!!
864 :
七誌 :2009/02/08(日) 17:19:16 ID:r6yW8GG8
このCPUでCSSできますか? intel(R)Celeron(R) M CPU 430 @ 1.73GHz
865 :
Name_Not_Found :2009/02/08(日) 17:20:34 ID:lqGyUMnz
出来ます
ワロタ
867 :
Name_Not_Found :2009/02/08(日) 19:22:31 ID:XfLjesdz
初心者的質問です。 a:hover {background-color:aqua;color:fuchsia;} のようなスタイルをインラインでスタイル指定するにはどのようにすればいいのでしょうか?
869 :
868 :2009/02/08(日) 20:27:38 ID:???
んー、こんな基本的なことと思ったけど出来ないんだ。 どうもありがとうございました。
870 :
867 :2009/02/08(日) 20:29:25 ID:???
3カラムの場合 固定幅レイアウトがいいですか? 可変幅レイアウトがいいですか?
デザインと相談してください。
873 :
Name_Not_Found :2009/02/08(日) 21:48:15 ID:QpUAZLoG
ヤフーのトップにある5つのタブのようなモノをCSSで作れますか?
作れます。 でも、CSSなんか使いません
>>871 可変はやめとけ
ワイドディスプレイから見ると香ばしいことになるぞ
>>871 3カラム自体が不便
>>873 CSSだけでは無理ですつーかヤフーまとっぷがタブになってない件
>>875 それはどう見ても全画面にしてるお前が香ばしいだけ
876じゃないけど、俺はiGoogleみたいな3カラム可変は使いやすいと思う。 自分で調節できるのがいいかな。 解像度は1920x1200と1280x1024です。
880 :
Name_Not_Found :2009/02/08(日) 22:42:07 ID:uvhBgvzb
下のテーブルで、<td colspan="2">にある「あ」を1つ増やすと、 「タイトル」の枠線の幅が100pxじゃなくなるんですが、 どうしてなんでしょうか? 使用ブラウザはIE7です。FireFoxでは起こりませんでした。 <table style="width: 500px; border: solid;"> <tr> <th style="width:100px; border: solid;">タイトル</th> <th>2007/12/31</th> </tr> <tr> <td colspan="2">あああああああああああああ</td> </tr> </table>
>>880 携帯からだから実際にやってみてないけど…日付の<th>に幅指定してみたらいかがかしら?
IEはちょっと計算が苦手なおばかさんだから、 paddingとborderとwidthは一緒にいれないほうがいいかな。 th、tdはwidthを明示してあげるとIEも少しお利口さんになるぞぉ。
883 :
880 :2009/02/08(日) 23:21:03 ID:???
>>881 >>882 どうもありがとうございます。
日付の<th>に幅指定したら、うまくいきました。
CSSのロゴとかマークってありますか?
urlの()内のパスの書き方はどれがいいの? 1.background-image: url("images01.jpg"); 2.background-image: url('images01.jpg'); 3.background-image: url(images01.jpg);
886 :
七誌 :2009/02/09(月) 13:19:05 ID:M7TcwVFB
865>>ありがとうございます。低スペだったんで不安でした。 それとビデオカードは高いんですか?
スレチだ死ねクソ
改行についての質問です <br>の連続は正しくないらしいので、CSSでmargin-bottomを設定して<br><br><br>や<br><br><br><br>などの代わりにしているのですが <div class="brbrbr"></div> <br class="brbrbr"> これはどっちを使ったほうがいいのでしょうか? divを使い過ぎてしまったら何か問題があるんじゃないかと不安です。
889 :
888 :2009/02/09(月) 14:54:47 ID:???
ごめんなさい。間違いに気づかず投稿してしまいました。 正確には改行についての質問では無いです。
>>885 どれも正しいけど12はうごかない古いブラウザのことを考えるなら3
>>888 どっちも駄目
br自体を置き換えるんではなく、brの前後のブロックにmarginを付ける
CSS無視して、HTML初心者スレッドになってるな
893 :
888 :2009/02/09(月) 15:31:38 ID:???
>>891 つまり、
<p class="">ああ<br>ああ</p>もしくは、
<p style="margin:;">ああ<br>ああ</p>
のようにということで合っているでしょうか
>>893 なんでそこでbrを入れるんだ・・・
改行毎に段落ってのが日本語なんだから全部pでいい。
pを囲む意味段落としてdivでも入れればいいだろ
896 :
888 :2009/02/09(月) 17:48:07 ID:???
>>894 すいません、ああ<br>ああは例文のつもりだったんですが、<p>の中に入れてはいけなかったんでしょうか…
>>895 ありがとうございます。そこで勉強させて頂きます。
連続brの解決法を探しても空タグやら画像やら、最後の手段みたいなものしか挙げられていなかったんです。
もう一度一から勉強し直します。
897 :
885 :2009/02/09(月) 23:00:22 ID:???
>>891 ありがとう
CSS講座のサイトによって記述がバラバラだったので
どれがいいのか迷っていました
<html> <head> </head> <body> <div id="box"> <div id="box_inner"> </div> </div> </body> </html> body直下のdiv(id="box")を高さ100%にする方法はわかるのですが 子のdiv(id="box_inner")もあわせて高さ100%にするにはどうしたらいいんでげしょう? おねがいします。
html,body {height:100%;} としているなら <div id="box"> <div id="box_inner"> の両方にheight:100%でなるんじゃね?
900 :
898 :2009/02/10(火) 02:50:58 ID:???
>>899 返答ありがとうございます
申し訳ありません本当に聞きたかったことではありませんでした
フッターを下部固定にしているんですが、
その上で入れ子になっているいくつかのブロック要素をheight100%にしようと試行錯誤しているんですが、
フッター下部固定の設定が影響してしまってうまくいかなかったんです。
もう少し試してみて考えがまとまったらもう一度質問させていただきます。
ありがとうございました。
後だし詐欺すんな
>>896 いれていいけど、改行はブラウザに任せてbr要素は不要だろ、ってことだと思うよ。
実際どんな幅で見てるかわからんしね
もう一度詐欺w 最近、同じ奴ばっか質問してるだろ。 少しは自分で調べれ。
htmlにスタイル指定する奴は池沼 headにwidth指定するようなものw
HTAにするとは一つにまとめるんだけどな・・・
brは使ってもいいと思うけどね
>>888 もう見てないかな
例えば
<p>ここが1つ目の段落です</p>
<p>ここが2つ目の段落です</p>
<p>ここが3つ目の段落です</p>
こうHTML書いておいたとして
p { margin-bottom: 20px; }
こうCSS書けばそれぞれの段落の下に20pxの隙間が空く
基本的な考え方はこれ。
実際は<p>はデフォで+1行分自動で改行が入るから、こういう使い方をするなら事前にマージンのリセット等が必要かな
* { margin: 0px; }
とかね
1段落目の下だけに2行分の隙間をあけるなら
<p class="danraku1">ここが1つ目の段落です</p>
<p>ここが2つ目の段落です</p>
<p>ここが3つ目の段落です</p>
HTML
こう書いてCSSを
.danraku1 { margin-bottom: 2em; }
こうとか
ばあいによってはpの代わりにdiv使ったり・・・
暇ってイカンな・・・
本当にな 暇ならチラシで鶴折っとけ
ていうかそんなclassの使い方教えんなよ・・・
>>909 すんません・・
適当になんとなく書いちゃった
こういうのを表現するのに基本的にはどうやるべき?
888が言うようなbrの連続っつーか、段落間のマージンをその都度、好きにとるっての
HTMLからデザインの要素を排除して、デザイン的な要素はCSSで指定しましょうね、 っていうのがCSSの発端(なのかどうかは知りませんが)。 だからID、CLASSの命名がデザイン的要素なのはどうだろう?っていう考えなんだが、 ぶっちゃけ大規模サイトになるとそんなこといちいち考えてられません\(^o^)/ テンプレート箇所とトップページだけ意味付けの命名ができてればいいよ。
912 :
Name_Not_Found :2009/02/11(水) 01:25:08 ID:HNBVL1y6
表示に問題なければ他はどうでもいいんです
913 :
907 :2009/02/11(水) 01:26:51 ID:???
>>909 =911であってる?
907はclassの名づけ方がオカシイってことだった?それとも隙間(マージン)を空ける手段が間違ってるってことだった?
909で手段を間違えてるって指摘されたのかと思ったんだけど
911見たら命名方がオカシイって言ってたのかな?て思って
命名に関してはちょっと907で適当に書いたけど、つまり右に寄せるコンテンツに
.right-box
とかつけたらイカンだろ!ってことだよね?後にやっぱり左に配置してくださいってなった時に.right-boxを左に・・・ってこんがらがるし・・みたいな
あと、手段としては一般的には他にどんな方法がある?
911は単体なのです。909ではないのです。
>>.right-box
俺の言いたいことは
>>912 でも言われてるからおkなんだぜ。
でもハイフン、アンダーバーは使わないな。
そういう書き方なら.rBoxとかにするかも。
915 :
907 :2009/02/11(水) 01:51:59 ID:???
>>914 了解しました。
改めてみなさんに質問
ここが1つ目の段落です。
ここが2つ目の段落です。
ここが3つ目の段落です。
ここが4つ目の段落です。
これの
1つ目の下は10px
2つ目の下は20px
3つ目の下は30px
4つ目の下は0px
それぞれマージンをとりたい
これを表現するのに一番適切なのはどういう方法?
※divでくくったコンテンツの中の文章4段落と考えてください。
pのマージン変えたクラスつくりゃすむ話
あんま深く考えないでいいよ。
>>912 が全て。その先は個人の自由。
919 :
Name_Not_Found :2009/02/11(水) 07:46:22 ID:eLzXOcIJ
超ド素人です。HP制作歴10秒ほどです。下らない質問ですけど許してください。 CSSファイルの中にコメントを残そうと思ったんですけど、適当なところに<!-- -->とやると誤作動を起こすようですね。 どのようにすれば誤作動の起きないコメントになるのでしょうか。
>>919 HP制作歴10秒ほどでそんな質問が出てくる天才には、
恐れ多くてお答えできません。
きっと我々が答える前に解答を見つけているでしょう。
クソワロタwwwww
923 :
Name_Not_Found :2009/02/11(水) 09:46:55 ID:bxCfCybz
>>919 お前w
cssには/* あああ */←これだろ^q^
br連続はともかく一つなら使っていいでしょ
>>810 909は上のリンクをはっ付けた奴です
上のよんでこい
>>824 使う意味のある場面がほとんどない、せいぜい
「〜〜〜〜〜」
と言った。
程度
>>924 はげどう
XHTMLは文章構造を記述する言語だから
<br />は改行としてあり(連続じゃなければ)だと思うけど
>>926 文書構造として改行だけというのは基本的に存在しない
改行を必要とする一フレーズはpでおK
ていうかstrictスレ行ってギタギタにされてこい
数百ページもあるような大規模サイトのコーディングでもっとも求められるのはわかりやすさ htmlの定義だのcssの定義だのうんちくたれるアフォは個人事業主にでもなってひとりでやってろ
>>927 段落と改行の区別がつかない人がいるのはこのスレですか?
>>927 HTMLだのなんだの言う前に国語の勉強からするべき。
931 :
Name_Not_Found :2009/02/11(水) 16:56:36 ID:HNBVL1y6
ストリクト的に言えばpは段落であり 段落間の空間はマージンであけるべきってことじゃないの?
段落であればそれでいいだろうな。 改行=段落と思ってるようなら考え直したほうがいい。
933 :
Name_Not_Found :2009/02/11(水) 17:03:52 ID:HNBVL1y6
段落以外で改行なんて普通の文章には存在しないはずなんだよ
>>929 別物だからこそ改行は必要ないということだ
必要あると思ってるのはデザイン(笑)目的であってそれだったら初めからbr連発だろうと変わらない
>>928 プロが来てたら恥ずかしいよ・・・
>>935 国語の教科書持ってたら開いてみろよ。
段落でもないのに改行使ってるから。
お前が正しいというのであれば、
brがいつまでたっても非推奨にならないのはなんでかね。
937 :
Name_Not_Found :2009/02/11(水) 17:43:00 ID:HNBVL1y6
小説とかは別に決まってんだろw
文書構造に他も糞もあるかよw いいからきっちり説明しろよ^^
<p>あああああ</p> <br /> <p>えええええ</p> まさかこんなアホな書き方する人いないよね
>>939 もう一度過去ログを良く読むんだ。
文章中の改行の話なんだぜ。
<p> あああああ <br /> <br /> えええええ </p> まさかこんなアホな書き方する人いないよね
補足しておく。 <p>あいうえお<br />かきくけこ</p> ↓↓ <p>あいうえお</p> <p>かきくけこ</p> この例だと明らかに後者なのは明白だけど、 前者も文章の構造としてはいくらでもあるんだよね。
944 :
Name_Not_Found :2009/02/11(水) 18:21:19 ID:HNBVL1y6
元々横書きの英語のしかも論文のためにあるHTMLに例外が出るのは当然だろあほ
>>936 pは段落じゃなくて1フレーズだと何度言われれば理解するんだ?
brなんか使わずにpでおK
お前らいい加減すれ違いなんだからどっかいけよ
>>949 いや、フレーズのスペルが頭文字Pなんだw
画像置換ってしますか? img要素でいいじゃないかとよく聞くのですけど。 本来文字だけでいいものを、装飾するという理由で画像にするというのも変じゃないですか? その画像には文書構造に必要でないものが含まれるわけですし。 装飾だったら、やっぱりCSSでするべきなんじゃないかなと。 CSS有効、画像無効とかで見れないとかあったりしますけど。 そこらへんどうなんでしょうか。
装飾目的なら基本背景。 印刷で出したいならimgで配置してaltなし。
>>952 人の言ってる意味が分からないから就職できないんだぜ!
>>953 印刷も関係ない
文書としてその画像に意味があるかどうかだけ
>>954 自分がわかってなかったのを棚に上げて就職できない憂さ晴らしか
957 :
951 :2009/02/11(水) 19:25:51 ID:???
あ、大事なことを書き忘れてました。 見出しとかでよくテキストを画像にするじゃないですか。 それを画像置換でするか、img要素でするかです。
リニューアルの時にめんどいので背景
CSS有効、画像無効で見られるようにしときたければ文字も消さずに入れとけ
>>959 オマエガナー
スレ違いだと何度言われても理解できないバカ
反論できないからって逃げるなよ^^ ちなみにスレ違い書いたの俺自身なので、お前も消えろ。
>>959 フレーズでpだなんてギャグ効いてるう!と言いたかったのかもしれないが
あいにく
>>945 はそういう意味で言ったんじゃない
パラグラフは日本語の改行ではなく数式1行等も包括する
いつもの奴だったか 真面目に書いて損した
なんでもいいからスレ違いで次スレ待て
>>963 理解してくれてありがとう。
>パラグラフは日本語の改行ではなく数式1行等も包括する
なるほど、paragraphって1行って意味もあったのか。
相手すんな同類。
散々相手して反論してスレ違いも糞もねぇだろw
>>959 頭弱いのはお前だろ
誰もスペルの話もしてなきゃ頭文字の話もしてなかったじゃんwww
勝手に先走って上手いこと言ったつもりになってただけだろ
>>955 よく「印刷で出したいんですぅう」ってクライアントに言われるよ。
文書的に意味のない画像は〜って説明しても「それでも出して!」としか言わないからなぁ・・・。
プロがこんなとこ来んなよ・・・
それより
>>970 いないなら行ってくるが
だってここ面白いんだもんw
>>970 は逃げたかな?
そして全員がweb先生から逃げた
<p></p>のpはパラグラフのp、 フレーズ記述として使うのは勝手だけど 改行に使うのはチガウヨ で次スレ建てようか。
むしろ改行に使うのがチガウよ
あ、<br>を改行に使うのが間違いって意味ね
どうせ
>>978 も先生なんだろうけどさ
パラグラフにもならない改行はpreでやってろボケ
984 :
Name_Not_Found :2009/02/11(水) 21:32:59 ID:9DWQB73D
<div class="left">a</div> <div class="left">a</div> <div class="left">a</div> <div class="left">a</div> <div>under</div> で、 leftにfloat : left; を指定しています。 こうすると、これらの4つの「a」と「under」が、5つ横に並ぶのですが、 「under」は4つの「a」の下に配置させたいです。 そこで、<div style="float: none;">under</div> としたのですが、これでも同じように5つとも横に並んでしまいます。 そこで、 <div class="left">a</div> <div class="left">a</div> <div class="left">a</div> <div class="left" style="float: none;">a</div> <div>under</div> としてみましたが、今度は「a」3つが横に並び、4つ目の「a」と「under」がその下に配置されてしまいます。 どうすればいいでしょうか。 視覚的にあらわすと、 [a] [a] [a] [a] [under] このようにしたいです。 <br />などは出来れば使いたくないと思っています。
clear:left
br使うななんて言ったら絶対アホだと思われる。
989 :
Name_Not_Found :2009/02/11(水) 22:02:46 ID:9DWQB73D
<br clear="all" /> を書いてみたら出来ました。 ありがとうございました!
>>988 おまえなんかいつも同じことしか書いてないのに見てもらえるのに何言ってんだ?
うぜーな、先生も奴に構ってる奴も消えろ
感謝しなくていいから二度とくんな
なんなんだこの流れ
タクトがまた来てんの?
うん 埋め
適切なスレに書かなかった
>>888 が元凶。
次いで、「もう見てないかな」とかいって蒸し返した暇人
>>907 の愚行。
うめ
1000
1001 :
1001 :
Over 1000 Thread このスレッドは1000を超えました。 もう書けないので、新しいスレッドを立ててくださいです。。。