VisualStudioCodeの基本設定
今までsublime text3を使用してきたけど、 sublimeはutf8以外の文字コード周りのサポートがあまりないので VisualStudioCodeに乗り換えることにしました。
設定項目が多すぎて何を設定したか忘れそうなので備忘録代わりに投稿。
設定画面への入り方
VS CODEの設定画面は以下から行う [ファイル→基本設定→設定]
インデント設定
[Editor: Tab Size]でサイズを設定。
editor.detectIndentationはONの場合
ファイルのもともとのタブ設定が優先されるので
邪魔な場合はチェックを外しておく。
コードの折り返し
[Editor: Word Wrap]
コードが画面幅いっぱいになったときに、横スクロールを発生させるか
改行させ画面幅にフィットさせるかの設定。
横スクロールはめんどうなので、ONに設定
明朝体のGoogle Fonts
はんなり明朝」と「こころ明朝」は漢字が使えないので注意。 よくみると気づくんだけど、以外に見落とす。
CSSで斜め切り
See the Pen 斜め切り by tamanegi (@tamanegi_man) on CodePen.
html/cssコーディング時に便利なサイト
文字コード変換
http://yasu.asuka.net/orkut/conv.html
記号をコピペすると、実態参照で返してくれるサイト shift-jisとかのサイトを作るときに便利
ブラウザ対応
各ブラウザの対応状況を確認できる。
各デバイス確認
手持ちに実機がない場合に便利
https://app.crossbrowsertesting.com/
html/cssの構文チェック
http://www.htmllint.net/html-lint/htmllint.html
https://jigsaw.w3.org/css-validator/validator.html.ja
情報共有
css関係
htmlを張り付けると、cssのフォーマットを作ってくれる
グラデーション（最近はあまり出番がない）
http://www.colorzilla.com/gradient-editor/
cssで三角形を作る
画像を使いたくない時に便利 矢印とかステップのアイコンとか。
http://apps.eky.hk/css-triangle-generator/ja
RGB RGBA変換
この色ちょっと透過したーい的な時に
気を付けよう,vwとかvhとか
windowsのスクロールバーはvwの範囲に入っている
windowで
body{ width:100vw; }
body{
width:100vw;
}
にすると横スクロールバーが出る（以下はみ出る）事がある。 殆どでる。 縦スクロールバーが出ないサイト以外で出る つまり殆どのサイトで100vwを設定するとはみ出る。
これはviewportの範囲内に「スクロールバー」も含まれていいるから。 つまり
100vw（幅100%）＋スクロールバー
となっているので、横にはみ出ちゃう。
では
body{
width:calc(100vw - 18px);
}
これはどうだろうか。 18pxはスクロールバーのだいたいの横幅
はみ出ない。 ところがどっこい。 今度はmacで幅が足りない。
そうですよね。 macはスクロールバーが画面端じゃなくて、浮いてる？感じだもんね。
結論（PCのwidth100vw）
1.100%が使える箇所では100%を使う 2.%でとれない箇所なら（borderとか）jsのouterWidthなどで取得したほうが良し。
borderあれこれ
border-colorは設定しなければ、文字色が表示される。 ページ毎やsection毎にborderの色が異なる場合は、あえて書かない方が 編集性が良くなるかも
.border{
border-top: solid 1px ;
border-bottom: solid 1px ;
color: red;
}
