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