雑記ブログ

WEB学習 HTML&CSS 特殊文字,文字コード

 

WEB学習の課題でサイト模写をHTMLとCSSを使っているのですが、

その中に<title>文章000</title>があり、これをそのまま文字として書かなければなりませんでした。

まぁ案の定、そのまま入力すると空白でWEB上では反映されず・・・

今となっては理解できていますが、最初は意味がわからず調べた結果、HTMLには特殊文字がある事をしりました。

まだ学習し始めたばかりなので、もし同じ境遇の方が出てきた時の少しでも参考になればと思い、自分の備忘録も兼ねて残しておきます。

 

記号・特殊文字の書き方

 

HTMLで記号を扱う機会は結構多く、特にコピーライト©や「< 」「>」はよく見かけると思います。

文字実体参照

文字実体参照とは定義された名前から記号を入力する形式です。
フォーマットは記号名を「&」と「;」で囲みます。

文字実体参照の入力例 : <title>文章000</title>を入力したい場合

 

&lt;title&gt;文章000&lt;/title&gt;

数値文字参照 (10進数)

数値文字参照はUnicodeで定義されたコード位置(「26」や「A9」など)を数値で入力する形式です。

入力方法は10進数と16進数の2パターンあります。

10進数の入力フォーマットは、コード位置を「&#」と「;」で囲みます。

文字実体参照(10進数)の入力例:<title>文章000</title>を入力したい場合

 

&#0060;title&#0062;文章000&#0060;/title&#0062;


数値文字参照 (16進数)

16進数の入力フォーマットは、コード位置を「&#x」と「;」で囲みます。

文字実体参照(16進数)の入力例:<title>文章000</title>を入力したい場合

 

&#x3C;title&#x3E;文章000&#x3C;/title&#x3E;

 

全て覚える必要はないので、特殊文字があると言う事だけ頭に入れてわからない時だけ調べればいいと思います。

 

 

記号・特殊文字の文字コード表

 

よく使う記号

記号文字実体参照10進数16進数呼び方
&&amp;&#0038;&#x26;アンパサンド
©&copy;&#0169;&#xA9;著作権記号(コピーライト)
®&reg;&#0174;&#xAE;登録商標
&trade;&#8482;&#x2122;商標
"&quot;&#0034;&#x22;ダブルクォーテーション
'&apos;&#0039;&#x27;シングルクォーテーション
&nbsp;&#0160;&#xA0;ノーブレークスペース
<&lt;&#0060;&#x3C;小なり
>&gt;&#0062;&#x3E;大なり

 

記号一覧 −1

記号文字実体参照10進数16進数呼び方
¢&cent;&#0162;&#x00A2;セント
£&pound;&#0163;&#x00A3;ポンド
¤&curren;&#0164;&#x00A4;通貨記号
¥&yen;&#0165;&#x00A5;
¦&brvbar;&#0166;&#x00A6;縦破線
¨&uml;&#0168;&#x00A8;ウムラウト
ª&ordf;&#0170;&#x00AA;女性序数
«&laquo;&#0171;&#x00AB;二重山括弧(開始)
¬&not;&#0172;&#x00AC;否定記号
®&reg;&#0174;&#x00AE;登録商標
¯&macr;&#0175;&#x00AF;マクロン
°&deg;&#0176;&#x00B0;
±&plusmn;&#0177;&#x00B1;プラスマイナス
²&sup2;&#0178;&#x00B2;上付き数字の2
³&sup3;&#0179;&#x00B3;上付き数字の3
´&acute;&#0180;&#x00B4;鋭アクセント
·&middot;&#0183;&#x00B7;中黒
¹&sup1;&#0185;&#x00B9;上付き数字の1
»&raquo;&#0187;&#x00BB;二重山括弧(終了)
¼&frac14;&#0188;&#x00BC;分数1/4
½&frac12;&#0189;&#x00BD;分数1/2
¾&frac34;&#0190;&#x00BE;分数3/4
×&times;&#0215;&#x00D7;乗算記号
÷&divide;&#0247;&#x00F7;除算記号

 

記号一覧 −2

&bull;&#8226;&#x2022;ビュレット
&#8451;&#x2103;摂氏温度
&#8481;&#x2121;TEL
&#8544;&#x2160;ローマ数字1
&#8545;&#x2161;ローマ数字2
&#8546;&#x2162;ローマ数字3
&#8547;&#x2163;ローマ数字4
&#8548;&#x2164;ローマ数字5
&#8549;&#x2165;ローマ数字6
&#8550;&#x2166;ローマ数字7
&#8551;&#x2167;ローマ数字8
&#8552;&#x2168;ローマ数字9
&#8553;&#x2169;ローマ数字10
&#8554;&#x216a;ローマ数字11
&#8555;&#x216b;ローマ数字12
&lArr;&#8556;&#x21D0;二重矢印 (左)
&rArr;&#8558;&#x21D2;二重矢印 (右)
&hArr;&#8560;&#x21D4;二重矢印 (左右)
&larr;&#8592;&#x2190;矢印 (左)
&uarr;&#8593;&#x2191;矢印 (上)
&rarr;&#8594;&#x2192;矢印 (右)
&darr;&#8595;&#x2193;矢印 (下)
&harr;&#8596;&#x2194;矢印 (左右)
&crarr;&#8629;&#x21B5;黒リターン
&#9166;&#x23CE;白リターン
&#12849;&#x3231;括弧 株式会社
&#12850;&#x3232;括弧 有限会社
&#12851;&#x3233;括弧 社
&#12832;&#x3220;括弧1
&#12833;&#x3221;括弧2
&#12834;&#x3222;括弧3
&#12835;&#x3223;括弧4
&#12836;&#x3224;括弧5
&#12837;&#x3225;括弧6
&#12838;&#x3226;括弧7
&#12839;&#x3227;括弧8
&#12840;&#x3228;括弧9
&#12841;&#x3229;括弧10
&#12842;&#x322a;括弧 月曜日
&#12843;&#x322b;括弧 火曜日
&#12844;&#x322c;括弧 水曜日
&#12845;&#x322d;括弧 木曜日
&#12846;&#x322e;括弧 金曜日
&#12847;&#x322f;括弧 土曜日
&#12848;&#x3230;括弧 日曜日
&#9632;&#x25A0;黒四角
&#9633;&#x25A1;白四角
&#9670;&#x25C6;黒ひし形
&#9671;&#x25C7;白ひし形
&#9675;&#x25CB;白丸
&#9679;&#x25CF;黒丸
&spades;&#9824;&#x2660;黒スペード
&#9825;&#x2661;白ハート
&#9826;&#x2662;白ダイヤ
&clubs;&#9827;&#x2663;黒クラブ
&#9828;&#x2664;白スペード
&hearts;&#9829;&#x2665;黒ハート
&diams;&#9830;&#x2666;黒ダイヤ
&#9831;&#x2667;白クラブ

スポンサーリンク

よく読まれている記事

1

デザイン&クオリティ 時代の最先端を走り続けるために生まれ変わった伝統のデザイン 精緻に磨き上げられた、スクエアなフォルムとアイコニックなディテール 広くモダンに進化を遂げた、独創のインテリア そこにあるのは、時代の先端を走り続けるために、すべてが生まれ変わった伝統のデザイン   ...

2

  ・HAMANN Motor Sport社よりX5 G05 / X4 G02 / X3 G01とSUVモデルに続き、BMW X6 G06 M Sport用エアロプログラムが発表されました!日本での価格と納期はまだ未定ですが、エアロを装着した車両を見てみたいです。 G06モデルのエアロパー ...

3

コーナーの先に、驚きがある。 都市で暮らす喜びを味わい尽くす一台、MINI  3Door / 5Door。 MINI ならではのゴーカート・フィーリングに胸を躍らせ鋭いコーナーや狭い路地を軽快に、流れるように走り抜けるーその個性溢れるスタイルに、街中で視線を集めながら。 最新のMINI  Conne ...

4

Date : 1st. 2020-03-01 2020年の年内には日本でも発売されるだろうと言われているメルセデスベンツGLB 個人的には以前に発売されていたGLKを思い出すデザインで凄く好きなSUVらしさがある形だと思っています。メルセデス・ベンツGLBクラスは、現在販売されているGLAクラスとG ...

5

  2016年にフルモデルチェンジになった5代目W213 E-Class。 発売当初はメルセデスの最先端技術が搭載されていましたが、そんなW213 E-Classも2016年に発売されてもうすぐ4年を過ぎマイナーチェンジを迎えました。 新車価格が700万〜だった車も中古車市場では300万前 ...

6

  THE ICON REBORN アイコンは唯一無二である必要があると考えます。そして絶え間ない挑戦こそが新しいAventador を生み出したのです。 Miura、Islero、Countach、Urraco から続く、歴史的なランボルギーニの哲学は、新しい Aventador S C ...

7

Lorinserが新型Sクラス W223にホイールを装着した画像が公開されました。おそらくエアロパーツの開発も順調に進んでいる事でしょう( ̄▽ ̄) テレビで紹介!Oisixの美味しい野菜を配達で購入。 Lorinser Wheel for Mercedes-Benz W223  装着した画像が公開さ ...

-雑記ブログ
-

© 2023 輸入車カスタムパーツ調査室 Powered by AFFINGER5