HTML 【実務・中級編】display: inlineとinline-blockの差異 – HTML実践ガイド
なぜ「display: inline-block」でハマるのか？——レイアウトの現場で直面する「隙間」の正体フロントエンドの現場で、コーディングをしていて一番「イライラ」する瞬間の一つが、意図しない余白の発生ではないでしょうか。「`disp...
HTML HTML 【入門編】display: inlineとinline-blockの差異 – HTML実践ガイド
「幅が効かない！」と悩むあなたへ。`inline`と`inline-block`の決定的な違いを解説しますHTMLとCSSを学び始めたばかりの頃、誰もが一度はこんな壁にぶつかります。「文字の中にボタンを置いたのに、なぜか幅や高さを指定しても...
HTML 【テクニカル・上級編】text-transformとfont-variant – HTML実践ガイド
CSSの「見た目」に潜む罠：text-transformとfont-variantを極めるアーキテクチャ設計フロントエンドの世界では、「見た目」の制御はCSSに任せておけば安全だという楽観論が蔓延しています。しかし、大規模なWebアプリケー...
HTML 【実務・中級編】text-transformとfont-variant – HTML実践ガイド
CSSでテキストを操る：`text-transform`と`font-variant`が秘める現場のリアルな知見フロントエンド開発の現場で、「デザインカンプ通りにテキストを組む」という作業は、一見単純そうでいて、実は奥が深い。特にタイポグラ...
HTML 【入門編】text-transformとfont-variant – HTML実践ガイド
文字のデザインを「魔法」のように変える！CSSの `text-transform` と `font-variant` を使いこなそうWeb制作を始めたばかりの頃、こんなふうに思ったことはありませんか？「英語の文章を全部大文字でカッコよく見せ...
HTML 【テクニカル・上級編】letter-spacingとカーニング – HTML実践ガイド
タイポグラフィの解像度を上げる：letter-spacingとfont-kerningの深淵Webアプリケーションの品質は、往々にして「ピクセル単位の執着」によって決まる。特にタイポグラフィは、ユーザーがインターフェースと対峙する際に最も長...
HTML 【実務・中級編】letter-spacingとカーニング – HTML実践ガイド
タイポグラフィの解像度を上げる：letter-spacingとfont-kerningの「正しい」制御術フロントエンドエンジニアの仕事は、単にデザインをコードに落とし込むことではありません。ブラウザという名の「出力装置」の特性を理解し、デザ...
HTML 【入門編】letter-spacingとカーニング – HTML実践ガイド
Web制作の世界へようこそ！HTMLやCSSを触り始めると、最初は「文字を出すこと」だけで精一杯ですよね。でも、少し慣れてくると「なんだか文字が窮屈だな」「もっと洗練された印象にしたいな」という、“デザインの欲”が湧いてくるはずです。今日は...
HTML 【テクニカル・上級編】text-underline-positionによる下線位置調整 – HTML実践ガイド
活字の美学とブラウザの妥協点：`text-underline-position` でタイポグラフィの解像度を一段引き上げるWebフロントエンドにおいて、テキストの「下線」はCSSの黎明期から続く一種の呪縛だ。特に日本語のWebサイトにおいて...
HTML 【実務・中級編】text-underline-positionによる下線位置調整 – HTML実践ガイド
なぜあなたの引いた「下線」は、文字を切り刻んでしまうのか？Web制作の現場で、デザインカンプに忠実なコーディングを求められたとき、誰もが一度は「リンクの下線（text-decoration）」と「ディセンダ（文字のベースラインからはみ出る部...