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

HTMLテンプレートで時短サイト制作
この記事は約9分で読めます。
広告

自分のサイトを作りたい!そんな方のための学習帳。
検査すれば沢山出てくるサイト制作のすすめ。
どっとインストールとか、すごい分かりやすいじゃないですか!
でもでもでも、学習の前にコピペでパッと作っちゃいましょう!
覚えるのはそれからでいいと思います。
目次から、内容をすっ飛ばして「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は表示される内容」
この3つだけでもう終わり。もう話さない。
charasetとかmetaとかscriptとか意味わかんないけどもう終わり!

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

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

見てくれてありがとう。
これは、宣言と言って「HTML5」ですよ!というのをコンピューターに知らせるための記述。
「HTML5」っていうくらいだから4も3も2,1もあったんだ。
「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)と同じレイアウトにしてくれるんだ。

<meta name=”format-detection” content=”telephone=no”>について

これは、iPhoneのおせっかい機能のページ内に連続した数字を見つけると勝手に電話番号と認識しちゃう機能を消してくれます。
これで、数字をタップすると電話をかけちゃうわずらわしさからおさらばです。

<title>sample</title>について

このページのタイトルです。パソコンだとタブ内にこのタグの文字が表示されています。

<meta name=”description” content=”サイトの説明。検索結果に表示される箇所で300文字以内に収めるのが一般的”>について

これは検索結果に表示されるサイトの説明を記述する箇所。
サイトの簡単な説明文を300文字以内で記入するのが一般的。

<link rel=”stylesheet” href=”common/css/style.css”>について

外部ファイルのcssを読み込むための記述。
もし、ミニマルなサイトや「amp」対応のサイトを作る場合には、cssを外部ファイルとせずにHTML内に直接記入する。
その場合は、「<style></style>」の中にcssを記入する。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>について

このサイトのjavascriptは、jqueryを利用するのでgoogleにホストされているjQueryを読み込んでいます。

<script src=”common/js/common.js”></script>について

外部のjavascriptファイルを読み込む。

<body>について

この「body」の中に、記述したものがサイト内の情報になる。

まとめ

以上が、HTMLについてのテンプレートです。
これだけわかれば、あとはググってコピペの繰り返しで完璧っ!
テンプレートを利用して自分のサイトを作ってみてください!

エンデ・バタローをフォローする
HTMLサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました