職場の上司がやばいやつで、みんな辞めてしまって…私も辞めてなにか他の仕事をしようと思うのですが、簡単に出来る仕事、ありませんか？
｝₍ᐢ⓿ᴥ⓿*ᐢ₎
₍^⩌ᴥ⩌^₎｛
そんなものはない
じゃあ簡単じゃない方法はあるの？
｝\₍ᐢ⓿ᴥ⓿;ᐢ₎
₍^;⩌ᴥ⩌^₎｛
お金になるか分からないけどホームページでもつくる？
なるほど！そこで有名になって、上手いこと復讐するんだね！
｝\₍ᐢ⓿ᴥ⓿;ᐢ₎
₍^;⩌ᴥ⩌^₎｛
それは難しいんじゃないかな。
でも、有名になれれば、広告収入で生活するぐらいは出来るかも？
最近はAIが台頭してきたから難しい思うけど…
それじゃあやってみようかな！
｝\₍ᐢ⓿ᴥ⓿*ᐢ₎
₍^⩌ᴥ⩌^₎｛
まずはHTMLからやっていこう。
HTMLってなんですか？
｝\₍ᐢ⓿ᴥ⓿*ᐢ₎
₍^⩌ᴥ⩌^₎｛
HTMLとはHyper Text Markup Languageの略でWebページを作成するために必要なマークアップ言語のことだよ。
って聞いてもよくわからないだろうからとりあえず作ってみたらいいよ。
必要なソフトとかは『VS code』とかいろいろあるけど、詳しい人がまとめてるからそのサイト見てみようか。
まじかよ...教えてくれないんか。
ちょっと準備がんばってきます。
｝₍ᐢ⓿ᴥ⓿;ᐢ₎
₍*^⩌ᴥ⩌^₎｛
がんばれ～
いってきました…
全然わからなくて辛かった。
｝₍ᐢ⓿ᴥ⓿;ᐢ₎
₍*^⩌ᴥ⩌^₎｛
じゃあ始めようか
基本的なHTMLのドキュメント構造はこんな感じだよ
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>このページのタイトル</title>
</head>
<body>
<h1>見出し１</h1>
<p>これは段落テキストです。</p>
<a href="url">リンク先のテキスト</a>
</body>
</html>
₍*^⩌ᴥ⩌^₎｛
説明していくね
₍*^⩌ᴥ⩌^₎｛
まずは一番上の<!DOCTYPE html>
これは、これから書くコードが『HTML5』であるって定義しているんだ。
₍*^⩌ᴥ⩌^₎｛
次は<html lang="jp">;
これから作るページの言語がが日本語であるということを宣言しているよ。
₍*^⩌ᴥ⩌^₎｛
<head>
メタ情報やスタイルシート、スクリプトでこのページのタイトルや文字の設定、使うファイルとか全体の基本設定を含ませる部分だね
₍*^⩌ᴥ⩌^₎｛
<meta charset="UTF-8">
HTMLの文字エンコーディングを指定するよ。今回はUTF-8を文字エンコーディングだ。UTF-8は殆どの文字に対応しているUnicodeのエンコーディングだよ。
₍*^⩌ᴥ⩌^₎｛
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="...">は、メタデータの種類を指定するよ。
よく使われるname属性はこれ
ー ページ内検索に関する簡単な説明 ー
<meta name="description" content="このページではHTMLについて説明しています。">
『description』は検索エンジンがこの情報を使って、検索結果に表示するページの説明として表示することがあります。
この説明が的確で魅力的であれば、ユーザーがそのリンクをクリックする可能性が高まります。
ー ページに関連するキーワード ー
<meta name="Keywords">
『keyword』ページに関連するキーワードの設定
最近は検索エンジンでそれほど重視されなという話も…
ー ページの作成者 ー
<meta name="author" content="たぬき と すなぎつね">
『author』は誰が作ったページなのかの情報です。
ー ページ内検索に関する簡単な説明 ー
<meta name="viewport" content="widh=device-width,initial-scale=1.0">
『viewport』はモバイルデバイスでの表示を適切にするための設定を指定
₍*^⩌ᴥ⩌^₎｛
<meta name="..."> のタグは、Webページに関する追加情報を提供し、検索エンジンの最適化（SEO）やソーシャルメディアでの有事に役立つよ。
このメタデータを適切に設定することで、ページの評価が変わるので最小限だけではなく他のメタデータも手を抜かずに設定しよう
わかりました。ページ説明か…。
｝₍ᐢ⓿ᴥ⓿;ᐢ₎
₍*^⩌ᴥ⩌^₎｛
次は『<title>このページのタイトル</title>』の説明だよ。
ページのタイトルで、通常はブラウザのタブやウインドウのタイトルバーに表示されるよ。
検索エンジンの検索結果として使われることもあるので、適当に設定しないようにしよう。
ポイントは分かりやすく簡潔に適切なキーワードを含むことでSEO（検索エンジン最適化）にいい影響があるんだ。
おしゃれなロゴとかが必要？
｝₍ᐢ⓿ᴥ⓿*ᐢ₎
₍*^⩌ᴥ⩌^₎｛
その辺はあとで
₍*^⩌ᴥ⩌^₎｛
次は『<body></body>』
これはページの内容部分か入るタグだよ
₍*^⩌ᴥ⩌^₎｛
『h1』『p』『a』はそこに書いてあるままだね。
<a href=""<</a<の説明もう少し欲しいです！
｝₍ᐢ⓿ᴥ⓿*ᐢ₎
₍*^⩌ᴥ⩌^₎｛
この辺説明するのめんどくさくて…やりながら覚えたらいいよ
仕方ない、使うときに聞くか。
｝₍ᐢ⓿ᴥ⓿*ᐢ₎