テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
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
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
日韓衝突 揺らぐ「半導体連合」
半導体は韓国の看板商品です。スマートフォンの普及やIoTの進展を追い風にしたメモリーの好調で、輸出額は最近10年で4倍に成長。2018年には1000億ドル（約11兆円）を突破しました。現在は輸出全体の20％近くを半導体が占めています。半導体産業の浮き沈みは韓国経済の「体温」を決めます。 GDP成長率を下方修正 韓国の半導体輸出は急減速 半導体輸出は米中貿易摩擦の余波で18年後半から急減速。足元では前年より約3割少ない水準です。7月、韓国政府は19年のGDPの実質成長率見通しを2.4～2.5％と、昨年12月時点の2.6～2.7％から引き下げました。7年ぶりの低成長です。 企業業績にも暗雲 サムスン電子の連結業績 （四半期ベース） ※19年4-6月期は速報値 半導体市況の悪化で、サムスン電子は19年4～6月期の営業利益が前年同期から6割減りました。中国政府が産業政策のロードマップ「中国製造20
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
知っておくと便利なHTML5の機能、要素や属性のまとめ
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。 当ブログでもよく紹介しますが、見逃していたものがありました。 1年間分、52個もあるので、時間のあるときにチェックしてみてください。 The 52 most popular projects from the last year of Trending Projects by Iain Freestone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。 ニュ
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
モダンCSSでよく使用されるレイアウトを実装するまとめ
ヘッダ・フッタ・コンテンツ・サイドバー、フルページのレイアウト、最下部のフッタ、中央配置、カードなど、一般的なWebサイトやスマホアプリのUIをモダンCSSで実装する方法を紹介します。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。これからのプロジェクトに役立つCSSのテクニックを解説します。 Layout patterns 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSで実装するレイアウト アスペクト比が維持される画像カード 最大値と最小値を決め、伸縮するカード コンテナに合わせて最適化されるカード スペースに合わせて伸縮するパンケーキ 聖杯レイアウト ラインナップ 積み重なるパンケーキ RAM (Repeat, Auto, Minmax) メディアクエリなしのサイドバー これからの
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
フロントエンドのデベロッパーが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つになることは間違いないでしょう。フ
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
これでもうモックアップ素材に困らない！スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devices
スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
「たった1行のCSS」とは、prefers-color-scheme: dark;の紹介ではありません。 Webサイトやスマホアプリのさまざまな要素すべてをダークモード用にカラーを変換するたった1行のCSSを紹介します。 すでに制作済みのWebサイトやスマホアプリをダークモード対応にしたい時だけでなく、ユーザースタイルシートとして利用することもできます。 One line - Dark Mode using CSS by Akhil Arjun 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 制作済みのサイト・アプリをダークモードに対応させる方法 CSSの解説 制作済みのサイト・アプリをダークモードに対応させる方法 ここで紹介するのは、すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる超簡単な方法です。 前置き
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な使い方を紹介します。 min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets CSSの関数のさらにいろいろな使い方は、下記をご覧ください。 CSSの比較関数 min(), max(), clamp()の使い方を詳しく解説 CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
文字列を違う文字列に滑らかに変化させるモーフィングを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 CS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンCSSによる絶対配置（position: absolute;）の削減
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック
CSSの疑似クラス「:focus-within」が素晴らしい理由
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
たった1行のCSSでこれなら簡単！すでに制作済みのWebサイト・スマホアプリをダークモードに対応させる方法
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
CSSの数学関数min()、max()、clamp()の基本的な使い方
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック