PythonでWebプログラミングの基礎(その5)CGIでCSSの適用 – システム開発系エンジニアのハンドルネーム闇野暗男です

PythonでWebプログラミングの基礎を学習するというテーマで書いています。今回はCGIでCSSを適用させて表示させるという内容です。一般的にHTMLファイルにCSSを適用するのと同様にCGIでの動的ページでもCSSを適用することが出来ます。CSSを適用させるとWebページらしくなると思ったので取り上げてみました。

実際にやってみます。
以下のページで書いた現在時刻の表示を使ってみます。起動方法等が必要でしたら以下のページを参照して下さい。
PythonでWebプログラミングの基礎(その2)CGIで動的ページの表示

CSSがない場合の表示です。

これを以下のように表示させてみました。

これのCSSファイルが以下です。

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header{
    height:50px;
    text-align: left;
    background-color: #888;
    color: #fff;
    padding-left: 20px
}

.content{
    flex: 1;
    background-color: #eee;
    text-align: left;
    margin-top: 5px;
    padding-left: 20px
}

ここではCSSの適用方法がテーマなので詳細については省略しますが、ヘッダー部分とコンテンツ部分に分けて表示します。

これを以下のようにCGIプログラムで表示しています。

#!/usr/bin/env python3

htmlText = '''Content-type: text/html; charset=UTF-8

<html>
<head>
  <title>現在時刻を表示する</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
<header class="header">
   <p>CGIで現在時刻表示</p>
</header>
<div class="content">
<p>%s</p>
</div>
</body>
</html>
'''

import time
now = time.strftime('%Y年%m月%d日 %H時%M分%S秒')
print(htmlText % now)

CGIプログラムなのですが、見て頂ければと思いますが普通にHTMLの部分でCSSを適用させています。

これでCSSが適用出来ます。ファイルの配置を確認します。CSSファイルはWebサーバのホームディレクトリに配置してCGIプログラムはcgi-binディレクトリに配置しています。

以下は例です。webserverというディレクトリがWebサーバのホームディレクトリでここでPythonを起動します。cgi-binディレクトリにCGIプログラムを配置しています。

以下のようにPythonを起動します。

この状態でブラウザからアクセスするとCSSが正常に適用された状態で表示されます。

直接htmlの文字列にstyleタグで書くことも出来ます。

#!/usr/bin/env python3

htmlText = '''Content-type: text/html; charset=UTF-8

<html>
<head>
  <title>現在時刻を表示する</title>
  <style>
    body{
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

   .header{
      height:50px;
      text-align: left;
      background-color: #888;
      color: #fff;
      padding-left: 20px
    }

    .content{
      flex: 1;
      background-color: #cce;
      text-align: left;
      margin-top: 5px;
      padding-left: 20px
    }
  </style>
</head>
<body>
<header class="header">
   <p>CGIで現在時刻表示</p>
</header>
<div class="content">
<p>%s</p>
</div>
</body>
</html>
'''

import time
now = time.strftime('%Y年%m月%d日 %H時%M分%S秒')
print(htmlText % now)

.contentの背景色を少しだけ変えてみました。以下のように表示出来ました。