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

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

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;  
}