グラデーションの掛かった見出し:ω | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
囲み枠にグラデーションを掛けて小見出しに。
グラデーション

こんにちワ。o(^▽^)o

ふだん使ってる「見出し」用のHTMLタグに少し飽きちゃったもんでグラデーションの掛かった「小見出し」を、ちょっこら考えてみますた^^;

こういった小見出しって普通はCSS(スタイルシート)を使うことが多いと思いますが、これは「ブログを書く(編集画面、エディタ)」をHTMLモードにさえすれば全てのWebページで使える方法だと思います。CSSは使わない方法です。

記事内の囲み枠、小見出し:グラデーション

囲み枠の背景にグラデーションを掛けるには、基本、以下のコードを使います。

background-image: linear-gradient(色1,色2,色3・・・);

*赤字の色1,色2,色3・・・の箇所にカンマ(,)区切りでカラーコード(例:#ffffff)を記述すると上から順番にその色でグラデーションが掛かります。

■シンプルな囲み枠にグラデーション
ごくシンプルな囲み枠って以下のようなコードを使います。
<div style="border:1px solid #999999;padding:10px;background-color:#ffffff;">~あれや、これや~</div>


~あれや、これや~


・これに薄いピンクと薄い水色のグラデーションを掛けてみました。
~あれや、これや~

上のコードは以下のようになってます。
<div style="background-image:linear-gradient(#ffe4e1,#afeeee);border:1px solid #999999;padding:10px;background-color:#ffffff;">~あれや、これや~</div>

・うぅ~~ん。上の囲み枠だと記事内の目立たせたい文章を強調したい時なんかはいいかもしれませんが、「見出し」として使うには、ちと弱い感じが・・

このコード⇨( font-weight:bold;)を追記して囲みの中の文字を太字にしてみました(↓)。
~あれや、これや~

コードは以下のようになります。
<div style="background-image:linear-gradient(#ffe4e1,#afeeee);border:1px solid #999999;padding:10px;background-color:#ffffff;font-weight:bold;">~あれや、これや~ </div>


*参考⇨WEB色見本 原色大辞典 - HTMLカラーコード


◯思うこと
なんか中途半端な記事になってしまいました。そのうち、グラデーションのHTMLについて、もう少し、しっかりしたまとめを書きたいと思います。
何時になるかわかりませんが(汗)。


☆ブィブィ  ('-^*)/

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス