BLOG

ブログ

初心者によるCSS講座!divの使い方

div

今回は第2回!
第1回はmarginとpaddingの違い
前回はmarginとpaddingnの違いについて、勉強してきました!
まだご覧になってない方はぜひご覧ください!

では、今回はhtmlのdivについて勉強していきます。
サイトを実際に作り始めた方だと、色々なサイトで

<div class=”〇〇(クラス名)”>

<h1>〇〇</h1>

<p>△△△△△△△△</p>

</div>

といったコードを目にする機会が多いと思います。僕もやけにこの書き方が多いなー、と感じたので・・・
では、いったい div class とはいったい何に使っているのか?
勉強していきましょう!

divの使い方

まずは上記の例です。
<div>の中にh1タグとpタグが入っていますね。
divは中に入っている要素にcssを適応することが出来ます!
それって、いったいどういう事?何が便利なの?
一つずつ説明していきます!

div内の要素

divを使わなかった場合で考えていきます。
例えば、h1を赤くしたい、pも赤くしたい。
この場合、cssで
h1 {

color  :  red;

}

p {

color : red;

}

といった書き方になると思います。(あえて分けて書きますね!)

では、divを使った場合だと?

cssで

.〇〇(class名) {

color : red;

}
と書くだけて、div内の要素に適応されるわけです!
これは便利ですね!

幅、高さの設定

divはブロック要素(一般的に前後に改行がはいる様な要素)で出来ています。
そのため、幅(width)や高さ(height)を指定してあげることが出来ます。
さらに前回説明したmargin、paddingも指定できるので、
好きな場所に配置することができるので、divはとても使い勝手の良い要素となっています。

グループにする

簡単にいってしまうと、divは要素をグループする物。という認識でOKです!
そこにclassをつけてあげて、そのグループにcssを適応させる。
といった使い方になります。

何回も使える

divはhtmlのコードで何回でも使うことが出来ます!
例を挙げると、

<div class=”section”>

<div class=”left”>

<img ・・・>

</div>

<div class=”right”>

<p>・・・</p>

</div>

</div>

上のように、sectionというクラス名のdivの中にleft、rightというクラス名のdivを入れています。
leftのdivの中身はimgタグで画像データを入れ、rightのdivの中身はpタグで文字を入れている。といったような使い方が出来るので、
自由に配置でき、グループにまとめることが出来るので、やはり覚えてしまえば使い勝手の良いものだと思います!

また、ofasimではホームページ制作も承っています。
詳しくは以下よりお進みください!
ご相談、お見積もりは無料ですので、お気軽にお問い合わせくださいませ。