こっぱみぢんこ

nexus7

買ってしまった。

土曜日にふと Android を全く触った経験がないことに気付き、そういえば nexus の新型が発売になっていたんだと思い出して、Amazon を見たら在庫があったのでそのままポチッと。

それが今日、配達されてきたのだった。

で、とりあえず色々と触っているのだが、何かスペックの割に滑らかじゃない気がする。ちょくちょくカクっと引っかかることがある。 nexus7 は Android のリファレンス実装で、確か一番シンプルな構成のはず。他のメーカーから発売されているもののようなカスタマイズや、メーカー製のアプリのプリインストールが無くて、構成がシンプルな分だけレスポンスは良いんじゃないかと期待していたのだが、iPad と比べるとちょっと劣る感じ。

あと、タッチ判定の精度というかチューニングも、iPad や iPhone に劣る印象。割と頻繁にミスタッチになる。まあ、これは慣れていないからなのかもしれないが、iOS では誤操作をした記憶がほとんど無いんだよな。

微妙な所をタッチしたときに、勝手に判断するのではなくその部分を拡大して再タッチさせるのは、OSじゃなくてブラウザの仕様だろうか。親切ではあるのだが、ゲームなんかだと邪魔にしかならないような気がするな。設定でOFFにできるのだろうか。

貶してばかりだが、もちろん良い所もある。何より画面がいい。発色とかは普通、というかノングレアの液晶保護シールを貼付けた時点でもう写真観賞用ではないのだが、文字はとても奇麗で見やすい。そして軽い。軽いのは、外装の安っぽさとのトレードオフなのだが、手に持って使うものなら軽さ優先は正解だろう。あと、戻るボタンが地味に便利。

正直、これといった目的も無く買ってしまったんだけど、せっかく買ったことだし、何か作ってみるかな。 google は apple と違って、アプリの登録も楽そうだし。

CSSで矢印

矢印っぽい記号が欲しいけど、文字の矢印（↑↓→←）は貧相で使いたくない。文字の三角形（△▽）は矢印よりましだが、フォントを選ぶので微妙に使い難い。画像はフォントに関係無く安定して使えるが、色違いが欲しいとなったら、色の数だけ作らなければならない。

ということで、CSSだけで矢印が作れないかと考えて、思いついたのが四角の二辺だけ border を指定して適当に回転する方法。


.leftArrow {
    display      : block;
    width        : 1em;
    height       : 1em;
    border-color : red;
    border-style : solid;
    border-width : 2px 2px 0 0;
    transform    : rotate(45deg);
}

本質とは関係ないのでベンダー・プレフィックスは省略して、こんな指定をすると矢印っぽくなる。

基本のクラスを一つ作っておけば、回転の角度とか色を変えたものを派生させるのは簡単。意味不明の div が出てくるのが嫌なら、矢印を付けたい要素の :after にでも設定してやれば良いだろう。いや、あるべき姿はそっちか。

とりあえずはこれで満足したのだが、世間はどうやってるんだろうと思ってググって、世間の広さを実感したのだった。いろんな発想をする人がいるんだね。良し悪しは、まあ、俺的にはちょっと微妙だったりするのだが。

その一つが、擬似クラスの :before と :after を併用するもの。

どちらにも塗り潰した四角形を設定するのだが、この塗り潰しを :before は矢印の色 :after は地の色として、ちょっとだけずらして重ねるのだ。


.leftArrow {
    display      : relative;
    position     : relative;
}
.leftArrow:before {
    content      : '';
    display      : block;
    width        : 1em;
    height       : 1em;
    position     : absolute;
    right        : 10px;
    top          : 50%;
    margin-top   : -0.5em;
    background   : red;
    transform    : rotate(45deg);
}
.leftArrow:after {
    content      : '';
    display      : block;
    width        : 1em;
    height       : 1em;
    position     : absolute;
    right        : 12px;
    top          : 50%;
    margin-top   : -0.5em;
    background   : white;
    transform    : rotate(45deg);
}

スタイルの定義はこんな感じ。すると

こんな風になる。ずらす幅を大きく、塗り潰す色を白ではなく灰色にすると、やっていることがよく分かるだろう。

これ、前にも後ろにも矢印が欲しいときには困ってしまうが、まあ、矢印はたいてい一つだけあれば十分だよな。背景が無地単色じゃないと、からくりがバレてしまうのが欠点か。

そしてもう一つ。縦横0のボックスに太い透明の border を指定し、一辺だけ色を付けるもの。


.leftArrow {
    display           : block;
    width             : 0;
    height            : 0;
    border            : 10px solid transparent;
    border-left-color : red;
}

こんな風になる。

こっちも、透明を灰色にしてみると、やっていることがよく分かる。

このやり方は、さっきのと違って透明を使っているので、背景を選ばない。矢印そのものが単独で存在しているので、配置も自由度が高い。上下左右は色を付ける辺で指定できてベンダー・プレフィックスを使う必要がないから、ブラウザを選ばないのも良い感じ。

欠点は、文書の論理構成上意味の無い空の要素（ほとんどの場合 div）が出来てしまうこと。見た目は奇麗なのだが、恰好だけで中身の無いという、何ともロクデナシな響きの要素が彼方此方にいるのは、何かちょっと、ねえ。

2013 09 08

nexus7

CSSで矢印