Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[基礎知識][CSS][モバイル]レスポンシブデザインの基本

基礎知識 CSS モバイル

レスポンシブデザインとは

  • Responsive Web Design
  • PCからスマホまで、あらゆるデバイスに最適化したWebサイトを単一のHTMLで実現する手法
  • スクリーンサイズを基本にCSSでレイアウト調整する
  • 例：キリンKIRIN｜キリン
  • OSやデバイスをUAで判別して個別サイトに振りわけるアプローチ(htacccess)とは別

レスポンシブWebを構成する技術要素

フルードグリッド(Fluid Grid)
  • グリッドデザインで配置した要素を、横幅が変わってもレイアウトを維持するフルードデザインを組み合わせたもの
フルードイメージ（Fluid Image）
  • レイアウトの大きさに追随して画像サイズを変える手法
メディアクエリー（Media Query）

メディアクエリの基本的なCSS記述

1つのCSSに記述
body{
  background-color: #0CC; /* 基本 */
}
@media screen and (max-width: 959px) and (min-width: 641px){ /* タブレット */
  body{
    background-color:#9F0;
  }
}
@media screen and (max-width: 640px){ /* スマホ */
  body{
    background-color: #F99;
  }
}
幅に応じてCSSを複数設定
<link rel="stylesheet" href="css/style-l.css" media="only screen and (min-width:960px)">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (max-width: 959px) and (min-width: 641px)">
<link rel="stylesheet" href="css/style-s.css" media="only screen and (max-width:640px)">
メディアクエリに記述するときの注意
  • positionレイアウトをメディアごとに記述する(メディアによってpositionレイアウトを解除する)ときは、position:staticを指定する

モバイルフレンドリーテスト

テストツール

Shift+Ctr+M(FireFOX)
  • ブラウザサイズを調整できる