「html初心者」メニューバーの作り方!

ウィブサイトを作る時に必要なメニューバーの簡単な作り方をご紹介します!

では早速、ご紹介します!

手順1

<nav></nav>を用意しその中に<ul></ul>を入れ、さらに<ul></ul>の中に<li></li>を入れます

*<li>(リスト)をクリックして別のページに飛ばしない場合は、リストの後ろに<a href=”ここにURL”>ここに文字</a>を入力する

<nav>
<ul>
<li><a href="ここにURL">ここに文字</a></li>
</ul>
</nav>

これでメニューの形になりました。

ついでに別のページに飛ぶようにしましょう。

これで、HTMLの設定は終わりです。

お次はCSSの設定に行きましょう。

CSSは高さと幅はなんでもいいです。

今回は横960、高さ50で行きます

まず、最初にmargin,paddingを設定しましょう

margin,paddingはどっちとも0で行きましょう

*{margin:0;
padding:0;}

そして次に<nav>です。幅、高さは適当です。

*{margin:0;
padding:0;}

nav{height:50px;
width:960px;
background-color:#FFF;}

お次に<ul>です。これは<nav>の中にある箱の設定です

<ul>のなかにdispray:flex;と入れてください

こうすることで<ul>が横並びになります。

*{margin:0;
padding:0;}

nav{height:50px;
width:960px;
background-color:#FFF;}

ul{dispray:flex;
background-color:#FFF;}

お次に<li>にです。(URLあり)

URLありの場合、li{}ではなく、a{}でやってください

ここにもdispray:flex;を入力します。

リストの文字が横並びになるはずです。

このtext-decoration:none;はリストの文字の下にある線を消せるコードです

*{margin:0;
padding:0;}

nav{height:50px;
width:960px;
background-color:#FFF;}

ul{dispray:flex;
background-color:#FFF;}

a{text-decoration:none;
background-color:#FFF;
dispray:flex;}

ちなみにjustify-content:center;やalign-items:center;で中央に配置できます。

その他にも、a:hover{color:#FFF;}とすることで、カーソルを合わせた時に色が変化します。

以上で、メニューバーの作り方は終わりです

コメント

タイトルとURLをコピーしました