はじめに

4月はバンドでのレコーディングに集中します。

take-she12.hatenablog.com

このタイミングで、バンドのHPをリニューアルしようと思ってます。

おもにやりたいこと

• CSSを自分で実装
• スマホ対応(レスポンシブデザイン)
• 通販フォームの実装

ちなみに本はこれを買って読みました。

HPの現状

toketenakunaru.web.fc2.com

このHPがリニューアルされれば変わってしまうと思うのでスクショで見ていきましょうか

パっと見いい感じですが、cssはテンプレートをコピペしてるので内容理解してません。ハハッ。

Discographyのページです。tableです。僕はコンテンツの位置を表現するのにtableしか手段を知りません。divでの構造化もしたことがありません。10年前で止まっている。。。

こっちもテーブルです。歌詞の長さによってレイアウトが変わります。ひでえな。

そして当然スマホ対応していないので、スマホからもこの画面が表示されます。メニュー押しにくすぎですね。

やるべきこと

cssを自作するという中で、しっかりコンテンツを構造化することが必要になってきます。そしてtableじゃなくてcssで位置を指定する。（笑）

そしてやりたいのがメニューやヘッダ、フッタの共有化をしたい。今、全ページに書いているので1つコンテンツが増えれば全ページ書き換えなきゃいけないメンテナンス性の悪さには耐えられません。

jqueryでできそうです。

ho-mupe-zi.hippy.jp

あとはAmazon S3にHPをあげてみたいなと思ってるので、jQueryはクライアントサイドだからきっと動くよね。。。？

コンテンツの取捨選択

Linkってあるところが時代を感じませんか。（笑）HP全盛時代、相互リンク。キリ番。。。なんでもないです。

Discographyは1ページにまとめてしまって、ページ内で記事コンテンツにしたいですね。

あとはまぁだいたいそのままでいいか。

おわりに

とりあえずcssを取っ払って少しずつ進めていきます。Web系の技術がさっぱりだったので趣味で触れるいい機会です。