1行の単語は中央揃え、2行を超える文章は左揃え——基準はこれだけです。Ankiの既定のテンプレートはカード全体を中央揃えにしているため、例文や説明が長くなった瞬間に行ごとの書き出し位置がずれて読みにくくなります。ankieditorでは変えたい部分をクリックして、「文字の書式」の行揃えで[左]を押すだけです。
なぜAnkiの既定のテンプレートは中央揃えなのか
Ankiが最初から用意しているノートタイプ（Basic、Basic (type in the answer)、Cloze）は、スタイルに.card { text-align: center; }が設定されています。単語1つと意味1行という、最もシンプルなカードを基準に設定された値です。短い内容は画面の真ん中にあるほうが目を集めやすいので、理にかなった既定値です。
問題は、そのルールがカード全体にかかることです。あとから例文・発音・解説を足しても、行揃えは中央のまま残ります。カードの情報量が増えても、既定の設定はそのままというわけです。
いつ左揃えに変えるべきか
基準は単純です。1行なら中央揃え、2行を超えるなら左揃えがおすすめです。
- 単語や意味のような1行 — 中央。カードの真ん中に大きく置くほうが向いています。
- 例文や説明が2行以上 — 左。この記事が扱うのはこの場合です。
- 箇条書きや番号付きの内容 — 左。中央に置くと行ごとに行頭記号の位置がずれます。
- コードや数式 — 左。字下げが意味を持つ内容は中央揃えと相性がよくありません。
理由は目の動き方にあります。中央揃えは行ごとに書き出しの位置が変わるので、1行を読み終えた目が次の行の始まりを毎回探し直すことになります。カード1枚ではごく小さな損ですが、1日に数百枚めくれば積み重なります。左揃えならすべての行が同じ位置から始まるため、次の行へ視線をスムーズに移せます。
ankieditorで左揃えに変える方法
- プレビューで変えたい部分をクリックして選びます。何もない場所をクリックするとカード全体が対象になります。
- 左パネル「文字の書式」の行揃えで[左]を押します。
- 例文フィールドだけ変えたい場合は、そのフィールドをクリックして選んでから同じボタンを押します。カード全体は中央のままにして例文だけ左にする組み合わせは、実際によく使われます。
- [コードをコピー]で修正したコードをコピーし、Ankiの
ツール → ノートタイプを管理 → カード...（Tools → Manage Note Types → Cards...）画面に貼り付けます。
実際に作られるCSS
カード全体を変えると、スタイル欄の.cardルールが変わります。
.card { text-align: left; }
特定のフィールドだけ変えると、ankieditorがフィールド名を使ったクラスを生成し、そこにルールを書き込みます。例文フィールドを左に変えると、こういう形になります。
.card { text-align: center; }
.例文 { text-align: left; }
2つのルールは別々の要素を指しているので衝突しません。.cardの中央揃えは中のすべてに継承されますが、例文フィールドには.例文のルールが直接かかっているため、継承された値ではなくそちらが使われます。Ankiデスクトップ・AnkiDroid・AnkiMobileはいずれもWebView系の仕組みでカードを表示するため、このCSSは基本的に各環境で適用されます。
注意点
text-alignは子要素に継承されます。.cardに左を指定すると、その中のすべてのフィールドも一緒に左になります。単語だけ中央のままにしたい場合は、そのフィールドを選んで[中央]を指定し直してください。
両端揃え（justify）はおすすめしません。カードの幅が狭く1行に入る単語数が少ないため、単語のあいだの間隔が行ごとにばらついて、中央揃えよりかえって読みにくくなります。
ノートタイプごとに別々に決める必要があります。カードのテンプレートはノートタイプごとに管理されるため、複数のノートタイプを使っているなら、それぞれに適用してください。
よくある質問
Ankiでカード全体を左揃えに変えても大丈夫ですか？
大丈夫です。スタイルの.cardでtext-alignをleftに変えるだけです。AnkiはカードをWebViewで表示するため通常のCSSがそのまま適用され、Anki側に特別な制限はありません。
特定のフィールドだけ左揃えにできますか？
できます。ankieditorでそのフィールドをクリックして選んでから[左]を押すと、フィールド名を使ったクラスにルールが記録されます。カード全体は中央のままにして例文だけ左にするなど、このように組み合わせることもできます。
左揃えにしたのに一部の行だけ中央のままです。
その部分に別の行揃えが指定されている場合です。該当する要素をクリックして選び、[左]をもう一度押してください。ankieditorは適用しようとする属性と衝突するインラインスタイルを消してルールに記録するので、もう一度押すだけで修正できます。
文字サイズで優先順位を作る方法はAnkiで文字サイズを変える方法に、段落が窮屈に見えるときに行間を調節する方法はAnkiで行間を変える方法にまとめてあります。