ホームページ制作マークアップ | 東京のホームページ制作・Web制作会社フライング・ハイ・ワークス

Nuxt3でuseAsyncDataを自動的に再フェッチさせる

y_arai — Thu, 28 Aug 2025 01:13:32 +0000

環境

Nuxt3（3.17.4）
TypeScript
SSG

課題

動的ページのパンくずリストを各ページのslugなどをキーにしてAPIからデータを取得、それを基に生成するようなやり方で実装していました。これに、「ページ遷移時にちゃんと切り替わってほしい」「SSGビルドした後はAPIリクエストが飛ばないようにしたい」という要件があったのですが、、

const { data: breadCrumbs } = await useAsyncData(
  'breadcrumbs',
  async () => await getBreadCrumbList(),
);

watch(
  () => route.path,
  async ()=> {
    breadCrumbs.value = await getBreadCrumbList();
  },

脳直でルートをwatchしてました。良い子は真似しないでください。
これだと、SSGビルド後もページ遷移時にAPIリクエストが飛んでしまい、よくありません watchはクライアントサイドで実行されるので当たり前ですよねえ。。。。。

解決策

const { data: breadCrumbs } = await useAsyncData(
  () => `breadcrumbs-${route.fullPath}`,
  () => getBreadCrumbList(),
);

キーを動的にしたことで、ルートが変わると自動的にデータが再取得されるようになりました
SSGビルド後はビルド時のキャッシュが使われるため、実行時に新たなAPIリクエストは発生しません

参考

ちゃんと公式のドキュメントに目を通しましょう…（自戒）
https://nuxt.com/docs/3.x/api/composables/use-async-data#reactive-keys

The post Nuxt3でuseAsyncDataを自動的に再フェッチさせる first appeared on FHWノート.

Scss/flocssで自作ユーティリティー color / background-color編

松田治人 — Sun, 20 Oct 2024 07:55:54 +0000

u-bg-grayやu-c-primaryなど「u-c」及び「u-bg」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

カラー名で設定できること

前提

foundation/variable

$colors: (
  primary: #F48C40,
  danger: #E88E7D,
  info: #00B187,
  secondary: #E88E7D,
  success: #00B187,
  warning: #ffc107,
  black: #000000,
  white: #ffffff,
  gray: #CCCCCC,
);

使用法

color設定

.u-c-{$colors}

background-color設定

.u-bg-{$colors}

パラメータ

{$colors}は、上記前提を参照

使用例


・・・

他のユーティリティーと組み合わせ上記のようなclassを設定すると下記のようになります。上記classは視認性のため、abc順で記載しています

u-b-primary：div要素が1pxの#F48C40のボーダーで囲まれる
u-bg-gray：background-colorが#CCCCCC
u-c-primary：div要素内のテキストの色が#F48C40
u-mt-50：margin-topが5rem
u-mx-auto：margin-inlineがauto
u-w-80p：widthが80%
u-py-40：padding-blockが4rem

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

color設定

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Color
// -----------------------------------------------------------------
.u-c {
  @each $key, $color in $colors {
    &-#{""+$key} {
      color: $color !important;
    }
  }
}

background-color設定

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Background Color
// -----------------------------------------------------------------
.u-bg {
  @each $key, $color in $colors {
    &-#{""+$key} {
      background-color: $color !important;
    }
  }
}

解説

今回の設定はそれほど複雑ではないので、公開のみとさせていただきます

まとめ

以上でcolor及びbackground-colorのユーティリティーの完成となります

全設定が吐き出されてしまうと膨大な量になってしまいますが、弊社では、vite＋@fullhuman/postcss-purgecssなどを使って、余計なclassは入らないようにしていますので、そういった工夫も必要になるかと思います

コーディングの省力化に貢献できれば幸いです

文責：フライング・ハイ・ワークス代表松田治人（まつだはるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによる東京でWebシステムの制作やホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・Webシステム制作会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/flocssで自作ユーティリティー color / background-color編 first appeared on FHWノート.

Scss/flocssで自作ユーティリティー width編

松田治人 — Sun, 20 Oct 2024 07:48:11 +0000

u-w-fullやu-w-50pなど「u-w」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

media queryのサイズによる階層的な適用が確実にされること
オリジナル名称の設定を作成すること
100% / fit-content設定ができること
ピクセル単位で設定ができること
％で設定ができること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$widths: (
  sm: (100, 98, 96),
  md: (150, 148, 146),
  lg: (200, 198, 196),
);

foundation/mixin

@use 'sass:map';
@use 'sass:math';

@function Rem($size) {
  @return math.div($size, 10) + rem;
}

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

オリジナル名称の設定

.u-w-{$widths}

100%設定

.u-w-full
.u-w-{$break-points}-full

fit-content設定

.u-w-fit
.u-w-{$break-points}-fit

ピクセル設定

.u-w-{数値}
.u-w-{$break-points}-{数値}

%設定

.u-w-{%数値}p
.u-w-{$break-points}-{%数値}p

パラメータ

{数値} … 0~1000

{%数値} … 1～99

{$widths}は、上記前提を参照

使用例


・・・

上記では、画面幅により下記のようになります

1025px以上：widthが50%
821～1024px：widthが80%
820px以下：widthが100%

上記では、画面幅により下記のようになります

1025px以上：widthが10rem
821～1024px：widthが9.8rem
820px以下：widthが9.6rem

$widths: (
  sm: (100, 98, 96),
  md: (150, 148, 146),
  lg: (200, 198, 196),
);

$widthsの設定は、この名称は自由に作成できるため、例えば、button-submitやbutton-returnなどの設定を作成することで、複数の幅設定も作成できます。

break pointのmdだけ100％にしたい場合は、試していませんが、上記で書き順的には行けると思います

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

@use 'sass:map';

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

.u-w {
  @each $breakpoint, $query in $break-points {

    // $widthsのkey名で設定
    @each $name, $values in $widths {
      $num: index(map.keys($break-points), $breakpoint);
      &-#{$name} {
        width: #{Rem(nth($values, $num))} !important;
      }
    }

    // 100% / fit
    @include mq($breakpoint) {
      @if $breakpoint=='all' {
        &-full {
          width: 100% !important;
        }
        &-fit {
          width: fit-content !important;
        }
      } @else {
        &-#{$breakpoint}-full {
          width: 100% !important;
        }
        &-#{$breakpoint}-fit {
          width: fit-content !important;
        }
      }
    }

    // 0～100rem
    @for $i from 0 through 1000 {
      @if $breakpoint=='all' {
        &-#{$i} {
          width: Rem($i) !important;
        }
      } @else {
        &-#{$breakpoint}-#{$i} {
          width: Rem($i) !important;
        }
      }
    }

    // 1～99%
    @for $i from 1 through 99 {
      @if $breakpoint=='all' {
        &-#{$i+"p"} {
          width: #{$i+"%"} !important;
        }
      } @else {
        &-#{$breakpoint}-#{$i+"p"} {
          width: #{$i+"%"} !important;
        }
      }
    }
  }
}

解説

上記最終系を一つずつ見ていきます。

ループ設定

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

上記$break-pointsをループして展開していきます

.u-w {
  @each $breakpoint, $query in $break-points {
・・・
}

展開されるイメージは下記の通りです

.u-w {
 // all
 // lg
　@media 'screen and (max-width: 1024px)' {
 }
 // md
　@media 'screen and (max-width: 820px)' {
 }
}

最初の$breakpointは「all」となりますが、下記mixinでは、allの場合は、特に処理を行っていませんので空になります

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

ここでのポイントは、「$break-points」を大きいサイズから設定していことです

詳細クラスの設定

オリジナル名称の設定

配列「$font-sizes」を展開していきます

$widths: (
  sm: (100, 98, 96),
  md: (150, 148, 146),
  lg: (200, 198, 196),
);

$widthsにある各変数のカッコ内の数字は、$break-pointsの数と同じ数設定しています

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

.u-w {
  @each $breakpoint, $query in $break-points {

    @each $name, $values in $widths {
      $num: index(map.keys($break-points), $breakpoint);
      &-#{$name} {
        width: #{Rem(nth($values, $num))} !important;
      }
    }

}
}

上記ブロックの真ん中の部分を解説していきます

@each $name, $values in $widths {

$widthsをeach文で展開していますが、ここでは、最初は「$name」に「sm」が、「$values」には「(100, 98, 96)」が入ることになります

$num: index(map.keys($break-points), $breakpoint);

map.keysで$break-pointsのkeyだけの配列を作成しています。結果は「all, lg, md」となります

そしてindex関数で、「all, lg, md」の中でall（二つ目のループで最初の$breakpointは「all」）の位置を取得しています。ここでは「1」が$numとして設定されます

&-#{$name} {

「&-#{$name} {」は、$marginsの最初のキーのsmを使用して「&-sm {」となり、結果として「.u-w-sm」が作成されます

width: #{Rem(nth($values, $num))} !important;

「nth($values, $num)」では、nth関数で、$values、つまり「(14, 13, 12)」のうち、$numの値の順番（最初は「1」）にある値を取得し、Rem関数でremの値に変換しています

結果として「width: 20rem !important;」という記述が作成されます

下記が展開イメージとなります

// all
.u-w-sm {
 width: 10rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-w-sm {
  width: 9.8rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-w-sm {
  width: 9.6rem !important;
 }
}
・・・

100% / fit-content 設定

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

.u-w {
  @each $breakpoint, $query in $break-points {

    @include mq($breakpoint) {
      @if $breakpoint=='all' {
        &-full {
          width: 100% !important;
        }
        &-fit {
          width: fit-content !important;
        }
      } @else {
        &-#{$breakpoint}-full {
          width: 100% !important;
        }
        &-#{$breakpoint}-fit {
          width: fit-content !important;
        }
      }
    }

}
}

下記が展開イメージとなります

// all
.u-w-full {
 width: 100% !important;
}
.u-w-fit {
 width: fit-content !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-w-lg-full {
  width: 100% !important;
 }
 .u-w-lg-fit {
  width: fit-content !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-w-md-full {
  width: 100% !important;
 }
 .u-w-md-fit {
  width: fit-content !important;
 }
}

ピクセルごとの設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

.u-w {
  @each $breakpoint, $query in $break-points {

    @for $i from 0 through 1000 {
      @if $breakpoint=='all' {
        &-#{$i} {
          width: Rem($i) !important;
        }
      } @else {
        &-#{$breakpoint}-#{$i} {
          width: Rem($i) !important;
        }
      }
    }

}
}

今回は、10～1000の数値で設定しています

@for $i from 1 through 1000 {

「@for $i from 1 through 1000」が0～1000までの数値をループし$iに1から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

下記が展開イメージです

// all
.u-w-1 {
 width: 0.1rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-w-lg-1 {
   width: 0.1rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-md-1 {
   width: 0.1rem !important;
 }
}
・・・

%設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

.u-w {
  @each $breakpoint, $query in $break-points {

    @for $i from 1 through 99 {
      @if $breakpoint=='all' {
        &-#{$i+"p"} {
          width: #{$i+"%"} !important;
        }
      } @else {
        &-#{$breakpoint}-#{$i+"p"} {
          width: #{$i+"%"} !important;
        }
      }
    }

}
}

今回は、1～99の数値で設定しています

@for $i from 1 through 99 {

「@for $i from 1 through 1000」が0～1000までの数値をループし$iに1から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

下記が展開イメージです

// all
.u-w-1p {
 width: 1% !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-w-lg-1p {
   width: 1% !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-md-1p {
   width: 1% !important;
 }
}
・・・

まとめ

以上でwidthのユーティリティーの完成となります

コーディングの省力化に貢献できれば幸いです

フライング・ハイ・ワークスの紹介

実績

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/flocssで自作ユーティリティー width編 first appeared on FHWノート.

Scss/flocssで自作ユーティリティー border編

松田治人 — Sun, 20 Oct 2024 07:20:34 +0000

u-b-grayやu-bt-primary-1など「u-b」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

全体及び各辺のボーダーを設定できること
ボーダーサイズ及びボーダーカラーの設定ができること
border: noneでは、media queryのサイズによる階層的な適用が確実にされること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$colors: (
  primary: #F48C40,
  danger: #E88E7D,
  info: #00B187,
  secondary: #E88E7D,
  success: #00B187,
  warning: #ffc107,
  black: #000000,
  white: #ffffff,
  gray: #CCCCCC,
);

foundation/mixin

@use 'sass:map';

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

全囲い

.u-b-{$colors}
.u-b-{$colors}-{サイズ}

一部

.u-{方向種類}-{$colors}
.u-{方向種類}-{$colors}-{サイズ}

非表示

.u-b-none
.u-b-{$break-points}-none

パラメータ

{サイズ} … 2~10（px相当）、指定ない場合1px

{方向種類} … bt: top / br: right / bb: bottom / bl: left

{color名}は、上記前提を参照

使用例


・・・

上記では、画面幅により下記のようになります

1025px以上：「u-b-primary」で色が#F48C40で、1pxのボーダーで囲われます
821～1024px：「u-b-lg-none」でborderは非表示になります
820px以下：上記継承してそのまま非表示です

下記で、色名と色は自由に設定できます

$colors: (
  primary: #F48C40,
  danger: #E88E7D,
  info: #00B187,
  secondary: #E88E7D,
  success: #00B187,
  warning: #ffc107,
  black: #000000,
  white: #ffffff,
  gray: #CCCCCC,
);

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Border
// -----------------------------------------------------------------
$array: (b: '', bt: 'top', br: 'right', bb: 'bottom', bl: 'left');
@each $key, $dir in $array {
  .u-#{$key} {
    @if $key == 'b' {
      // 囲み
      @each $name, $color in $colors {
        &-#{""+$name} {
          @for $i from 1 through 10 {
            @if $i==1 {
              border: 1px solid $color !important;
            } @else {
              &-#{$i} {
                border: #{$i}px solid $color !important;
              }
            }
          }
        }
      }
    } @else {
      // 一部
      @each $name, $color in $colors {
        &-#{""+$name} {
          @for $i from 1 through 10 {
            @if $i==1 {
              border-#{$dir}: 1px solid $color !important;
            } @else {
              &-#{$i} {
                border-#{$dir}: #{$i}px solid $color !important;
              }
            }
          }
        }
      }
    }
  }
}
.u-b-none {
  // 削除
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @if $breakpoint=='all' {
        border: none !important;
      } @else {
        &-#{$breakpoint} {
          border: none !important;
        }
      }
    }
  }
}

解説

上記最終系を一つずつ見ていきます

ループ設定

$array: (b: '', bt: 'top', br: 'right', bb: 'bottom', bl: 'left');

上記$arrayをループして展開していきます

@each $key, $dir in $array {
  .u-#{$key} {
    @if $key == 'b' {
     ・・・
    } @else {
     ・・・
    }
  }
}

$keyが「b」の場合とそれ以外で設定を変えています

展開されるイメージは下記の通りです

.u-b {}
.u-bt {}
.u-br {}
・・・

詳細クラスの設定

ボーダー

@each $key, $dir in $array {
  .u-#{$key} {

    @if $key == 'b' {
      // 囲み
      @each $name, $color in $colors {
        &-#{""+$name} {
          @for $i from 1 through 10 {
            @if $i==1 {
              border: 1px solid $color !important;
            } @else {
              &-#{$i} {
                border: #{$i}px solid $color !important;
              }
            }
          }
        }
      }
    } @else {
      // 一部
      @each $name, $color in $colors {
        &-#{""+$name} {
          @for $i from 1 through 10 {
            @if $i==1 {
              border-#{$dir}: 1px solid $color !important;
            } @else {
              &-#{$i} {
                border-#{$dir}: #{$i}px solid $color !important;
              }
            }
          }
        }
      }
    }

}
}

上記ブロックの真ん中の部分を解説していきます

「b」の場合 / 全囲い

// 囲み
@each $name, $color in $colors {
 &-#{""+$name} {
  @for $i from 1 through 10 {
   @if $i==1 {
    border: 1px solid $color !important;
   } @else {
    &-#{$i} {
     border: #{$i}px solid $color !important;
    }
   }
  }
 }
}

全囲いの設定となります

@each $name, $color in $colors {
 &-#{""+$name} {

上記で下記の各色設定を展開し、「.u-b-primary」のようにclassを作成しています

$colors: (
  primary: #F48C40,
  danger: #E88E7D,
  info: #00B187,
  secondary: #E88E7D,
  success: #00B187,
  warning: #ffc107,
  black: #000000,
  white: #ffffff,
  gray: #CCCCCC,
);

下記で1pxをデフォルトとして10pxまでの幅に対応できるclassを作成しています

@for $i from 1 through 10 {
 @if $i==1 {
  border: 1px solid $color !important;
 } @else {
  &-#{$i} {
   border: #{$i}px solid $color !important;
  }
 }
}

下記が展開イメージとなります

.u-b-primary {
 border: 1px solid #F48C40 !important;
}
.u-b-primary-2 {
 border: 2px solid #F48C40 !important;
}
.u-b-primary-3 {
 border: 3px solid #F48C40 !important;
}
・・・
.u-b-gray {
 border: 1px solid #CCCCCC !important;
}
.u-b-gray-2 {
 border: 2px solid #CCCCCC !important;
}
.u-b-gray-3 {
 border: 3px solid #CCCCCC !important;
}
・・・

「b」以外の場合 / 一部

各辺の設定になります

下記が展開イメージとなります

.u-b-bt-primary {
 border-top: 1px solid #F48C40 !important;
}
.u-b-bt-primary-2 {
 border-top: 2px solid #F48C40 !important;
}
.u-b-bt-primary-3 {
 border-top: 3px solid #F48C40 !important;
}
・・・
.u-b-bt-gray {
 border-top: 1px solid #CCCCCC !important;
}
.u-b-bt-gray-2 {
 border-top: 2px solid #CCCCCC !important;
}
.u-b-bt-gray-3 {
 border-top: 3px solid #CCCCCC !important;
}
・・・

非表示

ボーダーをすべて非表示にする設定です

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

上記$break-pointsをループしてborder: none設定をしています

.u-b-none {
  // 削除
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @if $breakpoint=='all' {
        border: none !important;
      } @else {
        &-#{$breakpoint} {
          border: none !important;
        }
      }
    }
  }
}

下記が展開イメージとなります

.u-b-none {
 border: none
}
.u-b-none-lg {
 border: none
}
.u-b-none-md {
 border: none
}

まとめ

以上でborderのユーティリティーの完成となります

コーディングの省力化に貢献できれば幸いです

フライング・ハイ・ワークスの紹介

実績

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/flocssで自作ユーティリティー border編 first appeared on FHWノート.

Scss/flocssで自作ユーティリティー font-size / font-weight編

松田治人 — Sun, 20 Oct 2024 06:36:27 +0000

font-sizeでは、u-fs-20やu-fs-md-24など「u-fs」、font-weightではu-fw-boldやu-fw-mediumなど「u-fw」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

media queryのサイズによる階層的な適用が確実にされること
font-size
- オリジナル名称の設定を作成すること
- ピクセルごとの設定を作成すること
font-weight
- weight名で設定できること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);

foundation/mixin

@use 'sass:map';
@use 'sass:math';

@function Rem($size) {
  @return math.div($size, 10) + rem;
}

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

font-size

オリジナル名称の設定

.u-fs-{$font-sizes}

ピクセルごとの設定

.u-fs-{数値}
.u-fs-{$break-points}-{数値}

パラメータ

{数値} … 10～32

{$font-sizes}は、上記前提を参照

font-weight

オリジナル名称の設定

.u-fw-{重さ}
.u-fw-{$break-points}-{重さ}

パラメータ

{重さ} … 上記前提の$font-weights

使用例


・・・

上記では、画面幅により下記のようになります

1025px以上：「u-fs-sm」でfont-sizeが1.4rem / 「u-fw-regular」でfont-weitが400
821～1024px：「u-fs-sm」でfont-sizeが1.3rem / 「u-fw-lg-bold」でfont-weitが700
820px以下：「u-fs-sm」でfont-sizeが1.2rem / 「u-fw-md-medium」でfont-weitが500

$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);

$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

上記$font-sizesの設定は、この名称は自由に作成できるため、例えば、h1variationやh2variationなどの設定を作成することで、複数の文字設定も作成できます。

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

font-size

@use 'sass:map';

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Font-Size
// -----------------------------------------------------------------
.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      // $font-sizesのkey名で設定
      @each $name, $values in $font-sizes {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          font-size: #{Rem(nth($values, $num))} !important;
        }
      }

      @for $i from 10 through 32 {
        @if $breakpoint=='all' {
          &-#{$i} {
            font-size: Rem($i) !important;
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            font-size: Rem($i) !important;
          }
        }
      }
    }
  }
}

font-weight

// 上記前提が記載されたファイル
@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Font-Weight
// -----------------------------------------------------------------
.u-fw {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $key, $weight in $font_weights {
        @if $breakpoint=='all' {
          &-#{""+$key} {
            font-weight: $weight !important;
          }
        } @else {
          &-#{$breakpoint}-#{""+$key} {
            font-weight: $weight !important;
          }
        }
      }

    }
  }
}

解説

上記最終系を一つずつ見ていきます。下記はfont-size及びfont-weightで同じです

ループ設定

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

上記$break-pointsをループして展開していきます（font-weightの場合は、u-fsの部分はu-fwとなります。以下同様）

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
・・・
  }
}

展開されるイメージは下記の通りです

.u-fs {
 // all
 // lg
　@media 'screen and (max-width: 1024px)' {
 }
 // md
　@media 'screen and (max-width: 820px)' {
 }
}

最初の$breakpointは「all」となりますが、下記mixinでは、allの場合は、特に処理を行っていませんので空になります

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

ここでのポイントは、「$break-points」を大きいサイズから設定していことです

詳細クラスの設定

font-size

オリジナル名称の設定

配列「$font-sizes」を展開していきます

$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

$font-sizesにある各変数のカッコ内の数字は、$break-pointsの数と同じ数設定しています

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $name, $values in $font-sizes {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          font-size: #{Rem(nth($values, $num))} !important;
        }
      }

    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $name, $values in $font-sizes {

$font-sizesをeach文で展開していますが、ここでは、最初は「$name」に「sm」が、「$values」には「(14, 13, 12)」が入ることになります

$num: index(map.keys($break-points), $breakpoint);

map.keysで$break-pointsのkeyだけの配列を作成しています。結果は「all, lg, md」となります

&-#{$name} {

「&-#{$name} {」は、$marginsの最初のキーのsmを使用して「&-sm {」となり、結果として「.u-fs-sm」が作成されます

font-size: #{Rem(nth($values, $num))} !important;

結果として「font-size: 1.4rem !important;」という記述が作成されます

下記が展開イメージとなります

// all
.u-fs-sm {
 font-size: 1.4rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fs-sm {
  font-size: 1.3rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-sm {
  font-size: 1.2rem !important;
 }
}
・・・

ピクセルごとの設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @for $i from 10 through 32 {
        @if $breakpoint=='all' {
          &-#{$i} {
            font-size: Rem($i) !important;
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            font-size: Rem($i) !important;
          }
        }
      }

    }
  }
}

今回は、10～32の数値で設定しています

@for $i from 10 through 32 {

「@for $i from 0 through 180」が0～180までの数値をループし$iに0から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

下記が展開イメージです

// all
.u-fs-10 {
 font-size: 1rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fs-lg-10 {
   font-size: 1rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-md-0 {
   font-size: 1rem !important;
 }
}
・・・

font-weight

$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);

上記配列「$font-weights」を展開していきます

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $key, $weight in $font_weights {
        @if $breakpoint=='all' {
          &-#{""+$key} {
            font-weight: $weight !important;
          }
        } @else {
          &-#{$breakpoint}-#{""+$key} {
            font-weight: $weight !important;
          }
        }
      }

    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $key, $weight in $font_weights {

$font_weightsをeach文で展開していますが、ここでは、最初は「$key」に「thin」が、「$weight」には「100」が入ることになります

@if $breakpoint=='all' {

allの場合の振り分けをしています

下記が展開イメージです

// all
.u-fw-thin {
 font-weight: 100 !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fw-lg-thin {
   font-weight: 100 !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fw-md-thin {
   font-weight: 100 !important;
 }
}
・・・

まとめ

以上でfont-sizeとfont-weightのユーティリティーの完成となります

コーディングの省力化に貢献できれば幸いです

フライング・ハイ・ワークスの紹介

実績

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/flocssで自作ユーティリティー font-size / font-weight編 first appeared on FHWノート.

Scss/flocssで自作ユーティリティー display / gap編

松田治人 — Sun, 20 Oct 2024 03:51:49 +0000

displayでは、u-d-blockやu-d-md-noneなど、「u-d」の接頭辞で、また、flex / gridで使用するgapは、u-gap-48やu-gap-r-60など「u-gap」の接頭辞で、各ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

media queryのサイズによる階層的な適用が確実にされること
display
- grid系で均等分割の設定が行えること
gap
- オリジナル名称の設定を作成すること
- ピクセルごとの設定を作成すること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$gaps: (
  sm: (48, 46, 44),
  md: (60, 58, 56),
  lg: (80, 78, 76),
);

foundation/mixin

@use 'sass:map';

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

display

基本

.u-d-{display値}
.u-d-{$break-points}-{display値}

grid / inline-grid

.u-d-{display値}-{均等分割数}
.u-d-{$break-points}-{display値}-{均等分割数}

パラメータ

{display値} … ‘none’, ‘block’, ‘inline’, ‘flex’, ‘inline-flex’, ‘grid’, ‘inline-grid’

{均等分割数} … grid / inline-gridの場合のみ有効で、1及び3~10まで。指定ない場合は均等2分割

gap

オリジナル名称の設定

.u-gap-{$gaps}

ピクセルごとの設定

.u-gap-{サイズ}
.u-gap-{$break-points}-{サイズ}
.u-gap-{タイプ}-{サイズ}
.u-gap-{タイプ}-{$break-points}-{サイズ}

パラメータ

{display値} … ‘none’, ‘block’, ‘inline’, ‘flex’, ‘inline-flex’, ‘grid’, ‘inline-grid’

{タイプ} … c: column-gap、r: row-gap

{$gaps} は、上記前提を参照

使用例

display


・・・

上記では、画面幅により下記のようになります

1025px以上：「u-d-grid-4」で4分割
821～1024px：「u-d-grid-lg-3」で3分割
820px以下：「u-d-grid-md-1」で1分割

上記では、画面幅により下記のようになります

1025px以上：改行なし
821～1024px：改行あり
820px以下：改行なし

gap


・・・

上記では、gridの3分割の状態になり、下記のようになります

縦方向のgap：row-gapが3.6rem
横方向のgap：column-gapが2.4rem


・・・

上記では、gridの3分割の状態になり、画面幅により下記のようになります

1025px以上：gapが縦横4.8rem
821～1024px：gapが縦横4.6rem
820px以下：gapが縦横4.4rem

$gapsの設定は、現在下記となっていますが、この自由に設定を追加できます。また、後からそれぞれの設定を変更すれば、一気に更新することもできます。

$gaps: (
  sm: (48, 46, 44),
  md: (60, 58, 56),
  lg: (80, 78, 76),
);

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

display

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Display
// -----------------------------------------------------------------
$array: ('none', 'block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid');
.u-d {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @each $key in $array {
        @if $breakpoint=='all' {
          &-#{$key} {
            display: #{$key} !important;
            @if $key == 'grid' or $key=='inline-grid' {
              @for $i from 2 through 10 {
                @if $i==2 {
                  grid-template-columns: repeat($i, 1fr) !important;
                } @else {
                  &-#{$i} {
                    display: #{$key};
                    grid-template-columns: repeat($i, 1fr) !important;
                  }
                }
              }
            }
          }
        } @else {
          &-#{$breakpoint}-#{$key} {
            display: #{$key} !important;
            @if $key == 'grid' or $key=='inline-grid' {
              @for $i from 2 through 10 {
                @if $i==2 {
                  grid-template-columns: repeat($i, 1fr) !important;
                } @else {
                  &-#{$i} {
                    display: #{$key};
                    grid-template-columns: repeat($i, 1fr) !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

gap

@use 'sass:map';

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Gap
// -----------------------------------------------------------------
$array: (
  c: 'column',
  r: 'row'
);
.u-gap {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      // オリジナル名称の設定
      @each $name, $values in $gaps {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          #{gap}: #{Rem(nth($values, $num))} !important;
        }
        @each $key, $type in $array {
          &-#{$key}-#{$name} {
            #{$type}-gap: #{Rem(nth($values, $num))} !important;
          }
        }
      }

      // ピクセルごとの設定
      @for $i from 1 through 100 {
        @if $breakpoint == 'all' {
          &-#{$i} {
            gap: Rem($i) !important;
          }
          @each $key, $type in $array {
            &-#{$key}-#{$i} {
              #{$type}-gap: Rem($i) !important;
            }
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            gap: Rem($i) !important;
          }
          @each $key, $type in $array {
            &-#{$key}-#{$breakpoint}-#{$i} {
              #{$type}-gap: Rem($i) !important;
            }
          }
        }
      }
    }
  }
}

解説

上記最終系を一つずつ見ていきます。下記はdisplay及びgapで同じです

ループ設定

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

上記$break-pointsをループして展開していきます（gapの場合は、u-dの部分はu-gapとなります。以下同様）

.u-d {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
・・・
  }
}

展開されるイメージは下記の通りです

.u-d {
 // all
 // lg
　@media 'screen and (max-width: 1024px)' {
 }
 // md
　@media 'screen and (max-width: 820px)' {
 }
}

最初の$breakpointは「all」となりますが、下記mixinでは、allの場合は、特に処理を行っていませんので空になります

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

ここでのポイントは、「$break-points」を大きいサイズから設定していことです

これにより、画面幅が小さくなるにつれ、後述の設定が生きてくることになります。

詳細クラスの設定

display

$array: ('none', 'block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid');

上記$arrayを展開し、各classを作成していきます

.u-d {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $key in $array {
        @if $breakpoint=='all' {
          &-#{$key} {
            display: #{$key} !important;
            @if $key == 'grid' or $key=='inline-grid' {
              @for $i from 1 through 10 {
                @if $i==2 {
                  grid-template-columns: repeat($i, 1fr) !important;
                } @else {
                  &-#{$i} {
                    display: #{$key};
                    grid-template-columns: repeat($i, 1fr) !important;
                  }
                }
              }
            }
          }
        } @else {
          &-#{$breakpoint}-#{$key} {
            display: #{$key} !important;
            @if $key == 'grid' or $key=='inline-grid' {
              @for $i from 1 through 10 {
                @if $i==2 {
                  grid-template-columns: repeat($i, 1fr) !important;
                } @else {
                  &-#{$i} {
                    display: #{$key};
                    grid-template-columns: repeat($i, 1fr) !important;
                  }
                }
              }
            }
          }
        }

    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $key in $array {

displayプロパティの値の一覧です。よく使う値があれば、追加してください

@if $breakpoint=='all' {
・・・
} @else {
・・・
}

$break-points配列のキーがallの場合とそれ以外に振り分けています

allは、media queryに左右されない値を設定するために、独自に設定したものです

@if $breakpoint=='all' {
  &-#{$key} {
    display: #{$key} !important;
 ・・・
  }
} @else {
  &-#{$breakpoint}-#{$key} {
    display: #{$key} !important;
  }
 ・・・
}

上記で、をつかった「文字列補間（String Interpolation）」の「&-#{$key}」は、「#{$key}」の$keyに$arrayの値が一つずつ設定されます。

また、「display: #{$key} !important;」も同様に$keyに$arrayの値が一つずつ設定されます。

下記のように展開されるイメージです

// all
.u-d-none {
 display: none !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-d-none {
  display: none !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-d-none {
   display: none !important;
 }
}
・・・
// all
.u-d-inline-grid
 display: inline-grid !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-d-inline-grid
   display: inline-grid !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-d-inline-grid
   display: inline-grid !important;
 }
}

さらに「grid」と「inline-grid」の場合のみ分割数を設定できるようにしています

@for $i from 1 through 10 {
 @if $i==2 {
  grid-template-columns: repeat($i, 1fr) !important;
 } @else {
  &-#{$i} {
   display: #{$key};
   grid-template-columns: repeat($i, 1fr) !important;
  }
 }
}

上記のループは1～10としています。1は狭いサイズの場合に使用することを想定しています

また、「2」をデフォルトとして設定し、1及び3～10が「-3」のように設定できるようにしています

下記が展開イメージとなります

・・・
// all
.u-d-grid-1 {
 display: grid !important;
 grid-template-columns: repeat(1, 1fr) !important;
}
.u-d-grid {
 display: grid !important;
 grid-template-columns: repeat(2, 1fr) !important;
}
.u-d-grid-3 {
 display: grid !important;
 grid-template-columns: repeat(3, 1fr) !important;
}
.u-d-grid-4 {
 display: grid !important;
 grid-template-columns: repeat(4, 1fr) !important;
}
・・・
// lg
@media 'screen and (max-width: 1024px)' {
 .u-d-lg-grid-1 {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
 }
 .u-d-lg-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
 }
 .u-d-lg-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
 }
 .u-d-lg-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
 }
・・・
}
// md
@media 'screen and (max-width: 820px)' {
 .u-d-md-grid-1 {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
 }
 .u-d-md-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
 }
 .u-d-md-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
 }
 .u-d-md-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
 }
}
・・・

gap

オリジナル名称の設定

配列「$gaps」を展開していきます

$gaps: (
  sm: (48, 46, 44),
  md: (60, 58, 56),
  lg: (80, 78, 76),
);

$gapsにある各変数のカッコ内の数字は、$break-pointsの数と同じ数設定しています

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

.u-gap {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $name, $values in $gaps {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          gap: #{Rem(nth($values, $num))} !important;
        }
        @each $key, $type in $array {
          &-#{$key}-#{$name} {
            #{$type}-gap: #{Rem(nth($values, $num))} !important;
          }
        }
      }

    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $name, $values in $gaps {

$gapsをeach文で展開していますが、ここでは、最初は「$name」に「sm」が、「$values」には「(48, 46, 44)」が入ることになります

$num: index(map.keys($break-points), $breakpoint);

map.keysで$break-pointsのkeyだけの配列を作成しています。結果は「all, lg, md」となります

&-#{$name} {

「&-#{$name} {」は、$gapsの最初のキーのsmを使用して「&-sm {」となり、結果として「.u-gap-sm」が作成されます

gap: #{Rem(nth($values, $num))} !important;

「nth($values, $num)」では、nth関数で、$values、つまり「(48, 46, 44)」のうち、$numの値の順番（最初は「1」）にある値を取得し、Rem関数でremの値に変換しています

結果として「gap: 4.8rem !important;」という記述が作成されます

次にcolumとrowの設定を追加しています

$array: (c: 'column', r: 'row');

@each $key, $type in $array {
 &-#{$key}-#{$name} {
  #{$type}-gap: #{Rem(nth($values, $num))} !important;
 }
}

下記が展開イメージとなります

// all
.u-gap-sm {
 gap: 4.8rem !important;
}
.u-gap-c-sm {
 gap: 4.8rem !important;
}
.u-gap-r-sm {
 gap: 4.8rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-gap-sm {
  gap: 4.6rem !important;
 }
 .u-gap-c-sm {
  gap: 4.6rem !important;
 }
 .u-gap-r-sm {
  gap: 4.6rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-gap-sm {
  gap: 4.4rem !important;
 }
 .u-gap-c-sm {
  gap: 4.4rem !important;
 }
 .u-gap-r-sm {
  gap: 4.4rem !important;
 }
}
・・・

ピクセルごとの設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

.u-gap {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @for $i from 1 through 100 {
        @if $breakpoint == 'all' {
          &-#{$i} {
            gap: Rem($i) !important;
          }
          @each $key, $type in $array {
            &-#{$key}-#{$i} {
              #{$type}-gap: Rem($i) !important;
            }
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            gap: Rem($i) !important;
          }
          @each $key, $type in $array {
            &-#{$key}-#{$breakpoint}-#{$i} {
              #{$type}-gap: Rem($i) !important;
            }
          }
        }
      }

    }
  }
}

今回は、0～100の数値で設定しています

@for $i from 1 through 100 {

「@for $i from 0 through 180」が0～100までの数値をループし$iに0から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

下記が展開イメージです

// all
.u-gap-1 {
 gap: 0.1rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-gap-lg-1 {
  gap: 0.1rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-gap-md-1 {
  gap: 0.1rem !important;
 }
}
・・・
// all
.u-gap-100 {
 gap: 10rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-gap-lg-100 {
  gap: 10rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-gap-md-100 {
  gap: 10rem !important;
 }
}

まとめ

以上でdisplayとgapのユーティリティーの完成となります

コーディングの省力化に貢献できれば幸いです

フライング・ハイ・ワークスの紹介

実績

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/flocssで自作ユーティリティー display / gap編 first appeared on FHWノート.

Scss/floccsで自作ユーティリティー margin / padding編

松田治人 — Sun, 20 Oct 2024 01:05:45 +0000

u-mt-20やu-pb-30など、marginでは「u-m」、paddingでは「u-p」の接頭辞がついた、margin又はpadding用ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

Scss/floccsで自作ユーティリティー margin / padding編
Scss/floccsで自作ユーティリティー display / gap編
Scss/floccsで自作ユーティリティー font-size / font-weight編
Scss/floccsで自作ユーティリティー border編
Scss/floccsで自作ユーティリティー width編
Scss/floccsで自作ユーティリティー color / background-color編

ゴール

media queryのサイズによる階層的な適用が確実にされること
オリジナル名称の設定を作成すること
ピクセルごとの設定を作成すること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$margins: (
  base: (80, 78, 76),
  sm: (50, 48, 46),
  lg: (120, 118, 116),
);

foundation/mixin

@use 'sass:map';
@use 'sass:math';

@function Rem($size) {
  @return math.div($size, 10) + rem;
}

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

左右auto設定

.u-mx-auto

オリジナル名称の設定

.u-{マージン/パディング方向}-{$margins}

ピクセルごとの設定

.u-{マージン/パディング方向}-{数値}
.u-{マージン/パディング方向}-{$break-points}-{数値}

パラメータ

{マージン方向} … m: margin / mt: margin-top / mb: margin-bottom / mr: margin-right / ml: margin-left / my: margin-block / mx: margin-inline

{パディング方向} … p: padding / pt: padding-top / pb: padding-bottom / pr: padding-right / pl: padding-left / py: padding-block / px: padding-inline

{$margins}{$break-points}は、上記前提を参照

使用例


・・・

上記では、画面幅により下記のようになります

1025px以上：「u-mb-30」でmargin-bottomが3rem
821～1024px：「u-mb-lg-40」でmargin-bottomが4rem
820px以下：「u-mb-md-50」でmargin-bottomが5rem


・・・

上記では、画面幅により下記のようになります

1025px以上：margin-topが8rem
821～1024px：margin-topが7.8rem
820px以下：margin-topが7.6rem

$margins: (
  base: (80, 78, 76),
  sm: (50, 48, 46),
  lg: (120, 118, 116),
);

上記$marginsの配列の名称（キー）とbreak pointごとの設定は、自由に作成できるので、例えば、buttonやblockなどの設定を作成することで、パターンにあわせた設定を作成することができる上、のち変更があれば、それぞれのmarginやpaddingを一気に更新することもできます。

また、これらは、下記すべてに設定を作成していますので、様々なオリジナルの設定が可能となります

$array: (
  mt: 'margin-top',
  mb: 'margin-bottom',
  mr: 'margin-right',
  ml: 'margin-left',
  my: 'margin-block',
  mx: 'margin-inline',
  m: 'margin',
);

$array: (
  pt: 'padding-top',
  pb: 'padding-bottom',
  pr: 'padding-right',
  pl: 'padding-left',
  py: 'padding-block',
  px: 'padding-inline',
  p: 'padding',
);

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

margin

@use 'sass:map';

// 上記前提が記載されたファイル
@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

$array: (
  mt: 'margin-top',
  mb: 'margin-bottom',
  mr: 'margin-right',
  ml: 'margin-left',
  my: 'margin-block',
  mx: 'margin-inline',
  m: 'margin',
);

@each $key, $property in $array {
  .u-#{$key} {
    @each $breakpoint, $query in $break-points {
      @include mq($breakpoint) {
        
        // オリジナル名称設定
        @each $name, $values in $margins {
          $num: index(map.keys($break-points), $breakpoint);
          &-#{$name} {
            #{$property}: #{Rem(nth($values, $num))} !important;
          }
        }
        
        // ピクセルごとの設定
        @for $i from 0 through 180 {
          @if $breakpoint=='all' {
            @if $i==0 {
              &-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          } @else {
            @if $i==0 {
              &-#{$breakpoint}-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$breakpoint}-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          }
        }
      }
    }
  }
}

.u-mx-auto {
  margin-inline: auto !important;
}

padding

@use 'sass:map';

// 上記前提が記載されたファイル
@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

$array: (
  pt: 'padding-top',
  pb: 'padding-bottom',
  pr: 'padding-right',
  pl: 'padding-left',
  py: 'padding-block',
  px: 'padding-inline',
  p: 'padding',
);

@each $key, $property in $array {
  .u-#{$key} {
    @each $breakpoint, $query in $break-points {
      @include mq($breakpoint) {
        
        // オリジナル名称設定
        @each $name, $values in $margins {
          $num: index(map.keys($break-points), $breakpoint);
          &-#{$name} {
            #{$property}: #{Rem(nth($values, $num))} !important;
          }
        }
        
        // ピクセルごとの設定
        @for $i from 0 through 180 {
          @if $breakpoint=='all' {
            @if $i==0 {
              &-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          } @else {
            @if $i==0 {
              &-#{$breakpoint}-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$breakpoint}-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          }
        }
      }
    }
  }
}

解説

上記最終系を一つずつ見ていきます

ループ設定

今回のmarginとpaddingは、「m」と「p」の違いくらいでほとんど差異がないので、marginの設定で確認していきます

$array: (
  mt: 'margin-top',
  mb: 'margin-bottom',
  mr: 'margin-right',
  ml: 'margin-left',
  my: 'margin-block',
  mx: 'margin-inline',
  m: 'margin',
);

接頭辞「u-」に続く名称をキーとして、それぞれにcssのプロパティ名を記載した配列となります

@each $key, $property in $array {
  .u-#{$key} {
・・・
  }
}

設定した配列をeach文でループし、一行ずつ設定していきます

#をつかった「文字列補間（String Interpolation）」を使うことで、$arrayのキーで、class名を作成していきます。下記のように展開されるイメージです

.u-mt {
}
.u-mb {
}
・・・
.u-m {
}

次にmedia queryを設定していきます

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

foundation/variableに設定している上記配列を前提にeach分で展開していきます

@each $key, $property in $array {
  .u-#{$key} {
    @each $breakpoint, $query in $break-points {
      @include mq($breakpoint) {
・・・
      }
    }
  }
}

最初の$breakpointは「all」となりますが、下記mixinでは、allの場合は、特に処理を行っていませんので、そのまま設定されます

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

上記により下記のように展開されます

.u-mt {
 // all
 // lg
　@media 'screen and (max-width: 1024px)' {
 }
 // md
　@media 'screen and (max-width: 820px)' {
 }
}
・・・
.u-m {
 ・・・
}

ここでのポイントは、「$break-points」を大きいサイズから設定していことです

これにより、画面幅が小さくなるにつれ、後述の設定が生きてくることになります。

オリジナル名称設定

ここまでで、最終的な各cssを記述する準備が整いました。次に配列「$margins」を展開していきます

$margins: (
  base: (80, 78, 76),
  sm: (50, 48, 46),
  lg: (120, 118, 116),
);

$marginsにある各変数のカッコ内の数字は、$break-pointsの数と同じ数設定しています

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

@each $key, $property in $array {
  .u-#{$key} {
    @each $breakpoint, $query in $break-points {
      @include mq($breakpoint) {

        @each $name, $values in $margins {
          $num: index(map.keys($break-points), $breakpoint);
          &-#{$name} {
            #{$property}: #{Rem(nth($values, $num))} !important;
          }
        }

      }
    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $name, $values in $margins {

$marginsをeach文で展開していますが、ここでは、最初は「$name」に「base」が、「$values」には「(80, 78, 76)」が入ることになります

$num: index(map.keys($break-points), $breakpoint);

map.keysで$break-pointsのkeyだけの配列を作成しています。結果は「all, lg, md」となります

&-#{$name} {

「&-#{$name} {」は、$marginsの最初のキーのbaseを使用して「&-base {」となり、結果として「.u-mt-base」が作成されます

#{$property}: #{Rem(nth($values, $num))} !important;

「nth($values, $num)」では、nth関数で、$values、つまり「(80, 78, 76)」のうち、$numの値の順番（最初は「1」）にある値を取得し、Rem関数でremの値に変換しています

結果として「margin-top: 8rem !important;」という記述が作成されます

下記が展開イメージとなります

// all
.u-mt-base {
 margin-top: 8rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-mt-base {
  margin-top: 7.8rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-mt-base {
  margin-top: 7.6rem !important;
 }
}
・・・
// all
.u-m-base {
 margin: 8rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-m-base {
  margin: 7.8rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-m-base {
  margin: 7.6rem !important;
 }
}

ピクセルごとの設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

@each $key, $property in $array {
  .u-#{$key} {
    @each $breakpoint, $query in $break-points {
      @include mq($breakpoint) {

        @for $i from 0 through 180 {
          @if $breakpoint=='all' {
            @if $i==0 {
              &-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          } @else {
            @if $i==0 {
              &-#{$breakpoint}-#{$i} {
                #{$property}: 0 !important;
              }
            } @else {
              &-#{$breakpoint}-#{$i} {
                #{$property}: Rem($i) !important;
              }
            }
          }
        }

      }
    }
  }
}

今回は、0～180の数値で設定しています

@for $i from 0 through 180 {

「@for $i from 0 through 180」が0～180までの数値をループし$iに0から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

@if $i==0 {

$iの値が0の場合の設定を振り分けています

下記が展開イメージです

// all
.u-mt-0 {
 margin-top: 0 !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-mt-lg-0 {
   margin-top: 0 !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-mt-md-0 {
   margin-top:  !important;
 }
}
・・・
// all
.u-m-180 {
 margin: 18rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-m-lg-180 {
   margin: 18rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-m-md-180 {
   margin: 186rem !important;
 }
}

上記で特殊なのは「0」設定です。全部のマージンを消したい場合には「u-m-0」が使用できます

marginの追加設定

marginのみ下記設定を追加しています

block要素などのセンター寄せなどで利用できます

.u-mx-auto {
  margin-inline: auto !important;
}

まとめ

以上でmarginとpaddingのユーティリティーの完成となります

コーディングの省力化に貢献できれば幸いです

フライング・ハイ・ワークスの紹介

実績

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

The post Scss/floccsで自作ユーティリティー margin / padding編 first appeared on FHWノート.

React Three Fiberで3Dモデルを読み込む

fhw_Z7nTMUpb — Tue, 21 May 2024 00:21:22 +0000

デモはこちら

React Three Fiber（R3F）で簡単な3Dアプリケーションを構築しました。
※モデルはBlenderkitより使用させていただいております。

3Dモデルのスクリーンの位置にを設置することで、
まるで3Dモデル上でwebサイトを表示させているように描写することができます。
また、実際にシーン上でwebサイトを閲覧することもできたり、ページ内をドラッグすることでモデルを操作することが可能です。

React Three Fiber（R3F）ではReactのようにコンポーネントを並べてプロパティを記述していけばよいので、Three.jsでコードを記述するより圧倒的に手軽に3Dグラフィックスを構築することができます。

React Three Fiber（R3F）とは

R3Fは、ReactでThree.jsを使って3Dシーンを描画するためのライブラリです。
Reactはフロントエンド開発で非常に人気のあるJavaScriptフレームワークで、
Three.jsはWebGLを使って3Dグラフィックスをレンダリングするためのライブラリです。
R3Fは、この2つの強力な技術を組み合わせることで、Reactのコンポーネントベースのアプローチを使って3Dシーンを構築できるようにします。

デモのコード

index.jsx

import './style.css';
import ReactDOM from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import Scene from './Scene.jsx';

const root = ReactDOM.createRoot(document.querySelector('#root'));

root.render(
  <Canvas
    camera={{
      fov: 45,
      near: 0.1,
      far: 2000,
      position: [-0.4, 1.2, 4],
    }}
  >
    <Scene />
  Canvas>
);

Scene.jsx

); } " style="color:#d8dee9ff;display:none" aria-label="Copy" class="code-block-pro-copy-button">

import {
  ContactShadows,
  Environment,
  Float,
  Html,
  PresentationControls,
} from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default function Scene() {
  const model = useLoader(GLTFLoader, './pc.gltf');
  return (
    <>
      
        <Environment preset="city" />
        <PresentationControls
          global
          rotation={[0.13, 0.1, 0]}
          polar={[-Math.PI / 8, Math.PI / 8]}
          azimuth={[-Math.PI / 8, Math.PI / 8]}
          config={{ mass: 2, tension: 400 }}
          snap={{ mass: 4, tension: 400 }}
        >
          <Float rotationIntensity={0.3}>
            
              object={model.scene}
              scale={[5, 5, 5]}
              position-y={-0.8}
            />
            <Html
              transform
              wrapperClass="iframeWrapper"
              distanceFactor={0.76}
              position={[0.12, 0.4, 0.1]}
              rotation-x={-0.2}
              rotation-y={0}
            >
               src="https://www.flying-h.co.jp/">
            Html>
          Float>
        PresentationControls>
        <ContactShadows position-y={-1.5} blur={2} />
      
    
  );
}

・PresentationControlsコンポーネント
@react-three/dreiで提供されている3Dオブジェクトの操作を制御するためのコンポーネントです。カメラの視点を変えるためのアニメーションや、ユーザーによる操作を制御する機能を持っています。
polarとazimuthで回転を制限することができます。

・Floatコンポーネント
@react-three/dreiのコンポーネントで、React Three Fiber（R3F）を使った3Dシーンでオブジェクトを浮遊させる、またはゆらゆらとした動きを与えることができます。

・Htmlコンポーネント
3D空間にHTML要素を表示: Htmlを使うと、シーン内にHTMLを埋め込むことができ、3Dオブジェクトと連携してUIを提供したり、情報を表示したりすることができます。
wrapperClassプロパティを使用することでiframeの大きさをCSSでコントロールできます。

ポイント

3Dのためxyz軸を考慮しなければならないので、
iframeの位置をモデルの画面にフィットさせるのが少し手間がかかりました。
カメラやモデルやiframeの各プロパティで調整しました。

その他のポイントとしてはモデルの裏側まで回転させることができてしまうと、
モデルであるモニターの背面が見えるはずがiframeが優先されてwebサイトが浮いてるように見えてしまうので、polarとazimuthで回転を制限させて、モデルの背面を見えないようにしています。

R3Fには今回使用したもの以外にもとても便利なプロパティやコンポーネントが用意されているので、
ぜひ下記ドキュメントやGitHubを確認してみてください。

参考

・React Three Fiber Documentation – Pmndrs.docs
・https://github.com/pmndrs/drei

The post React Three Fiberで3Dモデルを読み込む first appeared on FHWノート.

コーディングの効率化でホームページ制作・Web制作を時短する3つの方法

kurino — Tue, 21 Nov 2023 02:15:48 +0000

コーダー部のです。

未経験から入社して早1年が経過しました。

AIの進歩に負けぬように日々必死にエンジニア業務に食らいついています。

任せていただけるサイトの数もボリュームも少しずつ増え、案件も並行して持てるようになってきました。

今回はそんな経験をもとに「コーディングを効率化する方法」についてお伝えできればと思っています。

まだまだ若手の自分が、「コーディングの効率化」についてブログを書く背景

入社してから毎日が勉強で毎日が戦いでした。

そしてとある壁にぶつかります。「非効率」という壁です。

会社が追求するクオリティを限られた時間内でアウトプットすることができなかったんです。

制作会社では複数案件を同時進行していくことはマスト、そして一つの案件に使える時間は限られています。

クオリティを高めるにはシンプルに技術力を上げるという方法もありますが、技術力の向上には時間が必要です。

時間を捻出する為にも時間を短縮する「効率化」は必要不可欠！

先輩のサブコーダーとして経験を積みながら、効率化について模索してきました。

本記事では効率化について（まだまだですが）、1年間の実体験を元にコーディングを速くするテクニックやマインドセットをお話していきます。

制作会社にコーダーとして入社を考えている方、コーディング効率を上げたい方は是非ご覧ください。

コーディングの効率を上げる方法（エディタ編）

ショートカットキー

まずはエンジニアの相棒エディタ編

エンジニアによって使用しているエディタが異なりますが、今回は王道のVSCode（Visual Studio Code）についてご紹介していきます。

■便利なショートカット
・新しいウィンドウを開く：Ctrl + Shift + N ／ Command + Shift + N
・ファイル内検索・置換：Ctrl + F ／ Command + F
・コメントアウト：Ctrl + / ／ Command + /
・インデント前へ：Ctrl + [ ／ Command + [
・インデント後ろへ：Ctrl + ] ／ Command + ]
・選択した行の複製：Alt + Shift + ↑or↓ ／ Option + Shift + ↑or↓
・選択した文字列を選択: Ctrl + D ／ Command + D
・選択した文字列を一括選択: Ctrl + Shift + L ／ Command + Shift + L

上記はほんの一部ですが、開発で非常に役立ちます。

特に「選択した文字列を選択（単語選択）」は修正案件で大いに役立ちました。

テーブルの値や特定の文字列を一括で置換するなど活躍の場が多いので、ぜひこの機会に覚えて更なる効率化を狙ってみてください。

Emmet

そしてEmmetもコーディングを爆速で行う為にはマスト！

Emmetを使用することでHTMLやCSSを全て手入力しなくても正しく補完してくれます。

例えばリストを作成する時は、「ul>li*3」と打てば以下のように展開されます。

CSSも同様です。

mt15

margin-top: 15px;

p40-20

padding: 40px 20px;

fz16

font-size: 16px;

コードの入力時間も短縮され、タイプミスも減ります。

一度ショートハンドの構文を覚えてしまえば効果絶大です。

コーディングの効率を上げる方法（ブラウザ編）

ショートカットキー

開発はウィンドウやタブの数がとても多くなるので、ブラウザ周りのショートカットキーも効率化の上で必須です。

画面キャプチャも制作進行上の疑問点をディレクター・デザイナーに分かりやすく伝える為に、使用しない日はありません。

■便利なショートカット
・新規ウィンドウ：Ctrl + N ／ Command + N
・シークレットウィンドウ：Ctrl + Shift + N ／ Command + Shift + N
・新規タブ：Ctrl + T ／ Command + T
・タブを閉じる：Ctrl + W ／ Command + W
・消したタブを元に戻す：Ctrl + Shift + T ／ Command + Shift + T
・ウィンドウ切り替え：Alt + Tab ／ Command + Tab
・画面キャプチャ：Windows + Shift + S ／ Command + Shift + 4
・クリップボードを表示：Windows + V ／ Command + Shift + V

拡張機能

大量タブの海に溺れている難民の皆さんに朗報です。

もう「あの案件のテストサイトやBacklogどこだったかな～」と放浪の旅に出る必要はありませんし、タブを何十個も開きっぱなしにする必要もありません。

「Toby for Chrome」で解決できます。（激推し！！！）

Chromeの拡張機能でタブをグルーピングできます。

カード型のUIでドラック&ドロップで気軽に編集でき、一つのウィンドウで開いている複数タブをワンクリックでまとめられる点も個人的に気に入っています。

タブ管理は上記以外の方法でも管理ができるので、自分に合った方法で効率化を図っていきましょう。

コーディングの効率を上げる方法（制作フロー編）

ヘルプを出す

これは非常に大切です。

制作を進行していくとほぼ間違いなく詰まるポイントが出てきます。

それはコーディングに関すること、案件特有のルールに関することetc…

この時に自分で解決する時間の上限を決めて、それでも解決できなければ先輩エンジニアにヘルプを出し迅速に報告すること。

この行動が制作においていかに大切か入社して身をもって体験しました。

エンジニアあるあるかもしれませんが、エラーで詰まって自力で解決できると半端ない達成感があるのでつい時間をかけがちです。

上手く解決できれば御の字ですが、大量の時間を投下した結果解決できず納期直前で「できませんでした。」では手の施しようがありません。

自分も最初は上手く頼れず、「何としても自力で解決してやる」と視野が狭くなっていました。

この行動が自分で自分の首を絞め、効率化から大きく遠ざかっていたんですよね。

当たり前ですがサイト制作は一人で成り立つものではありません。

周囲を上手に巻き込み進めていくことが、結果的に一番の時短だったと感じています。

上流工程へガシガシ進出する

前提として弊社は分業制で、ディレクター→デザイナー→コーダーの制作フローで進行しています。

コーディングは制作フローでいうと一番下流のフェーズです。

コーディングフェーズまでじっと待っているだけだと、思わぬ仕様やデザインが上がってきて苦しい思いをする可能性があります。

構成、デザインの段階からエンジニア視点での意見を発信していくことはプロジェクト全体のスムーズさにもつながりますし、個人的に学びが多いと感じました。

まとめ

ここで紹介した効率化の取り組みを実施し、少しずつですがサイト制作のスピードを上げていくことに成功しました。

まだまだ日々精進なので、おごらず謙虚にこれからもコーディングに向き合っていこうと思います。

それでは。

採用

弊社では現在Webプログラマーやシステム開発者を募集しています。

カジュアル面談も実施してますので、「まずは話聞いてみたい」という方もお気軽に！

皆様のご応募お待ちしています。

Indeed

Wantedly

The post コーディングの効率化でホームページ制作・Web制作を時短する3つの方法 first appeared on FHWノート.

異体字ってなぁに？

ぽよ — Mon, 31 Jul 2023 08:22:45 +0000

みなさんどうもこんにちは！
フロントエンドエンジニアのぽよです。

突然ですが、日本語って難しいですよね？
他言語圏の方から「日本語は文字のバリエーションが多くて難しい」
というお話を耳にしたことがあります。
確かに「ひらがな・カタカナ・漢字」など、いろいろと組み合わせて書かれていますね。

そこに追い打ちをかけるようなお話をすると…
漢字の中にもバリエーションが存在することをご存じでしょうか？
有名なところで言うと「高」という字には「はしごだか」と呼ばれるものがあったり、
葛飾区と葛城市の1文字目は異なる表記だったり。

異体字というもの

よく見る文字とは微妙に違う形をした漢字を「旧字体」と表現されているのをたまに見かけますが、
実はその中に正確には「異体字」と呼ばれるものもあります。
厳密には異なる見た目をしている漢字であっても同一の文字であると処理されてしまい、
環境などによっては意図した字体での表記にならないということがあります。

同じ読みの苗字だけど実はちょっと字が違うんです…というあれです。
Web制作をしている中で地名やお名前などで出くわすこともあります。

異体字に対応するには

そんなときに利用したいのが「異体字セレクタ」です。
異体字セレクタとは、基底文字の後ろに記述することで字体を指定できるというものです。
ここで出てきた基底文字とはベースとなる文字のことです。

例として、葛飾区の「葛」という字の場合は「葛󠄁」と記述します。
この1文字目が基底文字、「&」以降が異体字セレクタということになります。
上記の例では “「葛」という文字のE0101というパターン” と書いてあるようなイメージなので、
別のパターンを表現したい場合は異体字セレクタ内の数字の部分が変わってきます。

では、この異体字セレクタはどうやって選べばよいのかというと、
こちらの「異体字セレクタセレクタ」というツールを使用します。
ここで当該の基底文字を入力して検索すると、
下部にパターンの一覧とそれぞれに紐づいた異体字セレクタが表示されます。

ここから表示させたい字体のセレクタをコピーしてエディタで先ほどの例のように記述すると、
こちらが意図した字体で表示することができます。

おわりに

普段の生活では異体字をあまり気にしたことが無いという方も多いかもしれませんが、
Web制作ではお客様の会社の所在地やお名前で「この文字を出したい！」となった経験もあり、
今後もそういった場面があるかもしれません。
異体字セレクタを使用すれば正しい表記で掲載することができますので、
全国のワタナベ様、タカハシ様、ナラサキ様も安心してお申し付けくださいませ！

それではー。

The post 異体字ってなぁに？ first appeared on FHWノート.

ホームページ制作 マークアップ | 東京のホームページ制作・Web制作会社 フライング・ハイ・ワークス

Nuxt3でuseAsyncDataを自動的に再フェッチさせる

環境

課題

解決策

参考

Scss/flocssで自作ユーティリティー color / background-color編

ゴール

前提

foundation/variable

使用法

color設定

background-color設定

パラメータ

使用例

最終形

color設定

background-color設定

解説

まとめ

フライング・ハイ・ワークスの紹介

実績

Scss/flocssで自作ユーティリティー width編

ゴール

前提

foundation/variable

foundation/mixin

使用法

オリジナル名称の設定

100%設定

fit-content設定

ピクセル設定

%設定

パラメータ

使用例

最終形

解説

ループ設定

詳細クラスの設定

オリジナル名称の設定

100% / fit-content 設定

ピクセルごとの設定

%設定

まとめ

フライング・ハイ・ワークスの紹介

実績

Scss/flocssで自作ユーティリティー border編

ゴール

前提

foundation/variable

foundation/mixin

使用法

全囲い

一部

非表示

パラメータ

使用例

最終形

解説

ループ設定

詳細クラスの設定

ボーダー

「b」の場合 / 全囲い

「b」以外の場合 / 一部

非表示

まとめ

フライング・ハイ・ワークスの紹介

実績

Scss/flocssで自作ユーティリティー font-size / font-weight編

ゴール

前提

foundation/variable

foundation/mixin

使用法

font-size

オリジナル名称の設定

ピクセルごとの設定

パラメータ

font-weight

オリジナル名称の設定

ホームページ制作マークアップ | 東京のホームページ制作・Web制作会社フライング・ハイ・ワークス