最近じわじわと使われ始めているグリッドレイアウト。 frという新しいサイズ単位も加わり、autoとの違いがあやふや・・・という方もいるかと思います。 そこで今回はfrの基本的な使い方と、迷いやすいautoとの違いをわかりやすくまとめてみました。 frとは frとは「fraction(分数の意味)」の略で、gridレイアウトを使うに当たって誕生した新しいサイズの単位です。 grid-template-columnsやgrid-template-rowsを使うとき、100px 200pxなどのピクセル単位などを使ったりしますが、わざわざスペースを何ピクセルか図ったりするのはわずらわしいですよね。 そんなときに便利なのが「fr」という単位です。 frを使うと、枠に合わせたグリッドの大きさを自動的に調整してくれます。例えば、

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

ポップアップやダイアログやフルスクリーンモードを実装する時などによく使用されるCSSのz-index: 10000;が必要なくなります。 Chrome 105のデベロッパーツールで「最上位レイヤー（top layer）」がサポートされました。この最上位レイヤー要素は、z-indexが最も高い要素の上に表示され、かならずドキュメントの最上位に表示されます。 最上位に表示したいコンポーネントをHTMLの最下部や最上部に記述したり、CSSのz-index: 10000;で最上位に昇格させる必要はありません。 Meet the top layer: a solution to z-index:10000 by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 CSSの最上位レイヤー（top layer）とは デベロッパーツールで最

CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、覚えておくと便利なCSSのテクニックを紹介します。 これらのCSSの新機能はすべてのブラウザにすでにサポートされています。 6 CSS snippets every front-end developer should know in 2023 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに コンテナクエリの使用方法 scroll-snapによるエクスペリエンスの作り方 CSS Gridによるposition: absolute;の回避方法 簡単に円を実装する方法 カスケードレイヤーの使い方

こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。 メディアクエリの設定をmin-widthかmax-widthに統一する（推奨） メディアクエリの設定に小数を利用する（非推奨） でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。 こんなとき、min-widthかmax-widthに統一するのは大変…… 上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポ

ブラウザは、フォーカスされた要素を可視化するためにフォーカスリングを実装している。青や黒のフォーカスされた要素を囲う枠線のことだ。outlineプロパティで表現される。これは主に、ウェブページをキーボードで操作可能にするためにある。 例として、ウェブページ上のボタンをクリックするという場面を想定する。キーボードによる操作では、まず、Tabキーなどによってフォーカスの位置を移動させながら、フォーカスを目的の要素まで辿り着かせる必要がある。その上で、スペースキーやエンターキーによってクリックに相当するアクションを実行する、というような流れになる。このような操作を行うためには、どの要素がフォーカスされているかを、ユーザーが視覚的に認識できることが前提になる。フォーカスリングが実装されているおかげで、開発者は適切なマークアップを行うだけでフォーカスを可視化することができる。 しかしながら、マウス操

久しぶりの投稿です。 備忘を兼ねて簡単に書きます。 deep selector？ Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。

いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし

CSSで要素をページ上の指定位置に固定する方法のひとつとして、position: stickyを利用する方法があります。よく使われる用途としてはサイドバーの固定とかでしょうか。非常に簡単に利用できるため、使用を検討している方も多いかと思います。しかし、position: stickyは祖先要素にvisible以外のoverflow属性が指定してあると期待通りに動作しない場合があります。この記事では、この症状の詳細と解決方法を紹介します。 「サンプルコード通りにstickyを指定したんだけれど、全くスクロールに追従してくれない。」 「コンテナの高さや幅は正しいはず...。うまくいかない原因がわからない。」

CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ

本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精

次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈（stacking contexts）、スタックレベル（stack level）という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造（文脈）のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整

Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています ※Winodws10でIE11、Edge、Firefox 68.0.1、Opera 62.0.3331等で表示確認しました cssp {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/ line-height: 1.4; max-height: 4.2em; overflow: hidden; position: relative; text-align: justify; text-overflow: ellipsis; width:50%; margin:auto; } p::be

読み込みに時間がかかってしまうページはローディングアニメーションを取り入れることによってユーザーの離脱率を抑えることができます。アニメーションとなると作るのに手間がかかってしまいそうなイメージがありますが、実はCSSだけで簡単に実装することが可能です。 今回は、ローディングアニメーションを紹介しているWebサイトをご紹介していきます！ ローディングアニメーションの基本 ローディングアニメーションを使用しているサイトと使用していないサイトがありますが、ローディングアニメーションを表示することによってどのような効果があるのか、またどういったWebサイトにローディングアニメーションが必要なのかをご紹介したいと思います。 ユーザビリティの向上 ページの読み込み時間は離脱率に最も大きく影響する要素の一つです。読み込みに時間がかかってしまうと、多くのユーザーが離脱してしまいますが、ローディングアニメー

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexibl

[キャンペーン中] アイクリームサンプルパウチ プレゼント 今だけ、商品ご購入の方に、UZU アイクリームをお試しいただけるサンプルパウチをプレゼント実施中！ ※アイクリーム以外の商品ご購入の場合 ギフトラッピングについて 商品2点をカートに追加して、チェックアウトしてください。 ※ラッピングサービスは、1回のオーダーで1点までとなっております。 ※ハッピーバッグを含むギフトセットは同梱できません。選択いただいた場合は、自動キャンセルとさせていただきます。

mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS

僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて