今回は第２回！
第１回は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ではホームページ制作も承っています。
詳しくは以下よりお進みください！
ご相談、お見積もりは無料ですので、お気軽にお問い合わせくださいませ。
コメント