新規ページを作成する時に「htmlタグから書いてるぜ！」という強いこだわりを持っている人以外は、HTMLのひな形を使った方が効率が良いに決まってます。
そんなわけで、今更ですがコピペで使えるHTMLの「ひな形」について書いてみました。
新規ページ作成時に使えるHTML5のひな形
ページを作成する度にhtmlタグから書き始めるのは面倒なので、大抵の場合はhtmlのひな形（テンプレート）を使用すると思います。
人それぞれ使っているひな形は微妙に違うと思いますが、記述されているタグに関しては大して変わりは無いはずなので、HTML5のひな形であれば何を使ってもOKだと思います。
今回は、HTMLに慣れていない初心者向けとして、私が使用しているひな形と、使用しているタグの解説をしています。
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 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サイトタイトル</title> <meta name="description" content="サイトキャプションを入力"> <meta name="keywords" content="サイトキーワードを,で区切って入力"> <link rel="stylesheet" href="sample.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script src="sample.js"></script> </head> <body> <!----- ヘッダー -----> <header>ヘッダー</header> <nav>ナビ</nav> <!----- ヘッダー END -----> <!----- メインコンテンツ -----> <article> <h1>タイトル</h1> <section> <h2>タイトル</h2> <p>コンテンツの内容</p> </section> </article> <!----- メインコンテンツ END -----> <!----- フッター -----> <footer>フッター</footer> <!----- フッター END -----> </body> </html> |
HTML5ひな肩の解説
最近はWordPressのテーマやHTMLテンプレートが充実しているので、ゼロからHTMLを記述する機会は少ないと思いますが、初心者向けとして最低限知っておく必要があるタグについて少し解説をします。
1 | <!DOCTYPE html> |
DOCTYPEはブラウザにHTMLのバージョンなどのドキュメント情報を伝えます。
HTMLは必ずDOCTYPEから始まります。
1 | <html lang="ja"> |
HTML文書に必ず必要になるhtml要素です。lang=”ja”で要素内が日本語である事を表しています。
1 | <meta charset="utf-8"> |
文字のエンコードの指定で、ほとんどの場合utf-8が使用されます。
簡単に言うと文字を表示させるためのルールみたいなものです。
1 2 | <meta name="description" content="サイトキャプションを入力"> <meta name="keywords" content="サイトキーワードを,で区切って入力"> |
meta要素はページの情報を定義する要素で、様々な目的で使用されています。
SEO対策でも重視される要素で、descriptionにはWEBサイト全体のキャプションを入れ、keywordsはコンテンツに関するキーワードを入力します。
1 | <link rel="stylesheet" href="sample.css"> |
CSS（外部ファイル）を読み込みます。href=” “に任意のファイル名をhtmlファイルからの相対パスで記述します。
1 2 3 4 | <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> |
1行目を記述する事で、IE8以下でもHTML5のページを表示することが可能になります。
2行目は、IE8以下でCSSのメディアクエリを対応させるコードです。
1 | <script src="sample.js"></script> |
JavaScriptを読み込む要素。こちらもHTMLファイルからの相対パスでファイル名を記述します。
その他は基本的なHTML5
その他は、基本的なHTML5のタグですので、コンテンツによって修正・追加をして使ってください。
紹介したテンプレートは、HTML5から使用されている構造化タグを使用しているので、HTM5Lに慣れてない初心者は書籍などで構造化タグについて一度勉強することをオススメします。
まとめ
コピペを推奨するような記事を書いていて何なんですが…やはりコードを手打ちして覚える事をオススメします。
自分がコーディングを始めたばかりの頃、使えそうなコードがあるとすぐにコピペをしていましたが、いざコーディングしようと思っても引き出しが空っぽで、全く手が動かないことがありました。
遠回りのように思えても実は近道という事もあるので、最初は地道に手打ちで覚えていきましょう。でもやっぱりコピペは便利ですけどね〜。
「コピペOK!初心者でも使える！HTMLの雛形」でした
