shift-jisのページにutf8の漢字を表示する
HTML数値文字参照(16進数表記)(例:欧
) を用いる。
参考
- https://www.ipentec.com/document/html-embed-unicode-character
- https://www.marbacka.net/msearch/tool.php#str2enc
右クリックメニューの作成
半角スペースと
は違う
- 半角スペース : 横幅に応じて折り返してくれる。
-
: 横幅に応じて折り返さない。別途word-break:break-word;
が必要。
フルスクリーン表示
<style>
/* フルスクリーン時、背景色を白にする */
::backdrop {
background-color: white;
}
</style>
<!-- クリックでフルスクリーン表示に移行 -->
<body onClick="requestFullscreen();">
</body>
chromeの「翻訳しますか?」を表示させない方法
<meta name="google" content="notranslate" />
ファイルダウンロード時に別名を指定
- html5から。
- 以下の書き方で、ダウンロード時に「書類.pdf」という名前でダウンロードが出来る。
<a href="syorui.pdf" download="書類.pdf">ダウンロード</a>
input type="color"
HTML5でカラーピッカータグが搭載されていた。
<input type="color" value="red" />
disabledとreadonlyの違い
- disabledだとsubmitされない、灰色背景。
- readonlyだとsubmitされる。背景色は通常と同じ。
input type="date"
- chromeで対応。firefoxは非対応。
<input type="date">
progressバー
<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>
titleタグは色んな所に使える
<p title="要素の補足的な情報"> ~ </p>
<tr title="要素の補足的な情報"> ~ </tr>
<strong title="要素の補足的な情報"> ~ </strong>
<input type="text" size="30" title="入力欄に指定した例">
<input type="button" value="ボタン" title="ボタンに指定した例">
html5でバリデーション時のエラー文指定
titleを指定すれば良い
<input pattern="\d*" title="数字で入力してください">
古いIEのHTML5やCSS3に対応させるライブラリ
html5shiv
-
html5shiv
- dist フォルダを用いる。
<!--[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
-
- border-radius (角丸)
- box-shadow (影)
- linear-gradient (グラデーション)
behavior: url(/PIE.htc);
.htaccess
AddType text/x-component .htc
URLに@を含める方法
http://user%40hoge.com:password@www.hoge.com/
@ を %40 に置換すればよい。
css
<link rel="stylesheet" type="text/css" href="sample.css">
<style>
h1 {
font-size: 24px;
}
</style>
videoタグ
-
タグで動画を埋め込む-HTML5リファレンス
- autoplay : 自動再生
- loop : ループ再生
- muted : 音を出さないように指定
- controls : 再生・一時停止・再生位置の移動・ボリュームなどのコントローラを表示
最小のタグ
<video src="sample.mp4"></video>
videoタグに非対応のブラウザで画像を表示させる
<video src="sample.mp4">
<img src="***.jpg" />
</video>
複数のソース記述
<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>
動画の画像
<video src="sample.ogv" poster="firstframe.jpg"></video>
自動再生
<video src="sample.ogv" autoplay></video>
動画を再生前にあらかじめ読み込むのを防止
<video src="sample.ogv" preload="none"></video>
デフォルトは preload="auto"
なお、preload="none"にするとHTML - WebKit系ブラウザでvideoタグにpreload="none"をつけるとwindow.loadの発火がとても遅くなる - Qiita
対策としてはpreload="metadata"
を指定すれば良いとのこと。
<video preload="metadata" src="//example.com/hoge.mp4" />
<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>
.htaccess
AddType video/ogg .ogg .ogv
AddType video/mp4 .mp4
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv
audioタグ
<audio src="sample/sample.ogg" controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
.htaccess
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv