コードについて
コードの基礎
今や、AIがコードを書いてくれる時代です。なので、私たちは基礎だけ抑えておけば自分でページが作れます。
ちょっとだけ、Wordpressテーマを使うのに比べると手間は掛かりますが、こだわりたい人にとっては最高のチャンスです。
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-alignflexbox（簡単な横並び、中央寄せなど）
書き方の理解
- セレクタ（
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の基本文法と、WordPressでよく使う関数を覚える（例：
the_title()、get_header()など） - SWELLや他テーマを触りながら「コードの中身を読んでみる」
おすすめの第一歩
「このWordPressテーマの中のこのページは、どうなっているのか？」
という視点で、コードを少しずつ覗いてみると、ぐっと理解が深まります！