jupyterでipywidgetsを使う1 テキストをHTMLで表示する

jupyterでipywidgetsを使えばきれいに結果を表示できます。
図や表だけでなく、テキストもprint()ではなくHTMLできれいに表示したいと思います。

テキストの表示

通常の表示

HTML関数を使って表示させます。

from ipywidgets import HTML

html=HTML(
    value="テキストの表示",
    description='文字',
)

display(html)

太字にする

太字にするときは<b> </b>で挟みます。

html=HTML(value="<b>テキストの表示</b>",)
display(html)

サイズの変更

テキストのサイズは<font size='4'> </font>で変更します。

html=HTML(value="<font size='4'>テキストの表示</font>",)
display(html)

色を変える

html=HTML(value="<font color=red>テキストの表示</font>",)
display(html)

html=HTML(value="<u>テキストの表示</u>",)
display(html)

マーカーを引く

html0=HTML(value="<span style='background: linear-gradient(transparent 0%, orangered 0%);'>テキストの表示</style>",)
html50=HTML(value="<span style='background: linear-gradient(transparent 50%, orangered 0%);'>テキストの表示</style>",)
html100=HTML(value="<span style='background: linear-gradient(transparent 100%, orangered 0%);'>テキストの表示</style>",)

display(html0)
display(html50)
display(html100)

html0=HTML(value="<span style='background: linear-gradient(transparent 0%, orangered 0%);'>テキストの表示</style>",)
html50=HTML(value="<span style='background: linear-gradient(transparent 0%, orangered 50%);'>テキストの表示</style>",)
html100=HTML(value="<span style='background: linear-gradient(transparent 0%, orangered 100%);'>テキストの表示</style>",)

display(html0)
display(html50)
display(html100)

改行させる

html=HTML(value="テキストの表示<br>テキストの2段目",)
display(html)

html=HTML(value="<p>段落１のテキストです。段落１のテキストです。</p><p>段落２のテキストです。</p>",)
display(html)

見出しを付ける

html=HTML(value="<h1>大見出し</h1><br><h2>中見出し</h2><br><h3>小見出し</h3><br>",)
display(html)

テーブルを書く

html=HTML(value="<table border='1'>"
                    "<tr><th>名前</th><th>年齢</th></tr><tr>"
                    "<td>田中</td><td>27</td></tr><tr>"
                    "<td>佐藤</td><td>25</td></tr>"
                "</table>",)
display(html)

番号無しリストを表示させる

html=HTML(value=
          "<ul>"
            "<li>リスト１</li>"
            "<li>リスト２</li>"
            "<li>リスト３</li>"
            "<li>リスト４</li>"
          "</ul>",)
display(html)

番号付きリストを表示させる

html=HTML(value=
          "<ol>"
            "<li>リスト１</li>"
            "<li>リスト２</li>"
            "<li>リスト３</li>"
            "<li>リスト４</li>"
          "</ol>",)
display(html)