タグ 検索フォーム
新着順 10 users 50 users 100 users 500 users 1000 users静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ラ... 続きを読む
HTMLにsearch要素が追加されたぞ!
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にse... 続きを読む
フロントエンドの制作者は持っておくとかなり便利!Webのさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザインアイディア帳 | コリス
Webページやスマホアプリに動きやアニメーションを加えたい、そんな時にすぐに役立つコピペで利用できる解説書を紹介します。 コードはサポートサイトから最新版がダウンロードでき、画面遷移、ナビゲーション、ボタン、スライドショー、検索フォーム、グラフなど19種類にバリエーションが200個くらいあり、「この1冊が... 続きを読む
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ | コリス
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを... 続きを読む
コピペで簡単!シンプルなHTMLとCSSで実装された17種類のヘッダのテンプレート -headers.css | コリス
新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css ... 続きを読む
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト(アイコンも)を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む
Flex-Layout と Angular Material でグッバイCSS – 検索フォームを作る | DevelopersIO
Flex-Layout と Angular Material でこれを作りました。 この画面、CSSを一切書いていません。 いい時代になりましたね。ごめんなさい、嘘です。 全体のパディングだけ1行設定しています。それ以外は使っていません。 CSSレスなSPAを目指す CSSを書かずに画面を作れるならば、それに越したことはありません。単純にメン... 続きを読む
React勉強会1(2016-05-25) - Dolpenの日記
2016 - 05 - 26 React勉強会1(2016-05-25) 発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json データを使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブ コンポー... 続きを読む
各国内大学・研究機関におけるアクティビティの高い研究分野 - A Successful Failure
2015年09月06日 各国内大学・研究機関におけるアクティビティの高い研究分野 Tweet 次の検索フォームは、前回の科研費新規採択数から見る国内の研究分野別有力大学・研究機関を大学・研究機関別に逆検索できるようにしたものである。あくまで科研費の新規採択数のランキング上位に位置される研究分野を示したものであるので、あくまでアクティビティを測る一つの目安とみてほしい。 志望校を決めるときや、母校で... 続きを読む
Rails4 - Virtusが便利 - Qiita
Virtusというgemが便利でした Railsの検索フォーム等、モデルに紐付かないパラメータを処理する時などに使用するといいと思います。 class SearchForm include Virtus.model attribute :product_name, String attribute :group_id, Integer attribute :created_at_lteq, Dat... 続きを読む
Rails+ransackで検索機能作る - 城陽人の本棚
Railsで簡単に検索機能つけるのに、ransackというgemがあるようなので使ってみた。Railsは4.2.0、ransackは1.6.3を使いました。まず、Gemfileに追加。 gem "ransack", '~> 1.6.3' bundleでインストールする。 $ bundle install --path vendor/bundle 直接的にransack関係ないけど、検索フォームを作... 続きを読む
超カッコ良い検索フォームのチュートリアル&デモ:phpspot開発日誌
超カッコ良い検索フォームのチュートリアル&デモ 2014年11月13日- Simple Morphing Search | Codrops 超カッコ良い検索フォームのチュートリアル&デモ。 検索窓といえば、単にinputがあって、というのを想像しますが、こちらを見れば、検索フォームはもっと改善が可能だという事を思い知らされます 検索窓がバーンと広がって全画面に。検索のサジェスト等も表示されます。 ... 続きを読む
【裏ワザ】意外と知らないYouTubeの隠し機能「イースターエッグ」まとめ
こんにちは。 皆さんが普段何気なく見ているYouTube。 実は、イースターエッグと呼ばれる隠し機能があるのをご存知ですか? 今回は、意外と知られていないYouTubeのイースターエッグをいくつかご紹介します。 Youtubeがギーク仕様に Youtubeの検索フォームに、「/ geek week」と入力してみてください。 (/ のあとは半角スペースを空けてください。) すると、なんとサイト全体が... 続きを読む
ブログにGoogleカスタム検索を設置する方法。高速・高精度の検索をあなたに! | love guava!
ブログにGoogleカスタム検索を設置する方法をご紹介します。Googleが誇る高速・高精度の検索をあなたのブログにも導入してみませんか?こんにちは。グアバです。 ブログに検索フォームを設置している方は多いと思います。私が使用しているWordPressテーマの「STINGER3」にも標準で利用できるようになっています。 もちろん普通に検索はできるのですが、検索精度に少し不満がありました。なんという... 続きを読む
クライアントサイドで全文検索を実現する方法 | IDEA*IDEA
ちとメモしておこう。CSSとJavaScriptを駆使してクライアントサイドで全文検索する方法ですな。 ↑ こんな感じでインクリメンタル検索ができます。 仕組みは簡単で、全文をCSSのデータ属性に突っ込んでおいてJSでごにょごにょするだけですな。JSの方で「:not」使っているのが新しい感じです。 ちょこっと検索フォームを作りたいけど、サーバーと通信するのはどうもね・・・という時もあるかと思います... 続きを読む
Google乗換検索がアップデート、より検索しやすく : ライフハッカー[日本版]
Google , オフにやること , 仕事がはかどる , 仕事術 , 趣味 Google乗換検索がアップデート、より検索しやすく 2013.05.15 22:30 仕事やプライベートで電車やバスの乗り換えを調べる時、Googleを使っているという人も多いと思います。 この『Google乗換検索』、Googleの検索フォームに地名を2つ入力するだけで乗換時間などを調べられて非常に便利ですが、このたび... 続きを読む
速報:新型iPhoneの名称はiPhone5で決定 | ガジェット速報
速報 ― 9to5Macは12日(現地時間)、米アップルの公式ウェブサイトの検索フォームに「iPhone-5」と入力すると、いくつかの検索結果が該当することを明らかにした。ただし、結果の先にあるページには今のところアクセスできない。 <a href="http://gg... 続きを読む
貴方のFacebook検索のストレスを軽減してくれる、10個の検索機能と外部検索サービス
「今日会ったあの人がFacebookをやっているか探したい。」 「友達がシェアしていた『あれ』って何の記事って何だったっけ?」 こう思って、Facebookの検索フォームで探そうとしても、Facebookさんの検索フォームが思うような結果を返してくれない事が多いですよね。 今回の記事では、そんな時に使える便利な検索機能、外部検索サービスを一気に10個ご紹介します。皆さんがご存知ない機能やサービスも... 続きを読む
はてなブックマークの検索機能を刷新しました - はてなブックマーク日記 - 機能変更、お知らせなど
本日、はてなブックマークのあるタグがついたエントリーをまとめて閲覧できる「タグページ」と、はてなブックマーク内で「はてなウェブ検索」として提供していた、はてなブックマークで検索する機能を統合し、デザインを変更しました。 新しい検索機能は、はてなブックマークのトップページ、最上部にある検索フォームなどから利用できます。検索エンジンを変更したため、従来よりも高速に検索できます。 各ページの検索フォーム... 続きを読む
次世代の検索フォームを作成するjQuery&CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery&CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそ... 続きを読む
WordPressの検索機能をもっと使いやすくする | Webクリエイターボックス
2011年12月13日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは本当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。... 続きを読む
Google 検索にグラフ電卓機能が追加 -- Engadget Japanese
Google がグラフ電卓機能を導入しました。Google の検索フォームに関数を入力すれば、そのグラフが検索結果として表示されます。コンマで区切れば、複数の関数を同時に入力することも可能。グラフは拡大や縮小にも対応します。三角関数、指数関数、対数など、さまざまな関数に対応しているということなので、数学愛好家の皆様は「前から Wolfram|alpha で出来たじゃん」などと言わず、対応していない... 続きを読む
Google Chromeの検索バーから直接 Youtube や Wikipedia の検索をする設定の仕方 - 941::blog
よく使う検索結果はスマートに表示したい!ですよね。 というわけで、だいぶメジャーだけど知らない人も多そうなのでエントリー。 キーワードを設定しておくとAmazonとか楽天とかYoutubeとかWikipediaとかの検索フォームとかも 簡単に検索エンジンのように登録出来るのでオススメ。 やり方は簡単で、まず検索フォームがあるページを表示。 検索フォームを右クリックするとメニューの中に「検索エンジン... 続きを読む
立体的なCSS3でデザインされた検索フォーム実装チュートリアル:phpspot開発日誌
Creating A Rocking CSS3 Search Field 立体的なCSS3でデザインされた検索フォーム実装チュートリアルが公開されています。 次のようなデザインですが、これは検索フォームだけではなく色々なところで使うことで個性的で立体的なデザインを作れる気がします。 立体的なボタンはなんとなく押したくなりますね。 押すとちゃんとボタンがへこみます。 CSS3のテクニックを色々と使っ... 続きを読む
iPhoneの『Safari』で“tilt”と検索すると…… おや様子がおかしい - ガジェット通信
iPhoneのブラウザ『Safari』で“tilt”と検索すると面白い現象が起きることが発見された。その面白い現象とはiPhoneの検索フォームにて“tilt”と入力すると検索結果画面が傾いてしまうという面白い現象。そう“tilt”は傾くという意味がある。 現在確認出来たブラウザは『Safari』以外にも『Sleipnir(iPhone版)』などのブラウザでも同様の現象が確認された。しかし一部ブラ... 続きを読む