CSS Grid・Flexboxの 最近の進化とミライDIST.38 「CSSな夜」で発表した内容です。 https://dist.connpass.com/event/266728/ Twitter https://twitter.com/tonkotsuboy_com
[CSS] gapって使っていいの？
ファンタラクティブのエンジニアの 太田 です。 InternetExplorerのサポートが終了した現在、cssでflexboxを使わない理由はなくなったと思います。 flexboxでgapを使うべきか考えました。 (gridではいくらでも使えばいいと思ってます。) gapとは 要素間の余白を定義するプロパティです。 gapのメリット 要素間が同じ余白のサイズであれば、親要素にgapを指定するだけで、要素間の複数のmarginを書かなくてよくなる。 カラム落ちの余白を気にしなくていい gapを使うべきパターン カラム落ちを考慮する必要があるレイアウト 横並びで1行の要素数が画面サイズによって決まるようなレイアウトではgapを使うことを検討できます。 marginを使用した場合はきれいに並べようとすると非常に複雑な計算が必要となり、状況によっては実現不可能な場合もあります。 gapを使えばと
![[CSS] gapって使っていいの？](https://cdn-ak-scissors.b.st-hatena.com/image/square/d0639c9e8b608d3b41086d8b66a0d7db3cb31a64/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--lUAO_ycr--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255D%252520gap%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%252584%2525E3%252581%2525AE%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編）
あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。 新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。 コピペ一発！便利なCSSレイアウトジェネレーターおすすめ12選（Grid ＆ Flexbox編） ここでは、CSS Grid と Flexbox で表現できるレイアウト用ジェネレーターと便利なリソースを一緒にまとめてご紹介します。 Layoutit! grid-templ
Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
6歳娘「パパ、flexにしたら幅が余っちゃったよ・・・」 - Qiita
flex-growとflex-shrinkのお話です。 ある日の我が家 娘（6歳）「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「パパはいつも、お仕事でどれくらいコードを書いてるの？」 ワイ「どれくらいって、沢山やで」 ワイ「それはもう山のように書いてるで」 娘「へー、山のようにかぁ」 娘「動かざること山の如しって感じ？」 ワイ「そうそう、ワイのコードはたいがい動かへん・・・コラッ！」 ワイ「誰がバグ製造機やねん」 娘「ところで、そんなパパに聞きたいことがあるの」 ワイ「なんや？」 お買い物サイト製作中 娘「実は今ね」 娘「お友だちから受注したショッピングサイトを制作してるの」 ワイ「受注て」 ワイ「最近の6歳児は受発注すんのかい」 ワイ「まあええわ、そんでどうしたんや」 娘「えっとね」 娘「今、デザインデータを見ながらコーディングをしてるんだけど」 娘「↑このデザインが、CSSで上手く
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
現場で使えるFlexboxレイアウト12選 | BUILD Journal
現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
2019年12月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2019年12月の、これだけは押さえておきたいWeb関連の動き Monday, January 6th, 2020 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン なぜ優秀なデザイナーでも酷いデザインを生み出してしまうのか？ 事前に十分なインプットが得られていない、全体のUXよりも見た目のデザインを優先してしまう など、酷いデザインが生まれる原因について書かれています。 ウェブ制作に活かすユニバーサルデザインの視点 – PRESS.mjmj ふさわしい配色とアクセシビリティなどについて。 フォント・ロゴ・GUI・ハードウェアをトレースして学ぶ｜Seiji Miyazawa｜note ワーナーブラザーズのロゴ、ガイド左
Container Queriesという手法 / CSS Advent Calendar 2019 - kojika17
この記事は CSS Advent Calendar 2019 - Qiita 23日目の記事です。 Container Queriesを知っていますか？ Media Queriesに依存せず、コンテンツにあわせてレイアウトを変化させるを手法です。 Container Queriesとは レスポンシブwebデザインを行う時、みなさんはMedia Queriesを使用していると思います。 ブレークポイントにあわせて、画面ごとにコーディングを進めていくのが一般的な方法でしょう。 その方法は本当に正しいのでしょうか？ Atomic Designやデザインシステムといった考え方が浸透してきて、UIなどをコンポーネントとして扱う場合も増えてきました。 しかし、コンポーネントとMedia Queriesは切り離せない関係です。ページの画面サイズに依存し、レイアウトを構築するする場合は、コンポーネントに何
CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方
Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F
Flexboxでレイアウトする時、その背後にある思考プロセス
Flexboxはフレキシブルで、レイアウトをする時に非常に便利です。しかし、便利な機能と混乱を招く可能性がある機能があり、その背後にある思考プロセスについての一例を紹介します。 The Thought Process Behind a Flexbox Layout 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxについて学びたい方は、以下の記事をご覧ください。 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル CSS Flexboxの各プロパティの使い方を詳しく解説 Flexboxレイアウトの背後にある思考プロセス 2つのボックスを並べて配置、Flexboxはそういったものが得意だと聞いています。 親要素に「display: flex;」を加えるだけで、子は並べて配置される クールですね
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います！ レスポンシブ対応の柔軟なレイアウトはもちろ
プロはこうやって使ってる！制作現場でよく使われるFlexboxの実例5選
Flexbox、使っていますか？ 機能がありすぎて使うのに躊躇してしまっていたり、正直あまり使いこなせていなかったりしていませんか？ 私ははじめ、どのプロパティを使えば良いのか悩んで悩んで、結局使わずにfloatやdisplay: table;などを使ったりして使用を避けていましたが、使い始めたらとても便利でした。 Flexboxのプロパティには数多くの種類があってとっつくにくい印象を受けますが、実は実際の制作現場で使用するものはそこまで多くありません。 今回は、現場でよく使用するプロパティを、使用例とあわせてご紹介します。 これだけ覚えておけば、サイトを構築する上でほとんど不自由はないと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Cheat Site
FLEX: A simple visual cheatsheet for flexbox
CSS Nite LP58「Coder’s High 2018」