skillup

技術ブログ

デザイン

スマホサイト対策全般

投稿日:

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

viewport

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

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

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

横のはみ出しチェック

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

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

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

メディアクエリ

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

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

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

他にも随時追加予定

-デザイン
-,

執筆者:


comment

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

関連記事

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

アーカイブ