書いたものや話したことをまとめた1枚のHTML

memo

自分の書いたものや話したことをまとめておきたいとずっと思っていた。デザイナさんがポートフォリオをまとめているような感じで。
1枚のHTMLだけど、やっと作った。


シンプルだけど、手が込んでいるものにしたかった。あとは最近身に付けた知識を、できる限り使ってみた。技術的なものも、考え方のようなものも、いま持っているものを振り絞ってみた。1ページだけど。
そもそも僕は0からHTMLを書くことがほとんどないので、とてもいい経験になった。


最近はいろんなキーワードがあって、Responsive Web Designとか、Mobile Firstとか、Progressive Enhancementとか、Graceful Degradationとか。
こんなことをいっこずつ考えながら作ってみた。バズワードっぽいかもしれないけど、ちょっと真面目に向き合ってみたくて。そんな機会あまりないし。
考えてみたからといってうまくいくわけでもなく、Mobile Firstは早々に挫折して、Progressive Enhancementは古いブラウザの動作環境がないから無理で、消去法的にGraceful Degradationな気持ちで取り組んで、最後にMediaQueriesを当てたらいろいろ大変な思いをした。
まあ、その苦労をしてみたかったから作ったのだけど。この短いコードにも、バグやエラーがありそうなので、なにか見つけたら教えて下さい。
# あと英語のミスも。いくつか適当に書いてしまっているし…。


フォントが好きなので、そこはちょっと頑張ってみた。これもまたすごく大変だったけど、Windowsでもそれなりにきれいに見えるように努力した。
配色にも取り組んでみたけど、どうやったらいいかさっぱりわからなくて挫折した。いろいろ読んだり試したりしてみたけど、うまくいかなかった。本当はもうちょっとカラフルにしたい。


試行錯誤の過程やがっかりしちゃうようなミスの軌跡もコミットログに記されていて、それも含めてなかなか楽しい。
このページに収まりきらないくらいの活躍ができるように頑張りたい。