初めに
よく使う記述で、毎度調べたりするのが面倒なので、ここに書き溜めていきます。
HTML編
HTML空の記述
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
CSSの読み込み
<!-- cssの読み込み -->
<link rel="stylesheet" href="./css/xxx.css">
<!-- メディアクエリーで条件付きのcssの読み込み -->
<link rel="stylesheet" href="./css/xxx.css" media="screen and (min-width: 640px)">
JavaScriptの読み込み
<!-- JavaScriptの読み込み -->
<script src="./js/xxx.js"></script>
全部head要素内に入れてることが多い。
jQueryなどのライブラリを先に読み込んで、他の外部ファイルに関しては、追加順で記述することが多い
(処理によっては前後させる)
CSS編
メディアクエリ
@media screen and (min-width: 640px) {
/* 横幅640pxより大きくなると適応 */
}
親要素をはみ出す
.body {
width: 640px;
margin: 0 auto;
}
.title {
margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);
background: #ccc;
}
.title span {
width: 640px;
}
↓↓こういうやつ↓↓
対応ブラウザ https://caniuse.com/#search=calc
対応ブラウザ https://caniuse.com/#feat=viewport-units
以上