- 2020.12.28
CSSだけで可能！JSを使わなく実装できるスライドショー
スライドショーを組み込みたいんだけどjavaScriptとかってよくわからないし・・・知識がないと難しいよね 大丈夫！今回はCSSだけで実装可能なスライドショーのやり方を教えるよ。 CSSだけで利用できるスライドショーの紹介になります。 コピペでOKですし、コードも簡単なので活用の場は多いと思われます。 CSSコードの設置 [crayon-67d4732a71c6c581053786/] まず、上 […]
CSS
- 2020.08.17
CSSで作成するLINE 風の吹き出し
このサイトで会話しているこのLINEのトークみたいな吹き出しってどうやって作ってるの？ よく有料のワードプレステーマについている機能だよね。これはCSSで実現できるよ。早速やってみよう CSSで作成するLINE 風の吹き出し 画像やイラスト同士が会話しているLINE 風の吹き出しを作成します。 まず、cssのソースは以下の通りです。 [crayon-67d4732a727a2254441924/] […]
- 2020.08.12
cssとJqueryで動かすマーカーアニメーション
サイトスクロールすると小見出しの部分がシューっとマーカーが引かれたりするエフェクトあるよね？ワードプレスではプラグインでそんな機能のものもあるけど、あまりプラグイン増やすとサイトが重くなったりするし・・・・なんとかならないかな・・・？ スクロールマーカーアニメーションだね。cssとJqueryの組み合わせでプラグインを使わずとも比較的簡単に実装できるよ。 今回はcssとJqueryによるスクロール […]
- 2020.08.11
cssとJSで動作するフローティングバナー（スティッキーバナー）
スマホサイトなんかでよく見るけど途中から出現してずっとついてくるバナーってあるよね。あれってどうやって設置するの？ フローティングバナーだねスティッキーバナーともいうけど、cssとJSの組み合わせでできるよ。 今回はふわっと出現してそのままスクロールに追従するフローティングバナーの設置になります。 cssで画像バナーを追従する仕組みをつくり、JSで設置場所に近づいたらふわっと出現させる仕掛けを作成 […]
- 2020.08.06
cssだけで表現する動きのあるボタン
サイトの問い合わせボタンでよく動くやつ見かけるけど、JSのことは良くわからないから実装は難しいかな・・・・ JSの知識はなくともCSSだけで動きのあるボタンを作れるよ。いろんな動きが再現できるから今回はそれを徹底紹介！！ cssのみで実装する動きのあるボタン8選 振動する ぷにぷにする 上下に揺れる 回転して揺れる 左右に揺れる もっちり動く へこむ 鼓動する まずボタンの基本のサンプルデザイン […]
- 2020.06.05
画像をキラリと光らせる CSS
問い合わせのボタンとかデザイン装飾以外で何かしら目立たせたいよね cssで画像やイラストを光らせるエフェクトがかけられるよ。jsといったスクリプトも使わないのでとっても簡単！ CSSのみで表現する画像やイラストをキラリと光らせるスクリプト CSSのみで画像をきらっと光らせるスクリプトになります。 JSを使わずCSSのみで実装可能なので非常に手軽です。 CSS [crayon-67d4732a736 […]