【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デザイナー総合コース

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム