HTMLで『㎥』や『※』など右上or右下に小さな文字を付ける方法

Programming

今回は、HTMLのタグを使ってm2やCO21の様に記号や数字などの任意の文字をメインテキストの上下に付ける方法を紹介します。

今回使用するHTMLタグは「sup」と「sub」です。

「sup」はテキストのにテキストを表示させます。
「sub」はテキストのにテキストを表示させます。

実際の記述の例は以下です。

<p>「m<sup>2</sup>」「CO<sub>2</sub>」「<sup>※</sup>1」</p>

実際の表示は下記。

「m2」「CO2」「1」

また「sup」と「sub」は基本的にどんなテキストでも付ける事が出来ます。漢字、2文字以上、「sup」の中に「sup」を付ける事も可能です。

AAAAA 20 HP500

<p><sub><sub>A</sub>A</sub>A<sup>A<sup>A</sup></sup> 20<sup>才</sup> <sup>HP</sup>500</p>

また左右の位置に関しては、そのタグの位置で調整可能です。

XX」手前に置けば左下に、「XX」右に置けば右下に。

<p>「<sub>X</sub>X」手前に置けば左下に、「X<sub>X</sub>」右に置けば右下に。</p>

スタイルも付ける事は可能です。(主に色や太さなど。)

も付けれる。

<p>色<sub style="color:red">赤</sub>も付けれる。</p>

以上が「HTMLで『㎥』や『※』など右上or右下に小さな文字を付ける方法」でした。

普段は使う事は無いとは思いますが、工業系のコーポレートサイトでたまに使うかな?といった技術です。重要度は低いが一応こんなタグあったなと頭の片隅においときましょう。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました