html メタタグとその使用方法詳細

さっそくですが、今日のテーマを始めましょう。

Htmlのmetaタグについて

I. メタタグ 意味

　　は 要素には、検索エンジン向けの説明文やキーワード、更新頻度など、ページに関するメタ情報を記述します。

　　は タグは文書の先頭に置かれ、内容は含まれません。

　　の属性は以下の通りです。 タグは、文書に関連する名前と値のペアを定義します。

II. メタの共通属性

1. charset (文字セット)

　　 説明 HTML ドキュメントの文字エンコーディングを指定します。

　　 使用方法 <meta charset="UTF-8">  

2. ビューポート（viewport）

　　 説明 ユーザーが閲覧するウェブページのビューポート。ご存知のように、一般にモバイル機器の画面は PC よりもずっと小さいので、webkit ブラウザはモバイル機器の画面に対してより大きな「仮想」ウィンドウをマッピングすることになります。.

　　　　 　つまり、通常のWebページを読み込む場合、webkitはまずブラウザ標準の980ピクセルでページを読み込み、その後490ピクセルの幅に縮小して表示するのです。このスケーリングはグローバルなスケーリングであることに注意してください。つまり、ページ上のすべての要素が縮小されることになります。

　　 使用方法

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user- scalable=no;">

　　　　　　(1) 幅

　　　　　　　　幅はビューポートのサイズを制御します。通常、適応的な目的のためにデバイス幅に設定されます。

　　　　　　(2) 初期スケール

　　　　　　　  initial-scale: 初期スケール、すなわち、ページを最初に読み込んだときのスケール。

 　　　　　  (3) 最大スケール

　　　　　　　  maximum-scale 最大のスケール。つまり、拡大縮小の最大許容度。これはまた、画面サイズと比較したページサイズの最大倍率を示す浮動小数点値である。

　　　　　　(4) 最小スケール

　　　　　　　　minimum-scale: ユーザーが拡大縮小することができる最小のスケール。maximum-scaleと同様に使用される。

　　　　　　(5) ユーザースケーラブル

　　　　　　　　user-scalable ユーザースケーラブル。つまり、ユーザーがページの表示倍率を変更できるかどうか。yesに設定するとユーザーが変更できるようになり、その逆はnoになります。

3.キーワード(keywords)

　　説明 検索エンジンが提供するキーワードのリスト。キーワードは英語のカンマ「,」で区切られる。検索エンジンが検索の品質を向上させるために使用するキーワードを指定する。

　　使用方法

4. 説明（Description、Introduction）

　　　説明文。説明文は、検索エンジンにサイトのメインコンテンツを伝えるために使用されます。

　　　使用方法 {コード

5. フォーマット検出 (フォーマット検出)　　

　　　説明：format-detectionは、htmlの一部の書式を検出するために使用されます。

　　　使用方法 metaのformat-detection属性は、主に以下のように設定します。　　　

: <Meta name="Description" Content="A brief description of your page">

　　　　また、以下のようにハイフンでつなぐことも可能です。 　meta name="format-detection" content="telephone=no" 　　　　meta name="format-detection" content="email=no" 　　　　meta name="format-detection" content="address=no"

　　　　　　(1)電話

　　　　明らかにリンクスタイルなしで数字の羅列を書いたのに、iPhoneでは自動的にリンクスタイルが追加され、その番号をクリックすると自動的にダイヤルするようになっているのです このダイヤル式リンクをなくすにはどうしたらいいでしょうか？ここで私たちのメタが本領を発揮します。次のようなコードです。

　　　　telephone=noは、番号のダイヤルリンクへの変換を無効にします!
/{br 　　　　telephone=yesは、ダイヤルリンクへの番号の変換をオンにし、変換機能をオンにするには、このメタは、デフォルトのケースでは、オンにすることである、書き込む必要はありません!

　　　　(2) 電子メール

　　　　をクリックした後、メールアドレスを認識せず、自動送信しないことを端末に伝える。

　　　　email=no disable as email address!
/{br 　　　　email=yesは、電子メールアドレスとしてテキストのデフォルトをオンにし、メタは、デフォルトがオンになっている場合には、記述する必要はありません！[OK]をクリックします。

　　　　(3) アドレス

　　　　adress=no disable jump to map!
/{br 　　　　adress=yes は、住所をクリックすると地図に直接ジャンプする機能をオンにします。これはデフォルトでオンになっています

6. アップルタッチフルスクリーン

　　説明 ホーム画面に追加してフルスクリーンで表示する。

　　使用方法 meta name="format-detection" content="telephone=no,email=no,adress=no"　　



7. Apple-Mobile-Web-app-capable（アップルモバイルウェブアプリ対応

　　説明 効果は、デフォルトのAppleツールバーとメニューバーを削除することです。コンテンツは、2つの値 "yes "と "no "を持って、我々はツールバーとメニューバーを表示する必要があるときに、この行のmetaを追加する必要はありません、デフォルトは表示することである。

　　使用方法 <meta name="apple-touch-fullscreen" content="yes">

8. アプリ設定

　　説明 履歴とアニメーション効果を保持する

　　使用方法 <meta name="apple-mobile-web-app-capable" content="yes" />

9. msapplication-tap-highlight

　  説明 ハイライトしないクリック(ハイライト)

　使用方法 <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

概要

以上、html metaタグと使用方法の詳細について少し紹介しましたが、お役に立てれば幸いです。これからもスクリプトハウスのウェブサイトをよろしくお願いします。