テキストコンテンツの基本(p, h1-h6, hr, pre)

スポンサーリンク
HTML

【実務・中級編】WAI-ARIAによる見出しのセマンティクス補完 – HTML実践ガイド

見出しの「嘘」を許すな:WAI-ARIA `role="heading"` と `aria-level` の正しい付き合い方現場でコードをレビューしていると、時折こんな光景に出くわします。「デザインは最高なんだけど、DOM構造がめちゃくちゃ...
HTML

【入門編】WAI-ARIAによる見出しのセマンティクス補完 – HTML実践ガイド

見出しの「役割」を教える魔法? WAI-ARIAでアクセシビリティを底上げしようこんにちは!フロントエンドの世界へようこそ。HTMLを書き始めると、必ず出会うのが``から``までの「見出しタグ」ですよね。「見出しって、ただ文字を大きく太くす...
HTML

【テクニカル・上級編】::beforeと::afterによるテキストコンテンツの挿入 – HTML実践ガイド

擬似要素の「甘美な罠」:`content` プロパティとアクセシビリティの深淵Web開発の現場において、`::before` や `::after` によるコンテンツ挿入は、もはや呼吸をするかのように自然なテクニックだ。CSSだけでアイコン...
HTML

【実務・中級編】::beforeと::afterによるテキストコンテンツの挿入 – HTML実践ガイド

CSSの擬似要素で「テキストを挿入する」という誘惑:その代償と正しい付き合い方フロントエンドの現場にいると、CSSの `::before` や `::after` でテキストを流し込みたくなる瞬間は山ほどありますよね。「アイコンの横にちょっ...
HTML

【入門編】::beforeと::afterによるテキストコンテンツの挿入 – HTML実践ガイド

「あとから文字を付け足す魔法」:::beforeと::afterの正しい使い道と注意点Web制作を始めたばかりの頃、「見出しの横にちょっとしたアイコンを置きたい」「装飾のために文字を足したい」と思ったことはありませんか?そんなとき、HTML...
HTML

【テクニカル・上級編】::first-letter擬似要素によるドロップキャップ表現 – HTML実践ガイド

ドロップキャップの深淵:`::first-letter`の挙動を解剖し、レンダリングの罠を回避するWebデザインにおいて、段落の先頭文字を大きく強調する「ドロップキャップ(Drop Cap)」は、タイポグラフィの美学を体現する古典的かつ強力...
HTML

【実務・中級編】::first-letter擬似要素によるドロップキャップ表現 – HTML実践ガイド

CSSの「美学」を宿す:`::first-letter`でドロップキャップを極めるフロントエンドの現場で、「デザインカンプにあるあの装飾、どう実装するのが一番スマートか?」と迷うことはありませんか?特に、雑誌のような美しいタイポグラフィをW...
HTML

【入門編】::first-letter擬似要素によるドロップキャップ表現 – HTML実践ガイド

こんにちは!フロントエンドの現場で日々コードと格闘しているエンジニアです。皆さんは、海外の古い物語やおしゃれな雑誌の冒頭で、最初の1文字だけがグーンと大きく強調されているデザインを見たことはありませんか?「ドロップキャップ」と呼ばれるこの表...
HTML

【テクニカル・上級編】::first-line擬似要素によるテキスト装飾 – HTML実践ガイド

CSSの「影の支配者」:::first-lineが抱えるレンダリングの深淵と最適化の極意モダンなフロントエンド開発において、私たちはCSSの擬似要素を「単なる装飾ツール」として軽視しがちです。しかし、`::first-line`は単なる装飾...
HTML

【実務・中級編】::first-line擬似要素によるテキスト装飾 – HTML実践ガイド

CSSの隠れた名手「::first-line」を使いこなす:現場で役立つタイポグラフィの演出術フロントエンドの世界には、知っているようで意外と「境界線」が曖昧なCSS仕様がいくつか存在します。その代表格が、今回取り上げる `::first-...
スポンサーリンク