1 はじめに
本記事は下記について説明したコーディング初心者向けの記事となっています。
- Webサイトの構造について
- Webサイトを構築する上で欠かせないマークアップ言語「HTML」について
1.1 この記事のターゲット
- Webサイトについて興味がある人
- コーディング未経験だが、0からWebサイトを作ってみたい人
- HTMLについて基礎中の基礎を知りたい人
1.2 目指す状態
- Webサイトの骨格がどの様に作成されているか理解している
- HTMLの基本的な書き方について理解している
2 Webサイトとは
Webサイトとは、インターネット上に登録されている情報の集まりの事です。
Webサイトの他の呼び方として「Webページ」や「ホームページ」等があります。
2.1 皆見ているWebサイト
平成ももうすぐ終わる現代ですが、皆さんの生活にほぼ必要不可欠なパソコンやスマートフォン等を使ってブラウザでWebサイトを閲覧する事が出来ます。
通勤・通学中や暇つぶし、何か調べ物をする時等、知らず知らずの内にWebサイトを見ていると思います。
一昔前はテレビや新聞、雑誌で情報収集をしていましたが、現在の情報収集ツールの殆どがWebサイトなのではないでしょうか。
2.2 Webサイトの例
Webサイトについて、具体的な例を数サイト紹介します。
ちなみに上の節で参考に貼ったリンクもWebサイトです。
2.3 Webサイトの作り方
皆さんが普段何気なく見ているWebサイト。シンプルでカッコいいWebサイトもあればオシャレなデザインのWebサイトもあったり、作成している個人や会社によって様々な工夫が施されています。
では、そんなWebサイトはどの様に作成されているのでしょうか。
簡単に説明すると、HTML、CSS、JavaScript、サーバサイド言語で作成されています。
2.3.1 HTMLでWebサイトの骨組みを作る
HTMLというマークアップ言語を使用してWebサイトに表示する文章や画像、骨格を作成していきます。
HTMLについての詳細は後述します。
2.3.2 CSSでWebサイトのデザイン部分を作る
CSSという言語を用いてHTMLで作成したWebサイトの骨格をより見栄えがよくなる様にデザインを施します。
具体的には文字の色や大きさ、書体を変えたり、Webサイトに動きをつけたりします。
CSSについての記事は後日書いていこうと思います。
HTMLのみを使用した「ポケモン徹底攻略」
HTML + CSSで作成された「ポケモン徹底攻略」
※実際にはCSSの他にJavaScriptや様々なサーバサイド言語が使用されています。
2.3.3 サーバに作成したWebサイトをアップロードする
HTMLとCSSを用いて自分が納得の行くWebサイトを作成したとしてもそれを皆に見てもらう為にはインターネットに公開しなければなりません。
インターネットに公開する為にはサーバが必要になってきます。
サーバにWebサイトをアップロードする方法についての記事は後日書いていこうと思います。
3 HTMLとは
ここで本記事のメインであるHTMLについてを記述します。
HTML(エイチティーエムエル)とはHyperText Markup Languageの略語で、Webサイトを作成する為に開発された言語です。
インターネット上に公開されている殆どのWebサイトはHTMLで作成されています。
3.1 マークアップ言語とプログラミング言語の違い
Webサイトを作成したり、アプリ開発をしたり、世の中のIT関連のサービスは様々なプログラミング言語によって作成されていますが、HTMLは根本的にはプログラミング言語とは違い、一般にマークアップ言語と呼ばれています。
"マークアップ(Markup)・・・印をつける"という様に具体的にHTMLは「ここに画像を置く、ここに文章を書く、ここに段落をつける、ここにリンクを貼る」といった「文書構造」を定義します。
対してプログラミング言語は何らかのデータを処理する事が出来る言語の事で、例えば「C」、「Java」、「JavaScript」、「Ruby」、「Python」等です。
Googleの検索エンジンでキーワードを入力して「検索」ボタンを押すと、キーワードに関連したWebサイトが表示されますが、「キーワードに関連したWebサイトを表示する」という処理はHTMLのみでは出来ず、JavaScriptやサーバサイド言語といったプログラミング言語が処理しています。
3.2 HTMLの書き方
HTMLを書く為には、エディタが必要ですが、最低限パソコンとインターネット環境があれば今すぐ出来ます。
エディタについての記事は後日書く予定です。
3.2.1 エディタの例
エディタとはプログラミングやコーディングをする為にテキストを打ち込む為のツールです。エディタの種類は「メモ帳」みたいにシンプルな物から高機能な物まで様々ですが、ここでは有名なものを例として挙げておきます。
私のおすすめは圧倒的にVisual Studio Code(VSCode)です。マイクロソフトが開発したソースコードエディタであり、使用OSに制限がなく、便利なプラグインが沢山あり、またデザインや使い易さを自分好みにカスタマイズ出来るにも関わらず無料で使えるというのが利点で、逆に欠点が見つからないです。
もしこの記事を読んで下さった方の中で欠点がある方はコメント下さい。
4 HTMLの全体構造
実際にHTMLの中身を見て行きましょう。ざっくりと以下の様な構成になっています。
<!DOCTYPE html>
<html>
<!-- <head>タグの中にはWebサイトに関する情報を記述する -->
<head>
<meta charset="utf-8">
<title>Sample Web Page</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<!-- <body>タグの中に記述したものがブラウザに表示される -->
<body>
Hello, World!
</body>
</html>
上記のソースコードをエディタに書いて、ブラウザで表示したものが以下の画像です。
ソースコードは下記の様な構成になっています。
- ドキュメントタイプを宣言する
- HTML要素を記述する
- HTML要素の中にHEAD要素とBODY要素を記載する
- HEAD要素の中にWebサイトのページに関する情報を記載する
- BODY要素の中にブラウザに表示したい内容を記載する
- HTML要素の中にHEAD要素とBODY要素を記載する
- (随所にコメントを書く)
4.1 ドキュメントタイプを宣言する
<!DOCTYPE html>という記述はHTML5を書く時、1番最初にタグよりも上に記述します。
この記述は「このHTMLのファイルのバージョンがHTML5ですよ」という宣言を意味しています。
おまじないだと思ってもらえれば良いです。
4.2 HTML要素
<!DOCTYPE html>でドキュメントタイプがHTML5というバージョンである事を宣言した後は<html> 〜 </html>という様にHTML要素を記述します。
HTMLのルールとして<html>始まりのタグがあり、</html>終わりのタグがあります。
終わりのタグは「/ (スラッシュ)」を忘れない様にしましょう。
4.2.1 HEAD要素
<html>タグで囲まれた部分の中に次はHEAD要素<head> 〜 </head>を記述します。
HEAD要素の中にはそのWebサイトのページに関する情報を記述します。
HEAD要素の中に記述した情報は基本的にブラウザのページ上には表示されません。
4.2.1.1 文字コードを指定する
<meta charset="utf-8">と記載する事でそのページの文字コードを「UTF-8」に指定します。HTML5ではUTF-8が推奨されており、文字コードを指定する事で文字化けを防ぐ事が出来ます。
4.2.1.2 ページのタイトルの指定
<title> 〜 </title>で囲まれた部分に文字を記述すると、その文字がページのタイトルとなって、ブラウザのタブ上に表示されます。
上記ソースコードでは<title>Sample Web Page</titie>と記述されている為、ブラウザのタブ上には"Sample Web Page"と表示されます。
4.2.1.3 CSSの読み込み
<link rel="stylesheet" href="stylesheet.css">を記述するとCSSを読み込みます。
relはCSSを読み込む宣言で、hrefは読み込むCSSのファイル名です。
ここでは実際にはありませんが、"stylesheet.css"というファイルを読み込んでいます。
4.2.2 BODY要素
<html>タグの中に記述するのは<head>タグだけではありません。<body>タグも記述します。
<body> 〜 </body>で囲まれた部分に記載した情報が実際にブラウザ上のページに表示されます。
文章を表示したり、見出しをつけたり、画像を貼ったり、リンクを貼ったり、ボタンを配置したり、全て<body>タグ内に記述します。
上記のソースコードの例では"Hello World!"とブラウザ上のページに表示させています。
4.3 チーム開発をする上で欠かせないコメント
プログラミング言語には基本的にコメント機能がついています。HTMLでのコメントの書き方は<!-- 〜 -->という書き方をします。コメントはブラウザ上には表示される事はありませんが、注釈やメモとして使える為、「今後実装予定の機能をメモ」したり、「特定の箇所がどういう処理をしているのか」を記載すると、後でソースコードを見直した時にわかりやすいです。
個人でコーディングをする時には、あまり意識する必要がないと思いますが、チーム開発等で他者の書いたソースコードを見たりレビューする際にコメントがあるのとないのとでは理解速度が全然違います。
誰が見ても読みやすいソースコードを書く為にはコメントを意識する必要があります。
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
プログラマーとして、コーダーとして、「誰が見てもわかりやすいソースコードを書く」という事を意識する為に、私がおすすめしている1冊です。
5 まとめ
本記事では、下記について詳しく説明しました。
- Webサイトとはインターネット上に公開されている情報の集まりであり、以下の手順で作成・公開されている。
- HTMLでWebサイトの骨格を作る。
- CSS(やJavaScript、サーバサイド言語)でデザイン(やデータ処理)の肉付けをする。
- 作成したWebサイトをサーバにアップロードする。
-
HTMLとはWebサイトを作成する為に開発された言語であり、正式にはプログラミング言語ではなく、マークアップ言語である。
- HTMLはVSCode等のエディタで簡単に書く事が出来る。
-
HTMLの全体構造は以下の様になっている。
- ドキュメントタイプを宣言する。
- HTML要素を記述する。
- HEAD要素の中にWebサイトのページに関する情報を記載する。
- 文字コードを指定する。
- ブラウザのタブ上に表示されるタイトルを書く。
- CSSファイルを読み込む。
- BODY要素の中にブラウザに表示したい内容を記載する。
- HEAD要素の中にWebサイトのページに関する情報を記載する。
- 誰が見ても読みやすい様に随所にコメントを書く。
これをきっかけに、Webサイトを作成する一歩を踏み出す事が出来れば私は嬉しいです。