【縦組み段組みテキストフロー自動化スクリプト】サンプル

レスポンシブ時の位置ズレの微調整オプション

  • レスポンシブデザインでは、スマホやタブレットなど複数のウィンドウ幅の場合をまかなうため、親要素の幅で指定することがある。
  • 段組みの見ための横幅というのは、要素に対して何行分入るかの行送りの倍数になる。
このことを考えると、スマホやタブレットなど異なる画面サイズによっては、親要素の横幅と、行送りから割り出される段組みの見ための横幅が一致しないことがあり、親要素に対してターゲットの段組みが、左右どちらかに寄せられて余白があるように見えてきて、デザイン的にズレたような印象に見えてしまう。
このレスポンシブならではの性質をふまえ、これを少しでも解消するための方法として、親要素に対して段組みが横位置でセンターに配置されるようにするためのオプションです。

オプションなし

段組みの横幅と、それを囲む親要素(この場合は、画像)の横幅に誤差が発生し、余白が出てしまい、レイアウトがズレたように見える。

オプション実行

見栄えを補正するために、段組み自体を、親要素にたいして、センターに配置する。

草枕

夏目漱石
 山路を登りながら、こう考えた。
 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
 人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
 越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

親要素の幅

段組みの幅

余白


草枕

夏目漱石
 山路を登りながら、こう考えた。
 智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
 住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
 人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。
 越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

親要素の幅

段組みの幅

余白

余白



レイアウトの幅を変えてみる
幅を狭める
元に戻す
幅を広げる
文章内容を書き換えて、文章量を変えてみる

このページは、スクリプトの解説の都合上、ウィンドウ幅600px以上が表示可能なタブレットやPCで閲覧くださいませ。