menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 6 ↑) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. (10 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 2 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  5. ( 3 ↓) 【HTML5】スマホサイトの作成・基本編
  6. ( 5 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  7. ( - ↑) 【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗
  8. ( 9 ↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  9. ( 7 ↓) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【Mac】MacにInkscapeをインストール
このエントリーをはてなブックマークに追加

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

  • 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
このエントリーをはてなブックマークに追加