/* CSS、スタイルシート質問スレッド【12】 */

>>877でいいじゃんか

と。


/* list-styleを適用したいならfloatの方がいいけど。 */

display : inline ;
ってどのブラウザか対応してなかったよな？

>>882
list-styleはdisplay:list-itemにしか適用されないけど、
floatすると自動的にdisplay:blockになるので
結局list-styleは無効になる。仕様上は。

おねがいします。
http://ogre1634.fc2web.com/

・メインは一応GIF
・最近はUGネタです。
メインがいまいちつかめない、くされサイトですが評価お願いします。

間違えマスタ

age

fontの一括指定記述方法はどういう順番で書けばよろしいのでしょうか？

>>888
size/line-heigt はセットだがあとは決まってない

仕様書によればこうかな。

1番目　font-style、font-variant、font-weight。この中で順番は自由。どれを省略しても可。
2番目　font-sizeまたはfont-size/line-height
3番目　font-family

>>888
ここが、分かり易いかも。
http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font

わかりました！
皆様どうもありがとうございました！

リストについて質問させてください
テーブルのようなレイアウトなのにソースを見るとULタグなことがありますが
アレは一体どうやるのでしょうか？

>>893
まずはそのサイトのCSSの記述を見てみたら？

ULでテーブルのようなレイアウトってのがあまりよく想像できない俺は逝ってよしですか？

li{ border: 1px solid; } とかで枠線作って、とかじゃないのかな。

多分ULで段組組んでるサイトのことじゃないかな。
>>893にそのお手本サイトを教えてもらわんことには断言できないんだが。

勝手に想像：li {display: inline; width: ??;} って感じかな

>>898
なんでだよ

>899
ul {width: 8em;}
li {display: inline; width: 2em;}
あたりにして（marginやpaddingも適当に）
li を8個くらい書くと 4x2 にならないかなーと思って
いやまあそういう話じゃないって言うんならそれでいいんだ

float:leftとnoneをclassで使い分けているのかも。
実際そこまでやってしまうと、「いいからtable使え」って感じだが。

display: inline で width ですか

>>902
ﾜﾗﾀ。

padding: 1em;
width: 25%;

って指定するとMozillaとOperaでは字がはみ出してしまいます。IE6ではちゃんと
padding が適用されているようなのですが・・・
私の指定方法に何か誤りがあるのでしょうか。それともUAの表示バグ？

何か回避方法あれば教えてください。

字がはみ出すってよくわからないんだが
取り敢えず>>5参照

＞display: inline で width ですか
あー，そうか…全くそのとおりです．申し訳ございませんでした．
うろ覚えでものを書くものではありませんね．
罰として part12 の間はもう発言いたしません．すみませんでした．

IE6なので、計算方法の違いではないと思います。

はみ出すというのは、例えば DIV を width: 25%; padding: 1em; にしているのにその中の <p>ズラズラ</p> と
文章があった場合、IE6ではちゃんと25%の辺りで折り返してくれるんですが、他では
25%をちょっとはみ出した辺りで折り返すんです。

>>906
罰として次スレ用のテンプレ案と
このスレが970くらいになったら次スレを立ててください。

IE6でもDOCTYPE宣言をしないと互換モードになる気がする>907

>>909
あ、そうなんですか。XHTML1.1宣言しているのですが、これだとダメなんでしたっけ。

>910
あのさぁ…最初の質問（>904）ではほとんど情報を示さずに、話が進んでから
「実はXHTMLなんだ」とか言い出されるとやる気が一気に失せるんですけど。

悪いけどあとはほかの方に聞くか、頑張って自分で調べてくれ。
自己解決したら結果も報告してくれな。

>>911
偉そうなﾔｼだな、別に嫌ならｼｶﾄすりゃいーだろ。
さっさと逝けや。

今度は逆ギれですか、フルコースで攻めるおつもりですね？

ハーイ、シツモーン! (/*・・)/
pにwriting-mode:tb-rl;で縦書きにしましたが、
下詰めにしたいときはどう書けばいいのれすか？
WinIE6で見てみるとtext-align text-vertical-alignとも効きません。
やっぱ無理ですか？

スタイルシートで、例えばgif1とgif2という
二つの画像があったとして、この二つを背景に固定したいと思います。で、１つは
background-color :black;
background-image :url("gif1");
background-repeat:no-repeat;
background-attachment:fixed;
background-position :15% 25%;}
で絶対的な位置に指定できるんですけど、もう１つの画像(gif2)も背景として固定したい（例えばbackground-position :15% 35%;の
ように）のですが、二つを同時に固定するにはどうしたら良いのでしょうか

>>915
無理だと思いますが、画像を合成したらどうでしょうか？

あ〜　やっぱりムリなんですかね。。何回か記述試してみたけど、ダメだったし
なぁ・・・
やぱ合成ですかね

質問する前に参考書を買いなさい。
おすすめは・・・

>>914
いや、text-align:right;でできますよ。


そろそろ次スレッドの準備が要りますね。

>>919
できました！
どうやら、ボックスの大きさが文字の大きさと丁度同じだった模様。
これじゃtext-alignでは変化しないはずだ・・・
ボーダーをつけてみるとはっきりしました。
それにしてもボックスの縦幅がかなり理不尽な感じ。
CSS3:text的にこんなのでいいのかな？

>>917
全体をdivで囲うようにして、それにもう1つの背景画像を指定できないかしら?

>>921
"fixed"にできないのでは？
div要素そのものはスクロールしてしまうし
って実験する気力ないんで想像です。ごめん

>>1より、次スレ立てる人に業務連絡です。
このスレ立てる時にポカやって、>>2の参考サイトにリンク切れが多発してるので、
参考サイトは、>>6-8のをコピペしてください。
あと、>>470と>>873もFAQに入れてください。
お願いします。

……しかし、FAQがあんまり増えるようだと、それ用にサイト立ち上げた方が
いいような気もするな。

ずっとIEでデザインの確認しててさっきNNで見たら見れたもんじゃなかった。
いっそのことNNはスルーしてもいいですか。直すの面倒くせー。

愚痴ってｽﾏｿ。逝って来ます。

>>924
NNってバージョン何よ。
漏れもずーっと、NNは無視しているのだが最近気になってきている。

>>924
もーしょうがないと思うYo!
漏れはデザインはほっぽって、リンクだけ機能するようにしといたよ。>NN4向けページ
nn4で見たらテキストのみのサイト。

926は「nn4とそれ以外」で振り分けてるってことです、ｽﾏｿ

>>925
バージョンは6.2です。iframe使ってるようにしたかったのに(鬱
あるサイトさんではOPERAは崩れてたものの、NNではきちんと表示されてた。
面倒臭いからNNはスルーしようとも思ったけど、出来るならうちでもきちんと
表示させたいからソース見させてもらう事にしました。

>>928
ｶﾞｰﾝ 6.2でも崩れるのか。
一度確認してみっか。恐る恐る...

>>929
記述やマージン等の計算がきちんと出来てれば崩れないんじゃないかな、と。

>>930
そのはずなんだけんどね。

ところで質問。FAQだと思うのだけどなぜか出来なかった。

幅が例えば500pxあるdivのなかに。小さな画像と文字をセンターに置きたいのだが、
text-align:center だけだとテキストしかよってくれなかったのよ。
<hr>なんかもwidth:80%にすると、IEだと中心に来るけど、コカンラなんかだと
左に寄ったまま。
とりあえずパディング左右10%などで<hr>は見た目中央に持ってこれるんだが、
なにが足りらんのでしょうか？

今、>>4 に上げてあるサイトを見てきた、マージンを左右autoでいいのか?

>>932
試せばわかるだろ

>>932も何かと不安なんだよ。こんな世の中だから。

>>933
今、手元にはIEしかないので、マージンをautoにしなくてもよっちゃうのよ。

>>934
ふぉろーさんすこ。
不安一杯っす。

帰ってから試すよ。
漏れとしては早くtableを使ったレイアウトから脱却しないと、と思っている。

過去ログもここまで来ると1つのサイトにまとめて欲しくなりますね。

*自分でやれって言わないで*

>>936
言わないけど心の中で思ってる

みんな死ねよ。

何度も質問ｽﾏｿ
Valid CSS!の画像を貼り付けて、リンク先を以下のようにしたら
http://jigsaw.w3.org/css-validator/check/referer
化ける(日本語が全て'?'になる)のですが、なぜ?
ページは全てeuc-jpで記述しています。
http://jigsaw.w3.org/css-validator/validator?uri=http://www.hogehoge.com
の形式なら化けません。ブラウザはIE6です。

>>937
そうしておいてもらえるとありがたい。

>>939
そのページがMETAタグでエンコードを指定しないから。

【FAQ】
Ｑ：CSSで擬似フレームってどうやるの？
Ａ：次のページを参考にして下さい。
overflow プロパティは擬似フレームも作成できる
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/overflow.html
　http://www.geocities.co.jp/SiliconValley-PaloAlto/6736/files/frame.html
overflowを用いた擬似フレーム
　http://www.fromdfj.net/html/overflow.html

【FAQ】
Ｑ：なんかMacIEやOperaでフロートの表示が崩れるみたいなんですけど？
Ａ：floatさせる要素にはwidth指定が必須（img要素以外）。
　　これ、ＣＳＳの仕様書の決まりなんです。WinIEが勝手に補ってるだけです。
http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/floattest/float_not-specified-width.html

floatのwidth指定についてなんですけど、 width: auto; でもいいですか？
それとも何らかの幅を指定しないといけないですか？

>>941
エンコード指定してます...うーむ、なぜだろ。

それと>>929のつづきだが、NN7.0を落として確認したら
tableタグで囲われた画像のがバラけた。各セルの下側のみ余白が現れて
バラけ状態に。その他は問題なさそうなんすけど。

精進がたりんか。

>>944
明示しないとダメ。

私は時々min-width:1em;で誤魔化すね。
min-widthはWinIE未対応だけど、NN7やOperaは対応してるから。

スミマセン。質問させてくださいませ。
例えばtableタグで、

<table width="○○%">
　<tr>
　　<td width="●●px">〜</td>
　　<td>〜</td>
　</tr>
</table>

のように書くと、2番目のセルの幅は「Windowの幅の○○%」−「●●px」と
いった値に自動で整形されますよね。

　この「○○%−●●px」と言った幅をTABLEを使わずCSSで同じように指定して
やることは可能でしょうか？僕の中途半端な知識では実現できませんでした。
どなたか知恵をお貸しください。

　えっと説明が充分かどうかわかりませんが、実際はこれを縦幅で行い、
1番目のセル内は文字数固定で伸縮なし。2番目のセルだけ伸縮させ、
中の要素を「overflow: auto」で囲んで、低めの解像度や小さ目のウィンドウで
見てる人でも無理やり1ページで見えるようにしようと考えています。

　現在は、tableタグ内にspanでスクロールボックスを作るという非常にアレな
ソースを書いたら、IEでは%指定の基準をテーブル幅に取ってくれたので期待道理
に動作しましたがネスケではテーブル幅基準のつもりの%指定がWindow幅基準なの
でとても見れたものじゃないページができあがりました。

>>947
overflow:autoはOperaだと凄いことになるぞ

外部スタイルシートをちまちま頑張っている者です。
いくつかの見出し（ｈ）にボーダーやフォント、色などを指定していたのですが、
改行のあと次の標準の分との間に幅があってイマイチなので、
高さを調節したいのですが、どうもうまくいきません。
p要素にine-height:50%をいれると文字が重なってしまい、肝心の段落の隙間はうまりませんでした。
自分はなにか勘違いしていると思っているのですが、
よいヒントがあればあとは検索で探しますので、御指南ください。

margin-bottom

>950
ありがとうございました、今
position:relative; top:10px
なんて無茶を試みていました。
marginは試していたのですが、改めて確認すると負の値も使えることに気づきました。
そして、margin-bottom:-10px
にしてうまく言ったのですが、
そのすぐ下に表があると、文字が表に埋まってしまうので、また直し中です。道は遠いです・・。
ありがとうございました。

下のようにテーブル風のレイアウトをスタイルシートで
作ろうとしており、ここまで至りましたが、併せて700px全体を
中央に寄せる方法が解りません。どなたか方法を教えてください。

CD紹介
|￣￣Ｔ￣￣￣￣￣ |
|img |　コメント　|
|＿＿⊥＿＿＿＿＿ |


<style type="text/css" media="screen"><!--
.cdjake { background-color: black; margin-right: 0px;padding: 12px; border: solid 3px red; width: 130px; float: left }
.cdcomment { background-color: black; margin-left: 0px; border: solid 3px red; width: 540px; height: 160px }
--></style>
</head>
<body >
<h2>CD紹介</h2>
<img class="cdjake" src="img/cd_1.jpg" width="130" height="130" border="0">
<div class="cdcomment">
<h3>アルバムタイトル/アーティスト名</h3>
<div class="maintext">
コメント</div>

IE6を使っています。英単語を含んだ見出しを作りたいのですが、
h2 {font-family:'Arial Black','HGP創英角ｺﾞｼｯｸUB',sans-serif;}
と書くと、英単語はArial Blackになってくれると言うのに、
日本語はＭＳ Ｐゴシックになってしまいます。
※HGP創英角ｺﾞｼｯｸUBフォントは持っています

英語はArial Blackで、日本語はHGP創英角ｺﾞｼｯｸUBで、
というふうに、同じ見出し中に別々のフォントを使うことは出来ないのでしょうか？

ご教示お願いします。

>>953
フォントスタイルって一個しか適応できないんじゃなかったっけ？

>>953
officeｲﾝｽｺしなきゃ見れないフォントなんてWebで使うなよ

>>953
フォント名において

英字の全角/半角は正しいか？
スペースの全角/半角は正しいか？
カタカナの全角/半角は正しいか？

CSSではまるのはこんなのとろだ、まさかと思うが確認してみなされ。

>>953
IEではダメみたいだね。ネスケ7だとうまくいく。

h1の中でspanでも使うしかないだろうな。

<style>
h2 {
font-family:'Arial Black','HGP創英角ｺﾞｼｯｸUB',sans-serif;}

span[lang="ja"]{
font-family:'HGP創英角ｺﾞｼｯｸUB';}
</style>
---------------------------------------

<h2><span lang="ja">日本語</span>English</h1>

でどうよ？

やば、</h1> → </h2> でよろしこ

>>953
半角カナをエスケープしてみてはどうだろう。
ｺﾞｼｯｸ→\ff7a \ff9e \ff7c \ff6f \ff78
意味ないかも知れんけど。
ついでに@charsetをシート先頭に書き加えた方がいいかも知れない。

>>954
フォントファミリの指定は、前の方から順に見て、
その字が含まれている最初のフォントが使われる。
このチェックは文字毎に行われるので、欧文と和文を
混ぜて書いていた場合などは、それぞれに違うフォントが
適用されることになる。

>>960 >>956
エンコードや、フォント名の書き間違いではなかったようです。すみません。

>>955
仰る通りです。Officeの購入者って少ないのでしょうか。新ゴUも追加します。

>>958
Netscapeだと認識するのですが、IE6では、lang属性ごとのスタイルを認識してくれません。
IEの実装の問題でしょうか、英単語専用のclassを作ると認識しました。
心なしか、ベースラインがきっちり揃ったような気がします。有難うございました。

>>961
俺はオフィス持ってるが、フォントは入れないようにしてる。

オフィス限定フォントでも、
他候補が指定されてれば構わないと思いますが。
そういう俺もオフィス持っててフォント入れてない派ｗ

>>952
その700pxのボックスをdiv.boxで括って
.box {
margin-left:auto; margin-right:auto;/*NN7,Opera,MacIE向け*/
text-align:center;/*WinIE後方互換モード向け*/
}
を指定する。
ついでに
.cdjake, maintext {text-align:left;}
も指定しておく。

ところで誰か次スレッドよろしく。>>923参照。
>>942-943をＦＡＱに追加してね。
（私の使ってるプロバイダはスレッド立てられませんので）

>>964もFAQの方が良くないか？
幅固定真ん中寄せもよく出てくる質問だ。

>>948さん
OPERA、、考えたことも無かったです。
対して大きいサイトでもないのでアクセス解析いれてもIEとネスケ少々だけだし。

>>966
　凄いことになるから誰も来ない可能性も。

勃てた。

http://pc3.2ch.net/test/read.cgi/hp/1038437758/l50

Opera7だと直ってたはずだけどね、overflow。

>>969
みんなが７に移行してくれるのかね？

敢えてOpera使ってるくせに敢えて6にこだわるような香具師は頃せ

IE ユーザはなんとなく OS についてるから使ってるとか
とかバージョンアップしたら OS が挙動不審になるとかいう理由から
アップデートしない人も多いだろうけど
Opera は Win 付属のブラウザを使わずに好んで Opera を使ってる人だろうから
正式版が出てしばらくすればほとんどが 7 に移行するんじゃないかな

まあそれでも不安なら @media とかで Opera 6 に CSS をその部分だけ読ませないようにするとか
# 7 は media 対応どうなってるんだろ。

Operaの古いver使ってる人が来たのを見たことない。
いるのかも知らんが、ブラウザシェア数%の内の、さらに数%と思われ。

Operaユーザーは最新版が出たら、バージョンアップしたものと見なしてる。
もちろんN6ユーザーもN7にバージョンアップしたものと見なしてるよ(w

じゃあMozillaユーザーももちろんナイトビ(ry

うちのとこなんかそうなんだけど、会社だとネットワーク間で
同じソフトを入れておきたいということでバージョンアップも結構
大仕事になる場合があるから、しばらく古いブラウザのままってことも
考えられる。
会社内でoperaがデフォルトブラウザってことは
ちょっと考えにくいがN6は捨てがたくないか
そろそろスレも移行したいものだ

>>976
ここで話されてるのは企業向けのサイトじゃないだろう。

会社でもなにかと個人サイトのお世話になる機会が多い・・・
って奴は少数派か。

質問です。
たとえば
<DIV style="margin-left:50px; margin-top:5px">
で、この中にtableを入れてtableの中にテキストを流し込むと
ブラウザで、テキストが切れてしまうんですが
これを防ぐ方法はないのでしょうか？
それともこのやり方は間違ってるんでしょうか？

>>979
余計なお世話だけど、新ｽﾚで聞いたほうがいい気がするよ。

Opera7って連続した全角スペースが消えない？
モナ版の「右のAAのｽﾞﾚない環境が標準です」のAAだけど

ってスレ違いだな