webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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

javascriptでの型変換と数値判定「isNaN() 関数」

javascriptでは文字列と数値は明確に区別されています。
扱う値が文字列と数値では結果が全く変わってしまうので、常に型のチェックをする必要があります。


文字列を数値型に型変換するには主にNumber(), parseInt(), parseFloat()の3種類があります。
3つとも文字列を数値型に変換する、という事では一緒ですが、それぞれ変換する手順などが違う為、注意が必要です。

  • Number()

数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。

  • parseInt()

文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。

  • parseFloat()

文字列を実数に変換する。引数に数字以外の文字が含まれている場合は無視される。

parseInt()

ここではparseInt()の使い方を覚えましょう。


parseInt('123'); // 123(整数)
parseInt('2.8'); // 2(小数点以下を切り捨てる)
parseInt('123a'); // 123(数字以外は無視)

<h1>入力された値を整数に変換する</h1>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<p id="ans">ここに表示する</p>
<script>
function action(){
  var num=prompt();
  num=parseInt(num);

  var str=document.getElementById('ans');
 str.textContent='入力された値は整数「' + num + '」です。';
 
}
</script>



JavaScriptで、ある値が数値かどうかを判定する場合は、「isNaN() 関数」を使用します。isNaN() 関数の使い方と注意点を覚えましょう。
isNaN() 関数は、JavaScript に組み込まれている関数です。isNaN() は、引数が数値でない場合に true を返し、数値の場合は false を返します。これによって、特定の値が数値か否かを判定することができます。なお、NaN とは Not a Number(非数)を表します。

<button onclick="check();">ボタン</button>
<p id="ans">答え</p>
<script>
var check = function() {
var num=prompt();
var str = document.getElementById('ans');
  if(isNaN(num)){
    str.textContent='数値以外が入力されています';
  } else {
     str.textContent='入力された数は' + num + 'です。';
  }
}
</script>

Javascript 演習問題

Javascript演習問題


サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。(画像、記述方法は自由)


今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。


入力された値が5の倍数かどうかを判別する記述をボタンを押したときに表示させなさい。


1〜100までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。

<h1>1から10までの合計を求める</h1>
<p><button onClick="action()">ボタンを押すと実行</button></p>
<p id="ans">ここに表示する</p>
<script>
function action(){
  var total=0;
  for(var i=1; i<=10; i++){
    total+=i;
  }

  var str=document.getElementById('ans');
  str.textContent='合計は、「'+total+'」です。';
  
}
</script>

おみくじをDOMのdocumentオブジェクトを使って作りなさい。

広告を非表示にする

サイトマップとディレクトリマップ

サイトマップ

サイトマップとは、サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。
サイトマップには単なる設計資料としての役割だけでなく、サイトの企画意図をクライアントや他のプロジェクトメンバーと共有するためのコミュニケーションツールとしての役割もあります。



coliss.com



ディレクトリマップ

ディレクトリマップは、サイト全てのページのタイトル・ファイル名・階層をExcelにまとめた一覧表です。どのページでもトップから3クリックで到達できるのが理想なので階層はできれば3~4階層までにおさえます。ディレクトリマップを作る前にサイトマップを作成しておくと、スムーズにリスト化することができます。



commte.net




ascii.jp




lopan.jp

Wirify-見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス

見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス、「Wirify」
使い方もいたって簡単です。


1. 「Wirify」のサイトにアクセスし、「Wirify by Volkside」をブラウザのブックマークツールバーに入れる。

2. ワイヤーフレームにしたいサイトを表示した後、ブックマークツールバーに入れた「Wirify by Volkside」をクリック。

そうすると、見ているサイトがワイヤーフレームのような表示になります。
ワイヤーフレームの画面をクリックすると元に戻ってしまうので、残しておきたいときはキャプチャで画像として残しておきましょう。




www.wirify.com