【コピペで使える】HTML5/CSS3の基本テンプレート

ウェブサイトのコーディングを行うとき、ひな形となるテンプレートを毎回探していませんか?

作る度に異なるテンプレートを適用して、「これでほんとにいいのかな?」「古いHTMLの記述が残っているのでは?」と不安を覚えながらもコーディングしてゆく・・・なんてことはありがちです。

そこで、今回はHTML5/CSS3で使える汎用的な枠組みということでまとめてみたいと思います。
 

枠組みの特徴

最初の設計を考えずにコーディングに手をつけて後々混乱するのが、フォントサイズの指定です。

フォントサイズ指定のルールは予めルールを決めておかないと、可変の指定がどこを基準に設定されるかわからなくなり、コーディングに困ることになります。

今回の枠組みでは、基準となるフォントサイズを62.5%(10px相当)に設定し、それをもとに各所でrem指定でフォントサイズを記述できるようなものとなっています。

また、box-sizingをborder-boxとすることで、padding指定時にボックスサイズがはみ出ないように設定をしています。

float時の周り込み解除のクラスもほぼ必須なので入れてあります。(親要素にてclass="clearfix"で使用。)
 

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>ページタイトル</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- コンテンツ -->
</body>
</html>

 

style.css


@charset "UTF-8";

html {
  font-size:62.5%;
}
body {
  font-size:1.4rem;
}
*, *::before, *::after {
  box-sizing:border-box;
}
.clearfix::after {
  content:'';
  display:block;
  clear:both;
}

 

さいごに

コーディングをはじめる際の参考にして頂けると幸いです。
 

Follow me!