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

<div style="
background-image:url(img.jpg);
background-attachment:fixed;
overflow:scroll;
height:150px;
">ほげほげ・・・・</div>

と指定してスクロールしても背景が動かないように
したのですが、ネスケ7だとページ全体のスクロールでも
fixedされてしまいます。IEのようにするにはどうすればいいですか？

>>866
えっ、WinIEがそんなことできたっけ？
↓

Internet Explorer (Windows) CSSバグリスト
body要素以外で背景画像を固定できない(IE6)
http://cssbug.tripod.co.jp/detail/winie/b065.html
body要素以外の要素で background-attachment: fixed; による背景画像の固定を行っても、背景画像はページスクロールに合わせて動いてしまう。

仕様書邦訳によれば――
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/colors.html#background-properties
'background-attachment'
背景画像が指定されていれば、このプロパティは、その画像を閲覧領域に対して固定するか、或いは文書に伴ってスクロールするかを指定する。

つまりIEは間違った解釈で表示してるんだね。

どうしてもIEと同じ表現にしたければ、positionｄ画像と重ねてz-indexを使ったら？

>>868
ありがとうございます。
IEがおかしいんですか。個人的にはネスケ7みたいな固定の仕方は余計なお世話な
気がするんですが・・・何に使うんでしょうか・・・。

>>867
ページのスクロールではなくて、divのスクロールに対しての固定です。

>863-864
どうもありがとうございます。
でも"widht"はカキコ時のミスなので
原因はそれじゃないみたい。

いろいろいじってみたのですが、直りません……。
background-attachmentは scrollでは変わらず、fixedでは悪化。
background-position を指定しても変わりませんでした。

現状は以下の通り。

.label{
position: absolute;
width: 154px;
height: 88px;
background-repeat: no-repeat;
color : #ffffef;
font-size : 16pt;
visibility: visible;
padding : 3px 0px 0px 88px;}

#lblhome{
background-image : url(../pic/home.gif);
top: 170px; left : 55px;}

<div class="label" id="lblhome"><a href="index.html">Home</a></div>

で、相変わらずかすれてしまうんです。＞NN7
黒っぽい背景画像（それぞれ違う）の上に
白文字で HOME LINK MAIL とかやりたかったんだけど……。

>>870
それで何？

>>870
CSSでなくて画像に問題があるって可能性は無いのかね。

あと、positionの指定の仕方が何だか怪しげ。

かすれるの意味が解らんし
もうちょっと具体的に言ってくれ

>>872
ありがとうございました。
透過gifをやめたらNN7でもちゃんと表示されました。

>>873
すみません。

かすれる、というのは画像にフィルタがかかった様な
白い膜がかぶさる状態のことです。
スクロールをくりかえすと消えたり、表示されたり。

リンクの文が途中で改行されてしまうのを防ぐにはどうすればいいのでしょうか？

>>875
詳しく言って

画面の折り返しだと思う。
<nobr><a href="hｔtp：//2ch.nｅt/">2ch</a></nobr>みたいなことがしたいんだろう。

white-spaceでできた木が。

white-spaceはIE5で使えないよ

ども申しわけないです

あいう　かきく　さしす

こんな感じで横にリンクを並べた際

あいう　かきく　さし
す

こんな感じに中途半端に改行されてしまうんですが
これを防ぎたいんです

>>879
すぐ上の2つのレスを参照

a {white-space: nowrap}

でもこれだと <a name="fubar">foo bar</a> も改行されません。

指定する相手を間違っている

スタイルシートで
<table>や<HR>などでalign=leftを直接指定するような
構文ってどのようにすればいいのでしょうか？

あぁ、、、text-align:left;でしたね。
すいません、事故解決しますた。

>>884

float: left では ?

【社会】福島県岩代町全町民の住基ネットデータが盗難
http://news2.2ch.net/test/read.cgi/newsplus/1041036852/

a 要素に accesskey が設定してあることを
ヴィジュアル系 UA を使っているユーザに知らせるために

a:after {
content:' (' attr(accesskey) ') '
}

とすると、 accesskey が設定されていない a 要素は、
要素の後に空カッコが表示されてしまいます。

HTML ソース

<a href="bar" accesskey="f">foo</a><br />
<a href="bar">foo</a>

上記 HTML を Mozilla などの UA でレンダリングさせたところ

foo (f)
foo ()

かといって以下のように CSS を記述すると、
Mozilla などでは要素の直後に accesskey の値が出現してしまい、
直前の単語とつながっているように見えてしまいます。

a:after {
content:attr(accesskey)
}

accesskey が設定されていないときに
カッコを表示させないようにするためには
どのようにすればいいのでしょうか ?

ちょっと質問の意味を取り違えてるかもしれないが…、
accesskey属性を持ったアンカーのみに適用、なら下のでいけるんと違うか。試してないけど。

a[accesskey]:after{ 〜 }

てゆうか、
＞要素の直後に accesskey の値が出現
は仕様通りの動作だと思うが。

>>887
a:after{ content: " attr(accesskey) "; }
これで間にスペースでない？
こんなんじゃダメ？
（ヴィジュアル系 UA持ってないから確認できん）

>>889
a[accesskey]:after{ content: " " attr(accesskey) ; }
じゃないか？

>>888

ありがとう。うまくいきました。

> ＞要素の直後に accesskey の値が出現
> は仕様通りの動作だと思うが

>>887 の文章表現が稚拙でした。
a 要素直後に accesskey の値が出現してしまうと都合が悪いということが伝えたかったのです。

>>889>>890

ありがとう。でも追加した空白にも
UA がつける underline がついてしまいました。

a[accesskey]:after {
content:content: " " attr(accesskey);
text-decoration:none
}

としても追加された空白の underline は除去できませんでした。

Mozilla で確認していますが、 Mozilla の挙動が正しいとも限りませんけど。

>としても追加された空白の underline は除去できませんでした。
>Mozilla で確認していますが、 Mozilla の挙動が正しいとも限りませんけど。

空白類『文字』なんだから underline が付いて当たり前じゃﾎﾞｹｪ。
そんなに underline を消したいんだったら、
margin-left を指定すればいいだろう。頭悪過ぎ。

a[accesskey]:after { content: attr(accesskey); margin-left: .5em; }

>>892
そんなに怒らないであげてよ。

怒りすぎで0が抜けてますね

>>894
煽らないであげてよ。

>>894-895
この場合は、「0」を省略出来るんだよﾎﾞｹｪ。
Validator で試してみやげれゴルァ。
http://jigsaw.w3.org/css-validator/validator-text.html

>>896
試してみやげりますから怒らないでください

>>896
895は何も言ってないよ。

>>897
揚げ足をとらないであげてよ。

>>897
エラー及び警告は見つかりませんでした。
ってでたよ。さすが896だね。

妙にﾏｰﾀﾘしてるな

年越しですから

質問ばかりで恐縮です。

ブロック要素の前 (上) に表示させた画像を
真ん中によせる方法はありますか ?

div:before {
content:url(/img/foo.png);
text-align:center
}

だと Mozilla では真ん中には来ませんでした。

div:before {
content:url(/img/foo.png);
margin-left:auto;
margin-right:auto
}

でも結果は変わりませんでした。

P.S.
>>892
" " (0x20) は .5em とはかぎりませんよね ?
ここのところは pending とさせていただきました。

CSSってどうやって切るんですか？

>>902
セレクターをdiv:beforeではなく単なるdivにしてmargin:0 auto;ではダメ？

>>903
IE/Win ウェブページのCSSを無効にする方法
http://members.jcom.home.ne.jp/jintrick/Personal/usr_styleoff.html

>>904

表示させる画像は装飾で、コンテンツではないので
できれば HTML の中には書きたくないのです。

ってそういうことではないのでしょうか ?

div {margin:0 auto;}
div:before {
content:url(/img/foo.png);
}

>>907

たびたびありがとうございます。

CSS 的には正しいのかもしれませんけど、
手持ちの UA では期待通りにレンダリングしてくれる
ものはありませんでした。

margin: auto を正しくレンダリングしてくれる UA ってあるのでしょうか ?

ごめん、間違った。
ブロックレベル要素センタリングさせるには左右marginをautoにするだけでなく、
ブロックレベル要素に幅（width）も指定しないとだね。

>>909

あ、そうか。いわれたことを試すだけで思考停止していました。
試してみます。挿入する画像のほうの width は画像の幅のピクセル数ですかね。

だめでしたー :'(

質問者も回答者も馬鹿ばっかりだなぁ。
みんな良く頭使えよぉー。

>>912
されば是非とも蒙を啓かれたく、ご示教賜らんことを。

これでどうだ。

div:before {
content: url(/img/foo.png);
margin: 0 auto;
width: 50%; /* 適当な幅 */
display: block;
}

>>3
仕様書は読んでおきましょう。

> 非置換インライン要素の場合（Inline, non-replaced elements）
> 'width'プロパティは効果を持たない。'left'、'right'、'margin-left'、'margin-right'の指定値が'auto'ならば、その算出値は'0'になる。

> 置換インライン要素の場合（Inline, replaced elements）
> 'left'、'right'、'margin-left'、'margin-right'の指定値が'auto'ならば、その算出値は'0'になる。'width'の指定値が'auto'ならば、その算出値は内在寸法と同じになる。

> 通常フローの非置換ブロック要素の場合
> 'margin-left'と'margin-right'の指定値が両方とも'auto'ならば、両者の算出値は等しくなる。

> 通常フローの置換ブロック要素の場合
> 両側のマージンの指定値が'auto'ならば、両者の算出値は等しくなる。

【CSS2勧告邦訳 10. 視覚整形モデル詳細】より

>>914

カンペキです。長々とお付き合いありがとうございました。

>display: block;

これがキモみたいですね。

CSSで表示させてる特定の画像に
特定のURLにLINKする事ってできるんですか？

>>916
無理です。

ｔｈｘ

CCSとはカードキャプターさくらの略ですか？

>>919
そうだよ。そのｽﾚにきてまでなにうつつヌカしてんだ？

次スレッドにＦＡＱの追加は無いかね？

>>921
　Q.>>919
　A.>>920

色を変える目的でリンクの下線にborder-bottomを代用したんですけど、下線と文字の距離が1px程度空いてしまいます。
padding-bottomでもmargin-bottomでも解決できないんですが、どうしたらいいですか？

http://www.eonet.ne.jp/~nohohon/osaka-band.htm
http://www.as-net.com/free01/mkgif/mkgif.cgi?osaka
http://res9.7777.net/bbs/osakaband/
http://www.benricgi.com/bbs/vr/d/130211/osaka.htm

>>923
どうしようもありません。

>>923
background-imageでリンクの文字の下に線の画像を指定するとか。

できるかどうかは知らない。

>>926
なるほど。
試してみます。

>>926
何とか出来ました。
thx!

ウィンドウの右側でテキストが改行されるのを防ぐにはどうすれば良いですか？

>>929
こんな面倒くさい事しなくてもいいかもしれないけど、
ブロック要素かテーブルとかを横100%にして内容を囲んで、
それの横幅を固定すればいいと思う(table-layoutとか)。

>>929-930
新年早々何だこれ…

新年早々ﾈﾀﾆﾏｼﾞﾚｽ

>>929
white-space:nowrap;

ウィンドウ全体に横スクロールバーはウザイので
white-space:nowrap;した要素は
display:block;にして、適当なwidthを指定して、overflow:auto;でもしる。

私で933getか〜。
有効な発言って200くらいってとこか？

>>933
無効

text-decorationでunderlineを指定した時、
テキストとアンダーラインの色を異なる色にするってことは可能でしょうか？
たとえば、テキスト文字が黒でアンダーラインが赤ってことです。
結構単純なことだから、出来そうだとは思うんですが、
そういう記述を探してみても見つかりません…。
これは不可能ってことなのでしょうか？

>>935
出来ないと思います。

>>936
そうですか…。
ありがとうございました。

>>935
border-bottomで代用したらダメ？

>>935
p {text-decoration:underline; color:#f00;}
span {color:#000;}

<p><span>hogehoge</span></p>

IE4だと同じ色だけどIE5以降やMozillaなら別の色になる。
無難にborder-bottomを使った方がいい。

>>935
わからないことがあったら、とりあえず仕様書読め。

>テキスト装飾に必要な色は'color'プロパティ値と同じにすべきである。
>このプロパティは継承を行わない。しかし当該ブロックの子孫部に当たるボックスは、すべて同じ装飾を施されるべきである（たとえばすべて下線を施されるべきである）。
>またその時、子孫部の要素が'color'プロパティに異なる値を持っていても装飾の色は同じにすべきである。
【CSS2勧告邦訳 16.3.1 線を引く、点滅させる】より

>>938
>>939
つまりテーブルを使えってことですね。
気がつきませんでした。ありがとうございました。

>>940
すいませんでした。

>>941
> つまりテーブルを使えってことですね。＜そうじゃないだろうっ

も　う　だ　め　ぽ

>>941
ahoは死ね。

基本的な質問かもしれませんが、
http://sawadaspecial.com/
ここのようにスタイルシートでページを左右にわけるのは、どういう処理をするもんなんでしょうか？
色々なところのソースを覗いてみたけど、複雑で理解できませんでした

段組でググれ
以上

>>945
http://www.glish.com/css/9.asp

>>941

>>926参照

イケてるサイトスレで見たんだけど
<hr />って何でつか

>>949
それは CSS 関連のものではない。
xhtml での水平罫線描画タグ。

タグは描画するためのものではない、と突っ込んでみる

ここでブチっと区切るってことを意味するタグだと思ってた＞hr
それでブラウザでは横線が表示されるんだと思ってた。

>>952
Horizontal Rule（水平方向の罫線）の意味

いい加減ｽﾚ違いだけどな。

水平線をマークアップするのでつ。スレ違いなのでこの話題はここまで。

ｽﾏｿかぶった

>>955
んじゃ、ｹｺﾝ

ありがとうございました

>>945
【ＦＡＱ】
Ｑ．ＣＳＳで段組するには？
Ａ．下記などを参照して下さい。

CSSを用いた段組の作成のコツ
　http://www.fromdfj.net/html/column.html
CSS段組レイアウトデザ委員会
　http://www.skipup.com/~l-_-l/web/
スタイルシートでマルチカラム・デザインを実現する方法
　http://www.motchie.com/article/multicolumn.html
tableを使はない段組:CSSによるマルチカラムデザインについての考察
　http://members.jcom.home.ne.jp/pctips/www/faq/Dangumi.html
　http://members.jcom.home.ne.jp/pctips/www/test/positiondangumi.html
段組れいあうとてすと
　http://www.remus.dti.ne.jp/~a-satomi/nikki/tmp/dangumi.html
なかよしぱれっと（ネスケ４でも崩れない段組みの実例）
　http://village.infoweb.ne.jp/~fores/

>>958を次スレッドの>>6か>>7あたりにＦＡＱとして追加しておいてくれませんか。

次スレを……

body に style="margin: 0px:" を指定しても
IEではマージンがなくなるんですが、NNだとマージンができてしまいます。
なんかいい方法無いでしょうか？

>>961
Pとかにもつけないとダメじゃなかったっけかな。
BODYにつけてるのん継承されなかった気がする。

>>961

NS4.x だと body には効きません。

>>961
marginだけでなく、paddingも0にしても駄目かい？

ところで誰か次スレッド立てて。（私のプロバイダはスレッド立て禁止されてるんで）

じゃあ漏れがやっとくよ
色々直すからちょと待て

/* CSS、スタイルシート質問スレッド【14】 */
http://pc3.2ch.net/test/read.cgi/hp/1041641395/

ちょっと失敗したｽﾏｿ
LANケーブルで首吊って肛門からヒ素カレー垂れ流してくる

>>965-966
大儀であった。暇を取らせる。

テンプレの1結構長いから、もう少しｽｷｰﾘさせようよ。

つーことで、15で使えるのよろ>>970

埋め

>>968
自分でやれやい！

━━Cascading Ctyle Sheets質問スレ道場訓━━
　一、礼節を重んじ常に努力精進すること
　一、UAのバグに打ち勝つ精神力を持つこと
　一、心身の優れたHTML+CSSを学ぶこと
　一、雑草の如く生涯HTML+CSS貫くこと
　一、感謝と反省を忘れないこと
　以上
━━━━━━━━━━━━━━━━━━━━━━

このスレに書き込むことが許されるものは以下のとおり
・CSS を記述するための最低限のHTMLを理解する者
・レイアウトのための最低限のCSSを理解する者
・CSSの意味を理解する者
・ユーザーに迷惑となるCSSを書かない者
・過去ログや関連資料を読むことができる者
・「初心者です」を振りかざさず、質問を分かる日本語で説明できる者

※ マターリ進行 推奨 奨励 ※

Cascading Style Sheetsの事で尋ねたいことがあったらこちらへどうぞ。
関連スレやリンクは>>2-5あたりに。

ルールを守れ。過去ログ読め。FAQ読め。仕様書読め。関連サイト読め。バグ辞典読め。・・・・・・・・

コレだけでもよくない（藁

>>971
━━Cascading Ctyle Sheets質問スレ道場訓━━
どうでも良いけど、
CtyleのCって間違えてない？

埋め

埋め

生き埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

埋め

　　　　
　　
　　　　　　　　　　　

埋め

梅

績め

埋め

夢．．．おやすみ

ひっそりと・・・素敵だ

/* CSS、スタイルシート質問スレッド【14】 */
http://pc3.2ch.net/test/read.cgi/hp/1041641395/

千　昌男

このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。