HTML雛形。WEBアプリ開発に最低限必要なCDNとかを集めた。

最近個人的にWEBアプリ開発する期間が増えまして、なんか毎回毎回同じこと調べてて非常に効率悪いなぁと思い、主にマークダウン(HTML,CSS,JS)で使いそうなテンプレを作ってみました。

レスポンシブ対応やSEOなども考慮できるようにしてます。ただSEOに関してはホントなんとなくやってるだけなので多分間違ってます。へー:no_mouth:くらいの感じでみて頂けると幸いです。

## テンプレの内容
テンプレの概要を以下に記載します。ただこれが完全版ではなく、時期によってバージョンが異なる場合があるので適宜置き換えてください。

・HTMLのテンプレ。
・reset.cssを適用。
・一般的なstylesheetの読込み(HTMLに埋め込みせず、外部ファイルを読み込むようにしてる。)
・Bootstrap4を使えるよう設定。(CDN形式)
・fontawesomeを使えるよう設定。(CDN形式)
・JQueryを使えるよう設定。(CDN形式)
・JSファイルを外部から読み込むように設定。(HTMLに埋め込まない。)
・レスポンシブ対応のためのmeta_tagを設定。
・SEO対策用のmeta_tagを設定。
・よく使うSNSアイコンを記載。


## ファイル構成
作成したテンプレの構成は以下です。

<img width="241" alt="image2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/69ea11d9-779b-41f3-c906-8e7fea8240d9.png">
)

## コード

```html:index.html

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="Keywords" content="検索キーワードを”,”区切りで記載しとく。例）〇〇市, パーソナル, トレーニング" />
    <meta name="description" content="SEO対策。ここがGoogle検索した時のタイトルの下に出てくる説明文になるので検索されやすいワードを入れる。100〜200字しか入らないのでキーワードは前面に出したほうが良いかも。" />
    <!-- for responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Fontawesome CSS -->
    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
    <!-- web fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
    <!-- font-family: 'Orbitron', sans-serif; -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap" rel="stylesheet">
    <!-- font-family: 'Noto Serif JP', serif; -->
    <!-- General css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <!-- General css -->
    <script src="js/main.js"></script>

    <title>Simple Html App</title>
  </head>
  <body>

    <div class="mt-5 text-center">
      <h1>Title</h1>
      <p>〜タイトル〜</p>
    </div>

    <div class="text-center pt-3">
      <a class="mx-1" href="#"><i class="fab fa-facebook"></i></a>
      <a class="mx-1" href="#"><i class="fab fa-twitter"></i></a>
      <a class="mx-1" href="#"><i class="fab fa-instagram"></i></a>
      <a class="mx-1" href="#"><i class="fab fa-line"></i></a>
    <div>

  </body>
</html>

```

```css:css/style.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

```

```css:css/style.css

h1{
  font-size: 50px;
  color: green;
  font-family: 'Orbitron', sans-serif;
}

p{
  font-family: 'Noto Serif JP', serif;
}

i{
  font-size: 50px;
  color: gray;
}

```

```javascript:js/main.js

$(function(){
  console.log("OK?")
})

```

テンプレは以上です。

## おまけ
以下。よく使う、コード。

### 背景画像＋オーバーレイ
背景の上にレイの要素別途、用意して重ねる方法もありますが、こっちのほうが1つの要素で完結するので最近よく使ってます。

・使用技術
　→HTML/CSS

※追加分のみ記載

```html:index.html

<div class="mainTop">
  <div class="pt-5 text-center">
    <h1>Title</h1>
    <p>〜タイトル〜</p>
  </div>
  <div class="text-center pt-3">
    <a class="mx-1" href="#"><i class="fab fa-facebook"></i></a>
    <a class="mx-1" href="#"><i class="fab fa-twitter"></i></a>
    <a class="mx-1" href="#"><i class="fab fa-instagram"></i></a>
    <a class="mx-1" href="#"><i class="fab fa-line"></i></a>
  <div>
</div>

```

```css:css/style.css

.mainTop{
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(0, 0, 255, 0.3)), url(../image/image1.jpeg);
  height: 100vh;
  color: white;
}

h1{
  font-size: 50px;
  font-family: 'Orbitron', sans-serif;
}

p{
  font-family: 'Noto Serif JP', serif;
}

i{
  font-size: 50px;
  color: white;
}

```


### ハンバーガーメニュー
もうこれは必須アイテムですね。Bootstrapの出来合いの物を使ってもいいけど、カスタムが大変なのでいつも手作りです。といっても結構簡単に作れる。

・使用技術
　→HTML/CSS/Jquery/bootstrap

```html:index.html

<header>
  <div class="d-none d-md-block">
    <ul class="d-flex justify-content-around">
      <li><a href="">メニュー１</a></li>
      <li><a href="">メニュー１−２</a></li>
      <li><a href="">メニュー２</a></li>
      <li><a href="">メニュー２−１</a></li>
    </ul>
  </div>
  
  <div class="hamburgerMenu">
    <p></p>
    <p></p>
    <p></p>
  </div>
</header>

<div class="hideMenu d-none d-md-none">
  <ul class="">
    <li><a href="">メニュー１</a></li>
    <li><a href="">メニュー１−２</a></li>
    <li><a href="">メニュー２</a></li>
    <li><a href="">メニュー２−１</a></li>
  </ul>
</div>

```

```css:css/style.css

header{
  height: 80px;
  width: 100vw;
  background-color: black;
  padding-top: 10px;
}

header ul li a{
  line-height: 80px;
  color: white;
  font-family: 'Noto Serif JP', serif;
}

.hamburgerMenu{
  height: 60px;
  width: 50px;
  border: 1px solid gray;
  margin: 0 10px 0 auto;
  border-radius: 3px;
}

.hamburgerMenu p{
  border-bottom: 3px solid gray;
  height: 15px;
  width: 40px;
  margin: 0 auto;
}

.hideMenu{
  background-color: black;
}

.hideMenu ul li{
  border-top: 1px solid gray;
  padding: 20px 0 20px 30px;
}

.hideMenu ul li a{
  color: white;
  font-family: 'Noto Serif JP', serif;
}

```

```javascript:js/main.js

$(function(){
  $(".hamburgerMenu").click(function(){
    var hideMenu = $(".hideMenu");
    var displayNone = "d-none";
    if(hideMenu.hasClass(displayNone)){
      hideMenu.removeClass(displayNone);
    } else {
      hideMenu.addClass(displayNone);
    }
  })
})

```

これで今風なヘッダーが出来ると思います。
まだまだよく使う記述はありますが、これで以上です。