【コピペで使える】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;
}
さいごに
コーディングをはじめる際の参考にして頂けると幸いです。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
