知識ゼロから始めるHTML/CSSコーディング日記　＃003【実際にコード入力編】

プログラミング
この記事は約13分で読めます。

VS Codeで安全にコードのトレーニング

前回は、定番の無料コードエディター「Visual Studio Code（通称：VS Code / ブイエスコード）」を導入して、色々試してみるための準備までを紹介しました。
いきなりWeb環境に触るのではなく、安心安全ないわば、まっさらな紙（VS Code）にAIが示したお手本HTML/CSSを入力してみることで、コードがどう画面に反映されるのか、挑戦してみました。

AIとの対話メモ：HTML/CSSの基礎とVS Codeの便利技

今回の学習における、私とAIとのやり取りをまとめました。
超初心者の私が戸惑った「ファイルの扱い方」「CSSの場所」などの疑問もすっきり解決しています。

1. VS Codeを使った3つの練習メニュー

まずは、VS Code上で簡単にできる3つの練習方法について教わりました。

  • メニュー1：CSSで「自分の好きな色」を作ってみる
    • CSSで色を指定するとき、color: blue; のように色の名前を書く方法だけでなく、#ff6600 のような「16進数のカラーコード」を使う方法。
    • VS Codeの特徴として、カラーコードの上にマウスを乗せるだけで、直感的に色を選べる「カラーピッカー」が表示されます。これでテーマカラーを自分だけの絶妙な色に変更することができます。
  • メニュー2：文字に「枠線」や「背景」をつける
    • 見出しに下線を引く border-bottom、背景色を設定する background-color、内側の余白を作る padding、角を丸くする border-radius を学習しました。
  • メニュー3：「ボタン」を作ってみる
    • Webサイトでよく見かける「クリックしてね」というボタンも、
      HTMLのリンクタグ（<a>タグなど）とCSSのデザイン設定だけで作れることを知りました。

2. コードを書いていた画面を一度リセットするには？

”VS Codeのコードをもう一度消してまっさらにするには？”

慣れない中で右往左往しながらVS Code を操作していたのですが、いちからファイルを作成し、新たなコードを入力したい、また最初からやり直したいときの方法を教えてもらいました。

  • 方法A：ファイルの中身を全部消す（スピード重視）
    • キーボードの Ctrl + Aで全選択。
    • BackSpace や Delete で消去。
    • Ctrl + Sで上書き保存。これでブラウザをリロードすると画面は元に戻ります。
  • 方法B：新しい練習用ファイルを作る（推奨）
    • 前のコードを残しておきたいときは、左側のファイル一覧（サイドバー）の何もないところを右クリックして「新しいファイル」を作成。
  • 便利機能：Emmet（エメット）の「一秒リセット」
    • まっさらにしたファイルに、半角で ! とだけ入力して Tab キーを押すと、一瞬で「HTMLの正しい基本の型」が自動生成されます。

3. ファイル名に「.html」をつけなければいけない理由

”htmlってファイル名にしないとだめなの？”

新しくファイルを作るときに、なぜ拡張子「.html」という名前で保存しなければならないのか、素朴な疑問が湧いたので質問してみました。

この「.html」や「.css」の部分を、「拡張子」と呼びますが、ブラウザに「これはどういう仕組みのファイルなのか」を教えるための極めて重要な目印ですね。

  • 理由①：ブラウザへの「合図」になる
    • ブラウザ（Google Chromeなど）は、拡張子を見て表示方法を判断します。
    • .html であれば「Webサイトの設計図だな」と理解し、見出しタグ <h1> を大きく太く表示します。
    • もし .txt（メモ帳形式）のままだと、画面に <h1> というコードそのものが文字としてそのまま表示されてしまいます。
  • 理由②：VS Codeが気を効かせてくれるように？なる
    • ファイル名が .html になると、エディター（VS Code）が「HTMLの編集だな」と認識してくれます。
    • これにより、コードに分かりやすく色がつき、打ち間違いを教えてくれたり、先ほどの ! + Tab（Emmet）のような入力サポート機能が働くようになります。
  • ファイル名をつけるときの「3つの鉄則」：
    1. 必ず半角英数字でつける
      日本語はエラーや文字化けの原因になります。
      （例：○ practice.html、× 練習.html）
    2. スペースは使わない
      スペースの代わりにハイフン - やアンダーバー _ を使います。
      （例：○ my_test.html、× my test.html）
    3. 一番最初のページは index.html にする
      Webの世界の共通ルールで、サーバーにアクセスしたときに最初に読み込まれるファイルです

4. デザインの命令（style）を書く場所

”styleはどこに置いても構わないの？”

HTMLの中に、CSSのデザイン命令（<style>タグ）を書くとき、どこに配置すればいいのかという場所についての疑問です。結論としては「どこに置いても動くけれど、実際の現場では役割によって場所が決まっている」とのことでした。

主に3つの書き方があります。

  • 置き方①： <head> の中に置く（今回の練習の形式）
    • HTMLファイルの上部にある <head> ~ </head> の間にまとめて書く方法。
    • 全体のデザインを一箇所で管理できるので初心者にとって最も分かりやすいです。
    • WordPressとの関連：WordPressのカスタマイズ画面にある「追加CSS」に入力した内容は、最終的にこの <head> の中に自動的に配置される仕組みになっています。
  • 置き方②：タグに直接書く（インライン）
    • <h1 style="color: red;"> のように、HTMLの特定のタグの中に直接書き込む方法。
    • 「ここだけどうしても、今すぐピンポイントで色を変えたい！」という時には一番強力に効きますが、あちこちに書きすぎると後でデザイン変更する際、すべてのタグを探して修正しなければならなくなるため、管理が大変になります。
  • 置き方③：別のCSSファイルにする（主流）
    • HTMLとは完全に分けて、例えば style.css というファイルを作り、それをHTML側から読み込ませる方法。
    • 1つのCSSファイルを作るだけで、何十、何百ページもある巨大なWebサイトすべてのデザインを一括管理できます。
    • WordPressとの関連：WordPressの「テーマ」は、ほぼすべてこの形式で作られています。

実際に入力した練習コードと初心者向け解説

今回、実際にAIに学習ネタとして提案させ、自ら入力と動作確認を行ったコードがこちらです。
「初心者向け解説」などと言っておりますが、自分のためです・・。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プログラミング練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>プログラミング学習の記録</h1>
    <p>今日はVS Codeを使って、HTMLとCSSの練習をしています。</p>

    <h2>学んだこと</h2>
    <ul>
        <li>VS Codeのインストール</li>
        <li>Emmet（! + Tab）の使い方</li>
        <li>ファイルの拡張子は「.html」にする</li>
    </ul>

    <button class="btn">応援ボタン</button>

</body>
</html>

/* 1. 全体を整える */
body {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.6;
    padding: 30px;
}

/* 2. 見出しを雰囲気を整える */
h2 {
    border-left: 5px solid #0073aa; 
    padding-left: 15px;
    background: #f0f0f0;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* 3. ボタンを見栄え良く */
.btn {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* 4. ボタンにマウスが乗ったときの変化（ホバー効果） */
.btn:hover {
    background-color: #ff9900; /* 少し明るいオレンジ */
    transform: scale(1.1);    /* 少しだけ大きくする魔 */
    transition: 0.3s;          /* 0.3秒かけてゆっくり変化させる */
}
💡 ブラウザでの実際の見え方（再現デモ）
プログラミング練習

プログラミング学習の記録

今日はVS Codeを使って、HTMLとCSSの練習をしています。

学んだこと

  • VS Codeのインストール
  • Emmet（! + Tab）の使い方
  • ファイルの拡張子は「.html」にする

HTML：WordPressの「ブロック要素」の正体

上記のHTMLコードの中に登場するタグは、普段WordPressの記事投稿画面で何気なく使っている「ブロック」と全く同じ役割をしています。

  • <h1> や <h2>
    • WordPressでいう「見出しブロック（H1、H2）」の正体です。
  • <p>
    • 文章を入力する「段落ブロック」です。
  • <ul> と <li>
    • 箇条書きを作成する「リストブロック」です。
  • class="btn"
    • これが「クラス」と呼ばれる目印です。WordPressの「ブロック」の高度な設定項目にある「追加CSSクラス」に入力する値と同じ役割を持ちます。このクラス名（.btn）をターゲットにしてCSSを書くことで、特定の要素だけに特別なデザインを当てることができます。

CSS：デザインを変える3つの技術

① padding（余白）のコントロールで窮屈なデザインを脱出！

Webデザインを左右するのは、色よりも「余白（マージンやパディング）」だと言われています。 今回、見出し（<h2>）に対してこのように余白を設定しました。

h2 {
    border-left: 5px solid #0073aa; 
    padding-left: 15px; /* 左側の枠線と文字のスキマを15px空ける */
}

この padding-left: 15px; を padding-left: 50px; のように数値を大きくすると、左側の青い縦線と文字の間がゆったりと空くようになります。 さらに、padding-top: 20px;（上の余白）や、
padding-bottom: 20px;（下の余白）を書き足すことで、見出し全体が窮屈にならず、見やすいデザインに変わりました。

② 「:hover」で作る、ボタンがふわっと動く仕掛け

Webデザインでは必須の、ユーザーに「ここはボタンだから押せるよ！」と直感的に伝える仕掛け。

.btn:hover {
    background-color: #ff9900; /* マウスが乗った時に少し明るいオレンジに変える */
    transform: scale(1.1);    /* ボタンを1.1倍に少し大きくする */
    transition: 0.3s;          /* 0.3秒かけて滑らかに変化させる */
}

クラス名（.btn）の後ろに :hover をつけることで、「マウスが乗ったときだけデザインを上書きする」という命令になります。transition を設定したおかげで、パッと一瞬で変わるのではなく「ふわっ」とアニメーションしながら大きくなる、いろんなサイトでよく見る動きに変わります。

その他教えてもらったこと

”<　>とか｛　｝の使い分けは？”

結論から言うと、「役割が違うから、記号を変えて区別している」というのが答えです。

記号使われる場所役割
< > (タグ)HTML「場所」の名前
「ここからここまでがボタン（button）ですよ」という目印。
{ } (波括弧)CSS / JS「中身（設定）」の詳細
「（ボタンの色は）赤にしてください」という具体的な命令を包む。

例えば、

.btn {
    background-color: red;
    color: white;
}

この { } は、「.btn（ボタン）に対する命令は、この中に全部入っているよ！」という「袋」のような役割をしています。

  • もしここも < > だったら、ブラウザは「これはHTMLの新しいタグなのか？それともデザインの命令なのか？」とわからなくなってしまいます。
  • 記号を変えることで、ブラウザは瞬時に「{ } が出てきたから、ここからは具体的なデザインの設定」と理解できる仕組みになっています。

”コードの行の先頭は、ずらすものなの？”

その行の先頭をずらす操作を「インデント（字下げ）」と呼びますが、プログラミングでは「必須」と言ってもいいほど重要です。理由は大きく分けて2つあります。

  • 「どこからどこまで」の塊かを見分けるため
    HTMLやCSSでは、あるタグの中に別のタグが入る「入れ子構造」になっています。 先頭をずらすことで、パッと見ただけで「この項目はこの中に入っているんだな」と視覚的に理解できるようになります。
  • ミスを防ぐため
    全部左端に揃えて書いてしまうと、閉じタグ（</div> や } など）を忘れたときに、どこで忘れたのかを探すのが非常に大変です。 インデントが正しく揃っていれば、上下のラインを見るだけで、閉じられていない部分が比較的見つけやすくなります。

VS Codeでの便利な操作

手動でスペースを打つ必要はありません。

  • Tab キー: 右にずらす（インデントを入れる）
  • Shift + Tab キー: 左に戻す（インデントを減らす）
  • 自動整形: Shift + Alt + F（Windows）/ Shift + Option + F（Mac）を押すと、VS Codeがガタガタのインデントを一瞬で綺麗に整えてくれます。

納得したポイント

  • 新しくファイルを作成するときに、うっかり拡張子の「.html」を打ち忘れて、VS Codeの色分け機能やEmmet（! + Tab）が一切反応しなくなるトラブルがありました。拡張子の大切さが身に沁みました。
  • CSS（<style>タグ）を書く位置について、HTMLのどこに書いても動いてしまうからこそ、どのやり方がベストなのか最初少し混乱しました。<head>の中や「追加CSS」への書き方にまずは慣れていくのが一番の近道だと分かりました。

今回の学び

今回得られた大きな収穫は、「普段WordPressの投稿画面でブロックをカチカチ選んで作っているブログ記事は、裏側ではすべてこのようなHTMLとCSSの単純な組み合わせで動いている」ということをなんとなくですが実感できたことです。

  1. テーマの色の変え方。
  2. 余白（padding）を調整するなどの、レイアウトの整え方。
  3. :hover（ホバー効果）を使うなど、インターフェース面でのユーザーに対する配慮の基礎。

本番のサーバー環境やWordPressのファイルを壊す心配がないVS Codeを使って、これからもっと色々なWebデザインに挑戦して、将来は自分のブログテーマを自在にカスタマイズできるように引き続き勉強してしていきます。
次回以降は、当面、基本はコード入力になりますが、内容やトレーニングの手法について変化が出てくるような進め方にしたいです。

コメント

タイトルとURLをコピーしました