2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS subgrid ブラウ Has

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

朗報！ CSS Flexboxの8年越しのバグがようやく修正されます

2023/08/07 17 users パク CSS flexbox 朗報 border ボーダー

CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CS... 続きを読む

Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

2023/03/16 195 users ひとまとめ デコード CSS diff Grid

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS SVG フォントサイズ Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/02 310 users Flex デベロッパーツール display プロパティ 下記

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む

CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック

2022/03/08 75 users CSS グラデーション レスポンシブ対応 テクニック 破線

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS... 続きを読む

Flexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装

2022/01/26 19 users コンテナクエリ CSS メディアクエリ レイアウト 実装

メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexbox... 続きを読む

CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS

2022/01/20 269 users 挙動 CSS レイアウト テクニック UIコンポーネント

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問... 続きを読む

この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック

2021/11/30 211 users ブッダ Calc CSS 成り行き ラッパー

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer T... 続きを読む

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

2021/11/18 385 users CSS メディアクエリ テクニック ブレークポイント Grid

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, ... 続きを読む

Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本

2021/10/29 10 users CSS HTML テクニック カピパラ 解説書

これは本当に、かなりお勧めの解説書です。 カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。 HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやす... 続きを読む

Chrome 95のデベロッパーツールの新機能が便利！vh, vw, rem, emなど、CSSの単位を簡単にオーサリング

2021/10/25 15 users rem デバッグツール デベロッパーツール オーサリング 単位

先週リリースされたChrome 95のデベロッパーツールに搭載された新機能が便利なので、紹介します。 最近の新機能だと、Flexboxのデバッグツール（紹介記事）やCSS Gridのデバッグツール（紹介記事）などがありますが、Chrome 95ではCSSの単位（vh, vw, rem, emなど）を簡単にオーサリングできるようになりました。 New CS... 続きを読む

このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置

2021/10/05 39 users CSS 配置 テキスト ラジオボタン ベースライン

フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="f... 続きを読む

図で理解するFlexbox

2021/08/15 267 users justify align レイアウト 毎回 要素

Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央... 続きを読む

Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました | コリス

2021/07/15 25 users コリス border-radius clip-path 生成

CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形...記事の続きを読む 続きを読む

現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します | Pulp Note - WebデザインやWebサイト制作の現場で使えるTipsやアイデアを紹介

2021/06/24 12 users Pulp Note Tips レイアウト 現場 webデザイン

現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一... 続きを読む

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス

2021/06/16 22 users コリス Flex Row display チートシート

Flexboxのチートシートの一部 displayプロパティ Flexboxを使用するには親要素にdisplay: flex;（または、display: inline-flex;）を適用すると、その子要素がFlexアイテムになります。 flex-directionプロパティ FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列（row）の水平、縦... 続きを読む

Chrome 91でデベロッパーツールがさらに便利に！スクロールスナップの実装と検証が簡単になりました | コリス

2021/05/28 12 users デベロッパーツール コリス デバッグツール 実装 検証

25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ（scroll-snap-typeプロパティ）の配置が可視化できるようになり、実装と検証に役立ちます。 参考: What's New In DevTools (C... 続きを読む

2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法 | コリス

2021/05/25 34 users コリス Safa デベロッパー クロスブラウザ対応 CSS

2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、Safa... 続きを読む

デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載 | コリス

2021/04/25 31 users デベロッパーツール コリス 実装 オーバーレイ 検証

先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！ 1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb...記事の続きを読む 続きを読む

Flexboxで実装する定番レイアウトのコードのまとめ | コリス

2021/04/01 99 users コリス ブッダ コピペ CSS flexbox レイアウト

Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使... 続きを読む

CSSのmargin-block-start, margin-inline-endなど、論理プロパティの使い方を徹底解説 | コリス

2021/03/25 31 users margin-left margin-right コリス

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理... 続きを読む

2021年版、CSS Gridでどのように配置されるかをまとめたチートシート | コリス

2021/03/18 17 users コリス プロパティ チートシート CSS Grid 作者

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021?️ by Joy Shaheb 同じ作者のFlexboxのチートシートも先日、翻訳しました... 続きを読む

Reactの 余白上手に スタイリング

2021/02/18 27 users React padding 余白 stack Safari

最近余白の実装について見直す機会があったので、考えをまとめてみました。 TL;DR Grid なら grid-gap flexbox なら flex-gap にしたい(が、safari が対応してないので記事執筆時点では使えない) 適切な padding を指定する 複数の同一のマージンには Stack、それ以外には Spacer コンポーネント 前提: 子コンポーネント... 続きを読む

2021年版、Flexboxでどのように配置されるかをまとめたチートシート | コリス

2021/01/19 22 users コリス プロパティ チートシート 元ザ コンテナ内

Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サ... 続きを読む