menu
menu

スマホサイトの作成・レスポンシブデザイン | Webデザインラボ

キーワード検索

12月のアクセストップ10

  1. ( 2↑) CSSだけでドロップダウンメニュー
  2. ( 1↓) スマホサイトの作成・基本編
  3. ( 3-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 7↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) jQueryでドロップダウンメニュー
  7. (10↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 6↓) スマホ・タブレット・PCの振り分けいろいろ
  9. ( 8↓) Windows 10にApache2.4 VC11をインストール
  10. ( -↑) jQueryで日時を表示【実践でjQuery入門】
  • facebook16
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0

スマホサイトの作成・レスポンシブデザイン

  • Guide

HTML5

こんにちは(・∀・)

 レスポンシブデザインのWebサイトもだいぶ増えてきました。そこで今回はスマートフォン、タブレット、PCに対応したWebサイトをレスポンシブデザインで作りたいと思います。

レスポンシブデザインでWebサイトの作成

ブレークポイント

 レスポンシブデザインでWebサイトを作る際に決めなければならない事があります。それはブレークポイントの値です。ブレークポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。


 メディアクエリでmin-width: 769pxで指定した値は769px以上のデバイスサイズに適用されます。max-width: 768px768px以下のデバイスサイズに適用されます。

CSSサンプル

/*画面サイズ768px以下用*/
section {
	○○○○: ○○○○;
}
/*画面サイズ769px以上用*/
@media only screen and (min-width: 769px) {
section {
	○○○○: ○○○○;
}
/**/}

 ブレークポイントの目安としてですが、デバイスサイズを決めるとしたら、スマートフォンたて320px~480px、スマートフォンよこ・タブレットたて481px~768px、タブレットよこ・PC769px~が現在一般的に使われているデバイスサイズではないでしょうか。なのでこの辺を基準に考えたら良いのではないかと思います。


 ちなみにサンプルのブレークポイントmin-width: 769pxは、768pxまでの画面サイズと769px以上の画面サイズでモバイル用とPC用で分けております。


 ブレークポイントがいくつもあると管理が面倒だなって場合、メジャーブレークポイントを1つ決めて必要に応じてマイナーブレークポイントを作ればいいと思います。その際のメジャーブレークポイントは現在のところmin-width: 769pxが良いと思います。768px以下はモバイル用、769px以上がPC用とすればいいのではないでしょうか。


 HTMLのサンプルコードはスマホサイトの作成・基本編にあるHTMLコードをご参照ください。


 スマホサイトの作成・レスポンシブデザインは以上になります。レスポンシブデザインでは、横幅は可変サイズにするのがポイント!です^^


関連リンク

 スマホサイトの作成・基本編


 サイドバーがスライドするドロワーナビ(レスポンシブ)

 コンテンツがスライドするドロワーナビ(レスポンシブ)

 コンテンツがスライドするドロワーナビ

 HTML5でレスポンシブ3カラムレイアウト

 HTML5でレスポンシブ2カラムレイアウト

 ユーザーエージェントでCSSを振り分ける(クッキーを使用しない)

 ユーザーエージェントでCSSを振り分ける(クッキーを使用する)

  • カテゴリー:Guide
  • facebook16
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0