【初心者向け】初めての模写コーディングで役立つ豆知識・学習メモ（9/16）

学習内容

• HTML/CSSコーディング練習
• Railsアプリ開発2周目突入（rails new）

学んだこと

HTML/CSSコーディング練習

flex関連

• flex, flex-wrap, justify-content, aligin-itemsは親要素に付ける
• 複数の要素を横並びにしたいときは親要素にdisplay: flex;を指定する
• 要素の間隔を広げたい場合はgap: ○○px;で指定すれば簡単
• また、画像とテキストを横並びにするときは子要素の両方にwidth: 100%;を付ける

ボタン関連

• ボタンを中央寄せしたいときはdisplay: block;とmargin: auto;を指定する
• display: block;を付けてブロック要素に変更
• paddingで余白をとる
• cursor: pointer;と擬似要素でopacityを指定すれば、よりボタンっぽくなる
• ボタンの原型クラスと色付けクラスで分けると汎用性アップ

inputタグ関連

• inputタグを中央寄せするときはwidthで横幅を指定してからmargin: auto;を付ける
• border-radius: 1000px;を指定すると角が丸くなる

footer関連

• footerはcopyrightにクラスを指定してtext-alignを指定すれば任意の方向に動かせる