WIKIWIKI.jp Sample Wiki*

※上級者向け

基本的な使い方
- 比率による幅の固定
- 絶対値による幅の固定
レイアウトの切り替わりポイントについて
- デバイス幅ごとの比率指定
- 複合的な切り替わりポイント

レスポンシブデザインとは、どんな画面サイズのデバイスでも最適に見えるようにするウェブページの作り方です。レスポンシブデザインにおけるレイアウト方針でもっとも有効なのは、画面サイズによって水平配置と垂直配置を切り替える方法です。WIKIWIKI はスマートフォン専用画面を廃止し、レスポンシブデザインに切り替わりました。

responsive_layout_container および responsive_layout_item は、ユーザーページの記事にもこのレイアウト方針を提供するプラグインです。

基本的な使い方

responsive_layout_container の中に responsive_layout_item を複数置くことで、幅の広い画面 (デスクトップ) では二段組や三段組、幅の狭い画面 (モバイルデバイス) では縦積みになる記事レイアウトが可能になります。デフォルトでは、内容量に応じて列幅が自動的に分配されます。

#responsive_layout_container{{{
#responsive_layout_item{{
内容
}}
#responsive_layout_item{{
内容
}}
}}}

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。

加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

比率による幅の固定

デスクトップ時の段組の比率が内容によって変わるのを防ぐには、responsive_layout_item に 1 ～ 12 の数値を指定します。合計が 12 になるように調整すると綺麗に幅が分配されます。

#responsive_layout_container{{{
#responsive_layout_item(8){{
内容
}}
#responsive_layout_item(4){{
内容
}}
}}}

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、... 重要である。

絶対値による幅の固定

比率による指定ではどうしても水平レイアウトに無駄な余白や幅の不足ができてしまう場合、数値に px をつけて、特定の列の幅をピクセル固定値で指定することができます。残りは自動を示すため auto と書くことができます (何も書かず自動決定される最初の例はこの auto と同じ意味です) 。

#responsive_layout_container{{{
#responsive_layout_item(150px){{
内容
}}
#responsive_layout_item(auto){{
内容
}}
#responsive_layout_item(150px){{
内容
}}
}}}

レイアウトの切り替わりポイントについて

responsive_layout_container のレイアウト切り替わりポイントは 4 段階あります。

N モバイルデバイスを含む全てでつねに水平レイアウト
S デスクトップとタブレットでは水平だがモバイルデバイスでは垂直になる *
M デスクトップでは水平だが中間サイズ (タブレット) 以下では垂直になる
L デスクトップでもつねに垂直になる

デフォルトは S です。
(ヒント: default スキンの初期設定では、デスクトップとタブレットで本文領域のサイズにあまり差がないため、S と M を使い分けなくてもうまくいきます)

デバイス幅ごとの比率指定

responsive_layout_item の幅比率指定も、切り替わりポイントに順じ、「基本の幅」「タブレット水平時の幅」「モバイルで水平時の幅」を指定することができます。通常は基本幅のみで十分です。が、つねに水平レイアウトのときモバイルデバイスで領域が狭くなりすぎる場合や、WIKI 設定によってデスクトップとタブレットの間で画面幅の違いが大きすぎる場合に活用できます。

これが有効なのは比率指定の場合のみです。ピクセルによる絶対値指定には複数の値を指定できません。(そもそもの利用目的とマッチしないため)

#responsive_layout_container(N){{{
#responsive_layout_item(3,4,6){{
内容
}}
#responsive_layout_item(9,8,6){{
内容
}}
}}}

すべてのデバイスで左右配置

(大きめの画像サイズ指定でも枠の中に収まるよう縮小されます)

すべてのデバイスで左右配置

レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。

デスクトップでのみ左右配置

複合的な切り替わりポイント

切り替わりポイントの高度な使い方として、responsive_layout_container を入れ子にする方法があります。「この列はタブレットで縦になって、この列はモバイルで縦になる」といった、段階的なレスポンシブデザインが可能になります。

#responsive_layout_container(S){{{{
#responsive_layout_container(M,8,6){{{
#responsive_layout_item(6){{
内容
}}
#responsive_layout_item(6){{
内容
}}
}}}
#responsive_layout_item(4,6){{
内容
}}
}}}}