Seesaaブログ以外でも使える!?覚えておいて損がないHTMLタグ - <div>タグ編

混雑する羽田空港

もうすぐ大型連休。
今年(2016年)は有休などを組み合わせると最大で10連休になるようです。

この連休を利用して普段できないことをする、といった方もいらっしゃることでしょう。
「普段できないこと」の一つとして、ブログのカスタマイズをするといった際にこのカスタムレシピが少しでもお役に立てれば幸いです。

さて、Seesaaブログのユーザー様より「右サイドバーの情報が記事下に表示されてしまっている」と言った主旨のお問い合わせをいただくことがあります。

ブログの表示崩れについては、ヘルプにもありますが、記事本文中やブログに追加したコンテンツ内で入力した<div>タグが閉じられていない、あるいは</div>だけが多いときに現象が発生する場合があります。

今回はこのような現象を未然に防ぐために、<div>タグについてお話していきます。


<div>タグって何?

<div>タグとは、特別な意味を持たないひとかたまりの範囲として定義するする際に使用するタグです。

上記の通り、<div>には特別な意味はないのですが、<div>から</div>までで囲まれた範囲を一つのグループとしてまとめることができます。

例えば、このブログのヘッダー部分では下記のようなソースコードが使用されています。

<div class="header">
    <h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
    <p class="description"><% blog.description | nl2br | mark_raw -%></p>
</div>

<div>タグってどういうときに使うの?

Seesaaブログの場合、PC版マイブログの記事投稿画面にある、以下の文字装飾アイコンにて<div>タグが使用されています。

  • 左寄せ
    左寄せ
  • 中央寄せ
    中央寄せ
  • 右寄せ
    icon-right.png

<div style="text-align:left;">左寄せ</div>
<div style="text-align:center;">中央寄せ</div>
<div style="text-align:right;">右寄せ</div>

また、リッチテキストエディタ(見たまま編集)を利用して記事投稿を行っている場合、改行が<br />タグではなく<div>タグで表現されるようになっているので、改行するまでの一文が<div>から</div>で囲われています。
※スマートフォン版マイブログやiOS/Android向けSeesaaブログアプリの記事投稿画面もリッチテキストエディタ(見たまま編集)が採用されているので、上記同様、改行が<div>タグで表現されています。

リッチテキストエディタで用いられている「改行(<div></div>)」は記事投稿画面のソースコードアイコン ソースコード で確認することができます。


何で<div>タグが原因で表示崩れが起きるの?

Seesaaブログでは、ヘッダー、左サイドバー、メイン、右サイドバー、フッター、とそれぞれがグループ化されています。

また、<div>タグは上記の通り、<div>から</div>までで囲まれた範囲を一つのグループとしてまとめられています。

<div>と</div>がセットで一つのグループを作るので、どちらか一方が欠けていると、欠けている部分から全てを一つのグループとして解釈してしまいます。
例えば、メイン(記事本文)で<div>あるいは</div>のどちらかが欠けている場合、メイン・右サイドバー(右カラムのデザインの場合)・フッターが一つのグループとして解釈され、結果的に表示崩れが発生してしまいます。
※右サイドバーが記事下に表示されているブログの一例 右サイドバーが記事下に表示されているブログの一例

よって記事本文やコンテンツで<div>タグを使用する場合は、<div>と</div>が必ずセットになっていることを注意しながら使用する必要があります。


まとめ

ここで本記事でご紹介した内容をまとめると…

  • <div>タグは特別な意味を持たないひとかたまりの範囲を定義するタグである
  • <div>から</div>までで囲まれた範囲を一つのグループとするため、<div>と</div>は必ずセットで使用する必要がある
  • <div>と</div>のどちらかが欠けているとデザインの表示崩れが起きてしまう

あなたのブログで万が一表示崩れが起きてしまったとき、ぜひ今回の記事の内容を参考にしてみてください。