よく忘れるのでメモしておきます。
CSS、JavaScriptの外部ファイルを使用する際は、「*」を適宜修正すること！！
HTML5の雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World!!</h1>
<script type='text/javascript' src='js/script.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
console.log("Hello");
});
</script>
</body>
</html>
CSS3の雛形
@charset "UTF-8";
body {
font-family: "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif;
}
レスポンシブ
@media screen and (min-width:600px)
{
}
メモ
- 一番小さいスマホの画面サイズ 320px
- メディアクエリは600pxで切る
- ブレイクポイント
- スマートフォンとPCのレイアウトが切り替わるポイント
- タブレットは、768px以上と言われ、〜1050pxがPCと言われています。
- PCの横幅設定 980px〜1500pxくらい
