Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【初心者向け】コーディング効率化(Emmet, ショートカットキー)

【初心者向け】コーディング効率化(Emmet, ショートカットキー)

チーム内勉強会で使用した資料です。

kaedefuseya

July 17, 2022
Tweet

Other Decks in Education

Transcript

  1. コーディングを速くする⽅法 経験、知識 絶対配置なら position:absolute; 共通パーツや 変数を使う ここはsection? ただのdiv? リストの先頭は 擬似要素

    このレイアウトは gridじゃないと無理 別案件の似た実装を 参考に改造 中央寄せは margin:auto; 「よくある質問」は dt,ddで組む
  2. グループをたくさん ⼊れてみる ややこしい div>h2+p^div>span ↓ <div> <h2></h2> <p></p> </div> <div>

    <span></span> </div> ^でひとつ上の階層に戻る ⼩刻みに展開していくほうが わかりやすい気もする
  3. タグ展開じゃない操作① Wrap変換 Emmet:WrapwithAbbreviation \便利/ 元のテキスト ul>li ul>li* リスト1 リスト2 リスト3

    <ul> <li> リスト1 リスト2 リスト3 </li> </ul> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul>
  4. 若⼲変になるけど 整形すればどうにかなる ときどき使う例 バランス選択からの Wrap変換 <div class="container"> この⽂章はダミーです。 </div> ↓

    <div class="container"> この⽂章はダミーです。 </div> ↓ <div class="container"><p> この⽂章はダミーです。 </p> </div> ときどき変換失敗する
  5. よく使うCSS .test { w300 df fz2r c#0 mb20 m10-a bdb

    } .test { width: 300px; display: flex; font-size: 2rem; color: #000; margin-bottom: 20px; margin: 10px auto; border-bottom: 1px solid #000; }
  6. とりあえず基礎的なところから プロジェクト内検索 F + Ctrl + Shift ファイルを開く P +

    Ctrl ← + Ctrl 単語の区切りで カーソルを移動 → ここだけだとファイル内検索 R + Ctrl ようこそ画⾯なら VSCode
  7. ⾏を上下にコピー ↑ + Alt + Shift ↓ ⾏を上下に移動 ↑ +

    Alt ↓ D + Ctrl 選択中の⽂字列と 同じ⽂字列を選択 ⽂字列とか⾏とかの操作 L + Ctrl + Shift 全選択は VSCode
  8. 設定が必須 フォーマッタ ※ エディタ本体の操作 タブ切り替え Tab + Ctrl コード整形 F

    + Alt + Shift , + Ctrl 設定を開く PageUp PageDown でも可能 VSCode
  9. AdobeXD L + Ctrl 8 + Ctrl E + Ctrl

    G + Ctrl Shift + ロック、解除 アウトライン化 書き出し グループ化、解除 (テキスト) いらない Shift 解除も
  10. 無関係なキーは気合で慣れる 英単語の意味から拾うと少しはわかりやすい ←ExportのE E + Ctrl XDの書き出し ←ScreenのS? S +

    Ctrl + Shift 画⾯キャプチャ ←FormatのF F + Alt + Shift コード整形 ←FindのF F + Ctrl 検索 覚えられなくない?