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

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
切り抜く範囲の指定
切り抜く範囲の指定
切り抜く範囲の指定(座標)
切り抜く範囲の指定(座標)
右上部分を切り抜く例
右上部分を切り抜く例
CSSで画像をトリミング
CSSで画像をトリミング
元々の表示領域は、そのまま(余白として)確保されている
元々の表示領域は、そのまま(余白として)確保されている
このページ内には3枚の画像が見えるが、読み込まれている画像ファイルは1つだけ。下の2つはCSSでトリミング(切り抜き)した結果。
このページ内には3枚の画像が見えるが、読み込まれている画像ファイルは1つだけ。下の2つはCSSでトリミング(切り抜き)した結果。
1枚の写真から複数箇所を切り出す
1枚の写真から複数箇所を切り出す
余白をなくして、自由に配置できるようになる
余白をなくして、自由に配置できるようになる
上端の余白と、左端の余白を、それぞれ打ち消す
上端の余白と、左端の余白を、それぞれ打ち消す
ボックスのサイズを、トリミング後の画像サイズに合わせる
ボックスのサイズを、トリミング後の画像サイズに合わせる
この写真の記事を読む
切り抜く範囲の指定
切り抜く範囲の指定(座標)
右上部分を切り抜く例
CSSで画像をトリミング
元々の表示領域は、そのまま(余白として)確保されている
このページ内には3枚の画像が見えるが、読み込まれている画像ファイルは1つだけ。下の2つはCSSでトリミング(切り抜き)した結果。
1枚の写真から複数箇所を切り出す
余白をなくして、自由に配置できるようになる
上端の余白と、左端の余白を、それぞれ打ち消す
ボックスのサイズを、トリミング後の画像サイズに合わせる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

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