n2p blog
キャンペーンやSNSの
“ためになる”情報を
執筆しています。
角丸影付きボックスを美しく再現するための4種類のソース比較
更新日:2022.01.10 (公開日:2014/03/26)
花粉がつらい今日このごろ。みなさん角丸ボックスコーディングしてますか？
ウェブページでのボックスの角丸やシャドウの実装は、様々な手法があるかと思います。
時と場合によって使い分けたい、ボックスとシャドウの実装を比較してみました！
今回再現したい角丸シャドウのカンプ画像はコチラです。
満たしたい条件はこちらです。
- 角丸とシャドウ、背景画像を再現する
- 横に拡大縮小しても見苦しい崩れを起こさない
- 内容のテキストの量によって枠の高さが変化する
四種類（＋α）の方法でコーディングしてみました。
サンプルはこちらです。
こちらの表でまとめたように、それぞれ癖があります。詳しく見て行きましょう！
CSS3を素直に使う
使いドコロはココだ！
- スマートフォンサイト
- とにかく軽くしたい・ソースを美しくしたい時
- IE8以下は、角丸なし・シャドウなしで問題がない時
- IE8以下は、背景画像がストレッチできなくても問題がない時
デメリット
IE8以下の環境ではPIE.htcなどを当ててやる必要がある
IE8以下の環境では、こちらなどで紹介されているファイルを当ててやる必要があります。
PIE.htcを使ってIEでもCSS3を有効に！
が、これに限らず、IE8以下で無理にcss3を再現させようとすると、
思うように描画できなかったり、異常に重くなり、結果工数を無駄遣いした苦い経験があります。
ですので現在はIE8以下が要件に含まれている際は、
IE8以下で角丸・シャドウが省かれる前提で組むか、
基本的に、後述の画像を使う方法などで対応するようにしています。
単体では角丸のアールの大きさがストレッチしない
でもjavascript(jQuery)で対応してあげれば変更が可能です。
ご参考までに。
サンプルはこちら
Androidの一部機種で描画が汚い
Androidで、若干角丸にジャギーが出る機種があります。
念のため、クライアントさんに了解をとった方が安全かもしれません。
ボーダーイメージを使う
使いドコロはココだ！
- スマートフォンサイト
- お手軽にアバウトなストレッチを実装したい時
デメリット
対応できる環境が限られる
ボーダーイメージの対応ブラウザは、
Chrome3やSafariの4からで、IEは11からです。
基本的にスマートフォンで利用すると考えたほうが安全ですね。
シャドウの太さと中身の比率を保持したい場合は、javascript(jQuery)での対応が必要
シャドウの太さと、中身の比率を保持したい場合、
拡大縮小させる幅に合わせて、動的にcssの値を変えてやらねばなりません。
また、値によっては若干描画にノイズが入るので、実機での確認が必要ですね。
背景画像をbackgroundで指定することができない
背景画像と干渉するので、直接backgroundで指定することができません。
画像として配置すると安全です。
擬似要素で画像を配置
使いドコロはココだ！
- 推奨環境がIE8以上のモダンブラウザ
- ソースを美しくしたい時
デメリット
ストレッチできない
ストレッチすると、崩れます。
これ、対応方法がご存じの方がいたらお伺いしたいところです……。
画像を使う分、やや重い
画像を使う分やや重くなります。
スマートフォンで利用する場合、注意が必要です。
とはいえ、css3での機種による微妙な表示の違いに厳しいクライアントさんの場合、
画像で対応したほうが喜ばれることがあります。
画像をimgタグで直接配置
使いドコロはココだ！
- IE6以上対応可能！
- ストレッチも可能。
デメリット
画像を使う分、やや重い
やはり、画像を使う分やや重くなります。
ご利用は計画的に。
ソースが美しくない
imgタグを多用することになるので、時と場合によっては利用を控えたい場合もあります。
条件によって臨機応変に。
角丸の実装は臨機応変に。
良い角丸ライフを！
