skillup

技術ブログ

デザイン

スマホサイト対策全般

投稿日:

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

viewport

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

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

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

横のはみ出しチェック

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

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

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

メディアクエリ

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

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

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

他にも随時追加予定

-デザイン
-,

執筆者:


comment

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

関連記事

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素2 レイアウトに関して2.1 …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

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

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