DokuWikiで研究生活

メモする。好きを極める。アピールする。

ユーザ用ツール

サイト用ツール


Top     SiteMap

サイドバー

Top     SiteMap

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

最近の更新

template:size.html



「テンプレート」に戻る

サイトの幅サイズの検討

概要

サイトの幅サイズの検討には十分考慮する必要があります。

特に広告を考慮すると、難しいです。

検討結果

  • 1,024px
  • 1,280px
  • 1,366px
  • 1,440px


サイズ案

リキッドデザイン

PC、スマホ両方のサイト

サイト全体 サイドバーの幅 タブレットモードの幅 携帯電話モードの幅 CSS設定:body { min-width: xxxpx; }
1200px 300px 1100px 400px なし

主にPC用

サイト全体 サイドバーの幅 タブレットモードの幅 携帯電話モードの幅 CSS設定:body { min-width: xxxpx; }
1440px 300px 1300px 1000px 1150px
  • タブレットモードにするのが、1300pxにして、1366pxの画面でも、サイドバーを表示する。
  • CSS min-width:1150pxにして、スマホ、タブレットなどでもテーブルを見やすくする。
  • サイドバー300pxは一般的な広告サイズ


モニターサイズ

  • モニターサイズは、「1024×768」、「1280×800」も多い。
  • スマホは、320~640PX
ベンダー機種サイズ
DELL XPS 13 13.3インチ FHD AG (1920 x 1080)
Lenovo ThinkPad X1 Carbon 14.0型 (2560×1440 or 1920×1080)
hp HP EliteBook 820 G3 12.5インチ HD 1366×768
Mac MacBook Air 11.6インチ
標準解像度1,366×768ピクセル (16:9)
Mac MacBook Air 13.3インチ
標準解像度1,440×900ピクセル (16:10)
Mac MacBook Pro 13.3“ Retina Display 2560 × 1600


メモ

リキッドデザイン webデザインにおいて、ブラウザの横幅を変更した時にコンテンツの表示サイズも変更されるタイプのデザインのこと。サイズ可変デザイン。
レスポンシブ 単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法





「テンプレート」に戻る




template/size.html.txt · 最終更新: 2017/04/05 by oreda admin