インライン要素とテキスト装飾(a, span, strong, em, code, time)

スポンサーリンク
HTML

【入門編】qタグによる短い引用 – HTML実践ガイド

こんにちは!フロントエンドの世界へようこそ。HTMLを学び始めたばかりの時期って、タグの種類が多すぎて「結局どれを使えばいいの?」と迷子になってしまうこと、ありますよね。今日は、そんな数あるタグの中でも、少し「お節介で頼もしい相棒」のような...
HTML

【テクニカル・上級編】citeタグによる作品のタイトル参照 – HTML実践ガイド

なぜ今さら `` を語るのか?:セマンティクスの深淵とDOMの最適化戦略フロントエンドの現場において、`` タグはしばしば軽視されがちだ。`` で代用し、CSSでスタイルを当てれば見た目は同じ。しかし、我々のようなシステムアーキテクトにとっ...
HTML

【実務・中級編】citeタグによる作品のタイトル参照 – HTML実践ガイド

なぜ今、あえて `` タグを語るのか?―セマンティクスで差がつくマークアップの極意現場でコードレビューをしていると、意外と見落とされがちなのが「作品タイトルの扱い」です。「書籍名や映画のタイトルなんて、`` か `` で囲んでCSSで斜体に...
HTML

【入門編】citeタグによる作品のタイトル参照 – HTML実践ガイド

Web制作の世界へようこそ!HTMLを書き始めたばかりの頃って、タグの種類がたくさんあって「どれを使えばいいの?」と迷子になってしまうこと、ありますよね。大丈夫、みんな最初はそうやって一つずつ覚えていくものです。今回は、数あるタグの中でも、...
HTML

【テクニカル・上級編】markタグによるハイライト – HTML実践ガイド

「ただの強調」と侮るなかれ:``要素のセマンティクスとパフォーマンス最適化の深淵フロントエンドの現場において、``タグを単なる「背景色を変えるための便利な装飾」と捉えているなら、それは非常にもったいない。検索結果のハイライトや、文脈上特に注...
HTML

【実務・中級編】markタグによるハイライト – HTML実践ガイド

markタグは「ただのマーカー」ではない:フロントエンドが知るべきセマンティクスの本質フロントエンドの現場で「テキストの一部をハイライトしたい」という要求が来たとき、あなたならどうしますか? 多くのエンジニアが反射的に `` にクラスを付け...
HTML

【入門編】markタグによるハイライト – HTML実践ガイド

まるで「蛍光ペン」!HTMLの``タグで、読者の視線をスマートに惹きつけようWeb制作を始めたばかりの皆さん、こんにちは!HTMLを書き始めると、``タグでリンクを作ったり、``タグで文字を太くしたりと、いろいろなタグを覚えるのが楽しくなっ...
HTML

【テクニカル・上級編】subタグとsupタグ(下付き・上付き文字) – HTML実践ガイド

物理・数学表現の深淵:``と``タグのレンダリング挙動とアーキテクチャ設計フロントエンドの現場において、``(下付き)と``(上付き)タグは、ともすれば「ただのテキスト装飾」として軽視されがちだ。化学式の $H_2O$ や、数学の $E=m...
HTML

【実務・中級編】subタグとsupタグ(下付き・上付き文字) – HTML実践ガイド

意外と軽視されがち?``と``で表現する「意味のある」タイポグラフィフロントエンドの現場で、「とりあえずフォントサイズを小さくして `vertical-align` で調整すればいいよね」と、``とCSSで無理やり添え字を表現しているコード...
HTML

【入門編】subタグとsupタグ(下付き・上付き文字) – HTML実践ガイド

こんにちは!Web制作の世界へようこそ。HTMLを学び始めると、「文字を大きくしたり太くしたりするのは分かったけれど、ちょっと特殊な位置に文字を置きたいときはどうするの?」という壁にぶつかることがありますよね。例えば、科学の授業で習った「水...
スポンサーリンク