HTML入門トレーニング

コンテンツに書式を設定する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLでコンテンツの書式を設定する方法について学びます。
講師:
08:01

字幕

このレッスンではHTMLで コンテンツのフォーマット 書式を設定する方法について学びます HTMLはマークアップ言語でその中に 含まれるコンテンツを定義するために タグを使ってマークアップをしていきます 実際にコンテンツを マークアップしていくためには タグを覚える必要がありますが その前にまずは基本的な構文について 覚えておきましょう サンプルファイルを使って テキストに対してフォーマット 書式を設定する例を示していきます 画面の左側ではサンプルファイルのHTMLを Brackets、コードエディターで 開いているところです 同じHTMLを画面の右側では クロームで開いています 少しテキストが小さく表示されていますので 分かりやすいようブラウザの機能を使って フォントサイズを大きくしておきます さて左側のエディタの中を見てみましょう bodyタグの中では 「私は何でしょう?」というテキストが 何もマークアップされず 単なるテキストとして入っています ブラウザではそれは通常の段落として レンダリングされているようです しかしこのテキストが一体何を示しているのか それはブラウザからは知ることができません それを知らせるためには HTMLで何らかのタグを使って マークアップをする必要があります ここでは仮に整形済みのテキスト ということを知らせるために preタグを使って マークアップをしてみましょう preタグはpreという綴りで タグを入力します タグの開始タグと終了タグで マークアップしたいコンテンツを挟みます この状態で保存し ブラウザをリロードしてみると このようにテキストが 整形された状態で表示されました この整形済みテキストの中では 半角スペースを入力しても そのスペースは一つの半角スペース あるいは複数の半角スペースとして ばらばらに認識されるようになります これが先程のように 何もマークアップされていない状態だったら どうなるでしょうか preタグを削除して 保存し ブラウザをリロードすると 「私は何」と「でしょう」の間にあった スペースが一つになっています これは通常のHTMLでは このように連続した半角スペースは 一つの半角スペースとして扱われるのですが 整形済みテキストの場合は 入力された複数の半角スペースを 別々の半角スペースとして認識するためです preタグをh4タグに変えてみましょう h4はレベルが4つめの見出しを示すタグです 半角スペースは削除しておきます 保存し リロードすると 文字が少し太く またサイズも大きく表示されました もしこの見出しのレベルを1 つまりh1タグに変えたら この文字サイズは もう少し大きくなるでしょう 逆に見出しのレベルを6 h6タグに変更すると このテキストのサイズは もう少し小さくなるでしょう この時に注意したいのが 表示するテキストの大きさを変えるために HTMLで定義するタグの意味を 変えてはいけないということです 例えばページの初めに表れる 見出しについてはレベルが1 つまりh1タグで マークアップされるべきですが その見出しのサイズを 小さく表示したいからといって h4やh6のタグを使っては いけないということです HTMLではあくまでそれに含まれる コンテンツに意味をつけますので それが実際にブラウザで どういう風に表示されるか どのような大きさ どのような色で表示されるかといった 見栄えに関する情報は全てCSSで定義します ここでタグのレベルを変えた時に ブラウザ側のフォントサイズが 変わっているのは あくまでブラウザ側で用意されている デフォルトの表示 デフォルトのCSSがその様な設定に なっているから ということです h4タグをいったんpタグに 変更しておきましょう 先程のHTMLはあくまで 意味をつけるためのタグである ということを思い出してみましょう ここでこの「何」という文字に対して 太字にしてみます 太字にするにはHTML5以前では bタグを使うというふうになっていました ここでbタグを使って「何」を囲って 保存し リロードすると この「何」という文字が少し太字で 表示されていることが分かります 今度はこの太字の部分を少し斜体 斜めに傾いた文字で表示してみましょう 同じようにbタグではなく iタグを使ってみます これもHTML5以前に斜体に表示するための タグと言われていたものです リロードすると「何」という文字の部分が斜体 斜めに表示されました これらのbタグやiタグといったタグは HTML5以前では そのコンテンツが何であるかという 定義付けとは別に このように見栄えを制御するための タグでもありました その後HTMLでは コンテンツの定義付けと見栄えを CSSに分離するという動きが進み このようにある特定の部分の テキストを強調したい場合は emというタグを使うことに HTML5から変更になっています このemタグではあるテキストの中で 一つのテキストを強調したい 一部分のテキストを強調したいといった場合に このemタグを使います このemタグを使うと 実際にブラウザ上ではテキストは 斜体に表示されています しかしこれはあくまでブラウザがもっている デフォルトの見栄え emタグに対するデフォルトの見栄えが 斜体というふうに設定されているだけです 裏側をみるとブラウザでは この「何」という文字が 全体のpタグで囲まれた部分の中で 重要な部分であるという意味を 把握できています これにより例えば HTMLを スクリーンリーダーで読み上げた時 きちんと強調を指定されたこの部分は 強調されて読み上げられたりします HTMLでコンテンツをマークアップする時は そのコンテンツをブラウザでどういう風に 表示したいのかという視点ではなく このコンテンツが何なのかという視点で マークアップする必要があります そのためにはそれぞれのタグが どういったコンテンツの定義付けという 意味を持っているのか それを把握しておく必要があるでしょう このレッスンではHTMLで コンテンツのフォーマット 書式を設定する方法について学びました

HTML入門トレーニング

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

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

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

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

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