Home
ウェブ制作
ウェブデザイン
ウェブデザイン

【CSS】知っておくと便利！短いコードで実装できるCSS小技20選

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

 

この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。

 

わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。

 

HTMLの小技テクと一緒に活用してみてはいかがでしょう。

 

【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選

 

 

そもそもCSSってなに？

 

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。

 

CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連するCSSを別の.cssファイルで指定することによる複数のウェブページでのフォーマットの共有化、構造的なコンテンツの複雑や繰り返し作業を省くなどにも便利。

 

では、わずかなCSSコードで実装できるテクニックを詳しくみていきましょう。

 

 

あまり知られていない、短いコードで実装できるCSSテクニックまとめ

 


コンテンツ目次

 

タイピングエフェクト

チカチカと点滅するタイピングエフェクトは、JavaScriptを利用せずにCSSのみで表現できます。

 

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

 

 

ドロップシャドウ

背景が透明となっている画像を扱うときは、ボックス要素全体に影をつけるbox-shadowプロパティの代わりに、filter: drop-shadowを活用することで、画像に影をつけることができます。

 

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

 

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #585858);
}

 

 

スムーズスクロール

たった1行のコードを追加するだけで、JavaScriptなどを使わずに、リンク先へとスムーズに移動するスムーズスクロールを実現できます。ランディングページのナビメニューやブログ作成にも便利。

 

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

 

html {
  scroll-behavior: smooth;
}

 

 

コンテンツの天地中央揃え

どんな要素もこのコードを使えば、水平および垂直方向に中央揃えとすることが可能です。

 

.center {
  display: flex;
  align-items: center;
  justify-content: center;       
}

 

 

カーソルを自由なデザインに変更

マウスカーソルを画像にしたり、絵文字を利用することもできます。

 

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

 

 

長い文字テキストを…で省略

ボタンデザインなど、長い文字テキストを切り詰めたいときに便利な小技。

 

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

 

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

 

 

特定の行数で文字テキストを…で省略

より長い文章テキストなどをボックス内に表示するときなど、特定の行数に合わせたいときに便利。webkit-line-clampプロパティを利用することで、文字テキストを指定した行数で…を使って省略します。

 

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

 

 

選択、ハイライトしたテキストの色を変更

文字テキストの一部を選択したときに、通常の青色ではなくお好みの色に変更できるCSSテクニック。

 

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

 

.custom-highlighting::selection {
  background-color: #8e44ad;
  color: #fff;
}

 

 

要素のサイズを変更できる

textareaのように、どんな要素でもリサイズできるようにしてくれる便利コード。

 

.resize {
   resize: both;
}

 

 

モーダルウィンドウをCSSで実現

疑似要素;targetを活用することで、JavaScriptを使わずにウィンドウの開閉アニメーションを作成できます。

 

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

 

 

計算式で値を指定

calc()は、プロパティの値を計算式で実行できる便利なCSS関数。「横幅100%で、そこから左右のパディング○pxずつ引いたら…」こんなときに役立つテクニック。

 

/* 幅の指定をcalc()関数で */
.calculated-width: {
    width: calc(100% - 30px);
}

 

 

空の要素をスタイリングする

:emptyセレクターを活用すれば、テキストや画像などのない空の要素にCSSでスタイリングできるように。

 

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

 

.box:empty {
  background: #fff;
}

 

 

CSSでカスタムスクロールバーを作成

サイトのデザインに合わせてスクロールバーの配色を揃える、そんなときに便利なCSSテクニック。

 

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

 

 

あらゆる要素を固定

たった２行のCSSを追加するだけで、固定ヘッダーを作成できるように。CSSの進化はすごいです。

 

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

 

 

スクロールスナップ

スクロールでピタリとコンテンツの表示領域まで移動できる「スクロールスナップ（英: Scroll Snap）」。画面いっぱいのフルスクリーンをつかったレイアウトで「使える」実用テク。

 

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

 

 

ダイナミックなツールチップ

テキストや画像にマウスカーソルを合わせると、補足情報を吹き出し風に表示できる「ツールチップ」。これもCSSのみでスタイングできてしまいます。CSS関数attr()を利用するのがポイント。

 

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

 

 

入力キャレットの色を設定

次に入力する文字の挿入される位置を示す、視覚的なマーカー「キャレット（英: Caret）」もお好みの色に変更してしまいましょう。

 

 

input {
    caret-color: green;
}

 

 

疑似要素::in-rangeと::out-of-range

疑似要素::in-rangeと::out-of-rangeを使用すると、フォームに入力した値が指定した最小値minおよび最大値maxの範囲内か外かでスタイリングできるプロパティ。ショッピングカートでの個数制限などに便利なテク。

 

 

 

画像をくり抜いた文字テキスト

background-clipプロパティを利用すれば、テキストに合わせて背景画像を切り抜くことができます。美しい見出しタイトルづくりにいかがでしょう。

 

See the Pen
background-clip property by Marko (@denic)
on CodePen.

 

h1 {
  background: blue url('画像パス');
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

 

 

行や列のすき間 (溝) を定義

gapプロパティを利用すれば、行と列のすき間 (溝) を一括指定できます。

 

 

.flex{
    display: flex;
    width: 500px;
    flex-wrap: wrap;
    /*行と列の溝の幅を指定*/
    gap: 10px;
}

 

 

これまではJavaScriptでの実装が当たり前だったものが、CSSのみでサクッと表現できるなど、ますます進化が楽しみなCSS。他にも便利な小技があれば教えて下さい、追加させてもらいます。

 

現役デザイナーが実際に活用している、1行で実現できるウェブレイアウトもオススメですよ。

 

たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

 

参照元リンク : CSS Tips – Marko Denic

Related