Tools

Anki カードの背景をストライプにする

投稿日:2021年9月19日 更新日:

Anki のカードの背景をストライプにする方法を紹介します。

方法と言っても、[書式] のところに 以下のCSSを書くだけです。

.card {
  /* 省略 */
  background-color: #b2e0f0; // 薄い方の色
  background-size: auto auto; 
  background-image: repeating-linear-gradient(180deg, transparent, transparent 1px, #8cd1e8 2px, #8cd1e8 8px);
  /* 省略 */
}
  • .card のところに記述します。

こんなふうになります。

背景がストライプになりました

この場合、文字が見づらくなってしまうので、文字の部分だけ白い背景にしてあります。

そうする場合は、まず 表面や裏面のテンプレートで、こんなふうにクラス属性を指定したタグ(今回は <p>)でフィールドを囲んでおきます。

<p class="box">{{表面}}</p>

続いて、[書式] のところで、このクラスのスタイルを記述します。

.box {
  background-color: white;
  padding: 10px 5px;
  border-radius: 5px;
}

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

GitHub のプライベートリポジトリ作成が無料になりました

GitHub において、無料ユーザーでもプライベートリポジトリが作成できるようになりました。 実際に無料アカウントで試したところ、リポジトリの作成ページで「Private」を選択することができました。 …

JavaScript

npm のパッケージを最新版に更新する

目次1. npm のパッケージを最新版に更新するには?2. npm-check-updates を使ってプロジェクト内のパッケージを最新版にする手順1. npm-check-updates をインスト …

ICTリテラシー

複数のGIFファイルを一括でPNGファイルに変換する

複数のGIFファイルを一括でPNGファイルに変換する方法を紹介します。

Windows

wsl-terminal を更新する

目次1. はじめに2. 環境3. バージョン4. 作業1. エクスプローラーのコンテキストメニュー2. 既存の wsl-terminal ディレクトリを退避3. 最新版 wsl-terminal の導 …

Web Programming

Webプログラミングに役立つサービスたち

目次全般HTML, CSS, JS をすぐに試せるWebサービス他のサービスが使っている技術・ツールを知る多言語対応デザインレイアウトフォント関連ロゴ作成HTMLパーツジェネレーターオンラインエディタ …