css HTML

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

投稿日:

Pocket

 

うも、チャーさん(@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>ここを1つのブロックとする</p>

</div>

 

そして次に、class名をつけましょう。

(id名でもいいです。)

 

 

書き方はdiv class=””

とかき、class=に続いて、

ダブルクオーテーションの中に名前を書きましょう。

 

(名前はなんでも良いです。

ただ、わかりやすい名前にするのがいいです)

 

 

<div class=”block1″>

ここがブロックです。

</div>

 

そして名前をつけたら、

cssを適用しましょう。

 

 

classをつけたdivにcssをつけるときは、

.クラス名{

cssの記述

}

 

という書き方をするので、

上記のように書きましょう。

 

 

具体例

HTML

<div class=”block1″>

ここが1ブロック目

</div>

 

CSS 

.block1 {

width:100px;

height:100px;

background-color:pink;

}

 

のような感じです。

ちなみにこの記述をかくと、

 

ちゃんとcssが適用されてますね!

 

 

スポンサードサーチ

まとめ

 

まとめに入ります。

divタグとは何か?ですが、

ブロックを作るためのタグだと思ってください。

 

そしてdivでブロックを作ることで、

class名を指定しそれぞれにcssを適用したりして、

より表現の幅が広がります。

 

divは使えるようになるととても便利です。

 

 

なので、この記事を参考にしながら、

ぜひあなた自身で今早速divを試してみてください。

 

それでは読んでもらって、ありがとうございました。

 

チャーさん(@chaa___san)

-css, HTML


スポンサードサーチ

関連記事

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。