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