カテゴリー: HTML

HTML講座 / メール・数値・日付・選択肢に合うinputの型

email、number、date、checkbox、radioの使い分けを学びます。見える入力UIと送信値、初期値と現在値の違いを、フォームデータの確認とともに説明します。

HTML講座 / labelとinputを正しく関連付ける

labelのforとinputのidを対応させる方法を学びます。idと送信時のnameの違い、重複IDの問題、placeholderがラベルの代わりにならない理由も説明します。

HTML講座 / formの構造とGET・POSTによる送信

action、method、nameの役割とGET・POSTの違いを学びます。FormDataと開発者ツールを使い、送信対象の値、入力検証、サーバー処理を分けて確認します。

HTML講座 / caption・scope・セル結合で読みやすい表を作る

表の題名、列見出しと行見出し、colspanとrowspanの関係を学びます。色や位置だけに依存せず、一つの値に対応する見出しを判断できる表を目指します。

HTML講座 / table・tr・th・tdで表を作る

行と列を持つデータをHTMLの表で表す基本を学びます。見出しセルとデータセル、theadとtbody、横幅が広い表のスクロール方法も紹介します。

HTML講座 / figureとfigcaptionで図と説明をまとめる

図とキャプションを一つのまとまりとして表す方法を学びます。altとキャプションの役割、出典の示し方、figureを使わなくてもよい場面も説明します。

HTML講座 / divとspanはいつ使うのか

divとspanの内容モデルと使い分けを学びます。CSSのdisplayを変えてもHTMLの親子関係の規則は変わらないことや、意味のある要素を優先する基準も説明します。

HTML講座 / セマンティック要素でページの領域を分ける

header、nav、main、article、section、aside、footerの役割を学びます。見た目の配置と意味を区別し、複数のナビゲーションを識別する方法も紹介します。

HTML講座 / srcset・sizes・pictureでレスポンシブ画像を作る

同じ構図の解像度選択と、画面幅に応じた構図変更を区別して学びます。w記述子、ピクセル密度、currentSrcによる確認方法と、キャッシュが比較に与える影響も解説します。

HTML講座 / img・alt・画像サイズを指定する

imgのsrc、alt、width、heightの役割を学びます。画像の配置場所と相対パス、装飾画像の代替テキスト、表示幅とファイル容量の違いも説明します。