IB-Note

サイトを見ているとたまに見かける読了率メーター。記事をどのあたりまで読んだかが視覚的にわかりやすくて良いですよね。 そんな読了率メーターが簡単に導入できたら良いなぁ…ということでコピペで…

以前作成したe-typing風タイピングゲームのローマ字版に続き、英語版も作ってみました。シフト操作ありで、英数字に加えて各種記号にも対応した本格モデルです。 今回も以前と同様、本家e-…

前記事のニュースティッカーに続き、今回はJavaScriptでe-typingの腕試し風タイピングゲームを作りました。タイピングに青春の一部を捧げた私が贈る、本格派タイピングゲームです。 …

Webサイトで時々見かける、最新情報を流すテロップのようなアレ。つい最近調べて知ったのですが、<strong class="marker-y"> ティッカー</strong> というそうです。新着情報がパッと目に入るので良いですよね～ これはぜひブログにもつ…

JavaScriptで複数パターンの置換をまとめてやりたいと思っていたとき、なかなかしっくりくる方法がありませんでした。自分でいろいろ試してみた結果、お気に入りの方法を見つけたのでご紹介します…

タイトルの通り、スムーススクロールをJavaScriptだけで実装してみました。スムーススクロールというのは、ページ内リンクを押したときになめらかに移動する仕様のことです。 jQuery…

Webサイトでよく見かける、スクロールするとヘッダーがヌルッと出てくるあの仕様。 手軽に実現できないかどうか考え、JavaScriptのみで実装する方法を考えたのでご紹介します。2タイプ…

記事の項目を一目で確認できる目次。手動で作るのは大変ですが、ありがたいことに様々な自動生成目次のスクリプトが公開されており、目次生成の手間を省くことができます。 私もしばらく他の方が作っ…

ときどき、Webサイトでスライドショーのようなものを見かけると思います。あれはカルーセルと呼ばれていて、「回転木馬」という意味があります。メリーゴーランドみたいにぐるぐる回っている様子から名づ…

サイト高速化に欠かせないリソースの遅延読み込み。 今まではあちこちでネイティブLazyloadを使っていたんですが、ふとしたきっかけから新しい方式に切り替えることにしました。こちらのほう…

読み込みの際、（特にスマホ表示で）サイトが一瞬崩れて表示されることはありませんか？一瞬とはいえガクッと表示されるのは見た目的にカッコ悪いですし、気になってしまいますよね。 そういった場面…

サイトを訪れたときに時々表示されるCookie使用同意のポップアップ。よくあるタイプのものを独自に作成してみました。 最小限のHTML/CSS, JavaScriptだけで構成しており、…

Web制作で重宝するSVGという画像形式があります。JPEGやPNGほど聞き慣れませんが、通常の画像形式に比べて軽量だったり、カスタマイズ性が高かったりと良いことだらけの素晴らしい画像形式です…

ここ最近、PageSpeed Insightsの指標のひとつであるLCPについて色々と勉強していたので、調べて分かったことをまとめておきます。どなたかの参考になれば幸いです。

highlight.jsの表示関連でコピーボタンも付けてみたいなぁと以前から思っていて、今回ついに導入することに。導入に伴い、コピーボタンの仕様を自分好みにアレンジしてみました。 変更点 …

jQueryを使用せず、JavaScriptのみで要素をふわっと表示させる方法をご紹介します。 デモページはこちら↓ DEMO ロードでふわっと表示 HTML &lt;div class=&q…

ワンタッチでメニューの表示切替ができるハンバーガーメニュー。前々から付けてみたいなぁと思い続け、ついに実装することができました！ 思えば長い間面倒くさがって敬遠していたんですが、実際にや…

最近になってドハマりし、ほぼ全ての時間をマイクラに費やしていましたFumaです。 今回はマイクラのタイトル画面で表示されるテキストのCSSについてご紹介します。「今日のひとこと」的なアレ…

JavaScriptでクリックされた要素を連動させる方法についてご紹介します。