HTML_CSS
Googleでログイン
問題2：calcを使用してみよう
中級壱で作成した要素のカラムの間を空けていきましょう。
その際に利用するのがcalcです。calcは、要素の計算ができます。
通貨で例えると、(ドル - 円)という事ができます。
今回は、class="wrapper"にwidth: 300pxという制約を与えました。
この300pxの中で、見本のように四角要素の間にだけ8pxの隙間を空けてください。
その際に利用するのがcalcです。calcは、要素の計算ができます。
通貨で例えると、(ドル - 円)という事ができます。
今回は、class="wrapper"にwidth: 300pxという制約を与えました。
この300pxの中で、見本のように四角要素の間にだけ8pxの隙間を空けてください。
あらかじめエディタに書くコード
<section class="column column--two">
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
<section class="column column--three">
<div class="column__cat"></div>
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
¥HTML¥
.wrapper {
width: 300px;
margin: auto;
}
.column{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.column__cat {
width: 100px;
height: 100px;
border: 1px solid;
background: red;
box-shadow: 10px 10px 15px -10px;
}
¥CSS¥
期待する画面
解答ソースコード
<section class="wrapper">
<section class="column column--two">
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
<section class="column column--three">
<div class="column__cat"></div>
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
</section>
¥HTML¥
.wrapper {
width: 300px;
margin: auto;
}
.column{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 24px;
}
.column--two .column__cat {
width: calc(50% - 8px);
}
.column--three .column__cat {
width: calc((100% / 3) - 8px);
}
.column__cat {
width: 100px;
height: 100px;
border: 1px solid;
background: red;
box-shadow: 10px 10px 15px -10px;
}
.column .column__cat {
margin-right: 8px;
}
.column .column__cat:last-child {
margin: 0;
}
¥CSS¥
補足
calcの便利なところは、単位が違っていても計算を行なうことができるという点です。
例えば画面幅から100px引いたサイズで表示させたいときなどは、
わざわざ画面幅を調べたりしなくても、100% - 100px とすることで簡単に表示させることができます。
また、今回のようにcalc内で()を使って複雑な計算を行なうこともできます。
活躍しどころがよくある関数なので、必ずマスターしておきましょう。
例えば画面幅から100px引いたサイズで表示させたいときなどは、
わざわざ画面幅を調べたりしなくても、100% - 100px とすることで簡単に表示させることができます。
また、今回のようにcalc内で()を使って複雑な計算を行なうこともできます。
活躍しどころがよくある関数なので、必ずマスターしておきましょう。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
この時、columnクラスではflex-wrapが付与されているはずなので、
3カラムのブロックの内ひとつが300px幅からはみ出てしまい、下段に落ちて表示されていると思います。
そして、2カラムの場合.column--twoの.column__catに対し width: calc(50% - 8px);を付与します。
これは、2カラムなので親に対して幅50%を付与しmarginを8px空けるという処理になります。
3カラムの場合は、簡単に考えると.column--threeに対して(33% - 8px)なのですが、calcは割り算も使用できるので(100% / 3)とできます。
これで、要素の3分割ができました。その値にmarginの8pxを引いてあげればOKです。
.column__catにmarginを8px空けていますが
要件は四角要素の間と言われておりますので最後の.column__catにはmargin: 0;を与えましょう。