CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック
CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース（ギャップ）をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。 アイテム間にボーダーを設置したり、交差するボーダー、交差しないボーダー、さらにはノートの罫線のように太いボーダーと細いボーダーの混在も実装できるCSSのcolumn-ruleプロパティを拡張するテクニックを紹介します。 A new way to style gaps in CSS 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに カラム間のスペースを設定するときの問題点 解決方法: CSSの新しいプロパティが便利すぎる カラム間のスペース（ギャップ）をスタイルするこれからの方法 終わりに はじめに ボーダー
CSSのreading-flowプロパティが便利！ CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます
CSS GridやFlexboxは便利でよく使用していると思います、ただし、見た目の順序とDOMツリー内の順序が一致しないことがあります。これはキーボードやアクセシビリティツールで操作するユーザーにとって非常に問題です。 この問題は、CSSのreading-flowとreading-orderプロパティを使用すると解決します。CSS GridやFlexbox、さらにはブロックコンテナの各アイテムの順序をCSSで設定する方法を紹介します。 Use CSS reading-flow for logical sequential focus navigation 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに -新しいプロパティを設計した経緯 reading-flowプロパティとは r
これは覚えておきたい！ モダンCSSで実装する、記事は中央に画像は幅いっぱいにフルブリードレイアウトを実装するテクニック
フルブリードレイアウトとは最近のWebサイトのUIでもよく見かける、記事は中央配置に、画像や動画などは幅いっぱいに表示されるレイアウトのことです。これまではCSS Gridなどで実装されていたと思いますが、今回紹介するのはモダンCSSで実装できるテクニック。 CSSはわずか4行ですが、モダンCSSのテクニックがたくさん詰まっており、フルブリードレイアウトはさまざまなカスタマイズにも対応しています。 Full-Bleed Layout with Modern CSS by Temani Afif 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フルブリードレイアウトを実装するCSS html要素をコンテナにする理由 margin-inlineで何をしていますか？ CSSの別の書き方 全幅のコンテンツを同じ幅に制限する 終
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
grid-templateを使えばCSS Gridが簡単に扱える | Web Design Trends
CSS Gridの使い方はよく分からないけど、Flexboxの方が簡単そうだからFlexboxを使っているという方も多いのではないでしょうか。 確かに、CSS GridはFlexboxと比べると少し扱いづらく、最初に触れる時に抵抗を感じてしまう人もいるかもしれません。 そこで今回は、grid-templateプロパティを使用したCSS Gridの簡単な使い方をご紹介したいと思います。 一番分かりやすいCSS Grid Layoutの使い方ガイド CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じる... Web Design Trends CSS Gridとは CSS Gridとは、CSSによるレイアウト手法の1つで、CSS Flexboxと並
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
CSS Grid Layout を極める！（場面別編） - Qiita
0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 これだけは知っておきたい最新モダンCSS（2024年春版） 最近CSSに追加された新機能のリストを提供するブックマーク可能なガイド。このリストに明確な基準はないが、すべてかなり新しいものであり、多くの人がこれらのことを知らないと思うものをピックアップ。 参考記事: What You Need t
2024年の実装に役立つCSSの新機能と使い方のまとめ
2023年の後半に、CSSの多くの新機能がすべてのブラウザにサポートされました。新機能が登場するときもワクワクしますが、やはりすべてのブラウザにサポートされてからが本番です。 2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。 5 CSS snippets every front-end developer should know in 2024 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
position:stickyでデカい表が便利（最近便利なCSSおれおれAdvent Calendar 2023 – 17日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 17 日目 大きな表ってスクロールするとヘッダーが見えなくて「この値は何だっけ」ってなりますよね。position:sticky が出たときは便利じゃんと思ったのに表には使えませんでした。今は行けます。行こう。 例 デモ：https://codepen.io/ginpei/pen/Exrqxom ヘッダーだけじゃなくて、一番左側の列を固定するのも良いかも。 付与先 <th> に付けるのが普通かなと思うんだけど、<thead> とかに付けてもいいです。 注意 overflow: hidden ではなく overflow: clip を position: sticky を書いても位置が粘着しない場合、だいたい上位に overflow: hidden があるのが原因です。 レイアウトの都合上はみ出すとよろしくないので付けてる
Flexboxのjustify-contentで左右寄せが簡単便利（最近便利なCSSおれおれAdvent Calendar 2023 – 08日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 08 日目 2 つの要素を左右に並べる場面は結構ありますよね。最上部のナビゲーションバーとか。ほら左端がロゴで右端にメニューみたいな。Flexbox だと簡単です。 例 デモ：https://codepen.io/ginpei/pen/eYxxwKP <nav class="TopNavBar"> <div> <a href="/">Ginpen.com</a> </div> <div> <a href="/about">About</a> <a href="/contact">Contact</a> </div> </nav>
grid-templateでページレイアウトが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 04日目） | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 04 日目 CSS グリッド、便利ですよね。grid-template だと人類にもわかりやすい書き方でレイアウトを組むことができます。 使い方 デモ：https://codepen.io/ginpei/pen/QWYJvdp .frame { display: grid; grid-template: "header header header" 32px "toolbar main aside" auto "toolbar footer footer" 16px / 32px auto 200px; } <div class="frame"> <div style="grid-area:header"></div> <div style="grid-area:main"></div> <div style="grid
デザイナー必見！AIで作業が「10倍」速くなる！Figmaプラグインまとめ
WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。 アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。 さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。 「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。 そんな悩みを解決するのが、AIを活用したFigmaプラグインです。 今回紹介するAIプラグインを使えば、以下のようないままで時間のかかっていた作業を自動化、一瞬で作成できます。 デザインのアイデア出し レイアウトの自動生成 デザインをコードに変換 アニメーションの自動生成 デザインの品質チェック AIプラグインは、デザイン作業の「自動化」と「効率化」を実現できます。 これにより、デザイナーは、インスピレーションやアイデアを考える時間や、新しい知識や技
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
先日の記事（Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ）で触れましたがCCSS Gridのsubgrid値が、grid-template-columnsとgrid-template-rowsの2つで設定できるようになりました。Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できます。 CSSのサブグリッド（subgrid）を使用すると、下記のように子要素（画像・見出し・テキスト）の水平グリッドも簡単に揃えることができます。 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える CSSのサブグリッド（subgrid）のサポートブラウザ デモページの解説 CSSのサブグリッド（subgrid）で子要素のグリッドを揃える 3つのカードがあり、それぞれに画像・見出し・テキストがあります。subgrid以前は、
横並びになったボタンを同じ幅で配置するCSS
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】Grid・Flexの子要素にContainer Queriesを使ったら、子要素の幅がなくなる!? - Qiita
2024年6月にXに投稿したCSSテクニックのまとめ – TAKLOG
GitHub - WebdevShefali/CheatSheets: A collection of high-quality cheat sheets for web development technologies, including CSS, Git, HTML, and VSCode.
insetで画面いっぱいに広げたり中央寄せしたりが便利（最近便利なCSSおれおれAdvent Calendar 2023 – 05日目） | Ginpen.com