このページの短縮URL(リンク用) §06-07…<span> – オンライン無料パソコン講座 | PCセミナー

§06-07…<span>

(01) 重要なキーワードではないが特定の書式を設定したい、という場合には<strong>や<em>などのタグ付けをするのではなく、<span>タグを用います。<span>タグは、<strong>や<em>と使用方法は同じですが、重要度は設定されないので、検索エンジンには一般のテキストと同じように扱われます。「7階」というキーワードのフォントの色を「#FF00FF」にするために、「7階」に「kai」というクラス属性を持った<span>タグを設定してください。

<body>
<h1>二宮町Official Site</h1>
<h2>旅館Pick Up!</h2>
<h3>新撰旅館</h3>
<p class="irotuki01">新撰旅館は平成14年にリニューアルオープンしました。館内には5つの種類の<strong>温泉</strong>があります。それぞれの<strong>温泉</strong>は貸切可能。人気の<strong>砂風呂</strong>もぜひご利用くださいませ。</p>
<p class="irotuki02">御夕食は都内の老舗料亭出身の料理長が<em class="furo">山の幸</em>をふんだんに使ったお料理を提供させていただきます。<em>ご宴会</em>は最大100名様まで開催可能となっております。お気軽にお申し付けくださいませ。</p>
<h3>栄泉館</h3>
<p class="irotuki01">栄泉館の特徴はなんと言ってもその豪華な<strong class="furo">露天風呂</strong>。<span class="kai">7階</span>の大浴場からは<em id="asinoko">芦ノ湖</em>が一望できます。また別館の各客室にも<strong>天然温泉</strong>の<strong class="furo">露天風呂</strong>が。週末の予約は込み合いますのでぜひお早めに。</p>
<p class="irotuki02">夕食・朝食はそれぞれ各部屋でお取りいただけます。朝食には栄泉館名物の<em>干物</em>が食べ放題となっております。ぜひご賞味ください。</p>
</body>

(02) 以下のようにCSSファイルを追加・更新してから、Webページをブラウジングしましょう。

span.kai{
color:#FF00FF;
}

(03) なお、<strong><em><span>らは『インラインレベル要素』といい、<p><h1>~<h6>のような『ブロックレベル要素』の中で使わなければいけません。また、複数のブロックレベル要素内にまたがって使用することはできません。

<p>わたしの名前は<span>和田です。</span></p><p><span>舟木さん</span>、よろしくお願いいたします。</p>
×<p>わたしの名前は<span>和田です。</p><p>舟木さん</span>、よろしくお願いいたします。</p>