いつも自分が使ってるHTML5とCSSの基本セットです。レスポンシブ前提です。
cssも自分が普段使う要素しか入ってないので追加したり削除したりしてくださいな。
といっても自分がコピペするために書いたんじゃけどね。
HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js"></script>
<![endif]-->
</head>
<body>
<!-- コンテンツ -->
</body>
</html>レスポンシブじゃない場合
<meta name="viewport" content="width=device-width, initial-scale=1">
↓これに置き換え：widthはコンテンツの幅
<meta name="viewport" content="width=1100, maximum-scale=1">
↓これは削除
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>CSS
@charset "UTF-8";
/*-----------------------------------------------------------------
reset
-----------------------------------------------------------------*/
html, body, header, footer, main, section,
article, aside, menu, nav, div,
h1, h2, h3, h4, h5, h6, p, span, a,
address, cite, code, q, em, figure, img,
small, strong, dialog, time,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
body {
line-height:1;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-webkit-print-color-adjust: exact;
}
footer, header, main, section,
article, aside, figure, nav {
display: block;
}
nav ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
input, select {
vertical-align: middle;
}
button,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="submit"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
border-radius: 0;
outline: none;
}
img {
line-height: 1;
max-width: 100%;
height: auto;
}
/*-----------------------------------------------------------------
setting
-----------------------------------------------------------------*/
body {
font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
}
a {
color: #06f;
}
.cf:after {
content: '';
display: block;
clear: both;
}