MDNのドキュメントをカテゴリごとに検索しやすいので便利 devdocs.io www.w3schools.comemmet docs.emmet.io coliss.com www.favicon.cc
hirashimatakumi.com なぜかカスタム投稿タイプを検索除外にしていたので、タクソノミーアーカイブが表示されなかった https://kanae-design.the-day-mie.com/307/ MAMPからのデータ移行とデータベースの書き換えについて大変参考になりました。 yuruyururoa…
sassでコーディング効率化！意外と知らなかった？関数いろいろ※cssコンパイル後ソースあり – ツーブロッカ CSSをスマートに！今日からSassで使える便利なmixin11選｜ferret SCSS 内でのループ処理 (@for, @while) | まくまくSassノート Sassでよく使っている…
gitのドキュメントは下記です。 github.comUdemy講座内で使用されていました。 Node.jsのパッケージとしてインストールし、import uniqid from 'uniqid'; でインポートして使用しました。定義の仕方は下記のような感じです。 const item = { id: uniqid(), c…
ハッシュ値の取得 const id = window.location.hash.replace('#','');ハッシュ変更時のイベント window.addEventListener('hashchange', 実行したい関数); カスタムデータ属性をもっているデータの取得 例：btn.dataset.goto;（要素.dataset.カスタムデータ…
最近UdemyでGreenSockを使用した講座を受講しました。 非常に理解し易かったので、できれば業務でも使用してみたいです。ちなみに、商用は有料みたいです。 greensock.com下記サイトで使い方などをまとめてくださっているので、載せておきます。 rfs.jp あと…
html** <script> window.addEventListener('DOMContentLoaded', function (event) { var scrollStart = $('.area01').offset().top; //ページ上部からの距離を取得 var scrollEnd = $('.topics').offset().top; //ページ上部からの距離を取得 var windowHeight = $(w…
仕事でスクロールを使用し、グローバルのものが影響して正常に機能しなかったのでカスタムデータ属性を使用して対応しました。 html** <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>カスタムデータ属性を使用したスムーススクロール</title> </meta></meta></meta></head></html>
node.jsを使ったアプリ作成の動画学習でモジュール間のデータのやりとりを学んだので備忘録としてのせます。MVCを使用して ModelがSearch.js ViewがsearchView.js Controllerがndex.jsとして作成していく予定。※下記はモジュールでのデータのやりとりのテス…
parashuto.com
活用例この動画の中では,以下の内容処理をしてdistフォルダに吐き出すということをされています。 ①htmlファイルをコピー。 ②sassファイルのコンパイル ③gulp-imageminによる画像圧縮 ④ gulp-uglifyによるjsのminify ⑤gulp-concatによる複数のjsコードのバン…
配列の中に画像のパス、リンク、あと初期に表示させるかどうかのプロパティ記載して、読み込み後は一定時間ごとにランダムで画像を切り替えるコードをjsとjqueryで実装してみました。まだ未完成ですが備忘録として載せます。 html** <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></head></html>
slick.jsを使用した、プログレスバー付きのスライド html** <html lang="ja"> <head> <meta charset="UTF-8"> <title>プログレスバースライド</title> <script type="text/javascript" src="js/jquery182.js"></script> <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> </meta></head></html>
chibinowa.net Clippy — CSS clip-path maker
html** <html lang="en"> <head> <meta charset="UTF-8"> <title>ランダム画像表示</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // setRamd…</link></meta></head></html>
app.codegrid.net app.codegrid.net
yohshiy.blog.fc2.com
umekov.hatenablog.com qiita.com
qiita.com node.jsのversionを管理するためにnodebrewを利用する
左からスライドして出てくるメニューと常時見えているアコーディオンメニューを作成してみました。 html** <html lang="ja"> <head> <meta charset="UTF-8"> <title>Reflect_header</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> </link></meta></meta></head></html>
以下２つのリンクを参考に私なりにアレンジして、複数動画の埋め込み+inview時自動再生を試してみました。参考 埋め込んだYouTubeでFacebookみたいな動画自動再生を実装した話。スクロールで再生するやつ - Qiita 同一ページ内でYouTubeを複数設置したときに…
animate.cssを使用することで、簡単に以下のサイトで紹介されている動きを実現できます！ Animate.css使い方は以下のサイトを参照してください。 bashalog.c-brains.jp html** <html lang="ja"> <head> <meta charset="UTF-8"> <title>Animate.cssでCSSアニメーション</title> <link rel="stylesheet" href="css/animate.css" /> </link></meta></head></html>
参考にしたページ www.dot-st.com 上記ページのスクロールしたらカーテンのようなものが右側にスライドして通過後に画像が見え始めるような動きを組んでみました。 scroll_addclass.jsで視界に入った時にactiveというクラスをつけて、それが付いた後にカーテ…
qiita.com
anagrams.jp blog.kairosmarketing.net blog.kairosmarketing.net
ics.media webkaru.net
・Google MAP AP www.tam-tam.co.jpwww.tam-tam.co.jp・Google API Get Started with the Calendar API | Google Calendar API | Google Developers qiita.com・Google AJAX Search API Google AJAX Search APIとは - はてなキーワード ・Youtube API www.d2…
参考サイト www.nxworld.net www.htmq.com <html lang="en"> <head> <meta charset="UTF-8"> <title>conter-increment使い方</title> <style> *{margin:0; padding:0;} li{list-style: none;} #conter{width:50px; margin-left:0;} #conter ul li{ margin-bottom: 10px; line-height: 2.0; font-size: 25px; text-a…</meta></head></html>
アフェリエイトサイト Amazonアソシエイト（アフィリエイト）プログラムに参加しよう！【楽天アフィリエイト】日本最大級のアフィリエイトプログラムアフィリエイトなら、安心と信頼で世界の企業に選ばれるリンクシェアアフィリエイト(ASP)ならバリューコマ…
schoo.jp schoo.jp
