読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

PHPでの日付や時間を取得

PHP

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。


1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列)
2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ)

timezoneの設定

本来は「php.ini」ファイル上で設定しますが、設定していない場合は、phpファイルに直接、以下のように記述します。

<?php
date_default_timezone_set ( 'Asia/Tokyo' );
echo '現在は ' . date ( 'G時 i分 s秒' ) . ' です';
現在の日付を取得
echo date('Y年m月d日');
現在の時間を取得
echo date('H時i分s秒');
echo date('Y年m月d日 H時i分s秒');

様々なフォーマットでの表示例

f:id:yachin29:20161107134728j:plain


echo date('Y-m-d');
echo date('Y/n/d');
echo date('Y年');
echo date('n月');
echo date('M d, Y');
echo date('F d, Y');
echo date('l F d, Y');
echo date('g:i A');
echo date('G:i');

曜日を日本語で表示

Javascriptと同様、曜日の日本語表記は用意されていないので、配列を使って日本語の曜日を表示させてみましょう。

<?php 
$week = array('', '', '', '', '', '', '');

// date関数
$w = date('w');

echo $week[$w];
?>


上記のフォーマット一覧表にもあるように('w')で曜日を数字で取得します。
日曜0 → 土曜6
これを応用して、以下のように曜日を日本語表記させます。
日曜=0~土曜=6 

  1. $weekに日〜土の値を順番に格納した配列を用意する
  2. 変数$wに今日の曜日の番号を格納する(月曜は1)
  3. 変数$weekは0から始まるキーが連番で振られているので、$week[$w]とすると$week[1]と同等となる
  4. $weekの[1]は月曜なので、月と表示される

time関数

time — 現在の Unix タイムスタンプを返す

strtotime関数

この関数はある日付を指定すると、その指定した日付までのタイムスタンプが表示されます。(1970 年 1 月 1 日 00:00:00 UTC からの経過秒数)。 日付が指定されていない場合は現在日時に変換します

PHPの演習問題

PHP

問1

現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい

問2

数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい

問3

九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい


問4

「input.php」に「名前」と「年齢」を記入し、その値を「POST」で取得して「output.php」に表示させなさい


問5

問4の「input.php」に複数選択可のチェックボックスを追加し、その値を「POST」で取得して「output.php」に表示させなさい
(設問は自由)

広告を非表示にする

SVGを使ったアニメーション

HTML5+CSS3

carlphilippebrenner.com

tympanus.net

gardenstudio.com.br


SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp




今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stronke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置


今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。


jakearchibald.com



また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。





<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SVGのアニメーション</title>
<style>
body {
  background: #092951;
}
.box{
    width: 800px;
    height: 500px;
    margin: 50px auto;
}
.line {
  stroke:#fff; /*線の色*/
  stroke-width:1; /*線の太さ*/
  fill:#092951; /*塗りの色(bodyの背景色を指定する)*/
  stroke-dasharray:3000; /*破線の間隔*/
  stroke-dashoffset:3000; /*破線の開始位置*/
  -webkit-animation:DASH 2s ease-in-out 1s forwards;
  animation:DASH 2s ease-in-out 1s forwards;
}
@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    70% {stroke-dashoffset:1000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}
@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    70% {stroke-dashoffset:1000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

.bd{
    width: 640px;
    height: 100%;
    text-align: center;
    position: relative;
    padding: 10px 0;
}
div.bd div {
  background: #fff;
  position:absolute;
  transition:all 0.3s ease-in-out 0.3s;
}
.bd div.bdT{
  width: 0; height:1px; top:0; left:0;}
.bd div.bdB{
  width: 0; height:1px; bottom:0; right:0;}
.bd div.bdR{
  height:0; width :1px; right:0; top:0;}
.bd div.bdL{
  height:0; width :1px; left:0; bottom:0;}
.box:hover .bd div.bdT{width: 100%;}
.box:hover .bd div.bdB{width: 100%;}
.box:hover .bd div.bdR{height:100%;}
.box:hover .bd div.bdL{height:100%;}
</style>

</head>
<body>
<div class="box">
<div class="bd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="800px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<path class="line" d="M259.933,141.201l-9.209,39.868h-8.423c-0.3-8.01-2.004-14.954-5.112-20.833c-3.107-5.876-6.908-9.153-11.4-9.827
	c-2.323-0.298-5.038-0.523-8.146-0.674c-3.108-0.149-6.684-0.225-10.727-0.225h-27.297l-14.979,64.8h18.366
	c4.357,0,8.338-0.467,11.944-1.404c3.604-0.935,7.098-2.9,10.479-5.896c1.727-1.572,3.661-4.117,5.801-7.637
	c2.141-3.518,3.85-7.261,5.127-11.23h8.423l-14.375,62.554h-8.423c0.074-0.898,0.168-1.946,0.281-3.145
	c0.112-1.197,0.168-2.507,0.168-3.931c0-2.095-0.151-4.492-0.449-7.188c-0.3-2.695-0.862-4.717-1.685-6.064
	c-2.023-3.069-4.645-5.09-7.865-6.064c-3.22-0.972-7.039-1.46-11.457-1.46h-18.309l-12.903,55.816
	c-0.151,0.6-0.263,1.217-0.337,1.853c-0.075,0.638-0.112,1.255-0.112,1.853c0,1.648,0.337,3.089,1.011,4.324
	s1.834,2.341,3.481,3.313c1.197,0.601,3.555,1.236,7.075,1.91c3.519,0.674,6.401,1.086,8.647,1.234l-1.797,7.412H98.326l1.797-7.412
	c2.32-0.148,5.315-0.393,8.984-0.729c3.667-0.337,6.177-0.767,7.524-1.292c2.62-1.047,4.604-2.526,5.952-4.436
	s2.32-4.173,2.92-6.795l26.843-116.123c0.149-0.748,0.281-1.478,0.393-2.19c0.112-0.71,0.168-1.44,0.168-2.19
	c0-1.497-0.281-2.788-0.842-3.875c-0.562-1.084-1.741-2.078-3.538-2.976c-1.648-0.898-4.082-1.721-7.3-2.471
	c-3.22-0.748-5.916-1.235-8.086-1.46l1.797-7.412H259.933z"/>
<path class="line" d="M344.049,210.531c0,7.949-2.49,14.775-7.468,20.475c-4.98,5.699-12.224,10.237-21.731,13.61
	c-6.963,2.551-14.001,4.613-21.113,6.189c-7.114,1.576-14.975,2.887-23.584,3.936c0,11.831,2.19,20.871,6.57,27.122
	c4.38,6.253,10.799,9.378,19.26,9.378c7.486,0,14.094-1.871,19.822-5.615c5.728-3.743,11.36-9.322,16.902-16.734l6.401,4.717
	c-5.991,9.136-13.477,16.436-22.461,21.9c-8.984,5.464-18.306,8.197-27.964,8.197c-13.252,0-23.379-3.709-30.378-11.129
	c-7.001-7.418-10.5-17.947-10.5-31.587c0-9.442,1.478-18.455,4.436-27.036c2.957-8.581,7.28-16.43,12.971-23.55
	c5.54-6.97,12.334-12.59,20.383-16.862c8.047-4.271,16.938-6.408,26.672-6.408c10.781,0,18.772,2.193,23.977,6.581
	C341.446,198.101,344.049,203.707,344.049,210.531z M323.385,207.77c0-2.913-0.413-5.21-1.235-6.891
	c-0.825-1.681-1.873-2.932-3.145-3.753c-1.348-0.897-2.771-1.457-4.268-1.681c-1.499-0.225-3.032-0.337-4.604-0.337
	c-8.984,0-17.277,4.931-24.875,14.792c-7.6,9.862-12.41,22.15-14.431,36.868c5.24-0.748,11.155-1.811,17.744-3.194
	c6.587-1.381,12.053-3.192,16.396-5.434c6.213-3.211,10.837-7.34,13.87-12.384C321.869,220.712,323.385,214.718,323.385,207.77z"/>
<path class="line" d="M416.041,128.398L384.64,263.613c-0.678,2.846-1.314,5.69-1.915,8.535c-0.6,2.846-0.9,5.166-0.9,6.963
	c0,4.268,0.953,7.188,2.858,8.76c1.906,1.572,4.991,2.357,9.251,2.357c1.493,0,3.716-0.186,6.67-0.561
	c2.952-0.374,5.176-0.823,6.671-1.348l-1.685,7.188c-6.738,2.695-11.924,4.604-15.554,5.727c-3.632,1.123-7.731,1.686-12.297,1.686
	c-5.991,0-10.539-1.555-13.645-4.664c-3.108-3.109-4.661-6.949-4.661-11.52c0-1.723,0.168-3.52,0.505-5.394
	c0.337-1.872,0.804-4.232,1.404-7.081l27.371-118.335c0.525-2.323,0.881-3.934,1.069-4.833c0.186-0.898,0.281-2.023,0.281-3.373
	c0-2.695-0.451-4.774-1.353-6.236c-0.902-1.46-2.181-2.565-3.834-3.314c-1.58-0.674-3.573-1.125-5.98-1.35
	c-2.407-0.225-4.852-0.486-7.333-0.786l1.576-6.851l41.776-2.471L416.041,128.398z"/>
<path class="line" d="M476.007,288.32l-1.685,7.188c-6.889,2.771-12.393,4.699-16.509,5.783c-4.118,1.084-7.637,1.629-10.557,1.629
	c-5.991,0-10.483-1.557-13.477-4.666c-2.995-3.109-4.492-6.951-4.492-11.523c0-1.724,0.149-3.522,0.449-5.396
	c0.298-1.874,0.786-4.234,1.46-7.084l11.865-47.782c0.598-2.622,1.176-5.433,1.738-8.431c0.561-2.998,0.842-5.547,0.842-7.646
	c0-4.196-0.693-6.988-2.076-8.374s-4.204-2.081-8.463-2.081c-1.645,0-3.83,0.263-6.558,0.786c-2.728,0.525-4.802,0.974-6.221,1.348
	l1.685-7.188c5.836-2.62,11.074-4.566,15.714-5.84c4.64-1.272,8.308-1.909,11.003-1.909c6.136,0,10.59,1.462,13.358,4.385
	s4.153,6.857,4.153,11.804c0,1.35-0.15,3.187-0.449,5.51c-0.3,2.323-0.749,4.647-1.348,6.97l-11.934,47.78
	c-0.744,2.923-1.396,5.79-1.953,8.602c-0.559,2.812-0.836,5.115-0.836,6.914c0,4.272,0.951,7.196,2.854,8.771
	s4.982,2.359,9.235,2.359c1.416,0,3.448-0.186,6.099-0.561C472.555,289.294,474.589,288.845,476.007,288.32z M483.98,144.682
	c0,4.268-1.387,7.993-4.155,11.174c-2.771,3.183-6.216,4.773-10.332,4.773c-3.818,0-7.114-1.516-9.883-4.548
	c-2.771-3.032-4.155-6.494-4.155-10.388c0-4.117,1.385-7.71,4.155-10.781c2.769-3.069,6.064-4.604,9.883-4.604
	c4.268,0,7.749,1.442,10.444,4.324C482.633,137.514,483.98,140.864,483.98,144.682z"/>
<path class="line" d="M532.496,303.705c-13.104,0-23.454-3.821-31.053-11.465c-7.6-7.645-11.398-18.512-11.398-32.6
	c0-9.368,1.44-18.343,4.324-26.924c2.881-8.581,6.906-16.205,12.072-22.877c5.166-6.668,11.697-12.12,19.598-16.354
	c7.897-4.234,16.677-6.352,26.335-6.352c10.706,0,18.848,2.266,24.427,6.794c5.576,4.531,8.366,10.239,8.366,17.126
	c0,5.166-1.218,9.697-3.649,13.589c-2.435,3.894-6.084,5.84-10.95,5.84c-4.043,0-7.075-1.007-9.097-3.021
	c-2.021-2.015-3.032-4.254-3.032-6.717c0-2.388,0.81-5.654,2.427-9.795c1.618-4.141,2.906-7.482,3.862-10.021
	c-0.825-2.014-2.659-3.486-5.503-4.42c-2.846-0.934-5.803-1.4-8.872-1.4c-10.183,0-18.962,5.935-26.335,17.8
	c-7.376,11.868-11.063,26.411-11.063,43.63c0,10.633,2.379,19.074,7.143,25.325c4.762,6.253,11.193,9.378,19.293,9.378
	c7.273,0,13.742-1.946,19.404-5.84c5.66-3.893,11.079-9.396,16.254-16.51l6.412,4.717c-5.166,8.162-12.186,15.218-21.057,21.17
	C551.531,300.729,542.229,303.705,532.496,303.705z"/>
<path class="line" d="M664.921,285.721h-0.784c-1.646,1.35-3.607,3.055-5.889,5.115s-4.954,4.027-8.02,5.901
	c-2.916,1.874-6.093,3.503-9.532,4.889s-7.179,2.079-11.216,2.079c-10.842,0-19.347-3.895-25.515-11.689
	c-6.17-7.795-9.253-18.436-9.253-31.926c0-9.294,1.72-18.324,5.162-27.092c3.441-8.767,8.191-16.637,14.252-23.607
	c5.762-6.668,12.607-12.044,20.539-16.13c7.93-4.085,16.085-6.127,24.466-6.127c5.31,0,10.38,0.712,15.205,2.136
	c4.825,1.425,8.623,3.036,11.392,4.833l20.611-5.284l1.352,1.687l-17.109,72.517c-0.6,2.323-1.217,5.154-1.853,8.489
	c-0.638,3.336-0.954,5.791-0.954,7.363c0,4.272,0.898,7.159,2.697,8.657c1.798,1.499,4.836,2.248,9.109,2.248
	c1.426,0,3.452-0.225,6.077-0.674c2.626-0.449,4.649-0.935,6.075-1.459l-1.688,7.188c-6.753,2.695-11.78,4.643-15.081,5.84
	c-3.301,1.196-7.313,1.797-12.04,1.797c-5.402,0-9.679-1.574-12.828-4.721C666.945,294.602,665.221,290.592,664.921,285.721z
	 M681.105,214.671c0-2.473-0.264-4.833-0.787-7.083c-0.523-2.25-1.61-4.348-3.258-6.298c-1.499-1.874-3.559-3.373-6.181-4.497
	c-2.622-1.123-5.917-1.687-9.886-1.687c-5.471,0-10.789,1.8-15.957,5.397c-5.169,3.598-9.813,8.432-13.931,14.503
	c-3.896,5.698-7.08,12.594-9.551,20.688c-2.473,8.097-3.708,16.304-3.708,24.623c0,4.573,0.262,8.621,0.784,12.145
	s1.532,6.745,3.027,9.669c1.419,2.85,3.474,5.061,6.164,6.635s6.091,2.359,10.2,2.359c4.184,0,8.574-1.179,13.17-3.541
	c4.596-2.361,9.771-6.503,15.526-12.426L681.105,214.671z"/>
</svg>
<div class="bdT"></div>
<div class="bdB"></div>
<div class="bdR"></div>
<div class="bdL"></div>
</div> <!--/.bd-->
</div> <!--/.box-->
</body>
</html>

生徒の作例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>AKIRAsvg</title>
</head>
<style>
body {
  background:#000;
  }
.box {
  width: 500px;
  height: 300px;
  margin: 150px auto;
}
.japanese{
  width: 500px;
  height: 300px;
  margin: 100px auto;
  margin-top: -250px;
}
.line {
  stroke:#fff;/*線の色*/
  stroke-width:0.5;/*線の太さ*/
  fill:#000;/*塗りつぶしの色(bodyと同じ色を指定)*/
  stroke-dasharray: 3000;/*破線の間隔*/
   stroke-dashoffset: 3000;/*破線の開始位置*/
  animation:DASH 6s ease-in-out 1s forwards;
  }

@keyframes DASH{
  0%{stroke-dashoffset:3000;fill:#000;}
  50%{stroke-dashoffset:2000;fill:#000;}
  100%{stroke-dashoffset:0;fill:#fff;}
}

  
.red{
  stroke:#C00;/*線の色*/
  stroke-width:0.5;/*線の太さ*/
  fill:none;/*塗りつぶしの色(bodyと同じ色を指定)*/
  stroke-dasharray: 3000;/*破線の間隔*/
  stroke-dashoffset: 3000;/*破線の開始位置*/
   animation:JA 5s ease-in-out 2s forwards;
  }

  @keyframes JA{
  0%{stroke-dashoffset:3000;fill: rgba(0,0,255,0) ;}
  80%{stroke-dashoffset:2000;fill:#C00;}
  100%{stroke-dashoffset:0;fill:#C00;}
}
</style>
<body>
<div class="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" width="500px"
	 y="0px" viewBox="170.1 -34.6 276 128.6" enable-background="new 170.1 -34.6 276 128.6" xml:space="preserve">
<g>
	<path class="line" d="M215.6-34.6l15,128.6h-23.9l-1.4-28.8h-9.4L194.3,94h-24.2l13.3-128.6H215.6z M204.5,45.3c-1.3-11.7-2.7-29.7-4-51.2
		c-2.7,24.6-4.3,42.6-5,51.2H204.5z"/>
	<path class="line"d="M291.7-34.6l-15,58.1L293.1,94h-24.2l-10.6-55.1V94H235V-34.6h23.3v50l11.7-50H291.7z"/>
	<path class="line"d="M321-34.6V94h-23.3V-34.6H321z"/>
	<path class="line"d="M328.6-34.6h15.7c12.3,0,17.9,0.6,22.2,1.8c4.4,1.2,7.9,4.3,10.7,9.3c2.8,5,4.1,13,4.1,23.9c0,10-1,16.7-2.9,20.2
		c-1.9,3.4-5.8,5.5-11.5,6.2c5.2,1.6,8.7,3.8,10.4,6.6c1.8,2.8,2.9,5.3,3.3,7.6c0.4,2.3,0.7,8.6,0.7,19V94h-21.5V51.3
		c0-6.9-0.4-11.1-1.3-12.8c-0.8-1.6-3.1-2.5-6.7-2.5v58h-23.3V-34.6z M352-12.6V16c2.9,0,5-0.5,6.2-1.5c1.2-1,1.8-4.4,1.8-10v-7.1
		c0-4.1-0.6-6.8-1.7-8C357.1-12,355-12.6,352-12.6z"/>
	<path class="line"d="M431.1-34.6l15,128.6h-23.9l-1.4-28.8h-9.4L409.8,94h-24.2l13.3-128.6H431.1z M420.1,45.3c-1.3-11.7-2.7-29.7-4-51.2
		c-2.7,24.6-4.3,42.6-5,51.2H420.1z"/>
</g>
</svg>

<div class="japanese">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
	 y="0px" width="500px""
	  viewBox="0 0 259 146" enable-background="new 0 0 259 146" xml:space="preserve">
<g>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M110,0c5,0,10,0,15,0c0.333,0.667,0.667,1.333,1,2
		c0.667,0,1.333,0,2,0c0,2.667,0,5.333,0,8c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0
		c-0.333,0.667-0.667,1.333-1,2c0.333,0,0.667,0,1,0c0,2.667,0,5.333,0,8c0.334,0,0.666,0,1,0c0,1.333,0,2.667,0,4
		c0.334,0,0.666,0,1,0c0,4,0,8,0,12c0.334,0,0.666,0,1,0c0,1,0,2,0,3c0.334,0,0.666,0,1,0c0.334,1,0.666,2,1,3c3,0,6,0,9,0
		c0.333-0.667,0.667-1.333,1-2c2,0.667,4,1.333,6,2c1.313,5.012,4.551,4.775,5,12c-2.078,1.094-1.771,1.611-5,2c0,0.667,0,1.333,0,2
		c-2.275,0.167-2.635,0.15-4,1c0,0.333,0,0.667,0,1c-1,0-2,0-3,0c0,0.333,0,0.667,0,1c-1.836,1.56-1.909,1.471-2,5
		c3.097,1.643,1.796,1.898,7,2c0,1.333,0,2.667,0,4c2.666,0,5.334,0,8,0c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0
		c0,1.333,0,2.667,0,4c-1,0-2,0-3,0c0,0.666,0,1.334,0,2c-4.602,0.514-5.04,2.931-9,4c-0.438,4.068-1.112,4.48,0,8
		c0,1.333,0,2.667,0,4c0.333,0,0.667,0,1,0c0,0.666,0,1.334,0,2c0.333,0,0.667,0,1,0c0,2,0,4,0,6c0.333,0,0.667,0,1,0
		c0.667,2,1.333,4,2,6c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0
		c0,1.333,0,2.667,0,4c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0c0,2,0,4,0,6c0.333,0,0.667,0,1,0
		c0.333,2,0.667,4,1,6c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0.84,3.631,4.613,7.614,3,10
		c-0.333,1.333-0.667,2.667-1,4c-2.333,0-4.667,0-7,0c0-0.667,0-1.333,0-2c-1,0-2,0-3,0c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0
		c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0c-0.333-1.333-0.667-2.667-1-4c0.333,0,0.667,0,1,0c0.573-2.01-0.12-0.865,1-2
		c1.14,1.139,0.004,0.398,2,1c-0.443-2.477-0.919-3.671-1-7c-0.333,0-0.667,0-1,0c0,0.333,0,0.667,0,1c-0.333,0-0.667,0-1,0
		c0,1,0,2,0,3c-0.667,0-1.333,0-2,0c-0.667-3.333-1.333-6.667-2-10c-0.667,0-1.333,0-2,0c-0.333-1.333-0.667-2.667-1-4
		c-0.667,0-1.333,0-2,0c1.802-5.065-1.796-6.973-3-12c-0.667,0-1.333,0-2,0c-0.385-2.273-4.563-11.301-6-12c-1.333,0-2.667,0-4,0
		c0,0.666,0,1.334,0,2c-1,0-2,0-3,0c0,0.666,0,1.334,0,2c-5.294,0.621-4.653,3.249-10,4c0,0.667,0,1.333,0,2
		c-3.477,0.018-6.883-0.635-9-1c0,0.333,0,0.667,0,1c-0.333,0-0.667,0-1,0c-1.348-0.894,1.215-1.694-1-2c0,0.333,0,0.667,0,1
		c-1.511,0.669-1.649,0.757-4,1c0.333-3.333,0.667-6.667,1-10c0.667,0,1.333,0,2,0c0-0.666,0-1.334,0-2c3.229-0.789,3.449-1.855,8-2
		c0-0.666,0-1.334,0-2c2,0,4,0,6,0c1.439-2.465,3.138-2.787,4-6c0.667,0,1.333,0,2,0c0.465-2.589,0.959-4.424,1-8
		c-4.253-0.817-7.083-1.964-13-2c0-0.667,0-1.333,0-2c-2.333,0-4.667,0-7,0c-0.667-3.333-1.333-6.667-2-10c0.667,0,1.333,0,2,0
		c0.333-1.333,0.667-2.667,1-4c1,0,2,0,3,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0.683-3.305,1.753-3.839,2-8
		c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0c0.574-2.01-0.12-0.865,1-2c-0.333-2-0.667-4-1-6
		c-0.333,0-0.667,0-1,0c0-0.667,0-1.333,0-2c-0.333,0-0.667,0-1,0c0-3.333,0-6.667,0-10c-0.333,0-0.667,0-1,0c0-0.667,0-1.333,0-2
		c-0.333,0-0.667,0-1,0c-0.333-1.333-0.667-2.667-1-4c-0.333,0-0.667,0-1,0c0-1.333,0-2.667,0-4c-0.333,0-0.667,0-1,0
		c-0.333-2-0.667-4-1-6c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0C110,1.333,110,0.667,110,0z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M203,18c9.999,0,20.001,0,30,0c0,0.333,0,0.667,0,1
		c1.553,0.864,2.419,0.823,5,1c0.064,3.404-0.611,11.709,2,12c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0
		c0,0.667,0,1.333,0,2c-1.333,0-2.667,0-4,0c0,0.667,0,1.333,0,2c-2.926,0.678-2.425,1.749-3,2c-2,0-4,0-6,0
		c-0.333,0.667-0.667,1.333-1,2c-3.666,0-7.334,0-11,0c0,0.333,0,0.667,0,1c-1.453,0.816-1.703,0.696-4,1
		c0.333-0.667,0.667-1.333,1-2c-1.333,0-2.667,0-4,0c0-0.667,0-1.333,0-2c-3,0-6,0-9,0c0-0.667,0-1.333,0-2
		c-3.215-0.77-2.154-1.508-6-2c0.333-3.333,0.667-6.667,1-10c3.541-0.38,3.036-1.241,6-2c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0
		c-0.333-0.667-0.667-1.333-1-2c1.333,0,2.667,0,4,0C203,19.333,203,18.667,203,18z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M60,26c1.333,0.333,2.667,0.667,4,1c0,0.333,0,0.667,0,1
		c3.667,0,7.333,0,11,0c0,0.667,0,1.333,0,2c1,0,2,0,3,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0.667,3.333,1.333,6.667,2,10
		c0.667,0,1.333,0,2,0c0,1.333,0,2.667,0,4c0.667,0,1.333,0,2,0c0.333,2.667,0.667,5.333,1,8c-0.333,0-0.667,0-1,0
		c0,1.333,0,2.667,0,4c-2.739,0.645-2.276,1.309-5,2c0,0.667,0,1.333,0,2c-2.739,0.645-2.276,1.309-5,2c0,0.667,0,1.333,0,2
		c-1,0-2,0-3,0c-0.871,3.428-2.068,2.575-3,6c-0.667,0-1.333,0-2,0c-0.333,2-0.667,4-1,6c-2.739,0.645-2.276,1.309-5,2
		c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0
		c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,2,0,4,0,6c-0.333,0-0.667,0-1,0c-0.264,1.668,0.943,1.744,1,2c0,2,0,4,0,6
		c-0.667,0.333-1.333,0.667-2,1c-0.333,1-0.667,2-1,3c-1,0-2,0-3,0c0,0.333,0,0.667,0,1c-1.398,0.872-1.729,0.728-4,1
		c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0
		c-0.333,1.333-0.667,2.667-1,4c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-2,0-4,0-6,0c-0.809,1.314-0.704,1.178-2,2
		c0.333,1.333,0.667,2.667,1,4c-3.541,0.38-3.036,1.24-6,2c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c-0.333,2-0.667,4-1,6
		c-4.336-0.488-2.641-1.423-7-2c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0.333-2,0.667-4,1-6c-0.667,0-1.333,0-2,0c-0.333-2-0.667-4-1-6
		c0.333,0,0.667,0,1,0c0.333-2,0.667-4,1-6c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2
		c7.546-0.133,4.799-2.522,10-4c0-0.667,0-1.333,0-2c1,0,2,0,3,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0.333-1.333,0.667-2.667,1-4c0.333,0,0.667,0,1,0c0-2,0-4,0-6c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0
		c0-1.333,0-2.667,0-4c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0c0-1,0-2,0-3c0.333,0,0.667,0,1,0
		c0.333-3,0.667-6,1-9c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0c0-0.667,0-1.333,0-2c0.333,0,0.667,0,1,0
		c1.863-3.511,2.77-6.93,3-12c4.162-0.147,4.722-1.258,8-2c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c2.667,0,5.333,0,8,0c0.944-1.801,1.385-1.575,2-4c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0.333-2,0.667-4,1-6c-3,0-6,0-9,0c0,0.667,0,1.333,0,2c-2,0-4,0-6,0c0,0.667,0,1.333,0,2
		c-2,0-4,0-6,0c0,0.333,0,0.667,0,1c-0.667,0-1.333,0-2,0c0,0.333,0,0.667,0,1c-2.375,0.883-5.131-0.333-7,1c-0.333,1-0.667,2-1,3
		c-1.714,2.126-4.118,1.885-8,2c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-2.333,0-4.667,0-7,0
		c0-0.667,0-1.333,0-2c-4.164-0.496-4.688-1.89-10-2c0-0.667,0-1.333,0-2c-1.333,0-2.667,0-4,0c0-0.667,0-1.333,0-2c-1,0-2,0-3,0
		c0-1.333,0-2.667,0-4c-0.667,0-1.333,0-2,0c0-1.333,0-2.667,0-4c1.333,0,2.667,0,4,0c0.333-2,0.667-4,1-6c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c1,0,2,0,3,0c0.94-4.074,2.933-4.166,8-4c0,0.667,0,1.333,0,2
		c2-0.333,4-0.667,6-1c0-0.333,0-0.667,0-1c2.667,0,5.333,0,8,0c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0
		c0.333-0.667,0.667-1.333,1-2c6,0,12,0,18,0c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0C60,27.333,60,26.667,60,26z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M44,28c0.667,0,1.333,0,2,0c0,0.333,0,0.667,0,1
		C43.99,28.426,45.135,29.12,44,28z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M258,42c0.333,2.667,0.667,5.333,1,8
		c-0.678,2.492-2.369,5.184-3,8c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-5.1,0.255-3.494,1.393-8,2c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-2.927,0.684-3.274,1.113-4,4c-3.858,1.006-3.142,2.93-7,4c0,0.666,0,1.334,0,2
		c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c-0.684,2.927-1.113,3.274-4,4c-0.931,3.636-3.08,4.053-4,8
		c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c-0.684,2.927-1.113,3.274-4,4c0,0.666,0,1.334,0,2c-2,0-4,0-6,0
		c-0.333,0.666-0.667,1.334-1,2c-1,0-2,0-3,0c0,0.334,0,0.666,0,1c-1.417,0.873-1.731,0.681-4,1c0,0.667,0,1.333,0,2
		c-1.333,0-2.667,0-4,0c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c-0.746,3.248-2.785,5.214-6,6c-0.789-3.229-1.855-3.449-2-8
		c1.333,0,2.667,0,4,0c0.944-1.801,1.385-1.574,2-4c3.843,0.602,2.749,0.353,7,0c0.77-3.215,1.508-2.154,2-6c1.666,0,3.334,0,5,0
		c0-0.334,0-0.666,0-1c-0.333,0-0.667,0-1,0c0.333-1,0.667-2,1-3c0.667,0,1.333,0,2,0c0-0.666,0-1.334,0-2c0.667,0,1.333,0,2,0
		c0.963-6.92,1.668-8.33,10-8c0-0.666,0-1.334,0-2c3.541-0.38,3.036-1.24,6-2c0.594-3.715,0.58-2.289,0-6c-2,0-4,0-6,0
		c-0.944,1.801-1.385,1.574-2,4c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-3,0-6,0-9,0c-0.333-0.666-0.667-1.334-1-2
		c-1.333,0-2.667,0-4,0c0-0.334,0-0.666,0-1c-1-0.334-2-0.666-3-1c-0.333-0.666-0.667-1.334-1-2c-1.666,0-3.334,0-5,0
		c-0.333-0.666-0.667-1.334-1-2c-0.667,0-1.333,0-2,0c-1.354-5.211-2.194-3.563-1-10c0.667,0,1.333,0,2,0
		c0.77-3.215,1.508-2.155,2-6c3,0,6,0,9,0c0-0.667,0-1.333,0-2c3.666,0,7.334,0,11,0c1.928-3.209,1.687-0.445,4-2
		c0-0.333,0-0.667,0-1c-0.333,0-0.667,0-1,0c0-0.333,0-0.667,0-1c1.333,0,2.667,0,4,0c0-0.667,0-1.333,0-2c1-0.333,2-0.667,3-1
		c0-0.333,0-0.667,0-1c0.667,0,1.333,0,2,0c0.333-0.667,0.667-1.333,1-2c1,0,2,0,3,0c0.333-0.667,0.667-1.333,1-2
		c1.666,0,3.334,0,5,0c0.333-0.667,0.667-1.333,1-2c5.333,0,10.667,0,16,0c0-0.333,0-0.667,0-1c0.333,0,0.667,0,1,0
		c0,0.333,0,0.667,0,1c0.667-0.333,1.333-0.667,2-1c0,0.333,0,0.667,0,1C250.666,42,254.334,42,258,42z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M173,60c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0C173,61.333,173,60.667,173,60z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M166,64c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0C166,65.333,166,64.667,166,64z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M175,66c-0.333,1.333-0.667,2.667-1,4c-1,0-2,0-3,0
		c0,0.667,0,1.333,0,2c-1.666,0.333-3.334,0.667-5,1c0-0.333,0-0.667,0-1c-1.139-1.139-0.398-0.003-1-2c0.974-0.52,1.772-1.875,2-2
		c1,0,2,0,3,0c0-0.333,0-0.667,0-1C171.506,66.078,172.446,66.154,175,66z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M160,68c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0-0.333,0-0.667,0-1
		c0.333,0,0.667,0,1,0C159.14,67.861,158.004,68.602,160,68z"/>
</g>
</svg>
</div><!--/japanese/-->
</div><!--/box/-->

</body>
</html>

参考サイト
SVGのアニメーションで線を引く方法まとめ(IEへの対応も)|2.IDEA

CSS3によるアニメーション・animation

HTML5+CSS3

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い


「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能


「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要

http://caniuse.com/などのサイトでブラウザサポート状況を確認する。

animation関連プロパティ

animation-name 必須

@keyframes で定義した名前を指定します。これを指定していないとアニメーションは実行されません。

animation-duration 必須

一回分のアニメーションを実行する時間の長さを指定します。

animation-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)
ease-in
ease-out
ease-in-out
linear

weboook.blog22.fc2.com


animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値の 0 だとただちに実行されます。

animation-iteration-count (初期値は1)

アニメーションを繰り返す回数を数字で指定します。無限ループにするには infinite を指定。

animation-direction

アニメーションを繰り返す方向を指定します。

normal … 通常の方向で再生(初期値)
alternate … 奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って…という具合)
reverse … 逆方向に再生
alternate-reverse … alternate の逆方向に再生

animation-fill-mode

アニメーションの再生前後の状態を指定します。
none(初期値)
forwards … 再生後、最後のキーフレームの状態を保持
backwards … 再生前、最初のキーフレームの状態を適用
both … forwards と backwards の両方を適用



背景色が移り変わるアニメーション

body {
  background-color: #0CC;
  animation: bg-color 10s linear infinite;
  -webkit-animation: bg-color 10s linear infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #0CC; }
}
@keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

参考サイト

CSS3でアニメーション!transitionとanimationまとめ(サンプル付き) – フラップイズム



CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう | Webクリエイターボックス


www.nxworld.net




背景にグラデーションを掛けたアニメーション

f:id:yachin29:20151002002549j:plain


便利なジェネレーション

www.gradient-animator.com




SVGによるアニメーション

postd.cc

jakearchibald.com

フルスクリーンレイアウトのレスポンシブデザイン

レスポンシブデザイン

f:id:yachin29:20161026201426p:plain


スマホレイアウト

f:id:yachin29:20161027204011p:plain


今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。

全面レイアウトの場合、そのような考えで画像をサイズを決めなければいけないか、しっかりと理解しましょう。ホバーに関してはモデルとなっている既存サイトの動きを確認し、CSS3のtransitionを使って動かしてみましょう。


今まで授業で習った事を上手く組み合わせれば、今回のようなレイアウトのRWDサイトも問題無く制作出来るので、自分なりに色々と工夫をしてみましょう。
それと同時に、今まで習った基礎的な部分をしっかりと復習し必ず理解しておきましょう。

今回はスクリーンのサイズを幅1800px・高さ900pxを想定して背景画像を用意しましょう。



参考サイト
www.vogue.co.jp

http://mosaic-theme-active.myshopify.com/


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="loader_bg">
<div id="loader">
<h1><img src="img/logo.svg" alt=""></h1>
</div>
</div>


<div id="container">

<div class="top top_L">
<div class="cap">
<h2>画像の見出し</h2>
<p>説明文</p>
<p><a href="#">リンク</a></p>
</div><!--/.cap-->
</div><!--/.top top_L-->

<div class="top top_R">
<div class="cap">
<h2>画像の見出し</h2>
<p>説明文</p>
<p><a href="#">リンク</a></p>
</div><!--/.cap-->
</div>
<div class="bottom btm_L">
<div class="cap">
<h2>画像の見出し</h2>
<p>説明文</p>
<p><a href="#">リンク</a></p>
</div><!--/.cap-->
</div>
<div class="bottom btm_C">
<div class="cap">
<h2>画像の見出し</h2>
<p>説明文</p>
<p><a href="#">リンク</a></p>
</div><!--/.cap-->
</div>
<div class="bottom btm_R">
<div class="cap">
<h2>画像の見出し</h2>
<p>説明文</p>
<p><a href="#">リンク</a></p>
</div><!--/.cap-->
</div>
</div>
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,p {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#FFF;
}
img {
vertical-align:bottom;
}



#container {
overflow:hidden;
}
.top {
width:50%;
height:50vh;
float:left;
}
.bottom {
width:33.33%;
height:50vh;
float:left;
}
.top_L {
background:url(img/L1.png) no-repeat center/cover;
}
.top_R {
background:url(img/L2.png) no-repeat center/cover;
}
.btm_L {
background: url(img/S1.png) no-repeat center/cover;
}
.btm_C {
background: url(img/S2.png) no-repeat center/cover;
}
.btm_R {
background: url(img/S3.png) no-repeat center/cover;
}

/*ホバーアクション*/
.cap {
width:100%;
height:100%;
padding-top:160px;
background:rgba(255,0,51,0);
transition:0.2s;

}
h2,p {
text-align:center;
margin-bottom:60px;
color:#FFFFFF;
}
.cap:hover {
padding-top:60px;
background:rgba(255,0,51,1);
}

h1 {
width:160px;
height:160px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
img {
max-width:100%;
}

#loader_bg {
width:100%;
height:100vh;
background:#000000;
position:fixed;
}
/*スマホレイアウト*/
@media screen and (max-width:767px) {
.top {
width:100%;
height:300px;
float:none;
margin-bottom:200px;
position:relative;
}
.bottom {
width:100%;
height:300px;
float:none;
margin-bottom:200px;
position:relative;
}

.cap {
width:100%;
height:180px;
padding-top:20px;
transition:none;
position:absolute;
top:100%;
left:0;

}
h2,p {
margin-bottom:20px;
color:#000;
}
a {
color:#222;
}
.cap:hover {
padding-top:20px;
background:transparent;
}

}
$(function() {
if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(300);
});
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});
//10秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout(stopload(),10000);
});
function stopload(){
  $('#container').css('display','block');
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
};
}else {
 $('#loader-bg').css('display','none');
}
});

ローディング中にアニメーション画面を表示させる

Webサイト制作 jQuery レスポンシブデザイン

liginc.co.jp


photoshopvip.net


uxmilk.jp


最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また、テキストだけが先に表示され、一瞬ですがレイアウトが崩れてしまったりしてしまいます。

もちろん1番良いのは画像や動画のデータを出来る限り軽くする事ですが、場合によっては、サイトのデータが読み込まれるまでローディング画像を擬似的に用意する事でユーザーがストレスを感じ難くしてあげるなどの方法もあります。
本来はgifアニメなどでローディング画像を作るのが一般的ですが、今回はCSS3のアニメーションを使って、動きのある画像を見せる事でよりストレスの軽減を図ります。
すべての動きをCSS3のアニメーションで動かす事も一応出来ますが、jQueryと使い分ける事で、よりスムーズに表示させましょう。






イメージとしては、読み込み中はメインコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にする、というイメージです。

CSS3でやる事

ローディングアニメの動き

jQUeryでやる事

ローディング画像のレイヤーの表示・非表示のコントロール



目隠し用のローディング画像があるレイヤー(#containerの外)

<body>
<div id="loader-bg">
<div id="loader">
<img src="ローディング画像">
</div>
</div>

<div id="container">
  メインコンテンツ
</div>
</body>
jQueryでの「ready」と「load」と違いを理解する

両方ともjQueryを呼び出す為のものですが、呼び出すタイミングが微妙に違います。

「ready」はロードされて操作が可能になったタイミングで実行するという意味です。
「load」はロードされて画像などの関連データの読み込みが全て完了したら実行します。


スマホ時には必要ないので、767px以上の時だけの条件文を加える

<script>
if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(300);
});
 
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).fadeOut(1000);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});
 
//10秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',10000);
});
function stopload(){
  $('#container').css('display','block');
  $('#loader-bg').delay(3000).fadeOut(1000);
  $('#loader').delay(2000).fadeOut(1000);
};
}
</script>


しかし、このままではスマホ時にスクリプトが適応されていない為、ずっとカバーがかかったままになってしまいます。
なので、if文に767px以下では「$('#loader-bg').css('display','none');」が適用されるようにスクリプトを追加しましょう。

ハンバーガーメニューの実装

jQuery
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スクロールすると固定になるナビ</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="nav2.js"></script>
</head>

<body>
<div id="container">
<header>
<a href="#"><h1>Bloomingville</h1></a>
<nav>
<p id="btn"><span id="hum"></span></p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Design philosophy</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header><!--/header-->
<div id="content"></div>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


#container {
    background:#f0ede7;
}
header {
  width:100%;
  padding-top: 30px;
  background:#e4dfd6;
}
header > a {
  display: block;
  width: 500px;
  margin: 0 auto;
}
h1 {
  background: url(../img/logo.svg) no-repeat center center/contain;
  height: 100px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 30px;
  display: block;
}
nav {
  width:100%;
  height: 50px;
  background:#f0ede7;
	transition:0.1s;
}
nav ul {
  width:70%;
  margin:0 auto;
  overflow: hidden;
}
nav li {
  float:left;
  width:calc(100% / 6);
}
nav li a {
  display: block;
  padding-top:20px;
  padding-bottom:16px;
  font-size: 14px;
  text-align:center;
  color:#222;
}
nav li a:hover {
  border-bottom: 4px solid #96F;
  padding-bottom:12px;
}


#content {
height: 2000px;
background: #D9C0BC;
}

/*ナビゲーションのスクロール*/

header.fixed > #nav {
  position:fixed;
  left:0;
  top:0;
}

header.fixed h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  width: 140px;
  height: 50px;
  position: fixed;
  left: 20px;
  top: 0;
  z-index: 100;
}





@media screen and (max-width:767px){



header {
  width:100%;
  height: 40px;
  background:#e4dfd6;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 10px 10px 0;
}
header > a {
  display: block;
  width: 200px;
  float: right;
}
h1 {
  background:url(../img/logo-small.svg) no-repeat center center/contain;
  height: 40px;
  margin-bottom: 0;

}
nav {
  background:#e4dfd6;
}
#btn {
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius: 4px;
position: relative;
margin-left: 20px;
}
#hum {
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:before {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:-20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
  transition: 0.2s;
}

#hum.click {
  background: transparent;
}
#hum.click:before {
  top:0;
  transform: rotate(45deg);
}
#hum.click:after {
  bottom: 0;
  transform: rotate(135deg);
}

nav ul {
  width:100%;
  position: fixed;
  top: 60px;
  padding-left: 10px;
  background:#f0ede7;
  display: none;
}
nav li {
  float:none;
  width:100%;
  line-height: 30px;
}
nav li a {
  text-align:left;
}
nav li a:hover {
  border-bottom: none;
  padding-bottom:0;
}

header.fixed h1 {
display: none;
}
}
// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				$(window).scroll(function() {
					if ($(window).scrollTop() > 10) {
						$('header').addClass('fixed').slideDown(900);
					} else {
						$('header').removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
	$('#hum').not(':animated').toggleClass('click');
	$('nav ul').not(':animated').slideToggle(200);
	});
});

修正後のjQuery

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				var $header = $('header');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 160) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});
$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 } 
});
});