開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
ウェブページを表示するためのアプリケーションであるウェブブラウザは、今や多くの人が毎日のように利用する生活に欠かせないツールとなっています。そのブラウザがどのような仕組みで成り立っているのかについての解説がGitHubで公開されています。 GitHub - vasanthk/how-web-works: What happens behind the scenes when we type www.google.com in a browser? https://github.com/vasanthk/how-web-works この解説では例として「アドレスバーにgoogle.comと入力してからGoogleのホームページが表示されるまで」の流れが取り上げられています。 ・目次 ◆google.comの「g」を入力した時 ◆エンターキーを押した時 ◆URLを解読 ◆HSTSリストを確認
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウェブ制作の面で嬉しいことは、多くのCSSやJavaScriptの機能が使えるようになったことで
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
ヤフーのユーザー5,400万人から"同意"を得るための技術（HTML/CSS/JavaScript）
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。 この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。 Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。 CSSで実装できる小技テクニック目次 1. テキストグラデーション 2. 左線グラデーション付きの見出しタイトル 3. アニメーション付ボーダーライン 4. テキストリンクがすーっと通過するホバーエフェクト 5. リンク用CSSラインホバーアニメーション 6. SVGで画像の周りをデコレーション 7. 文字テキストを回転させる方法 8. 長い文章を
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
CSSの疑似クラスと疑似要素、:と::の違い
CSSで疑似クラス、または疑似要素を使用する時に、:と::のどっちだっけ？ と迷ったことはありませんか？ :beforeと::beforeのどっちだっけ？ :notと::notのどっち？ :と::のどっちが疑似クラスだっけ？ ※CSS3では::beforeですが、CSS2では:beforeでした。 たまに迷ってしまうことがある人に、CSSの疑似クラスと疑似要素、:と::の違いについて紹介します。 What's the difference between : and :: in CSS? by Salma Alam-Naylor(@whitep4nth3r) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの「疑似」とはどういう意味か 疑似クラスとは 疑似要素とは はじめに 「CSS :と::の違い」をGoogl
元Webデザイナーのセキュリティエンジニアが警告する、CSSインジェクションの脅威 | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
※この座談会は緊急事態宣言以前に実施しました。 イエラエセキュリティの顧問を務める川口洋が、イエラエセキュリティを支える多彩なメンバーと共に、サイバーセキュリティやサイバーリスクの今を語り合う座談会シリーズ、第11回をお送りします。 川口洋氏は、株式会社川口設計 代表取締役として、情報セキュリティEXPO、Interop、各都道府県警のサイバーテロ対策協議会などで講演、安全なITネットワークの実現を目指してセキュリティ演習なども提供しています。 イエラエ顧問として、「川口洋の座談会シリーズ」を2019年に開始。サイバーセキュリティを巡る様々な話題を、社内外のゲスト達と共に論じ語ってきました（川口洋の座談会シリーズ)。 今回ゲストとして登場するのは、イエラエセキュリティのペネトレーション課に所属する馬場将次。Webデザイナーとしての経験から、Webに関するセキュリティへの鋭い視点を持つ馬場。
没ネタの供養。 TL;DR h1 を複数置けるわけじゃない アウトラインを生成するアルゴリズムはブラウザで実装されてない 見出しレベルを自動調整するように動いていたが頓挫した section お前は何者だ document outline algorithm について "document outline algorithm" とは、HTML のアウトラインを生成する都市伝説のこと。 アウトラインとは、見出しを持ったセクションで構成される枠を指す。 HTML5 より前は、このアウトラインを表現する方法がなく、広義な wrapper の div が採用されていた。 見出し要素もセクションごと、というよりは文書の階層にかかるもので、兄弟としてのフラットな構造だった。 HTML5 から、 section や nav などで囲みアウトラインを生成する謎のアルゴリズム "document outlin
CSS から React コンポーネントを生成する MistCSS 2024.03.23 MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。 昨今のフロントエンド開発では、CSS の手法が多様化しています。特に React での開発では以下のような手法があげられます。 グローバル CSS（エントリーポイントで 1 つの CSS ファイルを読み込む） CSS Modules CSS in JS Tailwind CSS CSS の手法に新たな選択肢が加わりました。それが MistCSS です。MistCSS は CSS in JS になぞらえた JS from CSS というコ
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
CSSはシンプルな表記でスタイリングが特長ですが、ときには複雑なコードによってどう書いたらよいか、迷ってしまうことがあります。 今回は、CSSでの制作をスピードアップさせる、コピペできるチートシート的コードスニペットをまとめてご紹介します。 リアルタイムによるプレビュー、確認が可能で、生成されたCSSコードをコピーするだけで利用できる、知っておくと差がつく利用機会の多いCSSプロパティが揃います。 CSS記述が速くなる、コピペできるシートシート用コードスニペットまとめ 1. CSSマウスカーソル・プロパティ さまざまなマウスカーソル用プロパティを並べたコードスニペット。各ボックスにマウスホバーすることで、ブラウザーでどのように見えるか確認できます。 See the Pen CSS Cursor Property by Kalimah Apps (@khr2003) on CodePen.
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
はじめに わたしは普段フロントエンジニアとして働いており、WebアプリケーションのUIを設計・実装したりするような人間です。 UIを設計・実装していく時に、どういう考えをもとに取り組めばいいかというのをこの記事で整理してみたいと思います。 アプリケーション全体のUIを言語化すると壮大な話になり難しそうなので、今回はコンポーネントの設計・実装に絞って整理します。 コンポーネントとは、UIを構成する部品(ボタン、テキストフィールド、カードなど)のことを指しています。 さっそくですが、Webアプリケーションのコンポーネントを設計・実装していくにあたって重要なことは次の3点だと思っています。 Web標準に沿って設計・実装する どういう状態を取りうるかを明確にし、その状態を適切に表現する UIの文脈に応じて、十分なバリエーションを揃える 以降でそれぞれ詳しく書き出してみたいと思います。 1. Web
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「2022年のモダンCSS（鹿野 壮） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 では始めていきます。 めちゃくちゃ可愛い猫を飼っています。tonkotsuboy_comというTwitterIDです。マネーフォワードにおります鹿野壮と申します。 こういった本を執筆しました。 「JavaScriptコードレシピ集」/ 技術評論社 「JavaScript最新仕様 -ES2020-」/ 日経ソフトウェア2020年9月号 「最新CSS」/ 日経ソフトウェア2021年9月号 今日は2022年5月現在における全モダンブラウザ対応の最新CSSをいくつかピックアップして紹介します。 固定ヘッダーとアンカーリン
2024年1月26日紙版発売 2024年1月26日電子版発売 工藤智祥 著 B5変形判／384ページ 定価3,740円（本体3,400円＋税10%） ISBN 978-4-297-13943-8 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書はTailwind CSSの実践的な入門書です。フロントエンドエンジニア，マークアップエンジニア，そしてデザインシステムの構築に興味があるデザイナーを対象に，Tailwind CSSの中核的な思想である「ユーティリティファースト」の理解へといざないます。Tailwind CSSの基本的な使い方や，デフォルトテーマによって提供されるクラスの紹介はもちろん，テーマのカスタマイズやプラグイン
はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,
写真： Jr Korpa on Unsplash Intro：2021年はこれまでCSSにとって盛りだくさんな一年でした。 CSSワーキンググループはCSSの仕様にさまざまな変更を加え、既存機能を改良するとともに多くの新機能を追加しました。 一部のブラウザには、すでに実験的に実装されているものもあります。 ブラウザベンダーは、新機能のサポートだけでなく、開発者を悩ませるブラウザの互換性に関する5大問題（#compat2021）の解決にも注力しています。 2021年もそろそろ終わりに近づいているので、今回は2022年に実装されそうなCSS機能を紹介したいと思います。 (※訳注：翻訳元の記事は2021年12月27日公開) 目次 はじめに 注目の新機能（クロスブラウザ対応） コンテナクエリ カスケードレイヤー カラー関数 新しいビューポート単位 :has()擬似クラス overscroll-be
all: unset; などを使ってUAスタイルシートを消してまっさらな場所からスタイルを当てるのは気持ちがいいですが、アクセシビリティ等の観点から重要な分岐が見落とされる可能性があります。 ここではChromeのUAスタイルシートを参考に、検討しておいたほうがいい状態をいくつかリストします。 (もちろん、既存のUIコンポーネントライブラリの使用が可能であれば、それが最も堅牢な選択肢でしょう。) 参考 各ブラウザのスタイルシート HTMLのスタイルシート UAスタイルの中には、CSSのカスケードルールの範疇で実装されているものもあれば、レンダリングエンジンの特別処理として書かれていて作者スタイルシートでの上書きが不可能なものもあります。これはブラウザ実装により異なります。 スコープ UIコンポーネントを作るような場面を想定しています。したがって、要素名自体は固定として、その中で見落としがち
複数要素の a:hover と a:focus にスタイルをあてたいとき、次のようなコードを書いていませんか？ .section1 a:hover, .section1 a:focus, .section2 a:hover, .section2 a:focus { color: lightpink; } :is() という擬似クラス関数を使えば、短く、重複のないコードが書けます。 :is(.section1, .section2) a:is(:hover, :focus) { color: lightpink; } また、:is() と同時期に、:where() や :not() の複数要素指定といった便利な機能も使えるようになりました。 本記事では、各機能の基礎から使い方までを、実例を交えて紹介します。 :is()とは何か？ :where()とは何か？ :not()とは何か？ :is()
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
最近Sassを使ってないなぁって話
2023年10月26日 Webサイト制作 初学者向けの記事やSNSの投稿で「Sassはマジで必須！」なんて書いているのを見かけますが、私の場合、そういえば最近は素のCSSばかりでSassは使っていないなーと思ったので記事にしてみます。私自身Sassが大好きでずっとお世話になっていましたが、CSSの進化も著しく、使い所があまりなくなってきているんですよね。 ↑私が10年以上利用している会計ソフト！ 変数やネスト、計算はCSSだけでOK 過去記事「Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！」でも書いたとおり、Sassのメリットでもある変数やネスト、数値の計算はCSSだけでも可能です。 変数は過去記事「CSSで変数（カスタムプロパティ）を使ってみよう」で紹介したように、メディアクエリーによって柔軟に変化させたい時は、SassよりもCSSのカスタム変数の方が便利です。計算式を使い
はじめに 今までCSSは、「特定のバージョンしか使えない」や「特定のブラウザだと使えない」が 新しいプロパティが公開されても、使えないことが多々ありました。 そのため主要なブラウザの関係者が集まり、Web開発者の開発体験を向上させるための取り組み、「 Compat 2021」・「Compat 2022」が行われていました。 このような取り組みが2023年も引き続続いていくようです。 この記事では、Compat 2022に引き続き、Interop 2023で解消されるCSSプロパティについてまとめました。 こんなものがもうすぐ使えるようになるんだな...みたいに思っていただけると嬉しいです。 目次 Border Image CSSの色空間と関数 コンテナクエリ Containment 擬似クラス カスタムプロパティ フレックス ボックス CSS 数学関数 まとめ 1. Border Imag
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 本章では、開発環境にTailwindをインストールする方法に加えて、設定ファイルの記述方法や、エディタの設定などについて説明します。執筆時点でのTailwindの最新バージョンである、3.2.4の使用を前提にします。 Tailwind CSSのインストール Tailwindは、さまざまな開発環境にインストールして使用できます。Tailwindに関連するアプローチとして、CSS in JSやCSS Modulesなどのツールもありますが、これらを使用できるのは一部のSPA（Single Page Application）などの環境だけに限られます。しかしTailwindであれ
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素 2023.10.07 `<selectlist>` 要素は、デザインをカスタマイズできなかった従来の `<select>` 要素の問題を解決するために Open UI グループにより提案されている要素です。`<selectlist>` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。 <selectlist> 要素は 2023 年 10 月 7 日現在 Chrome Canary の Experimental Web Platform features flag を有効にした場合のみ使用できる実験的な機能です。この記事の内容は将来変更されるおそれがあります。 <selectlist> 要素とは <selectlist> 要素は Open UI グループにより提案され
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
CSSフレームワークからみる、フォーカス・インジケータの違いを考察 フォーカスってなに？ フォーカスの可視化について フォーカスのスタイル CSSフレームワークはどのような対応をしているのか？ BULMA 特徴 Bootstrap 特徴 Materialize 特徴 Pure.css 特徴 skeleton 特徴 CSSフレームワークの総評 1. Bootstrap 2. BULMA 3. Pure.css 4. Skeleton 5. Materialize まとめ フォーカスってなに？ 「フォーカス」とは、パソコン画面上でウインドウや入力ボックス、アイコンやボタン、画像といった対象物が「次の操作」を受けられる（アクティブな、選択された）状態のことです。 引用：weblio辞書「フォーカス」（別窓でリンク） 上記の動作サンプルを例にすると、テキストフォーム、セレクトフォーム、ラジオボタン
インターネットを利用していると、一度訪問したページのリンクが別の色で表示されることがあります。これはスタイルシート言語であるCSSの擬似クラス「:visited」を活用したもので、一目で自身が訪問したページやリンクを判断することができます。しかし、一部のユーザーは:visited擬似クラスを悪用してユーザーのウェブサイト閲覧履歴を入手しているとのこと。セキュリティ研究者のヴァルン・ビニワレ氏が:visited擬似クラスを使った閲覧履歴の取得方法について解説しています。 Retrieving your browsing history through a CAPTCHA https://varun.ch/history ウェブサイトを閲覧する際には、リンクされたさまざまなページにアクセスします。その際、訪れたことがあるサイトは紫で、訪れたことがないサイトは青で表示されることがあります。これに
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
ウェブサイトが表示されるまでにブラウザはどういった仕事を行っているのか？
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
現場で使えるFlexboxレイアウト12選 | BUILD Journal
2022年のCSS | gihyo.jp
CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単＆実用的】
【第5弾】少しのコードで実装可能な10のCSS小技集
document outline algorithm と h1 要素 | きるこの日記帳
CSS から React コンポーネントを生成する MistCSS
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ
Tailwind CSSを使う時の疑問と解決方法
フロントエンドウェブ開発者 - ウェブ開発を学ぶ | MDN
WebアプリケーションにおけるUIを構築するときに考える3つのこと - コンポーネント編
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
2022年のモダンCSS ～TechFeed Conference 2022講演より | gihyo.jp
Tailwind CSS実践入門
View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
2022年のCSS | POSTD
<button>とかのスタイルを消して書き直すときに考えることの備忘録
使ってますか? CSSの:is()と:not()で複数セレクタ管理をラクにしよう
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
【CSS】これから期待できるCSSまとめ 2023 - Qiita
Tailwind CSS実践入門 第2章 Tailwind CSSの基本 ──開発環境へのインストール、設定ファイルの記述、エディタの設定 | gihyo.jp
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素
CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE
ウェブサイトを訪れたユーザーの閲覧履歴を不正に取得する方法とは？
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon