AnkiのHTML/CSSで動的な強調表示とライト/ダークモード切り替えボタンを実装したい
課題
Anki という学習アプリで動的な UIデザインを実装したい
概要
AnkiのHTML/CSSカスタマイズ機能を使って、動的なスタイル変更を実装したいのですが、うまくいかず困っています。実装したい機能は以下の2点です。
① 品詞ごとのニューモーフィズム表現の切り替え
「動詞・名詞・形容詞・副詞」など複数の品詞が同時に表示される可能性のあるフィールドに対し、「動詞」が含まれるときのみ、その文字背景がハイライトされるようにしたいです。全ての品詞は常時表示されています。テキストデータは"動詞"のように一つの場合と、”動詞/形容詞”のように斜線で区切られて複数存在する場合があります。斜線がある場合はテキストを分解する工程を踏む予定です。
② ライトモードとダークモードの切り替え機能
ボタン自体の実装はできたのですが、モード切り替え時に背景やシャドウの色などが切り替わらず、スタイルの適用に苦戦しています。CSSのみで実現できる方法、または必要であればJSとの連携も視野に入れています。Anki 本体の設定でモード切り替えできるのは承知の上で実装したい機能です。
以下に現在のHTMLとCSSのコードを貼り付けています。この実装の方向性で、うまく実現するにはどうすれば良いか、ご助言いただけると助かります。
編集しているコード（ HTML ）
<!-- 表面と裏面まとめて -->
<div class="card-container">
<!-- 表面 -->
<div class="part-of-speech">
<div class="pos active">{{Field｜03｜Part of speech}}</div>
</div>
<h1 class="word">{{Field｜02｜English word}}</h1>
<h2 class="text-block gray-text light-text">{{Field｜04｜Example sentence}}</h2>
<!-- 音声フィールド（視覚的には非表示） -->
<div class="visually-hidden">{{Field｜02-voice｜English word}}</div>
<div class="visually-hidden">{{Field｜04-voice｜Example sentence}}</div>
<!-- 画像 -->
<div class="example-image">
{{Field｜05｜Example sentence image}}
</div>
<!-- 裏面 -->
<div class="word bold-text">{{Field｜06｜Japanese word}}</div>
<div class="text-block gray-text light-text">{{Field｜07｜Translation of example sentece}}</div>
</div>
編集しているコード（ CSS ）
html {
font-size: 16px;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background-color: #2B2A2B;
color: #f8f8ff;
font-family: Arial, sans-serif;
margin: 0;
padding: 16px;
text-align: center;
}
/* --- カード全体 --- */
.card-container {
margin: 0 auto;
padding: 12px;
border-radius: 10px;
background: #2B2A2B;
box-shadow: 4px 4px 8px #1A191A, -4px -4px 8px #3C3B3C;
text-align: center;
position: relative;
max-width: 600px;
width: 95vw;
}
/* --- 品詞部分 --- */
.part-of-speech {
display: flex;
justify-content: center;
align-items: stretch;
margin-bottom: 1rem;
padding: 10px;
border-radius: 15px;
background: #2B2A2B;
box-shadow: inset 4px 4px 8px #1A191A, inset -4px -4px 8px #3C3B3C;
text-align: center;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.part-of-speech .pos {
flex: 1;
padding: 0px; /* ← 統一パディングに変更 */
font-size: 13px;
color: #E0E0E0;
background-color: transparent;
border-left: 1px solid #444;
transition: background-color 0.3s ease;
}
.part-of-speech .pos:first-child {
border-left: none;
}
.part-of-speech .pos.active {
background-color: #FF5D97;
color: #ffffff;
border-radius: 5px;
}
/* --- 単語表示 --- */
.word {
font-size: 20px;
margin-bottom: 1rem;
color: #f8f8ff;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1);
}
/* --- テキスト全般 --- */
.text-block {
font-size: 13px;
margin: 1rem auto;
padding: 8px;
border-radius: 10px;
background: #2B2A2B;
box-shadow: inset 4px 4px 8px #1A191A, inset -4px -4px 8px #3C3B3C;
line-height: 1.6;
max-width: 95%;
}
.gray-text {
color: #bbbbbb;
}
.light-text {
font-weight: 300;
}
.bold-text {
font-weight: bold;
}
/* --- 音声（非表示） --- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --- 画像表示 --- */
.example-image {
position: relative;
width: 95%;
margin: 1rem auto;
border-radius: 10px;
background: #2B2A2B;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.example-image img {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.05);
}
.example-image::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
box-shadow: inset 3px 3px 6px #1A191A, inset -3px -3px 6px #222222;
pointer-events: none;
z-index: 1;
}
/* ===== モード切替ボタン（新構成） ===== */
.mode-toggle-container {
position: absolute;
bottom: 12px;
right: 12px;
padding: 6px;
border-radius: 999px;
background: #2B2A2B;
box-shadow: 6px 6px 12px #1A191A, -6px -6px 12px #3C3B3C;
z-index: 5;
}
.mode-toggle {
display: inline-block;
height: 32px;
width: 64px;
border-radius: 999px;
overflow: hidden;
}
.mode-toggle-track {
width: 100%;
height: 100%;
border-radius: 999px;
background-color: #2B2A2B;
background-image: url('https://i.pinimg.com/736x/5e/b8/c8/5eb8c8a3c1fef76c4c88a92c30122616.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 3px #CCCCCC, inset -1px -1px 3px #CCCCCC;
transition: all 0.4s ease;
}
.mode-toggle-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background-image: url('https://i.pinimg.com/736x/83/ac/76/83ac76eabfee934e1f764805930ac786.jpg');
background-size: cover;
background-position: center;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transform: translateX(-18px);
transition: all 0.4s ease;
flex-shrink: 0;
}
#modeToggle:checked + .mode-toggle-track {
background-color: #DFE8F3;
background-image: url('https://i.pinimg.com/736x/6f/6d/c7/6f6dc70a3114dfc5796c1d0b270938dc.jpg');
box-shadow: inset 1px 1px 3px #111111, inset -1px -1px 3px #111111;
}
#modeToggle:checked + .mode-toggle-track .mode-toggle-thumb {
background-image: url('https://i.pinimg.com/736x/a4/47/d8/a447d8e871c6a94e1e2bf17dc6cef8a5.jpg');
transform: translateX(18px);
}
/* === 基本設定（ダークモードベース） === */
body {
background-color: #2B2A2B !important;
color: #f8f8ff;
font-family: Arial, sans-serif;
margin: 0;
padding: 16px;
text-align: center;
}
.card-container,
.text-block,
.part-of-speech,
.example-image,
.mode-toggle-container,
.mode-toggle-track {
background-color: #2B2A2B !important;
}
自分で試したこと
● GPT-4.5で編集したが、動的な機能を実装しきれなかった
● JSを"collection.media"からダウンロードする方法も試しましたが、知識不足で再現できませんでした（下記参考）。
https://qiita.com/yaju/items/ba70f2ec294c50fca9d3
0 likes
