縦書きでレスポンシブなブログを作った - yuhei blog

趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実装すると横スクロールになるからだ。 横書きでは文章は上から下に流れ、ページは縦スクロールになる。対して縦書きの場合、文章は右から左に流れるため、横スクロールになる。スクロール操作が不自然だと目に見えてユーザービリティが低下するので、どうしても当たり前のスクロールができるようにしたい。 幸い、縦書きにしながら縦スクロールにする方法はひとつある。新聞や雑誌のように段組にすることだ。 それはcolumnsを利用すれば、一見簡単にできそうな感じはする。けど、僕が望む仕様を実現しよう

[n314]

括弧とか句読点とかが横書き用なのですごい違和感があった。環境のせい？

[sutetuki]

“prismic.io”

[rokuzeudon]

いろいろすごい

[hinaloe]

うーんわりと折り返しまくっててつらみというかんじ。🤔

[mag6]

あかんめっちゃ好きなデザインだった。

[uzimith]

面白いけどスマホで開いたら読みづらいなって印象だった

[rryu]

縦書き段組みも普通にできる時代になっているとは。均等じゃなくて最初の段がら詰めていくのは column-fill:auto でできそうなのだがどうなのだろう。

[mzkzzz]

よき。あとブログ自体の文章もすき。

[ayakanishino8]

しゅごい

[three_bee]

“Next.js”

[kooie]

縦書きいいね！　IEは良いとして、Edgeで見れると良いな。少し前にEdgeを標準ブラウザと指定しながら、縦書きにこだわるユーザーが居たのでね。。。 Edge側で縦書きCSSの対応が必要なんだと思うけど

[itouhiro]

「縦書きの文章は横スクロールになり、ウェブの操作として不自然。縦スクロールにする方法がある。新聞や雑誌のような段組。Firefoxだけ別のデザインにした部分がある。IEとEdgeは無視した」

[masayoshinym]

”縦書きでレスポンシブ”

[mcddx30]

読みやすい

[mr_mayama]

すごーい！

[t_f_m]

"この段組の実装は結構珍しいアイデアな気がしてて、さっき縦書きアワードのやつ一通りみたけどやってる人がいなかったので世界初の可能性がある"

[tomemo508]

これの WordPress テーマ版があったら人気出そう。(無茶振り)

[xylioool]

おーーーー！