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

2020-03-13

JavaScriptで一文字ずつspanで囲む方法【主に一文字ずつのアニメーションに使用】

CODE
文字を一文字ずつアニメーションさせようとする場合は一文字ずつspanタグで囲んでcssでアニメーションさせるのが一般的だと思いますが、そのアニメーションさせる文字数が5文字程度であれば手作業でspanタグで囲んでもいいのですが20や30文字と文字数が多くなるにつれてその作業は大変になります。この記事では文字を span タグで手作業で囲む作業を JavaScript を使用して楽にする方法を紹介します。
  • CSS
  • JavaScript
2020-03-11

JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】

CODE
モーダルウィンドウなどでモーダルウィンドウの外側をクリックしたときに閉じる動作をしたい時などに使える「特定の要素以外をクリックした時のイベント」をこの記事では紹介します。
  • JavaScript
2020-03-05

CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】

CODE
object-fitってすごい便利なCSSなんですけどIEでは効かないんですよね...この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。Sassを使用してる方向けにもmixin化したものも紹介します。
  • CSS
  • JavaScript
2020-03-03

JavaScriptのclosestメソッドをIEに対応させるポリフィル

CODE
JavaScriptのclosestメソッドは最も近い先祖の要素を取得するために使用する非常に便利なメソッドですがIEには対応していません。しかしIEに対応するポリフィルが公開されていますのでご紹介します。
  • JavaScript
2020-02-28

【Sass】特定の親セレクタの状態を変更するmixin ネスト外にも対応

CODE
ネストされたセレクターの深い位置から上から上のセレクターの状態を楽に変更できるmixinを紹介します!BEMで書いている場合はネストをあまりせずに独立してスタイルを書くことが多いと思いますがそれにも対応しています。
  • CSS
2020-02-28

Sassでネストされたセレクタの直前の親セレクタを取得する関数

CODE
Sassでmixinを作成しているときにネストされたセレクターの直前の親セレクターが欲しいときがあったので、それを取得する関数を作ってみました。
  • CSS
2020-02-09

【簡易版】スクロール時に画面内に入ってきたらCSSでアニメーション!JavaScriptはコピペOK!

CODE
この記事ではスクロールに応じて特定の要素(HTML)画面内に入って来た場合にCSSでアニメーションさせる方法をご紹介します。JavaScriptを使用しますがコピペでOKです。
  • CSS
  • JavaScript
2020-02-06

【Android】音量をラクラク管理、音の種類ごとに音量調整できるアプリVollynxの紹介

GADGED
Android(アンドロイド)の音量調整に困っていませんか?この記事ではAndroidの5種類の音量を一画面で管理・調整出来るアプリ、Vollynxを紹介します。
  • Android
  • アプリ
  • レビュー
2020-02-05

マウスストーカーを作ってみた。作り方もご紹介します。

CODE
マウスストーカーというものをご存知でしょうか?マウスカーソルに追従してくるアレです。昔のホームページではキラキラしたものやキャラクターが追従してきて結構鬱陶しいものが多くありました(笑)しかし、現在ではお洒落なサイトでよく見かけるようになってきました。今回の記事ではマウスストーカーを調べながら作ってみましたのでご紹介します!
  • JavaScript
2020-02-04

iPhone(iPad)にPS4コントローラを接続する方法

GADGED
iOS 13、iPadOS 13ではPS4コントローラーとiPhone・iPadを接続可能になりました。それにともない対応したアプリやPS4のリモートプレイにも使用可能となりました。本記事ではそのPS4コントローラーをiPhoneもしくはiPadと接続する方法をご紹介します。
  • iPad
  • iPhone
  • PS4
前のページ
6 / 9
次のページ
  • プライバシーポリシー
  • お問い合わせ

© 2023 hirakublog.com