link2336 link2337 link2338 link2339 link2340 link2341 link2342 link2343 link2344 link2345 link2346 link2347 link2348 link2349 link2350 link2351 link2352 link2353 link2354 link2355 link2356 link2357 link2358 link2359 link2360 link2361 link2362 link2363 link2364 link2365 link2366 link2367 link2368 link2369 link2370 link2371 link2372 link2373 link2374 link2375 link2376 link2377 link2378 link2379 link2380 link2381 link2382 link2383 link2384 link2385 link2386 link2387 link2388 link2389 link2390 link2391 link2392 link2393 link2394 link2395 link2396 link2397 link2398 link2399 link2400 link2401 link2402 link2403 link2404 link2405 link2406 link2407 link2408 link2409 link2410 link2411 link2412 link2413 link2414 link2415 link2416 link2417 link2418 link2419 link2420 link2421 link2422 link2423 link2424 link2425 link2426 link2427 link2428 link2429 link2430 link2431 link2432 link2433 link2434 link2435 link2436 link2437 link2438 link2439 link2440 link2441 link2442 link2443 link2444 link2445 link2446 link2447 link2448 link2449 link2450 link2451 link2452 link2453 link2454 link2455 link2456 link2457 link2458 link2459 link2460 link2461 link2462 link2463 link2464 link2465 link2466 link2467 link2468 link2469 link2470 link2471 link2472 link2473 link2474 link2475 link2476 link2477 link2478 link2479 link2480 link2481
トップページ > IT, Internet > もしブラウザで画像の読み込みが出来なかったらという杞憂

もしブラウザで画像の読み込みが出来なかったらという杞憂

もしCSSが、JavaScriptが、SSIが、HTMLやRSSすらも読み込めなかったら、という場合を考えねばね。

ずいぶん前の話になりますが、mixiのコミュニティ(たぶんWebデザイン関係)を読んでいたら、メニューボタンなどのロールオーバーをどう実装するかというトピックがありました。

「text-indent:-9999px;」でテキストを隠し、背景画像でそれらしく見せるという方法がありますが、主にSEOスパム的な意味合いでこの手法の是非をめぐっての議論になってました。

# 「text-indent:-9999px;」でググれば色々と出てきます。

で、SEOとはまったく別の次元で「もし画像表示をオフにしていた場合」とか「もしなんらかの理由で画像が読み込めなかった場合」というのを理由に、この手法は避けたほうがいいという意見もありました。その代わりにちゃんとimgタグとJavaScriptで画像を表示させると。

もし表示できなかった場合....それはまあその通りなんですが、特に僕なんかは絵を見てもらってなんぼだと思うので、俗に言うアクセシビリティの方面はすごく関心が薄いというか。その僕のケータイは外部CSSファイルを読み込めないのですが、そういう端末で見た場合にどっちが良いかというと「text-indent:-9999px;」の方なんですよね。そもそもCSS読まないからただのリストとして表示される。

対して画像を貼っちゃった場合、メニューのボタン画像を表示するだけでメモリ食っちゃって、肝心の他の画像が表示できなかったりするんですよね。

まあケータイ向けのサイトはまた別に作れという話でもありますが。

でもこれってすごく面白い観点。
「もし画像表示をオフにしていた場合」という事よりも、誤ってケータイでPCサイトを開いちゃったりする方が多いかもしれないんですよ。つなぎ放題でブロードバンドのこのご時世に、画像表示をオフにしておくというマニアックな人がどれほどいるものかと。alt属性値なんか読んでも仕方ないのが昨今のWebサイトなわけで。

「もしなんらかの理由で画像が読み込めなかった場合」というのはもっと面白くて、そういう場合はメニューボタンどころではなく、コンテンツの他の部分も読み込めないことが多々じゃないかしら。そういうとき僕だったら何度かリロードしてみます。

で、画像だけじゃなくて同じように心配すべきことはHTMLからリンクしてる全てのファイルに言えるわけです。もし外部CSSが読み込めなかったら、もし外部jsファイルが読み込めなかったら、もしインクルードファイルが表示できなかったら。

そんな心配を追求していくと、CSSもjsもSSIもHTMLファイル内に書いてしまった方がいいわけで、さらにいうとそのHTML自体も読み込めるかどうか分からないわけで、RSSリーダーから飛んでみたら何も表示されないサイトだったり、ていうかRSSすらも読み込めてないかもしれないわけで。

だったらもうFAXしちゃったほうがいいんじゃないかと思うんですよ。

ジジジージジジーとね、君らのブログが絶えずプリントアウトされてくるわけよ。そのロール紙をもって僕は通勤電車に乗り皆さんのエントリーを読みます。コメントは付箋にメモして貼っておいてそのうちFAXで返信します。

めでたしめでたし。



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2008年1月 5日 00:45

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
▼Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
▼TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー