Web制作者が知っておくと便利なCSSの小ネタ

CSSの進化はすごいですね🚀
一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。

Web制作者が知っておくと便利なCSSの小ネタを紹介します。

CSSの知っておくと便利な小ネタ

CSS Tips
by Marko Denic

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

はじめに

Cascading Style Sheets(CSS)は、HTMLなどのマークアップ言語で記述されたドキュメントの表示を定義するために使用されるスタイルシート言語です。CSSはHTMLやJavaScriptと並んで、World Wide Webの主要なテクノロジーです。

CSSでは、レイアウト、カラー、フォントなど、コンテンツと表示を分離できるように設計されています。この分離により、コンテンツのアクセシビリティを向上させ、表示の柔軟性とコントロール性が向上し、関連するCSSを個別の.cssファイルで定義することで複数のWebページでフォーマットを共有したり、構造的なコンテンツの複雑さや繰り返しを軽減することができます。

スムーズなスクロールはたった1行のCSSで

JavaScriptを使用せずに、たった1行のCSSでページ内リンクのスクロールをスムーズにします。

See the Pen
CSS Smooth Scroll
by Marko (@denic)
on CodePen.

ページ内検索時の挙動を除外したい場合は、下記を参考に。
参考: scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック

CSSだけでテキストを省略

プレーンなCSSで、テキストを省略することができます。

See the Pen
Truncate the text with CSS only
by Marko (@denic)
on CodePen.

複数行のテキストも省略できます

-webkit-line-clampプロパティを使用すると、複数行のテキストも省略できます。指定した値の行末に三点リーダーが表示されます。下記は、値に3を定義。

See the Pen
Truncate the text to the specific number of lines (CSS)
by Marko (@denic)
on CodePen.

水平と垂直方向のすべてに中央揃え

3行のCSSで、水平と垂直方向のすべてに中央揃えにします。

最新版の中央揃えのテクニックをまとめました。
参考: CSSの中央揃えで、最も万能で信頼できる実装テクニック

影を画像のコンテンツのみに与える

透過画像を扱う場合、要素のボックス全体に長方形の影を作るbox-shadowプロパティの代わりに、drop-shadow()で画像のコンテンツのみに影を作ることができます。

See the Pen
drop-shadow
by Marko (@denic)
on CodePen.

CSSでカーソルをSVGに変更

画像やSVGをカーソルとして使用できることを知っていましたか?

See the Pen
Cursors
by Marko (@denic)
on CodePen.

CSSだけでタイピングのエフェクト

JavaScriptを使用せずに、タイピングのエフェクトができるのを知っていましたか?

See the Pen
CSS Typing Effect
by Marko (@denic)
on CodePen.

テキストのハイライトカラーを変更

CSSの::selection疑似要素は、ユーザーがハイライト表示にした部分(テキストをマウスでドラッグ)にスタイルを適用します。

See the Pen
::selection pseudo-element
by Marko (@denic)
on CodePen.

どんな要素でもサイズを変更

<textarea>など、どんな要素でもサイズを変更できます。

CSSで実装するモーダル

:target疑似クラスを使用すれば、JavaScriptはなしでモーダルを実装できます。

See the Pen
CSS-only modal
by Marko (@denic)
on CodePen.

詳しい実装方法は、下記をご覧ください。
HTMLの<dialog>要素とCSSで、モーダル・ダイアログ ボックスを実装する方法と注意点

サイズ指定にcalc()関数が便利

CSSのcalc()関数は、プロパティの値を定義する際に計算式にできます。

calc()関数は便利な使い方がたくさんあります。
CSSのcalc()関数の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など

空の要素をスタイルする

CSSの:emptyセレクタを使用して、子やテキストをまったく持たない要素のスタイルを定義できます。

See the Pen
CSS :empty Selector
by Marko (@denic)
on CodePen.

CSSでスティッキーヘッダも簡単に

たった2行のCSSで、セクションごとのスティッキーヘッダを作成できます。

See the Pen
Sticky Sections
by Marko (@denic)
on CodePen.

sponsors

top of page

©2021 coliss