2ndのDAY16の課題は「XDからフッターのコーディング」になります。
DAY15までの課題にフッターをレスポンシブ込みで追加していきます。これでDAY1から続けてXDからのコーディングシリーズで一つのLPの見栄えが完成することになるんですかね。
XDのデザインカンプから読み取れる情報以外の条件は以下の通りです。
- リンクは全体的に不要
- スマホ時は要素を縦並びにする
- 背景はグラデーション
では、早速いってみましょう。
HTMLの構成
ポイントは右下のトップに移動するボタンになるかと思いますが、これはpositionプロパティを使って実現するのかなぁとこの時点では考えています。
HTMLのみを実装
Twiterとかのリンクと右下のトップへの移動するアイコンはFont Awesomeを使って表示できてるはずなんですが見えてないですね・・・。
ただ背景にとけこんでるだけだと信じてスタイルをあてていきたいと思います。
CSSを実装
こんな感じになりました。
HTMLのみを実装した際に表示されていなかったSNSのリンクとトップへの移動のアイコンはFont Awesomeを使用してましたが、デザインカンプをよく見るSVGファイルになってたので、ダウンロードしてimgタグに指定して事なきを得ました。
各要素の配置はFlexboxで行い、トップへの移動のアイコンは想定通りpositionプロパティを使用することで実装できました。
レスポンシブ対応
レスポンシブ対応に対しての条件は「スマホ時は要素を縦並びにする」なので、タブレットはフォントや余白の調整のみで、スマホ時はFlexboxのflex-basisプロパティの値を100%にすることで縦並びを実現しました。
タブレット。
スマホ。
感想・まとめ
デザインカンプをきちんと確認せずにSNSアイコン、トップへ移動のアイコンをFont Awesomeで実現するんだと決めつけてしまったのは反省点。余計な手戻りの要因になるので、決めつけて作業を進めないけど。
要素の配置自体はContactセクションやCardセクションでFlexboxを使用していたので、特に苦労することなく実装できたのは良かった。
しかし、ブラウザの幅を1420pxより小さくするとヘッダーだけはみ出してしまうという現象が発生し、解決できなかった・・・。
こんな感じです。
東フリのSlackで質問して、他の人にプログラムをダウンロードしてもらってみたけど、その方の環境だと現象は発生しなかったとのことなので、とりあえずそこは無視して先に進みますがモヤモヤ感がたまりません。
自分のDAY8までのソースはGitHubに保管してますので、参考にどうぞ。
https://github.com/Jyu2Jr6/30daystrial-2nd/tree/day8
