あさくまろん

デザインを意識した、divタグの基本的な使い方

f:id:asakumamasaru:20171126213621p:plain

ブログのデザインについて悩んだときは、divタグについて勉強してみましょう。

  • 枠で囲みたい
  • 範囲指定して、背景を設定したい
  • ブログを3カラムにしたい
  • 一定範囲内の文字の大きさや色を一括指定したい

divタグを使えば、デザイン上いろんなことができるようになりますよ。

ということで、
divタグの基本的な使い方を公開しちゃいます。デザインを意識したものを。

divタグで囲ったものをグループ化する

divタグは、囲った部分をグループ化するために使われます。

<div>
<h1>記事タイトル</h1>
<p>記事本文、、、</p>
</div>

hタグとpタグをdivタグで囲むことで、グループ化ができます。
divのcssを指定してしまえば、hタグとpタグに一括して、cssを適用できるようになるんです。

hタグpタグそれぞれに、css指定をしなくていいので、css指定が簡単になりますね。
cssの構文も短くて済むので、divタグを使うと、美しいシンプルな構文を作り上げることができちゃうんです。

<h1>記事タイトル</h1>
<p>記事本文、、、</p>

もしdivタグで括らなかったらどうなるか。
hタグとpタグの間に隙間ができてしまい、cssの背景指定等がツギハギな感じになってしまうかもしれません。

divタグを使うことで、

  • cssの構文がシンプルで美しくなる
  • タグとタグの間の隙間をなくしてきれいなcss装飾が可能になる

divタグをブログデザインに使わない手はありませんね。

htmlのブロックレベル要素について理解しよう

divタグ、hタグ、pタグを、ブロックレベル要素と呼びます。
一つの塊としての、ブロックのように積み上げられたものを表しています。
でね、htmlには、ブロックで積み上げるような要素が存在してるというわけです。

別記事で紹介している、ul、olタグも、ブロックレベル要素に含まれます。

<h1>記事タイトル</h1>
<p>記事本文、、、</p>
<h2>記事タイトル</h2>
<p>記事本文、、、</p>
<h3>記事タイトル</h3>
<p>記事本文、、、</p>

hタグpタグのそれぞれの中に、目には見えない領域が存在しているのです。

でね、それぞれの領域に他の領域を重ねて表示することができちゃいます。

<div>
<h1>記事タイトル</h1>
<p>記事本文、、、</p>
</div>

hタグとpタグの領域に、divタグを重ねたものを先ほど紹介しました。
ブロック領域を重ねた状態で、divタグにcssを指定することで、背景をhタグとpタグの両方に重ねることが可能に。
divに背景指定することで、目には見えなかったブロックの可視化ができちゃいます。

ブロックの幅や色は、cssで指定してあげましょう。

divタグの役割

divタグは、タグ自体にテキスト文章の意味を、検索エンジンに伝える意味合いはありません。

別記事で、htmlがテキスト文章に意味をもたせるという話を説明してます。

divタグを使うことで、テキストの区切りをつけたりして、見た目的な装飾をできるようになります。

いわゆる、

  • 1カラム
  • 2カラム
  • 3カラム
などのブログの区切り指定は、divタグを使うことで、可能になります。

divの区切り指定をするためには、後述する、クラス指定が必要になってきます。

divタグの使い方

divでグループを作ったら、それぞれのグループごとに区別がつくようにしてあげましょう。

  • id属性
  • class属性
divタグには、2つの指定方法があります。

<div id="nobita"></div>
<div class="doraemon"></div>

属性を指定することで、cssで装飾するときに、個別に識別して細かい指定ができるようになります。

””で囲った中の文字のことを、セレクタと言います。
nobitaはidセレクタ、doraemonはclassセレクタですね。


セレクタの最初の文字は、アルファベットで指定しましょう。

  • nobita
  • doraemon
  • shizukachan
セレクタ名は、固有名詞でつけることをオススメします。

idセレクタ、classセレクタには、それぞれ使い方があります。

<div id="nobita">
<h1>記事タイトル</h1>
<p>記事本文、、、</p>
</div>
<div class="doraemon">
<h2>記事タイトル</h2>
<p>記事本文、、、</p>
</div>
<div class="doraemon">
<h3>記事タイトル</h3>
<p>記事本文、、、</p>
</div>

  • idセレクタは、同じ名前を1ページで一回しか使えない
  • classセレクタは、同じ名前を1ページで何回も使える
  • セレクタ名の最初の文字は、アルファベットで始める
セレクタの3つの基本事項を、頭に入れておきましょう。

divの中にdivを入れ子状にしても使えます。

<div id="nobita">
<div>
<h2>記事タイトル</h2>
<p>記事本文、、、</p>
</div>
</div>

ですが、何層も深く入れ子状態にしてしまうと、表示に時間がかかるために注意が必要です。

divタグとpタグの使い分け方

  • divタグは、1つの塊として表現するときに使います。
  • ただ塊を作っているだけで、検索エンジンに対して、何の役割も果たしていません。
  • divタグは、他に都合のいいタグがない場合の最後の手段として使いましょう。

  • pタグは、文章を1つの段落としてまとめるときに使います。
  • html的には、検索エンジンに、文章の意味合いを伝える役割があります。
  • pタグは、文章を囲んで、段落を表現するときに使います。
  • pタグでは、ブロック要素を囲むことはできません。

まとめ

  • divタグで囲ったものをグループ化する
  • htmlのブロックレベル要素について理解しよう
  • divタグの役割
  • divタグの使い方
  • divタグとpタグの使い分け方

デザインを意識しだしたら、divタグを使うことが多くなっていくでしょう。
細かい使い方を、記事のデザインをしながら覚えてみてください。
ブログのデザインが楽しくなりますよ。divタグを自由に使いこなせるようになったら。

参考にした記事。