【2020/12/20】jQueryとEmmet記法【記録】
2020/12/20
- jQuery標準デザイン講座 Lesson27-29
- Emmet記法 ドットインストール Lesson9-12
jQuery標準デザイン講座
最終章で、難易度MAXです。さすがに難しかったです。
でも、それまでのLessonで非常に丁寧な説明があって、自分自身の経験値が上がってきていたので、やりごたえのある内容でした。
ただ、演算や要素を配置する設計など、あらかじめ準備してもらっている分ハードルは下がっていたと思います。
自分ひとりでどのような要素を用意して、どう操作するかというところまで考えなければならないとなると、まだまだ実践練習が必要だと実感しました。
Emmet記法 ドットインストール
これで一通りEmmetは勉強しました。
あとは、使うのに慣れていくだけだと思います。
ぶっちゃけVSCodeを使っていると、標準でEmmet自動変換・補完機能が使えるので多少は使い慣れていますが、もっと効率化できるところは残っているので実践していきたいと思います。
講義ごとのリンクを貼っておきます↓↓
＃０１：Emmetを使ってみよう
- 公式サイト
- index.htmlの作成
- !
- チートシート
＃０２：HTMLのタグを展開してみよう
- div
- a
- タブストップ
＃０３：タグの属性を指定してみよう
- #id
- .class
- []
- {}
＃０４：複数の要素を展開してみよう
- *
- 連番の指定
＃０５：階層を表現してみよう
- >
- +
- ^
- ()
＃０６：暗黙的な補完機能を活用しよう
- divの補完
- liの補完
- tr､tdの補完
- form:post
- input:t
- input:c
- input:r
- select
- m
- p
- m10
- p10
- m10p
- m10r
- m10p20p
- m10-20-30
- mb10
- font-size: 20px;
- cursor: pointer;
- font-weight: bold;
- position: absolute;
- position: relative;
- Wrap with Abbreviation
- Wrap Indivisual Lines with Abbreviation
＃１１：画像に関する情報を取得してみよう
- Update Image Size
- Evaluate Math Expression
- snippets.json
- Emmetの設定
- 動作確認
<ではまた、Salut!!>
プログラミング学習の経過・全容はこちらにまとめてあります！
興味がありましたら、チェックしてみてください（＾＾）
教材
jQuery
