先に結論をいうと、区切り線の太さを3〜5pxに上げて色を付ければ、内容の長いカードでも表面と裏面が一目で分かれます。Ankiの既定の区切り線は 1pxの薄いグレーなので、文章が数行を超えるだけで段落の切れ目に紛れてしまいます。太さを上げるだけで、「ここからが答え」という合図がはっきりします。
なぜ既定の区切り線は長いカードで効かなくなるのか
カードの裏面はふつう、表面の内容（{{FrontSide}}）の下に答えが続く構造になっています。表面が1行だけの単語カードなら、1pxの線でも十分です。目が画面全体を一度に見渡せるからです。
問題は記述式のカードです。表面に2〜3文の質問が入り、裏面に説明が数行付くと、画面に段落がいくつも積み重なります。こうなると1pxのグレーの線は、ただの段落と段落のあいだの余白にしか見えません。その結果、復習のたびに「どこまでが質問だったかな」と上に戻って読み直すことになり、この読み直しがカード1枚あたり1〜2秒ずつ積み重なって、数百枚の復習ではかなりの疲れになります。
太い線なら、余白とはっきり区別できる合図になります。ここがいちばん大事なところです。色まで付けば、カードをめくった直後に、目が自然と線の下から読み始めます。
太さは何pxくらいがちょうどよいか
カードの内容の長さに合わせて決めれば大丈夫です。実際に使ってみると、だいたい次のあたりが無難です。
- 1〜2px — 単語や用語のカードのように、表も裏も1行ずつの場合。既定に近く、控えめです。
- 3px — 表面か裏面が2〜3行になる、たいていのカード。いちばん無難な基準です。
- 4〜6px — 表面に問題文があったり、裏面に解説が付いたりする記述式のカード。段落がいくつもあるときに、しっかり分けてくれます。
- 7px以上 — 線というより色の帯に近くなります。カードをめくるたびに視線を持っていかれるので、おすすめしません。
太くするほど線は重くなるので、線の幅を60〜80%に縮める組み合わせがきれいに見えます。太くても画面を端まで横切らないので、窮屈になりません。
区切り線がまだない場合はまず作る
ここまでは区切り線がすでにある前提で説明してきました。ですが実際にテンプレートを自分で作っていると、足りていないのはたいてい区切り線そのものです — 細すぎるのではなく、そもそも存在しないのです。カードの裏面はふつう、表面の内容（{{FrontSide}}）の下に答えが続く構造で、Ankiの既定のテンプレートにはその間に線が入っていますが、自分で作ったテンプレートには最初から付いてきません。線がないと質問と答えがひと塊に見えてしまい、カードをめくるたびに答えがどこから始まるのか目で探すことになります。線が一本あるだけで「線の下＝答え」というルールができ、その探す動作がなくなります。何百枚もめくる復習では、この小さな差が積み重なって疲労を防いでくれます。
作り方は次の通りです。プレビューの上で裏面を選び、区切り線を入れたい場所のすぐ上の要素（ふつうは質問の部分）をクリックして選んでから、「要素の追加」の[➕ 区切り線]を押すと、その下に線ができます。何も選ばずに押すと、いちばん下に追加されます。位置が気に入らなければ[↑ 上へ]／[↓ 下へ]で動かせますし、[🗑 削除]で消すこともできます。
作ったばかりの区切り線は線の幅が100%で、横いっぱいに引かれています。長すぎると感じたら60〜80%に縮めてみてください。線が見やすくなりつつ、境目としての役割はそのままです。次はここまで見てきた太さと色です。
ankieditorでの設定方法
- プレビューの上で裏面を選びます。
- プレビューにある区切り線をクリックします。区切り線がなければ、答えのすぐ上の要素を選んでから「要素の追加」の [➕ 区切り線] を押します。
- 左のパネルに現れる線の太さを3〜5pxに上げます。
- そのすぐ下の線の色から色を選びます。
- 必要なら線の幅を70%くらいに縮めます。
プレビューにすぐ反映されるので、実際に使っているカードくらいの長さのサンプル値を入れておいて調節すると、加減がつかみやすくなります。
実際に作られるCSS
ankieditorは、次のようなルールをカードテンプレートのスタイルの部分に書き込みます。 Ankiに直接貼り付けたい場合は、このコードをそのまま使ってもかまいません。
#answer { border: none; height: 4px; background-color: #2e86de; width: 70%; }
ここで border: none を欠かすことはできません。hr タグはブラウザーの既定のスタイルが立体的な枠線（inset）なので、枠線を消さずに色だけ指定すると、上下の明暗が違って、ぼやけた二重線に見えてしまいます。枠線をなくしたうえで height と background-color で塗って、はじめて指定した太さと色がそのまま出ます。Ankiデスクトップ・AnkiDroid・AnkiMobileはどれもカードをウェブビューで描くので、このCSSはどの環境でも同じように適用されます。
気をつけたいこと
夜間モードでも同じ色が使われます。Ankiの夜間モードは、使う人が指定した色を自動で反転しません。明るい背景だけを見てごく薄いグレーを選ぶと、暗い背景ではほとんど見えなくなります。昼と夜を行き来して使うなら、中間のトーン（たとえば青 #2e86de、グレー #888888）が安全です。
線が本文より目立つと逆効果です。区切り線は読む流れを助けるためのもので、強調のための要素ではありません。カードですでに強調色を使っているなら、区切り線はそれより一段落ち着いた色にしておくほうがよいでしょう。
ノートタイプごとに設定が必要です。テンプレートはノートタイプ単位で保存されるので、複数のノートタイプを使っているなら、それぞれに適用することになります。逆にこの性質を利用して、ノートタイプごとに区切り線の色を変えておけば、復習中に今どの種類のカードなのかも一緒に分かります。
よくある質問
Ankiで区切り線の色や太さを変えてもよいのですか？
問題ありません。Ankiはカードをウェブビューで描画するので、hr タグにふつうのCSSがそのまま効きます。Anki側に特別な制限はありません。
太さを上げたら線が消えてしまいました。
border: none だけを入れて背景色を指定しないと、透明な空白になってしまい、線が見えません。太さと色は必ずセットで指定してください。
ankieditorでは、どちらか一方を触るだけで両方の値が一緒に記録されます。
表面にも区切り線を入れられますか？
入れられます。ただし表面は質問だけが見えているほうがよいので、表面には区切り線ではなく余白を置くほうが集中しやすくなります。
カードが横に広がりすぎて読みにくいときは、Ankiでカードの幅を変える方法もあわせてどうぞ。