本文へスキップ
BecomeCoder

HTML/CSSコース · 第2章 テキストを構造化する · レッスン4

強調とインライン要素

ブラウザで完結

導入

段落の中の一部分だけを目立たせたいとき、<strong><em> といった インライン要素 を使います。行全体ではなく、テキストの一部を囲むのが特徴です。

説明

  • <strong> … 重要な語句(多くのブラウザで太字
  • <em> … 強調(多くのブラウザで斜体
  • <br> … 改行(終了タグのない 空要素
<p>これは<strong>とても重要</strong>な注意です。<br>次の行に続きます。</p>
<p>彼は<em>本当に</em>驚いた。</p>

<br> は中身を持たないため終了タグがありません。このような要素を空要素と呼びます。

やってみよう

下のエディタに上の例を打ち込み、プレビューで「とても重要」が太く、「本当に」が斜めになること、<br> で行が折り返ることを確かめましょう。

演習

「今日は休講です」という段落を、<p><strong> を使って作ってください。

ヒント1を見る

段落 <p> の中で、強調したい「休講」だけを <strong> で挟みます。<p>今日は<strong>休講</strong>です</p>

実際に動かしてみよう

下のエディタに HTML/CSS を書くと、右側のプレビューにその場で描画されます。本文の例を打ち込んだり書き換えたりして、表示の変化を確かめながら進めましょう。

HTML/CSS プレビュー

書いた HTML/CSS をサンドボックス内でその場で描画するプレビューを読み込みます。
スクロールして表示された時点でも自動で読み込まれます。