こんにちは！Web制作の海へようこそ。
HTMLを学び始めると、似たような役割を持つタグがたくさん出てきて、「結局どれを使えばいいの？」と迷ってしまうこと、ありますよね。
特に、テキストを「目立たせたい！」と思った時に出くわすのが``タグと``タグの壁です。どちらも文字が強調されるように見えるけれど、実は役割が全然違う。今日は、そんな「言葉のニュアンス」をHTMLに教える方法について、一緒に紐解いていきましょう。
—
どっちを使えばいいの？「strong」と「em」の決定的な違い
まず、結論から言っちゃいますね。
- ``タグ：「重要度」が高い。絶対に見逃してほしくない箇所。
- ``タグ：「強調（アクセント）」。読み上げた時に、そこだけ声のトーンが変わるような箇所。
これだけだと少し硬いですよね。もっと身近な例え話で考えてみましょう。
お買い物リストでイメージしてみよう
あなたがスーパーに買い物に行く時、奥さん（あるいは旦那さんやパートナー）からこんなメモをもらったとします。
1. 「牛乳を買ってきて！」
2. 「牛乳を買ってきて！」
1の「牛乳」は、「今日の最重要ミッションは牛乳だ！忘れたら夕飯が作れない！」という強い意志を感じませんか？ これが``の役割です。
一方で2の「牛乳」は、「他のものはいいから、とりあえず『牛乳』だけでも確保してきて！」とか、「他の飲み物じゃなくて、『牛乳』だよ？」という、ちょっとしたニュアンスの変化を感じますよね。これが``の役割なんです。
—
なぜ「見た目」だけで判断してはいけないの？
初心者の方が一番やりがちなのが、「太字にしたいから``、斜体にしたいから``を使おう」という判断です。
でも、HTMLは「見た目」を決める道具ではなく、「ここにはこういう意味があるよ」とコンピューターに伝えるための地図のようなものなんです。
例えば、目の不自由な方が使っている「スクリーンリーダー（画面読み上げソフト）」は、``の箇所は重々しく、``の箇所は少し強調して読んだりします。私たちが「意味」を正しくマークアップしてあげることで、誰にとっても優しいWebサイトが出来上がるんですよ。
—
実際にコードを書いてみよう
さあ、実際に触ってみましょう！エディタにこんな感じで書いてみてください。
このプロジェクトで最も大切なのは、
「ユーザーの使いやすさ」です。
（↑ 絶対に外せない最重要ポイント！）
私たちはただコードを書いているわけではありません。
誰かの生活を少しだけ便利にしているんです。
（↑ 「ただ」にアクセントを置いて、意味を強調しています）
CSSで見た目を調整するのもアリ！
ブラウザの標準設定だと、``は斜体（イタリック）になることが多いのですが、日本語のフォントだと斜体が見づらいこともありますよね。そんな時はCSSで自分好みに変えちゃって大丈夫です！
/ emタグの斜体を解除して、色を変えて強調するスタイル /
em {
font-style: normal; / 斜体をやめる /
color: #ff6b6b; / 赤っぽい色でアクセントをつける /
font-weight: bold; / 少し太くしてもOK /
}
「こうしなきゃいけない」という決まりはありません。大切なのは、「なぜそのタグを選んだのか？」という自分なりの理由があることです。
—
最後に：迷ったら「どう伝えたいか」を考えてみて
最初は誰だって迷います。「ここはどっちだろう？」と立ち止まること自体、あなたが真剣にWeb制作に向き合っている証拠です。
迷ったときは、声に出して読んでみてください。
「ここを強く読んだほうが自然かな？」と思えば``を。
「ここが一番伝えたいメッセージだな！」と思えば``を。
そうやって選んだタグは、きっと誰かの心に届くはずです。Web制作は、コンピューター相手の作業だけど、結局は「人と人とのコミュニケーション」です。その優しさを、HTMLというコードの端々に込めていきましょうね。
またいつでも相談しに来てください。あなたのWeb制作ライフを、これからも心から応援しています！
コメント