divとは何か？
divは単体では何もしてくれない意味を持たないタグです。
では一体何の目的で設置するのでしょうか？
divで囲む事によってブロック要素にする事ができます。
囲った部分はグループ化され、divにCSSを設定する事でグループに一斉に指定する事ができます。
div設置の仕方
それでは早速divを設置してみましょう。
HTML
<div>
<p>文字を赤くしますー！</p>
</div>CSS
div p{
color: #FF0000;
}結果
文字を赤くしますー！
CSSで「div」の中の「p」に対して色の指定をしました。
これで文字が赤色になりました。
しかし以下の様に複数divがある場合はどうでしょうか。
HTML
<div>
<p>文字を赤くしますー！</p>
</div>
<div>
<p>文字を青くしますー！</p>
</div>上のdivの中のpは赤色に、
下のdivの中のpは青色にしたいと思います。
そこで先程のCSSを当ててみると・・・
結果
文字を赤くしますー！
文字を青くしますー！
両方とも文字が赤色になってしまいました。
CSSで「div」と設定してしまうと、全てのdivに対して適応されてしまいます。
別々のCSSを設定したい場合には、以下の様に記述します。
HTML
<div class="box-red">
<p>文字を赤くしますー！</p>
</div>
<div class="box-blue">
<p>文字を青くしますー！</p>
</div>CSS
.box-red p{
color: #FF0000;
}
.box-blue p{
color: #0000FF;
}実装結果
文字を赤くしますー！
文字を青くしますー！
これで文字が赤と青に分けられました。
divの使い分け解説
上記のコードをブラウザで見てみると・・・
先程の記述ではdivに「class」というものが追加されていました。
この「class」と言うのはdivに名前をつけてあげてクラス分けする為の記述です。
divは単体では何者でもありませんから、classで名前をつけてあげる事で他と差別化します。
HTMLの記述方法解説
<div class="box-red">
<p>文字を赤くしますー！</p>
</div>名前をつける時には「class=””」はお決まり、「” “」の中に任意の名前を付けましょう。
任意ですので何でも良いのですが、自分で管理できる分かりやすい名前にしておくと後々管理が楽です。
この場合は「class=”box-red”」なので「box-red」とdiv名が指定されています。
divとclassの間にはスペースを1つ開けるのがルールです。
CSSの記述方法解説
.box-red p{
color: #FF0000;
}「box-red」の中の「p」に対して文字色を「#FF0000（赤）」に！という指定をしています。
class名をCSSを記述する時には「.box-red」と最初に「.」を付けて記述します。
まとめ
divを設定する事でサイト全体の管理がかなり楽になります。
例えば100ページに同じdiv名があった場合、CSSを1つ変更するだけで100ページ全て変更する事が可能になります。
divはどんな時も設定する様にしておくと良いでしょう。
CSSファイル設置方法
css記述方法その3！外部に置いたファイルから読み込む「外部css」
HTMLコーディングのオススメ本
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
できるホームページ HTML＆CSS入門 Windows 10/8.1/7対応
タグの理解が深まる!入力例と結果、機能がひと目でわかるからHTMLコードがすぐ身に付く。CD‐ROMに収録の画像編集ソフトでホームページを彩るロゴも作成できる!
現場のプロから学ぶ SEO技術バイブル(特典PDF付き)
セマンティックWebに対応するための構造化マークアップ。MFI時代におけるモバイル対応からAMP対応まで。検索意図・共起語を意識したコンテンツSEO。Googleの特許から紐解く被リンク・サイテーション獲得戦略。レンダリング・ネットワークの仕組みから理解する高速化技術。施策だけで終わらせないモニタリングレポート。
