casemobile公式さんの記事一覧

  • 単純なCSS 2Dアニメなら「transform:translate(x,y)」を使おう

    単純なCSS 2Dアニメなら「transform:translate(x,y)」を使おう

    一般的にスマートフォン向け(特にiPhone)の場合は、単純な2D移動でも「transform:translate」ではなく「transform:transform3d」を使った方がCSSアニメーションが早いと言われています。これは、transform3dを使ったときにiPhone(多分Androidも3.0から)のハードウェアアクセラレーションが有効になるためと言われているためです。ただ、普段

  • 【Android4.0】position:fixedしたときに1pxのスキマが出来てしまう問題

    【Android4.0】position:fixedしたときに1pxのスキマが出来てしまう問題

    Android4.0で「position:fixed」を使って要素を画面の一番上に固定した場合、謎な1pxのスキマができてしまいます。ページを表示したタイミングでは問題ないのですが、スクロールしていくとその下にある要素がチラチラと1px分表示されてしまいます。#fixedHeader{ position: fixed;top:0px;left:0px;z-index:10; back

  • センス良し!スマホサイトのデザインギャラリーサイト10選

    センス良し!スマホサイトのデザインギャラリーサイト10選

    スマホサイトのデザインを考えるときに参考になりそうなサイトを10サイトご紹介します。どれも参考になりますよー!センスが良く、デザイン的にも参考になるさいとのデザインが集まっています。iPhoneだけでなく、iPadやiOS7に特化したデザインも掲載されていて便利です。こちらも良いセンスのサイトがたくさん掲載されています。UIに特化したサイトになっており、機能別にギャラリーを見ることができ、参考に

  • スマホ向けのフリックjQueryプラグインは「flipsnap.js」がおすすめ

    スマホ向けのフリックjQueryプラグインは「flipsnap.js」がおすすめ

    iPhoneアプリ名 :Full Screen Capture – MobWeb.Goodyリリース : 2012/05/21開発 : zoomone.net価格 : ¥85いつも開発中のページをクライアントに見せるときには、ページのキャプチャー資料も一緒にお渡ししているのですが(それに赤入れしてもらう)、いちいち1スクリーン分ちまちまキャプチャして繋げるのはとっても手間です。かといって、PCブ

  • スマホの数字あれこれを探す時に役立つサイト3選

    スマホの数字あれこれを探す時に役立つサイト3選

    アップルが公式発表している、iOSのバージョン別シェア。80%以上がすでにiOS7です。(※このグラフにはiPadも含まれていると思われます。)Googleが提供しており、オフィシャルな数字が公開されています。Jelly Bean(4.1+)が半数以上になってきましたね。OSシェア以外にも、画面サイズ、Open GLのバージョンシェアなども公開されています。世界のスマートフォンの利用動向のレポー

  • UIが素敵!iPhone向けウェブアプリ「Sun — simple weather app」

    UIが素敵!iPhone向けウェブアプリ「Sun — simple weather app」

    「Sun」というお天気アプリを紹介します。こちら、ネイティブアプリではなく、ブラウザで動作するウェブアプリです。iPhoneでサイトにアクセスし、ホーム画面に追加します。位置情報を聞いてくるので許可します。すると、画面が立ち上がります。フリックした後の動きが可愛い!まるでネイティブのアプリのようです。Sunのようなアニメーションは、CSS3アニメーションの「transform」を使って実装するこ

  • 【HTML5 & jQuery】iPhone / Android入力フォームの制御方法

    【HTML5 & jQuery】iPhone / Android入力フォームの制御方法

    iPhoneとAndroidでは入力フォームの仕様・タグの対応状況に違いがあります。そこで、実際に実機で検証してみました。※端末に搭載された標準ブラウザーで検証を行っています。HTML5から実装された「placeholder=”"」を使います。これは、入力フォームに予め文字を表示させておくタグです。HTML5に対応していないブラウザでは、Javascriptで制御したりと面倒だったプレースホルダ

  • iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法

    iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法

    iPhoneやAndroidでもHTML5のvideoタグを利用することで、YouTubeなどのアプリを立ち上げる事無くブラウザ内で動画を再生することができます。しかしこのビデオタグ…端末によって動作が本当にまちまちで扱いにかなり苦労します。以下、iPhone/Androidのブラウザ内で動画を再生させる時にハマりそうな部分をまとめました。ここで書いた内容は細かい部分なので、「videoタグって

  • 【スマートフォン向けサイト】フォントサイズの指定には、remを使おう

    【スマートフォン向けサイト】フォントサイズの指定には、remを使おう

    CSSでフォントサイズの設定する際、「em」や「px」を使う事が多いと思うのですが、スマートフォン向けサイトの場合は全てのブラウザがCSS3に対応しているのでCSS3から新しく登場した単位である「rem」で設定するのがおすすめです。従来の「em」と似ていますが、「rem」はemとは違い親要素の値を継承せずルート(html)で設定された値だけを継承します。「rem」 = 「root」+「em」です

  • JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする

    JSを使わずにCSS3の「appearance」を使ってセレクトボックスを自由にデザインする

    「appearance」はCSS3で追加された新しいプロパティです。セレクトボックスのCSSカスタマイズはあまり自由度が無いので、一度「appearance」プロパティでカスタマイズしやすいUIを設定し、それから反映させたいCSSを書いていきます。※PCブラウザはappearanceに対応していないものもあるので、スマホ向けサイトの実装時に向いています。appearanceに「button」を設

  • 【iOS7でSafariが大幅リニューアル】既存サイトのデザインで気をつけるべき4つのこと

    【iOS7でSafariが大幅リニューアル】既存サイトのデザインで気をつけるべき4つのこと

    昨年発表された「iOS7」は、「フラットデザイン」が採用され、見た目も操作性もがらっと変わりました。もちろん、標準ブラウザ「Safari」も大幅にUIが変わりました。既にあるページに対して気をつけるべきことをまとめました。目次1. ブラウザの縦サイズが以前よりも長くなった2. メニューアイコンが変わった3. 左右のふちからフリックすると、前後のページに戻る / 進む4. ウェブクリップアイコンの

  • 世界のスマートフォンの利用動向を知るGoogle「Our Mobile Planet」

    世界のスマートフォンの利用動向を知るGoogle「Our Mobile Planet」

    Google「Our Mobile Planet」では、48 か国を対象にスマートフォンの普及状況と利用状況を調べることができます。Googleが米調査会社Ipsosおよびモバイルマーケティングを推進する非営利団体MMA(Mobile Marketing Association)と共同で実施しています。サイト内ではいろんなソートができるようになっています。逆にソートが面倒だ!という方は、日本語で

  • 【jQueryプラグイン】スマホサイトにドロワーを実装してみよう!

    【jQueryプラグイン】スマホサイトにドロワーを実装してみよう!

    Facebookアプリなんかでもおなじみ。ドロワーとは、左(もしくは右)からスライドして出てくるナビゲーションです。ドロワー = 引き出し。アプリはもちろん、スマートフォンサイトでも実装しているサイトが増えてきています。1. なめらかにアニメーションして左(もしくは右)からメニューがスッと開く2. ドロワー表示時は、ページの縦の長さがドロワーの縦サイズ(短い場合は端末の縦サイズ)と同じになる3.

  • 【Androidサイト】ホーム画面用のウェブクリップアイコンを設定する

    【Androidサイト】ホーム画面用のウェブクリップアイコンを設定する

    AndroidもiPhoneと同じくウェブクリップアイコンを設定することができます。アイコンを設定したいページのheaderに以下のように記述するだけです。iPhoneの場合は、ルートの階層に「apple-touch-icon.png」または「apple-touch-icon-precomposed.png」(光沢処理無し)と名前をつけたPNG画像を置いておけば自動的にウェブクリップアイコンに設

  • ローカルのファイルを参照させるアプリ、WEB DEBUGGING PROXY「Charles」

    ローカルのファイルを参照させるアプリ、WEB DEBUGGING PROXY「Charles」

    他のブログでもたまに取り上げられているので、わざわざ紹介しなくても良いかなと思っていたのですがものすごく便利なのでやっぱり紹介したいアプリ。それがプロキシデバッグアプリ「Charles」!「私の救世主や〜!!!」というぐらい便利に使えるときがあります。Charlesを使うことで、Webの通信のデバッグを行うことができます。いろいろなデバッグができるのですが、本記事では「マップローカル」という機能

  • <
  • 1
  • >