技術と雑記ブログ
  • CODE
  • GAME
  • GADGED
  • DIY
  • OUTDOOR
  • TIPS
  • ABOUT

2020-01-30

CSSアニメーションの開始時・終了時・ループ時にjavascriptで処理をする方法

CODE
cssアニメーションの開始時や終了時などに処理を加えたいと思ったことはありませんか?javascriptを使えばcssアニメーション(animationもしくはtransition)の開始や終了を取得できるイベントが用意されていますのでこの記事ではその方法をご紹介します。
  • CSS
  • JavaScript
2020-01-22

【画像の遅延読み込み】ページの表示速度を向上させるlazyload.jsの使い方【高速化】

CODE
制作したサイトのページの表示速度が遅いと感じたことはありませんか?imgタグで配置した画像は通常見えている画面内に映っていなくてもそのページにあるもは全て読み込まれてしまいます。つまり見えてもいない画像を読み込むためページ表示速度が遅くなってしまいます。しかしその問題は画像の遅延読み込みという技術を用いることにより解消することができます。この記事ではそれ実装できるlazyload.jsをご紹介します!
  • JavaScript
2020-01-19

【ScrollMagic】スクロールに応じてclassを付与しcssでアニメーション【ES6】

CODE
webサイトを閲覧していてスクロールに反応して要素がフェードインしてくるなどのアニメーションを見たことがありませんか?この記事では僕が実際に案件で使用しているスクロールに反応するアニメーションの実装方法をご紹介していきます。
  • CSS
  • JavaScript
2019-08-03

tableでcss擬似要素のcontent: attr()を使用したレスポンシブ方法

CODE
tableのレスポンシブ対応ってすごく面倒だと思いませんか?・table内で横スクロールを実装する・単純にdisplay: block;で対応などありますがcss擬似要素のcontent: attr();を使用した方法を紹介します。
  • CSS
2019-07-31

【JavaScript】ブラウザ毎に使用出来ないcssを判別して分岐する方法【IE対策】

CODE
Internet Explorerで使用出来ないcssって多いですよね。その場合は大抵JavaScriptでどうにかすると思います。今回はブラウザで使用出来ないcssを判別して分岐するJavaScriptを紹介します!
  • JavaScript
2019-07-25

【nuxt.js】WordPressで記事を更新したときにフックしてNetlifyに自動デプロイする方法

CODE
このブログはwordpressで記事を作成し、nuxt.jsでwp rest apiからデータを取得してNetlifyにデプロイしています。この記事ではwordpressで記事を更新したタイミングで自動デプロイする方法をご紹介します。
  • WordPress
2019-07-17

Snap.svgでアウトラインアニメーションを作る方法【IE対応】

CODE
svgを使用したラインアニメーションにも色々あるかと思いますがこの記事ではアウトラインのアニメーションを紹介していこうと思います!
  • CSS
  • JavaScript
2019-07-10

【vue.js】nuxt.jsでパンくずリストを作る方法

CODE
この記事ではnuxt.js(vue.js)を使用したパンくずコンポーネントを紹介します!当ブログでも使用している方法です。
  • JavaScript
  • Vue.js
2019-07-08

【Finder】macのクイックルックで画像がプレビューできない!?ときの対処法

TIPS
macで画像がクイックルックでプレビューできない!?ってことありませんか?僕は何回遭遇したことがり初めはヤバイmacおかしくなってきたのかな?と思いました。これは単純な方法で解決できますのでその方法をお伝えします。
    2019-07-03

    Gulpでサイト全体(すべてのディレクトリ)の画像を圧縮して置き換える方法

    CODE
    みなさんはサイトを制作するときの画像の圧縮はどうしてますか?毎回外部のサービスなどを使用して圧縮するのは面倒ですよね?僕はそれがすごく嫌だったのでGulpで画像圧縮をするようにしました。その方法をご紹介します。
    • Gulp
    前のページ
    7 / 9
    次のページ
    • プライバシーポリシー
    • お問い合わせ

    © 2023 hirakublog.com