おはよう。

 

今日はポートフォリオサイトが完成したので自慢しようと思う。

 

完成品

 

あのハラカズヤが作ったとは思えないほどお洒落なサイトであることに貴方は驚くことになるだろう!!!

 

URLだよ。はい。

https://kazuya002ex.github.io/displosia

 

このポートフォリオサイトを作った理由

 

このポートフォリオサイトはこれからWeb制作会社に営業する際に公開するものである。

 

これがパートナー契約をさせてもらうことに良いように働いてくれると良いが、

それは営業したWeb制作会社が良いと思ってくれるか次第なので私は何とも言えない。

 

とりあえず「人事を尽くして天命を待つ作戦」でいくしかないだろう。(要するにWeb制作の営業は運の要素も必要だろうということだ!)

 

技術面で気をつけたこと

 

技術的には以下のことを気をつけて制作をおこなった。

気をつけた部分
flexboxの様々な技法を使用
色は統一させてシンプルに見やすく
外部リンクに飛ばす際は「rel="noopener"」

 

 

flexboxの様々な技法を使用

 

まずはホームページである「index.html」

 

 

このページは、Menuの部分でFlexboxを使用している。

具体的にこの部分で使用したFlexboxは以下のコード。

 

.menus ul {
    display: flex;
    justify-content: center;
}

 

4つのリンクを中央寄せで横並びにするようにしている。

 

 

 

続いて、スキルの紹介ページ。

 

 

ここでは、2カラムずつ2列で並べるように指定している。

具体的にこの部分で使用したFlexboxは以下のコード。

 

------------------------------------------------

親要素

.langs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

 

子要素

.langs .column {
    width: 50%;
}

 

------------------------------------------------

 

このようにすることで「width:50%」で画面に収まるのであれば折り返しで表示される。

 

 

そのほかは大体中央寄せのものが多いが、このようにしてFlexboxのさまさまな技法を使うように意識した。

 

 

 

 

色は統一させてシンプルに見やすく

 

ヘッダーとフッターの色は統一してグレーにした。

 

カラーコードで言うと「#999999」

 

 

そして、実はホームページとラストのContactページにも共通点を作った。

 

 

ホームページ↓

 

Contactページ↓

 

 

おわかりいただけただろうか。

 

このサイトでは、オレンジのグラデーションを採用しており、なんだか夕暮れや朝焼けを感じさせるようなデザインになっている。

 

本来の目的はWeb制作なのにも関わらず変にデザインにもこだわってしまったが、おかげで驚くほどお洒落なポートフォリオサイトになった。

 

暇な方はぜひ1度見ていただきたい。

 

https://kazuya002ex.github.io/displosia/

 

 

 

外部リンクに飛ばす際は「rel="noopener"

 

これは昨日、当ブログで紹介した内容である。

 

【Web制作】「target=“_blank”」は危険!?
2020.2.27
おはよう。 今日はHTMLコーディングでよく使われている「target=“_blank”」が危険であるということを紹介する。 Web制作をする際によく使うものなのでぜひ知っておいて欲しい。 要点だけまとめると、 「target=“_blank”」で外部リンクに飛んだ後に元のページはJavaSc...

 

しっかりとこのサイトにもその学びは活かされているのだ!(笑)

 

 

終わりに

 

これを持って私のWeb制作スキル作成、及びポートフォリオ作成は終了となった。

 

結局、あれこれしているうちに「Web制作で稼ぐ宣言」してから1ヶ月が経ってしまった。

 

%1$s
Web制作で稼ぐ宣言【大真面目】「Web制作で月5万円を稼ぐ!」をやることにした
2020.2.27
  おはよう。   今日は私がWeb制作で収入を上げることを目論んでいるということを書いていく。     もくじ1 余談トロダクション2 どうして収入を上げたいのか3 どうしてWeb制作なのか3.1 …...

 

しかし、これで次はWeb制作会社に営業をしてみるだけだ。

 

ある意味ここからが本番であり、初の試みだ。

 

この後の営業がうまく通れば後に私のポートフォリオサイトは伝説となるだろう。(多分)

 

それでは今後もWeb制作の方面で良い成果を上げられるように須く作業を重ねていく。

 

今後もWeb制作において何かしらの変化や成果があった際は当ブログで更新していくので、読んでいただけると幸いだ。

 

 

このように私のブログでは、エンジニアに関する技術のことや精神面のことなどをメインにブログを毎日更新している。

Twitterで更新された記事を毎日チェックできるのでこちらもフォローしていただけると幸いだ。

 

ハラカズヤのTwitterリンク

 

今日の記事はここで終わりとする。

 

ここまで読んでくれてありがとう!

 

また明日お会いしよう!

 

おすすめ記事

 

エンジニアなのに「百度」を知らないのは流石にヤバくない!?
2020.7.8
おはよう。   今日は「百度」について書いていく。   えっ?「百度」を知らないだって!?   私のブログの訪問者の大半はエンジニアだと言うのに「百度」を知らないのは流石に問題があるだろう!   だが…...
物事を継続するコツについて
2020.7.8
おはよう。   今日は「物事を継続するコツについて」書いていく。   私、ハラカズヤという人間はTwitterでも謳っている通り、「習慣化させること」が得意である。   Twitter↓   &nbs…...
  • ゴキブリと債務者と私、愛する何たらのため
  • 自己紹介記事を書きました
  • がんばってメディア作るよん
  • そろそろ精神が終わる
  • エンジニアがコロナの影響でリモートワークした結果wwwww
  • 技術ブログとは何なのかを真面目に調べてみた