1. ホーム /
  2. Webデザイン

Webデザイン

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

上スクロール，下スクロール

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

続きを読む

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む