海外サイト CatsWhoCode で公開された Hyper Useful, Ready To Use HTML Snippets by Jean-Baptiste Jung より許可をもらい、翻訳転載しています。
HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。
HTML5基本テンプレート
新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無名のドキュメント</title>
<meta name="description" content="メタディスクリプションを記述します。">
<link rel="stylesheet" type="text/css" href="theme.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
参照元ソース: http://snipplr.com/view/68539/plain-html5-starter-template/
非同期でのJavaScriptの読み込み
HTML5のもっとも優れた機能のひとつは、JavaScriptファイルを非同期で読み込むことができることです。スクリプトタグにasync属性を追加するだけの手軽さで実行できます。
<script src="https://cdn-5ce4a003f911c80f50818892.closte.com/script.js" async></script>
この単純なコードスニペットのおかげで、ブラウザがHTMLファイルとJavaScriptファイルの両方を同時に読み込むため、ページ全体の読み込みがはるかに高速となるでしょう。
レスポンシブWebサイト用にViewportを定義
あらゆるデバイス端末での表示に適した、レスポンシブWebサイトを作成するときは、ビューポート（英: Viewport）の設定が必要となります。以下のスニペットをドキュメントの
内にコピペしましょう。<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true">
このHTMLスニペットは、すべての画面の見え方を1×1のアスペクト比に設定し、Webサイトを降るプレビューでレンダリングし、ユーザーがピンチ操作でレイアウトを拡大できるように、iPhoneおよびその他のモバイル端末からデフォルト機能を削除します。
Google Mapsで現在地から目的地までの道順、ルートを取得
ユーザーがー自分の居場所を入力することで、特定の場所への道順を取得できるフォームを作成する、シンプルだけどパワフルな小技テクニック。お問い合わせページにとても便利なスニペットと言えるでしょう。
<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>
参照元ソース: http://css-tricks.com/snippets/html/get-directions-form-google-maps/
1*1px「スペーサー」GIFのBase64エンコード
透明な「スペーサー」用GIFの使用はあまりオススメできませんが、2019年現在でも使われていることがあります。画像ファイルを利用するよりも良い方法と言えるでしょう。
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
参照元ソース: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
メール検証の正規表現（英: Regexp）パターン
HTML5では、正規表現（英: Regexp）パターンを使用することEメールを検証できます。このスニペットは、メールアドレスを検証するための正規表現パターンを実装した入力フォームを使用できます。
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />
参照元ソース: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/
Bootstrap基本ログインフォーム
ほぼすべてのニーズに合わせて手軽に拡張および変更できる、Bootstrapのフォーム用基本テンプレートです。ログインフォームや連絡先フォームなど、あらゆるフォーム作成のひな形として使用できます。
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
有効なFlashの埋め込み
FlashファイルをHTMLページによく埋め込みますか。今後の仕様に備えて、効果的な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>
参照元ソース: http://yoast.com/articles/valid-flash-embedding/
Flashフォールバックを利用したHTMLビデオの挿入
HTML5の仕様でもうひとつ優れた機能が、ビデオファイルを簡単に埋め込む事ができるvideoタグです。
残念ながら、古いブラウザでは埋め込まれたHTML5ビデオの処理を行うことができません。そんなときは、IE6など古いブラウザ用のフォールバックを備えたHTMLスニペットを利用しましょう。
<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="動画を再生することができません。以下の動画をダウンロードしてください。" /> </object> </video>
参照元ソース: http://camendesign.com/code/video_for_everybody
iPhone通話とSMSリンク
iPhoneのリリースに伴い、Appleは通話とSMSリンクを素早く作成する方法を導入しました。以下のコードスニペットを使ってみましょう。
<a href="tel:1-408-555-5555">1-408-555-5555</a> <a href="sms:1-408-555-1212">New SMS Message</a>
HTML5データリストを使用したオートコンプリート機能
HTML5では、datalist要素を使用することで、データのリストを作成し、入力フィールドを自動補完できとても便利です。以下の再利用可能なコードスニペットを保存しておくのをオススメします。
<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>
参照元ソース: http://davidwalsh.name/datalist
Webフォームの国別ドロップダウンリスト
時間節約になるこのコードスニペットは、世界中のすべての国を網羅したドロップダウンリストです。コードサイズが非常に大きいため、参照元ソースを直接確認してください。
参照元ソース: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/
ダウンロード可能なファイルの実装
HTML5では、download属性を使用することで、ファイルを強制的にダウンロードすることができます。
<!-- will download as "expenses.pdf" --> <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses.pdf">資料PDFをダウンロードする</a>
参照元ソース: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/
アップロードを特定のMimeタイプに制限する
accept属性は、HTML5仕様ではじめて導入されました。inpute type="file"で使用され、ファイルのアップロードを指定されたMIMEタイプに制限します。
<input type="file" name="media_empty" accept="image/gif,image/jpeg,image/jpg,image/png">
accept属性を使用することで、アップロードできるMIMEタイプをコンマ区切りで指定することができます。たとえば上記コードスニペットでは、画像ファイルのみがアップロード可能となります。
参照元ソース: David Walsh
IE6をクラッシュさせる
2019年となった今、長い間フロントエンドエンジニアを苦しめてきたInternet Explorer 6がついにサポート終了となり、ほとんどのひとがアップグレードしているでしょう。しかし、ごく一部のひとは利用しています。この古いブラウザでの閲覧を永久に削除したいときに使える、ユニークなコードスニペットがこちら。これでIE6をクラッシュさせることができます。
<style>*{position:relative}</style><table><input></table>
よく聞かれる質問まとめ
HTMLスニペットとは何？
HTMLスニペットは、HTMLマークアップのソースコードのごく一部です。このユーザーガイドに掲載されているスニペットは、あらゆるプロジェクトで簡単に再利用できるため、特にデベロッパーの間で人気があります。
WordPressの投稿または固定ページにHTMLコードを挿入するにはどうすればよい？
WordPressの投稿または固定ページにHTMLコードスニペットを表示するときは、preで囲むようにHTMLコードをエンコードしましょう。詳細については、WoordPrssガイドの表示コードを参照してみましょう。
参照元リンク : Hyper Useful, Ready To Use HTML Snippets – CatsWhoCode
