プログラミング日記＃07　border radiusを使って角丸にする

こんにちは！よっしーです。

今回はプログラミング学習7日目！いつものように学習を振り返ります。

今回の学習内容

・引き続きサイト模写

　-アイコンを角丸にする

　-positionプロパティを使わずに上下左右中央に揃える

引き続きサイト模写にはげみました。いつも変わり映えがないですが…

今模写しているページが終わったらjava scriptを勉強しようと思っています。

しかし、サイト模写をするとかなり理解が深まる。

学習ベースで進めるのもいいのですが、学習ベースはやや「受動的」なんですよね。

この知識を学びましょう、このコードを書いてみましょう、という感じで、「学びたい」ではなく、「学ばされている」という感覚になります。

もちろん、「プログラミングを学びたい！」という大枠の部分は能動的なものだと思いますが、その先の学習方法においても、「この知識を学びたいんだ！」という能動的な感情で取り組むことで、理解の深まり方が全然違うんです。

サイト模写はそれができるんですよね。

「このレイアウトを再現するにはどうしたらいいんだろう…？」という具体的な悩みに直面するから、必死に調べて理解しようとする。

この、「問題が起きた→自分で調べる→解決した」という流れがより理解を深めてくれるなと感じています。

学習ベースで進めていて、自分は理解できている気になっていたら一度サイト模写してみるとよいですよ。

「こんなにも自分はわかっていなかったのか…」と逆に楽しくなってきます。

ちょっと長くなりましたので、学習の振り返り。

学習の振り返り①　border-radiusを使って角丸にする

アイコン画像を角丸にするborder-radiusを使いました。

border-radiusは枠線を丸くしたいときに使われるプロパティです。

.box1 {
    border-radius: 値の指定;
}

このように指定します。

4辺ごとに設定することも可能で、例えば以下のような形にすることもできます。↓

学習の振り返り②　positionプロパティを使わずに上下左右中央に移動させる方法

２日前の学習で、positionプロパティを使って要素を上下左右中央に移動させる方法を学びました。

このpositionプロパティを使って移動させる方法なのですが、色々と調べていくうちに「あれ？これフレックスボックスでやるほうが簡単なのでは？」と思いました。

実際にフレックスボックスで上下左右中央に移動させる方法を書いてみます。

結論は、親要素に対してjustify-content:centerとalign-items:center;を指定してあげるだけです。

<div class="container">
    <div class="box1">
        <h1>ボックス1</h1>
        <p>上下左右中央にうごかします。上下左右中央にうごかします。</p>
    </div>
</div>


/*css*/

 .container {
  background-color: skyblue;
  width: 100%;
  height :500px;
}

.box1 {
 display: inline-block;
 width: 900px;
 background-color: white;
 padding: 40px;
 text-align: center;
}

初期値がこうですね。

これに、CSSを追加します。

.container {
    display :flex;
    justify-content: center;
    align-items:center;
}

上下左右中央に配置することができました。

おさらいしておくと、

justify-content: center;　→flexアイテムを横方向の中央に配置する
align-items:center;　→flexアイテムを垂直方向の中央に配置する

のようです。

フレックスボックスは複数の子要素がある場合に横並びにするだけなのかなと思ってましたが、こんな使い方もできるんですね。

勉強になりました。

まとめ

学習を始めてから1週間が経ちました。毎回noteを更新するのもなんだか楽しいので引き続き頑張ります。

おわりっ！