朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
CSS Section Separator Generator
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
【CSS】スマホでhover・activeが効かない?わずか2分の対処法！
CSSの設定でhoverやactiveの設定をしたはずなのに、スマホだと効かない！！なんて時ありますよね。その時の ために、hoverやactiveをいじらずにたった2分で対処できる方法をお教えします！スマホの需要によりレスポンシブ デザインも主流になってきていますが、タッチデバイスでも少しでも凝ったデザインや動きが出るようにしたい！ そんな思いを実現できる方法です！ 私もそうですが、よく忘れてしまいますのでメモするかブックマークでもしてください。 結論:ontouchstart属性を使う！ もう早速結論言っちゃいます！ 『ontouchstart属性を使うだけ』！これだけです！ 深く考える必要はありません。 むしろ、これを指定しないとタッチでは:activeと:hoverは反応しないんです。 <body> <div id="wrapper"> <div class=&
【CSS】ファーストビューの要素をスライドインで表示する
こんにちは、Ryohei（@ityryohei）です！ ファーストビューの要素をスライドインアニメーションで表示する方法のご紹介です。 ページが表示されたときに何かしらの動きがあると、訪れた方はその部分に注目しますので、ファーストビューで強調したい要素がある場合に有効な方法となります。 本記事の内容 スライドインアニメーションの作り方ファーストビューの要素をスライドインで表示する では解説していきます。 スライドインアニメーションの作り方 スライドインアニメーションとは、要素が表示される際にスライド表示されるアニメーションを指します。 実装する方法はたくさんありますが、本記事ではCSSのみでアニメーションをご紹介できればと思います。 CSSで実装する場合はkeyframesとanimationを使用します。詳しくは下記の記事にてご紹介していますので、ご覧いただければと思います。 @keyf
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に
CSSだけで新着記事を流れるテキストのヘッドライン表示にする
流れるテキストヘッドライン概要この表示をヘッドラインと言っていいのかわかりませんが、欄外表示という意味も持つ「ヘッドライン」表示と勝手に言っております。 無料ワードプレステーマのライオンブログにもあるヘッドライン表示。 やっぱり、動きのある表示は目立ちますよね。 今回は新着記事3件を表示させて、右から左へ流れる動きを付けて表示させます。 PC表示は左から流れてキュっと止まる感じ。 またスマホ表示（横幅768px以下）で流れる表示を変え、ゆっくり流れるようにしてます。 HTML<div class="head_line"> <div class="hl_title">New Article</div> <ul> <li> <span class="day">2019/01/01</span> <a href="#">タイトル</a> </li> </ul> </div>ワードプレスの場合（g
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
スマホで背景画像を固定させる方法(background-attachment:fixed;の代替案)
背景画像を固定して中のコンテンツだけをスクロールさせるページを作成していたところ、スマートフォンでは「background-attachment:fixed;」が効かないことに気付きました。 スマートフォンでも背景画像を固定させたかったので、「background-attachment:fixed;」と同様の挙動をさせるための代替手順を試したらうまくいったので、ご紹介したいと思います。 スマートフォンで背景画像を固定させる方法(CSSによる対処) PCの「background-attachment:fixed;」と同様に、スマートフォンでも背景画像を固定させるためには、CSSで以下のように指定します。 body::before { content: ""; background: url(img/bg-sp.png) no-repeat center center; background-
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これはブックマークしておくと便利！ HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes
https://codepen.io/tutsplus/pen/WROvdG
https://codepen.io/z-/pen/MJKNJZ
INPUTタグ type numberの時に表示される矢印ボタン(スピンボタン)を消す方法 | Hirooooo’s Labo
【CSS】要素選択不可｜えらる
レーティング用に星形のマークを表示する方法 - CSS｜OAR CODE
700+ CSS Icons, Customizable, Retina Ready & API
Max Height Animation
iOSでbodyにoverflow: hiddenが効かないとき - Qiita
ネットショップ語り
