ほんの数行のCSSで実装できる小技テクニック12個まとめ 【簡単&実用的】

 

ウェブがますます進化することで、表現の可能性がぐんと広がっており、CSSはその代表と言えます。

 

ほんの数年前までJavaScriptなどで実装していた複雑な仕様も、CSSのみで実現できるようになってきています。

 

この記事では、ほんのわずかなCSSで実装できる小技テクニック12個をまとめてご紹介します。

 

Web制作で活用できる、実用性の高いテクニックを中心に揃えています。ソースコードは、「HTML」と「CSS」タブを切り替えることで確認できます。

 

 

CSSで実装できる小技テクニック目次

 

 

1. テキストグラデーション

文字テキストにグラデーションカラーをほんの数行のCSSのみで表現できるテクニック。background-clipプロパティを利用するのがポイント。シンプルな単語だけでなく、複数行の文字テキストにも適用できます。

 

CSS

.text-gradient {
  background: linear-gradient(to right, darkblue, darkorchid);
  color: transparent;
  background-clip: text;}

 

See the Pen
CSS Nugget: Text Gradients in CSS
by CodyHouse (@codyhouse)
on CodePen.

 

参考記事: Text Gradients – Codyhouse

 

 

2. 左線グラデーション付きの見出しタイトル

border-imageプロパティを利用することで、お好みのグラデーションカラーに指定できます。適用したい方向をシテイルすることで、上下左右どこにでも対応できます。ブログ記事デザインのアクセントとしても活躍しそうな小技テクニック。

 

CSS

h1{
  border-style: solid;
  border-width: 0;
  border-left-width: .24em;
  border-image: linear-gradient(#40e0d0, #ff8c00, #ff0080) 1;
  padding-left: .24em;
}

 

See the Pen
Animating a CSS Gradient Border
by Photoshop VIP (@photoshopvip)
on CodePen.

 

参考記事: Gradient Border with CSS by Stephanie Eckies – Twitter

 

 

3. アニメーション付ボーダーライン

上記テクニックをさらにワンステップ進め、絶えず変化するアニメーションをつかったグラデーションボーダーを作成できます。CSSカスタム変数で配色を指定することで、後ほどの編集もラクラク。

 

See the Pen
CSS Rainbow Gradient Border (Animated)
by Bramus (@bramus)
on CodePen.

 

参考記事: Animating a CSS Gradient Border – Bram.us

 

 

4. テキストリンクがすーっと通過するホバーエフェクト

言葉での表現がむずかしいですが、文字テキストにホバーに合わせて左からラインが表示され、ホバーを外すとラインが右にフェードアウトしていきます。ナビゲーションメニューリンクなどに役立ちそうなテクニック。

 

See the Pen
CSS mouse-out transition effect
by Adam Argyle (@argyleink)
on CodePen.

 

Link Hover Effect from 2020.stateofcss.com by Adam Argyle – Twitter

 

 

5. リンク用CSSラインホバーアニメーション

控えめなアニメーションを追加した、デザインを強調できるホバーアニメーション15種類。CSSのみでスタイリングでき、JapvaScriptは必要ありません。ラインには擬似クラスを使用し、SVGラインアニメーションを以下のように適用してみましょう。すべての動きを確認できるデモページはこちら、ソースファイルも無料ダウンロードできます。

 

 

HTML

<a href="#" class="link link--herse">
	<span>Sign up</span>
	<svg class="link__graphic link__graphic--stroke link__graphic--arc" width="100%" height="18" viewBox="0 0 59 18">
		<path d="M.945.149C12.3 16.142 43.573 22.572 58.785 10.842" pathLength="1"/>
	</svg>
</a>

 

CSS

.link--herse {
	font-family: freight-display-pro, serif;
	font-size: 1.375rem;
	font-weight: bold;
}

.link__graphic--arc {
	top: 73%;
	left: -23%;
}

.link__graphic--arc path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.link:hover .link__graphic--arc path {
	stroke-dashoffset: 0;
	transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
	transition-duration: 0.3s;
}

 

参考記事: Simple CSS Line Hover Animations for Links – Codrops

 

 

6. SVGで画像の周りをデコレーション

fiterプロパティに直接SVGファイルを指定することで、思い通りの装飾デザインが手軽に実現できます。以下のサンプル例では、手書きしたようなハンドメイド風のSVGファイルを利用しています。

 

CSS

img {
  filter: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="waves" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">\
        <feTurbulence type="turbulence" baseFrequency="0.01 0.01" numOctaves="1" seed="1" stitchTiles="noStitch" result="turbulence" />\
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="G" yChannelSelector="A" result="displacementMap" />\
      </filter>\
    </svg>#waves')
  ;
}

 

See the Pen
Inline CSS SVG Turbulence Filter 2
by Chris Coyier (@chriscoyier)
on CodePen.

 

参考記事: SVG within CSS – CSS-Tricks

 

 

7. 文字テキストを回転させる方法

縦書きで文字を入力したいときはwriting-modeプロパティを利用しますが、単純に文字テキストを傾けたいときに活躍しそうなテクニック。

 

CSS

.rotate {
  transform: rotate(-90deg);
}

 

See the Pen
Sideways Header Rotation
by Graham Clark (@Cheesetoast)
on CodePen.

 

参考記事: Text Rotation – CSS-Tricks

 

 

8. 長い文章を…で省略する方法

抜粋文の表示などで便利な、比較的よく知られた小技テクニックですが、個人的に記述をいつも忘れてしまうので備忘録もかねて。

 

CSS

p{
  text-overflow: ellipsis;
}

 

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

 

参考記事: Truncate the text with CSS only by Marko – Codepen.io

 

 

9. 画像や動画の縦横比を一発選択

レスポンシブ・デザインでどうしても直面する問題のひとつ、アスペクト比(Aspect Ratio)はこれまでpaddingを利用したハックが一般的でした。しかし、主要ブラウザがアスペクト比のCSS記述サポートに対応したことで、たった1行で解決です。

 

CSS

.box {
  aspect-ratio: 1/1;
}

 

See the Pen
Perfect square with aspect ratio
by Smashing Magazine (@smashingmag)
on CodePen.

 

参考記事: Things You Can Do With CSS Today – Smashing Magazine

 

 

10. content-visibilityでウェブページの読み込みを爆速にする方法

1行のCSSコードを追加するだけで、ウェブページの読み込み速度を大幅に改善できるスゴ技テクニック。以下のサンプル例では、実際にcontent-visibility: auto;をコンテンツの後半の.storyクラスに適用。導入前232msだった読み込み時間が32msに減り、7倍のパフォーマンスとなったそう。ブログ記事後半にある関連記事やソーシャルシェアなどのコンテンツの表示に役立ちそう。

 

CSS

.story {
  content-visibility: auto;
  contain-intrinsic-size: 100px 1000px;
}

 

See the Pen
Content-visibility Demo: Base (With Content Visibility)
by Vladimir Levin (@vmpstr)
on CodePen.

 

参考記事: content-visibility: the new CSS property that boosts your rendering performance – web.dev

 

 

11. レスポンシブ対応のテーブル表

左端のカラムとヘッダーを固定した状態で、水平スクロールですべてのテーブル表を確認できる、より使いやすさを考慮したレスポンシブ・デザイン向けテクニック。ウィンドウサイズを実際に変更してみましょう。

 

See the Pen
Table with Sticky Header and Sticky First Column
by Chris Coyier (@chriscoyier)
on CodePen.

 

参考記事: A table with both a sticky header and a sticky first column – CSS-Tricks

 

 

12. どんな画像もポスター風に仕上げる方法

画像ファイルにCSSを追記するだけで、紙の折り目までリアルに表現したポスター風に仕上げるテクニック。本や漫画、映画など縦型サムネイルに特に効果的。

 

See the Pen
CSS folded poster effect
by Lynn Fisher (@lynnandtonic)
on CodePen.

 

参考記事: CSS folded poster effect by Lynn Fisher – Codepen.io

 

 

CSS便利ツールも活用しよう


 

軽量で拡張性が高く手軽に導入できるのが、CSSの強みでもあるでしょう。モダンブラウザでは、1行で問題を解決できることも。

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

 

@keyrameの設定など、ウェブ制作の面倒な作業をラクラクこなすCSSツールもぜひ活用してみましょう。

 

Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ

超便利!確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

 

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

 

どう書くんだっけ? を一発解決!コピペ用コードスニペットを集めたオススメWebサイトまとめ