Code

【初心者のWEBサイト模写】Bootstrapでナビゲーションバーを作る方法を解説|Norton

2020年10月13日

navdemo

こんにちは、イケゾーです。 今回は、セキュリティでおなじみ「Norton」のサイト模写の解説をしていきます。(2020/10時点)

この記事を読むと

Bootstrapを使ったヘッダーとナビゲーションを作れるようになります
「Norton」のサイトは、構成がきれいで、模写の練習になる要素が含まれています。 また最近、家のPCで仕事をするようになってから、セキュリティに気を使うようになった僕的にはタイムリーというのもありますね。   僕も、模写を進めながらひとつひとつ解説をしていくので、「簡単すぎる」と感じたところは飛ばしながら読んでいってください。そのままコピーして頂いても同じように実装できますので、ぜひ手を動かしてみてください。   では、やっていきましょう。

【初心者のWEBサイト模写】Bootstrapでナビゲーションバーを作る方法を解説

テンプレートと画像の準備

こちらのサイト Norton  を模写していきます。 2020年10月のサイトなので、デザインがアップデートされている場合もありますが、構成は大きく変わらないと思います。  

フォルダ構成と基本的な構文を書いたHTMLを用意します。

方法は、下の記事をそのままやっていただくだけでOKです。

 

サイトから画像をダウンロードします。

これも先ほどの記事の通りダウンロードしてください。 ひとつひとつ、「右クリック」→「名前をつけて保存」は効率悪いですよ。 一括で全てダウンロードできる方法を紹介しております。  

Bootstrap「navbar」の説明

Bootstrapの使い方は、公開されているドキュメント(HTMLコード)をコピペして、作りたいデザインにカスタムするという流れになります。 bootstrap使い方  

Boorstrap公式のドキュメントから使いたいデザインを探していきます。

今回は、「Navbar」(ナビゲーションバー)を使っていきます。 これは、ほとんどのWEBサイトで使われている、サイト上部に設置する「メニュー」のような物です。 このNavbarを設置することで、ユーザが目的のページに達するまでの時間を短縮できます。   HTMLとCSSで自作もできますが、「Navbar」はレスポンシブ対応のハンバーガメニューに対応しており、検索窓などの機能つけることができます。さらに、デザインを容易に変更できる優秀な物なので、気に入って使っています。  

「ドキュメント」▶︎「Components」▶︎「Navbar」をクリック

Navbarの説明画面にいきましょう。 ここでは、Navbarの使い方が説明されています。不要な情報も多いので、読むのは後にします。   navbarのリンク  

作りたいナビゲーションバーに近い物を選びます

Navbarにもたくさん種類があり、サンプルが用意されています。 その中から自分が作りたいナビに近い物を選び、それに追加したり、削ったりして作り込んでいきます。 今回は、ドロップダウンメニューを作りたいので、それが含まれている物を選びます。   使用するサンプルコード  

基本的な使い方

「index.html」を編集していきます。

コピーしてきたサンプルコードを<body>の下に貼り付けます。
index.html
<head>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
 中略
 </nav>
</body>

ブラウザで確認 ナビゲーション確認  

不要な物を削ってシンプルにしましょう

ちょっとスリムに navbarの中身はこんな感じにシンプルにしておきます。 index.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action
        </div>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home (current)</span>
      </li>
    </ul>
  </div>
</nav>
イケゾー
OK!次は、文字と画像を表示してみるよ

リンクと画像を表示

左上に「ロゴ」画像の表示をします
変更前
<a class="navbar-brand" href="#">Navbar</a>

変更後
<a class="navbar-brand" href="#"><img src="image/logo.png" alt="ロゴ画像" width="160"></a>

 

リンク名を修正して整えます

index.html <ul>に対してクラス「ml-auto」を追加して、右寄せにします。

<ul class="navbar-nav ml-auto">

  リンク名修正後

イケゾー
完ぺきに同じでなくても、cssで調整可能なので、次へ進みましょう
 

デザインの調整

では次にcssをやっていきましょう。

やることリスト

  1. 文字サイズ、フォント、色を変更
  2. マウスホバー時にアンダーバーを表示
  3. ドロップダウンメニューを使う
  4. リンクのマウスホバー時の背景色
  5. Font-awesomeでアイコンを表示する
完成系をチェック 完成イメージ  

文字サイズ、フォント、色を変更

「WhatFont」を使い、WEBサイトの文字情報を読みとり、サイズ色フォントを合わせましょう。 こちらのサイトが非常に分かりやすいです。

イケジョ
分かりやすいね、ありがとうございます
 

マウスホバー時にアンダーバーを表示

リンクの上にマウスを乗せた時に、アンダーバーを表示させます。 ついでに、リンク間の縦棒も書いておきますね。 style.css

.nav-link{
	padding: 0px;
	color:#535353;
	border-right:1px solid #999;
}
.nav-link:hover{
	text-decoration: underline;
	color: inherit;
}

アンダーバー  

ドロップダウンメニューを使う

ドロップダウンメニュー内部と、ホバー時の背景色を作っていきます。 製品ラインナップのリンクの中に、aタグを複数作りメニューを作成します。 index.html

<li class="nav-item dropdown">
	    <a class="nav-link dropdown-toggle nav-left" href="#" id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">
	      製品ラインナップ
	    </a>
	    <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
	      <a class="dropdown-item" href="#">ノートン 360プレミアムA
	      <a class="dropdown-item" href="#">ノートン 360プレミアムA
	    </div>
	  </li>
style.css
.dropdown-item {
	color:#353636;
	font-size: 14px;
}
.dropdown-item:hover{
	background: #F1BB17;
}
.dropdown-toggle::after {
    display: none;
}
.dropdown:hover>.dropdown-menu{
	display: block;
}

ポイント

デフォルトのドロップダウンメニューは、「▼」をクリックすることで開く仕様ですが、マウスホバーで開くように変更しています。
 

リンクのマウスホバー時の背景色

次に、「注文情報の確認」「カート」部分を作っていきます。 ここは、divでボックスを作り、ボーダーで枠を作ります。そして、マウスホバー時の背景色を変更していく流れになります。 index.html

<li class="nav-item active nav-item-last mr-2">
  <div class="nav-box">
    <a class="nav-link" href="#">注文情報の確認<span class="sr-only">(current)</span></a>
  </div>
</li>
style.css
.nav-box {
	width: 130px;
	border:1px solid #999;
	text-align: center;
	/*vertical-align: middle;*/
}
.nav-box:hover{
	background: #EEEEEE;
	color: inherit;
}
.nav-box a{
	padding-top: 10px;
	padding-bottom: 10px;
}
.nav-left{
	margin-top: 10px;
	margin-right: 5px;
}

 

Font-awesomeでアイコンを表示する

FontAwesomeを使って、アイコンを表示します。こんな感じ。 index.html

<li class="nav-item active">
  <a class="nav-link nav-left" href="#">お客様サポート<i class="far fa-window-restore"></i><span class="sr-only">(current)
</li>

 

完成!

お疲れ様でした。下のようにできたでしょうか。 1pxのずれも許さないという模写ではないので、この程度再現できていればOKです。  

まとめ

以上で、ナビゲーションバーを作成してきました。 Bootstrapの基本的な使い方、カスタムの方法がお分かりいただけたかと思います。 次回以降は、ヒーローと呼ばれるメイン画像の部分、全体のレイアウト(余白)を設定していきます。   当ブログでは、仕事や副業さらには生活で使える「効率」を発信しています。 ぜひ、他の記事もご覧ください。   ご不明点あれば、コメントまたはTwitterまでご連絡ください。ではでは。

完成版ソースコードはこちら
  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code
-, , , ,

© 2021 IkezoooBlog