CSS Grid Generator
CSS Flexbox のグリッドレイアウトがつくれる Sass Mixin ライブラリ「Flexbox Grid Mixins」をつくりました – シングスブログ
シングスブログ 中小企業のマーケティングやブランディングのコンサルティング。事業開発 (ビジネスモデルの開発)、デジタルマーケティングやウェブサイト改善など事業の持続的・長期的な成長・発展に貢献できるサービスを提供しています。 スタイルシートの Flexbox を使ってグリッドレイアウトが生成できる Sass Mixin「Flexbox Grid Mixins」をリリースしました。 グリッドを自由自在につくりたい どういうものかというと、以下のサンプルのような HTML と Sass があると、サクッとグリッドの CSS をつくってくれます。 HTML <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> Sass @import 'node_modul
Flexbox Grid Mixins
Dart Sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } LibSass @import 'node
FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ
FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF
CSS Gridを使ったレスポンシブ対応の基本レイアウト
2024年8月23日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
Handsontable - WebでExcel並のテーブル機能を実現
Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。 Handsontableの使い方 Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。 HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Handsontable - jQuery gri
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
Grid
Why bother with responsive? We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation. A Fragmented World As of 2013, there are thousands of different devices and screen sizes that browse the internet, so it’s impossible to design layouts to target them all. Instead, we must take a more fluid approach to design. Mobile First The term
グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」:phpspot開発日誌
Freewall - jQuery plugin for creating grid layouts. ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」。 GridやPinterest風レイアウトの他、自由にブロックを組合せて隙間のないレイアウトが作れます。レスポンシブ対応。 １要素をクリックすると拡大するなど、ちょっと新しいレイアウトが実装できます。 ちょっと変わった感じのサイトを作るのに１ネタとしていいかもしれません。 関連エントリ CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueJS/Vuetify - draggable responsive grid of cards - doesn't work
Decanter Homepage
ごめんなさいね。 - Lopan.jp
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
styled-component + CSS Grid - Speaker Deck
