[解決済み】CSS/HTML。テキストをイタリックにする正しい方法は何ですか?
質問
とは何ですか? 正しい テキストをイタリックにする方法は?以下の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つの問題があります。
-
すべてのテキストが、セマンティックマークアップを正当化するのに十分な意味を持つとは限らない。例えば、ページの一番下にある斜体のテキストは本当に脚注なのでしょうか?それとも余談なのか?あるいはまったく別のものなのか。もしかしたら、そのテキストには特別な意味はなく、前のテキストと体裁上区別するために斜体で表示する必要があるだけかもしれません。
-
十分な強度で存在しない場合、意味づけが変わることがある。例えば、私がページの一番下にテキストがあること以外に何も考えずに脚注に賛成したとしましょう。数ヵ月後、ページの一番下にさらにテキストを追加したくなったら、どうなるでしょうか。それはもはや脚注ではありません。どのようにしたら、以下のような汎用性の低いセマンティッククラスを選択できるでしょうか?
<em>
が、これらの問題を回避することができるのでしょうか?
概要
イタリックにしたいという要望が意味的な意味を持たない多くの場合、意味論の要件は過度に負担になるように思われる。
さらに、スタイルと構造を切り離したいという要望から、CSSは以下のような代替品として注目されています。
<i>
しかし、そのようなことをすると、かえって使い勝手が悪くなる場合があります。というわけで、このままでは、地味な
<i>
このような考え方が、HTML5 仕様にこのタグが残された理由なのでしょうか?
このテーマについても、何か良いブログ記事、記事はないでしょうか?おそらく、このブログの中で
<i>
タグを使用することができます。
どのように解決するのですか?
ユースケースによって方法を使い分ける必要があります。
-
あるフレーズを強調したい場合は
<em>
. -
は
<i>
タグには HTML5 における新しい意味 これは、別の音声や雰囲気のテキストのスパンを表すものです。ですから、このタグは、感想や余談、慣用句などに使うべきです。この仕様では、船の名前も提案しています(ただし、本や歌、映画の名前はもう提案していません。<cite>
を使用します。) -
斜体のテキストがより大きな文脈の一部である場合、例えば、序章の段落など、より大きな要素に CSS スタイルをアタッチする必要があります。
p.intro { font-style: italic; }
関連
-
[解決済み】私のCSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか?
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] CSSコンテンツによるHTMLエンティティの追加
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] 高さを固定したBootstrapパネルボディの作り方
-
[解決済み] HTML5 Validation Error: body start tag が見えたが、同じタイプの要素がすでに開かれていた
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] HTML CSS インビジブルボタン