HTML

なぜ「あのアイコン」は微妙に浮いて見えるのか？：vertical-alignとフォントの深淵フロントエンドの現場で、一度はこんな経験がないだろうか。「隣り合うテキストとアイコン、CSSで`vertical-align: middle`を当て...

こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めると、必ず一度はぶつかる壁があります。そう、「なぜか要素が微妙にズレる問題」です。テキストの中にアイコンを入れたり、``タグで一部だけ色を変えたりしたとき、「あれ？なんか上に浮い...

インライン要素の「呪縛」を解く：レンダリングエンジンとレイアウトアルゴリズムの深淵フロントエンドの深淵を覗くとき、多くのエンジニアが最初に直面し、そして最後まで苦しめられるのが「インライン要素の挙動」だ。``や``、``といった要素が持つ、...

「インライン要素って何だっけ？」で終わらせない。レイアウトの解像度を上げるdisplayの深淵フロントエンドの現場で、「なぜかここだけ隙間ができる」「思った通りの高さにならない」という壁にぶつかったことはありませんか？その原因の多くは、実は...

「インライン要素って何者？」Web制作の最初の一歩でつまずかないための、魔法の整理術こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、必ずと言っていいほど「あれ？なんで横並びになるの？」「高さが指定できない！」という壁...

なぜ今さら `` タグなのか？ ― datetime属性が握る「セマンティクスの真髄」と型安全な実装戦略フロントエンドの世界において、HTMLタグの選定は単なる「マークアップの好み」ではない。それはブラウザのレンダリングエンジンや、検索エン...

なぜ今さら `` タグなのか？ ― マシンリーダブルという「誠実さ」の話フロントエンドの現場で、「とりあえず日付は `` で囲んでおけばいいや」と済ませていないだろうか？ 確かに見た目上はそれで完成する。しかし、Webのアクセシビリティや検...

なぜ「人間」と「検索エンジン」は、同じ日時を見ても「違うこと」を考えているのか？Webサイトを作っていると、ブログの更新日やイベントの開催日時を表示する場面によく出会いますよね。「2024年10月25日」と画面に書けば、私たち人間はすぐに「...

`タグの「正解」：ブラウザのレンダリングパイプラインを理解したコード表示のアーキテクチャフロントエンドの現場において、``タグはあまりにありふれた存在だ。しかし、テックリードとしてコードベースを俯瞰したとき、この「当たり前」のタグが引き起こ...

なぜ今さら `` タグを語るのか？――その「意味論」があなたのコードを救うフロントエンドの世界にどっぷり浸かっていると、つい「見た目さえ整っていればいい」という誘惑に駆られることがあります。しかし、シニアエンジニアとして現場を見てきて痛感す...