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の設定についても随時追記していこうと思っていますので、よろしくお願いします。 …

UIT#6 進化する React.jsへ行ってきていろいろと聞くことができたので、自分のメモがてらいろいろと記載します。 Hooks で作る React.FC 資料 : https://speakerdeck.com/takefumiyoshii/hooks-tezuo-ru-react-dot-fc サービスフロントエンドとアニメーシ…