こんばんは、レモンです。
院試勉強からの現実逃避に自分のほとんど需要がないWebページのデザインを一新することにしました。
旧デザインはモノクロな感じのシックな感じに仕上げていたので今度はレモン色を使ったポップなデザインにしました。
旧デザイン↓
新デザイン↓
新デザインではBootstrapというCSSのフレームワークを使っています。
正確にはフレームワークじゃなくってデザインを補助するツール、という位置付けらしいです。
Bootstrapのリファレンスは非常に丁寧というか、コピペして中身を編集すればある程度のことができてしまうのでデザインの手間が非常に少なくなります。
ただし、その分デザインの個性が失われがちになるのであとでCSSを上書きしてあげないといけませんね。
上書きを行うにはBootstrapのCSSを読み込んだ後に自作のCSSを読みこませれば上書きができるようです。
ただ、classの数が尋常じゃない量あるためどこに何を加えれば変更されるかを特定するのが非常に手間です。
そのため、大きな変更を行う場合は予めBootstrapのカスタマイズページで変数を変更したCSSをダウンロードするのが賢いと思います。
自分はNavbarだけはどうしてもよくわからなかったのでそこだけいじったCSSをダウンロードしました。
もっと大きな変更をしながらデザインしたいという場合はLESSファイルをGithubから持ってきてコンパイルしつつするのが早いんでしょうね。
LESS(あるいはプラグインを使ってSASS)を覚えないといけませんが…今回はそこまでやってませんね。
さて、変更したデザインどっちが見やすいかなーと考えてますがなかなか他人に聞きづらいですねこういうのは…(^_^;)
一応「改善」をしたつもりなんですが「改悪」になってるとも限りません。
まあ、どっちにしろ誰が見るわけでもないページなので気軽に遊んで行こうと思います(｀・ω・´)ｼｬｷｰﾝ
レモンのITっぽい備忘録 