「headに入れる要素について」の編集履歴（バックアップ）一覧はこちら
headに入れる要素について - (2015/04/30 (木) 14:33:27) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
今回は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(検索エンジンのクローラーの制御)などの属性値がありますが、ここでは上の４つを解説します。
今回は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とはスマートフォンやタブレット端末などそれぞれ異なるデバイスで表示させた時の表示方法を指定する属性です。
