クリッピング)、マスキングでもクリッピングと同じようなことができます。クリッピングは、切り抜いた画像をそのまま表示するか、全く表示しないかの扱いとなりますが、マスキングは、半透明効果やマスクの濃淡などを加味することができます。今回は、このようなmaskプロパティを使ったマスキング方法についてまとめたいと思います。目次1.マスキングとは2.maskプロパティ3.mask-imageプロパティ4.mask-modeプロパティ5.mask-repeatプロパティ6.mask-positionプロパティ7.mask-sizeプロパティ1.マスキングとはCSS上のマスキングとは、マスキング本来の意味の通り、ある領域を保護するために覆いをかける処理をいいます。覆いをかける画像等に注目すると、必要に応じて切り取った素材で覆いをかけるため、クリッピングによってもマスキングを実現することができます。今回は、maskプロパティを使用したマスキング方法を紹介します。maskプロパティを使用する際には、PNG画像やCSSグラデーション、SVG要素を使ってマスキングしますが、今回は、PNG画像を使って進めていきます。clip-pathプロパティと同様に、現時点では、IEなど未対応のブラウザもあるため注意が必要です。▲目次へ戻る2.maskプロパティmaskプロパティは、以下の各プロパティをまとめて指定できるショートハンドプロパティです。値:no-repeat、repeat-x、repeat-y、space、roundmask-positionマスク画像の表示位置を指定mask-sizeマスク画像の大きさを指定mask-composite複数のマスク画像の組合せを指定ショートハンドのmaskプロパティで、複数のプロパティを一括指定する場合、mask-sizeプロパティはmask-positionプロパティの後に、「/」の記号を使って区別して指定する必要があります。mask-sizeプロパティを指定する際には、必ずmask-positionプロパティを指定する必要があります。▲目次へ戻る3.mask-imageプロパティmask-imageプロパティは、マスク画像を指定する際に使用します。mask-image:noneの場合は、マスク画像を指定しないという意味ではなく、透明な黒画像として認識されます。mask-image:url()の場合は、カッコ内にPNG画像ファイルやSVGファイルのパスなどを記述して、マスク画像を指定します。カンマで区切って、マスク画像を複数指定することもできます。none;}svg要素をmask要素のidと一緒に参照することもできます。url(#image);}グラデーション画像も、mask-imageプロパティに適しています。background-imageでレイヤーやグラデーションもをご参照下さい。100%);}▲目次へ戻る4.mask-modeプロパティmask-modeプロパティは、マスク画像をアルファマスクかルミナンスマスクに指定する際に使用します。アルファマスクアルファマスクは、アルファチャンネルの画像です。アルファチャンネルには、透明度の情報が各ピクセルに含まれています。指定されている場合は、その画像のアルファ値をマスクの値としてマスキングします。アルファチャンネルの例として、黒と透明の領域があるPNG形式の画像があります。黒い領域のマスク要素(アルファ値1)に重なった領域が表示部分となり、透明の領域のマスク要素(アルファ値0)に重なった領域が隠される部分となります。このPNG画像をアルファマスクとして使います。上のPNG画像で、このJPG画像をマスキングします。マスキングの結果、次のような表示となります。ソースは次の通りです。src="image.jpg"></div></div>ルミナンスマスクルミナンスマスクは、画像の輝度値(ルミナンスキー)がマスク値として使われます。アルファマスクで使ったPNG形式のマスク画像の黒い部分を白にすると、同様にマスキングできます。上のPNG画像で同じJPG画像をマスキングすると、アルファマスクの時と同じようにマスキングできます。ソースは次の通りです。src="image.jpg"></div></div>▲目次へ戻る5.mask-repeatプロパティmask-repeatプロパティを使用して、サイズと位置を指定したマスク画像で、繰り返しマスキングすることができます。background-repeatプロパティと同じように指定します。mask-repeatプロパティの値は、次の通りです。no-repeatマスク画像を領域内で繰り返し配置しないnorepeat-xマスク画像を横方向に繰り返し配置するnorepeat-yマスク画像が縦方向に繰り返し配置するnospaceマスク画像を領域全体に間隔を空けて繰り返し配置するnoroundマスク画像を指定回数、領域内で繰り返し配置するもし領域内に収まらない場合は、収まるように画像のサイズが自動変更されるこのPNG画像をマスクに使います。mask-repeatプロパティにspaceを指定して、先ほどと同じJPG画像をマスキングすると、次のような表示となります。ソースは次の通りです。src="image.jpg"></div></div>▲目次へ戻る6.mask-positionプロパティmask-positionプロパティは、マスク画像の位置を指定する際に使用します。デフォルト値はcenterです。100%」に指定します。100%;}▲目次へ戻る7.mask-sizeプロパティmask-sizeプロパティは、マスク画像のサイズを指定する際に使用します。background-sizeプロパティと同じ値で指定できます。mask-sizeプロパティを50%に指定すると、マスク画像の最大幅の50%のサイズで表示されます。contain;}▲目次へ戻るSHARE最新記事スキルアップ2020.02.19兵庫県のプログラミングスクール5選|人気おすすめは?料金&特徴を比較2020年最新!この記事では、兵庫県で人気&おすすめのプログラミングスクール5校を料金や講座内容別に徹底比較。ご自分のペースで効率よく学べる無料のオンラインスクールもありますよ。今回は、茨城県で人気&おすすめのプログラミングスクール6校を料金や特徴別に徹底比較。多彩なコースで効率よく学べる人気スクールなど厳選してまとめました。今回は、兵庫県でおすすめのIT専門学校とプログラミングスクールを受講料が安い順ランキングで9校まとめました。若狭湾を囲んで美しいビーチや景勝地が点在する福井県。今回は「プログラミングを学んで東京都内でエンジニアとして就職したい!」という方に向けて、福井でおすすめのIT専門学校&プログラミングスクールを厳選2校ピックアップ。[...]スキルアップ2020.02.10岡山県のIT専門学校&プログラミングスクール7選!学費と特徴を徹底比較きびだんごと桃太郎といえば岡山県!今回は、そんな岡山県でおすすめのIT専門学校&プログラミングスクールを受講料が安い順にランキング形式で7校ご紹介。世界遺産の厳島神社や日本三景と称される安芸の宮島など、世界的に有名な観光地として知られる広島県。