コンピュータがインターネットにつながっていると、世界のいろいろな情報にアクセスできますよね。インターネットで公開されているWebサイトのしくみを学びましょう。しくみとHTMLの基礎がわかれば、自分でWebサイトを作ることができます。
Webサイトを作りたい、とはいっても、どこから入門すればいいのか分からない…と、悩んでいる方も少なくないはず。
本稿では、「初心者が独学で学習しやすい」HTML/CSS入門をお届けします。
初心者の方は是非この入門を体験して「HTML/CSSを駆使してどんなサイトを作るのか？」を考え、実際に手を動かしてWebページを作ってみましょう。
目次
Webサイトをつくろう
Webサイトのしくみ
インターネット上には、さまざまな情報がWebページと呼ばれる形式で公開されています。あるテーマに沿った複数のWebページを集めて、見やすく整理したものを「Webサイト」と呼びます。
まずは、Webサイトを見ることができるしくみについて解説します。Webサイトを見るためには、Webブラウザというアプリケーション（アプリ）を使います。
このWebブラウザに、見たいWebのURL（アドレスといわれることもあるよ）を入力するか、検索サイトでリンクをクリックします。このURLは、インターネットのどこにWebサイトのデータがしまってあるかを示す住所のようなものです。
WebブラウザにURLが入力されると、インターネットを通じて、そのWebサイトのデータがしまってあるサーバーと呼ばれるコンピュータに「必要なものを送ってください」という「リクエスト（要求）」を送ります。
サーバーはこの要求に「必要なものを送りますね」というレスポンス（応答）をした後に、Webサイトを表示するのに必要なものを送ってくれます。具体的には、Webサイトに表示する画像、文章、そしてそれらをどのように表示するかという「指示」のことです。
データと指示を受け取ったWebブラウザは、送られてきた指示に従って、画面に文字を表示するのです。画面に表示する文章や指示を書くための言語を「HTML」と呼びます。HTMLは文章や画像をどのように表示するかを指示するための言語です。
HTMLとは
HTMLを簡単にいうと、Webページに表示したい内容を書いて、それをタグといわれる印をつけていく言語（HTMLのM、Markupは印をつけるという意味）です。
一般的なプログラミング言語のように、計算や動作を指示することはできませんから、プログラミング言語とは呼ばれません。でも、HTMLも決まりを守って書く必要があります。
タグは「＜」と「＞」で囲んだ、<HTML>のような形式で書くことになっています。Webブラウザはこの印をもとにして、表示する内容と大きさ、位置などを読み取り、画面に表示します。画像も同じようにタグを使って表示するファイルを措定していきます。
つまり、HTMLを使って表示したいページの内容と、表示のための指示を書き、画像などのデータを準備すれば、自分でページが作れるということです。
Webサイトをつくる場合は、複数のWebページをつくって、それらをトップページからたどれるようにリンクします。別のページやサイトを、クリックするだけで見られるようにするためのしくみ（これがHTMLのHT、Hyper Textの意味だよ）も、HTMLには用意されています。
- HTML・・・HyperText Markup Language（ハイパーテキストマークアップランゲージ）
- ハイパーテキスト・・・文章を超える文章
- マークアップランゲージ・・・文章内の単語に意味付けをする言語
HTMLは初心者にオススメ
これからプログラミングを習得したい・Webアプリを構築したいと考えていらっしゃる方にとっては、HTMLは比較的とっつきやすい言語だと思います。
身近に題材がたくさんありますし、検索による問題解決方法もありますので、これらを参考にしながら自分なりの書き方を習得する様にして進めるとよいでしょう。
また、HTMLはWebアプリケーション作成の基本となるものです。HTMLが表しているのは、見出しや表といった、レポート文書などで用いられる概念とそれほど変わりません。そのため、HTMLは初心者に最もおすすめできる言語です。
最初は知らない用語等覚えることばかり多くて、取り掛かりづらいかもしれませんが、心配せずに、挑戦していただきたいと思います。
覚えたことを手を動かしてファイルを作成し、すぐにブラウザに表示して確認できるので、楽しみながら進めることができます。
HTML5のメリットと強み
HTML5のメリットとして、構造のグループ化のほかに、プラグインを必要とせずに映像や音声を再生できることがあります。
以前のHTMLにはメディアの再生機能がありませんでしたので、Flashをはじめとするプラグインが不可欠でした。しかしHTML5ではvideo要素やaudio要素を用いることにより、ブラウザ単体でメディアを再生することが可能です。canvas要素では、グラフの描画も行えるようになりました。
HTML5の最大の強みは、PCやスマートフォンなど、複数のデバイスに対応できることです。OSの重要性が昔よりも薄れ、インターネット上でのサービス提供が当たり前になったからこそ、HTML5が活躍しています。
HTML自体は難しくないが、それに付随して様々な技術を身につける必要がある
HTMLは見出しや表といった構造を定義しているだけなので、それほど習得は難しくありません。しかし、HTMLを使って、優れたWebページを作ろうと思うと、HTMLだけでは不十分であることに気づきます。
Webページを作るには、デザイン全般を理解する必要がありますし、何よりコンテンツが必要になります。
また、CSSやJavaScriptなどの他の技術も必要になります。
いろいろなデザイン・テクニックの優れたWebサイトに多く触れるように心がけて、それをどのようにHTMLで実現していくのかということの理解を深めていきます。
- コンテンツ（サイトの内容）を書いた文章・・・HTML
- 見た目を決める指示書 ・・・CSS
- 動きを制御するプログラム・・・JavaScript、PHP、CGI等
CSSとは
ほとんどのWebページはHTMLとCSSという言語でその見た目が作られています。
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。
CSSはHTMLのタグの「何を」「どうするのか」を記述しています。
HTML/CSSのオススメ学習サイトと書籍
次に、おすすめの学習サイトをご紹介したいと思います！
独学で勉強するならまず、「動画」と「スライド」で学ぶことで、挫折せずにHTML/CSSそれぞれの役割がわかり、こうしたい時はどこを変更すれば良いか分かるようになります。
HTMLクイックレファレンス
こちらのサイトは、HTML/CSSのタグを調べられる便利サイトです。
リファレンス的な要素が強いですね。タグを書いたけど動かない、といった際にはぜひ活用してみることをお勧めします。
Progate
ProgateのHTML講座は基礎編と応用編に分かれており、基礎編ではスライドでヘッダーやサイドバー、フッターなどWebページの構成を学び、オンラインエディタを利用して実際にコーディングしてHTMLの基本を勉強します。
一方、応用編では、ランディングページを作るプロセスを通してHTMLを学習します。
ドットインストール
ドットインストールは、現役のエンジニアから初心者まで幅広い方が利用していますが、全24回の「HTML入門」は400万人が視聴した特に人気の動画です。
ドットインストールを一周見れば、HTMLに関する知識は網羅的についていることでしょう。 <無料＞
Schoo! Web Campus
URL：http://schoo.jp
こちらのサイトでは、WEBデザインの理論やCSSの書き方などをライブストリーミングの動画で提供しています。
生放送の場合、分からないことがあればチャットから授業中の講師に向けて質問をしたりメッセージを送ったりすることも可能です。
[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
UDEMY
Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。
講師は、Web制作会社 社長の たにぐち まこと先生です。Web開発分野では、講演や著書も数多く有名。この授業の内容も先生の著書「これからWebをはじめる人のHTML&CSS,JavaScriptのきほんのきほん」と同内容ですから、参考にして進められます。
オススメの書籍
「HTMLとCSSを勉強したいけれど何から手をつければいいか分からない」と悩んでいる人に向けて、基本的な書式から、よく使われるHTMLタグやCSSプロパティの意味、さらにモバイル対応まで丁寧に解説した本です。
入門者にもWebサイト制作過程の全体像を把握しやすい構成ながら、ファイル名の付け方や画像の種類といった細かい部分もしっかり解説されています。定番です。
HTMLを書いてみよう
ここからは実際にHTMLの書き方を学んで、Webページを作ってみましょう。まず、練習のために簡単なHTMLを書いてみましょう。
１．Windowsに標準搭載されているメモ帳を開きます。(macの場合は標準搭載されているテキストエディットをご使用ください。)
２．そして、メモ帳（テキストエディット）に今日学習したことを書いてみましょう！（※文字は自分の好きなことを記述して大丈夫です。）
| <h1>HTMLを学習します</h1>
<p>タグには様々な種類があります。</p> <ul> <strong>文字を強調します！！！</strong> |
３．左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。（macの場合は「ファイル」⇒「保存」です。）
４．すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「sample.html」にする（拡張子が「.html」であればファイル名は何でもかまいません。）
③ファイルの種類を「すべてのファイル」にする
（macの場合はフォーマット項目で「Webページ(.html)」を選択してください。）
④「保存」をクリック
５．すると、保存先であるデスクトップに下のアイコンが表示されます。（※Google Chromeではなく、Internet Exploreで表示される場合もあります。）
６．これをダブルクリックすると…
自分のブラウザに先ほど記述したHTMLが表示されました。
いかがでしたか？ 続いて、CSSも見てみましょう。
CSSを書いてみよう
１．Windowsに標準搭載されているメモ帳を開きます。(macの場合はsublime textというエディタがオススメです。こちらからダウンロードしてください。)
２．まずは以下のようなHTMLをメモ帳(sublime text)に記述します。
| <html> <head> <link rel=”stylesheet”href=”test.css”> </head><body> <h1>CSSを体験しよう！</h1><p>CSSでは、タグ・プロパティ・値を記述します。</p> </body> </html> |
※<head>にある<link rel=”stylesheet”href=”test.css”>は、「test.css」というCSSファイル（後で作成します）をこのHTMLファイルに埋め込みますという宣言です。<link rel=”stylesheet”href=”ファイル名”>の「ファイル名」のところに読み込みたいCSSファイルを記述します。
３．左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）
４．すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「sample.html」にする（拡張子が「.html」であればファイル名は何でもかまいません。）
③ファイルの種類を「すべてのファイル」にする。（sublime textの場合はここは無視して大丈夫です。）
④「保存」をクリック
５．すると、保存先であるデスクトップに下の画面が表示されます。
（※Google Chromeではなく、Internet Exploreなどブラウザのアイコンで表示される場合もあります。）
これをダブルクリックすると…
ブラウザに自分で記述したHTMLが表示されているのが確認できました。
次はいよいよCSSファイルを作成して、このHTMLの見栄えを変えていきます。
６．再びメモ帳を開き、先ほど作成したHTMLの見栄えを変更するコードを記述してみましょう。
※background-colorプロパティは、文字に背景を付けるためのプロパティです。
※font-sizeプロパティは文字の大きさを指定するためのプロパティです。
７．先ほどと同様に「ファイル」⇒「名前を付けて保存」を選択します。
（sublime textの場合は「file」⇒「Save with Encoding」で「UTF-8」を選択してください。）
８．すると、以下の画面が出てくるので、
①「デスクトップ」をダブルクリック
②ファイル名を「test.css」にする（拡張子が「.css」であればファイル名は何でもかまいません。）
③ファイルの種類を「すべてのファイル」にする。（sublime textの場合はここは無視して大丈夫です。）
④「保存」をクリック
９．すると、保存先であるデスクトップに下のようなCSSファイルが作成されます。
１０．そしてもう一度、HTMLファイルを作成したときにデスクトップに現れたブラウザを表示してみましょう。以下をダブルクリックします。
１１．すると、先ほど記述したCSSが反映されました。
まとめ
今回は、「Webサイトをつくろう」ということで、HTML/CSSを説明し、学習サイトや書籍を紹介後、体験的にテキストエディタで作成したファイルをWebブラウザで表示してみました。
いかがだったでしょうか？他のプログラミング言語と違い、すぐにテストして結果を確認することができます。
HTML/CSSの知識は、WebアプリやWebページの制作で基本となります。画面の構成を自由に作れるようにしておきましょう。最初に書きましたが、「HTML/CSSを駆使してどんなサイトを作るのか？」を考え、実際に手を動かしてWebページを作れるようなれるといいですね。