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

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

1day1banner(1日1つバナー制作 4日目)

1day1bunner(1日一つバナー制作)

1日1つバナーを作っていきます。

化粧品のバナー

f:id:p_and_a_fam:20170323102505j:plain
ターゲット
20代~30代女性
素材
フリー
tool
Photoshop
time
60min

30分バナー製作3つ目(1day30min1bunner)

1day1bunner(1日一つバナー制作)

30分以内でバナーを作っていきます。

大人の女性向けファッションブランドのセールバナー

f:id:p_and_a_fam:20170323102505j:plain
ターゲット
30代~40代女性
目的
ECサイトへの誘導
素材
フリー
tool
Photoshop
time
20min

javascriptの勉強 3月23日 ランダム関数と条件分岐

Javascript


random関数とif構文を使ったおみくじ

var omikuji =parseInt(Math.random() * 10) + 1;
console.log(omikuji);
if (omikuji == 1){
    console.log('大吉');
}else if(omikuji ==2){
    console.log('中吉');
}else if(omikuji <= 4){
    console.log('小吉');
}else if (omikuji <= 7){
    console.log('凶');
}else{
    console.log('大凶');
}

random関数を使った西暦計算

var seireki = (parseInt(Math.random() * 17) + 1 ) + 2000;
var heisei = seireki - 1988;
process.stdout.write('西暦' + seireki + '年は');
console.log('平成' + heisei + '年です。');

現在の時間を取得して西暦と元号で何年かを出す

var today = new Date();
var seileki = today.getFullYear();
var gengou = seileki - 1988;
console.log('西暦' + seileki + 'は平成' + gengou + '年です。');

javascriptの勉強 3月23日 演算子の復習

Javascript


以前学習したことや今日学習した事の復習と補填です。

演算子

変数は代入されない限り変化しない。

var num = 50;
//50+50で100と表示
console.log(num + 50);
//numのみが呼び出され50と表示
console.log(num);

演算子
計算などに使用する記号
算術演算子

主に計算などに使用する記号

  • +…加算(addition, summation)
  • -…減算(subtraction)
  • *…乗算(multiplication)
  • /…除算(division)
  • %…剰余演算(modulo)

基本として*と/が+と-より優先。+-を優先させてい時は()で括る。

//3 * 3が行われる
console.log((1 + 2) * 3)

練習

単価x円のリンゴをy個仕入れて5個売り出した時の売れ残りの値段の合計。
x>=100,x=<200 y>=10,y=<20 z>=0,z=<5

var price = (parseInt(Math.random() * 2) +1) * 100;
var num = (parseInt(Math.random() * 3) + 1) * 10;
var sold = parseInt(Math.random() * 10)+1;
var unsold =(num - sold) * price;
console.log('単価' + price + '円のリンゴを' + num + '個仕入れて' + sold +'個売れた。売れ残りの金額の合計は' + unsold +'円')

文字列と数値の連結

//「100頭のパンダ」と表示される。この場合100は文字列に変換される。
console.log(100 + '頭のパンダ')

javascriptの勉強 3月22日② random関数とparaseInt関数

Javascript


今日勉強した事の復習と補填です。

randam関数

パラメータ{ ()内の値 }
無し
返り値
0.0以上1.0未満の乱数。
  • メソッドが呼ばれるごとに0.0以上1.0未満までのランダムな浮動小数点を計算して返す。
  • 擬似乱数が生成される。
    (擬似乱数:乱数列のように見える計算で出される値。計算で出されるから実際は予測可能。)

指定した範囲の整数を書き出す。

まず10を掛けて1の位に数を繰り上げる。

var num = Math.random()*10;
console.log(num);
//結果の例 : 8.38366194905235

次にparseInt関数で文字列を整数に変換する。

(Matn.randomの値をparsint関数の引数にしている。)

var num = parseInt(Math.random()*10);
console.log(num);
//結果の例 : 8

上記の結果だと0~10未満(つまり0~9)までの文字が表示される。

これを1~10にする為に、結果に1を足す。

var num = parseInt(Math.random()*10)+1;
console.log(num);

*10の値を*5にすると、0~5までの結果が表示されるようになる。

これはparseInt関数が引数の一番最初の数字を整数として返すからである。

parseInt関数

parse=直訳:解剖 Int=整数

parseInt関数の返り値

parseInt("0.3") ;   //返り値0.3
parseInt("14") ;   //返り値14
parseInt("30min") ;   //返り値30
parseInt("No.30") ;   //返り値NaN(数値以外はNaNが返される。
)

基数を指定できる(基数:16進数なら基数は16)

parseInt("11", 2) ;   //返り値3
parseInt("11", 8) ;   //返り値9
parseInt("11", 10) ;   //返り値11
parseInt("11", 16) ;   //返り値17
//2進数では0と1以外は数値とみなされないので2が含まれるとNaN
parseInt("2", 2);   //返り値NaN
)
//16進数では0~9とa~fまでが数値となる。
parseInt("f", 16);   //返り値15
)

javascriptの勉強 3月21日①

Javascript


今日学習した事、今まで学習した事を復習しました。

console.log( );

console
この部分をオブジェクトという。どこに指示を出すかという指定。
log( )
この部分をメソッドという。何をさせるかとう指示。
( )の中身
パラメーターと言う。指示に必要な情報を入れる。

パラメーターと引数の違いは下記に詳しい

・メソッド(や関数)に定義されているのは「パラメータ」(もしくは「パラメータ変数」)。
・メソッド(や関数)のパラメータに渡された値*1は「引数」(「パラメータ値」との言い換えも可能)。
パラメータと引数の違い - いっしきまさひこBLOG

外部からの読み込み

<script src="script.js"></script>

javascriptのルール(復習)

  • 文字コードUTF-8を使用
  • 大文字小文字を区別。
  • 文末には;をつける。
  • 文字列は''で囲む。
  • {}の中はブロックという。
  • 記述エラーはコンソールで確認。
  • 無効になっている場合も考える必要がある。

変数(variable)の復習

  • 変数名の先頭は英文字か_(under score)
    - (hyphen)を付けるとその前後の値で別れてしまう。
  • 予約語は使えない。
  • 宣言はvarの後に半角スペースをつけてその後ろに記述。
  • 複数宣言の場合は,(comma)で区切る。
    (例) var a,b,c ;

データ型の復習

変数に入れるデータの種類の事。

数値(Number)
整数や実数 1や1.1
文字列(String)
halloやハロー
論理値(真偽値とも言う)(Boolean)
trueとfalse
配列
データの集合体
[1,2,3]
連想配列
キーと値の集合体
null
null値(オブジェクトが存在しない)を意味する特殊なキーワード。全て小文字で記述した場合のみ該当(NullやnuLLは違う)
undefined
値が未定義であることを表す。
NaN
数値でないことを表す。

Ecmascriptでのデータ型は下記

文法とデータ型 - JavaScript | MDN

【CSS】animationの記述法方、ショートハンド等のまとめ

HTML・CSS


animationプロパティについてまとめました。

animation-nameと@keyframes

animation-nameで指定した名前を@keyframesで呼び出して使う。

div.box {
/*animeを指定*/
animation-name:anime;
}
@keyframes anime{
ここにanimeの動きを記述していく
}

@keyframesの書き方

from(始まり)からto(終わり)

@keyframes anime{
/*始めの状態*/
  from{width: 50px; height: 30px; background: #444;}
/*終わりの状態*/
  to{width: 100px; height: 60px; background: #eee;}
}

%で指定

@keyframes anime{
/*始めの状態*/
 0%{width: 50px; height: 30px; background: #444;}
/*途中の状態*/
50%{width: 50px; height: 30px; background: #444;}
/*終わりの状態*/
100%{width: 100px; height: 60px; background: #eee;}
}

animation-duration

アニメーション一回分の時間の長さを指定

1s=1秒、.1s=0.1秒

div.sample {
animation-name: anime;
/*3秒間でアニメーションする*/
animation-duration: 3s;
}

animation-timing-function

アニメーションのタイミング・どう進行するか

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかにする)(初期値)
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ(一定)
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ(ゆっくり始まる)
ease-out
cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり終わる)
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり始まってゆっくり終わる)

cubic-bezier(数値, 数値, 数値, 数値)

アニメーションの詳細を数値で指定できる。
下記サイトにて詳しいことが書いてあります。

animation-delay

アニメーションが始まる時間を決める。デフォルトは0

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
/*1sなら1秒後、-1sなら1秒後の動きから始まる。*/
animation-delay: 1s;
}

animation-iteration-count

アニメーションの繰り返し回数を決める。デフォルトは1

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
/*無限に繰り返しを指定*/
animation-iteration-count: infinite;
}

animation-direction

アニメーションを交互に反転再生させるかどうかを決める。

normal
初期値
alternate
奇数回ではnormal、偶数回では逆再生になる

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

ショートハンドの順番

animation

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction

div.box {
animation: anime 3s linear 1s infinite alternate;
}