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

画像を加工せず、複数の画像に「影」を付加

たくさんの画像に「影」を付けたい場合、画像1つ1つを加工していくのは面倒ですね。「影画像」を1つ用意するだけで、すべての画像に影を合成する方法を使うと楽です。スタイルシートで簡単に合成する方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像に影を加えるには

写真などの画像に「影」を加えて表示させたい場合、どうしますか?

画像に影を加える
(左)画像単独の表示 (右)画像に影を加えたところ

Photoshopなどの画像加工ソフトを使って影を加える方法もありますが、 たくさんの写真に影を付けたい場合にはとても手間がかかってしまいます。
そこで今回は、画像を直接加工せずに、複数の画像に対して簡単に影を加えられる方法をご紹介いたします。

たくさんの画像に一括して影を加える
▲いくつ画像があっても簡単に影を加えられます。サンプルを表示

具体的には、「影」の部分だけを独立した画像ファイルとして作っておき、スタイルシートを使って重ねて表示させます。 この方法なら、画像を加工する必要がなく、影を加えたい画像の数に関係なく、簡単に影を加えることができます。

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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