使える配色ツール

配色ツールの紹介。

こちらの配所ツールの便利なところは、指定した色に対して相応しい色を見つけてくれるところ。

https://coolors.co/


配色で悩む時、キーカラーが決まっている場合が多く、そのキーカラーと馴染む色のバリエーションについて悩む事が多く、そうした時に使っており、助かっています。

配色ツールは色々とありますが、これが一番利用頻度が高いです。

Local by Flywheelのバージョンアップ

下記方法でとりあえず動いた。

①Local by Flywheel 3.3.0 アンインストール

②Oracle VirtualBox　アンインストール

③最新版のLocal by Flywheel 5.5.3　をインストール



Oracle VirtualBoxが完全に削除できていなかったようだけど、まぁ動くから良しとする。

Local by Flywheel 5.5.3　にすると、起動が速いので助かる。

ただ、過去のサイトデータは移行されないので、自分で何とかする必要がある。

Lighthouseツール

GoogleのLighthouseは、chromeの拡張機能として設定できます。

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

Performance、Accessibility、Best Practices、SEO、PWAについて、100点満点で採点されます。

現在は英語版しかありませんが、凄く便利なツールです。

CSS遅延読み込み

CSS　遅延読み込みの記事です。

CSSを非同期ロードする最も簡単な方法

凄く参考になります。

■概要

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

「media="print"」指定により、ブラウザは非同期にスタイルシートをロードします。

その後、「onload="this.media='all'」指定により、ロードが完了したにメディアタイプが all に変更することで、適用されます。

内部スクロール用のjQuery

内部スクロール用のjQueryです。

スムーズなscrollとなります。

$(function(){

  $('a[href^="#"]').click(function(){

    var speed = 500;

    var href= $(this).attr("href");

    var target = $(href == "#" || href == "" ? 'html' : href);

    var position = target.offset().top;

    $("html, body").animate({scrollTop:position}, speed, "swing");

    return false;

  });

});