ここちゃん ここちゃん

たけさん、Webサイトを作ってみたいんですけど、まず何から学べばいいですか？

たけ たけ

間違いなくHTML/CSSだね。俺が初めて自分のWebページを作った時、背景色を変えただけで「おお！」ってなったよ。

ここちゃん ここちゃん

そんなに簡単にできるものなんですか？

たけ たけ

うん、HTML/CSSはプログラミングの中でも一番とっつきやすい。書いたらすぐブラウザで結果が見えるのが楽しいんだよ。基礎から解説していくね。

HTML/CSS入門｜Webサイト制作の基礎

Webサイト制作の基本となるHTML/CSSを解説します。

HTMLとは

HyperText Markup Language Webページの構造を定義する言語

CSSとは

Cascading Style Sheets Webページの見た目を装飾する言語

HTMLの基本

基本構造

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>段落テキスト</p>
</body>
</html>

よく使うタグ

  • <h1>〜<h6>: 見出し
  • <p>: 段落
  • <a>: リンク
  • <img>: 画像
  • <div>: ブロック要素
  • <span>: インライン要素

CSSの基本

書き方

セレクタ {
    プロパティ: 値;
}

例

h1 {
    color: blue;
    font-size: 24px;
}

よく使うプロパティ

  • color: 文字色
  • background: 背景
  • font-size: 文字サイズ
  • margin: 外側の余白
  • padding: 内側の余白

レスポンシブデザイン

メディアクエリ

@media (max-width: 768px) {
    /* スマホ用のスタイル */
}

開発ツール

  • VS Code
  • Chrome DevTools
  • Figma（デザイン確認）

学習のステップ

  1. HTMLの基本タグを覚える
  2. CSSで装飾する
  3. レイアウトを学ぶ（Flexbox/Grid）
  4. レスポンシブ対応
  5. 実際のサイトを模写する

まとめ

HTML/CSSはWeb制作の第一歩。まずは簡単なページを作ってみましょう。