【HTML】ベースになるHTMLテンプレート

HTMLをゼロベースから書くのは効率が悪いので
テンプレート用のHTMLを用意しておいたり、エディターのショートコードなどですぐに呼び出せる状態にしておくことが仕事でコーディングする場合、必要不可欠です。

私の場合は以下のようなHTMLを標準に使っています。

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>タイトル</title>
  <meta name="keywords" content="キーワード">
  <meta name="description" content="ディスクリプション">
  <link rel="icon" href="/favicon.ico" id="favicon">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">

    <!--GA-->

    <!--OGP-->
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# article: http://ogp.me/ns/ article#">
    <meta property="og:url" content="https://●●●.jp/">
    <meta property="og:type" content="article">
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="ディスクリプション">
    <meta property="og:site_name" content="名前">
    <meta property="og:image" content="https://●●●.jp/ogp.png">
    <meta name="twitter:card" content="summary_large_image">
    <!--OGP-->

    <!--CSS-->
    <link rel="stylesheet" href="./css/common.css" type="text/css" media="screen,print">
    <link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
    <link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">

    <!--JS-->
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body id="top">
    <div id="container">
      <div class="main">

      </div>
      <div class="ftr">
        <div class="copyright">Copyright &copy; 名前 All rights reserved.</div>
      </div>
    </div>
  </body>
</html>

レスポンシブ対応として
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
特に最後のmaximum-scale=3はスマホで3倍までの拡大が出来ることで
ユーザビリティ・アクセシビリティを高めています。

CSSの読み込みも
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
上書きではなく、パソコンとスマホとを完全に分けて効率的にコーディング出来るようにしています。
(CSSを最小限にするために、SPファーストでコーディングし、PCで上書きが本来最もベストです。)

SNSでシェアされて拡散してサイトに訪問してもらうのが最近はメインになるのでOGPの設定も不可欠です。

PCの性能が向上したとは言え、表示スピードを意識したコーディングのほうが良いので、ヘッダーの読み込みはCSSを先、JSは後、としたほうが良いでしょう。

リセットCSSはこちら
ファビコンに関する詳細はこちら

関連記事

コメントを残す

*