<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; }
そんな面倒なことしなくてもこれでいいんじゃないか
.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があるためその行が解釈されず無視されるため背景が白く抜ける。対策については後で考える。
最近利用者の多い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)
そういえばこの前映画館で「HACHI 約束の犬」と「サマーウォーズ」を見てきた。なんか外国の映画を見るときはいつも字幕版を見ている事に気が付いた。両方ともとても感動したので良かった。サマーウォーズはなんかいろいろ楽しかったので何度も見たい。
あと,「SimpleIsm」さんのデザインがまた変わってた,いつも楽しく読ませてもらっています。CSSのInvalidとかValidとか多分そういうデザインにするというInvalidにする理由があるのだからいいと思うとか何とか思った。まぁ自分のところはCSSとかそんなもんがどうにかなるサイトじゃないのでアレなんですけれども。
またアレとか意味不明な語句を使ってしまった。何も指していない代名詞とかアレですよね。
2009年9月7日 15時50分22秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web, 映画, 雑記 | コメント(0) | トラックバック(0)
Twitterでいろいろやりとりしていたのですが,ネイリーさんのサイトのサイドバーのデザインが変になるという話題を本人としていてOpera 9.64とOpera 10 Beta 2 Build 1679のWindows Vistaで確認したのですが,border-leftにsolidを指定してそれ以外の場所にsolid以外を指定してなおかつ背景色を指定(transparent 以外)するとborder-leftが透明になってしまうようです。同様にrightもほぼ同じ条件で透明になる事がありますが要素の順番によって再現しなかったりすることがあります。結構よく起きていたので(JR東日本のVIEWカードのサイトとか)何だろうと思いつつ原因がわかったのでちょっと調べて実験してみました。
あとPIAPROのサイトトップページの新着投稿の欄にマウスカーソルを重ねたり(:hoverになるようにする)すると位置が移動する(marginが破壊?)現象も前から気になったりいろいろです。
PIAPROのサイトがリニューアルされて上記の問題は発生しなくなりました。
Opera 10.5 以降は問題は発生しなくなりました。
2009年8月2日 02時34分01秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Opera, Twitter, Web | コメント(2) | トラックバック(0)
CSSとか考えないと幸せになれるよ!
嘘です。このやる気の無さをどうにかしたいです。私は。
2009年5月11日 19時55分10秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web | コメント(0) | トラックバック(0)
もう本文に書くしか方法はないなぁ。
2009年2月20日 18時31分38秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web, ブックマーク, メモ | コメント(0) | トラックバック(0)