こんにちは！Web制作の世界へようこそ。HTMLを学び始めると、「文字を大きくしたり太くしたりするのは分かったけれど、ちょっと特殊な位置に文字を置きたいときはどうするの？」という壁にぶつかることがありますよね。
例えば、科学の授業で習った「水の化学式（H₂O）」や、数学の「2の3乗（2³）」などです。これらをただの文字として書いてしまうと、なんだか読みづらくて、プロっぽくない仕上がりになってしまいます。
そこで今回は、そんな「ちょっとこだわりたい」ときに大活躍する、``タグと``タグという隠れた名選手をご紹介します。肩の力を抜いて、一緒に見ていきましょう！
—
1. まるで「文字の背伸び」と「しゃがみ込み」
HTMLには、テキストを飾るための便利なタグがたくさん用意されています。その中でも、今回紹介する2つは、文字の「高さ」をコントロールするためのタグです。
- ``タグ（Subscript）：下付き文字
- 文字を基準線よりも少し下に小さく表示します。まるで文字が「よいしょ」としゃがみ込んでいるようなイメージですね。化学式などでよく使われます。
- ``タグ（Superscript）：上付き文字
- 文字を基準線よりも少し上に小さく表示します。こちらは文字が背伸びをして空を指さしているイメージです。数学の指数や、注釈番号などで活躍します。
どちらもインライン要素といって、文章の中に「チョコっと」埋め込めるのが特徴です。行全体を崩さずに、特定の部分だけをひょいっと動かせる。これ、実はすごく賢い仕組みなんですよ。
—
2. 実際に書いてみよう！
では、実際のコードを見てみましょう。難しく考える必要はありません。普段使っているタグと同じように、囲みたい文字を挟むだけです。
水の化学式は H2O です。
2の3乗は 23 = 8 となります。
このサービスは業界最安値です1。
1 2024年4月時点の自社調べ
どうでしょう？ 意外とシンプルですよね。「これだけでいいの？」と思うかもしれませんが、Webの世界ではこの「シンプルさ」が正義なんです。
—
3. なぜCSSで調整しないの？という疑問
ここで鋭い方はこう思うかもしれません。「CSSで位置を動かせばいいんじゃない？」と。
確かに、CSSの `vertical-align` を使えば同じような見た目は作れます。でも、初心者のうちはあえてHTMLタグを使うことを強くおすすめします。理由はシンプル。「意味」が伝わるからです。
検索エンジンや、目の不自由な方が使う「スクリーンリーダー（読み上げソフト）」は、HTMLタグを見て「あ、これは化学式なんだな」「これは注釈なんだな」と判断します。``や``を使うことは、コンピューターに対して「ここ、ちょっと特殊な文字ですよ！」と優しく教えてあげることにつながるんです。
—
4. つまずきやすいポイント：やりすぎ注意！
最後に、ちょっとだけアドバイスを。これらを使うときにやりがちな失敗が、「強調のために使ってしまうこと」です。
例えば、「ここが大事！」という部分を``で上に持ち上げてしまうと、文章の見た目がガタガタになって、かえって読みづらくなってしまいますよね。あくまで「化学式」や「数学」、「注釈」といった、「そう書くのがルールである場合」に使うのが、プロの技です。
今日のまとめ
- `` は「下付き（しゃがむ）」、`` は「上付き（背伸び）」！
- 文章の流れの中に「ピョコッ」と埋め込めるのが便利。
- HTMLタグを使うことで、機械にも人間にも親切なWebサイトになる。
最初はタグを覚えるだけで精一杯かもしれませんが、こうやって少しずつ「表現の引き出し」を増やしていくのが、Web制作の醍醐味です。まずはご自身のサイトの「注釈」や「単位」の部分で、ぜひ試してみてくださいね。
分からないことがあっても大丈夫。一つずつ、一緒に進んでいきましょう！
コメント