【プログラミンング】初心者でもコピペで使える！HTMLの簡単テンプレート

プログラミング

おはこんばんにちは！ノボルです。

HTMLの勉強をしてるんだけど、毎回同じコード打ち込むのめんどくさいよ〜。笑

だったらテンプレートあげるから使うといいよ！


そこで今回は、初心者でもコピペで使えるHTMLの簡単テンプレートを紹介します。

新規ファイルを作成する度にhtmlタグから書くのは非効率です。大抵の場合、雛形を使ってショートカットすることが多いので、コピペでOKです。

HTML5の簡単テンプレート

さっそく、HTMLの簡単テンプレートを紹介します。

ただし、書き方は人によって微妙に変わるので、あなたの作りたいコンテンツに合わせてカスタマイズしてください。(特にbody部分)

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>サイトタイトル</title>
		<meta name="description" content="サイトキャプションを入力">
		<meta name="keywords" content="サイトキーワードを「,」で区切って入力 ">
		<link rel="stylesheet" href="ファイル名.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="ファイル名.js"></script>
	</head>

	<body>
		<!-- ヘッダー部分 -->
		<header>ヘッダー</header>
		<nav>ナビ</nav>
		<!-- ヘッダーここまで　-->
		
		<!-- メインコンテンツ部分 -->
		<article>
			<h1>タイトル</h1>
			<section>
				<h2>タイトル</h2>
				<p>コンテンツ</p>
			</section>
		</article>
		<!-- メインコンテンツここまで -->
		
		<!-- フッター部分 -->
		<footer>フッター</footer>
		<!-- フッターここまで -->
	</body>
</html>


テンプレートの解説

テンプレを使えば気にしなくていいのですが、プログラミング初心者が最低限知っておくべきタグについて解説をしておきます。

DOCTYPE

<!DOCTYPE html>

DOCTYPEは、ブラウザにドキュメント情報を伝えるために使われます。<! DOCTYPE html>と書くことで、ファイルがHTML5で作成されたものであることを宣言できます。

HTML要素

<html lang="ja">

html要素は、HTML文書で必須の要素です。「lang=”ja”」で、要素内で使われている言語が日本語だと宣言できます。

文字のエンコード

<meta charset="utf-8">

「utf-8」は最もポピュラーな文字エンコードです。これを指定しないと、文字化けしたりします。

meta要素

<meta name="description" content="サイトキャプションを入力">
<meta name="keywords" content="サイトキーワードを「,」で区切って入力">

meta要素は、ページの情報を定義する要素のことを指します。 ページ概要の指定、JavaScript使用の宣言、検索エンジンロボットへの動作の命令など様々な目的で使用されます。

また、SEO対策においても重要な要素で、ブログやWEBサイトにキャプションを入れたり(description)、キーワードを指定できます(keywords)。

外部CSSファイルの読み込み

<link rel="stylesheet" href="ファイ名.css">

外部CSSファイルを読み込むための記述です。「href属性」に任意のファイル名を相対パスで指定することで、読み込むことができます。

IE8(以下)への対応

<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>

最初のコードは、IE8以下でHTML5のページを表示することができます。
2行目のコードは、IE8以下でCSSのメディアクエリを対応させることができます。

Javascriptファイルの読み込み

<script src="sample.js"></script>

JavaScriptファイルを読み込むための記述です。「src属性」に相対パスでファイル名を指定することで、読み込むことができます。

ただし、最初は手打ちした方がいい

テンプレートのコピペは便利ですが、あまり頼りすぎると自分でコーディングできなくなります。笑

なので、最初の数回は手打ちしてコードに慣れておくのがいいかと思います。

HTMLであればそこまで問題ないかもしれませんが、CSSやJavascriptとかだと、何も考えずにコピペするのは危険です。コードをある程度理解してから使うようにしましょう。

最後に

今回の記事では、初心者でもコピペで使えるHTMLの簡単テンプレートを紹介しました。

毎回htmlタグから書くと時間がかかるので、上手にテンプレを利用するのがいいと思います。

ただし、テンプレに頼りすぎると自分でコーディングできなくなるので、最初は手打ちしたり、コードを理解してから使うことをオススメします。

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました