Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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でやる方法。1行だけ、複数行の字下げも対応

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

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

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

no image

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

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

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

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

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

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

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

最新記事

チャーさん

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

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

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