富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. HTML
  3. ブログ

第2章コーダー初心者【必見】一人前になるコーディングテクニック~divとspanでボックスを作ろう~

2

こんにちは!
コーディングまとめ第2回です!
今回はdivとspanを使ってコンテンツのボックスを作ってみたいと思います。

  1. divとspanってなに?
  2. この2つのタグでできること
  3. 他のタグとの違いは?
  4. ボックスを作ろう

 

 

divとspanってなに?

divとは?

divとはコンテンツをひとかたまりにしてまとめるために用いられるものです。
divはブロック要素です。そのため、divを2つ作ると下へ追加されます。
こういったコンテンツを囲むときに用いられます。

 

spanとは?

続きましてspanです。
spanはインライン要素です。そのため、テキストの中の一部だけ文字の大きさを変えたい、文字の色を変えたいというときに用いられます。

 
image2

2つの違い

大きな違いとしては前述した通りdivはブロック要素、spanはインライン要素です。
htmlの中でそれぞれのコンテンツをまとめるのがdiv、
行は変えたくないけど、ここだけ設定を変えたいときに使うのがspanという感じですね。
htmlのコードの中では圧倒的にdivの方が登場回数が多いです。

 

この2つのタグでできること

使用方法としては
全体を大きくdivで囲みます。
さらに細かく上下をdivで分けます。
さらにさらにタイトルとテキストをそれぞれdivで囲んで・・・
最後に色を変えたい文字だけspanで囲む・・・!

ややこしい・・・

しかし、htmlのコーディングはデザインを見た時、どのようにdivで囲むかを考えることはとても大事です。
そうしないとコーディングの最中にdivでゴチャゴチャして大変なことになります。(経験者は語る)
きちんとボックスを作っておけば、cssでスタイルを設定するときにも進めやすくなりますしね。

 

他のタグとの違いは?

ブロック要素で他に使われるものとしてhタグやliタグ、pタグなどがあります。
他にも色々とありますが、今回はこの3つとdivを比較したいと思います。

hタグ・・・見出しにつけるタグ。h1〜h6まであり、番号が若いほど大見出しになります。
liタグ・・・リストを作るときに使います。
pタグ・・・段落を指定するときに使います。前後に1行空白が入ります。

それぞれの意味を示したところで、どんなときに使うのか、簡単に説明します。

hタグは見出しですので、タイトルやサブタイトルなど目立たせたい部分に使います。
この記事でも青色の背景のテキストがh2、
上下に線が入っていて、少し文字が大きくなっているものがh3タグが入っています。

liタグはリストタグです。
親要素にulやolなどでどんなリストかを指定する必要があります。(それぞれのタグについては今後・・・)
メニューや記事の目次などに使われます。
この記事でも目次がリストになっています。

pタグは段落指定のタグです。
それだとdivとかぶるのでは?と思われますが、
divとの大きな違いは前後に1行分空白が入るかどうかです。

こう見ると、それぞれの特徴があり、どこに何を使えばいいのかわかってきますね。
spanはまた別ものなので、この時点では省きます。

ボックスを作ろう

ここまでやったところでdivとspanとちょっとスタイルを使ってボックスを作りましょう。
hタグは?liは?と思われた方、それはいずれ・・・。

今回作ってみるのはこのボックス。
青色の箱のなかにまた白色の箱を作って、その中のテキストの1部だけ文字の色を変える・・・。
この文章だけ見るとややこしいですね。それではやってみましょう。

<div style="width: 300px; height: 300px; background: blue; border: 1px solid #626262;">
<div style="width: 200px; height: 200px; margin: 50px; background: #FFF; border: 1px solid #626262;">
ここにテキストが入ります。ここの文字をに変えてみましょう。
</div> </div>

 
 

↓このような感じになります。

ここにテキストが入ります。ここの文字をに変えてみましょう。

 
※コードの中で使っているスタイル※

widthとheightで横幅と高さを指定
backgroundで背景色を指定
borderで周りの線をつけています。
さらに中のボックスは中心に持ってくるためにmarginで余白をつけています。
テキストの部分はcolorで1文字だけ赤色に変更しています。

 
いかがでしたでしょうか?
ボックスづくりはhtmlの基本中の基本です。
divで分けることでコード自体も見やすく、わかりやすくなります。
次回は今回出てきたhタグやliタグなど、色々なタグの使い方についてまとめたいと思います。
それでは!

この記事を書いたスタッフ