HTMLテンプレートで時短サイト制作

自分のサイトを作りたい！そんな方のための学習帳。
検査すれば沢山出てくるサイト制作のすすめ。
どっとインストールとか、すごい分かりやすいじゃないですか！
でもでもでも、学習の前にコピペでパッと作っちゃいましょう！
覚えるのはそれからでいいと思います。
目次から、内容をすっ飛ばして「HTML5のテンプレート」へ行ってください。

初めての目次

HTMLってなんだ！？
ファイル構成について
index.htmlについて
HTML5のテンプレート
もっと知りたい人はスクロール
まとめ

HTMLってなんだ！？

まずHTML5ってよくわからない要素が沢山あります。
なぜ、「index」って言う名前なの？とか、この行は必要？とかHTMLを書き始めたばかりの頃、「よくわからないまま」書いていました。
もし自分と同じく「よくわからないまま」な人がいたらこの記事を見て理解していただけたら嬉しいです！
では、まずファイル構成から行きたいと思います！
コーディング全般に言えることですが、面倒くさがらずに手を動かしていくと、覚えるのが格段に速くなりますのでぜひ下記のファイル構成をご自身のPCで作ってみてください。

ファイル構成について

上の図の様なファイル構成にしていきます。
今回は「sample」フォルダ内に、トップページの「index.html」ファイルとサイトに必要なファイルをまとめた「common」フォルダがあり、その「common」フォルダ内に「css」フォルダ、「img」フォルダ、「js」フォルダと3つのフォルダを作ります。
「css」フォルダには、サイトのスタイルを定義する「style.css」ファイルと、各ブラウザのデフォルトスタイルをリセットする「reset.css」ファイルが有ります。その他、プラグインのcssファイルを追加する場合はこの「css」フォルダへ追加してください。
「img」フォルダには、サイトに必要な画像を入れます。「.jpg」ファイルや「.png」ファイル、「.ico」ファイルや「.svg」ファイルや「.webp」ファイルも、画像であればすべてこの「img」フォルダへ入れます。
「js」フォルダには、サイトで使用するjavascriptを入れます。「common.js」はサイトに必要なjavascriptを記述します。その他に、プラグイン等のjsファイルはすべてここへ入れます。

index.htmlについて

なぜ、「index.html」？

なぜ、「index.html」なのでしょうか？
google翻訳で「index」を翻訳すると、「索引（さくいん）」と出てきます。
さらに「索引（さくいん）」という言葉をwikipediaで検索すると

索引（さくいん）とは、百科事典・学術書などの書籍や雑誌・新聞などの記事、統計、コンピュータのデータにおいて、特定の項目を素早く参照できるよう、見出し語を特定の配列に並べ、その所在をまとめたもの。
（加えて凡例や相互参照、限定詞のあることもある。）
コンピュータで用いられる際にはインデックス (index (pl. indice))と呼ばれることもある。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

サイトで使用する「index」とは、サイトの情報をまとめたものを言い、サイト情報を一覧できるトップページが「index.html」となります。
さらに、どのサーバーでも「index.html」への理解は共通で、フォルダの中に「index.html」を入れておいて、フォルダを指定すれば自動で「index.html」が読み込まれるんです。
例：当ブログの「サイト制作」フォルダをURLで指定すると「サイト制作」フォルダ内の「index.html」が自動で呼びされます。
当ブログの「サイト制作」フォルダへ

HTML5のテンプレート

  <!doctype html>
    <html lang="ja">
    <head>
    	<meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="format-detection" content="telephone=no">
      <title>sample</title>
      <meta name="description" content="サイトの説明。検索結果に表示される箇所で300文字以内に収めるのが一般的">
      <link rel="stylesheet" href="common/css/style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="common/js/common.js"></script>
    </head>
    <body>
      <div id="wrapper">
        <main>
          <p>
            へろ～わーるど！
          </p>
        </main>
      </div>
    </body>
  </html>

このままコピーして「inde.html」へ、ペーストしてセーブしてください。
そして、「inde.html」をダブルクリックで開くと、左上に「へろ～わーるど！」と表示されると思います。
これで、サイトの出来上がり！簡単。

？？？？？？？

意味が分からない。
最初にビックリマークがついてる意味が分からない。
やばい、止めたい。今すぐHTMLの学習を止めたい。
ですよね。でもちょっとだけ聞いて。
最後に3行でお教えします！
「htmlはすべてを囲うやつ
headはページの見えない必須要素
bodyは表示される内容」
この３つだけでもう終わり。もう話さない。
charasetとかmetaとかscriptとか意味わかんないけどもう終わり！

もっと知りたい人はスクロール

最初の「<!doctype html>」について

見てくれてありがとう。
これは、宣言と言って「HTML5」ですよ！というのをコンピューターに知らせるための記述。
「HTML5」っていうくらいだから４も３も２，１もあったんだ。
「HTML4」までは、すげぇ長い宣言が必要だった。長すぎて挫折した時期がありました。
でも「HTML5」になってからめちゃ短くなって、これなら覚えれるって思いました。

<html lang=”ja”>について

これは「html」を書き始める初めの1歩。すべてを囲う要素「html」。
この「html」タグには、どの国の言葉でサイトが作られているかを書きます。
このサイトの言葉（language）は日本語（japanese）で書いてます！
それを縮めて「lang=”ja”」になります。

<head>について

「head」は、サイトに表示されないけれどサイトに必要な情報群。
サイトに必要な情報は、後に出てくる、サイトのタイトルやcssリンクやファビコンなどいろんなやつ。

<meta charset=”UTF-8″>について

「meta」とは、ウェブページの情報を検索エンジンやブラウザなどに伝えるタグ。
「charset」とは、文字コードを指定する記述。現在、一般的で広いシェアを占めてるのが「UTF-8」というやつ。
文字コードには「UTF-8」の他に「shift-jis」など数十個とあるから複雑で摩訶不思議なので「UTF-8」を書いておけば良し！

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, viewport-fit=cover”>について

この「meta」タグは、ビューポートを指定するタグ。
「viewport」は、日本語に直すと「表示領域」となり、パソコンやiPadやiPhoneやAndroidなどのディスプレイサイズが違う端末での見え方を指定する。
「content」の中に、見え方を「,」で区切って指定しています。
「width=device-width」は、横幅をブラウザ幅に合わる。
「initial-scale=1.0」も、横幅をブラウザ幅に合わるのですが、iPhoneとAndroidのブラウザでは、少し解釈が違うので同じ結果になるものを2つ書かなくてはいけません。
「viewport-fit=cover」は、iPhoneX以降にある、切り欠き対策。この記述でiPhoneXを横にすると出る左右の余白を無くし前面にサイトを表示できる。

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>について

これは、windowsのパソコンでデフォルトのブラウザになってる「EDGE」と過去のwindowsPCのデフォルトブラウザだった「ie」対策。
ウェブデザイナー泣かせの「ie」というブラウザ。
過去に「ie」はウェブデザイナーに対して数々の偉業を成した。
意味の分からない文字や画像のズレ。
意味の分からないレイアウト崩れ。
意味の分からない高さの付与。
そんな「意味の分からない」からの解放を果たすため、このタグが付いている！
これを書いておけば色々気にしなくても、主要ブラウザ（chrome、safari、firefox）と同じレイアウトにしてくれるんだ。