プログラミング初級HTML & CSS

そもそもHTMLとCSSって何？

Webページは「骨組み」と「見た目」でできています。

HTML（エイチ・ティー・エム・エル）：Webページの「骨組み」を作る言語。見出し、段落、画像などの構造を記述します。
CSS（シー・エス・エス）：そのHTMLに「色」「大きさ」「配置」などの見た目を加える言語です。

実際にHTMLとCSSを書いてみよう！

例えば「見出しと文章のあるシンプルなWebページ」を作ってみましょう。

HTMLコード（骨組み）：

htmlコピーする編集する<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのWebページ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ようこそ！</h1>
    <p>これははじめて作るWebページです。</p>
  </body>
</html>

はじめてのWebページ

ようこそ！

これははじめて作るWebページです。

CSSコード（見た目）：

cssコピーする編集するbody {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #1e90ff;
  font-size: 2em;
}

p {
  color: #333;
  font-size: 1.2em;
}

どう表示されるの？

このコードを使うと、次のようなWebページが表示されます。

背景は淡い水色（#f0f8ff）
見出し「ようこそ！」は青色で中央に大きく表示
文章はシンプルで読みやすいフォント

※WordPressに投稿する際は、HTML部分だけを投稿エディターに貼り付ければOK。CSSは「カスタムCSS」や「追加CSS」に記述できます。

HTML & CSSは楽しい第一歩！

HTMLとCSSを学ぶことで、あなたの思い通りのWebページが作れるようになります。少しずつコードに慣れて、自由にデザインできる楽しさを味わってください！

そもそもHTMLとCSSって何？
実際にHTMLとCSSを書いてみよう！
1. HTMLコード（骨組み）：
2. CSSコード（見た目）：
どう表示されるの？
HTML & CSSは楽しい第一歩！

🔍 メリット（良い点）
⚠ デメリット（注意点）
📝 まとめ

🔍 メリット（良い点）

1. 無料で始められる

ソフトやライセンスは不要。PCとブラウザ、メモ帳さえあればOK

2. すぐに結果が見える

書いたコードを保存して開くだけで即確認できる → 初心者でも達成感がある！

3. Web制作の基本が学べる

どんなWebサイトでも裏側ではHTML & CSSが使われている
WordPressやブログ、LP、ECサイトなどにも応用可能

4. WordPressと相性バツグン

投稿にHTMLを使えば、自由なレイアウトが可能
カスタムCSSで見た目を細かく調整できる

⚠ デメリット（注意点）

1. デザインセンスも必要

CSSは自由度が高いが、その分レイアウトや配色に悩むことも

2. コードが増えると管理が大変

ページが複雑になると、どこに何が書いてあるのか分かりにくくなる
特にCSSは「どの部分に効いているか」が混乱しやすい

3. 動きのあるサイトは作れない

HTMLとCSSだけでは「スライド」「動的表示」「計算」などはできない（JavaScriptが必要）

📝 まとめ

項目	メリット	デメリット
始めやすさ	無料・すぐ確認できる	デザインやルールに慣れるまで時間がかかる
カスタマイズ性	WordPressにも応用でき、柔軟なレイアウトが可能	コードが複雑になると読みづらくなる
表現力	色・配置・フォントなど細かくデザインできる	動きやインタラクションにはJavaScriptが必要