HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】
初心者向けにHTMLでよく使う数学記号について解説しています。数学記号をWeb上で扱う際の注意点、正しく表記させるための書き方を説明します。よく使う記号についての記述方法一覧も表にしているので、ぜひ活用してください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
HTMLでよく使う数学記号について詳しく説明していくね！
お願いします！
数学記号とは
HTMLにおいて、文字として数学記号を使いたい場合は、数学記号の特殊文字を使うのがいいとされています。
というのは、記号をそのまま文字として表現したいとき、HTMLがHTMLの記号だと認識してしまうと記号=タグやHTML標記 として認識してしまい、うまく表示されないといったことが起こってしまうからです。
数学記号を含めた特殊文字については「&」（アンパサンド）と「;」（セミコロン）の間に所定の英数字を入れて表記します。
では、実際にどんなものがあるのか見ていきましょう。
よく使われる数学記号
数学記号はたくさんありますが、その中でよく使われるものについてリストアップしました。
| 記号 | 10進数での書き方 | 16進数での書き方 | 文字参照での書き方 | 名前 |
|---|---|---|---|---|
| + | ＆#43; | ＆#x2b; | プラス | |
| − | ＆#8722; | ＆#x2212; | ＆minus; | マイナス |
| × | ＆#215; | ＆#xd7; | ＆times; | クロス |
| ÷ | ＆#247; | ＆#xf7; | ＆divide; | 記号：割る |
| * | ＆#42; | ＆#x2a; | アスタリスク | |
| = | ＆#61; | ＆#x3d; | イコール | |
| ± | ＆#177; | ＆#xb1; | ＆plusmn; | プラスマイナス |
| ∞ | ＆#8734; | ＆#x221e; | ＆infin; | 無限大 |
| ≦ | ＆#8806; | ＆#x2266; | 小なりイコール | |
| ≧ | ＆#8807; | ＆#x2267; | 大なりイコール | |
| ¹ | ＆#185; | ＆#xb9; | ＆sup1; | 上付き文字1 |
| ² | ＆#178; | ＆#xb2; | ＆sup2; | 上付き文字2 |
| ³ | ＆#179; | ＆#xb3; | ＆sup3; | 上付き文字3 |
| ₊ | ＆#8330; | ＆#x208a; | 下付き文字プラス | |
| ₋ | ＆#8331; | ＆#x208b; | 下付き文字マイナス | |
| ( | ＆#40; | ＆#x28; | 左括弧 | |
| ) | ＆#41; | ＆#x29; | 右括弧 | |
| ½ | ＆#189; | ＆#xbd; | ＆frac12; | 分数・2分の1 |
| ⅓ | ＆#8531; | ＆#x2153; | 分数・3分の1 | |
| ⅔ | ＆#8532; | ＆#x2154; | 分数・3分の2 |
数学記号を使ってみよう
使い方はいたって簡単です。タグ内に書かれた文字の中に直接記号を入れるだけです。
例えば、
10+(6÷2)×5=25
という計算式を数学記号を使って書いてみるとします。
<p>10＆#43;＆#x28;6＆#247;2＆#41;＆#215;＆#61;25</p>
と書くだけです。
先にも述べたように、「&」と「;」に挟まれている英数字に関しては、基本的にHTMLは数学記号・特殊文字と認識するので、タグの中に続けて記述することができます。
とっても簡単なのでぜひ使ってみてください。
監修してくれたメンター
| メンター増田直子
40歳直前までHTMLの存在すら知らなかったのですが、 現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
