最近のWebサイトで見かける! フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ

最近のWebサイトやアプリで見かけるUIコンポーネントやエフェクトを実装するCSSのテクニックを紹介します。

一昔前まではJavaScriptが必要だったりしましたが、現在ではCSSのみで実装できるようになり、覚えておくと非常に便利です。

フロントエンドのデベロッパーにもデザイナーにも役立つCSSの実装テクニックのまとめ

10 Useful CSS Tricks for Front-end Developers
by Alex Ivanovs

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

CSSのプロパティは、全部で200種類以上あります。そして、これらのプロパティの多くは相互に影響し合っています。すべてを把握することは、現実的には不可能かもしれません。この記事では、デベロッパーにもデザイナーにも役立つCSSの実装テクニックをいくつか紹介します。

CSSは現在、かなり良好な状態です。新機能は、CSSを真のスクリプト言語として確固たるものにするのに役立っています。

@when@elseを導入するためのドラフトが作成されたことはご存じですか? 今すぐには利用できませんが、将来的にはCSSで条件付きロジックを書く可能性があることを知っておいたほうがよいでしょう。
これから登場するCSSの新機能については、下記をご覧ください。

私の経験では、CSSの新機能を常にチェックしていないと、見落とすことがよくあります。is()where()などのプロパティだけでなく、attr()も以前から存在していましたが、モダンフレームワークの登場によって影が薄くなってしまいました。

CSSでWordPressをハックする

この記事を書くきっかけになったのは、日常的にWordPressを使用している経験から得たものです。私は10年以上WordPressを使い続けています。その間、さまざまなテーマのデザインをカスタマイズするために、1万行以上のCSSを書いてきました。

具体的に言えば、プラグインの必要性をなくすためにCSSを使用しています。WordPressの仕組みは、ほとんどすべてにおいてプラグインを使用する必要があります。もちろん、CSSを少し知っていれば別ですが。ツールチップを表示させたい? プラグインを使用しましょう。ボタンにアイコンを付けたい? プラグインが必要です。という感じです。

この記事のCSSの使用手順

CSSとHTMLを少し知っていることが唯一の条件です。サンプルテンプレートを用意しましたので、コピペしてプロジェクトに使用してください。

HTMLファイルを用意し、下記のようにコピペするだけです。

1. タイプライターのようなエフェクト

タイプライターのようなエフェクト

Webデザインは、分単位でよりクリエイティブになってきています。そして、CSSのアニメーション機能を使用すれば、Webページを生き生きとしたものにすることができます。ここでは、animation@keyframesプロパティを使用して、タイプライターのようなエフェクトを実現しています。

簡単に解説すると、steps()プロパティでテキストアニメーションを分割しています。まず、steps()にアニメーション化させたいテキストの文字数を指定します。空白スペースも1文字分としてください。

次に、@keyframesにアニメーションをいつ開始するかを宣言します。例えば、「Typing effect for text」の後に別の単語を書くと、step()の数を変更しない限り、アニメーションは機能しません。

とはいえ、このエフェクト自体は特に新しいものではありません。しかし、CSSだけで同じことができるにもかかわらず、多くのデベロッパーはJavaScriptのライブラリに群がります。

2. 透過画像用シャドウ

透過画像用シャドウ

透過画像にbox-shadowを与えたら、まるで枠を与えたようになったことはありませんか? 透過画像にシャドウを与えるには、drop-shadowを使用します。

この方法が機能する理由は、drop-shadowプロパティは与えられた画像のアルファチャンネルに従うからです。そのため、シャドウは画像の外側にではなく、画像の内側の形状にもとづいて表示されます。

3. カーソルのカスタマイズ

ビジターを固有のカーソルに強制的に誘導する必要はまずないでしょう。少なくとも、一般的なUXではありません。ただし、cursorプロパティで注目すべき点は、画像を表示できることです。これはツールチップで写真を表示するのと同じことができます。

たとえば、ビューポートで写真をレンダリングすることなく、2つの異なる写真を比較できるようにするなどの用途があります。cursorプロパティは、デザインのスペースを節約するために使用できます。カスタムカーソルは特定の要素だけに表示することができるため、それ以外の要素に干渉することはありません。

4. attr()でシンプルなツールチップ

attr()プロパティは、私のお気に入りの最近の発見の一つです。WordPressのブログにツールチップ機能を追加したかったのですが、そのためには不要な肥大化をもたらすプラグインを使用する必要がありました。ありがたいことに、attr()を使用すれば、それを回避できます。

仕組みは非常に簡単です、コードについて説明します。

  • .tooltipを使用して、ツールチップになる要素を指定します。これは好きなようにスタイルができ、このデモではdotted border-bottomにしています。
  • 次に、content: attr();とそれを含む:before擬似要素を作成します。ここでは、content: attr(tooltip-data);としました。
  • 最後に、:hover疑似クラスを作成し、ツールチップの上にカーソルを合わせたときにopacity1になるように設定します。

スタイルはカスタマイズもできます。ツールチップに表示するテキストの量によっては、幅だけでなく、マージンも調整する必要があるかもしれません。すべてを設定しておけば、ページ内のどの要素にもtooltip-dataattr()を再利用できます。

5. ピュアCSSによるチェックリスト

ピュアCSSによるチェックリスト

冒頭で述べたように、CSSは着実に成熟しています。そして、この動的なチェックリストはその典型です。

仕組みは、input要素のcheckboxタイプを:checked疑似クラスと一緒に使用するというものです。また、transformプロパティを使用して、:checked指定がtrueを返すたびに状態を変更します。

このテクニックは応用もできます。たとえば、チェックボックスをクリックしたときに非表示のコンテンツを表示します。radiocheckboxなどのinput要素で使用されるのが一般的ですが、option要素やselect要素でも使用できます。

6. is()と:where()による要素のスタイル

is()と:where()による要素のスタイル

最近のCSSのモダンフレームワークの仕組みの一つに、条件付き論理セレクタがあります。つまり、:is()プロパティや:where()プロパティを使用して、さまざまな要素のスタイルを一度に設定できます。そしてより重要なことは、これらのプロパティを使用して、通常なら個別に指定しなければならない要素をクエリできることです。

下記のCSSには、さまざまな例が含まれています。各クエリが何をするのか、コメントを追加しました。:is()プロパティや:where()プロパティについて詳しく知りたいときは、下記をご覧ください。

7. キーフレームを使用したアコーディオン

キーフレームを使用したアコーディオン

JavaScriptのライブラリ(jQueryなど)の問題点は、必要なのが小規模な機能であってもライブラリ全体を読み込まなければならないことです。このアコーディオンの例もそうです。

現在のWebデザインのトレンドをよく見てみると、ランディングページにアコーディオンがあるのを見つけるのに時間はかからないでしょう。スペースを占有するコンテンツを凝縮するとてもシンプルな方法です。よくある質問、製品の特徴、使い方のヒントなど、さまざまな情報をアコーディオンに入れることができます。そのアコーディオンをピュアCSSで実装できます。

8. ホバーエフェクトのサイドバー

ホバーエフェクトのサイドバー

CSSで動的なホバーエフェクトのサイドバーを実装することは可能でしょうか? もちろん可能です、transform:hoverプロパティを利用します。

互換性については、さまざまなスマホ環境で試してみましたが、問題なく動作しました。ただし、スマホのスクリーンは窮屈に感じることがあるので、デスクトップの方がうまく機能します。

さらに、このテクニックはposition: sticky;で、スティッキーに対応したサイドバーにすることもできます。

9. ::first-letterを使用した文字ドロップキャップ

::first-letterを使用した文字ドロップキャップ

CSSでは、先頭の要素を選択することが可能です。ここでは::first-letter疑似クラスでドロップキャップのエフェクトを作成します。この疑似クラスのよいところは、文字を自由にスタイルできることです。そのため、デザインに合わせてドロップキャップの外観を調整できます。

このプロパティは、いろいろなことが実現できます。ある要素がページ上に初めて現れたときに限り、first-of-typeで個別にスタイルを設定できます。ただし、以前に表示されたにもかかわらず、複数の要素をターゲットにすることもできます。

10. ::beforeを使用してボタンの前にアイコンを追加

::beforeを使用してボタンの前にアイコンを追加

ブログを始めた目的の一つは、コンテンツの表示方法をよりクリエイティブにすることでした。また、私はリスト記事やさまざまなラウンドアップを書いているので、それらに個人的なタッチがあることを確認したかったのです。このようなブログを始めたのは、私が最初でも最後でもありませんが、カスタムデザインの要素は大いに役立つと思います。

通常、外部のリソースにリンクするときは、ボタンにカスタムスタイルを追加しています。具体的には、アイコンを追加したボタンです。Googleで検索すれば「ボタンジェネレーター」はたくさん見つかりますが、私は好きなときに再利用できる普遍的なテクニックに最も関心がありました。

そこで私の目標を達成するために、ボタンのためのカスタム:beforeクラスを作成しました。このスニペットのcontent:"\0000a0";は、 をエスケープしたものです。

アイコンのサイズは、スタイルを適用するボタンのサイズに合わせてwidthheightプロパティで調整できます。

終わりに

JavaScriptではなくCSSを選択する。
ここで紹介したCSSのテクニックは、特定のデザイン機能においてJavaScriptが不要になる可能性を浮き彫りにしています。そして素晴らしいことは、実質的にどのようなデザインにも実装できることです。実際、これらの多くを組み合わせることで、よりクリエイティブなデザインの自由を実現できます。

もちろん、まだ改善の余地はあるでしょう。このようなスニペットによって、フレームワークやライブラリが不要になるとは思っていません。

しかし、JavaScriptを長々と書かなくても、CSSが複雑なデザイン効果を実現できる方向に向かっているのは、とてもよいことだと思います。

CSSによるアニメーションに興味がある人は、CSS Animation Examplesもご覧ください。現在作業中ですが、CSSアニメーションのデモを増やしていきます。

sponsors

top of page

©2022 coliss