【おまけこそ真髄】コーポレートサイトの作成

どせぜん

どうも、どせぜんです。

はい、今回はコーポレートサイト作ってきました。

SkillHacks のカリキュラムは修了したのですが、迫さんが受講生の「案件を具体的にとるイメージがつかない」という声に応えてくださり、おまけの講座を追加してもらってたので、それをやってきました!

具体的には、今までのSkillHacksから、案件につながりそうなサイトの作成を、実例を挙げて説明してもらい、実際に作成するというものです。


やはり今日もBootstrapは凄かった…。


それでは、どうぞ。


コーポレートサイト PC版



何だこれめちゃめちゃかっこいいじゃん…。

crowdworksに上がっている案件なら、こんな感じでいけちゃうかもしれません…。

特に背景が流れてくのと、スライド素晴らしいな…。

Home Feature Service Information の各左にあるアイコンは、fontawesomeというサイトから使ってます。これはいいぞ。

https://fontawesome.com/


コーポレートサイト スマホ版


これ、何でかまだわかってないんですが、スマホサイトにするとスライドの説明とかが消えて、白い帯みたいなのが表示されちゃいます。

今後わかったら追記しておきます。


以上、こんないい感じのサイトも1時間くらい?で作成できました。

なんか、世に溢れているいい感じのサイトって、画像をうまく使ってるだけなのかなって思えるようになりました!!

調べ調べですが、こんな感じで案件を獲得していけたらと思います!!


それでは、また。



追記


スマホサイトでスライド下に白い帯表示されてる原因、わかったやで。

CSSファイルでスライドの表示させるところをサイズ指定してたんですが、実際は画像に対してサイズ指定しなければならなかったためでした。

改善前


改善後


というわけで、デバッグした結果がこちら。


問題解決した〜スッキリーー!!

ってわけで、このあとはちょこちょこいろんなサイトを真似してみようかと思います。


それでは、また。


〜Skill Hacksが気になった方〜

-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座