AnkiのHTML/CSSで動的な強調表示とライト/ダークモード切り替えボタンを実装したい
課題
Anki という学習アプリで動的な UIデザインを実装したい
概要
AnkiのHTML/CSSカスタマイズ機能を使って、動的なスタイル変更を実装したいのですが、うまくいかず困っています。実装したい機能は以下の2点です。
① 品詞ごとのニューモーフィズム表現の切り替え
「動詞・名詞・形容詞・副詞」など複数の品詞が同時に表示される可能性のあるフィールドに対し、「動詞」が含まれるときのみ、その文字背景がハイライトされるようにしたいです。全ての品詞は常時表示されています。テキストデータは"動詞"のように一つの場合と、”動詞/形容詞”のように斜線で区切られて複数存在する場合があります。斜線がある場合はテキストを分解する工程を踏む予定です。
② ライトモードとダークモードの切り替え機能
ボタン自体の実装はできたのですが、モード切り替え時に背景やシャドウの色などが切り替わらず、スタイルの適用に苦戦しています。CSSのみで実現できる方法、または必要であればJSとの連携も視野に入れています。Anki 本体の設定でモード切り替えできるのは承知の上で実装したい機能です。
以下に現在のHTMLとCSSのコードを貼り付けています。この実装の方向性で、うまく実現するにはどうすれば良いか、ご助言いただけると助かります。
編集しているコード（ HTML ）
<!-- 表面と裏面まとめて -->
<div class="card-container">
<div class="part-of-speech">
<span class="pos" data-pos="動詞">動詞</span>
<span class="pos" data-pos="名詞">名詞</span>
<span class="pos" data-pos="形容詞">形容詞</span>
<span class="pos" data-pos="副詞">副詞</span>
</div>
<!-- モード切替ボタン（右下、ニューモーフィズム囲い） -->
<div class="part-of-speech">
<label class="mode-toggle">
<input type="checkbox" id="modeToggle" hidden>
<div class="mode-toggle-track">
<div class="mode-toggle-thumb"></div>
</div>
</label>
</div>
</div>
<script>
const posElements = document.querySelectorAll('.pos');
posElements.forEach(el => {
const value = el.dataset.pos;
if (value.includes('動詞')) {
el.classList.add('active');
}
});
</script>
<script>
const toggle = document.getElementById('modeToggle');
toggle.addEventListener('change', function () {
document.body.classList.toggle('light-mode', toggle.checked);
});
</script>
編集しているコード（ 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;
}
/* ===== モード切替ボタン（新構成） ===== */
.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/6f/6d/c7/6f6dc70a3114dfc5796c1d0b270938dc.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 1px 1px 3px #111111, inset -1px -1px 3px #111111;
transition: all 0.4s ease;
}
.mode-toggle-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background-image: url('https://i.pinimg.com/736x/a4/47/d8/a447d8e871c6a94e1e2bf17dc6cef8a5.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/5e/b8/c8/5eb8c8a3c1fef76c4c88a92c30122616.jpg');
box-shadow: inset 1px 1px 3px #CCCCCC, inset -1px -1px 3px #CCCCCC;
}
#modeToggle:checked + .mode-toggle-track .mode-toggle-thumb {
background-image: url('https://i.pinimg.com/736x/83/ac/76/83ac76eabfee934e1f764805930ac786.jpg');
transform: translateX(18px);
}
/* デフォルト：ダークモード */
body {
background-color: #2B2A2B;
color: #f8f8ff;
}
.card-container {
background: #2B2A2B;
box-shadow: 4px 4px 8px #1A191A, -4px -4px 8px #3C3B3C;
}
.part-of-speech {
background: #2B2A2B;
box-shadow: inset 4px 4px 8px #1A191A, inset -4px -4px 8px #3C3B3C;
}
/* ライトモード時のスタイル */
body.light-mode {
background-color: #DFE8F3;
color: #2B2A2B;
}
body.light-mode .card-container {
background: #DFE8F3;
box-shadow: 4px 4px 8px #B0C4DE, -4px -4px 8px #ffffff;
}
body.light-mode .part-of-speech {
background: #DFE8F3;
box-shadow: inset 4px 4px 8px #B0C4DE, inset -4px -4px 8px #ffffff;
}
自分で試したこと
● GPT-4.5で編集したが、動的な機能を実装しきれなかった
● JSを"collection.media"からダウンロードする方法も試しましたが、知識不足で再現できませんでした（下記参考）。
https://qiita.com/yaju/items/ba70f2ec294c50fca9d3
0 likes
