MochiuWiki : SUSE, EC, PCB

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

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

ビジュアルウィキテキスト
ページの作成:「== 概要 == divタグは、HTMLにおける基本的なブロックレベル要素の1つである。<br> コンテンツをグループ化して、論理的なセクションを作成するために使用する。<br> <br> セマンティクスの観点から、header、nav、main、article、section等の意味的要素の使用することを推奨する。<br> <br> divタグは、これらの意味的要素で表現できない場合のフォールバックと…」
 
 
(同じ利用者による、間の2版が非表示)
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>
<u>※注意</u><br>
<u>class属性の値は必ずスタイル定義と一致させる必要がある。</u><br>
<u>HTMLとCSSは常に対応関係を保つようにする必要がある。</u><br>
<br>
<u>未定義のクラスが存在する場合、以下に示すような問題が発生する。</u><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;
  }
 
  /* ナビゲーションメニューのスタイル */
  .nav-menu {
    display: flex;
    gap: 20px;  /* メニュー項目間の間隔 */
  }
.nav-menu a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    transition: color 0.3s ease;
  }
  .nav-menu a:hover {
    color: #007bff;  /* ホバー時の色変更 */
  }
  /* メインコンテンツエリアの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;
  }
  /* ロゴエリアのスタイル */
  .logo {
    max-width: 200px;
  }
  .logo img {
    width: 100%;
    height: auto;
  }
  /* 記事カードのスタイル */
  .article-card {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .article-card h2 {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    color: #333;
  }
  .article-card p {
    margin: 0;
    color: #666;
    line-height: 1.6;
  }
  /* プロフィールウィジェットのスタイル */
  .profile-widget {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
  }
  .profile-widget img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  .profile-widget p {
    color: #555;
    line-height: 1.4;
  }
  /* コピーライトのスタイル */
  .copyright {
    font-size: 0.9em;
    color: #777;
  }
  .copyright p {
    margin: 0;
  }
  </style>
  </style>
  </syntaxhighlight>
  </syntaxhighlight>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=HTML_-_divタグ」から取得