「HTMLとCSSを覚えたいんだけど、そもそも基本の部分がわからない」
このような悩みを持っている人は多いと思います。
- Webサイトの仕組みがわからない…
- Webサイトを公開する流れとは？
- Webサイトの作り方がわからない…
- HTMLとCSSはどうやって学んでいけばいいのか…
そんな悩みを解決できる記事を用意しました。
目次
HTMLとCSSの入門：Webサイトの仕組みを知ろう
HTMLとCSSを学習する前に、まずはWebサイトの仕組みを理解しておきましょう。
Webサイトは、簡単にいうとインターネットの一部です。
まずは、この辺りを詳しく解説していきますね。
インターネットとWebサイトの違いとは？
Webサイトはもちろん、電子メール、PayPalなどのオンライン決済、LINEのトークや通話、これらも全てインターネットの一部なのです。
世界中のコンピューターなどの間で、情報を共有したり、データのやりとりをするネットワークのことを、「インターネット」といいます。
- インターネットは、コンピューター同士のネットワーク
- Webサイトは、インターネットの一部
Webサイトはどうやって作られているのか
Webサイトは、基本的にHTMLとCSSで構築されています。まさに今、皆さんが学習しようとしている部分ですね。
HTMLやCSSは、“コンピュータ言語”と呼ばれています。
- Webサイトはどういう仕組みで作らているのか
- Webサイトはどういう原理で表示されているのか
という部分は知っておいた方がいいですね。
Webページを表示する仕組み
今あなたが見ている、このWebページ（koreblog）は、どうやって表示されているかはご存知ですか？
Webページを見るときは、アドレス、もしくは検索キーワードを打ち込みますよね。
そしてたどり着くと、一つのWebページが表示されます。
Webサイトには、それぞれ住所が決まっています。今ご覧の当サイトは、「koreblog.net」というアドレスになっていますよね。これが「Webサイトの住所」です。
Webサイトのアドレス（住所）のことを、ドメインといいます。
皆さんは結果的に、このWebサイトの住所にアクセスをして、ページを閲覧しているということになります。
アクセスした時に、Webページは下記の流れで表示されています。
- アドレスにアクセス
- ブラウザがWebサーバーへ信号をおくる
- Webサーバーがブラウザへ結果を返す
- ブラウザが信号を受け取り表示する
Webサーバーに登録しておいたWebサイトの情報を、ブラウザが表示してくれます。我々はそれを見ているということですね。
Webページ制作〜公開までの流れ
これからHTMLとCSSを学習していくと、コーディングしてWebページを作ることになります。コーディングというのは、HTMLとCSSをパソコンで書いていく、ということですね。
そして、コーディングが完成したら、そのデータをWebサーバーへアップロードしなくてはなりません。そうしないと、Webサイトが表示されない状態になってしまいます。
Webページを公開する仕組み
Webページをインターネットへ公開するするための手順は、下記の流れになります。
- Webサーバーを借りる
- ドメイン（Webサイトの住所）を取得する
- Webサーバーへファイルをアップロードする
上記の流れと、具体的な手順は、下記の記事にまとめています。
HTMLとCSSの入門準備：必要なツール
インターネットやWebサイトが表示される仕組みなど、大まかに理解できたところで、次はHTMLとCSSの勉強を始めるために、必要なツールを確認しておきましょう。
必要なものは、2つあります。
- テキストエディタ
- ブラウザ
上記は、Webサイトをつくるためには欠かせない必須ツールです。
テキストエディタ
「テキストエディタ」は、HTMLとCSSを書くために必須のツールです。これから、HTMLとCSSを学んでいく方は、必ずダウンロードしておきましょう。おすすめは 「Visual Studio Code」です。
・なお、「テキストエディタ」については、下記に詳細を記述しています。
ブラウザ
「ブラウザ」は、コーディングしたHTMLとCSSが、どの様に見えるのかを確認するために使います。現在、このページを見ているあなたは、すでにブラウザを利用しているという状態です。
おすすめのブラウザは「Chrome」です。Chromeには便利な検証ツールというものがあり、HTMLとCSSのコーディングではとても重宝します。
必ずダウンロードしておきましょう。
・
HTMLとCSSの入門：それぞれの役割とは？
この2つの用意ができたら、さっそくHTMLとCSSについて学習してきましょう。
HTMLとは？
HTMLは、Webページを作るための最も基本的なマークアップ言語のひとつです。
HTML…Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略
HTMLやCSSは、プログラミング言語ではなく、マークアップ言語。役割は、文章を構造化するための言語です。
- 「ここはタイトル部分です」
- 「ここから本文が始まります」
- 「ここには画像が入ります」
など、人が直感的に理解できる部分を、タグや記号を使って、コンピューターに伝える（認識させる）ために必要なのが、マークアップ言語です。
HTMLの書き方
HTMLとCSSの書き方にはルールがあります。
今回はその中でも特に抑えておきたいルールをいくつかご説明します。
- タグで書く
- タグの中にタグを入れる
- HTMLファイル構造の基本
この辺りを詳しく説明していきます。
まずは、HTML全体のイメージをみてみましょう。
上記画像を見ると、<●●>で文字などが囲まれていますよね。
これが、HTMLを記述する際に必須となるタグです。
HTMLは、このタグを使って、コンピューターに指示を送ります。また、タグには、それぞれ役割が決まっています。
例えば
- ＜p＞は文字などに使う
- ＜img＞は画像に使う
- ＜a＞リンクに使う
などなど、上記はほんの一部ですが、それぞれ役割が決まっています。
上記の画像を見ると、タグの中にタグが収納されているのがわかりますよね。
このように、HTMLは基本的に入れ子構造で記述していきます。
HTMLは、書き方が決まっています。間違った記述をしてしまうと、Webサイトが正しく表示されなくなってしまいます。
- ＜!DOCTYPE htmlL＞でファイルを宣言する
- ＜HTML＞でコード全てを囲む
- ＜head＞タグにWebサイトの情報を入れる
- ＜body＞タグには画面に表示させる内容を記述する
これらも、学習サイトを使えばきっちり学習することができます。
後ほど、HTMLを詳しく学べるオススメの学習サイトをご紹介いたします。
CSSとは？
Webサイトは、基本的にHTMLだけでも作ることが可能です。
ですが、HTMLだけでは、Webサイトの見た目をおしゃれに整えることができません。
そこで必要になるのが、CSSです。
CSS…（Cascading Style Sheets、カスケーディング・スタイル・シート）の略
HTMLとCSSの関係性などについては、詳しくは下記の記事にて記載しております。
HTMLとCSSの入門におすすめの学習サイト
ドットインストール
- 動画で学習したい
- 隙間時間を利用したい
- HTMLとCSS意外にも学習したい
無料で学べる教材も多く、1動画3分というコンセプトで作られているため、隙間時間にも有効活用することができます。
Progate
- プログラミングに触れてみたい
- アウトプットを重視したい
- スマホでも学習したい
Progateは、スライドで内容を説明され、その後実際に手を動かしながら学習に取り組むことができます。無料で学べる範囲も多く、プログラミング学習では重宝する学習サイトです。
paizaラーニング
- 環境構築不要で即学習したい
- 動画でテンポよく学習したい
- 質問をしたい
テックアカデミー（オンライン受講）
- オンラインで受講したい
- プロに教わりたい
- 挫折せずに続けたい
オンライン完結なので、自宅でも気軽にプログラミング講座を受けることができます。
Udemy
- 優良な動画で学習したい
- しっかりと成長したい
- 自分に合ったものを選びたい
シラバス
- 登録不要で学習したい
- マネしながら学びたい
- Webデザインなどのツールも学習したい
「真似をしながら学習する」をコンセプトとした学習サイトです。HTMLとCSSの他に、PhotoshopやIllustratorの使い方なども学ぶことができます。
Schoo
- オンラインで生放送授業を受けたい
- 1時間ほどみっちりと学習したい
- HTMLとCSS以外にも学びたい
WEBデザインの理論やCSSの書き方など、ライブ動画で提供してくれます。また、分からないところがあれば、チャットで質問ができるため確実にスキルアップができます。
HTMLとCSSの入門：まとめ
いかがでしたでしょうか。Webサイトのしくみや、HTMLやCSSの基礎については、なんとなく理解はできましたか？
HTMLとCSSを学ぶ前に、まずは「それがどのように使われるのか」「Webサイトとはどのような仕組みなのか」この辺りを知るだけでも、学習の理解度は変わってくると思います。
まずは、Webサイトの仕組みを知り、その後にHTMLとCSSの役割を知る。
その後に、学習サイトを利用すれば、理解度がぐっと深まります。
HTMLとCSSの学習方法は様々です。ご自身に合った学習方法を見つけ、HTMLとCSSに取り組んでいきましょう。
