HTML と CSS を使用して Web サイドバー レイアウトを作成する方法

HTML と CSS は、最新の Web デザインで最も一般的に使用される 2 つのテクノロジです。これらを使用して、サイドバー レイアウトなど、さまざまな種類の Web ページ レイアウトを作成できます。この記事では、HTMLとCSSを使って簡単なWebページのサイドバーレイアウトを作成する方法を、具体的なコード例を交えて詳しく紹介します。

まず、基本的な HTML ドキュメント構造を作成します。

<div class="container">
  <div class="sidebar">
    <ul class="sidebar-menu">
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</div>

上記のコードでは、コンテナーを使用してサイドバー (sidebar) とコンテンツ領域 (content) をラップします。 ）。サイドバーは、メニュー項目のコンテナとして順序なしリスト (ul) を使用します。

次に、CSS を使用してサイドバー レイアウトのスタイルを定義します。外部 CSS スタイルシート ファイルに次のコードを追加します。

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #F2F2F2;
  padding: 20px;
}

.sidebar-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.content {
  flex-grow: 1;
  padding: 20px;
}

上記のコードでは、サイドバー レイアウトはフレックスボックス レイアウトを使用して実装されています。 .container クラスは display: flex; に設定され、フレキシブル ボックスになります。

.sidebar クラスは、幅 (200px)、背景色 (#F2F2F2)、パディング (20px) などのサイドバーのスタイルを定義します。

.sidebar-menu クラスは、デフォルトのリスト スタイル (list-style-type: none;) の削除など、メニュー項目のスタイルを定義します。パディングとマージンを 0 に設定します。

.sidebar-menu li クラスは、下マージン (10px) を含む各メニュー項目のスタイルを定義します。

.content クラスはコンテンツ領域のスタイルを定義し、flex-grow: 1; を使用して残りのスペースを埋め、パディング (20px) を設定します。 。

これで、シンプルな Web ページのサイドバー レイアウトが完成しました。必要に応じて <li> タグ内のメニュー項目を変更したり、コンテンツ領域に他の HTML 要素を追加したりできます。

要約すると、HTML と CSS を使用して Web ページのサイドバー レイアウトを簡単に作成できます。フレックスボックスといくつかの基本的なスタイル定義を使用すると、シンプルでありながら効果的なレイアウトを実現できます。この記事が、HTML と CSS を理解し、サイドバー レイアウトを作成するために使用するのに役立つことを願っています。

(ワード数: 455)

以上がHTML と CSS を使用して Web サイドバー レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。