HTML,CSS：文章内の文字を強調する方法

質問

例えば、

HTML部分
<div class="a">私は、～～<? class="b">「●●」</?>～～である。</div>

CSS部分
div.a {font-style: normal;
font-size: 11pt;
font-family: "ＭＳ 明朝";
line-height: 125%
}

のとき、<?>の部分を強調したいのですがどのタグを使えばいいでしょうか？レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。
ちなみに、<?>は改行しない場合です。

回答よろしくお願いします。

回答No.2

Nine-nine · ベストアンサー

>強調したいのですがどのタグを使えばいいでしょうか？レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。
強調というタグがあります。レイアウト用のタグではなく、構造的な意味での強調なので、安心して使ってください。レイアウト用のタグは<b>（太字）等でこちらは非推奨です。

強調は<em>というタグです。
より強調は<strong>というタグです。

ｃｓｓに興味を持たせたはいいけど、お奨めのサイトを書いていなかった。つまみ食い勉強法をつっぱしっているみたいなので、入門に最適なサイトを紹介しますね。
ここの
http://www.kanzaki.com/docs/htminfo.html
30分間(X)HTML入門 からｃｓｓに進んでみてください。多分、最短学習ができると思います。

divやspanは他に意味付けする理由がない場合で、それでも括りたい場合に悔しがりながら使うタグです。安易にdivやspanは使わないほうが管理が楽です。divはブロック要素、spanはインライン要素です。

お礼

なるほど。<em>や<strong>はレイアウト用ではなく、構造的な意味なんですね。
URLは参考にさせていただきます。
<div>や<span>は、あまり塚わな方がいいんですね。

ありがとうございました。

回答No.5

suiris

No.2の方の意見が最適かと・・・。
<em>→<strong>よりは強調度合いが弱いが通常の文字よりも重要であることを示す。
<strong>→<strong>は<em>よりも強調度合いが強いです。
上記のタグは「構造上」定義するタグですのでなんら問題が無いというよ りは、むしろ正しいです。

以下は推奨されていません。装飾用のタグなので。(これはCSSが存在しなかった頃に考えられたものです。今でも使えますが<strong>、<em>を使用しましょう。)
※<b>はboldの意味で文字を太くするためだけです。
※<i>はイタリック体にさせるためだけのものです。

また、<strong>、<em>はそのページ内に多く指定すると強調ばかりの内容となってしまうため、多用することは避けましょう。
そして、例では　”文章”　を<div>で囲われているようですが、<p>タグが望ましいです。
よって以下の通りにすることが最適だと思います。

HTML部分
<p class="a">私は、～～<strong class="b">「●●」</strong>～～である。</p>

ちなみに、<p class="a">で<strong class="b">とされていますが、もし必要が無いのであれば<strong>のclass="b"を省くべきでしょう。極力HTMLのソースは省力化すべきです。

CSSで指定する時
p.a{
～～～
}
p.a strong{→p.a内のstrong
～～～
}

以下のサイトのソースやWeb標準に関する記事を参考にされると良いかもしれないです。非常に技術的ですが。（＾＾；）
CYBER@GARDEN：http://www.cybergarden.net/
ミツエーリンクス：http://www.mitsue.co.jp/

又、HTMLが正しいかどうかのチェックは以下のサイトで行えます。
Another HTML-lint gateway：http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
↑100点が取れればスゴイです。
W3C 検証サービス：http://jigsaw.w3.org/css-validator/
↑HTMLだけでなく、CSSも検証できます。
上記2サイトの検証を完璧にサイトを構築するのは非常に時間がかかり・困難です。あまりこだわらないでくださいね。(時間に余裕があればがんばってください。)

※　#1、#3、#4さんの意見は貴方に対する気遣いですので間違いではないです。
<span>は使用を推奨されているタグですが、全く構造上「強調」を表すものではないです。このタグは、一つのタグではCSSで装飾できないときなどによく使用します。
<div>も同じくです。

■<span>と<div>の違い。
<span>は<p>、<div>などの文章・ブロック内
<div>は<span>や、「子」となるブロックを囲います。

例)
<div id="menu">
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
</ul>
</div>
<div id="contents">
<p>はろー。<strong>○○</strong>です。</p>
</div>

最後に・・・
言いたい事ばかり言っていたので、間違っても私なんかにポイント与えないでください。Web標準が世にもっと広がるといいですね。

お礼

なるほど。<em>や<strong>は正しい使い方なんですね。それと非推奨のタグはあまり使わない方がいいんですね。
CSSで「p.a strong」のような使い方ができるんですね。知りませんでした。勉強になります。
文章は<div>より<p>の方がいいんですね。

ありがとうございました。

回答No.4

leap_day

こんにちは

#1です
言葉が少なかったので語弊が生まれていたようですね（－－；）
<b><dfn><em><i><strong>などの文字装飾させるタグはすぐに思いついたのですがレイアウト的なタグは使わないで改行もしない・・・ということだったので<span>にしていました

.b { font-weight:bold; }
<span class="b">～</span>

という意味です。惑わせてしまってすみません（－－；）

お礼

補足をいただいてありがとうございました。

回答No.3

noname#56882

No.2さんのやり方が一番適切だと思います。
別の方法としては
<div class="a">私は、～～<span style="font-weight:bold">「●●」</span>～～である。</div>
というやり方もありますので、ご参考までに。

お礼

<span>ですか。

ありがとうございました。

回答No.1

leap_day

こんにちは

強調のCSS（font-weight:bold;）とかではなく？のタグのことですよね？

<span>とかのことですか？

お礼

<span>でできるんですね。

ありがとうございました。