段組みサンプル6

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

◎レスポンシブデザインでは、スマホやタブレットなど複数のウィンドウ幅の場合をまかなうため、親要素の幅で指定することがある。
段組みの見ための横幅というのは、要素に対して何行分入るかの行送りの倍数になる。

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

オプションなし

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

オプション実行

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

 吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

 吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。