snippet: html

* [プログラム組んだら負け！実はHTML/CSSだけでできること2015夏](https://www.slideshare.net/yusukehirao/htmlcss2015)

## shift-jisのページにutf8の漢字を表示する

HTML数値文字参照(16進数表記)(例:`&#x6B27;`) を用いる。

参考

* https://www.ipentec.com/document/html-embed-unicode-character
* https://www.marbacka.net/msearch/tool.php#str2enc


## 右クリックメニューの作成

https://www.sejuku.net/blog/92015

## 半角スペースと`&nbsp;`は違う

* 半角スペース : 横幅に応じて折り返してくれる。
* `&nbsp;` : 横幅に応じて折り返さない。別途`word-break:break-word;`が必要。

## フルスクリーン表示

```html
<style>
/* フルスクリーン時、背景色を白にする */
::backdrop {
        background-color: white;
}
</style>

<!-- クリックでフルスクリーン表示に移行 -->
<body onClick="requestFullscreen();">
</body>
```


## chromeの「翻訳しますか？」を表示させない方法

* [Chromeの翻訳しますか？をやんわり避ける方法 - コード日進月歩](https://shinkufencer.hateblo.jp/entry/2018/06/27/233000)

```html
<meta name="google" content="notranslate" />
```


## ファイルダウンロード時に別名を指定

* html5から。
* 以下の書き方で、ダウンロード時に「書類.pdf」という名前でダウンロードが出来る。

```html
<a href="syorui.pdf" download="書類.pdf">ダウンロード</a>
```

## input type="color"

* [<input type="color"> - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)

HTML5でカラーピッカータグが搭載されていた。

```
<input type="color" value="red" />
```

## disabledとreadonlyの違い

* disabledだとsubmitされない、灰色背景。
* readonlyだとsubmitされる。背景色は通常と同じ。

## input type="date"

* chromeで対応。firefoxは非対応。

![date.png](https://qiita-image-store.s3.amazonaws.com/0/25728/a1ae511c-e726-f212-cf1e-5fe85bbd6e35.png)

```html:
<input type="date">
```


## progressバー

```html:
<progress value="0.1">非対応時メッセージ</progress><br>
<progress value="0.2">非対応時メッセージ</progress><br>
<progress value="0.3">非対応時メッセージ</progress><br>
<progress value="0.4">非対応時メッセージ</progress><br>
<progress value="0.5">非対応時メッセージ</progress><br>
<progress value="0.6">非対応時メッセージ</progress><br>
<progress value="0.7">非対応時メッセージ</progress><br>
<progress value="0.8">非対応時メッセージ</progress><br>
<progress value="0.9">非対応時メッセージ</progress><br>
<progress value="1.0">非対応時メッセージ</progress><br>
```

![progress.png](https://qiita-image-store.s3.amazonaws.com/0/25728/1c35b94d-f5b5-4a9e-de90-8448493c6d7f.png)


## titleタグは色んな所に使える

* [HTMLタグ/共通属性/要素に補足情報を付ける - TAG index Webサイト](http://www.tagindex.com/html_tag/attribute/title.html)

```html
<p title="要素の補足的な情報"> ～ </p>
<tr title="要素の補足的な情報"> ～ </tr>
<strong title="要素の補足的な情報"> ～ </strong>
<input type="text" size="30" title="入力欄に指定した例">
<input type="button" value="ボタン" title="ボタンに指定した例">
```

## html5でバリデーション時のエラー文指定

* [pattern属性 ≪ input要素 ≪ フォーム ≪ 要素 ≪ HTML5入門](http://html5.cyberlab.info/elements/forms/input-pattern.html)

```html:titleを指定すれば良い
<input pattern="\d*" title="数字で入力してください">
```

# 古いIEのHTML5やCSS3に対応させるライブラリ

* [HTML5やCSS3にIE8以前の古いブラウザを対応させる方法 : 初心者によるブログの勉強のためのブログ](http://blog.livedoor.jp/kamikaze_cyclone/archives/33314448.html)

## html5shiv

* [html5shiv](https://github.com/aFarkas/html5shiv)
  * dist フォルダを用いる。

```html:
<!--[if lt IE 9]>
<script src="html5shiv.jsのURL"></script>
<!-- CSSでhtml5の新要素をブロック要素にする -->
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
</style>
<![endif]-->
```

## CSS3 Pie

* [IE8でも簡単にHTML5とCSS3に対応させる方法 ｜ ホームページ制作,群馬,アーチWeb制作室](http://www.arch-web.jp/web/771/)

* [download](http://css3pie.com/)
  * border-radius (角丸)
  * box-shadow (影)
  * linear-gradient (グラデーション)

```css:
behavior: url(/PIE.htc);
```

```apache:.htaccess
AddType text/x-component .htc
```

# URLに@を含める方法

* [Basic認証 - ベーシック認証をURLに直接書く - Qiita](http://qiita.com/ngkazu/items/6da021edf177f40e1f26)

```html:
http://user%40hoge.com:password@www.hoge.com/
```

@ を %40 に置換すればよい。

# css

```html:
<link rel="stylesheet" type="text/css" href="sample.css">
<style>
h1 {
  font-size: 24px;
}
</style>
```

# videoタグ

* [<video>タグで動画を埋め込む－HTML5リファレンス](http://www.htmq.com/html5/004.shtml)
  * autoplay : 自動再生
  * loop : ループ再生
  * muted : 音を出さないように指定
  * controls : 再生・一時停止・再生位置の移動・ボリュームなどのコントローラを表示


```html:最小のタグ
<video src="sample.mp4"></video> 
```

```html:videoタグに非対応のブラウザで画像を表示させる
<video src="sample.mp4">
  <img src="***.jpg" />
</video>
```

```html:複数のソース記述
<video>
  <source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'>
  <source src='sample.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video> 
```

```html:動画の画像
<video src="sample.ogv" poster="firstframe.jpg"></video> 
```

```html:自動再生
 <video src="sample.ogv" autoplay></video> 
```

```html:動画を再生前にあらかじめ読み込むのを防止
<video src="sample.ogv" preload="none"></video> 
```

デフォルトは preload="auto"
なお、preload="none"にすると[HTML - WebKit系ブラウザでvideoタグにpreload="none"をつけるとwindow.loadの発火がとても遅くなる - Qiita](http://qiita.com/moroya/items/230847f9e40e01a74069)
対策としては`preload="metadata"`を指定すれば良いとのこと。

```html:
<video preload="metadata" src="//example.com/hoge.mp4" />
```

```html:
<video controls autoplay poster="firstframe.jpg" width="320" height="240">
  <source src="sample.mp4">
  <source src="sample.ogv">
  <source src="sample.webm">
  <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
```

```apache:.htaccess
AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv 
```

# audioタグ

```html:
<audio src="sample/sample.ogg" controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio> 
```

```apache:.htaccess
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv 
```