Advertisement

 

この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。

 

早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。

 

前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。

 

この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テ

 

 

コンテンツ目次

 

 

画像の質感をアップしたい

 

SVGフィルターを利用して、画像にザラッとした質感をプラスすることで、より魅力的な見た目を実現してみましょう。

 

Make Your Web Images More Realistic With SVG Grainy Filtersでは、実際のサンプルスニペットと一緒にソースコードが公開されています。

 

See the Pen
Noisy Gradients Image
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

グラスモーフィズム効果を表現したい

 

2022年の注目UIデザインのひとつ、すりガラスから透けているようなボカシ具合の「グラスモーフィズム」。Two Ways to Create a CSS Frosted Glass Effectでは、エフェクトを2つのCSSテクニックで再現します。

 

See the Pen
How to Create a Frosted Glass Effect in CSS – Method 2
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

入力フォームの使いやすさを改善したい

 

複数の入力フォームが並んでいるときに、選択しているフォームがわかりやすい用に色分けできると便利です。Better Focus Styles with CSS Pseudo-Class :focus-visibleでは、疑似要素を活用したお手軽なCSSスタイリング術が披露されています。

 

See the Pen
Create Better Focus Styles with ::focus-visible
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

CSS Transformをつかった最新テクニック

 

回転や歪みなどで使われていたtransformプロパティの新しくて、実用的な使い方が紹介されたCSS Transforms: The Old the New and the Remarkable。今まで知らなかった、目からウロコなテクニックを学びましょう。

 

See the Pen
CSS Transforms: Pricing table
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

2022年に知っておきたい新しいCSSプロパティ

 

親要素のサイズに応じてスタイルを設定できるContainer Queryにはじまり、:has()プロパティや入力フォームのカスタマイズに最適なaccent-colorなど、従来のCSSでのスタイリングを大きく変える便利な機能が増えています。

 

2022年に知っておきたい新しいCSSプロパティまとめの画像

 

 

position: stickyの正しい使い方

 

gridプロパティで組まれたレイアウトでは、position: stickyがうまく動作せずに、要素を固定できないケースがあります。

 

Using Position Sticky With CSS Gridでは、具体的なサンプル例と一緒に解決テクニックを詳しく解説、紹介しています。

 

See the Pen
Sticky: eg 1
by Ahmad Shadeed (@shadeed)
on CodePen.

 

 

レスポンシブ対応の区切り線のつくり方

 

デスクトップやスマホなど、さまざまなスクリーンサイズに合わせて垂直と水平に切り替えできる区切り線を、flexboxをつかって実演しているFlexbox Dynamic Line Separator

 

Flexboxをつかったレスポンシブ対応の区切り線の切り替わり画像

 

 

するするとカーテンが降りてくるエフェクトを再現したい

 

Raise the Curtains“エフェクトは、ページをスクロールすると背景が暗い状態から明るくなり、コンテンツが固定されながら文字テキストの色が切り替わります。

 

See the Pen
Raise the curtains
by CSS-Tricks (@css-tricks)
on CodePen.

 

 

スクロールアニメーションがより手軽に

 

現在Chrome Canaryで確認できるCSS Scroll-Linked Animationsのさまざまな使い方も公開されています。Reverse-Scrolling Columns With CSS Scroll-Timelineでは、デモを含む活用したいリンクが揃っています。

 

 

 

アニメーションをなめらかに戻す方法

 

CSSでアニメーションする方法はさまざまですが、Smoothly Reverting CSS Animationsではマウスホバーを外すときに、突然アニメーションが終了してしまう問題を解決するテクニックが紹介されています。

 

アニメーションをなめらかに戻す方法を紹介した記事のサムネイル

 

 

画面サイズに応じて変化する書体の設定方法とは

 

スマホからデスクトップまで、あらゆるスクリーンサイズに対応できるレスポンシブな見出しフォントのCSS設定を学ぶConsistent, Fluidly Scaling Type and Spacing。最終的に作成したCSSをCustom Propertyにしておけば、使い勝手も良くなりますよ。

 

画面サイズに応じて変化する書体の設定方法を紹介した画像

 

 

まるで木漏れ日が差し込んだ影をCSSで再現?!

 

絵文字にスタイリングを加えることで、まるでウェブサイトに光が差し込んでいるようなエフェクトを、CSSのみで実現できる画期的とも言えるアニメーションA Serene CSS Dappled Light Effect

 

See the Pen
Dappled light effect
by Preethi Sam (@rpsthecoder)
on CodePen.

 

 

ウェブサイトのより良いリンクをデザインする方法

 

視覚障害者のユーザビリティを考慮したウェブサイトでの、より良いリンクの設計をさまざまな具体例と一緒に見ていくUXガイド集 Designing Better Links For Websites And Emails: A Guideline

 

 

 

万が一に備える!CSSデザインテクニック集

 

コンテンツに実装してみると、文字テキストが長すぎてレイアウトが崩れた、などありがちなウェブサイトの問題を、CSSで解決できるスニペット集の Defensive CSS。web制作の小さな「困った」を解決してくれるテクニックがずらりで、今後もアップデート予定。

 

万が一に備える!CSSデザインテクニック集の画像

 

 

面倒なセレクトボックスを一発でスタイリング

 

新しいselectmenuプロパティを利用することで、これまでは複雑で面倒だったセレクトボックスを、より直感的にスタイリングできるようになります。現段階では、Chrome Canaryのみでの利用となりますが、2022年内の実装が予定中。

 

Say Hello to selectmenu, a Fully Style-able select Elementでは、実用的なサンプル例とカスタマイズ方法を詳しく紹介しています。

 

 

 

clip-pathで描く図形シェイプ一覧リスト

 

五角形にはじまり、図形の回転やサイズ縮尺から、@shapeをつかったより複雑な図形の描き方などを、ソースコードと一緒にまとめて公開している Polygon Shapes

 

さまざまな種類の図形シェイプの描き方を紹介したPolygon Shapes

 

 

フッターを固定する賢い方法とは?

 

A Clever Sticky Footer Technique で紹介されているテクニックでは、たった2行のCSSを追加するだけで、フッター部分をWebページ下に固定できます。ポイントは、position: stickytop: 100vh

 

See the Pen
sticky footer sticky
by Silvio (@silvio-r)
on CodePen.

 

 

ブラウザごとのデザインのずれを防ぐCSS Resetを独自アップデート

 

Josh Comeauによる My Custom CSS Reset では、ユーザエクスペリエンスを向上させるトリックを含んだ、新しいアプローチが提案されています。2021年に紹介したCSSリセットと一緒に活用してみましょう。
 

 

画像の配置について詳しく知りたい

 

A Deep Dive Into object-fit And background-size In CSSでは、object-fitbackground-sizeがどのように使うことができ、どう機能し、いつ使えるのか実用的なサンプル例を、使用に関する注意例とともに見ていきます。

 

 

 

 

 

Sticky Definition Listsは、ほんのわずかなCSSコードを加えるだけのシンプルさがお気に入りのスニペット。いつまでもスクロールしたくなる目次の切り替わりを表現できますよ。

 

See the Pen
Sticky Definition List
by Chris Coyier (@chriscoyier)
on CodePen.

 

 

CSSでの作業をより楽にしたい

 

現役Webデザイナーがこれは外せない!、というCSSアニメーションライブラリをまとめたマル秘一覧リスト。

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

 

「そもそもCSSを書く作業を減らせたらいいのに」と思っている人は、お役立ちCSSオンラインツールも一緒に活用してみましょう。

 

面倒なCSSでの記述も自動で行ってくれるなど、制作時短の時短にもつながります。

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CS

 

今回は未紹介となる、CSSの短いコードのみで表現できるテクニックをまとめた記事も参考にどうぞ。

ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。 ほんの数年前までJavaScriptなどで実装していた

 

第2弾がこちらのページ。20種類の小技CSSテクニックをまとめています。

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

 

コーディング作業で迷ったときに確認したい、コードスニペットを集めた便利サイトたち。アイデアが果てたときに。

この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンド