静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
スクロールバーのデザインをCSSでカスタマイズする方法を紹介します。 ページ全体のスクロールバー（ブラウザに表示されるやつ）はデフォルトのままでよいですが、ページ内のスクロールコンテンツなどではUIのデザインと一貫したスクロールバーを実装する必要があるかもしれません。 スクロールバーをカスタマイズする時のCSSの古い構文と新しい構文での違い、スクロールバーのさまざまなデザインの実装方法、アクセシビリティにおける注意点など、徹底解説されています。 Custom Scrollbars In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールバーの構成要素 スクロールバーのデザインをカスタマイズする カスタムスクロールバーのスコープを指定する スクロールバーのデザインをカスタ
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
