Google検索エンジン

トップページ » HTMLタグ入門講座 » ブロックを定義するdivタグの使い方


ブロックを定義するdivタグの使い方

  • ブロックを定義する時の注意点

    ◇Webサイトのレイアウトはスタイルシートで設定

    ブロック要素タグ「<div>」に「style」属性を記述すると、スタイルシートを作成する必要がありませんが、「id」属性や「class」属性を指定して、別途スタイルシートを作成しておくことをおすすめします。 HTMLファイルの記述を簡潔にした方が、検索エンジンにwebサイトの内容を理解してもらいやすくなるからです。

    スタイルシートを使用するには、HTMLファイルの<head>と</head>の間に、「<link rel="stylesheet" type="text/css" href="スタイルシートのURL" />」を記述する必要があります。 スタイルシートの使い方については、「スタイルシート入門」をご覧ください。


    ◇「id」属性は一意となるようにする

    ブロック要素タグ「<div>」は、「id」属性や「class」属性を指定して、スタイルシートと組み合わせて使用します。 HTMLファイル内に、同じ「class」属性のブロック要素を複数記述しても構いませんが、同じ「id」属性のブロック要素は重複して記述しないようにします。 HTMLファイル内で、ブロック要素タグの「id」属性は一意となるようにします。


    ブロックを定義するdivタグ

    ブロックを定義するには、HTMLファイルにブロック要素タグ「<div>」を記述します。 属性を指定せずにブロック要素タグ「<div>」を記述しても意味を成しません。 「id」属性や「class」属性を指定して、スタイルシートと組み合わせて使用します。


    ブロック要素タグ「<div>」の主な属性と使用方法を以下の表にまとめました。 必須欄の◎は必須属性、○は推奨属性、×は非推奨属性です。 「id」属性や「class」属性は必須属性ではありませんが、どちらかを指定しないと無意味な記述になってしまいます。

    divタグ属性 意味 必須
    class=class クラスを指定
    id=id IDを指定
    lang=lang 言語を指定  
    style=style スタイルシートを指定  
    title=title タイトルを指定  

    HTMLおよびXHTML記述例
    <div style="color:#CC3300;">ブロック要素テスト1</div>
    <div class="test">ブロック要素テスト2</div>
    スタイルシート記述例
    div.test{
      font-style:italic;
      font-weight:bold;
      text-align:center;
      background-color:#CCCC00;
      width:400px;
    }
    Webサイトの表示
    ブロック要素テスト1
    ブロック要素テスト2


HTMLタグ入門講座
it-manual.comのウェブサイト
書籍の紹介
  • SEOを強化する技術 エンジニアが内側から支えるサイト設計・構築術
    SEOを強化する技術
    発売:2009/12/18
    定価:1,890円
    著者:安川 洋
    出版:インプレスジャパン
    内容:TwitterのSEO効果など最新のトピックについても記載されています。エンジニアだけではなく、エンジニアの力を借りてより高度なSEO対策を行いたいWeb担当者にも最適の内容です。
  • Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
    発売:2005/07
    定価:2,520円
    著者:益子 貴寛
    出版:秀和システム
    内容:「Web標準」とは、Web上で標準的に利用される技術の総称です。Webサイトをより多様な環境に対応させ、誰にでもアクセスできるようにするには、この概念が必要不可欠だといえるでしょう。
おすすめレンタルサーバー
  • 「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • 稼働率99.99%以上、容量10GB、月額1,260円からのレンタルサーバーです。サポート体制が充実しており、専任のサポートスタッフを置くことで、平均3時間のクイックレスポンスを実現してます。
  • 100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。
  • サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。