menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5 Tips】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【制作Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【JavaScript Tips】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Guide

HTML5

こんにちは(・∀・)

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

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

ブレークポイント

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

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

CSSサンプル

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

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

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

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

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


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

関連リンク

スマホサイトの作成・基本編
クッキーでスマホ・タブレット・PCを振り分ける
スマホ・タブレット・PCを振り分ける

  • カテゴリー:Guide