Three.jsを使って３Ｄアニメーションの矢印を作成してみた
- 更新日：
- 公開日：
安易に手を出してしまったThree.js。 Three.jsとは？ Three.jsは、WebGLを用いて3Dグラフィックスをブラウザ上で簡単に表示・操作できるJavaScriptのライブラリです。複雑な3Dシーンやアニ […]
「CSS・Javascript」の記事一覧
テンプレートファイルを挿入する（外部ファイルを読み込む）Javascript
- 更新日：
- 公開日：
HTMLとCSSをメインとしてサイトを作っている場合、グローバルメニュー（orサイドメニュー）やプロフィールなど、全ページに同じような記述をしなければなりません。 例えば、下記はグローバルメニュー（サイドメニュー）が、そ […]
遠近法を使った立体感のあるボタンのCSS
- 更新日：
- 公開日：
遠近感のあるボタンをCSSで作りましたが、思った以上に大変だったので備忘録として･･･。 このような立体感（遠近感）のあるボタンは、画像を使った方が楽のような気がします。 完成形のボタンはこちら！ お申し込みはこちら こ […]
グローバルメニューとサイドメニューに現在地を表示するJavaScript
- 更新日：
- 公開日：
グローバルメニューやサイドメニュー、またはフッターメニューなど、現在地を表示するのに、文字色や背景色を変える動作をWEBサイトでよく見かけます。 下記の画像のようなサイトです。 今回、グローバルメニューとサイドメニューに […]
ポートフォリオなどで使えるサムネイルが縦に並んだスライダー
- 更新日：
- 公開日：
今回、紹介するサムネイルが縦に並んだスライダーは、製品ギャラリーやポートフォリオサイト、不動産サイトなどに使えるのではないかと思います。 動作確認は、こちらから可能です。 サムネイル画像が縦に並んだスライダーのデモを確認 […]
期間限定などの告知に最適な左右に斜線が入ったタイトルのCSS
- 更新日：
- 公開日：
今回は、CTA（Call To Action）のボタンの上にあるとクリック率があがる見出し（タイトル）のCSSを作りました。 自分は、下記のように期限を告知する際などのお知らせに使ったりします。 【期間限定】 6月20日 […]
CSSで縦のフローチャート（ステップ図）を作ってみた
- 更新日：
- 公開日：
ワードプレステーマの賢威では、下記のテンプレートの「ステップ図（フローチャート）」が２つ用意されています。 step-chart_style01のスタイル ステップ1のテキストが入ります。 ステップ2のテキストが入ります […]
思わずクリックしたくなる!?押せるボタンやキラッと光るボタンのCSS
- 更新日：
- 公開日：
マウスカーソルがボタンの上に重なると、ボタンが押されたように凹むボタン。 ボタンが押されたように凹むボタン！ キラッと光るボタン。 キラッと光が走るボタン！ これらのボタンは、CTA（Call To Action）などで […]
CSSで画像付きのチャット風吹き出しを作る方法
- 更新日：
- 公開日：
ワードプレスでは、会話形式の吹出しを作ることができるプラグインが用意されていたり、日本で販売されているテーマの多くは、標準で装備されていることも多いです。 例えば、これらの吹出しデザインは、賢威の標準機能です。 しかし、 […]
2つの矢印が繰り返し動くアニメーションをCSSで作ってみた
- 更新日：
- 公開日：
前回、Photoshopを使って、このようなGIFアニメーションの矢印を作りました。 今回は、2つの矢印が繰り返し動くアニメーションをCSSで作ってみました。 繰り返し動く矢印アニメーションのCSS 繰り返し動く矢印アニ […]