- jQuery アンド条件で要素を表示する
- タグのようにいくつかのキーワードが紐づく要素があり、それぞれ複数のタグを持つ可能性があるとき、ボタンを複数選択することで絞り込むUIのサンプルです。 例えばボタンが５つあり、要素が８こあるとします。 ボタンを押すと、押したキーワードに紐づく要素だけが表示されるようにします。 複数のキーワードを...
- 2023-11-29 23:04:02
UIサンプルギャラリー「キプレ」
jQuery
close
MENU
用途
新着
履歴
分類
★
人気のあるUIサンプル
1
SVG 円の輪郭のアニメーション
2
CSS 左右に行き来するアニメーション
3
HTML5 ダウンロードボタン
4
SVG 円のサンプル
5
jQuery 使ってしまいそうな非推奨のメソッド
6
SVG 三角形のサンプル
7
JS メーラー起動
8
JS スマホを振って音を出す
9
laravel 配列のログ出力
10
NodeJS 画像をHTMLで表示する
11
SVG 矢印のサンプル
12
SVG 文字の輪郭のアニメーション
13
CSS 湯気の表現
14
HTML Base64エンコードで画像を表示
15
CSS tableを使わないgridの表
16
JS aタグを使わないリンクいろいろ
17
JS 通信速度の検知
18
PHP CSVを読み込み先頭行の項目で連想配列
19
CSS インプットスライダーの加工
20
JavaScript 別ページのOG情報を取得
11〜20
更新されたサンプル
-
jQuery アンド条件で要素を表示する投稿：2023-11-29
更新：2023-11-29![]()
-
grepのメモ投稿：2023-11-12
更新：2023-11-12![]()
-
AI OpenAIのChatGPTを使ってみた投稿：2023-04-10
更新：2023-04-10![]()
-
JS 配列要素の読み込みと表示投稿：2023-01-15
更新：2023-02-14![]()
新着サンプル
- grepのメモ
- しばらく使わないと忘れてしまうgrepのコマンドのメモです。 文字列をファイルから探す時のgrepのサンプルです。 [[grep -r 「検索したい文字列」 「検索するフォルダ」]] スピードをアップさせるためにfindコマンド...
- 2023-11-12 18:21:18
- AI OpenAIのChatGPTを使ってみた
- OpenAIを使ってみた。そして、ChatGPTのAPIをトライアルで利用し、CSSで整形してみました。 OpenAIのアカウントを作って、ChatGPTを使ってみました。 Image: Open AI そうするとこんな感じでAIとチャットができます。 Image: Open AI...
- 2023-04-10 22:45:13
- laravel よく使うコマンド
- Laravelの開発で自分がよく使うコマンドを記載していきます。 Laravlバージョンの確認 [[php artisan -V ]] configは以下の設定を変更したときのキャッシュクリア [[php artisan config:cache]]
- 2023-01-28 04:02:20
- JS 配列要素の読み込みと表示
- プレーンJavaScriptでJSONを非同期通信（AJAX）で読み込み表示するサンプルです。 jQueryなどのライブラリを使うともっと記述は減らせますが、あえて使いたくないときは以下のように書きます。 XMLHttpRequestはJSONも対応しているため、JS...
- 2023-01-15 17:46:25
- JS Ajaxをプレーンで実装
- プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。 XMLHttpRequestの関数を利用します。 XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。 [[ const xhr = new XMLHttpRequest();...
- 2023-01-06 00:12:08
- JS タブボタンで要素切り替え
- プレーンJSでタブの表現を実装するサンプルです。 jQueryなどを使わずにボタンを押すと、コンテンツを入れ替える表現を実装しました。 一つ目の要素がデフォルトで表示されます。 ボタン1...
- 2023-01-04 00:15:20
- laravel JS,CSSをまとめる
- laravel-mixを利用して、複数のJSやCSSをそれぞれ一つにまとめるサンプル。 laravelをインストールするとpackage.jsonにあれば、laravel-mixもインストールされる。 repository直下にあるwebpack.mix.jsを開く。 CSSを束ねたい場...
- 2022-11-11 06:41:01
- CSS スタイルの非同期の外部参照
- 重要なCSSと、後から読み込んでもよいCSSを分けて実装するサンプルです。 昨今、表示の速さは検索エンジンが細かく評価するようになりました。 ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むよ...
- 2022-11-06 10:07:47
- SVG カンマのサンプル
- カンマ（コンマ）マークをSVGで描くサンプルです。 引用するときのマークやちょっとした用途で大きなカンマを使うときのSVGを用意しました。 ３つの大きさがあるので、調整してお使いください。 大きなカン...
- 2022-09-18 16:43:48
Top