【Javascript】使いやすいテンプレートファイルを準備しよう
タイトルは「Javascript」となっていますが、HTML、CSS、Javascript、PHPでコードを書いていく際、例えばコーディングにしても毎回ドキュメント宣言から書いていては作業効率は悪くなります。
仕事にしても、プログラミングの学習にしても、すぐに使用できるテンプレートファイルを用意しておけば作業効率はぐっと上がると思います。
今回は私が使用しているテンプレートファイルをご紹介します。もっと素晴らしいテンプレートファイルはあると思いますが、Web制作の初心者の方には使いやすいと思います（本当か？ｗ）。
もちろん自分の環境に適したように改造していったほうが一番いいでしょう(‘ω’)
テンプレート―ファイル一例
下のテンプレートファイルをクリックしてダウンロードして使用してみてください。
それでは中身を見てみます。
・HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="asset/reset.css"> <link rel="stylesheet" href="asset/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <script type="text/javascript" src="asset/javascript.js"> </script> </body> </html> |
このテンプレートファイルは「asset」フォルダの中に格納されている
- style.css（スタイルシート）
- reset.css（リセットCSS）
- Javascrit.js（Javascript）
のファイルがそれぞれ結合しており、「style.css」、「Javascript」にコードを書いていけば、そのままスタイル調整やJavascriptによる動きを追加することができます。
リセットCSSにも結合しているので、ブラウザ間でのデザインの違いを可能な限り少なくした調整ができると思います。
リセットCSSについて分からないという人はこちらの記事を参考にしてみてくださいね。※リセットCSSとは
ちなみに「JQuery」も使用できます。
まとめ
このテンプレートファイルで
- HTML
- CSS
- Javascript
- JQuery
が使用できる。
