初心者でも使える!HTMLの雛形

HTMLサムネイル






新規ページを作成する時に「htmlタグから書いてるぜ!」という強いこだわりを持っている人以外は、HTMLのひな形を使った方が効率が良いに決まってます。

そんなわけで、今更ですがコピペで使えるHTMLの「ひな形」について書いてみました。

新規ページ作成時に使えるHTML5のひな形

ページを作成する度にhtmlタグから書き始めるのは面倒なので、大抵の場合はhtmlのひな形(テンプレート)を使用すると思います。
人それぞれ使っているひな形は微妙に違うと思いますが、記述されているタグに関しては大して変わりは無いはずなので、HTML5のひな形であれば何を使ってもOKだと思います。

今回は、HTMLに慣れていない初心者向けとして、私が使用しているひな形と、使用しているタグの解説をしています。

HTML5ひな肩の解説

最近はWordPressのテーマやHTMLテンプレートが充実しているので、ゼロからHTMLを記述する機会は少ないと思いますが、初心者向けとして最低限知っておく必要があるタグについて少し解説をします。

DOCTYPEはブラウザにHTMLのバージョンなどのドキュメント情報を伝えます。
HTMLは必ずDOCTYPEから始まります。

HTML文書に必ず必要になるhtml要素です。lang=”ja”で要素内が日本語である事を表しています。

文字のエンコードの指定で、ほとんどの場合utf-8が使用されます。
簡単に言うと文字を表示させるためのルールみたいなものです。

meta要素はページの情報を定義する要素で、様々な目的で使用されています。
SEO対策でも重視される要素で、descriptionにはWEBサイト全体のキャプションを入れ、keywordsはコンテンツに関するキーワードを入力します。

CSS(外部ファイル)を読み込みます。href=” “に任意のファイル名をhtmlファイルからの相対パスで記述します。

1行目を記述する事で、IE8以下でもHTML5のページを表示することが可能になります。
2行目は、IE8以下でCSSのメディアクエリを対応させるコードです。

JavaScriptを読み込む要素。こちらもHTMLファイルからの相対パスでファイル名を記述します。

その他は基本的なHTML5

その他は、基本的なHTML5のタグです。コンテンツの量や内容によって修正・追加をしてください。

今回紹介したテンプレートは、HTML5から使用されている構造化タグを使用しているので、HTMLに慣れてない初心者は下記の書籍などで構造化タグについて一度勉強することをオススメします。


Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。

「Webサイト制作の初心者の方に向けて「本当に必要な正しい基礎」を伝えるWebデザインの入門書」という説明の通り、初歩的な部分から丁寧に説明されています。基本的なHTMLの解説もされているので、基礎から覚えたい人、覚え直したい人には最適な良書です。

HTMLに慣れるまでコピペはオススメしません。

コピペを推奨するような記事を書いていて何なんですが…。

HTMLに慣れて無いしWEB初心者は、コピペをする前にコードを手打ちして覚える事をオススメします。
自分がコーディングを始めたばかりの頃、使えそうなコードがあるとすぐにコピペをしていましたが、いざコーディングしようと思っても引き出しが空っぽで、全く手が動かなかったんですよね。

遠回りのように思えても実は近道だったという事もあるので、最初は地道に手打ちで覚えていきましょう。でもやっぱりコピペは便利ですけどね〜。

「初心者でも使える!HTMLの雛形」でした

WEBも勉強しなきゃいけないDTPデザイナー向けHTMLの解説

2017.08.15

HTMLとCSSでトラッキング・文字詰めする方法

2017.08.14






HTMLサムネイル