【謝罪と修正】 『CSSと一枚の画像だけで・・・』の記事について
February 20, 2007 10:52 AM written by

先日ご紹介した『CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法』ですが、重大なミスがありました。ここに謝罪して修正します（ご指摘いただいた匿名希望さん、ありがとうございます）。

間違いがあったのはこちら。

PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。

まずはじめにPNG画像を縮小などしていませんでした・・・申し訳ありません。それから「スクリプトのダウンロード」というのも誤解を招く表現でした。「CSSとHTML、画像が入ったファイル群」が正しい表現です。

速く書こうと思って中途半端な理解で書いてしまいました・・・以後気をつけるとともに、ここで修正させてください。

この手法ですが、正しくは画像を縮小しているのではなくて、大きな画像の四つ角を重ね合わせて任意の大きさの角丸パーツを作っています。

順を追ってご説明。

まず、この手法のもっとも単純なコードは以下のとおりです。

<div class="dialog">
 <div class="content">
  <div class="t"></div>
  <!-- Your content goes here -->
 </div>
 <div class="b"><div></div></div>
</div>

これに補足説明を入れると、

<div class="dialog"> ← 全体
 <div class="content"> ← 右上のパーツ
  <div class="t"></div> ← 左上のパーツ
  <!-- Your content goes here --> ← コンテンツ
 </div>
 <div class="b"> ← 右下のパーツ
   <div></div> ← 左下のパーツ
 </div>
</div>

となります。Firebugで見ると以下のような感じ。

↑ <div class="content">に対応するのが右上。

↑ <div class="t"></div>に対応するのが左上。

↑ <div class="b">に対応するのが右下。

↑ <div></div>に対応するのが左下。

以上です。一つの大きな画像の右上、右下、左上、左下を貼り付けあわせる手法でした・・・画像の縮小など行っていないですね・・・。

また、先日の記事中「一長一短があるアプローチなので用途に合わせてお使いください。」と書きました。こちらについても中途半端な表現ではないかとご指摘を受けました。現在僕が把握している長所、短所は以下のとおりです。

■ 長所

• 画像を一枚つかうだけでいい。他のよくある手法のように4枚画像を使わなくてよい。
• 画像を4枚使うよりも、1枚画像を読むだけなのでリクエスト数が1回で済む。
• どうやって実現しているか理解したあとには、他の手法に比べ比較的コーディングがシンプル（主観ですが・・・）。

■ 短所

• 元画像以上の大きさのパーツは作れないので気をつける必要がある。

まだ僕が気づいていない点があればご指摘ください。今回はご指摘ありがとうございました！

このブログではまだまだ僕自身デザイン系の技術を勉強中ということもあり、いろいろ間違いをしがちです・・・。もちろん間違えないようにしますが、こうした指摘を受けつつ勉強させていただければと思います。

勉強した結果をもってさらに質の高い記事を書くことがご指摘いただいた方へのお礼だと思っています。今後ともどうぞよろしくお願いいたします・・・。

Info: | 固定リンク | コメント (1) | トラックバック (0) | ↑