Example
HTML、CSS、JavaScriptを利用した参考例です。
雛形の作成 | 雛形の作成例です。 |
レスポンシブWEBデザイン | |
レスポンシブWEBデザイン | デバイスごと表示幅について |
ナビメニューなどのコンテツの表示/非表示 | ナビメニューなどの表示/非表示 レスポンシブメニューについて |
ドキュメントの開く/閉じる、リロード、遷移 | |
web ページのリロード reload() | web ページの再読込について |
CSS アニメーション | |
CSS Animation | CSS Animetionについてです。 |
ナビメニュー(navigation menu) | |
ナビメニュー(トップナビメニュー) | ページの上部に付けるナビメニューについてです。 |
ナビメニュー(bread crumbs) | ルートナビメニューとも呼ばれる、ファイルの階層構造、ページの分類、ページの経路を示すnavigation menuです。 |
外部ファイルから選択肢を取得 | |
IFRAMEを使った一覧選択 | IFRAMEエレメントを用いた選択肢一覧。 |
スライドショー | |
Slide Show | スライドショー、手動で切り替えます。 |
Slide Show Auto | スライドショー、自動で切り替えます。 |
ページスクロール | |
control of scroll position | ページスクロールによるエレメントの位置を操作します。 |
control of scroll position with JavaScript | ページスクロールによるエレメントの位置をJavaScriptで操作します。 |
影を付ける | |
影を付ける(box-shadowプロパティ) | エレメント自体に影を付けます。 |
影を付ける(filterプロパティ) | エレメント内の画像の形に合わせて影を付けます。 |
ぼかし | |
背景のぼかし(Background blur) | 背景画像や背景色のぼかし方法です。 |
Mapの埋め込み | |
簡易なGoogle Mapの埋め込み | 簡易なGoogle Mapの埋め込みです。カスタマイズはできません。 |
カスタマイズ可能なGoogle Mapの埋め込み | カスタマイズ可能なGoogle Mapの埋め込みです。販促用です。 |