今日も、しょーごさんの課題「中級」に取り組んでおります。
今回から、Sassを取り入れました。
まだ、ネスト（入れ子）の書き方しかできていませんが、なるほど、これは便利！
使っていないタグ・・・。
今までHTMLを書いている時も、「あれ、この要素は、外側にもう一つdivタグをつけて囲った方が良いのかな？」と迷う場面はあったのですが、ネストで書いていると、「ただ囲っているけど、スタイルが必要ないタグ」が一目瞭然。。。
全くスタイルが必要ないタグというのは、消して良いのだろうか・・・・？？？？？
私は、まずHTMLを全部書いてから、CSSの大枠を作って、大体のレイアウトを仕上げ、その後に分からない部分をググって仕上げる、というやり方をしているのですが、「その後に分からない部分」を実装する時に、このタグが必要になるかも？と思うと、うかつに消せないのです。ただの貧乏性かもしれないですが。
要素を囲うか迷ったタグ
要素を、もう一つ外側にdivタグで囲うかどうか、迷った例として、
imgタグ –> これは、どのサイトか忘れましたが、imgはdivで囲うのが鉄則！という記事を見た気がするので、理由は忘れましたが、、、、囲うようにしています。（理由が大事なんじゃないか・・・）外側のdivで幅やスタイルを決めて、写真はそこにはめるだけ、というイメージです。
tableタグ –>これは迷います。なくても良い気がしますが、、、外側のinner要素と、tableの間に、もう一つdivタグをつけました。なんでだ？ｗ しかも、tableタグに関しては、表の形によっては、tableなのか、tbodyは要？不要？迷う場面が多かったです。
結局今回は、divで囲み、さらにtableタグの直下に、tbody,tr, th, tdで実装しましたが、tableにはクラス名をつけていません。うーん。なんか、削れる気がする。
ulタグ –>これも迷うー。なくても良いような？でもリストが剥き出しって、ダメなような？？
他にも迷った部分がたくさんあるのですが、そもそも使うのはそのタグで合っているのかとか。。。articleタグの使い方とか。
これから、ちょっとずつ調べて行こうと思います。
課題の進捗について
「中級」をやり始めて3日目。
大体のCSSを書き終わって、あとは「お問い合わせ」の部分を実装したら、７割？6割？くらい完成です。見た目はね・・。
大まかなレイアウトができたら、あとはSassのMixinを使ってボタンのデザインを作ったり、swiperのところを仕上げたり、あ、あとハンバーガーメニューとアコーディオンとアニメーションの実装がありますね！！！
swiperについては、先日夫のHPに実装したおかげで、とりあえず動くものは作れました！あとは、表示する枚数やタイマーをつけて整えないといけません。
ハンバーガーとアコーディオンは、jQueryでできるかな？
一番苦戦するのは、まだやったことがないアニメーションだと思いますが、、、うん、まだ道のりは遠いですね。
しかし、CSSの大枠まで3日でできたのは、自分としてはすごい進歩です！
明日も頑張るぞ！
コメント