プログラミングを勉強しよう！一念発起して最初に目にする言語といっても過言ではないのが『HTML』です。理解していないと簡単なサイトすら作ることがほとんど不可能な言語の一つですが、今さら聞けない『HTML』の使い方、書き方を初心者の方でも分かりやすく丁寧に解説していきたいと思います。
Contents
前提：HTMLはプログラミング言語ではない
まず最初にこの記事を見ているということは『プログラミングを学習したい！』、『HTMLって何？』こんな考えを持っている人が多くいると思います。このブログだけではなく、他のサイトでもHTMLについて調べていく中で、もしかしたら聞いたことがあるかもしれませんが、
HTMLとはマークアップ言語であり、プログラミング言語ではありません。
HTMLではサイトに掲載されている見出しやコンテンツ内の文章などをHTMLファイルに書かれている順番に上から並んでいるだけであって、プログラムが作動している訳ではありません。
しかし、これを知っているか知らないかで特筆して弊害があるということ訳でもありません。少なくとも初心者である現状、HTMLについての見識を深めている段階においては弊害は全くないといえるでしょう。
このようなサイト、Twitterなどで似た掲載を多く見るため、今回はHTMLはプログラミング言語ではなく、マークアップ言語だけれどもそこを掘り下げる必要は現時点でないということだけ伝えたいと思いました。
これについて触れるか触れないかは迷う部分ではありましたが、ユーザー様に勘違いをして欲しくないため掲載させていただきました。 ここで伝えたいことは上記で示したことのみですので、ここからは具体的なHTMLの使い方、書き方を解説していきます。
１：HTMLを記述するための『HTMLファイル』を作成する
HTMLとはマークアップ言語であるということが分かったところで、HTMLでは先ほど少し説明があったように見出しやコンテンツ内の文章を『HTMLファイル』に記述していくことで機能する言語となります。
そのため、まずしなくてはいけないこととして『HTMLファイル』を作成していかなければいけません。
『HTMLファイル』の作成方法はとても簡単です。エディターなどで新規ファイルを追加する際に拡張子を『html』にすればいいだけです。
『拡張子』とは『jpg』や『png』などのことでファイル名の『〇〇.html』などのhtmlの部分のことを言います。『〇〇』の部分はどのような文字列でもHTMLファイルとして機能しますが、良くあるのは『index.html』ですので、迷ったらこれにしておけば大丈夫でしょう。
HTMLファイルのみではサイトを制作することは不可能なため、一つのフォルダをつくり、そこに作成したHTMLファイルやCSSファイル、JavaScriptファイルなどを入れていくため、このタイミングでフォルダも作成した方が良いでしょう。
２：作成したHTMLファイルの一行目で『DOCTYPE宣言』をする
『DOCTYPE宣言』の説明の前にHTMLにはいくつかのバージョンがあることを知っていないといけません。
そうは言っても、HTMLがプログラミング言語ではなく、マークアップ言語であるという説明と同様、深堀する必要はないのですが、現在、主流となっているHTMLとは正式には『HTML5』というもので、過去には『HTML4.01』や『XHTML1.0』などの別のバージョンのHTMLが使用されていました。
この『DOCTYPE宣言』では自分がどのバージョンのHTMLを使用するのかを表明するための記述となります。
<!DOCTYPE html>『DOCTYPE宣言』と聞き、難しく考えてしまうかもしれませんが、『<!DOCTYPE html>』と一行目に記述するだけで完了です。これは必ず一行目に記述しなければいけないことですので、そこだけは注意しましょう。
３：『htmlタグ』を記述する
『DOCTYPE宣言』をした後は『htmlタグ』を記述します。
<!DOCTYPE html>
<html lang="ja">
</html>これから記述するタグも基本的には『<〇〇>～</〇〇>』の形で記述します。
タグの書き方については開始タグ？終了タグ？HTMLの『タグ』を完全解説で詳しく解説していますので、参考にしてみてください。
『htmlタグ』の記述をすることで、これからhtmlが記述されることを示しています。具体的に説明すると、<html>からHTMLの記述が開始し、</html>でHTMLの記述が終了することを示しています。
開始タグに記述されている『lang=”ja”』ですが、これは『lang属性』のうち、『ja』を指定しているということになります。 lang属性とは『language』の略称であり、言語を示す属性です。これを説明すると、予測できるかもしれませんが、jaはlang属性のうち、『Japanese』、『日本語』を示しています。これらを併せて記述することで、このHTMLが日本語で記述されることを表しています。
HTMLに記述される全ての要素はこの『htmlタグ』の中に納めなければいけません。忘れてはいけない重要なタグですが、初心者でなくとも忘れてしまうことがあります。まずは『htmlタグ』を記述することを癖づけましょう。
４：『headタグ』、『bodyタグ』を記述する
『htmlタグ』の記述をした後は『headタグ』と『bodyタグ』を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>まず、『headタグ』ですが、これはこのHTMLファイルがサイトとして公開されたときに表示されるものではなく、titleタグ、metaタグなどこのHTMLファイルの様々な情報が指定されます。
それに加え、CSSやJavaScriptといった、デザインなどをHTMLファイルに付属させる外部ファイルの読み込みについても行われます。
続いて、『bodyタグ』ですが、『headタグ』とは対照的にHTMLファイルがサイトとして公開されたときに表示される部分のことを指定します。具体的にはサイトの見出しや文章が挙げられます。
注意するポイントとしてはCSSやJavaScriptといったファイルによってデザインは決められていくため、HTMLファイルのbodyタグに記述するだけでは、左上から字面が羅列されるだけになります。
『headタグ』と『bodyタグ』の二つは同階層に記述します。同階層に記述すると聞き、直ぐにイメージができないかもしれませんが、全てのタグは親子関係のように構成されています。
例えば、今回のHTMLファイルの最上層のタグは『htmlタグ』です。これを親として、『headタグ』と『bodyタグ』が子として存在しています。そして、この後、『headタグ』と『bodyタグ』を親とするタグが記述され、それは『headタグ』と『bodyタグ』の子として存在します。
このように親子関係が無数に構築されるHTMLの中で、『headタグ』と『bodyタグ』は同階層、つまりは同じ親の子として存在するタグとなっています。
親子関係を表すということで、親の役割を果たすタグを『親要素』、子の役割を果たすタグを『子要素』と呼称することもあるので、このサイトを含め、他のサイトなどでこのような言葉が出てきても焦らずに
『タグの親子関係を表しているんだな』
と考えながら読み進めていきましょう。
５：『metaタグ』を記述する
『headタグ』と『bodyタグ』の記述をした後は『metaタグ』を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>『metaタグ』の説明は少し複雑になってしまうため、最初はメタ情報といわれる、そのページの様々な情報を記述するためのタグという認識で問題ないでしょう。HTMLを理解するうちに『metaタグ』がSEOなどにも関わってくることが分かるため、その際にもう一度調べ直すことをおススメします。
今回、記述した『<meta charset=”UTF-8″>』はこのサイトの文字エンコーディングを指定するための記述です。これについても最初は深く理解する必要はなく、これをコピペしなければいけないという理解で良いでしょう。
注意点として、『metaタグ』は『headタグ』の中の一番上に記述しなければなりません。その点だけは注意してコピペしましょう。
６：『titleタグ』を記述する
『metaタグ』の記述をした後は『titleタグ』を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>『titleタグ』とはその名前通り、HTMLファイル、サイトのタイトルを指定します。
このようにtitleタグで指定されたタイトルはサイトを検索した時に表示させることができます。
今回はサイトのタイトルを検索いたしましたので、この部分を表示させることに成功しましたが、それぞれの投稿ページのタイトルを検索し、そのページを表示させた時はその投稿ページのタイトル(見出し)が表示することになります。
７：『CSSファイル』を読み込む
『titleタグ』の記述をした後は『CSSファイル』を読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>CSSファイルを読み込むために『<link rel=”stylesheet” href=”style.css”>』を追記しました。追記した中で、『link rel=”stylesheet”』の部分でCSSファイルを読み込むということを伝えます。そして、『href=”style.css”』の部分でどのCSSファイルを読み込むかを指定しています。
CSSファイルは拡張子を『CSS』にしたファイルのことで、そのサイトの静的デザインを指定するためのファイルとなります。
この記述をする際の注意点として、CSSファイルを読み込むのはheadタグ内の一番最後に記述しなければいけません。今回はCSSファイルのみしか読み込みませんが、CSSは静的なデザインしか指定することが出来ませんので、動的なデザインを指定するために『JavaScript』の外部ファイルを同じように読み込むこともあります。その際は一番最後にJavaScriptの外部ファイルを読み込むための記述、そのすぐ上にCSSファイルを読み込む記述をしましょう。
他にもheadタグ内に記述できるものはありますが、今回最低限の記述に抑え、これでheadタグ内の記述は終了とします。それではもう一度headタグ内の記述を確認していきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>今回は記述しませんでしたが、レスポンシブデザインに対応したサイトを制作したい場合には『meta viewportタグ』を記述しなければいけません。
レスポンシブデザインや『meta viewportタグ』についてはレスポンシブデザインの書き方、ブレイクポイントまで徹底解説【テンプレあり】で詳しく解説していますので、参考にしてみてください。
こちらの記事で紹介していますので参考にしてみてください。
ここからはbodyタグ内の記述をしていきます。
８：bodyタグ内に記述をしていく
ここからはbodyタグ内の記述ですが、bodyタグ内の記述は基本的に自由です。何をそこに記述するかは人それぞれなので、自分好みのサイトにするためにコードを記述していきましょう。
タグの書き方については先ほど紹介した【初心者向け】開始タグ？終了タグ？HTMLの『タグ』を完全解説で詳しく解説していますので、参考にしてみてください。
また、HTMLで頻出のタグについてはHTMLの頻出タグ9選をご紹介で詳しく解説していますので、参考にしてみてください。
そして、HTMLで似たような役割を持つ『class属性』、『id属性』についてはclass属性、id属性の違いって？それぞれの使い方を簡単解説で詳しく解説していますので、参考にしてみてください。
基本的には上記のリンクで解説している記事を参考にすることで、HTMLを記述することは可能ですので、是非試してみてください。
今回はHTMLとは何なのか、そして、そのHTMLの使い方、書き方について初心者の方にも分かりやすく解説していきました。bodyタグ内の記述についてはサイトを作りながら何がこのサイトに必要なのかをその度に調べていくことが必要ですが、headタグ内の記述についてはコピペで済むことも多くなっていきます。まずはHTMLとは何なのかをその概要だけでも理解し、その後は使いながら疑問に感じたことを調べて、更なる理解を深めていきましょう。
