タグ

CSS Gridに関するddt2000のブックマーク (10)

  • CSS Gridでどのように配置されるかをまとめたチートシート

    CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021🎖️ by Joy Shaheb 同じ作者のFlexboxのチートシートも翻訳しました。 Flexboxでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの構造 CSS Gridの各プロパティ(親要素) CSS Gridの各プロパティ(子要素) CSS Gridのショートハンド 終わりに CSS Gridの構造 CSS Gridの知識をリフレッシュしましょう! 2021年に備えて、C

    CSS Gridでどのように配置されるかをまとめたチートシート
  • CSS Gridでレイアウトする時はこのプロパティが重要!「grid-template-*」と「grid-auto-*」の使い方を解説

    CSS Gridはブラウザのシェアも87.85%に達し、そろそろ、そして既に採用している人も多いと思います。そんなCSS Gridのレイアウトで混乱させる2つのプロパティについて、その明確な違いと使い方を紹介します。 Understanding the difference between grid-template and grid-auto 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridのレイアウトで混乱させる2つのプロパティ 明示的および暗黙的なグリッドシステムとは 「grid-template-*」と「grid-auto-*」の違い 明示的および暗黙的なグリッドの仕組み 要約 CSS Gridのレイアウトで混乱させる2つのプロパティ CSS Gridのレイアウトで私を混乱させるプロパティは「grid-t

    CSS Gridでレイアウトする時はこのプロパティが重要!「grid-template-*」と「grid-auto-*」の使い方を解説
  • CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説

    CSS GridとFlexboxは、CSSで現在主流となるレイアウトのテクノロジーです。 CSS GridとFlexboxは表面的には似ているように感じるかもしれません。しかし、実際には異なるタスクに使用され、それぞれ異なるレイアウトの問題を解決します。 Flexboxが適してる場合、CSS Gridが適している場合、また両方を使用する場合、さまざまなレイアウトの問題を正しく解決する方法を紹介します。 Grid vs. Flexbox: Which should you choose? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ全体のレイアウト 隙間が必要なレイアウト 1次元と2次元のレイアウト ラッパー CSS Gridは将来、Flexboxを時代遅れにするでしょうか? ページ全体のレイアウト CSS Gridはコ

    CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
  • CSS GridとFlexboxで役立つチートシート、各プロパティの役割がぱっと見てすぐ分かる簡単便利

    CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ? という時用にブックマークしておくと便利です。 まずは、CSS Flexbox用のチートシートから。 CSSのプロパティは親要素のコンテナ・子要素のアイテムごとに分けられており、各プロパティの値でレイアウトがどのように変わるか、ぱっと見てすぐ分かります。 各プロパティの詳しい解説は、下記をご覧ください。 CSS Flexbox の各プロパティの使い方を詳しく解説

    CSS GridとFlexboxで役立つチートシート、各プロパティの役割がぱっと見てすぐ分かる簡単便利
  • これは便利!CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

    CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両者の違いをデモで確認しましょう。 CSS Gridって当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。r

    これは便利!CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る
  • IEでも大丈夫!CSS Gridを使用する時の注意点と実装方法

    CSS Gridはブラウザに2次元のレイアウトを作成できるCSSの素晴らしい機能です。今までの実装方法に比べて、HTMLはより簡単で、CSSはより堅牢に実装することができます。 そんなCSS Gridの唯一の問題点は、ブラウザのサポートでしょう。 2018年4月現在、IE11のサポートが完全とは言えない状況ですが、IEへの対応のポイントをしっかり押さえておけば、CSS Gridでレイアウトを実装することができます。flexboxやfloatをフォールバックとして使用する必要もありません。 CSS Gridを使用する際、IE11にどのように対応させるのか、その注意点と実装方法を紹介します。 CSS Grid Application Layout in Production 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最初は、C

    IEでも大丈夫!CSS Gridを使用する時の注意点と実装方法
  • CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い

    CSS Gridって当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください(CSS Gridがサポートされているブラ

    CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
  • CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利!効果的に使用するポイントのまとめ

    CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。 CSS Gridを使用して、3カラムや画像ギャラリーやカード型など、レスポンシブ対応のレイアウトを実装するテクニックを紹介します。 Common Responsive Layouts with CSS Grid by @samsunginternet 下記は元記事のデモをピックアップしたものです。 ※作者様にライセンスを得て掲載しています。 CSS Gridで実装するヒーローイメージを備えた、3カラムのレイアウト CSS Gridで実装する画像ギャラリーのレイアウト CSS Columnで実装するカード型レイアウト CSS Gridで実装するヘッダ・フッタ付きの3カラムの

    CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利!効果的に使用するポイントのまとめ
  • 最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ

    CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ

    最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
  • [CSS]Webページのこれからのレイアウトテクニック!FlexboxとCSS Gridは一緒に使用してこそ価値がある

    Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか? CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri

    [CSS]Webページのこれからのレイアウトテクニック!FlexboxとCSS Gridは一緒に使用してこそ価値がある
  • 1