ルールについて

• jqueryとbootstrapはNG
• scssとlessを使わない
• webpackとrollupなどは不可
• 事前ワークフロー禁止
• できれば現代化する

今回はこんな感じでチャレンジしようっか。

Live Demo

Alpha バージョンをgithubに一応公開してます。GitHub Pages も配置しているのでライブデモを見ることができます。よかったらぜひ参考•指摘してください。

• Repository: https://github.com/FurryR/furryr.github.io
• Demo: https://furryr.is-a.dev/

まずはUIデザインから

今回はgeek/コードエディター風でよりピュアなWebページを作りたいのでひとまずメインフレームとサイドバーを設置。これよりページの高さを固定でき、calc関数を活用すれば position: fixed みたいな効果を作れます。

主要コンテンツをメインフレームに放置します。スクロールが必要だから div 元素に overflow-y: scroll を応用。それから scrollbar-width: none でスクロールバーを非表示すればOKです。

サイドバーをモバイル端末で表示するとスクリーンの広さが足りないので、レスポンシブデザインを用意します。

最後に一番かっこいいやつをナビゲーションバーの右側にデザインする。元はサーチバーをデザインしたいのですがコマンドプロンプトにしました。後に便利ツールを導入しましょう。