スキップしてメイン コンテンツに移動

些細な日常

サイトの文章を中寄せのままで左寄せに表示するなどの外側と内側で別々に配置する方法

サイトの文章の位置取りはデザインの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の方法も大差ないけれどもそれ自体が複数の列や行の配置に適しているから他の文章や何かと組み合わせるときこそ向いている。

  • ブログの投稿者: 結城永人
  • タイトル: サイトの文章を中寄せのままで左寄せに表示するなどの外側と内側で別々に配置する方法
  • 最終更新: 

コメント

最近の投稿

日付: 

Bardの事実認識の2023年9月の更新の実力の確認

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...