※このページはアフィリ広告を含みます。
₍^⩌ᴥ⩌^₎
今日はHTMLの基本的なコードを学びましょう
₍ᐢ⓿ᴥ⓿ᐢ₎
基礎は大事
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
今回はいつもでやる気が続くだろうか
₍^⩌ᴥ⩌^₎
まずはファイルの作成から
メモ帳みたいなテキストエディエタで編集もできるけど、HTML用に作製したファイルで編集するよ
₍^⩌ᴥ⩌^₎
HTMLファイルは拡張子を.htmlにして保存すると、HTMLのコードを書く用のファイルが作製されるよ
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
がんばりましたね
わからないことは、エネルギーつかうよね
₍^⩌ᴥ⩌^₎
次はHTMLのコードについてだよ
₍^⩌ᴥ⩌^₎
まずはこれをみてください
<div>内容</div>
₍ᐢ⓿ᴥ⓿ᐢ₎
はい
₍^⩌ᴥ⩌^₎
<div>の『div』は要素名で、役割を示していて
<div>は『開始タグ』で/の入る</div>は終了タグ
<div>内容</div>をまとめて『要素』というよ
₍^⩌ᴥ⩌^₎
要素の中には、終了タグがないのもあって。例えば、画像を掲載するimg要素は終了タグがないよ
₍^⩌ᴥ⩌^₎
つぎは属性の説明
₍^⩌ᴥ⩌^₎
<div class="attribute">内容</div>
classが属性名でattributeが属性値、この２つをまとめて属性というよ
このほかに属性名も属性値もいろいろ種類があるよ
₍^⩌ᴥ⩌^₎
この要素と属性を並べていくとWedサイトのHTMLになるんだ
₍^⩌ᴥ⩌^₎
要素は一応100以上の種類があって、カテゴリー別に７つに分類されているんだけど
全部おぼえるのは大変なので、『今はそんな分類があるんだ』くらいに聞いてて
₍^⩌ᴥ⩌^₎
メタデータコンテンツ
base、link、script、style、titleなど
HTMLの文書の情報をあらわす
₍^⩌ᴥ⩌^₎
セクショニングコンテンツ
aritcle、aside、nav、section
文章の章とか節みたいな、範囲的、グループ
₍^⩌ᴥ⩌^₎
ヘディングコンテンツ
h1、h2、h3、h4、h5、h6
見出し
₍^⩌ᴥ⩌^₎
フローコンテンツ
a,aside,br,button,cite,date,div,em,footer,from,h1~h6,header,img,input,link,main,nav,section,script,.....など
だいたい全部だね。特定の条件がないものはここに分類されるよ
areaはmapにlinkbodyの中に書かれているとか、特定条件を満たすとここに含まれる。
₍^⩌ᴥ⩌^₎
フレージングコンテンツ
a,br,button,img,link,script,rubyなど
文章の一部になるようなのが含まれるよ
₍^⩌ᴥ⩌^₎
エンベディットコンテンツ
audio,canvas,iframe,img,abject,picture,videoなど
画像とか音楽とか動画とかのカテゴリー
₍^⩌ᴥ⩌^₎
インタラクティブコンテンツ
a,audio,button,img,input,slect,videoなど
双方向な要素が含まれるよ
結構条件いろいろがある
₍^⩌ᴥ⩌^₎
綺麗に７つに分かれているなんてことは全然なくて、被ってる部分がたくさんあるから覚えようと思ったら大変だね
₍^⩌ᴥ⩌^₎
HTMLはこの基本的な要素だけでもWebブラウザでは表示されるんだけど、手紙とかみたいに書き方みたいのがあるからそれを覚えてよう
ショートカットで入力できたりするから暗記する必要はないけど、色々不便だから覚えてね
₍^⩌ᴥ⩌^₎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<main></main>
<footer></fooger>
</body>
</html>
₍^⩌ᴥ⩌^₎
このコードに必要なものを足していくとWedページのHTMLが完成する
₍^⩌ᴥ⩌^₎
HTMLにはメモを残すこともできるんだ
₍^⩌ᴥ⩌^₎
メモの代わりや指示などを記載するときに<!-- -->で囲うことでコメントを残すことができるんだ
₍^⩌ᴥ⩌^₎
それを使うと
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<main>
<!-- ここに内容がはいります -->
</main>
<footer></fooger>
</body>
</html>
₍^⩌ᴥ⩌^₎
青文字の部分みたいに、メモとして残してもWebページには範囲されないんだ
₍^⩌ᴥ⩌^₎
でも、Webページからコードを確認するツールもあるので、たとえ表示されなても、みられて困ることは書かないようにしてね
₍^⩌ᴥ⩌^₎
ほかにも
<!-- ---------- -->みたいに、記号だけ使って仕切り線の代わりにしたりもできて便利₍^⩌ᴥ⩌^₎
『Ctrl + /』でカーソルがある行をコメントに替えることができるから、一時的に非表示にしたいときとかにも使ってね
₍^⩌ᴥ⩌^₎
次は『id』と『class』について
₍^⩌ᴥ⩌^₎
『id』は<div id="id"></div>のようには開始タグのなかに属性として書くんだ
属性名は『id』、属性値は任意で適当なものを入力してね
₍^⩌ᴥ⩌^₎
idの属性値は１つのHTML文書に１箇所だけ設定できて、複数箇所に同じ属性値を指定できない。
ということを、覚えておいてね
₍^⩌ᴥ⩌^₎
『class』も書き方は同じで、開始タグに書くんだけど、『id』と違って同じ属性値を持ったclassを複数個所に使用することができるんだ。
同じclassを持つ要素をまとめて指定してデザインなんかを編集することができるので、とりあえず要素にはclassを設定しておくと役立つことがあるよ。
₍^⩌ᴥ⩌^₎
あと『class』は同じ要素に何個でも書くことができるよ
₍^⩌ᴥ⩌^₎
<div class="red blue green">のように、半角スペースで区切ればOK
₍^⩌ᴥ⩌^₎
<div id="id" class="red blue green">のように、両方設定することもできる
₍^⩌ᴥ⩌^₎
全部吹き出し風にしてたら見にくいったらないね 笑
₍^⩌ᴥ⩌^₎
ではhead内の説明をはじめるよ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>このページのタイトル</title>
<meta name="description" content="このサイトやページの説明">
</head>
<body>
<header></header>
<main></main>
<footer></fooger>
</body>
</html>
ー title要素 ー
₍^⩌ᴥ⩌^₎
title要素に追加したテキストかページのタブに表示されよ。
他にも検索エンジンの検索結果ページに一覧表示されるので、見てもらえるページを作るために適切なタイトルを付けるようにしましょう。
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎
₍^⩌ᴥ⩌^₎