skillup

技術ブログ

デザイン

スマホサイト対策全般

投稿日:

スマホ対策のデザインに関するチェックリスト。

viewport

まずは横幅などがおかしくないかの確認

コピペで済ませていませんか?改めて学び直したい「Viewport」のすべて

実践!スマホサイトのviewport設定

横のはみ出しチェック

幅が100%超えないように下記のcssを追加

スマホサイトの横ぐらつき ~border-size:border-boxigについて

画像や文字などではみ出している要素がないかチェック。

メディアクエリ

幅によってある程度のコントロールを。

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

Media Queriesの基本的な実用方法と書き方

他にも随時追加予定

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …