動くウェブサンプルライブラリ（難しげなレイアウトもあるよ）

SCROLL

チェックの有無でフォームの表示／非表示を切り替える

任意資料請求
住所（市区町村）

マスクをかけたSVGを表示

文字数に応じた背景色（単語で改行）

テストテストテストテストテスト

テストテストテストテストテストテストテスト

テストテスト
テストテストテストテストテスト

イメージマップにモーダルの組み込み

●ImagemapGenerator
https://labs.d-s-b.jp/ImagemapGenerator/

100%

マウスオーバーで回転する画像（2枚を切り替え）

マウスオーバーで回転する画像（1枚を切り替え）

全体リンクの中にラベルリンクを付ける

2023年1月24日NEWラベル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

スライダー動画再生（slick + youtube）

動画以外の場合

全画面メニュー

組織図

タイムライン

フロー図

1.ヒアリング

2.無料お悩み相談会

3.講座＆コンサル説明会（無料）

4.ご契約後オリエンテーション

5.講座＆コンサル

トースト（bootstrap）

position: fixed　にしておけば、トーストが消えた後に他の要素が詰まって動くこともない

インタースティシャル広告

100ウェブ内記事を参照のこと

インタースティシャル広告ーいわゆる画面ど真ん中表示の割り込み広告をBootstrapでつくる

ちょっと背景がずれてるリンクボタン

トップに戻る　→

ホバーすると要素の背景の円が拡大する

WordPressサイト構築サービス概要 WordPressサイト構築サービス概要 WordPressサイト構築サービス概要

ぼよよんボタン

相談，問い合わせ，デザイン依頼

ホバーすると背景要素が大きくなってくるリンクボタン

ホバーしてごらん
背景要素が大きくなって要素いっぱいになります

背景帯がスライドしてからタイトル

上からスクロールして可視領域に入ったらスライドして登場するタイトル

bootstrapアコーディオン

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

bootstrapタブ

ホバーで開閉するメニュー