CSS横並び徹底解説！初心者でもできる作り方・使い方・応用方法【サンプルコード付き】

はじめに
【応用例とサンプルコード】
まとめ

はじめに

この記事では、初心者でも分かりやすいように、CSS横並びの作り方、使い方、応用方法を徹底解説します。

サンプルコード付きで学べるので、手順を追って理解し、スキルアップしましょう！

【CSS横並びの基本】

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトを制御するための言語です。

CSS横並びは、複数の要素を横に並べるレイアウト手法のことで、ウェブデザインにおいて頻繁に使用されます。

横並びには、いくつかの方法があります。

それぞれの方法とその使い方を解説します。

【方法1: floatを使った横並び】

floatは、要素を左または右に寄せるためのプロパティです。

横並びを実現するためには、次のようにfloatを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

上記のサンプルコードでは、3つのdiv要素が横並びになります。

要素にfloat: left;を指定することで、左から順番に横並びになります。

【方法2: inline-blockを使った横並び】

inline-blockは、要素をインライン要素のように扱いつつ、ブロック要素のような高さや幅を指定できるプロパティです。

次のように指定して横並びを実現します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .container {
      display: flex;
    }
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

このサンプルコードでは、3つのdiv要素が横並びになります。

親要素にdisplay: flex;を指定することで、子要素が横並びになります。

【方法4: Gridを使った横並び】

Grid（CSS Grid Layout）は、2次元のグリッドシステムを提供するレイアウトモデルです。

次のように指定して横並びを実現します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .box {
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

このサンプルコードでは、3つのdiv要素が横並びになります。

親要素にdisplay: grid;およびgrid-template-columns: repeat(3, 1fr);を指定することで、子要素が横並びになります。

【応用例とサンプルコード】

それぞれの横並び手法を応用した例を紹介します。

●floatを使った横並びの応用例: サイドバー付きレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .sidebar {
      width: 200px;
      height: 100%;
      border: 1px solid black;
      float: left;
    }
    .content {
      margin-left: 200px;
      border: 1px solid black;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="sidebar"></div>
  <div class="content"></div>
</body>
</html>

このサンプルコードでは、サイドバーとメインコンテンツが横並びに配置されます。

●Flexboxを使った横並びの応用例: ナビゲーションバー

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .navbar {
      display: flex;
      justify-content: space-around;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    .nav-item {
      padding: 10px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <ul class="navbar">
    <li class="nav-item">Home</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Contact</li>
  </ul>
</body>
</html>

このサンプルコードでは、ナビゲーションバーの各アイテムが横並びに配置され、間隔が均等になります。

●Gridを使った横並びの応用例: カード型レイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }
    .card {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
    <div class="card">Card 6</div>
  </div>
</body>
</html>

このサンプルコードでは、6つのカードが3列のグリッドレイアウトで横並びに配置されます。