[B! モバイル] bamboo_nのブックマーク

モバイルアプリのUI設計に大切な、7つの基本アニメーションまとめ

海外デザインブログ Yalantis で公開された「7 Types of Animations for Your Mobile App」より許可をもらい、日本語抄訳しています。「良いデザインは明きらかで、偉大なデザインは目に見えない。（英: Good design is obvious and great design is invisible.）」ということばを聞いたことがあるかもしれませんが、モバイルアプリの開発にアニメーションを利用するときも、同じ基本原則が適用できます。うまく適用されたアニメーションは、ユーザーフレンドリーで魅力的にアプリを仕上げるだけでなく、ユーザーの邪魔になることもありません。どんなアニメーションにおいても重要となるタスクは、ユーザーにアプリの論理、ロジックを説明することです。今回は、これまでのアプリ開発から学んだ、実践的なデザイン制作で役立つ、美しいアニ

bamboo_n 2017/05/10

リンク

CSS：スマホとPCサイトの文字サイズを固定する | raining

PCサイトを構築時にスマホでページを閲覧すると一部の文字サイズが大きく拡大されて表示されることがありました。 iPhoneやAndroidなどでは文字が見やすいように文字サイズを自動調整して、大きく表示してしまうようです。しかし、文字が拡大してしまうとPCサイト用に構築したデザインが崩れてしまったりすることがあります。文字サイズを勝手に拡大されないようにするには CSSの「-webkit-text-size-adjust」プロパティを指定すると回避できます。下記にCSSの「-webkit-text-size-adjust」プロパティを使用して、スマホ・PCサイトの文字サイズを自動調整して拡大表示させずに固定して表示する方法をメモします。 ■ 「-webkit-text-size-adjust」テキストの文字サイズを調整するプロパティです。デフォルトは「auto」なので文

bamboo_n 2016/09/11

リンク

WordPressでスマートフォン・タブレット・PCで表示を変更する条件分岐方法 - ホワイトベアー株式会社

こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。スマートフォンやタブレットでも見やすいようにレスポンシブデザインにしているWEBサイトも多いと思います。 PCでは表示させるが、スマートフォンでは非表示にしたり、PCとスマートフォンでは異なる広告を表示させたりなど。 CSSのMedia Queries（メディアクエリ）を使って、「display:none」と「display:block」を切り替えてスタイルを変更できますが、WordPressではバージョン3.4から導入されている「wp_is_mobile()」というあらかじめ用意されている関数を使うこともできます。しかしながら、「wp_is_mobile()」はモバイル端末である「スマートフォン・タブレット」であるかどうかを判別するための関数であり、「スマートフォン」と「タブレット」を分けることはできません。 iPad、K

bamboo_n 2016/03/03

リンク

WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法15種

スマートフォンなどのモバイル端末にWebサイトを対応させるのに、CSS3のMedia Queries（メディアクエリ）を使って、レスポンシブデザインにすることが多いと思います。しかし、Google Adsenseなどの広告は表示がはみ出てしまったりします。スマートフォンなどのモバイル端末には、別の表示にしたり、ブラウザ別に表示を変えたい時があるのではないでしょうか？例えば、PCサイトでGoogle Adsenseの728×90を使っているけどiPhoneやAndroidなどのモバイルでは、レイアウトが崩れるので300×250に変えたいな等です。今回の投稿では、WordPressでスマートフォン別、ブラウザ別に条件分岐する方法を集めました。スマートフォン・タブレット端末スマートフォン・タブレット端末別の条件分岐方法です。モバイル端末で表示を変えるwp_is_mobile() PCブ