LoginSignup
1

More than 1 year has passed since last update.

snippet: html

Last updated at Posted at 2015-05-31

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

HTML数値文字参照(16進数表記)(例:欧) を用いる。

参考

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

半角スペースと は違う

  • 半角スペース : 横幅に応じて折り返してくれる。
  •   : 横幅に応じて折り返さない。別途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は非対応。

date.png

<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>

progress.png

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

<!--[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

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タグ

最小のタグ
<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 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1