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

スポンサーリンク
HTML

【入門編】word-breakとoverflow-wrapによる単語の折り返し – HTML実践ガイド

こんにちは!フロントエンドの現場で日々コードと格闘しているエンジニアです。Web制作を始めたばかりの頃、誰もが一度は「あれ、なんでこの長い英単語やURL、枠からはみ出しちゃうの?」という壁にぶつかりますよね。まるで、パンパンに詰め込んだカバ...
HTML

【テクニカル・上級編】text-overflowとインライン要素の省略記号 – HTML実践ガイド

インラインの限界を超える:`text-overflow`と省略記号の深淵なる実装Webフロントエンドの世界において、「テキストの省略」ほど見かけによらずエンジニアを苦しめる要件はない。特に、コンポーネント指向の現代において、インライン要素内...
HTML

【実務・中級編】text-overflowとインライン要素の省略記号 – HTML実践ガイド

インライン要素で「...」を表示させる、あの泥臭い戦いについてフロントエンドの現場で「このテキスト、枠からはみ出したら『...』で省略しておいて」というUI要件は、もはや挨拶代わりと言っていいほど頻出します。ブロックレベル要素であれば `w...
HTML

【入門編】text-overflowとインライン要素の省略記号 – HTML実践ガイド

こんにちは!Web制作の世界へようこそ。画面の中で文字が思い通りに並んでくれると、なんだか魔法を使っているような気分になりますよね。でも、制作を進めていると必ず一度はぶつかる壁があります。それが「文字が枠からはみ出してしまう問題」です。例え...
HTML

【テクニカル・上級編】displayプロパティによるインライン・ブロック変換 – HTML実践ガイド

インライン要素の深淵:Layout Engineと戦うための「display」再考モダンなフロントエンド開発において、私たちは普段、安易に `flex` や `grid` を多用しがちだ。しかし、HTMLの根幹である「インライン要素」の挙動...
HTML

【実務・中級編】displayプロパティによるインライン・ブロック変換 – HTML実践ガイド

インライン要素の「不都合な真実」と、displayプロパティによる制御の極意現場でコードを書いていると、「なぜかmarginが効かない」「改行コードのせいで隙間ができる」といった、CSSの基礎中の基礎ゆえにハマる罠に遭遇することがありますよ...
HTML

【入門編】displayプロパティによるインライン・ブロック変換 – HTML実践ガイド

なぜか「幅」が効かない?CSSのdisplayプロパティでつまずくあなたへWeb制作を始めたばかりの頃、誰もが一度はこんな経験をします。「``タグに幅(width)を指定したのに、なぜか反映されない!」「隣の要素とくっついてしまって、余白が...
HTML

【テクニカル・上級編】Jestによるインライン要素のDOM構造テスト – HTML実践ガイド

インライン要素のDOMテストを極める:jsdomの限界を超えた堅牢な設計論フロントエンドの現場において、「HTMLの構造テストなんて、`getByText`で拾って終わりだろう?」と高を括っているなら、それは大きな勘違いだ。我々が扱うのは単...
HTML

【実務・中級編】Jestによるインライン要素のDOM構造テスト – HTML実践ガイド

なぜ「インライン要素のテスト」が疎かになるのか? Jestとjsdomで足元を固めるフロントエンド開発の現場で、コンポーネントテストを書くとき、私たちはついつい「巨大なUIパーツ」や「複雑なロジック」にばかり目を奪われがちです。しかし、アク...
HTML

【入門編】Jestによるインライン要素のDOM構造テスト – HTML実践ガイド

「本当にHTMLが反映されてる?」をテストしよう!Jestとjsdomでインライン要素を検証するコツこんにちは!フロントエンド開発の世界へようこそ。Webサイトを作っているとき、「このテキストはちゃんと``タグで囲まれているかな?」「クラス...
スポンサーリンク