背景と文字にグラデーション効果が施され、レイアウトや文字なども調整されています。
CSSでは、グラデーションを行えることをすでに説明しましたが、複数のグラデーション設定を重ねることで、複雑なグラデーションも実現できます。
今回は、ページの背景や、文字に対してグラデーションを行ってみたいと思います。
作成例のような
rensyu12.htmlを作成してください。
背景と文字にグラデーション効果が施され、レイアウトや文字なども調整されています。
rensyu12.html と rensyu12.css が入手できます。
rensyu12.html をブラウザで開いてページの内容を確認すると、以下のような状態になっています。
rensyu12.css をテキストエディタで開きます。ここでは、背景に円形のグラデーション radial-gradient() を配置しています。
グラデーションの中心は画面の左上 left top とし、半透明の黄色 #ffff0088 から透明 transparent へのグラデーションとしています。
また、背景が画面全体をカバーするように設定 background-size: cover; し、画面がスクロールしても背景が移動しないように固定 background-attachment:fixed; しています。
黄色のカラーコード #ffff0088 が、通常の６桁ではなく８桁になっていますが、これは最後の２桁が透明度を表している、特殊な書き方となっています。
左上に、円形に広がる黄色いグラデーションが配置されました。
radial-gradient() をカンマ（,）区切りで複数記述します。長いので改行すると以下のようになります。
カンマ（,）と、最後のセミコロン（;）の位置関係に注意です。
具体的には、以下のように設定します。
すでに記入した radial-gradient() の後ろに３つの新しい radial-gradient() が、カンマ区切りで追加されました。
これにより、左下 left bottom から赤い円形グラデーション、右下 right bottom から紫の円形グラデーション、右上 right top から黄緑の円形グラデーションが追加されました。
４色のグラデーションが混ざり合っています。
文字の背景に白い背景が付き、max-width によって横幅がある程度の長さに制限されるようになりました。
まちまちの行間
行間と書体が調整されました。
タイトル文字にグラデーションがかかりました。
以上でデザインは完成です。
CSSを使って、ちょっぴり複雑なグラデーションを実現できました。
backgroundプロパティに対し、radial-gradient()やlinear-gradient()を設定することで、円形グラデーションや、線形のグラデーションが実現できます。
さらにそれらをカンマ,で区切ってつなげることで、複数のグラデーションを重ね合わせた複雑なグラデーションを実現できます。詳しく知りたい場合は、下記のリンクを参照してください。
background: radial-gradient( ～ ) , linear-gradient( ～ ) , : : radial-gradient( ～ ) ;グラデーションの重ね方、位置、方向を変えれば、より複雑なグラデーションを実現できるでしょう。
グラデーションを試してみたい場合は、Gradient Generatorといったサイトもありますので、試してみてください。
ただし複数のグラデーションを重ねる場合は、手前のグラデーションが奥のグラデーションを上書きするので、半透明色を使用する必要があります。
（通常の色は不透明色なので、手前に配置されたグラデーションに完全に上書きされてしまいます）
カラーコードで色を表す場合、通常は
#ff8800のように、２桁の16進数を、赤（Ｒ）緑（Ｇ）青（Ｂ）の３つの要素について並べ、計６桁のアルファベットと数字で表現します。他の方法としては、rgb() 関数を使って10進数で表現する方法もあります。
#ff8800
rgb(255,136,0)
どちらも同じオレンジ色を示します。半透明色を設定する場合、カラーコードの場合、最後にもう２桁、透明度を表す16進数を追加して、
#ff880080のように８桁とします。
また他の方法として、rgb() の代わりに rgba() 関数を使って10進数で表現する方法もあります。#ff880080
rgba(255,136,0,128)
どちらも同じ半透明のオレンジ色です。透明度は 00 が完全な透明で、FF（255）が完全な不透明です。
上の例のオレンジ色は、ちょうど半分透明（50%透過）の設定となります。末尾２桁の数値を下げていくと、より透明に近くなっていきます。
#ff880040
rgba(255,136,0,64)
透明度を下げてより薄くなったオレンジ色です。このようにCSSでは半透明色を簡単に扱えます。
昨今のサイトデザインでは、背景の上にボックスを置いたようなデザインが多く見受けられます。
最近よくあるページデザインの例ちょうどこのページ自身もそんなデザインになっていますね。
こういうデザインを実現するには、通常は
<body>に対して背景色などを設定し、<div>を使ってボックスを作り、横幅や余白などの設定を行って実現します。 ちょうど一つ前の練習問題では、そのような仕組みになっていました。ですが今回の問題では、
<div>を使わずに、同様のデザインを実現しています。どうやってやったかというと、今回は
<html>と<body>を使ったのです。上記のような設定をする代わりに、<html>に対して背景色などを設定し、<body>をボックス扱いして、横幅や余白などの設定を行って実現したのでした。ちなみに、基本的なHTMLの構造をおさらいすると、以下のようになっています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページのタイトルをここに記入します</title> </head> <body> <!-- 本文ここから --> <h1>見出し1</h1> これはページの本文です。<br> サンプルテキスト <!-- 本文ここまで --> </body> </html>HTMLの基本構造構造をよく見ると、全体を囲う
<html>～</html>の中に、<body>～</body>が入っている二重構造になっています。これはHTMLの決まりで、最初からこのようにするよう定められているのです。<html lang="ja"><body> ： ： 本文省略 </body></html>ちょー簡略化したHTMLの基本構造つまり、従来の
<body>と<div>の２重構造で背景の上にボックスを置く構造を、<html>と<body>にやらせれば、同様のボックス構造を<div>を使わずに出来てしまうというわけです。
<html>に対して背景色を塗り、<body>の背景を白くして中央寄せにすると、上記のようなデザインを簡単に作れます。HTMLに特別な加工を施さなくても、普通のHTML構造のまま、最近よくあるデザインを実現できるので、ちょっと便利なテクニックというわけです。😁
実はCSSには現時点では文字に対してグラデーションをする直接的な方法が用意されていません。
そのため、今回はやや変則的な方法で文字に対するグラデーションを実現しています。以下にグラデーションのかけ方の詳細を解説しておきます。もしよければ参考にしてください。
まず最初に、背景に対してグラデーションをかけます。
linear-gradient() に複数の色を追加することで、右に向かって（to right）虹色のようなグラデーションをかけます。background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080);Quick Brown Foxグラデーションの範囲が文字の書かれていないエリアまで広がっているので、
display:inline-block;を追加して、グラデーションの範囲を狭くします。display:inline-block; background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080);Quick Brown Foxこの状態では、背景に色が塗られており、文字の色は黒のままです。
次にグラデーションの範囲を文字の範囲だけに限定するため、
background-clip: text;を追加し、文字が書かれている部分にだけ背景を表示させるようにします。
ちなみに、-webkit-background-clip: text;は、ChromeブラウザやEdgeブラウザで動作させるために必要な記述です。display:inline-block; background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080); -webkit-background-clip: text; background-clip: text;Quick Brown Fox背景のグラデーションが見えなくなりましたが、文字の色は黒色のままです。
これは文字の色が黒色になっており、background-clip: text;によって背景をテキスト内に表示させるようにしても、文字の黒色が優先され、背景のグラデーションが表示されない状態となるためです。そこで、最後に文字の色（
color）を透明（transparent）にします。display:inline-block; background: linear-gradient(to right, #40E0D0, #FF8C00, #FF0080); -webkit-background-clip: text; background-clip: text; color: transparent;Quick Brown Fox文字の色が除去された結果、背景色が見えるようになり、文字にグラデーションが掛かっているように見えます。
このようにして、（やや変則的な方法ではありますが）文字に対してグラデーションをかけることができます。
参考にしてください。