ドロップダウンメニュー 背景をぼかし表示するドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
背景をぼかして表示するドロップダウンメニューの作り方 背景をぼかして表示するドロップダウンメニューの作り方を紹介します。このサンプルでは、「メニュー」をクリックするとドロップダウンメニューが開き、同時に周囲の背景へぼかしを加えます。背景の内...
ゆきのふ
ドロップダウンメニュー 
ドロップダウンメニュー 背景を暗く表示するドロップダウンメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】
背景を暗く表示するドロップダウンメニューの作り方 背景を暗く表示するドロップダウンメニューの作り方を紹介します。このサンプルでは、「メニュー」をクリックするとドロップダウンメニューが開き、同時に画面全体へ暗い背景を表示します。周囲のコンテン...
通知 基本のお知らせバーを作る方法【HTML/CSS・サンプルコード付き】
基本のお知らせバーを作る方法 基本のお知らせバーを作る方法を紹介します。このサンプルでは、ページを開くとブラウザの画面上部へ横幅いっぱいのお知らせバーが表示されます。HTMLでお知らせ内容を作成し、CSSで画面上部へ固定するシンプルな構成な...
ラジオボタン 立体的なくぼみがあるラジオボタンを作る方法【HTML/CSS・サンプルコード付き】
立体的なくぼみがあるラジオボタンを作る方法 HTMLとCSSを使って、内側へくぼんで見える立体的なラジオボタンを作る方法を紹介します。通常のラジオボタンはブラウザ標準のデザインで表示されますが、CSSで標準の見た目を解除することで、選択部分...
ポップオーバー 立体的なポップオーバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
立体的なポップオーバーを作る方法 立体的なポップオーバーを作る方法を紹介します。このサンプルでは、ボタンをクリックするとその下に補足情報を表示するポップオーバーを作成します。ポップオーバー本体には丸みのある角と右下方向へ広がる厚みを付け、さ...
ボタン 影で立体的に見せるボタンを作る方法【HTML/CSS・サンプルコード付き】
影で立体的に見せるボタンを作る方法 ボタンの下方向に黒い影を付けて、背景から浮いているように見える立体的なボタンを作る方法を紹介します。このサンプルでは、基本のボタンをベースにCSSのbox-shadowを追加し、ボタンの下へ大きくぼかした...
ボタン 立体的なボタンを作る方法【HTML/CSS・サンプルコード付き】
立体的なボタンを作る方法 立体的なボタンをHTMLとCSSで作る方法を紹介します。このサンプルでは、ボタンの下側に厚みを付け、影を組み合わせることで、平面的なボタンよりも奥行きを感じられるデザインに仕上げます。JavaScriptは使用せず...
ページネーション 立体的なページネーションを作る方法【HTML/CSS/JavaScript・サンプルコード付き】
立体的なページネーションを作る方法 立体的なページネーションを作る方法を紹介します。このサンプルでは、10枚の記事カードを1ページにつき2枚ずつ表示し、1〜5のページ番号をクリックすると対応する記事カードへ切り替わるページネーションを作成し...
フッター 立体的な固定フッターメニューを作る方法【HTML/CSS・サンプルコード付き】
立体的な固定フッターメニューを作る方法 Webサイトの画面下部に固定して表示するフッターメニューは、スマートフォン向けのナビゲーションなどでよく使われるUIです。今回のサンプルでは、ホーム・検索・お気に入り・マイページの4つのメニューを配置...
トグルスイッチ 立体的なトグルスイッチを作る方法【HTML/CSS・サンプルコード付き】
立体的なトグルスイッチを作る方法 立体的なトグルスイッチを作る方法を紹介します。このサンプルでは、HTMLのcheckboxとCSSを使用して、スイッチ本体やつまみに厚みと影を付けた立体的なトグルスイッチを作成します。通常の平面的なトグルス...