web-dev-qa-db-ja.com

CSS / HTML：テキストを斜体にする正しい方法は何ですか？

テキストをイタリック体にする正しい方法とは何ですか？私は次の4つのアプローチを見ました：

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>


<i>

これが「古い方法」です。 <i>は意味的な意味を持たず、テキストをイタリック体にしたことによる表示上の効果のみを伝えます。私の知る限りでは、これは意味論的ではないので明らかに間違っています。


<em>

これは純粋にプレゼンテーション目的のためにセマンティックマークアップを使います。 <em>はデフォルトでテキストをイタリック体にしているので、<i>は避けるべきだということを知っていても意味的な意味が分からない人によく使われます。強調されているため、すべての斜体テキストが斜体になっているわけではありません。時々、それはサイドノートやささやきのように正反対になることがあります。


<span class="italic">

これはCSSクラスを使用してプレゼンテーションを配置します。これは正しいやり方であるとよく言われますが、これも私にとっては間違っているようです。これは<i>という意味上の意味をこれ以上伝えていないようです。しかし、その支持者たちは叫びます、もしあなたがそれを大胆にしたいのなら、後ですべてのイタリック体のテキストを変更することははるかに簡単です。それでも、そうではありません。テキストを太字にした「イタリック」というクラスが残されるためです。さらに、なぜ私が私のウェブサイト上のすべてのイタリック体のテキストを変更したいのか、または少なくともこれが望ましくないか必要ではない場合を考えることができるのかはっきりしていません。


<span class="footnote">

これはセマンティクスにCSSクラスを使用します。これまでのところこれが最善の方法のようですが、実際には2つの問題があります。

  1. すべてのテキストがセマンティックマークアップを保証するのに十分な意味を持つわけではありません。たとえば、ページ下部のイタリック体のテキストは本当に脚注ですか。それとも脇ですか？それとも他の何か。おそらくそれは特別な意味を持たず、それをそれに先行するテキストから表現的に分離するためにイタリック体で表現されるだけでよいです。

  2. 意味の意味は、それが十分な強さで存在していないときには変わることがあります。テキストがページの下部にあることに他ならないことに基づいて、「脚注」を付け加えたとしましょう。数ヶ月後に一番下にテキストを追加したい場合はどうなりますか？それはもはや脚注ではありません。 <em>よりも一般的ではないがこれらの問題を回避するセマンティッククラスをどのように選択することができますか？


概要

何かをイタリックにしたいという願望が意味的な意味を持たせることを意図していない多くの場合において、意味論の要件は過度に煩わしいように思われる。

さらに、スタイルを構造から切り離したいという願望から、CSSは実際にはあまり役に立たない場合があるときには<i>に代わるものとして宣伝されるようになりました。それで、これは私に謙虚な<i>タグを残して、そしてこの一連の思考がそれがHTML5仕様に残される理由であるかどうか疑問に思いますか？

この問題に関する良いブログの投稿や記事もありますか？おそらく<i>タグを保持/作成するという決定に関わっている人たちによるのでしょうか。

htmlcsssemantic-markup
186
Rupert Madden-Abbott

ユースケースごとに異なる方法を使用する必要があります。

  1. フレーズを強調したい場合は<em>を使用してください。
  2. <i>タグには HTML5での新しい意味 が付いていて、これは "代替の声やムードの中のテキストの範囲"を表しています。ですから、このタグは、考えや脇、慣用句などに使用してください。この仕様では船の名前も推奨されています（ただし、本/歌/映画の名前は推奨されなくなりました。代わりに<cite>を使用してください）。
  3. イタリック体のテキストがより大きな文脈の一部である場合、例えば導入段落の場合は、CSSスタイルをより大きな要素、すなわちp.intro { font-style: italic; }に添付する必要があります。
195
DisgruntledGoat

<i>は意味論的ではないので間違っていません。それは見せかけだから（通常）間違っている。懸案事項の分離は、表示情報をCSSで伝達する必要があることを意味します。

一般的に名前を付けるのは簡単ではありません。クラス名も例外ではありませんが、それでもやるべきことです。イタリック体を使用してブロックを本文から目立たせる場合は、おそらく "flow-distinct"というクラス名が適切でしょう。再利用について考えてください。クラス名は分類用です - 他にも同じことをしたいと思いますか？それはあなたが適切な名前を識別するのを助けるべきです。

<i>はHTML5に含まれていますが、特定の意味が与えられています。何かをイタリック体としてマーク付けしている理由が仕様で識別されている意味の1つを満たす場合、<i>を使用するのが適切でしょう。それ以外の場合はそうではありません。

21
Alohci

私は専門家ではありませんが、もしあなたが本当に意味論になりたいのであれば、語彙を使うべきです（RDFa）。

これにより、次のようになります。

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

プレゼンテーションにはemが使用され（人間はイタリック体で表示されます）、propertyおよびhref属性はイタリック体（マシンの場合）の定義にリンクしています。

そのようなことの語彙があるかどうかをチェックする必要があります、おそらくプロパティはすでに存在しています。

ここRDFaについての詳細情報： http://www.alistapart.com/articles/introduction-to-rdfa/

9
Guillaume Flandre

tl; dr

テキストをイタリック体にする正しい方法は、CSSに到達するまで問題を無視してから、プレゼンテーションセマンティクスに従ってスタイルを設定することです。あなたが提供した最初の2つのオプションは状況に応じて正しいかもしれません。最後の2つは間違っています。

より長い説明

マークアップを書くときにプレゼンテーションを心配しないでください。斜体では考えないでください。意味論の観点から考えてください。それが強調を必要とするならば、それはemです。メインコンテンツに対して接線方向であれば、それはasideです。たぶんそれは大胆になるだろう、多分それは斜体になるだろう、多分それは蛍光緑色になるだろう。マークアップを書いているときは関係ありません。

あなたがCSSにたどり着くとき、あなたはあなたのサイトのすべてのその出現のために斜体を置くことが意味をなす意味論的要素をすでに持っているかもしれません。 emは良い例です。しかし多分あなたは斜体であなたのサイト上のすべてのaside > ul > liを望んでいます。マークアップについて考えることとプレゼンテーションについて考えることを分ける必要があります。

DisgruntledGoatiで述べたように、HTML 5ではセマンティックです。意味論は私にはちょっと狭いように見えます。使用はおそらくまれです。

強調を強調するために、HTML5ではemの意味が変更されました。 strongは、重要性を示すためにも使用できます。 strongは、そのようにしたい場合は、太字ではなくイタリック体にすることができます。ブラウザのスタイルシートに制限を加えないでください。デフォルトの範囲内で考えるのをやめるために スタイルシートのリセット を使うこともできます。 （ただし、 注意点がいくつかあります 。）

class="italic"は悪いです。使用しないでください。それは意味論ではなく、まったく柔軟ではありません。プレゼンテーションにはまだ意味論があり、マークアップとは異なる種類です。

class="footnote"はマークアップのセマンティクスをエミュレートしていますが、これも正しくありません。脚注用のCSSは、脚注に完全に固有のものではありません。各部分のスタイルが違っていると、サイトが乱雑に見えます。あなたはあなたがCSSクラスに変えることができるあなたのページを通して点在するいくつかの視覚的なパターンを持つべきです。あなたの脚注とブロッククォートのスタイルが非常に似ている場合は、何度も何度も繰り返すのではなく、似ている部分を1つのクラスにまとめてください。あなたはOOCSSの実践を採用することを検討するかもしれません（下記リンク）。

HTML 5では、関心事とセマンティクスの分離が重要です。マークアップがセマンティクスが重要である唯一の場所ではないことを、人々はしばしば認識しません。コンテンツセマンティクス（HTML）がありますが、提示セマンティクス（CSS）および行動セマンティクス（Javascript）もあります。それらはすべて保守性とDRYを維持するために注意を払うことが重要であるそれら自身の別々の意味論を持っています。

OOCSSのリソース

7
Eva

おそらくそれは特別な意味を持たず、それをそれに先行するテキストから表現的に分離するためにイタリック体で表現されるだけでよいです。

それが特別な意味を持たないならば、なぜそれはそれに先行するテキストから提示的に分離される必要があるのでしょうか？ この一連のテキストは少し奇妙に見えます、なぜなら斜体にしたからです。

私はあなたの主張をします。意味のある変化なしに、視覚的に変化するデザインをデザイナーが制作することは珍しいことではありません。私はこれを箱でよく見ました。デザイナーは色、角、グラデーション、ドロップシャドウをさまざまに組み合わせた箱を含むデザインを提供しますが、スタイルや内容の意味には関係ありません。

これらはかなり複雑なスタイル（関連するInternet Explorerの問題を含む）がさまざまな場所で再利用されるため、box-1、box-2のようなクラスを作成して、スタイルを再利用できるようにします。

テキストをイタリック体にする具体的な例は、あまりにも些細すぎて心配することはできません。 Semantic Nuttersが議論するには、そのような細部を残してください。

5
Paul D. Waite

HTMLの斜体テキストは、テキストを斜体で表示します。

<i>HTML italic text example</i>

強調と強力な要素の両方を使用して、特定の単語または文の重要性を高めることができます。

<p>This is <em>emphasized </em> text format <em>example</em></p>

テキスト内の特定の箇所を強調したい場合は強調タグを使用してください。必ずしもそのテキストを斜体にする場合は必須ではありません。

詳しくはこのガイドを参照してください。 http://www.snoopcode.com/html/html-text-formating

1
Prabhakar

スクリーンリーダー、グーグルボットなどにとってi要素は意味論的ではありません。それはある種の透明であるべきです（ちょうどspanまたはdiv要素のように）。しかし、プレゼンテーション層と構造層を結合するので、開発者にとっては良い選択ではありません - そしてそれは悪い習慣です。

em要素（strongも同様）は、プレゼンテーションの意味ではなく、常に意味的な文脈で使用されるべきです。単語や文が重要な場合は必ず使用する必要があります。前の文の例として、 '常に使用する必要がある'部分を強調するためにemを使用する必要があります。ブラウザはこれらの要素に対していくつかのデフォルトCSSプロパティを提供しますが、あなたの設計がこれらの要素の正しい意味的な意味を保つためにこれを必要とするならデフォルト値を上書きすることができます。

<span class="italic">Italic Text</span>は最も間違った方法です。まず第一にそれは使用に不便です。次に、テキストはイタリック体にする必要があることを示しています。そして構造層（HTML、XMLなど）はそれをするべきではありません。プレゼンテーションは常に構造から分離しておくべきです。

脚注には<span class="footnote">Italic Text</span>が最善の方法です。プレゼンテーションでマークアップについて説明しているだけではありません。この機能で何が起こるのか予測できません。脚注が機能の中で成長するならば、あなたはそのクラス名を変更することを強いられるかもしれません（あなたのコードの中でいくつかの論理を保つために）。

重要なテキストを強調するためにemまたはstrongを使用してください。ただし、これらの要素はインライン要素であり、大きなテキストブロックを強調するために使用しないでください。

あなたが何かがどのように見えるかについてだけ気にし、そしてどんな余分なマークアップも避けようと常に試みるならば、CSSを使いなさい。

1
Crozin

答えはintend強調のときは<em>を使うことだと思います。

自分で文章を読むとき、わずかにに強調と違う声を使うのがわかります。スクリーンリーダーに同じことをさせたいので<em>を使うべきです。

<h2>の見出しがすべてイタリック体のGaramondで見栄えが良くなるとデザイナーが判断した場合など、それが純粋にスタイルの問題である場合は、HTMLに含める意味的な理由はなく、適切な要素にCSSを変更する必要があります。

あなたが特にCSSなしでいくつかのレガシブラウザをサポートする必要があるのでなければ、私は<i>を使う理由を何も見ることができません。

1
GrahamS

わかりました、最初に注意することはそれです <i>は非推奨になりました。使用しないでください。 <i>は廃止予定ではありませんが、それを使用することはお勧めできません。詳細についてはコメントを参照してください。これは、プレゼンテーション層でプレゼンテーションを維持することに全く反するためです。同様に、<span class="italic">も型を壊すようです。

そのため、<em>と<span class="footnote">の2つの実際の処理方法があります。 emは強調を表します。単語、句、文を強調したい場合は、イタリックが必要かどうかにかかわらず、<em>タグを使用してください。他の方法でスタイルを変更したい場合は、CSS：em { font-weight: bold; font-style: normal; }を使用してください。もちろん、クラスを<em>タグに適用することもできます。特定の強調されたフレーズを赤で表示したい場合は、それらにクラスを付けてCSSに追加します。

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

他の理由で斜体を適用している場合は、他の方法を使用して、セクションにクラスを指定してください。このようにして、HTMLを調整せずにいつでも好きなときにスタイルを変更できます。あなたの例では、脚注は重要ではないが興味深く有用な情報を示すことなので、脚注は強調してはいけません。実際、脚注は強調しないでください。この場合は、脚注にクラスを適用し、それをプレゼンテーション層（CSS）のクラスのように見せるほうがはるかに得策です。

0
Samir Talwar

インライン要素を強調するために<em>を使うといいでしょう。テキストブロックなどのブロック要素にクラスを使用します。 CSSかどうか、テキストはまだタグ付けする必要があります。それが意味論のためであろうとビジュアルエイドのためであろうと、私はあなたがそれを意味のある何かのために使っていると思います...

何らかの理由でテキストを強調している場合は、<em>、またはテキストを斜体にするクラスを使用できます。

それは大丈夫ルールを破る時々！

0
tahdhaze09