menu
menu

キーワード検索

 

前月(5月)の人気記事トップ10 - 6/3/2019

  1. ( 3 ↑) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 1 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 8 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. (圏外↑) 【制作Tips】画面解像度一覧表
  7. ( 10 ↑) 【制作Tips】iPad画面解像度まとめ
  8. (圏外↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 9 - ) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 6 ↓) 【決定版】フォントの設定はこれで決まり❗️
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

レスポンシブデザインの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を振り分ける

  • レスポンシブデザイン
このエントリーをはてなブックマークに追加