h2vR.js - レスポンシブデザインへの対応 - チュートリアル

レスポンシブデザインへの対応

h2vR.js は、縦書きレイアウトに必要なフォントサイズ・行間スペース・1行あたりの文字数・領域の横幅などの値を、縦書きにしたい要素に指定されているスタイルシートあるいはクラス名から取得して処理を実行します。

スタイルシートの @media クエリを利用してスクリーン（ウインドウ）サイズによって適用されるスタイルを切り替える、いわゆるレスポンシブデザインを採用しているページでも、h2vR.jsは特別な設定を追加することなく、現在のスクリーンサイズでのスタイル値を適切に読み取って縦書き表示を行うことができます。

デスクトップPC からの閲覧時などで、閲覧者側がブラウザのウインドウサイズを変更した場合にも、h2vR.js はその変化に追随して縦書き要素を適切に再描画します。

以下に簡単な例を示します。

【スタイルシート】

body{
  width:100%;
}

.test3{
  width:50%;
  margin:20px;
  padding:0.5em;
  font-size:20px;
  line-height:1.5em;
  border:1px solid red;
}
@media screen and (max-width:800px){ /* スクリーンサイズが 800px 以下の場合では… */
.test3{
   font-size:16px;
}
}

【HTML】

<div class="h2vr_15 test3">
ここが縦書き領域です。<br />
この要素のフォントサイズは、スタイルシートで
<ul>
<li>ウインドウサイズが 800px 以上の場合は 20px</li>
<li>800px 以下の場合は 16px</li>
</ul>
…となるように設定されています。<br />
デスクトップ環境から御覧の皆様は、このウインドウの横幅を大きくしたり小さくしたりして表示を確かめてみてください。<br />
</div>

【表示】

→ サンプルを見るにはこちらをクリックしてください。サンプルは別タブで開きます。

この例の場合、

縦書き要素の幅は body の幅に対して 50% となるリキッドレイアウト。
要素の高さはフォントサイズと1行あたりの文字数から h2vR.js が自動算出。
文章が要素の幅を超えてしまう場合は h2vR.js により自動的に多段組レイアウトに。

…という具合になっています。

その他のサンプル

現在準備中です。

縦書き領域の再描画について

上記の例のように h2vR.js は、window の Resize イベントが発生する都度、縦書き領域を再変換・再描画します。

ページデザインによっては、この再変換・再描画処理が不要となる場合があると思います。その動作を抑制・制御する方法は次のセクション：再描画の制御をご覧ください。

最終更新：2015.05.31

>> Next：再描画の制御