HTML5要素を1つずつ > メタデータ・コンテンツ > link要素

Body press
愛読書、現場のワークフローで覚える　Webサイト制作教室 – MdN Design Interactive　で、Webの勉強をガリガリとしている最中です3日目。

メタデータ・コンテンツとは

引用 : Webサイト制作教室 P90より
おもに<head>内に書き、実際にはページ上に表示されない要素です。

とのこと。要素の種類としては以下。

base
command
link　← 今日はココです
meta
noscript
script
style
title

とりあえずコピペなんかで何となしに使用してましたが、やはり記述するということはその行為に意味があるから。と気づきました。

link 要素とは

参考サイト　遊びとお勉強の村さん

http://www.playstudy.net/blog/develop/html5-linkrel.html

HTML5のリンクタイプ（link rel）種類 | 遊びとお勉強の村

link要素とは、head要素の中に書き込む要素です。私は主にCSSのファイル(スタイルシート)を読み込むときくらいしか使用してませんでした。
私の勉強不足でそれしか使っていなかったのですが、調べてみると結構便利な使い方ができる要素のようです。
まとめてみます。

まずは基本　”stylesheet”

[html]

[/html]

href属性で適用するスタイルシートのファイルを指定します。HTML5では　type=”style/css”　は省略してもOKとのこと。

もし複数のCSSを指定する場合は、<link rel=”stylesheet”　〜　>　を複数行記載します。

[html]

[/html]

上から順にスタイルシートが適用されます。後に読み込みしたCSSが優先されるので、順番を間違えるとエラいことになりますので注意

[css]

/* 例) 上記の並びでCSSを指定した場合 */
// style.css ファイルの記述
h2 {
color: red;
font-size: 32px;
}
// page.css ファイルの記述
h2 {
color: blue;
}

[/css]

この場合、style.css で指定した　color: red　は上書きされてしまい、後の page.cssでの　color: blue　になってしまいます。
フォントのサイズは上書きされていないので、　font-size: 32px　のまま適用されます。

例) これは上記のCSSが適用されたh2要素です

また、WordPressの場合はhref=”<?php bloginfo(‘stylesheet_url’); ?>”を記述すると、各ページで適切な記載にしてくれます。
この場合、必ずファイル名を style.css にしないといけません。

ワンポイントおしゃれ　”icon”

このサイトでも使用してます！実は。

Menubar

コレがあるサイトと無いサイトではちょっと印象が変わってくると個人的に思ってます。お洒落はまず足元からです。

ここに表示されているアイコンはファビコンと呼ばれてます。ファビコンは専用の画像ファイルを用意して、指定してあげると表示されます。

ファビコン専用ファイルは普通の画像から作れます。オススメはコチラです
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
カンタンに作れますよ。詳細はリンク先を参照してください。

ファイルを容易したら、あとは指定するだけです。

[html]

[/html]

また、WordPressの場合はコチラの記事が参考になります。

RSSのファビコン設定方法＆うまくいかず四苦八苦した件。 | norirow’s Diary

WordPressを使っている方はコチラの記事の方法をまんまやってみるとうまくいくと思います。うちもまんまやってみてます。ありがたいです。

RSS配信用？　alternate

いままでのHTMLでは正式にRSSやAtomのフィードがあるよ。という指定をする要素はなかったようです。で、HTML5でこの要素にその存在を入れられるようになったとのことです。

が、元来の意味合いとしては　「代替え文書を指す」　とのこと。RSSなどのフィードがありますよ、という指定をするのは若干意味合いが異なるのかもしれません。
ただ、WordPress側でもこの要素にフィードの情報を入れ込んでいますので、この使い方がデフォになっていくのかもしれません。私は流されるまま WordPressさんのおもむくままに従ってみようと思いますｗ

WordPress(3.3.2)では、下記の手順で自動的に head内に記載してくれます。
<head> 〜 </head>内に <?php wp_head(); ?> を記述
↓
functions.php内に
add_theme_support( ‘automatic-feed-links’ );
を記述する
↓
プラグインでfeed_linksのフックを削除するものを使ってないか

ちなみにそれを行った前回の記事のHTMLコードです。
[html]

[/html]

今まで知らなかったのは、WordPressさんに任せっきりだったからですね。任せっきりにしすぎもアレなので今回知れてよかったですわｗ

その他の要素もいろいろあります

[html]

<!– archives –>
<link rel="archives" title="HTML5のページ" href="http://logic-a.com/wp/html5_page.html">
<!– 現在のページ(記事)と関連しているリンク –>

<!– author –>
<link rel="author" title="dutchisoverのTwitter" href="https://twitter.com/#!/dutchisover">
<!– サイト作成者が分かるリンク先　Twitterなんかでもよいかもとのこと –>

<!– first、last、prev、next、up –>
<link rel="first" title="Hello World!　ブログ始めました" href="http://logic-a.com/wp/2012/04/14/hello_world/">
<!– 最初の記事、最後の記事、前の記事、次の記事、上の階層の記事(今の記事ならカテゴリーの "HTML・CSS" –>

[/html]

などなど。他にも a要素で使用するような nofollow、external、license や pingback などでピンを受け取るサーバの指定云々・・・

また使用する機会があれば追記しています。

以上でした！