近くの川ではさくらが満開で、見ていると気持ちも自然と前向きになりますね。春は新しいスタートにぴったりの季節。
心機一転、また制作の時間を楽しんでいこうと思います。
今回は、WordPressでサイトのエディタの1つである「クラシックエディタ」の魅力について書いてみます。
最近では、ノーコード・ローコードでサイトを作れる技術の進化がめざましく、特に「ブロックエディタ」はその代表格です。標準ブロックやプラグインで拡張されたブロックを使えば、HTMLやCSSを意識することなくページを完成させることができます。
では、なぜ今あえてクラシックエディタを使うのか？
私の答えは、
**「HTMLとCSSの“階層構造”を意識して学習・実践できるから」**です。
コーディングの土台となる「構造の理解」が深まる
クラシックエディタでは、テキストモードでHTMLを直接書くことができ、自由にタグの構造を組み立てられます。これにより、「どの要素が親で、どの要素が子か」といったWebサイトの構造的な考え方を自然と学ぶことができます。
たとえば、以下のようなHTMLを自分の手で書いてみることができます。
<div class="section">
<div class="container">
<div class="item">
<h3 class="item_title">タイトル1</h3>
<p class="item_text">説明文が入ります。</p>
</div>
<div class="item">
<h3 class="item_title">タイトル2</h3>
<p class="item_text">説明文が入ります。</p>
</div>
</div>
</div>このように、階層を意識したマークアップを自分で組むことで、HTML構造への理解が深まります。
CSSも“構造をもとに”組み立てられる
構造を学びながら、それに合わせたCSSを自分で書けるのもクラシックエディタのメリットです。
.section {
background: #f9f9f9;
padding: 60px 20px;
color: red;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
gap: 40px;
color: green;
}
.item {
flex: 1;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
color: brown;
}
.item_title {
font-size: 1.2rem;
margin-bottom: 10px;
}
.item_text {
font-size: 1rem;
line-height: 1.6;
color: blue;
}＜実際の出力＞
タイトル1
説明文が入ります。
タイトル2
説明文が入ります。
ここで「説明文が入ります。」の文字に着目してみましょう！
検証ツールで確認してみると、この文字にはクラス名item_textに対し「color:blue;」の文字色が適用されています。
「color:blue;」の文字色指定を削除すると、「color: brown;」が適用されます。これはクラス名itemに対し適用されている指定。これも消していくと「color: green;」→「color: red;」→「color: #3a3a3a」となり、<body>タグで指定されている文字色指定が適用されました。
ただレイアウトを組むだけではなく、どのクラスがどのHTML要素に対応しているか、どうやってスタイルが継承されていくのかを理解しながら作業できるので、学習効率も高まります。
まとめ
私も普段はブロックエディタを使いサイトを作ります。制作効率が段違いですし、コードを書いたのにタグの位置が間違って表示が崩れてるという事もありません。しかし裏側でどんなHTMLが出力されているか、どうCSSが適用されているかを意識せずに進めてしまうと、深い理解にはつながりにくいものです。
”自分で書くからこそ、知識として定着する”
自分の手でコードを書くことで、タグの意味やクラス設計といったWeb制作の基礎知識を実践しながら学ぶことができます。
またクラシックエディタは「コードが書ける人」にとって、以下のようなメリットがあります：
- HTMLの階層構造を自分で設計できる
- CSSと連動したクラス設計がしやすい
- サイト全体の構造とスタイルを一貫性をもって管理できる
ブロックエディタが悪いというわけではありませんが、「きちんと設計されたコードでサイトを作りたい」人にとっては、クラシックエディタがいまでも有力な選択肢です。
