超超初心者向け漫画サイトのつくり方【メニューを横並びにする】

好みの域に入ってきますが、メニューを横並びにしていこうと思います。

縦スクロールタイプの漫画サイトの場合は、縦並びのままがいいかもです。

メニューを横並びにするとは

現在、↓のように縦並びに配置されています。これはデフォルトの状態です。

これを、↓のように横並びにしていきます。

最後に、項目間のすき間も調整します。

CSSの記述

style.cssをサクラエディタで開いて、以下のコードを記述してください。

li {display: inline-block;}

サクラエディタでは、こんな感じ

保存して、ブラウザで確認するとメニューが横並びになったはずです。

横並びになったけど、項目間がぎっちぎちに詰まってますよね。余裕を持たせてあげましょう。

li {margin: 0 15px;}

サクラエディタでは、こんな感じ

同じ「li」に対して指定する場合は「li」の後の{}内に、一緒に記述してください。

これで、メニューが横並びになりました。

ついでに、marginの記述は「margin-right: 15px;」でも同じ状態になります。

まとめ

メニューを横並びにする方法は、他にもいくつかあります。

今回は、簡単お手軽な方法を取りました。

お疲れさまでした。

コメント