Tools

Ankiのフィールドに表を記述する

投稿日:2021年10月8日 更新日:

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 エディタが開くので、ここに 表のHTMLを記述します。

HTML エディタ

記述を終えたら「閉じる」ボタンを押します。

以上の操作により、そのフィールドに表が表示されているはずです。

表が表示されます

4. もっと複雑な表を書きたい場合

もっと複雑な表を書きたい場合は、以下のようなサービスを利用して、書きたい表のHTMLを生成させることをお勧めします。

但し、CSS (スタイル) は後から追加する必要があります(必要であれば)。

5. おわりに

Anki ファンの皆様、是非ご活用ください😁。

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ImageMagick

コマンドラインで画像ファイルの画像形式を変換する (ImageMagick)

コマンドラインで画像ファイルの画像形式を変換する (ImageMagick) 方法を紹介します。

ICTリテラシー

手軽に画像ファイル(PNG,JPEG)のサイズを小さくする TinyPNG サイト

PNG や JPEG 形式の画像ファイルを、なるべく見た目の品質を維持しつつ、ファイルサイズを小さくしたい場合は、TinyPNG というウェブサイトが手軽で便利です。

Windows

Windows 7 のターミナル設定(MSYS2編)

MSYS2 を使って、Windows 7 にターミナル環境を構築しました。その時のおおまかなポイントを書きたいと思います。 MSYS2というのは、Windows上にUNIXライクな環境を導入するソフト …

WSL

WSL 2 で Docker を使うパターン

目次1. はじめに1-1. Docker についての基礎知識1-2. 前提2. WSL 2 ディストロ(Ubuntu) + パッケージのDocker を利用するパターン3. WSL 2 ディストロ(U …

Anki

Anki: 次回の間隔[日]を算出するページを作りました

Ankiアプリにおける、次回の間隔[日]を算出するページを作りました。