2024.12.26 Web制作

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

 

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

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

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

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

ゴール

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

前提

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}は、上記前提を参照

使用例

<div class="u-b-primary u-bg-gray u-c-primary u-mt-50 u-mx-auto u-w-80p u-py-40">
・・・
</div>

他のユーティリティーと組み合わせ上記のような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点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

東京のWeb制作会社・ホームページ制作のお問い合わせ、お見積り依頼、相談、質問は
お問い合わせフォームよりお願いいたします

ホームページ制作実績

コーポレートサイトへ