em 要素

  • リビジョンの URL スラッグ: HTML/Element/em
  • リビジョンのタイトル: <em>
  • リビジョンの ID: 351839
  • 作成日:
  • 作成者: sii
  • 現行リビジョン いいえ
  • コメント Translated from English into Japanese

このリビジョンの内容

概要

HTML の強調要素(<em>)は、強調されたテキストを示します。 <em> 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。

使用上の注意: 通常、この要素は斜体で表示されます。しかしながら、単に斜体のスタイルを適用するために用いるべきではなく、そのような目的のためには、 {{ HTMLElement("i") }} 要素あるいは CSS のスタイリングを使用して下さい。作品(書籍、演劇、歌など)の題名を示すためには、 {{ HTMLElement("cite") }} 要素を使用して下さい。これも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、 {{ HTMLElement("strong") }} 要素を使用して下さい。

使用可能な場所

属性

この要素はグローバル属性のみを持っています。

<em> 要素はしばしば、暗示的あるいは明示的な対比を表すために使われます。

<p>
  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>

結果

In HTML 5, what was previously called block-level content is now called flow content.

斜体と強調

Web サイトの描画について、同じものを表現するにも実に多くの方法があるため、新しい開発者をしばしば混乱させています。斜体と強調はおそらく、最もよく目にする事柄のひとつでしょう。なぜ <em></em><i></i> を使い分けるのでしょうか。どちらも、間違いなく同じ結果をもたらしますよね?

いいえ、それは違います。強調は論理的な状態、斜体は物理的な状態です。論理的な状態は、コンテンツから視覚表現を切り離し、そうすることで、いくつかのテキストを斜体で表示する代わりに、赤字で、あるいは異なるサイズで、あるいは下線を引いて、あるいは太字にして表示するなど、多くの異なる方法で表現することができるようになります。 <em> にとっては視覚的な特性を変更するほうが、斜体にするよりも理にかなっているかもしれません。斜体は物理的な状態であるからです。視覚表現とコンテンツの分離は無く、斜体に、テキストを斜体にする以外のことをさせることは、混乱させるもので、非論理的です。

仕様

仕様 状態 コメント
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-em-element.html#the-em-element', '<em>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}} {{Spec2('HTML4.01')}}  

ブラウザの互換性

{{CompatibilityTable}}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

参照

  • {{HTMLElement("i")}}
{{HTML:Element_Navigation}}

このリビジョンのソースコード

<h2 id="Summary">概要</h2>
<p>HTML の強調要素(<code>&lt;em&gt;</code>)は、強調されたテキストを示します。 <code>&lt;em&gt;</code> 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。</p>
<div class="note">
  <strong>使用上の注意:</strong> 通常、この要素は斜体で表示されます。しかしながら、単に斜体のスタイルを適用するために用いるべきではなく、そのような目的のためには、 {{ HTMLElement("i") }} 要素あるいは CSS のスタイリングを使用して下さい。作品(書籍、演劇、歌など)の題名を示すためには、 {{ HTMLElement("cite") }} 要素を使用して下さい。これも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、 {{ HTMLElement("strong") }} 要素を使用して下さい。</div>
<h2 id="Usage_context">使用可能な場所</h2>
<ul class="htmlelt">
  <li><dfn><a href="/ja/docs/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリ</a></dfn> {{todo}}<a href="/ja/docs/HTML/Content_categories#Flowing_content" title="HTML/Content_categories#Phrasing_content">フローコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a>、明白なコンテンツ(palpable content)</li>
  <li><dfn>許可された内容</dfn> <a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a>。</li>
  <li><dfn>タグの省略</dfn> {{no_tag_omission}}</li>
  <li><dfn>許可された親要素</dfn> <a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a>を許容するすべての要素。</li>
  <li><dfn>DOM インターフェース</dfn> {{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以下を含め、Firefox はこの要素に <a href="/ja/docs/DOM/span" title="DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> インターフェースを実装しています。</li>
</ul>
<h2 id="Attributes">属性</h2>
<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="/ja/docs/HTML/Global_attributes">グローバル属性</a>のみを持っています。</p>
<h2 id="Example">例</h2>
<p>&lt;em&gt; 要素はしばしば、暗示的あるいは明示的な対比を表すために使われます。</p>
<pre class="brush: html">
&lt;p&gt;
  In HTML 5, what was previously called &lt;em&gt;block-level&lt;/em&gt; content is now called &lt;em&gt;flow&lt;/em&gt; content.
&lt;/p&gt;</pre>
<h3 id="Result" name="Result">結果</h3>
<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>
<h2 id="Italics_vs._emphasis">斜体と強調</h2>
<p>Web サイトの描画について、同じものを表現するにも実に多くの方法があるため、新しい開発者をしばしば混乱させています。斜体と強調はおそらく、最もよく目にする事柄のひとつでしょう。なぜ <code>&lt;em&gt;&lt;/em&gt;</code> と <code>&lt;i&gt;&lt;/i&gt;</code> を使い分けるのでしょうか。どちらも、間違いなく同じ結果をもたらしますよね?</p>
<p>いいえ、それは違います。強調は論理的な状態、斜体は物理的な状態です。論理的な状態は、コンテンツから視覚表現を切り離し、そうすることで、いくつかのテキストを斜体で表示する代わりに、赤字で、あるいは異なるサイズで、あるいは下線を引いて、あるいは太字にして表示するなど、多くの異なる方法で表現することができるようになります。 <code>&lt;em&gt;</code> にとっては視覚的な特性を変更するほうが、斜体にするよりも理にかなっているかもしれません。斜体は物理的な状態であるからです。視覚表現とコンテンツの分離は無く、斜体に、テキストを斜体にする以外のことをさせることは、混乱させるもので、非論理的です。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">仕様</th>
      <th scope="col">状態</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'the-em-element.html#the-em-element', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">参照</h2>
<ul>
  <li>{{HTMLElement("i")}}</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision