この記事では、ページの左右にアンカーリンクのメニューを縦書きにして固定メニューにする方法を紹介します。
1. 右側に固定する
まずこのような、サイドメニューのHTMLを書きます。
続いて、右側に固定していきます。positon:fixedを使って、画面の右側の任意の高さにおきます。
2. CSSで縦書きにする
この記事の肝であるCSSでメニューを縦書きにしていきます。
CSSで縦書きにするには、writing-modeプロパティを使います。
writing-modeプロパティは、テキストの行のレイアウトを水平または垂直に、ブロックのフロー方向を左向きまたは右向きにするかを変えることができます。
値としては、下記のものが指定できます。
| 値 | 説 明 |
|---|---|
| horizontal-tb | 横書きにして，上から下へ行ブロックを並べます。 （初期値） |
| vertical-rl | 縦書きにして，右から左へ行ブロックを並べます。 |
| vertical-lr | 縦書きにして，左から右へ行ブロックを並べます。 |
今回は、日本語の縦書きなので、縦（vertical）の右から左（Right to Left）なのでvertical-rlという値を用います。
具体的には以下のような指定をします。
IEは昔から独自仕様で縦書きが可能だったため、プレフィックス付きで変なプロパティがついています。
3. inline-blockの隙間をなくす
あとは、これで見た目を整えていけば良さそうですが、ボタン同士の間に隙間があいてハマったので、そこもまとめておきます。
親要素にfont-size:0;を指定する
letter-spacingを調整したりなど、いくつかの解決方法があるようですがこの方法が一番簡単でした。
display:inline-blockの隙間は、テキストの改行が原因で起こるので、
inline-blockを使った要素の親要素にfont-size:0;を指定すると改善されます。
具体的に今回の当てはめると以下のような書き方になります。
ただし、font-sizeを%指定したい場合は、問題が起こるようなので、その場合は参考にした下記の記事を合わせて読んでみてください。
【参考記事】inline-blockの隙間をなくす方法 – Qiita
【コードあり】縦書き固定メニューの実例紹介
あとは、
- ボタンの装飾、hover時の表示、スマホ時の表示の調整
- アンカーリンクへのスクロールアニメーション（jQuery）
を追加したものがこれです。
See the Pen Tategaki Menu by MASATOSHI HANAI (@hanahana0201) on CodePen.
まとめ
この記事では、CSSを使って縦書きの固定メニューの作り方を紹介してきました。
やり方を知ってしまえば、そこまで難しくない実装なので、いつものデザインのアクセントにも使ってみてください。