1. ホーム
  2. ハイパーリンク

[解決済み】CSS/HTML。テキストをイタリックにする正しい方法は何ですか?

2022-04-17 08:44:51

質問

とは何ですか? 正しい テキストをイタリックにする方法は?以下の4つの方法を見たことがあります。

<i>Italic Text</i>

<em>Italic Text</em>

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

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


<i>

これが"old way"です。 <i> は意味的な意味はなく、テキストをイタリックにするという体裁上の効果しか伝えません。私が見る限り、これは意味的でないので明らかに間違っています。


<em>

これは、純粋にプレゼンテーションのためにセマンティックマークアップを使用しています。たまたま <em> はデフォルトでテキストを斜体で表示するため、このメソッドを使う人は <i> を避けるべきですが、その意味するところを知らないのです。斜体のテキストがすべて強調されているために斜体になっているわけではありません。時には、その正反対で、傍点や囁きのような場合もあるのです。


<span class="italic">

これは、CSSのクラスを使ってプレゼンテーションを配置するものです。これはしばしば正しい方法として宣伝されていますが、やはり私には間違っているように思えます。これは、以下のような意味合いを持つようには見えません。 <i> . しかし、支持者は、例えば太字にしたい場合、イタリック体のテキストを後ですべて変更することがはるかに簡単であると叫びます。しかし、そうではありません。なぜなら、テキストを太字にする "italic" というクラスが残されてしまうからです。さらに、自分のウェブサイトですべてのイタリック体テキストを変更したい理由は明らかではありませんし、少なくとも、変更することが望ましくない、あるいは必要でないケースを考えることはできます。


<span class="footnote">

これはセマンティックのためにCSSクラスを使用しています。今のところ、これは最良の方法のように見えますが、実際には2つの問題があります。

  1. すべてのテキストが、セマンティックマークアップを正当化するのに十分な意味を持つとは限らない。例えば、ページの一番下にある斜体のテキストは本当に脚注なのでしょうか?それとも余談なのか?あるいはまったく別のものなのか。もしかしたら、そのテキストには特別な意味はなく、前のテキストと体裁上区別するために斜体で表示する必要があるだけかもしれません。

  2. 十分な強度で存在しない場合、意味づけが変わることがある。例えば、私がページの一番下にテキストがあること以外に何も考えずに脚注に賛成したとしましょう。数ヵ月後、ページの一番下にさらにテキストを追加したくなったら、どうなるでしょうか。それはもはや脚注ではありません。どのようにしたら、以下のような汎用性の低いセマンティッククラスを選択できるでしょうか? <em> が、これらの問題を回避することができるのでしょうか?


概要

イタリックにしたいという要望が意味的な意味を持たない多くの場合、意味論の要件は過度に負担になるように思われる。

さらに、スタイルと構造を切り離したいという要望から、CSSは以下のような代替品として注目されています。 <i> しかし、そのようなことをすると、かえって使い勝手が悪くなる場合があります。というわけで、このままでは、地味な <i> このような考え方が、HTML5 仕様にこのタグが残された理由なのでしょうか?

このテーマについても、何か良いブログ記事、記事はないでしょうか?おそらく、このブログの中で <i> タグを使用することができます。

どのように解決するのですか?

ユースケースによって方法を使い分ける必要があります。

  1. あるフレーズを強調したい場合は <em> .
  2. <i> タグには HTML5 における新しい意味 これは、別の音声や雰囲気のテキストのスパンを表すものです。ですから、このタグは、感想や余談、慣用句などに使うべきです。この仕様では、船の名前も提案しています(ただし、本や歌、映画の名前はもう提案していません。 <cite> を使用します。)
  3. 斜体のテキストがより大きな文脈の一部である場合、例えば、序章の段落など、より大きな要素に CSS スタイルをアタッチする必要があります。 p.intro { font-style: italic; }