今回は、実践でのdivタグの使い方を、デモを使いながら解説したいと思います。
実践でのdivタグの使い方
今回は、実戦でよく使うdivの使い方として、
imgでの使い方とブロック要素の横並びでの使い方をご紹介します。
imgでの使い方
まずは、以下の使用例をご覧ください。
HTML
<section>
<img src="./hiyoko.jpg" alt="" class="item">
<div class="box">
<img src="./hiyoko.jpg" alt="">
</div>
</section>
CSS
section {
width: 1000px;
}
//imgのみの場合
.item {
width: 100px;
margin: 0 auto;
}
//divで囲んでいるimgの場合
.box {
width: 100px;
margin: 0 auto;
}
.box > img {
width: 100%;
height: auto;
}
画像
このように、imgに対してdivで囲むことで、
レイアウトがしやすいためです。
使用例のimgのみのCSSをご覧ください。
『margin: 0 auto;』を記載していますが、imgはインライン要素のためmarginが効いていません。
※marginを効かせたい場合、『display: block;』を追加してブロック要素にしましょう。
それに対して、divで囲んだ場合は、ブロック要素の中にインライン要素があるため、
divのCSSからimgのレイアウトを変更することが可能です。
そのため、2つ目の『margin: 0 auto;』は効いているということです。
imgは、pとdivどちらで囲むか？
imgは、pタグで囲むという方もいます。
個人的には、pタグで囲む場合は、
文章上で、重要な画像に対して使用するというイメージを持っています。
ですので、
pで囲む場合 ＝ 文章上で、関連性が高く重要な画像に『p』を使用
divで囲む場合 ＝ 関連性が低くレイアウトに使う画像に『div』を使用
というイメージを持つようにしましょう。
ブロック要素の横並びでの使い方
まずは、以下のデモをご覧ください。
See the Pen jOqexJZ by ryu (@ryu-no-sss) on CodePen.
このように、div(boxの)で、div（box__itemの）を囲み、CSSで『display: flex;』を使うと、要素が横並びになります。
さすがにこれだけでは、わかりづらいので、以下の画像をご覧ください。
これは、先ほどのデモのHTMLコードです。
この画像のように、『<div class=”box”>』に『display:flex;』を記載すると、
box__itemを1つのブロック要素とし、
divのブロック要素を以下の画像のように、横並びにするということです。
display: flex;についてもっと知りたい！という方は、
以下のリンクの記事もぜひ！
また、子要素を横並びにする際のwidthの指定方法を以下のリンクの記事で解説していますので、こちらもぜひ！
divを使ってサイトの横幅を統一するやり方
先ほどのデモで、<div class=”news__inner”>という記載がありましたが、
これは、サイト内の横幅を統一させるために使用したdivです。
<section class="news">
<div class="news__inner">
<div class="box">
・・・・・
</div>
</div>
</section>
CSSで横幅のクラスを設定しておけば、HTMLでは、そのクラスを追加するだけで、横幅を統一することができるためとても便利です。
詳しくは、以下のリンクの記事をご覧ください。
まとめ
・imgは、文章と関係が深い画像に関しては、『p』で囲み、文章と関連性が低いレイアウト要素の画像は、『div』で囲む。
・要素を横並びにする場合は、divと『display: flex;』を使う。
今回は、実践でのdivタグの使い方ということで、
特によく使う方法をご紹介しました。
また、divの使い方で、なるほど！と思ったことがあれば、
共有したいと思います。
他にも、実戦でよく使うHTMLコードを以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
