本日、課題 B006とB007を提出しました。
課題URL
提出した作品
田中様から、多数ご指摘を頂きました。
間違え過ぎていて、とても恥ずかしいです。 教わったのに身についていねぇ…
修行録なので、今は自分のために、間違っていたことを纏めようと思います。
課題B006について
- 全称セレクタでリセットをかけていた
- containerにpaddingをかけるのを忘れていた
- marginの取り方に無駄な記述が多い
(例：)/* 全ての要素のマージンとパディングを 0 */
* { margin: 0; (←"*"はDOSプロンプトと同じワイルドカード)
padding: 0 }
起こる問題：ブラウザにより表示が異なる
正しい対策：推奨されるリセットCSS(Eric Meyer’s Reset or Yahoo User Interface Reset)を使う
実はこれ、気付いていたのにサボっていました。えへっ★
やはりbodyのcolorを付けてcontainerを視覚化するべきでした。
container見えないとこの課題やりにくいですね、うん。
この問題の場合、bottom方向にはheaderとwrapperのみ、marginを仕掛けるだけで充分。
sidebarとcontentの間はfloatで左右に弾けば自然に空く。
floatしても左右のcontainerの壁に接しているように見えないのは、
containerがpaddingでbodyとの間に隙間を作っているから。
嗚呼、田中様の作ってくれたCSS回答例が鮮やか過ぎて凄い悔しい。
メール送ってから実にたったの3時間、ウチはこの課題に一日近くかかってるのに。
まさに月とすっぽん、トムとジェリー、うさぎと亀ェ…(？)
課題B007について
- back.gifを上げ忘れている
- レイアウトの調整時、divタグに頼りすぎている。
- セマンティックコーディグではない、古いタグを使う事をやめましょう。
- 見出しタグの概念がまだ理解しきれていない
- line-heightをもう少し上手に
イメージも取ったし、CSSに打ち込んだのですが、
何故か最後まで表示してくれなかったんです。
明日の朝、これについては表示できるまでもう一度挑戦してみます。
自覚していることです。これによって必要の無いdivが設定されていたり、
line-heightの扱いが慣れていないという弱点が生まれています。
今回は特に、classとidで同じ名前を使うというミスもしてしまいました。
(･ω･)？？ …シマンテックじゃなくて？何かいきなりセキュリティのおはなし？
セマンティック:(semantic)【形容詞】意味の、意味論の
おっふ、訳に「意味」って使われるとややこしい。＿|￣|○
要するに、理解した内容から纏めると…
htmlでやるべきことは見出しや本文やリスト等の配置、classやidの定義、ankerや画像のリンクなど。
CSSでは色や配置などの装飾を担当する…といった具合に役目をしっかり分けること。
今回は古いタグ"b"を使ったことでご指摘を受けました。
この問題では開催概要にh3タグを割り振るべき。
これについては未だ身についていない感覚なので、意識しながら今後も経験を積むしかありませんね…
他人からの視点を意識した見やすさという感覚がまだ甘いのでしょう。
これもまた経験を積みながら修正を心がけていきます。
