scroll-behaviorでなめらかスクロールが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 06日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 06 日目 scroll-behavior でハッシュ付き URL とかでジャンプするときのスクロールをなめらかアニメーションさせることができます。 使い方 デモ：https://codepen.io/ginpei/pen/OJdrqPR JS でのジャンプにも利く scrollTo() 等でスクリプトからスクロールする際にも利きます。楽ちんですね。 ちなみに実行時オプションで CSS の設定を上書きできます。 アニメーション制御はなし ON/OFF だけです。速度とかはブラウザー次第。 あとブラウザーの気分次第で無視しても良いと仕様に書かれています。そうなんだ。 おしまい 昔はみんな頑張って JavaScript で計算してアニメーションさせてましたね。 参考 scroll-behavior – CSS: カスケーディ
React RouterのuseNavigateとは
今回の記事では、React におけるルーティングについて解説していきます。 React 本体にはルーティング機能が組み込まれていないため、どのようにページ遷移や URL の管理を行うのか疑問に思う方もいると思います。 そこで今回は、Reac... useNavigateとは useNavigateはReact Routerのフックで、Reactの関数コンポーネント内でページ遷移を制御するために使われます。 useNavigateを呼び出すと、ページ遷移を行うための関数（navigate関数）が返されます。 このnavigate関数に移動先のパスを渡すことで、アプリケーション内でのページ遷移を実行することができます。 基本的な使い方 useNavigateの基本的な使い方を説明します。 import { useNavigate } from 'react-router-dom'; funct
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
爆速で説明するreact-routerの使い方 - Qiita
目的 自分が読んだreactの最近の参考書にはreact-routerの使い方の説明が一切書かれていなかったため、公式ドキュメントを参考にして備忘録として使い方を記す。 実践 index.jsx(ts使うならtsx)に下記のように記載する。 各コンポーネント、ファイルの置き場所をsrc/routes,src/components配下としたが、これは特に定められているわけではないので場合によってはもっとネストさせたディレクトリの下などから呼ぶこともあるだろう。 index.jsx 結局index.jsxを"root"にレンダリングするため、全てのRouteをindex.jsxに記載する。 HeaderやFooterなどの固定するものはどこのページでも表示するため、内外に記載する。 <Route path="/" element={<Home />} />では、URLを例えばhttp://lo
CSSでできるクリエイティブなリンクホバーエフェクト6個まとめ
この記事では、CSSでできるクリエイティブなリンクホバーエフェクト6個をご紹介します。 数行のCSSをコピペするだけで実装でき、ウェブサイトをより魅力的に表現するテクニックとしても効果的です。 日々変化を続けるWebデザインのトレンドをうまく取り入れた見せ方にも最適な、アニメーションエフェクトとしても良さそう。 コンテンツ目次 1. スライド式ハイライト・ホバーエフェクト 2. 文字テキストが切り替わるホバーエフェクト 3. 背景が広がるリンクホバーエフェクト 4. 左右切り替わりリンクホバーエフェクト 5. グラデーション下線テキストホバーエフェクト 6. 下線が左から右に通過ホバーエフェクト 7. その他のリンクホバーエフェクトまとめ 1. スライド式ハイライト・ホバーエフェクト See the Pen Hover Effect 1 by CSS-Tricks (@css-tricks
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
CSSだけでアニメーション実装 〜カード型リンクHover編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずはこちらのカード型リンクのHoverアニメーションを作っていきます。 Hoverしたときに、 ピンク背景のブロックを上から重ねる 「READ MORE」というテキストをFadeInする 以上の2つの動きを実装しています。 ピンク背景のブロックを上から重ねる ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。 カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。 「READ MORE」というテキストをFadeInする READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。 カード型リンク～左から右へ～ 次にカード型リンクのHoverアニメーシ
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
blockquoteのcite属性を使って引用元をユーザーに明示する
Result blockquoteのcite属性に書いた引用元を表示する、というもの サービスの使用感とか製品の口コミとかビジネス案件でも使用頻度は割と高そうな印象です cssblockquote { padding: 20px 20px 20px 40px; overflow: auto; background-color: rgba(180, 180, 180, 0.5); border-radius: 2px; font-style: italic; } blockquote:before { content: '❝'; float: left; font-size: 200%; margin-left: -20px; } blockquote:after { content: "引用元:【"attr(cite)"】"; display: block; text-align: rig
外部サイトのリンクにだけ特定のアイコンを付与する
Result 外部サイトのリンクにだけ特定のアイコンを付ける、みたいなの やってる事は単純で、href属性に自サイトのドメインを含んでる場合は除外するようにしています 相対パスも対応する場合は便宜変更してください cssa:not([href^="https://codepen.io/"]):after{ content: ""; background-image: url(foobar.gif); display: inline-block; background-size: cover; }上記の場合はhttps://codepen.io/で始まるリンクを除外したコードとなります viaInline Icons & Wrapping
視野が広がるCSSの妙 〜pointer-events 編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのザワです。 知っている人は知っているが、知らない人には耳障りな、いや、耳寄りな情報。そんな生活にちょっとの潤いをもたらすことを目的に始めたこのシリーズ、CSSの妙。 2回目の今回はpointer-events編です。最近では1サイト作るときには必ずといっていいほど、登場します。対応していないブラウザはほぼないので、使いたいときに使いたい放題です。 対応ブラウザ でも、pointer-eventsってなにものなの？ お得なの？ という世の中の奥さんの不満をまずは払拭したいと思います。pointer-events、ざっくり説明すると、指定した要素にマウスカーソルをを乗せたときの挙動を制御します。 それだけでは崇拝すべきpointer-eventsのすごさが伝わりづらいので、さっそくデモを見ていきましょう。 デモ さて、pointer-eventsで気にする
WordPress で同じカテゴリの前後のリンクを取得する方法 - by Takumi Hirashima
WordPress で現在表示されている投稿に紐づく、同じカテゴリの前後の投稿リンクを取得する方法を紹介します。 例えば、同じカテゴリの投稿を続けて見せたい時に便利な方法です。 同一カテゴリに属する前後の投稿を取得する方法 パラメーターの指定方法 同一カテゴリに属する前後の投稿を取得する方法 同一カテゴリに属する前後の投稿を取得するには、関数の get_previous_post() や get_next_post() のパラメーターを指定します。 例えば、カスタムタクソノミーのスラッグが taxonomy_slug の場合に、そのタクソノミーに紐づくタームが関連づけられている記事同士の前後リンクを表示したい場合は、次のコードをテンプレートに追加します。 <?php // 現在表示されている記事の同一カテゴリに属する前後の投稿を取得 $taxonomy_slug = 'taxonomy_s
mailtoリンクのクリックでクリップボードにコピーする
Result mailtoリンクをクリックすると、メーラーを立ち上げずにクリップボードにコピーさせる、というもの jQueryを使っています jQuery$(document).ready(function() { // mailtoリンクにクラスを追加 $("a[href^=mailto]").wrap('<span class="mailto-wrapper">'); $("a[href^=mailto]").addClass("mailto-link"); //クリック時にコピーした旨のメッセージ表示 var mailto = $(".mailto-link"); var mailtoWrapper = $(".mailto-wrapper"); var messageCopy = "Click to copy email address."; var messageSuccess
ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする
Result リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです サンプル上が従来の疑似要素を使った方法でサンプル下が行をまたいでも解決できる方法です あまり通常のテキストに用いることも多くないと思うので、これで困ってる方がいるかは分かりませんが。 css/*▼ 疑似要素を使ってアンダーラインを表示する方法*/ .demo_1 a { text-decoration: none; position: relative; } .demo_1 a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid red; transition: .3s
[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス
a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.
![[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d41a2b3d32f975af021789ebc336e7dd920a95d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201804%2F2018101603.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
v-forを使ってリストの中身とリンク先を個々に出力したい
CSS でクリックイベントを無効にする方法 - by Takumi Hirashima
[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets![[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b27ab0c67c4e323739dcd1ac8059944e3863ff1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201901%2F2019031510.png)
