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

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=HTML - divタグです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集

ビジュアルウィキテキスト

@@ 45行目: / 45行目: @@
 * レスポンシブデザインの実装が容易になる。
 * 将来的な拡張性が確保される。
+<br>
+<u>※注意</u><br>
+<u>class属性の値は必ずスタイル定義と一致させる必要がある。</u><br>
+<u>HTMLとCSSは常に対応関係を保つようにする必要がある。</u><br>
+<br>
+<u>未定義のクラスが存在する場合、以下に示すような問題が発生する。</u><br>
+* スタイルが適用されず、意図したデザインにならない。
+* 他の開発者が混乱する可能性がある。
+* コードの保守性が低下する。
 <br><br>
@@ 117行目: / 126行目: @@
       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;  /* ホバー時の色変更 */
     }
@@ 141行目: / 167行目: @@
       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>