2022年10月15日更新

ColaboratoryでHTML表示、１行でも複数行でもファイルでも表示可能！

どうも、クラゲジュニアです。

Google ColaboratoryでHTMLを表示するやり方を紹介します。３通りの実行方法を紹介しますが、全てIPythonモジュールをインポートして活用します。

[TOC]

１行程度のHTMLを表示

ソースコード

from IPython.display import HTML

HTML('富士山は<span style="color:red; font-size:100px;">日本一</span>高い山です！')

実行結果のスクリーンショット

１行程度の短いHTMLなら、このように引数に直接書く方法が良いです。

複数行のHTMLを表示

ソースコード

from IPython.display import HTML

data = '''
<p>富士山は<span style="color:red; font-size:100px;">日本一</span>高い山です！</p>
<p>複数行ある場合はこの書き方が良いですね</p>
'''

HTML(data)

実行結果のスクリーンショット

複数行ある場合は'''を活用して、変数代入を経由してから書くと見やすくなります。セルを分けて書くことも可能です。

長いHTMLを表示

ソースコード

test.htmlとして作成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
        .fuji {
          color: red;
          font-size: 100px; 
        }
    </style>
</head>

<body>
<p>富士山は<span class="fuji">日本一</span>高い山です！</p>
<p>長い場合はファイルにするのが良いですね</p>
</body>

</html>

セルに記述

from IPython.display import HTML

HTML(filename="test.html")

実行結果のスクリーンショット

長い場合は、colaboratory上にhtmlファイルを作成して、キーワード引数filenameを使うことで表示するのが良いです。

左端メニューのフォルダアイコン📁をクリックしてメニューを開き、右クリックから新しいファイルを選択することで簡単にファイルを新規作成できます。

以上です。