1. はじめに
Anki のフィールドに表を記述したい場合、テンプレートとして利用できる HTML を紹介します。
2. フィールド用の表テンプレート (HTML)
早速ですが、「表」のHTMLテンプレートは以下になります。
<table style="
border-collapse: collapse;
border-spacing: 0;
box-sizing: border-box;
border: 1px solid #999;
margin-bottom: 20px;
font-size:90%;">
<caption>ギリシャ文字</caption>
<thead>
<tr style="background-color: #90ee90;">
<th style="padding: 5px;border: 1px solid #999;">小文字</th>
<th style="padding: 5px;border: 1px solid #999;">大文字</th>
<th style="padding: 5px;border: 1px solid #999;">読み</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px;border: 1px solid #999;text-align:center;">α</td>
<td style="padding: 5px;border: 1px solid #999;text-align:center;">Α</td>
<td style="padding: 5px;border: 1px solid #999;">alpha</td>
</tr>
<tr>
<td style="padding: 5px;border: 1px solid #999;text-align:center;">β</td>
<td style="padding: 5px;border: 1px solid #999;text-align:center;">Β</td>
<td style="padding: 5px;border: 1px solid #999;">beta</td>
</tr>
</tbody>
</table>
これを編集して、目的の表にすることを想定しています。
フィールドに表を書く上で面倒なのは、「CSS (スタイル) も、この中で記述しないといけない」という点です。このテンプレートでは、style
属性にスタイルを書きまくっています。
3. フィールドに表を記述する
念の為、表を記述する手順を説明します。
予めデッキブラウザを開き、目的のカードを選択しておきます。
そして、目的のフィールドをクリックしてフォーカスを当て、右上のメニューの中にある「HTML を編集」を選択します。
すると、HTML エディタが開くので、ここに 表のHTMLを記述します。
記述を終えたら「閉じる」ボタンを押します。
以上の操作により、そのフィールドに表が表示されているはずです。
4. もっと複雑な表を書きたい場合
もっと複雑な表を書きたい場合は、以下のようなサービスを利用して、書きたい表のHTMLを生成させることをお勧めします。
- HTML Tables generator – TablesGenerator.com
- Table Tag Generator | rowspan? colspan? You don’t need to worry about them!
但し、CSS (スタイル) は後から追加する必要があります(必要であれば)。
5. おわりに
Anki ファンの皆様、是非ご活用ください?。