ツール使い分け似たようなツールが多い中、どんな場合に使うことが適当なのか。専門ツールが良さそう。それらの狭間にある悩ましい領域を任せられる可能性がある。構成要素が少なく、学習コストは低く抑えられそう。あるので注目している。ついてはこちらを参考に。Windowsreact-statichttps://nozzle-react-static.netlify.com/使ったこと無いけど、こんな感じらしい。概念的な部分も理解できてきたので、試しに一つテンプレートを作成してみる。https://github.com/kentork/gatsby-starter-tategakiデモサイト各ブラウザでも縦書きに必要な機能は整ってきてはいるが、あと一歩痒い所に手が届かない状況だった。頼らなければいけない部分も多く、ノウハウもあまり共有されていない。設計された企業サイト以外での採用は少なかった。書ける縦書きブログができないだろうかと考えた。参考資料そもそも縦書きはどの様な技術を使って実現するのかは、以下サイトにまとまっていたのでまず全体にさっと目を通した。アワードその他、以下記事なども参考になった。cssで縦書きするの楽しい。以下、苦労した点と対応を簡単にまとめる。度回転した指定に解釈される。度回転して解釈してはくれない。CSS3で縦書きにする方法と挙動テキストレイアウトを担うフレームワーク・テンプレートのほとんどはこれに対応できない。デフォルトテーマをベースに方向指定プロパティを上書きした独自テーマを作成した。つの方法が考えられる。する事で対応するケース。テキストレイアウト以外のレイアウトはほとんど変える必要が無くなるため、取り入れやすい方法である。アワードにある受賞サイトも、ほとんどがこれである。前に話題になった以下記事でも、段組みされている。左で流し、スクロールの方を横方向に変換するケース。固定ヘッダやフッタなら問題ないが、それ以外はレイアウトを一から考え直す必要があるため、とてもハードルが高い。縦可変が前提のコンポーネントはほとんど諦めなくてはいけない。縦書きを極めるのならば、やはりこちらであろう。対策まずは、縦ホイールの横スクロール化が必要と考えた。渡すだけで難しくはないが、それだと滑らかな動作にならない。使って滑らかにスクロールするようにした。調整中で、少しおかしな動きをすることがある。いうプラグインがある。画像で領域確保する機能などを持っている。通常なら、とても便利な機能だ。等がごりごりと書かれている。スクロールが横方向のため、コンテンツが横に長くなる。それに合わせてレスポンシブに画像幅を決めているものは全く効かなくなる。いうプラグインを作った。含むプロジェクトをプラグインと認識してくれるので、結構手軽に追加できる。合わせて画像幅を決定するようにしている。)領域確保機能は、色々難しかったので書き直した。単語ぶつ切り問題これは、縦書きだけの問題ではないが、日本語は英語とは違って単語の間がスペースで区切られていない為、ブラウザは何も考えずに単語ぶつ切りで表示する。毎日のように見ている横書日本語では違和感をあまり感じなかったはずなのに。縦書きにした途端、気になりだした。いうプラグインを作った。使って分解し、適当な部分で区切る様にしている。