CSSで横幅いっぱいのレイアウトを作る方法と応用例

はじめに
●横幅いっぱいのレイアウトを作る方法
●横幅いっぱいのレイアウトの応用例
- ①ナビゲーションバー
- ②フルスクリーンのヒーローセクション
まとめ

はじめに

ウェブページを作る上で、レイアウトは非常に重要です。

横幅いっぱいに広がるレイアウトは、見やすさや美しさに加え、ユーザー体験を向上させることができます。

しかし、CSS初心者にとっては、横幅いっぱいのレイアウトを作ることは難しいかもしれません。

そこで、本記事ではCSSで横幅いっぱいのレイアウトを作る方法と応用例を解説します。

サンプルコードも用意しているので、初心者でも理解しやすい内容となっています。

●横幅いっぱいのレイアウトを作る方法

まずは、横幅いっぱいのレイアウトを作る方法を解説します。

次の3つの方法があります。

①width: 100%;

要素にwidth: 100%;を指定することで、親要素の横幅いっぱいに要素を広げることができます。

例えば、次のHTMLコードを見てみましょう。

<div class="container">
  <div class="box"></div>
</div>

.containerが親要素で、.boxが要素です。

.boxを横幅いっぱいに広げるには、次のCSSコードを記述します。

.box {
  width: 100%;
}

これで、.boxが親要素の横幅いっぱいに広がります。

②margin: 0;

要素にmargin: 0;を指定することで、要素の余白を取り除くことができます。

この方法は、通常はbody要素に対して指定します。

次のCSSコードを見てみましょう。

body {
  margin: 0;
}

これで、body要素の余白を取り除くことができます。

③box-sizing: border-box;

要素のbox-sizingプロパティにborder-boxを指定することで、要素のborderやpaddingを含めた幅を指定することができます。

次のCSSコードを見てみましょう。

* {
  box-sizing: border-box;
}

このように、全ての要素に対してbox-sizingプロパティを指定することで、要素の幅を指定する際に、borderやpaddingも含めた幅を指定することができます。

これらの方法を組み合わせて使用することで、横幅いっぱいのレイアウトを作ることができます。

●横幅いっぱいのレイアウトの応用例

次に、横幅いっぱいのレイアウトを応用した実例を見てみましょう。

①ナビゲーションバー

ナビゲーションバーは、サイトのトップページから他のページへの移動を促すためのものです。

横幅いっぱいに広がるナビゲーションバーを作ることで、サイトの全体像を把握しやすくすることができます。

HTMLとCSSのコード例です。

<nav class="navbar">
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>
<!-- HTML -->

.navbar {
  background-color: #333;
  color: #fff;
}

.navbar ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar li {
  width: 25%;
}

.navbar a {
  display: block;
  padding: 1rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
/* CSS */

上記のコードでは、navbarクラスを持つ要素をナビゲーションバーとして定義し、ul要素にflexboxを使用して、リストのアイテムを横に並べます。

各リストアイテムの幅は25%に指定し、リストアイテムにはa要素を含めます。

a要素には、ブロック要素として表示することで、paddingを指定しても幅が変わらないようにしています。

②フルスクリーンのヒーローセクション

フルスクリーンのヒーローセクションは、サイトの印象を強めることができます。

HTMLとCSSのコード例です。

<section class="hero-section">
  <div class="hero-content">
    <h1>Welcome to My Site</h1>
    <p>This is the best place to find what you need.</p>
    <button>Learn More</button>
  </div>
</section>
<!-- HTML -->

.hero-section {
  height: 100vh;
  background-image: url('hero-bg.jpg');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.hero-content button {
  font-size: 1.5rem;
  background-color: #fff;
  color: #333;
  border: none;
  padding: 1rem 2rem;
  border-radius: 2rem;
}
/* CSS */

上記のコードでは、hero-sectionクラスを持つ要素に対して、height: 100vh;を指定して画面いっぱいに広がるようにしています。

背景画像には、background-imageプロパティを使用して、hero-bg.jpgを指定しています。

hero-contentクラスを持つ要素には、テキストとボタンを配置しています。