2018年html5最小テンプレートとよく使うhtmlスニペット

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。
まよなかWEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。

2018 html5 最小限テンプレート

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content=",,,,,">
<meta name="author" content="">
<meta property="og:site_name" content="">
<meta property="og:type" content="website">
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="">
<meta property="og:image" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:image" content="">
<link rel="canonical" href="">
<link rel="stylesheet" href="css/index.css">
<link rel="icon" type="image/png" href=""><!--ファビコン-->
<link rel="apple-touch-icon" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" defer></script>
<![endif]-->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
</head>
<body>

</body>
</html>

2横並びボックス

親要素のclearfixと子要素のfloatを変えることでdisplay:box、display:table等でも使用できる

<div class="box1 clearfix">
 <div class="box1-1 float">
 </div>
 <div class="box1-2 float">
 </div>
</div>

imgタグ

上からimgのみ、pタグつき、pタグ・aタグつきる

<img src="" alt="">
<p class=""><img src="" alt=""></p>
<p class=""><a href=""><img src="" alt=""></a></p>

navigationセット

親要素のclearfixと子要素のfloatを変えることでdisplay:box、display:table等でも使用できる

<nav class="">
 <ul class="clearfix">
  <li class="li1 float">
   <a href="" class=""></a>
  </li>
  <li class="li2 float">
   <a href="" class=""></a>
  </li>
  <li class="li3 float">
   <a href="" class=""></a>
  </li>
  <li class="li4 float">
   <a href="" class=""></a>
  </li>
  <li class="li5 float">
   <a href="" class=""></a>
  </li>
 </ul>
</nav>

formセット

詳細はご使用の送信フォーム用PHPに合わせる

<div class="form-w">
 <p class="">※印は必須項目です。</p>

 <form method="post" action="mail.php">

  <div class="clearfix">
   <div class="left float">
    <label>お名前(ご担当者名)</label><span class="">※</span>
   </div>
   <div class="right float">
    <input class="input1" type="text" name="お名前(ご担当者名)" autofocus>
   </div>
  </div>

  <div class="clearfix">
   <div class="left float">
    <label>電話番号</label>
   </div>
   <div class="right float">
    <input size="5" type="text" name="電話番号" /> - <input size="" type="text" name="電話番号[][-]" /> - <input size="7" type="text" name="電話番号[][]" />
   </div>
  </div>

  <div class="clearfix">
   <div class="left float">
    <label>ご希望連絡方法</label>
   </div>
   <div class="right float">
    <input type="checkbox" name="ご希望連絡方法" value="メール"><span> メール</span>
    <input type="checkbox" name="ご希望連絡方法" value="電話" class="check"><span> 電話</span><br>
   </div>
  </div>

  <div class="clearfix">
   <div class="left float">
    <label>お問合せ詳細</label>
   </div>
   <div class="right float">
    <textarea rows="12" class="" name="お問合せ詳細" id="comments"></textarea>
   </div>
  </div>

  <p class="">
  </p>

  <p class="">
   <input type="submit" value="上記に同意して入力の内容を確認する" class="">
  </p>

 </form>
</div><!--form-w終わり-->