コピペで簡単！HTML＋CSS＋JSで“動く”UIパーツを作る【初心者向け】

「JavaScriptは少し書けるようになってきた。でも、ボタンを押して何かを動かすだけで、“見た目”が全然整わない…」そんな悩みを抱えていませんか？

実は、フロントエンド開発ではJavaScript（JS）だけで完結しないことが多いんです。特にWeb制作の副業や実務では、HTMLとCSSでのレイアウト構築とセットで初めて「動くUI」が成立します。

この記事では、HTML＋CSS＋JavaScriptをセットで理解することの大切さと、初心者でもすぐ使えるコピペOKのUIスニペットを紹介します。

セットで学ぶべき理由
コピペで使えるUIスニペット集
おまけTips：CSSでよくあるつまずきポイント
まとめ
AI活用をもっと学びたい方へ

ITスキルを身につけて、自分らしく充実した毎日が送れるようになる！
オンラインで学べるITスキルコーチングサービス実務経験18年のITのプロフェッショナルがあなたに最適な”学習”を1対1でサポート

セットで学ぶべき理由

JS単体では足りない実務力

JavaScriptは確かに「動き」を作るのに欠かせない存在ですが、それだけでは“見た目”や“構造”を制御するには不十分です。特にモーダルウィンドウ、アコーディオンメニュー、タブ切り替えなどのUIパーツは、HTMLでのマークアップ構造＋CSSでのスタイル定義＋JSの挙動制御の3つが揃って初めて「完成」します。

案件でも超需要あり

フロントエンドの案件では、「ちょっとしたボタン操作の追加」や「アニメーション付きのUIパーツの実装」といった仕事が非常に多く、HTML＋CSS＋JSがちゃんと書けるかどうかで受注の可否が分かれることもあります。

初心者でも結果が見える

HTML＋CSS＋JSのセットで学ぶと、「見た目が整って、動くようになる」という視覚的な成果が出やすく、学習モチベーションが維持しやすいのも大きなメリットです。

コピペで使えるUIスニペット集

以下に、実務やポートフォリオ制作でも使える代表的なUIパーツを紹介します。どれもHTML＋CSS＋JavaScriptのセット構成で、コピペOK！

用途	HTML/CSS構成概要	JSの動作概要
モーダルウィンドウ	オーバーレイとボタン、`display: none`→`block`	`classList.toggle()`で開閉を制御
アコーディオン	複数のセクションを`<div>`で作成	クリックで`style.height`を切り替える
タブ切り替え	`<ul><li>`＋タブ用divで構成	`dataset属性`で対象を切り替えて表示/非表示
メニュー開閉	ハンバーガーアイコン＋ナビゲーションリスト	`addEventListener('click')`でクラス付け替え

① モーダルウィンドウ


HTML
<button id="openModal">モーダルを開く</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>これはモーダルです！</p>
  </div>
</div>

CSS
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  min-width: 300px;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

JS
const modal = document.getElementById('modal');
// モーダル表示
document.getElementById('openModal').onclick = () => modal.style.display = 'flex';
// モーダル閉じる
document.getElementById('closeModal').onclick = () => modal.style.display = 'none';
// 背景クリックで閉じる
modal.onclick = e => { if(e.target === modal) modal.style.display = 'none'; }

② アコーディオン


HTML
<div class="accordion">
  <div class="accordion-title">タイトル1</div>
  <div class="accordion-content">ここに内容が入ります。</div>
  <div class="accordion-title">タイトル2</div>
  <div class="accordion-content">2つめの内容です。</div>
</div>

CSS
.accordion-title {
  background: #f2f2f2;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.accordion-content {
  display: none;
  padding: 12px;
  background: #fafafa;
}

JS
document.querySelectorAll('.accordion-title').forEach(title => {
  title.onclick = () => {
    const content = title.nextElementSibling;
    content.style.display = content.style.display === 'block' ? 'none' : 'block';
  }
});

③ タブ切り替え


HTML
<div class="tabs">
  <ul class="tab-list">
    <li class="tab active" data-tab="tab1">Tab 1</li>
    <li class="tab" data-tab="tab2">Tab 2</li>
  </ul>
  <div class="tab-content active" id="tab1">タブ1の内容</div>
  <div class="tab-content" id="tab2">タブ2の内容</div>
</div>


CSS
.tab-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.tab {
  padding: 8px 16px;
  background: #eee;
  cursor: pointer;
}

.tab.active {
  background: #333;
  color: #fff;
}

.tab-content {
  display: none;
  padding: 16px;
  border: 1px solid #eee;
}

.tab-content.active {
  display: block;
}

JS
document.querySelectorAll('.tab').forEach(tab => {
  tab.onclick = () => {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById(tab.dataset.tab).classList.add('active');
  }
});

④ ハンバーガーメニュー（開閉）


HTML
<button id="hamburger" class="hamburger-btn">☰</button>
<nav id="navMenu" class="nav-menu">
  <ul>
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
  </ul>
</nav>


CSS
.hamburger-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-menu {
  display: none;
  background: #333;
  color: #fff;
  position: absolute;
  top: 40px;
  left: 0;
  width: 200px;
}

.nav-menu.active {
  display: block;
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  padding: 12px;
  border-bottom: 1px solid #444;
}

JS
const navMenu = document.getElementById('navMenu');
document.getElementById('hamburger').onclick = () => navMenu.classList.toggle('active');

サンプルを少しカスタマイズして「自分用」にすると、より理解が深まります。

おまけTips：CSSでよくあるつまずきポイント

marginの“重なり”問題

上下のmarginが合体して思った通りの間隔にならない？それ、マージンの相殺が原因です。親要素にoverflow: hidden;をつけると解決することが多いですよ。

displayの使い分け

inlineとblock、flexやgridの違い、感覚で使ってる人も多いですが、並び方・余白・レスポンシブ対応に大きく影響します。ここはしっかり整理して覚えるのがおすすめです。

z-index地獄

「なんでこのモーダル隠れるの！？」→positionの指定がないとz-indexは効かない、という罠にハマる人、多数。

まとめ

HTML、CSS、JavaScriptをそれぞれ単体で勉強していると、全体のつながりや“完成イメージ”がつかみにくいものです。

しかし、この3つをセットで動かす体験をすると、理解は一気に深まります。初心者こそ「とりあえず動くものを作る」ことから始めてOK。その過程で自然とスキルは身についていきます。

今後も、HTML＋CSS＋JavaScriptを使った実践的なUIパーツを紹介していくので、ブログのブックマークやSNSフォローでチェックしてくださいね！

AI活用をもっと学びたい方へ

「AIって便利そうだけど、使いこなせるか不安…」「他の業務にもAIを活用してみたいけど、何から始めればいいかわからない」そんな方のために、あなたの業務やスキルレベルに合わせた【無料の個別相談】を実施しています。

あなたの作業に合ったAIツールの選定、ChatGPTやGeminiの具体的な使い方サポート、業務効率アップのためのプロンプトテンプレート提供

まずは気軽にご相談ください！