縦棒短縮URLのUIを作り直した話

2022/11/23

縦棒短縮URLのUIを作り直しました。

概要

http://hayao.fascode.net/tatebou/を新しくしました。

具体的にはBootstrap5を使ってレスポンシブ対応し、モダンなUIにしました。

Bootstrapほんっとうにいいねこれ。これに頼ってると純粋なCSSとHTML書けなくなりそう。

次にサイトを作るときはReactとBootstrapでいい感じにしたいなと思っており()

Hugoのこのテーマもあまり気に入ってるわけではないので、そのうち自分でテーマを書こうと思います。

BootstrapとHugoでモダンなブログ、BootstrapとReactでモダンかつ高速でイケてるポートフォリオ的なものを作りたいです!!!

でも今のトップページもそこそこかっこいよくできたので好き。でも右側のコンテンツがやっぱどうしても手書きHTML感が出てしまう....

どうでもいい話

昨今で主流の、上部にナビバーを表示して中央にコンテンツを表示するというレイアウト、個人的に非常に嫌いなんですよね。

QiitaやGitLabみたいなデザインです。古の4:3ディスプレイならいいのかもしれないけど、16:9や16:10で横長なんだから、サイドパネルにメニューを表示するべきです。

そう考えると阿部寛のサイトは非常にいいと思います。モダン(?)。

自分が観測してる範囲だと横長の広さを活かせてるサイトって結構少ないと思うんですよ。

BootstrapもPC版のナビコンポーネントは横並びが前提の設計なので、縦並びにするには色々とゴニョゴニョする必要があり...

正直今のトップページも、何を考えてかBootstrap4で構築してしまったせいで5の機能を十分に活かせていないんですよね。

JS使わなくてもCSSだけでエレガントに実装できるところとかもあるし...色々と難しいと思いますまる。

終わり

縦棒短縮URLのサイトがかっこよくなったので使ってねというお話でした。