ちょっとマシな画像置換
「画像置換」の最大の欠点を克服し、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で マーカーを消し、パディングで確保した領域に背景画像を表示させるという手法がよく使われる。 これだと画像非表示の環境ではリストマーカーが見えない。 リストマーカー程度なら
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
フォーム部品はデフォルトスタイルで
てんぽ: フォーム部品はデフォルトスタイルで CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど FC2ブログ新管理画面を見て気になったのはボタンがボタンらしく見えないこと。 フォーム部品に関しては、中途半端なCSSを適用するくらいなら、ブラウザのデフォルトスタイルのほうがわかりやすいのではないかと思います。 Jakob Nielsenの「Jakobの法則」（ユーザは、大部分の時間を他のサイトで過ごしている）によれば、 ユーザは他のサイトでの経験をもとにそのサイトの機能を予想するため、ウェブサイトはデザイン標準に従うべきとしています。 個人的にはここにもうひとつの法則を付け加えたい。Jakob Nielsen風に言えば次のようになります。 ユーザは大部分の時間を同じブラウザを使って過ごしている。 つまり、ユーザの慣れ親しんだブラウザの機能や見た目をむやみに変更してはならない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
