HTML入門トレーニング

div要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
明示的に意味付けをせず、コンテンツをグルーピングしたり、構造化したりするときに使うdiv要素について学びます。
講師:
09:02

字幕

このレッスンでは明示的に意味付けをせず コンテンツをグルーピングしたり 構造化したりする時に使う div 要素について学びます HTML5 が登場する前は div タグはページ構造を構築するために しばしば使われてきました この頃 div タグは 基本的にはコンテンツを分割するために使用し class または id 属性によって コンテンツの意味付けを行っていました HTML5 でも div タグは 依然としてコンテンツを構造化する際の 選択肢になります 画面ではブラウザーで W3C が勧告している HTML5 の仕様書の中の div 要素に関する詳細ページを 開いているところです 少し下にスクロールすると div 要素に関する概要が書いてあります その内容を紹介しましょう div タグは コンテンツをグループ化するための要素で それが他のセクション関連要素との 大きな違いです つまり div 要素は全く特別な意味を持ちません div 要素は親要素の子である という意味のみを持ちます class 属性などと併用して 連続した要素をグルーピングするために マークアップする要素です div タグは基本的に 「匿名グループ要素」と呼ばれます 匿名のタグです 何の意味も持ちません 単に他の要素 タグをグルーピングするのみです これを行う意味はあるのでしょうか この概要が書かれた部分の下の Note には div 要素は他の要素が適切でない時の 最後の手段として使うことが奨励されている と書かれています つまり もしそのコンテンツが div 要素の代わりに 別の要素でマークアップできるのであれば そちらを優先すべき ということです div 要素はあくまで 他の要素が使えない時の 最後の手段です もし マークアップ上で グルーピングする必要がある場合に そのコンテンツに意味が付けられなかったら その時初めて div タグでマークアップします これが div 要素に関する概要です それでは実際に サンプルファイルを見ながら div 要素について考えていきましょう すでにブラウザーの別のタブでは サンプルファイルの HTML を開いています ここには「私の好きなこと」として 好きな本や映画などが書かれており 好きな本の欄には本のタイトル 著者名 そして簡単な概要が 1 セット 2 セット 3 セットあります この部分について div 要素で グルーピングをしてみましょう コードエディターで 同じ HTML を開きます コードエディターに切り替えました 先ほどの本のタイトルの部分まで スクロールしましょう 該当のコードはこの部分です ここをよく見ると 本のタイトルは h5 要素で そして著者名と概要はそれぞれ 別の段落 p 要素で マークアップされていることがわかります そのため 1 つのセットは h5 要素と 2 つの p 要素で 構成されています これを一つ一つグルーピングしていく 理由があります 一つは これらを一つのセットとして グルーピングしたいから そして もう一つは このコードの上に 理由があります ここではいくつかのスタイルシートの コードがあります 詳細については説明しませんが この book という class を 適用した要素に 様々なスタイリング 視覚表現を与える という命令が書かれています div 要素を使うと複数の箇所に このようなスタイルを均等に 全く同じように適用することができます 実際に div 要素を作成してみましょう 先ほどの div 要素として グルーピングしたいブロック それは と の 2つ これを一つのセットとして表現したい ということでした 実際に ここにテキストを入力していきます div タグを作成し 見出しと 著者名 概要を くくります わかりやすいように インデントしておきましょう その下についても同じように div タグを追加し 著者名と概要を div タグの開始タグと終了タグで くくります 最後の要素も同じように div タグでくくります これで 3 つの本がそれぞれ div タグでグルーピングできました 一旦保存し ブラウザーに切り替えて リロードしてみると 見た目は何も変わっていません しかし エディターで HTML を見ると それぞれの本は div タグで グルーピングされている ということがわかります これにより id 属性あるいは class 属性などを使って スタイリングを適用できます id 属性はこのウェブページの中で 一つの値だけが存在できる属性です 仮にこの div 要素が一つだけであれば id 属性を使ってスタイルを定義するのが 正しいでしょう しかし ここでは同じような本のグルーピング div 要素が複数回出てきます そのためここでは class 属性を使います class 属性は同じウェブページの中で 何度も同じ値を使える属性です これを使って先ほど定義してあったスタイルを この div 要素 それぞれの div 要素について 適用してみましょう class 属性を使うには このタグの中に class という属性を追加し その値に指定したい class の名前を 入力します すでにこの HTML の冒頭で book という class が定義されていました この冒頭の 「.」 という記号は この book という名前が class であるということを示しています そこでこの div 要素の class 属性の値に book と入力します 同じようにこの class を 他の div 要素にも適用していきます class 属性は id 属性と違って 同じウェブページに 何度も同じ値が出現して構わない そういう属性です またこれにより この div タグが book であるという意味を付けることも できています このように div タグ自身は 意味を持ちませんが id 属性や class 属性を 使うことによって このグルーピングされたコンテンツが 一体何であるのか ということを間接的に意味付けられます これで それぞれの div タグについて スタイルシートが適用できましたので 保存し ブラウザーに切り替え リロードしてみましょう 先ほどとは 見た目がずいぶん変わっています 本のタイトル 著者名 概要が一つのグループとして表現されています 背景には青い矩形が表示されていますね そして一つのグループ もう一つのグループ 三つ目のグループと それぞれの div が 独立したグループとして表示されています 必要であれば CSS を使って 例えば 本の表紙画像を表示したり といったことも可能です このように div タグを使うと 非常に柔軟にそのコンテンツを グルーピングしていくことができます 内容は自由にすることができますし class 属性や id 属性を使って その div のコンテンツに対して 意味を付けることもできます これはいわば HTML のタグを 拡張できるタグ とも言えます 例えば 今回定義したような book つまり本を表すようなタグは HTML5 にはないからです このように 他のセクション関連の要素などで 意味付けができない しかしグルーピングしたい といった場合は div 要素を使って マークアップをしましょう このレッスンでは 明示的に意味付けをせず コンテンツをグルーピングしたり 構造化したりする時に使う div 要素について学びました

HTML入門トレーニング

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

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

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

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

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