タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends
CSS Grid Layoutを使った便利なテクニックやツールなど | Web Design Trends
CSS Grid Layoutを使えば、他の方法と比べてシンプルにコードを記述することができたり、柔軟なレイアウトを作ることができます。 知っておくと役立つテクニックや、ジェネレーター、CSSフレームワークなど、便利なものもたくさんあります。 今回は、CSS Grid Layoutを使った便利なテクニックやツール・サービスをご紹介したいと思います。 左右に並んだグリッドの要素を中身を上下中央揃えする デザインするときに、横並びの要素を上下中央揃えしたいケースはよくあります。これについては色々な実装方法がありますが、CSS Gridを使うととても簡単に実装することができます。 上記の画像のように、画像の隣にテキストを表示するようなレイアウトを作りたい場合、HTMLは下記のようになります。 CSSのコードは下記のとおりです。 .container { display: grid; grid-t
2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ | Web Design Trends
TOP > Web制作 > 2020年版：CSS Grid Layoutの対応ブラウザやベンダープレフィックスについて解説！ CSS Grid Layoutは、CSSで柔軟にレイアウトを作ることができる便利なレイアウト手法です。 しかし、Flexboxと比べてブラウザ対応が遅れているなど、推奨環境について気になる方も多いのではないでしょうか。 今回は、2020年最新のCSS Grid Layoutのブラウザ対応状況と、必要なベンダープレフィックスについてご紹介したいと思います。 一番分かりやすいCSS Grid Layoutの使い方ガイド CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じる... Web Design Trends
【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;を記載することで下の画像のように 親要素をグリットコンテナ
Tailwind.css で Grid Layout
const Flex = () => ( <div className="h-screen flex flex-wrap flex-row"> <div className="bg-red-100 w-1/5"></div> <div className="bg-red-200 w-1/5"></div> <div className="bg-red-300 w-1/5"></div> <div className="bg-red-400 w-1/5"></div> <div className="bg-red-500 w-1/5"></div> </div> );
vue-grid-layoutとは vue-grid-layoutは、ドラッグやリサイズが可能なグリッドレイアウトコンポーネントです。 グリッドを再構築せずにウィジェットを追加または削除できたり、レイアウトをシリアル化して復元できます。 インストール 以下のnpm、yarn、CDNを使ってインストールします。 npm npm install vue-grid-layout --save yarn yarn add vue-grid-layout CDN <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-grid-layout.umd.min.js"></script> gitリポジトリは以下から取得できます。 https://github.com/jbaysolutions/vue-grid-layou
実はもうすでにこのブログやテーマストアで公開しているテーマでも基本レイアウトには Grid Layout を使っているのですが、もっと活用できないかといろいろやってみましたら、はてなブログのコンテンツ内でもかなり便利に使えることに気づきました。 エントリーヘッダーの配置 CSS グリッドレイアウトとは？ エントリーヘッダーの配置 通常、各記事のエントリーヘッダーは下の画像のように 日付、記事タイトル、カテゴリーと並びます。 たとえばこれを下の画像のように日付とカテゴリーを横に並べる場合、これまでは display: flex を使っていたのですが、これも display: grid を使ったほうが簡単にできます。 この CSS で上の画像のようになります。 .entry-header { display: grid; grid-template-columns: auto 1fr; gri
React-Grid-LayoutでサクッとDrag & Dropできるコンポーネントを作る - Qiita
React-Grid-Layoutを使用して、Drag & Dropで移動でき、サイズの変更も可能なコンポーネントの実装を試してみます。 完成形は以下のようになります。 React-Grid-Layoutって？ React-Grid-Layout(以下RGL)はReact用のグリッドレイアウトです（まんま）。 上の画像のように、D&Dでコンポーネントの移動ができるようになります。 また、RGLのインストールにはreact-resizableというパッケージも含まれており、コンポーネントのサイズの変更も可能になります。 多分GitHubのREADME見れば実装するのも簡単だと思いますが、 React初めて一週間くらいなので、練習がてらまとめておきたいと思います。 GitHub インストール まずはパッケージをインストールします。
図で理解する Grid Layout
前回の Flexbox に続き Grid Layout に関してもよくわかっていなかったので、 続いて仕組み・使い方を図を使って整理してみた。 Grid Gridは縦・横に要素を配置できるレイアウト方法です。 Gridを使うことにより、Flexboxよりも複雑な配置のレイアウトが作成できます。 例えば、Flexboxでは行または列どちらかを指定して１次元のレイアウトを作成できました。 Gridの場合は、行と列を同時に指定し２次元のレイアウトを作成できます。 Gridコンテナ・Gridアイテム・Gridセル Gridを使う上で必要となる要素が「Gridコンテナ」と「Gridアイテム」です。 Gridコンテナの中にGridアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item"
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
「vue-grid-layout」で実装するグリッドレイアウトはドラッグやリサイズが可能 | カバの樹
はてなブログに CSS Grid Layout を使ってみる – IMUZA.com
loveofcats.hatenablog.com
note.com/stwtcpld
digital.asahi.com
www.bildon-yuma.com
www.tomo-diary.com
digital.asahi.com