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

スポンサーリンク
HTML

【実務・中級編】p要素とdiv要素の使い分け – HTML実践ガイド

「とりあえずdivで囲む」は卒業しよう。p要素とdiv要素の、現場で差がつく使い分け術フロントエンドのコードレビューをしていると、どうしても目に付くのが「divの乱用」です。「とりあえずこのテキストと画像をひとまとめにしたいから、divで囲...
HTML

【入門編】p要素とdiv要素の使い分け – HTML実践ガイド

HTMLの「迷いどころ」を解決!`div`と`p`の使い分け、実はこんなにシンプルなんです。Web制作を始めたばかりの頃、誰もが一度はぶつかる壁があります。それが「`div`と`p`、結局どっちを使えばいいの?」という悩みです。「とりあえず...
HTML

【テクニカル・上級編】見出しのアクセシビリティ – HTML実践ガイド

見出しのアクセシビリティ:DOMの階層構造が語る「真のUX」フロントエンド開発において、``から``に至る見出しタグを「単なるフォントサイズ調整のツール」だと考えているのなら、今すぐその思考を捨て去るべきだ。ブラウザのレンダリングエンジンや...
HTML

【実務・中級編】見出しのアクセシビリティ – HTML実践ガイド

見出しは「装飾」じゃない。アクセシビリティから紐解く、正しいアウトライン設計の極意現場でコードレビューをしていると、未だによく見かける光景があります。「デザイン的にここを大きくしたいから``でいいや」という判断。あるいは、「``はロゴだけに...
HTML

【入門編】見出しのアクセシビリティ – HTML実践ガイド

なぜ、見出しタグ(h1〜h6)を「ただの文字サイズ調整」に使ってはいけないのか?Web制作を始めたばかりの頃、こんな経験はありませんか?「文字を大きくしたいから、とりあえず``タグで囲っちゃえ!」「見た目がいい感じになったから、この部分は`...
HTML

【テクニカル・上級編】HTMLにおける空白文字の扱い – HTML実践ガイド

HTMLの空白文字と「見えない設計思想」:レイアウト崩壊を防ぐための深層心理Webフロントエンドの世界において、最も軽視されがちで、かつ最も厄介な挙動の一つが「空白文字(White Space)のレンダリングルール」です。HTMLを書き始め...
HTML

【実務・中級編】HTMLにおける空白文字の扱い – HTML実践ガイド

なぜ、HTMLの空白は「気まぐれ」なのか?ブラウザの空白処理と向き合うフロントエンド開発の現場で、ふと「あれ、なんでここだけ余白が広いんだ?」と頭を抱えたことはありませんか?特にHTMLのソースコード上で改行やインデントを入れたはずなのに、...
HTML

【入門編】HTMLにおける空白文字の扱い – HTML実践ガイド

なぜHTMLの「空白」は無視されるの?ブラウザの気まぐれなルールを解き明かすWebサイト制作を始めたばかりの皆さん、こんにちは!HTMLを書き始めて、ふとこんな経験はありませんか?「コード上では綺麗に改行して、スペースをたくさん空けたのに、...
HTML

【テクニカル・上級編】pre要素とcode要素の組み合わせ – HTML実践ガイド

なぜ私たちは `` を正しく書くのか —— ブラウザレンダリングとセマンティクスの深淵フロントエンドの現場で、ソースコードの表示に `` を使うのは「お作法」として定着しています。しかし、単に「コードを見やすくするため」と割り切っているなら...
HTML

【実務・中級編】pre要素とcode要素の組み合わせ – HTML実践ガイド

なぜ `` と `` を組み合わせるのか?――「なんとなく」を卒業するマークアップの作法フロントエンドの現場で、エンジニアが最も頻繁に目にし、かつ意外と「正しく」使えていないのがコード表示のためのマークアップです。Markdownを使えば自...
スポンサーリンク