Webサイト制作ですぐに使える10のHTML5コードスニペット、詳細解説-H5 チュートリアル-php.cn

Webサイト制作ですぐに使える10のHTML5コードスニペット、詳細解説

黄舟

リリース： 2017-03-22 15:21:06

オリジナル

2090 人が閲覧しました

HTMLは書くのが簡単ですが、Webページを作成する際にはフォームの作成など、同じ作業を繰り返し行う必要があることがよくあります。この記事では、開発速度の向上に役立つ、HTML5 スタートアップテンプレート、空白の画像、通話とテキスト送信、オートコンプリートなどを含む 10 個の非常に便利な HTML コードスニペットを集めました。

HTML5 スタートアップテンプレート

新しいプロジェクトを開始するときは、スタートアップテンプレートが必要です。これは、HTML5 プロジェクトの基礎として使用できる、シンプルでクリーンなテンプレートです。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Untitled</title>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		
	</body>
</html>

ログイン後にコピー

道順を取得するフォーム (Google マップ)

これは、ユーザーが特定の場所への行き方を入力できる、シンプルだが強力なフォームコードです。お問い合わせページに非常に便利です。

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

ログイン後にコピー

Base64 エンコードされた空の GIF

透明 GIF の使用はお勧めしませんが、2013 年現在でも多くの人がまだ使用していることは知っています。あなたもその一人であれば、この Base64 エンコードされた 1 * 1px の空の GIF を楽しめるかもしれません。この方法は画像を使用するよりも優れています。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

ログイン後にコピー

メール検証のための正規表現

HTML5 では、メールの検証に正規表現パターンを使用できるようにするなど、フォーム機能が大幅に改善されています。

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

ログイン後にコピー

Flash の埋め込み

HTML ページに Flash ファイルを埋め込む必要があることがよくありますか?その場合は、将来使用できるように以下の Flash 埋め込みコードを保存しておいた方がよいでしょう。

<object type="application/x-shockwave-flash" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

ログイン後にコピー

Flash フォールバックを備えた HTML5 ビデオ

新しい HTML5 仕様のもう 1 つの優れた機能は、ビデオファイルを簡単に埋め込むことができる Video タグです。ただし、残念ながら、一部のブラウザでは埋め込み HTML5 ビデオを処理できません。したがって、このコードは古いブラウザと互換性があり、HMTL5 ビデオをサポートしていないブラウザでは Flash を使用します。

<video width="640" height="360" controls>
	<source src="VIDEO.MP4"  type="video/mp4" />
	<source src="VIDEO.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="FLASH.SWF">
		<param name="movie" value="FLASH.SWF" />
		<param name="flashvars" value="controlbar=over&image=POSTER.JPG&file=VIDEO.MP4" />
		<img src="VIDEO.JPG" width="640" height="360" alt="TITLE"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

ログイン後にコピー

電話とテキストメッセージ

モバイルウェブで電話とテキストメッセージのリンクを作成する簡単な方法があります。以下はサンプルコードです。コードスニペットライブラリに忘れずに保存してください。

<a href="tel:1-408-555-5555">1-408-555-5555</a>
<a href="sms:1-408-555-1212">New SMS Message</a>

ログイン後にコピー

オートコンプリート機能

dataList 要素を使用すると、HTML5 で入力フィールドのオートコンプリートデータのリストを作成できます。超便利！ここにサンプルコードがあります。

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

ログイン後にコピー

ダウンロード可能なファイル

HTML5 では、ダウンロード属性を使用してファイルを強制的にダウンロードできます。以下は、ダウンロード可能なファイルへの標準リンクです。

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">Download Your Expense Report</a>

ログイン後にコピー

IE6 のクラッシュ

2013 年、フロントエンド開発者に悪夢を与えた Internet Explorer 6 の市場シェアは大幅に低下しました。しかし、今でも使っている人もいます。この古いブラウザを削除したい場合は、IE6 をクラッシュさせるために HTML ページに組み込む非常に興味深いコードを次に示します。

りー

以上がWebサイト制作ですぐに使える10のHTML5コードスニペット、詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。