05JavaScript start 20220609

単語カード

設定全面表示

• 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　＋　↓

広告

コメント