検索MENUWeb制作、デザイン、VRを中心に日々学んだ知識を配信中。Web制作-シェア-ツイート-ブックマーク-Pocketこの記事では、ページの左右にアンカーリンクのメニューを縦書きにして固定メニューにする方法を紹介します。右側に固定するまずこのような、サイドメニューのHTMLを書きます。続いて、右側に固定していきます。positon:fixedを使って、画面の右側の任意の高さにおきます。CSSで縦書きにするこの記事の肝であるCSSでメニューを縦書きにしていきます。CSSで縦書きにするには、writing-modeプロパティを使います。writing-modeプロパティは、テキストの行のレイアウトを水平または垂直に、ブロックのフロー方向を左向きまたは右向きにするかを変えることができます。値としては、下記のものが指定できます。明horizontal-tb横書きにして,上から下へ行ブロックを並べます。(初期値)vertical-rl縦書きにして,右から左へ行ブロックを並べます。vertical-lr縦書きにして,左から右へ行ブロックを並べます。Left)なのでvertical-rlという値を用います。具体的には以下のような指定をします。IEは昔から独自仕様で縦書きが可能だったため、プレフィックス付きで変なプロパティがついています。inline-blockの隙間をなくすあとは、これで見た目を整えていけば良さそうですが、ボタン同士の間に隙間があいてハマったので、そこもまとめておきます。親要素にfont-size:0;を指定するletter-spacingを調整したりなど、いくつかの解決方法があるようですがこの方法が一番簡単でした。display:inline-blockの隙間は、テキストの改行が原因で起こるので、inline-blockを使った要素の親要素にfont-size:0;を指定すると改善されます。具体的に今回の当てはめると以下のような書き方になります。font-sizeを%指定したい場合は、問題が起こるようなので、その場合は参考にした下記の記事を合わせて読んでみてください。Qiita【コードあり】縦書き固定メニューの実例紹介あとは、ボタンの装飾、hover時の表示、スマホ時の表示の調整アンカーリンクへのスクロールアニメーション(jQuery)を追加したものがこれです。CodePen.まとめこの記事では、CSSを使って縦書きの固定メニューの作り方を紹介してきました。やり方を知ってしまえば、そこまで難しくない実装なので、いつものデザインのアクセントにも使ってみてください。プログラミング、ブログ、VRにハマってます。DTPとWebは実務経験なしから仕事を獲得し、3人の子育てにも参加しつつ、在宅でバタバタな生活してます。Web、VR、フリーランスの生活を中心に発信します。