html

【HTML】簡単なcssで分数をブラウザで表示する方法

更新日：2023/07/28

htmlには分数を表示する機能が無いので、数学等の記事を書くとき苦労します。
実際には簡単なcssで分数を表記できるので紹介します。

表示例

今回は、次のような分数形式での表示ができます。

■簡単な分数表示

例：32231000

■分子、分母に分数を含む分数表示

例：3223100032231000 + 32231000

■カッコを含む分数表示

例：3223100032231000 + 32231000× 5

■複雑な分数表示

例：32233223100032231000 + 3223100032231000 + 3223100032231000 + 322310001000

■文章中に分数表示

例：今回は文章中にも分数を表示できます。例えば13とか123456のように表示できます。
改行をすると713のようなイメージになります。

分数表示するcssとhtml

分数表示するのに必要なcssは、次のようなものです。

/* 分数に関するスタイル */
span.fraction {
	display:inline-flex;
	flex-direction:column;
	vertical-align:middle;
	text-align:center;
}
span.fraction > span:nth-of-type(1) {
	padding:0 0.5em;
	border-bottom:1px solid black;
}
span.fraction > span:nth-of-type(2) {
	padding:0 0.5em;
}
/* カッコに関するスタイル */
span.fr_brackets{
	position: relative;
	margin-left: 1em;
	margin-right: 1em;
}
span.fr_brackets:before,span.fr_brackets:after{
	position: absolute;
	transform: scaleY(2); /* ← 拡大率 Webページに合わせて調整 */
	top: -0.3em;          /* ← 上端の位置調整 Webページに合わせて調整 */
}
span.fr_brackets:before{
	content: "(";
	left:-0.5em;
}
span.fr_brackets:after{
	content: ")";
	right:-0.5em;
}

htmlは、次のようになります。

<span class="fraction"><span>分子</span><span>分母</span></span>

カッコで囲う時は、次のように記述します。

<span class="fr_brackets"><span class="fraction"><span>分子</span><span>分母</span></span></span>

カッコの位置や大きさがおかしく感じるときは、CSS内の「Webページに合わせて調整」というコメントがあるスタイルの値を変更して調整してください。

WordPressの場合、途中で改行すると自動的に改行タグを入れるので表示が乱れます。
見にくくなってしまいますが、改行を入れないようにしましょう。

入れ子もOK

分子や分母の位置に分数を構成するhtmlを記述すると、分数の中に分数を入れ子できます。

<span class="fr_brackets">
  <span class="fraction">
    <span>
      <span class="fraction">
        <span>3223</span>
        <span>1000</span>
      </span>
    </span>
    <span>
      <span class="fr_brackets">
        <span class="fraction">
          <span>3223</span>
          <span>1000</span>
        </span>
        + 
        <span class="fraction">
          <span>3223</span>
          <span>1000</span>
        </span>
      </span>
      × 5 ＋ 10
    </span>
  </span>
</span>
× 5

分かりやすいように改行しています。
WordPressは改行を削除してください。

次のように表示されます。

3223100032231000 + 32231000 × 5 + 10 × 5

外側のカッコが小さいですね。

そこで、次のようなcssを追加しました。

span.fr_brackets.fr_brackets2:before,span.fr_brackets.fr_brackets2:after{
	transform: scaleY(6) scaleX(2); /* 縦6倍 横2倍 */
}

そして、htmlタグを次のように変更します。

<span class="fr_brackets fr_brackets2">
  <span class="fraction">
    ・・・省略
  </span>
</span>
× 5

次のように表示されます。

3223100032231000 + 32231000 × 5 + 10 × 5

もっと複雑な入れ子もできるので、やってみてください！

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。