プログラミング学習　5日目

1,CSSでHTMLの要素の角を丸くする方法

div {
 border-radius: 50％;
}

border-radius: ; で角を丸くすることができる。上記の場合は、完全な円形となる。

ちなみに、

div {
    border-radius: 10px 20px 30px 40px;　＃　左上を基準に時計回り
}

上記のように、pxでそれぞれの角を選択して丸みを持たせることもできる。

2,inline-blockはベースライン揃え？

最近調べてわかったのが inline-block だとベースラインで揃うようだ。（インライン要素がベースライン揃えだから？）

トップで合わせたい場合は、

div {
   display: inline-block;
   vertical-align: top;
}

上記の記述で、トップライン揃えができる。

3,float や margin: 0 auto; を使用するのではない
新しいCSSのレイアウトについて

Flexレイアウトは今までのレイアウトよりもさまざまな利点がある。

・複雑な内容を上下左右に簡単にレイアウト可能
・高さが消えず、clearfixが不要
・HTMLソースはそのままに、CSSのみで順序を入れ替え可能
・中央寄せ、均等分布などの画像ソフトで行なうような整列をHTML上で簡単に実現可能
・親や子の箱のサイズが拡大縮小しても、その空間に応じて柔軟性高くレイアウトが可変する

など…。

さらに、Flexレイアウトは大きく分けて2種類の要素があり、それぞれ設定できるプロパティが異なる。

Flexコンテナー
Flexレイアウトを行うための親の箱です。display:flexと設定することでFlexコンテナーになります。 Flexコンテナーとなった箱は更に、内容の 並方向(横・縦) / 横方向の整列方法 / 縦方向の整列方法 / 折り返し方法 などを同時に設定することができます。

Flexアイテム
Flexコンテナー内に直接入っている要素は全て自動的にFlexアイテムとなります。（Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムとはなりません。）

Flexアイテムとなった要素は更に 並び順 / 伸縮比率 / 個別の縦位置などを簡単に設定することができます。

4,Flexコンテナーで使える主なプロパティ

flex-direction 

Flexコンテナーの内容の並ぶ方向を指定できる。
column で指定した場合は、横方向は縦方向に、縦方向の整列は横方向に、整列する。

flex-wrap

Flexコンテナーの内容の横幅の合計が、コンテナの横幅を超えた場合の折り返し方法を指定する。

flex-flow

flex-direction と flex-wrapをまとめて指定できる。

justify-content

Flexコンテナーの内容の横方向の整列方法を指定する。
ただし、flex-direction で column の設定の場合は縦方向の指定になる。

align-items

Flexコンテナーの内容の縦方向の整列方法を指定する。内容が1行の場合に使用する。
ただし、flex-direction で column の設定の場合は横方向の指定になる。

align-content

Flexコンテナーの内容が複数行の整列方法を指定する。