HTML

HTMLの特殊文字で摂氏温度記号を表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLの特殊文字で摂氏温度記号を表示する方法について解説しています。最初に特殊文字とはどういうものか、その性質と扱う際の注意点について説明します。次に実際に摂氏温度記号℃を記述する方法について見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLの特殊文字で摂氏温度記号を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

特殊文字で摂氏温度記号を表示する方法について詳しく説明していくね！

お願いします！

特殊文字の摂氏温度記号を表示してみよう！

今回は、HTMLの特殊文字の摂氏・華氏温度記号を表示する方法について見ていきましょう。

特殊文字とは

特殊文字とは、伝統的に使用される通常の半角英数字、ひらがな、カタカナ、漢字以外の文字の事を指します。

例えば、単位、郵便番号、数学などで登場する算術記号は全て特殊文字に含まれ、環境によっては上手く表示することができきないこともあります。

摂氏温度記号の出し方

摂氏温度記号は、20 ℃ と気温やお湯の温度などを表示させたい場合などに使用します。

また、摂氏温度記号は機種依存文字です。

「ど」を文字変換した全角の「℃」は、英語コンテンツでは表示してくれません。

「20ど」と入力し、文字変換したものをそのまま使用しても文字化けすることがあります。

入れる場合は、&から始まる「数値文字参照」、「文字実体参照」を使いましょう。

または、半角でそれぞれを記載するという方法もあります。（華氏温度はこちらを使います。）

北海道　 15 ℃／　15 ℃

北海道　15 °C／　59 °F

注意：摂氏温度の表示は数値文字参照を使うこと！

注意したいのは、温度表示の場合は、数値文字参照を使うことです。

使用した場合は、上手く表示されないこともあるため、制作物の納品前にそういった記号が正しく表示されているか？を端末毎にチェックしておきましょう。

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

実際に書いてみよう

北海道　 15 ℃／　15 ℃
東京　 15 °C／　59 °F

今回は、機種依存文字の摂氏温度の記号表示、表示方法について紹介しました。

執筆してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。

制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。

TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

HTMLの特殊文字で摂氏温度記号を表示する方法が分かりやすくて良かったです！

ゆかりちゃん、これからも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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

HTMLの特殊文字でスペースを入力する方法を現役デザイナーが解説【初心者向け】

HTMLの特殊文字でスペースを入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...

HTML

fontタグの使い方！HTMLでフォントサイズを指定する方法【初心者向け】現役Webデザイナーが解説

HTMLでフォントサイズを指定する方法について解説しています。初心者でも簡単にフォントサイズや色を指定できるので、ぜひ書き方を覚えておくと良いでしょう。...

HTML

JSONをHTMLに埋め込む方法を現役エンジニアが解説【初心者向け】

JSONをHTMLに埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでinputタグのtype="date"で日付を入力する方法を現役エンジニアが解説【初心者向け】

HTMLでinputタグのtype="date"で日付を入力する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...

HTML

HTMLでフォームのボタンを非活性にする方法を現役エンジニアが解説【初心者向け】

HTMLでフォームのボタンを非活性にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次...

HTML

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

いざという時に便利！HTMLで特殊文字を扱う方法【初心者向け】

HTMLで特殊文字を扱う方法について解説しています。コードをサイト上に表示させるために必要な知識になるので、いざという時に便利でしょう。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。特殊文字とは特殊文字とは、「a」や「b」などとは少し違った特殊な文字のことを指します。例えば”<“という文字を入力したいとしても、”<“は”<“という文字として認識されず、<div>やなどのタグの始めとして認識されてしまいます。しかしそれでは”<“という文字を打つことはできません。そのため”<“は特殊文字という部類で定義され、ある特殊な文字列を打ち込むことでそれがHTML内で”<“に変換され、それを表示するという仕組みになっています。大石ゆかり特殊文字って何ですか？田島悠介要するに、タグそのものを表示したい場合どうするのか？ってことなんだよ。大石ゆかりタグを書いても表示されるのは中身で、タグ自体は表示されませんね。田島悠介そうそう。そんな時に使うのが、特殊文字なんだ。とりあえず例を見てみよう。大石ゆかりはい！特殊文字の表記方法特殊文字は&の後に特定の文字列を入力することで特殊文字として認識されます。 " => “” & => & 一見何を書いているのかわからず、最初は戸惑うことが多いと思います。特にPHPなどのプログラミング言語と混ざって記入してある場合、何を意味するのかわからないと、コードを読むことができなくなってしまいます。特殊文字はとても種類が多いですが、よく使用される文字は限られているので、その文字を覚えておくと良いでしょう。 [PR] Webデザインで副業する方法とは実際に書いてみようそれでは実際に特殊文字を使用してみましょう。 " => ダブルクォーテーション & => & < => 小なり > => 大なりよく使用される特殊文字は上の4つです。ぜひ覚えておくようにしましょう。まとめ今回は特殊文字について解説していきました。特殊文字は一見マニアックな知識に感じますが、実際のデザインの現場では何度も出てくる場面があります。とっつきにくそうでも覚えておけば、役に立つ事まちがいないのでぜひ勉強しておくようにしましょう。大石ゆかり ltとgtについてはわかりました。タグに使われる文字をHTML上で表示したいときに使えますね。でも、＆(アンパサンド)は？田島悠介ややこしいんだけど、特殊文字自体を表示したい場合に使うんだよ。大石ゆかり HTMLとして特殊な役割がある文字を表示したい場合に使うのが特殊文字。その特殊文字を表示したい場合に使う特殊文字もあるんですね。複雑ですね。田島悠介上の例にあるように、ltやgtを入力すると、開始タグと終了タグの文字が表示されるよね。ただ、今度は＆lt;って文字を表示する際に困ってしまうんだ。そこで＆を特殊文字で表示するんだよ。 [お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

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

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の特殊文字で表示できる矢印を現役エンジニアが紹介【初心者向け】

HTMLの特殊文字で表示できる矢印について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介特殊文字で表示できる矢印について詳しく説明していくね！大石ゆかりお願いします！ HTMLの特殊文字で表示できる「矢印」を表示してみよう！今回は、HTMLの特殊文字で表示できる矢印を表示する方法について解説してみます。特殊文字とは通常の半角英数字、ひらがな、カタカナ、漢字、ごく一部の記号を除いた特別な記号のことを指します。単位、郵便番号、数学などで登場する算術記号などが含まれます。全部覚えておく必要はありません。 Googleで、「任意の出したい記号」と「文字コード」と半角スペース区切りで入力し、検索しましょう。出た結果をコピー＆ペーストすると良いでしょう。特殊文字表一覧のサイトをブックマークしておいても良いでしょう。矢印の出し方ほとんどの記号に関しては、「やじるし」「みぎ」「ひだり」「した」と入力し、文字変換して使うとよいでしょう。一部の矢印はコードで入力した方がよいのですが、実際サイト制作で必要になることはあまりない、と考えてよいでしょう。一般的によく使われるであろう矢印では、一般的な矢印以外の特殊記号を表示してみます。（一般的な名称を入れてみました） ←　←／← ↑　↑／↑ →　→／→ ↓　↓／↓ ↔　↔／↔ ↕　↔／↕ ↖　↖ ↗　↗ ↘　↘ ↙　↙ ↵　↵／↵ ⇐　⇐／⇐ ⇒　⇒ ⇔　⇔／⇔ ⇕　⇕ ⇖　⇖ ⇗　⇗ ⇘　⇘ ⇙　⇙ ⇝　⇝ ‹　‹／‹ ›　›／› 　>／> «　«／« »　»／» 〈　〈〉　〉《　《》　》 ‹　‹ ›　› ∧　∧／∧ ∨　∨／∨ ≪　≪ ≫　≫ ▲　▲ △　△ ▴　▴ ▵　▵ ▶　▶ ▷　▷ ▸　▸ ▹　▹ ►　► ▻　▻ ▼　▼ ▽　▽ ▾　▾ ▿　▿ ◀　◀ ◁　◁ ◂　◂ ◃　◃ ◄　◄ ◅　◅ ◢　◢ ◣　◣ ◤　◤ ◥　◥ ☜　☜ ☝　☝ ☞　☞ ☟　☟ 結構ありますね！！！注意：一部の記号表示は文字コードを使うこと！基本的な全角の矢印については、そのまま入力でよいでしょう。一部の特殊な星については、機種依存文字となるので、HTML上では文字コードでの入力がベターです。クライアントさんからいただいた原稿からコピー＆ペーストする際にはこれらの記号は大丈夫かを確認しましょう（別途文字校正担当さんがいても軽くは見ておきましょう）。特殊文字記号を使った場合は、制作物の納品前にそういった記号が正しく表示されているか？を端末毎にチェックしておきましょう。 [PR] Webデザインで副業する方法とは注意：サイト全体での記号の統一補足的な注意となりますが、サイト全体での記号の統一も重要です。違うスタイルの矢印が混在しているようなサイトは読みにくく、文字校正上でも適切ではありません。一般的な用例、用法に沿った使い方をすること、統一をするように心がけることも必要です。今回は、HTMLの特殊文字で表示できる矢印の表示、表示方法について紹介しました。監修してくれたメンターゆかちん先生フリーランスのクリエイティブディレクター。制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLで特殊文字を使って縦線を表示する方法を現役エンジニアが解説【初心者向け】

HTMLで特殊文字を使って縦線を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介特殊文字を使って縦線を表示する方法について詳しく説明していくね！大石ゆかりお願いします！目次特殊文字とは縦線の種類と使い方縦線を表示してみようまとめ特殊文字とは HTMLの要素自体を構成する文字のことを「特殊文字」と呼びます。特殊文字には以下の種類があります。 < > “ ‘ & これらの文字はそのままではWebページに使えないため、別の文字で代替えして参照する必要があります。このような特殊文字を別の文字で代替えして参照する手法を「実体参照」や「文字参照」、「文字実体参照」などと呼びます。上記の特殊文字は、それぞれ以下の文字実体参照を使って表現できます。 <：< <：> “：" ‘：' &：& なお、Webページで特殊文字の説明をする際「<」とHTMLに記述しても「<」と表示されてしまいます。そのような場合は「&」を「&」を使って表現することで回避できます。 &lt;は「<」を表します。特殊文字や文字実体参照について、詳しくは以下の記事も参考にしてください MDN – HTMLを始めよう [PR] Webデザインで副業する方法とは縦線の種類と使い方特殊文字以外も文字実体参照を使って表現できます。「|」は「|」、「¦」は「¦」で表現できます。縦線を表示してみよう今回のサンプルプログラムでは文字実体参照を使って縦線を表示する方法について確認します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample</title> </head> <body> 文字実体参照の縦線について <ul> <li>&#124;は縦線「|」を表す</li> <li>&#166;は破断縦線「¦」を表す</li> </ul> </body> </html> 実行結果は以下のようになります。まとめ今回の記事ではHTMLで特殊文字を使って縦線を表示する方法について学習しました。監修してくれたメンター太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】

HTMLで特殊文字をエスケープする方法についてテックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しています。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次特殊文字の摂氏温度記号を表示してみよう！注意：摂氏温度の表示は数値文字参照を使うこと！実際に書いてみよう執筆してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。特殊文字とは特殊文字とは、<>や”といったHTMLを書く際に使う記号や、©や£のような通常の文字とは異なる特別な文字のことを指します。エスケープとはエスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。例えば、<は<であったり、©は©など、特殊文字には必ず該当する記号が割り当たっています。 [PR] Webデザインで副業する方法とは主なエスケープ文字一覧シングルクォーテーションのみ、数値表現でコードを表示しています。記号コード意味 < < 小なり > > 大なり ‘ ' シングルクォーテーション “ " ダブルクォーテーション & & アンパサンド（アンド）   空白 ¥ ¥ 日本円 ¢ ¢ セント £ £ ポンド ¦ ¦ 縦破線 © © コピーライト ® ® 登録商標 ° ° 気温を表す度 ± ± プラスマイナス × × 掛け算の乗算 ÷ ÷ 割り算の除算 µ µ マイクロ · · 中点 § § セクション « « 左引用 » » 右引用 ² ² 上付き2 ³ ³ 上付き3 ¹ ¹ 上付き1 ¼ ¼ 4分の1 ½ ½ 2分の1 ¾ ¾ 4分の3 エスケープしない危険性エスケープしないと、「意図しない挙動」が発生する危険性があります。例えば、メールフォームなどで情報を送信するページを作ったとします。メールフォームにエスケープ処理を施さないことで、クロスサイトスクリプティング（XSS）という攻撃の標的にされることがあります。 XSS（クロスサイトスクリプティング） XSS（クロスサイトスクリプティング）とは、サイトにスクリプトを埋め込み実行することです。 XSSの対策の1つとして、エスケープ処理を行っておくと良いです。実際に書いてみよう HTML上で特殊文字を扱う処理の使用例を見ていきましょう。 HTML <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> この文字列は太くなります。 この文字は太くなりません。 <h1>よく使う特殊記号</h1> &(アンパサンド) <(小なり)

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLの特殊文字で摂氏温度記号を表示する方法を現役エンジニアが解説【初心者向け】