プログラミング復習帳〜その2〜

この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。

Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。

また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします！！

学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです！

2回目のこの記事では主にcssについての学びをまとめていきます！
並べ方や浮かせ方など場所に関する要素を中心に集めてみました。

練習帳その2！

横並びにはflex

headerのメニューリストをfloatを使用して横並びにしていましたが、floatでできることは全てflexでできるため、最近ではfloatでレイアウトすることはほとんどないと教えていただきました。

私のお気に入りの記事はこちら↓

もう迷わない！CSS Flexboxの使い方を徹底解説

https://knowledge.cpi.ad.jp/tech/169/

※2つ目のサイトの【方法】の中にあるjustify–contentの綴りが一つ間違えて書かれていますので注意してください！
私は綴りミスに気づかずコピペをしてしまい、長い間悩む罠にかかってしまいました…笑

flexを使うと本当にいろいろなレイアウトができるため、コーディングが楽しくなりますね！
最近では親要素と子要素を意識しながらHTMLを書けるようになってきました。
親要素、子要素のwidthを指定してjustify-content: space-between！
marginをつける手間も省け、この技は多用しています( ´ ▽ ` )

positionについて

この文章をあそこに持っていきたい！
画像を重ねたい！
と言う時に使用するのがpositionですね！

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

はじめはrelative、absoluteがなかなか理解できず時間を要しました。
また全て浮かせてしまい、要素の高さがなるなることもよくあります笑

最近ではflexと同様に、ここをrelativeにしたらうまいことabsoluteで動かせそうだなーと考えながらhtmlを書いていくことができています(*^^*)

positionを利用すると下で紹介するような中央寄せもできますね！

いろいろな中央寄せの方法

文章を中央寄せしたい。
block要素を寄せたい！
画像を…！

といろいろな中央寄せがしたい時、私はこれらの記事を見ています↓

CSSで中央寄せする9つの方法（縦・横にセンタリング）

https://www.granfairs.com/blog/staff/centering-by-css

私はまだまだvertical-align: middleとalign-items: centerとがごちゃごちゃになってしまうことがあります(￣▽￣)

あとはよくあるwidthの指定し忘れにも注意をしたいですね！

背景編

今回は最後に背景編で終わりにしたいと思います。
背景に手を加えるだけでおしゃれ感がぐんっとアップしますね！

よく見かける背景画像に薄くモヤがかかったような背景の作り方↓

CSS｜背景画像の上に背景色を重ねる方法

背景を斜めに区切る方法↓

https://taneppa.net/bg_separate_css/

背景にストライプや斜線を入れる方法↓

CSS3で斜線・ストライプなどの背景装飾のコードまとめ-コピペですぐ使える！

今回はこの辺りで終わりにします( ´ ▽ ` )
最後まで読んでいただきありがとうございました！