
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
ITコラム
2017.09.01
前回、clip-pathプロパティを使ったクリッピングを紹介しましたが(CSS【 clip-path 】 ~ クリッピング)、マスキングでもクリッピングと同じようなことができます。
クリッピングは、切り抜いた画像をそのまま表示するか、全く表示しないかの扱いとなりますが、マスキングは、半透明効果やマスクの濃淡などを加味することができます。
今回は、このようなmaskプロパティを使ったマスキング方法についてまとめたいと思います。
1.マスキングとは
2.maskプロパティ
3.mask-imageプロパティ
4.mask-modeプロパティ
5.mask-repeatプロパティ
6.mask-positionプロパティ
7.mask-sizeプロパティ
CSS上のマスキングとは、マスキング本来の意味の通り、ある領域を保護するために覆いをかける処理をいいます。
覆いをかける画像等に注目すると、必要に応じて切り取った素材で覆いをかけるため、クリッピングによってもマスキングを実現することができます。
今回は、maskプロパティを使用したマスキング方法を紹介します。
maskプロパティを使用する際には、PNG画像やCSSグラデーション、SVG要素を使ってマスキングしますが、今回は、PNG画像を使って進めていきます。
但し、clip-pathプロパティと同様に、現時点では、IEなど未対応のブラウザもあるため注意が必要です。
maskプロパティは、以下の各プロパティをまとめて指定できるショートハンドプロパティです。
mask-image マスク画像の指定
値:none、url()mask-mode マスク画像のモードを指定
値:alpha、luminancemask-repeat マスク画像の表示スタイルを指定
値:no-repeat、repeat-x、repeat-y、space、roundmask-position マスク画像の表示位置を指定 mask-size マスク画像の大きさを指定 mask-composite 複数のマスク画像の組合せを指定
ショートハンドのmaskプロパティで、複数のプロパティを一括指定する場合、mask-sizeプロパティはmask-positionプロパティの後に、「/」の記号を使って区別して指定する必要があります。
また、mask-sizeプロパティを指定する際には、必ずmask-positionプロパティを指定する必要があります。
mask-imageプロパティは、マスク画像を指定する際に使用します。
mask-image:noneの場合は、マスク画像を指定しないという意味ではなく、透明な黒画像として認識されます。
mask-image:url()の場合は、カッコ内にPNG画像ファイルやSVGファイルのパスなどを記述して、マスク画像を指定します。
また、カンマで区切って、マスク画像を複数指定することもできます。
.mask { mask-image: url(image.png), none; }
svg要素をmask要素のidと一緒に参照することもできます。
.mask { mask-image: url(#image); }
グラデーション画像も、mask-imageプロパティに適しています。
(グラデーションの指定方法についてはCSS【 background】2 ~ background-imageでレイヤーやグラデーションもをご参照下さい。)
.mask { mask-image: linear-gradient(black 0%, transparent 100%); }
mask-modeプロパティは、マスク画像をアルファマスクかルミナンスマスクに指定する際に使用します。
アルファマスクは、アルファチャンネルの画像です。
アルファチャンネルには、透明度の情報が各ピクセルに含まれています。
mask-mode:alpha と指定されている場合は、その画像のアルファ値をマスクの値としてマスキングします。
アルファチャンネルの例として、黒と透明の領域があるPNG形式の画像があります。
黒い領域のマスク要素(アルファ値1)に重なった領域が表示部分となり、透明の領域のマスク要素(アルファ値0)に重なった領域が隠される部分となります。
このPNG画像をアルファマスクとして使います。
上のPNG画像で、このJPG画像をマスキングします。
マスキングの結果、次のような表示となります。
ソースは次の通りです。
(CSS) div.sample{ mask-image: url(mask.png); mask-mode: alpha;} (HTML) <div class="sample"> <div><img src="image.jpg"></div> </div>
ルミナンスマスクは、画像の輝度値(ルミナンスキー)がマスク値として使われます。
アルファマスクで使ったPNG形式のマスク画像の黒い部分を白にすると、同様にマスキングできます。
上のPNG画像で同じJPG画像をマスキングすると、アルファマスクの時と同じようにマスキングできます。
ソースは次の通りです。
(CSS) div.sample2{ mask-image: url(mask2.png); mask-mode: luminance;} (HTML) <div class="sample2"> <div><img src="image.jpg"></div> </div>
mask-repeatプロパティを使用して、サイズと位置を指定したマスク画像で、繰り返しマスキングすることができます。
background-repeatプロパティと同じように指定します。
mask-repeatプロパティの値は、次の通りです。
no-repeat マスク画像を領域内で繰り返し配置しない norepeat-x マスク画像を横方向に繰り返し配置する norepeat-y マスク画像が縦方向に繰り返し配置する nospace マスク画像を領域全体に間隔を空けて繰り返し配置する noround マスク画像を指定回数、領域内で繰り返し配置する
もし領域内に収まらない場合は、収まるように画像のサイズが自動変更される
このPNG画像をマスクに使います。
mask-repeatプロパティにspaceを指定して、先ほどと同じJPG画像をマスキングすると、次のような表示となります。
ソースは次の通りです。
(CSS) div.sample3{ mask-image: url(mask3.png); mask-repeat: space;} (HTML) <div class="sample3"> <div><img src="image.jpg"></div> </div>
mask-positionプロパティは、マスク画像の位置を指定する際に使用します。
デフォルト値はcenterです。
マスク画像をビューポートの左上に置きたい場合は、mask-positionプロパティの値を「0 0」に指定します。
.mask { mask-position: 0 0; }
マスク画像をビューポートの右下に置きたい場合は、mask-positionプロパティの値を「100% 100%」に指定します。
.mask { mask-position: 100% 100%; }
mask-sizeプロパティは、マスク画像のサイズを指定する際に使用します。
background-sizeプロパティと同じ値で指定できます。
mask-sizeプロパティを50%に指定すると、マスク画像の最大幅の50%のサイズで表示されます。
.mask { mask-size: 50%; }
マスク画像を、領域内の最大サイズで表示させたい場合は、mask-sizeプロパティの値を contain に指定します。
.mask { mask-size: contain; }
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.