サイト構築時には、HTMLやCSS、javascriptの基本的な知識は最低限必要になります。動的サイトやWordPressなどのCMSを使うサイトの場合は、PHPの知識があるとなおさら良いです。
しかし、HTMLやCSSには多くのタグやCSSプロパティがあり、決められたデザインに沿ってコーディングするだけでも人によって記述方法は大きく異なります。ファイル自体の記述方法には特に決まりが無いので、個人差が出やすいと思います。多くの人が携わるサイトの場合は、チームでルールを決めるか、自身の中で何かしらのルールを作っておくと、他人が変更・確認するときもスムーズに進めることができます。
また、HTMLのheadタグや、CSSのリセット用の記述は毎回使えるテンプレートのようなものを作成しておき、それを毎回複製してコーディングすると、時間も短縮されるのでおすすめです。
今回は私がコーディング時に使用している使いまわし用HTML・CSSのテンプレートを紹介しますので、参考にしてみてください。
HTML・CSSのコーディング時におすすめの記述方法
それでは早速、HTML→CSSの順番に紹介していきます。必要であればコピーして頂いて問題ありません。
HTMLのコーディングテンプレート
こちらの記述はhtmlファイルの記述になります。metaタグ等は、値を除く記述（タイトル、ディスクリプションの内容以外）はほぼ毎回同じで問題ないので、テンプレートを作っておくと楽です。また、bodyタグ、子要素を除いた、header、main、footer、scriptも使う頻度が高いので一緒に記述に追加しておきます。
SNS用のogp部分がコメントアウトされていますが、今後使う可能性はあるが直近では使わない、などの場合はこのようにコメントアウトしておくと楽です。
※タイトルやディスクリプションのmetaの値は空にしてください。間違った社名やタイトルのまま公開すると危険です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<meta name="description" content="">
<meta name="format-detection" content="telephone=no">
<!-- favicon/webclipicon -->
<link rel="icon" href="favicon.ico" />
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!--クローラー
<meta name="robots" content="noindex,nofollow"> -->
<!-- ogp
<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="URL">
<meta property="og:type" content="website or article">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="URL">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image or summary">
<meta name="twitter:description" content="ページの説明">
<meta name="twitter:image:src" content="URL"> -->
<!-- css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header></header>
<main id="top"></main>
<footer></footer>
<script src="js/index.js" defer></script>
</body>
</html>CSSのコーディングテンプレート
次は、CSSの記述について説明していきます。サイトのコーディングをするときに主要ブラウザ（Google Chrome、Mozilla Firefox、Safari等）ごとにデフォルトで異なる余白設定などがされています。この設定が残っていることで、サイトの見た目がブラウザごとで違ってしまったり、崩れてしまう可能性があります。この状態を回避するために使いまわし用のCSSではスタイルリセット用の記述を追加します。
@charset "UTF-8";
/* CSS Document */
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, header, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{ font:inherit; font-size:100%; line-height:1; vertical-align:baseline; border:0; margin:0; padding:0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height:1; position:relative; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content:""; content:none; }
/*-----------------------------------------------------
Header
----------------------------------------------------- */
header{ background:#fff; width:100%; height:80px; display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0; z-index:5; }
header .header_menu{ display:flex; align-items:center; justify-content:center; }
header .logo{ width:270px; flex-shrink:0; }
/*@media screen and (max-width:1024px){}*/
@media screen and (max-width:800px) {
header{ height:60px; }
}
/*@media screen and (max-width:414px){}*/
/*-----------------------------------------------------
footer
----------------------------------------------------- */
footer{ width:min(940px,90%); padding:50px 0 25px; margin:0 auto; position:relative; }
footer::before{ content:""; background:#3371e5; width:100vw; height:100%; margin:0 calc(50% - 50vw); position:absolute; top:0; right:0; z-index:-1; }
footer .footer_menu{ margin-bottom:50px; display:flex; justify-content:space-between; align-items:flex-start; }
footer .footer_menu > div{ display:flex; }
footer .footer_menu ul{ margin:0 50px 0 0; }
footer .footer_menu a{ color:#fff; }
footer .copyright{ font-size:14px; line-height:26px; text-align:center; color:#fff; }
@media screen and (max-width:1024px) {
footer .footer_menu ul{ margin:0 30px 0 0; }
footer .footer_menu a{ font-size:13px; }
}
@media screen and (max-width:800px) {
footer{ padding:25px 0; }
footer .footer_menu{ display:none; }
}
/*@media screen and (max-width:414px){}*/
これが、上記CSSコードのコメントアウト「Reset」以下の記述となります。ここでは、余白や文字サイズ、箇条書きなどの設定を一括でリセットしています。
※ヘッダーとフッターもわかりやすいようにコメントアウトによって記述を分けていますが、自身の分かるように変更してください。
前へ
