PAS-POLの模写が終わりました(スマホ画面とPC画面)。
かかった期間は約10日間。
時間にすると、15時間位でしょうか。
今回はスマホ画面とPC画面を同時に作っていきました。
スマホ画面のヘッダー作ってPC画面のヘッダー作って、
スマホ画面の「PRODUCT」section作ってPC画面「PRODUCT」section作って、
という感じ。
この方が、両方に必要なdivなどの枠がすぐわかっていいです。
模写の解説。
この「PRODUCT」部分、赤枠の所（div）全体にリンクがかかっているんですよね。
ここはこうやりました↓
<a href="…">
<div>
～
</div>
</a>divなどのブロック要素をaタグの中に入れてもいいの？と思うかもしれませんが、HTML5からOKになりました。
（これをブロックリンクと言います）
NEWS部分↓
ここもブロックリンクを使いました。
MOREボタンはブートストラップのコンポーネンツ（パーツ）で作りました。
横の矢印アイコンは背景画像なので、そこだけはマウスオン時に色を反転させることはできませんでした↓
今回はブートストラップを体験してみるのが目的だったので、これでOK。
SNSボタン、フッターナビ、フッター↓
トップページボタンはマウスオンすると「ニョキ」っと少し飛び出るアニメーション付きなんですが、初めてCSSのtransitionプロパティを使ってみました。
ＳＮＳボタンもブートストラップで作ったので、見本サイトとは色が違っています。
今回一番難しかった所↓
スマホ画面の、ＳＮＳボタンを並べるレイアウト。
一見簡単そうなんですが、見本サイトは赤い部分は横幅固定でボタンが横幅可変になっています。
赤い部分をmargin（またはpadding）:〇〇pxにしてボタンをwidthを％でやってもいいんですが、そうするとボタンがうまく真ん中に配置されない。
containerを作ったりtext-align:centerにしてみたり、色々やったのですがうまく横幅の％やpxが合わなくて、結局ピッタリ真ん中に配置はできませんでした。
flex-boxを使えばうまくできるんでしょうけど、
使わないでうまくやる方法はないのでしょうか？
＜追記＞
後日、背景画像をふわっと切り替わるスライドショーにしました↓
今後の予定。
次は何を模写しようかまだ未定です。
コーポレートサイトかカフェのサイトを自分で作ってみるのもいいかもしれない。
他にもPhotoShop、WordPress、PHPも勉強したいし、やりたいことはたくさんあります。
テックアカデミー無料体験はこちら↓
コメント