CSS

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

カウントアップ,jQuery

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

続きを読む

上スクロールすると出現し,下スクロールで消える,メニューバーの作り方【jQuery】

上スクロール,下スクロール

WebページやWebアプリを使っている時に,「画面せまいな〜」とか「メニューバーがなければ良いのに」とか「今メニューバーいらんねん!」とか思ったことありませんか??自分のWebページを作るときは是非今回の「上スクロールすると出現し,下スクロールで消える,メニューバー」を採用してみてください!モバイルファースを意識した,良いサイトになること間違いなしです!それでは,解説していきます!

続きを読む

CSSのグリッドレイアウトを使いこなす3つのステップ!ラインベースのグリッドレイアウトの基礎 –TamoTech–

グリッドレイアウトというものをご存知でしょうか?グリッドとは水平線と垂直線の集合が交差した,編み目上のものを指します.CSSではこのグリッド線を設定し,その線でボックスの配置位置を定義するグリッドレイアウトが可能です.これまで,フレックスボックスで配置してきたコンテンツをより「柔軟に自由に」配置できます.今回は,ラインベースのグリッドレイアウトを実装するための基本的な使い方を解説します.

続きを読む

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

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

続きを読む

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

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

続きを読む

コピペで実装!jQueryでレスポンシブなハンバーガーメニューを実装する

ハンバーガーメニューとは,三本線のボタンのことです.クリックまたは,タップするとメニューが表示されます.一般的にはスマートフォン用のデザインで採用されることが多く,画面領域の有効活用ができます.もちろんPC等の画面が広いデバイスでも使用されることはありますが,今回はスマホ用の画面で,ハンバーガーメニューを表示し,大きい画面ではメニューを横並びにヘッダーに表示させます.これはCSSのみでは難しいので,jQueryを交えて実装していきます.

続きを読む

SNSアイコンのレイヤー展開するマウスオーバーアニメーションをjQueryで作る

この記事ではSNSアイコンのホバーエフェクトを作っていきます.CSSだけでも実装することはできるのですが,CSSが冗長になってしまうので,アニメーションはjQueryで作成していきます.今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します.単純なボタンにするより,おしゃれでモダンなサイトに近づくことでしょう!

続きを読む