モニターでカードが画面いっぱいに広がって読みにくいときは、最大幅を500px前後にすると直ります。Ankiの既定のテンプレートには幅を制限する規則がそもそもなく、ウィンドウを広げるほど1行がその分長くなります。ankieditorでカードの何もない場所をクリックして「カード全体」を選ぶと現れる「カードの最大幅（空欄なら制限なし）」の欄に数字を入れれば設定できます。
なぜAnkiのカードは画面いっぱいに広がるのか
Ankiが標準で用意しているノートタイプ（Basic、Basic (type in the answer)、Cloze）のスタイルにはmax-widthがありません。幅を制限する規則がないので、カードの内容はウィンドウが許す限り横に伸びます。
スマートフォンでは画面が狭いので問題になりません。問題はデスクトップです。24インチのモニターを全画面で使うと1行に100文字を超える文字が入ることがあり、1行を読み終えた目が次の行の始まりを見つけにくくなります。左揃えに変えても、行自体が長ければ同じ問題が残ります。
幅はどのくらいにすればよいか
最初の値として500pxをおすすめします。編集ツールの入力欄のプレースホルダーも同じ値です。
- 400px — 単語と短い意味が中心のカード。狭くまとまることで目が散らばりません。
- 500px — 例文や2〜3行の説明があるふつうのカード。ほとんどの場合ここから始めればよいです。
- 600px — 長い説明文・表・コードが入るカード。これより広げると行がまた長くなります。
これらの数値は測定された最適値ではなく、あくまで推奨する目安なので、文字サイズを20pxより大きくすると同じ幅でも1行に入る文字数が減ります。プレビューを見ながら1行が読みやすく感じる幅を探すほうが確実です。
ankieditorでカードの幅を変える方法
- プレビューの何もない場所をクリックします。左上の選択表示が「カード全体」に変わります。
- 左パネルの「カード」にあるカードの最大幅（空欄なら制限なし）の欄に数字を入力します。200から1200まで10刻みで設定できます。
- プレビューがすぐに狭くなります。値を変えながら、1行が読みやすく感じる幅を探します。
- [コードをコピー]で修正後のコードをコピーし、Ankiの
ツール → ノートタイプを管理 → カード...（Tools → Manage Note Types → Cards...）の画面に貼り付けます。
幅を変えるとCSSに何が書き込まれるか
この欄は値ひとつだけでなく、3行まとめて書き込みます。
.card { max-width: 500px; margin: 0 auto; padding: 0 10px; }
max-width— カードが広がれる上限です。margin: 0 auto— 残った余白を左右に均等に振り分けて、カードを中央に寄せます。これがないと幅だけ狭くなり、内容は左に寄ったままになります。padding: 0 10px— 画面がその幅より狭いとき、文字が端に触れないようにします。テンプレートにすでにpaddingがある場合は変更しません。
幅を変える前に知っておきたいこと
欄を空にすると消えるのはmax-widthだけです。margin: 0 autoとpadding: 0 10pxはテンプレートに残ります。幅の制限がなければどちらも見た目には影響しませんが、コードには残るので、完全に元に戻すには[コードを表示]で自分で消す必要があります。
スマートフォンではほとんど変化がありません。スマートフォンの画面幅はもともと500px前後なので、max-widthに引っかかることはまれです。この設定は主にデスクトップとタブレットで効果があります。
テンプレートですでにmarginを直接指定している場合は上書きされます。カードに独自の余白を設定していた場合、その値が0 autoに変わります。[コードを表示]で確認してください。
ノートタイプごとに設定が必要です。テンプレートはノートタイプに属するカードタイプに保存されるので、複数のノートタイプを使っているならそれぞれに適用する必要があります。
よくある質問
Ankiでカードの幅を狭くできますか？
できます。スタイルの.cardにmax-widthを追加し、marginを0 autoに設定すると、カードがその幅の中で中央に寄ります。Ankiはカードをウェブビューで描画するため、通常のCSSがそのまま適用されます。
カードの幅は何pxくらいが適切ですか？
500px前後から始めてみてください。単語中心のカードなら400pxまで狭め、長い説明文なら600pxまで広げてもかまいません。測定された最適値ではなく、あくまで推奨する目安なので、プレビューを見ながら1行が読みやすく感じる幅を探すほうが確実です。
幅を狭くしたら、カードが左に寄ってしまいます。
margin: 0 autoが抜けている場合です。max-widthだけがあると、幅は狭くなっても位置は左のままになります。ankieditorのカードの最大幅の欄を使うとmax-widthとmarginがまとめて書き込まれるので、この問題は起きません。
行が長くて目が滑ってしまうなら、Ankiで文字を左揃えにする方法とAnkiで行間を変える方法もあわせてご覧ください。