[CSS]border-imageを使ってスマホサイトに飾り枠!

  • ノウハウ
  • 2014.6.18
  • かいたひと:ゆかと

ゆかとです。例によって占いサイトをスマホ向けに最適化させるコーディングをしています。
*前の記事→ガラケー向けのHTMLをCSSだけでサクっとiOS/Androidスマホ向け表示にしてみた

占いサイトでは『飾り枠』が頻繁に出てくるんですけれども、
※↓こういうの。
飾り枠サンプル(※この全部がborder-imageなわけではないです)
こういった飾り枠の幅を可変でコーディングしようとすると「枠画像を上部・下部・真ん中リピート用に分けて背景画像に指定して~」など、ちょっと面倒!
スマホならborder-imageを使うのもスマートなんじゃない?ということできちんと調べてみました。
border-imageの仕様が何たるかはもっと詳しく書いてくれているサイトがあるのでそちらを参照してください。今回は“使うこと重視”です。

これでいける

border-style: solid;
border-width: 13px 10px 13px 29px;
-moz-border-image: url(border.png) 26 20 26 58 stretch;
-webkit-border-image: url(border.png) 26 20 26 58 stretch;
-o-border-image: url(border.png) 26 20 26 58 stretch;
border-image: url(border.png) 26 20 26 58 fill stretch;

対応表

紫:最終的に表示するボーダーの幅を指定。
ピンク:ボーダー画像の指定。Retina対応させるなら2倍の寸法で作る。
青:ピンクで指定した画像自体から何pxずつをボーダーとして捉えるかを指定。
黄色:ボーダーで囲った中身の背景にピンクで指定した画像の真ん中あたりを使う場合は「fill」を。
緑:ボーダー画像のリピート方法を指定。

ということで、

「url(border.jpg)」の画像から「26 20 26 58」(px)ずつを枠として捉え、「13px 10px 13px 29px」のボーダー幅として表示する。
ボーダーで囲った中身の背景を「fill」(埋める)、ボーダー画像のリピート方法は「stretch」。

長ったらしいので以下のようにバラしたいところなのですが、どうやらまとめて書かないと効かないみたいです(2014年5月時点)。

border-image-source: url(border.png);
border-image-slice: 26px 20px 26px 58px fill;
border-image-width: 13px 10px 13px 29px;
border-image-repeat: stretch;

こうするとサクっとできる

長ったらしいので以下のツールでソースを生成すると分かりやすいですね。
生成後に「border-width」の値を÷2して書き換えています。
■border-image-generator
http://border-image.com/(外部サイト)


border-image便利!パソコン向けサイトでも使いたいですね!使いたいですね!(レガシーブラウザに向けて白目)
記述が間違っているところや「もっとこうしたらいいよ!」みたいなことがありましたらTwitterか何かで指摘ツイートしてくださると嬉しいです!エゴサーチしに行きます。

株式会社ポッケ

株式会社ポッケ採用情報

ポッケでは、楽しく働いて世の中を笑顔に出来る仲間を募集しています。興味のある方はこちらをご覧ください。

最新記事

ブログ記事を検索