この暑さの影響で、東京ディズニーリゾートではイベントの一部が中止となりました。運営するオリエンタルランドによりますと、来場者などの負担を考慮して、ディズニーランドやディズニーシーできょう実施する予定…
記事一覧や商品一覧など、要素の個数によって CSS を変えたいときに使えるテクニックです。目新しいテクニックではないですが、:has() セレクタで書き直したものになります。 要素の個数が N 個以上 N 番目の要素 :nth-child(N) を直下 > に持つ :has() <ul> 要素があれば、N 個以上と判定できます。
2023年7月10日CSS,JavaScript,アニメーション,デザインパターンアニメーションの実装はややこしいからCSS Transitionでできなければ実装したくない、そう思っていませんか?FLIPというテクニックを使うことで、CSS Transitionだけでは実装できないケースでも簡単にアニメーションを実装することができます。 FLIPとは #FLIP とは First, Last, Invert, Play の頭文字から取られた用語であり、アニメーションをこの4つのステップに分割して行うテクニックです。例えば、以下のようなリストの項目に追加、削除、並べかえができるUIに対して、簡単にアニメーションを付けることができます。 上のデモで追加、削除、並べかえを行った時に、項目の座標移動がアニメーションすることがわかると思います。これは CSS Transition だけでは実装する
我が家では、auじぶん銀行の住宅ローンの金利を「au金利優遇割」を利用して0.1%引き下げるために色々と調べています。 ↓ 今日は、昨日書いたこちらの記事の続きになります。 gannett.hatenablog.com au金利優遇割を受けるためにau ID が必要なのですが、povoではau ID がもらえるか未定とのこと。 そこでインターネットサービスの「auひかり」利用者にもau ID が割りあてられるとauのホームページで見て、優遇割に使えないかと考えました。 日中、じぶん銀行とau に問い合わせてみたのですが、 じぶん銀行は、auの方で「auひかり」のau ID と、「au携帯」のau ID が同等とみなされるようならじぶん銀行の方では問題ありません、との回答でした。 auは、au携帯のIDは電話番号、auひかりのIDは英数字で表記されるので違いはあり、同等とみなせるかはわからな
This page provides a comprehensive view of the GSAP ecosystem, outlining which features are part of GSAP's core, which files are hosted on the public CDN, and which are exclusively accessible to Club GSAP members. The Core contains everything you need to create blazingly fast, responsive animations for all browsers. Additional capabilities, like Dragging, Scroll Animation or Morphing are tucked aw
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani. The other day I stumbled across this demo by Fabio Ottaviani and I was wondering how this animation could work on scroll. The idea of the demo is to animate a mask shape that has a SVG turbulence filter applied to it. Magically, this results in an apparent animation of the the whole distortion around th
Discover the ultimate SVG animation platform. Animate illustrations, logos, icons, and more.No coding skills required. Animate in minutesIntuitive interface Packed with all the tools you need, SVGator is the ultimate SVG animation generator: a thoughtfully designed, intuitive interface, right at your fingertips. Quick workflow Take your SVG to a whole new level without writing a single line of cod
Earlier I wrote about using flexbox to build responsive layouts. There is a behavior that can be surprising when using flexbox for layout like this. The content of a flex item in the layout can force it to not shrink appropriately. Let’s say for example you have a long URL displayed somewhere in your layout that you want to truncate. Applying overflow: hidden will not result in the item shrinking
Fit-to-Width TextWhat if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs. The Example Let me start with the demonstration: if you’d look at the following example in the browserGo to a sidenote th
4月には、定期契約の解除を妨げるため、条件上は解約できるにもかかわらず、解約できないように見える表示をしていたことも分かっている。 これらを受けて消費者庁は同社に6カ月の営業停止命令を出すとともに、再発防止とコンプライアンス体制の構築を指示。代表取締役の中村智紀氏には6カ月間、同様の業務を新たに開始しないことを命じた。 関連記事 LINEで販売、高額な“痩せるお茶”にご用心 「追加料金なし」は実質うそ 消費者庁が注意喚起 消費者庁は、「追加料金なし」と聞いてダイエット商品を購入したが、実際には高額な別料金を請求されたとする相談が多く寄せられているとして注意喚起した。問題の事業者は実際には17~23万円の追加料金を求めていた。 「LIFEBOOK 21%引き」は嘘……「富士通 WEB MART」で二重価格 消費者庁が措置命令 PC直販サイト「富士通 WEB MART」で、ノートPC「LIFE
asChild prop とは コンポーネントを使うときに表示される要素を変えたい! 汎用的なコンポーネントを使用する際、以下のような場合にデザインや挙動は変えずに中でレンダリングされる HTML 要素だけ動的に変えたくなることがあります。 ボタンコンポーネントでリンク(<a> 要素、 Next.js や Gatsby などの Link コンポーネント)を表示したい タイトルを持ったセクションコンポーネントで <main> 要素を表示してセマンティックを変えたい フォームコンポーネントで <search> 要素を表示してセマンティックを変えたい 汎用的なヘッドレスコンポーネント(ロジックや挙動のみのコンポーネント)を実装したい 余談: そもそも見た目は変えずに HTML 要素だけ変えるのってアリ? コンポーネントの見た目を変えずに表示される HTML 要素を変えると、ユーザの違和感や混乱を
当ページに含まれる広告と商品評価について 当ページには広告リンクが含まれており、当ページを経由して商品・サービスの申込みがあった場合、提携している各掲載企業から広告報酬を受け取ることがあります。ただし、当サイト内のランキングや商品の評価に関して、提携の有無や報酬の有無に一切関わらず、コンテンツポリシーに基づき、当サイト独自の調査と実際に使用したレビューをもとに掲載しております。当サイトで得た収益は、皆様により役立つコンテンツを提供するために、品質向上等に還元しております。 光回線26社比較!おすすめ13社と失敗しない選び方【2024年4月最新】 光回線とは自宅まで有線接続する固定回線の一種で、他のインターネット回線と比較して安定して速い通信速度がメリット。光回線はホームルーターやポケット型WiFiと比較して通信制限がなく、戸建てやマンションの自宅で安定したインターネット接続が可能なおすすめ
NURO光マンションミニを申し込んだときに得たどこにも書いていない情報 今回、NURO光マンションミニを申し込んで、無事に宅内工事までは穴あけ工事などもなく完了した。その際にあまりネットで情報を得られなかったMDFやIDFの実際の様子や線を通す配管の様子、そして工事についての新たな情報などを入手したので、情報共有もかねて記事に記録しておくこととした。 NURO光マンションミニの申し込み 4月からの世間のテレワークがインターネットプロバイダーの回線に負荷をかけてしまっているようで、我がマンション(築20年)に当初から導入されているJ:COMが非常に調子悪くなった。遅いだけならともかく、繋がらなくなることもしばしば発生した。 そこで、J:COMのマンション向けでは上限がいつまで経ってもギガにならないのも以前から気になっていたので、これを機にNURO光に申し込んでみた。 申し込んだサービスは、N
どうも!LSSです!! CSSには、様々な「フィルター」が用意されています。 以前にも、 little-strange.hatenablog.com で使ってみましたが、このフィルター、CSSアニメーションとも併用が可能で、組み合わせると「徐々に変化」してくれます。 今回は、CSSフィルターとCSSアニメーションを組み合わせて遊んでみました^^ 白トビ→通常の写真に変化 セピア色の思い出がよみがえる transitionについて にじんだ景色も目を凝らすと… コントラストの鼓動 あとがき 白トビ→通常の写真に変化 謎のお魚オブジェ 最初に、とんでもなく白トビした状態で表示しますが、マウスカーソルを乗せる(スマホの場合一度タップする)と、通常の写真に変化します。 コード <style> .anmfb1{transition:1s;filter:brightness(1000%);} .anm
One important factor in website design is the font choice and the style of typography that you select. This can easily be a make-or-break situation. Fonts catch the eye very quickly and can engage the user or push them away, so it’s important to make the right choice. However, fonts and typography don’t have to be static. You can introduce cool CSS text effects on your website to help you stand ou
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く? imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する(たまに記述しないことがある)」が33.2%、「面倒なので普段は記述しない(たまに記述する)」が21%、「記述しない!」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く