1. ホーム /
  2. 2020年 8月

2020年 8月 の投稿一覧

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む