神戸ホームページ制作プロ公式ブログ
6.202023
webデザイン用語「headタグ」を全部教えて！
こんにちは、ハナさん。WEBデザイナーになりたいという夢、素晴らしいですね！私、リュウがHeadタグについて説明しますね。
HeadタグはWEBページの情報を定義する部分で、index.htmlの最初に書かれる場所です。Headタグ内には、ページのタイトルやCSSファイルの読み込み情報、キーワード、ページ説明文、Google Analyticsのコードなどがあります。これらの情報は全て検索エンジンのクローラーに伝えることができます。
Headタグの使い方によって、ページの検索結果に表示される情報を最適化することができます。また、CSSファイルを読み込むことで、デザインのスタイルを定義することができます。Headタグはページの情報とデザインを定義する上で欠かせないタグとなります。
WEBページの基礎的な部分ですが、とても大切な部分となります。ハナさんのWEBデザイナーとしてのスキルアップに役立ててくださいね！
このブログは、webデザイナーになりたい女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。
webデザイン用語「headタグ」を全部教えて！
ハナ: リュウさん、headタグって何ですか？全部教えて！
リュウ: headタグはHTML文書内において、文書のヘッダー部分であることを示すタグです。例えば、ページタイトルやmeta情報、CSSファイルのインポート、JavaScriptファイルの読み込みなどを指定することができます。つまり、headタグはHTML文書の情報を管理する重要な役割を持っています。
何の役割を持つタグなの？
ハナ：リュウさん、<div>っていうタグってどんな役割があるの？
リュウ：ハナさん、<div>タグはHTMLにおいて、ブロックレベル要素の1つです。ブロックレベル要素は、段落や見出し、画像などのコンテンツを囲むために使われるタグで、可読性の向上やレスポンシブ対応を容易にする効果があります。
ハナ：え、そうなんだ！<div>ってすごいんだね！
リュウ：そうですね、<div>タグはとても便利なタグの1つです。今後のWEBデザイナー業においても、おそらくよく使うことになるかと思います。理解できたかな？
ハナ：うん！ありがとう、リュウさん！<div>タグって面白そうだから、今からもっと勉強してみるね！
リュウ：素晴らしいですね、ハナさん！<div>タグを使ったWEBデザインについて、もっと深く学ぶことで、より素晴らしいサイトを作ることができるようになるでしょう。頑張ってくださいね！
HTML文書のなかでの位置は？
ハナ: リュウさん、HTML文書のなかでの位置ってどこに書くんですか？
リュウ: ハナさん、HTML文書の中で位置を決めることができるのはCSSというスタイルシートの役割です。HTML文書では、文章や画像、動画などを含む要素を定義しますが、それらの要素に対してスタイルを適用するためにCSSを用います。例えば、<div>という要素にid属性を付けて、CSSでそのidに対して位置を指定することができます。わかりやすくいうと、お絵かき帳で各要素を描き、その場所にスタイルを追加するという感じです。理解できましたか？
基本構文に何が含まれるの？
ハナ:リュウさん、Webデザイナーになりたいんですけど、基本構文って何が含まれるんですか？
リュウ:それはね、Webサイトを作るときのルールみたいなものだよ。例えば、HTMLで言えば、タグの開始と終了が必要だったり、CSSで言えば、セレクターとプロパティが必要だったりするんだ。
ハナ:なるほど、ルールって大事ですよね！
リュウ:そうだね、ルールがあることで、たくさんの人が働いても、同じようなものが作れるし、利用者にとって使いやすくなるからね。
ハナ:わかりました！ルールがあることって、とっても大事なんですね。ありがとうございました！
リュウ:どういたしまして、ハナさん。Webデザイナーになるにはまだまだたくさん勉強が必要だけど、がんばっていこうね！
titleタグって何？
ハナ:リュウさん、titleタグって何ですか？
リュウ:ハナさん、titleタグというのは、ウェブページの一番上に表示されるタイトルのことです。例えば、ハナさんが好きなアニメのサイトを開いた時、一番上に「好きなアニメのサイト」というタイトルが表示されると思います。あの部分がtitleタグなんですよ。分かりますか？
metaタグって何？
ハナ:リュウさん、metaタグって何？
リュウ:おっしゃる通り、metaタグとはWebページの情報を記述するタグです。例えば、検索エンジンがWebサイトを検索する時に、metaタグに記述したキーワードや説明文が参考にされますよ。
ハナ:なるほど、metaタグはWebページの情報を説明するのね。具体的にどんな情報が記述されるの？
リュウ:そうですね。例えば、ページのタイトルや説明文、キーワード、作者名などがあります。これらの情報がmetaタグにしっかりと記述されていると、検索エンジンやユーザーから見ても分かりやすくなりますよ。
metaタグで指定できる属性は何？
ハナ: リュウさん、metaタグで指定できる属性は何ですか？
リュウ: そうですね、metaタグで指定できる属性はいくつもありますよ。例えば、”name”属性や”content”属性があります。”name”属性は情報の種類を表し、”content”属性はその情報の具体的な内容を表します。例えば、”name”属性に”keywords”、”content”属性に”トータルネットジャパン、web制作、SEO”といった具合です。分かりましたか？
charset属性って何するの？
ハナ：リュウさん、charset属性って何するの？
リュウ：ハナさん、charset属性とは、Webページの文字コードを定義する要素のことです。Webページを作る時、文字コードを指定することで、どの言語の文字を表示するかを決めることができますよ。
ハナ：文字コードって何？
リュウ：文字コードとは、文字をコンピュータが扱える2進数で表現するための符号化方式です。例えば、日本語の文字を表すためには、ShiftJISやUTF-8といった文字コードを使います。
ハナ：それで、charset属性っていつ使うの？
リュウ：charset属性は、HTMLのheadタグ内に書きます。Webページを表示するためのブラウザがどの文字コードを使って表示するかを知るために必要な要素なんですよ。
ハナ：なるほど！でも、文字コードってどうやって決めるの？
リュウ：文字コードは、Webページを作成する時にエディターやIDEなどで指定するか、サーバーの設定で決めることができます。一般的には、UTF-8を使うことが多いですよ。
viewport属性って何するの？
ハナ：リュウさん、viewport属性って何するの？
リュウ：viewport属性とは、ウェブサイトを閲覧するデバイスの画面サイズを指定するために使われます。例えば、スマホやタブレット、PCなど、それぞれの画面サイズに合わせてレイアウトを調整することが出来ますよ。
ハナ：えっ、そんな風にウェブサイトが変わるんですか？それってすごいことですね！
リュウ：そうですね、viewport属性を使うことで、ユーザーが快適な閲覧体験をすることが出来るようになるんです。
ハナ：すごく興味深いです！viewport属性ってどうやって設定するんですか？
リュウ：viewport属性はHTMLのheadタグ内にmetaタグとして記述します。具体的には、
“`<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>“`
という風に書きます。ここでは、デバイスの画面幅をデバイスの幅に合わせ、初期表示時の拡大率を1倍に設定しています。
“`<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>“`
という風に書きます。ここでは、デバイスの画面幅をデバイスの幅に合わせ、初期表示時の拡大率を1倍に設定しています。
ハナ：なるほど、そういう書き方なんですね！リュウさん、とても分かりやすい説明をありがとうございます！
リュウ：どういたしまして、ハナさん。いつでも質問があれば気軽に聞いてくださいね。
robots属性って何するの？
ハナ: リュウさん、robots属性って何するの？
リュウ: ああ、robots属性は、ウェブページ上のロボットやクローラーといった自動プログラムに対して、そのページのクロールの可否や情報の公開・非公開などを指示するコードです。
ハナ: クローラーって何ですか？
リュウ: クローラーは、ウェブ上の情報を収集するために、自動的にネット上を巡回するプログラムのことです。例えば、ある検索エンジンが、あなたが検索ワードを入力したとき、そのワードに対応するページをクロールすることで、検索結果を表示しているんですよ。
ハナ: なるほど！robots属性はロボットさんたちに通知するためのお知らせってことですね。
リュウ: そうです！クローラーには、ウェブページを検索して情報を得るというとっても便利な機能がある一方で、悪意のあるクローラーによってウェブページが荒らされることもあります。robots属性を使うことで、そのような不正行為を防ぐことができるんですよ。
description属性って何するの？
ハナ: リュウさん、description属性って何するの？
リュウ: description属性とは、ウェブページの検索エンジンでの表示や、SNSでのシェア時に表示される文章のことです。例えば、ツイッターでリンクをシェアすると、リンク先のサイトのタイトルやURLと一緒にこのdescription属性で設定した文章が表示されます。わかりやすく言うと、ウェブページの自己紹介のようなものです。
ハナ: なるほど、わかりました！ありがとうございます。
keywords属性って何するの？
ハナ:リュウさん、keywords属性って何するの？
リュウ:ハナさん、keywords属性は、ウェブサイトの検索エンジンに、このサイトがどんな内容を扱っているのかを教えるためのものです。例えば、もし「ハナさんのウェブサイトが野球に関する情報を扱っているなら」、keywords属性に「野球、情報、サイト」といった単語を入れておくことで、検索エンジンがそれを見て「このサイトは野球情報のサイトだな」と判断しやすくなるんですよ。分かりやすかったですか、ハナさん？
author属性って何するの？
ハナ：リュウさん、author属性って何するの？
リュウ：ああ、それはね、WEBページのコードに書くんだけど、どのページを作った人なのか、っていう情報を記録するためのものなんだよ。
例えば、あなたがWEBデザイナーになって、自分の作品をアップする時には、自分の名前を入れておくと、誰が作ったのか一目でわかって便利だよ。
例えば、あなたがWEBデザイナーになって、自分の作品をアップする時には、自分の名前を入れておくと、誰が作ったのか一目でわかって便利だよ。
generator属性って何するの？
ハナ:「generator属性って何するの？」って、リュウさん。教えてください！
リュウ:ああ、generator属性について知りたいんだね。generator属性は、Webページのソースコードを生成するための属性だよ。例えば、QRコードやバーコードを自動生成するときに使用することができるよ。子供さんに例えると、机で絵を描く前に書き方のガイドを描くようなものかな。理解できたかな、ハナさん？
referrer属性って何するの？
ハナ: リュウさん、referrer属性って何するの？
リュウ: へえ、referrer属性について知りたいんだね。referrer属性とは、ユーザーがどこからあなたのサイトにアクセスしてきたかを示す情報のことだよ。例えば、検索エンジンからのアクセスか、他のサイトからのリンクを辿ってきたかなど、アクセス経路の情報が得られるんだ。
ハナ: なるほど、それで、どういう風に使われるの？
リュウ: そうだね、例えば、アクセストラッキングのために使われたり、リファラースパム対策に使われたりするよ。また、より正確なアクセス解析を行うためにも、referrer属性が重要な情報となっているんだよ。
ogタグって何？
ハナ：リュウさん、ogタグって何？わかるかな？
リュウ：ogタグとは、Webページの中で使われるメタ情報を設定するためのタグのことだよ。メタ情報とは、例えばWebページのタイトルや説明文、画像などだね。
ハナ：メタ情報って何？例えばどんな情報があるの？
リュウ：例えば、Webページのタイトルは、そのページの内容を一言で表すものだよ。また、説明文は、検索エンジン上で表示される簡単な説明文だね。そして、ogタグを使えば、そのWebページがSNS上で共有された時に、タイトルや画像などがきれいに表示されるように設定することができるんだ。
ハナ：なるほど、そういうことなんだ。すごいね！リュウさん、教えてくれてありがとう。
ogタグで指定できる属性は何？
ハナ：リュウさん、ogタグで指定できる属性は何？
リュウ：ogタグで指定できる属性は、例えば「og:title」「og:description」「og:image」などがありますよ。これらは、Webページの情報をSNSなどで共有した際に、タイトルや説明、画像などを表示するために使われるものです。たとえば、おもちゃの箱におもちゃの名前や説明を書いておくように、Webページでも詳細な情報を提供することができます。分かりましたか？
Twitterカードって何？
ハナ：リュウさん、Twitterカードって何？
リュウ：ハナさん、Twitterカードとは、Twitterでリンクを投稿した時に表示される情報のことです。例えば、記事のタイトルや概要、画像などが表示されます。これによって、ユーザーにとって情報を理解しやすく配信できるようになりますよ。
ハナ：なるほど、Twitterで情報を見ている人に、わかりやすく伝えるための情報なんですね！
リュウ：その通りです。情報を伝えるときには、相手がどのような情報を必要としているかを考え、それに合わせて配信する必要があります。Twitterカードを活用することで、より効率的かつ分かりやすい情報の提供が可能となりますよ。
Twitterカードで指定できる属性は何？
ハナ:リュウさん、Twitterカードで指定できる属性って何なの？
リュウ:Twitterカードを設定すると、他のユーザーがあなたのサイトを共有した時に、大きな画像や文章を表示できるようになるんだよ。Twitterカードには、タイトルや説明文、画像などの属性を指定できるよ。
ハナ:なるほど、属性っていうのは、サイト情報を見せる要素のことなんですね。
リュウ:そうだね。Twitterカードの属性には、タイトル、説明文、サムネイル画像、URLなどがあります。それぞれ、Twitter上でどのように表示されるのかが決まっているんだよ。
ハナ:わかりました！サイトの情報を伝えるためにTwitterカードを設定して、他の人にも見てもらえるようにしたいです！
リュウ:それは素晴らしいね！Twitterカードの設定は、サイトをより多くの人に知ってもらうためにとても重要だよ。がんばってね！
headタグの書き方に注意すべきことは？
ハナ：リュウさん、headタグってどう書けばいいんですか？
リュウ：ハナさん、headタグはHTMLのページで<head>と</head>で囲まれた部分になります。その中にはページのタイトルや、CSSファイルの読み込み先、キーワードなどを記述します。大切なのは、ページ全体に影響を与えるため、必ずHTMLの先頭に記述することですよ。例えば、本のタイトルページに目次が載っていないことはないですよね？それと同じように、<head>タグも必ず書くことを心がけましょう。
