CSS

[HTML & CSS General] 縦書き文章の段組

公開日: 2018/07/10
更新日: 2018/09/26

そういえば縦書き文章を書いたことが一度もないので写経。

[markdown]

こちらが先生。

> * [段組みを使って縦書きの文章をレスポンシブ対応させる方法 | Webクリエイターボックス](https://www.webcreatorbox.com/tech/responsive-tategaki)

`column-count`
お手本では画面いっぱいにエリアをとって、それを2カラムに分けています。

> * [column-count – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/column-count)

See the Pen Multiple Columns Using column-count by DriftwoodJP (@DriftwoodJP) on CodePen.

カラム幅（`.wrapper`）は `width: 100vw` なので、文章が長い場合にはスクロールバーが表示されてしまいます。
こんな場合は `overflow-x: hidden` を追加します。

> * [overflow-x – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-x)
[CSS3 Multiple column layout](https://caniuse.com/#search=column-count) は IE/Edge も対応しているようなので、使われているところでは使われているのかな。

## 補遺

冒頭の `font: 16px/1.6 serif;` を見て何だっけと思いましたが、ショートハンドでした。

> * [font – CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font)
> * [Font Shorthand | CSS-Tricks](https://css-tricks.com/snippets/css/font-shorthand/)

[/markdown]