CSSを使用して画像の一部のみを取得する方法

矩形のクリッピング: 画像を矩形にクリップするには、次のようなCSSを使用します。
```
.clipped-image {
 width: 300px;  /* クリッピングしたい領域の幅 */
 height: 200px;  /* クリッピングしたい領域の高さ */
 overflow: hidden;
}
```
HTML内で画像を表示する要素に .clipped-image クラスを追加し、その要素の幅と高さを指定します。画像は指定した領域内で表示され、それ以外の部分は非表示になります。

円形のクリッピング: 画像を円形にクリップするには、border-radius プロパティを使用します。

.clipped-image {
 width: 200px;  /* クリッピングしたい領域の幅と高さは同じ値にすると円形になります */
 height: 200px;
 border-radius: 50%;  /* 値を50%にすると円形になります */
 overflow: hidden;
}

上記の例では、幅と高さが同じ値であるため、画像は円形にクリップされます。

レスポンシブデザインでのクリッピング: レスポンシブデザインでは、画面のサイズに応じてクリッピング領域を調整する必要があります。以下は、メディアクエリを使用してクリッピング領域を変更する方法の例です。
```
.clipped-image {
 width: 100%;  /* クリッピングしたい領域の幅 */
 height: 200px;  /* クリッピングしたい領域の高さ */
 overflow: hidden;
}
@media (max-width: 768px) {
 .clipped-image {
   height: 100px;  /* 画面幅が768px以下の場合のクリッピング領域の高さ */
 }
}
```
画面の幅が768px以下の場合にクリッピング領域の高さを変更するため、メディアクエリを使用します。

これらの方法を使用すると、画像の一部を表示することができます。必要に応じて、幅や高さ、クリッピング形状などを調整して、目的の効果を得ることができます。