<!DOCTYPE html> <html lang="jp"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="twitter:card" content="" /> <meta name="twitter:site" content="" /> <meta property="og:title" content="" /> <meta property="og:type" content="" /> <meta property="og:url" content="" /> <meta property="og:image" content="" /> <meta property="og:description" content="" /> <meta property="og:site_name" content="" /> <meta property="fb:admins" content="" /> <meta property="og:site_name" content="" /> <meta property="og:description" content="" /> <!--[if lt IE 9]><a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">http://html5shiv.googlecode.com/svn/trunk/html5.js</a><![endif]--> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="css/style.css"> </head> </head> <body> </body> </html>
HTML5
【css】ロードアニメーション
HTMLのロード完了まで白い画面(gifでも突っ込んでアニメーション)を表示ー>削除
$(window).load(function(){ // $("#load").remove(); $("#load").css('-webkit-animation', 'blow ease-in forwards 1s'); $("#load").css('animation', 'blow ease-in forwards 1s'); }); #load { position: fixed; width: 100%; height: 100%; background: white; opacity: 1; } @-webkit-keyframes blow{ 100%{opacity: 0;} } @keyframes blow{ 100%{opacity: 0;} } <div id="load"></div>
【RWD】レスポンシブWeb基礎
CSS
/* PC用 */ /* 979px以下用(タブレット用)の記述 */ @media screen and (max-width: 979px){ } /* 767px以下用(タブレット用)の記述 */ @media screen and (max-width: 767px){ } /* 479px以下用(PC用)の記述 */ @media screen and (max-width: 479px){ }
HTML
&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no&amp;quot;&amp;gt; // 端末画面の幅に合わせる width=devic-width // 初期のズーム倍率 initial-scale=1 // 最小倍率 minimum-scale=1 // 最大倍率 maximum-scale=1 // ズームの操作 user-scalable=no