プログラミング日記　〜ナビゲーションメニューの作り方〜

こんにちは。よっしーです。

今日はプログラミング学習４日目！学習を振り返ります。

今日の学習内容

・サイト模写（ヘッダーナビゲーションメニューの作成）

今回は、現時点でどれくらいできるのか試してみようと思ってサイト模写をしました。

結果は惨敗です…　4時間近くかかってヘッダーのナビゲーションメニューしか作れませんでした(泣)

学習の振り返り

4時間かけて学んだヘッダーナビゲーションメニューの作り方を振り返ります。

今回作りたかったのは、こんな感じのよくあるナビゲーションメニュー。

複数の要素を横並びにする必要があるので、display要素を指定してあげます。

<!--HTML　bodyから--!>
<header>
    <img src="logo.png">
    <nav>
        <ul>
        <li>Menu1</li>
        <li>Menu1</li>
        <li>Menu1</li>
        </ul>
        <button type="submit">tel.0120-xxx-xxx</button>
    </nav>
</header>

<!--ここからCSS--!>
  /*ヘッダーのなかをすべて横並びにする*/
header {
   display: flex;
   margin: 10px;
}
 
 /*ナビゲーションの要素を横並びにする*/
nav  {
   display: flex;
   margin-left: auto;
}
 
 /*リストタグを横並びにして、黒丸を消す*/
nav ul {
 display: flex;
 list-style: none;
 margin: 0;
 margin-right: 30px;
 padding: 0;
}

/*各メニューのサイズを揃える*/
nav li {
 width: 150px;
 text-align: center;
 line-height: 90px;
}

/*ボタンのサイズと位置調整*/
button {
 margin: 35px 0 0 0 ;
 padding: 0;
 width: 200px;
 height: 20px;
}

こうして打つと、

こんな感じになりました。

うーん、なんだかもっといい方法がありそうな…

５日目からは、もう一度CSSの基礎学習を固めていきたいと思います。

まとめ

学習から離れて、いざ自分でやってみるとめちゃくちゃ難しいですね…

でも理解は深まるのでおすすめですよ！