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終わり-->