Webページを作っていると初期設定として何度も使用するコードがでてきます
毎回つくっているとめんどうなのでテンプレートとして用意してコピペでコーディングを進められるようにすると楽です
コードを追加する場所
Emmetでも基盤はできますが、勉強していくと自分用にカスタマイズしておいたほうがスムーズです
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- head情報-->
</head>
<body>
<!-- script -->
</body>
</html>
スマホ対応用のビュー設定
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
今や必須のスマホ対応
記述は毎回一緒なのでとくにいじることはないでしょう
Edge用の記述も一緒にいれておきましょう
ページディスクリプション(ページの説明)
<meta name="description" content"ページの内容を表す文章">
検索エンジンのクロールから除外する
絶対に除いてもらえるものではないので注意です
<meta name="robots" content="noindex,nofollow">
OGPタグ
ツイッターやファイスブックでリンクされたときの表示の設定
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="ユーザー名" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website">
<meta property="og:url" content="絶対パス" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="記事抜粋" />
content内をページに合わせて入力
summaryかsummary_large_imageを選べます
個人的にはlargeが好みです
og:typeはトップページだとwebsiteかblog,下層ページはarticle
htmlにもprefixを追加します
<html lang="ja" prefix="og: http://ogp.me/ns#">
link系も追加
よく使うものを設定しておきましょう
<link rel="stylesheet" href="">
私は
- ファビコン
- Bootstrap
- fontawesome
- google font
を初期設定で追加しています
body前に追加するscriptタグ設定
<script src="./js/config/jquery-3.3.1.min.js"></script>
<script src="./js/config/popper.min.js"></script>
<script src="./js/config/popper-utils.min.js"></script>
<script src="./bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="./js/index.js"></script>
jquery, Bootstrap, 基本的なJavascriptファイルを読み込んでいます
よく使うライブラリがあれば設定しておきましょう
jqueryやBootstrapはファイルを設定しています
あまりないと思いますがバージョンが変わって不具合でるとめんどくさいのでCDNは使用しません
好みですね
フォルダ構成
パスが変わってしまうのでフォルダ構成もきめておくと良いです
私は
- bootstrap
- script
- config
- css
- public
- ページ1.html
- ページ2.html
- index.html
としています
新しいスキルなどで構成は変わると思うので参考程度に
まとめ
記述はほとんどかわらないのに覚えるのはけっこう時間とられるし、めんどう
ぜひ自分のテンプレート作ってみましょう
記述の仕方も忘れがちなので、自分なりのコメントもいれておくと便利かも