メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

初めまして。この記事が初投稿です。

初回なので、軽くHTML関係のことから。ついつい忘れてしまって、いつもGoogle先生にお世話になってしまうHTMLの基礎についてまとめていこうと思います。 冒頭に書くべきmeta要素とかあの辺の、難しくは無いけどなんだったっけ、ってなるやつ。  

目次

    DOCTYPE宣言

    htmlを書くならまずはDOCTYPE宣言。HTML5からは記述も短くなったうえ、宣言がなくてもhtmlの動作的には問題はないそうです。

    しかし、宣言しておかないとブラウザのレンダリングモードとやらが通常の「標準(strict)モード」ではなく「互換モード」になるとか。

     

    「互換モード」の場合、CSSなどが正常に読み取られないらしく、レイアウトが崩れることになります。つまり結局は宣言しないと問題大アリなので、次のようにきちんと宣言しておきましょう。

     

    <!DOCTYPE html>

    HTML5での必要最低限の記述

    無事にDOCTYPEが宣言できたら、<html>タグ、<head>タグ、<body>タグです。

    <html>にはlang属性で言語を指定します。日本語の場合は”ja”、英語の場合は”en”を値に入れます。HTML5からはlang属性の他に、manifest属性というのも追加されていますが基本的に使うことはなさそう。

    manifest属性はキャッシュデータを利用してオフラインの場合でも最低限の表示ができるようにするもので、表示させたいurlを指定して使用します。

     

    日本語のサイトの場合は以下のように書きます。

    <html lang="ja">

     

    次に、<head>内の記述です。私がいつも記述しているのは以下の項目です。

    • エンコードの指定
    • スマホでの自動リンク化無効
    • サイトのタイトル
    • サイトの説明文
    • viewport(レスポンシブ)
    • favicon
    • (公開前のみ) robots metaタグでインデックスさせない

    次のような記述になります。

    <head>
      <!-- エンコード -->
      <meta charset="utf-8">
    
      <!--    スマホでの自動リンク化無効    -->
      <meta name="format-detection" content="telephone=no">
    
      <!-- サイトのタイトル&説明 -->
      <title>WEMO</title>
      <meta name="description" content="個人的な備忘録ブログです。">
    
      <!-- viewport(レスポンシブ用) -->
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    
      <!-- favicon -->
      <link rel="icon shortcut" href = "favicon.ico">
    
      <!-- 公開前はインデックスさせない(公開時に削除) -->
      <meta name="robots" content="noindex, nofollow">
    </head>

    これらに加え、そのサイト似合わせてcssやscriptの読み込みを記述しています。

    忘れちゃいけない、IE対策

    さて、あとは<body>内に好きなようにhtmlを組み立てて行けばいいのですが、最後にやっておかなければならないことがあります。

    WEB界の厄介者、Internet Explorerさんで表示がおかしくならないように、しっかり対策しておきましょう。

    次の二種類のコードをhead内に記述しています。

    <!--    常に標準モードを指定    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!--    IE8以前への対策    -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->

    前者では、レンダリング方法がバージョンごとに変わったりするIEに対し、常に標準モードで表示させるという指定をしています。

    cssやjsファイルが読み込まれるとその時点で表示モードが決定してしまうそうなので、それらより前に記述します。

    後者では、html5に対応できていないIE8以前のブラウザでも表示が崩れないようにしてくれるjsファイルを読み込ませてあります。

    このhtml5shiv.jsは2016年1月25日まではGoogleのCDNが使用できていましたが、現在はサービス終了となっているので、以下のGitHubよりファイルをローカルにダウンロードしてから使用しています。

    html5shiv.js – GitHub

    個人的なサイトではIE8以前のブラウザはもはや切り捨ててもいいとは思いますが、企業サイトだとそうはいかないこともあるかと思うので、とりあえずダウンロードしておくといいと思います。

    また、後者でIEのバージョンを判断しているif文のことを「条件付きコメント」というのですが、この「条件付きコメント」はIE10以降では認識してくれません(普通のコメントアウトとして扱われる)。詳しくはこちらをご覧ください

    まとめ

    上記をまとめると次のようになります。

     

    <!DOCTYPE html>
    <html lang="ja">
     <head>
      <!--    エンコード    -->
      <meta charset="utf-8">
    
      <!--    IE標準モード指定    -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
      <!--    スマホでの自動リンク化無効    -->
      <meta name="format-detection" content="telephone=no">
    
      <!--    サイトのタイトル&説明    -->
      <title>WEMO</title>
      <meta name="description" content="個人的な備忘録ブログです。">
    
      <!--    viewport (レスポンシブ用)    -->
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    
      <!-- 公開前はインデックスさせない(公開時に削除) -->
      <meta name="robots" content="noindex, nofollow">
    
      <!--[if lt IE 9]>
        <script src="<?php echo dire(); ?>/plugin/html5shiv.js"></script>
      <![endif]-->
    
      <!--    favicon    -->
      <link rel="icon shortcut" href = "favicon.ico">
    
      <!--    css/js    -->
      <link rel="stylesheet" type="text/css" href="style.css">
    
     </head>
     <body>
      <!--    内容    -->
     </body>
    </html>

     

    とりあえずhtml書き始めるときにどうしたらいいか分からない人がもしいれば、コピペして適当にいじってみてください。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top