HTMLのdivタグでブロックレベルの要素を作成する方法

    • このページをはてなブックマークに追加

    公開日:2016年08月24日 最終更新日:2019年10月15日

    HTMLで「divタグ」を作成する方法について解説します。「divタグ」の基本的な書き方から、CSSを適用して、テキストの色、特定領域の背景色の変更、それから「divタグ」のサイズを変更する方法を説明します。「divタグ」とCSSを用いて統一感のあるデザインや配置を作成してみましょう。

    1. 「divタグ」の基本

    1.1. 「divタグ」とは?

    divタグ」の"div"は「Division(区分)」の略です。タグそのものに特定の意味はありません。見出しの「hタグ」や段落を意味する「pタグ」などを「divタグ」で囲む事で、ブロックレベルの要素を作成します。ブロックレベルの要素とは、改行や他の段落などを含むまとまった範囲のことを指します。
    「divタグ」で囲まれた範囲には四角い領域(ボックス)が生成されると考えるとよいでしょう。

    ▲ページトップへ戻る

    1.2. 「divタグ」でブロックレベルの要素を作成する

    まずは、段落タグを「diタグ」で囲み、ブラウザーでどのように表示されるか確認してみましょう。サンプルコードの「div.html」をローカルPC上に保存して下さい。ファイルの保存形式はmetaタグにあわせて"uft-8"で保存します。

    ●div.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-divタグの使い方</title>
    <style></style>
    </head>
    <body>
    	<p>bodyのテキストです。</p>	
    	<div>
    		<p>このテキストは「divタグ」で範囲の指定をしています。</p>
    		<p>グループ化したい範囲をブロックレベルで指定します。</p>
    	</div>
    </body>
    </html>

    3つの段落(p)タグを作成し、2、3段落目を「divタグ」で囲います。

    ●ブラウザーの表示

    ブラウザー上の見た目は、1つ目の段落タグと「divタグ」で囲った段落タグは同じです。「divタグ」は単にブラウザーに、ブロック領域があるという事を教えるだけですが、この範囲にCSSで様々なスタイルを付ける事ができます。

    ▲ページトップへ戻る

    1.3. CSSで「divタグ」のスタイルを指定する

    先程作成したサンプルコードの「div.html」に、CSSを追加してみましょう。

    ※CSSは通常外部ファイルとして保存することが推奨されています。例では分かりやすさを優先し、HTML文書内に埋め込んであります。

    ●div.html

    <!DOCTYPE html>
    ・・・省略・・・
    <style>
    body {
    	font-family: "メイリオ", meiryo, sans-serif;
    	}
    div {
    	color: #006DD9;
    }
    </style>
    </head>
    <body>
    ・・・省略・・・
    </html>
    

    HTMLヘッダー内の<style>~</style>の中に、「divセレクター(10~12行目)」を記述し、特定範囲のテキストを青色(color: #006DD9;)で装飾します。

    ●ブラウザーの表示

    「divタグ」で指定した範囲のみテキストが青くなりました。

    ▲ページトップへ戻る

    1.4. CSSで「divタグ」のサイズを変更する

    「divタグ」のサイズを変更することもできます。「divセレクター」に「widthプロパティ」と「heightプロパティ」を追加してみましょう。

    ●div.html

    <style>
    ・・・省略・・・
    div {
    	color: #006DD9;
    	width: 400px;
    	height: 100px;
    }
    </style>
    </head>
    <body>
    	<p>
    		bodyのテキストです。色やサイズの指定はしていないのでテキストは黒色、
    		16pxの大きさで表示されます。
    	</p>	
    	<div>
    		<p>このテキスト範囲はサイズを指定をしています。
    		大きさは、幅(width)が400px、高さ(height)100pxにしました。
    		設定しているサイズに合わせて文字が折り返されます。
    		</p>
    	</div>
    </body>
    

    ●ブラウザーの表示

    「divタグ」で囲まれていない段落タグのテキストが、ウィンドウの大きさに合わせて折り返されるのに対して、「divタグ」で囲まれたテキストは、幅400pxで折り返されます。

    ▲ページトップへ戻る

    1.5. CSSで「divタグ」の背景色を変更する

    どの範囲が「divタグ」で囲まれたブロック要素か分かりにくいので、背景に色をつけてみましょう。「divセレクター」に「background-color」プロパティを追加します。

    ●div.html

    
    div {
    	color: #006DD9;
    	width: 400px;
    	height: 100px;
    	background-color: #aaa;
    }

    ●ブラウザーの表示

    背景色を追加した事で「divタグ」の範囲が分かりやすくなりました。
    また、透過処理された画像(img/star.png)を挿入してみると指定された範囲内に画像と背景色が表示されます。

    ●div.html

    
    div {
    	color: #006DD9;
    	width: 400px;
    	height: 100px;
    	background-color: #aaa;
    	background-image: url(img/star.png);
    }

    ●ブラウザーの表示

    ▲ページトップへ戻る

    2. divタグのclass属性で異なるスタイルを適用する方法

    「divタグ」は、class属性id属性と共にを使うのが効果的です。「divタグ」で指定した範囲に異なるスタイルを適用することができます。背景色の異なる二つの領域を「class属性」を使って作成してみましょう。

    特定の要素に対してある共通のスタイルを指定する場合、CSSでクラスセレクターを記述します。「divタグ」のclass属性にクラスセレクター名を指定することで、特定のブロック要素に共通のスタイルを適用できるようになります。サンプルコード「div.html」のCSSにクラスセレクターを追加して、背景の異なる二つのブロックを作成します。

    ●div.html

    <style>
    ・・・省略・・・
    div {
    	margin: 20px;
    	border: 1px solid #000000;
    	color: 006DD9;
    	width: 400px;
    	height: 100px;
    }
    .box1 {
    	background-color: #aaa;
    }
    .box2 {
    	background-image: url(img/star.png);
    }
    </style>
    </head>
    <body>
    	<p>
    		bodyのテキストです。色やサイズの指定はしていないのでテキストは黒色、
    		16pxの大きさで表示されます。
    	</p>	
    	<div class ="box1">
    		<p>box1のクラスで指定した範囲です。</p>
    	</div>
    	<div class ="box2">
    		<p>box2のクラスで指定した範囲です。</p>
    	</div>
    </body>
    

    CSSのクラスセレクター名は通常のセレクターにドット(.)を付けた「.box1」と「.box2」になります。セレクター名は任意ですので分かりやすい名前を半角英数で指定します。

    「.box1」クラスセレクターの背景には"#aaa"(11行目)、「.box2」クラスセレクターには背景画像として"star.png"を指定します(14行目)。

    htmlの「divタグ」のclass属性の値にクラスセレクター名を「class ="box1"」、「class ="box2"」のように指定します。HTMLのdivタグ属性値に指定する場合はドットをはずしてダブルクォーテーション(" ")で囲みます。「divセレクター」には、追加で余白(margin)と枠線(border)を指定しています。

    ●ブラウザーの表示

    クラスセレクタとclass属性を使って、背景色がグレーの「divタグ」と画像を指定した「divタグ」を作成しました。

    ▲ページトップへ戻る

    3. displayプロパティを使って「divタグ」を横並びにする方法

    ブロックレベルの要素を複数配置すると通常は要素の下に配置されます。しかしブロックレベルの要素をインラインレベルの要素の様に横並びで配置する事も可能です。以下のコラムを参考にブロックレベルの要素をレイアウトに合わせて調整してみましょう。

    「CSS入門:「display: table」を使って要素を横に並べる方法」

    ▲ページトップへ戻る

    4. ブロックレベルの要素を中央寄せにする方法

    以下のコラムでは、ブロックレベルの要素を上下・左右中央に寄せたい場合のCSSについて解説しています。

    「CSS入門:要素を左右・上下中央に配置する方法」

    ▲ページトップへ戻る

    関連記事:CSSの書き方の基本
    関連記事:CSSのidセレクターの使い方
    関連記事:CSSのclassセレクターの使い方

    年収400万円〜500万円
    勤務地 東京都 渋谷区
    月額単価50万円〜70万円
    勤務地 東京都 品川区
    月額単価40万円〜
    勤務地 東京都 港区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...

    フリーランス

    【Photoshop/Illustrator/XD】Webデザイナー★カーリースサービスのデザイン&コーディング

    月額単価 :50万円〜70万円

    同社は、デジタルマーケティング事業、スマートフォン事業を展開している企業です。 今回は同社が運営...

    フリーランス

    【Photoshop/Illustrator】Webデザイナー★大手企業Webサイトのデザイン・コーディング

    月額単価 :40万円〜

    デジタルマーケティング、デジタルコンテンツ制作事業を展開している企業にて、コーダー・デザイナーと...