Advertisement

 

この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。

 

コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。

 

ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう

 

前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。

 

この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。 早く知っておけばよかったと思う、
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テ
海外サイト Marko Denic で公開された CSS Tips を著者 @denicmarko より許可をもらい、意訳転載しています。 この記事で

 

 

コンテンツ目次

 

 

background-imageをつかった実用アニメーションサンプル集

アニメーションと組み合わせることで多彩な表現ができるbackground-imageをつかったCSSのアニメーションテクニック。表現のサンプル例と一緒に詳しく解説しています。

 

 

ウェブサイトの印象を大きく左右する「動き」。 現役Webデザイナーがこれは外せない!というCSSアニメーションライブラリをまとめてご紹介。

 

 

無限につづく自動スクールアニメーションのつくり方

ウェブサイトで水平方向に画像などが移動するアニメーションを、CSSのみで簡単に実現できる Create infinite auto-scroll animation with pure CSS。いろいろなサイトで採用されているテクニック。

 

 

 

 

縦横比バラバラの画像を並べる

画像の高さを揃えながら、縦横の異なるアスペクト比にも対応したグリッドレイアウトをCSSのみで解決する Building a combined CSS-aspect-ratio-grid

縦横比バラバラの画像を並べる記事のサンプル画像

 

依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS L

 

 

CSS Animtionの基本と実用サンプル集

@keyframesプロパティを利用することで、より複雑で魅力的なアニメーションを作成するチュートリアル CSS Animations: Introduction & Examples。アニメーションの基本と一緒に、動きのなる波ウェーブや、波紋のようなパルス信号、番号付き自動カウンター、弾むボールなど面白いサンプルが揃います。

CSS Animtionの基本と実用サンプル集

 

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras S

 

 

box-shadowでカード要素にポップな枠線を追加する方法

カード要素にポップな枠線をbox-shadowをつかって表現するお手軽テクニック CSS card shadow effects。疑似要素を使わずに、プロパティひとつでスタイリングできます。

カード要素にポップな枠線をbox-shadowで表現する方法のデモ画像

 

ほんのり影がついたようなドロップシャドウは、「浮いている」ような立体感を演出できる、ウェブサイトでは欠かせないデザイン要素のひとつです。 ドロップシャドウの使
マテリアルデザインや最近話題のニューモーフィズム・スタイルで見かける、立体感を演出するドロップシャドウ、影エフェクト。 CSS box-shadow

 

 

CSS :hasプロパティの実用的なつかい方

:hasセレクターの新しい登場によって、これまでは難しかった親要素をベースに、子要素の特長を活かすスタイリングがスタイリングが可能となりました。CSS Parent Selector では、:hasの基本から具体的なつかい方まで、詳しいサンプルと一緒に解説されています。:hasの実用例もお見逃しなく。

CSS:hasプロパティの実用的なつかい方を学ぼう

 

 

 

:has()をつかった実用例その2(ナビメニュー|グリッドアニメーション)

:has()のつかい方のひとつとして、「ナビメニューを作成し、いずれかのリンクをホバーしたときに、他のメニュー要素を半透明にする。」、そんなスタイリングが可能になります。その他にもユニークな実用例がまとめれた Animated Grid Tracks with :has()

Animated Grid Tracks with :has()のデモ画像

 

 

 

画像を思い通りに切り抜く方法

画像を好きな方向から自由に切り抜き、配置できるCSSの新しいプロパティobject-view-boxのつかい方を詳しく紹介した First Look At The CSS object-view-box Property。考えられる問題と、このプロパティを活用した解決テクニックを、実用サンプル例と一緒にどうぞ。

First Look At The CSS object-view-box Propertyの画像

 

 

 

CSS Gridのレイアウトをsubgridでより柔軟に

親要素のgrid-template-columnsを子要素の.itemに継承することで、CSS Girdをつかったレイアウトの並びを整えることができる Learn CSS Subgrid。FirefoxのSafariのテクノロジープレビューでサポートが開始されました。

Learn CSS Subgridの画像

 

あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得

 

 

表示バグに備えた実用的なCSS設計のヒント

Defensive CSSでは、画像の縦横比で歪んでしまう問題や、文字テキストが長すぎてはみ出る問題など、実用的なCSS設計のヒントがつまったライブラリで、アップデート継続中。

表示バグに備えた実用的なCSS設計のヒント

 

依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS L

 

 

ざんねんな便利HTML属性たち

普段のHTML要素に記述するだけで使えるのに、あまり使われていない便利な属性をまとめた Those HTML Attributes You Never Use。スマホのEnterボタンをクリックしたときの挙動や、Firefoxで表示するスタイルシートを選択したり、リストの順番を自由にスタイリングしたり、タグをダウンロード可能にするなど知らないものばかり。

普段のHTML要素に記述するだけで使えるのに、あまり使われていない便利な属性をまとめた優良記事

 

海外サイト Marko Denic で公開された HTML Tips を著者 @denicmarko より許可をもらい、意訳転載しています。 この記事

 

 

日本語フォントの文字間隔を調整する方法

Webではトラッキングを「letter-spacing」で設定できますが、個別の調整ができることをご存じない方も多いのでは?「font-feature-settings」というCSSのプロパティを設定することで、Webで簡単に文字間隔の調整(カーニング)ができます。

簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】の画像

 

 

 

より良いモダンなスクロールバーとは

ユーザーのスクロール体験を向上させ、より快適なスクロールバーを作成するために、2022年にできることをまとめた Better scrolling through modern CSS

記事Better scrolling through modern CSSの画像

 

 

 

リストの番号を自由に操る

あまり知られていないリストのCSSによるスタイリングテクニックを解説した Obscure CSS: Implicit List-Item Counter

Obscure CSS: Implicit List-Item Counterの画像

 

 

 

conic-gradient()関数をつかった美しいボーダー線のつくり方

conic-gradient()関数をつかって、美しいグラデーション線を描く Use conic gradients to create a cool borderlinearradialと合わせて一緒にどうぞ。

conic-gradient()関数をつかった美しいボーダー線のつくり方を学ぼう

 

グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつか

 

 

backgroundプロパティを活用したホバーフェクト集

背景のクリッピングやCSSマスク、さらに3D効果も活用した、高度で複雑なCSSホバーエフェクトを作成する Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

See the Pen
Hover effects overview
by Temani Afif (@t_afif)
on CodePen.

 

 

 

Text Shadowプロパティを活用したホバーエフェクト集

CSSのtext-shadowを影ではなく、ホバーエフェクトに活用するユニークなテクニックが、4つのサンプル例と一緒に解説された Cool Hover Effects That Use CSS Text Shadow

See the Pen
4 hovers effect with text-shadow
by Temani Afif (@t_afif)
on CodePen.

 

この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。 どれもHTMLスニペットとして公開され
この記事では、CSSでできるクリエイティブなリンクホバーエフェクト6個をご紹介します。 数行のCSSをコピペするだけで実装でき、ウェブサイトをより魅力

 

 

ページ左右に固定されたツールバーを作成

固定ツールバーや縦型ナビゲーションなどとも呼ばれるスティッキー要素を、CSSとほんの少しのJavaScriptで表現する How to Create a Sticky Toolbar With CSS and a Bit of JavaScript

See the Pen
How to Create a Sticky Toolbar With CSS and a Bit of JavaScript
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

 

スターウォーズのシーン展開をCSSで表現

人気映画スターウォーズの劇中、シーンの切り替えで使われているエフェクトをCSSのみで再現した Star Wars Scene Transition Effects in CSS。シンプルなグラデーションマスクをはじめ、4種類のシーン切り替えをCSSホバーエフェクトで再現。

See the Pen
Shape Zoom Transition
by Will Boyd (@lonekorean)
on CodePen.

 

 

 

完璧なコンテンツ目次のつくり方

コンテンツの目次をより読みやすく、ユーザーフレンドリーにするために深堀りした考察記事 A Perfect Table of Contents With HTML + CSS

See the Pen
Table of Contents – Final
by Nicholas C. Zakas (@nzakas)
on CodePen.

 

 

 

リアルな反射をCSSで再現

まるで鏡に写っているようなリアルな反射を、CSSのみで再現できる Creating Realistic Reflections With CSS。以前Appleが利用していたことで、爆発的な人気のあった懐かしスタイル。

See the Pen
Reflections with CSS
by Preethi Sam (@rpsthecoder)
on CodePen.

 

 

 

バネのおもちゃ「スリンキー」をCSSで再現

階段から落とすと、その勢いで移動を続けるバネのおもちゃの動きをCSSのみで表現したアートチャレンジ A CSS Slinky in 3D? Challenge Accepted!

See the Pen
3D CSS Flip-Flop Slinky 🚀
by Jhey (@jh3y)
on CodePen.

 

 

 

キラリと光るレンズフレアを再現

フォトショップなどのツールで簡単に再現できるレンズフレアを、CSSのみで再現するテクニックを披露した Add a CSS Lens Flare to Photos for a Bright Touch。ギャラリー画像や背景、ユーザープロフィールなどにも適用できます。

See the Pen
lens flare with gsap and js.lensflare
by Jeff (@jlgrubbs)
on CodePen.

 

 

 

UI用アイコンとタイポグラフィー整列の再考察

ユーザーインターフェースで意図を伝えるのに役立つアイコンですが、Webサイトを見ていると文字とのズレが少し気になることがあります。フォントサイズや文字間などの変更に対応できるCSSスタイリングを、Improving Icons for UI Elements with Typographic Alignment and Scale で学びましょう。

See the Pen
icons: bullets
by Marcel (@marcelmoreau)
on CodePen.

 

 

 

CSS Toggleの未来

まだまだプロトタイプの段階ですが、チェックボックスやラジオボタンのような感覚でHTMLにさまざまな動きを指定できる新しい取り組み The Future of CSS: CSS Toggles。基本的なつかい方として、0(非アクティブ)から1(アクティブ)に変更できる、ダークモード用スイッチなど。

CSS Toggleの未来を感じるデモ画像

 

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS