tslintから@typescript-eslintに変更したので、その時のメモ 。 あくまでも自分の環境の話になります。 変更した内容 1. tslintアンインストール $ yarn remove tslint tslint-loader tslint-config-airbnb tslint-config-prettier tslint-plugin-prettier t…

backdrop-filterとは 要素の背後に対してぼかしなどの処理を入れることができるプロパティ。 APPLEのTOPページのheader部分で使われているものになります。 サポート状況 2019年12月10日の状況 参考: https://caniuse.com/#search=backdrop-filter 実装 基本…

referrerとは document.referrerプロパティは、リファラー（リンク元URL）を参照。 Document.referrer プロパティは、このページへ「リンク」していたページの URI を返します。 参考リンク document.referrer－JavaScriptリファレンス Document.referrer - …

iosでモーダルの高さを100vhにしたときに下のコンテンツが上手く表示されなかったので、そのときの対応したことのメモ jsでの高さ取得については今回は省略します。 実際にどんな状態か テストサイト See the Pen modal-viewport-ng by miwa_shuntaro (@miwa…

色の取得をしてくれるもの 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用に…

vueのプロジェクトでstorybokを入れようとしたときにvueらしい書き方で行いたいと思ったのでその時のメモ 環境 Rails Vue.js Webpacker webpackerは今回関係ないですが、念のため 実行まで 今回参照するvueファイル <template lang="pug"> div p | {{ message }} </template> <script lang="ts"> import { Compo…

Railsそんな関係ない気がするけどバージョンもろもろ上げたらエラーでたので、storybook入れたときのwebpakerの編集した箇所も記載。 とりあえずstorybook入れる $ yarn add @storybook/cli $ npx getstorybook $ yarn run storybook ここまでやったら .stor…

Nuxt.js のv2でも色々と設定を行ったので、その時に行ったこととしてメモ。（随時追記予定） 今回変更を行ったgithubのコード ここ違うよなどありましたらPRいただけると嬉しいです。 更新速度は遅いですが、随時いろいろと更新できるようにしていきたいと思…

前提 SPAではない pug + stylus + vanillaを使う webpackのビルドはjsのファイルのみ 開発時と本番アップ時にビルドを分ける ディレクトリ コード gulpfile.js(v4) const { src, dest, watch, parallel } = require('gulp') //gulpを使うためのもの const pu…

gulpv4でgulp.taskが非推奨とのことだったので、少し変更したときのメモ。 前提条件 html,cssを動かしたいだけなので、pug,scssの変換のみ(js,imgなどはなし)。 ファイルの監視・ビルドがメインになるので、ローカルサーバーを立てるなどのことはしない。 変…

IsometricSassを使うとcssのみで3D表現できるので、それをいろいろとさわってみる。 参考url一覧 github github.com やっていることの参考url IsometricSass 行ったこと 事前準備 HTML : html CSS : sass（isometricがsassを使っているので、) sassビルド : …

photoshop 画像アセット使い方 いろいろな書き出し方について1 いろいろな書き出し方について2 Illustrator スクリーン用に書き出し・アセット書き出しなど アートワークの書き出し アセットの収集と一括書き出し xd 基本的な書き出し方 いろいろな書き出し…

html系 html整形ツール htmlをpugに変換 pugからhtmlに変換 HTMLからCSSのclass名を生成 css系 css整形ツール cssをscssに変換 CSS三角形作成ツール イージングチェック1 イージングチェック2 box-shadowジェネレーター text-shadowジェネレーター shadowやt…

stylusでのlintについて stylus-supremacyのここの部分に記載されていたので、自分の環境構築しているものに導入してみたのでその時のメモです。 今回の場合だと入れただけで、運用してみてどうとかこの使い方で使いやすいのかはまだ検証は行っていないです…

stylus + eslint の整形メモ stylus 本当はstylelint入れたかったけど。。（scssでは対応していると書いてあったけどstylusまではわからなかった。） stylusでいい感じに設定してくれるとのことでstylus-supremacyを使用。lintというよりは整形を行ってくれ…

記事とかでwebサイトのKVにアイソメトリックを使っているのをよく見かけるのでどんな感じで実装を行っているのか気になったので、いろいろと調査してみた。 アイソメトリックとは 傾斜させた立体を、間口・奥行き・高さの3方向で作る角度がそれぞれ120度にな…

レスポンシブで画面幅が変わってもいい感じのアスペクト比を出力するようにする。 メモ gridを使わない padding-topなど使わない heightを頑張って取得する 円 イメージ $max-size: 300px; //基本的にデザインカンプのサイズ $normal-size: calc(100vw / 3);…

使っている言語 pug 理由 htmlの閉じタグを書くのが面倒(エディタによっては補完してくれるものもあるけど。) 記載の行数・記載量が少なくて済む。(emmetとかでの補完もあるけど。) .sample サンプル <div class="sample"> サンプル </div> ↑簡単な例 閉じタグが何回も続いてしまうと関…

基本的に @media screen and (max-width: 767px) { /*なにかの効果*/ } で呼ぶことができる。 ↑の呼び出しを毎回使うのも面倒なので、scssなら @mixin sp-only { @media screen and (max-width: 767px) { @content; } } みたいな感じでmixinにしておけば @in…

目的 制作案件だとだいたいphotoshopの再現がメインになるので、効率よく行う。 エンジニア一人でデザインの再現性を効率よく確認できるようにする。(再現性の戻しを少しでも減らす。) エンジニア・デザイナー(もしくはディレクター)との認識のずれをを減ら…

目的 マークアップを行う時にどんなタグで書いていけばよいか少しだけ調べて気になったものだけ共有します。 使えるかどうかはわかりません。 menu要素とmenuitems要素を使ったコンテキストメニュー タグはmenuとmenuitem。 右クリックしたときの要素の表示…

設定ミスやよく理解していない部分を把握するため、 再構築するときにやりやすくするようにいろいろと一応メモ 2019/06/27追記 jackswim3411.hatenablog.com でNuxt.jsでのv2の設定についても随時追記していこうと思っていますので、よろしくお願いします。 …