HTML ブートストラップの基礎

Last updated at 2024-10-16Posted at 2020-04-15

Project Nyaanを作ってみよう：Bootstrapで猫好きのためのWebページを作る

今回は、「Project Nyaan」という猫好きのためのシンプルなWebページを作る方法を紹介します。このチュートリアルでは、Bootstrapを使ってレイアウトを整え、HTMLと少しのCSSでおしゃれなページを作っていきます。基本的なWebページ作成の流れを体験できるので、初心者の方にもおすすめです！

準備：環境を整える

HTMLの基本構造を作成
- 以下のコードを新しいHTMLファイル（例：index.html）にコピーして保存します。
- ファイルをブラウザで開けば、完成がどのようになるか確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Project Nyaan</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            background-color: lightgray;
        }
        .starter-template {
            padding: 40px 15px;
            background-color: white;
        }
    </style>
</head>

この部分は、ページの基本設定やBootstrapの読み込みを行っています。<title>タグでページのタイトルを設定し、<link>タグでBootstrapのCSSを読み込むことで、デザインを簡単に整えられます。

ステップ1：ナビゲーションバーの作成

猫好きのためのページに、ナビゲーションバーを追加して、ページ内を移動しやすくします。

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project Nyaan</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#list">List</a></li>
                    <li><a href="#table">Table</a></li>
                    <li><a href="#form">Form</a></li>
                </ul>
            </div>
        </div>
    </nav>

ナビゲーションバーは、ページのトップに固定されます。これにより、ユーザーがページをスクロールしてもナビゲーションが常に表示され、他のセクションに簡単に移動できます。

ステップ2：コンテンツを配置する

ここからは、猫好きのためのコンテンツを追加していきます。

2-1. ページのヘッダーと紹介文

ページのメインコンテンツとして、タイトルと画像を配置します。

    <div class="container">
        <div class="starter-template">
            <h1>吾輩は猫である。</h1>
            <p class="lead">名前はまだない。</p>
            <img src="https://paiza-webapp.s3.amazonaws.com/files/learning/photo_cat_1024.jpg" class="img-responsive center-block">
            <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している...</p>

猫の紹介文と画像を追加することで、ページに雰囲気を持たせましょう。Bootstrapのimg-responsiveクラスを使うことで、画像は画面のサイズに合わせて自動的に調整されます。

2-2. 動物リストの作成

            <h2 id="list">動物リスト</h2>
            <ul class="list-group">
                <li class="list-group-item">ねこ</li>
                <li class="list-group-item">いぬ</li>
                <li class="list-group-item">うさぎ</li>
            </ul>

Bootstrapのlist-groupクラスを使って、シンプルで見やすいリストを作成します。リストには、猫のほかに「いぬ」や「うさぎ」なども追加しています。

2-3. 猫テーブルの作成

            <h2 id="table">猫テーブル</h2>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>名前</th>
                        <th>特徴</th>
                        <th>住所</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>たま</td>
                        <td>くつ下</td>
                        <td>東京都港区南青山</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>ミケ</td>
                        <td>三毛</td>
                        <td>東京都千代田区秋葉原駅周辺</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>トラ</td>
                        <td>シマ</td>
                        <td>兵庫県西宮市甲子園町</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>にゃあ</td>
                        <td>トラの兄弟</td>
                        <td>兵庫県西宮市甲子園町</td>
                    </tr>
                </tbody>
            </table>

tableとtable-stripedクラスを使用して、データを見やすく表示できるテーブルを作成します。このテーブルには、猫の名前や特徴、住所を記載しています。

2-4. 猫フォームの作成

最後に、ユーザーからの情報を受け取るためのフォームを追加します。

            <h2 id="form">猫フォーム</h2>
            <form class="form-horizontal" action="#" method="post">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="title">タイトル</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="title" id="title">
                    </div>
                </div>
                <div class="form-group">
                    <label for="message" class="col-sm-2 control-label">メッセージ</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="select" class="col-sm-2 control-label">好みのネコ</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="select" id="select">
                            <option>タマ</option>
                            <option>ミケ</option>
                            <option>トラ</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">OK</button>
                    </div>
                </div>
            </form>

Bootstrapを使ったフォームはとてもシンプルです。form-horizontalクラスを使用することで、入力フィールドを整然と配置することができます。このフォームでは、猫に関する情報を送信できます。

ステップ3：ページを仕上げる

ページの最後にトップへ戻るボタンを追加して、ユーザーが簡単にページの上部に戻れるようにしましょう。

            <hr>
            <a class="btn btn-primary" href="#">Topに戻る</a>
        </div>
    </div>
    <!-- /.container -->

ボタンをクリックするとページのトップに戻れます。これで、ユーザーフレンドリーなページが完成です。

ステップ4：スクリプトの追加

最後に、BootstrapのJavaScript機能を使うためのスクリプトを追加します。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up