You are here: Home » html関係 » 今の時代に合わせてhtml、head、bodyの中に書くもの

今の時代に合わせてhtml、head、bodyの中に書くもの

html.head,body

<html~/html>

html文書の中には、

<html>
<head></head>
<body></body>
</html> で必ず文書の構造を決めます。

 

<html>を最初に書いて</html>を最後に書きます。その中に<head>~</head>を書いて、<body>~</body>を書きます。

スポンサーリンク

<head>~</head>の中に書く記述

<head>~</head>の中には<meta>で検索エンジン向けのキーワードや説明

<title>~</title>でサイトのタイトル

<link />か@import url()でcss等 その文書に関する情報を記述して呼び出したりします。

また、<!doctype>以外は必ず<html>~</html>の中に入れる決まりです。

なので、<head>~</head>に記述するものは<title>~</title>以外画面に表示されません。

 

こんな感じでさまざまを情報を<head>~</head>の中に入れることができます。

 

例えば上の記述にある

 

これは、いわゆるスマホサイトに対応させる記述です。

viewportとは表示領域のことで指定した幅で適せつに表示する方法のひとつです。

その記述方法が <meta name=”viewport” content=” ” /> このcontent=” “の中にスマホ対応サイトの記述をするのですが、

 

width=表示領域の幅

表示領域の指定です。ディスプレイの種類が多くあるので、device-width (画面の幅に合わせる)と指定し、自動的に幅を合わせます。

他には数値で合わせる方法もあります。ピクセル=200~10000 の範囲、初期値は 980です。

 

initial-scale= 初期のズーム倍率  (minimum-scale~maximum-scale の範囲)

ウェブページを表示したときの拡大率です。1.0を指定することで、iOS 5 以前のバグが避けられるようですが、今はios5を使ってる人は少ないので、書かなくてもいいかもしれません。

 

user-scalable=ズームの操作

コンテンツの拡大・縮小の操作を許可するかしないかの指定です。 yesで許可 (初期値)noで拒否です。

 

minimum-scale=最小倍率

コンテンツを縮小できる範囲を0~10 の範囲で指定できます。初期値は 0.25

 

maximum-scale=最大倍率

コンテンツを拡大できる範囲を 0~10 の倍率の範囲で指定できます。初期値は 1.6

 

なので最新の領域指定は、

これが良いのかもしれません。

 

また、

X-UA-Compatibleについて

は、<meta>の中にhttp-equiv=”X-UA-Compatible”この記述をすることで、ieでどのバージョンでレンダリングするか指定できます。

ieは結構厄介な機能があり、その代表的なものが、過去のブラウザバージョンにする互換モード(cssを正しく読み込めなくなる。)です。基本が標準モードなのですが、なにかの間違いで互換モードになってしまう事もあるので、そうしないようにするために

http-equiv=”X-UA-Compatible” この記述をします。さらにcontent=”IE=edge” を記述することで、win10の新ブラウザedgeを指定することもできます。

過去に content=”IE=edge,chrome=1″ この記述でGoogle ChromeのJavaScriptとレンダリングエンジンを動かすためのieのプラグインChrome Frameを表示させることができたのですが、Chrome Frameは開発とサポートやめたので今は content=”IE=edge” これだけで大丈夫です。

 

注意点は、<title>や<meta>以外のcssやjsなどの外部リンクの記述より先に記述する必要があります。先に読み込んだファイルで表示モードが決定してしまうらしいです。

 

robots meta タグの noindex, nofollow, noarchive, nosnippet, noimageindex ついて

robotsタグは検索エンジンに関する記述で、上の記述は書いても書かなくてもグーグルはインデックスするので、実はcontent=”index,follow”の部分はいりません。

しかし、そのページが検索エンジンからみて、「スパムに見えるかも?」と心配は場合、 content=”noindex, nofollow”と記述すると、検索エンジンは、noindexでそのページをインデックスしなくなり、nofollowでそのページのリンクをたどりません。

 

また、

は同じ意味です。

 

また、<a href=”http:localhost” rel=”nofollow”>###</a>のように、個別のリンクをたどらせないこともできます。

 

<meta property~> OGP=Open Graph Protocol

さらに、<meta property~> に関する記述はFacebookやmixiとウェブページを連携させる記述でSNSサイトに「こんなブログです」と伝える、OGP=Open Graph Protocolに関する記述です。

例えば、

 

og:title=そのサイトの名前

サイトのタイトルはwebclubです。

 

og:url=ページのurl

このサイトのurlはhttp://localhostです。

 

og:title=ページのタイトル

<meta property=”og:title” content=”webに関する記事” />

この記事のタイトルはwebに関する記事です。

 

og:image=ページの画像(サムネイル)

サムネイルのurlは”http://webclub.link/image/123456″ /です。

 

og:description=ページの説明

<meta property=”og:description” content=”webについて書いてます” />

このページはwebについて書いてます。

 

og:site_name=ページが何に所属する場合のサイト名

あんまり使わない

og:email, og:phone_number=連絡先

このサイトの連絡先はwebclub@gmail.comです

 

Object types=記事の場合はarticle、ブログの場合blog、ウェブサイトの場合のドキュメントルート

ウェブサイトの場合

ブログの場合

そのほかのページの場合

基本的な構造は

<meta property=”なにについて指定するか?” content=”なにを指定するか?”>です。

 

 

<title>~</title>は必ず必要な記述ですが、サイトを作るだけなら、極端なことを言えば<meta>や<link>は必要ないです。まぁ、ないと不便ですが。

スポンサーリンク

<body>~</body>の中に書くもの

<body>~</body>の中には、ブラウザに表示されるコンテンツを<p>~</p><h1>~</h1><a>~</a>など記述して

 

 

classやidを指定してcssでデザインしてコンテンツを作っていくのですが、 <body>やhtmlタグに直接cssを記述することもできます。

 

と記述しても、間違いではありませんが、基本的にcssに記述するのが、推奨されてるルールです。

 

googleが<body>タグはファイルの容量がかさむのでいらないといってるらしいですが、更新する時など読みづらくなるので基本は書きます。(ie6でバグが出るらしいです。)

スポンサーリンク

コメントを残す