Perl Web開発者のHTML・CSS入門

【HTML5】metaタグ - ページのメタ情報

metaタグでは、ページのメタ情報を記述します。以下はmetaタグで指定できる代表的なものです。

  • 文字コード
  • ビューポート

metaタグはHTMLヘッダに記述

metaタグはHTMLヘッダに記述します。 

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
</html>

文字コードの指定

「meta charset」で文字コードを指定できます。HTMLは、UTF-8で記述して、metaタグのcharsetで、UTF-8を記述しましょう。 

<meta charset="UTF-8">

ビューポートの指定

スマートフォン対応するWebサイトには、ビューポートを指定します。HTMLヘッダで以下の指定をすれば、スマートフォンの横幅に合わせて、描画してくれます。 

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

参考: スマートフォン対応のビューポートの設定

metaタグのサンプル

HTMLヘッダで、metaタグを使ったサンプルです。 

<html>
  <head>
    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/images/kimoto-system-favicon.png">
    <link rel="stylesheet" type="text/css" href="/css/common.css">

    <script type="text/javascript" src="/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/js/google-code-prettify/prettify.js"></script>
    <link  type="text/css" rel="stylesheet" href="/js/google-code-prettify/prettify.css"/>
    <script>
      $(function(){
        // google code prettifyの有効化
        $("pre").addClass("prettyprint");
        function init(event){
          prettyPrint();
        }
        if(window.addEventListener)window.addEventListener("load",init,false);
        else if(window.attachEvent)window.attachEvent("onload",init);
        
        $(".to-top").click(function() {
          // ページの一番上までスクロールさせます。
          $('body, html').animate({scrollTop: 0}, 300, 'linear');;
        });
      });
    </script>
  </head>
  <body>
    コンテント
  </body>
</html>

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

　ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。
Perlクラブ