1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ララベルで背景色を2色にする方法

Posted at

###背景色などを2色にする方法を紹介していきたいと思いますスクリーンショット 2020-08-24 11.30.54.png

それでは書き方を紹介していきます(今回はLaravelを使っています)

navbar.blade.php
<nav class="navbar navbar-expand-sm navbar-dark" 
style="background :linear-gradient(to top, #330000 0%, #660000 100%);">

・background :linear-gradientを使用します(classのとこは気にしないでください)
・色の指定は()の中身でしています
この場合ではto topなので下から上にかけて色が変化します 
上の画像がこのパターンですね

nabar.blade.php
<nav class="navbar navbar-expand-sm navbar-dark" 
style="background :linear-gradient(to top, #330000 0%, #330000 50%, #660000 50%, #660000 100%);">

このように0%〜50%、50%〜100%にすると2色をくっきり分けることができるので便利です!
国旗などを表現したいときにいいですね!

今回はto topを紹介しましたが
・to top 下から上へ
・to right 左から右へ
・to left 右から左へ
・to bottom 上から下へ
これらで方向の指定が可能となります

###今回のまとめ

今回は背景色の2色について紹介しました
上記はnavタグを使用していますが他のタグでも試してみてくだい!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?