html-sample

グルーピングコンテンツ

別名、ブロックレベル要素。使用頻度が低いものはコメントアウトしてあります。

(p)段落です。
ここも同一の段落です。
ここも同一の段落です。

(ol/ul - li)列挙項目です。
(ol/ul - li)列挙項目です。
- (nested ol/ul - li)列挙項目です。
- (nested ol/ul - li)列挙項目です。
- (nested ol/ul - li)列挙項目です。
(ol/ul - li)列挙項目です。

(dl-dt)説明リストのタームです。: (dl-dd)タームの詳細です。; (dl-dd)タームの詳細です。; (dl-dd)タームの詳細です。

(div)汎用的なまとまりに使用します。
実際には、Webデザインのために使用します。
header, footer, main, 及びsectionも使う方針もあります。

テキスト修飾要素

別名、インライン要素。使用頻度が低いものはコメントアウトしてあります。

(br)改行を明示します。
(a)リンクを設定します。
(em)ニュアンス(nuance)や強勢(accent)を明示します。(*)
(strong)重要であること明示します。
(i)物語などで、特殊な語りなど。You are enough just as you are.(*)
(b)太字にしたい場合。
(u)下線を引きたい場合。
(mark)マーカーを引きたい場合。
(span)class属性と併用して独自のスタイルを設定します。

(*)「メイリオ」では、日本語は斜体になりません。

埋め込みコンテンツ

リスのアイコンですたい。
画像提供元：icooon mono

♪魔法のクッキング
音楽提供元：フリーBGM・音楽素材MusMus

表形式

端末	viewportの幅	window.devicePixelRatio
iPhone 6-13mini(縦)	375	2
iPad mini 1～5(縦)	768	2
iPad mini 1～5(横)	1024	2

Formsコンテンツ

入力項目

名前

メール

性別男女

お問い合わせ種類

お問い合わせ内容

インタラクティブコンテンツ

Box Model

margin。他の要素と+なら重複、-なら相殺する。
border。
padding。
content。デフォルトでは、width等で指定されるのはこの部分。
box-sizing="border-box"。width等がborder+padding+contentに対して指定される。

View Port

モバイル向けの仕組み。デバイス幅全体に対して、指定されたサイズであるかのように縮小拡大される。
PCブラウザでは無視される。
実際のところ、このページのソースの指定内容がほとんど使用される。