VS CODEでCSSのプロパティの並び順を整える

いっつも感覚で書いてしまうのでバラバラな並び順のプロパティを自動で整形したいと思ってぐぐった。CSSCombってのがあるらしい

ということでVSCODEにインストール

そのまま使うと自分の理想通りのフォーマットにならないので、以下のサイトで整形ルールを決める。
https://csscomb.herokuapp.com/config

一応自分好みの形はこれ

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "    ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

csscomb.jsonって名前で必要な箇所に保存。
WinだとC>User>.vscode>extensions>mrmlnc~~ >node_modules>csscomb>config>ここ

wordpressでクオーテーションなどの記号がなんか変わるとき

ずっと原因がわからず、投稿する人が微妙に間違えて記述してるんじゃないか?とか疑惑があったがWordpressの有難迷惑機能らしい。

function.phpで自動変換処理を止められるようなので止めてみた。
エラーがでるかもしれないので監視したほうがよさげ。

WordPressでダブルクォートなどの文字が自動変換?原因と対処方法

参考になりましたー!

adobe XDの共有がわかりづらい

1つのXDファイル内でiphone用とPC用のデザインを進めていて、共有用にプレビューを発行したところ・・・

なぜかiphone側(一番最初に作った画面がiphoneの画面)しか吐き出されない。
プロトタイプでページをつなげた部分は一緒に吐き出されるがPC側はまったく吐き出されず。

悩みに悩んだところ、プロトタイプの画面にしてどの画面をアクティブにするか選択しないといけないっぽい。

 

どこかに説明あったのかな。。。

VK All in one Expansion Unit を利用していて固定ページの保存がうまくいかないとき

とある瞬間から管理画面の固定ページの保存が完了しなくなる。

何だろうと思っていたが、原因はタイトルのプラグインのカスタムCSSの入力箇所でコメントアウトが入っていたから。

参考はこちら。

ExUnit⇒CSSカスタマイズ でココメントアウトの「/*」が使えない

案外気づかないよなー

tabのコーディングをするときにデザイン影付きにされて焦る

そういうときは親要素にかかっている影のCSSがbox-shadowになっているかチェック。

もしそうならば、IE11は切り捨てる方向になるがdrop-shadowにすれば子要素の形にあわせて影をつけてくれる。

ちなみにPNGだと透明部分を無視して影をつけてくれる優れもの。

あとはtabの括りの要素をposition relativeにしてtop -50px的な感じてタブの高さ分をマイナスすれば影付きのタブのできあがーり。

svgがどうやってもIE11でレスポンシブにならないで余白ばっかり増えちゃうよ

imgタグでsvgを設置。
width =”希望の幅”
height=”auto”

基本はこれでOK
でもIE11だと小さかったり大きかったり。

zeplinで書き出したサイズのせいなのかなと思いPC版のサイズで書き出し直し。

なおる

だが、別の箇所で使っているときに結局サイズ感がおかしい

width heightともに数値で設定してもおかしい。

そんなときはsvgをエディタで開いてみてviewboxの値があるかチェックするといいのかも。

とりあえずsvg内のwidth heightと合わせて
viewbox=”0 0 widthの値 heightの値”でやってみたらレスポンシブに対応できた。

よーわからん

背景画像やグラデーションを簡単に文字でマスクできる

とあるサイトをみて初めて知りました。

利用するCSSは

・-webkit-background-clip:text; // これ設定しないとただ単に背景に画像やグラデがはいるだけ。
・-webkit-text-fill-color:transparent; //枠線も透明にしちゃう
・display :inline-block; // blockのままだと全体幅をみちゃう?

 

まみむめもまみむめもまみむめも

AtomでEJSファイルをいじっているときにEmmetが.hogeをclassName=”hoge”にしやがる

ある日から急に.hogeを変換するとclassName=”hoge”となるようになってしまった。

なんかのプラグインのせいなのかと停止してみたりしたけどよくわからず。

なので以下を参考にsnipets.jsonをいじる
https://github.com/emmetio/emmet-atom/issues/459

"jsx": {
    "filters": "ejs",
    "extends": "html",
    "profile": "xml"
}

こうしたらなおった