HTMLのdivタグとは？使い道がわからない人向けに解説！

2024年3月1日

侍テック編集部

この記事ではHTMLのdivタグを使う方法について解説します！

divタグはサンプルコードや実際のコードでもとても良く見るタグですが、何に使われるかがよくわからないという初心者の方も多いのではないでしょうか。この記事では、

divタグの使い方を知りたい。
spanタグとの使い分けをしたい。

といった方に向けて、

divタグの使い方
spanタグとの違い（ブロック要素、インライン要素の違い）
divタグで横並びのレイアウトを作る方法

について解説していきます。易しいサンプルコードも掲載していくのでぜひご覧ください！

divタグとは

まずはdivタグとは何かについて見ていきましょう。divタグはそれだけでは意味を持ちません。しかし、囲った部分をブロック要素としてまとめて扱うことができるようになるタグになります。

pタグであれば段落を区別するためのタグで、h1タグであれば見出しを作るためのタグになるのですが、divタグはそれ単体では意味を持たない特殊なタグです。

囲った部分をブロック要素としてまとめて扱うことができるので、CSSを使ったレイアウトでも重宝します。この記事ではdivタグを使ったレイアウトの方法についてもあとで見ていきましょう。

spanタグとの違い

解説してきたdivタグと同じく、単体では意味を持たないタグの一つにspanタグもあります。こちらのコードをご覧ください。

<style>
    .block {
        background-color: blue;
    }

    .inline {
        background-color: red;
    }
</style>
<html>
    <div class="block">こんにちは。</div>
    <span class="inline">こんばんは。</span>
</html>

実行結果

「こんにちは」という言葉はdivタグで区切って、「こんばんは。」という言葉はspanタグで区切りました。ここで必要になる知識が、ブロック要素とインライン要素の違いです。

ブロック要素とインライン要素の違い

それではdivタグとspanタグの違いについてを知るために、ブロック要素とインライン要素の違いについて知っておきましょう。

ブロック要素

ブロック要素はレイアウトの一つのまとまりとして扱われる要素です。先程の実行結果のように、divタグを使った部分はレイアウトが詰まった一つの箱として扱われるイメージです。

このブロック要素ではmargin、paddingなどのレイアウトやwidth、heightなどのサイズも自由に決めることができます。このブロック要素は追加すると基本的には縦に並んでいくのですが、これを横に並べる方法は後ほど紹介します！

インライン要素

インライン要素は行の一部（インライン）として扱われる要素です。先程の実行結果のように、spanタグを使うと文字の部分だけ、色が変わりましたね。

このspanタグではwidth、heightなどのサイズの調整ができないという点に気をつけましょう。spanタグは追加していくとブロック要素とは違って、基本的には横に並んでいきます。spanタグの詳しい使い方についてはこちらの記事をご覧ください。

HTMLのspanタグとは？基本的な使い方についてわかりやすく解説

更新日：2024年3月1日

divタグの使い方

それでは基本的なdivタグの使い方を見ていきましょう。といっても先程のサンプルコードと実行結果で、なんとなくは分かって頂けてると思うのでここではdivタグを使ったレイアウトについて簡単に解説していきます。

こちらのコードをご覧ください。

<style>
    .block {
        background-color: blue;
        width: 50%;
    }
</style>
<html>
    <div class="block">こんにちは。</div>
</html>

実行結果

このコードでは先程のサンプルコードから「width: 50%」を追加しました。これを追加することで画面の幅が、実際に実行してウィンドウのサイズを変えても常に50%になることが分かると思います。またこちらのコードをご覧ください。

<style>
    .block {
        background-color: blue;
        width: 50%;
        margin: 0 auto;
    }
</style>
<html>
    <div class="block">こんにちは。</div>
</html>

実行結果

今回は「margin: 0 auto;」を追加してブロックを中央に持ってきました。marginでは上下左右の幅を決めることができるのですが、今回は上下の幅を0に、左右の幅をautoにして中央に持ってきました。

今回はブロックを中央に持ってきたので、文字はそのまま左端にある状態ですね。divタグなどのブロック要素のレイアウトに必須なmargin、paddingについてはこちらの記事を参考にしてみてください！

CSSのmarginとは？余白を指定するpaddingと何が違うのかまで徹底解説

更新日：2024年3月1日

CSSのpadding徹底解説！marginとの違いとは？

更新日：2024年3月1日

divタグで横並びのレイアウトを作る方法

今回はさらに初心者が悩みやすいdivタグなどのブロック要素で横並びのレイアウトを作る方法について見ていきましょう。

今回紹介するのは比較的最近のブラウザで使えるようになった、FlexBoxというCSS3の新機能を使ったものです。こちらのコードをご覧ください。

<style>
</style>
<html>
    <div class="content">
        <div class="content_item">アイテム1</div>
        <div class="content_item">アイテム2</div>
        <div class="content_item">アイテム3</div>
        <div class="content_item">アイテム4</div>
        <div class="content_item">アイテム5</div>
    </div>
</html>

実行結果

今回はこの縦並びのアイテムを横並びにしてみましょう。こちらのコードをご覧ください。

<style>
    .content {
        display: flex;
    }
</style>
<html>
    <div class="content">
        <div class="content_item">アイテム1</div>
        <div class="content_item">アイテム2</div>
        <div class="content_item">アイテム3</div>
        <div class="content_item">アイテム4</div>
        <div class="content_item">アイテム5</div>
    </div>
</html>

実行結果

今回はそれぞれのアイテムの親クラスとなるcontentクラスに「display: flex」という設定をしただけで横並びのレイアウトを作ることができました。しかしまだ、これを設定しただけではそれぞれのアイテムとの間隔や並び方が完璧ではありません。

FlexBoxのレイアウトなどについての詳しい解説はこちらの記事でぜひ確認してみてください。

CSSのFlexboxとは？横並びレイアウトの新定番になるかも！

更新日：2024年3月29日

HTMLだけで好条件の仕事獲得はできる？

HTMLはウェブサイト制作をする上で習得必須スキルですが、それだけでは案件数は少なく、単価の高い案件も取りづらいです。

実際にクラウドワークスでも以下のように、お客様のご要望に応えるためにも複数の技術の習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト（1ページあたり単価）・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript（AJAX）を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用：CrowdWorks