CSS Web

[コピペでOK]HTML5でWebページ作成時のテンプレ

投稿日:2018年5月14日 更新日:

こんにちは!シミダイ(@shimidai2100)です。

HTML5でWebページ作成時のテンプレートを紹介したいと思います。

LPページなどを作成したり、wordpressでテーマ作成時のモックに利用したりと何かと必要になるケースはありますので、

今回の記事をコピペして利用してください。


コピペで使えるHTML

コピペOSで使えるHTMLは↓になります。

コピペで使えるHTMLの解説編8

ではコピペした要素とその意味を周回します。

<!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="">

<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>タグ終了の直前に書き込むのが一般的です。

 

内容をより詳しく知りたい人は↓の本をオススメします!

スポンサードリンク

関連記事

-CSS, Web

Translate »

Copyright© shimidai2100 , 2018 All Rights Reserved.