レスポンシブWebデザインサイトを作る時に必要なデバイスのモニターサイズをまとめました
デバイスの画面サイズは色々あります レスポンシブWebデザインをする時に「スマートフォン」「タブレット」「PC」と大きく分けて3種類になります。 だからと言って、レスポンシブWebデザインの対応が3種類という訳ではありません。 今みなさんが使っているスマートフォンやタブレットは全部同じじゃないですよね。 iPhone、Android、iPad、iPad miniなどなど。 探してたら、「こんなにあったっけか・・・？」と思うくらいでした。 CMでJCOMさんも10万人にタブレット型テレビらしきものが当たるキャンペーン的な（曖昧ですみません）ものも行っている様ですし、これからもっともっと増えるのかもしれませんね。 という事で、現段階でよく使われているデバイスのサイズをまとめてみました。
【第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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
