HTML入門トレーニング

基本的なHTMLの構文

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
基本的なHTMLの構文について学びます。
講師:
10:53

字幕

このレッスンでは HTML の 基本的な構文について学びます ここで使うファイルは サンプルファイルの syntax.htm というファイルです 画面の左側では メモ帳 Windows標準のアプリケーションである メモ帳でサンプルファイルを開いています 画面の右側では同じ htm ファイルを Google Chrome で 開いています 現在 Windows を使っていますので メモ帳を使っていますが あなたが Mac をお使いの場合は 別のアプリケーションでも問題ありません 通常のテキストが編集できるエディタで このサンプルファイルを開きましょう これはつまり HTML が 「.htm」 または 「.html」 という拡張子を持つ 中身はただのテキストファイルである ということを示しています そのため HTML の編集には 特別なソフトは何も必要ありません テキストを編集できるソフトがあれば それで問題がないのです さて ここでは同じファイルを メモ帳とブラウザで開いていますので こちらのメモ帳で HTML に編集を加えて 例えば 今ここでは 「test」 という文字を入力しました そして保存をし 右側のブラウザで再読込みをすると こちらに変更が反映されるようになっています いったん 変更した文字列を 消しておきましょう こちらも再読込みしておきます それでは実際に HTML の構文を 書いていきましょう HTML ではそれぞれのコンテンツが 一体どういう意味を持つのか その文書構造を 「タグ」 と呼ばれるものを使って 「マークアップ」 指定をしていきます 例えば 今 HTML に含まれる このすべてのテキストは 一つの段落である ということが言えますので これに対して 「段落」 という意味を持つ p タグを指定してみましょう タグを入力するには その指定したいコンテンツの頭に 「<」 山形括弧を入力します そして このコンテンツが段落である ということを指定するためには HTML では p タグというものを 使いますので p タグを表す 「p」 の文字を 入力します そしてこのタグを閉じるために もう一つ 「>」 山形括弧を入力します これをタグの中でも 「開始タグ」 と呼びます つまりここでは 「p タグの開始タグ」 と呼ばれます この HTML のタグは 開始タグと終了タグを 一つのセットとして扱います 終了タグは コンテンツを指定したい 最後の箇所に入力をします 終了タグは 開始タグと同じように 山形括弧で始め その二文字目に 終了タグ独特の 「/」 スラッシュを入力します さらに終了したいタグの名前 ここでは p タグの 「p」 という文字を 入力して もう一度 山形括弧でタグを閉じます これは 「p タグの終了タグ」 と呼ばれます つまり タグは開始タグから始まり 終了タグで終わる というのが基本的なルールです 開始タグと終了タグの大きな違いは この 「/」 が入るかどうかです 開始タグには 「/」 がなく 終了タグには 「/」 があります そして 開始タグと終了タグで囲まれた間は このタグでマークアップをされた という意味になります ここでは この 「HTML uses」 という文字で始まる長いテキストが 「p」 一つの段落である という風に HTML 上で マークアップされたと言えます HTML ではこのように タグで囲まれたコンテンツと タグ自体 全体を指して 「要素」 と呼びます 英語では 「element」 と呼ばれます 今 メモ帳で選択している部分が p 要素 そしてこの部分が p の開始タグ ここが p の終了タグです ここまでの内容を保存して ブラウザをリロードしてみましょう 保存してリロードします 何も変わっていませんね これは HTML に含まれるテキストは ブラウザでは基本的に p 要素 段落である という設定になっているからです 仮にこの p 要素を 別の要素に変えてみましょう 現在は普通の段落として認識されていますので これら全体が見出しである というマークアップに変えてみましょう マークアップを変更する場合 山形括弧のこの中身の文字の部分だけを 変更すれば OK です ここでは見出し それもトップレベルの 見出しを定義するため 「h1」 と入力しましょう タグを変更する時は 開始タグだけではなく 終了タグも変更する これを忘れないようにしてください 保存し ブラウザをリロードしてみましょう すると文字が大きく表示されました これはブラウザの中で この HTML で指定されたタグが 「h1」 つまりトップレベルの見出しである ということを考慮して 大きなフォントサイズで表示する という風に解釈し 実際にこのように表示されているのです タグによってブラウザの表示が変わること これを理解しておきましょう それでは いったん 「p」 に戻しておきます タグは複数のものを 「入れ子」 ネストすることができます 例えばこの一つの長い段落の中に リンクを張ってみましょう リンクを張るには a タグを使います この p 要素の一部分に リンクを張りたいため この 2 つ目の文章 この文章に対してリンクを張ってみましょう 先ほどと同様に 指定したいコンテンツの頭の部分に タグを入力します リンクを示すのは a タグです そして山形括弧で前後を囲みます 開始タグを入力したら その指定したいコンテンツの最後の部分に 終了タグも入力します これで a タグが定義できました ここで注意したいのは 開始タグと終了タグが その親に対して きちんと入れ子になっているかどうかです ここでは a タグの親は p タグ という風に入れ子になっていますので a タグの終了タグが p タグよりも後ろに来ることはできません また タグによっては親子関係にできない つまり入れ子にできないタグもあります ここではその詳細には触れませんが タグというものは 基本的に このような構造で記述する ということを覚えておいてください ここでは a 要素というものを タグを使って表現しました リンクを張るためにはこれだけではいけません リンク先も記述しなければいけないからです ここで使うのが HTML における 「属性」 という機能です 属性は タグの名前の後に 半角スペースに続いて 定義します リンクを張る場合は リンク先を指定する href 属性というものを使いますので 属性の名前も入力します 属性には値を入力することができ 値を指定する場合は 記号の 「=」 に続いて 「" "」 ダブルクォーテーションで その値を囲います ここでは値を 私のホームページのアドレスにします ホームページのアドレスは http://ceroan.jp/ というアドレスですので この値を 「" "」 でくくります この新しく追加した部分 この部分が 「属性」 といわれるものです ここでは href 属性という属性に http://ceroan.jp という URL の値を指定しました これで保存して ブラウザをリロードすると この 2 つ目の文章の部分にリンクが張られました 実際にクリックすると動作しています このようにタグを 2 つ入れ子にすることで 大元の文章は段落 そしてこの中の内側の部分はリンク といった具合に 複雑な文書構造を 定義していくことができます このレッスンでは 一つ一つのタグの名前や 属性の名前について 覚えていく必要はありません 基本的な構文の書き方だけ 覚えていきましょう さらにタグは いくつでも入れ子にすることができます この最後の 「paragraph」 という文字列に対して もう一つタグを使ってみましょう ここでは重要性を示す strong タグを使います 同様に山形括弧で始め 名前の 「strong」 を入力し 山形括弧で閉じます これが開始タグです そして囲いたい最後の部分まで カーソルを持っていって 山形括弧で始め 終了タグの二文字目には 「/」 そしてタグの名前 「strong」 そして山形括弧 これで上書き保存をして ブラウザをリロードすると この 「paragraph」 という文字の部分だけ 強調性を示すように太字になりました HTML ではタグを使って テキストに対して マークアップをしていくことで それがウェブページの中で どういうコンテンツなのか ということを定義し 文書の構造を作っていくことができます このレッスンでは HTML の 基本的な構文について学びました

HTML入門トレーニング

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

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

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

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

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