昨日は、「お問い合わせフォーム」に取り組み、なんとか完成。
inputタグのCSSが難しい
inputタグの扱いにまだ慣れないです。
labelのfor属性と、inputのidは紐付けしておくと、label上の文字をクリックした時もクリックしたいところ（四角や丸のマーク）にチェックが入る、というのは分かって、これは便利。
CSSには苦戦。しょーごさん中級課題には、ヘッダーと、メインと、お問い合わせフォームに、使いまわせる同じデザインのボタンがあるのですが、「お問い合わせフォームのボタンだけ中央寄せする」に手こずりました。
普通に、inputタグ（ブロック要素）に、margin: 0 auto:を指定しても効かないのです。
色々やっているうちにCSSもぐちゃぐちゃに〜・・・。最終的に、ボタンのクラス名の横に、「input」を記述することで解決しました。inputタグは、クラス名だけだとCSSが当たらないのかしら？？？！ちょっと勉強しないとよく分かりません。
swiperのレスポンシブ
swiperが問題なく動いて、CSSも整って一安心だったのですが、レスポンシブでまたつまづきました。
標準だと、３枚のカードが表示されていて、右と左の端に見切れたカードが表示されているという仕様。
レスポンシブでは、これの表示されているカードを中央に一枚だけにしたいのですが、breakpointを指定すると、なぜかPCの方の表示まで一枚になってしまったり、縦長になって表示が崩れたり。消して書き直したり、色々試しましたがだめだったので、一旦放置（また放置・・・）。
いよいよアコーディオン
アコーディオンに関しては、実装したことはないけど、こちらの「Webの神様」でやり方を視聴したことがあったので、もう一度おさらいのために、家事をしながら動画視聴。
結構スムーズに開閉できるようにまでなったのですが、、、今回の課題のカンプにある「一番目のアイテムだけ最初から開いておく」というのができない。。。
ググって、
最初は３アイテムとも回答を非表示に。CSSで、最初の回答にだけあらかじめクラスをつけておいて、jQueryでそれをつけた時だけ「表示」にする方法。（じゅんぺいさんブログより：https://junpei-sugiyama.com/accordion/#st-toc-h-5）
や、誰かが質問したものを参考に見たり・・→https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1082188290
見様見真似でやってみましたが、うまく行かない。そもそも、JavaScriptはおろか、jQueryも仕組みをよく理解していないので、自分でアレンジして書いた時に、なにかしら間違っているとしか思えない。。
ということで、一旦こちらも放置（そしてまた放置・・・）。
まずは、レスポンシブを終わらせてから〜とか思っていますが、そのレスポンシブをやるにも、Sassで書くなら書き方を勉強しないといけない。
八方塞がりな気がしますが、とりあえず、Sassを勉強して先にレスポンシブをやっちゃおうかな。
ふぅ〜。がんばります・・・・。
コメント