MochiuWiki : SUSE, EC, PCB

「HTML - divタグ」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

新しい編集 →
ビジュアルウィキテキスト
ページの作成:「== 概要 == divタグは、HTMLにおける基本的なブロックレベル要素の1つである。<br> コンテンツをグループ化して、論理的なセクションを作成するために使用する。<br> <br> セマンティクスの観点から、header、nav、main、article、section等の意味的要素の使用することを推奨する。<br> <br> divタグは、これらの意味的要素で表現できない場合のフォールバックと…」
 
3行目: 3行目:
コンテンツをグループ化して、論理的なセクションを作成するために使用する。<br>
コンテンツをグループ化して、論理的なセクションを作成するために使用する。<br>
<br>
<br>
セマンティクスの観点から、header、nav、main、article、section等の意味的要素の使用することを推奨する。<br>
セマンティクスの観点から、header、nav、main、article、section等の意味的要素を使用することを推奨する。<br>
<br>
divタグは、これらの意味的要素で表現できない場合のフォールバックとして使用するのが最適である。<br>
divタグは、これらの意味的要素で表現できない場合のフォールバックとして使用するのが最適である。<br>
<br>
<br>
23行目: 22行目:
  <!-- スタイリングの例 -->
  <!-- スタイリングの例 -->
  <div class="container">
  <div class="container">
     <div class="header">ヘッダー</div>
     <div class="header">ヘッダ</div>
     <div class="content">メインコンテンツ</div>
     <div class="content">メインコンテンツ</div>
  </div>
  </div>
   
   
<!-- スタイル定義 -->
  <style>
  <style>
  .container {
  .container {
37行目: 37行目:
     padding: 20px;
     padding: 20px;
  }
  }
</style>
</syntaxhighlight>
<br>
このような構造化されたマークアップにより、以下に示すメリットが得られる。<br>
* コードの可読性が向上する。
* 保守性が高まる。
* レスポンシブデザインの実装が容易になる。
* 将来的な拡張性が確保される。
<br><br>
== 使用例 ==
以下の例では、一般的なWebサイトのレイアウトを示している。<br>
<br>
各divには明確な役割があり、それぞれにクラス名が付けられている。<br>
また、コメントによって各セクションの目的が明確になっており、CSSでは基本的なレイアウトとスタイリングを定義している。<br>
<br>
<syntaxhighlight lang="html">
<!-- サイト全体を包むコンテナ -->
<div class="site-wrapper">
  <!-- ヘッダーセクション: ロゴとナビゲーションを含む -->
  <div class="header">
    <!-- ロゴを配置するエリア -->
    <div class="logo">
      <img src="logo.png" alt="サイトロゴ">
    </div>
    <!-- ナビゲーションメニュー -->
    <div class="nav-menu">
      <a href="#home">ホーム</a>
      <a href="#about">概要</a>
      <a href="#contact">お問い合わせ</a>
    </div>
  </div>
  <!-- メインコンテンツエリア: 2カラムレイアウト -->
  <div class="main-content">
    <!-- 左カラム: 記事一覧 -->
    <div class="content-left">
      <!-- 記事カード -->
      <div class="article-card">
        <h2>記事タイトル</h2>
        <p>記事の概要テキストがここに入ります。</p>
      </div>
    </div>
    <!-- 右カラム: サイドバー -->
    <div class="content-right">
      <!-- プロフィールウィジェット -->
      <div class="profile-widget">
        <img src="profile.jpg" alt="プロフィール画像">
        <p>プロフィール説明文</p>
      </div>
    </div>
  </div>
  <!-- フッタセクション -->
  <div class="footer">
    <!-- コピーライト情報 -->
    <div class="copyright">
      <p>&copy; 2024 サンプルサイト</p>
    </div>
  </div>
</div>
<!-- スタイル定義 -->
<style>
  /* サイト全体のコンテナスタイル */
  .site-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  /* ヘッダセクションのスタイル */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  /* メインコンテンツエリアの2カラムレイアウト */
  .main-content {
    display: flex;
    gap: 30px;
    margin: 40px 0;
  }
  /* 左カラムのスタイル (記事一覧) */
  .content-left {
    flex: 2;  /* 右カラムより広いスペースを確保 */
  }
  /* 右カラムのスタイル (サイドバー) */
  .content-right {
    flex: 1;
  }
  /* フッタセクションのスタイル */
  .footer {
    text-align: center;
    padding: 20px 0;
    background-color: #f5f5f5;
  }
  </style>
  </style>
  </syntaxhighlight>
  </syntaxhighlight>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=HTML_-_divタグ」から取得