HTML5

html5テンプレート

コメントする 
<!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>
広告

【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;amp;lt;meta name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no&amp;amp;quot;&amp;amp;gt;

// 端末画面の幅に合わせる
width=devic-width

// 初期のズーム倍率
initial-scale=1

// 最小倍率
minimum-scale=1

// 最大倍率
maximum-scale=1

// ズームの操作
user-scalable=no