Hand Inc.でフロントエンドエンジニアをしていますEiです。
社内のデザイナー向けにHTML・CSSの入門講座として勉強会を開催しました。レベル感としてはHTML・CSSを全く知らない方を対象として、HTMLの基礎知識をかんたんに学ぶ会です。本記事ではそのときの内容をまとめました。
Webデザイナーを目指している方や始めたばかりの方、非エンジニアでWebサイトの更新に関わる方など、これからHTML・CSSの勉強を始める際の参考にしてみてください。
Webサイト作成に必要な言語
まず、Webサイトを作成するために必要な言語は以下の３つあります。それぞれの違いと役割を把握しましょう。
HTML
HyperText Markup Language （ハイパーテキスト・マークアップ・ランゲージ）の頭文字を取ってHTML（エイチティーエムエル）と呼びます。
テキストの意味付けをして、ブラウザーに対して伝えるために使うマークアップ言語。WebサイトはこのHTMLで書かれたファイルを表示しています。
CSS
Cascading Style Sheets（カスケーディングスタイルシート)の頭文字を取ってCSS（シーエスエス）と呼びます。
色、余白、サイズなど見た目やアニメーションなどの動き設定する言語。HTMLで書かれた文字情報に、デザイン付けることができるものです。
JavaScript
ジャバスクリプトと呼ばれる、ウェブページ上に複雑なものを実装することを可能にするプログラミング言語。
Webサイトに複雑な動きを付けたり、2D/3D グラフィックスのアニメーションを表示などが可能になるものです。
その他、必要に応じてPHPなどのプログラミング言語を使う場合もありますが、基本はこちらの3つがWebサイトを作る上で最低限必要な言語です。
※本記事ではHTMLとCSSの入門編のため、JavaScriptについては取り扱いません。HTML・CSSを習得後に必要に応じて勉強してください。
Webサイトを構成するファイル
上記で説明した言語のファイルと画像や動画ファイルを使用してWebサイトは構成されています。それぞれファイルの拡張子は以下のようになっています。
- HTMLファイル [例：index.html]
- CSSファイル [例：style.css]
- Javascriptファイル [例：script.js]
- 画像・動画 [例：image01.jpg / image02.png / image03.svg / movie.mp4]
※上記以外のファイルを使用する場合もあります。
HTMLの基本
では、HTMLのコードの書き方について見ていきます。
要素
HTMLはコンテンツを様々なタグ< >で囲むことで、表示や動作をさせることができます。
タグで囲まれたひとまとまりを要素と言い、HTMLファイルの中身はこの要素の組み合わせで構成されています。
属性
要素には属性を付けられます。属性は要素に関する追加情報が入ります。
以下の例ではclass が属性の名前、editor-note が属性の値です。class , id, dataなど属性はさまざまな種類があり、目的に応じて使い分けをします。
要素の入れ子
要素の中に他の要素を入れることもでき、これをネスト（または入れ子）と言います。
※一部のタグでは入れられる要素が決まっているものもあります。
空要素
コンテンツを持たない要素もあり、そのような要素を空要素(void element) と呼びます。
例として、以下は画像を表示させる際のタグ。
代表的なHTMLタグ
HTMLの基本を理解したと思うので、Webサイトを作成する際によく使うタグの代表的なもの紹介します。
なお、HTMLタグは約100種類ほどありますので、これらを文章の意味に合わせて適切に使い分けをしてコーディングをしていきます。
約100種類と聞いてタグの種類は多いと感じたと思いますが、実際の現場でも使用頻度の少ないタグも多々ありますので、まずはよく使うものから覚えていくといいでしょう。
見出し<h1>~<h6>
見出し、小見出し、中見出しなどに使用するタグです。
<h1></h1>から<h6></h6>までの6段階が用意されており、h1が一番大きい見出しで数字が大きくなるほど見出しのレベルは小さくなります。
（実際のWebサイト制作で使うのはh1〜h4くらいまでがほとんどです）
段落<p>
本文など、通常の文章に使用します。
改行<br>
改行をする場合は<br>タグを入れます。
リスト<ul><ol><li>
順序付きリスト<ol>と順序なしリスト<ul>を入れる時に使用します。<ul>または<ol>の中に<li>を入れ子にします。
※<li>タグは<ul>または<ol>タグの中でしか使えないルールとなっています。
順序なしリスト<ul>
上記のコードは以下のように表示されます。
- りんご
- みかん
- バナナ
順序付きリスト<ol>
上記のコードは以下のように数字付きで表示されます。
- りんごの皮を剥いて一口サイズに切る
- 鍋に切ったりんご入れて砂糖を入れる
- 30分加熱する
リンク<a>
Webサイト内の別のページや他のWebサイトに遷移する際に使用します。
href 属性を付けて、遷移先のURLを入れます。
画像<img>
画像を表示する際に使用します。
src 属性に画像のパス、alt属性に画像の説明入れます。
以上、主なタグを紹介しました。他にたくさんのタグがありますので気になったら調べてみてください。
グループ化するタグ
上記で代表的なタグを紹介しましたが、これらは全てタグに意味をもったものになります。一方で、意味は持たないが要素をグループ化するためのタグもあるので紹介します。
グループ化のタグは主にスタイル（デザイン）を当てる際に使用します。
<div>タグ
読み方：ディブタグ
divタグはブロック要素としてグループ化を行うので、下に積まれていきます。
<span>タグ
読み方：スパンタグ
spanタグはインライン要素としてのグループ化を行うため、下に積まれずに横に並びます。
<div>タグと<span>タグは並び方に大きな違いがありますので、主にデザインに合わせて使い分けをします。
構造化タグ
上記ではコンテンツに意味を持たせるタグや、意味を持たずにグループ化するタグを紹介しました。それとは別に構造化タグというものもありますので紹介します。
構造化タグはWebサイト上で見えるものでは無いが、HTMLで書かれた情報が検索エンジンなどで理解しやすいようにタグ付けするものになります。
今回は主なものを紹介します（これ以外にもあります）
ヘッダー<header>
主にサイト上部に置かれるヘッダーに使用するタグです。
メイン<main>
文書内の主要な部分をマークアップするのに使用するタグです。
セクション<section>
見出しを付けられる文章のまとまりであることを示すタグです。
セクションの中は見出し＋本文＋その他情報等で構成される。
主にサイト下部に置かれるフッターに使用するタグです。
コンテンツ作成者や著作権に関する記述を記載。その他にも関連文書へのリンクなどの情報を記載したりします。
以上、主なタグを紹介しました。他にたくさんのタグがありますので気になったら調べてみてください。
HTML文書の構成
これまで様々なタグについて学びました。
最後にHTML文書の構成についてを紹介します。
HTMLファイルの全体は以下のようになります。
新しく出てきた記述については以下のとおりです。
<!DOCTYPE html>
文書型定義。このコードはHTMLであると最初に宣言する記述です。
<html lang=”ja”></html>
ページ上のすべての内容を囲む要素。
lang属性で言語を設定する。”ja”はこのサイトは日本語で書かれていることを意味します。
<head></head>
閲覧者に見せるコンテンツではないものを入れるエリアです。
検索結果に現れるキーワードやページのタイトルや説明文、スタイル設定するための CSS、文字セットの宣言など、様々なサイトに必要な情報を記載します。
<body></body>
テキスト、画像などサイト上に表示させるすべてのコンテンツはこの中に記載します。今まで学んできたタグは全てこの中に記載します。
まとめ
簡単にですがHTMLの基本やタグについてを紹介しました。
もっと詳細を学びたい方は、公式ドキュメントに詳細がありますの見てみてください。また、初心者向けの入門書も多数出版されていますので本で学ぶのもおすすめです。
後編ではCSSについてを紹介しますので、ぜひこちらも合わせてご確認ください。
Hand Inc.はさまざまな技術を持ったクリエイター達が集まった、
少数精鋭のデザインクリエーティブカンパニーです。
ブランディングからグラフィックデザイン、アート、
3Dや映像制作、WEBサイト制作など幅広く対応いたします。
この記事を書いた人
