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

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

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…

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

「初期設定」 ● 単位は「ピクセル」にすること ● カラーモードは「RGB」 ● ラスタライズ効果は「スクリーン(72ppi)」 ● 「新規オブジェクトをピクセルグリッドに整合」のチェックは外す。「にじみ」「1pxのズレ」対策 ● Illustratorの表示メニューで「ピク…

【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/jq…

ジェネレーターまとめ

css perspective generator https://webcode.tools/css-generator/perspective

【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;…

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

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.l…

【wordpress】custom field suite の画像IDでの画像出力ループ(lightboxつき)

<ul> get('loop_gallery'); foreach ($fields as $field) : ?> // ループ開始 <li> </li></ul>

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

<ul id="click_box2"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div class="f_r"> <div class="content_wrap disnon show"> </div> <div class="content_wrap disnon"> </div> </div>

cssでscale と tlanslale3dを一緒にかく

css

@-webkit-keyframes slideInViewport { from{ -webkit-transform: scale(1) translate3d(0, 0, 0); } to{ -webkit-transform: scale(0.8) translate3d(250px, 0, 0); } } 【参考URL】 http://stackoverflow.com/questions/20051832/how-to-scale-and-transla…

【jQuery】タブ切り替え

<ul id="tab"> <li class="select">ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> <li>ボタン4</li> </ul> <div class="safety_cw"> <div class="content_wrap no1"> <div class="container_safety"> <h2>コンテンツ</h2> </div> </div> </div>

要素の高さをレスポンシブでそろえたい時【jquery-fixHeightSimple.min.js】

$(function(){ // ページ読み込みでsameheight関数 sameHeight(); // ブラウザリサイズ リサイズ完了時に実行 var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { sameHeigh…

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや var current_scrollY; $(document).on('click', '.menu-trigger', function() { if ($(".menu-trigger").hasClass("active")) { // メニューを閉じるとき $(window).off('.noScroll'); $(th…

【jquery必要なしスライダー】swiper

/bodyの上にswiperのjsファイルを配置すること。それ以外だとバグります。 その下に <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { effect: "fade", autoplay: 3000, noSwiping: true, noSwipingClass: 'no_swipe', loop: true }) </script> …

falsandtru版pjax やりかた

下記のコードを入れたところpjaxでトップページに戻ったときスライダーの切り替えがぐちゃぐちゃになる。たぶんsetintervalがいかれてる。 このページの「ページ読み込み時の処理」ってとこでいけるかなあ。あとで試す。とりあえずメモ。http://chibinowa.ne…

スマホのfont-sizeフォントサイズ指定を安定

body { -webkit-text-size-adjust: 100%; }

【jQuery】infinite scrollの使い方

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。とりあえず今回はワードプレスのプラグインのものを使用。 …

yakuhanJP

これで点とかかぎかっことかの字詰めできる https://qrac.github.io/yakuhanjp/

fontplus フォントプラスの使い方

①まず以下にアクセスしてログイン。 https://webfont.fontplus.jp/users/login②グローバルナビの「スマート」の「サイト登録・PV数レポート」をクリックしてURLを登録③グローバルナビ「フォント一覧」をクリックして使いたいフォントを探す。そしてコードを…

jquery callback コールバック queue 使いかた

下記コードは、 #bg_fvがフェードイン後に#logo_indexがフェードイン。そのあとに.home #g_naviがfadeInされる。最後にdequeueを。 $('#bg_fv').fadeIn(1000).queue(function () { $('#logo_index').fadeIn(500).queue(function () { $('.home #g_navi').fad…

背景画像を読み込んだら処理 imagesloaded

まずプラグインimagesloaded読み込み <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>そして以下。 $(function(){ $('#bg_fv').imagesLoaded( { background: true }, function() { $('#bg_fv').fadeIn(1000); }); }); 【背景画像】 https://www.imd-net.com/blog/2016/03/01-…

【jQuery】lazyload使い方

head内にlazyloadのプラグインjs読み込ませる。以下はオプションでカスタムのイベントloadImgをつくってる。 kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)data-originalに本命のimgを。srcにloading中の画像を <img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" /> $(functi…

【EC-CUBE2系】コメントアウト

http://qiita.com/tomcky/items/d947c26786d7269f5cf3

グリッドジェネレーター

http://gridulator.com/(こっち使うかな)http://www.kenjisugimoto.com/gridpx/

【CSS3】 transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法

css

.element{ -webkit-transform: translatez(0); // 又は -webkit-transform: translate3d(0,0,0); } 【参考URl】 http://memocarilog.info/webdesign/8304

【css】EDGE,IE,FIREFOXのみに適用されるcss

css

①IE @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ここにIEのみ適用したいcssを */ }@-moz-document url-prefix() { /* ここにfirefoxのみ適用したいcssを */ }@supports (-ms-ime-align:auto) { .selector { prop…

velocity.jsのqueue

velocityのメソッドチェーンは最初に定義したものから順番に実行されます。1回目に定義したアニメーションの途中から、2つ目以降のアニメーションを実行させることもできます。それはqueueを使う。 【参考URL】 http://un-tech.jp/velocity-basic-option/

mp4からwebmに変換するオンラインツール「cloudconvert」

使い方は以下。というかみなくてもできるか。。。 http://webcre8.jp/use/webservice-creation-cloudconvert.html https://cloudconvert.com/

DVDをmp4に変換するフリーソフト「HandBrake」

使い方は以下のサイト。 http://freesoft.tvbok.com/freesoft/dvd_copy/handbrake.html

【jQuery】特定の要素が画面内に表示(レンタリング)されたら際、処理を実行する。

$(function(){ // 処理実行の引き金となる要素を設定 var target = $("#target"); $(window).scroll(function(){ // 実行のトリガーになる要素のオフセット(一番上からの距離)から // 画面の縦幅を引いたものを処理実行までの距離とする(画面の下端を基準…