レンダリングを妨げるリソースの除外/CSSを非同期で読み込む
レンダリングを妨げるリソースの除外/CSSを非同期で読み込む PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。 この項目が表示される原因の1つは CSS ファイルの読み込みなどのレンダリングブロックによる表示の遅延です。 以下はレンダリングをブロックする CSS ファイルの読み込みを最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。 レンダリングのブロック 以下はあるサイトのページを PageSpeed Insights でテストした結果の一部抜粋です（同様のテストは Chrome の拡張機能 Lighthouse でも可能です）。 「改善できる項目」が複数表示されていて、その中に「レ
JSやCSSに自動で付与されるバージョン番号を非表示に
WordPressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索してみてください。 バージョン番号を消すことは、セキュリティ的な観点から本当に意味があるのかどうかは議論が分かれるところですが(どうせ中身に書いてあるし...バージョンなんか見ずに無差別爆撃が最近でしょうから)、余計なものはできるだけ出力しないほうがいいと考え消すことにしました。このブログで挙動に関してある一定期間様子をみて他のブログに適用していこうと思います。 方法は、以下のサイトを参考にさせてもらいました。(Thank you!) How to remove WordPress version parameter from JS and CSS files どちらか選択して、functions
SweetAlert2
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
JavaScript入門: 基礎知識をGIFアニメで分かりやすく解説 -総まとめ
JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） | ガリガリコード
このページでは、Swiperの前・次スライドボタン、ページネーション、スクロールバーのカスタマイズ方法について解説します。 Swiperとはなんぞやという方はこちらをご参照ください。 というわけで、早速カスタマイズしてい … 投稿 サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（各種ナビゲーションカスタマイズ編） は ガリガリコード に最初に表示されました。
サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編） | ガリガリコード
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 最新版は公式ページを確認してください。 Use Swiper from CDN - Swiper ※バージョンが変わるとパラメータの書き方が変わることがあるので注意。 本記事は11.0.5（2023年11月22日リリース版）対応の内容です。 .cssは<HEAD></HEAD>内に追加します。 .jsは<BODY></BODY>内の方が多少ページの描画が速くなります。（Swiper設置箇所より前に読み込む） 自分のサーバーに置きたい人は、Git
JavaScriptフレームワークとは何か？最新おすすめ5選を比較｜Udemy メディア
「JavaScriptフレームワーク」とは、JavaScriptで開発するアプリケーションの枠組みを意味します。この記事では、JavaScriptフレームワークの基礎や、ライブラリとの違い、おすすめのJavaScriptフレームワークについて解説します。 JavaScriptフレームワークとは何か？ライブラリとの違いは？ JavaScriptの「フレームワーク」とは、JavaScript開発におけるアプリケーションの枠組み、土台部分を意味します。英語のFrameworkという言葉は、「枠組み」という意味です。開発における「フレームワーク」は、システムの骨組みと表現されることもあるでしょう。 また、アプリケーションのおおまかな枠組みのみであることから、フレームワークは「アプリケーションの未完成品」であると説明されることもあります。 JavaScriptでフレームワークを利用すれば、既存のアプ
2020年10月 webトピックス
2020年10月 webトピックス 2020年10月、個人的に気になった記事のまとめです。 投稿日2020年11月01日 更新日2020年11月01日
JavaScriptで変数内に特定の文字列が含まれるかどうかを調べる方法
変数に入れた値の中に特定の文字列を含むかどうかで条件分岐させる方法をご紹介いたします。 JavaScriptを実装していると、結構使えるケースが出てくるので、覚えておくと役立つかと思います。 JavaScriptで変数内に特定の文字列が含まれる場合に条件分岐させる方法 対象文字列が1つの場合 indexOfメソッドを使うことで、簡単に変数内に特定の文字列を含むかどうかを調べることができます。 例えば、以下のように記述することで、str_data内に’晴れ’が含まれるかどうかで条件分岐できます。 var str_data = '今日の天気は晴れです'; if (str_data.indexOf('晴れ') !== -1) { //'晴れ'が含まれる場合 } else { //'晴れ'が含まれない場合 }
JavaScript / Css 圧縮・軽量化（Minify）：ファイルを圧縮して表示速度を上げる | ラッコツールズ🔧
空白・改行・コメントを削除し、ソースコードを軽量化します。 Javascriptやcssを圧縮するメリットは？ファイルサイズを縮小しサーバー容量の節約ができる読み込み時間が短縮されWebページの表示速度が向上できるソースコードを難読化し悪用を防ぐ
フレームワーク不要の非依存型で軽量シンプルなカラーピッカーライブラリ・「Vanilla Colorful」
Vanilla Colorfulはフレームワーク不要の非依存型で軽量シンプルなカラーピッカーライブラリです。 名前の通りバニラなスクリプトで動作しますが、他フレームワークにも柔軟に対応する事も可能です。 実装にはカスタム要素とShadow DOMを使用するので古いブラウザやIE11はサポートされていません。
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bootstrap 5の作業環境の構築方法、依存関係のインストール手順、ページやコンポーネントの実装、jQueryを使用せずにシンプルなJavaScript（バニラJS）でコンポーネントを実装する方法などを紹介します。 Bootstrap 5 tutorial: learn how to get started without jQuery by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の作業環境を用意する方法 npm依存関係のインストール Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成 BootstrapのSassファイルをワークフローに含める 新しいマークアップで簡単なブログページを作成する ナビゲー
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 <div class="animate"> スクロールアニメーション要素 </div> <ul class="list"> <li class="animate">スクロールアニメーション要素1</li> <li class="animate animate2">スクロールアニメーション要素2</li> <li class="animate animate3">スクロールアニメーション要素3</li> </ul> .animate2と.animate3は、タイミングをずらして表示するためのクラスです。.animate→.animate2→.animate3の順番で表示するようにCSSで指定します。 ステッ
脱jQuery！素のJavaScriptでローディング画面を実装する方法
素のJavaScriptでローディング画面を実装する方法 ステップ1. HTMLのマークアップ HTMLは以下のように、#loadingにローディング画像、#pageにローディング以外のコンテンツを入れるようにマークアップします。 <div id="loading"> <figure class="loading-logo"> <img src="logo.png" alt=""> </figure> </div> <div id="page"> コンテンツ </div> #loading { position: fixed; width: 100vw; height: 100vh; transition: all .5s ease; background-color: #fff; z-index: 99999; } #loading.is-loaded { opacity: 0; vis
一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法
一定量スクロールすると表示されるページトップボタンをjQueryなしで実装したいなと思って調べていたら、ドンピシャな記事がありました。 [JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページトップへスムーススクロールで戻るボタンを作る ｜ memocarilog こちらの記事を参考に、一定量スクロールした時に要素の表示・非表示を切り替える処理だけを実装したので、その内容を備忘録として残しておきたいと思います。 一定量スクロールすると要素をふんわり表示させる処理をjQueryなしで実装する方法 内部リンクのスムーススクロールについては別途実装済みの環境でしたので、スクロールでページトップボタンを表示させる処理のみを実装しました。 ページトップへ戻る時のスムーススクロールも併せて実装する場合は、上記memocarilogさんの記事を見ていただくか、こちらの記事をご参
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト表示を少しでも早く！WordPressでJavascriptファイルを非同期にする方法 | さんぽずかん
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
