Web

[Python] BottleでCSSを扱う方法【インライン/外部ファイル】

2025-01-18更新日: 2025-01-18

BottleでCSSを扱う方法は、インラインスタイルと外部ファイルの2つがあります。

インラインスタイルはHTML内で直接<style>タグを使ってCSSを記述します。

一方、外部ファイルを使用する場合は、CSSファイルを静的ファイルとして提供します。

Bottleでは@routeデコレータを使って静的ファイルのルートを設定し、static_file()関数でCSSファイルを返します。

HTML内では<link>タグを使って外部CSSファイルを参照します。

目次から探す

BottleでのCSSの基本的な扱い方
インラインCSSの使用方法
外部CSSファイルの使用方法
Bottleでの静的ファイルの管理
BottleでのCSSの応用例
まとめ

BottleでのCSSの基本的な扱い方

Bottleとは

Bottleは、Pythonで書かれたシンプルで軽量なWebアプリケーションフレームワークです。

シングルファイルで動作し、簡単にWebアプリケーションを構築できるため、特に小規模なプロジェクトやプロトタイピングに適しています。

Bottleは、ルーティング、テンプレートエンジン、静的ファイルの提供など、Webアプリケーションに必要な基本機能を備えています。

BottleでのHTMLテンプレートの利用

Bottleでは、HTMLテンプレートを使用して動的なWebページを生成できます。

デフォルトでは、BottleはSimpleTemplateというテンプレートエンジンを使用します。

以下は、BottleでHTMLテンプレートを利用する基本的な例です。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    return template('<b>こんにちは、世界！</b>')
run(app, host='localhost', port=8080)

このコードを実行すると、ブラウザで「こんにちは、世界！」と表示されるページが表示されます。

CSSの役割とBottleでの適用方法

CSS(Cascading Style Sheets)は、Webページのスタイルを定義するための言語です。

HTMLの構造を装飾し、視覚的に魅力的なページを作成するために使用されます。

BottleでCSSを適用する方法は主に2つあります。

インラインCSS: HTML要素に直接スタイルを記述する方法。
外部CSSファイル: 別のCSSファイルを作成し、HTML内でリンクする方法。

以下は、Bottleで外部CSSファイルを適用する基本的な例です。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
    </body>
    </html>
    '''
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

この例では、/static/style.cssというパスでCSSファイルを提供しています。

CSSファイルを作成し、スタイルを定義することで、Webページの見た目を変更できます。

インラインCSSの使用方法

インラインCSSとは

インラインCSSとは、HTML要素に直接スタイルを記述する方法です。

各要素のstyle属性を使用して、特定の要素に対して個別にスタイルを適用します。

この方法は、特定の要素に対して一時的なスタイルを適用したい場合や、少数の要素に異なるスタイルを適用したい場合に便利です。

Bottleテンプレート内でのインラインCSSの記述方法

Bottleのテンプレート内でインラインCSSを記述するには、HTML要素のstyle属性を使用します。

以下は、BottleでインラインCSSを使用する基本的な例です。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    return template('''
    <!DOCTYPE html>
    <html>
    <head>
        <title>インラインCSSの例</title>
    </head>
    <body>
        <h1 style="color: blue; text-align: center;">こんにちは、世界！</h1>
        <p style="font-size: 20px; color: green;">これはインラインCSSの例です。</p>
    </body>
    </html>
    ''')
run(app, host='localhost', port=8080)

このコードを実行すると、青色の見出しと緑色の段落が表示されます。

インラインCSSのメリットとデメリット

メリット	デメリット
特定の要素に簡単にスタイルを適用できる	再利用性が低く、冗長になる可能性がある
簡単にテストやデバッグができる	HTMLが煩雑になり、可読性が低下する
他のスタイルに影響を与えない	スタイルの一貫性が失われることがある

インラインCSSは、特定の要素に対して迅速にスタイルを適用できる一方で、再利用性や可読性に欠けるため、使用する際には注意が必要です。

インラインCSSの具体例

以下は、Bottleを使用してインラインCSSを適用した具体例です。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    return template('''
    <!DOCTYPE html>
    <html>
    <head>
        <title>インラインCSSの具体例</title>
    </head>
    <body>
        <h1 style="color: red; font-size: 30px;">インラインCSSの具体例</h1>
        <p style="background-color: yellow; padding: 10px;">この段落はインラインCSSでスタイルされています。</p>
    </body>
    </html>
    ''')
run(app, host='localhost', port=8080)

このコードを実行すると、赤色の見出しと黄色の背景を持つ段落が表示されます。

インラインCSSを使用することで、特定の要素に対して直接スタイルを適用することができます。

外部CSSファイルの使用方法

外部CSSファイルとは

外部CSSファイルとは、CSSスタイルを別のファイルに記述し、HTML文書からリンクして使用する方法です。

この方法を使用することで、スタイルを一元管理でき、複数のHTMLファイルで同じスタイルを再利用することが可能になります。

外部CSSファイルは、通常.cssという拡張子を持つテキストファイルです。

Bottleで静的ファイルを提供する方法

Bottleでは、静的ファイル(CSS、JavaScript、画像など)を提供するために、static_file()関数を使用します。

この関数を使うことで、指定したパスから静的ファイルをクライアントに配信できます。

静的ファイルは、アプリケーションのルートディレクトリ内の特定のフォルダに配置することが一般的です。

static_file()関数の使い方

static_file()関数は、以下のように使用します。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

この例では、/static/<filename>というルートで静的ファイルを提供しています。

root引数には、静的ファイルが格納されているディレクトリのパスを指定します。

外部CSSファイルのリンク方法

外部CSSファイルをHTMLにリンクするには、<link>タグを使用します。

以下は、Bottleで外部CSSファイルをリンクする基本的な例です。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        <title>外部CSSファイルの例</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
    </body>
    </html>
    '''
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

このコードでは、style.cssという外部CSSファイルをリンクしています。

外部CSSファイルのメリットとデメリット

メリット	デメリット
スタイルを一元管理できる	初期読み込み時にリクエストが増える
複数のHTMLファイルで再利用可能	ファイルが多くなると管理が煩雑になる
可読性が高く、HTMLがすっきりする	外部ファイルの読み込みに失敗する可能性がある

外部CSSファイルは、スタイルの再利用性や管理のしやすさが大きな利点ですが、初期読み込み時のパフォーマンスに影響を与えることがあります。

外部CSSファイルの具体例

以下は、Bottleを使用して外部CSSファイルを適用した具体例です。

style.cssというファイルをstaticフォルダに作成し、以下の内容を記述します。

h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 20px;
    color: green;
}

Bottleアプリケーションのコードは以下の通りです。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        <title>外部CSSファイルの具体例</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
        <p>これは外部CSSファイルの具体例です。</p>
    </body>
    </html>
    '''
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

このコードを実行すると、青色の見出しと緑色の段落が表示され、外部CSSファイルが適用されます。

Bottleでの静的ファイルの管理

静的ファイルのディレクトリ構成

Bottleで静的ファイルを管理する際は、適切なディレクトリ構成を持つことが重要です。

一般的には、プロジェクトのルートディレクトリ内にstaticというフォルダを作成し、その中にCSS、JavaScript、画像などのファイルを格納します。

以下は、一般的なディレクトリ構成の例です。

/my_project
│
├── app.py                # Bottleアプリケーションのメインファイル
├── static                # 静的ファイル用のディレクトリ
│   ├── style.css         # CSSファイル
│   ├── script.js         # JavaScriptファイル
│   └── image.png         # 画像ファイル
└── templates             # テンプレート用のディレクトリ
    └── index.tpl         # HTMLテンプレートファイル

このように構成することで、静的ファイルを整理しやすくなります。

@routeデコレータで静的ファイルを提供する

Bottleでは、@routeデコレータを使用して静的ファイルを提供することができます。

以下は、@routeデコレータを使って静的ファイルを提供する基本的な例です。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

このコードでは、/static/<filename>というルートで静的ファイルを提供しています。

filenameは、リクエストされたファイル名に置き換えられます。

複数の静的ファイルを扱う方法

複数の静的ファイルを扱う場合も、上記のserver_static関数を利用します。

例えば、CSSファイル、JavaScriptファイル、画像ファイルなど、異なる種類の静的ファイルを同じstaticディレクトリ内に配置し、同様の方法で提供できます。

@app.route('/static/css/<filename>')
def server_css(filename):
    return static_file(filename, root='./static/css')
@app.route('/static/js/<filename>')
def server_js(filename):
    return static_file(filename, root='./static/js')
@app.route('/static/images/<filename>')
def server_images(filename):
    return static_file(filename, root='./static/images')

このように、異なるサブディレクトリを作成することで、静的ファイルを整理しやすくなります。

CSS以外の静的ファイル(画像やJavaScript)の扱い

Bottleでは、CSS以外の静的ファイル(画像やJavaScriptファイル)も同様に扱うことができます。

以下は、画像ファイルとJavaScriptファイルを静的に提供する例です。

staticディレクトリ内にimagesとjsというサブディレクトリを作成し、それぞれに画像ファイルとJavaScriptファイルを配置します。

/my_project
│
├── static
│   ├── css
│   │   └── style.css
│   ├── js
│   │   └── script.js
│   └── images
│       └── logo.png

Bottleアプリケーションのコードは以下の通りです。

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
        <script src="/static/js/script.js"></script>
        <title>静的ファイルの管理</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
        <img src="/static/images/logo.png" alt="ロゴ">
    </body>
    </html>
    '''
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

このコードを実行すると、CSS、JavaScript、画像ファイルが正しく読み込まれ、Webページに表示されます。

これにより、Bottleを使用して静的ファイルを効果的に管理することができます。

BottleでのCSSの応用例

レスポンシブデザインの実装

レスポンシブデザインは、デバイスの画面サイズに応じてWebページのレイアウトを調整する手法です。

CSSのメディアクエリを使用することで、異なる画面サイズに対応したスタイルを適用できます。

以下は、Bottleを使用してレスポンシブデザインを実装する基本的な例です。

/* static/style.css */
body {
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
}
@media (max-width: 600px) {
    h1 {
        font-size: 24px;
    }
}

from bottle import Bottle, run, static_file
app = Bottle()
@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        <title>レスポンシブデザインの例</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
    </body>
    </html>
    '''
@app.route('/static/<filename>')
def server_static(filename):
    return static_file(filename, root='./static')
run(app, host='localhost', port=8080)

この例では、画面幅が600px以下の場合に見出しのフォントサイズを小さくするスタイルを定義しています。

複数のCSSファイルを使い分ける方法

複数のCSSファイルを使い分けることで、スタイルを整理し、管理しやすくすることができます。

例えば、基本スタイルとテーマスタイルを別々のファイルに分けることができます。

staticディレクトリ内にbase.cssとtheme.cssを作成します。

/* static/base.css */
body {
    font-family: Arial, sans-serif;
}
/* static/theme.css */
h1 {
    color: green;
}

Bottleアプリケーションで両方のCSSファイルをリンクします。

@app.route('/')
def index():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/base.css">
        <link rel="stylesheet" type="text/css" href="/static/theme.css">
        <title>複数のCSSファイルの例</title>
    </head>
    <body>
        <h1>こんにちは、世界！</h1>
    </body>
    </html>
    '''

このようにすることで、スタイルを分けて管理することができ、必要に応じて特定のスタイルを変更しやすくなります。

動的にCSSを切り替える方法

ユーザーの操作や条件に応じてCSSを動的に切り替えることも可能です。

以下は、ボタンをクリックすることでCSSを切り替える例です。

<!DOCTYPE html>
<html>
<head>
    <link id="theme" rel="stylesheet" type="text/css" href="/static/light.css">
    <title>動的CSS切り替えの例</title>
    <script>
        function toggleTheme() {
            var link = document.getElementById('theme');
            if (link.getAttribute('href') === '/static/light.css') {
                link.setAttribute('href', '/static/dark.css');
            } else {
                link.setAttribute('href', '/static/light.css');
            }
        }
    </script>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <button onclick="toggleTheme()">テーマを切り替える</button>
</body>
</html>

この例では、ボタンをクリックすることで、light.cssとdark.cssの間でスタイルを切り替えています。

CSSフレームワーク(Bootstrapなど)の導入

CSSフレームワークを使用することで、迅速に美しいデザインを実現できます。

Bootstrapは人気のあるCSSフレームワークの一つです。

以下は、BottleでBootstrapを導入する基本的な例です。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Bootstrapの例</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center">こんにちは、世界！</h1>
        <p class="lead">これはBootstrapを使用した例です。</p>
    </div>
</body>
</html>