2024年、現在の環境に適したリセットCSSのまとめ
CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ
【2023年版】おすすめのリセットCSS（reset.css）3選【CDNのコピペあり】
WEBサイトがブラウザによって見え方が変わってしまうのを無くすリセットCSS（reset.css）。 リセットCSS（reset.css）と一言で言っても、ブラウザ同士の見え方だけを調整したもの、全てのタグをリセットさせるもの、単位が違うものなどなど、種類が多くあります。 そこで今回は、私の独断と偏見でまとめたおすすめのリセットCSS（reset.css）を紹介します。 destyle.css 個人的に一番よく使うのがこのdestyle.cssというリセットCSS（reset.css）。 このdestyle.cssは、h1タグだろうとpタグだろうと全部共通の大きさに設定されるリセットCSS（reset.css）。 全てが同じ大きさになるので、いちいちスタイリングする手間は増えますが、CSSで各タグの大きさ調整が柔軟に対応できるのでお気に入りのreset.cssです。 各タグの表示を紹介する
[CSS] CSSのuser agent stylesheetとは｜webデザイナーimane🍪サスティナ できることから少しずつ
google chromeの検証で見た時などに現れる、CSSのuser agent stylesheetとは何か説明する。 また、user agent stylesheetを無効化し、デフォルトのCSSを消すための「リセットCSS」についても説明する。 ”user agent stylesheet”とは「user agent stylesheet」とは、ブラウザ毎に定義されているデフォルトのCSS設定のことだ。 デフォルトなので、CSSを自分で書かなくても最初は適用されている状態にある。 だからgoogle chromeの検証をみた時に”user agent stylesheet”で表示されているならば、それはデフォルトでCSSが適用されている。 ”user agent stylesheet”によって何が起こる？user agent stylesheetによって画像やボタン周りに隙間ができ
![[CSS] CSSのuser agent stylesheetとは｜webデザイナーimane🍪サスティナ できることから少しずつ](https://cdn-ak-scissors.b.st-hatena.com/image/square/5af62a20f96bae9a4699109a6cee2fe0aca9b8e9/height=288;version=1;width=512/https%3A%2F%2Fd2l930y2yx77uc.cloudfront.net%2Fproduction%2Fsocial_images%2F843c58684168f348477e1b048e48c0817d38d4eb.png)
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
Zero-Runtime CSSのLinariaを触ってみた
こんにちは、spacemarketのフロントエンドエンジニアの8zkです。 みなさん、Linariaを知っていますか？ LinariaはZero-Runtime CSSの一種です。 今回は個人的に気になったCSSライブラリ、Linariaを触ってみたのでその感想などを書いていきたいと思います。 GitHubはこちら。 現時点でstar数は1万を超えていますね。 Linariaの特徴 こちらがLinariaの特徴です。 * Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build * Familiar CSS syntax with Sass like nesting * Use dynamic prop based styles with the React bindings, us
vanilla-extractを使ってみた感想
個人的にvanilla-extractを試していたのでその感想などを紹介できたらと思います。 要点 CSS modulesっぽくかけて型があるのがとても良い 採用したらメリットが大きそうなケース オブジェクト形式でも違和感なくかける人 CSSに型が欲しい人 CSSでNestを制限したいなど秩序をもたらしたい人 CSS modulesっぽくかけるのがとても良い 個人的に従来のピュアなCSSやCSS modulesのように別ファイルでCSSを管理するのが好みなのでこの書き方ができるのはメリットでした。 特にCSS modulesのようにファイルを管理できるのが良いです。 import { style } from '@vanilla-extract/css'; export const headerStyle = { wrapper: style({ padding: '16px', disp
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning 2024.04.13 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 CSS Anchor Positioning は 2024 年 4 月現在 Chrome Canary でのみ利用可能です。 CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floati
そろそろ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よ、さよ
CSS から React コンポーネントを生成する MistCSS
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 というコ
【CSS】三角アイコンと矢印アイコンをつくる | 125naroom / デザインするところ（会社）です。
.arrow_s { position: relative; display: inline-block; padding-left: 12px; color: #333; text-decoration: none; } .arrow_s:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #333; position: absolute; top: 50%; left: 0; margin-top: -6px; }
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向 - Qiita
概要 Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する 最新v3.0のアップデート内容を紹介する はじめに 本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。 筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。 以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。 また最後に最新のv3.0のアップデート内容を紹介します。 Tailwind CSSとは Tailwind CSSの概要 Tailwin
【第5弾】少しのコードで実装可能な10のCSS小技集
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
ネガティブマージンの使いどころ
はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。 ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。 ネガティブマージンの使いどころ ネガティブマージンの使いどころとして
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
CSSだけで画像にモザイク処理を施すデザインのサンプル | 1 NOTES
CSSだけで画像にモザイク処理を施すデザイン方法の紹介です。 CSSでモザイクというと、単純なぼかし処理というイメージですが、今回はブロック型のモザイクというのか方眼型のモザイクというのか、はたまたピクセルモザイクなのか、タイル調モザイクかマス目モザイクなのか、全くわかりませんでしたので検索してみました。 そのタイプのぼかし処理は英語では「pixelization」、日本語では「ピクセル化」。 または、そのまま「モザイク」という言葉がそれを指すようです。 それをCSSだけでの実装を紹介してくれているサイトさんが見つからなかったので、CSSだけでは できそうでできないのか、以前気になっていたのですが、これは以外に簡単にできました。 ※画像ファイルはそのままですので、セキュリティ面やプライバシー保護を目的の利用には全く使えませんのでご注意下さい 画像にモザイク処理を施す（ピクセル化）CSSだけ
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookでreset.cssやglobal.cssを適応する方法
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
