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


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

### テキストの表示
#### 通常の表示
HTML関数を使って表示させます。

```python
from ipywidgets import HTML

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

display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/67107a75-b6fe-553e-1619-d4def2f6a9d7.png)

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

```python
html=HTML(value="<b>テキストの表示</b>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/8ca1b2fd-d8b3-9c5e-9b02-e788ecd59381.png)

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

```python
html=HTML(value="<font size='4'>テキストの表示</font>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/00c44905-a0f2-ee04-d7ab-ec62e9a4da89.png)


#### 色を変える

```python
html=HTML(value="<font color=red>テキストの表示</font>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/c063e9b0-f282-fd28-8f92-d4759e91bfbd.png)

```python
html=HTML(value="<u>テキストの表示</u>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/98fd13bc-5e56-acaa-0a6e-65bcc5fcae37.png)

#### マーカーを引く
```python
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)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/67d4b84d-3464-ce28-2566-77382afa2a67.png)

```python
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)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/5ea240de-db4b-12a3-2feb-e1867ee958f7.png)

#### 改行させる
```python
html=HTML(value="テキストの表示<br>テキストの2段目",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/b77fdaed-1b9e-0954-6bc4-25a31d6db37f.png)

```python
html=HTML(value="<p>段落１のテキストです。段落１のテキストです。</p><p>段落２のテキストです。</p>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/6ce3accf-69ee-fea6-50e3-5e9ace0199e3.png)


#### 見出しを付ける
```python
html=HTML(value="<h1>大見出し</h1><br><h2>中見出し</h2><br><h3>小見出し</h3><br>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/05bafb84-df52-d397-8e9e-76fa7a10fc71.png)

#### テーブルを書く
```python
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)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/c9189ca6-8852-f14b-b57e-934bf2088e03.png)

#### 番号無しリストを表示させる
```python
html=HTML(value=
          "<ul>"
            "<li>リスト１</li>"
            "<li>リスト２</li>"
            "<li>リスト３</li>"
            "<li>リスト４</li>"
          "</ul>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/6019aa4b-c5fb-c207-2804-0269b566808e.png)

#### 番号付きリストを表示させる
```python
html=HTML(value=
          "<ol>"
            "<li>リスト１</li>"
            "<li>リスト２</li>"
            "<li>リスト３</li>"
            "<li>リスト４</li>"
          "</ol>",)
display(html)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358656/4d0329a8-01db-ca94-5dbe-7db5c617f9a6.png)