カスタムプロパティとSVGを使ったら色違いが簡単にできた話


こんにちは。櫻井です。 この間IE11非対応になって初めてカスタムプロパティを使ったんですがSVGのsymbolとuse組み合わせたらすごい便利だったので今回はその使い方の紹介をしたいと思います。

カスタムプロパティとは

カスタムプロパティとはCSS上で使える変数のことでIE11対応では使用できなかった機能の一つです。 使い方としてはSassの変数と同じように使い回すことが前提のものを変数にするといいです。 変数の定義の仕方はハイフン二つ(—)で始まる変数名の後に格納する内容を記載します。

element {
  --main-color: #012345;
}

CSSのどこからでも変数にアクセスできるようにしたい場合は:root 擬似クラスで定義します。

:root {
  --main-color: #012345;
}

定義した変数を呼び出すときはvar()を使って呼び出します。

h2 {
  color: var(--main-color);
}

カスタムプロパティについては以上です。 個人的には使います色やフォント、transitionなどを変数にしておくといいと思います。

SVGのsymbolとuseとは

symbolはsvgの要素のひとつでSVG上の変数のようなものです。 symbol要素は図形などのグラフィックを定義しておくことでuse要素によって描画させることができ同じグラフィックを複数回使用するときに使うことで構造をシンプルにすることができます。 useはsvgの要素のひとつで図形などのグラフィックに付与されたIDを参照して再利用することができる要素です。

組み合わせると色違いが簡単に

このカスタムプロパティとSVGのsymbolとuseを使うと色違いがシンプルに作れます。 symbolとuseを使えばhtml上にインラインで長いSVGを大量に記述する必要はなくなり、カスタムプロパティを使えば色の箇所をカスタムプロパティに置き換えておけばあとはクラスごとに色を定義するだけで良くなります。 transitionを効かせたい場合はuseにfillとtransitionを当てれば効いてくれます。

See the Pen Untitled by knap_develp (@knap_develp) on CodePen.

まとめ

カスタムプロパティを今回初めて使ったんですが普段Sassを使っている変数と同じ感じで浸かるんだなということを実感できました。 SVGと組み合わせることでHTMLもCSSもシンプルに書けて個人的に大満足でした。カスタムプロパティの便利な使い方を他にも発掘できたらまたブログにしたいと思います。

Liquidって何?


こんにちは。櫻井です。
Shopifyの環境構築の仕方について調べれば調べるほどShopifyのテーマに使われているLiquidという言語について理解しないと話にならなのがわかってきました。でも、日本語のドキュメントがまじで全然ないんです。しょうがないので自力でGoogle先生とか周りの人に意味を聞きながらどうにか訳しながらある程度理解できたので今日はLiquidって何?ってところから説明していこうと思います。

決算APIの違いを比較してみた


こんにちは櫻井です。
以前ネットショップ開設サービスの違いを比較してみましたがその時、色々みていくうちにネットショップの流れが色々省略すると商品を登録してお客さんに商品が見えるようにする。次にお客さんがボタンを押して支払いができればネットショップの機能としては充分成り立つことに気づいたんです。
商品の登録機能はwordpressの記事投稿機能のようなものだと思えばなんとなくですが理解できます。
残る支払い機能が問題で、クレジット情報とかを扱わなければならないとなるとセキュリティ面も完璧に構築しなければいけません。これが完璧にできればいいんですがそんな簡単なわけもなく、サーバー側の言語となると一から勉強しなければならず腰が引けます。
どうにかならないかなと探していたときに見つけたのが決算APIでした。
決算APIを使えばセキュリティ面をAPIが担当してくれるます。これならなんとかなりそうだということで、今回は決算APIの違いを比較していこうと思います。

社員旅行2019


だいぶと外の空気が秋めいてきましたね。
今年もKNAPメンバーで社員旅行に行ってまいりました。

今年の行き先は埼玉県の長瀞でぶらり電車の旅となります。
寒いかと思いきや暑いくらいの気温で旅日和のお天気でした。

社員旅行2018



今年も社員旅行に行ってきました。

昨年は軽井沢観光。星野や軽井沢、無印キャンプ場、マス釣り、BBQとバラエティに富んだ2泊3日の旅でしたが、

今回は山梨県の河口湖周辺を巡ってきました!

先頭に戻る