CSS
LINEでログイン
Googleでログイン
Twitterでログイン
displayプロパティとは
displayプロパティとは、要素の表示形式を指定するCSSのプロパティです。
ブロックレベル要素をインライン要素にしたり、インライン要素をブロックレベル要素にしたりすることができます。
また、ブロック要素とインライン要素の特徴を併せ持ったインラインブロックという指定を行なうこともできます。
displayプロパティを使って頻繁に使用されるのは上記のような指定以外にも、フレックスボックスの指定に多く使われています。
様々な値が用意されているプロパティなので、しっかり覚えておきましょう。
flex box（フレックスボックス）とは
flex box（フレックスボックス）とは、CSSのレイアウト技法で、HTMLブロックを横並びにすることができます。
フレックスボックスを適用させる場合は、適用させたい要素にdisplay: flex;を記述します。
注意点は、横並びにしたい要素の親要素にdisplay: flex;をあてるという点です。
display: flex;をあてられた要素はコンテナ要素なり、子要素がflexアイテムとなります。
すなわち横並びになる要素は子要素のみで、孫要素には適用されないということです。
間違えやすい部分なのでしっかり覚えておきましょう。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題12：display flexで要素を横並びにしよう
boxsの中に入っているboxを全て横並びで表示させてください。
あらかじめエディタに書くコード
<div class="boxs">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
¥HTML¥
.box {
width: 100px;
height: 100px;
background: white;
border: 1px solid black;
}
¥CSS¥
期待する画面
解答ソースコード
.boxs {
display: flex;
}
¥CSS¥
完了にする！
活動記録をTweetする
今回はboxsが親要素に当たるので、boxsにdisplay: flex;を指定すればOKです。