paiza.ioでプログラミング(その4)HTML形式での出力表示

/ 闇野暗男

プログラミングのオンライン実行環境であるpaiza.ioを使っています。paiza.ioでは(画面)出力の表示形式で通常のテキスト形式の他にHTML形式とJSON形式も選択出来ます。

今回はこの出力形式でテキスト形式とHTML形式を試してみます。HTML形式にすると、ブラウザで表示するように見えるということです。

つまり、プログラムの実行過程、実行結果を単純なテキスト形式と比較して分かりやすく、見やすく表示出来るというメリットが考えられます。自分が作ったプログラムを他の人に説明する時に有効な場合があると思います。

簡単な表示で比較する
早速ですが、Pyhon3で表示形式を比較してみます。
paiza.ioのPython3での簡単な使い方は以下で書きました。必要な場合はこちらを参照して下さい。
paiza.ioでプログラミング(その1)Python3で動作確認と入出力

以下のPython3のプログラムを実行してみます。

print("<h1>Hello World!</h1>")
print("<hr>")

初期設定のテキスト表示で以下のように表示されました。赤枠の部分です。

これをHTML形式に変更します。以下の部分の表示形式をHTMLに変更します。

以下のように表示が変わりました。

確かにh1タグとbrタグを認識して表示されました。htmlタグから始めないでも認識出来るようです。

CSSも認識出来ます
以下の投稿で使ったCSSも認識出来ました。
PythonでWebプログラミングの基礎(その5)CGIでCSSの適用

ここではやや強引かもしれないですが、以下のように単純にstyleタグに直接書いたHTMLテキストを表示しました。

htmlText = '''
<html>
<head>
  <title>HTML画面表示する</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>ヘッダー部分の表示</p>
</header>
<div class="content">
<p>本文1行目</p>
<p>本文2行目</p>
<p>本文2行目</p>
</div>
</body>
</html>
'''

print(htmlText)

以下のように表示されました。

CSSで意図した表示が出来ました。

今回のまとめとして
Pythonに限らずですが、プログラミングと表示のためのHTML、CSSは別のテーマと言えば別のテーマです。しかしながら、今回のように出力形式としてHTMLを利用することによって基本的な事項だけでもHTMLやCSSについて習得出来ると思います。ぜひ試して欲しいと思います。

また、興味を持ったら以下からの記事も読んでみて下さい。
PythonでWebプログラミングの基礎(その1)Webサーバの動作確認

またいろいろと書きたいと思います。

関連するかもしれない記事