忍者ブログ

栃木県のおもしろあるある

関東地方の1県栃木県にまつわるあるある情報紹介ブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

背景色グラデーション

こんばんは、
燃えPaPaです。

今回も、背景操作の代表的プロパティ、
background
の利用法で、サイトをきれいに見せる最新のすご技で、
背景色のグラデーションの指定方法の解説です。

要素の中で、

background: linear-gradient(#ffffff, #000000);

という指定を入れます。
linear-gradient()という要素指定の中で、
前の色番号が上部の色、後ろの色番号が下部の色を指し、
要素内で、上下できれいなグラデーション表示になります。

CSS2の時代などは、背景色のグラデーションは画像で一生懸命作ってから
背景画像に指定して作ったりしたものですが、
今やこんなに簡単に美しく実現できます。

画像での指定と違い、色味が違うと思えば色番号を変えるだけで、簡単に変更できるのも強みです。

ブロック要素でも、インライン要素でも、
画面に表示される要素すべてで指定できます。

美しいサイトを作るには必須の技術ですね。


燃えPaPa
PR

色指定ルール

スタイルシートだけに問わず、

WEBで作業をしていると、色指定をすることが多々あります。

color: #ffffff;

などがそれにあたります。

この場合、color: プロパティのように、文字色指定の場合、背景色指定の場合、
場面は多々ありますが、
色の指定ルールは共通なので、今回ご説明します。


PC上での色は、

光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。

一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、

65,536色
16,777,216色

までの色を表現できます。

この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。

具体的には、
各値を0~255まで使い、それを16進法で、表現、00~ffとして、
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。

また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。

この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。

なお、
このようなRGBの数値では色のイメージがわかない方は

http://www.colordic.org/

このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。

背景画像

こんばんは、
燃えPaPaです。

今回も、背景操作の代表的プロパティ、
background
の利用法で、背景画像の指定方法の解説です。

要素の中で、

background-image: url("img/bk.jpg")

という指定を入れます。
前半、background-imageが背景画像を決めるプロパティで、
後半のurl("")の中で、背景画像を指定します。
ファイルを参照できるURLを指定する必要があり、
URLは絶対パスでも相対パスでも大丈夫です。
ただし、注意点として画像ファイルを相対パスで指定する場合は、
スタイルシートファイルからの相対パスになります。
※外部スタイルシートにしている場合

ブロック要素でも、インライン要素でも、
画面に表示される要素すべてで指定できます。

背景には色をつける場合と同じくらい画像を表示させることは多いため、
非常に多用されるプロパティです。


燃えPaPa

方針転換

色々ややこしくて申し訳ないのですが、
このブログ、諸事情により、おもしろ画像の収集ブログから、
スタイルシートのリファレンスブログへと移行します。

ちょっと、これまでも別のブログにて、スタイルシート解説は行っていましたが、

タグが消えてしまったりするため、微妙に書きづらく・・・
このninjaブログだと、
htmlタグを書くモードがはっきり分かれているので、こちらで書くことにしました。

これまでは、このブログ、
おもしろ画像の掲載ブログにしていたもので、
ちょっと毛色が変わりますが、
どうぞよろしくお願いします。

なお、これまでの記事も消すのはもったいないので、

おもしろ画像

のひとカテゴリに集約してありますので、
もしよかったらご覧ください。

どんなキーワードだ!?

こんばんは、
燃えPaPaです。

なんとまあ、
先日、
当ブログへの流入キーワードを調べておりましたら、
びっくりワードで

ドナルド ついに気づく

なんてものがありまして、
まさかのワードですが、
調べてみたら、あ、実際にうちにたどり着いたww

どうやら、このスタイルシートブログに方向修正する前に、
こちらでおもしろ画像とか載せるブログにしていた時代がありまして、

なんとその時の画像&記事が、無駄にしっかりインデックスされてまして、
このワードだと、
見事googleで4位とかに来てしまうようですw

世の中どこで検索エンジンにひっかかってくるかわからないものですねw

多方面展開でがんばっていきたいものです。
(もちろんあるジャンルでトップを目指すのが理想ではありますが)


燃えPaPa

貧乏グルメサイトがピンチ!!

こんばんは、
燃えPaPaです。


ちょいと当ブログの内容から反れて、
話題違いになってしまいすいませんが、

実は・・・
まさかの!?

私の所有サイトの中で、

これまで
さんざ育ててきたサイトで、
節約レシピ等を紹介していた

貧乏グルメの燃えPaPa節約レシピ

というサイトが・・・

最近気づいたらば、
なんとまあ!?
サイトタイトルで検索してすら見つからない(>_<)

こりゃほぼ確実にインデックスから消されましたね・・・


なんてこったい!?
ショックです!!!!


同じような現象で、
協力中の出張ヘアメイクサイトの吹っ飛びを報告したりしたこともありますが、
今度は自分のとこが飛びましたww

ある程度SEO対策する以上、リスクはあったんですけど・・・


あーあ、
結構がんばってSEO対策を施していて、
一時期は、googleで

「貧乏グルメ」

というワードでの1位にまで登りつめてたのに
(検索ボリュームはあまり多くありませんでしたが。)

無念orz

配下のページは検索でひっかかったりしているので、
完全に消滅したわけではないですので、
その内復活する予定のはずではありますが、
まあ残念です。

googleのトップページインデックス削除とかされました場合、
たいてい復活までかなりの時間を要し、復活しても、
だいぶ順位の低いところからの再チャレンジになってしまうのです。

何もせずにトップページがインデックスから消されることはないので、
何かペナルティになるような疑いを持たれてしまったのでしょうけど・・・
残念なことです。

まあ、こんな現象は時折あることですし、
こればっかりは、天下のgoogle、
仮に抗議しようが、何しようが変わりませんからねえ

※ウェブマスターツールを使っていれば、
一応の警告や、再審査のやり取りは可能


→別に復活を保証するものでもない


燃えPaPa