こんにちは！みとかです。

アルバイトでSEOに全力を注いだ１年、職業訓練校を卒業してからしばらくコードに触っていません…

ある日、「ちょっと触るかも」という場面がきて、すごい焦りました！

定期的に思い出さないと忘れちゃう！

ということで今回はHTMLとCSSの復習をしていきます！

VSコードを起動！

私のテキストエディタはVSコード（Visual Studio Code）です！

今回完成させたいのは、しょーごログさんの中級編Exです。

現在の会社に入社前に中級編まで学習していたのですが、入社後はSEOの勉強で1年半ほど経ってしまいました…

SEOアルバイトを始めてからVSコードを開いたのは、正規表現をするときだけ…💦

ディベロッパーツールで構成を確認するときはあるけど、かなり忘れている！！！

今回は忘れがちなHTML/CSSの基本ふりかえりメモを作っていきましょう！

【HTML編】最低限これだけ思い出せばなんとかなる！

📚よく使う基本タグ

<header>

• サイトやセクションのヘッダー部分（ロゴやメニューなど）

My Blog

<main>

• ページのメインコンテンツを囲むタグ
• 1ページに1つだけがルール！

記事タイトル

本文…

<div>

• 意味を持たない箱
• CSSでスタイルやレイアウトを調整するときに使う

<section>

• 意味のあるかたまり（見出しとセットが基本）
• サイト内のセクション（「お知らせ」「サービス紹介」など）に使うと◎

サービス一覧

説明…

このあたりについては、さすがに覚えています！
強いて言えば <div>,<section>　の使い分けってどうだったかな…？

これ以外にも混同しやすいのが、<article>
コンテンツ自体が独立して完結した情報（例えば、1つの記事や投稿など）を意味します。

🔗リンク・画像系

<a>

• リンクタグ。別ページ・外部サイトなどに飛ばせる

公式サイト

▶ よく使う属性

• href: リンク先
• target="_blank": 新しいタブで開く

<img>

• 画像を表示するタグ

▶ よく使う属性

• src: 画像のパス
• alt: 画像が表示できない時の代替テキスト（SEO的にも大事！）

📋 リスト系

<ul> と <li>

• 順番のないリスト（unordered list）
• ナビや箇条書きに便利！

• りんご
• みかん
• バナナ

• <ul>：リスト全体を囲う
• <li>：リストの中の1項目

▶ 数字付きリストにしたいなら <ol>（ordered list）を使おう！

---

ひとまずここまで思い出せれば、簡単なHTMLは作れることでしょう！

📝フォームタグ系

• フォームタグ系（<form>, <input>, <textarea>, <label>）
• alt属性・href・target="_blank"など

このあたりも1回は触ったことあるはず！
実務でよく出る基本のフォーム構成はこちら👇

<form>

フォーム全体を囲むタグ。
送信先や送信方法を指定するために、action=""とmethod=""を使う。

<input>

テキスト入力、チェックボックス、ボタンなどに使うタグ。
typeの種類で見た目や機能が変わる！

<textarea>

複数行のテキスト入力欄。お問い合わせやメモ入力に。

<label>

入力欄に対応する説明テキストをつける。
for="id名"でどの<input>とペアなのかを指定する。

メールアドレス

⏰よく使う属性系の復習

タグだけじゃなくて、属性もよく聞かれるので要チェック！

alt（画像の説明）

画像が表示されないときの代替テキスト。
SEOやアクセシビリティ対策としても重要！

href（リンク先）

<a>タグの必須属性。クリック時の遷移先を指定する。

リンクテキスト

target="_blank"（別タブで開く）

外部リンクや自サイト内でも別タブで開きたいときに使う。
一緒に rel="noopener" をつけるのが最近の基本。

外部リンク

---

ひとまずここまで思い出せれば、「簡単なフォーム付きのページ」くらいはもう作れるはず！

ちょっとずつ感覚戻していきます！

【CSS編】「あ〜そうそう！」ってなる忘れがちなやつ

🎯 レイアウト系：flex まわり

display: flex; justify-content: center; align-items: center;

• display: flex; → 要素を横並び
• justify-content: → 主軸方向の配置（横の並び）
  • flex-start, center, space-between など
• align-items: → 交差軸の揃え方（縦の並び）

📏 余白：margin と padding

• margin：外側の余白。隣の要素との距離。
• padding：内側の余白。要素の中身と枠の間。

margin: 20px; padding: 10px;

💡「ボタンの中の文字をちょっと余裕持たせたい」→ padding

💡「他のパーツとの間隔を空けたい」→ margin

---

🎨 色・フォント関連

color: #333; font-size: 16px; background-color: #f0f0f0;

• color → テキストの色
• font-size → 文字サイズ（px, em, rem など）
• background-color → 背景色（名前・HEX・rgbなどOK）

🔍 #333はグレー寄りの黒でよく使う！

さいごに：復習してよかったこと

今回、久しぶりにコーディングしてみた思ったことは、ちょっとでも触っておくと安心感が違うということです。
完璧なコーディングスキルじゃなくても、構造を理解しているだけで会話や指示の受け渡しがスムーズになるし、
「何を頼まれているのか」がきちんとイメージできるようになります。

Webディレクターとしての自信にもつながるので、時間が空いてしまっていても“ちょっと復習”おすすめです！

私のコーディング力が一気に成長したテキストはこちら↓

良かったら私が以前作ったコーディングサイトもご覧ください！

初級Ex　ID：ex１　パスワード：ex1

中級編オリジナル　ID：aqua　パスワード：aqua

---