ブラウザに文字を表示させて、タグや要素の基礎の解説【HTML・CSS入門】

この記事では、ブラウザに文字を表示させて、HTMLの基礎について解説していきます。

コンテンツの転載は固くお断りいたします。

コードと結果

まずは、適当な場所にフォルダを作成して、その中に『main.html』というファイルを用意しましょう。そして『main.html』を適当なテキストエディターで開き、以下のコードを書き込んでみて下さい。


コードの保存が完了したら『main.html』のファイルを右クリックして適当なブラウザで開いてみて下さい。すると、以下のように表示されるはずです(以下の画像はSafariで開いたもので、ブラウザの種類によってフォントや文字の大きさ等が多少異なる場合があります)。

タグ

文書の構造化

HTMLの基本は『タグ』と呼ばれるもので、様々な種類のタグを使うことによって、ウェブページの文字列などを構造的に表現することが可能です。

構造的というのは例えばマンションをイメージしてみて下さい。1つのマンションの中にはいくつもの世帯ごとの部屋があり、その部屋の中にはリビング、寝室、トイレ、お風呂場などがありますね。

寝室の中にはベッドや衣類ケースが置かれているでしょうし、トイレには便器とトイレットペーパーなどがありますね。HTMLも似たようなイメージです。

タグの書き方

さて、タグについてですが、『<』と『>』で文字を囲むとそれがタグとなります。『<』と『>』はそれぞれ半角英数字です。

先程のコードでタグは『<html>』『<head>』『<body>』『<h1>』『<h2>』『<p>』などがありますね。タグは基本的に閉じるタグもあり、タグの中の文字列の前に『/』を加えると閉じるタグになります。例えば『</html>』や『</body>』などです。

タグは作成して閉じるまでが1つの要素となります。上のコードだと1〜17行目が『html要素』で、2〜6行目までが『head要素』7〜16行目までが『body要素』となっています。

htmlとheadとbody

基本的に、1つのHTMLファイルには『html』『head』『body』の3種類が1つずつ必要です。そして、『head』と『body』は『html要素』の中に配置する必要があります。

例えば、以下のような書き方はしてはいけません。


head要素

html要素の中には大きく分けて『head要素』と『body要素』があり、まずはhead要素の中には何を書いていくのか解説していきます。

head要素では、そのHTMLファイルの情報や設定値を記述します。例えば、HTMLファイルのタイトル、文字コードの種類などです。

他にも、ウェブ上に公開されるページであるならば、Google等の検索エンジンによって検索結果に表示するのを許可するのかどうかの設定も可能ですし、また、HTMLファイルに必要な外部ファイルの指定もできます。

body要素

body要素では主に、ウェブページとしてブラウザ上で描画される要素を記述していきます。

例えば、この記事のように複数の見出し、見出しと見出しの間に文章を書いたり、表示させる画像ファイルの指定をしたりします。

コードの解説

では、コードの簡単な解説です。

head要素

上のコードでhead要素の中には『metaタグ』と『titleタグ』の2種類のタグがありますね。metaタグはメタ情報を記述するためのタグです。

文字コード

HTMLファイルがどの文字コードで記述されているのかを指定するためには、以下のような書き方をします。


上のタグの構造を名前別に記すと以下のようになります。


要素名とはタグの名前のことで、タグの中には属性を記すことも出来ます。書き方は、上のコードの通りです。

最初に紹介したコードのhead要素の中には2つのmetaタグがあり、1つ目のmetaタグでは『charset』という属性を用意し、その値として『UTF-8』を指定しています。

『charset』は文字コードを指定するための属性で、一般的には『UTF-8』を指定すれば問題ないでしょう。

モバイル対応

以下の1行を加えることで、パソコンであってもスマートフォンであっても、文字等が同じような大きさで表示されるようになります。


もし、上の1行が無かった場合、スマホで見てみると以下のような表示になります(Chrome使用)。

文字が小さすぎて読めませんよね。では、上の1行を加えるとどうなるか、下の画像のようになります。

読みやすい文字の大きさになりましたね。このように、先程の1行を追加することで、どのデバイスでも適切な大きさでコンテンツを表示させることが可能です。

コードの説明はややこしくなるので、また別の記事で解説するとします。現在は、おまじないのようなものだと思って下さい。

タイトル

HTMLファイルをブラウザで表示した場合に、そのページタイトルを決めるには、以下のようにtitleタグを書きます。


最初で紹介した実行結果の画像にも表示されている通り、ブラウザのタブ部分に、titleタグで指定したタイトルが表示されていますね。

ブログ等で使用する場合は、その記事のタイトルをtitleタグで指定してあげると良いでしょう。ブログ自体のタイトルとはまた別です。

body要素

基本的なタグの使い方や種類は別の記事で解説するので、ここでは簡単に紹介だけしておきます。

hタグ

hから始まり、その後に1〜6の数字のどれかがくる場合、それはhタグで、見出しを作る際に使用します。h1が一番大きい見出しで、h6が一番小さい見出しです。


pタグ

pタグで囲うと、それが1つの段落となります。基本的に、段落と段落の間には1行分のスペースが入るようになっています。


改行やタブスペースは必要?

今までは開始タグや、タグを閉じた後に改行を入れたり、開始タグの前にタブスペースを入れたりしていましたが、以下のように1行でコードを書いても、問題なく表示されます。


下の画像は上のコードの表示結果。

このようにブラウザでの表示に問題はありませんが、コードの見やすさのために適度な改行やタブスペースはあった方が良いでしょう。