LoginSignup
0
0

More than 3 years have passed since last update.

HTMLについて~<head>/meta要素~

Last updated at Posted at 2021-06-06

meta要素

今まで意識せず使っていましたが、きちんと理解していないと今後自分が困ると思ってまとめました。
https://www.tohoho-web.com/html/meta.htm#name 
 ↑ このサイトが一番わかりやすかったです

 

head
<meta charset="utf-8">

エンコーディングは「データを一定の規則(バイト)に基づいて符号化すること」です。
特定のエンコーディング(UTF-8 など)を設定することで、バイトの並びがどのように解釈されるかを定めることができます。

 

head
<meta http-equiv="X-UA-Compatible" content="IE=edge">

【http-equiv="X-UA-Compatible"】指定した互換モードで表示させることができます。
Internet Explorerは各バージョン毎にレイアウトの癖やJavaScriptの挙動が異なるため、古いウェブページを最新から古いバージョンをエミュレート(模倣し、動作)して表示することができる。
【content=”IE=edge”】Internet Explorerの最新で表示。
【content=”IE=EmulateIE7”】と指定すれば、IE8を使用していたとしてもIE7の標準モードで表示する。【content=”IE=edge”】という指定はあまり良くない可能性のある指定です。(https://www.creativevillage.ne.jp/2819 より)

 

head
<meta name="viewport" content="width=device-width, initial-scale=1">

【Viewport】とは表示領域のことで、ブラウザにおける仮想のサイズをcontentで指定します。
幅360pxにしたいなら、content="width=360"と表記。
【content="width=device-width"】でViewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。
【initial-scale】で初期倍率を設定します。
width=device-widthとしてinitial-scaleを指定しない場合は、自動的にinitial-scale=1となります。
※ Windows PhoneのInternet Explorerではinitial-scaleに対応していないので、initial-scaleとwidthを同時指定したほうがいい、という考え方もあります。(https://ferret-plus.com/6033 より)
https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0