レスポンシブサイト制作

レスポンシブサイトとは何か。PCサイトとスマホサイトの作り方の違いとは何かを解説します。スマホサイトの特徴を知ることで、デザインやコーディングの違いを理 [ ...続きを読む ]

レスポンシブサイトでCSSを切り替えるサイズ「ブレイクポイント」をどのように考えるかを解説します。 [ ...続きを読む ]

PCサイトや印刷用ごとにCSSを切り替えることができるmedia属性とmedia属性にメディアクエリを使用して、デバイスサイズでCSSを切り替える方法を [ ...続きを読む ]

CSSファイルで、メディアクエリを使う方法を解説します。また、メディアクエリ内のonly、andキーワードの使い方も解説します。 [ ...続きを読む ]

レスポンシブサイトを設計するにあたり、3つの設計方法のメリットとデメリットを解説します。どの設計方法で行うのが最適かを比較しながら見ることができます。 [ ...続きを読む ]

レスポンシブサイトに必要なmeta要素の指定方法を解説します。主にviewportと電話番号の自動リンク対策をメインに解説します。 [ ...続きを読む ]

IE8以下でHTML5を有効にするhtml5shiv.jsとメディアクエリを有効にするcss3-mediaqueries.jsのダウンロードと記述方法を [ ...続きを読む ]

PCサイトが2カラムの場合のレスポンシブ化を解説。左右のカラムをスマホで表示した場合に、上下の位置を自在にコントロールする方法です。今回はfloatを使 [ ...続きを読む ]

PCサイトが3カラムの場合のレスポンシブ化を解説。左右にあるカラムをpositionを使いコントロールする方法です。この方法を使うとスマホ側での順番を自 [ ...続きを読む ]

複数カラムのレイアウトをレスポンシブ化する方法を解説。first-childやnth-child擬似クラスを使ったmarginの処理でレスポンシブ化しま [ ...続きを読む ]

画像をレスポンシブに対応させるための方法を解説。img要素、background-imageプロパティどちらでもレスポンシブに対応させるやり方を紹介しま [ ...続きを読む ]

「レスポンシブサイト制作」 一覧