HTML 【テクニカル・上級編】インライン要素とdisplayプロパティの相互作用 – HTML実践ガイド
インライン要素の「呪縛」を解く：レンダリングエンジンとレイアウトアルゴリズムの深淵フロントエンドの深淵を覗くとき、多くのエンジニアが最初に直面し、そして最後まで苦しめられるのが「インライン要素の挙動」だ。``や``、``といった要素が持つ、...
HTML HTML 【実務・中級編】インライン要素とdisplayプロパティの相互作用 – HTML実践ガイド
「インライン要素って何だっけ？」で終わらせない。レイアウトの解像度を上げるdisplayの深淵フロントエンドの現場で、「なぜかここだけ隙間ができる」「思った通りの高さにならない」という壁にぶつかったことはありませんか？その原因の多くは、実は...
HTML 【入門編】インライン要素とdisplayプロパティの相互作用 – HTML実践ガイド
「インライン要素って何者？」Web制作の最初の一歩でつまずかないための、魔法の整理術こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、必ずと言っていいほど「あれ？なんで横並びになるの？」「高さが指定できない！」という壁...
HTML 【テクニカル・上級編】timeタグのdatetime属性のフォーマット – HTML実践ガイド
なぜ今さら `` タグなのか？ ― datetime属性が握る「セマンティクスの真髄」と型安全な実装戦略フロントエンドの世界において、HTMLタグの選定は単なる「マークアップの好み」ではない。それはブラウザのレンダリングエンジンや、検索エン...
HTML 【実務・中級編】timeタグのdatetime属性のフォーマット – HTML実践ガイド
なぜ今さら `` タグなのか？ ― マシンリーダブルという「誠実さ」の話フロントエンドの現場で、「とりあえず日付は `` で囲んでおけばいいや」と済ませていないだろうか？ 確かに見た目上はそれで完成する。しかし、Webのアクセシビリティや検...
HTML 【入門編】timeタグのdatetime属性のフォーマット – HTML実践ガイド
なぜ「人間」と「検索エンジン」は、同じ日時を見ても「違うこと」を考えているのか？Webサイトを作っていると、ブログの更新日やイベントの開催日時を表示する場面によく出会いますよね。「2024年10月25日」と画面に書けば、私たち人間はすぐに「...
HTML 【テクニカル・上級編】codeタグによるコード断片のマークアップ – HTML実践ガイド
`タグの「正解」：ブラウザのレンダリングパイプラインを理解したコード表示のアーキテクチャフロントエンドの現場において、``タグはあまりにありふれた存在だ。しかし、テックリードとしてコードベースを俯瞰したとき、この「当たり前」のタグが引き起こ...
HTML 【実務・中級編】codeタグによるコード断片のマークアップ – HTML実践ガイド
なぜ今さら `` タグを語るのか？――その「意味論」があなたのコードを救うフロントエンドの世界にどっぷり浸かっていると、つい「見た目さえ整っていればいい」という誘惑に駆られることがあります。しかし、シニアエンジニアとして現場を見てきて痛感す...
HTML 【入門編】codeタグによるコード断片のマークアップ – HTML実践ガイド
「それ、ただの文字じゃないよ」――``タグでコードを「コードらしく」輝かせる魔法Webサイトを作っていると、ブログや技術メモで「このJavaScriptの書き方はこうだよ！」と、プログラムのコードを紹介したくなる場面ってありますよね。そんな...
HTML 【テクニカル・上級編】emタグとiタグのセマンティックな違い – HTML実践ガイド
セマンティクスの真髄：なぜ私たちは `` と `` を混同してはならないのかフロントエンドのアーキテクチャを設計する際、私たちはしばしば「見た目」と「意味」の乖離に頭を悩ませます。CSSで `font-style: italic` を当てる...