ホームページ >ウェブフロントエンド >H5 チュートリアル >Webサイト制作ですぐに使える10のHTML5コードスニペット、詳細解説
Webサイト制作ですぐに使える10のHTML5コードスニペット、詳細解説
- 黄舟オリジナル
- 2017-03-22 15:21:062098ブラウズ
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 サイトの他の関連記事を参照してください。