ログイン
問題4

マルチボーダーを作成しよう

ここでは様々な色合いを混ぜ合わせたマルチボーダーを作成します。 複雑なロジックを理解して自分好みのマルチボーダーを表現してみましょう。

アイコン画像

問題4:マルチボーダーを作成しよう

マルチボーダーを作成してみましょう。
色合いを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてればOKです。

見本を参考に作成してください。

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <div class="background-border"></div>
¥HTML¥
            
              .background-border {
    width: 500px;
    height: 500px;
    background-color: #0e6edf;
    background-image: linear-gradient(90deg, rgba(180, 180, 180) 30%, transparent 0%),
                      linear-gradient(90deg, rgba(242, 245, 245, 1) 30%, transparent 0%),
                      linear-gradient(90deg, rgba(0, 128, 128, .6) 30%, transparent 0%),
                      linear-gradient(90deg, rgba(255, 255, 255) 30%, transparent 0%);    
    background-size: 60px, 30px, 50px, 80px;
  }
¥CSS¥
            

コメントのアイコン解説

background-colorでベースとなる背景色を決めます。

次に、background-imageの複数選択できる特性を活かしてlinear-gradientを90deg(縦置きに)で4色ほど並べます。

最後にbackground-sizeを4色分配置させれば完成です。
ログインして解答を見る

コメントのアイコン補足

background-imageについてもう少し解説しておきます。
background-imageを使えば、一回で複数枚の画像を指定することができます。
(使用する際はカンマで区切って書けばOK)

完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!