ヘッダー スクロールすると背景色が変わる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると背景色が変わる固定ヘッダーを作る方法 ページをスクロールすると背景色が変わる固定ヘッダーを、HTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、基本のヘッダーと同じ「Sample Site」のサイ...
ゆきのふ
ヘッダー 
ヘッダー スクロールすると小さくなる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると小さくなる固定ヘッダーを作る方法 ページをスクロールすると高さが小さくなる固定ヘッダーを、HTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、基本のヘッダーと同じ「Sample Site」のサイト...
ヘッダー スクロールすると浮き上がる固定ヘッダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
スクロールすると固定ヘッダーが浮き上がるデザインを作る方法 スクロロールすると固定ヘッダーが浮き上がって見えるデザインを作る方法を紹介します。このサンプルでは、ページ上部にヘッダーを固定し、ページを下へスクロールするとヘッダーの下側に影を表...
ヘッダー 上部に固定されるヘッダーを作る方法【HTML/CSS・サンプルコード付き】
上部に固定されるヘッダーを作る方法 ページをスクロールしても画面上部に固定されたまま表示されるヘッダーを、HTMLとCSSで作る方法を紹介します。通常のヘッダーはページを下へスクロールすると画面外へ移動しますが、固定ヘッダーにすることでサイ...
ボタン 波紋アニメーション付きボタンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
波紋アニメーション付きボタンを作る方法 ボタンをクリックすると、クリックした位置から円形の波紋が広がるボタンを作る方法を紹介します。このサンプルでは、ボタンの内側だけで波紋を表示するのではなく、クリックした位置を中心に波紋がボタンの外側まで...
ボタン グラデーションボタンを作る方法【HTML/CSS・サンプルコード付き】
グラデーションボタンを作る方法 複数の色が滑らかにつながるグラデーションボタンを作る方法を紹介します。このサンプルでは、水色から青、紫へ横方向に変化する3色のグラデーションをボタンの背景に設定します。JavaScriptを使用せず、HTML...
ボタン アイコン付きボタンを作る方法【HTML/CSS・サンプルコード付き】
アイコン付きボタンを作る方法 アイコン付きボタンを作る方法を紹介します。ボタンの中にアイコンとテキストを並べることで、ボタンの意味を視覚的に伝えやすくなります。文字だけのボタンよりも用途が分かりやすく、ダウンロード、送信、検索、詳細表示など...
ボタン ホバーでふわっと浮くボタンを作る方法【HTML/CSS・サンプルコード付き】
ホバーでふわっと浮くボタンを作る方法 ボタンにカーソルを重ねると、ふわっと上へ浮き上がるボタンを作る方法を紹介します。このサンプルでは、通常時はシンプルな青いボタンを表示し、ホバーするとボタン全体が少し上へ移動します。JavaScriptを...
ボタン ホバーで背景色が変わるボタンを作る方法【HTML/CSS・サンプルコード付き】
ホバーで背景色が変わるボタンを作る方法 ボタンにカーソルを重ねると、背景色が変わるボタンを作る方法を紹介します。このサンプルでは、通常時は白い背景と青い枠線で表示し、ホバーすると背景を青、文字を白へ切り替えます。JavaScriptを使用せ...
ボタン 角丸ボタンを作る方法【HTML/CSS・サンプルコード付き】
角丸ボタンを作る方法 ボタンの四隅を丸くした、角丸ボタンを作る方法を紹介します。このサンプルでは、基本のボタンをベースにCSSのborder-radiusを調整し、丸みのあるデザインに仕上げます。JavaScriptを使用せず、HTMLとC...