HTML_CSS
Googleでログイン
問題1：複数カラムのボックスを作成しよう
写真、文章の横並びを作成してみましょう。
カラムは、デザインにとってかなり肝になります。
2カラム、3カラムのデザインを作成する事は要点さえ抑えれば簡単です。
初級3で影をつけた要素に対して2カラム3カラムの要素を作成していきます。
今回も見本を参考にしましょう。
カラムは、デザインにとってかなり肝になります。
2カラム、3カラムのデザインを作成する事は要点さえ抑えれば簡単です。
初級3で影をつけた要素に対して2カラム3カラムの要素を作成していきます。
今回も見本を参考にしましょう。
期待する画面
解答ソースコード
<section class="column">
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
<section class="column">
<div class="column__cat"></div>
<div class="column__cat"></div>
<div class="column__cat"></div>
</section>
¥HTML¥
.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¥
補足
Webデザインでは、まず何カラムで構成するのかを考えるようにしましょう。
今回の問題をもう少し解説しておきます。
はじめにdisplayプロパティを使って全ての要素を横並びに指定しました。
その後、justify-contentで要素を中央に寄せ、marginを使って間隔を空けます。
この時点で、見本通りの挙動となりますが解答ではflex-wrapを使用しています。
flex-wrapを使った理由は、スマホなどのデバイスでボックスがはみ出てしまった時に下段に下げて表示させる為です。
今回の問題をもう少し解説しておきます。
はじめにdisplayプロパティを使って全ての要素を横並びに指定しました。
その後、justify-contentで要素を中央に寄せ、marginを使って間隔を空けます。
この時点で、見本通りの挙動となりますが解答ではflex-wrapを使用しています。
flex-wrapを使った理由は、スマホなどのデバイスでボックスがはみ出てしまった時に下段に下げて表示させる為です。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
3カラムの場合は[親要素/子要素・子要素・子要素]
とし親要素に対してdisplay: flex;を付与します。
更に、flex-wrap: wrap;とjustify-content: center;を付与することにより
はみ出たら次の段に中央寄せで表示されます。
3カラムの場合も一緒です。
一つ注意しなければならないのは、各要素のwidth(幅)です。
これは上級問題の中で出題したいと思います。
実務でも多用しますので、まずはカラムを慣れることが重要です。