中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。

文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみください。 「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。 デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure&nbsp;CS

CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版

2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6

CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法 まとめ

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。

Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！ remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！ VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます VS Codeで画像から背景だけを切り抜く VS Codeにremove.bgをインストールする手順 VS Codeで画像から背景だけを切り抜く VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。 まずは、ぱくたそ画像を用意し、VS Codeで開きます。

Adobe CCユーザーに朗報です！🎉 Adobe Fontsにまたまた、191書体の大量の日本語フォントが追加されました。これでトータル436の日本語フォントが利用できます。 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 フォントのライセンス -Adobe Fonts 今年初めにも日本語フォントが大量に追加されましたが、さらに追加です！ 前回の分は、下記の記事をご覧ください。 日本語フォントがAdobe Fontsに大量追加、砧書体制作所のフォント39種類が利用可能に おそらく、4/10のフォントの日に向けたアップデートだと思いますが、まだまだ追加されるかもしれません。とりあえず、現在追加されてたものを紹介します。 まずは、デザインシグナル。七種 泰史氏のフォント。キリギリス・こころ

CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021🎖️ by Joy Shaheb 同じ作者のFlexboxのチートシートも翻訳しました。 Flexboxでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの構造 CSS Gridの各プロパティ（親要素） CSS Gridの各プロパティ（子要素） CSS Gridのショートハンド 終わりに CSS Gridの構造 CSS Gridの知識をリフレッシュしましょう！ 2021年に備えて、C

CSSの新しいプロパティがブラウザでサポートされると、使いたくなりますが、その時ネックになるのがサポートしていないブラウザへの対応方法です。 サポートしているブラウザにはその新しい機能を、サポートしていないブラウザには理想的ではないけれど情報をしっかり提供できるように実装する方法を紹介します。 いわゆる「プログレッシブ エンハンスメント」の実装事例ですが、元記事では「タイニー エンハンスメント」としてより簡単にできる実装です。 The Beauty Of Tiny Enhancements In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. fit-contentをサポートしていないブラウザへの対応方法 2. clip-pathをサポートしていないブラウザへの対応方法

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

Flexboxでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にFlexboxの使い方を学べます。 FlexBox Cheat Sheets in 2021 by Joy Shaheb 同じ作者のCSS Gridのチートシートも翻訳しました。 CSS Gridでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造 Flexboxの各プロパティと値 flex-directionプロパティ justify-contentプロパティ align-contentプロパティ align-itemsプロパティ align-selfプロパティ flex-grow | shrink

フロントエンドのデベロッパー、バックエンドのデベロッパー、開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップを紹介します。 2021年、フロントエンドやバックエンドのデベロッパーが次に何を学べばよいか、キャリアアップのための道筋がコンパクトにまとめられています。 Developer Roadmaps Developer Roadmaps -GitHub フロントエンド デベロッパーのためのロードマップ バックエンド デベロッパーのためのロードマップ 開発・運用のためのロードマップ フロントエンド デベロッパーのためのロードマップ 2021年版、フロントエンド デベロッパーになるためのステップバイステップガイドです。PDFもダウンロードできます。 Frontend Roadmap.pdf フロントエンド デベロッパーのためのロードマップ

CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク

フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。 フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表