莫大な工数を投下して、やっとのことで、海部郡山川町のトップページをリニューアルしました。
内容そのものはなんら変わらないのに、却ってごちゃごちゃして、前の方がスタイリッシュではなかったかとさえ思う悲しさ。
そして、計5人日くらい掛ったのではあるまいか・・・。( スタイルシートの勉強時間除く )
いや、趣味なんだから「人日」とかいうのやめましょう。
しかし、tableタグを駆使しまくって作った以前のページに比べて、今度のは100%スタイルシートになっております。brタグも不使用。
とにかく、位置合わせにえらい時間かかりました。
整ったレイアウトにすれば、もっと簡単なのでしょうけど、せっかく、wordpressとか使わずに、すべて手で作る訳ですから、ちょっと崩したレイアウトにしたかったのです。
以下は、メモです。
1. 全面写真はおしゃれだけど情報が少ない
はじめは、写真全画面で作っていったのですが、結局いろんな情報を表示するとなると、全然だめなのでボツ。
2. すべてのdivタグに、background-colorを設定して位置を調整
初めからそうすれば良かった。
これは急がば回れです。
3. どうやっても詰められない余白に試行錯誤
どうやっても詰められない余白が2～3か所あって、その解決に膨大な時間がかかりました。要素が入れ子になっているので、本体要素、親要素、孫要素のどこに、pdding、marginを設定すればいいかを落ち着いて考えないといけません。
結局ググってヒントを得ました。
未だに、どういうときにどこに設定するのかマスターしてません。
4. そして、レスポンシブデザインをどう考えるか
1) position: absoluteとrelativeを駆使した方が早いか
いっそのこと、すべて、position: absoluteとrelativeを駆使した方が早いかと思い、途中からそうしたのですが、スマホ用に全然別のスタイルシートを書かないといけなくなるのと、パソコンでも、ウィンドウを小さくした時に端が切れていくのが嫌で、これもボツ。
しかし、yahooをはじめ世の中の多くのサイトは、ウィンドウを小さくしていくと、どんどん右が切れていくんですね。
スマホは別のスタイルシートにして、本体はposition使いまくりでも良かったかなあとも思います。
下みたいな感じで、ちょっとおしゃれにできるし。。。
2) 均等に整ったつくりの方がラク
均等に整ったつくりになっていないので、ウィンドウを小さくしたり、スマホにした時にパーツパーツがガタガタデコボコになって、その調整にもえらい時間が掛りました。調整しきれてないですが。
結局は、割と、上下の幅など整えることになってしまい、微妙に詰まらない結果に。
5.これから
完成しましたとは言える出来ではないので、改造していきます。
トップページ以外もボチボチ変えていきます。
しかし、生産性のことだけ考えたら、wordpressでいいのではとも思うのですが、やはり100%の自由度を確保しておきたいというのと、テキストエディターでWebページが作れるくらいのスキルレベルを保っておきたいというのもありましたから、今回、時間をかけたのは、まあ悪いことではなかったかなと思います。
6. 参考にした本
スタイルシートはほとんど使ってなかったし、使うときも、都度ググって断片的な知識しかなかったので、大枚はたいて本を買いました。2,000円以上しますが、これは良くできた本です。『htmlとかなら多少は書けるから全くの素人ではないけど、全然だめだめ。特にスタイルシートほぼ素人』という方に最適ではないでしょうか。前半が教科書っぽい感じ。後半が実際に3ページのサイトを作っていくという風になっています。一通り読んで、コードを書いていくと、結構時間はかかりますが、買って正解でした。
という事で、こちらでございます。
コメント