タグ

cssとimageに関するytkwsmのブックマーク (2)

  • 画像名について考える - Qiita

    CSSのCLASSやIDと同じく、これも最低限の命名方法があると仕事が捗りやすいかなと思ったのでメモ。 基的にはよく使われている接頭辞つけて、ディレクトリを細かに切ってわかりやすくという感じ。 いろんなコーディング規約を見ると、枝に連番つく事が多いんだけど、私はイマイチそれが好きじゃない。 自分が最初から最後まで面倒見るなら変な名前つけても自業自得だけど、いつどこで担当変更になるかわからない事を考えると、画像名も手を抜かない方がいいだろうなと思ったりします。 基的な事 pngファイルはコミットする前に軽量化する mageOptim とか利用する スペース用透過画像は使用しない 単語をつなげる場合はハイフン(-)を使用する IDやCLASSの背景画像なら、IDやCLASS名と同じ名前つけるとわかりやすいかも 短縮する場合は、一般的に広く使われる名称を使う 画像につけるプレフィックス(接頭

    画像名について考える - Qiita
  • 画像置換に -9999px はつかわない

    画像置換という言葉を知っているでしょうか?テキストを「text-indent:-9999px」と指定して、画面の外に飛ばしてしまい背景画像をその代わりに表示する技術です。 画像置換の歴史 画像置換は長いこと使われているCSSのテクニックに1つでしょう。では、このテクニック自体はどのようにして、生まれてきたのでしょうか? 意外にも、このテクニックは元はC.Z.Robertson氏が1999年に考案し、それを「Todd Fahner」氏やTwitterのDouglas Bowman氏がチュートリアルで説明し、一般的に広めたものです。この時点ではテキストを非表示にするために「display:none」を利用しており、音声リーダーでは読み上げされないなどの問題がありました。 その後、このアクセシビリティ上の問題を解決するために「-9999px」というテクニックを生み出したのです。 現在の画像置換

    ytkwsm
    ytkwsm 2014/03/05
    画像置換でtext-indent: -9999px;とは別のやり方
  • 1