地味に便利！さまざまなプロジェクトに適したHTMLのテンプレートを簡単に生成できる -HTML Boilerplates
Post on:2021年3月29日
sponsors
普通に使えるシンプルなHTMLのテンプレートをはじめ、jQueryを使用するHTMLのテンプレート、Bootstrapを使用するHTMLのテンプレート、ソーシャルメディア用のタグを記述したHTMLのテンプレート、クッキーの確認やローダーを表示するHTMLのテンプレートなど、さまざまなプロジェクトに適したHTMLのテンプレートを簡単に作成できるオンラインサービスを紹介します。
テンプレートは汎用性が高いので、スニペットに登録しておくと便利ですね。
使い方は、簡単です。
必要な項目をチェックするだけで、HTMLのテンプレートが生成されます。
まずは、デフォルトのシンプルなテンプレート。
L.2がenになっているので、日本語のWebページを制作する際はjaに変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, world!</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> </head> <body> <h1>Hello, world!</h1> </body> </html> |
デフォルトではさすがにシンプルすぎるので、ファビコン・外部CSSありのHTMLテンプレート。
ほとんどのプロジェクトで利用できるテンプレートです。ここらへんは、スニペットを用意している人も多いと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, world!</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="icon" href="img/favicon.png"> </head> <body> <h1>Hello, world!</h1> </body> </html> |
jQueryを使用するプロジェクトもまだまだあると思います。
2021年3月現在、最新版のjQuery 3.6.0が外部ファイルとして記述されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <title>Hello, world!</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="icon" href="img/favicon.png"> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script> </body> </html> |
ソーシャルメディア用のコードもテンプレートに必要ですね。
テンプレートでは、Facebook, Twitterのmetaが記述されます。
|
1 2 3 4 5 6 7 8 |
<meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" /> <meta name="twitter:card" content=""> <meta name="twitter:site" content=""> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:image" content=""> |
テンプレートのオプションは多彩で、クッキーの確認表示もあります。
クッキーの確認表示をするには、jQueryとBoostrapが必要となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="cookie-notice" class="w-100 bg-dark text-white pt-3 px-4 pb-1 position-fixed" style="z-index: 1000; bottom: 0;"> <div class="container p-2"> <div class="row"> <div class="col-sm-8 col-md-9"> <p class="p-2">This website uses cookies so that we can provide you with the best website experience. By clicking “I Accept” you acknowledge the use of cookies and to our <a href="#"><u>Privacy Policy</u></a>.</p> </div> <div class="col-sm-4 col-md-3"> <a class="i-accept btn btn-primary m-2">I Accept</a> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script> <script type="text/javascript"> (function($){ $('.i-accept').on('click', function() { if(localStorage.noshow !== '1') { $('#cookie-notice').addClass('d-none'); localStorage.noshow='1'; } }); if(localStorage.noshow == '1') { $('#cookie-notice').addClass('d-none'); }; })(jQuery); </script> |
オプションは他にも、IE8, 9に対応するための条件分岐コメント、ブラウザのアップデートを促すメッセージ、テーマカラー、ローダーなどをテンプレートに組み込むことも可能です。
sponsors
