DIGSMILE INC.
コーディング
http://hikagami.site/cording07/
Codestep様が公開しているXDデザインカンプ「【HTML/CSS コーディング練習】中級編：ストアサイト（インテリア）／グリッドレイアウト」をお借りしてコーディングしました。
900pxにブレイクポイントを設定したレスポンシブサイト。モバイルファーストで行っています。
グリッドレイアウトの使用は初めてだった為、topページは同一サイズに格子状に並べ、product01ページはgrid-rowとgrid-columnで変則的に配置、product02ページではgrid-template-areasとgrid-areaでエリア指定と、各ページで方法を変えて配置しました。
今回はaboutページ、pruductページ、companyページと複数のリンクページを作成。style.cssで全てのページのスタイルを指定する為にid、class名の使い分けに留意しています。
companyページのインフォメーションの表がモバイルとPCで変則的だった為、CSSにて力技でコーディングしましたがもっとスマートなやり方があったのではと振り返ります。レスポンシブさせながらgooglemapを正方形に配置する方法にハマりましたが、結果的にpadding-top:100%;でwidthに合わせ、position:absolute;で配置。
レスポンシブでの正方形配置はありそうで今まで無かったので学びになりました。