[CSS]ウェブ制作に役立つ、スタイルシートの有用なスニペットのまとめ | コリス

2012/11/01 355 users コリス ショートハンド CSS スニペット clearfix

よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニ... 続きを読む

CSSスプライトについてあれこれ。

2012/08/24 1022 users CSSスプライト HTML 手順 制作手順 web

「CSS Sprites（CSSスプライト）」って、どの方法が一番ベストなの？ いまいち不確かだったので、個人的にまとめ直してみることにしました。2012.8.22. Wed CSS, CSSスプライト, HTML, Web, ボタン, 手順, 画像置換 「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までた... 続きを読む

画像置換のあれへの補足 – terkel.jp

2012/04/17 112 users terkel height width CSS 補足

先月あたり、CSS による画像置換テクニックの話題がにわかに盛り上がりを見せていました。その経緯について まとりさんの記事 で紹介されていますが、僕からも簡単に補足してみます。 まず、よく知られた画像置換のテクニックとしていわゆるファーク式 (Phark method) がありました: /* Phark method */ .ir { height: 100px; width: 400px; ba... 続きを読む

[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス

2012/04/16 970 users コリス 見出し HTML 見出し要素 テクニック

テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「te... 続きを読む

CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ

2007/03/07 406 users None text-indent display CSS

▽ 閲覧者様へご迷惑をおかけしております。 サーバーを管理している Just-size.networks です。 現在、都合により閲覧が制限されております。 大変申し訳ございませんが、しばらく経ってからまたお越し下さい。 ▽ 管理者様へ アカウントがロックされております。 お問い合わせ窓口よりご連絡下さい。 続きを読む

一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog

2007/02/21 157 users Webクリエイター Blog レンタルサーバー 方法 設置

一番簡単な画像置換の方法-imageReplace.js- 【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。 【PR】HP登録でSEO対策！アクセスアップにコチラ！ 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡... 続きを読む