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

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

関連記事

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

Windowsで何かコマンドを実行する場合、コマンドプロンプトではなく PowerShellを使うと便利なのですが、合わせていくつかのツールを導入すると更に使いやすくなります。 目次PowerShel …

ICTリテラシー

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

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

Windows

WSL (Windows Subsystem for Linux) の導入と設定

本ページでは、WSL (Windows Subsystem for Linux) の導入と設定についてポイントをまとめています。

Chrome

Chrome のデベロッパーツールでは、リダイレクト直前のレスポンスボディが見られない

目次1. はじめに2. Chrome のデベロッパーツール3. Chrome のデベロッパーツールのバグ?4. Firefox の開発ツールなら大丈夫5. おわりに6. 参考 1. はじめに Web …

Web

エンコード、デコード、ハッシュを行うウェブページを作成しました

入力した文字列に対して、以下の変換処理を行う ウェブページ を作成しました。 各種エンコード処理 各種デコード処理 ハッシュ化 いろいろお試しください。 ? エンコード/デコード/ハッシュ