HTML・CSS・jQueryの学習用テンプレートを準備する｜配布あり

プログラミングを学習する時にテンプレートがあると楽になります。

テンプレートがあると楽になるわけ
テンプレートのソースと簡単な説明
1. まとめ

テンプレートがあると楽になるわけ

結論はとてもシンプルで、準備に時間がかからないからです。

HTML勉強中やググっている時に
ちょっとコードの実験したい時ありませんか？

・ボタンのhoverアニメーションを確認したい
・hタグのおしゃれな見出しを試したい
・jQueryのかっこいいスライダー見つけた

こんな時、テンプレートを用意しておけばスグに動作の確認ができて、とても楽です。

実際にコードを書いて動作チェックをするコトで理解度が全然変わってきます。

「お気に入りに追加」して「使う時にまた見よう」という人も多いかと思います。

お気に入りでストックしておくのも良いのですが「いざ使おう」という時に、お気に入りが整理されてなくて探すのに苦労する

そんな事ありませんか？
僕はよくあります…。

特に初心者の段階では、成功体験が重要でたとえ少量でも

・コードを書く
・ブラウザで確認する
・バグがあれば修正する
・完成させる

この繰り返しの積み上げが自信につながり、いつか大きなサイトを制作する時の武器になります。

一度書いたコードはストックとして残るので一石二鳥です。

「まだテンプレート作ってないよ」という事でしたら
準備しておく事をオススメします。

僕のテンプレートもダウンロードできるようにしたので、時短したい方は是非使ってください。

テンプレートをダウンロード

テンプレートのソースと簡単な説明

至ってシンプルで
「HTML・CSS・jQuery」がスグに使えるのみ。

テンプレートのコードはコレです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>HTMLベーステンプレート</title>
   <meta name="description" content="">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- css ここでCSSを読み込んでいます -->
   <link rel="stylesheet" href="css/reboot.css">
   <link rel="stylesheet" href="css/style.css">

   <!-- js ここでjQueryとjsフォルダのcommon.jsファイルを読み込みんでいます -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/common.js"></script>
</head>
<body>
   <header><h1>Base Template</h1></header>
   <div class="wrap">
      

   </div>
<script>
   //jsファイルを別に開くのが面倒な場合はこちらに記入してください
   $(function(){

   });
</script>
</body>
</html>

CSS

@charset "utf-8";

body {
   font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 15px;
}

p {
   font-size: 1rem;
   color: #2f2f2f;
   line-height: 1.8;
}

/* common
=================================================== */

/*--- wrap ---*/
.wrap {
   position: relative;
   max-width: 1020px;
   margin: 0 auto;
}

/*--- img ---*/
img {
   vertical-align: bottom;
}

h1 {
   padding: 1.333rem 0;
   font-size: 1.333rem;
   text-align: center;
   border-bottom: 1px solid #dfdfdf;
}

/* モバイル
=================================================== */
/* ブレイクポイントはその時々で必要なサイズを指定してください */
@media screen and (max-width: 960px) {

}
@media screen and (max-width: 480px) {

}