HTML入門トレーニング

特殊文字を表示する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLで予約されている文字や、キーボードで簡単に入力できない文字や記号を使うための方法について学びます。
講師:
06:48

字幕

このレッスンでは HTML で予約されている文字や キーボードで簡単に入力できない文字や 記号を使うための方法について学びます 現在 画面ではコードエディターで サンプルファイルの HTML を開いているところです HTML の中にはこのように 「<」 山形括弧 左向きの山形括弧が入力されていますが ここは通常のタグを入力するためには 使われていませんので この山形括弧の後ろの部分が 赤く表示され 文法エラーになっていることがわかります この赤くなっている表示は 今使っているコードエディターの Brackets の機能です このような文法エラーは ブラウザーで表示した時に 表示の崩れの原因となる可能性があります 実際にブラウザーで表示してみましょう ブラウザーでこの HTML を開くと 特に問題なく表示されているように見えます しかし これは Chrome が 文法エラーを 補正しながら表示しているためです このような文法エラーを含む HTML は 予期せぬ表示になる可能性がありますので 修正をしてみましょう エディターに戻ります 修正が必要になるのは この山形括弧の箇所です この山形括弧のように HTML では あらかじめ決められた文字が予約されており この予約されていた文字を 通常のテキストの中で使うと このように文法エラーになってしまいます これを置き換えて表示するためのものが 文字実態参照です 文字実態参照を使うと ブラウザーが その文字実態参照の部分を 必要な文字に置き換えて表示してくれます 構文は本当に簡単なものです 文字実態参照を使うにはまず アンパサンド記号 「&」 で始まります この 「&」 の後に使いたい文字の名前 これを入力します ここでは左向きの山形括弧を入力したいので その山形括弧を表す文字である 「lang」 lang と入力します そして最後にセミコロン 「;」 です このように文字実態参照は 「&」で始まり 表示したい文字の名前を入力し 最後に 「;」 で終わります この一連の文字列が文字実態参照です 実際に保存して ブラウザーで表示してみましょう ブラウザーをリロードします このように 特に表示が変わっているわけではありません しかしブラウザーの内部では 先ほど入力した文字実態参照が この記号に置き換えて表示されているわけです そのため文法エラーもなくなっています コードエディターに戻りましょう 先ほど赤く表示されていた文法エラーの部分が 解消されていますね 少し下を見ると また別の文法エラーが 起きていることがわかります ここでは 「&」 を表示するために 「&」 そのままを 入力してしまっているため 文法エラーになっています この 「&」 もやはり HTML によって 予約されている文字だからです テキスト中に単に 「&」 を表示したい場合は この下にあるように文字実態参照を使います 「&」 で始めて 「amp」 と入力し最後に 「;」 これが 「&」 を表示するための 文字実態参照です さて この文章ではこの 「&」 の 文字実態参照について説明をしています しかしこの部分では 実際に入力する文字実態参照の文字列を 表示したいわけですが この 「&」 という風に書いてしまうと 文字実態参照が有効になり HTML 上では 「&」 のみが表示されてしまいます 実際に ブラウザー上に表示したいのは この 「&」 という文字列ですので この後に 文字実態参照の後に 文字を入力して 正しい文字列として表示されるようにします この頭の 「&」 から 「;」で入力されている部分は 文字実態参照として 「&」 に変換され その後ろの 「amp;」 という文字は 通常の文字として表示されます 保存して ブラウザーでリロードすると 括弧の中は 「&」 のみで その下の分は 「&」 と 「amp;」 という文字列で表示されています この他にも文字実態参照を使うと キーボードから簡単に入力できない 記号などを入力することもできます コードエディターに戻りましょう ここでは著作権マーク そして商標マークを 文字実態参照で入力してみましょう 著作権マークは 「copy」 という文字を使うと 文字実態参照で表示できます 商標マークは同じように 「trade」 という風に入力します これを保存し ブラウザーでリロードすると このように 「©」 や 「™」 に 置き換えられて表示していることがわかります このように文字実態参照を使うと 様々な記号を置き換えて 表示することができます しかし これは非常に多くの種類がありますので 一つ一つを覚えておくのは 大変です ここでは その一部をご紹介しましょう この Wikipedia への リンクを開いてみましょう Wikipedia の文字参照のページです このページの中には HTML で文字実態参照を使って 実際にどのような記号に置き換えられるか というリストが存在します 下の方にスクロールすると このように使える文字実態参照の一覧があり この文字を表示したい場合は このような名前を入力する という風に リストが存在しています 必要な記号は ここからコピーして使うとよいでしょう このレッスンでは HTML で予約されている文字や キーボードで簡単に入力できない文字や 記号を使うための方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。