- 追加された行はこの色です。
- 削除された行はこの色です。
- 岩井玄貴/CSS へ行く。
#author("2022-07-20T00:44:41+09:00;2022-07-16T22:54:47+09:00","default:member","member")
*CSSのプロパティ
//---------------------------------------------------------------//
**&color(#121212){mask-image};
//---------画像----------//
//#image(text-stroke.png);
//---------説明----------//
*** ''mask-image''
&size(13){CSSでのマスクのやり方};
// マスクにする画像
-webkit-mask-image: url(./mask.png);
// 輝度とアルファマスクのどちらで扱うかを設定
-webkit-mask-mode: alpha;
// マスク画像をどのように繰り返すか
-webkit-mask-repeat: no-repeat;
// マスク画像の寸法
-webkit-mask-size: 50% 50%;
//マスク位置レイヤーに対する初期位置
-webkit-mask-position: center center;
//---------DEMO----------//
[[&color(#888888){&size(15){DEMO};};>https://codesandbox.io/s/sparkling-sun-79wmwq?file=/index.html]]
:&size(10){参考};|[[&color(#888888){&size(12){ソフィーのアトリエ};};>https://www.gamecity.ne.jp/atelier/sophie2/sophie.html]]
~
//---------------------------------------------------------------//
**&color(#121212){text-stroke text-fill-color};
//---------画像----------//
#image(text-stroke.png);
//---------説明----------//
*** ''text-stroke''
&size(13){テキスト文字の輪郭線の幅と色を指定します。};
&color(#eeaaaa){&size(10){※この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。};};
*** ''text-fill-color''
&size(13){テキストの文字の塗りつぶしの色を指定します。};
&color(#eeaaaa){&size(10){※この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。};};
~
//---------CODE----------//
***「text-fill-color」「text-fill-color」でテキスト文字の輪郭線の幅と色と塗りつぶしの色を指定します
// 塗りつぶし
-webkit-text-fill-color: red;
// 輪郭線の幅と色
-webkit-text-stroke: 4px navy;
//---------DEMO----------//
[[&color(#888888){&size(15){DEMO};};>https://codepen.io/genkiiwai/pen/PoRWGKQ]]
:&size(10){参考};|[[&color(#888888){&size(12){MDN web docs};};>https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-text-stroke]]
~
~
//---------------------------------------------------------------//
**&color(#121212){font-variation-settings};
//---------画像----------//
#image(font-variation-settings.png);
//---------説明----------//
*** ''バリアブルフォントとは?''
&size(13){バリアブルフォントは幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の @font-face 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。};
~
//---------CODE----------//
***「font-variation-settings」で文字の太さ、幅、イタリック、傾きの調整
// 太さ
font-variation-settings: "wght" 50;
// 幅
font-variation-settings: "wdth" 50;
// イタリック
font-variation-settings: "ital" 50;
// 傾き
font-variation-settings: "slnt" 50;
//オプティカルサイズ
font-variation-settings: "opsz" 50;
//---------DEMO----------//
[[&color(#888888){&size(15){DEMO};};>https://codepen.io/genkiiwai/pen/WNzwLQe]]
//---------参考----------//
:&size(10){参考};|[[&color(#888888){&size(12){バリアブルフォントをWeb上で触ってみる};};>https://www.evoworx.co.jp/blog/variablefont/]]
[[&color(#888888){&size(12){MDN-web-docs 可変フォントガイド};};>https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide]]
~
~
//---------------------------------------------------------------//
**&color(#121212){font-feature-settings};
//---------画像----------//
#image(font-feature-settings.png);
//---------説明----------//
*** ''プロポーショナルフォントとは?''
&size(13){プロポーショナルフォント とは、文字ごとに文字幅が異なるフォントのこと。日本語では可変幅フォントともいう。 伝統的な活版印刷で用いる活字については、例えばラテン文字「i」とラテン文字「w」では文字の幅が異なり、ただ並べるだけで読みやすい単語が印字できるようになっている。これがプロポーショナルフォントである。};
~
//---------CODE----------//
***「font-feature-settings」で文字間隔調整
// プロポーショナルメトリクス
font-feature-settings: "palt";
// 約物はそのままで文字詰め。行頭全角スペースも詰まる
font-feature-settings: "pwid";
// かなのみ文字詰め
font-feature-settings: "pkna";
//---------DEMO----------//
[[&color(#888888){&size(15){DEMO};};>https://codepen.io/genkiiwai/pen/mdxPapg]]
~
:&size(10){使える日本語フォント};|&size(15){ヒラギノ、游ゴシック、Noto Sans JP など};
//---------参考----------//
:&size(10){参考};|[[&color(#888888){&size(12){簡単!CSSで日本語フォントの文字間隔調整【font-feature-settings】};};>https://liginc.co.jp/595446]][[&color(#888888){&size(12){Wikipedia プロポーショナルフォント};};>https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88]]
~
#hr