-
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 ＋ ↓
ログイン
オンライン単語帳
このページを利用するにはログインする必要があります。ログインするとAnkilotをより便利にご利用いただけます。