HTML/CSS未経験者が所属研究室のHPを全改装するまで
経緯 ーHPをかっこよくしたい！ー
このご時世、情報発信のツールにWebページは欠かせない。
私は、とある研究室に所属しているのだけど、もちろんその研究室もHPを運営しています。HPは教授がフリーソフトを使って作っていて、デザインなどにこだわりはありませんでした。正直、かっこいいとは言えませんでした。自分の所属組織のWebページなら、もっとかっこ良くしたいなあと思い、改装に着手しました（昨年5月頃）。
この時私はまだHTML/CSSを全くさわったことがありませんでしたが、元々プログラミングはやっていて、勉強すればできると予想したので、独学でスタート。
HP Ver.1 ー今思えばひどくダサいHPを作ってしまったー
はじめは全部自作することしか頭になくて、良いと思ったWebページのデザインをなんとなく真似て、コードを書いて再現しようと頑張っていました。HTML/CSSクイックリファレンスにはとてもお世話になりました。
www.htmq.com
その時作ったものは今思うと本当にダサくて、教授のHPを批判していたことが恥ずかしくなるほどです。何がダサいかっていうと、構図が微妙だったんです。ガタガタな配置を無理やりCSSで整えようとしていて、結局整えきれていませんでした。Ver.1を作った時は、ページ全体の設計が大事ということを学びました。
皆さん、素人が初めて作ったWebページは他人に見せない方がいいですよ・・・
HP Ver.2 ー恥を捨てて人に見せたら、結構良い感じにー
さっき人に見せるなと言っといて、自分は人に見てもらいました。えっ？恥をかくのは覚悟の上ですよ〜。恥をかきたくない人は見せるな、という話です。誰に見せたかというと、CAMPHOR-の人たち。とてもたくさんのことを教えてもらいました。
コードを直す指導をしてもらう中で、自分が大事かなと思ったのは、以下の３点。
- コードのコピペを減らす - より見やすく、構造がわかりやすくなる
- コンテンツはHTML、デザインはCSSで内容をきっちり分ける - 後で自分が修正することを考える
- 統一するカラーとフォントを決める - 見た目やコンセプトを定める
1, 2はコーディングにおいては当たり前な気もしますが、当時自分はよくわかってなかったので掲載。3のカラーとフォントはページの印象を大きく変える要素なので、自分が良いと感じたものをちゃんと選ぶために時間を割と使いました。
見出しのフォントはGoogle Fontsから選出しました。サイトは、Serif, Sans Serifなどのカテゴリー分けや、文字の雰囲気による分類がしっかりしているし、文字の太さも詳細にわかるので、フォントが選びやすかったです。さすがGoogle。
色選びではCoolorsを使いました。見た目の良い色の組み合わせを教えてくれるサービスは他にもあるけど、Shiftキーでランダムに組み合わせを生成できる手軽さが気に入りました。今でもよく使います。
Ver.2は、navigationのメニューを含めたヘッダー周りを整備して、体裁が大分整いました。
HP Ver.3 ーBootstrapを使ってサクッと今風に作ろうー
Ver.2を作った時点で、完全な自作は大変なわりにあまり見た目が良くならないなぁと感じていました。あと、レスポンシブデザインを自作で作るのは辛い。そこで、Webフレームワークを使うことにしました。使ったのは、Bootstrap。
Bootstrapを使って、一番悩んでいたnavigation barがサクッと良い感じに作れたことには感動しました・・・（参考にしたサイト：グローバルナビ Navbar | コンポーネント | Bootstrap3の使い方）。レスポンシブデザインについても、ほとんど何もせずに対応できました。Bootstrapありがたすぎる。
細かい反省としては、配置や大きさをCSSで調整する際に、最初はBootstrap内のCSSをいじってしまいました。別ファイルを作って書くことをすぐに学べたので、特にひどいことにはなりませんでしたが。あと、IEでの表示を見る際に、Javascriptが反応しなくて悩みました。IEの場合、ローカルのファイルはアクティブコンテンツを有効にしないといけないらしいです。
以上の問題をクリアして、Ver.3は研究室の公式HPとして公開されることになりました！結構良いページになったと思っています。よかったら、お時間のあるときにでも見てみてください。
最後に
HTML/CSSを勉強し始めてから、かれこれ公開まで1年以上かかってしまいました。はじめからBootstrapを使っていればもっと早かったかもしれません。けれど、言語を1から勉強することで、ちゃんと理解して扱うことができたので、少々回り道でも自分のやってきた過程は間違いではなかったと思います（実際Ver.3は2カ月という短期間で作成できた）。
これからも研究の傍ら、自分が良いと思ったものを作って公開していきたいです。
ここまで読んでいただき、ありがとうございました！
