HTML入門トレーニング

テキストを強調する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中で特定のテキストを強調するときの方法について学びます。
講師:
08:46

字幕

このレッスンではHTMLの中で 特定のテキストを強調する時の 方法について学びます 画面ではブラウザでサンプルファイルを 開いているところです HTMLでテキストを強調するためには 主に4つのタグを使います Boldタグ Strongタグ Italicタグ 強調タグの4つです HTMLの中にはこの4つのタグについての 詳しい説明が書かれています これらを一つずつみていきましょう まずエディタに戻り Boldタグを使ってみます 少し下にスクロールすると 先ほど紹介したように4つのタグが dt ddというタグを使って 定義されています これらの全体はdlというタグで マークアップされており これをHTMLでは定義リストと呼びます 定義リストはdtタグとddタグで構成され dtタグの中身は定義したい用語を ddタグの中身は定義したい用語の 説明を入れます ここではdtタグでマークアップされている タグの名前について Boldタグで マークアップをしていきましょう Boldタグは特定のタグの中で使いますので dtタグの中にbタグを入力します そしてマークアップしたいテキストを 開始タグと終了タグの間に入れます dtタグの外側にBoldタグが いかないように注意して下さい 同じように他のタグの名前についても bタグを入力していきましょう Strongタグをbタグで囲みます Italicタグについてもbタグで囲います そして強調タグという文字列についても bタグで囲います さらに下にスクロールすると ここでciteタグというタグについての 説明があることが分かります このciteタグについても同じように bタグを使ってマークアップをしておきます コードを保存しブラウザで確認してみましょう ブラウザに切り替えて リロードすると 実際にBoldタグ Strongタグ Italicタグ 強調タグ そしてciteタグという部分のテキストが 太字になっていることが分かります このようにBoldタグを使って テキストを太字にすることは 純粋に視覚的な表現を行うためだけのことです この太字になったテキストが 何か特別な意味を持ったり 他のテキストとの関連性を 示すものではありません Boldタグを使うと単にブラウザに対して このテキストを太字として表示して下さい というふうに指示しているにすぎません テキストを強調するには 他のタグを使う方法もあります ここではBoldタグ以外の Strongタグを使った 強調について紹介します Strongタグを使うとテキストに対して 太字にするだけではなく そのテキストが強い重要性をもっている ということを示すことができます コードエディタに戻りましょう この長いテキストの中で この「心配はいらない」という部分を 強調したいとしましょう この場合他のテキストに比べて この「心配はいらない」という部分を強調する という意味を使いますので Boldタグではなく Strongタグを使います Strongタグではタグの名前を strongと入力し マークアップしたいテキストの前後に 開始タグと終了タグを入力します コードを保存し ブラウザに切り替え リロードすると 先ほどのタグの名前やciteタグと同様に 「心配はいらない」というテキストの部分が 太字として表示されました ブラウザで見る限りは このタグの名前の部分も 「心配はいらない」というテキストも 全く同じの表示に見えます しかしHTMLではこちらはBoldタグで 単に太字として表示する こちらはStrongタグとして 他のテキストよりも強い重要性をもっている というふうに示しているわけです この違いには重要な意味があります 例えばスクリーンリーダーを使って このHTMLを読み上げると こちらのテキストについては 通常通り読み上げられ こちらの重要性を示すテキストについては 語句を強めて読み上げられる といった違いがあります このような違いはItalicタグと 強調タグにおいてもいえます コードエディタに戻って 先ほどの定義リストまでスクロールします Italicタグと強調タグは先ほどの BoldタグとStrongタグのように 意味を持つか持たないかという違いがあります 例えば文章のなかで特定の箇所 例えばここではこの「斜体」という 文字列に対して斜体を与えたい そして意味は特に持たせたくない という時には Italicタグ iタグを使います Italicタグはこのように iという文字列のみで開始タグと終了タグで マークアップを行います 同じようにこちらの文章の「斜体」という テキストも斜体で表示するため Italicタグで マークアップしておきましょう このように単に太字で表示したり あるいは斜体で表示したり といったことを行う BoldタグやItalicタグについては そのマークアップした箇所に 特別な意味を持たせず 単に表層的にそこを 太字であったり斜体であったり といった表示にするというタグです 逆にStrongタグや強調タグのように そのテキストを太字や斜体にしつつ かつそのテキストは重要である あるいは強調されている という意味を持つことになります このようにテキストを強調する時には 周りのテキストに対して そのテキストがどうあるべきなのか ということを考えながら マークアップすることが重要になります ここでは強調タグを使ってみましょう 少し下にスクロールして タグの意味の違いについて強調をしましょう 先ほどのBoldタグやItalicタグは このプレゼンテーションのため つまり言い換えると表層 表層的なものであるというふうに 言うことができます そしてもう一つの Strongタグや強調タグについては 論理的なものというふうに言うことができます この「表層的なもの」と 「論理的なもの」というテキストを 強調タグでマークアップしましょう 「表層的なもの」そしてもう一つは 「論理的なもの」です このようの文章の中で強調したい部分 周りのテキストよりも 強調したい箇所については emタグを使ってマークアップを行います このプレゼンテーションのためというのは 表層的なテキストというふうに言えます 保存してブラウザで表示して 再読み込みしてみると Italicが指定された箇所と 強調タグが指定された箇所は 見た目にはまったく同じ様に表示されています しかしブラウザの内部では こちらは単に斜体として表示するという指定 そしてこちらは強調タグを使って 他のテキストよりも強調されている ということを指定されている ということになります このレッスンではHTMLの中で 特定のテキストを強調する時の 方法について学びました

HTML入門トレーニング

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

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

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

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

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