私にはこんな上司がいました 愛され, 愛され, 愛され, 愛され 言葉を強調する。 これは、WYSIWYG エディターを使用するずっと前のことであり、そのくだらないコードをハンドコーディングする必要がありました。
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(彼が使っていた色についても触れないようにしましょう モア 強調。)
すべてのマークアップを書くことは決して素晴らしいことではありません。 確かに、それがかかった努力は何でも。 しかし、double またはそれ以上のオーバーロード コンテンツを追加することは良い考えでしょうか? —強調?
異なるタグが異なる強調を伝える
まず、 <strong>
および <em>
タグはさまざまな用途向けに設計されています。 HTML5 でそれらを取り戻しました。
そう、 <strong>
そのコンテンツが重要または緊急であることを示唆するという意味で、コンテンツに重みを与えます。 警告を考えてみましょう:
警告: 次のコンテンツは素晴らしいとしてフラグが付けられました。
手を伸ばしたくなるかもしれません <em>
同じことをする。 結局のところ、イタリック体のテキストは注目を集めることができます。 しかし、実際には、内容を読む際により強調するためのヒントとして意図されています。 たとえば、次の XNUMX つのバージョンの同じセンテンスは強調箇所が異なります。
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
どちらの例も強調を強調していますが、単語が異なります。 そして、それらを声に出して読むと、違うように聞こえます。 それは <em>
あなたの文章でトーンを表現する素晴らしい方法です。 という意味で文の意味が変わります。 <strong>
ではない。
視覚的強調と意味的強調
これらは、コンテンツを強調するときに考慮しなければならない XNUMX つのことです。 同様に、文の意味に影響を与えずにコンテンツをイタリック体にする必要がある場合がたくさんあります。 しかし、これらはイタリックをレンダリングする他のタグで処理できます。
<i>
: これは古典的なものです! HTML5 より前は、イタリック体で強調を強調するために使用されていました。 現在は、セマンティックな意味を変更することなく、コンテンツを視覚的にイタリック体にするために純粋に使用されています。<cite>
: 事実または数字の出典を示す。 ("ソース: CSSトリック」)<address>
: 住所だけでなく、メールアドレスや電話番号などの連絡先情報をマークアップするために使用されます。 (
)
それは彼と同じことになるだろう <strong>
. 重く見せたいテキストのスタイリングに使用するのではなく、クラシックを使用することをお勧めします。 <b>
太字のタグを使用して、必要のないコンテンツに余分な意味を与えないようにします。 また、ブラウザーのデフォルト スタイルにより、見出しなどの一部の要素は既に太字で表示されていることを覚えておいてください。 これ以上強調する必要はありません。
強調されたコンテンツでのイタリック体の使用 (およびその逆)
すでに強調されている行の一部を斜体にする必要がある正当なケースがあります。 または、すでにイタリック体になっているテキストを少し強調することもできます。
ブロッククオートが良い例かもしれません。 デフォルトのブラウザスタイルではイタリック体ではないにもかかわらず、スタイルのためにイタリック体になっているのを何度も見てきました。
blockquote { font-style: italic;
}
そのブロッククオートで映画のタイトルに言及する必要がある場合はどうすればよいでしょうか? それはイタリック体にする必要があります。 ストレスを強調する必要はないので、 <i>
タグで行います。 しかし、すでにイタリック体でレンダリングされているものをイタリック体にするのは奇妙です:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
このようにイタリック体のコンテンツ内で何かをイタリック体にする状況では、 イタリック体を取り除く ネストされた要素から… <i>
この場合。
blockquote i { font-style: normal;
}
コンテナー スタイルのクエリ これらのインスタンスを取得した場合、これらすべてのインスタンスを取得するのに非常に役立ちます。
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
この小さなスニペットは、blockquote を評価して、それが font-style
に設定されています italic
. もしそうなら、それは <em>
, <i>
, <cite>
, <address>
要素は通常のテキストとしてレンダリングされますが、セマンティックな意味がある場合は保持されます。
しかし、強調内の強調に戻ります
私は巣を作りません <strong>
内部 <em>
このような:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…またはネスト <em>
内部 <strong>
代わりに:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
レンダリングは問題ありません! そして、それらがどのような順序であるかは問題ではありません… 少なくとも最新のブラウザーでは。 ジェニファー・キルニンは次のように述べています。 一部のブラウザは、テキストに最も近いタグのみをレンダリングします、しかし、限られたテストではどこにもぶつかりませんでした。 しかし、注意すべきことがあります!
ある形式の強調を別の形式に入れ子にしない理由は、それが単に必要ないからです。 それを必要とする文法規則はありません。 感嘆符のように、XNUMX つの形式の強調で十分です。視覚的、重み、または発表された強調のいずれであっても、求めているものと一致するものを使用する必要があります。
また、一部のスクリーン リーダーは強調されたコンテンツを読み上げることができますが、重要性や強調を加えてマークアップを読み上げることはありません。 したがって、私が知る限り、追加のアクセシビリティ特典もありません.
しかし、私は本当にすべての強調が欲しいです!
あなたの上司が私のように望んでいる立場にいるなら 全て 強調、強調のタイプに適した HTML タグに到達し、CSS のセマンティクスに影響を与えないタグを組み合わせて残りのスタイルを適用し、ブラウザーのスタイルが処理できないものを説明します。
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
私もでそれを行うかもしれません <strong>
タグも防御手段として:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
防御をしている限り、強調が強調内にネストされているエラーを赤または何かで強調表示することで特定できます。
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
次に、最後のセクションのスニペットを使用して、要素が別の斜体要素にネストされているときに要素からデフォルトの斜体スタイルを削除することをお勧めします。
他に何か?
メイちゃん:
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- 接近性
- NEW
- 住所
- アドレス
- 影響を及ぼす
- 影響
- 後
- すべて
- 一人で
- 既に
- アメリカ
- および
- 発表の
- 発表
- 別の
- どこにでも
- 申し込む
- アバター
- バック
- 背景
- なぜなら
- さ
- より良いです
- ビット
- 大胆な
- 国境
- ボス
- ボックス
- 興行収入
- ブラウザ
- ブラウザ
- 予算
- コール
- できる
- 場合
- 例
- 変更
- 変化
- クラシック
- カラー
- 接触
- 含まれています
- コンテンツ
- CSS
- デフォルト
- 防衛
- 守備
- 設計
- 異なります
- そうではありません
- ドント
- 努力
- どちら
- 要素は
- 強調
- 強調する
- 強調
- 巨大な
- 十分な
- 全体
- エラー
- さらに
- 例
- 例
- 表現します
- 余分な
- 戦い
- フィギュア
- 名
- フラグが立てられた
- フォロー中
- フォーム
- から
- 取得する
- 与える
- 与え
- グローバルに
- Go
- 行く
- 良い
- 素晴らしい
- ハンドル
- 助けます
- こちら
- 特徴
- 強調表示
- HTML
- HTTPS
- アイデア
- 識別する
- 重要性
- 重要
- in
- 情報
- 洞察力
- を取得する必要がある者
- IT
- ジェニファー
- 姓
- 限定的
- LINE
- 少し
- 場所
- 長い
- 見て
- 製
- make
- 作る
- マーク
- 問題
- 意味
- だけど
- 言及
- かもしれない
- 百万
- モダン
- 弾み
- 他には?
- 映画
- 動画
- NAB
- 必要
- Nest
- 通常の
- ノース
- 北米
- 番号
- オファー
- Office
- ONE
- 開設
- 注文
- その他
- 部
- パフォーマンス
- 役得
- 電話
- 物理的な
- 場所
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- 再生
- プレンティ
- ポイント
- 位置
- 多分
- 保護された
- 純粋に
- リーチ
- 読む
- 読者
- 理由
- レッド
- 覚えています
- レンダリング
- REST
- 保持
- ルール
- 同じ
- 画面
- スクリーンリーダー
- セクション
- 意味論
- センス
- 文
- セッションに
- すべき
- 単に
- 状況
- So
- 一部
- 何か
- 音
- ソース
- まだ
- ストレス
- 強い
- 提案する
- スーパー
- 想定
- TAG
- テスト
- ソース
- もの
- 物事
- <font style="vertical-align: inherit;">回数</font>
- 役職
- 〜へ
- TONE
- あまりに
- true
- 緊急
- つかいます
- 警告
- よく見る
- 週末
- 体重を計る
- 重量
- この試験は
- かどうか
- while
- 誰
- 意志
- 以内
- 無し
- 言葉
- でしょう
- 書き込み
- You
- あなたの
- ゼファーネット