WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <div>「ブロック領域」

<div> 「ブロック領域」[読み方:ディヴ]

<div>タグは、非常に多く利用されるタグです。
<div>自体には意味を持ちませんが、スタイルシートとの組み合わせで、ページの骨格を形成したり、注意文言の表示などにも利用される使用頻度の高いタグです。

HTML規格HTML4.01HTML5
使用可否
広告

<div> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツフローコンテンツを子要素にもてる場所フローコンテンツ不可

<div>の属性

【構文】
<div align="位置"~内容~</div>
属性意味値のサンプルなど
align="表題位置"表題(タイトル)を表示する位置
※HTML5で廃止。スタイルシートで指定。
意味
left左寄せ
right右寄せ
center中央揃え
justify両端揃え
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<div>のサンプル

<div>DIV自体には意味を持ちませんが、非常に重要なタグです。</div>
DIV自体には意味を持ちませんが、非常に重要なタグです。
ページTOP

<div>を使用したページ構成のサンプル

<head><style type="text/css">
<!--
#css-wrapper {width: 700px;margin: 0 auto;} /* ページ幅:700px、中央寄せ */
#css-header {width: 700px;height: 150px;} /* ヘッダー */
#css-main {width: 700px;} /* メニュー+コンテンツ */
#css-menu {float: left;width: 150px;} /* メニュー */
#css-contents {float: left;width: 550px;} /* コンテンツ */
#css-footer {clear: both;width: 700px;height: 50px;} /* フッター */
-->
</style>

</head>

<div id="css-wrapper">

  <div id="css-header">
   ~ヘッダー内容~
  </div>

  <div id="css-main">
    <div id="css-menu">
     ~メニュー内容~
    </div>
    <div id="css-contents">
     ~コンテンツ内容~
    </div>
  </div>

  <div id="css-footer">
 ~フッター内容~
  </div>

</div>

ページTOP

<div>のの罫線や色の変更サンプル

<div style="color: blue; background-color:#ffeeff;border: 2px dotted red; padding: 10px;">DIV自体には意味を持ちませんが、非常に重要なタグです。</div>
DIV自体には意味を持ちませんが、非常に重要なタグです。
ページTOP

留意事項

  • <div>は<span>と似ていますが、<div>がブロック要素で<span>はインライン要素となります。
    <div>はブロックで改行されますが、<span>は改行されません。
  • html5より<div>と同様の機能の以下タグが追加されました。それぞれの意味合いにより使い分けを行うことが推奨されています。
    <article> , <aside> , <nav> , <section> , <header> ,<footer>
  • align属性は、HTML5で廃止されました。スタイルシートで位置を指定してください。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン