-
VSCODEショートカットで
同じクラスとか複数の文字を同時選択して
同時修正する方法は？
ある単語を選択して
control ＋ D
-
VSCODEの
コメントアウトのショートカットは
control ＋ / でコメントアウト・解除
-
VSCODEのサイドバー表示・非表示
control ＋ B
-
VSCODE
１行をまとめて上下に移動
option ＋ ↑ ↓
-
VSCODEコード整形ショートカット
Shift ＋ option ＋ F
日本語カナモードだと反応しなくてパニくるから注意
-
<div>とか<button>の枠の縁取り太さ・色などをcss１行での書き方
.class{
border: 2px solid black;
}
のように１列で書ける。
①枠の太さ ②枠線のタイプ ③枠線色
-
font-weightの標準の太さは？
５００。少し太くしたい場合は６００。
-
ボタンの上に来たら、マウスマークをポインターマークにする記述
.class{
cursor:pointer;
}
-
CSSでのボタンホバー作成手順
① .class:hoverと、cssに書く
② .class:hover {
background-color:black; ← ホバーしたら黒になる。を書く
③ color : white; ←ホバーしたら、文字は白くなる。を指定。
}
-
transitionを超簡単に説明すると
・ :hoverで指定している変化を何秒間かけて行うか
・transitionとhoverは必ずセット
-
transition : all 2s; はどういう意味
transition : all 2s; の
allはhoverで変わる要素（colorとかsizeとか全部よ。の意味）
特定の要素だけを変更したいときは、allの代わりに特定のbackgroundとかを指定する
２sは２秒間かけて。
-
transition: color 2s ease 5s； はどういう意味？
hover のエフェクト内のcolorを２秒間かけて、easy easeをかけてhover 5秒後からエフェクトを開始するよ
-
transition:allではなく別々に書き方
transition:
color 2s ease 5s,
background-color 3s ease 4s；
-
chromeの検証ツールで色を変える時のワザ
色の四角の所をクリックすると
「カラーパレットが出てきて100発100中で色を決定できる」これは凄すぎ。2度と色で迷わない。
-
VSCODEでcssのリンクの記述方法
linkと入力すると候補で出てくる
-
css
.aaa.bbb{
.ccc .ddd{
の意味は？
.aaaと.bbbの両方を持つ要素
.cccの中の.ddd
-
マウスホバーでボタンが浮き上がり、影ができるcss設定手順
① .class:hoverを書く
② .class:hover { box-shadow: 0 0 10px Black}のように書く
③chrome検証ツールで：hovモードを選択
④chrome検証ツールで：hoverモードにチェック
→ box-shadowが出てくる
⑤box-shadowの中にツールマークが出てくる。そこで自由自在に設定できる。
-
classの振り方のワザ
<button class="aaa bbb">
のように書くと、buttonに対して
aaa というクラスと、 bbbというクラスが振られる。
-
cssで角丸の四角形を作る書き方
.class{
border-radius ： 3px ;
}
-
<button>のホバーを加えるときの
sassを使った合理的な記述法
.class{
border-radius ： 3px ;
＆:hover{
transform : translate( 2px , 2px)
}のように入れ子にして書く
-
transform : translate( 2px , 2px) とは
ただ位置が移動するだけ
-
transformプロパティができることは？
・位置移動
・サイズ拡大縮小
・回転
-
transformで位置を動かしたい時は
必ず○○と組み合わせる
translate
transform ： translate ( 50px, 50px)
のように書く
-
VSCODE
行を複製したい場合は
opt + shift + ↑/↓
-
keyframeの０〜100％を書いた。
その次にやることは？
アニメーションさせたいオブジェエクトに
@include animation（$name:○○）を書く
この時、animationの初期値を設定した別ファイルをmixinで呼び出す
-
mixinファイルの中身を呼び出してscssの中で使う記述は？
まず一番最初に
@import 'mixin';
を書く
@include ○○（animationなど）
@include animation($ name : kf-cover-slide);
-
&:hover {
transform: scale(1.3);
}
のようにhoverしたら拡大する設定がある場合
これを滑らかにする記述方法は？
・hoverの上要素にtransitionを書く
・transition : transform
・transition : transform 0.3s ease;
-
VSCODEショートカット
行を複製する
shift ＋ option ＋ ↓
-
