DAY1:XDからヘッダーとメインビジュアルのコーディング

HTMLとCSSの基礎を学び、コーディング模写まで経験している方なら「できる!」ということで、今回の課題は全編を通じてXDのデザインカンプからコーディングするということをやっていただこうと思います。

このデザインカンプからコーディングすることがコーダーとしての仕事の全てです。なので、30日間で慣れていただければと思います。

最初は、ヘッダーとメインビジュアルです。XDの使い方を覚えつつ0からコーディングしてみてください!

課題:XDからヘッダーとメインビジュアルのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。

https://xd.adobe.com/spec/f0438c7d-57a8-40bc-7cfc-fce8aea00b90-8672/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

使い方は、こちらの「共有されたXDの使い方」の項目を参考にしていただけたらと思います。

Adobe XDのデザインカンプをURLで共有するメリットと使い方(※コーダー視点)

コーディングに必要な値はXDのデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • ヘッダーは上部に固定
  • レスポンシブでスマホ、タブレットでもいい感じに表示
  • スマホ時のメニュー(メニュー1とかの箇所)は(ひとまず)非表示

0からコーディングする時に参考になりそうな記事

今回の30DAYSでは0からコーディングしてもらいます。

模写コーディングなどで自分なりのやり方がある方もいると思いますが、改めて0からHTMLサイトを作る時に役立ちそうな記事を貼ったので、まず何からすればいいか分からない方は参考にしていただけたらと思います。

【コーディングできる状態になるまでの準備】

仕事で0から静的サイトのHTMLコーディングする時の流れ(主に準備部分)

【よくあるレイアウトの作り方】
今回も使えると思います。

レイアウトの基本である.innerの中央寄せを覚えよう!

【ブレークポイントの決め方】
「いい感じでレスポンシブ…」と言われた時のブレークポイントの決め方です。
※ 完全に我流なので、これを正解と思わずに色々と調べてみてください!

レスポンシブのブレークポイントの決め方!PCデザインカンプから再現する際のベスト

余裕があったら…

※ 別のHTMLファイルに作成してください。

ヒーローイメージで作成

ヒーローイメージとは、ファーストビューが画面いっぱいに画像のビジュアルで覆われているデザインのことです。

スマホでもPCでも画像が画面いっぱいに表示されるようにしてみましょう。

色んなヘッダーパターンをコーディング

色んなヘッダーパターンを作成したので、チャレンジしてみてください。コーディング模写もそうですが、デザインを見た時にコーディング方法が頭に浮ぶ状態になるまで、手を動かしまくるのが上達のコツです!
https://xd.adobe.com/spec/a05c5ee9-27a3-42cb-5985-801adec0516f-d66d/

※ 今回の30DAYSで使う写真は以下から使わせていただいております!

Photo by Helloquence on Unsplash


Photo by Thought Catalog on Unsplash

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事