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

Bootstrapテンプレートのコードを編集しよう

前回つくった「index.html」の中から、必要なものをPICK UPしながら、コードのいらない部分を削除して、htmlを少しいじっていきましょ！

　

*-*-* Chapter02 *-*-*

Bootstrapのスターターテンプレートをみてみよー

Bootstrapテンプレートのコードを編集しよう

　

目次

  1. Bootstrap製のサイトを作るのに必要なファイルは？
  2. 不要なコード「コメントアウト」を削除しよう
    1. 1+ index.htmlを開いて、コメントアウトを削除します！
    2. 2+ 「Hello, world!」を書き換えましょうー！
  3. 「head」タグ内は、ページに表示されない
  4. 「body」タグ内は、ページに表示される

　

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

Youtubeチャンネル → @sakuweb

　

【初心者入門】Bootstrapを使ってサイト作り　基礎・準備編vol.02

　

Bootstrap製のサイトを作るのに必要なファイルは？

それでは、前回つくった「index.html」を見てみましょう！

　

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

　

このコードでBootstrap製となりますが、

果たして何がどーなってBootstrap製になったのでしょうか？

　

以下のコードを見てみると、

   <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- ↑　このlinkタグを指定することで外部ファイルCSSを読み込み-->

「Bootstrap」と記述がありますね。

　

linkタグは、外部に置いてあるファイルを読み込むことができます。

ここでは、外部にあるBootstrapの「css」ファイルを読み込むという指示ですね。

これで、Bootstrapのデザインの部品を利用できるようになっています。

　

次いで、「js」ファイルも同様です。

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- ↑　このscriptタグを指定することで外部ファイルJSを読み込み -->

これだけで、Bootstrapを利用するためのCSSとJSの読み込みが完了した！ということなんです。

不要なコード「コメントアウト」を削除しよう！

スターターテンプレートには不要なコードがあるので、削除していきましょう。

今回削除するのは「コメントアウト」の箇所。

　

1+ index.htmlを開いて、コメントアウトを削除します！

もしコードエディタをお持ちなら、そちらで編集してくださいね。

お持ちでない方は、

とりあえず「メモ帳」を使うか、オンラインのエディタもあるので試しに使ってみても良いですね。

　

[Tips]すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」
[Tips]すぐに試せる！html・cssのオンラインコードエディタ「JSFiddle」

SAKUWEB さくうぇぶ

 

    <!-- Required meta tags -->

	 <!-- Bootstrap CSS -->

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->

このビックリマークのやつ、＜！-　-＞を「コメントアウト」と呼びます。

この中に入れた値は、ページには表示されないので、コードの説明やメモ帳替わりに使える便利なやつです！

でも、今回はいらないので、コメントアウト全削除で。

　

コメントアウトを削除すると、以下のコードになりますよ。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

ふぅ・・・スッキリ！

2+ 「Hello, world!」を書き換えましょうー！

それでは、「Hello, world!」を日本語に書き換えていきます。

　

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

「Hello, world!」を「Bootstrap製htmlの作り方」に変更してみてください！

変更したら「保存」して、ブラウザで確認してみましょう。

　

どうかな？

できたかな？？

できない人は、もしかしたら変える場所が違うのかな？？？

　

正解は、「h1タグのほうを変更する」

  <body>
    <h1>Bootstrap製htmlの作り方</h1>
    
    <!-- 中略 -->
    
  </body>

コードの一番最初に記述してあるtitleタグの「Hello, world!」を変えてもダメだった方、

h1タグの方を変更してみてくださいね。

　

また、上記コードの結果を見たい場合は、Runマークをクリックすれば、コード直下に結果が表示されます。

「head」タグ内は、ページに表示されない

htmlには、ページに表示される部分と表示されない部分があることが上の例でわかりましたね。

端的に言うと、

headタグ：脳みそ。

脳は見えませんね。

脳みそがあるから考えたり、コミュニケーションがとれたりします。

このタグは、ページには表示されないけど、外部ファイルを読み込んだり、検索エンジンにページタイトルや説明などを伝えることができます。

「body」タグ内は、ページに表示される　

bodyタグ：体。

体は、目で見ることができますね。

頭、胴体、手足。それぞれのパーツがあって「体」になります。

このタグの中には、ナビゲーション、メインコンテンツ、フッターを入れて、「ページ」を構成していきます。

　

次回は、bodyタグ内にもっと要素を足して、骨組みを作っていきます。

まとめ

Bootstrap

Bootstrapの「css」「js」を読み込むことで利用できる
スターターテンプレートのコメントアウトは削除しておこう

HTMLタグの表示

Bodyタグ内のコードは、ページに表示される
headタグ内のコードは、ページに表示されない

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