プログラミング

Bootstrap 3 ページデザインガイド

最終更新： 23/04/2025
1分未満

Bootstrap 3を使用したウェブサイトページのデザインは、レスポンシブで美しいインターフェースを作成するために非常に強力なツールです。Bootstrap 3は、グリッドシステムやUIコンポーネント、カスタマイズ可能なスタイルを提供し、ウェブ開発を効率的に進めることができます。本記事では、Bootstrap 3を使ってページをデザインする方法を、具体的なコード例と共に解説します。

1. Bootstrap 3のセットアップ

まず、Bootstrap 3をプロジェクトに導入するための準備をします。Bootstrap 3は、CDN（コンテンツ配信ネットワーク）から簡単に利用できます。

関連記事

CDNを使ったBootstrapの導入

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3 サンプルページtitle>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
head>
<body>
    
body>
html>

これで、Bootstrapのスタイルと機能をページで使用できるようになります。

2. グリッドシステムの利用

Bootstrap 3のグリッドシステムは、12列のレイアウトをベースにしており、各列の幅はコンテナに対して相対的に設定されます。これにより、レスポンシブデザインを簡単に実現できます。

基本的なグリッドレイアウト

html
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">セクション 1div>
                <div class="panel-body">
                    コンテンツ1
                div>
            div>
        div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">セクション 2div>
                <div class="panel-body">
                    コンテンツ2
                div>
            div>
        div>
        <div class="col-md-4">
            <div class="panel panel-primary">
                <div class="panel-heading">セクション 3div>
                <div class="panel-body">
                    コンテンツ3
                div>
            div>
        div>
    div>
div>

このコードでは、col-md-4を使用して3つの列を作成しています。それぞれの列は、ページの中で均等に分割され、画面の幅が中程度（md）以上であれば、1行に3列が表示されます。これにより、レスポンシブなレイアウトが実現されます。

3. ナビゲーションバーの作成

Bootstrap 3には、ナビゲーションバーを簡単に作成できるクラスがあります。以下に、一般的なナビゲーションバーの例を示します。

ナビゲーションバー

html
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">ブランド名a>
        div>
        <ul class="nav navbar-nav">
            <li><a href="#">ホームa>li>
            <li><a href="#">サービスa>li>
            <li><a href="#">お問い合わせa>li>
        ul>
    div>
nav>

このコードでは、navbar, navbar-default, navbar-header, navbar-navといったBootstrapのクラスを使用しています。これにより、視覚的にスタイリッシュなナビゲーションバーが簡単に作成できます。

4. ボタンのスタイル

Bootstrap 3では、さまざまなスタイルのボタンを簡単に作成できます。例えば、プライマリボタンやセカンダリボタン、警告ボタンなどがあります。

ボタンの例

html
<button class="btn btn-primary">プライマリボタンbutton>
<button class="btn btn-secondary">セカンダリボタンbutton>
<button class="btn btn-warning">警告ボタンbutton>

これらのボタンは、クリック可能なアクションを強調するために使用されます。btn-primaryやbtn-warningなどのクラスを使って、ボタンに異なる色を適用できます。

5. フォームの作成

フォームの作成も、Bootstrap 3を使うことで非常に簡単に行えます。form-groupやform-controlなどのクラスを使用することで、きれいで使いやすいフォームを作成できます。

フォームの例

html
<div class="container">
    <form>
        <div class="form-group">
            <label for="name">名前:label>
            <input type="text" class="form-control" id="name" placeholder="名前を入力">
        div>
        <div class="form-group">
            <label for="email">メールアドレス:label>
            <input type="email" class="form-control" id="email" placeholder="メールアドレスを入力">
        div>
        <button type="submit" class="btn btn-success">送信button>
    form>
div>

このコードでは、form-groupを使ってフォームフィールドをラップし、form-controlで入力フィールドにスタイルを適用しています。

6. モーダルウィンドウの実装

Bootstrap 3では、モーダル（ポップアップ）ウィンドウを簡単に実装することができます。モーダルは、ユーザーの注意を引きたい情報を表示する際に便利です。

モーダルウィンドウの例

html

<button class="btn btn-info" data-toggle="modal" data-target="#myModal">モーダルを開くbutton>


<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×button>
                <h4 class="modal-title">モーダルタイトルh4>
            div>
            <div class="modal-body">
                <p>ここにモーダルのコンテンツを挿入します。p>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じるbutton>
            div>
        div>
    div>
div>

このコードでは、data-toggle="modal"とdata-target="#myModal"を使って、ボタンをクリックしたときにモーダルが表示される仕組みを作っています。

7. 結論

Bootstrap 3は、迅速なウェブ開発を可能にする非常に強力なフレームワークです。グリッドシステム、ナビゲーションバー、ボタン、フォーム、モーダルウィンドウなど、豊富なコンポーネントを提供し、ウェブページを短時間で美しく仕上げることができます。また、レスポンシブデザインを簡単に適用できるため、PCやモバイル、タブレットでも適切に表示されるウェブサイトを作成できます。

次回は、Bootstrap 3をさらに深く学び、カスタマイズや追加機能について詳しく見ていきましょう。

最終更新： 23/04/2025
1分未満
Back to top button