こんにちは！シミダイ(@shimidai2100)です。
HTML5でWebページ作成時のテンプレートを紹介したいと思います。
LPページなどを作成したり、wordpressでテーマ作成時のモックに利用したりと何かと必要になるケースはありますので、
今回の記事をコピペして利用してください。
Contents
- 1 コピペで使えるHTML
- 2 コピペで使えるHTMLの解説編８
- 2.1 <!DOCTYPE html>
- 2.2 <html lang="jp">
- 2.3 <title>
- 2.4 <meta charset="utf-8">
- 2.5 <meta name="description" content="">
- 2.6 <meta name="author" content="">
- 2.7 <meta name="keywords" content="">
- 2.8 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- 2.9 <link rel="stylesheet" href="">
- 2.10 <link rel="icon" href="">
- 2.11 <script src="https://code.jquery.com/jquery-X.X.X.slim.min.js"></script>
- 2.12 <script src="○○.js"></script>
コピペで使えるHTML
コピペOSで使えるHTMLは↓になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="jp"> <head> <title>サンプルページ</title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- ↓に読み込むCSSファイルを設定 --> <link rel="stylesheet" href=""> <link rel="icon" href=""> </head> <body> <!-- ここからHTMLでマークアップする --> <!-- JQeryを読み込む --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <!-- 自分で作成したJavaScriptを読み込む --> <script src="○○.js"></script> </body> </html> |
コピペで使えるHTMLの解説編８
ではコピペした要素とその意味を周回します。
<!DOCTYPE html>
<!DOCTYPE html>では、この文書はHTMLです、ということを宣言しています。
一番最初に書く必要がある点に注意してください。
<html lang="jp">
<html lang="jp">では、この文書は日本語で書かれています。ということを宣言しています。
これもこの位置にしか書くことができません。
<title>
<title>はページのタイトルを表示します。
<head>タグに入れないといけない点に注意してください。
<meta charset="utf-8">
<meta charset="utf-8">では文書の文字コードを選択しています。
一般的にはUTF-8を利用します。HTHLファイルの文字コードをUTF-8で記載していくことを忘れずに行ってください。
<meta name="description" content="">
<meta name="description" content="">はこの文書にはどんな内容が書かれているかサマリを記載します。
content=""の中に120文字で記載してください。
Google検索ではここに記載された内容がサマリとして表示されます。
<meta name="author" content="">はこの文書は誰が書いたかを記載します。
content=""の中にHTMLの作成者を記載してください。
Google検索ではここに記載された内容がサマリとして表示されます。
<meta name="keywords" content="">
<meta name="keywords" content="">はこの文書のキーワードを書いていきます。
content=""の中にHTMLの内のキーボードを記載してください。複数設定する場合にはカンマ記号「,」を使用します。
キーワードの数は3つ程度に抑えるようにしましょう。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
このタグは表示領域を指定します。スマホ・タブレット・パソコンなど様々な端末に表示させる時に利用します。
※分からない人はコピペでOKです。気になる人は調べてみてください。
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">はスタイルシート「CSS」を指定するマークアップになります。
<link rel="icon" href="">
<link rel="icon" href="">はファビコン（左上のサイトイメージ）を表示するマークアップになります。
<script src="https://code.jquery.com/jquery-X.X.X.slim.min.js"></script>
最も一般的なJavaScriptライブライである、JQueryを読み込むタグになります。
JQueryはダウンロードしてローカルサーバー上から読み込みこともできますが、今回の例ではJQueryの公開サーバ上から読み込んでいます。
またJQueryはバージョンに注意してください。
JavaScriptの読み込みは<body>タグ終了の直前に書き込むのが一般的です。
<script src="○○.js"></script>
実施で作成したJavaScriptを読み込むと時に使用します。
JavaScriptの読み込みは<body>タグ終了の直前に書き込むのが一般的です。
内容をより詳しく知りたい人は↓の本をオススメします！
