webサイトを作る

こんにちは。

今日は前回の宣言通り、「CSSが苦手」を克服するために

webサイトを作ろうと思います。

 

前回はかっこいいと思ったwebサイトを模倣すると言いましたが、

やっぱりただ作るだけだと勿体無いな〜どうせなら自分の作品として何かつくれないかなと思いまして、

自分のポートフォリオサイトを作成することにしました。

 

前回も簡単なブログを作ったんですけど、

そのときはCSSは外部のwebサイトから引っ張ってきただけだったので、

自分でちゃんとwebサイトを作ってcssもできるようにしたいと思います。

 

どんなサイトを参考にするか

今回はいいなと思ったサイトの2つを参考にして、

ブログアプリを作成したいと思います。

 

break-u-fast.karlymake.com

これをトップページにして、

ベースは以下のサイトを作成したいと思います。

 

鈴木えみオフィシャルブログサイト↓

ブログ | Little Bit -emi suzuki official site-

 

設計する

まずどんなサイトにするか? ーポートフォリオサイト

 

なんの機能を追加するか? ーブログ、フォトアルバム、プロダクト一覧、ツイッター・インスタグラム連携、ページネーション

 

ざっとこんな感じで考えてから設計に移りました。

 

設計図

[トップ画面]

 

f:id:lilybelly:20181018190627p:plain

 

 

[ABOUT ME画面]

f:id:lilybelly:20181018185953p:plain

 

 

[PRODUCT画面]

f:id:lilybelly:20181018185859p:plain

 

[PHOTO ALBUM画面]

f:id:lilybelly:20181018190814p:plain

 

レイアウトはこんな感じにしようと思います。

 

https://app.moqups.com/lilybell.y/1t0d19DUQq/view/page/ad64222d5?ui=0

app.moqups.com

作ったレイアウト。保存用に。

 

ちなみに設計図はこのサイトで作りました。

操作も簡単なのでおすすめです。

 

app.moqups.com

 

これで一応設計まで完成しました。

次は実装をしていきたいと思います。