色の取得をしてくれるもの webサービス XDプラグイン 基本的な書き方 css 通常 :root { --blue: #00f; } .className { color: var(--blue); /* 青色 */ } scss 通常 $blue: #00f; .className { color: $blue; // 青色 } パレットを使ってそこで管理 $palette…

cssを作っていく上で便利そうなジェネレーターメモ。 図形 CSS三角形作成ツール url : http://apps.eky.hk/css-triangle-generator/ja 使い方 左側の「方向」や「サイズ」を変更 右側の「CSS」の部分に書き出されるので、それをコピーして使う 吹き出し作成…

scssのコード品質については stylelint,prettierを使ってscssのコード品質を保つ - みわのブログを参考。 また、.jsと.vueが混在しているプロジェクトを想定。(.jsについてはjQueryも使っている想定) eslint, prettierをインストール $ yarn add babel-eslin…

Variable Fontとは 一つのフォントから複数の太さや幅などいろいろなものを変更できるフォント。 Variable Fontについていろいろと試すことができるサイト https://play.typedetail.com/ https://v-fonts.com/ ブラウザのサポート状況 https://caniuse.com/#…

CSSアニメーションについて CSS TransitionとCSS Animationの2つの機能がある。 CSS Transition,Transform 単純な動きのアニメーションを実装する時に利用する。 トグルボタン、ドロワーメニュー、など Transitionについて translate（移動）、scale（縮尺）…

codepenで自分がいいと思ったものを貼り付ける 主に参考にしているサイト photoshopvip.net photoshopvip.net cssのみですりガラス See the Pen CSS - Frosted Glass by Kyle Wetton (@kylewetton) on CodePen. ページトップボタンでどのくらいスクロールし…

scssのみでjsについての変更・設定はなし stylelint, prettierのインストール $ yarn add stylelint stylelint-config-standard stylelint-scss prettier prettier-stylelint stylelint-config-prettier 参考 stylelint - npm stylelint-config-standard - n…

要素のcssを取得したい プラグイン「Copy CSS」を使う。 ここからインストール Copy CSS と入力するとでてくる cssを取得する 書き出されるコード(一例) width: 360px; height: 70px; border-radius: 4px; background: linear-gradient(#48b047 0%, #45d943 …

バッチ処理 一括でpngやjpgを変更できるように やり方 1. 「ウィンドウ → アクション」を選択 アクションパネルが出る アクションの使い方については省略。 2. 画像を開いて、画像を保存する 開くファイルは適当。 画像の保存について 「書き出し → web用に…