Advertisement

 

この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。

 

クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの?」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。

 

ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。

 

 

コンテンツ目次

 

 

入力フォームをカスタマイズしたい

 

ずらりと項目が並んだ入力フォームを目の前にすると、どうしても面倒と感じてしまうことがあります。そんなときは、項目を分けたステップ順にすることで、ユーザーへの入力を促すことができます。

 

Building A Stepper Component では、HTMLとCSSのみをつかったデモサンプル&ソースコード4種が公開されています。縦型、横型があるので、用途に応じて使い分けてみましょう。

 

 

 

 

これまでカスタマイズが面倒だった入力フォームですが、新しいプロパティ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.

 

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき
CSSボタンデザインは、スタイルを変えるだけでガラリと印象を変えることができるウェブデザイン要素のひとつです。 Copy & Paste CS
海外サイト Medium で公開された Design Better Buttons を著者 Andrew Coyle より許可をもらい、意訳転載しています。

 

 

リンク用エフェクトにこだわりたい

 

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では、9種類のカードホバーエフェクト用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テクニック5種類を比較し、もっとも使い勝手の良い方法を決めるCentering in CSS。1位は、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で表現し、デモをその場で確認でき便利。

 

 

海外サイト Web.dev で公開された Ten modern layouts in one line of CSS を著者 Una Kravets より許可をもら

 

 

画像にエフェクトを加えたい

 

何気ない画像を立体的な3D風に魅せることができるCSSテクニックが、3D Perspectiveで紹介されています。perspecitveCSSプロパティを活用するのが、このテクニックの鍵。

 

See the Pen
CSS Nugget: 3D Perspective in CSS
by CodyHouse (@codyhouse)
on CodePen.

 

 

Swipiey Image gridsでは、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カスタムプロパティによる設定、3つの方法が紹介されています。

 

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での記述も自動で行ってくれるなど、制作時短の時短にもつながります。

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

 

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

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

 

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

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

 

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

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