コピーしました！
上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。
デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。
といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。
こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。
毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します
過去に何度も挫折した私の記録はこちら→過去のブログ記事
ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。
【デイトラDay11】Emmetを使いこなそう！
Emmet（エメット）とはHTML、CSSのコードを入力する際に省略できるツールです。
効率的にコーディングするために役立ちます。
今回はEmmetの活用方法を学びましたので記録を残しておきたいと思います。
基本的な活用法、チートシートを活用して効率的なコーディングを目指しましょう！
Emmet効率良く学ぶ道具の紹介
初学者の僕はEmmetを活用しようとしても、活用するワードを知らなければ逆にコード入力に時間がかかってしまいます。
そんな時には「チートシート」をまずは活用します。
チートシートを活用しながらまずは覚えていこうね
初学者のうちはそもそも「コードの意味がわからない」なんてことも多いはず！
その場合は無理にEmmetを使う必要はないので、徐々に使える種類を増やしていくことを意識しこう。
【デイトラDay11】デイトラで学んだEmmet展開の種類
Day11で学んだHTML．CSSを以下にまとめました。
HTMLのEmmet展開
- idとclass属性の展開
- 入れ子
- 隣接
- 繰り返し
- 要素の省略
これらの基本的HTMLのEmmet展開を学びました。
<!-- 「div.class名」で展開 -->
<!-- 「.class名でも展開可能 -->
<div class="class"></div>
<!-- 「div＃class名」で展開 -->
<div id="class"></div>idはページ内で唯一であるべき要素を識別し、JavaScriptやCSSで個別に操作できます。classは複数の要素に同じスタイルや操作を適用し、グループ化するために使用します。idは一意性が必要であり、classは複数の要素に適用可能です。
このようにEmmet展開について学ぶ事ができました。
学んだことをすべて書きだすと時間がかかるのでこれまでにしますが、HTMLに関しては以下の応用についても学びました。
- 上の階層に戻る
- グルーピング
- 属性
- テキスト
- 連番
- 閉じタグにコメントアウトの自動挿入
- HTML型の展開
代表的な「HTML型の展開」ですが「！」＋Enterで下記のように展開されます。
<!-- 「!」で展開 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>こちらはHTMLを書き出す際に必ず入力するコードとなっています。
「！」一つで展開されるので必ず覚えておくEmmetとなります。
CSSのEmmet展開
- プロパティ名＋値の展開
CSSの展開方法についても学んだので少し記録として残しておきます。
基本的なことですが、、CSSのクラス名の中に「プロパティ＋値」を入力します
h2{
/* p10で展開すると */
padding: 10px;
/* p10-20-30-30で展開（数字をハイフンでつなぐ） */
padding: 10px 20px 30px 30px;
/* bd1-solid-#fff といった英語の展開も同様 */
border: 1px solid #fff;
/* p10!で！importantの展開が行われる */
padding: 10px !important;
}CSSで!importantを使用すると、そのスタイルルールが他のすべての同じプロパティに対するルールよりも優先されることを指定します。これにより、通常のカスケーディング規則に従ってスタイルが適用されるのではなく、強制的に指定したスタイルが適用されます。これは、スタイルの上書きを強制したい場合や、特定のスタイルが優先される必要がある場合に便利ですが、過度に使用するとスタイルの管理が難しくなる場合があります。
【デイトラDay11】Emmetアクションの活用方法（ショートカットキー活用）
続いては実務でよく使うショートカットキーを登録する方法を学んでいきます。
Emmetアクションは、Emmetプラグインやエクステンションに組み込まれた機能の1つです。これは、Emmetのショートカットや記法を使用して、HTMLやCSSのコーディングをより効率的に行うことができる機能です。
ではVScode（コードエディターは何でも構いませんがここではVSコードを使っています）を開いてEmmetアクションを展開します。
( shift＋command＋P ）をクリックすると以下の画面
今回は【Emmet:バランス（外側）】を選択します。
例で以下のコードを準備しました。カーソルが「デザート」にあたっていると思います。
ここでEmmetアクションを実行します。
( shift＋command＋P ）→【Emmet:バランス（外側）】をクリックすると以下の画面
このように選択していた項目の外側をまとめて選択してくれます。
さらにもう一度同じアクションを行うと「ul」を囲むような形になります。
このアクションはよく使うのでショートカットキーの登録をします。
Emmetアクションをショートカットキーに登録（VScode）
( shift＋command＋P ）をクリックすると以下の画面
画面右の「歯車」マークをクリックします。
コマンドの編集画面になるので画面右の「ペン」マークをクリック。
そうするとコマンドの設定画面が出るので任意のキーを順に押します。
( cotrl+shift+command+b )で登録しました。
ショートカットキーを登録しなくてもEmmetアクションを使うことができますが、よく使うコマンドはこのように登録しておくとコードを書いていく際の時間短縮に繋がります。
この動作じたいは少しの短縮にしかなりませんが、これから多くのコードを書くことになってくるので、長い目で見れば多くの時間の短縮に繋がります。
便利だと思って、いくつもショートカットキーを登録すると管理が複雑になるので注意です。
【デイトラDay11】で登録したEmmetアクション
- 1ずつ数値の増加【control + shift + command + ↑ 】
- １ずつ数値の減少【control + shift + command + ↓ 】
- ラップ変換【control + shift + command + M】
- タグの更新【control + shift + command + L】
- イメージサイズの更新【コマンド未登録 Emmetアクションの使用】
今回
【デイトラDay11】よく使うコマンドを登録（ショートカットキー活用）
次によく使うコマンドをショートカットキーに登録していきます。
HTMLまたはCSSのページで画面右下の歯車マークの「キーボードショートカット」または以下のコメントを入力します。
(command+S そしてcommandキーを押したままSは外してKをクリック
すると、ずら〜っとキーボードのショートカットキーが出てきます。
今回は良く使うファイルの新規作成のコマンドをショートカットキーに追加しました。
- 新しいファイルを作成【control + shift + command + N】
- 新しいフォルダを作成【control + shift + command + F】
【デイトラDay11】まとめ (おまけ)
Day11の講義の最後に一つ！効率よくコーディングするためのテクニックを学んだので記録しておきます。
下の図で説明すると、「section‐list」をダブルクリックで全選択したい場合でも「ー（ハイフン）」のあとの文字が選択されず、「section」のみが選択されます。
HTMLのクラスをCSSで活用する際にこのダブルクリックしてコピー＆ペーストは良く使うと思うんですが、上記のような一部しか選択されないと不便ですよね？
そういったときの対処法がこちら。
画面左下の歯車マーク「設定」をクリック
↓
「Editor:Word Separators]
↓
「ー（ハイフン）」のマークを削除
今回はEmmetの活用について学んできましたが、実はこの講義も２周目なんですよね。
一度わかったつもりで先に先にと進んでここまで戻ってきましたが、こうやって振り返ると忘れている事がほとんどでした。
アウトプットせずに進むとこんなに取りこぼしがあるのか…
と強く感じています。
先に進む事もモチベーションのアップになるけど、１つ１つ覚えて行くことも大切だね
今回のようにこれからもブログでゆるくアウトプットしながら講義も進めていきたいと思います。
