SITE LEARNING

このサイトでHTMLとCSSを学ぶ

実際のページとソース内コメントを行き来しながら、要素・属性・プロパティ・値の役割を確認できます。

HOW TO LEARN

コメントを手がかりに読み進める

HTMLはページの意味と順序、CSSは見た目と配置を担当します。最初は次の3段階で確認してください。

ヘッダー、物件カード、フォームなど、学びたい部分を実際のページで確認します。

を探し、要素とclass属性が担当する範囲を確かめます。

同じclassをCSSで検索し、幅、余白、色、並び方がどの値で決まるか確認します。

SOURCE CHECK

『よくわかるはじめてのHTML＆CSSコーディング HTML Living Standard準拠』全288ページの本文と巻末索引を基準にしています。

教材掲載

header、nav、article、section、a、img、リスト、表、フォーム、文字・余白・枠・影・position・メディアクエリなどです。

教材外

main、figure、figcaption、iframe、code、ARIA属性、遅延読み込み、CSS変数、Grid、画像比率、動きなどです。

使用許可

Flexboxと、checkbox・label・:checkedを使ったCSS-onlyメニューです。JavaScriptは使用していません。

HTML ELEMENTS

タグは見た目だけで選ばず、内容の役割に合う要素を使います。

要素	教材	役割と使用場所
`header / nav / article / footer`	掲載	共通ヘッダー、主要ナビ、記事、フッターを区別します。
`section / aside`	掲載	物件一覧などの章と、物件詳細の補足サイドバーです。
`h1 / h2 / h3 / p`	掲載	ページ名、各章名、カード名、説明文を階層化します。
`a / img / ul / ol / li`	掲載	ナビ、ボタン、写真、特徴一覧、パンくずリストです。
`table / tr / th / td`	掲載	物件概要、会社概要、この学習表を作ります。
`form / label / input / textarea`	掲載	お問い合わせ入力欄です。このデモでは送信を無効にしています。
`main`	教材外	全ページで、そのページ固有の本文を表します。
`figure / figcaption`	教材外	物件詳細9ページで、写真と説明を1組にします。
`iframe`	教材外	会社案内・お問い合わせページへGoogleマップを埋め込みます。
`code`	教材外	この学習ページでタグやCSSの記述例を示します。

HTML ATTRIBUTES

属性	教材	値の例と働き
`class / id`	掲載	`"property-card"`で共通CSS、`"main-content"`で固有の移動先を作ります。
`href / src / alt`	掲載	リンク先、画像の場所、画像の代替説明を指定します。
`for / name / type / value / required / placeholder`	掲載	ラベル対応、送信名、種類、送信値、必須入力、入力例を指定します。
`aria-*` / `role`	教材外	ナビや注意書きの役割と状態を支援技術へ伝えます。
`loading / decoding`	教材外	`"lazy"` / `"async"`で画像と地図の読み込みを補助します。
`autocomplete / inputmode / disabled`	教材外	フォームの入力候補、キーボード種類、デモ送信停止に使います。
`property / crossorigin / title`	教材外	OGP、外部フォント接続、埋め込み地図の内容名に使います。

CSS PROPERTIES

.header-inner { display: flex; gap: 24px; }

.header-innerが対象、displayとgapが項目、flexと24pxが値です。

プロパティと値	教材	働きと使用場所
`margin / padding`	掲載	全ページで外側と内側の余白を作ります。
`width / max-width`	掲載	共通containerなどの幅と最大幅を決めます。
`position / top / right / bottom / left`	掲載	写真ラベルなどを基準位置から動かします。
`@media (max-width: ...)`	掲載	画面幅に応じて列数や余白を変えます。
`display: flex` / `gap`	使用許可	ヘッダー、ボタン列、カード、タブレット・スマホメニューを整列します。
`display: grid`	教材外	物件一覧、サービス、写真、フッターを行と列で整列します。
`var() / min() / calc() / clamp()`	教材外	共通色と、画面に合わせた幅・高さ・文字サイズを作ります。
`object-fit / aspect-ratio`	教材外	ヒーローと物件写真の比率や切り抜きをそろえます。
`transition / transform`	教材外	hover反応とタブレット・スマホメニューの3本線を×印へ変える動きです。
`:checked / ~`	使用許可	checkboxの状態から、後続のタブレット・スマホナビを開閉します。

CSS-ONLY MENU

タブレット・スマートフォンでは次の4つの関係だけでナビを開閉します。

CHECK THE EXAMPLES

カードのGridは物件一覧、表と写真ギャラリーは物件詳細、フォーム属性はお問い合わせページで確認できます。