【CSS】あなたはCSSの知識をどこからキャッチアップしていますか？ - Qiita
はじめに みなさんは、CSSを勉強する時はどのようにしていますか？ よくX(Twitter)などでは、Qiitaではなく、公式ドキュメントを参照しようといった趣旨のツイートがみられます。 確かに、W3C や MDN といったところのドキュメントを読みCSSについての知識について理解を深めるのも1つの方法ですよね.. ただ、Qiitaのような個人が書いている記事にも魅力があります。 W3Cが想定してないような面白い使い方があったり、さまざまな表現方法があったりと、 新しい知見につながるものが多くあります。 そのため、今回は、私が普段CSSの知識や知見をキャッチアップしているサイトをまとめてみました。 ぜひストックして、参考にしていただけると嬉しいです。 また、今回は、知識や知見をキャッチアップするのに適していると感じているサイトをリストアップしているので、 もし、おすすめのサイトがあったら、
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4（現時点でドラフト）仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能（カッコ内の要素を持つ親要素を選択する）を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました（同じエ
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
【CSS】ビューポート単位が新しく追加されました。 - Qiita
概要 W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。 この変更では、ビューポート単位にLarge viewport、Small viewport、Dynamic viewportといったビューポートサイズの単位が追加されました。 今までは、vhやvwなどで画面サイズに合わせての高さ、幅の指定していましたが、 これからは、lvhやsvwといった単位で画面サイズに合わせての高さ、幅の指定できるようになります。 そのため、この記事では、追加された、ビューポート単位について解説していきます。 追加された背景 以前のiOS(Safari)では、 画面の高さいっぱいにようを表示したいという時に100vhで指定すると、 アドレスバーが表示された時、下がその分隠れて表示されてしまい、高さいっぱいにならない という現象
便利な無料ツールが登場！ 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でソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
CSSのリファクタリングにあたって、意外と大事な考え方 - Qiita
この記事の概要 ある箇所のCSSを変更したら、意図しない箇所にまで影響が及んでしまった経験はありませんか？ CSSを書いたことがある人ならほぼ全員が遭遇する事象だと思います。 そんなCSSリファクタリングをするにあたって、あまり話題に出ないけど個人的に大事だと思っている観点を記事にしてみました。 この記事を読みさえすればリファクタリングが上手くいく、というものではありません。 しかし、考慮に入れておくとリファクタリングが頓挫・中止になる可能性が減る気がします。 スタンス 今より良い見た目を作ろうと思わない おそらく1番大事な点です。 CSSのリファクタリングが話題に上がる時点で、大なり小なり見た目も古めかしくなっているのでしょう。 ここはグッとこらえて「見た目は変えず、コードの作りを良くするだけ」に絞ってください。 「普通に考えて、リファクタリングの中にアップデートを入れるわけないじゃない
パララックスならscrollイベントを間引かずとも@scroll-timelineで良いじゃない - Qiita
@scroll-timeline custom-ident-name { source: auto; /* auto | selector("id-selector") | none */ orientation: auto; /* auto | block | inline | horizontal | vertical */ scroll-offsets: none; /* none | <length-percentage> | <element-offset> */ } custom-ident-nameは@keyframesで名前をつけるのと同じ感覚です。 sourceは、スクロールする要素を指定します。 何も指定しなければhtml全体を対象とします。 特定の要素を指定したい場合、classではなくidを指定してください。 orientationはスクロールの向きを指定します。
【CSS】上下左右中央揃えの方法って2OØ種類あんねん - Qiita
※ これはネタ記事です。 実話を基にしたフィクションです。 CSSが得意なア●ミカ ア●ミカ 「キツいことを言ってるように見えるんやろうけど、物事を悪く言うの苦手やねん」 大● 「あー... なんか悪口言ってるイメージはないな」 ア●ミカ 「モノのいいところを探さんと生きていかれへん人生やったから」 ア●ミカ 「Webサイトの良いところをHTML1個でも、Javascript1個でも探すのが好きなんよ」 ノ● 「ほな、CSSもほめれます？」 ア●ミカ 「... 上下左右中央揃えの方法って200種類あんねん」 ノ● 「上下左右中央揃えの方法って200種類はないやろ」 ア●ミカ 😄... 😀... 😫... 😱!!! ア●ミカ 「そうやった... 上下左右中央揃えの方法って20種類やねん」 ア●ミカ 「推奨できない方法もあるから気ぃつけてな!」 上下左右中央揃えの方法 1. CSS G
"没IE時代" のCSSプロパティが凄い - Qiita
今まで「IE非対応」が壁となり業務での使用を躊躇していたCSSプロパティがいくつもありました。 しかし、ネットや各メディアでも話題になった通り、2022年6月16日、ついにIEのサポートが終了しました（一部OSを除く）。 そこで、IE終了により解き放たれた画期的なCSSプロパティを、個人的メモも兼ねて記載していきたいと思います。 全く新しいレイアウトの形「grid-template」 「grid-template」を初めて知った時は驚きました。 このプロパティを使用すると、以下コードのように視覚的にレイアウトをコントロールすることが可能となります。 See the Pen Untitled by monji (@monji88) on CodePen. これ、かなりやばくないでしょうか？見てわかるようにレイアウトはもちろん、各要素の高さ、幅、marginすらもgrid-templateプロ
レスポンシブロゴをsvgファイル1つで実現する - Qiita
この記事の概要 レスポンシブロゴをご存じでしょうか。 デスクトップからスマートフォンまで、どんなサイズのディスプレイにロゴが表示されるかは予想がつきません。 同じ見た目のロゴを拡大縮小しても、あまり見目良くならない場合もあるでしょう。 そのためレスポンシブロゴと呼ばれる手法でロゴのバリエーションを定義する企業・サービスもあります。 ただ、これを実現するために毎回srcsetに複数のパスを指定するのも面倒です。1 クライアントにたくさんの種類のロゴを渡して「〇px以下のときはこちらを使ってください」などとお願いするのも申し訳がありません。 というわけで、1つのsvgファイルだけでレスポンシブロゴを実現する方法を記事にしました。 作り方 各パターンのロゴの用意 まずは、すべてのサイズごとのロゴを作ります。 今回は分かりやすいようにLarge Medium Smallの3種類のテキストを並べてい
【CSS】カスケードレイヤーを使ったCSS設計 - Qiita
概要 CSSの新機能「カスケードレイヤー」がいよいよ主要ブラウザにサポートされました。 カスケードレイヤーを使うことで、CSSの詳細度とスタイルの順番をわかりやすく階層化することができます。 それに伴い、CSS設計が少し変わってきそうです。 本番環境に適当されるのは、まだまだ先だとは思いますが、 今回は「カスケードレイヤー」を使ったCSS設計について考えてみました。 というわけで、この記事では、僕が考えた「カスケードレイヤー」を使ったCSS設計について解説していこうと思います。 ※ この記事では、カスケードレイヤーの使い方について解説しません。 下記のリンクでカスケードレイヤーの使い方について解説しています。 理想的なCSS設計とは 理想的なCSS設計とはなんでしょうか？ 理想的なCSS設計は以下のような項目が挙げられます。 1. 予測しやすい 予測しやすいCSSとは、CSSの名前から、ど
【CSS】CSS Grid Layoutの新機能「サブグリッド」の使い方 - CSS Grid - Qiita
概要 今まで、Firefoxでしか実装されていなかった、 CSS Grid Layoutの新機能「サブグリッド」が、Interop 2022の取り組みによって、 主要ブラウザすべてで、サポートされようとしています。 それに伴い、CSS Grid Layoutの新機能「サブグリッド」の使い方についてまとめました。 サブグリッド subgrid サブグリッド subgrid とは、CSS Grid Layoutの新機能になります。 そのため、サブグリッドの説明する前に、CSS Grid Layoutについて復習しましょう。 CSS Grid Layoutとは？ CSS Grid Layoutは、列と行を定義することで、 水平線と垂直線が交差したレイアウト(グリッド)をCSSで表現したものになります。 親要素にdisplay: grid;を記載することで下の画像のように 親要素をグリットコンテナ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
