*

線上のグラデーションを表現する

公開日: : 最終更新日:2016/04/12 CSS ,

linear-gradient()関数を利用すると、指定した色から色へ滑らかに変化する線形グラデーションを表現できます。この関数は、画像を扱えるプロパティとして指定する。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

linear-gradient()関数の引数

方向

グラデーションの方向は、ボックスの中心点を通る「グラデーションライン」の向きで決まる。このグラデーションラインの方向(終了点の方向)を角度かキーワードで指定します。

角度を使うときは、上方向を0度として、右方向が90度、下方向が180度のように時計回りで指定します。角度のです。

キーワードの場合は、「to キーワード」という書き方で、「top」「bottom」「left」「right」またはこれらの単語を組み合わせて指定する。

例えば、「to top」は下から上、「to right」は左から右へのグラデーションとなります。ただ「to top right」という形でキーワードを組み合わせたときは、必ずしも45度にはなりません。

グラデーションラインはボックスの対角線と直交する形で左上から右下へ設定されて、グラデーションの方向が決定されます。なので、ボックスサイズによりグラデーションの角度が変わります。

方向を省略すると、「to bottom」上から下を指定されたものとして扱います。

グラデーションの開始店と終了点は、ボックスの角を通る直線がグラデーションラインと直交する位置です。

カラーストップ
 色と値と位置を、半角スペースで区切って書きます。位置を指定したいとき「10px」「10%」とように実数値+単位か、「%値」で指定します。終了点は「100%」です。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

cateCSSPage

背景色を変更する。

タイトルの通り文背景の色を変更していきます。 背景を変更するときに使用するプロパティは ba

記事を読む

cateCSSPage

HTMLファイルとは別にCSSファイルを別個つくりリンクさせる。

本題に入る前になぜ、HTMLファイルとCSSファイルを分けるのか。 CSSファイルを外部に作る

記事を読む

CSS

グラデーションの繰り返しを指定する

グラデーションは繰り返して表示することができます。線形グラデーションを表示たいなら、repeatin

記事を読む

cateCSSPage

id名,class名をCSSでセレクタにする。

CSSでid名,class名をセレクタに指定する場合、 id名の前には「#(イゲタ)」、class

記事を読む

cateCSSPage

テキストの回り込みを設定するfloatプロパティ

通販サイトやニュースサイトを眺めていると 様々なコンテンツが横に並べて配置され、 それが複数あり

記事を読む

CSS

フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティ

記事を読む

cateCSSPage

style属性を使いCSSを書く、CSS内にコメントつける

HTMLファイル内の開始タグに、style属性を使い直接スタイルを 適用させることができます。st

記事を読む

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを

記事を読む

cateCSSPage

背景画像を設定する

background-imageプロパティを使うことで、CSSで背景画像を 設定することができます

記事を読む

cateCSSPage

要素の表示形式を変更するdisplayプロパティ

要素にはブロックレベル要素とインラインレベル要素というものが あります。 サンプルプログラム

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑