初心者のためのHTML入門
今回から、Webページを構成する基礎言語である、HTMLとCSSについて学んでいきます。
本記事では、そのうちのHTMLに関する基本的な知識・実際の記述例を解説します。
HTMLとは
HTMLはWebページの構成や文章に関わる部分です。
タイトル・本文といったWebページの構成を決めたり、文章を表示させたりします。
今読んでいる文章も、HTMLの上に書かれています。
名前の由来
HyperText Markup Language
名前の由来は以下です。
- HyperText：テキストを超えて＝複数の文書同士を関連付けて
- Markup ：目印を付ける
- Language：言語
分かりやすく言うと「Webページ内に目印をつける言語」です。
Markupと言われることもあります。
HTMLの役割：Webページの構造を指定する
正確には「Webページの論理構造」と言います。
そう言われてもピンと来ないと思うので一つずつ解説していきます。
Webページの構造とは、主に以下のものがあります。
- タイトル
- 見出し
- 文章
- 画像
- 箇条書きリスト
こうした各要素に対して、「これは見出しです」「これが本文です」といったことを指定するのがHTMLの役割です。
これが、「Markup＝目印を付ける」と言われる所以です。
HTMLの役割ではないこと
例えば
- 色を付ける
- フォントを変える
- レイアウトを決める
こうした見た目に関することは、CSSの役割になります。
紙の本で言うところの、文章の部分がHTML、レイアウトやカラーリングといったデザインの部分がCSSに当たります。
CSSについて詳しくはまた別の記事で解説します。
実際に触った方が分かりやすいと思うので、次は実際にHTMLを書いていきます。
簡単なWebページを作ってみよう
HTMLだけを使って、簡単なWebページを作成してみます。
フォルダを作成
フォルダを作らず、デスクトップ等に保存しても問題はないのですが、作っておいた方が後々の管理が楽です。
HTMLファイルを保存するためのフォルダを作ります。
名前は仮に「html_lesson」とします。
テキストエディタでHTMLファイルを作成・保存
- コードを入力する前にHTMLファイルとして保存することで、エディタがHTML文書と認識し、文法チェックを行ってくれます。
- ファイル名は必ず「○○.html」とします。
テキストエディタ（Atom）を起動します。
次に、以下のショートカットキーを押します。
- Windows：control＋s
- Mac：command＋s
すると以下のウィンドウが表示されるかと思います。
今回は「first.html」という名前で先ほどの「html_lesson」フォルダに入れました。
コードを入力する
いきなり？！って感じですが、テキストエディタに以下のコードを貼り付けます。
右上の「Copy」をクリックすると自動でコピーされます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メープルの国のアリス</title>
</head>
<body>
<h1>初心者のためのWeb製作入門</h1>
<p>Webページの基本となる言語、HTMLを書いてみました</p>
</body>
</html>ペーストしたら、「control(command)＋s」で上書き保存します。保存するときは、このショートカットキーで行うと楽です。
ブラウザで表示する
出来たファイルをブラウザにドラッグ＆ドロップします。
こんな画面が表示されていたら成功です！
正しく表示されない場合は訂正する
もし、正しく表示されない場合は、何らかの誤りがありますので訂正します。
訂正したら、必ず上書き保存します。
訂正したら、ブラウザに戻って をクリックし、リロードします。
この
- コードを記述
- ブラウザで確認
- 正しく表示されるまで1、2を繰り返す
というサイクルは、コーディングをしていく上での基本となっていきます。
文章を変える
次に、先ほど作成したファイルの、日本語の部分だけを変えてみます。
変えたら忘れずに上書き保存します。
好きな内容でOKです。仮にこんな風にしたとします。
変更が反映されたか、ブラウザで確認します。
無事、反映が確認できました。めでたし！
実践はこれで一旦置いておきます。
ここからは、HTMLの具体的な書き方について解説していきます。
HTMLの書式：「要素」の集まり
HTML文書は「要素＝Element」の集まりによってできています。
要素とは<>〜</>のことです。
具体的にはこんな感じです。
| 要素 | <>〜</>までのひとかたまり 「<title>ねこ</title>」で1つの要素です |
| タグ | <></>の部分 開始タグ・終了タグがある 「<title>」が開始タグ、 「</title>」が終了タグ |
| 要素名 | <>の中身 開始タグ・終了タグの要素名は同じ 「title」の部分 |
| 要素内容 | タグで囲まれた部分 「ねこ」の部分 |
HTMLの基本的な書式を一言で表すとしたら
「<></>で囲むこと」です。
そういえば、先ほどコピペした文書も、沢山の<></>で構成されていましたね💡
要素に属性をつける
ほとんどの<>要素</>には、<開始タグ>の部分に属性をつけることが可能です。
属性とはタグに追加情報を与えるものです。それによって、要素を区別したり、特別な機能を追加したりできます。
属性をつける際は、こんな風に記述します。
<html lang="ja">これはhtmlという要素に、日本語という属性をつけたものです。
langの部分を属性名、"ja"の部分を属性値と言います。
属性は基本的に「属性名="属性値"」と記述します。
属性にも色々な種類がありますが、少しずつ覚えていけば大丈夫です。
まとめ
<要素名 属性名="属性値"></要素名>要素の中に要素を入れる
要素の中に、要素内容として別の要素を入れることも可能です。
これを「入れ子構造」と言います。
こちらは、body要素の中にp要素を入れた一例です。
<body>
<p>Webページを作ろう</p>
</body>この場合、body要素を親要素、p要素を子要素と呼びます。
HTML文書の構成
まずは、先ほどのWebページを作った文書に戻ります。
上から順に見ていきましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メープルの国のアリス</title>
</head>
<body>
<h1>初心者のためのWeb製作入門</h1>
<p>Webページの基本となる言語、HTMLを書いてみました</p>
</body>
</html><!DOCTYPE html>
「これはHTML文書ですよ」という宣言です。
HTMLでは1番最初に必ずこの宣言を書きます。
html要素を設置
<html></html>タグを使って要素を設置します。これも、HTMLを書く際には不可欠です。
今回はhtml要素に、日本語の属性を設置しました。言語の属性は必須ではありませんが、あった方が便利です。
head要素
head要素の中には、そのWebページに関する様々な情報を書きます。
今回はメタ情報と、ブラウザのタブに表示されるタイトルを書いています。
メタ情報はとりあえずコピペで大丈夫です。
body要素
body要素の中には、実際にページを開いた際に画面上に表示される内容を書きます。
ページとして表示される内容は、全てbodyの中に記述します。
まとめ：HTMLの最低限の記述
ブラウザで閲覧できる、最低限のHTMLは以下です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブラウザタブに表示するタイトル</title>
</head>
<body>
<p>ここに本文</p>
</body>
</html>次に、body要素の中でよく使う要素を紹介していきます。
よく使う要素
段落 <p>
Paragraphのpです。
分かりやすい文章を書くには、文章全体を複数の段落に分けて記述します。
これは最も使われる要素です。
<p>これは段落です</p>見出し <h1〜h6>
文章を読みやすくするには、見出しも大切な要素です。
H1が1番大きな見出し、H6が1番小さな見出しです。
画像 <img>
img要素では、画像を挿入できます。
挿入できるファイルの種類はJPEG、PNG、GIFです。
リンク <a>
Anchor（錨⚓️）のaです。
<a href="リンク先のURL"></a>と記述します。
例えばこんな感じです。
上のコードは、このように書かれています。
<a href="https://yuhostyles.com/">サイトのトップページへ</a>リスト <ul><li>、<ol><li>
箇条書きのリストを作成できます。
<ul><li>でドット、リスト <ol><li>で番号付きのリストが作成できます。
- りんご
- みかん
- バナナ
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>- りんご
- みかん
- バナナ
<ol>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ol>改行<br>
改行にはbrを使います。改行したい文章と文章の間に入れるだけです。
終了タグは必要ありません。
りんご
みかん
バナナ
<p>
りんご<br>
みかん<br>
バナナ
</p>
よく使う属性：idとclass
次に、代表的な属性である、idとclassについてです。
id属性、class属性は、共にすべての要素に指定することができます。
そうした属性のことをグローバル属性と言います。
id属性
id属性は、要素にid名を付けて他の要素と区別するために使います。
HTML文書中で1つの要素のみに使用することができます。
記述例
<要素名 id="属性値"></要素名>class属性
class属性は、要素にクラス名を付けて分類するために使います。
id属性とは異なり、同じクラス名を複数の要素に指定することができます。
<要素名 class="属性値1 属性値2"></要素名>CSSの優先度の違い
idはclassよりも、CSSが適応される優先度が高くなります。
コメント＝自分用メモの書き方
HTMLを書いていて、後で分かるようにメモを残したい時があるかと思います。
そんな時はメモの部分を「<!–メモ–>」で囲みます。こんな感じです。
<!–この中の部分はコードとして認識されません–>
このメモのことをコメントと言います。
こうすることで、ブラウザには反映されず、テキストエディタ内だけでメモを残すことができます。
注意点：全角スペースは入れない
コードとして認識されるのは、半角英数字だけです。
そのため、誤って全角スペースを入れてしまうと構文エラーとなってしまうので注意です⚠️
最後に
以上！お疲れ様でした。
これでHTMLの基礎知識は終了です。
次の記事ではCSSの基礎を書いていきます。