• HOME > 
  • HTML > 
  • HTMLのdivタグの役割と使い方【spanタグとの違い】

HTMLのdivタグの役割と使い方【spanタグとの違い】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2023年07月10日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

divタグとは?

divは、タグそのものとしては何の意味も持ちません。「division」の略で「分割」を意味し、主に複数の要素をひとかたまりのグループとして扱いたいときに使用するタグです。

CSSを使ってWebページのレイアウトを作り上げるためには欠かすことのできない重要なタグです。

例えば見出し(h2)とテキスト(p)に背景色をつけようとしたとき、divを用いなければh2・pタグそれぞれにスタイルを指定するしかありませんが、divを使えれば次のようなに表示することができます。

divの用途1

また、横並びのレイアウトを作る際にもdivを使って複数の要素をひとかたまりにしておく必要があります。

divの用途2

spanタグとの違い

spanも同じように意味を持たないタグですが、こちらは文中などで一部分を強調させたいときなどに使用します。

divとspanの用途の違い

なおspanはインラインレベル要素なので前後に改行は入りませんが、divはブロックレベル要素なので前後に改行が入ります。

divタグの使い方

divは開始タグと終了タグで囲んで使用します。

divの使い方

ブロックレベルの要素なので自動で改行が入ります。

divには自動で改行が入る

入れ子にすることも可能です。

divの使い方入れ子

クラスやIDをセレクターにしスタイルを設定していきます。下の例では、見出しとテキストを中央揃えにし、枠線と背景色・ドロップシャドウを設定しました。

HTML

<div class="my-box">
    <h2>見出しタイトル</h2>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

CSS

.my-box{
    padding:10px;
    margin:50px;
    text-align:center;
    border:solid 2px #d43333;
    background:#e9e333;
    box-shadow:5px 5px 5px #999;
}

プレビュー

divの使い方スタイルを設定する例

divを使って横並びレイアウトを作る

横並びレイアウトを作る手段はいくつか存在しますが、今回はCSSのflexを用いた方法をご紹介します。

横に並べるかたまりをdivで用意し、それらを更にdivでひとまとめにします。外側のdivのdisplayプロパティをflexにし、内側のdivにflex-basisで横幅を設定すれば完成です。

HTML

<div class="my-flex">
    <div class="my-box">
        <img src="image_none2.png" alt="サンプル画像">
        <h2>見出しタイトル1</h2>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <div class="my-box">
        <img src="image_none2.png" alt="サンプル画像">
        <h2>見出しタイトル2</h2>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <div class="my-box">
        <img src="image_none2.png" alt="サンプル画像">
        <h2>見出しタイトル3</h2>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
</div><!--end my-flex-->

CSS

.my-flex{
    display:flex;
    flex-wrap:wrap;
}
.my-flex .my-box{
    flex-basis:calc(100% / 3 - 10px);
}

プレビュー

divを使った横並びレイアウトの例

まとめ

以上がHTMLのdivタグの使い方です。冒頭にも述べたように意味を持たないタグでありながら使用頻度の多く重要なタグです。

レイアウトを作る上で自由に活用できるdivはなくてはならない存在です。

広告
広告

関連する記事

サムネイル

HTMLのpicture要素とsourceタグの使い方【レス……

2024年11月07日
picture要素を使った画像の表示について備忘録としてまとめます。 picture要素とは? HTMLのpicture要素は、様々な画面サイズやブラウザに合わ […]
サムネイル

video要素とsource要素で画面サイズに応じて読み込む……

2024年09月19日
最終更新日:2024年11月07日
HTMLのsource要素とは? HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素で […]
サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

HTMLのinputのdateで日付の入力欄を作る【初期値や……

2023年10月01日
最終更新日:2023年09月28日
HTMLのinputタグのtype属性にdateを指定すると、フォームなどに日付の入力欄を設置することができます。
サムネイル

ブラウザキャッシュを回避するCache Bustingの方法……

2023年09月01日
Cache Busting(キャッシュバスティング)とはキャッシュを利用せずに読み込みするように指定することです。
サムネイル

HTMLのdatalistタグの使い方【文字入力とプルダウン……

2023年08月08日
HTMLのdatalistは、テキストボックスとセレクトボックスを組み合わせたような入力欄を作ることができるタグです。一見普通のテキストボックスですが、クリックすると用意した入力候補が表示されます。
サムネイル

HTMLでラジオボタンを作成する方法【初期値の設定・チェック……

2023年08月08日
HTMLのinputタグのtype属性にradioを指定すると、フォームなどにラジオボタンを設置することができます。複数の選択肢の中からどれかひとつをユーザーに選んでもらいたい時に使用します。