忍者CODE

ログイン

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

PHPの問題

HTML_CSS

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

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カラムの場合[親要素/子要素・子要素]
とし親要素に対してdisplay: flex;を付与します。

更に、flex-wrap: wrap;とjustify-content: center;を付与することにより
はみ出たら次の段に・真ん中寄りになります。

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

実務でも多用しますので、まずはカラムを慣れることが重要です。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET