htmlの検索結果1 - 7 件 / 7件

• あとで読む

  Tailwind CSS初心者が絶対ハマる落とし穴

  • 130 users
  • zenn.dev/moozaru
  • テクノロジー
  • 2024/07/13

  
  ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
  

  • Tailwind
  • あとで読む
  • css
  • *web制作
  • web制作

  
• あとで読む

  CSS の `@property` ルールでカスタムプロパティを定義する

  • 40 users
  • azukiazusa.dev
  • テクノロジー
  • 2024/07/13

  
  CSS の @property ルールを使うことで、CSS のカスタムプロパティ を定義できます。カスタムプロパティを定義することでプロパティの構文チェック、初期値の設定、プロパティが値を継承するかどうかの設定が可能になります。 @property --my-color { /** red や #fff のように色のキーワードまたはカラーコードを代入可能 */ syntax: "<color>"; inherits: false; initial-value: red; } /* カスタムプロパティを使用 */ .my-element { --my-color: blue; color: var(--my-color); } @property ルールのメリット @property ルールを使うことで、以下のようなメリットがあります。 カスタムプロパティによりコードをドキュメント化する 誤
  

  • css
  • あとで読む
  • techfeed
  • programming
  • web

  
• あとで読む

  真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog

  • 39 users
  • blog.stin.ink
  • テクノロジー
  • 2024/07/14

  真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")

  • react
  • color
  • html
  • article
  • あとで読む
  • data
  • blog

  
• あとで読む

  HTMLのフォーム送信がEnterキーなのか送信ボタンなのか判別する方法 - Qiita

  • 16 users
  • qiita.com/uhyo
  • テクノロジー
  • 2024/07/17

  HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。 この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。 TL;DR 暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。 解説 Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構

  • HTML
  • form
  • 資料
  • あとで読む

  
• あとで読む

  Misconceptions about view transitions  |  Blog  |  Chrome for Developers

  • 5 users
  • developer.chrome.com
  • テクノロジー
  • 2024/07/17

  The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition

  • ブラウザ
  • Chrome
  • article
  • CSS
  • JavaScript
  • あとで読む

  
• あとで読む

  :has()を使ってCSSだけで同意チェックボタンを実装する方法｜BLACKFLAG

  • 3 users
  • black-flag.net
  • テクノロジー
  • 2024/07/17

  
  CSSの疑似クラス﹁:has()﹂がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの﹁:has()﹂を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性︵押せる状態︶と非活性︵押せない状態︶を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素﹁:has()﹂を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
  

  • CSS
  • ui

  
• あとで読む

  @property: Next-gen CSS variables now with universal browser support  |  Blog  |  web.dev

  • 3 users
  • web.dev
  • テクノロジー
  • 2024/07/12

  @property: Next-gen CSS variables now with universal browser support Stay organized with collections Save and categorize content based on your preferences. Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (a

  • CSS
  • あとで読む