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

1419 ワード
bootstrap4 Laravel6 bootstrap4 テキストリンク

背景色などを２色にする方法を紹介していきたいと思います

それでは書き方を紹介していきます（今回は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％にすると２色をくっきり分けることができるので便利です！
国旗などを表現したいときにいいですね！

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

今回のまとめ

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