2020.01.27SHAREツイートシェアはてブLINEPocket「<div>タグとは何か?」と質問されたらはっきりと答えられる自信はありますか?本記事では、<div>タグの意味から始まり、使い方、classとidの違いなどにも解説します。<div>タグの使い方を解説する際には、HTML&CSSのコードを用いて解説します。コピペで動かせるので、実際に自分で手を動かしてみてください。<div>タグWebサイトのレイアウトを決定する際に必須のタグです。囲んだ要素をグループ化するタグHTMLには、段落を表す<p>タグや見出しを表す<h1>タグなど数多くのタグがあります。これらのタグの一つである<div>タグは、他のタグとは違い<div>タグ単体では意味を持ちません。<div>タグは囲んだ要素をグループ化する役割を持ちます。<div>タグはHTMLの各要素をグループ化することで、Webサイトのレイアウトを構成する際に使用したりもするので、非常に重要なタグの一つとなっています。Webサイトのレイアウトを構成する際に<div>タグを使う、といきなり説明されてもイメージがしにくいでしょう。そこで、こちらのサイトを例にとって説明したいと思います。一般的なWebサイトの一つですが、HTMLでこのページを書く際には<div>タグを使って以下のようなグループに分けて作業をします。<div>タグのclass属性に名前をつけることで、それぞれのグループにグループ名をつけることが可能です。(詳しい使い方は次節以降で解説するので、今は読み飛ばしてもらって構いません。four-generationのように3つのグループに分けています。このようなグループ分けによりコードが書きやすくなったり、CSSでデザインをしやすくなるというメリットがあります。大枠のレイアウトを作るだけではなく、細部のデザインも<div>タグごとにグループに区切って行います。同じサイトから具体例を紹介します。ここからはGoogleChromeのデベロッパツールを使用します。Chromeで開いたページ上で右クリックし、[検証]を選択。IWindows:F12で開くことができます。Chromeをお使いの方は、ぜひお手元の環境でも試してみて下さい!実際にデベロッパツールを使用すると以下のような画面が得られます。(左側が普段表示されているブラウザでの表示で、右側が対応するHTMLです。)サイト上部のメニューバーがどのようなHTMLコードで記述されているかを確認してみましょう。メニューバーを構成するHTMLを赤く着色しています。メニューバーとしてグループ化した枠の中に個々のメニューを表すコード書いていることを確認して見ましょう。先程の赤枠の中に黄色で着色してある部分が、メニューを表すコードです。バーの右側部分に「無料相談をしてみる」というリンクがあります。この部分を示す<a>タグで記述されたコードが、下の図の赤枠のなかで青で着色された部分のコードです。これも、メニューバーを示す<div>タグの中で書かれていることを確認して下さい。細部のデザインも<div>タグを使用すれば、グループ化して効率的にコードを書けるということが確認できました。これから、<div>タグの使い方を実際にHTMLコードを見せながら丁寧に説明していきます。コードはコピペで動くので、ぜひご自分のパソコンでも実行しながら記事を読んでみて下さい。divタグの使い方<div>タグを使ってグループ化する際に抑えておきたいポイントはたったの2つです。<div>タグで抑えておきたい2つのポイントdivタグでグループ化したい要素を囲むclassを使ってグループに名前を付けるあとは、グループ化した要素にCSSで自分好みのデザインを施すだけです。実際に上の2ステップを再現したHTMLのコードで、<div>タグの使い方を見ていきましょう。具体例で学ぶdivタグの使い方こちらがHTMLのコードです。redというテキストそれぞれdivタグで囲み、classを用いて「Green」「Yellow」「Red」というグループ名を付けました。</div></body></html>ブラウザ上での表示画面これでもグループ化はできています。これではわかりにくいでしょう。そこで、それぞれのグループにCSSで幅(width)と高さ(height)とグループ名が対応する色と同じ背景色を与えてみましょう。red;}ブラウザ上での表示画面<div>タグによるグループ化が視覚的にイメージしやすくなったのではないしょうか。(CSSコードは<div>タグでグループ化した領域の高さを100pxにし、幅を画面いっぱいに広いげるという意味を持ちます。)<div>タグはこのグループ化を用いて、Webページのレイアウトを構成する際にも使用されます。繰り返しになりますが、HTML&CSSにおいて非常に大きな役割を持つ重要なタグの一つです。<div>タグの使い方をある程度理解した後は、CSSを勉強ことをオススメします。HTMLだけでは色がなく、味気のないWebページになってしまいます。CSSを勉強するときに役立つ記事を貼っておくので、気になる方はぜひ読んでみてください。CSS(スタイルシート)の書き方【初心者が5ステップで分かる基本文法】align属性をしてして要素を左右に寄せる方法divタグでグループ化した要素はalignという属性を指定することで、囲んだ要素を左右や中央に寄せたりすることが出来ます。先ほど紹介したコードを使って、3つのテキスト「green」「yellow」「red」をそれぞれ左・中央・右に寄せてみましょう。red</div>ブラウザ上での表示画面classとidの使い方divタグで囲んだ要素にグループ名を与える方法は2つあります。classとidの使い方classによる命名idによる命名classによる命名の仕方は間<div>タグの使い方で説明しているので割愛します。idによる命名の仕方idによる命名もclassとほとんど変わらないので、理解しやすいと思います。先ほど掲載したコードではclassを用いてグループ名をつけていますが、これをidで命名しているHTMLのコードがこちらになります。red</div>始めのHTMLファイル(sample.html)の各<div>タグ内のclassをidに変更しているだけです。次にCSSのコードがこちらになります。red;}classで命名したグループはドット(.)で参照してましたが、idで命名したグループはシャープ(#)参照します。(CSSの変更点もこれだけです。)ブラウザ上で表示される結果は全く変わらないので掲載しません。(コピペで動くので気になる方はご自分のPCで実行してみて下さい。)classとidの違いここからは今までの内容より少しだけ難しくなってきますが、丁寧に解説するので安心してついてきてください。これまでの説明ではまるでclassとidは同じもののように思えてしまいます。それは誤りでclassとidは根本的な違いがあります。W3Cが提供しているHTMLの仕様書ではclassとidは以下のように説明されています。(平易な日本語に訳しています。)classとidclass:要素にグループ名を与える。複数の要素に同じclass名をつけることが可能。(複数のグループ名を与えるときはグループ名をスペースで区切ぎる。:要素に名前を付ける。この名前は文章の中で一意(唯一無二)であり、重複はしてはいけない。Consortium」の略。Web技術の標準化を行う非営利団体。複数回登場するかという点だけではclassとidの違いを説明するには不十分です。classとidそれぞれの語源を把握しましょう。点を踏まえて、次の様にclassとidの命名の一例を示します。id="hamu-tarou">ハム太郎</div></div>animals(動物)とcat(猫)、dog(犬)、hamster(ハムスター)はどれもグループ名として扱えるのでclass、「ポチ」「ニャン」「ハム吉」などはそれぞれの固有の名前を示しているのでidで管理しています。いま、それぞれの包含関係は上の図のようになっています。枠で囲えるものはclass、点で表すものはidで命名するという考え方でも分かりやすいかもしれません。classとidの違いを厳密にこだわる必要はないです。HTML&CSSを学び始めたような入門者の方や勉強のために個人で書くだけならそこまでこだわる必要はありません上の図でいうと何を枠ととらえ、何を点ととらえるかは状況や人によって違います。creature(生き物)、animals(動物)、human(人間)をグループとみなした場合には、dog(犬)やcat(猫)を点とみなすことが可能になります。考えるときりがないので、2つの使い分けについては開発チームごとに独自の基準を設けたりします。これまでの解説を一通り理解出来たら、下の表だけは頭に入れて記事を読み進めてしまいましょう。「複数命名」というのは、class属性に2つの名前を与えることを表します。「重複命名」というのは、異なる要素に同一の名前を与えることを表します。ブロック要素とインライン要素<span>タグも<div>タグと同じように、このタグ単体では意味を持ちません。いうようにスタイルを適応したい要素をタグで囲んで使います。以上の点から、<div>タグと<span>タグはよく似ているので混同することが多いです。<div>タグと<span>タグの主な違いは以下の2点です。<div>と<span>の2つの違い<div>タグで囲んだ要素は前後に改行が入るが、<span>タグでは入らない<div>タグで囲んだ要素はCSSで幅(width)や高さ(height)が調節できるが、<span>タグではできないどうしてこのような違いが生まれるのでしょうか?それは、<div>タグで囲んだ要素はブロック要素であることに対し、<span>タグで囲んだ要素はインライン要素であるという違いがあるからです。(少し難しく言うと、CSSのdisplayプロパティがblockであるかinlineであるかという違いがあります。)ブロック要素は前後に改行が入り、幅や高さを調節することができます。インライン要素は改行されず、幅や幅や高さを調節することができません。ブロック要素とインライン要素、CSSのdisplayプロパティについて詳しく知りたい方はこちらの記事を参考にしてみて下さい。CSSのdisplayで要素を指定する方法【初心者に優しい解説】spanタグについて使い方などを詳しく知りたい方はこちらの記事をオススメします。【参考】<section>タグと<article>タグ冒頭では、<div>タグを「囲んだ要素をグループ化するタグという説明をしました。これから紹介する<section>タグと<article>タグも「グループ化」という点では<div>タグと似ています。<div>タグを理解するための必須項目ではないので、ここまで読み進めて少し疲れたという方は読み飛ばしてもらっても構いません。<section>タグ<section>タグは意味的につながりのある見出しをグループ化するときに使います。意味的につながりのある見出しをグループ化する事ができます。<article>タグ<article>タグは、サイトのコンテンツで独立しているものをくくる際に使用します。<article>タグを使用する際の判断基準は、<article>タグで囲んだ要素が独立してコンテンツとして成立するかどうかです。<article>タグの使い方まとめ今までの解説を振り返って、<div>タグ・<section>タグ・<article>タグの3つの使い方を簡易的にまとめておきます。<div>・<section>・<article>の使い方<div>タグ:class名を用いてグループ化し、Webページのレイアウトを構成する<section>タグ:文書の中でつながりのある見出しをまとめ><article>タグ:文書の中で独立しているコンテンツを囲むまとめ最後に、<div>タグを理解するためのポイントをまとめてみましょう。本記事のまとめ:<div>タグのポイント<div>タグは要素を囲んでグループ化するグループ化した要素にclass名で名前を付ける記事の中で一意に定まる唯一無二のものにはidで名前を付ける<div>タグは主にWebページのレイアウトを決める際などに使うこの4点を抑えておけば<div>タグを理解したといっても良いでしょう。WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!「未経験だから不安...」、「転職できるんだろうか...」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。WEBCAMPを運営しています。人生が変わるほど「グッとくる」成長体験を、プログラミング学習を通してお届けしています。【元自衛官】の人生を変えた半年!エンジニアへの道のり。WEBCAMPで安心してエンジニア転職を目指そう「スキルがないし...」「失敗したくないし...」カウンセラーがあなたのキャリアを真剣に考え、ご相談に乗ります。