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で文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

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

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

no image

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

最新記事

チャーさん

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

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

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