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

1章. レスポンシブサイトとは何か。

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

2章. デバイスサイズとブレイクポイントの選定

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

3章. メディアクエリの使い方1（Media Queries）

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

4章. メディアクエリの使い方2（Media Queries）

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

5章. レスポンシブサイトの設計方法

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

6章. レスポンシブサイトに必要なmeta要素

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

7章. IE8以下でもレスポンシブサイトを有効にする

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

8章. 2カラムレイアウトのレスポンシブ化

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

9章. 3カラムレイアウトのレスポンシブ化

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

10章. 複数カラムのレスポンシブ

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

11章. 画像のレスポンシブ

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