こんにちは。サイバーブリッジweb担当の久保田です！
今回は、HTMLで使用頻度の高いdivタグの使い方を、初心者さんにも分かりやすく解説していきたいと思います！
divタグとはdivisionの略で、divタグ・div要素なんて言います。
HTMLソース内では<div>〜</div>と記述されているので、初心者さんでも「見たことある！」って方は多いのではないでしょうか？
divタグは他のタグとは違い<div>単体では意味を持ちません。が、<div>〜</div>で囲まれた範囲をブロック要素としてまとめることができ、CSSでレイアウトを構成する際に使用するので非常に重要なタグのひとつとなっています。
それでは基本的なdivタグの使い方を見ていきましょう。
完成形がこちら⬇︎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World !</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="red">背景を赤にするよ！</div>
<div class="yellow">背景を黄色にするよ！</div>
<div class="green">背景を緑するよ！</div>
</body>
</html>@charset "UTF-8";
.red {
background-color:red;
}
.yellow {
background-color:yellow;
}
.green {
background-color:green;
}上記のようにHTML&CSSにコードを記述した際の実際の画面がこちら⬇︎
cssで指定した通り、ブロック毎に背景色が変わっているのが分かりますね。
divタグはwebページ内で複数使用することができるので、idやclass属性を指定し、ブロック毎に名前をつけて区別します。
idとclassにはそれぞれ特徴があるのでご紹介します。
id属性とclass属性は、HTMLのグローバル属性にあたるので全ての要素に指定できます。例えば、<div class=”name”>〜</div>や<a href=”http://” class=”name”>〜</a>など。<p>タグ<img>タグなども○
それぞれの特徴としては…
id属性はwebページ内で１つしか使うことができません。
CSSではセレクタの前に「#(シャープ)」を記述します。
class属性はwebページ内で何度でも使うことができます。
CSSではセレクタの前に「.(ドット)」を記述します。
また、idとclassを組み合わせて使ったり、値(セレクタ)を半角スペースを開けて複数記述することも可能です。
<div id="name" class="name1 name2 name3">〜</div>こんな感じです。
class名を複数記述する理由などは後日詳しく解説します。
divタグはブロック要素ですが、同じように単体では意味を持たないタグのひとつにspanタグもあります。
使い方の例として、<p>タグで囲ったテキストの一部の色を変えたい時など、CSSでスタイルを指定する時に使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World !</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="red">背景を赤にするよ！</div>
<div class="yellow">背景を黄色にするよ！</div>
<div class="green">背景を緑するよ！</div>
<div class="gray">背景を灰色にして<span>この文字だけ白</span>にするよ！</div>
</body>
</html>@charset "UTF-8";
.red {
background-color:red;
}
.yellow {
background-color:yellow;
}
.green {
background-color:green;
}
.gray {
background-color: gray;
}
span {
color: white;
}
<span>で囲ったテキストが白くなりましたね。
それではdivタグとspanタグの違いについて知るために、ブロック要素とインライン要素の違いについて知っておきましょう。
ブロック要素はレイアウトの一つのまとまりとして扱われる要素です。先程の実行結果のように、divタグを使った部分はレイアウトが詰まった一つの箱として扱われるイメージです。
このブロック要素ではmargin、paddingなどのレイアウトやwidth、heightなどのサイズも自由に決めることができます。このブロック要素は追加すると基本的には縦に並んでいくのですが、これを横に並べる方法は後ほど紹介します！
インライン要素は行の一部（インライン）として扱われる要素です。箱の中に入っている物の一部といったイメージです。先程の実行結果のように、spanタグを使うと文字の部分だけ、色が変わりましたね。
このspanタグではwidth、heightなどのサイズの調整ができないという点に気をつけましょう。spanタグは追加していくとブロック要素とは違って、基本的には横に並んでいきます。
「divタグなどのブロック要素で簡単に横並びのレイアウトを作りたい！」
そんな時におすすめなのがFlexBox(フレキシブルボックス)というCSS3の新機能を使用したレイアウトモジュールです。
このFlexBoxの凄いところは、たった一行でブロック要素の横並びレイアウトが実現できる！というところです。
では、実際に見てみましょう！
まず、HTMLの先ほどのコードに<div class=”boxitem”>を記述し、先ほど使用したdiv要素を</div>で閉じます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World !</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="boxitem">
<div class="red">背景を赤にするよ！</div>
<div class="yellow">背景を黄色にするよ！</div>
<div class="green">背景を緑するよ！</div>
<div class="gray">背景を灰色にして<span>この文字だけ白</span>にするよ！</div>
</div>
</body>
</html>次にCSSに.boxitem { display: flex; }を記述します。
@charset "UTF-8";
.boxitem {
display: flex;
}
.red {
background-color:red;
}
.yellow {
background-color:yellow;
}
.green {
background-color:green;
}
.gray {
background-color: gray;
}
span {
color: white;
}そしてブラウザをリロードすると…
一瞬にして横並びになりました！
ただ、これだけだとただ左に詰めて横並びになっただけなので完成とは言えません。
FlexBoxは要素の間隔を均等にしたり、高さの違う要素を綺麗に揃えたり…とっての便利な設定ができるので、後日詳しく解説します！
この記事を書いた人
その他記事はこちら
久保田 里佳子
Web事業部 マネージャー / デザイナー1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。
関連記事
櫻井 邦則 
久保田 里佳子 
