Ankiの英単語用テンプレート

Anki

Last updated at 2025-11-21Posted at 2025-10-31

はじめに

本記事では、Ankiにおける英単語カード作成のためのインポート用テンプレートおよび手動追加用テンプレートを紹介する。
インポート用テンプレートは、AnkiWeb上で公開されている共有デッキ（Shared Deck）を使用する場合に適している。既存の共有デッキを利用して学習を始めたい場合や、CSVで一括登録を行いたい場合に便利である。
一方、手動追加用テンプレートは、後から単語を少しずつ登録していく場合や、共有デッキが存在しない場合に利用することを想定している。

インポート用

プレビュー

フィールド

フィールド名	説明
ID	レコード識別子
語彙	見出し語
品詞	主たる品詞
意味	意味・定義
例文	使用例
訳	例文の和訳
補足	メモ、語源、コロケーションなど
番号	単語帳の見出し番号など
品詞2	副次的な品詞

テンプレート

表面

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="card__index">{{番号}}</div>

<div class="card__header">
  <div class="card__term">
    <span id="copyTarget" class="card__term-text">{{語彙}}</span>
  </div>
  <span class="card__tts" style="display:none;">
    {{tts en_US voices=Apple_Samantha speed=1.0:語彙}}
  </span>
</div>

{{#品詞}}
  <div class="card__pos">
    <span class="card__pos-tag">{{品詞}}</span>
    {{#品詞2}}
      <span class="card__pos-tag">{{品詞2}}</span>
    {{/品詞2}}
  </div>
{{/品詞}}

<div class="card__examples">
  {{#例文}}
    <div class="card__example">
      <div class="card__example-text">{{例文}}</div>
    </div>
  {{/例文}}
</div>

<div class="card__actions">
  <a href="#" class="card__action" onclick="copyToClipboard(event, this)" aria-label="Copy">
    <span class="material-symbols-outlined">content_copy</span>
  </a>

  <a href="mkdictionaries:///?text={{text:語彙}}" class="card__action" onclick="handleLinkClick(event, this)" aria-label="Dictionary">
    <span class="material-symbols-outlined">book_3</span>
  </a>

  <a href="https://www.google.com/search?q={{text:語彙}}+語呂合わせ" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Mnemonic search">
    <span class="material-symbols-outlined">explore</span>
  </a>

  <a href="https://www.etymonline.com/search?q={{text:語彙}}" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Etymonline">
    <span class="material-symbols-outlined">history_edu</span>
  </a>
</div>

<script>
function copyToClipboard(e, link) {
  e.preventDefault();
  const target = document.getElementById("copyTarget");
  const text = (target ? target.innerText : "").trim();
  const temp = document.createElement("textarea");
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);
  changeIconOnClick(link, "check");
}

function changeIconOnClick(link, newIcon) {
  const icon = link.querySelector(".material-symbols-outlined");
  const originalIcon = icon.innerText;
  icon.innerText = newIcon;
  setTimeout(() => icon.innerText = originalIcon, 1000);
}

function handleLinkClick(event, link) {
  changeIconOnClick(link, "open_in_new");
}
</script>

裏面

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="card__index">{{番号}}</div>

<div class="card__header">
  <div class="card__term">
    <span id="copyTarget" class="card__term-text">{{語彙}}</span>
  </div>
</div>

{{#品詞}}
  <div class="card__pos">
    <span class="card__pos-tag">{{品詞}}</span>
    {{#品詞2}}
      <span class="card__pos-tag">{{品詞2}}</span>
    {{/品詞2}}
  </div>
{{/品詞}}

<div class="card__meaning">
  <div class="card__meaning-header">
    <span class="card__meaning-text">{{意味}}</span>
  </div>

  {{#例文}}
    <div class="card__example-text">{{例文}}</div>
    <span style="display:none;">{{tts en_US voices=Apple_Samantha speed=1.0:例文}}</span>
  {{/例文}}

  {{#訳}}
    <div class="card__translation">{{訳}}</div>
  {{/訳}}
</div>

{{#補足}}
  <div class="card__note">
    <div>{{補足}}</div>
  </div>
{{/補足}}

<div class="card__actions">
  <a href="#" class="card__action" onclick="copyToClipboard(event, this)" aria-label="Copy">
    <span class="material-symbols-outlined">content_copy</span>
  </a>

  <a href="mkdictionaries:///?text={{text:語彙}}" class="card__action" onclick="handleLinkClick(event, this)" aria-label="Dictionary">
    <span class="material-symbols-outlined">book_3</span>
  </a>

  <a href="https://www.google.com/search?q={{text:語彙}}+語呂合わせ" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Mnemonic search">
    <span class="material-symbols-outlined">explore</span>
  </a>

  <a href="https://www.etymonline.com/search?q={{text:語彙}}" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Etymonline">
    <span class="material-symbols-outlined">history_edu</span>
  </a>
</div>

<script>
function copyToClipboard(e, link) {
  e.preventDefault();
  const target = document.getElementById("copyTarget");
  const text = (target ? target.innerText : "").trim();
  const temp = document.createElement("textarea");
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);
  changeIconOnClick(link, "check");
}

function changeIconOnClick(link, newIcon) {
  const icon = link.querySelector(".material-symbols-outlined");
  const originalIcon = icon.innerText;
  icon.innerText = newIcon;
  setTimeout(() => icon.innerText = originalIcon, 1000);
}

function handleLinkClick(event, link) {
  changeIconOnClick(link, "open_in_new");
}
</script>

スタイル

.card {
  font-family: arial;
  font-size: 20px;
  text-align: left;
  position: relative;
  padding-bottom: 64px;
}

.card__index {
  color: gray;
  font-size: 14px;
}
.nightMode .card__index { color: silver; }

.card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card__term {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.card__term-text {
  font-size: 26px;
}

.card__pos {
  margin-top: 10px;
}

.card__pos-tag {
  font-size: 16px;
  border: 1px solid;
  border-radius: 3px;
  padding: 2px 2px;
}

.card__examples {
  margin-top: 20px;
}

.card__example {
  margin-bottom: 20px;
  position: relative;
}

.card__meaning {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

.card__meaning-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.card__meaning-text {
  font-size: 18px;
}

.card__example-text {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.3em;
  font-size: 17px;
}

.card__example-text::before {
  content: "▸";
  position: absolute;
  left: 0em;
}

.card__translation {
  padding-left: 1em;
  font-size: 17px;
}

.card__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 15px;
  color: black;
  position: relative;
  padding-left: 1.6em;
}
.nightMode .card__note { color: white; }

.card__note::before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
  color: gray;
  content: "info";
}
.nightMode .card__note::before { color: silver; }

.card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.card__actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.card__actions .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
  color: currentColor;
}

手動追加用

プレビュー

フィールド

フィールド名	説明
語彙	見出し語
品詞	主たる品詞
意味	意味・定義
例文	使用例
訳	例文の和訳
補足	メモ、語源、コロケーションなど

テンプレート

表面

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="card__header">
  <div class="card__term">
    <span id="copyTarget" class="card__term-text">{{語彙}}</span>
  </div>
  <span class="card__tts" style="display:none;">
    {{tts en_US voices=Apple_Samantha speed=1.0:語彙}}
  </span>
</div>

{{#品詞}}
  <div class="card__pos">
    <span class="card__pos-tag">{{品詞}}</span>
  </div>
{{/品詞}}

<div class="card__examples">
  {{#例文}}
    <div class="card__example">
      <div class="card__example-text">{{例文}}</div>
    </div>
  {{/例文}}
</div>

<div class="card__actions">
  <a href="#" class="card__action" onclick="copyToClipboard(event, this)" aria-label="Copy">
    <span class="material-symbols-outlined">content_copy</span>
  </a>

  <a href="mkdictionaries:///?text={{text:語彙}}" class="card__action" onclick="handleLinkClick(event, this)" aria-label="Dictionary">
    <span class="material-symbols-outlined">book_3</span>
  </a>

  <a href="https://www.google.com/search?q={{text:語彙}}+語呂合わせ" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Mnemonic search">
    <span class="material-symbols-outlined">explore</span>
  </a>

  <a href="https://www.etymonline.com/search?q={{text:語彙}}" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Etymonline">
    <span class="material-symbols-outlined">history_edu</span>
  </a>
</div>

<script>
function copyToClipboard(e, link) {
  e.preventDefault();
  const target = document.getElementById("copyTarget");
  const text = (target ? target.innerText : "").trim();
  const temp = document.createElement("textarea");
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);
  changeIconOnClick(link, "check");
}

function changeIconOnClick(link, newIcon) {
  const icon = link.querySelector(".material-symbols-outlined");
  const originalIcon = icon.innerText;
  icon.innerText = newIcon;
  setTimeout(() => icon.innerText = originalIcon, 1000);
}

function handleLinkClick(event, link) {
  changeIconOnClick(link, "open_in_new");
}
</script>

裏面

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<div class="card__header">
  <div class="card__term">
    <span id="copyTarget" class="card__term-text">{{語彙}}</span>
  </div>
</div>

{{#品詞}}
  <div class="card__pos">
    <span class="card__pos-tag">{{品詞}}</span>
  </div>
{{/品詞}}

<div class="card__meaning">
  <div class="card__meaning-header">
    <span class="card__meaning-text">{{意味}}</span>
  </div>

  {{#例文}}
    <div class="card__example-text">{{例文}}</div>
    <span style="display:none;">{{tts en_US voices=Apple_Samantha speed=1.0:例文}}</span>
  {{/例文}}

  {{#訳}}
    <div class="card__translation">{{訳}}</div>
  {{/訳}}
</div>

{{#補足}}
  <div class="card__note">
    <div>{{補足}}</div>
  </div>
{{/補足}}

<div class="card__actions">
  <a href="#" class="card__action" onclick="copyToClipboard(event, this)" aria-label="Copy">
    <span class="material-symbols-outlined">content_copy</span>
  </a>

  <a href="mkdictionaries:///?text={{text:語彙}}" class="card__action" onclick="handleLinkClick(event, this)" aria-label="Dictionary">
    <span class="material-symbols-outlined">book_3</span>
  </a>

  <a href="https://www.google.com/search?q={{text:語彙}}+語呂合わせ" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Mnemonic search">
    <span class="material-symbols-outlined">explore</span>
  </a>

  <a href="https://www.etymonline.com/search?q={{text:語彙}}" class="card__action" target="_blank" rel="noopener noreferrer" onclick="handleLinkClick(event, this)" aria-label="Etymonline">
    <span class="material-symbols-outlined">history_edu</span>
  </a>
</div>

<script>
function copyToClipboard(e, link) {
  e.preventDefault();
  const target = document.getElementById("copyTarget");
  const text = (target ? target.innerText : "").trim();
  const temp = document.createElement("textarea");
  temp.value = text;
  document.body.appendChild(temp);
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);
  changeIconOnClick(link, "check");
}

function changeIconOnClick(link, newIcon) {
  const icon = link.querySelector(".material-symbols-outlined");
  const originalIcon = icon.innerText;
  icon.innerText = newIcon;
  setTimeout(() => icon.innerText = originalIcon, 1000);
}

function handleLinkClick(event, link) {
  changeIconOnClick(link, "open_in_new");
}
</script>

スタイル

.card {
  font-family: arial;
  font-size: 20px;
  text-align: left;
  position: relative;
  padding-bottom: 64px;
}

.card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card__term {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.card__term-text {
  font-size: 26px;
}

.card__pos {
  margin-top: 10px;
}

.card__pos-tag {
  font-size: 16px;
  border: 1px solid;
  border-radius: 3px;
  padding: 2px 2px;
}

.card__examples {
  margin-top: 20px;
}

.card__example {
  margin-bottom: 20px;
  position: relative;
}

.card__meaning {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

.card__meaning-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.card__meaning-text {
  font-size: 18px;
}

.card__example-text {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.3em;
  font-size: 17px;
}

.card__example-text::before {
  content: "▸";
  position: absolute;
  left: 0em;
}

.card__translation {
  padding-left: 1em;
  font-size: 17px;
}

.card__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 15px;
  color: black;
  position: relative;
  padding-left: 1.6em;
}
.nightMode .card__note { color: white; }

.card__note::before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
  color: gray;
  content: "info";
}
.nightMode .card__note::before { color: silver; }

.card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.card__actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.card__actions .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
  color: currentColor;
}

ボタンの使い方

カードの下部には3つのボタンがあり、それぞれ次のように利用できる。

アイコン	操作	説明
content_copy	コピー	表示中の単語をクリップボードにコピーする。ノートアプリや他のツールに貼り付けたいときに使う。
book_3	辞書で調べる	iOSの「物書堂」辞書アプリを開いて、該当の単語を検索する。アプリをインストールしていれば自動的に起動する。
explore	Googleで検索	「単語 + 語呂合わせ」でGoogle検索を行う。語呂や覚え方を調べたいときに便利。

コピーや検索を行うと、アイコンが一時的に変化して操作が反映されたことを知らせるようになっている。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up