よく忘れるのでメモしておきます。
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="css/style.css"> <script type='text/javascript' src='js/script.js'></script> </head> <body> <h1>Hello World!!</h1> </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くらい