HTML/CSS:右サイドにメニューバーを表示する方法

【概要】

1.結論

2.どのようにコーディングするか

3.開発環境

補足

1.結論

HTML：ulタグ、liタグ
CSS：display: flex、writing-mode: vertical-rl、right:、padding:プロパティ
を使用する！

2.どのようにコーディングするか

❶

<ul class="list">
  <li class="item">GALLERY</li>
  <li class="item">RECOMMEND</li>
  <li class="item">CHARACTER</li>
  <li class="item">SKILLS</li>
  <li class="item">CONTACT</li>
</ul>

❷

.ul{
 list-style: none;
}

.list{
right: 0px;
display: flex;
writing-mode: vertical-rl;
}

.item{
padding:20px 0;
}

❶で、ulタグとliタグでリスト化しています。これだけでは、縦に並んでしまいますが箇条書きのようなリストになります。

❷で、右サイドにメニューバーを表示するメインのコーディングになります。 list-style: none;はliタグをつけると"・"が付くので余計なため消しています。肝心なのはwriting-mode: vertical-rl;でこれがサイドに文字が横の状態で表示するプロパティになります。display: flex;でブロック横並び整列させ、rightは単に右サイドに追いやっています。padding:20px 0;は文字がきつきつになり見にくいためです。

結果下記の画像のようになります！

3.開発環境

HTML5
CSS3

補足

flex-wrap: wrapで、文字がまとまり表示が縮小しても文字がばらけない、
justify-content: centerだと画面に対して中央に寄るように、
position: fixedするとスクロールしても固定でメニューバーがでてくるようにしました！またdivタグで被っても上下にビューがずれることはないです。