コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

CSS

アニメーションCSSをもっと簡単に!@starting-styleとtransition-behaviorの実践テクニック

CSS

Using @starting-style and transition-behavior for enter and exit stage effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 @starting-styleを使って遊んでいたら、transition-behaviorと組み…

@scopeマスターへの道:1日で習得するCSSの次世代テクニック

CSS

Understanding new CSS at-rule @scope 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 テンプレートを作成する際、開発者は特異性と柔軟性のバランスを取るのに苦労することがよくあります。一方では…

CSSのネストがネイティブになった今、Sassはまだ使うべきか?Sassを使うメリットとデメリット

Do You Still Need Sass? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。Sassを置き去りにするほど十分に進化したの…

もうPhotoshopは必要ない?背景に使えるオンラインパターンジェネレータ10+1選

10+ Online CSS Pattern Generators For Background 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 背景画像で使えるパターンを生成するジェネレーターを10+1選ご紹介します。 生成したパターンは画像…

CSSだけで動く!CSS Anchor Positioningを利用したナビゲーションエフェクト

CSS

Fancy Hover Effect With Anchor Positioning 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSS Anchor Positioningを使用したCSSだけでできるナビゲーションのホバーエフェクトをご紹介します。 ア…

パンくずリストの地味さに別れを。パンくずリストのデザイン例45選

CSS

パンくずリストのデザインアイデアを45選ご紹介します。 Pure CSS3 breadcrumb navigation, pixel perfect Collection - Breadcrumbs - Сomponent - 4ID Simple "transform: skew" breadcrumb Pure CSS3 breadcrumb navigation Flat CSS3 Breadcrumb Refacto…

CSS色指定で地獄を見た人は絶対使うべし!currentColorで色をまとめてキレイに統一する3つの裏技

CSS

Master Consistent Styles with CSS currentColor: 3 Powerful Use Cases 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 currentColorを使ってCSSの色のスキームを一貫して維持するのに苦労していませ…

HTMLクラス命名の重要性:コードの読みやすさとメンテナンス性に直結する命名の大切さ

How should class naming be in HTML? — Clean Code. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 多くの開発者は開発フェーズでネーミングに多大な時間を費やすことがあります。実際、場合によって…

インパクト大!View Transition APIによるページ遷移の実装例

View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafa…

メディアクエリはもう古い?CSS数学関数やコンテナクエリによる次世代のレスポンシブ対応とは?

CSS

Beyond CSS Media Queries 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 メディアクエリの問題点 メディアクエリの問題点 問題1: ビューポート中心主義 問題2: 管理が困難 問題3: それほどレスポンシ…

最新のHTMLではスイッチが進化!ネイティブHTMLによるスイッチインターフェイスの実装方法

Switching It Up With HTML’s Latest Control 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに Webは、HTMLの要素を取り入れ、見た目、動作、感触を完全に異なるものに変換することに慣れ親し…

あなたのCSSの書き方はもう古い!CSS論理プロパティの徹底解説

CSS

A Complete Guide to CSS Logical Properties, with Cheat Sheet 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、CSSの論理プロパティについて詳しく解説します。論理プロパティとは何か…

現代のWeb制作では必須のCSS Gridをより深く極めよう!repeat()を使いこなす秘訣

CSS

How to Use CSS Grid repeat() Function 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトがビジュアル的に魅力的になり、さまざまなレイアウトが用意されるようになったため、バランスの取…

やってはいけない:ブラウザのズーム機能で拡大できない文字サイズの指定方法

(Danger!) Preventing Zoom from Changing Text Size 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ブラウザのズームは、アクセシビリティの機能です。これに反するような試みは、無用な問題を引き起…

トレンドの浮遊感を簡単に実装!グラスモーフィズムジェネレーター11選

Top CSS Glass Effect Generators for Web Designers 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSグラスモーフィズムジェネレーターは、Web デザイナーがウェブサイトにガラスのような魅力的な…

端末に合わせて文字が自動調整!今すぐ試したい画期的なCSSのタイポグラフィー術

Responsive Typography Techniques with CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日のデジタル時代、ユーザーが様々な画面サイズのデバイスでウェブサイトやアプリケーションにアクセスす…

Tailwind CSSとReactでかんたん実装!華やかなスタガーテキストアニメーションを取り入れたヒーローイメージ

Create Staggered Text Animation with Tailwind CSS and React 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Linearのランディングページに似た、React と Tailwind CSS を使って作成されたスタガー…

Safari17.5で使える新機能をチェックしよう:text-wrap: balance、light-dark()、@starting-styleなど

iOS17.5の配信と同時にSafariも17.5にアップデートされました。 Safari17.5で使用できる新しい機能やバグフィックスをチェックしておきましょう。 引用元: WebKit Features in Safari 17.5 CSS Safari 17.5には、text-wrap: balance、light-dark()カラー関…

コピペでOK!Tailwindを使用した実用的な1200以上!のコンポーネント集

1200+ Free Tailwind CSS Examples TailWindを使用した実用的で美しい様々なコンポーネントをなんと1200以上も掲載した1200+ Free Tailwind CSS Examplesを紹介します。 カード、フォーム、ボタンなど実用的なコンポーネントがそれぞれ数十種類以上用意され…

これで大幅な作業時間短縮!WebデベロッパーのためのCSSジェネレーター100選

100+ CSS Generators for Web Developers 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトを構築する際、CSSジェネレーターを使用すると大幅な時間を節約できます。幸いなことに、この目的…

たった1行で劇的な変化!モダンCSSで使えるワンライナートリック12選

css

12 Modern CSS One-Line Upgrades 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 アプリケーションのCSSを改善するには、1行のアップグレードや拡張で十分です。プロジェクトで取り入れ始めるプロパテ…

CSSの表現力は無限大!クリエイティブでユニークなCSSアニメーション30+1選

30 Creative and Unique CSS Animation Examples to Inspire Your Own 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSS アニメーションを使えば、ボタンをよりクリックしやすくしたり、ランディング…

絶対と相対だけじゃない:CSS単位の追求

CSS

Exploring CSS Units 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ピクセルから百分率、秒数まで、各CSS単位タイプにはユニークな機能があり、開発者がデザインのビジョンを生き生きと現実のものに…

Javascriptは不使用!無限スクロールをCSSだけで実装するチュートリアル

Infinite-Scrolling Logos In Flat HTML And Pure CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 自動スクロールするロゴファームを作るように頼まれたとき、私は自問しました。「つまり、<marquee>のよう</marquee>…

インパクト抜群!CSSで演出するグリッチ効果26選

CSS

25+ CSS Glitch Effects 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブやモバイルアプリケーションにテクニカルなひずみのある外観を追加するためのグリッチ効果のコレクションをお探しでしょ…

改めて学び直す:CSS Transitionの詳細と実装例

CSS

CSS Transitions: A Detailed Guide With Examples 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 現代のウェブデザインは、静的なページだけではありません。訪問者にインタラクティブな体験を提供す…

2024年版!HTML/CSSで作るリボンデザイン20選

20 Best Free CSS Ribbons Designs In 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトのデザインにぴったりなCSSリボンをお探しですか? そうであれば、ここにいらしたのが幸いです…

CSS-in-JSが現在抱える問題とCSS Hooksという解決策

CSS Hooks and the state of CSS-in-JS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 フロントエンドアプリケーションとコンポーネントベースのアーキテクチャが範囲と複雑さを増すにつれ、モジュラ…

効率的なレイアウト設計のためのCSSサブグリッド:CSS subgridの基本的な使い方

CSS

Unlocking The Power Of CSS Subgrid For Efficient Layout Design 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Webデベロッパーにとって、ピクセルパーフェクトなレイアウトを実現することは常に難…

レスポンシブデザインにとってステロイドのような強力な解決策になるか?コンテナクエリの基本的な使い方

Responsive Design On Steroids: CSS Container Queries 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 待望のレスポンシブデザインの機能であるコンテナクエリーが、ついに安定したバージョンとなり…

©コハム