【HTML入門】テンプレート活用で簡単!Webサイトの書き方

【HTML入門】テンプレート活用で簡単!Webサイトの書き方

HTMLは、Hyper Text Markup Languageの頭文字を冠したマークアップ言語です。Webサイトの制作に使われる言語ですが、インターネット上で公開されている無料のテンプレートを使えば、より手軽にWebサイトを制作することができます。今回はテンプレートを活用したWebサイトの書き方をご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

自分でWebサイトを書いてみたい!

毎日、PCやスマートフォンなどから閲覧しているWebサイトは、画面上では1枚の絵のように見えますが、実は小さなパーツに分かれており、各パーツをプログラムによって適切な場所に配置することで、ユーザーからは1枚の絵のように見えるのです。

Webサイトでは、上部スペース(ヘッダー)にロゴやタイトル、グローバルナビゲーション(別ページへのリンク)、中央部のスペースにテキストや画像といったコンテンツ、最下部のスペース(フッター)にフッターナビゲーションとコピーライト表記が入っています。HTMLはこれらを正しく表示させるために欠かせません。

HTMLとは?

HTMLとは?

HTMLはWebサイトの骨組みに当たり、特別なツールがなくても、ブラウザとテキストエディター(例えば、Windowsの場合は「メモ帳」)があれば、コードを書くことができる点が魅力です。以下のキーワードは覚えておくと良いでしょう。

【1】タグ

【1】タグ

タグ(tag)は日本語で「荷札・付箋」という意味があり、タグを組み合わせることでHTMLの文書構造を示します。例えば、テキストを太字にする場合は該当テキストを、以下のようにstrongタグで囲みます。<strong>は開始タグ、</strong>は終了タグと呼ばれます。

<strong>太字にしたいテキスト</strong>

【2】要素

開始タグと終了タグ、そしてこの2つで囲まれた部分全体が要素です。例えば、aタグを用いて別ページへのリンクを貼る場合を考えましょう。<a href="リンク先">リンクテキスト</a>と書くと、リンクテキストをクリックしたときに、リンク先にジャンプするリンクを貼ることができます。この場合は開始タグ<a href="リンク先">から終了タグ</a>までが要素に当たります。

【3】属性と値

タグの性質を属性と呼び、属性が持つ値を属性値あるいは単に値といいます。例えば、動画を再生するときはvideoタグの開始タグと終了タグの間にsourceタグを入れ、再生する動画ファイル名を指定することができます。以下の例では、sourceタグの属性がsrc、属性値が動画ファイル名です。

<video controls autoplay>
<source src="動画ファイル名">
</video>

テンプレートを活用して、Webサイトを作ってみよう

テンプレートを活用して、Webサイトを作ってみよう

HTMLは比較的学びやすい言語ですが、使いこなせるようになるまでには時間がかかります。「まず何かWebサイトを作ってみたい」という方は、テンプレートの利用も一つの手です。テンプレートではWebサイトのベースとなるデザインが用意されており、コンテンツを入力するだけで美しいサイトを作ることが可能です。

テンプレートはプロバイダーやWeb制作会社などが無料で配布しており、テンプレートの中には商用利用可能なものもあります。無料の素材集やパーツ集などと併せれば、さらにデザイン性の高いWebサイトを制作できます。また、気に入っているWebサイトのソースコードを見ることも、HTMLの勉強になります。

テンプレートを利用したWebサイトの制作に慣れ、「ワンランク上のWebサイトを制作してみたい」「Webについてさらに勉強したい」という方は、スクールに通うと良いでしょう。スクールでCSSJavaScriptを学ぶことにより、Webサイトの見栄えを指定したり、動きをつけたりすることができるようになります。

おわりに

クオリティーの高いWebサイトを目指す場合は、まずは簡単なテンプレートからWebサイト作成に慣れていき、いずれはテンプレートを利用せずにゼロからサイトを制作できるようになりたいものです。
インターネット・アカデミーは教育業界唯一のW3C(Webサイト制作に必要なルールの標準化を行っているWebに関する世界最高位の団体)のメンバースクールです。また、Web制作会社を母体としているため、制作現場を深く知るプロ講師から、HTMLの基礎から応用、CSSやJavaScriptの実践的なスキルを学ぶことができます。本格的なWebサイトを制作したい方、じっくりと取り組みたい方に、ぜひ受講をおすすめします。

関連講座

Webデザイナーコース Webデザイナー総合コース