結城永人サイトの文章の位置取りはデザインのCSSのtext-alignでleftとcenterとright（左寄せと中寄せと右寄せ）が可能だけれども文章の外側と内側、または全体と部分が同じように整列されてしまう。そこでどうすれば一つの文章て外側（レイアウト）が中寄せで内側（コンテンツ）が左寄せなどの別々の位置取りが可能かを取り上げる。
二つの親要素で文章を別々に整列する
文章の外側と内側に別々の親要素を設置してそれぞれに整列することができる。
外側が中寄せで内側が左寄せの例
あいうえお
かきくけこさしすせそ
たちつてとなにぬねのはひふへほ
はひふへほまみむめもやゆよ
らりゆれろわをん
HTML
<div class="outer">
<div class="inner">
<p>あいうえお</p>
<p>かきくけこさしすせそ</p>
<p>たちつてとなにぬねのはひふへほ</p>
<p>はひふへほまみむめもやゆよ</p>
<p>らりゆれろわをん</p>
</div>
</div>CSS
.outer {text-align:center}
.inner {display:inline-block;text-align:left}文章の外側は普通にtext-align:centerで中寄せにする。そのままだと内側も中寄せになるけど、しかしもう一つの親要素を追加してdisplay:inline-blockをかけることによって子要素が個別に整列できるようになる。そこでtext-align:leftをかけると親要素の影響を受けずに左寄せが行える。
文章に二つの親要素を使って内側のdisplay要素を個別に整列できるinline-blockなどにすると外側のtext-alignの値とは切り離して扱え？ようになる。
文章と区別して親要素を二つ追加する方法になるけど、文章をタグで段落分けにしたりしなくて良ければ文章自体のタグを内側の親要素として使うことができるので、必ずしも親要素を二つ追加しなくてはならないわけではなく、一つで済ますこともできる。
文章の長さは横幅を指定すると揃う
あいうえお
かきくけこさしすせそ
たちつてとなにぬねのはひふへほ
はひふへほまみむめもやゆよ
らりゆれろわをん
HTML
<div class="outer">
<div class="inner">
<p>あいうえお</p>
<p>かきくけこさしすせそ</p>
<p>たちつてとなにぬねのはひふへほ</p>
<p>はひふへほまみむめもやゆよ</p>
<p>らりゆれろわをん</p>
</div>
</div>CSS
.outer {width:5em;margin-left:auto;margin-right:auto}
.inner {display:inline-block;text-align:left}文章の外側か内側のどちらかの親要素にwidthで横幅を指定すると文章の長さが決まる。それを越える場合は折り返されて各行を均等に並べることができる。
外側の親要素の位置取りはtext-alignが効かないので、代わりに中寄せならば「margin-left:auto;margin-right:auto」、左寄せは何もしなければ右から左への日本語のサイトの初期値なるけれども敢えて指定すると「margin-right:auto」、右寄せは「margin-right:auto」を使うことになる。
一つの親要素で文章を別々に整列する
文章に親要素を一つ追加して外側と内側を別々に整列することができる。
外側が中寄せで内側が左寄せの例
あいうえお
かきくけこさしすせそ
たちつてとなにぬねのはひふへほ
はひふへほまみむめもやゆよ
らりゆれろわをん
HTML
<div class="layout">
<p>あいうえお</p>
<p>かきくけこさしすせそ</p>
<p>たちつてとなにぬねのはひふへほ</p>
<p>はひふへほまみむめもやゆよ</p>
<p>らりゆれろわをん</p>
</div>CSS
.layout {display:grid;justify-content:center}文章の親要素にdisplay:gridとjustify-content:centerをかけると外側だけが中寄せになり、内側は何もしないままの状態で、普通に左寄せで扱える。
内側の位置取りを変える場合は親要素のjustify-contentの値をstartかcenterかend（左寄せか中寄せか右寄せ／日本語の右から左への進行方向の場合）にして全体として移動させる。
親要素が一つで済むのは簡単で便利なんだけれども子要素の外側の余白が相殺されないので、例えば外側の余白が付いた段落のpのようなタグが続くと普通よりも間隔が空いてしまう。するとタグを外すとか外側の余白を消すなんてデザインがさらに必要になって手間が増えるかも知れない。
文章と区別して親要素を一つ追加する方法になるけど、文章をタグで段落分けにしたりしなくて良ければ文章自体のタグを内側の親要素として使うことができるので、必ずしも親要素を一つ追加しなくてはならないわけではなく、文章自体のタグだけで済ますこともできる。
文章の長さは横幅を指定すると揃う
あいうえお
かきくけこさしすせそ
たちつてとなにぬねのはひふへほ
はひふへほまみむめもやゆよ
らりゆれろわをん
HTML
<div class="layout">
<p>あいうえお</p>
<p>かきくけこさしすせそ</p>
<p>たちつてとなにぬねのはひふへほ</p>
<p>はひふへほまみむめもやゆよ</p>
<p>らりゆれろわをん</p>
</div>CSS
.layout {display:grid;width:5em;margin-left:auto;margin-right:auto}親要素にdisplay:gridを使う場合は横幅のwidthを指定すると同時に位置取りの仕方も横幅を指定しないときのjustify-contentとは変えて指定しなくてはならない。
中寄せならば「margin-left:auto;margin-right:auto」、左寄せは何もしなければ右から左へ表示する日本語のサイトならば初期値で左寄せになるだろうけれども敢えて指定するならば「margin-right:auto」、右寄せならば「margin-left:auto」を使うことになる。
文章の位置取りを外側と内側で決める方法は通常の一列の表示で汎用的に使えると思う。
もう一つのレイアウトで纏めるdisplay:gridの方法も大差ないけれどもそれ自体が複数の列や行の配置に適しているから他の文章や何かと組み合わせるときこそ向いている。
コメント