はじめに
2024年10月からデイトラのWeb制作コースの受講をスタートしました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
初級編DAY11の押さえておきたいポイント
HTML Emmet 基本
- 要素
- idおよびclass属性
idは#（シャープ）をつけてid名を指定する、classは.（ドット）をつけてからclass名を指定する
複数のclassを指定することができる - 入れ子
>（大なり記号）でつなぐことで配置できる
複数の入れ子を指定することもできる - 隣接
+（プラス記号）でつないであげることで隣接配置ができる。
例えば、 dl>dt+dd これでこうなる↓
また、このときdtの編集点からddの編集点へはTabキー押下で移動できる。
<dl>
<dt></dt>
<dd></dd>
</dl>- 繰り返し
*（アスタリスク）のうしろに繰り返したい回数を入力することでその数分展開される
くり返ししたい要素がなんなのかは意識して記述が必要。
補足
いままでの講義では、
.classを展開すると、divタグを補完してくれていたが、必ずしもdivになるのではない！
VS Codeが入りそうなタグを選んで補完してくれる。
たとえば、ulタグの中ならliタグで補完してくれたりする。
※チートシートの下の方、Implicit tag namesの欄に補完してくれる例が記載あり。
HTML Emmet 応用
- 上の階層に戻る
^（キャレット記号）のあとに書かれたタグは1つ上の階層に戻って展開される。
複数の階層戻りたい場合は、キャロット記号を複数つけることで、複数の階層を戻ることができる
ul>li^p
↓
<ul>
<li></li>
</ul>
<p></p>- グルーピング
()かっこで囲むことでグルーピングが可能
dl>(dt+dd)*3
↓
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>- 属性
[]の中に入力したい属性を書くことで、属性を付与して展開できる
複数指定したい場合は、半角スペースを開けて指定すれば複数指定して展開も可能。
- テキスト
{}の中に入力したいテキストを書くことで、テキストが入力された状態で展開できる。
- 連番
くり返しと$ドル記号を組み合わせることで連番を付与することができる。
桁を増やしたい場合は、$マークを桁数分入力する（001としたければ$$$）。
連番を0から始めたい場合は、$@0と、＠をつけて開始番号を指定する。
class名だけでなく、テキスト本文などでも利用可能。
section.section$*3
↓
<section class="section1"></section>
<section class="section2"></section>
<section class="section3"></section>- コメントアウトの自動挿入
Emmetを展開するときに、|cを入力することで、コメントアウトをつけることができる。
ただし、入れ子にコメントアウトをつける場合は、親と子の両方にコメントが挿入されてしまうので注意。
div.className|c
↓
<div class="className"></div>
<!-- /.className -->- HTMLの型を展開
! ＋ Tabキー
CSS Emmet 基本
プロパティ名(省略形):値(省略形)
: については省略可能。
ただ、アルファベットが続く場合は:入れないと展開できないものはある。
例えば、m:a → margin: auto;
CSS Emmet 応用
- 値の複数指定
値をハイフンｰでつなぐことで複数の値をまとめて指定できる。
p10-20-30-20 → padding: 10px 20px 30px 20px; - important
!をつけることで!importantをつけることができる
ただ、バグ？なのか・・・
:!で指定するか、!を入力したあとに一度削除してからもう一度!を入力しないと展開できない。 - プロパティの複数指定
+（プラス記号）でプロパティを繋ぐことで複数のプロパティをまとめて指定し展開することができる。
w10+h20 → width: 10px; height: 20px;
Emmetアクション バランス内側・外側
バランス外側
現在のカーソルや選択位置の外側のタグをまとめて選択できる
My settings
^ctrl+Bにした！絶対便利だから！
※もともとカーソルが左に移動するショートカットだったと思う
バランス内側
現在のカーソルや選択位置の内側のタグをまとめて選択できる。
値の増加・減少
数字の値を1刻み、10刻み、0.1刻みに増加・減少できる
My settings
ctrl+alt+- 1ずつ減少
ctrl+alt+= 1ずつ増加
ラップ交換
テキストやタグを選択して、その選択した部分を特定のタグで包むことができる
My settings
^ctrl+w ^ctrl+p
コントロール押しながら、W、Pを押下すればOK！wrapの略にしてみた。
タグの更新
divタグをsectionタグに変更したい場合などに要素を更新することができるが、
VS Code拡張機能の「Auto Rename Tag」を使うので私は不要。
数式の評価
単純な数式を計算してくれる。
イメージサイズの更新
imgタグにwidht属性とheight属性を付与してくれる。
レイアウトシフト対策のため、imgタグにはwidht属性とheight属性を指定することが推奨されています。
My settings
^ctrl+I（アイ） イメージサイズの更新
行のマージ
HTMLの複数行を一行に結合することができる
おすすめのキーバインディング設定
My settings
ctrl+shift+cmd+n ： 新規ファイル作成
ctrl+shift+cmd+f ： 新規フォルダ作成
WordSeparators
header-logoのようなハイフンで繋がれた単語をダブルクリックで選択した場合、「 – 」で単語が区切られて選択される。
単語の区切りから「 – 」を抜くことで、header-logoをダブルクリックで一括選択できるようになる。
CSSやCSなどで＃や.が煩わしい場合は削除してもよいかも！
私はいったんハイフンのみ削除。
Trial and Error memo
初級編DAY11の追加で調べたいことメモ
- レイアウトシフトってなあに？参考サイトを読んで調べてみる
初級編DAY11の感想と記録
Emmet便利〜！！！
キーバインドも自分好みで登録できるなんてすばらしすぎる・・・
慣れるまではやっぱり時間かかりそうだけれど、
最初のうちはどうせコーディングするのにも時間がかかるんだから、なるべくEmmet意識して使うようにしよう。
手が慣れるまでが勝負！
引き続きがんばろ〜！！
