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>
横並びボックス
親要素の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セット
電話番号部分およびご希望連絡方法部分のnameの記述は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="7" 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終わり-->
