【備忘録】ドット はじめてのHTML

VSCodeにおいてよく使うショートカット

・範囲選択内のコピー移動(上下)
範囲選択＋「option+上下の矢印キー」

・範囲選択内の字下げを戻すやり方
範囲選択+「shiftキー+tabキー」

・範囲選択内の行のコピー(上下に)
ざっと範囲選択+「shift+option+上下の矢印キー」

・範囲選択内のコメントアウト or コメントの解除(HTML,CSS両方で)
ざっと範囲選択＋「command+/」

番外編
・ロック画面にしてキーボードを思い切り拭くコツ。(誤作動を心配しなくて良い)
「command+control+Q」
全てがロック画面になり、誤作動を気にせずキーボードを拭ける。

ーーー

*1
03 タグでマークアップしてみよう より

マークアップする

というのは、
「テキストを開始タグと終了タグで意味づけしていくこと」

*2
04 imgタグで画像を表示しよう より

画像を配置する場合

imgタグを使う
imgタグは終了タグが無いことを覚えておく。

img src=“ここにファイル名を指定してあげる(階層も含む)”>

とする。

例)
imgフォルダの中のtaro.pngを使いたい場合、

imgの開始タグ src=“img/taro.png”>

とする。

※フォルダの区切りには「/(スラッシュ)」を使う点にも注意しておく

*3
04 imgタグで画像を表示しよう より

imgタグで配置した画像のサイズを調整する場合、

画像のファイル名の後に、直接サイズを書き込む{width(幅)とheight(高さ)で}

例)
画像サイズをwidth(幅)=120、height(高さ)=120にする場合

imgの開始タグ src=“img/taro.png” width=“120” height=“120”>

*4
04 imgタグで画像を表示しよう より

タグにつけるオプション情報=「タグの属性」と読んだりする
※タグ毎に、使える属性が決まっている

*5
04 imgタグで画像を表示しよう より

imgタグには、alt属性を付けておくと親切。

alt属性とは、画像が上手く表示されなかった場合の「代替テキスト」の為、丁寧に設定しておくと良い。

例)今回のalt属性は、「太郎のアイコンです」としておく

imgの開始タグ src=“img/taro.png” width=“120” height=“120” alt=“太郎のアイコンです”>

*6
04 imgタグで画像を表示しよう より

HTMLで使う、<>やimgやsrcなどのタグや属性名は、大文字でも小文字でもオッケーだが、今回は基本的に小文字で統一する。

05 全角文字に気をつけよう より
逆に、半角と全角の違いには気をつけること。(全角文字、全角空白など)

必ず「半角文字、半角空白」を書くこと。
※全角文字で書いたり、全角空白を使うと、不等号記号がタグとして認識されなかったり、srcのsが全角のｓで書いた場合、画像は表示されなかったりする。

*7
06 文書全体につけるタグを見ていこう より

headタグやbodyタグは、「htmlの中にあるよ」ということを、
「字下げ」(スペースキーやtabキーで)して、
わかりやすく書いてあげると良い。
※範囲選択後、「Shiftキー+tabキー」で一気に字下げ可能。

尚、
文書自体に関する情報→headタグ、
文書の本文→bodyタグ、

で、囲ってあげる必要がある。

*8
07 文書に関する情報を設定しよう より

Chromeでは、favicon.icoというファイルがあれば、自動的にタブのアイコンにしてくれたりもするが、意図的にアイコンを表示させる為のタグを書く場合

linkタグを使ってheadタグ内に書く。rel属性をiconとして、faviconのファイル名はhref属性に指定してあげる。

linkの開始タグ rel=“icon” href=“ここにfaviconのファイル名を書く(階層も含めて)”>

例)
今回は、favicon.icoのファイルが、index.htmlと同じ階層にある為、
href属性には、そのままfavicon.icoと書けば良い。

titleの開始タグ>太郎のポートフォリオサイト<titleの終了タグ
linkの開始タグ rel=“icon” href=“favicon.ico”>

尚、
.icoの形式のファイルの作り方は、少し特殊な為、
「favicon 作り方」などで検索して調べてみると良い。

*9
07 文書に関する情報を設定しよう より

文書の説明を加える場合、

metaタグを使う。

name属性をdescription、そして説明自体は、content属性に書いてあげればオッケー。

例)文書の説明に、太郎のポートフォリオサイトです、と加える場合、

metaの開始タグ name=“description” content=“太郎のポートフォリオサイトです”>

とする。

尚、content属性に書いた説明は、将来的にこちらのページをインターネットに公開した場合に、検索エンジンが、説明用の文章として使うこともある為、丁寧に書いておくと良い。

*10
07 文書に関する情報を設定しよう より

字下げを戻す場合、

該当箇所をざっと範囲選択して、
「Shiftキー+tabキー」
で一気に字下げを戻せる。

尚、
字下げを戻したことを戻すには、

「command+Z」 or 「Shiftキー+tabキー」

で可能。(一応念のため)

*11
08 文書の本文を書き込んでいこう より

見出しは、headingタグ(h1やh2など)を使うが、
重要度に応じて、h1、h2、h3、・・・と付けていくと良い。

*12
08 文書の本文を書き込んでいこう より
マークアップをしていく際に、
「空行」入れると見やすいので、適宜入れていくと良い。

*13
08 文書の本文を書き込んでいこう より

作品の紹介には、pタグで書いてあげればオッケー。

*14
09 コメントタグを使ってみよう より

コピーライト表示を書く場合、

pタグでマークアップすると良い。(pタグで書くと良い。)

*14
09 コメントタグを使ってみよう より

HTMLのコード内にメモ書きを入れるには、

でテキストを囲うと、ブラウザには表示されないメモ書きとして使うことができる。

例)

これらを「コメント」という。

尚、コメントはブラウザ上では表示されないが、

ブラウザ上で、
右クリック→「ページのソースを表示」をクリック
すると見れる。

なので、人に知られたら困る機密情報などは、HTMLのコメントには書かないようにする。

ーーー

*1
10 header､footerタグを使ってみよう より

bodyタグ内のずらずらと並んだテキストを意味のある塊でまとめるには、

HTML内には大まかな区切りを表す為のタグが用意されている
・文書のヘッダー的な要素(画像や名前(サイトの名前含む)、ロゴ、メニューなど)には→headerタグ

・フッター的な要素(会社名、メニュー、コピーライト表記、サイトマップなど)→footerタグ

※headerタグとheadタグは混同されやすいがので、きちんと区別する。
・headタグ→文書全体に対する情報を入れるためのもの

・headerタグ→bodyタグの中で使うヘッダー的な要素を入れるためのもの

★★
※headerタグやfooterタグは、文書構造によっては、
一つの文書の中に複数書くこともある。
★★

例)

bodyの開始タグ>
headerの開始タグ>←ココ！①
ページヘッダー（サイトタイトル、メニューなど）
navの開始タグ>
サイトメニュー
/navの終了タグ>
/headerの終了タグ>

mainの開始タグ>
    記事などのメインコンテンツ
    articleの開始タグ>
        headerの開始タグ>←ココ！①
            記事ヘッダー
        /headerの終了タグ>←ココ！①
        記事本文
        footerの開始タグ>←ココ！②
            記事フッター
        /footerの終了タグ>←ココ！②
    /articleの終了タグ>
/mainの終了タグ>

asideの開始タグ>
    サイドバーなどのメイン以外のコンテンツ
/asideの終了タグ>

footerの開始タグ>←ココ！②
    ページフッター（メニュー、コピーライトなど）
/footerの終了タグ>←ココ！②

/bodyの終了タグ>

ーーー

*2
11 sectionタグを使ってみよう より

作品紹介用のタグは用意されていない為、汎用的に使えるsctionタグを使う。

汎用的に使えるセクショニング(区間分け)の為のタグ
・section(具体的な要素がないものに使うことが多い)
・article
・aside
・nav
など

sectionタグについてのMDNサイト
https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

※
必ずではないが、通常はセクションには見出しがある

例)
sectionの開始タグ>
h2の開始タグ>Introduction←ココ！(見出し)
pの開始タグ>People have been catching fish for food since before recorded history… /pの終了タグ>
/sectionの終了タグ>

★★
secton要素は、address要素の子孫要素として配置してはならない
★★

*3
見出しタグは、それぞれの区切り内で相対的な順序であれば良いので、
それぞれのsectionの中で、「一番重要な見出し」という意味で、
既にマークアップ済みの以下の見出しをh1に変えても良い。

h2→h1
h3→h1

ーーー

*1
12 ulタグでリストを表現してみよう より

HTMLを書く時は、あくまで文書の意味を考えて、適切なタグで囲うことが求められる。

例)
imgの開始タグ src=“img/blog.png” width=“20” height=“20” alt”ブログサイトへのリンク画像です”>
imgの開始タグ src=“img/photos.png” width=“20” height=“20” alt”写真サイトへのリンク画像です”>

今回の横並びになっているアイコンだが、
リンクの一覧と考えられるので、
リストを表すタグでマークアップしてあげる。

見た目を調整する方法は後で見ていくが、この時点ではきちんと文書の意味に適したタグを使うこと。

ーーー
ulタグを使う。
※ul = unordered listの略。順番のないリスト = 箇条書きリスト を表す。

ーーー
liタグを使う。
※list itemの略。リストの項目を表すために用いられる。
その項目が属する、olタグ(順序付きリスト)、ulタグ(順序なしリスト)、menuタグ(メニュー)のいずれかの子要素として配置する必要がある。

尚、直後に別の 

 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。

liタグの終了タグの省略の例)

   <ul>
    <li>
      <img〜>
    (</liタグ>)←この終了タグを省略可能。
    <li>
      <img〜>
    (</li>)←この終了タグを省略可能。
  </ul>

つまり、こうできる。

   <ul>
    <li><img〜>
    <li><img〜>
  </ul>

ーーー
①imgタグでマークアップした２つのアイコンを、リストの中身として、ulタグの中に移動する。
②そのうえで、それぞれの項目をliタグで囲う。(２つとも)

  <ul>
    <li>
      <img src="img/blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です">
    </li>
    <li>
      <img src="img/photos.png" width="20" height="20" alt="写真サイトへのリンク画像です">
    </li>
  </ul>

↓これでも可。↓

ulの開始タグ>
liの開始タグ>imgの開始タグ src="img/blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です">
liの開始タグ>imgの開始タグ src="img/photos.png" width="20" height="20" alt="写真サイトへのリンク画像です">

ーーー

*1
リンク画像にリンクを貼る場合、

リンクは、anchorという意味で、aタグを使う。

今回は画像にリンクを貼りたいので、imgタグをaタグで囲う。

リンク先を設定するには、
aタグにhref属性で設定可能。

例)
aの開始タグ href="https://dotinstall.com">

○○

aの終了タグ>

ーーー
リンクに飛ばす際に別タブで開かせたい場合は、
target属性で「アンダーバーblank」を追加する。

例)https://dotinstall.com に飛ばして、別タブで開かせたい場合、

aの開始タグ href=”//dotinstall.com” target=“アンダーバーblank”>

○○

aの終了タグ>

ーーー

HTMLのタグの親要素/子要素の関係で、不安に感じたら
「調べたいタグ　mdn」でググると良い。

例「li　mdn」で検索

見るべき項目
・許可されている内容
・許可されている親要素
など

※mdnのサイトは、HTML、CSS、JavaScriptなどをまとめたサイト。
言語の使用を調べる際に、最も信頼できるサイト。
何か困ったことがあれば、まずは調べるようすると良い。

マークアップは一例でしかない為、あまり細かいことは気にせず、慣れないうちは、どんどんいろんなサイトを作って経験を積むのが良い。

参考サイト：
https://dotinstall.com/lessons/basic_html_v5/49814

ーーー