HTML

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

[PR] Webデザインで副業する方法とは

数学記号を使ってみよう

使い方はいたって簡単です。タグ内に書かれた文字の中に直接記号を入れるだけです。

例えば、

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サイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTMLのフォルダ・ディレクトリ構造を現役エンジニアが解説【初心者向け】

HTMLのフォルダ・ディレクトリ構造について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nbs...

HTML

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

HTMLのspan要素はご存じでしょうか。一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。この記事では、HTMLでspan...

HTML

HTMLでラジオボタンの位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでラジオボタンの位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでコメントを書く方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでコメントを書く（コメントアウトする）方法につい...

HTML

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。本記事はテックアカデミーのはじめての副業コースのHTMLカリ...

HTML

HTMLで多階層メニューを作る方法を現役デザイナーが解説【初心者向け】

HTMLで多階層メニューを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、...

HTML

あわせてよく読まれている記事

PHPのエスケープ処理について現役エンジニアが解説【初心者向け】

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次数学記号とはよく使われる数学記号数学記号を使ってみよう監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPでダブルクォーテーションを表示しようとしたらエラーがでます。どうしたらいいですか？ソースコード： <?php echo "私は"りんご"が好きです"; ?> エラー画面： PHP Parse error: syntax error, unexpected identifier "りんご", expecting "," or ";" in /workspace/Main.php on line 2 田島悠介 PHPでのダブルクォーテーションは「文字列の始まりや終了」を表す特別な意味がある記号だから、そのままでは表示できないんだ。ダブルクォーテーションのような、特別な記号の働きをなくすエスケープ処理が必要だね。大石ゆかりエスケープ？何の処理ですか？田島悠介エスケープ処理をすると機能を無効にしたり、違う機能をさせたりできるんだ。「エスケープ」の英語には「脱出する」という意味があるから、本来の機能から「脱出」させるのがエスケープ処理と覚えるのもいいね。大石ゆかりそういえば、スマホのゲームに「エスケープ」ってタイトルが付いたゲームがありましたけど脱出ゲームでしたね。田島悠介プログラミング言語でのエスケープ処理には特殊記号を表示することと、HTMLタグなどの命令を無効にする2つの役割があるんだよ。大石ゆかりそうなんですね。その「エスケープ処理」について教えてください！田島悠介じゃあ、特殊記号を表示させる方法から見ていこうか。この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも、理解できる内容になっています。エスケープ処理とはエスケープ処理とは、特殊記号（あるいはタグなどの命令）で行われる処理を回避して単なる文字として表示したり、逆に普通の文字に改行などの特別な機能を持たせます。たとえば、「”」（ダブルクォーテーション）をPHPのコードから文字列として表示させたい場合、通常なら「”」は文字列の始まりか終わりを指す特殊記号なのでPHPでは表示ができません。特殊記号を表示するには、バックスラッシュ(\)または円記号に続けて特殊記号を記述します。バックスラッシュのようなエスケープ処理に使う文字をエスケープ文字といいます。エスケープ処理には特殊記号を表示させるだけでなく、HTMLコードやJavaScriptの命令を無効化して安全に表示する使い方もあります。このようなエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 ※バックスラッシュ(\)を入力しても円記号(¥)がそのまま表示される場合もありますが、PHPでは円記号はバックスラッシュと同じ役割です。 ※ダブルクォーテーションをWebページ上に表示するには、HTMLの特殊文字コード「"」を使う方法もあります。バックスラッシュの入力方法について Windowsで標準的なキーボード配列の場合、バックスラッシュ(\)は日本語キーボードだとバックスペースキーの左側のキー（キーボードの刻印は「¥」）を押すか、右下にある「\」キー（日本語かな表記だと「ろ」の刻印のキー）を押します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュが円記号で表示される場合があります。 ※バックスラッシュの入力はPHPの命令と同じように漢字入力オフ（漢字が入力できない状態）で入力してください。 ※URLで使われるスラッシュ(/)と、エスケープ文字のバックスラッシュ(\)は違う記号なので注意してください。またMacの場合だと、「option」キーを押しながら右上の「¥」キーを押すだけで、半角のバックスラッシュが入力できます。【参考】文字列の囲み方 PHPで文字列を囲むには、(“)ダブルクォーテーションで囲む方法と(‘)シングルクォーテーションで囲む方法があります。 (“)ダブルクォーテーションを文字列の中で使用する場合、(‘)シングルクォーテーションで囲んで「’私は”りんご”が好きです’」のように指定します。違う記号で囲む方法は、コードの中で文字列を囲む記号が統一できないので、エスケープ処理をするのがおすすめです。特殊記号を表示する PHPでダブルクォーテーションを含んだ文字列をバックスラッシュでエスケープして表示します。サンプルコードダブルクォーテーションを含んだ「私は”りんご”が好きです」という文章を表示します。ソースコード <?php echo "私は\"りんご\"が好きです"; ?> 実行結果解説上記のプログラムでは、「”」の前にバックスラッシュ(\)を使用して「”」を単に文字として扱うようにしています。このようにダブルクォーテーションのような特別な意味を持つ文字の前に「\」のエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。エスケープシーケンス上記のように、特殊な記号を文字として出力するためにエスケープ文字を使用した文字の組み合わせをエスケープシーケンスといいます。エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。エスケープシーケンスを有効にするにはダブルクォーテーションで文字列を囲みます。以下は、主なエスケープシーケンスの一覧です。 \n 改行 \’ シングルクォーテーション(‘) \” ダブルクォーテーション(“) \¥ 円記号 \$ ドル記号 \t 水平タブ \\ バックスラッシュ ※PHPの他のエスケープシーケンスについて、詳しくは公式のドキュメント「エスケープシーケンス」をご覧ください。 ※エスケープシーケンスが含まれた文字列をシングルクォーテーションで囲むと、「\’」「\\」以外のエスケープシーケンスは機能せずエスケープ文字が表示されてしまいます。エスケープシーケンスを使った例それでは、実際にエスケープシーケンスを使用する例を見ていきましょう。サンプルコードエスケープシーケンスを使った例として、以下の記号の表示をしてみましょう。 (‘)シングルクォーテーション改行タブドル記号バックスラッシュソースコード //preタグで通常のテキストとして表示 echo "<pre>"; // ダブルクォーテーションの表示 echo 'PHPの文字列は「"」か「\'」で囲みます。'; // 改行 echo "\n"; echo "\nりんご\nみかん\nれもん\n"; echo "\n"; // タブ echo "1\t2\t3\n"; echo "りんご\tみかん\tれもん\n"; echo "\n"; // ドル記号 echo "りんごの価格：\$1\n"; echo "\n"; //バックスラッシュ echo "PHPで改行するには「\\n」と記述します"; //preタグの終わり echo "</pre>"; 実行結果解説 2行目のpreタグは出力した改行などをHTML表示でも反映させるためのタグです。 5行目では文字列をシングルクォーテーションで囲っているのでダブルクォーテーション(“)はそのまま表示でき、シングルクォーテーションはエスケープシーケンスで表示します。 8から10行目でエスケープシーケンス「\n」により文字列の途中で改行しています。 13と14行目は文字をそろえる時に便利なタブ文字「\t」（一定間隔の空白を空ける文字）を入力しているので、数字とフルーツの名前がそろっています。 18行目は変数名などで使われるドル記号($)をエスケープして表示しています。また22行目にあるように、バックスラッシュ（または円記号）自身を表示するときは「\\」と記述します。 ※シングルクォーテーションで文字列を囲ったときに機能するエスケープシーケンスは、「\’」と「\\」だけです。 [PR] Webデザインで副業する方法とはHTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「<」「>」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「©」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できるhtmlentities関数やタグを取り除くstrip_tags関数などもあります。書式エスケープ処理された文字 = htmlspecialchars( 対象文字列 ); htmlspecialchars関数の第1引数には、エスケープ処理したい文字列を指定します。 ※第2引数は省略できますが、ダブルクォーテーションなどを変換するかどうかなどの変換パターンを指定します。詳しくは公式ドキュメント「PHP: htmlspecialchars – Manual」のパラメータflagsの項目をご覧ください。 ※第3引数も省略できて、文字を変換するときの文字コードを指定します。サンプルコード HTMLタグを含んだ文字列「太字 」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "太字 "; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果解説変数 $tagを表示すると、HTMLタグが有効なのでタグが有効になり太字で表示され タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「太字 」になります。エスケープ処理された変数 $tag_escapeを表示するとHTMLエンティティに変換されているので、太字にも改行にもならず単なる文字として表示されます。まとめバックスラッシュ(\)に続けて記述されたエスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、改行やタブのような特殊な処理を行えます。 HTMLタグを無効にするhtmlspecialchars関数でエスケープ処理することで安全な表示が行えます。エスケープ処理は実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ PHPを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

PHP

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次数学記号とはよく使われる数学記号数学記号を使ってみよう監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target "; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName "; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

HTMLでコピーライト記号©を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次数学記号とはよく使われる数学記号数学記号を使ってみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介コピーライト記号©を表示する方法について詳しく説明していくね！大石ゆかりお願いします！コピーライト記号とはコピーライト記号とは「©」と表示され、著作権を表明するための簡略化された記号です。この記号に続けて、著作物が作られた年と、著作権の所有者である団体や個人の名称（屋号）を記述します。コピーライトの表記はWebサイトの最下部に記されていることが多く、もはや1つの慣習として表記しているケースがほとんどです。ちなみに、現在ご覧になっているテックアカデミーマガジンのコピーライト表記は以下の通りです。注意点として、コピーライト記号「©」が特殊文字のため、HTMLにそのまま記述すると文字化けを起こす場合があります。特殊文字の思わぬ文字化けを防止するために、記号部分を「実体参照」として記述する方法があります。実体参照とは実体参照とは、HTMLにそのまま記述すると文字化けを起こす可能性のある特殊文字を、ブラウザで問題なく表示させるために使用される書き方です。実体参照には「文字実体参照」と「数値文字参照」の2種類がありますが、以降のコピーライト記号を表示する方法では「文字実体参照」を使用して説明します。実体参照の表記ルールとしては、「&」から始まり「;」で終わる連続した文字列になっています。 [PR] Webデザインで副業する方法とはHTMLでコピーライト記号を表示する方法文字コードの確認まずは、HTMLに定義されてある文字コードを確認しておきましょう。 headタグ内のメタ情報に以下の記述があるか確認します。 <meta charset="utf-8"> 上記のように文字コードの種類が「utf-8」の場合は、実体参照の記述を用いなくても、コピーライト記号などの特殊記号は表示できます。逆に、以下のように文字コードの種類がutf-8以外であった場合、特殊記号を用いると文字化けを起こします。 <meta charset="euc-jp"> いかなる文字コードの場合でも特殊記号が正常に表示されるよう、実体参照を使用して記述しておけば安心です。コピーライト記号を表示してみようコピーライト記号は実体参照を使用した場合、©と記述します。以下は、コピーライトの表記例です。 See the Pen 実体参照によるコピーライト表示 by nomallica (@nomallica) on CodePen. まとめ今回は、HTMLでコピーライト記号©を表示する方法について解説しました。 HTMLの文字コードの種類が「utf-8」の場合は「©」をそのまま記述しても表示はされますが、文字コードの変換が起こった場合などに文字化けが起こらないよう、実態参照を用いて記述しておくと安心です。実体参照は「&」から始まり「;」で終わる連続した文字列です。コピーライト以外にも「&」や「<」などのソースコードに使われる文字をそのまま表示したい時にも実体参照はよく用いられていますので、表示したい内容によって適宜取り入れていきましょう。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

今すぐ対策できる！HTMLで文字化けを直す方法【初心者向け】

今回はHTMLで文字化けを直す方法を説明していきます。『Web制作で謎の文字が出て、意図した日本語が表示できない！』などとお悩みのみなさんは、ぜひこの記事を読んでみてください。文字化け対策自体は、非常に簡単ですのでぜひ理解してくださいね！目次文字化けが起こる原因文字化けさせない書き方（文字化けの直し方）実際に書いてみよう文字化けが起こる原因まずは文字を表示する仕組みと、文字化けが起こる原因をご説明します。文字コード「コンピュータは0と1の世界」と聞いたことがあるのではないでしょうか？コンピュータ内で扱われているデータは、文章も画像も動画も、すべて数字の羅列です。コンピュータが「この数字の羅列はこういう意味だ」という解読ルールを知っていて、人間に理解しやすい文章や画像に変換して画面に表示してくれるので、数字の羅列を意識しなくても使うことができます。例えば文字も、「この数字がこの文字」という対応ルールがあります。この数字と文字の対応ルールのことを、文字コードといいます。文字 2進数 16進数 10進数 0 011 0000 30 48 A 100 0001 41 65 B 100 0010 42 66 a 110 0001 61 97 $ 010 0100 24 36 スペース 010 0000 20 32 改行 000 1010 0A 10 文章　　　　　→　 I am a human ASCII (16進数)　→　73 32 97 109 32 97 32 104 117 109 97 110 コンピュータの世界で一般的に使われている文字コードに、ASCII（アスキー）があります。アルファベットや数字や記号など、キーボードで半角入力できる文字のコードを定めるものです。 1文字を2進数8桁以内で表せるので、1文字あたりのデータ量は1Byteになります。（ASCIIコード表出展 Wikipedia https://en.wikipedia.org/wiki/ASCII ） ASCII文字は、どのコンピュータやスマホも同じように解読できます。 ASCII文字だけで作られている文章は、絶対に文字化けしません。 HTMLやCSSのコードも、ASCII文字だけで記述しますよね。 ASCII以外の文字コードと文字化け人間が使う文字は、ASCIIで定められたアルファベットや数字以外にもたくさんあります。ひらがな、カタカナ、漢字だけではなく、ロシア語も、タイ語も、アラビア語も。多種多様な文字を表すのに、様々な文字コードがあるのです。文字化けは、数字の羅列である文字データを、誤った文字コードで解読し表示したことにより発生します。例えば、文字を書くときはひらがなの文字コードで書いたのに、表示するときにロシア語の文字コードで表示すると、正しく解読できませんね。 Shift-JISとUTF-8と日本語の文字化け Web制作をしていると、日本語で書いた文章を日本語で表示したいのに、文字化けしてしまうことがあります。実は、日本語を表す事のできる文字コードは、よく使われているものが「Shift-JIS」と「UTF-8」の2つあるのです。みなさんが直面する文字化け問題のほとんどは、この「Shift-JIS」と「UTF-8」の取り違えによるものでしょう。「Shift-JIS」は、WindowsやMacなどのOS内で使われている、日本語専用の文字コードです。ひらがな、カタカナ、漢字や、「１」「＠」といった全角の英数字が該当します。 WindowsやMacを使って、何も意識せずに記載した日本語の文章は、「Shift-JIS」の文字コードでデータになるのです。 1文字を2進数で16桁で表せるので、1文字あたりのデータ量は2Byteになります。しかし、インターネットでつながる世界は、日本語以外に様々な言葉が使われていますね。どんな言語でも包括的に表せるように作られた文字コードが「UTF-8」です。例えば、日本語とロシア語とタイ語とアラビア語が混在したWebページを作る必要があるかもしれません。例えば、Shift-JISの文字化けページをロシア人が見ても、そもそも何の文字コードで書かれているかわからず、直すこともできません。そんな問題を防ぐために、UTF-8はどんな文字でも対応できます。全世界で一般的に使われている文字のほとんどだけではなく、数学記号や音楽記号、古代文字、絵文字、麻雀牌まで表すことができます。そのため、データ量は1文字あたり最大4Byte と、「Shift-JIS」などと比べ大きくなってしまうというデメリットもあります。日本語文字コードを間違えると文字化けします Shift-JIS 149 182 142 154 131 82 129 91 131 104 130 240 138 212 136 225 130 166 130 233 130 198 149 182 142 154 137

HTML

HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

HTMLの特殊文字で表示できる星について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介特殊文字で表示できる星について詳しく説明していくね！大石ゆかりお願いします！ HTMLの特殊文字で表示できる「星」を表示してみよう！今回は、HTMLの特殊文字で表示できる★を表示する方法について解説してみます。特殊文字とは通常の半角英数字、ひらがな、カタカナ、漢字、ごく一部の記号を除いた特別な記号のことを指します。単位、郵便番号、数学などで登場する算術記号などが含まれます。全部覚えておく必要はありません。 Googleで、「任意の出したい記号」と「文字コード」と半角スペース区切りで入力し検索しましょう。出た結果をコピー＆ペーストすると良いでしょう。特殊文字表一覧のサイトをブックマークしておいても良いでしょう。 ★の出し方ほとんどの記号に関しては、「ほし」と入力し、文字変換して使うとよいでしょう。4つの括弧のみ、コードで入力した方がよいのですが、実際サイト制作で必要になることはない、と考えてよいでしょう。一般的によく使われるであろう星では、一般的な星以外の特殊な星のような記号を表示してみます。（一般的な名称を入れてみました） ★／★　　☆／☆ 以下は特殊記号 ✝／✝／十字架　 ✞／✞／十字架　 ✟／✟／十字架 ✠／✠／マルタ十字 ✱／✱／アスタリスク　 ✲／✲／花 ✿／✿／花　 ❀／❀／花 ❅／❅／結晶　 ❆／❆&#10056 ❇／❇／結晶　 ❈／❈／結晶 ❉／❉／結晶　 ❊／❊&#10056 ❋／❋／花　 ✡／✡／ダビデの星（ヘキサグラム） ✩／✩／星　 ✪／✪ 　✫／✫／星結構ありますね！！！機種依存文字なので、文字コード必須となる星文字コードでの表示は横に表示しております。 ★／★　　☆／☆ 以下は特殊記号 ✝／✝／十字架　 ✞／✞／十字架　 ✟／✟／十字架 ✠／✠／マルタ十字 ✱／✱／アスタリスク　 ✲／✲／花 ✿／✿／花　 ❀／❀／花 ❅／❅／結晶　 ❆／❆&#10056 ❇／❇／結晶　 ❈／❈／結晶 ❉／❉／結晶　 ❊／❊&#10056 ❋／❋／花　 ✡／✡／ダビデの星（ヘキサグラム） ✩／✩／星　 ✪／✪ 　✫／✫／星注意：一部の記号表示は文字コードを使うこと！基本的な全角の★や☆については、そのまま入力でよいでしょう。一部の特殊な星については、機種依存文字となるので、HTML上では文字コードでの入力がベターです。クライアントさんからいただいた原稿からコピー＆ペーストする際にはこれらの記号は大丈夫かを確認すること（別途文字校正担当さんがいても軽くは見ておきましょう）、特殊文字記号を使った場合は、制作物の納品前にそういった記号が正しく表示されているか？を端末毎にチェックしておきましょう。 [PR] Webデザインで副業する方法とは注意：サイト全体での記号の統一補足的な注意となりますが、サイト全体での記号の統一も重要です。☆や★や※が混在しているようなサイトは読みにくく、文字校正上でも適切ではありません。一般的な用例、用法に沿った使い方をすること、統一をするように心がけることも必要です。今回は、HTMLの特殊文字で表示できる星の表示、表示方法について紹介しました。監修してくれたメンターゆかちん先生フリーランスのクリエイティブディレクター。制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。うまく画像をつかって、おしゃれなWebページを作ってくださいね。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次数学記号とはよく使われる数学記号数学記号を使ってみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海"> それぞれ1つずつ確認していきましょう。 imageタグ <img … > ここには画像を表示しますよ、ということを示します。ソース属性 src=”…” ソースは、出所や源泉という意味です。表示する画像ファイルの、ファイル名やファイルの場所を示します。タイトル属性 title=”….” 画像のタイトルを指定します。オルト属性 alt=”…” オルタナティブ、代替の略です。目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。では具体例をみてみましょう。表示したい画像ファイルを用意してsrc属性で指定しましょう。ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。基本的な使い方はこれだけです。大石ゆかりサイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！田島悠介そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。 Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。パスの書き方には、絶対パスと相対パスの2種類あります。それぞれ詳しく説明しますね。絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。今回の図では、demoというフォルダがおおもとですね。パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" > 分解して翻訳すると、こんな意味ですね。「 / 」おおもとのフォルダ内の「 images/ 」images というフォルダ内の「 image.jpg 」image.jpg というファイルこの道順に沿って、HTMLは表示する画像ファイルを見つけるのです。また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。相対パスパスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。いくつかのパターンで、具体的に説明していきます。 HTMLとファイルが同階層にある場合このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" > また、カレント記号は省略することもできます。 <img src="image.jpg" > どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。ファイルがHTMLより下のフォルダ階層にある場合次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" > また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" > ファイルがHTMLより上のフォルダ階層にある場合最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" > これを応用すると、下記のように複雑なパスも簡単に示すことができます。親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" > パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。 [PR] Webデザインで副業する方法とは【応用】画像の表示スタイルを調整する画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

数学記号とは

よく使われる数学記号

数学記号を使ってみよう

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

PHPのエスケープ処理について現役エンジニアが解説【初心者向け】

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

HTMLでコピーライト記号©を表示する方法を現役デザイナーが解説【初心者向け】

今すぐ対策できる！HTMLで文字化けを直す方法【初心者向け】

HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

HTMLでimageタグを使って画像を表示する方法【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

数学記号とは

よく使われる数学記号

数学記号を使ってみよう

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ