【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・favicon.ico
こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い本日から学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていこうと思います。
なお私の今までの経歴は、大学病院の歯科衛生士→退職して独学でWordPressを学びサイト制作・運営→フリーランスの歯科衛生士ライターといったところです。そして今後の目標は以下の通り。
- プログラミング案件も受注できるようになりたい
- 歯科衛生士エンジニアを目指したい
- コーディングもライティングもできる歯科衛生士
ちなみに大学生のときプログラミングの講義があったのですが、再試・再履修になるほど苦手でした・・・。そのためプログラミングは敬遠していました。ただWordPressでサイト制作を行う際にはHTMLやCSSの知識が必要です。その度に調べまくって解決し、なんとか乗り越えてきました。今思えば、未経験で初日からいきなり現場に出されたような状態でしたね。
【プログラミング独学1日目】学んだこと
プログラミング学習に選んだのは、ドットインストールという無料サイトです。以前Progateでもプログラミング学習を試みたのですが、私には合っていませんでした。ドットインストールは画面を見ながら動画で説明してくれるサイト、Progateは実践形式で問題も解きながら進められるサイトで、いずれも基本的には無料です。今日はソフトの導入から、HTMLの基本まで学びました。
<img>
まず前提として、一番初めに表示させたいページは「index.html」という名を付けるのが一般的です。<h1>や<p>など、タグを使って意味付けすることを「マークアップする」と呼びます。
<img>タグはサイトに画像を表示させたいときに使用するタグです。例えば「taro.png」という画像ファイルがあったとします。これをサイトに表示させたいときは以下のようなHTMLになります。
<img src="taro.png">画像ファイルが「img」というフォルダ内に入っている場合
「taro.png」という画像ファイルが、「img」というフォルダ内に入っているときは以下のようなHTMLになります。
<img src="img/taro.png">「img/」が、「imgというフォルダの中の」ということを示してくれます。
画像の表示サイズを変更したいとき
画像サイズを120×120サイズで表示させたいときは、さらに書き加えて以下のようなHTMLになります。
<img src="img/taro.png" width="120" height="120">なおタグにオプションで書き加えていく部分を「属性」と呼び、タグの種類によって使用できる属性は異なります。
alt属性を使って代替テキストを割り当てておく
<img>タグを使用するとき（＝画像を表示させるとき）はalt属性を使って代替テキストを割り当てておくのが親切です。代替テキストとは、サイトで何らかのエラーにより画像が表示されなかったときに代わりに表示されるテキストのことです。今回の「taro.png」という画像に「太郎のアイコンです」という代替テキストを割り当てておきたいときは、以下のようなHTMLになります。
<img src="img/taro.png" width="120" height="120" alt="太郎のアイコンです"><!DOCTYPE html>・<html>
初心者に多いミスは、全角で文字を入力してしまうことによるエラーです。特に空白は半角・全角の見極めが難しいため、プログラミング用のフォントを導入しておくと良いでしょう。全角の空白が入力されると、半角と区別して表示してくれるからです。
なおHTMLの文書の先頭には以下のようなHTMLを入力し、「これはHTMLの文書ですよ」「これは日本語の文書ですよ」ということを明示します。
<!DOCTYPE html>
<html lang="ja">〜〜〜</html>HTMLで入力する文字は、大文字でも小文字でも問題ありません。ただ<!DOCUTYPE html>は大文字で表記するのが一般的です。lang属性で記載した「ja」は日本語（japanese）という意味です。
<html lang="ja">〜</html>の中には、<head>タグや<body>タグを使って追記していきます。つまり以下のような構成になります。
<!DOCTYPE html>
<html lang="ja">
<head>〜〜〜</head>
<body>〜〜〜</body>
</html>
<head>〜</head>
<head>タグは、その文書全体に関する情報を記載します。文書全体に関する情報とは、例えば以下のようなものが含まれます。
- サイト全体に適用する文字コード
- サイトのタイトル
- ブラウザのタブに表示させる画像
- 検索エンジンに表示させるサイトの説明
上記1つずつ解説します。
<meta>タグでサイト全体に適用する文字コードを指定
<head>タグの中に、以下のようなHTMLでサイト全体に使用する文字コードを指定します。
<meta charset="utf-8">以前はさまざまな文字コードの種類がありましたが、現在はutf-8に統一されつつあるためひとまず「utf-8」を記載しておきましょう。
<title>タグで文書全体（＝サイト）タイトルを指定
この文書全体のタイトルを、<title>タグで指定します。例えば「太郎のポートフォリオサイト」という名前をこの文書に付けたければ、以下のようなHTMLになります。
<title>太郎のポートフォリオサイト</title>なお<title>タグで指定したタイトルは、ブラウザのタブにも表示されます。
<link>タグでブラウザのタブに表示させるアイコンを指定
ブラウザのタブには<title>タグで指定したタイトルが表示されますが、その左にアイコンを表示させることもできます。これは<link>タグを使い、例えばアイコンに「icon」という名前を付け、そのファイル名が「favicon.ico」であった場合以下のようなHTMLになります。
<link rel="icon" href="favicon.ico">なおアイコンの画像ファイルは「favicon.ico」という少し特殊な形式である必要があります。そのためfavicon.ico専用のソフトを使って作成するか、普通の画像ファイルからfavicon.icoに変換させる必要があります。
<meta>タグで検索エンジンに表示させるサイトの説明を指定
自分で作ったサイトが検索エンジン上（Googleなど）に表示されたとき、サイトタイトルの下にサイトの説明が掲載されます。この説明文は<meta>タグとname属性、content属性を使って指定することができ、例えば「これは太郎のサイトです。」という説明文にしたければ以下のようなHTMLになります。
<meta name="description" content="これは太郎のサイトです。">
【プログラミング独学1日目】わからなかったこと・調べてわかったこと
学んだ中で疑問が残ったのは以下の部分でした。
- <meta>タグの意味
- rel属性の意味
- href属性の意味
- name属性の意味
属性の意味合いについては、タグの種類ごとの使用できる属性が一覧になっていればすっきりしそう、とも思いました。ひとまずわからなかったので自分で調べて結果をまとめます。
<meta>タグの意味
<meta>タグとは、記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報。
参考https://ferret-plus.com/13074
例えばSNSでシェアされたリンク（URL）のうち、リンク先の内容の表示されているもの＝<meta>タグに記載がされているもの、リンク先の内容が表示されておらずURLが記載されているだけのもの＝<meta>タグに記載がされていないものとなります。前者の方がわかりやすくユーザーに興味を持たれやすいため、クリックもされやすいですよね。
今日学んだ内容で<meta>タグが使われていたのは、以下の部分です。
- サイト全体に適用する文字コードを指定するとき
- 検索エンジンに表示されるサイトの説明を指定するとき
2つ目についてはなんとなくわかるのですが、「記事コンテンツの情報を検索エンジンやブラウザに伝えるため」と言われると、「じゃあ<head>タグ内は全部<meta>タグじゃだめなの？」と思ってしまいます。さらに調べると以下のようなことが書いてありました。
<meta>タグには、ページを作っている言語を指定したり、キーワード・説明などを記述したりする。これらの情報は、ブラウザがサイトを表示するときの言語・文字コード判別のために使われる。しかし検索エンジンのロボットも<meta>タグの情報を収集し、検索エンジン上の順位決定の参考にするためにも利用される。
参考https://webtan.impress.co.jp/g/meta%E3%82%BF%E3%82%B0
基本はサイトに関するキーワードや説明を記載するために<meta>タグを使用するが、検索エンジンに関わる部分でも使用されるという認識が良さそうですね。すっきりしました。
rel・href・name属性の意味
1つ1つが突然出てきてよくわからなかったのですが、それぞれを理解することにあまり意味は無いかな（タグとセットでHTMLの意味が発生するため）と思ったので、今日学んだタグの属性をまとめることにします。
タグごとの属性の種類一覧
よくわからなかったrel・href属性は<link>タグで出てきたもの、name属性は<meta>タグで出てきたものです。そのためひとまず<link>タグと<meta>タグの2つについて、使用できる属性を一覧でまとめました。
<link>タグに付随する属性
- rel：この文書から見たリンク先の関係
- rev：リンク先から見たこの文書の関係
- href：リンク先の指定
- charset：リンク先の文字コード
- hreflang：リンク先の基本言語
- type：リンク先のMIMEタイプ
- media：出力メディア
- target：リンク先の表示方法
<meta>タグに付随する属性
- content：プロパティ値の指定
- name：プロパティ名の指定
- http-equiv：プロパティ名の指定（HTTPヘッダ用）
- scheme：プロパティ値に関する追加情報
逆に他のタグでも例えばname属性って出てくるんですかね？出てきそうですね。ひとまず今日のまとめはこのあたりにしておきます。