38.Webカンプからコーディングをする ～Adobe XDからデータを拾う～

本日からwebカンプを見ながら実際にコーディングしていきます。

適宜必要な知識を補充しながら進行していくので、いつも通りゆっくりです。

まずはWebカンプを確認する

Adobe XDのデータは共有するとブラウザで確認できるようになります。

非常に優しい。

ということで、ブラウザで確認しながらコーディングを進めて行きます。

ブラウザでwebカンプのデータを開いたら画面右側のメニューバーにある

「スペックを表示」　ボタンをクリック。

すると、要素のサイズや色、フォントなどが確認できるようになります。

次に必要な素材を取得していきます。

XD画面内の画像などをクリックして書き出します。

画像をクリックした状態で

画面右側を確認すると「ダウンロード」が押せる状態になっているので、クリックすると選択画像がダウンロードできます。

これで一通り、事前準備は完了です。

VSCodeでプロジェクトを作る

VSCodeで実際に作っていくためにフォルダなどを作成していきます。

プロジェクトフォルダの下にcss、img、sassフォルダを作り、直下にはindex.htmlやfavicon.icoを配置します。

この状態でVSCodeにプロジェクトフォルダを読み込ませることで対応完了です。

HTMLの記述

カンプに基づいてHTMLを記述します。

先日学習したCSS設計を意識しながら、

headerタグやdivタグにクラスをつけて書いていきます。

Sassでスタイルを適用していく

HTMLをある程度書いたら、そこにスタイルを適用していきます。

ここで、Webカンプを確認しながらデザインを再現していくわけですね。

これは余談ですが、以前初級でサイトを作った際には、

ナビゲーションをfloatプロパティを使って作成していました。

デイトラの動画ではフレックスボックスを使ってサクッと

スタイルを適用していたのに驚きました。

ということで、この後フレックスボックスについて調べたのは言うまでもありません。

話を戻して

カンプを見ながらCSS設計のコンテナとコンテンツの分離、

構造と見た目の関係を意識して

入れ子などを使って適宜スタイルを適用していきます。

流れとしては以上ですね。

言うは易し、行うは難し

最初はWebカンプを見ても、「いったいどうすれば…」

といった状況でした。

とはいえ、こうして流れを確認して再度取り組むことで

少しずつですが、前に進めるようになっていきました。

今回から時間がかかるとのことでしたが、私はさらに進みが遅くなりそうです笑

今日のまとめ

• 流れを確認して、どう進めるか１つずつ噛みしめながら進める
• CSS設計を意識することが最終的に自分を助ける（管理や修正変更）
• 常に知らないことは出てくるので都度調べて学ぶことが大事

デイトラの動画の説明の中で、普通に知らないワードが出てきたり、

何でそうするの？みたいな事が結構ありました。

ただ、調べてみるとやっぱり意味はあって、

非常に勉強になりました。

では、また。