プログラミング初学者である私が、プロゲートHTML&CSSの学習時に
・つまずいたポイント
・疑問に思ったポイント
・重要だと思ったポイント
等を、記録します。
初学者目線のため、どなたかのヒントになればと思っています。
分かりにく記述や、誤り等あれば、お問合せフォームやTwitter等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。
他の言語の記事は下記にあります。
プロゲート七転八起-jQuery編-
プロゲート七転八起-Ruby・Ruby on Rails編-
HTML&CSSは、2周目実施中に記録したため、ポイントが少ないかもしれません。
(1周目に記録していればもっとあったのですが・・・。)
プロゲート HTML & CSS編
初級編
14問目
疑問
・float left後に縦に並べたいときはどうすればいいか？
→「clear: left;」でfloatを解除する。
下記例1は未解除、例2は解除した例です。
例1. floatクラスに「float: left;」を適用
See the Pen
200117_css_clear:none; by zaisube (@zaisube)
on CodePen.
例2. 例1に対し、clearクラスに「clear: left;」を適用
clearクラスを設定するのは
・box-3の前にある空のdiv等の要素(プロゲートではこちらの方法)
・box-5のように解除したい要素
等となります。
See the Pen
200117_css_clear:left; by zaisube (@zaisube)
on CodePen.
同様に、「float: righ;」を解除したい場合は「clear: right;」を、
「float: left;」, 「float: right;」両方とも解除したい場合は「clear: both;」を使用します。
17問目
疑問
・footerのpaddingはどこからどこまで？
→プロゲートスライドのボックスモデルページを参考
中級編
6問目
つまずき
・クラス名と:hoverの間にスペースを入れるのはNG
16問目
つまずき
・クラス名と:activeの間にスペースを入れるのはNG
重要
・ある要素に「position: relatve;」を記述すると、top, left等でその要素自身の左上を0点として位置を変更できる
下記例3はマウスオーバーした時に位置変更をしています。
例3. マウスオーバーすると「move-box」が、元位置を基準に上から5px、右に10px動きます。
See the Pen
200117_position:relative; by zaisube (@zaisube)
on CodePen.
以上です。
