PAS-POL模写完成。ブロックリンク。

f:id:gharuto:20200710090216j:image

PAS-POLの模写が終わりました(スマホ画面とPC画面)。

かかった期間は約10日間。

時間にすると、15時間位でしょうか。

今回はスマホ画面とPC画面を同時に作っていきました。

スマホ画面のヘッダー作ってPC画面のヘッダー作って、

スマホ画面の「PRODUCT」section作ってPC画面「PRODUCT」section作って、

という感じ。

この方が、両方に必要なdivなどの枠がすぐわかっていいです。

模写の解説。

この「PRODUCT」部分、赤枠の所(div)全体にリンクがかかっているんですよね。

f:id:gharuto:20200707101155p:plain

ここはこうやりました↓


<a href="…">
<div>
   ~
</div>
</a>

divなどのブロック要素をaタグの中に入れてもいいの?と思うかもしれませんが、HTML5からOKになりました。

(これをブロックリンクと言います)

NEWS部分↓

f:id:gharuto:20200710002223p:plain

ここもブロックリンクを使いました。

MOREボタンはブートストラップのコンポーネンツ(パーツ)で作りました。

横の矢印アイコンは背景画像なので、そこだけはマウスオン時に色を反転させることはできませんでした↓

f:id:gharuto:20200710002238p:plain

今回はブートストラップを体験してみるのが目的だったので、これでOK。

SNSボタン、フッターナビ、フッター↓

f:id:gharuto:20200710002305p:plain

トップページボタンはマウスオンすると「ニョキ」っと少し飛び出るアニメーション付きなんですが、初めてCSSのtransitionプロパティを使ってみました。

SNSボタンもブートストラップで作ったので、見本サイトとは色が違っています。

今回一番難しかった所↓

f:id:gharuto:20200710002326p:plain

スマホ画面の、SNSボタンを並べるレイアウト。

一見簡単そうなんですが、見本サイトは赤い部分は横幅固定でボタンが横幅可変になっています。

赤い部分をmargin(またはpadding):〇〇pxにしてボタンをwidthを%でやってもいいんですが、そうするとボタンがうまく真ん中に配置されない。

containerを作ったりtext-align:centerにしてみたり、色々やったのですがうまく横幅の%やpxが合わなくて、結局ピッタリ真ん中に配置はできませんでした。

flex-boxを使えばうまくできるんでしょうけど、

使わないでうまくやる方法はないのでしょうか?

<追記>

後日、背景画像をふわっと切り替わるスライドショーにしました↓

PAS-POLサイトの背景画像をスライドショーにしました。jQuery.BGSwitcherの使い方。
先日模写したのPAS-POLサイトですが、 メインビジュアルの背景画像をまだスライドショーにしてなかったのでスライドショーにしました。 ここのスライドショーは背景画像がふわっと切り替わるやつなのですが、「どうやるのかな~...

 

今後の予定。

次は何を模写しようかまだ未定です。

コーポレートサイトかカフェのサイトを自分で作ってみるのもいいかもしれない。

他にもPhotoShop、WordPress、PHPも勉強したいし、やりたいことはたくさんあります。

 

テックアカデミー無料体験はこちら↓

 
TechAcademyの無料体験
 

コメント

タイトルとURLをコピーしました