【HTML入門】初心者でも簡単！Webサイトの作り方

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

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

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

HTMLとは？

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

【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サイトを作ってみたい」という方は、テンプレートの利用も一つの手です。テンプレートではWebサイトのベースとなるデザインが用意されており、コンテンツを入力するだけで美しいサイトを作ることが可能です。

他のサイトの真似をして作品を作ってみる

また、よく利用するWebサイトなど、他のサイトを参考にして制作するのもおすすめです。HTMLやCSSなどの学習が一通り終わったら、他サイトの構成や作り方などを参考にしながら、自分で作成しながら練習をすることで、HTMLに対する理解を深めることに役立ちます。

おわりに

クオリティーの高いWebサイトを目指す場合は、まずは簡単なテンプレートや他のサイトの真似からWebサイト作成に慣れていき、いずれはそれらを利用せずにゼロからサイトを制作できるようになりたいものです。

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