CSS横並び徹底解説!初心者でもできる作り方・使い方・応用方法

CSS, 横並び, Flexbox, Grid, レイアウト, 初心者, サンプルコード, 作り方, 使い方, 応用方法, float, inline-blockCSS
この記事は約8分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事では、初心者でも分かりやすいように、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列のグリッドレイアウトで横並びに配置されます。

まとめ

この記事では、CSS横並びの作り方、使い方、応用方法を初心者目線で詳しく解説しました。

float、inline-block、Flexbox、Gridを使った横並びの方法と、それぞれの応用例を学びました。

これらの知識を活用し、ウェブページのデザインやレイアウトを自由にコントロールできるようになりましょう。

ぜひ実践して、スキルアップを目指してください!