rock_machiner

オタクとしてもプログラマ(本職)としてもヌルッヌルなダメリーマンがどうにか生きる、ある意味ワナビでライフハックなブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Webテク】CSSで背景がグラデーションのボックスを作る【CSS】

WebプログラマやWebデザイナでない人が、HTMLを自分で作成する機会は今ではほとんどありません。
昔は自分のHPを作ることやネタ系のテキストサイトを巡回することなんかが流行りましたし、
僕が学生のころ(5~10年くらい前)はブログが最初期~隆盛期のころでしたので、
自分でタグを打ったりスタイルの設定したり、なんていう行為は結構身近でした。
最近は
かっこいいテンプレートが最初からたくさん用意されていたり、
Twitter Bootstrap みたいなツールも結構充実しているので、
見た目を整えるためにHTMLCSS の記述をゴシャゴシャ試行錯誤することは少ないと思います。

まあでも、僕が(サーバサイドPGなのに)仕事でHTMLCSSをゴシャゴシャ書いていることや、ブログテンプレートなんかもスタイルの設定をいじれるようになっていることを考えると、
0から作ることは少ないにせよ、ちょっとしたところを変えたりすることはまだまだみなさんやってらっしゃると思われます。
自分のブログのタイトルの背景画像をちょっと変えてみたり、
記事のタイトル部分の文字色を変えてみたり、
などなど...ですね。

今回ご紹介するのは、Webサイトのデザインを定義するときに、背景色にグラデーションを設定する方法です。CSS だけで背景にきれいなグラデーションを描けちゃいますので、いままでHTMLの部品(ボタンとかタイトルヘッダとか)の背景をグラデーションにするのにわざわざ画像を用意していた人には参考になると思います。
HTMLはなんとなくわかるけどCSS ってなに?という初心者の方向けに書いていますが、良くご存じの方でも発見があるかもしれませんので、一度ご覧いただければうれしいです。

※以下は、「CSS ?とかようわからんけど、タイトルの背景をグラデーションにしたいんや、ええやろ?」という人向けの記事です。
続きを読むからどうぞ↓


①前提知識(前置き)

◇使用するタグ
HTMLにはいろいろな要素タグが存在しますが、今回はその中でも
<DIV>
というタグをメインに使用します。
DIVとは英語のDIVISIONの略です。
名前の通り、HTMLページ内の部分や区切りを表すのに使うタグです。
例えばこのブログも大まかに言えば
[ <DIV>タイトル部分</DIV> ]
[ <DIV>記事部分</DIV> ]|[ <DIV>右側部分</DIV>]
[ <DIV>フッタ部分</DIV> ]

という構成で作ってあります。
これら一つ一つに対して、背景の色や、枠線の色、中の文字の大きさや色なんかを設定することが出来ます。

◇CSS とは・・・?
CSS はCascade Style Sheetの略称で、
要はHTMLの要素に対してフォントや色などの設定が出来る仕組みのことです。
エクセルやワードでやるみたいに、背景に色を付けたり文字の色を変えたりするときはこのスタイルの設定が必要になります。
細かくは説明しませんが、CSS の書き方が専用に用意されていますのでそれに準拠して記述することで、Web ページを華やかにすることが出来ます。

◇背景の設定方法
CSS で背景色等を指定する場合、
background-color: #FFFFFF;
background-image: url();
といった記述方法でプロパティ(属性)を設定します。
HTMLタグのスタイル属性にそのまま書いても良いですし、CSS のクラス(まとまりみたいなものと思っておいてい下さい)を定義していろいろなタグに適用しても良いです。
今回のグラデーションを実現するのにも上記の
background-image
というプロパティを使います。


②ブラウザ別の見え方対応

◇ブラウザによる違いを吸収しなければ。。。
皆さんはインターネットを閲覧するために、
「Webブラウザ(または単にブラウザ)」
と呼ばれるソフトを使用していると思います。
InternetExplorerだったり
Firefoxだったり
Macの人はSafariだったり・・・。
そしてこのブラウザと呼ばれるソフトによってWebサイトの見え方が違うことが稀によくあります
これはブラウザごとにHTMLやCSS の解釈が異なるせいです。
なぜそんなことになっているのかはこの際置いておいて、とにかく事実として場合によってはWebページの見え方が想定から外れることを覚えておきましょう。
そして、この違いを織り込んでスタイルを設定したりスクリプトを書いたりする対応を
クロスブラウザ対応
と言ったり
マルチブラウザ対応
と言ったりします。
言葉として覚えておいて、表示が崩れたウェブページを見つけた時に
このサイト、マルチブラウザ対応してないな(ニヒルな笑い
などとドヤ顔で呟くと良いでしょう。

◇↑といっても、全部は吸収できないよ
クロスブラウザ対応、マルチブラウザ対応などというと聞こえはいいのですが、
じゃあ実際やるよ、となるとすごく大変です。
世の中には数数多のWebブラウザが存在し、
みなさんご存知のInternetExplorerやFirefoxは言うに及ばず、
GoogleChromeだのSafariだの
挙句の果てにOpera最強伝説だのと、
挙げていけばきりがありません。
それでもたとえば、
「うっうー!IE10とFirefox25とChrome32だけ対応しまーっす!」
てな感じで強く主張できると、最新のブラウザでチェックしてOKとできるのでかなりマシなのですが
これを
「お客さん!マルチブラウザ対応ですよ、マルチブラウザ対応!!」
などと大口叩いた日には
「IEは5.5からお願いするわね~」(Win2000機が現役のとことかあるのであり得るのです!)
とか
「Operaでもヨロヨロ→」
とか
「Safari5.0で表示が崩れるとか、あり得ないって思うな。あふぅ」
とか平気で言われたりします。
そして、それを飲んでしまうと
「自分、もう3日も家に帰ってないゾ・・・。家族が心配さー。。。」
となることが必定です。正直地獄を見ることになるでしょう。

◇プログレッシブ・エンハンスメント
僕が業務でよくやるのは、実は前者の「強く主張する」方です。
特にWindowsXPのサポート切れが間近に迫っていることもあって、最近はIE8以下に関しては切り捨てる主張が通ることも珍しくなくなってきました。
最近のWeb アプリ開発の実例でいくと、
・推奨ブラウザが「IE10以上/Firefox16以上/GoogleChrome23以上」
・それ以下のバージョンに関しては見た目の崩れには対応しない
・Safari、Operaは動作確認すらしない

という、対応で押し通した要件があります。
ここでミソになってくるのが、2番目後半の「見た目の崩れ"には"対応しない」です。
簡単に言えば
「IE9 で見ると表示が崩れたり色がついてなかったりするけれども、機能は全部使える」
という状態でもOKということです。
Web アプリケーションの開発においては、既に合意した画面の見た目や機能が要求されたブラウザで実現できないと分かった時(要件定義や設計段階ではわからないこともあります)にどう解決するかを考えるのが一番大変です。
※ダメグラマの僕の主観ですが・・・
かといって、
GoogleさんのChrome、マジ最高!(絶対にGoogleChromeの最新版でしか見られません)
という主張では、
「それじゃこの話はなかったことに。プログラマー殿、お疲れ様でした。」
と当たり前のことをお客さんに言われて機会損失するだけです。
というわけで、妥協点として
みんなが使っているブラウザの最新版ではきれいに画面表示されるけど、他のブラウザは保証できません。ただ、コレとコレとコレに関しては機能が動くところまでは確認します。
という提案をして絶望を回避することもできるんだぜ!という話でした。
このように、
「きれいに見るには最新のブラウザにしておかなければならない」
というある種の強制をユーザに課す考え方を「プログレッシブ・エンハンスメント」と呼ぶことがあります。
この単語は正直開発をしてる時にやっと使う機会がある程度なので忘れていただいて構いませんが、
万一覚えておけば、もしもの時にドヤ顔する助けになるかもしれません。


③DIVにスタイル設定を付ける
前置きが馬鹿みたいに長くなってしまいましたが、ここからはHTMLとCSSを実際に記述していきます!
まずはスタイルに設定するということをやってみましょう。

◇DIV の用意
背景をグラデーションさせる部品をHTML上に記述します。
既にあるページのタイトル項目なんかに適用させるのでも構いません。
DIV とかのタグは大文字でも小文字でもどっちでもいいです。
DIV タグの中にstyle=""の記述がなければそれも書き加えておいてください。
<DIV style="">
タイトルだよ
</DIV>

◇styleを書く練習として
style=""の中に、部品の縦の大きさと横の大きさを設定しようと思います。
横の大きさ(幅)はwidth プロパティを指定します。これは 320pxにしましょう。
縦の大きさ(高)はheightプロパティを指定します。これは 80pxにしましょう。
そうすると以下のような記述になります。
<DIV style="width:320px;height:80px;">
タイトルだよ
</DIV>

◇まずは基本の背景色の設定
まずはグラデーションなどと贅沢なことを言わずに普通に背景色を設定してみましょう。
背景色を設定するためのプロパティは上記にも記述のある「background-color:#FFFFFF;」を使います。
この#FFFFFFの部分は色を表していて、光の3原色(#RGB)で指定します。
「Web 色辞典」とかでググればいっぱいサンプルが出てきますので参考にしてください。
今回は背景を水色にするパターンを例として記述します。
<DIV style="width:320px;height:80px;background-color:#00DDFF;">
タイトルだよ
</DIV>

ここまでで、このような部品がページ上には表れているはずです。
タイトルだよ


④いよいよグラデーションです
ではいよいよグラデーションの設定をしていきたいと思います。
グラデーションを設定する場合は、「background-image:」プロパティを使います。
通常は画像を設定するのですが、グラデーションも色を指定して
結果、画像扱いになるということでしょう(未確認)。
ここでいうグラデーションには大きく分けて
・線形グラデーション(linear-gradient)
・放射グラデーション(radial-gradient)
の2種類があります。
この両方をほぼマルチブラウザで表現できるようにスタイルの設定をしていきましょう。

◇グラデーションのスタイル記述方法
マルチブラウザ対応において、馬鹿正直に自分で書こうと思うと、
<DIV style="width:320px;height:80px;background-color:#00DDFF;

/* IE10 Consumer Preview Version. */
background-image: -ms-linear-gradient(top, #FF0000 30%, #FFFF00 80%);
/* Mozilla Firefox. */
background-image: -moz-linear-gradient(top, #FF0000 30%, #FFFF00 80%);
/* Opera. */
background-image: -o-linear-gradient(top, #FF0000 30%, #FFFF00 80%);
/* Webkit(Safari/Chrome10). */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, #FF0000), color-stop(0.8, #FFFF00));
/* Webkit(Chrome11+). */
background-image: -webkit-linear-gradient(top, #FF0000 30%, #FFFF00 80%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FF0000 30%, #FFFF00 80%);
/* IE5.5-9. */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFF0000, EndColorStr=#FFFFFF00);


">
タイトルだよ</DIV>

これだけの内容を手打ちすることになります。
また、色の変更があった場合に複数個所を直さなければいけなくなるので効率も良くありません。
※ちなみに上記の内容でこういう風にでます。



◇ジェネレータを使ってスタイル文を生成し、コピペするだけ!
というわけで、
自分で書くのはあほほどめんどくさいので、
自動でCSS のコードを吐き出してくれるツール
を使ってしまいましょう!
以下のサイトを利用します。
マルチブラウザのグラデーションのスタイル記述を出力してもらい、使うときにコピペするだけ!
CSS Gradient Background Maker


このサイトに飛ぶと、こんな画面が出てきますので1項目ずつ解説を入れていきます。
1.Gradient style
Gradient styleでグラデーションの種類を選びます。
Linearが線形、Circularが放射状で、Ellipticalは楕円の放射状にグラデーションさせることが出来ます。
2.Stops
Stopsはしばしcolor-stopsとも呼ばれます。
グラデーション内の配色を指定できる項目です。
3.Offset
Offsetは0~1の間の小数で指定します(0.01=1%)。
その色をどこまで引っ張るかを定義できると思っておいてください。
4.Add Stop
Add Stop一回クリックで中間に配置する色を指定できます。
もちろんひとつといわず2つでも3つでも最初と最後の色の間に挟み込むことが出来ます。
5.Direction(Position)
線形グラデーションの場合はDirectionとして、どの方向に0~1までグラデーションしていくかを選びます。
放射状の場合はPositionで中心点の位置を決め、Sizesで円の大きさを決めます。
中心点をmiddle center以外にしてSizesを変えてみると、その違いを視認することが出来るでしょう。
6.Sample
DIV等に設定した時のサンプルが表示されています。
7.CSS Markup
スタイルのコードが出てきますので、この中身を全コピして自分のHTMLに張り付けましょう。
そうすると、かなりマルチな範囲でグラデーションを実現することが出来ます。

◇グラデーション用のSVG画像を用意する。
スタイルに対して後で色の設定を書き直すことをしないならば、もっと簡単な方法があります。
それは背景に画像を設定してしまうことです。
本末転倒やないか!
とお思いかもしれませんが、ご安心ください。
単純に画像を自分で作って設定するという意味ではありません。
生成サイトにて作ったあるコードをスタイル部分にコピペするだけでグラデーションを実現できます。
以下のサイトを使用します。
SVG Gradient Background Maker
飛んでいたただくと分かりますが、先ほどのスタイル文を生成してくれたサイトとほぼ一緒の見た目をしています。
※Circle EllipiticalはまとめてRadialになっていますが・・・
1点大きく違うのが、CSS markup:の中身です。
background-image:まではわかりますが、後の暗号はナンジャイ??という感じですね。
これ、実はこの文字列で画像を表現しているのです。
詳しく知りたければ[画像 BASE64エンコード 文字列]なんかでググってみてほしいのですが、
要はこの暗号部分がグラデーション画像になっていて、
これをスタイルに張り付ければそれでグラデーションOKベイベー!ということなのです。
※SVGってどんな画像やねん?と感づいた方はかなりセンスがいいですが、説明は省きます。
使われている画像がなじみのあるGIF,JPG,BMP,PNGではないということだけ一応頭に入れておけば大丈夫です。
コレのいいところは、
「画像をアップロードして⇒URL指定して⇒IMGタグ書いて⇒云々」
と面倒なことをしなくてもいいのと、
グラデーションが設定される対象のDIVのサイズを選ばないことです。
もう、生成した暗号文を張り付けるだけ!簡単ですね!!
しかもこの方法でもかなりのブラウザに対応しています。
(なんとIE9もOKなのを確認しました!)
唯一の弱点は暗号が結構長い点です。
あんまり多用するとHTMLのコードがぐちゃぐちゃになったりするので注意しましょう。


というわけで、前置きがクッソ長くて気が滅入ってしまいますが、
要は2種類の方法で簡単にマルチなグラデーションを実現する方法
を紹介する記事でございました。
もっと詳しく知ってみたいと思いの方は、ここよりやや詳しく書いたドキュメントを用意しましたので読んでみてください。
CSSでグラデーションを実現する
上記のページでは、モダンブラウザでの応用編も書いています。
今読んでいただいた分の前置きよりはためになることを保証します。

今回はここまで!また次回~
関連記事

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

about us

    J太郎

    Author:J太郎
    カノジョもいないし、ブログでも書くか!

Counter


    on-line:

作成者:JTROさん / powered by: jQuery & SyntaxHighLighter
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。