HTMLやCSSはホームページ作成などを考えた時には、理解しておかなければなりません。
この記事では、「HTMLのheadタグの書き方」について解説していきます。初心者の方はぜひ、参考にしてみてください。
HTMLについて基本を学ぶ headの記載内容と基本確認
HTMLとは、ウェブページの土台を作るための言語です。ウェブページに表示したい文章やウェブページの情報を独自のタグではさむことでHTMLを書いていきます。
head タグには、パソコンに教えてあげてたいことを書く
<!DOCTYPE html>
<html lang="ja">
<!-- これです -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>各項目が、パソコンに教えている内容を確認してましょう！
- <!DOCTYPE html> ＝ HTMLファイル形式
- <html lang=”ja”> ＝ 日本語サイト
- <meta charset=”UTF-8″> ＝ 文字コード
- <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> ＝ IEならEdgeで表示
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> ＝ 表示領域を端末や解像度に合わせた値を返す
かなりおおまかな解釈ですが、ここらへんを深く理解するのは、ある程度進んでからでいいので次にいきます。
<title> タグは、ブラウザのタグ表示される
ここは、ちゃんと設定することでユーザーさんが、複数のタブを開いている時に見つけやすくしてあげましょう！
これは、大切ですね！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- これです -->
<title>Document</title>
</head>
<body>
</body>
</html>head タグの中の title タグは分かりやすいようにするために、必ず入力するようにしましょう！
CSSファイルを読み込みする
htmlから外部ファイルを読み込みする時には、link タグを使います。htmlに、同じ階層にCSSファイルがあった場合の読み込みを設定してみましょう。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- これです -->
<link rel="stylesheet" href="./style.css">
</head>これで、style.cssファイルに書いたものが、htmlファイルに反映されるようになります。
body タグは本文を記載する
bodyタグは、メインエリアでたくさんの要素を使うことになりますね。ほとんどがここしか書かないですね。メインなのですが、メインとしか言いようがないので…
めっちゃタブは種類があるらしいですが、普段使うのは限られているので覚える必要はないです。
次に紹介するブロック要素とインライン要素が理解しないといけない、最初のハードルですね。今からしっかり覚えていきましょう。
インライン要素とブロック要素
インライン要素とブロック要素を覚えておかないと、何でこんな風に表示されるんだ！？って悩む時間が増えちゃいます。復習していきましょう！
代表的なインライン要素である、span タグをいくつか書いてみます。
<body>
<span>Hello！World！！！</span>
<span>Hello！World！！！</span>
<span>Hello！World！！！</span>
</body>これをWebブラウザで表示させると
インライン要素は、横並びにつながります。
ブロック要素の代表的な div タグについても確認してみましょう。
縦並びになりました！これが結構、ちゃんと理解しておかないといけないところです。
HTMLについて基本を復習しました！大切なのは、適切なタグを使うことですが、ホームページ作成でも使うタグは多くないとのことなので、概念だけ抑えておけばいいということでしょう！
コメント