CSS Tips コレクション

CSSの簡単でかつ使えるソースをみんなで書きましょう。

・ソース簡略化のためコードはなるべく単純にしましょう。
・優しい人は応用編なんかも作ってあげましょう。
・実際に使う人のために使う際での説明書きをしましょう。
・人のソースを応用したりしてより良いスタイルを完成させましょう。
・ブラウザは特に問いません。

　　　 _, ,_ 　ﾊﾟｰﾝ
　（´・ω・｀）
　　　⊂彡☆)),_ゝ´) >>1

うるせー。
文句あんなら立派なもん張りやがれ！！

乙>>1

>>1
ブラウザ問わずにCSSなんて…

？

　　(⌒＼　ﾉﾉﾉﾉ
　　　＼ヽ（ ﾟ∋ﾟ）
　　　　(m　　　⌒＼
　　　　　ﾉ　　　 / ／
　　　　 （　　 ∧ ∧
　　ﾐヘ丿　∩Д´；)←>>1
　　 (ヽ＿ノゝ　＿ノ

ではまず>>1からどうぞ

>>1
こんなスレを待っていた

>>8
ｼﾞｻｸｼﾞｴﾝ?

8 名前：1[age] 投稿日：03/12/05 20:58 ID:???
　　>>1
　　こんなスレを待っていた

書き込みの意図が分かりません

盛り上げるために貼ってやるか。

a:link,a:active,a:visited {
text-decoration: none;
}

>>8
禿同

盛り上げるために貼ってやるか。

* { display:none }

ではこんなのを

body {
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-shadow-color : #696969;
scrollbar-3dlight-color : #696969;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #696969;
}

盛り上げるために貼ってやるか。

body { cursor: wait }

* { display:anus }

これはすごいよ

font-size: 35pt;

盛っこりするために貼ってやるか。
ttp://www.club-star.jp/saitama/cgi-bin/image-box/himeimg-box/img20031205192530.jpg

>>16
ｷｬｯ! （＞＜）

誰か「HTML Tips コレクション」立ててくれ
使える串が切れた・・・

>>20
そんなスレが必要だとでも？

見易さというかなんというか

DIV { line-height:1.2 }

行間が気持ち広がるので、文章が見やすくなると思うが…
長文書く場合とかは結構使うと見る人に優しいと思うがどうだろう。

長文なのに何故にDIVとか突っ込んでみるテスト

盛り上げるために貼ってやるか

body { display: none; }

>>24
>>13

body:before{content:"ヽ(`Д´)ﾉ"}
body:after{content:"（´Д⊂"}
IE不可

img[src^="mailto:"]{display:none}
mozillaで確認。ユーザーCSSにいれとけ。mailto storm回避できる（多分）。
偶然見つけた。仕様を利用したテク？

これでも見て勉強しろよｵﾒｰﾗ

DIV { line-height:1.2 }

DIV { font-size:80% }
文字が小さくてかっこよくなる



。

p {
line-height:140%;
text-indent:1em;
}

* { filter:alpha(opacity=0,finishopacity=70,style=2,startx=0,starty=0)　}

半透明フィルターがかかって、括弧良くなりますよ。IE限定なのは残念ですが・・・

*{-moz-opacity:70%}

オナニーは自サイトでやれよ

乙>>1

1 { display : none }

DIV { font-size:80% }

kai-#kai/rQnSpY { display:none }

/* >>37 */

ちょっとこのスレは面白いと思った。

body　{　font-size:　100000%;　}

これ

body　{　line-height:　1px　}

これ意外と面白かった

それはつまり俺が面白いってことでよろしいですか？

CSSなんてまともに使ってるサイトあるの？
個人サイトでお化粧してるだけの言語だと思ってるんだけど。

ネタでageられるとウザイだけなんだが。

あげても実害ないだろ

ウザイってだけだよ。

俺のために喧嘩するなよ。

　　　 _, ,_ 　ﾊﾟｰﾝ
　（　・д・）
　　　⊂彡☆))Д´） ←>>42
　　　 _, ,_ 　ﾊﾟｰﾝ
　（　｀д´）
　　　⊂彡☆))Д´） ←>>44
　　　 _, ,_ 　ﾊﾟｰﾝ
　（　・ω・）
　　　⊂彡☆))Д´） ←>>46

CSS＝化粧っていうのは、まーなんつーか、その通りなんだが。

俺は嘘つかないからな。

>>49
あ！嘘ついた！

合コン1次会.下心 { display:none }

　　|
　　|　　　∧＿∧ ∧∧　ﾊﾆｬｰﾝ!!
　　|　　 (=(*ﾟーﾟ(>>50；)｡ﾟ
　　|　　 （　　　つと　　つノ
　　|　　　 Ｙ　 人≡ヽ　 ,⊃
　　|　　　（＿_）`Ｊ≡ し'
￣￣￣￣￣￣￣￣￣￣￣￣￣


　　|ゴッ！
　　|　ｼｨｨｨｨ!!!
　　|;∧∧≡ ∧＿∧
　��;'>>50)と(ﾟーﾟ*)=)
　　|`とと ヽ≡ヽ　　　つ
　　|　　ヽ　　） ﾉ　 人
　　|　　　し'ヽ)（＿_）`Ｊ
￣￣￣￣￣￣￣￣￣￣￣￣￣

　　　／⌒ヽ
　　/　´_ゝ`） すいません、ちょっと通りますよ・・・
　　|　 　　/　
　　| /|　|
　 //　| |
　Ｕ　 .Ｕ

俺のティムポでもしゃぶれ

　　　　　　ｼﾈ
　（　ﾟ∀ﾟ）
　　　⊂彡☆))Д´） ←>>54
　　　　　　ｼﾈ
　（　ﾟ∀ﾟ）
　　　⊂彡☆))Д´） ←>>54
　　　　　　ｼﾈ
　（　´ﾟдﾟ｀）
　　　⊂彡☆))Д´） ←>>54

>>1
乙

ところで俺のティムポをしゃぶりたい奴はまだか？

ノシ

ノシ

>>51
下心.一次会 { display:none }

こっちのが正しいだろ。

こうかな。

@place 一次会 {
    下心 { display:none }
}

γ⌒／＾＾／＾-
　　　　　　　　　　　　　　 ,ゝ｀/〜　/〜　/〜　 /⌒
　　　　　　　　 　　_　　〈（_|　　|　|〜　　|〜　 /＾ ）
　　　　　　　　　　　　(/〜　/〜　/〜　/〜　〜　/〜　/＾＼
　　　　　　　　　　　（）/)/〜　/〜　|〜　　　 .|〜　|〜　|〜　/）
　　　　　　　　　　　へ＾〈,|,,､,,|,,､,,,,,|〜,,,,､〈〜,, 〈〜　/⌒|）＼
　　　　　　　　　　|:::::::　　　゛　　゛ 　　　　　　　　　,,,,;;::'''''ヽ
　　　　　　　　　　|::::::::　　　　　　,,,,;;:::::::::::::::　　　　　　　__ ヽ
　　　　　　　　　　|:::　"　　　＿＿　　　　::::　　　　　＜'●,　|
　　　　　　　　　┌―.　- '"-ゞ,●＞　　　::::::...　　　　　　　　 |
　　　　　　　　　 |　|￣..　　　　　　　　　 :::::::　　　　　　　 　 |
　　　　　 　　　　ヽ.＼{＿　　　　　　　　　　　(　○ ,:○)　　　|
　　　　　　　　　　　＼＼/.　　　　　　　　　　　　　　　　　　 |
　　　　　　　　　　　　 ＼＿ヽ.　　　　　　　 __,-'ﾆニニヽ .　 |
..　　　　　　 　　　　　　　　　ヽ.　　　　　　　　ヾニ二ン" 　/
　　　　　　　　　　　　　　　　＼　　　　　　　　　　　　　　　/
　　　　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　｜
　　　　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　/
　　　　　　　 　　　　　　　　　ヽ＼　　　　　　　　　　　　　/
　　　　　　　　　　　　　　　　 　l　　`ｰ-::､_　　　　　　　,,..'|ヽ.
　　　　　　　　　　　　　　 　　:人　　　　　　`ー――''''' 　/　ヽ
　　　　　　　　　　　　　　＿／　　`ｰ-､　　　　　　　　　 ,.-'"　　 ＼ー-､
　　　　　　　　 　　,.-'"　　＼:　　　　　 ＼　　　　　 .,.-''"　　　　 |
　　　　　　　　　／.　　　　　＼　　　　　　　 〜＞､,.-''"　　　　　　|
　　　　,,..-‐'''""　　　　　　　　ヾ　　　　,.-''"| 　　　/――――､/
りんら　ろるらりろうりらお　りんらろくろららろー　りれっろはりろるにおりり

一次会>下心{visibility:hidden}

下心が無いわけじゃないんだからdisplay:noneは違うと思われ

経歴 { visibility:hidden; }

消したいものがいっぱいだ世の中は。

{tinko-weight:bold}

世の中は悲しみに溢れているよ。。。

　　　　　　ｼﾈ
　（　ﾟ∀ﾟ）
　　　⊂彡☆))Д´） ←>>1
　　　　　　ｼﾈ
　（　ﾟ∀ﾟ）
　　　⊂彡☆))Д´） ←>>1
　　　　　　ｼﾈ
　（　´ﾟдﾟ｀）
　　　⊂彡☆))Д´） ←>>1

　　　　　 ∩　ﾊﾟﾊﾟﾊﾟﾊﾟｰﾝ
　（　ﾟ∀ﾟ） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>1

　　　 ∩　ﾊﾟﾊﾟﾊﾟﾊﾟｰﾝ
　（　ﾟ∀ﾟ） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>68

　　　_, ,_　　∩　ﾊﾟﾊﾟﾊﾟｰﾝ
　（　・д・） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>69

　　 ∩　ﾊﾟﾊﾟﾊﾟﾊﾟｰﾝ
　（　ﾟ∀ﾟ） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>70

　　 ∩　ﾊﾟﾊﾟﾊﾟﾊﾟｰﾝ
　（　ﾟ∀ﾟ） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>70

　　 ∩　ﾊﾟﾊﾟﾊﾟﾊﾟｰﾝ
　（　ﾟ∀ﾟ） )))☆　
　　　⊂彡☆)),_ゝ´） ←>>74

>>73
もっと・・・もっとだ香織・・・

　　　 _, ,_ ∩　 ﾊﾟﾊﾟﾊﾟｰﾝ
　（　・ω・） )))☆
　　　⊂彡 ☆))з´)>>76

>75
あと64回・・・

ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ＿ー￣＿￣）’, 　・　∴.'ｵﾗｵﾗ， ．. ∧_∧　∴.' ｵﾗ
ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵ∧　--＿- ― ＝￣　￣`:,　.∴）'ｵﾗｵﾗｵﾗ( >>76 ) ｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗｵﾗｵﾗｵ,　-''￣　　＝　＿＿――＝',　・,‘　ｒ⌒>ｵﾗ_／ ／ ・,‘ ｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗｵﾗｵ／　　＿-―　￣＝＿　　）":"　. 　’ |　ｙ'⌒　　⌒i .'　 ∴.' ｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗｵﾗ/　　　ノ　￣＿＝＿　　`　））,∴.　）　|　　／　　ノ ｜∴.'∴.' ｵﾗｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗｵ/　　, ｲ ）　　　　＿　）￣＝＿）　　　＿）, ー' 　／´ヾ_ﾉ ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗ/　 　_,　＼　　）＿　＿ ）＝　　＿）ｵﾗｵ／　,　　ノｵﾗｵ∴.'ｵﾗ∴.' ｵﾗｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗ|　　/ ＼　 `､　　　　　＝　＿）ｵﾗｵﾗ／　／ ／∴.'　∴.' ｵﾗｵﾗｵﾗｵｵﾗｵﾗｵﾗ
ｵﾗｵﾗｵﾗｊ　 /ｵﾗｵヽ 　|ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵ／　／　,'ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ
ｵﾗｵﾗ ／　ノｵﾗｵﾗ｛ 　|ｵﾗｵﾗｵﾗｵﾗｵﾗｵ／　 ／| 　| ｵｯｽｵﾗｺﾞｸｳｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ
ｵﾗ ／　／ｵﾗｵﾗｵﾗ|　（_ｵﾗｵﾗｵﾗｵﾗｵﾗ!､＿／ / 　 〉ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ
ｵﾗ `､＿〉ｵﾗｵﾗｵﾗｵー‐‐`ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵ|_／ ｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗｵﾗ



　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　糸冬

　　　 _, ,_ ∩　 ﾊﾟﾊﾟﾊﾟｰﾝ
　（　・ω・） )))☆
　　　⊂彡 ☆)),_ゝ´)>>78

あぼーんされてるヤツのせいで自虐になっちまったじゃねーか！

ﾌﾟｯ

　　　 _, ,_ ∩　 ﾊﾟﾊﾟﾊﾟｰﾝ
　（　・ω・） )))☆
　　　⊂彡 ☆)),_ゝ´)>>80

kai- ◆kai/rQnSpY 氏ねよ、、

何故私が死なねばならんのですかｗ

>>466
お前問題欲しいだけだろ。死ねよ。

誰に言ってる！
　　　 _, ,_ ∩　 ﾊﾟﾊﾟﾊﾟｰﾝ
　（　・ω・） )))☆
　　　⊂彡 ☆)),_ゝ´)>>84

　　　　|　　　　　ｺﾔﾂﾒ ﾊﾊﾊ　　　　ﾊﾊﾊ
　　　　|　　('A`)　　　　　 　 　('A`)
　　　／￣ﾉ( ﾍﾍ￣￣￣￣　ﾍ/ﾍﾉヽ　￣￣￣

あーじゅ

>>14
ero-ero w

>>31さん、これどうなるんだ？

<style type="text/css"><!--


style{
filter:alpha(opacity=0,finishopacity=70,style=2,startx=0,starty=0)　
}

--></style>

body { line-height:30px;}
p { text-indent:1em; }

font-color: 12px

>>1 { display : none; }

>>1:after { content: '氏ね;' }

どうしてこう糞スレばっか踏むんだ俺は…＿|￣|○

>>94
糞スレ踏んで、スルーできずに書き込んでしまうような頭だからだろうね。

>95
俺もオマエも>94もな…(ｗ

>>96
糞スレだとは思ってないんですが(w

cssｽﾚは糞ｽﾚじゃないですよね。ckzqGoABさん。

　

神が100get

あほや

こんなcssファイル初めて見たw
ttp://akill.livedoor.biz/site.css

みんな起きてるー?

おはようさん

おはよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

>>1-105
/* てゆーか覗き見ないで
死ねば？ */

頭金谷佐原

<li>をブロック化しfloatで横に並べてメニューリンクなどにする
table見たいな物は作れるし文章構造的にも綺麗

floatはどうもな。

ULのLIってブラウザによって
マージンとパディングの解釈違うよね。
あれってどっちが正しいの？

それ調整すんのムカツクよね

>>1-111 { display : none; }

float使った段組手法はW3Cヲタに好まれるｗ

universal.cssって中に機種依存しない程度のCSSを書いて

IE.css　NN.css　Opera.css　Text.css
というファイルにそれぞれ機種依存するソースを書いておく

んでもってcssselect.cgiと言うファイルを作ってその中では
まずuniversal.cssを読み込んでその内容を出力
ユーザーエイジェントによってそれぞれ対応するcssを読み込んで出力するように書いておく

HTMLでは外部ＣＳＳにcssselect.cgiを設定してやれば
「全てのブラウザで同じように表示する」事は難しいかもしれないが
結構簡単に「ブラウザによってデザインが崩れる」事は無くなるかもしれない

あんまり文章書いてないので日本語としておかしい部分はご了承下さい
アマチュアの浅知恵ですので、実際には使い物にならないかもしれません
(最低でも3つCSSを書かなければなりませんし、OperaのデフォルトのユーザーエイジェントはMSIE 6.0ですし)

>>114
UAごとの読み込みバグを利用して振り分けてしまうのが確実だし一般的のようですが
CGIを使ってやった場合のメリットは何でしょうか？
http://www.dithered.com/css_filters/css_only/index.php
http://www.dithered.com/css_filters/html_only/index.php

あげ

>>115
一般的だろうけど開発の止まったブラウザでもない限り確実かどうかは疑問だなあ。
所詮バグだし。
本来はCSSの仕様に実装の有無に応じて振り分ける機能があってほしいんだが。

>>512
楽しんでこいよ！

ｗｗｗｗ

>>117
対応していないプロパティは無視されるんだから
問題は対応がバグッてることでしょ。

おお、こんなスレあったんだ。CSSハックや画像置換なんかのちょっとダーティな
テクニックについて情報交換・集積できるスレがあったらいいなと思ってたとこだ。
活性化させてもいいかしらん。

まずは画像置換テクニックについて。定番のFIR, LIR, PIR。詳しくは以下。
http://www.mezzoblue.com/tests/revised-image-replacement/

FIR　古典的テクニック。置換したい要素の内容をspanでくくりdisplay:none、
　　　要素自体に背景指定。スクリーンリーダに非対応、コード書き足しが必要。
　　　画像オフ/CSSオン環境に対応不可。
LIR　要素のheightを0、padding上部を表示したい画像サイズにして
　　　要素自体をoverflow: hidden。スクリーンリーダ対応。追加コード不要。
　　　IE5対応のためにボックスモデルハック必要。画像オフ/CSSオン環境に
　　　対応不可。
PIR　要素にtext-indent: -100em;など大きい値やマイナス値を指定して
　　　画面外に追い出す。近年主流になっていたテクニックだが、Fx1.5以降で
　　「点線ぴろーん」問題が発生する。overflow: hiddenすれば解決するが
　　　画像オフ/CSSオン環境に対応不可。

他スレでも最近書いた、ul/liを使ったCSSベース・ナビゲーションバーの作り方に
ついて。横並べのときはliにfloatをかけたり、display:inlineにしていく手法が
一般化してる。 具体的なCSSコードの書き方については、下記のListamaticに
ほぼあらゆるパターン（水平型・垂直型・画像置換コミなど）が集約されている。
http://css.maxdesign.com.au/listamatic/

知ってる人には常識だろうけど、まあTipsコレクションということで。

あと、上でも出てるけど、ブラウザごとにCSSファイルのimportを振り分けたり
読み込まれる要素値を替えるためのCSSハックのまとめリスト。重宝。
http://www.dithered.com/css_filters/css_only/index.php

ダーティネタの定番、角丸ブロックの表現もまとめとく。

一番多いのが4隅に画像4つを配置していく方法。以下が割とわかりやすい。
html側には4隅の背景指定を行うために4つの余剰コード（以下ではdiv2つ
＋span2つ）を盛り込まなければならない。
http://digibot.jp/blog/archives/2004/12/post_55.html

こちらはbefore/afterを使ってhtmlコード側の入れ子を解消した発展系。
ただしIE非対応。
http://color.sub.jp/Layout/Sample.html

非画像系はspanなどを使って要素サイズを擬似的に縮め、全体として丸く
見せるアプローチ。具体的な方法については以下がよくまとまっている。
http://garage.mods.jp/ex/css-circle/

javascriptを使うタイプも。安定したレンダリングが得られ、htmlコードにも
入れ子divは発生しない。8方向に画像を配置することから「Octopus Engine」
と命名されている。
http://www.dragon-labs.com/articles/octopus/

さらにjavascriptを使い画像不使用のバージョンも。「Nifty Corners」。
http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

今日もネタ投入。「min-width」属性をサポートしてないIEでも、Fxなどで
{width:80%; min-width: 300px} とやるときのように「最低幅指定つきの
リキッドブロック」を実現する方法の紹介。

divを2重掛けして、外側divの右か左のborderに最低幅に設定したい値を
px/em指定、内側divの右か左のpaddingに同じ値を「マイナスで」指定、
という目ウロコのアプローチ。この説明だけでは理解不能だろうけれど、
実際のwebページの図をじっくり見ればその原理がわかる。
http://www.cssplay.co.uk/boxes/minwidth.html
http://www.webreference.com/programming/min-width/

そのアプローチに丁寧なブラウザ振り分けハックを組み合わせ、「理論上は
動作します」だけでなく、実用レベルまで引き上げてある労作。作者は、
病的領域に片足突っ込んだ怪しいCSSテクニックを多数開発しているStu Nicholls。

良スレ発見。
って誉めるだけじゃあれなんで、ネタ投下するか…

p:after {content: "\@hage.jp";}
<p>hoge</p>

メアド表示をこうすると、メアド収集ロボ対策になる。
IE非対応なのと、コピペできないのがアレだけどね。

>>126
CSSが適用されないユーザエージェントはどうなる？
ちと困るだろｗ

>>127
あ、そうか。だめだこりゃ。

>>121-125
乙！
それじゃあ自分も…

* 言語に応じて引用符を変更

q:before { content: open-quote; }
q:after { content: close-quote; }
q:lang(ja),
*:lang(ja) > q {
quotes: "「" "」" "『" "』";
}
q:lang(en),
*:lang(en) > q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
q:lang(fr),
*:lang(fr) > q {
quotes: "\00AB" "\00BB" "\2039" "\203A";
}
ネタ元：http://hp.vector.co.jp/authors/VA022006/css/generate.html#quotes

それと定番中の定番だが段組レイアウトも書いておこう

* HTMLソース
<div id="container">
<div id="boxA">左側</div>
<div id="boxB">右側</div>
</div>

* 左右ともに固定（Type-A）
コンテナボックスの横幅600px、左200px、右400px
#container { width: 600px; }
#boxA { float: left; width: 200px; }
#boxB { float: left; width: 400px; }
・ボックスのサイズは固定
・ウィンドウ幅が600px以下だと横スクロールバーが出る

* 相対値（Type-B）
コンテナボックスの幅100%、左20%、右80%
#container { width: 100%; }
#boxA { float: left; width: 20%; }
#boxB { float: left; width: 80%; }
・ボックスのサイズは可変
・ウィンドウ幅を縮めると左側が狭くなりすぎる

* 左側のみ固定（Type-C）
#boxA { float: left; width: 200px; }
#boxB { margin-left: 200px; }
・ウィンドウ幅を縮めると右側だけが縮む

* コンテナボックスを下まで伸ばす
<div id="container">
<div id="boxA">左側</div>
<div id="boxB">右側</div>
<div id="boxC">下側</div>
</div>
#boxC { clear:both; }
・定番の方法
・下側にボックスを設置しないと実現できない

* コンテナボックスを下まで伸ばす その２
#container { overflow: auto; }
・下側にボックスを設置しなくてよい
・MacIE5でスクロールバーが出るらしい

携帯用クレクレ

>>121-125
このテクニックなかなかすげーな。俺のCSSのスキルが一皮剥けた気がした。ﾑﾆｭ

>>125に感動した。
次更新する時に絶対使おうっと。

て

良スレ期待上げ

CSSスレはどしてこうも自演だらけなんだ？

>>121-125

ttp://www.amazon.co.jp/exec/obidos/ASIN/4798010928/

ｺﾁﾗにすべてのっていますが…

はいはい宣伝乙宣伝乙。
そんな糞みたいな本わざわざ買うまでもねえよハゲ。

最近ちらほら見るtext-indentでテキストをブラウザ領域から消す方法ってありなの？
別に仕様書にしたがった使い方しかしないってワケじゃないんだけど
gecko系ブラウザでリンクをアクティブにしたときに点線が消したテキストまで
伸びていってるし今後ブラウザがtext-indentの内容まで表示するようになったらやばくね？

日本語やばくね？

>>140
text-indentプロパティでブラウザ領域外から出すのは、ホームページ・リーダ（HPR）に配慮（正しくは泣き寝入り）しているからだ。
仕様書を見るとdisplayプロパティは視覚的ユーザエージェントのみで有効と定義されており、ホームページ・リーダのようなスクリーンリーダは「speak: none」で読み飛ばすことができる。
しかしホームページ・リーダは「display: none」で読み飛ばしてしまう。

ちなみにホームページ・リーダ3.01以降ではこのバグは修正されている

難しいとこですね。text-indentなどで画面外にすっ飛ばすPhark法は
画像置換テクニックのなかでは一番安定してて、なおかつ冗長性のない
きれいなタグが書ける手法だったので。FireFox1.5から点線問題が
出るようになって、また海外のCSSコミュではあれこれと模索が始まって
いるようです。

>>141
文才が無いから（ｒｙ

>>142
何かに特化した手段をとったことで
別の場所で問題が起こるのは解決にはならないね。

そもそも問題視するるかどうか線引きが個々に違うの問題だが・・・

>>143
それなりに確立された方法で大手企業サイトでも
多くみるようになったので自分でも実用化しようと思って調べたところ
問題視する記事を数多く見たので素直に画像貼り付けたほうよさそうかな？

そうですね、そもそも画像置換の意義とは何なのかということを考えてみると
html側ソースをmedia typeを問わない非常に共用性の高いものにできる、
ということの1点に尽きるように思うんです。<h1>要素をテキストにして
CSSで画像置換すれば、携帯電話からはテキストに見え、CSS対応ブラウザ
からは画像に見える。画像を直埋めしちゃうと携帯電話でばかでかい画像が
縦に並ぶことになりますから。

結局、画像置換系の大問題として、CSSオン／画像オフ・シナリオに
対応できないものがほとんどだということがあり（文字の上にz-index使って
画像を重ねるハックはこれを回避できますが、画像を載せるための
ゴミspanが必要になってしまうので、ダーティです）、現時点で積極的に
使う意義がどれぐらいあるか、というと微妙なところかもしれません。
handheldはhandheldで書いたほうがエレガントなのかも。

ただ海外ではIRという名前で確立してて、情報共有が進んでいる手法なのに
日本だと「」
名称自体もあまり浸透していない傾向があるように思ったので
このスレではmezzoblueなどを紹介してみました。

<h1>
<img src="..." alt="代替テキスト" ... />
</h1>

これでいーじゃん。
解決。

>>145
CSS解除したときにプレーンな構造のテキストサイトになるのは気持ちいいし
将来的に携帯のCSS対応が進んだ場合、htmlはまったく同じで
handheldのCSSを書き分けるだけで全部に対応できる、というのはエレガントだなって思う。
でも現状だと積極的に使うほどの利点はないかも。


>>146
それは解決というよりも、画像置換が解決しようとした課題の解決には
意味がないんだっていう宣言でしかないと思う。それはそれでひとつの見識なんだけど
画像置換したい人のニーズには応えてない。

>>142
自分はvisibility:hidden;でやってるんだけどこれだとどうなるんだろう

>>148
スクリーンリーダによって挙動が違うと聞いたことがあるよ。

調べてきた。
http://www.alistapart.com/articles/fir/
によると：

Hal version 5.20
　　　　　　　　　　　　　none…×　hidden…○

IBM Home Page Reader 3.02
　　　　　　　　　　　　　none…×　hidden…×

Jaws (4.02, 4.50, 5.0 beta)
　　　　　　　　　　　　　none…○　hidden…○

OutSpoken 9
　　　　　　　　　　　　　none…×　hidden…×

Window-Eyes 4.2
　　　　　　　　　　　　　none…×　hidden…×

×は非読み上げ、○は読み上げね。というわけでhiddenじゃダメみたい。
もちと詳しい比較がここ↓にある。

http://www.access-matters.com/screen-reader-test-results/

>>148
視覚的に見えなくなるだけで情報としてそこに存在するのであいつはきっと読み上げるでしょう

javascriptで画像ぶっこむってのはどうなんすか？
innerHTMLとかで

そのへんも結構開拓されてますね。"javascript image replacement"で
ぐぐるといろいろ出てくると思います。そのなかでも古典の類がこれかな。
http://www.alistapart.com/articles/javascriptreplacement/

あっ、既に開拓されてるんですね。
試しに作ってみたっす。
http://www.geocities.jp/uikesumitama/sample/listrollover/index.html
こんな感じ？なんか違うか・・・

お、はやい。Safari2.0.3でレンダリング・動作とも良好です。
後でソース見てみよっと。

>>150
感謝です、読んでくれないケースのが多いのか…

>>140, >>143
outline: 0; を追加するといいよ。
ttp://beerboy.org/article.php?id=153

うわ、知らなかった！　大感謝です。
じゃ画像置換はPhark法＋outline無効化で大安定かー。


…このスレ、なにげに名スレなのでは？

outlineはユーザビリティとして残しておいたほうがいいんだが。
戻ってきて、自分がどこにいるかわかるし、
クリックした範囲もわかるし、必要があるから表示されてるのに。
ずっとoverflow:hiddenのほうがいい。

Phark法安定してていいんだが、ie5考えるとspan使わなくちゃいけないケースがあるのが目下の悩みの種
以下のような場合でie5対応する場合はdiplay;none使うのが好ましいんだろうか？？

<u>
<li><span>ここを画像にしたい</span>
<ul>
<li>hoge01</li>
<li>hoge02</li>
</ul>
</li>
</ul>

いつからここは質問スレになったんだよ

まとめがほしい

>162
はいよ。

もう終わり？

急浮上！！

｡･ﾟ･(ﾉД`)･ﾟ･｡

>>160
2個目のulに画像分の上paddingとネガチブマージン（適宜z-indexとposition:relative）でOK

終わり？

ALAに載っていた方法のqの引用符のふらせ方。（JavaScript非使用）
W3Cの仕様では、引用符はqタグの中にふるのが非推奨なので、これは良いらしい。

【HTML】
“<q>引用文</q>” #IE対策

【CSS】
q:before, q:after{
content: "";#IE以外のブラウザでふられる引用符を消す。
}

ただCSSオフのFireFoxなんかだと、引用符がダブルでふられるのがアレだが…

あげ

>>169
凄く今更かもしれんが、物凄く誤解してる臭い。

>視覚系ユーザエージェントは、Q要素の内容を、引用符で囲ってレンダリングするようにしなければならない。
>著者は、Q要素の開始点と終了点に引用符を置かないようにする必要がある。
>ユーザエージェントは、引用符を言語固有の方法(lang属性参照)でレンダリングする必要がある。
>多くの言語では、外側の引用と内側の(入れ子の)引用に対して、異なる引用の形式を採っており、
>ユーザエージェントはこれを考慮する必要がある。

だから自分で“”なんて書いてちゃNG。引用符を付けるのはUAの仕事。

だから仕事しないUAの代わりにやってやってるということなんじゃねーの？

お前は全然文章読めないのな。
UAが仕事をしてないので代りにやりました、なんてのはおせっかいか蛇足だっつってんのに。

それの何がわるいんだ？
多分厨ストリクタだろうけど、現実的に考えてUAが仕事しないんだからしょうがない。
仕事をしないUAの代わりの代案なんかいくらでもあるじゃん。
それこそCSSハックだって当てはまるし。

本物のバカか？
UA読んでJSでも使って書き出せ。HTMLに書くな。

>（JavaScript非使用）
Javascript OFF環境での話なのにJavascript使えと？ｗ
あと、Javascript(ちなみに、JSじゃJScriptと紛らわしいからｗ)を
使えないUAの場合も考えてあげてね（はあと
それに、Javascriptで書き出すのなんか否定されてないじゃんｗ
別にそうしたっていいってだけだし。

それと、Javascriptを使える環境で書き出せばいいって言ってるけど、
これじゃ貴方の望んでるものはみたせないよ？ｗ
Javascriptで書き出された後の状態で判断しないといけないからね。
書き出しちゃった時点でHTMLに書いてるのと同じ状態って事。
せめて、もうちょっと的確なツッコミしてほしいなぁ。

>Javascript OFF環境での話なのに

は？そりゃ169とお前の前提だろ？
誰が「Javascript OFF環境でもHTMLに書かずに動的に書き出せ」っつってんの？

>Javascript(ちなみに、JSじゃJScriptと紛らわしいからｗ)を
>使えないUAの場合も考えてあげてね（はあと

CSSを使えないUAの場合も考えてあげてね（はあと　←キモイ

>Javascriptで書き出された後の状態で判断しないといけないからね。
>書き出しちゃった時点でHTMLに書いてるのと同じ状態って事。

何が言いたいのかよくわからんのだが。誰がその「判断しないといけない」と決めたの？何を判断するの？
機械的に解釈するなら「書き出した時点で〜」でないと処理できないといけないのは当たり前だしな。

あと俺別にストリクタじゃないからな。仮想敵作って一所懸命のところ悪いが。
不要な文字列が並んでるのが気持ち悪いからやめれって言ってるだけだ。

>>177
UAのかわりに仕事がしたくて仕方がない人のことはほうっときなさいな.

クロスブラウザ対策を考える必要のないW3C原理主義に何を言っても無駄ってことで。

引用符なんてあってもなくてもいいじゃん。
蛇足か原理主義か知らんがスレ違いかどうかもわからんのか？

実際見てる人にはどうでも良いことだ

>>177
>（JavaScript非使用）
だから、JavascriptがOFFの場合の話じゃん。
その程度も読めないの？
別にJavascriptを禁止もしてないし、ONでいい場合はJavascriptで書き出す選択肢があるってだけ。
勝手にJavascriptONの状態っていう風に前提を変えて話してるのはお前さん。

>誰がその「判断しないといけない」と決めたの？何を判断するの？
strictスレ行けば？
Javascriptで書き出した状態で正しいHTMLになってないといけないって結論だから。
Javascriptで書き出せばなんでも仕様に忠実って方がおかしいだろ。
仕様を追求するならそこまでやればいいのに。
HTMLに書くな、でもJavascriptで記述するなら良いなんて、
適当でその場しのぎな事言わずにさ。

まだ続けるの？180にスレ違いって言われたのわからないの？

>>182
問題点はJSの有無じゃなくて、>>169が
>W3Cの仕様では、引用符はqタグの中にふるのが非推奨なので、これは良いらしい
とW3Cの仕様を誤解しているという点だと思われ。

仕様として明言されてる非推奨と、そのための要素があるからそちらを使えという違いじゃね

>この要素をサポートしていないブラウザが多いため、
>q要素としてマークアップしても表示上違いが分からないかもしれません
>（本文中の引用箇所は、q要素と合わせて「」などを使っておく手もありますが、
>LynxやNetscape6のように前後に「"」が付けられるブラウザの場合は
>かえってややこしくなります）。あなたのブラウザでは、
>q要素の部分はどのように表示されているでしょうか？

ストリクタが大好きな神崎もこう言ってるぐらいだし、
それ以前にユーザビリティやアクセシビリティを考えると、
足りない引用符を補うこと自体が悪いとは思えん

神崎たんは純粋なストレクタとは認められてないと思うが。
あの人は現実との妥協の具合がうまい人であって。
大体引用符でユーザビリティとアクセシビリティ両方が満たせると思ってるおまえは変。

ストレクタ・・・・ストレッチのようだ。
からだやわらかい神崎たん。

ナァーッハッハッハァー！
ここにストレッチパワーが溜まってきただろぅ！！

まぁ無理にJS切ったIEに対応させようと思ったら
<q><span>文章</span><q>でpaddingで背景画像かね。
これも切ってるなんて前提だったら笑うしかないがｗ

IEってインラインのpadding対応してたっけ。

>>185
それの善悪や正否と、>>169が「それが仕様的に認められてる」ということはまた別。
XHTML1.1でIEのためにtext/htmlで出力するようなもの。

対応してるぞ
IE5はダメ

Opera6もかな？こっちは未確認

IE5で、spanでもdisplay: blockにすれば行けたと思う

...ってインライン前提の話か。すまん

話の本質がわからない連中ばっかり

CSS Tipsいっぱいたくさんありますあります
http://del.icio.us/search/?fr=del_icio_us&p=css+tips&type=all

空白を作るのに<br /><br /><br /><br />等と<br />を連続させてはいけない。
<div style="margin-bottom: 50px;">123456</div>とすべし。
このmarginは<span>では動かない。

俺は

/* 本文下と署名上の間に空白を作成 */
address{ margin-top:50px; }

こうした。

>>196
お前、いろんな意味で天才だなｗ

>>196
displayって知ってる？

覚え書き

min-widthが反映されず、指定した数字以上の幅に成ってしまう場合、
word-breakのkeep-allをbreak-allに変えると指定が反映される。


>>198　display
調べたけど使い道が思い付かない。

>>199
>>196で
＞このmarginは<span>では動かない。

と書いてるが、<span>に対してdisplay:blockを指定すればおｋ

lightboxをJSを使わずcssのみで作ることができる。
解説は出来ないのでサンプルソース
ttp://www.cssplay.co.uk/menu/lightbox.html
ただしこのlightboxは画像の縦横が全て統一された状態でしか使う事できない。
汎用性は低め。

hail2uの人がやってたlightbox云々以前に気がする

日本語でおｋ

それ、ただのCSSメニューの画像版じゃん。

>>200　display:block

わざわざ有り難う。でもそれは素直に<div>で良いんじゃないかと思ってしまう。

>>205
もう少し想像力を鍛えたほうが良い。
inline要素内のある部分だけマージンを付けたい場合などはdivは使えないだろ。
divが使えるならそうすれば良いが、使えない場合などいくらでも出てくる。

>>206
明らかにレベル低い人の相手はしなくてもいいんじゃ

>>207
そう言えばそうだね。ｽﾏｿ…orz

結局、レガシーブラウザを全て切り捨てる場合は
どうするのがベストなの？

/* レガシーブラウザお断り！ */


つーか、「レガシーブラウザ」「全て切り捨て」の定義を書け。

>>209
誰も見たことがない、遠い未来の方法で記述する。

Apple.com のトップナビにあるような
height: 0; にして
padding-top: n; そして
overflow: hidden; でできる画像置き換えは
最初『おぉ、凄ぇ〜！』と思ったけど
IE6 は対応していないんだね。

Apple.com はどうやって IE6 に対応させているの？
ソースみても分からなかったので、教えてくださいまし。

>>212

自己レス。
ゴメン、できた。

自己解決したんならその内容を書いてください

>>214

過去ログです。 >>121

>>210
ゴメンナサイ。
Mac版を含むIE5.x以下全て・Netscape 4.x以下全て（4〜5世代？）で
CSSを読み込ませず、htmlだけを表示させる方法を教えてください。
お願いします。

ｇｇｒｋｓ

>>216

@import "/stylesheet/style.css"/**/;

これでOKだったと思うけど、検証はしていません

>>218
ありがとうございます、助かりました。
もしお手数でなければ、その情報を説明しているページを教えて頂きたいのですが。

そこまで情報でてんだから
「@import style.css」
でぐぐるとかしろよ。
他力本願にも程がある。

209とか氏ねばいいのに

後日、不審に思った友人（209に友人はいなかった）がアパートを訪ね、死後5日目の腐乱した209を発見したという。

>不審に思った友人（209に友人はいなかった）

の矛盾が気になって最後まで読めず。

つまらん

フロートで横並びにしたボックスの高さをそろえる
http://metalize.liveonstyle.com/wp-content/uploads/2007/08/css-columns-padding-revised.html

コンテナブロックをoverflow: hidden;にして、
フロートにpadding-bottom: 32768px;margin-bottom: -32768px;を指定。

よく思いつくなー。

うn

>>13
ワロタ

>>225
その手があったか

>>228
ページ内のアンカーリンクへの直リン表示がぶっ壊れるなど、
若干問題があるらしいです。コリスのコメント欄でのやりとり参照。

http://coliss.com/articles/build-websites/operation/css/558.html

幅固定サブカラムつきのリキッドレイアウトなどに使われる
「padding+ネガティブmargin+overflow:hiddenの組み合わせ」を
縦方向に応用する、という発想自体は非常に面白いのですが、
実装としては難ありというところですかねー。

最近、やっとtableのほうが良いって分かった
cssは文字数や画像が増えると異常に激重

いや、tableの方がCPUの負担かかる（つまり重い）から

>>231
PC初心者かな？
そりゃーtableを何重にも入れ子にすれば重くなるけど、普通の使い方では絶対的にtableのほうが軽い

tableだと初心者でも簡単に保守出来る
そもそも、ゼロからでも出来る

Webコンテンツ業者がボッタくれなくなるｗ
全てはそこに帰結

HomePage BuilderがCSSレイアウト対応しちゃったしねぇ・・・

売れているみたいだ>ホームページビルダー

cssレイアウトはもうすぐ終わる
HTML5でnav header footerなど対応し、レイアウトが簡単になる

ホームページ作成ソフト作ってる人も日進月歩で大変だろうなと思うよ

>>236
HTML5未対応のIE8が標準なWindows7の時代が終わるまでCSSレイアウトは終わらんよ

異常に糞重いサイトにはcssを使っているね
cssオフにしたらサクサクでﾜﾛﾀ

センスが悪いデザイナーが増えたよな
読みにくくて話にならない
sleipnirなら一瞬でcssをoffに出来る

cssレイアウトからHTMLレイアウトになったら、Webデザイナーの肩身が一層狭くなる
と思っていたけど、そうでもないな

一般人にはHTMLなんて呪文でしかない

創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

>>240
そんなON/OFFくらいどのブラウザでも出来る

>>244
状況に応じて、サイトによって複数cssを使い分けたり出来る？
股、マウスジェスチャーなどで、任意のcssに一瞬で変えられる？

CSSの整理に便利なツール作ってみた。良ければ使って下さいー！
http://magonote-tools.com/ja/tools/css

table col{text-align:center;}
ができない問題のスマートかつスタンダードな解決方法は、
結局全部のtdにclassを割り当てていくってことでいいの？