ブログのデザインをちょっとおしゃれにしようと思って、カスタムコードをコピペしたとき。
画面に現れる div とか margin とか href という謎の英語の羅列……。
「うっ、呪文が始まった……触らんとこ……」って拒絶反応が出たことありませんか？（私はめちゃくちゃありました）
でも、安心してください。これ、一回意味が分かると「ただの片付け上手な箱と、サイズ指定の英語」でしかないんです。
今回は「HTMLって何？」という基本から、私が実際にブログで使っているバナーの裏側（コード）の解剖まで解説します。謎の呪文が「あ、ここで色を変えてるんだな」とパズルみたいに読めるようになりますよ。
この記事でわかること
- 家づくりに例えてざっくり理解する、HTMLとCSSの基本的な役割
- これだけ知っていれば怖くない、コードを読むための基本ワード3つ
- バナーの裏側を解剖、背景色や2つの余白（設定）の意味と違い
- リンクボタンや丸いアイコンを作る、よく使われる命令の仕組み
- 全部読まなくてOK、初心者が拒絶反応なしでコードを読む3つのコツ！
- この記事でわかること
- そもそもHTMLとCSSってなに？
- これだけ覚えれば怖くない！基本ワード3つ
- 【実録】バナーの裏側と表側を答え合わせしてみよう！
- 初心者がHTMLを拒絶反応なしで「読む」3つのコツ
- まとめ
- ブログの「価値」の再定義
そもそもHTMLとCSSってなに？
まずは、よく聞く「HTML」と「CSS」の役割を、家づくりに例えてざっくり説明します。
HTML（骨組みと家具の配置）
ここに文章を置く、ここに画像を置く、という「配置」を決める担当。
CSS（壁紙とインテリアのデザイン）
HTMLで置いた家具に対して、「色を緑にする」「角を丸くする」という「見た目の装飾」を指示する担当。
複雑なプログラミング言語と違って、HTMLは「ここに文章！」「ここにボタン！」と目印（タグ）をつけていくだけなので、実はとてもシンプルです。
これだけ覚えれば怖くない！基本ワード3つ
実際のコードを見る前に、一番よく出てくる3つの言葉だけ押さえておきましょう。
① タグ（Tag）
文字や画像を挟む「（かっこ）」みたいなもの。<div> とか <p> など。必ず「始まり」と「終わり（/ が付く）」がセットになります。
② 要素（Element）
タグで挟まれた「中身も含めたひとかたまり」のこと。
③ 属性（Attribute）
タグに付ける「おまけのトッピング情報」。リンクの飛び先（URL）や見た目の設定（style）など。
イメージはマトリョーシカです。大きな箱（タグ）の中に、小さな箱（タグ）が重なって入っている。これがHTMLの基本構造です。
【実録】バナーの裏側と表側を答え合わせしてみよう！
では、ここからが本番です。
私のブログで実際に使っているバナーをサンプルにして、「裏側のコード」が「表側の見た目」にどうつながっているか解剖していきます。
↑ 上がHTML編集画面、下が実際の表示。同じ部分を色分けして見比べると、どのコードがどこに対応しているかが一目でわかります。
① バナー全体の「薄緑色の大きな箱」
まずは、バナーの一番外側にある薄緑色のエリア。裏側ではこんなコードが動いています。
<div style="background: #E9F0E9; border-radius: 12px; padding: 24px; margin: 48px 0;">
<div>（透明な段ボール箱）
デザインをひとまとめにするための空っぽの箱。「ここからバナーを始めます！」という合図です。それ自体には色も形もなく、中に入れるものを整理するための器だと思ってください。
background: #E9F0E9;（背景色）
箱の色を「この薄緑色（#E9F0E9）」にしてね、という命令です。#E9F0E9 は色のコード（カラーコード）で、6桁の英数字で色を指定します。試しに #E9F0E9 をメモ帳や配色サイトに貼り付けてみると、あの薄緑色が表示されるはずです。
border-radius: 12px;（角丸カッター）
四隅をちょっとだけ丸くして、やさしい印象にする設定です。数字が大きいほど丸みが増します。
padding と margin（最大の謎、2つの余白）
ここがいちばん混乱するポイントなので、しっかり整理します。
padding（内側の余白）：箱の「内側」のすき間。これがないと文字が緑のフチにぴったり張り付いてギュウギュウになります。
margin（外側の余白）：箱の「外側」のすき間。前後の文章とバナーがくっつかないように、距離をあける設定です。
壁と家具の関係で例えると、padding は「家具と壁のあいだの空気」、margin は「この部屋と隣の部屋のあいだの壁の厚さ」です。
② 真ん中にある「カプセル型のボタン」
次に、「AINになる方法を見る」などのボタンです。
<a href="URL" style="border-radius: 999px; background: #E8E9DF; ...">
<a>（どこかへつながるドア）
これを書くと、ただの文字が「クリックできるリンク」に変身します。
href="URL"（リンク先の住所）
ドアを開けたときの次の行き先（URL）を指定する部分です。ここのURLを書き換えるだけで、ボタンの飛び先を変えられます。
border-radius: 999px;（カプセル型の秘密）
さっきのバナー全体は「12px」でした。それを一気に「999px」という大きな数字にすると、四隅が完全に丸くなってあのカプセル型になります。「どうせ丸くするなら大げさな数字でいい」という発想で、実際のコードではよく使われる書き方です。
ボタンの色の使い分け
完成バナーを見ると、一番下の「現場英語を練習する（無料）」ボタンだけ濃い緑色になっていますよね。裏側でもそこだけ background: #86A186; と色を変えて、視線が集まるように強弱をつけています。
③ 一番下にある「プロフィールアイコンの丸」
最後に、この記事を書いた人バナーの丸い写真です。
<img src="写真のURL" style="border-radius: 50%; float: left; width: 70px;">
<img src="...">
「ここにこの写真を表示して！」という命令です。src の中にある URL が「どの写真か」を指定しています。
border-radius: 50%;（まん丸にくり抜く）
元の写真は普通の四角い画像ですが、「50%（半分）丸くする」と命令することで、きれいなまん丸アイコンになります。SNSのアイコンも、この方法で丸く表示されています。
float: left;（文章を右に回り込ませる）
写真を左に寄せる命令です。これがあることで、右側の空いたスペースに自己紹介の文章がきれいに並んでくれます。float がないと写真と文章が縦に積み重なって、レイアウトが崩れてしまいます。
初心者がHTMLを拒絶反応なしで「読む」3つのコツ
コツ①：全部読もうとしない
変えたい色や数字のコードだけをピンポイントで探せばOK。コード全体を理解する必要はありません。
コツ②：「始まり」と「終わり」のセットを意識する
<div> があれば必ず </div> がある。<a> があれば必ず </a> がある。この塊を意識するだけで、コードの構造がスッキリ見えてきます。
コツ③：画面の見た目と紐づけて考える
いつも画面上で操作している「角丸」や「余白」が、裏側ではこういう英語になっているだけ。「あの丸みは border-radius だったんだ」と結びつけると、一気に覚えやすくなります。
まとめ
| コード | 意味 |
| background | 背景色 |
| border-radius | 角の丸み（数字が大きいほど丸い） |
| padding | 内側の余白 |
| margin | 外側の余白 |
| <a href="..."> | リンクボタン |
| border-radius: 50% | 丸いアイコン |
| float: left | 左寄せ・文字の回り込み |
あんなに難しそうに見えた英語の羅列も、仕組みが分かればパズルみたいに読めるようになってきませんか？
コピペしたコードの数字（例えば 12px を 20px にしてみるなど）をちょっといじるだけで、自分好みの見た目にカスタムできるようになります。「HTML、ちょっと読めるかも！」というワクワク感が、ブログをもっと楽しくするきっかけになれば嬉しいです。
AdSense合格への戦略
ブログの「価値」の再定義
「価値のあるコンテンツって、具体的に何を書けばいいの？」という悩みに、私なりの答えを出しました。「日記」から「専門メディア」へと生まれ変わるために私が行った、逆転合格への挑戦の全記録を公開します。
この記事を書いた人Marimokomame｜元看護師
日本で急性期内科病棟と救急外来で看護師として働いた後、ワーキングホリデーでオーストラリアへ。現在はシドニーの高齢者施設でAINとして働いています。
