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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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

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

transitionのよるホバーアクション

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

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

「transition」

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

「animation」

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



cssanimation.rocks



今回は「transition」を使い、画像をhoverさせた際に画像のキャプションを表示させる。
jQueryでも似たような物はありますが、今回の場合はキャプションをHTMLのhタグやPタグで表示させる事が出来るのがポイントです。


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>transitionのよるホバーアクション</title>
<link rel="stylesheet" href="caption.css">
</head>

<body>
<div id="container">
<ul>
<li id="figure">
<a href="#">
<img src="../img/ph01_l.jpg" alt="">
<div id="cap1">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>

<li id="figure2">
<a href="#">
<img src="../img/ph11_l.jpg" alt="">
<div id="cap2">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>

<li id="figure3">
<a href="#">
<img src="../img/ph19_l.jpg" alt="">
<div id="cap3">
<h3>CSS3によるキャプション</h3>
<p>ホバーするとキャプションが出て来ます。</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>

caption.css

@charset "utf-8";

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

/*レイアウト*/
#container {
  width: 960px;
  margin: 100px auto;
}
li {
  float: left;
  margin: 10px;
}

/*ホバーアクション*/
h3, p {
	padding: 10px;
	color: #FFF;
  text-align: center;
}

li#figure{
	display: block;
	position: relative;
	overflow: hidden;
	width: 300px; /*画像の幅と同じ*/
}
div#cap1 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: 1s;
	opacity: 0;
}
#figure:hover #cap1 {
	opacity: 1;
}



li#figure2 {
	position: relative;
	overflow: hidden;
	width: 300px;/*サムネイル画像の幅と同じ*/
}
#cap2 {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: 0.5s;
	opacity: 1;
}
#figure2:hover #cap2 {
	top: 0;
	left: 0;
}

#figure3 {
	position: relative;
	overflow: hidden;
	width: 300px;
}
#cap3 {
	position: absolute;
	bottom:-100%;
   left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	transition: .3s;
}
#figure3:hover #cap3 {
	bottom: 0;
	left: 0;
}


www.nxworld.net


photoshopvip.net

既存サイトのトレース|全面レイアウトその1

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。
今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。

f:id:yachin29:20170105130714p:plain

www.bloomingville.com

今回のレイアウトのポイント
  • フルスクリーンでのグリッドレイアウト
  • ドミナントカラーを使ったデザイン
  • 可変のブロックに固定値のマージン
  • ある程度スクロールするとグローバルナビがページ上部に固定

などです。



作例
http://yachin29.webcrow.jp/bloom/


生徒の作例
http://yoshi1004.webcrow.jp/content/kaguya/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全面レイアウト</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="container">
<header>
<h1>bloomingville</h1>
</header>
<nav>
<ul class="g_nav">
<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>

<div class="inner top">
<div class="photo"></div>
<div class="txt">
<h2>一段目</h2>
</div>
</div>

<div class="inner mid">
<div class="photo"></div>
<div class="txt">
<h2>二段目</h2>
</div>
</div>

<div class="inner bottom">
<div class="photo"></div>
<div class="txt">
<h2>三段目</h2>
</div>
</div>

</div>
</body>
</html>


スタイルシート

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

html,body,h1,h2,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  border:none;
  vertical-align:bottom;
}

body {
  background:#F0EDE7;
}

/*ディスプレイの解像度が1366px以上の時*/
#container {
  width:1348px;/*1366pxからスクロールバーの幅分を引いた数字*/
  margin:0 auto;
}
header {
  width:100%;
  height:160px;
  background:#E4DFD6;
}
h1 {
  width:440px;
  height:160px;
  margin:0 auto;
  background:url(../img/logo.svg) no-repeat center/contain;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
nav {
  width:100%;
  height:50px;
}
.g_nav {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.g_nav li {
  width:calc(100% / 6);
  float:left;
}
.g_nav a {
  display:block;
  line-height:50px;
  text-align:center;
  font-size:14px;
}
.g_nav a:hover {
  border-bottom:1px solid #CC66FF;
}

.inner {
  overflow:hidden;
  padding:0 10px;
  box-sizing:border-box;
  margin-bottom:10px;
}
.photo {
  width:calc(66.66% - 5px);/*演算子の前後に必ずスペース*/
  height:80vh;
}
.txt {
  width:calc(33.33% - 5px); 
  height:80vh;
}
.top .photo {
  float:left;
  background: url(../img/collection-01.jpg) no-repeat center/cover;
}
.top .txt {
  float:right;
  background:#EADEDB;
}
.mid .photo {
  float: right;
  background: url(../img/collection-02.jpg) no-repeat center/cover;
}
.mid .txt {
  float: left;
  background:#B3A0A6;
}
.bottom .photo {
  float: left;
  background: url(../img/collection-03.jpg) no-repeat center/cover;
}
.bottom .txt {
  float: right;
  background:#D0C0B0;
}
@media screen and (max-width:1365px) {
  #container {
  width:100%;
}
}

@media screen and (max-width:959px) {
.g_nav {
  width:100%;
  padding:0 10px;
  box-sizing:border-box;
}
.g_nav li {
  width:auto;
}
.g_nav a {
  display:block;
  line-height:50px;
  text-align:center;
  font-size:14px;
  margin-right:40px;
}
}
@media screen and (max-width:767px) {
.photo {
  width:100%;
  height:40vh;
  float:none;
}
.txt {
  width:100%; 
  height:60vh;
  float:none;
}
}

webデザインにおける配色

brian.hatenablog.jp



www.m-hand.co.jp



色彩と配色|伝わるデザイン

jQuery演習問題

【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザーに表示するよう記述しなさい。1つは「「スローで表示」もう1つは「1秒かけて表示」と表示の仕方をわけて記述しなさい。。


【問02】【問01】で記述した2つの正方形をそれぞれ「表示」ボタンと「非表示」ボタンで、表示・非表示を実行させるよう記述しなさい。




【問03】【問01】で記述した2つの正方形を、それぞれ「表示・非表示」ボタンで、表示・非表示を繰り返し実行されるよう記述しなさい。

広告を非表示にする

robots.txtで検索エンジンのクローラーを制御する

robots.txtとは

robots.txtとは、GoogleYahoo!などといった、自サイトの情報を取得(クロール)するプログラム(クローラー)を制御するためのテキストファイルです。例えば、特定のファイルや、ディレクトリをクロール禁止に指定することで、それらの関連ページや画像などを検索エンジンにインデックスさせないようにする、などといったことができます。

クロール最適化におけるrobots.txtの役割

robots.txtは不要なページに対するクローラーのアクセスをブロックすることができる。
つまりSEO上クロールが不要なページにはクローラーが回らないようになるのでクロールバジェットが無駄に消費されないようになる。結果、クローラーを回す必要のあるページに、より多くのクローラーが回るようになるためサイト全体のSEOが改善される。


robots.txtの作り方

サイト全体をブロックする場合

User-Agent:*
Disallow:/

Sitemap:http://example.com/sitemap.xml


User-Agent:
これは、どのクローラーの動きを制御するかを指定するもの。「*」は全てのクローラーに指示することを表す。


Disallow:
これは、クローラーのアクセスを制御するファイルを指定するもの。サイト全体をブロックする場合は「Disallow:/」。特定のフォルダーをブロックする場合、「Disallow: /フォルダー名/」




f:id:yachin29:20170418024926p:plain


robots.txt ファイルを作成する - Search Console ヘルプ



  • robots.txt コードはテキスト ファイルとして保存してください。
  • ファイルはサイトの最上位のディレクトリ(またはドメインのルート)に置いてください。
  • robots.txt ファイルには robots.txt という名前を付けてください。


googleが行なっているrobots.txtの処理
https://www.google.co.jp/robots.txt





support.google.com




robots.txtの書き方と効果的な活用法

スマホで見た時にjQueryを無効・有効にする(ユーザーエージェントで判別する方法)

前回の授業では

if($(window).innerWidth() <= 767){
  
  };

のようにwindowの横幅を基準に条件分岐させるパターンをやりました。

今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。

ユーザーエージェント

ユーザーエージェント(UserAgent)とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。


今回のパターンはPC・タブレットであればjQueryを有効に。スマホiPhoneAndroid)であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


逆にPC・タブレットであればjQueryを無効に。スマホiPhoneAndroid)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホiPhoneAndroid)とタブレットiPad)であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$(function(){
//ここにjQueryの記述
});
}


このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。