DAY6:XDからテーブルとGoogleMap埋め込みのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY5の続きからコーディングする感じになります。

https://xd.adobe.com/spec/ac246482-0f5e-4279-658b-9e04b0f609ce-da15/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。
Slackへのグループ参加は東京フリーランスをご参考ください。

【テーブル】

【マップ(埋め込み)】

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

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

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

  • テーブル下の「お問い合わせ」はリンク(中身は空でOK)
  • 埋め込む地図の住所はどこでもOK(※ 共有する人は個人情報とかに注意)
  • 地図はタブレット、スマホ問わず縦横比は変わらない
  • 「Googleマップで見る」は該当のGoogleマップへのリンク

参考になりそうな記事

Googleマップの埋め込みが分からない方は以下の記事を参考にしてみてください。

Googleマップの埋め込みタグの取得方法とレスポンシブ対応するためのCSS

テーブルは自力でできそうですが、一応…

CSSでテーブルを作る上で実践的に覚えておきたいこと

余裕があったら…

※ デザインカンプの再現は別のHTMLファイルに作成してください。

PerfectPixelでチェック

DAY3でやった内容になります(DAY8あたりまでは同様にセクションを足していくので最後にまとめてチェックでもOK)

比較用の元画像

他のテーブルのパターン

テーブルの他のパターンもいくつか作ってみました。余裕がある方はチャレンジしてみてください。
https://xd.adobe.com/spec/eaa65528-0ca5-4874-6a44-2aed761a5d04-9c97/

Youtubeの埋め込みもしてみる

Youtubeなどの埋込みも同様に縦横比を維持したままレスポンシブ化できるか実際に確認してみるといいかもしれません。

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

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

関連の記事