画像の遅延読込みでウェブサイト速度を改善！lazysizes.jsの使い方ガイド｜DAD UNION – エンジニア同盟
lazysizes.jsを使ってサイトに掲載してる画像を遅延読込し表示させる方法をご紹介します。 ウェブサイトのパフォーマンスを改善する方法は数多くありますが、その中でも特に効果的なのが「画像の遅延読込み」です。今日は、この技術を使ってサイトの表示速度を向上させる方法について詳しく説明していきます。SEOにも影響するこの手法は、サイト訪問者に快適なブラウジング体験を提供し、Googleの「PageSpeed Insights」での評価を向上させることができます。 はじめに：遅延読込みとは？ 遅延読込み（Lazy Loading）は、ウェブページ上の画像やビデオなどのメディアコンテンツを、それらが必要になるまで読み込まない技術です。たとえば、ユーザーがページをスクロールして初めてその画像が表示される範囲に入った時に読み込むようにします。これにより、初期のページロード時間が短縮され、パフォーマ
JavaScriptアニメーションライブラリTweenMaxを使ってタグ要素を移動する方法｜DAD UNION – エンジニア同盟
JavaScriptを使ったアニメーション方法は色々ありますが。今回アニメーションライブラリTweenMaxを使ってタグ要素を移動するをご紹介します。 アニメーション移動するタグ要素のCSS記述 ※アニメーション移動するタグ要素#pos、#to、#frm、#frmtoを用意します。必要に応じて変更して下さい。 <style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:
Node.jsのインストール – Windows環境でnpm-scripts｜DAD UNION – エンジニア同盟
Windows環境でnpm-scriptsをやるため、まずはNode.jsのインストール手順をご紹介します。 1.Node.jsのインストール 1-1.Node.jsをダウンロード ダウンロードURLはこちら 「LTS版」の「Windows Installer」からダウンロードします。 1-2.ダウンロードした.msiファイルをクリックしてインストール ダウンロードした「node-v14.15.4-x64.msi」（2021/2/3時点）をクリックします。 1-3.インストーラーが立ち上がるので以下の流れでインストール デフォルト（Node.js runtime）のままインストールします。 デフォルト（チェック無し）のままインストールします。 以上でインストール完了です。 2.Node.jsのインストール（バージョン）を確認 2-1.Windows10左下のウィンドウズアイコンを右クリック
bespoke.jsを使ってプレゼン用パネルイメージを表示｜DAD UNION – エンジニア同盟
画像のスライド系みたいに、bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させる方法をご紹介します。 プレゼン用パネルイメージを表示するCSSの記述例 ※必要に応じて変更して下さい。 <style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif; padding: 0; margin: 0; } h1{ font-size:55px; line-height:1.4em; text-align:center; font-weight:normal; } section{ font-size:60px; text-align:center; padding-top:25px; color
後ろから前へ回転しながら複数コンテンツエリアを表示【jquery.vortex.js】｜DAD UNION – エンジニア同盟
jquery.vortex.jsを使って後ろから前へ回転しながら複数コンテンツエリアを表示する方法をご紹介します。 後ろから前へ回転しながら複数コンテンツエリアを表示するCSSの記述 ※回転表示させるエリア（#vortex）と複数コンテンツエリア（.square-button）のCSS記述です。必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:15px 0 10px 0; line-height:1.4em; } .clWrap{ width:800px; margin:0 auto; } #vortex { width: 350px; hei
jquery.champagne.jsを使ってリストタグ要素をランダムにフェードイン表示する方法｜DAD UNION – エンジニア同盟
jquery.champagne.jsを使ってリストタグ（li）要素をランダムにフェードイン表示する方法をご紹介します。 ページ表示時やクリック時に複数のliタグ要素をランダムにフェードイン表示させたい時に使えます。 リストタグ要素をランダムにフェードイン表示するCSSの記述 ※champagne.cssファイルを読み込みます。ファイル内にはkeyframes等の記述があります。その他は必要に応じて変更して下さい。 <style> body{ padding: 0; text-align: center; position: relative; margin: 0; height: 100%; } h1{ padding:10px 0; font-size:18px; line-height:1.4em; } </style> <link rel="stylesheet" type="te
liタグ要素を色々な種類の回転で表示する方法【jquery.roundabout.js、jquery.roundabout-shapes.js】｜DAD UNION – エンジニア同盟
jquery.roundabout.js、jquery.roundabout-shapes.jsを使って、リストタグ（li）要素を色々な種類の回転で表示する方法をご紹介します。 リストタグ（li）系のスライダーって結構色々種類がありますが、このjsプラグインで色々な種類の回転表示が可能です。 リストタグ要素を色々な種類の回転で表示するCSSの記述 ※3パターンのリストタグ（#sample1 ul、#sample1 ul li、#sample2 ul、#sample2 ul li、#sample3 ul、#sample3 ul li）要素のCSS記述です。必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18
「ページトップ」アンカーリンクを任意の箇所に自動表示させる方法【jquery.scrollUp.js】｜DAD UNION – エンジニア同盟
jquery.scrollUp.jsを使って、「ページトップ（PAGE TOP）」へのアンカーリンクを任意の箇所に自動表示させ、「ページトップ（PAGE TOP）」をクリックするとイイ感じにスクロールアップする方法をご紹介します。 「ページトップ」アンカーリンクを任意の箇所に自動表示させるCSSの記述 ※「ページトップ」アンカーリンク（#scrollUp）のCSS記述です。必要に応じて変更して下さい。 <style type="text/css"> <!-- body { margin: 0px; font-size:14px; } h1{ font-size:16px; font-weight:normal; line-height:1.4em; text-align:left; padding:15px 0; } p{ padding-top:150px; } #idWrap{ wid
jquery.classyled.jsを使ってWebサイトに時間やカウントダウンをデジタル表示する方法｜DAD UNION – エンジニア同盟
jquery.classyled.jsを使ってWebサイト上に時間やカウントダウンの数字をフォーマット化しデジタルに表示する方法をご紹介します。 時間やカウントダウンの数字をデジタルに表示するCSSの記述 ※必要に応じて変更して下さい。 <style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:18px; font-weight:bold; line-height:1.6em; text-align:center; padding:15px 0; } #idWrap{ width:700px; margin:0 auto; text-align:left; } #led0,#led1{ background-color:#000; } --> </style> 時間やカウントダウンの数字をデジタルに表示す
dylay.jsを使って弾むような動きでグリッドを表示する方法｜DAD UNION – エンジニア同盟
dylay.jsを使って、弾むような動きでグリッドエリアを表示する方法をご紹介します。複数グリッドをソートすることも可能です。 dylay.jsを使って弾むような動きでグリッドを表示するJavaScriptの記述 ※jquery.min.js、jquery.easing.1.3.js、dylay.jsファイルを読み込みます。$(グリッドエリア).dylay({スピードやeasingの設定})を記述します。$(グリッドエリア).dylay(‘sort’,ソートルール})でソートルールでソートします。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <script src="d
drawingboard.jsを使ってマウスで楽しめるお絵描きボードを実装する方法｜DAD UNION – エンジニア同盟
drawingboard.jsを使ってブラウザにマウスで楽しめるお絵描きボードを実装する方法をご紹介します。 ブラウザにお絵描きソフト的なボードを実装してみます。 （古いブラウザバージョンや種類によっては表示されません） ブラウザにマウスで楽しめるお絵描きボードを実装するCSSの記述 ※drawingboard.cssファイルを読み込みます。その他は必要に応じて変更して下さい。 <link rel="stylesheet" href="css/drawingboard.css"> <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.
jquery.backstretch.jsを使用してレスポンシブな背景画像スライドショーを実装｜DAD UNION – エンジニア同盟
ブラウザサイズに最適化された背景画像の切り替えを実装する方法として、jquery.backstretch.jsを活用する手法はウェブデベロッパーにとって有益なアプローチとなります。 このライブラリを使用することで、ユーザーのビューポートに適した背景画像をダイナミックに展開し、ウェブページのビジュアルを引き立てることができます。 背景:ユーザーエクスペリエンスの向上における背景画像の役割 ビジュアルエクスペリエンスは、ウェブサイトのユーザビリティとエンゲージメントに直結します。 ダイナミックなビジュアル要素は、ユーザーの注目を引き付け、サイト滞在時間の延長やコンバージョン率の向上に寄与します。 このコンテクストで、背景画像のローテーションは、ページの動的な雰囲気を作り出し、ユーザーとのインタラクションを増加させるポテンシャルを秘めています。 CSS設定:基礎となるスタイリング サイトデザイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テキストに影やグロー（Glow）を付けてアニメーション表示【jquery.animate-textshadow.js】｜DAD UNION – エンジニア同盟