LogoMark.png

岩井玄貴/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