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

スポンサーリンク
HTML

【入門編】lang属性によるテキストの言語指定 – HTML実践ガイド

なぜ「たかが言語指定」がWeb制作の命運を分けるのか?lang属性の魔法を解説しますこんにちは!Webの世界に飛び込んだばかりの皆さん、毎日コードと向き合ってお疲れ様です。HTMLを書き始めた頃、「``タグや``タグに`lang="ja"`...
HTML

【テクニカル・上級編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド

なぜ、あなたのコードブロックは「ただのテキスト」なのか?:セマンティクスとパフォーマンスの深淵フロントエンドの現場において、コード表示は単なる「文字列の羅列」ではありません。しかし、多くのエンジニアが `` をなんとなくの慣習で使い、そこに...
HTML

【実務・中級編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド

「なんとなく」で終わらせない。``と``のセマンティックな関係と実装の流儀フロントエンドの現場でコードブロックを実装する際、あなたは深く考えずに「とりあえずCSSでスタイルを当てた`div`」で済ませていないだろうか?確かに、見た目だけなら...
HTML

【入門編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド

そのコード、そのまま載せていませんか?``と``で「伝わる」ソースコード表示術Web制作を学んでいると、自分の書いたコードをブログやポートフォリオで紹介したくなる瞬間が必ずやってきますよね。「自分が苦労して書いたコードを、誰かに見てもらいた...
HTML

【テクニカル・上級編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド

誰も教えてくれない「pタグの呪い」:マージンの相殺とレイアウト戦略の深淵フロントエンドのアーキテクトとして大規模なシステムを設計していると、CSSの「マージンの相殺(Margin Collapsing)」という仕様は、まるで予期せぬ場所で爆...
HTML

【実務・中級編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド

なぜ「pタグの上下マージン」で現場のエンジニアは沼るのか?フロントエンド開発の現場で、CSSの「マージン相殺(Margin Collapsing)」ほど、新人から中級者までを悩ませ、時に「ブラウザのバグじゃないか?」と疑わせる仕様はありませ...
HTML

【入門編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド

なぜか余白が消える?HTMLの「pタグ」と「マージンの相殺」という不思議な現象Web制作を始めたばかりの皆さん、こんにちは!HTMLを書き始めて、まず最初にぶつかる「あれ?」という瞬間。その代表格が、「pタグ(段落)の上下にできる謎の余白」...
HTML

【テクニカル・上級編】テキストコンテンツのコントラスト比と可読性 – HTML実践ガイド

可読性は「アクセシビリティ」という名のエンジニアリングだ:コントラスト比最適化の深淵フロントエンドにおいて「色」を語る時、多くのジュニアエンジニアはデザインの美学に終始する。だが、我々のようなテックリードやアーキテクトにとって、テキストコン...
HTML

【実務・中級編】テキストコンテンツのコントラスト比と可読性 – HTML実践ガイド

「読める」は正義。WCAG 2.1準拠で見落としがちなコントラスト比の最適解フロントエンドの世界で、デザインカンプを忠実に再現するのはエンジニアの最低限の責務です。しかし、「見た目が同じならOK」という考えだけでは、あとで必ず痛い目を見ます...
HTML

【入門編】テキストコンテンツのコントラスト比と可読性 – HTML実践ガイド

「読めない」は、Webサイトにとっての「接客放棄」。今日からできるコントラスト改善のヒントこんにちは!Web制作の世界へようこそ。HTMLを書き始めて、``でタイトルをつけたり、``で文章を並べたりするのはとても楽しいですよね。でも、ふとブ...
スポンサーリンク