はじめに
2024年10月からデイトラのWeb制作コースの受講をスタート。
現在は初級編を終えて、中級編に突入しました。
アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。
OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。
これからデイトラWEB制作コースの受講を考えている方
実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！
現在進行形でWEB制作コース受講中の方
一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！
卒業生の先輩方
懐かしんでいただければ・・・笑
自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。
中級編DAY4の押さえておきたいポイント
Web制作の流れ
- ヒアリング
- 仕様決定
- デザイナーがデザインを作成
- デザインデータから静的にコーディング
- 案件によってはWordPressテーマ化など
- 納品
Webコーダーとしては、デザインデータからのコーディングスキルが必須！
Figmaの基本
開発モードとデザインモードがある。
コードのトグルをONにすると開発モードになる。
拡大・縮小
command⌘を押しながらマウスホイールを上下に動かす。
移動
手のひらアイコン時にクリック + ドラッグ。
手のアイコンにするには、ショートカット H。
画像ダウンロード
画像のダウンロードは、アセットでもエクスポートでもダウンロードができるが、
エクスポートの方が倍率を指定してダウンロードができるので、よい。
VSCodeのショートカット復習
行の複製 ： option + shift + ↓
次の行にカーソルを移動（行の途中からでも可） ： cmd + Enter
同じ単語を複数選択 ： （単語をドラッグして選択した上で） cmd + D
Figma for VSCode
要素を選択して、class名を入力、波括弧を展開すると
必要なプロパティをブロック丸ごと提案（または個別のプロパティを提案）してくれる。
body単位で設定するプロパティも含まれるため、不要なものを削除していくとコード全体が綺麗になる。
ExtractionCssSelector
class名を一括取得できる。
コピーしたい範囲を選択して、右クリックからコピーすることが可能。
画像のダウンロード
画像の保存先は設定から指定が可能。
FigmaforVScodeでダウンロードするときは1つずつのダウンロードになる。
一括で画像をダウンロードしたい場合は、Figmaをつかうと可能。
中級編DAY1の追加で調べたいことメモ
- Figmaのアプリで画像一括ダウンロードやってみる。
中級編DAY1の感想と記録
FigmaforVsCodeも、ExtracitonCssSelectorもすごい！！
コピペって簡単だけど地味に時間がかかるし、
正確にコピーできない（1文字欠落とか）こともあるので、
こういう補助機能があるのはさすがだなぁ・・・と思いました。
ただ、使いこなせないと意味がないので、この中級編でしっかり自分のものにしていきたい！！
引き続きがんばろう！
