【CSS3】スマホで右側にアイコンを表示する方法２種とborderに背景画像を指定する方法

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

右側にアイコンを表示する方法

background-position: calc(100%-XXpx) XX

この前旦那さんに「calc(100% – XXpx)」というCSS3の指定方法を教えてもらいました。
右側のアイコンを指定するときに超便利そう！にもかかわらず、PCはIE9以上、スマホはiOS6.0以上・Android4.4以上と現時点では使えないことこの上ない・・・

ちなみに旦那さんはpaddingを指定したhタグのbeforeをボーダー状にするとき、高さを100%で指定するとはみ出るのでその対策に使っていました。予想外の使い方・・・
最近CSS3を勉強していた方法で、思わず「background-clip + box-sizing」バージョンを作ってみました。こちらだとスマホで使える（と思う。見てないけど。）ので、汎用性があるような気もしなくもないです。

background-position: right XXpx XX

IE8以下を切り捨てれば使える便利なCSSプロパティー＆セレクター | Webクリエイターボックスで見て使ってみたいなーと思ってた記述。どうやらスマホには対応していないみたい。。。ググる方法もわからず断念。
デモ3番目

background-position: right XX + background-origin: content-box;

display: blockのときに有効なのがこちら。
画像の配置を右にして、background-originで背景の基準をコンテンツのみにします。
デモ4番目

display: inline-blockにしたいとき

afterの背景画像にアイコンを指定し、position: absoluteで配置します。
デモ5番目

borderに背景画像を指定する方法

一枚の画像をスプライトのように使って幅が広くなったり、高さが変わっても使えるボタンを作る方法です。
ジェネレーターもあります。

レティナ対応する

/*BはAの２分の１を指定する*/
element {
    border: Apx solid;
    -webkit-border-image: 背景画像 B repeat;
    border-image: 背景画像 B fill repeat;
}

デモ2番目

[amazonjs asin=”4844362534″ locale=”JP” title=”CSS3デザインブック 仕事で絶対に使うプロのテクニック”]

CSS3