記事の横幅が広すぎて文章の見た目が悪い… と感じたときの対処法

広い領域を上手く使えない日本語ユーザー

日本人独特というか日本語独特だと思います。広い領域を使いこなせない 方が多いんですね。何故かと言うと日本語は英語のように単語の区切りで折り返すという仕組みを持っていません。

英語は単語間の半角スペースが「折返しの合図」になっていますが、日本語というのは単語の途中であろうとどこであろうと折り返します。

The Adventures of Tom Sawyer is set in the 1840's in the fictitious town of St. Petersburg, Missouri, where Tom lives with his deceased mother's sister, Aunt Polly, and his half-brother, Sid. After Tom plays hooky from school, he is made to whitewash Aunt Polly's fence as punishment, but persuades his friends to do it for him.

テンプレートのCSS指定に左右されますが、英文は基本的にはこういう形です。そしてピリオドが打たれたからといって 改行を行うことはまずありません。ピリオドの後の新しい文章は頭が大文字になりますのですぐにわかります。

ところが日本語というのは本来が縦書きですよね。横書きする際のルールを私は正直よく知らないのですが、スペースによる「単語の区切り」という概念もありませんし、大文字・小文字の区分もありません。そのためか、一文終わる毎に改行を行う という形をよく目にします。

ところが現代日本語って英語のように前の文を修飾しまくる(whichやらwhomやら)という感じでもありませんので、一文が短い場合が多くなります。短い文を逐一改行していたら必然的にこうなります ↓

僕は今この温泉宿に滞在しています。
避暑する気もちもないではありません。
しかしまだそのほかにゆっくり読んだり書いたりしたい気もちもあることは確かです。

上記は芥川龍之介の「手紙」の抜粋ですが、実際には縦書きですし改行は行われていません。でも一般の人がブログで文章を書く際にはこうして句点を迎える度に改行を行っている人が多いようです。そしてご覧のとおり短い文で改行していますから領域を使い切れていません。強いて言えば3つ目の文だけちょっと長めかな、という印象です。

一番の良策は改行の多用を辞めること

この調子で全文を書きますと「なんだか左の方にえらく寄っているなぁ」という印象になってしまいます。そこで「記事の幅を狭くするカスタマイズをしなくちゃ」と考え出すんですが、そうではなくて、やたらな改行を辞める というのが根本的解決であり最適解です。

テキストは折り返しますので、パソコンで一行で収まっているとしてもスマホでは折り返しているかもしれませんよね。そして折り返した文章が短めな場合にはもしかしたらこんな感じになっているかもしれません。

これを見やすいと思う人はまず居ないはずです。それ故に「一切の改行を使わない(brタグを利用しない)」という人も居るくらいです。段落のみを意識して改行を行わないわけです。

そこまで極端になる必要はありませんが、やはり一文毎改行というのも同様に極端ですから「一文」で捉えるのではなく「段落(一定の文脈の集まり)」を意識して書くと改善されるかもしれません。そうすることでスマホでの見た目改善はもちろんのこと、パソコンでも「ひどく片寄っている」という状態にはならなくなるはずです。

テキストのセンタリング

そうはいっても改行が必要な場合だってありますよね。例えば歌詞の掲載など。FC2ブログはJASRACと提携していませんのであくまでも例として。私も何件か記事を凍結されたことがありますのでお気をつけください(笑)

What happened to you
You've played the victim for so long now in this game
What I thought was true
It's made of fiction and I'm following the same

お前に一体何が起こったんだ？
ずっと犠牲者きどりのゲームに興じてる
俺の考えは間違っちゃいなかった
全ては虚構だ そして俺も同じ道を辿ってるんだ

Over My Head - Sum 41

テキストを センタリング (中央揃え)にすることで「寄っている」という印象は薄れます。これも有効な方法の一つです。そしてこの方法はごく簡単なCSSで実現できます。

<div style="text-align: center;">
ここにテキスト<br>
ここにテキスト<br>
ここにテキスト
</div>

div要素にしていますがもちろんp要素でも構いません。ただしp要素は制約の多い要素ですから初心者の方へはdivをおすすめします。

ただやはりセンタリングされた文章を「読みづらい」と感じる方も少なくありません。ペルシア語など一部の言語を除きテキストの基本は「左寄せ」であり、それ以外の位置揃えは「装飾」にあたります。

max-widthを利用した領域制限

テンプレートの横幅をどうにかしようと思うと労力が大きいですし、テンプレートを変更したらどうするの？という問題も出てきます。もちろん変更時にはCSSの移植が必要になります。変更に左右されない方法はテンプレートの内容を変えてしまうのではなく、記事単位で調整することです。

What happened to you
You've played the victim for so long now in this game
What I thought was true
It's made of fiction and I'm following the same

お前に一体何が起こったんだ？
ずっと犠牲者きどりのゲームに興じてる
俺の考えは間違っちゃいなかった
全ては虚構だ そして俺も同じ道を辿ってるんだ

Over My Head - Sum 41

サンプルは横幅を500pxに制限しています。領域をわかりやすくするために背景色をつけていますが、色を無くせばさほど違和感はなくなるはずです。

<div style="max-width: 横幅px; margin: auto;">
ここにテキスト<br>
ここにテキスト<br>
ここにテキスト
</div>

widthではなくmax-width です。そしてmarginで全体を中央に持ってくるのも大事です。marginを忘れると結局左に寄ってしまいます。そして記事内のhtmlに直接CSSを充てますので(インラインCSS)、テンプレート変更時にも有効です。

よくある間違いとして、max-width ではなく width に 絶対単位 でサイズ指定してしまう方が多いのですが、widthに絶対値を指定してはいけません。テンプレートがレスポンシブデザインであろうとも無かろうともです。

divやpなどの要素はデフォルトが width: 100% です。この初期値を例えば width: 500px などに変更してしまうと、pxというのは絶対単位ですから画面幅が1000pxだろうと500pxだろうと300pxだろうと500pxで表示を行うことになります。従って画面横幅が500px以下になったらはみ出してしまいます。スマートフォンの現存最小機種の横幅は320pxです。

max-widthというのは単語が示すとおり「最大値」の指定です。widthがデフォルトの100%であり、さらにmax-widthに500pxの指定があったならば、親要素の横幅が500以下の場合は親要素の横幅の100%、つまり親が200pxならば200pxに、親が450pxならば450pxです。それがパーセントという 相対単位 です。

親が500pxを超えて例えば600pxになった場合にはmax-width: 500pxが効力を発揮して500pxで留まります。それがwidthとmax-widthの相乗効果で、レスポンシブデザインのみならずスマホ全盛のこの時代には無くてはならない考え方です。

width: 500px と max-width: 100% でも同じ効果ですが、widthの初期値は100%ですからわざわざ変更する必要がありませんし(ただしtable要素などは違います)、初期値を触らずにおけば書くべきCSS内容を最小限にできます。CSSには優先度がありますので一応説明しますと、max-widthの方が優先度は高いです。ですが「最大で」という性質上、max-width: 500px ならば500pxでも max-width: 500px の範囲内ですし、極端な話1pxでも max-width: 500px の範囲内ですよね。ですから優先度を気にする場面はほとんど巡ってこないと思います。

まとめ

おすすめの方法としては

1. 無闇な改行を辞め、文章を段落として捉える
2. テキストをセンタリングする
3. max-widthで領域に制限をかける

という感じでしょうか。繰り返しになりますが、根本的な原因は文章の構成がよろしくない という点にあるのですから、1の「段落を意識して書く」というのが最良です。