今回は「HTML」を書く際に必ず必要になる、「定義」と「メタタグ」に関する記事です。基本中の基本とも言っていいくらいの内容になっていますので、webデザインを学び始めた初心者の方に向けて書きたいと思います。
この記事でわかること
- HTMLの書き方、大枠
- HTMLにおける定義とはなにか
- メタタグとは何か、どのように使うのか
HTML、CSSの構成・概観
はじめに、HTMLは「タグ」で構成されています。もともとHTMLやPHPやJavascriptといったプログラミング言語とは、人間がコンピュータに「こういう動きをしてね」という指示を与える言語です。HTMLの場合には、「タグ」を使うことで、コンピューターへ指示内容を理解させることができます。
人間の指示をコンピュータに伝える
では「コンピューターへ指示内容を理解させる」とはどういうことかというと、次の画像を見てください。(クラクラしたらすみません笑)
これは僕のプロフィールサイトのソースコードなのですが、左側に<html>とか<head>みたいな文字列が並んでいます。この画像内の青文字になっている部分が「タグ」というものに当たります。では、これがどのような役割をすることでコンピュータが指示内容を理解できるのか？それは、「意味付け」という働きによるものです。
「タグ」には「意味付け」という役割があるから、人間の指示がコンピューターに伝わる。
といったイメージでしょうか。
実は、コンピュータは<html>とか<head>、<meta>のような「タグ」の意味を理解しているのです。
<html>と書かれていれば、コンピュータは「これがあるところはHTMLの言語で書かれているんだな」という具合に理解します。同様に、
<head>なら「この部分は歳との基本設定が書かれているところなんだな」
<meta>なら「この部分はページに関する情報だな」
<title>なら「この部分はページのタイトルなんだな」
<link>なら「この部分はこのファイルの外部にある別ファイルを読み込むためのリンクなんだな」
<body>なら「この部分はサイトを実際に表示する部分なんだな」
という具合です。
上記の通り、<body>タグの中身が実際に目に見えている部分です。つまり、サイトを閲覧している人が見ているものは<body>タグの中身である、ということです。
構成・外観
それでは、HTMLやCSSがどのように構成されているかを見ていきましょう。まず、下記をご覧ください。
これは、コードエディタでHTMLを作成するときに最低限必要となる情報です。これらが何を意味しているかというと、
<!doctype html> ・・・「以下の内容はHTMLですよ」というdoctype宣言。決まり文句で、必ず書きます。
<html> ・・・「ここからHTMLがはじまります」
<head> ・・・「このサイトの基本的な情報がある部分です」
<meta> ・・・「具体的な情報です」
<title> ・・・「このサイトの名前です」
<body> ・・・「サイトの内容(見える部分のコンテンツ)です」
また、</body>のようにスラッシュが頭につくものがありますね。これは、「閉じタグ」といって、タグの意味が効果を持つ範囲の終わりの部分を示します。つまり、
</title> ・・・「タイトルはここまでです」
</body> ・・・「サイトの内容はここまでです」
</html> ・・・「HTMLはここまでです」
というような意味合いです。
文章だけが並んでいると気づきにくいのですが、タグは「入れ子構造」になって記述されています。上記の画像を一度図に表すと、
このようになります。
こう見ると、<meta>には閉じタグがないですね。このように、タグによっては閉じタグを必要としないものもあります。また、この範囲が正しく指定されていないと、コードとして間違っていることになり、コンピュータが理解できないため正しく表示できません。
このポイントを押さえておくことで、後々コードを書くときにどの項目をどこに配置したらいいかが分かるようになってきます。
定義とは
プログラムを書くとき、コードエディタまたはテキストエディタには「宣言」というものを書きます。上記のdoctype宣言のように、「ここからの範囲は〇〇です」というようにコンピュータに指示します。その宣言したものの中に、具体的な中身を入れていくことを、「定義」といいます。
言い換えると、宣言の中に「意味を持たせる」ということになります。doctype宣言をしたファイル内に、<html>や<head>などのタグを設置すると、それはその範囲に意味を持たせることになり、定義をしているということになります。
定義をしながら書く
HTMLを書くにあたって僕が大切にしていることは、「このタグでこのように定義をしたから、ここの中身にはこういう内容を入れる」という意識をすることです。そのように意識をしながら書くことで、だんだんどんなものを書けばよいのかということが学習できるようになります。
タグというのは何百種類もあるので、それだけ定義できることの種類は多くなります。何回もコードを書くうちに、どの定義にはどの内容を入れるべきか、どの定義にはどの変数を入れるべきか、が分かってきます。
要素と属性
HTMLを書く上で基本となることに、「要素」と「属性」があります。先ほどの「タグ」との違いは何でしょうか？
「タグ」とは、その定義の開始と終了を示す< >で囲まれた文字列です。
「要素」とはその具体的な内容です。つまり、<html>と</html>は「htmlタグ」といえるし、中身の”html”は「html要素」であるといえます。
同じように、<title>を例にして画像にすると、
このようになります。「タグ」は中身をもって囲っているもの、「要素」はタグの種類、ととらえるといいかもしれませんね。
では、「属性」とは何か。例えば、こちらの画像
<meta>タグの中に、charset(キャラクターセット)という文字列があります。これが、「属性」という項目です。「属性」は「要素」の次に記述するもので、特定の意味合いの「属性値」を設定するためのものです。
属性もタグと同じように無数に種類が存在するもので、それぞれ定義に合わせて「タグ(とその要素)」、「属性」を選んで使います。
ちなみにcharset属性は、文字コードを指定するための属性です。画像では、utf-8という属性値が設定されていますね。どういうことかというと、charset属性とは文字コードを指定するための属性で、ここでは”utf-8″という文字コードが指定されています。
では、これを指定して何になるのか？というと、このファイルで作成したwebサイトでは、”utf-8”というルールに乗っ取って文字を表示しますよ、ということを意味します。utf-8は国際的にもよく使われているルールなので、HTMLをはじめいろいろな仕組みの中で出てきます。
メタタグとは
次に、メタタグについて紹介します。
メタタグとは、基本的に<head>タグの中に書くサイトの設定に関する項目です。実際には、
<!doctype>
<html>
<head>
<meta ～～～～～～・・・>
<meta ～～～～～～・・・>
・・(略)・・
</head>
<body>
(目に見える部分)
・・(略)・・
</body>
……
</html>
このような位置に記述します。
繰り返しですが、</head>などの閉じタグは、タグの種類によってあったりなかったりです。<head>タグや<body>タグには閉じタグがありますが、<meta>タグには閉じタグがありません。
では、そんなメタタグではどんな設定ができるかというと、たとえば次の通りです。
・言語ルールの設定(UTF-8など)
・ビューポートの設定。スマホページを最適化するもの。画面の広さをどうするか、拡大・縮小を可能にするか、など
・ページの説明文の設定。
・OGPの設定。SNSに引用された時の表示をどうするか
・noindex設定。不要なページなどを検索結果にヒットさせない。
・http-equiv設定。ブラウザに対する文書の状態を指示できる。日本語サイトであることの指示など。
・リダイレクト設定。サイトのリンクの設定。
・キーワード設定
・サイトの作者名の設定
・generator設定。サイトに使ったツールなど
などです。これら以外にもいくつかありますが、中には古いhtmlのバージョンでは使えない設定なども含まれているため、できるだけ新しいバージョンを使うのがいいでしょう。2022年2月7日現在では、HTML5、CSS3が最新版です。
主要な設定
ここからは、メタタグの主要な設定と、そのやり方をいくつかあげたいと思います。
文字コード設定
まず、上記の画像にも登場した文字コード設定です。いろいろな記述方法がありますが、例えば
<meta charset=”utf-8″>
これがシンプルな書き方です。ほぼ呪文のようにこれを書く場合もあると思います。
では、もしこれを書かなかった場合どうなるでしょうか？
もしこの設定を書かなかった場合、条件によっては「文字化け」が起こります。迷惑メールなどで、たまに意味の分からない文字が並んでいるメールが来ることがあるかと思います。あれが文字化けです。
文字コードのルールを守らなかった場合、コンピュータが文字を認識できずにこのように表示されてしまう、というわけです。ルールはしっかりと定義してあげましょう。
上記画像は、文字化けテスターをつかいました。
viewport設定
つぎにviewport設定です。これはスマホやタブレット用のページを作るときに必要になる設定です。記述方法は、
<meta name = “viewport” content = “width = device-width, initial-scale=1, user-scalable=yes”>
例えばこんな感じです。最初にname=”viewport”にすると、contentという属性が読み込まれ、次にcontentで指定した属性値が読み込まれます。contentの中身は、「,」(カンマ)で区切って複数指定することができます。では、contentの中身は何なのかというと、
width = device-width ・・・スマホ幅に合わせて表示してね、指定します。最近ではiPhone、Androidともにいろいろな種類のモデルが出ていますが、それぞれ横幅の大きさが違いますね。そのため、width(サイトの横幅の長さ) = device-width(端末の横幅の長さ)としておくことで、どのスマホやタブレットで見たときも、見ている端末に合わせて表示することができます。
initial-scale=1 ・・・これは表示する倍率です。＝1なら1倍、つまり等倍で表示します。具体的な大きさの指定は、ブラウザのデフォルト設定や、読み込むCSSで設定します。
user-scalable=yes ・・・これはサイトを見ている人が拡大縮小をしたときに、それに合わせてサイトの大きさを変えるかどうかの設定です。yesにしておけば例えば2本の指を広げるように動作した時には拡大、逆なら縮小、というような挙動をします。
OGP設定
最後にOGPの設定です。現在は広くSNSが普及しており、webサイトをSNS上で拡散することも容易にできるようになりました。例えば、TwitterやラインにwebサイトのURLを張り付けたとき、このような表示を見かけることがあると思います。
このように、「画像+説明文」で表示をすることで、クリックしたURLの先がどんなサイトなのかを想像できます。ここの画像を目を惹くものに設定したり、説明文やタイトルを響きのいいキャッチコピーにすることで、webサイトに閲覧者を集めやすくすることができます。近年話題になっている「web3.0」という概念では、こうしたSNSとの連携が重要になっています。
これのやり方は、
<meta name=”description” content=”(サイトの説明文)”>
<meta property=”og:title” content=”(表示させたいサイトのタイトル)”/＞
<meta property=”og:site_name” content=”(表示させたいサイトの名前。og:titleと同じでも可)”＞
<meta property=”og:type” content=”(そのサイトの種類。TOPページならwebsite、記事やブログページならarticleなど)”＞
<meta property=”og:image” content=”(画像があるディレクトリ)”>
・・・など
Twitter：
<meta name=”twitter:card” content=”(カードの種類)” />
カードタイプは4種類から選ぶことができ、“summary”、“summary_large_image”、“app”、“player” のどれか1つを選んで指定することができます。Twitterのカード設定については、あらかじめog:imageやog:titleを設定したうえで記述しましょう。
このように設定します。
別記事でOGP設定とどのように表示されるかをまとめたものを書きたいと思います。
まとめ
今回は、HTMLの基本情報として「定義」「メタタグ」について紹介いたしました。少しでも皆様に情報共有できていれば嬉しいです。
また、わからない箇所や専門用語も多く出てきたかと思います。僕の場合は、少しでもわからなかったらスグにgoogleで調べる癖をつけています。英語の勉強の時に単語帳を開く感覚にちかいです。また、SNSで僕やIT関連の情報発信をしている方に質問を送ってみるのも一つの手段かと思います。SNS時代、これを使わない手はないでしょう。
長くなりましたが、今回もご精読ありがとうございました！
コメント