忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
マルチボーダーを作成してみましょう。
色あいを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてれば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色分配置させれば完成です。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

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

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

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