東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

LOADING中はスクロール禁止

html {
  overflow-y: scroll;
}

body{
  position: fixed;
  overflow-x: hidden;
}

.wrap {
    overflow: hidden;
}

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    text-align: center;
    display: table;
    color: #fff;
}
<html>
<body>
  <div class="wrap">
    <div id="loading"></div>
  </div><!-- wrap -->


</body>
</html>
$('#loading').velocity('fadeOut', {complete:function(){$('body').css('position', 'relative')}});

http://uxmilk.jp/15040

illustratorでウェブデザインするときのメモ

「初期設定」
● 単位は「ピクセル」にすること
● カラーモードは「RGB」
● ラスタライズ効果は「スクリーン(72ppi)」
● 「新規オブジェクトをピクセルグリッドに整合」のチェックは外す。

「にじみ」「1pxのズレ」対策
Illustratorの表示メニューで「ピクセルプレビュー」にチェックを入れて制作する。
● オブジェクトを選択して、 変形パネルの「ピクセルグリッドに整合」にチェックを入れる。
 ※画像データなどサイズを正確(小数点以下無し)にできないものに関しては、ピクセルグリッドに整合にチェックを入れると、変形する可能性があるので、注意してください。
● 線の位置は必ず「内側」にすること。
● 「オブジェクトのサイズ」、「オブジェクトの座標」、「アートボードの座標」の数値を小数点以下無しにする。
 「300.638...」とかではなく「300」 にする。


【参考サイト】
http://lab.aratana.jp/entry/2015/04/06/170828

【jQuery each】li要素を順番にアニメーション

$(function(){
 
	// リストを非表示
	$('#fadein_area ul li').hide();
 
	// 繰り返し処理
	$('#fadein_area ul li').each(function(i) {
 
		// 遅延させてフェードイン
		$(this).delay(500 * i).fadeIn(1000);
 
	});
 
});

【参考サイト】
http://www.dataplan.jp/blog/jquery/203

●eachメソッドの使いかた
http://uxmilk.jp/45120

ジェネレーターまとめ

【wordpress css】contact form7のチェックボックススタイリングcss

デフォルトのcheckboxはdisplay: noneで消す。
.wpcf7-list-item-labelの疑似要素beforeでボックスを、afterで長方形を斜めにしてcheckマークをつくる

#wpcf7-f16-p4-o1 input[type="checkbox"]{ 
  display: none;
}
  
#wpcf7-f16-p4-o1 label{
  cursor: pointer;	
}

	
.wpcf7-list-item-label {
  position: relative;
  padding-left: 33px;		  
}
		
.wpcf7-list-item-label:before{
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 2px solid #ccc;
}

.wpcf7-list-item-label:after{
    width: 10px;
    height: 5px;
    border: 2px solid green;
    content: '';
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 6px;
    top: 6px;
    border-top: none;
    border-right: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
	  
}
			
#wpcf7-f16-p4-o1 input[type="checkbox"]:checked + .wpcf7-list-item-label:after {
    opacity: 1;			
}

span.wpcf7-list-item{
  margin-left: 0!important;
  margin-right: 20px!important;  
}

惰性スクロール(イージングスクロール) 記事まとめ

https://skygold.jp/web/1278.html
http://webdrawer.net/javascript/jsscroll.html
http://www.webopixel.net/javascript/435.html
http://the-zombis.sakura.ne.jp/wp/blog/2015/02/02/post-2626/

JavaScriptメモ

プロパティとメソッド

プロパティは()はない

繰り返しのfor文とwhile文の違い

繰り返す回数が決まってるときはfor、決まってないときはwhile

オブジェクトの意味

①window.alert、console.logなどのwindowやconsoleのこと。

javascriptの基本文法は
console.log('テスト')

consoleはオブジェクト
logはメソッド
()の中のテストはパラメータ

オブジェクトは基本文法の「●●は××しなさい」でいえば●●にあたる部分。

②「複数のプロパティを持つデータのまとまり」

var jsbook = {title: 'javascript入門', price:2500, stock: 3}

上記のjsbookオブジェクトはプロパティしかないが、プロパティのデータにはファンクションを保存することができる

var obj = {
  addTax : function(num) {
    return num * 1.08;
  }
};

上記のようにプロパティのデータがファンクションのとき、そのプロパティのことを特別にメソッドという。
ここらへんは「javascriptオブジェクト指向プログラミング」という知識とテクニックが必要

③Dateオブジェクト

Dateオブジェクトを使うときは最初に以下のコードを描いて初期化する必要がある。

var now = new Date();

newはオブジェクトを初期化するためのキーワード。
なお初期化の際()内にパラメータを含めない場合、Dateオブジェクトは現在日時を記憶した状態で初期化される。
ちなみに「現在日時を記憶した状態」とは、
●「日時を出力しなさい」と命令したら、現在日時を出力する
●「10日後が何日か出力しなさい」と命令したら、現在日時から10日後の日付を出力する。
というように、現在日時を「基準日」として使っている。
つまり、初期化されたDateオブジェクトが計算の基準日となる日時を記憶しているからこそ、日時の出力や計算ができる。

④オブジェクトには初期化するものとしないものがある

●複数のオブジェクトを作れるオブジェクトは初期化する
●複数のオブジェクトを作れないオブジェクトは初期化しない
詳しくは「確かな力が身につく」JavaScript超入門」のP165を参照。


無名関数(ファンクションを変数に代入)

var total = function(price){
  var tax = 0.08;
  return price + price * tax;

}

イベント基本構文

document.getElementById('form').onsubmit = function(){

};

return falseの意味

イベントで実行されるファンクションに「return false;」が出てきたら、htmlの基本動作をキャンセルしていると解釈する。
例だと送信ボタンを押したらページが遷移(ページ再読み込み)するがそれをキャンセルしたりできる。

画像のプリロード

var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
var current = 0;
var pageNum = function(){
  document.getElementById('page').textContent = (current + 1) + '/' + images/length;
}

var changeImage = function(num){
  if(current + num >= 0 && current + num < images.length){
    current += num;
    document.getElementById('main_image').src = images[current];
    pagenum();

  }
};
// プリロードのコード start
var preloadImage = function(path){
  var imgTag = document.createElement('img');
  imgTag.src = path;
}

for(var i = 0;i < images.length; i++){
  preloadImage(images[i]);
}
//プリロードのコード end

pageNum();

document.getElementById('prev').onclick = function(){
  changeImage(-1);
};

document.getElementById('next').onclick = function(){
  changeImage(1);
};
                                                                                                                                                                • -

変数宣言

let msg;

変数の重複を許可しない。varは許可する(上書きする)

定数

入れ物と中身がワンセットで途中で中身を変更できない入れ物のことを定数という。

var price = 100;
console.log(price * 1.08);
const TAX = 1.08;
var price = 100;
console.log(price * TAX);

データ型

①基本型

●数値型
●文字列型
●真偽型 true/false
●シンボル型
●特殊型(値が空、未定義であることを表す)

②参照型

●配列 array
●オブジェクト object
●関数 function

リテラル

リテラルとは、データ型に格納できる値そのもの、また、値の表現方法のこと。
・数値リテラル
・文字列リテラル

テンプレート文字列

・文字列への変数
・複数行にまたがる文字れ宇
が可能。

let name = '鈴木';
let str = `こんにちは、${name}さん。
今日も良い天気ですね!`;
console.log(str);

配列リテラル

配列リテラルは、以下のようにカンマ区切りの値をブラケット[]でくくった形式で表現します。

['JavaScript', 'Ajax', 'ASP.NET'];
console.log(data[0]);

オブジェクトリテラル

オブジェクトとは、名前をキーにアクセスできる配列。ハッシュ、連想配列などよばれる。
配列内の個々のデータを「要素」と呼んでいたのに対して、オブジェクト内の個々のデータはプロパティと呼ぶ。
プロパティには文字列や数値などの情報はもちろん、関数(手続き)を格納することもできる。
関数が格納されたプロパティのことは、特別にメソッドと呼ぶ。

var obj = {x:1, y:2, z:3};
console.log(obj.x); // ドット演算子
console.log(['x']);  // ブラケット構文

関数リテラル

関数とは「なにかしらの入力値(引数)を与えられることによって、あらかじめ決められた処理を行い、その結果(戻り値)を返すしくみ」のことをいう。

未定義値(undefined)

未定義値はある変数の値が定義されていないことを表す値で、以下のようなケースで返される。

・ある変数が宣言済みであるものの値を与えられていない
・未定義のプロパティを参照しようとした
・関数で値が返されなかった

var x; 
var obj = {a:12345};
console.log(x);
console.log(obj.b);
// 結果:2つともunderfined

ヌル(null)

該当する値がないことを意味する。
意図した空を表すにはnull、そうでなければundefined

インクリメント演算子(++)とデクリメント演算子(--)

インクリメント/デクリメント演算子は、オペランドに対して1を加算/減算します。つまり、以下の記法はそれぞれ等価です。


x++ → x = x + 1

x-- → x = x - 1

var x = 3;
var y = x++;
console.log(x); // 結果:4
console.log(y); // 結果:3

var x = 3;
var y = ++x;
console.log(x); // 結果:4
console.log(y); // 結果:4

function命令で関数を定義

function getTriangle(base, height){
  return base * height / 2;
}

console.log('三角形の面積:' + getTriangle(5, 2)); // 結果:5

関数リテラル表現で関数を定義

var getTriangle = function(base, height){
  return base * height / 2;
};

console.log('三角形の面積:' + getTriangle(5,2));

function命令:関数getTriangleを直接定義
これは関数を呼び出した後に
function命令を描いてもチャンと動く


関数リテラル:「function(base,height){...}」と名前のない関数を定義したうえで、変数getTriangleに格納している
このように関数リテラルは宣言した時点では名前を持たないことから匿名関数、無名関数と呼ばれる。
関数リテラルは関数を呼び出したあとに
関数リテラルを描いたらエラーがおこる

仮引数のスコープ 基本型と参照型の違いに注意

仮引数とは「呼び出し元から関数に渡された値を受け取るための変数」直上の例ならbase,heightが仮引数にあたる。


【基本型の場合】

var value = 10;

function decrementValue(value){
  value--;
  return value;
}

console.log(decrementValue(100));  // 結果:99
console.log(value); // 結果:10

【参照型】

var value = [1,2,4,8,16];
function deleteElement(value){
  value.pop();
  return value;
}

console.log(deleteElement(value)); // 結果:[1,2,4,8]
console.log(value); // 結果:[1,2,4,8]

複数の戻り値を個別の変数代入

「関数から複数の値を返したい」というケースはよくある。しかし、return命令で「return x, y;」のように複数の値を返すことはできません。この場合には、配列/オブジェクトとして値を一つにまとめたうえで返す必要がある

function getMaxMin(...nums){
  return [Math.max(...nums), Math.min(...nums)];
}

let result = getMaxMin(10,35,-5,78,0);
console.log(result);

let [max, min] = getMaxMin(10,35,-5,78,0);
console.log(max);
console.log(min);

再帰関数

再帰関数とは、ある関数が自分自身を呼び出すこと、または、そのような関数のこと。再帰関数を利用することで、たとえば階乗計算のように、同種の手続きを何度も呼び出すような処理を、よりコンパクトに表現できる。

function factorial(n){
  if (n != 0){ return n * factorial(n - 1); }
  return 1;
}

console.log(factorial(5));