時々唸るファンの音

色々と勉強してみたいと思ってる人の備忘録。

2020-01-20 0からポートフォリオサイトを作った など

事の始まり

ふぁん「HTMLとCSSとJSを使って何か一つ作ってみるか……」

 

というのも、ちゃんと自分で0から100まできちんとサイト作ったことなかったよなぁ…って思い、自分のポートフォリオなら何ができても怒られない(はず)だと考え作ることに。

 

まずは出来上がってしまったものを紹介します……

 

www17.plala.or.jp

 

あああああ………

すごくかっこよくない、すごく…(白目)

せっかくだから

デザイン能力皆無だけど、

いろんな人の気持ちを知りたいから、デザインからやってみよう…

自分でコーディングするので、

自分のレベルに合ったものを作らないと全くできなくなってしまうので

そこも考慮しながらデザインをしました。

 

そこで使ったのはAdobe XD先生!

まだ使い慣れないけど、だいぶ使い方が分かってきた気がします。

難しいけどねー!

 

せっかくだからTOPのところだけ乗っけておこう…。

 

f:id:noisy_f:20200120221804p:plain

これがXDでつくったTOPイメージ

こんな感じになったらいいな~ということがだいたい固まりました!

 

さっそくコーディング!

下手なりに何回もやってるので、HTML/CSSの部分は割となんとか形にできました。

途中で突っかかったのは、

私のプロフィールをレールに見立てた2本の線の上に表示する部分の実装には苦労しました…。

 

ここで一つ学びを得ました…

強引に合わせようとしてぐしゃぐしゃにしないこと!

そうです。

強引にしようとするとあとで何がなんだかわからなくなるので、

気合で何とかしない!

理論をちゃんと考えてやってください!わたし!!!!

 

CSSの部分の調整もなんとかなんとか。

 

さすがにこのままだと寂しい…

ここまで簡略化したのは、デザイン能力が皆無なのもあるんですけど

JSでの制御を入れたくて、その部分を実装しやすくするために今回シンプルなデザインにしたんです。

 

ということで、少し動きを付けてあげることに。

 

ぬるぬる動くアレとか

メニューのところとか

プロフィールの線路に見立てた線に略歴が重なったりとか…

(プロフのところはイマイチ制御が上手にできなくてぐぬぬ…)

(次回への課題ですね…ぐぬぬ

 

これで少し寂しくないぞ!(たぶん)

 

そして、出来上がったものを

主人にアップロードしてもらいました◎(というのか?)

 

デザインは本当に苦手で避けられれば避けたかったんですけど

今できる範囲でいいから「やってみる」のが大事なのかなって思って、

思い切ってチャレンジしてみました。

 

いずれ、これを超かっこよくしてみたものです。

 

いろんな人の気持ちを知るにはまずやってみる!

とりあえずやってみる精神でがんばりました…。

 

とりあえず形になってくれてよかった◎

 

周りの人がPodcastをはじめている

私のとりあえずやってみる精神ではじめた「ふぁんFM」

そのあとに続々と新しい番組ができてる!!!!!!

 

すごい!!!!!!!!!

 

みんなとりあえずやってみててすごいな!

私もほどほどにがんばりたいと思います!

 

なお、ふぁんFMでは

ふぁんとお話したい~って人を募集しています。

現在、少し待っていただくことになりますが、

それでもよければぜひこえかけてくださーい!

 

雑談しましょ!◎

 

連絡は私のTwitterまでどうぞ!

 

それでは今日はこの辺でーっ。