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

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

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

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


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

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

HTML5の簡単テンプレート

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

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


テンプレートの解説

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

DOCTYPE

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

HTML要素

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

文字のエンコード

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

meta要素

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

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

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

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

IE8(以下)への対応

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

Javascriptファイルの読み込み

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

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

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

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

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

最後に

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

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

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

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

コメント

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