Webサイトを構成するコードの基礎

今や、AIがコードを書いてくれる時代なので、私たちは基礎だけ抑えておけば自分でページが作れます。
ちょっとだけ、Wordpressテーマを使うのに比べると手間は掛かりますが、
こだわりたい人にとっては最高のチャンスです。

本記事では、Webサイトを構成するコードの基礎についてまとめました。

HTML

HTMLは、いわば 外観「家の設計図（見た目）です。
たとえば：

<h1>こんにちは！</h1>
<p>これはHTMLで書かれたテキストです。</p>

見出しや段落、画像、リンクなど、**「静的なページ」**をつくります。

HTMLの基礎

最低限おさえておきたい要素（タグ）

<!DOCTYPE html> / <html> / <head> / <body>（HTMLの基本構造）
<h1>〜<h6>：見出し
<p>：段落
<a href="">：リンク
<img src="">：画像
<ul> / <ol> / <li>：リスト
<div>：汎用のブロック（CSSと組み合わせて使う）
<span>：インラインで使える要素
<form> / <input> / <textarea>：簡単なフォーム

HTMLの使い方の理解

タグのネスト（入れ子構造）
属性（hrefやsrc、alt、class、idなど）の使い方
セマンティックなHTML（意味のある構造づくり）

CSS

CSS（シーエスエス）の役割を簡単に一言で言うと…
見た目をおしゃれに整えるための言語です。

HTMLがページの骨組み（見出し・段落・画像など）だとしたら、
CSSはその服装やインテリアをコーディネートするような役割です。

たとえば…HTMLだけだと

<h1>こんにちは！</h1>

こんにちは！

黒文字で、左寄せの大きめの文字が出るだけ。

でもCSSを使うと…

h1 {
  color: #FFA500;
  text-align: center;
  font-size: 36px;
}

WordPressのカスタムHTMLブロックで使うときは、
<style>〜</style> の中にCSSを書く（この部分がCSS部分）。
<h1> に class="custom-heading" をつけて、CSSを当てる。
WordPressでは**「クラス指定」してCSSを書く**のが安全です。
なぜなら、テーマ全体の <h1> に影響を与えないようにするためです。

こんな風に書きます

<style>
  h1.custom-heading {
    color: #ff6600;
    text-align: center;
    font-size: 36px;
  }
</style>

<h1 class="custom-heading">こんにちは！</h1>

こんにちは！

オレンジ色で、中央寄せで、ちょっと大きめの見出しに

CSSでできること（ざっくり）

文字の色・大きさ・位置
背景色や余白
レイアウトの調整（横並び・レスポンシブなど）
アニメーションや hover 効果

CSSの基礎

基本的なプロパティ

color（文字色）
background-color（背景色）
font-size / font-family（文字の大きさやフォント）
margin / padding（余白の調整）
border（枠線）
width / height（サイズ指定）
display（blockやinline-block、flexなど）
position（relative、absolute など）
text-align、vertical-align
flexbox（簡単な横並び、中央寄せなど）

書き方の理解

セレクタ（class、id、タグ名など）
優先順位（CSSのカスケード・継承の理解）
クラスやIDの使い分け
外部CSS、内部CSS、インラインスタイルの違い

HTML	CSS
内容・構造を作る	デザイン・装飾をつける

HTML → なにを表示するか
CSS → どう見せるか

という関係です

PHP

PHPは、**ユーザーの動きに反応する「動的な機能」**をつける言語で、
家の中の自動ドアやエアコンのような役目です。

たとえば WordPress でよく見るこのコード

<?php the_title(); ?>

これは、「この記事のタイトルを表示せよ」というPHPコードです。

つまりPHPがあると、

記事一覧を自動表示
ユーザーごとに違う表示
お問い合わせフォームの送信処理

…などができるようになります。

HTMLとPHPの違いとは？

項目	HTML	PHP
正式名	HyperText Markup Language	PHP: Hypertext Preprocessor
役割	ページの見た目・構造を作る	ページに動きを加える・データを扱う
例	見出し・画像・ボタンなどを表示	投稿一覧を表示、フォームの処理など
ファイル拡張子	`.html`	`.php`
実行場所	ブラウザ	サーバー

WordPressの中での使い分け

WordPressは、すべてPHPで動いているシステムですが、HTMLもその中に書かれています。

たとえば、こんな感じ

<div class="post-title">
  <h2><?php the_title(); ?></h2>
</div>

<div>〜</div> や <h2> は HTML
<?php the_title(); ?> は PHP

「HTMLの中にPHPを埋め込んで、動くページを作る」というのが WordPress の基本スタイルです。

プラスで知っておくといい知識

レスポンシブ対応（@mediaクエリ）
- スマホ・PCで見え方を変える方法
ブラウザ検証ツールの使い方（Chromeの右クリック→検証）
- 画面を見ながらスタイルを確認・修正できる
簡単なHTMLテンプレートが書ける
- 空のHTMLファイルを自分で作って表示できるレベル

最終的にどこを目指すか

WordPressをカスタマイズしたり、Figmaのデザインを再現したい場合は
この基礎の上に、以下を少しずつ足していくのが理想的です。

HTML + CSS → JavaScriptの基本
WordPressのテンプレート構造とPHPの基礎
ブロックエディタとの連携や、カスタム投稿・カスタムフィールドの活用

HTML / CSS / PHP の役割の違い

言語	役割	簡単な説明
HTML	構造（骨組み）	Webページの「見出し」「段落」「画像」などの配置を決める言語。例：どこにタイトルを置くかなど。
CSS	見た目（デザイン）	色・文字サイズ・レイアウトなどの装飾を担当。HTMLで作った骨組みに見た目を与える。
PHP	裏側の処理（サーバーサイド）	Webフォームの送信、ログイン機能、データベースとのやりとりなど「動き」のある処理を行う。

Webサイトを構成するコードの基礎

HTML

HTMLの基礎

最低限おさえておきたい要素（タグ）

HTMLの使い方の理解

CSS

こんにちは！

こんにちは！

CSSでできること（ざっくり）

CSSの基礎

基本的なプロパティ

書き方の理解

PHP

HTMLとPHPの違いとは？

WordPressの中での使い分け

たとえば、こんな感じ

プラスで知っておくといい知識

最終的にどこを目指すか

HTML / CSS / PHP の役割の違い

おすすめの学び順

【2025年版】AI画像生成に最適なGPU比較：RTX4060～5090【SD/LoRA/ControlNet対応】