この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。
クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。
ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。
- 1. 入力フォームをカスタマイズしたい
- 2. ナビゲーションメニューを使いやすくしたい
- 3. ボタンを目立たせたい
- 4. リンク用エフェクトにこだわりたい
- 5. スクロールバーをサイトの色で統一したい
- 6. ドロップシャドウの影にもこだわりを
- 7. グラデーションをビンテージ風にしたい
- 8. CSSで要素を中央寄せする5つの方法
- 9. ブラウザごとのデザインのずれを防ぎたい
- 10. あらゆる要素を重ねたい
- 11. ダイアログボックスを自分流に
- 12. 見やすいテーブル表をつくりたい
- 13. 見やすいチャート図、グラフをつくりたい
- 14. CSS Flexboxの使い方を習得したい
- 15. 画像にエフェクトを加えたい
- 16. ロゴを目立たせたい
- 17. ネオンエフェクトを作成したい
- 18. リストのマーカーを絵文字にしたい
- 19. レスポンシブ対応のフォント設定をしたい
- 20. あらゆる画面で角丸ボックスを操ろう
- 21. ダークモード対応のスイッチを作成したい
- 22. サイトの配色をスキンカラー別に変更したい
- 23. マウスカーソルを自由に変更したい
- 24. 最先端のCSS技術を取り入れたい
- 25. CSSでの作業をより楽にしたい
入力フォームをカスタマイズしたい
ずらりと項目が並んだ入力フォームを目の前にすると、どうしても面倒と感じてしまうことがあります。そんなときは、項目を分けたステップ順にすることで、ユーザーへの入力を促すことができます。
Building A Stepper Component では、HTMLとCSSのみをつかったデモサンプル＆ソースコード４種が公開されています。縦型、横型があるので、用途に応じて使い分けてみましょう。
これまでカスタマイズが面倒だった入力フォームですが、新しいプロパティaccent-colorを導入すれば、大幅に手間を省くことができます。CSS Accent-colorでは、詳しい使い方が紹介されており、ダークテーマにも対応したスタイリングの手軽さをうれしいポイント。デモページで確認できます。
ナビゲーションメニューを使いやすくしたい
スマホやタブレットなども含む、あらゆるデザインからの入力に対応した、レスポンシブなタブ要素のつくり方が、Building a Tabs Componentでは紹介されています。キーボードによるショートカット操作もできるスグレもの、デモページから確認できます。
ボタンを目立たせたい
メールアプリなどで見かけるスプリットボタンは、クリックで「送信」したり、「下書き」に保存などユーザーがアクションを選ぶことができるテクニック。Building a Split Button Componentでは、タブ操作にも対応したスプリットボタンのつくり方を、デモページと一緒に公開しています。
ボタンのボーダーにグラデーションをかけるのはどうでしょう。bakcground-clipプロパティを活用することで、border-raidusにうまく対応できるCSSテクニック。
See the Pen
CSS Nugget: Gradient Borders by CodyHouse (@codyhouse)
on CodePen.
ボタンの背景にアニメーション付きグラデーションを適用することも、CSSのみで実現できます。ポイントは、背景となるグラデーションのサイズをボタンより大きくすることで、background-positionプロパティで背景を移動、置き換えることができます。
See the Pen
CSS Nugget: Animated Button Gradients by CodyHouse (@codyhouse)
on CodePen.
リンク用エフェクトにこだわりたい
Exploring Creative CSS Hover Effects for Inline Linksでは、さまざまウェブサイトやブログで使いやすく、目を引くリンクホバーCSSエフェクトが6種類公開中。コピペで利用できるので、覚えておきたいテクニック。
See the Pen
Exploring Creative Link Hover Effects by Envato Tuts+ (@tutsplus)
on CodePen.
リンクにホバーすると、手描きで丸をしたようなエフェクトをCSSとSVGをつかって実現するテクニック。
See the Pen
CSS Nugget: Self-Drawing SVG Animation by CodyHouse (@codyhouse)
on CodePen.
CSS Button Hover Stylesでは、新しいクリップパスをつかったリンクアニメーションを表現したコレクションです。CSSのみでスタイリングされている、目を引くホバーエフェクト。デモページはこちらからどうぞ。
ラインが左から右に流れるようなアニメーションが特長のリンクエフェクト。複数行にまたがるテキストリンクにも適用できます。
See the Pen
Variable powered underline transition 😎 by Jhey (@jh3y)
on CodePen.
こちらの記事でも、ホバーリンクエフェクトを特集しています。どれもソースコードをコピペできるものを中心に揃えました。
スクロールバーをサイトの色で統一したい
ウェブページをスクロールしていくと右端に自動的に表示される「スクロールバー」。CSSを使えば、色の変更はもちろん、グラーデーションなどのカスタマイズが可能です。Custom Scrollbars in CSSでは、そのまま利用できるソースコードと一緒に、詳しくテクニックを紹介しています。
ドロップシャドウの影にもこだわりを
一般的なボックスシャドウではなく、より美しく最適化した、CSSスタイリングが披露されたDesigning Beautiful Shadows in CSS。ちょっとした工夫をCSSにしてあげることで、どんなUIデザインにも適用できます。
ドロップシャドウについて深堀りした、Getting Deep Into Shadowsも目を通しておきたい基本ガイドとなっています。
影ではなく、カードが何枚を重なったようなホバーエフェクトはいかがでしょう。How to Build a Simple Stack Hover Effect with CSSでは、９種類のカードホバーエフェクト用CSSスニペットが公開されています。
See the Pen
How to Build Simple Stack Hover Effects With CSS by Envato Tuts+ (@tutsplus)
on CodePen.
カードの重なり具合をより調整したいというひとは、Stacked Paper EffectのCSSスニペットも参考にしてみると良いでしょう。重なりを設定したい方向も自在に操ることができますよ。
See the Pen
Stacked Paper Effect – Diagonal by CSS-Tricks (@css-tricks)
on CodePen.
グラデーションをビンテージ風にしたい
Grainy Gradients では、CSSとSVGをつかったザラッとしたノイズのあるグラデーションを生成するテクニックが紹介されています。ライブプレビューできるデモページで確認できます。
CSSで要素を中央寄せする5つの方法
あらゆる要素を中央に配置するCSSテクニック５種類を比較し、もっとも使い勝手の良い方法を決めるCentering in CSS。１位は、display: flex;を用いたテク。しかしMVP賞には、。
ブラウザごとのデザインのずれを防ぎたい
ブラウザごとのスタイリングを正規化するCSSリセットについて、A Modern CSS Resetではファイルサイズを軽量化できる、新しいアプローチが提案されています。
あらゆる要素を重ねたい
2枚の画像を重ねたり、文字と画像をずらして表示したりと、最近よくみかけるレイアウトのひとつで、さまざまなスタイリング方法があると思います。
A Utility Class for Covering Elementsでは、クラス名を追加するだけで「あらゆる要素を重ねる」ことができる、CSSユーティリティクラスを命名する、便利なテクニックが披露されています。
See the Pen
Overlay utility classes with Grid by Michelle Barker (@michellebarker)
on CodePen.
ダイアログボックスを自分流に
ポップアップ表示されるダイアログボックスも、CSSをつかってスタイリング編集できます。How to Implement and Style the Dialog Elementは、ダイアログ要素の基本構造からカスタマイズ方法まで、詳しく解説されたチュートリアル。Codepenのデモページはこちらよりどうぞ。
見やすいテーブル表をつくりたい
スクロールしても見出し、項目を記入したヘッダーとフッターのみ固定されるCSSスタイリングハックが、Making Tables With Sticky Header and Footers Got a Bit Easierで紹介されています。野球選手の打率や本塁打、盗塁数など複数のデータをまとめて確認するときに便利です。
See the Pen
Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier)
on CodePen.
見やすいチャート図、グラフをつくりたい
円や棒グラフ、チャート図など複雑なデータを可視化したい、そんなときは軽量なCSSフレームワーク Charts.cssを活用してみましょう。詳しい使い方ドキュメントも用意されており、各チャートのサンプル例を確認できます。
CSS Flexboxの使い方を習得したい
「便利とは聞くけど、あまり使ったことがない」、そんなひとにオススメしたいのがEvergreen CSS Flex Layouts With Live Demos。よくあるウェブ用レイアウトをFlexboxで表現し、デモをその場で確認でき便利。
画像にエフェクトを加えたい
何気ない画像を立体的な3D風に魅せることができるCSSテクニックが、3D Perspectiveで紹介されています。perspecitveCSSプロパティを活用するのが、このテクニックの鍵。
See the Pen
CSS Nugget: 3D Perspective in CSS by CodyHouse (@codyhouse)
on CodePen.
Swipiey Image gridｓでは、SVGとすこしのJSコードを活用し、スクロール応じた魅力的なアニメーションを画像に加えるテクニックが紹介されています。「SVGアニメーション、いまいちわからない。」という人はぜひ。
See the Pen
swipey grid – clearleft by Cassie Evans (@cassie-codes)
on CodePen.
clip-path: path()のブラウザサポートされたことで、よりクリエイティブな表現が可能となっています。Clip-path Pop-Out Effectは、人物がサークル円から浮き上がるような、立体的なホバーエフェクト。クリップパスの作成には、CSS Clip-Path Editorがオススメですよ。
See the Pen
About Us Pop-Out Effect by Mikael Ainalem (@ainalem)
on CodePen.
画像の各要素に異なるアニメーションを追加すれば、より没入感のあるパララックスエフェクトをCSSで実現できます。A little bit of CSS micro-interactions and some cardsでソースコードも公開中。
ロゴを目立たせたい
ロゴは、ウェブサイトの顔とも言える大事な要素のひとつ。できれば印象に残るデザインに仕上げたいもの。
Creating my logo aniimationで紹介されている、SVGクリップパスとストロークアニメーションを活用すれば、魅力的な動きを表現できます。
See the Pen
Cassie! by Cassie Evans (@cassie-codes)
on CodePen.
ネオンエフェクトを作成したい
暗闇でチカチカと怪しく光るネオンライトエフェクトも、CSSのtext-shadowを用いることで簡単に表現できてしまいます。How to Create Neon Text With CSSでは、ネオンライトの光り方やボーダー線にネオン効果を追加する方法など、4種類のデモが公開中です。
See the Pen
Neon Text with Background Image by Silvia O’Dwyer (@silvia-odwyer)
on CodePen.
リストのマーカーを絵文字にしたい
CSSの@counter-styleプロパティを使えば、リストのマーカーを自由にカスタマイズできます。また、Custom Bullets with CSS ::markerでは、疑似要素::markerをつかった編集方法も紹介されています。
See the Pen
Counter style with @counter-style by Airen (@airen)
on CodePen.
リスト形式で並ぶ、三角形のわずかな要素にもアニメーションを加えることで、より表現が豊かに。How to Animate the Details Elementでは、CSSの疑似要素にtransform: rotate(90deg);を適用しています。
See the Pen
<details> and <summary> with animated arrow (no JS) by Moritz Gießmann (@MoritzGiessmann)
on CodePen.
レスポンシブ対応のフォント設定をしたい
どんな画面サイズでも適切な書体サイズとなるように、CSSで設定してみましょう。Responsive Typographyでは、これまで一般的だったスタリング方法の他、clamp()プロパティを用いた小技、そしてCSSカスタムプロパティによる設定、３つの方法が紹介されています。
See the Pen
CSS Nugget: Responsive Typography by CodyHouse (@codyhouse)
on CodePen.
あらゆる画面で角丸ボックスを操ろう
border-radiusの値をデスクトップとスマホなど条件つきで変更する、CSS関数をつかった目からウロコのテクニック、Conditional Border Radius In CSSでは、とても詳しく解説しています。Codepenのデモページでも確認してみましょう。
ダークモード対応のスイッチを作成したい
Building a Switch Componentでは、ダークモードにも対応した、使いやすいスイッチ要素を作成します。チェックボックスにも似ていますが、オンとオフの状態をはっきり示すことができ、CSSをつかってカスタマイズしていきます。デモページはこちら。
サイトの配色をスキンカラー別に変更したい
How to Build a Simple Theme Switcher With the CSS Checkbox Hackでは、CSSチェックボックとCSS変数を活用することで、クリックのたびにサイトの配色を変更できる、テーマスイッチを作成します。このテクニックも、もちろんHTML/CSSのみ。
See the Pen
How to Build a Simple Theme Switcher With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)
on CodePen.
マウスカーソルを自由に変更したい
マウスカーソルを合わせたときに表示したい画像をSVGファイルで用意、data URIに変換することでCSSで利用できます。変換にはURL encoderがオススメ。
See the Pen
CSS Nugget: Custom Cursor in CSS by CodyHouse (@codyhouse)
on CodePen.
最先端のCSS技術を取り入れたい
CSS待望とも言えるコンテナクエリ（Container queries）が、Chrome Canaryのフラグで利用できるようにように。Say Hello To CSS Container Queriesは、なぜコンテナクエリが必要なのか、具体的な使い方などの基本をまとめたガイドです。
CSSコンテナクエリが近日ブラウザ実装されることで、デザイナーのワークフローがどのように変化するのか、実例と一緒に詳しく解説したCSS Container Queries For Designers。レスポンシブデザインの制作が、大きく変わろうとしています。
CSS Container UnitsがChrome Canaryでサポートされたことをうけ、コンテナクエリの使い方をよりディープに知ることができるCSS Container Query Unitsも、実例ソースコードと一緒に公開中です。
ウェブページ上に「しおり」をつけ、必要に応じてジャンプで戻ることができるミニマップ機能は、現在Firefoxのみで確認できるテクニックです。実験的なCSSプロパティelement()を使い、HTMLのライブイメージを表示します。FirefoxでMinimapを開いてみましょう。
最近、Firefoxブラウザでもサポートされたimage-set()プロパティを利用すれば、ユーザーの閲覧環境に応じて、異なる画像を表示できる次世代のスタイリングについて、詳しく知ることができるCSS Tricksの記事も。
CSSでの作業をより楽にしたい
「そもそもCSSを書く作業を減らせたらいいのに」と思っている人は、お役立ちCSSオンラインツールも一緒に活用してみましょう。
面倒なCSSでの記述も自動で行ってくれるなど、制作時短の時短にもつながります。
今回は未紹介となる、CSSの短いコードのみで表現できるテクニックをまとめた記事も参考にどうぞ。
第２弾がこちらのページ。20種類の小技CSSテクニックをまとめています。
コーディング作業で迷ったときに確認したい、コードスニペットを集めた便利サイトたち。アイデアが果てたときに。
