-
-
1章. レスポンシブサイトとは何か。
2017/01/01 レスポンシブサイト制作
レスポンシブサイトとは何か。PCサイトとスマホサイトの作り方の違いとは何かを解説します。スマホサイトの特徴を知ることで、デザインやコーディングの違いを理 [ ...続きを読む ]
-
-
2章. デバイスサイズとブレイクポイントの選定
2017/01/02 レスポンシブサイト制作
レスポンシブサイトでCSSを切り替えるサイズ「ブレイクポイント」をどのように考えるかを解説します。 [ ...続きを読む ]
-
-
3章. メディアクエリの使い方1(Media Queries)
2017/01/03 レスポンシブサイト制作
PCサイトや印刷用ごとにCSSを切り替えることができるmedia属性とmedia属性にメディアクエリを使用して、デバイスサイズでCSSを切り替える方法を [ ...続きを読む ]
-
-
4章. メディアクエリの使い方2(Media Queries)
2017/01/04 レスポンシブサイト制作
CSSファイルで、メディアクエリを使う方法を解説します。また、メディアクエリ内のonly、andキーワードの使い方も解説します。 [ ...続きを読む ]
-
-
5章. レスポンシブサイトの設計方法
2017/01/05 レスポンシブサイト制作
レスポンシブサイトを設計するにあたり、3つの設計方法のメリットとデメリットを解説します。どの設計方法で行うのが最適かを比較しながら見ることができます。 [ ...続きを読む ]
-
-
6章. レスポンシブサイトに必要なmeta要素
2017/01/06 レスポンシブサイト制作
レスポンシブサイトに必要なmeta要素の指定方法を解説します。主にviewportと電話番号の自動リンク対策をメインに解説します。 [ ...続きを読む ]
-
-
7章. IE8以下でもレスポンシブサイトを有効にする
2017/01/07 レスポンシブサイト制作
IE8以下でHTML5を有効にするhtml5shiv.jsとメディアクエリを有効にするcss3-mediaqueries.jsのダウンロードと記述方法を [ ...続きを読む ]
-
-
8章. 2カラムレイアウトのレスポンシブ化
2017/02/10 レスポンシブサイト制作
PCサイトが2カラムの場合のレスポンシブ化を解説。左右のカラムをスマホで表示した場合に、上下の位置を自在にコントロールする方法です。今回はfloatを使 [ ...続きを読む ]
-
-
9章. 3カラムレイアウトのレスポンシブ化
2017/02/12 レスポンシブサイト制作
PCサイトが3カラムの場合のレスポンシブ化を解説。左右にあるカラムをpositionを使いコントロールする方法です。この方法を使うとスマホ側での順番を自 [ ...続きを読む ]
-
-
10章. 複数カラムのレスポンシブ
2017/03/10 レスポンシブサイト制作
複数カラムのレイアウトをレスポンシブ化する方法を解説。first-childやnth-child擬似クラスを使ったmarginの処理でレスポンシブ化しま [ ...続きを読む ]
-
-
11章. 画像のレスポンシブ
2017/03/12 レスポンシブサイト制作
画像をレスポンシブに対応させるための方法を解説。img要素、background-imageプロパティどちらでもレスポンシブに対応させるやり方を紹介しま [ ...続きを読む ]