エスエムティの愉快な仲間たち

先日「Sass」の導入について記事を書きましたが、
自分のメモついでに便利な書き方を紹介していこうかと思います。

前回は「変数」でした。

——————-
$Color: #000;

p{color:$Color;}
——————-

「$Color」にサイトカラーを指定し、
後は変数名で呼び出す方法でしたね。

今回はサイトカラーを基準に、色を変更する関数の紹介です。

——————-
lighten($Color, ●%);
darken($Color, ●%);
saturate($Color, ●%);
desaturate($Color, ●%);
——————-

ベースカラーを基準に、

「lighten」は明度を上げ、「darken」は明度を下げます。
「saturate」は彩度を上げ、「desaturate」は彩度を下げます。

——————-
$Color: #000;

p{color: lighten($Color, 50%);}
——————-

↑こんな使い方ですね。

CVエリアに、サイトカラーより鮮やかな色を設定したい！
なんて時に一発で設定が出来ますし、
万が一サイトカラーが変わることがあったとしても
変更後のカラーをベースにコンパイルしなおしてくれますので
メンテナンス性もばっちりですね。

——————-
adjust-hue($Color, 30deg);
——————-

↑こんな関数もあり、
色相環を基準に30度回転させた色。
なんて設定も可能です。

組み上げるには手間もかかりますが、
色々な設定が可能ですので、試してみるのも面白いですよ。

ぴの子

SVG、使っていますか？
上手く使えばホームページの軽量化ができ、
メンテナンス性も上がる便利なファイル形式ですね。

通常のjpgやpngのように「img」タグで読むこともできますし、
「use」タグを使ってインラインで使い回すこともできます。

前者はとにかく楽。簡単にSVGを使いたい方向け。
ただし本当にただ表示することしかできません。

後者の場合は、例えばCSSの「fill」を使って
色を変更したりすることができます。

ナビゲーション等にSVGでアイコンを設置し、
マウスカーソルが乗ったら色を変える、なんてこともできますね。

で、最近こんな感じに



まさにマウスオンで色変更をするパーツを作ったのですが、
IEのみ、ちょうどSVGのエリアだけマウスオンの判定にならないという現象が起きました。

上の画像でいうと、水色のエリアにマウスが乗れば色が変わるのですが
ちょうどSVGであるパソコンのシルエット上にマウスが乗ると
色が戻ってしまうという状態でした。

またIEかよと思いつつ。

とりあえずこんな感じで解決↓



エリア全体の上に透明なdivタグを重ねました。
（表現上黒色にしましたが透明です）

マウスオーバーを行う際はIEに注意！

ぴの子

弊社はカレンダー通りの営業となりますが、
長い方ですと明日よりゴールデンウィークに入るようですね。
12連休になるそうです。

せっかくのゴールデンウィークですが、
このようなご時世ですので遊びに出掛けるのは控えましょう。

でも折角の休み、何をすればいいのか。

例えば、オンデマンド配信サービスのhuluが
無料開放しているコンテンツを見るのも良いのでは。

◆hulu在宅応援
https://www.hulu.jp/display/zaitaku-oen

ジム等に行くのを自粛し、体が鈍っているという方。
オンラインフィットネスサービスもあります。

◆オンラインフィットネSOELU無料開放
https://bit.ly/2UURKnp

探せば様々なサービスを見つけることが出来ます。
今は頑張って家にいましょう…！

ぴの子

ウラカスミンが書いていた「オンライン飲み会」。
8日の記事でしたが、丁度前日の7日まで
私は言葉の意味を知りませんでした。

7日の夜に、友人からLINEで
「オンライン飲み会やろうぜ！」
と連絡が来ました。

とりあえずLINEのビデオ通話を使ったのですが、
ウラカスミンが紹介していた
「Zoom」等を使うのが流行りなんですね。

LINE・スカイプと違って、
Zoomのメリットは以下のような感じだそうです。

・導入が簡単
・通信料が少ないので安定している
・同時接続に強い

最初の導入まではひと手間かしれませんが、
この機会にやってみてもいいかもしれません。

ちなみに7日のオンライン飲み会ですが、
なんだかんだで一時間近く話していましたね。。
画面越しの乾杯でも、十分なストレス解消になりました。笑

ぴの子

Sassとは、

「Syntactically Awesome StyleSheet」

の略で、「すごいCSS」的な意味らしいです。笑

コーダーさんなら聞いたことはあるけど、
なんとなく手を出していない方もいるのではないでしょうか。

導入については、

1.Rubyのインストール
2.Sassをインストール
3.Compassをインストール
4.必要に応じてコンパイルツール「Koala」等をダウンロード

といった手順になりますが、
ここに書くと長くなるのでググって下さい…！

Sassの中でも一番簡単に試せる記述方法。
それはやはり「変数」でしょう。

——————————
$Color: #000;

p{color=$Color;}
——————————

「$」に続いて変数名を指定することで使用することが出来ます。
あとは使いたい箇所で呼び出すだけ。

上記の例だと、「$Color」に黒色を設定しています。
文字色やリンクカラー等で必要な場合に
「color=$Color;」のように変数名で色を指定できます。

運用中に「黒ではなく青にしたい」といった要望があったとしても、
変数を設定している一か所だけを変更すれば良いですね。
管理がとても楽になります。

導入まではひと手間ありますが、
使ってみると便利な点が色々ありますよ。
モノは試しに是非どうぞ。

ぴの子