• RSS
[JS]スマホアプリのように左右からメニューをスライド表示できるjQueryプラグイン「mmenu」

スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグイン mmenu のご紹介です。

オプションで色々カスタマイズができますが、まずは今回は mmenu の基本的な設置方法から使い方までをご紹介します。
続きを読む

iPhone でホーム画面にサイトのブックマーク用アイコンを設置する方法

iPhone でWEBサイトをブックマークして、ホーム画面にアイコンを設置する方法のまとめです。

今回はアプリのお話ではありませんが、「アイコン画像をどのサイズで用意すれば良いのか?」を考える上で、iPhone、iPad、Android アプリのアイコン画像サイズのまとめ の記事でも紹介させていただいたアイコンサイズも参考にしています。
続きを読む

[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」

スマホサイトを構築する上で厄介なのが「実機での動作検証」です。

細かい動きは実機を使って厳密にチェックする必要がありますが、レイアウトが崩れていないか?のチェックをするのであれば、iPhone用の無料シミュレータ「iPhoney」を使うと便利です。
続きを読む

iPhone、iPad、Android アプリのアイコン画像サイズのまとめ

iPhone、Android のアプリやスマホサイト向けに「どのサイズのアイコン画像を用意すれば良いのか?」を調べていると、各ブログで色々紹介されていましたので備忘録としてまとめました。
続きを読む

[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法

スマホサイトでリンクをタップすると、iPhone(iOS)ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。

このグレーの影やオレンジの枠(ハイライト表示)をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む

[CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ

レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。

「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。
続きを読む

[PHP]PHPでiPad、iPhoneのユーザーエージェントを判別して振分処理を行う方法

WEBサイトを閲覧する環境もだいぶ変わってきまして、

今ではPC以外のスマートフォン、iPadによるアクセスも増えてきました。

今までPCでの閲覧に適したサイトデザインだったので、iPadやiPhone見ても正常に見えないよ!!ということもあると思いますが、それぞれのデバイス別に最適化するのもちょっと面倒…
続きを読む

[CSS]スマホサイトで、端末を横にしても文字サイズを拡大させない方法

iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう!」と困った経験があるかもしれませんが、

CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。
続きを読む

[HTML]スマホサイトでお世話になる <meta name=”viewport”> の設定のまとめ

meta viewport は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。

特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。
続きを読む