HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでドキュメントにセクションを作成する方法【divタグの使い方】

ドキュメントにセクション（区分け）を追加するには、<div>タグを使用します。HTMLの<div>タグは、ドキュメント内の一つのセクションを定義するための汎用的な要素です。divタグを使えば、複数のHTML要素をひとつの大きなまとまりとしてグループ化し、CSSを使ってまとめてスタイルを適用することができます。

セクション作成のサンプルコード

実際にセクションを作成するには、以下のコードを参考にしてください。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML div Tag</title>
      <link rel = "stylesheet" href = "style2.css">
   </head>
   <body>
      <div id = "contentinfo">
         <p>当サイトへようこそ。さまざまなテーマのチュートリアルを提供しています。</p>
      </div>
   </body>
</html>

次に、読み込んでいる外部CSSファイル「style2.css」の内容です。

#contentinfo p {
   line-height: 20px;
   margin: 30px;
   padding-bottom: 20px;
   text-align: justify;
   width: 140px;
   color: red;
}

補足：意味的な区切りにはsectionタグも活用しよう

HTML5では、文書構造に意味を持たせるためのセマンティックなタグとして、<section>や<article>なども用意されています。単なるレイアウト調整やスタイリング目的のグループ化であれば<div>が適していますが、「章」や「節」のような意味的な区切りを表したい場合は、<section>タグの使用を検討すると、よりアクセシビリティとSEOに配慮したマークアップになります。用途に応じて両者を使い分けることが、質の高いHTML文書を作るポイントです。

  1. HTMLで非表示のコメントを作成する方法

    HTMLで非表示のコメントを作成するには、<!-- を記述してコメントを開始し、--> で閉じます。このタグの間に書かれた内容はすべてブラウザ上では非表示になります。コメント機能は、後からコードを見直したり修正したりする必要がある開発者にとって非常に便利です。適切なコメントを残しておくことで、コードの意図や構造を簡単に理解できるようになります。コメントは「自分自身へのメモ」と捉えることもできます。同時に、HTMLコードを一時的に無効化したい場合にも活用でき、コメントアウトされた部分はブラウザに一切表示されません。サンプルコード以下のコードを実行して、HTMLにおける非表示コメントの

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト