PRESSMAN*Tech今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。今回はそんなお手紙と関係の深い7月にちなんで、CSS3を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。目次:CSS3を使った郵便切手の作り方radial-gradientを使う背景の位置をずらすfilter:drop-shadowを使う消印風スタンプの作り方contentプロパティを使うborder-radiusの値を50%で指定する日付を天地中央に配置するテキスト要素はWebフォントを使うtransform:rotateを使うまとめ※IE以外のブラウザは、2015年7月17日現在の最新版にて確認を行っています。CSS3を使った郵便切手の作り方CSS3を利用することで、ごくシンプルなHTMLマークアップのまま、画像を郵便切手のような見た目に装飾することができます。装飾部分には画像を使用していないため、CSSに手を加えるだけで色や影の設定も簡単に変えられます。Retinaディスプレイでも綺麗に表示され、画面を拡大&縮小しても荒くなりませんので、レスポンシブWebデザインと相性が良いのも嬉しい点です。rgba(0,0,0,0.6));}対応ブラウザ:IE10〜、Firefox、Chorme、Safari、Opera、iOS、AndroidIE9以下のブラウザではradial-gradientをサポートしていないため切手風の見た目にはなりませんが、単純に白い枠として表示されますので、レイアウトが崩れる心配等はありません。以下はコーディングのポイントと解説になりますので、特に必要ない場合は「スタンプの作り方」まで読み飛ばしてください。radial-gradientを使うCSS3のradial-gradientは、円形グラデーションを描画するための関数です。画像の周囲にradial-grarientによる水玉模様の背景を表示させることで、ちょうど切り取られた切手のように見せることができます。Safariもradial-grarientに対応しているのですが、そのままですとジャギが目立ってしまいます。そのため、ベンダープレフィックスを付けた、-webkit-gradientでの記述も追加しています。途中色と終了色の半径を1pxずらすことで、同じくジャギが目立ちやすいFirefoxでも少しアンチエイリアスがかかったような見た目にすることができます。背景の位置をずらす境界線に水玉模様の円の中心を持ってくるには、背景の開始表示位置を指定するbackground-positionプロパティの値をマイナスに設定します。-0.5」で指定してください。「background-size」の値は、装飾する画像の幅や高さが割り切れる数で設定する必要があります。そのためCMSで使用する場合は、サムネイルやアイコンなど、固定サイズで表示される箇所に適用するのがおすすめです。filter:drop-shadowを使う要素に影をつけるCSSとしては「box-shadow」が有名ですが、「box-shadow」はボックス要素全体の幅と高さを元に影をつけるため、今回のように要素がところどころ透過されている場合は、綺麗な影をつけることができません。そこで、要素の中で透過されていない部分だけに影をつけてくれる「filter:drop-shadow」を使っています。「filter:drop-shadow」はIE11でもサポートしていないため表示できる環境は限られてしまうのですが、影の描画のためだけのためにマークアップを複雑にしたり画像を使用することは避けたかったので、今回はdrop-shadowの記述のみにとどめています。消印風スタンプの作り方2015.07.17スタンプも切手の場合と同じく全てCSSで装飾していますので、色やサイズや枠線の太さなども簡単にカスタマイズが可能です。IE8以下のブラウザではborder-radiusがサポートされていないため、スタンプが丸くならずに四角く表示されます。Fonts」を使用していますので、<head>タグ内に以下の記述を追加してください。type='text/css'>対応ブラウザ:IE9〜、Firefox、Chorme、Safari、Opera、iOS、Android以下はコーディングの解説とポイントになります。contentプロパティを使う:before、:after擬似要素にcontentプロパティを指定することで、比較的シンプルなHTMLマークアップのままテキストや画像などのコンテンツを追加することができます。JAPAN」の部分がそれに当たります。この部分はサイトに合わせて、お好みのテキストに差し替えていただければ幸いです。border-radiusの値を50%で指定するtonalityborder-radiusはボックス要素を角丸にするためのプロパティですが、スタンプのように必ず正円になる場合は、値を「px」ではなく「50%」で指定するのが便利です。これにより、もしスタンプ全体のサイズを変更した場合も、border-radiusの値を変えることなく、綺麗な円のまま表示されます。日付を天地中央に配置するsettings_overscan要素を天地中央に配置するには、display:table-cellを利用するなど様々な方法があるのですが、今回はIE対策&マークアップをシンプルにするため、ややメンテナンス性は落ちますが、要素の高さと同じ値をline-heightで指定する方法を使っています。テキスト要素はWebフォントを使うformat_sizeWebフォントの利用は必須ではないのですが、PCだけでなくスマートフォンやタブレットなど様々なデジタル端末に対応する場合は、どんな環境でもテキスト要素が同じ幅や高さで表示できるWebフォントが便利です。Serif」を使用させていただきました。フォントの種類を変えるだけでまた全然違う雰囲気になりますので、色々と試してみてください。transform:rotateを使うrotate_lefttransformプロパティのrotate関数の使用により、要素を回転させることができます。実際の消印も傾いていることが多いため、今回のサンプルも少し回転させて斜めに表示させてみました。こちらもお好みで色々な角度を試していただけると幸いです。まとめ今まではこのように少し複雑な装飾は毎回画像として作成することが多かったのですが、CMSでの利用などを考えるとスタイルシートでの装飾がとても便利です。今回はメンテナンス性や汎用性を考え「画像やJSを使わない」「なるべくシンプルなマークアップで実装する」ことを目標に、郵便切手や消印風スタンプを作成する方法をご紹介いたしました。背景に画像ファイルを併用したり、ボックス要素を1つ追加すれば、IE8やIE9に対応させることも可能です。機会がありましたらそちらもあわせてご紹介したいと思います。(1678日経過)の記事です。内容が古い可能性があります。私たちと一緒に働きませんか?「コピペで簡単!CSSだけで作れる郵便切手と消印風スタンプ」はいかがでしたか?株式会社プレスマンでは、WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。PRESSMANプレスマンのスタッフブログです。担当者の紹介デザイナーhino入社2年目のデザイナーです。見やすさ&わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。株式会社プレスマンのWebマーケティング部によるスタッフブログです。PRESSMAN*Tech.。