MENU
  1. ホーム
  2. CSS
  3. 【CSS】gapの使い方：Flexbox・Gridの余白指定とmarginとの違い

【CSS】gapの使い方：Flexbox・Gridの余白指定とmarginとの違い

CSS
css-gap

CSSのgapプロパティは、FlexboxやGridレイアウトにおいて要素間の「隙間」だけを直感的に指定できる余白管理に必須の機能です。

本記事では、従来のmarginとの違いや縦横の個別指定、実務で頻発する「効かない」「はみ出す」といったトラブルの解決策を解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

gapプロパティとは：基本とmarginとの違い

Web制作において、要素と要素の間の「余白」をコントロールすることはレイアウトの基本です。

gapは、一言で言えば「アイテム同士の隙間を簡単に作るプロパティ」です。

従来はmarginを使って複雑な計算をしていましたが、gapの登場によって余白の使い分けがシンプルになりました。

ここでは、コーディングで必須となるgapの使い方について解説します。

gapプロパティとは：基本とmarginとの違い
  • アイテム間の隙間だけを一括指定できる仕組み
  • FlexboxとGridでの基本的な書き方
  • 対応ブラウザとSafariの注意点

アイテム間の隙間だけを一括指定できる仕組み

gapプロパティの特徴は、「親要素の端には余白を作らず、要素と要素の『間』にだけ余白を作る」という点です。

従来の手法では、複数の箱（div）を並べる際、margin-right: 20px;を指定すると、一番右の要素の外側にも不要な20pxの余白ができてしまい、レイアウトが崩れる原因になっていました。

並んだ要素間の隙間にはmarginを使わずgapを使用してください。

親要素の内側の余白にはpaddingを使います。

これで余白の計算狂いやレイアウト崩れは防げます。

❌ 古い手法（marginを使用）：最後の要素の余白を消す手間がかかる

Box
Box
Box

⭕️ 現代の手法（gapを使用）：一行で「間」だけを開ける

Box
Box
Box
HTMLコード表示
<div class="gap-sec1-wrapper">
  
  <p class="gap-caption">❌ 古い手法（marginを使用）：最後の要素の余白を消す手間がかかる</p>
  <div class="old-margin-container">
    <div class="g-box">Box</div>
    <div class="g-box">Box</div>
    <div class="g-box">Box</div>
  </div>

  <p class="gap-caption" style="margin-top:20px;">⭕️ 現代の手法（gapを使用）：一行で「間」だけを開ける</p>
  <div class="modern-gap-container">
    <div class="g-box">Box</div>
    <div class="g-box">Box</div>
    <div class="g-box">Box</div>
  </div>

</div>
CSSコード表示
.gap-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}
.gap-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}
.g-box {
  background-color: #0d6efd;
  color: white;
  padding: 15px 30px;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

/* ❌ marginを使った古いやり方 */
.old-margin-container {
  display: flex;
  background-color: #e9ecef;
  padding: 15px;
  border: 1px solid #ced4da;
}
.old-margin-container .g-box {
  margin-right: 20px; /* 右側に余白を作る */
}
.old-margin-container .g-box:last-child {
  margin-right: 0; /* 💡 最後の要素だけ余白を消す（面倒！） */
}

/* ⭕️ gapを使った現代のやり方 */
.modern-gap-container {
  display: flex;
  gap: 20px; /* 💡 これ一行で解決！端には余白ができません */
  background-color: #e9ecef;
  padding: 15px;
  border: 1px solid #198754;
}

内側の余白であるpaddingや外側の余白であるmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

FlexboxとGridでの基本的な書き方

gapプロパティは、もともとGrid専用の機能として誕生しましたが、現在ではFlexboxでも同じように使えます。

記述方法はシンプルで、縦と横の隙間を一括で指定することも個別に指定することも可能です。

  • gap: 20px; （縦・横ともに20pxの隙間）
  • gap: 10px 30px; （縦に10px、横に30pxの隙間）
  • row-gap: 10px; （縦の隙間だけを指定）
  • column-gap: 30px; （横の隙間だけを指定）

カード一覧のレイアウトを組む際は、縦方向（row-gap）の余白を横方向（column-gap）よりも少し広めに設定（例：gap: 30px 20px;）すると、上下のコンテンツの区切りが明確になり、ユーザーにとって視認性の高いデザインになります。

Flexbox（縦横の隙間を一括指定：gap: 15px 30px;）

Card 1
Card 2
Card 3
Card 4

Grid（行と列の隙間を一括指定：gap: 20px;）

Grid A
Grid B
Grid C
Grid D
HTMLコード表示
<div class="gap-sec2-wrapper">

  <p class="gap-caption">Flexbox（縦横の隙間を一括指定：gap: 15px 30px;）</p>
  <div class="gap-flex-demo">
    <div class="g-card">Card 1</div>
    <div class="g-card">Card 2</div>
    <div class="g-card">Card 3</div>
    <div class="g-card">Card 4</div>
  </div>

  <p class="gap-caption" style="margin-top:30px;">Grid（行と列の隙間を一括指定：gap: 20px;）</p>
  <div class="gap-grid-demo">
    <div class="g-card-grid">Grid A</div>
    <div class="g-card-grid">Grid B</div>
    <div class="g-card-grid">Grid C</div>
    <div class="g-card-grid">Grid D</div>
  </div>

</div>
CSSコード表示
.gap-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

/* --- Flexboxでのgap指定 --- */
.gap-flex-demo {
  display: flex;
  flex-wrap: wrap; /* 折り返しを有効化 */
  /* 💡 縦(行)に15px、横(列)に30pxの隙間を指定 */
  gap: 15px 30px; 
  background-color: #e9ecef;
  padding: 15px;
}
.g-card {
  width: calc((100% - 30px) / 2); /* 2列にする計算 */
  background-color: #0dcaf0;
  color: #000;
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
}

/* --- CSS Gridでのgap指定 --- */
.gap-grid-demo {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 均等の2列 */
  /* 💡 縦横ともに20pxの隙間を指定（grid-gapは使わない！） */
  gap: 20px; 
  background-color: #e9ecef;
  padding: 15px;
}
.g-card-grid {
  background-color: #6610f2;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
}

Flexboxの使い方を詳しく知りたい人は「【CSS】flexの使い方：justify-content・align-items・gap」を一読ください。

また、Gridの使い方を詳しく知りたい人は「【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ」を一読ください。

【CSS】flexの使い方：justify-content・align-items・gap
【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ

対応ブラウザとSafariの注意点

便利なgapプロパティですが、実務で導入する際には「対応ブラウザ」の確認が欠かせません。

Gridにおけるgapは古くからサポートされていましたが、Flexboxにおけるgapのサポートはブラウザによって時期にズレがありました。

現在のWeb制作においては、iOS 14未満のシェアは極めて低いため、基本的にはgapを使用して問題ありません。

しかし、もし官公庁のサイトや医療系など「極端に古いデバイス（iOS 13以下など）もサポート必須」という厳しい要件がある場合は、gapを使わずにmarginのネガティブマージン手法を使うか、CSSの@supports機能を使って「gapに対応していないブラウザ向けのフォールバック（代替処理）」を書くのがよいです。

🌐 現代の標準的な書き方（ほぼすべてのモダンブラウザで安全）

ボタン 1
ボタン 2
/* 💡 現在の実務では、以下のシンプルな記述でOKです */
.button-group {
  display: flex;
  gap: 20px; /* Safari 14.1以降で動作 */
}

/* 💡 （参考）もし超レガシー端末をサポートする要件がある場合 */
@supports not (gap: 20px) {
  .button-group > * { margin-right: 20px; }
  .button-group > *:last-child { margin-right: 0; }
}
HTMLコード表示
<div class="gap-sec3-wrapper">
  
  <p class="gap-caption">🌐 現代の標準的な書き方（ほぼすべてのモダンブラウザで安全）</p>
  <div class="gap-modern-safe">
    <div class="g-safe-btn">ボタン 1</div>
    <div class="g-safe-btn">ボタン 2</div>
  </div>

  <div class="gap-sec3-code">
    /* 💡 現在の実務では、以下のシンプルな記述でOKです */<br>
    <span class="hl-blue">.button-group</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">gap: 20px;</span> /* Safari 14.1以降で動作 */<br>
    }<br><br>

    /* 💡 （参考）もし超レガシー端末をサポートする要件がある場合 */<br>
    <span class="hl-comment">@supports not (gap: 20px) {</span><br>
      <span class="hl-comment">.button-group > * { margin-right: 20px; }</span><br>
      <span class="hl-comment">.button-group > *:last-child { margin-right: 0; }</span><br>
    <span class="hl-comment">}</span>
  </div>

</div>
CSSコード表示
.gap-sec3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.gap-modern-safe {
  display: flex;
  gap: 20px; /* 現代はこれで安全 */
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.g-safe-btn {
  background-color: #212529;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: bold;
}

.gap-sec3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

縦・横の余白を個別に指定する

要素を並べる際、「縦横どちらにも同じ隙間を空けたい」場面ばかりではありません。

「横方向の隙間」だけを空けたい場合や「縦方向の隙間」だけを空けたい場合もあります。

gapプロパティは、縦と横の余白を個別に制御する専用プロパティを備えています。

ここでは、実務で使う縦横の個別指定と「マイナス値」に関するトラブルを解説します。

縦・横の余白を個別に指定する
  • 上下の余白を指定するrow-gap
  • 左右の余白を指定するcolumn-gap
  • gapにautoやマイナス（負の値）は指定できる？

上下の余白を指定するrow-gap

複数行にわたるレイアウトにおいて、行と行の間、つまり「上下の隙間」だけを指定したい場合はrow-gapを使用します。

Gridでも、折り返しを有効にしたFlexboxでも同様に機能します。

縦並びのリストや要素が折り返して複数行になるレイアウトで上下の隙間を作りたい場合は、アイテムにmarginをつけるのではなく、親要素にdisplay: flex; flex-direction: column; row-gap: 20px;のように指定するのがよいです。

縦の隙間（row-gap）だけを指定した縦並びリスト

  • リスト項目 1（外側には余白ができません）
  • リスト項目 2
  • リスト項目 3
/* 💡 親要素にrow-gapを指定 */
.list-container {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  row-gap: 15px; /* 💡 アイテム間の上下にだけ15pxの隙間を作る */
}

.list-item {
  /* margin-bottom: 15px; はもう不要です！ */
}
HTMLコード表示
<div class="gap-row-wrapper">
  
  <p class="gap-row-caption">縦の隙間（row-gap）だけを指定した縦並びリスト</p>
  
  <ul class="gap-row-list">
    <li class="gap-row-item">リスト項目 1（外側には余白ができません）</li>
    <li class="gap-row-item">リスト項目 2</li>
    <li class="gap-row-item">リスト項目 3</li>
  </ul>

  <div class="gap-row-code">
    /* 💡 親要素にrow-gapを指定 */<br>
    <span class="hl-blue">.list-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">flex-direction: column;</span> /* 縦並びに変更 */<br>
      <span class="hl-red">row-gap: 15px;</span> /* 💡 アイテム間の上下にだけ15pxの隙間を作る */<br>
    }<br><br>

    <span class="hl-blue">.list-item</span> {<br>
      <span class="hl-comment">/* margin-bottom: 15px; はもう不要です！ */</span><br>
    }
  </div>

</div>
CSSコード表示
.gap-row-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.gap-row-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* 💡 親要素 */
.gap-row-list {
  display: flex;
  flex-direction: column;
  row-gap: 15px; /* ここがポイント */
  list-style: none;
  padding: 15px;
  margin: 0 0 20px 0;
  background-color: #e9ecef;
  border: 1px dashed #adb5bd;
  border-radius: 4px;
}

/* 💡 子要素 */
.gap-row-item {
  background-color: #0d6efd;
  color: #fff;
  padding: 15px;
  border-radius: 4px;
  font-weight: bold;
  /* marginは一切指定しません */
}

.gap-row-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }
.hl-comment { color: #6c757d; font-style: italic; }

左右の余白を指定するcolumn-gap

アイテムを横に並べた際の左右の隙間だけを指定したい場合はcolumn-gapを使用します。

例えば、「要素を折り返した時に行の間（上下）には隙間を作りたくないが、列の間（左右）には隙間を作りたい」という特殊なケースで活躍します。

横並びのボタン群やナビゲーションメニューの隙間管理は、親要素（ulやnavなど）にdisplay: flex; column-gap: 20px;を一行書くだけで完結させます。

子要素のmarginは削除して問題ありません。

横の隙間（column-gap）だけを指定したメニュー

/* 💡 親要素にcolumn-gapを指定 */
.nav-menu {
  display: flex;
  column-gap: 30px; /* 💡 アイテム間の左右にだけ30pxの隙間を作る */
}

.nav-link {
  /* ❌ 過去の手法： margin-right: 30px; は不要です */
  /* ❌ 過去の手法： &:last-child { margin-right: 0; } も不要です */
}
HTMLコード表示
<div class="gap-col-wrapper">
  
  <p class="gap-col-caption">横の隙間（column-gap）だけを指定したメニュー</p>
  
  <nav class="gap-col-nav">
    <a href="#" class="gap-col-link">ホーム</a>
    <a href="#" class="gap-col-link">サービス</a>
    <a href="#" class="gap-col-link">会社概要</a>
    <a href="#" class="gap-col-link">お問い合わせ</a>
  </nav>

  <div class="gap-col-code">
    /* 💡 親要素にcolumn-gapを指定 */<br>
    <span class="hl-blue">.nav-menu</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">column-gap: 30px;</span> /* 💡 アイテム間の左右にだけ30pxの隙間を作る */<br>
    }<br><br>

    <span class="hl-blue">.nav-link</span> {<br>
      <span class="hl-comment">/* ❌ 過去の手法： margin-right: 30px; は不要です */</span><br>
      <span class="hl-comment">/* ❌ 過去の手法： &:last-child { margin-right: 0; } も不要です */</span><br>
    }
  </div>

</div>
CSSコード表示
.gap-col-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.gap-col-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* 💡 親要素 */
.gap-col-nav {
  display: flex;
  column-gap: 30px; /* ここがポイント */
  padding: 20px;
  margin-bottom: 20px;
  background-color: #343a40;
  border-radius: 4px;
  justify-content: center;
}

/* 💡 子要素 */
.gap-col-link {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  /* marginは一切指定しません */
}
.gap-col-link:hover {
  color: #0dcaf0;
}

.gap-col-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

gapにautoやマイナス（負の値）は指定できる？

要素同士を重ねるデザインを作る際、「gapのマイナス」で隙間を詰められないかと考え、検索する人が後を絶ちません。

また、「gapのauto」を指定して自動計算させようとする人もいます。

結論から言うと、gapプロパティにマイナス（負の値）を指定することはCSSの仕様上できません。

要素同士を「重ねる（マイナスの余白を作る）」デザインを実装する場合は、親要素のgapは使わず、子要素自身にmargin-left: -15px;のようなネガティブマージンを指定してください。

これが唯一かつ安全な「重なり」の表現方法です。

アバターを重ねるUI（gapではなくmarginを使う）

❌ 失敗：gap: -15px; （無視されて重ならない）
A
B
C
⭕️ 正解：子要素に margin-left: -15px;
A
B
C
/* ❌ 初心者のミス：gapにマイナスを指定してしまう */
.wrong-container {
  display: flex;
  gap: -15px; /* 💡 エラーになり無視されます */
}

/* ⭕️ プロの鉄則：重ねる時は子要素のmarginを使う */
.correct-container {
  display: flex;
}
.correct-container .avatar + .avatar {
  margin-left: -15px; /* 💡 2つ目以降の要素を左に食い込ませる */
}
HTMLコード表示
<div class="gap-neg-wrapper">
  
  <p class="gap-neg-caption">アバターを重ねるUI（gapではなくmarginを使う）</p>
  
  <div style="margin-bottom: 20px;">
    <span style="font-size:12px; font-weight:bold; color:#dc3545;">❌ 失敗：gap: -15px; （無視されて重ならない）</span>
    <div class="gap-neg-wrong">
      <div class="avatar">A</div>
      <div class="avatar">B</div>
      <div class="avatar">C</div>
    </div>
  </div>

  <div>
    <span style="font-size:12px; font-weight:bold; color:#198754;">⭕️ 正解：子要素に margin-left: -15px;</span>
    <div class="gap-neg-correct">
      <div class="avatar">A</div>
      <div class="avatar">B</div>
      <div class="avatar">C</div>
    </div>
  </div>

  <div class="gap-col-code" style="margin-top:20px;">
    /* ❌ 初心者のミス：gapにマイナスを指定してしまう */<br>
    <span class="hl-blue">.wrong-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">gap: -15px;</span> /* 💡 エラーになり無視されます */<br>
    }<br><br>

    /* ⭕️ プロの鉄則：重ねる時は子要素のmarginを使う */<br>
    <span class="hl-blue">.correct-container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
    }<br>
    <span class="hl-blue">.correct-container .avatar + .avatar</span> {<br>
      <span class="hl-red">margin-left: -15px;</span> /* 💡 2つ目以降の要素を左に食い込ませる */<br>
    }
  </div>

</div>
CSSコード表示
.gap-neg-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.gap-neg-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

/* 共通のアバターデザイン */
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #6f42c1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid #fff; /* 重なった時に境界線を見せる */
}

/* ❌ 失敗例 */
.gap-neg-wrong {
  display: flex;
  gap: -15px; /* 無視される */
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
  margin-top: 5px;
}

/* ⭕️ 成功例 */
.gap-neg-correct {
  display: flex;
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
  margin-top: 5px;
}
/* 💡 2つ目以降のアバターにマイナスマージンをかける（隣接セレクタを使用） */
.gap-neg-correct .avatar + .avatar {
  margin-left: -15px;
}

外側の余白であるmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

要素別・レイアウト別のgap活用テクニック

gapプロパティの基本を理解したら、実際のWeb制作で頻出する具体的なパーツ（要素）ごとの使い方を見ていきましょう。

リストやボタンの配置、テーブル（表組み）、テキストの行間、要素によってはgapが効かなかったり、別のプロパティを使うべき場面が存在します。

実務で迷わないための活用テクニックと代替案を解説します。

要素別・レイアウト別のgap活用テクニック
  • リストやボタン間の余白を整える
  • テーブルのセル・行間に余白を作る方法
  • テキスト行間や下線・ボーダーの隙間は別プロパティ

リストやボタン間の余白を整える

Webサイトのナビゲーションやタグ一覧など、リスト要素（ulとli）を並べる場合や複数のボタンを並べる場合、あるいは単なるブロックを並べる場合においてgapは威力を発揮します。

リストやボタン群を作る際は、親要素のulやdivにdisplay: flex;（またはgrid）を設定し、gapを指定します。

子要素であるliやbuttonの間にだけ余白が生まれ、marginのように端の余白を打ち消す作業から解放されます。

1. リスト（ul/li）の余白

  • お知らせ
  • 会社概要
  • 採用情報

2. ボタン群（div/button）の余白

/* 💡 リストの親要素（ul）に指定 */
ul.tech-list {
  display: flex;
  list-style: none;
  gap: 20px; /* 💡 liの間に20pxの隙間ができる */
}

/* 💡 ボタンを囲む親要素（div）に指定 */
div.tech-btn-group {
  display: flex;
  gap: 15px; /* 💡 ボタンの間に15pxの隙間ができる */
}
HTMLコード表示
<div class="tech-sec1-wrapper">
  
  <p class="tech-caption">1. リスト（ul/li）の余白</p>
  <ul class="tech-list">
    <li class="tech-list-item">お知らせ</li>
    <li class="tech-list-item">会社概要</li>
    <li class="tech-list-item">採用情報</li>
  </ul>

  <p class="tech-caption" style="margin-top: 20px;">2. ボタン群（div/button）の余白</p>
  <div class="tech-btn-group">
    <button class="tech-btn tech-btn-primary">送信する</button>
    <button class="tech-btn tech-btn-secondary">キャンセル</button>
  </div>

  <div class="tech-code">
    /* 💡 リストの親要素（ul）に指定 */<br>
    <span class="hl-blue">ul.tech-list</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">list-style: none;</span><br>
      <span class="hl-red">gap: 20px;</span> /* 💡 liの間に20pxの隙間ができる */<br>
    }<br><br>

    /* 💡 ボタンを囲む親要素（div）に指定 */<br>
    <span class="hl-blue">div.tech-btn-group</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">gap: 15px;</span> /* 💡 ボタンの間に15pxの隙間ができる */<br>
    }
  </div>

</div>
CSSコード表示
.tech-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.tech-caption {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* リストの実装 */
.tech-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px; /* ここがポイント */
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
}
.tech-list-item {
  background-color: #343a40;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
}

/* ボタン群の実装 */
.tech-btn-group {
  display: flex;
  gap: 15px; /* ここがポイント */
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
}
.tech-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.tech-btn-primary {
  background-color: #0d6efd;
  color: #fff;
}
.tech-btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.tech-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

リストの作り方を詳しく知りたい人は「【html&css】ul・li・olの使い方とおしゃれなデザインリスト」を一読ください。

ボタンの作り方を詳しく知りたい人は「【HTML】buttonタグの使い方：リンク・CSS装飾・無効化」を一読ください。

【html&css】ul・li・olの使い方とおしゃれなデザインリスト
【HTML】buttonタグの使い方：リンク・CSS装飾・無効化

テーブルのセル・行間に余白を作る方法

表組み（テーブル）を作る際、「セルの間」や「行の間」に隙間を作りたいと考える人は多いでしょう。

しかし、ここにはCSSの仕様による大きな罠が存在します。

列の隙間や行の隙間を作ろうとして、標準的な<table>要素にgap: 10px;を指定しても全く効きません。

gapプロパティはdisplay: flex;またはdisplay: grid;が指定された要素の直下でしか機能しないため、初期値がdisplay: table;であるテーブル要素には無効です。

標準的な<table>タグでセル間の隙間を作りたい場合は、gapではなくborder-spacingプロパティを使用します。

もし、どうしてもgapを使って柔軟なテーブル風レイアウトを作りたい場合は、<table>タグを使わずdivタグとGrid (display: grid;) を組み合わせて擬似的なテーブルを構築するのがよいです。

1. 標準の table タグ（border-spacing を使用）

セル A セル B
セル C セル D

2. Gridを使ったテーブル風レイアウト（gap を使用）

セル A
セル B
セル C
セル D
/* 💡 1. 標準の table 要素の場合 */
table {
  border-spacing: 10px; /* gapの代わりに使用する */
  border-collapse: separate; /* 必須（結合させない） */
}

/* 💡 2. divとGridでテーブル風にする場合 */
.grid-table {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列にする */
  gap: 10px; /* 💡 Gridならgapが使える！ */
}
HTMLコード表示
<div class="tech-sec2-wrapper">
  
  <p class="tech-caption">1. 標準の table タグ（border-spacing を使用）</p>
  <table class="tech-standard-table">
    <tr>
      <td class="tech-td">セル A</td>
      <td class="tech-td">セル B</td>
    </tr>
    <tr>
      <td class="tech-td">セル C</td>
      <td class="tech-td">セル D</td>
    </tr>
  </table>

  <p class="tech-caption" style="margin-top: 20px;">2. Gridを使ったテーブル風レイアウト（gap を使用）</p>
  <div class="tech-grid-table">
    <div class="tech-grid-cell">セル A</div>
    <div class="tech-grid-cell">セル B</div>
    <div class="tech-grid-cell">セル C</div>
    <div class="tech-grid-cell">セル D</div>
  </div>

  <div class="tech-code">
    /* 💡 1. 標準の table 要素の場合 */<br>
    <span class="hl-blue">table</span> {<br>
      <span class="hl-red">border-spacing: 10px;</span> /* gapの代わりに使用する */<br>
      <span class="hl-green">border-collapse: separate;</span> /* 必須（結合させない） */<br>
    }<br><br>

    /* 💡 2. divとGridでテーブル風にする場合 */<br>
    <span class="hl-blue">.grid-table</span> {<br>
      <span class="hl-green">display: grid;</span><br>
      <span class="hl-green">grid-template-columns: 1fr 1fr;</span> /* 2列にする */<br>
      <span class="hl-red">gap: 10px;</span> /* 💡 Gridならgapが使える！ */<br>
    }
  </div>

</div>
CSSコード表示
.tech-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* 1. 標準のtable */
.tech-standard-table {
  width: 100%;
  border-collapse: separate; /* これがないと隙間ができません */
  border-spacing: 10px; /* table専用の隙間プロパティ */
  background-color: #e9ecef;
  border-radius: 4px;
}
.tech-td {
  background-color: #198754;
  color: #fff;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
}

/* 2. Gridテーブル */
.tech-grid-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; /* Grid環境なのでgapが機能する */
  background-color: #e9ecef;
  padding: 10px; /* 外枠とのバランス調整 */
  border-radius: 4px;
}
.tech-grid-cell {
  background-color: #6f42c1;
  color: #fff;
  padding: 15px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
}

テーブルの作り方を詳しく知りたい人は「【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ」を一読ください。

また、Gridの使い方を詳しく知りたい人は「【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ」を一読ください。

【HTML】tableタグ（テーブル）の使い方：枠線・セル結合・レスポンシブ
【CSS】Gridの使い方：Flexboxとの違いやレスポンシブ

テキスト行間や下線・ボーダーの隙間は別プロパティ

テキストやボーダーの隙間調整には、専用のプロパティを正しく使い分けてください。

  • 文章の行間：line-height
  • 文字の間隔：letter-spacing
  • 下線の隙間：text-underline-offset
  • 隙間に色をつける：
    親要素に隙間で見せたい背景色を指定し、子要素に本来の背景色を指定することでgapの透明な部分から親の背景色が透けて見え、隙間に色がついた表現が可能になります。

1. テキストと下線の隙間（専用プロパティを使用）

文字の間隔は letter-spacing を使い、
行間は line-height を使います。

下線との隙間をコントロール

2. 隙間に色をつける（背景色とgapの合わせ技）

Box
Box
Box
/* 💡 テキスト周りの隙間（gapは使わない！） */
p {
  line-height: 1.8; /* 行間 */
  letter-spacing: 2px; /* 文字間隔 */
}
a {
  text-underline-offset: 5px; /* 下線との隙間 */
}

/* 💡 隙間に色をつけるトリック（親の背景を透かせる） */
.container {
  display: flex;
  gap: 2px; /* これが「線の太さ」になる */
  background-color: #000; /* 💡 隙間から見える色（黒） */
}
.item {
  background-color: #fff; /* 💡 アイテム本体の色（白） */
}
HTMLコード表示
<div class="tech-sec3-wrapper">
  
  <p class="tech-caption">1. テキストと下線の隙間（専用プロパティを使用）</p>
  <div class="tech-text-box">
    <p class="tech-text-sample">
      文字の間隔は letter-spacing を使い、<br>
      行間は line-height を使います。
    </p>
    <a href="#" class="tech-underline-sample">下線との隙間をコントロール</a>
  </div>

  <p class="tech-caption" style="margin-top: 20px;">2. 隙間に色をつける（背景色とgapの合わせ技）</p>
  <div class="tech-colored-gap-container">
    <div class="tech-inner-box">Box</div>
    <div class="tech-inner-box">Box</div>
    <div class="tech-inner-box">Box</div>
  </div>

  <div class="tech-code">
    /* 💡 テキスト周りの隙間（gapは使わない！） */<br>
    <span class="hl-blue">p</span> {<br>
      <span class="hl-green">line-height: 1.8;</span> /* 行間 */<br>
      <span class="hl-green">letter-spacing: 2px;</span> /* 文字間隔 */<br>
    }<br>
    <span class="hl-blue">a</span> {<br>
      <span class="hl-green">text-underline-offset: 5px;</span> /* 下線との隙間 */<br>
    }<br><br>

    /* 💡 隙間に色をつけるトリック（親の背景を透かせる） */<br>
    <span class="hl-blue">.container</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-green">gap: 2px;</span> /* これが「線の太さ」になる */<br>
      <span class="hl-red">background-color: #000;</span> /* 💡 隙間から見える色（黒） */<br>
    }<br>
    <span class="hl-blue">.item</span> {<br>
      <span class="hl-red">background-color: #fff;</span> /* 💡 アイテム本体の色（白） */<br>
    }
  </div>

</div>
CSSコード表示
.tech-sec3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

/* 1. テキスト系の調整 */
.tech-text-box {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.tech-text-sample {
  /* gapではなく専用プロパティ */
  line-height: 1.8;
  letter-spacing: 2px; 
  color: #333;
  margin-bottom: 15px;
}
.tech-underline-sample {
  color: #0d6efd;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  /* 下線との隙間を空ける専用プロパティ */
  text-underline-offset: 6px; 
  font-weight: bold;
}

/* 2. 色付きgapのトリック */
.tech-colored-gap-container {
  display: flex;
  gap: 2px; /* 隙間の幅がボーダーの太さになる */
  /* 💡 親の背景色を線（隙間）の色にする */
  background-color: #dc3545; 
  padding: 2px; /* 外枠にも色をつける場合 */
  border-radius: 4px;
}
.tech-inner-box {
  flex: 1;
  /* 💡 アイテムの背景色で親の背景色を覆い隠す（隙間だけ残る） */
  background-color: #fff; 
  color: #dc3545;
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

gapが効かない！原因と解決策

CSSの余白管理を楽するgapですが、使ってみると「gapが効かない」という壁にぶつかることがあります。

gapが効かない、あるいは縦方向だけが効かないといったトラブルは、プロパティの綴り間違いではなく、CSSの仕様に対する根本的な誤解から生まれます。

ここでは、実務で頻出する「効かない・崩れる」原因と解決策を解説します。

gapが効かない！原因と解決策
  • display: flexやgridを親要素に指定していない
  • Gridレイアウトではみ出る原因と対処法
  • 一部だけ余白を変えたい場合の代替案

display: flexやgridを親要素に指定していない

gapが効かない原因は、対象の親要素がFlexboxでもGridでもない通常のブロック要素（display: block;）のままであるケースです。

gapを使う条件は、親要素にdisplay: flex;またはdisplay: grid;が指定されていることです。

効かないと思ったら、まずはChromeのデベロッパーツールを開き、親要素のdisplayプロパティが有効になっているかを確認する癖をつけてください。

❌ 失敗：display: flex; を書き忘れている（効かない）

Box 1
Box 2

⭕️ 正解：親要素にdisplayを指定して初めてgapが起動する

Box 1
Box 2
/* ❌ 初心者のミス：flex/grid が無いとgapは無視される */
.wrong-container {
  gap: 20px; /* 💡 無効な指定です */
}

/* ⭕️ プロの鉄則：必ずセットで使う */
.correct-container {
  display: flex; /* 💡 これがあって初めて… */
  gap: 20px; /* 💡 これが効く！ */
}
HTMLコード表示
<div class="trouble-gap-sec1-wrapper">
  
  <p class="trouble-caption">❌ 失敗：display: flex; を書き忘れている（効かない）</p>
  <div class="gap-not-working">
    <div class="t-box">Box 1</div>
    <div class="t-box">Box 2</div>
  </div>

  <p class="trouble-caption" style="margin-top:20px;">⭕️ 正解：親要素にdisplayを指定して初めてgapが起動する</p>
  <div class="gap-working">
    <div class="t-box">Box 1</div>
    <div class="t-box">Box 2</div>
  </div>

  <div class="trouble-code">
    /* ❌ 初心者のミス：flex/grid が無いとgapは無視される */<br>
    <span class="hl-blue">.wrong-container</span> {<br>
      <span class="hl-red">gap: 20px;</span> /* 💡 無効な指定です */<br>
    }<br><br>

    /* ⭕️ プロの鉄則：必ずセットで使う */<br>
    <span class="hl-blue">.correct-container</span> {<br>
      <span class="hl-green">display: flex;</span> /* 💡 これがあって初めて… */<br>
      <span class="hl-red">gap: 20px;</span> /* 💡 これが効く！ */<br>
    }
  </div>

</div>
CSSコード表示
.trouble-gap-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
.trouble-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #dc3545;
}
.trouble-caption:nth-of-type(2) {
  color: #198754;
}

.t-box {
  background-color: #0dcaf0;
  color: #000;
  padding: 15px 30px;
  font-weight: bold;
  border-radius: 4px;
}

/* ❌ 失敗（displayの指定漏れ） */
.gap-not-working {
  /* display: block; がデフォルト */
  gap: 20px; /* 全く効きません */
  background-color: #e9ecef;
  padding: 10px;
  border: 1px dashed #dc3545;
}
/* ブロック要素なので縦に並び、gapが効いていないためくっつきます */
.gap-not-working .t-box {
  margin-bottom: 0; /* デフォルトの挙動を強調 */
}

/* ⭕️ 成功 */
.gap-working {
  display: flex; /* これが必須！ */
  gap: 20px; /* 綺麗に隙間が空く */
  background-color: #e9ecef;
  padding: 10px;
  border: 1px dashed #198754;
}

.trouble-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #0d6efd;
}

改めてdisplayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【html&css】displayの種類は？flexやinline-blockの違い

Gridレイアウトではみ出る原因と対処法

Flexboxだけでなく、Gridを使って均等な列を作った際、gapが原因で親枠から横にはみ出すというレイアウト崩壊に遭遇することがあります。

Gridレイアウトでgapを使う場合、子要素の幅に%を使うのは厳禁です。

代わりに、Grid特有の単位であるfr（フラクション）を使用してください。

親要素にgrid-template-columns: 1fr 1fr;と指定すれば、ブラウザが「先にgapの隙間分を確保し、残ったスペースを均等に分ける」という計算を自動で行うため、はみ出しが起きません。

※太い破線が「親要素（コンテナ）の本来の幅」です。

❌ 失敗：子要素を 50% で分割（gapの分だけ右へ突き破る）

50%
50%

⭕️ 正解：1fr で分割（隙間を引いてから枠内にピタッと収まる）

1fr
1fr
/* ❌ 初心者のミス：%とgapを混ぜるとはみ出す */
.grid-wrong {
  display: grid;
  gap: 30px;
  grid-template-columns: 50% 50%; /* 💡 50%+50%+30pxで100%を超える */
}

/* ⭕️ プロの鉄則：fr単位に計算を任せる */
.grid-correct {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr; /* 💡 隙間を引いてから安全に2等分する */
}
HTMLコード表示
<div class="trouble-gap-sec2-wrapper">
  
  <p style="font-size:12px; color:#555; margin-bottom:20px; text-align:center;">
    ※太い破線が「親要素（コンテナ）の本来の幅」です。
  </p>

  <p class="trouble-caption">❌ 失敗：子要素を 50% で分割（gapの分だけ右へ突き破る）</p>
  <div class="overflow-wrong-container">
    <div class="overflow-item">50%</div>
    <div class="overflow-item">50%</div>
  </div>

  <p class="trouble-caption" style="margin-top:40px;">⭕️ 正解：1fr で分割（隙間を引いてから枠内にピタッと収まる）</p>
  <div class="overflow-correct-container">
    <div class="safe-item">1fr</div>
    <div class="safe-item">1fr</div>
  </div>

  <div class="trouble-code">
    /* ❌ 初心者のミス：%とgapを混ぜるとはみ出す */<br>
    <span class="hl-blue">.grid-wrong</span> {<br>
      <span class="hl-green">display: grid;</span><br>
      <span class="hl-green">gap: 30px;</span><br>
      <span class="hl-red">grid-template-columns: 50% 50%;</span> /* 💡 50%+50%+30pxで100%を超える */<br>
    }<br><br>

    /* ⭕️ プロの鉄則：fr単位に計算を任せる */<br>
    <span class="hl-blue">.grid-correct</span> {<br>
      <span class="hl-green">display: grid;</span><br>
      <span class="hl-green">gap: 30px;</span><br>
      <span class="hl-red">grid-template-columns: 1fr 1fr;</span> /* 💡 隙間を引いてから安全に2等分する */<br>
    }
  </div>

</div>
CSSコード表示
.trouble-gap-sec2-wrapper {
  background-color: #f8f9fa;
  /* 💡 飛び出した部分が見えるように右側の余白を大きくとる */
  padding: 20px 40px 20px 20px; 
  border-radius: 8px;
  border: 1px solid #dee2e6;
  overflow: visible; /* 絶対に隠さない */
}

.trouble-caption {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

/* ❌ 失敗のコンテナ */
.overflow-wrong-container {
  display: grid;
  grid-template-columns: 50% 50%; /* 💡 50%指定が原因 */
  gap: 30px;
  background-color: #f8d7da;
  /* 💡 これが親要素の本来の幅 */
  border: 3px dashed #dc3545; 
  /* 背景を枠線内に留める */
  background-clip: padding-box; 
}

.overflow-item {
  background-color: rgba(220, 53, 69, 0.85); /* 少し透けさせて枠線に被る様子を見せる */
  color: white;
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
}

/* ⭕️ 成功のコンテナ */
.overflow-correct-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 💡 frなら安全 */
  gap: 30px;
  background-color: #d1e7dd;
  border: 3px dashed #198754;
}

.safe-item {
  background-color: #198754;
  color: white;
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
}

.trouble-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 40px;
  border-left: 4px solid #0d6efd;
}
.hl-blue { color: #61afef; font-weight: bold; }
.hl-green { color: #98c379; font-weight: bold; }
.hl-red { color: #e06c75; font-weight: bold; }

一部だけ余白を変えたい場合の代替案

gapは要素の間に均等な余白を作る一括設定です。

しかし実務では、「最初と2番目の間は20pxだけど、3番目だけは50px離したい」や「Gridの特定の行だけ隙間を変えたい」といった要望が出ます。

gapはあくまで「ベースとなる共通の隙間」として定義します。

その上で、特定の要素だけ余白を大きくしたい場合は、要素に対して個別にmarginを併用するのがよいです。

古いブラウザ向けにgapが使えなかった時代の代替処理としてもmarginが活躍していましたが、現代では「gap（ベース）＋margin（例外）」のハイブリッド運用が実務の標準です。

ベースはgapで空けつつ、最後の要素だけmarginで大きく離す

ロゴ
メニュー A
メニュー B
お問い合わせ（右端）
/* 💡 全体の共通ルール（ベースの隙間） */
.header {
  display: flex;
  gap: 20px; /* 基本は20px空ける */
}

/* 💡 特定の要素だけ例外ルールを追加 */
.special-item {
  margin-left: auto; /* 💡 gapの20pxを上書きして、可能な限り右に離す */
  /* ※ margin-left: 50px; のように具体的な数値を足すことも可能 */
}
HTMLコード表示
<div class="trouble-gap-sec3-wrapper">
  
  <p class="trouble-caption">ベースはgapで空けつつ、最後の要素だけmarginで大きく離す</p>
  
  <header class="gap-hybrid-header">
    <div class="h-item">ロゴ</div>
    <div class="h-item">メニュー A</div>
    <div class="h-item">メニュー B</div>
    
    <div class="h-item h-special">お問い合わせ（右端）</div>
  </header>

  <div class="trouble-code">
    /* 💡 全体の共通ルール（ベースの隙間） */<br>
    <span class="hl-blue">.header</span> {<br>
      <span class="hl-green">display: flex;</span><br>
      <span class="hl-red">gap: 20px;</span> /* 基本は20px空ける */<br>
    }<br><br>

    /* 💡 特定の要素だけ例外ルールを追加 */<br>
    <span class="hl-blue">.special-item</span> {<br>
      <span class="hl-red">margin-left: auto;</span> /* 💡 gapの20pxを上書きして、可能な限り右に離す */<br>
      <span class="hl-comment">/* ※ margin-left: 50px; のように具体的な数値を足すことも可能 */</span><br>
    }
  </div>

</div>
CSSコード表示
.trouble-gap-sec3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.gap-hybrid-header {
  display: flex;
  align-items: center;
  gap: 20px; /* ベースの隙間 */
  background-color: #212529;
  padding: 15px 25px;
  border-radius: 4px;
}

.h-item {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

/* 💡 例外処理 */
.h-special {
  background-color: #0d6efd;
  padding: 8px 16px;
  border-radius: 50px;
  /* gapに上乗せして、残りのスペースを全て左マージンとして吸収する */
  margin-left: auto; 
}

隙間や余白を作るmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • 要素と要素の「間」にのみ余白を作るプロパティであり、外側の端には余白が生じない。
  • 機能させるには、親要素へのdisplay: flex;またはdisplay: grid;の指定が必須である。
  • これまでmarginと:last-childを使って行っていた面倒な余白の打ち消し作業を不要にする。
  • gap: 縦 横;で一括指定できるほか、row-gap（縦の隙間）、column-gap（横の隙間）での個別指定も可能。
  • マイナス（負）の値は無効であり、要素を重ねる表現には従来通り子要素のネガティブマージンを使用する。
  • 標準の<table>タグには無効であるため、セル間の余白にはborder-spacingを用いる。
  • 文章の行間や文字間隔には適用できないため、line-heightやletter-spacingを正しく使い分ける。
  • 一部分だけ隙間を大きくしたい場合は、親要素のgapをベースにしつつ、該当の子要素にmarginを併用して上書きする。
  • Gridレイアウトとの併用時、子要素の幅を%で指定するとはみ出しの原因になるため、fr単位を使用する。

よくある質問（FAQ）

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次