見出し画像

【ユニット３】HTML/CSSコーディング復習・Emmet・スニペット（2024/8/31~9/9）-デイトラweb制作

みや

ユニット１では、基礎的なHTMLとCSSの学習を行い、ユニット２ではケーキ屋さんのサイトをお手本を見ながら実装しました。

ユニット３は、以下３部の構成で学習を進めました。


1. HTML/CSSコーディング復習

課題

  • 出来るだけ動画を見ずにゼロからコーディングしてみよう

  • 目標は6時間で完成

感想

全く見ずには無理だったので、復習を挟みながらできるだけ自力で実装できるように進めました。
1周目では言われるがままに書いていたコードも、理解しながら書けるようになったように感じます。やはり、目的を持って取り組むと定着率が上がるように思いました。
まだまだ、全てを自力で実装は難しいなぁと思いつつも、慣れるしかないと思うので、作業にならないように気をつけながら数をこなしていきたいと思います。

2. コーディングのスピードを上げるための便利なEmmet機能を覚えよう

01.【Emmet略語の展開】HTML基本編

  • idおよびclass属性

  • 入れ子

  • 隣接

  • 繰り返しに便利なEmmet

02. 【Emmet略語の展開】HTML応用編

  • 上の階層に戻る

  • グルーピング

  • 属性

  • テキスト

  • 連番

  • 閉じタグにコメントアウトの自動挿入

  • HTMLの型を展開

03. 【Emmet略語の展開】CSS基本編

CSSのEmmetの基本の書き方は、「プロパティ名(省略形):値(省略形)」
プロパティのイニシャル、バリューの数値もしくはイニシャルを省略形として入力すると大体できて、できないときにはチートシートで確認すること。
「:」も省略することが可能。

04. 【Emmet略語の展開】CSS応用編

%の略語は、p
バリューが0.??の時にはpxでなく、emの単位で補完される
バリューの複数指定の場合、「-」で繋ぐ
!importantの展開には癖あり
プロパティの複数指定の場合、「+」で繋ぐ

05. Emmetアクション① バランス内側・外側

バランス外側は選択位置から一つずつ外側のタグを選択できる。
「ctrl+shift+cmd+b」をバランス外側のショートカットに設定。

バランス内側はその逆で、内側のタグを選択できる。
内側はそこまで使わないので、ショートカットは割り当てせず。

06. Emmetアクション② 値の増加・減少

バリューを増減するEmmetアクション。
「ctrl+shift+cmd+down」を1ずつ減少のショートカットに設定。
「ctrl+shift+cmd+up」を1ずつ増加のショートカットに設定。

07. Emmetアクション③ ラップ変換・タグの更新・数式の評価

ラップ変換は、選択部分を特定のタグで包むことができる。
私はVS Code拡張機能の「htmltagwrap」を入れて使うことにしました。

タグの変換は、divタグをsectionタグに変更したい場合などに要素を更新することができる。
私はVS Code拡張機能の「Auto Rename Tag」を入れて使うことにしました。

数式の評価は、単純な数式を計算してくれる。
使う場面は限られるとのことなので、記憶しておくに留める。

08. Emmetアクション④ イメージサイズの更新・行のマージ

イメージサイズの更新
imgタグにwidth属性とheight属性を付与できる。
私は「ctrl+shift+cmd+i」をショートカットに設定しました。

【レイアウトシフトに関する参考サイト】
Cumulative Layout Shift の最適化
【徹底解説】imgタグのwidth/height属性は絶対に指定した方が良い

行のマージ
HTMLの複数行を一行に結合できる。
使用頻度は高くないため、ショートカット割り当てはせず。

09. 【おまけ！】おすすめのVS Codeキーバインディング設定

新しいファイルを作成
ctrl+shift+cmd+n

新しいフォルダーを作成
ctrl+shift+cmd+f

ショートカットが多くなって混乱してきたら、
「キーボードショートカット」の3点リーダーから「ユーザーのキーバインドを表示」を選択して、管理ができる。

10. 【おまけ！】その他おすすめのVS Code設定

ハイフンで繋がれた単語をダブルクリックで選択できるように、設定画面から変更しました。

感想

基本的なEmmetについては、ユニット２にてすでに紹介されていた、はにわまんさんの記事で学習済みでした。ですが、今回は文章でなく動画で実際にコードを打っている様子を見ることができたので、よりよい復習の機会となりました。また、応用も知ることができ、使える場面でできるだけ実践していこうと思います。

3.コーディングのスピードを上げるためのスニペットを作ろう

01. スニペットの重要性やメリット

  • 生産性の向上

  • 品質の向上（バグやエラーが少なく安定した動作・コードに一貫性が保たれる）

注意点：品質が保たれるということは、品質が悪いコードを再利用してしまうと悪い品質が保たれてしまうということ。

02. 【Notionを使ったスニペット集を作ろう①】 導入と基本操作

Notionの導入と基本操作について視聴。

Notionのマークダウンショートカット
キーボードショートカット – Notion (ノーション)ヘルプセンター
多彩な表現方法とショートカット、markdown記法

03. 【Notionを使ったスニペット集を作ろう②】 スニペット集の作成

Notionへのスニペット登録方法を視聴。

過去の受講生のNotion活用例
VS Codeに登録すべきEmmet登録用スニペット130種

04. VS Codeのユーザースニペット機能

ユーザースニペット登録方法を視聴。

【追加で参考にしたサイト】

ユーザースニペットに関するドキュメント
Visual Studio Code のスニペット#スニペット構文

注意点：PHPの開始タグと終了タグ「 <?php?> 」を含むスニペットは、グローバルスニペットかhtml.jsonに登録すること。php.jsonに登録したスニペットは、PHPの開始タグの中でのみ展開することができる。

05. 【おすすめプラグイン Easy Snippet】VS Codeの拡張機能を使った簡単登録方法

拡張機能「Easy Snippet」の追加
Easy Snippet

「Easy Snippet」の登録エラーについて
登録するJSONファイルの中に文法エラーが残っていたり、登録するJSONファイルの中身が空になっていると「Unexpected token “」のエラーが表示され登録することができない。
エラーのチェックとしてChatGPTを使っても良い。

06. 【おすすめユーザースニペットの紹介①】HTML編

おすすめのHTMLのスニペットを登録

07. 【おすすめユーザースニペットの紹介②】SCSS編

おすすめのSCSSのスニペットを登録
SCSSは未学習。

08. 【おすすめユーザースニペットの紹介③】JavaScript編

おすすめのJavaScriptのスニペットを登録
JavaScriptは未学習。

09. 【おすすめユーザースニペットの紹介④】PHP編

おすすめのPHPのスニペットを登録
PHPは未学習。


感想

１では実装を自力で行うことに挑戦しました。覚えられていないものも多くあり、復習を重ねましたが、より実践を意識した学習のきっかけとなりました。慣れがなにより大切だと感じたので、より多く手を動かしていければと思います。
２と３に関しては効率化に関するTipsが多く紹介されていました。すべてを使用することは現段階では難しいですが、取り入れられるものから取り入れていきたいと思います。

この記事が気に入ったらサポートをしてみませんか？