クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > CSS > CSSのcolumns（段組）でPCとスマホの読みやすさを統一

CSSのcolumns（段組）でPCとスマホの読みやすさを統一

CSS

Pocketの「デジタル積ん読」を消化する日々。状況によってスマホだったりPCだったり。
で、スマホ読書に慣れてくると、だんだんPC表示の一行が長く感じて辛みがある。。
そうだ、CSSのcolumns（段組）でPCとスマホの一行あたりの文字数を統一してみよう！という話。（おまけ：remの利点について）

目次：

一行あたりの読みやすい文字数は？

読みやすい記事、読みにくい記事って内容もあるけどレイアウトもあるよね。一行あたりの文字数によって同じ記事でも頭の入り方が違う気がする…。

ページサイズの目安

では一行あたりの文字数ってだいたいどんなもんでしょ。テキストボックスの幅とフォントサイズによって異なるよね。 まずは画面サイズを調べてみた。こちらの記事がわかりやすかった。

参考：Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版 | FASTCODING BLOG

なるほどねぇ。今はPCモニターは1920pxが主流なのね。前までは1366pxが一位だったが逆転している。そんでもって目から鱗だったのは下記

ブラウザサイズが大きくなったからと言って、Webサイトを画面いっぱいに広げて見るかというと、そういう訳ではないのです。

確かにそうだよね。複数のアプリのウィンドウを開いている時は、ブラウザを画面いっぱいに拡げない方が切り替えが楽。
ということで、PCサイトはこれまで通り「1000px（＋余白）」くらいで考えておけば良いか。

そしてスマホの主流は「375px」くらい。（記事では倍の750pxとあるがRetinaの画像を考慮している）
元祖iPhoneのサイズを受け継ぐiPhone SEがまだ売られているため320pxサイズも考慮はした方がいいだろうけどね。

ページサイズの目安：

  • PC：1000pxm（＋余白）※ただしモニタは1920pxが主流
  • スマホ：375px ※ただし320pxも念頭におく

文字サイズの目安

次に、文字サイズがどんなもんか考える。
まず単位なんだけど、最近は下記の記事のようにフォントの単位がすごく増えていて、ホント、ビビっちゃう…。

参考：http://sudara-bluse.hatenablog.com/entry/2017/10/10/023921

px（ピクセル）の国の住人としては%だのemだのremだのvwだのvxだの、まるでFXのお勉強みたいです（汗）。
ただ全体的に見ると px は「絶対値」で、それ以外は全部「相対値」のようだ。それぞれの計算の仕方が違うんだね。

この中で個人的に素敵に感じたのは「rem」。一番外側の要素であるhtml要素に指定した数値を基準にする。シンプル！

で、html要素の基準値だが、ブラウザのデフォルト設定は16pxらしい。
個人的には16pxだと若干大きくて、14pxくらいがちょうどいい気がしているのだが、今回は端数が出にくく計算がしやすそうな15pxにしてみます！

文字サイズの目安：

  • ブラウザ標準は16px
  • よく使われるサイズは14〜16px
  • 今回は計算がしやすい15pxに

1行あたりの文字数の目安

では、1行あたりの文字数はだいたいどんなもんざんしょ。
ヨスさんのこちらの記事が実際のビジュアルで比較できてわかりやすかったです！

参考：[CSS] 一列の文字数ってどのくらいがいいの? 読みやすさを比較したよ | ヨッセンス

70文字、50文字、35文字、20文字を例示してくれている。
35文字が一番読みやすい！紙媒体でもこのくらいの文字数がセオリーとのこと。

そしてこれらの文字数に文字サイズ15pxを掛けていくとテキストボックスの幅が想定できる。

文字数によるテキストボックス幅：

  • 70文字 × 15px = 1050px
  • 50文字 × 15px = 750px
  • 35文字 × 15px = 525px
  • 20文字 × 15px = 300px

70文字は約1000pxなので、PC1カラムレイアウトを横幅フルに使ったテキストボックスに近い。さすがにこれは「ナイな…」と感じますね。

50文字はどうでしょう。幅は750px。1000px幅に対して3/4サイズ。
2カラムレイアウトなら3/4グリッドをメイン、残りの1グリッドはサイドバーでちょうどいい感じじゃないでしょうか。 でも、読みやすさでは35文字ですよねぇ。。

一番読みやすい！と感じた35文字の幅は525px。これはPCページ1000px幅の半分チョイなので、レイアウト的には若干スカスカ感はありますねぇ。
実際1カラムのサイトなどを作っていると、テキストボックスやはり幅700pxくらいは欲しいところです。

最後の20文字は300pxなのでiPhone SEの320pxでも文字が見切れない。スマホ表示に最適なサイズです！

PC35文字、スマホ20文字のサンプル

これまでの内容を反映したサンプルを実際に作ってみました。
一行あたりの文字数はPC表示は35文字、スマホ表示は20文字にしています。こちらです。

ブログに埋め込むと幅が狭くてスマホ表示（20文字）になってますので、こちらから別ウィンドウで表示してみてください。

※別ウィンドウで開く：PC35文字、スマホ20文字サンプル

別ウィンドウではPC表示はテキストボックスの背景が黄色になってます。
そしてウィンドウの幅を狭めるとテキストボックスの背景がピンクに変わり、幅も狭くなりますよね。これがスマホ表示です。（今回はわかりやすいように背景色を変えました）
ちなみに、フォントの単位は先ほど「素敵」と書いた「 rem 」を使っていみました。

では、CSSを上から順番に見ていきましょう。

参考：CSSって何？という方はこちら
【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと

html {
  font-size: 15px;
}

html要素のfont-sizeを15pxにしています。これが文字サイズの基準値です。

.columns {
  width: 35rem;
  padding: 1rem;
  margin: 0 auto;
  background: #FFF5B8;
  border-radius: 10px;
}

.columnsはテキストボックス。
幅が35remで35文字。padding（内側の余白）が1remで1文字文です。
背景は黄色にしています。

.columns h1 {
  font-size: 2rem;
  margin: 0.5rem 0 1rem;
}

h1は見出し。font-sizeは2rem（2文字分）なので30pxですね。

.columns .bikou {
  font-size: 0.8rem;
  text-align: right;
}

.bikouは備考。一番最後にある小さい字。0.8文字分にしています。15px × 0.8 = 12pxになるのか。

.columns figure {
  text-align: center;
  margin: 2rem 0;
}

.columns figure img {
  max-width: 100%;
}

figureは画像ボックスですね。上下に2文字分のmargin（外余白）を入れてみました。
画像自体はデフォルトは画像の実寸サイズですが、max-widthで親要素のサイズは超えないように制限。

@media (max-width: 600px) {
  .columns {
    width: 20rem;
    background: #FFE3E1;
  }
}

最後の@mediaは「メディアクエリ」といって、スマホ表示設定です。
ウィンドウ幅が600pxより狭くなった時に.columnsの幅が20文字に切り替わります。
あと、PC、スマホの切り替えがわかりやすいよう背景色をピンクに変更。

なお、メディアクエリを適用するにはHTMLのhead要素内ににビューポートという設定を加えないといけないのだが、codepenには最初からそれが設定されてた。
codepen、素晴らしいよcodepen！！

最近デジタル積ん読で読み慣れている文字数はスマホ幅の20文字なんすよねぇ。
これに慣れてくとPC幅の35文字を目で追うのは少し長く感じちゃうんですよねぇ。
かといって、PC幅も20文字にしちゃうとヨスさんの記事にもあったように、ページがスカスカ、かつ縦長になりすぎてしまふ。。。

何か解決方法はないかなー。

そうだ、columnsで二段組にしよう！

二段組レイアウトの検討

そこで思い出した！CSSにはcolumnsというプロパティがあって、2段組にできるではないかと！
実際の仕事ではあまり使ったことはなかったんだけど、横書きの雑誌や書籍では2段組はよく見ますよねぇ。

参考：【DTPキーワード】版面の設計 | JAGAT

ちなみに、文字ギッシリ媒体である新聞はもっと段組が多くて、ページあたり12段で1行あたり12文字なんだとか。これが一段組だったらとても読んでらんないよね。
やはり、段組があると文字は読みやすくなるんですな。

参考：【新聞の作り方】見出しの形と大きさの基本を学ぶ

二段組サンプル（20文字）

実際に作ってみたサンプルがこちらです。

また、別ウィンドウで開いてみてください。

※別ウィンドウで開く：PC：1行20文字×2段、スマホ：20文字

するとどうでしょう。PCとスマホで行末の折り返しが同じになり、PC表示の読みやすさが上がったではありませんか！
しかもPCレイアウトが縦長スカスカになる問題も解消されています！
画像もちゃんと段の中におさまっている！

段の高さを自動的に均等にしてくれてるのも素敵です！
これまで物理的なテキストボックス2つだと、文章が増減するたびに前の段から後ろの段に文字を移動しなければならなかった。。。
columns、素敵だよcolumns。

CSSのさっきと変えた部分を見ていきましょう。

.columns {
  width: 42rem;
  padding: 1rem;
  margin: 0 auto;
  background: #FFF5B8;
  border-radius: 10px;
  column-count: 2;
  column-width: 20rem;
  column-gap: 2rem;
  text-align: justify;
}

テキストボックスの幅を42文字にしています。20文字 × 2段 ＋ 段間2文字分、という想定。
column-countが段数の設定です。2で二段組になる。（ここを3にすると三段組になります）
column-widthは段の幅。20文字分ね。 column-gapは段間。2文字分開けている。
最後におまけでtext-alignをjustifyに。行末の文字が揃います。 雑誌っぽいよね！

文字サイズを変えてremの便利さを噛み締める！

remの挙動を確かめたくて、本文の文字サイズを20pxに変えてみる。こんな感じになりました。

※別ウィンドウで開く：文字サイズを20pxに変更

CSS、変えたところはこの一箇所のみ！

html {
  font-size:   20px;
}

font-sizeを15pxから20pxに。

で、でかいよね（笑）でも、文字の折り返しはさっきと同じ。PCとスマホも統一されている。

一箇所変えるだけで見た目を変えずに全体のサイズが大きくなるなんて…remで相対的にサイズ比率を保っているんだな。
rem、便利だなぁ〜、rem。I love rem.

一行あたりの文字数を減らして幅も調整

このままだとPCもスマホもテキストボックスのが広すぎるため、文字サイズは20pxのまま一行あたりの文字数を減らして調整する。

※別ウィンドウで開く：文字数を減らして幅を調整

CSSを見ていきましょう。

html {
  font-size:  20px;
}

まず文字の絶対値は変えません。他のremを変えていきましょう。

.columns {
  width: 32rem;
  padding: 1rem;
  margin: 0 auto;
  background: #FFF5B8;
  border-radius: 10px;
  column-count: 2;
  column-width:  15rem;
  column-gap: 2rem;
  text-align: justify;
}

テキストボックス幅が42文字分だと42文字×20px＝840px。ちょっと広すぎるよね。。 32文字分にすると32文字×20pxで640px。 最初が42文字×15px＝630pxなので近似値になった！

.columns h1 {
  font-size: 1.5rem;
  margin: 0.5rem 0 1rem;
}

見出しを2文字分にしてたが20pxだと一行に収まらなかったため1.5文字分にした。30pxになるね。

@media (max-width: 600px) {
  .columns {
    width: 15rem;
    background: #FFE3E1;
  }
}

スマホのテキストボックス幅、20文字だと20文字×20px＝400pxで、縦画面の幅より少し広い。
15文字にすると15文字×20px＝300pxで…よし、最初と同じサイズになった！

ただ、やってみて思ったのは、うーん…ちょっと修正箇所が多いかなと（汗）。
この計算を修正のたびにやるのはちょっとダルいかなと…。

絶対値（px）と相対値（rem）を使いわけよう

テキストボックスを絶対値のピクセルに

もういっちょ、別の方向をテストしてみよう。
テキストボックスの幅を相対値remではなく絶対値pxにしてみる。こんなん。

※別ウィンドウで開く：テキストボックスの幅を絶対値pxに

まあ見た目は最初と変わらんですな。
CSS、変えたところは下記です。

.columns {
  width: 630px;
  padding: 1rem;
  margin: 0 auto;
  background: #FFF5B8;
  border-radius: 10px;
  column-count: 2;
  column-width: 300px;
  column-gap: 30px;
  text-align: justify;
}

widthを32remから630pxに。
column-widthも30remから300pxに。
column-gapも2remから30pxに。
何をやってるかというと、rem（文字数）と15px（文字サイズ）を掛け算してます。

@media (max-width: 600px) {
  .columns {
    width: 300px;
    background: #FFE3E1;
  }
}

スマホ表示のボックス幅を絶対値にしませう。
widthも30remから300pxに。

見た目は変わらんけど、一体これに何の旨味があるのだろうか？
次を見てください。

文字サイズを変えてもボックス幅は無事

この状態で文字サイズを変えてみると…何ということでしょう。
テキストボックスの幅が保たれているではありませんか。

※別ウィンドウで開く：文字サイズを変えてもボックス幅は無事

CSS、変えたところはhtml要素の文字サイズだけでありんす！

html {
  font-size:  20px;
}

まず文字全体の基準値を15pxから20pxにあげています。

.columns h1 {
  font-size:  1.5rem;
  margin: 0.5rem 0 1rem;
}

タイトルは先ほどと同じく2行になってしまうので2remから1.5remに下げています。
これだけ！

なるほど。ボックス幅を保ったまま文字サイズだけを変えたい場合はボックス幅は絶対値pxにした方が良さそうですね！
これは最初（CSS設計時）に今後想定される修正の可能性によってどちらで行くか決めておくといいかもしれない。

まとめ

  • columns（段組）を使うとPCとスマホで同じ読みやすさを提供しつつ、PCレイアウトのスカスカ感も解消できる。
  • rem（相対値）を使うとhtml 要素の文字サイズのpx（絶対値）を修正するだけで全体が変わってくれる。
  • 修正時にテキスト全体の見た目を保ちたい場合は文字もボックスもremベースにする。
    テキストボックス幅を保ちたい場合はそこはpxにすると良い。

段組はデバイス間のデザインの統一性という意味でも有効に感じた。 ユーザーが記事を読みたい時、「PCだと読みづらいなー、あとでスマホで読もう」と感じさせるのは機会損失かもしれない。
「このサイトはPCでもスマホでも読みさささが同じだなー」と感じてもらえば、どんな状況でも読んでもらえると思います。

新聞や雑誌など、デザインの歴史の中で培われた段組レイアウト。やはり読みやすいです。
これまで物理的な２つのボックスの修正が大変でしたがcolumnsの段組は実用的です。

あと、remなどの単位も怖がらずに使っていこうと思います！

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com