HTML 【実務・中級編】見出し要素とSEO – HTML実践ガイド
見出し（h1-h6）はSEOの「隠し味」ではない。構造という名の「背骨」だ。フロントエンドの現場にいると、時折こんな会話を耳にします。「ここのフォントサイズを大きくしたいから、h3にしておこう」「デザイン上、h1が二つあると格好いいから……...
HTML HTML 【入門編】見出し要素とSEO – HTML実践ガイド
「見出し」は検索エンジンのための「案内図」！SEOを意識した正しいHTMLの書き方こんにちは！Web制作の世界へようこそ。HTMLを学び始めると、「``とか``って何のためにあるの？ただの文字の大きさ調整じゃないの？」という疑問、必ず一度は...
HTML 【テクニカル・上級編】pre要素内の長いテキストの折り返し – HTML実践ガイド
`pre`タグの暴走を止める：エンジニアリングの視点から見るテキスト制御の最適解フロントエンドの世界において、``タグは「素朴だが最も気難しいコンポーネント」の一つです。我々エンジニアにとって、ソースコードやログの表示には欠かせない存在です...
HTML 【実務・中級編】pre要素内の長いテキストの折り返し – HTML実践ガイド
`pre`要素の「行の折り返し」問題に終止符を。現場で本当に使えるCSS最適解フロントエンドエンジニアの皆さん、お疲れ様です。コードレビューをしていると、今でもたまに見かけるのが「`pre`要素の中でテキストが画面を突き破ってレイアウトを破...
HTML 【入門編】pre要素内の長いテキストの折り返し – HTML実践ガイド
なぜか画面からはみ出す「preタグ」の怪。CSSで美しく折り返すための処方箋Web制作を始めたばかりの皆さん、こんにちは！HTMLでプログラミングのコードや、詩のような「空白や改行をそのまま表示したい！」と思ったとき、`pre`タグという頼...
HTML 【テクニカル・上級編】hr要素のCSSスタイリング – HTML実践ガイド
`hr`要素を単なる「罫線」と侮るな：ブラウザの深淵を制御するCSS設計術フロントエンドの現場において、`hr`要素ほど「何となく使われて、何となく上書きされる」不遇な要素はないかもしれません。多くのジュニアエンジニアは、とりあえず `bo...
HTML 【実務・中級編】hr要素のCSSスタイリング – HTML実践ガイド
現場で差がつく！`hr`要素のスタイリング、あなたは「ただの線」で終わらせていないか？こんにちは。フロントエンドの現場に長くいると、「たかが `` されど ``」という言葉を身にしみて感じることがあります。HTMLの仕様において、`` は「...
HTML 【入門編】hr要素のCSSスタイリング – HTML実践ガイド
「その線、何もしないと消えちゃう？」hrタグを自分好みに料理する魔法のCSSWebサイトを作っていて、「ここで話題を切り替えたいな」と思ったとき、皆さんはどうしていますか？ おそらく多くの人が、HTMLの `` タグを使っているはずです。で...
HTML 【テクニカル・上級編】p要素とdiv要素の使い分け – HTML実践ガイド
「p か div か」という問いに、エンジニアとしてどう答えるかWeb開発の現場で、新人エンジニアが最初に突き当たる壁。それが「`p`要素と`div`要素の使い分け」です。一見すると、CSSでスタイルを当ててしまえば見た目は同じ。しかし、我...
HTML 【実務・中級編】p要素とdiv要素の使い分け – HTML実践ガイド
「とりあえずdivで囲む」は卒業しよう。p要素とdiv要素の、現場で差がつく使い分け術フロントエンドのコードレビューをしていると、どうしても目に付くのが「divの乱用」です。「とりあえずこのテキストと画像をひとまとめにしたいから、divで囲...