プログラミング

今流行のダークモードをjQueryで実装する!!–TamoTech–

今流行のダークモードをjQueryで実装する

2020年9月20日にiOS 13のアップデートが行われ,ついに!待望の!ダークモードが実装されました!!このダークモードって見た目がかっこいいだけじゃないんです!ダークモードには,低照度時の目への負担の軽減消費電力の低減等の利点があります.今回はWebページにおけるダークモードを「jQuery」を用いて実装していきます.

続きを読む

すぐ使える!数値をカウントアップさせる関数【jQuery】–TamoTech–

カウントアップ,jQuery

Webページに数値データ(会社の売り上げ,社員数,アンケート結果等)を表示する時に,ただ数値を載せるだけでは,あまり注目されないことが多いと思います.自分が一番注目して欲しいデータは,何かしらの強調表現を付け加えなければいけません!強調方法は,デザインで補ったり,アニメーションをつけて補ったりします.今回は,数値をカウントアップさせ,Webページに動きをつける関数をjQueryで作成します.この関数は,初期値,終了値,アニメーション時間,イージング,要素を指定して使えるようにしています.ぜひコピペで使ってみてください!

続きを読む

超重要!!モバイルファーストでレスポンシブ対応なWebサイトを制作する時の5つの重要ポイント【レスポンシブ】–TamoTechBlog–

今回はレスポンシブに対応したWebサイトを作る時の,重要ポイントを解説します.結果から述べると,「レスポンシブ対応のサイトはモバイル版に全力をそそげ!」です.今回はモバイルファーストが以下に重要か,なぜPC版(デスクトップ版)ではないのかをじっくり解説していきます.

続きを読む

【CSS】【z-index】ヘッダー画像を背景画像として設定し,スクロールによって画像とタイトルを隠すデザインの実装方法(ヘッダーメニュー等は常に表示させる)

今回はWebページのデザインの記事になります.ヘッダー画像がスクロールで隠れていくデザインをみたことがあるでしょうか.たまに使われていたりしますよね.スクロールで一緒に上にあがっていくのではなく,その場に留まり,コンテンツが上に被さるように隠れていくようなデザインです.今回はヘッダー画像上の文字も一緒に固定して,スクロールで隠していきます.

続きを読む

【jQuery】Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装する

この記事では,Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します.ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します.また現在のインジケーター以外のインジケーターをクリックすることで,その高さのウィンドウまで自動スクロールするように実装します.Webページ全長がとても長い場合等に有効な方法です.それではインジケーターの作り方を見ていきましょう.

続きを読む