CSS Nite Vol.5と、画像置換について考えたこと - 徒書
しごと場から会場が結構近かったので、CSS Nite Vol.5を見に行ってみました(実は前回も見に行ってたり)。いろいろと興味深い話を聞けました。 Vol.8のゲストは森田雄さん、Vol.10のゲストは神崎正英さんに決定したそうで、今後も楽しみにしてます。 さてそのCSS Niteの中で、鷹野さんにより画像置換《image replacement》についてのプレゼンテーションがありました。ここでの画像置換というのは、HTMLでは文字《テキスト》になっている部分を、スタイルシートにより画像に置き換えて表示させる技術のことです。spanタグを間に入れて display:none; としてみたり、或いは text-indent:-9999px; とかしたりするアレです。その利点と欠点を(自分なりの解釈で)述べてみると、以下のようになるでしょうか。 利点 HTMLから(装飾のための)画像情報を分
ちょっとマシな画像置換
「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。 まもるべき条件はつぎの2つ。 HTMLに手を加えず、CSSの変更だけで実現できること CSS有効かつ画像非表示の環境では、もとのテキストが表示されること 一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。 サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。 該当箇所の（X）HTML <div class="secondary-column"> <h2>Appendix</h2> <div class="section" id="categories-archives"> <h3>Categories Archives</h3> <ul> <li><a
リストマーカー+テキストを画像で表示
HTMLとCSSの規格はよくできていて、真っ当な使い方をしていればアクセシビリティ上の問題はほとんど起こりえないと思う。しかし、CSSで「変なこと」をすると思わぬ落とし穴が。 その例がlist-style-imageの代わりにbackground-imageを使うことと「画像置換」。 リストマーカーをlist-style-imageで画像に変換した場合、画像非表示の環境ではもとのリストマーカーが表示される。 しかし、list-style-imageで表示した画像の位置が気に入らない（これはホントにそう思います）という理由で、list-style:none ＋ padding-left ＋ background-imageで マーカーを消し、パディングで確保した領域に背景画像を表示させるという手法がよく使われる。 これだと画像非表示の環境ではリストマーカーが見えない。 リストマーカー程度なら
画像置換に関する考え方
画像置換に関する考え方 WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。 どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。 なぜ、このような考え方にいたったのでしょうか？ 画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。 なぜ画像置換という技術が普及したのか? 画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。 これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。 画像置換の欠点は? CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表
画像置換という手法 | Web標準Blog | ミツエーリンクス
画像置換と呼ばれる一連のテクニック群があります。これはHTML文書でマークアップしたテキストを、CSSで画像に置き換えて表示させる手法を指します。たとえば、テキストはdisplayプロパティで隠したり、あるいはtext-indentやpositionプロパティを使って画面外に追いやり、画像を親要素の背景画像として表示させます。詳しくは、Dave Shea氏の記事「Revised Image Replacement」を参照してください。 画像置換は、マークアップに一切手を加えることなく画像を別のものに差し替えることができることから、デザイン変更が非常に容易という利点があります。またこの手法に少しばかり手を加えれば、JavaScriptに頼ることなくCSSのみでロールオーバー効果を得ることができるため、ナビゲーションのボタンに利用されているのをよく目にします。 しかし画像置換は、CSSが有効か
画像置換とSEOスパム | Web標準Blog | ミツエーリンクス
ムラカミさまより、画像置換とSEOスパム、それに文字コードに関するご質問をいただきました。 テキストでコーディングした見出し（h1～h2）を見栄えのする画像に変換するために、CSSでtext-indent:-5000pxとbackgroundにイメージをリピート無しで指定しています。CSSがONで画像がOFFの場合何も表示されないというデメリットは承知しております。 このCSSの指定は検索エンジンからするとスパムととられる可能性はあるのでしょうか。 もしこの方法が否定される場合、テキストを画像に置き換える最も適した方法はどんなものなのでしょうか。またはこの先、見出しなどもテキストで表示するのが常識になると思いますか。 もうひとつ、エンコーディングは現在シフトJISを使用していますが、UTF8の方がいいのでしょうか… まず最初に、画像置換という手法が検索エンジンによってスパムであると判断され
CSSのメモ帳 ‐text-indent: -9999pxについて‐ | CSSのメモ帳 －スタイルシートは直感で－
cssについてのメモ帳、初心者編。cssについての覚書きのようなものとしてお使いください。初心者必見、スタイルシートなんて勘で何とかなる？ こんにちは。 最近CSS(スタイルシート)の使い方について気がついたことを一つ。 CSS(スタイルシート)レイアウトが主流になりつつある今、デザインの一つの方法として ナビゲーション部分にCSS(スタイルシート)を使用してのロールオーバーの方法があります。 例えばこのブログの左袖の「最近の記事一覧」のようなものです。(マウスオーバーすると若干色が濃くなるのですが…) このブログについてはテキストをそのまま表示している状態ですが、中にはここを画像のテキストできれいに表示したいと考える人もいます。 しかしJavascriptは使用したくない、又は使用できない… そんな時によく使われるのが表題の「text-indent: -9999px」です。 CSS(スタ
（ＢＬＯＧ）リンク・フォーカス時の点線が画面外まで拡張される問題
text-indent: -xxxxemの弊害 CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。 ところが、問題点をいくつか見つけたので書いておきます。 自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが... まずはじめにCSS背景切り替えの概要Firefox1.5でクリックした時に左に長い点線の枠が出現するタブキーで現在位置が分からなくなる解決策というより、気休め的な方法過剰な見栄え制御決定的な回避策(アクセシビリティ向上案) まずはじめにCSS背景切り替えの概要 あちこちのサイトやCSS関連の書籍で紹介されていると思いますので、ここでは軽く書きます。 リンクの画像にマウスが重なるとその画像が切り替わるという仕掛けです。 このサイトのヘッダー部分にあるナビゲ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
