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

メールアドレスが公開されることはありません。

関連記事

Anki

Anki のカードで、フィールドの値によって文字の色を変える

Anki のカードで、フィールドの値によって文字の色を変える方法について書きました。

Vim

vi (vim) の終了手順について

私の vi (vim) 終了手順について書いています。

Web

GitHub のプライベートリポジトリ作成が無料になりました

GitHub において、無料ユーザーでもプライベートリポジトリが作成できるようになりました。 実際に無料アカウントで試したところ、リポジトリの作成ページで「Private」を選択することができました。 …

Vim

pathogen.vim を使って気軽に Vim のプラグインを管理する

Vim というエディタのプラグイン管理に関する話しです。 目次1. まえがき2. pathogen.vim の導入方法3. プラグインの導入方法4. Tips1. 他の環境で同じプラグインを使用する2 …

Windows

WSL のシンプルな導入手順(2019年1月版)

WSL (Windows Subsystem for Linux) の基本的な導入手順について書きます。 ここで最低限必要な使い方を理解した上で、サードパーティ製のターミナルエミュレータ(Cmder …