Advertisement

super-useful-html5-snippet-for-developers

 

海外サイト CatsWhoCode で公開された Hyper Useful, Ready To Use HTML Snippets by Jean-Baptiste Jung より許可をもらい、翻訳転載しています。

 

HTMLはとても簡単に作成できますが、Webページの制作となると、フォームの作成など、何度も繰り返す必要のある作業もあります。このユーザーガイドでは、コーディング作業ですぐに使えるフロントエンド向けHTMLスニペット15個をまとめてご紹介します。

 

HTML5基本テンプレート

新しいWebプロジェクトを開始するときは、基本となるテンプレートが必要です。HTML5の基礎として役立つ、無駄のないスッキリとしたテンプレートです。

参照元ソース: http://snipplr.com/view/68539/plain-html5-starter-template/

 

 

非同期でのJavaScriptの読み込み

HTML5のもっとも優れた機能のひとつは、JavaScriptファイルを非同期で読み込むことができることです。スクリプトタグにasync属性を追加するだけの手軽さで実行できます。

 

この単純なコードスニペットのおかげで、ブラウザがHTMLファイルとJavaScriptファイルの両方を同時に読み込むため、ページ全体の読み込みがはるかに高速となるでしょう。

 

 

レスポンシブWebサイト用にViewportを定義

あらゆるデバイス端末での表示に適した、レスポンシブWebサイトを作成するときは、ビューポート(英: Viewport)の設定が必要となります。以下のスニペットをドキュメントの内にコピペしましょう。

 

このHTMLスニペットは、すべての画面の見え方を1×1のアスペクト比に設定し、Webサイトを降るプレビューでレンダリングし、ユーザーがピンチ操作でレイアウトを拡大できるように、iPhoneおよびその他のモバイル端末からデフォルト機能を削除します。

 

 

Google Mapsで現在地から目的地までの道順、ルートを取得

ユーザーがー自分の居場所を入力することで、特定の場所への道順を取得できるフォームを作成する、シンプルだけどパワフルな小技テクニック。お問い合わせページにとても便利なスニペットと言えるでしょう。

参照元ソース: http://css-tricks.com/snippets/html/get-directions-form-google-maps/
 

 

1*1px「スペーサー」GIFのBase64エンコード

透明な「スペーサー」用GIFの使用はあまりオススメできませんが、2019年現在でも使われていることがあります。画像ファイルを利用するよりも良い方法と言えるでしょう。

参照元ソース: https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

 

 

メール検証の正規表現(英: Regexp)パターン

HTML5では、正規表現(英: Regexp)パターンを使用することEメールを検証できます。このスニペットは、メールアドレスを検証するための正規表現パターンを実装した入力フォームを使用できます。

参照元ソース: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

 

 

Bootstrap基本ログインフォーム

bootstrap-vertical-form-1

 

ほぼすべてのニーズに合わせて手軽に拡張および変更できる、Bootstrapのフォーム用基本テンプレートです。ログインフォームや連絡先フォームなど、あらゆるフォーム作成のひな形として使用できます。

 

 

有効なFlashの埋め込み

FlashファイルをHTMLページによく埋め込みますか。今後の仕様に備えて、効果的なFlash埋め込みコードを保存しておくことをオススメします。

参照元ソース: http://yoast.com/articles/valid-flash-embedding/

 

 

Flashフォールバックを利用したHTMLビデオの挿入

HTML5の仕様でもうひとつ優れた機能が、ビデオファイルを簡単に埋め込む事ができるvideoタグです。

 

残念ながら、古いブラウザでは埋め込まれたHTML5ビデオの処理を行うことができません。そんなときは、IE6など古いブラウザ用のフォールバックを備えたHTMLスニペットを利用しましょう。

参照元ソース: http://camendesign.com/code/video_for_everybody

 

 

iPhone通話とSMSリンク

iPhoneのリリースに伴い、Appleは通話とSMSリンクを素早く作成する方法を導入しました。以下のコードスニペットを使ってみましょう。

 

 

HTML5データリストを使用したオートコンプリート機能

HTML5では、datalist要素を使用することで、データのリストを作成し、入力フィールドを自動補完できとても便利です。以下の再利用可能なコードスニペットを保存しておくのをオススメします。

参照元ソース: http://davidwalsh.name/datalist

 

 

Webフォームの国別ドロップダウンリスト

時間節約になるこのコードスニペットは、世界中のすべての国を網羅したドロップダウンリストです。コードサイズが非常に大きいため、参照元ソースを直接確認してください。

 

参照元ソース: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

 

 

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

HTML5では、download属性を使用することで、ファイルを強制的にダウンロードすることができます。

参照元ソース: http://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

 

 

アップロードを特定のMimeタイプに制限する

accept属性は、HTML5仕様ではじめて導入されました。inpute type="file"で使用され、ファイルのアップロードを指定されたMIMEタイプに制限します。

accept属性を使用することで、アップロードできるMIMEタイプをコンマ区切りで指定することができます。たとえば上記コードスニペットでは、画像ファイルのみがアップロード可能となります。

 

参照元ソース: David Walsh

 

 

IE6をクラッシュさせる

2019年となった今、長い間フロントエンドエンジニアを苦しめてきたInternet Explorer 6がついにサポート終了となり、ほとんどのひとがアップグレードしているでしょう。しかし、ごく一部のひとは利用しています。この古いブラウザでの閲覧を永久に削除したいときに使える、ユニークなコードスニペットがこちら。これでIE6をクラッシュさせることができます。

 

 

よく聞かれる質問まとめ

html-snippet-1

HTMLスニペットとは何?

HTMLスニペットは、HTMLマークアップのソースコードのごく一部です。このユーザーガイドに掲載されているスニペットは、あらゆるプロジェクトで簡単に再利用できるため、特にデベロッパーの間で人気があります。

 

WordPressの投稿または固定ページにHTMLコードを挿入するにはどうすればよい?

WordPressの投稿または固定ページにHTMLコードスニペットを表示するときは、preで囲むようにHTMLコードをエンコードしましょう。詳細については、WoordPrssガイドの表示コードを参照してみましょう。

 

参照元リンク : Hyper Useful, Ready To Use HTML Snippets – CatsWhoCode