開発メモ

Webアプリ(Java, JS, CSS, HTML)や、ゲーム(Unity, C#)のことなどを書いてます。

CSS:テキストの横幅設定

CSSmax-width を使って、テキストの横幅を設定する方法を書いていきます。

画面イメージ

横幅の設定有無で、以下のように画面表示が変わってきます。

f:id:mamorums:20180925093617p:plain

上のテキストは横幅を設定してなくて、左から右まで目で追いかけて読む感じになります。下のテキストは横幅を最大600pxで指定してます。上のテキストよりは、目を左右に動かさなくて大丈夫そうです。

コード例

上の画面イメージのコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>テキストの表示サンプル</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.article-full {
  margin-bottom:60px;
}
.article {
  max-width:600px;
  margin:0 auto;
}
</style>
</head>
<body>
<div class="article-full">
  <h1>横幅の指定なし</h1>
  <p>こちらのテキストは、CSSで横幅の指定をしてません。横幅を指定していないと、テキストがブラウザの幅に対応して広がります。ブラウザを横に広げすぎると、ディスプレイの端から端まで目で追う必要があるので、読むときに少し疲れてしまいそうです。</p>
</div>
<div class="article">
  <h1>横幅の指定あり</h1>
  <p>こちらのテキストは、CSSで横幅を最大 <code>600px</code> に指定しています。
  <p>横幅は <code>max-width: 600px;</code> で指定しています。横幅が <code>600px</code> よりも小さい場合、ブラウザがその幅に応じて文字を折り返してくれます。</p>
  <p>あとは <code>margin:0 auto;</code> を使って、左右のマージンを自動にしてます。これで、記事が真ん中に表示されるようになります。</p>
</div>
</body>
</html>

まとめ

Webページでテキストを表示する場合、あまり横長にしないほうが読みやすいことがあると思います。

ワープロソフト(MS Word 等)も、デフォルトはA4縦向き横書きのものが多いと思います。リアルな本なども、あまり横長にしてないものが多い気がします。日本語の縦書きはちょっと例外ですが。