[B! css] teru-7のブックマーク

CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has()ではなく、:has(+ )にする必要がある

CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*) by @Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの:has()を検出するには :has(*)を使用した場合の問題点デモとコード終わりにはじめに CSSの:has()を@supports

teru-7 2023/02/12

css

リンク

Relearn CSS layout

Already purchased Every Layout, but lost your access? No worries. Add the em ail address that you used to purchase Every Layout and we’ll re-send your access link. Every Layout has helped thousands of developers and companies simplify CSS layout in their projects Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-indepen

teru-7 2022/08/30

EVERY LAYOUT

リンク

音楽、数学、タイポグラフィ

先日開催された﹁フロントエンドカンファレンス福岡2019﹂で、﹁音楽、数学、タイポグラフィ﹂というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。みなさんこんにちは。今日の僕の話のテーマは﹁タイポグラフィ﹂です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleやTwitterやなんかで﹁タイポグラフィ﹂というキーワードで検索すると、手描きによ

$音楽、数学、タイポグラフィ$

teru-7 2022/08/30

サイズスケールのロジック

リンク

便利な無料ツールが登場！ 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でソースが公開されているので、ローカル環境でも利用できます。さっそくオンライン版で試し

teru-7 2022/08/20

リンク

CSS Formatter

Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting. There are many option to tailor the beautifier to your personal formatting tastes. When do you use Often when writing CSS Style Sheets your indentation, spacing, and other formatting can become a bit diso

teru-7 2022/08/20

非難読化ツール

css

リンク

scroll-snap-type - CSS: カスケーディングスタイルシート | MDN

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル背景と境界書字方向の操作内容のはみ出し CSS の値と単位 CSS における大きさの指定画像、メディア、フォームの要素表のスタイル付け CSS のデバッグ CSS の整理評価課題: CSS の基本的な理解度評価課題: 素敵なレターヘッドの便箋の作成評価課題: かっこいいボック

teru-7 2022/08/15

css

リンク

imgタグのwidthとheightを省略したらダメ！画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法どちらの方法を使用すべきかレイアウトシフトとはデフォルトでは、<im

teru-7 2022/07/21

css

リンク

backgruond-imageを使ったCSSのアニメーションテクニック - ICS MEDIA

CSSのbackground-imageプロパティは背景画像に関するCSSですが、単に背景に画像を表示させるだけでなく、実はアニメーションと組み合わせて多彩な表現ができます。本記事ではbackground-imageの特性を活かしたアニメーション表現について解説します。サンプルコードもありますので、実際の案件に取り入れてみたりbackground-imageの仕組みについて学んでみたりしてください。※サンプルコードはSass︵SCSS︶を使用しています。サンプルを別ウインドウで開くコードを確認する background-imageとアニメーションタイトルと矛盾するようですが、background-imageプロパティ自体はanimationプロパティやtransitionプロパティを用いてアニメーションできません。もしbackground-imageプロパティをアニメーション可能に

teru-7 2022/06/26

リンク

CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります

これを待ち望んでいた人も多いと思います。ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文メディアクエリはレ

teru-7 2022/06/20

css

リンク

これは覚えておきたい！左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。IEのサポート終了︵6/15︶も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。参考: Don’t wait for June 15th! Set your own IE retirement date. たとえば、左揃えのリスト要素を中央配置にしたいとします。 HTMLは、下記の通りです。 <ol> <li>Foreword</l

teru-7 2022/05/11

css

リンク

CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

teru-7 2022/05/11

css
SEO

リンク

CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい

先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な

teru-7 2022/03/27

css

リンク

CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにwriting-modeによるinlineとblockの違いinlineとはどういう意味ですか？ startとendを正しく理解する論理として使用できるプロパティは何ですか？論理プ

teru-7 2022/03/19

css

リンク

CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数﹁min()﹂﹁max()﹂﹁clamp()﹂の使い方を紹介します。最大幅や最小幅を計算式で定義できる﹁min()﹂﹁max()﹂、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる﹁clamp()﹂、これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの比較関数の

teru-7 2022/02/21

css

リンク

flex-grow, flex-shrink, flex-basis について - メモを揉め

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた内容をまとめておきます。説明中に出てくるスクショの動作サンプルは下の記事にあります。memowomome.hatena blog.com この記事は上の動作サンプル記事が長くなっため分離した補足記事みたいな感じです。 flexbox の基本 flexbox の基本的な動作は以下のページが個人的には分かりやすかったのでオススメです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 flexbox の仕様全般に関する説明が分かりやすい Flexboxを使うなら知ってお

teru-7 2021/12/14

flex

css

リンク

最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA

ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？　従来知られているfloatプロパティを使った方法の他に、CSS3から﹁Flexbox﹂を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ︵※1︶、Bootstrap4の新たなレイアウト方法として採用される︵※2︶等、次世代の標準となっていくであろう技術です。 ※1

teru-7 2021/12/09

css

リンク

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

スクロールの連鎖︵スクロールチェーン︶とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにスクロールチェーンとは古い解決方法今の解決方法: overscroll-behavior overscroll-behaviorの使用方法終わりにはじめに posi

teru-7 2021/11/19

css

リンク

文字詰めできるCSSのfont-feature-settingsが凄い！日本語フォントこそ指定したい自動カーニング - ICS MEDIA

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事﹁Webフォントサービスの徹底比較！和文フォントが使える5つのサービスの利点まとめ﹂を参考ください。 ▲左側は未指定︵和文等幅︶の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。対応環境‥ほぼすべてのブラウザで利用可能これだけ便利なCSSですが、どれだけの

teru-7 2021/09/29

リンク

CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。レスポンシブデザインの現状ユーザーでレスポンシブコンテナでレス

teru-7 2021/05/28

css

リンク

ウェブデザインにおけるline-heightについて

ウェブデザインにおけるline-heightってけっこう曲者で、CSSを理解してデザインしないと﹁空き﹂の設計が破綻したりコーディングで苦労することになります。FigmaやAdobe XD、Affinity Designerなどのグラフィックアプリでline heightの扱いが異なるので、使うツールの挙動を理解するのも大切です。ということで、今回はCSSのline-heightについてまとめてみます。実は調べれば調べるほど奥が深いCSSのline-heightの世界ですが、まずは基礎からまとめていこうと思います。目次以下はページ内のセクションへのリンクです。 CSSのline-heightでは文字の上下にスペースができるウェブで使われるハーフ・レディングとは印刷とウェブにおけるレディングの違いデザインツールでのline heightの扱いの違い上下のハーフ・レディングを帳

teru-7 2021/04/24

css

リンク

はてなブックマーク

タグ

関連タグで絞り込む (50)

cssに関するteru-7のブックマーク (431)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス