問題
HTMLやCSSの記述は、プログラミング初心者にとって最初の難関であり、乗り越えても使わなければ忘れてしまうことが多いと思います。私自身もその一人です。今回は、あるサイトを模写してCSSを学習した内容を、自分用の辞書的な参考資料としてまとめてみました。参考になれば幸いです
CSSまとめ
インライン要素同士を重ねたい
position: relative; /*基準となる親要素へ*/
position: absolute; /*動かしたい子要素へ*/
position: absolute;をつけた子要素はposition: relative;が効いている一番近くの親要素を探す。親要素がなければ、基準は画面左端になる。
position:absoluteをつけた子要素に
top: 200px;
left: 100px;
とかを指定することにより。親要素に対して、上から200px、左から100px離れた位置（＝右に動く）においておくことができる。
placeholderを動かしたい
padding-left: 10px;
にすればできる。
これが
こう
ブロック要素を横並びにしたい
floatを使用する。親ではなく、移動したい要素に指定する
float: left;
float: right;
インライン要素を右寄せにしたい
text-align: right;
インライン要素の大きさを変えたい
①文字の大きさを変える
font-size: 25px;
fontawesomeを使用したiタグもfont-sizeで変更することができる
②display: inline-blockを使用する
display: inline-blockとして、widthやheightを指定する
:::note
spanタグをdisplay: inline-blockで大きさを変えることができる
:::
感想
インライン要素やブロック要素を意識しながら模写していくことが大切だと感じた。
以前は、自分でテストサイトを作成する際、bootstrapに頼っていた。それでは力がついていないと感じる。まずは、基本的なことをもう一度学習して、応用でbootstrapを使用できたらいいと思う。