【コーディング】2026年、今旬の実装テクニック4選

最近のコーディングって何か変わってきてます？

jQueryでやってたことがCSSだけでできるようになったりしてますよー。今旬のを4つ紹介しますね

ここ数年で、CSSだけでできることがぐっと増えました。今までjQueryやJavaScriptに頼っていた実装が、CSSのプロパティひとつで済んでしまうことも。今回は125naroomで最近気になっている、旬なコーディング技術を4つ紹介します。

:has() ── 親を選べるセレクタ

今まで「子要素の状態によって親要素の見た目を変える」のはJavaScriptの仕事でした。:has()を使うと、CSSだけで「〇〇を含む要素」を選べます。

/* 画像がある見出しだけ余白を広げる */
h2:has(img) {
  margin-bottom: 40px;
}

/* チェックボックスがオンになったカードの枠線を変える */
.card:has(input:checked) {
  border-color: #E4DE49;
}

「チェックが入ったら親のスタイルを変える」みたいな、今までjQueryで書いていた処理がCSS一行で済むのは地味に嬉しいポイントです。

コードを見る（HTML・CSS）

HTML

<div class="cardList">
  <div class="card">
    <div class="thumb"></div>
    <p>デザインのメモ</p>
    <label><input type="checkbox"> あとで読む</label>
  </div>
  <div class="card">
    <div class="thumb"></div>
    <p>実装サンプル集</p>
    <label><input type="checkbox" checked> あとで読む</label>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.cardList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 560px;
  margin: 24px auto 0;
}
.card .thumb { height: 96px; border-radius: 4px; background: #f3efe6; }
.card p { margin: 12px 0; font-weight: 700; }
.card label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.card input { width: 18px; height: 18px; accent-color: #2b2a27; }

/* ===== :has() ── チェックが入ったカードだけ、枠の色を変える ===== */
.card {
  padding: 16px;
  border: 2px solid #e8e3d8;
  border-radius: 8px;
  background: #fff;
  transition: border-color .3s;
}
.card:has(input:checked) {
  border-color: #e8dc6a;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

見本ページをひらく（:has()）

コンテナクエリ ── 画面幅じゃなく「親の幅」で切り替える

メディアクエリは「画面の幅」で切り替わりますが、コンテナクエリは「親要素の幅」で切り替わります。同じカードパーツでも、置く場所によって幅が違う、というときに便利です。

.card-area {
  container-type: inline-size;
  container-name: card-area;
}

@container card-area (min-width: 400px) {
  .card {
    display: flex;
  }
}

サイドバーに置いたら縦並び、メインエリアに置いたら横並び、みたいな「置き場所によって形が変わるパーツ」を作りたいときに、コンテナクエリだと綺麗に解決できます。

コードを見る（HTML・CSS）

HTML

<div class="layout">
  <section class="card-area">
    <h2>sidebar</h2>
    <div class="card"><div class="thumb"></div><p>同じカード</p></div>
  </section>
  <section class="card-area">
    <h2>main</h2>
    <div class="card"><div class="thumb"></div><p>同じカード</p></div>
  </section>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  margin-top: 24px;
}
.layout > section { padding: 12px; border: 1px dashed #e8e3d8; border-radius: 8px; }
.layout h2 { margin: 0 0 8px; font: 500 11px/1 "Jost", sans-serif; letter-spacing: .18em; color: #6b675f; }
.card { gap: 12px; padding: 12px; border: 1px solid #e8e3d8; border-radius: 8px; background: #fff; }
.card .thumb { flex: none; min-width: 140px; height: 88px; border-radius: 4px; background: #f3efe6; }
.card p { margin: 0; font-size: 14px; font-weight: 700; }
@media (max-width: 600px) {
  .layout { grid-template-columns: 1fr; }
}

/* ===== コンテナクエリ ── 親の幅が 400px 以上なら横ならび ===== */
.card-area {
  container-type: inline-size;
  container-name: card-area;
}
.card {
  display: grid;
}
@container card-area (min-width: 400px) {
  .card {
    display: flex;
  }
}

見本ページをひらく（コンテナクエリ）

スクロール連動アニメーション ── JSなしで「ふわっと表示」

125naroomでも紹介しているinview.jsのような「スクロールして画面に入ったらふわっと表示」の動き、実はCSSのanimation-timeline: view()だけでも作れるようになりました。

.fade-in {
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

スクロールイベントを監視するJavaScriptがいらないので、パフォーマンス的にも気持ちがいいです。ただ、対応ブラウザはここ数年で増えてきたところなので、使う前に主要ブラウザでの表示は確認しておくと安心です。

コードを見る（HTML・CSS）

HTML

<div class="section">
  <div class="imgBox fade-in">
    <img src="https://125naroom.com/demo/common/img/slide01.svg" alt="">
  </div>
  <div class="imgBox fade-in">
    <img src="https://125naroom.com/demo/common/img/slide03.svg" alt="">
  </div>
  <div class="txtBox fade-in">
    <p>ふわっと</p>
  </div>
</div>

CSS

/* ===== 見本の箱（動きが分かりやすいように付けた見た目。なくても動きます） ===== */
.section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
}
.imgBox img { width: 100%; height: auto; border-radius: 4px; }
.txtBox p {
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid #e8e3d8;
  border-bottom: 1px solid #e8e3d8;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
.note { max-width: 560px; margin: 0 auto 24px; padding: 0 24px; font-size: 12px; color: #6b675f; display: none; }
@supports not (animation-timeline: view()) {
  .note { display: block; }
}

/* ===== スクロール連動アニメーション ── JS なしで「ふわっと表示」 ===== */
.fade-in {
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
}

見本ページをひらく（スクロール連動アニメーション）