ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

CSSだけで画像をトリミング(切り抜き)する方法

CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像を加工しなくても、CSSだけでトリミング(切り抜き)できる

画像の一部分だけをトリミング(切り抜き)して掲載したい

画像の一部分だけをトリミング(切り抜き)して掲載したい

CSSの「clip」プロパティを使うと、指定の要素を好きなサイズにトリミング(切り抜き)できます。切り抜きの形は四角形だけですが、任意の部分を自由に切り抜くことができます。

img要素に対してclipプロパティを使えば、画像を直接加工することなく、手軽に画像をトリミングできます。画像の周囲に余計な部分がある場合や、画像の中の特定の箇所だけを見せたい場合などに便利でしょう。


 

画像の一部分だけを再度掲載したい場合にも便利

1枚の写真から複数箇所を切り出す

1枚の写真から複数箇所を切り出す

特に、画像内の「特定の箇所」だけを再掲載したい場合、画像ファイルを複数用意しなくても済む点が便利です。

例えば、下図のサンプルページには、「キーボードの写真」の下に、「特殊キー部分だけの写真」と「エンターキー部分だけの写真」の計3枚が掲載されています。しかし、このページ内で実際に読み込まれている画像ファイルは、最初の1枚だけです。残りの2枚は、1枚目の画像をCSSでトリミング(切り抜き)して表示しています。

このページ内には3枚の画像が見えるが、読み込まれている画像ファイルは1つだけ。下の2つはCSSでトリミング(切り抜き)した結果。

このページ内には3枚の画像が見えるが、読み込まれている画像ファイルは1つだけ。下の2つはCSSでトリミング(切り抜き)した結果。


この方法だと、画像を複数用意しなくて良いので、画像加工の手間が省ける上に、ページの読み込み待ち時間が短くなるメリットもあります。

CSSの「clipプロパティ」でトリミング(切り抜き)ができる

CSSの記述だけで実現できる

CSSの記述だけで実現できる

上記のような「画像のトリミング(切り抜き)」処理が、CSSだけで実現できます。主に利用するのは「clipプロパティ」ですが、他にもいくつかのプロパティを併用する必要があります。

今回は、この「clipプロパティ」を使って、画像を直接加工することなく、任意の箇所を切り抜いて表示する方法をご紹介致します。

※本記事では画像を対象にして解説していますが、clipプロパティ自体は「画像以外の要素」に対しても使えます。


 
それではまずは、clipプロパティの記述方法から見ていきましょう
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます