見出し画像

右寄せのメニューの作り方

HTML/CSSで右寄せメニューを作ります。

実装方法

リストを横並びにして、右寄せにする。

手順

1.スタイルを初期化する。

デフォルトのまんまだとダサいので、すべてのスタイルを初期化しましょう。

ol, ul {
   list-style: none;
}

必要な人はマージンとかパディングとかもリセットしておくとよし。

2.リストを横並びにしつつ右寄せする。

二つ目のリスト項目の左に一つ目のリスト項目が来るようにします。

li, ul {
   list-style: none;
   float:right;
}

これでとりあえず右寄せになるけど、このままだとメニューの左に要素が来てしまうので、

<div>
    <ul>
        <li></li>
    </ul>
</div>

このdivにoverflow:hidden;を付ける。overflowははみだしの制御をするやつなので、これで余計なのが来なくなります。


そのうちちゃんとコードと画像を乗っけたい。

新米エンジニアの技術書購入の資金をサポートしてくれるような石油王の方がいらっしゃればぜひお願いします!!