Lesson02 -HTML
目次
はじめに
Lesson2は、これらの準備ができている状態でスタートしていきます。
- 1.AIアシスタント(Gemini)の起動
- 2.VS Codeのインストール
- 3.VS Codeを日本語化&拡張機能を入れる
- 4.「授業内使用データ」のダウンロード
- 5.PCの拡張子表示の設定
※準備がまだの方へ：PCが重くなるのを防ぐため、今は作業せず「講師の画面を見るだけ」にしてください。
準備や実作業は、講座終了後に録画を見ながら行いましょう!
Visual Studio Codeのインストール
①下記のページにアクセスしてMac or Windows版を選んでダウンロードします
https://code.visualstudio.com/download
②Finderの「ダウンロード」に保存されていることを確認してダブルクリック内容を読んで「同意する」にチェックしたあと「次へ」を押します
③「デスクトップ上にアイコンを作成する」にチェックを入れて「次へ」
④「インストール」をクリック
⑤「完了」をクリックするとソフトが開きます。
ショートカット （VSCode）
作業をより効率的にするために順番に覚えていきましょう！
| 内容 | Mac | Win |
| 環境設定 | ⌘ + , | Ctrl + , |
| 新規ファイル作成 | ⌘ + N | Ctrl + N |
| 新規作成（新しいファイルを開く場合） | ⌘ + shift + N | Ctrl + shift + N |
| 複数行のペースト | option + shift + ↓ | Alt + shift + ↓ |
| ファイルを開く | ⌘ + O | Ctrl + O |
| ソフトを終了する | ⌘ + Q | Ctrl+shift+w |
HTMLとは
インターネット上のWebサイトの画面を作るための言語です。
※HTMLのように、コンピューターに対する指示を書いた文章のことを「ソースコード」と呼びます。
例えば人間はチラシを見た時、文字の大きさや配置から自然と「ここがタイトルだな」「ここが本文だな」と判断できます。
しかし、コンピューターは文字の羅列だけでは意味を理解できません。
そこで、コンピューターに文章の役割を理解させるために「目印(タグ)」をつける作業を行う必要があり、それを「マークアップ」と呼びます。
文章の内容に合うタグをつけることでコンピューターがWebページを正確に理解できるようになります。
HTMLの基礎ルール
HTMLはWEBページ作成の土台！基礎ルールをしっかり身に付けましょう
タグについて
- ・<h1> のように <>で囲まれているのがタグ
- ・<h1>見出し</h1> のように 開始タグと終了タグがある
- ・終了タグには必ず先頭に「/」スラッシュ
- ・終了タグがないものもある
- ・<p>これは<strong>テキスト</strong>です</p> タグは入れ子にすることができる
そのほか
- ・タグにはさまざまな種類があり、それぞれのタグごとに役割が決まっている
- ・タグによってブラウザでの表示の仕方が異なる
- ・大きさや色、余白など見た目の部分はCSSで修正していく
HTMLの保存ルール
- ・.htmlの前は半角英数字、記号の場合は-（ハイフン）もしくは_（アンダーバー）のみ使用可
- ・全角文字や上記以外の記号、スペースの使用は不可です。
- ・index.htmlという名前をつけたページは、サーバーアップロード後トップページとして認識をされます
HTMLタグの種類
タグにはそれぞれ異なる役割があります
<head>
作成しているページの言語や、どのファイルを読み込ませるか、使用するフォントなど検索エンジンに必要な情報を書く範囲。
この中に情報を書いてもブラウザには表示反映されません。
<meta>
検索エンジンやブラウザに読んでもらうためのメタデータ（＝文書の中身ではなく、文書自体についての情報）を書くための範囲。
例として、検索結果のタイトル下に表示される説明文(ディスクリプションテキスト)や、作者名など、WEBサイトに関する情報を記述することができます。
<meta name="description" content="私たちはお客様のニーズに合わせた様々なソリューションをご提案いたします。">
<meta name="author" content="STUDIONNC">参考：metaタグの設定方法・種類をわかりやすく解説！【SEO最適化】
<title>
ブラウザ上で表示されるタイトルや、検索結果のタイトルとして表示される内容となります。
ブックマークを保存するときの名前にもなります。
<link>
例えばCSSやgoogleフォントなど、参照したいファイルを読み込ませるために使います。
<body>
ブラウザに表示させる内容を記述する箇所。WEBページとして表示させたい内容をこの中に全て記述する。
外に記述してもブラウザで反映される場合があるが、文法エラーなのでやらないようにしましょう
<h1>〜<h6>
見出しを表すタグで、数字が小さいほど重要度が高くなります。
<h1>はその文書の中で一番重要な内容なので、一つのHTMLの中で1つだけ書くのが原則。
<h2>〜<h6>は何度使ってもOKです。
また、必ず1〜6の数字の順番にタグを書きます。<h7><h8>…はありません
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<p>
文章の段落（＝Paragraph）を書くときに使うタグです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<ul>
順番が関係ない箇条書きのリストです（＝unordered-list）
代表的なのはWEBサイトのグローバルナビゲーションなど
ulの中身は<li>以外記述することはできません。（※<li>の中ならOK）
「ユーエルエルアイ」のセットで覚えましょう
| よい例 | わるい例（文法エラー） |
| <ul> <li>リストのなかみ1</li> <li>リストのなかみ2</li> </ul> | <ul> <p>これはテキストです</p> <li>リストのなかみ1</li> <li>リストのなかみ2</li> </ul> |
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<ol>
順番がある箇条書きのリストです（＝ordered-list）
<ul>と同様に中身は<li>のみ入れることができます。（※<li>の中ならOK）
「オーエルエルアイ」のセットで覚えましょう。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<dl>
用語やタイトルと、それを説明するための定義リストです。（＝definition-list）
例えば 原産国：イギリス お醤油：小さじ1 など
説明したい用語には<dt>、説明には<dd>タグを使います。
<dl>の中には<dt><dd>だけ書くことができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<a>
WEBページどうしをリンクさせるためのタグです。<a>タグのaはアンカー（＝船と港を繋げるイカリのこと）から来ていて、ひっかけるイメージ。
開始タグと終了タグの間にある要素にリンクを貼ることができます。
加えて、具体的にどこにリンクしたいのか＝リンク先を「href属性」で指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
リンク先の例
①同じページの一番上に戻る
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
②アプリの起動リンク
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
③外部サイトへリンクを貼る
※リンク先の設定に加え、開始タグ内に「target=”_blank” rel=”noopener noreferrer”」を入れることで別タブで開くことができます
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
④別のHTMLのリンクを貼る
※ファイルまでの道筋を表す「パス」を書いてリンクさせるファイルを指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
パスの考え方
1.index.htmlからlink.htmlにアクセスしたい
ファイルとファイルが同じ階層にいるため、ファイル名をそのまま記述
<a href=”link.html”>でlink.htmlにリンクする
2.index.htmlからlink.htmlにアクセスしたい
アクセスしたいファイルが1つ下の階層にいるため、「フォルダ名/ファイル名」でパスを記述
<a href=”sample/link.html”>でsampleフォルダ内のlink.htmlにリンクする
3.link.htmlからindex.htmlにアクセスしたい
アクセスしたいファイルが1つ上の階層にいるため、「../ファイル名」でパスを記述
<a href=”../index.html”>でlink.htmlからindex.htmlにリンクする
<img>
画像を挿入するためのタグです。ファイルの場所を指定する「src属性」に、具体的に表示させる画像のパスを記述します。
<img>タグ内に記述するので、終了タグはありません
「alt属性」は、src=””で指定した画像が読み込めなかったときに代わりに表示させるテキスト情報を指します。また、ブラウザが認識できる文字情報なので、SEOの観点から重要なキーワードを入れておくケースが多いです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
Lesson2のAI活用事例
リンクが上手く効かない、画像が表示されないといった何かしらの不具合が起こった場合はGeminiを活用しましょう。
ただし、答えを丸投げするのではなく「自己解決するためのヒント」をもらうのが成⻑のコツです。
プロンプト例：
以下のHTMLコードを書きましたが、画像が表示されません。
丸ごと修正したコードを出すのではなく、『どこが間違っているかのヒント』と『なぜ間違っているのかの解説』だけを教えてください。
[ここに自分の書いたコードをコピー&ペーストする]
参考リンク
・実はヤバい？aタグと別タブで開く（target=”_blank”）の使い方
https://wwg.co.jp/blog/3807#31
