タグ

cssに関するcandykebinのブックマーク (244)

  • HTML/CSSで装飾可能に! select・optionタグの新しいカスタマイズ方法 - ICS MEDIA

    2025年3月にリリースされたChrome 134、Microsoft Edge 134では、<select>要素をカスタマイズできるようになりました。今までは<select>要素で表現できる見た目は限られており、やむをえず別のタグを組み合わせて独自の実装をしていた方も多いのではないでしょうか? 独自の実装をした場合、アクセシビリティーやキーボード操作に対しても独自の対応が必要だったり、対応が不十分になる場合もあります。<select>要素をカスタマイズできるようになれば、こうした課題を解決しつつ自由なデザインやレイアウトを実現できるようになります。 この記事では、カスタマイズできるようになった<select>要素でどんなことができるのかを紹介します!(※記事の作例はChrome 134、Microsoft Edge 134以上で閲覧ください)。 カスタマイズに必須のCSS まずはカスタ

    HTML/CSSで装飾可能に! select・optionタグの新しいカスタマイズ方法 - ICS MEDIA
  • こんなやり方があったとは! 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css

    フォーム要素のグループ化で使用されるfieldsetの境界線付きボックスとlegendの見出しを任意の要素に実装できるCSSを紹介します。 divやarticleを境界線付きボックスにし、h1を見出しにして下記のように実装できます。見出しで欠ける境界線は自動的にクリッピングされ、ボーダーも自由にスタイルできます。 fieldset-legend.css -GitHub fieldset-legend.cssとは fieldset-legend.cssの使い方 fieldset-legend.cssのデモ fieldset-legend.cssとは fieldset-legend.cssは、フォームのfieldsetとlegendのような境界線付きのボックスを任意の要素に実装できるCSSです。 下記は、fieldsetとlegendの実装例です。 VanillaHTMLより タイトルの長さに

    こんなやり方があったとは! 境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css
  • HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA

    前回、以下の記事でリンクテキストをホバーした際のアニメーション実装例をご紹介しました。 『HTMLCSSでつくる! リンクテキストのホバー時アニメーション11選』 さて、今回は少しだけ複雑になりますが、HTMLCSSのみでより凝った表現をする方法を紹介します。 リンクテキストといえば、ヘッダーなどのメニューとして小さめのフォントサイズでデザインされていることも多いでしょう。 そんな小さいサイズのテキストでもホバー時に目を引くような、1文字ずつ区切ったテキストアニメーションのアイデアを紹介します。よりサイトの雰囲気に合う演出をしたい、またアイデアの引き出しを増やしたいデザイナーやエンジニアの参考になれば嬉しいです。 ▼ 今回紹介する実装例一覧はこちらです。 記事前半では、実装方法について基となるアニメーションの仕組みと実装時に気をつけたいことを解説し、後半はバリエーションの実装例を掲載

    HTMLとCSSでつくる! 1文字ずつ変化するテキストのアニメーション - ICS MEDIA
  • HTMLとCSSでつくる! リンクテキストのホバー時アニメーション11選 - ICS MEDIA

    テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー/エンジニアにとって参考になれば嬉しいです。 HTMLCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー/

    HTMLとCSSでつくる! リンクテキストのホバー時アニメーション11選 - ICS MEDIA
  • これは簡単で便利! レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

    フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ(Fluid Typography)は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ

    これは簡単で便利! レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
  • HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA

    見出しなどのテキストを目立たせたいときに便利なフキダシ(吹き出し)。 この記事では、HTMLCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before = 選択した要素の最初の子要素として疑似要素を生成 ::after = 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加

    HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
  • 2024年、現在の環境に適したリセットCSSのまとめ

    CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ(最新版に自動アップデートするブラウザ)と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です! リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ

    2024年、現在の環境に適したリセットCSSのまとめ
  • 文章の折り返し指定のCSS最新版 - ICS MEDIA

    文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか? この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

    文章の折り返し指定のCSS最新版 - ICS MEDIA
  • そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

    2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ

    そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
    candykebin
    candykebin 2024/04/02
    “CSSの:has()疑似クラスの便利な使い方を徹底解説”
  • CSSのサブグリッド(subgrid)の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる!

    CSSのサブグリッド(subgrid)がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド(subgrid)の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド(subgrid)の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ

    CSSのサブグリッド(subgrid)の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる!
  • レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単! min(), max(), clamp() の便利な使い方を詳しく解説

    CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比

    レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単! min(), max(), clamp() の便利な使い方を詳しく解説
  • サンプル付コピペOK!すごいCSSアニメーションライブラリ30選【2022年版】

    ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない!というCSSアニメーションライブラリをまとめてご紹介。 任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。 フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。 コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧 万能CSSアニメーション Animista 基となる

    サンプル付コピペOK!すごいCSSアニメーションライブラリ30選【2022年版】
  • GitHub - qrac/yakuhanjp: Yakumono-Hankaku Fonts

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - qrac/yakuhanjp: Yakumono-Hankaku Fonts
  • 最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ

    Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。 my favorite clever CSS tricks by @Steve8708 下記は各ポイントを意訳したものです。 ※著者様の許諾のもと、翻訳・掲載しています。 Apple: ヘッダに使用されている美しい磨りガラスのエフェクト Appleのヘッダに使用されている、美しい磨りガラスのエフェクトはCSSで実装されています。 How does Apple make that awesome frosted glass effect

    最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
  • 便利な無料ツールが登場! Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer

    1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し

    便利な無料ツールが登場! Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
  • 【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード(mix-blend-mode)を使おう!

    【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード(mix-blend-mode)を使おう! 『乗算』などを再現できるcssのブレンドモード(mix-blend-mode)。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード(今回は乗算)を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード(テキストが埋もれる) by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算になっているので想定したデザインのようになりません。 ということでひと工夫が必要です。 例えばabsoluteを使って固定の幅・高さで設定したらあっという間にできます。 が、可変に対応できずいまいち汎用性がありませ

    【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード(mix-blend-mode)を使おう!
  • 最近のWebサイトで見かける! フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ

    最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。 一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。 10 Useful CSS Tricks for Front-end Developers by Alex Ivanovs 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タイプライターのようなエフェクト 2. 透過画像用シャドウ 3. カーソルのカスタマイズ 4. attr()でシンプルなツールチップ 5. ピュアCSSによるチェックリスト 6. is()と:where()による要素のスタイル 7. キーフレームを使用したアコーディオン 8. ホバーエフェクトのサイドバー 9

    最近のWebサイトで見かける! フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ
  • Master CSS - A Virtual CSS language with enhanced syntax.

    A Virtual CSS language with enhanced syntax.Efficiently build your UI and design system with HTML only. <button class="btn ">

    Master CSS - A Virtual CSS language with enhanced syntax.
    candykebin
    candykebin 2022/03/31
     どういうこと
  • Modern fluid typography editor

    clamp(1.5rem, 2vw + 1rem, 2.25rem); clamp(1.5rem, 2vw + 1rem, 2.25rem); Copy link https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=24&fluidSize=2&relativeSize=1&maxSize=36

    Modern fluid typography editor
  • CSS Tricks to Create that Dark Futuristic Web3 Look

    Trisha Lim Posted on Nov 14, 2021 • Updated on Mar 22, 2022 • Originally published at trishalim.com This dark mode web3 aesthetic looks very cool and futuristic. They all have some common designs that achieve this look. Taking inspiration from The Graph, ARCx Money, Rabbithole, Sushi Swap, Buildspace (among others), here are some simple styles you can add to your app: Gradient backgrounds Glowing

    CSS Tricks to Create that Dark Futuristic Web3 Look