岩井玄貴/CSS をテンプレートにして作成

開始行:
*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.... :&size(10){参考};|[[&color(#888888){&size(12){ソフィーの... ~ //-------------------------------------------------------... **&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/g... :&size(10){参考};|[[&color(#888888){&size(12){MDN web doc... ~ ~ //-------------------------------------------------------... **&color(#121212){font-variation-settings}; //---------画像----------// #image(font-variation-settings.png); //---------説明----------// *** ''バリアブルフォントとは？'' &size(13){バリアブルフォントは幅、太さ、スタイルごとに個... ~ //---------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/g... //---------参考----------// :&size(10){参考};|[[&color(#888888){&size(12){バリアブル... [[&color(#888888){&size(12){MDN-web-docs　可変フォントガ... ~ ~ //-------------------------------------------------------... **&color(#121212){font-feature-settings}; //---------画像----------// #image(font-feature-settings.png); //---------説明----------// *** ''プロポーショナルフォントとは？'' &size(13){プロポーショナルフォント とは、文字ごとに文字幅... ~ //---------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/g... ~ :&size(10){使える日本語フォント};|&size(15){ヒラギノ、游... //---------参考----------// :&size(10){参考};|[[&color(#888888){&size(12){簡単！CSSで... ~ #hr

終了行:
*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.... :&size(10){参考};|[[&color(#888888){&size(12){ソフィーの... ~ //-------------------------------------------------------... **&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/g... :&size(10){参考};|[[&color(#888888){&size(12){MDN web doc... ~ ~ //-------------------------------------------------------... **&color(#121212){font-variation-settings}; //---------画像----------// #image(font-variation-settings.png); //---------説明----------// *** ''バリアブルフォントとは？'' &size(13){バリアブルフォントは幅、太さ、スタイルごとに個... ~ //---------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/g... //---------参考----------// :&size(10){参考};|[[&color(#888888){&size(12){バリアブル... [[&color(#888888){&size(12){MDN-web-docs　可変フォントガ... ~ ~ //-------------------------------------------------------... **&color(#121212){font-feature-settings}; //---------画像----------// #image(font-feature-settings.png); //---------説明----------// *** ''プロポーショナルフォントとは？'' &size(13){プロポーショナルフォント とは、文字ごとに文字幅... ~ //---------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/g... ~ :&size(10){使える日本語フォント};|&size(15){ヒラギノ、游... //---------参考----------// :&size(10){参考};|[[&color(#888888){&size(12){簡単！CSSで... ~ #hr

ページ名: