トラッカー スリムで軽量なデザインに詰まった、日々のガイダンスとモチベーション。数日間持続するバッテリーライフで、あなたの毎日をサポートします。
Fitbit 公式サイト：活動量計その他
トラッカー スリムで軽量なデザインに詰まった、日々のガイダンスとモチベーション。数日間持続するバッテリーライフで、あなたの毎日をサポートします。
【第72回】iPhone用の文字サイズ自動調整を解除する
さて、実は前回で、iPhone用トップページのデザインは出来上がっています。 しかし、ここでちょっと注意事項があります。 こちらの図をご覧下さい。 ▼▼▼ 変更前 ▼▼▼ ＜縦表示＞ ＜横表示＞ 縦表示の時と横表示の時で、文字サイズが大きく変わっているのがわかるでしょうか。 これ、実はiPhoneのSafariの機能の一つ、文字サイズの自動調整機能なのです。 iPhone版Safariは、小さい画面に効果的にWEBページを表示するために、画面やページの幅、他パーツとの相対的な位置付けなどに応じて、文字サイズを自動で拡大してくたりします。 非常に便利な機能ですね。 でも今回の私のデザインでは、どちらかというと文字サイズは変わってくれない方がありがたいです。 そこで今回は、この文字サイズの自動調整機能を解除してしまいましょう。 ▼▼▼ 変更後 ▼▼▼ ＜縦表示＞ ＜横表示＞ ★iPhone用の
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
MdN Design｜総合情報サイト
viewportを使えば、Webサイトの横幅をスマートフォン向けに最適化できる。基本的な書式は【1-1】のとおりだ。viewportにはさまざまなプロパティが用意されているので、コンテンツの内容に合わせた適切な値を指定しよう 【1-2】。 【1-1】指定しないプロパティはデフォルト値が適用されるため、すべてを記述する必要はない 【1-2】viewportのプロパティ一覧 viewportのプロパティの中でも特に重要なのがwidthの指定だ。iPhoneのデフォルト値は980pxに設定されているため、何 も指定しないとコンテンツが小さく表示されてしまう【2-1】。 値には数値も指定できるが、「devicewidth」で指定するのが一般的である【2-2】【2-3】。 【2-1】viewportのwidth指定なしの状態。コンテンツが縮小され、文字が小さくて読めない 【2-2】width=dev
スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 イクリプススペシャルサイトのケース | blog – NOBORU HIRABAYASHI
昨日立て続けにスマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させるサイトを見たので、それらをチェックしてみた。 以前の記事はこちら：スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 今回チェックするサイトはイクリプス SPECIAL WEBSITEのSP版：http://www.eclipse-avn.jp/sp/ 基本的には以前の記事に記載の方法と近いのですが、ビミョーに違っていてその理由がすいませんわかりません。 デモはこちら：http://noboruhirabayashi.com/test/content_fit1/ 手順1 UserAgentでiPhone、iPod、iPad、Androidの判定。 function userAgentCheck(){ var ua=navigator.userAgent;
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
natrixnatrix89/promptumenu @ GitHub
A jQuery plugin that allows you to display list items in a similar way like a iPhone home screen. If item count exceeds the displayed items on one screen, users can swipe through screens. Authors Jānis Zaržeckis (natrixnatrix89.net) Contact Jānis Zaržeckis (natrixnatrix89@natrixnatrix89.net) Download You can download this project in either zip or tar formats. You can also clone the project with Gi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AppSeed - Turn sketches into functioning prototypes fast by AppSeed Team — Kickstarter