DokuWikiで情報発信

個人での情報発信や社内での情報共有に便利なDokuWikiを紹介するサイトです。

ユーザ用ツール

サイト用ツール


サイドバー

目次

DokuWikiを理解

DokuWikiの構築

よく確認するページ

template:size.html



「テンプレート」に戻る

サイトの幅サイズの検討

概要

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

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

検討結果

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


DokuWikiレイアウトでの前提知識

通常時のレイアウト サイドバーがあるレイアウトです。
タブレットモードのレイアウト サイドバーが通常のサイドではなく、上にくるレイアウトです。
携帯モードのレイアウト


サイズ案

リキッドデザイン

PC、スマホ両方のサイト

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

主にPC用

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

社内Wiki(PC用)

サイト全体 サイドバーの幅 タブレットモードの幅 携帯電話モードの幅 CSS設定:body { min-width: xxxpx; }
1700px 300px 1000px 400px 1150px
  • 基本モニターが24インチ以上のPCのため、横幅は広めです。
  • ノートPCのモニターでもサイドバーを表示するために、タブレットモードの幅は(1000px)にします。
  • 携帯電話モードは考えないので、400pxとかありえない数字にします。


モニターサイズ

  • モニターサイズは、「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 · 最終更新: 2018/10/15 by oreda admin

ページ用ツール