2020-06-17スクロール位置でナビのカレント状態が変化するJS【ページ内リンク】CODE縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？状態としてはページの現在地を知らせるためのUIが多いですね。この記事ではそのJSの作り方をご紹介します！JavaScript
2020-05-31【バグ】Safariでborder-radiusがhoverアニメーション中に効かない場合の対応CODE以前案件で「iPhoneで丸くトリミングしてる画像が一瞬四角の画像になるんだけど？」と言われて調べたところiPnoneではなくSafariでborder-radiusが効かない場合があることがわかりました。この記事ではその対処法を紹介します。CSSHTML
2020-05-08JavaScriptでローディング画面を作成する方法（画像を監視）CODE様々なサイトで実装されているローディング画面を実装したいと思ったことはありませんか？この記事ではJavaScriptを使用してローディング画面を実装する方法をご紹介します。JavaScript
2020-03-25LocalbyFlywheelでインストールしたWordPressのディレクトリを変更CODELocalbyFlywheelでインストールしたWordPressをサブディレクトリに移動したいと思ったことはありませんか？この記事ではLocalbyFlywheelでサブディレクトリにWordPressを移動する方法をご紹介します。WordPress
2020-03-21WAI-ARIAに対応したタブを作ってみた（作成方法）【ES6】CODE最近業務でタブを久々に実装することがあったのでアクセシビリティーも考慮したいと思いWAI-ARIAに対応ものを作成してみました。この記事ではその作成したタブをご紹介します。HTMLJavaScript
2020-03-19【UAParser.js】ユーザーエージェントを取得してbodyに情報をclassとして付与する方法CODE画面の幅以外でPCなのかスマホなのかを判定したい場合があるかと思います。そんな時に有効なのがユーザーエージェントです。この記事では僕が使用しているユーザーエージェントを取得してbodyにua-spやua-pcなど情報をclassとして付与する方法をご紹介します。HTMLJavaScript
2020-03-13JavaScriptで一文字ずつspanで囲む方法【主に一文字ずつのアニメーションに使用】CODE文字を一文字ずつアニメーションさせようとする場合は一文字ずつspanタグで囲んでcssでアニメーションさせるのが一般的だと思いますが、そのアニメーションさせる文字数が5文字程度であれば手作業でspanタグで囲んでもいいのですが20や30文字と文字数が多くなるにつれてその作業は大変になります。この記事では文字を span タグで手作業で囲む作業を JavaScript を使用して楽にする方法を紹介します。CSSJavaScript
2020-03-11JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】CODEモーダルウィンドウなどでモーダルウィンドウの外側をクリックしたときに閉じる動作をしたい時などに使える「特定の要素以外をクリックした時のイベント」をこの記事では紹介します。JavaScript
2020-03-05CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】CODEobject-fitってすごい便利なCSSなんですけどIEでは効かないんですよね...この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。Sassを使用してる方向けにもmixin化したものも紹介します。CSSJavaScript
2020-03-03JavaScriptのclosestメソッドをIEに対応させるポリフィルCODEJavaScriptのclosestメソッドは最も近い先祖の要素を取得するために使用する非常に便利なメソッドですがIEには対応していません。しかしIEに対応するポリフィルが公開されていますのでご紹介します。JavaScript
