「headに入れる要素について」の編集履歴（バックアップ）一覧はこちら
headに入れる要素について - (2015/05/03 (日) 19:28:51) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
今回はheadに入れる要素について説明していきます。~
headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。~
headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。また、メタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。~
<head>
<meta charset="utf-8">
<title>サンブル</title>
<link rel="stylesheet" href="○○.css">
</head>
これが最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。~
*meta要素
ここから<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">
といったように記述します。
*JavaScript
クライアント側で動く動的なサイトを作る場合に使います。クライアント側で動くものというと、例えば、5秒置きにトップの画像がフェードしながら変わっていくものや、その他にスマートフォンやPCサイトなどで、「あと15件表示」などという場合のボタンに使われたりします。ブラウザの機能でONに常にされていますが、セキュリティ上OFFにすることもできます。（あまりそのような人はいませんが。）このJavaScriptのコードを書く場合、「0から書いていくもの」と「JQuery」というJavaScriptライブラリーというものを使って書く2通りが主にあります。
***JQueryの呼び出し方
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
このように記述すると、jsというフォルダにあるjquery-1.3.2.min.jsのファイルを読み込みます。
今回はheadに入れる要素について説明していきます。~
headはとても重要性が高いにも関わらず目に見える形でページに反映されないのでとてもわかりづらいです。そこで少しずつわかりやすく解説していきたいと思います。~
headとはtitleやmeta要素などで構成されており、基本的にはtitleは必須です。また、メタデータ(文字コードや検索結果と同時に表示される文章説明、キーワードなどのそのページに関する情報)の集合です。~
<head>
<meta charset="utf-8">
<title>サンブル</title>
<link rel="stylesheet" href="○○.css">
</head>
これが最も簡単な形のheadでしょう。二行目の部分、meta charsetは文字コードを指定しています。~
*meta要素
ここから<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">
といったように記述します。
*script要素
JavaScriptというプログラムを使ってクライアント側で動く動的なサイトを作る場合に使います。クライアント側で動くものというと、例えば、5秒置きにトップの画像がフェードしながら変わっていくものや、その他にスマートフォンやPCサイトなどで、「あと15件表示」などという場合のボタンに使われたりします。ブラウザの機能でONに常にされていますが、セキュリティ上OFFにすることもできます。（あまりそのような人はいませんが・・・）このJavaScriptのコードを書く場合、「0から書いていくもの」と「JQuery」というJavaScriptライブラリーというものを使って書く2通りが主にあります。
***JQueryの呼び出し方
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
このように記述すると、jsというフォルダにあるjquery-1.3.2.min.jsのファイルを読み込みます。
