[45-1] metaで基本情報を指定しよう

最終更新日:-0001年11月30日  (初回投稿日:2012年08月09日)

今回から <meta>要素 です。
今回は<meta>要素の4つの「属性」と、それを使って「何ができるか」を先にまとめときましょう。
次回から1つずつ属性を使っていきましょう。

使用する要素 <meta>
使用する属性 charset属性、name属性、http-equiv属性、content属性

<meta>要素は、HTML文書の基本情報 (メタデータといいます) を指定するための要素。
今までやってきたメタデータ・コンテンツ(<title><base><link><style><script>)も同じくメタデータを指定するためのものですけど。
ハッキリ言って<meta>要素は、今まで出てきたヤツで指定できないメタデータを扱う要素です。
でもけっこう重要っていうか、サイトを作るとき必ず使う要素です。

<meta>要素は、空(カラ)要素(中に何も書かない要素)。
ですので終了タグを書きません。こういうのは他に<base><link>がありましたね。

<meta charset="UTF-8">

<meta>要素は<head>内に書きます

そして<meta>要素は、4つの属性のうちの「charset属性」「name属性」「http-equiv属性」の3つのどれか1つが必要。「属性」を使って色々な指定をする。
だから属性なしで使う事はありえないってわけです。
また「charset属性」「name属性」「http-equiv属性」は1つだけしか<meta>要素に入れられません。複数の属性を使うなら<meta>要素を複数書くってことですよ。

<meta>要素はこんなことを指定します

<meta>要素で指定できることは、例えば…
文字コード(shift_JISとかUTF-8など)を指定する。→文字化け防止に効果。
★サイトの概要(紹介文)を書く。→検索エンジンでの検索結果で表示されます。
★著作者の名前を書く。→会社の場合は企業名ですけどね。
★優先スタイルシートを指定。→<link>や<style>と連動させて読み込むCSSを指定できます。
★ページの再読み込みを指定できます。→別のページを指定する事もできます。

以前は、検索用のキーワードや検索ロボットのクロールの指定なども、<meta>要素でやっていましたが、時代の流れ(?)で淘汰されていったようです。みんなで検索ワードを書きまくったせいでね…。
主言語コード指定(日本語だったら ja とか)なども、以前は <meta>要素で指定していましたが、HTML5からはシンプルに、
<html lang="ja">でできるようになりました。詳しくは「 [3] !DOCTYPE宣言をしよう」をご覧ください。

<meta>要素の4つの属性について

<meta>要素の属性は、
「charset属性」「name属性」「http-equiv属性」「content属性」の4つ。

●charset属性は、文字コードを指定する属性です。
この「charset属性」は、HTML5から単独で使えるようになりました。

<meta charset="UTF-8">

↑このサンプルは、文字コードを「Shift_JIS」に指定しています。

●name属性は、HTML文書の情報の種類を指定。情報の内容は「content属性」で指定します。
ですから必ず「content属性」とペアで使います。

<meta name="description" content="ココに紹介文などの文章をいれます">

↑このサンプルは、このHTML(このサイト)の紹介文を指定。検索結果で表示される文章です。

●http-equiv属性は、HTML文書の動作や状態を指定します。これも指定値は「content属性」で指定しますので、必ず「content属性」とペアで使います。

<meta http-equiv="refresh" content="10">

↑このサンプルは、10秒おきにページを再読み込みする指定です。

●content属性は、もうきっとたぶん、分かってると思いますが「name属性」か「http-equiv属性」と必ずペアで使います。単独では使えませ〜ん。

<meta>要素と4つの属性の使い方 まとめ

●1つの<meta>要素に「charset属性」「name属性」「http-equiv属性」のうちどれか1つだけ。
(= 属性を3つとも使うんだったら<meta>要素も3本書こう)
●そのうち「name属性」「http-equiv属性」を使ったら「content属性」が必ずペア。

で、こんな感じで、<head>内に複数の<meta>要素が入っているのが普通です。

<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="author" content="著作者">
<meta name="description" content="紹介文">
<meta http-equiv="default-style" content="main" >
<link rel="stylesheet" href="css/top.css" type="text/css" title="main">
<link rel="stylesheet" href="css/2nd.css" type="text/css" title="2nd">
</head>

次回予告

次回は<meta>要素の「charset属性」を使ってみましょう。
これは、Shift_JIS とか UTF-8 などの「文字コード」を指定する属性です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.