5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

CSS Tips コレクション

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

144 :Name_Not_Found:2006/04/12(水) 19:20:27 ID:???
>>141
文才が無いから(ry

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

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

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

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

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

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

146 :Name_Not_Found:2006/04/12(水) 19:55:29 ID:???
<h1>
<img src="..." alt="代替テキスト" ... />
</h1>

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

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


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

148 :Name_Not_Found:2006/04/12(水) 22:03:03 ID:???
>>142
自分はvisibility:hidden;でやってるんだけどこれだとどうなるんだろう

149 :Name_Not_Found:2006/04/12(水) 22:40:45 ID:???
>>148
スクリーンリーダによって挙動が違うと聞いたことがあるよ。

150 :149:2006/04/12(水) 22:55:28 ID:???
調べてきた。
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/

151 :Name_Not_Found:2006/04/12(水) 22:57:56 ID:???
>>148
視覚的に見えなくなるだけで情報としてそこに存在するのであいつはきっと読み上げるでしょう

152 :Name_Not_Found:2006/04/12(水) 23:15:56 ID:???
javascriptで画像ぶっこむってのはどうなんすか?
innerHTMLとかで

153 :149:2006/04/12(水) 23:26:59 ID:???
そのへんも結構開拓されてますね。"javascript image replacement"で
ぐぐるといろいろ出てくると思います。そのなかでも古典の類がこれかな。
http://www.alistapart.com/articles/javascriptreplacement/

154 :Name_Not_Found:2006/04/13(木) 01:02:40 ID:???
あっ、既に開拓されてるんですね。
試しに作ってみたっす。
http://www.geocities.jp/uikesumitama/sample/listrollover/index.html
こんな感じ?なんか違うか・・・

155 :Name_Not_Found:2006/04/13(木) 01:23:06 ID:???
お、はやい。Safari2.0.3でレンダリング・動作とも良好です。
後でソース見てみよっと。

156 :Name_Not_Found:2006/04/13(木) 01:37:55 ID:???
>>150
感謝です、読んでくれないケースのが多いのか…

157 :Name_Not_Found:2006/04/13(木) 23:58:00 ID:???
>>140, >>143
outline: 0; を追加するといいよ。
ttp://beerboy.org/article.php?id=153

158 :Name_Not_Found:2006/04/14(金) 00:04:43 ID:???
うわ、知らなかった! 大感謝です。
じゃ画像置換はPhark法+outline無効化で大安定かー。


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

159 :Name_Not_Found:2006/04/14(金) 00:55:48 ID:???
outlineはユーザビリティとして残しておいたほうがいいんだが。
戻ってきて、自分がどこにいるかわかるし、
クリックした範囲もわかるし、必要があるから表示されてるのに。
ずっとoverflow:hiddenのほうがいい。

160 :Name_Not_Found:2006/04/14(金) 07:15:10 ID:???
Phark法安定してていいんだが、ie5考えるとspan使わなくちゃいけないケースがあるのが目下の悩みの種
以下のような場合でie5対応する場合はdiplay;none使うのが好ましいんだろうか??

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

161 :Name_Not_Found:2006/04/14(金) 13:09:13 ID:???
いつからここは質問スレになったんだよ

162 :Name_Not_Found:2006/04/19(水) 01:24:16 ID:???
まとめがほしい

163 :Name_Not_Found:2006/04/19(水) 08:00:15 ID:???
>162
はいよ。

164 :Name_Not_Found:2006/05/01(月) 18:51:27 ID:???
もう終わり?

165 :Name_Not_Found:2006/07/15(土) 18:34:40 ID:K4hpNrTP
急浮上!!

166 :Name_Not_Found:2006/07/23(日) 13:14:43 ID:JbfMguqb
。・゚・(ノД`)・゚・。

167 :Name_Not_Found:2006/08/01(火) 12:17:43 ID:???
>>160
2個目のulに画像分の上paddingとネガチブマージン(適宜z-indexとposition:relative)でOK

168 :Name_Not_Found:2006/08/19(土) 17:14:47 ID:???
終わり?

169 :Name_Not_Found:2006/10/12(木) 04:35:25 ID:???
ALAに載っていた方法のqの引用符のふらせ方。(JavaScript非使用)
W3Cの仕様では、引用符はqタグの中にふるのが非推奨なので、これは良いらしい。

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

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

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


170 :Name_Not_Found:2006/11/23(木) 03:15:35 ID:???
あげ

171 :Name_Not_Found:2006/11/26(日) 07:37:54 ID:???
>>169
凄く今更かもしれんが、物凄く誤解してる臭い。

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

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

172 :Name_Not_Found:2006/11/26(日) 11:25:54 ID:???
だから仕事しないUAの代わりにやってやってるということなんじゃねーの?

173 :Name_Not_Found:2006/11/26(日) 11:30:48 ID:???
お前は全然文章読めないのな。
UAが仕事をしてないので代りにやりました、なんてのはおせっかいか蛇足だっつってんのに。

174 :Name_Not_Found:2006/11/26(日) 13:37:44 ID:???
それの何がわるいんだ?
多分厨ストリクタだろうけど、現実的に考えてUAが仕事しないんだからしょうがない。
仕事をしないUAの代わりの代案なんかいくらでもあるじゃん。
それこそCSSハックだって当てはまるし。

175 :Name_Not_Found:2006/11/26(日) 14:16:45 ID:???
本物のバカか?
UA読んでJSでも使って書き出せ。HTMLに書くな。

176 :Name_Not_Found:2006/11/26(日) 14:29:45 ID:???
>(JavaScript非使用)
Javascript OFF環境での話なのにJavascript使えと?w
あと、Javascript(ちなみに、JSじゃJScriptと紛らわしいからw)を
使えないUAの場合も考えてあげてね(はあと
それに、Javascriptで書き出すのなんか否定されてないじゃんw
別にそうしたっていいってだけだし。

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

177 :Name_Not_Found:2006/11/26(日) 14:40:57 ID:???
>Javascript OFF環境での話なのに

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

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

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

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

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

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

178 :Name_Not_Found:2006/11/26(日) 14:45:10 ID:???
>>177
UAのかわりに仕事がしたくて仕方がない人のことはほうっときなさいな.

179 :Name_Not_Found:2006/11/26(日) 14:57:13 ID:???
クロスブラウザ対策を考える必要のないW3C原理主義に何を言っても無駄ってことで。

180 :Name_Not_Found:2006/11/26(日) 15:05:02 ID:???
引用符なんてあってもなくてもいいじゃん。
蛇足か原理主義か知らんがスレ違いかどうかもわからんのか?

181 :Name_Not_Found:2006/11/26(日) 19:48:07 ID:???
実際見てる人にはどうでも良いことだ

182 :Name_Not_Found:2006/11/27(月) 01:31:45 ID:???
>>177
>(JavaScript非使用)
だから、JavascriptがOFFの場合の話じゃん。
その程度も読めないの?
別にJavascriptを禁止もしてないし、ONでいい場合はJavascriptで書き出す選択肢があるってだけ。
勝手にJavascriptONの状態っていう風に前提を変えて話してるのはお前さん。

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


183 :Name_Not_Found:2006/11/27(月) 07:03:53 ID:???
まだ続けるの?180にスレ違いって言われたのわからないの?

184 :Name_Not_Found:2006/11/27(月) 10:07:04 ID:???
>>182
問題点はJSの有無じゃなくて、>>169
>W3Cの仕様では、引用符はqタグの中にふるのが非推奨なので、これは良いらしい
とW3Cの仕様を誤解しているという点だと思われ。

185 :Name_Not_Found:2006/11/27(月) 13:59:04 ID:???
仕様として明言されてる非推奨と、そのための要素があるからそちらを使えという違いじゃね

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

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

186 :Name_Not_Found:2006/11/27(月) 22:15:29 ID:???
神崎たんは純粋なストレクタとは認められてないと思うが。
あの人は現実との妥協の具合がうまい人であって。
大体引用符でユーザビリティとアクセシビリティ両方が満たせると思ってるおまえは変。

187 :Name_Not_Found:2006/11/27(月) 22:16:27 ID:???
ストレクタ・・・・ストレッチのようだ。
からだやわらかい神崎たん。

188 :Name_Not_Found:2006/11/27(月) 22:53:12 ID:???
ナァーッハッハッハァー!
ここにストレッチパワーが溜まってきただろぅ!!

189 :Name_Not_Found:2006/11/28(火) 00:06:17 ID:???
まぁ無理にJS切ったIEに対応させようと思ったら
<q><span>文章</span><q>でpaddingで背景画像かね。
これも切ってるなんて前提だったら笑うしかないがw

190 :Name_Not_Found:2006/11/28(火) 01:05:50 ID:???
IEってインラインのpadding対応してたっけ。

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

191 :Name_Not_Found:2006/11/28(火) 01:11:16 ID:???
対応してるぞ
IE5はダメ

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

192 :Name_Not_Found:2006/11/28(火) 10:21:22 ID:???
IE5で、spanでもdisplay: blockにすれば行けたと思う

193 :Name_Not_Found:2006/11/28(火) 10:24:27 ID:???
...ってインライン前提の話か。すまん

194 :Name_Not_Found:2006/11/28(火) 10:56:52 ID:???
話の本質がわからない連中ばっかり

195 :Name_Not_Found:2006/11/28(火) 20:54:15 ID:???
CSS Tipsいっぱいたくさんありますあります
http://del.icio.us/search/?fr=del_icio_us&p=css+tips&type=all

196 :無なさん:2007/02/19(月) 00:01:11 ID:???
空白を作るのに<br /><br /><br /><br />等と<br />を連続させてはいけない。
<div style="margin-bottom: 50px;">123456</div>とすべし。
このmarginは<span>では動かない。

俺は

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

こうした。

197 :Name_Not_Found:2007/02/19(月) 17:44:07 ID:???
>>196
お前、いろんな意味で天才だなw

198 :Name_Not_Found:2007/02/22(木) 03:56:00 ID:???
>>196
displayって知ってる?

199 :無なさん:2007/03/30(金) 16:47:05 ID:???
覚え書き

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


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

200 :Name_Not_Found:2007/03/30(金) 18:02:06 ID:???
>>199
>>196
>このmarginは<span>では動かない。

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

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

202 :Name_Not_Found:2007/04/10(火) 19:44:12 ID:???
hail2uの人がやってたlightbox云々以前に気がする

203 :Name_Not_Found:2007/04/10(火) 20:52:26 ID:???
日本語でおk

204 :Name_Not_Found:2007/04/11(水) 21:07:36 ID:???
それ、ただのCSSメニューの画像版じゃん。

205 :無なさん:2007/05/09(水) 23:35:29 ID:???
>>200 display:block

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

206 :Name_Not_Found:2007/05/10(木) 14:53:22 ID:OJycdrA3
>>205
もう少し想像力を鍛えたほうが良い。
inline要素内のある部分だけマージンを付けたい場合などはdivは使えないだろ。
divが使えるならそうすれば良いが、使えない場合などいくらでも出てくる。

207 :Name_Not_Found:2007/05/10(木) 14:56:55 ID:???
>>206
明らかにレベル低い人の相手はしなくてもいいんじゃ

208 :Name_Not_Found:2007/05/10(木) 15:04:11 ID:???
>>207
そう言えばそうだね。スマソ…orz

209 :Name_Not_Found:2007/08/30(木) 01:59:36 ID:???
結局、レガシーブラウザを全て切り捨てる場合は
どうするのがベストなの?

210 :Name_Not_Found:2007/08/30(木) 09:40:29 ID:???
/* レガシーブラウザお断り! */


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

211 :Name_Not_Found:2007/08/30(木) 11:05:04 ID:???
>>209
誰も見たことがない、遠い未来の方法で記述する。

212 :Name_Not_Found:2007/08/30(木) 19:24:47 ID:???
Apple.com のトップナビにあるような
height: 0; にして
padding-top: n; そして
overflow: hidden; でできる画像置き換えは
最初『おぉ、凄ぇ〜!』と思ったけど
IE6 は対応していないんだね。

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

213 :Name_Not_Found:2007/08/31(金) 02:36:56 ID:???
>>212

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

214 :Name_Not_Found:2007/08/31(金) 02:59:17 ID:???
自己解決したんならその内容を書いてください

215 :Name_Not_Found:2007/08/31(金) 03:00:57 ID:???
>>214

過去ログです。 >>121

216 :209:2007/08/31(金) 03:18:28 ID:???
>>210
ゴメンナサイ。
Mac版を含むIE5.x以下全て・Netscape 4.x以下全て(4〜5世代?)で
CSSを読み込ませず、htmlだけを表示させる方法を教えてください。
お願いします。

217 :Name_Not_Found:2007/08/31(金) 04:25:11 ID:???
ggrks

218 :Name_Not_Found:2007/08/31(金) 08:17:02 ID:???
>>216

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

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

219 :209:2007/08/31(金) 15:33:06 ID:???
>>218
ありがとうございます、助かりました。
もしお手数でなければ、その情報を説明しているページを教えて頂きたいのですが。

220 :Name_Not_Found:2007/08/31(金) 16:46:39 ID:???
そこまで情報でてんだから
「@import style.css」
でぐぐるとかしろよ。
他力本願にも程がある。

221 :Name_Not_Found:2007/09/01(土) 11:47:41 ID:???
209とか氏ねばいいのに

222 :Name_Not_Found:2007/09/02(日) 22:16:17 ID:???
後日、不審に思った友人(209に友人はいなかった)がアパートを訪ね、死後5日目の腐乱した209を発見したという。

223 :Name_Not_Found:2007/09/03(月) 01:08:16 ID:???
>不審に思った友人(209に友人はいなかった)

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

224 :Name_Not_Found:2007/09/04(火) 02:40:38 ID:???
つまらん

225 :Name_Not_Found:2007/10/26(金) 20:11:50 ID:???
フロートで横並びにしたボックスの高さをそろえる
http://metalize.liveonstyle.com/wp-content/uploads/2007/08/css-columns-padding-revised.html

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

よく思いつくなー。

226 :Name_Not_Found:2008/02/28(木) 19:43:54 ID:lJ/Iqs6+
うn

227 :Name_Not_Found:2008/02/28(木) 20:13:50 ID:dYFqKI1I
>>13
ワロタ

228 :Name_Not_Found:2010/03/06(土) 18:28:39 ID:???
>>225
その手があったか

229 :m:2010/03/06(土) 21:01:38 ID:???
>>228
ページ内のアンカーリンクへの直リン表示がぶっ壊れるなど、
若干問題があるらしいです。コリスのコメント欄でのやりとり参照。

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

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

230 :Name_Not_Found:2010/05/04(火) 07:53:28 ID:???
最近、やっとtableのほうが良いって分かった
cssは文字数や画像が増えると異常に激重

231 :Name_Not_Found:2010/05/06(木) 22:21:25 ID:hmUMMZuF
いや、tableの方がCPUの負担かかる(つまり重い)から

232 :Name_Not_Found:2010/05/08(土) 16:12:11 ID:???
>>231
PC初心者かな?
そりゃーtableを何重にも入れ子にすれば重くなるけど、普通の使い方では絶対的にtableのほうが軽い

233 :Name_Not_Found:2010/05/10(月) 08:54:56 ID:???
tableだと初心者でも簡単に保守出来る
そもそも、ゼロからでも出来る

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

234 :Name_Not_Found:2010/05/18(火) 16:56:44 ID:???
HomePage BuilderがCSSレイアウト対応しちゃったしねぇ・・・

235 :Name_Not_Found:2010/05/22(土) 23:48:11 ID:???
売れているみたいだ>ホームページビルダー

236 :Name_Not_Found:2010/05/29(土) 07:31:01 ID:???
cssレイアウトはもうすぐ終わる
HTML5でnav header footerなど対応し、レイアウトが簡単になる

237 :Name_Not_Found:2010/05/29(土) 21:14:19 ID:???
ホームページ作成ソフト作ってる人も日進月歩で大変だろうなと思うよ

238 :Name_Not_Found:2010/05/30(日) 00:50:00 ID:???
>>236
HTML5未対応のIE8が標準なWindows7の時代が終わるまでCSSレイアウトは終わらんよ

239 :Name_Not_Found:2010/05/30(日) 06:30:11 ID:???
異常に糞重いサイトにはcssを使っているね
cssオフにしたらサクサクでワロタ

53 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)