Catch Tech
トップ
記事一覧

HTMLの基礎を解説！初心者向けテンプレート

HTMLの基礎を解説！初心者向けテンプレート

2024/09/25 13:23

HTML/CSS/JavaScriptの勉強や練習をしようとした時、 <head> の中身や <link> をどうしようか迷ったり、入力が面倒になることがあると思います。

そんな時のために、テンプレートを作成しました！
コピペやGitHubのcloneして使えるようにしています、勉強する際に活用してください😊

TL;DR

  • GitHubのテンプレートをcloneかダウンロードする

  • 下のコードをコピペする

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<meta name="description" content="サイト概要について">
<link rel="stylesheet" href="./destyle.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<script src="./main.js"></script>
</body>
</html>

<!DOCTYPE>

HTMLのバージョンを宣言しています。
基本的には、「HTML5」の <!DOCTYPE html> と書けば大丈夫です。

「HTML 4.01 Strict」「XHTML 1.0 Strict」などもありますが、今は気にしなくて大丈夫です！

<html>

言語設定などを行います。

一見関係なさそうに見えますが、英語などの外国語でページを見ている人を意識するなら必須の設定です！
というのも、検索エンジンはlang属性の値を鑑みてどう翻訳するかを判断しているからです。
その他にもアクセス解析で使うGoogle Analyticsなどでもデータとして活用されているので、なるべく設定しましょう。

言語設定の具体例

  • ja…日本語
  • en…英語
  • zh…中国語
  • ko…韓国語
  • es…スペイン語
  • de…ドイツ語
  • fr…フランス語

（こちらに、他の言語についてもまとめられています）

title

検索でサイトがヒットしたときに、検索結果の見出しとして表示されます。

良いタイトルは？

長すぎるタイトルは検索結果で省略されてしまうため、30～40字程度に抑えるのが理想です。
タイトルの中でも強調したい単語は、できるだけ前の方に持ってきましょう。
ただし、サイトのタイトルの重複はNGです。

description

検索結果の下部に表示される文章です。日本語では80文字を目安にしてください。タイトルと同じで、できたら重要なキーワードは先の方に設置しておきましょう。

keyword

少し前まではサイトに紐づけたいkeywordを指定することができていました。
不適切な利用が多かったのか、現在は廃止されてしまいました、、、

stylesheet

実は、 <style> を使えばCSSファイルを作らなくてもサイトを見た目を整えることができます。
HTMLファイルと分けて管理することで、複数のHTMLファイルで使うスタイルを1つのCSSファイルにまとめて管理できるので、CSSファイルを作って管理した方が便利です！

こんがらがり易いパスについて

相対パス
「./」や「../」「ファイル・ディレクトリ名」から始まる書き方。
今のファイルから見て、読み込みたいファイルがどこにあるかを指定します。
「./」は現在の階層。「../」は一つ上の階層。

絶対パス
「/」や「https://」などから始める書き方。
今のファイルの位置などを関係なく、サイトのトップから見て、読み込みたいファイルがどこにあるかを指定します。また、外部サイトの場合は必ずこちらを使用します。

CSSをHTMLに直接書く

最近ではあまり使われないですが、HTMLの好きな場所で <style> を使って見た目を調整することができます。
どうしてもCSSファイルを読み込めないときに使われたりしますが、あまり使いません。

<script>

<script> を記述する場所

<head> の中
<link> などのスタイルの後に記述します。
表示が少し早くなり、ユーザーを待たせずに済みます。

<body> の最後
HTML要素を操作したい場合など、基本的には <body> の最後に記載します。

JavaScriptをHTMLに直接書く

<style> と同様に、 <script> を使ってHTMLに直接JavaScriptを書くことができます。

おまけ

コメントを残す

コードの説明のために、コメントを記載したいことがよくあります。
チームで開発をしているときや1年後に見返すときに混乱しないように、1言でもいいのでコメントを書いておくのがおすすめです。

HTML

<!-- コメント -->

CSS

/* コメント */

JavaScript

// 1行のコメント
/* 複数行のコメント */

余計なスタイルをリセットする

デフォルトでマージンなどのスタイルがついていますが、邪魔になるのがほとんどです。

手動で消すのはかなり面倒なので、リセットするためのCSSがよく使われています。
今回は、その中の一つの destyle.css というものを使っています。

destyle.css を使う

destyle.cssの公式サイト にアクセスをして、「Get it 」の中に書いてある「Download」をクリックしたらCSSが書かれたページが表示されます。
ページ全体をコピーして、CSSファイルに貼り付けて使ってください！

destyle.cssのダウンロード

スタイルをリセット他のCSS

他にも「ノーマライズCSS」「サニタイズCSS」と呼ばれているものがあったりします。
ぜひ、自分の使いやすいものを見つけてください！

ページの文字コードセットの設定

文字化けをしてしまう時、自分が思っている文字コードとブラウザが認識している文字コードが異なっていることがあります。
HTML/CSS/JavaScriptのファイルでShift JISなどをしてしまっている場合、適切なものに変更しないといけません。

例えば、UTF-8で「あ」はE38182ですが、Shift JISで「あ」は82A0になるなどの違いがあります。

まとめ

HTMLの基本は分かりましたか？😊

最低限知っておきたいタグの解説を行なっていきましたが、 <meta> など、他にも知っておく必要があるタグがたくさんあります。他の記事で少しづつ解説をしていくので、よかったら他の記事も見てみてください！

関連記事