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

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

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

これは朗報！ レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

2023/12/05 160 users srcset img sizes CSS 遅延

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> こ... 続きを読む

プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS

2023/05/16 108 users フレームワーク ポートフォリオ CSS 実装 HTML

ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートし... 続きを読む

コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

2023/02/15 245 users Container コンテナクエリ ウインドウサイズ 新時代

本日（2/14）、ついに Firefox でコンテナクエリに対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ... 続きを読む

レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説

2022/10/13 118 users CLAMP ＭＡＸ min UIコンポーネント CSS

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を... 続きを読む

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 | セカヤサブログ

2022/08/17 271 users 装飾 レスポンシブ 傾向 ブレイクポイント 皆さん

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらなず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりやすい傾向にあり、特にLPでよく見かけるように思います。 しかし、コ... 続きを読む

IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ

2022/06/14 219 users プロパティ CSS object-fit level 機能

object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック prefers-color-scheme media query prefers-reduced-motion media query text-emphasisプロパティ text-stroke, text-fill font-variation-settingsプロパティ will-changeプロパティ CSS Grid Layout (level 1) IEでCSS ... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

2022/05/31 158 users CLAMP font-size CSS 関数 メディアクエリ

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、と... 続きを読む

これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

2022/04/05 189 users CSSフレームワーク UIコンポーネント 一貫性 登場 くら

これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラ... 続きを読む

商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual

2022/02/02 215 users ワイヤーフレーム CSS 白黒 商用 テンプレート

JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub U... 続きを読む

CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor

2022/01/31 225 users フォントサイズ CSS CLAMP 便利ツール 登場

Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォント... 続きを読む

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP Calc font-size ＭＡＸ min

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法

2021/10/13 269 users aspect-ratioプロパティ エバーグリーン CSS

先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したま... 続きを読む

CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方

2021/10/07 328 users rem CSS コンテナ単位 相対単位 コンテナクエリ

CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新し... 続きを読む

これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード | コリス

2021/05/26 171 users コリス フォールバック src WebP画像 HTML

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバック... 続きを読む

【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/04/15 138 users コリス ナビゲーションバー CSS CSS flexbox

CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 ?- Build 5 Responsi... 続きを読む

PythonやR対応の統合開発環境「JupyterLab 3.0」正式リリース。ビジュアルデバッガー搭載、レスポンシブ対応でモバイルデバイスの狭い画面でも使いやすく － Publickey

2021/01/06 120 users Publickey WebIDE モバイルデバイス 狭い画面

PythonやR対応の統合開発環境「JupyterLab 3.0」正式リリース。ビジュアルデバッガー搭載、レスポンシブ対応でモバイルデバイスの狭い画面でも使いやすく Project Jupyterは、オープンソースで開発されているWebIDE「JupyterLab 3.0」の正式リリースを発表しました。 JupyterLab 3.0 is released! - visual debugger - s... 続きを読む

Web制作の面倒な作業をラクにするCSS便利ツール59個まとめ - PhotoshopVIP

2020/07/07 368 users Grid PhotoshopVIP ニューモーフィズム 配色

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール59個をまとめています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問... 続きを読む

CSSで見出し固定＋レスポンシブ対応の表を作成 | Webクリエイターボックス

2019/10/16 345 users CSS Webクリエイターボックス 作成 タイムテーブル 制限

2019年10月17日 CSS, HTML5, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロ... 続きを読む

Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」 | かちびと.net

2019/08/08 235 users Vue.jsベース net Bootstrap レイアウト

Vuestic Admin Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 レイアウトはBootstrapが導入されており、レスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりは... 続きを読む

CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

2018/11/14 326 users Calc コリス CSS 関数 デバイス

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ... 続きを読む

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック | コリス

2018/08/28 230 users CSSハック コリス 実装方法 CSS サイズ変更

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create resp... 続きを読む

[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts | コリス

2018/08/01 672 users アニメーション 単体 JavaScriptライブラリ コリス

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションに... 続きを読む

CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス

2018/04/04 112 users CSS Grid Webクリエイターボックス

2018年4月4日 CSS 以前「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ 2カラム まずは基本の2カラム。CSS Gridのい... 続きを読む

CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート | コリス

2017/12/13 105 users コリス ヘキサゴン class div要素 CSS

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-... 続きを読む