CSSで変数使えるらしいよ?

date_range 2024/05/22
エンジニアインターン
池田 駿
スクリーンショット 2024-05-22 174357

CSSで変数が使えること、知っていましたか?

こんにちは、WEbプログラマーコースの池田駿です。

本日CSSを使って書いたコードを提出したのですが、

提出した上司と私のパソコンの画面の大きさが違い、

「あれ?なんかここの幅違くない?」というハプニングが発生。

時間かけて作ったのに...

と思いつつ、全部値を直すことにしたのですが、

この問題ってこれからも起こりうるよなと思って

C言語でいうマクロみたいなものないのかなと思って調べてみました。


使い方:

まず正しい名前はカスタムプロパティです。

マクロとして使うなら方法は超簡単。

CSSファイルの最初に

:root{

    --main-width: 85%;
    --sub-width:100px;

    --main-color:#000;

}

のような形式で定義します。(宣言も同時にしてるのかな?)

使い方も簡単。

使いたいところで

.box{

    width: var(--main-width);

    color: var(main--color);

}

といった感じで使います。

今回のようなケースでなくても、急な仕様変更

にも笑顔で対応するのが我々エンジニアの道!

なので、仕様変更を見越して何回も使う値は

ぜひ変数に格納してしまって使いまわしましょう♪

それでは!



参考文献:https://www.webcreatorbox.com/tech/css-variables

*COMMENT*

  • 永野 智成

    永野 智成

    更新日:2024-05-22 17:56

    *コメント*

    投稿お疲れ様です。

    保守性に富んだコードを書くとなると、必要な前提知識がたくさんあって大変ですね。
    今日も新たな学びをありがとうございます。

    *コメント*

  • 下川 春樹

    下川 春樹

    更新日:2024-05-22 21:10

    *コメント*

    お疲れ様です。
    すごく長いCSSを書くときは、カスタムプロパティ便利ですが、社内でパーツ作る時は、あまり使わない派です。同じパーツ内で、そんなに何回も書かないと思いますし、そこに宣言するならコード1行書いても同じだと思うので。。。
    見た目はなんかカッコよくスッキリするので、好みですかね?
    使用する上でメリットなんかあれば教えてください!

    後は色んな画面幅で確認できる拡張機能、レスポンシブビューワーは活用していきましょー٩( 'ω' )و

    *コメント*

  • 池田 みはな

    池田 みはな

    更新日:2024-05-23 08:11

    *コメント*

    カスタムプロパティ、とても便利ですよね。同じレイアウトで背景色だけ違う要素が並ぶ。、、といったような場面はとても多いので大変助かります。保守性の面でも積極的に使っていくべきだなと思っています。
    CSSだけでも、OWLetで使うにはひと工夫必要なものもありますが、全部ブラウザに対応している便利な書き方はどんどん利用していきたいですね。

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-05-23 08:25

    *コメント*

    駿くん、CSSのカスタムプロパティ(CSS変数)について勉強されたのですね。
    いつも私の知らない事ばかりで勉強になります。
    よく使う値を変数化しておけば、値の変更が発生した際にコードの修正が楽になるんですね。
    一箇所を変更するだけで全体のスタイルを維持しながらまとめて調整できたりなんてできたらいいですね✨
    仕様変更に柔軟に対応するという姿勢も大切なポイントですね。
    駿くんがポジティブに急な仕様変更も笑顔で対応するのが我々エンジニアの道!!だなんて
    とっても素敵です✨
    がんばれっ駿くん!

    *コメント*

  • 則岡 えり

    則岡 えり

    更新日:2024-05-23 09:58

    *コメント*

    お疲れ様です。
    私も少し前に教えていただいてから、時々使っています。
    でもまだ全然使いこなせていないので、上手に使ってる方のコードを見て勉強します!

    *コメント*

  • 田中 敦史

    田中 敦史

    更新日:2024-05-23 11:40

    *コメント*

    お疲れ様です。
    改めてコードを見ると、使いこなせていないと反省してしまいます…。勉強になります。
    笑顔で対応するエンジニアさんは素敵ですよ!!
    お互いにがんばっていきましょう!

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード

NEW