投稿日時: 2018年6月19日　カテゴリー: HTML/CSS/SASS

憶えておきたいhtml5

html5で追加された使い勝手のよさそうな要素、属性は抜粋

リストの開始番号

コード

	
hoge
	
hoge,hoge
	
hoge,hoge,hoge

例

3. hoge
4. hoge,hoge
5. hoge,hoge,hoge

リストの連番変更

コード

	
hoge
	
hoge,hoge
	
hoge,hoge,hoge
	
hoge,hoge,hoge,hoge
	
hoge,hoge,hoge,hoge,hoge

例

1. hoge
10. hoge,hoge
11. hoge,hoge,hoge
5. hoge,hoge,hoge,hoge
6. hoge,hoge,hoge,hoge,hoge

リスト番号の種類変更

コード

	
hoge
	
hoge,hoge
	
hoge,hoge,hoge

// 種類 1,a,A,i,I

例

1. hoge
2. hoge,hoge
3. hoge,hoge,hoge

リストを降順に

コード

	
hoge
	
hoge,hoge
	
hoge,hoge,hoge

// IE10以下 ×

例

1. hoge
2. hoge,hoge
3. hoge,hoge,hoge

図版とキャプション

コード

例

注釈

コード

	
※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	
※イメージ図です。

例

※この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

※イメージ図です。

日時や時間

コード

	2015年1月1日
	16:30
	去年の正月

例

2015年1月1日

16:30

去年の正月

テキストのハイライト表記

コード

	
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

例

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

改行位置を指定

コード

	
Thissentenceisadummy.Weareputtingintocheckthesizeoftheletters,
	
Thissentenceisadummy.Weareputtingintocheckthesizeoftheletters,quantity

例

コンテンツの埋込

コード

	

	

	
	リンク

	// iframeとの使い分けは、通常iframeを使用するが、objectの場合は代替コンテツの指定ができる

例1

例2

例3

input要素

コード

例

tel

url

email

password

date

datetime

datetime-local

month

week

time

number

range

color

入力候補

コード

例

プログレスバー

コード

	33%

例

33%

ゲージ

コード

例

ダイアログ

コード

	

		
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	

例

Favorite animal: Brine shrimp Red panda Spider monkey

Cancel Confirm