最近、基本を学んでいます。Djangoを使いたくて、HTMLやCSSは、全く勉強せずにやってきましたが、ホームページ作成などを考えた時には、理解しておく方が、１００倍いい！と思い、現況を開始しました！
HTMLについて基本を学ぶ headの記載内容と基本確認
HTMLは、Webブラウザに表示をする内容を記載した階層型になっているファイルです。Djangoをやっていたのでここぐらいはわかるぞ！って思いながら教科書を読む。
head タグには、パソコンに教えてあげてたいことを書く
djangoでは、base.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について基本を復習しました！大切なのは、適切なタグを使うことですが、ホームページ作成でも使うタグは多くないとのことなので、概念だけ抑えておけばいいということでしょう！
コメント