Re: CSSで背景画像の配置を右から指定する方法

yoruaki CSSで背景画像の配置を右から指定する方法 | SimpleIsm より引用
<p class="hoge">
    <span>hogera</span>
    <a href="#top">TOP</a>
</p>

(中略)

で、ここからが本題。背景画像の配置を右から指定する方法。

.hoge a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#999));
    background-image: -webkit-linear-gradient(top, #FFF, #999);
    background-image:    -moz-linear-gradient(top, #FFF, #999);
    background-image:         linear-gradient(top, #FFF, #999);
    border: 1px solid #999;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    font: 16px/24px "Helvetica", "Arial", sans-serif;
    padding: 0 17px 0 6px;
    text-decoration: none;
    position: relative;
}

.hoge a:after {
    background: transparent url("arrow.png") no-repeat 0 0;
    content: "";
    height: 12px;
    position: absolute;
    right: 6px;
    top: -webkit-calc(50% - (12px / 2));
    top:    -moz-calc(50% - (12px / 2));
    top:         calc(50% - (12px / 2));
    width: 9px;
}
http://simpleism.net/2013/02/right-start-background-position/

そんな面倒なことしなくてもこれでいいんじゃないか


.hoge a {
    background-image: url("arrow.png"), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
    background-image: url("arrow.png"), -webkit-linear-gradient(top, #fff, #999);
    background-image: url("arrow.png"),    -moz-linear-gradient(top, #fff, #999);
    background-image: url("arrow.png"),         linear-gradient(to bottom, #fff, #999);
    background-position: -webkit-calc(100% - 6px) 50%, 0 0;
    background-position:    -moz-calc(100% - 6px) 50%, 0 0;
    background-position:         calc(100% - 6px) 50%, 0 0;
    background-position: right 6px top 50%, 0 0;
    background-repeat: no-repeat;
    border: 1px solid #999;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    font: 16px/24px "Helvetica", "Arial", sans-serif;
    padding: 0 17px 0 6px;
    text-decoration: none;
}

デモとかそういうものはないので各自で確認して下さい。あとこのサイトのスタイルシートが手抜きなのでコード用のスタイルとか指定していないので見にくくてすみません。

とりあえず最新版のSafari 6.0.2 (8536.26.17)とFirefox 18.0.2とOpera 12.14で確認して問題ないような気がしたので。IEは知らん。でも,IE 9はlinear-gradient以外はその通りに表示されると思う。Windowsに行って確認するのが面倒なので気が向いたら後でやる。

あとどうでもいい解説。linear-gradientto bottomが正。問題のbackground-positionだけどcalc使うなら別にわざわざ:afterしなくても<length>のある場所ならどこでもいいとか書いてあったのでここに直接書けばいいんじゃないかなとか思ってやってみたらなんか動いたのでいいような気がする。正確なところは知らない。あとはFirefoxが4値構文に13から対応したとMDNに書いてあったのでcalcしなくても動くと思う。そして,一番下にCSS3の4値構文の形に対応したブラウザ(Opera 10.5+とIE 9+)に適用させてやればいい。

追記

WebKit 536以前(つまりSafari 6以前,iOS 5.1やAndroid 4.2とか)はそもそもcalcに対応していなかったのでこのままでは表示ができなかった。それからIE 9に関してはlinear-gradientがあるためその行が解釈されず無視されるため背景が白く抜ける。対策については後で考える。

追記2

最近利用者の多いAndroid端末を切り捨てるわけにもいかないので,結局:afterを使わないとダメっぽい。もしくは画像に透明な領域を入れて普通にbackground-position: right center, 0 0;してしまうとか。

Android 4.2やiOS 5.1などではcalcが使えないのでそれを使わずに書くとこんな感じになると思う。


.hoge a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
    background-image: -webkit-linear-gradient(top, #fff, #999);
    background-image:    -moz-linear-gradient(top, #fff, #999);
    background-image:         linear-gradient(to bottom, #fff, #999);
    border: 1px solid #999;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    font: 16px/24px "Helvetica", "Arial", sans-serif;
    padding: 0 17px 0 6px;
    position: relative;
    text-decoration: none;
}

.hoge a:after {
    background: transparent url("arrow.png") no-repeat 0 50%;
    content: "";
    height: 24px;
    position: absolute;
    right: 6px;
    width: 9px;
}

もしくはposition: relative;するのが嫌だみたいな特殊な人にはたぶんこれでも動くと思う。確認はしたけれど1pixelも動かない保証はない。


.hoge a {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#999));
    background-image: -webkit-linear-gradient(top, #fff, #999);
    background-image:    -moz-linear-gradient(top, #fff, #999);
    background-image:         linear-gradient(to bottom, #fff, #999);
    border: 1px solid #999;
    border-radius: 3px;
    color: #000;
    display: inline-block;
    font: 16px/24px "Helvetica", "Arial", sans-serif;
    padding: 0 6px;
    text-decoration: none;
}

.hoge a:after {
    background: transparent url("arrow.png") no-repeat 2px 50%;
    content: "";
    display: inline-block;
    height: 24px;
    vertical-align: top;
    width: 11px;
}

とりあえずこのスタイルがなんでそういう表示になるかの解説はもう省略。あと後者のスタイルはフィーリングで書いたので何でこの表示になるのか自分でもよくわかってないから説明のしようがない。

IEで白く抜けるので背景色指定した方がいいかもしれないしもしくはlinear-gradientの使用を取りやめて画像を使う。もしくはfilterを使う。もしくはSVGを使う。もしくはそれ以外のIE対応用のスクリプトなどを使う。IE 10で確認はしていないけれどおそらく他のブラウザと同様に表示されるはず。

CSS3の機能を利用しようと思っても結構ブラウザによって対応がまちまちで特に今回はWebKitが足を引っ張っている事象だったので興味が沸いた。あとはCSS3がどのくらいたてば普通に使えるようになるかが気になります。

公開日時
2013年2月6日 22時21分10秒
更新日時
2013年2月7日 03時53分03秒
カテゴリ
日記・雑記
タグ
CSS, HTML, Web
トラックバック
トラックバックURI
https://www.hiaism.net/archives/2013/02/re-right-start-background-position/trackback
コメント
attsu: 2016年4月27日 16時58分51秒

本当にありがとうございました。素人ながらスマホサイトにチャレンジ中でして、ここにつまずいてました・・・(^ ^;)是非とも参考にさせてください。

コメントフォーム

メニュー