CSS プログラミング ホーム

今更聞けない!CSSだけで背景色を分割する方法

2017年8月29日

 

 

環境

  • 画面分割
  • 分割
  • css
  • CSS
  • css3
  • CSS3
  • html
  • HTML
  • html5
  • HTML5
  • linear-gradient

説明

linear-gradientを使うとcssで背景色をに分割することができます。使用例はこの通りlinear-gradient(開始位置と角度, 開始色, 途中色, 終了色);で引数に関しての説明は下記にまとめました。

引数1引数2引数3
開始位置と角度・開始色途中色終了色

実装

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>


  <style type="text/css">
  body {
    background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);
   }
  </style>
</body>
</html>

実行

スクリーンショット 2017-08-29 14.46.17.png

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

-CSS, プログラミング, ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.