「2乗はx^2のような書き方しか知らない」
「上付き文字、下付き文字はCSSで作る方法しか知らない」
「特殊なテキストは全て画像にして貼り付けていた」
本日はそんな方に向けた内容になります。
化学式や数式をHTMLで直接入力するのは簡単な仕組みで実現できるのをご存知でしょうか？
ウェブページをデザインする際、科学的な表現や数学的な式、化学の分子式など、小さい文字や上付き文字、下付き文字が必要になることがあります。
例えば、「CO₂」のように、二酸化炭素を表現する際には、「₂」が上付き文字として表示されます。また、「X²」のように、数式での指数表記にも上付き文字が頻繁に使われます。
本記事ではHTMLにあるタグを使用して上付き文字および下付き文字を表示する方法を詳しく説明します。
HTMLだけで特殊なテキストを書けることを知っておけば、connpassやQiitaなどのマークダウン形式の投稿サイトでも活用できて便利です。
また動画もあるので必要に応じて活用してください。
HTMLで小さい文字(下付き)に変換する方法
まずは下付き文字についてです、CO2などの化学式やlog2Xのような数式で登場します。
pタグを使って普通に書くと以下のような形になるはずです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>H2O</p>
<p>CO2</p>
<p>log2X</p>
</div>
</body>
</html>こちらを以下のように修正するだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>H<sub>2</sub>O</p>
<p>CO<sub>2</sub></p>
<p>log<sub>2</sub>X</p>
</div>
</body>
</html>
subタグという専用のタグが用意されていて、subタグで囲まれた文字は自動的に下付き文字に変換されます。
HTMLで小さい文字(上付き)に変換する方法
同じような段取りで上付き文字についても紹介します。
数式の掛け合わせで使います、計算をするだけなら「X ^ 2」とすれば良いのですが、ブラウザで表示するには以下のようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>X<sup>2</sup></p>
<p>2<sup>x</sup></p>
</div>
</body>
</html>
上付き文字の場合はsupタグというタグを使うと掛け合わせの数式を書くことができます。
数字だけでなく英語でも小文字にすれば問題なく表現できます。
小さい文字(上付き、下付き)をCSSで作る方法
HTMLで簡単に小さい文字を表現できることがわかりました。
subタグとsupタグはあくまでデフォルトでCSSが当たっているだけなので、subタグとsupタグを使わずCSSで同じ表現をすることもできます。
小さい文字で表現したい部分をspanタグなどで囲っておき、そのspanタグに対してCSSを当てるわけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>x<span class="sup">2</span></h1>
<h1>O<span class="sub">2</span></h1>
</div>
</body>
</html>h1 > .sup {
font-weight: normal;
font-size: 13px;
vertical-align: super;
}
h1 > .sub {
font-weight: normal;
font-size: 13px;
vertical-align: sub;
}
文字を小さくするのはfont-sizeで行い、位置に関してはvertical-alignを使用しています。
基本的にはHTMLで書いた方が楽ですがCSSでの作り方も1回くらいは練習しておくと良いかもしれません。
またsubタグとsupタグ自体にもCSSを当てることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<p>x<sup>2</sup> + y<sup>2</sup> + z<sup>2</sup> = 1</p>
<p>CO<sub>2</sub></p>
</div>
</body>
</html>sup {
color: red;
font-size: 16px;
}
sub {
color: blue;
font-size: 16px;
}
結局はCSSが動いているだけなんですね。
<sub>と<sup>はマークダウンにも搭載されていることが多いので、connpassやQiitaなどで投稿するときにも使えます。
ぜひ覚えておきましょう。