どうも、チャーさん(@chaa___san)
です。
あなたはdivとはなんだ？
と思っていませんか。
この記事ではdivとは何か、
そしてどういう風に使えばいいのか？
divのcss適用方法を説明しています。
なので、あなたがdivが何かわからなかったり、
divを使ってcssを適用する方法がわからない場合、
ぜひ下にスクロールして読んでみてください。
スポンサードサーチ
divとは何か？
ということで早速結論からいきます。
まずdivとは何かというと、
ひとかたまりや、ブロックを作る、
タグだと思ってください。
とはいえブロック、ひとかたまりとは、
どういうことか？
絵でみた方が理解しやすいと思いますので、こちらを
ご覧ください。
(divの具体例です)
左上のカラフルなボックスをみてもらえば、
直感的にわかると思いますが、
divを使うことによって、部分ごとにブロックを作れるわけです。
そしてその部分（ブロック）ごとに、
背景色や大きさなども設定して、
違う表示をすることができるのです。
という訳で、これがdivのブロックや、
ひとかたまりの意味するところでして、
divはサイト制作やhtml書く時に非常に便利なのです。
divの書き方
で、divというものが、
どんなものかわかっていただいたところで、
divの書き方の説明に入ります。
と言っても、とても単純です。
ブロックにしたい部分を、
divタグで囲ってください。
こうすれば、ひとかたまりとして、
認識されます。
で具体的な書き方としてはこんな感じになります。
<div>
ここにpタグや、liタグなど、好きにコードを書きます。
</div>
こうすることで、divを使うことができます。
スポンサードサーチ
divのclassを使いcssを適用しよう
これでdivのことが少しわかったと、
思いますがcssをdivに使えるのかな？
とあなたは思ったかもしれません。
こちらですが当然のことながら、
divにもcssを適用することができます。
しかしdivに直接cssをあててしまうと、
全てのdivにcssがかかってしまいます。
するとブロックを作れば作るほど、
やりづらくなります。
なのでdivで作ったブロック達の中で、
指定したdivブロックにだけcssを使いたい場合は、
classやidをつけましょう。
これをすることでdivで作ったブロックに、
名前をつけることができ、cssを選択した
ブロックにのみ適用させることができるのです。
で例によって具体例を出そうと思います。
先ほどと同じ画像ですが、以下の画像をみてください。
そしてdivの隣にあるclass=という部分に、
注目してみてください。
みていただくとわかるように、
それぞれのdivブロックにblock1,
block2,block3と名前が付いていますね。
そしてさらに以下のコードの画像を、
みてください。
先ほどdiv classでつけた、
block1,2,3,それぞれに、
cssの記述を書いてますね。
そしてその結果、画像のように、
色と大きさの違うブロックができてますね。
こんな風に、divではdivタグで囲ってあげて、
その後class名を設定してあげることで、
cssでそれぞれのdivに別々にcssを適用できるのです。
これによって、いろんなブロックを作り、
それぞれのデザインを施せるので、
表現の幅が広がりますね。
と、ここまででdivでのcssの適用が
理解できたと思いますので、
divでcssつける時の順序も書いておきます。
divのclassを使いcssを適用する手順
まずはブロックにしたいとこをdivタグで
囲いましょう。
例
<div>
<p>ここを１つのブロックとする</p>
</div>
そして次に、class名をつけましょう。
(id名でもいいです。)
書き方はdiv class=””
とかき、class=に続いて、
ダブルクオーテーションの中に名前を書きましょう。
(名前はなんでも良いです。
ただ、わかりやすい名前にするのがいいです)
例
<div class=”block1″>
ここがブロックです。
</div>
そして名前をつけたら、
cssを適用しましょう。
classをつけたdivにcssをつけるときは、
.クラス名{
cssの記述
}
という書き方をするので、
上記のように書きましょう。
具体例
HTML
<div class=”block1″>
ここが１ブロック目
</div>
CSS
.block1 {
width:100px;
height:100px;
background-color:pink;
}
のような感じです。
ちなみにこの記述をかくと、
ちゃんとcssが適用されてますね！
スポンサードサーチ
まとめ
まとめに入ります。
divタグとは何か？ですが、
ブロックを作るためのタグだと思ってください。
そしてdivでブロックを作ることで、
class名を指定しそれぞれにcssを適用したりして、
より表現の幅が広がります。
divは使えるようになるととても便利です。
なので、この記事を参考にしながら、
ぜひあなた自身で今早速divを試してみてください。
それでは読んでもらって、ありがとうございました。
チャーさん(@chaa___san)
