1

Ankiという試験勉強アプリを使用し、表示をカスタマイズしようしています。
漢字の問題なので、縦書き、右上揃えにして、数字を縦中横にしたいです。
※現在は左揃え、中央寄せ、数字が横書きになってしまっています。

どのように変更したら綺麗に表示できますでしょうか。
教えてください!

画像の説明をここに入力

アドバイスの通り、CSSをコピペしましたところ、このような表示になってしまいました。何を修正したらよいのでしょうか、初心者すぎてすみません。
画像の説明をここに入力
画像の説明をここに入力

oririさん早速ありがとうございます。
ご提案通りにやってみたのですが、左寄せかつ、空白になってしまいました。
何がいけないのでしょうか。何度もすみません。。
画像の説明をここに入力

お返事ありがとうございます。現在このような状況です。
画像の説明をここに入力
画像の説明をここに入力
画像の説明をここに入力

アプリの問題画面をプレビューをすると、あとは、右揃えのみです。
画像の説明をここに入力

ただ、CSSのwedthを100%にすると、すごく空間があいてしまうので、空欄%になってしまっております。

ひとつ前のものは「カードの表面が空白になっています」と表示され打ち込んだ問題がリンクされて表示されなかったため、表面、裏面は「フィールドを追加」から入れ込んでいます。

右揃えするには、どうしたらよいでしょうか。そもそもCSSがおかしいですよね?

9
  • 回答の「テンプレートの例」通りにテンプレートを用意してみては? style="font-family: arial; font-size: 20px;" のような指定はテンプレートでなく CSSがよいでしょう。スニペットを使えば質問や回答で再現も可能なはずです(テンプレート全体を <div class="card"></div>で括る必要があるけど)
    – oriri
    Commented 2月9日 13:32
  • ありがとうございます、やってみたのですが、表示がおかしいです、私の書き方がいけないのでしょうか、、涙
    – Aikosan
    Commented 2月9日 13:54
  • 上にアップしてみました、、何度も申し訳ございません。
    – Aikosan
    Commented 2月9日 14:24
  • 表面のテンプレートの末尾に</div>を追記しても右寄せになりませんか?
    – payaneco
    Commented 2月9日 23:06
  • ありがとうございます。仰っていただいた表面のテンプレートは実際には打ち込んだ問題がPCからリンクされず、カードの表面が空白になってしまったので、「フィールドを追加」から問題番号、解答など、入れ込みました。
    – Aikosan
    Commented 2月10日 9:01

1 件の回答 1

3

縦書きにしたい半角数字を<span></span>で囲んでください。
囲った箇所にのみtext-combine-uprightが適用されます。

縦書きの上寄せはtext-align: left;を、右寄せはwidth: 100%;を指定することで実現できます。

テンプレートの例

(問題番号)<br/>
(学習のポイント)<br/>
(問題<span>1</span>) ←&lt;<upright>span</upright>で囲った&gt;<br/>
(問題2) ←&lt;spanで囲ってない&gt;
<hr id=answer>

{{裏面}}

CSSの例

.card {
    font-family: arial;
    font-size: 20px;
    text-align: left;
    color: black;
    background-color: white;
}
div {
  writing-mode: vertical-rl;
  width: 100%;
}
span {
  text-combine-upright: all;
  <!-- vertical-align: top; -->
  display: inline-block;
}
upright {
  text-orientation: upright;
}

実行結果

実行結果のスクリーンショット

参考資料

4
  • payaneco様 早速のお返事どうもありがとうございます!
    – Aikosan
    Commented 2月9日 11:55
  • CSSをコピペさせていただいて、表面のデザインの変更を試そう(数字をspanで区切る)と思ったら、右上揃えになっているのですが、一つ目と二つ目の文字がかなり離れてしまって、三つ目の文字が表示されていない事態になっております。
    – Aikosan
    Commented 2月9日 11:59
  • ここに画像が添付できなさそうなのですが、学習のポイント1と問題1が離れすぎてしまい問題2が表示されていないという状況です。
    – Aikosan
    Commented 2月9日 12:00
  • お返事ありがとうございます。まだ右揃えにできていない状況です。お分かりの方、教えてください。。
    – Aikosan
    Commented 2月11日 1:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。