CSS

[コピペでOK!]CSSのみで作るカルーセルスライダー[2〜8枚サンプル]

CSSのみで動くカルーセルスライダーをコピペで使える様、画像枚数2〜8枚で使えるコードを用意しました!前回の記事「オートループするカルーセルスライダー」は以下の記事からどうぞ。 使い...
自作ツール

WEBツール「まとめて一括トリミング」を作った

画像のトリミングができるツールはありましたが、一括で出来るツールが欲しかったので自分で作ってみました!複数の画像をまとめて指定した縦横比に一括でトリミングすることができます。 こんな感じで画像をまとめて選択して…...
CSS

[jQuery再現]JavaScriptとCSSで作るSlideToggleメソッドっぽいもの

素のJavaScriptでjQueryのトグルメソッドを再現します。アニメーションはCSSで行うので処理も軽いかも…? サンプル toggle-btn1 target1 スライドトグル実装! ...
CSS

[JavaScript]CSSがブラウザに対応していない場合のみpolyfillを読み込む

特定のCSSがブラウザに対応していない時に、polyfillを利用することがあります。その際に、対応しているブラウザでは無駄な読み込みをしないために、対応しているかを判定して読み込む方法です。 JavaScript Polyf...
CSS

[CSS]画像のグラデーション処理は擬似要素でサクッと表現する

画像の上からグラデーションを被せる場合、画像で書き出すよりもCSSで表現した方が後々調整等も楽になります。 デモ .gradation{ position: relative; } .grada...
HTML

[JavaScript]一文字ずつ表示するアニメーション(+画面内にはいったら開始)

まるでタイピングしている様に一文字ずつ表示していくアニメーションを作成してみます。画面内に入ったら表示が始まる設定も解説します。 デモ&使い方 まるでタイピングしている様に一文字ずつ表示 <p cl...
WordPress

[WordPress]特定の固定ページへのリンクを管理メニューに追加する

特定の固定ページを管理画面メニューに追加してすぐに開ける様にしてみます。今回はJavaScriptを使用します。 コード 以下のコードの(1)(2)を編集し、functions.phpに入力します。 add_ac...
CSS

CSSとJavaScriptで配列から動く棒グラフを作ってみる[ライブラリ未使用]

CSSとJavaScriptで配列から棒グラフを作るコードを作ってみました。アニメーションでぬるっと生えてきます。ライブラリは使用しません。 サンプル .js-graph { margin...
CSS

[jQuery再現]CSSとJavaScriptで作るJqueryフェードイン・フェードアウトメソッドっぽいもの

CSSのanimationプロパティとJavaScriptを組み合わせて、jQueryのフェードイン・フェードアウトメソッドに近い物を作ります。アニメーション部分をJavaScriptではなく、CSSで行うことも目的とします。 ...
HTML

[カウントダウンタイマー表示]指定の日時以降に内容を変更させる[JavaScript]

指定した日時の前後で内容を変更させるシンプルなコードです。変更されるまでの時間を表示するカウントダウンタイマーを合わせて表示します。 使用デモ 年が変わるまでです。 あけましておめでとうございます! *上記のみだと実際に変更さ...
タイトルとURLをコピーしました