Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- mixinを利用して、爆速でフォント情報を入力する方法
- 他のmixinの作り方と発想
- スニペット登録の仕方
動画の解説
コードの解説
登録している mixinはこちら！
XD.ver と Figma開発.verの両方を用意したので、カンプによって適宜使い分けていただけると良いかと思います！
// =================================
// フォント情報の一括入力
// =================================
//XD Version
@mixin font($size, $height, $spacing, $weight) {
font-size: calc($size / 16 * 1rem);
line-height: calc($height / $size);
letter-spacing: calc($spacing / 1000 * 1em);
font-weight: $weight;
}
//Figma Version
@mixin font($size, $weight, $height, $spacing) {
font-size: calc($size / 16 * 1rem);
font-weight: $weight;
line-height: calc($height / $size);
letter-spacing: calc($spacing / $size * 1em);
}
ポイント (XDの場合)
以下の４つを①〜④の順に入力
@include font( ①, ②, ③, ④ );
※ ④は Bold -> 700 に変換する
下記の例だと、@include font(30, 41, 100, 700);
ポイント (Figmaの場合)
下記の例だと、@include font(80, 700, 80, 8);
スニペットに登録
下記を登録しておくと "font" と打つだけで自動出力されます！
動画でスニペット登録の方法に関しても解説しているので、登録の仕方がわからない方はぜひご覧になってください。
動画で使用しているサイトは下記になります。
"font": {
"prefix": "font",
"body": [
"@include font($1, $2, $3, $4);",
],
"description": ""
},
Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog