なるほど、Blogger で「<!DOCTYPE …> から始まるフル HTML」を貼ると白紙になる件ですね。これは Bloggerの投稿欄は “ページ全体” ではなく “本文の断片” だけを受け付ける 仕様だからです。<!DOCTYPE html>, <html>, <head>, <body> はテーマ側で自動的に用意されるので、投稿本文に入れると無視・除去されます。
どうすればいい？
A) 投稿本文でそのまま“動くデモ”を作る（おすすめ）
<!DOCTYPE> / <html> / <head> / <body> は書かない。
必要な CSS は投稿本文の先頭に <style>…</style> で入れる（Bloggerは基本 OK）。
HTML本体だけ貼る。
例：CSS Grid の最小例（そのまま貼れます）
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.item {
padding: 16px;
border: 1px solid #ccc;
text-align: center;
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
}
</style>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
B) コードを“表示だけ”したい（実行はさせない）
角括弧はエスケープ（< → <, > → >）して
<pre><code>…</code></pre> で囲む。
あるいは Blogger のエディタで「コードブロック」を使う。
C) 本のとおりに“完全なHTMLファイル”で試したい
ローカル PC で index.html として保存 → ブラウザで開く。
公開したい場合は GitHub Pages / Netlify などにアップして、Blogger から <iframe> 埋め込みも可。
例：<iframe src="https://あなたのページ" width="100%" height="600"></iframe>
追加のコツ
グローバルに CSS を効かせたい場合は、
①「テーマ > カスタマイズ > 追加 CSS」に書く、
②「レイアウト > HTML/JavaScript ガジェット」に <style>…</style> を入れて全ページに載せる。
<script> はセキュリティ上ブロックされることがあります。必要ならレイアウト側ガジェットで入れるか、外部にホストして <iframe> で埋める方法が安全です。
必要なら、P25の練習コードを Blogger対応版（本文に貼るだけで動く形） に作り替えてお渡しします。タイトル（章節名）だけ教えていただければ、こちらで整えますよ。
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.item {
padding: 16px;
border: 1px solid #ccc;
text-align: center;
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
}
</style>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
