CSSを書いてみよう！ part1

その前に・・・
／各ブラウザで初期で設定されているCSSをリセットしよう！
　　→reset.css  CSSディレクトリの最上階へ

body}タグにベースのCSSを入れていこう
／ベースとなるfont-size、line-height、letter-spacing、font-color等

／Google Fontsで文字を入れいこう　サイトへアクセス
　検索欄にて基本となるfontーfamilyを検索し欲しいものを＋で追加
　【HTML】linkをコピーしてTitleの下にlinkを追加
　【CSS】CSSのfont-familyをコピーしてbodyタグの中にf-f追加

また、作成する時はGoogle Chromeのブラウザにて作成済みのHTMLを表示させながら検証ツール（Mac：fn＋F12）を使用して１つ１つのコードを確認しながらCSSを作り上げていく事がおすすめです！
私はほぼこの検証ツールで逐一確認して作業を進めてみました🤗

／横並びのレイアウトはflexboxを使っていく
　💡flexboxが適用できるようにしっかりとHTMLに親要素タグを作ってお

　レスポンシブ対応として
／.containerのwidthはwidthではなくてmax-widthで指定する
／flex-boxの子要素のwidthは％で指定する
　→（imgのpx数）÷ （containerのwidth） × １００
／flex-box内の子要素が 同じ要素サイズ かつ 等間隔の余白の場合
　calcを使って指定する
　(100 ÷ [要素数])% - [余白の大きさ] × [余白の数] ÷ [要素の数]
例）4列で余白が30pxの場合：width: calc(25% - 30px * 3 / 4)

要素の高さにはheightは使用せずに基本はpaddingかmarginで作成する事！
高さを指定してしまうとレスポンシブの対応が難しくなるから。

🏳 CSSで参考にした記事

／擬似要素関連
バツ✖️の作成：http://design-library.jp/lab/icons-close*/
マル○の作成：https://saruwakakun.com/html-css/basic/circle#section1

／HTMLの記述の順番とは変更せずにCSSでの表示順番を変更する方法！
https://web-yaro.net/css/131/
この記事のおかげでスムーズに順番を変更して表示できたので、
これからは順番を気にせずにデザインして言っても良さそう💓

個人的に愛用したのはやっぱりflexbox!!!
画像と文字、文字と文字、画像と画像を横並びにしたり縦に並びにして
真ん中に寄せる・・・といった動きが一瞬で実現しまうのがこの技！
flexboxと併せて使用頻度が高かったのが
・aline-item：center= 要素の縦方向の均等配置
・justify-content：space-between＝横並べした要素同士を親要素いっぱいの幅に左右に振り分け
・margin：0 auto= width設定した要素をそのwidthの幅均等に配置

この３つ取っても使ってます！

使うと使わないとで見た目が綺麗になるのと、作成したサイズ以外のサイズで表示した時にとても綺麗い表示してくれます！