ログイン

問題1 2カラム3カラムのブロックを作成しよう

HTML_CSSの問題

HTML_CSS

デザインを考えるときは、はじめにカラム構成を考えておくとテンポよくコーディングができるようになります。複数カラムのホームページなどを作る際の手順をしっかり覚えていきましょう。

2カラム3カラムのブロックを作成しよう

問題

写真、文章の横並びを作成してみましょう。
カラムは、デザインにとってかなり肝になります。

2カラム、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¥
            
答えのアイコン

解説

複数カラムを作成するときは、2カラムの場合[親要素/子要素・子要素]
3カラムの場合は[親要素/子要素・子要素・子要素]
とし親要素に対してdisplay: flex;を付与します。

更に、flex-wrap: wrap;とjustify-content: center;を付与することにより
はみ出たら次の段に中央寄せで表示されます。

3カラムの場合も一緒です。
一つ注意しなければならないのは、各要素のwidth(幅)です。
これは上級問題の中で出題したいと思います。

実務でも多用しますので、まずはカラムを慣れることが重要です。
ログインして解答を見る
Webデザインでは、まず何カラムで構成するのかを考えるようにしましょう。
今回の問題をもう少し解説しておきます。

はじめにdisplayプロパティを使って全ての要素を横並びに指定しました。
その後、justify-contentで要素を中央に寄せ、marginを使って間隔を空けます。
この時点で、見本通りの挙動となりますが解答ではflex-wrapを使用しています。

flex-wrapを使った理由は、スマホなどのデバイスでボックスがはみ出てしまった時に下段に下げて表示させる為です。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!