レスポンシブサイト制作

• 
  レスポンシブサイト制作

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

  レスポンシブサイトとは PC、タブレット、スマホなど異なるデバイスで、画面サイズに応じてCSSを切り･･･

• 
  レスポンシブサイト制作

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

  モバイルのデバイスサイズ 現在、モバイルデバイスはiPhoneをはじめ、様々な種類が登場しています。･･･

• 
  レスポンシブサイト制作

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

  メディアクエリとは CSS3から導入されたサイズに応じて、CSSを切り替える仕様です。 ※Inter･･･

• 
  レスポンシブサイト制作

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

  CSSでのメディアクエリの使い方 CSSファイルでは、下記のような記述になります。 { }内にセレク･･･

• 
  レスポンシブサイト制作

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

  設計に関して レスポンシブサイトは、PC、スマホともHTMLの内容をできるだけ同じにすることが前提に･･･

• 
  レスポンシブサイト制作

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

  headタグの確認 1章でダウンロードしたファイルのheadタグを確認してみましょう。下記のようにな･･･

• 
  レスポンシブサイト制作

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

  IE8以下対策のJavascript サンプルサイト内のheadタグ内にある下記のコードがIE8対策･･･

• 
  レスポンシブサイト制作

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

  2カラムレイアウトからのレスポンシブ PCサイトで、floatを使った2カラムレイアウトを1カラムに･･･

• 
  レスポンシブサイト制作

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

  3カラムからの変更 3カラムのレスポンシブは、前章の「2カラムレイアウトのレスポンシブ化」のfloa･･･

• 
  レスポンシブサイト制作

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

  複数カラムのレスポンシブの対応 複数カラムのレスポンシブは、PCサイトのmarginの使い方がポイン･･･

• 
  レスポンシブサイト制作

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

  画像をレスポンシブに対応させる 画像を使う方法としてimg要素またはbackground-image･･･