Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）
実装方法などは別記事にコードなどを公開していますので、気になる実装例があれば読んでみてください。
【HTML & CSS】デザイン・レイアウト・アニメーション等の実装例
HTMLとCSSで実装できる実装例の纏めです。
【デザイン・レイアウト】要素の配置を操作する（フレックスボックス）
ブロックやボタンなど、HTMLの各要素をいい感じに配置するにはフレックスボックスが便利です。
親要素にdisplay: flex;を設定することで、子要素を横並び(縦並び)にしたり、要素を均等に配置したり、いろいろなレイアウトを組むことができます。
【実装例】
【デザイン・レイアウト】テーブルや説明リストを作る
テーブルや説明リスト（用語ー説明のような表）を作るには<table>タグや<dl>タグを使います。
ここでは、パワーポイントやエクセルで見るようなデザインの実装方法を紹介します。
【実装例（テーブル）】
| 月 | 売上 | 経費 |
|---|---|---|
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シンプルデザイン
| 月 | 売上 | 経費 |
|---|---|---|
| 4 | 500 | 400 |
| 5 | 800 | 650 |
| 6 | 400 | 320 |
シマシマデザイン
【実装例（説明リスト）】
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20cm
- 重量
- 100g
- 素材
- ポリエステル
シンプルデザイン
- 商品名
- エコバッグ
- 価格
- 600円
- サイズ
- 10cm ✕ 20 cm
- 重量
- 100g
- 素材
- ポリエステル
シマシマデザイン
【デザイン・レイアウト】スマホやタブレット表示に対応する（レスポンシブウェブデザイン）
「メディアクエリ」というCSSの機能を用いて、画面サイズに応じて表示内容やレイアウトを変化させることができます。
スマホやPCなど、媒体に応じて適切なレイアウトを組む際に必須の機能です。
【実装例】
以下の表の通り、画面サイズでレイアウトが変わります。
| 画面サイズ | 表示レイアウト |
|---|---|
| 〜767px | 3つの要素が縦並び |
| 768px〜1279px | 3つの要素が横並び |
| 1280px〜 | 3つの要素が横並び & 左の画像が他の画像幅の3倍 |
【デザイン・レイアウト】固定配置エリアを作る
position: fixed;プロパティを設定することで、画面スクロールに追従する固定表示領域を作ることができます。
常に画面表示させたい、ヘッダーやバナーの作成に利用できます。
右のボタンをクリックすると、固定配置バナーが表示されます。
本記事の便宜上、ボタンクリックで表示/非表示を切り替えていますが、特に理由がなければ常時表示でOKです。
【実装例】
上部に固定表示されるヘッダーを作る
右のボタンをクリックすると、ブラウザ上部に固定表示（スクロールしても付いてくる）ヘッダーが表示されます。
本記事の便宜上、ボタンクリックで表示/非表示を切り替えていますが、特に理由がなければ常時表示でOKです。
【実装例】
上部に広告が表示されている場合、ヘッダーが広告に隠れます。広告を消してから表示させてください。
【装飾】テキストを回転 / 縦書き表示にする
通常横書きになってしまうテキストを、
- 90度回転させて縦方向に
- 小説や新聞のような縦書きに
する方法です。
読む方向（通常は右→左）を変える、英字を縦表示にすることもできます。
【実装例】
こんにちは
こんにちは
こんにちは
【装飾】テキストの前にアイコンをいい感じに配置する
テキストの先頭に、アイコン（画像）を挿入する方法です。
アイコンは こちら からフリーでダウンロードもできます。
アイコンのサイズや位置は、好みに合わせて微調整できます。
【実装例】
【装飾】画像の外側 / 内側に影をつける
- 画像の外側に影を付け、少し浮かび上がったようなデザイン（左）
- 画像の内側に影を付け、中心にフォーカスを当てたようなデザイン（右）
影の色や濃さ、長さ、ぼかし具合、位置など、自在に調節できます。
【実装例】
外側に影を付ける
内側に影を付ける
【アニメーション】ホバー時にテキストや画像をズームイン＆暗くする
マウスホバー時に、文字や画像などを拡大したり暗くしたりする方法です。
クリックできることが分かりやすくなり、リンクを貼ったバナーやブログカード、商品画像などに実装されている場合が多いです。
【実装例】
HELLO WORLD
【アニメーション】テキストなどの要素をスライドイン表示する
ページを表示（更新）したときなどに、指定した要素をスライドイン表示する方法です。（こちらの実装では、ボタンクリック時にアニメーションするようにしています。）
【実装例】
【アニメーション】立体的なボタンを作る
クリックすると実際にボタンが押されているような、立体感のあるボタンを作る方法です。
【実装例】
スマホやタッチパネルのタップではスムーズに動作しません。
【JavaScript】UI等のデザイン実装例
JavaScriptでできる、よく見るUIやデザインの実装例纏めです。
メッセージボックスを作る
ボタンなどをクリックしたときに特定のメッセージを表示する方法を纏めました。
JavaScriptの関数を使ってダイアログを表示する
以下の3つの関数が実装されています。
- alert()
-
メッセージ表示のみ
- confirm()
-
「OK」「キャンセル」の選択肢付きメッセージ
- prompt()
-
テキスト入力フォーム付きメッセージ
デザインなどの柔軟性は低いですが、もっとも簡単に実装できます。
【実装例】
アコーディオン・モーダルウィンドウ・ポップアップメッセージ
CSSやJavaScriptを駆使すれば、様々なタイプのメッセージ表示を作成できます。
本サイトでは、実装例のようなメッセージ表示方法について紹介しています。
【実装例】
Hello World!
Hello World!
Hello World!
タブメニューを作る
タイトルなどの見出し（タブ）をクリックすると、それに応じた内容が表示されます。
詳細記事では、クリックではなくホバー時に表示を切り替える方法についても紹介しています。
【実装例】
- タブ1
- タブ2
- タブ3
ハンバーガーメニューを作る
三本線アイコンをクリックするとメニューが表示されます。
詳細記事ではアイコンの作り方やメニューの表示方法に加え、ハンバーガーメニューを組み込んだヘッダーの作り方についても紹介しています。
【実装例】
カルーセル（スライダー）を作る
画像の端に表示された矢印マークをクリックすると、画像がスライドして切り替わる『カルーセル（スライダー）』の実装方法です。
詳細記事では、スライドではなく瞬時に画像が切り替わる方法についても解説しています。
【実装例】
一定時間毎に表示を変える
決められた時間が経過すると、表示されているテキストや画像が自動的に切り替わっていく実装方法です。（こちらの実装例では、3秒毎にテキストがフワッと変わります。）
トップページのメイン画像などに使われるケースが多いです。
こんにちは！
Hello!
你好！
Bonjour！
Guten Tag！
クリックで画像を拡大する（2パターン）
transform: scale; で拡大する
画像をクリックすると指定した大きさに拡大する実装方法です。
CSSのアニメーションを合わせて設定することで、実装例のようにフワッと拡大させたり、拡大の起点を変えたりできます。
【実装例】
モーダルウィンドウを使って原寸大の画像を表示する
画像をクリック または タップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。（右のレインボーの画像をクリック または タップしてみてください。）
画像を原寸大* で画面中央に表示するコードです。
オリジナルの画像自体が小さい場合は、拡大されません。
※表示画面より大きいサイズの場合、適正サイズまで縮小
クリック or タップで拡大します。
もう一度クリック or タップで閉じます。
入力フォームを増やす
ボタンをクリックして入力フォームを増やすことができます。
ユーザーの要望に合わせてフォームを動的に増やしたいときに有効です。
【実装例】
