HTML / CSS / JS 完全ガイド

基本 → 飾り付け → 応用、すべて1ファイルで学べる

HTML5 CSS3 Vanilla JS フレームワークなし

① 基本

HTMLの最小構成とよく使うタグ

HTMLの最小構成

すべてのHTML文書はこの骨格から始まります。

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>本文</p>
</body>
</html>
要素役割
<!DOCTYPE html>HTML5であることをブラウザに宣言
<head>タイトル・メタ情報・CSS/JSの読み込み
<body>画面に表示されるすべてのコンテンツ

よく使うタグ一覧

📝

テキスト系

<h1>〜<h6> / <p> / <strong> / <em>

🏗️

構造系

<header> / <nav> / <main> / <section> / <article> / <footer>

🔗

リンク・メディア

<a href> / <img src alt> / <video> / <audio>

📋

フォーム

<form> / <input> / <textarea> / <button> / <label>

② 構造

セマンティックHTMLで意味のある構造を作る

セマンティックHTML

HTML 
<body>
  <header>
    <h1>サイト名</h1>
    <nav>
      <a href="#home">ホーム</a>
      <a href="#about">会社概要</a>
    </nav>
  </header>

  <main>
    <section id="home">
      <article>
        <h2>記事タイトル</h2>
        <p>本文...</p>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 会社名</p>
  </footer>
</body>
タグ意味使用箇所
<header>ページ/セクションのヘッダーロゴ・ナビ
<nav>ナビゲーションメニューリンク
<main>ページの主要コンテンツ1ページに1つ
<section>論理的な区切り各セクション
<article>独立したコンテンツ記事・カード
<footer>フッター著作権・連絡先

③ 飾り付け（CSS）

見た目を整える基本テクニック

グラデーション背景

CSS 
header {
  background: linear-gradient(135deg, #2c3e50, #3498db);
  color: #fff;
  padding: 3rem 1.5rem;
  text-align: center;
}
/* 135deg = 左上→右下 / 0deg = 下→上 / 90deg = 左→右 */

グラデーションのプレビュー

カードデザイン（角丸 + 影）

CSS 
.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

アクセント線 & ピル型ボタン & 中央寄せ

CSS 
/* アクセント線 */
h2 {
  border-left: 4px solid #e94560;
  padding-left: 0.5rem;
}

/* ピル型ボタン */
.pill-btn {
  padding: 0.4rem 1rem;
  border: 2px solid #3498db;
  border-radius: 20px;
  background: #fff;
  color: #3498db;
  cursor: pointer;
  transition: all 0.2s;
}
.pill-btn.active {
  background: #3498db;
  color: #fff;
}

/* 中央寄せ + 幅制限 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

④ アニメーション

動きで印象を与えるテクニック

transition（ホバー効果）

CSS 
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px);
}

@keyframes（キーフレーム）

CSS 
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal {
  animation: slideUp 0.3s ease;
}
/* タイミング: ease / linear / ease-in / ease-out / ease-in-out */

フェードイン（スクロール時）

このページ自体がIntersection Observerで各セクションをフェードインしています。

JS + CSS 
/* CSS */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s, transform 0.6s;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

// JS
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add("visible");
  });
}, { threshold: 0.1 });

document.querySelectorAll(".fade-in").forEach(el => observer.observe(el));

⑤ レスポンシブ

あらゆる画面サイズに対応する

CSS Grid（自動列数調整）

CSS 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
/* minmax(250px, 1fr) = 最小250px、余白は均等に分配 */

Flexbox（横並び・中央配置）

CSS 
/* 横並び + 中央寄せ */
.nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* 検索バー（入力+ボタン） */
.search-bar {
  display: flex;
}
.search-bar input {
  flex: 1;
}

メディアクエリ

CSS 
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1100px;
  }
}

⑥ 動画

動画の埋め込みと表示テクニック

ネイティブ動画（<video>）

HTML 
<!-- 基本 -->
<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  お使いのブラウザは動画に対応していません。
</video>

<!-- 自動再生・ループ・ミュート（BGM用） -->
<video autoplay loop muted playsinline>
  <source src="bg.mp4" type="video/mp4">
</video>

YouTube / Vimeo 埋め込み

HTML 
<!-- YouTube -->
<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube動画"
    allowfullscreen
  ></iframe>
</div>

動画背景（ヒーローセクション）

HTML + CSS 
<!-- HTML -->
<section class="video-hero">
  <video class="bg-video" autoplay muted loop playsinline>
    <source src="hero.mp4" type="video/mp4">
  </video>
  <div class="hero-content">
    <h1>タイトル</h1>
  </div>
</section>

/* CSS */
.video-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.bg-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  object-fit: cover;
}
.video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

動画背景のプレビュー

ここに動画が再生される位置です

⑦ 画像

画像の表示テクニック

遅延読み込み（Lazy Loading）

HTML 
<img
  src="photo.jpg"
  alt="説明"
  loading="lazy"
  width="600"
  height="400"
>

背景画像

CSS 
.hero {
  background-image: url("hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;
}

/* ぼかし付き */
.blurred-bg {
  background-image: url("bg.jpg");
  filter: blur(8px);
  transform: scale(1.1);
}

画像ギャラリー + ライトボックス

HTML 
<div class="gallery">
  <img src="1.jpg" alt="写真1" class="gallery-item">
  <img src="2.jpg" alt="写真2" class="gallery-item">
</div>

<div class="lightbox" id="lightbox">
  <span class="lightbox-close" onclick="closeLightbox()">×</span>
  <img id="lightboxImg" src="" alt="">
</div>
CSS 
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}
.gallery-item {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s;
}
.gallery-item:hover { transform: scale(1.03); }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}
.lightbox.show { display: flex; }
.lightbox img {
  max-width: 90%;
  max-height: 90vh;
}
JavaScript 
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightboxImg");

document.querySelectorAll(".gallery-item").forEach(img => {
  img.addEventListener("click", () => {
    lightboxImg.src = img.src;
    lightboxImg.alt = img.alt;
    lightbox.classList.add("show");
  });
});

function closeLightbox() {
  lightbox.classList.remove("show");
}
lightbox.addEventListener("click", e => {
  if (e.target === lightbox) closeLightbox();
});
🌅
🏔️
🌊
🌸
🌙
🔥

↑ クリックでライトボックスが開きます

object-fit（画像の切り抜き）

CSS 
/* cover: 領域を完全に埋める（余白は切り詰め） */
.thumb {
  width: 200px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* contain: 全体を表示（余白は空白） */
.preview {
  width: 300px;
  height: 200px;
  object-fit: contain;
  background: #f0f0f0;
}

⑧ テキスト表示

タイポグラフィとテキストエフェクト

グラデーション文字

CSS 
.gradient-text {
  background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 3rem;
  font-weight: bold;
}

グラデーションテキスト

テキストアウトライン & シャドウ

CSS 
/* アウトライン */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  font-size: 5rem;
  font-weight: 900;
}

/* シャドウ（複数重ねると深みが出る） */
.text-shadow {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.3),
    0 4px 8px rgba(0,0,0,0.2);
}

OUTLINE

Text Shadow

ドロップキャップ

CSS 
.article p:first-of-type::first-letter {
  float: left;
  font-size: 4rem;
  line-height: 0.8;
  padding-right: 0.5rem;
  color: #e94560;
  font-weight: bold;
}

これはドロップキャップのデモです。先頭の文字が自動的に大きく表示され、記事の冒頭に装飾を施します。伝統的な印刷物に見られるスタイルで、Webサイトにも活用できます。

文字数制限（省略記号）

CSS 
/* 1行で切り詰め */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* 3行で切り詰め */
.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

これは1行で切り詰められるテキストのデモです。長すぎる部分は省略記号（...）で表示されます。

これは3行で切り詰められるテキストのデモです。
複数行にわたる長いテキストを、
指定した行数で自動的に切り詰めて
表示することができます。これにより、
カード内の説明文などがはみ出すのを防げます。

ハイライト（<mark>）

HTML + CSS 
<p>これは<mark>重要</mark>な情報です。</p>

mark {
  background: linear-gradient(transparent 40%, #fef08a 40%);
  padding: 0.1em 0.2em;
  border-radius: 2px;
}
mark.green { background: linear-gradient(transparent 40%, #86efac 40%); }
mark.blue  { background: linear-gradient(transparent 40%, #93c5fd 40%); }
mark.pink  { background: linear-gradient(transparent 40%, #f9a8d4 40%); }

これは 黄色 / 緑 / 青 / ピンク のハイライトデモです。

タイピングアニメーション

CSS + JS 
/* CSS: カーセル */
.typing::after {
  content: "|";
  animation: blink 0.8s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

// JS
const el = document.querySelector(".typing");
const text = "ようこそ、私のサイトへ！";
let i = 0;
function type() {
  if (i < text.length) {
    el.textContent += text[i];
    i++;
    setTimeout(type, 100);
  }
}
type();

タイポグラフィ（行間・字間・行幅）

CSS 
.article {
  font-size: 1.1rem;
  line-height: 1.8;        /* 日本語は1.6〜2.0 */
  letter-spacing: 0.02em;
  max-width: 65ch;         /* 約45〜75字/行 */
  margin: 0 auto;
}
h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.3;
}

⑨ 応用（JSで動的に）

フィルター・検索・モーダルを実装する

商品一覧（フィルター + 検索 + モーダル）

以下のデモはすべてこのページ内で動作しています。