初案件納品完了!!
久しぶりの投稿となります。
以前も書いた通り、姉からサイト制作の初案件の依頼をもらっており、
1ヶ月ほどかかってようやく納品が完了しました!
達成感が半端ないし、そのサイトが自分の子どもかというぐらい、愛着がすごいあります。笑
サイト全体の難易度としてはそれほど高くはないと思いますが、たくさん新たに学んだ点があったので、描き留めておこうと思います。
勉強になったこと
1.max-width
2.テーブル(表)
3.jQuery関連
4.クラス名の付け方
5.レスポンシブ対応
ざっとこんなところですかね。(他にも多々ありますが・・・)
1.max-width
今までの模写コーディングでは、max-widthについて意識していませんでした。しかし、今回は「仕事」なのでもちろん無視できません。max-widthを指定していないと、大画面で見たときに文字や画像が横に”ビヨーン”と伸びてしまい不格好になってしまうため、そうなってしまう部分には「これ以上は横に伸びないで!」という最大の幅を指定しておく必要があります。
2.テーブル(表)
テーブル(表)についてもこれまであまり触れる機会がありませんでした。(たしかドットインストールでチラッとやったような・・・)
しかし、今回制作したサイトでは登場しました。(「教室名・開講日・住所」の3項目が横並びになり、それらが教室数だけ縦に並んでいるイメージです。)
ググりながら、<th>や<td>について学び、難なく作ることができました。
ところが、小さい画面幅になったときに、テーブルの形を変える必要があり、それに苦戦しました。
先述の通り、通常は1行につき「教室名・開講日・住所」ですが、
画面が小さくなると、「教室名」だけで1行、そして開講日と住所を2行目に下がるようにデザインしなければなりませんでした。(わかりにくいかもですが、下のようなイメージです。)
(通常)
ーーーーーーーーーーーーーーーー
教室名 | 開講日 | 住所
ーーーーーーーーーーーーーーーー
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
(小さい画面のとき)
ーーーーーーーーーーーー
教室名
ーーーーーーーーーーーー
開講日 | 住所
ーーーーーーーーーーーー
いろいろググってみたり、姉にも相談しましたが、最終的にやり方がわからず、諦めました。苦笑(もちろん姉には許可をもらいました。)
結果、一般的な「縦並び」にしました。
こんな感じ
↓↓↓↓↓↓↓↓↓↓↓
ーーーーーーーーーーー
教室名
ーーーーーーーーーーー
開講日
ーーーーーーーーーーー
住所
ーーーーーーーーーーー
3.jQuery関連
3つ目のjQuery関連についてですが、少し長くなってきたので次の投稿に回そうと思いますので、お楽しみに〜〜〜。
(次回に続く)