WEB・アプリ開発・音楽制作 | Kaleidoscope » スマホ

画像を使わずCSS3だけで尖ったBack・Nextボタンを作る方法

kosuke — Sat, 14 May 2011 02:50:30 +0000

画像を使わずにCSS3だけで尖ったボタン

CSS3だけで、iOS風のBackやNextの尖ったナビゲーションボタン作る方法ないかな〜と探していたところ、良記事があったので紹介します。~~Androidで確認してませんが、webkit向けなのでたぶんAndroidでも大丈夫だと思います。~~Androidはひと工夫必要そうです。

CSS3 Wizardry -Back and Next Buttons Revisited-
CSS3 Wizardry -Subpixel Rendering-

Buttons Revisitedの方が改良版で疑似要素バージョンみたいです。原理はSubpixel Renderingの方がわかりやすいです。

ポイントとなるHTML

ボタンを構成する要素はこれだけ。
[html]

Back

[/html]

ポイントとなるCSS

その疑似要素をtransformで45度回転、mask-imageでつなぎ目を滑らかにしてるみたいですね。
なるほど…その発想はなかったです。発想って大事だなーと再認識しました（笑）
[css]
.button.bordered.back:before {
　…略…
-webkit-transform: rotate(45deg);
-webkit-mask-image:
-webkit-gradient(linear, left bottom, right top,
from(#000000),
color-stop(0.5,#000000),
color-stop(0.5, transparent),
to(transparent));
position: absolute;
left: -9px;
top: 2.5px;
-webkit-background-clip: content;
}
[/css]

スマートフォンサイトはWiFi接続時はそうでもないのですが、3G回線の時は通信速度が落ちるので画像を用いずCSS3でUIを作るというのは、とても有効な手段です。

応用すれば、いろんなデザインができそうですね。

デモ

ご興味のある方は導入されてみてはいかがでしょうか。
・デモ
・サンプルソースのダウンロード

【2011.5.14 追記】Androidで確認したところ、形的に尖るのですが、マスクがたぶん効かない状態になってしまうようです。Androidはひと工夫が必要ですね。
【2011.5.15 追記】ちなみに対象となるブラウザはwebkit系ブラウザです。（Safari、Chrome、Mobile Safari）※Androidは工夫が必要と思われる。

他の人気エントリ

Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）

kosuke — Sat, 07 May 2011 04:35:55 +0000

最近いろんなスマホ最適化されたサイトを見るようになりました。
それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。

今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。

viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに

端末の横幅を最大限に活かした方がよい

特に理由が無ければ、大抵の場合は、
viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする
自然な考え方で考えると、PCに比べるとただでさえ狭いディスプレイサイズなのですから、端末の画面をフルに使った方が良い訳です。

たぶんこれは説明するより、例を挙げて見ていった方がわかりやすいと思います。
下記のようなHTMLソースの場合で試してみたいと思います。
[html]

Apple Products

　　…略

[/html]

1. 良いと思われる例（リキッドスタイル）

・viewport：width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0
・コンテナ幅 width:100% 　

念のため、上記のviewportの記述の簡単に説明をしておくと、width=device-width：横幅はデバイスの幅、initial-scale=1.0：初期の拡大縮小サイズ、minimum-scale=1.0,maximum-scale=1.0：最小・最大の拡大縮小サイズ、user-scalable=0：ユーザーが拡大縮小できるか否か（0またはnoで不可）

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。
　

viewport：width=device-width
コンテナ：100%（iPhone 縦）

viewport：width=device-width
コンテナ：100%（iPhone 横）

iPhone：ご覧のように、縦でも横でも違和感無く表示されています。

viewport：width=device-width
コンテナ：100%（Android 640×960 縦）

viewport：width=device-width
コンテナ：100%（Android 640×960 横）

Android：iPhone同様に、縦でも横でも違和感無く表示されています。画面解像度は640×960にしています。実機（IS03）でも同様でした。

2. ときどき見かける例（iPhone3GSまでの時代なら、そこそこ問題なかった固定スタイル）

・viewport=320px （幅指定以外はなし）
・コンテナ幅 width:320px

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。

viewport：width=320px 他の指定無し｜コンテナ幅320px（iPhone横向き）

viewport：width=320px 他の指定無し｜コンテナ幅100%（Android WVGA）

iPhone：とりあえずレイアウトは保たれているが、320px→480pxに無理矢理引き伸しているので、表示範囲も狭く、3G・3GSでさえ画像が引き伸されてしまう。

Android：左右に余白ができてしまう。個人的にはとても不自然に感じます。

1のデメリット

という感じで、個人的には１のリキッドスタイルがオススメなのですが、デメリットもあります。
ぱっと思い当たるケースで言うと、

・絶対配置レイアウトをしたい場合
・CSS3やJSでアニメーションなどしたい場合

全体がリキッドなため、変動的なピクセル指定が難しくなります。
たとえば、「要素を横幅いっぱい分アニメーションで動かしたい」といったときに、端末の向きによって横幅は変わります。端末の機種でも横幅が変わるかもしれません。
縦のときは320px動かす、横のときは480px動かすといったような処理が必要になってきます。

２のレイアウトスタイルであれば、横幅は縦でも横でも320pxですから、いつでも320px動かせばいいんです。

UIに命をかけたようなサイトであれば、いいと思うのですが、個人的には基本的なレイアウトの方が重要かなーと思っています。

また、dpiとかいろいろ細かい設定もできるのですが、その辺は設定せずにサイトのレイアウトや構成で補った方がよいというのが、個人的な見解です。
次はこの辺か画像について書きたいと思ってます。

他の人気エントリ

スマホ最適化でやったこと

kosuke — Wed, 27 Apr 2011 15:03:03 +0000

※Androidでアクセスされた方は使用感をいただけると幸いです。
（サイトトップ）

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）

1.PCとスマートフォンの振分け

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

[html]

…

[/html]

スマートフォンビュー

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。

2.viewportの設定

ほとんどお決まりの記述ですね。
[html]

[/html]

これについては、いろんなサイトで情報が出ていますので、説明は割愛します。
下記サイトなどをご覧ください。

3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

[html]

[/html]

ホーム画面アイコンの設定

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）

4.横向き時のテキスト拡大の無効化

スマートフォン時のCSSには次の記述をしています。
[css]
body {
…
-webkit-text-size-adjust: none;
…
}
[/css]

デフォルトのまま

拡大表示無効

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。

5.リキッドレイアウト

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

悪い例：横幅固定にした場合の横向きビューのイメージ

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。

6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。
[javascript]
$(‘#mainImageArea>#mainImages ul li’).flickSlide({target:’#mainImageArea’, duration:5000});
[/javascript]

スマートフォンビュー

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。

LightBox風の画像表示の実装

こちらも自前で作成しています。

LightBox風のUI

PC時はColorBoxという海外の方のプラグインを使用させてもらってるのですが、それをスマートフォン時でも同様に使うと想定どおりにおかしな表示になりました（笑）

なので、こちらのUIも独自にjQueryで作成しました。PCのように凝ったUIにするとだいぶ重くなってしまうので、とりあえずシンプルにしています。

7.手付かずな部分…

だいぶ基本的な部分は作ったものの、元々サイトの構成ができてない上、細かい部分で最適化が行き届いてないです。
たとえば、リンクがボックスリンク（？）になってなかったり…タッチしにくいですよね。

とりあえずは、ちょっと凝ったUIの部分に時間を割いてみました。

もし、なにか気づかれた部分などあればお知らせください。
まだまだ知らないことが多く、日々勉強中です。

長くなってしまいましたが、少しでもみなさんのご参考になれば幸いです。

他の人気エントリ