強調する -- HTML & CSS入門

文字を強調する方法を紹介します。また、インライン要素とブロックレベル要素について説明します。

文字を強調する

文章を書いていくと「ここは力いっぱい強調したい！」って思う部分が出てきますよね。そういうときはem要素を使います。強調したい文字列を〜で囲んでください。emはemphasisのemです。

<p>彼は力強く叫んだ。「<em>退かぬ！！媚びぬ、省みぬ！！</em>」</p>

彼は力強く叫んだ。「退かぬ！！媚びぬ、省みぬ！！」

「em要素じゃ物足りない。もっと強く強調したい！」なんてときもあるでしょう。em要素よりも強く強調したいときはstrong要素を使います。今度は〜で囲んでください。

<p>さらに吠えた。「<strong>帝王に逃走はないのだーー！！</strong>」</p>

さらに吠えた。「帝王に逃走はないのだーー！！」

Internet ExplorerやFirefoxなどのブラウザだと、〜で囲んだ部分は斜体で、〜で囲んだ部分は太字で表示されたと思います。ですが、CSSを使えば強調の仕方を好きなように変えることができます。たとえば、

などが可能です。ほかにもいろいろできます。CSSの使い方は次のページで紹介しています。

要素にはインライン要素とブロックレベル要素の2種類の要素があります。

ブロックレベル要素: 段落(p要素)、見出し(h1-h6要素)など文書の大きなパーツとなる要素。ほかにリストや表などがある。視覚的には前後に改行が入る。
インライン要素: ブロック要素の中に出てくる要素。強調(em要素、strong要素)など。

(図)[ブロックレベル要素(インライン要素)(インライン要素)] ※ブロックレベル要素の中にインライン要素がある

どの要素がブロックレベルでどの要素がインラインなのかは覚えないといけません。これを怠ると間違ったHTML文書を量産する羽目になります。新しい要素が登場したらそれはどっちに属するのか、みなさんの脳に記憶させてください。

気をつけなければならないのは、インライン要素の中にブロック要素が現れてはいけないことです。たとえば、段落全体を強調したいからといって、

〜

とするのは間違いです。

〜

とします。

ブロック要素の中身は場合によりけりです。詳しくは要素の親子関係でお話します。

これでHTMLの基本は一通り学んだことになります。次回はCSSを使って文字に色をつけたり文字を大きくしたりします。