himanoa.netを開通させたぞ！！！！

https://blog.himanoa.net はあるのに https://himanoa.net がないのはおかしいよねっていう指摘を受けて5億年くらい経ったんですが、僕に紹介する自己が存在しなかったのと、CSSとか書けないし置くプロダクトもないしなぁとか思って恥ずかしさから作ってなかった自己紹介サイトを早朝の4時間くらいで作りました。

サイトデザインは色を適当なパレットから拾ってきて、あーでもないこーでもないしながらちょっと色見調整してCSSに落とし込むみたいな、コンポーネント指向とかとも無縁な感じで組んでみたんですけど、僕がCSS書いたにしては、モバイルでもちゃんと見れるようになったしそれっぽいデザインになったなぁといった感じで自画自賛できるくらいの出来なのでみんな見てくれーーーーーーーー

これだけだと記事にしては何も面白くないのでデザインからデプロイするまでに得た知見とかを載せて締めます。

見てる画面の解像度に合わせてdivの高さを調節する。

https://himanoa.net の白い部分は、スクロールしない限り高さをブラウザの描画サイズになるようになっています。

JavaScriptで window.innerHeight をCSSに適用させとけばいきそうみたいな感じで目論んでいたのですが、いろいろ調べてみたところCSSにはvhという単位が存在し　これを用いると「ブラウザのサイズに依存せずに画面のどれくらいの高さを占めるか」といった感覚で単位を当てることができます。

なので、先程のJavaScriptでうんたらかんたらせずとも height: 100vh とだけ書いとけばどの環境でも意図した高さになりレスポンシブも実現できるという分けです。便利

Flexbox

スキル欄のタグがブラウザのサイズがめっちゃ小さくなってもいい感じに並んでくれるのはFlexboxを用いてます。

Flexboxを用いると要素を規則的に並べるのが非常に楽になりました。折り返しの設定や並び方の設定などがいじれるのがよさです。

また、従来のfloatレイアウトに比べてclearfixを気にしなくていいのも嬉しいです。

netlifyが神

ちょっと前に騒がれてたnetlifyがデプロイ先として僕の要件をクリアしていたのでここでホスティングしています。

GitHubのリポジトリを見てくれるのでpushに応じて自動でビルドしてページを更新してくれるので、サイト管理も楽なのが良かったです。

あとはどこのディレクトリをドキュメントルートにするかもnetlify側で決められるのでgithub pagesと違い、gh-pagesみたいな余計なブランチを生やさなくてもいいのとhttps対応がクリック一回でできるのもよかったです。