複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。 画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。 備考 コードは、参考サイトからサイズ指定などを変更しています。 画像置換元は、全てH3要素になっています。 H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 ブラウザに「背景画像」が表示されていれば、期待通りの動作です。 使用している画像は、次の通りです。 背景画像 印刷用の見出し画像 1pxの透過画像 名称は、Revised Image Replacementを参考にしています。 サンプル:01 -Classic FIR デモページ <textarea name="code" class="html" cols="60"
テキストボックスに比較したい文章をコピペしてボタンを押すだけで2つの文章でどこが変更されたのか、差分の確認ができるネットサービスが「difff(デュフフ)」です。名前はちょっとネタっぽいですが、実用性は高く、日本語のテキストでもOKです。 difff - デュフフ http://altair.dbcls.jp/difff/ サイトの見た目はこんな感じ、テキストボックスが2つ上下に並んでいるので、変更前の文章と変更後の文章をそれぞれ貼り付け、最後に「比較する」ボタンを押すだけ。 結果はこんな感じで変更前が左、変更後が右に表示されます。段落が左右で揃っていて、変更部分はハイライト表示されるので、どこが異なっているのかが一目で確認できます。 ぱっと目で見ただけではどこが変わっているのかわからないようなものでも…… このツールであれば確認できます。このケースだと、カッコが半角から全角に変わっていま
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 4月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを16進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい! Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く