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

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

最新記事

チャーさん

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

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

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