注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

Bootstrapダウンロード方法とPythonへの実装~入門編

ここでは「Bootstrapダウンロード方法」ということでBootstrapをダウンロードする2パターンの方法と「Pythonへの実装」方法を紹介します。

 

この「Bootstrapのダウンロード方法とPythonへの実装」を読むことで

Bootstrapのソフトをダウンロードする方法

BootstrapのCDNを使う方法

PythonでBootstrapを組み込む方法

を学ぶことができます。

 

したがって

Bootstrapを使ってフロントエンドの学習をしてみたい!

PythonのFlaskでBootstrapを使った装飾をしてみたい!

という方に役立てて頂ければ幸いです。

 

それでは始めていきましょう!

 

Bootstrapとは何か?

まずはBootstrapとは何か?について軽く確認をしておきます。

 

Bootstrap(ブートストラップ)とは

世界で最も人気のある「フロントエンド」のコンポーネントライブラリ

で、レスポンシブWebデザインを行うために使われる代表的なフレームワークになります。

 

このBootstrapには、Webデザインを行うために必要なレイアウトがいくつも用意されており、これらを組み込むことで簡単にWebデザインを実装することができます。

 

このフレームワークは「Twitter社」で開発されたため、タイポグラフィ、フォーム、ボタン、ナビゲーションなど高クオリティなレイアウトが多いのも特徴の一つと言っていいでしょう。

 

現在のBootstrapのバージョンは

Bootstrap v4.5.X

になります。(2020/12/09日現在)

 

また、Bootstrapの導入も比較的簡単に行うことができ

・公式サイトから「ソフトウェア」をダウンロードして使用する・CDNから参照して使用する

方法があります。

 

ダウンロードする場合は、サーバー不具合による影響がない反面、管理やアップデートの手間がかかります。

 

一方CDNの場合は、タグを書くだけで組み込むことができるが、CDNのサーバーに不具合が生じるとWebアプリにも影響が出る可能性があるということです。

 

ですがCDNのサーバーに不具合が出ることはあまりないので、Bootstrapを学んでみよう!と言った方は即座にBootstrapを始められる「CDN」を利用するのがオススメです。

 

ということでそれぞれのダウンロード方法を見ていきましょう。

 

Bootstrapのダウンロード方法

では早速Bootstrapのダウンロード方法を紹介していきます。

 

Bootstrapを直接ダウンロードする

まずはBootstrapを直接ダウンロードする方法です。

既に公式サイトのトップページ(下図)を開いている方は赤枠の「ダウンロード」をクリックしてダウンロードページに移動します。

bootstrap-dl-01

 

まだ公式サイトを開いていない方は、Bootstrap-Download公式サイト(下記URL)からダウンロードページに移動します。

 

Bootstrap公式-Download

 

ダウンロードページに移動したら、「Compiled CSS and JS」のダウンロードボタンをクリックして「bootstrap-4.5.0-dist.zip」をダウンロードします。

bootstrap-dl-02

ダウンロードが終わったら、展開してデスクトップなり、どこか自分の分かりやすい場所にフォルダを置いておきましょう。

 

フォルダの準備ができたら

Desktop:

➡ 📁 bootstrap-4.5.X-dist (初期フォルダ名)

➡  📁 css

➡  📁 js

➡  layout.html

とHTMLファイルを準備しHTMLファイルにプログラムを記述していきます。

 

<head>  
    <!--
        ・・・・必要なmetaタグ、h1タグなどを記述・・・・
    -->
 
    <!-- モバイル最適化 -->
    <meta name="viewport"content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

 

上記のように、<link rel=” “>や<script src=” ” >でパスを指定してファイルを読み込んであげれば、Bootstrapを使ったWebデザインが可能となります。

 

BootstrapCDNを使用する

続いて、BootstrapのCDNを使用する方法です。

CDNを使用する方法として、公式サイト-Introductionのスターターテンプレートを参考にします。

 

Bootstrap公式-Introduction

 

適当なフォルダに「layout.html」ファイルを作成し以下の場所に組み込み用のコードを記述していきましょう。

 

CDNの導入は簡単で

モバイルの最適化読み込み先リンク(CSS、JS、JQuery)

を記述します。(コメントアウトで★をつけた部分)

 

<head>
    <!-- 
        必要なmetaタグやtitleを任意に記述
    -->

    <!-- ★モバイル最適化 -->
    <meta name="viewport"content="width=device-width,initial-scale=1, shrink-to-fit=no">

    <!-- ★Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
    <!--
        必要なh1やpを任意に記述
    -->

    <!-- ★jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

 

BootstrapCSSの読み込みで記述したコード(<link rel=”stylesheet” ~ > )の「 integrity =” ” 」 と 「 crossorigin=” ” 」 は省略しても動作します。

 

これでBootstrapCDNの導入は終了です。

あとは実際にBootstrapを利用して装飾してみましょう。

 

ではBootstrapの使い方を紹介する前にお知らせです。

Bootstrapなどを使ってWebアプリケーション開発を学びたい方は「Udemy」のこちらのコースがオススメです。

Webプログラミングをマスターしてフロントエンドエンジニアを目指したい方、Webアプリを開発してみたい方は是非上記リンクからのぞいてみてください。

 

Bootstrapの使い方とプログラム例

それでは実際にBootstrapの使い方をプログラムを例に見ていきましょう。

 

HTMLファイルで実行する

まずはHTMLファイル単体にBootstrapを組み込んで装飾する方法を紹介します。

先ほど作成した「layout.html」を下記のように書き換えましょう。

layout_0.html

<!DECOTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta name="description"content="">
    <meta name="keywords"content="">

    <!-- モバイル最適化 -->
    <meta name="viewport"content="width=device-width,initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Bootstrap</title>

</head>
<body>
    <h1 class="m-3">Bootstrap</h1>

    <p class="m-3">Hello! Bootstrap!</p>

    <footer class="bg-info">
    <ul class="nav pull-right">
        <li class="m-3"><a href="#" class="text-white">サイトポリシー</a></li>
        <li class="m-3"><a href="#" class="text-white">プライバシーポリシー</a></li>
        <li class="m-3"><a href="#" class="text-white">サイトマップ</a></li>
    </ul>
    </footer>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</body>
</html>

 

上記ではBootstrapをダウンロードした場合を想定して、スタイルシートの読み込み先のパスを指定しています。

CDNの場合は、読み込み部分が「https://~」と変わるだけです。

 

実行してみると

bootstrap-dl-04

とレイアウトが実装されていることが確認できます。

 

PythonのFlaskで実行する~verCDN

続いて、PythonのFlask下でBootstrapを使用してみます。

まずは、Bootstrapの導入が便利なCDNを使った方法です。

 

Flaskの使い方については「Flask入門編01」の下記記事

Flask入門編01 Pythonを使って簡単なWebアプリを作成する

をご覧ください。

 

また、テンプレートの継承は「Flask入門編02」の下記記事

Flask入門編02 Pythonを使って簡単なログインWebアプリを作成する

をご覧ください。

 

では早速Bootstrapを組み込んだHTML・Pythonファイルを見ていきましょう。

 

layout.html

<!DECOTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta name="description"content="">
    <meta name="keywords"content="">

    <!-- モバイル最適化 -->
    <meta name="viewport"content="width=device-width,initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    {%block title %}{%endblock %}

</head>
<body>
    {% block headline %}{%endblock %}

    {% block content %}{% endblock %}

    {% block footer %}{% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

</body>
</html>

 

index.html

<!-- index.htmlを継承してWebページを作成 -->
{% extends "layout.html" %}

<!-- loginページ -->
{% block title %}
<title>{{title}}</title>
{% endblock %}

{% block headline %}
<h1 class="m-3">{{title}}</h1>
{% endblock %}

{% block content %}
<p class="m-3">{{ message }}</p>
{% endblock %}

{% block footer %}
<footer class="bg-info">
    <ul class="nav pull-right">
    {% for remarks in data %}
        <li class="m-3"><a href="#" class="text-white">{{remarks}}</a></li>
    {% endfor %}
    </ul>
</footer>
{% endblock %}

 

app.py

from flask import Flask, render_template, request, redirect, abort

app = Flask(__name__)    # Flaskインスタンス作成

f_data = ['サイトポリシー', 'プライバシーポリシー', 'サイトマップ']

@app.route('/', methods=['GET', 'POST'])
def login_page():
    global f_data

    if request.method == 'GET':
        return render_template('index.html', \
            title='Bootstrap', \
            message='Hello! Bootstrap!', \
            data = f_data)

    elif request.method == 'POST':
        content = request.form.get('form')
        return render_template('index.html', \
            title = 'Bootstrap', \
            message=content, \
            data = f_data)
    else:
        return abort(404)

if __name__ == '__main__':
    app.run(debug=True, host = 'localhost', port=5000, threaded=True)    # Webアプリケーションの起動

 

これらの記述ができたら、コマンドプロンプト、ターミナルで「python app.py」と記述しアプリを起動させます。

bootstrap-dl-03

すると、先ほど「HTML」で実行した結果と同じUIでWebアプリを表示することができました。

 

プログラムとしては、Bootstrap特有のclassを与えただけの単純な記述になります。

※Bootstrapの各機能は他の記事で解説予定

 

これでBootstrap-CDNの動作確認は終了です。

 

PythonのFlaskで実行する~verソフトダウンロード

続いて、Bootstrapのソフトをダウンロードした場合の実行方法を紹介します。

こちらは、PythonのFlaskを使用するため

ファイルパスの関係がCDNと変わる

点に注意しましょう。

 

まずはBootstrapをダウンロードしたフォルダを以下のようにまとめ、HTMLファイルとPythonファイルを用意します。

Desktop:

➡ 📁 bootstrap-4.5.X-dist (初期フォルダ名)

➡  📁 static

➡  📁 css

➡  📁 js

➡  📁 templates

➡  layout.html

➡  app.py

 

上記のように、ダウンロードしたCSSファイルとJSファイルを「static」フォルダに入れます。

そしたら、「layout.html」のCSS、JS読み込み部分を下記のように書き換えます。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="{{url_for('static', filename='js/bootstrap.min.js')}}"></script>

 

先ほどはCDNを使用していたので、https://でURLを指定すればBootstrapを組み込むことができましたが、Bootstrapをダウンロードしている場合は

url_for(‘static’, filename=” ○○ ” )

を使ってパス、ファイル名を指定する必要があります。

 

この点に注意すれば、Bootstrapをダウンロードした場合でもCDN同様にBootstrapのレイアウトを組み込むことができます。

 

 

以上、Bootstrapのダウンロード方法とPythonへの実装でした。

Bootstrapが使えるようになるとWebデザインの幅が広がるので、この機会に是非挑戦してみましょう。

 

お疲れ様でした。

bootstrap-dl-top-thubnail
学びに関する情報をチェック!