html & css

プロゲート七転八起-HTML & CSS編-

progate_html-css

プログラミング初学者である私が、プロゲート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.

以上です。

ABOUT ME
zaisube
自動車部品メーカーで設計業務をしています。 この100年に一度と言われる大変革期を機に、会社にぶら下がっているだけではダメだと、スキルを付けるべくプログラミング、ブログを始めました。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です