＊ボタンをクリックするとテキストがクリップボードにコピーされるサンプルです＊

クリップボードへのコピーはJavaScriptで処理し、その他の付随するアニメーションなどはCSSで調整しています。
JavaScriptはnavigator.clipboard.writeText()を使用しています。

＊JavaScriptで背景色が自動的に変化するプログラム＆アニメーションも取り入れた3Dボックスです＊

3Dボックス自体は、rotateX/Y、translateZプロパティを使うことで比較的簡単にできますが、アニメーションやJavaScriptと組み合わせることで、さらに複雑な動きを実装することも可能です。

アニメーションはCSSでもJavaScriptでも実装することが可能ですが、今回はCSSのanimationプロパティで3Dの箱が角度をつけながら動くアニメーションをつけてみました。

＊jQueryをはじめとしたライブラリを使用しない、画像スライダーのサンプルです＊

画像のスライダーはjQueryやそれを利用したライブラリ（slickなど）を利用することが多いかと思いますが、脱jQueryの流れもあり、どうしてもライブラリを使用したくない場合もあるかと思います。

そこで今回はjQueryはもちろん、ライブラリなどを一切使用していない画像スライダーのサンプルを作成しました。

【 CSS・JavaScript 】

＊画面右にメニュー開閉ボタンを配置したスライドメニューのサンプルです＊

開閉式のメニューボタンは通常、画面の上部か下部に配置されることが多いですが、今回は、メニューの開閉ボタンを画面の右端に設置したサンプルを作ってみました。

画面右の「MENU」ボタンをクリックすると、メニューが現れます。

CSSでクリップしたり、アニメーションをつけたり、細かいところにもこだわったメニューになっています。

なお、クリックイベントはJavaScriptで制御しています。

【 CSS・JavaScript 】

＊キャラクターなどにフキダシをつけて喋らせるレイアウトのサンプルです＊

ここ最近、ブログサイトでキャラクターやアイコンにフキダシをつけて会話形式にするという見せ方が流行っています。

元々の画像サイズが極めて軽いアイコンなどにフキダシをつけて喋らせることで、ページを重くすることなく、ブログにメリハリをつけることが可能となります。

【 CSS 】

＊文字入力数をチェックし、短すぎる文章は送信できないようにするサンプルです＊

フォームの入力必須項目を増やすなど、イタズラ・スパム対策は色々あるのですが、今回は一定の文字数以上入力しなければ送信できない機能のサンプルを作ってみました。

【 HTML(textarea)・CSS・JavaScript 】

＊画像が動きながらスライドしていくサンプルです（CSSのみ使用）＊

画像スライダーは通常、JavaScriptやそのライブラリで実装することが多いですが、CSSのみで実装してみました。

主に、background-image・size・positionプロパティの組み合わせと、opacity、animationプロパティを活用しています。

【 CSS 】

＊モーダルウィンドウのサンプルです＊

ボタンをクリックすると全画面表示でモーダルウィンドウが現れ、ウィンドウ右上の×ボタンで閉じることができる、一般的なモーダルウィンドウのサンプルです。

ユーザーの行動を制御できるので、警告や、確実に読んでもらいたい重大なお知らせを表示させるのに向いています。一方で、多用するとユーザーをイラつかせてしまう原因にもなるため、ここぞという時だけにしておくのがおすすめです。

【 CSS・JavaScript 】

＊CSSのみで作成されているツールチップサンプルです＊

CSSでは通常、クリックイベントをJavaScriptのようには制御できませんが、今回は:focusの疑似クラスを用いてCSSのみで実装してみました。

【 HTML（data-descr属性）・CSS 】

＊背景にタイル柄の画像を描写し、さらにタイルの色を自動的に変化させます＊

今回は、HTMLのcanvas要素、CSSのbackground-image、そしてJavaScriptのcontext関連やsetInterval()メソッドを利用して、「背景に画像を描写し、その背景の画像の色がランダムで自動的に変化していく」という機能を作ってみました。

【 HTML(canvas)・CSS・JavaScript 】