STUDIOの勉強日記~3日目〜

ブログランキング・にほんブログ村へ

アイキャッチ

 どうも、ティーです٩( 'ω' )و

 

 前回作ったサイトを更新しました。

 前回のブログ読んでない人は読んでね☆

 

 

www.teeweb.work

 

 変更箇所を書くと

 

 全ページを通して、共通して使っているメニューバーを変更しました。

 nav部分にHomeを追加、Hover時に色が薄くなるよに設定

 レスポンシブのタブレットサイズを追加

 

 Topページはメニューバー以外は変更ないのです! 

 Topページは、こんな感じです。

 

Topページ



 

 Aboutページは、アニメーションを変更

 テキストを全て右側から出てくるようにして

 テキストを追加

 後、画像を少し大きくしました

 

Aboutページ

 

 Worksページは、前回 Hoverが出来ないと言ってましたが選択する所が間違い

 だったみたいです。

 今回は、ちゃんと Hoverアクションをつけて

 Hoverしたら画像が丸くなり周りに黒いフチがつくようにしました。

 

 全体だとこんな感じ

 

Worksページ

 

 Hoverするとこんな感じですです。

 

Worksページ(Hoverの時)



 

 Contactページは、メニューバーを追加して、

 下にあったHomeを削除しました。

 sendボタンにHoverすると青色が少し薄くなるよにしてます。

 

 こんな感じです。

 

Contactページ

 

 

 スマホサイズを追加したら、このサイトでやれることは終わりかなと思います。

 次はTwitter用ポートフォリオサイトと

 CMSを使ったサイトを練習用で作っていきます。

 

 Twitter用ポートフォリオサイトは、LPで作るつもりです

 イメージだけど、こんな感じ

 

ポートフォリオのイメージ

 

 CMSに慣れたら

 Twitter用ポートフォリオサイトに
 CMSを途中で追加して、更新すると思います。

 

 こんな感じですねー

 では、またの٩( 'ω' )و

 バイバイ(๑╹ω╹๑ )