Ankiカードをゲーミング仕様にして気持ちよくなろう

はじめまして！Anki、使ってますか。

この記事にたどり着いたということは、使っているということでしょう。
デフォルトのデザインはよく言えばシンプル、悪く言えば単調です。僕達ドーパミン中毒のガキとしては情報量を増やしていきたいわけですから、是非そうしていきましょう。

こんな感じになります。
ドーパミン中毒のガキ向けなのでアニメーション付きです。笑

方法

方法は簡単です。
1.Anki(PC版)を開く
2.「ツール」＞「ノートタイプを管理」＞使用しているノートタイプを選択して「カード」をクリックします。表示された3つのボックスに、以下のコードをコピペ
3.おめでとう

これは表面に問題、裏面に答えというスタイルのカードの場合にのみ使えます（一番単調なデフォルトのもののこと）

「表面のテンプレート」

<div class="pro-wrapper">
  <div class="pro-front">
    {{表面}}
  </div>
</div>

「裏面のテンプレート」

<div class="pro-wrapper">
  <div class="pro-front text-muted">
    {{表面}}
  </div>
  
  <div class="pro-divider"></div>
  
  <div class="pro-back fade-in">
    {{裏面}}
  </div>
</div>

「スタイル」

/* =====================================
   Base Settings
   ===================================== */
.card {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f9fafb;
  color: #111827;
  font-size: 16px;
  margin: 0;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================
   Pro Wrapper (Main Card)
   ===================================== */
.pro-wrapper {
  background: #ffffff;
  max-width: 640px;
  width: 100%;
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    0 20px 25px -5px rgba(0, 0, 0, 0.02);
  border: 1px solid #e5e7eb;
  text-align: left;
  position: relative;
  margin: 20px auto;
  overflow: hidden;
  box-sizing: border-box;
}

/* 上部のグラデーションアクセントライン */
.pro-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}

/* =====================================
   Typography & Elements
   ===================================== */
/* 表面（問題） */
.pro-front {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  color: #1f2937;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

/* 裏面表示時の表面（フォーカスを外す） */
.pro-front.text-muted {
  color: #9ca3af;
  font-size: 20px;
  font-weight: 500;
}

/* 区切り線 */
.pro-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 32px 0;
  width: 100%;
}

/* 裏面（解答） */
.pro-back {
  font-size: 26px;
  font-weight: 700;
  color: #2563eb; /* 知的で力強いブルー */
  line-height: 1.7;
  letter-spacing: -0.01em;
}

/* =====================================
   Animations
   ===================================== */
.fade-in {
  opacity: 0;
  animation: slideFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideFadeIn {
  0% { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* =====================================
   🌙 Night Mode (Ultra Premium Dark)
   ===================================== */
.nightMode .card {
  background-color: #0d0d0d; /* より深い漆黒 */
  color: #ededed;
}

.nightMode .pro-wrapper {
  background: #141414;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  border: 1px solid #27272a;
}

.nightMode .pro-wrapper::before {
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
}

.nightMode .pro-front {
  color: #f3f4f6;
}

.nightMode .pro-front.text-muted {
  color: #52525b;
}

.nightMode .pro-divider {
  background: #27272a;
}

.nightMode .pro-back {
  color: #60a5fa;
  /* ダークモード特有のわずかな発光効果 */
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.25); 
}

良い暗記ライフをお送りください