「headに入れる要素について」の編集履歴（バックアップ）一覧に戻る
headに入れる要素について - (2015/04/30 (木) 16:03:22) のソース
今回はheadに入れる要素について説明していきます。~
headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。~
headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。まらメタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。~
<head>
<meta charset="utf-8">
<title>サンブル</title>
<link rel="stylesheet" href="○○.css">
</head>
これが恐らく最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。~
ここから<meta name>について話を進めていきます。
name属性は名前を付与して内容をcontentで示す。
と覚えておきましょう。この二つは必ずセットになります。それでは具体例をあげてみます。
1<meta name="author" content="nicepaper">
2<meta name="description" content="headに入れる要素について解説したページです。">
3<meta name="keywords" content="head,meta,メタデータ">
4<meta name="viewport" content="OO">
この他にもapplication-name(文章がwebアプリケーションを使っている場合にそのアプリケーションの名前を記述)、generator(文章がソフトウェアによって作成されている場合にそのソフトウェア名を記述)、robots(検索エンジンのクローラーの制御)などの属性値がありますが、ここでは上の４つを解説します。~
まず１はその名の通りそのページの著者について書き記します。2行目は検索結果と同時に表示される説明文に表示させる内容です。~
３は検索する時のキーワードです。~
１～３についてはまたSEO対策などについてのページで詳しく書いていきたいと思っています。~
4についてはここで詳しく見ていきます。viewportとはスマートフォンやタブレット端末などそれぞれ異なるデバイスで表示させた時の表示方法を指定する属性です。
<meta name="viewport" content="height=device-height">
<meta name="viewport" content="width=device-width">
と指定するとページの縦横がそのデバイスに合わせた形で表示されるようになります。
<meta name="viewport" content="initial-scale=1.0">
これは初期値のページの拡大縮小倍率を指定しています。例えば1.5なら1.5倍拡大されて表示され0.5などのように縮小も指定できます。~
この他にはminimum-scaleやmaximum-scale(ユーザが拡大縮小できる倍率を指定できる)、user-scalable(ユーザーが拡大縮小する事を許可するかどうか、初期値ではyes)などがあります。
具体例
<meta name="viewport" content="minimum-scale=0.5, maximum-scale=1.5">
<meta name="viewport" content="user-scalable=no">
さてここまでは<meta name>について話を進めてきました。ここからは<meta http-equiv>について話していきます。同じメタでも少しさっきまでと違う話になります。
http-equivもname同様にcontentとひとつのセットになっています。
http-equivにも様々な属性値があるみたいなのですが、web上で割と非推奨してる方が多い属性値があるのでここでは
<meta http-eqiuv="refresh" content="30">
<meta http-eqiuv="refresh" content="30; URL=○○">
の2つのみ具体例を挙げて説明します。
これはそれぞれ、30秒後に更新、30秒後に指定URLの先に飛ぶ事を意味しています。
これはいろいろなホームページでたまに見かける設定ですね。
野球のスコアを携帯で確認するwebサイトなどで30秒おきに更新されたりするページがあります。
それに使われてる仕組みなのかなーとか思います。(違ったらすみません笑)
次にlink要素について話します。
linkには2つの属性値を指定できます。
link href="○○"
link rel="stylesheet"
一行目はリンク先のURLを張り付けてリンクさせます。
二行目のrelは現在の文章からみたリンク先がどのような位置づけなのかについて示しています。
例えば二行目はリンク先をスタイルシートとして指定しています。
stylesheet以外にはあまり使わないみたいですが、ここに他にどのようなものがあるのか書いておきます。
alternate、authot、help、icon、license、next、prefetch、prev、search
<link rel="stylesheet" link href="○○.css">
といったように記述します。
