背景を２色で表示したい時ってありますよね。
今回はCSSだけで簡単に背景を２色で表示させる方法を紹介します。
CSSだけで背景を２色表示する方法
では早速背景を２色で表示させていきます。
今回使用するのは「linear-gradient」。
背景グラデーションさせるためのアレです。
.bg{
background:linear-gradient(90deg,red 0%,red 50%,blue 50%,blue 100%);
}
今回は０〜50%は赤、50~100%までが青と指定します。
同じ色で指定することで、そこまでベタで表示でき、グラデーションをさせることなく背景を２色表示できます。
うまく活用すると背景が２色のレイアウトが組みやすくなるので活用してみてください。
web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！web制作の勉強にオススメの書籍を紹介。web制作会社会社のフロントエンドエンジニアがオススメするweb制作に関する本を紹介します。web制作をこれから始める方、勉強したい方は参考にしてみてください。...
ABOUT ME
