表題の件ですがイイ感じに見えているかどうかはあくまでも個人の主観でしかないのでアレですが…前回『アイコン色をフワっと可変させる件＠svg-css:hover』という記事を書いた際にさり気なく…何気なく…とてもサラっと【mask-image】に触れました
それこそ『何気にこの子メッチャ使える子です！』とだけ書いて具体的な使い方や解説は一切しないという無法者ぶりでしたw
まぁあくまでも前回記事のコアはアイコン色をイイ感じに可変させよう！だったので細かい技術にはあえて触れなかったという『言い訳』は成り立ちますが…一応責任感のある一社会人として投げっぱなしは良くないと思い【mask-image】に関する記事を書こうかとw
ですが…上記リンク内を見ていただければ分かる通り…
ぶっちゃけメッチャ広くて深くて更に細かくて別の専門知識が必要なレベルな難しさですw
あくまでも私の所感ですが…端から端までガッチリ読み込んだとしてもパーフェクトに習得することは不可能だと思います…無理ゲーです( ꒪⌓꒪)
この記事で細かく1つ1つ丁寧に解説すると【3m】ぐらいの記事になりそうですし『だったら公式 MDN Web Docs 読むわ』って声が聞こえてくる気がしないでもないです
※記事の単位としてメートルが適正かどうかは定かではありません
そもそも毎日イジっている自らが所有するスマホですら機能の5％程度しか使えていないような私如きがすべてをわかろうとするなんて傲慢以外の何物でもないです！
※私は『全領域異常解決室』の映画化が嬉しくてたまらない人です
それでイロイロと考えてみたのですがプロパティ・機能・ルールすべてを覚えてゼロからガリガリと書けるようになる必要はなくって結局『こんなこともできるんだね』ってことだけボンヤリと覚えておけば何かを表現する際のアイディアとして活きるのではないかと
そしてその実装時に該当部分だけでもガッツリと向き合うスタンスで良い気がします
で…今回はその1つの実践的アイディアとして実装したものを例にザックリとした解説をしようかと
決して逃げたワケではありません…
単色楕円形に沿って配置されたテキストとなります
一昔前であればまるっと画像処理するようなレイアウトですが今なら普通に css のみで対応できます
しかも htmlソースコードを覗いていただければ分かる通り【pタグ】のみで実装されています！
これって意外と大きいですよね！
デザイン・レイアウトを実現するためだけに html文章構造的に必要ないであろう【div・spanタグ】などを多用するのは『美しいコードを書きたい！』って常日頃考えているマークアッパーとしては心苦しいので…
楕円形表示部分がどうように実装しているのか…該当部分のコードが下記です
p{
&:before{
content:'';
display:block;
float:left;
width:100%;
height:100%;
background:darkslategray;
mask-image:radial-gradient(
ellipse,
black 70%,
transparent 70%
);
mask-size:75% 100%;
mask-position:-150% 0;
mask-repeat:no-repeat;
shape-outside:ellipse(35% 50% at 1em 50%);
}
}分かる方には分かると思いますが…
本来はこの場合は【mask-image】を使う必要は【1mm】もないのですw
記事の流れ的に無理やり使っています…そのおかげで結構な苦労をしてますww
Web業界に蔓延りまくっている技術的な無駄…本末転倒というヤーーツですwww
基本的には上記コードの9～16行目で『単色楕円形』を表示させていて5・17行目でテキストの回り込みを設定しています…ザックリと下記のような感じですね
まぁ1つ1つ細かく解説するほどのことはしていませんね…
ここであまり馴染みがないのは【shape-outside】ぐらいなものでしょう
背景などを指定する時と同じように【関数値・url・gradient】と幅広く指定することが出来ますので用途に合わせて意外と融通の利く使い方が出来ます
画像に放射状グラデーションをかけて、それに沿うようにテキスト配置しています
一昔前であればまるっと画像処理するようなレイアウトですが今なら普通に css のみで対応できます
しかも htmlソースコードを覗いていただければ分かる通り【figure・figcaptionタグ】のみで実装されています！
これって意外と大きいですよね！
デザイン・レイアウトを実現するためだけに html文章構造的に必要ないであろう【div・spanタグ】などを多用するのは『美しいコードを書きたい！』って常日頃考えているマークアッパーとしては心苦しいので…
あれ？デジャヴかしら？さっきも書いた気が…
画像放射状グラデーション表示部分がどうように実装しているのか…該当部分のコードが下記です
figure{
img{
width:100%;
object-fit:cover;
float:left;
mask-image:radial-gradient(
circle 860px at 0 -100px,
white 25%,
transparent 88%,
transparent
);
shape-outside:radial-gradient(
circle 840px at 0 0,
white 20%,
transparent 70%,
transparent
);
shape-image-threshold:.25;
}
}比較しやすいように書き方的には単色マスク例に合わせましたが実装方法・考え方自体は全く同じです
基本的には上記コードの6～11行目で『画像放射状グラデーション』を表示させていて5・12～18行目でテキストの回り込みを設定しています…ザックリと下記のような感じですね
なお【shape-outside】は直感的に調整具合が理解しやすいように【mask-image】に合わせるように書いています
まぁさきほど単色マスク例にて解説しているものと大きく違いはないので『上に同じ』ですねw
ただ実装方法・考え方は同じであっても単色マスクか画像放射状グラデーションかで大きな見た目の差があります…要するに同じ実装方法でもアイディア次第でイロイロな使い方が出来る！ということに他なりません
折角身に付いたスキルや天から降りてきたアイディアは柔らかい考え方でもっと応用しまくってイロイロな場面で使っていこうぜ！って話です( •ᴗ• )⸝
いかがでしょうか？
カード表示としての良し悪しは別として持ち駒・アイディアとして持っておくには十分な気はします
カードレイアウト自体よく使われる手法ですし画像・テキストをセットで表示することは実案件でもかなり機会が多いと思います
その際に『画像：右／テキスト：左』とか『画像：上／テキスト：下(だけど画像にチョイ被せ)』などと様々なレイアウトを考慮…もちろんその時その時の条件や仕様によって限られたレイアウトをせざる得ないこともあるでしょうがコーダー目線では『実装の引き出しがない』とか、デザイナー目線では『こういう実装が出来るとは思っていない』ことによって表現自体が限られてしまうのはプロとして少々情けないと感じるので一見無駄に見える技術や実装であってもドコで役に立つか分からないので武器として持っておきましょう
そして何よりも大切なことはコーダーからすれば『こんな実装できまっせ』とか、デザイナー・ディレクターからは『こういう見せ方・デザインをしたいんだけど実装出来ます？』などのような情報共有・コミュニケーションを常日頃密に話せるようなチーム作りだと感じます
Webの世界・技術は進歩し続けていますし、見せ方・デザインなどのトレンドも日々移り変ります！
それに応じてエンジニアも日々勉強し続けています！
そしてデザイナー・ディレクターも日々トレンドにアンテナを張っています！
日々努力し続けている者同士がチームとしてお互いの武器を共有し合えば更なる強い敵をも倒せると思います！…んっナニと戦っているんだ？w
