VW to PX 変換ツール

// _functions.scss
@function vw($pixels, $base: 1920) {
  @return calc($pixels / $base * 100vw);
}

// レスポンシブタイポグラフィ関数
@function fluid-vw(
  $min-px,
  $max-px,
  $min-vw: 375,
  $max-vw: 1920
) {
  $min-rem: calc($min-px / 16);
  $max-rem: calc($max-px / 16);

  @return clamp(
    #{$min-rem}rem,
    calc($min-rem * 1rem +
      ($max-rem - $min-rem) *
      (100vw - #{$min-vw}px) /
      ($max-vw - $min-vw)),
    #{$max-rem}rem
  );
}

// 使用例
.heading {
  font-size: fluid-vw(24, 48);
  // 24px〜48pxの間で流動的に変化
  margin-bottom: vw(32);
  // 1920pxベースで32pxに相当
}

// プロジェクト構造
styles/
├── abstracts/
│   ├── _functions.scss    // vw計算関数
│   ├── _mixins.scss        // レスポンシブmixin
│   └── _variables.scss     // ブレイクポイント定義
├── base/
│   ├── _reset.scss
│   └── _typography.scss    // 流動的タイポグラフィ
├── components/
│   ├── _button.scss
│   └── _card.scss
└── main.scss

// _variables.scss
$breakpoints: (
  'mobile': 375px,
  'tablet': 768px,
  'laptop': 1024px,
  'desktop': 1920px
);

$base-viewport: 1920px; // デザイン基準幅

// _typography.scss
@use '../abstracts/functions' as *;

h1 {
  font-size: fluid-vw(32, 64);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* 日本語Webフォント基本設定 */
body {
  font-family:
    "游ゴシック体",
    "Yu Gothic",
    YuGothic,
    "ヒラギノ角ゴシック Pro",
    "Hiragino Kaku Gothic Pro",
    "メイリオ",
    Meiryo,
    sans-serif;

  /* viewport単位での流動サイズ */
  font-size: clamp(
    14px,           /* モバイル最小 */
    calc(0.875rem + 0.25vw),
    18px            /* デスクトップ最大 */
  );

  line-height: 1.8;  /* 日本語に最適 */
  letter-spacing: 0.05em; /* 可読性向上 */

  /* Retina対応のアンチエイリアス */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 見出しの設定 */
h1, h2, h3 {
  font-family:
    "游ゴシック体",
    "Yu Gothic",
    YuGothic,
    "ヒラギノ角ゴシック Pro",
    sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

h1 {
  font-size: clamp(
    28px,
    calc(1.75rem + 1.5vw),
    56px
  );
}

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ],
  "plugins": [
    "stylelint-declaration-strict-value"
  ],
  "rules": {
    // vw単位の使用制限
    "declaration-property-unit-allowed-list": {
      "font-size": ["rem", "em", "px"],
      "/^padding/": ["rem", "em", "px"],
      "/^margin/": ["rem", "em", "px", "vw"],
      "width": ["px", "%", "vw"],
      "height": ["px", "%", "vh"]
    },

    // clamp()の使用を推奨
    "function-disallowed-list": [],

    // viewport単位は境界付きで使用
    "scale-unlimited/declaration-strict-value": [
      ["/width$/", "/height$/"],
      {
        "ignoreValues": [
          "auto",
          "inherit",
          "/^clamp/",
          "/^calc/"
        ]
      }
    ]
  }
}

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'prettier'
  ],
  plugins: [
    '@typescript-eslint',
    'react',
    'prettier'
  ],
  rules: {
    'prettier/prettier': 'error',

    // CSS-in-JSでの型チェック
    '@typescript-eslint/explicit-function-return-type':
      'off',
    '@typescript-eslint/no-explicit-any': 'error',
  }
};

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:css": "stylelint '**/*.{css,scss}'",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "format": "prettier --write '**/*.{ts,tsx,css,scss}'"
  }
}