ホームページ講座

← Web制作へ戻る

A講座

HTML — Webページの骨格（全4回）

Web概論 HTMLタグ基礎リスト・テーブルパス・画像・動画セマンティックHTML メタデータ・SEO

A-1 Web概論・HTML基礎

WebサイトはHTML・CSS・JavaScriptの3つで構成されます。HTMLが「骨格」、CSSが「見た目」、JavaScriptが「動き」を担います。

HTML

骨格・構造。見出し・段落・リスト・テーブル・フォーム

CSS

見た目・デザイン。色・フォント・余白・レイアウト

JavaScript

動き・インタラクション。クリック処理・アニメーション・通信

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>
  <h1>見出し1</h1>
  <p>段落テキスト</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</body>
</html>

A-2 ハイパーリンクとマルチメディア

絶対パス — 完全なURL。外部サイトへのリンク（https://example.com/page.html）
相対パス — 現在ファイルからの相対位置（../images/photo.jpg）
<img src="..." alt="説明文"> — 画像の表示。altは必ず記述する
画像形式 — JPEG（写真）、PNG（透過・UI素材）、WebP（軽量）、SVG（アイコン・ロゴ）

A-3 セマンティックHTML

セマンティックHTML（意味のあるHTML）とは、タグが持つ意味に従って正しく使うことです。SEO・アクセシビリティ・コードの可読性が向上します。

<header>サイトヘッダー</header>
<nav>ナビゲーション</nav>
<main>
  <article>
    <section>セクション</section>
  </article>
  <aside>サイドバー</aside>
</main>
<footer>フッター</footer>

A-4 HTMLの発展・まとめ

メタデータ — <meta name="description">・OGP（SNSシェア時の情報）の設定
アクセシビリティ — WAI-ARIAの役割属性（role・aria-label）でスクリーンリーダー対応
SEOとHTML — h1タグは1ページ1つ・内部リンクの適切な設計・構造化データ（JSON-LD）

A講座まとめ

HTMLはWebページの骨格。タグの意味を理解してセマンティックに記述する
パスは絶対パスと相対パスの2種類。内部リンクは相対パスで記述する
altは画像の説明テキスト。省略するとアクセシビリティ・SEOに悪影響

B講座

CSS — Webページの見た目（全4回）

CSSの書き方セレクターの種類ボックスモデル Flexbox Dreamweaver レスポンシブ

B-1 CSS基礎・セレクター

CSSはセレクター・プロパティ・値の3要素で構成されます。セレクターで「どの要素に」、プロパティで「何を」、値で「どのように」スタイルを適用するかを指定します。

/* セレクターの種類 */
h1 { color: #1a1a2e; }           /* タグセレクター */
.card { background: #fff; }       /* クラスセレクター */
#logo { font-size: 2rem; }        /* IDセレクター */
a:hover { text-decoration: underline; } /* 擬似クラス */

セレクター	書き方	特異度
タグ	`p`	低い
クラス	`.name`	中間
ID	`#name`	高い
インラインスタイル	`style="..."`	最高

B-2 ボックスモデル・レイアウト

すべてのHTML要素はボックスモデルで構成されます。コンテンツ→padding（内余白）→border（境界線）→margin（外余白）の4層構造です。

/* Flexboxで横並びレイアウト */
.container {
  display: flex;
  justify-content: space-between; /* 主軸方向の配置 */
  align-items: center;            /* 交差軸方向の配置 */
  gap: 16px;
}

/* CSS Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

B-4 レスポンシブデザイン

/* モバイルファースト */
.card { width: 100%; }

/* タブレット以上（768px〜） */
@media (min-width: 768px) {
  .card { width: 48%; }
}

/* PC以上（1024px〜） */
@media (min-width: 1024px) {
  .card { width: 31%; }
}

Point

モバイルファーストで設計する

Googleはモバイルページでインデックスを行うため、スマートフォンで正しく表示されるかを最初に確認すること。モバイルのスタイルを先に書き、min-widthのメディアクエリでPC向けに拡張する。

B講座まとめ

セレクターの特異度：インラインスタイル > ID > クラス > タグの順で優先される
Flexboxは1次元（横または縦）、CSS Gridは2次元（横と縦）のレイアウトを実現する
レスポンシブはモバイルファーストで設計し、min-widthのメディアクエリで拡張する

C講座

JavaScript — Webページの動き（全4回）

変数・定数条件分岐・関数 DOM操作イベントリスナーアニメーション非同期処理

C-1 JavaScript基礎

JavaScriptはWebページに「動き」を与えるプログラミング言語です。HTMLとCSSが静的なのに対し、JavaScriptでページの内容を動的に変更できます。

// 変数・定数
const name = '山田太郎';  // 再代入不可
let count = 0;            // 再代入可能

// 条件分岐
if (count > 10) {
  console.log('10を超えました');
}

// 関数
function greet(name) {
  return `こんにちは、${name}さん！`;
}

// DOM操作
const btn = document.querySelector('#myButton');
btn.textContent = 'クリックしてください';

C-2 イベント処理

const button = document.querySelector('.btn');

// クリックイベント
button.addEventListener('click', () => {
  alert('クリックされました！');
});

// フォームの送信
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // デフォルトの送信を止める
  console.log('フォームが送信されました');
});

C-3 アニメーション

CSSトランジション（transition: all 0.3s ease）— ホバー時のスムーズな変化
IntersectionObserver — スクロールで要素が見えたときにアニメーションを発火
スライドショー — setIntervalで一定間隔でスライドを切り替え

C-4 総まとめ・応用

// Fetch APIで外部データを取得（非同期処理）
async function loadData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

loadData();

Tip

「とりあえず動く」から始める

JavaScriptは完璧なコードを最初から目指さず、まずconsole.logで動作確認しながら少しずつ機能を追加していくことが上達への近道。エラーはconsole.errorで確認する習慣をつけよう。

C講座まとめ

constは再代入不可、letは再代入可能。基本的にconstを使い、必要な場合だけletを使う
addEventListenerでクリック・送信・スクロールなどのユーザー操作に応答する
IntersectionObserverでスクロールアニメーションを効率的に実装できる
async/awaitで非同期処理を同期的に書くことができる