skillup

技術ブログ

デザイン

スマホサイト対策全般

投稿日:

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

viewport

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

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

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

横のはみ出しチェック

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

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

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

メディアクエリ

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

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

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

他にも随時追加予定

-デザイン
-,

執筆者:


comment

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

関連記事

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-61787 …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …