はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: animating entry effects by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSの@starting-styleとは allow-discreteで離散アニメーションを有効にする アニメーションさせる要素に対して開始値を設定するデモ 終わりに はじめに Four ne

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 しかし今後、HTML ネイティブの<select>要素に柔軟にスタイルを加えることができるようになるようです。イチから作成したセレクトボックスをネイティブのselect要素と同等レベルでアクセシビリティやパフォーマンスに配慮して、各 OS に最適化されたユーザー体験にするのは至難の業ですので、ネイティブ<select>要素がカスタマイズできるということは革命的なことだと思います。 本記事では、実際に<select>要素のカスタマイズ機能が先行的に実装されている

はじめに 言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。 このように、画像の一部が切り抜かれたようなデザイン。 このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。 Augmented UI Augmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。 augmented-ui - Integrate your apps with technology https://augmented-ui.com/ このライブラリ以外でこの名称を使用している例はまったく見当たりませんでしたが、共通認識を持つためにも、この名称がもっと広まることを願います。 なんでこのような形が Augmented UI なのかについて個人的に考えて

Firefoxが2024年7月9日にリリースしたバージョン128で、CSSの「@property」に対応したことにより、主要なブラウザ全てで「@property」の記法を使用できるようになりました。「@property」を使うことで実現できるデザインの一例について、ウェブエンジニアのライアン・マリガン氏がブログに投稿しました。 CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ マリガン氏がデモとして提示したのは下図のようなボタンのアニメーションです。 最初にマリガン氏はボタンの周りをループする光について解説しています。カスタムプロパティとして「--gradient-angle」を宣言し、宣言においてこのカスタムプロパティには「angle(角度)」の値を設定可能で、初期値

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin

先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Timed Cards Opening カード型の画像カルーセルのスライドに合わせて、背景のフルスクリーンが切り替わる、ヒーロー要素を想定したスニペット。 See the Pen Timed Cards Opening by Dilum

Chrome129 で calc-size() 関数がデフォルトで使用可能になります。 可変のボックスに対するアニメーション付与がかなり楽になる予感がするのでご紹介します。 calc-size() ってなに？ 固有サイズの設定キーワードが指す実際の数値を、計算に利用できる関数です。 固有サイズの設定キーワードの例として次のようなものがあります。

タイムラインを見ていると「flexとgridの使い分けがよく分からないよ」という人が多く散見されるので、今回は僕が普段意識していることを皆さんに紹介します。 これから紹介することはあくまで僕のやり方で、絶対的な正解とかではないので参考程度に留めておいてください。実装において頻出するレイアウトをサンプルに、どのように考えてレイアウトを組んでいけばよいかを自分なりに説明できたらなと思います。 はじめに僕がレイアウトを組む上で大事にしていること、および意識していること。それは、レイアウトに変化が起こった際に崩れが生じないことはもちろん、将来的な変更に対して柔軟に対応できることです。 極論を言ってしまえばgridは使わなくても大抵のレイアウトは組めてしまいます。Internet Explorerに苦しめられていたあの頃を思い出してみてください。現在でもgridは難解だからflexだけ使用するって方

執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、

フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧

はじめに こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 先日、SVGの色をCSSで変更しようとした際に、なかなか色が変わらなくて困ってしまいました。 この記事では、SVGの色がCSSで変更できない場合の原因と、2つの解決策をわかりやすく解説します。 SVGの色を変更できない原因 fill属性に直接色が指定されていると、その色が固定されてしまい、CSSのcolorプロパティによる変更が適用されなくなります。 <div class="parent"> <svg> <rect width="100" height="100" fill="#000" /> </svg> </div> <style> .parent { color: red; // 効きません } </style> See the Pen svg_fill_bad by Tasuk

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。

👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋‍♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま

本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパティです。 従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しませんでした。 そこで、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになります。 .open-content { disp

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ

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