サクッとWEBサイトを作る「SAKUWEB（さくうぇぶ）」

Bootstrapセカンドページの土台を作ろう！

今回からセカンドページを構築していきます。

そのために、セカンドページの土台を作る必要があります。

ナビゲーションを変更して、フォルダを切って、リンクを修正していきます。

また、cssファイル用フォルダも作っていきますよ。

　

　

*-*-* Chapter20 *-*-*

セカンドページの土台を作る

ブロックパターンを作って投稿効率をUP

目次

  1. 共通パーツのナビゲーションを直しておこう
    1. headerのナビゲーションを直すよ！
    2. footerのナビゲーションを直すよ！
  2. 階層を作っていこう！
    1. cssの階層を作ろう
    2. セカンドページの階層を作ろう
  3. 下層ページのリンクを修正しよう！

　

Bootstrap5サンプルサイト
Bootstrap5サンプルサイト

SAKUWEB さくうぇぶ

　

共通パーツのナビゲーションを直しておこう

共通パーツのヘッダとフッタのメニュー部分を直していきます。

コード、ページ名、リンク、階層の修正していきますよ。

　

headerのナビゲーションを直すよ！

Bootstrapドキュメントをコピって放置だったので、まずはメニュー名とリンクを直します。

ドロップダウンメニュー

メニュー名は、以下のように変更していきます。

「Home 」「Feature 」「Pricing 」「Dropdown link」

　　↓

「with Cat」「CAT room」「Column」「Shop」

このうち「with Cat」と「Column」は、ドロップダウンメニューで作成していきます。

*-Q-*　試しにチャレンジ！　*-！-*

ここでは、変更手順を示しますので、頑張ってやっていきましょう。

　

まずはコード編集。

編集後の構成になるように、コードをコピペして組みなおしていきます。

　

1+　ドロップダウン部分をコピー

メニュー名「Dropdown link」の部分がドロップダウンメニューのコードです。

liタグのクラス名「nav-item dropdown」囲まれているコードを全てコピーします。

  <li class="nav-item dropdown">
    
  </li>

　

2+　メニュー名「Home」の上と下の2か所に貼りつけ

以下の順になるようにします。

「Dropdown link」「Home 」「Dropdown link」「Feature 」「Pricing 」「Dropdown link」

「with Cat」と「Column」がドロップダウンメニューになりますので、先頭から修正するメニューの型と順番がこれで完成します。

「Dropdown link（with Cat用）」

「Home （CAT room用）」

「Dropdown link（Column用）」

「Feature（shop用） 」

「Pricing 」「Dropdown link」

　

3+　「Pricing」「dropDown」の2つを削除

　「Dropdown link」「Home 」「Dropdown link」「Fearures」の並びになりましたね。

　

次にメニュー名を変更します。

4+　メニュー名を、「with Cat」「CAT room」「Column」「Shop」に変更。

5+　「with Cat」のドロップダウンメニューを、「TOP」「Bed」「Toy」「Tower」に変更。

6+　「Column」のドロップダウンメニューを、「TOP」「ネコ＆段ボール」「ネコ＆ドッグ」「ネコ＆ホビット」に変更。

　

最後にリンクを変更します。

7+　リンクを修正します。

TOP　→　withcat/

bed　→　withcat/bed.html

toy　→　withcat/toy.html

tower　→　withcat/tower.html

その他のリンクはお好みのアドレスでも、以下に記述している完成コード通りにしてもＯＫです。

修正が終わったら保存してブラウザで確認してください。

　

それでは、完成コードを。

<ul class="navbar-nav">
  
<!-- with Cat -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">with Cat</a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <li><a class="dropdown-item" href="withcat/">TOP</a></li>
      <li><a class="dropdown-item" href="withcat/bed.html">Bed</a></li>
      <li><a class="dropdown-item" href="withcat/toy.html">Toy</a></li>
      <li><a class="dropdown-item" href="withcat/tower.html">Tower</a></li>
    </ul>
  </li>
  
<!-- CAT room -->
  <li class="nav-item"><a class="nav-link" aria-current="page" href="cat-room/">CAT room</a></li>
  
<!-- Column -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Column</a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <li><a class="dropdown-item" href="column/">TOP</a></li>
        <li><a class="dropdown-item" href="column/cat-plaything.html">ネコ＆段ボール</a></li>
      <li><a class="dropdown-item" href="column/cat-dog.html">ネコ＆ドッグ</a></li>
      <li><a class="dropdown-item" href="column/cat-doll.html">ネコ＆ホビット</a></li>
    </ul>
  </li>
  
<!-- Shop -->
  <li class="nav-item"><a class="nav-link" href="shop/">Shop</a></li>
  
</ul>
ドロップダウンメニュー修正分

　

ドロップダウンメニューもちゃんと開閉ができるかどうかチェックしておきましょうね。

もし開閉できない場合、コードでミスがあるかもしれません。

最初からやり直してみるか、完成コードをコピペして確認してみましょう。

もし自力で直す方。

変更するごとに保存して確認してみましょう。

少しずつやった方が、どこで間違えたか把握しやすいですよ。

これでヘッダ部分のナビゲーションが完了したので、次はフッタ部分のメニューを変更していきます。

　

footerのナビゲーションを直すよ！

フッタ部分はドロップダウンがないので、簡単ですね。

では、メニュー名を「Home」「with Cat」「CAT room」「Column」「Shop」に、それぞれのリンクも変更してください。

　

修正が完了したら、確認してくださいね。

それでは、正解を。

<ul class="nav justify-content-center py-5">
  <li class="nav-item">
    <a class="nav-link link-secondary" href="/">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="withcat/">with Cat</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="catroom/">CAT room</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="column/">Column</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="shop/">Shop</a>
  </li>
</ul>
フッターメニュー

　

階層を作っていこう！

次は、cssとwithcatの階層を作っていきます。

　

階層の作り方は、スライダー設置のブログでやりましたね。

imgフォルダと同じ方法です。

Bootstrapスライダーを設置しよ
Bootstrapスライダーを設置しよ

SAKUWEB さくうぇぶ

まずは、cssの階層とファイルを作っていきます。

　

cssの階層を作ろう

index.htmlにstyleタグでスタイルを適用していますね。

この部分をファイルと同様に外出ししていきます。

　

*-Q-*　試しにチャレンジ！　*-！-*

1+　「css」フォルダを新規作成

2+　index.htmlに記述したスタイルをコピーして、メモ帳などに貼りつけ。

ここでちょっと注意です。

コピーするのはcssの部分だけ。

styleタグはhtml用タグなので、cssに入れると壊れちゃいます。

      <style>
          .bg01 {background: url(img/bg01.png) #f7f7f7 no-repeat bottom left / contain;}
          .bg02 {background: url(img/bg05.png) no-repeat bottom left;background-size: cover;}
          .cover {background-color: rgba(0, 0, 0, 0.5);}
          footer {background: #f7f7f7;}
      </style>

3+　ファイル名を「style.css」に、

文字コード「utf-8」に、

保存先は先程作ったcssフォルダにして、保存します。

cssの階層を作る

これでcss外部ファイル化が完了です。

　

ただし、「background」で指定したimgのアドレスが変更になります。

以下のように、imgの前に「../」を追記しておきます。

.bg01 {background: url(../img/bg01.png) #f7f7f7 no-repeat bottom left / contain;}
.bg02 {background: url(../img/bg05.png) no-repeat bottom left /  cover;}

そしたら、index.htmlにこのcssファイルを読み込みましょう。

スタイルを読み込むには、linkタグを利用しますよ。

　

4+　外部ファイルのstyle.cssをindex.htmlに読み込み。

styleタグは削除して、linkタグを追記します。

　

正解はこちら

	<link rel="stylesheet" href="css/style.css">

    <title>サンプルサイト</title>

これでcssが完成です。

次に「withcat」の階層を作ります。

　

セカンドページの階層を作ろう

*-Q-*　試しにチャレンジ！　*-！-*

1+　「withcat」フォルダを新規作成

2+　そこにTOPページのindex.htmlをコピって、「withcat」フォルダ内に貼りつけ

セカンドページの階層

これで、セカンドページ用の階層が完成です。

今作った「withcat/index.html」は、

TOPページをコピーしているだけです。

cssの時と同様、階層が変わればリンクアドレスも変わります。

なので、リンク先を修正していきます。

下層ページのリンクを修正しよう！

withcatからみたリンクアドレスに修正します。

cssでやりましたね。

*-Q-*　試しにチャレンジ！　*-！-*

1+　スタイルシートやヘッダ・フッタ、画像などのアドレスを全て変更。

手動で修正もいいですが、置換一括でやった方がラクですね。

　

たとえば、footerのナビゲーションは以下のようになります。

<!-- footerのナビゲーションリンク -->
  <li class="nav-item">
    <a class="nav-link link-secondary" href="../">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="../withcat/">with Cat</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="../catroom/">CAT room</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="../column/">Column</a>
  </li>
  <li class="nav-item">
    <a class="nav-link link-secondary" href="../shop/">Shop</a>
  </li>

リンク先が正しいかどうかを確認するには？

任意のメニューにマウスを乗せます。

すると、ブラウザの左下にリンク先が表示されるので、ここで確認できますよ。

　

いちいちクリックしてページ遷移せずとも、一目瞭然ですね。

リンク先アドレスの確認方法

さぁこれで、セカンドページの土台が完了しました。

お疲れ様でした。

はじめは、作業量が多くて大変ですが、慣れるまではひとつひとつ確認しながらやりましょう。

　

次回からセカンドページを作ります。

が、手法を変えてデザインを見ながらレイアウトを組んでいきます。

　

まとめ

セカンドページの土台

整理整頓のためにも階層を作っておく
cssやjsファイルは、外出しして外部ファイルとして読み込む
階層ごとにリンクアドレスが異なる
階層が上がるごとに、リンクアドレスの先頭に「../」を付加する
ページのリンク先はメニュー名ホバーで、ページ左下に表示される

外部ファイルcssの読込み

linkタグを使って、アドレスを指定して読みこむ

Recent Post

【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！ 2024年7月4日

【Adobe Firefly：初心者ガイド】スタイル「効果：流行」解説！画像サンプル付き！

TRY to MAKE
【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介 2024年7月3日

【常時SSL化】301リダイレクトがエラー!?対処法とコピペ用コードも紹介

TRY to MAKE
【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！ 2024年6月5日

【Adobe Firefly：初心者ガイド】スタイルの「参照」の使い方解説！

TRY to MAKE

Category Post

Back To Top