２ヶ月デザイナーがプログラミングを学んでみた14日目

本日もサルワカのサイトをコピーしています。
明日でLPコピーが終わるので
今日は学んだことを述べて明日完成したページを貼ろうと思います

目次：学んだこと
　　　明日やること

学んだこと

今回はテキストを確実に真ん中にする方法を学びました。
僕も知っているようで知らなかったのでこれから役に
立ちそうです。

作るもの

テキストが上下左右均等ですね。

ここで書いたコードがこちらです。

#header {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 300px;
background-color: cornflowerblue;
color: whitesmoke;
font-weight: 700;
margin: auto;
border-radius: 20px;
}

太線が重要な役割をになっています。
一つずつみていきましょう。

display: flex;
flexコンテナつまり親要素に設定できます。これで簡単に横並びになります。

justify-content: center;
横を揃えるプロパティです

align-items: center;
縦を揃えるプロパティです。

ここで大事なのはdisplay: flex;を入れないと真ん中に寄せることができない
ということです。
他にも右に寄せたり左に寄せたりできるらしいので少しずつ覚えていきます。

明日やること

昨日や今日に引き続きサルワカのページ(特にレスポンシブ）
を進めていくのみです。

明日も頑張ります。
では