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

以前「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, 180deg);
——————-

↑こんな関数もあり、
色相環を基準に180度回転させた色。
というふうに一発で補色が設定できたりします。便利！

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

ぴの子

東日本大震災から10年が経過しました。

当時弊社は今の所在地ではなく、
近くですが別の場所にオフィスがありました。

地震発生と同時に慌てて外へ逃げましたが、
あまりの揺れの大きさにうまく走れなかったことを覚えています。

午後2時46分、
亡くなられた方々のご冥福と復興を祈って
弊社でも黙祷を捧げました。

当時の教訓を忘れずに、前に進んでいきたいと思います。

ぴの子

おなじみの「Google web fonts」。
以前ブログに書いたお話の続きですが、
いつの間にか新しい日本語フォントが追加されていましたね。

https://nlab.itmedia.co.jp/nl/articles/2101/20/news136.html

↑こちらの記事で近々実装の話が話題になり、
気にはなっていましたがいつの間にか、ですね。

◆Google web fonts
https://fonts.google.com/?subset=japanese&sort=date

「Stick」や「Reggae One」が話題になっていたフォントですね。
その他にも「Potta One」や「Hachi Maru Pop」等
元々無かったフォントも追加されています。

結構特殊なフォントなので使いどころは選びそうですが
こういったフォントが無料で気軽に使えるのは嬉しい限りです。

あまり多数のフォントを1サイトに使用すると
動作が重くなってしまいますので、
ここぞというところには是非！

ぴの子

ひらりんこさんが記事にしていたダークモード。
2019年辺りから言葉はよく聞くようになりましたね。

ホームページをダークモードに対応させるには
いくつかの方法がありますが、
一番簡単なのはメディアクエリを使う方法です。

————————————
@media (prefers-color-scheme:dark) {
    body {
       background-color: #000;
       color: #FFF;
    }
}
————————————

OSの設定をダークモードにした際に
上記CSSが当たるようになります。

◆Darkmode.Js
https://darkmodejs.learn.uno/

「Darkmode.Js」なるものもあるようです。

CDN配布されている「darkmode-js.min.js」を読み込み、
「new Darkmode().showWidget();」と記述するだけで
簡単に設定可能なようですね。
これは初めて知ったので使ってみようかな。

◆Dark Mode Widget
https://wordpress.org/plugins/blackout-darkmode-widget/

Wordpress用のプラグインもあるみたいです。
無料で使えるので試してみても面白いかも。

私自身、スマホ・SNS・Youtube等を使う時には
ダークモードの設定にしています。
閲覧者の方の目にも優しいホームページ作りを
もっと意識していかなければならないかもしれませんね。

ぴの子

ばさっちが画像の圧縮サービスを紹介していましたが、
私はCSSの圧縮サービスでも改めて書いてみようかなと。

◆SHRTHND
http://shrthnd.volume7.io/

昔からあるこちらのサービス。
CSSのショートハンドを自動で行ってくれます。

左側の「INPUT」にソースを突っ込むと、
右側の「OUTPUT」に出力されます。

例えば背景画像の指定に関して、

——————–
background-image: url(../images/point_09.gif);
background-repeat: no-repeat;
background-position: left top;
——————–

↑このように分けて指定した場合には

——————–
background: url(..images/point_09.gif) no-repeat left top ;
——————–

↑のように一瞬で変換してくれます。

◆CSS Minifier
https://syncer.jp/css-minifier

あとはこちらのサービス等で圧縮。
コードを貼れば一瞬で出力されます。

表示速度改善の為、お試しください！

ぴの子