2025.11.04

HTML、CSSを学ぶには「Progate」がいい！

noira.0453@outlook.jp

ブログを書き始めてから、もうすぐ3年になります。
先日ようやくGoogleアドセンスに合格し、「ようやく一歩前進だ！」と感じています。

でもhtml、cssの知識がないことに気がついて、先月からProgateを開始しました。

Youtubeのリベ大で教えてもらったProgate。初心者のためになかなかいいです。
全く何もわかっていない私に、ひらがなを教えてくれるように丁寧に教えてくれます。
ブラウザからProgateに入って登録すると、基本的なところを無料で受講できます。

私はまだ基本的なところを無料でやっているところです。

Contents

HTMLとは

HTMLは「HyperText Markup Language」（ハイパーテキスト・マークアップ・ランゲージ）の略です。これは、ウェブページの構造を定義するために使われるマークアップ言語です。

HTML（エイチティーエムエル）は、ウェブページを作るための「設計図」のような言語です。

WordPressの記事を投稿すると、実は自動的にHTMLに変換されて表示されています。
だから「文字の色を変える」「見出しをつける」などの操作も、裏ではHTMLタグで指示されてるんです。

< >このカッコで囲まれた部分をタグといいます。

【例】
<h1>：見出し（heading）
<p>：段落（paragraph）
<a>：リンク（anchor）

タグに囲まれた、h1,p,aなどを要素と呼びます。

コードエディタとは⋯プログラミング用のソースコードを作成・編集するための専用ソフトウェアです。通常のテキストエディタと異なり、構文のハイライト表示、コードの自動補完、文法ミスの指摘などの機能で、プログラミングの効率と品質を向上させます。

WordPressの「コードエディタ」では、このHTMLを直接いじることができます。
ちょっとしたリンク修正や、見出しタグの調整も自分でできるようになります！

HTMLを理解すると、ブログの自由度が一気に上がります。
「デザインをちょっと変えたい」と思ったときも、HTMLを知ってると怖くなくなるんです。

CSSは「Cascading Style Sheets」（カスケーディング・スタイル・シート）の略です。ウェブページの色やサイズ、レイアウトといったデザインを指定するための言語です。

HTMLが「家の骨組み」なら、CSSは「壁紙・家具・照明」といったデザイン担当！

HTMLがこれ👇

<h1>こんにちは！</h1>
<p>これは段落です。</p>

CSSでデザインを加えると👇

h1 {
  color: blue;
  font-size: 28px;
}
p {
  color: gray;
  line-height: 1.8;
}

そして表示結果はこうなる：

🟦 見出しが青色で大きくなり
グレーの本文がゆったり読めるように！

WordPressでは2つの方法があります👇

目的	CSSコード例	効果
見出しを中央に	`h2 { text-align: center; }`	中央寄せ
ボタンを目立たせる	`.btn { background-color: orange; color: white; padding: 10px; border-radius: 6px; }`	ボタン風
画像の角を丸くする	`img { border-radius: 10px; }`	柔らかい印象に