HTML/Markdown のStyle sheet reference になります。 前提はKarmdownで、 Jekyll Minimal Mistakes がテーマです。
文字に色をつける
1
2
これは、<span style="color:green"> *green*</span> 色。<br>
これは、<span style="color:#FF44AB"> **カスタム** </span>色(16進コード)。
これは、 green 色。
これは、 カスタム 色(16進コード)。
強制的に文字を左右中央に配置する
1
2
3
4
5
6
7
8
中央
{: style="text-align: center; color: blue; font-weight: bold;"}
Right[^1]
{: style="text-align: right; color: red; font-style: italic;"}
左寄せ
{: style="text-align: left; color: green; font-size:1.10em;"}
[^1]: イタリックは主に英語で使用する
中央
Right1
左寄せ
Notice Box
1
2
**Notice:** 重要なNoticeです。
{: .notice--danger}
Notice: 重要なNoticeです。
Color Variation
Notice: {: .notice}
Primay Notice: {: .notice–primary}
Info Notice: {: .notice–info}
Warning Notice: {: .notice–warning}
Danger Notice: {: .notice–danger}
Success Notice: {: .notice–success}
Capture Notice 1 (Liquid Version)
1
2
3
4
5
6
7
8
9
10
11
12
{% capture notice-1 %}
**Notice Box**:
* capture と endcapture で囲む
* リスト表示できます
* Code Blockも可能
```python
import numpy as np
import pandas as pd
import seaborn as sns
```
{% endcapture %}
<div class="notice--info"><span style="font-size:1.15em;">{{ notice-1 | markdownify }}</span></div>
Result1
Notice Box:
- capture と endcapture で囲む
- リスト表示できます
- Code Blockも可能
import numpy as np
import pandas as pd
import seaborn as sns
Capture Notice 2
1
2
3
4
5
6
7
8
9
10
11
12
13
{% capture notice-1 %}
**Notice Box**:
1. リスト表示できます
2. Tableも可能
| 左寄せ | 真ん中 | 右寄せ |
| :----- | :----: | -----: |
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
|====
| footer | ft_1-2 | ft_1-3 |
{% endcapture %}
<div class="notice--warning"><span style="font-size:1.25em;">{{ notice-1 | markdownify }}</span></div>
Result2
Notice Box:
- リスト表示できます
- Tableも可能
| 左寄せ | 真ん中 | 右寄せ |
|---|---|---|
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| footer | ft_1-2 | ft_1-3 |
Capture Notice 3
1
2
3
4
5
6
7
8
9
10
11
12
{% capture notice-1 %}
**Notice Box**:
* capture と endcapture で囲む
* リスト表示できます
* Quoteも可能
>
import numpy as np<br>
import pandas as pd<br>
import seaborn as sns<br>
>{:style="font-size:1.25em;"}
{% endcapture %}
<div class="notice--success"><span style="font-size:1.15em;">{{ notice-1 | markdownify }}</span></div>
Result3
Notice Box:
- capture と endcapture で囲む
- リスト表示できます
- Quoteも可能
import numpy as np
import pandas as pd
import seaborn as sns
Capture Notice 4 (HTML Version)
1
2
3
4
5
6
7
8
9
10
11
12
<div class="notice--danger" markdown="1">
<span style="font-size:1.25em;">**Notice-Danger w/ コードブロック**</span>
<ol>
<li><span style="font-size:1.25em;">テキスト文１...</span></li>
<li><span style="font-size:1.25em;">テキスト文２....</span></li>
</ol>
```html
<html>
<body>テキストBody<body>
</html>
```
</div>
Result4
Notice-Danger w/ コードブロック
- テキスト文１...
- テキスト文２....
<html>
<body>テキストBody<body>
</html>
文字装飾_リンク付け
1
2
3
4
**Custom styled [_link_](#文字装飾_リンク付け)付きテキスト**
{: style="テキスト-align: center; font-size:1.4em; color: #f78c6c;"}
これは、*red*{: style="color: red; font-weight: bold;"}.
結果
Custom styled link付きテキスト
これは、red.
-
イタリックは主に英語で使用する ↩