ひあ的な生活。

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-gradientはto 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秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web | コメント(1) | トラックバック(0)

2013年新年のご挨拶

24時間以内に更新するとか言って結局24時間以上過ぎてしまいました。「相棒」を見ていてすっかり忘れていただけです。しようと思っていることはもなかなか進まないこともよくあります。

新年早々どうしようもないですがこのよくわからない何かを今年もどうぞよろしくお願いいたします。

2013年1月1日 23時56分55秒 | カテゴリ: 日記・雑記 | タグ: 雑記 | コメント(0) | トラックバック(0)

2012年まとめ

2012年のまとめとか適当なタイトルを付けたものの特に何をまとめるか考えてもいなかったので書くことが思いつかないですが毎年いろいろあると思います。もちろん今年もいろいろありましたが，来年から本気出したいと思います。たぶん本気出せないと思いますが。

ということなので来年もよろしくお願いします。24時間以内に今年もよろしくお願い致します的な文章をまた投稿すると思いますのでやっぱりどうでもいい話でした。

2012年12月31日 23時03分34秒 | カテゴリ: 日記・雑記 | タグ: 総括, 雑記 | コメント(0) | トラックバック(0)

新潟県中越地震から8年でした

いろいろありました。当時は新幹線とか止まっていろいろとアレだった記憶があります。それはそうと今は東北地方太平洋沖地震の復興ですね。早く鉄道網復活してほしいです。

2012年10月23日 21時17分41秒 | カテゴリ: 日記・雑記 | タグ: 鉄道, 雑記 | コメント(0) | トラックバック(0)

10月でした

10月になり東京駅の丸の内駅舎の復原工事が完成したり郵便局株式会社と郵便事業株式会社が合併して日本郵便株式会社になったりといろいろありました。そして私が散々使っていたマイクロブログのWassrがサービス終了となりました。どうでもいいですけど日本語だとミニブログと言うけれど英語圏はマイクロブログと言うそうですね。私は英語かぶれなのでマイクロブログと言いますが。そして新たにGoogle+も開始しました。こちらはいろいろと投稿・共有できるサービスなので活用したいと思っております。

そんな訳で3ヶ月も何も更新しなかったのですがこの3ヶ月の間に『TARI TARI』を見たり『人類は衰退しました』を見たりして過ごしていました。と言うか勢いでBDまで買ってしまいました。おかげでお金がありません。寄付したい方はこのサイトについてに記載されている口座までどうぞよろしくお願いいたします。

最後にGoogle+にも投稿した写真を載せて終わりたいと思います。

東京駅丸の内駅舎

2012年10月3日 02時47分38秒 | カテゴリ: 日記・雑記 | タグ: Google, JR, Web, アニメ, 写真, 郵便局, 郵政 | コメント(0) | トラックバック(0)

メニュー